/* ============================================================
   TOP-KNOCK INTERNATIONAL — SITE STYLESHEET
   Direction: "Broadcast Overlay"
   Chamfered glass panels over a purple-black base, brand
   magenta-to-orchid gradient sampled from the logo.
   Shared by every page. Page-specific rules live at the bottom.
   ============================================================ */
:root{
  /* Brand — sampled from the Top-Knock logo, not invented */
  --pink:       #E30D7A;   /* ring highlight — brightest accent */
  --berry:      #BD1D74;   /* "INTERNATIONAL" wordmark */
  --orchid:     #9B459A;   /* tagline + left of the ring */
  --ring:       linear-gradient(135deg, var(--orchid) 0%, var(--pink) 100%);

  --pitch:      #0B0711;   /* page base — near-black with a purple cast */
  --deck:       #140C1D;   /* raised band */
  --deck-2:     #1C1127;   /* deepest inset */
  --chalk:      #F3EEF6;   /* primary text */
  --haze:       #A597AF;   /* secondary text */
  --hair:       rgba(243,238,246,.13);
  --field:      #1A1324;   /* form input fill — solid so autofill can match */
  --field-hi:   #221A2E;   /* input fill on focus */

  --glass:      rgba(255,255,255,.055);
  --glass-hi:   rgba(255,255,255,.085);
  --blur:       blur(22px) saturate(1.35);

  /* the signature: a cut corner, not a rounded one */
  --cut:        20px;
  --chamfer:    polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --chamfer-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));

  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  --data:    "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--pitch);
  color:var(--chalk);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:800;
  line-height:.94;
  letter-spacing:-.005em;
  margin:0;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* eyebrow — mono, tracked out, like a graphics-package label */
.eyebrow{
  font-family:var(--data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pink);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--pink);
  flex:none;
}

/* ============================================================
   THE PANE — chamfered glass with a floodlight sweep
   ============================================================ */
.pane{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  clip-path:var(--chamfer);
  overflow:hidden;
  transition:background .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
/* bright top edge, stopped short of the cut corner */
.pane::before{
  content:"";
  position:absolute;
  top:0; left:0; right:var(--cut);
  height:2px;
  background:var(--ring);
  opacity:.6;
  transition:opacity .35s ease;
  z-index:2;
}
/* the sweep — a floodlight passing across the panel */
.pane::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-60%;
  width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.08) 42%, rgba(227,13,122,.14) 56%, transparent);
  transform:skewX(-14deg);
  transition:left .85s cubic-bezier(.25,.8,.3,1);
  pointer-events:none;
  z-index:1;
}
.pane:hover::after,
.pane:focus-within::after{ left:115%; }
.pane:hover,
.pane:focus-within{ background:var(--glass-hi); }
.pane:hover::before,
.pane:focus-within::before{ opacity:1; }

.pane > *{ position:relative; z-index:3; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:15px 26px;
  font-family:var(--data);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  clip-path:var(--chamfer-sm);
  border:0;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease, color .25s ease;
}
.btn__arrow{ transition:transform .25s ease; }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

.btn--solid{ background:var(--ring); color:#fff; font-weight:600; }
.btn--solid:hover{ background:linear-gradient(135deg,#B052AE 0%,#FF2A90 100%); }

.btn--glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  color:var(--chalk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--glass:hover{ background:var(--glass-hi); color:var(--pink); }

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  transition:background .35s ease, box-shadow .35s ease;
}
.nav.is-stuck{
  background:rgba(11,7,17,.74);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  box-shadow:0 1px 0 var(--hair);
}
.nav__in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px var(--gutter);
  display:flex;
  align-items:center;
  gap:26px;
}
.nav__logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.nav__logo img{ height:38px; width:auto; }
.nav__logo span{
  font-family:var(--display);
  font-size:19px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.nav__links{
  display:flex;
  gap:4px;
  margin-left:auto;
  list-style:none;
  padding:0;
}
.nav__links a{
  display:block;
  padding:9px 14px;
  font-family:var(--data);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--haze);
  transition:color .2s ease;
}
.nav__links a:hover,
.nav__links a[aria-current="page"]{ color:var(--pink); }

.nav__cta{ flex:none; }

.nav__burger{
  display:none;
  background:none;
  border:0;
  padding:10px;
  cursor:pointer;
  margin-left:auto;
}
.nav__burger span{
  display:block;
  width:24px; height:2px;
  background:var(--chalk);
  margin:5px 0;
  transition:transform .3s ease, opacity .25s ease;
}
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — video with a broadcast overlay sitting on top
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:0;
  isolation:isolate;
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 90% at 70% 10%, #2A1436 0%, transparent 62%),
    linear-gradient(160deg, #170D22 0%, #0B0711 72%);
}
.hero__media video,
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.42;
}
/* vignette + bottom fade so the overlay always reads */
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--pitch) 2%, rgba(11,7,17,.32) 42%, rgba(11,7,17,.74) 100%),
    radial-gradient(90% 70% at 50% 45%, transparent 30%, rgba(11,7,17,.62) 100%);
}

