/* ===================================================================
   RUPESH INTERIO — Interior Design & Architecture
   Design tokens (Livspace-inspired refresh)
   Color   : #FFFFFF (paper) · #1c1d21 (ink/charcoal) · #2a2b30 (graphite)
             #6B6D76 (slate) · #EEF1F4 (mist) · #FF5A36 (coral — primary accent)
             #2F6FED (blue — secondary accent)
   Type    : "Poppins" (display/headings) / "Inter" (body)
   Layout  : bright, clean, card-based grid with rounded corners and soft
             shadows — modern conversion-focused layout in the spirit of
             leading Indian interior-design platforms.
   =================================================================== */

:root{
  --paper:#ffffff;
  --ink:#1c1d21;
  --graphite:#2a2b30;
  --graphite-soft:#3a3b42;
  --slate:#6b6d76;
  --mist:#eef1f4;
  --mist-2:#f7f8fa;
  --brass:#ff5a36;
  --brass-light:#ff7f62;
  --gold:#2f6fed;
  --gold-light:#5b8cff;
  --gold-soft:#eaf1ff;
  --emerald:#16a34a;
  --line:rgba(20,22,30,0.10);
  --line-invert:rgba(255,255,255,0.14);
  --luxe-grad:linear-gradient(135deg, var(--brass) 0%, var(--gold) 100%);

  --font-display:'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-paragraph:'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container:1360px;
  --gutter:clamp(20px, 4vw, 64px);

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

  --gold-grad:linear-gradient(120deg,#e8431f 0%,#ff5a36 32%,#ff9478 50%,#ff5a36 68%,#e8431f 100%);
  --shadow-soft:0 14px 40px -18px rgba(20,22,30,.14);
  --shadow-premium:0 30px 70px -24px rgba(20,22,30,.22);
  --radius-lg:20px;
  --radius-md:12px;
  --topbar-h:42px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@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;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-fluid-pad{ padding:0 var(--gutter); }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0;
}
/* Title font utility — apply to any heading/title element */
.comic-relief-bold {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
}
.h-display{ font-size:clamp(2.4rem, 5.4vw, 4.9rem); font-weight:700; }
.h-xl{ font-size:clamp(2rem, 4.2vw, 3.5rem); font-weight:700; letter-spacing:-0.01em; }
.h-lg{ font-size:clamp(1.7rem, 3vw, 2.5rem); font-weight:700; letter-spacing:-0.01em; }
.h-md{ font-size:clamp(1.3rem, 1.8vw, 1.7rem); font-weight:700; }
.h-italic{
  font-style:normal; font-weight:700;
  background:var(--gold-grad); background-size:220% auto; background-position:0% center;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldShine 7s linear infinite;
}
@keyframes goldShine{ to{ background-position:220% center; } }

p{ margin:0; font-family:var(--font-paragraph); }
.lede{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--slate); line-height:1.7; font-family:var(--font-paragraph); }
.body-sm{ font-size:.92rem; color:var(--slate); font-family:var(--font-paragraph); }

.label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--slate);
}
.label .num{ color:var(--brass); font-weight:700; margin-right:.5em; }

