/* =====================================================================
   COTTON — Events & Incentives  ·  v2 "Editorial Deck"
   Light editorial · Allomira display (caps) + Montserrat · B&W photography
   with a single brand accent · each screen is its own page, swipe → next.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* ---------- Allomira (display) ---------- */
@font-face{font-family:'Allomira';src:url('../fonts/Allomira-Light.ttf')   format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Allomira';src:url('../fonts/Allomira-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Allomira';src:url('../fonts/Allomira-Medium.ttf')  format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Allomira';src:url('../fonts/Allomira-Bold.ttf')    format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Allomira';src:url('../fonts/Allomira-Black.ttf')   format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* brand */
  --red:#CB2023; --amber:#FFB600; --orange:#FF5C35; --pink:#F93549;
  --slate:#314C5A; --black:#231F20; --paper:#E9E9E2;
  /* surfaces / ink */
  --bg:#F4F3EE;            /* warm white canvas */
  --ink:#1A1718;           /* near-black text */
  --ink-60:rgba(26,23,24,.6);
  --ink-40:rgba(26,23,24,.4);
  --line:rgba(26,23,24,.16);
  /* type */
  --display:'Open Sans',system-ui,sans-serif;   /* was Allomira — thin Open Sans display */
  --body:'Montserrat',system-ui,sans-serif;
  /* space */
  --pad:clamp(1.25rem,4vw,3.5rem);
  --gap:clamp(1.5rem,4vw,4rem);
  --ease:cubic-bezier(.4,0,.15,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body); background:transparent; color:var(--ink);
  line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:.7rem 1.1rem}
.skip-link:focus{left:0}

/* ---------- screen frame ---------- */
.deck{min-height:100svh;display:flex;position:relative;isolation:isolate}
.deck-body{flex:1;min-width:0;display:grid;grid-template-rows:1fr auto}

/* ---------- moving gradient backdrop ---------- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--bg);pointer-events:none}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);will-change:transform;opacity:.5}
.bg::before{width:78vmax;height:78vmax;left:-12vmax;top:-18vmax;background:radial-gradient(circle at 42% 42%, #FF5C35 0%, #CB2023 52%, rgba(203,32,35,0) 72%);animation:bgDriftA 32s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.bg::after{width:72vmax;height:72vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(circle at 60% 60%, #F93549 0%, #5b1330 55%, rgba(91,19,48,0) 74%);animation:bgDriftB 42s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes bgDriftA{from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}to{transform:translate3d(16vmax,12vmax,0) scale(1.28) rotate(20deg)}}
@keyframes bgDriftB{from{transform:translate3d(0,0,0) scale(1.12) rotate(0deg)}to{transform:translate3d(-14vmax,-10vmax,0) scale(1) rotate(-16deg)}}

/* ---------- left vertical circle rail (primary nav) ---------- */
.rail{flex:0 0 auto;width:clamp(168px,16vw,232px);position:sticky;top:0;align-self:flex-start;height:100svh;
  display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem);
  padding:clamp(1.2rem,2vw,2rem) clamp(1rem,1.6vw,1.7rem);
  border-right:1px solid var(--line);background:#fff;z-index:6}
.rail__logo{line-height:0}
.rail__logo img{width:clamp(80px,9vw,130px);height:auto;margin-inline:auto}  /* centre the logo in the rail column */
.rail__nav{display:flex;flex-direction:column;gap:clamp(.7rem,1.5vw,1.15rem);margin-block:auto}
/* per-item brand colour for the circle */
.rail__item[data-i="1"]{--rc:#314C5A}
.rail__item[data-i="2"]{--rc:#FF5C35}
.rail__item[data-i="3"]{--rc:#CB2023}
.rail__item[data-i="4"]{--rc:#FFB600}
.rail__item[data-i="5"]{--rc:#F93549}
.rail__item[data-i="6"]{--rc:#231F20}
.rail__item{position:relative;display:flex;align-items:center;gap:.95rem;padding:.3rem .2rem}
.rail__c{position:relative;flex:0 0 auto;width:clamp(40px,3.3vw,46px);aspect-ratio:1;display:grid;place-items:center;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.rail__c img{position:absolute;inset:0;width:100%;height:100%;opacity:.5;transition:opacity .35s ease}
.rail__c b{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ink-60);transition:color .35s ease}
.rail__l{position:relative;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);white-space:nowrap;transition:color .35s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.rail__l::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* hover / focus — the hand-drawn colour ring brightens, number + label deepen to ink, fine underline draws in */
.rail__item:hover .rail__c,.rail__item:focus-visible .rail__c{transform:scale(1.06)}
.rail__item:hover .rail__c img,.rail__item:focus-visible .rail__c img{opacity:1}
.rail__item:hover .rail__c b,.rail__item:focus-visible .rail__c b{color:var(--ink)}
.rail__item:hover .rail__l,.rail__item:focus-visible .rail__l{color:var(--ink);transform:translateX(4px)}
.rail__item:hover .rail__l::after,.rail__item:focus-visible .rail__l::after{transform:scaleX(1)}
/* active page — vivid colour ring + ink label with a brand-colour underline (no filled disc) */
.rail__item[aria-current] .rail__c img{opacity:1}
.rail__item[aria-current] .rail__c b{color:var(--ink)}
.rail__item[aria-current] .rail__l{color:var(--ink)}
.rail__item[aria-current] .rail__l::after{transform:scaleX(1);background:var(--rc,var(--ink))}
.rail__no{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--ink-40);letter-spacing:.05em}
.rail__no b{color:var(--red)}

/* ---------- stage (page content) ---------- */
.stage{position:relative;padding:clamp(1rem,3vw,2.5rem) var(--pad) clamp(.5rem,2vw,1.5rem);display:flex;align-items:center}
.stage__inner{width:100%;max-width:1320px;margin-inline:auto}

/* ---------- decorative accents ---------- */
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;animation:blobFloat 14s var(--ease) infinite alternate}
.blob--red{background:radial-gradient(circle,var(--red),transparent 68%)}
.blob--orange{background:radial-gradient(circle,var(--orange),transparent 68%)}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-5%) scale(1.12)}}
.plus{position:absolute;width:16px;height:16px;color:var(--ink-40);pointer-events:none}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor}
.plus::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.plus::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.accent-bar{display:inline-block;width:clamp(46px,5vw,84px);height:10px;background:var(--red)}
.accent-bar--amber{background:var(--amber)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
.eyebrow .tri{color:var(--red);font-size:.7em}
.d-title{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.015em;color:var(--ink)}
.d-title .accent{color:var(--red)}
.sub{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-60);max-width:36ch;line-height:1.55}
.caption{font-size:.8rem;color:var(--ink-60);line-height:1.5}
.caption .lbl{display:block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-size:.68rem;margin-bottom:.25rem}

