/* ==========================================================================
   Aden & Co Solicitors — Family & Partner Visas paid landing page
   Design system: "Warm Editorial Legal"
   (Aden_Co_Website_Design_System_Reference_Palette.pdf)
   Closed palette. No colour, typeface or shape outside the tokens below.
   ========================================================================== */

: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 WhatsApp colour -----------------------------------
     WhatsApp green, per the client's hero mockup. This is the one colour on
     the page that is not from the Aden & Co palette, and that is the point:
     it appears on WhatsApp controls and nowhere else, which is what makes
     them unmissable.

     Two greens, because one cannot do both jobs. WhatsApp's own #25D366 is
     too light to carry white text (about 2:1 — it fails WCAG outright), so
     it is used only on the icon disc, which holds no text. Anything with a
     label on it takes --wa, which clears 4.5:1 against white.            */
  --wa:           #16824A;  /* RESERVED: WhatsApp controls ONLY            */
  --wa-dk:        #11663A;  /* WhatsApp hover only                         */
  --wa-bright:    #25D366;  /* WhatsApp brand green — icon disc only       */

  /* Deep Espresso from the palette PDF carried WhatsApp before the mockup
     arrived. It is left defined but unused: nothing else on this page may
     take it, or the reserved colour stops being reserved. */
  --espresso:     #3B2F29;  /* UNUSED on this page                         */
  --espresso-dk:  #2E2420;  /* UNUSED on this page                         */
  --stone:        #C9BFBB;  /* cards / image frames                        */
  --taupe:        #8E7A70;  /* muted labels / dividers                     */
  --clay:         #A48371;  /* numbers / subtle accents                    */
  --white:        #FAF9F8;  /* high-contrast light text                    */
  --border:       #D6D0CD;  /* rules / form borders                        */
  --error:        #8C2F1F;  /* functional validation only                  */

  /* --- Shape, spacing, motion ----------------------------------------- */
  --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; } }

/* --------------------------------------------------------------------- */
*,*::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> wraps the WebP sources; it must not introduce a box of its own,
   so the <img> keeps behaving exactly as it did in 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 — which pushed
   the solicitor portrait into column 2 and its text down into row 2. The
   element renders nothing, so hiding it costs nothing. */
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(2rem,6vw,3.85rem); line-height:1.02; 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; }

/* Anchor targets stop clear of the top edge (and of the sticky bar on mobile),
   so a jump lands on the element itself rather than jamming it to the edge. */
