/* ==========================================================================
   Alumni Media Group — design correction pass
   Premium industrial editorial. Operator-led holding company.
   NOT a SaaS template, NOT a component kit.

   TYPE   Archivo 500-650      display / headings
          IBM Plex Sans 400-600 body
          IBM Plex Mono 500     labels
   COLOR  #080808 black · #111111 charcoal · #F2EFE8 ivory
          #D9D4CA stone · #B38A52 gold (sparing) · #8C8983 gray
   RULES  square corners · thin structural rules · no cards · no shadows
          no gradients · asymmetry · open whitespace · very large type
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

:root{
  --black:#080808;
  --charcoal:#111111;
  --ivory:#F2EFE8;
  --stone:#D9D4CA;
  --gold:#B38A52;
  --gray:#8C8983;

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Consolas,monospace;

  --line-dark:rgba(255,255,255,.16);
  --line-light:rgba(8,8,8,.14);
  --wrap:1560px;
  --gut:clamp(24px,4vw,60px);
}

body{
  background:var(--black);
  color:#fff;
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:200;background:var(--gold);color:#000;padding:10px 16px}

.container{width:min(var(--wrap),calc(100% - (var(--gut) * 2)));margin-inline:auto}

/* display type — Archivo, tight, never italic, never serif */
.hero-title,.section-title,.cap-intro h2,.cta-band h2,.stat strong,
.operating-item h3,.company-card h3,.page-hero h1,.company-hero-copy h1,
.portfolio-entry h2,.big-index h3,.cap-item h3{
  font-family:var(--display);
  font-weight:560;
  font-style:normal;
  letter-spacing:-.04em;
}
.gold{color:var(--gold);font-style:normal}

/* labels — mono, small, quiet */
.eyebrow,.footer-label,.stat span,.company-card p,.op-num,
.portfolio-entry .topline,.register-list span{
  font-family:var(--mono);
  font-weight:500;
  text-transform:uppercase;
}
.eyebrow{font-size:11px;letter-spacing:.1em;color:var(--gray)}
.eyebrow.dark{color:var(--gray)}

/* links — gold only on hover / accents */
.rule-link{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding-bottom:9px;position:relative;
}
.rule-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-dark)}
.rule-link::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:1}
.rule-link:hover{color:var(--gold)}
.rule-link:hover::before{transform:scaleX(1)}
.rule-link span{transition:transform .3s ease}
.rule-link:hover span{transform:translateX(4px)}
.operating .rule-link,.capabilities .rule-link,.stats .rule-link,
.internal-section:not(.dark) .rule-link,.contact-hero .rule-link{color:var(--black)}
.operating .rule-link::after,.capabilities .rule-link::after,
.internal-section:not(.dark) .rule-link::after,.contact-hero .rule-link::after{background:var(--line-light)}

/* square, transparent, 1px gold border */
.outline-btn,.nav-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:36px;
  border:1px solid var(--gold);background:transparent;color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:16px 20px;border-radius:0;
  transition:background .25s ease,color .25s ease;
}
.outline-btn:hover,.nav-cta:hover{background:var(--gold);color:var(--black)}
.outline-btn span,.nav-cta span{color:var(--gold);transition:transform .3s ease,color .25s ease}
.outline-btn:hover span,.nav-cta:hover span{color:var(--black);transform:translateX(4px)}

/* ---------- 5. HEADER — 78px, architectural, quiet ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--black);border-bottom:1px solid var(--line-dark)}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:40px;height:78px}
.brand img{width:210px}
.brand-fallback{display:none;font-family:var(--display);font-size:20px;letter-spacing:.12em}
.site-nav{display:flex;align-items:center;gap:40px}
.site-nav>a:not(.nav-cta){
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
  transition:color .25s ease;
}
.site-nav>a:not(.nav-cta):hover{color:var(--gold)}
.nav-cta{gap:22px;padding:12px 18px;font-size:12px;letter-spacing:.08em}
.nav-toggle{display:none}

/* ==========================================================================
   HERO — full-bleed photograph, type set ON the image, monogram over the shot.
   Scale is the whole idea: three lines, each a different WIDTH on Archivo's
   wdth axis (92 -> 104 -> 118) and each larger than the last, so the block
   physically widens as it reads and the payoff line lands like a stamp.
   The payoff sits in a solid black band that crosses the photograph — a hard
   edge, not a gradient scrim.
   ========================================================================== */
.hero{position:relative;background:var(--black);overflow:hidden;isolation:isolate}

.hero-stage{
  position:absolute;top:0;bottom:0;right:0;left:auto;z-index:0;
  /* feathers the photograph's left edge into the black panel — this is the
     seam in the reference, and a mask does it without a visible gradient band */
  width:53%;
}

.hero-shot{
  /* img or <video> — video defaults to inline, which leaves a baseline gap */
  display:block;
  width:100%;height:100%;object-fit:cover;object-position:58% 48%;
  filter:saturate(.28) sepia(.24) contrast(1.30) brightness(.32);
}

/* the photograph is darkened further on the right so the mark has something
   to sit against, without a gradient across the whole image */
/* Grain ON TOP of the footage. The source is 1280x720 at ~1.05 Mbps and this
   panel crops it to ~40% of frame width then upscales it, while .hero-shot
   applies contrast(1.38) — which stretches precisely the shadow range where
   H.264 keeps its coarsest blocking. Fine grain over the top breaks up those
   block edges the way it does on graded film. It hides artifacts; it cannot
   add detail — for that the source has to be bigger than 720p. */
.hero-stage::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--n-fine),var(--n-tooth);
  background-size:140px 140px,320px 320px;
  mix-blend-mode:overlay;
  opacity:.34;
}
.hero-stage::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,.12) 30%,rgba(8,8,8,0) 60%);
  pointer-events:none;
}

.hero-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(660px,84vh,880px);
  padding:120px 0 132px;

}
.hero-inner .eyebrow{display:flex;align-items:center;gap:16px;color:var(--gold);letter-spacing:.24em}
.hero-inner .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex:none}

/* three lines, three widths, three sizes — the block widens as it reads */
.hero-title{display:block;margin:30px 0 0;line-height:1.06;letter-spacing:-.02em}
.hero-title span{display:block;font-family:var(--display);color:#fff}
.hero-title .l1,.hero-title .l2{
  text-transform:uppercase;
  font-weight:400;font-variation-settings:'wdth' 100;
  font-size:clamp(24px,3.6vw,72px);
  letter-spacing:.012em;line-height:1.1;
  color:#fff;
}
.hero-title .l3{
  display:block;
  margin-top:.05em;
  text-transform:uppercase;
  white-space:nowrap;          /* the payoff must never wrap */
  font-weight:800;font-variation-settings:'wdth' 100;
  font-size:clamp(40px,9.7vw,190px);
  letter-spacing:-.042em;
  color:var(--gold);
}
.hero-lede{
  max-width:46ch;margin-top:38px;
  font-size:17px;line-height:1.62;color:var(--stone);
}
.hero-btn{align-self:flex-start;margin-top:44px;min-width:min(336px,100%);gap:64px;padding:17px 22px}

/* rail flush to the bottom edge of the stage */
.hero-rail{
  position:relative;z-index:1;
  border-top:1px solid var(--line-dark);
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(2px);
}
.hero-rail-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 34px;
  padding:18px 0;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray);
}
.hero-rail-inner span{display:flex;align-items:center}
.hero-rail-inner span + span::before{content:"";width:3px;height:3px;background:var(--gold);margin-right:34px;flex:none}
.hero-rail .rail-count{margin-left:auto;color:var(--stone)}

