/* chaarawi.com
   Layout concept: an editorial yearbook on ivory. Large photographs, serif display type,
   and one claret hairline that divides Head Office (left) from Shop Floor (right).
   Tokens mirror the "Said Chaarawi" design system (tokens.json). Change values here only. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* colour */
  --ivory: #F6F1E9;
  --stone: #E6DDD0;
  --ink: #2A2326;
  --ink-soft: #655B5E;
  --claret: #7A1F2B;
  --claret-deep: #5E1721;
  --on-claret: #F6F1E9;
  --champagne: #B9A27A;
  --rule: rgba(42, 35, 38, 0.16);
  /* type */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-text: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --fs-d1: clamp(56px, 8.4vw, 112px);
  --fs-d2: clamp(40px, 5.4vw, 72px);
  --fs-d3: clamp(32px, 3.6vw, 48px);
  --fs-num: clamp(52px, 6.4vw, 88px);
  --fs-quote: clamp(24px, 2.6vw, 34px);
  --fs-title: clamp(24px, 2.2vw, 30px);
  --fs-word: clamp(20px, 2vw, 26px);
  --fs-lead: clamp(18px, 1.5vw, 21px);
  --fs-body: 17px;
  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px;
  --sec: clamp(64px, 9vw, 128px);
  /* grid */
  --grid-max: 1320px;
  --grid-gutter: 24px;
  --grid-margin: clamp(16px, 5vw, 80px);
  --measure: 62ch;
  --hairline: 1px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 var(--fs-body)/1.7 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--claret); color: var(--on-claret); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--grid-max) + 2 * var(--grid-margin)); margin-inline: auto; padding-left: max(var(--grid-margin), env(safe-area-inset-left, 0px)); padding-right: max(var(--grid-margin), env(safe-area-inset-right, 0px)); }
.sec { padding-block: var(--sec); }
.sec--stone { background: var(--stone); --ground: var(--stone); }
.sec--tight { padding-block: calc(var(--sec) * 0.6); }
.sec__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 780px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); }

