/* ==========================================================================
   openn™ — studio site
   Original implementation. Design system: paper ground, near-black panels,
   one accent, mono detail labels, hairline borders for depth (no shadows).
   ========================================================================== */

:root {
  --paper: #f8f7f3;
  --black: #000;
  --accent: #f3350c;
  --grey-50: #f1efed;
  --grey-100: #ddd;
  --grey-200: #b6b6b6;
  --grey-300: #707070;
  --grey-400: #666;
  --grey-500: #4d4d4d;
  --grey-600: #292929;
  --grey-700: #171717;
  --grey-800: #0f0f0f;
  --grey-900: #0a0a0a;
  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-70: rgba(255, 255, 255, 0.7);
  --black-20: rgba(0, 0, 0, 0.2);

  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* the small tracked labels: the same face as the display, not a mono */
  --font-label: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-hero: 2rem;
  --radius-pill: 9rem;

  /* --------------------------------------------------------------------
     GLASS
     Buttons and small chrome read as frosted panes: a translucent fill, a
     hairline of light on the edge, and the ground blurred behind. Two
     inversions of one idea — light glass for dark/photographic grounds,
     ink glass for the paper ground, where a white pane would vanish.
     -------------------------------------------------------------------- */
  --glass-blur: blur(18px) saturate(150%);
  --glass-light: rgba(255, 255, 255, 0.13);
  --glass-light-hi: rgba(255, 255, 255, 0.26);
  --glass-light-line: rgba(255, 255, 255, 0.34);
  --glass-light-line-hi: rgba(255, 255, 255, 0.55);
  --glass-ink: rgba(18, 18, 18, 0.05);
  --glass-ink-hi: rgba(18, 18, 18, 0.11);
  --glass-ink-line: rgba(18, 18, 18, 0.16);
  --glass-ink-line-hi: rgba(18, 18, 18, 0.3);
  /* dark glass: for chrome that sits over imagery of any tone (film controls) */
  --glass-dark: rgba(10, 10, 10, 0.52);
  --glass-dark-hi: rgba(10, 10, 10, 0.68);
  --glass-dark-line: rgba(255, 255, 255, 0.14);

  --section-pad: 7rem;
  --pad-global: 3rem;
  --pad-tiny: 0.75rem;

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

html,
body {
  overflow-x: clip;
}

body {
  background-color: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul[role="list"] {
  list-style: none;
}

sup {
  line-height: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- layout helpers ---------- */
.pad-global {
  padding-inline: var(--pad-global);
}

.pad-global--tiny {
  padding-inline: var(--pad-tiny);
}

.container {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
}

.section-pad {
  padding-top: var(--section-pad);
  width: 100%;
}

.section-pad--small {
  padding-top: 5rem;
}

.spacer-sm { padding-top: 1rem; width: 100%; }
.spacer-md { padding-top: 2rem; width: 100%; }
.spacer-lg { padding-top: 3rem; width: 100%; }
.spacer-xl { padding-top: 4rem; width: 100%; }

/* ---------- type ---------- */
.h3 {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0;
}

.h4 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
}

/* label: mono detail, dot + uppercase */
.label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.label__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

.label__text {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--black);
}

.label__text--light {
  color: var(--paper);
}

.head-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
}

/* ---------- buttons ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--glass-ink);
  color: var(--black);
  border: 1px solid var(--glass-ink-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-pill__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
  transition: background-color 0.25s var(--ease);
}

.btn-pill {
  position: relative;
  overflow: clip;
  z-index: 0;
}

.btn-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--glass-ink-hi);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}

.btn-pill:hover::before {
  transform: none;
}

.btn-pill:hover {
  border-color: var(--glass-ink-line-hi);
  color: var(--black);
}

/* rolling label: current text slides up, duplicate slides in from below */
.btn-roll {
  position: relative;
  display: inline-block;
  overflow: clip;
}

.btn-roll__text {
  display: inline-block;
  transition: transform 0.4s var(--ease);
  will-change: transform;
}

.btn-roll__text--b {
  position: absolute;
  left: 0;
  top: 100%;
}

.btn-pill:hover .btn-roll__text,
.btn-block:hover .btn-roll__text,
.footer__submit:hover .btn-roll__text {
  transform: translateY(-100%);
}

.btn-pill .btn-pill__dot {
  transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}

.btn-pill:hover .btn-pill__dot {
  transform: scale(1.4);
}

.btn-pill--black {
  background-color: var(--black);
  color: #fff;
  border-color: var(--black);
}

.btn-pill--black:hover {
  background-color: var(--grey-700);
}

.btn-pill__dot--after {
  margin-left: 0.25rem;
}

/* --paper pills sit on the dark CTA grounds, so they take the light glass */
.btn-pill--paper {
  background-color: var(--glass-light);
  border-color: var(--glass-light-line);
  color: var(--paper);
}

.btn-pill--paper::before {
  background-color: var(--glass-light-hi);
}

.btn-pill--paper:hover {
  border-color: var(--glass-light-line-hi);
  color: var(--paper);
}

.btn-pill--large {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

.btn-underline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--black);
  transition: gap 0.25s var(--ease);
}

.btn-underline__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.btn-underline:hover .btn-underline__arrow {
  transform: translateX(0.35rem);
}

.btn-underline--light {
  color: var(--paper);
  border-bottom-color: var(--white-50);
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--glass-light);
  color: var(--paper);
  border: 1px solid var(--glass-light-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 1rem;
  padding: 1.25rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-block {
  position: relative;
  overflow: clip;
  z-index: 0;
}

.btn-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--glass-light-hi);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}

.btn-block:hover::before {
  transform: none;
}

.btn-block:hover {
  color: var(--paper);
  border-color: var(--glass-light-line-hi);
}

/* ---------- reveal on scroll (progressive enhancement: only under .js) ----------
   Matches the template's ix primitive: opacity 0 + translateY(0.5rem) -> settled. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out-cubic);
}

.js [data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- hero service labels: staggered rise on load ---------- */
.js .hero__service {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .is-loaded .hero__service {
  opacity: 1;
  transform: none;
}

.js .is-loaded .hero__service:nth-child(1) { transition-delay: 0.35s; }
.js .is-loaded .hero__service:nth-child(2) { transition-delay: 0.45s; }
.js .is-loaded .hero__service:nth-child(3) { transition-delay: 0.55s; }
.js .is-loaded .hero__service:nth-child(4) { transition-delay: 0.65s; }

/* ---------- bento chat: bubbles pop in one by one ---------- */
.js .bento__chat .bento__msg-row {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.js .bento__chat.is-in .bento__msg-row {
  opacity: 1;
  transform: none;
}

.js .bento__chat.is-in .bento__msg-row:nth-child(1) { transition-delay: 0.35s; }
.js .bento__chat.is-in .bento__msg-row:nth-child(2) { transition-delay: 0.75s; }
.js .bento__chat.is-in .bento__msg-row:nth-child(3) { transition-delay: 1.2s; }

/* ---------- heading reveal (template-style soft rise + fade) ---------- */
.js [data-split] {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out-cubic);
}

.js [data-split].is-in {
  opacity: 1;
  transform: none;
}

/* legacy line-mask (kept inert for safety) */
.line-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* ==========================================================================
   WORDMARK BRACKET DEVICE — Open[n]: n number of possibilities.
   Brackets carry the accent; the letters stay near-black (or inherit).
   ========================================================================== */
.wm-bracket {
  color: var(--accent);
  font-weight: inherit;
  display: inline-block;
  transform: translateY(-0.02em);
}

/* the giant footer wordmark keeps its brackets slightly tightened */
.footer__brand .wm-bracket {
  letter-spacing: 0;
  margin-inline: -0.01em;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--paper);
  padding-top: 0.5rem;
  transition: padding 0.3s var(--ease);
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.625rem;
}

.nav__brand-group {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

/* ---------- brand mark: open ring + accent — used in nav, footer ---------- */
/* ---------- brand logo (supplied Figma artwork) ---------- */
.brand-logo {
  display: block;
  width: auto;
  height: 1.95rem;
  color: var(--black);
  flex: none;
}

.footer__brand .brand-logo,
.brand-logo--footer {
  /* inherits the footer's ink so it never washes out on the light ground */
  width: 100%;
  height: auto;
}

.brand-mark {
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.32em;
  color: var(--black);
  flex: none;
}

.footer__brand .brand-mark {
  color: var(--paper);
}

.nav__brand-mark {
  font-size: 0.75rem;
  vertical-align: super;
}

/* ---------- brand descriptor: Openn | Studio → Tech → AI ----------
   A hairline divider, then one word at a time in a one-line window, turned by
   the same [data-rotator] engine as the hero. It sits OUTSIDE the home link so
   the link still reads "Openn, home"; the visually-hidden line gives screen
   readers all three words once, instead of a word that keeps changing. */
.nav__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
  transition: color 0.4s var(--ease);
}

/* the divider stands as tall as the logotype's cap height (139.49 / 202.01
   of the 1.95rem logo), so it reads as part of the lockup, not a rule */
.nav__tag::before {
  content: "";
  flex: none;
  width: 1px;
  height: 1.35rem;
  background-color: currentColor;
  opacity: 0.3;
}

.nav__tag-window {
  position: relative;
  display: block;
  height: 1.2em; /* script re-measures this to the tallest word */
  overflow: clip;
}

.nav__tag-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s var(--ease);
}

.nav__tag-word {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
}

/* The descriptor costs ~78px, and at 390px the phone header has only ~8px of
   slack left. From 374–389px the two gaps around the divider close up so the
   lockup still fits; below that it squeezes "Get in touch" onto two lines, so
   the CTA wins and small phones fall back to the logo alone. */
@media (max-width: 389px) {
  .nav__brand-group,
  .nav__tag { gap: 0.5rem; }
}

@media (max-width: 373px) {
  .nav__tag { display: none; }
}

.nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.nav__link::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  right: -0.45rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.nav__link:hover::after {
  opacity: 1;
}

.nav__link--work {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.nav__link--work::after {
  display: none;
}

.nav__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  font-family: var(--font-label);
}

.nav__line {
  width: 100%;
  height: 1px;
  border-top: 1px dotted var(--grey-200);
}

.nav.is-scrolled {
  padding-top: 0;
}

