/* ============================================================
   AURUM ATELIER — Cinematic Site · Design System
   Cool ink architecture · azure light · brass material warmth
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* surfaces — cool ink */
  --bg:      #0A0C0F;
  --bg-1:    #0E1116;
  --bg-2:    #13171E;
  --bg-3:    #181D26;
  --glass:   rgba(16,20,26,0.55);

  /* ink — cool bone */
  --ink:       #ECEFF3;
  --ink-soft:  #B4BCC6;
  --ink-dim:   #9AA3AD;
  --ink-faint: #6A7480;

  /* azure — the architectural light (from the mark) */
  --azure:        #2C9AD4;
  --azure-bright: #66C6F3;
  --azure-deep:   #195F8C;
  --azure-glow:   rgba(44,154,212,0.18);

  /* brass — warm material highlight */
  --brass:        #C2A269;
  --brass-bright: #E6CB94;
  --brass-deep:   #8E713F;

  /* lines */
  --line:        rgba(236,239,243,0.09);
  --line-soft:   rgba(236,239,243,0.045);
  --line-strong: rgba(236,239,243,0.20);

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Space Mono", "SFMono-Regular", Menlo, monospace;

  /* rhythm — 8pt */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --s8:200px;

  /* motion */
  --e-out:  cubic-bezier(0.16,1,0.3,1);
  --e-soft: cubic-bezier(0.33,0,0.1,1);
  --e-io:   cubic-bezier(0.65,0.05,0.36,1);

  /* layout */
  --gut: clamp(20px, 5vw, 90px);     /* page side gutter */
  --maxw: 1680px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
button{ font-family:inherit; color:inherit; background:none; border:none; }
input,textarea,select{ font-family:inherit; color:inherit; background:none; border:none; outline:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--azure-glow); color:var(--azure-bright); }

/* hide native cursor on fine pointers */
@media (pointer:fine){ html.has-js, html.has-js *{ cursor:none !important; } }

/* ============================================================
   ATMOSPHERE — fixed grain + light bloom over everything
   ============================================================ */
.atmos{ position:fixed; inset:0; pointer-events:none; z-index:3; }
.atmos::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 50% at 12% 0%, rgba(44,154,212,0.07), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(0,0,0,0.5), transparent 60%);
}
.atmos::after{
  content:""; position:absolute; inset:-50%; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.4s steps(3) infinite;
}
@keyframes grain{ 0%,100%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} }

/* cursor torch — a soft light that follows pointer */
.torch{
  position:fixed; top:0; left:0; width:560px; height:560px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(circle, rgba(44,154,212,0.05), rgba(44,154,212,0.02) 35%, transparent 68%);
  transition:opacity 0.6s var(--e-out);
}
html.has-js .torch{ opacity:1; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cur-dot,.cur-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); box-sizing:border-box; }
.cur-dot{ width:5px; height:5px; background:var(--ink); mix-blend-mode:difference; }
.cur-ring{
  width:36px; height:36px; border:1px solid rgba(236,239,243,0.45);
  transition:width .4s var(--e-out), height .4s var(--e-out), border-color .4s var(--e-out), background .4s, opacity .3s;
}
.cur-ring.hover{ width:64px; height:64px; border-color:var(--azure); background:var(--azure-glow); }
.cur-ring.brass{ border-color:var(--brass); background:rgba(194,162,105,0.12); }
.cur-ring.label::after{
  content:attr(data-cur); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
@media (pointer:coarse){ .cur-dot,.cur-ring,.torch{ display:none; } }

/* ---------- Logo mark ---------- */
[data-logo]{ display:inline-block; line-height:0; }
.lazy-bg:not(.lazy-bg--loaded){
  background-color:var(--bg-2);
  background-image:linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg) 100%);
}
.aurum-mark{ width:100%; height:100%; display:block; overflow:visible; }
.aurum-mark .lg-bar{ fill:var(--azure); }
.aurum-mark .lg-v{ stroke:var(--ink); }
.aurum-mark.draw .lg-v{ stroke-dasharray:120; stroke-dashoffset:120; animation:vDraw 1.2s var(--e-out) .3s forwards; }
.aurum-mark.draw .lg-bar{ opacity:0; transform-origin:center top; animation:barIn .7s var(--e-out) forwards; }
.aurum-mark.draw .lg-bar:nth-of-type(1){ animation-delay:.15s; }
.aurum-mark.draw .lg-bar:nth-of-type(2){ animation-delay:.3s; }
.aurum-mark.draw .lg-bar:nth-of-type(3){ animation-delay:.45s; }
@keyframes vDraw{ to{ stroke-dashoffset:0; } }
@keyframes barIn{ from{ opacity:0; transform:scaleX(.4); } to{ opacity:1; transform:scaleX(1); } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:background .5s var(--e-out), padding .5s var(--e-out), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,12,15,0.72); backdrop-filter:blur(16px) saturate(1.2);
  padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.nav-brand{ display:flex; align-items:center; gap:13px; }
