/* ==========================================================================
   OUTLIFE · V3 stylesheet
   Point's skeleton (centred logo, bars, flat blocks), Kettal's motion
   (one screen per section, the page locks on each, reveals in sequence),
   the agency's tonality (warm off-white, ink, brown-black, glass).
   ========================================================================== */
@font-face { font-family: "Petit Serif"; src: url("../fonts/PetitSerif-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url("../fonts/NeueHaasUnica-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  /* the agency's palette */
  --paper: #f8f8f6; --white: #ffffff; --ink: #212120; --dark: #190c00; --stone: #343330;
  --grey-1: #e9e9e9; --grey-2: #dedede; --grey-3: #bababa; --grey-4: #6e6e6d; --brown-1: #e7e6e4; --brown-3: #6c6258;
  --sand: #ddceb0; --burgundy: #5f2a15; --accent: #c76d53;
  /* roles (light) */
  --bg: var(--paper); --fg: var(--ink); --fg-2: var(--grey-4); --fg-3: var(--grey-3); --line: rgba(33, 33, 32, 0.14); --surface: var(--white);
  --glass: rgba(248, 248, 246, 0.74); --glass-dark: rgba(25, 12, 0, 0.42);
  --serif: "Petit Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-h: 72px;
  --gutter: clamp(20px, 3.4vw, 64px);
  --maxw: 1560px;
  --section: clamp(80px, 9vw, 150px);
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 6px; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 80px); align-items: start; }
.grid-2--wide-left { grid-template-columns: 1.2fr 1fr; }
.center { text-align: center; }
.center .cta-actions { justify-content: center; }
.measure { max-width: 46em; margin-inline: auto; }
.mt-l { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Themes ---------- */
.t-paper { background: var(--paper); color: var(--ink); }
.t-sand-soft { background: var(--brown-1); color: var(--ink); }
.t-sand { background: #efede8; color: var(--ink); }
.t-dark { background: var(--burgundy); color: var(--white); --fg-2: rgba(255, 255, 255, 0.7); --fg-3: rgba(255, 255, 255, 0.45); --line: rgba(255, 255, 255, 0.2); --surface: rgba(255, 255, 255, 0.07); }
.t-burgundy { background: var(--burgundy); color: var(--sand); --fg-2: rgba(221, 206, 176, 0.72); --line: rgba(221, 206, 176, 0.2); }
.on-dark { color: var(--paper); }
.t-black { background: var(--dark); color: var(--white); --fg-2: rgba(255, 255, 255, 0.66); --fg-3: rgba(255, 255, 255, 0.42); --line: rgba(255, 255, 255, 0.18); --surface: rgba(255, 255, 255, 0.06); }
.t-paper .mat-card, .materials--photo .mat-card { background: rgba(248, 248, 246, 0.72); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1; }
.display { font-size: clamp(38px, min(7vw, 10.5vh), 108px); line-height: 1.04; }
.h1 { font-size: clamp(30px, min(4.4vw, 7vh), 66px); line-height: 1.02; }
.h2 { font-size: clamp(26px, min(3.2vw, 5.4vh), 48px); line-height: 1.06; }
.h3 { font-size: clamp(19px, min(1.7vw, 3vh), 26px); line-height: 1.14; }
.two-tone em { font-style: normal; color: var(--grey-3); }
.t-dark .two-tone em { color: rgba(248, 248, 246, 0.42); }
.eyebrow { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); margin-bottom: clamp(14px, 2.2vh, 24px); }
.tag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.bars { display: inline-flex; align-items: center; gap: 14px; }
.bars i { font-style: normal; opacity: 0.5; }
.lead { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; }
p + p { margin-top: 1em; }
.muted { color: var(--fg-2); }
.body-s { font-size: 13.5px; }
.link-u { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid currentColor; transition: opacity 0.3s; }
.link-u:hover { opacity: 0.6; }
.link-u .arrow { width: 14px; height: 10px; transition: transform 0.5s var(--ease); }
.link-u:hover .arrow { transform: translateX(4px); }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px 13px; border: 1px solid var(--ink); border-radius: 100px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.4s var(--ease); }
.btn:hover { transform: translateY(-1px); background: rgba(33, 33, 32, 0.06); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--stone); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--white); }
.btn--ghost-light { color: var(--paper); border-color: rgba(248, 248, 246, 0.5); }
.btn--ghost-light:hover { background: rgba(248, 248, 246, 0.1); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: clamp(22px, 3vh, 36px); }
.sec-head { margin-bottom: clamp(28px, 4vh, 56px); }
.sec-head.center { text-align: center; }
.sec-head.center .h2 { max-width: 16em; margin-inline: auto; }
.premium { font-size: 12.5px; line-height: 1.6; color: var(--fg-2); max-width: 54em; margin: clamp(18px, 3vh, 32px) auto 0; }

