/* =========================================================
   Cove Craft — SVG-as-page + interactive overlays
   Reference SVG: assets/ref/home.svg (1920 × 10099)
   All hotspot positions use percentages of the SVG viewbox,
   so they scale with the viewport.
   ========================================================= */

html, body {
  background: #000;
  overflow-x: clip;
  scroll-behavior: smooth;
}

/* ---------- Page canvas: contains the SVG and all overlays ---------- */
.page {
  position: relative;
  background: #000;
}
.page__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 10099;
  /* Always fill the viewport width — no cap. Canvas scales fluidly with
     window resize at every size. */
  max-width: 100vw;
  margin: 0 auto;
}
.page__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Every absolutely-positioned child of canvas uses % values via inline style */
.hit, .slab, .btn-link, .gallery-box, .contact-form, .anchor,
.hero-copy, .tagline, .studio-desc, .section-heading, .section-sub,
.mission, .svc-detail, .contact-heading {
  position: absolute;
}

/* ============================================================
   BODY COPY — positioned HTML text on the text-free SVG canvas.
   ============================================================ */

/* Hero left/right titles */
.hero-copy { z-index: 3; color: #ffffff; }
.hero-copy--right { text-align: right; }
.hero-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em 0;
}
.hero-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 16px);
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* Tagline band */
.tagline {
  z-index: 3;
  margin: 0;
  text-align: center;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.7vw, 48px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: #ffffff;
  white-space: nowrap;
}
.studio-desc {
  z-index: 3;
  margin: 0;
  text-align: right;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 16px);
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}

/* Services intro heading + subtitle */
.section-heading {
  z-index: 3;
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.0vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.section-sub {
  z-index: 3;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 16px);
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
.section-sub p { margin: 0 0 0.8em 0; }

/* Legacy: standalone .slab-desc (now obsolete — descriptions are inside
   each slab anchor as .slab__desc). Kept here in case anything still references
   the class; the rule below is harmless when no .slab-desc nodes exist. */
.slab-desc {
  display: none;
  z-index: 5;
  margin: 0;
  padding: 0 1.2em;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 0.85vw, 14px);
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  pointer-events: none;
}

/* "Our work" mission statement */
.mission {
  z-index: 3;
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #ffffff;
}

/* Service detail headings (one per gallery card) */
.svc-detail { z-index: 3; color: #ffffff; }
.svc-num {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6em;
}
.svc-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 0.55em 0;
  color: #ffffff;
}
.svc-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.45;
  margin: 0;
  color: rgba(255,255,255,0.8);
}

/* Contact heading */
.contact-heading { z-index: 3; color: #ffffff; }
.contact-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.3em 0;
}
.contact-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1.0vw, 18px);
  line-height: 1.4;
  margin: 0;
  color: rgba(255,255,255,0.78);
}

