/* ============================================================
   SLN — Sri Lakshmi Narasimha Interiors
   Design system. Architectural / editorial / warm-precise.
   Palette derived from the SLN mark (ink line-work, brass,
   namam vermilion) set against plaster and site materials.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* surface — limewash plaster, not beige. Cooler and cleaner than a warm
     cream so the warm timber and brass in the photography carries the heat. */
  --plaster:      #F1F0EB;
  --paper:        #FAF9F5;
  --ink:          #131210;
  --ink-soft:     #23211C;
  --ink-lift:     #302D26;

  /* type colour — darker secondary text than before; the old value washed out
     against plaster and made whole sections read muddy */
  --stone:        #5B564C;   /* 6.36:1 on plaster */
  --stone-dim:    #736D60;   /* 4.56:1 on plaster — used at 10–11px, so it has
                                to clear AA at small sizes, not just look right */
  --on-ink:       #EFECE4;
  --on-ink-dim:   #B5AF9F;   /* 8.7:1 on ink */

  /* accent — a clean burnt ochre. The previous gold sat too close to olive
     and went dull at label sizes. */
  --brass:        #8C5E10;   /* 4.93:1 on plaster — safe for small text */
  --brass-big:    #A9741A;   /* 3.55:1 — display sizes only, never small text */
  --brass-lift:   #D2A15C;   /* 8.1:1  on ink */
  --vermilion:    #B8362A;   /* from the namam in the mark; hairlines only */

  /* lines */
  --rule:         #DEDAD1;
  --rule-strong:  #C4BEB1;
  --rule-ink:     #35322A;

  /* type — Newsreader carries optical sizing, so display sizes sharpen and
     small headings stay sturdy. Archivo's grotesque forms hold up in the
     letterspaced uppercase labels this layout leans on. */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --text:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs:    0.6875rem;
  --fs-sm:    0.8125rem;
  --fs-base:  clamp(1rem, 0.965rem + 0.16vw, 1.0625rem);
  --fs-lg:    clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
  --fs-xl:    clamp(1.375rem, 1.21rem + 0.72vw, 1.875rem);
  --fs-2xl:   clamp(1.875rem, 1.44rem + 1.94vw, 3.25rem);
  --fs-3xl:   clamp(2.5rem, 1.6rem + 4vw, 5.25rem);
  --fs-hero:  clamp(2.6rem, 1.55rem + 3.6vw, 4.75rem);

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section: clamp(72px, 8.5vw, 152px);
  --gutter:  clamp(20px, 4.2vw, 56px);
  --wrap:    1360px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:where(html){scroll-behavior:smooth;scroll-padding-top:96px}

body{
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--fs-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
body.is-locked{overflow:hidden}

::selection{background:var(--ink);color:var(--plaster)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:1px}

/* ---------- 3. Typography ---------- */
/* Newsreader is narrower and lower-contrast than the face it replaced, so it
   wants less negative tracking and a touch more weight at small sizes. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.014em;
  text-wrap:balance;
}
h1{font-size:var(--fs-hero);letter-spacing:-.021em;line-height:1;font-weight:450}
h2{font-size:var(--fs-2xl);letter-spacing:-.017em;font-weight:450}
h3{font-size:var(--fs-xl);line-height:1.18;letter-spacing:-.009em;font-weight:500}
h4{font-size:var(--fs-lg);line-height:1.24;letter-spacing:-.006em;font-weight:500}

.display{font-family:var(--display);font-optical-sizing:auto;font-weight:400}

p{text-wrap:pretty}
.lede{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-soft);max-width:36ch}
.body{color:var(--stone);max-width:62ch}
.body + .body{margin-top:var(--s4)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6;flex:none}
@media (max-width:560px){.eyebrow{letter-spacing:.11em;gap:var(--s2)}.eyebrow::before{width:16px}}
.on-ink .eyebrow{color:var(--brass-lift)}

.plate-no{
  font-family:var(--display);font-size:var(--fs-sm);
  letter-spacing:.06em;color:var(--brass);
}
.meta{
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone-dim);font-weight:500;
}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1600px}
.section{padding-block:var(--section)}
/* Consecutive same-surface sections would otherwise stack two full pads and
   read as a hole in the page — halve the join. */
.section + .section{padding-top:clamp(32px,4vw,64px)}
.section--tight{padding-block:clamp(36px,3.5vw,56px)}
/* a lighter ground to break the long plaster run between the two dark sections */
.section--paper{background:var(--paper);border-block:1px solid var(--rule)}
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink .body{color:var(--on-ink-dim)}
.on-ink .lede{color:var(--on-ink)}
.on-ink .meta{color:var(--on-ink-dim)}
.on-ink .plate-no{color:var(--brass-lift)}

.rule{height:1px;background:var(--rule);border:0}
.on-ink .rule{background:var(--rule-ink)}

.sect-head{
  display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:end;
  margin-bottom:clamp(40px,5vw,80px);
}
@media (min-width:900px){
  .sect-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--s8)}
  .sect-head__aside{padding-bottom:.5em}
}
.sect-head h2{margin-top:var(--s4)}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--s4);top:-120px;z-index:200;
  background:var(--ink);color:var(--plaster);
  padding:var(--s3) var(--s5);font-size:var(--fs-sm);transition:top .2s;
}
.skip:focus{top:var(--s4)}