#assessment,#process,#top{ scroll-margin-top:20px; }
@media (max-width:767px){ #assessment,#process{ scroll-margin-top:14px; } }
/* The desktop header is sticky, so anchored jumps have to clear it. */
@media (min-width:900px){ #assessment,#process,#top{ scroll-margin-top:84px; } }

/* ============================ BUTTONS =================================
   Two shapes, deliberately. Form-directed actions are rectangles, matching
   the form fields and the submit button. WhatsApp is always a pill with an
   green disc. Shape reinforces what colour already says: contact by
   conversation and contact by form are not 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:6px;
  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);
}
.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(--wa); color:var(--white); border-radius:999px; }
.btn--whatsapp:hover{ background:var(--wa-dk); }

/* The hero's WhatsApp control: outlined pill with a filled disc, so it sits
   beside the walnut primary without competing with it for weight. */
.btn--wa-outline{
  /* Charcoal label, green frame and disc — as the mockup draws it, and the
     only combination that clears 4.5:1: green text on white sits at 4.27. */
  background:var(--white); color:var(--charcoal); border-color:var(--wa);
  border-radius:999px; padding:6px 24px 6px 6px; gap:12px;
}
.btn--wa-outline:hover{ background:var(--wa); color:var(--white); }
.btn__badge{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wa-bright); color:var(--white);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.btn--wa-outline:hover .btn__badge{ background:var(--white); color:var(--wa); }
.btn--wa-outline:active{ transform:translateY(1px); }

/* The Gmail mark keeps its own colours, so it sits on a white tile rather
   than directly on walnut. */
.btn__gmail{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:5px; background:var(--white);
}
.btn--sm{ min-height:44px; padding:10px 16px; font-size:.8125rem; }
.btn--block{ display:flex; width:100%; }

/* ============================ HEADER ==================================
   Three zones and nothing else: identity, a verifiable rating, one action.

   Mobile  (<560px)  — one 56px row: logo mark, two-line wordmark, WhatsApp.
   Tablet  (560+)    — the regulation line joins the wordmark.
   Desktop (960+)    — a true three-column grid, so the rating block is
                       optically centred rather than pushed around by the
                       widths either side of it. Sticky from 900px up.
   ====================================================================== */
.header{
  background:var(--paper);
  border-bottom:1px solid var(--border);
  position:relative; z-index:40;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:56px; padding-block:7px;
}

/* ---- Identity --------------------------------------------------------- */
/* min-height keeps the logo a 44px target without changing the row height. */
.brand{ display:flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:inherit; min-width:0; }
.brand__mark{ width:32px; height:auto; }
/* No rules in the lockup — the emblem, the name and the sub-word are held
   apart by spacing alone. */
.brand__text{ display:block; min-width:0; }
.brand__name{
  display:block;
  font-weight:800; font-size:1.0625rem; letter-spacing:-.02em; line-height:1.05;
  color:var(--charcoal);
}
/* Spaced sub-word: the lockup from the mockup, set in the system's own
   typeface rather than a new one. */
.brand__sub{
  display:block; margin-top:5px;
  font-size:.5625rem; font-weight:700; letter-spacing:.42em; line-height:1;
  text-transform:uppercase; color:var(--taupe);
}
.brand__strap{
  display:block; margin-top:3px;
  font-size:.5625rem; font-weight:600; letter-spacing:.1em; line-height:1.3;
  text-transform:uppercase; color:var(--taupe);
}

/* ---- Rating: one quiet button, one verifiable claim -------------------
   A pill in the page's own paper with a hairline round it: enough shape to
   read as a control over the hero photograph, not enough weight to compete
   with the walnut action beside it. The Google mark is the only place on
   the page where colour comes from outside the palette, and it is there
   because the claim belongs to Google, not to the firm. */
.header__rating{
  display:none; align-items:center; gap:9px;
  padding:6px 13px 6px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(250,249,248,.66);
  text-decoration:none; color:inherit; white-space:nowrap;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.header__rating:hover{ background:var(--white); border-color:var(--clay); }
.header__g{ flex:none; display:block; }
.header__rating-copy{ display:flex; flex-direction:column; gap:3px; }
.header__rating-top{ display:flex; align-items:center; gap:6px; }
.header__score{
  font-size:.8125rem; font-weight:800; letter-spacing:-.01em;
  line-height:1; color:var(--charcoal);
}
.stars{ color:var(--clay); letter-spacing:.14em; font-size:.9rem; line-height:1; }
.header .stars{ font-size:.75rem; letter-spacing:.08em; }
.header__rating-meta{
  display:block;
  font-size:.625rem; font-weight:600; line-height:1.1; color:var(--taupe);
}

/* ---- Action ----------------------------------------------------------- */
/* 44px minimum, header included: this is the first tap target on a phone. */
.header .btn{ flex:none; white-space:nowrap; min-height:44px; padding:10px 16px; font-size:.75rem; }
.header .btn__long{ display:none; }

@media (min-width:560px){
  .header .btn__long{ display:inline; }
  .header .btn__short{ display:none; }
}
@media (max-width:559px){
  .brand{ gap:9px; }
  .brand__mark{ width:29px; }
  .brand__name{ font-size:.8125rem; }
  /* Regulation line drops on the narrowest phones — logo and WhatsApp only,
     as the brief specifies. It reappears in the hero proof list. */
  .brand__strap{ display:none; }
  .header .btn{ padding:10px 14px; }
}
@media (min-width:768px){
  .header__inner{ min-height:64px; }
  .brand__mark{ width:38px; }
  .brand__name{ font-size:.9375rem; }
  .header .btn{ font-size:.8125rem; padding:11px 20px; }
}
@media (min-width:960px){
  /* 1fr | auto | 1fr keeps the rating optically centred whatever the two
     outer zones measure. */
  .header__inner{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; }
  .header__rating{ display:flex; }
  /* Both outer zones hug their content, so neither link carries a wide
     invisible click area across its grid column. */
  .brand{ justify-self:start; }
  .header__cta{ justify-self:end; }
  .brand__mark{ width:42px; }
  .brand__name{ font-size:1rem; }
}

/* Sticky on desktop only: the desktop layout has no sticky bottom bar, so
   this is what keeps one action permanently within reach. The shadow appears
   only once the page has actually moved, so a page at rest stays flat. */
@media (min-width:900px){
  .header{ position:sticky; top:0; }
  .header.is-stuck{ box-shadow:0 12px 30px -24px rgba(72,68,65,.9); }
}


/* ============================== HERO ==================================
   Built to the client's mockup: the message on the left, the consultation
   photograph bleeding to the right edge of the viewport at full height, and
   the assessment card floating over it. Mobile stacks the same three parts
   in the brief's order — copy, photograph, card — so the composition reads
   the same way on a phone as it does on a desktop.
   ====================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--paper);
  padding-top:24px; padding-bottom:0;
}
.hero__grid{ display:grid; gap:0; align-items:start; }
/* The photograph is absolutely positioned and comes later in the DOM, so the
   copy has to be given a stacking context of its own to sit over it.

   The column is a flex column purely so the sequence can be set with order:
   the DOM keeps the proof points next to the headline they qualify, while
   every screen shows headline → copy → actions → handwritten line → proof
   points. The actions stay above the fold on a 1366x850 laptop that way. */
.hero__copy{ position:relative; z-index:1; display:flex; flex-direction:column; }
.hero__eyebrow{ order:1; }
.hero h1{ order:2; }
.hero__sub{ order:3; }
.hero__ctas{ order:4; }
.hero__note{ order:5; align-self:flex-start; }
.features{ order:6; }

/* ---- Eyebrow: the line on its own, no rule and no pill ----------------- */
.hero__eyebrow{
  display:block;
  margin:0 0 16px;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; line-height:1.4;
  text-transform:uppercase; color:var(--walnut);
}

.hero h1{ margin:0 0 16px; }
.hero h1 em{ font-style:normal; color:var(--walnut); }
.hero__sub{ max-width:46ch; font-size:1.0625rem; color:var(--taupe); margin:0 0 22px; }

/* ---- Proof points -----------------------------------------------------
   Page 1's feature row: line icon, bold line, muted line, divided by 1px
   gaps over a border-coloured grid so the rules align into a clean cross.
   2x2 rather than 4 across, because this sits in the hero's left column. */
.features{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border);
}
.feature{
  display:flex; align-items:flex-start; gap:11px;
  padding:16px 14px;
  background:var(--paper);
}
.feature__icon{ flex:none; width:24px; height:24px; color:var(--walnut); margin-top:1px; }
.feature > div{ min-width:0; }
.feature strong{
  display:block; font-size:.8125rem; font-weight:700; color:var(--charcoal);
  line-height:1.3; letter-spacing:-.005em;
}
.feature span{ display:block; margin-top:3px; font-size:.75rem; color:var(--taupe); line-height:1.45; }
@media (min-width:1024px){
  .feature{ padding:18px 18px; }
  .feature:nth-child(odd){ padding-left:0; }
  /* Over the full-bleed photograph the filled cells would read as a pale
     box, so the rules are drawn as borders and the cells left open. */
  .features{ background:none; gap:0; }
  .feature{
    background:none;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .feature:nth-child(2n){ border-right:0; }
  .feature:nth-last-child(-n+2){ border-bottom:0; }
}

/* ---- Hero actions ------------------------------------------------------
   Three controls, two shapes. Walnut rectangles go to the form; the pill
   with the green disc goes to WhatsApp. Shape as well as colour keeps a
   conversation from ever being mistaken for a form submission. */
/* Two copy lengths for the WhatsApp label: the full line from 768px up, the
   short one below it. The green pill and the microcopy already say WhatsApp,
   so nothing is lost and the button stays on one line. */
.only-narrow{ display:none; }
@media (max-width:1023px){ .only-wide{ display:none; } .only-narrow{ display:inline; } }
.hero__ctas{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.hero__ctas .btn{ width:100%; }
.hero__microcopy{ margin:0; max-width:46ch; color:var(--taupe); font-style:italic; }
@media (max-width:767px){
  /* The mockup leads with the walnut button; the green pill follows it and
     the microcopy explains what the pill does. */
  .hero__ctas .btn--primary{ order:1; }
  .hero__ctas .btn--wa-outline{ order:2; }
  .hero__microcopy{ order:3; }
  .hero__ctas .btn--secondary{ order:4; }
}
@media (min-width:768px){
  .hero__ctas{ flex-flow:row wrap; align-items:center; gap:12px; }
  .hero__ctas .btn{ width:auto; }
  .hero__ctas .btn--wa-outline{ flex:0 0 auto; }
  .hero__microcopy{ flex:1 1 100%; margin-top:-2px; }
}

/* ---- Photograph -------------------------------------------------------- */
.hero__photo{
  position:relative; overflow:hidden;
  margin-top:26px; height:clamp(200px,52vw,320px);
  border-radius:var(--radius-lg); background:var(--stone);
}
.hero__photo img,.hero__photo .photo-slot{
  /* The family sits right of centre in the frame and the Parliament skyline
     left, so the crop is biased right: on the tall desktop panel that keeps
     the faces in the strip beside the card rather than behind it. */
  width:100%; height:100%; object-fit:cover; object-position:46% 45%; display:block;
  /* One grade for every photograph in the campaign — see the fees image. */
  filter:saturate(.9);
}
.photo-slot{
  background:var(--stone); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px; color:var(--charcoal);
}
.photo-slot span{
  font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  max-width:30ch; line-height:1.9;
}

/* The card rides up over the photograph's lower edge. */
.hero__aside{ position:relative; z-index:2; margin-top:-34px; padding-inline:10px; }

@media (min-width:1024px){
  /* ---- Desktop hero, in the same language as the phone ----------------
     The photograph is the hero's ground, edge to edge and running behind
     the header, which floats over it transparent and only takes on the
     paper background once the page has actually moved. A wash from the
     left carries the copy; a short one at the foot lets the photograph
     resolve into the section beneath instead of ending on a line. */
  .lp .header{
    position:fixed; top:0; left:0; right:0;
    background:transparent; border-bottom-color:transparent;
    transition:background-color .25s var(--ease), border-color .25s var(--ease);
  }
  .lp .header.is-stuck{
    background:var(--paper); border-bottom-color:var(--border);
  }

  .hero{ padding-top:0; }
  .hero__grid{ grid-template-columns:minmax(0,50%) minmax(0,50%); }
  .hero__copy{ padding-block:clamp(112px,9.5vw,150px) clamp(40px,5vw,74px); }

  .hero__photo{
    position:absolute; inset:0; width:auto; height:auto;
    margin:0; border-radius:0;
  }
  /* The crop is pushed right so the family clears the assessment card and
     lands in the strip beside it, with the skyline behind the copy. */
  .hero__photo img{ object-position:38% 42%; transform:scale(1.36); transform-origin:22% 48%; }
  .hero__photo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(92deg,
      var(--paper) 18%, rgba(240,240,242,.95) 36%, rgba(240,240,242,.72) 50%,
      rgba(240,240,242,.26) 66%, rgba(240,240,242,0) 84%);
  }
  .hero__photo::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      /* a scrim under the floating header, so the lockup always has ground */
      linear-gradient(180deg, rgba(240,240,242,.7) 0%, rgba(240,240,242,.16) 7%, rgba(240,240,242,0) 12%),
      linear-gradient(180deg, rgba(240,240,242,0) 72%, rgba(240,240,242,.72) 90%, var(--paper) 100%);
  }

  .hero__aside{
    margin-top:0; padding-inline:0;
    padding-left:clamp(16px,2.4vw,40px);
    padding-right:clamp(8px,10vw,172px);
    padding-block:clamp(112px,9.5vw,150px) clamp(30px,3.6vw,54px);
  }
}

/* ---- The handwritten line, as page 1 uses it -------------------------- */
.hero__note{
  position:relative; display:inline-block;
  margin:18px 0 0; padding-bottom:10px;
  font-family:"Caveat","Segoe Script",cursive;
  font-size:1.5rem; font-weight:600; line-height:1.1; color:var(--walnut);
}
.hero__note-rule{
  position:absolute; left:2px; bottom:0; width:100%; height:10px;
  color:var(--walnut); opacity:.55;
}

/* ======================================================================
   MOBILE HERO (< 768px)
   Built to the client's second 9:16 mockup: the photograph is the hero's
   background, full-bleed from the very top of the screen and running
   behind the header, washed out from the left so the copy reads over it.
   Everything the mockup shows — trust line, headline, supporting copy,
   both actions and the handwritten line — lands inside the first screen
   of a 390x844 phone. Nothing here is reached by scrolling.

   The same treatment runs up to 1023px — a tablet gets the full-bleed
   photograph too, with its own type sizes in the block beneath.
   ====================================================================== */
@media (max-width:1023px){
  :root{ --gutter:24px; }

  /* The header floats over the photograph rather than sitting on a band
     of its own. Scoped to the landing page: /thank-you shares this
     stylesheet and has no hero to float over. */
  .lp .header{
    position:absolute; top:0; left:0; right:0;
    background:transparent; border-bottom:0;
  }
  .hero{ padding-top:88px; }
  .hero__grid{ position:relative; }

  /* --- The copy, over the photograph -------------------------------- */
  .hero__copy{ position:relative; z-index:1; }
  .hero__eyebrow{
    max-width:none; padding-right:32%;
    font-size:.6875rem; letter-spacing:.12em; line-height:1.5; margin-bottom:14px;
  }
  .hero h1{
    max-width:none; padding-right:30%;
    font-size:clamp(1.6rem,7.4vw,2.1rem); line-height:1.08; margin-bottom:14px;
  }
  .hero__sub{
    max-width:none; padding-right:42%;
    font-size:.875rem; line-height:1.55; margin-bottom:0;
  }

  /* --- Actions ------------------------------------------------------
     Held to the mockup's width rather than run edge to edge, so neither
     button covers the faces. The "See how we handle your case" link is
     desktop-only: on a phone it costs a 50px slot for a scroll the page
     performs itself. */
  .hero__ctas{ margin-top:20px; gap:10px; max-width:min(92%,320px); }
  .hero__ctas .btn--secondary{ display:none; }
  /* Narrower side padding keeps the WhatsApp label on one line at 375px. */
  .hero__ctas .btn{ min-height:48px; font-size:.875rem; padding-inline:14px; }
  .hero__microcopy{ font-size:.6875rem; line-height:1.45; max-width:34ch; }
  .hero__note{ margin-top:20px; font-size:1.45rem; }

  /* --- Photograph: the hero's ground -------------------------------- */
  .hero__photo{
    position:absolute; z-index:0; top:-88px; bottom:auto;
    left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1); width:auto;
    height:min(100vh,900px); min-height:620px;
    margin:0; border-radius:0; background:var(--paper);
  }
  .hero__photo img{ object-position:60% 40%; }
  /* Two washes, both in the page's own paper: one from the left so the
     copy always has ground under it, one at the foot so the photograph
     resolves into the page instead of ending on a line. */
  .hero__photo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(94deg,
      var(--paper) 30%, rgba(240,240,242,.92) 48%, rgba(240,240,242,.62) 63%,
      rgba(240,240,242,.24) 78%, rgba(240,240,242,0) 94%);
  }
  .hero__photo::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      /* a scrim under the floating header, so the lockup always has ground */
      linear-gradient(180deg, rgba(240,240,242,.66) 0%, rgba(240,240,242,.14) 9%, rgba(240,240,242,0) 15%),
      linear-gradient(180deg, rgba(240,240,242,0) 44%, rgba(240,240,242,.72) 72%,
        rgba(240,240,242,.93) 92%, var(--paper) 100%);
  }

  /* --- Below the fold ------------------------------------------------ */
  /* Proof points: icon in a clay disc, centred, two even columns divided
     by hairlines — the same language as the routes strip below. */
  .features{
    /* The mockup ends the first screen on the handwritten line, with the
       foot of the photograph beneath it. The proof points start where the
       photograph does — one screen down, whatever the phone. */
    margin-top:clamp(34px,20vh,180px); gap:0; background:none;
    grid-template-columns:1fr 1fr;
  }
  .feature{
    flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:16px 8px; background:none;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .feature:nth-child(2n){ border-right:0; }
  .feature:nth-last-child(-n+2){ border-bottom:0; }
  .feature__icon{
    box-sizing:content-box; width:20px; height:20px; padding:12px;
    margin-top:0; border-radius:50%;
    background:rgba(164,131,113,.16);
  }
  .feature strong{ font-size:.75rem; line-height:1.25; }
  .feature span{ font-size:.6875rem; line-height:1.35; margin-top:2px; }

  .hero__aside{ margin-top:26px; padding-inline:0; }

  /* Stat row: one compact tinted panel, 2x2, as drawn. */
  .stats{ padding-top:28px; padding-bottom:0; }
  .stats__grid{
    border-top:0; border-radius:12px; overflow:hidden;
    background:var(--paper); padding:4px 0;
  }
  .stat{ padding:18px 10px; }
  .stat__figure{ font-size:1.1875rem; }
  .stat__label{ font-size:.625rem; letter-spacing:.09em; margin-top:5px; }
  .stats__note{ margin-top:18px; }

  /* Routes: a touch tighter so the section stays compact. */
  .routes-band{ padding-top:30px; padding-bottom:calc(var(--section-y) - 8px); }
  .routes{ row-gap:26px; }
  .route span{ font-size:.5625rem; letter-spacing:.09em; }
}

