/* BFF Financial Services — concept 3, "Three Doors".
   A router direction. BFF holds three registered business names, so the page is
   organised as three doors and the visitor picks one. Cool light ground, deep
   teal, one warm counterpoint reserved for the car door only.

   Its own design system. Nothing shared with concepts 1 or 2.

   Colour notes. Teal #0D9488 is decorative. --teal-txt is the darkened variant
   for text and filled buttons, where white needs to clear 4.5:1. The layout is
   deliberately asymmetric so three products do not land as three equal cards in
   a row, which is on the reject list. */

:root{
  --bg:#F0F6F6;
  --surface:#FAFDFD;
  --ink:#0C2A2E;
  --ink-2:#123C41;
  --mute:#4A6468;
  --teal:#0D9488;
  --teal-txt:#0F766E;
  --teal-lt:#5EEAD4;
  --warm:#B45309;
  --warm-soft:#FDF3E7;
  --line:#D3E3E3;
  --line-2:#1D4B50;
  --shell:min(100% - 40px, 1180px);
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal-txt)}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.06;font-weight:800;letter-spacing:-.02em}
p{margin:0}
section[id]{scroll-margin-top:92px}
.wrap{width:var(--shell);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* motion */
.reveal{opacity:0;transform:translateY(16px);filter:blur(6px);
  transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1),filter .68s}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
html.noanim .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--teal);z-index:80;transition:width .12s linear;display:block}

/* header */
.hd{position:sticky;top:0;z-index:60;background:rgba(240,246,246,.9);
  backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 2px;
  border-radius:4px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;
  background:var(--teal);border-radius:2px;transition:right .3s}
.nav a:hover::after{right:0}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--surface);
  border-radius:8px;margin-left:auto;position:relative;cursor:pointer;padding:0}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .3s,opacity .2s}
.burger::before{top:16px}.burger span{top:22px}.burger::after{top:28px}
.burger[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:74px;background:var(--bg);border-bottom:1px solid var(--line);
  display:none;flex-direction:column;padding:8px 20px 22px;z-index:59;max-height:calc(100dvh - 74px);overflow-y:auto}
.mnav.open{display:flex}
.mnav a{padding:15px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:17px}
.mnav .btn{margin-top:16px;justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);
  font-size:15px;font-weight:600;padding:14px 24px;border-radius:8px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;min-height:50px;transition:background .22s,color .22s,border-color .22s}
.btn-pri{background:var(--teal-txt);color:#fff;border-color:var(--teal-txt)}
.btn-pri:hover{background:#0B5F58;border-color:#0B5F58}
.btn-sec{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-sec:hover{border-color:var(--teal);color:var(--teal-txt)}
.btn-sm{padding:10px 18px;min-height:44px;font-size:14px}

/* hero */
.hero{position:relative;padding:70px 0 78px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(760px 400px at 82% 8%,rgba(13,148,136,.13),transparent 62%)}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;position:relative;z-index:2}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-txt);
  font-weight:700;margin-bottom:18px}
.hero h1{font-size:clamp(42px,6.2vw,78px);letter-spacing:-.028em}
.hero h1 em{font-style:normal;color:var(--teal-txt)}
.lede{font-size:18.5px;color:var(--mute);max-width:37em;line-height:1.65}
.hero .lede{margin-top:22px}
.facts{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 0;padding:0;list-style:none}
.facts li{font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);padding:9px 14px;border-radius:999px}
.hero-fig{min-height:400px;position:relative}
.hero-fig svg{width:100%;height:auto;display:block}
[data-cascade] .wd{display:inline-block;opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
html.noanim [data-cascade] .wd{opacity:1;transform:none;animation:none}

/* sections */
.sec{padding:84px 0;border-bottom:1px solid var(--line)}
.sec-ink{background:var(--ink);color:#CFE3E3;border-bottom-color:var(--line-2)}
.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#F0F6F6}
.sec-ink p,.sec-ink .lede{color:#A9C6C6}
.sec-ink .eyebrow,.sec-ink .snum{color:var(--teal-lt)}
.shead{max-width:880px;margin-bottom:46px}
.shead h2{font-size:clamp(30px,4.1vw,52px)}
.snum{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-txt);
  font-weight:700;margin-bottom:14px}
.shead .lede{margin-top:16px}

/* the three doors, asymmetric on purpose */
.doors{display:grid;grid-template-columns:1.22fr 1fr;grid-template-rows:auto auto;gap:20px}
.door{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:30px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s}
.door:hover{border-color:var(--teal);transform:translateY(-2px)}
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal)}
.door-lg{grid-row:1 / span 2}
.door-warm::before{background:var(--warm)}
.door-warm{background:var(--warm-soft)}
.door .dk{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--teal-txt);margin-bottom:14px}
.door-warm .dk{color:var(--warm)}
.door h3{font-size:29px;margin-bottom:10px}
.door-lg h3{font-size:36px}
.door p{color:var(--mute);font-size:16px}
.door .dgo{margin-top:auto;padding-top:22px;font-weight:600;font-size:15px;color:var(--teal-txt);
  display:flex;align-items:center;gap:8px}
.door-warm .dgo{color:var(--warm)}
.door .dgo span{transition:transform .25s;display:inline-block}
.door:hover .dgo span{transform:translateX(4px)}
.door-art{margin-top:22px}
.door-art svg{width:100%;height:auto;max-height:150px;display:block}

/* pathway */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p}
.pstep{counter-increment:p;padding:28px 24px 28px 0;margin-right:24px;border-top:2px solid var(--teal-lt);
  position:relative}
.pstep::before{content:counter(p);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--teal-lt);color:#06302C;
  font-family:var(--disp);font-weight:800;font-size:16px;margin-bottom:14px}