/* faint floodlight beam, always moving — ambient, very slow */
.hero__beam{
  position:absolute;
  top:-30%; left:-25%;
  width:55%; height:170%;
  z-index:-1;
  background:linear-gradient(97deg, transparent, rgba(227,13,122,.075) 48%, transparent);
  transform:skewX(-11deg);
  animation:sweep 17s linear infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%   { left:-45%; opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { left:115%; opacity:0; }
}

.hero__body{
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:150px var(--gutter) 34px;
}


.hero h1{
  font-size:clamp(46px, 9vw, 128px);
  max-width:16ch;
  margin-bottom:26px;
}
.hero h1 > span{ display:block; }
.hero h1 em{
  font-style:normal;
  display:block;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__lede{
  max-width:52ch;
  color:var(--haze);
  font-size:clamp(15px, 1.6vw, 18px);
  margin:0 0 34px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* the scoreboard strip — stats live here, as hero furniture */
.strip{
  border-top:1px solid var(--hair);
  background:rgba(20,12,29,.58);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
}
.strip__in{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:26px 0;
  border-left:1px solid var(--hair);
  padding-left:22px;
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat__n{
  font-family:var(--display);
  font-size:clamp(34px, 4.4vw, 56px);
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--chalk);
}
.stat__n sup{
  font-size:.42em;
  vertical-align:super;
  margin-left:2px;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat__l{
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--haze);
  margin-top:9px;
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ padding:clamp(72px, 10vw, 132px) 0; position:relative; }
.section--deck{ background:var(--deck); }

.section__head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,64px);
  align-items:end;
  margin-bottom:clamp(38px,5vw,62px);
}
.section__head h2{ font-size:clamp(34px, 5.2vw, 66px); }
.section__head p{ color:var(--haze); margin:0; max-width:46ch; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(285px, 1fr));
  gap:14px;
}
.svc{
  padding:30px 28px 32px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  min-height:250px;
}
.svc:hover{ transform:translateY(-5px); }
.svc__code{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--pink);
  margin-bottom:auto;
}
.svc h3{
  font-size:26px;
  margin:34px 0 12px;
  max-width:12ch;
}
.svc p{
  color:var(--haze);
  font-size:14.5px;
  margin:0 0 18px;
  line-height:1.6;
}
.svc__go{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chalk);
  display:flex;
  align-items:center;
  gap:8px;
}
.svc__go svg{ transition:transform .25s ease; }
.svc:hover .svc__go{ color:var(--pink); }
.svc:hover .svc__go svg{ transform:translateX(5px); }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,68px);
  align-items:center;
}
.about h2{ font-size:clamp(32px,4.6vw,58px); margin-bottom:24px; }
.about p{ color:var(--haze); margin:0 0 18px; max-width:54ch; }
.about strong{ color:var(--chalk); font-weight:600; }

.creds{ list-style:none; padding:0; margin:30px 0 34px; }
.creds li{
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:13px 0;
  border-top:1px solid var(--hair);
  font-size:14.5px;
}
.creds li:last-child{ border-bottom:1px solid var(--hair); }
.creds b{
  font-family:var(--data);
  font-weight:500;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--pink);
  flex:none;
  width:78px;
  text-transform:uppercase;
}

.about__fig{ position:relative; }
.about__fig .pane{ padding:0; }
.about__fig img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  opacity:.85;
}

/* ============================================================
   TEAM
   ============================================================ */
