/* ==========================================================================
   MSH Endeavors — shared design system
   Editorial Luxury / aviation instrument. Navy ground, single brass accent.
   Previously this system was copy-pasted inline across four pages; it lives
   here now so a token change lands everywhere at once.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Ground. Deep navy ink, never pure black. */
  --ink:#08192A;          /* darkest — nav, footer, bands */
  --ink-2:#0C2135;        /* raised navy surface */

  /* Paper. One cool-gray family, faintly warmed so it isn't clinical. */
  --paper:#FBFAF8;
  --paper-2:#F3F1ED;

  /* Single accent hue, tuned twice: brass on dark, deep brass on light.
     Change these two and the whole site re-tones. */
  --brass:#C8913F;        /* 6.4:1 on --ink  */
  --brass-deep:#8A5F1E;   /* 5.7:1 on --paper */
  --brass-lit:#E0B368;    /* hover / highlight only, never body text */

  /* Text */
  --on-ink:#FFFFFF;
  --on-ink-2:#C3D2E0;
  --on-ink-3:#8FA4B8;
  --on-paper:#1B2C3D;
  --on-paper-2:#4A5C6E;
  --on-paper-3:#77879A;

  /* Hairlines */
  --rule-dark:rgba(255,255,255,.13);
  --rule-light:rgba(8,25,42,.12);

  /* Shadows carry the ground's hue — never generic black. */
  --lift-2:0 2px 6px rgba(8,25,42,.06), 0 24px 48px -24px rgba(8,25,42,.28);
  --lift-3:0 4px 10px rgba(8,25,42,.08), 0 44px 80px -32px rgba(8,25,42,.38);
  --lift-dark:0 30px 70px -30px rgba(0,0,0,.65);

  /* Motion. Spring-weighted, never linear or ease-in-out. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:180ms;
  --t-mid:340ms;
  --t-slow:820ms;

  /* Rhythm */
  --gut:clamp(20px,4.5vw,64px);
  --section:clamp(88px,11vw,168px);
  --shell:1320px;

  /* Concentric radii — outer shell minus its own padding */
  --r-shell:28px;
  --r-core:20px;
  --r-lg:36px;

  /* Clearance the floating nav island needs above the first content.
     The mobile island is two rows, so it needs materially more. */
  --nav-clear:120px;

  /* Layers */
  --z-grain:60;
  --z-nav:50;
  --z-skip:70;
}

/* ---------- Reset ------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--on-paper-2);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
a{color:inherit;}

::selection{background:var(--brass);color:var(--ink);}

/* ---------- Film grain --------------------------------------------------
   Fixed and pointer-events:none so it never repaints with scroll content. */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.038;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---------- Skip link --------------------------------------------------- */
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:var(--z-skip);
  padding:14px 22px;border-radius:999px;
  background:var(--brass);color:var(--ink);text-decoration:none;
  font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  transition:top var(--t-mid) var(--ease-spring);
}
.skip:focus{top:22px;}

/* ---------- Type scale -------------------------------------------------- */
.display{
  font-family:'Newsreader',serif;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(42px,6.4vw,84px);line-height:1.02;letter-spacing:-.032em;
}
.h2{
  font-family:'Newsreader',serif;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(30px,3.8vw,50px);line-height:1.08;letter-spacing:-.026em;
}
.h3{
  font-family:'Newsreader',serif;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(24px,2.6vw,34px);line-height:1.14;letter-spacing:-.02em;
}

/* Uppercase micro-label. Deliberately confined to nav links, eyebrows and
   buttons. Every other small label (footer headings, definition terms, the
   about role line) is set in serif italic instead, so no page ends up
   wall-to-wall tracked capitals. */
.eyebrow{
  font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);margin:0 0 20px;
}
.eyebrow.on-paper{color:var(--brass-deep);}

.lede{font-size:clamp(18px,1.65vw,21px);line-height:1.62;max-width:34ch;}
.prose p{font-size:17.5px;line-height:1.78;max-width:64ch;}
.prose p + p{margin-top:24px;}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ---------- Shell ------------------------------------------------------- */
.shell{
  max-width:var(--shell);margin-inline:auto;
  padding-left:calc(var(--gut) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--gut) + env(safe-area-inset-right,0px));
}
/* Bottom padding is 8% heavier — optically, equal top/bottom reads bottom-light. */
.section{padding-top:var(--section);padding-bottom:calc(var(--section) * 1.08);}

