/* Foundation: tokens, base type and every part more than one section uses.
   The approved Phase 3 direction lives in the tokens below. Load order:
     foundation.css      this file
     hero-cinematic.css  the hero, complete
     sections.css        one block per section, in page order
   Nothing later overrides anything here; each file only adds. */

@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/instrument-sans-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url("assets/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ground:#0f1114;--surface:#171a1e;--surface-2:#1e2228;
  --ink:#f1f2f0;--ink-2:#b6bbc2;--ink-3:#8d939c;
  /* One accent, two jobs. The fill carries actions; sage carries text,
     hairlines and whatever is currently selected. */
  --accent:#27664E;--accent-on:#F1F2F0;--accent-hover:#2E7A5E;
  --accent-ink:#9CC9AE;--accent-dim:#153A2E;
  --rule:#2C3138;--rule-strong:#3A4048;--field:#12151a;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Instrument Sans",Arial,sans-serif;
  --prose:Spectral,Georgia,"Times New Roman",serif;
  /* Photography is graded to graphite, so the accent is the only colour. */
  --photo-grade:grayscale(.84) contrast(1.14) brightness(.95);
  --shell:1320px;--gutter:clamp(20px,4vw,60px);
  --section:clamp(88px,9vw,136px);
  --h2:clamp(46px,5.4vw,80px);
  --radius:0;--duration:220ms;--ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--masthead-h,90px) + 20px);-webkit-text-size-adjust:100%;color-scheme:dark}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
main img{filter:var(--photo-grade)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:disabled,input:disabled{cursor:not-allowed}
button,a,input,select,textarea,summary{touch-action:manipulation}
a,button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.015em}
p{color:var(--ink-2)}
::selection{background:var(--accent-ink);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:20px;z-index:200;padding:12px 20px;background:var(--ink);color:var(--ground);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.shell{width:calc(100% - var(--gutter)*2);max-width:var(--shell);margin-inline:auto}

/* ------------------------------------------------------ section rhythm */
/* Sections alternate between the ground and a raised surface, so the page
   reads as a sequence of rooms without needing decoration to separate them. */
.section{padding-block:var(--section);border-top:1px solid var(--rule)}
.section--raised{background:var(--surface)}

.section-heading{max-width:690px;margin-bottom:56px}
.section-heading h2,.about h2,.room h2,.enquiry h2{font-size:var(--h2);font-weight:700;line-height:.94;letter-spacing:-.01em;text-transform:uppercase}
.section-heading h2 span,.about h2 span,.room h2 span,.enquiry h2 span{color:var(--accent-ink)}
.section-heading>p:not(.eyebrow),.section-heading--split>p{max-width:46ch;margin-top:24px;font-size:16px;line-height:1.75}
/* Heading on the left, the reason for the section on the right. */
.section-heading--split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 64px;align-items:end;max-width:none}
.section-heading--split>p{margin-top:0;justify-self:end}

/* Record-label labelling: a catalogue number, a short rule, the name. */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow>span{display:flex;align-items:center;gap:14px;color:var(--ink-3)}
.eyebrow>span::after{content:"";width:28px;height:1px;background:var(--rule-strong)}

/* Long-form writing is set in the serif so it reads like a person wrote it. */
.prose p{font-family:var(--prose);font-size:18px;line-height:1.72;color:var(--ink-2);max-width:36em}
.prose p+p{margin-top:20px}

/* Disclosures, captions and small print. */
.note{font-size:12px;line-height:1.75;color:var(--ink-3);max-width:760px;margin-top:24px}

/* ------------------------------------------------------------- actions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:14px 26px;border-radius:var(--radius);font-family:var(--body);font-size:14px;font-weight:600;transition:background-color var(--duration) var(--ease),transform var(--duration) var(--ease)}
.btn--primary{background:var(--accent);color:var(--accent-on)}
.btn--primary:not(:disabled):hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn--primary:not(:disabled):active{transform:translateY(0)}
.btn--primary:disabled{background:var(--surface-2);color:var(--ink-3);transform:none}
.text-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.04em}
.text-link span{color:var(--accent-ink);font-size:19px;transition:transform var(--duration) var(--ease)}
.text-link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent-ink)}
.text-link:hover span{transform:translate(2px,-2px)}

/* A live signal, used by the hero and the listening console. */
.signal-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 13px #9cc9ae66}

