/* Langford Hope — V14 minimal
   One idea per section: a label, one line, one graphic. */

:root{
  --paper:#f3f0e9;--paper2:#e9e6de;--ink:#181917;--ink2:#222320;--muted:#6c6e67;--rule:#cfccc3;--signal:#38e86b;
  --pad:clamp(20px,4.2vw,68px);--gap:clamp(110px,13vw,210px);
  --serif:"Switzer",Arial,sans-serif;--sans:"Switzer",Arial,sans-serif;--mono:"Switzer",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--signal);color:var(--ink)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px;font-size:12px}
.skip:focus{top:12px}
:focus-visible{outline:1px solid var(--signal);outline-offset:4px}

/* ---------- Type ---------- */
.label{display:inline-flex;align-items:center;gap:12px;margin:0;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.label:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.label.g:before{background:var(--signal);box-shadow:0 0 10px var(--signal)}
.display{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(58px,9.4vw,158px);line-height:.9;letter-spacing:-.035em;text-wrap:balance}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,88px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,42px);line-height:1.02;letter-spacing:-.02em}
/* Signal highlighter (replaces italics) — swept in by site.js when in view */
em,.it{font-style:normal;color:inherit;padding:0 .06em;margin:0 -.02em;background-image:linear-gradient(transparent 6%,var(--signal) 6%,var(--signal) 96%,transparent 96%);background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--ease) .55s,color .5s ease .7s}
em.hl,.it.hl{background-size:100% 100%}
.dark em.hl,.dark .it.hl{color:var(--ink)}
.nw{white-space:nowrap}
.promise b em,.metric .num i{background:none;padding:0;margin:0}
.lede{margin:0;max-width:34ch;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--muted)}
.small{font-size:12.5px;color:var(--muted);line-height:1.5}
.num{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:.85;font-variant-numeric:lining-nums}
.green{color:var(--signal)}

/* ---------- Layout ---------- */
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--gap);padding-bottom:var(--gap);position:relative}
.sec.tight{padding-top:calc(var(--gap)*.6);padding-bottom:calc(var(--gap)*.6)}
.dark{background:var(--ink);color:var(--paper)}
.dark .label,.dark .lede,.dark .small{color:rgba(243,240,233,.58)}
.tone{background:var(--paper2)}
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px 60px;margin-bottom:clamp(40px,5vw,80px)}
.head .h2{max-width:15ch}
.head.stack{display:grid;justify-content:start;gap:26px}
.head.center{display:grid;justify-content:center;justify-items:center;text-align:center;gap:26px}
.head.center .h2{max-width:18ch}
.legend{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;margin-top:22px;padding-top:18px;border-top:1px solid currentColor;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .legend{color:rgba(243,240,233,.58);border-color:rgba(243,240,233,.3)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.dark .legend i{background:var(--paper)}
.legend i.g{background:var(--signal)!important}
.legend i.f{background:transparent!important;border:1px solid currentColor}
.legend i.sq{border-radius:0}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.dark .rule{background:rgba(243,240,233,.16)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:18px;padding:17px 24px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);transition:background .35s,color .35s,border-color .35s}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .btn:hover{background:transparent;color:var(--paper)}
.dark .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(243,240,233,.4)}
.dark .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.signal{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn.signal:hover{background:transparent;color:inherit}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;gap:12px;align-items:center;text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:78px;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--ink);transition:color .4s,background .4s,transform .5s var(--ease)}
.nav.on-dark{color:var(--paper)}
.nav.solid{background:rgba(243,240,233,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.solid.on-dark{background:rgba(24,25,23,.86)}
.nav.hide{transform:translateY(-100%)}
.brand{display:block;width:clamp(130px,11vw,168px);line-height:0}
.brand img{width:100%;height:auto;transition:filter .4s}
.brand .logo-w{display:none}
.nav.on-dark .brand .logo-k,.foot .brand .logo-k{display:none}
.nav.on-dark .brand .logo-w,.foot .brand .logo-w{display:block}
.navlinks{display:flex;gap:clamp(18px,2.2vw,36px);font-size:13px}
.navlinks a,.navside a.plain{text-decoration:none;position:relative;padding:6px 0;opacity:.8;transition:opacity .3s}
.navlinks a:hover,.navlinks a[aria-current],.navside a.plain:hover{opacity:1}
.navlinks a[aria-current]:after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--signal)}
.navside{display:flex;justify-content:flex-end;align-items:center;gap:26px;font-size:13px}
.navcta{padding:11px 16px;border:1px solid currentColor;text-decoration:none;font-size:12.5px;transition:background .3s,color .3s}
.navcta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav.on-dark .navcta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.menu{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:10px}
.menu i{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:transform .4s var(--ease)}
.menu i:after{content:"";position:absolute;left:0;top:6px;width:100%;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-open .menu i{transform:translateY(3px) rotate(45deg)}
.menu-open .menu i:after{top:0;transform:rotate(-90deg)}
.mobile-panel{display:none}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(70px,8vw,120px) var(--pad) 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}