/* ---------- 5. Buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;padding:0 var(--s6);
  background:var(--ink);color:var(--plaster);
  font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  border-radius:2px;position:relative;overflow:hidden;
  transition:color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn > *{position:relative}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--plaster)}
.btn--ghost::before{background:var(--ink)}
.on-ink .btn{background:var(--plaster);color:var(--ink)}
.on-ink .btn::before{background:var(--brass-lift)}
.on-ink .btn--ghost{background:transparent;color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--rule-ink)}
.on-ink .btn--ghost:hover,.on-ink .btn--ghost:focus-visible{color:var(--ink)}
.on-ink .btn--ghost::before{background:var(--on-ink)}

.alink{
  display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding-block:var(--s3);position:relative;
}
.alink::after{
  content:"";position:absolute;left:0;bottom:var(--s3);height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.alink:hover::after,.alink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.alink svg{transition:transform .4s var(--ease)}
.alink:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--gutter);
  display:flex;align-items:center;gap:var(--s6);
}
.hdr.is-stuck{
  background:color-mix(in srgb,var(--plaster) 88%,transparent);
  box-shadow:0 1px 0 var(--rule);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
@supports not (backdrop-filter:blur(1px)){.hdr.is-stuck{background:var(--plaster)}}

.brand{display:flex;align-items:center;gap:var(--s3);margin-right:auto;min-height:46px}
.brand img{height:40px;width:auto;mix-blend-mode:multiply}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:.14em}
.brand__sub{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);margin-top:3px;font-weight:500;
}

.nav{display:none;align-items:center;gap:clamp(14px,1.8vw,26px)}
@media (min-width:1080px){.nav{display:flex}}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding-inline:5px;
  font-size:var(--fs-sm);font-weight:500;position:relative;
}
/* the link box is padded out to a 44px target, so pin the rule to the text */
.nav a::after{
  content:"";position:absolute;left:0;bottom:calc(50% - .85em);height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{
  transform:scaleX(1);transform-origin:left;
}
.nav a[aria-current="true"]{color:var(--brass)}

.hdr__cta{display:none;align-items:center;gap:var(--s5)}
@media (min-width:1080px){.hdr__cta{display:flex}}
.hdr__tel{
  display:flex;flex-direction:column;justify-content:center;min-height:44px;
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap;line-height:1.2;
}
.hdr__tel span{
  display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);font-weight:500;margin-bottom:2px;
}
.hdr .btn{min-height:44px;padding:0 var(--s5);font-size:var(--fs-xs)}

/* tap-to-call stays reachable on phones, where most enquiries start */
.hdr__call{
  display:grid;place-items:center;width:44px;height:44px;margin-left:auto;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule-strong);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.hdr__call:hover{background:var(--ink);color:var(--plaster)}
@media (min-width:1080px){.hdr__call{display:none}}

/* absolutely positioned bars so the open state is a true X, not an approximation */
.burger{position:relative;width:48px;height:48px;margin-right:-10px;margin-left:var(--s2)}
@media (min-width:1080px){.burger{display:none}}
.burger span{
  position:absolute;left:13px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .25s,background .4s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23.5px}
