/* ═══════════════════════════════════════════════════════════════════════
   HERO AND THE TWO NEW SECTIONS
   ───────────────────────────────────────────────────────────────────────
   Loaded AFTER styles.css so these rules win where they overlap. The old
   hero rules in styles.css still match .hero itself, so the properties
   they set and this file does not would otherwise leak through - the
   neutralisers at the top of the hero block deal with the ones that do.

   The rest of the old hero CSS (.h-word, .hero-sub, .hero-particles,
   .hero-metrics, .btn-nova and friends) no longer matches any element and
   is dead. It is left in place for this change and should be removed in a
   dedicated pass, so a revert of the hero does not have to be a revert of
   a cleanup as well.
   ═══════════════════════════════════════════════════════════════════════ */

/* Neutralise what the old rules set and this file does not. */
.hero::before { content: none !important; }
.hero { text-align: initial; }

/* .wrap was dropped from the extraction on the assumption styles.css
   already defined it. It does not - nothing in the old sheet uses that
   name - so every new section lost its max-width and its gutter and ran
   to the left edge of the window. Defined here. */
.wrap { max-width: var(--max-width); margin-inline: auto;
        padding-inline: var(--gutter); }

/* The old .about-body is a two-column grid built for a different layout.
   The new About prose inherited it and split mid-paragraph. The new
   About owns its own columns via .about-grid. */
.about-body { display: block; grid-template-columns: none; gap: 0; }
.about-body p { max-width: 62ch; }

/* The old .about sets its own vertical padding as a .section; the new one
   is a .sec and supplies its own. */
.sec.about { padding-block: var(--space-10); }

/* ══ HERO ══════════════════════════════════════════════════════════════
   A still, not a video. The motion comes from a very slow drift on the
   image plus the text entrance - which costs nothing, never buffers, and
   works on a phone with the data saver on. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
      justify-content:center;overflow:hidden;isolation:isolate;
      padding:var(--space-9) var(--gutter)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* The portrait asset is a real 9:16 crop of the same source, so it fills the
   frame under cover. It used to be the landscape image padded into a 9:16
   canvas with black bars baked in, which is why this block once asked for
   contain — that only ever showed the bars. */
@media (max-aspect-ratio: 4/5){
  .hero-bg img{object-position:center}
  .hero{padding-block:var(--space-8)}
  /* In portrait the metal sits directly behind the type rather than to
     either side of it, so the centre carries more weight to keep the
     headline off the facets, and the foot goes near-solid so the CTAs
     read as buttons rather than as shapes on a photograph. */
  .hero-scrim{background:
    radial-gradient(ellipse 108% 42% at 50% 54%, rgba(10,10,12,.90) 0%, rgba(10,10,12,.66) 54%, rgba(10,10,12,0) 90%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.10) 22%, rgba(10,10,12,.12) 62%, rgba(10,10,12,.40) 84%, rgba(10,10,12,.88) 100%)}
  /* Tighter stack: a phone screen has far less room to spend on rhythm. */
  .suffix{margin-bottom:var(--space-6)}
  .rule{margin-bottom:var(--space-5)}
  .hero h1{margin-bottom:var(--space-6)}
}
.hero-bg img{width:100%;height:100%;object-fit:cover;
             transform:scale(1.07);
             animation:drift 54s var(--ease-standard) infinite}
@keyframes drift{
  0%{transform:scale(1.07) translate3d(0,0,0)}
  50%{transform:scale(1.13) translate3d(-1.1%,-0.9%,0)}
  100%{transform:scale(1.07) translate3d(0,0,0)}
}
/* The generated image is bright at the edges and dark through the middle.
   This deepens the middle further so the type never fights the metal. */
/* The live layer sits between the still and the scrim, so the scrim
   darkens both together and they read as one image rather than as a
   canvas parked on top of a photo. */
.hero-live{position:absolute;inset:0;z-index:1;width:100%;height:100%;
           display:block;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(ellipse 62% 54% at 50% 52%, rgba(10,10,12,.90) 0%, rgba(10,10,12,.62) 45%, rgba(10,10,12,0) 78%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 22%, rgba(10,10,12,0) 68%, rgba(10,10,12,.88) 100%)}
.hero-in{position:relative;z-index:3;text-align:center;max-width:900px}

/* The lockup is the identity and now reads as it. */
/* max-width matters more than the height clamp here: the lockup is roughly
   6.8:1, so even its minimum height renders wider than a 390px viewport
   minus gutters. Height gives way rather than the page scrolling sideways. */
.lockup{height:clamp(52px,8.4vw,124px);width:auto;max-width:100%;
        height:auto;aspect-ratio:2094/308;
        max-height:clamp(52px,8.4vw,124px);
        margin:0 auto var(--space-4)}
.suffix{display:block;font:var(--text-label);font-size:13px;letter-spacing:.36em;
        text-transform:uppercase;color:var(--gold-400);margin-bottom:var(--space-7)}
.rule{width:clamp(120px,15vw,200px);height:10px;background:var(--gold-600);
      margin:0 auto var(--space-6);
      clip-path:polygon(5.77px 0,100% 0,calc(100% - 5.77px) 100%,0 100%)}
/* Supporting, not shouting. It was 84px; it is not the identity. */
.hero h1{font-family:var(--font-display);font-weight:400;
         font-size:clamp(20px,2.5vw,32px);line-height:1.32;
         letter-spacing:-0.01em;color:var(--dark-text-secondary);
         max-width:30ch;margin:0 auto var(--space-7);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold-300)}
