/* Visage — shared stylesheet for the /work/<slug>/ case-study pages.
   These pages need a small fraction of the homepage's CSS (no hero video,
   lightbox, services, process or contact form), so they get their own sheet
   rather than a tenth copy of index.html's inline styles.

   NOTE: the :root block below mirrors the tokens inline in index.html. If you
   change the palette in one, change it in the other. */

:root {
  --black:  #080808;
  --white:  #f0f0f0;
  --muted:  #7a7a7a;
  --soft:   var(--white);
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(8,8,8,0.10);
  /* Feedback colours sit off-palette on purpose: --red measures 3.07:1 on
     --white and --lime 1.08:1, both under the 4.5:1 floor for body text.
     These clear it (5.68 and 5.79). Mirrors index.html. */
  --success: #166b31;
  --error:   #b81e1e;
  --red:    #ff3e3e;
  --violet: #6627ff;
  --teal:   #13d1ac;
  --lime:   #aaff00;
  --font:   "Montserrat", Arial, Helvetica, sans-serif;
  --max:    1320px;
  --gutter: clamp(24px, 5vw, 80px);
  --nav-h:  60px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.inner { width: min(100% - calc(var(--gutter) * 2), var(--max)); margin-inline: auto; }

/* ─── NAV ─────────────────────────────────────────────────── */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(100% - calc(var(--gutter) * 2), var(--max));
  margin-inline: auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
/* The homepage centres its logo absolutely because it has a left block; every
   page now does, so the geometry moves here rather than living in one file. */
.nav-inner { position: relative; }
.nav-left { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.status-dot.open-hours   { background: var(--lime); }
.status-dot.closed-hours { background: var(--red);  }
.nav-location {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
}
.nav-time {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--muted);
}
.nav-time::before { content: "|"; margin-right: 10px; color: rgba(255,255,255,.22); }
.nav-time.open-hours   { color: var(--lime); }
.nav-time.closed-hours { color: var(--red);  }

.nav-logo { position: absolute; left: 50%; transform: translateX(-50%); width: 68px; }
.nav-logo img { width: 100%; height: auto; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right a {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.nav-right a:hover { color: var(--white); }

/* With the menu open the bar takes the same swatch as the panel, so the two
   read as one block of colour. Mirrors index.html. */
.site-nav { transition: background-color .3s ease, border-color .3s ease; }
.site-nav.is-menu-open {
  background: var(--menu-bg);
  border-bottom-color: transparent;
}
.site-nav.is-menu-open .nav-toggle-bar { background: var(--menu-fg); }
.site-nav.is-menu-open .nav-logo img { filter: var(--menu-logo-filter, none); }
.nav-logo img { transition: filter .3s ease; }

/* ─── HAMBURGER + MOBILE MENU (<=960px) ───────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  padding: 0; border: none; background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 18px; height: 1.5px;
  background: var(--white);
  transition: transform .28s ease, opacity .28s ease;
}
/* Bars sit 6.5px apart (1.5 + 5 gap), so ±3.25px recentres them. */
.nav-toggle.is-open .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Same panel geometry as the homepage so the menu is identical site-wide,
   even though there is no hero video behind it here. Sibling of <nav>, not a
   child: nav's backdrop-filter would otherwise trap position:fixed. */
.nav-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  height: calc(max(50vh, 320px) - var(--nav-h));
  z-index: 99;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 4.5vw, 36px) var(--gutter);
  overflow-y: auto;
  background: var(--menu-bg, var(--black));
  color: var(--menu-fg, var(--white));
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  /* Stepped visibility: switch instantly on open, delay on close. */
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease, visibility 0s linear .3s;
}
.nav-menu.is-open {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease, visibility 0s linear 0s;
}
.nav-menu-links { display: flex; flex-direction: column; gap: 2px; }
.nav-menu-links a {
  font-size: clamp(22px, 6.5vw, 40px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -.02em; text-transform: uppercase;
  width: fit-content;
  transition: opacity .2s;
}
.nav-menu-links a:hover { opacity: .62; }
.nav-menu-socials { display: flex; gap: 8px; }
.nav-menu-socials a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .75;
  transition: opacity .2s;
}
.nav-menu-socials a:hover { opacity: 1; }
.nav-menu-socials svg {
  width: 15px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ─── HEADER ──────────────────────────────────────────────── */
/* ─── VERTICAL RHYTHM ─────────────────────────────────────────
   Borrowed wholesale from index.html rather than invented here, so the two
   templates share a scale: 100px between major sections (72px on phone),
   48px inside them, 10px grid gaps. These were fluid clamps before, which
   landed on 102.4 / 76.8 / 88 and matched nothing on the homepage. */
:root { --block: 100px; --block-inner: 48px; }
@media (max-width: 640px) { :root { --block: 72px; } }

.cs-page { padding-top: var(--nav-h); }
/* Right-aligned header. A flex column so align-items handles the block
   justification and text-align the ragged edge — the back link then opts out
   with align-self, giving it the left side to itself. */
.cs-head {
  padding: var(--block) 0 var(--block-inner);
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
}
.cs-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
  transition: color .2s;
}
.cs-back:hover { color: var(--white); }
.cs-back svg {
  width: 11px; height: 11px; fill: none;
  stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cs-eyebrow {
  display: block; font-size: 8px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.cs-title {
  font-size: clamp(32px, 5.6vw, 68px);
  font-weight: 800; line-height: 1.03;
  letter-spacing: -.02em; text-transform: uppercase;
}
/* Slot for written copy. Empty until there is something to say. */
/* No auto margins — align-items on .cs-head already pins it to the right,
   and auto margins would fight that. */
.cs-intro {
  margin: 20px 0 0; max-width: 560px;
  font-size: 11px; font-weight: 500;
  line-height: 1.8; color: var(--muted);
}

/* ─── GALLERY ─────────────────────────────────────────────── */
/* No vertical padding of its own — the chapters either side supply it, so
   the gallery sits in a consistent 48px well however many there are. */
.cs-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.cs-gallery img {
  width: 100%; height: auto;
  background: #141414;
  border: 1px solid var(--line);
}
/* ─── CHAPTERS ────────────────────────────────────────────── */
/* Same axis rule as the header: the label sits flush left, on the same line
   as the back button, and the prose runs flush right against the container's
   right edge. Both edges are the container's, so every block on the page
   lands on one of exactly two vertical lines. */
.cs-chapter { padding: var(--block-inner) 0; }
.cs-chapter-inner {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) 1.6fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
}
.cs-chapter-head { text-align: left; }
.cs-chapter-num {
  display: block; font-size: 9px; font-weight: 800;
  letter-spacing: .16em; color: var(--muted); margin-bottom: 10px;
}
.cs-chapter-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; text-transform: uppercase;
}
/* Left-set: these are the longest runs of prose on the page, and a ragged
   left edge costs real readability at this length. The label column still
   holds the left axis, so the two-column split reads regardless. */
.cs-chapter-body p {
  font-size: 11px; font-weight: 500;
  line-height: 1.95; color: var(--muted);
  max-width: 640px;
  text-align: left;
}
.cs-chapter-body p + p { margin-top: 15px; }

/* ─── DELIVERABLES ────────────────────────────────────────── */
.cs-deliverables { padding: var(--block-inner) 0; border-top: 1px solid var(--line); }
/* Centred, so it drops the chapters' two-column split for a single stacked
   column — the title sits over the chips rather than beside them. */
.cs-deliverables .cs-chapter-inner { grid-template-columns: 1fr; gap: 18px; }
.cs-deliverables .cs-chapter-head { text-align: center; }
.cs-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-content: start; justify-content: center;
}
/* On /services/ the chips sit under left-set body copy rather than in a
   centred block of their own, so they follow the text. */
