/* ==========================================================================
   Aden & Co Solicitors — UK Immigration Fee Waiver paid landing page
   Campaign page 4 of 8.

   Design system: "Warm Editorial Legal"
   (Aden_Co_Website_Design_System_Reference_Palette.pdf)
   Closed palette. No colour, typeface or shape outside the tokens below.

   BUILT ON LANDING PAGE 1's SYSTEM, at the client's instruction. That means
   page 1's tokens, its 4px geometry, its light canvas, its hairline-rule
   grids, its 900-weight two-tone headline, and — the decision that matters
   most here — ESPRESSO as the reserved WhatsApp colour rather than page 3's
   green. Page 3 introduced a green that is not in the Aden & Co palette;
   page 1 reserves a colour that is. This page follows page 1.

   THE HEADER, HERO AND THE BAND BENEATH THEM ARE BUILT TO THE CLIENT'S
   MOCKUP (18 Sep 2026): a five-item nav, a full-bleed Westminster
   photograph, a row of four proof points (since removed), two hero actions
   and a dark band with a curved top. The rest stays in page 1's language.

   The walnut benefit bar under the header was removed at the client's
   instruction the same day.
   ========================================================================== */

:root{
  /* --- Closed colour system ------------------------------------------- */
  --paper:        #F0F0F2;  /* primary canvas                              */
  --paper-alt:    #E7E5E5;  /* alternating sections                        */
  --walnut:       #7F4E35;  /* primary accent — form / primary CTA colour  */
  --walnut-hover: #89563B;  /* richer accent / hover                       */
  --charcoal:     #484441;  /* primary typography + dark surfaces          */

  /* --- The reserved conversation colour --------------------------------
     ESPRESSO, as page 1 reserves it. It carries every WhatsApp control —
     #wa-header, #wa-hero, #wa-mid, #wa-final, #wa-sticky — and the WhatsApp
     fallback link inside the form's failure message.

     THE RULE IS NO LONGER ABSOLUTE. The client's mockup draws the band under
     the hero in the same warm brown as its WhatsApp buttons, so .trustband
     takes espresso as a SURFACE. The brief reserves the colour "and nowhere
     else", on the argument that the exclusivity is what makes a WhatsApp
     control unmissable, so this is a real trade — made deliberately, to
     match the mockup. To restore the rule in one line:
         .trustband{ background:var(--charcoal); }
     The mid-page band and the footer already take CHARCOAL for exactly that
     reason, which is also what page 1 does with its dark surfaces.          */
  --espresso:     #3B2F29;  /* RESERVED: WhatsApp controls ONLY            */
  --espresso-dk:  #2E2420;  /* WhatsApp hover only                         */

  --stone:        #C9BFBB;  /* cards / image frames / final CTA ground     */

  /* Muted body copy. Page 1 sets this to the palette's Warm Taupe #8E7A70,
     which measures 3.57:1 on paper, 3.24:1 on paper-alt and 3.86:1 on
     white — it FAILS AA for text at these sizes, and it carries most of the
     body copy on the page. Darkened 40% towards Charcoal, the palette's own
     typography colour: a mix of two existing tokens, not a new one,
     landing at 4.99 / 4.53 / 5.40 on those three grounds.
     PAGES 1-3 HAVE THE SAME PROBLEM AND SHOULD TAKE THE SAME FIX.          */
  --taupe:        #72645d;

  /* Light Clay. Kept as a palette token, but it carries NO TEXT on this
     page: it measures 3.04:1 on paper and 2.76:1 on paper-alt, so even the
     large process numbers fail on the alternating band. Every number here
     is walnut instead — see .card__num and .step__num.                     */
  --clay:         #A48371;

  --white:        #FAF9F8;  /* cards / high-contrast light text            */
  --border:       #D6D0CD;  /* rules / form borders                        */
  --error:        #8C2F1F;  /* functional validation only                  */

  /* --- Shape, spacing, motion -----------------------------------------
     Page 1's geometry: a 4px corner, not a soft rectangle. The page reads
     as considered because the shapes are restrained, not because they are
     rounded.                                                              */
  --radius: 4px;
  --radius-lg: 6px;
  --gutter: 22px;
  --maxw: 1320px;
  --section-y: 64px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width:768px){ :root{ --gutter:24px; --section-y:88px; } }
@media (min-width:1100px){ :root{ --gutter:32px; --section-y:120px; } }

/* ------------------------------------------------------------------ base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:"Montserrat","Helvetica Neue",Arial,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
/* <picture> must not introduce a box of its own, so the <img> keeps
   behaving exactly as it did in the grid and flex layouts. display:contents
   also promotes <source> to a child of the layout, where it lays out as a
   real block and silently consumes a grid cell — so it is hidden. */
picture{ display:contents; }
picture > source{ display:none; }
a{ color:var(--walnut); }
button,input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0 0 .5em; color:var(--charcoal); letter-spacing:-.02em; }
h1{ font-weight:900; font-size:clamp(1.9rem,5.2vw,3.35rem); line-height:1.04; letter-spacing:-.035em; }
h2{ font-weight:800; font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.08; }
h3{ font-weight:700; font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.25; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--paper-alt); }
.section__label{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--walnut); margin:0 0 14px;
}
.section__intro{ max-width:62ch; }
.lede{ font-size:1.0625rem; }
.muted{ color:var(--taupe); }
.small{ font-size:.8125rem; line-height:1.55; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--walnut); outline-offset:2px; }
/* On the dark surfaces the walnut ring disappears, so focus switches to the
   palette's off-white there. */
.cta-band :focus-visible,.footer :focus-visible,
.sticky-bar :focus-visible{ outline-color:var(--white); }

/* Anchor targets stop clear of the top edge so a jump lands on the element
   itself rather than jamming it to the edge. */
/* Every nav target, so a jump lands on the element rather than jamming it
   to the top edge. */
#enquiry,#process,#solicitor,#services,#reviews,#top{ scroll-margin-top:20px; }

.only-narrow{ display:none; }
@media (max-width:767px){ .only-wide{ display:none; } .only-narrow{ display:inline; } }

/* ============================ BUTTONS =================================
   COLOUR, not shape, separates the two kinds of control, and that
   distinction is the whole point of the page:

     ESPRESSO = talk to a person  (WhatsApp — reserved, nothing else)
     WALNUT   = fill something in (the form submit and every primary CTA)
     OUTLINE  = a quiet secondary

   Contact-by-conversation and contact-by-form must never look like the
   same control.
   ====================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 24px;
  border:1px solid transparent; border-radius:var(--radius);
  font-size:.9375rem; font-weight:700; letter-spacing:.01em; text-align:center;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .12s var(--ease);
}
.btn svg{ flex:none; }
.btn__arrow{ transition:transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* Primary / form-side action — WALNUT */
.btn--primary{ background:var(--walnut); color:var(--white); }
.btn--primary:hover{ background:var(--walnut-hover); }

/* Secondary — outlined */
.btn--secondary{ background:transparent; color:var(--charcoal); border-color:var(--walnut); }
.btn--secondary:hover{ background:var(--walnut); color:var(--white); }
.btn--on-dark.btn--secondary{ color:var(--white); border-color:var(--white); }
.btn--on-dark.btn--secondary:hover{ background:var(--white); color:var(--charcoal); }

