/* Parelion — Journey · shared styles */

:root{
  --paper:#f1ece0; --paper-1:#e8e2d2; --paper-2:#ddd5c2;
  --ink:#16201f; --ink-2:#2c3a37; --mute:#6c7572; --faint:#b3b4ab;
  --line:rgba(22,32,31,0.12); --line-2:rgba(22,32,31,0.24);
  --moss:#6c8e3a; --moss-deep:#4a6726;
  --teal:#2c5d63; --teal-deep:#143038;
  --ochre:#c89967; --ochre-soft:#d9b890;
  --accent:var(--moss);
  --accent-soft:rgba(108,142,58,0.18);
  --f-serif:"Source Serif 4", ui-serif, Georgia, serif;
  --f-sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max:1440px; --gutter:clamp(24px,4vw,64px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
::selection{background:var(--moss);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.serif{font-family:var(--f-serif)}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;align-content:center;gap:32px;height:64px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.brand .crumb{color:var(--mute);letter-spacing:.18em;margin-left:6px}
.brand .glyph{width:14px;height:14px;background:var(--ink);position:relative}
.brand .glyph::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--moss);border-radius:50%}
.nav-links{display:flex;justify-content:center;gap:28px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.nav-links a:hover{color:var(--moss-deep)}
.nav-links a.on{color:var(--moss-deep)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav-cta::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--moss)}

/* P-HERO (product / page hero) */
.p-hero{
  position:relative;
  padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);
  /* unified hero height across every page so navigation doesn't jump */
  min-height:86vh;
  min-height:86svh;
  display:flex;flex-direction:column;justify-content:space-between;
  border-bottom:1px solid var(--line);
  isolation:isolate;
  overflow:hidden;
  color:var(--paper);
}
.p-hero > .container{flex:1;display:flex;flex-direction:column}
.p-hero-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.p-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url('assets/hero-sediment.png');
  background-size:cover;background-position:center 35%;
}
.p-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,32,31,.60) 0%,rgba(22,32,31,.32) 50%,rgba(22,32,31,.80) 100%);
}
.p-hero-meta{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:0 0 18px;border-bottom:1px solid rgba(241,236,224,.22);
  color:rgba(241,236,224,.85);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.p-hero-meta .tag{display:inline-flex;align-items:center;gap:10px}
.p-hero-meta .tag i{width:8px;height:8px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 4px rgba(108,142,58,.25)}
.p-hero-meta .ctr{text-align:center;color:rgba(241,236,224,.7)}
.p-hero-meta .rt{text-align:right;color:rgba(241,236,224,.7)}
.p-hero-body{padding:clamp(56px,10vw,140px) 0 clamp(32px,5vw,72px);max-width:1100px}
.p-hero h1{
  font-family:var(--f-serif);font-weight:300;
  font-size:clamp(54px,8vw,124px);
  line-height:.95;letter-spacing:-.028em;margin:0;
  color:var(--paper);text-wrap:balance;
  text-shadow:0 1px 30px rgba(22,32,31,.35);
}
.p-hero h1 em{
  font-style:italic;font-weight:300;color:var(--paper);
  position:relative;display:inline-block;padding:.02em .14em .04em;
}
.p-hero h1 em::before{content:"";position:absolute;inset:.08em -.02em .06em -.02em;background:var(--moss-deep);z-index:-1}
.p-hero .lede{
  font-family:var(--f-serif);font-size:clamp(18px,1.7vw,22px);
  line-height:1.5;color:rgba(241,236,224,.92);
  max-width:54ch;margin-top:28px;font-weight:300;
}
.p-hero .lede em{color:#dfeea6;font-style:italic}
.p-hero-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding-top:24px;border-top:1px solid rgba(241,236,224,.22);
  color:rgba(241,236,224,.9);
}
@media (max-width:800px){.p-hero-foot{grid-template-columns:1fr 1fr}}
.p-hero-foot .fix{display:flex;flex-direction:column;gap:5px}
.p-hero-foot .fix .v{font-family:var(--f-mono);font-size:18px;font-variant-numeric:tabular-nums;color:var(--paper)}
.p-hero-foot .fix .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,224,.55)}