.team{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media (max-width:900px){ .team{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team{ grid-template-columns:1fr; } }
.member{ padding:0; display:flex; flex-direction:column; }
.member:hover{ transform:translateY(-5px); }
.member__pic{
  aspect-ratio:1/1;
  background:var(--deck-2);
  overflow:hidden;
}
.member__pic img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.member:hover .member__pic img{ transform:scale(1.04); }
.member__body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.member h3{ font-size:21px; margin-bottom:6px; }
.member__role{
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:12px;
}
.member__quals{
  font-size:12px;
  color:var(--haze);
  letter-spacing:.02em;
  margin-bottom:14px;
  line-height:1.5;
}
.member__contact{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  gap:5px;
  font-family:var(--data);
  font-size:11.5px;
}
.member__contact a{ color:var(--haze); text-decoration:none; transition:color .2s ease; }
.member__contact a:hover{ color:var(--pink); }

/* ============================================================
   CLIENTS MARQUEE
   ============================================================ */
/* Client logos arrive on every kind of background — white JPGs, transparent
   PNGs, some already dark. Rather than give each one its own tile, which
   boxes every logo into the same rectangle regardless of its shape, the
   whole strip is one continuous light band. Each logo then sits directly
   on it at its own natural proportions, nothing is framed and nothing can
   be clipped by a tile edge. */
.marquee{
  position:relative;
  overflow:hidden;
  /* Pure white, not an off-white: most client logos are JPGs with a white
     background, and on anything but #fff each one shows as a brighter
     rectangle floating on the band. */
  background:#fff;
  clip-path:var(--chamfer);
  padding:22px 0;
}
/* The band is opaque, so the old mask (which faded it to transparent and
   took the band with it) is replaced by gradients in the band's own colour.
   They sit above the logos and fade them in and out at the two ends. */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:8%;
  min-width:40px;
  z-index:2;
  pointer-events:none;
}
.marquee::before{
  left:0;
  background:linear-gradient(90deg, #fff 20%, rgba(255,255,255,0));
}
.marquee::after{
  right:0;
  background:linear-gradient(270deg, #fff 20%, rgba(255,255,255,0));
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:46px;
  width:max-content;
  animation:roll 46s linear infinite;
}
/* Pause on hover — but only where hovering is a real thing. On a
   touch screen the hover state latches on first tap and never
   clears, which stops the marquee for good. */
@media (hover:hover){
  .marquee:hover .marquee__track{ animation-play-state:paused; }
}
@keyframes roll{ to{ transform:translateX(-50%); } }

/* No fixed box. A height cap keeps the row even; the width follows the
   logo's own aspect ratio, so a wide wordmark and a square badge both
   render whole. */
.marquee__item{
  flex:none;
  display:grid;
  place-items:center;
  height:52px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.marquee__item:hover{ transform:translateY(-3px); }
/* Fallback: a logo that reaches the track without its wrapper — an older
   hydrate.js still in someone's browser cache — is capped the same way.
   Without this it renders at its natural size and blows the band open. */
.marquee__track > img{
  display:block;
  flex:none;
  max-height:52px;
  max-width:170px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.marquee__item img{
  display:block;
  max-height:52px;
  max-width:170px;
  width:auto;
  height:auto;
  object-fit:contain;
  /* full colour, as supplied */
}

a.marquee__item{ text-decoration:none; }

@media (max-width:640px){
  .marquee{ padding:16px 0; }
  .marquee__track{ gap:32px; }
  .marquee__item{ height:40px; }
  .marquee__item img,
  .marquee__track > img{ max-height:40px; max-width:130px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,54px);
}
.contact__card{ padding:34px 32px 36px; }
.contact__card h3{ font-size:24px; margin-bottom:20px; }
.info{ list-style:none; padding:0; margin:0; }
.info li{ padding:15px 0; border-top:1px solid var(--hair); }
.info li:first-child{ border-top:0; padding-top:0; }
.info__k{
  font-family:var(--data);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:6px;
}
.info a{ text-decoration:none; transition:color .2s ease; }
.info a:hover{ color:var(--pink); }
.info address{ font-style:normal; color:var(--haze); font-size:14.5px; line-height:1.6; }

.form{ padding:34px 32px 36px; }
.form h3{ font-size:24px; margin-bottom:8px; }
.form > p{ color:var(--haze); font-size:14px; margin:0 0 24px; }
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-family:var(--data);
  font-size:10px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--haze);
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 15px;
  /* solid, not translucent: fields sit on both --pitch and --deck sections,
     and the autofill override below has to match a fixed colour */
  background:var(--field);
  border:1px solid var(--hair);
  color:var(--chalk);
  font-family:var(--body);
  font-size:15px;
  transition:border-color .25s ease, background .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--pink);
  background:var(--field-hi);
  outline:none;
}
.field textarea{ resize:vertical; min-height:104px; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--deck-2); color:var(--chalk); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form__note{
  font-size:12.5px;
  color:var(--haze);
  margin:16px 0 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--hair); padding:52px 0 30px; }
.foot__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:38px;
  margin-bottom:44px;
}
.foot__grid h4{
  font-family:var(--data);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--pink);
  text-transform:uppercase;
  margin-bottom:16px;
}
.foot__grid ul{ list-style:none; padding:0; margin:0; }
.foot__grid li{ margin-bottom:9px; }
.foot__grid a{
  color:var(--haze);
  text-decoration:none;
  font-size:14px;
  transition:color .2s ease;
}
.foot__grid a:hover{ color:var(--chalk); }
.foot__brand p{ color:var(--haze); font-size:14px; max-width:34ch; margin:14px 0 20px; }
.social{ display:flex; gap:9px; }
.social a{
  width:38px; height:38px;
  display:grid;
  place-items:center;
  background:var(--glass);
  clip-path:var(--chamfer-sm);
  color:var(--haze);
  transition:background .25s ease, color .25s ease;
}
.social a:hover{ background:var(--ring); color:#fff; }
.foot__base{
  border-top:1px solid var(--hair);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--haze);
  text-transform:uppercase;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rise{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.rise.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .section__head{ grid-template-columns:1fr; align-items:start; }
  .about{ grid-template-columns:1fr; }
  .about__fig{ order:-1; max-width:440px; }
  .contact{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  :root{ --cut:14px; }
  .nav__links{
    position:fixed;
    inset:64px 0 auto 0;
    flex-direction:column;
    gap:0;
    background:rgba(11,7,17,.96);
    -webkit-backdrop-filter:var(--blur);
    backdrop-filter:var(--blur);
    padding:14px var(--gutter) 26px;
    border-bottom:1px solid var(--hair);
    transform:translateY(-118%);
    transition:transform .38s cubic-bezier(.2,.7,.3,1);
    margin-left:0;
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ padding:14px 0; font-size:13px; border-bottom:1px solid var(--hair); }
  .nav__burger{ display:block; }
  .nav__cta{ display:none; }
  .strip__in{ grid-template-columns:1fr 1fr; }
  .stat{ padding:20px 0 20px 18px; border-top:1px solid var(--hair); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .form__row{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  /* The hero is bottom-anchored inside a full-viewport box, so on a
     tall phone the leftover space all collects under the nav — 162px
     of nothing before the headline. Trimming the box pulls the
     headline up; min-height (not height) means a short phone still
     grows to fit instead of clipping. */
  .hero{ min-height:84svh; }
  .hero__body{ padding-top:92px; }
}
@media (max-width:520px){
  .foot__base{ flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rise{ opacity:1; transform:none; }
  .hero__beam{ display:none; }
}


/* ============================================================
   INNER PAGE PRIMITIVES  (used by every page except home)
   ============================================================ */
.phero{
  position:relative;
  padding:clamp(140px,17vw,210px) 0 clamp(52px,7vw,86px);
  overflow:hidden;
  isolation:isolate;
}
.phero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 78% 0%, #2A1436 0%, transparent 60%),
    linear-gradient(170deg, #170D22 0%, var(--pitch) 68%);
}
.phero__beam{
  position:absolute;
  top:-40%; left:-25%;
  width:50%; height:180%;
  z-index:-1;
  background:linear-gradient(97deg, transparent, rgba(227,13,122,.07) 48%, transparent);
  transform:skewX(-11deg);
  animation:sweep 17s linear infinite;
  pointer-events:none;
}
.phero h1{
  font-size:clamp(40px, 7.4vw, 96px);
  max-width:15ch;
  margin-bottom:24px;
}
.phero h1 em{
  font-style:normal;
  display:block;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.phero__lede{
  max-width:56ch;
  color:var(--haze);
  font-size:clamp(15px,1.6vw,18px);
  margin:0;
}

/* breadcrumb */
.crumbs{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--haze);
  margin:0 0 26px;
}
.crumbs a{ color:var(--haze); text-decoration:none; transition:color .2s ease; }
.crumbs a:hover{ color:var(--pink); }
.crumbs span{ color:var(--pink); }

/* prose column */
.prose p{ color:var(--haze); margin:0 0 18px; max-width:62ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--chalk); font-weight:600; }
.prose h3{
  font-size:clamp(22px,2.6vw,30px);
  margin:36px 0 14px;
}

/* two-column split used across inner pages */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.split--wide-left{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
/* Added by hydrate.js when the figure had no usable image and was
   removed. Without this the prose keeps its narrow column and the
   other half of the row sits empty. Must stay after the two rules
   above: all three are single-class selectors, so source order wins. */
.split--nofig, .split--nofig.split--wide-left{ grid-template-columns:1fr; }
.split__fig .pane{ padding:0; }
/* A fixed ratio so the block looks the same whatever gets uploaded.
   Without one, object-fit has no box to fit and the section simply
   takes the photo's own proportions — a portrait upload would
   stretch the page out of shape. */
.split__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* value / capability cards */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.card{ padding:28px 26px 30px; }
.card:hover{ transform:translateY(-5px); }
.card__k{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:20px;
}
.card h3{ font-size:23px; margin-bottom:11px; }
.card p{ color:var(--haze); font-size:14.5px; margin:0; line-height:1.6; }

/* full-width team member rows (about page) */
.roster{ display:flex; flex-direction:column; gap:14px; }
.rmember{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
}
.rmember__pic{ background:var(--deck-2); }
.rmember__pic img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:1/1;
}
.rmember__body{ padding:28px 30px 30px; }
.rmember__top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px;
  margin-bottom:10px;
}
.rmember h3{ font-size:25px; }
.rmember__role{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.rmember__quals{
  font-size:12.5px;
  color:var(--haze);
  margin:0 0 14px;
}
.rmember__bio{ color:var(--haze); font-size:14.5px; margin:0 0 18px; max-width:64ch; }
.rmember__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-top:16px;
  border-top:1px solid var(--hair);
  font-family:var(--data);
  font-size:11.5px;
}
.rmember__links a{ color:var(--haze); text-decoration:none; transition:color .2s ease; }
.rmember__links a:hover{ color:var(--pink); }

/* closing call-to-action band */
.cta{
  padding:clamp(44px,6vw,70px) clamp(28px,5vw,64px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}
.cta h2{ font-size:clamp(28px,4vw,50px); max-width:18ch; }
.cta p{ color:var(--haze); margin:12px 0 0; max-width:44ch; }

@media (max-width:1000px){
  .split, .split--wide-left{ grid-template-columns:1fr; }
  .split__fig{ order:-1; max-width:460px; }
}
@media (max-width:700px){
  .rmember{ grid-template-columns:1fr; }
  .rmember__pic img{ aspect-ratio:16/10; }
}

/* ============================================================
   SERVICE PAGE — process steps
   ============================================================ */
.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0;
}
.step{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:clamp(16px,3vw,38px);
  padding:26px 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
.step:last-child{ border-bottom:1px solid var(--hair); }
.step__n{
  font-family:var(--display);
  font-size:clamp(34px,4.4vw,54px);
  font-weight:800;
  line-height:.9;
  font-variant-numeric:tabular-nums;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.step h3{ font-size:23px; margin-bottom:8px; }
.step p{ color:var(--haze); margin:0; font-size:14.5px; max-width:64ch; }

/* ============================================================
   SERVICE PAGE — FAQ
   ============================================================ */
.faqs{ display:flex; flex-direction:column; gap:10px; }
.faq{ padding:0; }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 56px 22px 26px;
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.2;
  position:relative;
  transition:color .25s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  position:absolute;
  right:26px; top:50%;
  width:11px; height:11px;
  border-right:2px solid var(--pink);
  border-bottom:2px solid var(--pink);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.faq[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:hover{ color:var(--pink); }
.faq p{
  color:var(--haze);
  margin:0;
  padding:0 26px 26px;
  font-size:14.5px;
  max-width:72ch;
}

/* related-services cards on service pages have no body copy */
.services .svc h3{ margin-top:28px; }

@media (max-width:640px){
  .step{ grid-template-columns:60px minmax(0,1fr); }
  .faq summary{ font-size:17px; padding:18px 48px 18px 20px; }
  .faq p{ padding:0 20px 20px; }
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */
.tabs{
  display:flex;
  gap:6px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.tab{
  padding:12px 22px;
  font-family:var(--data);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  color:var(--haze);
  border:0;
  cursor:pointer;
  clip-path:var(--chamfer-sm);
  transition:background .25s ease, color .25s ease;
}
.tab:hover{ color:var(--chalk); }
.tab[aria-selected="true"]{ background:var(--ring); color:#fff; }

.evgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px,1fr));
  gap:14px;
}

/* Image-led event card. The whole card is the link; the picture carries
   the weight and the text sits over a scrim at the bottom. */
.ev{
  padding:0;
  display:block;
  position:relative;
  aspect-ratio:4/3;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}
.ev__pic{
  position:absolute;
  inset:0;
  background:var(--deck-2);
}
.ev__pic img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.72;
  transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.ev:hover .ev__pic img,
.ev:focus-visible .ev__pic img{ transform:scale(1.06); opacity:.5; }

/* scrim keeps the type legible whatever the photo does */
.ev__pic::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,7,17,.94) 4%, rgba(11,7,17,.55) 42%, rgba(11,7,17,.12) 100%);
  transition:opacity .45s ease;
}
.ev:hover .ev__pic::after{ opacity:.92; }

.ev__badge{
  position:absolute;
  top:16px; left:16px;
  padding:7px 13px;
  font-family:var(--data);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--ring);
  color:#fff;
  clip-path:var(--chamfer-sm);
  z-index:4;
}

.ev__body{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:4;
  padding:26px 26px 28px;
  display:flex;
  flex-direction:column;
}
.ev__date{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:10px;
}
.ev h3{
  font-size:clamp(22px,2.4vw,28px);
  margin-bottom:8px;
  max-width:18ch;
}
.ev__venue{
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--haze);
  margin:0;
}
/* summary and the arrow only appear on hover — the card stays clean at rest */
.ev p:not(.ev__venue){
  color:var(--haze);
  font-size:14px;
  line-height:1.55;
  margin:12px 0 0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.7,.3,1), opacity .35s ease, margin .45s ease;
}
.ev:hover p:not(.ev__venue),
.ev:focus-visible p:not(.ev__venue){ max-height:7em; opacity:1; }

