:root{
  --obsidian:#0E1116;
  --midnight:#1B263B;
  --gold:#C9A24B;
  --gold-soft:#E4CD96;
  --ivory:#F7F3EA;
  --paper:#FDFBF6;
  --line:rgba(201,162,75,0.25);
  --ink-soft:#6E6A5E;
  --ink-faint:#A9A597;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  color:var(--midnight);
  background:var(--ivory);
  line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-weight:400;letter-spacing:0.04em;}
img{max-width:100%;display:block;}
.serif{font-family:'Cormorant Garamond',serif;}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 5%;
  background:rgba(14,17,22,0);
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled,body.subpage header{
  background:rgba(14,17,22,0.92);
  backdrop-filter:blur(10px);
  padding:1.1rem 5%;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:0.8rem;}
.brand-mark{height:26px;width:auto;display:block;}
.brand-word{height:13px;width:auto;display:block;}
.brand:hover .brand-mark{animation:sbSpinOnce 1.1s cubic-bezier(.4,0,.2,1);}
nav.links{display:flex;gap:2.4rem;align-items:center;}
nav.links a{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:#D9D5C8;transition:color .25s ease;position:relative;padding-bottom:4px;
}
nav.links a:hover,nav.links a.active{color:var(--gold-soft);}
nav.links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--paper);margin:5px 0;transition:.3s;}

@media (max-width:840px){
  nav.links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);height:100vh;
    background:var(--obsidian);flex-direction:column;justify-content:center;gap:2.2rem;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
    padding:2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  nav.links.open{transform:translateX(0);}
  .nav-toggle{display:block;z-index:210;}
}
/* Prevent the page behind the mobile menu from scrolling while it's open,
   so touches on menu content (like the language list) scroll the menu
   itself instead of the page underneath it. */
body.nav-open{overflow:hidden;}

/* ---------- SECTION SCAFFOLDING ---------- */
section{padding:7rem 5%;}
.section-inner{max-width:1180px;margin:0 auto;}
.eyebrow{font-size:0.72rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-weight:500;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.4rem;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
.section-head p{max-width:34ch;color:var(--ink-soft);font-size:0.94rem;}

/* Page hero (subpages) */
.page-hero{
  padding:11rem 5% 5rem;background:var(--obsidian);color:var(--paper);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.page-hero .eyebrow{color:var(--gold-soft);}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.4rem,5vw,3.8rem);max-width:16ch;}
.page-hero p.lead{margin-top:1.2rem;max-width:52ch;color:#C9C5B8;font-size:1rem;}

/* ---------- REVEAL / MOTION ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- HERO SIGNATURE SCROLL SEQUENCE ---------- */
.hero-stack{position:relative;height:320vh;background:var(--obsidian);}
.hero-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.hero-3d-wrap{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 60%;}
.hero-layer{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.hero-layer.blueprint{
  background:
    linear-gradient(rgba(201,162,75,0.08) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(201,162,75,0.08) 1px,transparent 1px) 0 0/40px 40px,
    var(--obsidian);
  display:flex;align-items:center;justify-content:center;
}
.hero-layer.blueprint svg{width:min(70vw,760px);height:auto;opacity:0.9;}
.hero-layer.frame{
  background:var(--midnight);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
}
.hero-layer.frame svg{width:min(72vw,780px);height:auto;}
.hero-layer.photo{opacity:0;}
.hero-layer.photo img{width:100%;height:100%;object-fit:cover;}
.hero-layer.photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,17,22,0.55) 0%,rgba(14,17,22,0.25) 40%,rgba(14,17,22,0.65) 100%);
}
.hero-text{
  position:relative;z-index:5;text-align:center;color:var(--paper);
  padding:0 5%;transition:opacity .1s linear;
}
.hero-text .eyebrow{color:var(--gold-soft);}
.hero-text h1{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.1;margin-bottom:1.2rem;
}
.hero-text p{max-width:44ch;margin:0 auto 2.2rem;color:#D9D5C8;font-size:1rem;}
.scroll-cue{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  z-index:5;font-size:0.66rem;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--gold-soft);display:flex;flex-direction:column;align-items:center;gap:0.6rem;
  transition:opacity .2s ease;
}
.scroll-cue::after{content:'';width:1px;height:34px;background:linear-gradient(var(--gold-soft),transparent);}
@media (prefers-reduced-motion:reduce){
  .hero-stack{height:auto;}
  .hero-pin{position:relative;}
  .hero-layer{position:relative;display:none;}
  .hero-layer.photo{display:block;opacity:1;position:relative;height:100vh;}
}
@media (max-width:700px){
  .hero-stack{height:260vh;}
}

