/* ============================================================================
   CARLY GRANER — elevator portfolio
   All styles are namespaced beneath .carly-site so nothing leaks into a host
   page (Squarespace, or anything else). No bare element selectors.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

.carly-site {
  /* Surfaces: warm, never pure black */
  --ink:        #0b0908;
  --char:       #141110;
  --smoke:      #171819;
  --panel:      #202021;   /* control plate ground */
  --panel-hi:   #2f3031;

  /* Brass, for the mounted plate and the architectural trim */
  --brass-hi:  #e8ebf2;
  --brass:     #acafb4;
  --brass-mid: #87898d;
  --brass-dk:  #3f4042;
  --brass-sh:  #1d1e1f;

  /* Materials */
  --tobacco:    #313234;
  --oxblood:    #343536;
  --bronze:     #898b8f;
  --champagne:  #cccfd6;
  --cream:      #e1e5ec;
  --amber:      #f2ae3c;

  /* Ink on dark */
  --text:       #ecf0f7;
  --text-dim:   #dadde4;
  --text-faint: #c6c9cf;
  --rule:       rgba(227,231,238,0.50);
  --rule-soft:  rgba(200,204,210,0.26);

  /* Default lamp colour; each button overrides --accent locally */
  --accent:     var(--amber);

  /* Type */
  /* Display: Smooch Sans. Tall, condensed, and it holds a big statement
     without shouting. Carly's pick. */
  --display: "Smooch Sans", "Oswald", "Haettenschweiler", sans-serif;
  /* Body: Space Grotesk. A neo-grotesk drawn with the same squared, slightly
     mechanical logic as Orbitron, so paragraphs read at speed without falling
     back to ordinary web type. */
  --body:    "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Technical: Orbitron. Squared and geometric, so every small label reads as
     elevator wayfinding rather than as ordinary web type. Carly's pick.
     Deliberately used at small sizes only: it is a signal face, not a text face. */
  --mono:    "Orbitron", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Orbitron is already wide, so labels need less tracking than a mono would. */
  --tracking-label: 0.14em;
  --tracking-wide:  0.22em;

  /* Rhythm */
  --gutter: clamp(1.1rem, 2.6vw, 2.4rem);
  --rail-h: 4rem;
  /* the side panel: its own 220/1080 ratio against the hero height, held
     within the 7-9% of viewport width the design calls for */
  --panel-w: clamp(7vw, 20.37dvh, 9vw);

  /* The hero is capped and centred; the floors below are full bleed. Without
     the same centring offset the two reading columns drift apart by half the
     overshoot, so both use these. */
  --shell-max: 1560px;
  --centre-pad: max(0px, (100vw - 1560px) / 2);
  --inset: calc(var(--gutter) * 2.4 + clamp(46px, 7vw, 104px));
  --car-gap: clamp(1.25rem, 2.8vw, 2.75rem);
  --right-col: calc(
      var(--centre-pad) + var(--inset)
      + (min(100vw, var(--shell-max)) - var(--inset) - var(--gutter) - var(--car-gap)) * 0.44
      + var(--car-gap));

  /* Lighting recipe: bright core, controlled halo, faint spill */
  --lamp-core: 0 0 3px rgba(255,255,255,0.55);
  --radius-btn: 7px;

  /* Grain, used sparingly */
  --patina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  --brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");

  --metal-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.9'/%3E%3C/svg%3E");

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* ------------------------------------------------- MATERIAL SYSTEM

     One palette and one set of light layers, taken from the about
     architecture, so every floor of the building is the same room lit
     differently. A dark surface is composed as:

        film  /  vignette  /  directional glow  /  espresso base

     Sections vary only in where the light comes from. */

  /* Espresso. Never black: the deepest stop still carries brown in it. */
  --esp-deep: #101111;
  --esp-base: #121213;
  --esp-mid:  #161717;
  --esp-warm: #1c1c1d;
  --esp-lit:  #262628;

  /* The light that falls across it. Bronze is the key, champagne the fill. */
  --glow-bronze:   rgba(85,86,89, 0.26);
  --glow-bronze-2: rgba(44,45,46, 0.13);
  --glow-champ:    rgba(198,201,207, 0.075);
  --glow-champ-2:  rgba(198,201,207, 0.042);

  /* Edge shading. Gentle, so it reads as a room rather than a vignette. */
  --edge: radial-gradient(148% 126% at 46% 44%,
            transparent 58%, rgba(0,0,0,0.20) 84%, rgba(0,0,0,0.40) 100%);

  /* Material grain. Barely perceptible, stationary, and low enough that it
     never touches legibility. Fine architectural grain, not distressing. */
  --film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E");
  --film-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");

  /* Bronze, as a material rather than a colour: lit face, dark recess. */
  --bronze-face: linear-gradient(180deg,
      rgba(246,249,255,0.55) 0%, rgba(166,169,174,0.42) 38%,
      rgba(73,74,76,0.40) 72%, rgba(21,21,22,0.55) 100%);
  --bronze-seam: linear-gradient(90deg,
      rgba(144,146,150,0.08) 0%, rgba(227,231,238,0.42) 26%,
      rgba(227,231,238,0.30) 62%, rgba(117,119,122,0.10) 100%);

}

/* ----------------------------------------------------- 2. SCOPED RESET */

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

.carly-site :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.carly-site :where(ul, ol) { padding: 0; list-style: none; }
.carly-site :where(img, video) { display: block; max-width: 100%; height: auto; }
.carly-site :where(button) { font: inherit; color: inherit; background: none; border: 0; }

.carly-site {
  font-family: var(--body);
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.carly-site ::selection { background: #d9dce2; color: #0b0b0c; }

/* Visually hidden but available to screen readers */
.carly-site .cs-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Skip link, only visible on focus */
.carly-site .cs-skip {
  position: absolute; left: var(--gutter); top: -100%; z-index: 60;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink); background: #d9dce2;
  padding: 0.6rem 1rem; border-radius: 3px; text-decoration: none;
  transition: top 140ms ease;
}
.carly-site .cs-skip:focus { top: 0.75rem; }

/* --------------------------------------------------- 3. THE CAR (shell) */

.carly-site .cs-stage {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* The deepest floor: bronze entering from the left, a quieter pool around
     the console, and only a breath of light behind the headline. */
  background:
    var(--film),
    var(--edge),
    radial-gradient(46% 42% at 73% 38%, var(--glow-champ) 0%, transparent 68%),
    radial-gradient(60% 54% at 30% 48%, var(--glow-champ-2) 0%, transparent 76%),
    radial-gradient(50% 62% at -2% 45%, var(--glow-bronze) 0%, var(--glow-bronze-2) 38%, transparent 70%),
    linear-gradient(163deg, #242526 0%, #1f1f20 28%, #1a1a1b 60%, #151516 84%, var(--esp-deep) 100%);
}

/* Brushed metal across the whole wall, not just on the buttons. */
.carly-site .cs-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--brushed);
  background-size: 430px 100%;
  background-repeat: repeat-x;
  opacity: 0.13;
  mix-blend-mode: overlay;
}

/* Fine grain over everything, to kill the last of the vector flatness. */
.carly-site .cs-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--patina);
  background-size: 620px 620px;
  opacity: 0.16;
  mix-blend-mode: overlay;
}

.carly-site .cs-stage > * { position: relative; z-index: 2; }

/* The supplied left side panel. Flush to the viewport edge, full hero height,
   its own aspect ratio, and nothing drawn over it. */
.carly-site .cs-ribs {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: var(--panel-w);
  z-index: 2;                 /* above the wall texture, below the content */
  pointer-events: none;
  user-select: none;
  display: block;
}

/* The statement sits inside a brass-framed wall panel: an edge down the left,
   along the bottom into a large rounded corner, and a vertical edge on the
   right separating it from the bay the plate is mounted in. */
.carly-site .cs-corner {
  position: absolute; z-index: 1; pointer-events: none;
  /* sits directly against the panel's inner edge: no black gutter */
  left: calc(var(--panel-w) - 2px); right: 41%; bottom: 0; top: var(--rail-h);
  border-left: 2px solid rgba(224,227,234,0.40);
  border-bottom: 2px solid rgba(171,173,178,0.30);
  border-bottom-left-radius: clamp(80px, 13vw, 210px);
  box-shadow:
    -1px 0 2px -1px rgba(0,0,0,0.55),
    0 1px 2px -1px rgba(0,0,0,0.55),
    inset 26px -26px 52px -48px rgba(251,255,255,0.28);
}

/* ------------------------------------------------------ 4. TOP RAIL */