/* -------------------------------------------------------- placeholders */
/* Deliberately plain, so a reviewer can see at a glance what is still
   waiting on client content. */
.placeholder-art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px dashed #4b4f55;border-radius:var(--radius);background:repeating-linear-gradient(135deg,#14171b 0 10px,#181b20 10px 20px)}
.placeholder-art span{font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.placeholder-art--portrait{aspect-ratio:.8}
.content-flag{margin-top:28px;padding-left:16px;border-left:1px solid var(--accent-dim);font-family:var(--body);font-size:12px;line-height:1.8;color:var(--ink-3)}

/* Label and value pairs: service details, About facts, enquiry contact. */
.spec,.facts{display:grid}
.spec>div,.facts>div{display:grid;grid-template-columns:minmax(96px,.36fr) minmax(0,1fr);gap:20px;padding-block:14px;border-top:1px solid var(--rule)}
.spec>div:last-child,.facts>div:last-child{border-bottom:1px solid var(--rule)}
.spec dt,.facts dt{padding-top:3px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.spec dd,.facts dd{font-size:14px;line-height:1.65;color:var(--ink-2)}

/* ------------------------------------------------------------- banner */
.demo-banner{position:relative;z-index:100;background:#111113;border-bottom:1px solid #2c2e31}
.demo-banner__in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-height:30px;padding:6px var(--gutter);font-size:10px;line-height:1.5;text-align:center}
.demo-banner strong{font-family:var(--body);font-size:9px;letter-spacing:.12em;color:var(--accent-ink)}
.demo-banner span{color:var(--ink-2)}
.demo-banner a{text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------------------- masthead */
.masthead{position:sticky;top:0;z-index:90;background:var(--ground);border-bottom:1px solid var(--rule)}
/* Reading progress along the bottom edge: scroll-driven where supported,
   set by navigation.js elsewhere and under reduced motion. */
.masthead::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--accent-ink);transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
.masthead[data-menu-open]::after{display:none}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .masthead::after{animation:read-progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes read-progress{from{transform:scaleX(0)}to{transform:none}}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:86px;padding-block:13px}
.brandmark{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;min-height:44px;font-size:26px;font-weight:700;letter-spacing:.015em;line-height:1;text-transform:uppercase}
.brandmark__dot{color:var(--accent-ink)}
.brandmark__sub{margin-top:9px;font-family:var(--body);font-size:8px;font-weight:500;letter-spacing:.25em}
.nav{display:flex;gap:clamp(16px,2vw,30px)}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.nav a::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:var(--accent-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--duration) var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav .nav__project{display:none}
.masthead__cta{display:flex;align-items:center;gap:20px;min-height:46px;padding:0 22px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--accent-on);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.masthead__cta span{font-size:20px;color:var(--accent-on)}
.masthead__cta:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.nav-toggle{display:none}

/* -------------------------------------------------------------- motion */
/* Controlled entrances. demo.js marks only what starts below the fold, so
   nothing is ever hidden without JavaScript, above the fold or in print. */
[data-reveal=pending]{opacity:0;transform:translateY(18px)}
[data-reveal=shown]{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 720ms var(--ease);transition-delay:calc(var(--reveal-i,0) * 80ms)}
/* Restrained image reveal: the photograph settles inside its frame. */
[data-reveal] img{transition:transform 1100ms var(--ease)}
[data-reveal=pending] img{transform:scale(1.045)}
/* Photographs also open like a curtain, bottom to top. */
[data-reveal=pending] :is(.room__photos img,.service-panel__image img,.about__portrait .placeholder-art){clip-path:inset(100% 0 0 0)}
[data-reveal=shown] :is(.room__photos img,.service-panel__image img,.about__portrait .placeholder-art){clip-path:inset(0);transition:clip-path 1300ms cubic-bezier(.16,1,.3,1) 150ms,transform 1100ms var(--ease)}
/* Headings enter in parts (demo.js marks them): the block stays put, the
   title rises out from behind a mask with its accent line a beat behind,
   the eyebrow rule draws, and the words around it follow. */
[data-heading][data-reveal]{opacity:1;transform:none}
[data-heading] h2>span{display:inline-block}
[data-heading][data-reveal=pending] h2{clip-path:inset(-20% -5% 100% -5%);transform:translateY(34%)}
[data-heading][data-reveal=pending] h2>span{transform:translateY(50%)}
[data-heading][data-reveal=shown] h2{clip-path:inset(-20% -5% -20% -5%);transition:clip-path 1100ms cubic-bezier(.16,1,.3,1),transform 1100ms cubic-bezier(.16,1,.3,1)}
[data-heading][data-reveal=shown] h2>span{transition:transform 1100ms cubic-bezier(.16,1,.3,1) 120ms}
[data-heading][data-reveal=pending] .eyebrow>span::after{transform:scaleX(0)}
[data-heading][data-reveal=shown] .eyebrow>span::after{transform-origin:left;transition:transform 900ms cubic-bezier(.16,1,.3,1) 250ms}
[data-heading][data-reveal=pending] :is(.eyebrow,h2~*,:has(>h2)~*){opacity:0;transform:translateY(14px)}
[data-heading][data-reveal=shown] .eyebrow{transition:opacity 500ms var(--ease),transform 600ms var(--ease)}
[data-heading][data-reveal=shown] :is(h2~*,:has(>h2)~*){transition:opacity 620ms var(--ease) 260ms,transform 720ms var(--ease) 260ms}

@media(max-width:1023px){
  .masthead__in{gap:20px}
  .nav{gap:16px}
}
@media(max-width:900px){
  /* Studio names run longer than the placeholder did. Keep one row. */
  .brandmark{font-size:22px}
  .section-heading--split{grid-template-columns:1fr;align-items:start}
  .section-heading--split>p{justify-self:start}
}
@media(max-width:767px){
  :root{--section:76px}
  .section-heading{margin-bottom:38px}
  .section-heading h2,.about h2,.room h2,.enquiry h2{font-size:clamp(42px,11vw,64px)}
  .section-heading>p:not(.eyebrow),.section-heading--split>p{font-size:15px}
  .eyebrow{margin-bottom:20px}
  .prose p{font-size:17px}
  .spec>div,.facts>div{grid-template-columns:1fr;gap:4px}

  .demo-banner__in{gap:8px}
  .demo-banner strong{font-size:8px}
  .masthead__in{flex-wrap:wrap;gap:16px;min-height:72px;padding-block:16px}
  .brandmark{font-size:22px}
  .brandmark__sub{margin-top:7px;font-size:7px}
  .masthead__cta{margin-left:auto;min-height:44px;padding:0 13px;gap:12px}
  .nav-toggle:not([hidden]){display:flex;align-items:center;justify-content:flex-end;gap:10px;order:2;min-width:64px;min-height:44px;font-size:12px}
  .nav-toggle span{width:14px;font-size:22px;font-weight:400;text-align:center}
  .nav{order:3;flex-wrap:wrap;width:100%;gap:6px 24px;padding-top:10px;border-top:1px solid var(--rule)}
  html:not([data-js]) .nav-toggle{display:none}
  html[data-js] .masthead:not([data-menu-open]) .nav{display:none}
  .masthead[data-menu-open] .nav{display:flex;max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain}
  .nav .nav__project{display:flex;color:var(--accent-ink)}
}
@media(max-width:600px){
  .masthead__cta{display:none}
  .nav-toggle:not([hidden]){margin-left:auto}
}
@media(max-width:389px){
  .brandmark{font-size:18px}
}
/* Phone landscape: the sticky bar should not take a fifth of a short screen. */
@media(max-height:500px) and (orientation:landscape){
  .masthead__in{min-height:60px;padding-block:8px}
}

/* Touch: native scrolling, no simulated hover movement. */
@media(hover:none),(pointer:coarse){
  html{scroll-behavior:auto}
  .btn--primary:not(:disabled):hover,.text-link:hover span{transform:none}
}
@media(prefers-reduced-transparency:reduce){.masthead{background:var(--ground)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],[data-reveal] img{opacity:1!important;transform:none!important}
}