/* ==========================================================================
   Charis Creations: site styles
   One dark, cinematic theme (Master Website Handover, section 01).
   Colours, type and spacing live in the :root tokens; everything reads from them.
   ========================================================================== */

/* ---------- Fonts: self-hosted Barlow / Barlow Condensed (SIL Open Font License) ---------- */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0a0a0a;          /* page */
  --bg-2: #1a1a1a;        /* raised sections, cards, footer */
  --line: rgba(244, 244, 242, 0.12);
  --line-strong: rgba(244, 244, 242, 0.28);

  --text: #f4f4f2;
  --text-2: rgba(244, 244, 242, 0.72);   /* supporting copy: 9.9:1 on #0a0a0a */
  --text-3: rgba(244, 244, 242, 0.56);   /* labels, captions: 6.3:1 */

  --accent: #f16623;      /* logo orange: primary buttons and small accents only */
  --accent-hi: #ff7d3d;
  --on-accent: #0a0a0a;   /* dark text on orange: 7.0:1 (white would fail) */

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --space-section: clamp(88px, 12vw, 168px);
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  caret-color: var(--accent);
  scrollbar-color: #3a3a3a var(--bg);
}
::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid var(--bg); border-radius: 6px; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.section--raised { background: var(--bg-2); }
.section--tight { padding-block: clamp(56px, 8vw, 96px); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; text-wrap: balance; letter-spacing: 0.004em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.96; }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 0.98; }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.65rem); font-weight: 700; line-height: 1.08; letter-spacing: 0.01em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; }
p { margin: 0; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--text-2); max-width: 58ch; text-wrap: pretty; }
.body { color: var(--text-2); max-width: 64ch; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.eyebrow { font: 600 0.82rem/1.3 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5.5vw, 72px); max-width: 860px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font: 700 0.95rem/1 var(--display); letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; border-radius: 0;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--outline { border-color: var(--line-strong); color: var(--text); background: rgba(10, 10, 10, 0.25); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hi); }
  .btn--outline:hover { border-color: var(--text); background: rgba(244, 244, 242, 0.06); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none;
  font: 700 0.92rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
}
.link-arrow .arrow svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .arrow svg { transform: translateX(4px); } }
.inline-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }
.inline-link:hover { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: var(--nav-h);
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--bg); backdrop-filter: none; } }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: auto; height: 32px; }
.brand__word { font: 800 0.9rem/0.94 var(--display); letter-spacing: 0.09em; text-transform: uppercase; }
.brand__word b { color: var(--accent); font-weight: 800; }
.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.nav__list { display: flex; gap: clamp(18px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: block; padding: 10px 0; text-decoration: none;
  font: 600 0.86rem/1 var(--display); letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-2);
  transition: color 160ms ease;
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--text); }
.nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.book { position: relative; }
.book__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; cursor: pointer;
  border: 0; background: var(--accent); color: var(--on-accent);
  font: 700 0.88rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.book__toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .book__toggle:hover { background: var(--accent-hi); } }
.book__toggle svg { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
.book[data-open="true"] .book__toggle svg { transform: rotate(180deg); }
.book__menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 290px; margin: 0; padding: 8px; list-style: none;
  background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98); transform-origin: top right;
  transition: opacity 160ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.book[data-open="true"] .book__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.book__menu a { display: grid; gap: 2px; padding: 13px 14px; text-decoration: none; }
.book__menu strong { font: 700 1.02rem/1.15 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.book__menu span { font-size: 0.9rem; color: var(--text-3); }
.book__menu a:hover, .book__menu a:focus-visible { background: rgba(244, 244, 242, 0.06); }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -12px; border: 0; background: none; cursor: pointer; }
  .menu-toggle svg { width: 26px; height: 26px; }
  .menu-toggle .i-close, .site-header[data-menu="open"] .menu-toggle .i-open { display: none; }
  .site-header[data-menu="open"] .menu-toggle .i-close { display: block; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 29;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px;
    padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto;
    background: var(--bg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 200ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
  }
  .site-header[data-menu="open"] .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: 20px 0; font-size: 1.55rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); }
  .nav__list a[aria-current="page"] { box-shadow: none; color: var(--accent); }
  .book__toggle { width: 100%; min-height: 56px; justify-content: space-between; padding: 0 20px; font-size: 1rem; }
  .book__menu { position: static; display: none; min-width: 0; margin-top: 6px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .book[data-open="true"] .book__menu { display: block; }
}

