/* E5Bravo — shared system.
   Ground: Gunmetal Navy. Body: Bone. Type: Newsreader serif + Red Hat Mono chrome. */

:root{
  --cream:#ECE7DC;      /* Bone — type on the dark ground, and the body ground */
  --ink:#1E262E;        /* body text on light */
  --steel:#5B6B77;      /* muted labels, hairlines */
  --navy:#16212B;       /* Gunmetal Navy */
  --accent:#E4602A;     /* Signal Orange — used sparingly, never as decoration */
  --shell:rgba(236,231,220,.92);
  --hair:rgba(91,107,119,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* ---------- floating pill nav ---------- */
.nav{
  position:fixed;top:24px;left:24px;right:24px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-radius:12px;
  background:var(--shell);
  backdrop-filter:blur(6px);
}
.mark{font-size:26px;font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1;text-decoration:none}
.links{display:flex;gap:36px}
.nav a{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:14px;font-weight:500;letter-spacing:-.015em;
  color:var(--steel);text-decoration:none;transition:color .25s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav > a:last-child{color:var(--accent)}

/* ---------- the dark ground (homepage hero + inner-page mastheads) ---------- */
.hero{position:relative;height:500svh}
.hero .pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;
}
.ground{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
.beat{
  position:absolute;max-width:19ch;
  font-weight:450;font-size:clamp(40px,6.6vw,96px);
  line-height:1.04;letter-spacing:-.035em;color:var(--cream);
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.beat.is-past{transform:translateY(-28px)}
.beat.is-live{opacity:1;transform:translateY(0)}
.beat i{font-style:italic}
.beat b{font-weight:450;font-style:normal;display:block}

.scrollcue{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.08em;color:var(--cream);
  opacity:.75;transition:opacity .5s ease;animation:bob 2.4s ease-in-out infinite;
}
.scrollcue.gone{opacity:0}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* inner-page masthead: same ground, one screen, no beats */
.masthead{position:relative;height:66svh;min-height:420px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px 0}
.masthead .eyebrow{
  position:relative;font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--cream);opacity:.7;
  margin-bottom:24px;
}
.masthead h1{
  position:relative;font-weight:450;
  font-size:clamp(40px,5.6vw,80px);line-height:1.04;letter-spacing:-.035em;
  color:var(--cream);max-width:18ch;
}
.masthead h1 i{font-style:italic}
.masthead .lede{
  position:relative;margin-top:28px;max-width:56ch;
  font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--cream);opacity:.82;
}

/* ---------- the forge panel ----------
   Rises inset from the bottom and widens to full bleed as it enters, while the
   photo scales up. Measured off the reference: 1248 -> 1440 wide, scale 1.086 -> 1.20. */
.forge{
  position:relative;display:block;line-height:0;
  width:var(--forge-w,86.7%);margin:0 auto;
  border-radius:var(--forge-r,14px);overflow:hidden;
  will-change:width;
}
.forge img{
  width:100%;height:clamp(420px,68svh,820px);object-fit:cover;display:block;
  transform:scale(var(--forge-s,1.086));transform-origin:center center;
  will-change:transform;
}
.story{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  width:min(920px,calc(100% - 96px));
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:28px 32px;border-radius:10px;
  background:var(--cream);text-decoration:none;line-height:1.2;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.story:hover{transform:translate(-50%,-4px)}
.story h2{font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.01em;color:var(--ink)}
.story .meta{
  display:flex;align-items:center;gap:28px;
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:13px;font-weight:500;color:var(--steel);white-space:nowrap;
}
/* Signal Orange only ever marks the way out: arrows, toggles, the live dot.
   Never a decorative spark on a dark field. That was the generic build. */
.story .meta span:last-child{color:var(--accent);font-size:16px}

/* ---------- the Bone body ---------- */
.turn{background:var(--cream);padding:200px 24px 180px;text-align:center}
.turn h2{
  font-weight:400;font-size:clamp(38px,4vw,57px);
  line-height:1;letter-spacing:-.004em;color:var(--ink);margin:0 auto;
}
.turn h2 i{font-style:italic}
.turn .sub{margin:28px auto 0;max-width:52ch;font-size:20px;line-height:1.5;color:var(--ink);opacity:.78}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.section{padding:0 24px 160px}
.eyebrow{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--steel);
}

/* rows: the reference's model list, reused for method, services, work */
.row{
  display:grid;grid-template-columns:150px 1fr auto;gap:40px;align-items:baseline;
  padding:44px 0;border-top:1px solid var(--hair);
}
.row .step{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:13.3px;font-weight:500;letter-spacing:-.015em;color:var(--steel);
}
.row h3{font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.row p{margin-top:12px;font-size:20px;line-height:1.45;color:var(--ink);opacity:.8;max-width:56ch}
.row .price{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;
}
.row .price a{color:var(--accent)}
.row dl{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;max-width:60ch}
.row dt{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--steel);
  padding-top:5px;white-space:nowrap;
}
.row dd{font-size:17px;line-height:1.45;color:var(--ink);opacity:.85}

/* buttons */
.book{
  display:block;width:fit-content;margin:80px auto 0;
  padding:16px 32px;border-radius:999px;
  background:var(--navy);color:var(--cream);text-decoration:none;
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:14px;font-weight:500;letter-spacing:-.015em;
  transition:transform .25s ease;
}
.book:hover{transform:translateY(-2px);background:var(--accent);color:var(--cream)}
.book.inline{margin:36px 0 0}
.book.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.book.ghost:hover{border-color:var(--accent)}

/* faq accordion */
.qa{border-top:1px solid var(--hair)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:32px 0;font-size:clamp(22px,2vw,28px);font-weight:400;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:"Red Hat Mono",ui-monospace,monospace;font-size:22px;color:var(--accent);transition:transform .25s ease}
.qa summary:hover::after{transform:scale(1.15)}
.qa[open] summary::after{content:"–"}
.qa p{padding:0 0 32px;max-width:66ch;font-size:19px;line-height:1.55;color:var(--ink);opacity:.82}

/* the two audit tiers */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tier{border:1px solid var(--hair);border-radius:12px;padding:40px}
.tier.dark{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tier h3{font-weight:400;font-size:30px;line-height:1.15;margin:12px 0 8px}
.tier .note{font-size:18px;line-height:1.45;opacity:.8;margin-bottom:24px}
.tier ul{list-style:none;display:grid;gap:12px}
.tier li{position:relative;padding-left:22px;font-size:17px;line-height:1.45;opacity:.9}
.tier li::before{content:"→";position:absolute;left:0;font-family:"Red Hat Mono",ui-monospace,monospace;font-size:13px;color:var(--accent)}
.tier.dark .eyebrow{color:var(--cream);opacity:.7}
.tier .book{margin:32px 0 0}
.tier.dark .book{background:var(--cream);color:var(--navy)}

/* contact form */
.form{display:grid;gap:20px;max-width:560px}
.form label{display:grid;gap:8px}
.form span{font-family:"Red Hat Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.04em;color:var(--steel)}
.form input,.form textarea{
  font-family:"Newsreader",Georgia,serif;font-size:18px;color:var(--ink);
  background:transparent;border:1px solid var(--hair);border-radius:8px;padding:14px 16px;
}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--steel)}

/* the standing-by pill */
.corner{
  position:fixed;left:24px;bottom:24px;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 8px 8px;border-radius:999px;background:var(--shell);
}
.corner span{font-family:"Red Hat Mono",ui-monospace,monospace;font-size:12px;color:var(--steel)}
/* the live ember: Signal Orange, the same heat as the forge photo */
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(228,96,42,.16);margin-left:8px}

/* footer */
footer{background:var(--navy);color:var(--cream);padding:100px 24px 48px}
footer .inner{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
footer .mark{color:var(--cream);font-size:30px}
footer nav{display:flex;gap:64px}
footer ul{list-style:none;display:grid;gap:12px}
footer a{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:13px;color:var(--cream);opacity:.72;text-decoration:none;
}
footer a:hover{opacity:1}
footer .legal{
  max-width:1000px;margin:72px auto 0;padding-top:24px;border-top:1px solid rgba(236,231,220,.16);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:12px;opacity:.6;
}

@media (max-width:820px){
  .links{display:none}
  .nav{padding:14px 18px}
  .row{grid-template-columns:1fr;gap:8px}
  .row dl{grid-template-columns:1fr;gap:4px 0}
  .row dt{padding-top:14px}
  .tiers{grid-template-columns:1fr}
  .turn{padding:140px 24px 120px}
  .story{flex-direction:column;align-items:flex-start;gap:16px;bottom:32px;width:calc(100% - 32px);padding:20px}
  footer .inner{flex-direction:column}
  footer nav{gap:40px}
}

/* ============================================================
   HEAT + MOTION
   The dark ground has the drama. The Bone body was inert.
   Orange is used as heat: it marks what is live, what you are
   touching, and what is about to happen. Never as decoration.
   ============================================================ */

/* --- the heat line: every dark section cools into the body through an ember edge --- */
.masthead::after,
.hero .pin::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(228,96,42,0) 12%,
    rgba(228,96,42,.85) 38%,
    rgba(255,170,90,1) 50%,
    rgba(228,96,42,.85) 62%,
    rgba(228,96,42,0) 88%,
    transparent 100%);
  opacity:.9;
}