/* ---------- Screens (Kettal): one section per screen, the page locks on each ---------- */
.screen { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.screen > .wrap { position: relative; width: 100%; }
.screen--auto { height: auto; min-height: 100svh; padding-block: calc(var(--header-h) + 4vh) 6vh; }
html.snap .screen--auto { height: auto; }
@media (min-width: 900px) and (min-height: 560px) {
  html.snap { scroll-snap-type: y mandatory; }
  html.snap .screen { height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
  html.snap .screen-end { scroll-snap-align: start; }
  html.snap .build, html.snap .process-screen { scroll-snap-align: none; }
/* origin: the section top (usual route) and its one stop (Outlife route) are the two resting points */
html.snap .origin { scroll-snap-align: start; scroll-snap-stop: always; }
}
/* content rises in as a screen arrives */
[data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 0.09s); }
.is-in [data-rise], .no-js [data-rise] { opacity: 1; transform: none; }
.media[data-rise] img { transform: scale(1.06); transition: transform 1.6s var(--ease); transition-delay: calc(var(--d, 0) * 0.09s); }
.is-in .media[data-rise] img { transform: none; }

/* ---------- Header (Point: centred logo, bars; the agency: glass) ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); color: var(--ink); transition: transform 0.6s var(--ease), background-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0 0 -48px 0; pointer-events: none; background: linear-gradient(to bottom, rgba(25, 12, 0, 0.45), rgba(25, 12, 0, 0)); opacity: 0; transition: opacity 0.5s var(--ease); }
.hdr-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; padding: 0 clamp(16px, 2.2vw, 36px); }
.hdr-nav { display: flex; align-items: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.hdr-nav a { position: relative; padding: 8px 0; }
.hdr-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.hdr-nav a:hover::after, .hdr-nav a[aria-current="page"]::after, .hdr-nav a[aria-expanded="true"]::after { transform: scaleX(1); }
.hdr-nav .sep, .lang .sep { margin: 0 10px; opacity: 0.5; }
.hdr-right { display: flex; justify-content: flex-end; align-items: center; gap: 26px; }
.hdr-logo { display: block; justify-self: center; width: 156px; }
.hdr-logo svg { width: 100%; height: auto; }
.lang { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.lang > button { display: grid; place-items: center; width: 40px; height: 40px; }
.globe-ico { width: 17px; height: 17px; }
.lang-drop { position: absolute; top: 100%; right: 0; min-width: 150px; padding: 8px 0; border-radius: 10px; background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px rgba(25, 12, 0, 0.3); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.35s; }
.lang:hover .lang-drop, .lang:focus-within .lang-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-drop a, .lang-drop b { display: flex; justify-content: space-between; gap: 18px; padding: 9px 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.lang-drop b { opacity: 0.45; }
.lang-drop a:hover { background: rgba(33, 33, 32, 0.06); }
.lang-drop small { font-size: 10px; opacity: 0.6; letter-spacing: 0.1em; }
.menu-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.menu-btn span { position: absolute; left: 9px; right: 9px; height: 1px; background: currentColor; transition: transform 0.5s var(--ease), opacity 0.3s; }
.menu-btn span:nth-child(1) { transform: translateY(-4px); }
.menu-btn span:nth-child(2) { transform: translateY(4px); }
.has-overlay-header .site-header:not(.is-solid):not(.is-open) { color: var(--paper); }
.has-overlay-header .site-header:not(.is-solid):not(.is-open)::before { opacity: 1; }
.site-header.is-solid, .site-header.is-open { background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
body:not(.has-overlay-header) main { padding-top: var(--header-h); }

/* hover panels (Kettal) */
.drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(22px); backdrop-filter: saturate(1.4) blur(22px); box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(25, 12, 0, 0.25); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.45s; }
.drop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drop-inner { padding: 20px clamp(16px, 2.2vw, 36px) 22px; }
.drop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drop-head .eyebrow { margin: 0; }
.drop-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 24px; }
.drop-list--five { grid-template-columns: repeat(5, 1fr); gap: 4px 30px; }
.drop-foot { display: flex; justify-content: flex-end; padding-top: 12px; }
.drop-foot .link-u { font-size: 11px; padding-bottom: 4px; }
.drop-list a { position: relative; display: flex; align-items: center; min-height: 52px; padding: 8px 72px 8px 0; border-top: 1px solid var(--line); }
.drop-list .num { grid-row: 1 / span 2; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); padding-top: 4px; min-width: 60px; }
.drop-list .name { font-family: var(--serif); font-size: 16.5px; text-transform: uppercase; line-height: 1.1; }
.drop-list--projects a { min-height: 64px; }
.drop-list .tag { font-size: 11px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-2); margin-top: 3px; }
.drop-list .thumb { position: absolute; right: 0; top: 50%; margin-top: -20px; width: 54px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; opacity: 0; transform: scale(0.94); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.drop-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.drop-list a:hover .thumb { opacity: 1; transform: none; }
.drop-list a:hover .name { color: var(--brown-3); }

/* local time (Kettal) */
.local { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.local b { font-weight: 400; opacity: 0.6; }
.local[hidden] { display: none; }

/* ---------- Full menu (glass) ---------- */
.menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(25, 12, 0, 0.3); opacity: 0; transition: opacity 0.6s var(--ease); }
.menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); padding: 28px clamp(24px, 4vw, 56px) 32px; display: flex; flex-direction: column; background: rgba(248, 248, 246, 0.78); -webkit-backdrop-filter: saturate(1.4) blur(28px); backdrop-filter: saturate(1.4) blur(28px); color: var(--ink); transform: translateX(100%); transition: transform 0.8s var(--ease); overflow: auto; }
.menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(28px, 6vh, 64px); }
.menu-top .monogram { width: 40px; color: var(--ink); }
.menu-close { width: 40px; height: 40px; position: relative; }
.menu-close span { position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: currentColor; }
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }
.menu-main li { overflow: hidden; }
.menu-main a { display: block; font-family: var(--serif); font-size: clamp(30px, 4.4vh, 44px); text-transform: uppercase; line-height: 1.22; transform: translateY(110%); transition: transform 0.9s var(--ease), opacity 0.3s; }
.menu-main a:hover { opacity: 0.55; }
.menu-sub { margin-top: clamp(24px, 4vh, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.menu-sub h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 10px; font-weight: 400; }
.menu-sub li a { font-size: 14px; line-height: 2; }
.menu-sub li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-foot { margin-top: auto; padding-top: 28px; font-size: 13px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.menu-open { overflow: hidden; }
.menu-open .menu { visibility: visible; pointer-events: auto; }
.menu-open .menu-backdrop { opacity: 1; }
.menu-open .menu-panel { transform: none; }
.menu-open .menu-main a { transform: none; }
.menu-main li:nth-child(2) a { transition-delay: 0.05s; } .menu-main li:nth-child(3) a { transition-delay: 0.1s; } .menu-main li:nth-child(4) a { transition-delay: 0.15s; } .menu-main li:nth-child(5) a { transition-delay: 0.2s; } .menu-main li:nth-child(6) a { transition-delay: 0.25s; }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--grey-1); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.ratio-43 { aspect-ratio: 4 / 3; } .ratio-32 { aspect-ratio: 3 / 2; } .ratio-45 { aspect-ratio: 4 / 5; } .ratio-21 { aspect-ratio: 2 / 1; }
.media.zoom img { transition: transform 0.7s var(--ease); }
.media.zoom:hover img, a:hover > .media.zoom img, a:focus-visible > .media.zoom img { transform: scale(1.06); }
.placeholder { display: grid; place-items: center; background: var(--brown-1); }
.placeholder .monogram { width: 15%; color: var(--grey-3); }
.media .status { position: absolute; left: 14px; top: 14px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 11px 6px; border-radius: 100px; background: var(--glass-dark); color: var(--paper); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.media .status.is-done { background: rgba(248, 248, 246, 0.82); color: var(--ink); }
.media .status.is-pulse { animation: tagpulse 1.1s var(--ease) 1; }
@keyframes tagpulse { 0%, 100% { transform: scale(1); background: var(--glass-dark); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 50% { transform: scale(1.12); background: var(--burgundy); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.stamp { position: absolute; left: 50%; top: 50%; width: clamp(22px, 2.5vw, 36px); transform: translate(-50%, -50%); color: var(--white); opacity: 0.5; filter: drop-shadow(0 4px 18px rgba(25, 12, 0, 0.45)); pointer-events: none; transition: opacity 0.5s, transform 0.7s var(--ease); }
.stamp svg { width: 100%; height: auto; }
.proj-card:hover .stamp, .proj-cell a:hover .stamp { transform: translate(-50%, -50%) scale(1.06); }
.proj-card.is-locked, .proj-cell .media.is-locked { cursor: default; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--dark); --p: 0; justify-content: flex-end; }
.hero-media { position: absolute; inset: 0; transform: scale(calc(1.02 + var(--p) * 0.08)); transform-origin: 50% 60%; will-change: transform; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 12, 0, 0.3) 0%, rgba(25, 12, 0, 0) 26%), linear-gradient(0deg, rgba(25, 12, 0, 0.6) 0%, rgba(25, 12, 0, 0.1) 46%, rgba(25, 12, 0, 0) 64%); }
.hero-content { position: absolute; left: 0; right: 0; bottom: clamp(92px, 15vh, 160px); text-align: center; color: var(--paper); opacity: calc(1 - var(--p) * 1.8); transform: translateY(calc(var(--p) * -60px)); padding: 0 var(--gutter); }
.hero-content .tag { margin-bottom: clamp(30px, 6vh, 56px); }
.hero-content .display { color: var(--paper); }
.hero-content--low { bottom: auto; top: 62%; transform: translateY(calc(-50% + var(--p) * -60px)); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(16px, 2.2vw, 36px); color: var(--paper); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; opacity: calc(1 - var(--p) * 2.2); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 34px; background: rgba(248, 248, 246, 0.35); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--paper); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { to { top: 100%; } }
.page-hero { height: 88svh; min-height: 520px; }
.page-hero--short { height: 62svh; min-height: 420px; }
.page-hero .hero-content { bottom: clamp(64px, 12vh, 132px); }
.crumbs { display: inline-flex; gap: 10px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; margin-bottom: 22px; }
.page-head { padding: calc(var(--header-h) + clamp(48px, 8vw, 120px)) 0 clamp(40px, 5vw, 80px); }

/* ---------- Statement (Point's two-column opening) ---------- */
.statement .h1 { max-width: 9.5em; }
.statement .intro-copy { padding-top: 10px; }
.statement .intro-copy .lead { margin-bottom: 1em; }
.cta-actions.left { justify-content: flex-start; }

/* ---------- Carousel ---------- */
.carousel { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--dark); color: var(--paper); outline: none; }
.car-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.car-slide .media { position: absolute; inset: 0; border-radius: 0; transform: scale(1.06); transition: transform 7s linear; }
.car-slide .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25, 12, 0, 0.62) 0%, rgba(25, 12, 0, 0.12) 45%, rgba(25, 12, 0, 0.05) 100%); }
.car-slide.is-active { opacity: 1; z-index: 1; }
.car-slide.is-active .media { transform: scale(1); }
.car-content { position: absolute; left: 0; right: 0; bottom: clamp(88px, 14vh, 150px); text-align: center; padding: 0 var(--gutter); }
.car-content > * { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.car-slide.is-active .car-content > * { opacity: 1; transform: none; }
.car-slide.is-active .car-content > :nth-child(2) { transition-delay: 0.12s; } .car-slide.is-active .car-content > :nth-child(3) { transition-delay: 0.24s; } .car-slide.is-active .car-content > :nth-child(4) { transition-delay: 0.36s; }
.car-content .eyebrow { color: rgba(248, 248, 246, 0.7); }
.car-content .tag { margin: 22px 0 28px; }
.car-content .link-u { border-color: rgba(248, 248, 246, 0.6); }
.car-arrow { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 1px solid rgba(248, 248, 246, 0.4); border-radius: 50%; display: grid; place-items: center; color: var(--paper); background: var(--glass-dark); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.3s, border-color 0.3s; }
.car-arrow svg { width: 18px; height: 12px; }
.car-arrow.prev { left: clamp(16px, 2.2vw, 36px); transform: scaleX(-1); }
.car-arrow.next { right: clamp(16px, 2.2vw, 36px); }
.car-arrow:hover { background: rgba(248, 248, 246, 0.18); border-color: var(--paper); }
.car-ui { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(16px, 2.2vw, 36px); color: var(--paper); font-size: 11.5px; letter-spacing: 0.16em; }
.car-dots { display: flex; gap: 10px; }
.car-dot { width: 36px; height: 20px; display: grid; align-items: center; }
.car-dot i { display: block; height: 1px; background: rgba(248, 248, 246, 0.35); position: relative; overflow: hidden; }
.car-dot i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.car-dot.is-active i::after { transform: scaleX(1); }
.car-dot.run i::after { animation: dot var(--dur, 4600ms) linear forwards; }
@keyframes dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Highlights (Point's three-up) ---------- */
.hi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); margin-bottom: clamp(22px, 3.5vh, 40px); }
.hi-card { display: block; text-align: center; }
.hi-card .media { max-height: 46vh; margin-bottom: clamp(14px, 2.4vh, 24px); }
.hi-card .h3 { margin-bottom: 8px; }
.hi-card .tag { color: var(--fg-2); font-size: 11px; }