/* ---------- 6. STATS — 120-140px, no cards, no icons ---------- */
.stats{background:var(--ivory);color:var(--black)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:132px;align-items:center}
.stat{text-align:center;padding:0 20px;border-right:1px solid var(--line-light)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-size:clamp(44px,3.4vw,52px);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.stat span{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.12em;color:var(--gray)}

/* ---------- 7. OPERATORS — 30 / 70, numbered, rules, lots of air ---------- */
.operating{background:var(--ivory);color:var(--black);padding:150px 0}
.operating-grid{display:grid;grid-template-columns:30% 70%}
.operating-intro{padding-right:80px}
.operating-intro .section-title{font-size:clamp(38px,3.2vw,52px);line-height:1.02;margin:22px 0 26px}
.operating-intro p{color:var(--gray);font-size:16px;line-height:1.75;max-width:34ch;margin-bottom:34px}
.operating-items{display:grid;grid-template-columns:repeat(3,1fr)}
.operating-item{padding:0 40px;border-left:1px solid var(--line-light)}
.operating-item:last-child{padding-right:0}
.op-num{display:block;font-size:11px;letter-spacing:.12em;color:var(--gold);margin-bottom:34px}
.operating-item h3{font-size:26px;line-height:1.12;margin-bottom:18px;max-width:12ch}
.operating-item p{color:var(--gray);font-size:15px;line-height:1.75;max-width:34ch}
.operating-item .icon{display:none}

/* ---------- 8. THE REGISTER — editorial portfolio, varied spans ---------- */
.register{background:var(--black);color:#fff;padding:150px 0}
.register-head{display:grid;grid-template-columns:30% 70%;align-items:end;margin-bottom:56px}
.register-head .section-title{font-size:clamp(38px,3.2vw,52px);line-height:1.02;margin-top:20px}
.register-head p{color:var(--gray);font-size:16px;line-height:1.75;max-width:46ch;padding-left:40px}
.company-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.company-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line-dark);border-radius:0;
  background:var(--charcoal);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;min-height:210px;
  transition:border-color .3s ease;
}
.company-card:hover{border-color:var(--gold)}
/* the two leads run wide and carry authentic photography behind the mark */
.company-card:nth-child(1){grid-column:span 7;min-height:340px}
.company-card:nth-child(2){grid-column:span 5;min-height:340px}
.company-card:nth-child(3),.company-card:nth-child(4),
.company-card:nth-child(5),.company-card:nth-child(6){grid-column:span 3;min-height:215px}
.card-media{position:absolute;inset:0;z-index:0}
.card-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.44) saturate(.66) contrast(1.08);transition:filter .4s ease,transform .6s ease}
.company-card:hover .card-media img{filter:brightness(.54) saturate(.76) contrast(1.08);transform:scale(1.02)}
.company-logo{position:relative;z-index:1;height:56px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:auto;font-family:var(--display);font-size:19px;color:#fff}
.company-logo img{max-width:200px;object-fit:contain;object-position:left center}
.company-logo:has(img) span{display:none}
.company-card .meta{position:relative;z-index:1;padding-top:20px;border-top:1px solid var(--line-dark)}
.company-card h3{font-size:19px;font-weight:560;letter-spacing:-.03em;margin-bottom:5px}
.company-card p{margin:0;font-size:10.5px;letter-spacing:.09em;color:var(--gray);line-height:1.5}
/* secondary index rail */
.register-list{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:3px}
.register-list li{border:1px solid var(--line-dark);padding:20px;transition:border-color .3s ease}
.rail-logo{display:flex;align-items:center;margin-bottom:16px}
.rail-logo img{object-fit:contain;object-position:left center}
.register-list li:hover{border-color:var(--gold)}
.register-list strong{display:block;font-family:var(--display);font-size:15px;font-weight:560;letter-spacing:-.02em;color:#fff;margin-bottom:5px}
.register-list span{font-size:10px;letter-spacing:.09em;color:var(--gray)}
.register-more{margin-top:36px;display:flex;justify-content:flex-end}

/* ---------- 9. CAPABILITIES — open, dividers, type over icons ---------- */
.capabilities{background:var(--ivory);color:var(--black);padding:150px 0}
.cap-head{display:grid;grid-template-columns:30% 70%;align-items:end;margin-bottom:56px}
.cap-head h2{font-size:clamp(38px,3.2vw,52px);line-height:1.02;margin-top:20px}
.cap-head p{color:var(--gray);font-size:16px;line-height:1.75;max-width:46ch;padding-left:40px}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cap-item{padding:0 40px;border-left:1px solid var(--line-light)}
.cap-item:first-child{padding-left:0;border-left:0}
.cap-item .icon{display:none}
.cap-item svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.cap-item h3{font-size:21px;line-height:1.15;margin-bottom:16px}
.cap-item p{color:var(--gray);font-size:15px;line-height:1.75}
.cap-intro{display:none}

/* ---------- 10. FINAL CTA — photographic, 300-380px, text left / CTA right ---------- */
.cta-band{position:relative;background:var(--black);overflow:hidden;border-top:1px solid var(--line-dark)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.6) contrast(1.1)}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;min-height:340px;padding:60px 0}
.cta-band h2{font-size:clamp(44px,4.4vw,68px);line-height:.94;letter-spacing:-.045em;margin-bottom:22px}
.cta-band p{color:var(--stone);max-width:52ch;font-size:16px;line-height:1.7}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--black);border-top:1px solid var(--line-dark);padding:90px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px}
.footer-logo{margin-bottom:26px}
.footer-logo img{width:180px}
.footer-brand p,.footer-brand>a{color:var(--gray);font-size:14px}
.footer-brand>a:hover{color:var(--gold)}
.footer-social{display:flex;gap:16px;margin-top:26px}
.footer-social a{width:17px;height:17px;color:var(--gray)}
.footer-social svg{width:100%;height:100%;fill:currentColor}
.footer-social a:hover{color:var(--gold)}
.footer-label{font-size:10px;letter-spacing:.12em;color:var(--gray);margin-bottom:24px!important}
.site-footer li{margin:12px 0}
.site-footer li a{color:var(--stone);font-size:14px;transition:color .25s ease}
.site-footer li a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:90px;padding-top:24px;border-top:1px solid var(--line-dark);color:var(--gray);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- internal pages ---------- */
.page-hero{background:var(--black);padding:120px 0;border-bottom:1px solid var(--line-dark)}
.page-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.page-hero h1{font-size:clamp(52px,5.4vw,88px);line-height:.92;letter-spacing:-.05em;margin:20px 0 0}
.page-hero .lede{color:var(--stone);font-size:17px;line-height:1.65;max-width:52ch}
.internal-section{padding:140px 0;background:var(--ivory);color:var(--black)}
.internal-section.dark{background:var(--black);color:#fff}
.split-head{display:grid;grid-template-columns:30% 70%;gap:0;margin-bottom:56px;align-items:end}
.split-head p{margin:0;max-width:56ch;color:var(--gray);font-size:16px;line-height:1.75;padding-left:40px}
.dark .split-head p{color:var(--gray)}
.big-index{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
.big-index article{padding:44px 40px 60px 0;border-right:1px solid var(--line-light)}
.big-index article+article{padding-left:40px}
.big-index article:last-child{border-right:0}
.big-index .num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--gold)}
.big-index h3{font-size:28px;line-height:1.1;margin:40px 0 16px}
.big-index p{color:var(--gray);font-size:15px;line-height:1.75}
.portfolio-tools{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-light);padding-bottom:18px;margin-bottom:48px}
.filter-group{display:flex;gap:26px;flex-wrap:wrap}
.filter-btn{border:0;background:none;padding:0 0 6px;border-bottom:1px solid transparent;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;color:var(--gray)}
.filter-btn:hover,.filter-btn.is-active{border-color:var(--gold);color:var(--gold)}
.portfolio-list{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}