/* Tablets (768–1023px): the same hero, at the size the screen deserves.
   One column still — a 50/50 split would leave the assessment card too
   narrow to fill in comfortably. */
@media (min-width:768px) and (max-width:1023px){
  .hero{ padding-top:104px; }
  .hero__photo{ top:-104px; height:min(96vh,880px); }
  .hero__eyebrow{ padding-right:34%; font-size:.75rem; margin-bottom:18px; }
  .hero h1{ padding-right:34%; font-size:clamp(2rem,4.8vw,2.7rem); margin-bottom:18px; }
  .hero__sub{ padding-right:44%; font-size:1rem; }
  .hero__ctas{ flex-flow:column nowrap; align-items:stretch; max-width:400px; margin-top:26px; }
  .hero__ctas .btn{ width:100%; min-height:52px; font-size:.9375rem; padding-inline:24px; }
  .hero__microcopy{ flex:0 0 auto; max-width:46ch; font-size:.75rem; margin-top:0; }
  .hero__note{ margin-top:26px; font-size:1.7rem; }
  .features{ margin-top:clamp(60px,24vh,260px); }
  .feature{ padding:18px 12px; }
  .feature strong{ font-size:.875rem; }
  .feature span{ font-size:.75rem; }
  .hero__aside{ margin-top:34px; }
  .form-card{ max-width:560px; }
}

