/* ==========================================================================
   Saeed ur Riaz Premium Editorial Design System
   Palettes: ivory / stone / charcoal / deep-green accent
   Type:     Satoshi (display) + Manrope (body UI)
   ========================================================================== */

/* Center all home page sections (except the hero, which is left-aligned).
   The FAQ moved to its own page, so :not(#faq) is no longer needed here. */
.home-page main section:not(#hero) {
  text-align: center;
}
.home-page main section:not(#hero) .split,
.home-page main section:not(#hero) .split-copy,
.home-page main section:not(#hero) .split-media {
  text-align: center;
  justify-content: center;
}
.home-page main section:not(#hero) .split-copy {
  margin: 0 auto;
}
.home-page main section:not(#hero) .hiw-grid {
  justify-content: center;
  /* stretch, not center.

     This rule is (1,2,3) - the :not(#hero) carries an ID - so it outranks every
     #the-process .hiw-grid rule at (1,1,0) below in page-overrides.css. With
     justify-items: center here, the five step cards stopped filling their 1fr
     tracks and shrank to fit their own widest child, the .hiw-label.

     The damage scaled with the monitor, which is why it read as fine on a
     laptop and wrong on a desktop. Measured card width against its track:

       1440px viewport  track 219px  card 199px   20px dead space  unnoticed
       1600px viewport  track 251px  card 199px   52px dead space  visible
       1920px viewport  track 315px  card 199px  115px dead space  broken

     The card stayed exactly 199px at every width because that is the natural
     width of "STEP THREE - SESSIONS 2-3" in the uppercase 0.62rem label, and
     the tracks grew around it. Five small cards marooned in wide columns with
     a gutter either side is the "card style on pc" fault.

     Centring the CONTENT is not lost by this. .hiw-card is already a column
     flex with align-items: center, and .home-page main section:not(#hero) sets
     text-align: center on line 10 above, so the number, the label, the heading
     and the paragraph all stay centred inside a card that now fills its track. */
  justify-items: stretch;
}
.home-page main section:not(#hero) .section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.home-page main section:not(#hero) .eyebrow {
  text-align: center;
}

/* Global scrollbar accent color */
html {
  scrollbar-color: var(--gold) var(--stone);
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--stone);
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 5px;
  border: 2px solid var(--stone);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-2);
}