.carly-site .cs-rail {
  height: var(--rail-h);
  display: flex; align-items: center; gap: 1.25rem;
  /* the nameplate lines up with the copy below it rather than hugging the
     side panel it sits above */
  padding-inline: var(--gutter);
  padding-left: calc(var(--panel-w) + 1.25rem);
  /* A raised brass bar, not a hairline. */
  border-bottom: 1px solid rgba(0,0,0,0.75);
  background:
    linear-gradient(180deg,
      rgba(251,255,255,0.20) 0%,
      rgba(189,192,198,0.26) 22%,
      rgba(129,131,135,0.30) 48%,
      rgba(37,37,39,0.60) 80%,
      rgba(0,0,0,0.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(251,255,255,0.45),
    0 1px 0 rgba(232,235,242,0.24),
    0 10px 20px -12px rgba(0,0,0,0.95);
}

/* Nameplate: engraved lettering on the car wall, no housing. */
.carly-site .cs-plate {
  display: inline-flex; align-items: baseline; gap: 0.95rem;
  text-decoration: none;
}
.carly-site .cs-plate__name {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: clamp(0.78rem, 1.12vw, 0.98rem);
  font-weight: 700; letter-spacing: 0.30em; text-transform: uppercase;
  text-indent: 0.30em;                    /* balance the trailing letterspace */
  /* Carly's name in dark neon orange (2026-10): lit from the first frame on
     the closed doors, and it stays lit */
  color: #ff9a5c;
  /* The housing sits inside the artwork with clearance for its own glow, so
     the padding has to leave room for that, and the text rides slightly high
     to match the face's optical centre. */
  padding: 0.74rem 2.7rem 0.96rem;
  background: url("/assets/elevator/nameplate.svg") center / 100% 100% no-repeat;
  /* a hot, sharp core like a lit tube, with the glow kept off the letter
     edges so the name stays crisp */
  -webkit-font-smoothing: antialiased;
  text-shadow:
    0 0 1px rgba(255,96,20,0.9),
    0 0 10px rgba(255,80,10,0.42),
    0 0 26px rgba(240,60,0,0.28);
}

.carly-site .cs-plate__role {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

/* Availability lamp */
.carly-site .cs-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.carly-site .cs-status__lamp {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6f9b63;
  box-shadow: var(--lamp-core), 0 0 7px rgba(111,155,99,0.9), 0 0 16px rgba(111,155,99,0.35);
}
.carly-site .cs-status[data-state="booked"] .cs-status__lamp {
  background: var(--amber);
  box-shadow: var(--lamp-core), 0 0 7px rgba(242,174,60,0.9), 0 0 16px rgba(242,174,60,0.35);
}

/* ---------------------------------------------------- 5. HOME LAYOUT */

.carly-site .cs-car {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(1.25rem, 2.8vw, 2.75rem);
  padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  padding-left: calc(var(--gutter) * 2.4 + clamp(46px, 7vw, 104px));
  max-width: 1560px; width: 100%; margin-inline: auto;
}

/* Primary statement */
.carly-site .cs-car__say { container-type: inline-size; }

.carly-site .cs-statement {
  /* Orbitron, the same face as the pad. Once the buttons carry logos this is
     the only place the control-panel voice appears at size, which is why it
     can hold the statement. It is a wide face, so it runs smaller than a
     condensed display would and the tracking is pulled in. */
  font-family: var(--mono);
  font-weight: 700;
  /* Four even lines, sized off the column so it is always as large as it can
     be without the longest of them wrapping. */
  font-size: clamp(1.9rem, 12.3cqw, 7rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  padding-bottom: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 60px rgba(242,174,60,0.07);
}

.carly-site .cs-hairline {
  height: 1px; margin: clamp(1.2rem, 2.4vw, 1.9rem) 0 clamp(0.9rem, 1.7vw, 1.4rem);
  max-width: 20rem;
  background: linear-gradient(90deg, var(--rule), transparent);
  position: relative;
}
.carly-site .cs-hairline::after {
  content: ""; position: absolute; right: 0; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--champagne); opacity: 0.75;
}

.carly-site .cs-sub {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.9; letter-spacing: 0.005em; color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* ------------------------------------------- 6. THE CONSOLE

   The frame and the buttons are artwork cut from the approved render. The
   frame is applied as a nine-slice border image, so the corners and their
   screws never distort however the console is sized, and the woven cavity
   fills the middle. Everything drawn in code is confined to the lit state.
   ------------------------------------------------------------------------ */

.carly-site .cs-panel {
  --fw: clamp(20px, 2.7vw, 46px);          /* rendered frame thickness */
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: min(58rem, 100%);
  border-style: solid;
  border-width: var(--fw);
  border-image-source: url("/assets/elevator/frame.webp");
  border-image-slice: 92 fill;
  border-image-repeat: stretch;
  filter: saturate(0.93) drop-shadow(0 26px 34px rgba(0,0,0,0.75));
}

/* The label sits on the brass top rail, as it does in the render. */
.carly-site .cs-panel__head {
  position: absolute;
  left: 0; right: 0; top: calc(var(--fw) * -0.86);
  height: calc(var(--fw) * 0.80);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.carly-site .cs-panel__head > * { position: relative; }
.carly-site .cs-engraved {
  font-family: var(--mono); font-size: clamp(0.6rem, 0.8vw, 0.74rem);
  font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase;
  line-height: 1;
  /* cut into brass: a fine dark groove with a lit lower lip, not stamped ink */
  color: #1a1a1b;
  text-shadow:
    0 1px 0 rgba(251,255,255,0.70),
    0 -1px 1px rgba(0,0,0,0.22);
}
.carly-site .cs-engraved--dim { color: var(--text-faint); letter-spacing: var(--tracking-label); }

.carly-site .cs-panel__inner {
  container-type: inline-size;
  /* the cavity artwork falls away hard to the right; this brings it back
     without touching the frame */
  background:
    /* light falling in from the frame's top left */
    radial-gradient(86% 74% at 26% 10%, rgba(255,226,172,0.10) 0%, transparent 66%),
    /* the corner that was reading as a hole */
    radial-gradient(80% 72% at 88% 80%, rgba(255,214,150,0.09) 0%, transparent 70%),
    /* the cavity itself, warm charcoal rather than black */
    linear-gradient(168deg, rgba(47,48,49,0.60) 0%, rgba(35,36,37,0.52) 52%, rgba(27,28,28,0.46) 100%);
  padding: 3.0cqw 2.2cqw 1.4cqw;
}

.carly-site .cs-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.4cqw;
  row-gap: 2.6cqw;
}

/* ---- Project buttons ----

   Round chrome elevator buttons (Carly's call, 2026-09-28). One piece of
   artwork, btn-round.webp: a polished bezel, a spun-metal face and an empty
   lamp socket. The floor number, the client mark and the lamp are all live on
   top of it, pinned to where the artwork puts them. */

.carly-site .cs-btn {
  position: relative;
  display: block;
  width: 70%;
  justify-self: center;
  aspect-ratio: 1;
  background: center / 100% 100% no-repeat;   /* image set per project in JS */
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.62));
  transition: transform 130ms cubic-bezier(.2,.7,.3,1), filter 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* The floor number, in the render's own digits, engraved into the face. */
.carly-site .cs-btn__no {
  position: absolute; left: 50%; top: 21%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center;
  width: 9.6%; height: 9.6%;
}
.carly-site .cs-digit {
  position: relative;
  flex: 1 1 0;
  height: 100%;
}
.carly-site .cs-digit::before,
.carly-site .cs-digit::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: var(--d); mask-image: var(--d);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.carly-site .cs-digit::before { background: #ffffff; opacity: 0.55; transform: translateY(6%); }
.carly-site .cs-digit::after  { background: #16181b; opacity: 0.9; }

/* The client mark, engraved: a lit lip dropped below, the cut over it.
   `contain` sizes any mark to the box, wide wordmark or square badge. */
.carly-site .cs-btn__mark {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 56%; height: 27%;
}
.carly-site .cs-btn__mark::before,
.carly-site .cs-btn__mark::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: var(--logo); mask-image: var(--logo);
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
.carly-site .cs-btn__mark::before { background: #ffffff; opacity: 0.5; transform: translateY(2.5%); }
.carly-site .cs-btn__mark::after  { background: #111315; opacity: 0.92; }

/* The lamp sits in the socket at the bottom of the face. Coloured but dim at
   rest, fully lit when its floor is chosen. */
.carly-site .cs-btn__lens {
  position: absolute; left: 50%; top: 78%;
  transform: translate(-50%, -50%);
  width: 10%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      color-mix(in srgb, var(--accent) 55%, #ffffff) 0%,
      var(--accent) 34%,
      color-mix(in srgb, var(--accent) 55%, #000000) 80%,
      #0b0906 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.45),
    inset 0 -1px 2px rgba(0,0,0,0.55);
  filter: saturate(0.9) brightness(0.92);
  transition: filter 220ms ease;
}
.carly-site .cs-btn:hover .cs-btn__lens,
.carly-site .cs-btn:focus-visible .cs-btn__lens,
.carly-site .cs-btn[aria-current="page"] .cs-btn__lens,
.carly-site .cs-btn.is-selected .cs-btn__lens { filter: saturate(1.1) brightness(1.15); }

/* The light the lamp throws when it is on: tight, so it never washes the face. */
.carly-site .cs-btn__glow {
  position: absolute;
  left: 50%; top: 78%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--accent) 80%, #fff) 0%,
      color-mix(in srgb, var(--accent) 60%, transparent) 16%,
      color-mix(in srgb, var(--accent) 22%, transparent) 34%,
      transparent 62%);
  mix-blend-mode: screen;
  transition: opacity 240ms ease;
}
.carly-site .cs-btn:hover .cs-btn__glow,
.carly-site .cs-btn:focus-visible .cs-btn__glow,
.carly-site .cs-btn[aria-current="page"] .cs-btn__glow,
.carly-site .cs-btn.is-selected .cs-btn__glow { opacity: 1; }

.carly-site .cs-btn:hover,
.carly-site .cs-btn:focus-visible {
  filter: brightness(1.06) drop-shadow(0 5px 8px rgba(0,0,0,0.62));
}
.carly-site .cs-btn:active,
.carly-site .cs-btn.is-pressed {
  transform: translateY(2px) scale(0.985);
  filter: brightness(0.97) drop-shadow(0 2px 3px rgba(0,0,0,0.7));
}
.carly-site .cs-btn:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 4px;
}

/* One light on at a time: hovering a floor stands the others down. */
.carly-site .cs-buttons:has(.cs-btn:hover) .cs-btn:not(:hover) .cs-btn__lens,
.carly-site .cs-buttons:has(.cs-btn:focus-visible) .cs-btn:not(:focus-visible) .cs-btn__lens {
  filter: saturate(0.9) brightness(0.92);
}
.carly-site .cs-buttons:has(.cs-btn:hover) .cs-btn:not(:hover) .cs-btn__glow,
.carly-site .cs-buttons:has(.cs-btn:focus-visible) .cs-btn:not(:focus-visible) .cs-btn__glow {
  opacity: 0;
}

/* ------------------------------------------- 7. SECONDARY CONTROLS */

.carly-site .cs-aux {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
}

.carly-site .cs-aux--pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.4cqw;
  margin-top: 6.4cqw;
}

.carly-site .cs-aux--pad .cs-aux__btn {
  display: block;
  aspect-ratio: 277 / 91;
  padding: 0;
  border-radius: 0;
  background: center / 100% 100% no-repeat;
  box-shadow: none;
  filter: brightness(1.14) contrast(1.06) drop-shadow(0 3px 5px rgba(0,0,0,0.6));
  transition: filter 200ms ease, transform 130ms ease;
}
/* One brass plate serves all three controls. The label is live type and the
   control itself is the supplied push button, dropped in where the indicator
   used to sit, so the plate never has to be recut for a new one. */
.carly-site .cs-aux--pad .cs-aux__btn {
  position: relative;
  background-image: url("/assets/elevator/aux-blank.webp");
}
.carly-site .cs-aux--pad .cs-aux__label {
  position: absolute;
  left: 44%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(0.5rem, 0.72vw, 0.64rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  /* a shallower cut than the floor plates: these are utilities, not floors */
  color: #1c1d1e;
  text-shadow:
    0 1px 0 rgba(251,255,255,0.38),
    0 -1px 1px rgba(0,0,0,0.20);
}
/* A small recessed utility control, not a badge. Fixed at 32px so it stays a
   detail on the plate, and never larger than 34 on a wide desktop. The plate
   itself is the link, so the target is far above 44px. */
.carly-site .cs-aux--pad .cs-aux__push {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  width: clamp(32px, 2vw, 34px);
  height: clamp(32px, 2vw, 34px);
  display: block;
  pointer-events: none;
  transition: filter 200ms ease, transform 130ms ease;
}

/* Press drives the button in and catches the symbol. */
/* The car is at the about floor when the page loads, so that control is the
   lit one, the way the selected floor is. It steps back the moment a hand
   goes near the floor buttons, then returns. */
.carly-site .cs-aux--pad .cs-aux__btn.is-lit .cs-aux__push {
  filter:
    brightness(1.22)
    drop-shadow(0 0 4px rgba(240,244,251,0.80))
    drop-shadow(0 0 11px rgba(207,210,216,0.45))
    drop-shadow(0 0 22px rgba(207,210,216,0.22));
  transition: filter 260ms ease;
}
.carly-site .cs-panel__inner:has(.cs-btn:hover) .cs-aux__btn.is-lit .cs-aux__push,
.carly-site .cs-panel__inner:has(.cs-btn:focus-visible) .cs-aux__btn.is-lit .cs-aux__push {
  filter: brightness(1.04) drop-shadow(0 0 2px rgba(242,174,60,0.20));
}
.carly-site .cs-aux--pad .cs-aux__btn:active .cs-aux__push {
  transform: translateY(calc(-50% + 1px));
  filter: brightness(1.22);
}
.carly-site .cs-aux--pad .cs-aux__btn:hover,
.carly-site .cs-aux--pad .cs-aux__btn:focus-visible {
  filter: brightness(1.07) contrast(1.03) drop-shadow(0 3px 5px rgba(0,0,0,0.6));
}
.carly-site .cs-aux--pad .cs-aux__btn:active { transform: translateY(1px); }
.carly-site .cs-aux--pad .cs-aux__btn:focus-visible {
  outline: 1px solid rgba(237,240,248,0.85);
  outline-offset: 3px;
}

/* Plain controls, used on the interior pages where there is no artwork. */
.carly-site .cs-aux__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--mono); font-size: clamp(0.5rem, 0.72vw, 0.6rem);
  font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #d9dde3;
  background: linear-gradient(174deg, #343537 0%, #242526 55%, #171718 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.5);
  transition: filter 180ms ease, transform 130ms ease, color 180ms ease;
}
.carly-site .cs-aux__btn:hover { color: var(--silver-hi); }
.carly-site .cs-aux__icon { width: 11px; height: 11px; flex: none; opacity: 0.7; }
.carly-site .cs-aux__btn:hover .cs-aux__icon { opacity: 1; }
.carly-site .cs-aux__dot {
  width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: rgba(217,221,227,0.45);
}

/* ------------------------------------------------ 8. INTERIOR PAGES */

.carly-site .cs-floor {
  max-width: 74rem; width: 100%; margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  padding-left: calc(var(--gutter) * 2.4 + clamp(46px, 7vw, 104px));
}

/* Floor indicator strip: where you are, in the building */
.carly-site .cs-indicator {
  display: flex; align-items: center; gap: 0.8rem;
  padding-bottom: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-soft);
}
.carly-site .cs-indicator__lamp {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: var(--lamp-core),
    0 0 6px color-mix(in srgb, var(--accent) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.carly-site .cs-indicator__no {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent);
}
.carly-site .cs-indicator__name {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-dim);
}
.carly-site .cs-indicator__meta { margin-left: auto; }

.carly-site .cs-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.9rem, 7vw, 6.4rem); line-height: 0.94;
  padding-bottom: 0.06em;
  text-transform: uppercase; color: var(--text); text-wrap: balance;
  max-width: 18ch;
}
.carly-site .cs-title--sentence { text-transform: none; letter-spacing: -0.005em; }

.carly-site .cs-lede {
  font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.62;
  color: var(--text-dim); max-width: 46ch;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
}

.carly-site .cs-body { max-width: 62ch; }
.carly-site .cs-body p { font-size: 1rem; line-height: 1.75; color: var(--text-dim); }
.carly-site .cs-body p + p { margin-top: 1.15rem; }

/* Section label */
.carly-site .cs-seclabel {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-faint);
  margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(1.2rem, 2vw, 1.8rem);
}
.carly-site .cs-seclabel::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-soft);
}

