/* Twin Galaxies Business Hub
   Palette, type and rules per TG Brand Bible v3 and Site Instruction Package v2.19.
   Single committed dark theme. Every colour is painted explicitly.
   House rule, enforced site wide: no em dashes anywhere, including alt text. */

:root{
  --bg:        #05070F;
  --card:      #121A2B;
  --headline:  #F2F4F8;
  --body:      #B9C0CC;
  --hairline:  #3A4356;
  --signal:    #469BF5;   /* links and accents. the only accent. */
  --verified:  #3EDC97;   /* verified result numbers only. never on text or chrome. */

  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw:   1200px;

  --nav-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--signal); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* numbers are data: line them up */
.num,.stat,table,time{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

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

/* ---------- fixed video background ----------------------------------
   This viewport layer never participates in document flow. The page scrolls
   independently above it, while the video stretches to the exact viewport. */
.site-background{
  position:fixed; inset:0; z-index:0; width:100vw; height:100vh;
  overflow:hidden; pointer-events:none; background:var(--bg);
}
.site-background-video{
  display:block; width:100vw; height:100vh; object-fit:fill; filter:brightness(.75);
}
.site-background::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,7,15,.58),rgba(5,7,15,.38) 42%,rgba(5,7,15,.68));
}
.page{ position:relative; z-index:1; }

/* ---------- nav ------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,7,15,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--nav-h); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  color:var(--body); font-size:14px; font-weight:500;
}
.nav-links a:hover{ color:var(--headline); text-decoration:none; }
.nav-links a.is-current{ color:var(--headline); font-weight:600; }
/* Contact carries the accent in the approved mockup, on every page. */
.nav-links a.is-accent{ color:var(--signal); }

/* The official lockup is the supplied SVG, used as supplied. It is never
   retyped, recoloured or rebuilt as text (Brand Bible, and the August 26
   lockup decision). Clear space around it is the height of the atom mark. */
.lockup{ display:block; }
.lockup img{ height:26px; width:auto; }
.footer .lockup img{ height:32px; }
.footer .lockup{ margin-bottom:14px; }

.navtoggle{
  display:none; background:none; border:1px solid var(--hairline); border-radius:4px;
  color:var(--headline); padding:8px 12px; font:inherit; font-size:13px; cursor:pointer;
}