.ev__foot{
  margin-top:16px;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chalk);
  display:flex;
  align-items:center;
  gap:9px;
  transform:translateY(8px);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .35s ease;
}
.ev:hover .ev__foot,
.ev:focus-visible .ev__foot{ transform:none; opacity:1; }
.ev__foot span{ transition:transform .25s ease; }
.ev:hover .ev__foot span{ transform:translateX(4px); }

/* skeleton state has no photo, so give it a floor */
.ev .skel{ position:absolute; inset:0; }

@media (max-width:520px){
  .evgrid{ grid-template-columns:1fr; }
  .ev{ aspect-ratio:5/4; }
  /* touch devices never hover, so reveal by default */
  .ev p:not(.ev__venue){ max-height:7em; opacity:1; margin-top:12px; }
  .ev__foot{ transform:none; opacity:1; }
}
@media (hover:none){
  .ev p:not(.ev__venue){ max-height:7em; opacity:1; margin-top:12px; }
  .ev__foot{ transform:none; opacity:1; }
}

/* ============================================================
   EVENT DETAIL PAGE
   ============================================================ */
.evhero{
  position:relative;
  min-height:clamp(400px,62vh,640px);
  display:flex;
  align-items:flex-end;
  padding:150px 0 clamp(40px,6vw,64px);
  isolation:isolate;
}
.evhero__media{ position:absolute; inset:0; z-index:-2; background:var(--deck-2); }
.evhero__media img{ width:100%; height:100%; object-fit:cover; opacity:.45; }
.evhero__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, var(--pitch) 3%, rgba(11,7,17,.5) 45%, rgba(11,7,17,.78) 100%);
}
.evhero h1{ font-size:clamp(34px,6vw,74px); max-width:20ch; margin-bottom:20px; }

