/* ==========================================================================
   BMS tonal system
   --------------------------------------------------------------------------
   The brand colours are unchanged: mint, navy, cream. What changed is that
   each of them is now a family rather than one flat value, so a surface can
   sit a few percent above or below its neighbour instead of every panel
   landing on the exact same colour.

   One colour has been added: the pink of the Pink Ghost mascot, sampled from
   images/ghost.png. It is an accent, not a fourth brand colour — see the ghost
   pink family below for where it is allowed to appear.

   Read the families as: highlight -> base -> dark -> deep -> deeper/abyss,
   plus soft/muted tints for large low-contrast areas.
   ========================================================================== */
:root {
  /* --- mint family (accent) ------------------------------------------- */
  --mint-bright: #9cf0d2;   /* highlight  */
  --mint: #79cbb2;          /* base       */
  --mint-dark: #63b39b;     /* dark       */
  --mint-deep: #3f8a72;     /* deep       */
  --mint-soft: #e3f3ec;     /* soft tint  */
  --mint-muted: #cbe7dc;    /* muted tint */
  --tint: #edf5f1;          /* section-level mint wash (was #eef6f2)   */
  --tint-deep: #e4f0ea;     /* one step down from the mint wash        */

  /* --- ghost pink family (mascot accent) ------------------------------- */
  /* Sampled from the Pink Ghost in images/ghost.png: #f6afee is its linework,
     #f8d4ee its body fill. The mid and deep steps hold the same hue (~314) and
     are darkened only so the colour can carry text and hairlines on cream —
     --pink-deep is 5.6:1 on the page background, 4.9:1 on the deepest light
     surface. The mascot already pairs this pink with a green a shade off the
     BMS mint, which is why the two accents sit together without fighting.

     Scope: small details only — numerals, arrows, link and card hover, and
     hairline highlights. Mint stays the identity accent and owns anything
     large or filled (primary buttons, active nav, section washes). Pink never
     fills a large area and never becomes a section background. */
  --pink-bright: #f6afee;   /* mascot linework — accent on navy        */
  --pink: #d84fb8;          /* mid — the rgba() hairlines below use it */
  --pink-deep: #a72f8b;     /* text-safe on cream (5.6:1)              */
  --pink-shade: #85236e;    /* hover / pressed on light                */
  --pink-soft: #f7e9f4;     /* soft tint  — mirrors --mint-soft        */
  --pink-muted: #f0dbeb;    /* muted tint — mirrors --mint-muted       */

  /* --- navy family (primary) ------------------------------------------ */
  --navy-highlight: #2d5296;
  --navy: #213f78;          /* base       */
  --navy-dark: #1a3364;
  --navy-deep: #12264f;     /* deep       */
  --navy-deeper: #0d1c3e;
  --navy-abyss: #08132c;    /* deepest surface on the site (footer)    */

  /* --- paper family (light surfaces) ---------------------------------- */
  /* Cards are a warm off-white rather than #fff so they read as paper lit
     from above instead of as cut-out browser chrome. */
  --paper-lit: #ffffff;     /* interactive / raised    */
  --paper: #fcfaf5;         /* content surface         */
  --cream: #f7f5ef;         /* page background         */
  --cream-deep: #f0ede4;    /* deeper section surface  */
  --cream-shade: #e9e5da;   /* deepest light surface   */

  /* --- ink and text intensity ----------------------------------------- */
  /* Navy-tinted near-black rather than a neutral slate, so body copy belongs
     to the same colour family as the dark surfaces. */
  --ink: #141c30;                        /* primary   — full intensity */
  --ink-soft: rgba(20, 28, 48, 0.76);    /* secondary — ~76%           */
  --ink-meta: rgba(20, 28, 48, 0.64);    /* metadata  — ~64%           */
  --muted: #58627a;
  --white: #ffffff;
  --on-dark: rgba(255, 255, 255, 0.94);      /* primary on navy   */
  --on-dark-soft: rgba(226, 236, 250, 0.78); /* secondary on navy */
  --on-dark-meta: rgba(226, 236, 250, 0.55); /* metadata on navy  */

  /* --- hairlines ------------------------------------------------------- */
  /* Borders are derived from the surface they sit on and are meant to be felt
     rather than seen. */
  --line: rgba(18, 38, 79, 0.12);
  --line-soft: rgba(18, 38, 79, 0.07);
  --line-strong: rgba(18, 38, 79, 0.18);
  --line-on-dark: rgba(255, 255, 255, 0.10);
  --line-on-dark-strong: rgba(255, 255, 255, 0.17);

  /* --- light and shadow ------------------------------------------------ */
  /* Depth comes from colour and light first; shadows are wide, low-opacity
     and navy-tinted so nothing looks like a floating app card. */
  --shadow-xs: 0 1px 2px rgba(13, 28, 64, 0.05);
  --shadow-sm: 0 1px 2px rgba(13, 28, 64, 0.04), 0 10px 28px rgba(13, 28, 64, 0.06);
  --shadow-md: 0 2px 5px rgba(13, 28, 64, 0.05), 0 18px 46px rgba(13, 28, 64, 0.08);
  --shadow-lg: 0 3px 8px rgba(13, 28, 64, 0.05), 0 30px 72px rgba(13, 28, 64, 0.11);
  --shadow-dark-sm: 0 1px 2px rgba(3, 10, 26, 0.30), 0 14px 36px rgba(3, 10, 26, 0.26);
  --shadow-dark-lg: 0 3px 10px rgba(3, 10, 26, 0.34), 0 36px 84px rgba(3, 10, 26, 0.40);
  /* A one-pixel lit edge along the top of a surface: the cheapest way to make
     a panel read as a physical object catching light from above. */
  --edge-lit: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --edge-lit-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* --- grain ----------------------------------------------------------- */
  /* Fine monochrome noise, applied once as a fixed overlay at ~2% so large
     flat areas stop reading as pure digital colour. Not a filter, not a
     texture effect — it should vanish under inspection. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");

  /* Focus indicators. Same mint, chosen at the depth that actually reads
     against the surface behind it: 4:1 on paper, 11:1 on navy. */
  --focus: var(--mint-deep);
  --focus-on-dark: var(--mint-bright);

  --radius: 24px;
  --radius-lg: 36px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* LEVEL 0 — page background.
   The cream is unchanged, but it is now lit: a soft key light from the upper
   left, a faint mint bounce from the right, and a slight fall-off toward the
   bottom of the viewport. Fixed attachment keeps the light source still while
   content scrolls past it, which is what makes the page feel like a lit
   surface rather than a coloured rectangle. */
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(1150px 760px at 6% -8%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(900px 640px at 104% 10%, rgba(121, 203, 178, 0.10), transparent 58%),
    radial-gradient(1100px 720px at 50% 112%, rgba(18, 38, 79, 0.055), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* The grain layer. One fixed plane over the whole viewport so every surface
   shares the same texture and nothing has to opt in. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.035;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 82px;
  padding: 12px clamp(22px, 6vw, 88px);
  /* LEVEL 1 over the page: the header is its own surface, a touch deeper than
     the hero behind it, with a lit top edge and a soft fall-off underneath so
     the page appears to pass beneath it. Layout is untouched. */
  background-color: rgba(15, 32, 66, 0.86);
  background-image: linear-gradient(180deg, rgba(33, 63, 120, 0.55), rgba(8, 19, 44, 0.55));
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  backdrop-filter: blur(18px);
  box-shadow: var(--edge-lit-dark), 0 1px 0 rgba(8, 19, 44, .5), 0 18px 44px rgba(6, 16, 38, .22);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  text-decoration: none;
}
.brand img {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(4, 12, 30, .34), 0 0 0 1px rgba(255, 255, 255, .08);
}
.brand span {
  color: var(--mint);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 900;
  letter-spacing: .015em;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  padding: 10px 13px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav a:hover,
.nav a.active {
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--mint-bright), var(--mint));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(63, 138, 114, .28);
}
.nav a:active { transform: translateY(0); background: var(--mint-dark); box-shadow: none; }
.nav a:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  box-shadow: var(--edge-lit-dark);
  color: var(--mint-bright);
  font-size: 25px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.menu-toggle:hover { background: rgba(255,255,255,.13); border-color: rgba(156,240,210,.34); }
.menu-toggle:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }

.section { padding: clamp(76px, 10vw, 132px) clamp(22px, 7vw, 104px); }
/* LEVEL 0/1 on dark pages.
   Same navy as before, lit rather than filled: a broad key from the upper
   left, a tighter mint bounce top right, and the base graded from navy-dark
   at the top to navy-deeper at the bottom so the section has a floor. */