/* ---------- Seasonal banner ---------- */
.banner { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.banner .wrap { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; padding-block: 12px; text-align: center; }
.banner p { font: 700 0.95rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.banner .link-arrow { font-size: 0.86rem; }

/* ---------- Hero: black and white photo wall ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; padding: 56px 0 72px;
}
.wall { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; padding-block: 10px; }
.wall__row { display: flex; gap: 10px; width: max-content; height: 100%; min-height: 0; }
.wall__row img { height: 100%; width: auto; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.hero::before { /* about 55% dark overlay so the words read cleanly */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(10, 10, 10, 0.42), transparent 72%), rgba(10, 10, 10, 0.56);
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg)); }
.hero__copy { display: grid; justify-items: center; gap: 22px; max-width: 1180px; text-align: center; }
.hero__copy h1 { text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5); }
.hero__copy h1 span { display: block; }
.hero__copy .lede { color: rgba(244, 244, 242, 0.86); max-width: 46ch; }
.hero__copy .btn-row { justify-content: center; margin-top: 6px; }
.hero__motto { margin-top: 4px; font: 600 0.9rem/1.3 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .wall__row { animation: drift-left 60s linear infinite; }
  .wall__row:nth-child(2) { animation-name: drift-right; animation-duration: 68s; }
  .wall__row:nth-child(3) { animation-duration: 56s; }
  .hero__copy > * { animation: rise 900ms var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 70ms; }
  .hero__copy > :nth-child(3) { animation-delay: 140ms; }
  .hero__copy > :nth-child(4) { animation-delay: 210ms; }
  .hero__copy > :nth-child(5) { animation-delay: 280ms; }
}
@keyframes drift-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes drift-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .wall { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .wall__row:nth-child(3) { display: none; }
  .hero { padding: 44px 0 60px; }
  .hero__copy .btn-row { flex-direction: column; align-self: stretch; }
  .hero__copy .btn { width: 100%; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(72px, 11vw, 150px) 0 clamp(48px, 7vw, 96px); }
.page-hero__inner { display: grid; gap: 22px; max-width: 980px; }
.page-hero--split .page-hero__inner { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
.page-hero__media { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 5; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .page-hero--split .page-hero__inner { grid-template-columns: 1fr; } .page-hero__media { aspect-ratio: 4 / 3; } }

/* ---------- Develop: photos turn from black and white to colour as they arrive ---------- */
.develop img { transition: filter 1400ms var(--ease-out), transform 900ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .js .develop:not(.is-in) img { filter: grayscale(1) brightness(0.9); }
}

/* ---------- Trusted by ---------- */
.trusted { padding: clamp(64px, 9vw, 120px) 0; text-align: center; border-top: 1px solid var(--line); }
.trusted h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: clamp(36px, 5vw, 56px); }
.logo-strips { display: grid; gap: clamp(28px, 4vw, 48px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-strips__row { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); width: max-content; list-style: none; margin: 0; padding: 0 clamp(24px, 3vw, 48px); }
.logo-strips__row--left { animation: strip-left 45s linear infinite; }
.logo-strips__row--right { animation: strip-right 45s linear infinite; }
.logo-strips:hover .logo-strips__row { animation-play-state: paused; }
.logo-strips img { height: var(--h, 52px); width: auto; max-width: none; opacity: 0.74; transition: opacity 200ms ease; }
.logo-strips img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-strips__row--left, .logo-strips__row--right { animation: none; } .logo-strips { overflow-x: auto; } }

/* ---------- Tagline band and photo strips (from the old site) ---------- */
.tagline { background: #f2ede8; color: #1a1a1a; }
.tagline__head { padding: clamp(48px, 7vw, 96px) 5vw clamp(32px, 4vw, 48px); text-align: center; display: grid; justify-items: center; gap: 24px; }
.tagline__words { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); margin: 0; font: 800 clamp(28px, 5vw, 72px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a; }
.tagline__words .is-accent, .tagline__dot { color: var(--accent); }
.tagline__dot { font-weight: 300; }
.tagline__body { max-width: 600px; margin: 0; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.8; color: rgba(20, 15, 10, 0.66); }
.strips { overflow: hidden; display: grid; gap: 12px; padding-bottom: clamp(36px, 4vw, 56px); }
.strips__row { display: flex; gap: 12px; width: max-content; }
.strips__row--left { animation: strip-left 55s linear infinite; }
.strips__row--right { animation: strip-right 55s linear infinite; }
.strips:hover .strips__row, .strips:focus-within .strips__row { animation-play-state: paused; }
@keyframes strip-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes strip-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.strips__item { position: relative; flex: none; width: clamp(180px, 17vw, 280px); height: clamp(120px, 11vw, 185px); border-radius: 12px; overflow: hidden; display: block; }
.strips__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.strips__item:hover img { transform: scale(1.06); }
.strips__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strips__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px; background: linear-gradient(to top, rgba(8, 8, 8, 0.9), transparent); font: 600 12px/1.2 var(--display); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); opacity: 0; transition: opacity 300ms ease; }
.strips__item:hover .strips__cap, .strips__item:focus-visible .strips__cap { opacity: 1; }
@media (hover: none) { .strips__cap { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .strips__row--left, .strips__row--right { animation: none; } .strips { overflow-x: auto; } }

/* ---------- Featured work: editorial grid ---------- */
.work { --inset: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 var(--inset) 16px; scroll-padding-inline: var(--inset); scrollbar-width: thin; scrollbar-color: #333 transparent; }
.work::-webkit-scrollbar { height: 6px; }
.work::-webkit-scrollbar-thumb { background: #333; }
.work__item { flex: 0 0 330px; display: grid; gap: 16px; align-content: start; min-width: 0; scroll-snap-align: start; padding: 12px 12px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; transition: border-color 300ms ease; }
.work__item:hover { border-color: var(--line-strong); }
.work__open { display: block; cursor: zoom-in; }
.work__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.work__media { display: block; position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 2 / 3; border-radius: 10px; }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .work__open:hover .work__media img { transform: scale(1.04); } }
.work__item h3 { font-size: 1.35rem; }
.work__meta { color: var(--text-3); font-size: 0.95rem; }
.work__item .link-arrow { margin-top: 2px; }
@media (max-width: 760px) { .work__item { flex-basis: 78%; } }

/* ---------- What we create: image tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.tile { position: relative; isolation: isolate; display: grid; align-content: end; min-height: clamp(260px, 25vw, 340px); overflow: hidden; text-decoration: none; background: var(--bg-2); border-radius: 16px; }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,10,10,0.95) 6%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.05) 74%); }
.tile__body { display: grid; gap: 10px; padding: clamp(22px, 2.4vw, 32px); }
.tile__body p { color: rgba(244, 244, 242, 0.8); font-size: 1rem; max-width: 36ch; }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.04); } }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; gap: 12px; } .tile { min-height: 240px; } }

/* ---------- Story: photograph + words ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.story__media { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 5 / 6; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
#story .story__media { aspect-ratio: 3 / 4; border-radius: 16px; }
#story .story__media img { object-position: 50% 40%; }
.story__copy { display: grid; gap: 26px; }
.facts { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 8px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.facts dt { font: 600 0.8rem/1.2 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 4px 0 0; font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__media { aspect-ratio: 4 / 3; } #story .story__media { aspect-ratio: 4 / 5; } }

/* ---------- Client journey ---------- */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.journey__step { position: relative; display: grid; gap: 14px; align-content: start; padding: 32px clamp(16px, 2vw, 28px) 8px 0; }
.journey__step + .journey__step { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.journey__num { font: 800 3.2rem/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.journey__step p { color: var(--text-2); }
.journey__phone { width: 100%; max-width: 220px; aspect-ratio: 9 / 19; border-radius: 30px; padding: 8px; background: #050505; border: 1px solid var(--line-strong); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5); }
.journey__phone img { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; object-position: top; }
.closing { margin-top: clamp(56px, 8vw, 104px); text-align: center; font: 800 clamp(2rem, 4.6vw, 3.6rem)/1.02 var(--display); text-transform: uppercase; text-wrap: balance; }
.closing span { color: var(--accent); }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr 1fr; }
  .journey__step:nth-child(3) { padding-left: 0; border-left: 0; }
  .journey__step:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .journey__step:nth-child(n) { padding-left: 0; border-left: 0; }
  .journey__step + .journey__step { border-top: 1px solid var(--line); }
  .journey__step { grid-template-columns: auto 1fr; column-gap: 20px; padding: 26px 0 22px; }
  .journey__num { grid-row: span 2; font-size: 2.6rem; }
}

/* ---------- Embeds (CharisOS) ---------- */
.embed { width: 100%; border: 0; background: transparent; color-scheme: normal; }
.embed--testimonials { min-height: 420px; }
.embed--enquiry { min-height: 720px; }

/* ---------- Starting points ---------- */
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 112px); align-items: start; }
.start__list { list-style: none; margin: 0 0 36px; padding: 0; border-top: 1px solid var(--line); }
.start__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.start__list span { font: 700 clamp(1.2rem, 2vw, 1.5rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.start__list b { font-weight: 500; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .start { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(36px, 7vw, 112px); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none;
  font: 700 clamp(1.15rem, 1.7vw, 1.35rem)/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--accent); transition: transform 220ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq__a { padding: 0 48px 26px 0; color: var(--text-2); max-width: 62ch; }
.faq__a a { color: var(--text); text-decoration-color: var(--accent); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }

/* ---------- Enquiry ---------- */
.enquiry { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.enquiry__aside { display: grid; gap: 24px; position: sticky; top: calc(var(--nav-h) + 32px); }
.enquiry__contacts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.enquiry__contacts li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; color: var(--text-2); }
.enquiry__contacts svg { width: 20px; height: 20px; margin-top: 3px; color: var(--text-3); }
.enquiry__contacts a { color: var(--text); text-decoration: none; }
.enquiry__contacts a:hover { color: var(--accent); }
.enquiry__note { margin-top: 14px; font-size: 0.92rem; color: var(--text-3); }
.enquiry__note a { color: var(--text-2); }
.embed-fallback { display: grid; gap: 18px; justify-items: start; padding: 32px; background: var(--bg-2); border: 1px solid var(--line); }
@media (max-width: 900px) { .enquiry { grid-template-columns: 1fr; } .enquiry__aside { position: static; } }

/* ---------- Close (end-of-page call to action) ---------- */
.close { text-align: center; }
.close .wrap { display: grid; justify-items: center; gap: 26px; }
.close h2 { max-width: 16ch; }

/* ---------- Services: sub-navigation ---------- */
.subnav { position: sticky; top: var(--nav-h); z-index: 20; background: rgba(10, 10, 10, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 10px 0; scroll-snap-type: x proximity; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 10px 16px; white-space: nowrap; text-decoration: none; scroll-snap-align: start; font: 600 0.84rem/1 var(--display); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-2); border: 1px solid transparent; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="true"] { color: var(--text); border-color: var(--line-strong); }

/* ---------- Services: offer blocks ---------- */
.offer { scroll-margin-top: calc(var(--nav-h) + 72px); }
.offer + .offer { border-top: 1px solid var(--line); }
.offer__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.offer__intro .stack { display: grid; gap: 22px; }
.offer__media { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 3; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; }
.from { font: 700 1rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.from b { color: var(--text); font-weight: 700; }
@media (max-width: 900px) { .offer__intro { grid-template-columns: 1fr; } }
.offer__intro:last-child { margin-bottom: 0; }

.packages { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); list-style: none; margin: 0; padding: 0; }
.package { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 34px); background: var(--bg-2); border: 1px solid var(--line); }
.package--featured { border-color: var(--line-strong); box-shadow: inset 0 2px 0 var(--accent); }
.package__tag { font: 600 0.78rem/1.2 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.package--featured .package__tag { color: var(--accent); }
.package h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.package__desc { color: var(--text-2); font-size: 1rem; }
.package__price { font: 800 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.package__price small { font: 600 0.85rem/1 var(--display); letter-spacing: 0.14em; color: var(--text-3); margin-right: 6px; }
.package__groups { display: grid; gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); flex: 1; }
.package__groups h4 { color: var(--text-3); font-size: 0.8rem; letter-spacing: 0.2em; margin-bottom: 6px; }
.package__groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.package__groups li { position: relative; padding-left: 18px; font-size: 0.98rem; }
.package__groups li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 2px; background: var(--accent); }
.package__best { font-size: 0.95rem; color: var(--text-2); }
.package__best b { color: var(--text); font-weight: 600; }
.package .btn { align-self: flex-start; margin-top: 6px; }
.package__media { margin: calc(-1 * clamp(24px, 2.6vw, 34px)) calc(-1 * clamp(24px, 2.6vw, 34px)) 4px; aspect-ratio: 4 / 3; overflow: hidden; }
.package__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1080px) { .packages { --cols: 2 !important; } }
@media (max-width: 640px) { .packages { --cols: 1 !important; } }

.addons { margin-top: clamp(40px, 5vw, 64px); }
.addons h3 { margin-bottom: 22px; }
.addons ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.addons li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.addons strong { display: block; font: 700 1.05rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.addons span { color: var(--text-2); font-size: 0.97rem; }

.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 8px; list-style: none; padding: 0; }
.guides a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 96px; padding: 24px 26px; background: var(--bg); text-decoration: none; font: 700 1.2rem/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.03em; transition: background-color 180ms ease; }
.guides a svg { width: 20px; height: 20px; color: var(--accent); flex: none; transition: transform 200ms var(--ease-out); }
.guides a:hover { background: var(--bg); }
.guides a:hover svg { transform: translateX(4px); }
@media (max-width: 760px) { .guides { grid-template-columns: 1fr; } }

.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.process li { display: grid; gap: 10px; align-content: start; padding: 28px clamp(14px, 1.6vw, 22px) 6px 0; }
.process li + li { padding-left: clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--line); }
.process b { font: 800 2.4rem/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.process h3 { font-size: 1.25rem; }
.process p { color: var(--text-2); font-size: 0.98rem; }
@media (max-width: 960px) { .process { grid-template-columns: 1fr; } .process li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .process li { grid-template-columns: 56px 1fr; padding: 22px 0; } .process b { grid-row: span 2; font-size: 2rem; } }

/* ---------- Projects ---------- */
.reel { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); margin-top: clamp(36px, 5vw, 64px); }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.potm { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.potm:not(:has(.potm__media)) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.potm__media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 4 / 3; }
.potm__media figure { margin: 0; overflow: hidden; background: var(--bg); }
.potm__media figure:first-child { grid-row: span 2; }
.potm__media img { width: 100%; height: 100%; object-fit: cover; }
.potm__copy { display: grid; gap: 22px; }
.potm__cat { font: 600 0.9rem/1.2 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.potm dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.97rem; }
.potm dt { color: var(--text-3); }
@media (max-width: 900px) { .potm { grid-template-columns: 1fr; } }

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.cat { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.cat__media { overflow: hidden; background: var(--bg-2); aspect-ratio: 3 / 2; }
.cat__media img { width: 100%; height: 100%; object-fit: cover; }
a.cat:hover .cat__media img { transform: scale(1.04); }
.cat h3 { font-size: 1.3rem; }
.cat p { color: var(--text-2); font-size: 0.97rem; }
@media (max-width: 1000px) { .cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cats { grid-template-columns: 1fr; } }

.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 64px 16px; background: rgba(5, 5, 5, 0.96); }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: calc(100vh - 140px); width: auto; object-fit: contain; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); background: rgba(10,10,10,0.6); cursor: pointer; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%) scaleX(-1); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--text-3); font: 600 0.9rem/1 var(--display); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