/* ---------- Premium section title (v3) — kicker bar + icon, no pill ---------- */
.label.tag{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:0 0 0 1rem; border:0; border-radius:16px; background:none; color:var(--ink);
  text-transform:uppercase; position:relative;
}
.label.tag::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:1.35em; background:var(--brass); border-radius:16px;
}
.label.tag .num{
  width:auto; height:auto; margin-right:0; background:none; animation:none; border-radius:16px;
  color:var(--brass); font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.bg-ink .label.tag{ color:var(--paper); }
.section-head{ position:relative; }
.section-head h2{ margin-top:.9rem; }
.section-head h2::after{
  content:''; display:flex; align-items:center; width:60px; height:3px; margin-top:1.15rem;
  background:var(--brass); border-radius:16px;
}
.bg-ink .section-head h2::after{ background:var(--brass-light); }
.label.tag{ font-weight:700; letter-spacing:.14em; font-size:.78rem; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule-invert{ height:1px; background:var(--line-invert); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn-atelier{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:1.05rem 1.9rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.btn-atelier:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.btn-atelier::before{
  content:'';
  position:absolute; inset:0;
  background:var(--brass);
  transform:translateY(101%);
  transition:transform var(--dur-m) var(--ease);
  z-index:-1;
}
.btn-atelier:hover::before{ transform:translateY(0); }
.btn-atelier:hover{ color:var(--paper); border-color:var(--brass); }
.btn-atelier::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .85s var(--ease); pointer-events:none;
}
.btn-atelier:hover::after{ left:120%; }

.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-outline::before{ background:var(--ink); }
.btn-outline:hover{ color:var(--paper); border-color:var(--ink); }

.btn-outline-invert{
  background:transparent;
  color:var(--paper);
  border:1px solid var(--line-invert);
}
.btn-outline-invert::before{ background:var(--paper); }
.btn-outline-invert:hover{ color:var(--ink); border-color:var(--paper); }

.btn-sm{ padding:.8rem 1.4rem; font-size:.82rem; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-weight:600;
  font-size:.92rem;
  padding-bottom:.2rem;
  border-bottom:1px solid var(--line);
  transition:border-color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease);
}
.link-arrow i{ transition:transform var(--dur-s) var(--ease); }
.link-arrow:hover{ border-color:var(--ink); gap:.85rem; }
.link-arrow:hover i{ transform:translateX(3px); }

/* Magnetic wrapper target */
.magnetic{ display:inline-block; will-change:transform; }

/* ---------- Section rhythm ---------- */
.section{ padding:clamp(56px,7vw,110px) 0; }
.section-tight{ padding:clamp(40px,5vw,72px) 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:clamp(32px,4vw,56px);
}
.section-head .tag{ margin-bottom:1.1rem; display:block; }
.bg-ink{ background:var(--ink); color:var(--paper); }
.bg-ink .slate-invert{ color:#9c9da2; }
.bg-mist{ background:var(--mist-2); }

/* ===================== PRELOADER ===================== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(150deg, #15161a 0%, #2a2b30 48%, #15161a 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.6rem;
  transition:transform 1s var(--ease);
  overflow:hidden;
}
#preloader.done{ transform:translateY(-100%); }
.pre-glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,111,237,.28), transparent 68%);
  opacity:0; animation:preGlow 1.8s var(--ease) forwards;
}
@keyframes preGlow{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
.pre-mark{
  width:56px; height:56px; border:1px solid var(--brass); position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(45deg) scale(0); opacity:0;
  animation:preMarkIn .8s var(--ease) .1s forwards;
}
.pre-mark::before{ content:''; position:absolute; inset:-9px; border:1px solid var(--line-invert); }
.pre-mark i{
  font-family:var(--font-accent); font-weight:600; font-size:1.5rem; color:var(--brass);
  transform:rotate(-45deg); font-style:normal;
}
.pre-mark i::before{ content:'R'; }
@keyframes preMarkIn{ to{ transform:rotate(45deg) scale(1); opacity:1; } }
.pre-word{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--paper);
  font-size:clamp(1.6rem,4vw,2.6rem);
  overflow:hidden; position:relative; z-index:1;
}
.pre-word span{ display:inline-block; opacity:0; transform:translateY(60%); animation:preIn .7s var(--ease) forwards; }
@keyframes preIn{ to{ opacity:1; transform:translateY(0); } }
.pre-bar{ position:relative; z-index:1; width:min(280px,54vw); height:1px; background:var(--line-invert); overflow:hidden; }
.pre-bar span{ display:block; height:100%; width:0%; background:var(--gold-grad); background-size:300% auto; animation:preBar 1.6s var(--ease) forwards .9s, preBarShine 1.4s linear infinite .9s; }
@keyframes preBar{ to{ width:100%; } }
@keyframes preBarShine{ to{ background-position:300% center; } }

/* ===================== SIGNATURE TOP HAIRLINE ===================== */
.site-hairline{
  position:fixed; top:0; left:0; right:0; z-index:1002; height:3px;
  background:var(--gold-grad); background-size:200% auto;
  animation:goldShine 9s linear infinite;
}

/* ===================== TOP UTILITY BAR ===================== */
.header-topbar{
  position:relative; z-index:1001; height:var(--topbar-h);
  background:var(--ink); color:#c9c9c8; font-size:.8rem; font-weight:500;
  border-bottom:1px solid var(--line-invert);
}
.header-topbar .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; }
.topbar-info{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.topbar-info a{ color:#c9c9c8; display:inline-flex; align-items:center; gap:.5rem; transition:color var(--dur-s) var(--ease); }
.topbar-info a:hover{ color:var(--brass-light); }
.topbar-info i{ color:var(--paper); font-size:.82rem; }
.topbar-social{ display:flex; align-items:center; gap:1rem; }
.topbar-social a{ color:#c9c9c8; font-size:.86rem; transition:color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); }
.topbar-social a:hover{ color:var(--brass-light); transform:translateY(-2px); }
@media (max-width:767px){ .topbar-info .d-topbar-hide-sm{ display:none; } }
@media (max-width:560px){ .header-topbar{ height:auto; padding:8px 0; } .header-topbar .container{ flex-wrap:wrap; gap:.5rem .9rem; justify-content:center; } }

/* ===================== HEADER — a distinct solid bar, always separate from the hero below ===================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  padding:22px 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:padding var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.site-header.is-solid{
  padding:14px 0;
  box-shadow:0 10px 30px -18px rgba(20,22,30,.25);
  backdrop-filter:blur(14px) saturate(140%);
}

.logo{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--ink);
  letter-spacing:.01em;
  transition:color var(--dur-m) var(--ease);
}
.logo em{ font-style:italic; color:var(--brass); }
.logo-mark{
  width:38px; height:38px; flex:none; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:1.15rem;
  color:var(--brass); border:1px solid var(--brass);
  transform:rotate(45deg);
  transition:transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
.logo-mark::before{
  content:''; position:absolute; inset:-6px; border:1px solid var(--line);
}
.logo-mark span,.logo-mark{ line-height:1; }
.logo-mark::after{ content:'R'; transform:rotate(-45deg); display:block; }
.logo-mark{ font-size:0; }
.logo:hover .logo-mark{ transform:rotate(225deg); background:var(--brass); }
.logo:hover .logo-mark::after{ color:var(--paper); }
.footer-brand .logo-mark::before{ border-color:var(--line-invert); }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.nav-link{
  position:relative;
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
  padding:.3rem 0 .3rem 1.05rem;
  transition:color var(--dur-m) var(--ease);
}
.nav-link::before{
  content:''; position:absolute; left:0; top:50%; width:5px; height:5px; background:var(--brass);
  transform:translateY(-50%) scale(0); transition:transform var(--dur-s) var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:1.05rem; bottom:-2px; height:1px; width:0;
  background:currentColor; transition:width var(--dur-s) var(--ease);
}
.nav-link:hover::after,.nav-link.active::after{ width:calc(100% - 1.05rem); }
.nav-link:hover::before,.nav-link.active::before{ transform:translateY(-50%) scale(1); }
.nav-link.active{ color:var(--brass) !important; }

.header-cta{ display:flex; align-items:center; gap:1.6rem; }
.burger{
  width:44px; height:44px; border:1px solid var(--line); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; transform:rotate(45deg); transition:background var(--dur-s) var(--ease), border-color var(--dur-m) var(--ease);
}
@media (min-width:992px){ .burger{ display:none; } }
.burger span{ width:16px; height:1px; background:var(--ink); transition:all var(--dur-s) var(--ease); transform:rotate(-45deg); }
.burger span:nth-child(2){ width:10px; align-self:flex-end; margin-right:3px; }
.burger:hover{ background:var(--brass); border-color:var(--brass); }
.burger:hover span{ background:var(--paper); width:16px; }

/* Mobile drawer */
.nav-drawer{
  position:fixed; inset:0 0 0 auto; width:min(440px,92vw); height:100%;
  background:var(--ink); color:var(--paper); z-index:1200; overflow:hidden;
  transform:translateX(100%); transition:transform .7s var(--ease);
  padding:100px 48px 48px; display:flex; flex-direction:column; justify-content:space-between;
  border-left:1px solid var(--line-invert);
}
.nav-drawer::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-grad);
  background-size:200% auto; animation:goldShine 9s linear infinite;
}
.nav-drawer::after{
  content:''; position:absolute; right:-140px; bottom:-140px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,54,.28), transparent 70%); pointer-events:none;
}
.nav-drawer.open{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:32px; right:32px; width:44px; height:44px; z-index:2;
  border:1px solid var(--line-invert); background:none; color:var(--paper); font-size:1.05rem;
  transform:rotate(45deg); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.drawer-close i{ transform:rotate(-45deg); }
.drawer-close:hover{ background:var(--brass); border-color:var(--brass); color:var(--paper); }
.drawer-links{ display:flex; flex-direction:column; gap:.4rem; position:relative; z-index:2; }
.drawer-links a{
  font-family:var(--font-display); font-size:2.1rem; padding:.5rem 0; color:var(--paper);
  border-bottom:1px solid var(--line-invert); display:flex; align-items:center; gap:.6rem;
  transition:color var(--dur-s) var(--ease), padding-left var(--dur-s) var(--ease),
    opacity .6s var(--ease), transform .6s var(--ease);
  opacity:0; transform:translateX(24px);
}
.nav-drawer.open .drawer-links a{ opacity:1; transform:translateX(0); }
.drawer-links a:nth-child(1){ transition-delay:.08s; }
.drawer-links a:nth-child(2){ transition-delay:.14s; }
.drawer-links a:nth-child(3){ transition-delay:.20s; }
.drawer-links a:nth-child(4){ transition-delay:.26s; }
.drawer-links a:nth-child(5){ transition-delay:.32s; }
.drawer-links a:nth-child(6){ transition-delay:.38s; }
.drawer-links a:nth-child(7){ transition-delay:.44s; }
.drawer-links a:hover{ color:var(--brass-light); padding-left:.6rem; }
.drawer-links a small{ font-family:var(--font-accent); font-style:italic; color:var(--slate); font-size:.9rem; margin-left:auto; }
.drawer-scrim{
  position:fixed; inset:0; background:rgba(28,29,33,.6); backdrop-filter:blur(2px); z-index:1100;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.drawer-scrim.open{ opacity:1; pointer-events:auto; }
.drawer-meta{ display:flex; flex-direction:column; gap:.6rem; position:relative; z-index:2; }
.drawer-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.drawer-social a{
  width:38px; height:38px; border:1px solid var(--line-invert); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.drawer-social a:hover{ background:var(--gold-grad); border-color:transparent; color:var(--paper); transform:translateY(-3px); }

/* ===================== HERO SLIDER — split: content one side, image the other ===================== */
.hero-slider{
  position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink);
}
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  display:flex; flex-direction:row-reverse; align-items:stretch;
  transition:opacity .9s var(--ease);
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide .media{
  position:relative; flex:1 1 52%; max-width:52%; height:100%;
  display:flex; box-sizing:border-box;
  padding:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) 0;
}
.hero-media-frame{
  position:relative; flex:1; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(20,22,30,.55);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease);
}
.hero-media-frame::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid rgba(255,255,255,.28);
}
.hero-slide.active .hero-media-frame{ clip-path:inset(0 0 0 0); transition-delay:.1s; }
.hero-media-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.16);
  transition:transform 7s linear;
}
.hero-slide.active .hero-media-frame img{ transform:scale(1.0); }
.hero-media-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(20,22,30,.32) 0%, rgba(20,22,30,.04) 34%, rgba(20,22,30,.12) 100%);
}
.hmf-tag{
  position:absolute; z-index:4; top:16px; left:16px;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
  background:rgba(20,22,30,.22); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); padding:.4rem .85rem;
  opacity:0; transform:translateY(-8px); transition:all .8s var(--ease) .5s;
}
.hero-slide.active .hmf-tag{ opacity:1; transform:translateY(0); }
@media (max-width:900px){ .hmf-tag{ top:10px; left:10px; font-size:.66rem; padding:.32rem .7rem; } }
.hero-inner{
  position:relative; z-index:3; flex:1 1 48%; max-width:48%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:56px clamp(28px,4.6vw,80px) 56px var(--gutter);
  background:var(--ink);
  overflow-y:auto;
}
.hero-inner::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 15% 15%, rgba(47,111,237,.16), transparent 55%);
  animation:heroGlowBreathe 7s ease-in-out infinite;
}
@keyframes heroGlowBreathe{
  0%,100%{ background:radial-gradient(circle at 15% 15%, rgba(47,111,237,.16), transparent 55%); }
  50%{ background:radial-gradient(circle at 22% 24%, rgba(47,111,237,.28), transparent 60%); }
}
.hero-eyebrow{ color:#d9d9d8; display:flex; align-items:center; gap:.9rem; margin-bottom:1.6rem; position:relative; padding-bottom:1rem; }
.hero-eyebrow::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition:width .9s var(--ease) .3s; }
.hero-slide.active .hero-eyebrow::after{ width:56px; }
.hero-eyebrow .no{ font-family:var(--font-accent); font-style:italic; color:var(--brass); font-size:1.1rem; }
.hero-title{
  color:var(--paper); font-size:clamp(2.1rem,3.4vw,3.7rem); max-width:14ch;
}
.hero-title .line{ overflow:hidden; }
.hero-title .line span{ display:inline-block; transform:translateY(115%); transition:transform 1s var(--ease); }
.hero-slide.active .hero-title .line span{ transform:translateY(0); }
.hero-slide.active .hero-title .line:nth-child(2) span{ transition-delay:.08s; }
.hero-text{ color:#d9d9d8; max-width:40ch; margin-top:1.6rem; font-size:1.02rem; opacity:0; transform:translateY(16px); transition:all .9s var(--ease) .4s; }
.hero-slide.active .hero-text{ opacity:1; transform:translateY(0); }
.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; opacity:0; transform:translateY(16px); transition:all .9s var(--ease) .55s; }
.hero-slide.active .hero-actions{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .hero-slide{ flex-direction:column; }
  .hero-slide .media{ flex:0 0 40%; max-width:100%; height:40%; padding:14px var(--gutter) 0; }
  .hero-inner{ flex:1 1 60%; max-width:100%; height:60%; padding:26px var(--gutter) 30px; }
  .hero-title{ font-size:clamp(1.7rem,6vw,2.6rem); max-width:none; }
  .hero-text{ margin-top:1rem; font-size:.94rem; }
  .hero-actions{ margin-top:1.5rem; }
  .hero-eyebrow{ margin-bottom:.9rem; }
}
@media (max-width:560px){
  .hero-slider{ min-height:100svh; }
  .hero-slide .media{ flex-basis:34%; height:34%; padding:10px var(--gutter) 0; }
  .hero-inner{ flex-basis:66%; height:66%; padding:20px var(--gutter) 24px; }
}

.hero-frame{ position:absolute; inset:clamp(18px,3vw,40px); z-index:4; pointer-events:none; }
.hero-frame i{ position:absolute; width:26px; height:26px; border-color:rgba(255,255,255,.65); font-style:normal; }
.hero-frame i:nth-child(1){ top:0; left:0; border-top:1px solid; border-left:1px solid; }
.hero-frame i:nth-child(2){ top:0; right:0; border-top:1px solid; border-right:1px solid; }
.hero-frame i:nth-child(3){ bottom:0; left:0; border-bottom:1px solid; border-left:1px solid; }
.hero-frame i:nth-child(4){ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }

/* ---------- Rotating seal badge, sits on the split between content & image ---------- */
.hero-badge{
  position:absolute; z-index:5; width:112px; height:112px;
  left:48%; bottom:140px; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.hero-badge-ring{ width:100%; height:100%; color:var(--paper); animation:heroBadgeSpin 20s linear infinite; }
@keyframes heroBadgeSpin{ to{ transform:rotate(360deg); } }
.hero-badge-center{
  position:absolute; width:44px; height:44px; border-radius:50%; background:var(--brass);
  display:flex; align-items:center; justify-content:center; color:var(--paper); font-size:.98rem;
  box-shadow:0 14px 30px -10px rgba(20,22,30,.7);
  animation:heroBadgePulse 3.2s ease-in-out infinite;
}
@keyframes heroBadgePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@media (max-width:900px){ .hero-badge{ display:none; } }

/* ---------- Floating trust card on the image half ---------- */
.hero-trust-card{
  position:absolute; z-index:5; right:clamp(28px,4vw,60px); bottom:76px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  padding:14px 18px; max-width:220px;
  box-shadow:0 24px 50px -18px rgba(20,22,30,.5);
  animation:heroTrustFloat 5s ease-in-out infinite;
}
@keyframes heroTrustFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.htc-stars{ color:var(--gold); font-size:.72rem; letter-spacing:2px; margin-bottom:.4rem; }
.htc-text{ font-size:.8rem; line-height:1.4; color:var(--graphite); }
.htc-text strong{ color:var(--brass); font-family:var(--font-display); font-size:.95rem; }
@media (max-width:900px){ .hero-trust-card{ display:none; } }

/* ---------- Bottom ticker strip ---------- */
.hero-ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:4; height:38px;
  background:rgba(0,0,0,.22); border-top:1px solid var(--line-invert);
  overflow:hidden; display:flex; align-items:center;
}
.hero-ticker-track{
  display:flex; align-items:center; gap:.6rem; width:max-content; white-space:nowrap;
  animation:heroTickerScroll 26s linear infinite;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:#d9d9d8; font-weight:600;
}
.hero-ticker-track .dot{ color:var(--brass); }
@keyframes heroTickerScroll{ to{ transform:translateX(-50%); } }
@media (max-width:900px){ .hero-ticker{ display:none; } .hero-chrome{ bottom:0; } }