.sector-hidden{display:none!important}
.company-hero{background:var(--black)}
.company-hero-grid{display:grid;grid-template-columns:47% 53%;min-height:620px}
.company-hero-copy{padding:110px 72px 110px max(var(--gut),calc((100vw - var(--wrap))/2));display:flex;flex-direction:column;justify-content:center}
.company-hero-copy h1{font-size:clamp(46px,4.6vw,76px);line-height:.94;letter-spacing:-.05em;margin:26px 0 24px}
.company-hero-copy .lead{color:var(--stone);font-size:17px;line-height:1.65;max-width:46ch}
.company-hero-copy .company-logo{height:58px;margin-bottom:0}
.company-hero-copy .company-logo img{max-width:220px}
.company-visual{min-height:620px;background:var(--charcoal);position:relative;overflow:hidden}
.company-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.54) sepia(.18) contrast(1.12) brightness(.86)}
.company-visual.no-media{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line-dark)}
.company-hero-grid>*{min-width:0}
.contact-hero{background:var(--ivory);color:var(--black);padding:120px 0 80px}
.contact-grid{display:grid;grid-template-columns:30% 70%;gap:0;border-top:1px solid var(--line-light);padding-top:48px}
.contact-details{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-light)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;padding-left:40px}
.contact-form .field{min-width:0}
.contact-form .field input,.contact-form .field textarea{width:100%;min-width:0}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px;color:var(--gray)}
.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(8,8,8,.24);border-radius:0;padding:11px 2px;outline:none;font-family:var(--body);font-size:16px;color:var(--black)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.submit-btn{grid-column:1/-1;justify-self:start}
.success{border:1px solid var(--gold);color:#6b5528;padding:14px 18px;margin-bottom:24px;font-size:14px}

/* ---------- 11. restrained motion ---------- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE  (desktop is the priority; these keep smaller widths sane)
   ========================================================================== */
@media(max-width:1280px){
  .register-head,.cap-head,.split-head,.operating-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .register-head p,.cap-head p,.split-head p,.contact-form{padding-left:0}
  .operating-intro{padding-right:0}
  .operating-item:first-child{padding-left:0;border-left:0}
  .register-list{grid-template-columns:repeat(3,1fr)}
  .company-card:nth-child(1),.company-card:nth-child(2){grid-column:span 6}
  .company-card:nth-child(3),.company-card:nth-child(4),
  .company-card:nth-child(5),.company-card:nth-child(6){grid-column:span 6}
}
@media(max-width:1024px){
  .company-card:nth-child(n){grid-column:span 6;min-height:240px}
  .operating-items,.cap-grid{grid-template-columns:1fr 1fr}
  .cap-item:nth-child(odd){padding-left:0;border-left:0}
  .cap-item{padding-bottom:36px}
  .company-hero-grid{grid-template-columns:1fr}
  .company-hero-copy{padding:80px var(--gut)}
  .company-visual{min-height:360px}
  .portfolio-list{grid-template-columns:repeat(2,1fr)}
  .page-hero-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:767px){
  .nav-shell{height:70px}
  .brand img{width:150px}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px 0}
  .nav-toggle span{display:block;width:22px;height:1px;background:#fff;transition:transform .3s ease}
  .site-header.is-open .nav-toggle span:first-child{transform:translateY(3px) rotate(45deg)}
  .site-header.is-open .nav-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .site-nav{position:absolute;left:0;right:0;top:70px;flex-direction:column;align-items:stretch;gap:0;background:var(--charcoal);border-top:1px solid var(--line-dark);padding:8px 24px 24px;display:none}
  .site-header.is-open .site-nav{display:flex}
  .site-nav>a{padding:14px 0}
  .nav-cta{justify-content:center;margin-top:12px}
  .stats-grid{grid-template-columns:1fr 1fr;min-height:0;padding:32px 0;row-gap:28px}
  .stat:nth-child(2n){border-right:0}
  .operating,.capabilities,.register,.internal-section{padding:88px 0}
  .operating-items,.cap-grid,.company-grid,.portfolio-list,.register-list{grid-template-columns:1fr}
  .operating-item,.cap-item{padding:0 0 32px;border-left:0}
  .company-card:nth-child(n){grid-column:span 12}
  .cta-grid{grid-template-columns:1fr;gap:32px;min-height:0;padding:72px 0}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .footer-bottom{flex-direction:column;margin-top:56px}
  .outline-btn{width:100%}
  .contact-form{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .media-tile img,.card-media img,.rule-link span,.outline-btn span{transition:none}
}

/* ==========================================================================
   INTERNAL PAGE SECTIONS
   These classes exist in the company / approach / contact templates and were
   left unstyled by the design-correction rewrite. Same system: square corners,
   thin structural rules, Archivo display, gold only as an accent.
   ========================================================================== */

/* ---------- company: facts strip ---------- */
.company-facts{background:var(--charcoal);border-bottom:1px solid var(--line-dark)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:44px 40px 44px 0;border-left:1px solid var(--line-dark);padding-left:40px}
.fact:first-child{border-left:0;padding-left:0}
.fact strong{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fact span,.fact p{display:block;font-family:var(--display);font-weight:560;font-size:20px;line-height:1.25;letter-spacing:-.02em;color:#fff}

/* ---------- company: story ---------- */
.company-story{background:var(--black);padding:130px 0}
.story-grid{display:grid;grid-template-columns:30% 70%;gap:0;align-items:start}
.story-copy{padding-left:40px}
.story-copy p{color:var(--stone);font-size:17px;line-height:1.75;margin-bottom:22px;max-width:62ch}
.story-copy p:last-child{margin-bottom:0}
.value-lines{margin-top:44px;border-top:1px solid var(--line-dark)}
.value-line{display:grid;grid-template-columns:minmax(180px,22%) 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.value-line strong{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.value-line span,.value-line p{color:var(--stone);font-size:15px;line-height:1.7;margin:0}

/* ---------- company: related + back ---------- */
.related{background:var(--charcoal);padding:120px 0;border-top:1px solid var(--line-dark)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.related-card{border:1px solid var(--line-dark);padding:28px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s ease}
.related-card:hover{border-color:var(--gold)}
.related-card .company-logo{height:46px;margin-bottom:0}
.related-card .company-logo img{max-width:150px}
.related-card strong{display:block;font-family:var(--display);font-weight:560;font-size:17px;letter-spacing:-.02em;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-dark)}
.related-card span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.back-register{margin-top:44px;display:flex;justify-content:flex-end}

/* text-only marks keep the same optical weight as a logo */
.text-logo{font-family:var(--display);font-weight:560;letter-spacing:-.02em}
.company-logo.text-logo span{visibility:visible!important;display:inline!important}

/* ---------- approach page ---------- */
.approach-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
.approach-step{padding:44px 40px 60px 0;border-right:1px solid var(--line-light)}
.approach-step+.approach-step{padding-left:40px}
.approach-step:last-child{border-right:0}
.approach-label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:36px}
.approach-step h3{font-family:var(--display);font-weight:560;font-size:26px;line-height:1.12;letter-spacing:-.03em;margin-bottom:16px}
.approach-step p{color:var(--gray);font-size:15px;line-height:1.75}
.approach-rail{margin-top:56px;display:flex;justify-content:flex-end}
.dark .approach-steps{border-color:var(--line-dark)}
.dark .approach-step{border-color:var(--line-dark)}
.dark .approach-step p{color:var(--stone)}

/* ---------- criteria (approach) ---------- */
.criteria{padding:130px 0}
.criteria-grid{display:grid;grid-template-columns:30% 70%;gap:0}
.criteria-list{padding-left:40px;border-top:1px solid var(--line-light)}
.dark .criteria-list{border-color:var(--line-dark)}
.criteria-row{display:grid;grid-template-columns:minmax(160px,24%) 1fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--line-light)}
.dark .criteria-row{border-color:var(--line-dark)}
.criteria-row strong{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.criteria-row p,.criteria-row span{margin:0;color:var(--gray);font-size:15px;line-height:1.7}
.dark .criteria-row p,.dark .criteria-row span{color:var(--stone)}

/* ---------- contact page ---------- */
.contact-intro p{color:var(--gray);font-size:16px;line-height:1.75;max-width:44ch;margin-bottom:22px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta-action{display:flex}

/* ---------- filter state ---------- */
.filter-btn.active{border-color:var(--gold);color:var(--gold)}

@media(max-width:1024px){
  .facts-grid,.related-grid,.approach-steps{grid-template-columns:1fr}
  .fact{border-left:0;padding:28px 0}
  .approach-step{border-right:0;padding:32px 0;border-bottom:1px solid var(--line-light)}
  .approach-step+.approach-step{padding-left:0}
  .story-grid,.criteria-grid{grid-template-columns:1fr;gap:28px}
  .story-copy,.criteria-list{padding-left:0}
  .value-line,.criteria-row{grid-template-columns:1fr;gap:8px}
}


/* ---------- hero responsive ---------- */
@media(max-width:1024px){
  
  .hero-inner{min-height:0;padding:96px 0 108px}
  .hero-title .l3{font-size:clamp(46px,8.4vw,86px)}
}
@media(max-width:767px){
  .hero-inner{padding:72px 0 84px}
  .hero-title .l1{font-size:clamp(24px,6.4vw,34px)}
  .hero-title .l2{font-size:clamp(32px,8.6vw,46px)}
  .hero-title .l3{font-size:clamp(38px,11vw,56px);font-variation-settings:'wdth' 108}
  .hero-lede{font-size:16px;max-width:none}
  .hero-btn{width:100%;min-width:0;gap:24px}
  
  .hero-rail-inner{gap:0 18px;font-size:9px;letter-spacing:.1em}
  .hero-rail-inner span + span::before{margin-right:18px}
  .hero-rail .rail-count{margin-left:0;width:100%;margin-top:8px}
}

/* ---------- hero credit: the logo of the company in the photograph ---------- */
.hero-credit{
  position:absolute;right:3.4vw;bottom:92px;z-index:2;
  margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  text-align:right;
}
.hero-credit img{
  width:clamp(150px,17vw,232px);height:auto;
  opacity:.46;
  /* screen keeps the white line-work bright and drops the seal's dark areas out,
     so the barrels read THROUGH the mark instead of behind a pasted-on badge. */
  mix-blend-mode:screen;
  /* the mask dissolves the seal's lower edge into the photograph */
  -webkit-mask-image:linear-gradient(200deg,#000 46%,rgba(0,0,0,.28) 88%);
  mask-image:linear-gradient(200deg,#000 46%,rgba(0,0,0,.28) 88%);
}
.hero-credit figcaption{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
  opacity:.8;
}
/* trio variant: three portfolio marks share the credit slot; each mark is
   narrower than the old single seal so the row stays inside the same footprint. */
.hero-credit-marks{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.hero-credit-trio .hero-credit-marks img{
  width:clamp(64px,7vw,104px);height:auto;
  opacity:.46;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(200deg,#000 46%,rgba(0,0,0,.28) 88%);
  mask-image:linear-gradient(200deg,#000 46%,rgba(0,0,0,.28) 88%);
}
@media(max-width:1024px){.hero-credit{bottom:88px;right:var(--gut)}}
@media(max-width:767px){
  /* The hero flips to column-reverse at <=1024, so the footage moves to the
     BOTTOM of the section and this credit landed between the rail and the
     headline - a 150px company mark floating above the H1 with nothing to
     credit, reading like the site belonged to Apex. Drop the mark on phones
     and send the caption down past the video (order:-1 is LAST in a
     column-reverse flow), where it works as a credit line again. */
  .hero-credit{position:static;align-items:flex-start;text-align:left;
    order:-1;margin:0;padding:14px var(--gut) 0}
  .hero-credit img{display:none}
}


/* ==========================================================================
   PINSTRIPING — continuous hairline rails framing the content column.
   Scrolls with the page (no fixed overlay), so it can never intercept a click.
   Rail colour flips with the section's ground via --rail.
   ========================================================================== */
:root{--rail:rgba(8,8,8,.13)}
.dark,.hero,.cta-band,.site-footer{--rail:rgba(255,255,255,.13)}

section > .container{position:relative}
section > .container::before,
section > .container::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:var(--rail);pointer-events:none;
}
section > .container::before{left:calc(var(--gut) / -2)}
section > .container::after {right:calc(var(--gut) / -2)}

/* horizontal pinstripe between stacked sections on the same ground */
section + section{border-top:1px solid var(--rail)}
.hero + section,.dark + section:not(.dark),section:not(.dark) + .dark{border-top:0}

@media(max-width:767px){
  section > .container::before,section > .container::after{display:none}
}

/* ==========================================================================
   PORTFOLIO CARDS — these classes existed in the markup with NO rules at all,
   which is why every mark floated loose on the ivory and the white logos
   (Trinity, Fulfillment X) were invisible. Every mark now sits on a dark
   plate, at a normalised size, in an equal-height cell.
   ========================================================================== */
.portfolio-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line-light);
  border-left:1px solid var(--line-light);
}
.portfolio-entry{
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  transition:background .35s ease;
}
.portfolio-entry:hover{background:rgba(8,8,8,.03)}

.pf-plate{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;                 /* locks every card to the same height */
  background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;
  padding:34px;
}
.pf-photo{position:absolute;inset:0}
.pf-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.42) sepia(.16) contrast(1.12) brightness(.44);
  transition:filter .5s ease,transform .7s ease;
}
.portfolio-entry:hover .pf-photo img{filter:saturate(.5) sepia(.12) contrast(1.14) brightness(.54);transform:scale(1.03)}

/* capped on BOTH axes so a wide wordmark and a round seal carry similar ink */
.pf-mark{
  position:relative;z-index:1;
  max-height:60px;max-width:64%;width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
.pf-wordmark{
  position:relative;z-index:1;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,1.6vw,26px);letter-spacing:-.02em;color:#fff;
}
.pf-meta{
  flex:1;display:flex;flex-direction:column;gap:5px;
  padding:24px 26px 28px;
}
.pf-meta p{font-size:14px;color:var(--gray);line-height:1.45}
.pf-loc{
  margin-top:auto;padding-top:12px;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gray);
}
@media(max-width:1024px){.portfolio-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .portfolio-list{grid-template-columns:1fr}
  .pf-plate{aspect-ratio:16/9;padding:28px}
}



body{background-color:var(--ivory)}



/* ==========================================================================
   FOOTER — "the editorial masthead"
   A CTA band sits directly above it on every page, so this footer CLOSES
   (brand · register · contact · proof) rather than repeating the ask.
   Contact lives in its OWN full-width bar, never stacked into the brand rail —
   stacking it there runs the rail hundreds of px past the link columns and
   empties the right half of the footer.
   ========================================================================== */
.site-footer{padding:0;overflow:hidden}

.footer-masthead{
  display:grid;grid-template-columns:1.5fr .7fr 1.5fr;gap:64px;
  padding:96px 0 72px;align-items:start;
}
.fm-brand .footer-logo img{width:250px;margin-bottom:26px}
.fm-line{
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,1.5vw,24px);letter-spacing:-.02em;line-height:1.25;
  color:#fff;max-width:19ch;
}
.fm-blurb{margin-top:16px;font-size:14px;line-height:1.65;color:var(--gray);max-width:46ch}

.footer-label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-dark);
}
.fm-col ul{display:flex;flex-direction:column;gap:11px}
.fm-col .fm-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 32px}
.fm-col a{
  font-size:14px;color:var(--stone);
  /* underline wipes in from the left via background-size — no layout cost,
     so nothing shifts under the cursor */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .32s ease,color .32s ease;
}
.fm-col a:hover{color:#fff;background-size:100% 1px}
.fm-all{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.fm-all span{transition:transform .3s ease}
.fm-all:hover span{transform:translateX(5px)}

.fm-contact{
  display:flex;justify-content:space-between;gap:40px;
  padding:34px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.fm-contact dl{display:flex;gap:clamp(40px,7vw,110px);margin:0;flex-wrap:wrap}
.fm-contact dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gray);margin-bottom:9px;
}
.fm-contact dd{margin:0;font-size:16px;color:#fff}
.fm-contact dd a{color:#fff}
.fm-contact dd a:hover{color:var(--gold)}

.fm-proof{
  display:flex;flex-wrap:wrap;gap:14px clamp(24px,4vw,52px);
  padding:26px 0 34px;
}
.fm-proof span{
  display:inline-flex;align-items:baseline;gap:8px;
  font-size:12.5px;color:var(--gray);
}
.fm-proof span + span{padding-left:clamp(24px,4vw,52px);border-left:1px solid var(--line-dark)}
.fm-proof b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--gold)}

.fm-foot{position:relative;padding-top:26px}
.fm-watermark{
  position:absolute;left:0;right:0;bottom:-.30em;
  font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 92;
  font-size:8.92vw;line-height:.82;letter-spacing:-.045em;
  text-align:center;white-space:nowrap;
  color:rgba(255,255,255,.045);
  pointer-events:none;user-select:none;
}
.fm-legal{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 0 30px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);
}
.fm-credit a{color:var(--stone)}
.fm-credit a:hover{color:var(--gold)}
.fm-top{display:inline-flex;align-items:center;gap:8px;color:var(--stone)}
.fm-top:hover{color:var(--gold)}
.fm-top span{transition:transform .3s ease}
.fm-top:hover span{transform:translateY(-4px)}

@media(max-width:1024px){
  .footer-masthead{grid-template-columns:1fr 1fr;gap:48px;padding:72px 0 56px}
  .fm-brand{grid-column:1 / -1}
}
@media(max-width:767px){
  .footer-masthead{grid-template-columns:1fr;gap:40px}
  .fm-split{grid-template-columns:1fr}
  .fm-contact dl{gap:26px;flex-direction:column}
  .fm-proof span + span{padding-left:0;border-left:0}
  .fm-watermark{font-size:15vw}
  .fm-legal{flex-direction:column;align-items:flex-start;gap:14px}
  .fm-col a,.fm-top,.fm-all{min-height:36px;display:inline-flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  .fm-col a,.fm-all span,.fm-top span{transition:none}
}
.fm-col a:focus-visible,.fm-all:focus-visible,.fm-top:focus-visible,
.fm-contact a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* ---------- hero: the stepped gold rule under the headline ---------------- */
.hero-rule{
  position:relative;height:1px;margin:30px 0 26px;
  width:min(560px,42%);
  background:linear-gradient(90deg,var(--gold) 0%,rgba(179,138,82,.10) 100%);
}
.hero-rule::before{
  content:"";position:absolute;left:0;top:-5px;
  width:104px;height:1px;background:var(--gold);
}
.hero-lede b{color:var(--gold);font-weight:600}
.hero-btn{letter-spacing:.2em;border-color:rgba(179,138,82,.55);color:var(--gold)}
.hero-btn:hover{border-color:var(--gold);background:rgba(179,138,82,.09)}

@media(max-width:1024px){
  .hero-stage{width:100%;-webkit-mask-image:none;mask-image:none}
  .hero-inner{max-width:none}
}


/* ---------- hero: 2x2 quad of real photography on the right panel ---------
   Four DIFFERENT companies across three sectors. The gutters let the black
   ground through, so the grid reads as one object rather than four cards. */
.hero-quad{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:3px;width:100%;height:100%;background:var(--black);
}
.hero-quad img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.34) sepia(.20) contrast(1.20) brightness(.46);
}
.hero-quad img:nth-child(1){object-position:50% 45%}
.hero-quad img:nth-child(2){object-position:50% 55%}
.hero-quad img:nth-child(3){object-position:50% 50%}
.hero-quad img:nth-child(4){object-position:58% 48%}

