/* ---------- fonts ---------- */
@font-face{font-family:"Clash Display";src:url("../fonts/ClashDisplay-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Walkway";src:url("../fonts/Walkway SemiBold.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Walkway";src:url("../fonts/Walkway Bold.ttf") format("truetype");font-weight:700;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --terra:#754436;--terra-dark:#543126;--sand:#D3C7AD;--gold:#CEA167;
  --cream:#ECEBE7;--olive:#6C6751;--navy:#28374A;--ink:#121212;
  /* room palette: dim material blocks from the brand's colour-proportion
     sheet; other palette colours glow inside each room as ambient light */
  /* one material: the brand's deep brown, in close values — olive/navy/sand/gold
     appear only as light and accents within it */
  --room-brown:#301B15;--room-ink:#150E08;--room-deep:#241610;
  --room-umber:#1D130D;--room-footer:#170C08;
  --font-display:"Clash Display","Avenir Next Condensed","Arial Narrow",sans-serif;
  --font-body:"Walkway","Century Gothic","Futura","Trebuchet MS",sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
  --h-hero:clamp(3.2rem,9.5vw,8.5rem);
  --h-section:clamp(2.4rem,6vw,5.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--cream);background:var(--room-ink);line-height:1.6;-webkit-font-smoothing:antialiased}

/* full-bleed colour room: sections are .container elements, so the block
   colour is extended sideways and clipped to the viewport */
.room{position:relative;box-shadow:0 0 0 100vmax var(--room);clip-path:inset(0 -100vmax);background:var(--room)}
.room-brown{--room:var(--room-brown)}
.room-ink{--room:var(--room-ink)}
.room-deep{--room:var(--room-deep)}
.room-umber{--room:var(--room-umber)}

/* keyboard focus */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* lamp cursor (cursor.js adds .has-cursor on capable devices) */
html.has-cursor body{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:text}
.cursor-dot,.cursor-glow{position:fixed;top:0;left:0;pointer-events:none;will-change:transform;border-radius:50%}
.cursor-dot{z-index:1001;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--gold);transition:width .25s,height .25s,margin .25s,background .25s,border .25s}
.cursor-dot.is-link{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;border:1px solid var(--gold)}
.cursor-glow{z-index:1000;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;background:radial-gradient(circle,rgba(206,161,103,.32),rgba(206,161,103,.11) 42%,transparent 70%);mix-blend-mode:screen}
.cursor-glow.pulse{animation:cursor-pulse .55s ease-out}
@keyframes cursor-pulse{35%{scale:1.3}100%{scale:1}}

/* dim imagery: pictures sit low-lit and brighten under attention */
.frame img,.reveal-img img,.detail-gallery img{filter:brightness(.78) saturate(.96)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:1400px;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"\2726\00a0\00a0";font-size:.6rem;vertical-align:1px}
h1,h2,h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:.01em}

/* brand lockup: SVG mark + wordmark, used by nav/footer */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand-text{font-family:var(--font-display);font-weight:600;letter-spacing:.14em;font-size:1.05rem;display:flex;flex-direction:column;line-height:1}
.brand-text small{font-family:var(--font-body);font-size:.55rem;letter-spacing:.55em;opacity:.8;margin-top:.25rem}

/* nav: shared by all pages (transparent-over-hero → cream when scrolled on the
   homepage; permanently cream via .page-nav on interior pages) */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--cream)}
@media (prefers-reduced-motion: no-preference){
  .nav{transition:background .35s ease,color .35s ease}
  /* page-load: chrome settles in from above */
  .nav-inner>*{animation:nav-drop 1s cubic-bezier(.2,.65,.2,1) both}
  .nav-inner>*:nth-child(2){animation-delay:.15s}
  .nav-inner>*:nth-child(3){animation-delay:.3s}
  @keyframes nav-drop{from{opacity:0;transform:translateY(-14px)}}
}
.nav-inner{display:flex;align-items:center;gap:2.5rem;padding:1.1rem var(--pad);border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.nav-links{display:flex;gap:2.2rem;margin-inline:auto}
.nav-links a,.nav-contact{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.nav-links a:hover,.nav-contact:hover{opacity:1}
.nav.scrolled{background:var(--room-ink);color:var(--cream)}
.nav-burger{display:none}
@media (max-width:768px){
  .nav-links,.nav-contact{display:none}
  .nav-burger{display:flex;flex-direction:column;gap:6px;background:none;border:0;margin-left:auto;cursor:pointer}
  .nav-burger span{width:26px;height:2px;background:currentColor}
  .nav.open{background:var(--terra-dark)}
  .nav.open .nav-links{display:flex;position:fixed;inset:0;background:var(--terra-dark);flex-direction:column;justify-content:center;align-items:center;gap:2rem;font-size:1.2rem}
  .nav.open .nav-burger span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav.open .nav-burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
}
@media (max-width:768px) and (prefers-reduced-motion: no-preference){
  .nav-burger span{transition:transform .3s}
}

/* underlined arrow link, as in reference */
.line-link{display:inline-flex;align-items:center;gap:2.5rem;padding-bottom:.45rem;border-bottom:1px solid currentColor;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase}
.line-link:hover{gap:3.2rem;color:var(--gold)}
@media (prefers-reduced-motion: no-preference){
  .line-link{transition:gap .3s ease,color .3s ease}
}

/* clipped image frame: enables quiet hover zooms without layout bleed */
.frame{display:block;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}

/* scroll reveal primitives (JS adds .in) */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.65,.2,1),transform 1s cubic-bezier(.2,.65,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal-img{display:block;overflow:hidden}
  .reveal-img img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.6,.05,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
  .reveal-img.in img{clip-path:inset(0 0 0 0)}
  /* grids marked .stagger cascade their children's reveals */
  .stagger>*:nth-child(2){transition-delay:.12s}
  .stagger>*:nth-child(3){transition-delay:.24s}
  .stagger>*:nth-child(4){transition-delay:.36s}
  .stagger>*:nth-child(5){transition-delay:.48s}
  /* quiet hover zooms inside clipped frames; light returns under the lamp */
  .frame img{transition:transform .9s cubic-bezier(.2,.6,.2,1),filter .9s ease}
  .reveal-img img{transition:clip-path 1.1s cubic-bezier(.6,.05,.2,1),transform .9s cubic-bezier(.2,.6,.2,1),filter .9s ease}
  figure:hover .frame img,.reveal-img:hover img{transform:scale(1.045);filter:brightness(1) saturate(1)}
  .slide.is-active .frame img{filter:brightness(.95) saturate(1)}
  /* cards lift toward the light */
  .svc{transition:transform .5s cubic-bezier(.2,.65,.2,1)}
  .svc:hover{transform:translateY(-6px)}
}

/* footer + marquee: shared by all pages */
.footer{color:var(--cream);padding-top:4rem;overflow:hidden;
  background:radial-gradient(50vmax 40vmax at 50% 110%,rgba(206,161,103,.1),transparent 60%),
             var(--room-footer)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3.5rem}
.footer-grid nav,.footer-grid div{display:grid;gap:.5rem;align-content:start;font-size:.9rem}
.footer-grid a:hover{color:var(--gold)}
.marquee{border-top:1px solid color-mix(in srgb,var(--cream) 25%,transparent);padding-block:1.2rem}
.marquee-track{display:flex;white-space:nowrap;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.5rem,7vw,5.5rem);color:color-mix(in srgb,var(--cream) 30%,transparent)}
@media (prefers-reduced-motion: no-preference){
  .marquee-track{animation:marquee 22s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}