/* Editorial pass (Oct 2026): rhythm, motion and texture. Loaded last; extends site.css + sections.css. */

/* Paper grain: fixed, non-interactive, so it never repaints while scrolling. */
body:after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Unified eyebrow: every section label carries the gold rule. */
.section-label:before{content:"";width:42px;height:1px;background:var(--gold);flex-shrink:0}
.section-label .gold-line{display:none}

/* Reveal choreography (motion.js toggles .is-revealed). Content stays visible without JS. */
@media(prefers-reduced-motion:no-preference){
  .reveal-ready [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(36px)}
  [data-reveal]{transition:opacity 1s var(--ease-premium) var(--reveal-delay,0ms),transform 1s var(--ease-premium) var(--reveal-delay,0ms)}
}

/* Hero: calmer, one message per element. */
@media(min-width:901px){.hero-content{grid-template-columns:minmax(0,1.1fr) minmax(300px,.5fr)}}
.hero-note p{max-width:24ch;text-wrap:balance}

/* Headline variety: some sections speak in one line instead of the two-line formula. */
.headline-single{font-size:clamp(2.8rem,4.6vw,4.9rem)!important;line-height:1.02}

/* 1a Services: editorial split with a sticky headline. */
.services{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:9%;align-items:start}
.services-head{position:sticky;top:130px}
.services-head h2{font-size:clamp(3rem,5vw,5.4rem);line-height:.98;margin-bottom:34px}
.service-list{grid-template-columns:1fr;gap:0}
.service-list li{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:38px 0 42px;border-top:1px solid #e3e6df}
.service-list li:last-child{border-bottom:1px solid #e3e6df}
.service-num{font:400 74px/.9 var(--serif);color:transparent;-webkit-text-stroke:1px var(--gold)}
.service-list h3{font-size:34px}


/* 1b Audience: one hero card, two stacked companions. */
.audience-grid{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:28px}
.audience-card:first-child{grid-row:span 2}
.audience-card:first-child>img{aspect-ratio:1.05}
.audience-card:not(:first-child){display:grid;grid-template-columns:.85fr 1fr}
.audience-card:not(:first-child)>img{height:100%;aspect-ratio:auto}
.audience-card{transition:transform .6s var(--ease-premium),box-shadow .6s var(--ease-premium),opacity 1s var(--ease-premium) var(--reveal-delay,0ms)}
.audience-card:hover{box-shadow:0 26px 60px rgba(69,117,121,.14)}


/* 1c + 5 Process: oversized step count and a drawn timeline. */
.process-heading{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(24px,4vw,56px)}
.process-count{font:400 clamp(7rem,12vw,11.5rem)/.78 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(186,158,84,.6);pointer-events:none}
.timeline{position:relative;padding-top:34px!important}
.timeline:before,.timeline:after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
.timeline:before{background:#e3e6df}
.timeline:after{background:var(--gold);transform-origin:left;transform:scaleX(1)}
.timeline li{border-top:0!important;padding-top:0!important;position:relative}
.timeline li:before{content:"";position:absolute;left:0;top:-39px;width:11px;height:11px;border-radius:50%;background:white;border:1px solid var(--gold)}
@media(prefers-reduced-motion:no-preference){
  .reveal-ready .timeline:not(.is-revealed):after{transform:scaleX(0)}
  .timeline:after{transition:transform 1.8s var(--ease-premium) .2s}
  .reveal-ready .timeline:not(.is-revealed){opacity:1!important;transform:none!important}
  .reveal-ready .timeline:not(.is-revealed) li{opacity:0;transform:translateY(24px)}
  .timeline li{transition:opacity .9s var(--ease-premium),transform .9s var(--ease-premium)}
  .timeline li:nth-child(2){transition-delay:.35s}.timeline li:nth-child(3){transition-delay:.7s}.timeline li:nth-child(4){transition-delay:1.05s}
  .timeline.is-revealed li:before{background:var(--gold);transition:background .4s ease .6s}
}

/* 6e Answer block: present for search, quiet for people. */
.geo-answer{margin-top:64px;padding:30px 0 0}
.geo-answer .section-label{grid-column:1/-1;margin-bottom:6px}
.geo-answer h3{font-size:24px}
.geo-answer p{font-size:14px;line-height:1.7}

@media(max-width:1100px){
  .services{gap:6%}
  .service-list li{grid-template-columns:90px 1fr}
  .service-num{font-size:60px}
}
@media(max-width:900px){
  .services{grid-template-columns:1fr;gap:36px}
  .services-head{position:static}
  .audience-grid{grid-template-columns:1fr}
  .audience-card:first-child{grid-row:auto}
  .process-heading{grid-template-columns:auto 1fr}.process-heading>a{grid-column:1/-1}
  .process-count{font-size:7rem}
  .timeline{padding-top:0!important;padding-left:30px!important}
  .timeline:before,.timeline:after{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .timeline:after{transform-origin:top}
  .timeline li:before{left:-30px;top:6px}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .reveal-ready .timeline:not(.is-revealed):after{transform:scaleY(0)}
}
@media(max-width:560px){
  .hero-content{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(3.4rem,18vw,4.6rem)}
  .hero h1 span:last-child{margin-left:.55em}
  .service-list li{grid-template-columns:1fr;gap:10px;padding:28px 0 30px}
  .service-num{font-size:52px}
  .service-list h3{font-size:30px}
  .audience-card:not(:first-child){display:flex}
  .audience-card:not(:first-child)>img{aspect-ratio:1.4;height:auto}
  .process-count{display:none}
  .timeline li{padding-left:44px!important}.timeline .step{top:2px}
  .geo-answer h3{font-size:22px}
}