.foot-big{font-family:var(--serif);font-size:clamp(30px,3vw,46px);line-height:1.05;letter-spacing:-.02em;margin:34px 0 0;max-width:16ch}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px}
.foot ul a{text-decoration:none;opacity:.82}
.foot ul a:hover{opacity:1;color:var(--signal)}
.foot h4{margin:0 0 20px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,240,233,.5)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 30px;margin-top:clamp(60px,7vw,110px);padding-top:22px;border-top:1px solid rgba(243,240,233,.14);font-size:11.5px;color:rgba(243,240,233,.5)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--signal);pointer-events:none;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s,background .3s;mix-blend-mode:normal}
.cursor.on{opacity:1}
.cursor.big{width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(56,232,107,.22)}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* ---------- Motion primitives ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .wi{display:inline-block;transform:translateY(105%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i)*55ms + var(--d,0s))}
.split.in .wi{transform:none}
.rotator{display:inline-grid;vertical-align:bottom;color:var(--ink);background:linear-gradient(transparent 6%,var(--signal) 6%,var(--signal) 96%,transparent 96%);padding:0 .06em;transition:width .9s var(--ease)}
.rotator>span{grid-area:1/1;justify-self:start;transition:transform .9s var(--ease),opacity .9s var(--ease);white-space:nowrap}
.rotator>span:not(.cur){opacity:0;transform:translateY(40%)}
.rotator>span.out{opacity:0;transform:translateY(-40%)}
.dark .rotator,.on-paper .rotator{color:var(--ink)}
.rotator.g{color:var(--ink)}
.rotator.ink{color:var(--ink)}

/* ---------- Canvas figures ---------- */
.fig{margin:0;position:relative}
.cv{display:block;width:100%;height:100%}
.ratio{position:relative;width:100%}
.ratio>canvas,.ratio>svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- Hero ---------- */
.hero{min-height:100svh;position:relative;display:grid;align-content:end;padding:140px var(--pad) clamp(34px,4vw,56px);overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px 40px;margin-top:clamp(40px,6vw,90px);padding-top:22px;border-top:1px solid currentColor}
.dark .hero-foot{border-color:rgba(243,240,233,.22)}
.hero .label{margin-bottom:clamp(26px,3vw,40px)}
.scrollcue{width:46px;height:46px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;text-decoration:none;opacity:.7;transition:opacity .3s}
.scrollcue:hover{opacity:1}
.scrollcue span{animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(6px);opacity:0}}

/* ---------- Quote ---------- */
.quote{display:grid;justify-items:center;text-align:center;gap:34px}
.quote blockquote{margin:0;max-width:22ch;font-family:var(--serif);font-size:clamp(34px,4.2vw,66px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.quote blockquote:before{content:"“";display:block;color:var(--signal);font-size:1.4em;line-height:.6;margin-bottom:.12em}
.quote cite{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.quote cite b{color:var(--ink);font-weight:500}
.dark .quote cite b{color:var(--paper)}

/* ---------- Close / CTA ---------- */
.close{display:grid;justify-items:center;text-align:center;gap:clamp(28px,3vw,40px)}
.close .h2{font-size:clamp(48px,7.4vw,124px);max-width:13ch}
.close .actions{justify-content:center}
.close .small a{color:inherit}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips span{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--rule);border-radius:40px;font-size:13px}
.chips span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
.dark .chips span{border-color:rgba(243,240,233,.22)}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px)}
.member{margin:0}
.member .ph{aspect-ratio:3/4;overflow:hidden;background:#c9c8c2}
.member img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transform:scale(1.04);transition:transform 1.4s var(--ease),filter .8s}
.member:hover img{transform:scale(1)}
.member figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:14px;border-top:1px solid transparent}
.member strong{font-weight:400;font-size:14px}
.member span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.member a{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-decoration:none;color:var(--muted);transition:color .3s}
.member a:hover{color:var(--ink)}

