/* the first section under a banner opens at the banner's own bottom inset (Bryan, 09/28) */
section.phead + section.sec{padding-top:clamp(40px,4vw,60px)}

/* ---------- subpage hero banner (sections15.py), modeled on tools/pages15.py's .phead / .phead--photo ---------- */
.phead{position:relative;background:var(--slate);color:var(--paper);padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,88px);margin-top:var(--navh)}
/* banner titles matched to tools/pages15.py's h1 size exactly (Bryan, 09/25): the default h1 rule (clamp
   42/5.4vw/84px) reads too large stacked over a photo banner at this height. */
.phead h1{margin:0;font-size:clamp(34px,3.6vw,54px)}
/* inner pages: nav solid from the start, like tools/pages15.py (the homepage's transparent state washes out over the banner) */
.nav,.nav.solid{background:rgba(21,24,26,.96);border-bottom-color:var(--line-dark-soft)}
.nav::before,.nav.solid::before{opacity:0}
.phead .deck{margin-top:clamp(18px,2vw,28px);max-width:64ch;color:rgba(245,243,237,.86)}
/* ---------- subpage banner, Option A (dark ombre), 09/28: the photo runs full bleed and is graded toward Argon
   Navy; a flat Navy field holds the headline column and ramps out into the photo on an eased curve. The type
   sits on the flat part of the field, never on the ramp, so contrast does not depend on the photo. Each page
   sets --pos (desktop crop), --pos-m (390 crop), --grade (how far the photo is pulled toward Navy), --origin (the subject the drift pushes in on, so nothing slides out of frame) and optionally --dx/--dy. ---------- */
