/* ============ BASE ============ */
:root{
  --cocoa:#2B1A10;
  --coffee:#3D2817;
  --brown:#5C3A24;
  --rust:#8B5A3C;
  --tan:#A67C52;
  --bronze:#B8895F;
  --cream:#F5EFE6;
  --bone:#FAF6F0;
  --paper:#FFFDF9;
  --ink:#1A110A;
  --muted:#6B5644;
  --line:rgba(61,40,23,.14);
  /* Pastel accents — classy, muted, brand-compatible */
  --pastel-rose:#F3DED5;   /* dusty blush  */
  --pastel-sage:#DFE8D7;   /* sage mist    */
  --pastel-sky: #DCE4E7;   /* powder blue  */
  --pastel-peach:#F4E2CE;  /* warm apricot */
  --pastel-lilac:#E8E0EA;  /* soft lilac   */
  --pastel-butter:#F6ECCE; /* pale butter  */
  --rose-ink:#8E5A52;
  --sage-ink:#5E7353;
  --sky-ink:#516872;
  --peach-ink:#9A6D43;
  --shadow:0 30px 80px -30px rgba(43,26,16,.35);
  --serif:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
/* Hidden from sighted users but crawlable by Google + read by screen readers. Used for the SEO H1 in the hero. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--coffee)}
p{color:var(--muted);font-weight:300}
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rust);font-weight:500;margin-bottom:18px;display:inline-block
}
.section-title{font-size:clamp(32px,4.2vw,58px);font-weight:500;margin-bottom:18px}
.section-sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);color:var(--rust);font-weight:400;margin-bottom:12px}
.section-lead{font-size:16px;color:var(--muted);max-width:620px;line-height:1.75}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 32px;display:flex;align-items:center;justify-content:space-between;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;background:transparent;
}
.nav.scrolled{background:rgba(255,253,249,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:14px 32px}
.nav-logo{font-family:var(--serif);font-size:30px;font-weight:500;color:#fff;letter-spacing:-.02em;transition:color .4s;display:flex;align-items:center}
.nav-logo span{font-style:italic;color:var(--bronze)}
.nav.scrolled .nav-logo{color:var(--coffee)}
.nav-logo img{display:block;height:58px;width:auto;max-width:280px;object-fit:contain;filter:brightness(0) invert(1);transition:height .35s ease, filter .35s ease}
.nav.scrolled .nav-logo img{height:48px;filter:brightness(0)}
.hero-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;pointer-events:none;padding:0 32px;gap:18px}
.hero-logo{display:flex;align-items:center;justify-content:center}
.hero-logo img{max-width:min(620px,70vw);max-height:30vh;width:auto;height:auto;filter:brightness(0) invert(1) drop-shadow(0 8px 26px rgba(0,0,0,.3))}
.hero-logo:empty{display:none}
.hero-logo .hero-logo-default{
  font-family:var(--serif);font-weight:500;color:#fff;letter-spacing:-.015em;
  font-size:clamp(46px,9vw,110px);line-height:1;
  text-shadow:0 6px 32px rgba(0,0,0,.45)
}
.hero-logo .hero-logo-default em{font-style:italic;color:var(--bronze);font-weight:400}
.hero-tagline .hero-tagline-default{display:inline}
.hero-tagline{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff;font-size:clamp(18px,2.4vw,30px);letter-spacing:.02em;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.45);max-width:min(640px,80vw)}
.hero-tagline:empty{display:none}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:nowrap}
.nav-links a{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.88;transition:opacity .3s, color .4s;white-space:nowrap}
.nav.scrolled .nav-links a{color:var(--coffee)}
.nav-links a:hover{opacity:1;color:var(--bronze)}
.nav-cta{
  padding:10px 22px;border:1px solid rgba(255,255,255,.5);border-radius:40px;
  color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:all .3s;
}
.nav.scrolled .nav-cta{border-color:var(--brown);color:var(--coffee)}
.nav-cta:hover{background:var(--bronze);border-color:var(--bronze);color:#fff!important}
.nav-toggle{display:none;color:#fff;font-size:24px;background:transparent}
.nav.scrolled .nav-toggle{color:var(--coffee)}
.mobile-menu{
  position:fixed;top:0;left:0;right:0;bottom:0;background:var(--cocoa);z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .3s;
  overflow-y:auto;padding:90px 24px 40px
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{color:#fff;font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.1}
.mobile-menu a em{color:var(--bronze);font-style:italic;font-weight:400}

/* ============ HERO ============ */
.hero{
  position:relative;height:100vh;height:100svh;height:100dvh;min-height:620px;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:120px 0 96px;color:#fff
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:var(--cocoa) url('images/hero-cover.jpg') center/cover no-repeat;
  filter:brightness(.88);
  transform:scale(var(--hero-scale, 1.00)) translateZ(0);
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,17,10,.45) 0%, rgba(26,17,10,0) 22%, rgba(26,17,10,0) 78%, rgba(26,17,10,.6) 100%)
}
.hero-top,.hero-bottom{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 32px;width:100%}
.hero-badge{
  display:inline-block;padding:8px 20px;border:1px solid rgba(255,255,255,.35);border-radius:40px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
}
.hero-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:4px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  transition:all .3s ease;cursor:pointer
}
.btn-primary{background:var(--bronze);color:#fff}
.btn-primary:hover{background:#fff;color:var(--coffee);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--coffee);border-color:#fff}
.btn-dark{background:var(--coffee);color:#fff}
.btn-dark:hover{background:var(--cocoa);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--coffee);color:var(--coffee)}
.btn-outline:hover{background:var(--coffee);color:#fff}
.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;animation:bounce 2.4s infinite
}
.hero-scroll::after{content:'';width:1px;height:36px;background:rgba(255,255,255,.4)}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ============ ABOUT ============ */
.about{padding:140px 0;background:var(--paper);position:relative}
.about-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:center}
.about-img{position:relative;border-radius:4px;overflow:hidden;height:640px;background:linear-gradient(160deg,var(--cream),var(--bone))}
.about-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.about-img:hover img{transform:scale(1.04)}
.about-badge{
  position:absolute;bottom:30px;left:30px;background:rgba(43,26,16,.88);color:#fff;
  padding:18px 26px;border-radius:4px;backdrop-filter:blur(8px);max-width:240px
}
.about-badge .num{font-family:var(--serif);font-size:40px;line-height:1;color:var(--bronze)}
.about-badge .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;opacity:.85}
.about-text h2 span{display:block;font-style:italic;color:var(--rust);font-weight:400}
.about-text p{margin:26px 0;font-size:17px;line-height:1.85;color:var(--muted)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px;padding-top:44px;border-top:1px solid var(--line)}
.stat .n{font-family:var(--serif);font-size:44px;font-weight:500;color:var(--coffee);line-height:1}
.stat .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.4}