/* ---------- Origin, said plainly (kept from the first attempt) ---------- */
.origin { position: relative; }
.origin-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.origin-stop { min-height: 100svh; }
.origin .h1 { max-width: 10em; }
.origin-head { margin-bottom: clamp(36px, 9vh, 110px); }
.origin-head .lead { padding-top: 6px; max-width: 34em; }
.chain { display: grid; gap: clamp(32px, 8vh, 96px); }
.chain-row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.chain-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); padding-top: 4px; }
.chain-label strong { display: block; font-weight: 400; color: var(--white); margin-top: 6px; letter-spacing: 0.02em; text-transform: none; font-size: 14px; }
.chain-track { position: relative; }
.chain-line { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: currentColor; opacity: 0.45; }
.chain-head { display: none; }
/* step 1: the usual route. step 2 (next scroll stop): the Outlife route appears, the usual one dims */
.chain-row { transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.chain-row--industry { opacity: 0; transform: translateY(14px); }
.chain.is-in .chain-row--industry { opacity: 1; transform: none; }
.chain-row--outlife { opacity: 0; transform: translateY(14px); }
.chain-row--outlife .chain-line { opacity: 1; height: 2px; top: 7px; }
.chain.is-two .chain-row--industry { opacity: 0.45; }
.chain.is-two .chain-row--outlife { opacity: 1; transform: none; }
.chain-logo { display: block; width: clamp(96px, 9vw, 140px); margin: 2px auto 0; color: var(--white); }
.origin--light .chain-label strong, .origin--light .chain-logo, .origin--light .chain-row--outlife .chain-steps li { color: var(--ink); }
.origin--light .chain-row--industry .chain-steps li { color: rgba(33, 33, 32, 0.55); }
.origin--light .chain-steps li::before { background: var(--paper); border-color: var(--ink); }
.origin--light .chain-row--outlife .chain-steps li::before { background: var(--ink); border-color: var(--ink); }
.origin--light .chain-line { color: var(--ink); }
.chain-logo svg { width: 100%; height: auto; }
.chain-row--outlife .chain-steps { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.chain-row--outlife .chain-steps li { flex: none; }
.chain-row--outlife .chain-steps li:nth-child(2) { text-align: center; justify-self: center; }
.chain-row--outlife .chain-steps li:nth-child(2)::before { left: 50%; margin-left: -6px; }
.chain-steps { position: relative; display: flex; justify-content: space-between; }
.chain-steps li { position: relative; flex: 1 1 0; padding-top: 34px; font-size: 14.5px; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.chain-steps li:last-child { flex: 0 0 auto; text-align: right; }
.chain-steps li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--burgundy); border: 1px solid currentColor; }
.chain-steps li:last-child::before { left: auto; right: 0; }
.chain-row--industry .chain-steps li { color: rgba(255, 255, 255, 0.55); }
.chain-row--industry .chain-steps li:not(:first-child):not(:last-child)::after { content: attr(data-m); position: absolute; left: 0; top: -20px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.chain-row--outlife .chain-steps li { font-size: 17px; color: var(--white); }
.chain-row--outlife .chain-steps li::before { background: var(--white); border-color: var(--white); }
.chain.is-in .chain-row--industry li, .chain.is-two .chain-row--outlife li { opacity: 1; transform: none; }
.chain-row--industry li:nth-child(1) { transition-delay: 0.15s; } .chain-row--industry li:nth-child(2) { transition-delay: 0.27s; } .chain-row--industry li:nth-child(3) { transition-delay: 0.39s; } .chain-row--industry li:nth-child(4) { transition-delay: 0.51s; } .chain-row--industry li:nth-child(5) { transition-delay: 0.63s; } .chain-row--industry li:nth-child(6) { transition-delay: 0.75s; }
.chain-row--outlife li:nth-child(1) { transition-delay: 0.2s; } .chain-row--outlife li:nth-child(2) { transition-delay: 0.4s; } .chain-row--outlife li:nth-child(3) { transition-delay: 0.6s; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); margin-top: clamp(26px, 5vh, 72px); padding-top: clamp(20px, 3vh, 40px); border-top: 1px solid var(--line); }
.fact .num { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: clamp(10px, 1.8vh, 20px); }
.fact .num b { font-weight: 400; margin-right: 10px; }
.fact .h3 { margin-bottom: 10px; }
.fact p { color: var(--fg-2); font-size: 14px; }

/* ---------- The build (Terra50-like pinned 3D) ---------- */
.build { position: relative; }
.build-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #ffffff; }
.build-final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.build.is-final .build-final { opacity: 1; }
.build.is-final .build-canvas canvas { opacity: 0; transition-delay: 0.6s; }
.build-stop { min-height: 100svh; }
.build-canvas { position: absolute; inset: 0; }
.build-canvas canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
.build.is-3d .build-canvas canvas { opacity: 1; }
.build-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s; }
.build.is-fallback .build-fallback { opacity: 0.9; }
.build-head { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 3vh); width: min(460px, 82vw); }
.build-box { padding: 22px 24px 20px; border-radius: 12px; background: rgba(248, 248, 246, 0.72); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); }
.build-scenes { position: relative; min-height: 190px; }
.build-scenes .bscene { inset: 0; align-content: start; }
.build-scenes .h2 { max-width: 12em; }
.build-copy { display: none; position: absolute; right: var(--gutter); bottom: 92px; width: min(440px, 80vw); min-height: 200px; padding: 22px 24px 20px; border-radius: 12px; background: rgba(248, 248, 246, 0.72); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); }
.build-head { padding: 14px 18px; border-radius: 12px; background: rgba(248, 248, 246, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bscene { position: absolute; inset: 22px 24px 20px; display: grid; align-content: end; gap: 12px; opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.bscene.is-on { opacity: 1; transform: none; }
.bscene p { font-size: clamp(14px, 1.05vw, 17px); color: var(--fg-2); max-width: 42ch; }
.scene-num { font-family: var(--serif); font-size: 13px; letter-spacing: 0.2em; color: var(--brown-3); }
.build-hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.progress { flex: 1; height: 1px; background: var(--line); position: relative; }
.progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 0.2s linear; }

/* ---------- Video bands ---------- */
.band { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--dark); display: grid; place-items: center; text-align: center; }
.band .media { position: absolute; inset: 0; border-radius: 0; }
.band .media::after { content: ""; position: absolute; inset: 0; background: rgba(25, 12, 0, 0.38); }
.band-content { position: relative; z-index: 1; padding: 0 var(--gutter); width: 100%; max-width: 72em; margin-inline: auto; display: grid; justify-items: center; text-align: center; }
.band-content .h1 { max-width: 24em; font-size: clamp(26px, min(3.6vw, 6.2vh), 56px); line-height: 1.06; }
.band-content .tag { margin-top: 26px; }
.band--quote .band-content .h1 { max-width: 24em; }
.band-content .link-u { margin-top: 30px; border-color: rgba(248, 248, 246, 0.6); }

/* ---------- Process: pinned image, four locked stops ---------- */
.process-screen { position: relative; }
.steps-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 2vh) var(--gutter) 4vh; max-width: var(--maxw); margin-inline: auto; overflow: hidden; }
.steps-pin .sec-head { margin-bottom: clamp(18px, 3vh, 36px); }
.steps-pin .sec-head .link-u { margin-top: 14px; }
.step-stop { min-height: 100svh; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.steps-visual { position: relative; aspect-ratio: 4 / 3; max-height: 52vh; border-radius: var(--radius); overflow: hidden; background: var(--grey-1); }
.step-img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.step-img.is-active { opacity: 1; }
.step-img figcaption { position: absolute; left: 18px; bottom: 16px; color: var(--paper); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; gap: 12px; padding: 9px 13px 8px; border-radius: 100px; background: var(--glass-dark); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.steps-progress { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 1px; background: rgba(248, 248, 246, 0.3); }
.steps-progress span { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--paper); transform-origin: top; transform: scaleY(0.25); transition: transform 0.8s var(--ease); }
.steps-list { position: relative; min-height: 260px; }
.step { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step-num { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.step p { color: var(--fg-2); max-width: 40em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips li { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px 7px; border: 1px solid var(--line); border-radius: 100px; }

/* ---------- Projects (Point's composition, Kettal's hover) ---------- */
.proj-row, .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); }
.coll-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px) clamp(18px, 2.4vw, 36px); }
.proj-card { display: block; }
.proj-card .media { max-height: 44vh; }
.card-body { padding-top: 16px; }
.card-body .h3, .proj-cell .h3 { margin-bottom: 6px; }
.loc { font-size: 13px; color: var(--fg-2); }
.loc .sep { margin: 0 8px; opacity: 0.6; }
.projects-page .proj-intro { margin-bottom: clamp(28px, 4vw, 48px); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: clamp(28px, 4vw, 56px); }
.proj-cell .h3 a:hover { color: var(--brown-3); }
.proj-cell .loc { margin-bottom: 14px; }
.proj-cell .media { display: block; }
.proj-cell .placeholder { display: grid; }
.proj-feature { padding-top: clamp(64px, 8vw, 120px); }
.proj-feature:first-of-type { padding-top: clamp(48px, 6vw, 96px); }
.proj-thumbs { display: grid; gap: 16px; margin-top: 16px; }
.proj-meta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; margin-top: clamp(24px, 3vw, 40px); }
.proj-meta dl { display: grid; gap: 10px; font-size: 14px; }
.proj-meta dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.proj-meta .scope { grid-column: 1 / -1; max-width: 48em; color: var(--fg-2); }
.proj-meta .story { display: grid; gap: 14px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--ink); }
.proj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 18px; }
.proj-fig { margin: 0; }
.proj-fig figcaption { margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.proj-cta { padding-top: clamp(64px, 8vw, 120px); text-align: center; }
.proj-cta .lead { margin-top: 20px; }

/* ---------- Custom (Point's framed block) ---------- */
.custom .h2 { max-width: 16em; margin-inline: auto; }
.framed { display: grid; grid-template-columns: 1fr minmax(0, 760px) 1fr; align-items: center; gap: clamp(20px, 3vw, 48px); margin: clamp(20px, 3.4vh, 40px) 0; }
.framed .media { max-height: 42vh; width: min(100%, calc(42vh * 1.5)); margin-inline: auto; }
.rules { display: flex; justify-content: space-evenly; }
.rules i { display: block; width: 1px; height: 36px; background: var(--ink); opacity: 0.4; }
.custom .measure { max-width: 40em; margin-bottom: clamp(18px, 3vh, 28px); color: var(--fg-2); }

/* ---------- Split (catalogue) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split .media { border-radius: 0; height: 100svh; }
.split-copy { padding: clamp(40px, 6vw, 96px) clamp(28px, 6vw, 112px); }
.split-copy .lead { margin-top: 20px; margin-bottom: 1em; }
.split-copy p:not(.lead) { color: var(--fg-2); }
.split-btn { margin-top: 28px; }

/* ---------- Start a project ---------- */
.start .display { max-width: 9em; margin-inline: auto; }
.start .lead { margin-top: 20px; color: var(--fg-2); }

/* ---------- Footer (the agency's wordmark at full width) ---------- */
.site-footer { background: var(--dark); color: var(--white); --fg-2: rgba(255, 255, 255, 0.66); --line: rgba(255, 255, 255, 0.18); padding: calc(var(--header-h) + 3vh) 0 24px; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
.site-footer > .wrap { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.foot-cols h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 14px; font-weight: 400; }
.foot-cols li { font-size: 14px; line-height: 1.75; }
.foot-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-mark { margin: 3vh 0 2vh; display: flex; justify-content: center; }
.foot-mark svg { width: 100%; height: auto; color: var(--white); }
@media (max-height: 760px) { .foot-cols li { line-height: 1.55; font-size: 13px; } .foot-mark { margin: 2vh 0 1vh; } .foot-mark svg { max-height: 26vh; } }
.foot-claim { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-2); }
.foot-claim > span:nth-child(2) { text-align: center; }
.foot-claim nav, .foot-legal { display: flex; gap: 18px; justify-content: flex-end; }

/* ---------- Collections index ---------- */
.coll-list { display: grid; gap: clamp(48px, 7vw, 120px); }
.coll-item { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.coll-item:nth-child(even) .media { order: 2; }
.coll-copy .num { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--fg-2); margin-bottom: 18px; }
.coll-copy .tag { color: var(--fg-2); margin: 16px 0 20px; }
.coll-copy .meta { display: flex; gap: 24px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin: 22px 0 26px; }
.essentials { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 36px); }
.essential h3 { font-family: var(--serif); font-size: 18px; text-transform: uppercase; margin: 16px 0 8px; font-weight: 400; }
.essential p { font-size: 14px; color: var(--fg-2); }
.essential .dims { color: var(--fg); margin-top: 8px; }