.evmeta{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:26px;
  border-top:1px solid var(--hair);
}
.evmeta div{
  padding:18px 28px 18px 0;
  margin-right:28px;
  border-right:1px solid var(--hair);
}
.evmeta div:last-child{ border-right:0; margin-right:0; }
.evmeta dt{
  font-family:var(--data);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:6px;
}
.evmeta dd{
  margin:0;
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.15;
}

@media (max-width:640px){
  .evmeta div{
    border-right:0;
    border-bottom:1px solid var(--hair);
    width:100%;
    margin-right:0;
    padding:14px 0;
  }
  .evmeta div:last-child{ border-bottom:0; }
}

.empty{
  padding:64px 32px;
  text-align:center;
  color:var(--haze);
}
.empty h3{ font-size:24px; margin-bottom:10px; color:var(--chalk); }
.empty p{ margin:0 auto; max-width:44ch; font-size:14.5px; }

.skel{
  background:linear-gradient(90deg, var(--glass) 25%, var(--glass-hi) 50%, var(--glass) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* ============================================================
   SPEC TABLE — formats, deliverables, ranges
   A real table on desktop; stacked key/value rows on mobile.
   ============================================================ */
.spec{ overflow:hidden; }
.spec table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.spec caption{
  text-align:left;
  padding:26px 28px 0;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--haze);
}
.spec th,
.spec td{
  padding:15px 20px;
  text-align:left;
  border-top:1px solid var(--hair);
  vertical-align:top;
}
.spec thead th{
  border-top:0;
  padding-top:22px;
  font-family:var(--data);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--ring);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}
