/* variant: editorial. Paper-light pages, oversized type, line and word reveals, clip-path image reveals,
   sliding underlines, a marquee strip of the services, sharp corners. */
:root{--ink:var(--hero-bg);--ink-rgb:var(--hero-bg-rgb);--ink-fg:var(--hero-fg);--ink-muted:var(--hero-muted);--ink-accent:var(--hero-accent);--radius:2px;--radius-lg:2px;--btn-radius:2px}
body{counter-reset:sec}
/* header and hero are printed on the page colour (header stays dark when the logo is light-on-dark) */
.v-editorial:not(.has-logo) .site-header,.hero{--hero-bg:var(--bg);--hero-bg-rgb:var(--bg-rgb);--hero-fg:var(--fg);--hero-fg-rgb:var(--fg-rgb);--hero-muted:var(--muted);--hero-accent:var(--primary-text);--hero-card:var(--card)}
.v-editorial:not(.has-logo) .site-header{--hdr-a:var(--hdr-a-page);border-bottom:1px solid rgb(var(--fg-rgb) / .14)}
.v-editorial:not(.has-logo) .site-header .nav{background:var(--bg)}
.nav a{position:relative;border-radius:0}
.nav a::after{content:"";position:absolute;left:.875rem;right:.875rem;bottom:.55rem;height:2px;background:var(--hero-accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover{background:none}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.wordmark{letter-spacing:-.03em}

.hero{border-bottom:2px solid var(--fg)}
.hero-fx{display:none}
.hero.has-image::before{display:none}
.hero h1{font-size:clamp(2.6rem,1rem + 7.4vw,7.25rem);line-height:.98;letter-spacing:-.045em}
.hero-copy{max-width:64rem}
.hero .eyebrow::before{width:3rem}
.hero-sub{border-left:3px solid var(--accent);padding-left:1rem}
.hero.has-stats,.hero{padding-bottom:clamp(3rem,2rem + 4vw,5rem)}
.hero--overlay-left.has-image,.hero--centered.has-image{display:flex;flex-direction:column}
.hero--overlay-left .hero-media,.hero--centered .hero-media{position:relative;inset:auto;z-index:0;order:2;width:min(100% - 2 * var(--gutter),var(--maxw));height:clamp(13rem,30vw,26rem);margin:clamp(2rem,1rem + 3vw,3.5rem) auto 0;overflow:hidden}
.hero-media img{opacity:1}
.hero-figure>img{box-shadow:none}
.hero-figure::before{inset:14px -14px -14px 14px;border:0;background:var(--ink)}
.emblem{background:var(--ink);border:0;border-radius:2px;box-shadow:10px 10px 0 var(--accent)}
.emblem--chip{background:#fff;outline:2px solid var(--ink)}
.emblem-ring{display:none}

/* stats: ruled, not floating */
.stats-wrap{margin-top:0}
.stats{border:0;border-bottom:1px solid rgb(var(--fg-rgb) / .2);border-radius:0;box-shadow:none;background:none;padding-inline:0}
.stat{align-items:flex-start;text-align:left}
.stat-lead{font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);letter-spacing:-.02em}
.stat+.stat::before{background:rgb(var(--fg-rgb) / .2)}

/* marquee strip of the services */
.marquee{overflow:hidden;background:var(--ink);color:var(--ink-fg);padding-block:1.1rem;border-block:2px solid var(--fg)}
.marquee-track{display:flex;width:max-content}
.marquee-run{display:flex;flex:none}
.marquee span{display:flex;align-items:center;gap:2.25rem;padding-right:2.25rem;font-size:clamp(1.4rem,1rem + 1.5vw,2.25rem);font-weight:700;font-style:italic;letter-spacing:-.02em;white-space:nowrap}
.marquee span::after{content:"";width:.45em;height:.45em;background:var(--accent);transform:rotate(45deg)}

/* sections: numbered, ruled */
.section--alt{background:transparent;border:0;border-top:2px solid var(--fg)}
.section-head{max-width:56rem}
.section-head h2,.about-copy h2{font-size:clamp(2.1rem,1.2rem + 3.6vw,4.25rem);letter-spacing:-.035em;line-height:1}
.section-head .eyebrow::before,.about-copy .eyebrow::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;opacity:1;font-size:1.0625rem;letter-spacing:0}
.eyebrow::before{border-radius:0}

/* services become a ruled index */
.cards{gap:0 var(--s4)}
.card,.section--alt .card{background:none;border:0;border-top:1px solid rgb(var(--fg-rgb) / .3);border-radius:0;box-shadow:none;counter-increment:card}
.card::after{height:2px;background:var(--fg)}
.card-body{padding:var(--s3) 0 var(--s4)}
.card-body::before{content:"(" counter(card,decimal-leading-zero) ")";position:absolute;right:0;top:var(--s3);color:var(--muted);font-size:.9375rem}
.cards{counter-reset:card}
.card h3{width:fit-content;font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);background:linear-gradient(var(--accent),var(--accent)) 0 92%/0 .14em no-repeat;transition:background-size .45s var(--ease)}
.card:hover h3{background-size:100% .14em}
.chip{background:none;border:1.5px solid currentColor;border-radius:0;width:2.75rem;height:2.75rem}
.card-img{border-radius:0}