/* --- scroll reveal: content rises into place instead of just being there --- */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- rows: they respond. the label lights, the rule heats, the title steps forward --- */
.row{
  position:relative;
  transition:background .4s ease;
}
.row::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--accent),rgba(228,96,42,0));
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}
.row:hover::before{width:100%}
.row:hover{background:linear-gradient(90deg,rgba(228,96,42,.05),rgba(228,96,42,0) 60%)}
.row .step,.row h3{transition:color .3s ease, transform .4s cubic-bezier(.22,.61,.36,1)}
.row:hover .step{color:var(--accent)}
.row:hover h3{transform:translateX(6px)}

/* --- eyebrows get a lit tick, so every section starts with an ember --- */
.section .eyebrow::before,
.tier .eyebrow::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--accent);margin-right:10px;vertical-align:middle;
  box-shadow:0 0 8px rgba(228,96,42,.7);
}

/* --- links underline with a sweep, in heat --- */
.wrap a:not(.book):not(.mark),
.turn a:not(.book){
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s cubic-bezier(.22,.61,.36,1), color .3s ease;
  padding-bottom:2px;
}
.wrap a:not(.book):not(.mark):hover,
.turn a:not(.book):hover{background-size:100% 1px;color:var(--accent)}

/* --- the primary button: heat rises through it --- */
.book{position:relative;overflow:hidden;isolation:isolate}
.book::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#F0733B,var(--accent));
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.book:hover::before{transform:translateY(0)}
.book:hover{background:var(--navy);color:var(--cream)}
.book.ghost:hover{color:var(--cream);border-color:var(--accent)}