.nav-brand .logo{ width:30px; height:30px; flex:none; }
.nav-brand .wm{ font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); }
.nav-brand .wm b{ font-weight:500; color:var(--azure-bright); }

.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,42px); }
.nav-link{
  position:relative; font-family:var(--sans); font-weight:400; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); padding:6px 0;
  transition:color .4s var(--e-out);
}
.nav-link .ix{ font-family:var(--mono); font-size:8.5px; color:var(--azure); margin-right:6px; opacity:.7; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--azure);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-out);
}
.nav-link:hover,.nav-link.active{ color:var(--ink); }
.nav-link:hover::after,.nav-link.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-link.active::after{ background:var(--brass); }

.nav-cta{
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px;
  border:1px solid var(--line-strong); font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink); position:relative; overflow:hidden;
  transition:color .5s var(--e-out), border-color .5s;
}
.nav-cta::before{ content:""; position:absolute; inset:0; background:var(--azure); transform:translateX(-101%); transition:transform .55s var(--e-out); z-index:-1; }
.nav-cta:hover{ color:#06222f; border-color:var(--azure); }
.nav-cta:hover::before{ transform:translateX(0); }

.lang-switch{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}
.lang-switch button{
  background:transparent; border:0; padding:4px 2px; cursor:pointer;
  color:var(--ink-dim); transition:color .3s;
}
.lang-switch button:hover{ color:var(--ink); }
.lang-switch button.is-active{ color:var(--azure-bright); }
.lang-switch .lang-sep{ color:var(--ink-faint); opacity:.55; user-select:none; }

/* Language switcher: keep EN / kn / hi optically equal */
.lang-switch button{
  text-transform:none;
  letter-spacing:0.04em;
  line-height:1.2;
  font-size:10px;
  font-weight:400;
}
.lang-switch button[data-lang-switch="kn"]{
  font-family: system-ui, "Segoe UI", "Noto Sans", sans-serif;
  font-size:9.5px;
  letter-spacing:0;
}
.lang-switch button[data-lang-switch="hi"]{
  font-family: system-ui, "Segoe UI", "Noto Sans", sans-serif;
  font-size:10px;
  letter-spacing:0;
}

/* ---------- Indic languages: match English optical size ---------- */
html[lang="kn"]{
  --serif: "Noto Serif Kannada", "Cormorant Garamond", Georgia, serif;
  --sans:  "Noto Sans Kannada", "Jost", "Helvetica Neue", Arial, sans-serif;
}
html[lang="hi"]{
  --serif: "Noto Serif Devanagari", "Cormorant Garamond", Georgia, serif;
  --sans:  "Noto Sans Devanagari", "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* Wide Latin tracking breaks Indic scripts — normalize UI chrome */
html[lang="kn"] .nav-link,
html[lang="hi"] .nav-link,
html[lang="kn"] .nav-cta,
html[lang="hi"] .nav-cta,
html[lang="kn"] .nav-logout,
html[lang="hi"] .nav-logout,
html[lang="kn"] .kicker,
html[lang="hi"] .kicker,
html[lang="kn"] .cap,
html[lang="hi"] .cap,
html[lang="kn"] .foot-col h3,
html[lang="hi"] .foot-col h3,
html[lang="kn"] .phead .ix-list div .a,
html[lang="hi"] .phead .ix-list div .a{
  text-transform:none;
  letter-spacing:0.01em;
}

/* Room for matras / vowel marks above the headline (shirorekha) */
html[lang="kn"] .nav-link,
html[lang="hi"] .nav-link{
  font-size:13px;
  letter-spacing:0;
  font-weight:400;
  line-height:1.75;
  padding:10px 0 8px;
  overflow:visible;
}
html[lang="kn"] .nav-cta,
html[lang="hi"] .nav-cta{
  font-size:11px;
  letter-spacing:0.02em;
  font-weight:500;
  line-height:1.65;
  padding:12px 16px 11px;
  overflow:hidden; /* keep hover wipe */
  max-width:min(46vw, 260px);
}
html[lang="kn"] .nav-cta span[data-i18n-key],
html[lang="hi"] .nav-cta span[data-i18n-key]{
  line-height:1.65;
  padding-top:0.15em;
  display:inline-block;
  white-space:normal;
  text-align:center;
}
html[lang="kn"] .nav-logout,
html[lang="hi"] .nav-logout{
  line-height:1.7;
  padding-top:10px;
  padding-bottom:8px;
}
html[lang="kn"] .lang-switch button,
html[lang="hi"] .lang-switch button{
  line-height:1.6;
  padding:6px 2px;
}

/* Kicker dash was vertically centered through tall Indic glyphs (= strike-through) */
html[lang="kn"] .kicker,
html[lang="hi"] .kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.02em;
  line-height:1.8;
  align-items:baseline;
  padding-top:0.2em;
  overflow:visible;
}
html[lang="kn"] .kicker::before,
html[lang="hi"] .kicker::before{
  position:relative;
  top:-0.55em; /* sit beside the head-line, not through the glyph body */
  flex:none;
}

html[lang="kn"] .lede,
html[lang="hi"] .lede,
html[lang="kn"] .body,
html[lang="hi"] .body,
html[lang="kn"] .foot-col a,
html[lang="hi"] .foot-col a{
  letter-spacing:0;
  line-height:1.75;
}
html[lang="kn"] .h1,
html[lang="hi"] .h1,
html[lang="kn"] .h2,
html[lang="hi"] .h2{
  letter-spacing:0;
  line-height:1.35;
}
html[lang="kn"] .phead .ix-list div .a,
html[lang="hi"] .phead .ix-list div .a{
  line-height:1.6;
  padding-top:0.15em;
  overflow:visible;
}
html[lang="kn"] .cap,
html[lang="hi"] .cap{
  line-height:1.65;
  overflow:visible;
}

/* Buttons, cards, forms, lists — Latin tracking breaks Indic */
html[lang="kn"] .btn,
html[lang="hi"] .btn,
html[lang="kn"] .text-link,
html[lang="hi"] .text-link,
html[lang="kn"] .follow-card .fc-tag,
html[lang="hi"] .follow-card .fc-tag,
html[lang="kn"] .follow-card .fc-arw,
html[lang="hi"] .follow-card .fc-arw,
html[lang="kn"] .loc-btn-label,
html[lang="hi"] .loc-btn-label,
html[lang="kn"] .ph .ph-tag .a,
html[lang="hi"] .ph .ph-tag .a,
html[lang="kn"] .ph .ph-tag .b,
html[lang="hi"] .ph .ph-tag .b,
html[lang="kn"] .ph .ph-mark,
html[lang="hi"] .ph .ph-mark{
  text-transform:none;
  letter-spacing:0.02em;
  line-height:1.55;
}
html[lang="kn"] .btn,
html[lang="hi"] .btn{
  font-size:11.5px;
  letter-spacing:0.04em;
  line-height:1.6;
  padding-top:18px;
  padding-bottom:17px;
  white-space:normal;
  text-align:center;
}
html[lang="kn"] .follow-card .fc-title,
html[lang="hi"] .follow-card .fc-title{
  letter-spacing:0;
  line-height:1.35;
}
html[lang="kn"] .follow-card .fc-desc,
html[lang="hi"] .follow-card .fc-desc{
  letter-spacing:0;
  line-height:1.65;
}
html[lang="kn"] .loc-btn-label,
html[lang="hi"] .loc-btn-label{
  font-size:11px;
  line-height:1.5;
}
html[lang="kn"] .ca-step,
html[lang="hi"] .ca-step,
html[lang="kn"] .ca-steps-hint,
html[lang="hi"] .ca-steps-hint,
html[lang="kn"] .consult-hint,
html[lang="hi"] .consult-hint,
html[lang="kn"] .cfield label,
html[lang="hi"] .cfield label,
html[lang="kn"] .cq,
html[lang="hi"] .cq,
html[lang="kn"] .chint,
html[lang="hi"] .chint,
html[lang="kn"] .copt-hint,
html[lang="hi"] .copt-hint,
html[lang="kn"] .copt .on-name,
html[lang="hi"] .copt .on-name,
html[lang="kn"] .copt .on-d,
html[lang="hi"] .copt .on-d,
html[lang="kn"] .cback,
html[lang="hi"] .cback,
html[lang="kn"] .cerr,
html[lang="hi"] .cerr,
html[lang="kn"] .city-detect,
html[lang="hi"] .city-detect{
  letter-spacing:0;
  text-transform:none;
  line-height:1.55;
}
html[lang="kn"] .cq,
html[lang="hi"] .cq{
  line-height:1.4;
}
html[lang="kn"] .cfield input,
html[lang="hi"] .cfield input,
html[lang="kn"] .cfield textarea,
html[lang="hi"] .cfield textarea{
  letter-spacing:0;
  line-height:1.5;
}
html[lang="kn"] .svc-name,
html[lang="hi"] .svc-name,
html[lang="kn"] .svc-meta,
html[lang="hi"] .svc-meta,
html[lang="kn"] .svc-hint,
html[lang="hi"] .svc-hint,
html[lang="kn"] .svc-scope,
html[lang="hi"] .svc-scope{
  letter-spacing:0;
  text-transform:none;
  line-height:1.45;
}
html[lang="kn"] .svc-meta,
html[lang="hi"] .svc-meta{
  font-size:11px;
  line-height:1.55;
}
html[lang="kn"] .proj-card .pt,
html[lang="hi"] .proj-card .pt,
html[lang="kn"] .proj-card .pl,
html[lang="hi"] .proj-card .pl,
html[lang="kn"] .proj-card .pn,
html[lang="hi"] .proj-card .pn,
html[lang="kn"] .hpanel-ttl,
html[lang="hi"] .hpanel-ttl,
html[lang="kn"] .mat-name,
html[lang="hi"] .mat-name,
html[lang="kn"] .mat-sub,
html[lang="hi"] .mat-sub,
html[lang="kn"] .pttl,
html[lang="hi"] .pttl,
html[lang="kn"] .pbd,
html[lang="hi"] .pbd,
html[lang="kn"] .pi-name,
html[lang="hi"] .pi-name,
html[lang="kn"] .pi-body,
html[lang="hi"] .pi-body,
html[lang="kn"] .pmeta .pt,
html[lang="hi"] .pmeta .pt,
html[lang="kn"] .loc-meta,
html[lang="hi"] .loc-meta,
html[lang="kn"] .loc-city,
html[lang="hi"] .loc-city,
html[lang="kn"] .manifesto-foot,
html[lang="hi"] .manifesto-foot,
html[lang="kn"] .cta-band .lede,
html[lang="hi"] .cta-band .lede,
html[lang="kn"] .locs-intro,
html[lang="hi"] .locs-intro{
  letter-spacing:0;
  line-height:1.55;
}
html[lang="kn"] .nav-sheet a,
html[lang="hi"] .nav-sheet a{
  letter-spacing:0;
  line-height:1.35;
}
html[lang="kn"] .vx-chat-kicker,
html[lang="hi"] .vx-chat-kicker,
html[lang="kn"] .vx-chat-title,
html[lang="hi"] .vx-chat-title,
html[lang="kn"] .vx-chat-status,
html[lang="hi"] .vx-chat-status,
html[lang="kn"] .vx-chat-status-hint,
html[lang="hi"] .vx-chat-status-hint,
html[lang="kn"] .vx-lead-label,
html[lang="hi"] .vx-lead-label,
html[lang="kn"] .vx-lead-btn,
html[lang="hi"] .vx-lead-btn,
html[lang="kn"] .vx-bubble,
html[lang="hi"] .vx-bubble,
html[lang="kn"] .vx-chat-compose textarea,
html[lang="hi"] .vx-chat-compose textarea{
  letter-spacing:0;
  line-height:1.5;
  text-transform:none;
}

/* Reveal masks only padded for Latin descenders — add top room for Indic matras */
html[lang="kn"].has-js [data-reveal="mask"],
html[lang="hi"].has-js [data-reveal="mask"]{
  overflow:hidden;
  padding-top:0.38em;
  padding-bottom:0.22em;
  margin-top:-0.18em;
  margin-bottom:-0.1em;
}

.nav-logout{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); padding:11px 0 11px 12px; margin-left:4px;
  background:none; border:none; cursor:pointer; transition:color .4s var(--e-out);
}
.nav-logout:hover{ color:var(--brass-bright); }

