/* PubliKrea - rebuilt stylesheet. Server-rendered pages, no runtime framework.
   Sizes are deliberate: body text is 15px (the old build used 12px). */

:root {
  --bg: #08080a;
  --bg-2: #0d0d11;
  --surface: #121217;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --ink: #f4f1ec;
  --ink-2: #c9c5bf;
  --muted: #a5a29d;
  /* One orange, three roles. Core is the logo orange; the gradient runs core →
     amber exactly as the wordmark does; accent is the hue lifted for text. */
  --brand: #ff5a1f;            /* fills, active states, focus rings */
  --brand-2: #ff8a1e;          /* the amber end of the gradient */
  --brand-ink: #ff7a33;        /* accent text and links on dark - 7.7:1 */
  --grad-brand: linear-gradient(120deg, #ff5a1f, #ff8a1e);
  --on-brand: #140a04;         /* text on an orange fill - 9:1 */
  --amber: #ffb066;   /* team-experience label */
  --gold: #ffcf5c;    /* collaboration label */
  --danger: #ff6d7c;  /* form errors */
  --ok: #5cc98a;
  --r: 16px; --r-lg: 24px;
  /* Liquid glass. Every panel is a pane of dark glass over the scene: a base
     dark enough to keep text legible whatever drifts behind it, a faint white
     tint, a lit top edge and a warm bounce along the floor. --surface-2 and
     --work-soft were used by the booking calendar but never defined, so those
     cells painted transparent; they are part of the glass scale now. */
  --glass-base:   rgba(14, 14, 19, .56);
  --glass-base-2: rgba(20, 20, 27, .68);
  --glass-line:   rgba(255, 255, 255, .11);
  --glass-line-2: rgba(255, 255, 255, .20);
  --glass-blur:   blur(26px) saturate(155%);
  --glass-blur-sm: blur(14px) saturate(140%);
  --glass-lift:   0 26px 56px -34px rgba(0, 0, 0, .95);
  --glass-edge:   inset 0 1px 0 rgba(255, 255, 255, .13);
  --glass-warm:   inset 0 -26px 44px -32px rgba(255, 138, 30, .34);
  --surface-2:    rgba(255, 255, 255, .045);
  --work-soft:    rgba(255, 122, 51, .13);
  --display: 'Archivo', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Barlow', 'Noto Sans Bengali', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Any rule that sets display beats the UA's [hidden] rule, so a .btn or a
   flex child stays on screen after hidden is set. Settle it once, globally. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
html { overflow-x: clip; }  /* clip, not hidden: hidden would make the element a scroll
                               container and window scroll events would stop firing */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.65 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg { max-width: 100%; display: block; }
a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; max-width: 68ch; }
.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-2); }
.eyebrow { font: 600 12px/1.4 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: .8rem; }
.note { font-size: 13.5px; color: var(--muted); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--brand); color: #12080a; font-weight: 600; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2);
  font: 600 14.5px/1 var(--ui); color: var(--ink); text-decoration: none; cursor: pointer; background: transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); color: var(--ink); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 15.5px; }
.btn-primary { border: 0; color: var(--on-brand); background: var(--grad-brand); font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 28px -14px rgba(255,90,31,.7); }
.btn-primary:hover { color: var(--on-brand); filter: brightness(1.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 16px 34px -14px rgba(255,90,31,.85); }


/* ---------- hero: the visual has reserved space, so nothing shifts ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 9vw, 104px) var(--pad) clamp(40px, 7vw, 80px); }
.hero h1 em { font-style: normal; color: var(--brand-ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; margin-top: 34px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 28px 0 0; padding: 0; margin-top: 42px; }
.pill-row li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--muted); border-color: rgba(255, 255, 255, .11); letter-spacing: .02em; }

.band { max-width: var(--wrap); margin: 0 auto; padding: clamp(44px, 7vw, 88px) var(--pad); position: relative; }
/* A hairline separates consecutive bands - except before an alt band, which
   already announces itself with its own darker plate. Both used to claim
   ::before, and the hairline (0,2,1) quietly beat the plate (0,1,1): the plate
   never painted and the line landed on top of it as a hard seam. */
.band + .band:not(.band-alt):not(.cta-band)::before {
  content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.band-alt { position: relative; }
.band-alt::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  /* transparent at both ends, so the plate has no edge to catch the eye */
  background: linear-gradient(180deg,
    rgba(13, 13, 17, 0) 0%, rgba(13, 13, 17, .80) 16%,
    rgba(13, 13, 17, .62) 66%, rgba(13, 13, 17, 0) 100%);
}
.band-head { margin-bottom: clamp(26px, 3.4vw, 40px); max-width: 62ch; }
.band-link { font-weight: 600; text-decoration: none; }
.page-head { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 7vw, 76px) var(--pad) 8px; }

