/* ==========================================================================
   Aden & Co Solicitors — UK 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          */
  --espresso:     #3B2F29;  /* RESERVED: WhatsApp controls ONLY            */
  --espresso-dk:  #2E2420;  /* WhatsApp hover only                         */
  --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; } }

/* ============================ BUTTONS ================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 24px;
  border:1px solid transparent; border-radius:var(--radius);
  font-size:.9375rem; font-weight:700; letter-spacing:.01em; text-align:center;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ flex:none; }

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

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

/* WhatsApp — ESPRESSO. This colour appears nowhere else on the page. */
.btn--whatsapp{ background:var(--espresso); color:var(--white); }
.btn--whatsapp:hover{ background:var(--espresso-dk); }
.btn--whatsapp-outline{ background:transparent; color:var(--espresso); border-color:var(--espresso); }
.btn--whatsapp-outline:hover{ background:var(--espresso); color:var(--white); }
.btn--sm{ min-height:44px; padding:10px 16px; font-size:.8125rem; }
.btn--block{ display:flex; width:100%; }

/* ============================ HEADER ================================== */
.header{ background:var(--paper); border-bottom:1px solid var(--border); position:relative; z-index:20; }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand__mark{ width:34px; height:auto; }
.brand__name{
  display:block;
  font-weight:900; font-size:.9375rem; letter-spacing:-.02em; line-height:1.08;
  text-transform:uppercase; color:var(--charcoal);
}
.brand__strap{
  display:block; font-size:.5625rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--taupe); margin-top:2px;
}
.header__reviews{ display:none; text-align:center; }
.stars{ color:var(--walnut); letter-spacing:.12em; font-size:.9rem; line-height:1; }
.header__reviews a{
  display:inline-block; margin-top:2px; font-size:.625rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal);
}
.header .stars{ font-size:.8125rem; }
.header .btn{ flex:none; white-space:nowrap; min-height:40px; padding:8px 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__mark{ width:30px; }
  .brand__name{ font-size:.8125rem; }
  .brand__strap{ display:none; }
  .header__inner{ padding-block:7px; }
  .header .btn{ min-height:38px; padding:8px 14px; }
}
@media (min-width:960px){
  .header__reviews{ display:block; }
  .brand__mark{ width:40px; }
  .brand__name{ font-size:1rem; }
}

/* ========================== BENEFIT BAR =============================== */
.benefits{ background:var(--walnut); color:var(--white); }
.benefits__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; }
.benefits__list li{
  padding:11px var(--gutter); text-align:center;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid rgba(250,249,248,.18);
}
.benefits__list li:last-child{ border-bottom:0; }
/* Below the three-column breakpoint the bar becomes three stacked rows that
   push the headline and form down the fold, so it is dropped on mobile.
   The same three promises are carried by the hero proof list. */
@media (max-width:767px){
  .benefits{ display:none; }
}
@media (min-width:768px){
  .benefits__list{ grid-template-columns:repeat(3,1fr); max-width:var(--maxw); margin-inline:auto; }
  .benefits__list li{ border-bottom:0; border-right:1px solid rgba(250,249,248,.18); padding-block:10px; font-size:.6875rem; }
  .benefits__list li:last-child{ border-right:0; }
}

/* ============================== HERO ==================================
   Rebuilt to the client's hero mockup: chip eyebrow, two-tone headline,
   single WhatsApp action, arch photograph with handwritten note, visa
   stamp and flight path, then features / review card / WhatsApp banner.
   ====================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--white);
  padding-top:26px; padding-bottom:0;
}
.hero__grid{ display:grid; gap:28px; align-items:center; }

/* Chip eyebrow */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 18px; padding:8px 16px 8px 12px;
  background:var(--paper-alt); border:1px solid var(--border); border-radius:999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--walnut);
}
.chip svg{ flex:none; }

.hero h1{ margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--walnut); }
.hero__sub{ max-width:44ch; font-size:1.0625rem; color:var(--taupe); margin-bottom:24px; }
.hero__microcopy{ margin:12px 0 0; max-width:44ch; color:var(--taupe); }

/* Hero WhatsApp button — espresso, reserved colour */
.btn--hero{
  min-height:70px; padding:18px 30px; gap:16px; border-radius:12px;
  font-size:1.0625rem; width:100%; max-width:470px;
}
.btn--hero .btn__arrow{ margin-left:auto; }
.btn--hero span{ white-space:nowrap; }
@media (min-width:768px){ .btn--hero{ width:auto; max-width:none; } }
@media (max-width:430px){ .btn--hero span{ white-space:normal; } }
.btn--hero{ transition:background-color .25s var(--ease), transform .12s var(--ease); }
.btn--hero:active{ transform:translateY(1px); }
.btn--hero:hover .btn__arrow{ transform:translateX(3px); }
.btn__arrow{ transition:transform .25s var(--ease); }

