/*
Theme Name: Your Claim Hero
Theme URI: https://yourclaimhero.co.uk
Description: Landing page theme for mis-sold car finance claims.
Version: 1.0.0
Author: Your Claim Hero
Text Domain: your-claim-hero
*/

:root{
    /* ---- Lighter teal + hero-gold palette ---- */
    --text:#163238;          /* dark teal-slate — body text */
    --muted:#5C757B;         /* secondary text on light */
    --brand:#0E7C7B;         /* teal — primary brand */
    --brand-d:#0A5E5D;       /* deep teal — eyebrows / strong accents */
    --brand-soft:#E4F3F1;    /* pale teal surface */
    --gold:#FFB020;          /* hero gold — CTAs, calculator value */
    --gold-deep:#E2920A;     /* gold pressed */
    --gold-soft:#FFF3DA;     /* pale gold */
    --paper:#F5FBFA;         /* warm-light page background */
    --white:#ffffff;
    --line:#D9E8E5;          /* light hairline */
    --green:#1F9D6B;

    /* dark teal bands (calculator card, FCA card, final CTA, footer) */
    --deep:#0C2A2B;
    --deep-2:#11393A;
    --deep-3:#21504F;        /* hairline on dark */
    --muted-d:#A9C7C4;       /* secondary text on dark */

    --shadow-sm:0 1px 2px rgba(16,50,54,.06), 0 4px 14px rgba(16,50,54,.06);
    --shadow:0 14px 40px rgba(16,50,54,.12);
    --shadow-gold:0 10px 24px rgba(255,176,32,.35);

    --r:14px;
    --r-lg:22px;
    --maxw:1140px;
    --pad:clamp(20px,5vw,28px);

    --f-display:"Bricolage Grotesque", system-ui, sans-serif;
    --f-body:"Inter", system-ui, -apple-system, sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;font-family:var(--f-body);color:var(--text);background:var(--paper);
    line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;margin:0;letter-spacing:-.02em;font-weight:700}
  p{margin:0}
  a{color:inherit}
  img,svg{display:block;max-width:100%}
  ul{margin:0}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
  .section{padding-block:clamp(54px,8vw,96px)}

  .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--deep);padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;z-index:200}
  .skip:focus{left:0}

  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--brand);outline-offset:2px;border-radius:6px;
  }

  .eyebrow{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--brand-d)}
  .eyebrow.on-dark{color:var(--gold)}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    font-family:var(--f-body);font-weight:700;font-size:1.02rem;padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
    text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;line-height:1;
  }
  .btn-gold{background:var(--gold);color:var(--deep);box-shadow:var(--shadow-gold)}
  .btn-gold:hover{background:var(--gold-deep);transform:translateY(-2px)}
  .btn-gold:active{transform:translateY(0)}
  .btn-teal{background:var(--brand);color:#fff}
  .btn-teal:hover{background:var(--brand-d);transform:translateY(-2px)}
  .btn-lg{font-size:1.1rem;padding:18px 32px}
  .btn .arrow{transition:transform .15s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  /* ---------- Header ---------- */
  header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:18px;height:68px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-family:var(--f-display);font-weight:800;font-size:1.18rem;letter-spacing:-.02em}
  .brand .mark{flex:0 0 auto;width:34px;height:38px}
  .brand b{color:var(--gold-deep)}
  .nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
  .nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;transition:color .15s}
  .nav-links a:hover{color:var(--text)}
  .nav-links .btn{display:none}
  .nav .btn{padding:11px 20px;font-size:.95rem}
  .nav-cta-wrap{display:flex;align-items:center;gap:10px;margin-left:8px}
  .menu-btn{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--line);border-radius:10px;width:44px;height:44px;color:var(--text);cursor:pointer;align-items:center;justify-content:center}
  .menu-btn svg{width:22px;height:22px}

  @media (max-width:860px){
    .nav-links{
      position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
      background:var(--white);border-bottom:1px solid var(--line);padding:8px var(--pad) 20px;
      transform:translateY(-120%);transition:transform .25s ease;margin-left:0;box-shadow:var(--shadow);
    }
    .nav-links.open{transform:translateY(0)}
    .nav-links a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.05rem}
    .nav-links .btn{display:inline-flex;margin-top:14px;justify-content:center;color:var(--deep)}
    .nav-cta-wrap .btn.desktop-cta{display:none}
    .menu-btn{display:inline-flex}
  }

  /* ---------- Hero (money-led) ---------- */
  .hero{
    background:
      radial-gradient(130% 80% at 50% -25%, rgba(255,176,32,.30), transparent 55%),
      radial-gradient(80% 60% at 88% 8%, rgba(14,124,123,.12), transparent 55%),
      radial-gradient(80% 60% at 10% 4%, rgba(14,124,123,.10), transparent 55%),
      linear-gradient(180deg,#ffffff, var(--paper));
    position:relative;overflow:hidden;border-bottom:1px solid var(--line);text-align:center}
  .hero .wrap{position:relative;z-index:2;padding-block:clamp(30px,5.5vw,60px)}
  .hero-inner{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
  .hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
    padding:7px 16px 7px 7px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--brand-d);max-width:100%;flex-wrap:wrap;
    box-shadow:var(--shadow-sm)}
  .hero-badge .pill{background:var(--gold);color:var(--deep);font-weight:800;border-radius:999px;padding:4px 10px;font-size:.78rem;white-space:nowrap}

  .hero-kicker{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.08;
    font-size:clamp(1.45rem,4.6vw,2.45rem);color:var(--text);margin:22px 0 0;max-width:20ch}
  .hero-kicker .hl{color:var(--brand)}

  .bignum{margin-top:6px}
  .bn-fig{display:inline-flex;align-items:flex-start;justify-content:center;gap:.02em;line-height:.82;
    font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;
    font-size:clamp(5.2rem,23vw,13rem);
    background:linear-gradient(176deg,#FFCB57 8%, #F7A40C 60%, #E08A00 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 14px 30px rgba(241,164,12,.4))}
  .bn-cur{font-size:.46em;margin-top:.12em;font-weight:800}
  .bn-post{display:block;color:var(--text);font-size:clamp(1rem,2.5vw,1.2rem);margin:14px auto 0;max-width:34ch;line-height:1.5}
  .bn-post strong{color:var(--brand-d);font-weight:700}

  .hero-cta{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
  .btn-xl{font-size:1.18rem;padding:20px 42px}
  .cta-micro{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem;font-weight:500}
  .cta-micro svg{width:15px;height:15px;color:var(--green)}

  .hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:26px;
    padding-top:22px;border-top:1px solid var(--line);width:100%;max-width:620px}
  .hero-trust span{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-size:.9rem;font-weight:600}
  .hero-trust .ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center}
  .hero-trust .ic svg{width:13px;height:13px;color:var(--brand)}

  .freeroute{background:var(--brand-soft);border-top:1px solid #cfe7e3}
  .freeroute .wrap{padding-block:14px}
  .freeroute p{color:var(--brand-d);font-size:.82rem;line-height:1.55;max-width:96ch}
  .freeroute a{color:var(--brand-d);text-decoration:underline;font-weight:600}

  /* ---------- Trust strip ---------- */
  .trust{background:var(--white);border-bottom:1px solid var(--line)}
  .trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:30px}
  .trust .item{text-align:center}
  .trust .n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--brand);line-height:1}
  .trust .l{color:var(--muted);font-size:.84rem;margin-top:6px}
  @media (max-width:680px){.trust .row{grid-template-columns:repeat(2,1fr);gap:24px 12px}}

  /* ---------- Section heads ---------- */
  .head{max-width:62ch;margin-bottom:clamp(28px,4vw,46px)}
  .head.center{margin-inline:auto;text-align:center}
  .head h2{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;margin-top:12px}
  .head p{color:var(--muted);margin-top:14px;font-size:clamp(1rem,2.2vw,1.1rem)}

  /* ---------- Calculator ---------- */
  .calc-section{background:var(--paper)}
  .calc{max-width:680px;margin-inline:auto;background:linear-gradient(180deg,var(--deep-2),var(--deep));
    border:1px solid var(--deep-3);border-radius:var(--r-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
  .calc-result{text-align:center;padding-bottom:24px;border-bottom:1px solid var(--deep-3)}
  .calc-result .lab{text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--gold);font-weight:700}
  .calc-result .val{font-family:var(--f-display);font-weight:800;font-size:clamp(2.8rem,9vw,4rem);color:var(--gold);line-height:1;margin:8px 0 6px}
  .calc-result .note{color:var(--muted-d);font-size:.84rem;margin-bottom:18px}
  .calc-result .btn{width:100%;max-width:320px}
  .calc-input{padding-top:24px}
  .qrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
  .calc .q{font-weight:600;color:#dcebe9;color:#e7f1f0;font-size:.98rem;max-width:30ch}
  .calc .count{font-family:var(--f-display);font-weight:800;font-size:2.2rem;color:#fff;line-height:1;white-space:nowrap}
  .calc .count small{font-size:.9rem;color:var(--muted-d);font-weight:600;font-family:var(--f-body);margin-left:6px}
  .slider-row{margin-top:18px}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
    background:linear-gradient(90deg,var(--gold) 0%, var(--gold) var(--fill,11%), #2c4c4c var(--fill,11%));outline-offset:6px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--gold);border:4px solid var(--gold-soft);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
  input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--gold);border:4px solid var(--gold-soft);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
  .ticks{display:flex;justify-content:space-between;color:var(--muted-d);font-size:.78rem;margin-top:12px;font-weight:600;gap:2px}
  .ticks span{cursor:pointer;padding:3px 0;border-radius:6px;flex:1;text-align:center;transition:color .12s}
  .ticks span:hover{color:#fff}
  .ticks span.active{color:var(--deep);background:var(--gold)}
  .calc-disc{color:var(--muted-d);font-size:.78rem;margin-top:20px;line-height:1.55}

  /* ---------- Steps ---------- */
  .how-claim .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .how-claim .step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative;box-shadow:var(--shadow-sm)}
  .how-claim .step .num{width:52px;height:58px;margin-bottom:18px;position:relative}
  .how-claim .step .num .txt{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;color:var(--gold-deep);font-size:1.25rem;padding-bottom:4px}
  .how-claim .step h3{font-size:1.22rem;margin-bottom:8px}
  .how-claim .step p{color:var(--muted);font-size:.96rem}
  @media (max-width:760px){.how-claim .steps{grid-template-columns:1fr}}

  /* ---------- Mis-selling types ---------- */
  .types{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .type{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
  .type .ic{width:46px;height:46px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;margin-bottom:16px}
  .type .ic svg{width:24px;height:24px;color:var(--brand)}
  .type .ic.ic-pound span{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--brand);line-height:1}
  .type h3{font-size:1.12rem;margin-bottom:8px}
  .type p{color:var(--muted);font-size:.94rem}
  @media (max-width:760px){.types{grid-template-columns:1fr}}

  /* ---------- Why us ---------- */
  .why{background:var(--white);border-block:1px solid var(--line)}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .feature{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper)}
  .feature .ic{width:44px;height:44px;border-radius:12px;background:var(--brand);display:grid;place-items:center;margin-bottom:14px}
  .feature .ic svg{width:22px;height:22px;color:var(--gold)}
  .feature h3{font-size:1.08rem;margin-bottom:6px}
  .feature p{color:var(--muted);font-size:.92rem}
  @media (max-width:860px){.grid3{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.grid3{grid-template-columns:1fr}}

  /* ---------- FCA explainer (dark teal) ---------- */
  .fca-card{background:linear-gradient(180deg,var(--deep-2),var(--deep));color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,46px);border:1px solid var(--deep-3)}
  .fca-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:start}
  .fca-grid h2{color:#fff;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800}
  .fca-grid .eyebrow{color:var(--gold)}
  .fca-grid p{color:#d8e7e5;margin-top:14px}
  .fca-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
  .fca-list li{display:flex;gap:12px;align-items:flex-start;color:#e7f1f0;font-size:.96rem}
  .fca-list .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(255,176,32,.18);display:grid;place-items:center;margin-top:1px}
  .fca-list .tick svg{width:12px;height:12px;color:var(--gold)}
  .fca-stat{background:rgba(255,255,255,.05);border:1px solid var(--deep-3);border-radius:var(--r);padding:24px;text-align:center}
  .fca-stat + .fca-stat{margin-top:14px}
  .fca-stat .n{font-family:var(--f-display);font-weight:800;font-size:2.6rem;color:var(--gold);line-height:1}
  .fca-stat .l{color:var(--muted-d);font-size:.9rem;margin-top:8px}
  @media (max-width:760px){.fca-grid{grid-template-columns:1fr}}

  /* ---------- Timeline ---------- */
  .timeline{position:relative;margin-top:10px;padding-left:4px}
  .tl-item{display:grid;grid-template-columns:128px 1fr;gap:20px;padding-bottom:26px;position:relative}
  .tl-item::before{content:"";position:absolute;left:140px;top:8px;bottom:-6px;width:2px;background:var(--line)}
  .tl-item:last-child::before{display:none}
  .tl-date{font-family:var(--f-display);font-weight:700;color:var(--brand-d);font-size:.92rem;text-align:right;padding-right:26px;position:relative}
  .tl-date::after{content:"";position:absolute;right:-5px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:3px solid var(--white);z-index:2}
  .tl-body h3{font-size:1.05rem;margin-bottom:4px}
  .tl-body p{color:var(--muted);font-size:.92rem}
  @media (max-width:620px){
    .tl-item{grid-template-columns:1fr;gap:4px}
    .tl-item::before{left:7px;top:22px}
    .tl-date{text-align:left;padding-right:0;padding-left:26px}
    .tl-date::after{right:auto;left:1px;top:5px}
    .tl-body{padding-left:26px}
  }

  /* ---------- Lenders ---------- */
  .lenders{background:var(--white);border-block:1px solid var(--line)}
  .lender-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
  .lender-search input{flex:1;min-width:220px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:var(--f-body);background:var(--paper)}
  .lender-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
  .lender{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font-size:.94rem;font-weight:500}
  .lender .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
  .lender-empty{color:var(--muted);padding:20px 0}
  .lender-more{color:var(--muted);font-size:.9rem;margin-top:16px}
  .lender-more a{color:var(--brand-d);font-weight:600}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px;margin-inline:auto}
  .q-item{border-bottom:1px solid var(--line)}
  .q-btn{width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:22px 4px;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--text)}
  .q-btn .chev{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;transition:transform .25s}
  .q-btn .chev svg{width:14px;height:14px;color:var(--brand)}
  .q-btn[aria-expanded="true"] .chev{transform:rotate(180deg);background:var(--gold)}
  .q-btn[aria-expanded="true"] .chev svg{color:var(--deep)}
  .q-ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .q-ans .inner{padding:0 4px 22px;color:var(--muted);font-size:.98rem}
  .q-ans .inner ul{padding-left:18px;margin-top:8px;display:grid;gap:6px}

  /* ---------- Final CTA (dark teal) ---------- */
  .final{background:
      radial-gradient(100% 120% at 50% -20%, rgba(255,176,32,.2), transparent 60%),
      linear-gradient(180deg,var(--deep-2),var(--deep));color:#fff;text-align:center}
  .final h2{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;color:#fff;max-width:18ch;margin-inline:auto}
  .final p{color:var(--muted-d);margin-top:16px;max-width:48ch;margin-inline:auto}
  .final .btn{margin-top:28px}
  .final .secure{justify-content:center;margin-top:18px;color:var(--muted-d)}
  .secure{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
  .secure svg{width:16px;height:16px;color:var(--green);flex:0 0 auto}

  /* ---------- Footer ---------- */
  footer.site{background:#081e1f;color:var(--muted-d);font-size:.88rem;border-top:1px solid var(--deep-3)}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-block:clamp(40px,6vw,64px) 30px}
  .foot-brand .brand{margin-bottom:14px;color:#fff}
  .foot-brand p{max-width:42ch;line-height:1.6}
  footer h4{color:#fff;font-family:var(--f-body);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
  .foot-links{list-style:none;padding:0;display:grid;gap:10px}
  .foot-links a{color:var(--muted-d);text-decoration:none}
  .foot-links a:hover{color:#fff;text-decoration:underline}
  .compliance{border-top:1px solid var(--deep-3);padding-block:26px;display:grid;gap:14px}
  .compliance p{font-size:.78rem;line-height:1.6;color:#7f9b98}
  .compliance .placeholder{color:var(--gold)}
  .foot-bottom{border-top:1px solid var(--deep-3);padding-block:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem}
  @media (max-width:760px){.foot-top{grid-template-columns:1fr;gap:28px}}

  /* ============ ANIMATIONS ============ */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
  }

  /* scroll reveal — hidden state only when .anim is set (no-JS users see everything) */
  .anim .hero-inner>*,
  .anim .head,
  .anim .steps .step,
  .anim .types .type,
  .anim .grid3 .feature,
  .anim .timeline .tl-item,
  .anim .faq .q-item,
  .anim .calc,
  .anim .fca-card,
  .anim .trust .item,
  .anim .final .wrap>*{
    opacity:0;transform:translateY(22px);
    transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .anim .hero-inner>*.in,
  .anim .head.in,
  .anim .steps .step.in,
  .anim .types .type.in,
  .anim .grid3 .feature.in,
  .anim .timeline .tl-item.in,
  .anim .faq .q-item.in,
  .anim .calc.in,
  .anim .fca-card.in,
  .anim .trust .item.in,
  .anim .final .wrap>*.in{opacity:1;transform:none}

  /* card hover lifts */
  .how-claim .step,.type,.feature,.lender{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
  .how-claim .step:hover,.type:hover,.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .lender:hover{transform:translateY(-2px);border-color:#bfe0db}
  .type:hover .ic,.feature:hover .ic{transform:scale(1.06);transition:transform .22s ease}

  /* button sheen sweep on hover */
  .btn-gold{position:relative;overflow:hidden;isolation:isolate}
  .btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;left:-120%;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
    transform:skewX(-18deg);transition:left .6s ease}
  .btn-gold:hover::after{left:120%}

  /* hero CTA gentle breathing glow */
  .anim .btn-xl{animation:ctaGlow 3.4s ease-in-out infinite}
  @keyframes ctaGlow{0%,100%{box-shadow:0 10px 24px rgba(255,176,32,.35)}50%{box-shadow:0 14px 38px rgba(255,176,32,.62)}}

  /* giant £ figure: base gold + sweeping shine, both clipped to text */
  .bn-fig{
    background:
      linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%),
      linear-gradient(176deg,#FFCB57 8%, #F7A40C 60%, #E08A00 100%);
    background-size:300% 100%, 100% 100%;
    background-position:-60% 0, 0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .anim .bn-fig.gleam{animation:numShine 1.15s ease-out}
  @keyframes numShine{from{background-position:-60% 0, 0 0}to{background-position:170% 0, 0 0}}

  /* "Hero" wordmark shimmer (name nod) */
  .brand b{
    background:
      linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%),
      linear-gradient(180deg,#FFB020,#E2920A);
    background-size:280% 100%, 100% 100%;
    background-position:-50% 0, 0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .anim .brand b.shimmer{animation:wordShine 1.25s ease-out}
  @keyframes wordShine{from{background-position:-50% 0, 0 0}to{background-position:160% 0, 0 0}}

  /* shield emblem: hover pop + check draw-on */
  .brand .mark{transition:transform .25s ease}
  .brand:hover .mark{transform:scale(1.08) rotate(3deg)}
  .anim .mark .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawCheck .85s .25s ease forwards}
  @keyframes drawCheck{to{stroke-dashoffset:0}}

  /* floating shield in final CTA */
  .final{position:relative;overflow:hidden}
  .final .wrap{position:relative;z-index:2}
  .final .float-shield{position:absolute;right:-26px;bottom:-34px;width:220px;height:auto;opacity:.07;color:#fff;pointer-events:none;z-index:1}
  .anim .final .float-shield{animation:floatY 6.5s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(-1deg)}}

  /* sticky mobile CTA */
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:none;box-shadow:0 -6px 20px rgba(16,50,54,.08)}
  .sticky-cta .btn{width:100%}
  @media (max-width:860px){.sticky-cta{display:block}body.home{padding-bottom:78px}}

  /* ---------- Simple pages ---------- */
  .page-simple{background:var(--paper);border-block:1px solid var(--line);min-height:50vh}
  .page-head h1{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;margin-top:12px;color:var(--text)}
  .page-content{color:var(--muted);font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.7;max-width:72ch;margin-inline:auto}
  .page-content > * + *{margin-top:1.1em}
  .page-content h2,.page-content h3{color:var(--text);margin-top:1.6em;margin-bottom:.5em}
  .page-content a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .page-content ul,.page-content ol{padding-left:1.4em}
  .page-content li + li{margin-top:.45em}

  /* claim page layout + scoped tokens */
  body.page-template-car-finance-claim{
    --ink:#0c2435;--ink-2:#22414f;--body:#475862;--muted:#8295a0;
    --line:#dde5ea;--line-2:#eef3f6;--bg:#eef2f5;--card:#fff;
    --accent:#FFB020;--accent-press:#FFB020;--accent-soft:#f8f0de;
    --gold:#FFB020;--danger:#d4503e;--ring:rgba(202,161,74,.30);
    --shadow:0 18px 50px -22px rgba(12,36,53,.35);--radius:16px;
    background:radial-gradient(1200px 480px at 50% -10%,#faf6ee 0%,var(--bg) 55%),var(--bg);
  }
  body.page-template-car-finance-claim .sticky-cta{display:none}
  body.page-template-car-finance-claim main.claim-page{
    display:flex;align-items:flex-start;justify-content:center;
    padding:32px 18px 72px;min-height:50vh;
  }

  .claim-wrap{width:100%;max-width:580px}

  .claim-head{text-align:center;margin-bottom:18px}
  .claim-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:700;font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent-press);
    background:var(--accent-soft);padding:7px 14px;border-radius:999px}
  .claim-eyebrow svg{width:14px;height:14px}
  .claim-head h1{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);font-weight:800;
    font-size:clamp(25px,6vw,33px);line-height:1.1;margin:14px 0 6px;letter-spacing:-.02em}
  .claim-head p{margin:0;color:var(--body);font-size:15px}
  .claim-head .accent-num{color:var(--accent-press);font-weight:600}

  .claim-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}

  .progress{padding:20px 25px 0px}
  .progress-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
  .progress-step{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
  .progress-pct{font-size:12px;color:var(--muted);font-weight:600}
  .progress-track{height:7px;background:var(--line-2);border-radius:999px;overflow:hidden}
  .progress-fill{height:100%;width:20%;background:linear-gradient(90deg,var(--accent),#ddb96a);border-radius:999px;transition:width .45s cubic-bezier(.65,0,.35,1)}

  .claim-page .step{display:none;padding:22px 24px 4px;animation:rise .4s ease both}
  .claim-page .step.active{display:block}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.step,.progress-fill{animation:none;transition:none}}

  .step-title{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);font-weight:700;font-size:20px;margin:0 0 3px;letter-spacing:-.01em}
  .step-sub{margin:0 0 18px;font-size:14px;color:var(--muted)}

  .field{margin-bottom:15px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:440px){.grid-2{grid-template-columns:1fr}}
  .dob-picker{display:grid;grid-template-columns:minmax(72px,1fr) minmax(120px,1.5fr) minmax(88px,1fr);gap:10px}
  @media (max-width:440px){.dob-picker{grid-template-columns:1fr 1fr}.dob-picker #dobYear{grid-column:1 / -1}}
  .dob-picker .control.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(212,80,62,.12)}
  label.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;font-family:"Plus Jakarta Sans",sans-serif}
  .req{color:var(--danger)}

  .control{width:100%;padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink);
    background:#fbfdfe;border:1.5px solid var(--line);border-radius:11px;
    transition:border-color .15s,box-shadow .15s,background .15s}
  .control::placeholder{color:#aab8c1}
  .control:hover{border-color:#c6d2d9}
  .control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring);background:#fff}
  select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238295a0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:40px}
  .control.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(212,80,62,.12)}
  .err{display:none;color:var(--danger);font-size:12px;margin-top:5px;font-weight:500}
  .err.show{display:block}

  /* ---- address finder ---- */
  .addr-block{border:1.5px solid var(--line);border-radius:13px;padding:15px;margin-bottom:13px;background:#fcfdfe}
  .addr-block.is-current{border-color:#e8d4a8;background:#faf6ee}
  .addr-tag{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--accent-press);margin-bottom:10px;display:flex;align-items:center;gap:7px}
  .addr-tag.prev{color:var(--muted)}
  .find-row{display:flex;gap:9px}
  .find-row .control{flex:1;text-transform:uppercase}
  .find-btn{flex:0 0 auto;background:var(--ink);color:#fff;border:none;border-radius:11px;padding:0 18px;
    font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s}
  .find-btn:hover{background:#16364a}
  .find-btn:disabled{opacity:.55;cursor:wait}
  .chosen{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
  .chosen-text{font-size:14.5px;color:var(--ink);font-weight:500}
  .chosen-change{background:none;border:none;color:var(--accent-press);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
  .years-q{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}
  .years-q p{margin:0 0 9px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
  .seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
  .seg button{border:none;background:#fff;padding:9px 22px;font-size:14px;font-weight:600;font-family:inherit;color:var(--ink-2);cursor:pointer;transition:all .14s}
  .seg button + button{border-left:1.5px solid var(--line)}
  .seg button.sel-yes{background:var(--accent);color:#fff}
  .seg button.sel-no{background:var(--danger);color:#fff}
  .seg button:disabled{opacity:.45;cursor:not-allowed}
  .addr-hint{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
  .addr-loading{font-size:13px;color:var(--muted);padding:4px 0}

  .dup-notice{margin-top:18px;padding:16px 18px;border:1.5px solid #e8d4a8;border-radius:13px;background:#faf6ee}
  .dup-notice h3{margin:0 0 8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:17px;color:var(--ink)}
  .dup-notice p{margin:0;font-size:14px;color:var(--body);line-height:1.55}
  .dup-notice p + p{margin-top:8px}
  .dup-notice a{color:var(--accent-press);font-weight:700;text-decoration:none}
  .dup-notice a:hover{text-decoration:underline}
  .dup-ref{margin-top:12px!important;font-size:14px;color:var(--ink-2)}
  .dup-ref strong{color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif}

  /* ---- consent ---- */
  .consent{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;margin-bottom:11px;background:#fbfdfe;cursor:pointer}
  .consent input{margin-top:2px;width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
  .consent span{font-size:13px;color:var(--body)}
  .consent a{color:var(--accent-press);font-weight:600}

  /* ---- preview summary ---- */
  .summary{border:1.5px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:18px}
  .sum-row{display:flex;justify-content:space-between;gap:14px;padding:12px 15px;font-size:14px;border-bottom:1px solid var(--line-2)}
  .sum-row:last-child{border-bottom:none}
  .sum-k{color:var(--muted);font-weight:500;flex:0 0 38%}
  .sum-v{color:var(--ink);font-weight:600;text-align:right}
  .sum-v small{display:block;font-weight:500;color:var(--body)}

  /* ---- signature ---- */
  .sig-wrap{border:1.5px dashed var(--line);border-radius:11px;background:#fbfdfe;position:relative;overflow:hidden;touch-action:none}
  .sig-wrap canvas{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair;position:relative;z-index:1}
  .sig-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b3c0c8;font-size:14px;pointer-events:none;z-index:0}
  .sig-clear{position:absolute;top:8px;right:10px;z-index:2;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:600;color:var(--body);padding:5px 10px;cursor:pointer}

  /* ---- search / results (step 5) ---- */
  .searching{text-align:center;padding:26px 10px 30px}
  .spinner{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;border:4px solid var(--accent-soft);border-top-color:var(--accent);animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
  .searching h3{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);margin:0 0 6px;font-size:18px}
  .searching p{margin:0;font-size:13.5px;color:var(--muted)}
  .search-steps{list-style:none;padding:0;margin:18px auto 0;max-width:280px;text-align:left}
  .search-steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);padding:5px 0}
  .search-steps li.done{color:var(--ink-2)}
  .search-steps li .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .search-steps li.done .dot{background:var(--accent);border-color:var(--accent)}
  .search-steps li.done .dot svg{width:11px;height:11px;stroke:#fff}

  .results-head{display:flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--accent-press);
    border-radius:11px;padding:11px 14px;font-size:13.5px;font-weight:600;margin-bottom:14px}
  .results-head svg{width:18px;height:18px;flex:0 0 auto}
  .soft-note{font-size:12px;color:var(--muted);margin:-6px 0 16px}

  .agreement{border:1.5px solid var(--line);border-radius:13px;padding:14px;margin-bottom:11px;position:relative}
  .agreement.manual{border-style:dashed}
  .ag-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
  .ag-lender{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--ink);font-size:15.5px}
  .ag-badge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-press)}
  .ag-badge.manual{background:#f0f3f5;color:var(--muted)}
  .ag-meta{font-size:13px;color:var(--body)}
  .ag-meta span{color:var(--muted)}
  .ag-remove{position:absolute;top:11px;right:12px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}

  .add-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px dashed var(--line);
    border-radius:12px;padding:13px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .15s}
  .add-toggle:hover{border-color:var(--accent);color:var(--accent-press);background:var(--accent-soft)}
  .add-toggle svg{width:17px;height:17px}
  .manual-form{border:1.5px solid var(--line);border-radius:13px;padding:15px;margin-top:11px;background:#fcfdfe;display:none}
  .manual-form.show{display:block}

  /* ---- buttons ---- */
  .actions{display:flex;align-items:center;gap:12px;padding:6px 24px 24px;margin-top:8px}
  .actions .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;
    padding:13px 22px;border-radius:999px;border:none;cursor:pointer;
    transition:background .15s,opacity .15s,transform .08s;flex:0 0 auto;
  }
  .actions .btn:active{transform:translateY(1px)}
  .actions .btn svg{width:14px;height:14px;flex:0 0 auto}
  .actions .btn-ghost{min-width:110px;background:#e8ecef;color:var(--ink)}
  .actions .btn-ghost:hover{background:#dde3e7}
  .continue-btn{margin-left:auto;background:var(--accent);color:#fff;min-width:140px}
  .continue-btn:hover{background:var(--accent-press)}
  .continue-btn:disabled{opacity:.55;cursor:wait}

  .secure{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;margin-top:16px;text-align:center}
  .secure svg{width:14px;height:14px;flex:0 0 auto}

  .done{display:none;text-align:center;padding:42px 28px 46px}
  .done.show{display:block;animation:rise .45s ease both}
  .done-mark{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .done-mark svg{width:34px;height:34px;stroke:var(--accent-press)}
  .done h2{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);font-size:24px;margin:0 0 8px}
  .done p{margin:0 auto;max-width:380px;color:var(--body);font-size:15px}