/* ============================================================
   ESSIVE — site layer (extends brand.css)
   New components: buttons, photo hover, portfolio/service cards,
   process steps, stat cards, forms, mobile menu, sticky CTA,
   bilingual visibility. Monochrome, brandbook-aligned.
   ============================================================ */

/* ---------- bilingual visibility ---------- */
.lang-ru [data-lang="en"]{display:none !important}
.lang-en [data-lang="ru"]{display:none !important}
/* default (before JS sets a class) — show RU, hide EN to avoid flash of both */
html:not(.lang-en) [data-lang="en"]{display:none}

/* ---------- buttons ---------- */
.btn{
  --bd:var(--ink); --fg:var(--ink); --bg:transparent; --fill:var(--ink); --fill-fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--sans); font-weight:400; font-size:var(--t-micro);
  letter-spacing:.26em; text-transform:uppercase; text-decoration:none;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--bd); padding:18px 30px; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--fill);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{color:var(--fill-fg); border-color:var(--fill)}
.btn:hover::before{transform:scaleX(1)}
.btn .arw{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arw{transform:translateX(6px)}
.btn--solid{--bg:var(--ink); --fg:var(--paper); --bd:var(--ink); --fill:var(--paper); --fill-fg:var(--ink)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--graphite)}
.btn--light{--bg:transparent; --fg:var(--paper); --bd:var(--grey); --fill:var(--paper); --fill-fg:var(--ink)}
.btn--solid.btn--light{--bg:var(--paper); --fg:var(--ink); --bd:var(--paper); --fill:var(--ink); --fill-fg:var(--paper)}
.btn--block{display:flex; justify-content:center; width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- photo hover zoom ---------- */
.media{position:relative; overflow:hidden; display:block; background:var(--paper-2)}
.media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
  will-change:transform;
}
.media:hover img,a:hover .media img,.pcard:hover .media img{transform:scale(1.045); filter:brightness(1.03)}

/* ---------- topbar / nav extras (extends brand.css .topbar) ---------- */
.topbar{gap:24px}
.topbar .brand{display:flex; align-items:center; flex:none}
.topbar .brand img{height:42px; width:auto}
.topnav{align-items:center}
.topnav a,.topnav .nav-trigger{position:relative; padding-bottom:4px}
.topnav .nav-trigger{
  font-family:var(--sans); font-weight:300; font-size:var(--t-micro);
  letter-spacing:.28em; text-transform:uppercase; color:var(--graphite);
  background:none; border:0; cursor:default;
}
.topnav a::after,.topnav .nav-trigger::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.topnav a:hover::after,.topnav a.is-active::after,.topnav .nav-trigger:hover::after,.topnav .nav-trigger.is-active::after{transform:scaleX(1)}
.topnav a.is-active,.topnav .nav-trigger.is-active,.topnav .nav-trigger:hover{color:var(--ink)}

/* services dropdown */
.has-drop{position:relative; display:flex; align-items:center}
.has-drop > a,.has-drop > .nav-trigger{display:inline-flex; align-items:center; gap:.5em}
.drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:280px; background:var(--paper); border:1px solid var(--hairline);
  padding:10px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 24px 60px -28px rgba(23,22,20,.35); z-index:60;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translate(-50%,2px)}
.drop a{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--graphite); text-decoration:none; padding:12px 16px;
  transition:background .25s ease, color .25s ease; white-space:nowrap;
}
.drop a:hover{background:var(--paper-2); color:var(--ink)}

/* lang toggle */
.langtog{display:inline-flex; align-items:center; gap:2px; flex:none; user-select:none}
.langtog button{
  font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey); background:none; border:0; padding:6px 8px; cursor:pointer; transition:color .25s ease;
}
.langtog button.is-active{color:var(--ink)}
.langtog button:hover{color:var(--ink)}
.langtog .sep{color:var(--hairline)}