.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span{background:var(--on-ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* header sits above the full-screen menu — recolour it for the dark surface */
.hdr.is-menu{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.is-menu .brand img{display:none}
.hdr.is-menu .brand__name{color:var(--on-ink)}
.hdr.is-menu .brand__sub{color:var(--on-ink-dim)}
.hdr.is-menu .hdr__call{color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--rule-ink)}
.hdr.is-menu .hdr__call:hover{background:var(--on-ink);color:var(--ink)}

.mnav{
  position:fixed;inset:0;z-index:85;background:var(--ink);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--s10) + 4px) var(--gutter) var(--s8);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
  overflow-y:auto;
}
.mnav.is-open{clip-path:inset(0 0 0 0)}
.mnav__list li{border-top:1px solid var(--rule-ink)}
.mnav__list li:last-child{border-bottom:1px solid var(--rule-ink)}
.mnav__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:clamp(12px,2.4vw,18px) 0;
  font-family:var(--display);font-size:clamp(1.5rem,6.4vw,2.2rem);
  letter-spacing:-.02em;line-height:1.1;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.mnav.is-open .mnav__list a{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.mnav__list a:hover{color:var(--brass-lift)}
.mnav__list span{font-family:var(--text);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--on-ink-dim)}
.mnav__foot{margin-top:var(--s7);display:grid;gap:var(--s4)}
.mnav__foot a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-lg);font-weight:600}
.mnav__foot p{font-size:var(--fs-sm);color:var(--on-ink-dim);max-width:30ch}
.mnav__foot .btn{justify-self:start;color:var(--ink)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding-top:calc(var(--s9) + var(--s4))}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--s7);align-items:center}
.hero__copy{max-width:38rem}
.hero h1{margin-block:var(--s4) var(--s5)}
.hero h1 em{font-style:italic;color:var(--brass-big)}
.hero__lede{
  font-size:var(--fs-lg);line-height:1.5;color:var(--ink-soft);
  max-width:38ch;border-left:1px solid var(--rule-strong);padding-left:var(--s5);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
@media (max-width:540px){
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{width:100%}
}
.hero__pillars{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule);
}
.hero__pillars li{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--stone);
}
.hero__pillars li::before{content:"—";color:var(--brass);margin-right:var(--s2)}

.hero__art{position:relative}
.hero__plate{position:relative;overflow:hidden;background:var(--rule);aspect-ratio:4/5}
/* on tablets a 4:5 plate is over a thousand pixels tall — widen it */
@media (min-width:680px) and (max-width:959px){.hero__plate{aspect-ratio:16/11}}
.hero__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
/* Inset plate sits bottom-left, clear of the floating WhatsApp button and
   offset against the main plate rather than centred under it. */
.hero__inset{
  position:relative;margin-top:-14%;margin-left:var(--s5);margin-right:auto;
  width:clamp(150px,44%,268px);
  box-shadow:0 24px 60px -26px rgba(23,21,15,.55);
  outline:8px solid var(--plaster);
}
/* height:auto is required — the img's height attribute is a presentational
   hint that would otherwise beat aspect-ratio. */
.hero__inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hero__cap{
  display:flex;gap:var(--s4);align-items:baseline;flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
}

@media (min-width:960px){
  .hero{padding-top:calc(var(--s9) + var(--s5));padding-bottom:var(--s6)}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(40px,5vw,88px)}
  .hero__plate{aspect-ratio:auto;height:clamp(460px,66vh,660px)}
  .hero__inset{margin-top:-16%;margin-left:-6%;width:clamp(170px,38%,238px)}
}
@media (min-width:1280px){.hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr)}}