.sv-chips { justify-content: flex-start; margin-top: 20px; }
.cs-chips span {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 15px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em; color: var(--white);
  white-space: nowrap;
}
/* Each family's chips take its brand swatch on the outline only, matching the
   homepage's service rows. --tag comes from the section, set by the build
   script; scoped to .sv-chips so case-study deliverables stay neutral.
   Must follow .cs-chips span, not precede it — same specificity, and that
   rule's `border` shorthand would otherwise reset this back to white. */
/* Chips that carry a per-chip --tag: the /services/ families, and each case
   study's deliverables, which take the swatch of the service family they
   belong to. Same rule for both, since the meaning is the same. */
.sv-chips span,
.sv-chips-coded span { border-color: color-mix(in srgb, var(--tag) 55%, transparent); }

/* ─── WORK INDEX (the /work/ lobby) ───────────────────────── */
/* Three square cards, mirroring .work-grid on the homepage so the lobby and
   the homepage teaser read as the same component. */
.work-index {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--block-inner) 10px;
  padding-bottom: var(--block);
}
.work-index-item { display: block; }
/* height:auto is load-bearing: without it the width/height attributes on the
   <img> win over aspect-ratio, and these rendered 571x2000 instead of square. */
.work-index-item img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: #141414; border: 1px solid var(--line);
  transition: opacity .3s ease;
}
.work-index-item:hover img { opacity: .82; }
.work-index-meta { padding-top: 16px; }
.work-index-discipline {
  display: block; font-size: 8px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.work-index-name {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; text-transform: uppercase;
}
.work-index-desc {
  margin-top: 10px; max-width: 52ch;
  font-size: 11px; font-weight: 500;
  line-height: 1.85; color: var(--muted);
}

/* ─── MORE PROJECTS ───────────────────────────────────────── */
.cs-more { border-top: 1px solid var(--line); padding: var(--block) 0; }
.cs-more-title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; text-transform: uppercase;
  /* Matches .section-heading's margin on the homepage. */
  margin-bottom: var(--block-inner);
  text-align: center;
}
.cs-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Mirrors the homepage .work-card language: square crop, corner arrow,
   bottom-left label. */