/* ---- Hero art -------------------------------------------------------- */
.hero__art{ position:relative; }

.photo-slot{
  background:var(--stone); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; color:var(--charcoal);
}
.photo-slot span{
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  max-width:30ch; line-height:1.8;
}

/* The arch crop */
.hero__arch{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:999px 999px 24px 24px;
  overflow:hidden;
}

/* Handwritten note + arrow */
.hero__note{
  position:absolute; z-index:3; top:2%; left:0; margin:0;
  font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
  font-size:clamp(1.15rem,3.4vw,1.6rem); line-height:1.15; color:var(--walnut);
  transform:rotate(-6deg);
}
.hero__note-arrow{
  position:absolute; z-index:3; top:12%; left:26%; width:64px; height:50px;
  color:var(--walnut); transform:rotate(6deg);
}

/* Circular visa stamp — sits over the artwork's left edge, as in the mockup */
.hero__stamp{
  position:absolute; z-index:4; left:-6%; bottom:22%;
  width:92px; height:92px; border-radius:50%;
  background:var(--white); color:var(--clay);
  display:grid; place-items:center; padding:6px;
  box-shadow:0 10px 26px -18px rgba(72,68,65,.7);
}
.hero__stamp svg{ width:100%; height:100%; }

/* The mockup composition — copy left, artwork on the right — holds at EVERY
   width, phones included. Only the scale changes. */
.hero__grid{ grid-template-columns:57% 1fr; gap:16px; align-items:center; }
.hero__art{ min-height:0; }

/* Supplied composite: shown whole, bleeding slightly off the right edge.
   No mask — the artwork carries its own torn edge. */
.hero__art-img{
  width:calc(100% + var(--gutter) + 4vw); max-width:none;
  margin-right:calc(-1 * (var(--gutter) + 4vw));
  height:clamp(360px,54vw,660px);
  /* the artwork is portrait with a transparent background, so it is shown
     whole and sized by height — no crop, no plate to blend away */
  object-fit:contain; object-position:right center;
}
/* Placeholder shown only if the image file is not in place yet */
.hero__arch{ aspect-ratio:4/3; }
.hero__note{ top:2%; left:-10%; }
.hero__note-arrow{ top:15%; left:14%; }

/* Phones — same composition, scaled down */
.only-narrow{ display:none; }

/* ======================================================================
   MOBILE HERO (< 768px) — a dedicated composition, not a shrunk desktop.
   Reading order: badge → headline → artwork → supporting line → CTA →
   microcopy → benefits. The headline owns the width; the artwork sits
   beneath it with room to breathe instead of competing for the same line.
   ====================================================================== */