/* ---------- navbar riding on the hero ground (homepage) ----------
   The hero field runs full-bleed to the top of the page, so the bar goes
   transparent and inverts to paper ink over it. `.is-solid` is set by JS the
   moment the hero scrolls past, restoring the normal paper bar — without it
   white nav links would land on white sections and vanish. */
.nav--over {
  transition: padding 0.3s var(--ease), background-color 0.4s var(--ease);
}

.nav--over:not(.is-solid) {
  background-color: transparent;
}
/* The ground under this bar is a photograph, and the lit limb of the planet
   runs straight under the links. The bar carries its own fade so white type
   holds at the top of any image, without painting a solid block across it.
   .nav is position:fixed with a z-index, so -1 sits under the bar's own
   content and still over the hero. */
.nav--over:not(.is-solid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  /* tall and gently eased: a short ramp leaves a visible straight edge cutting
     across whatever is behind it */
  height: 360%;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.60) 0%,
      rgba(0, 0, 0, 0.46) 22%,
      rgba(0, 0, 0, 0.28) 44%,
      rgba(0, 0, 0, 0.14) 64%,
      rgba(0, 0, 0, 0.05) 82%,
      rgba(0, 0, 0, 0) 100%);
}

.nav--over:not(.is-solid) .brand-logo,
.nav--over:not(.is-solid) .nav__tag,
.nav--over:not(.is-solid) .nav__link,
.nav--over:not(.is-solid) .nav_button {
  color: var(--paper);
}
/* Over the hero photograph the logotype has to read in a single ink — the
   accent bracket disappears in red against a dark image. The sprite's bracket
   paths are filled var(--wm-accent, #F3350C), so every other instance on the
   page keeps the accent; only this one is overridden. Custom properties
   inherit into a <use> shadow tree, which ordinary selectors cannot reach. */
.nav--over:not(.is-solid) .brand-logo {
  --wm-accent: currentColor;
}

.nav--over:not(.is-solid) .nav__line {
  border-top-color: var(--white-15);
}

.nav--over:not(.is-solid) .nav_button {
  border-color: var(--white-20);
}

.nav--over:not(.is-solid) .nav__cta {
  background-color: var(--glass-light);
  border-color: var(--glass-light-line);
  color: var(--paper);
}

.nav--over:not(.is-solid) .nav__cta:hover {
  border-color: var(--glass-light-line-hi);
}

.nav--over:not(.is-solid) .nav_button {
  background-color: var(--glass-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* the pill's fill-up wipe is near-black by default — invert it to paper so
   the hover still reads as a swap against the dark ground */
.nav--over:not(.is-solid) .nav__cta::before {
  background-color: var(--paper);
}

.nav--over:not(.is-solid) .nav__cta:hover {
  border-color: var(--paper);
  color: var(--black);
}

.nav--over:not(.is-solid) .nav__cta:hover .btn-pill__dot {
  background-color: var(--accent);
}

/* ==========================================================================
   MOBILE NAV — trigger + full-screen overlay menu
   The panel is ALWAYS in the DOM; open/close is a class on .menu, so the
   entrance actually animates instead of snapping on a fresh mount.
   ========================================================================== */
.nav_button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;   /* 44px touch target */
  height: 2.75rem;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--black);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav_button__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 1.125rem;
}

.nav_button__bars > span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.35s var(--ease);
}

.nav_button[aria-expanded="true"] {
  border-color: var(--black);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 1;            /* inside .nav's z-index:100 stacking context */
  display: flex;
  visibility: hidden;    /* keeps the closed panel out of the tab order */
  pointer-events: none;
  background-color: var(--paper);
  /* wipes down from the header edge, matching the site's masked reveals */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--ease), visibility 0s linear 0.55s;
}

.menu.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.55s var(--ease), visibility 0s linear 0s;
}

.menu__panel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  height: 100%;
  padding: 1.125rem var(--pad-global) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding-bottom: 1rem;
  border-bottom: 1px dotted var(--grey-200);
}

.menu__label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-300);
}

.menu_close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--black);
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}

.menu_close:hover,
.menu_close:focus-visible {
  border-color: var(--black);
}

.menu_close > svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  min-height: 2.75rem;
  padding-block: 0.625rem;
  border-bottom: 1px dotted var(--grey-100);
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
  /* staggered rise, revealed by the wipe above */
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.25s var(--ease);
}

.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.22s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.29s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.36s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.43s; }

.menu__link[aria-current="page"] {
  color: var(--accent);
}

.menu__link-num {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--grey-300);
}

.menu__link-text {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
}

.menu__count {
  position: relative;
  top: 0.35em;
}

.menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex: none;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px dotted var(--grey-200);
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.5s var(--ease) 0.5s, transform 0.5s var(--ease) 0.5s;
}

.menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
}

.menu__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.menu_social-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-300);
  transition: color 0.25s var(--ease);
}

.menu_social-link:hover,
.menu_social-link:focus-visible {
  color: var(--black);
}

/* scroll lock while the overlay is open — cooperates with Lenis, which is
   stopped in JS at the same time */
body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* svh = the viewport with mobile browser chrome SHOWN, so the practices bar
     pinned to the hero's base is on screen at first paint instead of sitting
     behind the URL bar. Ignored by browsers that don't know the unit. */
  min-height: 100svh;
  /* the ground runs to the very top of the page and the navbar rides on it
     (.nav--over), so there is no gutter above the card to pad out */
  padding-top: 0;
  overflow: clip;
}

.hero__headings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 2rem;
  overflow: clip;
}

/* hero wordmark entrance: masked rise on load */
.js .hero__title {
  opacity: 0;
  transform: translateY(45%);
  transition: transform 1.1s var(--ease), opacity 0.9s var(--ease);
}

.js .hero__title--sub {
  transition-delay: 0.12s;
}

.js .is-loaded .hero__title {
  opacity: 1;
  transform: none;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 12vw;
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: 0;
}

.hero__mark {
  display: inline-block;
  font-size: 5vw;
  font-weight: 600;
  vertical-align: top;
  position: relative;
  top: 0.75vw;
  left: 0.25vw;
}

.hero__frame {
  display: flex;
  flex: 1;
  align-items: stretch;
  /* full-bleed: the hero ground runs edge to edge under the header, with no
     container gutter boxing it in */
  padding: 0;
}

.hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.75rem;
  width: 100%;
  min-height: 38rem;
  /* top pad clears the overlaid navbar */
  padding: 8rem 2rem 0;
  border-radius: 0;
  overflow: clip;
  color: #fff;
  /* painted ground, not just the canvas: the generative <canvas> is an
     enhancement on top. Without this the card renders empty whenever the
     canvas fails to size or paint (JS off, error, zero-height at init).
     Matches the canvas ground so the handover is invisible. */
  /* painted ground, not just the canvas: the drift field is an enhancement on
     top. Without this the card renders empty whenever the canvas fails to size
     or paint (JS off, error, zero-height at init). */
  background-color: #050506;
  background-image:
    radial-gradient(52% 40% at 50% 46%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%);
}

/* The ground is a single still: earth on the horizon of an open field. It is
   the only image in the hero, so it covers rather than contains. */
.hero__field {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* A slow push into the frame, one minute end to end. The floor is scale(1.04)
   so the drift never uncovers an edge: the translate stays inside the 2% of
   overscan that scale buys on each side. */
@media (prefers-reduced-motion: no-preference) {
  .hero__field {
    will-change: transform;
    animation: hero-drift 60s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  }
}

@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.1%, -0.7%, 0); }
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The image runs from black sky at the top to lit grass at the base, and all
     of the white type sits over that base. So: barely anything across the sky
     and the planet, and real ink from the horizon down. */
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0.06) 14%,
      rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, 0.28) 56%,
      rgba(0, 0, 0, 0.66) 78%,
      rgba(0, 0, 0, 0.86) 100%);
}

/* marquee */
.hero__marquee {
  position: relative;
  overflow: clip;
  width: 100%;
}

.hero__marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee-x 26s linear infinite;
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white-70);
}

@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-x-rev {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* hero practices — pinned along the bottom edge of the hero.
   The four dotted rules sit ABOVE their labels, so together they draw the
   bar's top hairline as they animate in on load (see .hero__service-line). */
.hero__services {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2rem;
  width: auto;
  /* out to the card edges, then re-inset — the rule spans full-bleed */
  margin-inline: -2rem;
  padding: 0 2rem calc(1.5rem + env(safe-area-inset-bottom));
}

.hero__service {
  display: flex;
  /* rule on top, label beneath it */
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.875rem;
}

.hero__service-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--grey-100);
}

.hero__service-line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted var(--white-50);
}

.js .hero__service .hero__service-line {
  width: 0;
  transition: width 1.5s var(--ease-out-cubic);
}

.js .is-loaded .hero__service .hero__service-line {
  width: 100%;
}

.js .is-loaded .hero__service:nth-child(1) .hero__service-line { transition-delay: 0.45s; }
.js .is-loaded .hero__service:nth-child(2) .hero__service-line { transition-delay: 0.55s; }
.js .is-loaded .hero__service:nth-child(3) .hero__service-line { transition-delay: 0.65s; }
.js .is-loaded .hero__service:nth-child(4) .hero__service-line { transition-delay: 0.75s; }

/* hero bottom */
.hero__bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  width: 100%;
  /* the free space is taken ABOVE the row only, so the statement and the
     contact card both come to rest directly on the practices bar rather than
     floating in the middle of the field */
  margin-block: auto 0;
  padding-bottom: 2.5rem;
}

.hero__subheading {
  /* one type scale for the whole statement — the rotator's window and each
     word's box are derived from it, so nothing has to be re-tuned by hand */
  --hero-subhead: clamp(2.25rem, 4.2vw, 4.5rem);
  --hero-line: calc(var(--hero-subhead) * 1.14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* wide enough for the longest rotator word ("experiences.") to sit on one
     line: the window is one line tall, so a wrap would be clipped */
  max-width: 42rem;
}

.hero__label {
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white-70);
  margin-bottom: 1.25rem;
}

.hero__subhead {
  font-family: var(--font-display);
  font-size: var(--hero-subhead, 2.75rem);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: 0;
}

.hero__words-wrap {
  position: relative;
  width: 100%;
  height: var(--hero-line, 3.2rem);
  overflow: clip;
}

.hero__words {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s var(--ease);
}

.hero__word {
  height: var(--hero-line, 3.2rem);
  display: flex;
  align-items: center;
  /* the rotator window is one line tall — a wrapped word would be clipped */
  white-space: nowrap;
}

