/* BFF Financial Services — concept 2, "Drive".
   Built around the one thing Lucas actually specialises in: automotive and
   asset finance. Warm graphite ground, ember accent, condensed display caps,
   spec sheet rows rather than cards.

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

   Colour notes. Ember #E2571F is decorative and for text on the dark ground
   only. White on ember is about 3.4:1, so --em-btn is the darkened variant used
   wherever a filled button carries a white label. */

:root{
  --bg:#151311;
  --bg-2:#1E1B18;
  --bg-3:#262220;
  --paper:#F2EFEA;
  --mute:#A9A099;
  --em:#E2571F;
  --em-lt:#FF8B52;
  --em-btn:#BF3F0C;
  --line:#332E2A;
  --line-2:#443D38;
  --shell:min(100% - 40px, 1220px);
  --disp:"Archivo",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--em-lt)}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.02;font-weight:900;
  font-stretch:88%;letter-spacing:-.018em;text-transform:uppercase}
p{margin:0}
section[id]{scroll-margin-top:88px}
.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(18px);filter:blur(7px);
  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(--em);z-index:80;transition:width .12s linear;display:block}

/* header */
.hd{position:sticky;top:0;z-index:60;background:rgba(21,19,17,.9);
  backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:22px;height:70px}
.brand img{height:58px;width:auto}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;min-height:66px}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);text-decoration:none;padding:13px 2px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;background:var(--em);transition:right .3s}
.nav a:hover::after{right:0}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);background:transparent;
  margin-left:auto;position:relative;cursor:pointer;padding:0;border-radius:2px}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;
  background:var(--paper);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:70px;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:none;flex-direction:column;padding:8px 20px 22px;z-index:59;max-height:calc(100dvh - 70px);overflow-y:auto}
.mnav.open{display:flex}
.mnav a{padding:15px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--paper);
  font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mnav .btn{margin-top:16px;justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:15px 24px;
  border-radius:2px;text-decoration:none;border:2px solid transparent;cursor:pointer;min-height:50px;
  transition:background .22s,color .22s,border-color .22s}
.btn-pri{background:var(--em-btn);color:#fff;border-color:var(--em-btn)}
.btn-pri:hover{background:#A63509;border-color:#A63509}
.btn-sec{background:transparent;color:var(--paper);border-color:var(--line-2)}
.btn-sec:hover{border-color:var(--em);color:var(--em-lt)}
.btn-sm{padding:11px 17px;min-height:44px;font-size:12px}

/* 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(900px 420px at 78% 12%,rgba(226,87,31,.16),transparent 62%)}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;position:relative;z-index:2}
.eyebrow{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-lt);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--em);flex:0 0 auto}
.hero h1{font-size:clamp(46px,7.4vw,94px);line-height:.94;letter-spacing:-.028em}
.hero h1 em{font-style:normal;color:var(--em)}
.hero-sub{font-family:var(--disp);font-size:clamp(19px,2.35vw,30px);font-weight:800;font-stretch:88%;
  letter-spacing:.005em;text-transform:uppercase;color:var(--paper);line-height:1.12;margin:18px 0 0}
.lede{font-family:var(--body);font-size:18.5px;color:var(--mute);max-width:38em;line-height:1.62;
  text-transform:none;font-weight:400;letter-spacing:0}
.hero .lede{margin-top:24px}
.facts{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--line-2)}
.facts li{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);padding:14px 22px 0 0;margin-right:22px}
.facts li b{display:block;font-size:23px;letter-spacing:-.01em;color:var(--paper);margin-top:5px;font-weight:900}
.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(26px);animation:rise .78s 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-alt{
  --bg:var(--paper);--bg-2:var(--paper);--bg-3:#E7E2D9;
  --paper:#1B1815;--mute:#6B6259;--line:#DCD5C8;--line-2:#C9C0B0;--em-lt:#BF3F0C;
  background:var(--paper);
}
.sec-alt .tagd{color:#7A2A0E;background:rgba(226,87,31,.14)}
.sec-alt .em{color:var(--em)}
.sec-alt .snum{color:var(--mute)}
.sec-alt .btn-sec{border-color:var(--line-2);color:var(--paper)}
.shead{max-width:900px;margin-bottom:50px}
.shead h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.02em}
.snum{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-lt);margin-bottom:16px;display:flex;align-items:center;gap:11px}
.snum::before{content:"";width:26px;height:2px;background:var(--em);flex:0 0 auto}
.shead .lede{margin-top:18px}

/* spec rows */
.spec{border-top:1px solid var(--line-2)}
.sr-row{display:grid;grid-template-columns:88px 1fr 340px;gap:34px;padding:30px 0;
  border-bottom:1px solid var(--line-2);align-items:start;transition:background .25s}
.sr-row:hover{background:rgba(226,87,31,.05)}
.sr-n{font-family:var(--disp);font-size:38px;font-weight:900;color:var(--em);line-height:1;letter-spacing:-.02em}
.sr-row h3{font-size:26px;margin-bottom:9px}
.sr-row p{color:var(--mute);font-size:16.5px}
.sr-tag{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);border-left:2px solid var(--em);padding-left:14px;line-height:1.6}

/* feature block */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.feat-art{border:1px solid var(--line-2);background:var(--bg-3);padding:26px;border-radius:2px}
.feat-art svg{width:100%;height:auto;display:block}
.pts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-2)}
.pts li{padding:17px 0;border-bottom:1px solid var(--line-2);display:grid;
  grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:16.5px;color:var(--mute)}