/* ---------- type ---------- */
.d1 { font: 300 var(--fs-d1)/0.95 var(--font-display); letter-spacing: -0.01em; }
.d2 { font: 300 var(--fs-d2)/1.02 var(--font-display); letter-spacing: -0.005em; text-wrap: balance; }
.d3 { font: 300 var(--fs-d3)/1.1 var(--font-display); text-wrap: balance; }
.d2 em, .d3 em, .d1 em { font-style: italic; color: var(--claret); }
.title { font: 500 var(--fs-title)/1.2 var(--font-display); }
.lead { font: 300 var(--fs-lead)/1.55 var(--font-text); color: var(--ink-soft); max-width: 52ch; }
.small { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.prose { display: grid; gap: var(--space-4); max-width: var(--measure); }
.sc-label { display: block; font: 500 12px/1.3 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.sc-label--claret { color: var(--claret); }

/* ---------- buttons and links ---------- */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-6); font: 500 13px/1 var(--font-text); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--on-claret); background: var(--claret); border: 1px solid var(--claret); border-radius: 0; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.sc-btn:hover { background: var(--claret-deep); border-color: var(--claret-deep); }
.sc-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.sc-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.sc-btn--ivory { background: var(--ivory); color: var(--claret); border-color: var(--ivory); }
.sc-btn--ivory:hover { background: var(--stone); border-color: var(--stone); color: var(--claret-deep); }
.sc-btn--text { min-height: 0; padding: var(--space-2) 0; background: transparent; border-color: transparent; color: var(--claret); }
.sc-btn--text::after { content: ""; width: 32px; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.sc-btn--text:hover { background: transparent; border-color: transparent; color: var(--claret-deep); }
.sc-btn--text:hover::after { width: 56px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sec--claret :focus-visible { outline-color: var(--ivory); }
.sc-link { color: var(--ink); text-decoration: none; background: linear-gradient(var(--claret), var(--claret)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: color 0.3s; }
.sc-link:hover { color: var(--claret); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); align-items: center; }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ivory); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header-h); background: var(--ivory); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.is-scrolled .site-header { border-bottom-color: var(--rule); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-name { font: 500 26px/1 var(--font-display); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; }
.sc-nav { display: flex; gap: var(--space-6); align-items: center; }
.sc-nav a { position: relative; padding: var(--space-2) 0; font: 500 13px/1.2 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.sc-nav a::after { content: ""; position: absolute; left: 0; right: 0.16em; bottom: 0; height: 1px; background: var(--claret); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.sc-nav a:hover::after, .sc-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sc-nav a[aria-current="page"] { color: var(--claret); }
.menu-btn { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; background: none; border: 0; font: 500 13px/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.menu-btn i { display: block; width: 22px; height: 7px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: height 0.3s; }
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .site-name { font-size: 22px; }
  .menu-btn { display: inline-flex; }
  .sc-nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-5); padding: var(--space-7) max(var(--grid-margin), env(safe-area-inset-left, 0px)); background: var(--ivory); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
  .sc-nav a { font: 300 44px/1.1 var(--font-display); letter-spacing: 0; text-transform: none; }
  .nav-open .sc-nav { opacity: 1; visibility: visible; }
  .nav-open .menu-btn i { height: 1px; }
  .nav-open { overflow: hidden; }
}

/* ---------- the hairline and two worlds ---------- */
.sc-hairline { width: var(--hairline); align-self: stretch; background: var(--claret); }
.worlds { display: grid; grid-template-columns: minmax(0, 1fr) var(--hairline) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); }
.world { display: grid; gap: var(--space-5); align-content: start; }
.world--left { text-align: right; justify-items: end; }
.world p { max-width: 38ch; }
.world ul { display: grid; gap: var(--space-2); font: 500 var(--fs-word)/1.3 var(--font-display); }
.world .sc-slot { width: min(100%, 300px); }
@media (max-width: 760px) {
  .worlds { grid-template-columns: 1fr; row-gap: var(--space-7); }
  .worlds .sc-hairline { width: 100%; height: var(--hairline); }
  .world--left { text-align: left; justify-items: start; }
}

/* ---------- outline type ---------- */
.sc-outline { --fill: 100%; --ground: var(--ivory); position: relative; display: block; width: fit-content; max-width: 100%; font: 500 clamp(34px, 6.2vw, 92px)/1.05 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--ground); -webkit-text-stroke: 2px var(--claret); paint-order: stroke fill; }
.sc-outline::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; color: var(--claret); -webkit-text-stroke: 1px var(--claret); clip-path: inset(-10% calc(100% - var(--fill)) -10% 0); }
.sec--stone .sc-outline { --ground: var(--stone); }