.hero-chrome{
  position:absolute; left:0; right:0; bottom:38px; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter) 22px; max-width:var(--container); margin:0 auto; width:100%;
}
.hero-progress{ display:flex; align-items:center; gap:.9rem; }
.hero-dots{ display:flex; gap:8px; }
.hero-dots button{
  width:34px; height:2px; background:rgba(255,255,255,.35); border:0; padding:0; position:relative; overflow:hidden;
  transition:background var(--dur-s) var(--ease); cursor:pointer;
}
.hero-dots button:hover{ background:rgba(255,255,255,.6); }
.hero-dots button span{ position:absolute; inset:0; background:var(--brass); transform:scaleX(0); transform-origin:left; }
.hero-dots button.active span{ animation:heroFill 6s linear forwards; }
@keyframes heroFill{ to{ transform:scaleX(1); } }
.hero-count{ color:#c9c9c8; font-size:.82rem; letter-spacing:.02em; }
.hero-arrows{ display:flex; gap:.6rem; }
.hero-arrows button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line-invert); background:transparent; color:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) var(--ease);
}
.hero-arrows button:hover{ background:var(--paper); color:var(--ink); }
.hero-scroll{ position:absolute; right:var(--gutter); top:0; bottom:0; z-index:4; display:flex; align-items:center; }
@media (max-width:767px){ .hero-scroll{ display:none; } }
.hero-scroll span{
  writing-mode:vertical-rl; color:#c9c9c8; font-size:.78rem; letter-spacing:.08em; display:flex; align-items:center; gap:.8rem;
}
.hero-scroll .stem{ width:1px; height:70px; background:var(--line-invert); position:relative; overflow:hidden; }
.hero-scroll .stem::after{ content:''; position:absolute; top:0; left:0; width:100%; height:30%; background:var(--brass); animation:scrollStem 2.4s var(--ease) infinite; }
@keyframes scrollStem{ 0%{ top:-30%;} 100%{ top:100%;} }

/* ===================== REVEALS ===================== */
[data-reveal]{ opacity:0; transition:opacity 1s var(--ease), transform 1s var(--ease); will-change:transform,opacity; }
[data-reveal="up"]{ transform:translateY(46px); }
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0% 0); }

/* ===================== INTRO / ABOUT ===================== */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(50px,7vw,100px); align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:70px; } }

/* ---------- About v2 (index page): copy-first with photo collage ---------- */
.about-grid-v2{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
@media (max-width:900px){ .about-grid-v2{ grid-template-columns:1fr; gap:56px; } }
.about-copy-v2{ min-width:0; }
.about-collage{ position:relative; height:clamp(320px,38vw,480px); }
.ac-photo{ position:absolute; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); }
.ac-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-photo-a{ width:74%; height:82%; top:0; right:0; z-index:1; }
.ac-photo-b{ width:50%; height:54%; left:0; bottom:0; z-index:2; border:7px solid var(--paper); box-shadow:var(--shadow-premium); }
.ac-stat{
  position:absolute; left:2%; top:4%; z-index:3; background:var(--ink); color:var(--paper);
  padding:1rem 1.2rem; border-radius:16px; text-align:center; box-shadow:var(--shadow-premium); line-height:1.3;
}
.ac-stat .num{ font-family:var(--font-display); font-size:1.7rem; display:block; }
.ac-stat .num small{ font-size:.6em; }
.ac-stat .txt{ font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; opacity:.82; }
@media (max-width:560px){
  .about-collage{ height:clamp(280px,90vw,380px); }
  .ac-stat{ padding:.8rem .9rem; }
  .ac-stat .num{ font-size:1.3rem; }
}

.about-media{ position:relative; }
.about-media::before{
  content:''; position:absolute; inset:24px -24px -24px 24px; border:1px solid var(--line); z-index:-1;
}
@media (max-width:560px){ .about-media::before{ inset:16px -12px -16px 12px; } }
.about-media-frame{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:16px; }
.about-media-frame img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.1);
  transition:transform 1.4s var(--ease);
}
.about-media:hover .about-media-frame img{ transform:scale(1); }

.about-ring{ position:absolute; top:-28px; right:-28px; width:104px; height:104px; z-index:3; }
.about-ring svg{ width:100%; height:100%; animation:spinSlow 16s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.about-ring .ring-icon{
  position:absolute; inset:0; margin:auto; width:16px; height:16px; font-size:1rem;
  display:flex; align-items:center; justify-content:center; color:var(--brass);
}
@media (max-width:560px){ .about-ring{ width:80px; height:80px; top:-18px; right:-18px; } }

.about-badge{
  position:absolute; left:-28px; bottom:-28px; width:148px; height:148px; border-radius:50%;
  background:var(--brass); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; z-index:3; box-shadow:0 30px 60px -20px rgba(20,22,30,.22);
  animation:badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.about-badge .num{ font-family:var(--font-accent); font-style:italic; font-size:2.2rem; line-height:1; }
.about-badge .num small{ font-size:.55em; }
.about-badge .txt{ font-size:.72rem; font-weight:600; margin-top:.35rem; line-height:1.3; }
@media (max-width:560px){ .about-badge{ width:112px; height:112px; left:-14px; bottom:-14px; } .about-badge .num{ font-size:1.6rem; } .about-badge .txt{ font-size:.62rem; } }

/* ---------- About: animated orbit accent (fills empty corner) ---------- */
.about-orbit{
  position:absolute; top:-22px; left:-22px; width:76px; height:76px; z-index:2;
  border:1.5px dashed var(--brass); border-radius:50%; animation:spinSlow 13s linear infinite reverse;
  pointer-events:none;
}
.about-orbit::before{
  content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:var(--gold-grad); box-shadow:0 0 10px 2px rgba(47,111,237,.5);
}
.about-orbit::after{
  content:''; position:absolute; inset:14px; border:1px solid var(--line); border-radius:50%;
}
@media (max-width:560px){ .about-orbit{ width:54px; height:54px; top:-14px; left:-14px; } }

/* ---------- About page: two-column intro with animated floor-plan diagram ---------- */
.intro-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,7vw,100px); align-items:center; }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; gap:60px; } }

.about-diagram{
  position:relative; aspect-ratio:4/5; background:var(--mist-2); border:1px solid var(--line);
  border-radius:16px; display:flex; align-items:center; justify-content:center; padding:clamp(18px,3vw,30px);
}
.about-diagram-tag{
  position:absolute; top:18px; left:18px; z-index:3; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:.4rem .9rem .4rem .7rem;
}
.about-diagram-tag i{ color:var(--brass); }
.diagram-svg{ width:100%; height:100%; overflow:visible; }
.diagram-svg .draw{
  fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.4s var(--ease);
}
.diagram-svg .draw-accent{ stroke:var(--brass); }
.about-diagram.is-in .diagram-svg .draw{ stroke-dashoffset:0; }
.diagram-svg .fill-shape{
  fill:var(--paper); stroke:var(--ink); stroke-width:1.3; opacity:0; transform:translateY(6px);
  transition:opacity .7s var(--ease) 1.3s, transform .7s var(--ease) 1.3s; transform-box:fill-box; transform-origin:center;
}
.about-diagram.is-in .diagram-svg .fill-shape{ opacity:1; transform:none; }
.diagram-svg .dim-text{ font-family:var(--font-paragraph); font-size:9.5px; fill:var(--slate); opacity:0; transition:opacity .6s var(--ease) 2s; }
.about-diagram.is-in .diagram-svg .dim-text{ opacity:1; }
.about-diagram .about-ring{ right:-18px; bottom:-18px; top:auto; left:auto; }
@media (max-width:560px){ .about-diagram .about-ring{ width:80px; height:80px; right:-12px; bottom:-12px; } }

/* ---------- About: animated marquee strip (fills whitespace below copy) ---------- */
.about-marquee{
  margin-top:2.4rem; overflow:hidden; padding:1.5rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.about-marquee .track{
  display:flex; gap:1rem; width:max-content; animation:aboutMarquee 30s linear infinite;
}
.about-marquee:hover .track{ animation-play-state:paused; }
.about-marquee span{
  font-family:var(--font-body); font-weight:600; font-size:.86rem; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap; display:inline-flex; align-items:center; gap:.65rem;
  padding:.7rem 1.3rem; border:1px solid var(--line); background:var(--paper);
  transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.about-marquee span:hover{ border-color:var(--brass); color:var(--brass); background:var(--mist-2); }
.about-marquee span i{
  width:6px; height:6px; border-radius:16px; transform:rotate(45deg);
  background:var(--gold-grad); flex:none; font-size:0;
}
@keyframes aboutMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .about-marquee .track{ animation:none; } }

.about-copy{ min-width:0; }
.about-copy .label .num{ margin-right:.5em; }
.about-points{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem; }
.about-points .pt{ display:flex; align-items:flex-start; gap:.7rem; font-size:.96rem; }
.about-points .pt i{ color:var(--brass); margin-top:.15rem; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:clamp(50px,7vw,90px); border-top:1px solid var(--line); }
@media (max-width:700px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding-top:1.8rem; }
.stat .n{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); display:flex; }
.stat .n .suffix{ font-size:.5em; color:var(--brass); align-self:flex-start; margin-top:.35em; }
.stat .l{ color:var(--slate); font-size:.88rem; margin-top:.4rem; }

/* ===================== SERVICES SLIDER ===================== */
.svc-slider-nav{ align-items:center; gap:1.1rem; }
.svc-slider-nav button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) var(--ease); flex:none;
}
.svc-slider-nav button:hover{ background:var(--luxe-grad); color:var(--paper); border-color:transparent; }
.svc-count{ color:var(--slate); font-size:.84rem; letter-spacing:.02em; min-width:52px; text-align:center; }
.svc-slider-nav-mobile{ margin-top:2rem; }