/* ============ SERVICES ============ */
.services{padding:140px 0;background:var(--cream);position:relative}
.services-head{text-align:center;max-width:720px;margin:0 auto 80px}
.services-head .section-lead{margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.service-card{
  background:var(--paper);padding:48px 32px;text-align:center;
  transition:all .5s ease;cursor:pointer;position:relative;overflow:hidden;min-height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.service-card::before{
  content:'';position:absolute;inset:0;background:var(--coffee);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s ease;z-index:0
}
.service-card:hover::before{transform:scaleY(1)}
.service-card > *{position:relative;z-index:1;transition:color .5s}
.service-card:hover h3, .service-card:hover .ico, .service-card:hover p{color:#fff}
.service-card .ico{
  font-family:var(--serif);font-size:42px;color:var(--bronze);margin-bottom:18px;
  font-style:italic;font-weight:400
}
.service-card h3{font-size:22px;margin-bottom:12px}
.service-card p{font-size:13px;line-height:1.7}
.service-card .svc-more{
  margin-top:16px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);font-family:var(--sans);font-weight:500;opacity:0;transform:translateY(4px);
  transition:opacity .45s ease, transform .45s ease
}
.service-card:hover .svc-more{opacity:.95;transform:translateY(0)}
.service-card.is-open{background:var(--coffee);color:#fff}
.service-card.is-open h3, .service-card.is-open .ico, .service-card.is-open p, .service-card.is-open .svc-more{color:#fff}
.service-card.is-open::before{transform:scaleY(1)}
.service-card.is-open .svc-more{opacity:1;transform:translateY(0)}
.service-card:focus-visible{outline:2px solid var(--bronze);outline-offset:-4px}
.service-card:focus-visible .svc-more{opacity:1;transform:translateY(0)}
/* Normalise button quirks — these 8 cards are <button> elements for a11y */
button.service-card{color:inherit;font:inherit;width:100%}

/* ----- Service detail expander (SEO-friendly: present in DOM, revealed on click) ----- */
.service-details{background:var(--cream);border-top:1px solid var(--line);padding:0}
.service-detail{
  max-width:900px;margin:0 auto;padding:70px 32px 90px;
  animation:svcFade .55s ease both
}
.service-detail[hidden]{display:none}
@keyframes svcFade{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:translateY(0)}
}
.service-detail .svc-kicker{
  font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rust);font-weight:500;margin-bottom:14px;display:inline-block
}
.service-detail h3{
  font-family:var(--serif);font-weight:500;color:var(--coffee);
  font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.01em;
  margin-bottom:10px
}
.service-detail h3 em{font-style:italic;color:var(--rust);font-weight:400}
.service-detail .svc-lede{
  font-family:var(--serif);font-style:italic;color:var(--rust);
  font-size:clamp(17px,1.7vw,22px);line-height:1.45;margin-bottom:28px;max-width:720px
}
.service-detail p{
  font-size:16.5px;line-height:1.88;color:var(--muted);margin-bottom:20px;max-width:780px
}
.service-detail p strong{color:var(--coffee);font-weight:500}
.service-detail .svc-specs{
  margin:32px 0 28px;padding:22px 26px;background:var(--paper);border-left:2px solid var(--bronze);
  border-radius:2px
}
.service-detail .svc-specs h4{
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rust);font-weight:500;margin-bottom:10px
}
.service-detail .svc-specs p{margin:0;font-size:15px;line-height:1.75;color:var(--coffee)}
.service-detail .svc-specs ul.svc-tags{
  list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px
}
.service-detail .svc-specs ul.svc-tags li{
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--coffee);
  background:#fff;border:1px solid rgba(184,137,95,.35);
  padding:7px 14px;border-radius:20px;line-height:1.25
}
.service-detail .svc-specs .svc-note{
  display:block;margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--muted);font-style:italic
}
.service-detail .svc-ctas{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:14px
}
.service-detail .svc-ctas a{
  font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:14px 28px;border-radius:30px;transition:all .3s ease
}
.service-detail .svc-ctas .cta-primary{background:var(--coffee);color:#fff}
.service-detail .svc-ctas .cta-primary:hover{background:var(--cocoa);transform:translateY(-2px)}
.service-detail .svc-ctas .cta-ghost{border:1px solid var(--bronze);color:var(--bronze)}
.service-detail .svc-ctas .cta-ghost:hover{background:var(--bronze);color:#fff}
.service-detail .svc-close{
  display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding:0;background:none;border:none;
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  cursor:pointer;transition:color .3s
}
.service-detail .svc-close:hover{color:var(--coffee)}
@media(max-width:680px){
  .service-detail{padding:54px 24px 70px}
  .service-detail .svc-ctas a{font-size:11px;padding:12px 22px}
}

/* ============ FINISHES ============ */
.finishes{padding:140px 0;background:var(--paper)}
.finishes-head{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;margin-bottom:70px;align-items:end}
.finishes-head h2{font-size:clamp(36px,5vw,68px)}
.finishes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.finish-card{
  position:relative;border-radius:4px;overflow:hidden;aspect-ratio:3/4;
  cursor:pointer;transition:transform .6s cubic-bezier(.2,.9,.3,1.15);
  background:linear-gradient(145deg,var(--coffee),var(--cocoa))
}
.finish-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.finish-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(26,17,10,.9) 100%)
}
.finish-card:hover{transform:translateY(-6px)}
.finish-card:hover img{transform:scale(1.08)}
.finish-info{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:2;color:#fff}
.finish-info .cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.finish-info h4{color:#fff;font-size:22px;font-weight:500;margin-bottom:4px}
.finish-info .desc{font-size:12px;color:rgba(255,255,255,.75);font-style:italic;font-family:var(--serif)}
.finish-card.wide{grid-column:span 2;aspect-ratio:3/2}

/* ============ WHY ============ */
.why{padding:140px 0;background:var(--cocoa);color:#fff;position:relative;overflow:hidden}
.why::before{
  content:'';position:absolute;inset:0;
  background:url('images/int-living-windows.jpg') right center/cover no-repeat;opacity:.35;
  mask-image:linear-gradient(90deg,transparent 30%,#000 75%);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%)
}
.why-content{position:relative;z-index:1;max-width:640px}
.why h2{color:#fff;font-size:clamp(36px,5vw,64px)}
.why h2 em{font-style:italic;color:var(--bronze);font-weight:400}
.why .section-sub{color:var(--bronze)}
.why p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.85;margin-top:28px;max-width:580px}
.why-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:56px}
.pillar{padding:28px 0;border-top:1px solid rgba(255,255,255,.16)}
.pillar .n{font-family:var(--serif);font-size:14px;color:var(--bronze);letter-spacing:.2em}
.pillar h4{color:#fff;font-size:22px;margin:10px 0 8px;font-weight:500}
.pillar p{font-size:14px;line-height:1.7;margin-top:8px;color:rgba(255,255,255,.65)}

/* ============ OUR ARTISTS ============ */
.artists{padding:140px 0;background:var(--paper);position:relative}
.artists .container{max-width:1180px}
.artists-image{
  position:relative;width:100%;border-radius:4px;overflow:hidden;margin-bottom:70px;
  background:linear-gradient(160deg,var(--cream),var(--bone));
  aspect-ratio:16/9;max-height:560px;
  box-shadow:0 30px 80px -40px rgba(61,40,23,.45)
}
.artists-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s ease}
.artists-image:hover img{transform:scale(1.03)}
.artists-text{max-width:780px;margin:0 auto;text-align:center}
.artists-text .section-sub{margin-top:14px}
.artists-text p.lede{
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.7vw,22px);
  line-height:1.55;color:var(--rust);font-weight:400;margin:18px auto 0;max-width:640px
}
.artists-text p{font-size:17px;line-height:1.9;color:var(--muted);margin:26px auto 0;max-width:660px}
.artists-text p strong{color:var(--coffee);font-weight:500}
.artists-text h2 em{font-style:italic;color:var(--rust);font-weight:400}
@media(max-width:680px){
  .artists{padding:90px 0}
  .artists-image{margin-bottom:44px;aspect-ratio:11/6;max-height:none}
  .artists-text p{font-size:16px;line-height:1.85}
}

/* ============ CLIENTS ============ */
.clients{padding:140px 0;background:var(--bone)}
.clients-head{text-align:center;margin-bottom:70px}
.clients-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.client{
  padding:44px 36px 46px;position:relative;
  border-bottom:1px solid var(--line);
  transition:background .35s ease
}
.client:not(:nth-child(3n)){border-right:1px solid var(--line)}
.client:hover{background:rgba(196,164,132,.06)}
.client .role{font-size:11px;color:var(--bronze);letter-spacing:.26em;text-transform:uppercase;margin-bottom:14px;font-weight:500;display:block}
.client h4{font-size:24px;color:var(--coffee);margin-bottom:16px;letter-spacing:-.01em;font-weight:500}
.client p{font-size:14px;line-height:1.65;color:var(--muted);max-width:34ch}

/* ============ COLLABORATORS ============ */
.collab{padding:120px 0;background:var(--paper)}
.collab-head{text-align:center;margin-bottom:60px}
.collab-head .section-title{font-size:clamp(30px,3.6vw,48px)}
.collab-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  background:var(--bone);border:1px solid var(--line);border-radius:4px;overflow:hidden
}
.collab-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 18px;min-height:130px;position:relative;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bone);transition:background .35s ease
}
/* strip right borders on the last column of each row */
.collab-item:nth-child(6n){border-right:none}
/* strip bottom border on the last row (30 items = last 6) */
.collab-item:nth-last-child(-n+6){border-bottom:none}
.collab-item:hover{background:var(--paper)}
.collab-item img{
  max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .35s ease, opacity .35s ease;
  mix-blend-mode:multiply
}
.collab-item:hover img{filter:grayscale(0);opacity:1}
.collab-item .collab-name{
  display:block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:14px;line-height:1.3;text-align:center;font-weight:500
}
/* fallback when no image has loaded yet: show only the name */
.collab-item.no-logo img{display:none}
.collab-item.no-logo .collab-name{
  font-family:var(--serif);font-size:14px;color:var(--coffee);
  letter-spacing:.02em;text-transform:none;margin-top:0;font-weight:500
}
.collab-more{
  margin-top:28px;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.4vw,18px);color:var(--muted);letter-spacing:.01em
}
.collab-more em{color:var(--rust);font-style:italic}