/* ---------- cards ---------- */
.case-grid, .svc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.case-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; color: inherit; text-decoration: none; }
.case-no { font: 600 12px/1 var(--ui); color: var(--muted); letter-spacing: .1em; }
.case-kind { align-self: flex-start; font: 700 10.5px/1 var(--ui); letter-spacing: .14em; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
/* The studio's own work is the one label that means "we did this", so it is
   the one that gets filled. The other three stay outlined: they describe
   where the experience came from, which is honest but not the headline. */
.case-kind[data-kind="client"] {
  color: var(--on-brand); border-color: transparent;
  background: var(--grad-brand);
  box-shadow: 0 6px 18px -10px rgba(255, 90, 31, .9);
}
.case-kind[data-kind="team"] { color: var(--amber); border-color: rgba(255,176,102,.5); }
.case-kind[data-kind="collab"] { color: var(--gold); border-color: rgba(255,207,92,.5); }
/* The content calls this kind "venture"; the selector said "building", so
   IN DEVELOPMENT never got its colour and fell back to plain grey. */
.case-kind[data-kind="venture"] { color: var(--ok); border-color: rgba(92,201,138,.5); }
.case-card h2, .case-card h3 { font-size: 1.25rem; margin: 2px 0 0; }
.case-sector { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.case-sum { color: var(--ink-2); margin: 0; font-size: 14.5px; }
.case-go { margin-top: auto; color: var(--brand-ink); font-weight: 600; font-size: 14px; }
.svc-card { padding: 20px; }
.svc-card p { color: var(--muted); font-size: 14px; margin: 0; }
.legend { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--muted); }
.legend .case-kind { margin-right: 8px; }

/* ---------- case study ---------- */
.case { max-width: 860px; margin: 0 auto; padding: 32px var(--pad) 80px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.crumbs a { color: var(--muted); }
.case-head { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 30px; }
.case-by { color: var(--muted); font-size: 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 22px 0 0; }
.facts dt { font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 14.5px; }
.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 34px; }
.shot { margin: 0; }
.shot-frame { aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: var(--brand); font-size: 30px; }
.shot figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.case-body h2 { margin-top: 2.2rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1rem; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--ink-2); }
.approach { margin-bottom: 1.2rem; }
.approach h3 { color: var(--brand-ink); }
.result { font: 700 clamp(1.2rem, 2.4vw, 1.6rem)/1.3 var(--display); color: var(--ink); }
.insight { margin: 2rem 0; padding: 20px 24px; color: var(--ink-2); }
.attribution { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 2rem; }
.case-next { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 28px; }
.case-next ul { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 22px; }
.case-next li a { display: flex; gap: 12px; text-decoration: none; color: var(--ink); padding: 12px 16px; }
.case-next span { color: var(--muted); }

.prose { max-width: 740px; margin: 0 auto; padding: 40px var(--pad) 80px; }
.prose h2 { font-size: 1.3rem; margin-top: 2rem; }
.notfound { max-width: 740px; margin: 0 auto; padding: clamp(60px, 12vw, 130px) var(--pad); }
.cta-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cta-list a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink); }
.cta-list a:hover { border-color: var(--brand); }

/* ---------- footer ---------- */
.sitefoot nav a:hover { color: var(--brand); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 340px; margin-inline: auto; }
  .mainnav { display: none; }
  .topbar { gap: 12px; justify-content: space-between; }
}

/* ---------- mobile navigation ---------- */
@media (max-width: 900px) {
  .navtoggle { display: flex; }
  .mobilenav:not([hidden]) { display: flex; }
  .topbar { position: sticky; }
}