.svc-slider{ overflow:hidden; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); }
.svc-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 0 18px; -ms-overflow-style:none; scrollbar-width:none;
}
.svc-track::-webkit-scrollbar{ display:none; }
.svc-card{
  flex:0 0 clamp(168px,19vw,224px); scroll-snap-align:start; background:var(--paper);
  position:relative; overflow:hidden; border-radius:16px;
  transition:box-shadow var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.svc-card:hover{ box-shadow:var(--shadow-premium); transform:translateY(-6px); }
.svc-card-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.svc-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.svc-card:hover .svc-card-media img{ transform:scale(1.08); }
.svc-card-media::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,29,33,.4) 0%, rgba(28,29,33,0) 38%);
  pointer-events:none;
}
.svc-card-arrow{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px); color:var(--paper);
  display:flex; align-items:center; justify-content:center; z-index:2; font-size:.8rem;
  transform:translateY(-6px) scale(.85); opacity:0; transition:all var(--dur-m) var(--ease);
}
.svc-card:hover .svc-card-arrow{ transform:none; opacity:1; background:var(--brass); color:var(--paper); }
.svc-card-body{ padding:1rem 1rem 1.2rem; }
.svc-card-idx{ font-family:var(--font-accent); font-style:italic; color:var(--brass); font-size:.82rem; }
.svc-card-title{ font-family:var(--font-display); font-size:.98rem; margin-top:.35rem; display:flex; align-items:center; gap:.45rem; position:relative; padding-bottom:.4rem; line-height:1.25; }
.svc-card-title::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:22px; background:var(--brass); transition:width var(--dur-m) var(--ease); }
.svc-card:hover .svc-card-title::after{ width:100%; }
.svc-card-title i{ color:var(--brass); font-size:.86rem; }
.svc-card-desc{ color:var(--slate); font-size:.78rem; margin-top:.45rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:768px){ .svc-card{ flex-basis:44vw; } }
@media (max-width:560px){ .svc-card{ flex-basis:70vw; } }

/* ===================== PROJECTS — COMPACT GRID (one row, 4-5 up) ===================== */
.proj-grid-compact{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.proj-grid-compact .frame{ aspect-ratio:3/4; }
.proj-grid-compact .meta{ padding:1.1rem 1rem; }
.proj-grid-compact .cat{ font-size:.7rem; }
.proj-grid-compact .title{ font-size:clamp(.94rem,1.3vw,1.08rem); }
@media (max-width:1100px){ .proj-grid-compact{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .proj-grid-compact{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:460px){ .proj-grid-compact{ grid-template-columns:1fr 1fr; } .proj-grid-compact .frame{ aspect-ratio:1/1; } }

/* ===================== PROJECTS SLIDER ===================== */
.proj-slider{ overflow:hidden; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); cursor:grab; }
.proj-slider:active{ cursor:grabbing; }
.proj-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 0 18px; -ms-overflow-style:none; scrollbar-width:none;
}
.proj-track::-webkit-scrollbar{ display:none; }
.proj-track .proj-card{ flex:0 0 clamp(190px,20vw,240px); scroll-snap-align:start; }
.proj-track .proj-card .frame{ aspect-ratio:4/5; }
@media (max-width:768px){ .proj-track .proj-card{ flex-basis:42vw; } }
@media (max-width:560px){ .proj-track .proj-card{ flex-basis:66vw; } }

/* ---------- Clean project card variant: image only, no text overlay ---------- */
.proj-card-clean .frame::after{ content:none; }
.proj-card-clean .meta{ display:none; }
.proj-card-clean{ box-shadow:var(--shadow-soft); }
.proj-card-clean .svc-card-arrow{ top:14px; right:14px; width:42px; height:42px; }
.proj-card-clean:hover{ box-shadow:var(--shadow-premium); }

/* ===================== PROJECTS (asymmetric editorial) ===================== */
.proj-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2vw,28px); }
.proj-card{ position:relative; overflow:hidden; border-radius:16px; transition:box-shadow var(--dur-m) var(--ease); }
.proj-card:hover{ box-shadow:var(--shadow-premium); }
.proj-card .frame{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.proj-card.wide .frame{ aspect-ratio:16/10; }
.proj-card .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.proj-card:hover .frame img{ transform:scale(1.08); }
.proj-card .frame::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,29,33,0) 45%, rgba(28,29,33,.82) 100%);
  opacity:.55; transition:opacity var(--dur-m) var(--ease);
}
.proj-card:hover .frame::after{ opacity:.85; }
.proj-card .meta{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem; color:var(--paper); z-index:2; }
.proj-card .cat{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:#d9d9d8; margin-bottom:.5rem; opacity:.9; }
.proj-card .cat i{ color:var(--brass); }
.proj-card .title{ font-family:var(--font-display); font-size:clamp(1.2rem,1.8vw,1.7rem); }
.proj-card .sub{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:.7rem; }
.proj-card .sub small{ color:#c9c9c8; font-size:.82rem; }
.proj-card .arrow{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  transform:translateY(10px) scale(.8); opacity:0; transition:all var(--dur-m) var(--ease);
}
.proj-card:hover .arrow{ transform:translateY(0) scale(1); opacity:1; }
.pc-1{ grid-column:span 7; }
.pc-2{ grid-column:span 5; }
.pc-3{ grid-column:span 4; }
.pc-4{ grid-column:span 4; }
.pc-5{ grid-column:span 4; }
@media (max-width:900px){ .pc-1,.pc-2,.pc-3,.pc-4,.pc-5{ grid-column:span 12; } }

/* ===================== PROJECTS — curated bento grid (distinct from Instagram reel) ===================== */
.proj-section{ position:relative; overflow:hidden; }
.proj-bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,clamp(78px,8vw,140px));
  gap:clamp(10px,1.4vw,16px); margin-top:clamp(24px,3vw,34px);
  grid-template-areas:
    "a a b c"
    "a a d c"
    "e f g g"
    "e h g g";
}
.proj-bento .proj-card{ height:100%; box-shadow:var(--shadow-soft); }
.proj-bento .proj-card .frame{ height:100%; aspect-ratio:auto; }
.proj-bento .proj-card:hover{ box-shadow:var(--shadow-premium); }
.proj-bento .proj-card:nth-child(1){ grid-area:a; }
.proj-bento .proj-card:nth-child(2){ grid-area:b; }
.proj-bento .proj-card:nth-child(3){ grid-area:c; }
.proj-bento .proj-card:nth-child(4){ grid-area:d; }
.proj-bento .proj-card:nth-child(5){ grid-area:e; }
.proj-bento .proj-card:nth-child(6){ grid-area:f; }
.proj-bento .proj-card:nth-child(7){ grid-area:g; }
.proj-bento .proj-card:nth-child(8){ grid-area:h; }
.proj-bento .proj-card .meta{ padding:1rem 1.1rem; }
.proj-bento .proj-card .title{ font-size:clamp(.92rem,1.6vw,1.3rem); }
.proj-bento .proj-card .cat{ font-size:.7rem; margin-bottom:.3rem; }
.proj-bento .proj-card .arrow{ width:36px; height:36px; }
.proj-bento .proj-card:nth-child(2) .sub small,
.proj-bento .proj-card:nth-child(4) .sub small,
.proj-bento .proj-card:nth-child(6) .sub small,
.proj-bento .proj-card:nth-child(8) .sub small{ display:none; }
@media (max-width:900px){
  .proj-bento{ grid-template-columns:repeat(2,1fr); grid-template-areas:none; grid-auto-rows:220px; }
  .proj-bento .proj-card{ grid-area:auto !important; }
  .proj-bento .proj-card .sub small{ display:inline !important; }
}
@media (max-width:560px){
  .proj-bento{ grid-template-columns:1fr; grid-auto-rows:280px; }
}

/* ===================== PHILOSOPHY SPLIT ===================== */
.philosophy{ display:grid; grid-template-columns:.86fr 1fr; position:relative; }
@media (max-width:900px){ .philosophy{ grid-template-columns:1fr; } }
.phi-media{ position:relative; overflow:hidden; min-height:420px; background:var(--ink, #17171a); }
.phi-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.phi-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,29,33,.08) 0%, rgba(28,29,33,.32) 100%); }
.phi-media::before{
  content:''; position:absolute; z-index:2; inset:22px; border:1px solid rgba(255,255,255,.55); pointer-events:none;
}
.phi-copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,4.8vw,90px); position:relative; }
.phi-copy .big-num{ font-family:var(--font-accent); font-style:italic; letter-spacing:.02em; color:var(--brass); font-size:1.2rem; margin-bottom:1.6rem; }

/* ---------- Our Approach: premium numbered principles ---------- */
.phi-principles{ margin-top:2.6rem; display:flex; flex-direction:column; }
.principle{
  position:relative; display:grid; grid-template-columns:60px 1fr; column-gap:1.8rem; align-items:flex-start;
  padding:1.6rem 1.2rem 1.6rem 1.3rem; border-top:1px solid var(--line);
  transition:padding-left var(--dur-m) var(--ease), background var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.phi-principles .principle:last-child{ border-bottom:1px solid var(--line); }
.principle::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:0;
  background:var(--luxe-grad); transition:width var(--dur-m) var(--ease);
}
.principle:hover{ padding-left:1.7rem; background:var(--mist-2); box-shadow:var(--shadow-soft); }
.principle:hover::before{ width:3px; }
.principle .p-num{
  width:54px; height:54px; flex:none; border-radius:50%; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.28rem; color:var(--brass);
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.principle .p-text{ font-size:1.06rem; line-height:1.68; color:var(--graphite); padding-top:.85rem; max-width:36ch; }
.principle:hover .p-num{ background:var(--luxe-grad); color:var(--paper); border-color:transparent; transform:scale(1.08) rotate(-6deg); }

/* ---------- Design Philosophy (about.html): vertical icon-node diagram ---------- */
.phi-lines{ position:relative; }
.phi-lines::before{ content:''; position:absolute; left:23px; top:23px; bottom:23px; width:2px; background:var(--line); }
.phi-lines::after{
  content:''; position:absolute; left:23px; top:23px; width:2px; height:0; background:var(--gold-grad);
  background-size:220% auto; animation:goldShine 7s linear infinite;
  transition:height 1.7s var(--ease) .15s;
}
.phi-copy.is-in .phi-lines::after{ height:calc(100% - 46px); }
.phi-lines .ln{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:1.2rem; padding:1.05rem 0; border:0; }
.phi-lines .ln .k{
  width:46px; height:46px; border-radius:50%; flex:none; background:var(--paper); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--brass);
  transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease);
}
.phi-copy.is-in .phi-lines .ln .k{ border-color:var(--brass); }
.phi-lines .ln:hover .k{ background:var(--brass); color:var(--paper); transform:scale(1.08); }
.phi-lines .ln .v{ font-size:1.02rem; padding-top:.7rem; }

