/* ============================================================
   SELF-HOSTED TYPE
   Fraunces and Manrope are distributed under the SIL Open Font
   License; copies are included in assets/fonts/licenses/.
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   LJUBA COMPANY — DESIGN TOKENS
   ============================================================ */
:root{
  --c-black:#0A0908;
  --c-warm-black:#121009;
  --c-charcoal:#1E1B15;
  --c-charcoal-2:#2A2519;
  --c-gold:#C9A567;
  --c-gold-light:#E7D6AC;
  --c-gold-dim:#8B723F;
  --c-gold-text-dark:#B89A61;
  --c-gold-text-light:#6F592F;
  --c-beige:#EFE8DA;
  --c-stone:#A9A192;
  --c-ivory:#F5F0E6;
  --c-white:#FFFFFF;
  --c-line: rgba(201,165,103,0.28);

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .35s;
  --dur-m: .7s;
  --dur-l: 1.1s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:84px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-ivory);
  font-family:var(--font-sans);
  font-weight:400;
  -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; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

.eyebrow{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-gold);
}
.eyebrow.on-light{ color:var(--c-gold-text-light); }

.hairline{
  width:64px; height:1px;
  background:linear-gradient(90deg, var(--c-gold), transparent);
}
.hairline.center{ margin-inline:auto; background:linear-gradient(90deg, transparent, var(--c-gold), transparent); width:120px; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--c-gold); color:var(--c-black); padding:.85em 1.4em;
  font-weight:700; letter-spacing:.05em;
}
.skip-link:focus{ left:12px; top:12px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--c-gold);
  outline-offset:3px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2.1em;
  font-family:var(--font-sans); font-weight:700; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  min-height:48px;
}
.btn-gold{ background:var(--c-gold); color:var(--c-black); }
.btn-gold:hover{ background:var(--c-gold-light); }
.btn-outline{ border-color:var(--c-gold); color:var(--c-gold-light); background:transparent; }
.btn-outline:hover{ background:rgba(201,165,103,.1); }
.btn-ghost{ border-color:rgba(245,240,230,.35); color:var(--c-ivory); background:transparent; }
.btn-ghost:hover{ border-color:var(--c-gold); color:var(--c-gold-light); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

/* Corner bracket motif — architectural drafting marks (signature element) */
.brackets{ position:relative; }
.brackets::before, .brackets::after{
  content:''; position:absolute; width:34px; height:34px;
  border-color:var(--c-gold); opacity:.85; pointer-events:none;
}
.brackets::before{ top:0; left:0; border-top:1px solid; border-left:1px solid; }
.brackets::after{ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
.brackets.on-light::before, .brackets.on-light::after{ border-color:var(--c-gold-dim); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200;
  padding:18px 0;
  transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  /* An almost-opaque fill looks like the former blur without forcing browsers
     to re-sample every photograph underneath the fixed header while scrolling. */
  background:rgba(10,9,8,.96);
  padding:12px 0;
  border-color:var(--c-line);
}
.site-header.menu-open{
  transition:none;
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand-main{
  font-family:var(--font-sans); font-weight:800; font-size:1.32rem;
  letter-spacing:.03em; color:var(--c-gold-light);
}
.brand-sub{
  font-family:var(--font-sans); font-weight:500; font-size:.56rem;
  letter-spacing:.5em; color:var(--c-gold-text-dark); margin-top:5px; padding-left:2px;
}

.main-nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.main-nav a{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-ivory); position:relative; padding:6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--c-gold);
  transition:right var(--dur-s) var(--ease);
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ right:0; }

.lang-switch{ display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.lang-switch button{
  background:none; border:none; color:var(--c-stone); padding:4px 6px;
}
.lang-switch button[aria-pressed="true"]{ color:var(--c-gold); }
.lang-switch .sep{ color:var(--c-line); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; flex-direction:column; align-items:flex-end; }
.header-phone .num{ font-family:var(--font-serif); font-size:1rem; color:var(--c-ivory); }
.header-phone .lbl{ font-size:.62rem; letter-spacing:.16em; color:var(--c-gold-text-dark); text-transform:uppercase; }

.nav-toggle{
  display:none; background:none; border:1px solid rgba(245,240,230,.3); border-radius:var(--radius);
  width:44px; height:44px; align-items:center; justify-content:center; position:relative;
}
.nav-toggle span{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--c-ivory);
  transform:translate(-50%,-50%);
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--c-ivory);
  transform-origin:center;
  transition:transform var(--dur-s), opacity var(--dur-s);
}
.nav-toggle span::before{ transform:translateY(-6px); }
.nav-toggle span::after{ transform:translateY(6px); }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg); }

@media (max-width:900px){
  .main-nav{
    position:fixed;
    inset:auto;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100svh;
    z-index:150;
    background:var(--c-warm-black);
    flex-direction:column; justify-content:center; align-items:center; gap:34px;
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
  }
  .main-nav.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .main-nav a{ font-size:1.1rem; }
  .header-phone{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media picture,
.hero-media img{ width:100%; height:100%; display:block; }
.hero-media img{ object-fit:cover; object-position:center 30%; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 52% 58% at 24% 56%, rgba(201,165,103,.105), transparent 72%),
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.35) 32%, rgba(10,9,8,.55) 62%, rgba(10,9,8,.94) 100%),
    linear-gradient(90deg, rgba(10,9,8,.5) 0%, transparent 40%);
}
.hero-inner{
  position:relative; z-index:1; width:100%;
  padding-block: 160px 96px;
}
.hero-frame{ position:relative; padding:44px; }
.hero-frame::before, .hero-frame::after{
  content:''; position:absolute; width:46px; height:46px; border-color:var(--c-gold); opacity:.9;
}
.hero-frame::before{ top:0; left:0; border-top:1px solid; border-left:1px solid; }
.hero-frame::after{ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }

.hero .eyebrow{ display:block; margin-bottom:22px; }
.hero h1{
  font-family:var(--font-serif); font-weight:500; font-style:normal;
  font-size:clamp(2.4rem, 6.4vw, 5.4rem);
  line-height:1.04; letter-spacing:-.01em; color:var(--c-white);
  max-width:16ch;
}
.hero h1 em{ font-style:italic; color:var(--c-gold-light); font-weight:400; }
.hero p.sub{
  margin-top:26px; max-width:46ch; font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--c-beige); font-weight:400; line-height:1.6;
}
.hero-actions{ margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; gap:28px; }
.hero-phone-link{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-size:1.15rem; color:var(--c-gold-light); }
.hero-phone-link svg{ width:18px; height:18px; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--c-stone); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(180deg, var(--c-gold), transparent); animation:cueMove 2.2s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ transform:scaleY(.6); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue .line{ animation:none; } }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.hero .reveal{ opacity:1; transform:none; }
.reveal-delay-1.in{ transition-delay:.12s; }
.reveal-delay-2.in{ transition-delay:.24s; }
.reveal-delay-3.in{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   MEGA HEADING — one big statement, no eyebrow, no subtext.
   Used for every section title site-wide (hero excluded, it has
   its own treatment). The corner-bracket frame echoes the hero.
   ============================================================ */
.section-head-minimal{ margin-bottom:clamp(50px,7.5vw,100px); position:relative; }
.section-head-minimal.center{ margin-inline:auto; text-align:center; max-width:820px; }
.framed{ padding:38px 42px; display:inline-block; }
.section-head-minimal.framed{ display:block; }
.mega-heading{
  font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1.03;
  color:var(--c-ivory);
}
.mega-heading.on-light{ color:var(--c-warm-black); }

.portfolio-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(40px,6vw,72px);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--c-beige); color:var(--c-warm-black); padding-block:clamp(90px,10vw,140px); }
.service-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,80px);
  padding-block:clamp(46px,6vw,76px);
  border-top:1px solid rgba(30,27,21,.12);
}
.service-row:last-child{ border-bottom:1px solid rgba(30,27,21,.12); }
.service-row:nth-child(even) .service-media{ order:2; }
.service-media{ position:relative; overflow:hidden; aspect-ratio:4/5; contain:paint; }
.service-media picture,
.service-media img{ width:100%; height:100%; display:block; }
.service-media img{ object-fit:cover; transition:transform 1.4s var(--ease); }
.service-row:hover .service-media img{ transform:scale(1.045); }
.service-media::after{
  content:''; position:absolute; inset:0; border:1px solid var(--c-gold-dim); opacity:.35; pointer-events:none;
}
.service-text .eyebrow{ color:var(--c-gold-text-light); }
.service-text h3{
  font-family:var(--font-serif); font-weight:500; font-size:clamp(1.7rem,2.6vw,2.5rem);
  color:var(--c-warm-black); margin-top:16px;
}
.service-text .hairline{ margin:22px 0; background:linear-gradient(90deg, var(--c-gold-dim), transparent); }
.service-text p{ color:#4A4335; font-size:1.02rem; line-height:1.7; max-width:42ch; }

@media (max-width:820px){
  .service-row, .service-row:nth-child(even){ grid-template-columns:1fr; }
  .service-row:nth-child(even) .service-media{ order:0; }
  .service-media{ aspect-ratio:16/11; }
}

/* ============================================================
   PORTFOLIO — swipeable gallery
   ============================================================ */
.portfolio{ background:var(--c-black); padding-block:clamp(90px,10vw,140px); overflow:hidden; }
.gallery-controls{ display:flex; gap:12px; }
.gallery-btn{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center; background:transparent; color:var(--c-gold-light);
  transition:background var(--dur-s), border-color var(--dur-s);
}
.gallery-btn:hover{ background:rgba(201,165,103,.12); border-color:var(--c-gold); }
.gallery-btn svg{ width:18px; height:18px; }

.gallery-viewport{ margin-top:10px; }
.gallery-track{
  display:flex; gap:clamp(14px,2vw,26px);
  overflow-x:auto; scroll-behavior:auto;
  padding:6px var(--gutter) 26px; margin:0 calc(var(--gutter) * -1);
  cursor:grab; user-select:none;
  scrollbar-width:none;
}
.gallery-track.dragging{ cursor:grabbing; }
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-slide{
  flex:none; position:relative; overflow:hidden;
  height:clamp(320px,52vw,620px);
  background:var(--c-charcoal);
  contain:paint;
}
.gallery-slide picture{ height:100%; display:block; }
.gallery-slide img{ height:100%; width:auto; max-width:none; object-fit:cover; pointer-events:none; }
.gallery-slide.wide picture,
.gallery-slide.wide img{ width:clamp(360px,58vw,760px); object-fit:cover; }
.gallery-slide.tall img{ width:auto; }
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 22px 18px;
  background:linear-gradient(0deg, rgba(10,9,8,.85), transparent);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-gold-light);
  opacity:0; transform:translateY(8px); transition:opacity var(--dur-s), transform var(--dur-s);
}
.gallery-slide:hover .slide-caption, .gallery-slide:focus-within .slide-caption{ opacity:1; transform:translateY(0); }

/* ============================================================
   TRANSFORMATION (before/after)
   ============================================================ */
.transform-section{ background:var(--c-warm-black); padding-block:clamp(90px,10vw,140px); }
.ba-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
  max-width:980px; margin-inline:auto;
}
.ba-panel{ display:flex; flex-direction:column; }
.ba-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--c-line);
  background:var(--c-charcoal); touch-action:pan-y; contain:paint;
}
.ba-before,
.ba-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-labels{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; pointer-events:none; z-index:2; }
.ba-labels span{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-ivory);
  background:rgba(10,9,8,.5); padding:.4em .7em;
}
.ba-range{
  position:absolute; left:5%; right:5%; bottom:14px; z-index:3;
  width:90%; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:ew-resize; height:34px;
}
.ba-range::-webkit-slider-runnable-track{ height:2px; background:rgba(245,240,230,.4); }
.ba-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; margin-top:-15px;
  background:var(--c-gold); border:3px solid var(--c-black); box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.ba-range::-moz-range-track{ height:2px; background:rgba(245,240,230,.4); }
.ba-range::-moz-range-thumb{
  width:32px; height:32px; border-radius:50%; background:var(--c-gold); border:3px solid var(--c-black);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.ba-caption{ margin-top:16px; text-align:center; font-size:.92rem; color:var(--c-stone); }
@media (max-width:700px){ .ba-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TRUST / WHY SECTION (non-numeric)
   ============================================================ */
.trust{ background:var(--c-beige); color:var(--c-warm-black); padding-block:clamp(80px,9vw,120px); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,10px); margin-top:10px; }
.trust-item{ padding:34px clamp(10px,3vw,30px); border-left:1px solid rgba(30,27,21,.16); }
.trust-item:first-child{ border-left:none; }
.trust-item h3{ font-family:var(--font-serif); font-size:1.4rem; font-weight:500; margin-bottom:14px; }
.trust-item p{ color:#4A4335; line-height:1.7; font-size:.98rem; }
@media (max-width:760px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item{ border-left:none; border-top:1px solid rgba(30,27,21,.16); }
  .trust-item:first-child{ border-top:none; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--c-black); padding-block:clamp(90px,10vw,150px); position:relative; }
.contact-grid{ display:block; }
.contact-head{ max-width:980px; }
.contact-head .mega-heading{ margin-bottom:6px; }
.contact-actions{ margin-top:44px; display:flex; flex-wrap:wrap; gap:16px; }
.contact-meta{ margin-top:46px; display:flex; flex-direction:column; gap:14px; }
.contact-meta-row{ display:flex; align-items:center; gap:14px; color:var(--c-beige); font-size:.98rem; }
.contact-meta-row svg{ width:18px; height:18px; color:var(--c-gold); flex:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--c-warm-black); border-top:1px solid var(--c-line); padding:64px 0 28px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:46px; }
.footer-brand .brand-main{ font-size:1.5rem; }
.footer-brand .brand-sub{ margin-top:8px; }
.footer-col h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold-text-dark); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; color:var(--c-stone); font-size:.92rem; margin-bottom:10px; }
.footer-col a:hover{ color:var(--c-gold-light); }
.footer-bottom{
  border-top:1px solid var(--c-line); padding-top:24px; display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center; font-size:.8rem; color:var(--c-stone);
}
.footer-legal{ display:flex; gap:20px; }
.footer-legal button{ background:none; border:none; color:var(--c-stone); font-size:.8rem; padding:0; }
.footer-legal button:hover{ color:var(--c-gold-light); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(10,9,8,.82); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open{ display:flex; }
.modal-overlay[aria-hidden="true"]{ display:none; }
.modal-box{ background:var(--c-warm-black); border:1px solid var(--c-line); max-width:560px; width:100%; padding:clamp(28px,4vw,44px); position:relative; max-height:82vh; overflow-y:auto; }
.modal-box h3{ font-family:var(--font-serif); font-size:1.5rem; color:var(--c-gold-light); margin-bottom:18px; padding-right:30px; }
.modal-box p{ color:var(--c-beige); line-height:1.75; margin-bottom:14px; font-size:.96rem; }
.modal-close{ position:absolute; top:20px; right:20px; background:none; border:none; color:var(--c-stone); width:32px; height:32px; }
.modal-close svg{ width:20px; height:20px; }

/* Custom cursor (desktop only, pointer:fine + hover:hover) */
.cursor-dot{
  position:fixed; width:10px; height:10px; border-radius:50%; background:var(--c-gold);
  pointer-events:none; z-index:600; transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width var(--dur-s) var(--ease), height var(--dur-s) var(--ease), opacity var(--dur-s);
  opacity:0;
}
.cursor-dot.active{ opacity:1; }
.cursor-dot.big{ width:52px; height:52px; }

@media (max-width:900px), (hover:none), (pointer:coarse){
  .cursor-dot{ display:none; }
}

/* ============================================================
   REFINEMENT PASS — premium light middle, architectural texture,
   cinematic motion, and a robust mobile menu close state.
   ============================================================ */

:root{
  --c-sand:#E9E0D1;
  --c-sand-deep:#D7CCBB;
  --c-stone-light:#DDD4C5;
  --c-ink:#17140F;
}

/* Stronger, reliable hamburger -> X state. Keep it above the full-screen menu. */
.nav-toggle{ z-index:260; }
.nav-toggle[aria-expanded="true"]{
  border-color:rgba(201,165,103,.9);
  background:rgba(201,165,103,.08);
}

@media (max-width:900px){
  .main-nav{
    text-align:center;
    padding:120px 28px 56px;
    background:
      radial-gradient(circle at 20% 22%, rgba(201,165,103,.10), transparent 25%),
      linear-gradient(rgba(201,165,103,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,165,103,.035) 1px, transparent 1px),
      var(--c-warm-black);
    background-size:auto, 56px 56px, 56px 56px, auto;
  }
  .main-nav::before,
  .main-nav::after{
    content:'';
    position:absolute;
    left:50%;
    width:min(280px,68vw);
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,165,103,.7), transparent);
    transform:translateX(-50%) scaleX(.25);
    opacity:0;
    transition:transform .8s var(--ease), opacity .8s var(--ease);
  }
  .main-nav::before{ top:29%; }
  .main-nav::after{ bottom:24%; }
  .main-nav.open::before,
  .main-nav.open::after{ transform:translateX(-50%) scaleX(1); opacity:1; }
  .main-nav a{
    width:100%;
    max-width:260px;
    text-align:center;
    font-family:var(--font-serif);
    font-size:clamp(1.45rem,6vw,2rem);
    font-weight:400;
    letter-spacing:.03em;
    text-transform:none;
  }
  .main-nav .lang-switch{
    width:100%;
    justify-content:center;
    margin-top:8px;
  }
  .main-nav.open a{
    animation:menuItemIn .62s var(--ease) both;
  }
  .main-nav.open a:nth-child(2){ animation-delay:.05s; }
  .main-nav.open a:nth-child(3){ animation-delay:.10s; }
  .main-nav.open a:nth-child(4){ animation-delay:.15s; }
  .main-nav.open .lang-switch{ animation:menuItemIn .62s .20s var(--ease) both; }
}

@keyframes menuItemIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* The hero stays exactly in the existing visual language; only the redundant number is removed. */
.hero-actions{ gap:0; }

/* ----- Light architectural middle ----- */
.services,
.portfolio,
.transform-section,
.trust{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.services > *,
.portfolio > *,
.transform-section > *,
.trust > *{
  position:relative;
  z-index:1;
}

.services{
  background:
    radial-gradient(circle at 85% 8%, rgba(201,165,103,.13), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.32), transparent 48%),
    var(--c-sand);
}
.portfolio{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.38), transparent 25%),
    radial-gradient(circle at 88% 75%, rgba(139,114,63,.12), transparent 27%),
    var(--c-sand-deep);
  color:var(--c-ink);
}
.transform-section{
  background:
    radial-gradient(circle at 80% 22%, rgba(201,165,103,.11), transparent 28%),
    linear-gradient(160deg, rgba(255,255,255,.36), transparent 55%),
    var(--c-stone-light);
}
.trust{
  background:
    radial-gradient(circle at 16% 78%, rgba(201,165,103,.12), transparent 24%),
    linear-gradient(28deg, rgba(255,255,255,.22), transparent 54%),
    #E6DDCE;
}

/* Fine drafting grid + material grain. Very low contrast on purpose. */
.services::before,
.portfolio::before,
.transform-section::before,
.trust::before{
  content:'';
  position:absolute;
  inset:-64px;
  z-index:0;
  pointer-events:none;
  opacity:.48;
  background-image:
    linear-gradient(rgba(78,64,40,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,64,40,.045) 1px, transparent 1px),
    repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  background-size:64px 64px,64px 64px,auto;
  animation:draftingDrift 28s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* One thin architectural axis per section, not a decorative border everywhere. */
.services::after,
.portfolio::after,
.transform-section::after,
.trust::after{
  content:'';
  position:absolute;
  z-index:0;
  top:12%;
  bottom:12%;
  width:1px;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(139,114,63,.30) 18%, rgba(139,114,63,.12) 70%, transparent);
}
.services::after,
.transform-section::after{ right:clamp(18px,4vw,64px); }
.portfolio::after,
.trust::after{ left:clamp(18px,4vw,64px); }

@keyframes draftingDrift{
  from{ background-position:0 0, 0 0, 0 0; }
  to{ background-position:64px 64px, 64px 64px, 20px 12px; }
}

/* Section headings get a restrained metallic draw-on line. */
.section-head-minimal::after,
.portfolio-head::after{
  content:'';
  display:block;
  width:min(220px,44vw);
  height:1px;
  margin-top:24px;
  background:linear-gradient(90deg, var(--c-gold-dim), rgba(201,165,103,.06));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s .18s var(--ease);
}
.section-head-minimal.center::after{ margin-inline:auto; transform-origin:center; }
.section-head-minimal.in::after,
.portfolio-head.in::after{ transform:scaleX(1); }

/* Services: premium editorial rhythm + subtle drafting numerals. */
.services .container{ counter-reset:serviceItem; }
.service-row{
  counter-increment:serviceItem;
  position:relative;
  z-index:1;
}
.service-row::after{
  content:'0' counter(serviceItem);
  position:absolute;
  top:clamp(28px,5vw,58px);
  right:clamp(2px,2vw,24px);
  font-family:var(--font-serif);
  font-size:clamp(4.5rem,10vw,8.5rem);
  line-height:.8;
  color:rgba(139,114,63,.075);
  letter-spacing:-.05em;
  pointer-events:none;
}
.service-row:nth-child(even)::after{ right:auto; left:clamp(2px,2vw,24px); }
.service-media{
  box-shadow:0 28px 70px rgba(55,43,26,.12);
}
.service-media::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 25%, rgba(231,214,172,.28) 48%, transparent 70%);
  transform:translateX(-120%);
  transition:transform 1.25s .18s var(--ease);
}
.service-row.in .service-media::before{ transform:translateX(120%); }
.service-row.reveal .service-media img{ transform:scale(1.065); }
.service-row.in .service-media img{ transform:scale(1); }
.service-row.in:hover .service-media img{ transform:scale(1.035); }
.service-text{ position:relative; z-index:2; }

/* Portfolio remains cinematic, but no longer becomes another black slab. */
.portfolio .mega-heading{ color:var(--c-ink); }
.portfolio-head{ position:relative; }
.gallery-btn{
  border-color:rgba(78,64,40,.24);
  color:var(--c-ink);
  background:rgba(245,240,230,.22);
  backdrop-filter:blur(4px);
}
.gallery-btn:hover{ background:rgba(245,240,230,.58); border-color:var(--c-gold-dim); }
.gallery-slide{
  box-shadow:0 24px 60px rgba(46,36,22,.14);
  border:1px solid rgba(139,114,63,.22);
}
.gallery-viewport.reveal .gallery-slide{
  opacity:.55;
  transform:translateY(24px) scale(.985);
  transition:opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease);
}
.gallery-viewport.in .gallery-slide{ opacity:1; transform:none; }
.gallery-viewport.in .gallery-slide:nth-child(2){ transition-delay:.08s; }
.gallery-viewport.in .gallery-slide:nth-child(3){ transition-delay:.16s; }
.gallery-viewport.in .gallery-slide:nth-child(4){ transition-delay:.24s; }
.gallery-slide:hover{ box-shadow:0 32px 72px rgba(46,36,22,.20); }

/* Before/after on warm stone instead of another dark band. */
.transform-section .mega-heading{ color:var(--c-ink); }
.transform-section .brackets::before,
.transform-section .brackets::after{ border-color:var(--c-gold-dim); }
.transform-section .ba-caption{ color:#4A4335; }
.ba-frame{
  box-shadow:0 28px 68px rgba(50,40,25,.14);
  border-color:rgba(139,114,63,.40);
}

/* Trust gets more authored UI without turning into cards. */
.trust-grid{ counter-reset:trustItem; }
.trust-item{
  counter-increment:trustItem;
  position:relative;
  transition:transform .5s var(--ease);
}
.trust-item::before{
  content:'0' counter(trustItem);
  display:block;
  margin-bottom:18px;
  font-family:var(--font-sans);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--c-gold-text-light);
}
.trust-item::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:42px;
  height:1px;
  background:var(--c-gold-dim);
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .55s var(--ease);
}
.trust-item:hover{ transform:translateY(-5px); }
.trust-item:hover::after{ transform:scaleX(1); }
.trust-grid.reveal .trust-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.trust-grid.in .trust-item{ opacity:1; transform:none; }
.trust-grid.in .trust-item:nth-child(2){ transition-delay:.12s; }
.trust-grid.in .trust-item:nth-child(3){ transition-delay:.24s; }

/* Cleaner transition into the intentionally black contact/footer. */
.contact::before{
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--c-line), transparent);
}

@media (max-width:820px){
  .service-row::after,
  .service-row:nth-child(even)::after{
    left:auto;
    right:2px;
    top:34px;
    font-size:5.2rem;
  }
  .services::after,
  .portfolio::after,
  .transform-section::after,
  .trust::after{ opacity:.5; }
}

@media (prefers-reduced-motion: reduce){
  .services::before,
  .portfolio::before,
  .transform-section::before,
  .trust::before{ animation:none; }
  .main-nav.open a,
  .main-nav.open .lang-switch{ animation:none; }
  .service-media::before{ display:none; }
  .gallery-viewport.reveal .gallery-slide,
  .trust-grid.reveal .trust-item{ opacity:1; transform:none; transition:none; }
}



/* ============================================================
   PREMIUM VISUAL REFINEMENT — atmosphere, rhythm, dimensionality
   Purposefully limited to previously identified visual weaknesses.
   ============================================================ */

/* 1) Stronger macro rhythm: keep the warm material family, but make
      each light chapter perceptibly distinct at normal viewing distance. */
.services{
  background:
    radial-gradient(ellipse 60% 46% at 84% 10%, rgba(201,165,103,.17), transparent 72%),
    radial-gradient(ellipse 46% 34% at 10% 74%, rgba(255,255,255,.32), transparent 74%),
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 52%),
    #E9E0D1;
}
.portfolio{
  background:
    radial-gradient(ellipse 56% 42% at 14% 16%, rgba(255,255,255,.30), transparent 72%),
    radial-gradient(ellipse 52% 38% at 88% 72%, rgba(103,82,49,.12), transparent 75%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(91,72,44,.035) 56%, transparent 80%),
    #D1C4B1;
}
.transform-section{
  background:
    radial-gradient(ellipse 62% 44% at 50% 58%, rgba(117,93,57,.095), transparent 70%),
    radial-gradient(ellipse 46% 34% at 82% 18%, rgba(201,165,103,.12), transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,.40), transparent 58%),
    #DED5C6;
}
.trust{
  background:
    radial-gradient(ellipse 58% 46% at 14% 76%, rgba(201,165,103,.13), transparent 72%),
    radial-gradient(ellipse 44% 34% at 86% 18%, rgba(255,255,255,.30), transparent 72%),
    #EAE2D5;
}

/* 2) Replace one equally-visible drafting wallpaper with localized material
      atmosphere. Keep the motif, but let it support focal zones. */
.services::before,
.portfolio::before,
.transform-section::before,
.trust::before{
  opacity:.62;
  background-image:
    linear-gradient(rgba(78,64,40,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,64,40,.055) 1px, transparent 1px),
    repeating-linear-gradient(118deg, rgba(255,255,255,.027) 0 1px, transparent 1px 5px);
  background-size:72px 72px,72px 72px,auto;
  animation:draftingDrift 34s linear infinite;
}
.services::before{
  -webkit-mask-image:
    radial-gradient(ellipse 48% 22% at 74% 19%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 26% 42%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 74% 65%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 26% 88%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%);
  mask-image:
    radial-gradient(ellipse 48% 22% at 74% 19%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 26% 42%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 74% 65%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%),
    radial-gradient(ellipse 48% 22% at 26% 88%, #000 0 38%, rgba(0,0,0,.5) 62%, transparent 82%);
}
.portfolio::before{
  -webkit-mask-image:radial-gradient(ellipse 70% 56% at 48% 58%, #000 0 44%, rgba(0,0,0,.52) 64%, transparent 86%);
  mask-image:radial-gradient(ellipse 70% 56% at 48% 58%, #000 0 44%, rgba(0,0,0,.52) 64%, transparent 86%);
}
.transform-section::before{
  -webkit-mask-image:radial-gradient(ellipse 64% 58% at 50% 58%, #000 0 44%, rgba(0,0,0,.46) 64%, transparent 86%);
  mask-image:radial-gradient(ellipse 64% 58% at 50% 58%, #000 0 44%, rgba(0,0,0,.46) 64%, transparent 86%);
}
.trust::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent 2%, rgba(0,0,0,.9) 18%, #000 82%, transparent 98%);
  mask-image:linear-gradient(to bottom, transparent 2%, rgba(0,0,0,.9) 18%, #000 82%, transparent 98%);
}

/* 3) Services: less dead space, stronger editorial anchors, soft environmental
      light around photography. The existing alternation remains untouched. */
.services{ padding-block:clamp(82px,8.8vw,124px); }
.services .section-head-minimal{ margin-bottom:clamp(42px,6.2vw,78px); }
.service-row{
  padding-block:clamp(40px,5vw,64px);
  gap:clamp(34px,5.2vw,84px);
}
.service-row::after{ color:rgba(117,92,53,.105); }
.service-row::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:min(620px,52vw);
  aspect-ratio:1.25/1;
  border-radius:50%;
  pointer-events:none;
  top:50%;
  transform:translateY(-50%);
  background:radial-gradient(ellipse at center, rgba(139,114,63,.075), rgba(139,114,63,.025) 46%, transparent 72%);
  filter:blur(8px);
}
.service-row:nth-child(odd)::before{ left:-9%; }
.service-row:nth-child(even)::before{ right:-9%; }
.service-text h3{ font-size:clamp(1.84rem,2.8vw,2.68rem); }
.service-text p{ font-size:clamp(1rem,1.25vw,1.06rem); }
.service-media{
  box-shadow:
    0 30px 72px rgba(55,43,26,.14),
    0 1px 0 rgba(255,255,255,.20) inset;
}

/* 4) Portfolio: make it a distinct smoked-stone chapter and let the image rail
      sit in a soft environmental shadow instead of another flat beige band. */
.portfolio{ padding-block:clamp(88px,9vw,132px); }
.portfolio .container{ position:relative; }
.gallery-viewport{ position:relative; isolation:isolate; }
.gallery-viewport::before{
  content:'';
  position:absolute;
  z-index:-1;
  left:4%; right:4%;
  top:16%; bottom:6%;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(65,51,32,.16), rgba(65,51,32,.055) 52%, transparent 76%);
  filter:blur(22px);
}
.gallery-slide{
  box-shadow:
    0 30px 72px rgba(46,36,22,.18),
    0 1px 0 rgba(255,255,255,.18) inset;
}
.gallery-slide:hover{ box-shadow:0 38px 82px rgba(46,36,22,.24); }

/* 5) Transformation: give the paired images one shared atmospheric field so the
      section reads as an installation rather than two isolated components. */
.transform-section{ padding-block:clamp(88px,9vw,128px); }
.ba-grid{ position:relative; isolation:isolate; }
.ba-grid::before{
  content:'';
  position:absolute;
  z-index:-1;
  left:-10%; right:-10%;
  top:9%; bottom:5%;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(78,61,38,.12), rgba(78,61,38,.035) 48%, transparent 72%);
  filter:blur(18px);
}
.ba-frame{
  box-shadow:
    0 30px 72px rgba(50,40,25,.17),
    0 1px 0 rgba(255,255,255,.20) inset;
}

/* 6) Trust: tighten the over-spacious composition and add one restrained custom
      architectural elevation field behind the columns instead of card chrome. */
.trust{ padding-block:clamp(74px,7.8vw,104px); }
.trust .container{ position:relative; }
.trust .container::before{
  content:'';
  position:absolute;
  z-index:0;
  left:calc(var(--gutter) + 1%);
  right:calc(var(--gutter) + 4%);
  bottom:clamp(42px,5vw,70px);
  height:clamp(150px,20vw,250px);
  pointer-events:none;
  opacity:.48;
  background:
    linear-gradient(rgba(113,88,51,.065), rgba(113,88,51,.065)) 7% 24% / 1px 64% no-repeat,
    linear-gradient(rgba(113,88,51,.055), rgba(113,88,51,.055)) 34% 8% / 1px 82% no-repeat,
    linear-gradient(rgba(113,88,51,.055), rgba(113,88,51,.055)) 67% 18% / 1px 70% no-repeat,
    linear-gradient(rgba(113,88,51,.065), rgba(113,88,51,.065)) 94% 4% / 1px 86% no-repeat,
    linear-gradient(90deg, rgba(113,88,51,.065), rgba(113,88,51,.065)) 7% 24% / 87% 1px no-repeat,
    linear-gradient(90deg, rgba(113,88,51,.055), rgba(113,88,51,.055)) 7% 72% / 87% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(201,165,103,.13) 18%, rgba(201,165,103,.13) 82%, transparent) 50% 50% / 100% 1px no-repeat;
}
.trust .container > *{ position:relative; z-index:1; }
.trust .section-head-minimal{ margin-bottom:clamp(44px,5.6vw,72px); }
.trust-grid{ margin-top:0; }
.trust-item{ padding-top:30px; padding-bottom:28px; }
.trust-item h3{ font-size:clamp(1.45rem,1.8vw,1.62rem); }

/* 7) Contact: keep the black chapter, but give it controlled architectural
      lighting and materially separated dark surfaces. */
.contact{
  background:
    radial-gradient(ellipse 46% 58% at 79% 34%, rgba(201,165,103,.085), transparent 70%),
    radial-gradient(ellipse 30% 42% at 18% 24%, rgba(201,165,103,.035), transparent 74%),
    #0A0908;
  isolation:isolate;
}
.contact::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, transparent 0 73%, rgba(201,165,103,.11) 73% calc(73% + 1px), transparent calc(73% + 1px));
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
}
.contact > *{ position:relative; z-index:1; }
/* 8) Footer: keep it quiet, but carry one recognizable architectural signature. */
.site-footer{ position:relative; overflow:hidden; }
.site-footer::before{
  content:'';
  position:absolute;
  left:max(var(--gutter), calc((100vw - var(--container))/2 + var(--gutter)));
  top:34px;
  width:132px;
  height:28px;
  border-top:1px solid rgba(201,165,103,.18);
  border-left:1px solid rgba(201,165,103,.18);
  pointer-events:none;
}

/* 9) Dark hero: preserve the existing hero, only add the subtle text-localized
      vignette previously identified as useful. */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 48% 52% at 18% 48%, rgba(201,165,103,.065), transparent 72%),
    radial-gradient(ellipse 58% 54% at 28% 58%, rgba(4,4,3,.12), transparent 72%);
}

/* Subtle seams make the material-like section backgrounds read as one system. */
.services,
.portfolio,
.transform-section,
.trust{
  box-shadow:inset 0 1px rgba(255,255,255,.18), inset 0 -1px rgba(78,64,40,.10);
}

/* 10) Fine-tune vertical rhythm without flattening the existing luxury spacing. */
.portfolio-head{ margin-bottom:clamp(38px,5.2vw,64px); }

@media (max-width:900px){
  .services{ padding-block:82px; }
  .service-row{ padding-block:42px; }
  .service-row::before{ width:88vw; opacity:.8; }
  .portfolio,.transform-section{ padding-block:82px; }
  .trust{ padding-block:72px; }
  .trust .container::before{ left:18px; right:18px; opacity:.48; }
  .contact{
    background:
      radial-gradient(ellipse 78% 38% at 50% 76%, rgba(201,165,103,.065), transparent 72%),
      #0A0908;
  }
  .contact::after{ opacity:.22; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px); }
}

/* Lightweight compositor path for touch browsers and embedded web views.
   Layout and imagery stay identical; only costly off-screen paint effects go. */
@media (hover:none), (pointer:coarse){
  .services::before,
  .portfolio::before,
  .transform-section::before{ animation:none; }
  .service-row::before,
  .gallery-viewport::before,
  .ba-grid::before{ filter:none; }
  .service-media::before{ display:none; }
  .gallery-viewport.reveal .gallery-slide{
    opacity:1;
    transform:none;
    transition:box-shadow .3s var(--ease);
  }
}

@media (max-width:700px){
  .service-row::before{ top:34%; }
  .trust .container::before{
    height:72%;
    bottom:28px;
    background:
      linear-gradient(rgba(113,88,51,.055), rgba(113,88,51,.055)) 12% 4% / 1px 92% no-repeat,
      linear-gradient(rgba(113,88,51,.045), rgba(113,88,51,.045)) 88% 12% / 1px 78% no-repeat,
      linear-gradient(90deg, rgba(113,88,51,.05), rgba(113,88,51,.05)) 12% 35% / 76% 1px no-repeat,
      linear-gradient(90deg, rgba(113,88,51,.05), rgba(113,88,51,.05)) 12% 68% / 76% 1px no-repeat;
  }
}

@media (hover:none){
  .slide-caption{ opacity:1; transform:none; }
}

@media (max-width:390px){
  :root{ --gutter:16px; }
  .header-row{ gap:10px; }
  .header-cta{ gap:9px; }
  .header-cta > .btn{ padding:.9em 1em; font-size:.7rem; }
  .brand-main{ font-size:1.16rem; }
  .brand-sub{ letter-spacing:.42em; }
  .hero-frame{ padding:34px 26px; }
  .hero-inner{ padding-block:132px 72px; }
}

@media (prefers-reduced-motion: reduce){
  .services::before,
  .portfolio::before,
  .transform-section::before,
  .trust::before{ animation:none; }
}

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.service-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  color:var(--c-gold-text-light);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.service-link::after{ content:'↗'; font-size:1rem; transition:transform var(--dur-s) var(--ease); }
.service-link:hover::after{ transform:translate(3px,-3px); }

.service-detail-hero{
  position:relative;
  min-height:min(820px,88svh);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.service-detail-media{ position:absolute; inset:0; z-index:-2; }
.service-detail-media picture,
.service-detail-media img{ width:100%; height:100%; display:block; }
.service-detail-media img{ object-fit:cover; object-position:center 44%; }
.service-detail-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.72) 42%,rgba(10,9,8,.28) 74%,rgba(10,9,8,.42) 100%),
    linear-gradient(0deg,rgba(10,9,8,.88),transparent 56%);
}
.service-detail-hero-inner{ position:relative; z-index:1; padding-block:160px 84px; }
.breadcrumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:48px; color:var(--c-stone); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.breadcrumbs a{ color:var(--c-gold-light); }
.service-detail-hero h1{
  max-width:12ch;
  margin-top:18px;
  font-family:var(--font-serif);
  font-size:clamp(3rem,7vw,6.4rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.02em;
}
.service-detail-hero .sub{ max-width:58ch; margin:26px 0 38px; color:var(--c-beige); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.75; }

.service-overview{ background:var(--c-beige); color:var(--c-warm-black); padding-block:clamp(88px,10vw,140px); }
.service-detail-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(42px,8vw,120px); align-items:start; }
.service-detail-heading{ font-family:var(--font-serif); font-size:clamp(2.2rem,4.8vw,4.5rem); line-height:1.06; font-weight:500; letter-spacing:-.015em; }
.service-detail-heading.smaller{ font-size:clamp(1.9rem,3.6vw,3.2rem); }
.service-copy{ display:grid; gap:22px; color:#4A4335; font-size:1.03rem; line-height:1.8; }
.service-includes{ margin-top:clamp(72px,9vw,120px); padding-top:clamp(48px,6vw,76px); border-top:1px solid rgba(30,27,21,.16); }
.service-includes ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin-top:38px; }
.service-includes li{ display:grid; grid-template-columns:38px 1fr; gap:16px; padding:22px 0; border-top:1px solid rgba(30,27,21,.12); align-items:start; }
.service-includes li > span{ color:var(--c-gold-text-light); font-family:var(--font-serif); }
.service-includes li p{ color:#4A4335; line-height:1.65; }

.service-proof{ background:var(--c-warm-black); padding-block:clamp(88px,10vw,140px); }
.service-proof-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); align-items:center; gap:clamp(42px,8vw,110px); }
.service-proof-media{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--c-line); }
.service-proof-media picture,
.service-proof-media img{ width:100%; height:100%; display:block; }
.service-proof-media img{ object-fit:cover; }
.service-proof-copy .service-detail-heading{ margin:18px 0 28px; }
.service-proof-copy > p{ max-width:46ch; color:var(--c-stone); line-height:1.8; }
.text-link{ display:inline-flex; margin-top:32px; color:var(--c-gold-light); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--c-gold-dim); padding-bottom:7px; }

.related-services{ background:var(--c-beige); color:var(--c-warm-black); padding-block:clamp(82px,9vw,120px); }
.related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(30,27,21,.16); }
.related-grid a{ min-height:142px; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; padding:26px; border-right:1px solid rgba(30,27,21,.16); font-family:var(--font-serif); font-size:clamp(1.25rem,2vw,1.7rem); transition:background var(--dur-s),color var(--dur-s); }
.related-grid a:last-child{ border-right:0; }
.related-grid a:hover{ background:var(--c-warm-black); color:var(--c-gold-light); }
.related-grid a span:last-child{ color:var(--c-gold-text-light); }

.service-contact .contact-head{ max-width:1000px; }
.service-contact-copy{ max-width:58ch; color:var(--c-stone); font-size:1.04rem; line-height:1.75; margin:8px 0 34px; }

@media (max-width:820px){
  .service-detail-hero{ min-height:760px; }
  .service-detail-media::after{ background:linear-gradient(0deg,rgba(10,9,8,.96) 0%,rgba(10,9,8,.64) 68%,rgba(10,9,8,.42) 100%); }
  .service-detail-hero-inner{ padding-block:130px 66px; }
  .breadcrumbs{ margin-bottom:34px; }
  .service-detail-grid,
  .service-proof-grid{ grid-template-columns:1fr; }
  .service-proof-media{ max-height:650px; }
  .service-includes ul,
  .related-grid{ grid-template-columns:1fr; }
  .related-grid a{ min-height:104px; border-right:0; border-bottom:1px solid rgba(30,27,21,.16); }
}