/* index number with hand-drawn ring */
.indexmark{position:relative;display:inline-grid;place-items:center;width:clamp(72px,8vw,112px);aspect-ratio:1}
.indexmark img{position:absolute;inset:0;width:100%;height:100%}
.indexmark span{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2.1rem);color:var(--ink)}

/* photography */
.shot{position:relative;overflow:hidden;background:transparent}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .6s var(--ease),transform .9s var(--ease)}
.shot:hover img{filter:grayscale(0) contrast(1)}
.shot .accent-bar{position:absolute;right:0;bottom:clamp(18px,4vw,42px)}

/* hero vertical auto-slider: peek above & below, slides top→bottom, edges fade */
.home__shot{position:relative}
.shot-reel{position:absolute;inset:0;overflow:hidden;container-type:size;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.shot-track{position:absolute;left:0;right:0;top:-184cqh;display:flex;flex-direction:column;gap:0;animation:shotSlide 20s linear infinite;will-change:transform}
.home__shot .shot-track img{width:100%;height:92cqh;flex:0 0 auto;object-fit:cover;display:block}
@keyframes shotSlide{from{transform:translateY(0)}to{transform:translateY(92cqh)}}

/* ---------- bottom nav (prev / dots / next) ---------- */
.deck-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:clamp(1rem,2.2vw,1.6rem) var(--pad);border-top:1px solid var(--line);position:relative;z-index:2}
.nav-arrow{display:inline-flex;align-items:center;gap:.7rem;font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;transition:gap .3s var(--ease),color .25s}
.nav-arrow small{display:block;font-size:.62rem;color:var(--ink-40);letter-spacing:.16em}
.nav-arrow .arr{font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--red)}
.nav-arrow b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1rem}
.nav-next:hover{gap:1.1rem}
.nav-prev:hover{gap:1.1rem}
.nav-arrow.is-disabled{opacity:.28;pointer-events:none}
.deck-dots{display:flex;gap:.6rem;align-items:center}
.deck-dots a{width:30px;height:4px;background:var(--ink);opacity:.18;transition:opacity .25s,background .25s}
.deck-dots a:hover{opacity:.5}
.deck-dots a[aria-current]{opacity:1;background:var(--red);width:42px}

/* =====================================================================
   PAGE LAYOUTS
   ===================================================================== */

/* --- Home (01) --- */
.home{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center}
.home__lead{position:relative}
.home .d-title{font-size:clamp(2.8rem,8.5vw,8rem);margin:1.2rem 0 1.6rem}
.home__shot{aspect-ratio:3/4;max-height:84vh}
.home .blob{width:min(40vw,460px);height:min(40vw,460px);left:-6%;top:-12%}

