/* ==========================================================================
   Aden & Co Solicitors — FLR / Further Leave to Remain paid landing page
   Campaign page 3 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.

   LAYOUT is built to the client's reference (the mockup supplied 18 Sep
   2026): dark photographic hero with the copy washed over its left half
   and a solid form card floating right; a regulation strip; a split
   "what you get" section with a 2x2 icon-card grid; a numbered process row
   with connecting arrows; quote cards with avatar discs; a dark closing
   band. Every colour and typeface in it is Aden & Co's, not the mockup's.
   ========================================================================== */

:root{
  /* --- Closed colour system ------------------------------------------- */
  --paper:        #F0F0F2;  /* primary canvas                              */
  --paper-alt:    #E7E5E5;  /* alternating sections                        */
  --walnut:       #7F4E35;  /* PRIMARY ACTION — buttons, pills, accents    */
  --walnut-hover: #89563B;  /* hover                                       */
  --charcoal:     #484441;  /* primary typography                          */

  /* --- The reserved WhatsApp colour -----------------------------------
     Carried over from pages 1 and 2 unchanged. 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. --wa clears 4.5:1 with white; WhatsApp's own
     #25D366 does not (about 2:1), so it never carries a label.           */
  --wa:           #16824A;  /* RESERVED: WhatsApp controls ONLY            */
  --wa-dk:        #11663A;  /* WhatsApp hover only                         */
  --wa-bright:    #25D366;  /* UNUSED on this page                         */

  /* --- Deep Espresso: every dark surface ------------------------------
     From the palette PDF. Pages 1 and 2 left it defined but unused. It is
     a SURFACE colour here, never a control colour, so it never competes
     with the reserved green. No pure black — the palette has none.       */
  --espresso:     #3B2F29;
  --espresso-dk:  #2E2420;

  --stone:        #C9BFBB;  /* light text on dark                          */
  --taupe:        #8E7A70;  /* muted labels                                */
  --clay:         #A48371;  /* numbers, subtle accents                     */
  /* Light Clay is too dark to carry small text on espresso (3.73:1 — it
     fails outright), so on dark it is lifted with the palette's own
     off-white. A mix of two existing tokens, not a new colour: 5.48:1 on
     the canvas. --stone is the fallback where color-mix is unsupported.  */
  --accent:       #BCA497;
  --white:        #FAF9F8;
  --border:       #D6D0CD;
  --error:        #8C2F1F;

  /* Walnut at low opacity — the reference's mint-tinted pills, icon tiles
     and section bands, in this palette. Built from --walnut so nothing new
     enters the system. */
  --tint:         rgba(127,78,53,.07);
  --tint-strong:  rgba(127,78,53,.13);

  /* --- Shape, spacing, motion -----------------------------------------
     The reference rounds everything to a soft rectangle rather than a
     pill, so that is what the buttons and cards do here. */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --gutter: 20px;
  --maxw: 1240px;
  --section-y: 60px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@supports (color:color-mix(in srgb,red,blue)){
  :root{ --accent:color-mix(in srgb, var(--clay) 72%, var(--white)); }
}

@media (min-width:768px){ :root{ --gutter:28px; --section-y:80px; } }
@media (min-width:1100px){ :root{ --gutter:32px; --section-y:100px; } }

/* ------------------------------------------------------------------ base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  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. */
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:-.025em; }
h1{ font-weight:800; font-size:clamp(2rem,5.4vw,3.35rem); line-height:1.08; letter-spacing:-.035em; }
h2{ font-weight:800; font-size:clamp(1.55rem,3.4vw,2.35rem); line-height:1.14; }
h3{ font-weight:700; font-size:1.0625rem; line-height:1.35; letter-spacing:-.015em; }
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); }
.section--tint{ background:var(--tint); }
.lede{ font-size:1.0625rem; }
.muted{ color:var(--taupe); font-weight:500; }
.small{ font-size:.8125rem; line-height:1.6; }
.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. */
.hero :focus-visible,.final-cta :focus-visible,
.footer :focus-visible,.sticky-bar :focus-visible{ outline-color:var(--white); }