.section-dark {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-deep);
  background-image:
    radial-gradient(120% 95% at 14% -10%, rgba(156, 240, 210, .085), transparent 58%),
    radial-gradient(70% 60% at 84% 12%, rgba(121, 203, 178, .17), transparent 48%),
    linear-gradient(168deg, var(--navy-dark) 0%, var(--navy-deep) 52%, var(--navy-deeper) 100%);
  background-repeat: no-repeat;
  color: var(--on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
/* Dark sections that follow one another get a hairline of light between them
   instead of a hard cut. */
.section-dark + .section-dark { border-top: 1px solid rgba(255, 255, 255, .05); }
.section-dark::after {
  content: "";
  position: absolute;
  inset: auto -120px -180px auto;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(156,240,210,.10);
  border-radius: 50%;
  pointer-events: none;
}
.section-heading { max-width: 800px; margin-bottom: 42px; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--mint-bright);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 950;
}
h1, h2, h3 { line-height: 1.06; margin: 0 0 18px; letter-spacing: -.035em; }
h1 { font-size: clamp(52px, 8.5vw, 108px); max-width: 980px; }
h2 { font-size: clamp(36px, 5.4vw, 66px); }
h3 { font-size: clamp(22px, 2.5vw, 29px); }
p { max-width: 820px; }

.hero {
  min-height: calc(100vh - 82px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
  padding: clamp(68px, 8vw, 112px) clamp(22px, 7vw, 104px);
}
.hero-text { position: relative; z-index: 2; }
.tagline { font-size: clamp(20px, 2.6vw, 32px); line-height: 1.35; color: rgba(255,255,255,.82); }
.hero-buttons { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.hero-art { position: relative; z-index: 2; }
.hero-art img {
  width: 100%;
  max-height: 650px;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(4, 12, 30, .34));
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px) rotate(.5deg); } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, background-image .2s ease, border-color .2s ease, color .2s ease;
}
/* Buttons keep their shape and position. Only the colour behaves differently:
   a default that is lit from above, a hover one tone brighter, an active state
   one tone deeper with the lift removed, and a visible focus ring. All four
   states are drawn from the mint and navy families. */
.btn.primary {
  background-color: var(--mint);
  background-image: linear-gradient(180deg, #8bd8bf, var(--mint));
  border-color: rgba(18, 38, 79, .08);
  color: var(--navy-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px rgba(63, 138, 114, .24);
}
.btn.primary:hover { background-image: linear-gradient(180deg, var(--mint-bright), #82d0b7); }
.btn.primary:active {
  background-image: none;
  background-color: var(--mint-dark);
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(13, 60, 46, .22);
}
.btn.secondary {
  border-color: var(--line-on-dark-strong);
  background: rgba(255, 255, 255, .06);
  box-shadow: var(--edge-lit-dark);
  color: inherit;
}
.btn.secondary:hover { background: rgba(255, 255, 255, .12); border-color: rgba(156, 240, 210, .42); }
.btn.secondary:active { background: rgba(255, 255, 255, .04); transform: translateY(0); box-shadow: none; }
.btn.small { margin-top: 14px; background: var(--navy); color: var(--white); box-shadow: var(--shadow-xs); }
.btn.small:hover { background: var(--navy-highlight); }
.btn.small:active { background: var(--navy-deep); transform: translateY(0); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13, 28, 64, .14); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.section-dark .btn:focus-visible, .footer .btn:focus-visible { outline-color: var(--mint-bright); }

.project-grid, .team-grid, .support-grid, .news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
/* LEVEL 2 — content surface.
   Paper, not white; a one-pixel lit edge along the top; a hairline borrowed
   from the navy rather than a grey. The card sits just above the section
   instead of floating over it. */
.project-card, .team-card, .support-card, .news-card {
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 58%);
  color: var(--ink);
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--edge-lit), var(--shadow-sm);
}
.project-card { transition: transform .25s ease, box-shadow .25s ease; }
/* LEVEL 3 — interactive. The surface brightens toward the top and the
   hairline picks up the accent; the shadow widens rather than darkens. */
.project-card:hover {
  transform: translateY(-9px);
  border-color: rgba(121, 203, 178, .38);
  box-shadow: var(--edge-lit), var(--shadow-lg);
}
.project-card a { display: block; height: 100%; }
.poster {
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  margin-bottom: 22px;
  /* An inner edge rather than an outer shadow: the artwork keeps its own
     boundary without being lifted off the card. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -60px 90px -60px rgba(4, 12, 30, .55);
}
.placeholder {
  background:
    radial-gradient(circle at 72% 22%, rgba(156,240,210,.55), transparent 23%),
    linear-gradient(145deg, var(--navy-deep), var(--navy) 58%, #2f7890);
  color: var(--mint-bright);
  display: grid;
  place-items: center;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}

.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(34px, 7vw, 90px); align-items: start; }
.role { color: var(--navy); font-weight: 900; }
.support-section {
  background-color: var(--mint-muted);
  background-image:
    radial-gradient(90% 80% at 20% 8%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(135deg, var(--mint-soft), var(--mint-muted));
}
.support-card.highlight { border: 3px solid var(--mint); }
.date { color: var(--navy); font-weight: 900; }
.section-dark .news-card, .news-card.dark { background: rgba(255,255,255,.09); color: white; border-color: rgba(255,255,255,.15); }
.section-dark .date, .news-card.dark .date { color: var(--mint-bright); }

.contact-form { max-width: 760px; display: grid; gap: 18px; }
label { font-weight: 900; }
input, textarea {
  width: 100%;
  margin-top: 8px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  /* A field is a recess, not a raised card: the shading runs the other way. */
  background-color: var(--paper-lit);
  background-image: linear-gradient(180deg, rgba(18, 38, 79, .035), rgba(18, 38, 79, 0) 14px);
  font: inherit;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, textarea:focus {
  outline: 0;
  border-color: var(--focus);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(121, 203, 178, .22);
}
input::placeholder, textarea::placeholder { color: var(--ink-meta); }

/* The bottom of the experience: the deepest surface on the site, with a lit
   top edge separating it from the section above and a faint pool of light on
   the floor so it reads as grounded rather than simply switched off. */
.footer {
  padding: 44px clamp(22px, 7vw, 104px);
  background-color: var(--navy-abyss);
  background-image:
    radial-gradient(70% 140% at 50% 100%, rgba(33, 63, 120, .38), transparent 70%),
    radial-gradient(40% 90% at 12% 0%, rgba(121, 203, 178, .05), transparent 60%);
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--on-dark-soft);
  text-align: center;
}
.footer a {
  color: var(--mint);
  text-decoration-color: rgba(121, 203, 178, .38);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer a:hover { color: var(--mint-bright); text-decoration-color: currentColor; }
.footer a:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 3px; border-radius: 4px; }
/* Global `p { max-width: 820px }` would otherwise anchor the footer lines to the
   left edge on wide screens; auto side margins keep the block itself centred. */
.footer p { margin-inline: auto; }
.page-hero { padding: clamp(95px, 13vw, 160px) clamp(22px, 7vw, 104px) clamp(72px, 9vw, 110px); }
/* The page hero reverses the key light — brighter toward the lower right —
   so a hero and the dark section under it never read as one flat block. */
.page-hero.section-dark {
  background-image:
    radial-gradient(100% 80% at 88% 6%, rgba(156, 240, 210, .10), transparent 55%),
    radial-gradient(80% 70% at 18% 96%, rgba(45, 82, 150, .40), transparent 60%),
    linear-gradient(172deg, var(--navy-deep) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
}
.page-cta { margin-top: 32px; }
.team-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.profile-card { overflow: hidden; padding: 0; }
.profile-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.profile-body { padding: 25px; }
.profile-layout { display: grid; grid-template-columns: minmax(280px, 390px) 1fr; gap: 44px; align-items: start; }
/* Images are separated from the page by a hairline of their surrounding
   colour and a wide, low ambient shadow — no hard drop shadow, no card. */
.profile-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-md);
}
.section-dark .profile-photo { box-shadow: 0 0 0 1px var(--line-on-dark), var(--shadow-dark-lg); }
.profile-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.profile-panel .eyebrow { color: var(--navy); }
.profile-panel { background: rgba(252, 250, 245, .97); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink); }
.founder-creature { width: 120px; height: 120px; object-fit: contain; margin-bottom: 15px; filter: drop-shadow(0 14px 24px rgba(13, 28, 64, .16)); }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.tab-buttons button { padding: 10px 15px; border-radius: 999px; border: 1px solid var(--navy); background: var(--paper); color: var(--navy); font-weight: 900; cursor: pointer; }
.tab-buttons button.active { background: var(--navy); color: white; }
.tab-panel { display: none; background: var(--cream); border-radius: 19px; padding: 22px; }
.tab-panel.active { display: block; }
.list-clean { padding-left: 20px; }