/* ---------- Team ---------- */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 24px); list-style: none; margin: 0; padding: 0; }
.person { display: grid; gap: 10px; align-content: start; }
.person__media { overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.3rem; }
.person__role { font: 600 0.82rem/1.2 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.person p { color: var(--text-2); font-size: 0.97rem; }
@media (max-width: 960px) { .people { grid-template-columns: 1fr 1fr; } }
.wide-photo { overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Artistry ---------- */
.beauty-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.beauty-list li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.beauty-list strong { font: 700 1.15rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.beauty-list span { color: var(--text-2); font-size: 0.98rem; }
.beauty-list .link-arrow { display: inline-flex; margin-top: 10px; }
@media (max-width: 760px) { .beauty-list { grid-template-columns: 1fr; } .beauty-list li { grid-template-columns: 1fr; gap: 4px; } }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px; list-style: none; margin: 0; padding: 0; }
.quote-grid li { display: grid; gap: 12px; align-content: start; padding: 28px; background: var(--bg-2); }
.section--raised .quote-grid li { background: var(--bg); }
.quote-grid h3 { font-size: 1.25rem; }
.quote-grid p { color: var(--text-2); font-size: 0.98rem; flex: 1; }
.advantages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; }
.advantages li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.advantages p { color: var(--text-2); }
@media (max-width: 900px) { .advantages { grid-template-columns: 1fr; } }
.gallery-strip { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.gallery-strip figure { margin: 0; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 5; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .gallery-strip { grid-template-columns: 1fr 1fr; } }

/* ---------- Prose (policies) ---------- */
.prose { max-width: 72ch; color: var(--text-2); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text); margin: 2.2em 0 0.6em; }
.prose h3 { color: var(--text); margin: 1.8em 0 0.5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose a { color: var(--text); text-decoration-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 104px) 0 calc(28px + env(safe-area-inset-bottom)); font-size: 0.97rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 44px); }
.site-footer__tagline { margin-top: 18px; font: 700 1.2rem/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer__tagline span { display: block; margin-top: 6px; font: 400 0.97rem/1.5 var(--body); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.site-footer__col h2 { font-size: 0.82rem; letter-spacing: 0.22em; font-weight: 700; color: var(--text-3); margin-bottom: 18px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer__col a { color: rgba(244, 244, 242, 0.86); text-decoration: none; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__contact address { color: var(--text-2); }
.socials { display: flex; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); transition: border-color 160ms ease, color 160ms ease; }
.socials a:hover { border-color: var(--accent); color: var(--accent); }
.socials svg { width: 19px; height: 19px; }
.site-footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.88rem; }
@media (max-width: 1040px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #0a0a0a; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--ease-out);
}
.wa-float:active { transform: scale(0.94); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Reveal on scroll (content is visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0.35; transform: translateY(16px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- 404 ---------- */
.notfound { min-height: calc(100svh - var(--nav-h) - 200px); display: grid; place-items: center; text-align: center; padding: 96px 0; }
.notfound .wrap { display: grid; justify-items: center; gap: 24px; }
.notfound .btn-row { justify-content: center; }
.close .btn-row { justify-content: center; }
.lede b { color: var(--text); font-weight: 600; }

/* =====================================================================
   Premium layer: warm blacks, ivory, stone greys and one orange that
   behaves like light. Pills, frosted glass and soft glow.
   ===================================================================== */
:root {
  --night: #0a0908;        /* hero and footer, deepest */
  --bg: #0e0d0c;           /* warm black: page base */
  --bg-2: #171412;         /* graphite: raised sections */
  --card: #201d1a;         /* cards and panels */
  --line: rgba(244, 239, 233, 0.1);
  --line-strong: rgba(244, 239, 233, 0.26);
  --text: #f4efe9;         /* ivory */
  --text-2: #b5aca4;       /* stone: 8.7:1 */
  --text-3: #8a817a;       /* ash: 5.1:1 */
  --accent-hi: #ff7a3a;    /* ember */
  --on-accent: #0e0d0c;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.16);
  --cream: #f2ede8;
  --ink: #1a1816;
  --ink-2: #5e5751;        /* 6.1:1 on cream */
  --burnt: #ad400b;        /* orange on cream: 5.1:1 */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}
body { background: var(--bg); color: var(--text); }

/* Buttons: pill primary with glow, frosted glass partner */
.btn { border-radius: 999px; min-height: 54px; padding: 0 30px; letter-spacing: 0.15em; border-width: 1px; transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-soft); }
.btn--primary {
  background: linear-gradient(180deg, #f57a3d 0%, #f16623 55%, #e05a1a 100%); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(241, 102, 35, 0.28);
}
.btn--outline {
  background: var(--glass); border-color: var(--glass-line); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: linear-gradient(180deg, #f57a3d 0%, #f16623 55%, #e05a1a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 36px rgba(241, 102, 35, 0.5); transform: translateY(-1px); }
  .btn--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
}
.btn:active { transform: scale(0.97); }

/* Text link: label with an orange ring arrow */
.link-arrow { color: var(--text); gap: 12px; }
.link-arrow .arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(241, 102, 35, 0.6); color: var(--accent); transition: background-color 300ms ease, border-color 300ms ease; }
.link-arrow .arrow svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--text); }
  .link-arrow:hover .arrow { background: rgba(241, 102, 35, 0.12); border-color: var(--accent); }
  .link-arrow:hover .arrow svg { transform: translateX(3px); }
}

/* Chip: glass label with a glowing orange dot */
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; margin: 0;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 0.76rem/1.2 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2);
}
.chip__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Header */
.site-header { background: rgba(10, 9, 8, 0.82); border-bottom-color: var(--line); }
.book__toggle { border-radius: 999px; min-height: 44px; padding: 0 20px; background: linear-gradient(180deg, #f57a3d 0%, #f16623 55%, #e05a1a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(241, 102, 35, 0.25); }
@media (hover: hover) and (pointer: fine) { .book__toggle:hover { background: linear-gradient(180deg, #f57a3d 0%, #f16623 55%, #e05a1a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 26px rgba(241, 102, 35, 0.45); } }
.book__menu { border-radius: 18px; overflow: hidden; background: rgba(23, 20, 18, 0.96); border: 1px solid var(--line); }
@media (min-width: 961px) {
  /* Floating glass pill */
  .site-header { top: 12px; margin: 12px clamp(8px, 1.4vw, 20px) 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner {
    max-width: 1240px; padding: 0 10px 0 24px; border-radius: 999px;
    background: rgba(14, 13, 12, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.35);
  }
  /* On the home page the hero runs up behind the floating header */
  .page-home main > .hero:first-child { margin-top: calc(-1 * (var(--nav-h) + 12px)); padding-top: calc(var(--nav-h) + 68px); min-height: 100vh; min-height: 100svh; }
}
/* A backdrop-filter on the header would trap the fixed mobile menu inside its 68px box */
@media (max-width: 960px) { .site-header { background: rgba(10, 9, 8, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav { background: var(--night); } }

/* Hero: night, dimmed tilted wall, orange ribbon of light, ghost word */
.hero { background: var(--night); padding-bottom: 150px; }
.wall { inset: -40px 0; opacity: 0.34; transform: rotate(-4deg) scale(1.12); }
.hero::before { background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(10, 9, 8, 0.55), transparent 75%); }
.hero::after { height: 40%; background: linear-gradient(to bottom, transparent, var(--night)); }
.hero__glow { position: absolute; z-index: -1; left: 50%; top: 30%; width: min(560px, 80vw); height: 360px; transform: translateX(-50%); border-radius: 50%; background: rgba(241, 102, 35, 0.22); filter: blur(90px); pointer-events: none; }
.hero__ribbon { position: absolute; z-index: -1; left: -5%; top: 20%; width: 110%; height: min(520px, 60%); filter: blur(22px); opacity: 0.8; pointer-events: none; }
.hero__copy { gap: 26px; }
.hero__copy h1 { font-size: clamp(2.7rem, 7.6vw, 7.4rem); line-height: 0.9; letter-spacing: 0.01em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.hero__copy h1 span:first-child { font-weight: 200; letter-spacing: 0.05em; }
.hero__copy .lede { color: var(--text-2); font-weight: 300; }
.hero__motto { color: var(--text-3); }
.hero__ghost {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: 0.1em; margin: 0; text-align: center; pointer-events: none;
  font: 800 clamp(7rem, 24vw, 24rem)/0.8 var(--display); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 233, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__ribbon { animation: ribbon 12s ease-in-out infinite; }
}
@keyframes ribbon { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(0deg); } }
@media (max-width: 700px) {
  .hero { padding-bottom: 110px; }
  .hero__ribbon { top: 26%; height: 46%; }
  .chip { font-size: 0.68rem; letter-spacing: 0.16em; padding: 0 14px; }
}

/* Cream panel: floats up over the hero with rounded corners */
.tagline {
  position: relative; z-index: 3; margin: -72px clamp(8px, 1.4vw, 20px) 0; border-radius: 36px; overflow: hidden;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 -24px 60px rgba(10, 9, 8, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tagline__words { color: var(--ink); }
.tagline__words .is-accent, .tagline__dot { color: var(--burnt); }
.tagline__body { color: var(--ink-2); }
.strips { padding-bottom: clamp(20px, 3vw, 40px); }
@media (max-width: 700px) { .tagline { margin-top: -48px; border-radius: 24px; } }

/* Section colour ramp: night > cream > graphite > warm black, alternating */
#work, #story { background: var(--bg-2); }
#create { background: var(--bg); }
#work { padding-top: clamp(104px, 13vw, 180px); margin-top: -36px; }
#story { background: radial-gradient(900px 420px at 88% 0%, rgba(241, 102, 35, 0.08), transparent 62%), var(--bg-2); }
.section--raised { background: var(--bg-2); }
.trusted { background: var(--bg); border-top-color: var(--line); }
#enquiry { background: radial-gradient(900px 480px at 12% 0%, rgba(241, 102, 35, 0.07), transparent 60%), var(--bg-2); }

/* Glass frames on cards */
.work__item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--card); border-color: rgba(255, 255, 255, 0.1); border-radius: 22px; padding: 12px 12px 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px rgba(0, 0, 0, 0.25); }
.work__item:hover { border-color: rgba(255, 255, 255, 0.22); }
.work__media { border-radius: 14px; background: var(--bg); }
.work__item h3, .work__item .work__meta, .work__item .link-arrow { padding-inline: 6px; }
.tile { border-radius: 22px; }
#story .story__media { border-radius: 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.embed-fallback { border-radius: 22px; background: var(--card); }

/* Glass socials, lightbox circles and the WhatsApp bubble */
.socials a { border-radius: 12px; background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease; }
.socials a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); }
.socials svg { width: 17px; height: 17px; }
.lightbox__btn { border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lightbox__next { background: var(--text); color: var(--bg); border-color: transparent; }

/* Footer closes the page in night */
.site-footer { background: var(--night); border-top-color: var(--line); }
.site-footer__col a { color: rgba(244, 239, 233, 0.86); }

/* Tighter hand-off from Featured Work into What We Create */
#work { padding-bottom: clamp(40px, 5vw, 72px); }
#create { padding-top: clamp(64px, 7vw, 104px); }
.work__all { margin-top: clamp(24px, 3vw, 36px); }

/* Ivory button: on photos and glass */
.btn--ivory { background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
@media (hover: hover) and (pointer: fine) { .btn--ivory:hover { background: #fff; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18); } }

/* Closing call to action: glass card over a ribbon of light */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 11vw, 168px) 0 0; background: linear-gradient(180deg, var(--bg) 0%, var(--night) 30%); }
.finale__ribbon { position: absolute; z-index: -1; left: -5%; top: 4%; width: 110%; height: 460px; filter: blur(26px); opacity: 0.7; pointer-events: none; }
.finale__glow { position: absolute; z-index: -1; left: 22%; top: 140px; width: 420px; height: 280px; border-radius: 50%; background: rgba(120, 110, 100, 0.25); filter: blur(90px); pointer-events: none; }
.finale__wrap { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.finale__card {
  display: grid; justify-items: center; gap: 22px; text-align: center; padding: clamp(36px, 5vw, 60px) clamp(22px, 5vw, 60px);
  border-radius: 30px; background: rgba(22, 20, 18, 0.5); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px rgba(0, 0, 0, 0.5);
}
.finale__card .chip { font-size: 0.7rem; min-height: 34px; padding: 0 14px; }
.finale h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 0.95; }
.finale__light { font-weight: 200; letter-spacing: 0.05em; }
.finale__body { max-width: 42ch; margin: 0; font-weight: 300; color: var(--text-2); }
.finale .btn-row { justify-content: center; }
.finale__socials { margin: 4px 0 0; }
.finale__ghost {
  position: relative; z-index: 1; margin: 30px 0 0; text-align: center; pointer-events: none;
  font: 800 clamp(5.5rem, 26vw, 26rem)/0.78 var(--display); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 233, 0.09);
}
@media (prefers-reduced-motion: no-preference) { .finale__ribbon { animation: ribbon 12s ease-in-out infinite; } }
@media (max-width: 700px) { .finale .btn-row { flex-direction: column; align-self: stretch; } .finale .btn { width: 100%; } .finale__ghost { font-size: 26vw; } }

/* ---------- Client voices: a deck that deals itself ----------
   Default (no JavaScript or reduced motion): a simple list of cards.
   With motion: cards sit in a leaning stack; every few seconds the front card
   lifts and tilts back off the top as the next rises into focus, then joins
   the back of the deck. Hover or focus pauses it so the review can be read. */
.voices { position: relative; padding: var(--space-section) 0; background: radial-gradient(900px 520px at 50% 60%, rgba(241, 102, 35, 0.08), transparent 65%), var(--bg); overflow: hidden; }
.voices__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.voices__count { margin: 0; font: 600 0.82rem/1 var(--display); letter-spacing: 0.22em; color: var(--text-3); white-space: nowrap; }
.voices__count span { color: var(--text); }
.voices__deck { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 20px; max-width: calc(1100px + 2 * var(--gutter)); }
.voice { border-radius: 20px; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75); }
.voice__inner { display: flex; gap: clamp(14px, 1.6vw, 22px); height: 100%; margin: 0; padding: clamp(16px, 2vw, 26px); }
.voice__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 4px; }
.voice__kicker { margin: 0; font: 600 0.72rem/1.3 var(--display); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.8; }
.voice__quote { margin: auto 0 0; }
.voice__quote p { margin: 0; font: 400 clamp(1rem, 1.4vw, 1.25rem)/1.45 var(--body); text-wrap: pretty; }
.voice.is-mid .voice__quote p { font-size: clamp(0.95rem, 1.15vw, 1.08rem); line-height: 1.5; }
.voice.is-long .voice__quote p { font-size: 0.92rem; line-height: 1.5; }
.voice__quote--studio { margin: auto 0 0; font: 800 clamp(1.6rem, 2.9vw, 2.5rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance; }
.voice__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.voice__stars { display: flex; gap: 3px; }
.voice__stars svg { width: 16px; height: 16px; fill: currentColor; }
.voice__name { font: 800 clamp(1.05rem, 1.5vw, 1.35rem)/1 var(--display); font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; }
.voice__cta { min-height: 40px; padding: 0 18px; font-size: 0.76rem; }
.voice__media { flex: 0 0 44%; min-height: 180px; border-radius: 12px; background: rgba(0, 0, 0, 0.18) center / cover no-repeat; }

/* Tones from the Charis palette; each pairs text that passes AA */
.voice--ember { background: linear-gradient(160deg, #f57a3d 0%, #f16623 50%, #e05a1a 100%); color: #0e0d0c; }
.voice--ivory { background: #f4efe9; color: var(--ink); }
.voice--ivory .voice__stars { color: var(--burnt); }
.voice--graphite { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--card); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.1); }
.voice--graphite .voice__stars { color: var(--accent); }
.voice--burnt { background: linear-gradient(160deg, #b8460f 0%, #ad400b 60%, #963608 100%); color: var(--text); }

@media (max-width: 760px) {
  .voice__inner { flex-direction: column-reverse; }
  .voice__media { flex: 0 0 auto; min-height: 0; height: 40%; }
  .voice__copy { gap: 12px; }
  .voice__quote p { font-size: 1.05rem; }
  .voice.is-mid .voice__quote p { font-size: 0.98rem; }
  .voice.is-long .voice__quote p { font-size: 0.9rem; line-height: 1.45; }
  .voice__quote--studio { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .voices__deck { position: relative; display: block; max-width: none; height: clamp(320px, 34vw, 420px); margin: 0; padding: 0; perspective: 1200px; }
  .js .voice {
    position: absolute; top: 46%; left: 50%; width: min(820px, 100% - 2 * var(--gutter)); height: 80%;
    transform-origin: center bottom; will-change: transform, opacity; backface-visibility: hidden;
    transform: translate(-50%, -50%);
  }
  .js .voice__inner { overflow: hidden; }
  .js .voice__inner > * { opacity: var(--c, 1); }
  .js .voice__copy { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  @media (max-width: 760px) {
    .js .voices__deck { height: min(520px, 96vw + 120px); }
    .js .voice { width: calc(100% - 40px); height: 84%; top: 48%; }
  }
}

/* Tighter hand-off from What We Create into the About section */
#create { padding-bottom: clamp(48px, 6vw, 88px); }
#story { padding-top: clamp(56px, 7vw, 104px); }

/* Tighter hand-off from the journey ("We sell peace of mind") into client voices */
#experience { padding-bottom: clamp(48px, 6vw, 88px); }
.voices { padding-top: clamp(56px, 7vw, 104px); }

/* Tighter vertical rhythm site-wide: sections sat 168px apart on each side,
   which read as dead space between them. */
:root { --space-section: clamp(64px, 8vw, 112px); }
.voices { padding-bottom: clamp(48px, 6vw, 80px); }
#starting-points { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- Projects: trailers (muted previews play in view; click for the full film) ---------- */
.trailers .section-head { justify-items: start; }
.trailers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trailer { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; background: var(--card); cursor: pointer; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); transition: transform 400ms var(--ease-soft), box-shadow 400ms ease, border-color 300ms ease; }
.trailer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0.15) 55%, transparent 100%); }
.trailer__play { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 300ms ease, transform 300ms var(--ease-soft); }
.trailer__play svg { width: 20px; height: 20px; fill: var(--text); margin-left: 3px; }
.trailer__meta { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 4px; text-align: left; }
.trailer__type { font: 600 0.72rem/1.2 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.trailer__title { font: 800 1.3rem/1 var(--display); text-transform: uppercase; color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .trailer:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 26px 50px -20px rgba(241, 102, 35, 0.35); }
  .trailer:hover .trailer__play { background: linear-gradient(180deg, #f57a3d, #f16623 55%, #e05a1a); border-color: transparent; transform: translate(-50%, -50%) scale(1.06); }
}
.trailer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .trailers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trailers__grid { grid-template-columns: 1fr; } }
.trailer-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10, 9, 8, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.trailer-modal[hidden] { display: none; }
.trailer-modal__box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); }
.trailer-modal__box video { width: 100%; height: 100%; display: block; }
.trailer-modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(10, 9, 8, 0.6); color: var(--text); cursor: pointer; }
.trailer-modal__close svg { width: 18px; height: 18px; }

/* ---------- Gallery collages: every photo keeps its own shape (portraits stay
   portrait, landscapes stay landscape) with the same gap on every side ---------- */
.collage-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.collage-back .arrow svg { transform: rotate(180deg); }
.collage-section { padding-bottom: var(--space-section); }
.collage { --gap: 12px; list-style: none; margin: 0; padding: 0; columns: 3 280px; column-gap: var(--gap); }
.collage__item { break-inside: avoid; margin: 0 0 var(--gap); }
.collage__item a { display: block; border-radius: 14px; overflow: hidden; background: var(--card); cursor: zoom-in; }
.collage__item img { display: block; width: 100%; height: auto; transition: transform 600ms var(--ease-soft), opacity 400ms ease; }
@media (hover: hover) and (pointer: fine) { .collage__item a:hover img { transform: scale(1.03); } }
.collage__item a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 1200px) { .collage { columns: 4 260px; } }
@media (max-width: 520px) { .collage { --gap: 8px; columns: 2 140px; } .collage__item a { border-radius: 10px; } }
.collage-empty { display: grid; justify-items: start; gap: 22px; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); }

/* ---------- Projects hero: gallery cards turning on one shared circular arc ---------- */
.arc-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 64px); background: radial-gradient(700px 520px at 75% 50%, rgba(241, 102, 35, 0.12), transparent 65%), var(--night); overflow: hidden; }
.arc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); }
.arc-hero__copy { gap: 24px; align-content: center; }
.arc { position: relative; height: min(78vh, 720px); aspect-ratio: 0.62; display: none; }
.js .arc { display: block; }
.arc__stage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; border-radius: 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); }
.arc__stage.is-dragging { cursor: grabbing; }
.arc-card { position: absolute; left: 0; top: 0; width: 91.5%; aspect-ratio: 1.75 / 1; display: block; text-decoration: none; color: var(--text); transform-origin: center; backface-visibility: hidden; will-change: transform, filter; -webkit-tap-highlight-color: transparent; container-type: inline-size; }
.arc-card__motion { position: absolute; inset: 0; display: block; transform-origin: center; will-change: transform; }
.arc-card__surface { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: max(10px, 3%); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.45); transition: transform 360ms cubic-bezier(.2, .78, .2, 1), box-shadow 360ms cubic-bezier(.2, .78, .2, 1); }
.arc-card__surface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.arc-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0.1) 55%, rgba(10, 9, 8, 0.35) 100%); }
.arc-card__top { position: absolute; left: 6%; right: 6%; top: 8%; display: flex; justify-content: space-between; font: 600 clamp(8px, 2.6cqw, 12px)/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 233, 0.82); }
.arc-card__top span:first-child { color: var(--accent); }
.arc-card__title { position: absolute; left: 6%; right: 6%; bottom: 9%; font: 800 clamp(18px, 8.5cqw, 40px)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
@media (hover: hover) and (pointer: fine) {
  .arc-card:hover .arc-card__surface { transform: scale(1.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 26px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(241, 102, 35, 0.4); }
}
.arc-card:focus-visible .arc-card__surface { outline: 2px solid var(--accent); outline-offset: 3px; }
.arc__hint { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; margin: 0; font: 600 0.68rem/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(244, 239, 233, 0.6); pointer-events: none; z-index: 5; }
.arc__hint i { width: 18px; height: 1px; background: currentColor; }
@media (max-width: 900px) {
  .arc-hero__grid { grid-template-columns: 1fr; }
  .arc { height: auto; width: 100%; max-width: 440px; aspect-ratio: 0.72; justify-self: center; }
}
@media (hover: none) { .arc__hint span:last-child, .arc__hint i { display: none; } }
@media (prefers-reduced-motion: reduce) { .arc-card__surface { transition: none; } }
.arc-hero__copy .chip { justify-self: start; }
.arc-hero__copy > p:last-child { margin: 0; }
/* titles sit near the top so they stay readable where cards overlap */
.arc-card__title { top: 20%; bottom: auto; max-width: 70%; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.arc-card__shade { background: linear-gradient(to bottom, rgba(10, 9, 8, 0.75) 0%, rgba(10, 9, 8, 0.15) 55%, rgba(10, 9, 8, 0.35) 100%); }

/* ---------- Services hero: full-bleed photograph under a warm night wash ---------- */
.svc-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(78vh, 760px); display: grid; align-items: end; padding: clamp(120px, 16vw, 200px) 0 clamp(48px, 7vw, 88px); background: var(--night); }
.svc-hero__media { position: absolute; inset: 0; z-index: -2; }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.svc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--night) 0%, rgba(10, 9, 8, 0.72) 38%, rgba(10, 9, 8, 0.25) 75%, rgba(10, 9, 8, 0.45) 100%), linear-gradient(to right, rgba(10, 9, 8, 0.7) 0%, transparent 60%); }
.svc-hero__copy { gap: 22px; max-width: 760px; }
.svc-hero__copy .chip { justify-self: start; }
.svc-hero__copy h1 { text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.svc-hero__copy .lede { color: rgba(244, 239, 233, 0.86); }
@media (prefers-reduced-motion: no-preference) {
  .svc-hero__media img { animation: svc-drift 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
}
@keyframes svc-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-1%, 1%); } }