/* ============ PRESENCE / MAP ============ */
.presence{padding:140px 0;background:var(--cocoa);color:#fff;position:relative}
.presence-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.presence h2{color:#fff}
.presence .section-sub{color:var(--bronze)}
.presence p{color:rgba(255,255,255,.78);margin-top:24px}
.cities{margin-top:40px}
.city{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.14);
  transition:padding-left .3s
}
.city:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.city:hover{padding-left:14px}
.city h4{color:#fff;font-size:24px;font-weight:500;margin:0}
.city .status{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.city.soon .status{color:rgba(255,255,255,.45)}
.map-vis{
  aspect-ratio:4/5;background:linear-gradient(135deg,rgba(184,137,95,.06) 0%,rgba(43,26,16,.3) 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;position:relative;padding:30px;
  display:flex;flex-direction:column;justify-content:space-between
}
.map-vis::before{
  content:'';position:absolute;inset:30px;border:1px dashed rgba(184,137,95,.25)
}
.pin-group{position:relative;flex:1}
.pin{
  position:absolute;width:14px;height:14px;border-radius:50%;background:var(--bronze);
  box-shadow:0 0 0 4px rgba(184,137,95,.18);
  animation:ping 2.4s infinite
}
.pin:nth-child(1){top:30%;left:30%;animation-delay:0s}
.pin:nth-child(2){top:20%;left:60%;animation-delay:.4s}
.pin:nth-child(3){top:55%;left:45%;animation-delay:.8s}
.pin:nth-child(4){top:70%;left:35%;animation-delay:1.2s}
.pin:nth-child(5){top:80%;left:55%;animation-delay:1.6s}
.pin:nth-child(6){top:45%;left:25%;background:rgba(184,137,95,.5);animation:none}
.pin:nth-child(7){top:65%;left:70%;background:rgba(184,137,95,.5);animation:none}
@keyframes ping{0%,100%{box-shadow:0 0 0 4px rgba(184,137,95,.18)}50%{box-shadow:0 0 0 12px rgba(184,137,95,.04)}}
.map-note{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.map-note span{color:var(--bronze)}

/* ============ STUDIO BOOKING ============ */
.studio{padding:140px 0;background:var(--bone);position:relative}
.studio-head{text-align:center;margin-bottom:70px;max-width:680px;margin-left:auto;margin-right:auto}
.studio-locations{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:80px;border-top:1px solid var(--line)}
.studio-card{
  padding:32px 0 34px;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  border-bottom:1px solid var(--line);
  transition:background .35s ease
}
.studio-card:not(:nth-child(3n)){border-right:1px solid var(--line);padding-right:32px}
.studio-card:nth-child(3n+2),
.studio-card:nth-child(3n){padding-left:32px}
.studio-card:hover{background:rgba(196,164,132,.05)}
.studio-card .loc-tag{
  display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);font-weight:500;margin-bottom:14px
}
.studio-card h4{font-size:22px;margin-bottom:14px;letter-spacing:-.01em}
.studio-card address{font-style:normal;font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:18px}
.studio-card .studio-map-link{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;margin-bottom:24px;transition:color .25s ease, border-color .25s ease
}
.studio-card .studio-map-link:hover{color:var(--coffee);border-color:var(--coffee)}
.studio-card .studio-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--coffee);font-weight:500;border:none;background:none;padding:0;
  transition:gap .3s ease, color .3s ease;width:fit-content;cursor:pointer
}
.studio-card .studio-link:hover{gap:14px;color:var(--bronze)}
.studio-card .studio-link .arr{font-family:var(--sans);font-weight:400;transition:transform .3s ease}
.studio-card:hover .studio-link .arr{transform:translateX(4px)}
.studio-card.soon{opacity:.72}
.studio-card.soon:hover{opacity:1}
.studio-card.soon .loc-tag{color:var(--tan)}
.studio-card.soon h4{color:var(--muted)}
.studio-card.soon h4::after{
  content:'';display:block;width:28px;height:1px;background:var(--tan);margin-top:14px
}
.studio-nationwide{
  max-width:760px;margin:-34px auto 72px;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);
  line-height:1.35;color:var(--coffee);letter-spacing:-.005em
}
.studio-nationwide span{color:var(--rust)}

.booking-panel{
  display:grid;grid-template-columns:1fr 1.2fr;gap:0;border-radius:6px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--line)
}
.booking-visual{
  background:var(--coffee) url('images/int-calceterra-beige.jpg') center/cover no-repeat;
  position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px;color:#fff
}
.booking-visual::before{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,26,16,.2) 0%, rgba(26,17,10,.85) 100%)
}
.booking-visual > *{position:relative;z-index:1}
.booking-visual .eyebrow{color:var(--bronze)}
.booking-visual h3{color:#fff;font-size:36px;font-weight:500;margin-bottom:14px;line-height:1.1}
.booking-visual p{color:rgba(255,255,255,.85);font-size:14px;line-height:1.7;margin-bottom:22px}
.booking-visual ul{list-style:none;padding:0}
.booking-visual li{
  font-size:13px;color:rgba(255,255,255,.85);padding:8px 0;display:flex;gap:12px;align-items:center;
  border-top:1px solid rgba(255,255,255,.12);letter-spacing:.04em
}
.booking-visual li::before{content:'—';color:var(--bronze)}

.booking-form{background:var(--paper);padding:48px 44px}
.booking-form h3{font-size:28px;margin-bottom:6px}
.booking-form > p{font-size:13px;color:var(--muted);margin-bottom:30px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-field{display:flex;flex-direction:column}
.form-field label{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;font-weight:500
}
.form-field input,.form-field select,.form-field textarea{
  font-family:var(--sans);font-size:14px;padding:12px 14px;border:1px solid var(--line);
  background:var(--bone);border-radius:3px;transition:border .3s;color:var(--ink);outline:none
}
/* iOS auto-zooms into inputs with font-size < 16px. Bump on mobile to prevent that. */
@media (max-width:680px){
  .form-field input,.form-field select,.form-field textarea,
  .modal-body input,.modal-body select,.modal-body textarea{font-size:16px}
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--bronze);background:var(--paper)
}
.form-field textarea{resize:vertical;min-height:80px}
.form-field.full{grid-column:span 2}
.booking-form .btn{width:100%;justify-content:center;margin-top:10px}
.booking-success{
  display:none;padding:24px;background:var(--cream);border-left:3px solid var(--bronze);
  margin-top:20px;border-radius:3px
}
.booking-success.show{display:block}
.booking-success strong{color:var(--coffee);font-family:var(--serif);font-size:20px;display:block;margin-bottom:6px}

/* ============ DOWNLOADS ============ */
.downloads{padding:140px 0;background:var(--coffee);color:#fff;position:relative;overflow:hidden}
.downloads::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(184,137,95,.1) 0%, transparent 40%)
}
.downloads-wrap{position:relative;z-index:1}
.downloads-head{text-align:center;margin-bottom:70px;max-width:680px;margin-left:auto;margin-right:auto}
.downloads h2{color:#fff}
.downloads .section-sub{color:var(--bronze)}
.downloads .section-lead{color:rgba(255,255,255,.72);margin:0 auto}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dl-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:4px;
  padding:36px 32px;transition:all .4s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:100%
}
.dl-card::before{
  content:'';position:absolute;top:0;left:0;height:2px;width:0;background:var(--bronze);transition:width .4s
}
.dl-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.dl-card:hover::before{width:100%}
.dl-icon{
  width:48px;height:48px;border:1px solid var(--bronze);color:var(--bronze);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:22px;font-style:italic;border-radius:3px;margin-bottom:22px
}
.dl-card .cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin-bottom:10px}
.dl-card h4{color:#fff;font-size:24px;margin-bottom:8px}
.dl-card p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.62);margin-bottom:24px;min-height:44px}
.dl-meta{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.4);margin-top:auto;margin-bottom:18px;letter-spacing:.08em}
.dl-btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;border-radius:3px;transition:all .3s;
  width:100%;justify-content:center;cursor:pointer;
  font-family:var(--sans);font-weight:500
}
.dl-btn:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.dl-btn.solid{background:var(--bronze);border-color:var(--bronze)}
.dl-btn.solid:hover{background:#fff;color:var(--coffee);border-color:#fff}

/* ============ FAQ ============ */
.faq{padding:140px 0;background:var(--paper);position:relative;overflow:hidden}
.faq::before{
  content:'';position:absolute;top:0;right:-120px;width:320px;height:320px;
  background:radial-gradient(circle,var(--cream) 0%,transparent 70%);opacity:.6;pointer-events:none
}
.faq-wrap{display:grid;grid-template-columns:.85fr 1.4fr;gap:90px;align-items:start;position:relative;z-index:1}
.faq-head{position:sticky;top:110px}
.faq-head h2{font-size:clamp(48px,7vw,100px);line-height:.9}
.faq-head h2 em{font-style:italic;color:var(--bronze);font-weight:400}
.faq-head p{margin-top:24px;font-size:15px}
.faq-contact{
  margin-top:42px;padding:30px 28px;background:var(--cream);border-radius:6px;
  border-left:3px solid var(--bronze);position:relative
}
.faq-contact strong{
  font-family:var(--serif);font-size:20px;color:var(--coffee);display:block;margin-bottom:10px;font-weight:500
}
.faq-contact > p{margin:0 0 22px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.faq-contact-actions{display:flex;flex-direction:column;gap:10px}
.faq-contact-actions a,.faq-contact-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:13px 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;color:var(--coffee);border:1px solid var(--line);
  border-radius:3px;cursor:pointer;transition:all .25s;font-family:var(--sans);font-weight:500
}
.faq-contact-actions .primary{background:var(--coffee);color:#fff;border-color:var(--coffee)}
.faq-contact-actions .primary:hover{background:var(--cocoa);border-color:var(--cocoa)}
.faq-contact-actions .ghost:hover{background:var(--coffee);color:#fff;border-color:var(--coffee)}

.faq-list{display:flex;flex-direction:column}
.faq-group + .faq-group{margin-top:48px}
.faq-group-label{
  display:flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:14px;font-weight:500
}
.faq-group-label::before{
  content:'';width:22px;height:1px;background:var(--bronze)
}
.faq-item{
  border-top:1px solid var(--line);padding:22px 4px;cursor:pointer;
  transition:padding .35s ease,background .3s
}
.faq-group .faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item:hover .faq-q-text{color:var(--bronze)}
.faq-item:hover .faq-toggle{transform:rotate(90deg)}
.faq-q{
  display:flex;align-items:baseline;gap:20px;
  font-family:var(--serif);line-height:1.3
}
.faq-num{
  flex-shrink:0;width:28px;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;color:var(--bronze);font-weight:500;
  font-feature-settings:'tnum';align-self:baseline
}
.faq-q-text{
  flex:1;font-family:var(--serif);font-size:20px;color:var(--coffee);
  font-weight:500;transition:color .25s
}
.faq-toggle{
  flex-shrink:0;font-family:var(--serif);font-size:26px;color:var(--bronze);
  transition:transform .4s cubic-bezier(.2,.9,.3,1);font-weight:300;line-height:1
}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .5s ease, margin .4s, opacity .3s;opacity:0;
  font-size:14.5px;line-height:1.85;color:var(--muted);padding-left:48px
}
.faq-item.open{padding-bottom:30px}
.faq-item.open .faq-a{max-height:300px;margin-top:16px;opacity:1}
.faq-item.open .faq-toggle{transform:rotate(45deg)}
.faq-item.open:hover .faq-toggle{transform:rotate(45deg)}
.faq-item.open .faq-q-text{color:var(--coffee)}

/* ============ TEAM ============ */
.team{padding:140px 0;background:var(--cream)}
.team-head{text-align:center;margin-bottom:70px}
.team-lead{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-bottom:30px}
.tm{text-align:center}
.tm-photo{
  aspect-ratio:1/1.1;background:linear-gradient(180deg,var(--tan) 0%,var(--coffee) 100%);
  border-radius:4px;position:relative;overflow:hidden;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;color:var(--bronze);
  font-family:var(--serif);font-size:56px;font-style:italic;font-weight:500
}
.tm-photo::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08) 0%,transparent 60%)
}
.tm-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block
}
/* Render uploaded team photos in monochrome — keeps the team grid
   tonally consistent with the rest of the site. Initial-letter
   placeholders (no data-photo-id) keep their bronze tone. */