.quick-contacts{
  display:inline-flex;
  align-items:center;
  gap:13px;
  flex:none;
  padding:0;
  border:0;
  background:transparent;
}
.qcontact{
  --accent:var(--ink);
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  background:transparent;
  border:0;
  border-radius:0;
  text-decoration:none;
  opacity:.82;
  transition:color .3s ease, opacity .3s ease, transform .3s ease;
}
.qcontact svg{
  width:32px;
  height:32px;
  display:block;
}
.qmask{
  width:32px;
  height:32px;
  display:block;
  background:currentColor;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.qmask--whatsapp{
  -webkit-mask-image:url("../img/icons/whatsapp-mask.png");
  mask-image:url("../img/icons/whatsapp-mask.png");
}
.qcontact:hover{
  color:var(--accent);
  opacity:1;
  transform:translateY(-1px) scale(1.04);
}
.qcontact--telegram svg{width:32px; height:32px}
.qcontact--whatsapp .qmask{width:32px; height:32px; transform:translateY(1px)}
.qcontact--max svg{width:32px; height:32px}
.qcontact--phone svg{width:32px; height:32px}
.qcontact--telegram{--accent:#229ED9}
.qcontact--whatsapp{--accent:#25D366}
.qcontact--max{--accent:#5E5CE6}
.qcontact--phone{--accent:var(--ink)}

/* burger */
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; flex:none}
.burger span{display:block; width:24px; height:1.5px; background:var(--ink); transition:transform .35s ease, opacity .35s ease}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile slide-in menu */
.mnav{
  position:fixed; inset:0 0 0 auto; width:min(420px,86vw); z-index:90;
  background:var(--ink); color:var(--paper); padding:90px var(--gut) 40px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.mnav.open{transform:none}
.mnav a,.mnav-title{font-family:var(--serif); font-weight:300; font-size:clamp(26px,7vw,34px); color:var(--paper); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--hairline-dk)}
.mnav-title{display:block}
.mnav .sub a{font-family:var(--sans); font-size:14px; letter-spacing:.06em; color:#B9B4AB; padding:8px 0 8px 16px; border:0}
.mnav .sub{display:flex; flex-direction:column}
.mnav .m-foot{margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:16px}
.mnav .langtog button{color:var(--grey)}
.mnav .langtog button.is-active{color:var(--paper)}
.scrim{position:fixed; inset:0; background:rgba(12,11,10,.5); opacity:0; visibility:hidden; transition:opacity .4s ease; z-index:80}
body.menu-open .scrim{opacity:1; visibility:visible}

/* sticky mobile contacts */
.sticky-contacts{
  position:fixed;
  left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:10px 16px;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--hairline);
  transform:translateX(-50%);
  box-shadow:0 18px 48px -28px rgba(23,22,20,.45);
}
.sticky-contacts .qcontact{
  width:40px;
  height:40px;
  color:var(--ink);
  background:transparent;
}
.sticky-contacts .qcontact svg{width:32px; height:32px}
.sticky-contacts .qcontact .qmask{width:32px; height:32px}

@media(max-width:1080px){
  .topnav,.has-drop,.topbar .quick-contacts,.topbar > .label{display:none}
  .topbar .brand img{height:38px}
  .burger{display:flex}
  .sticky-contacts{display:flex}
  body{padding-bottom:74px}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--black); color:var(--paper); overflow:hidden;
  padding-block:clamp(110px,20vh,210px)}
.hero .wrap{position:relative; z-index:2}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.42; transform:scale(1.04)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.55),rgba(12,11,10,.78))}
.hero h1{font-family:var(--serif); font-weight:300; color:var(--paper);
  font-size:var(--t-display); line-height:1.02; letter-spacing:-.015em; max-width:18ch}