/* ---------- real case imagery ---------- */
.case-thumb { display: block; margin: -22px -22px 6px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: #0b0b0e; }
.case-thumb img { width: 100%; height: 190px; object-fit: cover; }
.shot img { width: 100%; height: auto; border-radius: var(--r); background: #0b0b0e; }
.shot-lead { grid-column: 1 / -1; }

/* ---------- video and external tiles ---------- */
.shot video { width: 100%; height: auto; max-height: 70vh; border-radius: var(--r); background: #000; }
.shot-video { max-width: 300px; }
.shot-video video { aspect-ratio: 9 / 16; object-fit: cover; }
.ext-tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; }
.ext-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.2)); transition: background .2s ease; }
.ext-tile:hover .ext-play { background: radial-gradient(circle at 50% 50%, rgba(255,122,51,.5), rgba(0,0,0,.35)); }
.credit { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ---------- services, process, about ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.svc-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.svc-row:first-child { border-top: 0; padding-top: 0; }
.svc-row-head h2 { font-size: 1.35rem; margin: 6px 0 0; }
.svc-tag { color: var(--ink); font-size: 1.02rem; font-weight: 500; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step-no { font: 700 15px/1 var(--display); color: var(--brand-ink); padding-top: 4px; }
.step h2 { font-size: 1.3rem; } .step h3 { font-size: 1.05rem; margin-bottom: .3em; }
.step-out { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.step-out span { display: inline-block; font: 600 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); margin-right: 8px; }
.steps-compact .step { padding: 14px 0; }
.person-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font: 700 17px/1 var(--display);
  color: #140a05; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.alias { font-weight: 400; color: var(--muted); font-size: 13px; }
.person-role { margin: 0; font-size: 14px; color: var(--ink-2); }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; padding: 4px 0; list-style-position: outside; }
.faq summary::marker { color: var(--brand); }
.faq p { margin: 10px 0 2px; color: var(--ink-2); }

/* ---------- forms ---------- */
.form-band { max-width: 820px; }
.form fieldset { padding: 54px 22px 22px; margin: 0 0 18px; }  /* top: room for the legend */
/* A legend normally straddles the fieldset border, and the glass panes have no
   border for it to sit in - it ended up hovering above the top edge. Taking it
   out of flow opts out of that special placement, so it reads as a heading
   inside the pane, aligned with the fields. The pane reserves room for it. */
.form legend { font: 600 13px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink);
  position: absolute; top: 22px; left: 22px; padding: 0; margin: 0; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field em { color: var(--brand); font-style: normal; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid;
  color: var(--ink); font: 400 15px/1.5 var(--ui); min-height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hint { font-size: 13.5px; color: var(--muted); }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14.5px; }
.checks input { width: 18px; height: 18px; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; }
.form-foot { display: grid; gap: 10px; }
.form-msg { margin: 6px 0 0; font-size: 14.5px; min-height: 1.2em; }
.form-msg.ok { color: var(--ok); } .form-msg.err { color: var(--danger); }

/* ---------- contact ---------- */
.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.contact-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.contact-card h2 { font-size: 1.15rem; margin: 0; }
.contact-card p { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1; }
.contact-card .btn { align-self: flex-start; }
@media (max-width: 700px) { .svc-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- the scene from the previous build, behind everything ---------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.scene.ready { opacity: 1; }
.scene canvas { width: 100%; height: 100%; }
body > header, main, .sitefoot { position: relative; z-index: 2; }


/* ---------- the dynamic island header, ported from the previous build ----------
   Sizes, easing and the shell treatment are the originals:
   expanded 1180x70 r28 · compact 404x56 · contextual 460x56 · mobile 188x48 r26
   · sheet full-width auto r30. Expand .42s (.22,1.06,.28,1), collapse .34s. */
.island-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.island {
  position: relative; display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; pointer-events: auto;
  border: 1px solid rgba(244, 241, 236, .12); border-radius: 28px;
  background: linear-gradient(168deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .96) 58%, rgba(8, 8, 10, .97) 100%);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 34px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(244, 241, 236, .06);
  transition: width .34s cubic-bezier(.3,.92,.24,1), height .34s cubic-bezier(.3,.92,.24,1),
              border-radius .34s cubic-bezier(.3,.92,.24,1), padding .34s cubic-bezier(.3,.92,.24,1);
  width: 404px; height: 56px; padding: 0 10px 0 14px;
}
.island[data-state="expanded"], .island[data-state="sheet"] {
  transition-duration: .42s; transition-timing-function: cubic-bezier(.22,1.06,.28,1);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; height: 100%; text-decoration: none; min-width: 0; }
/* The wordmark is the supplied artwork, not type. The island animates its
   height where it used to animate a font size; width follows the aspect. */
.brand-logo { display: block; height: 20px; width: auto; max-width: none;
  transition: height .34s cubic-bezier(.3,.92,.24,1); }

.isl-nav { display: none; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 auto; min-width: 0; margin-left: 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.isl-nav nav { display: flex; align-items: center; gap: 1px; min-width: 0; overflow: hidden; }
.isl-nav nav a { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: 13.5px; letter-spacing: .1px; color: rgb(160, 156, 150); transition: background .2s ease, color .2s ease; }
.isl-nav nav a:hover { background: rgba(244, 241, 236, .08); color: #fff; }
.isl-nav nav a[aria-current="page"] { background: var(--grad-brand); color: var(--on-brand); font-weight: 600; }
.island-sep { width: 1px; height: 20px; background: rgba(244, 241, 236, .12); }

.isl-compact { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; min-width: 0; height: 100%; margin-left: 12px; padding-right: 4px; }
.isl-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(244,241,236,.14); border-radius: 999px;
  font-size: 12.5px; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.isl-back:hover { color: var(--ink); border-color: var(--brand); }
.isl-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/1 var(--display); letter-spacing: -.01em; color: var(--ink);
  animation: pkLabel .3s cubic-bezier(.22,1.06,.28,1) both; }
.isl-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.isl-dot { width: 6px; height: 6px; border-radius: 999px; background: #ff5a1f; animation: pkPulse 2.4s ease-in-out infinite; }
.isl-menu { position: relative; display: block; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(244,241,236,.14); border-radius: 999px; background: none; cursor: pointer; }
.isl-menu span { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin-left: -7px; background: var(--ink);
  border-radius: 2px; transition: transform .25s cubic-bezier(.22,1.06,.28,1); }
.isl-menu span:first-child { transform: translateY(-3px); }
.isl-menu span:last-child { transform: translateY(3px); }
.isl-menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.isl-menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.isl-sheet { display: none; flex: 1 1 100%; flex-direction: column; gap: 2px; padding: 4px 10px 0; }
.isl-sheet a { padding: 13px 14px; border-radius: 14px; text-decoration: none; font-size: 16px; color: var(--ink);
  animation: pkSheet .26s cubic-bezier(.22,1.06,.28,1) both; }
.isl-sheet a:hover, .isl-sheet a[aria-current="page"] { background: rgba(255,122,51,.12); }
.isl-sheet-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 4px 4px; border-top: 1px solid rgba(244,241,236,.1); }
.isl-sheet-foot .btn { flex: 1 1 auto; }

/* --- states --- */
.island[data-state="expanded"] { width: min(1180px, calc(100vw - 32px)); height: 70px; border-radius: 28px; padding: 0 10px 0 16px; }
.island[data-state="expanded"] .brand-logo { height: 25px; }
.island[data-state="expanded"] .isl-nav { display: flex; opacity: 1; transform: translateY(0); transition-delay: .1s; }
.island[data-state="expanded"] .isl-compact { display: none; }
.island[data-state="compact"] { width: 404px; height: 56px; }
.island[data-state="contextual"] { width: min(460px, calc(100vw - 32px)); height: 56px; padding: 0 10px; }
.island[data-state="contextual"] .brand { display: none; }
.island[data-state="contextual"] .isl-dot { display: none; }
.island[data-state="mobile"] { width: 188px; height: 48px; border-radius: 26px; padding: 0 8px 0 12px; }
.island[data-state="mobile"] .brand-logo { height: 17px; }
.island[data-state="mobile"] .isl-label, .island[data-state="mobile"] .isl-dot { display: none; }
/* With the label hidden, space-between has a single child left and parks it at
   the start, so the menu button sat 37px short of the pill's right edge while
   the wordmark had 13px on the left. Push it to the end in the two states that
   hide the label. */
.island[data-state="mobile"] .isl-compact,
.island[data-state="sheet"] .isl-compact { justify-content: flex-end; }
/* On a deep page the pill carries a back button as well as the wordmark, and
   188px does not hold both - they ran into each other on every case study and
   insight below 901px. The way back is worth more than the logo here, so the
   wordmark gives way and the pill widens enough for the label. Home is still
   one tap away in the menu. */
.island[data-context="1"][data-state="mobile"] { width: auto; max-width: calc(100vw - 32px); padding: 0 8px 0 8px; }
.island[data-context="1"][data-state="mobile"] .brand { display: none; }
.island[data-state="sheet"] { width: calc(100vw - 24px); max-width: 520px; height: auto; border-radius: 30px; padding: 0 0 12px;
  align-items: flex-start; flex-wrap: wrap; }
.island[data-state="sheet"] .brand { height: 52px; margin-left: 14px; }
.island[data-state="sheet"] .brand-logo { height: 20px; }
.island[data-state="sheet"] .isl-compact { height: 52px; }
.island[data-state="sheet"] .isl-label, .island[data-state="sheet"] .isl-dot { display: none; }
.island[data-state="sheet"] .isl-sheet { display: flex; }
.island-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }

@keyframes pkLabel { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes pkSheet { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pkPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

main { padding-top: 108px; }
@media (max-width: 900px) { main { padding-top: 88px; } }


/* ---------- help cards, large tag list ---------- */
.help-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.help-card { padding: 22px; }
.help-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.help-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.tags-lg li { font-size: 14px; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; }
.faq-lg summary { font-size: 17px; padding: 8px 0; }
.faq-lg details { border-top: 1px solid var(--line); padding: 8px 0 16px; }
.faq-lg .case-go { display: inline-block; margin-top: 4px; }

/* below ~1120px the contact button drops out before the nav starts to crowd */
@media (max-width: 1120px) { .isl-nav .btn-ghost { display: none; } }

/* ---------- booking, in the page ---------- */
.book-grid { display: grid; gap: 28px; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.book-month { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: 600 15px/1 var(--display); }
.round { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; }
.round:hover { border-color: var(--brand); }
.book-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.book-dow { display: grid; place-items: center; height: 28px; font: 600 11px/1 var(--ui); color: var(--muted); }
.book-day { min-height: 44px; border-radius: 12px; border: 1px solid; font: 500 14px/1 var(--ui); cursor: default; }
.book-day.is-open { color: var(--ink); border-color: rgba(255,122,51,.35); cursor: pointer; }
.book-day.is-open:hover { border-color: var(--brand); }
.book-day.is-picked { background: linear-gradient(120deg, #ff5a1f, #ff8a1e); color: #10100c; border-color: transparent; font-weight: 700; }
.book-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.book-slot { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink); font: 500 14px/1 var(--ui); cursor: pointer; }
.book-slot:hover { border-color: var(--brand); }
.book-slot.is-picked { background: linear-gradient(120deg, #ff5a1f, #ff8a1e); color: #10100c; border-color: transparent; font-weight: 600; }
.book-form { max-width: 460px; }
@media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; } }

/* ---------- hit areas ----------
   Footer links, breadcrumbs and inline links were 16-38px tall. Padding grows
   the target without changing the look; on touch the minimum is 44px. */
.crumbs { line-height: 2.2; }
.crumbs a { padding: 6px 2px; }
.isl-back { min-height: 40px; }
@media (pointer: coarse) {
  .crumbs a, .case-go, .band-link { min-height: 44px; display: inline-flex; align-items: center; }
  .sitefoot nav a { min-height: 44px; display: flex; align-items: center; }
  .isl-menu { width: 44px; height: 44px; }
  .isl-back { min-height: 44px; }
}
.person-photo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--surface-2); }

.form-notice { max-width: 820px; margin: 0; padding: 16px 20px; border-radius: var(--r); font-size: 15.5px; }
.form-notice.ok { color: var(--ink); }
.form-notice.err { color: var(--ink); }

/* ---------- a band behind the floating island ----------
   Without it, text scrolls under the pill and reads as cut in half. */
/* The fade behind the header. Three stops used to run 100% → 78% over 60px and
   then 78% → 0 over 44px: the second ramp was four times steeper than the
   first, and the kink read as a hard horizontal edge across the page. These
   stops trace an ease-out curve over a taller band, so there is no point where
   the rate of change jumps. Explicit rgba, not color-mix - predictable
   interpolation matters more than the token here. */
.topfade { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 168px; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(180deg,
    rgba(8, 8, 10, 1)    0%,
    rgba(8, 8, 10, .985) 14%,
    rgba(8, 8, 10, .945) 25%,
    rgba(8, 8, 10, .875) 35%,
    rgba(8, 8, 10, .775) 45%,
    rgba(8, 8, 10, .650) 54%,
    rgba(8, 8, 10, .510) 63%,
    rgba(8, 8, 10, .370) 71%,
    rgba(8, 8, 10, .240) 79%,
    rgba(8, 8, 10, .135) 86%,
    rgba(8, 8, 10, .060) 92%,
    rgba(8, 8, 10, .018) 96.5%,
    rgba(8, 8, 10, 0)    100%); }
body.scrolled .topfade { opacity: 1; }
@media (max-width: 900px) { .topfade { height: 132px; } }


/* ---------- restored: dropped when the light theme was removed ---------- */
.lang { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 10px;
  border-radius: 999px; color: rgb(160, 156, 150); text-decoration: none; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.lang:hover { color: #fff; background: rgba(244, 241, 236, .07); }
.btn-sm { min-height: 36px; padding: 0 15px; font-size: 13px; }
.muted { color: var(--muted); }
.hero-copy { min-width: 0; }
.hero-solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.help-band { padding-top: clamp(30px, 5vw, 56px); }
.booker { min-height: 80px; }
.shot.is-empty .shot-frame { min-height: 160px; }

/* ==========================================================================
   First impression
   The scene carries the atmosphere; the type has to carry the meaning. This
   block gives the hero more presence, ties the copy to the scene with a warm
   halo, and makes every interactive surface answer with the same orange.
   ========================================================================== */

/* --- hero: bigger, tighter, anchored --- */
.hero { padding-top: clamp(64px, 11vh, 132px); }
.hero h1 {
  font-size: clamp(2.8rem, 6.4vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.hero .lead { font-size: clamp(1.05rem, 1.45vw, 1.22rem); max-width: 46ch; color: var(--ink-2); margin-top: 1.1rem; }
.hero .eyebrow { letter-spacing: .24em; }
/* A warm glow tying the type to the scene. It lives on a fixed, full-viewport
   layer: a glow inside a box clips at that box's edge and shows as a seam. */
.hero { position: relative; }
.heroglow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem 30rem at 22% 38%, rgba(255, 90, 31, .12), rgba(255, 90, 31, 0) 70%); }
body:not(.is-home) .heroglow { display: none; }

/* --- entrance: one calm rise, never on a repeat visit within the session --- */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .cta-row, .hero .pill-row {
    animation: riseIn .72s cubic-bezier(.2, .8, .2, 1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .lead { animation-delay: .13s; }
  .hero .cta-row { animation-delay: .19s; }
  .hero .pill-row { animation-delay: .25s; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- buttons: one shape language, one orange, a warm shadow instead of a glare --- */
.btn { letter-spacing: .005em; }


/* --- cards: the same lift everywhere, brand-coloured edge on hover --- */

/* --- section rhythm: one scale, so pages feel related --- */
.band { padding-block: clamp(52px, 7vw, 92px); }
.band-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.025em; }
.page-head { padding-bottom: clamp(10px, 2vw, 22px); }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.03em; }

/* --- focus: the brand colour, never a browser default --- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

/* ==========================================================================
   Footer - the six-column structure from the original site: what we do, who
   we are, how to start, where to find us, and the legal identity in full.
   ========================================================================== */
.sitefoot { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(48px, 7vw, 80px) var(--pad) 32px; position: relative; }
.sitefoot::before { content: ""; position: absolute; z-index: 0; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg-2); }
.foot-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; }
.foot-cols { display: grid; gap: 34px 28px; grid-template-columns: minmax(230px, 1.6fr) repeat(5, minmax(120px, 1fr)); }
.foot-brandcol .foot-brand { display: block; height: 26px; width: auto; margin-bottom: 14px; }
.foot-tag { font: 600 12px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); margin: 0 0 14px; }
.foot-body { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 34ch; margin: 0 0 16px; }
.foot-mail { font-size: 14.5px; }
.foot-h { font: 600 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.foot-col a { display: block; padding: 7px 0; color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.foot-col a:hover { color: var(--brand-ink); }
.foot-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 22ch; }
.foot-entity { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-entity div { display: grid; gap: 3px; }
.foot-entity dt { font: 400 10.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.foot-entity dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.foot-end { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-motto { margin: 0; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.foot-legalnote { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) { .foot-cols { grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(120px, 1fr)); } }
@media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brandcol { grid-column: 1 / -1; } }

/* ==========================================================================
   Liquid glass
   --------------------------------------------------------------------------
   Every panel on the site is one material: a pane of dark glass floating over
   the three.js scene. Four layers make it read as glass rather than as a flat
   translucent box:

     1. the pane      - a dark gradient base so text stays legible whatever
                        colour drifts behind, plus backdrop blur + saturation
                        so the scene genuinely refracts through it;
     2. the sheen     - ::before, a specular fall from the top edge, painted
                        above the pane and below the content (z-index -1 inside
                        an isolated stacking context);
     3. the rim       - ::after, a 1px gradient edge: bright at the top-left
                        where the light is, warming to brand orange at the
                        bottom-right. Drawn above everything, so it also traces
                        the edge of a photo that bleeds to the card border;
     4. the lift      - a long soft shadow, so the pane sits above the scene.

   Blur is expensive. The radius drops on small screens, and anyone who asks
   for reduced transparency gets opaque panels instead.
   ========================================================================== */

.case-card a,
.svc-card,
.help-card,
.contact-card,
.person,
.form fieldset,
.case-next li a,
.checks label,
.form-notice,
.insight,
.booker .book-form,
.shot-frame {
  position: relative;
  isolation: isolate;
  border: 0;                 /* the ::after rim IS the edge; a border would
                                draw a second line 1px outside it */
  border-radius: var(--r-lg);
  background:
    linear-gradient(158deg, var(--glass-base) 0%, var(--glass-base-2) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), var(--glass-edge), var(--glass-warm);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1),
              border-color .3s ease, box-shadow .34s ease, background .3s ease;
}

/* 2 - the sheen */
.case-card a::before,
.svc-card::before,
.help-card::before,
.contact-card::before,
.person::before,
.form fieldset::before,
.case-next li a::before,
.checks label::before,
.insight::before,
.booker .book-form::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(176deg,
    rgba(255, 255, 255, .10) 0%,
    rgba(255, 255, 255, .03) 26%,
    rgba(255, 255, 255, 0) 58%);
}

/* 3 - the rim. The mask paints the gradient into the border box only. */
.case-card a::after,
.svc-card::after,
.help-card::after,
.contact-card::after,
.person::after,
.form fieldset::after,
.case-next li a::after,
.checks label::after,
.insight::after,
.booker .book-form::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(142deg,
    rgba(255, 255, 255, .46) 0%,
    rgba(255, 255, 255, .14) 24%,
    rgba(255, 255, 255, .07) 52%,
    rgba(255, 150, 60, .13) 78%,
    rgba(255, 138, 30, .30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .9;
  transition: opacity .3s ease, background .3s ease;
}
/* Without mask-composite the rim would fill the whole pane with white. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .case-card a::after, .svc-card::after, .help-card::after, .contact-card::after,
  .person::after, .form fieldset::after, .case-next li a::after, .checks label::after,
  .insight::after, .booker .book-form::after { display: none; }
  .case-card a, .svc-card, .help-card, .contact-card, .person, .form fieldset,
  .case-next li a, .checks label, .booker .book-form { border: 1px solid var(--glass-line); }
}

/* 4 - the lift on hover: the glass tilts toward the light. */
.case-card a:hover,
.contact-card:hover,
.help-card:hover,
.svc-card:hover,
.person:hover,
.case-next li a:hover,
.checks label:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, .98), var(--glass-edge),
              inset 0 -24px 44px -32px rgba(255, 138, 30, .46);
}
.case-card a:hover::after,
.contact-card:hover::after,
.help-card:hover::after,
.svc-card:hover::after,
.person:hover::after,
.case-next li a:hover::after,
.checks label:hover::after {
  opacity: 1;
  background: linear-gradient(142deg,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 170, 110, .18) 30%,
    rgba(255, 90, 31, .12) 60%,
    rgba(255, 138, 30, .42) 100%);
}
.case-card a:hover .case-go { color: var(--brand); }

/* --- panes that need their own shape ------------------------------------- */
.case-next li a, .checks label { border-radius: var(--r); }
.insight { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 3px solid var(--brand); }
.insight::after { display: none; }   /* the brand rail is the edge here */
.shot-frame { border: 1px dashed var(--glass-line-2); border-radius: var(--r);
  background: radial-gradient(120% 120% at 20% 0%, rgba(255, 122, 51, .10), transparent 60%),
              linear-gradient(158deg, var(--glass-base) 0%, var(--glass-base-2) 100%); }
.form-notice.ok  { background: linear-gradient(158deg, rgba(92, 201, 138, .13), rgba(20, 20, 27, .68)); border: 1px solid rgba(92, 201, 138, .40); box-shadow: var(--glass-lift), inset 0 1px 0 rgba(92, 201, 138, .25); }
.form-notice.err { background: linear-gradient(158deg, rgba(255, 109, 124, .12), rgba(20, 20, 27, .68)); border: 1px solid rgba(255, 109, 124, .40); box-shadow: var(--glass-lift), inset 0 1px 0 rgba(255, 109, 124, .25); }
.booker .book-form { padding: 22px; }

/* --- small glass: pills, chips and controls ------------------------------
   Same material, thinner. No pseudo-elements: at this size the rim reads as
   noise, and there are far too many of them to blur at full strength. */
.btn-ghost,
.pill-row li,
.tags li,
.case-kind:not([data-kind="client"]),
.cta-list a,
.book-slot,
.round,
.isl-back,
.book-day {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
  transition: border-color .24s ease, background .24s ease, box-shadow .24s ease, color .24s ease;
}
/* Only the controls blur. A label chip is too small for a blur to read, and
   the work index alone carries fifteen of them - that is fifteen extra layers
   the compositor would repaint on every scroll frame for no visible gain. */
.btn-ghost, .cta-list a, .book-slot, .round, .isl-back, .book-day {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}
.btn-ghost { border-color: var(--glass-line-2); }
.btn-ghost:hover, .cta-list a:hover, .book-slot:hover, .round:hover {
  border-color: rgba(255, 138, 30, .55);
  background: linear-gradient(160deg, rgba(255, 138, 30, .16), rgba(255, 90, 31, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.book-day { border-color: transparent; color: var(--muted); }
.book-day.is-open { background: linear-gradient(160deg, rgba(255, 138, 30, .20), rgba(255, 90, 31, .07)); }
.book-day.is-picked, .book-slot.is-picked { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

/* --- form fields: glass pressed inward rather than lifted ---------------- */
.field input, .field select, .field textarea {
  background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(255, 255, 255, .035));
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: var(--glass-line-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .40);
}

/* The header island is deliberately NOT glass: it stays a solid dark bar so
   the navigation never competes with whatever is scrolling underneath it. */

/* --- cost control --------------------------------------------------------
   Phones repaint the blur on every scroll frame; halve the radius there. */
@media (max-width: 760px) {
  :root { --glass-blur: blur(15px) saturate(145%); --glass-blur-sm: blur(9px) saturate(130%); }
}

/* --- anyone who asks for less transparency gets solid panels ------------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-base: rgba(17, 17, 22, .99); --glass-base-2: rgba(17, 17, 22, .99); }
  .case-card a, .svc-card, .help-card, .contact-card, .person, .form fieldset,
  .case-next li a, .checks label, .form-notice, .insight, .booker .book-form,
  .shot-frame, .island, .btn-ghost, .pill-row li, .tags li, .case-kind,
  .cta-list a, .book-slot, .round, .isl-back, .book-day,
  .field input, .field select, .field textarea {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* --- and browsers with no backdrop-filter get the old opaque surface ----- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-base: rgba(18, 18, 23, .98); --glass-base-2: rgba(18, 18, 23, .98); }
}

/* ==========================================================================
   The closing call to action
   --------------------------------------------------------------------------
   This used to be a heading, a line and a button loose on the page: nothing
   held them together, so the section read as leftover space rather than as a
   deliberate end to the page. It is a pane now, like everything else, with a
   warm glow rising behind the heading so the eye lands on it last.
   ========================================================================== */
.cta-band {
  position: relative; isolation: isolate; text-align: center;
  border-radius: 30px;
  /* .band supplies the gutter through padding; this pane supplies its own
     padding, so it needs the gutter as width instead or it runs to the screen
     edge on a phone and loses two of its four corners. */
  width: calc(100% - var(--pad) * 2);
  margin-block: clamp(18px, 3.5vw, 40px);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 64px);
  background: linear-gradient(158deg, var(--glass-base) 0%, var(--glass-base-2) 100%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), var(--glass-edge);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(255, 90, 31, .20), rgba(255, 90, 31, 0) 70%),
    linear-gradient(176deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 58%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(142deg,
    rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .14) 24%,
    rgba(255, 255, 255, .07) 52%, rgba(255, 150, 60, .16) 76%, rgba(255, 138, 30, .38) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cta-band::after { display: none; }
  .cta-band { border: 1px solid var(--glass-line); }
}
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .lead { max-width: 54ch; margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }

/* ==========================================================================
   The four ways we work - a sequence, not a bag of four
   --------------------------------------------------------------------------
   Four cards in the seven-across service grid left a single orphan on its own
   row. These four are a progression (strategy → creative → production →
   growth), so they get their own rail: a numbered node per step with the line
   running on toward the next one. Four equal columns above 1024px, a clean
   2 × 2 below it, one column on a phone - never an odd card out.
   ========================================================================== */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px;
        grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: flow; }
.flow-step {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 24px 22px 26px; border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--glass-base) 0%, var(--glass-base-2) 100%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), var(--glass-edge), var(--glass-warm);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), box-shadow .34s ease;
}
.flow-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(176deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 58%);
}
.flow-step::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(142deg,
    rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .14) 24%,
    rgba(255, 255, 255, .07) 52%, rgba(255, 150, 60, .13) 78%, rgba(255, 138, 30, .30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .flow-step::after { display: none; }
  .flow-step { border: 1px solid var(--glass-line); }
}
.flow-step:hover { transform: translateY(-4px);
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, .98), var(--glass-edge),
              inset 0 -24px 44px -32px rgba(255, 138, 30, .46); }