.tm-photo[data-photo-id]{filter:grayscale(1)}
.tm-photo[data-photo-id="mohammed-parvez"] img{object-position:center 58%}
.tm-photo[data-photo-id="riddhi"] img,
.tm-photo[data-photo-id="vandana"] img,
.tm-photo[data-photo-id="prachi"] img,
.tm-photo[data-photo-id="akruti"] img,
.tm-photo[data-photo-id="rachna"] img,
.tm-photo[data-photo-id="devangi"] img,
.tm-photo[data-photo-id="kimaya"] img{object-position:center 46%}
.tm h4{font-size:17px;color:var(--coffee);margin-bottom:2px;font-weight:500}
.tm .role{font-size:11px;color:var(--rust);letter-spacing:.18em;text-transform:uppercase}

/* ============ ALLHOME GROUP ============ */
.allhome-group{
  padding:110px 0;background:var(--bone);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center
}
.allhome-group .eyebrow{display:inline-block;margin-bottom:16px}
.allhome-group h3{
  font-family:var(--serif);font-size:38px;letter-spacing:-.015em;color:var(--coffee);
  font-weight:500;margin-bottom:16px
}
.allhome-group h3 em{font-style:italic;color:var(--bronze);font-weight:400}
.allhome-group .section-lead{
  max-width:620px;margin:0 auto 48px;color:var(--muted);font-size:15px;line-height:1.75
}
.allhome-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:64px;
  padding:20px 0
}
.allhome-logos img{
  max-height:68px;max-width:200px;object-fit:contain;opacity:.8;
  transition:opacity .3s ease, transform .3s ease
}
.allhome-logos img:hover{opacity:1;transform:scale(1.04)}
.allhome-credit{
  display:inline-flex;align-items:center;gap:24px;
  padding:8px 4px
}
.allhome-credit-by{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--coffee);letter-spacing:.02em;line-height:1
}
.allhome-credit-rule{
  display:inline-block;width:1px;height:30px;
  background:var(--bronze);opacity:.55
}
.allhome-credit-logo{
  display:block;height:48px;width:auto;max-width:220px;object-fit:contain
}
@media (max-width:640px){
  .allhome-credit{gap:18px}
  .allhome-credit-by{font-size:18px}
  .allhome-credit-rule{height:24px}
  .allhome-credit-logo{height:38px}
}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:rgba(255,255,255,.8);padding:90px 0 40px}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:60px;margin-bottom:60px}
.footer-brand .logo{font-family:var(--serif);font-size:36px;color:#fff;margin-bottom:12px;font-weight:500;display:flex;align-items:center}
.footer-brand .logo em{font-style:italic;color:var(--bronze)}
.footer-brand .logo img{display:block;height:58px;width:auto;max-width:280px;object-fit:contain;filter:brightness(0) invert(1)}
.footer-brand .tag{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:15px;letter-spacing:.04em;margin-bottom:24px}
.footer-brand p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.56);max-width:320px}
.footer-col h5{
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;margin-bottom:22px;font-weight:600
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{font-size:14px;color:rgba(255,255,255,.58);transition:color .3s}
.footer-col a:hover{color:var(--bronze)}
.footer-contact .row{margin-bottom:16px;font-size:14px}
.footer-contact .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.footer-contact a{color:#fff}
.footer-contact .socials-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.footer-contact .social-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.78);background:transparent;
  transition:border-color .3s, color .3s, background-color .3s, transform .3s
}
.footer-contact .social-link:hover{
  border-color:var(--bronze);color:var(--bronze);
  background:rgba(192,154,108,.06);transform:translateY(-1px)
}
.footer-contact .social-link svg{flex-shrink:0}