.phead--photo{overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(340px,27vw,420px);padding-top:clamp(64px,6vw,96px);padding-bottom:clamp(44px,4vw,60px);background:#102A56}
.phead--photo .wrap{position:relative;z-index:2;width:100%}
.phead--photo h1{max-width:11.5em}
.phead--photo .deck{max-width:36ch;color:#F6F4EF}
.phead--photo::before{content:"";position:absolute;inset:-5% -4%;z-index:0;background-image:linear-gradient(rgba(16,42,86,var(--grade,.3)),rgba(16,42,86,var(--grade,.3))),var(--photo);background-blend-mode:multiply,normal;background-size:cover;background-position:var(--pos,center 55%);background-repeat:no-repeat;transform-origin:var(--origin,70% 50%)}
.phead--photo::after{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(90deg,#102A56 0%,#102A56 40%,rgba(16,42,86,.93) 45%,rgba(16,42,86,.78) 50%,rgba(16,42,86,.55) 56%,rgba(16,42,86,.32) 62%,rgba(16,42,86,.14) 68%,rgba(16,42,86,.04) 73%,rgba(16,42,86,0) 78%)}
@keyframes photo-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(var(--dx,0%),var(--dy,0%),0)}}
.js .phead--photo::before{animation:photo-drift 42s ease-in-out infinite alternate}
/* scroll parallax: the photo trails the page; --sy is set by the script below, and only once the banner's top edge is under the fixed nav, so the uncovered strip stays hidden */
.js .phead--photo::before{translate:0 var(--sy,0px)}
@media(prefers-reduced-motion:reduce){.js .phead--photo::before{animation:none;transform:none;translate:none}}
@media(max-width:1000px){.phead--photo .deck{max-width:30ch}.phead--photo::after{background-image:linear-gradient(90deg,#102A56 0%,#102A56 54%,rgba(16,42,86,.93) 59%,rgba(16,42,86,.78) 64%,rgba(16,42,86,.55) 70%,rgba(16,42,86,.32) 76%,rgba(16,42,86,.14) 82%,rgba(16,42,86,.04) 87%,rgba(16,42,86,0) 92%)}}
@media(max-width:640px){
  .phead--photo{min-height:0;display:block;padding-top:54vw;padding-bottom:40px}
  .phead--photo h1,.phead--photo .deck{max-width:none}
  .phead--photo::before{top:-12px;left:-4%;right:-4%;bottom:auto;height:calc(64vw + 12px);background-position:var(--pos-m,var(--pos,center))}
  .phead--photo::after{background-image:linear-gradient(180deg,rgba(16,42,86,0) 0,rgba(16,42,86,0) 28vw,rgba(16,42,86,.3) 35vw,rgba(16,42,86,.62) 42vw,rgba(16,42,86,.87) 48vw,#102A56 52vw,#102A56 100%)}
}

/* ---------- how-we-deliver.html: the seven stages as body copy, not cards and not the slider ---------- */
.sec.stages-section{border-top:1px solid var(--line);padding-top:clamp(48px,5.5vw,72px)}
.sec.stages-section h2{margin-bottom:clamp(24px,2.5vw,32px)}
.stagelist{list-style:none;margin-top:clamp(40px,4.5vw,64px)}
.stagelist li{padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line-soft)}
.stagelist li:first-child{border-top:1px solid var(--line-soft);padding-top:clamp(28px,3vw,40px)}
.stagelist h3{display:flex;align-items:baseline;gap:16px;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.006em;margin-bottom:10px}
.stagelist-n{flex:0 0 auto;font-stretch:76%;font-weight:600;font-size:clamp(26px,2.3vw,32px);color:var(--amber);line-height:1}
.stagelist p{max-width:70ch;font-size:17px;line-height:1.6;color:var(--ink-soft)}

/* ---------- capabilities.html: h2 spacing for "What sets Argon apart" ---------- */
.sec h2{margin-bottom:clamp(22px,2.4vw,34px)}

/* ---------- capabilities.html: placeholder sections for detail we still need from Kim ---------- */
.cap-placeholder h2{margin-bottom:clamp(14px,1.6vw,20px);font-size:18px;font-weight:600;color:var(--slate)}
.cap-placeholder p{max-width:70ch;color:var(--ink-soft)}
.cap-placeholder ul{margin-top:12px;margin-left:20px;max-width:70ch;color:var(--ink-soft);line-height:1.6}
.cap-placeholder ul li{margin-bottom:8px}

/* ---------- capabilities.html: tighter spacing between differentiators and panels ---------- */
.sec.cap-panels{padding-top:clamp(24px,2.5vw,32px)}
.sec.cap-panels + .sec.cap-panels{margin-top:24px}

.cc-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,28px);margin-top:clamp(52px,6vw,88px)}
.cc{background:#102A56;color:#F6F4EF;padding:clamp(30px,3vw,42px) clamp(28px,2.8vw,38px) clamp(32px,3.2vw,40px);box-shadow:0 22px 44px -18px rgba(16,42,86,.4);transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.cc:hover{transform:translateY(-6px);box-shadow:0 30px 56px -16px rgba(16,42,86,.5)}
.cc--lead{grid-column:1/-1;display:flex;align-items:center;gap:clamp(32px,4vw,64px);padding:clamp(38px,4vw,54px) clamp(36px,4vw,56px)}
.cc--lead .cc-fig{flex:0 0 auto;margin-bottom:0}
.cc--lead .cc-body{flex:1 1 auto;min-width:0}
.cc-fig{margin-bottom:clamp(20px,2.2vw,28px)}
.cc-ico{display:block;width:clamp(52px,4.4vw,64px);height:clamp(52px,4.4vw,64px);color:#F6F4EF;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;transition:color .3s ease}
.cc-ico .h{stroke-width:1}
.cc:hover .cc-ico{color:#007BFF}
.cc h3{margin:0;font-size:clamp(21px,1.9vw,25px);line-height:1.22;letter-spacing:-.006em;color:#fff}
.cc--lead h3{font-size:clamp(23px,2.1vw,28px)}
.cc p{margin-top:12px;font-size:16.5px;line-height:1.62;color:rgba(246,244,239,.86);max-width:46ch}
.cc--lead p{max-width:56ch}
@media(max-width:900px){
  .cc-grid{grid-template-columns:1fr}
  .cc--lead{flex-direction:column;align-items:flex-start}
  .cc--lead .cc-fig{margin-bottom:clamp(20px,2.2vw,28px)}
}
@media(max-width:640px){
  .cc{padding:28px 24px 30px}
  .cc--lead{padding:30px 24px 34px;gap:22px}
  .cc p,.cc--lead p{max-width:none}
}