/* ===================== COUNTER BAND ===================== */
.counter-band{ background:var(--ink); color:var(--paper); }
.counter-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:700px){ .counter-grid{ grid-template-columns:repeat(2,1fr); } }
.counter-item{ padding:clamp(30px,4vw,60px) clamp(16px,2vw,30px); border-left:1px solid var(--line-invert); text-align:left; }
.counter-item:first-child{ border-left:0; }
@media (max-width:700px){ .counter-item:nth-child(odd){ border-left:0; } .counter-item{ border-top:1px solid var(--line-invert);} .counter-item:nth-child(-n+2){ border-top:0; } }
.counter-item .n{ font-family:var(--font-display); font-size:clamp(2.6rem,4.6vw,4rem); display:flex; }
.counter-item .n .suffix{ color:var(--brass); font-size:.5em; margin-top:.3em; margin-left:.1em; }
.counter-item .l{ margin-top:.5rem; color:#a9aaae; font-size:.9rem; }

/* ===================== PROCESS — zigzag flow diagram ===================== */
.process-flow{ position:relative; max-width:960px; margin:0 auto; }
.process-flow::before{
  content:''; position:absolute; left:50%; top:6px; bottom:6px; width:2px; background:var(--line); transform:translateX(-50%);
}
.process-flow::after{
  content:''; position:absolute; left:50%; top:6px; width:2px; height:0; transform:translateX(-50%);
  background:var(--gold-grad); background-size:220% auto; animation:goldShine 7s linear infinite;
  transition:height 1.9s var(--ease) .1s;
}
.process-flow.is-in::after{ height:calc(100% - 12px); }
.process-node{
  position:relative; display:grid; grid-template-columns:1fr 64px 1fr; align-items:center;
  column-gap:clamp(18px,3vw,46px); padding:clamp(20px,2.6vw,32px) 0;
}
.process-node .p-icon{
  grid-column:2; justify-self:center; width:64px; height:64px; border-radius:50%; flex:none;
  background:var(--paper); border:2px solid var(--line); color:var(--brass); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
.process-node.is-in .p-icon{ border-color:var(--brass); }
.process-node:hover .p-icon{ background:var(--brass); color:var(--paper); transform:scale(1.08); }
.process-node .p-body{ grid-column:1; text-align:right; }
.process-node:nth-child(even) .p-body{ grid-column:3; text-align:left; }
.process-node .p-idx{ font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.05em; color:var(--brass); }
.process-node .p-title{ font-size:clamp(1.15rem,1.7vw,1.5rem); margin-top:.25rem; }
.process-node .p-desc{ color:var(--slate); font-size:.92rem; margin-top:.5rem; max-width:36ch; }
.process-node:nth-child(odd) .p-body > *{ margin-left:auto; }
.process-node:nth-child(even) .p-body > *{ margin-right:auto; }
@media (max-width:820px){
  .process-flow::before,.process-flow::after{ left:27px; transform:none; }
  .process-node{ grid-template-columns:56px 1fr; column-gap:1.2rem; }
  .process-node .p-icon{ grid-column:1; width:56px; height:56px; font-size:1.1rem; }
  .process-node .p-body, .process-node:nth-child(even) .p-body{ grid-column:2; text-align:left; }
  .process-node .p-body > *, .process-node:nth-child(even) .p-body > *{ margin-left:0; margin-right:0; max-width:none; }
}

/* ===================== TESTIMONIALS ===================== */
/* ---------- Testimonials: photo + quote split panel ---------- */
.testi-section{ position:relative; overflow:hidden; }
.testi-wrap{ display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(30px,5vw,90px); align-items:center; }
@media (max-width:900px){ .testi-wrap{ grid-template-columns:1fr; } }
.testi-media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:16px; max-width:340px; box-shadow:var(--shadow-premium); }
@media (max-width:900px){ .testi-media{ max-width:260px; margin:0 auto; } }
.testi-media::before{ content:''; position:absolute; z-index:2; inset:14px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
.testi-media::after{ content:''; position:absolute; left:-10px; top:-10px; width:64px; height:64px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); z-index:2; pointer-events:none; }
.testi-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease); }
.testi-photo.active{ opacity:1; }
.testi-quote-mark{ font-family:var(--font-accent); font-style:italic; color:var(--brass); font-size:4.4rem; line-height:1; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation:fadeIn .7s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.testi-text{ font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.48; margin-top:.6rem; max-width:26ch; }
.testi-name{ margin-top:1.8rem; font-weight:700; }
.testi-role{ color:var(--slate); font-size:.88rem; margin-top:.15rem; }
.testi-stars{ color:var(--gold); margin-top:.35rem; letter-spacing:.15em; font-size:.85rem; }
.testi-nav{ display:flex; gap:.7rem; margin-top:2.4rem; }
.testi-nav button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:none; display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) var(--ease); }
.testi-nav button:hover{ background:var(--luxe-grad); color:var(--paper); border-color:transparent; }

/* ===================== SOCIAL GRID ===================== */
.social-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
@media (max-width:820px){ .social-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .social-grid{ grid-template-columns:repeat(2,1fr); } }
.social-cell{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.social-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.social-cell::after{ content:''; position:absolute; inset:0; background:rgba(28,29,33,.55); opacity:0; transition:opacity var(--dur-s) var(--ease); }
.social-cell i{ position:absolute; inset:0; margin:auto; width:20px; height:20px; color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:1.2rem; opacity:0; transition:opacity var(--dur-s) var(--ease); z-index:2;}
.social-cell:hover img{ transform:scale(1.12); }
.social-cell:hover::after,.social-cell:hover i{ opacity:1; }

/* ===================== OFFER STRIP (one-stop overview) ===================== */
.offer-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:clamp(30px,4vw,50px); }
@media (max-width:1100px){ .offer-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .offer-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .offer-strip{ grid-template-columns:1fr; } }
.offer-tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.8rem 1.5rem; text-align:left;
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.offer-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-premium); border-color:transparent; }
.offer-tile .ic{
  width:56px; height:56px; border-radius:16px; background:var(--luxe-grad);
  color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.1rem;
}
.offer-tile h4{ font-size:1.05rem; margin-bottom:.4rem; }
.offer-tile p{ font-size:.86rem; color:var(--slate); line-height:1.55; }
.offer-tile .go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.82rem; font-weight:700; color:var(--brass); }
.offer-tile .go i{ font-size:.72rem; transition:transform var(--dur-s) var(--ease); }
.offer-tile:hover .go i{ transform:translateX(3px); }

/* ===================== BOOK FREE CONSULTATION — MODAL ===================== */
.consult-modal-overlay{
  position:fixed; inset:0; background:rgba(20,22,30,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:3000; opacity:0; visibility:hidden; transition:opacity var(--dur-m) var(--ease), visibility var(--dur-m) var(--ease);
}
.consult-modal-overlay.show{ opacity:1; visibility:visible; }
.consult-modal{
  background:var(--paper); border-radius:var(--radius-lg); width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  padding:clamp(24px,3vw,34px); position:relative; box-shadow:var(--shadow-premium);
  transform:translateY(16px) scale(.98); transition:transform var(--dur-m) var(--ease);
}
.consult-modal-overlay.show .consult-modal{ transform:none; }
.consult-modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--mist-2); display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:.9rem; transition:all var(--dur-s) var(--ease);
}
.consult-modal-close:hover{ background:var(--brass); color:var(--paper); border-color:var(--brass); transform:rotate(90deg); }
.consult-modal .badge-ic{
  width:52px; height:52px; border-radius:16px; background:var(--luxe-grad); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem;
}
.consult-modal h3{ font-size:1.4rem; padding-right:2rem; margin-bottom:.4rem; }
.consult-modal .sub{ color:var(--slate); font-size:.9rem; margin-bottom:1.6rem; }
.consult-modal .form-group{ margin-bottom:1.1rem; }
.consult-modal label{ font-size:.8rem; font-weight:600; color:var(--slate); margin-bottom:.4rem; display:block; }
.consult-modal .field{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--mist-2);
  padding:.85rem 1rem; font-size:.94rem; font-family:inherit; color:var(--ink);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.consult-modal .field:focus{ border-color:var(--brass); background:var(--paper); outline:none; box-shadow:0 0 0 4px rgba(255,90,54,.12); }
.consult-modal .phone-field{
  display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--mist-2); overflow:hidden; transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.consult-modal .phone-field:focus-within{ border-color:var(--brass); background:var(--paper); }
.consult-modal .phone-flag{ padding:.85rem .6rem .85rem 1rem; font-size:1.05rem; border-right:1px solid var(--line); }
.consult-modal .phone-field input{ border:0; background:none; flex:1; padding:.85rem 1rem; font-size:.94rem; font-family:inherit; color:var(--ink); }
.consult-modal .phone-field input:focus{ outline:none; }
.consult-modal .wa-check{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--ink); margin-bottom:1.3rem; }
.consult-modal .wa-check input{ width:17px; height:17px; accent-color:var(--brass); }
.consult-modal select.field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff5a36' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.consult-modal button[type="submit"]{ width:100%; justify-content:center; border-radius:var(--radius-md); }
.consult-modal .legal{ font-size:.76rem; color:#9c9da2; text-align:center; margin-top:1.1rem; line-height:1.5; }
.consult-modal .legal a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }
body.modal-open{ overflow:hidden; }

/* ===================== CTA BAND ===================== */
.cta-band{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding:clamp(56px,7vw,110px) 0;
}
.cta-band .grain{ position:absolute; inset:-10%; background:radial-gradient(circle at 20% 20%, rgba(47,111,237,.18), transparent 45%), radial-gradient(circle at 80% 80%, rgba(47,111,237,.14), transparent 40%); animation:ctaFloat 14s ease-in-out infinite alternate; }
@keyframes ctaFloat{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-2%,3%) scale(1.08);} }
.cta-band .content{ position:relative; z-index:2; text-align:left; max-width:820px; }
.cta-band .container{ position:relative; z-index:2; }
.cta-band .label.tag{ background:rgba(255,255,255,.08); border-color:var(--line-invert); color:var(--paper); }
.cta-actions{ display:flex; gap:1.2rem; margin-top:2.6rem; flex-wrap:wrap; }