@media (max-width:767px){
  .only-wide{ display:none; }
  .only-narrow{ display:inline; }

  /* ---- Page frame ---------------------------------------------------- */
  :root{ --gutter:18px; }

  /* ---- Header: single compact row, 52px ------------------------------ */
  .header__inner{ padding-block:8px; gap:12px; }
  .brand{ gap:9px; }
  .brand__mark{ width:28px; }
  .brand__name{ font-size:.8125rem; line-height:1.1; }
  .header .btn{ min-height:36px; padding:8px 13px; font-size:.75rem; }
  .header .btn svg{ width:15px; height:15px; }

  /* ---- Hero: art-directed two-part composition ------------------------ */
  .hero{ padding-top:20px; padding-bottom:0; }
  .hero__grid{
    display:grid; grid-template-columns:54% 1fr;
    /* rows 1–2 hug their content so the artwork's extra height lands in row 3 */
    grid-template-rows:auto auto 1fr auto auto;
    column-gap:8px; row-gap:0; align-items:start; text-align:left;
  }
  .hero .hero__copy{ display:contents; }

  .chip{
    grid-column:1; grid-row:1; align-self:start; justify-self:start;
    margin:0 0 16px; padding:7px 11px 7px 9px;
    font-size:.625rem; font-weight:600; letter-spacing:.04em; gap:6px;
    border-radius:999px;
  }
  .chip svg{ width:12px; height:12px; }

  /* Deliberate line breaks in the markup — no browser guessing */
  .hero h1{
    grid-column:1; grid-row:2; margin:0 0 16px;
    font-size:clamp(1.5rem,7.2vw,2.15rem); line-height:1.04; letter-spacing:-.03em;
    font-weight:800; text-wrap:initial;
  }

  .hero__sub{
    grid-column:1; grid-row:3; margin:0;
    font-size:.875rem; line-height:1.45; color:var(--taupe); max-width:260px;
  }

  /* Artwork: same placement (right column) but at full size — the whole
     collage, uncropped, reaching left behind the copy. */
  .hero__art{
    grid-column:2; grid-row:1 / span 3; align-self:center;
    margin-top:0; min-height:0; position:relative; z-index:0;
  }
  .hero__art-img{
    width:calc(100% + var(--gutter)); max-width:none;
    margin:0 calc(-1 * var(--gutter)) 0 0;
    height:auto; object-fit:contain; object-position:center;
  }
  .photo-slot span{ font-size:.5rem; letter-spacing:.08em; line-height:1.7; }
  /* no clear white space for the handwritten note at this width */
  .hero__note,.hero__note-arrow{ display:none; }
  /* the whole collage carries its own stamp at this size */
  .hero__stamp{ display:none; }


  /* ---- CTA: full width, substantial ---------------------------------- */
  .btn--hero{
    grid-column:1 / -1; grid-row:4; margin-top:24px;
    width:100%; max-width:none;
    min-height:54px; padding:14px 16px; gap:10px;
    font-size:.875rem; font-weight:700; border-radius:8px;
  }
  .btn--hero > span{ white-space:nowrap; }
  .btn--hero .btn__icon{ width:18px; height:18px; }
  .btn--hero .btn__arrow{ width:17px; height:12px; margin-left:auto; }

  .hero__microcopy{
    grid-column:1 / -1; grid-row:5; margin:10px 0 0;
    font-size:.75rem; line-height:1.4;
  }

  /* ---- Trust grid ----------------------------------------------------- */
  .features{ margin-top:32px; }
  .feature{ padding:20px 14px; min-height:112px; gap:11px; }
  .feature__icon{ width:28px; height:28px; }
  .feature strong{ font-size:.8125rem; line-height:1.3; }
  .feature span{ font-size:.75rem; line-height:1.45; margin-top:5px; }
}
/* Small phones (320–374px): a touch tighter, never cramped */
@media (max-width:374px){
  .hero__grid{ grid-template-columns:60% 1fr; column-gap:6px; }
  .hero h1{ font-size:1.5rem; }
  .hero__sub{ font-size:.8125rem; }
  .hero__art{ min-height:270px; }
  .btn--hero{ min-height:52px; padding:13px 12px; font-size:.8125rem; gap:8px; }
  .feature{ padding:14px 10px; gap:9px; }
  .feature__icon{ width:21px; height:21px; }
  .feature strong{ font-size:.75rem; }
  .feature span{ font-size:.6875rem; }
}
@media (min-width:768px){
  .hero__grid{ grid-template-columns:52% 1fr; gap:40px; }
  .hero__copy{ padding-block:20px 32px; }
  .hero__note{ top:4%; left:-6%; }
  .hero__note-arrow{ top:16%; left:16%; }
}
@media (min-width:768px){
  .hero{ padding-top:34px; }
}

/* ---- Feature row ----------------------------------------------------- */
/* 1px gaps over a border-coloured grid give perfectly aligned rules —
   a clean cross on mobile, four even columns on desktop. */
/* Inner cross dividers only — no outer frame, as in the reference */
.features{
  list-style:none; margin:30px 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(--white);
}
.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:768px){
  .feature{ padding:16px 16px; gap:11px; }
  .feature__icon{ width:24px; height:24px; }
  .feature strong{ font-size:.8125rem; }
  .feature span{ font-size:.75rem; }
}
@media (min-width:900px){
  .features{ grid-template-columns:repeat(4,1fr); margin-top:38px; border-bottom:0; }
  .feature{ padding:16px 22px; }
  .feature:first-child{ padding-left:0; }
  .feature:last-child{ padding-right:0; }
}

/* ---- Google review card ---------------------------------------------- */
.review-card{
  margin-top:26px; padding:22px 20px;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg);
  display:grid; gap:18px;
}
.review-card blockquote{
  margin:10px 0 0; font-size:1rem; line-height:1.6; font-style:italic; color:var(--charcoal);
}
.review-card__by{ margin:12px 0 0; font-size:.8125rem; color:var(--taupe); font-weight:600; }
.review-card__by span{ margin:0 8px; color:var(--border); }
.review-card__source{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; border-radius:var(--radius); padding:6px 8px; margin:-6px -8px;
  transition:background-color .2s var(--ease);
}
.review-card__source:hover{ background:var(--paper-alt); }
.review-card__source:hover strong{ text-decoration:underline; }
.review-card__source strong{ display:block; font-size:.875rem; color:var(--charcoal); }
.review-card__source span{ display:block; font-size:.75rem; color:var(--taupe); margin-top:2px; }
@media (min-width:820px){
  .review-card{
    grid-template-columns:1fr auto; align-items:center; gap:40px; padding:26px 30px;
  }
  .review-card__source{ padding-left:34px; border-left:1px solid var(--border); }
}