/* contact card */
.hero__contact {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.hero__contact-pic {
  width: 4.4rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.hero__contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 2.25rem 1rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--white-20);
  border: 1px solid var(--white-15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero__contact-dot {
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.hero__contact-cta {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}

.hero__contact-role {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-50);
}

.hero__contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px dotted var(--white-15);
  width: 100%;
}

.hero__contact-links a {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-70);
  transition: color 0.2s var(--ease);
}

.hero__contact-links a:hover {
  color: #fff;
  text-decoration: underline dotted var(--white-50);
  text-underline-offset: 2px;
}

/* ==========================================================================
   SERVICES STRIP (partners-grid analogue)
   ========================================================================== */
.strip__heading {
  max-width: 50.625rem;
}

.strip__wrapper {
  position: relative;
  overflow: clip;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 18% 82%, transparent);
  mask-image: linear-gradient(270deg, transparent, #000 18% 82%, transparent);
}

.strip__track {
  display: flex;
  width: max-content;
  animation: marquee-x 70s linear infinite;
}

.strip__wrapper:hover .strip__track {
  animation-play-state: paused;
}

.strip__list {
  display: flex;
  align-items: flex-start;
}

.strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.125rem;
}

.strip__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background-color: #fff;
  border: 1px solid var(--grey-50);
  overflow: clip;
  transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}

/* corner registration ticks — print crop marks, the studio's own vocabulary */
.strip__cell::before {
  --tick: linear-gradient(var(--grey-100), var(--grey-100));
  content: "";
  position: absolute;
  inset: 1rem;
  background-image: var(--tick), var(--tick), var(--tick), var(--tick),
    var(--tick), var(--tick), var(--tick), var(--tick);
  background-repeat: no-repeat;
  background-size: 0.6875rem 1px, 1px 0.6875rem, 0.6875rem 1px, 1px 0.6875rem,
    0.6875rem 1px, 1px 0.6875rem, 0.6875rem 1px, 1px 0.6875rem;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}

.strip__mark {
  position: relative;
  z-index: 1;
  width: 3.375rem;
  height: 3.375rem;
  color: var(--black);
  /* one hairline weight for the whole set. the 1.5 in the 24-unit viewBox was
     rendering at 3.4px once scaled to 54px — non-scaling-stroke pins the weight
     to real pixels, so every icon reads the same at every size. */
  stroke-width: 1.5px;
  transition: color 0.45s var(--ease), transform 0.6s var(--ease-out-quint);
}

.strip__mark * {
  vector-effect: non-scaling-stroke;
}

.strip__item:hover .strip__cell {
  border-color: var(--grey-100);
}

.strip__item:hover .strip__cell::before {
  opacity: 0.45;
}

.strip__item:hover .strip__mark {
  color: var(--accent);
  transform: scale(1.08);
}

.strip__item:hover .strip__name {
  color: var(--accent);
}

.strip__index {
  font-family: var(--font-label);
  font-size: 2rem;
  font-weight: 500;
  color: var(--grey-900);
}

.strip__cell-dot {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.strip__texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 80%;
  text-align: center;
}

.strip__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.45s var(--ease);
}

.strip__desc {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-300);
}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */
.work {
  overflow: clip;
}

/* the Work page opens straight under the fixed 78px bar — same top edge the
   Lab pages get, so the heading is not tucked against the navbar */
.work-page > .section-pad {
  padding-top: 9.5rem;
}

@media (max-width: 1024px) {
  .work-page > .section-pad { padding-top: 8rem; }
}

@media (max-width: 767px) {
  .work-page > .section-pad { padding-top: 6.5rem; }
}

.work__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.6fr;
  gap: 1.5rem;
  align-items: end;
}

.work__head-texts {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 22rem;
}

.work__desc {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--grey-400);
}

.work__heading-wrap {
  justify-self: center;
}

.work__heading {
  position: relative;
  font-family: var(--font-display);
  font-size: 6.5rem;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: 0;
}

.work__number {
  position: absolute;
  top: 0;
  right: -1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--font-label);
  font-size: 0.75rem;
  line-height: 1;
}

.work__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.5rem;
  justify-self: end;
}

.work__year {
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  color: var(--grey-300);
}

.work__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  width: 100%;
}

.work__item {
  position: relative;
  display: block;
  height: 50vh;
  max-height: 34rem;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: clip;
}

.work__media {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 1.1s var(--ease-out-cubic);
}

.js [data-reveal] .work__media { transform: scale(1.1); }
.js [data-reveal].is-in .work__media { transform: scale(1); }

.work__img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  --wy: 0px;
  transform: translateY(var(--wy));
  transition: transform 0.75s var(--ease-out-cubic);
}

.work__item:hover .work__img {
  transform: translateY(var(--wy)) scale(1.04);
}

/* The Maxiwise card shows the project's front page whole, so it takes the
   artwork's own 16/10 instead of the default 16/9 crop. */
.work__item--cover {
  aspect-ratio: 16 / 10;
}

.work__img--cover {
  height: 100%;
}

.work__name {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  transition: transform 0.4s var(--ease);
}

.work__item:hover .work__name {
  transform: translateY(-0.25rem);
}

.work__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: #fff;
  color: var(--black);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.work__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.work__name-text {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
}

.work__name-tags {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey-300);
}

.work__all {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   WHY WORK WITH US (bento)
   ========================================================================== */
.grid-section__heading {
  max-width: 50rem;
}

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bento__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bento__team {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--grey-900);
  overflow: clip;
}

.bento__label {
  position: absolute;
  top: 1.5rem;
  left: 1.75rem;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white-50);
  z-index: 3;
}

.bento__label--dark {
  color: rgba(0, 0, 0, 0.45);
}

.bento__title {
  position: relative;
  z-index: 5;
  max-width: 13.125rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

.bento__title--left {
  text-align: left;
  max-width: 15rem;
}

.bento__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border: 1px solid var(--white-15);
  border-radius: 50%;
}

.bento__circle--outer { width: 70%; animation: ring-spin-cw 46s linear infinite; }
.bento__circle--inner { width: 47%; animation: ring-spin-ccw 32s linear infinite; }

.js .bento__team:hover .bento__circle,
.js .bento__team:hover .bento__member,
.js .bento__team:hover .bento__member-in {
  animation-play-state: paused;
}

@keyframes ring-spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ring-spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes member-counter-x {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(-360deg); }
}

@keyframes member-counter-y {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(-360deg); }
}

@keyframes member-counter-in {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bento__member {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--grey-700);
}

.bento__member--1 { top: -6.5%; left: 50%; transform: translateX(-50%); animation: member-counter-x 46s linear infinite; }
.bento__member--2 { right: -6.5%; top: 50%; transform: translateY(-50%); animation: member-counter-y 46s linear infinite; }
.bento__member--3 { bottom: -6.5%; left: 50%; transform: translateX(-50%); animation: member-counter-x 46s linear infinite; }
.bento__member--4 { left: -6.5%; top: 50%; transform: translateY(-50%); animation: member-counter-y 46s linear infinite; }

.bento__member-in {
  position: absolute;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--grey-700);
  animation: member-counter-in 32s linear infinite;
}

/* two on the inner ring, diagonally opposite */
.bento__member-in--1 { top: 7.5%; left: 7.5%; }
.bento__member-in--2 { top: 71.5%; left: 71.5%; }

/* the real team: members without a photo yet show initials, as on /team */
.bento__team { container-type: inline-size; }

.bento__member-in--initials {
  display: grid;
  place-items: center;
  border: 1px solid var(--white-15);
  font-family: var(--font-display);
  font-size: max(0.75rem, 2.8cqi);
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

.bento__chat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 4.5rem 3rem 3rem;
  border-radius: var(--radius-md);
  background-color: #e0dcd6;
  overflow: clip;
}

.bento__chats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.bento__msg-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.bento__msg-row--right {
  justify-content: flex-end;
}

.bento__avatar {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background-color: #cbc5bc;
}

/* Our side of the thread is signed with the company mark, not a face — these
   are replies from the studio. openn-avatar.svg carries the disc itself, with
   the mark inscribed so the bracket clears the curve at this size. */
.bento__avatar--ours {
  background-color: transparent;
}

.bento__msg {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border-bottom-left-radius: 0.25rem;
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.35s var(--ease);
}

.bento__msg.is-swapping { opacity: 0; }

.bento__msg--ours {
  background-color: var(--black);
  color: var(--paper);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: 0.25rem;
}

.bento__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 4.5rem 3rem 3rem;
  border-radius: var(--radius-md);
  background-color: var(--grey-900);
  overflow: clip;
}

.bento__cta-img {
  position: absolute;
  top: 38%;
  right: 20%;
  width: 60%;
  max-width: 500px;
  z-index: 1;
  pointer-events: none;
}

.bento__cta .bento__title,
.bento__cta .btn-underline {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: clip;
  /* painted ground, not just the canvas: the bracket field is an enhancement
     on top. Without this the panel renders flat grey whenever the canvas
     fails to size or paint (JS off, error, zero-height at init). Matches the
     canvas ground so the handover is invisible. */
  background-color: #070708;
  background-image:
    radial-gradient(80% 90% at 30% 36%, rgba(241, 240, 234, 0.05), rgba(241, 240, 234, 0) 70%),
    linear-gradient(140deg, #0b0b0c 0%, #070708 55%, #030304 100%);
}

.about__field {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the quote card is white type on a blurred panel — the lit grass in the
   lower half of the still is too bright to carry it unscrimmed */
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.10) 38%,
      rgba(0, 0, 0, 0.42) 74%,
      rgba(0, 0, 0, 0.58) 100%);
}

.about__quote-card {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 72%;
  max-width: 30rem;
  padding: 3rem 3rem 5.5rem;
  border-radius: var(--radius-sm);
  background-color: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--white-10);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.about__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.about__quote-author {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
}

.about__author {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}

.about__author-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-50);
}

.about__content {
  max-width: 34.875rem;
}

.about__body {
  font-size: 1rem;
  font-weight: 500;
  color: var(--grey-400);
  max-width: 26rem;
}

/* ==========================================================================
   SERVICES (04)
   ========================================================================== */
.svc__panel {
  border-radius: var(--radius-md);
  background-color: var(--black);
  color: var(--paper);
  padding: 3rem 3rem 4rem;
}

