/* Self-hosted fonts, latin subset, from Google Fonts (Open Font License).
   Cormorant Garamond and DM Sans ship as one variable file each, so a single
   download covers every weight the page uses. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   kedricbenefield.com
   Dark only. No light theme.
   Layout order: tokens, base, shared pieces, then floor by floor.
   ========================================================= */

:root{
  --navy:#0B1120;
  --navy-soft:#111A2E;
  --navy-lift:#18233B;
  --navy-deep:#070B16;
  --cream:#F5F0E8;
  --cream-dim:#D2CCC2;
  --teal:#1FA891;
  --teal-bright:#2CC8AC;
  --teal-deep:#0F6E56;
  --muted:#9AA6B8;
  --lamp:#F2B35B;
  --line:rgba(245,240,232,.13);

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter:clamp(18px, 5vw, 64px);
  --rail:88px;

  color-scheme:dark;
}

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

/* Lenis 1.3.4 (MIT) needs these few rules to own the scroll safely. */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
img,svg,video{ max-width:100%; }
img{ height:auto; }
/* a picture element is inline by default, which collapses any child image
   that is sized against its container */
picture{ display:contents; }

a{ color:var(--teal-bright); }
a:hover{ color:var(--cream); }

:focus-visible{
  outline:3px solid var(--teal-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* Visible to screen readers only. Real text, just not painted. */
.vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.wrap{
  padding-inline:var(--gutter);
  max-width:1240px;
  margin-inline:auto;
}
@media (min-width:960px){
  .wrap{ padding-right:calc(var(--gutter) + var(--rail)); }
}

/* ---------- skip link ---------- */
.skip{
  position:fixed;
  top:10px; left:10px;
  z-index:80;
  transform:translateY(-160%);
  background:var(--teal);
  color:var(--navy);
  font:700 .95rem/1 var(--body);
  text-decoration:none;
  padding:14px 18px;
  border-radius:8px;
  transition:transform .18s ease;
}
.skip:focus{ transform:translateY(0); color:var(--navy); }
@media (prefers-reduced-motion:reduce){ .skip{ transition:none; } }

/* ---------- masthead ---------- */
.masthead{
  position:absolute;
  inset:0 0 auto 0;
  z-index:20;
  pointer-events:none;
}
.masthead-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(16px,3vw,28px) var(--gutter);
  max-width:1240px;
  margin-inline:auto;
}
@media (min-width:960px){
  .masthead-in{ padding-right:calc(var(--gutter) + var(--rail)); }
}
.masthead-name{
  font:500 .82rem/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 14px rgba(7,11,22,.9);
}
.masthead-logo{ pointer-events:auto; display:block; line-height:0; }
.masthead-logo img{ width:clamp(104px,12vw,133px); height:auto; display:block; }

/* ---------- elevator ---------- */
.elevator{
  position:fixed;
  z-index:40;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(7,11,22,.96);
  border:1px solid var(--line);
}
.readout{
  display:flex; align-items:center; justify-content:center; gap:5px;
  min-width:3.2rem;
  padding:8px 6px;
  background:#050910;
  border:1px solid rgba(31,168,145,.32);
  border-radius:6px;
  font:500 1.05rem/1 var(--mono);
  color:var(--teal-bright);
  font-variant-numeric:tabular-nums;
}
.readout .arrow{ font-size:.62rem; }
.elevator ol{ list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.elevator button{
  appearance:none;
  cursor:pointer;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--navy-soft);
  color:var(--cream-dim);
  font:500 .82rem/1 var(--mono);
  display:grid; place-items:center;
  transition:background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.elevator button:hover{ border-color:var(--teal); color:var(--cream); }
.elevator button[aria-current="true"]{
  background:var(--teal);
  color:var(--navy);
  border-color:var(--teal);
  box-shadow:0 0 14px rgba(31,168,145,.5);
}
@media (prefers-reduced-motion:reduce){ .elevator button{ transition:none; } }

@media (min-width:960px){
  .elevator{
    right:18px; top:50%;
    transform:translateY(-50%);
    flex-direction:column;
    padding:10px 8px;
    border-radius:16px;
  }
  .elevator ol{ flex-direction:column-reverse; }
}
@media (max-width:959px){
  .elevator{
    left:50%; bottom:12px;
    transform:translateX(-50%);
    padding:6px;
    border-radius:999px;
    max-width:calc(100vw - 28px);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .elevator::-webkit-scrollbar{ display:none; }
  .readout{ display:none; }
  .elevator button{ width:36px; height:36px; flex:0 0 auto; }
  body{ padding-bottom:66px; }
}

/* ---------- shared floor furniture ---------- */
.floor{
  position:relative;
  padding-block:clamp(76px,12vw,152px);
  border-top:1px solid var(--line);
}
#f4:focus{ outline:none; }

.plate{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.4rem .9rem;
  margin-bottom:1.25rem;
  font:500 .74rem/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.plate b{
  background:var(--teal);
  color:var(--navy);
  font-weight:500;
  padding:6px 9px;
  border-radius:3px;
}
.floor-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.3rem,5.2vw,3.8rem);
  line-height:1.05;
  margin-bottom:1.1rem;
}
.lede{ max-width:62ch; color:var(--cream-dim); font-size:1.125rem; }

.two{ display:grid; gap:clamp(28px,5vw,72px); align-items:start; }
@media (min-width:900px){
  .two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sticky{ position:sticky; top:12vh; }
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none;
  font:700 .98rem/1 var(--body);
  padding:15px 22px;
  border-radius:999px;
  border:1px solid var(--teal);
  color:var(--cream);
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{ background:var(--teal-deep); border-color:var(--teal-deep); color:var(--cream); }
.btn.big{ background:var(--teal); color:var(--navy); font-size:1.08rem; padding:18px 28px; }
.btn.big:hover{ background:var(--teal-deep); color:var(--cream); }
.btn.small{ border-color:var(--line); color:var(--cream-dim); font-weight:500; }
.btn.small:hover{ border-color:var(--teal); background:transparent; color:var(--cream); }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }

/* =========================================================
   STREET
   ========================================================= */
#street{
  min-height:min(94svh,900px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-top:0;
  padding-block:0;
}
.street-scene{
  position:absolute; inset:0;
  transform-origin:68% 65%;          /* the front doors, tall picture */
  will-change:transform;
}
@media (min-width:900px){
  .street-scene{ transform-origin:64% 60%; }   /* the front doors, wide picture */
}
.street-scene img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.street-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,17,32,.18) 18%, rgba(11,17,32,.86) 70%, var(--navy) 100%);
}
@media (min-width:900px){
  .street-shade{
    background:
      linear-gradient(90deg, rgba(11,17,32,.92) 0%, rgba(11,17,32,.6) 42%, rgba(11,17,32,0) 68%),
      linear-gradient(180deg, rgba(11,17,32,0) 38%, rgba(11,17,32,.82) 86%, var(--navy) 100%);
  }
}
.street-copy{
  position:relative;
  z-index:3;
  width:100%;
  padding-block:0 clamp(56px,9vw,104px);
}
.eyebrow{
  font:500 .74rem/1 var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal-bright);
  margin-bottom:1rem;
}
.name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(3.1rem,10vw,7.4rem);
  line-height:.92;
  letter-spacing:-.01em;
  text-shadow:0 4px 30px rgba(7,11,22,.7);
}
.tagline{
  margin-top:1.1rem;
  max-width:44ch;
  font-size:clamp(1.05rem,2.1vw,1.28rem);
  color:var(--cream-dim);
}
.cue{
  margin-top:1.9rem;
  display:flex; align-items:center; gap:.6rem;
  font:500 .72rem/1 var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.cue i{
  display:inline-block;
  width:1px; height:28px;
  background:linear-gradient(var(--teal), transparent);
}

/* =========================================================
   LOBBY
   ========================================================= */
.portrait{
  position:relative;
  max-width:360px;
  width:min(100%,360px);
  aspect-ratio:4/5;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--navy-soft);
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.lobby-door{
  position:absolute;
  top:0; bottom:0;
  width:50.5%;
  display:none;
  background:
    repeating-linear-gradient(90deg, rgba(245,240,232,.05) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #1E2A44, #141D31);
  border:1px solid rgba(31,168,145,.3);
}
.motion .lobby-door{ display:block; }
.lobby-door.l{ left:0; }
.lobby-door.r{ right:0; }
.lobby-copy{ display:grid; gap:1rem; max-width:56ch; }

/* =========================================================
   FLOOR 1, blueprint beams
   ========================================================= */
.blueprint{
  position:relative;
  padding:12px;
  border:1px solid rgba(31,168,145,.24);
  border-radius:10px;
  background-color:#0C1A2A;
  background-image:
    linear-gradient(rgba(31,168,145,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,168,145,.08) 1px, transparent 1px);
  background-size:24px 24px;
}
.blueprint svg{ display:block; width:100%; height:auto; }
.beam{ fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round; }
.brace{ fill:none; stroke:rgba(31,168,145,.55); stroke-width:1.5; }
.col{ fill:none; stroke:rgba(31,168,145,.7); stroke-width:3; }
.beam-label{ fill:var(--cream); font:500 13px var(--mono); letter-spacing:.08em; }

.stories{ display:grid; gap:clamp(28px,4vw,44px); margin-top:2rem; }
.story h3{
  font:500 .8rem/1.2 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-bright);
  margin-bottom:.5rem;
}
.story p{ color:var(--cream-dim); max-width:60ch; }
.story .result{
  display:inline-block;
  margin-top:.6rem;
  font:500 .8rem/1 var(--mono);
  color:var(--navy);
  background:var(--cream);
  padding:7px 9px;
  border-radius:3px;
}

/* =========================================================
   FLOOR 2, the office scene
   The overlay positions are measured against the picture, so the
   frame keeps the picture's own shape and never crops it.
   ========================================================= */
#f2{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 28%, var(--navy-deep) 72%, var(--navy) 100%);
}
.office{
  position:relative;
  aspect-ratio:1152/2047;                 /* tall picture */
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#080D19;
}
@media (min-width:900px){
  .office{ aspect-ratio:1920/1081; }      /* wide picture */
}
.office img{ display:block; width:100%; height:100%; }
.office img{ object-fit:cover; }