/* --- tiers: the paid one glows when you reach for it --- */
.tier{transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease}
.tier:hover{transform:translateY(-4px);border-color:var(--accent)}
.tier.dark:hover{box-shadow:0 24px 60px -24px rgba(228,96,42,.45)}

/* --- faq: the open question is the hot one --- */
.qa{transition:border-color .3s ease}
.qa summary{transition:color .3s ease}
.qa summary:hover{color:var(--accent)}
.qa[open] summary{color:var(--ink)}
.qa[open]{border-color:rgba(228,96,42,.5)}

/* --- the story card on the forge: it warms as you approach --- */
.story{transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease}
.story:hover{box-shadow:0 30px 70px -30px rgba(228,96,42,.6)}
.story:hover h2{color:var(--accent)}
.story h2{transition:color .3s ease}

/* --- footer: an ember rule, and links that light --- */
footer{position:relative}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(228,96,42,.9) 50%,transparent);
}
footer a{transition:color .25s ease,opacity .25s ease}
footer a:hover{color:var(--accent);opacity:1}

/* --- the scroll progress rail: how far through the argument you are --- */
.rail{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:30;
  background:transparent;pointer-events:none;
}
.rail span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),#FFAA5A);
  box-shadow:0 0 12px rgba(228,96,42,.8);
  transition:width .1s linear;
}