/* ---------- montage (beat 1) ----------------------------------------- */
.montage{ position:relative; }
.montage-eyebrow{
  position:absolute; top:18px; left:var(--gutter); z-index:2;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,244,248,.92); font-weight:600;
}
.montage-strip{
  display:grid;
  /* Column widths are the five images' own aspect ratios, so at one shared
     row height every image sits in a slot of exactly its own proportions and
     object-fit has nothing to crop. The v14 mockup lays the row out the same
     way, variable widths with thin black gutters, but sizes it about 4%
     taller than the images allow, which is why its own MK1 x MKII tile loses
     the M and the E. Height here is derived instead of chosen:
     (100% - four gutters) / sum of the five ratios. */
  grid-template-columns:0.749768fr 0.750000fr 0.928684fr 0.849609fr 1.050000fr;
  gap:0.4%;
  background:var(--bg);
  /* A flat px cap would re-introduce cropping on wide screens, which is the
     whole thing this layout exists to avoid, so the ceiling is vh instead of
     px: it only binds when the window is wider than about 2:1, which is
     ultrawide territory. Every 16:9 and 16:10 display gets the exact
     proportions. */
  height:max(150px, min(22.74vw, 46vh));
}
.montage-cell{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.montage-cell img{ width:100%; height:100%; object-fit:cover; }
/* one grade per campaign, visible only if an image fails to load */
.m1{ background:linear-gradient(160deg,#0E2A4A,#071627); }
.m2{ background:linear-gradient(160deg,#3A2410,#1B1008); }
.m3{ background:linear-gradient(160deg,#12341C,#08170D); }
.m4{ background:linear-gradient(160deg,#2E1436,#150A19); }
.m5{ background:linear-gradient(160deg,#3A3410,#191607); }
.montage-cell .slot{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,244,248,.42); text-align:center; padding:0 14px; line-height:1.8;
}
/* cells 2 and 4 sit taller, the staggered read from the mockup */

/* ---------- statement (beat 2) --------------------------------------- */
.statement{ padding:clamp(80px,13vw,170px) 0 clamp(40px,6vw,72px); text-align:center; }
.statement h1{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  color:var(--headline);
  font-size:clamp(38px,7.4vw,86px);
  line-height:1.06; letter-spacing:-.005em;
  margin:0; text-wrap:balance;
  max-width:16ch; margin-inline:auto;
}

/* ---------- thesis (beat 3) ------------------------------------------ */
.thesis{ padding:0 0 clamp(90px,14vw,190px); text-align:center; }
.thesis p{ margin:0 auto; max-width:60ch; }
.thesis .lead{ font-size:clamp(17px,2vw,21px); color:var(--headline); line-height:1.62; }
.thesis .sub{ margin-top:20px; font-size:15px; color:var(--body); }

/* ---------- section furniture ---------------------------------------- */
.eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--signal); margin:0 0 14px;
}
.h2{
  font-family:var(--display); font-weight:700;
  color:var(--headline); font-size:clamp(26px,3.4vw,38px);
  line-height:1.2; margin:0 0 22px; text-wrap:balance;
}

/* ---------- halo (beat 4) -------------------------------------------- */
.halo{ padding:0 0 clamp(90px,13vw,170px); }
.halo-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px); align-items:center; margin-top:clamp(18px,3vw,38px);
}
.halo-figure{ margin:0; }
.halo-figure figcaption{
  margin-top:18px; font-size:12.5px; color:#7E8899; max-width:60ch;
}
.halo-copy .claim{
  font-family:var(--display); font-weight:700; color:var(--headline);
  font-size:clamp(19px,2.3vw,25px); line-height:1.32; margin:0 0 26px;
}
.stat-num{
  font-family:var(--display); font-weight:800; color:var(--verified);
  font-size:clamp(44px,6vw,68px); line-height:1; margin:0;
}
.tier{
  display:inline-block; margin-top:10px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#7E8899;
}
.stat-label{ margin:14px 0 0; font-size:15px; color:var(--body); }
.stat-note{ margin:10px 0 0; font-size:15px; color:var(--headline); font-weight:600; }

/* ---------- doors (beat 5) ------------------------------------------- */
.doors{ padding:0 0 clamp(90px,13vw,160px); }
.doors-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.door{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px;
  padding:30px 28px 32px; display:flex; flex-direction:column;
}
.door .eyebrow{ margin-bottom:16px; }
.door h3{
  font-family:var(--display); font-weight:700; color:var(--headline);
  font-size:20px; line-height:1.28; margin:0 0 14px;
}
.door p{ margin:0 0 28px; font-size:14.5px; line-height:1.62; }
.door .btn{ margin-top:auto; align-self:flex-start; }

.btn{
  display:inline-block; background:var(--signal); color:#04121F;
  font-family:var(--text); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:6px; border:0; cursor:pointer;
}
.btn:hover{ background:#5FAAF7; text-decoration:none; }

/* ---------- footer ---------------------------------------------------- */
.footer{ border-top:1px solid var(--hairline); padding:44px 0 56px; }
.footer-in{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ color:var(--body); font-size:14px; }
.footer-links a:hover{ color:var(--headline); text-decoration:none; }
.footer-line{ margin:18px 0 0; font-size:13.5px; color:#7E8899; }

/* ---------- responsive ------------------------------------------------ */
@media (max-width:900px){
  .halo-grid{ grid-template-columns:1fr; }
  .doors-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#080C18; border-bottom:1px solid var(--hairline);
    padding:8px var(--gutter) 20px;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:12px 0; width:100%; font-size:15px; }
  .navtoggle{ display:block; }
  .nav-in{ position:relative; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .site-background-video{ visibility:hidden; }
}

/* ====================================================================
   INTERIOR PAGES
   ==================================================================== */

/* ---------- page hero ------------------------------------------------ */
.hero{ padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,86px); }
.hero h1{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  color:var(--headline); font-size:clamp(30px,5.2vw,58px);
  line-height:1.1; letter-spacing:-.005em; margin:0; max-width:20ch; text-wrap:balance;
}
.hero .sub{ margin:22px 0 0; font-size:clamp(15px,1.7vw,17px); max-width:62ch; }
.hero .sub.strong{ color:var(--headline); font-weight:600; }

/* ---------- genre strip (enterprise beat 1) -------------------------- */
.genre{ position:relative; overflow:hidden; }
.genre-strip{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0.4%;
  background:var(--bg);
  /* the five stills agree on aspect to within 0.1% (0.9589 to 0.9598), so
     equal slots are already their own proportions. Height is derived the
     same way as the montage: (100% - four gutters) / 4.7959. */
  height:max(140px, min(20.52vw, 46vh));
}
.genre-cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.genre-cell img{ width:100%; height:100%; object-fit:cover; }
.genre-cell .slot{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,244,248,.45); text-align:center; padding:0 12px; line-height:2;
}
.genre-cell .slot b{ display:block; color:rgba(242,244,248,.72); font-weight:600; letter-spacing:.2em; }
.g1{ background:linear-gradient(160deg,#123420,#08170D); }
.g2{ background:linear-gradient(160deg,#12314A,#071A28); }
.g3{ background:linear-gradient(160deg,#122A52,#07162C); }
.g4{ background:linear-gradient(160deg,#3A2410,#1B1008); }
.g5{ background:linear-gradient(160deg,#3A3410,#191607); }

/* ---------- section block -------------------------------------------- */
.block{ padding:0 0 clamp(72px,11vw,140px); }
.block-center{ text-align:center; }
.block-center .h2{ margin-inline:auto; max-width:24ch; margin-bottom:clamp(30px,5vw,54px); }

/* ---------- proof panels (image spec 3) ------------------------------ */
.panels{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.panel{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px;
  padding:26px 24px 28px;
}
.panel .eyebrow{ margin-bottom:14px; }
.panel .big{
  font-family:var(--display); font-weight:800; color:var(--verified);
  font-size:clamp(28px,3.6vw,38px); line-height:1.12; margin:0;
}
.panel .stack{
  font-family:var(--text); font-weight:600; color:var(--headline);
  font-size:clamp(17px,2vw,20px); line-height:1.5; margin:0;
}
.panel .tier{ margin-top:10px; }
.panel p.note{ margin:14px 0 0; font-size:14px; line-height:1.6; }

/* ---------- dials (image spec 4) ------------------------------------- */
.dial-svg{ width:100%; max-width:210px; height:auto; }
.dial-name{ font-family:var(--text); font-weight:600; color:var(--headline); font-size:15px; margin:14px 0 4px; }
.dial-hint{ font-size:12px; color:#7E8899; margin:0; }

/* enterprise: dials on the left, copy on the right */
.dials-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,80px); align-items:center; }
.dials-pair{ display:flex; gap:clamp(20px,4vw,48px); justify-content:center; text-align:center; }
.dials-copy .h2{ margin-bottom:20px; }
.dials-copy .line1{ color:var(--headline); font-weight:600; font-size:15.5px; margin:0 0 10px; }
.dials-copy .line2{ margin:0; font-size:15.5px; }

/* brands: two equal columns, each dial above its own headline and text */
.dials-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,72px); text-align:center; }
.dials-cols .col-head{
  font-family:var(--text); font-weight:600; color:var(--headline);
  font-size:clamp(16px,1.9vw,18px); margin:22px 0 10px;
}
.dials-cols .col-body{ margin:0 auto; max-width:44ch; font-size:14.5px; }
.dials-cols svg{ margin-inline:auto; }

/* ---------- two cards ------------------------------------------------- */
.twocard{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.twocard .card{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:26px 24px;
}
.twocard h3{ font-family:var(--text); font-weight:600; color:var(--headline); font-size:16px; margin:0 0 12px; }
.twocard p{ margin:0; font-size:14.5px; line-height:1.62; }

/* ---------- six reasons band (brands) --------------------------------- */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.reason{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:24px 22px 26px;
}
.reason h3{
  color:var(--signal); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; margin:0 0 12px; line-height:1.5;
}
.reason p{ margin:0; font-size:14px; line-height:1.62; }

/* ---------- current opportunity (brands beat 3) ----------------------- */
.opportunity{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px;
  padding:24px clamp(20px,3vw,30px) 28px;
}
.opportunity .eyebrow{ margin-bottom:16px; }
/* The announcement asset is used as supplied. Never recomposed or restyled. */
.opportunity img{ width:100%; height:auto; border-radius:4px; display:block; }
.opportunity .btn{ margin-top:22px; }
.opportunity-ask{
  margin:14px 0 0; font-size:14px; color:#8892A4;
}

/* ---------- closing cta box ------------------------------------------ */
.ctabox{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px;
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px); text-align:center;
}
.ctabox h2{
  font-family:var(--display); font-weight:700; color:var(--headline);
  font-size:clamp(21px,2.9vw,29px); line-height:1.28; margin:0 auto 14px; max-width:26ch; text-wrap:balance;
}
.ctabox p{ margin:0 auto 26px; max-width:56ch; font-size:15px; }
.wrongdoor{ margin:22px 0 0; font-size:14px; color:#7E8899; }
.wrongdoor a{ font-weight:600; }

/* ---------- six boxes (beta beat 2) ----------------------------------- */
.subcaption{ margin:0 0 clamp(24px,3.5vw,34px); font-size:14.5px; color:var(--body); max-width:78ch; }
.sixbox{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* ---------- limited beta program (beta beat 3) ------------------------ */
.program{ max-width:88ch; margin-top:16px; }
.program h3{
  color:var(--signal); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin:0 0 8px;
}
.program .sub-block + .sub-block{ margin-top:38px; }
.program .intro{ margin:0 0 16px; font-size:15px; }
.program ul{ margin:0; padding-left:20px; }
.program li{ margin:0 0 14px; font-size:14.5px; line-height:1.65; }
.program li::marker{ color:var(--signal); }
.program li b{ color:var(--headline); font-weight:600; }
.program .signoff{ color:var(--headline); font-weight:600; margin:18px 0 0; font-size:15px; }

/* ---------- forms ----------------------------------------------------- */
.formcard{
  background:var(--card); border:1px solid var(--hairline); border-radius:10px;
  padding:clamp(28px,4vw,44px) clamp(22px,3.5vw,44px);
}
.fieldset{ border:0; padding:0; margin:0 0 40px; }
.fieldset:last-of-type{ margin-bottom:26px; }
.fieldset legend{
  font-family:var(--display); font-weight:700; color:var(--headline);
  font-size:19px; padding:0; margin:0 0 6px;
}
.fieldset .legend-note{ margin:0 0 22px; font-size:14px; color:var(--body); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label,.field .lab{
  font-size:13.5px; font-weight:600; color:var(--headline); margin:0 0 8px;
}
.field .hint{ font-size:13px; color:#7E8899; margin:0 0 10px; font-weight:400; }
.field input[type=text],.field input[type=email],.field input[type=url],
.field select,.field textarea{
  width:100%; background:#0A1120; color:var(--headline);
  border:1px solid var(--hairline); border-radius:6px;
  padding:12px 13px; font:inherit; font-size:14.5px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field select{ appearance:none; background-image:none; padding-right:34px; }
.selectwrap{ position:relative; }
.selectwrap::after{
  content:""; position:absolute; right:14px; top:50%; width:7px; height:7px;
  border-right:1.5px solid #7E8899; border-bottom:1.5px solid #7E8899;
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--signal); outline:none; }

/* multi-select chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; border:1px solid var(--hairline); border-radius:999px;
  padding:9px 16px; font-size:13.5px; color:var(--body); cursor:pointer; user-select:none;
}
.chip input:checked + span{ border-color:var(--signal); color:var(--headline); background:rgba(70,155,245,.12); }
.chip input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:2px; }

/* commitments */
.commit{ display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; }
.commit input{ margin-top:3px; width:16px; height:16px; accent-color:var(--signal); flex:0 0 auto; }
.commit label{ font-size:14.5px; line-height:1.6; color:var(--body); font-weight:400; margin:0; }

.formnote{ margin:18px 0 0; font-size:13.5px; color:#7E8899; max-width:72ch; }
.formintro{ margin:0 0 clamp(24px,3.5vw,34px); font-size:15px; max-width:80ch; }

/* ---------- legal pages ------------------------------------------------ */
.legal{ padding:clamp(48px,7vw,90px) 0 clamp(72px,10vw,130px); }
.legal .doc{ max-width:72ch; }
.legal h2{ font-family:var(--display); font-weight:700; color:var(--headline); font-size:20px; margin:36px 0 12px; }
.legal p{ font-size:15px; line-height:1.7; }
.pending{
  border:1px dashed var(--hairline); border-radius:8px; padding:22px 24px;
  color:#7E8899; font-size:14.5px;
}

/* ---------- interior responsive ---------------------------------------- */
@media (max-width:900px){
  .panels,.reasons,.sixbox{ grid-template-columns:1fr; }
  .dials-split{ grid-template-columns:1fr; }
  .twocard{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .dials-cols{ grid-template-columns:1fr; }
  /* same reasoning as the montage below: two cells fit, so pan across
     all five rather than dropping three of the genres the section
     exists to show. */
  .genre-strip{
    width:225%; height:clamp(150px,46.17vw,340px);
    animation:genre-pan 28s ease-in-out infinite alternate;
  }
  .dials-pair{ gap:14px; }
}

/* ---------- hero call to action row (beta) ---------------------------- */
.hero-cta{ margin:30px 0 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-cta-note{ font-size:14px; color:#7E8899; }

/* ---------- contact --------------------------------------------------- */
.contact-lead{ margin:16px 0 0; font-size:16px; max-width:56ch; }
.contact-form{ max-width:720px; margin-top:clamp(28px,4vw,42px); }
.sent{
  background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--verified);
  border-radius:8px; padding:18px 22px; color:var(--headline); font-size:15px; margin:0 0 24px;
}

/* Honeypot. Not in the package: added because a public form without one fills
   with junk. Moved off screen rather than display:none, which some bots skip. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Utility classes replacing inline style attributes. The production Content
   Security Policy has no unsafe-inline for styles, so an inline style
   attribute would simply be dropped and the layout would shift. */
.legal h1{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  color:var(--headline); font-size:clamp(28px,4.4vw,44px);
  line-height:1.12; margin:0 0 28px;
}
.mt-22{ margin-top:22px; }
.mt-24{ margin-top:24px; }
.w-420{ max-width:420px; }

/* ---------- art scrims ------------------------------------------------
   Images fill their cell and are cropped by object-fit. A scrim keeps the
   montage eyebrow and the genre labels legible over whatever lands behind
   them, rather than trusting the image to be dark in the right corner. */
.montage::before{
  content:""; position:absolute; inset:0 0 auto 0; height:110px; z-index:1;
  background:linear-gradient(to bottom, rgba(5,7,15,.75), rgba(5,7,15,0));
  pointer-events:none;
}
.genre-cell{ isolation:isolate; }
.genre-cell::after{
  /* measured off the v15 mockup: its scrim starts around 55% of the cell
     and bottoms out near .64 alpha. Anything heavier eats the artwork. */
  content:""; position:absolute; inset:auto 0 0 0; height:48%;
  background:linear-gradient(to top, rgba(5,7,15,.68), rgba(5,7,15,0));
  pointer-events:none;
}
.genre-label{
  position:absolute; left:16px; right:16px; bottom:12px; z-index:2; margin:0;
  text-align:left; color:var(--headline);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}

/* A checkbox group that needs at least one answer. HTML cannot express that
   natively, so it is marked here and enforced in tg.js, with the server
   refusing the post regardless of what the browser does. */
/* Visible only to assistive technology. Used where a marker carries meaning
   the native attribute cannot: a checkbox group's "at least one" requirement
   has no HTML equivalent, so its asterisk has to be readable, while an
   asterisk beside a control that already carries `required` would only make
   a screen reader say it twice. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.req{
  color:var(--signal); font-weight:700; margin-left:5px;
  font-size:1em; letter-spacing:0; text-transform:none;
}
.reqkey{ margin:0 0 22px; font-size:13px; color:#8892A4; }
.reqkey .req{ margin-left:0; margin-right:4px; }
.chips.is-missing{
  outline:1px solid var(--signal); outline-offset:8px; border-radius:6px;
}
.group-error{
  margin:10px 0 0; font-size:13px; color:var(--headline);
}

/* ---------- deliverables (enterprise) ---------------------------------
   Nine items in a three by three grid, bold lead phrase and one line each.
   Deliberately not cards: the brief calls for a grid, not nine boxes. */
.deliverables{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,40px); }
.deliverable h3{
  font-family:var(--text); font-weight:600; color:var(--headline);
  font-size:15.5px; margin:0 0 6px;
}
.deliverable p{ margin:0; font-size:14.5px; line-height:1.6; }
@media (max-width:900px){ .deliverables{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .deliverables{ grid-template-columns:1fr; } }


/* ---------- montage on small screens ----------------------------------
   Roughly two tiles fit at once, so the strip pans slowly across all five and
   back rather than freezing on the first two. The grid and its proportional
   columns are kept exactly as they are at every other width: only the track
   gets wider. Gutters are a percentage for the same reason, so they scale
   with it. Nothing is hidden and nothing is re-cropped. Motion is opt-out at
   the end of this file. */
@media (max-width:680px){
  .montage{ overflow:hidden; }
  .montage-strip{
    width:225%; height:clamp(160px,51.16vw,380px);
    animation:montage-pan 28s ease-in-out infinite alternate;
  }
}
@keyframes montage-pan{
  from{ transform:translateX(0); }
  to  { transform:translateX(-55.5%); }
}
@keyframes genre-pan{
  from{ transform:translateX(0); }
  to  { transform:translateX(-55.5%); }
}
@media (prefers-reduced-motion:reduce){
  .montage-strip,
  .genre-strip{ animation:none; }
}

/* The server refused a post. Only seen when the browser check did not run,
   so it has to be legible on its own without any of the inline group errors
   that the script would normally have shown first. */
.form-error{
  margin:0 0 22px; padding:12px 16px; border-radius:6px;
  border:1px solid var(--signal); border-left-width:3px;
  background:rgba(70,155,245,.08); color:var(--headline); font-size:14px;
}
.field.is-missing input,
.field.is-missing select,
.field.is-missing textarea{ border-color:var(--signal); }