@media(max-width:1024px){
  .hero-stage{position:relative;width:100%;height:clamp(280px,42vh,420px)}
  .hero{display:flex;flex-direction:column-reverse}
}

.hero-lede{max-width:44ch}
.hero-inner .eyebrow,.hero-btn{align-self:flex-start}

/* Companies with no photography of their own get their OWN mark as an oversized
   ground texture. Real brand asset, visually consistent with the photo cards,
   and it invents nothing — we do not fabricate a photograph of a real business. */
.pf-texture{
  position:absolute;top:-28%;left:-18%;width:136%;height:156%;
  object-fit:contain;z-index:0;pointer-events:none;
  opacity:.13;
  filter:grayscale(1) brightness(1.7) blur(1.5px);
  transform:rotate(-7deg);
}
.portfolio-entry:hover .pf-texture{opacity:.19;transition:opacity .5s ease}

/* ---------- hero overrides the centred container ------------------------
   .hero-inner is a .container: capped at 1560px and centred, so on a wide
   display the copy floated ~16% in and the pinstripe rail cut a dead black
   column beside it. The reference hugs the left edge at ~5% at every width. */
.hero > .container::before,
.hero > .container::after{display:none}

.hero-inner{
  width:100%;max-width:none;margin-inline:0;
  padding-left:clamp(24px,5.2vw,104px);
  padding-right:clamp(24px,4vw,60px);
  padding-bottom:104px;
}
@media(max-width:1024px){
  .hero-inner{padding-left:var(--gut);padding-right:var(--gut)}
}