/* ---------- CUSTOM CURSOR ---------- */
body.custom-cursor-active,body.custom-cursor-active a,body.custom-cursor-active button,
body.custom-cursor-active input,body.custom-cursor-active textarea,body.custom-cursor-active select,
body.custom-cursor-active .project-card,body.custom-cursor-active .gallery-grid img,
body.custom-cursor-active .project-hero-img img{cursor:none;}
.custom-cursor{
  position:fixed;top:0;left:0;width:22px;height:22px;border:1px solid var(--gold);
  border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .22s ease,height .22s ease,background-color .22s ease,border-color .22s ease,opacity .22s ease;
  opacity:0;
}
.custom-cursor.visible{opacity:1;}
.custom-cursor.cc-hover{width:46px;height:46px;background:rgba(201,162,75,0.14);border-color:var(--gold-soft);}

/* ---------- 3D PROJECT CARD TILT ---------- */
.project-card{
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
  will-change:transform;transform-style:preserve-3d;position:relative;
}
.project-card:hover{box-shadow:0 40px 70px -25px rgba(14,17,22,0.65);}
.project-card::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.35),transparent 55%);
  opacity:0;transition:opacity .3s ease;mix-blend-mode:overlay;
}
.project-card:hover::after{opacity:1;}

/* ---------- BEFORE / AFTER SLIDER ---------- */
.ba-section{background:var(--obsidian);padding:6.5rem 5%;}
.ba-section .eyebrow{color:var(--gold-soft);text-align:center;}
.ba-section h2{color:var(--paper);text-align:center;max-width:26ch;margin:0 auto 2.6rem;}
.ba-wrap{max-width:880px;margin:0 auto;}
.ba-slider{
  position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  border:1px solid var(--line);cursor:ew-resize;background:var(--midnight);
}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;}
.ba-blueprint{
  position:absolute;inset:0;
  background:var(--obsidian);
}
.ba-blueprint img{width:100%;height:100%;object-fit:cover;display:block;}
.ba-before-clip{position:absolute;inset:0;clip-path:inset(0 50% 0 0);}
.ba-before-clip .ba-blueprint{position:absolute;inset:0;}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);transform:translateX(-50%);pointer-events:none;}
.ba-handle::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--paper);
  border:1px solid var(--gold);box-shadow:0 8px 24px -6px rgba(0,0,0,0.5);
}
.ba-handle::before{
  content:'\2194';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.1rem;color:var(--midnight);z-index:1;
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;
}
.ba-labels{display:flex;justify-content:space-between;margin-top:1.2rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-soft);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;
  padding:1rem 1.9rem;border:1px solid var(--gold);color:var(--gold);
  transition:background .3s ease,color .3s ease;
}
.btn:hover{background:var(--gold);color:var(--obsidian);}
.btn.solid{background:var(--gold);color:var(--obsidian);}
.btn.solid:hover{background:var(--gold-soft);}
.btn.on-dark{border-color:var(--gold-soft);color:var(--gold-soft);}