.scroll-cue{
  display:none;align-items:center;gap:var(--s3);margin-top:var(--s8);
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--stone-dim);
}
@media (min-width:960px){.scroll-cue{display:inline-flex}}
.scroll-cue i{display:block;width:1px;height:34px;background:var(--rule-strong);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--brass);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 8. Capability band ---------- */
.band{border-block:1px solid var(--rule)}
.band__grid{display:grid;grid-template-columns:1fr}
/* single column on phones — two columns here squeezed body copy to 3 words a line */
.band__item{padding-block:var(--s5);border-top:1px solid var(--rule)}
.band__item:first-child{border-top:0}
@media (min-width:620px){
  .band__grid{grid-template-columns:repeat(2,1fr)}
  .band__item{border-top:0;padding:var(--s6) var(--s5);border-left:1px solid var(--rule)}
  .band__item:nth-child(odd){border-left:0;padding-left:0}
  .band__item:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (min-width:900px){
  .band__grid{grid-template-columns:repeat(4,1fr)}
  .band__item{padding-block:var(--s7);border-bottom:0}
  .band__item:nth-child(odd){border-left:1px solid var(--rule);padding-left:var(--s5)}
  .band__item:first-child{border-left:0;padding-left:0}
}
.band__item h3{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.band__item p{font-size:var(--fs-sm);color:var(--stone);line-height:1.55}

/* ---------- 9. Statement / editorial ---------- */
.editorial{display:grid;gap:clamp(40px,5vw,88px);grid-template-columns:1fr}
@media (min-width:960px){.editorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
@media (min-width:960px){.editorial__sticky{position:sticky;top:124px}}

.scope-list{border-top:1px solid var(--rule);margin-top:var(--s7)}
.scope-list li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);
}
.scope-list .plate-no{min-width:2.2rem}
.scope-list strong{font-weight:600;font-size:var(--fs-base)}
.scope-list p{font-size:var(--fs-sm);color:var(--stone);margin-top:2px;line-height:1.55}

.stack-art{display:grid;gap:var(--s5)}
.stack-art figure{margin:0}
.stack-art .fr{position:relative;overflow:hidden;background:var(--rule)}
.stack-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.stack-art figure:hover img{transform:scale(1.04)}
.stack-art figcaption{margin-top:var(--s3)}
.stack-art--offset{grid-template-columns:repeat(2,1fr);gap:var(--s5);align-items:start}
.stack-art--offset > *:nth-child(2){margin-top:clamp(24px,6vw,72px)}

/* ---------- 10. Service index ---------- */
.svc{border-top:1px solid var(--rule)}
.svc__row{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);
  align-items:baseline;position:relative;transition:background .4s var(--ease);
}
@media (min-width:960px){
  .svc__row{
    grid-template-columns:4.5rem minmax(0,16rem) minmax(0,1fr) auto;
    align-items:center;padding-block:var(--s6);padding-inline:var(--s4);
    margin-inline:calc(var(--s4) * -1);
  }
  .svc__row:hover{background:var(--paper)}
  .svc__row:hover .svc__name{transform:translateX(8px)}
}
.svc__name{
  font-family:var(--display);font-size:var(--fs-xl);line-height:1.1;
  letter-spacing:-.015em;transition:transform .5s var(--ease);
}
.svc__desc{font-size:var(--fs-sm);color:var(--stone);grid-column:1/-1;max-width:54ch;line-height:1.55}
@media (min-width:960px){.svc__desc{grid-column:auto;max-width:none}}
.svc__tags{display:flex;flex-wrap:wrap;gap:var(--s2);grid-column:1/-1}
@media (min-width:960px){.svc__tags{grid-column:auto;justify-content:flex-end;flex-wrap:nowrap}}
.svc__tags span{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--stone-dim);border:1px solid var(--rule);padding:4px 9px;border-radius:2px;white-space:nowrap;
}
.svc__peek{
  display:none;position:fixed;z-index:5;width:224px;aspect-ratio:3/4;
  pointer-events:none;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
  box-shadow:0 30px 70px -30px rgba(23,21,15,.55);
}
@media (min-width:1100px) and (hover:hover){.svc__peek{display:block}}
.svc__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svc__peek img{width:100%;height:100%;object-fit:cover}