.nav-burger{ display:none; }
.nav-sheet{ display:none; }
@media (max-width:880px){
  /* Keep EN/ಕನ್ನಡ/हिंदी in the top bar; hide page links / CTA (those live in the sheet) */
  .nav-links{
    display:flex; align-items:center; gap:10px;
    margin-left:auto; margin-right:6px;
  }
  .nav-links .nav-link,
  .nav-links .nav-cta,
  .nav-links .nav-logout{ display:none; }
  .nav-links .lang-switch{ display:inline-flex; flex-shrink:0; }
  .nav-burger{ display:flex; flex-direction:column; gap:5px; padding:8px; flex-shrink:0; }
  .nav-burger span{ width:24px; height:1.5px; background:var(--ink); transition:.4s var(--e-out); }
  .nav-open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav-open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav-sheet{
    display:flex;
    position:fixed; inset:0; z-index:79; background:var(--bg); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:8px; padding:0 var(--gut);
    opacity:0; pointer-events:none; transition:opacity .5s var(--e-out);
  }
  .nav-open .nav-sheet{ opacity:1; pointer-events:auto; }
  .nav-sheet a{ font-family:var(--serif); font-size:42px; font-weight:300; color:var(--ink); }
  .nav-sheet a em{ font-style:normal; color:inherit; }
  .nav-sheet .lang-switch{ display:none !important; }
}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--azure);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:30px; height:1px; background:var(--azure); display:inline-block; }
.kicker.brass{ color:var(--brass); }
.kicker.brass::before{ background:var(--brass); }