/* ---------- FOOTER ---------- */
footer{background:var(--obsidian);color:#9C9788;padding:4rem 5% 2rem;border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.4rem;margin-bottom:3rem;max-width:1180px;margin-left:auto;margin-right:auto;}
.footer-col h4{font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.2rem;font-weight:500;}
.footer-col a,.footer-col p{display:block;font-size:0.86rem;margin-bottom:0.7rem;color:#C9C5B8;font-weight:300;transition:color .2s;}
.footer-col a:hover{color:var(--gold-soft);}
.footer-col a.ig-link{display:flex;align-items:center;gap:0.5rem;}
.ig-link svg{color:var(--gold);flex-shrink:0;}
.footer-bottom{max-width:1180px;margin:0 auto;border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.72rem;letter-spacing:0.08em;color:#7A766A;}

/* ---------- PROJECT / PORTFOLIO CARDS ---------- */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.2rem;}
.projects-grid-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem;}
.project-card-compact .project-imgwrap{aspect-ratio:1/1;}
.project-card-compact .project-body{padding:0.9rem 1rem 1.1rem;}
.project-card-compact .project-body h3{font-size:1.05rem;margin-bottom:0.3rem;}
.project-card-compact .project-tag{display:none;}
.project-card-compact .project-meta{font-size:0.68rem;}
.project-card{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .45s ease,box-shadow .45s ease,opacity .3s ease;}
.project-imgwrap{aspect-ratio:4/3;overflow:hidden;}
.project-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease;transform:translateY(var(--py,0px)) scale(1.08);}
.project-card:hover .project-img{transform:translateY(var(--py,0px)) scale(1.14);}
.project-body{padding:1.6rem 1.7rem 1.9rem;}
.project-tag{font-size:0.66rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:0.7rem;}
.project-body h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;font-weight:500;color:var(--midnight);}
.project-body p{font-size:0.88rem;color:var(--ink-soft);font-weight:300;}
.project-meta{display:flex;justify-content:space-between;margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:0.72rem;color:var(--ink-faint);letter-spacing:0.12em;text-transform:uppercase;}

/* filter pills */
.filter-row{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:3rem;}
.filter-pill{
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:0.7rem 1.3rem;border:1px solid var(--line);color:var(--ink-soft);
  cursor:pointer;background:transparent;transition:all .25s ease;
}
.filter-pill:hover{border-color:var(--gold);color:var(--midnight);}
.filter-pill.active{background:var(--midnight);color:var(--paper);border-color:var(--midnight);}
.project-card.hidden{display:none;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-grid img{border:1px solid var(--line);}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;}}
.approach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.6rem;margin-top:1rem;}
.approach-item .num{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:0.8rem;}
.approach-item h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;margin-bottom:0.6rem;}
.approach-item p{font-size:0.9rem;color:var(--ink-soft);}
.credentials{margin-top:3.5rem;border-top:1px solid var(--line);padding-top:2.4rem;display:flex;gap:3rem;flex-wrap:wrap;}
.credentials div{font-size:0.82rem;color:var(--ink-soft);}
.credentials strong{display:block;color:var(--midnight);font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:500;margin-bottom:0.3rem;}