.svc__head {
  padding-bottom: 3rem;
}

.svc__count {
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  color: var(--grey-300);
}

.svc__items {
  display: flex;
  flex-direction: column;
}

.svc__item {
  position: sticky;
  top: 20vh;
  padding-block: 3rem;
  background-color: var(--black);
  border-top: 1px dotted var(--white-15);
}

.svc__item--last {
  padding-bottom: 1.5rem;
}

.svc__item-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  transition: transform 0.35s var(--ease-out-cubic);
}

.svc__item:hover .svc__item-in {
  transform: translateX(0.75rem);
}

.svc__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* the title, tags and description stay together as one block and sit
     centred against the picture. Spreading them to the column's full height
     pushed the description miles from the heading it belongs to. */
  justify-content: center;
  gap: 1.5rem;
}

.svc__item-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.svc__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--grey-100);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
}

.svc__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: #e5e3dc;
}

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 24rem;
}

.svc__tag {
  padding: 0.5rem 0.75rem;
  border-radius: 3rem;
  background-color: var(--grey-600);
  color: var(--grey-200);
  font-size: 0.875rem;
  font-weight: 500;
}

.svc__desc {
  max-width: 33rem;
  font-weight: 500;
  color: var(--grey-300);
}

.svc__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
}

/* the frame owns its ratio; the picture just fills it */
.svc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.svc__item:hover .svc__img {
  transform: scale(1.02);
}

.svc__cta {
  padding-top: 3rem;
  border-top: 1px dotted var(--white-15);
}

/* ==========================================================================
   SHOWREEL
   ========================================================================== */
.reel {
  position: relative;
  overflow: clip;
  --reel: 0;
  --e: 0;
}

.reel__note {
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-300);
}

.reel__wrap {
  /* reference track length — the sticky frame pins for the remainder */
  height: 200rem;
  position: relative;
}

.reel__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.reel__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(12vw + 88vw * var(--e));
  height: calc(10vh + 90vh * var(--e));
  padding: calc(1rem + 0.5rem * var(--e));
}

.reel__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(1rem + 1rem * var(--e));
  overflow: clip;
  flex: none;
}

.reel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transform: scale(calc(1.4 - 0.4 * var(--e)));
  transform-origin: center;
}

.reel__center {
  position: absolute;
  inset: 0;
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: var(--play, 1);
  /* scale with the frame so the play block never overflows the small chip */
  transform: translateY(var(--playY, 0rem)) scale(calc(0.45 + 0.55 * var(--e)));
}

.reel__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--white-15);
  color: #fff;
}

.reel__play-text {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
}

/* ---------- the film itself ----------
   The still stays the poster; the video only takes over once someone asks
   for it, so nothing downloads on a scroll-past. */
.reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease);
}

.reel__frame.is-playing .reel__video {
  opacity: 1;
  visibility: visible;
}

/* The film is 16:9 and composed to its own margins. Once the stage is taller
   than 3:2 — phones, tall windows — cover would eat the corner type, so the
   frame letterboxes instead of cropping. */
@media (max-aspect-ratio: 3 / 2) {
  .reel__video {
    object-fit: contain;
    background-color: #000;
  }
}

/* Before the frame opens the play block is transparent; it must not be
   clickable or focusable while it is invisible. */
.reel.is-idle .reel__center {
  pointer-events: none;
}

.reel__frame.is-playing .reel__img {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.reel__frame.is-playing .reel__center {
  opacity: 0;
  pointer-events: none;
}

.reel__stop {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-dark-line);
  color: #fff;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}

.reel__frame.is-playing .reel__stop {
  opacity: 1;
  visibility: visible;
}

.reel__stop:hover {
  background-color: var(--glass-dark-hi);
}

/* ---------- player controls: play/pause, time, scrub, mute ----------
   One glass pill along the foot of the frame. While the film plays untouched
   the controls step back; any pointer movement, a pause or a key brings them in. */
.reel__ctrl {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-dark-line);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.reel__frame.is-playing .reel__ctrl {
  opacity: 1;
  visibility: visible;
}

.reel__frame.is-playing.is-quiet:not(.is-paused) .reel__ctrl,
.reel__frame.is-playing.is-quiet:not(.is-paused) .reel__stop {
  opacity: 0;
}

.reel__frame.is-playing.is-quiet:not(.is-paused) {
  cursor: none;
}

.reel__btn {
  appearance: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.reel__btn:hover {
  background-color: var(--white-15);
}

.reel__i-play,
.reel__i-muted,
.reel__frame.is-paused .reel__i-pause,
.reel__frame.is-muted .reel__i-vol {
  display: none;
}

.reel__frame.is-paused .reel__i-play,
.reel__frame.is-muted .reel__i-muted {
  display: block;
}

.reel__time {
  flex: none;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* the hit area is the full pill height; the visible track is a thin line */
.reel__seek {
  position: relative;
  flex: 1;
  height: 2.75rem;
  display: flex;
  align-items: center;
  margin: 0 0.5rem;
  cursor: pointer;
  touch-action: none;
}

.reel__seek:focus-visible {
  outline: none;
}

.reel__track {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: var(--white-15);
  transition: height 0.15s var(--ease);
}

.reel__seek:hover .reel__track,
.reel__seek.is-drag .reel__track,
.reel__seek:focus-visible .reel__track {
  height: 5px;
}

.reel__track s {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--accent);
  text-decoration: none;
}

.reel__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background-color: var(--accent);
  transform: scale(0);
  transition: transform 0.15s var(--ease);
}

.reel__seek:hover .reel__knob,
.reel__seek.is-drag .reel__knob,
.reel__seek:focus-visible .reel__knob {
  transform: scale(1);
}

.reel__flank {
  /* anchored to the stage edge, so the frame pushes them out as it opens */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: calc(1 - var(--e));
}

.reel__flank--left {
  right: calc(100% + 0.25rem);
}

.reel__flank--right {
  left: calc(100% + 0.25rem);
}

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */
.prin__main {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 2rem;
}

.prin__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 21.875rem;
}

.prin__data {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.prin__data-note {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-300);
}

.prin__stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prin__stat-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.prin__stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--grey-400);
}

.prin__bar {
  width: 100%;
  height: 2px;
  background-color: #e2e0da;
}

.prin__bar-in {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--black);
  transition: width 1.2s var(--ease) 0.2s;
}

.prin__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.prin__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  border-radius: var(--radius-sm);
  overflow: clip;
  background-color: var(--grey-900);
}

.prin__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the card is far shorter than the still, so centre crops to the torso —
     bias up to keep the head and the glow behind it in frame */
  object-position: 50% 26%;
}

/* The still is a saturated orange, and a blurred veil over four-fifths of it
   turned the whole card brown. Ink only where the type sits, and no blur —
   the image is already motion, blurring it twice reads as a mistake. */
.prin__cover-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(8, 6, 4, 0) 0%,
      rgba(8, 6, 4, 0.18) 30%,
      rgba(8, 6, 4, 0.50) 62%,
      rgba(8, 6, 4, 0.72) 100%);
}

.prin__cover-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.75rem 4.5rem 2.75rem 2.75rem;
}

.prin__cover-quote {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 500;
  color: #fff;
}

.prin__cover-author {
  display: flex;
  flex-direction: column;
}

.prin__author-main {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}

.prin__title-main {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-50);
}

.prin__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  border-radius: var(--radius-sm);
  background-color: #fff;
  border: 1px solid var(--grey-50);
}

.prin__quote {
  font-size: 1.125rem;
  line-height: 1.4;
}


/* big numbers */
.prin__numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
}

.prin__number-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prin__big-number {
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}

.prin__big-number .odo {
  display: inline-flex;
  overflow: clip;
}

.prin__big-number .odo__digit {
  display: inline-flex;
  flex-direction: column;
  height: 1em;
  line-height: 1;
}

/* digits centre in their column, so while a column narrows to its landing
   digit a wider passing digit spills evenly both sides, not all to the right */
.prin__big-number .odo__digit span {
  display: flex;
  justify-content: center;
  height: 1em;
  line-height: 1;
}

.prin__number-desc {
  max-width: 15rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
}

.prin__legal {
  max-width: 34rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey-300);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing__panel {
  position: relative;
  border-radius: var(--radius-md);
  background-color: var(--black);
  color: var(--paper);
  padding: 6rem 3rem 5rem;
  overflow: clip;
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.pricing__heading {
  font-family: var(--font-display);
  font-size: min(15rem, 16vw);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}

.pricing__blocks {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 68rem;
  margin: -4rem auto 0;
}

.pricing__block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  padding: 7rem 3rem 3rem;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--white-15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.pricing__detail {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-200);
}

.pricing__detail--accent {
  color: var(--accent);
}

.pricing__value-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.pricing__plan-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}

.pricing__plan-info {
  color: var(--grey-400);
  margin-bottom: 1rem;
}

.pricing__value {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.375rem;
}

.pricing__money {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  font-weight: 600;
  color: var(--grey-50);
  font-variant-numeric: tabular-nums;
}

.pricing__rupee {
  font-size: 1.5rem;
  vertical-align: top;
  position: relative;
  top: 0.25rem;
}

.pricing__per {
  font-size: 1rem;
  font-weight: 500;
  color: var(--grey-400);
  padding-bottom: 0.375rem;
}

.pricing__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.pricing__divider-line {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted var(--grey-500);
}

.pricing__divider-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-300);
}

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.pricing__check {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.125rem;
  color: var(--grey-300);
  border: 1px solid var(--grey-500);
  border-radius: 0.25rem;
  padding: 0.125rem;
}

.pricing__feature-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-300);
}

.pricing__feature-text b {
  font-weight: 500;
  color: var(--grey-200);
}

.pricing__button-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
}

.pricing__guarantee {
  font-size: 0.75rem;
  text-align: center;
  color: var(--grey-300);
}

.pricing__info {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}

.pricing__info-text {
  max-width: 540px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--grey-300);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.faq__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 41.875rem;
  /* grid items default to min-width:auto, so the 6rem heading's min-content
     was inflating the 1fr track past the viewport on phones */
  min-width: 0;
}

.faq__heading {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: 0;
}

.faq__sub {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
}

.faq__media {
  min-height: 18rem;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: clip;
}

.faq__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.faq__accordion {
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  background-color: #fff;
  border: 1px solid var(--grey-50);
}

.faq__question-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  text-align: left;
}