.display{
  font-family:var(--serif); font-weight:300; line-height:0.98; letter-spacing:-0.02em; color:var(--ink);
  font-size:clamp(44px, 9vw, 150px);
}
.display em{ font-style:italic; color:var(--azure-bright); }
.display .brass{ color:var(--brass-bright); font-style:italic; }

.h2{
  font-family:var(--serif); font-weight:300; line-height:1.02; letter-spacing:-0.015em; color:var(--ink);
  font-size:clamp(32px, 5vw, 76px);
}
.h2 em{ font-style:italic; color:var(--azure-bright); }
.h2 .brass{ color:var(--brass-bright); font-style:italic; }

.lede{
  font-family:var(--serif); font-weight:400; line-height:1.5; color:var(--ink-soft);
  font-size:clamp(17px, 1.7vw, 24px); max-width:56ch;
}
.body{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); max-width:60ch; }
.cap{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:16px; white-space:nowrap;
  padding:19px 34px; font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); border:1px solid var(--line-strong); overflow:hidden;
  transition:color .5s var(--e-out), border-color .5s var(--e-out);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-101%);
  background:linear-gradient(120deg, var(--azure-deep), var(--azure), var(--azure-bright)); transition:transform .6s var(--e-out); }
.btn:hover{ color:#04222f; border-color:var(--azure); }
.btn:hover::before{ transform:translateX(0); }
.btn .arw{ display:inline-block; transition:transform .5s var(--e-out); }
.btn:hover .arw{ transform:translateX(7px); }
.btn.brass::before{ background:linear-gradient(120deg, var(--brass-deep), var(--brass), var(--brass-bright)); }
.btn.brass:hover{ color:#1c1408; border-color:var(--brass); }
.btn.solid{ background:var(--azure); color:#04222f; border-color:var(--azure); }
.btn.solid::before{ background:linear-gradient(120deg,var(--azure-bright),var(--azure)); }

.link{
  position:relative; font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); padding-bottom:4px; display:inline-flex; align-items:center; gap:9px;
  transition:color .4s var(--e-out);
}
.link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--azure);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-out); }
.link:hover{ color:var(--ink); }
.link:hover::after{ transform:scaleX(1); transform-origin:left; }
.link .arw{ transition:transform .45s var(--e-out); }
.link:hover .arw{ transform:translateX(5px); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }

/* blueprint hairline grid overlay (decorative, architectural) */
.blueprint{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(60px,7vw,120px) clamp(60px,7vw,120px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}

/* image placeholder — structured so real photos slot in */
.ph{ position:relative; overflow:hidden; background:var(--bg-2);
  background-image:repeating-linear-gradient(135deg, rgba(44,154,212,0.05) 0 2px, transparent 2px 22px); }
.ph[data-img]{ background-image:none; }
.ph .ph-tag{ position:absolute; left:18px; bottom:16px; display:flex; flex-direction:column; gap:4px; z-index:2; }
.ph .ph-tag .a{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--azure); }
.ph .ph-tag .b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.ph .ph-mark{ position:absolute; top:16px; right:18px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; }
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,12,15,.5)); }

/* corner ticks (technical drawing flavor) */
.ticks::before,.ticks::after{ content:""; position:absolute; width:14px; height:14px; border:1px solid var(--line-strong); }
.ticks::before{ top:0; left:0; border-right:0; border-bottom:0; }
.ticks::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* ============================================================
   SCROLL REVEAL (own IO — degrades to visible)
   ============================================================ */
.has-js [data-reveal]{ opacity:0; transform:translateY(28px); }
.has-js [data-reveal="mask"]{ transform:none; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em; }
.has-js [data-reveal="mask"] > *{ display:block; transform:translateY(108%); }
/* First viewport must paint immediately — LCP was stuck on opacity:0 hero text */
.has-js .hero [data-reveal],
.has-js .phead [data-reveal]{
  opacity:1;
  transform:none;
}
.has-js .hero [data-reveal="mask"] > *,
.has-js .phead [data-reveal="mask"] > *{
  transform:none;
}
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity 1s var(--e-out), transform 1.1s var(--e-out); }
[data-reveal="mask"].is-in > *{ transform:translateY(0); transition:transform 1.05s var(--e-out); }
.reveal-all [data-reveal]{ opacity:1 !important; transform:none !important; }
.reveal-all [data-reveal="mask"] > *{ transform:none !important; }
@media (prefers-reduced-motion:reduce){
  .has-js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .has-js [data-reveal="mask"] > *{ transform:none !important; }
}
[data-stagger] > *{ --d:calc(var(--i,0) * 90ms); }
[data-reveal].is-in[data-d]{ transition-delay:var(--d,0ms); }