/* ---------- Collection detail ---------- */
.mini-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.mini-facts dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.story { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.story--rev .media { order: 2; }
.story-copy .h2 { margin-bottom: 18px; }
.story-copy p { color: var(--fg-2); }
.full-bleed { height: 80vh; overflow: hidden; background: var(--grey-1); }
.full-bleed img { width: 100%; height: 118%; object-fit: cover; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px var(--gutter) 0; }
.spec-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 96px); }
.spec-table { border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-row .idx { color: var(--fg-2); font-size: 12px; letter-spacing: 0.1em; padding-top: 3px; }
.spec-row .dims { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.spec-note { margin-top: 24px; font-size: 14px; color: var(--fg-2); }
.custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.custom-grid .num { display: block; font-size: 12px; letter-spacing: 0.16em; color: var(--fg-2); margin-bottom: 18px; }
.custom-grid .h3 { margin-bottom: 12px; }
.custom-grid p { color: var(--fg-2); font-size: 15px; }
.next-coll { position: relative; display: block; height: 70vh; min-height: 420px; overflow: hidden; background: var(--dark); }
.next-coll .media { position: absolute; inset: 0; border-radius: 0; }
.next-coll .media::after { content: ""; position: absolute; inset: 0; background: rgba(25, 12, 0, 0.42); }
.next-inner { position: relative; z-index: 1; height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: 0 var(--gutter); }
.next-inner .eyebrow { color: rgba(248, 248, 246, 0.7); margin: 0; }
.next-inner .link-u { border-color: rgba(248, 248, 246, 0.6); }

/* ---------- Process page: stacked cards (Kettal) ---------- */
.pcards { position: relative; }
.pcard { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 2vh) var(--gutter) 4vh; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -30px 60px -40px rgba(25, 12, 0, 0.25); }
.pcard:nth-child(even) { background: var(--brown-1); }
.pcard-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 80px); align-items: center; }
.pcard .media { max-height: 60vh; aspect-ratio: 4 / 3; }
.pcard .num { display: block; font-size: 12px; letter-spacing: 0.16em; color: var(--fg-2); margin-bottom: 18px; }
.pcard .h1 { margin-bottom: 14px; }
.pcard > .pcard-inner > div > p { color: var(--fg-2); max-width: 30em; }
.pcard-steps { margin-top: clamp(18px, 3vh, 32px); border-top: 1px solid var(--line); }
.pcard-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pcard-steps .i { font-size: 12px; letter-spacing: 0.1em; color: var(--fg-2); padding-top: 3px; }
.pcard-steps h3 { font-family: var(--serif); font-size: 18px; text-transform: uppercase; font-weight: 400; margin-bottom: 4px; }
.pcard-steps p { color: var(--fg-2); font-size: 14px; }
.pcard [data-rise] { transition-delay: calc(var(--d, 0) * 0.08s); }