/* --- Introduction (02) --- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.intro .d-title{font-size:clamp(2.4rem,6.5vw,5.6rem);margin:1rem 0 1.4rem}
.intro__body{max-width:42ch;color:var(--ink-60);display:grid;gap:1rem;font-size:1.02rem}
.intro__shot{aspect-ratio:3/4;max-height:70vh}
.intro .blob{width:min(34vw,400px);height:min(34vw,400px);right:-4%;bottom:-10%}
.stats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(.9rem,1.6vw,1.4rem) clamp(1.1rem,2.4vw,2rem);margin-top:2rem}
.stats>li{flex:0 1 auto}
.stat__n{font-family:var(--display);font-weight:300;font-size:clamp(1.45rem,2.15vw,2rem);line-height:1;color:#fff;white-space:nowrap;letter-spacing:.01em;text-shadow:0 1px 1px rgba(0,0,0,.45),0 2px 16px rgba(0,0,0,.30)}
.stat__l{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-top:.55rem;max-width:10ch;line-height:1.25}
/* stats scatter-in: each stat flies in from a different screen edge, staggered, settling into place */
@keyframes statScatter{from{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) rotate(var(--sr,0deg))}to{opacity:1;transform:none}}
.stats>li{animation:statScatter .85s var(--sd,.3s) cubic-bezier(.16,1,.3,1) both}
.stats>li:nth-child(1){--sx:-58vw;--sy:-24vh;--sr:-5deg;--sd:.30s}
.stats>li:nth-child(2){--sx:2vw;--sy:-46vh;--sr:4deg;--sd:.40s}
.stats>li:nth-child(3){--sx:54vw;--sy:28vh;--sr:6deg;--sd:.50s}
.stats>li:nth-child(4){--sx:-6vw;--sy:46vh;--sr:-4deg;--sd:.60s}
.stats>li:nth-child(5){--sx:-50vw;--sy:32vh;--sr:5deg;--sd:.70s}

/* --- "bg-photo" template: a portrait photo on the RIGHT, full-height & uncropped, on a plain white page.
   Used by introduction.html (man-blue) and index.html (.bg-podium). Per-page image via the --bgphoto var. --- */