:root {
  /* Opt out of automatic darkening, explicitly.

     Nothing on this site declares color-scheme, in CSS or in any meta tag, so
     every browser has to assume the page supports both schemes. Android Chrome
     and Edge act on that assumption: with the device in dark mode they apply
     automatic darkening to light grounds, and they do not restrict it to
     elements they recognise as text. The result is that --butter #FFFFF5, the
     light yellow every content band is painted with, comes out as a muddy,
     visibly darker cream on a phone and stays correct on a desktop. That is a
     browser-level inversion, not a stylesheet rule, which is why measuring the
     computed background at 320/390/768 against 1400 finds every one of them
     byte-identical and still does not match what a phone shows.

     Declaring "light" is the whole fix and it is what keeps mobile matching
     desktop. The alternative, honouring prefers-color-scheme, would mean
     building a dark theme for the entire site, which is not what was asked for
     and is not a change to make as a side effect of a colour bug.

     This is the light-only declaration, not "light dark": the second value
     would tell the browser the page handles both and hand the decision back. */
  color-scheme: light;

  /* Color */
  --ivory:        #FBF8F3;
  --ivory-2:      #F6EFE4;
  --cream:        #FDFBF7;
  --stone:        #EDE6DA;
  --stone-2:      #E3DACA;
  --line:         #E7DECE;

  /* ---- The section ground: a light yellow ----
     Every band on every page wears this instead of --white, so the page reads as
     one continuous sheet rather than a stack of separate white rectangles.

     #FFFFF5 was specified directly, and it is the right value for this palette.
     It is a 3.9% yellow: enough that a band reads warm against the pure white of
     the cards sitting on it, little enough that it stays a ground rather than
     becoming a colour the page is about.

     Two earlier attempts and why they are not this one. #FFFAE0 at 12.2%
     saturation was measurably more yellow but only earned because --muted had to
     be darkened from #7A7063 to #70685A to keep 4.5:1, and that darkening pushed
     --muted on the charcoal footer down from 3.49 to 3.08. #FFEEB2 was worse on
     both counts. --stone #EDE6DA was tried before either and fails outright at
     3.91:1 on --muted.

     On this ground, with no token changed at all: --muted 4.83, --gold 8.55,
     --charcoal-2 12.24, --ink 15.26, --charcoal 16.85. All clear AA, and --muted
     keeps more headroom than it had on --white.

     --line needs no companion token here. It reads 1.33:1 on #FFFFF5 against
     1.33:1 on #FFFFFF, the same weight it has always had, so the section start
     and end marks carry on using it unchanged. A separate --line-butter was
     written for the 12% ground and retired with it. */
  --butter:       #FFFFF5;
  --charcoal:     #201C16;
  --charcoal-2:   #3A342B;
  --ink:          #2A241C;
  --muted:        #7A7063;
  --gold:         #22544C;
  --gold-2:       #2E6B60;
  --gold-soft:    #E4EFEB;
  /* The tinted half of the header wordmark when it sits over a photo banner.
     "Saeed" stays --white and "ur Riaz" takes this, so the wordmark carries two
     inks over an image instead of reading as one flat white.

     This is NOT --gold-soft. --gold-soft measures saturation 0.046, which is
     within a rounding error of neutral: against --white the pair differs by
     1.177:1 and on a photograph at 16.8px it reads as full white, which is what
     it did. The client asked twice for a mix that could actually be seen.

     The constraint is the banner, not taste. The darkest pixel any of the
     thirteen banners presents under the header solves to L 0.1374 (white
     measures 5.60:1 against it), so an ink must reach L 0.7935 to hold 4.5:1 at
     this type size. --gold-soft is at L 0.842 and #CFF7EA at L 0.857, so both
     clear it, but the budget above it is what is being spent: the search for the
     most saturated teal inside the legal band returned, at each hue,

       #E4EFEB  hue 158  sat 0.046  4.76:1   --gold-soft, invisible in practice
       #CFF7EA  hue 160  sat 0.162  4.84:1   this token, 3.5x the colour
       #B8F5E4  hue 163  sat 0.249  4.59:1   punchier, but only 0.09 over the floor
       #85FFF6  hue 176  sat 0.478  4.70:1   max saturation, and cyan, not this brand

     #CFF7EA is the pick because it is the strongest tint that gains contrast
     rather than spending it: it is more saturated than --gold-soft AND has more
     headroom over 4.5:1, 4.84 against 4.76. #B8F5E4 is the next step up and is
     still AA, at the cost of the margin; #85FFF6 is not this palette.

     The reason a saturated option is available at all is that a dark brand colour
     cannot be used here. --gold is L 0.072, and this ground needs 0.7935, so any
     tint is necessarily a light one and the chroma has to come from hue rather
     than from darkness. */
  --banner-ink:   #CFF7EA;
  --white:        #FFFFFF;
  /* Pure black, and deliberately not --charcoal.

     It started with one job: ink that sits on a light fill the element supplies
     for itself, where the job is maximum contrast and nothing else. --charcoal
     (#201C16) is the warm near-black the page uses for body text, but on a white
     pill it reads as a softer grey-brown than the hover state should look.
     Against that white it measures 21:1.

     It now carries every heading on the site as well, which is why the heading
     rule in this file resolves to it. --charcoal is still the body ink and stays
     that way; only the heading layer moved to pure black. */
  --black:        #000000;

  /* Type
     --font-display leads with Bricolage Grotesque because it is the site's
     display face, and roughly forty rules across layout.css and
     page-overrides.css resolve headings, card titles, buttons and nav through
     this one token. Naming it here is what makes the change site-wide; naming it
     only on the h1-h6 rule left every one of those on the old face.

     Satoshi and Manrope stay in the stack as fallbacks, not as design intent.
     Satoshi is still requested from Fontshare on all 25 pages, so if Bricolage
     ever fails to load the page degrades to the previous face instead of to
     Times. */
  --font-display: "Bricolage Grotesque", "Satoshi", "Manrope", system-ui, sans-serif;
  --font-ui: "Manrope", "Inter", "Helvetica Neue", system-ui, sans-serif;
  /* Referenced twice in page-overrides.css but never defined until now, so both
     of those declarations were invalid at computed-value time and the property
     silently fell back to inherit. Pointing it at the body face is what the
     call sites plainly intended. */
  --font-body: "Manrope", "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* Layout */
  --container: 1440px;
  --container-narrow: 1100px;
  --gutter: clamp(20px, 4vw, 56px);
  /* Total horizontal breathing room either side of .container, both sides added
     together, so the per-side figure is half of it. The brief was 3cm of extra
     width each side: 3cm is 113.4px at 96dpi, so the target total is 226.8px.

     Applied as a ramp rather than flat, because flat 226.8px leaves a 320px
     phone with 93px of content and a 390px phone with 163px, which is unusable.
     The 16vw term reaches the full 226.8px at about a 1418px viewport and holds
     it there, so every desktop and large tablet gets the true 3cm, while the
     term scales the margin down with the screen on the way there. Measured
     content width on the way down: 281px at 320, 312px at 390, 429px at 480.

     The 32px floor is the old flat value, so nothing below about 200px of
     viewport moves. */
  --page-pad: clamp(32px, 16vw, 226.8px);
  /* Half of --page-pad, i.e. the per-side figure. Applied as padding-inline on
     .section rather than as a width on .container, so the extra breathing room
     belongs to the sections and the container keeps its original measure. The
     section background still spans the full width; only its content is inset. */
  --section-inset: calc(var(--page-pad) / 2);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --header-h: 80px;
  --header-h-scrolled: 64px;

  /* Elevation */
  --shadow-soft: 0 24px 60px -28px rgba(32, 28, 22, 0.28);
  --shadow-card: 0 14px 40px -18px rgba(32, 28, 22, 0.18);
  --shadow-sm: 0 2px 8px rgba(32,28,22,0.06);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Grain overlay subtle film texture to break digital flatness */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink);
  /* --butter, not --ivory. Every content band now paints --butter edge to edge,
     so this ground is only ever visible in two places: behind the fixed header
     on the pages whose first band is a photo, and during overscroll bounce on
     a phone. Left on --ivory it showed as a cooler strip above a warmer sheet
     and a pale flash on every bounce. The photo banners still declare --white
     behind their own image, and the footer keeps its charcoal, so nothing that
     needs a different ground has lost one. */
  background: var(--butter);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Selection highlight.

   This was --gold-soft (#E4EFEB), a pale mint. On the light page background that
   read as a soft brand tint, but on a dark photo band it read as plain green:
   long-pressing "My Story." on a phone painted a mint slab behind white type.
   The same happened to every heading on a dark surface.

   --stone is the warm neutral already in the palette, so the highlight reads as
   a highlight rather than as a brand colour. The text colour is pinned to
   charcoal rather than inherited: on the dark bands the heading ink is white,
   and inheriting would have put white type on a light slab - a worse contrast
   failure than the green it replaces. The dark bands get their own rule below
   that keeps the type light. */
::selection {
  background: var(--stone);
  color: var(--charcoal);
}

/* On the dark surfaces the type is light, so the highlight has to be dark to
   carry it. This is rgba(255,255,255,0.22) over the photo: the white heading
   stays legible and the mint cast is gone. Applies to the six photo banners,
   .services-hero, .halfhour-cta and the footer - every place the site puts
   white type on a dark or photographic ground. */
:is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero, .services-hero, .halfhour-cta, .site-footer)::selection,
:is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero, .services-hero, .halfhour-cta, .site-footer) *::selection {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}