/* the phone on the desk lights up a few times */
.op-phone{
  position:absolute;
  left:15.5%; top:85%;
  width:26%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(191,233,255,.85) 0%, rgba(191,233,255,.28) 38%, rgba(191,233,255,0) 68%);
  opacity:0;
  pointer-events:none;
}
@media (min-width:900px){ .op-phone{ left:19%; top:83.5%; width:16%; } }
.office[data-step="2"] .op-phone{ animation:buzz 1.7s ease-in-out 3; }
@keyframes buzz{ 0%,100%{ opacity:0 } 18%,58%{ opacity:1 } 38%{ opacity:.3 } }

/* the lamp's warm light turns teal */
.op-lamp{
  position:absolute;
  left:18%; top:61%;
  width:44%; aspect-ratio:1;
  transform:translate(-50%,-42%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(31,168,145,.5) 0%, rgba(31,168,145,.18) 42%, rgba(31,168,145,0) 70%);
  opacity:0;
  transition:opacity 1.4s ease;
  pointer-events:none;
}
@media (min-width:900px){ .op-lamp{ left:17%; top:40%; width:30%; } }
.office[data-step="4"] .op-lamp{ opacity:1; }

/* the teal light spills out of the window */
.op-spill{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 66% 34% at 20% 46%,
    rgba(31,168,145,.4) 0%, rgba(31,168,145,.11) 46%, rgba(31,168,145,0) 74%);
  opacity:0;
  transition:opacity 1.6s ease;
  pointer-events:none;
}
@media (min-width:900px){
  .op-spill{
    background:radial-gradient(ellipse 58% 46% at 18% 30%,
      rgba(31,168,145,.4) 0%, rgba(31,168,145,.11) 46%, rgba(31,168,145,0) 74%);
  }
}
.office[data-step="4"] .op-spill{ opacity:1; }