/* ---------- slots ---------- */
.sc-slot { position: relative; display: block; background: var(--stone); overflow: hidden; }
.sec--stone .sc-slot { background: var(--ivory); }
.sc-slot > img, .sc-slot > video, .ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph { position: relative; overflow: hidden; background: var(--stone); }
.sc-slot__tag { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 3; display: grid; gap: 2px; max-width: min(300px, calc(100% - 24px)); padding: var(--space-2) var(--space-3); background: var(--ivory); color: var(--ink); text-align: left; }
.sc-slot__tag b { font: 500 10px/1.3 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--claret); }
.sc-slot__tag span { font: 400 12px/1.4 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.sc-slot__word { position: absolute; inset: 0 0 20% 0; display: grid; place-items: center; font: italic 300 clamp(28px, 4vw, 52px)/1 var(--font-display); color: var(--ink-soft); }
.slot-note { display: inline-grid; gap: 2px; margin-top: var(--space-5); padding: var(--space-2) var(--space-3); border: 1px dashed var(--ink-soft); }
.slot-note b { font: 500 10px/1.3 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--claret); }
.slot-note span { font: 400 12px/1.4 var(--font-text); color: var(--ink-soft); }
[data-slots="off"] .sc-slot__tag, [data-slots="off"] .slot-note { display: none; }
.slots-toggle { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 70; padding: 10px 14px; background: var(--ink); color: var(--ivory); border: 0; font: 500 11px/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .wipe > img, .js .wipe > video { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .wipe--r > img, .js .wipe--r > video { clip-path: inset(0 0 0 100%); }
.js .wipe.in > img, .js .wipe.in > video { clip-path: inset(0 0 0 0); }
.js .turn { opacity: 0; transform: perspective(1400px) rotateY(-28deg); transform-origin: left center; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js .turn.in { opacity: 1; transform: none; }
.js .rise { opacity: 0; transform: translateY(48px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js .rise.in { opacity: 1; transform: none; }

/* ---------- HOME: The Split ---------- */
.split { --line: 1; --part: 1; --head: 1; --write: 1; --fold: 0; --plate-h: 300px; position: relative; }
.split__stage { position: relative; height: calc(100svh - var(--header-h)); min-height: 560px; overflow: hidden; background: var(--ivory); perspective: 1800px; }
.split.is-live { height: 320vh; } /* 12 Nov: was 360vh with a fold away at the end */
.split.is-live .split__stage { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.split__intro { position: absolute; inset: 9% 0 auto 0; z-index: 1; display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding-inline: 16px; }
.split__panel { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; overflow: hidden; background: var(--stone); backface-visibility: hidden; will-change: transform; }
.split__panel img { width: 100%; height: 100%; object-fit: cover; }
.split__panel--l { left: 0; transform-origin: right center; transform: translateX(calc((var(--part) - 1) * 101%)) rotateY(calc(var(--fold) * 96deg)); }
.split__panel--r { right: 0; transform-origin: left center; transform: translateX(calc((1 - var(--part)) * 101%)) rotateY(calc(var(--fold) * -96deg)); }
.split__panel--l img { object-position: 42% 40%; }
.split__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 35, 38, 0.5) 0%, rgba(42, 35, 38, 0) 26%); }
.split__world { position: absolute; top: clamp(16px, 3vw, 36px); z-index: 2; font: 500 12px/1.3 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory); }
.split__panel--l .split__world { left: clamp(16px, 3vw, 40px); }
.split__panel--r .split__world { right: clamp(16px, 3vw, 40px); }
.split__panel .sc-slot__tag { bottom: auto; top: clamp(44px, 6vw, 76px); left: auto; right: clamp(12px, 3vw, 40px); }
.split__tag { display: flex; align-items: center; gap: var(--space-4); margin: 0; font: italic 300 clamp(19px, 1.9vw, 26px)/1.3 var(--font-display); color: var(--ink-soft); }
.split__tag-rule { width: 48px; height: 1px; background: var(--claret); }
.split__line { position: absolute; left: calc(50% - 0.5px); top: 0; z-index: 3; opacity: var(--line); width: var(--hairline); height: 100%; background: var(--claret); transform: scaleY(var(--line)); transform-origin: top; }
.split__portrait { position: absolute; left: 50%; bottom: calc(var(--head) * var(--plate-h) * 0.7); z-index: 5; height: calc(64% - var(--head) * var(--plate-h) * 0.32); width: auto; max-width: none; transform: translateX(-50%) scale(calc(1 + var(--part) * 0.14)); filter: drop-shadow(0 18px 24px rgba(42, 35, 38, 0.14)); transform-origin: 50% 100%; }
.split__plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--ivory); border-top: 1px solid var(--rule); transform: translateY(calc((1 - var(--head)) * 101%)); }
.split__plate .wrap { display: grid; justify-items: center; gap: var(--space-3); padding-block: clamp(18px, 2.4vw, 32px); text-align: center; }
.split__h1 { max-width: 24ch; font: 300 clamp(25px, 3.1vw, 44px)/1.08 var(--font-display); letter-spacing: -0.005em; text-wrap: balance; clip-path: inset(-5% calc((1 - var(--write)) * 100%) -5% 0); }
.split__h1 em { font-style: italic; color: var(--claret); }
.split__plate .lead { max-width: 60ch; font-size: clamp(15px, 1.3vw, 19px); opacity: var(--write); }
.split__plate .btn-row { justify-content: center; opacity: var(--write); }
.split__cue { position: absolute; left: max(var(--grid-margin), env(safe-area-inset-left, 0px)); bottom: clamp(20px, 4vw, 40px); z-index: 4; display: none; align-items: center; gap: var(--space-3); opacity: calc(1 - var(--line) * 3); }
.split__cue::before { content: ""; width: 1px; height: 40px; background: var(--claret); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
.split.is-live .split__cue { display: flex; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  .split__portrait { height: calc(56% - var(--head) * var(--plate-h) * 0.28); }
  .split__panel .sc-slot__tag span { display: none; }
  .split__plate .lead { font-size: 14px; }
  .split__plate .sc-btn--text { display: none; }
  .slots-toggle { padding: 8px 10px; font-size: 9px; opacity: 0.85; }
  .split__intro { inset: 5% 0 auto 0; gap: var(--space-3); }
  .split__tag { display: block; font-size: 18px; }
  .split__tag-rule { display: inline-block; vertical-align: middle; width: 20px; margin: 0 6px; }
  .split.is-live { height: 320vh; }
}
@media (max-height: 620px) and (min-width: 761px) { .split__h1 { font-size: 30px; } .split__plate .lead { display: none; } }

/* ---------- credentials ---------- */
.creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.creds > div { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5); }
.creds > div + div { border-left: 1px solid var(--rule); }
.creds > div:first-child { padding-left: 0; }
.creds b { font: 300 var(--fs-num)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 760px) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds > div { padding: var(--space-5) var(--space-4); }
  .creds > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .creds > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.card { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--ivory); }