/* ---------- Process page ---------- */
.phase { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 96px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.phase-head .num { display: block; font-size: 12px; letter-spacing: 0.16em; color: var(--fg-2); margin-bottom: 18px; }
.phase-head .h2 { margin-bottom: 16px; }
.phase-head p { color: var(--fg-2); max-width: 30em; }
.phase-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.phase-step .i { font-size: 12px; letter-spacing: 0.1em; color: var(--fg-2); padding-top: 4px; }
.phase-step h3 { font-family: var(--serif); font-size: 20px; text-transform: uppercase; font-weight: 400; margin-bottom: 8px; }
.phase-step p { color: var(--fg-2); font-size: 15px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--serif); font-size: 20px; text-transform: uppercase; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.4s var(--ease); }
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0); }
.faq .answer { padding: 0 0 24px; color: var(--fg-2); max-width: 46em; }

/* ---------- About ---------- */
.formula .words-block { font-family: var(--serif); font-size: clamp(26px, min(3.6vw, 6vh), 58px); line-height: 1.12; text-transform: uppercase; max-width: 22em; }
.words-block span { color: var(--grey-3); transition: color 0.6s var(--ease); }
.words-block span.on { color: var(--ink); }
.who .media { max-height: 70vh; }
.about-copy .h2 { margin-bottom: 20px; }
.about-copy p:not(.lead) { color: var(--fg-2); }
.founder-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 96px); align-items: center; }
.founder-copy p:not(.lead) { color: var(--fg-2); }
.founder-copy .note { margin-top: clamp(20px, 3.5vh, 36px); padding-top: clamp(16px, 2.6vh, 28px); border-top: 1px solid var(--line); }
.founder-copy .note p { font-size: clamp(16px, 1.22vw, 19px); line-height: 1.6; color: var(--fg-2); }
.founder-copy .note .sig { display: block; margin-top: 16px; font-family: var(--serif); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; }
.founder-photo { aspect-ratio: 4 / 5; max-height: 72vh; justify-self: end; width: 100%; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.globe-section { overflow: hidden; }
.globe-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: center; }
.globe-copy { grid-column: 1 / span 5; position: relative; z-index: 2; }
.globe-copy .lead { max-width: 30em; margin-top: 22px; color: var(--fg-2); }
.globe-stage { grid-column: 7 / span 6; position: relative; aspect-ratio: 1 / 1; width: 100%; max-height: 90vh; max-width: 570px; justify-self: center; }
.globe-stage canvas { display: block; position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; max-width: none; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.globe-stage canvas.is-grabbing { cursor: grabbing; }
.mat-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.mat-left { display: grid; gap: clamp(14px, 2.2vh, 24px); align-self: center; }
.mat-photo { aspect-ratio: 1 / 1; max-height: 52vh; width: 100%; }
.mat-copy .h1 { margin-bottom: 14px; }
.mat-card--glass { padding: 14px 16px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(33, 33, 32, 0.1); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; }
.mat-card--glass p { color: var(--ink); opacity: 0.72; }
.t-dark .mat-card--glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; color: var(--white); }
.t-dark .mat-card--glass p { color: var(--white); opacity: 0.8; }
.t-dark .mat-copy .lead, .t-dark .mat-closing { color: var(--white); }
.t-dark .mat-closing { opacity: 0.85; }
.mat-closing { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); max-width: 40em; }
/* the materials screen may grow past one viewport (cards + closing statement) */
.materials.screen { height: auto; min-height: 100svh; padding-block: calc(var(--header-h) + 3vh) 5vh; }
html.snap .materials.screen { height: auto; }
.closing { margin-top: clamp(22px, 4vh, 44px); padding-top: clamp(18px, 3vh, 30px); border-top: 1px solid var(--line); }
.closing p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; max-width: 52em; color: var(--ink); }
.mat-copy .lead { color: var(--fg-2); }
.mat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: clamp(14px, 2.4vh, 28px) 0 clamp(14px, 2.2vh, 24px); }
.mat-card { padding: 16px 18px 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(248, 248, 246, 0.1); }
.mat-card h3 { font-family: var(--serif); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; margin-bottom: 6px; }
.mat-card p { font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); }
.value .num { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 18px; }
.value .num b { font-weight: 400; margin-right: 10px; }
.value .h3 { margin-bottom: 12px; }
.value p { color: var(--fg-2); font-size: 15px; }
.value blockquote { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 17px; line-height: 1.3; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact-aside .lead { margin-top: 20px; }
.contact-aside p:not(.lead) { color: var(--fg-2); }
.contact-aside dl { display: grid; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.contact-aside dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 4px; }
.premium-box { margin-top: 28px; padding: 18px 20px; border-radius: 10px; background: var(--burgundy); color: var(--white); }
.premium-box .eyebrow { margin-bottom: 8px; color: rgba(255, 255, 255, 0.7); }
.contact-aside .premium-box p, .contact-aside .premium-box .eyebrow { font-size: 15px; line-height: 1.55; color: var(--white); }
.contact-aside .premium-box .eyebrow { font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.field { display: grid; gap: 4px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.field input, .field select, .field textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; outline: none; transition: border-color 0.3s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 72px; max-height: 22vh; resize: vertical; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chips label { position: relative; }
.check-chips input { position: absolute; opacity: 0; inset: 0; }
.check-chips span { display: inline-block; padding: 7px 12px 6px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.check-chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.check-chips .chip--custom span { background: var(--dark); color: var(--white); border-color: var(--dark); }
.check-chips .chip--custom input:checked + span { background: var(--dark); color: var(--sand); border-color: var(--sand); }
.check-chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.checks { display: grid; gap: 10px; }
.check { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.form-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.form-actions .note { font-size: 12.5px; color: var(--fg-2); max-width: 36em; }
.form-done { display: none; margin-top: 24px; padding: 16px 20px; border-radius: 10px; background: var(--brown-1); font-size: 14px; }
.contact-form.is-sent .form-done { display: block; }
.contact { padding-top: calc(var(--header-h) + clamp(24px, 4vh, 56px)); padding-bottom: clamp(32px, 5vh, 64px); }

/* ---------- Reveals (inner pages) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 0.08s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hdr-nav .sep { margin: 0 7px; }
  .hdr-right .hdr-nav { display: none; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .hdr-inner { grid-template-columns: auto 1fr auto; }
  .hdr-left { display: none; }
  .hdr-logo { justify-self: start; width: 132px; }

  .grid-2, .grid-2--wide-left { grid-template-columns: 1fr; }
  .screen { height: auto; min-height: 100svh; padding-block: calc(var(--header-h) + 24px) 40px; }
  .hero.screen, .band.screen, .carousel.screen { padding: 0; }
  .split { grid-template-columns: 1fr; }
  .split .media { height: 46svh; }
  .split-copy { padding: 36px var(--gutter) 48px; }
  .hi-grid { grid-template-columns: 1fr; gap: 24px; }
  .hi-card .media { max-height: 34vh; }
  .chain-row { grid-template-columns: 1fr; gap: 14px; }
  .chain-steps li { font-size: 11.5px; }
  .chain-row--outlife .chain-steps li { font-size: 13px; }
  .facts { grid-template-columns: 1fr; gap: 20px; }
  .build-head { top: calc(var(--header-h) + 16px); right: var(--gutter); }
  .build-canvas { inset: 30% 0 38% 0; }
  .build-final { object-position: center; }
  .build-copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: 78px; min-height: 180px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps-visual { max-height: 36vh; }
  .steps-list { min-height: 220px; }
  .proj-row, .proj-grid, .coll-grid { grid-template-columns: 1fr; }
  .drop-list--five { grid-template-columns: repeat(2, 1fr); }
  .pcard-inner { grid-template-columns: 1fr; }
  .pcard { height: auto; min-height: 100svh; }
  .pcard .media { max-height: 32vh; }
  .proj-card .media { max-height: 36vh; }
  .framed { grid-template-columns: 1fr; }
  .rules { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .coll-item { grid-template-columns: 1fr; }
  .coll-item:nth-child(even) .media { order: 0; }
  .essentials { grid-template-columns: 1fr 1fr; }
  .story, .story--rev { grid-template-columns: 1fr; }
  .story--rev .media { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .spec-wrap, .phase, .contact-grid, .founder-grid, .mat-grid, .proj-gallery { grid-template-columns: 1fr; }
  .custom-grid, .values { grid-template-columns: 1fr; }
  .globe-copy, .globe-stage { grid-column: 1 / -1; }
  .globe-stage { order: -1; margin: 0 auto; max-width: 420px; }
  .founder-photo { max-height: 50vh; justify-self: start; }
  .mat-photo { max-height: 40vh; }
  .mat-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .proj-meta { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .display { font-size: clamp(34px, 11vw, 54px); }
  .h1 { font-size: clamp(28px, 8vw, 42px); }
  .hero-foot .local { display: none; }
  .car-arrow { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .essentials { grid-template-columns: 1fr; }
  .menu-panel { width: 100%; }
}

/* ==========================================================================
   Phone and tablet pass (final website, 22 Oct 2026)
   ========================================================================== */
/* touch screens: bigger hit areas for the small controls */
@media (pointer: coarse) {
  .car-dot { height: 44px; }
  .link-u { padding-block: 10px; }
  a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}
/* phones: the origin diagram stops pinning and shows both routes at once */
@media (max-width: 600px) {
  /* small labels stay readable on a phone */
  .eyebrow, .tag, .crumbs, .hero-foot, .car-ui, .mini-facts dt, .proj-meta dt, .contact-aside dt, .field label, .field legend, .proj-fig figcaption, .media .status, .chips li, .check-chips span, .foot-cols h4 { font-size: 12px; }
  .loc, .spec-row .dims, .essential .dims { font-size: 13px; }
}
/* portrait phones and tablets: the 3D build and the installed photo share one 16:9 frame,
   so the sofa is always whole and the last 3D frame still lands exactly on the photo */
@media (max-width: 1100px) and (orientation: portrait) {
  .build-canvas, .build-final { inset: auto; left: -9%; width: 118%; height: auto; aspect-ratio: 2560 / 1429; top: 60%; transform: translateY(-50%); }
  .build-final { object-fit: cover; max-width: none; }
  .build-fallback { width: 100%; height: 100%; object-fit: contain; }
}
/* iPad portrait: a tall screen, so the type steps up to fill it like the laptop version */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  body { font-size: 17px; }
  .display { font-size: clamp(54px, 9vw, 96px); }
  .h1 { font-size: clamp(40px, 6.2vw, 64px); }
  .h2 { font-size: clamp(32px, 4.6vw, 46px); }
  .lead { font-size: 19px; }
  .screen { padding-block: calc(var(--header-h) + 48px) 64px; }
  .hero.screen, .band.screen, .carousel.screen { padding: 0; }
  .eyebrow, .tag, .chain-label { font-size: 12px; }
}
/* tablets: collection and project grids run two across instead of one huge picture per row */
@media (min-width: 601px) and (max-width: 900px) {
  .proj-grid, .coll-grid { grid-template-columns: 1fr 1fr; }
}
/* phones: the decorative label row would wrap into broken pipes, so it goes */
@media (max-width: 600px) {
  .filters { display: none; }
}
/* phones and portrait tablets: the process cards sit one after another instead of stacking over each other */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .pcard { position: relative; top: auto; height: auto; min-height: 0; box-shadow: none; padding-block: 64px; }
}
/* phones: long single words in page titles (UNCOMPROMISING) must fit the width */
@media (max-width: 600px) {
  .hero .display { font-size: clamp(30px, 9vw, 48px); overflow-wrap: break-word; }
}
/* phones: closing band and footer size to their content (no empty dark screen), footer reads in two columns */
@media (max-width: 600px) {
  .start.screen, .cta-band.screen { min-height: 0; padding-block: 96px; }
  .site-footer { min-height: 0; padding-top: 72px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-cols > :last-child { grid-column: 1 / -1; }
  .foot-mark { margin: 40px 0 24px; }
  .foot-claim { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .hero .display { font-size: clamp(48px, 8.2vw, 90px); }
}
@media (max-width: 1100px) {
  .founder-copy .lead { margin-top: 18px; }
}

/* ==========================================================================
   Round 2 (22 Oct 2026)
   ========================================================================== */
/* collections slider: only the progress bars remain, bottom right */
.car-ui { justify-content: flex-end; }
/* FAQ: answers slide open (on hover with a mouse, on tap on touch screens) */
.faq details { overflow: hidden; }
.faq .answer { will-change: height; }
@media (hover: hover) and (pointer: fine) { .faq summary { cursor: default; } }
/* contact: the Bespoke option reads as different by its outline, not by a dark fill */
.check-chips .chip--custom span { background: var(--white); color: var(--ink); border: 2px solid var(--ink); padding: 6px 11px 5px; }
.check-chips .chip--custom input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* footer legal line: plain text */
.foot-legal span { cursor: default; }
/* phones: the founder signature stays on one line */
@media (max-width: 600px) {
  .founder-copy .note .sig { font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 380px) {
  .founder-copy .note .sig { font-size: 11px; letter-spacing: 0.06em; }
}

/* ==========================================================================
   Phone round (22 Oct 2026): phones only, laptop and iPad untouched
   ========================================================================== */
/* burger menu wherever the top navigation is hidden */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .hdr-right { gap: 6px; }
}
@media (max-width: 600px) {
  /* collections slider: just the three bars, centred under "Discover all the collections" */
  .car-count { display: none; }
  .car-ui { justify-content: center; }

  /* origin: both routes stay horizontal, scaled down to the phone width */
  .chain { gap: 34px; }
  .chain-row { gap: 10px; }
  .chain-label { font-size: 11px; }
  .chain-label strong { font-size: 13px; }
  .chain-line { top: 6px; }
  .chain-row--outlife .chain-line { top: 5px; }
  .chain-steps li { padding-top: 20px; font-size: 10px; line-height: 1.25; letter-spacing: 0; }
  .chain-steps li::before { width: 9px; height: 9px; top: 2px; }
  .chain-steps li:last-child { max-width: 54px; }
  .chain-row--industry .chain-steps { padding-top: 14px; }
  .chain-row--industry .chain-line { top: 20px; }
  .chain-row--industry .chain-steps li:not(:first-child):not(:last-child)::after { top: -16px; font-size: 7.5px; letter-spacing: 0.04em; white-space: nowrap; }
  .chain-row--outlife .chain-steps li { font-size: 11px; }
  .chain-row--outlife .chain-steps li:last-child { max-width: 96px; }
  .chain-logo { width: 78px; margin-top: 0; }

  /* sketch to site: a smaller box around the same text, clear of the 3D model */
  .build-head { padding: 10px 14px; }
  .build-head .eyebrow { margin-bottom: 6px; }
  .build-scenes { min-height: 140px; }

  /* outdoor essentials: two to a row, name and size only */
  .essentials { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .essential h3 { font-size: 14px; margin: 10px 0 4px; }
  .essential p:not(.dims) { display: none; }
  .essential .dims { margin-top: 0; font-size: 12px; }
}

/* projects page: six projects (25 Oct 2026) sit three per row on laptop (two full rows), two on iPad, one on phone */

/* enquiry form: hidden anti-spam field, sending and error states (26 Oct 2026) */
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form.is-sending [type="submit"] { opacity: 0.6; cursor: progress; }
.form-failed { display: none; margin-top: 24px; padding: 16px 20px; border-radius: 10px; background: #f3e3dc; color: var(--burgundy); font-size: 14px; }
.contact-form.is-failed .form-failed { display: block; }
.contact-form.is-sent .form-failed { display: none; }

/* 26 Oct 2026: collections slider, bars bottom left and "Discover all the collections" bottom right (all devices) */
.car-ui, .car-ui[class] { justify-content: space-between; align-items: center; gap: 16px; }
.car-ui .car-all { color: var(--paper); border-color: rgba(248, 248, 246, 0.6); white-space: nowrap; }
@media (max-width: 600px) {
  .car-ui { justify-content: space-between; }
  .car-ui .car-all { font-size: 11px; letter-spacing: 0.1em; }
  .car-dot { width: 28px; }
  /* Outlife route: "Your project, installed" sits at the end of the bar */
  .chain-row--outlife .chain-steps li:last-child { justify-self: end; text-align: right; }
  .chain-row--outlife .chain-steps li:last-child::before { left: auto; right: 0; }
}
/* Sketch to Site: room for the longest step text (26 Oct copy) */
.build-scenes { min-height: 200px; }
@media (max-width: 600px) { .build-scenes { min-height: 150px; } }
@media (max-width: 380px) { .build-scenes { min-height: 162px; } }

/* ==========================================================================
   Phone round 2 (27 Oct 2026): phones only (600px and under); laptop and iPad untouched
   ========================================================================== */
.car-all-m { display: none; }
@media (max-width: 600px) {
  /* home hero: "Discover" in the middle (other pages keep their two-sided hero line) */
  .hero-foot--home { justify-content: center; }

  /* collections slider: link above the name, bars centred at the bottom */
  .car-all-m { display: inline-flex; margin-bottom: 18px; font-size: 11px; letter-spacing: 0.1em; color: var(--paper); border-color: rgba(248, 248, 246, 0.6); }
  .car-ui .car-all { display: none; }
  .car-ui, .car-ui[class] { justify-content: center; }
  .car-content > :nth-child(4) { transition-delay: 0.36s; }

  /* scroll lock: one section per swipe on the home, Process and About pages (the pages marked html.snap) */
  html.snap { scroll-snap-type: y mandatory; }
  html.snap .screen { scroll-snap-align: start; scroll-snap-stop: always; }
  html.snap .screen-end { scroll-snap-align: start; }
  html.snap .build { scroll-snap-align: none; }
  html.snap .origin { scroll-snap-align: start; scroll-snap-stop: always; }

  /* origin: pinned like the laptop, usual route first, then the Outlife route; everything fits one phone screen */
  .origin-pin { padding: calc(var(--header-h) + 8px) 0 24px; justify-content: center; }
  .origin-head { margin-bottom: 26px; }
  .origin-head .h1 { font-size: 7.4vw; }
  .origin-head .lead { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .origin .eyebrow { margin-bottom: 10px; }
  .chain { gap: 26px; }

  /* process: the cards stack over each other like the laptop, each one fitting the screen */
  .pcard { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; align-items: center; padding: calc(var(--header-h) + 10px) var(--gutter) 18px; box-shadow: 0 -24px 48px -30px rgba(25, 12, 0, 0.3); }
  .pcard-inner { grid-template-columns: 1fr; gap: 14px; }
  .pcard .num { margin-bottom: 8px; }
  .pcard .h1 { font-size: 7.4vw; margin-bottom: 8px; }
  .pcard > .pcard-inner > div > p { font-size: 14px; line-height: 1.45; }
  .pcard-steps { margin-top: 10px; }
  .pcard-steps li { grid-template-columns: 34px 1fr; gap: 8px; padding: 7px 0; }
  .pcard-steps h3 { font-size: 14px; margin-bottom: 2px; }
  .pcard-steps p { font-size: 12.5px; line-height: 1.4; }
  .pcard .media { max-height: none; height: 21svh; aspect-ratio: auto; }

  /* process hero title: three readable lines instead of one word per line */
  .hero .display { font-size: 7.6vw; line-height: 1.08; }

  /* about: "Where we are" text first, then the globe */
  .globe-stage { order: 2; margin-top: 28px; }
  .globe-copy { order: 1; }

  /* about: founder photo between the introduction and the note */
  .founder-grid { display: flex; flex-direction: column; gap: 0; }
  .founder-copy { display: contents; }
  .founder-copy > .eyebrow { order: 1; } .founder-copy > .h1 { order: 2; } .founder-copy > .lead { order: 3; }
  .founder-photo { order: 4; margin: 24px 0 8px; max-height: 46svh; width: 100%; }
  .founder-copy > .note { order: 5; }
}

/* 28 Oct 2026: project cards — place and type line in capitals, same size (projects page and home, all devices) */
.proj-cell .loc, .proj-card .loc { text-transform: uppercase; letter-spacing: 0.04em; }

/* 29 Oct 2026: concept packages (Mini villas): the project book as a horizontal strip, read like the book.
   Every page shares one height (--bh); covers are square, spreads twice as wide. The strip starts on the
   page's left margin and runs to the screen edge. Renders below at their own 16:9. */
.ratio-169 { aspect-ratio: 16 / 9; }
.book-sec { --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); --bh: min(40vw, 64vh, 620px); }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.book-head .eyebrow { margin: 0; }
.book-cue { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.book-cue .arrow { width: 14px; height: 10px; }
.book-strip { display: flex; gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 0 var(--edge) 4px; scrollbar-width: none; cursor: grab; outline: none; }
.book-strip::-webkit-scrollbar { display: none; }
.book-strip::after { content: ""; flex: 0 0 1px; }
.book-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.book-strip:focus-visible { box-shadow: inset 0 0 0 1px var(--line); }
.book-page { flex: 0 0 auto; margin: 0; height: var(--bh); width: calc(var(--bh) * var(--ar)); scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); }
.book-page img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
@media (max-width: 600px) {
  /* one spread fills the width between the margins; arrows hide, swipe does the work */
  .book-sec { --bh: calc((100vw - 2 * var(--gutter)) / 2); }
  .book-cue { font-size: 12px; }
  .book-strip { gap: 8px; }
  /* a longer project type ("Architecture & interior package") keeps clear of Discover */
  .hero-foot { gap: 20px; }
  .hero-foot > span:last-child { text-align: right; }
}

/* 31 Oct 2026, final: project description (every project page). Left: title, the facts in two columns, the
   description. Right: the sketch, filling the full height of the left column (title top to text bottom).
   The sketch is graphite on white paper with faded edges: cover-cropping it keeps the furniture in the middle,
   and multiply lets it sit on the page's paper instead of a white box. */
/* on a laptop the section is one full screen of its own: the block sits centred below the header, and neither
   the cover above nor the next section shows while it is in view */
#about:has(.proj-head) { padding-block: clamp(48px, 8svh, 96px); }
@media (min-width: 901px) {
  #about:has(.proj-head) { min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--header-h) + clamp(16px, 4svh, 48px)) clamp(32px, 6svh, 72px); }
}
.proj-head { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 96px); align-items: stretch; }
.proj-head.no-sketch { grid-template-columns: minmax(0, 46em); }
.ph-left { display: grid; gap: clamp(28px, 4svh, 44px); align-content: start; }
.ph-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px clamp(20px, 3vw, 48px); font-size: 14px; }
.ph-facts dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }   /* labels dark, values grey (Pablo, 31 Oct) */
.ph-facts dd { margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2); }
.ph-desc { max-width: 40em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--ink); }
.ph-desc p + p { margin-top: 12px; }
.ph-sketch { position: relative; margin: 0; min-height: 320px; }
.ph-sketch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sk-pos, 50% 50%); mix-blend-mode: multiply; }
@media (max-width: 900px) {
  /* one column: title, facts, description, then the sketch at its own shape */
  .proj-head { grid-template-columns: 1fr; gap: 32px; }
  .ph-sketch { min-height: 0; }
  .ph-sketch img { position: static; height: auto; }
  .ph-desc { max-width: none; font-size: 16px; }
}
@media (max-width: 600px) { .ph-facts dt { font-size: 12px; } .ph-facts { gap: 16px 20px; } }