.project-detail { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 44px; align-items: start; }
.project-info { background: var(--paper); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.project-info .btn.secondary { color: var(--navy); border-color: rgba(33,63,120,.22); background: var(--paper-lit); box-shadow: var(--shadow-xs); }
.project-info .btn.secondary:hover { background: var(--mint-soft); border-color: rgba(121,203,178,.55); }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; margin: 28px 0 34px; }
.meta-item { background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.meta-item strong { display: block; color: var(--navy); margin-bottom: 3px; }

@media (max-width: 980px) {
  .brand span { font-size: 16px; }
  .nav { gap: 2px; }
  .nav a { padding: 9px 9px; font-size: 13px; }
}
@media (max-width: 850px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 14px;
    right: 14px;
    padding: 14px;
    background-color: rgba(11, 24, 51, .98);
    background-image: linear-gradient(180deg, rgba(33, 63, 120, .28), rgba(8, 19, 44, .28));
    border: 1px solid var(--line-on-dark-strong);
    border-radius: 0 0 22px 22px;
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 16px; }
  .hero, .split, .profile-layout, .project-detail { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-art { max-width: 620px; margin: 0 auto; }
  .project-grid, .team-grid, .support-grid, .news-grid, .team-grid.two { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .site-header { padding-inline: 16px; }
  .brand span { max-width: 190px; white-space: normal; line-height: 1.05; }
  h1 { font-size: clamp(44px, 16vw, 68px); }
}
@media (max-width: 850px) {
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* V6 studio services and vision */
.dark-eyebrow { color: var(--navy); }
/* LEVEL 1 — the mint wash sections. Two or three percent of separation from
   the page behind them, plus a light source that differs section to section
   so a run of them creates rhythm rather than stripes. */
.services-section {
  background-color: var(--tint);
  background-image:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 255, 255, .8), transparent 58%),
    linear-gradient(180deg, var(--tint) 0%, var(--tint-deep) 100%);
}
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { position: relative; min-height: 270px; padding: 28px; border: 1px solid rgba(18,38,79,.10); border-radius: var(--radius); background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.service-card > span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 28px; border-radius: 50%; background: var(--navy-deep); color: var(--mint-bright); font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.service-card h3 { color: var(--navy-deep); }
.service-card p { color: var(--muted); }
.vision-section {
  background-image:
    radial-gradient(80% 60% at 82% 4%, rgba(255, 255, 255, .7), transparent 55%),
    linear-gradient(180deg, var(--cream), var(--tint-deep));
}
.vision-card { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(30px, 7vw, 90px); padding: clamp(28px, 5vw, 58px); border-radius: var(--radius-lg); background: rgba(252, 250, 245, .94); border: 1px solid var(--line-soft); box-shadow: var(--edge-lit), var(--shadow-lg); }
.vision-card img { max-height: 430px; width: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(13, 28, 64, .16)); }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .vision-card { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .service-card { min-height: auto; } }


/* Version 7: grouped navigation and service sections */
.nav-group { position: relative; }
.nav-parent {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px;
  border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.88);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-parent:hover, .nav-group.open > .nav-parent, .nav-group.current > .nav-parent {
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--mint-bright), var(--mint));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(63, 138, 114, .28);
}
.nav-parent:active { transform: translateY(0); box-shadow: none; }
.nav-parent:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; padding: 10px;
  border: 1px solid var(--line-on-dark-strong); border-radius: 18px;
  background-color: rgba(10, 22, 48, .98);
  background-image: linear-gradient(180deg, rgba(45, 82, 150, .22), rgba(8, 19, 44, .22));
  box-shadow: var(--edge-lit-dark), var(--shadow-dark-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav-group:hover .dropdown, .nav-group:focus-within .dropdown, .nav-group.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { display: block; border-radius: 12px; white-space: nowrap; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.service-card {
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm);
}
.service-card.dark-card { color: white; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.service-number { display: block; margin-bottom: 26px; color: var(--mint); font-weight: 950; letter-spacing: .15em; }
.coming-soon-panel { display: grid; grid-template-columns: minmax(220px,360px) 1fr; gap: 42px; align-items: center; padding: 36px; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.coming-soon-panel img { max-height: 300px; object-fit: contain; }
section[id] { scroll-margin-top: 110px; }
@media (max-width: 1050px) {
  .site-header { gap: 14px; }
  .nav { gap: 1px; }
  .nav-link, .nav-parent { padding: 9px 8px; font-size: 12px; }
}
@media (max-width: 850px) {
  .nav-group { width: 100%; }
  .nav-parent { width: 100%; justify-content: space-between; padding: 13px 16px; border-radius: 12px; }
  .dropdown { position: static; min-width: 0; display: none; margin: 4px 0 8px 12px; padding: 6px; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.05); }
  .nav-group.open .dropdown { display: block; }
  .nav-group:hover .dropdown:not(:focus-within) { display: none; }
  .nav-group.open:hover .dropdown { display: block; }
  .service-grid, .coming-soon-panel { grid-template-columns: 1fr; }
}

/* Version 8: section landing pages and dedicated subpages */
.section-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}.section-card{display:flex;flex-direction:column;min-height:250px;padding:30px;border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}.section-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.section-card h2,.section-card h3{margin-top:0}.section-card p{flex:1}.section-card .btn{align-self:flex-start}.breadcrumb{font-weight:800;font-size:.92rem;margin-bottom:20px}.breadcrumb a{text-decoration:none}.content-narrow{max-width:900px}.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;list-style:none}.feature-list li{padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}.resource-note{padding:24px;border-left:5px solid var(--green);background:var(--cream);border-radius:12px}.mini-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.mini-nav a{text-decoration:none}@media(max-width:760px){.section-card-grid,.feature-list{grid-template-columns:1fr}}

/* Version 8: section subcategory bar */
.subnav {
  position: relative;
  z-index: 40;
  display: flex;
  padding: 14px clamp(22px, 6vw, 88px);
  /* Sits one level below the header and one above the page: same navy, a
     little deeper, with its own lit top edge. */
  background-color: rgba(11, 24, 51, .97);
  background-image: linear-gradient(180deg, rgba(33, 63, 120, .30), rgba(8, 19, 44, .30));
  border-bottom: 1px solid var(--line-on-dark);
  box-shadow: var(--edge-lit-dark), 0 14px 30px rgba(6, 16, 38, .16);
}
.subnav-inner { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; width: 100%; }
.subnav-label {
  margin: 0;
  color: var(--mint);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.subnav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.subnav-links a {
  padding: 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.subnav-links a:hover { color: var(--navy-deep); background: linear-gradient(180deg, var(--mint-bright), var(--mint)); transform: translateY(-1px); }
.subnav-links a:active { transform: translateY(0); background: var(--mint-dark); }
.subnav-links a.active { color: var(--navy-deep); background: linear-gradient(180deg, var(--mint-bright), var(--mint)); box-shadow: 0 8px 20px rgba(63, 138, 114, .26); }
.subnav-links a:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }
.subnav + .page-hero { padding-top: clamp(60px, 8vw, 104px); }
@media (max-width: 850px) {
  .subnav { padding: 12px clamp(18px, 5vw, 40px); }
  .subnav-inner { gap: 8px 14px; }
  .subnav-links { gap: 4px; }
  .subnav-links a { padding: 8px 12px; font-size: 12.5px; }
}

/* Featured film hero — the clip is the first thing on the homepage. */
.film-hero {
  background-color: var(--navy-deeper);
  background-image:
    radial-gradient(80% 60% at 50% 108%, rgba(33, 63, 120, .45), transparent 62%),
    linear-gradient(180deg, var(--navy-abyss), var(--navy-deep));
  padding: clamp(26px, 4vw, 56px) clamp(16px, 5vw, 72px) clamp(40px, 6vw, 76px);
  color: var(--white);
}
.film-hero[hidden] { display: none; }
.film-hero-player {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  /* Deep brand-tinted black rather than #000, so the letterbox around a clip
     belongs to the page instead of punching a hole in it. */
  background: var(--navy-abyss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-dark-lg), 0 0 0 1px var(--line-on-dark);
}
.film-hero-player video,
.film-hero-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.film-hero-player video { object-fit: contain; background: var(--navy-abyss); }
.film-hero-sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: var(--navy-deep);
  font: inherit;
  font-weight: 900;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.36);
  transition: transform .2s ease, background .2s ease;
}
.film-hero-sound svg { width: 16px; height: 16px; flex: none; }
.film-hero-sound:hover { transform: translateY(-2px); background: var(--mint-bright); }
.film-hero-sound:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.film-hero-caption {
  max-width: 1320px;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  text-align: center;
}
.film-hero-caption h2 { margin: 6px 0 10px; }
.film-hero-caption > p:last-of-type { color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto; }
.film-hero-caption .hero-buttons { justify-content: center; }
.film-hero + .hero { min-height: auto; }
@media (max-width: 850px) {
  .film-hero-player { border-radius: 18px; max-height: none; }
  .film-hero-sound { right: 10px; bottom: 10px; padding: 8px 14px; font-size: 12.5px; }
}