.hero .lede{color:#CFC9BF; max-width:52ch; margin-top:clamp(20px,3vh,30px)}
.hero .fineprint{color:var(--grey); margin-top:clamp(28px,4vh,40px); max-width:60ch; font-size:var(--t-small); letter-spacing:.02em}

.service-ad-hero{
  min-height:calc(100svh - 88px);
  display:flex;
  align-items:center;
  padding-block:clamp(86px,12vh,150px);
}
.service-ad-hero .wrap{width:100%}
.service-ad-hero .hero-bg img{opacity:1}
.service-ad-hero .hero-bg::after{
  background:
    linear-gradient(90deg,rgba(12,11,10,.76),rgba(12,11,10,.46) 48%,rgba(12,11,10,.62)),
    linear-gradient(180deg,rgba(12,11,10,.22),rgba(12,11,10,.78));
}
.service-ad-copy{max-width:min(980px,92vw)}
.service-ad-hero .label{color:var(--paper); opacity:.82}
.service-ad-hero h1{
  max-width:12ch;
  font-size:clamp(52px,8vw,118px);
}
.service-ad-hero .lede{
  max-width:34ch;
  font-size:clamp(22px,2.1vw,34px);
  line-height:1.28;
  color:var(--paper);
}
.service-ad-note{
  margin-top:18px;
  max-width:52ch;
  color:#CFC9BF;
  font-size:var(--t-small);
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:720px){
  .service-ad-hero{min-height:calc(100svh - 78px); padding-block:74px}
  .service-ad-hero h1{font-size:clamp(44px,14vw,72px)}
  .service-ad-hero .lede{font-size:clamp(19px,6vw,25px)}
}

/* page hero (lighter, for inner pages) */
.phero{padding-block:clamp(90px,14vh,150px)}
.phero h1{font-family:var(--serif); font-weight:300; font-size:var(--t-h1); line-height:1.05; letter-spacing:-.01em; max-width:20ch; margin-top:18px}
.phero .lede{margin-top:22px; max-width:60ch}

.studio-hero{
  padding-block:clamp(72px,10vh,124px);
}
.studio-hero h1{max-width:none}
.studio-hero-layout{
  display:grid;
  grid-template-columns:minmax(420px,.86fr) minmax(420px,1fr);
  gap:clamp(44px,7vw,118px);
  align-items:start;
  margin-top:clamp(16px,3vh,30px);
}
.studio-hero-lede{
  max-width:640px;
  margin:clamp(30px,5vh,54px) 0 0;
  color:var(--ink);
  font-size:clamp(21px,1.75vw,30px);
  line-height:1.45;
}
.studio-hero-more{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:clamp(12px,1.5vw,24px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--hairline);
  max-width:760px;
}
.studio-hero-more p{
  margin:0;
  color:var(--graphite);
  font-size:clamp(16px,1.18vw,19px);
  line-height:1.65;
}
.studio-hero-photo{
  margin-top:clamp(42px,6vh,72px);
  aspect-ratio:21/9;
  border:1px solid var(--hairline);
}
.studio-hero-photo img{
  object-fit:cover;
  object-position:center center;
  filter:grayscale(1) contrast(1.04);
}
@media(max-width:980px){
  .studio-hero-layout{grid-template-columns:1fr}
  .studio-hero-more{margin-top:0; max-width:760px}
  .studio-hero-photo{aspect-ratio:16/9}
}

.service-intro{
  padding-block:clamp(78px,10vh,118px);
}
.service-summary{
  background:var(--paper);
  padding-block:clamp(24px,3.5vw,42px);
}
.service-summary-card{
  padding-block:clamp(20px,3vw,32px);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.service-summary-card p{
  margin:0;
  max-width:1120px;
  color:var(--graphite);
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.45;
}

/* ---------- generic section heading helper already in brand.css (.shead) ---------- */

/* ---------- principle / feature cards ---------- */
.fcard{display:flex; flex-direction:column; gap:14px; padding:clamp(26px,3vw,36px);
  border:1px solid var(--hairline); background:var(--white); transition:border-color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.fcard:hover{border-color:var(--graphite); transform:translateY(-3px)}
.dark .fcard,.black .fcard{background:#141312; border-color:var(--hairline-dk)}
.dark .fcard:hover,.black .fcard:hover{border-color:var(--grey)}
.fcard .h3{color:inherit}

/* ---------- portfolio cards ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px)}
.pgrid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid,.pgrid.cols-2{grid-template-columns:1fr}}
.pcard{display:flex; flex-direction:column; text-decoration:none; color:inherit; group:card}
.pcard .media{aspect-ratio:4/3}
.pcard .pmeta{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 2px 0; flex-wrap:wrap}
.pcard .pname{font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.4vw,32px); line-height:1.05; letter-spacing:-.01em; color:var(--ink)}
.pcard .pname .it{font-style:italic}
.pcard .pinfo{font-family:var(--sans); font-weight:300; font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--grey); text-align:right}
.pcard .pgo{display:inline-flex; align-items:center; gap:.6em; margin-top:10px; padding:0 2px;
  font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--graphite);
  opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease}
.pcard:hover .pgo{opacity:1; transform:none}
.pcard .pgo .arw{transition:transform .4s ease}
.pcard:hover .pgo .arw{transform:translateX(5px)}

/* ---------- service cards ---------- */
.scards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px)}
@media(max-width:980px){.scards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scards{grid-template-columns:1fr}}
.scard{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:30px;
  min-height:300px; padding:clamp(26px,3vw,38px); text-decoration:none; color:var(--ink);
  border:1px solid #D2CCC2; background:#FBFAF7;
  transition:background .45s ease, color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.scard:hover{background:var(--ink); color:var(--paper); transform:translateY(-3px)}
.scard .num{color:#8A847A}
.scard .stitle{font-family:var(--serif); font-weight:300; font-size:clamp(26px,2.6vw,36px); line-height:1.05; letter-spacing:-.01em; color:var(--ink); transition:color .45s ease}
.scard p{color:var(--graphite); transition:color .45s ease}
.scard:hover .stitle{color:var(--paper)}
.scard:hover p,.scard:hover .num{color:#CFC9BF}
.scard .more{display:inline-flex; align-items:center; gap:.6em; font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--ink); transition:color .45s ease}
.scard:hover .more{color:var(--paper)}
.scard .more .arw{transition:transform .4s ease}
.scard:hover .more .arw{transform:translateX(5px)}
.scard[style*="var(--ink)"] .stitle{color:var(--paper)}
.scard[style*="var(--ink)"] p{color:#B9B4AB}
.scard[style*="var(--ink)"] .more{color:var(--paper)}
.scard[style*="var(--ink)"] .num{color:var(--grey)}

/* ---------- studio team photo ---------- */
.studio-team{
  margin-top:clamp(42px,7vh,86px);
  aspect-ratio:21/9;
  border:1px solid var(--hairline);
}
.studio-team img{
  object-position:center center;
  filter:grayscale(1) contrast(1.04);
}
@media(max-width:760px){
  .studio-team{aspect-ratio:4/3}
}
.studio-philosophy .h2{
  font-size:clamp(48px,4.6vw,78px);
  line-height:1.02;
  max-width:11ch;
  transform:translateY(-12px);
}
@media(max-width:980px){
  .studio-philosophy .h2{transform:none}
}

/* ---------- process steps ---------- */
.steps{border-top:1px solid var(--hairline)}
.dark .steps,.black .steps{border-color:var(--hairline-dk)}
.step{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px); align-items:baseline;
  padding:clamp(22px,3.4vh,34px) 0; border-bottom:1px solid var(--hairline);
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.dark .step,.black .step{border-color:var(--hairline-dk)}
.step:hover{padding-left:12px}
.step .si{font-family:var(--sans); font-weight:300; font-size:var(--t-micro); letter-spacing:.25em; color:var(--grey); white-space:nowrap}
.step .sc{display:flex; flex-direction:column; gap:8px}
.step .st{font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.4vw,32px); line-height:1.1; color:inherit; letter-spacing:-.01em}

/* ---------- "what's included" list ---------- */
.inclist{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,5vw,72px)}
@media(max-width:760px){.inclist{grid-template-columns:1fr}}
.inc{display:flex; flex-direction:column; gap:8px; padding:clamp(22px,3vh,30px) 0; border-top:1px solid var(--hairline)}
.dark .inc,.black .inc{border-color:var(--hairline-dk)}
.inc .it-t{font-family:var(--sans); font-weight:400; font-size:var(--t-h3); letter-spacing:.01em; color:inherit}

/* ---------- stat cards ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex; flex-direction:column; gap:12px; padding:clamp(24px,3vw,34px) 0; border-top:1px solid var(--hairline)}
.dark .stat,.black .stat{border-color:var(--hairline-dk)}
.stat .sk{font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(34px,4vw,58px); line-height:1; color:inherit}
.stat p{font-size:var(--t-small)}

/* ---------- CTA band ---------- */
.ctaband{background:var(--ink); color:var(--paper)}
.ctaband .inner{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
.ctaband h2{color:var(--paper); max-width:20ch}

/* ---------- forms ---------- */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px)}
@media(max-width:680px){.form{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:10px}
.field.col-2{grid-column:span 2}
@media(max-width:680px){.field.col-2{grid-column:span 1}}
.field label{font-family:var(--sans); font-weight:400; font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--graphite)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-weight:300; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--hairline);
  padding:12px 2px; transition:border-color .35s ease;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--grey)}