/* ---------- Header: give the logo room so it never touches the pill's edge ---------- */
.brand { padding-right: 4px; }
.brand img { height: 34px; flex: none; }
@media (min-width: 961px) {
  .site-header__inner { padding-left: 30px; }
}
@media (max-width: 960px) {
  .site-header__inner { padding-left: max(var(--gutter), 18px); }
}
@media (min-width: 961px) {
  /* the services photograph runs up behind the floating header, like the home hero */
  .page-services main > .svc-hero:first-child { margin-top: calc(-1 * (var(--nav-h) + 12px)); }
}

/* Projects: reel highlights, a row of vertical 9:16 cards */
.reels .section-head { justify-items: start; }
.reels__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.trailer--reel { aspect-ratio: 9 / 16; border-radius: 18px; }
.trailer--reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.trailer--reel .trailer__play { width: 50px; height: 50px; top: 50%; }
.trailer--reel .trailer__meta { left: 14px; right: 14px; bottom: 14px; }
.trailer--reel .trailer__title { font-size: 1.05rem; line-height: 1.05; }
.trailer--reel .trailer__type { font-size: 0.64rem; letter-spacing: 0.18em; }
.trailer-modal__box.is-vertical { width: auto; height: min(86vh, 860px, calc((100vw - 40px) * 16 / 9)); aspect-ratio: 9 / 16; max-width: 100%; }
.trailer-modal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.trailer-modal__box video[hidden] { display: none; }
@media (max-width: 1000px) {
  .reels__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
  .reels__row > li { scroll-snap-align: start; }
}
@media (max-width: 560px) { .reels__row { grid-auto-columns: 62%; } }