/* scroll progress bar */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--azure-deep),var(--azure-bright)); z-index:90; }

/* split-header pattern: title block always gets priority over the side paragraph */
.rooms-head > div:first-child,
.feat-head > div:first-child,
.ba-head > div:first-child{ flex:1 1 520px; min-width:min(100%,420px); }
.rooms-head > .body,
.feat-head > .link,
.ba-head > .body{ flex:0 1 360px; }

/* ============================================================
   FOLLOW & RESOURCES
   ============================================================ */
.follow{ padding:var(--s7) var(--gut); border-top:1px solid var(--line-soft); }
.follow-head{ max-width:52ch; }
.follow-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
  margin-top:var(--s4);
}
.follow-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:linear-gradient(165deg, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg) 100%);
  border:1px solid var(--line);
  padding:clamp(22px,3.2vw,40px);
  position:relative;
  overflow:hidden;
  color:inherit;
  transition:border-color .45s var(--e-out), background .45s var(--e-out), transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.follow-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--azure), transparent);
  opacity:0;
  transition:opacity .45s var(--e-out);
}
.follow-card::after{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:12px; height:12px;
  border-top:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong);
  opacity:.45;
  transition:opacity .4s, border-color .4s;
}
.follow-card:hover{
  border-color:var(--line-strong);
  background:var(--bg-2);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,0.28);
}
.follow-card:hover::before{ opacity:1; }
.follow-card:hover::after{ opacity:.85; border-color:var(--azure); }
.follow-card--yt:hover::before{ background:linear-gradient(90deg, transparent, rgba(255,77,77,0.85), transparent); }
.follow-card--fb:hover::before{ background:linear-gradient(90deg, transparent, rgba(107,156,255,0.85), transparent); }
.follow-card--ig:hover::before{ background:linear-gradient(90deg, transparent, rgba(232,180,207,0.85), transparent); }
.follow-card--wa:hover::before{ background:linear-gradient(90deg, transparent, rgba(37,211,102,0.85), transparent); }
.follow-card--pdf:hover::before{ background:linear-gradient(90deg, transparent, var(--brass-bright), transparent); }
.follow-card .fc-head{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,2vw,20px); }
.follow-card .fc-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--line);
  flex-shrink:0;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.02);
  transition:border-color .4s, color .4s, background .4s;
}
.follow-card .fc-icon svg{ width:18px; height:18px; fill:currentColor; }
.follow-card:hover .fc-icon{ border-color:var(--line-strong); color:var(--ink); }
.follow-card--yt:hover .fc-icon{ color:#ff6b6b; border-color:rgba(255,107,107,0.35); background:rgba(255,77,77,0.08); }
.follow-card--fb:hover .fc-icon{ color:#7aabff; border-color:rgba(122,171,255,0.35); background:rgba(107,156,255,0.08); }
.follow-card--ig:hover .fc-icon{ color:#e8b4cf; border-color:rgba(232,180,207,0.35); background:rgba(232,180,207,0.08); }
.follow-card--wa:hover .fc-icon{ color:#7EE2A8; border-color:rgba(37,211,102,0.4); background:rgba(37,211,102,0.1); }
.follow-card--pdf:hover .fc-icon{ color:var(--brass-bright); border-color:rgba(194,162,105,0.35); background:rgba(194,162,105,0.08); }
.follow-card .fc-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--azure); margin-bottom:0; }
.follow-card .fc-body{ flex:1; display:flex; flex-direction:column; }
.follow-card .fc-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.14; color:var(--ink);
  margin:0;
}
.follow-card .fc-desc{
  font-size:clamp(13px,1.4vw,14px);
  color:var(--ink-soft);
  margin:10px 0 0;
  line-height:1.6;
  max-width:42ch;
}
.follow-card .fc-arw{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:clamp(18px,2.5vw,26px);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--azure-bright);
  transition:transform .4s var(--e-out), color .4s;
}
.follow-card:hover .fc-arw{ transform:translateX(4px); }
.follow-card--pdf .fc-tag{ color:var(--brass); }
.follow-card--pdf .fc-arw{ color:var(--brass-bright); }
.follow-card--ig .fc-tag{ color:#e8b4cf; }
.follow-card--wa .fc-tag{ color:#7EE2A8; }
.follow-card--wa .fc-arw{ color:#7EE2A8; }

/* Studio card WhatsApp action (Contact locations) */
.loc-btn--wa{
  grid-template-rows:1fr;
  min-height:44px;
  border-color:rgba(37,211,102,0.28);
  color:#7EE2A8;
  background:linear-gradient(135deg, rgba(37,211,102,0.1), rgba(37,211,102,0.04));
}
.loc-btn--wa .loc-btn-label{ grid-column:2; }
.loc-btn--wa:hover{
  border-color:#25D366;
  color:#04220f;
  background:#25D366;
}
.loc-btn--wa:hover svg{ opacity:1; }
@media (max-width:1024px){
  .follow-grid{ gap:12px; }
  .follow-card{ padding:22px 20px; }
  .follow-card .fc-desc{ max-width:none; }
}
@media (max-width:640px){
  .follow{ padding:var(--s5) var(--gut); }
  .follow-grid{ grid-template-columns:1fr; gap:12px; }
  .follow-card{
    min-height:auto;
    padding:22px 20px 24px;
  }
  .follow-card:hover{ transform:none; box-shadow:none; }
  .follow-card:active{ background:var(--bg-2); border-color:var(--line-strong); }
  .follow-card .fc-icon{ width:40px; height:40px; }
  .follow-card .fc-title{ font-size:clamp(20px,5.2vw,26px); }
  .follow-card .fc-arw{ margin-top:20px; min-height:44px; align-items:center; }
}
@media (max-width:520px){
  .follow-head .h2{ font-size:clamp(28px,7.5vw,40px); }
  .follow-card{ padding:20px 18px 22px; }
  .follow-card::after{ top:12px; right:12px; width:10px; height:10px; }
}
@media (hover:none){
  .follow-card:hover{ transform:none; box-shadow:none; }
}
.foot-soc-row{ display:flex; align-items:center; gap:14px; margin:6px 0 12px; }
.foot-soc{ display:inline-flex !important; align-items:center; justify-content:center; width:22px; height:22px; margin-bottom:0 !important; gap:0; }
.foot-soc .soc-icon{ width:20px; height:20px; flex-shrink:0; opacity:1; fill:currentColor; transition:transform .3s, opacity .3s; }
.foot-soc:hover .soc-icon{ opacity:.85; transform:scale(1.08); }
.foot-col .foot-soc:hover{ color:inherit; }
.foot-soc-yt .soc-icon path{ fill:#FF0000; }
.foot-soc-fb .soc-icon path{ fill:#1877F2; }
.foot-soc-ig .soc-icon{ fill:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ position:relative; padding:var(--s7) var(--gut) var(--s4); border-top:1px solid var(--line); background:var(--bg-1); overflow:hidden; }
.foot-cta{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,8vw,124px); line-height:0.95; letter-spacing:-0.02em; }
.foot-cta em{ font-style:italic; color:var(--azure-bright); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s4); margin-top:var(--s6); }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s3); } }
.foot-col h3{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:var(--s2); }
.foot-col a,.foot-col p{ display:block; font-size:14px; color:var(--ink-soft); margin-bottom:9px; transition:color .3s; }
.foot-col a:hover{ color:var(--azure-bright); }
.foot-iso{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); margin-top:14px; max-width:34ch;
  line-height:1.55; transition:color .3s;
}
.foot-iso:hover{ color:var(--brass-bright); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line-soft); }
.foot-bottom .cap{ font-size:10px; }
.foot-watermark{ position:absolute; bottom:-4%; left:50%; transform:translateX(-50%); font-family:var(--serif); font-weight:300; font-size:26vw; color:rgba(236,239,243,0.018); white-space:nowrap; pointer-events:none; z-index:0; font-style:italic; }