/* the node, and the rail running on toward the next step */
.flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.flow-no { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  font: 700 12.5px/1 var(--display); color: var(--on-brand); background: var(--grad-brand);
  box-shadow: 0 6px 18px -8px rgba(255, 90, 31, .8); }
.flow-head::after { content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(255, 138, 30, .5), rgba(255, 138, 30, 0)); }
.flow-step h3 { font-size: 1.22rem; margin: 0 0 .35em; }
.flow-step p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: none; }
@media (max-width: 1023px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }

/* ==========================================================================
   The team - one grid, and the detail behind each person
   --------------------------------------------------------------------------
   The page used to split into "Executive & founding" and "Creative &
   operations" and show three lines per person, while the content file already
   carried everyone's expertise and their full background. Everybody sits in
   one grid now, and each card carries what they do, what they work on, and a
   disclosure with the roles behind it - the depth the original site had.
   ========================================================================== */
.team-lead { max-width: 62ch; margin: 0 0 30px; }
/* Seven people will not divide by three, and auto-fill left the seventh card
   stranded in an empty row while align-items:start let every card size to its
   own tag count, so no two lines of cards agreed on a height. Twelve columns
   divide by 3, 2 and 1, so each breakpoint gets whole cards; a short final row
   is centred rather than left hanging on the left edge. Heights come from the
   default stretch, and .person-more pins to the bottom, so the disclosure sits
   on one line across every card in a row. */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px;
          grid-template-columns: repeat(12, minmax(0, 1fr)); }