/* ==========================================================================
   CONTACT — map band. The Google embed cannot be themed without the JS API and
   a key, so the iframe is inverted/desaturated in CSS to sit in the dark
   palette. The address card floats over it rather than beside it.
   ========================================================================== */
.map-band{position:relative;background:var(--black);isolation:isolate}
.map-frame{position:absolute;inset:0;z-index:0;overflow:hidden}
.map-frame iframe{
  width:100%;height:100%;border:0;display:block;
  filter:invert(.92) hue-rotate(180deg) grayscale(.55) contrast(.92) brightness(.92);
}
.map-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.55) 42%,rgba(8,8,8,.12) 78%);
}
.map-overlay{
  position:relative;z-index:2;
  min-height:clamp(440px,54vh,620px);
  display:flex;align-items:center;
  padding:80px 0;
  pointer-events:none;              /* let the map take the drag everywhere else */
}
.map-card{
  pointer-events:auto;
  max-width:400px;background:rgba(8,8,8,.86);
  border:1px solid var(--line-dark);
  padding:38px 36px 34px;
  backdrop-filter:blur(3px);
}
.map-card .eyebrow{color:var(--gold);letter-spacing:.2em}
.map-addr{
  margin-top:18px;font-family:var(--display);font-weight:600;
  font-size:clamp(22px,1.9vw,29px);line-height:1.25;letter-spacing:-.02em;color:#fff;
}
.map-meta{margin:26px 0 28px;display:flex;flex-direction:column;gap:16px;
  padding-top:22px;border-top:1px solid var(--line-dark)}
