/* ==========================================================================
   KC GROUP — Franchising & Licensing Asia 2026

   Navy / gold / silver corporate system. Two structural motifs:
   1. the slanted card (parallelogram) used for the hero brand deck
   2. the 18.6 degree cut carried in the brand photography, which is the
      angle the original booth artwork is drawn on
   ========================================================================== */

:root{
  /* brand-neutral core */
  --navy:        #16357F;
  --navy-deep:   #0B1E4B;
  --navy-ink:    #071433;
  --navy-hover:  #0F2A69;

  --gold:        #B0862B;
  --gold-lt:     #D8B45C;
  --gold-pale:   #EBD9A8;

  --ink:         #14181F;
  --text-2:      #55606F;
  --text-3:      #8791A0;

  --white:       #FFFFFF;
  --silver-1:    #F7F9FB;
  --silver-2:    #EDF0F4;
  --silver-3:    #DFE4EA;
  --line:        #D6DCE4;
  --line-dark:   rgba(255,255,255,.16);

  /* the four brands */
  --kcuts:       #2E6DB4;
  --kskin:       #16181C;
  --clippers:    #C8262F;
  --smoovee:     #0B2E5C;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shell:      1200px;
  --shell-wide: 1640px;
  --gutter:     24px;
  --cut:        108.6deg;   /* the booth-artwork diagonal */
  --header-h:   78px;

  /* one vertical rhythm for every band below the hero, so the page reads as
     a run of chapters rather than a set of boxes with accidental gaps */
  --band:       clamp(64px, 6.6vw, 98px);
  --band-tight: clamp(46px, 4.8vw, 68px);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,dl,dd{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

::selection{ background:var(--navy); color:#fff; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.why :focus-visible,
.register :focus-visible,
.foot :focus-visible{ outline-color:var(--gold-lt); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
h1,h2,h3,
.fig,
.agenda-t,
.lockup{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
}

h2{
  font-weight:800;
  font-size:clamp(30px, 4.2vw, 52px);
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--navy);
}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}

.gold-rule{
  display:block;
  width:96px; height:3px;
  margin-top:22px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
}

.head{ max-width:640px; margin-bottom:var(--band-tight); }
.head h2{ margin-top:16px; }
.head-lede{
  margin-top:24px;
  font-size:17.5px;
  color:var(--text-2);
  max-width:56ch;
}
.head-centre{ max-width:760px; margin-inline:auto; text-align:center; }
.head-centre .gold-rule{ margin-inline:auto; }
.head-centre .head-lede{ margin-inline:auto; }
.head-light h2{ color:var(--white); }
.head-light .head-lede{ color:rgba(255,255,255,.72); }
.head-tight{ margin-bottom:0; }

/* the manual breaks in the headings are set for a wide measure; on a phone
   they leave orphans, so let the text wrap on its own */
@media (max-width:680px){
  h2 br{ display:none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  padding:16px 26px;
  border:2px solid transparent;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-block{ width:100%; }
.btn-pill{ border-radius:999px; padding:13px 22px; font-size:12.5px; }

.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 10px 22px -12px rgba(11,30,75,.7); }
.btn-navy:hover{ background:var(--navy-deep); }

.btn-hero{ padding:18px 22px 18px 30px; font-size:14.5px; }
.btn-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
}
.btn-arrow svg{ width:14px; height:14px; }
.btn-navy:hover .btn-arrow{ border-color:#fff; }

.btn-brand{
  background:var(--brand, var(--navy));
  color:#fff;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.8);
}
.btn-brand:hover{ filter:brightness(1.12); }
.btn .dl{ width:17px; height:17px; }

/* used on the navy bands, where a navy button would disappear */
.btn-gold{
  background:var(--gold);
  color:var(--navy-ink);
  box-shadow:0 12px 26px -14px rgba(176,134,43,.9);
}
.btn-gold:hover{ background:var(--gold-lt); }
.btn-gold .btn-arrow{ border-color:rgba(7,20,51,.4); }
.btn-gold:hover .btn-arrow{ border-color:rgba(7,20,51,.75); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line);
}
.masthead-row{
  display:flex;
  align-items:center;
  gap:28px;
  height:100%;
}

.lockup{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.lockup-icon{ height:30px; width:auto; }
.lockup-logo{ height:58px; width:auto; }
.lockup-rule{ width:1px; height:34px; background:var(--line); }
.lockup-event{ display:flex; flex-direction:column; line-height:1.05; }
.lockup-event-1{
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
}
.lockup-event-2{
  font-weight:700;
  font-size:15px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
}

.mainnav{
  margin-left:auto;
  display:flex;
  gap:34px;
}
.mainnav a{
  position:relative;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  padding:6px 0;
}
.mainnav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.mainnav a:hover::after{ transform:scaleX(1); }

.masthead-cta{ flex:none; }

@media (max-width:1040px){ .mainnav{ gap:22px; } .mainnav a{ font-size:14px; } }
@media (max-width:880px){
  .mainnav{ display:none; }
  .masthead-cta{ margin-left:auto; }
}
@media (max-width:520px){
  .masthead-cta{ display:none; }
  .lockup-event-1,.lockup-event-2{ font-size:13px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(40px, 5vw, 68px) 0 clamp(56px, 6vw, 78px);
  background:url('../images/hero-bg.webp') center bottom / cover no-repeat, #F4F6F9;
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(36px, 4vw, 56px);
  align-items:center;
}
@media (min-width:1000px){
  .hero-grid{ grid-template-columns:minmax(0, 440px) minmax(0, 1fr); }
}

.hero-h1{
  display:flex;
  flex-direction:column;
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.014em;
}
.hero-h1 span{ white-space:nowrap; }
.hero-h1 .l1,
.hero-h1 .l2{ color:var(--navy); font-size:clamp(28px, 3.85vw, 56px); }
.hero-h1 .l3{
  color:var(--ink);
  font-size:clamp(18px, 2.4vw, 35px);
  margin-top:9px;
  letter-spacing:.004em;
}

.hero-sub{
  margin-top:22px;
  font-size:17px;
  font-weight:600;
  color:var(--navy);
}

.reach{
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:18px;
}
.reach-badge{
  flex:none;
  width:60px; height:60px;
  border-radius:50%;
  border:2px solid var(--gold);
  display:grid;
  place-items:center;
  color:var(--gold);
  background:rgba(255,255,255,.6);
}
.reach-badge svg{ width:32px; height:32px; stroke-width:1.5; }
.reach-figure{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:700;
  font-size:clamp(19px, 2vw, 24px);
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.1;
}
.reach-figure strong{
  font-weight:800;
  font-size:1.5em;
  color:var(--gold);
  letter-spacing:-.02em;
}
.reach-figure sup{ font-size:.55em; vertical-align:super; }
.reach-markets{
  margin-top:7px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-2);
}
@media (min-width:1000px){ .reach-markets{ white-space:nowrap; } }
.reach-markets i{ font-style:normal; color:var(--gold); margin:0 5px; }

.hero-copy .btn-hero{ margin-top:32px; }

/* ---- the slanted brand deck, built from the pre-cut brand panels ----
   each source PNG has a wide transparent margin either side of its own
   diagonal cut, so the panels are overlapped (not gapped) by the measured
   offset between one panel's cut and the next, so the cuts actually touch */
.deck{
  position:relative;
  width:100%;
  aspect-ratio:1.679;
}
.deck-panel{
  position:absolute;
  top:0;
  width:35.11%;
  height:100%;
  filter:drop-shadow(0 14px 22px rgba(11,30,75,.18));
}
.deck-panel:nth-child(1){ left:0; }
.deck-panel:nth-child(2){ left:21.63%; }
.deck-panel:nth-child(3){ left:43.25%; }
.deck-panel:nth-child(4){ left:64.88%; }
.deck-panel img{ width:100%; height:100%; display:block; position:relative; z-index:1; }
.deck-panel::after{
  content:"";
  position:absolute;
  left:30%; right:8%;
  bottom:-6px;
  height:16px;
  background:var(--glow);
  filter:blur(11px);
  opacity:.5;
  border-radius:50%;
  z-index:0;
}
.deck-panel--kcuts   { --glow:var(--kcuts); }
.deck-panel--kskin   { --glow:#8A9099; }
.deck-panel--clippers{ --glow:var(--clippers); }
.deck-panel--smoovee { --glow:var(--smoovee); }

.scroll-cue{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:40px; height:40px;
  margin:clamp(20px, 3vw, 34px) auto 0;
  color:var(--navy);
  opacity:.55;
  animation:nudge 2.4s ease-in-out infinite;
}
.scroll-cue svg{ width:26px; height:26px; stroke-width:2.2; }
.scroll-cue:hover{ opacity:1; }
@keyframes nudge{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(6px); }
}

@media (max-width:999px){
  .deck{ max-width:520px; margin-inline:auto; }
}
@media (max-width:520px){
  .hero-copy .btn-hero{ width:100%; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section{
  padding:var(--band) 0;
  background:var(--white);
}
.section-tint{ background:var(--silver-2); }

/* --------------------------------------------------------------------------
   Brands

   The four brands are the product here, so they get the most structure:
   first a lineup that shows all four together as a house of brands, then a
   chapter each. Every brand carries its own colour through the accent rule,
   the index, the stat figures and the brochure button.
   -------------------------------------------------------------------------- */
.brands{
  padding:var(--band) 0;
  background:
    linear-gradient(180deg, var(--white) 0%, var(--silver-1) 22%, var(--silver-1) 100%);
}

/* ---- the lineup ---- */
.lineup{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:clamp(56px, 6vw, 88px);
}
.lineup-card{
  --brand:var(--navy);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:34px 20px 26px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 18px 34px -30px rgba(11,30,75,.6);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.lineup-card::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px;
  height:3px;
  background:var(--brand);
}
.lineup-card:hover{
  transform:translateY(-5px);
  border-color:var(--silver-3);
  box-shadow:0 30px 50px -32px rgba(11,30,75,.55);
}
.lineup-kcuts   { --brand:var(--kcuts); }
.lineup-kskin   { --brand:var(--kskin); }
.lineup-clippers{ --brand:var(--clippers); }
.lineup-smoovee { --brand:var(--smoovee); }

/* one optical height for four logos of very different proportions */
.lineup-logo{
  height:68px;
  display:grid;
  place-items:center;
}
.lineup-logo img{ width:auto; max-width:100%; }
.lineup-kcuts    .lineup-logo img{ height:36px; }
.lineup-kskin    .lineup-logo img{ height:54px; }
.lineup-clippers .lineup-logo img{ height:68px; }
.lineup-smoovee  .lineup-logo img{ height:58px; }

.lineup-desc{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
  text-align:center;
  line-height:1.5;
}
.lineup-go{
  display:grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--text-3);
  transition:border-color .22s ease, color .22s ease, background-color .22s ease;
}
.lineup-go svg{ width:13px; height:13px; }
.lineup-card:hover .lineup-go{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

/* ---- one chapter per brand ---- */
.brand{
  --brand:var(--navy);
  --wash:var(--silver-2);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 30px 60px -50px rgba(11,30,75,.85);
  padding:clamp(26px, 3.2vw, 48px);
}
.brand + .brand{ margin-top:clamp(20px, 2.4vw, 32px); }

.brand-kcuts   { --brand:var(--kcuts);    --wash:#E9F1FA; }
.brand-kskin   { --brand:var(--kskin);    --wash:#EEEFF2; }
.brand-clippers{ --brand:var(--clippers); --wash:#FAECED; }
.brand-smoovee { --brand:var(--smoovee);  --wash:#E8EEF6; }

.brand-row{
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(0, 1fr);
  gap:clamp(28px, 4.4vw, 64px);
  align-items:center;
}
.brand-flip .brand-row{ grid-template-columns:minmax(0, 1fr) minmax(0, .78fr); }
.brand-flip .brand-art { order:2; }
.brand-flip .brand-body{ order:1; }

/* the photo is a slant-cut cutout with transparent margins, so it needs a
   plate behind it or the silhouette reads as an accident on white */
/* min-width:0 matters: the photo is a 391px-wide PNG, and without it the
   grid column refuses to shrink below that on a phone and the plate bleeds
   straight out of the card */
.brand-art{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  padding:22px 0;
}
.brand-body{ min-width:0; }
.brand-plate{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background:linear-gradient(155deg, var(--wash) 0%, var(--white) 100%);
  border:1px solid var(--line);
}
.brand-plate::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--brand);
}
.brand-photo{
  position:relative;
  z-index:1;
  width:88%;
  max-width:min(340px, 100%);
  filter:drop-shadow(0 22px 34px rgba(11,30,75,.24));
}
.brand-art .badge{
  position:absolute;
  z-index:2;
  right:6%; bottom:8%;
  width:88px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));
}

/* kcuts supplies a straight photograph rather than a pre-cut cutout, so it is
   framed to fill the panel instead of floating on a plate. The booth diagonal
   is not applied here: it would slice through the stylist and the wall logo. */
.brand-art-photo{ padding:0; }
.brand-art-photo .brand-plate{ display:none; }
.brand-art-photo .brand-photo{
  width:100%;
  max-width:none;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-left:3px solid var(--brand);
  filter:none;
  box-shadow:0 26px 44px -30px rgba(11,30,75,.6);
}

.brand-index{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--gold);
}

.brand-logo{ margin-top:24px; }
.brand-logo img{ width:auto; max-width:100%; }
.brand-kcuts    .brand-logo img{ height:56px; }
.brand-kskin    .brand-logo img{ height:72px; }
.brand-clippers .brand-logo img{ height:108px; }
.brand-smoovee  .brand-logo img{ height:86px; }

.brand-kicker{
  margin-top:20px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
}
.brand-desc{
  margin-top:14px;
  max-width:50ch;
  font-size:17px;
  color:var(--text-2);
}

.brand-stats{
  display:flex;
  flex-wrap:wrap;
  margin-top:30px;
  border-top:1px solid var(--line);
}
.brand-stats li{
  flex:1 1 130px;
  padding:20px 20px 0 0;
}
.bs-v{
  display:block;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(26px, 2.6vw, 34px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--brand);
}
.bs-v sup{ font-size:.5em; vertical-align:super; }
.bs-u{ font-size:.5em; margin-left:3px; letter-spacing:0; }
.bs-word{ font-size:clamp(20px, 2vw, 25px); text-transform:uppercase; letter-spacing:-.005em; }
.bs-l{
  display:block;
  margin-top:9px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-3);
  line-height:1.45;
}

.brand-markets{
  margin-top:22px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.brand-markets i{ font-style:normal; color:var(--gold); margin:0 6px; }

.brand .btn-brand{ margin-top:30px; }

@media (max-width:1000px){
  .lineup{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:860px){
  .brand-row,
  .brand-flip .brand-row{ grid-template-columns:minmax(0, 1fr); gap:30px; }
  .brand-flip .brand-art { order:1; }
  .brand-flip .brand-body{ order:2; }
  .brand-art{ padding:26px 0; }
  .brand-photo{ width:66%; max-width:min(260px, 100%); }
  .brand-art .badge{ width:70px; right:12%; }
  .brand-kcuts    .brand-logo img{ height:44px; }
  .brand-kskin    .brand-logo img{ height:58px; }
  .brand-clippers .brand-logo img{ height:84px; }
  .brand-smoovee  .brand-logo img{ height:68px; }
}
@media (max-width:520px){
  .lineup{ grid-template-columns:1fr; gap:12px; }
  .lineup-card{ flex-direction:row; justify-content:space-between; padding:20px 18px; gap:16px; }
  .lineup-logo{ height:40px; flex:none; }
  .lineup-kcuts    .lineup-logo img{ height:22px; }
  .lineup-kskin    .lineup-logo img{ height:34px; }
  .lineup-clippers .lineup-logo img{ height:40px; }
  .lineup-smoovee  .lineup-logo img{ height:36px; }
  .lineup-desc{ flex:1; text-align:left; font-size:10.5px; }
  .brand-stats li{ flex:1 1 100%; padding-right:0; }
  .brand-stats li + li{ border-top:1px solid var(--silver-2); }
  /* the brochure labels are long, so let them wrap rather than run out
     of the full-width button */
  .brand .btn-brand{
    width:100%;
    white-space:normal;
    text-align:center;
    font-size:13px;
    letter-spacing:.06em;
    padding-inline:18px;
  }
}

/* --------------------------------------------------------------------------
   Why invest
   -------------------------------------------------------------------------- */
.why{
  position:relative;
  overflow:hidden;
  padding:var(--band) 0;
  background:
    repeating-linear-gradient(var(--cut),
      rgba(255,255,255,0) 0 92px,
      rgba(255,255,255,.045) 92px 98px,
      rgba(255,255,255,0) 98px 200px),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
  color:var(--white);
}

/* left-aligned figure rail, split by gold hairlines rather than boxed */
.figures{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid rgba(216,180,92,.35);
  border-bottom:1px solid rgba(216,180,92,.35);
  margin-bottom:clamp(48px, 5vw, 72px);
}
.figures li{
  padding:clamp(26px, 3vw, 38px) clamp(18px, 2.4vw, 32px);
  border-left:1px solid var(--line-dark);
}
.figures li:first-child{ border-left:0; padding-left:0; }
.fig{
  display:block;
  font-weight:800;
  font-size:clamp(38px, 4.6vw, 58px);
  line-height:.94;
  letter-spacing:-.035em;
  color:var(--gold-lt);
}
.fig sup{ font-size:.42em; vertical-align:super; }
.fig-label{
  display:block;
  margin-top:14px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  line-height:1.5;
}

.traits{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.trait{
  position:relative;
  padding:clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 36px) clamp(30px, 3vw, 40px);
  background:rgba(255,255,255,.04);
}
.trait-n{
  display:block;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:16px;
}
.trait h3{
  font-weight:700;
  font-size:clamp(18px, 1.7vw, 21px);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--white);
}
.trait p{
  margin-top:14px;
  font-size:16px;
  color:rgba(255,255,255,.7);
  max-width:44ch;
}

.why-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  margin-top:clamp(34px, 3.6vw, 48px);
}
.why-note{
  font-size:13px;
  color:rgba(255,255,255,.42);
  max-width:52ch;
}

@media (max-width:820px){
  .figures{ grid-template-columns:repeat(2, 1fr); }
  .figures li:nth-child(3){ border-left:0; padding-left:0; }
  .figures li:nth-child(-n+2){ border-bottom:1px solid var(--line-dark); }
  .traits{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .why-foot .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.agenda-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(36px, 6vw, 88px);
  align-items:start;
}
/* this heading sits in the narrower of the two columns, so it needs its own
   ceiling or it breaks across three lines */
.agenda-grid .head h2{ font-size:clamp(28px, 3.3vw, 41px); }
.agenda-cta{ margin-top:34px; }

.agenda{ counter-reset:step; }
.agenda li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px, 2vw, 26px);
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.agenda li:first-child{ border-top:1px solid var(--line); }
.agenda-n{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:14px;
  letter-spacing:.1em;
  color:var(--gold);
  padding-top:5px;
}
.agenda-t{
  display:block;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:700;
  font-size:clamp(17px, 1.6vw, 19px);
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--navy);
}
.agenda-d{
  display:block;
  margin-top:7px;
  color:var(--text-2);
  font-size:16px;
  line-height:1.55;
}
@media (min-width:901px){
  .agenda-grid .head-tight{ position:sticky; top:calc(var(--header-h) + 24px); }
}
@media (max-width:900px){
  .agenda-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .agenda-cta{ width:100%; }
}

/* --------------------------------------------------------------------------
   Event
   -------------------------------------------------------------------------- */
.event{
  padding:var(--band) 0 0;
  background:var(--white);
}

.event-facts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-top:clamp(40px, 4.5vw, 60px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.event-facts > div{
  padding:clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 28px);
  border-left:1px solid var(--line);
}
.event-facts > div:first-child{ border-left:0; padding-left:0; }
.event-facts dt{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.event-facts dd{
  margin:12px 0 0;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-size:clamp(16px, 1.6vw, 19px);
  font-weight:700;
  line-height:1.25;
  color:var(--navy);
}

/* the four booth panels, shown as the backdrop wall.
   overlapped the same way as the hero deck: each source PNG has a wide
   transparent margin either side of its own diagonal cut, so panels are
   positioned by the measured offset between one cut and the next. */
.wall{
  margin:clamp(40px, 4.4vw, 62px) 0 0;
  padding:clamp(40px, 4.4vw, 62px) 0;
  background:
    repeating-linear-gradient(var(--cut),
      rgba(255,255,255,0) 0 92px,
      rgba(255,255,255,.04) 92px 98px,
      rgba(255,255,255,0) 98px 200px),
    linear-gradient(170deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
}
.wall-frame{
  background:var(--white);
  padding:26px 20px 0;
  box-shadow:0 44px 80px -46px rgba(0,0,0,.85);
}
.wall-panels{
  position:relative;
  width:100%;
  aspect-ratio:1.679;
}
.wall-panels img{ position:absolute; top:0; width:35.11%; height:100%; }
.wall-panels img:nth-child(1){ left:0; }
.wall-panels img:nth-child(2){ left:21.63%; }
.wall-panels img:nth-child(3){ left:43.25%; }
.wall-panels img:nth-child(4){ left:64.88%; }
.wall-cap{
  margin-top:22px;
  text-align:center;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-lt);
}

.gift{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  max-width:760px;
  margin:clamp(38px, 4vw, 54px) auto var(--band-tight);
  padding:24px 28px;
  border:1px solid var(--gold-pale);
  border-left:4px solid var(--gold);
  background:#FCF9F1;
  font-size:16px;
  color:var(--text-2);
}
.gift-tag{
  flex:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  padding-top:4px;
}
.gift-body{ flex:1 1 300px; }
.gift strong{ color:var(--navy); font-weight:700; }

@media (max-width:900px){
  .wall-frame{ padding:16px 10px 0; }
}
@media (max-width:660px){
  .event-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .event-facts > div:nth-child(3){ border-left:0; padding-left:0; }
  .event-facts > div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Register
   -------------------------------------------------------------------------- */
.register{
  position:relative;
  overflow:hidden;
  padding:var(--band) 0;
  background:
    repeating-linear-gradient(var(--cut),
      rgba(255,255,255,0) 0 92px,
      rgba(255,255,255,.045) 92px 98px,
      rgba(255,255,255,0) 98px 200px),
    linear-gradient(200deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
  color:var(--white);
}
.register-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(36px, 6vw, 80px);
  align-items:start;
}
.register-copy h2{ color:var(--white); margin-top:16px; }
.register-copy > p{
  margin-top:24px;
  color:rgba(255,255,255,.72);
  max-width:42ch;
}
.assure{ margin-top:28px; display:grid; gap:12px; }
.assure li{
  position:relative;
  padding-left:26px;
  font-size:15.5px;
  color:rgba(255,255,255,.76);
}
.assure li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:14px; height:2px;
  background:var(--gold);
}
.register-alt{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line-dark);
  font-size:15px;
  color:rgba(255,255,255,.5);
}
.register-alt a{
  color:var(--gold-lt);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media (min-width:901px){
  .register-copy{ position:sticky; top:calc(var(--header-h) + 24px); }
}

.form{
  background:var(--white);
  color:var(--ink);
  border-top:4px solid var(--gold);
  padding:clamp(24px, 3vw, 38px);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin:0 0 18px; border:0; padding:0; }
.field > label,
.field > legend{
  display:block;
  padding:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:9px;
}
.hint{ color:var(--text-3); text-transform:none; letter-spacing:.02em; font-weight:500; }

.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--silver-1);
  border:1px solid var(--line);
  border-radius:3px;
  font-family:var(--sans);
  font-size:16px;
  padding:13px 14px;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field textarea{ resize:vertical; min-height:88px; }
.field input::placeholder{ color:var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  background:var(--white);
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(22,53,127,.14);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--navy) 50%),
                   linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{
  border-color:var(--clippers);
  background:#FDF3F4;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ margin:0; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.chip span:hover{ border-color:var(--navy); color:var(--navy); }
.chip input:checked + span{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.chip input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

.form .btn-block{ margin-top:8px; }
.form-note{ margin-top:14px; font-size:13px; color:var(--text-3); }
.form-done{
  margin-top:22px;
  padding:20px 22px;
  border:1px solid var(--gold-pale);
  border-left:4px solid var(--gold);
  background:#FCF8EE;
  font-size:15.5px;
  color:var(--text-2);
}
.form-done[hidden]{ display:none; }
.form-done-t{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:700;
  font-size:19px;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:8px;
}

@media (max-width:900px){ .register-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .row{ grid-template-columns:1fr; gap:0; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{
  background:var(--navy-ink);
  color:rgba(255,255,255,.5);
  padding:34px 0;
  border-top:1px solid var(--line-dark);
}
.foot-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.foot .lockup-event-1{ color:#fff; }
.foot-brands{ display:flex; gap:20px; flex-wrap:wrap; font-size:14.5px; }
.foot-brands a{ color:rgba(255,255,255,.72); }
.foot-brands a:hover{ color:#fff; }
.foot-legal{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Mobile dock
   -------------------------------------------------------------------------- */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(120%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.dock.is-up{ transform:translateY(0); }
@media (max-width:880px){ .dock{ display:block; } }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.hero-h1,
.hero-copy .gold-rule,
.hero-sub,
.reach,
.hero-copy .btn-hero,
.deck{
  animation:rise .7s cubic-bezier(.16,.84,.32,1) both;
}
.hero-h1              { animation-delay:.05s; }
.hero-copy .gold-rule { animation-delay:.14s; }
.hero-sub             { animation-delay:.20s; }
.reach                { animation-delay:.27s; }
.hero-copy .btn-hero  { animation-delay:.34s; }
.deck                 { animation-delay:.20s; }

@keyframes rise{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.32,1);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print{
  .masthead,.dock,.scroll-cue,.form{ display:none !important; }
  body{ background:#fff; color:#000; }
  .why,.register,.foot{ background:#fff !important; color:#000 !important; }
  .why h2,.register-copy h2,.trait h3{ color:#000 !important; }
}