/* ---------- anchor targets (invisible, scroll destination) ---------- */
.anchor {
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- click-through hotspots (legacy, used for hit-btn fallback) ---------- */
.hit {
  border-radius: 999px;
  background: transparent;
  z-index: 3;
  transition: background 200ms ease;
}
.hit-btn:hover { background: rgba(255,255,255,0.06); }
.hit-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- VISIBLE-TEXT PILL BUTTONS (replaces invisible .hit-btn overlays)
   The <a> sits exactly on top of the SVG-painted pill button and renders the
   button label in Syne, so the visible text IS the click target.
   Sizing uses cqw (container query units, fall back to vw) so the text scales
   with the SVG viewport. */
.btn-link {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(8px, 0.95vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn-link:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.btn-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* hero spheres video — sits over the SVG sphere art; cursor scrubs it.
   The mask element is no longer needed for visuals (the .hero-pill-oval
   PNG handles the boundary now); keep it hidden. */
.hero-video-mask { display: none; }

/* PNG asset: the exact white oval boundary from the design reference,
   layered on top of the spheres video. RGBA so only the oval line shows. */
.hero-pill-oval {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  display: block;
  /* Stretch to the bounding box defined inline; oval shape comes from the
     image itself rather than CSS border-radius. */
  object-fit: fill;
}

/* Black overlay that masks the bright lower-rim of the hero spheres video
   where the ellipse clip-path crosses the bright reflective base of the
   3D spheres. z-index: 5 puts it above the video (z-index: 4). */
.hero-line-mask {
  position: absolute;
  z-index: 5;
  background: #000;
  pointer-events: none;
}

/* Black overlay covering the SVG-painted green "START A PROJECT" pill that
   sits behind the contact heading area. Lets the heading text read cleanly. */
.contact-pill-mask {
  position: absolute;
  z-index: 2;
  background: #000;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  z-index: 4;
  object-fit: cover;
  cursor: ew-resize;
  background: transparent;
  pointer-events: auto;
  clip-path: ellipse(50% 47% at 50% 50%);
  /* The source MP4 has a solid black plate behind the spheres. `screen`
     blend mode treats RGB(0,0,0) as transparent — black pixels pass through
     to the page underneath, while the bright spheres composite normally. */
  mix-blend-mode: screen;
}

/* ---------- TAB LABELS — visible Syne text inside the button.
   The label text sits on top of the SVG-painted tab label and IS the
   click target. Click still drives gallery filtering via JS (data-target,
   data-tab). ---------- */
.tab-hit {
  position: absolute;
  z-index: 6;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #ffffff;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 0.78vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, color 200ms ease;
}
.tab-hit--2line { line-height: 1.15; }
/* The (NN) prefix is dimmer in the SVG, mirror that so layers blend. */
.tab-num { opacity: 0.55; margin-right: 0.35em; pointer-events: none; }
.tab-hit:hover { background: rgba(255,255,255,0.06); color: #d8ffe6; }
.tab-hit:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tab-hit.is-active { background: rgba(255,255,255,0.04); color: var(--green); }

/* ---------- ARROW BUTTONS — visible chevron glyph inside the button.
   The chevron sits on top of the SVG-painted arrow icon. Click drives
   prev/next on the matching gallery via JS (data-target, data-dir). ---------- */
.arrow-hit {
  position: absolute;
  z-index: 6;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 26px);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.arrow-hit > span { pointer-events: none; display: block; transform: translateY(-1px); }
.arrow-hit:hover { background: rgba(255,255,255,0.12); color: var(--green); transform: scale(1.08); }
.arrow-hit:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- SLABS — visible-text anchors with hover float / pop-out
   The slab artwork (gradient + title) is painted INSIDE the SVG. We render
   a real <a> on top with the same Syne title text, so the visible text IS
   the link target. Hover keeps the glow + outline + slight scale that pops
   the slab forward. ---------- */
.slab {
  z-index: 4;
  border-radius: 17px;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 380ms cubic-bezier(.16,1,.3,1),
    box-shadow 380ms cubic-bezier(.16,1,.3,1),
    filter 380ms cubic-bezier(.16,1,.3,1);
  background: transparent;
  will-change: transform, box-shadow;

  /* Render the slab title + description as one centered column inside
     the slab box. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.6em 0.8em;
  text-decoration: none;
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}
.slab__title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  color: inherit;
  pointer-events: none; /* let clicks pass to the <a> */
}
.slab__desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(9px, 0.78vw, 13px);
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.slab:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

/* default — invisible hotspot */
.slab:hover {
  /* gentle scale so the hover ring expands slightly past the SVG slab,
     creating a subtle "floating forward" feel */
  transform: scale(1.035);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.65),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(255,255,255,0.15);
}

/* tint-matched glow per slab */
.slab--1:hover, .slab--4:hover {
  box-shadow:
    0 0 0 2px rgba(34,224,122,0.75),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 80px rgba(34,224,122,0.45);
}
.slab--3:hover {
  box-shadow:
    0 0 0 2px rgba(120,150,255,0.85),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 80px rgba(37,64,255,0.45);
}
.slab--2:hover {
  box-shadow:
    0 0 0 2px rgba(34,224,122,0.6),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 70px rgba(34,224,122,0.3);
}

/* stagger — data-offset tilts the scale origin so "up" slabs pop upward
   and "down" slabs pop downward, keeping the staggered feel */
.slab[data-offset="up"]   { transform-origin: center 20%; }
.slab[data-offset="down"] { transform-origin: center 80%; }

/* ---------- GALLERY overlay ----------
   The lite SVG has no embedded photos, so we don't need any backdrop
   layer to hide them anymore. Filler tiles sit directly in the photo
   region and ARE the visible content. */
.gallery-box {
  z-index: 5;
  border-radius: 17px;
  overflow: hidden;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: grab;
}
.gallery:active { cursor: grabbing; }

.gallery__viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport { scrollbar-width: none; }

.gallery__track {
  display: flex;
  gap: 2px; /* tight so no SVG photo bleeds through between tiles */
  height: 100%;
  min-width: max-content;
  padding: 0;
}

.gtile {
  flex: 0 0 auto;
  height: 100%;
  border-radius: 14px;
  scroll-snap-align: start;
  position: relative;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms cubic-bezier(.2,.8,.2,1), filter 350ms ease;
}

/* Per-gallery tile widths. Detail galleries use 1:1 square tiles
   sized off the gallery-box height so background images aren't
   over-cropped by `cover`. */
.gallery--work   .gtile { width: calc((100% - 4px) / 3); }  /* 3 visible */
.gallery--detail .gtile { aspect-ratio: 1 / 1; width: auto; }  /* square */
.gallery--vr     .gtile { width: 100%; }                     /* 1 visible */

@media (max-width: 720px) {
  .gallery--work .gtile { width: calc((100% - 2px) / 2); }   /* 2 visible on mobile */
}

/* Filler tile — opaque placeholder. 3D feel comes from a soft top
   highlight + bottom shadow + drop shadow underneath. No 1px borders,
   no corner highlights — keeps edges flush and clean. */
.gtile--filler {
  display: flex;
  align-items: flex-end;
  padding: 24px;
  color: rgba(255,255,255,0.92);
  overflow: hidden;
  isolation: isolate;
  background-color: #0c0c10;
  background-image:
    /* soft top sheen */
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 18%, transparent 70%, rgba(0,0,0,0.25) 100%),
    /* base diagonal palette */
    linear-gradient(135deg, var(--tile-light, #1a1a22) 0%, var(--tile-dark, #07070a) 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    0 2px 0 rgba(255,255,255,0.04) inset;  /* hairline top edge for depth */
}

/* per-section palette — drives the diagonal gradient */
[data-gallery="work"]  .gtile--filler { --tile-light: #1c1c24; --tile-dark: #08080c; }
[data-gallery="space"] .gtile--filler { --tile-light: #1f8c5d; --tile-dark: #052b1d; }
[data-gallery="ai"]    .gtile--filler { --tile-light: #3955ff; --tile-dark: #0a1272; }
[data-gallery="ar"]    .gtile--filler { --tile-light: #0e3d2a; --tile-dark: #02100a; }
[data-gallery="vr"]    .gtile--filler { --tile-light: #1a9963; --tile-dark: #052b1d; }

.gtile--filler:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.5),
    0 2px 0 rgba(255,255,255,0.08) inset;
  filter: brightness(1.06);
}

/* Photo tile — drop a real image into background-image inline.
   Replaces the gradient-filler look with cover-fit imagery. */
.gtile--photo {
  background-color: #0a0a10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    0 2px 0 rgba(255,255,255,0.04) inset;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
/* 3D model tile — interactive <model-viewer> portal.
   Same shape/size as photo tiles so they sit naturally in the gallery row.
   Cursor is grab/grabbing to suggest the orbit interaction. */
.gtile--model {
  position: relative;
  background: radial-gradient(circle at 50% 60%, #14202a 0%, #050a10 70%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -28px 50px rgba(0, 0, 0, 0.55),
    0 16px 28px rgba(0, 0, 0, 0.48);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.gtile--model model-viewer {
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  cursor: grab;
}
.gtile--model model-viewer:active { cursor: grabbing; }
.gtile--model:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -28px 50px rgba(0, 0, 0, 0.55),
    0 22px 38px rgba(0, 0, 0, 0.6);
}

/* Video tile — autoplay muted looped clip, same shape as photo tiles. */
.gtile--video {
  position: relative;
  background: #050a10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 28px rgba(0, 0, 0, 0.48);
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}
.gtile--video video {
  width: 100%;
  height: 100%;
  /* `cover` fills the tile edge-to-edge with no black letterbox bars,
     cropping slightly off the long edge for off-aspect videos. */
  object-fit: cover;
  display: block;
  background: #000;
}
/* Optional label inside a video tile — sits top-left over the video the
   same way photo-tile labels do, with text-shadow for legibility. */
.gtile--video .gtile__label {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  pointer-events: none;
}
.gtile--video:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 38px rgba(0, 0, 0, 0.6);
}

.gtile--photo:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.5),
    0 2px 0 rgba(255,255,255,0.08) inset;
  filter: brightness(1.04);
}

.gtile__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  max-width: 22ch;
}

/* ---------- CONTACT FORM overlay ----------
   The lite SVG still paints form field outlines + the SEND IT and
   email pill, so we mask that region and overlay real inputs. */
.cf-mask {
  position: absolute;
  z-index: 5;
  background: #000;
  pointer-events: none;
}
.contact-form {
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
}
.cf-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1%;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.3vw, 20px);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font: 400 clamp(12px, 0.9vw, 14px)/1.3 var(--font-body);
  transition: border-color 200ms ease, background 200ms ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.5);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(34,224,122,0.04);
}
.contact-form textarea { resize: vertical; min-height: 60px; }
.contact-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.8) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.cf-foot {
  display: flex;
  gap: 10px;
  margin-top: 0.5%;
  flex-wrap: wrap;
}

.btn-white-pill,
.btn-gradient-pill,
.btn-ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 1.1vw, 14px) clamp(18px, 1.6vw, 26px);
  border-radius: 999px;
  font: 600 clamp(10px, 0.75vw, 12px)/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn-white-pill {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}