/* the logo sketched onto the notepad, flattened to sit on the page */
.op-mark{
  position:absolute;
  left:48%; top:80%;
  width:11%;
  height:auto;
  transform:translate(-50%,-50%) scaleY(.346);
  overflow:visible;
  pointer-events:none;
}
@media (min-width:900px){
  .op-mark{ left:46%; top:82%; width:9%; transform:translate(-50%,-50%) scaleY(.283); }
}
.sketch{
  fill:transparent;
  stroke:#8A93A3;
  stroke-width:1.6;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s ease, stroke .9s ease 1.4s, fill .9s ease 1.6s;
}
.office[data-step="3"] .sketch,
.office[data-step="4"] .sketch{ stroke-dashoffset:0; stroke:var(--teal); }
.office[data-step="3"] .sketch.a,
.office[data-step="4"] .sketch.a{ fill:#18C397; }
.office[data-step="3"] .sketch.b,
.office[data-step="4"] .sketch.b{ fill:#091821; stroke:#091821; }
.office[data-step="3"] .sketch.c,
.office[data-step="4"] .sketch.c{ fill:#129A77; }

/* still version: phones and reduced motion get the finished desk */
.static .office .sketch{ transition:none; }
.static .op-lamp, .static .op-spill{ transition:none; }

.beats{ display:grid; gap:clamp(88px,20vh,210px); padding-block:4vh 10vh; }
.beat p{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.2rem);
  line-height:1.28;
  max-width:26ch;
}
.beat.closer p{ color:var(--teal-bright); font-weight:600; }

/* on phones the scene is a still picture and the words read normally */
@media (max-width:899px){
  .beats{ gap:clamp(28px,6vw,44px); padding-block:2.2rem 0; }
  .beat p{ font-size:clamp(1.3rem,5vw,1.7rem); }
}

/* =========================================================
   FLOOR 3, windows light up
   ========================================================= */
.tower{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  padding:16px;
  border-radius:10px;
  background:#0D1628;
  border:1px solid var(--line);
}
.win{
  position:relative;
  aspect-ratio:3/4;
  background:#141F35;
  border-radius:2px;
  overflow:hidden;
}
.win span{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #46D3B9, var(--teal));
  box-shadow:0 0 14px rgba(31,168,145,.45);
  opacity:var(--lit, .55);
}

.brand{ margin-bottom:1.3rem; line-height:0; }
.brand img{ width:clamp(168px,24vw,232px); height:auto; }
.name-line{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.45rem,2.8vw,1.9rem);
  line-height:1.3;
  margin-bottom:1.2rem;
  max-width:34ch;
}
.services{ display:grid; gap:14px; margin-top:2rem; }
@media (min-width:720px) and (max-width:899px){
  .services{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.service{
  padding:20px;
  border-radius:8px;
  background:var(--navy-soft);
  border:1px solid var(--line);
}
.service h3{ font:700 1.02rem/1.3 var(--body); margin-bottom:.5rem; }
.service p{ color:var(--cream-dim); font-size:.98rem; }
.cta{ margin-top:1.7rem; }

/* =========================================================
   FLOOR 4, a hallway of doors
   ========================================================= */
.hall{
  display:grid;
  gap:clamp(20px,3vw,32px);
  margin-top:2.4rem;
  perspective:1500px;
}
@media (min-width:860px){ .hall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.room{ position:relative; border-radius:10px; }
.card{
  position:relative;
  height:100%;
  padding:22px;
  border-radius:10px;
  background:var(--navy-soft);
  border:1px solid var(--line);
  display:grid; gap:16px; align-content:start;
}
.shot{
  aspect-ratio:16/9;
  border-radius:6px;
  border:1px dashed rgba(245,240,232,.2);
  background:repeating-linear-gradient(135deg, #16213A 0 12px, #131D33 12px 24px);
  display:grid; place-items:center;
}

/* How it works, a small flow drawn in code. Every word is real text. */
.flow{
  border-radius:6px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, #101B2F, #0C1526);
  padding:clamp(14px,2.2vw,20px);
}
.flow-title{
  font:500 .68rem/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.9rem;
}
.flow-steps{
  display:grid;
  gap:10px;
  list-style:none;
  margin:0; padding:0;
  counter-reset:flowstep;
}
@media (min-width:520px){ .flow-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.flow-steps li{
  position:relative;
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px 12px 10px;
  border-radius:6px;
  background:rgba(17,26,46,.85);
  border:1px solid var(--line);
}
.flow-steps li::before{
  counter-increment:flowstep;
  content:counter(flowstep);
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  display:grid; place-items:center;
  font:500 .72rem/1 var(--mono);
  color:var(--navy);
  background:var(--teal);
}
.flow-steps b{
  display:block;
  font:700 .95rem/1.3 var(--body);
  color:var(--cream);
  margin-bottom:.15rem;
}
.flow-steps span{ font-size:.9rem; color:var(--cream-dim); }
.flow-foot{
  margin-top:.9rem;
  font:400 .78rem/1.4 var(--mono);
  color:var(--muted);
}
.ph{
  font:400 .7rem/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.card h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.7rem;
  line-height:1.1;
}
.facts{ display:grid; gap:11px; margin:0; }
.facts > div{ display:grid; gap:2px; }
.facts dt{
  font:500 .68rem/1.2 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-bright);
}
.facts dd{ margin:0; color:var(--cream-dim); font-size:.98rem; }
.status{
  display:inline-block;
  font:500 .72rem/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
  background:var(--teal);
  padding:7px 10px;
  border-radius:999px;
}
.door{
  position:absolute; inset:0;
  display:none;
  border-radius:10px;
  transform-origin:left center;
  backface-visibility:hidden;
  background:linear-gradient(90deg, #1B2740, #223150 60%, #1B2740);
  border:1px solid rgba(31,168,145,.34);
  box-shadow:inset 0 0 0 10px rgba(7,11,22,.35);
}
.door::after{
  content:"";
  position:absolute;
  right:22px; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--lamp);
  box-shadow:0 0 10px rgba(242,179,91,.8);
}
.motion .door{ display:block; }

/* =========================================================
   FLOOR 5, the stage
   ========================================================= */
#f5{ background:radial-gradient(ellipse at 50% 120%, #1A2440 0%, var(--navy) 60%); }
.stage{
  position:relative;
  margin-top:2.4rem;
  padding:clamp(24px,4vw,48px) clamp(16px,3vw,32px) 0;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg, #070B16, #0C1426 76%, #1A2338 76%, #141C2E);
}
.spot{
  position:absolute;
  top:-10%; left:50%;
  width:70%; height:130%;
  margin-left:-35%;
  background:radial-gradient(ellipse 34% 58% at 50% 78%, rgba(245,240,232,.22), rgba(245,240,232,.07) 55%, transparent 72%);
  pointer-events:none;
  will-change:transform;
}
.props{
  position:relative;
  display:grid; gap:16px;
  align-items:start;
  padding-bottom:clamp(28px,4vw,44px);
}
@media (min-width:720px){ .props{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.prop{
  padding:20px;
  border-radius:8px;
  background:rgba(17,26,46,.82);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .5s ease, box-shadow .5s ease;
}
.prop.lit{ border-color:rgba(245,240,232,.42); box-shadow:0 0 40px rgba(245,240,232,.08); }
@media (prefers-reduced-motion:reduce){ .prop{ transition:none; } }
.prop h3{ font:700 1.05rem/1.3 var(--body); }
.prop p{ color:var(--cream-dim); font-size:.98rem; }
.prop .meta{
  font:400 .76rem/1.3 var(--mono);
  letter-spacing:.06em;
  color:var(--muted);
}
.seal{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--navy-deep);
  margin-bottom:.4rem;
}
.seal svg{ width:34px; height:34px; }
.prop .seal{ width:60px; height:60px; }
.badge-link{
  display:block; width:92px; line-height:0;
  margin-bottom:.55rem;
  border-radius:50%;
  transition:transform .22s, filter .22s;
}
.badge-link img{ width:100%; height:auto; display:block; }
.badge-link:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.badge-link:focus-visible{ outline:3px solid var(--teal-bright); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .badge-link{ transition:none; } }
@media (max-width:719px){ .badge-link{ width:80px; } }
.verify-row{ padding-top:.7rem; }
.verify{
  display:inline-block;
  font:500 .86rem/1 var(--body);
  color:var(--teal-bright);
}
.event-photo{
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:.4rem;
  line-height:0;
}
.event-photo img{ width:100%; height:auto; display:block; }

/* =========================================================
   ROOFTOP
   ========================================================= */
#roof{ padding-block:0; overflow:hidden; }
.sky{
  position:relative;
  overflow:hidden;
  min-height:min(82svh,760px);
  display:flex;
  align-items:flex-end;
  background:var(--navy-deep);
}
.skyline{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  /* zoom and pan left. This keeps a lit company sign on the right side of the
     real skyline out of the shot on every screen size. */
  transform:scale(1.36);
  transform-origin:18% 50%;
}
@media (max-width:899px){
  /* crop toward the middle on phones */
  .skyline{ object-position:44% 50%; transform:scale(1.3); transform-origin:16% 50%; }
}
.sky-tint{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,17,32,.55) 0%, rgba(11,17,32,.3) 38%, rgba(11,17,32,.86) 88%, var(--navy) 100%),
    rgba(11,17,32,.22);
  pointer-events:none;
}
.sky-fade{
  position:absolute; inset:0;
  background:var(--navy-deep);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.roof-door{
  position:absolute; inset:0;
  display:none;
  transform-origin:50% 0;
  background:linear-gradient(180deg, #141D31, var(--navy));
  z-index:2;
}
.motion .roof-door{ display:block; }
.roof-copy{
  position:relative;
  z-index:3;
  width:100%;
  padding-block:clamp(90px,14vw,150px) clamp(52px,8vw,96px);
}
.roof-copy .floor-title{ max-width:18ch; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:1.7rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{
  border-top:1px solid var(--line);
  padding-block:32px;
  color:var(--muted);
  font-size:.9rem;
}
.foot-in{ display:grid; gap:18px; }
@media (min-width:720px){
  .foot-in{ grid-template-columns:auto 1fr auto; align-items:end; }
  .foot-links{ justify-self:center; }
  .foot-year{ justify-self:end; }
}
.site-foot b{ color:var(--cream); font-weight:700; }
.foot-links{ display:flex; gap:20px; }
.foot-links a{ color:var(--cream-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--teal-bright); text-decoration:underline; }