/* WhatsApp — ESPRESSO. This colour appears nowhere else on the page. */
.btn--whatsapp{ background:var(--espresso); color:var(--white); }
.btn--whatsapp:hover{ background:var(--espresso-dk); }
.btn--whatsapp:active{ transform:translateY(1px); }

.btn--sm{ min-height:44px; padding:10px 16px; font-size:.8125rem; }
.btn--block{ display:flex; width:100%; }

/* ============================ HEADER ==================================
   Thin and clean: identity left, the Google rating centred from 960px, the
   WhatsApp action right.

   The mockup adds a five-item nav; every item is an in-page anchor, so
   nothing here leaves the funnel. Desktop only — below 1100px the nav comes
   off and mobile carries the logo and the WhatsApp button, with no
   hamburger because every target is already on the page in reading order.
   ====================================================================== */
.header{ background:var(--paper); border-bottom:1px solid var(--border); position:relative; z-index:20; }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,1.6vw,26px); padding-block:10px; min-height:76px;
}
/* The four groups never shrink — a squeezed nav item breaks onto two lines,
   which is what made this row look broken. They are shown or hidden at
   breakpoints instead, never compressed. */
.header__inner > *{ flex:0 0 auto; }
.brand{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:inherit; }
.brand__mark{ width:38px; height:auto; }
.brand__name{
  display:block;
  font-weight:900; font-size:1.0625rem; letter-spacing:-.025em; line-height:1.08;
  text-transform:uppercase; color:var(--charcoal); white-space:nowrap;
}
.brand__strap{
  display:block; font-size:.5625rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--taupe); margin-top:3px; white-space:nowrap;
}
/* The stars are decorative; the rating is spoken by the link beneath them,
   so a screen reader is never read a row of glyphs. */
.header__reviews{ display:none; text-align:center; white-space:nowrap; }
.stars{ color:var(--walnut); letter-spacing:.12em; font-size:.9rem; line-height:1; }
.header__reviews a{
  display:inline-flex; align-items:center; min-height:26px; margin-top:1px;
  font-size:.625rem; font-weight:600; white-space:nowrap;
  letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal);
  text-underline-offset:3px;
}
.header .stars{ font-size:.8125rem; }

/* ---- Navigation ------------------------------------------------------
   From the client's mockup. Every item is an in-page anchor, so nothing
   here leaves the funnel. Desktop only — below 1100px it comes off, and
   there is no hamburger to replace it because every target is already on
   the page in reading order.
   ---------------------------------------------------------------------- */
/* The nav takes the flexible space between the brand and the rating and
   centres itself in it, so the gaps read as deliberate rather than as
   whatever happened to be left over. */
.nav{ display:none; align-items:center; justify-content:center; gap:clamp(14px,1.5vw,26px); }
.nav__link{
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; padding-bottom:3px;
  font-size:.9375rem; font-weight:500; letter-spacing:-.005em;
  color:var(--charcoal); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease);
}
/* The rule hugs the text rather than floating inside the 44px tap target. */
.nav__link::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% + 11px); height:2px;
  background:var(--walnut); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__link:hover{ color:var(--walnut); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--walnut); font-weight:700; }
/* 1300px, not 1100px. Measured: brand + nav + rating + action need about
   1190px of content, and below that something has to give. The nav is what
   goes — the rating is social proof the brief asks for, the nav is not in
   the brief at all, and every nav target stays reachable by scrolling. */
@media (min-width:1300px){ .nav{ display:flex; flex:1 1 auto; } }

/* The header action carries the same white WhatsApp disc as the hero. */
.header .btn__badge{ width:32px; height:32px; }

.header .btn{ flex:none; white-space:nowrap; min-height:50px; padding:9px 20px 9px 10px; font-size:.875rem; border-radius:var(--radius-lg); gap:11px; }
.header .btn__long{ display:none; }
@media (min-width:560px){
  .header .btn__long{ display:inline; }
  .header .btn__short{ display:none; }
}
/* The mockup's header is built for a desktop: a 46px mark, a 20px wordmark
   and a 52px action. At 320px those three add up to more than the row, and
   the wordmark's nowrap would clip. Below 560px the action scales back to
   roughly page 1's size and the wordmark is allowed to wrap. */
@media (max-width:559px){
  .brand__mark{ width:30px; }
  /* The groups are pinned to flex:0 0 auto so a nav item can never be
     squeezed onto two lines. On a phone the nav is gone and the brand is the
     one thing that MAY give, so it gets its shrink back — otherwise the row
     wants ~331px inside 276px at 320 and runs off the edge. */
  .header__inner > .brand{ flex:0 1 auto; min-width:0; }
  .brand__name{ font-size:.75rem; white-space:normal; }
  /* CONVERSION: the strapline is the only regulatory signal in the first
     mobile viewport — the trust band and the SRA strip are both below the
     form. Hiding it entirely left a phone visitor with nothing that says
     "solicitors" before the form. It stays, shortened to the half that
     matters, from 380px up; below that there is genuinely no room. */
  .brand__strap{ font-size:.5rem; letter-spacing:.06em; margin-top:2px; }
  .brand__strap .only-wide{ display:none; }
  .header__inner{ padding-block:7px; min-height:64px; gap:10px; }
  .header .btn{ min-height:44px; padding:8px 14px 8px 8px; font-size:.8125rem; gap:8px; }
  .header .btn__badge{ width:28px; height:28px; }
  .header .btn__badge svg{ width:16px; height:16px; }
}
@media (min-width:960px){
  .header__reviews{ display:block; }
  .brand__mark{ width:46px; }
  .brand__name{ font-size:1.25rem; }
}

/* ============================== HERO ==================================
   Built to the client's mockup (18 Sep 2026): a full-bleed Westminster
   photograph, a chip eyebrow, a two-tone 900-weight headline, a row of
   two actions, and the conversion form card on
   the right. The hero's foot curves into the dark trust band beneath it.

   The photograph is the ground; a left-to-right wash in the page's own
   off-white does the lightening, so swapping the image needs no new CSS.

   NOTE: the campaign brief rules out Big Ben by name. It is here at the
   client's explicit instruction. See README.
   ====================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--white);
  padding-block:44px 92px;
}

/* ---- The photograph ------------------------------------------------
   FULL BLEED, BLURRED, WITH A SOFT WHITE BLOOM OVER THE COPY — built to
   the client's mockup (19 Sep 2026), which is the third and final word on
   this hero.

   Three things make it read the way the mockup does, and all three matter:

   1. FULL BLEED. The photograph spans the whole hero, so Big Ben sits in
      the middle of the composition rather than being cropped into a corner.
   2. BLUR. The mockup's image is softly out of focus. That is not just a
      look — it is what lets a photograph sit under text at all, because it
      removes the high-frequency detail that makes type hard to read. The
      image is scaled slightly so the blur cannot expose the edges.
   3. A BLOOM, NOT A GRADIENT. The white is a radial wash centred on the
      copy, not a left-to-right ramp. That is why the mockup looks soft
      rather than striped: the light falls off in every direction from the
      text, so the photograph returns around the tower and at the corners.

   The bloom is also what holds the contrast — see the measured figures in
   the README. Re-measure after replacing the photograph.
   ---------------------------------------------------------------------- */
