/* =========================================================================
   DHS — "The Capabilities Brief"  ·  core system
   Persistent rail · visible column grid · folio dividers · editorial type
   Ivory paper · deep petrol · clay accent
   ========================================================================= */

:root{
  --paper:        #F2EEE5;
  --paper-card:   #FAF7F0;
  --paper-deep:   #E8E2D4;
  --ink:          #191710;
  --ink-2:        #3B382E;
  --ink-soft:     #6E6859;
  --line:         rgba(11,61,85,.18);
  --line-strong:  rgba(11,61,85,.34);

  --petrol:       #0B3D55;
  --petrol-2:     #0E4A66;
  --petrol-deep:  #07293A;
  --petrol-pop:   #045C82;
  --haze:         #5E8597;

  --accent:       #BE6A38;
  --accent-soft:  #D7A06E;

  --paper-on-dark:#EDE7DA;
  --soft-on-dark: #93ACB7;
  --line-on-dark: rgba(237,231,218,.17);

  --rail: 64px;
  --bar:  72px;
  --pad:  clamp(18px, 2.4vw, 38px);     /* cell inner padding            */

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.58;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--petrol); color:var(--paper); }

/* ================================================================ TOPBAR */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--bar); z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); border-bottom:1px solid transparent;
  background:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.topbar.scrolled{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
}
.tb-brand{ display:flex; align-items:center; gap:14px; }
.tb-brand img{ height:36px; width:auto; }
.tb-links{ display:flex; gap:26px; position:absolute; left:50%; transform:translateX(-50%); }
.tb-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); transition:color .2s;
  text-shadow:0 0 10px rgba(242,238,229,.9), 0 0 3px rgba(242,238,229,.9);
}
.topbar.scrolled .tb-links a{ color:var(--ink-soft); text-shadow:none; }
.tb-links a:hover, .tb-links a.live{ color:var(--ink); }
.tb-cta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--petrol); color:var(--paper-on-dark); padding:11px 18px; white-space:nowrap;
  transition:background .25s var(--ease);
}
.tb-cta:hover{ background:var(--petrol-deep); }
@media(max-width:1100px){ .tb-links{ display:none; } }

/* ================================================================ FRAME */
main{ padding-top:0; }
.sheet{ scroll-margin-top:var(--bar); }

/* progress hairline under the topbar */
.tb-prog{ position:fixed; top:var(--bar); left:0; height:2px; width:0%; background:var(--accent); z-index:61; }

/* sheet = full-bleed section band */
.sheet{ position:relative; }
.sheet.darker{ background:var(--petrol-deep); color:var(--paper-on-dark); }

/* 12-col composition grid */
.g12{ display:grid; grid-template-columns:repeat(12,1fr); position:relative; z-index:1; }
@media(max-width:860px){
  .g12{ display:grid; grid-template-columns:1fr; }
  .g12 > *{ grid-column:1 / -1 !important; }
}

/* margin marker — replaces full-width folio bars between same-bg sections */
.smark{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:clamp(30px,3.4vw,48px) var(--pad) 0;
}
.smark::before{ content:""; width:26px; height:1px; background:var(--accent); flex:none; }
.smark span{ white-space:nowrap; }

/* ================================================================ FOLIO */
.folio{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  gap:20px; border-top:1px solid var(--line); padding:11px var(--pad) 10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.folio .fx{ position:absolute; top:-8px; transform:translateX(-50%); width:15px; height:15px;
  display:grid; place-items:center; font-size:13px; line-height:1; color:var(--line-strong);
  background:transparent; font-family:var(--mono); pointer-events:none; }
.folio .fx::before{ content:"+"; }
.folio .fx:nth-of-type(1){ left:25%; } .folio .fx:nth-of-type(2){ left:50%; } .folio .fx:nth-of-type(3){ left:75%; }
.sheet.darker .folio{ border-color:var(--line-on-dark); color:var(--soft-on-dark); }
.sheet.darker .folio .fx{ color:var(--soft-on-dark); }
@media(max-width:860px){ .folio .fx{ display:none; } }

/* ============================================================ TYPE UTIL */
.mono-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.sheet.darker .mono-tag{ color:var(--soft-on-dark); }

h1,h2,h3{ font-family:var(--serif); font-weight:420; margin:0; }
.t-display{ font-size:clamp(46px, 7vw, 116px); line-height:.96; letter-spacing:-.026em; font-weight:380; }
.t-display em, .t-sec em{ font-style:italic; font-weight:340; }
.t-sec{ font-size:clamp(30px, 3.8vw, 56px); line-height:1.02; letter-spacing:-.018em; font-weight:400; }
.t-med{ font-size:clamp(24px, 2.4vw, 34px); line-height:1.1; letter-spacing:-.012em; font-weight:430; }
.t-body{ font-size:16.5px; line-height:1.6; color:var(--ink-2); }
.t-lede{ font-size:clamp(17px,1.45vw,21px); line-height:1.55; color:var(--ink-2); }
.sheet.darker .t-body, .sheet.darker .t-lede{ color:var(--soft-on-dark); }

/* ============================================================== BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:.65em; white-space:nowrap; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 24px; border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .arr{
  display:inline-flex; align-items:center;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:21px; font-weight:500; line-height:14px; letter-spacing:0;
  clip-path:inset(-8px 0 -8px 10px); margin-left:-10px;
  transition:transform .3s var(--ease);
}
.btn:hover .arr{ transform:translateX(5px); }
.btn-fill{ background:var(--petrol); color:var(--paper-on-dark); }
.btn-fill:hover{ background:var(--petrol-deep); }
.btn-line{ border-color:var(--line-strong); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); }
.btn-fill-dark{ background:var(--paper-on-dark); color:var(--petrol-deep); }
.btn-fill-dark:hover{ background:#fff; }
.btn-line-dark{ border-color:var(--line-on-dark); color:var(--paper-on-dark); }
.btn-line-dark:hover{ border-color:var(--paper-on-dark); }

/* ======================================================== PLACEHOLDERS */
.ph{
  position:relative; background:var(--paper-deep); overflow:hidden;
  background-image:repeating-linear-gradient(135deg, rgba(11,61,85,.07) 0 1px, transparent 1px 12px);
  display:grid; place-items:center;
}
.ph .ph-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper-card); border:1px solid var(--line); padding:7px 12px;
  max-width:80%; text-align:center;
}
.ph.dark{ background:var(--petrol-deep);
  background-image:repeating-linear-gradient(135deg, rgba(237,231,218,.06) 0 1px, transparent 1px 12px); }