.spec tbody th{
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--chalk);
  width:30%;
}
.spec td{ color:var(--haze); }
.spec td b{ color:var(--chalk); font-weight:600; font-variant-numeric:tabular-nums; }
.spec tbody tr{ transition:background .25s ease; }
.spec tbody tr:hover{ background:rgba(255,255,255,.03); }
.spec th:first-child,
.spec td:first-child{ padding-left:28px; }
.spec th:last-child,
.spec td:last-child{ padding-right:28px; }

@media (max-width:760px){
  .spec table, .spec thead, .spec tbody, .spec tr, .spec th, .spec td{ display:block; }
  .spec thead{ display:none; }
  .spec tbody tr{
    border-top:1px solid var(--hair);
    padding:18px 0 20px;
  }
  .spec tbody tr:first-child{ border-top:0; }
  .spec th, .spec td{
    border:0;
    padding:4px 24px;
    width:auto;
  }
  .spec tbody th{ font-size:20px; margin-bottom:8px; }
  .spec td::before{
    content:attr(data-k);
    display:block;
    font-family:var(--data);
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--pink);
    margin-bottom:2px;
  }
  .spec td{ margin-bottom:10px; }
}

/* ============================================================
   TIMELINE — itineraries, production schedules, week rhythms
   ============================================================ */