/* overflow:hidden so the scale(1.05) used to hide the blur edges cannot
   report past the frame — .hero clips it visually either way, but this
   keeps overflow audits honest. */
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  filter:blur(3px) saturate(.95) brightness(1.04);
  /* the blur softens the frame's own edges, so the image is scaled past
     them; .hero clips the overflow */
  transform:scale(1.05);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    /* The bloom — centred on the copy and sized so it is still strong
       where the copy ends (49%) and has let go by the time the tower
       stands (58%). The radius is deliberately tight: a wide one washes the
       whole frame, which is what flattened the photograph before. */
    /* Reworked 19 Sep 2026: the client asked for more photograph through
       the band between the copy and the figure. Two changes, both aimed
       at the same thing — the old ramp held .86 all the way out to 58% of
       its radius and then fell off a cliff to .32 by 72%, which read as a
       flat milky wash with a visible edge where it ended.

       1. LOWER alphas across 48..80%, so the photograph shows through the
          gap rather than being veiled out of it.
       2. MORE stops through the handover, so the falloff is gradual
          instead of a four-point step. That is what removes the edge.

       The copy column ends at 49%, which is 55% of this gradient's radius
       — still ~.67 opaque there, which is what keeps the headline clear. */
    radial-gradient(ellipse 49% 128% at 22% 48%,
      rgba(250,249,248,.96)  0%,
      rgba(250,249,248,.93) 36%,
      rgba(250,249,248,.82) 48%,
      rgba(250,249,248,.60) 58%,
      rgba(250,249,248,.34) 68%,
      rgba(250,249,248,.14) 80%,
      rgba(250,249,248,.03) 92%,
      rgba(250,249,248,0)  100%),
    /* a lift at the crown and into the curve at the foot */
    linear-gradient(180deg,
      rgba(250,249,248,.38) 0%, rgba(250,249,248,0) 24%,
      rgba(250,249,248,0) 74%, rgba(250,249,248,.30) 100%);
}
/* ---- Phone: the mockup's split, not a veil --------------------------
   The client's mobile mockup (19 Sep 2026) does not hide the photograph
   behind white — it MOVES it. The figure holds the right of the frame,
   the copy sits on solid white at the left, and one horizontal blend
   hands the one to the other.

   Three deliberate differences from the desktop treatment:

   1. NO BLUR. The photograph is sharp here. At this size it is the only
      texture on the screen; blurring it reads as a mistake rather than as
      depth. Nothing is asked to sit on top of it, so nothing needs it
      softened.
   2. A HORIZONTAL BLEND, NOT A BLOOM. The white is solid at the left
      edge and has let go completely by the right, so the copy never
      competes with the image for the same pixels.
   3. 100deg, NOT 90deg. The axis is tilted so the white reaches further
      right at the top than at the foot — which is how the mockup draws
      the boundary, following the figure's shoulder line.

   The stop positions are paired with .hero__copy's max-width below: the
   copy stops at 72%, the blend is still at .55 there and does not let go
   until 84%. Move one and you must move the other.
   -------------------------------------------------------------------- */
@media (max-width:899px){
  /* THE PHOTOGRAPH GETS ITS OWN BOX, and this is the whole trick on a
     phone. The mockup's hero is ~1080px tall and holds only copy; this
     one is ~1700px because the form card lives in it too. Cover-fitting a
     2:3 portrait into a box that tall (aspect 0.23) magnifies it about 6x
     and all you see is a smear of one shoulder. Bounding the image to
     880px — roughly where the form card starts — brings the aspect back
     to 0.44 and the whole scene returns: sun, aircraft and figure.

     object-position's horizontal half is the one that matters (the
     vertical half does nothing — the image is scaled to fill the box's
     HEIGHT, so it overflows sideways only, which is also why the lift had
     to be done as a crop in build-images.js).

     60% is measured, not guessed. The box shows a 638 master-px window of
     an 853px frame. At 25% that window was x=98..558: the sun, the
     aircraft and the figure's left arm, with his head starting at x=550
     just past the right edge — which is why he read as a shapeless dark
     mass rather than a person. At 60% the window is x=129..767, which
     holds the sun, the aircraft AND the head, and lands the head at
     66%..100% of the box.

     The 720px box height is part of the same calculation: a taller box
     magnifies the frame and NARROWS this window. At 880px it was 499px
     wide, too narrow to hold the sun and the head at once — they are 640
     master px apart. Raise the box and you lose one of them. */
  .hero__bg{ inset:0 0 auto 0; height:720px; }
  .hero__bg img{
    height:100%;
    object-position:60% 50%;      /* see note above — sun, aircraft, head */
    filter:saturate(1.02);        /* sharp — see note 1 */
    transform:none;               /* nothing to hide without the blur */
  }
  .hero__bg::after{
    background:
      /* The mockup's own handover, used at every width below 900px. An
         earlier pass gave phones a gentler one (46/62/78/90) to buy back
         copy width, but that washed the figure out to a ghost — he was
         only 28% opaque where he should be solid. The copy caps below
         hold the body text inside 54%, where this ramp is still at .95,
         so the photograph can be given its full strength instead. */
      /* Handover pulled ~6% left once the proof list was removed: the
         widest copy is now the headline at 72%, and that only has to clear
         3:1, so the photograph can come forward sooner and the figure
         reads as a figure rather than as a ghost behind the buttons. */
      linear-gradient(100deg,
        rgba(250,249,248,1)    0%,
        rgba(250,249,248,1)   36%,
        rgba(250,249,248,.93) 50%,
        rgba(250,249,248,.50) 66%,
        rgba(250,249,248,.14) 80%,
        rgba(250,249,248,0)   92%),
      /* The foot must reach FULL white by 100%, not .90: the box ends at
         880px and the hero's own white continues below it, so anything
         short of 1 leaves a visible horizontal seam there.
         Brought forward from 58/82 once the figure was lifted (13% off the
         top of the tall crop): raising him pushed his dark mass up into
         the microcopy's row and dropped it to 3.80:1. Whitening the foot
         earlier costs nothing now, because the part of him worth seeing
         has moved above it. */
      linear-gradient(180deg,
        rgba(250,249,248,0)   50%,
        rgba(250,249,248,.50) 74%,
        rgba(250,249,248,1)   94%);
  }
}

/* One bounded box serves every width below 900px. At 390 it crops the
   frame left/right; at 853 it crops it top/bottom (object-position 50%
   keeps the aircraft and the figure's head inside either way). There is
   no second gradient here on purpose — the treatment above is already
   the mockup's own, at every phone and tablet width. */

/* The curved foot. Two layers, as the mockup draws them: a pale swoosh
   above and the espresso band's own curve below, so the dark band appears
   to rise into the photograph on the right. */
/* z-index 1, NOT 3: above .hero__bg (0) so it covers the photograph, below
   .hero__grid (2) so it can never paint over the form card. At 96px the
   curve's box already overlaps the card's foot by 23px on a phone, and at
   z-index 3 the only thing preventing a visible collision was that the
   SVG's top 24px happen to be transparent — luck, not design. */