.more-card {
  position: relative; aspect-ratio: 1/1;
  overflow: hidden; display: block;
  background: #141414;
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.more-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.more-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.more-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,.10); pointer-events: none;
  transition: opacity 250ms ease;
}
.more-card:hover::before { opacity: 0; }
.more-card-arrow {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
}
.more-card-arrow svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; transform: rotate(-45deg);
}
.more-card-label {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(0,0,0,.80);
  font-size: 9px; font-weight: 700;
  letter-spacing: .06em; color: var(--white);
}

/* ─── INQUIRE BAND ────────────────────────────────────────── */
/* Mirrors .cta-band on the homepage, which is also 100px. */
.cs-inquire {
  padding: var(--block) 0;
  background: var(--soft); color: var(--black);
  text-align: center;
}
.cs-inquire h2 {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-transform: uppercase;
  margin-bottom: 14px;
}
.cs-inquire p {
  font-size: 11px; font-weight: 500;
  color: var(--muted); line-height: 1.8;
  max-width: 460px; margin: 0 auto 26px;
}
.btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid transparent;
  /* Both of these are here because <button> inherits neither and <a> inherits
     both. Without them the same .btn rendered in Arial on the UA's grey
     `buttonface` as a button, and correctly as a link — so the inquire
     wizard's Continue and Back looked nothing like the links beside them. */
  font-family: inherit;
  background: transparent;
  font-size: 9px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: opacity .2s;
}
.btn:hover { opacity: .78; }
/* All four variants index.html defines, so a dark block on a light page (or the
   reverse) has a pair to draw from. light/outline were missing here, which left
   .btn-light rendering as a transparent pill wherever site.css was the only
   sheet loaded. */
.btn-light   { background: var(--white); color: var(--black); }
.btn-outline { border-color: rgba(255,255,255,.35); color: var(--white); }
.btn-dark    { background: var(--black); color: var(--white); border-color: rgba(255,255,255,.18); }
.btn-muted   { border-color: rgba(8,8,8,.25); color: var(--black); }

/* ─── FOOTER ──────────────────────────────────────────────── */
footer { padding: 36px 0; background: var(--black); border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand { font-size: 11px; font-weight: 900; letter-spacing: .22em; color: var(--white); }
.footer-location { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; color: var(--muted); margin-top: 4px; }
.footer-copy {
  font-size: 8.5px; font-weight: 500;
  letter-spacing: .08em; color: var(--muted);
  text-align: right; line-height: 1.7;
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .cs-gallery { grid-template-columns: 1fr; }
  /* Three squares side by side get too small to read below this. */
  .cs-more-grid { grid-template-columns: 1fr 1fr; }
  /* Stack the chapter label above its body. The left/right split still
     holds — label left, prose right — it just happens vertically. */
  .cs-chapter-inner { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  .cs-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  /* Matches index.html exactly: the clock strip goes, the logo stops being
     absolutely centred and sits at the left, and the hamburger takes over
     from the inline links. */
  .nav-left { display: none; }
  .nav-logo { position: static; transform: none; left: auto; margin-right: auto; }
  .nav-inner { justify-content: flex-start; gap: 0; }
  /* Inline links give way to the hamburger; the panel holds them instead. */
  .nav-right { display: none; }
  .nav-toggle { display: flex; }
  .nav-menu { display: flex; }
  /* Same step-down as .work-grid on the homepage: 3 -> 2 -> 1. */
  .work-index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; --nav-h: 54px; }
  .work-index { grid-template-columns: 1fr; }
}

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