/* Canis Major Partners. Direction: C (Route) hero + B (Ledger) model block. See design/direction-approved.md */
:root{
  --char:#383838;
  --char-2:#2F2F2F;
  --char-3:#454545;
  --grey:#595959;
  --fog:#B9BCBC;
  --white:#F7F7F5;
  --green:#2AA95B;
  --red:#C00000;
  --red-lit:#E2412F;
  --display:'Krub',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--char)}
body{color:var(--white);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
p,li{text-wrap:pretty}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--char);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;position:relative;z-index:3;gap:16px}
.top .home img{height:54px;width:auto;display:block}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{font-size:14px;color:var(--fog);text-decoration:none}
.top nav a:hover,.top nav a[aria-current=page]{color:var(--white)}
.top nav a.login{color:var(--white);border:1.5px solid var(--grey);padding:8px 14px;border-radius:999px}
.top nav a.login:hover{border-color:var(--fog)}
.menu{display:none;background:none;border:1.5px solid var(--grey);color:var(--white);font:500 14px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer}

/* type */
h1,.h1{font:700 clamp(42px,6vw,84px)/1 var(--display);letter-spacing:-.025em}
.lede{font-size:19px;color:var(--fog);max-width:40ch;margin-top:26px}
.h2{font:600 clamp(28px,3vw,38px)/1.12 var(--display);letter-spacing:-.012em}
.small-h{font:600 17px var(--body);color:var(--fog);margin-bottom:18px}
.muted{color:var(--fog)}

/* buttons */
.btn{display:inline-block;font:600 15px var(--body);text-decoration:none;padding:13px 22px;border-radius:999px;background:var(--white);color:var(--char);border:1.5px solid var(--white);cursor:pointer}
.btn:hover{background:var(--green);border-color:var(--green);color:var(--white)}
.btn.ghost{background:none;color:var(--white);border-color:var(--grey)}
.btn.ghost:hover{border-color:var(--white);background:none}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* home hero */
.hero{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:center;min-height:calc(100vh - 100px);max-height:860px;padding-bottom:40px}
.hero .lede{font-size:18px;max-width:34ch}
.switch{margin-top:34px;display:inline-flex;border:1.5px solid var(--grey);border-radius:999px;padding:4px}
.switch button{font:500 15px var(--body);color:var(--fog);background:none;border:0;padding:9px 20px;border-radius:999px;cursor:pointer}
.switch button[aria-pressed=true]{background:var(--white);color:var(--char)}
.stage{position:relative;width:100%;aspect-ratio:1.08/1}
.stage svg{width:100%;height:100%;overflow:visible}
.stage .cap{position:absolute;right:0;bottom:-6px;font-size:13px;color:var(--fog);text-align:right}
.lbl{font:500 2.6px var(--body);fill:var(--fog)}