#enquiry,#process,#solicitor,#top{ scroll-margin-top:18px; }
@media (min-width:900px){ #enquiry,#process,#solicitor,#top{ scroll-margin-top:86px; } }

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

/* ============================== PILL ==================================
   The reference's small tinted label above every section heading. Walnut
   on a walnut tint; on dark it lifts to the accent on a white tint.
   ====================================================================== */
.pill{
  display:inline-block; margin:0 0 16px; padding:7px 14px;
  background:var(--tint-strong); border-radius:999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--walnut);
}
.pill--on-dark{
  background:rgba(250,249,248,.12); color:var(--accent);
  border:1px solid rgba(250,249,248,.16);
}

/* ============================ BUTTONS =================================
   Soft rectangles, as the reference draws them. Colour, not shape, is what
   separates the two kinds of control:

     GREEN  = talk to a person  (WhatsApp — reserved, nothing else)
     WALNUT = fill something in (the form submit and every primary CTA)
   ====================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 24px;
  border:1px solid transparent; border-radius:var(--radius);
  font-size:.9375rem; font-weight:700; letter-spacing:.005em; text-align:center;
  text-decoration:none; cursor:pointer;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn svg{ flex:none; }
.btn__arrow{ transition:transform .22s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.btn--primary{ background:var(--walnut); color:var(--white); }
.btn--primary:hover{ background:var(--walnut-hover); }

.btn--whatsapp{ background:var(--wa); color:var(--white); }
.btn--whatsapp:hover{ background:var(--wa-dk); }
.btn--whatsapp:active{ transform:translateY(1px); }

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

/* 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:6px; background:var(--white);
}

/* ============================ HEADER ==================================
   The reference's header: identity left, strapline right. No navigation
   and no hamburger — an empty menu button is an exit with nothing behind
   it. The one action lives where the reference puts its menu.
   ====================================================================== */
.header{
  background:var(--espresso-dk);
  position:relative; z-index:40;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:62px; padding-block:9px;
}
.brand{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:inherit; min-width:0; }
.brand__mark{ width:32px; height:auto; }
.brand__text{ display:block; min-width:0; }
.brand__name{
  display:block; font-weight:800; font-size:.95rem; line-height:1.05;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
}
.brand__sub{
  display:block; font-size:.5625rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--stone); margin-top:3px;
}
.header__strap{
  display:none; margin:0; font-size:.75rem; font-weight:600;
  letter-spacing:.02em; color:var(--stone);
}
.header__strap span{ color:var(--accent); padding-inline:5px; }
.header .btn{ flex:none; white-space:nowrap; }
.header .btn__long{ display:none; }

@media (min-width:560px){
  .header .btn__long{ display:inline; }
  .header .btn__short{ display:none; }
}
@media (min-width:768px){
  .header__inner{ min-height:70px; }
  .brand__mark{ width:40px; }
  .brand__name{ font-size:1.05rem; }
}
@media (min-width:980px){
  .header__strap{ display:block; margin-left:auto; margin-right:10px; }
}
/* Sticky on desktop, so the action is never scrolled away — the desktop
   layout has no sticky bottom bar. Not sticky below 900px: the bottom bar
   already carries the two mobile actions, and two fixed bars eat a phone
   screen. Scoped to .lp; /thank-you shares this stylesheet. */
@media (min-width:900px){
  .lp .header{ position:sticky; top:0; }
  .lp .header.is-stuck{ box-shadow:0 6px 26px rgba(20,14,11,.32); }
}

/* ============================== HERO ==================================
   A dark photographic scene. The photograph is the ground; two washes in
   espresso do the darkening, so swapping the image needs no new CSS.
   ====================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--espresso-dk); color:var(--white);
  padding-block:38px 44px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  object-position:64% 26%;
  filter:saturate(.72) brightness(.62);
}
/* Washed from the left so the copy always sits on a flat field, and from
   the foot so the hero resolves into the section beneath rather than
   ending on a line. */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(46,36,32,.55) 0%, rgba(46,36,32,0) 26%, rgba(46,36,32,.5) 78%, rgba(46,36,32,.92) 100%),
    linear-gradient(92deg, var(--espresso-dk) 6%, rgba(46,36,32,.93) 34%, rgba(46,36,32,.72) 58%, rgba(46,36,32,.58) 100%);
}
/* On a phone the copy runs the full width, so the photograph has to drop back
   to being texture rather than a second thing to look at — which is how the
   mobile mockup reads. The wash carries most of the way across instead of
   clearing the right-hand side. */