.tl{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
}
.tl::before{
  content:"";
  position:absolute;
  left:11px; top:12px; bottom:12px;
  width:1px;
  background:linear-gradient(to bottom, var(--pink), var(--orchid), transparent);
  opacity:.45;
}
.tli{
  position:relative;
  padding:0 0 26px 44px;
}
.tli:last-child{ padding-bottom:0; }
.tli::before{
  content:"";
  position:absolute;
  left:6px; top:9px;
  width:11px; height:11px;
  background:var(--ring);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.tli__k{
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:6px;
}
.tli h3{ font-size:20px; margin-bottom:7px; }
.tli p{ color:var(--haze); font-size:14.5px; margin:0; max-width:62ch; line-height:1.6; }

/* ============================================================
   COST DRIVERS — honest "what moves the price" list
   ============================================================ */
.drivers{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0 34px;
}
.drivers li{
  padding:16px 0;
  border-top:1px solid var(--hair);
  font-size:14.5px;
  color:var(--haze);
}
.drivers li b{
  display:block;
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chalk);
  margin-bottom:5px;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:12px;
}
.gal__i{
  padding:0;
  border:0;
  cursor:pointer;
  aspect-ratio:4/3;
  position:relative;
  background:var(--deck-2);
  display:block;
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
}
.gal__i img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .35s ease;
  opacity:.9;
}
.gal__i:hover img,
.gal__i:focus-visible img{ transform:scale(1.05); opacity:1; }
.gal__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 16px 13px;
  font-size:12.5px;
  color:var(--chalk);
  background:linear-gradient(to top, rgba(11,7,17,.9), transparent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  z-index:4;
}
.gal__i:hover .gal__cap,
.gal__i:focus-visible .gal__cap{ opacity:1; transform:none; }
.gal__i.skel{ aspect-ratio:4/3; cursor:default; }

/* homepage strip — horizontal scroll on small screens */
.galstrip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media (max-width:900px){
  .galstrip{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .galstrip > *{ flex:0 0 74%; scroll-snap-align:start; }
  .galstrip::-webkit-scrollbar{ height:3px; }
  .galstrip::-webkit-scrollbar-thumb{ background:var(--orchid); }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,5vw,60px);
  background:rgba(6,3,10,.93);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  animation:lbIn .25s ease;
}
.lb[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }

.lb__fig{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lb__fig img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  margin:0 auto;
  clip-path:var(--chamfer);
}
.lb__fig figcaption{
  margin-top:16px;
  font-size:13.5px;
  color:var(--haze);
  max-width:60ch;
  margin-inline:auto;
}