/* 375px phones (iPhone SE / 8 / X): one notch down on the button label so
   the WhatsApp line never wraps. */
@media (max-width:389px){
  .hero__ctas .btn{ font-size:.8125rem; }
}

/* Small phones (320–374px): tighter, never cramped. The 24px safe margin
   becomes 20px and every vertical gap gives a little back. */
@media (max-width:374px){
  :root{ --gutter:20px; }
  .hero{ padding-top:80px; }
  .hero h1{ font-size:1.5rem; padding-right:26%; margin-bottom:11px; }
  .hero__sub{ font-size:.8125rem; line-height:1.45; padding-right:32%; }
  .hero__eyebrow{ margin-bottom:11px; padding-right:26%; }
  .hero__photo{ top:-80px; }
  .hero__ctas{ margin-top:16px; gap:8px; max-width:100%; }
  .hero__ctas .btn{ font-size:.8125rem; }
  .hero__microcopy{ font-size:.625rem; }
  .hero__note{ margin-top:14px; font-size:1.3rem; }
  .features{ margin-top:26px; }
  .feature{ padding:12px 5px; gap:6px; }
  .feature__icon{ padding:10px; }
  .feature span{ font-size:.625rem; }
}

/* Short screens: give the vertical budget back before anything clips. */
@media (max-width:767px) and (max-height:720px){
  .hero{ padding-top:74px; }
  .hero__photo{ top:-74px; }
  .hero h1{ font-size:1.5rem; }
  .hero__ctas{ margin-top:16px; }
  .hero__note{ margin-top:14px; }
}