.hero__curve{
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  width:100%; height:96px; display:block; pointer-events:none;
}
@media (min-width:900px){ .hero__curve{ height:116px; } }

/* Measured off the mockup: its hero content spans 9%..95% of the frame, so
   the container is INSET rather than near-full-bleed. That inset is what
   opens the gap the tower stands in. */
/* 1590px is the mockup's own content width (168..1758 of its 1857px
   frame). Capping at 1240 throttled the copy column to 576px at every
   desktop size, which is why the two hero actions could never share a row.
   At 1857 this reproduces the mockup's 9% inset exactly. */
.hero > .wrap{ max-width:1590px; }
.hero__grid{ position:relative; z-index:2; display:grid; gap:30px; align-items:start; }

/* Chip eyebrow — a translucent pill on the photograph. */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 20px; padding:10px 20px 10px 15px;
  background:var(--white); border:1px solid rgba(72,68,65,.15);
  border-radius:999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--charcoal); line-height:1.35;
}
.chip svg{ flex:none; color:var(--walnut); }

/* Measured off the mockup: its longest headline line runs to 30 characters
   in an 842px column, which puts the type at ~52px, not the ~62px a 4.4vw
   ramp gives. At 52px the five lines pack back down to the mockup's four. */
/* The mockup's headline is ~52px in an 1857px frame — 2.8vw. Tying it to
   the viewport keeps the mockup's exact relationship between type size and
   column width at every screen, which is what lands it on four lines. */
.hero h1{ margin-bottom:18px; max-width:17ch; font-size:clamp(1.8rem,2.8vw,3.1rem); }
/* The two-tone headline: the answering clause takes walnut. */
.hero h1 em{ font-style:normal; color:var(--walnut); }
.hero__sub{ max-width:46ch; font-size:1.0625rem; color:var(--charcoal); margin-bottom:26px; }

/* The four proof points were removed on 19 Sep 2026 at the client's
   instruction. Every .proof rule went with them — the row, its icons, the
   hairline dividers, the 2-up/4-up breakpoints and the phone tick marks.
   Nothing else on the page used the class. See README. */

/* ---- Hero actions ---------------------------------------------------- */
.hero__actions{ display:grid; gap:14px; }
.hero__actions .btn{ width:100%; }
/* Flex, not grid: two auto grid tracks get squeezed to fit the column and
   break their labels onto two lines. Flex lets a button that will not fit
   move to its own line instead, which is the lesser of the two. */
@media (min-width:620px){
  .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
  .hero__actions .btn{ width:auto; white-space:nowrap; }
}
/* The mockup's large hero buttons. */
/* Sized so the pair shares one row from about 1250px up — measured. A
   stacked pair is not what the mockup draws. */
.btn--hero{
  min-height:60px; padding:15px 21px; gap:12px;
  font-size:.9375rem; border-radius:var(--radius-lg);
}
/* A shade tighter below 1520px. Measured: at full size the pair needs
   692px and the 49% column gives 667px at 1440 — 25px short. Above 1520 the
   column reaches 713px and they fit at full size, so that is the boundary. */
@media (min-width:900px) and (max-width:1519px){
  .btn--hero{ min-height:56px; padding:14px 18px; gap:10px; font-size:.875rem; }
  .btn--hero .btn__badge{ width:28px; height:28px; }
  .btn--hero .btn__badge svg{ width:17px; height:17px; }
  .hero__actions{ gap:12px; }
}
.btn--hero .btn__arrow{ margin-left:4px; }
/* The white disc carrying the WhatsApp mark, as the mockup draws it. */
.btn__badge{
  flex:none; display:grid; place-items:center;
  width:31px; height:31px; border-radius:50%;
  background:var(--white); color:var(--espresso);
}
/* The outlined secondary sits on the photograph, so it takes a translucent
   off-white fill rather than a transparent one — a plain outline
   disappears wherever the image is busy. */
.btn--ghost{
  background:var(--white); color:var(--charcoal);
  border-color:rgba(72,68,65,.26);
}
.btn--ghost:hover{ background:var(--white); border-color:rgba(72,68,65,.45); }
.btn--ghost svg{ color:var(--walnut); }

.hero__microcopy{ margin:14px 0 0; max-width:48ch; color:var(--taupe); }

@media (min-width:900px){
  .hero{ padding-block:42px 92px; }
  /* COPY 49% · GAP 16% · CARD 35% — measured off the mockup (777 / 255 /
     558 of its 1590px content). The 16% gap is the whole trick: it is the
     clear channel the tower stands in. A narrower gap puts the photograph
     under the end of every headline line, which is what forced the veil to
     be so heavy before. */
  .hero__grid{
    grid-template-columns:49% 35%;
    justify-content:space-between;
    gap:0;
  }
  /* The column governs the headline here, not a ch cap: at this size that
     is what lands it on four lines, as the mockup draws it. */
  .hero h1{ max-width:none; }
  .hero__sub{ margin-bottom:28px; }
}

/* ---- The form card ---------------------------------------------------
   The mockup's card: white, softly rounded, sitting over the photograph,
   and the most visible element in the hero after the headline.
   ---------------------------------------------------------------------- */
.form-card{
  position:relative; z-index:2;
  background:var(--white); border:1px solid rgba(214,208,205,.9);
  border-radius:14px;
  padding:26px 24px 24px;
  box-shadow:0 30px 70px -34px rgba(72,68,65,.55);
}
.form-card__head{ margin-bottom:16px; }
/* Scaled with the frame like the headline, so "Check Your Fee Waiver
   Options" stays on one line in the card the mockup draws. */
.form-card h2{ font-size:clamp(1.05rem,1.75vw,1.9rem); margin:0; letter-spacing:-.025em; }
.form-card__note{ margin:6px 0 0; font-size:.8125rem; color:var(--taupe); }
@media (min-width:900px){ .form-card{ max-width:560px; margin-left:auto; padding:30px 28px 26px; } }

.field{ margin-bottom:12px; }
.field label{
  display:block; font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:7px;
}
.field .req{ color:var(--walnut); }
.field ::placeholder{ color:#9b938d; opacity:1; }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:12px 15px;
  background:#F2EFEC; border:1px solid rgba(214,208,205,.85); border-radius:8px;
  color:var(--charcoal); font-size:1rem;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ min-height:80px; resize:vertical; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237F4E35' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--walnut); background:var(--white); outline:3px solid var(--walnut); outline-offset:0;
}
.field--error input,.field--error select,.field--error textarea{ border-color:var(--error); }
.field__error{ display:none; margin:6px 0 0; font-size:.75rem; font-weight:600; color:var(--error); }
.field--error .field__error{ display:block; }
.field-row{ display:grid; }
@media (min-width:520px){ .field-row{ grid-template-columns:1fr 1fr; column-gap:16px; } }

.form-card .btn--block{ min-height:56px; font-size:1rem; border-radius:8px; margin-top:4px; }