.map-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.map-meta dd{margin:0;font-size:15px;color:var(--stone)}
.map-meta dd a:hover{color:var(--gold)}
.map-btn{border-color:rgba(179,138,82,.55);color:var(--gold)}
.map-btn:hover{border-color:var(--gold);background:rgba(179,138,82,.09)}

@media(max-width:767px){
  .map-band{display:flex;flex-direction:column}
  .map-frame{position:relative;height:280px}
  .map-band::after{display:none}
  .map-overlay{min-height:0;padding:36px 0 48px}
  .map-card{max-width:none;background:transparent;border:0;padding:0;backdrop-filter:none}
}

/* Grid items default to min-width:auto, so an unbreakable token (the email
   address) forces its column to min-content and blows the grid past the
   container. Both halves of the fix are needed. */
.contact-grid,.contact-grid > *{min-width:0}
.contact-details a,.contact-details span,.map-meta dd a,.fm-contact dd a{
  overflow-wrap:anywhere;
}

.rail-logo img,.company-card .company-logo img,.pf-mark{
  width:var(--mkw,86px);height:var(--mkh,46px);
  max-width:78%;object-fit:contain;
}


/* ==========================================================================
   THE REGISTER — was a flat grid of unevenly-weighted marks. Now: every plate
   carries the company's own mark as ground texture, an index numeral, and a
   gold rule that wipes across on hover.
   ========================================================================== */
.company-card{position:relative;overflow:hidden;isolation:isolate}
.card-media{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center}
.card-texture{
  width:150%!important;height:auto!important;max-width:none!important;
  object-fit:contain;opacity:.10;
  filter:grayscale(1) brightness(1.8) blur(1.6px);
  transform:rotate(-7deg);
  transition:opacity .55s ease,transform .9s ease;
}
.company-card:hover .card-texture{opacity:.17;transform:rotate(-7deg) scale(1.05)}
.company-card > *:not(.card-media){position:relative;z-index:1}

/* index numerals */
.card-index,.reg-index{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  color:var(--gold);opacity:.62;
}
.card-index{position:absolute;top:22px;right:24px;z-index:2}
.reg-index{display:block;margin-bottom:14px}

/* the gold rule wipes in from the left — background-size, so nothing reflows */
.company-card::after,.register-list li::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(179,138,82,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  z-index:3;
}
.company-card:hover::after,.register-list li:hover::after{transform:scaleX(1)}

.register-list li{position:relative;transition:background .4s ease}
.register-list li:hover{background:rgba(255,255,255,.03)}
.rail-logo{display:block;margin-bottom:16px}
.rail-logo img{opacity:.82;transition:opacity .4s ease}
.register-list li:hover .rail-logo img{opacity:1}

.company-card .company-logo{display:flex;align-items:center;min-height:66px}
.company-card .company-logo span{display:none}
.company-card .company-logo img{opacity:.9;transition:opacity .4s ease}
.company-card:hover .company-logo img{opacity:1}

@media(prefers-reduced-motion:reduce){
  .card-texture,.company-card::after,.register-list li::after{transition:none}
}


/* ==========================================================================
   THE REGISTER WALL — one system, not two.
   Previously six tall feature cards sat above eight flat list rows, with the
   ground texture on the top six only; it read as two unrelated components.
   All fourteen now share a plate, and mark sizes come from the ink-normalised
   .mk-* values so no logo dominates or disappears.
   ========================================================================== */
.register-wall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark);
}
.reg-card{
  position:relative;display:flex;flex-direction:column;
  border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  transition:background .4s ease;
}
.reg-card:hover{background:rgba(255,255,255,.035)}
.reg-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,var(--gold),rgba(179,138,82,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.reg-card:hover::after{transform:scaleX(1)}

.reg-num{
  position:absolute;top:16px;left:18px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  color:var(--gold);opacity:.55;
}
.reg-plate{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;                       /* every plate the same height */
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.reg-tex{
  position:absolute;top:-62%;left:-54%;width:212%;height:224%;
  object-fit:contain;z-index:0;pointer-events:none;
  opacity:.14;filter:grayscale(1) brightness(1.55) blur(.4px);
  transform:rotate(-5deg);
  transition:opacity .55s ease,transform .9s ease;
}
.reg-card:hover .reg-tex{opacity:.26;filter:grayscale(1) sepia(.55) saturate(1.5) hue-rotate(-6deg) brightness(1.35) blur(.4px);transform:rotate(-5deg) scale(1.04)}
.reg-mark{
  position:relative;z-index:1;object-fit:contain;
  opacity:.92;transition:opacity .4s ease;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.5));
}
.reg-card:hover .reg-mark{opacity:1}
.reg-word{
  position:relative;z-index:1;text-align:center;color:#fff;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;
}
.reg-meta{padding:0 22px 24px;display:flex;flex-direction:column;gap:5px}
.reg-meta h3{
  font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.01em;color:#fff;
}
.reg-meta p{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gray);line-height:1.6;
}
.reg-foot{display:flex;justify-content:flex-end;padding-top:26px}
.reg-all{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
  padding-bottom:6px;border-bottom:1px solid rgba(179,138,82,.4);
}
.reg-all span{transition:transform .3s ease}
.reg-all:hover span{transform:translateX(5px)}

/* the ink-normalised size wins inside the wall too */
.reg-mark{width:var(--mkw,86px);height:var(--mkh,46px);max-width:74%}