/* ---- Light variant: white background + decorative icon field ---- */
.cta-band.cta-light{ background:var(--paper); color:var(--ink); }
.cta-band.cta-light .grain{
  background:radial-gradient(circle at 15% 20%, rgba(255,90,54,.07), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(47,111,237,.08), transparent 45%);
}
.cta-band.cta-light .label.tag{ background:rgba(255,90,54,.08); border-color:rgba(255,90,54,.22); color:var(--brass); }
.cta-band.cta-light p{ color:var(--slate); }
.cta-bg-icons{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.cta-bg-icons i{ position:absolute; line-height:1; }
.cta-bg-icons i:nth-child(1){ top:6%; left:3%; font-size:4.6rem; color:var(--brass); opacity:.09; transform:rotate(-14deg); }
.cta-bg-icons i:nth-child(2){ top:62%; left:7%; font-size:3rem; color:var(--gold); opacity:.08; transform:rotate(10deg); }
.cta-bg-icons i:nth-child(3){ top:10%; right:6%; font-size:3.8rem; color:var(--gold); opacity:.08; transform:rotate(16deg); }
.cta-bg-icons i:nth-child(4){ bottom:8%; right:12%; font-size:3.4rem; color:var(--brass); opacity:.09; transform:rotate(-10deg); }
.cta-bg-icons i:nth-child(5){ bottom:20%; left:46%; font-size:2.4rem; color:var(--ink); opacity:.05; transform:rotate(8deg); }
.cta-bg-icons i:nth-child(6){ top:42%; right:36%; font-size:2rem; color:var(--gold); opacity:.07; transform:rotate(-18deg); }
.cta-bg-icons i:nth-child(7){ top:78%; right:42%; font-size:2.2rem; color:var(--brass); opacity:.06; transform:rotate(20deg); }
@media (max-width:700px){ .cta-bg-icons i{ display:none; } .cta-bg-icons i:nth-child(1),.cta-bg-icons i:nth-child(3){ display:block; } }

.cta-band.cta-light .quick-form{ background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-premium); }
.cta-band.cta-light .quick-form .qf-title{ color:var(--ink); }
.cta-band.cta-light .quick-form .field-wrap i{ color:var(--brass); }
.cta-band.cta-light .quick-form .field{ background:var(--mist-2); border:1px solid var(--line); color:var(--ink); }
.cta-band.cta-light .quick-form .field::placeholder{ color:#9c9da2; }
.cta-band.cta-light .quick-form .field:focus{ border-color:var(--brass); background:var(--paper); }
.cta-band.cta-light .quick-form option{ color:var(--ink); }

/* ===================== FOOTER ===================== */
.site-footer{ position:relative; background:var(--ink); color:#d5d5d4; padding-top:clamp(50px,6vw,80px); overflow:hidden; }
.site-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold-grad); background-size:220% auto; animation:goldShine 8s linear infinite;
}
.site-footer::after{
  content:''; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,111,237,.14), transparent 70%); pointer-events:none;
}
.footer-top-strip{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.6rem;
  padding-bottom:32px; margin-bottom:clamp(36px,5vw,60px); border-bottom:1px solid var(--line-invert);
  position:relative; z-index:2;
}
.ft-highlights{ display:flex; flex-wrap:wrap; gap:1.8rem; }
.ft-highlight{ display:flex; align-items:center; gap:.7rem; font-size:.86rem; color:#d5d5d4; }
.ft-highlight i{
  width:38px; height:38px; flex:none; border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid var(--line-invert); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
@media (max-width:700px){ .footer-top-strip{ flex-direction:column; align-items:flex-start; } }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:60px; position:relative; z-index:2; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h5{ font-family:var(--font-body); font-size:.85rem; letter-spacing:.03em; color:var(--paper); margin-bottom:1.3rem; }
.footer-grid ul li{ margin-bottom:.7rem; }
.footer-grid ul a{ color:#a9aaae; font-size:.92rem; transition:color var(--dur-s) var(--ease), padding-left var(--dur-s) var(--ease); }
.footer-grid ul a:hover{ color:var(--paper); padding-left:4px; }
.footer-brand .logo{ color:var(--paper); }
.footer-brand .logo-mark::before{ border-color:var(--line-invert); }
.footer-brand p{ color:#a9aaae; margin-top:1rem; max-width:32ch; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.6rem; }
.footer-social a{ width:40px; height:40px; border:1px solid var(--line-invert); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper); transition:all var(--dur-s) var(--ease); }
.footer-social a:hover{ background:var(--luxe-grad); border-color:transparent; color:var(--paper); transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.footer-contact-row{ display:flex; align-items:flex-start; gap:.8rem; margin-top:.9rem; }
.footer-contact-row .ic{
  width:36px; height:36px; border-radius:50%; flex:none; background:rgba(255,255,255,.08); color:var(--paper);
  border:1px solid var(--line-invert);
  display:flex; align-items:center; justify-content:center; font-size:.86rem;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.footer-contact-row a{ color:#a9aaae; transition:color var(--dur-s) var(--ease); }
.footer-contact-row a:hover{ color:var(--paper); }
.footer-contact-row a:hover .ic{ background:var(--brass); border-color:var(--brass); }
.newsletter-form{ display:flex; align-items:center; border:1px solid var(--line-invert); border-radius:16px; padding:.35rem .35rem .35rem 1.1rem; margin-top:.9rem; background:rgba(255,255,255,.04); transition:border-color var(--dur-s) var(--ease); }
.newsletter-form:focus-within{ border-color:var(--brass); }
.newsletter-form input{ background:none; border:0; color:var(--paper); font-size:.9rem; flex:1; padding:.4rem 0; }
.newsletter-form input::placeholder{ color:#7c7d81; }
.newsletter-form button{ width:36px; height:36px; border-radius:50%; flex:none; border:0; background:var(--gold-grad); color:var(--paper); font-size:1rem; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-s) var(--ease); }
.newsletter-form button:hover{ transform:scale(1.08); }
.footer-bottom{ border-top:1px solid var(--line-invert); padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.84rem; color:#8f9095; }
.footer-bottom a{ color:#8f9095; }
.footer-bottom a:hover{ color:var(--paper); }
.footer-bottom-links{ display:flex; gap:1.6rem; }

.back-to-top{
  position:fixed; right:26px; bottom:26px; width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  z-index:500; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all var(--dur-m) var(--ease);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--brass); }

/* ===================== CONTACT INFO CARDS ===================== */
.contact-info-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.8rem 1.5rem; text-align:left; height:100%;
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.contact-info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-premium); border-color:transparent; }
.contact-info-card .ic{
  width:52px; height:52px; border-radius:50%; background:var(--gold-grad); background-size:220% auto; animation:goldShine 8s linear infinite;
  color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1rem;
}
.contact-info-card .ttl{ font-weight:700; margin-bottom:.25rem; }

.map-frame{
  aspect-ratio:21/8; min-height:280px; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
}

/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero{ position:relative; padding:clamp(60px,8vw,90px) 0 clamp(60px,8vw,90px); background:var(--ink); color:var(--paper); overflow:hidden; }
.page-hero .media{ position:absolute; inset:0; opacity:.34; }
.page-hero .media img{ width:100%; height:100%; object-fit:cover; }
.page-hero .media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,29,33,.4),rgba(28,29,33,.94)); }
.page-hero .inner{ position:relative; z-index:2; }
.breadcrumb-atelier{ display:flex; gap:.6rem; align-items:center; color:#c9c9c8; font-size:.86rem; margin-bottom:1.3rem; }
.breadcrumb-atelier a:hover{ color:var(--paper); }

/* ===================== GALLERY ===================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:clamp(30px,4vw,54px); }
.gfilter{
  padding:.6rem 1.3rem; border:1px solid var(--line); border-radius:999px; font-size:.85rem; font-weight:600; background:none; color:var(--slate);
  transition:all var(--dur-s) var(--ease); position:relative;
}
.gfilter.active,.gfilter:hover{ background:var(--luxe-grad); color:var(--paper); border-color:transparent; box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.masonry{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:980px){ .masonry{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .masonry{ grid-template-columns:1fr; } }
.masonry-item{ position:relative; overflow:hidden; border-radius:16px; opacity:1; transition:opacity .4s var(--ease), transform .4s var(--ease); aspect-ratio:4/5; }
.masonry-item:nth-child(4n+2){ aspect-ratio:1/1; }
.masonry-item:nth-child(5n+3){ aspect-ratio:3/4; }
.proj-card.masonry-item{ aspect-ratio:auto; }
.masonry-item.hide{ display:none; }
.masonry-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.masonry-item .m-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.3rem;
  background:linear-gradient(180deg, rgba(28,29,33,0) 42%, rgba(28,29,33,.85) 100%);
}
.masonry-item:hover img{ transform:scale(1.06); }
.m-info{ color:var(--paper); }
.m-info .cat{ display:block; font-size:.76rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--brass-light); margin-bottom:.3rem; }
.m-info .ti{ font-family:var(--font-accent); font-size:1.15rem; font-style:italic; }
.m-zoom{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:.85rem; opacity:.85; transform:scale(.9); transition:all var(--dur-m) var(--ease); }
.masonry-item:hover .m-zoom{ opacity:1; transform:none; background:rgba(255,255,255,.26); }

/* ===================== TEAM ===================== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-card{ position:relative; overflow:hidden; transition:transform var(--dur-m) var(--ease); }
.team-card:hover{ transform:translateY(-4px); }
.team-card .frame{ aspect-ratio:3/4; overflow:hidden; position:relative; }
.team-card .frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(45%); transition:all .8s var(--ease); }
.team-card:hover .frame img{ filter:grayscale(0%); transform:scale(1.06); }
.team-card .social{ position:absolute; bottom:-60px; left:0; right:0; display:flex; justify-content:center; gap:.5rem; transition:bottom var(--dur-m) var(--ease); }
.team-card:hover .social{ bottom:16px; }
.team-card .social a{ width:36px; height:36px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.team-card .info{ padding-top:1rem; }
.team-card .info h4{ font-size:1.15rem; }
.team-card .info span{ color:var(--slate); font-size:.86rem; }

/* ===================== TIMELINE (about) ===================== */
.tl{ position:relative; padding-left:40px; border-left:1px solid var(--line); }
.tl-item{ position:relative; padding-bottom:clamp(30px,4vw,50px); }
.tl-item::before{ content:''; position:absolute; left:-45px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--brass); }
.tl-year{ font-family:var(--font-accent); font-style:italic; color:var(--brass); font-size:1.2rem; }

/* ===================== FORMS (premium, icon-led) ===================== */
.form-atelier{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,44px); box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
}
.form-atelier::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold-grad); background-size:220% auto; animation:goldShine 8s linear infinite;
}
.form-atelier .form-group{ margin-bottom:1.4rem; position:relative; }
.form-atelier label{ font-size:.8rem; font-weight:600; color:var(--slate); margin-bottom:.5rem; display:block; letter-spacing:.02em; }
.form-atelier .field-wrap{ position:relative; }
.form-atelier .field-wrap > i{
  position:absolute; left:16px; top:50%; transform:translateY(50%) translateY(-50%); color:var(--brass); font-size:.92rem; pointer-events:none;
}
.form-atelier .field-wrap textarea ~ i, .form-atelier .field-wrap > i.ic-top{ top:20px; transform:none; }
.form-atelier .field{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--mist-2);
  padding:.85rem 1rem .85rem 2.7rem; font-size:.96rem; font-family:inherit; color:var(--ink);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.form-atelier select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9762f' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.form-atelier textarea.field{ resize:vertical; min-height:110px; padding-top:.9rem; }