/* ---------- PROJECT DETAIL / GALLERY ---------- */
.project-hero-img{width:100%;aspect-ratio:16/9;overflow:hidden;margin-bottom:0;}
.project-hero-img img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.project-meta-row{display:flex;gap:3rem;flex-wrap:wrap;margin:2.6rem 0 3.4rem;padding-bottom:2.6rem;border-bottom:1px solid var(--line);}
.project-meta-row div{font-size:0.8rem;color:var(--ink-soft);}
.project-meta-row strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--midnight);font-weight:500;margin-bottom:0.3rem;}
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem;}
.gallery-grid figure{overflow:hidden;background:var(--paper);border:1px solid var(--line);}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease;cursor:zoom-in;}
.gallery-grid figure:hover img{transform:scale(1.05);}
.g-wide{grid-column:span 4;aspect-ratio:3/2;}
.g-narrow{grid-column:span 2;aspect-ratio:3/4;}
.g-half{grid-column:span 3;aspect-ratio:4/3;}
@media (max-width:800px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .g-wide,.g-half{grid-column:span 2;aspect-ratio:4/3;}
  .g-narrow{grid-column:span 1;aspect-ratio:3/4;}
}
.back-link{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.4rem;}
.back-link:hover{color:var(--paper);}
.concept-panel{max-width:640px;margin:0 auto 3.6rem;text-align:center;padding:0 1.5rem;}
.concept-panel .eyebrow{text-align:center;}
.concept-panel img{width:100%;height:auto;display:block;border:1px solid var(--line);background:#fff;cursor:zoom-in;}
.concept-panel figcaption{margin-top:1rem;font-size:0.78rem;color:var(--ink-soft);font-style:italic;}

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(14,17,22,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-overlay img{
  max-width:100%;max-height:92vh;
  object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  cursor:default;
}
.lightbox-close{
  position:absolute;top:1.6rem;right:1.8rem;
  color:var(--paper);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:0.6rem;cursor:pointer;
  background:none;border:none;padding:0.6rem;
}
.lightbox-close:hover{color:var(--gold-soft);}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(228,205,150,0.35);
  color:var(--paper);font-size:1.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.lightbox-arrow:hover{background:rgba(228,205,150,0.15);border-color:var(--gold-soft);color:var(--gold-soft);}
.lightbox-prev{left:2vw;}
.lightbox-next{right:2vw;}
@media (max-width:640px){
  .lightbox-arrow{width:42px;height:42px;font-size:1.5rem;}
  .lightbox-prev{left:1rem;}
  .lightbox-next{right:1rem;}
}

.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.field{margin-bottom:1.4rem;}
.field label{display:block;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:0.5rem;}
.field input,.field textarea,.field select{
  width:100%;background:var(--paper);border:1px solid var(--line);padding:0.9rem 1rem;
  font-family:'Montserrat',sans-serif;font-weight:300;font-size:0.92rem;color:var(--midnight);
  transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);}
.contact-info-item{margin-bottom:2rem;}
.contact-info-item h4{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:0.6rem;}
.contact-info-item p,.contact-info-item a{font-size:1rem;color:var(--midnight);}

/* ---------- HERO ENTRANCE SEQUENCE ---------- */
@keyframes heroRise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes lineUp{from{transform:translateY(110%);}to{transform:none;}}
.hero-text .eyebrow{animation:heroRise .9s ease 2s backwards;}
.hero-text h1 .h-line{display:block;overflow:hidden;}
.hero-text h1 .h-line span{display:block;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) backwards;}
.hero-text h1 .h-line:nth-child(1) span{animation-delay:2.15s;}
.hero-text h1 .h-line:nth-child(2) span{animation-delay:2.32s;}
.hero-text p{animation:heroRise 1s ease 2.65s backwards;}
.hero-text .btn{animation:heroRise 1s ease 2.85s backwards;}
.scroll-cue{animation:heroRise 1s ease 3.3s backwards;}
@keyframes bpDim{to{opacity:0.3;}}
.hero-layer.blueprint svg{animation:bpDim 1.2s ease 2.1s forwards;}

/* ---------- KEN BURNS on hero photo ---------- */
@keyframes kenburns{from{transform:scale(1) translateY(0);}to{transform:scale(1.08) translateY(-1.5%);}}
.hero-layer.photo img{animation:kenburns 26s ease-in-out infinite alternate;}

/* ---------- STATS BAND ---------- */
.stats-band{background:var(--obsidian);padding:4.5rem 5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;text-align:center;}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,5vw,4rem);color:var(--gold);display:block;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums;}
.stat-label{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:#C9C5B8;margin-top:0.6rem;display:block;}

/* ---------- PROJECT PAGE HERO PARALLAX ---------- */
.project-hero-img img{transform:translateY(var(--py,0px)) scale(1.08);}

/* ---------- SPINNING CORNER BADGE ---------- */
.spin-badge{
  position:fixed;right:1.9rem;bottom:1.9rem;width:96px;height:96px;z-index:150;
  display:block;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,0.5));
  transition:transform .4s ease;
}
.spin-badge:hover{transform:scale(1.06);}
.spin-badge:hover .sb-disc{stroke:var(--gold);fill:rgba(14,17,22,0.97);}
.sb-disc{transition:stroke .3s ease,fill .3s ease;}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;}
.spin-badge svg text{fill:var(--gold-soft);font-family:'Montserrat',sans-serif;font-size:8px;}
.sb-ring{transform-origin:50% 50%;transform-box:view-box;animation:spinSlow 26s linear infinite;}
.sb-markimg{transform-origin:50% 50%;transform-box:view-box;}
.spin-badge:hover .sb-markimg{animation:sbSpinOnce 1.1s cubic-bezier(.4,0,.2,1);}
@keyframes sbSpinOnce{to{transform:rotate(360deg);}}
@keyframes spinSlow{to{transform:rotate(360deg);}}
@media (max-width:700px){.spin-badge{display:none;}}