.person { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
/* one card left over: centre it */
.person:last-child:nth-child(3n + 1) { grid-column: 5 / span 4; }
/* two left over: pull the pair in so the gap is even on both sides */
.person:nth-last-child(2):nth-child(3n + 1) { grid-column: 3 / span 4; }

@media (max-width: 1080px) {
  .person,
  .person:last-child:nth-child(3n + 1),
  .person:nth-last-child(2):nth-child(3n + 1) { grid-column: span 6; }
  /* A lone final card centres by taking the whole row and keeping one card's
     width. Starting it at column 4 would straddle both column slots, and the
     auto-placement cursor then pushes an earlier card onto a row of its own. */
  .person:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1; max-width: calc((100% - 18px) / 2); margin-inline: auto;
  }
}
@media (max-width: 720px) {
  .person,
  .person:last-child:nth-child(3n + 1),
  .person:nth-last-child(2):nth-child(3n + 1),
  .person:last-child:nth-child(2n + 1) { grid-column: span 12; max-width: none; }
}
.person-top { display: flex; gap: 14px; align-items: flex-start; }
.person-id { min-width: 0; }
.person h3 { font-size: 1.1rem; margin: 0 0 4px; letter-spacing: -.01em; }
.person-loc { margin: 5px 0 0; font: 600 10.5px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); }
.person-sum { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: none; }
.person-block { display: grid; gap: 8px; }
.person-lbl { margin: 0; font: 600 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.person-x { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.person-x li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  font-size: 12px; line-height: 1.2; color: var(--muted); }
.person-more { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.person-more summary { cursor: pointer; display: flex; align-items: center; gap: 9px; min-height: 32px;
  font: 600 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); }
.person-more summary::marker { color: var(--brand); }
.person-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(255, 138, 30, .16); color: var(--brand-ink);
  font: 700 11px/1 var(--ui); letter-spacing: 0; }