/* ==========================================================================
   Navigation — floating island, detached from the top edge
   ========================================================================== */
.nav-mount{
  position:fixed;z-index:var(--z-nav);left:0;right:0;
  /* env() keeps the island off the notch in landscape and below the status
     bar when installed to the home screen. Falls back to 0 everywhere else. */
  top:calc(22px + env(safe-area-inset-top,0px));
  padding-left:calc(var(--gut) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--gut) + env(safe-area-inset-right,0px));
  display:flex;justify-content:center;pointer-events:none;
  transition:top var(--t-mid) var(--ease);
}
.nav{
  pointer-events:auto;width:100%;max-width:var(--shell);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:11px 11px 11px 26px;border-radius:999px;
  background:rgba(8,25,42,.58);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:var(--lift-dark), inset 0 1px 0 rgba(255,255,255,.09);
  transition:background var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             padding var(--t-mid) var(--ease);
}
.nav.is-scrolled{background:rgba(8,25,42,.9);border-color:rgba(255,255,255,.15);}

.nav-links{display:flex;gap:30px;align-items:center;}
.nav-link{
  position:relative;text-decoration:none;color:var(--on-ink-2);
  font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  padding-block:6px;
  transition:color var(--t-fast) var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease-expo);
}
.nav-link:hover{color:var(--on-ink);}
.nav-link:hover::after,.nav-link[aria-current]::after{transform:scaleX(1);}
.nav-link[aria-current]{color:var(--on-ink);}

.nav-mark{
  justify-self:center;text-decoration:none;color:var(--on-ink);
  font-family:'Newsreader',serif;font-optical-sizing:auto;
  font-size:23px;font-weight:400;letter-spacing:.005em;white-space:nowrap;
}
.nav-mark em{font-style:italic;font-weight:300;color:var(--brass);}
.nav-end{display:flex;justify-content:flex-end;align-items:center;gap:10px;}

/* The nav pill sits at a smaller scale than the in-page CTAs — it's chrome,
   not a page action. Scoped to .nav so the panel buttons keep their size. */
.nav .btn{padding:9px 9px 9px 20px;font-size:12px;gap:11px;letter-spacing:.15em;}
.nav .btn-ico{width:27px;height:27px;flex-basis:27px;}
.nav .btn-ico svg{width:13px;height:13px;}

/* ==========================================================================
   Buttons — pill, with the trailing arrow nested in its own circle
   ========================================================================== */
.btn{
  --btn-bg:transparent;--btn-fg:var(--on-ink);--btn-line:rgba(255,255,255,.34);
  --btn-ico:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;gap:14px;
  padding:11px 11px 11px 26px;border-radius:999px;text-decoration:none;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-line);
  font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),transform var(--t-fast) var(--ease-spring);
}
.btn-ico{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border-radius:999px;background:var(--btn-ico);
  transition:background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-spring);
}
.btn-ico svg{width:15px;height:15px;display:block;}
.btn:hover .btn-ico{transform:translate3d(2px,-2px,0) scale(1.06);}
.btn:active{transform:scale(.978);}

/* Solid brass — the single loudest element on any page. */
.btn-primary{
  --btn-bg:var(--brass);--btn-fg:var(--ink);--btn-line:var(--brass);
  --btn-ico:rgba(8,25,42,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 18px 34px -18px rgba(200,145,63,.75);
}
.btn-primary:hover{--btn-bg:var(--brass-lit);--btn-line:var(--brass-lit);}

/* Outline on dark ground */
.btn-ghost:hover{--btn-bg:rgba(255,255,255,.08);--btn-line:rgba(255,255,255,.6);}

/* Tertiary — a text link with an underline that draws in, to break the
   everything-is-a-filled-or-ghost-button pattern. */
.link-q{
  position:relative;display:inline-block;text-decoration:none;
  color:var(--brass-deep);font-weight:500;font-size:16px;
  padding-bottom:3px;
}
.link-q::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.35;
  transform-origin:left;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-expo);
}
.link-q:hover::after{opacity:1;transform:scaleX(1.02);}

/* ==========================================================================
   Panels — double-bezel: outer tray, inner plate, concentric radii
   ========================================================================== */