.dark .field label{color:var(--grey)}
.dark .field input,.dark .field select,.dark .field textarea{color:var(--paper); border-color:var(--hairline-dk)}
.dark .field input:focus,.dark .field select:focus,.dark .field textarea:focus{border-color:var(--paper)}
.form-actions{grid-column:span 2; display:flex; flex-direction:column; gap:16px; align-items:flex-start; margin-top:6px}
@media(max-width:680px){.form-actions{grid-column:span 1}}
.consent{font-size:var(--t-small); color:var(--grey); max-width:52ch}
.consent a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.form-done{display:none; padding:clamp(28px,4vw,48px); border:1px solid var(--hairline)}
.dark .form-done{border-color:var(--hairline-dk)}
.form-done.show{display:block}
.form.hide{display:none}

/* callback modal */
body.callback-open{overflow:hidden}
.callback-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,48px);
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease, visibility .28s ease;
}
.callback-modal[aria-hidden="true"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.callback-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(12,11,10,.74);
  backdrop-filter:blur(2px);
  cursor:pointer;
}
.callback-dialog{
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:var(--paper);
  color:var(--ink);
  border:1px solid rgba(23,22,20,.12);
  box-shadow:0 28px 80px rgba(12,11,10,.34);
  padding:clamp(30px,3.6vw,48px);
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.callback-modal[aria-hidden="true"] .callback-dialog{transform:translateY(14px)}
.callback-close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:32px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  transition:opacity .25s ease, transform .25s ease;
}
.callback-close:hover{opacity:.55; transform:rotate(6deg)}
.callback-head{
  max-width:420px;
  margin:0 auto;
  text-align:center;
}
.callback-head h2{
  margin-top:14px;
  font-family:var(--sans);
  font-size:clamp(23px,2vw,29px);
  font-weight:300;
  line-height:1.25;
  letter-spacing:0;
}
.callback-head p{
  margin:12px auto 0;
  max-width:38ch;
  color:var(--graphite);
}
.callback-form{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,2.5vh,24px);
  margin-top:clamp(26px,4vh,40px);
}
.callback-form .field{gap:8px}
.callback-form .field span{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--graphite);
}
.callback-form .field input{
  font-family:var(--sans);
  font-weight:300;
  font-size:18px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hairline);
  padding:8px 2px 11px;
  transition:border-color .35s ease;
}
.callback-form .field input:focus{outline:0; border-color:var(--ink)}
.callback-form .form-actions{
  grid-column:auto;
  align-items:stretch;
  gap:16px;
  margin-top:4px;
}
.callback-form .btn{min-height:58px}
.callback-form .consent{
  max-width:none;
  font-size:var(--t-small);
  line-height:1.45;
}
.callback-done{
  margin-top:clamp(28px,4vh,40px);
  text-align:center;
}
.callback-done h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px,3vw,44px);
  line-height:1.05;
}
.callback-done p{
  margin:16px auto 0;
  max-width:34ch;
}
.callback-done .btn{margin-top:26px}
@media(max-width:560px){
  .callback-modal{padding:14px}
  .callback-dialog{padding:34px 24px 28px}
  .callback-head{text-align:left}
  .callback-head p{margin-left:0}
}