/* Under 375px the band pills drop their arrows: the 26px they cost is the
   difference between a one-line label and a two-line one. */
@media (max-width:374px){
  .cta-band .btn__arrow{ display:none; }
  .cta-band .btn{ padding-inline:16px; }
}

/* The narrowest phones still in use (320px): one more notch on the label. */
@media (max-width:339px){
  .hero__ctas .btn{ font-size:.75rem; padding-inline:12px; }
}

/* Form card — the most visible element in the hero after the H1 */
.form-card{
  position:relative; z-index:2;
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:20px 18px 18px;
  box-shadow:0 18px 44px -28px rgba(72,68,65,.55);
}
.form-card__head{ border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:16px; }
.form-card h2{ font-size:1.25rem; margin:0; letter-spacing:-.02em; }
.form-card__note{ margin:5px 0 0; font-size:.75rem; color:var(--taupe); }
@media (min-width:1024px){ .form-card{ padding:22px 24px 20px; } }

.field{ margin-bottom:12px; }
.field label{
  display:block; font-size:.625rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:5px;
}
.field .req{ color:var(--walnut); }
.field ::placeholder{ color:var(--taupe); opacity:.85; }
.field input,.field select,.field textarea{
  width:100%; min-height:46px; padding:11px 13px;
  background:var(--paper); border:1px solid var(--border); border-radius:6px;
  color:var(--charcoal); font-size:1rem;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ min-height:64px; 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 14px center; padding-right:38px;
}
.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-privacy{ margin:12px 0 0; font-size:.75rem; line-height:1.6; color:var(--taupe); }
.form-privacy strong{ color:var(--charcoal); font-weight:600; }
.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); }
.form-status a{ font-weight:700; color:var(--wa-dk); }
/* Spam trap: out of sight, out of the tab order, still submitted by bots.
   Positioned away rather than display:none, which some bots skip. */
.hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* ========================= ROUTES COVERED =============================
   The seven routes, named where the visitor looks first, drawn to the
   client's mockup: a walnut line icon in a soft clay disc, the label
   beneath in small caps, no boxes and no grid lines.

   Flex rather than grid, because seven is an awkward count: wrapping with
   justify-content:center leaves the short last row centred on its own at
   every breakpoint — 3 per row on mobile (so the seventh sits alone in the
   middle, as drawn), 4 at tablet, all seven across on desktop.
   ====================================================================== */
.routes-band{
  background:var(--white);
  padding-top:clamp(30px,4.4vw,48px); padding-bottom:var(--section-y);
}
.routes{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  row-gap:30px; column-gap:0;
}
.route{
  flex:0 0 33.3333%;
  display:flex; flex-direction:column; align-items:center; gap:13px;
  padding:0 6px; text-align:center;
}
/* The disc is the icon's own background — no extra element to place. */
.route__icon{
  flex:none; box-sizing:content-box;
  width:26px; height:26px; padding:19px;
  border-radius:50%;
  background:rgba(164,131,113,.16);       /* Light Clay, softened */
  color:var(--walnut);
}
.route span{
  font-size:.625rem; font-weight:700; letter-spacing:.11em; line-height:1.5;
  text-transform:uppercase; color:var(--charcoal);
  max-width:15ch;
}
@media (min-width:700px){
  .route{ flex-basis:25%; }
}
@media (min-width:1024px){
  /* Four across, three centred beneath — the phone's rhythm at desktop size.
     Seven across spread the strip the full width of a 1366px screen, which
     left every label wrapping to two or three lines against neighbours that
     fit on one, and a ragged bottom edge. Capping the strip and giving each
     label room puts all but the longest on a single line. */
  .routes{ max-width:1080px; margin-inline:auto; row-gap:40px; }
  .route{ flex-basis:25%; padding-inline:14px; }
  .route span{ max-width:200px; }
  .route__icon{ width:28px; height:28px; padding:20px; }
}

/* ============================ STATS ===================================
   One quiet row on the same ground as the routes, divided by hairlines —
   no boxes. 2×2 on mobile, four across from 768px up.
   ====================================================================== */
/* The stat bar now sits directly under the hero, as the brief orders it and
   as the mockup draws it, with the routes strip beneath. The two share one
   white band, so the padding lives on the outer edges only. */
.stats{ background:var(--white); padding-top:clamp(32px,4.6vw,52px); padding-bottom:0; }
.stats__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border);
}
.stat{
  padding:22px 12px; text-align:center;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat:nth-child(2n){ border-right:0; }
.stat:nth-last-child(-n+2){ border-bottom:0; }
.stat__figure{
  display:block; font-weight:800; font-size:clamp(1.15rem,3.8vw,1.6rem);
  letter-spacing:-.02em; color:var(--walnut); line-height:1.15;
}
.stat__label{
  display:block; margin-top:7px; font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; line-height:1.5; text-transform:uppercase; color:var(--taupe);
}
.stats__note{ margin:20px 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; border-bottom:0; }
  .stat:nth-child(2n){ border-right:1px solid var(--border); }
  .stat:last-child{ border-right:0; }
}