@media (max-width:899px){
  .hero__bg img{ filter:saturate(.6) brightness(.5); object-position:58% 24%; }
  .hero__bg::after{
    background:
      linear-gradient(180deg, rgba(46,36,32,.72) 0%, rgba(46,36,32,.4) 34%, rgba(46,36,32,.72) 82%, rgba(46,36,32,.96) 100%),
      linear-gradient(94deg, var(--espresso-dk) 10%, rgba(46,36,32,.95) 46%, rgba(46,36,32,.86) 78%, rgba(46,36,32,.8) 100%);
  }
}
/* Both columns start on the same line. Centring them put the shorter copy
   column halfway down the taller form, which read as a stray gap above the
   headline. */
.hero__grid{ position:relative; z-index:2; display:grid; gap:26px; align-items:start; }

.hero h1{ color:var(--white); margin:0 0 18px; max-width:15ch; }
.hero h1 em{ font-style:normal; color:var(--accent); position:relative; display:inline-block; }
/* The reference's hand-drawn underline under the accented clause. */
.swoosh{
  position:absolute; left:0; right:0; bottom:-.2em; width:100%; height:.3em;
  color:var(--accent); opacity:.85; pointer-events:none;
}
/* The mobile mockup has no underline — at phone sizes it sat right on the
   descenders and read as clutter rather than emphasis. */
@media (max-width:899px){ .swoosh{ display:none; } }
.hero__sub{ max-width:46ch; font-size:1.0625rem; color:var(--stone); margin:0 0 22px; }

/* ---- The three inline reassurances ---------------------------------- */
/* THE THREE REASSURANCES
   Two treatments. Below 900px they are stacked columns — outline icon, bold
   line, muted sub-line — which is how the mobile mockup draws them and what
   keeps the hero from feeling crowded. From 900px they collapse to a single
   inline row and the sub-lines come off: there the hero has to fit the fold,
   and horizontal space is the thing there is plenty of. */
.checks{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 12px;
}
.checks li{ display:block; min-width:0; }
.checks svg{ display:block; width:22px; height:22px; color:var(--accent); margin-bottom:9px; }
.checks__title{
  display:block; font-size:.875rem; font-weight:700; color:var(--white);
  line-height:1.3; letter-spacing:-.01em;
}
.checks__sub{
  display:block; margin-top:3px; font-size:.6875rem; line-height:1.4;
  color:var(--stone); opacity:.85;
}
@media (max-width:359px){
  .checks{ gap:14px 8px; }
  .checks__title{ font-size:.8125rem; }
  .checks__sub{ font-size:.625rem; }
}
@media (min-width:900px){
  .checks{
    grid-template-columns:repeat(3,auto); justify-content:start;
    gap:12px 24px; margin-bottom:24px;
  }
  .checks li{ display:flex; align-items:center; gap:8px; }
  .checks svg{ width:19px; height:19px; margin-bottom:0; }
  .checks__title{ font-size:.875rem; }
  .checks__sub{ display:none; }
}

.hero__wa .btn{ width:100%; }
.hero__microcopy{
  margin:10px 0 0; font-size:.8125rem; line-height:1.55; color:var(--stone);
}

/* ---- The form card --------------------------------------------------- */
.form-card{
  background:var(--white); color:var(--charcoal);
  border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:22px 20px 20px;
  box-shadow:0 26px 60px rgba(20,14,11,.4);
}
/* The mockup's small uppercase label with a hairline running off it. */
.rule-label{
  display:flex; align-items:center; gap:12px;
  margin:0 0 10px; font-size:.625rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--taupe);
}
.rule-label::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.form-card h2{ font-size:1.35rem; margin:0 0 6px; }
.form-card__note{ margin:0 0 18px; font-size:.8125rem; line-height:1.55; color:var(--taupe); }