.ph.dark .ph-tag{ color:var(--soft-on-dark); background:var(--petrol); border-color:var(--line-on-dark); }

/* portrait treatment */
.duo{ position:relative; overflow:hidden; background:var(--petrol); }
.duo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform 1.2s var(--ease); }
.duo:hover img, .member:hover .duo img{ transform:scale(1.025); }

/* ================================================================ HERO */
.hero{ display:flex; flex-direction:column; position:relative; overflow:hidden; }

/* compress the hero stack on shorter viewports so headline + base strip
   always land fully in view */
@media (max-height: 1020px) and (min-width: 861px){
  .hero-top{ padding-top:calc(var(--bar) + 14px); }
  .hero-h .t-display{ font-size:min(8.6vw, 12.2svh); }
  .hero-sub{ padding-top:16px; }
  .hero-sub .t-lede{ font-size:clamp(16px,1.3vw,19px); }
  .hero-actions{ margin-top:0; }
  .hero-actions .btn{ padding:13px 20px; }
  .hero-base{ margin-top:0; }
  .hb-cell{ padding:14px var(--pad) 16px; }
  .hb-cell b{ font-size:clamp(22px,1.9vw,28px); }
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:saturate(1.15) contrast(1.0) brightness(1.02);
}
.hero-wash{ position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(242,238,229,.90) 0%, rgba(242,238,229,.80) 24%,
      rgba(242,238,229,.46) 44%, rgba(242,238,229,.14) 60%,
      rgba(242,238,229,.02) 70%, rgba(242,238,229,0) 100%),
    linear-gradient(180deg,
      rgba(242,238,229,.82) 0%, rgba(242,238,229,.34) 12%,
      rgba(242,238,229,0) 44%, rgba(242,238,229,.10) 86%, rgba(242,238,229,.22) 100%);
}
.hero-grain{ position:absolute; inset:0; opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@media(max-width:860px){
  .hero-wash{ background:rgba(242,238,229,.90); }
}
.hero-top{ padding-top:var(--bar); padding-bottom:var(--bar); align-content:center; min-height:100svh; }
.hero-eyebrow{ grid-column:1/8; padding:0 var(--pad); align-self:start; }
.hero-stamp{
  grid-column:10/13; margin:0 var(--pad); justify-self:stretch;
  border:1px solid var(--line-strong); padding:14px 16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); display:flex; flex-direction:column; gap:6px;
  background:rgba(242,238,229,.66); backdrop-filter:blur(5px);
}
.hero-stamp b{ color:var(--accent); font-weight:500; }
.hero-h{ grid-column:1/13; padding:clamp(22px,3vw,42px) var(--pad) 0; position:relative; z-index:2; }
.hero-h .t-display{ max-width:11ch; color:var(--petrol-deep); }
.hero-h .t-display em{ color:var(--petrol-pop); }
.hero-h .t-display.reveal{ filter:blur(7px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1.3s var(--ease); }
.hero-h .t-display.reveal.in{ filter:blur(0); }
.hero-sub{
  grid-column:1/7; padding:clamp(22px,2.6vw,38px) var(--pad) 0; position:relative; z-index:2;
}
.hero-sub .t-lede{ max-width:56ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:0; }
.hero-fig{
  grid-column:7/13; margin:calc(clamp(28px,3.4vw,48px) * -1) var(--pad) 0 0; position:relative; z-index:1;
  min-height:320px; border:1px solid var(--line);
}
.hero-fig .ph, .hero-fig .duo{ position:absolute; inset:0; }
.hero-fig .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 21%; }
.hero-figcap{
  position:absolute; left:-1px; bottom:-1px; z-index:2; padding:10px 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); white-space:nowrap;
}
@media(max-width:860px){
  .hero-fig{ margin:28px var(--pad) 0; min-height:280px; }
  .hero-stamp{ display:none; }
}

/* hero base strip — lines live INSIDE the strip and stop at its edges */
.hero-base{ margin-top:0; position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(251,249,243,.50), rgba(242,238,229,.42));
  backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
  border-top:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 -18px 40px -28px rgba(11,61,85,.18);
}
.hero-base .hb-cell{ border-right-color:rgba(255,255,255,.45); }
.hero-base .g12{ align-items:stretch; }
.hb-cell{
  grid-column:span 3; padding:20px var(--pad) 22px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.hb-cell:last-child{ border-right:0; }
.hb-cell b{ font-family:var(--serif); font-weight:480; font-size:clamp(24px,2.1vw,32px); line-height:1.05; letter-spacing:-.01em; color:var(--petrol-deep); }
.hb-cell span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
@media(max-width:860px){ .hb-cell{ border-right:0; border-top:1px solid var(--line); } }

/* audiences ticker */
.ticker{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ticker-track{
  display:flex; align-items:center; width:max-content; padding:13px 0;
  animation:tick 46s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.tick-item{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.tick-sep{ color:var(--accent); padding:0 26px; font-size:11px; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* =============================================================== MOTION */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
}