@media(max-width:1024px){.register-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.register-wall{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reg-tex,.reg-card::after,.reg-all span{transition:none}}



/* the missing beat: a gold hairline that separates plate from meta and grows
   across on hover, so the card resolves instead of just sitting there */
.reg-plate::after{
  content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;
  background:var(--line-dark);z-index:2;
}
.reg-plate{aspect-ratio:16/11}
.reg-meta{padding-top:20px}
.reg-num{top:18px;left:20px;opacity:.7;font-size:10px}
.reg-card:hover .reg-num{opacity:1}
.reg-mark{filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}

/* Equal-diagonal mark sizing - every mark reads the same size regardless of
   whether it is a round seal or a wide wordmark. Generated - do not edit. */
.mk-ad-exchange-group{--mkw:138.2px;--mkh:140.0px}
.mk-apex-motion-usa{--mkw:151.7px;--mkh:140.0px}
.mk-apx-labs{--mkw:200.8px;--mkh:73.9px}
.mk-core-sports-oc{--mkw:137.1px;--mkh:140.0px}
.mk-fbx-lab{--mkw:197.0px;--mkh:83.5px}
.mk-fulfillment-x{--mkw:194.9px;--mkh:88.4px}
.mk-m2f{--mkw:174.7px;--mkh:123.6px}
.mk-mesa-bella{--mkw:164.3px;--mkh:137.2px}
.mk-portuguese-bend{--mkw:141.2px;--mkh:140.0px}
.mk-push-innovation{--mkw:198.6px;--mkh:79.7px}
.mk-smtf-huntington-beach{--mkw:188.0px;--mkh:102.1px}
.mk-smtf-long-beach{--mkw:200.5px;--mkh:74.7px}
.mk-trinity-training-facility{--mkw:200.4px;--mkh:75.2px}
.mk-winning-daily{--mkw:204.8px;--mkh:62.2px}
.mk-portuguese-bend-seal{--mkw:141.2px;--mkh:140.0px}

.reg-plate{aspect-ratio:16/12}
.reg-mark{max-width:62%;max-height:74%}


/* ==========================================================================
   SURFACE TEXTURE — two layers, not one. A single fine grain read as haze at
   any strength that was visible; a broad tooth under a fine fibre gives the
   ground actual depth. Applied to BOTH the light and dark grounds, weaker on
   dark because noise over black bands badly on cheap panels.
   ========================================================================== */
:root{
  --tex-coarse:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.42%27%20numOctaves%3D%275%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%270.34%27%2F%3E%3C%2Fsvg%3E");
  --tex-fine:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27120%27%20height%3D%27120%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%270.20%27%2F%3E%3C%2Fsvg%3E");
}
body{background-color:var(--ivory)}

.stats,.operating,.capabilities,.internal-section,.contact-hero{
  background-image:var(--tex-fine),var(--tex-coarse);
  background-size:120px 120px,260px 260px;
  background-repeat:repeat,repeat;
}
.hero,.cta-band,.site-footer,.internal-section.dark,.map-band,.register-section{
  position:relative;
}

/* --------------------------------------------------------------------------
   DARK GROUND — "foundry plate". The old treatment laid semi-opaque noise over
   the black at .16 and read as nothing; pushing its opacity up only LIFTED the
   black toward grey, because noise composited normally can add light but never
   remove it. The fix is two layers with different jobs:

     ::before  the MATERIAL. Noise tiles at full mid-grey, composited with
               mix-blend-mode:soft-light so the ground is pushed darker AND
               lighter around #080808 — grain instead of haze. Three tiles:
               a fine fibre, a long anisotropic brush (milled plate), and a
               broad tooth so the fine grain doesn't read as flat static.

     section   the LIGHT. Painted on the section's own background-image, above
               its background-color and below all content, so it stays clear of
               ::after (already spoken for on .hero and .page-hero). Carries a
               hairline plate grid that echoes the register's rectangles, a
               brass key light from the top-left, and a vignette that deepens
               the edges so the panel has a centre.
   -------------------------------------------------------------------------- */
:root{
  /* No opacity baked into these — the blend mode does the work. Baking it in
     is what made the previous version additive-only. */
  --n-fine:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --n-brush:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27680%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.005%200.6%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27680%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --n-tooth:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.16%27%20numOctaves%3D%275%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27320%27%20height%3D%27320%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");

  --plate-key:radial-gradient(120% 85% at 16% -8%, rgba(214,178,124,.125), rgba(214,178,124,0) 56%);
  --plate-vig:radial-gradient(140% 125% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.66) 100%);
}

/* BRUSHED PLATE (Marc 2026-08-27): the hairline grid read as graph paper.
   Now the material is a directional milled brush + broad tooth under
   soft-light, and the section carries a top sheen instead of a grid. */
.hero::before,.cta-band::before,.site-footer::before,.internal-section.dark::before,.page-hero::before,.company-hero::before,.register::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:var(--n-brush),var(--n-tooth);
  background-size:680px 300px,320px 320px;
  mix-blend-mode:soft-light;
  opacity:1;
}
.hero,.cta-band,.site-footer,.internal-section.dark,.register{
  isolation:isolate;position:relative;
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 30%, rgba(0,0,0,.25) 100%),var(--plate-key),var(--plate-vig);
  background-size:auto,auto,auto;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
/* the two hero bands already carry their own brass uplight on ::after, so they
   take the plate WITHOUT a second key light -- two light sources in one panel
   reads as a mistake, not as depth */
.page-hero,.company-hero{
  isolation:isolate;position:relative;
  background-color:var(--black);
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 30%, rgba(0,0,0,.25) 100%),var(--plate-vig);
  background-size:auto,auto;
  background-repeat:no-repeat,no-repeat;
}


/* ==========================================================================
   CONTACT — the success banner was visible to EVERY visitor on load.
   site.js adds .is-visible when the handler redirects with ?sent=1, but nothing
   ever hid it in the first place.
   ========================================================================== */
.success{display:none}
.success.is-visible{display:block}

.contact-details{
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line-light);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;
}
.contact-details > div{min-width:0}
.contact-details dt{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gray);margin-bottom:8px;
}
.contact-details dd{margin:0;font-size:15px;line-height:1.55;color:var(--black)}
.contact-details dd a{color:var(--black);border-bottom:1px solid rgba(8,8,8,.22);padding-bottom:1px}
.contact-details dd a:hover{color:var(--gold);border-color:var(--gold)}

/* the contact hero was thin — give the ask some scale */
.contact-hero h1{font-size:clamp(44px,6vw,104px);line-height:.98;letter-spacing:-.04em}
.contact-hero .gold{color:var(--gold)}
.contact-grid{padding-top:60px}
@media(max-width:767px){.contact-details{grid-template-columns:1fr}}


/* ==========================================================================
   MARK PLATES — the company's own logo as ground texture read as a second,
   larger copy of the mark sitting behind the real one. Removed.
   In its place: a soft warm haze that lifts the mark off the flat black
   without competing with it.
   ========================================================================== */
.reg-tex,.pf-texture{display:none!important}

.reg-plate::before,.pf-plate::before{
  content:"";position:absolute;left:50%;top:50%;
  width:78%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(179,138,82,.16) 0%,
    rgba(179,138,82,.07) 38%,
    rgba(255,255,255,.03) 62%,
    rgba(8,8,8,0) 78%);
  filter:blur(16px);
  z-index:0;pointer-events:none;
  transition:opacity .5s ease,transform .7s ease;
  opacity:.85;
}
.reg-card:hover .reg-plate::before,
.portfolio-entry:hover .pf-plate::before{opacity:1;transform:translate(-50%,-50%) scale(1.09)}

.reg-mark,.pf-mark{position:relative;z-index:1}
.reg-plate,.pf-plate{background:var(--black)}
@media(prefers-reduced-motion:reduce){.reg-plate::before,.pf-plate::before{transition:none}}

/* static map replaces the embed */
.map-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.map-attrib{
  position:absolute;right:12px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}


/* ==========================================================================
   INK TOKENS PER GROUND
   Colour was being guessed per component, which put white headings on ivory
   (1.15:1, invisible) and then black headings on black. Each section declares
   its ground once and every text role reads from it.
   ========================================================================== */