.faq__num {
  font-family: var(--font-label);
  font-size: 0.875rem;
  color: var(--grey-300);
  flex: none;
  width: 1.25rem;
}

.faq__question {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}

.faq__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.faq__toggle-line {
  position: absolute;
  width: 1.25rem;
  height: 2px;
  background-color: var(--black);
  transition: transform 0.35s var(--ease-out-cubic);
}

.faq__toggle-line--v {
  transform: rotate(90deg);
}

.faq__accordion.is-open .faq__toggle-line--v {
  transform: rotate(0deg);
}

.faq__answer-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s var(--ease-out-cubic);
}

.faq__accordion.is-open .faq__answer-wrap {
  transition-duration: 0.38s;
}

.faq__answer {
  padding-top: 1rem;
  padding-left: 2.75rem;
  font-weight: 500;
  color: var(--grey-300);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  border-radius: var(--radius-lg);
  background-color: var(--black);
  overflow: clip;
}

/* dot-grid ground, faded toward the edges */
.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff26 1.5px, transparent 1.5px);
  background-size: 36px 40px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 40%, transparent 100%);
  pointer-events: none;
}

.cta__trail {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: clip;
  pointer-events: none;
}

/* one clone per spawn: a 0x0 anchor that travels from the previous
   cursor position to the current one while the image inside fades out */
.cta__trail-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.2s linear, transform 0.5s var(--ease-out-quad);
}

.cta__trail-item.is-live {
  opacity: 1;
}

.cta__trail img {
  flex: none;
  width: 40vw;
  min-width: 10rem;
  aspect-ratio: 2 / 2.7;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: opacity 0.2s linear, transform 0.2s var(--ease-out-quad);
}

.cta__trail img.is-out {
  opacity: 0;
  transform: scale(0.6);
}

.cta__marquee {
  position: absolute;
  top: 2rem;
  left: 50%;
  z-index: 3;
  width: 16.25rem;
  transform: translateX(-50%);
  overflow: clip;
  white-space: nowrap;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 50%, transparent);
  mask-image: linear-gradient(270deg, transparent, #000 50%, transparent);
}

.cta__marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: marquee-x 26s linear infinite;
}

.cta__marquee-text {
  padding-right: 0.75rem;
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.cta__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 52rem;
  padding: 2rem;
  text-align: center;
}

.cta__heading {
  font-family: var(--font-display);
  font-size: 5.5rem;
  /* the logotype's bracket rises above cap height — line-height 1 clipped it */
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}

.cta__mark {
  font-size: 2rem;
  vertical-align: top;
  position: relative;
  top: 0.5rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  padding-bottom: var(--pad-tiny);
}

.footer__wrap {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 4rem 2rem 0;
  overflow: clip;
}

.footer__main {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  gap: 3rem;
  align-items: start;
}

.footer__groups {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 3.5rem;
  justify-content: start;
}

.footer__group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__group-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--black);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #474747;
  transition: color 0.2s var(--ease);
}

a.footer__link:hover {
  color: var(--black);
}

.footer__link--static {
  color: var(--grey-300);
}

.footer__secondary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.footer__form {
  width: 100%;
}

.footer__field-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
}

.footer__field {
  flex: 1;
  min-width: 0;
  height: 3.5rem;
  padding-inline: 1.5rem;
  background-color: var(--grey-50);
  border: 1px solid var(--grey-50);
  border-radius: 1.125rem;
  color: var(--black);
  font-family: var(--font-body);
  /* stays >=16px so iOS Safari doesn't auto-zoom the viewport on focus */
  font-size: 1rem;
  font-weight: 500;
}

.footer__field::placeholder {
  color: var(--grey-300);
}

.footer__field:focus {
  outline: none;
  border-color: var(--grey-200);
}

.footer__field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--grey-200);
}

.footer__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--glass-ink);
  color: var(--black);
  border: 1px solid var(--glass-ink-line);
  border-radius: 1rem;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer__submit:hover {
  background-color: var(--glass-ink-hi);
  border-color: var(--glass-ink-line-hi);
}

.footer__form-msg {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.footer__form-msg--success {
  color: var(--grey-500);
}

.footer__form-msg--error {
  color: var(--accent);
}

/* ---------- footer: legal links above the rule, endorsement on the right ---------- */
.footer__brand-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

/* the wordmark is an SVG now — it needs a block box to fill, not a hugging flex item */
.footer__brand {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-bottom: 0;
}

/* The wordmark is a flex item in a column, so it was shrinking below its own
   aspect box and the legal links ended up sitting ON the logo's descenders.
   `flex: none` keeps the mark at full height; the bigger row gap plus the
   negative pull below move the links off the logo and down onto the rule,
   where they belong next to the copyright. */
.footer__brand {
  flex: none;
}

.footer__brand-row {
  gap: 3rem;
}

.footer__brand-row .footer__legal-links {
  align-self: flex-end;
}

.footer__brand-row + .footer__legal {
  margin-top: -4rem;
}

.footer__legal {
  align-items: flex-end;
}

.footer__copyright--group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  text-align: right;
}

@media (max-width: 700px) {
  .footer__brand-row { gap: 2rem; }
  .footer__brand-row .footer__legal-links { align-self: flex-start; }
  .footer__brand-row + .footer__legal { margin-top: -2.5rem; }
  .footer__copyright--group { margin-left: 0; }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px dotted var(--grey-100);
}

.footer__copyright {
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b6b6b;
}

.footer__legal-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__copyright--group {
  color: #0a0a0a;
  font-weight: 500;
}

.footer__copyright--group sup {
  font-size: 0.55rem;
}

/* ---------- inline logotype ---------------------------------------------
   The brand name is artwork, not type. Sized so the "O" cap height matches the
   surrounding cap height (ink box / cap height = 1.448; Inter cap = 0.727em),
   and shifted so the logo baseline lands on the text baseline. -------------- */
.wm {
  display: inline-block;
  height: 1.05em;
  line-height: 0;
  vertical-align: -0.185em;
  color: inherit;
}

.wm > svg {
  display: block;
  height: 100%;
  width: auto;
}

/* endorsement line: "A company of" + the Group lockup, never the typed name */
.footer__copyright--group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__endorse-mark {
  display: block;
  height: 3.25rem;
  line-height: 0;
  color: #0a0a0a;
}

.footer__endorse-mark > svg {
  display: block;
  height: 100%;
  width: auto;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer__legal-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b6b6b;
  transition: color 0.2s var(--ease);
}

a.footer__legal-link:hover {
  color: var(--black);
}

.footer__legal-divider {
  width: 1px;
  height: 1rem;
  background-color: var(--grey-200);
}

.footer__brand {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 20vw;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: auto;
  /* was -4.5vw to crop the descender whitespace of the old TEXT wordmark; the
     SVG's viewBox is tight, so that negative margin only dragged the legal
     links up onto the logo. */
  margin-bottom: 0;
}

.footer__brand .brand-mark { margin-right: 0.18em; }

.footer__brand-mark {
  font-size: 8vw;
  vertical-align: top;
  position: relative;
  top: 1.5vw;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  :root {
    --section-pad: 5.5rem;
    --pad-global: 2rem;
  }

  .nav__links { gap: 1.25rem; }

  .head-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .h3 { font-size: 2.5rem; }
  .h4 { font-size: 2rem; }

  .hero__card { padding-inline: 1.5rem; min-height: 32rem; }
  .hero__services { margin-inline: -1.5rem; padding-inline: 1.5rem; gap: 0 1.5rem; }
  .hero__subheading { --hero-subhead: clamp(2rem, 4.6vw, 2.9rem); max-width: 24rem; }

  .work__head {
    grid-template-columns: 1fr;
    gap: 3rem;
    justify-items: start;
  }
  .work__heading-wrap { justify-self: start; order: -1; }
  .work__heading { font-size: 5rem; }
  .work__head-meta { flex-direction: row; align-items: center; justify-self: start; }
  .work__item { height: auto; width: 100%; aspect-ratio: 16 / 9; max-height: none; }
  .work__item--cover { aspect-ratio: 16 / 10; }
  /* clear the fixed navbar before adding any air */
  .deckpage > .deckhead > .section-pad,
  .work-page > .section-pad { padding-top: 7.5rem; }
  .work__list { gap: 4rem; }

  .bento { grid-template-columns: 1fr; }
  .bento__chat, .bento__cta { aspect-ratio: 16 / 9; flex: none; }

  .about__grid { grid-template-columns: 1fr; gap: 3rem; }

  .svc__panel { padding: 2rem 1.5rem 3rem; }
  /* the stack IS this section — dropping to one column is no reason to lose it.
     Only the pin moves: a single-column card is much taller than a two-column
     one, so it is held higher up the screen to still clear the viewport before
     the next card rides over it */
  .svc__item { top: 10vh; }
  .svc__item-in { grid-template-columns: 1fr; }
  /* nothing stands beside the frame any more, so there is no text column left
     for it to match — the picture has to set its own height */
  .svc__media { order: -1; }

  .prin__main { grid-template-columns: 1fr; gap: 3rem; }
  .prin__head { max-width: 30rem; }
  .prin__big-number { font-size: 7rem; }

  .pricing__panel { padding: 4rem 1.5rem 4rem; }
  .pricing__blocks { grid-template-columns: 1fr; margin-top: -2rem; }
  .pricing__block { padding: 5.5rem 2rem 2.5rem; }

  .faq__grid { grid-template-columns: 1fr; }
  .faq__heading { font-size: 4rem; }
  .faq__media { min-height: 14rem; }

  .cta__heading { font-size: 4rem; }
  .cta__mark { font-size: 1.5rem; }

  .footer__main { grid-template-columns: 1fr; }
  .footer__groups { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; width: 100%; }
  .footer__secondary { max-width: 28rem; }

  .reel__flank { font-size: 2rem; }
  .reel__play-text { font-size: 2.25rem; }
}