.step,.section--alt .step{background:none;border:0;border-left:2px solid var(--fg);border-radius:0;padding:0 0 0 var(--s3)}
.step-num{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--primary-text);font-size:clamp(2.75rem,2rem + 2.5vw,4rem);line-height:1;letter-spacing:-.05em}
.about-media img,.shot-frame,.contact-panel,.ccard{border-radius:2px}
.about-media::before{inset:16px -16px -16px 16px;border-radius:0;background:var(--accent)}
.shot-frame{box-shadow:none}
.points li{border-bottom:1px solid rgb(var(--fg-rgb) / .15);padding-bottom:.6rem}

/* buttons: square with a hard offset shadow */
.btn{border-radius:2px;letter-spacing:.01em}
.btn-accent,.btn-primary{border-color:var(--fg);box-shadow:4px 4px 0 var(--fg)}
.site-header .btn-accent{box-shadow:none}
.btn-ghost{border-width:2px}
.contact-panel .btn-accent{border-color:var(--ink-fg);box-shadow:4px 4px 0 var(--ink-accent)}

/* reading progress rule */
body::before{content:"";position:fixed;left:0;right:0;top:0;z-index:60;height:3px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
  .hero h1 .ln>span{display:inline-block;animation:line-up 1s var(--ease) both}
  .hero h1 .ln+.ln>span{animation-delay:.12s}
  .hero-copy>h1{animation:none}
  .hero-media img{animation:settle 1.8s var(--ease) both}
  .marquee-track{animation:marquee 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
  .w>span{display:inline-block;transition:transform .9s var(--ease);transition-delay:calc(var(--wi) * 60ms + 80ms)}
  .io .reveal:not(.in) .w>span{transform:translateY(105%)}
  .io .gallery .reveal,.io .about-media.reveal{opacity:1;transform:none}
  .io .gallery .reveal .shot-frame,.io .about-media.reveal img{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
  .io .gallery .reveal.in .shot-frame,.io .about-media.reveal.in img{clip-path:inset(0)}
  .card::after{transform:scaleX(0)}
  @media (hover:hover){
    .card:hover{transform:none}
    .btn-accent:hover,.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fg)}
    .contact-panel .btn-accent:hover{box-shadow:6px 6px 0 var(--ink-accent)}
    .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--fg)}
  }
}
@media (prefers-reduced-motion:reduce){.card::after{display:none}}
@keyframes line-up{from{transform:translateY(105%)}}
@keyframes settle{from{transform:scale(1.08)}}
@keyframes marquee{to{transform:translateX(-50%)}}