/* iOS and Android flash their own translucent tap highlight on top of this,
   which stacks two tints and muddies the result. Clearing it leaves just the
   ::selection colour above. */
::selection {
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Focus ring floor, and the reason it is written with :where().

   Auditing the site found 71 selectors with a :hover and only 13 with a
   :focus-visible. Almost every card, carousel control and list row on the site
   gave a mouse user a lift, a tinted border and a shadow, and gave a keyboard
   user nothing but the browser default outline. That is the single largest gap
   in how the site presents itself, and it is the one nobody sees unless they
   tab.

   This is a floor, not a replacement, which is what the zero specificity of
   :where() buys. Every component that already declares its own ring keeps it,
   because .btn, .cinematic-btn, .nav-list a, .legal-toc a, .faq-item summary,
   .cert-arrow and .wa-float all outrank this. Everything else gains a ring for
   free instead of needing a rule per component.

   3px gold at 3px offset copies .btn exactly, so the ring is the same object
   everywhere and does not read as a second style bolted on later. The offset is
   what matters as much as the colour: the ring is drawn OUTSIDE the border box,
   so its contrast is decided by the page ground around the control rather than
   by the control itself. --gold measures 8.55:1 on --butter and 8.61:1 on white,
   which is why the floor can be a single colour across the light parts of the
   site.

   The two dark bands are the exception and they override it rather than relying
   on it: the footer, and the header while it sits over a photo banner. Gold on
   --charcoal is the 1.43:1 failure the stage cards had. Those overrides live
   with their components in layout.css and page-overrides.css. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
ul, ol { padding: 0; list-style: none; }

/* Headings: Bricolage Grotesque at 600, per the type spec.
   This rule used to sit nested inside :root, where CSS nesting compiled it to
   '& h1, & h2, ...' - that resolved to ':root h1' and happened to match, but it
   was one refactor away from silently applying to nothing. It is a top-level
   element selector now.

   var(--font-display) already leads with Bricolage Grotesque, so naming the
   face here again would be redundant. 600 replaces the old 700: Bricolage's 700
   is a distinctly heavier cut, and 600 is the weight the spec calls for.

   The ink is --black, not --charcoal. Headings are one colour site-wide and
   that colour is now pure black, so the warm near-black #201C16 that body copy
   still uses is out of the heading layer entirely. Contrast moves the right way
   on every light ground the headings sit on: --butter 16.85:1 -> 20.5:1,
   --white 17.4:1 -> 21:1, --stone 13.7:1 -> 16.9:1, --stone-2 11.8:1 ->
   14.6:1. All were AA before and all are AA now with more headroom, so nothing
   that passed on --charcoal fails on --black.

   The dark bands are unaffected because each of them already declares its own
   light heading ink against a class selector that outranks this element
   selector: .authority, .trans-form and .site-footer in layout.css group
   h1-h6 with the rest of their light type, .stage h3 is ivory, .final-cta and
   .services-hero are white, and the eight photo banners are pinned to --white
   in page-overrides.css. Those rules were load-bearing for contrast before
   this change and they still are. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--black);
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--charcoal); }
em { font-style: normal; }
small { font-size: 0.875em; }
blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 3px solid var(--gold);
  background: var(--stone);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: normal;
  color: var(--charcoal-2);
}
hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 2em 0;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
  max-width: var(--container);
}
.container-narrow {
  width: min(100% - 32px, var(--container-narrow));
  margin-inline: auto;
  max-width: var(--container-narrow);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 1000;
  background: var(--charcoal); color: var(--ivory);
  padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1em;
}
.eyebrow .dot { color: var(--gold); }
.eyebrow.light { color: var(--gold); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-display);
  /* 600, not the 700 this used to carry. Every .display / .h-display hero on
     the site picks this up, so leaving 700 here would have put the single
     biggest piece of type on the site on a different weight from every other
     heading, against the spec. */
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Leading tightened site-wide: ~5-10px less at each class's max font size.
   The scale is unitless, so the px saving scales with the type size - the
   big display classes land in the 5-10px band, the small ones proportionally
   less, which keeps their line-height safely above 1. */
.h-display {
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.h-section {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.h-mid {
  /* This figure no longer governs at any width. breakpoints.css takes .h-mid
     to clamp(1.6rem, 3.1vw, 36px) from 769px up and to clamp(1.2rem, 5vw,
     1.6rem) below it, matching .h-section at both ends. .h-mid is used for
     section headings - "Get in Touch", "Send a message", the three legal
     headings - and 28px against .h-section's 36px was one component at two
     sizes depending on which class the markup happened to carry.

     The 28px cap this comment used to justify was written for one heading, the
     featured title on resources.html, "The dilemma of being present", measured
     at 484px of text in a 394px column. That heading is now 36px and sets on
     two lines in that column. That is the trade the unification makes: it is a
     section heading like its siblings, and it wraps rather than carrying a
     ceiling of its own. It does not overflow - the column holds the text - so
     this is a line break, not a break of the layout. */
  font-size: clamp(1.5rem, 2.8vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h-sm {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.em-serif { font-style: normal; }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--charcoal-2);
  max-width: 52ch;
  line-height: 1.75;
}

.text-sm { font-size: 0.9rem; }
.text-xs { font-size: 0.8rem; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-ui); }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.lh-tight { line-height: 1.2; }
.lh-normal { line-height: 1.5; }
.lh-relaxed { line-height: 1.75; }
.ls-tight { letter-spacing: -0.02em; }
.ls-normal { letter-spacing: 0; }
.ls-wide { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--charcoal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn .arw {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
.btn:hover .arw { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.btn-dark { --btn-bg: var(--charcoal); }
.btn-light { --btn-bg: var(--ivory); color: var(--charcoal); }
.btn-gold { --btn-bg: var(--gold); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-outline:hover { background: var(--charcoal); color: var(--ivory); }
.btn-outline.light { color: var(--ivory); border-color: rgba(251,247,240,0.6); }
.btn-outline.light:hover { background: var(--ivory); color: var(--charcoal); }

/* Cinematic magnetic button dark-sweep fill, glow, 3D press */
.cinematic-btn {
  --btn-bg: #FFFFFF;
  --btn-text: #1B4A40;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 190px;
  height: 56px;
  padding: 0 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.5s cubic-bezier(.16, 1, .3, 1),
    border-color 0.65s cubic-bezier(.16, 1, .3, 1);
}
.cinematic-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  border-radius: inherit;
  transform: translateY(105%);
  transition: transform 0.65s cubic-bezier(.16, 1, .3, 1);
}
.cinematic-btn::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  filter: blur(30px);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.cinematic-btn span {
  position: relative;
  z-index: 2;
  transition: color .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.cinematic-btn .btn-arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(34, 84, 76, .1);
  overflow: hidden;
  transition:
    background .45s ease,
    color .45s ease,
    transform .6s cubic-bezier(.16, 1, .3, 1);
}
.cinematic-btn .btn-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.cinematic-btn:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.cinematic-btn:hover::before { transform: translateY(0); }
.cinematic-btn:hover::after { transform: translate(-50%, -50%) scale(1); }
.cinematic-btn:hover span:not(.btn-arrow) { color: #fff; }
.cinematic-btn:hover .btn-arrow { background: #fff; color: var(--gold); transform: rotate(-90deg); }
.cinematic-btn:hover .btn-arrow svg { transform: translate(0, -2px); }
.cinematic-btn:active { transform: translateY(0) scale(.96); }
.cinematic-btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.btn-sm { padding: 12px 22px; font-size: 0.74rem; }

/* Text link with animated underline */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 4px;
}
.text-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link .arw { transition: transform 0.35s var(--ease); }
.text-link:hover .arw { transform: translateX(5px); }
.text-link.gold { color: var(--gold); }

/* ---------- Scroll Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}