/* ================= TRUST MARKS / SOCIAL PROOF STRIP =================== */
.trustbar{ background:var(--paper-alt); padding-block:36px; border-block:1px solid var(--border); }
.trustbar__grid{
  display:grid; grid-template-columns:1fr; gap:0;
}
.trustmark{
  position:relative;                 /* anchors the stretched link below */
  padding:20px 0; text-align:center;
  border-bottom:1px solid var(--border);
}
.trustmark:last-child{ border-bottom:0; }
.trustmark__logo{
  filter:grayscale(1); opacity:.78;
  font-size:.9375rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--charcoal); line-height:1.2;
}
/* Drop-in slot: an official logo replaces the wordmark without touching
   anything else. Capped so a tall or wide mark cannot break the row. */
.trustmark__logo img{
  max-height:34px; width:auto; margin-inline:auto;
}
.trustmark .stars{ margin-top:8px; font-size:.8125rem; }
.trustmark__line{
  margin:10px 0 0; font-size:.8125rem; line-height:1.6; color:var(--charcoal);
  max-width:34ch; margin-inline:auto;
}
.trustmark__meta{
  margin:8px 0 0; font-size:.6875rem; line-height:1.6; color:var(--taupe);
  max-width:34ch; margin-inline:auto;
}
/* The whole mark is the tap target — the link is stretched over it, the same
   pattern the review cards use. Kept visible as text so it reads as a link. */
.trustmark__go{
  display:inline-block; margin-top:10px;
  font-size:.6875rem; font-weight:700; letter-spacing:.04em;
  color:var(--walnut); text-decoration:none; border-bottom:1px solid currentColor;
}
.trustmark__go::after{ content:''; position:absolute; inset:0; }
.trustmark:hover .trustmark__logo{ opacity:1; }
.trustmark__go:focus-visible{ outline:2px solid var(--walnut); outline-offset:3px; }
/* Four marks, matching page 1's strip: two columns at tablet, four across
   on desktop. */
@media (min-width:768px){
  .trustbar__grid{ grid-template-columns:repeat(2,1fr); column-gap:32px; }
  .trustmark{ text-align:left; padding:18px 0; }
  .trustmark__line,.trustmark__meta{ margin-inline:0; }
  .trustmark__logo img{ margin-inline:0; }
  .trustmark:nth-last-child(-n+2){ border-bottom:0; }
}
@media (min-width:1024px){
  .trustbar{ padding-block:44px; }
  .trustbar__grid{ grid-template-columns:repeat(4,1fr); column-gap:0; }
  .trustmark{
    padding:4px 28px; border-bottom:0; border-right:1px solid var(--border);
  }
  .trustmark:first-child{ padding-left:0; }
  .trustmark:last-child{ border-right:0; padding-right:0; }
}

/* =========================== CARD GRIDS =============================== */
.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); }
.card__num{ display:block; font-weight:900; font-size:1rem; color:var(--clay); margin-bottom:12px; }
.card p{ margin:0; font-size:.9375rem; }
@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 =============================== */
.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 ================================= */
.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); }
.step__num{
  display:block; font-weight:900; font-size:2rem; line-height:1;
  color:var(--clay); 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 ================================
   Built to the client's mockup: a charcoal band with the hero photograph
   behind it, blurred hard enough to read as warm light rather than as a
   picture, and two pills — the green one to WhatsApp, the outlined one to
   the form.
   ====================================================================== */
.cta-band,.final-cta{
  position:relative; overflow:hidden;
  background:var(--charcoal); color:var(--white);
  padding-block:var(--section-y);
}
/* The photograph. scale() covers the soft, semi-transparent edge that a
   large blur radius leaves behind; without it the band shows a pale halo
   at all four sides. Shared by both dark bands. */
.band-photo{ position:absolute; inset:0; z-index:0; }
.band-photo img{
  width:100%; height:100%; object-fit:cover; object-position:62% 40%;
  filter:blur(26px) saturate(.9) brightness(.95);
  transform:scale(1.22);
}
/* The closing band takes the same photograph mirrored and cropped from the
   other side, so the two read as a pair rather than as a repeat. */
.band-photo--flip img{ object-position:34% 56%; transform:scale(1.28) scaleX(-1); }
/* Washed into the charcoal from the left, so the copy sits on a flat field
   and only the right of the band keeps any of the image. */
.band-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg,
    var(--charcoal) 18%, rgba(72,68,65,.93) 36%, rgba(72,68,65,.7) 54%,
    rgba(72,68,65,.4) 74%, rgba(72,68,65,.2) 100%);
}
/* The mockup stacks everything on the left — headline, line, both pills —
   and leaves the right of the band to the photograph. */
.cta-band__inner{ position:relative; z-index:1; }
.cta-band h2{ color:var(--white); }
/* The closing clause, as the mockup picks it out. Light Clay is too dark to
   carry on charcoal (2.7:1), so it is lifted with the palette's own off-white
   — a tint of two tokens, not a new colour. --stone is the fallback where
   color-mix is not supported. */
.cta-band h2 em,.final-cta h2 em{ font-style:normal; color:var(--stone); }
@supports (color:color-mix(in srgb,red,blue)){
  .cta-band h2 em,.final-cta h2 em{ color:color-mix(in srgb, var(--clay) 78%, var(--white)); }
}
.cta-band p{ color:var(--stone); }
.cta-band__copy{ max-width:46ch; }
.cta-band h2{ font-size:clamp(1.6rem,3.4vw,2.9rem); }
.cta-band__actions{ display:grid; gap:12px; margin-top:30px; }