.field{ margin-bottom:10px; position:relative; }
.field label{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.01em;
  margin-bottom:5px; color:var(--charcoal);
}
.field .req{ color:var(--walnut); }
.field ::placeholder{ color:var(--taupe); opacity:.9; }
.field input,.field select,.field textarea{
  width:100%; min-height:46px; padding:11px 14px;
  background:var(--paper); color:var(--charcoal);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* The reference puts a line icon inside the left of every field. */
.field--icon input,.field--icon select{ padding-left:42px; }
.field__icon{
  position:absolute; left:13px; bottom:13px; width:19px; height:19px;
  color:var(--taupe); pointer-events:none;
}
.field__icon svg{ width:100%; height:100%; }
.field--error .field__icon{ color:var(--error); }

.field textarea{ min-height:52px; resize:vertical; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238E7A70' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
  padding-right:38px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--walnut); box-shadow:0 0 0 3px rgba(127,78,53,.16);
}
.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:460px){ .field-row{ grid-template-columns:1fr 1fr; column-gap:12px; } }

.form-card .btn--block{ margin-top:4px; min-height:50px; }
/* The reference's small padlock line directly beneath the submit. */
/* One block, not two: the assurance and the privacy line read as a single
   note under the button and cost one margin instead of two. */
.form-safe{
  display:flex; align-items:flex-start; gap:7px;
  margin:10px 0 0; font-size:.6875rem; line-height:1.5;
  font-weight:500; color:var(--taupe); text-align:left;
}
.form-safe strong{ color:var(--charcoal); font-weight:700; }
.form-safe svg{ flex:none; width:14px; height:14px; margin-top:2px; color:var(--walnut); }
.form-status{
  display:none; margin:14px 0 0; padding:11px 13px;
  border-left:3px solid var(--walnut); background:var(--paper);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.8125rem; line-height:1.55;
}
.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;
}

/* ---- Hero at width -------------------------------------------------- */
@media (min-width:600px){
  .hero{ padding-block:48px 56px; }
  .hero__wa .btn{ width:auto; }
}
@media (min-width:900px){
  .hero{ padding-block:44px 48px; }
  .hero__grid{
    grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
    gap:clamp(28px,4vw,60px);
  }
  .hero h1{ max-width:13ch; font-size:clamp(2.4rem,3.8vw,3.4rem); }
  .hero__sub{ font-size:1rem; margin-bottom:18px; }
  .form-card{ padding:22px 24px 20px; max-width:470px; margin-left:auto; }
  .form-card h2{ font-size:1.2rem; }
  .form-card__note{ margin-bottom:14px; }
}
@media (min-width:1200px){
  .hero{ padding-block:56px 60px; }
  .hero h1{ font-size:clamp(2.9rem,3.9vw,3.7rem); }
}

/* Short laptop screens — 1280x640 and the like, which is most of them once
   the browser chrome and the taskbar are taken off a 768px-tall panel. The
   whole hero, form included, still has to land inside the first screen, so
   the vertical rhythm steps down rather than the page scrolling. */
@media (min-width:900px) and (max-height:820px){
  .hero{ padding-block:26px 22px; }
  .hero h1{ font-size:clamp(2.6rem,4.15vw,3.6rem); margin-bottom:14px; }
  .hero__sub{ font-size:.9375rem; margin-bottom:16px; }
  .pill{ margin-bottom:12px; }
  .checks{ margin-bottom:18px; }
  .form-card{ padding:16px 20px 15px; }
  .form-card h2{ font-size:1.125rem; }
  .form-card__note{ margin-bottom:11px; font-size:.75rem; }
  /* 44px is the floor and it is kept; everything around the fields gives
     up its slack instead. */
  .form-card .field{ margin-bottom:8px; }
  .form-card .field label{ margin-bottom:4px; font-size:.71875rem; }
  .form-card .field input,.form-card .field select{ min-height:44px; padding-block:10px; }
  /* rows="2" gives the textarea an intrinsic height of 75px, which is what
     was pushing the card past the fold. Pinned to one visible line here; it
     still takes multiple lines of input and still drags taller. */
  .form-card .field textarea{ min-height:44px; height:46px; }
  .form-card .btn--block{ min-height:48px; margin-top:2px; }
  .form-safe{ margin-top:8px; }
}
/* Netbook-class heights (1024x600 and similar). The last of the slack. */
@media (min-width:900px) and (max-height:700px){
  .hero{ padding-block:20px 18px; }
  .hero h1{ font-size:clamp(2.25rem,3.6vw,2.9rem); }
  .hero__sub{ margin-bottom:14px; }
  .form-card{ padding:13px 18px 12px; }
  .form-card h2{ font-size:1.0625rem; }
  .form-card__note{ margin-bottom:9px; }
  .form-card .field{ margin-bottom:7px; }
  /* The label-and-rule above the card heading is the first thing to go at
     netbook heights: it is decoration, and the heading says the same thing. */
  .form-card .rule-label{ display:none; }
}
@media (max-width:359px){
  .checks{ gap:8px 9px; }
  .checks li{ font-size:.6875rem; gap:5px; }
  .checks svg{ width:15px; height:15px; }
  .btn{ font-size:.875rem; padding-inline:16px; }
}