.stats,.operating,.capabilities,.internal-section,.contact-hero,.criteria{
  --ink:var(--black); --ink-soft:#67635C; --accent:#8A6633;
}
.hero,.register,.cta-band,.map-band,.site-footer,.page-hero,section.dark{
  --ink:#fff; --ink-soft:var(--stone); --accent:var(--gold);
}
.section-title,.criteria-row h3,.approach-step h3,.cap-item h3,.big-index h3,
.operating h2,.capabilities h2,.internal-section h2,.criteria h2{color:var(--ink)}

.criteria-row p,.approach-step p,.cap-item p,.contact-intro p,.register-head p,
.cap-head p,.split-head p,.operating p,.capabilities p,.internal-section p,
.criteria-list .num,.op-num,.stat span,.stats .stat-label,
.contact-details dt,.map-meta dt,.fm-contact dt{color:var(--ink-soft)}

.gold,.eyebrow{color:var(--accent)}
.hero-inner .eyebrow{color:var(--gold)}
.contact-details dd{color:var(--black)}

/* ==========================================================================
   MARK HALO — Marc: make the haze behind the logos a light gold.
   ========================================================================== */
.reg-plate::before,.pf-plate::before{
  background:radial-gradient(circle,
    rgba(214,178,116,.30) 0%,
    rgba(198,158,94,.18) 34%,
    rgba(179,138,82,.08) 58%,
    rgba(8,8,8,0) 76%);
  filter:blur(20px);
}

/* remaining overrides that outranked the ground tokens */
.contact-hero .gold{color:var(--accent)}
.field label{color:var(--ink-soft)}
.pf-meta p,.pf-loc,.reg-meta p{color:var(--ink-soft)}
.internal-section .eyebrow,.internal-section .eyebrow.dark,
.contact-hero .eyebrow,.contact-hero .eyebrow.dark{color:var(--ink-soft)}

/* The eyebrows on the ivory grounds were still hard-coded to --gray (#8C8983),
   which is 3.04:1 on #F2EFE8 — below AA for 11px text, and .eyebrow.dark was
   set to the SAME value as .eyebrow, so the modifier did nothing. Read from the
   ground's own --ink-soft instead (#67635C here, 5.20:1). Dark grounds are
   untouched: --gray on #080808 is already 5.9:1. .contact-hero above was the
   existing precedent for exactly this. */
.stats .eyebrow,.operating .eyebrow,.capabilities .eyebrow,
.internal-section .eyebrow,.criteria .eyebrow{color:var(--ink-soft)}
/* the register wall and portfolio plates sit on black inside a light section */
.register .reg-meta h3{color:#fff}
.register .reg-meta p{color:var(--stone)}


/* ==========================================================================
   HERO DEPTH — it read flat because it was two solid planes butted together:
   a black panel and a scrimmed photo. Three atmospheric layers, all
   pointer-events:none and all BELOW .hero-inner (z-index 1), so none of them
   touch layout or child positioning.
   ========================================================================== */

/* 1. warm light spilling out of the barrel room across the type panel, as if
      the photograph is the light source in the room */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 85% at 74% 42%,
      rgba(206,158,92,.20) 0%,
      rgba(150,108,58,.09) 30%,
      rgba(8,8,8,0) 62%),
    radial-gradient(70% 60% at 8% 96%,
      rgba(179,138,82,.07) 0%,
      rgba(8,8,8,0) 70%);
}

/* 2. vignette on the photograph itself — edge falloff is what makes a flat
      image read as a space with volume */
.hero-stage::after{
  box-shadow:
    inset 0 0 200px 50px rgba(8,8,8,.72),
    inset 0 90px 120px -40px rgba(8,8,8,.85),
    inset 0 -90px 120px -40px rgba(8,8,8,.9);
}

/* 3. deeper grade so the barrels hold their own shadows */
.hero-shot{filter:saturate(.32) sepia(.26) contrast(1.38) brightness(.30)}

/* the payoff lifts off the scene instead of sitting flat on it */
.hero-title .l3{text-shadow:0 3px 46px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}
.hero-title .l1,.hero-title .l2{text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero-lede{text-shadow:0 1px 18px rgba(0,0,0,.5)}


/* ==========================================================================
   COMPANY HERO — the mark now sits OVER the photograph.
   It had also lost its height cap in an earlier clean-up of box-based clamps,
   so a trimmed square logo rendered 220x203 inside a 58px slot and collided
   with the heading.
   ========================================================================== */
.company-visual.has-mark{position:relative}
.company-visual.has-mark::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(8,8,8,.62) 0%, rgba(8,8,8,.28) 55%, rgba(8,8,8,0) 78%),
    linear-gradient(180deg, rgba(8,8,8,.42) 0%, rgba(8,8,8,.12) 40%, rgba(8,8,8,.55) 100%);
}
.company-logo.over-media{
  position:absolute;z-index:2;inset:0;height:auto;margin:0;
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.company-logo.over-media span{display:none}
.company-logo.over-media img{
  width:calc(var(--mkw,170px) * 1.55);
  height:calc(var(--mkh,80px) * 1.55);
  max-width:60%;max-height:42%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.75));
}
/* text-logo fallback keeps working when a mark is missing */
.company-logo.over-media.text-logo span{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(22px,2.2vw,34px);color:#fff;text-align:center;
}

/* no-media pages keep the mark in the copy column — with a cap this time */
.company-hero-copy .company-logo{height:auto;min-height:56px;margin-bottom:0}
.company-hero-copy .company-logo img{
  width:var(--mkw,160px);height:var(--mkh,70px);
  max-width:230px;max-height:78px;object-fit:contain;object-position:left center;
}
.related-card .company-logo img{max-height:46px;object-fit:contain}


/* ==========================================================================
   PAGE-HERO UPLIGHT — warm gold rising from the lower edge, as if the room is
   lit from below. z-index:-1 inside the section's isolated stacking context, so
   it sits above the section background but under all content.
   ========================================================================== */
.page-hero,.company-hero{position:relative;isolation:isolate}
.page-hero::after,.company-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:78%;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(74% 116% at 50% 128%,
      rgba(212,166,100,.28) 0%,
      rgba(186,142,84,.13) 34%,
      rgba(140,104,58,.05) 56%,
      rgba(8,8,8,0) 74%),
    radial-gradient(36% 78% at 14% 118%,
      rgba(179,138,82,.14) 0%, rgba(8,8,8,0) 68%);
}


/* ==========================================================================
   COMPANY HERO, NO PHOTOGRAPH — the right panel was rendering as an empty black
   void. Where a company has no public photography it now carries its own mark
   on the same gold-haze plate used across the register, so the panel reads as
   deliberate rather than unfinished.
   ========================================================================== */
.company-visual.mark-panel{
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:var(--black);border-left:1px solid var(--line-dark);
}
.company-visual.mark-panel::before{
  content:"";position:absolute;left:50%;top:50%;
  width:74%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,
    rgba(214,178,116,.30) 0%,
    rgba(198,158,94,.17) 34%,
    rgba(179,138,82,.07) 58%,
    rgba(8,8,8,0) 76%);
  filter:blur(22px);pointer-events:none;
}
.company-visual.mark-panel img{
  position:relative;z-index:1;
  width:calc(var(--mkw,180px) * 1.5);
  height:calc(var(--mkh,90px) * 1.5);
  max-width:56%;max-height:34%;
  object-fit:contain;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.7));
}