@media (max-width: 767px) {
  :root {
    --section-pad: 4.5rem;
    --pad-global: 1.25rem;
  }

  .nav__links { display: none; }
  .nav_button { display: inline-flex; }
  /* brand + CTA + trigger have to share 350px at 390 — tighten the row gap
     rather than dropping the CTA off the phone header */
  .nav__row { gap: 0.75rem; }
  /* .nav__links is gone here, so space-between would strand the CTA mid-row —
     pin the CTA + trigger together on the right instead */
  .nav__cta { margin-left: auto; padding-inline: 1rem; }

  .hero__title { font-size: 14vw; }
  .hero__mark { font-size: 6vw; }
  /* one pinned line on a phone: scrolls sideways rather than shrinking the
     labels or forcing the bar to wrap into the hero content */
  .hero__services {
    display: flex;
    gap: 1.5rem;
    margin-inline: -1.25rem;
    padding: 0 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero__services::-webkit-scrollbar { display: none; }
  /* fills the bar when the four labels fit, scrolls sideways when they don't */
  .hero__service { flex: 1 0 auto; }
  .hero__service-text { white-space: nowrap; }
  /* the contact card reads as part of the statement, not as a second object
     floating in the hero — so the gap between them is tight and ALL of the
     free space is taken below the pair. `margin-block: auto 0` on the base rule
     pins the group to the foot of the card, so growing the bottom pad is what
     lifts the whole thing (about a tenth of the way up). It is measured in vh
     and floored in rem: a short phone has no spare height to give away, and a
     fixed lift there would shove the statement under the navbar */
  /* the statement and the contact card no longer travel together on a phone:
     the statement is held high in the field, and the card is dropped back down
     to sit just above the practices bar. The group is bottom-pinned
     (`margin-block: auto 0`), so the small bottom pad is what parks the card
     near the bar, and the large column GAP is what holds the statement up */
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 7.5rem; padding-bottom: 2.5rem; }
  /* `align-items: flex-start` on the column sized this to MAX-CONTENT, so the
     one-line h2 never wrapped and ran off the right edge — it needs the whole
     column width to break on */
  .hero__subheading { --hero-subhead: clamp(2.97rem, 12.04vw, 3.96rem); max-width: 100%; width: 100%; }
  /* top pad clears the overlaid navbar on a phone */
  .hero__card { padding: 6.5rem 1.25rem 0; border-radius: 0; min-height: 0; gap: 2rem; }
  /* the field fills far more of a portrait viewport than a landscape one, so
     the statement needs more ink under it here than on a desktop */
  .hero__shade {
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.12) 12%,
        rgba(0, 0, 0, 0.08) 24%,
        rgba(0, 0, 0, 0.58) 46%,
        rgba(0, 0, 0, 0.80) 70%,
        rgba(0, 0, 0, 0.90) 100%);
  }

  /* CONTACT CARD ON A PHONE
     Three stacked links at a 44px tap target each made the card 130px of links
     alone, so it out-shouted the statement it sits under. The targets stay 44px
     — the links just run as a wrapping ROW, which folds three rows into two,
     and the card takes the full column so there is room to wrap into */
  /* the block hugs its own content instead of stretching the column, so the
     card is as wide as its longest line and no wider */
  .hero__contact { width: auto; max-width: 100%; align-items: flex-end; gap: 0.75rem; }
  /* everything else — square stamp, card padding, one link per line — is the
     desktop treatment, inherited rather than restated here */
  .hero__contact-links a { font-size: 0.8125rem; }
  .hero__contact-cta { font-size: 0.8125rem; }

  .h3 { font-size: 2rem; }
  .h4 { font-size: 1.75rem; }

  .strip__cell { width: 11rem; }
  .strip__mark { width: 2.75rem; height: 2.75rem; }
  .strip__index { font-size: 1.5rem; }

  .work__heading { font-size: 3.5rem; }

  .bento__team, .bento__chat, .bento__cta { padding: 3.5rem 1.5rem 1.5rem; }
  .bento__chat, .bento__cta { aspect-ratio: auto; min-height: 15rem; }
  .bento__title { font-size: 1.375rem; }
  .bento__msg { font-size: 0.8125rem; }

  .about__quote-card { width: 88%; padding: 2rem 1.5rem 5rem; }

  .svc__title { font-size: 1.375rem; }

  .reel__wrap { height: 140rem; }
  .reel__stage { width: calc(46vw + 54vw * var(--e)); height: calc(30vh + 70vh * var(--e)); }
  /* no horizontal room to flank the chip on a phone, so the two labels stack
     above and below it — same fade-out against --e as on desktop, rather than
     dropping the "Keep scrolling" hint exactly where it is most useful */
  .reel__flank {
    font-size: 0.875rem;
    font-family: var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .reel__flank--left {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 0.75rem);
    transform: translateX(-50%);
  }
  .reel__flank--right {
    left: 50%;
    right: auto;
    top: calc(100% + 0.75rem);
    transform: translateX(-50%);
  }
  .reel__play-text { font-size: 1.75rem; }
  .reel__play { width: 3rem; }

  .prin__items { grid-template-columns: 1fr; }
  .prin__cover { min-height: 20rem; }
  .prin__cover-body { padding: 1.75rem; }
  .prin__cover-quote { font-size: 1.25rem; }
  .prin__card { padding: 1.75rem; gap: 3rem; }
  .prin__big-number { font-size: 4.5rem; }
  .prin__number-desc { font-size: 1.125rem; }
  .prin__numbers { flex-direction: column; }

  .pricing__heading { font-size: 22vw; }
  .pricing__block { padding: 5rem 1.5rem 2rem; }
  .pricing__money { font-size: 3rem; }

  .faq__heading { font-size: 2.75rem; }
  .faq__accordion { padding: 1.25rem 1rem; }
  .faq__question-row { gap: 0.75rem; }
  .faq__answer { padding-left: 2rem; }

  /* three columns in 350px squeezed each card to ~131px and pushed the third
     off-screen; stack them instead */

  .cta__heading { font-size: 2.75rem; }
  .cta__mark { font-size: 1.125rem; top: 0.25rem; }
  .cta__panel { min-height: 70vh; }
  .cta__trail img { min-width: 9rem; }

  .footer__wrap { padding: 3rem 1.25rem 0; gap: 3rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .footer__field-wrap { flex-direction: column; align-items: stretch; }
  /* the wrap turns into a COLUMN here, so `flex: 1` from the base rule starts
     governing HEIGHT and collapsed the field to its 22px content box —
     unreadable and far under a 44px tap target. Opt the field out of flex. */
  .footer__field { flex: none; width: 100%; height: 3.5rem; }
  .footer__submit { width: 100%; height: 3.25rem; }
}

/* ==========================================================================
   TOUCH TARGETS
   Text links on this site sit at 17-22px tall, which is fine for a mouse and
   too small for a thumb. Coarse pointers (and tablet widths) get a 44px hit
   area; the type and spacing are untouched, so the desktop layout is unchanged.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .nav__brand { min-height: 2.75rem; }

  /* horizontal row — the hit area can grow past the text without colliding
     with a neighbour, so expand it invisibly instead of moving the layout */
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2.75rem;
    transform: translateY(-50%);
  }

  /* stacked lists — these need real height, or the hit areas would overlap
     each other and the wrong link would win the tap */
  .footer__links { gap: 0; }
  .footer__link,
  .footer__legal-link,
  .contact-info__text,
  .hero__contact-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* stacked, the 44px targets already carry their own separation and any gap
     on top of it just made the card taller. Only the ROW gap is zeroed now —
     the phone hero runs these links as a wrapping row and needs the column gap
     to keep "Call +91 90199 10195" off "WhatsApp" */
  .hero__contact-links { row-gap: 0; }

  .btn-underline { min-height: 2.75rem; }

  /* the visually-hidden checkbox is toggled by its label — that's the target */
  .form-check { min-height: 2.75rem; }

}

/* ==========================================================================
   HERO CONTACT CARD — TIGHTER STACK ON TOUCH
   The 44px targets above stacked three links into ~130px of card, so
   "hello@ / Call / WhatsApp" read as three separate rows with a band of air
   between them instead of one block. Inside a card the only things that can be
   mis-tapped are each other, so 30px of height plus the card's padding is
   enough separation. The query MIRRORS the touch-target one (phones AND
   tablets AND any coarse pointer) and must sit AFTER it to win the cascade.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .hero__contact-links {
    gap: 0;
    margin-top: 0.5rem;
    padding-top: 0.375rem;
  }
  .hero__contact-links a { min-height: 1.375rem; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* the overlay still has to open — drop the wipe, keep the state change */
  .menu { clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; }
  .menu__link,
  .menu__foot { opacity: 1; transform: none; transition-delay: 0s; }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__marquee-track,
  .strip__track {
    animation: none;
  }

  .reel { --reel: 1 !important; --e: 1 !important; }
  .reel__wrap { height: auto; }
  .reel__sticky { position: static; height: 80vh; }
  .reel__flank { display: none; }

  .prin__bar-in { transition: none; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* ---------- studio hero ---------- */
.studio-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-top: 5rem;
  position: relative;
  overflow: clip;
}

.studio-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.studio-hero__headings {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: clip;
}

.studio-hero__title {
  font-family: var(--font-display);
  font-size: 11vw;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: 0;
}

.studio-hero__imgs {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1 / 1.2;
  height: 60vh;
  border-radius: 2vh;
  overflow: clip;
}

.studio-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-hero__infos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3rem;
}

.studio-hero__infos-in {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: end;
}

.studio-hero__info {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.studio-hero__info--center { text-align: center; }
.studio-hero__info--right { text-align: right; }

/* ---------- studio about panel ---------- */
.studio-about__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  border-radius: var(--radius-lg);
  background-color: var(--black);
  overflow: clip;
}

.studio-about__bg {
  position: absolute;
  inset: -10% 0 0 -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  filter: blur(20px);
}

.studio-about__block {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: calc(100% - 3rem);
  max-width: 40rem;
  padding: 3rem;
  border-radius: var(--radius-sm);
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--white-10);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}

.studio-about__title {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.studio-about__quote {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
}

.studio-about__subtitle {
  color: var(--white-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

/* ---------- studio team ---------- */
.studio-team {
  position: relative;
  height: 150vh;
  max-height: 110rem;
}

.studio-team__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}

.studio-team__heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 35rem;
  text-align: center;
}

.studio-team__img {
  position: absolute;
  width: 15%;
  max-width: 11.25rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.studio-team__img--center {
  z-index: 1;
  width: 24rem;
  max-width: 40%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

.studio-team__img--1 { top: 24%; right: 3%; z-index: 2; }
.studio-team__img--2 { top: 30%; left: 12%; }
.studio-team__img--3 { bottom: 11%; left: 4%; }
.studio-team__img--4 { bottom: 7%; right: 13%; z-index: 2; }

.studio-team__points {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 30%;
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  z-index: 3;
}

.studio-team__points--right {
  left: auto;
  right: 0;
  padding-left: 0;
  padding-right: 3rem;
  align-items: flex-end;
  text-align: right;
}

.studio-team__point {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 18rem;
}

.studio-team__point-num {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: var(--accent);
}

.studio-team__point-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}

/* ---------- studio members ---------- */
.members__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.875rem;
}

.members__item {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  border: 1px solid var(--grey-50);
}

.members__pic {
  width: 5rem;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  object-fit: cover;
}

.members__infos {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  padding-top: 0.25rem;
  padding-right: 0.25rem;
}

.members__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.members__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}