/* ---------- Accordion ---------- */
.faq{max-width:900px;margin:0 auto;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;cursor:pointer;font-family:var(--serif);font-size:clamp(22px,2vw,30px);letter-spacing:-.015em;line-height:1.1}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:14px;height:14px;position:relative}
.faq summary i:before,.faq summary i:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.faq summary i:after{transform:rotate(90deg)}
.faq details[open] summary i:after{transform:rotate(0)}
.faq p{margin:0;padding:0 0 28px;max-width:52ch;color:var(--muted)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(24,25,23,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);overflow:auto;background:var(--paper);color:var(--ink);padding:clamp(28px,4vw,48px);transform:translateY(20px);transition:transform .6s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-x{position:absolute;right:18px;top:14px;font-size:26px;line-height:1;opacity:.6}
.modal-x:hover{opacity:1}
.field{display:grid;gap:8px;margin-top:20px}
.field label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{font:inherit;font-size:16px;padding:12px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus{outline:0;border-color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .team{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top>div:first-child{grid-column:1/-1}
}
@media (max-width:880px){
  .nav{grid-template-columns:1fr auto;height:68px}
  .navlinks,.navside .plain,.navside .navcta{display:none}
  .menu{display:inline-flex}
  .mobile-panel{display:flex;position:fixed;inset:0;z-index:55;background:var(--paper);color:var(--ink);flex-direction:column;justify-content:space-between;padding:110px var(--pad) 36px;transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden}
  .menu-open .mobile-panel{transform:none;visibility:visible}
  .mobile-panel nav{display:grid;gap:4px}
  .mobile-panel nav a{font-family:var(--serif);font-size:44px;line-height:1.1;letter-spacing:-.02em;text-decoration:none}
  .mobile-panel nav a[aria-current]{background:linear-gradient(transparent 6%,var(--signal) 6%,var(--signal) 96%,transparent 96%);color:var(--ink);padding:0 .06em}
  .menu-open .nav{color:var(--ink)}
  .menu-open .nav .brand .logo-k{display:block}.menu-open .nav .brand .logo-w{display:none}
  .menu-open .nav.solid{background:transparent;backdrop-filter:none}
}
@media (max-width:640px){
  :root{--gap:clamp(88px,22vw,120px)}
  .team{grid-template-columns:repeat(6,62vw);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:none}
  .team::-webkit-scrollbar{display:none}
  .member{scroll-snap-align:start}
  .foot-top{grid-template-columns:1fr}
  .btn{padding:16px 20px}
  .actions .btn{flex:1 1 100%;justify-content:space-between}
  .legend{font-size:9.5px}
  .quote blockquote{font-size:clamp(30px,8.4vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .split .wi{transform:none}
}
.foot{border-top:1px solid rgba(243,240,233,.12)}
.navside a.plain[aria-current]{opacity:1}
.navside a.plain[aria-current]:after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--signal)}
.navside a.plain{position:relative}

@media (prefers-reduced-motion:reduce){em,.it{transition:none}}

/* Typewriter (home hero) */
.typer{white-space:nowrap}
.typer .tx{color:var(--ink);padding:0 .06em;background:linear-gradient(transparent 6%,var(--signal) 6%,var(--signal) 96%,transparent 96%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.typer .tx:empty{padding:0}
.typer .caret{display:inline-block;width:.055em;height:.78em;margin-left:.08em;background:var(--signal);vertical-align:-.04em;animation:caret 1.05s steps(1) infinite}
.typer.busy .caret{animation:none}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.typer .caret{display:none}}