/* ============================================================
   PAGE INTRO LOADER
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:200; background:#06080A; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; }
.loader.done{ opacity:0; pointer-events:none; transition:opacity .8s var(--e-out); }
.loader-logo{ width:64px; height:64px; opacity:0; transform:translateY(10px); animation:lIn .9s var(--e-out) .1s forwards; }
@keyframes lIn{ to{opacity:1; transform:none;} }
.loader-bar{ width:160px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader-bar i{ position:absolute; inset:0; background:var(--azure); transform-origin:left; transform:scaleX(0); animation:lBar 1.4s var(--e-soft) .2s forwards; }
@keyframes lBar{ to{ transform:scaleX(1); } }
.loader-word{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); }

.skip-link{ position:fixed; top:-60px; left:var(--gut); z-index:300; background:var(--azure); color:#04222f; padding:10px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; transition:top .3s; }
.skip-link:focus{ top:14px; }

/* Cursor label — shows material name inside ring */
.cur-ring.label {
  width: 72px !important;
  height: 72px !important;
  border-color: var(--azure) !important;
  background: rgba(10,12,15,0.7) !important;
  backdrop-filter: blur(6px);
}
.cur-ring.label::after {
  content: attr(data-cur);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.cur-ring.brass.label {
  border-color: var(--brass) !important;
  background: rgba(20,15,5,0.7) !important;
}
.cur-ring.brass.label::after {
  color: var(--brass-bright);
}

/* Material card cursor — larger ring with name */
.mat:hover ~ .cur-ring,
.matcard:hover ~ .cur-ring {
  width: 80px !important;
  height: 80px !important;
}

/* Room tab cursor interaction */
.room-tab { cursor: none; }

/* Project card cursor */
.proj-card { cursor: none; }

/* Service row cursor */
.svc-row { cursor: none; }