/* simplified contacts page */
.contact-hero{
  padding-block:clamp(64px,7vh,96px) clamp(56px,7vh,92px);
}
.contact-hero-grid{
  display:grid;
  grid-template-columns:minmax(360px,.85fr) minmax(420px,1fr);
  gap:clamp(40px,7vw,112px);
  align-items:start;
}
.contact-hero-copy{
  max-width:760px;
  padding-top:clamp(34px,3vw,46px);
}
.contact-hero-copy .lede{
  margin:0;
  max-width:62ch;
}
.contact-geo{
  margin:clamp(18px,2.2vw,26px) 0 0;
  padding-top:18px;
  border-top:1px solid var(--hairline);
  max-width:56ch;
  color:var(--graphite);
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.55;
}
.contact-hero-copy .btn{
  margin-top:clamp(30px,3.4vw,44px);
}
.contact-geo + .btn{
  margin-top:clamp(22px,2.6vw,34px);
}
.contact-direct-section{
  padding-bottom:clamp(76px,10vh,128px);
}
.contact-direct{
  display:grid;
  grid-template-columns:minmax(280px,.62fr) minmax(480px,1fr);
  gap:clamp(36px,7vw,112px);
  align-items:start;
  padding-top:clamp(36px,4.6vw,56px);
  border-top:1px solid var(--hairline);
}
.contact-direct-intro p{
  margin-top:18px;
  max-width:42ch;
  color:var(--graphite);
}
.dark .contact-hero-copy .lede,
.dark .contact-direct-intro p,
.dark .contact-geo{
  color:#B9B4AB;
}
.dark .contact-geo{
  border-color:var(--hairline-dk);
}
.dark .contact-direct{
  border-color:var(--hairline-dk);
}
.contact-methods{
  margin-top:0;
}
@media(max-width:900px){
  .contact-hero-grid,.contact-direct{grid-template-columns:1fr}
  .contact-hero-copy{padding-top:0}
}