/* ---------- 11. Ceilings (signature) ---------- */
.ceil__bleed{position:relative;height:clamp(280px,42vw,560px);overflow:hidden;background:var(--ink-soft)}
.ceil__bleed img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.ceil__bleed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,21,15,.62) 0%,rgba(23,21,15,.1) 42%,rgba(23,21,15,.92) 100%);
}
.ceil__bleedcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:var(--s6)}
.ceil__hd{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
@media (min-width:900px){.ceil__hd{grid-template-columns:minmax(0,1fr) minmax(0,28rem);gap:var(--s8);align-items:end}}

.rail{position:relative}
.rail__track{
  display:flex;gap:var(--s5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:var(--s4);
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail__item{flex:0 0 clamp(230px,62vw,400px);scroll-snap-align:start}
@media (min-width:760px){.rail__item{flex-basis:clamp(280px,31vw,400px)}}
.rail__item figure{margin:0}
.rail__item .fr{overflow:hidden;background:var(--ink-lift);aspect-ratio:3/4}
.rail__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rail__item:hover img{transform:scale(1.05)}
.rail__item figcaption{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule-ink)}
.rail__item h3{font-size:var(--fs-lg);margin-block:var(--s2) var(--s1)}
.rail__item p{font-size:var(--fs-sm);color:var(--on-ink-dim);line-height:1.5}

.rail__ctl{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.rail__btn{
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--rule-ink);color:var(--on-ink);
  transition:background .35s var(--ease),color .35s var(--ease),opacity .3s;
}
.rail__btn:hover:not(:disabled){background:var(--on-ink);color:var(--ink)}
.rail__btn:disabled{opacity:.3;cursor:default}
.rail__prog{flex:1;height:1px;background:var(--rule-ink);position:relative;margin-left:var(--s4);max-width:320px}
.rail__prog i{position:absolute;inset:0 auto 0 0;background:var(--brass-lift);width:20%;transition:width .35s var(--ease),transform .35s var(--ease)}

/* ---------- 12. Featured case studies ---------- */
/* top-aligned: the two columns are very different heights (a 2:1 photograph
   beside a full fact table) and centring left the image floating in space */
.case{display:grid;gap:clamp(28px,4vw,64px);align-items:start;grid-template-columns:1fr}
@media (min-width:960px){
  .case{grid-template-columns:repeat(12,1fr)}
  .case__art{grid-column:1/8}
  .case__body{grid-column:8/13;padding-left:var(--s5)}
  .case--flip .case__art{grid-column:6/13;grid-row:1}
  .case--flip .case__body{grid-column:1/6;grid-row:1;padding-left:0;padding-right:var(--s5)}
}
.case + .case{margin-top:clamp(56px,7vw,112px);padding-top:clamp(56px,7vw,112px);border-top:1px solid var(--rule)}
/* Case images keep their natural proportion — these are architectural
   photographs and cropping them to a uniform ratio throws the composition away. */
.case__art{position:relative;overflow:hidden;background:var(--rule)}
.case__art img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.case__art:hover img{transform:scale(1.035)}
.case__body h3{margin-block:var(--s4) var(--s5);font-size:var(--fs-2xl)}
.case__facts{border-top:1px solid var(--rule);margin-top:var(--s6)}
.case__facts > div{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm);
}
.case__facts dt{color:var(--stone)}
.case__facts dd{margin:0;font-weight:600;text-align:right}

/* ---------- 13. Portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:clamp(32px,4vw,56px)}
.filters button{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:10px var(--s4);min-height:44px;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--rule);color:var(--stone);
  transition:color .3s,box-shadow .3s,background .3s;
}
.filters button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--plaster);box-shadow:none}

.masonry{columns:1;column-gap:var(--s5)}
@media (min-width:680px){.masonry{columns:2}}
@media (min-width:1080px){.masonry{columns:3;column-gap:var(--s6)}}
.tile{break-inside:avoid;margin-bottom:var(--s6);width:100%;text-align:left;display:block}
.tile[hidden]{display:none}
.tile__frame{position:relative;overflow:hidden;background:var(--rule)}
.tile__frame img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.tile:hover .tile__frame img,.tile:focus-visible .tile__frame img{transform:scale(1.045)}
.tile__frame::after{
  content:"";position:absolute;inset:0;background:rgba(23,21,15,.16);
  opacity:0;transition:opacity .5s var(--ease);
}
.tile:hover .tile__frame::after,.tile:focus-visible .tile__frame::after{opacity:1}
.tile__zoom{
  position:absolute;right:var(--s4);bottom:var(--s4);z-index:2;
  width:44px;height:44px;border-radius:50%;background:var(--plaster);color:var(--ink);
  display:grid;place-items:center;
  opacity:0;transform:translateY(8px) scale(.9);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.tile:hover .tile__zoom,.tile:focus-visible .tile__zoom{opacity:1;transform:none}
.tile__cap{
  display:flex;gap:var(--s4);align-items:baseline;justify-content:space-between;
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
}
.tile__cap h3{font-size:var(--fs-base);font-family:var(--display);letter-spacing:-.01em;line-height:1.25}
.tile__cap p{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--stone-dim);margin-top:4px}
.tile__cap .plate-no{flex:none}

/* ---------- 14. Craft / execution ---------- */
.craft__grid{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.craft__grid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.craft__grid figure{margin:0}
.craft__grid .fr{overflow:hidden;background:var(--ink-lift);aspect-ratio:1}
.craft__grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.42) contrast(1.05);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.craft__grid figure:hover img{filter:none;transform:scale(1.04)}
.craft__grid figcaption{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-size:var(--fs-sm);color:var(--stone);line-height:1.5;
}
.craft__grid figcaption b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.on-ink .craft__grid figcaption{border-top-color:var(--rule-ink);color:var(--on-ink-dim)}
.on-ink .craft__grid figcaption b{color:var(--on-ink)}

/* ---------- 15. Process ---------- */
.steps{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:var(--s7)}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s6)}}
.step{padding-top:var(--s5);border-top:2px solid var(--ink)}
.step__no{font-family:var(--display);font-size:var(--fs-sm);color:var(--brass);letter-spacing:.08em}
.step h3{font-size:var(--fs-lg);margin-block:var(--s3)}
.step p{font-size:var(--fs-sm);color:var(--stone);line-height:1.6}