.bezel{
  padding:8px;border-radius:var(--r-shell);
  background:rgba(8,25,42,.045);
  border:1px solid rgba(8,25,42,.07);
  box-shadow:var(--lift-2);
}
.bezel-core{
  border-radius:var(--r-core);overflow:hidden;background:var(--paper-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(8,25,42,.05);
}
.bezel.on-ink{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);
  box-shadow:var(--lift-dark);}
.bezel.on-ink .bezel-core{background:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.05);}

/* ==========================================================================
   Dark bands — page headers and CTA panels
   ========================================================================== */
.band{
  position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink-2);
}
/* Ambient off-axis glow so the navy isn't a flat fill. */
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(200,145,63,.16) 0%, rgba(200,145,63,0) 58%),
    radial-gradient(70% 90% at 8% 100%, rgba(61,130,216,.1) 0%, rgba(61,130,216,0) 62%);
}
.band > *{position:relative;}

.cta-panel{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink);color:var(--on-ink-2);
  padding:clamp(52px,7vw,88px) clamp(28px,5vw,72px);
  box-shadow:var(--lift-3);
}
.cta-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 130% at 78% 8%, rgba(200,145,63,.19) 0%, rgba(200,145,63,0) 60%);
}
.cta-panel > *{position:relative;}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--ink);color:var(--on-ink-3);position:relative;}
.foot-in{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);
  padding-block:clamp(56px,7vw,84px) 0;
}
.foot-mark{
  font-family:'Newsreader',serif;font-optical-sizing:auto;font-size:26px;color:var(--on-ink);
}
.foot-mark em{font-style:italic;font-weight:300;color:var(--brass);}
.foot p{margin-top:12px;max-width:34ch;font-size:15px;line-height:1.7;}
.foot h4{
  font-family:'Newsreader',serif;font-style:italic;font-weight:400;
  font-size:17px;color:var(--on-ink);margin-bottom:12px;letter-spacing:0;
}
.foot a{
  display:block;text-decoration:none;color:var(--on-ink-3);font-size:15.5px;line-height:2.05;
  transition:color var(--t-fast) var(--ease);width:fit-content;
}
.foot a:hover{color:var(--brass-lit);}
.foot-base{
  margin-top:clamp(44px,6vw,68px);
  padding-top:26px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--on-ink-3);
}

/* ==========================================================================
   Focus — visible, branded, never removed
   ========================================================================== */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-link:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:6px;
}

/* ==========================================================================
   Scroll-entry motion — staggered, heavy, GPU-only
   ========================================================================== */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);filter:blur(6px);
  transition:opacity var(--t-slow) var(--ease-expo),
             transform var(--t-slow) var(--ease-expo),
             filter var(--t-slow) var(--ease-expo);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{opacity:1;transform:none;filter:blur(0);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .foot-in{grid-template-columns:1fr 1fr;}
  .foot-in > :first-child{grid-column:1 / -1;}
}
/* Touch devices get 44px minimum hit areas without changing the visual size —
   the padding grows, the type does not. */
@media (pointer:coarse){
  .nav-link{padding-block:14px;}
  .foot a{padding-block:4px;}
  .deliverables li,.reasons li{padding-top:19px;padding-bottom:19px;}
}

@media (max-width:820px){
  :root{--nav-clear:168px;}
  body{font-size:16.5px;}
  .nav-mount{top:calc(14px + env(safe-area-inset-top,0px));}
  /* Two rows inside a single island: mark + CTA above, links beneath. A
     separate floating link rail collided with the pill on small screens. */
  .nav{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"mark end" "links links";
    gap:0 12px;padding:10px 10px 5px 18px;border-radius:26px;
  }
  .nav-mark{grid-area:mark;justify-self:start;font-size:20px;}
  .nav-end{grid-area:end;gap:8px;}
  .nav-links{
    grid-area:links;justify-content:center;gap:26px;
    margin-top:9px;padding:9px 0 4px;border-top:1px solid rgba(255,255,255,.1);
  }
  .btn{font-size:12px;padding:9px 9px 9px 18px;gap:10px;}
  .btn-ico{width:28px;height:28px;flex-basis:28px;}
  .foot-in{grid-template-columns:1fr;}
  .foot-in > :first-child{grid-column:auto;}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;filter:none;}
}