/* SECTIONS */
.section{position:relative;padding:clamp(72px,9vw,128px) 0;border-bottom:1px solid var(--line)}
.section.alt{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-1) 100%)}
.section-head{display:grid;grid-template-columns:220px 1fr;gap:var(--gutter);margin-bottom:48px;align-items:start}
.section-head .side{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.section-head .side .num{color:var(--moss-deep)}
.section-head h2{
  font-family:var(--f-serif);font-weight:300;
  font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.022em;
  margin:0;max-width:26ch;color:var(--ink);text-wrap:balance;
}
.section-head h2 em{font-style:italic;color:var(--moss-deep)}
.section-head .intro{
  font-family:var(--f-serif);font-size:18px;line-height:1.55;
  color:var(--ink-2);margin-top:18px;max-width:52ch;
}
.section-head .intro em{color:var(--moss-deep);font-style:italic}
@media (max-width:720px){.section-head{grid-template-columns:1fr;gap:14px;margin-bottom:28px}}

/* CHAPTER LIST */
.chapters{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.chapter{
  display:grid;grid-template-columns:80px 1.2fr 1.5fr auto;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:padding-left .25s,background-color .25s;
}
.chapter:hover{padding-left:14px;background-color:rgba(108,142,58,.06)}
.chapter:last-child{border-bottom:1px solid var(--ink)}
.chapter .num{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--moss-deep);padding-top:8px}
.chapter h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.018em;margin:0;color:var(--ink);max-width:18ch}
.chapter h3 em{font-style:italic;color:var(--teal)}
.chapter .body{font-family:var(--f-serif);font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:50ch}
.chapter .meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:10px;text-align:right;min-width:110px}
.chapter .meta b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
@media (max-width:900px){.chapter{grid-template-columns:1fr;gap:10px;padding:24px 0}.chapter .meta{text-align:left}}

/* SPEC TABLE */
.spec{margin-top:24px;border-top:1px solid var(--ink)}
.spec .row{display:grid;grid-template-columns:200px 1fr 120px;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;font-family:var(--f-mono);font-size:12.5px}
.spec .row .k{color:var(--mute);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em}
.spec .row .v{color:var(--ink);line-height:1.45}
.spec .row .t{color:var(--mute);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-align:right}
.spec .row.hi{background:rgba(108,142,58,.08)}
@media (max-width:720px){.spec .row{grid-template-columns:1fr;gap:4px}.spec .row .t{text-align:left}}

/* FEATURE GRID */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.features .f{padding:28px 28px 28px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.features .f:nth-child(even){padding-right:0;padding-left:28px;border-right:0}
.features .f:nth-last-child(-n+2){border-bottom:0}
.features .f .n{font-family:var(--f-mono);font-size:11px;color:var(--moss-deep);letter-spacing:.1em;padding-top:6px}
.features .f h4{font-family:var(--f-serif);font-size:20px;font-weight:400;letter-spacing:-.012em;margin:0 0 8px}
.features .f h4 em{color:var(--moss-deep);font-style:italic}
.features .f p{font-family:var(--f-serif);font-size:15.5px;color:var(--ink-2);line-height:1.55;margin:0}
@media (max-width:720px){.features{grid-template-columns:1fr}.features .f,.features .f:nth-child(even){border-right:0;padding:24px 0}}

/* PASSAGE */
.passage{padding:clamp(80px,10vw,140px) 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper) 0%,var(--paper-1) 100%)}
.passage-inner{display:grid;grid-template-columns:220px 1fr;gap:var(--gutter)}
.passage-side{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;gap:8px}
.passage-side .num{color:var(--moss-deep)}
.passage-prose{font-family:var(--f-serif);font-size:clamp(20px,2.2vw,28px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);font-weight:300;max-width:36ch}
.passage-prose p+p{margin-top:.9em}
.passage-prose em{font-style:italic;color:var(--moss-deep);font-weight:400}
@media (max-width:720px){.passage-inner{grid-template-columns:1fr}}