/* The GDPR assurance and the privacy link, with the mockup's padlock. */
.form-privacy{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 0; font-size:.75rem; line-height:1.55; color:var(--taupe);
}
.form-privacy svg{ flex:none; width:15px; height:15px; margin-top:2px; color:var(--walnut); }
.form-privacy strong{ display:block; color:var(--charcoal); font-weight:700; }
.form-status{
  display:none; margin-top:16px; padding:14px 16px;
  border-left:3px solid var(--walnut); background:var(--paper-alt); font-size:.875rem;
}
.form-status.is-visible{ display:block; }
.form-status.is-error{ border-left-color:var(--error); }
/* Espresso here is not a leak — this link IS a WhatsApp control, offered
   when the form could not send. */
.form-status a{ font-weight:700; color:var(--espresso); }

/* Spam trap: out of sight, out of the tab order, still submitted by bots. */
.hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* ---- The hero on a phone -------------------------------------------
   Most of this campaign's traffic is mobile, and the one thing that
   matters there is how fast the form arrives. The four-point list that
   used to sit between the copy and the actions was removed on 19 Sep
   2026 at the client's instruction; it was the single largest block in
   front of the form card.
   ---------------------------------------------------------------------- */
@media (max-width:899px){
  .hero{ padding-block:30px 72px; }
  .chip{
    margin-bottom:14px; padding:8px 14px 8px 11px;
    font-size:.625rem; letter-spacing:.09em; gap:8px;
  }
  .chip svg{ width:14px; height:14px; }
  .hero h1{ font-size:clamp(1.75rem,7.4vw,2.35rem); margin-bottom:14px; }

  /* ---- Keeping the copy out of the photograph ------------------------
     The blend in .hero__bg::after runs white -> clear across 40%..84%.
     What may cross into it is set by the contrast threshold each element
     has to clear, not by taste. The actions and the chip are deliberately
     NOT capped on a phone: both carry their own opaque backgrounds, so
     the photograph behind them is irrelevant, and capping them here would
     only wrap their labels.

     These are set from the MEASURED luminance ramp of the photograph, not
     from the mockup's proportions. Charcoal body text holds 4.5:1 down to
     a background of 175, which this frame reaches at 70%; the 900-weight
     headline only needs 3:1, which it holds to 144, reached at 77%. The
     caps sit just inside both, and the mockup's own 52% was costing 234px
     of hero height to buy contrast that was already there twice over. */
  .hero h1{ max-width:72%; }
  .hero__sub{ font-size:.9375rem; margin-bottom:20px; max-width:60%; }
  .hero .hero__microcopy{ max-width:52%; }

  /* one line, not two */
  .hero__actions{ gap:11px; }
  .btn--hero{ min-height:56px; padding:14px 16px; gap:10px; font-size:.875rem; }
  .btn--hero .btn__badge{ width:28px; height:28px; }
  .btn--hero .btn__badge svg{ width:16px; height:16px; }
  .btn--hero .btn__arrow{ margin-left:auto; }
  .hero__microcopy{ margin-top:12px; font-size:.75rem; }

  .form-card{ padding:22px 18px 20px; }
  .form-card h2{ font-size:1.25rem; }
}

/* The mockup's own copy widths — paired with the tablet blend above. From
   600px the column is wide enough that the mockup's own chip and action
   widths cost nothing, so the photograph gets the full band it draws.
   This block must stay AFTER the max-width:899px block: same specificity,
   so source order is what decides it. */
@media (min-width:600px) and (max-width:899px){
  /* Measured off the client's mobile mockup (19 Sep 2026) on its own
     853px canvas: chip 57%, headline 60%, sub 50%, action 63%.
     Here the chip and the action ARE capped — not for contrast, which
     their opaque backgrounds already settle, but because the mockup draws
     them short and a full-width pill at this size does not read as the
     same design. */
  .hero .chip{ max-width:57%; }
  .hero .hero__actions{ max-width:63%; }
}
@media (max-width:379px){ .brand__strap{ display:none; } }
@media (max-width:359px){
  .hero h1{ font-size:1.6rem; }
  .btn--hero{ font-size:.8125rem; padding:13px 13px; gap:8px; }
}

/* ---- Short laptop screens -------------------------------------------
   PAGE 1 HAS NOTHING LIKE THIS AND DOES NOT NEED IT: its form sits
   mid-page, so nothing in its hero has to fit a fold. This page's brief
   puts the form IN the hero and asks for the main CTA to be visible
   without scrolling, which on a 1280x640 panel — most laptops, once the
   browser chrome and the taskbar come off — means the vertical rhythm has
   to step down rather than the page scrolling.

   44px stays the tap-target floor throughout. The slack comes out of
   padding, labels and margins, never out of the controls.

   IF A FIELD IS EVER ADDED TO THIS FORM, re-measure at 1024x600,
   1273x630, 1440x900 and 1920x800.
   ---------------------------------------------------------------------- */
@media (min-width:900px) and (max-height:860px){
  .hero{ padding-block:30px 84px; }
  .chip{ margin-bottom:15px; padding:8px 16px 8px 12px; }
  .hero h1{ font-size:clamp(1.9rem,3.1vw,2.6rem); margin-bottom:14px; max-width:19ch; }
  .hero__sub{ font-size:.9375rem; margin-bottom:18px; }
  .hero__microcopy{ margin-top:12px; }
  .btn--hero{ min-height:54px; padding:13px 22px; font-size:.9375rem; }
  .btn__badge{ width:30px; height:30px; }

  .form-card{ padding:20px 22px 18px; }
  .form-card__head{ margin-bottom:14px; }
  .form-card h2{ font-size:1.25rem; }
  .form-card__note{ display:none; }
  .form-card .field{ margin-bottom:10px; }
  .form-card .field label{ margin-bottom:5px; font-size:.625rem; }
  .form-card .field input,.form-card .field select{ min-height:46px; padding-block:11px; }
  /* The textarea is pinned to one visible line here; it still takes
     multiple lines of input and still drags taller. */
  .form-card .field textarea{ min-height:46px; height:48px; }
  .form-card .btn--block{ min-height:52px; }
  .form-privacy{ margin-top:11px; }
}
/* Netbook-class heights (1024x600 and similar). The last of the slack. */
@media (min-width:900px) and (max-height:700px){
  .hero{ padding-block:13px 72px; }
  .chip{ margin-bottom:12px; font-size:.625rem; }
  .hero h1{ font-size:clamp(1.65rem,2.6vw,2.1rem); margin-bottom:11px; }
  .hero__sub{ font-size:.875rem; margin-bottom:14px; }
  .btn--hero{ min-height:48px; padding:11px 18px; font-size:.875rem; }
  .btn__badge{ width:26px; height:26px; }
  .hero__curve{ height:70px; }

  .form-card{ padding:12px 16px 11px; }
  .form-card__head{ margin-bottom:9px; }
  .form-card h2{ font-size:1.0625rem; }
  .form-card .field{ margin-bottom:7px; }
  .form-card .btn--block{ min-height:48px; }
  .form-privacy{ margin-top:9px; font-size:.6875rem; line-height:1.5; }
}

/* ======================= DARK TRUST BAND ==============================
   From the mockup: four reassurances on espresso, attached to the hero's
   curved foot. Espresso is the reserved WhatsApp colour AS A CONTROL
   COLOUR; this is a surface, and it carries no action, so the rule holds —
   the same way page 1 uses charcoal for its dark surfaces.
   ====================================================================== */