/* 31 Oct 2026: scroll lock on project pages (laptop and phone, like the home page): cover, then the description,
   then the book and renders scrolling freely as one block (taller than the screen), then "Tell us your vision"
   as a full screen, then the footer. */
.proj-hero { height: 100svh; }
.proj-media { padding-top: calc(var(--header-h) + clamp(24px, 4svh, 48px)); }   /* clears the header when the block snaps in */
.proj-cta-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) + 24px) 48px !important; }
.proj-cta-sec .proj-cta { padding-top: 0; }
@media (min-width: 900px) and (min-height: 560px), (max-width: 600px) {
  html.snap .snap-stop { scroll-snap-align: start; scroll-snap-stop: always; }
  html.snap .snap-free { scroll-snap-align: start; }
}

/* 1 Nov 2026: collections slider, name and line centred on the page (level with the arrows),
   "Discover all the collections" bottom centre, progress bars bottom right (laptop, iPad and phone) */
.car-content { top: 50%; bottom: auto; transform: translateY(-50%); }
.car-content .tag { margin: 22px 0 0; }
.car-all-m, .car-all-m[class] { display: none; }
.car-ui, .car-ui[class] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.car-ui .car-dots { grid-column: 3; grid-row: 1; justify-self: end; }
.car-ui .car-all, .car-ui .car-all[class] { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: center; }
@media (max-width: 600px) {
  /* not enough width for both on one line: the bars sit just above the link, still on the right */
  .car-ui, .car-ui[class] { grid-template-columns: 1fr; gap: 6px; bottom: 20px; }
  .car-ui .car-dots { grid-column: 1; grid-row: 1; }
  .car-ui .car-all, .car-ui .car-all[class] { grid-column: 1; grid-row: 2; }
}