body.bg-photo{background:#fff;--bgphoto:url('../img/bg/man-blue.webp')}
body.bg-photo.bg-podium{--bgphoto:url('../img/bg/podium.webp')}
body.bg-photo .bg{display:none}
body.bg-photo .blob,body.bg-photo .stage__inner .plus{display:none}        /* keep the page cleanly white (the animated fx carries the + motif) */
body.bg-photo .intro__shot,body.bg-photo .home__shot{display:none}         /* the photo takes the right-side visual slot */
/* full viewport height, contain = no top/bottom crop, anchored right, on white */
body.bg-photo::before{content:"";position:fixed;right:0;left:auto;top:0;width:46vw;height:100svh;z-index:-3;pointer-events:none;
  background:var(--bgphoto) right center/contain no-repeat}
body.bg-photo .stat__n{color:var(--ink);text-shadow:none}                  /* dark on white (white would vanish); no glow */
/* desktop: bring the copy + image together, give content room to breathe */
@media (min-width:881px){
  body.bg-photo::before{right:3vw}                                         /* nudge the image in from the right edge */
  body.bg-photo .intro,body.bg-photo .home{grid-template-columns:1fr}      /* figure hidden → single column for the copy */
  body.bg-photo .intro__lead{max-width:38rem;margin-left:clamp(1rem,5vw,5rem)}      /* shift the copy toward centre */
  body.bg-photo .home__lead{max-width:33rem;margin-left:clamp(1rem,4.5vw,4.5rem)}
  body.bg-photo .home .d-title{font-size:clamp(2.4rem,5.2vw,4.4rem);margin:1rem 0 1.4rem}  /* tame the hero title for the editorial template */
  body.bg-photo .stats{flex-wrap:nowrap;gap:clamp(.5rem,1.3vw,1.1rem);justify-content:space-between}  /* all 5 stats on one line */
  body.bg-photo .stat__n{font-size:clamp(1rem,1.45vw,1.45rem)}
  body.bg-photo .stat__l{font-size:.54rem;max-width:9ch;margin-top:.4rem}
}
@media (max-width:880px){                                                  /* mobile: image is a FIXED backdrop; the copy scrolls over it */
  body.bg-photo::before{display:block;left:0;right:0;top:0;width:auto;height:100svh;background-position:center;background-size:contain;opacity:.7}
  body.bg-photo .intro__shot,body.bg-photo .home__shot{display:none}
}

/* --- Home hero crossfade gallery: JS-driven, supports any N images --- */
/* CSS keyframe animations (hrFade1/2/3) removed; JS in site.js handles cycling.    */
/* Base: all images hidden; first image visible so the page never flashes blank      */
/* (works without JS, and before JS runs on slow connections).                       */
body.bg-podium::before{display:none}                                       /* the reel replaces the single ::before image on home */
.home-reel{position:relative;overflow:hidden}
.home-reel__img{position:absolute;inset:0;background-repeat:no-repeat;background-position:right center;background-size:contain;
  opacity:0;transition:opacity 1s ease}
.home-reel__img:first-child{opacity:1}                                    /* no-JS / pre-JS: first image always visible */
.home-bg{display:none}                                                     /* body-level reel: viewport-fixed on desktop (outside the deck transform) */
@media (min-width:881px){                                                  /* desktop: fixed right-side slot (like the old ::before) */
  body.bg-podium .home-bg{display:block;position:fixed;right:3vw;top:0;width:46vw;height:100svh;z-index:-3;pointer-events:none}
}
@media (max-width:880px){                                                  /* mobile: the home gallery becomes a fixed backdrop */
  body.bg-podium .home-bg{display:block;position:fixed;left:0;right:0;top:0;width:auto;height:100svh;z-index:-3;opacity:.7}
  .home-bg .home-reel__img{background-position:center;background-size:contain}
}
@media (prefers-reduced-motion:reduce){                                    /* no motion: first image, static */
  .home-reel__img{transition:none}
}

/* --- bg-reel: generic reel variant for pages that use body.bg-photo (e.g. introduction).
   Disables the ::before single-image slot and activates .home-bg with identical
   geometry to bg-podium, so site.js crossfade works without any JS changes. --- */
body.bg-photo.bg-reel::before{display:none}
@media (min-width:881px){
  body.bg-photo.bg-reel .home-bg{display:block;position:fixed;right:3vw;top:0;width:46vw;height:100svh;z-index:-3;pointer-events:none}
}
@media (max-width:880px){
  body.bg-photo.bg-reel .home-bg{display:block;position:fixed;left:0;right:0;top:0;width:auto;height:100svh;z-index:-3;opacity:.7}
  body.bg-photo.bg-reel .home-bg .home-reel__img{background-position:center;background-size:contain}
}

/* --- Introduction: animated "choreography" line-art over the dancer (present only on introduction.html) --- */
.figure-fx{position:fixed;right:3vw;top:0;width:46vw;height:100svh;z-index:-2;pointer-events:none}
.figure-fx svg{width:100%;height:100%;display:block;overflow:visible}
.fx-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* glowing comet streaks: a lit segment travels each normalised (pathLength=100) curve */
.fx-streak{stroke-width:2.2;stroke-dasharray:26 74;filter:url(#fxGlow);animation:fxComet linear infinite}
.fx-s1{stroke:url(#fxWarm);animation-duration:6s}
.fx-s2{stroke:#FFB600;opacity:.9;animation-duration:8.5s;animation-direction:reverse}
.fx-s3{stroke:#F93549;opacity:.85;animation-duration:5s;animation-delay:-1.8s}
/* bright spark riding the main streak */
.fx-spark{stroke:#FFE9C7;stroke-width:3.6;stroke-dasharray:1.4 98.6;filter:url(#fxGlow);animation:fxComet 6s linear infinite}
/* slow orbital ring around the torso */
.fx-ring{stroke:#CB2023;stroke-width:1.4;opacity:.26;stroke-dasharray:2.5 11;transform-box:fill-box;transform-origin:center;animation:fxSpin 48s linear infinite}
/* brand "+" accents pulsing in */
.fx-plus line{stroke-width:2;stroke-linecap:round}
.fx-plus{opacity:0;transform-box:fill-box;transform-origin:center;animation:fxPulse 4.5s ease-in-out infinite}
.fx-plus--1 line{stroke:#FF5C35}
.fx-plus--2{animation-delay:1.5s}.fx-plus--2 line{stroke:#FFB600}
.fx-plus--3{animation-delay:3s}.fx-plus--3 line{stroke:#CB2023}
@keyframes fxComet{to{stroke-dashoffset:-100}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxPulse{0%,100%{opacity:0;transform:scale(.55)}45%,55%{opacity:.85;transform:scale(1)}}

/* --- Home: animated "resonance" — sound-rings radiating from the podium mic (present only on index.html) --- */
.fx-wave{stroke:#FFB600;stroke-width:1.6;fill:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:fxRipple 4.4s cubic-bezier(.22,1,.36,1) infinite}
.fx-wave--2{animation-delay:1.1s}
.fx-wave--3{animation-delay:2.2s}
.fx-wave--4{animation-delay:3.3s}
.fx-source{fill:#CB2023;filter:url(#fxGlow);transform-box:fill-box;transform-origin:center;animation:fxBeat 2.2s ease-in-out infinite}
.fx-rise{opacity:0;transform-box:fill-box;transform-origin:center;animation:fxRise 5s ease-in-out infinite}
.fx-rise--1{fill:#FF5C35}
.fx-rise--2{fill:#FFB600;animation-delay:1.6s}
.fx-rise--3{fill:#CB2023;animation-delay:3.1s}
@keyframes fxRipple{0%{opacity:0;transform:scale(.18)}12%{opacity:.5}100%{opacity:0;transform:scale(3.4)}}
@keyframes fxBeat{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:.95}}
@keyframes fxRise{0%{opacity:0;transform:translateY(8px) scale(.6)}22%{opacity:.85}80%{opacity:.45}100%{opacity:0;transform:translateY(-120px) scale(1)}}

@media (max-width:880px){ .figure-fx{display:none} }
@media (prefers-reduced-motion:reduce){            /* collapse to static, elegant line-art */
  .fx-streak,.fx-spark,.fx-ring,.fx-plus,.fx-wave,.fx-source,.fx-rise{animation:none}
  .fx-streak{stroke-dasharray:none;opacity:.45}
  .fx-spark,.fx-rise{display:none}
  .fx-plus{opacity:.5;transform:none}
  .fx-wave--1{opacity:.3}
  .fx-wave--2,.fx-wave--3,.fx-wave--4{display:none}
  .fx-source{opacity:.6;transform:none}
}

/* =====================================================================
   SERVICES (03) — four image cards, copy over the ethereal forms
   ===================================================================== */
body.svc-page{background:#fff}                       /* clean white canvas (no moving gradient) */
body.svc-page .bg{display:none}
.stage__inner.services{align-self:stretch;animation:none;opacity:1;transform:none;
  display:flex;flex-direction:column;gap:clamp(.9rem,2.1vh,1.7rem)}
.svc-head{flex:0 0 auto;text-align:center}                      /* centred above the four images */
.svc-head .eyebrow{margin-bottom:.55rem}
.svc-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;
  color:var(--ink);font-size:clamp(1.5rem,2.7vw,2.4rem)}
.svc-h1 .accent{color:var(--red)}

.svc-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,.9vw,.9rem)}
.svc{position:relative;overflow:hidden;display:flex;
  opacity:0;transform:translateY(22px);animation:svcRise .75s var(--ease) forwards}
.svc:nth-child(1){animation-delay:.06s}
.svc:nth-child(2){animation-delay:.15s}
.svc:nth-child(3){animation-delay:.24s}
.svc:nth-child(4){animation-delay:.33s}
@keyframes svcRise{to{opacity:1;transform:none}}
/* the ethereal form (image is on white), gently zooming on hover */
.svc__bg{position:absolute;inset:0;z-index:0;background:#fff 50% 45%/cover no-repeat;  /* image set inline per card (resolves relative to the page) */
  transition:transform .9s var(--ease)}
.svc:hover .svc__bg{transform:scale(1.05)}
/* white scrim → clean reading bands top (title) + bottom (copy); the form shows through the middle */
/* soft white halo centred behind the text; the form shows around it */
.svc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 86% 46% at 50% 50%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 80%)}
.svc__inner{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:clamp(1rem,1.5vw,1.7rem)}
.svc__title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  color:var(--ink);font-size:clamp(1.1rem,1.7vw,1.6rem)}
.svc__title::after{content:"";display:block;width:34px;height:6px;margin:.9rem auto 0;       /* centred line below the headline */
  background:var(--svc-accent,var(--red));transition:width .5s var(--ease)}
.svc:hover .svc__title::after{width:58px}
.svc__copy{margin-top:1.05rem;font-size:clamp(.8rem,.92vw,.94rem);line-height:1.55;color:var(--ink-60);max-width:30ch;min-height:11.5em}  /* equal blocks → titles/lines/description-tops align across columns (covers up to ~7 lines) */

@media (max-width:980px){
  .stage__inner.services{align-self:auto;min-height:0}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .svc{min-height:46vh}
  .svc__title{font-size:1.35rem}            /* +~3pt larger on mobile/tablet */
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .svc{min-height:60vh}
}
@media (prefers-reduced-motion:reduce){
  .svc{animation:none;opacity:1;transform:none}
  .svc__bg{transition:none}
}

/* =====================================================================
   HORIZONTAL PAGE TRANSITION (JS-driven, visible slide)
   ===================================================================== */
.deck-body{transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform}
html.nav-next .deck-body{transform:translateX(100%)}
html.nav-prev .deck-body{transform:translateX(-100%)}

/* on-load reveal of the incoming stage content */
.stage__inner{opacity:0;transform:translateY(14px);animation:rise .7s .08s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:880px){
  .deck{flex-direction:column;min-height:0}                                 /* mobile: height = content, no forced full-viewport stretch */
  .deck-body{grid-template-rows:auto auto}                                  /* don't stretch the stage row → kills the empty space below content */
  .stage{align-items:flex-start;min-height:0}
  .rail{flex-direction:row;align-items:center;width:auto;height:auto;position:sticky;top:0;
    border-right:0;border-bottom:1px solid var(--line);gap:.5rem;overflow-x:auto;padding:.55rem var(--pad)}
  .rail__logo img{width:82px}
  .rail__nav{flex-direction:row;margin:0 0 0 auto;gap:.1rem}
  .rail__item{padding:.25rem}
  .rail__l{display:none}
  .rail__c{width:34px}
  .rail__no{display:none}
  .rail__item::before{display:none}
  .rail__item:hover{transform:none}
  /* home + intro: copy scrolls OVER the fixed image backdrop, top-aligned like the other pages */
  .home,.intro{display:block;min-height:0}
  .home__lead,.intro__lead{position:relative;z-index:2;max-width:none;margin:0;
    text-shadow:0 1px 12px rgba(255,255,255,.92),0 0 4px rgba(255,255,255,.85)}
  .stats{gap:1.1rem 1.6rem}
  .nav-arrow b{font-size:.9rem}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .nav-arrow small{display:none}
  .deck-dots a{width:18px}
  .deck-dots a[aria-current]{width:26px}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .stage__inner{opacity:1;transform:none;animation:none}
  .stats>li{animation:none;opacity:1;transform:none}
  .deck-body{transition:none}
  html.nav-next .deck-body,html.nav-prev .deck-body{transform:none}
  .shot-track{animation:none}
  .bg::before,.bg::after{animation:none}
}

/* =====================================================================
   WE DELIVER (04) + ON THE BOOKS (05) — white pages
   ===================================================================== */
body.page-white{background:#fff}
body.page-white .bg{display:none}
/* On the Books: soft "open book" backdrop behind the grid */
.bg-book__img{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),#fff url('../img/bg/book.webp') center 44%/cover no-repeat}

/* --- We Deliver: centred copy over the full-bleed magnolia --- */
.stage__inner.deliver{align-self:stretch;animation:none;opacity:1;transform:none;position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center}
.deliver__bg{position:absolute;inset:-4vh -4vw;z-index:0;
  background:#fff url('../img/bg/magnolia.webp') center center/cover no-repeat}
.deliver__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.38) 100%)}
.deliver__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  max-width:60ch;padding:clamp(1rem,3vw,2rem)}
.deliver .d-title{font-size:clamp(2.4rem,6vw,5rem);margin:.8rem 0 1.4rem}
.deliver__list{display:flex;flex-direction:column;gap:.5rem;max-width:54ch}
.deliver__list li{position:relative;font-size:clamp(.86rem,1.05vw,1.05rem);line-height:1.4;color:var(--ink);font-weight:500}
.deliver__list li + li{padding-top:.5rem;border-top:1px solid var(--line)}

/* --- On the Books: 5x3 grid of case-study circles, brand-colour rings --- */
.stage__inner.books{align-self:stretch;animation:none;opacity:1;transform:none;
  display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.8rem)}
.books-head{flex:0 0 auto;text-align:center}
.books-head .eyebrow{margin-bottom:.5rem;justify-content:center}
.books-head .d-title{font-size:clamp(1.8rem,3.4vw,3rem)}
.books-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(.6rem,1.6vw,1.7rem) clamp(.6rem,1.4vw,1.4rem);align-content:center;
  max-width:1100px;margin-inline:auto;width:100%}
.book{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  opacity:0;transform:translateY(16px);animation:bookIn .6s var(--ease) forwards}
.book__circle{display:block;width:100%;max-width:148px;aspect-ratio:1;border-radius:50%;
  background:#ece9e2 50% 50%/cover no-repeat;border:3px solid var(--ring,var(--red));filter:grayscale(1) contrast(.88) brightness(1.12) opacity(.55);  /* soft, faded grey; full colour on hover */
  box-shadow:0 6px 20px rgba(26,23,24,.10);transition:transform .5s var(--ease),box-shadow .5s var(--ease),filter .55s var(--ease)}
.book:hover .book__circle{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 30px rgba(26,23,24,.18);filter:none}
.book__label{font-size:.72rem;line-height:1.3;color:var(--ink);font-weight:600;max-width:16ch}
.book__label b{display:block;font-weight:500;color:var(--ink-60);font-size:.66rem;letter-spacing:.02em;margin-top:.12rem}
.book:nth-child(5n+1){--ring:#314C5A}
.book:nth-child(5n+2){--ring:#FF5C35}
.book:nth-child(5n+3){--ring:#CB2023}
.book:nth-child(5n+4){--ring:#FFB600}
.book:nth-child(5n+5){--ring:#F93549}
.book:nth-child(1){animation-delay:.04s}.book:nth-child(2){animation-delay:.08s}.book:nth-child(3){animation-delay:.12s}.book:nth-child(4){animation-delay:.16s}.book:nth-child(5){animation-delay:.2s}
.book:nth-child(6){animation-delay:.24s}.book:nth-child(7){animation-delay:.28s}.book:nth-child(8){animation-delay:.32s}.book:nth-child(9){animation-delay:.36s}.book:nth-child(10){animation-delay:.4s}
.book:nth-child(11){animation-delay:.44s}.book:nth-child(12){animation-delay:.48s}.book:nth-child(13){animation-delay:.52s}.book:nth-child(14){animation-delay:.56s}.book:nth-child(15){animation-delay:.6s}
@keyframes bookIn{to{opacity:1;transform:none}}

@media (max-width:980px){
  .books-grid{grid-template-columns:repeat(3,1fr);max-width:600px}
}
@media (max-width:560px){
  .books-grid{grid-template-columns:repeat(2,1fr)}
  .deliver__list{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .book{animation:none;opacity:1;transform:none}
  .book__circle{transition:none}
}

/* =====================================================================
   CASE STUDY DETAIL  (case-study.php)
   ===================================================================== */

/* Page shell — allow vertical scroll; rail stays sticky as normal */
body.cs-page .deck-body{ overflow-y:auto }
body.cs-page .stage{ align-items:flex-start; padding-block:clamp(1.8rem,4vw,3.5rem) }

/* Centred content column */
.cs{
  width:100%;
  max-width:min(1180px,92vw);
  margin-inline:auto;
  padding-block:clamp(1.4rem,3vw,2.8rem);
  display:flex;
  flex-direction:column;
  gap:clamp(1rem,2.4vw,1.8rem);
}

/* Back link */
.cs-back{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-60);
  transition:color .25s;
}
.cs-back:hover{ color:var(--ink); }

/* Title */
.cs-title{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,5rem);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-block:.15rem .05rem;
}

/* Meta row */
.cs-meta{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(.7rem,2vw,1.4rem) clamp(1.4rem,3.5vw,2.8rem);
  padding:0;
  margin-block:.2rem;
}
.cs-meta li{
  display:flex;
  flex-direction:column;
  gap:.22rem;
}
.cs-meta li > span{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-40);
}
.cs-meta li > b{
  font-family:var(--display);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  letter-spacing:.01em;
}

/* -------- Image slider -------- */
.cs-slider{
  position:relative;
  width:100%;
}
.cs-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:clamp(.6rem,1.4vw,1rem);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:.4rem;
}
.cs-track::-webkit-scrollbar{ display:none; }

.cs-slide{
  /* narrower than the track so the next image peeks in on the right */
  flex:0 0 clamp(260px,78%,780px);
  scroll-snap-align:center;
  margin:0;
}
.cs-slide img{
  width:100%;
  aspect-ratio:3/2;          /* matches the landscape galleries → full frame shows, far less crop */
  height:auto;
  max-height:74vh;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:4px;
}
@media (max-width:680px){
  .cs-slide{ flex:0 0 86%; }  /* bigger image on phones, smaller peek */
}

/* ---- Sorted Design International site credit (fixed top-right, every page) ---- */
.site-credit{
  position:fixed;
  top:12px;
  right:14px;
  z-index:120;
  font-family:Montserrat,system-ui,-apple-system,sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9a9a9a;
  text-decoration:none;
  white-space:nowrap;
  opacity:.85;
  text-shadow:0 1px 2px rgba(233,233,226,.55);  /* legibility over photo backdrops */
  transition:color .2s,opacity .2s;
}
.site-credit:hover,.site-credit:focus-visible{ color:#231F20; opacity:1; }

/* ---- Contact: "Sent" success state — form disappears, SENT fades in then away ---- */
.cform-sent{display:none;font-family:var(--display);font-weight:300;font-size:clamp(2.8rem,8vw,5.5rem);
  letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;opacity:0;padding-block:clamp(3rem,16vh,9rem);line-height:1}
.contact__form-col.is-sent .contact__header,.contact__form-col.is-sent .cform{display:none}
.contact__form-col.is-sent .cform-sent{display:block;animation:cformSent 3.4s cubic-bezier(.16,1,.3,1) forwards}
@keyframes cformSent{0%{opacity:0;transform:translateY(18px)}18%{opacity:1;transform:translateY(0)}66%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
.cform-error{margin-top:1rem;color:#9a9a9a;font-size:.9rem;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){ .contact__form-col.is-sent .cform-sent{animation:none;opacity:1} }
@media (max-width:680px){                    /* mobile: credit becomes a separated hairline bar pinned to the very bottom */
  .site-credit{ font-size:8px; letter-spacing:.14em; top:auto; bottom:0; left:0; right:0; transform:none;
    text-align:center; padding:9px 12px; background:#fff; border-top:1px solid rgba(35,31,32,.16); text-shadow:none; z-index:130; }
  .deck-body{ padding-bottom:42px; }          /* keep the prev/next nav clear of the credit bar (no cramming) */
}

/* Arrow buttons */
.cs-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  font-size:1.55rem;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 3px 14px rgba(26,23,24,.18);
  transition:background .22s, box-shadow .22s, transform .3s var(--ease);
  z-index:4;
  padding-bottom:.1em; /* optical centre for chevron */
}
.cs-arrow--prev{ left:clamp(.5rem,1.5vw,1.1rem); }
.cs-arrow--next{ right:clamp(.5rem,1.5vw,1.1rem); }
.cs-arrow:hover{
  background:#fff;
  box-shadow:0 6px 20px rgba(26,23,24,.26);
  transform:translateY(calc(-50% - 2px));
}

/* Dots */
.cs-dots{
  display:flex;
  justify-content:center;
  gap:.55rem;
  padding-top:.9rem;
}
.cs-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
  opacity:.2;
  transition:opacity .22s, background .22s, transform .22s;
  padding:0;
}
.cs-dot--active{
  background:var(--red);
  opacity:1;
  transform:scale(1.25);
}
.cs-dot:hover:not(.cs-dot--active){ opacity:.45; }

/* Body copy */
.cs-body{
  max-width:60ch;
  color:var(--ink-60);
  line-height:1.7;
  font-size:clamp(.95rem,1.05vw,1.05rem);
}

/* -------- Prev / Next navigation -------- */
.cs-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(.8rem,2vw,1.6rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(.4rem,1vw,.8rem);
}
.cs-nav__link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  max-width:38%;
  transition:gap .28s var(--ease), color .2s;
}
.cs-nav__prev{ flex-direction:row; }
.cs-nav__next{ flex-direction:row; text-align:right; }
.cs-nav__link small{
  display:block;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-40);
}
.cs-nav__link b{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(.82rem,1.1vw,1rem);
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.15;
  margin-top:.18rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:26ch;
}
.cs-nav__arr{
  font-family:var(--display);
  font-size:1.6rem;
  line-height:1;
  color:var(--red);
  flex-shrink:0;
  transition:transform .28s var(--ease);
}
.cs-nav__prev:hover{ gap:1.1rem; }
.cs-nav__prev:hover .cs-nav__arr{ transform:translateX(-4px); }
.cs-nav__next:hover{ gap:1.1rem; }
.cs-nav__next:hover .cs-nav__arr{ transform:translateX(4px); }

/* All work centred link */
.cs-nav__all{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-60);
  white-space:nowrap;
  transition:color .22s;
  flex-shrink:0;
}
.cs-nav__all:hover{ color:var(--ink); }

/* -------- Responsive -------- */
@media (max-width:640px){
  .cs-title{ font-size:clamp(2rem,9vw,3rem); }

  .cs-nav{
    flex-wrap:wrap;
    justify-content:center;
    gap:1.1rem;
  }
  .cs-nav__link{
    max-width:100%;
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .cs-nav__next{ justify-content:center; text-align:center; }
  .cs-nav__all{ order:-1; }

  .cs-arrow{ width:38px; height:38px; font-size:1.3rem; }
}

/* Reduced motion: smooth-scroll already degrades natively; nothing extra needed */
@media (prefers-reduced-motion:reduce){
  .cs-arrow{ transition:none; }
  .cs-dot{ transition:none; }
  .cs-nav__link{ transition:none; }
  .cs-nav__arr{ transition:none; }
}

/* =====================================================================
   CONTACT PAGE  —  page 06
   ===================================================================== */

/* ── Layout: 2-col grid inside .stage__inner.contact ── */
.contact{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
  width:100%;
  max-width:1120px;
  padding:clamp(1.5rem,4vw,3rem) 0;
}

/* ── Header ── */
.contact__header{
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}

/* ── Form column ── */
.contact__form-col{
  display:flex;
  flex-direction:column;
}

/* ── Banners ── */
.contact-banner{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.1rem;
  border-radius:3px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.contact-banner--success{
  background:rgba(0,140,60,.08);
  color:#007a38;
  border:1px solid rgba(0,140,60,.2);
}
.contact-banner--error{
  background:rgba(203,32,35,.07);
  color:var(--red);
  border:1px solid rgba(203,32,35,.18);
}

/* ── Form ── */
.cform{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.cform__row{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.cform__row--2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.cform__field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.cform__label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
}
.req{
  color:var(--red);
}
.cform__input{
  font-family:var(--body);
  font-size:.875rem;
  font-weight:400;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:2px;
  padding:.75rem 1rem;
  width:100%;
  transition:border-color .18s, box-shadow .18s;
  -webkit-appearance:none;
  appearance:none;
}
.cform__input::placeholder{
  color:var(--ink-40);
}
.cform__input:hover{
  border-color:rgba(26,23,24,.32);
}
.cform__input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(203,32,35,.10);
}
.cform__textarea{
  min-height:9rem;
  resize:vertical;
  line-height:1.6;
}

/* Submit row */
.cform__row--submit{
  margin-top:.5rem;
}
.cform__btn{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--red);
  border:none;
  border-radius:2px;
  padding:.85rem 1.8rem;
  cursor:pointer;
  transition:background .2s, box-shadow .2s, transform .15s;
}
.cform__btn:hover{
  background:#a81b1e;
  box-shadow:0 4px 14px rgba(203,32,35,.28);
  transform:translateY(-1px);
}
.cform__btn:active{
  transform:translateY(0);
  box-shadow:none;
}
.cform__arr{
  font-size:1rem;
  transition:transform .2s;
}
.cform__btn:hover .cform__arr{
  transform:translateX(4px);
}

/* Honeypot: visually and programmatically hidden */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  tab-index:-1;
}

/* ── Disabled nav-next ── */
.nav-arrow.is-disabled{
  opacity:.3;
  pointer-events:none;
  cursor:default;
}

/* ── Details column ── */
.contact__details-col{
  position:sticky;
  top:2rem;
  padding-top:7.5rem; /* aligns roughly with form top below heading */
}
.contact__details-inner{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.contact__person{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.contact__role{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-40);
  margin-bottom:.1rem;
}
.contact__name{
  font-family:var(--display);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink);
  line-height:1.15;
  margin-bottom:.3rem;
}
.contact__link{
  font-size:.82rem;
  font-weight:500;
  color:var(--ink-60);
  transition:color .18s;
  display:inline-block;
  line-height:1.7;
}
.contact__link:hover{
  color:var(--red);
}
.contact__link--email{
  word-break:break-all;
}

.contact__divider{
  width:2.5rem;
  height:1px;
  background:var(--line);
  margin:.5rem 0;
}

/* Social icons */
.contact__social-label{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-40);
  margin-bottom:.75rem;
}
.contact__social-links{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.social-icon{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-60);
  transition:color .18s;
}
.social-icon svg{
  flex-shrink:0;
  transition:color .18s;
}
.social-icon:hover{
  color:var(--red);
}

/* ── Responsive collapse ≤820px ── */
@media(max-width:820px){
  .contact{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .contact__details-col{
    position:static;
    padding-top:0;
    border-top:1px solid var(--line);
    padding-top:2rem;
  }
  .cform__row--2{
    grid-template-columns:1fr;
  }
}

/* ── Reduced motion overrides ── */
@media(prefers-reduced-motion:reduce){
  .cform__input{ transition:none; }
  .cform__btn{ transition:none; }
  .cform__arr{ transition:none; }
  .contact__link{ transition:none; }
  .social-icon{ transition:none; }
}

/* --- Typography: thin Open Sans display + slight letter-spacing (was Allomira) --- */
.d-title,.svc-h1,.svc__title,.cs-title,.cs-meta b,.stat__n,.cs-nav__link b{font-weight:300;letter-spacing:.05em}
.rail__c b,.rail__no,.rail__no b,.nav-arrow b{font-weight:400;letter-spacing:.04em}

/* Contact: soft "reach out" backdrop (rainbow hand) */
.contact-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),#fff url('../img/bg/contact.webp') center/cover no-repeat}
.contact-banner[hidden]{display:none}
.contact__role{color:var(--red)}