.lb__x,
.lb__nav{
  position:absolute;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:0;
  color:var(--chalk);
  cursor:pointer;
  clip-path:var(--chamfer-sm);
  transition:background .25s ease, color .25s ease;
  line-height:1;
}
.lb__x{
  top:clamp(14px,3vw,28px);
  right:clamp(14px,3vw,28px);
  width:46px; height:46px;
  font-size:26px;
}
.lb__nav{
  top:50%;
  transform:translateY(-50%);
  width:52px; height:74px;
  font-size:34px;
}
.lb__nav--prev{ left:clamp(8px,2vw,26px); }
.lb__nav--next{ right:clamp(8px,2vw,26px); }
.lb__x:hover,
.lb__nav:hover{ background:var(--ring); color:#fff; }

@media (max-width:640px){
  .lb__nav{ width:42px; height:60px; font-size:26px; }
  .lb__fig img{ max-height:66vh; }
}

/* ============================================================
   FORM ACTIONS — send / WhatsApp pair
   ============================================================ */
.form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.form__actions .btn{ flex:1 1 auto; justify-content:center; }

/* WhatsApp button stays in the site palette at rest, and only picks up
   WhatsApp green on hover — enough recognition without breaking the brand. */
.btn--wa{ gap:9px; }
.btn--wa svg{ opacity:.75; transition:opacity .25s ease; }
.btn--wa:hover{
  background:rgba(37,211,102,.14);
  color:#5BE58C;
  box-shadow:inset 0 1px 0 rgba(91,229,140,.25);
}
.btn--wa:hover svg{ opacity:1; }

@media (max-width:420px){
  .form__actions .btn{ flex:1 1 100%; }
}

/* ============================================================
   FORM FIXES
   ============================================================ */

/* Custom dropdown chevron. appearance:none strips the native arrow, so
   the select has to draw its own or it reads as a plain text field. */
.field select{
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--pink) 50%),
    linear-gradient(135deg, var(--pink) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right:44px;
}
.field select:hover{ border-color:rgba(227,13,122,.45); }
.field select:focus{
  background-image:
    linear-gradient(135deg, transparent 50%, var(--pink) 50%),
    linear-gradient(45deg,  var(--pink) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
}

/* Chrome and Safari repaint autofilled inputs with their own light
   background. The inset shadow trick is the only reliable override. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color: var(--chalk);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
          box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--chalk);
  transition: background-color 9999s ease-in-out 0s;
}
.field input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px var(--field-hi) inset;
          box-shadow: 0 0 0 1000px var(--field-hi) inset;
}

/* Placeholder contrast — the default was close to invisible on this base */
.field input::placeholder,
.field textarea::placeholder{
  color:var(--haze);
  opacity:.62;
}

/* Native dropdown list is drawn by the OS; force readable colours where
   the browser honours them. */
.field select option{
  background:var(--field);
  color:var(--chalk);
}

/* ============================================================
   LOGO
   The wordmark is part of the image, so no text sits beside it.
   ============================================================ */
.nav__logo img{ height:42px; }
.foot__brand .nav__logo img{ height:38px; }

@media (max-width:820px){
  .nav__logo img{ height:34px; }
}

/* ============================================================
   HONEYPOT
   Never shown, never focusable, never announced. A value here
   means a bot filled it in.
   ============================================================ */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   STATS STRIP — adapt to however many stats are set
   The grid column count is written inline by hydrate.js; these
   rules keep a single stat from sitting in a lonely quarter.
   ============================================================ */
.strip__in:has(.stat:only-child){ grid-template-columns:1fr; }
.strip__in:has(.stat:only-child) .stat{
  padding-left:0;
  border-left:0;
}


/* ============================================================
   NEWS
   ------------------------------------------------------------
   The news table has no slug column, so a post cannot have a
   page of its own without a rebuild — and Manju adds posts from
   the admin panel, long after any build. So the whole feed lives
   on one page and a post opens in place.

   <details> does the expanding: no JS, keyboard accessible, and
   it still works if the script fails. A post with a link_url is
   an outward link instead, since the real article lives
   elsewhere.
   ============================================================ */
.nwsgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px,1fr));
  gap:14px;
  align-items:start;
}

.nws{
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.nws:hover{ transform:translateY(-4px); }

.nws__pic{
  position:relative;
  aspect-ratio:16/9;
  background:var(--deck-2);
  overflow:hidden;
  flex:none;
}
.nws__pic img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.nws:hover .nws__pic img{ transform:scale(1.05); }

.nws__body{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.nws__date{
  font-family:var(--data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pink);
}
.nws h3{
  font-size:clamp(19px, 2.1vw, 23px);
  line-height:1.22;
  margin:0;
}
.nws__sum{
  color:var(--haze);
  font-size:14.5px;
  line-height:1.62;
  margin:0;
}

/* the expanding body */
.nws__det{ margin-top:auto; }
.nws__det > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-top:12px;
  font-family:var(--data);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chalk);
  transition:color .25s ease;
}
.nws__det > summary::-webkit-details-marker{ display:none; }
.nws__det > summary::after{
  content:"+";
  font-size:15px;
  line-height:1;
  color:var(--pink);
  transition:transform .3s ease;
}
.nws__det[open] > summary::after{ content:"\2212"; }
.nws__det > summary:hover{ color:var(--pink); }
.nws__det > summary:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
}
.nws__full{
  padding-top:14px;
  margin-top:14px;
  border-top:1px solid var(--hair);
  color:var(--haze);
  font-size:14.5px;
  line-height:1.72;
  white-space:pre-line;   /* the admin textarea keeps real line breaks */
}

/* a post that points somewhere else */
.nws__out{
  margin-top:auto;
  padding-top:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--data);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chalk);
  text-decoration:none;
  transition:color .25s ease;
}
.nws__out:hover{ color:var(--pink); }

/* The lead story gets the width of two. Below 760px every card is
   the same, so the rule only applies where there is room for it. */
@media (min-width:1040px){
  .nwsgrid--lead > .nws:first-child{
    grid-column:span 2;
    flex-direction:row;
  }
  .nwsgrid--lead > .nws:first-child .nws__pic{
    aspect-ratio:auto;
    width:52%;
    min-height:320px;
  }
  .nwsgrid--lead > .nws:first-child .nws__body{
    width:48%;
    padding:30px 32px 32px;
    justify-content:center;
  }
  .nwsgrid--lead > .nws:first-child h3{ font-size:clamp(24px, 2.6vw, 32px); }
}

/* empty state, and the skeleton while the feed loads */
.nws.skel{ min-height:300px; }
.nws__none{
  grid-column:1/-1;
  color:var(--haze);
  padding:26px 0;
}