/* DEPART */
.depart{padding:clamp(80px,9vw,120px) 0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden;isolation:isolate}
.depart::before{content:"";position:absolute;inset:0;background-image:url('assets/hero-sediment.png');background-size:cover;background-position:center 30%;z-index:-2;opacity:.35}
.depart::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(22,32,31,.85),rgba(22,32,31,.55) 60%,rgba(20,48,56,.7));z-index:-1}
.depart .container{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
@media (max-width:720px){.depart .container{grid-template-columns:1fr}}
.depart h2{font-family:var(--f-serif);font-weight:300;font-size:clamp(36px,5.2vw,72px);line-height:.98;letter-spacing:-.025em;margin:0;max-width:18ch;color:var(--paper)}
.depart h2 em{font-style:italic;color:#cfe098}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:14px 20px;border:1px solid currentColor;background:transparent;color:var(--ink);transition:all .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-fill{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--moss-deep);border-color:var(--moss-deep)}
.btn-light{color:var(--paper);border-color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-light.btn-fill{background:var(--moss);border-color:var(--moss)}
.btn-light.btn-fill:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}

/* FOOT */
.foot{padding:64px 0 28px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:56px}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h6{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:13.5px;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot-mark{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.foot-mark .glyph{width:14px;height:14px;background:var(--ink);position:relative}
.foot-mark .glyph::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--moss);border-radius:50%}
.foot-tag{margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.7;color:var(--mute);max-width:36ch}
.foot-bottom{display:flex;justify-content:space-between;align-items:end;padding-top:24px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--mute)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.ar{display:inline-block}

/* LADDER (disclosure) */
.ladder{margin-top:24px;border-top:1px solid var(--ink)}
.ladder .rung{display:grid;grid-template-columns:80px 200px 1fr 180px;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start;transition:padding-left .25s,background .25s}
.ladder .rung:last-child{border-bottom:1px solid var(--ink)}
.ladder .rung:hover{padding-left:12px;background:rgba(108,142,58,.05)}
.ladder .rung .lvl{font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--moss-deep)}
.ladder .rung h3{font-family:var(--f-serif);font-weight:400;font-size:24px;letter-spacing:-.018em;margin:0;color:var(--ink)}
.ladder .rung h3 em{font-style:italic;color:var(--teal)}
.ladder .rung .body{font-family:var(--f-serif);font-size:16px;line-height:1.55;color:var(--ink-2);margin:0}
.ladder .rung .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:right;padding-top:8px}
@media (max-width:900px){.ladder .rung{grid-template-columns:1fr;gap:8px}.ladder .rung .who{text-align:left}}