/* Projects: galleries, trailers and reels read as one run, so they sit closer together */
.page-projects #galleries { padding-bottom: clamp(24px, 3vw, 40px); }
.page-projects .trailers { padding-block: clamp(32px, 4vw, 56px); }
.page-projects .reels { padding-top: clamp(32px, 4vw, 56px); }

/* Featured work: a film card plays silently on a loop like a moving photo */
.work__media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* About: the full team photo stays landscape and gets the wider column */
.story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#story .story__media { aspect-ratio: 3 / 2; }
#story .story__media img { object-position: 50% 50%; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } #story .story__media { aspect-ratio: 3 / 2; } }

/* Projects hero: a faint photograph behind the copy and the card deck */
.arc-hero { position: relative; isolation: isolate; }
.arc-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.arc-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.2; filter: grayscale(1) contrast(1.05); }
.arc-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 520px at 75% 50%, rgba(241, 102, 35, 0.12), transparent 65%),
    linear-gradient(90deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.35) 55%, rgba(10, 9, 8, 0.55) 100%),
    linear-gradient(to bottom, rgba(10, 9, 8, 0.4), transparent 30%, transparent 70%, var(--night)); }

/* Services hero: keep the couple's heads clear of the floating header.
   The photo starts below the header and fades in at its top edge. */