.card--line { padding: var(--space-6) 0 0; background: none; border-top: 1px solid var(--ink); }
.card .sc-btn--text { justify-self: start; margin-top: var(--space-2); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* case cards */
.case { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-4); padding: var(--space-6); background: var(--stone); min-width: 0; }
.sec--stone .case { background: var(--ivory); }
.case__medal { height: 96px; width: auto; }
.case__fig { font: 300 var(--fs-num)/1 var(--font-display); color: var(--claret); font-variant-numeric: lining-nums; }
.case__fig i { font-style: italic; }
.case__foot { padding-top: var(--space-4); border-top: 1px solid var(--rule); }

/* ---------- quotes ---------- */
.quotes { position: relative; display: grid; }
.quotes blockquote { grid-area: 1 / 1; display: grid; gap: var(--space-5); justify-items: center; text-align: center; max-width: 900px; margin-inline: auto; opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 1.2s; }
.quotes blockquote.on, .no-js .quotes blockquote:first-child { opacity: 1; visibility: visible; }
.quotes p { font: italic 400 var(--fs-quote)/1.3 var(--font-display); text-wrap: balance; }
.quotes footer { display: grid; gap: 2px; }
.quotes footer b { font: 500 13px/1.4 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; }
.quote-dots { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.quote-dots button { width: 28px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; }
.quote-dots button::before { content: ""; display: block; height: 1px; background: var(--ink-soft); opacity: 0.4; transition: opacity 0.3s, background 0.3s; }
.quote-dots button[aria-current="true"]::before { background: var(--claret); opacity: 1; height: 2px; }
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
.quote-grid blockquote { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--claret); }
.quote-grid p { font: italic 400 clamp(21px, 2vw, 26px)/1.35 var(--font-display); }
.quote-grid footer { font-size: 14px; color: var(--ink-soft); }
.quote-grid footer b { display: block; font: 500 12px/1.5 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- wordmarks ---------- */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.wall li { display: grid; place-items: center; min-height: 104px; padding: var(--space-4); text-align: center; font: 500 var(--fs-word)/1.2 var(--font-display); letter-spacing: 0.01em; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wall li.has-logo img { width: auto; height: auto; max-width: min(150px, 78%); max-height: 40px; object-fit: contain; filter: brightness(0); opacity: 0.84; }
.wall li.has-logo img[src*="arnotts"], .wall li.has-logo img[src*="la-samaritaine"] { max-width: min(170px, 84%); max-height: 56px; }
.wall li.has-logo img[src*="stella-mccartney"], .wall li.has-logo img[src*="watches-of-switzerland"], .wall li.has-logo img[src*="parmigiani"] { max-width: min(170px, 84%); max-height: 48px; }
.wall li.has-logo img[src*="tods"], .wall li.has-logo img[src*="armani"] { max-height: 30px; }
.wall li.has-logo img[src*="montblanc"], .wall li.has-logo img[src*="breitling"] { max-height: 46px; }
.wall--press { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wall--press { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall, .wall--press { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall li { min-height: 84px; } }

/* ---------- media rows ---------- */
.media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.media--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.media--flip > :first-child { order: 2; }
.media__text { display: grid; gap: var(--space-5); align-content: center; justify-items: start; }
.r-16x9 { aspect-ratio: 16 / 9; } .r-3x2 { aspect-ratio: 3 / 2; } .r-4x5 { aspect-ratio: 4 / 5; } .r-1x1 { aspect-ratio: 1 / 1; } .r-21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .media, .media--flip { grid-template-columns: 1fr; } .media--flip > :first-child { order: 0; } }
.video { position: relative; background: var(--ink); }
.video video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- closing band ---------- */
.sec--claret { background: var(--claret); color: var(--on-claret); text-align: center; }
.sec--claret .wrap { display: grid; gap: var(--space-6); justify-items: center; }
.sec--claret .sc-label { color: var(--on-claret); opacity: 0.8; }
.sec--claret .d2 em { color: inherit; }
.sec--claret .lead { color: var(--on-claret); opacity: 0.86; }
.sec--claret .sc-btn--ghost { color: var(--ivory); border-color: var(--ivory); }
.sec--claret .sc-btn--ghost:hover { background: var(--ivory); color: var(--claret); }

/* ---------- page hero ---------- */
.phero { padding-top: clamp(40px, 6vw, 88px); }
.phero__head { display: grid; gap: var(--space-5); max-width: 1000px; margin-bottom: clamp(32px, 5vw, 64px); }
.phero__img { position: relative; }
.phero--side .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.phero--side .phero__head { margin-bottom: 0; padding-bottom: var(--space-6); }
@media (max-width: 900px) { .phero--side .wrap { grid-template-columns: 1fr; } }

/* ---------- services ---------- */
.service { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: var(--space-8); border-top: 1px solid var(--rule); }
.service:first-of-type { border-top: 1px solid var(--ink); }
.service__body { display: grid; gap: var(--space-5); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.facts dt { margin-bottom: var(--space-2); }
.facts dd { font-size: 15px; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font: 500 var(--fs-word)/1.3 var(--font-display); }
.tags li + li::before { content: ""; display: inline-block; width: 1px; height: 0.8em; margin-right: var(--space-5); background: var(--claret); vertical-align: -0.05em; }
@media (max-width: 900px) { .service { grid-template-columns: 1fr; } .service .sc-slot { max-width: 360px; } .facts { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); counter-reset: step; }
.steps li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--ink); counter-increment: step; }
.steps li::before { content: "0" counter(step); font: 300 var(--fs-d3)/1 var(--font-display); color: var(--claret); font-variant-numeric: lining-nums; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- case studies (long) ---------- */
.study { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); padding-block: var(--space-8); border-top: 1px solid var(--rule); }
.study:first-of-type { border-top: 1px solid var(--ink); }
.study__side { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.study__side img { height: 132px; width: auto; mix-blend-mode: multiply; }
.study__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.study__cols > div { display: grid; gap: var(--space-3); align-content: start; }
.study__cols p { font-size: 16px; line-height: 1.65; }
@media (max-width: 900px) { .study { grid-template-columns: 1fr; } .study__cols { grid-template-columns: 1fr; } }

/* ---------- topics and formats ---------- */
.topics { display: grid; gap: 0; }
.topic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 64px); padding-block: var(--space-7); border-top: 1px solid var(--rule); align-items: baseline; }
.topic:first-child { border-top: 1px solid var(--ink); }
@media (max-width: 760px) { .topic { grid-template-columns: 1fr; } }
.proof { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gutter); align-items: stretch; }
.proof .ph:first-child { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } .proof .ph:first-child { aspect-ratio: 4 / 5; } }