/* margin-top:-1px closes a sub-pixel seam. The hero's foot lands on a
   fractional boundary (1665.99px at 390x844), and .hero clips its curve
   there with overflow:hidden, so on a 2x screen the boundary row is a
   blend of the hero's white and the band's espresso — a pale hairline the
   full width of the page. Pulling the band up one pixel covers it. */
.trustband{ background:var(--espresso); color:var(--white); padding-block:26px; margin-top:-1px; }
.trustband__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:18px;
}
.trustband__list li{ display:flex; align-items:center; gap:14px; min-width:0; }
.trustband__list svg{ flex:none; width:30px; height:30px; color:var(--stone); }
/* DIRECT CHILD ONLY. A bare `.trustband__list span` also matched the little
   star span inside the heading, turned it into a flex column and broke
   "4.8 ★ Google Reviews" across three lines. */
.trustband__list li > span{
  display:flex; flex-direction:column; min-width:0;
  font-size:.8125rem; color:var(--stone); line-height:1.5;
}
.trustband__list strong{
  font-size:.9375rem; font-weight:700; color:var(--white); letter-spacing:-.01em;
  line-height:1.3; margin-bottom:3px; white-space:nowrap;
}
.trustband__list strong span{ display:inline; }
@media (min-width:700px){
  .trustband__list{ grid-template-columns:repeat(2,1fr); gap:22px 30px; }
}
@media (min-width:1024px){
  .trustband{ padding-block:24px; }
  .trustband__list{ grid-template-columns:repeat(4,1fr); gap:0; }
  .trustband__list li{ padding-inline:26px; }
  .trustband__list li + li{ border-left:1px solid rgba(201,191,187,.26); }
  .trustband__list li:first-child{ padding-left:0; }
  .trustband__list li:last-child{ padding-right:0; }
}

/* ============================ STATS ===================================
   Four figures on a card that OVERLAPS the hero's lower edge from 1024px,
   exactly as page 1 does it. 2x2 on a phone, four across from 768px,
   never a horizontal scroll.
   ====================================================================== */
.stats{ background:var(--paper); padding-bottom:var(--section-y); }
.stats__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--white); padding:20px 14px; text-align:center; }
.stat__figure{
  display:block; font-weight:900; font-size:clamp(1.05rem,3.6vw,1.55rem);
  letter-spacing:-.02em; color:var(--walnut); line-height:1.15;
}
.stat__label{
  display:block; margin-top:6px; font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--taupe);
}
.stats__note{ margin:14px auto 0; max-width:70ch; text-align:center; color:var(--taupe); }
@media (min-width:768px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } .stat{ padding:26px 18px; } }
/* NO OVERLAP. Page 1 pulls this card up by -66px to straddle the foot of
   its hero. On this page the client's dark trust band now occupies exactly
   that position, so the pull made the stat card sit ON TOP of the band and
   cover its four labels. The band is what straddles the hero here; the
   numbers sit below it, in normal flow. */
.stats{ padding-top:var(--section-y); }

/* ---- Skyline ---------------------------------------------------------
   Page 1's faint London skyline. Here it closes the opening of the page —
   hero, then the stat card straddling its edge, then this — rather than
   sitting inside the hero, where the overlapping stats would cover it.
   ---------------------------------------------------------------------- */
.skyline{
  display:block; width:100%; height:58px; margin-top:34px;
  color:var(--stone); opacity:.42;
}
@media (min-width:768px){ .skyline{ height:90px; margin-top:48px; } }

/* ================= TRUST MARKS / REGULATORY STRIP =====================
   Each mark links to the body that issues it, so a visitor can go and
   check rather than take the claim on trust.

   THESE ARE THE OFFICIAL MARKS, fetched 19 Sep 2026 from each body's own
   site — they replaced wordmarks set in the page's own type. Showing them
   depends on the firm's entitlement, which is a live question for the Law
   Society mark in particular; the SRA badge has its own rules. README.
   ====================================================================== */
/* Rebuilt 19 Sep 2026 to the client's reference: a titled section with the
   mark on the LEFT and the body beside it, left-aligned and divided by
   hairlines — rather than three centred columns with no heading. */
.trustbar{ background:var(--paper-alt); padding-block:40px; border-block:1px solid var(--border); }

.trustbar__head{ margin-bottom:26px; max-width:52ch; }
.trustbar__rule{
  display:block; width:34px; height:3px; margin-bottom:16px;
  background:var(--walnut); border-radius:2px;
}
.trustbar__title{
  margin:0 0 12px;
  font-size:clamp(1.35rem,5.4vw,2rem); font-weight:800; line-height:1.12;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--charcoal);
}
.trustbar__intro{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--taupe); }

.trustbar__grid{ display:grid; grid-template-columns:1fr; gap:0; }
/* MARK LEFT, BODY RIGHT — the client's reference layout. It only works
   because the SRA is represented by its near-square dot device: the full
   SRA lockup is a ONE-LINE 7.9:1 affair that renders 13px tall in a 104px
   column, which is what forced an earlier pass to stack them instead.
   Desktop keeps mark-above-body inside its three columns. */
.trustmark{
  position:relative;                 /* anchors the stretched link below */
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:18px;
  align-items:start; text-align:left;
  /* align-content:start matters in the 3-up desktop layout. The parent
     grid stretches all three marks to equal height; without this their
     own ROWS stretch to absorb the slack, and because each column has a
     different amount of slack the three bodies start at different heights
     — measured 311 / 332 / 345 at 768px, so the three walnut rules sat on
     three different lines. */
  align-content:start;
  padding:22px 0; border-bottom:1px solid var(--border);
}
.trustmark:first-child{ padding-top:0; }
.trustmark:last-child{ border-bottom:0; padding-bottom:0; }
.trustmark__mark{ display:flex; align-items:center; justify-content:center; min-height:44px; }

/* These are now the real marks (fetched 19 Sep 2026), not wordmarks set in
   the page's own type, so the grayscale filter and the .85 opacity that
   used to sit here are gone — the point of official artwork is that it
   looks official. They are constrained by BOTH axes because their aspects
   are very different: the SRA badge is 1.69:1 stacked, the Law Society
   2.94:1 and ILPA 3.36:1. Height alone would let the two wide ones
   overflow a 104px column; width alone would leave the SRA badge towering
   over them. */
/* NOTE: these three images must NOT carry loading="lazy", and the reason
   is this rule. width:auto/height:auto overrides the width/height
   attributes, so before the bytes arrive the element computes to 0x0 — and
   a zero-sized lazy image is never fetched, so it stays 0x0 for ever. All
   three rendered as nothing until the attribute came off. The row height
   is held by .trustmark__mark's min-height instead, so dropping lazy costs
   no layout shift; the three files together are about 16 KB. */
.trustmark__logo{
  display:block;
  max-width:100%; max-height:56px;
  width:auto; height:auto;
  object-fit:contain; object-position:center;
}

/* The body carries a walnut hairline down its left edge, which is what
   separates it from the mark without needing a second vertical rule. */