/* Media modules. Placeholders are honest, labelled and neutral. */
.carly-site .cs-media {
  border-radius: 6px; overflow: hidden;
  background:
    var(--film),
    linear-gradient(160deg, #252627, var(--esp-mid));
  box-shadow: inset 0 1px 0 rgba(212,215,221,0.08), 0 18px 40px -24px rgba(0,0,0,0.9);
}
.carly-site .cs-media--hero { aspect-ratio: 16 / 9; }
.carly-site .cs-media--still { aspect-ratio: 4 / 5; }
.carly-site .cs-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px dashed rgba(176,179,184,0.20);
  border-radius: 6px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-faint); text-align: center;
  padding: 1.5rem;
}
.carly-site .cs-placeholder__rule {
  width: 26px; height: 1px; background: rgba(176,179,184,0.3);
}

.carly-site .cs-grid2 {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* A lit panel for long-form campaign copy — like a lightbox on the car wall */
.carly-site .cs-lightbox {
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  border-radius: 6px;
  background: linear-gradient(168deg, #e4e8ef 0%, #d7dae0 100%);
  color: #1f2021;
  box-shadow: 0 0 60px -18px color-mix(in srgb, var(--accent) 40%, transparent),
              0 24px 50px -28px rgba(0,0,0,0.85);
}
.carly-site .cs-lightbox p { color: #323335; line-height: 1.75; }
.carly-site .cs-lightbox p + p { margin-top: 1.1rem; }
.carly-site .cs-lightbox .cs-seclabel { color: #323335; margin-top: 0; }
.carly-site .cs-lightbox .cs-seclabel::after { background: rgba(50,51,53,0.18); }

/* Credits / spec list */
.carly-site .cs-spec { display: grid; gap: 0.55rem; }
.carly-site .cs-spec__row {
  display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: 1rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule-soft);
}
.carly-site .cs-spec__key {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-faint);
}
.carly-site .cs-spec__val { font-size: 0.95rem; color: var(--text-dim); }
.carly-site .cs-spec__val em {
  font-style: normal; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: #c6c9cf;
}

/* Prev / next floors */
.carly-site .cs-updown {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.carly-site .cs-updown__spacer { flex: 1; }

/* ------------------------------------------------------ 10. MOTION */

/* One-time strike-on. The class is added by JS on load, once. */
@keyframes cs-strike {
  0%   { opacity: 0.25; }
  18%  { opacity: 1; }
  26%  { opacity: 0.45; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.carly-site.is-lit .cs-plate__name { animation: cs-strike 900ms ease-out both; }
.carly-site.is-lit .cs-statement   { animation: cs-rise 700ms 120ms cubic-bezier(.2,.7,.3,1) both; }
.carly-site.is-lit .cs-panel       { animation: cs-rise 700ms 220ms cubic-bezier(.2,.7,.3,1) both; }
.carly-site.is-lit .cs-sub,
.carly-site.is-lit .cs-hairline    { animation: cs-rise 700ms 320ms cubic-bezier(.2,.7,.3,1) both; }

/* Safety net. The entrance animations start from opacity 0, and a paused or
   never-started animation would otherwise leave the page blank (background
   tabs throttle both rAF and CSS animations). JS always adds .is-shown, either
   immediately or on a timer, so content can never depend on motion to appear. */
:root:not(.cs-intro) .carly-site.is-shown .cs-plate__name,
.carly-site.is-shown .cs-statement,
.carly-site.is-shown .cs-panel,
.carly-site.is-shown .cs-sub,
.carly-site.is-shown .cs-hairline {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Departure: the car dims briefly as it moves to the selected floor */
.carly-site .cs-dim {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: var(--ink); opacity: 0;
  transition: opacity 260ms ease;
}
.carly-site.is-travelling .cs-dim { opacity: 0.62; }
/* a long jump between floors: a quick dip to black, then fade back in */
.carly-site.is-jumping .cs-dim { opacity: 1; transition-duration: 260ms; }
.carly-site .cs-dim { background: #050506; }

@media (prefers-reduced-motion: reduce) {
  .carly-site .cs-aux--pad .cs-aux__push { transition: none !important; }
  .carly-site *,
  .carly-site *::before,
  .carly-site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .carly-site .cs-dim { display: none; }
  .carly-site .cs-shaft__track { transition: none !important; }
  .carly-site .cs-preview.is-travelling .cs-shaft__track { filter: none; }
}

/* ------------------------------------------- 8b. THE FLOORS BELOW

   Everything under the hero: the project preview the elevator takes you to,
   the floor directory, the about floor and the lobby.
   ------------------------------------------------------------------------ */

/* Section nav in the top rail */
.carly-site .cs-railnav {
  margin-left: auto;
  display: flex; gap: 1.6rem;
}
.carly-site .cs-railnav a {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #dadde4; text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  transition: color 180ms ease;
}
.carly-site .cs-railnav a:hover,
.carly-site .cs-railnav a:focus-visible { color: var(--silver-hi); }
.carly-site .cs-rail .cs-status { margin-left: 2.2rem; }

/* Shared: the floor tag that opens each section */
.carly-site .cs-floortag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #dadde4;
}
.carly-site .cs-floortag__lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, var(--accent) 55%, #1b1c1e 100%);
  box-shadow: 0 0 7px rgba(242,174,60,0.85), 0 0 16px rgba(242,174,60,0.35);
}
.carly-site .cs-floortag__chip {
  width: 12px; height: 12px; flex: none; border-radius: 2px;
  background: linear-gradient(160deg, rgba(232,235,242,0.5), rgba(0,0,0,0.5));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}
.carly-site .cs-floortag__slash { color: #dadde4; }
.carly-site .cs-floortag--dark { color: #171718; }
.carly-site .cs-floortag--dark .cs-floortag__chip {
  background: linear-gradient(160deg, rgba(125,127,131,0.5), rgba(49,50,51,0.5));
}

.carly-site .cs-textlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text); text-decoration: none;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      rgba(237,240,248,0.62) 0%, rgba(237,240,248,0.34) 70%,
      rgba(145,147,152,0.12) 100%) 1;
  transition: color 180ms ease, border-color 180ms ease, gap 180ms ease;
}
.carly-site .cs-textlink:hover,
.carly-site .cs-textlink:focus-visible {
  color: var(--silver-hi); border-color: var(--silver-hi); gap: 0.95rem;
}

.carly-site .cs-caprule {
  display: inline-block; width: 5rem; height: 1px; vertical-align: middle;
  background: rgba(232,235,242,0.35);
}

/* ---- Brass threshold ----------------------------------------------------

   The narrow dimensional rail that separates one floor from the next. Five
   bands inside 13px: a recessed shadow, the aged brass itself, a champagne
   lip, a second dark edge, and a faint warm reflection above and below. It is
   the same component at every boundary, so the building reads as one. */

.carly-site .cs-threshold {
  position: relative;
  z-index: 3;
  height: 13px;
  flex: none;
  background-color: #0c0c0c;          /* the recess the rail sits in */
  background-repeat: no-repeat;
  background-image:
    /* warm reflection catching the surface above the rail */
    linear-gradient(180deg, rgba(227,231,237,0.055) 0%, transparent 100%),
    /* the aged brass */
    linear-gradient(90deg,
      #17181a 0%, #6c6d71 18%, #b8bbc1 42%,
      #eceff6 50%, #8d8f93 67%, #222326 100%),
    /* the champagne lip along its lower edge */
    linear-gradient(90deg,
      rgba(251,255,255,0.38) 0%, rgba(251,255,255,0.16) 56%, transparent 100%),
    /* the reflection thrown onto the floor below */
    linear-gradient(180deg, rgba(227,231,237,0.05) 0%, transparent 100%);
  background-size: 100% 3px, 100% 5px, 100% 1px, 100% 4px;
  background-position: 0 0, 0 3px, 0 8px, 0 9px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.80),
    0 -1px 0 rgba(0,0,0,0.55);
}
/* Pinned to the top of a floor rather than sitting between two, so the
   continuous left rail passes over it instead of being cut by it. */
.carly-site .cs-threshold--inset {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 0;
}

/* ---- Brass picture frame ------------------------------------------------

   The surround that ties project imagery to the metalwork of the console:
   a dark outer edge, a narrow aged-brass band, a champagne inner lip and a
   fine dark shadow holding the image away from the metal. Six pixels total. */

.carly-site .cs-metalframe {
  /* the frame is drawn outside the image, so the box is offset back onto the
     shared grid line rather than sitting a few pixels left of it */
  margin-left: 1.4px;
  border: 3px solid transparent;
  border-image: linear-gradient(158deg,
      #eceff6 0%, #a9abb0 18%, #707275 46%,
      #55575b 62%, #b8bbc1 80%, #1f2022 100%) 1;
  box-shadow:
    0 0 0 1px #0e0e0e,                        /* dark outer edge */
    inset 0 0 0 1px rgba(251,255,255,0.22),   /* champagne inner lip */
    inset 0 0 0 2px rgba(0,0,0,0.55),         /* fine shadow off the metal */
    0 0 30px -8px rgba(184,187,193,0.20),      /* restrained warm glow */
    0 30px 60px -34px rgba(0,0,0,0.95);
}

/* ---- The project preview ---- */

.carly-site .cs-preview {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  padding-left: calc(var(--centre-pad) + var(--inset));
  padding-right: calc(var(--centre-pad) + var(--gutter));
  /* Warmer where the work is, darker where the copy is. */
  background:
    var(--film),
    radial-gradient(126% 132% at 38% 50%, transparent 62%, rgba(0,0,0,0.18) 86%, rgba(0,0,0,0.34) 100%),
    radial-gradient(54% 58% at 76% 42%, var(--glow-champ) 0%, var(--glow-bronze-2) 46%, transparent 78%),
    radial-gradient(44% 54% at 4% 54%, var(--glow-bronze-2) 0%, transparent 70%),
    linear-gradient(168deg, #212223 0%, var(--esp-warm) 58%, var(--esp-base) 100%);
  border-top: 0;
}

/* The architectural corner, carried into the project floors. */
.carly-site .cs-corner--carry {
  top: 0;
  /* lifted off the section edge so the wall runs on underneath it, rather
     than the arc reading as an underline to the whole section */
  /* sized to the preview window, not the section, so it stays put when the
     full project opens underneath */
  bottom: auto;
  height: calc(clamp(3rem, 6vw, 5.5rem) + clamp(30rem, 64vh, 45rem) + clamp(1.5rem, 3vw, 2.5rem));
  left: var(--panel-w); right: 44%;
  border-top: 0;
  border-bottom-left-radius: clamp(70px, 11vw, 180px);
}
.carly-site .cs-corner--carry::after { display: none; }
/* the run-out fades rather than stopping dead mid-section */
.carly-site .cs-corner--carry {
  opacity: 0.9;
  /* the vertical run rises out of the panel and the horizontal run trails off,
     so both ends resolve instead of stopping dead */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%),
    linear-gradient(90deg, #000 0%, #000 46%, transparent 96%);
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%),
    linear-gradient(90deg, #000 0%, #000 46%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* The shaft: a fixed viewport with the floors stacked inside it. */
.carly-site .cs-preview {
  overflow: hidden;
}
.carly-site .cs-shaft {
  height: clamp(30rem, 64vh, 45rem);
  max-width: 96rem; margin-inline: auto;
  overflow: hidden;          /* the window you look through */
}
.carly-site .cs-shaft__track {
  height: 100%;
  /* slow to leave, quick through the middle, slow to stop */
  transition: transform 900ms cubic-bezier(.78, 0, .18, 1);
  will-change: transform;
}
.carly-site .cs-floorpanel {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

/* Passing floors: the car dims a little and the contents smear vertically,
   the way anything does when it goes past a window at speed. */
.carly-site .cs-preview.is-travelling .cs-shaft__track {
  filter: blur(0.6px) brightness(0.82);
}
.carly-site .cs-preview.is-travelling .cs-floorpanel {
  transform: scaleY(1.012);
}
.carly-site .cs-preview .cs-floorpanel { transition: transform 260ms ease; }

/* Arrival: the small settle a car makes when it stops. */
@keyframes cs-settle {
  0%   { transform: translateY(0); }
  36%  { transform: translateY(4px); }
  70%  { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}
.carly-site .cs-preview.is-arriving .cs-shaft__track > * {
  animation: cs-settle 420ms cubic-bezier(.3,.9,.4,1) both;
}

/* A hairline of light sweeping the shaft edge while the car moves. */
.carly-site .cs-preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(255,214,150,0.16) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.28) 100%);
  transition: opacity 220ms ease;
}
.carly-site .cs-preview.is-travelling::after { opacity: 1; }

/* Directory lamps flicker as the car passes their floor. */
.carly-site .cs-floorbtn.is-passing .cs-floorbtn__lamp {
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 6px color-mix(in srgb, var(--accent) 90%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.carly-site .cs-floorbtn.is-passing .cs-floorbtn__no { color: var(--silver-hi); }

.carly-site .cs-preview__title {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 3.1vw, 3.2rem); line-height: 1.08;
  letter-spacing: -0.004em; text-transform: uppercase;
  color: var(--text);
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
}
.carly-site .cs-hairline--short { max-width: 15rem; }

/* Orbitron has a small x-height for its width, so it needs more size and less
   tracking than a text face to read at paragraph length. */
.carly-site .cs-preview__lede {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65; letter-spacing: 0.005em;
  color: var(--text); max-width: 34ch;
}
.carly-site .cs-preview__stat {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(0.6rem, 0.82vw, 0.72rem);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 62%, #e3e7ee);
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
}

.carly-site .cs-preview__meta {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #dadde4;
  margin: clamp(0.7rem, 1.4vw, 1rem) 0 clamp(1.4rem, 3vw, 2.2rem);
}

.carly-site .cs-preview__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}

.carly-site .cs-preview__media {
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  background:
    var(--film),
    linear-gradient(160deg, #252627, var(--esp-mid));
}

.carly-site .cs-preview__caption {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem;
  max-width: 96rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: #dadde4;
}

/* ---- The floor directory ---- */

.carly-site .cs-directory {
  position: relative;
  display: flex; align-items: stretch;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.7rem) clamp(1.5rem, 3vw, 3rem);
  /* A recessed espresso threshold between two floors. The brass rails above
     and below are the shared .cs-threshold; this is the shadowed face between
     them, with the warm reflection the upper rail throws onto it. */
  background:
    var(--film),
    linear-gradient(180deg,
      rgba(227,231,237,0.085) 0%, rgba(227,231,237,0.02) 26%, transparent 52%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, #1c1c1d 0%, #121212 100%);
  border-block: 0;
  box-shadow:
    inset 0 16px 26px -20px rgba(227,231,237,0.30),
    inset 0 -10px 20px -14px rgba(0,0,0,0.85);
}

/* very fine vertical brushing across the threshold face */
.carly-site .cs-directory::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--brushed);
  background-size: 320px 100%;
  background-repeat: repeat-x;
  opacity: 0.10;
  mix-blend-mode: overlay;
}
.carly-site .cs-directory > * { position: relative; }

.carly-site .cs-directory__mark {
  font-family: var(--mono); font-size: clamp(0.86rem, 1.1vw, 1rem); font-weight: 700;
  letter-spacing: 0.14em; color: var(--text);
  align-self: center; flex: none;
}
.carly-site .cs-directory__label {
  font-family: var(--mono); font-size: clamp(0.52rem, 0.7vw, 0.6rem); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  line-height: 1.55; color: #dadde4;
  align-self: center; flex: none;
  padding-inline: clamp(0.6rem, 1.4vw, 1.4rem);
  border-inline: 1px solid rgba(232,235,242,0.14);
}
/* Next floor: takes the car up one, wrapping back to the first. */
.carly-site .cs-directory__more {
  flex: none; align-self: center;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(232,235,242,0.24);
  border-radius: 50%;
  background: rgba(251,255,255,0.04);
  color: var(--text);
  font-size: 0.9rem; line-height: 1;
  cursor: pointer;
  transition: opacity 220ms ease, color 180ms ease,
              border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.carly-site .cs-directory__more:hover,
.carly-site .cs-directory__more:focus-visible {
  color: var(--silver-hi);
  border-color: rgba(207,210,216,0.6);
  background: rgba(207,210,216,0.10);
  transform: translateX(2px);
}
.carly-site .cs-directory__more:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }

/* a soft edge on the list so it reads as continuing */
.carly-site .cs-directory__list {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 93%, transparent 100%);
}
.carly-site .cs-directory.is-scrolled .cs-directory__list {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 93%, transparent 100%);
}
.carly-site .cs-directory.is-scrolled.is-end .cs-directory__list {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%);
}
.carly-site .cs-directory.is-end .cs-directory__list {
  -webkit-mask-image: none; mask-image: none;
}

.carly-site .cs-directory__list {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 0;
  flex: 1 1 auto; min-width: 0;
  padding-inline: clamp(0.5rem, 1.1vw, 1.2rem);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.carly-site .cs-directory__list::-webkit-scrollbar { display: none; }
.carly-site .cs-directory__list > li { scroll-snap-align: center; display: flex; }
.carly-site .cs-directory__list > li + li {
  border-left: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 1px 0 0 rgba(234,237,244,0.16);
}
.carly-site .cs-floorbtn {
  display: flex; align-items: center;
  padding: 0.3rem clamp(0.5rem, 1.1vw, 1.1rem);
  background: none; border: 0; cursor: pointer;
  text-align: left; text-decoration: none;
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  transition: color 180ms ease;
}
.carly-site .cs-floorbtn__no {
  font-size: clamp(0.6rem, 0.82vw, 0.74rem); font-weight: 700;
  color: #d9dde3;
}
.carly-site .cs-floorbtn__name {
  font-size: clamp(0.5rem, 0.66vw, 0.6rem);
  color: #dadde4; white-space: nowrap;
}
/* The directory plate: the console button at directory size. It inherits the
   whole .cs-btn component, so the artwork, the engraved number, the mark and
   the lamp are the same ones the console uses. */
.carly-site .cs-btn--mini {
  width: clamp(60px, 5.6vw, 82px);
  filter: brightness(1.02) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.carly-site .cs-floorbtn:hover .cs-btn--mini,
.carly-site .cs-floorbtn:focus-visible .cs-btn--mini {
  filter: brightness(1.12) drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.carly-site .cs-floorbtn:active .cs-btn--mini { transform: translateY(1px); }
.carly-site .cs-floorbtn[aria-current="true"] .cs-btn__glow { opacity: 1; }
.carly-site .cs-floorbtn__lamp {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 0.25rem;
  background: color-mix(in srgb, var(--accent) 30%, #0c0d0d);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.carly-site .cs-floorbtn:hover .cs-floorbtn__no,
.carly-site .cs-floorbtn[aria-current="true"] .cs-floorbtn__no { color: var(--silver-hi); }
.carly-site .cs-floorbtn:hover .cs-floorbtn__name,
.carly-site .cs-floorbtn[aria-current="true"] .cs-floorbtn__name { color: var(--silver-hi); }
.carly-site .cs-floorbtn:hover .cs-floorbtn__lamp,
.carly-site .cs-floorbtn:focus-visible .cs-floorbtn__lamp,
.carly-site .cs-floorbtn[aria-current="true"] .cs-floorbtn__lamp {
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 6px color-mix(in srgb, var(--accent) 90%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.carly-site .cs-floorbtn:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }

/* ---- The about floor ----

   Three zones, as supplied: copy wall, portrait bay, concrete column, at
   51.25% / 35.625% / 13.125%. The portrait bay sits underneath; the
   architecture SVG lies over the whole section with the bay cut out of it,
   so the wall and column are the artwork rather than CSS. Copy sits on top. */

.carly-site .cs-about {
  position: relative;
  width: 100%;
  min-height: clamp(660px, 58.75vw, 940px);
  overflow: hidden;
  isolation: isolate;
  background: #181819;
}
.carly-site .cs-about__portrait {
  position: absolute; z-index: 0;
  /* 48.95%: the chrome column in the lobby photograph below lands here */
  left: 48.95%; top: 0;
  width: 48%; height: 100%;          /* the bay is 768 of 1600, same as the portrait artwork */
  object-fit: cover; object-position: center center;
}
.carly-site .cs-about__architecture {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.carly-site .cs-about__say {
  position: relative; z-index: 2;
  width: 45%;
  padding: 6.2% 0 0 6.5%;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.carly-site .cs-about__title {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 3.3rem); line-height: 1.08;
  text-transform: uppercase; color: var(--text);
}
.carly-site .cs-about__body { max-width: 40ch; display: grid; gap: 1.1rem; }
.carly-site .cs-about__body p {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65; letter-spacing: 0.005em;
  color: var(--text);
}

/* ---- The lobby ----

   Measured off the approved reference: the section is 2.18 : 1, the panels
   stop at 72.7% of its height, and the photographed floor runs unbroken from
   edge to edge beneath all of them. The photograph is the room; the copy wall
   and the stone pane stand in it. */

.carly-site .cs-contact {
  --horizon: 72.7%;      /* where the panels stop and the floor takes over */
  position: relative;
  width: 100%;
  aspect-ratio: 1.75;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  color: #1c1511;
  background: #17110c;
}

/* The room, set far enough right that the photograph reads at the scale the
   reference uses rather than being blown up across the whole width. Its own
   floor line lands on the horizon. */
/* The room, set far enough right that the photograph reads at the scale the
   reference uses rather than being blown up across the whole width. Its own
   floor line lands on the horizon. */
/* One photograph, across the whole section. */
.carly-site .cs-contact__room {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* pinned left so the chrome column in the photograph (48.2% of the image)
     always lands on 48.95% of the section, the same line as the about bay's
     left edge above. The section is 1.75:1 and the photo 1.78:1, so the
     photo is always height-fitted and this holds at every desktop width. */
  object-position: 0% 50%;
}
/* ---- The copy wall: a lit panel standing on the floor ---- */

/* The copy stands directly on the photographed wall. No panel, no frame,
   no backing of any kind: the background shows through around it. */
.carly-site .cs-contact__wall {
  position: absolute; z-index: 2;
  left: 5%; right: 55%;
  top: 22%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.carly-site .cs-contact__title {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.7rem); line-height: 1.06;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: #17110c;
  margin-top: clamp(0.9rem, 1.8vw, 1.6rem);
}
.carly-site .cs-contact__actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: clamp(1.2rem, 2.2vw, 2rem);
}
.carly-site .cs-lobbybtn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-width: 0; min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid rgba(86,69,49,0.38);
  border-radius: 2px;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(0.52rem, 0.64vw, 0.62rem);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #1c1610; text-decoration: none;
  background: linear-gradient(145deg, #f7f1e5 0%, #ece3d2 58%, #ddd2bd 100%);
  box-shadow: inset 0 1px 0 #fffaf0, 0 1px 3px rgba(52,40,26,0.24);
  transition: background 180ms ease, border-color 180ms ease;
}
.carly-site .cs-lobbybtn svg { width: 13px; height: 13px; flex: none; }
.carly-site a.cs-lobbybtn:hover,
.carly-site a.cs-lobbybtn:focus-visible {
  background: linear-gradient(145deg, #fffaf1 0%, #f3ebda 58%, #e4dac5 100%);
  border-color: rgba(86,69,49,0.52);
}
.carly-site .cs-lobbybtn--status { cursor: default; }
.carly-site .cs-lobbybtn__lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #efffdc 0%, #a9ef83 22%, #65c96c 55%, #244c2c 100%);
  box-shadow: 0 0 6px rgba(107,212,119,0.60);
}

/* ---- The footer, standing on the photographed floor ---- */

.carly-site .cs-lobbyfoot {
  position: absolute; z-index: 3;
  left: 2.4%; right: 2.4%; bottom: 3%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  /* it stands on polished stone, so it needs weight and a lit edge of its own */
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(0.56rem, 0.7vw, 0.66rem);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #111112;
  text-shadow:
    0 1px 0 rgba(255,252,244,0.85),
    0 0 12px rgba(255,250,236,0.55);
  isolation: isolate;
}
/* The right of the floor falls into the reflection of the dark fluting, so a
   soft pool of light is laid along the footer. Heavily blurred and edgeless,
   it reads as the room's own light rather than as a bar. */
.carly-site .cs-lobbyfoot::before {
  content: ""; position: absolute; z-index: -1;
  left: -3%; right: -3%; top: -120%; bottom: -160%;
  background: radial-gradient(120% 100% at 78% 50%,
    rgba(255,249,234,0.46) 0%, rgba(255,249,234,0.22) 46%, transparent 78%);
  filter: blur(16px);
  pointer-events: none;
}
.carly-site .cs-lobbyfoot__name span { color: #343536; }
.carly-site .cs-lobbyfoot__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.carly-site .cs-lobbyfoot__nav a { color: #111112; text-decoration: none; }
.carly-site .cs-lobbyfoot__nav a:hover,
.carly-site .cs-lobbyfoot__nav a:focus-visible { color: #111111; }

/* -------------------------------------------------- 11. RESPONSIVE */

@media (max-width: 900px) {
  .carly-site { --rail-h: 3.1rem; --panel-w: clamp(6vw, 13dvh, 9vw); }

  .carly-site .cs-car {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
    align-content: center;
    /* keep the whole fixture visible rather than cropping it */
    padding-block: clamp(2rem, 7vw, 3.5rem) clamp(3rem, 9vw, 4.5rem);
  }

  .carly-site .cs-panel { justify-self: stretch; max-width: none; }

  /* Mobile hero keeps an intentional 4:5 feel: statement sized to sit above
     the panel without either being squeezed. */
  .carly-site .cs-statement { font-size: clamp(2.9rem, 13.5vw, 4.6rem); }

  .carly-site .cs-floor,
  .carly-site .cs-car { padding-left: calc(var(--gutter) + clamp(30px, 8vw, 56px)); }


  /* round buttons stay three across on phones, as in the reference */
  .carly-site .cs-buttons .cs-btn { width: 84%; }
  .carly-site .cs-grid2 { grid-template-columns: minmax(0,1fr); }
  .carly-site .cs-preview__grid,
  .carly-site .cs-contact {
    min-height: auto;
    display: flex; flex-direction: column;
  }
  .carly-site .cs-contact {
    aspect-ratio: auto; min-height: auto;
    display: flex; flex-direction: column;
  }
  .carly-site .cs-contact__room {
    position: relative; inset: auto; order: 3;
    width: 100%; height: clamp(15rem, 58vw, 24rem);
  }
  .carly-site .cs-contact__wall {
    position: relative; inset: auto;
    padding: 3.5rem 1.75rem 2.5rem;
  }
  .carly-site .cs-lobbyfoot {
    position: relative; inset: auto; order: 4;
    padding: 1.4rem 1.75rem 1.8rem;
  }
  .carly-site .cs-lobbyfoot {
    position: relative; left: auto; right: auto; bottom: auto;
    order: 4; padding: 1.4rem 1.75rem 1.8rem;
  }
  .carly-site .cs-about {
    min-height: auto;
    display: flex; flex-direction: column;
  }
  .carly-site .cs-about__architecture { display: none; }
  .carly-site .cs-about__say { width: 100%; padding: 4.5rem 1.75rem; }
  .carly-site .cs-about__portrait {
    position: relative; left: auto; top: auto;
    width: 100%; height: clamp(28rem, 122vw, 45rem);
    order: 2;
  }
  .carly-site .cs-railnav { gap: 1rem; }
  .carly-site .cs-railnav a { font-size: 0.55rem; }
  .carly-site .cs-directory__label--end { display: none; }
  .carly-site .cs-about__aside,
  .carly-site .cs-contact__aside { position: static; transform: none; padding: 1rem 1.5rem; }
  /* When the two columns stack, they need air between them. */
  .carly-site .cs-grid2 > * + * { margin-top: clamp(1.75rem, 5vw, 2.75rem); }
  .carly-site .cs-spec__row { grid-template-columns: minmax(0,1fr); gap: 0.2rem; }
}

@media (max-width: 620px) {
  .carly-site { --panel-w: 0px; }
  .carly-site .cs-ribs { display: none; }
  .carly-site .cs-corner { left: 0; }
}

@media (max-width: 480px) {
  /* Two button columns are preserved; the face gets shorter, not narrower. */
  .carly-site .cs-btn__face { padding: 0.45rem 0.5rem 0.45rem; }
  .carly-site .cs-btn__label { font-size: 0.95rem; }
  .carly-site .cs-rail { gap: 0.75rem; }
  .carly-site .cs-plate { padding-inline: 0.6rem; }
  /* one line, always: a wrapped nameplate stops reading as a plate */
  .carly-site .cs-plate__name {
    white-space: nowrap;
    padding: 0.62rem 1.5rem 0.82rem;
    font-size: 0.72rem;
    letter-spacing: 0.24em; text-indent: 0.24em;
  }
  .carly-site .cs-plate__role { display: none; }
  .carly-site .cs-rail .cs-status__text { display: none; }
  /* the three links and the lamp have to share a phone's width with the plate */
  .carly-site .cs-railnav { gap: 0.7rem; }
  .carly-site .cs-railnav a { font-size: 0.5rem; letter-spacing: 0.1em; }
  /* the lamp has no label at this size, so it leaves the header; the
     contact section still carries "Taking work" */
  .carly-site .cs-rail .cs-status { display: none; }
}

/* Never let the composition scroll sideways */
.carly-site { overflow-x: hidden; }

/* ------------------------------------------------ 12. ELEVATOR DOORS

   The entrance. Two halves of one photograph of closed doors, cut exactly at
   the seam, so the brushing and the groove meet when shut. The page is
   already rendered behind them; after a beat they part and slide off, and the
   overlay is removed. Built by the inline snippet at the top of each page,
   on every refresh or fresh arrival (not internal navigation), never under
   prefers-reduced-motion. The photograph is recoloured to the site's chrome.

   Everything is CSS: if the script that removes the overlay never runs, the
   doors still open and the overlay still stops taking clicks. */

.cs-doors {
  /* the doors fill everything below the header; the header is the real one */
  position: fixed; top: 4rem; right: 0; bottom: 0; left: 0;
  z-index: 2147483000;
  overflow: hidden;
  /* stops taking clicks the moment the doors are clear */
  animation: cs-doors-clear 1ms linear 3.15s forwards;
}
.cs-doors .cs-door {
  position: absolute; top: 0; bottom: 0;
  width: calc(50% + 1px);                    /* 1px overlap: no hairline at the seam */
  background-color: #4a4c50;                 /* the door's own tone, while the image decodes */
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  /* Carly asked for a slower, more gradual opening (2026-10): a longer beat
     on the closed doors with her name lit, then a gentle 2.2s glide */
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.5, 0, .22, 1);
  animation-delay: .9s;
  animation-fill-mode: both;
}
/* each half is pinned by its seam edge, so the seam stays dead centre at any size */
.cs-doors .cs-door--l {
  left: 0;
  background-image: url("/assets/doors/door-left.webp");
  background-position: right center;
  animation-name: cs-door-l;
}
.cs-doors .cs-door--r {
  right: 0;
  background-image: url("/assets/doors/door-right.webp");
  background-position: left center;
  animation-name: cs-door-r;
}
/* the leading edges throw a little shadow onto the room once they part */
@keyframes cs-door-l {
  0%   { transform: translate3d(0, 0, 0); box-shadow: 0 0 0 rgba(0,0,0,0); }
  12%  { box-shadow: 14px 0 34px rgba(0,0,0,0.55); }
  100% { transform: translate3d(calc(-100% - 60px), 0, 0); box-shadow: 14px 0 34px rgba(0,0,0,0.55); visibility: hidden; }
}
@keyframes cs-door-r {
  0%   { transform: translate3d(0, 0, 0); box-shadow: 0 0 0 rgba(0,0,0,0); }
  12%  { box-shadow: -14px 0 34px rgba(0,0,0,0.55); }
  100% { transform: translate3d(calc(100% + 60px), 0, 0); box-shadow: -14px 0 34px rgba(0,0,0,0.55); visibility: hidden; }
}
@keyframes cs-doors-clear { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .cs-doors { display: none; }
}

@media (max-width: 900px) { .cs-doors { top: 3.1rem; } }

/* ---- The header during the doors ----

   One header changing state. The real nameplate starts large and centred
   over the closed doors, then shrinks and slides into its place on the left
   as they part, over the same 1.2s and the same easing. COPYWRITER + ACD
   comes up once it is on its way, then the links and the lamp. Everything
   lands on its normal style, so removing .cs-intro at the end moves nothing.

   Centring without measuring: the name's left edge is the rail's padding
   (--plate-x). translate(50vw - that) puts its left edge mid-screen, the
   second translate(-50%) pulls it back by half its own width, and scaling
   about the centre leaves it centred. */

.cs-intro .carly-site .cs-rail { --plate-x: calc(var(--panel-w) + 1.25rem); }
.cs-intro .carly-site .cs-plate__name {
  --plate-scale: 1.45;
  transform-origin: center center;
  animation: cs-plate-land 2.2s cubic-bezier(.5, 0, .22, 1) .9s both;
}
@keyframes cs-plate-land {
  from {
    transform: translateX(calc(50vw - var(--plate-x))) translateX(-50%) scale(var(--plate-scale));
    filter: brightness(1.12) drop-shadow(0 0 18px rgba(255,90,20,0.45));
  }
  to { transform: none; filter: none; }
}

/* the role waits until the plate has slid past where it sits */
.cs-intro .carly-site .cs-plate__role { animation: cs-hdr-in .45s ease-out 2.45s both; }
.cs-intro .carly-site .cs-railnav,
.cs-intro .carly-site .cs-status    { animation: cs-hdr-in .5s ease-out 2.6s both; }
/* hidden means unclickable too, until the moment it can be seen */
@keyframes cs-hdr-in {
  from { opacity: 0; visibility: hidden; }
  to   { opacity: 1; visibility: visible; }
}

@media (max-width: 480px) {
  /* the plate has its own inline padding here, and the name is scaled less
     so it still fits a phone */
  .cs-intro .carly-site .cs-rail { --plate-x: calc(var(--panel-w) + 1.25rem + 0.6rem); }
  .cs-intro .carly-site .cs-plate__name { --plate-scale: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-intro .carly-site .cs-plate__name,
  .cs-intro .carly-site .cs-plate__role,
  .cs-intro .carly-site .cs-railnav,
  .cs-intro .carly-site .cs-status { animation: none; }
}

/* ------------------------------------------------ 13. THE FULL PROJECT

   An accordion under the preview, the same width as the shaft. It opens by
   animating its grid row from 0fr to 1fr, so it grows to exactly its content
   with no measured heights. Media use a small set of shapes (full 16:9,
   half 4:3, third 4:5) so anything in one row lines up on its own. */

.carly-site .cs-textlink--btn { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; padding-left: 0; padding-right: 0; }
.carly-site .cs-textlink__arrow { display: inline-block; transition: transform 300ms ease; }
.carly-site .cs-textlink--btn[aria-expanded="true"] .cs-textlink__arrow { transform: rotate(180deg); }

.carly-site .cs-dossier {
  max-width: 96rem; margin-inline: auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 700ms cubic-bezier(.66, 0, .26, 1);
}
.carly-site .cs-dossier.is-open { grid-template-rows: 1fr; }
.carly-site .cs-dossier.is-instant { transition: none; }
.carly-site .cs-dossier__clip { overflow: hidden; min-height: 0; }
.carly-site .cs-dossier__body {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  display: grid; gap: clamp(1.75rem, 3.4vw, 3rem);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 400ms ease, transform 600ms cubic-bezier(.2,.7,.3,1);
}
.carly-site .cs-dossier.is-open .cs-dossier__body { opacity: 1; transform: none; transition-delay: 150ms; }
.carly-site .cs-dossier:not(.is-open) .cs-dossier__body { visibility: hidden; transition: opacity 250ms ease, transform 250ms ease, visibility 0s 700ms; }

.carly-site .cs-dossier__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.carly-site .cs-dossier__bar .cs-floortag__lamp { background: radial-gradient(circle at 36% 30%, #fff 0%, var(--accent) 55%, #111 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent); }
.carly-site .cs-dossier__actions { display: flex; gap: 0.6rem; }
.carly-site .cs-chip {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text); cursor: pointer;
  padding: 0.55rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(232,235,242,0.26);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  transition: border-color 180ms ease, background 180ms ease;
}
.carly-site .cs-chip:hover,
.carly-site .cs-chip:focus-visible { border-color: rgba(232,235,242,0.6); background: rgba(255,255,255,0.1); }
.carly-site .cs-chip:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }

.carly-site .cs-dossier__intro {
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}
.carly-site .cs-dossier__h {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 45%, #e6e8ec);
  margin-bottom: 0.9rem;
}
.carly-site .cs-dossier__copy { display: grid; gap: 0.9rem; max-width: 52ch; }
.carly-site .cs-dossier__copy p {
  font-family: var(--body); font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7; color: var(--text);
}
/* copy still to come: quiet, and obviously not finished */
.carly-site .cs-dossier__todo {
  font-family: var(--body); font-size: 0.95rem; line-height: 1.6;
  color: rgba(230,232,236,0.5);
  padding-left: 0.9rem; border-left: 1px dashed rgba(230,232,236,0.28);
  max-width: 44ch;
}

/* media: framed in the same chrome as the preview image */
.carly-site .cs-dossier__film,
.carly-site .cs-gallery__item { margin: 0; min-width: 0; }
.carly-site .cs-asset,
.carly-site .cs-slot {
  width: 100%;
  overflow: hidden; border-radius: 3px;
  background: var(--film), linear-gradient(160deg, #252627, var(--esp-mid));
  box-shadow: 0 0 0 1px #0f0c09, inset 0 0 0 1px rgba(251,255,255,0.10), 0 26px 50px -32px rgba(0,0,0,0.95);
}
.carly-site .cs-asset > img,
.carly-site .cs-asset > video,
.carly-site .cs-asset > iframe {
  display: block; width: 100%; height: 100%; border: 0;
  object-fit: cover;
}
.carly-site .cs-dossier figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #d9dbe0;
}

/* an empty slot: sized to its format and labelled */
.carly-site .cs-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  text-align: center; padding: 1rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #222324, #151516);
  outline: 1px dashed rgba(232,235,242,0.16); outline-offset: -10px;
}
.carly-site .cs-slot__icon {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(232,235,242,0.35);
  position: relative;
}
.carly-site .cs-slot--video .cs-slot__icon::after,
.carly-site .cs-slot--embed .cs-slot__icon::after {
  content: ""; position: absolute; left: 13px; top: 10px;
  border-left: 10px solid rgba(232,235,242,0.6);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.carly-site .cs-slot--image .cs-slot__icon { border-radius: 4px; }
.carly-site .cs-slot--image .cs-slot__icon::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 10px;
  background: linear-gradient(135deg, transparent 45%, rgba(232,235,242,0.5) 46%);
}
.carly-site .cs-slot__label {
  font-family: var(--body); font-size: 0.95rem; color: var(--text);
}
.carly-site .cs-slot__spec {
  font-family: var(--mono); font-size: 0.5rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: rgba(230,232,236,0.5);
}

/* A media row. Each item grows in proportion to its shape (--ar = width /
   height), so every item comes out the same height and the row is exactly
   full width, however many it holds. Add a fourth and the other three
   shrink to make room. */
.carly-site .cs-row {
  display: flex; align-items: flex-start;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
}
.carly-site .cs-row__item { flex: var(--ar) 1 0%; min-width: 0; margin: 0; }
/* never taller than ~80% of the screen: width = total shape x 80vh + gaps */
.carly-site .cs-row {
  max-width: calc(var(--sum, 10) * 80vh + (var(--n, 1) - 1) * clamp(0.9rem, 1.8vw, 1.6rem));
  margin-inline: auto; width: 100%;
}
.carly-site .cs-split__media .cs-row { max-width: none; }

.carly-site .cs-dossier__quote {
  margin: 0; padding: clamp(0.5rem, 2vw, 1.5rem) 0;
  max-width: 40ch;
}
.carly-site .cs-dossier__quote p {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--text);
}
.carly-site .cs-dossier__quote cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 45%, #e6e8ec);
}

/* a floor with no logo yet: its name engraved in type */
.carly-site .cs-btn__label {
  position: absolute; left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 64%; text-align: center;
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(0.5rem, 0.8vw, 0.7rem); line-height: 1.15;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #15171a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.carly-site .cs-btn--mini .cs-btn__label { font-size: 0.42rem; }

/* the facts strip */
.carly-site .cs-dossier__facts {
  display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 1.25rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.carly-site .cs-dossier__facts dt {
  font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(230,232,236,0.6); margin-bottom: 0.45rem;
}
.carly-site .cs-dossier__facts dd {
  margin: 0; font-family: var(--body); font-size: 0.95rem; line-height: 1.45; color: var(--text);
}
.carly-site .cs-dossier__facts dd.is-todo { color: rgba(230,232,236,0.38); }

.carly-site .cs-dossier__foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

@media (max-width: 900px) {
  .carly-site .cs-dossier__intro { grid-template-columns: minmax(0, 1fr); }
  .carly-site .cs-dossier__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* rows of three or more wrap two to a line rather than becoming slivers */
  .carly-site .cs-row--many { flex-wrap: wrap; }
  .carly-site .cs-row--many > .cs-row__item { flex: 1 1 calc(50% - 1rem); }
}
@media (max-width: 700px) {
  /* the preview stacks: picture, then words, in a taller window */
  .carly-site .cs-shaft { height: 46rem; }
  .carly-site .cs-corner--carry { height: calc(clamp(3rem, 6vw, 5.5rem) + 46rem + 1.5rem); }
  .carly-site .cs-floorpanel {
    grid-template-columns: minmax(0, 1fr);
    align-content: center; gap: 1.6rem;
  }
  .carly-site .cs-floorpanel .cs-preview__media { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .carly-site .cs-dossier,
  .carly-site .cs-dossier__body { transition: none !important; }
}

/* the contact block's lamp follows availability too */
.carly-site .cs-lobbybtn--status[data-state="booked"] .cs-lobbybtn__lamp {
  background: var(--amber);
  box-shadow: 0 0 6px rgba(242,174,60,0.8);
}

/* A portrait replaced in Sanity: the photo sits behind a CSS version of the
   fluted glass, clipped to the same arch as the baked portrait. */
.carly-site .cs-about__portrait--live {
  object-fit: cover;
  border-top-right-radius: 28.4% 23.2%;
}
.carly-site .cs-about__glass {
  position: absolute; z-index: 0;
  left: 48.95%; top: 0; width: 48%; height: 100%;
  border-top-right-radius: 28.4% 23.2%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,9,7,0.20), rgba(212,215,221,0.05) 18%, rgba(33,33,34,0.07) 53%, rgba(13,9,7,0.16)),
    repeating-linear-gradient(90deg,
      rgba(251,255,255,0.18) 0 1.2px, rgba(251,255,255,0.025) 1.2px 6px,
      rgba(16,17,17,0.12) 6px 10.5px, rgba(206,210,216,0.11) 10.5px 11.7px,
      rgba(9,7,5,0.055) 11.7px 18px);
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
}
@media (max-width: 900px) {
  .carly-site .cs-about__glass { display: none; }
}

/* ---- Carousel: a scroll-snapping strip; arrows and dots scroll it ---- */
.carly-site .cs-carousel { position: relative; min-width: 0; }
.carly-site .cs-carousel__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 3px;
}
.carly-site .cs-carousel__track::-webkit-scrollbar { display: none; }
.carly-site .cs-carousel__track:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.carly-site .cs-carousel__slide {
  flex: 0 0 100%; margin: 0; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.carly-site .cs-carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 0.9rem;
}
.carly-site .cs-carousel__btn {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  color: var(--text); font-size: 0.9rem; line-height: 1;
  border: 1px solid rgba(232,235,242,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  transition: border-color 180ms ease, background 180ms ease;
}
.carly-site .cs-carousel__btn:hover,
.carly-site .cs-carousel__btn:focus-visible { border-color: rgba(232,235,242,0.65); background: rgba(255,255,255,0.1); }
.carly-site .cs-carousel__dots { display: flex; gap: 0.5rem; }
.carly-site .cs-carousel__dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(232,235,242,0.28); border: 0;
  transition: background 200ms ease, box-shadow 200ms ease;
}
/* the current slide's dot is lit in the floor's lamp colour */
.carly-site .cs-carousel__dot.is-on {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ---- Media + text ---- */
.carly-site .cs-split {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.carly-site .cs-split--narrow { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.carly-site .cs-split--wide   { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.carly-site .cs-split--right.cs-split--narrow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.carly-site .cs-split--right.cs-split--wide   { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.carly-site .cs-split--right .cs-split__media { order: 2; }
.carly-site .cs-split__media { min-width: 0; }
.carly-site .cs-caption {
  margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: #d9dbe0;
}

/* ---- Figures ---- */
.carly-site .cs-stats {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}
.carly-site .cs-stat { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }
.carly-site .cs-stat__value {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, #e9ecf3);
}
.carly-site .cs-stat__label {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: #d9dbe0;
}
.carly-site .cs-stat.is-todo .cs-stat__value { font-size: 1rem; color: rgba(230,232,236,0.4); }

@media (max-width: 900px) {
  .carly-site .cs-split,
  .carly-site .cs-split--narrow,
  .carly-site .cs-split--wide,
  .carly-site .cs-split--right.cs-split--narrow,
  .carly-site .cs-split--right.cs-split--wide { grid-template-columns: minmax(0, 1fr); }
  .carly-site .cs-split--right .cs-split__media { order: 0; }
  .carly-site .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- A floor opened in full: one continuous project ----
   The window fits the floor's opening, the caption and toggle step aside,
   and the project's sections carry on underneath at the same rhythm. */
.carly-site .cs-shaft { transition: height 600ms cubic-bezier(.66, 0, .26, 1); }
.carly-site .cs-preview.is-full .cs-floorpanel { align-items: start; }
.carly-site .cs-preview.is-full .cs-preview__caption,
.carly-site .cs-preview.is-full [data-dossier-toggle] { display: none; }
.carly-site .cs-preview.is-full .cs-preview__meta { margin-bottom: 0; }
.carly-site .cs-preview.is-full .cs-dossier__body { padding-top: clamp(2.25rem, 4.5vw, 4rem); }
.carly-site .cs-dossier__foot { padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); }
@media (prefers-reduced-motion: reduce) { .carly-site .cs-shaft { transition: none; } }
.carly-site .cs-corner--carry { transition: opacity 400ms ease; }
.carly-site .cs-preview.is-full .cs-corner--carry { opacity: 0; }

/* ---- The opening of a full project ----
   Left: title, copy, campaign info. Beside it, per project (Sanity
   "Beside the title when the project is open"): the details, the header
   image, or nothing. The quick preview before a floor is opened always
   shows the image when there is one. */
.carly-site .cs-floorpanel__facts { display: none; }
.carly-site .cs-floorpanel.is-imageless { grid-template-columns: minmax(0, 1fr); }

/* opened: panels clip their own content so the floor above never shows through */
.carly-site .cs-preview.is-full .cs-floorpanel { overflow: hidden; }

/* details beside the title */
.carly-site .cs-preview.is-full .opens-details { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
.carly-site .cs-preview.is-full .opens-details .cs-preview__media { display: none; }
.carly-site .cs-preview.is-full .opens-details .cs-floorpanel__facts--side { display: block; padding-top: clamp(1.8rem, 3.2vw, 2.6rem); }
.carly-site .cs-preview.is-full .opens-details.is-factless { grid-template-columns: minmax(0, 1fr); }

/* the header image beside the title (details under the intro) */
.carly-site .cs-preview.is-full .opens-image.is-imageless { grid-template-columns: minmax(0, 1fr); }

/* nothing beside the title */
.carly-site .cs-preview.is-full .opens-none { grid-template-columns: minmax(0, 1fr); }
.carly-site .cs-preview.is-full .opens-none .cs-preview__media { display: none; }

/* details under the intro, for "image" and "nothing" */
.carly-site .cs-preview.is-full .cs-floorpanel__facts--inline { display: block; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 34rem; }

.carly-site .cs-floorpanel__facts .cs-dossier__facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 0; padding: 0; border-bottom: 0;
}
.carly-site .cs-floorpanel__facts .cs-dossier__facts > div {
  padding: 1rem 0; border-bottom: 1px solid var(--rule-soft);
}
.carly-site .cs-floorpanel__facts--inline .cs-dossier__facts > div { padding: 0.75rem 0; }
.carly-site .cs-floorpanel__facts dd { font-size: clamp(1rem, 1.25vw, 1.12rem); }
@media (max-width: 700px) {
  .carly-site .cs-preview.is-full .cs-floorpanel { grid-template-columns: minmax(0, 1fr); }
  .carly-site .cs-preview.is-full .opens-details .cs-floorpanel__facts--side { padding-top: 0; }
}

/* Text set to "Wide" in the Studio: noticeably wider than normal, but still
   a comfortable line (about 75 characters) rather than the full span */
.carly-site .cs-dossier__intro--full .cs-dossier__copy { max-width: 75ch; }

/* ---- Text alignment (Studio: Left / Centred block / Centred text) ---- */
.carly-site .cs-dossier__intro.cs-align--block,
.carly-site .cs-dossier__intro.cs-align--center { justify-items: center; }
.carly-site .cs-align--block .cs-dossier__copy,
.carly-site .cs-align--center .cs-dossier__copy { margin-inline: auto; }
.carly-site .cs-align--block .cs-dossier__text,
.carly-site .cs-align--center .cs-dossier__text { width: 100%; }
.carly-site .cs-align--block .cs-dossier__h { text-align: left; max-width: 52ch; margin-inline: auto; }
.carly-site .cs-dossier__intro--full.cs-align--block .cs-dossier__h { max-width: 75ch; }
.carly-site .cs-align--center .cs-dossier__text,
.carly-site .cs-align--center .cs-dossier__copy { text-align: center; }

/* ---- Headings: the Heading section, and heading styles inside text ---- */
.carly-site .cs-sechead { display: grid; gap: 0.8rem; padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.carly-site .cs-sechead.cs-align--center { text-align: center; justify-items: center; }
.carly-site .cs-sechead__title {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1.08; letter-spacing: -0.004em;
  color: var(--text); margin: 0;
}
.carly-site .cs-sechead__sub {
  font-family: var(--body); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
  color: #d1d4db; max-width: 60ch; margin: 0;
}
.carly-site .cs-dossier__copy .cs-copy-h {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.15; color: var(--text);
  margin: 0.8rem 0 0;
}
.carly-site .cs-dossier__copy .cs-copy-sub {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  font-size: 0.66rem; letter-spacing: var(--tracking-label);
  color: color-mix(in srgb, var(--accent) 45%, #e6e8ec);
  margin: 0.6rem 0 -0.3rem;
}
.carly-site .cs-dossier__copy > :first-child { margin-top: 0; }

/* Belt and braces against orphans (the build already ties the last two words
   of every paragraph together): browsers that support it also even out the
   last lines, and centred text is balanced line to line. */
.carly-site :where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
.carly-site .cs-align--center .cs-dossier__copy p,
.carly-site .cs-sechead.cs-align--center .cs-sechead__sub { text-wrap: balance; }

/* ---- A single image or video on its own: shown big ----
   It steps out of the text column to span the page, from just right of the
   elevator rail to just short of the right edge, up to the full screen
   height less a small margin (taller pictures scale down and centre). Rows of two or more stay
   in the column. The accordion clips only top and bottom, so the step-out
   isn't cut off at the sides. */
.carly-site .cs-dossier__clip { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
@media (min-width: 901px) {
  .carly-site .cs-row--solo {
    max-width: none;
    width: calc(100vw - var(--panel-w) - 2 * var(--gutter));
    margin-left: calc(var(--panel-w) + var(--gutter) - var(--centre-pad) - var(--inset));
  }
  .carly-site .cs-row--solo .cs-row__item {
    flex: 0 1 auto; width: 100%;
    /* as tall as the screen allows, less a small margin */
    max-width: calc(var(--ar) * (100vh - 3rem));
    margin-inline: auto;
  }
}

/* ---- Image viewer: click an image to see it full screen ---- */
.carly-site .cs-dossier .cs-asset > img { cursor: zoom-in; }
.cs-viewing, .cs-viewing body { overflow: hidden; }
.carly-site .cs-viewer {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) 5rem; align-items: center;
  background: rgba(8, 6, 4, 0.94);
  opacity: 0; transition: opacity 220ms ease;
}
.carly-site .cs-viewer.is-open { opacity: 1; }
.carly-site .cs-viewer[hidden] { display: none; }
.carly-site .cs-viewer__stage {
  grid-column: 2; margin: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 3.5rem 0 2.5rem;
}
.carly-site .cs-viewer__img {
  max-width: 100%; max-height: 100%; min-height: 0;
  object-fit: contain; display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.carly-site .cs-viewer__cap {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #d9dbe0;
}
.carly-site .cs-viewer__cap:empty { display: none; }
.carly-site .cs-viewer__close {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 1;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(232,235,242,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  transition: border-color 180ms ease, background 180ms ease;
}
.carly-site .cs-viewer__close svg { width: 1.1rem; height: 1.1rem; stroke: #f3f4f7; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.carly-site .cs-viewer__nav {
  justify-self: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  color: var(--text); font-size: 1.1rem; line-height: 1;
  border: 1px solid rgba(232,235,242,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  transition: border-color 180ms ease, background 180ms ease;
}
.carly-site .cs-viewer__nav--prev { grid-column: 1; grid-row: 1; }
.carly-site .cs-viewer__nav--next { grid-column: 3; grid-row: 1; }
.carly-site .cs-viewer__stage { grid-row: 1; }
.carly-site .cs-viewer__nav[hidden] { display: none; }
.carly-site .cs-viewer__close:hover, .carly-site .cs-viewer__close:focus-visible,
.carly-site .cs-viewer__nav:hover, .carly-site .cs-viewer__nav:focus-visible {
  border-color: rgba(232,235,242,0.75); background: rgba(255,255,255,0.12);
}
.carly-site .cs-viewer :focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }
@media (max-width: 700px) {
  .carly-site .cs-viewer { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .carly-site .cs-viewer__stage { padding: 4rem 0.75rem 4.5rem; }
  .carly-site .cs-viewer__nav { position: absolute; bottom: 1.2rem; }
  .carly-site .cs-viewer__nav--prev { left: calc(50% - 3.4rem); }
  .carly-site .cs-viewer__nav--next { right: calc(50% - 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .carly-site .cs-viewer { transition: none; } }

/* ---- A logo with its name engraved underneath (Studio: "Show a name under
   the logo"). The mark lifts and shrinks a touch to make room; the name sits
   between it and the lamp, sized off the button itself. ---- */
.carly-site .cs-btn { container-type: inline-size; }
.carly-site .cs-btn--worded .cs-btn__mark { top: 42%; height: 21%; width: 50%; }
.carly-site .cs-btn__word {
  position: absolute; left: 50%; top: 61.5%;
  transform: translate(-50%, -50%);
  width: 66%; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: 7.2cqw; line-height: 1; letter-spacing: 0.08em;
  color: #15171a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
/* too small to read on the directory buttons: logo only there */
.carly-site .cs-btn--mini .cs-btn__word { display: none; }
.carly-site .cs-btn--mini.cs-btn--worded .cs-btn__mark { top: 48%; height: 27%; width: 56%; }

/* A lone button on the last row of the elevator sits in the middle column. */
.carly-site .cs-buttons > .cs-btn:last-child:nth-child(3n + 1) { grid-column: 2; }

/* ---- Carousel: arrows over the sides, thumbnails underneath ---- */
.carly-site .cs-carousel__stage { position: relative; }
.carly-site .cs-carousel__side {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: clamp(2.6rem, 4.5vw, 4rem); height: clamp(4rem, 9vw, 5.8rem);
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: rgba(10, 8, 6, 0.38);
  transition: background 180ms ease;
}
.carly-site .cs-carousel__side--prev { left: 0; }
.carly-site .cs-carousel__side--next { right: 0; }
.carly-site .cs-carousel__side svg {
  width: 40%; height: 55%; fill: none; stroke: #f3f4f7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.carly-site .cs-carousel__side:hover,
.carly-site .cs-carousel__side:focus-visible { background: rgba(10, 8, 6, 0.62); }
.carly-site .cs-carousel__side:focus-visible { outline: 1px solid var(--champagne); outline-offset: -3px; }

.carly-site .cs-carousel__thumbs {
  display: flex; justify-content: center; gap: 0;
  margin-top: 0.9rem;
  overflow-x: auto; scrollbar-width: none;
}
.carly-site .cs-carousel__thumbs::-webkit-scrollbar { display: none; }
/* when there are more than fit, start at the left and scroll */
.carly-site .cs-carousel__thumbs:has(> :nth-child(9)) { justify-content: flex-start; }
.carly-site .cs-carousel__thumb {
  flex: none; position: relative;
  height: clamp(3.4rem, 6vw, 5rem);
  aspect-ratio: clamp(1, var(--tar, 1.6), 1.8);
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: #181819;
  opacity: 0.45;
  transition: opacity 200ms ease;
}
.carly-site .cs-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carly-site .cs-carousel__thumb:hover,
.carly-site .cs-carousel__thumb:focus-visible { opacity: 0.8; }
.carly-site .cs-carousel__thumb.is-on { opacity: 1; }
/* the current item is marked with a fine line in the floor's lamp colour */
.carly-site .cs-carousel__thumb.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
}
.carly-site .cs-carousel__thumb:focus-visible { outline: 1px solid var(--champagne); outline-offset: -2px; }
/* a video file with no cover image: a play symbol */
.carly-site .cs-carousel__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.carly-site .cs-carousel__play::after {
  content: ""; border-left: 12px solid rgba(243,244,247,0.8);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 3px;
}
/* the old row of dots and arrows is replaced by the above */
.carly-site .cs-carousel__controls { display: none; }

/* ---- Subheading section: the heading font, a step down ---- */
.carly-site .cs-subhead {
  margin: 0; padding-top: clamp(0.25rem, 1vw, 0.75rem);
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: 0.01em;
  color: var(--text);
}
.carly-site .cs-subhead.cs-align--center { text-align: center; }

/* several rows from one Images / video section (one after another, grids) */
.carly-site .cs-rows { display: grid; gap: clamp(0.9rem, 1.8vw, 1.6rem); }
.carly-site .cs-row--short { max-width: min(100%, calc(var(--frac) * 100%)); }

/* ---- Carousel on Automatic: whole images, no crop ----
   The frame never exceeds ~80% of the screen height; each slide is centred
   in it on the page itself, with no box behind it. */
.carly-site .cs-carousel--fit { max-width: calc(var(--car-ar) * 80vh); margin-inline: auto; }
.carly-site .cs-carousel--fit .cs-carousel__slide .cs-asset { background: none; box-shadow: none; }
.carly-site .cs-carousel--fit .cs-carousel__slide .cs-asset > img,
.carly-site .cs-carousel--fit .cs-carousel__slide .cs-asset > video { object-fit: contain; }

/* ---- The email address in type ---- */
.carly-site .cs-contact__email {
  margin-top: clamp(1.6rem, 2.8vw, 2.4rem);
}
.carly-site .cs-contact__email a {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: 0.005em;
  color: #17110c; text-decoration: none;
  border-bottom: 1px solid rgba(23,17,12,0.35);
  transition: border-color 160ms ease;
}
.carly-site .cs-contact__email a:hover,
.carly-site .cs-contact__email a:focus-visible { border-color: #17110c; }

/* ================================================= 14. PHONES (2026-09-29)
   One consistent side margin on phones: there is no elevator rail at this
   size, so nothing should be pushed right to make room for it. */
@media (max-width: 700px) {
  .carly-site { --phone-pad: 1.4rem; }

  /* ---- hero: a smaller headline that keeps its four designed lines ---- */
  .carly-site .cs-car { padding-inline: var(--phone-pad); }
  .carly-site .cs-statement { font-size: clamp(1.7rem, 9.2cqw, 2.9rem); }

  /* ---- elevator: About / Contact / LinkedIn plates are too small for a
     label and an icon side by side, so the label stands alone, centred ---- */
  .carly-site .cs-aux--pad .cs-aux__push { display: none; }
  .carly-site .cs-aux--pad .cs-aux__label { left: 50%; }

  /* ---- the project: same margins both sides, window fits the floor ---- */
  .carly-site .cs-preview {
    padding-left: var(--phone-pad); padding-right: var(--phone-pad);
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
  }
  .carly-site .cs-shaft,
  .carly-site .cs-corner--carry { height: auto; }
  .carly-site .cs-corner--carry,
  .carly-site .cs-preview__caption { display: none; }
  .carly-site .cs-floorpanel { align-content: start; align-items: start; }

  /* ---- about ---- */
  .carly-site .cs-about__say { padding: 4rem var(--phone-pad) 3rem; }

  /* ---- contact: the copy stands on the photographed stone wall, as on
     desktop, instead of dark type on a dark ground ---- */
  .carly-site .cs-contact { display: block; position: relative; min-height: 0; }
  .carly-site .cs-contact__room {
    position: absolute; inset: 0; order: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 16% 50%;
  }
  .carly-site .cs-contact__wall {
    position: relative; inset: auto;
    padding: 4rem var(--phone-pad) 9rem;
  }
  /* larger on phones: the desktop line break gives way and the heading
     balances itself across three lines */
  .carly-site .cs-contact__title { font-size: clamp(1.4rem, 7.4vw, 2.1rem); text-wrap: balance; }
  .carly-site .cs-contact__title br { display: none; }

  /* ---- floor directory: room for more floors ---- */
  .carly-site .cs-directory__mark { display: none; }
  .carly-site .cs-directory { gap: 0.6rem; padding-inline: var(--phone-pad) 0.9rem; }

  /* ---- footer: its own dark band so it can always be read ---- */
  .carly-site .cs-lobbyfoot {
    position: relative; inset: auto; z-index: 2;
    flex-direction: column; align-items: flex-start; gap: 0.9rem;
    padding: 1.5rem var(--phone-pad) 1.8rem;
    background: #121213;
    color: var(--text); text-shadow: none;
  }
  .carly-site .cs-lobbyfoot::before { display: none; }
  .carly-site .cs-lobbyfoot__name span { color: #b2b5ba; }
  .carly-site .cs-lobbyfoot__nav a,
  .carly-site .cs-lobbyfoot__nav a:hover,
  .carly-site .cs-lobbyfoot__nav a:focus-visible { color: var(--silver-hi); }
}

/* ---- YouTube / Vimeo: a still and a play button until played ---- */
.carly-site .cs-embed {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: #0d0b09;
}
.carly-site .cs-embed img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* in the bottom corner, so the still's own copy stays readable */
.carly-site .cs-embed__play {
  position: absolute; left: clamp(0.6rem, 1.4vw, 1rem); bottom: clamp(0.6rem, 1.4vw, 1rem);
  width: clamp(2.6rem, 4.2vw, 3.6rem); aspect-ratio: 1; border-radius: 50%;
  background: rgba(12,10,8,0.62);
  border: 1px solid rgba(243,244,247,0.55);
  transition: background 180ms ease, transform 180ms ease;
}
.carly-site .cs-embed__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 0.8rem solid #f3f4f7; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent;
}
.carly-site .cs-embed:hover .cs-embed__play,
.carly-site .cs-embed:focus-visible .cs-embed__play { background: rgba(12,10,8,0.85); transform: scale(1.06); }
.carly-site .cs-embed:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }

/* phones: the chosen floor fades in in place of the lift ride */
@keyframes cs-swap { from { opacity: 0.12; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.carly-site .cs-preview.is-swapping .cs-floorpanel { animation: cs-swap 360ms cubic-bezier(.2,.7,.3,1) both; }

/* ================================================= 15. PAGES AND THE MENU

   ---- The Menu button: hidden until a page is added to the header, then it
   replaces the links on every screen size ---- */
.carly-site .cs-menubtn { display: none; }
.carly-site .cs-rail--menu .cs-railnav { display: none; }
.carly-site .cs-rail--menu .cs-status { margin-left: auto; }
.carly-site .cs-rail--menu .cs-menubtn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-left: 1.4rem; padding: 0.5rem 0.2rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text); background: none; border: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.carly-site .cs-menubtn__bars {
  position: relative; width: 18px; height: 1.5px; background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.carly-site .cs-menubtn:hover,
.carly-site .cs-menubtn:focus-visible { color: var(--silver-hi); }
.carly-site .cs-menubtn:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }
.cs-intro .carly-site .cs-menubtn { animation: cs-hdr-in .5s ease-out 2.6s both; }

/* ---- the side panel ---- */
.carly-site .cs-drawer {
  position: fixed; inset: 0; z-index: 2900;
  background: rgba(8,6,4,0.55);
  opacity: 0; transition: opacity 260ms ease;
}
.carly-site .cs-drawer[hidden] { display: none; }
.carly-site .cs-drawer.is-open { opacity: 1; }
.carly-site .cs-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(22rem, 86vw);
  padding: 5rem 2rem 2rem;
  background: var(--film), linear-gradient(168deg, #212223 0%, var(--esp-warm) 58%, var(--esp-base) 100%);
  border-left: 1px solid rgba(232,235,242,0.22);
  box-shadow: -24px 0 60px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
}
.carly-site .cs-drawer.is-open .cs-drawer__panel { transform: none; }
.carly-site .cs-drawer__close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(232,235,242,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}
.carly-site .cs-drawer__close svg { width: 1rem; height: 1rem; stroke: #f3f4f7; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.carly-site .cs-drawer__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.carly-site .cs-drawer__list a {
  display: block; padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: 0.04em;
  color: var(--text); text-decoration: none;
  transition: color 160ms ease, padding 160ms ease;
}
.carly-site .cs-drawer__list a:hover,
.carly-site .cs-drawer__list a:focus-visible { color: var(--silver-hi); padding-left: 0.4rem; outline: none; }
@media (prefers-reduced-motion: reduce) {
  .carly-site .cs-drawer, .carly-site .cs-drawer__panel { transition: none; }
}

/* ---- a page of Carly's ---- */
.carly-site .cs-pagetop {
  position: relative; z-index: 5;
  background: linear-gradient(163deg, #242526 0%, #1f1f20 60%, #151516 100%);
}
.carly-site .cs-page {
  position: relative; min-height: 70vh;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  padding-left: calc(var(--centre-pad) + var(--inset));
  padding-right: calc(var(--centre-pad) + var(--gutter));
  background:
    var(--film),
    radial-gradient(54% 58% at 76% 20%, var(--glow-champ) 0%, var(--glow-bronze-2) 46%, transparent 78%),
    linear-gradient(168deg, #212223 0%, var(--esp-warm) 58%, var(--esp-base) 100%);
}
.carly-site .cs-page > .cs-ribs { height: 100%; }
.carly-site .cs-page__head, .carly-site .cs-page__body { max-width: 96rem; margin-inline: auto; position: relative; z-index: 3; }
.carly-site .cs-page__head { display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.carly-site .cs-page__title {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 4.2rem); line-height: 1.06; letter-spacing: -0.005em;
  color: var(--text); margin: 0;
}
.carly-site .cs-page__intro {
  font-family: var(--body); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65;
  color: var(--text); max-width: 46ch; margin: 0;
}
.carly-site .cs-page__body { display: grid; gap: clamp(1.75rem, 3.4vw, 3rem); }
.carly-site .cs-page__body .cs-asset > img { cursor: zoom-in; }
.carly-site .cs-page__body figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #d9dbe0;
}
.carly-site .cs-pagefoot {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.6rem var(--gutter);
  padding-left: calc(var(--centre-pad) + var(--inset));
  padding-right: calc(var(--centre-pad) + var(--gutter));
  background: #121213;
  font-family: var(--mono); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
}
.carly-site .cs-pagefoot .cs-lobbyfoot__name span { color: #b2b5ba; }
.carly-site .cs-pagefoot .cs-lobbyfoot__nav { flex-wrap: wrap; row-gap: 0.6rem; }
.carly-site .cs-pagefoot .cs-lobbyfoot__nav a { color: var(--text); }
.carly-site .cs-pagefoot .cs-lobbyfoot__nav a:hover { color: var(--silver-hi); }
.carly-site .cs-lobbyfoot__nav { flex-wrap: wrap; row-gap: 0.6rem; }
@media (max-width: 700px) {
  .carly-site .cs-page { padding-left: var(--phone-pad); padding-right: var(--phone-pad); }
  .carly-site .cs-pagefoot { padding-inline: var(--phone-pad); flex-direction: column; align-items: flex-start; }
  .carly-site .cs-rail--menu .cs-menubtn { margin-left: auto; }
}

/* ================================================= 16. BLACK AND SILVER
   Carly's palette (2026-10): black and silver throughout, no brown or
   bronze, except the contact section, which keeps its lobby photograph.
   Body copy is silver; headings are near white so they still lead. */
.carly-site {
  --text: #cdd1d8; --text-dim: #b9bec6; --text-faint: #9ca2ab;
  --copy: #aeb4bd;
  --silver-hi: #d9dce1;
  background: #0b0b0c;
}
.carly-site .cs-sub,
.carly-site .cs-preview__lede,
.carly-site .cs-about__body p,
.carly-site .cs-dossier__copy p,
.carly-site .cs-page__intro,
.carly-site .cs-sechead__sub,
.carly-site .cs-split__text p,
.carly-site .cs-floorpanel__facts dd { color: var(--copy); }
.carly-site .cs-statement,
.carly-site .cs-preview__title,
.carly-site .cs-about__title,
.carly-site .cs-page__title,
.carly-site .cs-sechead__title,
.carly-site .cs-subhead,
.carly-site .cs-dossier__quote p { color: var(--silver-hi); }

/* links inside copy (e.g. earnyoururn.com): silver, underlined, brighten on hover */
.carly-site .cs-dossier__copy a,
.carly-site .cs-about__body a,
.carly-site .cs-split__text a {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(238,240,243,0.45);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
.carly-site .cs-dossier__copy a:hover,
.carly-site .cs-about__body a:hover,
.carly-site .cs-split__text a:hover { color: var(--silver-hi); text-decoration-color: var(--silver-hi); }

/* ================================================= 17. SILVER TYPE
   Carly (2026-10-21): silver type instead of white. Hard-coded near
   whites in earlier sections are pulled down to the silver range here. */
.carly-site .cs-textlink:hover,
.carly-site .cs-textlink:focus-visible { color: var(--silver-hi); border-color: var(--silver-hi); }
.carly-site .cs-drawer__list a { color: var(--text); }
.carly-site .cs-drawer__list a:hover,
.carly-site .cs-drawer__list a:focus-visible { color: var(--silver-hi); }
.carly-site .cs-pagefoot .cs-lobbyfoot__nav a { color: var(--text); }
.carly-site .cs-pagefoot .cs-lobbyfoot__nav a:hover { color: var(--silver-hi); }

/* ================================================= 18. CHROME HEADINGS
   Carly (2026-10-21): headings in the spun metal of the floor buttons
   (btn-round.webp): light and dark wedges radiating from the centre, clipped to
   the letters (circular grain was tried and moired at text size). Earlier tries: a per-line
   horizontal band (too busy) and a soft diagonal (too subtle).
   text-shadow would paint over clipped text, so depth is a drop-shadow. */
.carly-site .cs-statement,
.carly-site .cs-preview__title,
.carly-site .cs-about__title,
.carly-site .cs-page__title,
.carly-site .cs-sechead__title,
.carly-site .cs-subhead {
  background-image:
    conic-gradient(from 15deg at 50% 50%,
      #eef0f2 0deg, #a2a6ac 45deg, #e3e5e8 95deg, #aeb2b8 135deg,
      #f0f1f3 180deg, #9fa3a9 225deg, #e0e2e5 275deg, #b0b3b9 315deg, #eef0f2 360deg);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #c9ccd2;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

/* Headings stay inside their column so fitTitles() in carly.js can see
   an over-long line and shrink the heading (no-orphan lines can't wrap). */
.carly-site .cs-about__title,
.carly-site .cs-page__title,
.carly-site .cs-sechead__title { max-width: 100%; }