.btn-white-pill:hover { transform: translateY(-1px); background: #f2f2f2; }
.btn-gradient-pill {
  background: linear-gradient(90deg, #2540ff, #22e07a);
  color: #fff;
  border: 0;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.btn-gradient-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(37,64,255,0.3); }

.btn-ghost-pill {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}
.btn-ghost-pill:hover { background: #fff; color: #000; }

/* ---------- TOP NAV — overlay hamburger ---------- */
.topnav {
  position: fixed;
  top: 0; right: 0;
  padding: clamp(16px, 1.4vw, 28px) clamp(20px, 2.5vw, 40px);
  z-index: 50;
  pointer-events: none;
  /* Lay children (back arrow + burger) in a row with a real gap so the
     burger never pinches against the back button. Items inside opt back
     into pointer-events. */
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.topnav > * { pointer-events: auto; }

/* ---------- HAMBURGER — real 3-line icon, fixed top-right, follows
   scroll (via .topnav position:fixed). Animates to ✕ while open. ---- */
.menu-btn {
  width: clamp(44px, 3.4vw, 60px);
  height: clamp(44px, 3.4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn__bars {
  position: relative;
  display: block;
  width: clamp(26px, 2vw, 34px);
  height: 16px;
}
.menu-btn__bars > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  /* Slight shadow keeps the white bars legible over light sections. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 360ms cubic-bezier(.16,1,.3,1), opacity 200ms ease;
}
.menu-btn__bars > span:nth-child(1) { top: 0; }
.menu-btn__bars > span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-btn__bars > span:nth-child(3) { bottom: 0; }

/* While the overlay is open, morph the top-right hamburger into an ✕ */
body.menu-open .menu-btn__bars > span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .menu-btn__bars > span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn__bars > span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* The dedicated close button reuses the same bars, pre-rendered as an ✕ */
.menu-btn__bars--x > span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-btn__bars--x > span:nth-child(2) { opacity: 0; }
.menu-btn__bars--x > span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ---------- SIDE MENU ---------- */
.side-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  /* Brand diagonal wash — black top-left, blue upper-right, green
     lower-right, soft light fade bottom-left (matches the design SVG). */
  background:
    radial-gradient(120% 90% at 12% 8%, #050608 0%, rgba(5,6,8,0) 55%),
    radial-gradient(90% 90% at 100% 0%, rgba(37,64,255,0.85) 0%, rgba(37,64,255,0) 55%),
    radial-gradient(110% 110% at 100% 100%, rgba(34,224,122,0.7) 0%, rgba(34,224,122,0) 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(210,224,216,0.55) 0%, rgba(210,224,216,0) 50%),
    linear-gradient(135deg, #06070a 0%, #0c1e4a 45%, #14406a 65%, #1c7a52 100%);
  transform: translateY(-100%);
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
  visibility: hidden;
  opacity: 0;
}
body.menu-open .side-menu {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

.side-menu__logo {
  position: absolute;
  top: clamp(20px, 2vw, 36px);
  left: clamp(28px, 6vw, 96px);
  z-index: 60;
  display: inline-block;
}
.side-menu__logo img {
  display: block;
  width: clamp(86px, 8vw, 132px);
  height: auto;
}

.side-menu__close {
  position: absolute;
  top: clamp(16px, 1.4vw, 28px);
  right: clamp(20px, 2.5vw, 40px);
  width: clamp(44px, 3.4vw, 60px);
  height: clamp(44px, 3.4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
}

.side-menu__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  height: 100%;
  padding: clamp(120px, 16vw, 200px) clamp(28px, 6vw, 96px) clamp(48px, 7vw, 96px);
}
.side-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 12px);
  margin: 0;
  padding: 0;
}
.side-menu__links li { overflow: hidden; }
.side-menu__links a {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 1.06;
  color: #fff;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 460ms cubic-bezier(.16,1,.3,1), color 200ms ease;
  white-space: nowrap;
}
/* Animated underline — present on hover and on the active link */
.side-menu__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.04em;
  width: 100%;
  height: 0.06em;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
}
body.menu-open .side-menu__links a { transform: translateY(0); }
body.menu-open .side-menu__links li:nth-child(1) a { transition-delay:  80ms; }
body.menu-open .side-menu__links li:nth-child(2) a { transition-delay: 140ms; }
body.menu-open .side-menu__links li:nth-child(3) a { transition-delay: 200ms; }
body.menu-open .side-menu__links li:nth-child(4) a { transition-delay: 260ms; }
body.menu-open .side-menu__links li:nth-child(5) a { transition-delay: 320ms; }
body.menu-open .side-menu__links li:nth-child(6) a { transition-delay: 380ms; }
body.menu-open .side-menu__links li:nth-child(7) a { transition-delay: 440ms; }
.side-menu__links a:hover,
.side-menu__links a:focus-visible,
.side-menu__links a.is-active { color: #fff; }
.side-menu__links a:hover::after,
.side-menu__links a:focus-visible::after,
.side-menu__links a.is-active::after { transform: scaleX(1); }

.side-menu__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 320px;
}
.side-menu__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.15;
  margin: 0;
  color: #fff;
}
.side-menu__tag span { color: var(--green); }
.side-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #04140c;
  background: linear-gradient(100deg, #22e07a 0%, #5be0a0 100%);
  box-shadow: 0 10px 30px rgba(34, 224, 122, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.side-menu__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(34, 224, 122, 0.5);
}

/* ---------- progress bar ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--blue));
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(34,224,122,0.5);
}

/* =========================================================
   RESPONSIVE — tablet & mobile
   The SVG was authored at 1920 wide and renders at viewport
   width scaled. Text inside the SVG scales with the viewport.
   We adjust overlay sizing for readability on small screens.
   ========================================================= */
@media (max-width: 900px) {
  .contact-form {
    gap: 6px;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 10px 12px;
    font-size: 13px;
  }
  .cf-foot { gap: 6px; }
  .btn-white-pill, .btn-gradient-pill, .btn-ghost-pill {
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .btn-gradient-pill { letter-spacing: 0.02em; }
}

@media (max-width: 640px) {
  .side-menu__inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(28px, 8vw, 48px);
  }
  .side-menu__aside { max-width: 100%; }
  .side-menu__logo img { width: 96px; }

  /* Mobile form needs MORE vertical space — fields stack to single column.
     Override the absolute height + mask so content fits without overflowing
     into the footer "cove craft" area underneath. */
  .contact-form {
    height: auto !important;
    /* force container to grow to fit content; pinned at top still */
  }
  .cf-mask {
    height: 14% !important;
    top: 91.4% !important;
    left: 0 !important;
    width: 100% !important;
    /* full-width mask covers the SVG "cove craft" footer behind the
       taller mobile form; we'll re-show the brand mark below */
  }

  /* Form: single column row, larger text to prevent iOS zoom on focus */
  .contact-form .cf-row {
    grid-template-columns: 1fr;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px; /* prevents iOS auto-zoom */
    padding: 9px 11px;
  }
  .contact-form { gap: 4px; }
  .contact-form textarea { min-height: 44px; }
  .cf-foot {
    flex-direction: row;
    gap: 6px;
  }
  .btn-white-pill, .btn-gradient-pill {
    padding: 7px 11px;
    font-size: 9px;
    flex: 1;
    justify-content: center;
  }
  .btn-gradient-pill {
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* slabs: 2x2 on small tablet, 1-col on phone is handled in .slabs but
     since our slabs are SVG-painted, the overlay hotspots scale with SVG */

  /* gallery tile counts already drop to 2/1 on mobile via .gallery--work etc */
}

@media (max-width: 480px) {
  /* Below this size the SVG-painted text/buttons get unreadable.
     Keep our overlay form usable: compact grid + single-line buttons. */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 8px 10px;
  }
  .btn-gradient-pill {
    /* shorten the email label on very small screens */
    font-size: 0;
  }
  .btn-gradient-pill::before {
    content: 'Email us';
    font-size: 9px;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY — narrow viewports
   The default clamp() floors are sized for desktop minimums; below
   ~768px those floors push text past its container's edge. Drop the
   floors here so type scales linearly with the canvas. The HTML
   structure stays identical — only sizes shrink.
   ============================================================ */
@media (max-width: 768px) {
  /* Hero left/right titles around the spheres */
  .hero-title { font-size: clamp(16px, 6.5vw, 64px); }
  .hero-sub   { font-size: clamp(8px, 2.4vw, 14px); line-height: 1.3; }

  /* Tagline band — allow wrap so it never overflows */
  .tagline {
    font-size: clamp(14px, 4.5vw, 40px);
    white-space: normal;
  }
  .studio-desc { font-size: clamp(8px, 2.4vw, 14px); line-height: 1.3; }

  /* Services intro */
  .section-heading { font-size: clamp(16px, 4.6vw, 38px); line-height: 1.05; }
  .section-sub     { font-size: clamp(8px, 2.4vw, 14px); line-height: 1.35; }
  .section-sub p   { margin: 0 0 0.5em 0; }

  /* Slab title + description */
  .slab__title { font-size: clamp(11px, 3.4vw, 28px); }
  .slab__desc  { font-size: clamp(7px, 1.8vw, 11px); line-height: 1.2; }
  .slab        { gap: 0.3em; padding: 0.3em 0.4em; }

  /* Mission statement */
  .mission { font-size: clamp(11px, 2.8vw, 22px); line-height: 1.2; }

  /* Service detail headings + body */
  .svc-num   { font-size: clamp(7px, 2.0vw, 12px); margin-bottom: 0.3em; }
  .svc-title { font-size: clamp(13px, 3.4vw, 28px); line-height: 1.05; margin: 0 0 0.4em 0; }
  .svc-body  { font-size: clamp(8px, 2.2vw, 13px); line-height: 1.3; }

  /* Tab labels — stay readable at tiny sizes, gain a min-height for tap. */
  .tab-hit {
    font-size: clamp(7px, 1.9vw, 12px);
    letter-spacing: 0.02em;
    line-height: 1.05;
    /* Touch-target floor — overlays the SVG label area but adds tappable height.
       transparent so it doesn't paint, just expands the hit box. */
    min-height: 24px;
  }
  .tab-num { margin-right: 0.25em; }

  /* Pill buttons */
  .btn-link {
    font-size: clamp(7px, 1.9vw, 11px);
    letter-spacing: 0.05em;
    min-height: 28px;
  }

  /* Arrow chevrons — bigger so they're tappable */
  .arrow-hit {
    font-size: clamp(14px, 3.4vw, 22px);
    min-width: 28px;
    min-height: 28px;
  }

  /* Contact heading */
  .contact-title { font-size: clamp(20px, 6vw, 44px); line-height: 1.0; }
  .contact-sub   { font-size: clamp(9px, 2.6vw, 14px); }

  /* On phone the slabs are tall narrow columns (~70px wide); the inline
     description gets cramped. Hide it on phone — the title alone is enough. */
  .slab__desc { display: none; }

  /* The hero "START A PROJECT" pill at top:19.4% lands on top of the studio
     description on phone. Push the studio description higher and the pill
     lower so they don't collide. */
  .studio-desc { transform: translateY(-30%); }
}

/* ============================================================
   MOBILE INTRO HEADERS (one before each gallery row)
   On desktop the SVG layer + .svc-detail blocks tell you what
   each gallery is. On mobile we hide those and surface the same
   context as a clean header above each gallery via these.
   ============================================================ */
.mobile-intro { display: none; }

@media (max-width: 600px) {
  .mobile-intro {
    display: block;
    margin: clamp(28px, 8vw, 56px) clamp(20px, 5vw, 32px) 0;
    color: #fff;
  }
  .mobile-intro__badge {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--green);
    border-radius: 999px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
  }
  .mobile-intro__title {
    margin: 0 0 10px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .mobile-intro__copy {
    margin: 0 0 10px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
  }
  /* "Showing: Foo" — a quiet caption telling the user which sub-service
     the next gallery is displaying. The desktop UI's tab buttons aren't
     shown on phone, so the active tab needs a textual label. */
  .mobile-intro__tab {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--green);
  }
}

/* ============================================================
   MOBILE-ONLY SERVICES BLOCK
   The 4 service slabs and their intro copy are absolutely
   positioned on the SVG canvas and only fit at desktop widths.
   On phones we hide that whole band and surface the same content
   via the .mobile-services block (clean flow, stacked cards).
   ============================================================ */
.mobile-services { display: none; }

@media (max-width: 600px) {
  /* Keep the SVG visual layer visible — shrunk down to phone width
     at its natural aspect ratio, providing the same brand background
     as desktop. It paints from top:0 of the canvas down ~526vw tall;
     mobile content sits on top via z-index. */
  .page__svg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 0 !important;
  }
  /* Make sure mobile-flow content always sits above the SVG visual. */
  .gallery-box,
  .mobile-intro,
  .contact-form,
  .hero-pill-oval,
  .hero-video,
  .hero-copy,
  .tagline,
  .btn-link { z-index: 4 !important; position: relative; }
  .hero-pill-oval,
  .hero-video,
  .hero-copy,
  .tagline,
  .btn-link { position: absolute !important; }

  /* The percentage-positioned overlays that don't read well at phone
     scale stay hidden — we don't want them crashing into each other
     on top of the SVG. */
  .slab--1, .slab--2, .slab--3, .slab--4,
  .section-heading,
  .section-sub,
  .studio-desc,
  .mission,
  .svc-detail,
  .tab-hit,
  .arrow-hit,
  .contact-heading {
    display: none !important;
  }

  /* Stack the canvas's flow children in a column. Absolute children
     (the hero overlays) still float on top — the flex layout only
     governs the things we pull into normal flow below. */
  .page__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    /* The SVG visual layer provides the background. Allow it to extend
       beyond the (shorter) canvas via overflow: visible — the SVG is
       1920/10099 aspect so at phone width it renders ~526vw tall,
       longer than the content. */
    overflow: visible;
  }
  /* Reserved hero band — sized to fit the spheres-free mobile hero
     (logo / WE CRAFT VISUALS / description / EXPLORE OUR CRAFT /
     tagline / START A PROJECT). */
  .page__canvas::before {
    content: "";
    display: block;
    height: 92vw;
    flex-shrink: 0;
  }

  /* Mobile hero animation — exact desktop treatment, scaled to phone:
     - Video keeps `mix-blend-mode: screen` so its black background
       drops out and the spheres render with full vibrancy.
     - The pill PNG outline gets washed out when downscaled from 759px
       native to ~135px on phone (lossy anti-aliasing). To keep the
       lining crisp, we HIDE the PNG and use a CSS-drawn ellipse via
       the existing .hero-video-mask div sitting on top of the video.
     - Desktop relative dimensions preserved: pill ~36% wide, video
       slightly larger so the spheres extend a hair past the lining
       — same "glow past the pill" feel as desktop. */
  .hero-line-mask,
  .hero-pill-oval { display: none !important; }

  /* Hero pill animation — pill outline + transparent video:
       z:4  .hero-video     : spheres video with mix-blend-mode:
              screen so its black background drops to transparent.
              The SVG visual behind shows through the pill.
       z:5  .hero-pill-oval : white outline PNG on top, same box. */
  .hero-line-mask,
  .hero-video-mask { display: none !important; }

  .hero-pill-oval,
  .hero-video {
    position: absolute !important;
    top: 4vw !important;
    left: 29vw !important;
    width: 42vw !important;
    height: auto !important;
    aspect-ratio: 759 / 527 !important;
  }
  .hero-pill-oval {
    display: block !important;
    object-fit: contain !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
  .hero-video {
    z-index: 4 !important;
    object-fit: cover !important;
    border-radius: 50% / 50% !important;
    /* Screen blend drops the video's black backdrop to transparent —
       the SVG/page background shows through inside the pill. */
    mix-blend-mode: screen !important;
  }

  /* WE CRAFT (left) + VISUALS. (right) flank the smaller pill.
     Title font scaled down a touch from the 768-px media query's 6.5vw
     so "VISUALS." doesn't clip the right column. */
  .hero-copy--left  { top: 14vw !important; left: 2vw  !important; width: 28vw !important; }
  .hero-copy--right { top: 14vw !important; left: auto !important; right: 2vw !important; width: 30vw !important; }
  .hero-copy .hero-title { font-size: clamp(18px, 5.4vw, 28px); }
  /* EXPLORE OUR CRAFT */
  .btn-link[href="#services"] {
    top: 50vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    height: auto !important;
    padding: 0.6em 1.4em;
  }
  .tagline { top: 62vw !important; left: 6vw !important; width: 88vw !important; text-align: center; }
  /* Hero START A PROJECT pill — keep only this one */
  .btn-link[href="#contact"][style^="top:19"] {
    top: 80vw !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    height: auto !important;
    padding: 0.6em 1.4em;
  }
  /* Hide the per-section duplicate Start a project buttons (top:51-79%) */
  .btn-link[href="#contact"][style^="top:51"],
  .btn-link[href="#contact"][style^="top:60"],
  .btn-link[href="#contact"][style^="top:70"],
  .btn-link[href="#contact"][style^="top:79"] { display: none !important; }

  /* Pull each gallery row out of absolute positioning so they stack
     naturally below the reserved hero band, then flow into the
     mobile-services block. Tiles use `height: 100%`, so we give each
     box an explicit height that fits the tile aspect. */
  .gallery-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: 280px !important;
    margin: clamp(16px, 4vw, 32px) clamp(14px, 4vw, 28px);
  }
  /* OUR WORK row gets a touch more room — its tiles are 9:11 portraits. */
  .gallery-box.gallery--work { height: 320px !important; }

  /* Pull the contact form out of absolute positioning too — it was
     pinned at top:91.6% of the canvas, which on mobile slides down
     into the VR gallery as the canvas accumulates content. */
  .contact-form {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: clamp(40px, 10vw, 64px) clamp(20px, 5vw, 32px);
  }
  /* The mask under the form covered the SVG-painted form region.
     The SVG is hidden on mobile so the mask is no longer needed. */
  .cf-mask { display: none !important; }

  /* Surface the same service grid as a tidy stacked block. It sits
     OUTSIDE the .page__canvas (sibling, not child) so the canvas's
     absolute layout never overlaps it. Lives in normal document
     flow on a black background, immediately after the canvas. */
  .mobile-services {
    display: block;
    background: #000;
    margin: 0;
    padding: clamp(40px, 12vw, 80px) clamp(20px, 5vw, 40px);
    color: #fff;
  }
  .mobile-services__heading {
    margin: 0 0 14px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 7.5vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .mobile-services__sub {
    margin: 0 0 24px;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
  }
  .mobile-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mobile-service-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 18px;
    border-radius: 14px;
    background:
      linear-gradient(155deg, rgba(34,224,122,0.18) 0%, rgba(37,64,255,0.18) 100%),
      rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    color: #fff;
    transition: transform 200ms ease, border-color 200ms ease;
  }
  .mobile-service-card:active { transform: scale(0.98); }
  .mobile-service-card__num {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--green);
    font-weight: 600;
  }
  .mobile-service-card__title {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .mobile-service-card__desc {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
  }
  .mobile-services__footer {
    margin: 24px 0 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 3.4vw, 14px);
    color: rgba(255, 255, 255, 0.66);
  }
}