/* ---------- 15b. Clients ---------- */
.quotes{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:760px){.quotes{grid-template-columns:repeat(2,1fr);gap:var(--s7)}}
@media (min-width:1080px){.quotes{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.quote{padding-top:var(--s5);border-top:2px solid var(--ink);display:flex;flex-direction:column}
.quote blockquote{
  margin:0;font-family:var(--display);font-optical-sizing:auto;
  font-size:var(--fs-lg);line-height:1.42;letter-spacing:-.008em;color:var(--ink-soft);
  flex:1;
}
.quote blockquote::before{content:"“";color:var(--brass);margin-right:.06em}
.quote blockquote::after{content:"”";color:var(--brass);margin-left:.04em}
.quote figcaption{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
}
.quote cite{font-style:normal;font-weight:600;font-size:var(--fs-base);display:block}
.quote figcaption span{
  display:block;margin-top:3px;font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone-dim);
}

/* ---------- 16. Materials ---------- */
.mats{display:flex;flex-wrap:wrap;gap:var(--s5) clamp(24px,4.5vw,64px);align-items:center;justify-content:space-between}
.mats li{
  font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.6rem);
  color:var(--stone);transition:color .4s var(--ease);
}
.mats li:hover{color:var(--ink)}

/* ---------- 17. CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(23,21,15,.94) 0%,rgba(23,21,15,.8) 50%,rgba(23,21,15,.66) 100%)}
.cta__in{position:relative;z-index:2;display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:1000px){.cta__in{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(48px,6vw,110px)}}
.cta h2{margin-block:var(--s5);max-width:16ch}
.cta__ways{display:grid;gap:var(--s4);margin-top:var(--s7)}
@media (min-width:560px){.cta__ways{grid-template-columns:repeat(2,1fr)}}
.cta__way{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s5);box-shadow:inset 0 0 0 1px var(--rule-ink);border-radius:2px;
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.cta__way:hover{box-shadow:inset 0 0 0 1px var(--brass-lift);background:rgba(255,255,255,.035)}
.cta__way svg{flex:none;color:var(--brass-lift);margin-top:3px}
.cta__way b{display:block;font-size:var(--fs-base);font-weight:600}
.cta__way span{font-size:var(--fs-sm);color:var(--on-ink-dim)}

.form{display:grid;gap:var(--s4)}
.field label{
  display:block;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink-dim);margin-bottom:var(--s2);font-weight:600;
}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;background:transparent;color:var(--on-ink);
  border:0;border-bottom:1px solid var(--rule-ink);
  padding:var(--s3) 0;font-size:var(--fs-base);border-radius:0;
  transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical;min-height:80px}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--ink);color:var(--on-ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--on-ink-dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--brass-lift)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--brass-lift);outline-offset:4px}
.field--select::after{
  content:"";position:absolute;right:3px;bottom:19px;width:7px;height:7px;
  border-right:1.5px solid var(--on-ink-dim);border-bottom:1.5px solid var(--on-ink-dim);
  transform:rotate(45deg);pointer-events:none;
}
.form .btn{width:100%;margin-top:var(--s3)}
.form__note{font-size:var(--fs-xs);color:var(--on-ink-dim);line-height:1.55}
.form__msg{font-size:var(--fs-sm);padding-top:var(--s2);display:none}
.form__msg.is-on{display:block}
.form__msg--ok{color:var(--brass-lift)}
.form__msg--err{color:#E8836F}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;height:0}

/* ---------- 18. Footer ---------- */
.ftr{background:var(--ink);color:var(--on-ink);padding-top:clamp(56px,6vw,96px)}
.ftr__top{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:780px){.ftr__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.ftr__top{grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:var(--s7)}}
.ftr h4{
  font-family:var(--text);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-dim);font-weight:600;margin-bottom:var(--s5);
}
/* footer links get a real tap area rather than a 16px line box */
.ftr__links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-sm);color:var(--on-ink-dim);transition:color .3s;
}
.ftr__links a:hover{color:var(--brass-lift)}
.ftr address{font-style:normal;font-size:var(--fs-sm);color:var(--on-ink-dim);line-height:1.75}
.ftr address a{display:inline-flex;align-items:center;min-height:44px;transition:color .3s}
.ftr address a:hover{color:var(--brass-lift)}
.ftr__mark{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,2.75rem);letter-spacing:.06em;line-height:1}
.ftr__markSub{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lift);margin-top:var(--s3);font-weight:600}
.ftr__blurb{font-size:var(--fs-sm);color:var(--on-ink-dim);max-width:36ch;margin-top:var(--s5);line-height:1.75}
.ftr__wordmark{
  margin-top:clamp(44px,5.5vw,80px);border-top:1px solid var(--rule-ink);
  padding-top:var(--s7);padding-bottom:.12em;
  font-family:var(--display);line-height:.86;letter-spacing:.01em;
  /* sized so it still fits when the webfont has not loaded and the wider
     Georgia fallback is in use — otherwise nowrap clipped it off-centre */
  font-size:clamp(1.6rem,8.8vw,9rem);color:transparent;
  -webkit-text-stroke:1px var(--rule-ink);
  text-align:center;user-select:none;white-space:nowrap;
}
@supports not (-webkit-text-stroke:1px red){.ftr__wordmark{color:var(--rule-ink)}}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;
  padding-block:var(--s5) var(--s7);font-size:var(--fs-xs);color:var(--on-ink-dim);letter-spacing:.03em;
}
/* stacked on phones — left-ragged lines under a centred wordmark read as broken
   alignment, so the whole footer base centres with it */