/* ---------- about: chapters ---------- */
.chapters { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 5vw, 72px); }
.chapters__rail { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; display: grid; gap: var(--space-4); padding-left: var(--space-5); border-left: 1px solid var(--rule); }
.chapters__rail a { position: relative; display: grid; gap: 2px; text-decoration: none; color: var(--ink-soft); transition: color 0.4s; }
.chapters__rail a::before { content: ""; position: absolute; left: calc(var(--space-5) * -1 - 1px); top: 0; bottom: 0; width: 1px; background: var(--claret); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.chapters__rail a.on { color: var(--ink); }
.chapters__rail a.on::before { transform: scaleY(1); }
.chapters__rail b { font: 500 22px/1.2 var(--font-display); }
.chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: var(--space-8); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.chapter:first-child { padding-top: 0; border-top: 0; }
.chapter__text { display: grid; gap: var(--space-4); }
@media (max-width: 900px) { .chapters { grid-template-columns: 1fr; } .chapters__rail { display: none; } .chapter { grid-template-columns: 1fr; } .chapter .sc-slot { max-width: 420px; } }

/* medals */
.medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.medal { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding: var(--space-7) var(--space-5); border: 1px solid var(--champagne); }
.medal img { height: clamp(140px, 15vw, 200px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(42, 35, 38, 0.14)); }
@media (max-width: 760px) { .medals { grid-template-columns: 1fr; } }

/* cities */
.cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cities .sc-slot { aspect-ratio: 3 / 4; }
.cities .sc-slot:nth-child(odd) { background: var(--claret); }
.cities .sc-slot:nth-child(odd) .sc-slot__word { color: var(--on-claret); }
.cities .sc-slot__word { inset: 0; }
@media (max-width: 760px) { .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.form .full { grid-column: 1 / -1; }
.sc-field { display: grid; gap: var(--space-2); min-width: 0; }
.sc-field label { font: 500 12px/1.3 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.sc-field input, .sc-field select, .sc-field textarea { width: 100%; font: 400 17px/1.5 var(--font-text); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft); border-radius: 0; padding: var(--space-3) 0; appearance: none; }
.sc-field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A1F2B'/%3E%3C/svg%3E") right 4px center no-repeat; }
.sc-field textarea { min-height: 132px; resize: vertical; }
.sc-field input:hover, .sc-field select:hover, .sc-field textarea:hover { border-bottom-color: var(--ink); }
.sc-field input:focus, .sc-field select:focus, .sc-field textarea:focus { border-bottom-color: var(--claret); }
.form__note { padding: var(--space-4) var(--space-5); background: var(--stone); font-size: 15px; }
.direct { display: grid; gap: var(--space-6); }
.direct dl { display: grid; gap: var(--space-5); }
.direct dd { font: 500 var(--fs-title)/1.2 var(--font-display); overflow-wrap: anywhere; user-select: all; }
.copy-btn { justify-self: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--stone); padding-block: var(--space-8) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: grid; gap: var(--space-7); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); align-items: end; }
.foot-name { font: 300 var(--fs-d3)/1 var(--font-display); text-decoration: none; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.foot-nav a { font: 500 13px/1.2 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.foot-nav a:hover { color: var(--claret); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-soft); }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .turn, .js .rise { opacity: 1; transform: none; transition: none; }
  .js .wipe > img, .js .wipe > video { clip-path: none; transition: none; }
  .quotes blockquote { transition: none; }
  .split__cue::before { animation: none; }
}