/* 1 Nov 2026: projects page, "Filter by" (completed / in progress) at the right end of the label row */
.proj-tools { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.proj-tools .filters { grid-column: 2; margin-bottom: 0; }
.pfilter { grid-column: 3; justify-self: end; position: relative; z-index: 5; }
.pfilter-btn { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 8px 0; cursor: pointer; }
.pfilter-btn b { font-weight: inherit; color: var(--fg-2); }
.pfilter-btn b:not(:empty)::before { content: ":"; color: var(--ink); margin: 0 0.5em 0 -0.14em; }
.pfilter-btn svg { width: 9px; height: 6px; margin-left: 8px; vertical-align: 1px; transition: transform 0.3s var(--ease); }
.pfilter.is-open .pfilter-btn svg { transform: rotate(180deg); }
.pfilter-menu { position: absolute; right: 0; top: 100%; min-width: 210px; margin: 0; padding: 8px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(25, 12, 0, 0.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s; }
.pfilter.is-open .pfilter-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pfilter-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; }
.pfilter-menu button:hover, .pfilter-menu button:focus-visible { background: var(--brown-1); color: var(--ink); }
.pfilter-menu button[aria-checked="true"] { color: var(--ink); }
.pfilter-menu button[aria-checked="true"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--burgundy); }
.proj-cell.is-filtered { display: none; }
@media (max-width: 600px) {
  /* the label row stays hidden on phones; "Filter by" sits on its own at the right */
  .proj-tools { grid-template-columns: 1fr; margin-bottom: 20px; }
  .pfilter { grid-column: 1; }
  .pfilter-btn { font-size: 12px; padding: 12px 0; }
  .pfilter-menu button { font-size: 12px; padding: 13px 12px; }
}