/* ======================= REGULATION STRIP =============================
   The reference's logo row. These are the bodies that actually regulate
   and accredit the firm, each a link the visitor can go and check.
   ====================================================================== */
.trust{ background:var(--white); padding-block:34px; border-bottom:1px solid var(--border); }
.trust__head{
  margin:0 0 22px; text-align:center;
  font-size:.9375rem; font-weight:700; letter-spacing:-.01em; color:var(--charcoal);
}
.trust__marks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px 10px;
}
.trust__marks a{
  display:flex; align-items:center; gap:9px; min-height:44px;
  text-decoration:none; color:var(--taupe);
  transition:color .2s var(--ease);
}
.trust__marks a:hover{ color:var(--charcoal); }
.trust__marks > li > a > svg{ flex:none; width:22px; height:22px; }
.trust__marks span{ display:flex; flex-direction:column; min-width:0; font-size:.6875rem; line-height:1.4; }
.trust__marks strong{ font-size:.8125rem; font-weight:700; color:var(--charcoal); letter-spacing:-.01em; }
/* The Google mark keeps its own colours: the claim belongs to Google, not
   the firm, and the artwork is what makes that legible at a glance. */
.trust__g{ width:20px; height:20px; }

@media (min-width:768px){
  .trust{ padding-block:40px; }
  .trust__marks{ grid-template-columns:repeat(4,1fr); gap:18px; justify-items:center; }
}

/* ---- The stat row, beneath the marks --------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  margin-top:26px; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--paper);
}
.stat{
  padding:18px 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.05rem,3.4vw,1.45rem);
  letter-spacing:-.025em; color:var(--walnut); line-height:1.15;
}
.stat__label{
  display:block; margin-top:6px; font-size:.625rem; font-weight:700;
  letter-spacing:.09em; line-height:1.5; text-transform:uppercase; color:var(--taupe);
}
@media (min-width:768px){
  .stats{ grid-template-columns:repeat(4,1fr); }
  .stat{ padding:22px 16px; border-bottom:0; }
  .stat:nth-child(2n){ border-right:1px solid var(--border); }
  .stat:last-child{ border-right:0; }
}
.trust__note{ margin:16px auto 0; max-width:72ch; text-align:center; color:var(--taupe); }

/* ========================= SECTION HEADINGS =========================== */
.section__head{ max-width:56ch; margin-bottom:34px; }
.section__head h2{ margin:0; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__sub{ margin:10px 0 0; color:var(--taupe); font-size:.9375rem; }

/* ====================== SPLIT: WHAT YOU GET ===========================
   Copy and a doodle on the left, a 2x2 grid of icon cards on the right.
   ====================================================================== */
.split__grid{ display:grid; gap:34px; }
.split__copy h2{ margin:0 0 14px; }
.split__copy p{ color:var(--taupe); max-width:46ch; }
/* The reference's hand-drawn arrow under the paragraph. */
.doodle{ width:110px; height:auto; color:var(--walnut); opacity:.5; margin-top:4px; }

.cards{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 16px;
}
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:12px;
  border-radius:11px; background:var(--tint-strong); color:var(--walnut);
}
.card__icon svg{ width:21px; height:21px; }
.card h3{ margin:0 0 6px; font-size:.9375rem; }
.card p{ margin:0; font-size:.8125rem; line-height:1.6; color:var(--taupe); }
.card__num{
  display:block; font-weight:800; font-size:.8125rem; letter-spacing:.06em;
  color:var(--clay); margin-bottom:10px;
}