/* 12 Nov 2026: real footage in slots */
.split__panel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-slot > video.loop, .ph > video.loop { width: 100%; height: 100%; object-fit: cover; }
.cities .sc-slot { position: relative; }
.cities__name { position: absolute; left: 12px; bottom: 12px; font: italic 300 clamp(20px, 2.2vw, 30px)/1 var(--font-display); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.proof .sc-slot:first-child { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 760px) { .proof .sc-slot:first-child { aspect-ratio: 4 / 5; } }

/* 12 Nov 2026, 18:55: depth in The Split. Said found his portrait flat against the clips.
   The clips sit back (dimmer, softer, like a shallow depth of field) Shadow removed at Said's request. */
.split__panel video { filter: brightness(0.72) saturate(0.95) blur(3px); transform: scale(1.04); }
@media (max-width: 760px) { .split__panel video { filter: brightness(0.72) saturate(0.95) blur(2px); } }

/* 12 Nov 2026, 19:15: skyline behind the portrait at the start of The Split.
   Dubai, London, Paris, Milan, New York in one hairline, tall enough to reach the portrait's head.
   It draws itself in on load. As the clips slide in it sits on top of them, turns from claret to ivory,
   sinks a little and dissolves, so the drawn cities melt into the real footage. */
.split__skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; height: 66%; pointer-events: none;
  color: color-mix(in srgb, var(--claret) calc((1 - var(--part)) * 100%), var(--ivory));
  opacity: calc(1.9 - var(--part) * 2);
  transform: translateY(calc(var(--part) * 7%)) scale(calc(1 + var(--part) * 0.05)); transform-origin: 50% 100%; }