.form-atelier .field:focus{ border-color:var(--brass); background:var(--paper); outline:none; box-shadow:0 0 0 4px rgba(47,111,237,.12); }
.form-atelier .field-line{ display:none; }
.form-atelier button[type="submit"]{ margin-top:.4rem; width:100%; justify-content:center; border-radius:var(--radius-md); }
.form-note{ font-size:.8rem; color:var(--slate); margin-top:.7rem; min-height:1.1em; }
.form-note.ok{ color:#16a34a; font-weight:600; }

/* Compact icon-led enquiry form (index page) */
.quick-form{
  background:rgba(255,255,255,.06); border:1px solid var(--line-invert); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,32px); backdrop-filter:blur(10px);
}
.quick-form .qf-title{ color:var(--paper); font-family:var(--font-display); font-size:1.3rem; margin-bottom:1.2rem; }
.quick-form .field-wrap{ position:relative; margin-bottom:1rem; }
.quick-form .field-wrap i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--paper); font-size:.9rem; }
.quick-form .field{
  width:100%; border:1px solid var(--line-invert); border-radius:var(--radius-md); background:rgba(255,255,255,.06);
  padding:.85rem 1rem .85rem 2.7rem; font-size:.92rem; font-family:inherit; color:var(--paper);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.quick-form select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af6a' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.quick-form .field::placeholder{ color:#a9aaae; }
.quick-form .field:focus{ border-color:var(--brass-light); background:rgba(255,255,255,.1); outline:none; }
.quick-form option{ color:#1c1d21; }
.quick-form button[type="submit"]{ width:100%; justify-content:center; margin-top:.3rem; }

/* ===================== SERVICES (detail page) ===================== */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; padding:clamp(44px,6vw,84px) 0; border-bottom:1px solid var(--line); }
.svc-detail:nth-child(even) .svc-detail-media{ order:2; }
@media (max-width:900px){ .svc-detail{ grid-template-columns:1fr; } .svc-detail:nth-child(even) .svc-detail-media{ order:0; } }
.svc-detail-media{ position:relative; aspect-ratio:5/4; overflow:hidden; }
.svc-detail-media img{ width:100%; height:100%; object-fit:cover; }
.feat-list{ margin-top:1.6rem; display:grid; gap:.8rem; }
.feat-list li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.96rem; }
.feat-list i{ color:var(--brass); margin-top:.2rem; }

/* ===================== BLOG ===================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card .frame{ aspect-ratio:5/4; overflow:hidden; position:relative; }
.blog-card .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.blog-card:hover .frame img{ transform:scale(1.07); }
.blog-card .meta{ display:flex; gap:1rem; color:var(--slate); font-size:.8rem; margin-top:1.1rem; }
.blog-card .meta .cat{ color:var(--brass); font-weight:700; }
.blog-card h3{ font-size:1.3rem; margin-top:.6rem; }
.blog-card .excerpt{ color:var(--slate); font-size:.92rem; margin-top:.5rem; }
.featured-post{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,60px); align-items:center; margin-bottom:clamp(50px,6vw,80px); padding-bottom:clamp(50px,6vw,80px); border-bottom:1px solid var(--line); }
@media (max-width:900px){ .featured-post{ grid-template-columns:1fr; } }
.featured-post .frame{ aspect-ratio:16/11; overflow:hidden; }
.featured-post .frame img{ width:100%; height:100%; object-fit:cover; }

/* ===================== PROJECT DETAILS ===================== */
.pd-meta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:2.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:2.6rem 0; }
@media (max-width:700px){ .pd-meta-grid{ grid-template-columns:repeat(2,1fr); } }
.pd-meta-grid .label{ display:block; margin-bottom:.4rem; }
.pd-meta-grid .val{ font-family:var(--font-display); font-size:1.15rem; }
.pd-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:700px){ .pd-gallery{ grid-template-columns:1fr; } }
.pd-gallery .item{ overflow:hidden; aspect-ratio:4/5; border-radius:16px; }
.pd-gallery .item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pd-gallery .item:hover img{ transform:scale(1.05); }
.pd-nav{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.pd-nav a{ padding:2.4rem; display:flex; flex-direction:column; gap:.4rem; transition:background var(--dur-s) var(--ease); }
.pd-nav a:hover{ background:var(--mist-2); }
.pd-nav a.next{ text-align:right; align-items:flex-end; border-left:1px solid var(--line); }
@media (max-width:600px){ .pd-nav{ grid-template-columns:1fr; } .pd-nav a.next{ border-left:0; border-top:1px solid var(--line); } }

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:2000;
  background:var(--gold-grad); background-size:220% auto; animation:goldShine 8s linear infinite;
  transition:width .1s linear;
}

/* ===================== WHATSAPP FLOAT ===================== */
.whatsapp-float{
  position:fixed; left:26px; bottom:26px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; z-index:500; box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
  animation:badgeFloat 3.4s ease-in-out infinite;
}
.whatsapp-float:hover{ color:#fff; transform:scale(1.06); }

/* Premium card lift (services / projects / gallery / blog) */
.svc-card,.proj-card,.masonry-item,.blog-card .frame,.testi-media,.about-media-frame{ border-radius:var(--radius-md); }
.svc-card{ box-shadow:var(--shadow-soft); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-premium); }
.proj-card{ box-shadow:var(--shadow-soft); }

/* Scrollbar accent */
::selection{ background:var(--brass); color:var(--paper); }

/* ===================================================================
   PREMIUM ADD-ONS — floating decor, instagram slider, gallery reel,
   upgraded masonry cards, tilt interaction
   =================================================================== */

/* ---------- Floating interior-design decor icons ---------- */
.deco-float{
  position:absolute; z-index:1; pointer-events:none;
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist-2); border:1px solid var(--line);
  color:var(--brass); font-size:1.4rem;
  box-shadow:var(--shadow-soft);
  animation:decoFloat 6s var(--ease) infinite;
  opacity:.9;
}
.bg-ink .deco-float, .page-hero .deco-float{
  background:rgba(255,255,255,.06); border-color:var(--line-invert); color:var(--brass-light);
}
.deco-1{ top:6%; left:2%; animation-delay:0s; }
.deco-2{ bottom:8%; right:3%; width:48px; height:48px; font-size:1.1rem; animation-delay:1.2s; }
.deco-3{ top:14%; right:6%; width:40px; height:40px; font-size:1rem; animation-delay:.6s; }
@keyframes decoFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(8deg); }
}
@media (max-width:900px){ .deco-float{ display:none; } }

/* ---------- Section titles (v3): sit inline with heading, icon + rule accent ---------- */

/* ---------- Instagram-style card slider (home + gallery reel) ---------- */
.insta-section{ position:relative; overflow:hidden; }
.insta-slider{ margin-top:clamp(28px,4vw,44px); }
.insta-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 22px; -ms-overflow-style:none; scrollbar-width:none; cursor:grab;
}
.insta-track:active{ cursor:grabbing; }
.insta-track::-webkit-scrollbar{ display:none; }
.insta-card{
  position:relative; flex:0 0 clamp(210px,22vw,272px); aspect-ratio:4/5; scroll-snap-align:start;
  border-radius:var(--radius-md); overflow:hidden; display:block; background:var(--ink);
  box-shadow:var(--shadow-soft); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.insta-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.insta-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-premium); }
.insta-card:hover img{ transform:scale(1.1); }
.insta-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,29,33,0) 40%, rgba(28,29,33,.86) 100%);
}
.insta-top{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.insta-bottom{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:var(--paper); }
.insta-bottom .cat{ display:block; font-size:.76rem; font-weight:600; letter-spacing:.03em; color:var(--brass-light); margin-bottom:.3rem; text-transform:uppercase; }
.insta-bottom p{ font-family:var(--font-accent); font-size:1.02rem; font-style:italic; opacity:.94; }
.insta-cta{
  background:linear-gradient(155deg, var(--ink) 0%, #232428 60%, var(--brass) 150%);
}
.insta-cta-inner{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:.9rem; color:var(--paper); padding:1.5rem;
}
.insta-cta-inner i{ font-size:2.1rem; color:var(--brass-light); }
.insta-cta-inner .handle{ font-family:var(--font-accent); font-size:1.25rem; font-style:italic; }
.insta-cta-inner .follow-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.3rem; border-radius:16px;
  background:var(--paper); color:var(--ink); font-size:.82rem; font-weight:700; letter-spacing:.03em;
  transition:transform var(--dur-s) var(--ease);
}
.insta-cta:hover .follow-btn{ transform:scale(1.05); }

/* ---------- Gallery premium reel (auto-scrolling filmstrip) ---------- */
.gallery-reel{
  position:relative; overflow:hidden; padding:clamp(28px,4vw,40px) 0; background:var(--ink);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gallery-reel .reel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.gallery-reel .reel-track{ display:flex; gap:16px; width:max-content; animation:reelScroll 34s linear infinite; }
.gallery-reel:hover .reel-track{ animation-play-state:paused; }
.reel-item{
  flex:0 0 240px; height:150px; border-radius:4px; overflow:hidden; position:relative;
  border:1px solid var(--line-invert); box-shadow:0 16px 34px -18px rgba(0,0,0,.5);
  transition:border-color var(--dur-m) var(--ease);
}
.reel-item:hover{ border-color:var(--brass); }
.reel-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(20,22,30,.28) 0%, transparent 45%); pointer-events:none; }
.reel-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.reel-item:hover img{ transform:scale(1.08); }
.reel-item i{
  position:absolute; top:10px; right:10px; color:#fff; font-size:.9rem; opacity:.85; z-index:2;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
@keyframes reelScroll{ to{ transform:translateX(-50%); } }

/* ---------- Upgraded masonry / gallery cards ---------- */
.masonry-item{
  border-radius:16px; box-shadow:var(--shadow-soft);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), opacity .4s var(--ease);
}
.masonry-item:hover{ box-shadow:var(--shadow-premium); transform:translateY(-4px); }
.masonry-item .m-index{
  position:absolute; top:12px; left:12px; z-index:2; color:var(--paper); font-family:var(--font-display);
  font-style:italic; font-size:.8rem; opacity:0; transform:translateY(-6px) scale(.9);
  width:30px; height:30px; border-radius:50%; background:rgba(20,22,30,.55); backdrop-filter:blur(6px);
  border:1px solid var(--line-invert); display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-m) var(--ease);
}
.masonry-item:hover .m-index{ opacity:1; transform:none; }