/* Both controls are pills in this band, as drawn. They stay unmistakably
   different controls: one is filled with the reserved green and carries the
   WhatsApp glyph in a ring, the other is an outline with an envelope. */
.cta-band .btn,.final-cta .btn{
  border-radius:999px; justify-content:flex-start;
  min-height:58px; padding:8px 24px 8px 22px; text-align:left;
}
.cta-band .btn--whatsapp,.final-cta .btn--whatsapp{ padding-left:8px; }
.cta-band .btn__arrow,.final-cta .btn__arrow{ margin-left:auto; padding-left:12px; box-sizing:content-box; }
.btn__ring{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(250,249,248,.85);
}
.btn__mail{ flex:none; }

/* On a phone the copy runs the full width of the band, so the wash has to
   carry further across before the photograph is allowed through. */
@media (max-width:767px){
  .band-photo::after{
    background:linear-gradient(92deg,
      var(--charcoal) 30%, rgba(72,68,65,.95) 56%, rgba(72,68,65,.82) 100%);
  }
  /* One line each, so the two pills stay the same height. */
  .cta-band .btn{ min-height:54px; font-size:.8125rem; gap:8px; padding-inline:18px 18px; }
  .cta-band .btn__arrow{ padding-left:8px; }
  .cta-band .btn--whatsapp{ padding-left:7px; }
  .btn__ring{ width:34px; height:34px; }
}

/* 320px: the label needs the last notch to stay on one line. */
@media (max-width:339px){
  .cta-band .btn{ font-size:.75rem; padding-inline:14px; }
}

@media (min-width:560px){
  /* Sized to their labels rather than stretched across a column, so each pill
     keeps the mockup's proportions instead of growing into a slab. */
  .cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; }
  .cta-band .btn{ flex:0 1 auto; }
}
@media (min-width:960px){
  .cta-band__inner{ max-width:64%; }
  .cta-band__copy{ max-width:640px; }
  .cta-band{ padding-block:calc(var(--section-y) - 12px); }
}

/* The closing band: the same dark ground as the mid-page one, so the page
   opens and closes on the same note. Its copy is centred on a narrower
   measure, which is what keeps the two from looking identical. */
.final-cta__inner{ position:relative; z-index:1; max-width:820px; }
.final-cta h2{ color:var(--white); font-size:clamp(1.6rem,3.4vw,2.9rem); }
.final-cta .lede{ color:var(--stone); }
.final-cta__actions{ display:grid; gap:12px; margin-top:30px; }
/* Full-strength stone: at .82 opacity this small print blended down to
   about 4.1:1 on the charcoal, under the 4.5:1 the size requires. */
.final-cta__note{ color:var(--stone); margin-top:14px; }
.final-cta__phone{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:20px;
  font-weight:700; color:var(--white); text-decoration:none;
  border-bottom:1px solid rgba(250,249,248,.5);
  transition:border-color .25s var(--ease);
}
.final-cta__phone:hover{ border-bottom-color:var(--white); }
@media (max-width:767px){
  .final-cta .btn{ min-height:54px; font-size:.8125rem; gap:8px; padding-inline:18px 18px; }
  .final-cta .btn__arrow{ padding-left:8px; }
  .final-cta .btn--whatsapp{ padding-left:7px; }
}
@media (max-width:374px){
  .final-cta .btn__arrow{ display:none; }
  .final-cta .btn{ padding-inline:16px; }
}
@media (max-width:339px){ .final-cta .btn{ font-size:.75rem; padding-inline:14px; } }
@media (min-width:620px){
  .final-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; }
  .final-cta .btn{ flex:0 1 auto; }
}

/* ========================== 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 ================================== */
.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__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; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__item.is-open .faq__a{ display:block; }

/* ============================ 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); }
.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); }
@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 stays to the end of the page.
   Two actions, split evenly: message or call. Both are green, because both
   are the same kind of thing — a conversation with a person, as against the
   walnut form controls. They are told apart by their icons, their labels and
   the rule between them, not by colour.
   ====================================================================== */
.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:10px;
  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(--wa); color:var(--white); }
.sticky-bar__wa:hover,.sticky-bar__wa:active{ background:var(--wa-dk); }
.sticky-bar__call{ background:var(--wa); color:var(--white); border-left:1px solid rgba(250,249,248,.3); }
/* The bar is mobile-only, so a press is the only interaction it ever gets. */
.sticky-bar__call:active{ background:var(--wa-dk); }
@media (max-width:359px){ .sticky-bar a{ font-size:.8125rem; gap:7px; } }
@media (min-width:900px){ .sticky-bar{ display:none; } }

/* ============================ MOTION ================================== */
.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; }
}

/* ===================== THANK-YOU PAGE (/thank-you) ==================== */
/* Confirmation page reached only after /api/lead has emailed the enquiry.
   Uses the same tokens, type and controls as the landing page; nothing here
   applies to any other 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; }
.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(--clay); 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; }
.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; }
}