.pts li i{width:9px;height:9px;background:var(--em);margin-top:8px;display:block;font-style:normal;
  transform:rotate(45deg)}
.pts li b{color:var(--paper);font-weight:600;display:block;margin-bottom:2px;font-family:var(--body)}

/* record card */
.rec{border:1px solid var(--line-2);background:var(--bg-3);border-radius:2px;padding:32px}
.rec h3{font-size:22px;margin-bottom:18px}
.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-2);font-size:15.5px}
.cv li:first-child{border-top:0}
.cv b{font-family:var(--disp);font-weight:700;color:var(--em-lt);letter-spacing:.1em;font-size:11px;
  text-transform:uppercase;padding-top:4px}
.cv span{color:var(--mute)}

/* draft panel */
.draft{border:1px solid var(--em);background:rgba(226,87,31,.08);padding:32px;border-radius:2px}
.draft h3{font-size:26px;margin-bottom:12px}
.draft>p{color:var(--mute);margin-bottom:20px;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:var(--paper);align-items:start}
.draft li i{width:9px;height:9px;background:var(--em);margin-top:8px;display:block;font-style:normal;transform:rotate(45deg)}
.tagd{display:inline-block;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:#FFD2BC;background:rgba(226,87,31,.28);padding:6px 11px;border-radius:2px;margin-bottom:16px}

/* faq */
.faq{max-width:880px}
.q{border-top:1px solid var(--line-2)}
.q:last-child{border-bottom:1px solid var(--line-2)}
.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:17px;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:var(--paper);line-height:1.24}
.q button::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--em);
  border-bottom:2px solid var(--em);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:52px;align-items:start}
.form-card{border:1px solid var(--line-2);background:var(--bg-2);border-radius:2px;overflow:hidden}
.form-logo{display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(180deg,rgba(226,87,31,.2),rgba(226,87,31,0))}
.form-logo img{height:104px;width:auto}
.form-body{padding:28px}
.fld{position:relative;margin-bottom:14px}
.fld input,.fld select,.fld textarea{width:100%;min-height:56px;border:1px solid var(--line-2);
  background:var(--bg-3);border-radius:2px;padding:22px 15px 8px;font-family:var(--body);font-size:16px;
  color:var(--paper);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(--em-lt)}
.fld select+label{transform:translateY(-11px) scale(.74);color:var(--em-lt)}
.fld input:focus,.fld select:focus{outline:2px solid var(--em);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 #3E8C63;background:rgba(62,140,99,.14);
  padding:16px;border-radius:2px;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:#3E8C63;position:relative;margin-top:2px}
.ok i::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;
  border-right:2px solid #0F1A14;border-bottom:2px solid #0F1A14;transform:rotate(45deg)}

/* footer */
.ft{background:#0F0D0C;padding:62px 0 0;border-top:1px solid var(--line)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:42px}
.ft img.fmark{height:92px;width:auto;margin-bottom:20px}
.ft p{color:var(--mute)}
.ft h4{font-family:var(--disp);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--em-lt);font-weight:800;margin-bottom:14px}
.ft a{color:var(--mute);text-decoration:none;display:inline-block;padding:10px 0;font-size:15px}
.ft a:hover{color:var(--paper)}
.ft ul{list-style:none;margin:0;padding:0}
.ft-bot{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:14px;color:var(--mute)}
/* scoped past .ft a so the attribution keeps a 40px plus tap target */
.ft-bot .by{text-decoration:none;color:var(--mute);font-family:var(--body);font-size:14px;
  padding:12px 0;display:inline-block;line-height:1.5}
.ft-bot .by b{color:var(--em-lt);font-weight:700}
.disc{border-top:1px solid var(--line);padding:22px 0 40px;font-size:12.5px;color:#7E756E;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(15,13,12,.9);backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(226,87,31,.4);transform:translateY(110%);transition:transform .32s}
.pin.on{transform:none}
.pin .btn{flex:1 1 0;min-height:50px}
.flash{animation:flash 1.5s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(226,87,31,0)}30%{box-shadow:0 0 0 5px rgba(226,87,31,.55)}}

/* responsive */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .sr-row{grid-template-columns:60px 1fr;gap:22px}
  .sr-tag{grid-column:2;border-left:0;border-top:1px solid var(--line-2);padding:13px 0 0}
  .feat,.ct{grid-template-columns:1fr;gap:36px}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){.nav,.hd-cta{display:none}.burger{display:block}}