.footer-affiliates{padding:40px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);text-align:center}
.aff-label{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(255,255,255,.6);margin-bottom:20px}
.aff-label em{color:var(--bronze);font-weight:500;font-style:italic;font-size:22px;padding:0 8px}
.aff-brands{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.aff-brand{
  font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:rgba(255,255,255,.55);
  padding:8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:3px;
  transition:all .3s
}
.aff-brand:hover{color:var(--bronze);border-color:var(--bronze)}
.footer-bottom{padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:12px;color:rgba(255,255,255,.4)}
.footer-bottom-right{display:flex;align-items:center;gap:22px}
.footer-bottom-right .made-in{color:rgba(255,255,255,.4)}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .about-wrap,.why-content,.finishes-head,.studio-head,.faq-wrap,.presence-wrap{grid-template-columns:1fr}
  .faq-head{position:static}
  .faq-contact{margin-top:28px}
  .faq-wrap{gap:40px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid,.finishes-grid,.studio-locations,.dl-grid{grid-template-columns:repeat(2,1fr)}
  .studio-card:not(:nth-child(3n)){border-right:none;padding-right:0}
  .studio-card:nth-child(3n+2),.studio-card:nth-child(3n){padding-left:0}
  .studio-card:nth-child(2n+1){border-right:1px solid var(--line);padding-right:28px}
  .studio-card:nth-child(2n){padding-left:28px}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .client:not(:nth-child(3n)){border-right:none}
  .client:nth-child(2n+1){border-right:1px solid var(--line)}
  .collab-grid{grid-template-columns:repeat(3,1fr)}
  .team-lead{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .booking-panel{grid-template-columns:1fr}
  .why::before{mask-image:none;-webkit-mask-image:none;opacity:.18}
  .about-img{height:480px}
  .presence-wrap{gap:50px}
  .why-pillars{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  /* nav-links is gone, so space-between would strand the CTA mid-bar.
     Push it right so it groups with the hamburger. */
  .nav-cta{margin-left:auto}
  .nav-toggle{margin-left:14px}
}
@media (max-width:680px){
  .container{padding:0 22px}
  .hero{min-height:620px}
  .services-grid,.finishes-grid,.studio-locations,.dl-grid,.team-lead,.collab-grid,.clients-grid{grid-template-columns:1fr!important}
  .studio-card,.client{border-right:none!important;padding-left:22px!important;padding-right:22px!important}
  .stats-grid,.form-row{grid-template-columns:1fr;gap:18px}
  .section-title{font-size:34px}
  .finish-card.wide{grid-column:auto}
  .about,.services,.finishes,.why,.clients,.collab,.presence,.studio,.downloads,.faq,.team{padding:90px 0}
  .booking-form{padding:32px 24px}
}

/* ============ MOBILE POLISH ============
   Targeted fixes for layout issues that only surface at phone widths:
   awkward centered prose, orphan borders in single-column grids, and
   desktop-scale padding that eats too much of a narrow viewport. */
@media (max-width:680px){
  /* Artists: keep headline + italic lede centered, but left-align the
     body paragraphs — centered multi-line prose at 360px reads as clutter. */
  .artists-text{text-align:left}
  .artists-text .eyebrow,
  .artists-text .section-title,
  .artists-text p.lede{text-align:center}
  .artists-text p{max-width:none;margin-left:0;margin-right:0}

  /* Design studios / collaborators: 3 columns on mobile so the 30+ firm
     names don't stretch into a 30-row column. Small uniform tiles — just
     a logo or short name each — pack cleanly at ~110px width. Inner grid
     dividers restored (the 1-column rule had removed them). */
  .collab-grid{grid-template-columns:repeat(3,1fr)!important}
  .collab-item{
    padding:20px 8px;min-height:92px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)
  }
  .collab-item:nth-child(3n){border-right:none}
  .collab-item:nth-last-child(-n+3){border-bottom:none}
  .collab-item img{max-height:34px}
  .collab-item .collab-name{font-size:9px;letter-spacing:.1em;margin-top:8px;line-height:1.25}
  .collab-item.no-logo .collab-name{font-size:11.5px;letter-spacing:.02em}

  /* Studio-experience card: desktop padding wastes mobile width. */
  .studio-experience{padding:54px 26px;min-height:0;margin-top:56px}
  .studio-experience h3{font-size:28px;line-height:1.15}
  .studio-experience p{font-size:14px}

  /* Finishes head: the 80px gap becomes an awkward void once stacked. */
  .finishes-head{gap:22px;margin-bottom:46px}
  .finishes-head h2{font-size:clamp(30px,8vw,44px)}

  /* FAQ contact card: softer internal padding on small screens. */
  .faq-contact{padding:26px 22px}
  .faq-contact strong{font-size:19px}

  /* Process step copy: the .step p had max-width:none already, but the
     cascade was leaving a stray max-width — make sure prose fills. */
  .step p{font-size:13.5px}

  /* 8 service cards on phones: show as 2 columns × 4 rows instead of one
     tall 1×8 column. Roughly halves the scroll distance, and the smaller
     tiles read as a neat contact-sheet of options. Typography and padding
     scaled down so the card titles still fit cleanly at ~150px width. */
  .services-grid{grid-template-columns:repeat(2,1fr)!important}
  .service-card{padding:28px 14px;min-height:172px}
  .service-card .ico{font-size:28px;margin-bottom:10px}
  .service-card h3{font-size:14.5px;line-height:1.22;margin-bottom:6px}
  .service-card p{font-size:11.5px;line-height:1.55}
  .service-card .svc-more{font-size:9.5px;letter-spacing:.18em;margin-top:8px}

  /* Client cards: 2×3 instead of 1×6 — same compact-grid treatment as
     the services section. Reinstates the single inner vertical divider
     (between columns) and a horizontal divider between rows, both killed
     by the earlier 1-col mobile rule. */
  .clients-grid{grid-template-columns:repeat(2,1fr)!important}
  .client{padding:24px 16px 26px!important;border-right:none!important}
  .client:nth-child(2n+1){border-right:1px solid var(--line)!important}
  .client .role{font-size:9.5px;letter-spacing:.18em;margin-bottom:8px}
  .client h4{font-size:17px;line-height:1.18;margin-bottom:8px}
  .client p{font-size:12.5px;line-height:1.55;max-width:none}

  /* Team photos: 3-column grid with compact square tiles. With 13 cards
     this trims the team section by ~40% of its previous mobile height
     while keeping faces readable. !important needed to override the
     inline grid-template-columns / font-size on the second hardcoded
     row and the inline col count from the dynamic hydration grid. */
  .team-lead{grid-template-columns:repeat(3,1fr)!important;gap:14px 10px}
  .tm-photo{aspect-ratio:1/1;font-size:26px!important;margin-bottom:8px}
  .tm h4{font-size:13px;line-height:1.2;margin-bottom:1px}
  .tm .role{font-size:9px;letter-spacing:.14em}

  /* About stats: 2x2 instead of 1x4 on mobile so the four metrics
     (30+, 2000+, 6,709, 4) fit in two compact rows. Already 2x2 on
     tablet — bringing phones in line. */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:24px 16px}
  .stat .n{font-size:36px}
  .stat .l{font-size:10px;letter-spacing:.16em}

  /* Nav: shrink the bigger logo slightly so it shares space cleanly
     with the BOOK A VISIT button + hamburger on a 375px viewport. */
  .nav{padding:14px 20px}
  .nav.scrolled{padding:10px 20px}
  .nav-logo{font-size:24px}
  .nav-logo img{height:48px;max-width:200px}
  .nav.scrolled .nav-logo img{height:42px}
  .nav-cta{padding:8px 16px;font-size:11px;letter-spacing:.08em}

  /* Mobile scroll perf: backdrop-filter blurs on fixed/absolute elements
     are the largest cause of mweb scroll stutter — every frame the GPU
     re-blurs the live content underneath. The nav scrolled-state bg is
     already 96% opaque, so dropping the blur is visually negligible.
     Hero / about badges drop the blur for the same reason. */
  .nav.scrolled{background:rgba(255,253,249,1);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-badge{backdrop-filter:none;-webkit-backdrop-filter:none}
  .about-badge{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Footer: stacking all four blocks vertically created an excessive
     scroll tail on phones. Keep a 2-column rhythm so the link lists
     read side-by-side; brand and contact span full width. */
  .footer{padding:64px 0 32px}
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:36px 22px;margin-bottom:40px
  }
  .footer-brand,
  .footer-col.footer-contact{grid-column:1 / -1}
  .footer-brand p{max-width:none}
  .footer-col h5{margin-bottom:14px}
  .footer-col ul{gap:10px}
  .footer-col a{font-size:13.5px}
}

/* ============ SECTION BREAKERS (PULL QUOTES) ============ */
.breaker{
  padding:120px 0;position:relative;overflow:hidden;text-align:center;
}
.breaker .container{position:relative;z-index:2}
.breaker .mark{
  font-family:var(--serif);font-size:72px;color:var(--bronze);line-height:0;
  display:inline-block;margin-bottom:30px;opacity:.6
}
.breaker h3{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(38px,6vw,82px);margin:0 auto;max-width:1000px
}
.breaker h3 em{font-style:italic;color:var(--rust);font-weight:400}
.breaker .sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.8vw,22px);
  color:var(--rust);margin-top:28px;max-width:640px;margin-left:auto;margin-right:auto
}