/* contact methods */
.cmethods{display:flex; flex-direction:column; gap:0}
.cmethod{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:0 2px; border-top:1px solid var(--hairline); text-decoration:none; color:var(--ink); transition:padding-left .3s ease}
.cmethod:last-child{border-bottom:1px solid var(--hairline)}
.cmethod:hover{padding-left:8px}
.cmethod .cm-k{font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--grey)}
.cmethod .cm-v{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,24px)}
.cmethod .arw,.cmethod .cm-action{display:inline-block; transition:transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease, opacity .25s ease}
.cmethod .cm-action{
  font-family:var(--sans);
  font-style:normal;
  font-weight:300;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1;
  color:var(--graphite);
  opacity:.62;
}
.cmethod:hover .arw{transform:translateX(6px)}
.cmethod:hover .cm-action{transform:translateX(4px); color:var(--ink); opacity:1}
.dark .cmethod,.black .cmethod{color:var(--paper); border-color:var(--hairline-dk)}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.gallery .media{grid-column:span 2; aspect-ratio:4/3}
.gallery .media.wide{grid-column:span 4; aspect-ratio:16/10}
.gallery .media.tall{grid-column:span 2; aspect-ratio:3/4}
.gallery .media.full{grid-column:span 6; aspect-ratio:16/9}
@media(max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .media,.gallery .media.wide,.gallery .media.tall,.gallery .media.full{grid-column:span 2; aspect-ratio:4/3}
}

/* project meta row */
.pj-meta{display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,72px); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:clamp(20px,3vh,28px) 0}
.pj-meta .m{display:flex; flex-direction:column; gap:6px}
.pj-meta .mk{font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--grey)}
.pj-meta .mv{font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,26px); color:var(--ink)}

/* ---------- footer (extends brand.css .foot) ---------- */
.site-foot .fcols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px); margin-bottom:clamp(40px,7vh,72px)}
@media(max-width:760px){.site-foot .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.site-foot .fcols{grid-template-columns:1fr}}
.site-foot .fcol{display:flex; flex-direction:column; gap:14px}
.site-foot .fcol a{font-size:var(--t-small); letter-spacing:.04em; color:#B9B4AB; text-decoration:none; transition:color .25s ease}
.site-foot .fcol a:hover{color:var(--paper)}
.site-foot .fcol .ftitle{font-size:var(--t-micro); letter-spacing:.28em; text-transform:uppercase; color:var(--grey); margin-bottom:6px}
.site-foot .ftag{color:#B9B4AB; max-width:34ch}

/* ---------- spacing helpers ---------- */
.mt-band{margin-top:clamp(40px,6vh,72px)}
.mt-lg{margin-top:clamp(56px,8vh,96px)}
.center-narrow{max-width:760px; margin-inline:auto}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn .arw,.qcontact,.media img,.topnav a::after,.drop,.scard,.fcard,.step,.pcard .pgo,.mnav,.scrim,.burger span{transition:none !important}
  .media:hover img,.pcard:hover .media img{transform:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}