.person-e { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.person-more .person-block { margin-top: 16px; }
.person-e h4 { margin: 0 0 5px; font: 600 14px/1.35 var(--ui); color: var(--ink); }
.person-e p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: none; }

/* ==========================================================================
   The team background dialog
   --------------------------------------------------------------------------
   A native <dialog>, so focus trapping, Escape and the inert backdrop come
   from the browser rather than from script. The pane is the same glass as
   everything else; the backdrop blurs the page behind it.
   ========================================================================== */
.pdlg {
  width: min(680px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(18, 18, 24, .94) 0%, rgba(12, 12, 17, .97) 100%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 1), var(--glass-edge);
  color: var(--ink);
}
.pdlg::backdrop {
  background: rgba(4, 4, 6, .72);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.pdlg-inner {
  position: relative;
  max-height: inherit;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(26px, 4vw, 38px);
  padding-top: clamp(26px, 4vw, 34px);
}
.pdlg-x {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--glass-line-2); background: rgba(255, 255, 255, .05);
  color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.pdlg-x:hover { background: rgba(255, 138, 30, .18); border-color: rgba(255, 138, 30, .55); }
.pdlg-name { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 52px .2em 0; }
.pdlg-role { margin: 0 0 22px; font-size: 14.5px; color: var(--brand-ink); }
.pdlg-body .person-detail { display: grid; gap: 22px; }
.pdlg-body .person-e { margin: 0; gap: 20px; }
.pdlg-body .person-e p { font-size: 14.5px; color: var(--ink-2); }
.pdlg-body .person-x li { font-size: 12.5px; }
/* the trigger is a button in all but name once the dialog is wired up */
.person-more summary[aria-haspopup] { list-style: none; }
.person-more summary[aria-haspopup]::marker,
.person-more summary[aria-haspopup]::-webkit-details-marker { display: none; content: ""; }
.person-more summary[aria-haspopup]::after { content: "\2197"; margin-left: auto; font-size: 13px; opacity: .75; }
.person-more summary[aria-haspopup]:hover { color: var(--brand-2); }
body.dlg-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .pdlg[open] { animation: dlgIn .26s cubic-bezier(.2, .8, .2, 1); }
  @keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   The brief, as a journey
   --------------------------------------------------------------------------
   Seven steps with a rail across the top. The markup ships every step open
   inside one form, so without JavaScript it is a long form that submits once;
   the rail and the navigation stay hidden until the script unhides them.
   ========================================================================== */
.brief-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 28px; padding: 0; }
.brief-rail li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  font: 500 12.5px/1 var(--ui); color: var(--muted); border: 1px solid transparent; }
.brief-rail-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); font: 700 11px/1 var(--ui); color: var(--muted); }
.brief-rail .is-done { color: var(--ink-2); cursor: pointer; }
.brief-rail .is-done .brief-rail-no { background: rgba(255, 138, 30, .22); color: var(--brand-ink); }
.brief-rail .is-done:hover { border-color: rgba(255, 138, 30, .4); }
.brief-rail .is-at { color: var(--ink); border-color: rgba(255, 255, 255, .14); }
.brief-rail .is-at .brief-rail-no { background: var(--grad-brand); color: var(--on-brand); }
@media (max-width: 620px) { .brief-rail-label { display: none; } .brief-rail li { padding: 6px; } }