/* --- nav CTA: lit, and it pulses on hover --- */
.nav > a:last-child{transition:color .25s ease, transform .25s ease}
.nav > a:last-child:hover{transform:translateX(2px);color:#F0733B}

/* --- the live pill actually breathes --- */
.dot{animation:ember 2.6s ease-in-out infinite}
@keyframes ember{
  0%,100%{box-shadow:0 0 0 4px rgba(228,96,42,.16), 0 0 6px rgba(228,96,42,.5)}
  50%{box-shadow:0 0 0 7px rgba(228,96,42,.06), 0 0 14px rgba(228,96,42,.9)}
}
@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
}

/* --- the nav docks on scroll ---------------------------------
   At rest it floats as a pill, which is the look at the top of the page.
   The moment the page moves, it locks to the top edge and goes full width,
   so nothing scrolls through the gap around it. */
.nav{
  transition:top .35s cubic-bezier(.22,.61,.36,1),
             left .35s cubic-bezier(.22,.61,.36,1),
             right .35s cubic-bezier(.22,.61,.36,1),
             border-radius .35s cubic-bezier(.22,.61,.36,1),
             padding .35s cubic-bezier(.22,.61,.36,1),
             background .35s ease,
             box-shadow .35s ease;
}
.nav.docked{
  top:0;left:0;right:0;
  border-radius:0;
  padding:14px 32px;
  background:rgba(236,231,220,.96);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 1px 0 rgba(91,107,119,.22), 0 12px 30px -22px rgba(22,33,43,.45);
}
/* the ember rail rides the bottom edge of the docked bar instead of the page top */
.rail{transition:top .35s cubic-bezier(.22,.61,.36,1)}
body.nav-docked .rail{top:auto}

/* --- the mark: three chevrons (E-5), top one lit --- */
.mark{display:flex;align-items:center;gap:10px}
.mark img{display:block;width:28px;height:28px;flex:none}
.mark span{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--ink);
}
footer .mark img{width:40px;height:40px;border-radius:9px}
footer .mark span{font-size:17px;color:var(--cream)}

/* --- the rate card: a floor anchor, and the founding rate under it --- */
.row .price{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.row .price .from{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;
}
.row .price .founding{
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--accent);white-space:nowrap;
}
@media (max-width:820px){
  .row .price{align-items:flex-start;text-align:left;margin-top:16px}
}

/* --- the portraits: the Marine and the operator, twenty years apart --- */
:root{--portrait-h:clamp(380px,48vh,560px)}
.portraits{
  display:grid;grid-template-columns:0.62fr 1fr;gap:24px;align-items:start;
  margin-bottom:72px;
}
.portraits figure{margin:0;overflow:hidden}
/* both crop to one common height, so they read as a matched pair rather than
   two photos that happen to sit next to each other */
.portraits img{
  display:block;width:100%;height:var(--portrait-h,520px);
  object-fit:cover;border-radius:12px;
  filter:grayscale(.15) contrast(1.03);
  transition:filter .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.portraits figure:first-child img{object-position:center 20%}
.portraits figure:last-child img{object-position:center 30%}
.portraits figure:hover img{filter:none;transform:scale(1.02)}
.portraits figcaption{
  margin-top:14px;
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--steel);
}
@media (max-width:820px){
  .portraits{grid-template-columns:1fr;gap:32px}
}

/* a single portrait sits at its natural size, not stretched across the column */
.portraits.solo{grid-template-columns:minmax(0,620px);margin-bottom:64px}

/* the About page carries one portrait and a few paragraphs. In the 1000px column
   that left a lopsided void on the right, so it gets its own centered column
   sized to the portrait: photo and text share one left edge, block reads centered. */
.wrap.narrow{max-width:660px}
.wrap.narrow .portraits.solo{grid-template-columns:1fr}

/* the four rules: each one is a promise, so each gets its own hairline and heat */
.rules{display:grid;gap:0}
.rule{padding:36px 0;border-top:1px solid var(--hair);position:relative}
.rule::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--accent),rgba(228,96,42,0));
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}
.rule:hover::before{width:100%}
.rule h3{
  font-weight:400;font-size:clamp(21px,1.9vw,26px);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;
  transition:color .3s ease;
}
.rule:hover h3{color:var(--accent)}
.rule p{font-size:19px;line-height:1.55;color:var(--ink);opacity:.82}

/* a struck emphasis in the body copy: heat, italic, and it means it */
.qa p em, .wrap em{
  font-style:italic;font-weight:500;color:var(--accent);
}