/* ---- WhatsApp banner -------------------------------------------------- */
.wa-banner{
  display:flex; align-items:center; gap:18px;
  margin-top:22px; padding:20px 22px;
  background:var(--espresso); color:var(--white);
  border-radius:var(--radius-lg); text-decoration:none;
  transition:background-color .25s var(--ease);
}
.wa-banner:hover{ background:var(--espresso-dk); }
.wa-banner__icon{ flex:none; width:40px; height:44px; color:var(--stone); display:none; }
.wa-banner__rule{ display:none; width:1px; align-self:stretch; background:rgba(214,208,205,.32); }
.wa-banner__copy{ flex:1; min-width:0; }
.wa-banner__eyebrow{
  display:block; font-size:.625rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stone);
}
.wa-banner__title{
  display:block; margin-top:6px; font-size:1.0625rem; font-weight:800; letter-spacing:-.01em;
}
.wa-banner__sub{ display:block; margin-top:4px; font-size:.8125rem; color:var(--stone); }
.wa-banner__go{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--walnut); color:var(--white);
  display:grid; place-items:center;
  transition:transform .25s var(--ease);
}
.wa-banner:hover .wa-banner__go{ transform:translateX(4px); }
@media (min-width:768px){
  .wa-banner{ gap:26px; padding:26px 30px; }
  .wa-banner__icon,.wa-banner__rule{ display:block; }
  .wa-banner__title{ font-size:1.25rem; }
  .wa-banner__go{ width:56px; height:56px; }
}

/* ---- Skyline --------------------------------------------------------- */
.skyline{
  display:block; width:100%; height:58px; margin-top:34px;
  color:var(--stone); opacity:.42;
}
@media (min-width:768px){ .skyline{ height:90px; margin-top:48px; } }

/* ---- Assessment form band -------------------------------------------- */
.formband{ background:var(--paper); }
.formband__grid{ display:grid; gap:28px; }
.formband__copy .proof{ margin-top:22px; }
@media (min-width:960px){
  .formband__grid{ grid-template-columns:1fr minmax(0,480px); gap:56px; align-items:center; }
}
/* 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:var(--radius-lg);
  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 input,.field select,.field textarea{
  width:100%; min-height:46px; padding:11px 13px;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  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(--espresso); }
/* 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;
}

/* ============================ STATS =================================== */
.stats{ background:var(--paper); padding-bottom:var(--section-y); }
.stats__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--white); padding:20px 14px; text-align:center; }
.stat__figure{
  display:block; font-weight:900; font-size:clamp(1.05rem,3.6vw,1.55rem);
  letter-spacing:-.02em; color:var(--walnut); line-height:1.15;
}
.stat__label{
  display:block; margin-top:6px; font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--taupe);
}
.stats__note{ margin:14px auto 0; max-width:70ch; text-align:center; color:var(--taupe); }
@media (min-width:768px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } .stat{ padding:26px 18px; } }
@media (min-width:1024px){ .stats__wrap{ margin-top:-66px; position:relative; z-index:5; } }

/* ================= 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; }
@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 ================================ */
.cta-band{ background:var(--charcoal); color:var(--white); padding-block:var(--section-y); }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:var(--stone); }
.cta-band__inner{ display:grid; gap:26px; align-items:center; }
.cta-band__copy{ max-width:46ch; }
.cta-band__actions{ display:grid; gap:12px; }
@media (min-width:560px){ .cta-band__actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .cta-band__inner{ grid-template-columns:1.15fr .85fr; gap:48px; } }

.final-cta{ background:var(--stone); padding-block:var(--section-y); }
.final-cta__inner{ max-width:780px; }
.final-cta .btn--secondary{ border-color:var(--charcoal); }
.final-cta__actions{ display:grid; gap:12px; margin-top:26px; }
.final-cta__phone{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:18px;
  font-weight:700; color:var(--charcoal); text-decoration:none;
  border-bottom:1px solid var(--charcoal);
}
@media (min-width:620px){ .final-cta__actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ========================== 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 ============================ */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns: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);
}
/* Single action: straight to the assessment form */
.sticky-bar__form{ background:var(--walnut); color:var(--white); }
.sticky-bar__form:hover{ background:var(--walnut-hover); }
.sticky-bar__form:active{ background:var(--walnut-hover); }
.sticky-bar__form svg{ flex:none; }
@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; }
}