.trustmark__body{ border-left:2px solid rgba(127,78,53,.22); padding-left:16px; }
.trustmark__name{
  margin:0 0 6px;
  font-size:.875rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.25; color:var(--charcoal);
}
.trustmark__line{ margin:0; font-size:.875rem; line-height:1.55; color:var(--charcoal); }
.trustmark__meta{ margin:6px 0 0; font-size:.75rem; line-height:1.5; color:var(--taupe); }

/* The whole mark is the tap target — the link is stretched over it. Kept
   visible as text so it still reads as a link. */
.trustmark__go{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  min-height:32px;
  font-size:.8125rem; font-weight:700; letter-spacing:.02em;
  color:var(--walnut); text-decoration:none; border-bottom:1px solid currentColor;
}
.trustmark__go svg{ width:15px; height:15px; flex:none; transition:transform .18s var(--ease); }
.trustmark__go:hover svg{ transform:translateX(3px); }
.trustmark__go::after{ content:''; position:absolute; inset:0; }
.trustmark__go:focus-visible{ outline:2px solid var(--walnut); outline-offset:3px; }

/* The client's reference is a PHONE layout, and its mark-left/body-right
   row does not survive a desktop width: at 1440 the body measures 1078px
   and a one-sentence description stretches to 1054px, far past a readable
   line and sparse with it. From 768px the three marks go side by side
   instead — mark above body, divided by vertical hairlines — which keeps
   the reference's framing (title, rule, intro, arrows) at a sane measure. */
@media (min-width:768px){
  .trustbar__head{ margin-bottom:34px; }
  .trustbar__grid{ grid-template-columns:repeat(3,1fr); column-gap:0; }
  /* three columns, and inside each the mark sits ABOVE the body — the
     column is wide enough that side-by-side would waste it. */
  .trustmark{
    grid-template-columns:minmax(0,1fr); gap:14px;
    padding:4px 30px; border-bottom:0;
    border-right:1px solid var(--border);
  }
  /* padding-top is restored here: the base rule zeroes it so the stacked
     phone layout starts flush under the intro, but side by side that drops
     the first column 4px below the other two. */
  .trustmark:first-child{ padding-left:0; padding-top:4px; }
  .trustmark:last-child{ border-right:0; padding-right:0; padding-bottom:4px; }
  /* 62px, matching .trustmark__logo's max-height here. Anything less and
     the mark row is sized by each logo instead: the SRA lockup is 49px
     tall against 62px for the other two, which put the three bodies at
     341 / 353 and the walnut rules on different lines. */
  .trustmark__mark{ min-height:62px; justify-content:flex-start; }
  .trustmark__logo{ max-height:62px; object-position:left center; }
  .trustmark__body{
    border-left:0; padding-left:0;
    border-top:2px solid rgba(127,78,53,.22); padding-top:14px;
  }
  .trustmark__name{ font-size:.9375rem; }
  .trustmark__line{ font-size:.9375rem; }
}
@media (min-width:1024px){ .trustbar{ padding-block:56px; } }

/* =========================== CARD GRIDS ===============================
   Page 1's hairline grid: 1px gaps over a border-coloured background give
   perfectly aligned rules with no doubled edges.
   ====================================================================== */
.cards{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:36px; }
.card{ background:var(--paper); padding:26px 22px; }
.section--alt .card{ background:var(--paper-alt); }
/* Walnut, not Light Clay: clay measures 3.04:1 on paper and 2.76:1 on
   paper-alt, and this number is 16px — not large text. */
.card__num{ display:block; font-weight:900; font-size:1rem; color:var(--walnut); margin-bottom:12px; }
.card h3{ margin:0 0 8px; }
.card p{ margin:0; font-size:.9375rem; color:var(--taupe); }
@media (min-width:700px){ .cards--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards--4{ grid-template-columns:repeat(4,1fr); } }

/* ============================ HELP LIST ===============================
   Page 1's two-column hairline rows. A structured list, which is what this
   page's brief asks for in place of another card grid.
   ====================================================================== */
.help{ display:grid; margin-top:32px; border-top:1px solid var(--border); }
.help__row{
  display:grid; gap:6px; padding:20px 0; border-bottom:1px solid var(--border);
  transition:padding-left .3s var(--ease);
}
.help__row:hover{ padding-left:10px; }
.help__row h3{ margin:0; font-size:1.0625rem; }
.help__row p{ margin:0; font-size:.9375rem; color:var(--taupe); max-width:70ch; }
@media (min-width:900px){
  .help__row{ grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:24px; align-items:baseline; }
}

/* ============================ PROCESS =================================
   A genuine sequence, which is what earns the numbers.
   ====================================================================== */
.process{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:36px; }
.step{ background:var(--paper); padding:26px 22px; }
.section--alt .step{ background:var(--paper-alt); }
/* Walnut for the same reason as .card__num: clay fails on both grounds,
   and at 2rem it only scrapes the large-text floor on one of them. */
.step__num{
  display:block; font-weight:900; font-size:2rem; line-height:1;
  color:var(--walnut); letter-spacing:-.03em; margin-bottom:14px;
}
.step h3{ font-size:1rem; margin-bottom:6px; }
.step p{ margin:0; font-size:.875rem; color:var(--taupe); }
@media (min-width:700px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .process{ grid-template-columns:repeat(4,1fr); } }

/* =========================== CTA BANDS ================================
   CHARCOAL, not espresso — espresso belongs to WhatsApp alone.
   ====================================================================== */
.cta-band{ background:var(--charcoal); color:var(--white); padding-block:var(--section-y); }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:var(--stone); }
.cta-band__inner{ display:grid; gap:26px; align-items:center; }
.cta-band__copy{ max-width:46ch; }
.cta-band__actions{ display:grid; gap:12px; }
@media (min-width:560px){ .cta-band__actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .cta-band__inner{ grid-template-columns:1.15fr .85fr; gap:48px; } }

/* ========================== SOLICITOR ================================= */
.solicitor{ display:grid; gap:28px; }
.solicitor__photo{
  aspect-ratio:4/5; max-width:340px; width:100%;
  object-fit:cover; object-position:center top;
  border-radius:var(--radius); background:var(--stone);
}
.solicitor__meta{
  margin:0 0 18px; font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--walnut);
}
.solicitor__facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; font-size:.875rem; }
.solicitor__facts li{ padding-left:16px; border-left:2px solid var(--border); }
@media (min-width:900px){ .solicitor{ grid-template-columns:340px 1fr; gap:48px; align-items:start; } }

/* =========================== REVIEWS ==================================
   REAL reviews, reproduced word for word from the firm's Google Business
   Profile. Never fabricate one, and never edit the wording of one.

   align-items:start — the cards are deliberately NOT equal heights. Real
   quotes vary in length and forcing three identical blocks reads as
   invented.
   ====================================================================== */
.reviews{ display:grid; gap:20px; margin-top:36px; }
/* The whole card is tappable — the footer link is stretched over it. */
.review{
  position:relative;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 22px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.review:hover,.review:focus-within{
  border-color:var(--clay); box-shadow:0 10px 26px -20px rgba(72,68,65,.5);
}
.review__go{ color:var(--walnut); text-decoration:none; }
.review__go::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.review:hover .review__go{ text-decoration:underline; }
.review__stars{ color:var(--walnut); letter-spacing:.1em; font-size:.85rem; }
.review p{ margin:0; font-size:.9375rem; }
.review__foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe);
}
.review--placeholder{ background:var(--paper-alt); border-style:dashed; color:var(--taupe); }
@media (min-width:820px){ .reviews{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; } }