/* The reference's mobile cards carry the icon and the title only — the
   explanation appears from tablet up. It is what keeps the phone layout as
   tight as the mockup; the same four points are spelled out in the process
   and FAQ sections below, so nothing is only here. */
@media (max-width:639px){ .split .card p{ display:none; } }

@media (min-width:768px){
  .card{ padding:22px 20px; }
  .card h3{ font-size:1rem; }
  .card p{ font-size:.875rem; }
}
@media (min-width:980px){
  .split__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(40px,5vw,72px); align-items:center; }
  .cards{ gap:18px; }
  .cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ============================= PROCESS ================================
   The reference's numbered markers with connecting arrows between them.
   ====================================================================== */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px;
}
.step{ text-align:center; }
.step__mark{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:12px;
}
.step__num{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--espresso-dk); color:var(--white);
  font-size:.8125rem; font-weight:800;
}
.step__icon{ flex:none; width:24px; height:24px; color:var(--walnut); }
.step h3{ margin:0 0 5px; font-size:.9375rem; }
.step p{ margin:0; font-size:.8125rem; line-height:1.6; color:var(--taupe); }
/* The arrows are pure decoration and are hidden from assistive technology;
   the list is already a numbered sequence. */
.steps__arrow{ display:none; }

@media (min-width:1000px){
  .steps{
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:start; gap:0 12px;
  }
  .steps__arrow{ display:block; margin-top:15px; color:var(--border); }
  .steps__arrow svg{ width:30px; height:12px; }
  .step{ padding-inline:8px; }
}

/* ============================ SOLICITOR =============================== */
.solicitor{ display:grid; gap:26px; }
.solicitor__photo{
  width:100%; max-width:300px; border-radius:var(--radius-xl);
  border:1px solid var(--border); filter:saturate(.9);
}
.solicitor h2{ margin:0 0 10px; }
.solicitor__facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px; font-size:.875rem; }
.solicitor__facts li{ padding-left:15px; border-left:2px solid var(--tint-strong); color:var(--taupe); }
@media (min-width:900px){ .solicitor{ grid-template-columns:300px 1fr; gap:50px; align-items:start; } }

/* =========================== TESTIMONIALS =============================
   Quote cards with an avatar disc, as the reference draws them.

   The reference uses client headshots. The firm has none and inventing
   them would be a fabrication, so each card carries the reviewer's
   initial on a walnut-tinted disc instead. If real, permitted client
   photographs are ever supplied, swap the <span> for an <img> and this
   rule sizes it unchanged.
   ====================================================================== */
.quotes{ display:grid; gap:16px; }
.quote{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px 18px;
}
.quote__avatar{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  background:var(--tint-strong); color:var(--walnut);
  font-weight:800; font-size:1.0625rem;
}
.quote__body{ min-width:0; }
.quote__stars{ color:var(--walnut); letter-spacing:.12em; font-size:.8125rem; margin-bottom:8px; }
.quote p{ margin:0; font-size:.875rem; line-height:1.65; }
.quote__by{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  margin-top:12px; font-size:.75rem; color:var(--taupe);
}
.quote__by strong{ color:var(--charcoal); font-weight:700; font-size:.8125rem; }
@media (min-width:860px){ .quotes{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; } }