/* Version 9: service cards, service pages, and the project inquiry form */
.btn.ghost {
  border-color: rgba(33, 63, 120, .22);
  background-color: var(--paper);
  background-image: linear-gradient(180deg, var(--paper-lit), var(--paper));
  color: var(--navy);
  box-shadow: var(--shadow-xs);
}
.btn.ghost:hover {
  background-image: none;
  background-color: var(--mint-soft);
  border-color: rgba(121, 203, 178, .55);
  color: var(--navy-deep);
}
.btn.ghost:active { background-color: var(--mint-muted); transform: translateY(0); box-shadow: none; }
.btn-lg { min-height: 58px; padding: 14px 32px; font-size: 17px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover, .svc-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 26px 4px;
  text-decoration: none;
  color: inherit;
}
.svc-card-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-lg); }
.svc-card-media {
  display: grid;
  place-items: center;
  margin: 0 -26px 22px;
  padding: 22px;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 74% 24%, rgba(156, 240, 210, .5), transparent 30%),
    linear-gradient(148deg, var(--navy-deep), var(--navy) 62%, #2f7890);
  color: var(--mint-bright);
  text-align: center;
}
.svc-card-media span {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}
.svc-card[data-tile="2"] .svc-card-media { background: radial-gradient(circle at 22% 30%, rgba(156,240,210,.42), transparent 32%), linear-gradient(120deg, #123a5f, var(--navy) 60%, #3d6f9a); }
.svc-card[data-tile="3"] .svc-card-media { background: radial-gradient(circle at 80% 74%, rgba(156,240,210,.44), transparent 34%), linear-gradient(200deg, var(--navy), #1c5a6b 70%, #2f7890); }
.svc-card[data-tile="4"] .svc-card-media { background: radial-gradient(circle at 30% 76%, rgba(121,203,178,.5), transparent 32%), linear-gradient(160deg, #0f2b52, #2b4f86 70%, #35748f); }
.svc-card[data-tile="5"] .svc-card-media { background: radial-gradient(circle at 66% 18%, rgba(156,240,210,.38), transparent 30%), linear-gradient(135deg, #101f3d, #22497f 58%, #276c7d); }
.svc-card-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.svc-card h3 { margin-bottom: 12px; color: var(--navy-deep); }
.svc-card p { flex: 1; margin: 0 0 20px; color: var(--muted); }
.svc-card-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 26px 26px; }
.svc-card-actions .btn { flex: 1 1 auto; min-height: 44px; padding: 10px 18px; font-size: 14px; }

.svc-provide {
  background-color: var(--tint);
  background-image:
    radial-gradient(85% 70% at 88% 4%, rgba(255, 255, 255, .78), transparent 56%),
    linear-gradient(180deg, var(--tint-deep) 0%, var(--tint) 100%);
}
.svc-provide .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-provide .feature-list li { line-height: 1.55; }
.svc-provide .feature-list strong { color: var(--navy-deep); }

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.step-number {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--mint-bright);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
}
.step h3 { font-size: clamp(19px, 2vw, 23px); color: var(--navy-deep); }
.step p { margin: 0; color: var(--muted); }

.cta-banner {
  padding: clamp(34px, 5vw, 52px) clamp(22px, 7vw, 104px);
  background-color: var(--mint-muted);
  background-image:
    radial-gradient(70% 120% at 16% 0%, rgba(255, 255, 255, .6), transparent 62%),
    linear-gradient(135deg, var(--mint-soft), var(--mint-muted));
}
.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: clamp(24px, 3.5vw, 40px);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cta-banner-inner .eyebrow { color: var(--navy); margin-bottom: 8px; }
.cta-banner-inner h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 8px; color: var(--navy-deep); }
.cta-banner-inner p { margin: 0; color: var(--muted); }
.cta-banner-inner .btn { flex-shrink: 0; }

/* One step deeper than the page background — the quiet beat between two
   lighter sections. */
.svc-work {
  background-color: var(--cream-deep);
  background-image: radial-gradient(90% 75% at 22% 0%, rgba(255, 255, 255, .72), transparent 58%);
}
.svc-final-cta .hero-buttons { margin-top: 26px; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.svc-chips a {
  padding: 10px 17px;
  border: 1px solid rgba(33, 63, 120, .22);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.svc-chips a:hover { background: var(--mint); transform: translateY(-2px); }
.svc-others-link a { color: var(--navy); font-weight: 900; }

/* Portfolio and project pages point back at the service that produced the work. */
.work-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid rgba(18, 38, 79, .1);
  border-radius: var(--radius-lg);
  background-color: var(--mint-muted);
  background-image:
    radial-gradient(70% 110% at 12% 0%, rgba(255, 255, 255, .62), transparent 62%),
    linear-gradient(135deg, var(--mint-soft), var(--mint-muted));
  box-shadow: var(--edge-lit), var(--shadow-sm);
  color: var(--ink);
}
.work-cta .eyebrow { color: var(--navy); margin-bottom: 6px; }
.work-cta h3 { margin-bottom: 6px; color: var(--navy-deep); }
.work-cta p { margin: 0; color: var(--muted); }
.work-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sticky mobile call to action — phones only, sits above the footer safe area. */
.sticky-cta { display: none; }
@media (max-width: 850px) {
  .sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 45;
    display: block;
  }
  .sticky-cta .btn {
    width: 100%;
    box-shadow: 0 16px 34px rgba(9, 24, 54, .34);
  }
  body:has(.sticky-cta) .footer { padding-bottom: 96px; }
}

/* Project inquiry form */
.inquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.inquiry-form { display: grid; gap: 26px; max-width: none; }
.field-set {
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.field-set legend {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--navy-deep);
  color: var(--mint-bright);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.field-set[hidden] { display: none; }
.field-set.conditional {
  border-color: rgba(121, 203, 178, .5);
  background-color: var(--mint-soft);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 60%);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { margin: 0 0 18px; display: block; max-width: none; }
.field-grid .field { margin: 0; }
.field label { display: block; font-size: 14.5px; }
.field-hint, .field-note { display: block; margin: 4px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.field-note { margin-bottom: 16px; }
.req { color: #b3243b; }
.opt { color: var(--muted); font-weight: 700; font-size: 13px; }
select {
  width: 100%;
  margin-top: 8px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background-color: var(--paper-lit);
  background-image: linear-gradient(180deg, rgba(18, 38, 79, .035), rgba(18, 38, 79, 0) 14px);
  font: inherit;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
select:hover { border-color: var(--line-strong); }
select:focus { outline: 0; border-color: var(--focus); background-color: var(--white); box-shadow: 0 0 0 4px rgba(121, 203, 178, .22); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: #b3243b;
  box-shadow: 0 0 0 4px rgba(208, 69, 95, .15);
}
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.choice { transition: border-color .2s ease, background-color .2s ease; }
.choice:hover { border-color: var(--mint); background: var(--mint-soft); }
.choice:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(121, 203, 178, .28); }
.choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--navy); }
.choice.inline { margin-top: 10px; background: transparent; border: 0; padding: 0; }
.choice.inline input { accent-color: var(--navy); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  padding: 16px 20px;
  border-radius: 16px;
  font-weight: 800;
  border: 1px solid transparent;
}
.form-status[hidden] { display: none; }
.form-status.error { background: #fdecef; border-color: #f0b8c3; color: #8d1b2f; }
.form-status.pending { background: var(--mint-soft); border-color: rgba(121, 203, 178, .5); color: var(--navy-deep); }
.form-actions { display: grid; gap: 14px; justify-items: start; }
.form-fineprint { margin: 0; color: var(--muted); font-size: 14px; }
.inquiry-aside { display: grid; gap: 18px; position: sticky; top: 108px; }
.aside-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.aside-card h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--navy-deep); }
.aside-card h3 { font-size: 21px; color: var(--navy-deep); }
.aside-card p { color: var(--muted); font-size: 15px; }
.aside-card p:last-child { margin-bottom: 0; }
.aside-link a { color: var(--navy); font-weight: 900; }
.confirm-panel {
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.confirm-panel .list-clean li { margin-bottom: 10px; }

@media (max-width: 1100px) {
  .svc-grid, .svc-provide .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inquiry-layout { grid-template-columns: 1fr; }
  .inquiry-aside { position: static; }
}
@media (max-width: 760px) {
  .svc-grid, .svc-provide .feature-list, .step-grid, .field-grid, .choice-grid { grid-template-columns: 1fr; }
  .cta-banner-inner, .work-cta { flex-direction: column; align-items: flex-start; }
  .cta-banner-inner .btn, .work-cta-actions .btn { width: 100%; }
  .svc-card-actions .btn { flex: 1 1 100%; }
}

/* Version 10: reusable team profile system (founders and employees share one template) */
.section-tint {
  background-color: var(--tint);
  background-image:
    radial-gradient(85% 70% at 78% 2%, rgba(255, 255, 255, .78), transparent 56%),
    linear-gradient(180deg, var(--tint) 0%, var(--tint-deep) 100%);
}
.section-card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.section-card.founder-card { border-top: 5px solid var(--mint); }
.section-card .role { margin: -8px 0 14px; }
.profile-emblem {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.profile-photo .placeholder { aspect-ratio: 4 / 5; font-size: 14px; line-height: 1.6; }
.profile-photo .placeholder span { display: block; font-size: 12px; letter-spacing: .16em; opacity: .78; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.profile-note {
  max-width: 820px;
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed rgba(18, 38, 79, .24);
  border-radius: 16px;
  background: rgba(255, 255, 255, .52);
  color: var(--muted);
  font-size: 15px;
}
.profile-note + .profile-note { margin-top: 12px; }
.profile-note strong { color: var(--navy); }
.tab-panel h3:not(:first-child) { margin-top: 26px; }
@media (max-width: 520px) {
  .section-card-actions .btn, .profile-actions .btn { flex: 1 1 100%; }
}

/* -------------------------------------------------- category filter bar */
/* Shared by the news archive and the testimonials archive. script.js finds
   every .filter-bar and filters the grid named in data-filter-target. */

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter-btn {
  padding: 10px 18px;
  border: 1px solid rgba(33, 63, 120, .22);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.filter-btn:hover { background: var(--cream); transform: translateY(-1px); }
.filter-btn.active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--mint-bright); }
.filter-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ news */
/* Archive cards, article pages, and the homepage Latest News list. The
   generator in tools/build-news.cjs writes the markup these style. */

.news-grid { align-items: stretch; }
.news-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--paper);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card[hidden] { display: none; }
.news-card:hover, .news-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-card-link { display: flex; flex-direction: column; flex: 1; padding: 0 0 4px; text-decoration: none; color: inherit; }
.news-card-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.news-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 22%, rgba(156,240,210,.5), transparent 26%),
    linear-gradient(145deg, var(--navy-deep), var(--navy) 60%, #2f7890);
}
.news-card-media[data-tile="2"] { background: radial-gradient(circle at 22% 30%, rgba(156,240,210,.42), transparent 32%), linear-gradient(120deg, #123a5f, var(--navy) 60%, #3d6f9a); }
.news-card-media[data-tile="3"] { background: radial-gradient(circle at 80% 74%, rgba(156,240,210,.44), transparent 34%), linear-gradient(200deg, var(--navy), #1c5a6b 70%, #2f7890); }
.news-card-media[data-tile="4"] { background: radial-gradient(circle at 30% 76%, rgba(121,203,178,.5), transparent 32%), linear-gradient(160deg, #0f2b52, #2b4f86 70%, #35748f); }
.news-card-media > span {
  color: var(--mint-bright);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.news-card-media img { width: 100%; height: 100%; object-fit: contain; }
.news-card-media.has-image { padding: 12px; }
.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 24px 0; }
.news-tag {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.news-card-meta .date { font-size: 13.5px; }
.news-card h3 { margin: 14px 0 10px; padding: 0 24px; color: var(--navy-deep); font-size: clamp(20px, 2.1vw, 24px); }
.news-card p { flex: 1; margin: 0 0 20px; padding: 0 24px; color: var(--muted); }
.news-card-actions { display: flex; gap: 10px; padding: 0 24px 24px; }
.news-card-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.filter-empty { color: var(--muted); font-weight: 800; }

.news-byline { margin: 0 0 14px; }
.news-featured {
  margin: 0 0 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-md);
  background: var(--paper);
}
.news-featured img { width: 100%; max-height: 460px; object-fit: contain; }
.news-featured.placeholder-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(circle at 72% 22%, rgba(156,240,210,.5), transparent 26%),
    linear-gradient(145deg, var(--navy-deep), var(--navy) 60%, #2f7890);
}
.news-featured.placeholder-tile span { color: var(--mint-bright); font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.news-article { font-size: clamp(17px, 1.5vw, 19px); }
.news-article p { color: var(--ink); margin: 0 0 22px; }
.news-article h2 { margin: 38px 0 14px; color: var(--navy-deep); }
.news-related { margin-top: 40px; padding: 26px; border-left: 5px solid var(--mint); background: var(--cream); border-radius: 12px; }
.news-related h2 { margin: 0; font-size: clamp(20px, 2vw, 24px); color: var(--navy-deep); }
.news-related .mini-nav { margin-top: 16px; }

.home-news {
  background-color: var(--tint);
  background-image:
    radial-gradient(80% 70% at 84% 6%, rgba(255, 255, 255, .74), transparent 56%),
    linear-gradient(180deg, var(--tint) 0%, var(--tint-deep) 100%);
}
.home-news-list { display: grid; gap: 14px; }
.home-news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.home-news-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.home-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; grid-column: 1 / -1; }
.home-news-meta .date { font-size: 13.5px; }
.home-news-title { font-weight: 900; font-size: clamp(17px, 1.8vw, 21px); color: var(--navy-deep); }
.home-news-more { color: var(--navy); font-weight: 900; font-size: 14px; white-space: nowrap; }

@media (max-width: 980px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .news-grid { grid-template-columns: 1fr; }
  .home-news-item { grid-template-columns: 1fr; }
  .home-news-more { text-align: left; }
}

/* -------------------------------------------------- equipment & resources */
/* The gear tags are the accuracy contract of studio/equipment.html: owned vs.
   experience vs. sourced through a partner. Keep the three visually distinct. */

.hero-note { margin-top: 18px; color: rgba(255,255,255,.78); }
.lead-copy { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; color: var(--navy-deep); }
.gear-section-alt {
  background-color: var(--tint);
  background-image:
    radial-gradient(85% 70% at 14% 4%, rgba(255, 255, 255, .8), transparent 56%),
    linear-gradient(180deg, var(--tint-deep) 0%, var(--tint) 100%);
}

.gear-key-band {
  padding: 30px clamp(22px, 7vw, 104px);
  background-color: var(--cream-deep);
  background-image: linear-gradient(180deg, var(--cream-shade), rgba(247, 245, 239, 0));
  border-bottom: 1px solid var(--line);
  box-shadow: var(--edge-lit);
}
.gear-key { max-width: 1100px; }
.gear-key-label {
  margin: 0 0 14px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
  font-weight: 950;
}
.gear-key-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
.gear-key-list li { max-width: none; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.gear-key-list .gear-tag { display: inline-flex; margin-bottom: 7px; }

.gear-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gear-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gear-tag.owned { background: rgba(121,203,178,.22); border-color: rgba(33,105,84,.3); color: #1d6b55; }
.gear-tag.experience { background: rgba(33,63,120,.10); border-color: rgba(33,63,120,.26); color: var(--navy); }
.gear-tag.sourced { background: rgba(18,38,79,.06); border-color: rgba(18,38,79,.2); color: var(--muted); }
.gear-tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.gear-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gear-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gear-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.gear-card-wide { grid-column: 1 / -1; }
.gear-card h3 { margin: 14px 0 14px; color: var(--navy-deep); }
.gear-card p { margin: 0 0 14px; color: var(--muted); }
.gear-card p:last-child { margin-bottom: 0; }
.gear-card a { color: var(--navy); font-weight: 800; }
.gear-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--mint-bright);
}
.gear-icon svg { width: 26px; height: 26px; }
.gear-subhead { margin: 22px 0 14px !important; color: var(--navy-deep) !important; font-weight: 900; }
.gear-clarify {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 4px solid var(--mint);
  border-radius: 10px;
  background: var(--cream);
  color: var(--muted);
  font-size: 15px;
}
.gear-clarify a { color: var(--navy); font-weight: 800; }

.gear-inventory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 22px;
  padding: 0;
  list-style: none;
}
.gear-inventory li {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px dashed rgba(18,38,79,.24);
  border-radius: 14px;
  color: var(--navy-deep);
  font-weight: 800;
  font-size: 15px;
}

.chip-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.chip-list li {
  padding: 8px 15px;
  border: 1px solid rgba(33,63,120,.2);
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}
.chip-list.on-dark li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.92); }

.section-dark .gear-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: white; }
.section-dark .gear-card h3 { color: white; }
.section-dark .gear-card p { color: rgba(255,255,255,.8); }
.section-dark .gear-card a { color: var(--mint-bright); }
.section-dark .gear-icon { background: rgba(156,240,210,.16); }
.section-dark .gear-tag.experience { background: rgba(156,240,210,.16); border-color: rgba(156,240,210,.34); color: var(--mint-bright); }
.section-dark .gear-tag.sourced { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.86); }
.section-dark .gear-clarify { background: rgba(255,255,255,.07); border-left-color: var(--mint); color: rgba(255,255,255,.8); }
.section-dark .gear-subhead { color: white !important; }
.section-dark .resource-note { background: rgba(255,255,255,.07); color: rgba(255,255,255,.86); }

#audio .resource-note { margin-top: 30px; }
#audio .resource-note h3 { color: var(--navy-deep); }
#audio .resource-note p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .gear-key-list { grid-template-columns: 1fr; }
  .gear-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gear-grid { grid-template-columns: 1fr; }
  .gear-inventory { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- testimonials */
/* Client reviews, published verbatim. The markup comes from
   tools/testimonials-render.cjs, which both testimonial generators share, so
   a card looks the same on the archive, the home page, the client portfolio
   page, and a service page. */

.tm-section {
  border-top: 1px solid var(--line-soft);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 42%);
}
.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.tm-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
}
.tm-card[hidden] { display: none; }
.tm-stars {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #d99a1f;
  font-size: 18px;
  letter-spacing: 2px;
}
.tm-rating {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.tm-quote { flex: 1; margin: 0; padding: 0; border: 0; }
.tm-quote p {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
}
.tm-attribution {
  margin: 16px 0 0;
  color: var(--navy);
  font-weight: 800;
}
.tm-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tm-title {
  margin: 0 0 6px;
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 900;
}
.tm-project { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.tm-source {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.tm-tags li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.section-dark .tm-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.section-dark .tm-quote p, .section-dark .tm-attribution { color: var(--cream); }
.section-dark .tm-title { color: var(--mint-bright); }
.section-dark .tm-project, .section-dark .tm-source { color: rgba(247, 245, 238, .78); }
.section-dark .tm-meta { border-top-color: rgba(255, 255, 255, .18); }
.section-dark .tm-rating { color: var(--mint-bright); }
.section-dark .tm-tags li { background: rgba(255, 255, 255, .12); color: var(--cream); }

@media (max-width: 640px) {
  .tm-grid { grid-template-columns: 1fr; }
  .tm-card { padding: 22px; }
  .tm-quote p { font-size: 16px; }
}

/* A feedback label the client selected, shown as given. */
.tm-highlight {
  align-self: flex-start;
  margin: 16px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
}
.section-dark .tm-highlight { background: rgba(255, 255, 255, .12); color: var(--mint-bright); }

/* -------------------------------------------------- home hero
   The homepage hero carries a two-line display headline, so it needs a
   smaller type ramp than the global h1 or "Built with intention." wraps
   mid-phrase. The text column is also widened, because this hero has to
   answer what the studio is, what it can be hired for, and where it is
   based before anyone scrolls. */

.hero-home { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .78fr); }
.hero-headline {
  font-size: clamp(33px, 4.6vw, 62px);
  max-width: 14ch;
  text-wrap: balance;
}
.hero-home .tagline { font-size: clamp(18px, 1.9vw, 24px); max-width: 42ch; }
.hero-home .hero-note { max-width: 46ch; font-size: 16px; }

/* Third, lower-priority hero action: a text link rather than a third pill,
   so the primary and secondary buttons keep their weight. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 4px;
  color: var(--mint-bright);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.text-link:hover { border-bottom-color: var(--mint-bright); }
.text-link:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 4px; }

@media (max-width: 850px) {
  .hero-home { grid-template-columns: 1fr; }
  .hero-headline { max-width: none; }
}
@media (max-width: 520px) {
  .hero-headline { font-size: clamp(30px, 9vw, 40px); }
}

/* -------------------------------------------------- hero animatic
   The homepage hero carries the company animatic instead of an illustration,
   so its media column is the wider of the two: a 16:9 film needs the room to
   read as the hero piece rather than an embedded card. The player sits in a
   framed well that borrows the dark-blue hero surface, so it reads as part of
   the page rather than a dropped-in YouTube box. The sound toggle reuses
   .film-hero-sound, the same control the featured-film player uses. */

.hero-media { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.18fr); }
.hero-animatic { display: flex; flex-direction: column; gap: 14px; }
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--navy-abyss);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-dark-lg), 0 0 0 1px rgba(121, 203, 178, .16);
}
.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hero-video-note {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* The toggle sits clear of YouTube's own control bar so it never covers it. */
.hero-video .film-hero-sound { right: 14px; bottom: 56px; }

/* Only revealed when playback never started on its own — a blocked autoplay
   should still leave an obvious way in rather than a frozen poster. */
.hero-video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, rgba(5,16,31,.28), rgba(5,16,31,.62));
  color: var(--navy-deep);
  cursor: pointer;
}
.hero-video-play[hidden] { display: none; }
.hero-video-play svg {
  width: 74px;
  height: 74px;
  padding: 22px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  transition: transform .2s ease, background .2s ease;
}
.hero-video-play:hover svg { transform: scale(1.06); background: var(--mint-bright); }
.hero-video-play:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: -6px; }

@media (max-width: 850px) {
  .hero-media { grid-template-columns: 1fr; }
  .hero-animatic { max-width: none; }
  .hero-video { border-radius: 18px; }
  .hero-video .film-hero-sound { right: 10px; bottom: 48px; padding: 8px 14px; font-size: 12.5px; }
}

/* -------------------------------------------------- studio pillars
   Cards for the connected areas of the studio and for the studio values on
   studio/vision.html: a heading plus a short run of paragraphs. Same visual
   language as the equipment cards, kept separate so the gear tiers on
   studio/equipment.html stay free to change without touching this page.
   Use .pillar-card-wide on a trailing odd card so a row is never left ragged. */

.pillar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pillar-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pillar-card-wide { grid-column: 1 / -1; }
.pillar-card h3 { margin: 0 0 14px; color: var(--navy-deep); font-size: clamp(20px, 2.1vw, 26px); }
.pillar-card p { margin: 0 0 14px; color: var(--muted); }
.pillar-card p:last-child { margin-bottom: 0; }
.pillar-card .eyebrow { margin-bottom: 12px; }
.pillar-note { margin-top: 34px; }

.section-dark .pillar-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: white; }
.section-dark .pillar-card h3 { color: white; }
.section-dark .pillar-card p { color: rgba(255,255,255,.8); }