/* DOCS index */
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
@media (max-width:900px){.docs-grid{grid-template-columns:1fr}}
.docs-grid .col{padding:32px 28px 28px;border-right:1px solid var(--line)}
.docs-grid .col:last-child{border-right:0}
.docs-grid .col h4{font-family:var(--f-serif);font-weight:400;font-size:28px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.docs-grid .col h4 em{font-style:italic;color:var(--moss-deep)}
.docs-grid .col .role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.docs-grid .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.docs-grid .col li{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.docs-grid .col li:last-child{border-bottom:0}
.docs-grid .col li a{font-family:var(--f-serif);font-size:18px;line-height:1.3;color:var(--ink)}
.docs-grid .col li a:hover{color:var(--moss-deep)}
.docs-grid .col li span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* PIPELINE (Redline) */
.pipeline{margin-top:24px;border-top:1px solid var(--ink)}
.pipeline .step{display:grid;grid-template-columns:80px 200px 100px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pipeline .step:last-child{border-bottom:1px solid var(--ink)}
.pipeline .step .n{font-family:var(--f-mono);font-size:11px;color:var(--moss-deep);letter-spacing:.14em}
.pipeline .step .name{font-family:var(--f-serif);font-size:22px;letter-spacing:-.012em;color:var(--ink)}
.pipeline .step .name em{font-style:italic;color:var(--teal)}
.pipeline .step .t{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.pipeline .step p{font-family:var(--f-serif);font-size:15.5px;color:var(--ink-2);line-height:1.5;max-width:60ch;margin:0}
@media (max-width:800px){.pipeline .step{grid-template-columns:60px 1fr;gap:10px}.pipeline .step .t,.pipeline .step p{grid-column:1/-1}}

/* SUB-PRODUCT (Redline 3-product split) */
.sub-product{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,56px);padding:clamp(48px,6vw,80px) 0;border-bottom:1px solid var(--line);align-items:start}
.sub-product:last-of-type{border-bottom:1px solid var(--ink)}
.sub-product .sp-meta{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sub-product .sp-meta .num{color:var(--moss-deep)}
.sub-product h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.04;letter-spacing:-.022em;margin:0 0 12px;color:var(--ink)}
.sub-product h3 em{font-style:italic;color:var(--teal)}
.sub-product .lede2{font-family:var(--f-serif);font-size:17px;color:var(--ink-2);line-height:1.55;max-width:54ch}
.sub-product ul.caps{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.sub-product ul.caps li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:18px;font-size:14px;line-height:1.5;align-items:baseline}
.sub-product ul.caps li b{font-family:var(--f-mono);font-size:10.5px;font-weight:400;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}
.sub-product ul.caps li span{font-family:var(--f-serif);font-size:15px;color:var(--ink-2)}
@media (max-width:900px){.sub-product{grid-template-columns:1fr;gap:16px;padding:40px 0}}

/* LIFECYCLE (Fieldbook) */
.lifecycle{margin-top:24px;border-top:1px solid var(--ink)}
.lifecycle .state{display:grid;grid-template-columns:80px 220px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.lifecycle .state:last-child{border-bottom:1px solid var(--ink)}
.lifecycle .state .n{font-family:var(--f-mono);font-size:11px;color:var(--moss-deep);letter-spacing:.14em}
.lifecycle .state .name{font-family:var(--f-serif);font-size:22px;letter-spacing:-.012em;color:var(--ink)}
.lifecycle .state .name em{font-style:italic;color:var(--teal)}
.lifecycle .state p{font-family:var(--f-serif);font-size:15.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:60ch}
@media (max-width:720px){.lifecycle .state{grid-template-columns:60px 1fr;gap:10px}.lifecycle .state p{grid-column:1/-1}}


/* brand logo */
.brand-logo{height:18px;width:auto;display:block}
.foot-logo{height:28px}
.brand{gap:14px}


/* ─────────── RESPONSIVE (mobile/tablet) ─────────── */

/* hamburger button — hidden by default */
.nav-toggle{
  display:none;
  position:relative;width:40px;height:40px;
  background:transparent;border:1px solid var(--line);
  padding:0;cursor:pointer;justify-self:end;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:820px){
  .nav-inner{grid-template-columns:auto 1fr;gap:16px}
  .nav-toggle{display:inline-flex}

  /* Slide-down sheet that holds links + CTA */
  .nav-links{
    position:fixed;left:0;right:0;top:64px;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:8px 0;
    max-height:calc(100vh - 64px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .22s ease,opacity .22s ease;
    z-index:60;
  }
  .nav-links a{
    padding:14px var(--gutter);font-size:13px;letter-spacing:.08em;
    border-bottom:1px solid var(--line);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-cta{
    margin:12px var(--gutter) 16px;justify-content:center;
    align-self:stretch;
  }
  .nav.open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}

  /* hide the standalone .nav-cta (it now lives inside the sheet via media-query reflow);
     keep it visible if it sits in .nav-inner. We move it visually via the cascade below. */
  .nav-inner > .nav-cta{display:none}
  .nav-links > .nav-cta{display:inline-flex}
}

@media (max-width:820px){
  /* let mobile heroes size to content instead of trying to fill 86vh */
  .p-hero{min-height:0}
  .p-hero > .container{display:block}
  .p-hero-body{display:block}

  /* hero meta strip — stack rather than squeeze */
  .p-hero-meta{
    grid-template-columns:1fr;gap:6px;text-align:left;
  }
  .p-hero-meta .ctr,.p-hero-meta .rt{text-align:left}

  /* keep big serif h1 from blowing past tiny viewports */
  .p-hero h1{font-size:clamp(40px,11vw,124px)}

  /* lede paragraph sits over the busiest part of the hero image —
     give it a soft card on mobile so it reads cleanly */
  .p-hero .lede{
    position:relative;
    margin-top:22px;
    padding:16px 18px 18px 20px;
    background:rgba(15,23,22,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-left:2px solid var(--moss);
    font-size:16.5px;line-height:1.55;
    max-width:none;
    color:rgba(241,236,224,0.96);
  }
  .p-hero .lede em{color:#dfeea6}

  /* hero foot: 2 cols already at 800px; ensure it stays readable */
  .p-hero-foot{gap:18px 24px}

  /* footer bottom wrap */
  .foot-bottom{flex-wrap:wrap;gap:8px 18px;align-items:flex-start}
}

/* fine-tune very small phones */
@media (max-width:480px){
  .p-hero-body{padding:clamp(40px,12vw,140px) 0 clamp(24px,5vw,72px)}
  .p-hero h1{font-size:clamp(38px,12vw,80px);letter-spacing:-.02em}
  .p-hero .lede{font-size:16px;margin-top:20px}
  .section-head h2{font-size:clamp(28px,8vw,62px)}
  .depart h2{font-size:clamp(28px,8vw,72px)}
  .container{padding:0 20px}
  .nav-inner{height:60px}
  .nav-links{top:60px}
}

/* depart row should stack the CTAs neatly */
@media (max-width:560px){
  .depart .container{gap:24px}
  .depart h2{max-width:none}
}

/* foot grid: single column on very small phones for breathing room */
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
}

/* Prevent long mono strings (hashes, paths) overflowing on phones */
@media (max-width:720px){
  .spec .row .v,.spec .row .k{word-break:break-word}
  .features .f h4,.features .f p{word-wrap:break-word}
}