.svc-hero__media img { object-position: 50% 0; transform-origin: 50% 0; }
@media (min-width: 961px) {
  .page-services .svc-hero__media { top: calc(var(--nav-h) + 4px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px); mask-image: linear-gradient(to bottom, transparent 0, #000 110px); }
}

/* Services: photo and words alternate sides; every photo sits in a rounded frame */
.offer__intro { align-items: center; }
.offer__intro--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.offer__intro--flip .offer__media { order: -1; }
.offer__media { border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.offer__media img { border-radius: inherit; }
@media (max-width: 900px) {
  .offer__intro--flip { grid-template-columns: 1fr; }
  .offer__intro--flip .offer__media { order: 0; }
  .offer__media { border-radius: 18px; }
}

/* Services: package cards and guide tiles get the same curved, lifted card as the rest of the site */
.package { border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--bg-2); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -18px rgba(0, 0, 0, 0.45); transition: border-color 300ms ease, transform 400ms var(--ease-out); }
.package--featured { border-color: rgba(241, 102, 35, 0.45); box-shadow: inset 0 2px 0 var(--accent), 0 24px 50px -20px rgba(241, 102, 35, 0.25); }
@media (hover: hover) and (pointer: fine) { .package:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-3px); } .package--featured:hover { border-color: rgba(241, 102, 35, 0.7); } }
.guides { gap: 10px; }
.guides a { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 640px) { .package { border-radius: 20px; } }
.subnav a { border-radius: 999px; }