/* ============================== FEES ================================== */
.fees{ display:grid; gap:28px; align-items:center; }
.fees h2{ margin:0 0 12px; }
.fees__panel > p{ color:var(--taupe); max-width:50ch; }
.ticks{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; font-size:.875rem; }
.ticks li{ position:relative; padding-left:26px; line-height:1.6; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.36em;
  width:15px; height:15px; border-radius:50%;
  background:var(--tint-strong);
  box-shadow:inset 0 0 0 2px var(--walnut);
}
.fees__image{ border:1px solid var(--border); border-radius:var(--radius-xl); 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{ max-width:860px; margin-inline:auto; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq h3{ margin:0; font-size:1rem; }
.faq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  width:100%; min-height:56px; padding:16px 0;
  background:none; border:0; text-align:left; cursor:pointer;
  font-size:.9375rem; font-weight:700; letter-spacing:-.01em; color:var(--charcoal);
}
.faq__icon{ flex:none; width:14px; height:14px; position:relative; margin-top:4px; }
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; left:0; top:6px; width:14px; height:2px;
  background:var(--walnut); transition:transform .25s var(--ease);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__icon::after{ transform:rotate(0); }
.faq__a{ display:none; padding:0 0 20px; max-width:74ch; }
.faq__a p{ margin:0 0 .75rem; font-size:.875rem; line-height:1.7; color:var(--taupe); }
.faq__a p:last-child{ margin-bottom:0; }
.faq__item.is-open .faq__a{ display:block; }

/* ============================ FINAL CTA ===============================
   The reference's closing band: copy left, actions right.
   ====================================================================== */
.final-cta{
  background:var(--espresso-dk); color:var(--white);
  padding-block:var(--section-y);
}
.final-cta__inner{ display:grid; gap:26px; align-items:center; }
.final-cta h2{ color:var(--white); margin:0 0 10px; max-width:20ch; }
.final-cta__copy p{ margin:0; color:var(--stone); max-width:52ch; font-size:.9375rem; }
.final-cta__actions{ display:grid; gap:12px; align-content:start; }
.final-cta__actions .btn{ width:100%; }
.final-cta__phone{ margin:2px 0 0; font-size:.8125rem; color:var(--stone); text-align:center; }
.final-cta__phone a{ color:var(--white); font-weight:700; }
@media (min-width:900px){
  .final-cta__inner{ grid-template-columns:1.25fr .75fr; gap:56px; }
  .final-cta__actions{ min-width:270px; }
}

/* ============================== FOOTER ================================ */
.footer{
  background:var(--espresso); color:var(--stone);
  padding-block:36px 92px; border-top:1px solid rgba(250,249,248,.1);
}
.footer__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid rgba(250,249,248,.12);
}
.footer__brand{ display:flex; align-items:center; gap:11px; }
.footer__brand img{ width:38px; }
.footer__brand span{
  font-weight:800; font-size:.8125rem; line-height:1.25; text-transform:uppercase;
  color:var(--white); letter-spacing:-.01em;
}
.footer__strap{ margin:0; font-size:.75rem; font-weight:600; color:var(--stone); }
.footer__strap span{ color:var(--accent); padding-inline:4px; }
.footer__details{ font-size:.75rem; line-height:1.9; }
.footer__details a{ color:var(--white); display:inline-flex; align-items:center; min-height:44px; }
.footer__legal{
  margin-top:18px; padding-top:16px; font-size:.6875rem; line-height:1.8;
  border-top:1px solid rgba(250,249,248,.12); color:var(--stone);
}
.footer__legal a{ color:var(--white); }
@media (min-width:900px){ .footer{ padding-bottom:44px; } }

/* ======================= STICKY MOBILE BAR ============================
   Appears once the hero is scrolled past and persists to the end of the
   page. Green is the reserved WhatsApp colour, so the Call half takes the
   page's own dark surface instead — the two are still told apart at a
   glance, 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:56px; font-size:.9375rem; font-weight:700; text-decoration:none;
  transition:background-color .22s 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(--espresso-dk); color:var(--white); border-left:1px solid rgba(250,249,248,.22); }
.sticky-bar__call:active{ filter:brightness(.78); }
@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 .55s 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{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--paper-alt); border:2px dashed var(--taupe); color:var(--taupe);
  font-size:.75rem; line-height:1.6; padding:20px; border-radius:var(--radius-lg);
  min-height:220px;
}

/* ===================== THANK-YOU PAGE (/thank-you) ====================
   Shares this stylesheet. It has no hero, so the header stays in the flow.
   ====================================================================== */
.thanks{ background:var(--tint); }
.thanks__inner{ max-width:720px; }
.thanks__tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; margin-bottom:20px;
  background:var(--walnut); color:var(--white);
}
.thanks h1{ margin:0 0 16px; font-size:clamp(1.8rem,4.6vw,2.8rem); }
.thanks .lede{ margin:0; max-width:56ch; color:var(--taupe); }
.thanks__steps{
  list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px;
}
.thanks__steps li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 18px;
}
.thanks__num{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--tint-strong); color:var(--walnut); font-weight:800; font-size:.8125rem;
}
.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:28px; padding:22px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.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:26px 0 0; font-size:.8125rem; }
@media (min-width:600px){ .thanks__wa .btn{ width:auto; } }