/* ============================= FEES =================================== */
.fees{ display:grid; gap:28px; align-items:center; }
.fees__panel{ border-left:3px solid var(--walnut); padding-left:22px; }
.fees__list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; font-size:.9375rem; }
.fees__list li{ position:relative; padding-left:26px; }
.fees__list li::before{
  content:""; position:absolute; left:0; top:.3em; width:14px; height:8px;
  border-left:2px solid var(--walnut); border-bottom:2px solid var(--walnut); transform:rotate(-45deg);
}
.fees__image{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.fees__image img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; filter:saturate(.85); }
@media (min-width:900px){ .fees{ grid-template-columns:1.05fr .95fr; gap:56px; } }

/* ============================== FAQ =================================== */
.faq{ margin-top:32px; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq h3{ margin:0; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:60px; padding:18px 0; background:none; border:0; cursor:pointer;
  text-align:left; font-size:1rem; font-weight:700; color:var(--charcoal); letter-spacing:-.01em;
}
.faq__q:hover{ color:var(--walnut); }
.faq__icon{ flex:none; width:14px; height:14px; position:relative; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:var(--walnut); transition:transform .3s var(--ease); }
.faq__icon::before{ left:0; right:0; top:6px; height:2px; }
.faq__icon::after{ top:0; bottom:0; right:6px; width:2px; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:scaleY(0); }
.faq__a{ display:none; padding:0 0 22px; max-width:76ch; }
.faq__a p{ margin:0 0 .75rem; font-size:.9375rem; color:var(--taupe); }
.faq__a p:last-child{ margin-bottom:0; }
.faq__item.is-open .faq__a{ display:block; }

/* ============================ FINAL CTA ===============================
   Page 1's light closing band, on Warm Stone. Body copy here is charcoal,
   not taupe: taupe measures 3.15:1 on stone and fails.
   ====================================================================== */
.final-cta{ background:var(--stone); padding-block:var(--section-y); }
.final-cta__inner{ max-width:780px; }
.final-cta .lede{ color:var(--charcoal); }
.final-cta .btn--secondary{ border-color:var(--charcoal); }
.final-cta__actions{ display:grid; gap:12px; margin-top:26px; }
.final-cta__reassure{ margin-top:14px; color:var(--charcoal); }
.final-cta__phone{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:18px;
  font-weight:700; color:var(--charcoal); text-decoration:none;
  border-bottom:1px solid var(--charcoal);
}
@media (min-width:620px){ .final-cta__actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================ FOOTER ================================== */
.footer{
  background:var(--charcoal); color:var(--stone);
  padding-block:44px 96px; border-top:4px solid var(--walnut);
}
.footer__top{ display:grid; gap:22px; align-items:start; }
.footer__brand{ display:flex; align-items:center; gap:12px; }
.footer__brand img{ width:44px; }
.footer__brand span{ font-weight:900; text-transform:uppercase; color:var(--white); letter-spacing:-.02em; }
.footer__details{ font-size:.8125rem; line-height:1.9; }
.footer__details a{ color:var(--white); display:inline-flex; align-items:center; min-height:44px; }
.footer__legal{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(214,208,205,.24);
  font-size:.75rem; line-height:1.8;
}
.footer__legal a{ color:var(--white); display:inline-flex; align-items:center; min-height:44px; }
@media (min-width:900px){ .footer__top{ grid-template-columns:auto 1fr; gap:56px; } .footer{ padding-bottom:56px; } }

/* ======================= STICKY MOBILE BAR ============================
   Appears once the hero is scrolled past and persists to the end of the
   page. This page's brief asks for two halves rather than page 1's single
   action. Espresso is the reserved WhatsApp colour, so the Call half takes
   walnut — the page's other action colour — and the two are told apart by
   colour, icon and label.
   ====================================================================== */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--white); border-top:1px solid var(--border);
  transform:translateY(110%); transition:transform .3s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-bar.is-visible{ transform:translateY(0); }
.sticky-bar a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:58px; font-size:.9375rem; font-weight:700; text-decoration:none;
  transition:background-color .25s var(--ease);
}
.sticky-bar a svg{ flex:none; }
.sticky-bar__wa{ background:var(--espresso); color:var(--white); }
.sticky-bar__wa:hover,.sticky-bar__wa:active{ background:var(--espresso-dk); }
.sticky-bar__call{ background:var(--walnut); color:var(--white); border-left:1px solid rgba(250,249,248,.22); }
.sticky-bar__call:hover,.sticky-bar__call:active{ background:var(--walnut-hover); }
@media (max-width:359px){ .sticky-bar a{ font-size:.8125rem; gap:7px; } }
@media (min-width:900px){ .sticky-bar{ display:none; } }

/* ============================ MOTION ==================================
   Minimal and subtle only: a soft fade and quiet hover transitions. No
   carousels, no parallax, no per-section slide-ups.
   ====================================================================== */
.reveal{ opacity:0; transition:opacity .6s var(--ease); }
.reveal.is-in{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; }
}

/* If a master was never rebuilt into assets/img/, main.js swaps the <img>
   for a marked slot rather than leaving a broken image. */
.photo-slot{
  background:var(--stone); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; color:var(--charcoal); min-height:220px;
}
.photo-slot span{
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  max-width:30ch; line-height:1.8;
}

/* ===================== THANK-YOU PAGE (/thank-you) ====================
   Reached only after /api/lead has emailed the enquiry. Same tokens, type
   and controls as the landing page.
   ====================================================================== */
.thanks{ background:var(--paper-alt); }
.thanks__inner{ max-width:720px; }
.thanks__tick{
  display:grid; place-items:center;
  width:56px; height:56px; margin-bottom:22px;
  border-radius:50%; background:var(--walnut); color:var(--white);
}
.thanks h1{ margin:0 0 16px; max-width:none; }
.thanks .lede{ margin:0; max-width:56ch; }
.thanks__steps{
  list-style:none; margin:36px 0 0; padding:0;
  display:grid; gap:1px; background:var(--border); border:1px solid var(--border);
}
.thanks__steps li{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; background:var(--paper-alt);
}
.thanks__num{
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--walnut); color:var(--white);
  font-size:.8125rem; font-weight:800;
}
.thanks__steps strong{ display:block; font-size:.9375rem; color:var(--charcoal); }
.thanks__steps p{ margin:6px 0 0; font-size:.875rem; line-height:1.65; color:var(--taupe); }
.thanks__wa{
  margin-top:36px; padding:24px;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
}
.thanks__wa-line{ margin:0 0 16px; font-size:.9375rem; line-height:1.65; color:var(--taupe); }
.thanks__wa-line strong{ color:var(--charcoal); }
.thanks__wa .btn{ width:100%; }
.thanks__hours{ margin:14px 0 0; font-size:.75rem; line-height:1.6; color:var(--taupe); }
.thanks__back{ margin:28px 0 0; font-size:.8125rem; }
@media (min-width:600px){ .thanks__wa .btn{ width:auto; } }