/* Closing call-to-action on every page: ribbons of orange and silver light,
   fine streaks on top, a faint dot grid, then the frosted card. */
.finale::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(244, 239, 233, 0.08) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 0%, transparent 75%); }
.finale__pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.finale__haze, .finale__lines { position: absolute; left: -6%; top: 0; width: 112%; height: min(560px, 85%); }
.finale__haze { filter: blur(34px); opacity: 0.78; }
.finale__lines { filter: blur(0.4px); opacity: 0.9; }
.finale__card { background: rgba(22, 20, 18, 0.42); }
@media (prefers-reduced-motion: no-preference) {
  .finale__haze { animation: finale-drift 14s ease-in-out infinite alternate; }
  .finale__lines { animation: finale-drift 14s ease-in-out infinite alternate-reverse; }
}
@keyframes finale-drift { from { transform: translate3d(-1.5%, 0, 0) scaleY(1); } to { transform: translate3d(1.5%, 2%, 0) scaleY(1.06); } }
@media (max-width: 700px) { .finale__haze, .finale__lines { height: 60%; top: 4%; } }
.finale__haze { opacity: 1; filter: blur(30px) saturate(1.15); }
.finale__glow { left: 50%; top: 120px; width: min(640px, 80vw); height: 340px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(241, 102, 35, 0.28), rgba(141, 155, 176, 0.18) 60%, transparent); filter: blur(60px); }