.members__position {
  color: var(--grey-300);
  font-size: 0.875rem;
  font-weight: 600;
}

.members__arrow {
  color: var(--grey-300);
  transition: color 0.2s var(--ease), transform 0.3s var(--ease);
}

.members__item:hover .members__arrow {
  color: var(--black);
  transform: translate(2px, -2px);
}

/* ---------- studio approach ---------- */
.approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.approach__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.approach__media {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
  transition: transform 1.1s var(--ease-out-cubic);
}

.js [data-reveal] .approach__media { transform: scale(1.12); }
.js [data-reveal].is-in .approach__media { transform: scale(1); }

.approach__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.approach__item:hover .approach__img {
  transform: scale(1.03);
}

.approach__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.approach__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
}

.approach__text {
  font-weight: 500;
  color: var(--grey-400);
}

/* ---------- studio record (awards analogue) ---------- */
.record__panel {
  border-radius: var(--radius-md);
  background-color: var(--black);
  color: var(--paper);
  padding: 4rem 3rem;
}

.record__heading {
  max-width: 50rem;
  color: #fff;
}

.record__rows {
  display: flex;
  flex-direction: column;
}

.record__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
  padding-block: 0.5rem;
  border-top: 1px dotted var(--grey-500);
}

.record__row--head {
  border-top: none;
}

.record__data {
  color: var(--grey-250, grey);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-300);
}

.record__data--strong {
  color: var(--paper);
}

.record__data--label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-400);
}

/* ---------- case study (work detail) ---------- */
.case-hero__component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.case-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 50rem;
}

.case-hero__meta {
  display: flex;
  align-items: center;
  gap: 2.75rem;
}

.pill {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.35rem 1.125rem;
  border-radius: 15rem;
  background-color: #e7e6e0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pill__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.pill__text {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.case-hero__info {
  color: #6b6b6b;
  font-size: 0.875rem;
  font-weight: 500;
}

.case-hero__title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0;
}

.case-hero__media {
  position: relative;
  aspect-ratio: 2;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.case-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-body__grid {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 3rem;
  align-items: start;
}

.case-body__content {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.75rem;
  max-width: 21.875rem;
}

.case-body__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.case-body__heading {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
}

.case-body__text {
  font-weight: 500;
  color: var(--grey-400);
}

.case-body__imgs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.case-body__img-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.case-body__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-full {
  position: relative;
  aspect-ratio: 2;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: clip;
}

.case-full__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-results {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: end;
}

.case-results__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.75rem;
  max-width: 26rem;
}

.case-results__meta {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.case-results__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  border-top: 1px dotted var(--grey-200);
}

.case-results__meta-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.case-results__meta-value {
  font-size: 0.875rem;
  font-weight: 500;
}

.container--tiny {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}

.case-next {
  display: block;
}

.case-next__infos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.case-next__label {
  font-weight: 500;
}

.case-next__media {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: clip;
}

.case-next__img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.case-next:hover .case-next__img {
  transform: scale(1.03);
}

.post-hero__component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.post-hero__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.post-hero__date {
  color: var(--grey-300);
  font-size: 0.875rem;
  font-weight: 500;
}

.post-hero__title {
  max-width: 56rem;
}

.post-hero__desc {
  max-width: 40rem;
  font-weight: 500;
  color: var(--grey-400);
}

.post-hero__media {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.post-hero__img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.container--small {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
}

.post-body {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.post-body__section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.post-body__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
}

.post-body__text {
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--grey-500);
}

.post-body__quote {
  padding-left: 1.5rem;
  border-left: 2px solid var(--black);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

/* ---------- contact ---------- */
.contact-hero {
  overflow: clip;
}

.contact-hero__marquee {
  overflow: clip;
  width: 100%;
}

.contact-hero__track {
  display: flex;
  width: max-content;
  animation: marquee-x 22s linear infinite;
}

.contact-hero__text {
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  padding-right: 2rem;
}

.contact-infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
}

.contact-info__text {
  font-size: 1rem;
  font-weight: 700;
}

.contact-info__sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-400);
}

.form-card {
  width: 100%;
  border-radius: 1rem;
  background-color: #fff;
  border: 1px solid var(--grey-50);
  overflow: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form-cell {
  border-bottom: 1px solid var(--grey-200);
}

.form-cell--divide {
  border-right: 1px solid #dadada;
}

.form-cell--full {
  grid-column: 1 / -1;
}

.form-cell:focus-within {
  border-bottom: 2px solid var(--black);
  margin-bottom: -1px;
}

.form-label-wrap {
  padding: 1.75rem 2rem 0.125rem;
}

.form-label {
  color: #101010;
  font-weight: 600;
}

.form-field {
  display: block;
  width: 100%;
  height: 5rem;
  padding: 0.5rem 2rem;
  background-color: transparent;
  border: none;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

.form-field:focus {
  outline: none;
}

/* 16px minimum on touch, or iOS Safari zooms the viewport on focus and never
   zooms back out. Declared here (after the 0.875rem base) so it actually wins. */
@media (max-width: 1024px), (pointer: coarse) {
  .form-field { font-size: 1rem; }
}

.form-field::placeholder {
  color: #9e9b8f;
}

.form-field--message {
  height: 12rem;
  padding-top: 1.125rem;
  resize: none;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.75rem 1.75rem 2.5rem;
}

.form-check {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.form-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.form-check__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.2s var(--ease);
}

.form-check__mark svg {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.form-check input:checked + .form-check__mark {
  background-color: var(--black);
}

.form-check input:checked + .form-check__mark svg {
  opacity: 1;
}

.form-check input:focus-visible + .form-check__mark {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.form-check__label {
  color: #101010;
  font-size: 0.875rem;
  font-weight: 500;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: var(--grey-600);
  color: #fff;
  border: none;
  border-radius: 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.btn-dark:hover {
  background-color: var(--black);
}

.form-msg {
  font-size: 0.875rem;
  font-weight: 500;
}

.form-msg--success {
  color: var(--grey-500);
}

.form-msg--error {
  color: var(--accent);
}

/* ---------- inner pages responsive ---------- */
@media (max-width: 991px) {
  .studio-hero__title { font-size: 13vw; }
  .studio-hero__imgs { height: 46vh; }
  .studio-team { height: 120vh; }
  .studio-team__points { position: static; width: 100%; padding: 0 3rem; margin-top: 1rem; }
  .studio-team__sticky { display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
  .studio-team__heading { position: static; transform: none; margin-inline: auto; }
  .members__grid { grid-template-columns: 1fr 1fr; }
  .approach__grid { grid-template-columns: 1fr; }
  .case-body__grid { grid-template-columns: 1fr; }
  .case-body__content { position: static; max-width: 34rem; }
  .case-results { grid-template-columns: 1fr; align-items: start; }
  .contact-hero__text { font-size: 14vw; }
}

@media (max-width: 767px) {
  .studio-hero__infos-in { grid-template-columns: 1fr; gap: 0.5rem; }
  .studio-hero__info--center, .studio-hero__info--right { text-align: left; }
  .studio-team__img { display: none; }
  .studio-team__img--center { display: block; position: static; transform: none; width: 100%; max-width: 20rem; margin-inline: auto; opacity: 1; }
  .studio-team { height: auto; }
  .studio-team__sticky { position: static; height: auto; padding-block: 3rem; }
  .studio-team__points { flex-direction: column; align-items: flex-start; text-align: left; padding: 0 1.25rem; }
  .studio-team__points--right { align-items: flex-start; }
  .studio-about__block { padding: 2rem 1.5rem; }
  .members__grid { grid-template-columns: 1fr; }
  .record__panel { padding: 2.5rem 1.25rem; }
  .record__row { grid-template-columns: 1fr 1fr; }
  .case-hero__title { font-size: 2rem; }
  .case-hero__meta { flex-wrap: wrap; gap: 1rem; }
  .case-body__heading { font-size: 1.75rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-cell--divide { border-right: none; }
  .form-label-wrap { padding: 1.25rem 1.25rem 0.125rem; }
  .form-field { padding: 0.5rem 1.25rem; height: 4rem; }
  .post-hero__title { font-size: 2rem; }
}

/* Openn(tm) wordmark superscript — restored per user spec (capital O + TM, no brackets) */
.wm-tm {
  font-size: 0.34em;
  vertical-align: super;
  letter-spacing: 0;
  line-height: 0;
}

/* ==========================================================================
   READING (typography pass)
   One job: make running text comfortable and stop lines breaking in ugly
   places. Measure first, then size, then wrapping. Nothing here changes a
   colour or a weight — this is about the shape of the paragraph.
   ========================================================================== */

/* Headings and short leads get `balance`: the browser evens the line lengths
   instead of leaving a single orphaned word on the last line. Capped at four
   lines by the spec, which is exactly the range these live in. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.hero__subhead,
.post-hero__title,
.post-hero__desc,
.post-body__heading,
.post-body__quote,
.about__quote,
.faq__heading,
.cta__heading,
.svc__name,
.strip__name,
.prin__quote,
.contact-hero__text {
  text-wrap: balance;
}

/* Running text gets `pretty`: same line-breaking as normal, minus the widow
   on the final line and minus a break that strands a short word. */
p,
li,
.post-body__text,
.about__body,
.faq__answer,
.svc__desc,
.strip__desc,
.contact-info__text {
  text-wrap: pretty;
}

/* an email address or a URL must never widen its column */
.contact-info__text,
.footer__link {
  overflow-wrap: anywhere;
}

/* ---------- article measure ---------- */
/* 44rem at 17px ran to roughly 80 characters a line, which is past the point
   where the eye starts losing its place on the return sweep. 38rem at 18px
   lands near 66, and the extra leading buys the rest. The column stays
   centred in the page -- that is the reading layout the post was built
   around, and left-aligning it under a full-width hero read as broken. */
.post-body {
  max-width: 38rem;
  margin-inline: auto;
  gap: 3.5rem;
}

.post-body__section {
  gap: 1.15rem;
}

.post-body__text {
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--grey-500);
}

.post-body__heading {
  font-size: 1.625rem;
  line-height: 1.22;
  /* a heading needs more air above it than below: it belongs to the text that
     follows, not to the paragraph it just interrupted */
  margin-top: 0.5rem;
}

.post-body__quote {
  font-size: 1.375rem;
  line-height: 1.35;
  margin-block: 0.75rem;
}

/* ---------- post lede ---------- */
.post-hero__desc {
  max-width: 38rem;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 500;
}

@media (max-width: 767px) {
  .post-body__text { font-size: 1.0625rem; line-height: 1.68; }
  .post-hero__desc { font-size: 1.125rem; }
  .post-body__heading { font-size: 1.375rem; }
  .post-body__quote { font-size: 1.1875rem; }
}

/* ==========================================================================
   POST SPACING
   The navbar is fixed and about 78px tall, so a 5rem opener left the first
   line of a post sitting right under it with no air. This gives the long-form
   pages (privacy, terms) a proper top edge.
   ========================================================================== */
.post-hero > .section-pad,
.post-hero > .section-pad--small {
  padding-top: 9.5rem;
}

/* post meta row: give the pill, date and byline room to breathe */
.post-hero__infos {
  row-gap: 0.75rem;
}

.lab-more {
  border-top: 1px solid var(--grey-100);
  padding-top: 5rem;
}

/* The navbar is FIXED, so it takes no flow space and the first section slides
   underneath it. Any opener here has to clear the navbar's own height before
   it starts adding air — which is why these are larger, not smaller, than the
   desktop step would suggest. */
@media (max-width: 1024px) {
  .post-hero > .section-pad,
  .post-hero > .section-pad--small { padding-top: 8rem; }
  .lab-more { padding-top: 4.5rem; }
}

@media (max-width: 767px) {
  .post-hero > .section-pad,
  .post-hero > .section-pad--small { padding-top: 7.5rem; }
  .lab-more { padding-top: 3.5rem; }
}

/* ==========================================================================
   REACH CHOOSER
   "Get in touch" asks how first: email, call, WhatsApp, or send a brief.
   Desktop anchors it under whichever button opened it; below 768px it is a
   bottom sheet, because a popover pinned to a 40px button on a phone is a
   popover nobody can hit.
   ========================================================================== */
.reach[hidden] {
  display: none;
}

.reach {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.reach__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.reach.is-open .reach__scrim {
  opacity: 1;
}

.reach__panel {
  position: absolute;
  /* set from JS against the trigger's rect */
  top: var(--reach-top, 50%);
  left: var(--reach-left, 50%);
  width: 22rem;
  max-width: calc(100vw - 2rem);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-100);
  background-color: var(--paper);
  transform: translateY(-0.5rem);
  opacity: 0;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.reach.is-open .reach__panel {
  transform: translateY(0);
  opacity: 1;
}

.reach__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grey-100);
}

.reach__title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-300);
}

.reach__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.25rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--grey-300);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.reach__close:hover {
  color: var(--black);
}

.reach__close svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.reach__list {
  display: flex;
  flex-direction: column;
}

.reach__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.reach__item:hover {
  background-color: var(--grey-50);
}

.reach__item-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
}

.reach__item-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-300);
  overflow-wrap: anywhere;
}