/* Variant A: light on cream with thin rules */
.breaker-light{background:var(--bone)}
.breaker-light::before, .breaker-light::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:60px;height:1px;background:var(--bronze)
}
.breaker-light::before{top:60px}
.breaker-light::after{bottom:60px}
.breaker-light h3{color:var(--coffee)}

/* Rotating breaker quote */
.breaker-rotator{
  position:relative;display:inline-block;width:100%;
  min-height:clamp(110px,18vw,230px)
}
.breaker-rotator h3{
  position:absolute;left:0;right:0;top:0;margin:0 auto;
  opacity:0;transform:translateY(12px);
  transition:opacity .7s ease, transform .8s ease;
  pointer-events:none
}
.breaker-rotator h3.is-active{
  opacity:1;transform:translateY(0);pointer-events:auto
}

/* Variant B: dark on cocoa with image accent */
.breaker-dark{background:var(--cocoa);color:#fff}
.breaker-dark::before{
  content:'';position:absolute;inset:0;opacity:.22;
  background:url('images/int-calceterra-zinc.jpg') center/cover no-repeat;
}
.breaker-dark h3{color:#fff}
.breaker-dark h3 em{color:var(--bronze)}
.breaker-dark .sub{color:var(--bronze)}
.breaker-dark .mark{color:var(--bronze)}

/* Variant C: quiet cream serif-only */
.breaker-quiet{background:var(--cream);padding:100px 0}
.breaker-quiet h3{color:var(--coffee);font-size:clamp(30px,4vw,54px)}
.breaker-quiet h3 em{color:var(--rust)}
.breaker-quiet .rule{display:block;width:1px;height:40px;background:var(--bronze);margin:0 auto 28px}

/* ============ STUDIO EXPERIENCE (post-modal) ============ */
.studio-experience{
  margin-top:80px;background:var(--cocoa) url('images/int-calceterra-beige.jpg') center/cover no-repeat;
  color:#fff;padding:80px 64px;border-radius:4px;position:relative;overflow:hidden;
  min-height:420px;display:flex;align-items:center
}
.studio-experience::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(43,26,16,.92) 0%, rgba(43,26,16,.72) 55%, rgba(43,26,16,.4) 100%)
}
.studio-experience .se-text{position:relative;z-index:2;max-width:620px}
.studio-experience .eyebrow{color:var(--bronze);margin-bottom:18px;display:block}
.studio-experience h3{font-family:var(--serif);color:#fff;font-size:42px;font-weight:500;line-height:1.08;margin-bottom:20px}
.studio-experience p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.75;margin-bottom:24px;max-width:540px}
.studio-experience ul{list-style:none;padding:0;margin-bottom:10px}
.studio-experience li{
  padding:10px 0;color:rgba(255,255,255,.92);font-size:14px;
  display:flex;gap:14px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.12)
}
.studio-experience li:last-child{border-bottom:none}
.studio-experience li::before{content:'—';color:var(--bronze)}
@media(max-width:900px){
  .studio-experience{padding:56px 32px;min-height:auto}
  .studio-experience h3{font-size:30px}
}

/* ============ BOOKING MODAL ============ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(26,17,10,.55);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .35s ease;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--paper);max-width:680px;width:100%;max-height:92vh;overflow-y:auto;
  border-radius:6px;box-shadow:0 40px 100px -20px rgba(26,17,10,.5);
  position:relative;transform:translateY(20px) scale(.98);transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.modal-overlay.open .modal{transform:none}
.modal-header{
  padding:36px 40px 20px;border-bottom:1px solid var(--line);position:relative
}
.modal-header .eyebrow{color:var(--rust);margin-bottom:10px;display:block}
.modal-header h3{font-family:var(--serif);font-size:28px;color:var(--coffee);font-weight:500;line-height:1.2;margin-bottom:6px}
.modal-header p{font-size:13px;color:var(--muted);margin:0}
.modal-close{
  position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid var(--line);color:var(--muted);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background .25s,color .25s,border-color .25s,transform .25s
}
.modal-close:hover{background:var(--cream);color:var(--coffee);border-color:var(--bronze);transform:rotate(90deg)}
.modal-body{padding:28px 40px 36px}
.modal-body .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.modal-body .form-field{display:flex;flex-direction:column}
.modal-body .form-field.full{grid-column:1/-1}
.modal-body label{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;font-weight:500
}
.modal-body input,.modal-body select,.modal-body textarea{
  background:var(--bone);border:1px solid transparent;border-radius:3px;
  padding:13px 14px;font-family:var(--sans);font-size:14px;color:var(--coffee);
  transition:border-color .25s, background .25s
}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{
  outline:none;border-color:var(--bronze);background:var(--paper)
}
.modal-body textarea{min-height:90px;resize:vertical}
.modal-body .btn-submit{
  width:100%;background:var(--coffee);color:#fff;border:none;padding:16px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  border-radius:3px;cursor:pointer;margin-top:8px;
  transition:background .3s,transform .3s
}
.modal-body .btn-submit:hover{background:var(--cocoa);transform:translateY(-1px)}
.modal-success{
  display:none;padding:28px;background:var(--pastel-sage);border-radius:4px;margin-top:18px;
  border-left:3px solid var(--sage-ink)
}
.modal-success.show{display:block}
.modal-success > strong{
  font-family:var(--serif);font-size:19px;color:var(--coffee);display:block;margin-bottom:8px;font-weight:500
}
.modal-success > span{font-size:13.5px;color:var(--muted);line-height:1.7;display:block}
.modal-success > span strong{color:var(--coffee);font-weight:600}

/* Role-pill radio group (used in download gate) */
.role-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.role-pills input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.role-pills label{margin:0;cursor:pointer}
.role-pills label span.pill{
  display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:40px;
  background:var(--bone);color:var(--muted);font-size:12px;letter-spacing:.12em;
  font-weight:500;transition:all .2s;text-transform:none
}
.role-pills label:hover span.pill{border-color:var(--bronze);color:var(--coffee)}
.role-pills input[type=radio]:checked + span.pill{
  background:var(--coffee);color:#fff;border-color:var(--coffee)
}
.role-pills input[type=radio]:focus-visible + span.pill{
  outline:2px solid var(--bronze);outline-offset:2px
}
.consent-check{
  display:flex;gap:10px;align-items:flex-start;margin-top:-2px;
  font-size:12.5px;line-height:1.55;color:var(--muted);
  letter-spacing:0;text-transform:none;font-weight:400
}
.consent-check input{
  width:16px;height:16px;margin-top:2px;accent-color:var(--coffee);flex-shrink:0
}