.split__skyline path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.split__skyline .skyline__ground { stroke-opacity: 0.35; }
/* Dash and gap of 3 path lengths: Chrome measures dashes on screen with non-scaling strokes, so a dash of 1 stopped short on wide screens. */
.split.is-live .split__skyline path { stroke-dasharray: 3 3; stroke-dashoffset: 3; animation: sky-draw 1.6s cubic-bezier(.4,0,.2,1) forwards; }
.split.is-live .split__skyline .skyline__ground { animation-duration: 1.2s; }
.split.is-live .skyline__city path { animation-delay: calc(0.35s + var(--i) * 0.22s); }
@keyframes sky-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .split__skyline path { animation: none !important; stroke-dashoffset: 0 !important; } }
@media (max-width: 760px) { .split__skyline { height: 40%; } }
/* The scroll cue clashed with the skyline; the drawing itself now invites the scroll. */
.split__cue { display: none !important; }
/* No shadow on the portrait (Said, 12 Nov 18:56). */
.split__portrait { filter: none !important; }

/* 12 Nov 2026, 20:00: department store photographs on the result cards (Home) and case studies (Expertise).
   The photo runs edge to edge at the top of the card; the medal sits over its lower edge. */
.case__photo { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.case__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case:has(.case__photo) { grid-template-rows: auto auto auto 1fr auto; } /* photo, medal, figure, text, footer: the spare space sits under the text so the names line up */
.case .case__medal { margin-top: calc(var(--space-4) * -1 - 48px); position: relative; filter: drop-shadow(0 3px 6px rgba(20, 14, 16, 0.25)); }
.study__photo { margin: 0; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.study__side .study__photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; display: block; }
.study__side .study__photo + img { margin-top: -66px; position: relative; filter: drop-shadow(0 3px 6px rgba(20, 14, 16, 0.25)); }
.foot-credit { margin: var(--space-4) 0 0; font-size: 11px; line-height: 1.5; opacity: 0.6; }
.foot-credit a { color: inherit; }

/* 12 Nov 2026, 20:10: credit Global Blue asked for on every visual of theirs. */
.gb-credit { position: absolute; right: 10px; bottom: 8px; z-index: 2; font: 400 10px/1.2 var(--font-text); letter-spacing: 0.04em; color: #fff; opacity: 0.85; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none; }
.gb-note { margin: -16px 0 0; font: 400 10px/1.2 var(--font-text); letter-spacing: 0.04em; color: var(--ink-soft, var(--ink)); opacity: 0.75; text-align: right; }

/* ---------- Brands by sector (13 Nov) ---------- */
.bx { margin-top: var(--space-6); }
.bx__tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); }
.bx__tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: 500 13px/1 var(--font-text); letter-spacing: 0.04em; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.bx__tab:hover { border-color: var(--claret); }
.bx__tab[aria-selected="true"] { background: var(--claret); border-color: var(--claret); color: var(--on-claret, #fff); }
.bx__icon { width: 22px; height: 22px; flex: none; }
.bx__n { font: 400 11px/1 var(--font-text); opacity: 0.6; margin-left: 2px; }
.bx__title { display: flex; align-items: center; gap: 14px; margin: var(--space-6) 0 var(--space-4); font: 300 clamp(24px, 2.4vw, 32px)/1.1 var(--font-display); color: var(--ink); }
.bx__title .bx__icon { width: 34px; height: 34px; color: var(--claret); }
.bx__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.bx__grid li { display: grid; place-items: center; height: 78px; padding: 0 14px; border-bottom: 1px solid var(--rule); animation: bxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 22ms); }
.bx__grid img { display: block; width: auto; height: auto; max-width: 112px; max-height: 24px; object-fit: contain; filter: brightness(0); opacity: 0.8; transition: opacity .3s; }
.bx__grid .bx__stack img { max-height: 34px; max-width: 104px; }
.bx__grid .bx__mark img { max-height: 42px; max-width: 70px; }
.bx__grid li:hover img { opacity: 1; }
.bx__word { font: 500 13px/1.2 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--ink); opacity: 0.85; }
@keyframes bxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bx__grid li { animation: none; } }
@media (max-width: 700px) {
  .bx__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px var(--space-4); }
  .bx__tabs::-webkit-scrollbar { display: none; }
  .bx__tab { flex: none; }
  .bx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx__grid li { height: 64px; padding: 0 8px; }
  .bx__grid img { max-width: 92px; max-height: 20px; }
  .bx__grid .bx__stack img { max-height: 28px; max-width: 86px; }
  .bx__grid .bx__mark img { max-height: 34px; }
  .bx__word { font-size: 11px; letter-spacing: 0.16em; }
}
.bx__grid img[src*="stella-mccartney"], .bx__grid img[src*="brunello"] { max-width: 124px; max-height: 30px; opacity: 1; }