.reach__brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grey-100);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--grey-400);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.reach__brief:hover {
  color: var(--black);
}

.reach__brief-arrow {
  transition: transform 0.3s var(--ease);
}

.reach__brief:hover .reach__brief-arrow {
  transform: translateX(0.25rem);
}

@media (max-width: 767px) {
  .reach__panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .reach.is-open .reach__panel {
    transform: translateY(0);
  }
  .reach__item {
    padding-block: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reach__scrim,
  .reach__panel {
    transition: none;
  }
}

/* ==========================================================================
   Analytics consent
   Asked once, before anything from Google is fetched. Deliberately quiet: it
   sits in the corner rather than across the page, because a bar that blocks the
   site pressures the answer, and a pressured yes is not consent.
   ========================================================================== */
.consent {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 26rem;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.consent.is-open {
  opacity: 1;
  transform: translateY(0);
}

.consent__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grey-500);
}

.consent__link {
  color: var(--grey-900);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* the two halves of the foot: what this is on the left, the answer on the right */
.consent__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.consent__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.consent__btn {
  flex: 0 0 auto;
  padding: 0.75rem 1.125rem;
  min-height: 2.75rem;
  background-color: transparent;
  color: var(--grey-900);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.consent__btn:hover {
  border-color: var(--grey-200);
  background-color: var(--grey-50);
}

.consent__btn--primary {
  background-color: var(--grey-600);
  border-color: var(--grey-600);
  color: #fff;
}

.consent__btn--primary:hover {
  background-color: var(--grey-900);
  border-color: var(--grey-900);
}

@media (min-width: 40em) {
  .consent {
    right: 1.5rem;
    bottom: 1.5rem;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: none;
  }
}

/* Honeypot wrapper. Global, not page-scoped: the newsletter form in the footer
   carries one on every page, and a page that failed to load this rule would
   show visitors a stray "Website" input. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the standing line under the newsletter field — the footer is light, so this
   follows the same grey scale the success message uses, not the white one */
.footer__form-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey-400);
}

.footer__form-note a {
  color: var(--grey-900);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   FOOTER — brand block, link columns, and the horizon
   The wordmark is not painted ON the picture: the same photograph is laid down
   twice and the top copy is a cut-out that carries the ridge line, so the type
   sits in the sky and the grass rises in front of it. Both copies use the same
   object-fit and object-position, which is what keeps them registered.
   ========================================================================== */
.footer__top {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) 1fr;
  gap: 4rem 5rem;
  align-items: start;
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.footer__logo .brand-logo { height: 2.1rem; }

.footer__tagline {
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #6b6b6b;
}

/* the form is a block in the brand column now, not its own right-hand panel */
.footer__brand-col .footer__form { width: 100%; max-width: 22rem; }

.footer__channels {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: -0.5rem;
}

.footer__channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  color: #6b6b6b;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.footer__channel > svg { width: 1.125rem; height: 1.125rem; }

.footer__channel:hover { color: var(--black); background-color: var(--grey-50, #f4f3ef); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
}

/* the legal line rides ON the grass now: copyright left, endorsement right,
   sitting on the bottom edge of the picture and above every layer of it */
.footer__horizon .footer__legal {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0 2rem 1.75rem;
  border-top: 0;
  text-align: left;
}

.footer__horizon .footer__copyright { color: #fff; }

.footer__horizon .footer__copyright--group {
  margin-left: 0;
  color: #fff;
  text-align: right;
}

/* the Group lockup is ink-on-paper artwork — over the grass it has to go white,
   brackets included, or the accent reads as a stain on the green */
.footer__horizon .footer__endorse-mark {
  color: #fff;
  --wm-accent: #fff;
}

/* ---------- the horizon ---------- */
.footer__horizon {
  position: relative;
  /* full-bleed inside the rounded white card, which pads 2rem a side */
  width: calc(100% + 4rem);
  /* the card already ends flush here (wrap padding-bottom is 0) */
  margin: 0 -2rem;
  /* a band, not the whole plate — the crop is anchored to the ground so the
     empty upper sky is what gets cut, and the ridge lands mid-band */
  aspect-ratio: 2400 / 1080;
  overflow: clip;
  /* the sky has to arrive out of the white card, not butt against it */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
}

.footer__horizon-field,
.footer__horizon-hills {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* identical on both copies — this is what keeps the cut-out registered.
     Anchored to the ground, so the crop only ever takes empty sky off the top */
  object-position: 50% 100%;
}

.footer__horizon-hills { z-index: 2; }

/* white type on sunlit grass has almost no contrast — this is a scrim, not a
   shadow: it darkens the ground the line sits on and fades out well before the
   ridge, so the picture is untouched where it matters */
.footer__horizon::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(12, 32, 8, 0.55), rgba(12, 32, 8, 0) 100%);
}

.footer__horizon-mark {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  /* the letters stand ON the ridge: bottom-anchored so the grass takes their feet */
  bottom: 22%;
  width: 90%;
  height: auto;
  color: #fff;
  --wm-accent: #fff;
  opacity: 0.94;
}

@media (max-width: 991px) {
  .footer__top { grid-template-columns: 1fr; gap: 3rem; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 767px) {
  /* the card's side padding drops on a phone — the bleed has to match it */
  .footer__horizon { width: calc(100% + 2.5rem); margin-inline: -1.25rem; }
  /* only a little taller than the plate's own ratio: push it much past that and
     `cover` starts scaling to HEIGHT, which zooms the hills and throws the
     wordmark out of its relationship with the ridge */
  .footer__horizon { aspect-ratio: 2400 / 1750; }
  .footer__horizon-mark { width: 84%; bottom: 34%; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }

  /* the two legal lines have no room to sit side by side — they stack, but each
     keeps its own edge: copyright left, endorsement right */
  .footer__horizon .footer__legal {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem;
  }
  .footer__horizon .footer__copyright--group { align-self: flex-end; }
  .footer__horizon .footer__endorse-mark { height: 2.25rem; }
}

/* ---------- media: no casual saving (see script.js) ----------
   Stops pictures being dragged out of the page and the iOS long-press
   "Save Image" sheet. A deterrent only — it is not, and cannot be, protection. */
img,
video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ---------- translation offer (script.js) ----------
   Bottom-left: the consent card and the floating contact card both live on the
   right. On phones those two take the whole foot, so the offer sits just under
   the nav instead. */
.translate-offer {
  position: fixed;
  z-index: 59;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid var(--grey-100);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--grey-500);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.translate-offer.is-open {
  opacity: 1;
  transform: translateY(0);
}

.translate-offer__link {
  color: var(--grey-900);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.translate-offer__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--grey-50);
  color: var(--grey-900);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  .translate-offer {
    top: 4.75rem;
    right: 1rem;
    bottom: auto;
    left: 1rem;
    justify-content: space-between;
    transform: translateY(-0.75rem);
  }

  .translate-offer__close {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .translate-offer { transition: none; }
}