.brief-q { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0 0 .35em; }
.brief-why { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; max-width: 58ch; }
.brief-q:focus-visible, .brief-step legend:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
/* The script drives the legend; it is the step label for assistive tech and
   is redundant beside the heading once the rail is showing. */
.brief:has(#briefRail:not([hidden])) .brief-step legend { position: absolute; left: -9999px; }

.brief-nav { display: flex; gap: 12px; margin-bottom: 14px; }
.brief-nav .btn { flex: 0 0 auto; }

.brief-review { display: grid; gap: 14px; margin: 0; }
.brief-review div { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.brief-review dt { font: 600 10.5px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.brief-review dd { margin: 0; font-size: 14.5px; color: var(--ink); white-space: pre-wrap; }

/* ---------- home hero: copy left, scene right ----------
   The 3D scene is fixed to the viewport and SCENE_CFG puts the home group in
   the right half, so a centred hero ran the headline straight through the
   sphere. Give the copy its own left column at the widths where the scene
   runs; the two then occupy different bands and both stay whole. The type
   steps down because it is living in 46% of the wrap, not all of it. */
@media (min-width: 900px) {
  .is-home .hero-solo {
    max-width: var(--wrap);
    /* fr, not %: two percentages plus the gap overflow the container */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  .is-home .hero-copy { grid-column: 1; }
  .is-home .hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); max-width: 16ch; }
  .is-home .hero .lead { max-width: 36ch; }
}