/* =========================================================
   Strategic-Portfolio-System — shared tokens and components
   Source of truth: design-v2.md. Round = props that move. Sharp = UI you can press.
   ========================================================= */
:root{
  /* colour */
  --primary:#da291c; --primary-active:#b01e0a; --on-primary:#ffffff;
  --canvas:#181818; --canvas-alt:#222224; --canvas-elevated:#303030;
  --canvas-light:#ffffff; --canvas-parchment:#f5f5f7; --surface-black:#000000;
  --ink-on-dark:#ffffff; --ink-on-light:#1d1d1f;
  --body-on-dark:#969696; --body-strong-on-dark:#cccccc; --body-on-light:#333333;
  /* design.md lists #666666 and #7a7a7a; both fail 4.5:1 for small text, so text uses these: */
  --muted:#969696;            /* captions on dark */
  --muted-on-light:#6e6e73;   /* fine print on light, 4.66:1 on parchment */
  --hairline:#303030; --hairline-on-light:#d2d2d7; --focus-ring:#ffffff;
  /* type */
  --font:'Inter',-apple-system,system-ui,sans-serif;
  /* shape, depth, motion */
  --shadow-product:rgba(0,0,0,.22) 3px 5px 30px 0;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:200ms; --dur-base:450ms; --dur-slow:800ms;
  /* spacing ladder */
  --s-xxxs:4px; --s-xxs:8px; --s-xs:16px; --s-sm:24px; --s-md:32px; --s-lg:48px; --s-xl:64px; --s-xxl:96px; --s-super:128px;
  --max:1280px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink-on-dark);font-family:var(--font);font-feature-settings:"ss03";font-size:17px;line-height:1.47;letter-spacing:-.374px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
h2,h3{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#fff;color:var(--canvas);padding:12px 16px;font:600 13px/1 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px}

/* type roles */
.label{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;line-height:1.4}
.light{background:var(--canvas-light);color:var(--ink-on-light)}
.parch{background:var(--canvas-parchment);color:var(--ink-on-light)}
.light,.parch{color-scheme:light}

/* buttons: sharp, 48px, press = scale(.97) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 32px;font:600 13px/1 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:0;background:transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:active{background:var(--primary-active)}
.btn-primary:disabled{background:var(--hairline-on-light);color:var(--muted-on-light);cursor:not-allowed}
.btn-outline{border-color:var(--ink-on-dark);color:var(--ink-on-dark)}
.light .btn-outline,.parch .btn-outline{border-color:var(--ink-on-light);color:var(--ink-on-light)}
.more{font:600 13px/1.4 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px}

/* nav-floating */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:28px;height:48px;padding:0 24px;background:rgba(24,24,24,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--hairline);max-width:calc(100vw - 32px)}
.nav a,.nav-toggle{color:#fff;text-decoration:none;font:600 12px/1.4 var(--font);letter-spacing:.65px;text-transform:uppercase;padding:12px 0;white-space:nowrap}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.nav .brand{display:flex;align-items:center;padding:0;--dock:1;margin-right:calc(-28px*(1 - var(--dock)))}
.nav-logo{display:block;flex:none;width:calc(12.5px*var(--dock));height:30px;margin-right:calc(12px*var(--dock));overflow:hidden}
.nav-logo img{width:12.5px;height:30px}
.nav .name{max-width:0;opacity:0;overflow:hidden;padding:12px 0;transition:max-width var(--dur-base) var(--ease-out),opacity .3s}
.nav.show-name .name{max-width:280px;opacity:1}
/* Home with motion: the nav logo slot is filled by the flying hero logo (home.js) */
.motion .home .nav .brand{--dock:var(--fly,0)}
.motion .home .nav-logo img{visibility:hidden}
.nav-links{display:flex;gap:28px}
.nav-toggle{display:none;background:none;border:0;border-radius:0;cursor:pointer;align-items:center;gap:8px}
.nav-toggle i{display:block;width:16px;height:1.5px;background:#fff;box-shadow:0 5px 0 #fff;transform:translateY(-2.5px)}
@media (max-width:767px){
  .nav{left:16px;right:16px;transform:none;max-width:none;justify-content:space-between;padding:0 16px}
  .nav .name{max-width:280px;opacity:1}
  .motion .home .nav .brand{margin-right:0}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;left:-1px;right:-1px;top:47px;flex-direction:column;gap:0;background:rgba(24,24,24,.96);border:1px solid var(--hairline);border-top:0;padding:8px 16px 16px}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--hairline)}
  .nav-links a:last-child{border-bottom:0}
  .nav.open .nav-links{display:flex}
}

/* section head */
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.sec-head h2{font-weight:500;font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.8px}
.sec-head .label{color:var(--body-on-dark)}
.light .sec-head .label,.parch .sec-head .label{color:var(--muted-on-light)}

/* plate = parchment header strip + elevated body, square rivets, sharp */
.plate{width:min(460px,100%);background:var(--canvas-elevated)}
.plate header{position:relative;background:var(--canvas-parchment);color:var(--ink-on-light);padding:10px 28px;text-align:center}
.plate header::before,.plate header::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--ink-on-light)}
.plate header::before{left:12px}.plate header::after{right:12px}
.plate .pb{padding:18px 24px 22px;font-size:14px;line-height:1.5;letter-spacing:-.224px;color:var(--body-strong-on-dark)}
.plate .pb a{color:#fff}

/* outline type */
.outline{color:transparent;-webkit-text-stroke:1.5px var(--ink-on-dark)}
.light .outline,.parch .outline{-webkit-text-stroke-color:var(--ink-on-light)}

/* footer */
.foot{position:relative;background:var(--canvas);padding:64px 24px 28px;border-top:1px solid var(--hairline);overflow:hidden;isolation:isolate}
/* Large translucent logo behind the footer content */
.foot-logo{position:absolute;z-index:-1;top:50%;right:max(-40px,calc((100vw - var(--max)) / 2 - 80px));height:clamp(520px,125%,980px);width:auto;transform:translateY(-50%) rotate(-6deg);opacity:.07;pointer-events:none;user-select:none}
@media (max-width:760px){.foot-logo{height:110%;right:-28%;opacity:.06}}
.foot .cols{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:32px 80px;justify-content:space-between}
.foot .col{display:flex;flex-direction:column;line-height:2.2;font-size:14px;letter-spacing:-.224px}
.foot .col b{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--body-on-dark);font-weight:600}
.foot .col a,.foot .col span{color:var(--body-strong-on-dark);text-decoration:none}
.foot .col a{text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:5px}
.fw-wrap{max-width:var(--max);margin:56px auto 0}
.fw{font-weight:500;font-size:min(calc((100vw - 48px) / 6.9),186px);line-height:1.04;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #fff;padding-bottom:.06em;margin-left:-.016em;clip-path:inset(0 var(--c,0%) 0 0)}
.fw span{display:block;white-space:nowrap}
.fw span+span{margin-left:-.062em}  /* optical alignment of "P" under "A", as in the hero */
.legal{max-width:var(--max);margin:20px auto 0;font-size:12px;line-height:1.4;letter-spacing:0;color:var(--body-on-dark)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0s!important;animation:none!important}}