/* Policy pages */
.policy-updated { margin: 0; color: var(--text-3); font-size: 0.95rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose .card { margin: 1.6em 0; padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-2); }
.prose .card a { color: var(--accent); }
.policy-hero { padding-bottom: clamp(16px, 2vw, 28px); }
.policy-body { padding-top: clamp(8px, 1.5vw, 20px); }
.policy-hero .page-hero__inner { gap: 12px; }

/* Review cards: the reviewer's own photo fills the photo column; without one the words take the full card */
.voice__media { position: relative; overflow: hidden; }
.voice__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice--nophoto .voice__copy { flex: 1 1 auto; max-width: none; }
.voice--nophoto .voice__quote { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; max-width: 34ch; }

/* ---------- About: layered photo, glass badge, ghost year, two-weight heading ---------- */
#story { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(700px 420px at 18% 55%, rgba(241, 102, 35, 0.14), transparent 65%),
              radial-gradient(800px 400px at 92% 10%, rgba(141, 155, 176, 0.08), transparent 60%), var(--bg-2); }
.story__ghost { position: absolute; z-index: -1; left: 50%; bottom: -0.12em; transform: translateX(-50%); margin: 0; pointer-events: none; white-space: nowrap;
  font: 800 clamp(5rem, 17vw, 17rem)/0.8 var(--display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 233, 0.07); }
.story__visual { position: relative; padding: 0 18px 18px 0; }
.story__frame { position: absolute; inset: 18px 0 0 18px; border-radius: 26px; border: 1px solid rgba(241, 102, 35, 0.55);
  background: linear-gradient(135deg, rgba(241, 102, 35, 0.12), transparent 55%); box-shadow: 0 0 60px -20px rgba(241, 102, 35, 0.5); }
#story .story__media { position: relative; z-index: 1; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
#story .story__media img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .story__visual:hover .story__media img { transform: scale(1.03); } }
.story__badge { position: absolute; z-index: 2; left: -14px; bottom: 34px; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 20px 14px 16px;
  border-radius: 18px; background: rgba(18, 16, 14, 0.62); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); }
.story__badge b { font: 800 2.6rem/1 var(--display); color: var(--accent); }
.story__badge span { font: 600 0.72rem/1.25 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.story__copy { gap: 22px; }
.story__copy .chip { justify-self: start; }
#story h2 { line-height: 0.95; }
.story__light { display: block; font-weight: 200; letter-spacing: 0.04em; }
.facts--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0; border: 0; margin: 4px 0 0; }
.facts--tiles > div { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.facts--tiles dd { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
@media (max-width: 860px) {
  .story__visual { padding: 0 12px 12px 0; }
  .story__frame { inset: 12px 0 0 12px; border-radius: 20px; }
  .story__badge { left: 10px; bottom: 24px; padding: 10px 14px 10px 12px; }
  .story__badge b { font-size: 2rem; }
}

/* Projects: gallery cards framed like the featured-work cards */
.cats > li { display: flex; }
.cat { flex: 1; align-content: start; grid-template-rows: auto auto 1fr auto; padding: 12px 12px 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--bg-2);
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -18px rgba(0, 0, 0, 0.5);
  transition: border-color 300ms ease, transform 400ms var(--ease-out); }
.cat__media { border-radius: 14px; }
.cat h3, .cat p, .cat .link-arrow { padding-inline: 6px; }
.cat h3 { margin-top: 6px; }
.cat .link-arrow { align-self: end; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { a.cat:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-3px); } }

/* Projects hero: a trailer plays softly behind everything (the photo shows until it starts, and on phones) */
.arc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.arc-hero__video.is-playing { opacity: 0.38; }
.arc-hero__bg:has(.arc-hero__video.is-playing) img { opacity: 0; transition: opacity 1.2s ease; }

/* Home hero: same centred layout, lighter type so the photo wall shows more */
.hero__copy h1 { font-size: clamp(2.1rem, 4.8vw, 4.4rem); }
.hero__copy { gap: 20px; }
.hero__copy .lede { font-size: clamp(0.98rem, 1.15vw, 1.1rem); }
@media (max-width: 700px) { .hero__copy h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } }