/* ============================================================
   Ridgeline Roofing Corp. — shared stylesheet
   Dark-first, alpine-luxury. Body: Geist. Display: Spectral.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Lexend:wght@400;500;600&display=swap');

:root{
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* dark (default) */
  --bg:        #0b0f14;
  --bg-elev:   #0e1620;
  --surface:   #131c27;
  --surface-2: #1a2533;
  --line:      rgba(184,206,228,0.10);
  --line-2:    rgba(184,206,228,0.18);
  --text:      #eaf1f8;
  --text-2:    #a6b6c6;
  --text-3:    #6f8090;
  --blue:      #6fa9df;
  --blue-2:    #3f7cb0;
  --blue-deep: #1f3c57;
  --gold:      #c9a45c;
  --gold-2:    #e0c081;
  --on-blue:   #07121c;
  --shadow:    0 24px 60px -28px rgba(0,0,0,0.75);
  --shadow-lg: 0 40px 100px -40px rgba(0,0,0,0.85);
  --header-h:  76px;
  --maxw:      1280px;
  --font:      'Geist', system-ui, -apple-system, sans-serif;
  --serif:     'Spectral', Georgia, 'Times New Roman', serif;
  --mono:      'Geist Mono', ui-monospace, monospace;
}

[data-theme="light"]{
  --bg:        #e9edf1;
  --bg-elev:   #ffffff;
  --surface:   #ffffff;
  --surface-2: #f1f4f7;
  --line:      rgba(20,33,48,0.12);
  --line-2:    rgba(20,33,48,0.20);
  --text:      #111922;
  --text-2:    #45566a;
  --text-3:    #6d7e90;
  --blue:      #2c6695;
  --blue-2:    #3f7cb0;
  --blue-deep: #cfe0ef;
  --gold:      #9c7a32;
  --gold-2:    #b8923f;
  --on-blue:   #ffffff;
  --shadow:    0 24px 55px -30px rgba(31,60,87,0.30);
  --shadow-lg: 0 40px 90px -42px rgba(31,60,87,0.38);
}

[data-dys="on"]{ --font: 'Lexend', system-ui, sans-serif; --serif: 'Lexend', system-ui, sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:#08111a; }

/* ---------- layout helpers ---------- */
.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }
.section{ position:relative; padding:clamp(72px,9vw,140px) 0; }
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold); opacity:.7; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:0; }
h2.display{ font-size:clamp(2.1rem,4.4vw,3.7rem); }
h3{ font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:0; }
p{ text-wrap:pretty; }
.lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--text-2); line-height:1.6; }
.muted{ color:var(--text-2); }

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--gold);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.6em; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.98rem; letter-spacing:.01em;
  background:var(--bg-btn); color:#0a131c; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  will-change:transform; position:relative;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(201,164,92,.55); }
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn.ghost:hover{ background:rgba(255,255,255,.04); box-shadow:none; border-color:var(--gold); }
.btn.blue{ --bg-btn:var(--blue); color:var(--on-blue); }
.btn.blue:hover{ box-shadow:0 18px 38px -16px rgba(111,169,223,.5); }

/* ---------- grain overlay ---------- */
#grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045;
  background-image:var(--grain-url);
  background-size:220px 220px;
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: no-preference){
  #grain.anim{ animation:grainshift 6s steps(6) infinite; }
}
@keyframes grainshift{
  0%{transform:translate(0,0)}16%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)}66%{transform:translate(4%,2%)}83%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}
}

/* ---------- touch glow layer ---------- */
#glow-layer{ position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden; }
.glow{
  position:absolute; width:340px; height:340px; margin:-170px 0 0 -170px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,215,0,.22), rgba(255,200,40,.10) 38%, transparent 70%);
  opacity:0; transition:opacity .12s linear;
  will-change:transform,opacity;
}

/* ---------- custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  .cursor-on, .cursor-on *{ cursor:none; }
  #cursor{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
    transform:translate(-50%,-50%); transition:opacity .25s var(--ease); }
  #cursor svg{ display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
  #cursor-trail{ position:fixed; left:0; top:0; z-index:9998; pointer-events:none;
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1px solid var(--gold); opacity:.4; transition:opacity .3s var(--ease); }
}

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  background:var(--bg); transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.done{ opacity:0; visibility:hidden; }
#loader .lwrap{ text-align:center; }
#loader svg{ width:140px; height:84px; overflow:visible; }
#loader .ridge{ fill:none; stroke:var(--blue); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520; animation:draw 1.5s var(--ease) forwards; }
#loader .base{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:160; stroke-dashoffset:160; animation:draw 1s var(--ease) .5s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
#loader .lname{ margin-top:18px; font-family:var(--mono); font-size:.72rem; letter-spacing:.45em;
  text-transform:uppercase; color:var(--text-3); opacity:0; animation:fadein .6s var(--ease) 1s forwards; }
@keyframes fadein{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  #loader .ridge,#loader .base{ animation:none; stroke-dashoffset:0; }
  #loader .lname{ animation:none; opacity:1; }
}

/* ---------- page transition veil ---------- */
#veil{ position:fixed; inset:0; z-index:8000; background:var(--bg); pointer-events:none;
  opacity:0; transition:opacity .42s var(--ease); }
#veil.show{ opacity:1; pointer-events:all; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ======================== HEADER ======================== */
#hdr{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
#hdr.solid{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line); }
#hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; width:min(var(--maxw),94vw); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:auto; }
.brand .bt{ display:flex; flex-direction:column; line-height:1; }
.brand .bt b{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.brand .bt span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.28em; color:var(--text-3); margin-top:4px; white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{ position:relative; padding:.55em .9em; font-size:.95rem; color:var(--text-2);
  transition:color .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:.9em; right:.9em; bottom:.35em; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav a:hover,.nav a.active{ color:var(--text); }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }

.cluster{ display:flex; align-items:center; gap:4px; }
.icon-btn{ display:grid; place-items:center; width:44px; height:44px; border-radius:11px;
  background:transparent; border:0; color:var(--text-2); transition:background .25s var(--ease), color .25s var(--ease); }
.icon-btn:hover{ background:color-mix(in srgb, var(--blue) 18%, transparent); color:var(--text); }
.icon-btn svg{ width:20px; height:20px; }

/* contact pill */
.contact-wrap{ position:relative; }
.contact-pill{ display:inline-flex; align-items:center; gap:.5em; padding:.5em .9em .5em .7em;
  border-radius:999px; background:transparent; border:1px solid var(--line-2); color:var(--text);
  font-size:.9rem; font-weight:500; transition:border-color .25s var(--ease), background .25s var(--ease); }
.contact-pill:hover{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 12%, transparent); }
.contact-pill .ph{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:#0a131c; }
.contact-pill .ph svg{ width:14px; height:14px; }
.contact-pill .num{ white-space:nowrap; }
.contact-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:210px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:6px;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.contact-wrap.open .contact-menu{ opacity:1; visibility:visible; transform:none; }
.contact-menu a{ display:flex; align-items:center; gap:.7em; padding:.7em .8em; border-radius:9px;
  font-size:.92rem; color:var(--text-2); transition:background .2s, color .2s; }
.contact-menu a:hover{ background:var(--surface-2); color:var(--text); }
.contact-menu a svg{ width:17px; height:17px; color:var(--gold); }

.hamburger{ display:none; }

/* ======================== SEARCH PANEL ======================== */
#search{ position:fixed; inset:0 0 auto 0; z-index:1200; background:color-mix(in srgb,var(--bg) 94%, transparent);
  backdrop-filter:blur(18px); border-bottom:1px solid var(--line-2); padding:26px 0;
  transform:translateY(-110%); transition:transform .45s var(--ease); }
#search.open{ transform:none; }
#search .srow{ display:flex; align-items:center; gap:14px; width:min(var(--maxw),92vw); margin-inline:auto; }
#search input{ flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,2rem); padding:.2em 0; }
#search input::placeholder{ color:var(--text-3); }
.mic{ position:relative; }
.mic.listening{ color:var(--gold); }
.mic.listening::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--gold); animation:pulse 1.1s ease-out infinite; }
@keyframes pulse{ from{ transform:scale(.8); opacity:.8 } to{ transform:scale(1.6); opacity:0 } }
#search-results{ width:min(var(--maxw),92vw); margin:14px auto 0; display:grid; gap:4px; max-height:46vh; overflow:auto; }
#search-results a{ display:flex; justify-content:space-between; align-items:center; padding:.7em .2em;
  border-bottom:1px solid var(--line); color:var(--text-2); transition:color .2s, padding .2s; }
#search-results a:hover{ color:var(--text); padding-left:.6em; }
#search-results .k{ font-family:var(--mono); font-size:.7rem; color:var(--text-3); letter-spacing:.1em; text-transform:uppercase; }

/* ======================== SETTINGS PANEL ======================== */
#scrim{ position:fixed; inset:0; z-index:1300; background:rgba(4,8,12,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
#scrim.open{ opacity:1; visibility:visible; }
#settings{ position:fixed; top:0; right:0; bottom:0; z-index:1400; width:min(390px,90vw);
  background:var(--surface); border-left:1px solid var(--line-2); box-shadow:var(--shadow-lg);
  transform:translateX(102%); transition:transform .45s var(--ease); display:flex; flex-direction:column; }
#settings.open{ transform:none; }
#settings .set-hdr{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px;
  border-bottom:1px solid var(--line); }
#settings .set-hdr h4{ margin:0; font-family:var(--serif); font-size:1.25rem; font-weight:600; }
#settings .body{ padding:8px 24px 32px; overflow:auto; }
.set-group{ padding:20px 0; border-bottom:1px solid var(--line); }
.set-group h5{ margin:0 0 4px; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); font-weight:500; }
.set-group p.hint{ margin:0 0 14px; font-size:.84rem; color:var(--text-3); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.set-row label{ font-size:.95rem; color:var(--text-2); }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button{ border:0; background:transparent; color:var(--text-3); padding:.4em .9em; border-radius:7px;
  font-size:.85rem; transition:background .25s, color .25s; }
.seg button.on{ background:var(--blue); color:var(--on-blue); }
.switch{ position:relative; width:46px; height:26px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line-2); transition:background .3s var(--ease); flex:0 0 auto; }
.switch.on{ background:var(--blue); border-color:var(--blue); }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .3s var(--ease); }
.switch.on::after{ transform:translateX(20px); }
.sel{ background:var(--surface-2); color:var(--text); border:1px solid var(--line-2); border-radius:9px;
  padding:.5em .7em; font-family:inherit; font-size:.9rem; }
input[type="range"]{ accent-color:var(--blue); width:130px; }

/* ======================== HERO (shared) ======================== */
.hero{ position:relative; min-height:94vh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 56px) 0 150px; overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:-6% -6% -6% -6%; z-index:-2;
  background-size:cover; background-position:center;
  background-color:#0c1722;
  background-image:linear-gradient(160deg, rgba(20,40,60,.5), rgba(8,14,20,.7)); }
.hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center bottom; display:block; }
@media (prefers-reduced-motion: no-preference){
  .hero-bg{ animation:ken 26s ease-in-out infinite alternate; }
}
@keyframes ken{ from{ transform:scale(1.02) translate(0,0) } to{ transform:scale(1.16) translate(-1.5%,-1.5%) } }
.hero-overlay{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,12,18,.66) 0%, rgba(8,12,18,.34) 28%, rgba(8,12,18,.30) 55%, rgba(8,12,18,.40) 80%, rgba(8,12,18,.34) 100%); }
.hero .wrap{ width:min(var(--maxw),92vw); }
.hero-inner{ max-width:880px; }
.hero h1{ font-size:clamp(2.6rem,6.2vw,5.4rem); font-weight:500; color:#f3f7fb;
  letter-spacing:-.015em; text-shadow:0 2px 24px rgba(4,8,14,.55); }
.hero h1 em{ font-style:italic; color:var(--gold-2); }
.hero .lead{ color:#dbe5ef; max-width:620px; margin-top:22px; text-shadow:0 1px 16px rgba(4,8,14,.6); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-eyebrow{ margin-bottom:22px; }
/* hero bleed: next section emerges from image */
.emerge{ position:relative; margin-top:-96px; z-index:2; padding-top:clamp(22px,3vw,46px); }
.emerge::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:96px;
  background:linear-gradient(180deg, transparent, var(--bg) 90%); z-index:-1; }

/* hero trust strip (in flow) */
.hero-meta{ display:flex; flex-wrap:wrap; gap:22px 48px; align-items:center; max-width:900px;
  border-top:1px solid rgba(255,255,255,.18); padding-top:26px; margin-top:clamp(34px,5vw,58px);
  text-shadow:0 1px 14px rgba(4,8,14,.55); }
.hero-meta .hm{ display:flex; flex-direction:column; }
.hero-meta .hm b{ font-family:var(--serif); font-size:1.7rem; color:#f3f7fb; line-height:1; }
.hero-meta .hm span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:#9fb1c2; margin-top:7px; }

/* ======================== SECTION HEADINGS ======================== */
.shead{ display:flex; flex-direction:column; gap:16px; max-width:720px; }
.shead.center{ margin-inline:auto; text-align:center; align-items:center; }

/* ======================== SERVICES ======================== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
.svc-card{ position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--blue-2); }
.svc-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#10202e; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc-card:hover .svc-media img{ transform:scale(1.06); }
.svc-media .num{ position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; color:#dfe8f1; background:rgba(7,14,22,.55); backdrop-filter:blur(6px);
  padding:.4em .7em; border-radius:7px; border:1px solid rgba(255,255,255,.14); }
.svc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.svc-body h3{ font-family:var(--serif); }
.svc-body p{ font-size:.95rem; color:var(--text-2); margin:0; }
.svc-more{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.svc-more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.svc-card:hover .svc-more svg{ transform:translateX(4px); }

/* feature / "see all work" photo tile (fills the grid + adds imagery) */
.svc-feature{ position:relative; min-height:340px; }
.svc-feature-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease); }
.svc-feature:hover .svc-feature-img{ transform:scale(1.06); }
.svc-feature::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,13,20,.92) 0%, rgba(7,13,20,.55) 42%, rgba(7,13,20,.12) 100%); }
.svc-feature-cap{ position:relative; z-index:1; margin-top:auto; padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:8px; }
.svc-feature-cap .cap{ color:var(--gold); }
.svc-feature-cap b{ font-family:var(--serif); font-size:1.45rem; color:#fff; line-height:1.1; }
.svc-more.light{ color:#e7eef6; margin-top:4px; padding-top:0; }

/* image fallback tile */
.imgfallback{ background:
    radial-gradient(120% 90% at 70% 10%, rgba(111,169,223,.30), transparent 60%),
    linear-gradient(160deg, #1a2c3d, #0d1822 70%); }
.imgfallback::after{ content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(200,220,240,.5); }

/* ======================== STATS ======================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface);
  display:flex; flex-direction:column; gap:8px; }
.stat b{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--text); }
.stat .gold{ color:var(--gold); }
.stat span{ font-size:.92rem; color:var(--text-2); }

/* ======================== BEFORE / AFTER GALLERY ======================== */
.ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,34px); }
.ba-card{ display:flex; flex-direction:column; gap:16px; }
.ba-frame{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1; background:#10202e;
  box-shadow:var(--shadow); border:1px solid var(--line-2); }
.ba-frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s var(--ease); }
.ba-card:hover .ba-frame img{ transform:scale(1.035); }
.ba-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); border-radius:18px; }
.ba-tags{ position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; }
.ba-tags span{ padding:.5em .9em; border-radius:999px; backdrop-filter:blur(8px);
  background:rgba(8,16,24,.55); border:1px solid rgba(255,255,255,.1); color:#e7eef6; }
.ba-tags span.aft{ color:var(--gold); border-color:rgba(200,160,90,.4); }
.ba-cap b{ display:block; font-size:1.06rem; margin-bottom:4px; }
.ba-cap p{ margin:0; color:var(--text-2); font-size:.94rem; }
@media (max-width:720px){ .ba-grid{ grid-template-columns:1fr; } }

/* ======================== SPLIT / ABOUT ======================== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center; }
.split > *{ min-width:0; }
.split.rev{ grid-template-columns:.95fr 1.05fr; }
.media-frame{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; background:#10202e;
  box-shadow:var(--shadow); }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame.wipe img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
.media-frame.wipe.in img{ clip-path:inset(0 0 0 0); }
.cap{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.prose p{ color:var(--text-2); margin:0 0 1.1em; }
.prose p:first-of-type::first-letter{ font-family:var(--serif); font-size:3.4em; float:left; line-height:.8;
  padding:.05em .12em 0 0; color:var(--gold); font-weight:600; }
.tick-list{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px; }
.tick-list li{ display:flex; gap:.8em; align-items:flex-start; color:var(--text-2); font-size:.98rem; }
.tick-list svg{ width:20px; height:20px; flex:0 0 auto; color:var(--gold); margin-top:2px; }

/* ======================== SERVICES PAGE rows ======================== */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,68px); align-items:center;
  padding:clamp(44px,6vw,86px) 0; border-bottom:1px solid var(--line); }
.svc-row:nth-child(even){ direction:rtl; }
.svc-row:nth-child(even) > *{ direction:ltr; }
.svc-row .media-frame{ aspect-ratio:5/4; }
.svc-row h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:8px; }
.svc-row .badge{ display:inline-flex; gap:.6em; align-items:center; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }

/* project gallery (within a service row) */
.proj-gallery{ grid-column:1 / -1; margin-top:clamp(14px,2.5vw,30px); }
.pg-head{ display:flex; align-items:baseline; gap:8px 22px; flex-wrap:wrap; margin-bottom:22px; }
.pg-head p{ margin:0; color:var(--text-2); font-size:.96rem; max-width:62ch; }
.pg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
.pg-item{ margin:0; display:flex; flex-direction:column; gap:13px; }
.pg-frame{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; background:#10202e;
  box-shadow:var(--shadow); border:1px solid var(--line-2); }
.pg-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.pg-item:hover .pg-frame img,.pf-item:hover .pg-frame img{ transform:scale(1.045); }
.pg-step{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); display:flex; gap:.8em; align-items:center; }
.pg-step b{ color:var(--gold); }
/* portfolio variant (mixed projects, name + descriptor) */
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:clamp(14px,1.6vw,22px); }
.pf-item{ margin:0; display:flex; flex-direction:column; gap:12px; }
.pf-cap{ display:flex; flex-direction:column; gap:4px; }
.pf-cap b{ font-family:var(--serif); color:var(--text); font-size:1.02rem; font-weight:600; }
.pf-cap span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
@media (max-width:720px){ .pg-grid{ grid-template-columns:1fr; } .pf-grid{ grid-template-columns:1fr 1fr; } }

/* service media carousel (horizontal slide) */
.svc-carousel{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; background:#10202e;
  box-shadow:var(--shadow); border:1px solid var(--line-2); }
.ctrack{ display:flex; width:100%; height:100%; transition:transform .65s var(--ease); will-change:transform; }
.cslide{ position:relative; flex:0 0 100%; height:100%; margin:0; }
.cslide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ccap{ position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px; display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(to top, rgba(7,13,19,.85), rgba(7,13,19,.35) 55%, transparent); }
.ccap b{ font-family:var(--serif); color:#fff; font-size:1.1rem; font-weight:600; }
.ccap span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(232,240,248,.72); }
.cnav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.2);
  background:rgba(8,14,20,.42); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s var(--ease), background .2s; }
.svc-carousel:hover .cnav{ opacity:1; }
.cnav:hover{ background:rgba(8,14,20,.82); }
.cnav svg{ width:20px; height:20px; }
.cnav.prev{ left:14px; } .cnav.next{ right:14px; }
.cdots{ position:absolute; top:16px; left:16px; display:flex; gap:7px; z-index:2; }
.cdots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.45); transition:all .25s var(--ease); }
.cdots button.on{ background:var(--gold); width:22px; border-radius:4px; }
.cbar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.16); z-index:3; }
.cbar i{ display:block; height:100%; width:0%; background:var(--gold); }
.cbar i.run{ width:100%; transition:width 5000ms linear; }
@media (hover:none){ .cnav{ opacity:.92; } }

/* section index numeral */
.svc-num{ font-family:var(--mono); font-size:.82rem; letter-spacing:.22em; color:var(--gold);
  display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.svc-num::after{ content:""; height:1px; width:64px; background:linear-gradient(90deg,var(--gold),transparent); }

/* ======================== TESTIMONIALS ======================== */
.tslider{ position:relative; max-width:900px; margin:46px auto 0; }
.tslide{ display:none; text-align:center; }
.tslide.on{ display:block; animation:tfade .7s var(--ease); }
@keyframes tfade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.tstars{ display:flex; gap:5px; justify-content:center; color:var(--gold); margin-bottom:22px; }
.tstars svg{ width:20px; height:20px; }
.tquote{ font-family:var(--serif); font-size:clamp(1.35rem,2.7vw,2rem); line-height:1.4; font-weight:400; color:var(--text); }
.tquote em{ color:var(--gold-2); font-style:italic; }
.tmeta{ margin-top:26px; display:inline-flex; align-items:center; gap:13px; }
.tmeta .av{ width:50px; height:50px; border-radius:50%; object-fit:cover; background:var(--surface-2);
  border:1px solid var(--line-2); }
.tmeta .tn{ text-align:left; }
.tmeta .tn b{ display:block; font-weight:600; font-size:.98rem; }
.tmeta .tn span{ font-size:.82rem; color:var(--text-3); }
.tdots{ display:flex; gap:9px; justify-content:center; margin-top:34px; }
.tdots button{ width:9px; height:9px; border-radius:50%; border:0; background:var(--line-2); transition:background .3s,transform .3s; }
.tdots button.on{ background:var(--gold); transform:scale(1.3); }

/* ======================== CONTACT / FORM ======================== */
.form{ display:grid; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); }
.field input,.field select,.field textarea{ background:var(--surface); border:1px solid var(--line-2);
  border-radius:11px; padding:.85em 1em; color:var(--text); font-family:inherit; font-size:1rem;
  width:100%; min-width:0; box-sizing:border-box;
  transition:border-color .25s var(--ease), background .25s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 6%, var(--surface)); }
.field textarea{ resize:vertical; min-height:130px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.82rem; color:var(--text-3); }
.form-ok{ display:none; align-items:center; gap:.7em; padding:1em 1.2em; border-radius:12px;
  background:color-mix(in srgb,var(--blue) 16%, transparent); border:1px solid var(--blue-2); color:var(--text); }
.form-ok.show{ display:flex; }
.map-frame{ border-radius:18px; overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow);
  filter:saturate(.85) contrast(1.02); }
.map-frame iframe{ display:block; width:100%; height:100%; border:0; min-height:420px; }
[data-theme="dark"] .map-frame{ filter:invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95); }

.contact-cards{ display:grid; gap:14px; }
.ccard{ display:flex; gap:15px; align-items:flex-start; padding:20px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); transition:border-color .3s var(--ease), transform .3s var(--ease); }
.ccard:hover{ border-color:var(--blue-2); transform:translateY(-3px); }
.ccard .ci{ display:grid; place-items:center; width:44px; height:44px; border-radius:11px;
  background:color-mix(in srgb,var(--gold) 16%, transparent); color:var(--gold); flex:0 0 auto; }
.ccard .ci svg{ width:21px; height:21px; }
.ccard b{ display:block; font-size:.95rem; }
.ccard > div{ min-width:0; }
.ccard a,.ccard span{ color:var(--text-2); font-size:.95rem; overflow-wrap:anywhere; }
.ccard a:hover{ color:var(--gold); }

/* ======================== SOCIAL ======================== */
.socials{ display:flex; gap:10px; }

/* CTA band — copy left, logo in its own column right (no overlap) */
.cta-band{ display:flex; align-items:center; gap:clamp(28px,6vw,72px); }
.cta-copy{ flex:1 1 auto; min-width:0; position:relative; z-index:1; }
.cta-mark{ flex:0 0 auto; width:clamp(250px,40%,380px); height:auto; align-self:center;
  pointer-events:none; user-select:none; }
[data-theme="dark"] .cta-mark{ opacity:.92; filter:invert(1); mix-blend-mode:screen; }
[data-theme="light"] .cta-mark{ opacity:.94; mix-blend-mode:multiply; }
@media (max-width:820px){
  .cta-band{ flex-direction:column; align-items:flex-start; gap:34px; }
  .cta-mark{ width:min(52%,200px); align-self:flex-start; }
}

/* subtle professional background for CTA panels */
.cta-soft-bg::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(125% 95% at 88% -10%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 55%),
    radial-gradient(95% 85% at 5% 110%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 55%); }
.cta-soft-bg::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.5; mix-blend-mode:soft-light;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px); }
.cta-soft-bg > *{ position:relative; z-index:1; }

/* About — travel callout with subtle map background */
.travel-map{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
[data-theme="dark"] .travel-map{ filter:invert(.92) hue-rotate(180deg) saturate(.65) contrast(.95) brightness(1.04); }
[data-theme="light"] .travel-map{ filter:saturate(.9) contrast(1.02); }
.travel-veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--surface) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface) 80%, transparent) 50%,
    color-mix(in srgb, var(--surface) 88%, transparent) 100%); }
.socials a{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  border:1px solid var(--line-2); color:var(--text-2);
  transition:transform .3s var(--ease), color .3s var(--ease), border-color .3s, box-shadow .3s; }
.socials a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(201,164,92,.6); }
.socials a svg{ width:32px; height:32px; }

/* ======================== FOOTER ======================== */
footer{ position:relative; background:var(--bg-elev); border-top:1px solid var(--line); padding:72px 0 34px; }
[data-theme="dark"] footer{ background:#0a0e13; }
.fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.fcol h6{ margin:0 0 16px; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.fcol ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.fcol a{ position:relative; color:var(--text-2); font-size:.95rem; transition:color .25s; width:fit-content; }
.fcol a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.fcol a:hover{ color:var(--text); }
.fcol a:hover::after{ transform:scaleX(1); }
.fbrand img{ height:42px; margin-bottom:16px; transform-origin:left center;
  transition:transform .5s var(--ease); will-change:transform; }
.fbrand img:hover{ animation-play-state:paused; transform:translateY(-3px) rotate(-1deg) scale(1.03); }
@media (prefers-reduced-motion: no-preference){
  .fbrand img{ animation:logofloat 5.5s ease-in-out infinite; }
}
@keyframes logofloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-2.5px) rotate(-.6deg); }
  50%{ transform:translateY(.5px) rotate(.4deg); }
  75%{ transform:translateY(-1.5px) rotate(-.3deg); }
}
.fbrand p{ color:var(--text-2); font-size:.92rem; max-width:280px; }
.fbase{ margin-top:54px; padding-top:24px; border-top:1px solid var(--line); display:flex;
  flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.fbase span{ font-size:.82rem; color:var(--text-3); }
.fbase .fblog{ display:flex; flex-wrap:wrap; gap:18px; }
.fbase .fblog a{ font-size:.82rem; color:var(--text-3); }
.fbase .fblog a:hover{ color:var(--gold); }

/* ======================== MOBILE MENU ======================== */
#mmenu{ position:fixed; inset:0; z-index:1100; background:var(--bg);
  transform:translateY(-100%); visibility:hidden;
  transition:transform .5s var(--ease), visibility .5s var(--ease); display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 30px) 8vw 40px; }
#mmenu.open{ transform:none; visibility:visible; }
#mmenu a.ml{ font-family:var(--serif); font-size:2rem; padding:.35em 0; border-bottom:1px solid var(--line);
  color:var(--text); display:flex; justify-content:space-between; align-items:center; }
#mmenu a.ml span{ font-family:var(--mono); font-size:.7rem; color:var(--text-3); }
#mmenu .mfoot{ margin-top:auto; display:flex; flex-direction:column; gap:18px; }

/* ======================== RESPONSIVE ======================== */
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .fgrid{ grid-template-columns:1fr 1fr; gap:34px; }
  .nav{ display:none; }
  #ctaBtn{ display:none; }
  .hamburger{ display:grid; }
}
@media (max-width:860px){
  body{ font-size:17px; }
  .contact-pill .num{ display:none; }
  .contact-pill{ padding:.5em; }
  .split,.split.rev,.svc-row{ grid-template-columns:1fr; }
  .svc-row:nth-child(even){ direction:ltr; }
  .svc-row .media-frame{ aspect-ratio:16/10; }
  .emerge{ margin-top:-70px; }
  .emerge::before{ height:70px; }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .fgrid{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .hero{ min-height:88vh; padding-bottom:170px; }
}
@media (max-width:900px){ .tl-grid{ grid-template-columns:1fr 1fr!important; } }
@media (max-width:520px){ .tl-grid{ grid-template-columns:1fr!important; } }

/* hide interactive chrome from print */
@media print{ #hdr,#loader,#grain,#glow-layer,#cursor,#cursor-trail,#search,#settings,#scrim,#veil,#mmenu{ display:none!important; } }