@media (max-width: 760px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* Version 12: contact page — the studio front door (two entry paths + general contact form) */
.contact-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, .55fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}
.contact-hero-text { max-width: 760px; }
.contact-hero-text h1 { max-width: 12ch; text-wrap: balance; }
.contact-hero-text .hero-note { max-width: 52ch; }
.contact-hero-art { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(4, 12, 30, .32)); }

.contact-paths .contact-path { padding: clamp(26px, 3.4vw, 38px); border-top: 5px solid var(--mint); }
.contact-path .eyebrow { flex: 0 0 auto; margin-bottom: 10px; }
.contact-path h3 { margin: 0 0 12px; font-size: clamp(22px, 2.3vw, 28px); color: var(--navy-deep); }
.contact-path p { color: var(--muted); }
.contact-path .btn { margin-top: 8px; }

.contact-form-panel {
  margin-top: 32px;
  padding: clamp(24px, 4vw, 46px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-form-panel[hidden] { display: none; }
.contact-form { max-width: none; gap: 22px; }
.contact-form .field { margin: 0; }
.contact-form input, .contact-form textarea { padding: 16px 18px; background: var(--paper); }
.contact-form textarea { min-height: 200px; resize: vertical; }
.contact-form .form-actions { gap: 12px; }

.contact-confirm { margin-top: 32px; }
.contact-confirm[hidden] { display: none; }
.contact-confirm:focus { outline: none; }
.contact-confirm:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.contact-confirm-art { width: 84px; height: auto; margin-bottom: 12px; }
.contact-confirm h2, .contact-confirm h3 { margin: 0 0 12px; color: var(--navy-deep); }

.contact-direct {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--mint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-direct p { margin: 0; color: var(--muted); }
.contact-direct .eyebrow { margin: 0; }
.contact-email { font-size: clamp(23px, 2.7vw, 32px); font-weight: 950; color: var(--navy-deep); word-break: break-word; }
.contact-direct .btn { margin-top: 8px; }

.contact-team { margin-top: 44px; }
.contact-team p { margin: 0; color: var(--muted); max-width: 62ch; }
.contact-team .mini-nav { margin-top: 16px; }

@media (max-width: 850px) {
  .contact-hero-inner { grid-template-columns: 1fr; }
  .contact-hero-text h1 { max-width: none; }
  .contact-hero-art { max-width: 240px; justify-self: start; }
}
@media (max-width: 640px) {
  .contact-form .form-actions { justify-items: stretch; }
  .contact-form .form-actions .btn { width: 100%; }
  .contact-direct .btn, .contact-team .mini-nav .btn { width: 100%; }
  .contact-hero-art { max-width: 190px; }
}

/* ==========================================================================
   Version 13: colour, depth, and light
   --------------------------------------------------------------------------
   No new palette, no layout change. This block finishes the four-level
   surface system the tokens at the top of the file describe:

     LEVEL 0  page background            body / .section
     LEVEL 1  section surface            .section-dark, .section-tint, .svc-*
     LEVEL 2  content surface            cards, panels, quotes, nav overlays
     LEVEL 3  interactive surface        hover, active, focus

   The separation between any two levels is a few percent. Depth is carried by
   colour, a lit top edge, and a wide low-opacity shadow — in that order.
   ========================================================================== */

/* `--green` was referenced by .resource-note but never defined, so its accent
   bar never rendered. It is the mint, under its older name. */
:root { --green: var(--mint); }

/* -------------------------------------------------- LEVEL 2 content surfaces
   One recipe, applied to every light panel on the site so a card, a step, a
   quote and an aside all sit at the same height above the page. */
.service-card,
.svc-card,
.step,
.section-card,
.gear-card,
.pillar-card,
.tm-card,
.aside-card,
.field-set,
.confirm-panel,
.contact-form-panel,
.contact-direct,
.coming-soon-panel,
.profile-panel,
.project-info,
.home-news-item,
.feature-list li,
.news-card {
  background-color: var(--paper);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%);
  border-color: var(--line-soft);
  box-shadow: var(--edge-lit), var(--shadow-sm);
}

/* Panels that carry a lot of content read better with a slightly wider
   ambient shadow, so they settle rather than hover. */
.profile-panel,
.project-info,
.contact-form-panel,
.confirm-panel,
.coming-soon-panel,
.vision-card {
  box-shadow: var(--edge-lit), var(--shadow-md);
}

/* Recessed surfaces — the ones that should read as cut into the page rather
   than raised off it. */
.tab-panel,
.meta-item,
.resource-note,
.gear-clarify,
.news-related {
  background-color: var(--cream-deep);
  background-image: linear-gradient(180deg, rgba(18, 38, 79, .04), rgba(18, 38, 79, 0) 40px);
  box-shadow: inset 0 1px 2px rgba(13, 28, 64, .04);
}
.meta-item, .tab-panel { border: 1px solid var(--line-soft); }

/* -------------------------------------------------- LEVEL 3 interactive
   Hover brightens the surface toward the light and lets the hairline pick up
   the accent. The shadow widens; it never darkens. */
.service-card:hover,
.svc-card:hover, .svc-card:focus-within,
.gear-card:hover,
.pillar-card:hover,
.section-card:hover,
.news-card:hover, .news-card:focus-within,
.home-news-item:hover {
  background-color: var(--paper-lit);
  border-color: rgba(121, 203, 178, .36);
  box-shadow: var(--edge-lit), var(--shadow-lg);
}

/* ------------------------------------------------------- pills and chips */
.filter-btn,
.svc-chips a,
.chip-list li,
.gear-inventory li,
.tab-buttons button {
  background-color: var(--paper);
  background-image: linear-gradient(180deg, var(--paper-lit), var(--paper));
  transition: background-color .2s ease, background-image .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.filter-btn:hover,
.svc-chips a:hover,
.tab-buttons button:hover {
  background-image: none;
  background-color: var(--mint-soft);
  border-color: rgba(121, 203, 178, .5);
  color: var(--navy-deep);
}
.filter-btn.active,
.tab-buttons button.active {
  background-image: linear-gradient(180deg, var(--navy), var(--navy-deep));
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--mint-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 20px rgba(13, 28, 64, .16);
}
.tab-buttons button:focus-visible,
.svc-chips a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.section-dark .news-card-link:focus-visible,
.section-dark .btn:focus-visible { outline-color: var(--focus-on-dark); }
.news-tag, .tm-tags li, .tm-highlight {
  background-color: var(--cream-deep);
  border-color: var(--line-soft);
  color: var(--navy);
}

/* --------------------------------------------------------- text intensity
   Four steps rather than two: primary copy, secondary copy at roughly
   three-quarter intensity, metadata around half, and the accent. */
.section-heading > p:not(.eyebrow),
.news-article p,
.contact-hero-text p:not(.eyebrow) { color: var(--ink-soft); }
.section-dark .section-heading > p:not(.eyebrow),
.section-dark .contact-hero-text p:not(.eyebrow) { color: var(--on-dark-soft); }

.date,
.tm-source,
.tm-project,
.field-hint,
.field-note,
.form-fineprint,
.hero-video-note,
.news-byline,
.opt { color: var(--ink-meta); }
.date { color: rgba(33, 63, 120, .74); }
.section-dark .date, .news-card.dark .date { color: var(--mint); }
.section-dark .hero-video-note { color: var(--on-dark-meta); }

.tagline, .hero-note { color: var(--on-dark-soft); }
.section-dark .content-narrow > p:not(.eyebrow):not(.lead-copy) { color: var(--on-dark-soft); }
.section-dark .lead-copy { color: var(--on-dark); }

/* ------------------------------------------------------------------ links
   Brand colours only. Hover is a small shift in brightness plus the
   underline resolving — no new accent enters the page. */
.news-article a,
.gear-card a,
.aside-link a,
.svc-others-link a,
.gear-clarify a,
.breadcrumb a,
.contact-direct a:not(.btn) {
  color: var(--navy);
  text-decoration-color: rgba(33, 63, 120, .32);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.news-article a:hover,
.gear-card a:hover,
.aside-link a:hover,
.svc-others-link a:hover,
.gear-clarify a:hover,
.breadcrumb a:hover,
.contact-direct a:not(.btn):hover { color: var(--navy-highlight); text-decoration-color: currentColor; }
.section-dark .breadcrumb a,
.section-dark .content-narrow a:not(.btn),
.section-dark .gear-clarify a,
.section-dark .pillar-card a:not(.btn) { color: var(--mint); text-decoration-color: rgba(121, 203, 178, .4); }
.section-dark .breadcrumb a:hover,
.section-dark .content-narrow a:not(.btn):hover,
.section-dark .gear-clarify a:hover,
.section-dark .pillar-card a:not(.btn):hover { color: var(--mint-bright); text-decoration-color: currentColor; }

/* ------------------------------------------ LEVEL 2 inside dark sections
   The same idea inverted: a panel on navy is a step toward the light, with
   the lit edge along its top and a hairline drawn from white rather than ink. */
.section-dark .tm-card,
.section-dark .gear-card,
.section-dark .pillar-card,
.section-dark .news-card,
.section-dark .service-card.dark-card,
.section-dark .section-card {
  background-color: rgba(255, 255, 255, .055);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
  border-color: var(--line-on-dark);
  box-shadow: var(--edge-lit-dark), var(--shadow-dark-sm);
  color: var(--on-dark);
}
.section-dark .tm-card:hover,
.section-dark .gear-card:hover,
.section-dark .pillar-card:hover,
.section-dark .news-card:hover,
.section-dark .section-card:hover {
  background-color: rgba(255, 255, 255, .085);
  border-color: rgba(156, 240, 210, .26);
  box-shadow: var(--edge-lit-dark), var(--shadow-dark-lg);
}
.section-dark .resource-note,
.section-dark .tab-panel,
.section-dark .meta-item {
  background-color: rgba(4, 12, 30, .22);
  background-image: none;
  border-color: var(--line-on-dark);
  box-shadow: inset 0 1px 2px rgba(4, 12, 30, .3);
  color: var(--on-dark-soft);
}
.section-dark .profile-note {
  background: rgba(255, 255, 255, .05);
  border-color: var(--line-on-dark-strong);
  color: var(--on-dark-soft);
}
.section-dark .profile-note strong { color: var(--mint); }

/* ------------------------------------------------- transitions between beds
   Where a dark section hands over to a light one, the top of the light
   surface loses a little brightness so the join reads as light falling off an
   edge rather than as two colours butted together. */
.section-dark + .section,
.section-dark + .cta-banner,
.section-dark + .gear-key-band,
.section-dark + .home-news {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 16px 26px -20px rgba(13, 28, 64, .45);
}
/* And the reverse: a dark section opening under a light one starts a shade
   deeper at the very top. */
.section:not(.section-dark) + .section-dark,
.cta-banner + .section-dark {
  box-shadow: inset 0 18px 30px -22px rgba(4, 12, 30, .8);
}

/* ------------------------------------------------------------ media tiles
   The generated placeholder tiles keep their gradients; they only gain an
   inner edge so the artwork has a boundary against the card around it. */
.svc-card-media,
.news-card-media,
.placeholder,
.news-featured.placeholder-tile {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -70px 100px -70px rgba(4, 12, 30, .5);
}
.news-card-media.has-image { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* Images sitting directly on a background rather than in a card: a hairline of
   the surrounding colour and a wide, soft ambient pool. Never a drop shadow. */
.profile-card img,
.coming-soon-panel img,
.news-featured img { border-radius: inherit; }
.profile-emblem { box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-md); }
.section-dark .profile-emblem { box-shadow: 0 0 0 1px var(--line-on-dark), var(--shadow-dark-sm); }

/* ---------------------------------------------------------- accent details */
.section-card.founder-card,
.contact-paths .contact-path { border-top-color: var(--mint); }
.gear-tag.owned { background: rgba(121, 203, 178, .20); border-color: rgba(63, 138, 114, .34); color: #1d6b55; }
.tm-stars { color: #a8711a; }
.section-dark .tm-stars { color: #f0c15f; }

/* ==========================================================================
   Version 14: the Pink Ghost accent and a second light source
   --------------------------------------------------------------------------
   Two changes, both colour only. Nothing here moves, resizes, or restyles a
   component — every rule below sets a colour, a gradient, a hairline or a
   shadow on markup that already exists.

   1. THE ACCENT. The pink of the Pink Ghost enters the palette with one job,
      so it never spreads: it marks the transient and the enumerated.

         pink  ->  numerals, arrows, hover, and the link in motion
         mint  ->  identity and the persistent: brand, primary action,
                   selected and active states, and every focus ring

      Focus indicators deliberately stay mint — they are the one signal that
      has to stay identical everywhere. Because hover is pink and selected is
      mint, the two states on a pill or a card are now told apart by hue
      instead of by brightness alone.

   2. THE SECOND LIGHT. The dark beds were lit from one side by a mint bounce.
      A second, much fainter warm bloom is added in the opposite corner at
      6-8% — the pink reads as warmth in the shadow rather than as a colour,
      which is what gives a navy surface its sense of volume. Large flat tint
      bands gain a hairline so they part from the cream around them.
   ========================================================================== */

/* ------------------------------------------------------ 1. numerals
   The counted things: the step numbers on the process strip and the index
   disc on a service card. Small, bold, repeated, and always sitting on a navy
   disc — the right size and the right bed for an accent to live on. */
.step-number,
.service-card > span {
  color: var(--pink-bright);
}

/* ------------------------------------------------------- 1. arrows
   The directional glyph inside a link, never the label beside it. */
.text-link span[aria-hidden="true"],
.home-news-more span[aria-hidden="true"] {
  transition: color .2s ease;
}
.text-link span[aria-hidden="true"] { color: var(--pink-bright); }
.home-news-more span[aria-hidden="true"] { color: var(--pink-deep); }
.home-news-item:hover .home-news-more span[aria-hidden="true"] { color: var(--pink-shade); }

/* -------------------------------------------------- 1. links in motion
   Resting colour is unchanged — navy on light, mint on dark. Only the hover
   resolves to pink, so the accent appears under the cursor and nowhere else. */
.news-article a:hover,
.gear-card a:hover,
.aside-link a:hover,
.svc-others-link a:hover,
.gear-clarify a:hover,
.breadcrumb a:hover,
.contact-direct a:not(.btn):hover {
  color: var(--pink-deep);
  text-decoration-color: currentColor;
}
.section-dark .breadcrumb a:hover,
.section-dark .content-narrow a:not(.btn):hover,
.section-dark .gear-clarify a:hover,
.section-dark .gear-card a:hover,
.section-dark .news-article a:hover,
.section-dark .aside-link a:hover,
.section-dark .svc-others-link a:hover,
.section-dark .contact-direct a:not(.btn):hover,
.section-dark .pillar-card a:not(.btn):hover,
.footer a:hover {
  color: var(--pink-bright);
  text-decoration-color: currentColor;
}
.text-link:hover { color: var(--pink-bright); border-bottom-color: var(--pink-bright); }

/* ---------------------------------------------------- 1. hover surfaces
   The hairline that already appeared on hover simply changes hue. The card
   still brightens toward the light exactly as before. */
.service-card:hover,
.svc-card:hover, .svc-card:focus-within,
.gear-card:hover,
.pillar-card:hover,
.section-card:hover,
.news-card:hover, .news-card:focus-within,
.home-news-item:hover {
  border-color: rgba(216, 79, 184, .34);
}
.section-dark .tm-card:hover,
.section-dark .gear-card:hover,
.section-dark .pillar-card:hover,
.section-dark .news-card:hover,
.section-dark .section-card:hover {
  border-color: rgba(246, 175, 238, .30);
}

/* ------------------------------------------------------- 1. quiet controls
   Pills, chips and the tertiary button take the same pink wash on hover.
   Their selected state is left on navy and mint, so hover and active no
   longer resolve to the same colour. */
.filter-btn:hover,
.svc-chips a:hover,
.tab-buttons button:hover,
.btn.ghost:hover {
  background-image: none;
  background-color: var(--pink-soft);
  border-color: rgba(216, 79, 184, .38);
  color: var(--pink-shade);
}
.btn.ghost:active { background-color: var(--pink-muted); }

/* ------------------------------------------------- 2. a second light source
   A warm bloom opposite the mint one. At 6-8% over navy this is felt as depth
   in the corner rather than seen as a colour. */
.section-dark {
  background-image:
    radial-gradient(120% 95% at 14% -10%, rgba(156, 240, 210, .085), transparent 58%),
    radial-gradient(70% 60% at 84% 12%, rgba(121, 203, 178, .17), transparent 48%),
    radial-gradient(62% 58% at 94% 98%, rgba(246, 175, 238, .075), transparent 60%),
    linear-gradient(168deg, var(--navy-dark) 0%, var(--navy-deep) 52%, var(--navy-deeper) 100%);
}
.page-hero.section-dark {
  background-image:
    radial-gradient(100% 80% at 88% 6%, rgba(156, 240, 210, .10), transparent 55%),
    radial-gradient(80% 70% at 18% 96%, rgba(45, 82, 150, .40), transparent 60%),
    radial-gradient(56% 52% at 4% 4%, rgba(246, 175, 238, .07), transparent 62%),
    linear-gradient(172deg, var(--navy-deep) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
}
.footer {
  background-image:
    radial-gradient(70% 140% at 50% 100%, rgba(33, 63, 120, .38), transparent 70%),
    radial-gradient(40% 90% at 12% 0%, rgba(121, 203, 178, .05), transparent 60%),
    radial-gradient(46% 100% at 88% 4%, rgba(246, 175, 238, .06), transparent 62%);
}
.film-hero {
  background-image:
    radial-gradient(80% 60% at 50% 108%, rgba(33, 63, 120, .45), transparent 62%),
    radial-gradient(50% 60% at 6% 0%, rgba(246, 175, 238, .055), transparent 60%),
    linear-gradient(180deg, var(--navy-abyss), var(--navy-deep));
}
/* The decorative ring already drawn in the corner of every dark bed picks up
   the warm light rather than the cool one. */
.section-dark::after { border-color: rgba(246, 175, 238, .12); }

/* --------------------------------------------- 2. depth on the light beds
   The tint bands gained their vertical falloff in v13. What they lacked was
   an edge: stacked against cream they met it with nothing in between. A
   hairline of the same ink used everywhere else parts them from the page. */
.services-section,
.section-tint,
.svc-provide,
.home-news,
.gear-section-alt,
.svc-work,
.vision-section,
.cta-banner {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* The mint banner is the flattest surface on the site — one wash, edge to
   edge. A third stop and a settled base give it a floor. */
.cta-banner {
  background-image:
    radial-gradient(70% 120% at 16% 0%, rgba(255, 255, 255, .6), transparent 62%),
    radial-gradient(50% 90% at 92% 100%, rgba(216, 79, 184, .05), transparent 62%),
    linear-gradient(135deg, var(--mint-soft), var(--mint-muted));
  box-shadow: var(--edge-lit), inset 0 -22px 30px -26px rgba(13, 28, 64, .28);
}
.work-cta {
  background-image:
    radial-gradient(70% 110% at 12% 0%, rgba(255, 255, 255, .62), transparent 62%),
    radial-gradient(46% 86% at 94% 100%, rgba(216, 79, 184, .055), transparent 62%),
    linear-gradient(135deg, var(--mint-soft), var(--mint-muted));
}
/* The testimonial bed only had a white top wash and no base. It stays
   translucent so the page's own fixed key light still reads through it. */
.tm-section {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(18, 38, 79, 0) 60%, rgba(18, 38, 79, .035) 100%);
  border-bottom: 1px solid var(--line-soft);
}