@media (max-width:719px){
  .ftr__base{justify-content:center;text-align:center;gap:var(--s3)}
  .ftr__base p{width:100%}
}
.ftr__base a{transition:color .3s}
.ftr__base a:hover{color:var(--brass-lift)}

/* ---------- 19. Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(12,11,8,.95);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb.is-open{opacity:1;visibility:visible}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--gutter);color:var(--on-ink-dim)}
.lb__bar .plate-no{color:var(--brass-lift)}
.lb__close{width:48px;height:48px;display:grid;place-items:center;color:var(--on-ink);border-radius:50%;transition:background .3s}
.lb__close:hover{background:rgba(255,255,255,.12)}
/* Flex, not grid: a percentage max-height on a grid item resolves against a row
   that is itself sized by the item, so the image grew past the stage and painted
   over the caption. In a flex container the height is definite and 100% binds. */
.lb__stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding-inline:var(--gutter);min-height:0;overflow:hidden;
}
.lb__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--on-ink);transition:background .3s;
}
.lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__nav--prev{left:max(8px,calc(var(--gutter) - 58px))}
.lb__nav--next{right:max(8px,calc(var(--gutter) - 58px))}
@media (max-width:900px){.lb__nav{width:44px;height:44px}.lb__nav--prev{left:6px}.lb__nav--next{right:6px}}
.lb__foot{padding:var(--s5) var(--gutter) var(--s6);color:var(--on-ink)}
.lb__foot h3{font-size:var(--fs-xl);margin-bottom:var(--s2)}
.lb__foot p{font-size:var(--fs-sm);color:var(--on-ink-dim);max-width:58ch}
.lb__tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.lb__tags span{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--on-ink-dim);border:1px solid var(--rule-ink);padding:4px 9px;border-radius:2px;
}

/* ---------- 20. Floating WhatsApp ---------- */
.wa{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:80;
  width:56px;height:56px;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px -10px rgba(31,168,85,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 40px -12px rgba(31,168,85,.65)}

/* ---------- 21. Reveal ----------
   Scoped to .js so that if scripting fails, is blocked, or the observer
   never fires, every section still renders. Content is never hidden by
   default — it is only hidden once we know JS is running to un-hide it. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .95s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}
.js .rv-d3{transition-delay:.24s}.js .rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .rv{opacity:1;transform:none}
}