/* 1 Nov 2026: the Sketch to Site build rests on its own first stage too (laptop and phone), so the step from
   the Origin section into it is one screen like every other step, not two at once */
@media (min-width: 900px) and (min-height: 560px), (max-width: 600px) {
  html.snap .build { scroll-snap-align: start; scroll-snap-stop: always; }
}
.build-hud .progress i { transition: transform 0.6s var(--ease); }

/* 1 Nov 2026: phones. Each locked section fills the whole screen once Safari's toolbar has shrunk (100lvh),
   so the next section never peeks in at the bottom. The hero keeps 100svh so its foot line shows on arrival. */
@media (max-width: 600px) {
  .screen:not(.hero), .screen--auto:not(.hero) { min-height: 100lvh; }
  .carousel, .band { height: 100lvh; }
  .origin-pin, .build-pin { height: 100lvh; }
  .origin-stop, .build-stop { min-height: 100lvh; }
  .pcard { height: 100lvh; }
  .car-ui, .car-ui[class] { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .build-hud { bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* Start a project: the full screen, content centred */
  .start.screen { min-height: 100lvh; padding-block: calc(var(--header-h) + 24px) calc(48px + env(safe-area-inset-bottom)); }
  /* the catalogue: picture and text share exactly one screen */
  .split.screen { display: flex; flex-direction: column; justify-content: flex-start; height: 100lvh; min-height: 0; }
  .split.screen .media { flex: 1 1 auto; height: auto; min-height: 0; }
  .split-copy { flex: 0 0 auto; padding: 28px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  /* projects: one more resting point where the three cards end, so the move on to the next band is one calm screen */
  html.snap .projects-teaser .proj-row { scroll-snap-align: end; scroll-snap-stop: always; }
}

/* 2 Nov 2026: Spanish home copy is longer. Short phones (iPhone SE size): the Origin text tightens so the
   section still fits one screen; the Sketch to Site box gets room for the longest Spanish step (phones only) */
@media (max-width: 600px) {
  html[lang="es"] .build-scenes { min-height: 162px; }
}
@media (max-width: 600px) and (max-height: 720px) {
  html[lang="es"] .origin-head .lead { font-size: 13.5px; line-height: 1.42; margin-top: 8px; }
  html[lang="es"] .origin-head { margin-bottom: 18px; }
  html[lang="es"] .origin .chain { gap: 18px; }
}
/* 2 Nov 2026: phones, the closing "Tell us your vision" band on inner pages fills the screen like the home one */
@media (max-width: 600px) {
  .cta-band.screen { min-height: 100lvh; padding-block: calc(var(--header-h) + 24px) calc(48px + env(safe-area-inset-bottom)); }
}

/* 2 Nov 2026: phones, collections slider: "Discover all the collections" centred, the three bars centred right under it */
@media (max-width: 600px) {
  .car-ui, .car-ui[class] { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .car-ui .car-all, .car-ui .car-all[class] { grid-column: 1; grid-row: 1; justify-self: center; }
  .car-ui .car-dots { grid-column: 1; grid-row: 2; justify-self: center; }
}

/* 2 Nov 2026: footer legal links; legal pages (one reading column); branded 404 */
.foot-legal a { opacity: 0.8; transition: opacity 0.3s; }
.foot-legal a:hover { opacity: 1; }
.legal-doc { padding-top: calc(var(--header-h) + clamp(48px, 9vh, 120px)); }
.legal-doc .wrap { max-width: 860px; }
.legal-head { padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.legal-head .lead { margin-top: 20px; color: var(--fg-2); max-width: 34em; }
.legal-date { margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.legal-body section { padding-block: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.legal-body .h3 { margin-bottom: 14px; }
.legal-body p { color: var(--ink); max-width: 44em; line-height: 1.65; }
.legal-body p + p { margin-top: 0.8em; }
.nf .band-content[hidden] { display: none; }
.nf .h1 { color: var(--paper); }
.nf-lead { margin: 22px auto 0; max-width: 32em; color: rgba(248, 248, 246, 0.85); }
.nf .cta-actions { margin-top: 32px; }
.nf .link-u { color: var(--paper); }