/* ---------- Gallery page: true masonry grid (CSS columns, no gaps, images fit exactly) ---------- */
.masonry-grid{ column-count:4; column-gap:12px; }
.masonry-grid .proj-card{
  display:block; width:100%; margin:0 0 12px; break-inside:avoid; -webkit-column-break-inside:avoid;
  position:relative; overflow:hidden;
}
.masonry-grid .proj-card .frame{ aspect-ratio:auto; height:auto; }
.masonry-grid .proj-card .frame img{ width:100%; height:auto; display:block; object-fit:cover; }
.masonry-grid .proj-card .frame::after{ content:none; }
.masonry-grid .proj-card .svc-card-arrow{ top:14px; right:14px; }
.masonry-grid .proj-card.hide{ display:none; }
@media (max-width:1100px){ .masonry-grid{ column-count:3; } }
@media (max-width:760px){ .masonry-grid{ column-count:2; column-gap:8px; } .masonry-grid .proj-card{ margin-bottom:8px; } }
@media (max-width:420px){ .masonry-grid{ column-gap:6px; } .masonry-grid .proj-card{ margin-bottom:6px; } }

/* Tilt-on-hover 3D card interaction (premium micro-interaction) */
.tilt-card{ transform-style:preserve-3d; will-change:transform; }

/* ---------- SEO section: icon feature cards ---------- */
.seo-section{ position:relative; overflow:hidden; }
.seo-cities{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.seo-cities span{
  font-size:.78rem; letter-spacing:.03em; color:var(--graphite); background:var(--paper);
  padding:.5rem .95rem; border:1px solid var(--line);
}
.seo-panel{ background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--brass); padding:.3rem clamp(1.3rem,2vw,2.1rem); }
.seo-feature{
  display:flex; align-items:center; gap:1.1rem; padding:1.3rem 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--dur-m) var(--ease);
}
.seo-feature:last-child{ border-bottom:0; }
.seo-feature:hover{ padding-left:.4rem; }
.seo-feature .ic{
  width:44px; height:44px; border-radius:50%; flex:none; background:var(--mist-2); border:1px solid var(--line); color:var(--brass);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition:all var(--dur-m) var(--ease);
}
.seo-feature:hover .ic{ background:var(--brass); border-color:var(--brass); color:var(--paper); }
.seo-feature .tt{ font-size:.95rem; font-weight:600; line-height:1.35; }

/* Premium filter pills */
.gallery-filters{ position:relative; }
.gfilter{ position:relative; overflow:hidden; }
.gfilter.active{ box-shadow:var(--shadow-soft); }

/* ===================== WHY CHOOSE US ===================== */
.wcu-section{ position:relative; overflow:hidden; }
.wcu-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:clamp(40px,5vw,64px);
}
@media (max-width:900px){ .wcu-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wcu-grid{ grid-template-columns:1fr; } }
.wcu-card{
  background:var(--paper); padding:clamp(1.8rem,2.4vw,2.6rem) clamp(1.5rem,2vw,2rem);
  position:relative; transition:background var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.wcu-card::before{
  content:''; position:absolute; left:0; top:0; height:0; width:3px; background:var(--luxe-grad);
  transition:height var(--dur-m) var(--ease);
}
.wcu-card:hover{ transform:translateY(-4px); }
.wcu-card:hover::before{ height:100%; }
.wcu-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--mist-2); color:var(--brass); font-size:1.3rem; margin-bottom:1.3rem;
  transition:all var(--dur-m) var(--ease);
}
.wcu-card:hover .wcu-icon{ background:var(--luxe-grad); color:var(--paper); transform:rotate(-8deg) scale(1.05); }
.wcu-num{ position:absolute; top:1.6rem; right:1.7rem; font-family:var(--font-accent); font-style:italic; color:var(--line); font-size:1.6rem; }
.wcu-title{ font-family:var(--font-display); font-size:1.18rem; line-height:1.3; }
.wcu-text{ color:var(--slate); font-size:.9rem; margin-top:.6rem; line-height:1.65; }

/* Trust / credential strip — signals scale without inventing certifications */
.trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;
  margin-top:clamp(40px,5vw,60px); padding-top:clamp(28px,3vw,38px); border-top:1px solid var(--line);
}
.trust-item{ display:flex; align-items:center; gap:.85rem; }
.trust-item .ic{
  width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--mist-2); color:var(--gold); font-size:1.05rem; border:1px solid var(--line);
}
.trust-item .tt{ font-size:.84rem; color:var(--graphite); line-height:1.3; max-width:16ch; }
.trust-item .tt strong{ display:block; font-family:var(--font-display); font-size:1rem; font-weight:600; }

/* ===================== SERVICES — CATEGORY LAYOUT ===================== */
.svc-cat{ padding-top:clamp(46px,6vw,70px); }
.svc-cat + .svc-cat{ border-top:1px solid var(--line); }
.svc-cat-head{ display:flex; align-items:flex-start; gap:1.4rem; margin-bottom:clamp(28px,3.4vw,40px); }
.svc-cat-icon{
  width:64px; height:64px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--luxe-grad); color:var(--paper); font-size:1.5rem;
}
.svc-cat-head h3{ font-family:var(--font-display); font-size:clamp(1.4rem,2vw,1.9rem); }
.svc-cat-head p{ color:var(--slate); font-size:.94rem; margin-top:.4rem; max-width:62ch; }

.svc-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px){ .svc-mini-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-mini-grid{ grid-template-columns:1fr; } }
.svc-mini{
  background:var(--paper); border:1px solid var(--line); padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.9rem; transition:all var(--dur-m) var(--ease);
}
.svc-mini:hover{ border-color:transparent; box-shadow:var(--shadow-premium); transform:translateY(-4px); }
.svc-mini .ic{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--mist-2); color:var(--brass); font-size:1.05rem; transition:all var(--dur-m) var(--ease);
}
.svc-mini:hover .ic{ background:var(--luxe-grad); color:var(--paper); }
.svc-mini h4{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.svc-mini p{ color:var(--slate); font-size:.86rem; line-height:1.55; margin:0; }

.svc-cat-premium .svc-cat-icon{ background:var(--ink); }
.svc-cat-premium .svc-mini{ background:var(--mist-2); }
.svc-cat-premium .svc-mini:hover{ background:var(--paper); }

/* =====================================================================
   ICON TREATMENT v3 — calm, professional, no gimmicks
   Bigger badges, a soft static shadow, a clean fill-in on hover only.
   Nothing spins or bounces at rest — motion happens once, on interaction.
   ===================================================================== */
@keyframes iconPop{ 0%{ transform:scale(.85); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* Services page — bigger, cleaner badges */
.svc-cat-icon{
  width:84px; height:84px; font-size:1.9rem;
  box-shadow:0 12px 26px -14px rgba(20,22,30,.3);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.svc-cat:hover .svc-cat-icon{ transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(20,22,30,.22); }

.svc-mini .ic{
  width:58px; height:58px; font-size:1.3rem;
  box-shadow:0 8px 18px -12px rgba(20,22,30,.25);
}
.svc-mini .ic i{ transition:transform var(--dur-m) var(--ease); }
.svc-mini:hover .ic i{ transform:scale(1.12); }

@media (max-width:560px){
  .svc-cat-icon{ width:72px; height:72px; font-size:1.65rem; }
  .svc-mini .ic{ width:52px; height:52px; font-size:1.15rem; }
}

/* Reveal: icons ease in once with the rest of the section — no looping */
[data-reveal] .wcu-icon, [data-reveal] .p-icon, [data-reveal] .svc-cat-icon, [data-reveal] .svc-mini .ic{
  animation:iconPop .5s var(--ease);
}

/* Small badge icons everywhere — trust strip, SEO features, footer contacts */
.trust-item .ic, .seo-feature .ic, .footer-contact-row .ic, .wcu-icon, .p-icon{
  transition:transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease), color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.trust-item:hover .ic{ background:var(--luxe-grad); color:var(--paper); transform:translateY(-2px); }
.seo-feature:hover .ic{ transform:translateY(-2px); }
.footer-contact-row a:hover .ic{ transform:translateY(-2px); }
.wcu-card:hover .wcu-icon{ transform:translateY(-3px); }
.process-node:hover .p-icon{ transform:translateY(-3px); }

@media (prefers-reduced-motion:reduce){
  [data-reveal] .wcu-icon, [data-reveal] .p-icon, [data-reveal] .svc-cat-icon, [data-reveal] .svc-mini .ic{
    animation:none !important;
  }
}

/* =====================================================================
   CALL FLOAT — pairs with WhatsApp float, sits opposite corner
   ===================================================================== */
.whatsapp-float{ transition:transform var(--dur-m) var(--ease); }
.whatsapp-float:hover{ transform:scale(1.08); }

.call-float{
  position:fixed; right:26px; bottom:26px; width:56px; height:56px; border-radius:50%;
  background:var(--luxe-grad,var(--ink)); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; z-index:500; box-shadow:0 14px 34px -10px rgba(0,0,0,.4);
  transition:transform var(--dur-m) var(--ease);
}
.call-float:hover{ color:#fff; transform:scale(1.08); }
@media (max-width:560px){
  .whatsapp-float, .call-float{ width:48px; height:48px; font-size:1.25rem; }
  .whatsapp-float{ left:16px; bottom:16px; }
  .call-float{ right:16px; bottom:16px; }
}