/* 12 Nov: kicker labels a step up so they hold their own above the display titles */
.sc-label { font-size: 15px; letter-spacing: 0.2em; font-weight: 600; }
.sec__head .sc-label, .media__text .sc-label { margin-bottom: 6px; }
@media (max-width: 700px) { .sc-label { font-size: 13px; letter-spacing: 0.18em; } }

/* 13 Nov: stills beside a play-once clip drift once, slowly, then rest (Expertise services) */
.js .drift > img { transform: scale(1.09); transform-origin: 60% 55%; transition: clip-path 1.1s var(--ease), transform 9s cubic-bezier(.2,.6,.2,1); }
.js .drift--b > img { transform: scale(1.09) translateX(-2%); transform-origin: 35% 60%; }
.js .drift.in > img { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .drift > img { transform: none; transition: none; } }

/* 13 Nov: Expertise case study medals sit solid over the store photo, as on Home (the multiply blend let the photo show through) */
.study__side .study__photo + img { mix-blend-mode: normal; }

/* 13 Nov: About Today strip, one artistic tone for all four cities (photos and the Milan clip) */
.cities .sc-slot img, .cities .sc-slot video { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.85) saturate(0.9) contrast(1.04) brightness(0.96); }
.cities .sc-slot:has(img), .cities .sc-slot:has(video) { background: #2a1f18; }

/* 13 Nov: city names readable on light skies: soft dark fade at the foot of each tile, name a step larger */
.cities .sc-slot:has(img)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(30, 20, 14, 0.72), rgba(30, 20, 14, 0)); pointer-events: none; z-index: 1; }
.cities__name { z-index: 2; left: 16px; bottom: 14px; font-size: clamp(24px, 2.4vw, 34px); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.cities .sc-slot .sc-slot__tag { top: 10px; bottom: auto; z-index: 3; }

/* 13 Nov: Speaking hero (panel photo) framed a little higher so the names on the screen stay whole */
.phero__img img[src*="milan-03-panel-wide"] { object-position: 50% 28%; }