.pstep h3{font-size:20px;margin-bottom:7px}
.pstep p{font-size:15.5px}

/* record + draft */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:30px}
.panel h3{font-size:23px;margin-bottom:16px}
.cv{list-style:none;padding:0;margin:0}
.cv li{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px}
.cv li:first-child{border-top:0}
.cv b{font-weight:700;color:var(--teal-txt);letter-spacing:.05em;font-size:11.5px;text-transform:uppercase;padding-top:4px}
.cv span{color:var(--mute)}
.draft{border:1.5px solid var(--warm);background:var(--warm-soft);padding:30px;border-radius:14px}
.draft h3{font-size:25px;margin-bottom:12px}
.draft>p{color:#6B4310;margin-bottom:18px;font-size:16.5px}
.draft ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.draft li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:#4A2E08;align-items:start}
.draft li i{width:9px;height:9px;background:var(--warm);border-radius:50%;margin-top:8px;display:block;font-style:normal}
.tagd{display:inline-block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--warm);padding:5px 11px;border-radius:999px;margin-bottom:15px}

/* faq */
.faq{max-width:860px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:transparent;
  border:0;padding:23px 0;text-align:left;cursor:pointer;font-family:var(--disp);font-size:19px;font-weight:700;
  color:var(--ink);line-height:1.28}
.q button::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2.5px solid var(--teal);
  border-bottom:2.5px solid var(--teal);transform:rotate(45deg);transition:transform .3s;margin-bottom:5px}
.q[data-open] button::after{transform:rotate(-135deg);margin-bottom:0;margin-top:5px}
.q .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q[data-open] .a{max-height:460px}
.q .a p{padding:0 0 23px;color:var(--mute);font-size:16.5px;max-width:64ch}

/* enquiry */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden}
.form-logo{display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(180deg,rgba(13,148,136,.15),rgba(13,148,136,0))}
.form-logo img{height:72px;width:auto}
.form-body{padding:28px}
.fld{position:relative;margin-bottom:14px}
.fld input,.fld select{width:100%;min-height:56px;border:1px solid var(--line);background:var(--bg);
  border-radius:8px;padding:22px 15px 8px;font-family:var(--body);font-size:16px;color:var(--ink);appearance:none}
.fld label{position:absolute;left:16px;top:17px;font-size:16px;color:var(--mute);pointer-events:none;
  transition:transform .18s,font-size .18s,color .18s;transform-origin:left top}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,
.fld select:focus+label,.fld select[data-filled]+label{transform:translateY(-11px) scale(.74);color:var(--teal-txt)}
.fld select+label{transform:translateY(-11px) scale(.74);color:var(--teal-txt)}
.fld input:focus,.fld select:focus{outline:2px solid var(--teal);outline-offset:1px}
.fnote{font-size:13px;color:var(--mute);margin-top:14px;line-height:1.5}
.ok{display:none;gap:12px;align-items:flex-start;border:1px solid #1B7A55;background:rgba(27,122,85,.1);
  padding:16px;border-radius:8px;margin-top:14px;font-size:15px}
.ok[data-on]{display:flex}
.ok[hidden]{display:none}
.ok i{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:#1B7A55;position:relative;margin-top:2px}
.ok i::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* footer */
.ft{background:var(--ink);color:#A9C6C6;padding:62px 0 0}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:42px}
.ft img.fmark{height:62px;width:auto;margin-bottom:18px}
.ft h4{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-lt);
  font-family:var(--body);font-weight:700;margin-bottom:14px}
.ft a{color:#A9C6C6;text-decoration:none;display:inline-block;padding:10px 0;font-size:15px}
.ft a:hover{color:#F0F6F6}
.ft ul{list-style:none;margin:0;padding:0}
.ft-bot{border-top:1px solid var(--line-2);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:14px}
/* scoped past .ft a so the attribution keeps a 40px plus tap target */
.ft-bot .by{text-decoration:none;color:#A9C6C6;font-family:var(--body);font-size:14px;
  padding:12px 0;display:inline-block;line-height:1.5}
.ft-bot .by b{color:var(--teal-lt);font-weight:700}
.disc{border-top:1px solid var(--line-2);padding:22px 0 40px;font-size:12.5px;color:#7FA3A3;line-height:1.65}

/* pinned bar */
.pin{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(12,42,46,.9);backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(94,234,212,.36);transform:translateY(110%);transition:transform .32s}
.pin.on{transform:none}
.pin .btn{flex:1 1 0;min-height:50px}
.pin .btn-sec{background:transparent;color:#DCF3F0;border-color:rgba(220,243,240,.42)}
.flash{animation:flash 1.5s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}30%{box-shadow:0 0 0 5px rgba(13,148,136,.45)}}

/* responsive */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .doors{grid-template-columns:1fr}
  .door-lg{grid-row:auto}
  .path{grid-template-columns:1fr 1fr}
  .two,.ct{grid-template-columns:1fr;gap:34px}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){.nav,.hd-cta{display:none}.burger{display:block}}
@media (max-width:640px){
  body{font-size:16px;padding-bottom:78px}
  section[id]{scroll-margin-top:84px}
  .hero{padding:40px 0 52px}
  .hero-fig{display:none}
  .hero h1{font-size:clamp(36px,10.6vw,50px)}
  .lede{font-size:17px}
  .sec{padding:54px 0}
  .shead{margin-bottom:30px}
  .path{grid-template-columns:1fr}
  .pstep{margin-right:0;padding:24px 0}
  .door,.panel,.draft,.form-body{padding:22px}
  .door-lg h3{font-size:29px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:4px}
  .pin{display:flex}
  .cv li{grid-template-columns:1fr;gap:2px}
  .cv b{padding-top:0}
  .q button{font-size:17px}
}