@media (max-width:640px){
  body{font-size:16px;padding-bottom:78px}
  section[id]{scroll-margin-top:80px}
  .hero{padding:40px 0 52px}
  .hero-fig{display:none}
  .hero h1{font-size:clamp(38px,11.6vw,54px)}
  .hero-sub{font-size:clamp(17px,4.6vw,22px);margin-top:14px}
  .lede{font-size:17px}
  .sec{padding:54px 0}
  .shead{margin-bottom:32px}
  .sr-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .sr-n{font-size:30px}
  .sr-tag{grid-column:1}
  .facts li{padding-right:16px;margin-right:16px}
  .facts li b{font-size:20px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:4px}
  .pin{display:flex}
  .form-body,.rec,.draft,.feat-art{padding:22px}
  .cv li{grid-template-columns:1fr;gap:2px}
  .cv b{padding-top:0}
  .q button{font-size:15.5px}
}

/* photography */
.hero-fig{position:relative}
.ph{display:block;width:100%;height:auto;border-radius:2px;border:1px solid var(--line-2)}
.ph-wrap{position:relative;overflow:hidden;border-radius:2px}
.ph-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,19,17,0) 40%,rgba(21,19,17,.55));pointer-events:none}
.sr-row{position:relative}
.sr-shot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;border:1px solid var(--line-2);margin-top:14px;display:block;filter:saturate(.86) contrast(1.04)}
.band{margin:0 0 6px;position:relative}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;filter:saturate(.86) contrast(1.04)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,19,17,.55),rgba(21,19,17,.2) 45%,rgba(21,19,17,.9));pointer-events:none}
.feat-art img{width:100%;border-radius:2px;border:1px solid var(--line-2);display:block;filter:saturate(.86) contrast(1.04)}
@media (max-width:640px){.band img{aspect-ratio:4/3}}

/* chat preview widget, cosmetic only, does not connect to anything */
.cbot{position:fixed;right:20px;bottom:20px;z-index:70;font-family:var(--body)}
.cbot-fab{width:56px;height:56px;border-radius:50%;background:var(--em-btn);border:none;
  box-shadow:0 10px 28px rgba(0,0,0,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s}
.cbot-fab:hover{background:var(--em);transform:translateY(-2px)}
.cbot-panel{position:absolute;right:0;bottom:70px;width:320px;max-width:calc(100vw - 40px);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.cbot-panel[hidden]{display:none}
.cbot-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  background:var(--bg-3);border-bottom:1px solid var(--line)}
.cbot-head img{height:26px;width:auto}
.cbot-x{background:none;border:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:0}
.cbot-x:hover{color:var(--paper)}
.cbot-body{padding:16px;max-height:220px;overflow-y:auto}
.cbot-msg{background:var(--bg-3);border:1px solid var(--line);border-radius:10px 10px 10px 2px;
  padding:12px 14px;font-size:14.5px;color:var(--paper);line-height:1.5}
.cbot-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.cbot-in input{flex:1;min-height:40px;border:1px solid var(--line-2);background:var(--bg-3);
  border-radius:6px;padding:0 12px;color:var(--paper);font-family:var(--body);font-size:14.5px}
.cbot-in button{width:40px;height:40px;flex:0 0 auto;border:none;border-radius:6px;background:var(--em-btn);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.cbot-in button:hover{background:var(--em)}
.cbot-note{font-size:11.5px;color:var(--mute);padding:0 14px 14px;line-height:1.5}
@media (max-width:640px){.cbot{right:14px;bottom:84px}}