/* inner page hero */
.page-hero{padding:72px 0 80px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
.page-hero .side{color:var(--fog);font-size:16px;max-width:42ch;border-left:1.5px solid var(--grey);padding-left:24px}
.page-hero .side b{color:var(--white);font-weight:600}

/* the sum (agent model) */
.sum{background:var(--char-2);padding:80px 0 84px}
.sum .intro{font-size:17px;color:var(--fog);max-width:52ch;margin-bottom:40px}
.sum .intro b{color:var(--white);font-weight:600}
.eq{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:6px;font:600 clamp(26px,3.6vw,50px)/1.18 var(--body);letter-spacing:-.02em;max-width:900px}
.eq .op{text-align:right;font-weight:300;color:#8C8F8F}
.eq .op.minus{color:#FF6B5B}
.eq .total{border-top:3px solid var(--white);padding-top:14px;margin-top:12px;color:var(--green)}
.eq .tl{border-top:3px solid var(--white);margin-top:12px;padding-top:14px}
.js .eq .row{opacity:0;transform:translateX(-10px);transition:opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1)}
.js .eq.on .row{opacity:1;transform:none}
.sum .note{margin-top:36px;color:var(--fog);font-size:15px;max-width:60ch}

/* field report */
.report{background:var(--char-2);padding:80px 0}
.report .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center}
.report p{color:var(--fog);margin-top:16px;max-width:40ch}
.bars{display:grid;gap:22px}
.bar .t{display:flex;justify-content:space-between;font-size:15px;color:var(--fog);margin-bottom:8px}
.bar .t b{color:var(--white);font:600 22px var(--body)}
.track{height:18px;background:var(--char-3);position:relative}
.fill{position:absolute;inset:0 auto 0 0;width:var(--w)}
.js .fill{width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.js .on .fill{width:var(--w)}

/* rows: ledger lines used for "who" and for service lists */
.rows{padding:88px 0 64px}
.rows .row-link,.rows .line{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:baseline;text-decoration:none;padding:24px 0;border-top:1.5px solid var(--grey)}
.rows > :last-child{border-bottom:1.5px solid var(--grey)}
.rows .row-link b{font:600 clamp(28px,3.4vw,46px)/1.1 var(--display);letter-spacing:-.015em;transition:color .2s}
.rows .row-link span{color:var(--fog)}
.rows .row-link:hover b{color:var(--green)}
.rows .line h3{font:600 clamp(22px,2.2vw,28px)/1.2 var(--display)}
.rows .line p{color:var(--fog)}
.rows.three .line{grid-template-columns:.8fr 1.3fr .8fr}
.proof{font:600 30px/1.1 var(--body);letter-spacing:-.02em}
.proof small{display:block;font:400 14px/1.5 var(--body);color:var(--fog);letter-spacing:0;margin-top:6px}

/* feature (image + text) */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:24px 0 96px}
.feature img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.feature.wide img{aspect-ratio:4/3}
.feature h2,.feature h3{font:700 40px/1.05 var(--display);letter-spacing:-.02em}
.feature p{color:var(--fog);margin-top:18px;max-width:46ch}
.facts{list-style:none;padding:0;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.facts li{font-size:14px;color:var(--fog)}
.facts li b{display:block;color:var(--white);font:600 24px var(--body)}

/* quote */
.quote{padding:96px 0;max-width:980px}
.quote blockquote{font:600 clamp(30px,3.6vw,52px)/1.12 var(--display);letter-spacing:-.02em}
.quote cite{display:block;font:400 15px var(--body);font-style:normal;color:var(--fog);margin-top:20px}

/* prose */
.prose{max-width:64ch;padding:0 0 88px}
.prose p{color:var(--fog);font-size:17px;margin-top:18px}
.prose p:first-child{margin-top:0}
.prose h2{margin:56px 0 4px}
.prose b{color:var(--white);font-weight:600}

/* case studies */
.case{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;padding:40px 0;border-top:1.5px solid var(--grey)}
.case:last-child{border-bottom:1.5px solid var(--grey)}
.case .tag{font-size:14px;color:var(--fog);margin-top:8px}
.case h2{font:600 clamp(26px,2.6vw,34px)/1.12 var(--display);letter-spacing:-.012em}
.case p{color:var(--fog);max-width:58ch}
.case p+p{margin-top:12px}
.case .q{color:var(--white);border-left:3px solid var(--green);padding-left:16px;margin-top:18px}

/* cta band */
.cta{border-top:1.5px solid var(--grey);padding:72px 0 80px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta p{color:var(--fog);margin-top:10px;max-width:46ch}

/* contact form */
.form{display:grid;gap:18px;max-width:640px;padding-bottom:96px}
.form label{display:grid;gap:8px;font-size:14px;color:var(--fog)}
.form input,.form select,.form textarea{font:400 17px var(--body);color:var(--white);background:var(--char-2);border:1.5px solid var(--grey);border-radius:6px;padding:13px 14px;width:100%}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .msg{font-size:15px;color:var(--fog);min-height:1.5em}
.form .hp{position:absolute;left:-9999px}

/* footer */
footer{border-top:1.5px solid var(--grey);padding:40px 0 52px;margin-top:0}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;color:var(--fog);font-size:14px}
footer .big{font:600 24px var(--display);color:var(--white)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--white)}
footer .legal{grid-column:1/-1}

@media (max-width:900px){
  .wrap{padding:0 20px}
  .menu{display:inline-block}
  .top nav{display:none;position:absolute;top:100%;left:-20px;right:-20px;flex-direction:column;align-items:flex-start;gap:0;background:var(--char-2);padding:8px 20px 20px;border-bottom:1.5px solid var(--grey)}
  .top nav.open{display:flex}
  .top nav a{font-size:18px;padding:10px 0}
  .top nav a.login{margin-top:10px;padding:8px 16px}
  .top .home img{height:46px}
  .hero{grid-template-columns:1fr;min-height:0;max-height:none;padding-top:8px}
  .page-hero{grid-template-columns:1fr;padding:40px 0 56px;gap:28px}
  .report .grid,.feature,.rows .row-link,.rows .line,.rows.three .line,.case,.form .two{grid-template-columns:1fr;gap:14px}
  .rows{padding:64px 0 48px}
  .feature{gap:28px;padding-bottom:72px}
  .feature h2,.feature h3{font-size:32px}
  .case{gap:10px}
  footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .fill,.js .eq .row{transition:none}
}