.ctas{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
     padding:var(--space-3) var(--space-6);font:var(--text-label);letter-spacing:.08em;
     text-transform:uppercase;border-radius:var(--radius-xs);
     transition:background-color var(--duration-standard) var(--ease-standard),
                border-color var(--duration-standard) var(--ease-standard),
                color var(--duration-standard) var(--ease-standard)}
.solid{background:var(--gold-500);color:var(--ink)}
.solid:hover{background:var(--gold-600)}
.ghost{border:1px solid var(--dark-border-strong);color:var(--dark-text-primary)}
.ghost:hover{border-color:var(--gold-600);color:var(--gold-300)}
.btn:active{transform:translateY(1px)}

/* Entrance. Opacity plus a 16px lift, staggered 60ms - the package's own
   numbers. This is the animation, now that the hero itself is a still. */
/* Default is VISIBLE. The hidden state is only applied once the inline
   head script proves JS is running, so a blocked or failed script leaves a
   complete, readable hero rather than an empty one. */
html.js .rise{opacity:0;transform:translateY(16px)}
html.js body.ready .rise{opacity:1;transform:translateY(0);
  transition:opacity var(--duration-large) var(--ease-standard),
             transform var(--duration-large) var(--ease-standard)}
html.js body.ready .d1{transition-delay:60ms}
html.js body.ready .d2{transition-delay:120ms}
html.js body.ready .d3{transition-delay:180ms}
html.js body.ready .d4{transition-delay:240ms}
html.js body.ready .d5{transition-delay:300ms}
html.js .rule.rise{transform:translateY(16px) scaleX(0);transform-origin:left center}
html.js body.ready .rule.rise{transform:translateY(0) scaleX(1)}

/* ══ SECTIONS ══════════════════════════════════════════════════════════ */
.sec{padding-block:var(--space-10)}
.eyebrow{font:var(--text-label);letter-spacing:var(--tracking-label);
         text-transform:uppercase;color:var(--gold-400);margin-bottom:var(--space-4)}
.sec h2{font-family:var(--font-display);font-weight:600;
        font-size:clamp(31px,4.2vw,49px);line-height:1.1;
        letter-spacing:var(--tracking-display);margin-bottom:var(--space-5);
        text-wrap:balance;max-width:22ch}
.lede{font:var(--text-lead);color:var(--dark-text-secondary);max-width:64ch;
      margin-bottom:var(--space-8)}

/* ── Problem beside solution. The whole point is the pairing, so the two
      columns are locked to the same rows and the divider sits between
      them rather than under a heading. ── */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:0;
    border-top:1px solid var(--dark-border-hairline)}
.ps-head{padding:var(--space-5) var(--space-6);font:var(--text-label);
         letter-spacing:var(--tracking-label);text-transform:uppercase;
         border-bottom:1px solid var(--dark-border-hairline)}
.ps-head.a{color:var(--dark-text-secondary)}
.ps-head.b{color:var(--gold-400);border-left:1px solid var(--dark-border-hairline)}
.ps-row{display:contents}
.ps-cell{padding:var(--space-6);border-bottom:1px solid var(--dark-border-hairline)}
.ps-cell.b{border-left:1px solid var(--dark-border-hairline)}
.ps-cell h3{font-family:var(--font-display);font-weight:500;font-size:19px;
            line-height:1.32;margin-bottom:var(--space-3)}
.ps-cell.a h3{color:var(--dark-text-primary)}
.ps-cell.b h3{color:var(--gold-300)}
.ps-cell p{font:var(--text-small);color:var(--dark-text-secondary);line-height:1.75}
.ps-cell.a{background:transparent}
/* One gold-leaning column, so the eye knows which side is the answer. */
.ps-cell.b{background:rgba(201,185,154,0.028)}

/* ── About. Capability, not headcount. ── */
.about{border-top:1px solid var(--dark-border-hairline)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
            gap:var(--space-9);align-items:start}
.about-body p{color:var(--dark-text-secondary);margin-bottom:var(--space-4);max-width:62ch}
.about-body p:first-of-type{font:var(--text-lead);color:var(--dark-text-primary)}
.roles{display:grid;gap:var(--space-3)}
.role{padding:var(--space-5);border:1px solid var(--dark-border-hairline);
      border-radius:var(--radius-md);
      transition:border-color var(--duration-standard) var(--ease-standard)}
.role:hover{border-color:var(--dark-border-strong)}
.role h3{font-family:var(--font-display);font-weight:500;font-size:17px;
         margin-bottom:var(--space-2)}
.role p{font:var(--text-small);color:var(--dark-text-secondary);line-height:1.7}
.role .who{display:block;font:var(--text-label);letter-spacing:var(--tracking-label);
           text-transform:uppercase;color:var(--gold-400);margin-bottom:var(--space-2)}
.note{margin-top:var(--space-6);padding:var(--space-4) var(--space-5);
      border-left:2px solid var(--gold-700);font:var(--text-small);
      color:var(--dark-text-secondary);line-height:1.7}

@media (max-width:820px){
  .ps{grid-template-columns:1fr}
  .ps-head.b,.ps-cell.b{border-left:0}
  .ps-head.a{border-bottom:0;padding-bottom:0}
  .about-grid{grid-template-columns:1fr;gap:var(--space-7)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg img{animation:none}
  *{transition-duration:1ms!important}
}