@media (prefers-reduced-motion:reduce){
  .hero-text .eyebrow,.hero-text h1 .h-line span,.hero-text p,.hero-text .btn,
  .scroll-cue,.hero-layer.blueprint svg,.hero-layer.photo img,.sb-ring,.sb-markimg,.brand-mark{animation:none;opacity:1;transform:none;}
  .project-img,.project-hero-img img{transform:none;}
  .spin-badge svg{animation:none;}
}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch{position:relative;}
.lang-switch-btn{
  display:flex;align-items:center;gap:0.4rem;background:none;cursor:pointer;
  border:1px solid rgba(217,213,200,0.3);color:#D9D5C8;
  font-family:'Montserrat',sans-serif;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  padding:0.5rem 0.75rem;transition:border-color .25s ease,color .25s ease;
}
.lang-switch-btn:hover,.lang-switch.open .lang-switch-btn{border-color:var(--gold);color:var(--gold-soft);}
.lang-switch-btn svg{width:9px;height:9px;flex-shrink:0;transition:transform .25s ease;}
.lang-switch.open .lang-switch-btn svg{transform:rotate(180deg);}
.lang-switch-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:160px;margin:0;
  background:var(--obsidian);border:1px solid var(--line);
  list-style:none;padding:0.4rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:300;
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.55);
  max-height:min(60vh,320px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.lang-switch.open .lang-switch-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-switch-menu li button{
  display:block;width:100%;text-align:left;background:none;border:none;color:#D9D5C8;
  font-family:'Montserrat',sans-serif;font-size:0.86rem;font-weight:300;
  padding:0.55rem 0.7rem;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.lang-switch-menu li button:hover{background:rgba(201,162,75,0.14);color:var(--gold-soft);}
.lang-switch-menu li button.active{color:var(--gold);}
@media (max-width:840px){
  .lang-switch-menu{right:auto;left:50%;transform:translate(-50%,-6px);}
  .lang-switch.open .lang-switch-menu{transform:translate(-50%,0);}
}

/* ---------- LIGHT RTL SUPPORT (Farsi) ---------- */
body.lang-fa p,body.lang-fa li,body.lang-fa blockquote,body.lang-fa label,
body.lang-fa .footer-col,body.lang-fa .contact-info-item,body.lang-fa figcaption{
  direction:rtl;text-align:right;
}
body.lang-fa .eyebrow,body.lang-fa .lead,body.lang-fa .project-meta-row div,
body.lang-fa .credentials div,body.lang-fa .project-body p{
  direction:rtl;
}


/* ============================================================
   PAPER GRAIN OVERLAY — subtle fixed noise texture, always on
   ============================================================ */
.grain-overlay{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:0.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat:repeat;background-size:140px 140px;
  mix-blend-mode:multiply;
}

/* ============================================================
   PAGE TRANSITIONS — cross-document view-transitions (progressive
   enhancement; ignored automatically in browsers without support)
   ============================================================ */
@view-transition{
  navigation:auto;
}
::view-transition-old(root){ animation:markanaFadeOut .38s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation:markanaFadeIn .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes markanaFadeOut{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes markanaFadeIn{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-band{background:var(--obsidian);padding:6.5rem 5%;position:relative;overflow:hidden;}
.testimonial-grid{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.8rem;
}
.testimonial-card{
  background:rgba(255,255,255,0.03);border:1px solid var(--line);padding:2.2rem 1.9rem;
}
.testimonial-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;line-height:1.5;
  color:var(--paper);margin-bottom:1.4rem;
}
.testimonial-quote::before{content:'\201C';color:var(--gold);}
.testimonial-quote::after{content:'\201D';color:var(--gold);}
.testimonial-attrib{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-soft);}
.testimonial-attrib span{display:block;color:#9C9788;font-size:0.68rem;letter-spacing:0.1em;margin-top:0.3rem;text-transform:none;}
@media (max-width:900px){
  .testimonial-grid{grid-template-columns:1fr;}
}

/* ============================================================
   MATERIALS / PALETTE STRIP  (project pages)
   ============================================================ */
.palette-strip{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0 0 3rem;padding-top:1.8rem;border-top:1px solid var(--line);}
.palette-swatch{display:flex;align-items:center;gap:0.7rem;}
.palette-chip{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 3px rgba(255,255,255,0.5);flex-shrink:0;}
.palette-label{font-size:0.72rem;letter-spacing:0.1em;color:var(--ink-soft);text-transform:uppercase;}
.design-notes{margin:0 0 3.4rem;padding-top:1.8rem;border-top:1px solid var(--line);}
.design-style{margin-bottom:1.8rem;}
.design-style span,.design-cols h4{display:block;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:0.5rem;}
.design-style strong{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:500;color:var(--midnight);}
.design-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;}
.design-cols .palette-strip{flex-direction:column;align-items:flex-start;gap:0.9rem;margin:0;padding:0;border:0;}
.design-details{list-style:none;margin:0;padding:0;}
.design-details li{font-size:0.86rem;color:var(--ink-soft);padding:0.45rem 0 0.45rem 1.1rem;position:relative;border-bottom:1px solid var(--line);}
.design-details li:last-child{border-bottom:0;}
.design-details li{line-height:1.6;}
.design-details li::before{content:'';position:absolute;left:0;top:calc(0.45rem + 0.8em);width:5px;height:5px;margin-top:-2.5px;background:var(--gold);border-radius:50%;}
@media (max-width:700px){.design-cols{grid-template-columns:1fr;gap:1.8rem;}}
body.lang-fa .design-details li{padding:0.45rem 1.1rem 0.45rem 0;}
body.lang-fa .design-details li::before{left:auto;right:0;}

/* ============================================================
   BUILD PROCESS TIMELINE  (about page)
   ============================================================ */
.process-band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.process-track{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;margin-top:3rem;position:relative;
}
.process-track::before{
  content:'';position:absolute;top:14px;left:4%;right:4%;height:1px;background:var(--line);
}
.process-step{position:relative;padding-top:2.6rem;}
.process-step::before{
  content:'';position:absolute;top:0;left:0;width:29px;height:29px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
}
.process-num{
  position:absolute;top:0;left:0;width:29px;height:29px;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:0.95rem;color:var(--gold);z-index:1;
}
.process-step h3{font-size:1.05rem;margin-bottom:0.5rem;}
.process-step p{font-size:0.84rem;color:var(--ink-soft);}
@media (max-width:900px){
  .process-track{grid-template-columns:1fr;gap:2.2rem;}
  .process-track::before{display:none;}
}
.process-track.steps-6{grid-template-columns:repeat(3,1fr);row-gap:3rem;}
@media (max-width:900px){
  .process-track.steps-6{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .process-track.steps-6{grid-template-columns:1fr;}
  .process-track.steps-6::before{display:none;}
}
.gs-note{max-width:70ch;margin:3.2rem auto 0;padding:1.6rem 1.8rem;border:1px solid var(--line);background:var(--paper);}
.gs-note h4{font-size:0.95rem;margin-bottom:0.4rem;color:var(--midnight);}
.gs-note p{font-size:0.84rem;color:var(--ink-soft);margin:0;}
.gs-scope{max-width:70ch;margin:0 auto 3rem;font-size:0.88rem;color:var(--ink-soft);text-align:center;}

/* ============================================================
   INTERACTIVE PROJECT MAP  (portfolio page)
   ============================================================ */
.map-section{padding-bottom:2rem;}
.map-wrap{
  position:relative;max-width:900px;margin:2.6rem auto 0;border:1px solid var(--line);
  background:var(--paper);overflow:visible;
}
.map-wrap svg{display:block;width:100%;height:auto;}
.map-pin{cursor:pointer;}
.map-pin circle.pin-dot{fill:var(--gold);stroke:var(--paper);stroke-width:2;transition:r .2s ease,fill .2s ease;}
.map-pin:hover circle.pin-dot,.map-pin.active circle.pin-dot{fill:var(--gold-soft);}
.map-pin circle.pin-pulse{fill:none;stroke:var(--gold);stroke-width:1;opacity:0.5;animation:mapPulse 2.6s ease-out infinite;}
@keyframes mapPulse{ 0%{ r:6; opacity:0.6; } 100%{ r:16; opacity:0; } }
.map-tooltip{
  position:absolute;pointer-events:none;width:180px;background:var(--obsidian);border:1px solid var(--line);
  opacity:0;transform:translate(-50%,-100%) translateY(-10px);transition:opacity .2s ease,transform .2s ease;
  z-index:20;box-shadow:0 18px 40px -14px rgba(0,0,0,0.55);
}
.map-tooltip.show{opacity:1;transform:translate(-50%,-100%) translateY(-16px);}
.map-tooltip img{width:100%;height:96px;object-fit:cover;display:block;}
.map-tooltip-body{padding:0.8rem 0.9rem;}
.map-tooltip-tag{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:0.3rem;}
.map-tooltip-title{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--paper);}
@media (max-width:700px){
  .map-tooltip{width:150px;}
  .map-tooltip img{height:80px;}
}

/* ---------- BUILD PROGRESS TIMELINE (in-progress projects) ---------- */
.stages-heading{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 2.4rem;}

.build-stages{list-style:none;margin:0;padding:0;position:relative;}
.build-stages::before{
  content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(to bottom,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.build-stage{position:relative;padding-left:3.4rem;margin-bottom:3.6rem;}
.build-stage:last-child{margin-bottom:0;}
.build-stage::before{
  content:"";position:absolute;left:-4px;top:.7rem;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1px solid rgba(201,162,75,.7);
}
.build-stage:last-child::before{background:#C9A24B;border-color:#C9A24B;}

.build-stage-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:1.2rem;background:var(--obsidian);}
.build-stage-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease;}
.build-stage:hover .build-stage-img img{transform:scale(1.04);}
.build-stage-img.blueprint img{object-fit:contain;}

.build-stage-num{
  display:block;font-size:.68rem;letter-spacing:.22em;color:var(--ink-faint);
  margin-bottom:.5rem;font-weight:400;
}
.build-stage-body h3{margin:0 0 .5rem;font-size:1.12rem;font-weight:500;letter-spacing:.01em;}
.build-stage-body p{margin:0;color:var(--ink-soft);max-width:56ch;font-size:.94rem;line-height:1.7;}

.status-live{position:relative;padding-left:1rem;}
.status-live::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#C9A24B;
  box-shadow:0 0 0 0 rgba(201,162,75,.55);animation:statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 rgba(201,162,75,.55);}
  70%{box-shadow:0 0 0 7px rgba(201,162,75,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,75,0);}
}

.project-card .project-meta .meta-live{color:#B08A32;}

@media(min-width:800px){
  .build-stage{display:grid;grid-template-columns:1.15fr .85fr;gap:2.2rem;align-items:center;}
  .build-stage-img{margin-bottom:0;}
}
@media(prefers-reduced-motion:reduce){
  .build-stage:hover .build-stage-img img{transform:none;}
  .status-live::before{animation:none;}
}

/* ---------- MOBILE NAV + LANGUAGE MENU SCROLL FIX ---------- */
@media (max-width:840px){
  /* dvh accounts for the iOS URL bar; vh stays as the fallback */
  nav.links{
    height:100vh;
    height:100dvh;
    justify-content:flex-start;
    padding:1.5rem 2rem;
  }
  /* Centres the menu when it fits, but still allows scrolling when it
     doesn't. Plain justify-content:center makes overflow unreachable. */
  nav.links::before,
  nav.links::after{content:"";margin:auto;flex-shrink:0;}

  /* The language list joins the nav's normal flow instead of floating
     past the bottom of the panel, so it scrolls with everything else. */
  .lang-switch{width:100%;display:flex;flex-direction:column;align-items:center;}
  .lang-switch-menu{
    position:static;left:auto;right:auto;
    transform:none;
    width:100%;max-width:260px;min-width:0;
    margin:0.6rem auto 0;
    max-height:0;overflow:hidden;
    opacity:1;visibility:hidden;
    border-color:transparent;box-shadow:none;
    transition:max-height .3s ease,border-color .2s ease,visibility .2s ease;
  }
  .lang-switch.open .lang-switch-menu{
    transform:none;
    visibility:visible;
    max-height:none;
    border-color:var(--line);
  }
  .lang-switch-menu li button{text-align:center;}
}

/* build-stage photos open in the lightbox like gallery/hero images */
.build-stage-img img{cursor:zoom-in;}
body.custom-cursor-active .build-stage-img img{cursor:none;}

/* portrait card images: anchor to the top so rooflines aren't cropped out */
.project-img.img-top{object-position:center 12%;}

/* landscape-friendly third-width slot — lets rows of 5 images tile evenly */
.g-third{grid-column:span 2;aspect-ratio:4/3;}
@media(max-width:720px){
  .g-third{grid-column:span 1;aspect-ratio:4/3;}
}