/* Gate choice step (after form submit) */
.gate-choice{display:none;text-align:center;padding:8px 0 4px}
.gate-choice.show{display:block}
.gate-choice .gate-greet{
  font-family:var(--serif);font-size:22px;color:var(--coffee);font-weight:500;
  line-height:1.3;margin-bottom:8px
}
.gate-choice .gate-asset{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:22px;display:block
}
.gate-choice .gate-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.gate-choice.email-only .gate-actions{grid-template-columns:1fr}
.gate-choice .gate-btn{
  padding:15px 18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  border-radius:3px;cursor:pointer;border:1px solid var(--coffee);transition:all .25s;font-family:var(--sans)
}
.gate-choice .gate-btn.primary{background:var(--coffee);color:#fff;border-color:var(--coffee)}
.gate-choice .gate-btn.primary:hover{background:var(--cocoa);border-color:var(--cocoa);transform:translateY(-1px)}
.gate-choice .gate-btn.ghost{background:transparent;color:var(--coffee)}
.gate-choice .gate-btn.ghost:hover{background:var(--coffee);color:#fff}
.gate-choice .gate-back{
  margin-top:18px;background:none;border:none;color:var(--muted);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;font-family:var(--sans)
}
.gate-choice .gate-back:hover{color:var(--coffee)}

@media(max-width:680px){
  .modal{border-radius:6px}
  .modal-header{padding:28px 24px 16px}
  .modal-header h3{font-size:23px}
  .modal-body{padding:22px 24px 28px}
  .modal-body .form-row{grid-template-columns:1fr;gap:14px}
  .modal-close{top:14px;right:14px;width:32px;height:32px}
  .gate-choice .gate-actions{grid-template-columns:1fr}
}

body.modal-open{overflow:hidden}

/* ============ PROCESS ============ */
.process{padding:130px 0;background:var(--bone);position:relative;overflow:hidden}
.process-head{text-align:center;max-width:680px;margin:0 auto 70px}
.process-head .eyebrow{color:var(--rust)}
.process-track{
  position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  padding-top:30px;max-width:1180px;margin:0 auto
}
.process-track::before{
  content:'';position:absolute;top:66px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,
    rgba(184,137,95,.22) 0%,
    rgba(184,137,95,.55) 50%,
    rgba(184,137,95,.85) 100%);
  z-index:1
}
.step{text-align:center;padding:0 12px;position:relative;z-index:2}
.step-dot{
  width:72px;height:72px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--bronze);display:flex;align-items:center;justify-content:center;
  margin:0 auto 26px;position:relative;
  font-family:var(--serif);font-size:22px;color:var(--coffee);font-style:italic;font-weight:500;
  box-shadow:0 8px 22px -12px rgba(61,40,23,.3);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.3), box-shadow .4s
}
.step-dot::before{
  content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid currentColor;opacity:.35
}
.step:hover .step-dot{transform:translateY(-8px) scale(1.1);box-shadow:0 14px 30px -12px rgba(61,40,23,.4)}
/* Six step-dots in a tonal warm progression — light cream at step I,
   walking through deepening tans into bronze itself by step VI. All
   anchored in the brand palette (cream, bronze, rust, coffee). The
   numeral and inner ring share var(--coffee) for unified contrast. */
.step:nth-child(1) .step-dot{background:#F8F0E0;border-color:var(--bronze);color:var(--coffee)}
.step:nth-child(2) .step-dot{background:#EFDFC0;border-color:var(--bronze);color:var(--coffee)}
.step:nth-child(3) .step-dot{background:#E3CAA0;border-color:var(--bronze);color:var(--coffee)}
.step:nth-child(4) .step-dot{background:#D2B384;border-color:var(--bronze);color:var(--coffee)}
.step:nth-child(5) .step-dot{background:#C09971;border-color:var(--rust);color:var(--coffee)}
.step:nth-child(6) .step-dot{background:#A87E5A;border-color:var(--rust);color:var(--coffee)}
.step h4{font-family:var(--serif);font-size:19px;color:var(--coffee);margin-bottom:10px;font-weight:500;line-height:1.25}
.step p{font-size:12.5px;color:var(--muted);line-height:1.65;max-width:190px;margin:0 auto}
@media(max-width:1100px){
  .process-track{grid-template-columns:repeat(3,1fr);row-gap:56px}
  .process-track::before{display:none}
}
@media(max-width:680px){
  .process{padding:90px 0}
  /* Bring the stacked steps back together as a single flowing timeline:
     a vertical bronze rule threads through the centre of every dot. */
  .process-track{
    grid-template-columns:1fr;row-gap:34px;max-width:440px;
    padding:6px 4px 0;position:relative
  }
  .process-track::before{
    display:block;content:'';
    top:32px;bottom:32px;left:calc(4px + 32px);right:auto;
    width:1px;height:auto;
    background:linear-gradient(180deg,
      rgba(184,137,95,.22) 0%,
      rgba(184,137,95,.55) 50%,
      rgba(184,137,95,.85) 100%);
    opacity:1
  }
  /* Two-column grid: dot on the left spanning both rows, title + body
     stacked in the right column. The previous version had only 2 columns
     and 3 children, so the <p> wrapped into the 64px dot column and each
     word broke onto its own line. */
  .step{
    display:grid;
    grid-template-columns:64px 1fr;
    column-gap:20px;row-gap:6px;
    text-align:left;padding:0;align-items:center
  }
  .step-dot{
    grid-column:1;grid-row:1 / span 2;align-self:center;
    margin:0;width:64px;height:64px;font-size:20px;
    box-shadow:0 6px 18px -10px rgba(61,40,23,.35)
  }
  /* Quieten the decorative inner ring at small dot sizes. */
  .step-dot::before{inset:4px;opacity:.22}
  .step h4{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:17px}
  .step p{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:none;font-size:13.5px;line-height:1.6}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ============ SCROLL-PERF: off-screen sections skip rendering ============
   content-visibility: auto tells the browser it can skip layout/paint for
   these sections while they're outside the viewport, then render them the
   moment the visitor scrolls near them. contain-intrinsic-size reserves
   a sensible placeholder height so the scrollbar doesn't jump while
   content is being skipped. "auto" in the first slot lets the browser
   remember the last rendered size and reuse it.
   Hero and About are intentionally excluded (they're above the fold or
   close to it, so skipping offers nothing). Small breakers are excluded
   because their reveal animations benefit from being fully rendered. */
section.services,
section.finishes,
section.why,
section.process,
section.artists,
section.clients,
section.collab,
section.faq,
section.downloads,
section.studio,
section.team,
section.allhome-group,
#serviceDetails{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px
}
    .partner-cta{background:var(--cocoa);color:#fff;padding:90px 0;position:relative;overflow:hidden}
    .partner-cta::before{
      content:'';position:absolute;inset:0;
      background:url('images/hero-cover.jpg') center/cover no-repeat;opacity:.14
    }
    .partner-cta .container{position:relative;z-index:1;text-align:center;max-width:820px}
    .partner-cta .eyebrow{color:var(--bronze)}
    .partner-cta h2{
      color:#fff;font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin-bottom:14px
    }
    .partner-cta h2 em{font-style:italic;color:var(--bronze);font-weight:400}
    .partner-cta p{
      color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.7;
      max-width:560px;margin:0 auto
    }
    .partner-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
    .partner-cta .btn-bronze{
      display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:40px;
      font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
      background:var(--bronze);color:#fff;transition:all .3s ease
    }
    .partner-cta .btn-bronze:hover{background:#fff;color:var(--coffee);transform:translateY(-2px)}
    .partner-cta .btn-line{
      display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:40px;
      font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
      border:1px solid rgba(255,255,255,.4);color:#fff;transition:all .3s ease
    }
    .partner-cta .btn-line:hover{background:#fff;color:var(--coffee);border-color:#fff}
    @media(max-width:680px){
      .partner-cta{padding:64px 0}
      .partner-cta .container{padding:0 22px}
    }