/* ============================================================
   HINGU FASHION DESIGNER — Couture landing page
   Palette: rose gold accent + cream background + charcoal ink
   Type: Cormorant Garamond (display) / Jost (UI & body)
   ============================================================ */

/* Fonts are loaded via <link> in index.html (faster than @import). */

:root{
  --red:        #B07660;
  --red-deep:   #8C5A48;
  --red-soft:   #F5E8E0;
  --blue:       #189DE0;

  --ink:        #2C2C2C;
  --ink-soft:   #666666;
  --ink-faint:  #999999;

  --bg:         #FDF6F0;
  --bg-alt:     #F5EEE8;
  --bg-deep:    #1C1C1C;
  --paper:      #FFFFFF;

  --gold:       #B07660;
  --gold-light: #C99282;
  --gold-pale:  #F5E8E0;

  --line:       rgba(44,44,44,.10);
  --line-soft:  rgba(44,44,44,.06);

  --shadow-sm:  0 2px 14px rgba(44,44,44,.06);
  --shadow-md:  0 18px 50px -22px rgba(44,44,44,.20);
  --shadow-lg:  0 40px 90px -40px rgba(44,44,44,.30);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --gold-grad: linear-gradient(100deg,#8C5A48 0%,#C99282 38%,#B07660 64%,#E8C0B0 100%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.7;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--red); color:#fff; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.04; margin:0; letter-spacing:-.01em; }
.display{ font-size:clamp(2.9rem,7vw,6rem); font-weight:600; }
.h-section{ font-size:clamp(2.2rem,4.6vw,3.7rem); }
.italic{ font-style:italic; font-weight:500; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:.85em; margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:30px; height:1px; background:var(--gold); display:inline-block; }

.lead{ font-size:1.16rem; color:var(--ink-soft); font-weight:300; line-height:1.75; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
section{ position:relative; }
.section-pad{ padding:clamp(72px,11vw,150px) 0; }
.center{ text-align:center; }
.section-head{ max-width:660px; }
.section-head.center{ margin:0 auto; }
.section-head .lead{ margin-top:1.1rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; padding:1.05em 1.9em; border-radius:2px;
  transition:.4s cubic-bezier(.2,.7,.2,1); position:relative; white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 14px 30px -14px rgba(176,118,96,.5); }
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(176,118,96,.55); }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); transform:translateY(-2px); }
.btn-gold{ background:var(--gold-grad); color:#3a2a08; }
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-light{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--ink); }
.btn-block{ width:100%; }

.link-arrow{
  font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:.4em; border-bottom:1px solid var(--line); transition:.3s;
}
.link-arrow svg{ width:18px; transition:transform .3s; }
.link-arrow:hover{ color:var(--red); border-color:var(--red); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background .4s, box-shadow .4s, padding .4s;
  padding:22px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; gap:13px; }
.nav-logo img.mark{ height:46px; width:auto; transition:height .4s; }
.nav-logo img.word-img{ height:38px; width:auto; transition:height .4s; }
.nav.scrolled .nav-logo img.word-img{ height:34px; }

.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--sans); font-weight:400; font-size:.83rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--red); transition:width .3s; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav.at-top{ background:transparent; }
.nav.at-top .nav-links a{ color:#fff; }
.nav.at-top .nav-links a::after{ background:var(--gold-light); }
.nav.scrolled{ background:rgba(253,246,240,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); padding:13px 0; }
.nav.scrolled .nav-logo img.mark{ height:40px; }

.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; }
.nav.at-top .burger span{ background:#fff; }
.mobile-menu{
  position:fixed; inset:0; z-index:95; background:var(--bg-deep); color:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  opacity:0; pointer-events:none; transition:.45s;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--serif); font-size:2rem; color:#fff; padding:.25em; }
.mobile-menu a:hover{ color:var(--gold-light); }
.mobile-menu .close{ position:absolute; top:24px; right:24px; color:#fff; font-size:2rem; width:44px; height:44px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; background:var(--bg-deep); overflow:hidden; padding-top:90px; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:
   linear-gradient(180deg, rgba(15,11,10,.78) 0%, rgba(15,11,10,.45) 38%, rgba(15,11,10,.58) 75%, rgba(15,11,10,.80) 100%); z-index:2; }
.hero-grain{ position:absolute; inset:0; z-index:3; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:3px 3px; }
.hero-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(700px,70vw); opacity:.07; z-index:3; filter:brightness(0) invert(1); pointer-events:none; }
.hero-inner{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); width:100%; }
.hero-inner.hero-center{ display:flex; justify-content:center; }
.hero-content{ max-width:660px; color:#fff; }
.hero-center .hero-content{ text-align:center; max-width:820px; }
.hero .eyebrow{ color:var(--gold-light); }
.hero .eyebrow::before{ background:var(--gold-light); }
.hero-center .eyebrow{ justify-content:center; }
.hero-center .eyebrow::after{ content:""; width:30px; height:1px; background:var(--gold-light); display:inline-block; }
.hero h1{ color:#fff; margin-bottom:.62em; line-height:1.12; padding-bottom:.04em; }
.hero h1 .italic{ color:var(--gold-light); }
.hero-sub{ font-size:1.18rem; font-weight:300; color:rgba(255,255,255,.82); max-width:540px; line-height:1.75; margin-bottom:2.3rem; }
.hero-center .hero-sub{ max-width:680px; margin-left:auto; margin-right:auto; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; }
.hero-center .hero-cta{ justify-content:center; }
.hero-meta{ display:flex; gap:38px; margin-top:3rem; flex-wrap:wrap; }
.hero-center .hero-meta{ justify-content:center; }
.hero-meta .stat b{ font-family:var(--serif); font-size:2.3rem; font-weight:600; color:#fff; display:block; line-height:1; }
.hero-meta .stat span{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); }
.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:6; color:rgba(255,255,255,.6); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ---------- marquee ---------- */
.marquee{ background:var(--ink); color:var(--bg); overflow:hidden; padding:18px 0; }
.marquee-track{ display:flex; gap:60px; white-space:nowrap; width:max-content; animation:scrollx 32s linear infinite; }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--bg); display:inline-flex; align-items:center; gap:60px; }
.marquee-track span::after{ content:"✦"; color:var(--gold-light); font-style:normal; font-size:.8rem; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   STORY / ABOUT SPLIT (House-of-Stitch style)
   ============================================================ */
.story-section{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:min(82vh,820px); overflow:hidden;
}
.story-text{
  background:var(--bg);
  display:flex; align-items:center;
  padding:clamp(60px,9vw,110px) clamp(36px,6vw,88px);
}
.story-text-inner{ max-width:520px; }
.story-rule{
  width:44px; height:1.5px; background:var(--gold); margin:2rem 0;
}
.story-pillars{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line);
}
.story-pillar-label{
  font-family:var(--sans); font-size:.63rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:8px;
}
.story-pillar-text{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--ink-soft); line-height:1.65; margin:0;
}
.story-photo{ position:relative; overflow:hidden; }
.story-photo img{
  width:100%; height:100%; min-height:550px; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.15,.75,.2,1);
}
.story-photo:hover img{ transform:scale(1.04); }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--bg-alt); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:60px; }
.svc-card{ background:var(--bg); padding:46px 38px; transition:.45s; position:relative; overflow:hidden; }
.svc-card::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--red); transform:scaleY(0); transform-origin:bottom; transition:transform .45s; }
.svc-card:hover{ background:var(--paper); }
.svc-card:hover::before{ transform:scaleY(1); }
.svc-num{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--gold); position:absolute; top:28px; right:34px; }
.svc-ic{ width:46px; height:46px; color:var(--red); margin-bottom:24px; transition:transform .45s; }
.svc-card:hover .svc-ic{ transform:translateY(-4px) scale(1.05); }
.svc-card h3{ font-size:1.7rem; margin-bottom:10px; }
.svc-card p{ font-size:.96rem; color:var(--ink-soft); line-height:1.65; margin:0; }

/* ============================================================
   (Removed: unused "services list / contact cards" styles that
   conflicted with the live .svc-num and .contact-grid rules.)
   ============================================================ */

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:64px; position:relative; }
.steps::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:1px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.step-dot{ width:70px; height:70px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--red); transition:.4s; position:relative; }
.step:hover .step-dot{ background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.step-ic{ width:30px; height:30px; color:var(--red); margin:0 auto 14px; }
.step h4{ font-size:1.35rem; margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; margin:0; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{ background:var(--bg-deep); color:#fff; }
.portfolio .eyebrow{ color:var(--gold-light); }
.portfolio .eyebrow::before,.portfolio .eyebrow::after{ background:var(--gold-light); }
.portfolio h2{ color:#fff; }
.portfolio .lead{ color:rgba(255,255,255,.7); }
.port-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:38px 0 50px; }
.port-filter{ font-family:var(--sans); font-weight:400; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); padding:.7em 1.3em; border:1px solid rgba(255,255,255,.18); border-radius:40px; transition:.3s; }
.port-filter:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.port-filter.active{ background:var(--red); border-color:var(--red); color:#fff; }
.port-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:320px; gap:10px; }
.port-item{ position:relative; overflow:hidden; background:#1a1210; border-radius:6px; cursor:pointer; }
.port-item.tall{ grid-row:span 2; }
.port-item.wide{ grid-column:span 2; }
.port-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.15,.75,.2,1); }
.port-item:hover img{ transform:scale(1.08); }
/* permanent subtle gradient so bottom is always darkened */
.port-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,7,6,.65) 0%,transparent 50%); z-index:2; pointer-events:none; transition:.4s; }
.port-item:hover::after{ background:linear-gradient(to top,rgba(10,7,6,.88) 0%,transparent 60%); }
.port-cap{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 24px; pointer-events:none; }
.port-cap .tag{ font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); margin-bottom:5px; opacity:1; transition:.4s; }
.port-cap h4{ font-size:1.35rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); transform:translateY(6px); opacity:0; transition:.45s cubic-bezier(.2,.8,.2,1); }
.port-item:hover .port-cap h4{ transform:translateY(0); opacity:1; }
.port-hidden{ display:none !important; }

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.ba-compare{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; box-shadow:var(--shadow-md); user-select:none; touch-action:none; }
.ba-layer{ position:absolute; inset:0; }
.ba-layer img{ width:100%; height:100%; object-fit:cover; }
.ba-after{ clip-path:inset(0 0 0 50%); }
.ba-tag{ position:absolute; bottom:18px; z-index:4; font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; background:rgba(15,11,10,.7); color:#fff; padding:.6em 1em; backdrop-filter:blur(4px); }
.ba-tag.l{ left:18px; } .ba-tag.r{ right:18px; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:6; transform:translateX(-50%); }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; color:var(--red); cursor:ew-resize; }
.ba-knob svg{ width:24px; height:24px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{ background:var(--bg-alt); overflow:hidden; }
.testi-stage{ position:relative; max-width:880px; margin:50px auto 0; }
.testi-track{ display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.testi-slide{ min-width:100%; padding:0 10px; }
.testi-card{ background:var(--paper); padding:clamp(36px,5vw,64px); text-align:center; box-shadow:var(--shadow-sm); position:relative; }
.testi-card .quote-mark{ font-family:var(--serif); font-size:6rem; line-height:.6; color:var(--gold-pale); height:42px; }
.testi-stars{ color:var(--gold); letter-spacing:4px; margin:0 0 22px; font-size:1.05rem; }
.testi-text{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.95rem); font-weight:500; font-style:italic; line-height:1.45; color:var(--ink); margin-bottom:30px; }
.testi-who{ display:flex; align-items:center; justify-content:center; gap:16px; }
.t-avatar{
  width:58px; height:58px; flex:none; border-radius:50%;
  background:var(--gold-grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.6rem; font-weight:600;
  box-shadow:0 8px 20px -8px rgba(176,118,96,.55);
}
.testi-who .nm b{ display:block; font-family:var(--serif); font-size:1.25rem; font-weight:600; }
.testi-who .nm span{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.testi-nav{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:38px; }
.testi-arrow{ width:50px; height:50px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.3s; }
.testi-arrow:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.testi-arrow svg{ width:18px; }
.testi-dots{ display:flex; gap:9px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.3s; }
.testi-dot.active{ background:var(--red); width:24px; border-radius:4px; }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.ig-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:46px; }
.ig-item{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-alt); }
.ig-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.ig-item:hover img{ transform:scale(1.08); }
.ig-item::after{ content:""; position:absolute; inset:0; background:var(--red); opacity:0; transition:.4s; display:flex; }
.ig-item:hover::after{ opacity:.18; }
.ig-item .ig-ic{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:.4s; }
.ig-item:hover .ig-ic{ opacity:1; }
.ig-item .ig-ic svg{ width:30px; height:30px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--bg-alt); }
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,90px); align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; padding:26px 0; font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--ink); }
.faq-q .pm{ flex:none; width:30px; height:30px; position:relative; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--red); transition:.35s; }
.faq-q .pm::before{ top:50%; left:5px; right:5px; height:2px; transform:translateY(-50%); }
.faq-q .pm::after{ left:50%; top:5px; bottom:5px; width:2px; transform:translateX(-50%); }
.faq-item.open .pm::after{ transform:translateX(-50%) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ padding:0 0 26px; color:var(--ink-soft); font-size:1rem; max-width:90%; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{ position:relative; background:var(--red); color:#fff; overflow:hidden; }
.cta-banner .wrap{ position:relative; z-index:3; text-align:center; padding:clamp(72px,11vw,140px) var(--gut); }
.cta-mark{ position:absolute; z-index:1; opacity:.08; filter:brightness(0) invert(1); }
.cta-mark.a{ left:-6%; top:-30%; width:420px; transform:rotate(-8deg); }
.cta-mark.b{ right:-6%; bottom:-40%; width:480px; transform:rotate(10deg); }
.cta-banner .eyebrow{ color:#fff; }
.cta-banner .eyebrow::before,.cta-banner .eyebrow::after{ background:rgba(255,255,255,.6); }
.cta-banner h2{ color:#fff; max-width:760px; margin:0 auto .6em; }
.cta-banner p{ color:rgba(255,255,255,.86); max-width:520px; margin:0 auto 2.4rem; font-size:1.12rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,80px); }
.contact-info .eyebrow{ }
.contact-rows{ margin-top:30px; display:flex; flex-direction:column; }
.c-row{ display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line); }
.c-row:first-child{ border-top:1px solid var(--line); }
.c-row .ic{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--bg-alt); color:var(--red); display:flex; align-items:center; justify-content:center; }
.c-row .ic svg{ width:20px; height:20px; }
.c-row .meta span{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:3px; }
.c-row .meta b{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); }
.contact-socials{ display:flex; gap:12px; margin-top:30px; }
.contact-socials a{ width:46px; height:46px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.3s; }
.contact-socials a:hover{ background:var(--ink); color:#fff; transform:translateY(-3px); }
.contact-socials a svg{ width:19px; }

.contact-form{ background:var(--paper); padding:clamp(32px,4vw,52px); box-shadow:var(--shadow-md); }
.contact-form h3{ font-size:1.9rem; margin-bottom:6px; }
.contact-form .fsub{ color:var(--ink-soft); font-size:.96rem; margin-bottom:28px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-weight:300; font-size:1rem; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); background:var(--bg); border-radius:2px; transition:.3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); background:#fff; box-shadow:0 0 0 3px var(--red-soft); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.78rem; color:var(--ink-faint); margin-top:14px; text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg-deep); color:rgba(255,255,255,.65); padding:80px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.1); align-items:start; }
.footer-top > div:nth-child(2){ justify-self:center; text-align:center; }
.footer-top > div:nth-child(2) ul{ align-items:center; }
.footer-top > div:nth-child(3){ justify-self:end; text-align:right; }
.footer-top > div:nth-child(3) ul{ align-items:flex-end; }
.footer .f-logo{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.footer .f-logo img.f-wordmark{ height:64px; width:auto; background:rgba(255,255,255,.96); padding:12px 16px; border-radius:4px; }
.footer p.f-desc{ font-size:.96rem; line-height:1.7; max-width:300px; }
.footer h5{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin:0 0 22px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.footer ul a{ font-size:.96rem; color:rgba(255,255,255,.65); transition:.3s; }
.footer ul a:hover{ color:var(--gold-light); padding-left:5px; }
.footer .f-socials{ display:flex; gap:10px; margin-top:20px; }
.footer .f-socials a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:.3s; }
.footer .f-socials a:hover{ background:var(--red); border-color:var(--red); }
.footer .f-socials svg{ width:17px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.82rem; }
.footer-bottom a:hover{ color:#fff; }

/* ============================================================
   WHATSAPP FLOAT + MODAL
   ============================================================ */
.wa-float{ position:fixed; bottom:26px; right:26px; z-index:80; width:62px; height:62px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -10px rgba(37,211,102,.6); transition:.3s; }
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }
.wa-float svg{ width:32px; height:32px; }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

.modal-overlay{ position:fixed; inset:0; z-index:9999; background:rgba(15,11,10,.62); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:.4s; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{ background:var(--bg); width:min(560px,100%); max-height:92vh; overflow:auto; position:relative; box-shadow:var(--shadow-lg); transform:translateY(20px) scale(.98); transition:.45s; }
.modal-overlay.open .modal{ transform:none; }
.modal-head{ background:var(--bg-deep); color:#fff; padding:34px 38px; position:relative; overflow:hidden; }
.modal-head img.mk{ position:absolute; right:-30px; top:-30px; width:200px; opacity:.1; filter:brightness(0) invert(1); }
.modal-head .eyebrow{ color:var(--gold-light); }
.modal-head .eyebrow::before{ background:var(--gold-light); }
.modal-head h3{ color:#fff; font-size:2rem; position:relative; }
.modal-close{ position:absolute; top:18px; right:18px; color:#fff; width:40px; height:40px; font-size:1.6rem; z-index:5; }
.modal-body{ padding:34px 38px 40px; }
.steps-bar{ display:flex; gap:8px; margin-bottom:28px; }
.steps-bar .sb{ flex:1; height:3px; background:var(--line); border-radius:2px; transition:.4s; }
.steps-bar .sb.done{ background:var(--red); }
.mstep{ display:none; }
.mstep.active{ display:block; animation:fadeUp .4s ease; }
.mstep h4{ font-size:1.5rem; margin-bottom:18px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--sans); font-size:.85rem; padding:.7em 1.2em; border:1px solid var(--line); border-radius:40px; background:#fff; transition:.25s; }
.chip:hover{ border-color:var(--red); }
.chip.sel{ background:var(--red); color:#fff; border-color:var(--red); }
.modal-actions{ display:flex; gap:12px; margin-top:30px; }
.success-tick{ width:80px; height:80px; border-radius:50%; background:var(--gold-grad); color:#3a2a08; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.success-tick svg{ width:38px; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeUp       { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes heroFadeUp   { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes shimmer      { from{ left:-100%; } to{ left:120%; } }
@keyframes badgePulse   { 0%,100%{ box-shadow:0 18px 50px -22px rgba(44,44,44,.20),0 0 0 0 rgba(176,118,96,.35); } 55%{ box-shadow:0 18px 50px -22px rgba(44,44,44,.20),0 0 0 16px rgba(176,118,96,0); } }
@keyframes dotRipple    { 0%{ box-shadow:0 0 0 0 rgba(176,118,96,.45); } 100%{ box-shadow:0 0 0 20px rgba(176,118,96,0); } }
@keyframes knobPulse    { 0%,100%{ box-shadow:0 18px 50px -22px rgba(44,44,44,.20),0 0 0 0 rgba(255,255,255,.55); } 60%{ box-shadow:0 18px 50px -22px rgba(44,44,44,.20),0 0 0 12px rgba(255,255,255,0); } }
@keyframes ctaShimmer   { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes ping         { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes cue          { 0%,100%{ transform:scaleY(.3); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@keyframes scrollx      { to{ transform:translateX(-50%); } }
@keyframes rippleOut    { to{ transform:scale(4); opacity:0; } }
@keyframes bounceUp     { 0%{ transform:translateY(0); } 38%{ transform:translateY(-7px); } 65%{ transform:translateY(-3px); } 100%{ transform:translateY(0); } }
@keyframes lineGrow     { from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); transform-origin:left; } }
@keyframes logoBob      { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* ============================================================
   SCROLL REVEAL
   Hidden-by-default ONLY when JS is confirmed running (html.js
   is set by a tiny inline script in <head>). If JavaScript ever
   fails to load, every section stays fully visible — the page
   can never appear blank.
   ============================================================ */
html.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
}
html.js .reveal.in{ opacity:1; transform:none; }

html.js .reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }
html.js .reveal-left.in{ opacity:1; transform:none; }
html.js .reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }
html.js .reveal-right.in{ opacity:1; transform:none; }
html.js .reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }
html.js .reveal-scale.in{ opacity:1; transform:scale(1); }

.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }
.reveal-scale.d1{ transition-delay:.06s; } .reveal-scale.d2{ transition-delay:.12s; } .reveal-scale.d3{ transition-delay:.18s; } .reveal-scale.d4{ transition-delay:.24s; }

/* ============================================================
   HERO LOAD STAGGER (above-fold — CSS-driven)
   ============================================================ */
.hero .eyebrow { animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) .25s both; }
.hero h1       { animation:heroFadeUp .9s  cubic-bezier(.2,.8,.2,1) .44s both; }
.hero-sub      { animation:heroFadeUp .9s  cubic-bezier(.2,.8,.2,1) .62s both; }
.hero-cta      { animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) .80s both; }
.hero-meta     { animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) .96s both; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:2.5px; z-index:200;
  background:var(--gold-grad); transform-origin:left; transform:scaleX(0);
  pointer-events:none;
}

/* ============================================================
   ABOUT BADGE PULSE
   ============================================================ */
.about-media .badge{ animation:badgePulse 3.2s ease-in-out infinite; }

/* ============================================================
   (Removed: shimmer-sweep ::after rule — it conflicted with the
   mouse-spotlight ::after below and permanently shifted the
   spotlight off-screen after the first hover.)
   ============================================================ */

/* ============================================================
   STEP DOT RIPPLE
   ============================================================ */
.step:hover .step-dot{ animation:dotRipple .75s ease-out; }

/* ============================================================
   BEFORE / AFTER KNOB PULSE
   ============================================================ */
.ba-knob{ animation:knobPulse 3s ease-in-out infinite; }

/* ============================================================
   BUTTON RIPPLE
   ============================================================ */
.btn{ overflow:hidden; }
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.28); animation:rippleOut .65s linear;
  pointer-events:none;
}

/* ============================================================
   CTA BANNER ANIMATED GRADIENT
   ============================================================ */
.cta-banner{
  background:linear-gradient(270deg,#B07660,#8C5A48,#C99282,#B07660);
  background-size:300% 300%;
  animation:ctaShimmer 9s ease infinite;
}

/* ============================================================
   MARQUEE PAUSE ON HOVER
   ============================================================ */
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ============================================================
   NAV LOGO SUBTLE BOB
   ============================================================ */
.nav-logo img.mark{ animation:logoBob 5s ease-in-out infinite; }

/* ============================================================
   FAQ HOVER
   ============================================================ */
.faq-q{ transition:.3s color; }
.faq-q:hover{ color:var(--red); }
.faq-item.open .faq-q{ color:var(--red); }

/* ============================================================
   FOOTER & CONTACT SOCIAL BOUNCE
   ============================================================ */
.footer .f-socials a:hover,
.contact-socials a:hover{ animation:bounceUp .5s cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   IG ITEM TRANSITION STAGGER
   ============================================================ */
.ig-item:nth-child(1){ transition-delay:.00s; }
.ig-item:nth-child(2){ transition-delay:.04s; }
.ig-item:nth-child(3){ transition-delay:.08s; }
.ig-item:nth-child(4){ transition-delay:.12s; }
.ig-item:nth-child(5){ transition-delay:.16s; }
.ig-item:nth-child(6){ transition-delay:.20s; }

/* ============================================================
   TESTIMONIAL CARD LIFT (active slide)
   ============================================================ */
.testi-card{ transition:box-shadow .5s, transform .5s; }

/* ============================================================
   PORTFOLIO ITEM STAGGER
   ============================================================ */
.port-item:nth-child(1){ --pi-d:.04s; }
.port-item:nth-child(2){ --pi-d:.08s; }
.port-item:nth-child(3){ --pi-d:.12s; }
.port-item:nth-child(4){ --pi-d:.16s; }
.port-item:nth-child(5){ --pi-d:.20s; }
.port-item:nth-child(6){ --pi-d:.24s; }
.port-item:nth-child(7){ --pi-d:.28s; }
.port-item:nth-child(8){ --pi-d:.32s; }
.port-item.reveal-scale{ transition-delay:var(--pi-d,0s); }

/* ============================================================
   HERO FLOATING ORBS
   ============================================================ */
.hero-orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(201,146,130,.22) 0%, transparent 70%);
}
.hero-orb-1{ width:480px; height:480px; top:8%; right:6%; animation:floatOrb 10s ease-in-out infinite; }
.hero-orb-2{ width:300px; height:300px; bottom:14%; left:4%; animation:floatOrb 7.5s ease-in-out infinite 2.4s; }
.hero-orb-3{ width:180px; height:180px; top:55%; right:22%; animation:floatOrb 8s ease-in-out infinite 1.1s; }
@keyframes floatOrb{
  0%,100%{ transform:translateY(0) scale(1); opacity:.6; }
  50%{ transform:translateY(-28px) scale(1.06); opacity:1; }
}

/* ============================================================
   BUTTON GLOW PULSE (primary only, idle)
   ============================================================ */
.btn-primary:not(:hover){ animation:btnGlowIdle 3.6s ease-in-out infinite; }
@keyframes btnGlowIdle{
  0%,100%{ box-shadow:0 14px 30px -14px rgba(176,118,96,.5); }
  50%{ box-shadow:0 14px 44px -8px rgba(176,118,96,.75), 0 0 0 7px rgba(176,118,96,.11); }
}

/* ============================================================
   STORY PHOTO SLOW KEN BURNS LOOP
   ============================================================ */
.story-photo img{
  transform-origin:center center;
  animation:kenBurnsLoop 18s ease-in-out infinite alternate;
}
.story-photo:hover img{ animation:none; transform:scale(1.04); }
@keyframes kenBurnsLoop{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.07) translate(-1.5%,1%); }
}

/* ============================================================
   SECTION HEADING UNDERLINE DRAW
   ============================================================ */
.h-section .underline-draw{
  display:inline-block; position:relative;
}
.h-section .underline-draw::after{
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--gold);
  transition:width .9s cubic-bezier(.2,.8,.2,1) .3s;
}
.in .h-section .underline-draw::after,
.reveal.in .h-section .underline-draw::after,
.reveal-left.in .h-section .underline-draw::after{ width:100%; }

/* ============================================================
   SERVICE CARD SPOTLIGHT (JS injects --mx --my)
   ============================================================ */
.svc-card{ --mx:50%; --my:50%; }
.svc-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx) var(--my), rgba(255,255,255,.65) 0%, transparent 100%);
  opacity:0; transition:opacity .35s;
}
.svc-card:hover::after{ opacity:1; }

/* ============================================================
   (Custom cursor removed — it hid the user's real mouse cursor,
   and if JS failed the visitor had NO cursor at all.)
   ============================================================ */

/* ============================================================
   PORTFOLIO TILT (smooth return)
   ============================================================ */
.port-item{ transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style:preserve-3d; }
.port-item:hover{ box-shadow:0 30px 70px -20px rgba(0,0,0,.55); }

/* ============================================================
   STORY TEXT ENTRANCE (stagger children)
   ============================================================ */
.story-text-inner.in .eyebrow{ animation:heroFadeUp .7s cubic-bezier(.2,.8,.2,1) .1s both; }
.story-text-inner.in h2 { animation:heroFadeUp .8s cubic-bezier(.2,.8,.2,1) .25s both; }
.story-text-inner.in .story-rule { animation:heroFadeUp .6s cubic-bezier(.2,.8,.2,1) .38s both; }
.story-text-inner.in .lead { animation:heroFadeUp .8s cubic-bezier(.2,.8,.2,1) .5s both; }
.story-text-inner.in .story-pillars{ animation:heroFadeUp .8s cubic-bezier(.2,.8,.2,1) .65s both; }
.story-text-inner.in .link-arrow { animation:heroFadeUp .7s cubic-bezier(.2,.8,.2,1) .78s both; }

/* Ensure reveal-left also triggers story stagger */
.reveal-left.in.story-text-inner .eyebrow,
.reveal-left.in.story-text-inner h2,
.reveal-left.in.story-text-inner .story-rule,
.reveal-left.in.story-text-inner .lead,
.reveal-left.in.story-text-inner .story-pillars,
.reveal-left.in.story-text-inner .link-arrow{ opacity:1; transform:none; }

/* ============================================================
   REDUCED MOTION OVERRIDE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero .eyebrow,.hero h1,.hero-sub,.hero-cta,.hero-meta{ animation:none; }
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- 1080px — tablet landscape ---------- */
@media (max-width:1080px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ gap:40px 26px; }
  .steps::before{ display:none; }
  .port-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:280px; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .story-text{ padding:clamp(50px,7vw,80px) clamp(28px,4vw,60px); }
}

/* ---------- 860px — tablet portrait ---------- */
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .burger{ display:flex; }

  .hero{ padding-top:80px; }
  .hero-content{ max-width:100%; }
  .hero-sub{ font-size:1.05rem; max-width:100%; }
  .hero-meta{ gap:28px; margin-top:2rem; }
  .hero-meta .stat b{ font-size:2rem; }

  .story-section{ grid-template-columns:1fr; min-height:auto; }
  .story-photo{ min-height:420px; }
  .story-photo img{ min-height:420px; }

  .svc-row{ grid-template-columns:80px 1fr; gap:0 24px; }
  .why-item{ padding:16px 20px; }

  .ba-wrap{ grid-template-columns:1fr; }
  .ba-copy{ max-width:600px; margin:0 auto 40px; }

  .testi-card{ padding:36px 28px; }
  .testi-text{ font-size:1.4rem; }

  .contact-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }

  .modal-head{ padding:26px 28px; }
  .modal-body{ padding:26px 28px 32px; }
}

/* ---------- 600px — mobile ---------- */
@media (max-width:600px){
  body{ font-size:16px; }

  .hero{ padding-top:72px; }
  .hero-cta{ flex-direction:column; align-items:center; gap:12px; }
  .hero-cta .btn{ min-width:220px; justify-content:center; }
  .hero-meta{ gap:20px; flex-wrap:wrap; margin-top:1.8rem; }
  .hero-meta .stat b{ font-size:1.8rem; }
  .hero-mark{ display:none; }
  .scroll-cue{ display:none; }

  .marquee-track span{ font-size:1.2rem; gap:40px; }
  .marquee-track{ gap:40px; }

  .story-pillars{ grid-template-columns:1fr; gap:1.4rem; }
  .story-text{ padding:clamp(48px,8vw,70px) clamp(20px,5vw,40px); }

  .svc-row{ grid-template-columns:60px 1fr; gap:0 16px; padding:24px 0; }
  .svc-num{ font-size:1.6rem; }
  .svc-body h3{ font-size:1.3rem; }
  .why-item{ padding:14px 16px; font-size:.82rem; gap:8px; }
  .contact-cards{ grid-template-columns:1fr; }
  .contact-map{ min-height:280px; }

  .steps{ grid-template-columns:1fr 1fr 1fr; gap:32px 16px; }
  .step-dot{ width:58px; height:58px; font-size:1.4rem; }
  .step h4{ font-size:1.15rem; }
  .step p{ font-size:.85rem; }

  .port-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
  .port-item.wide,.port-item.tall{ grid-column:auto; grid-row:auto; }
  .port-cap{ padding:16px 12px; }
  .port-cap h4{ font-size:1.05rem; }
  .port-filters{ gap:7px; margin:26px 0 34px; }
  .port-filter{ font-size:.68rem; padding:.5em .95em; }

  .ba-compare{ aspect-ratio:3/4; }

  .testi-card{ padding:26px 18px; }
  .testi-text{ font-size:1.2rem; }
  .testi-stage{ margin-top:28px; }
  .testi-nav{ margin-top:26px; }

  .ig-grid{ grid-template-columns:repeat(3,1fr); gap:6px; margin-top:28px; }

  .faq-q{ font-size:1.15rem; padding:18px 0; }
  .faq-a p{ font-size:.95rem; }

  .cta-banner .wrap{ padding:clamp(48px,10vw,80px) var(--gut); }

  .contact-form{ padding:26px 18px; }
  .field-row{ grid-template-columns:1fr; }

  .footer{ padding:56px 0 22px; }
  .footer-top{ grid-template-columns:1fr; gap:30px; padding-bottom:30px; }
  .footer .f-logo img.f-wordmark{ height:50px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }

  .modal-head{ padding:20px 18px; }
  .modal-head h3{ font-size:1.5rem; }
  .modal-body{ padding:20px 18px 26px; }
  .chip{ font-size:.8rem; padding:.6em 1em; }
  .modal-actions{ flex-direction:column; }
  .modal-actions .btn{ width:100%; justify-content:center; }
}

/* ---------- 480px — small phones ---------- */
@media (max-width:480px){
  .port-grid{ grid-template-columns:1fr; grid-auto-rows:280px; }
  .steps{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-meta .stat b{ font-size:1.55rem; }
  .testi-arrow{ width:42px; height:42px; }
  .svc-card{ padding:26px 18px; }
}

/* ============================================================
   PORTFOLIO LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9998; background:rgba(15,11,10,.9);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s ease; padding:24px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lb-stage{ margin:0; max-width:min(640px,92vw); text-align:center; transform:scale(.93) translateY(10px); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.lightbox.open .lb-stage{ transform:none; }
.lb-stage img{
  max-width:100%; max-height:66vh; object-fit:contain; border-radius:6px;
  background:#1a1210; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transition:opacity .25s ease;
}
.lb-stage img.switching{ opacity:0; }
.lb-cap{ color:#fff; margin-top:16px; }
.lb-cap .lb-tag{ font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); display:block; }
.lb-cap h4{ font-size:1.6rem; color:#fff; margin:4px 0 16px; }
.lb-close{ position:absolute; top:16px; right:20px; color:#fff; font-size:2.2rem; width:48px; height:48px; z-index:2; transition:transform .3s; }
.lb-close:hover{ transform:rotate(90deg); }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px;
  border-radius:50%; border:1px solid rgba(255,255,255,.3); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.3s; z-index:2;
}
.lb-arrow:hover{ background:var(--red); border-color:var(--red); }
.lb-arrow svg{ width:22px; height:22px; }
.lb-prev{ left:max(12px,3vw); } .lb-next{ right:max(12px,3vw); }
@media (max-width:600px){
  .lb-arrow{ width:44px; height:44px; }
  .lb-stage img{ max-height:54vh; }
  .lb-cap h4{ font-size:1.25rem; }
}

/* ============================================================
   PORTFOLIO FILTER FADE
   ============================================================ */
.port-item{ transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, opacity .28s ease; }
.port-item.port-fade{ opacity:0 !important; transform:scale(.94) !important; pointer-events:none; }

/* ============================================================
   HERO TITLE GOLD SHIMMER (runs twice after load)
   ============================================================ */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .italic{
    background:linear-gradient(105deg, var(--gold-light) 38%, #ffe9dd 50%, var(--gold-light) 62%);
    background-size:230% 100%; background-position:120% 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:heroShimmerSweep 2.4s ease 1.5s 2 both;
  }
}
@keyframes heroShimmerSweep{ from{ background-position:120% 0; } to{ background-position:-110% 0; } }

/* ============================================================
   WHATSAPP FLOAT ENTRANCE + GREETING BUBBLE (pure CSS — JS-proof)
   ============================================================ */
.wa-float{ animation:waPop .55s cubic-bezier(.34,1.56,.64,1) 2.2s both; }
@keyframes waPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
.wa-bubble{
  position:fixed; right:102px; bottom:38px; z-index:80;
  background:#fff; color:var(--ink); font-family:var(--sans); font-size:.86rem;
  padding:.75em 1.15em; border-radius:14px 14px 3px 14px; box-shadow:var(--shadow-md);
  pointer-events:none; opacity:0; transform:translateY(8px);
  animation:waBubble 8s ease 3.4s 1 both;
}
@keyframes waBubble{
  0%{ opacity:0; transform:translateY(8px); }
  6%{ opacity:1; transform:none; }
  82%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(6px); }
}
@media (max-width:600px){ .wa-bubble{ right:94px; bottom:34px; font-size:.78rem; } }

/* ============================================================
   GOOGLE MAP EMBED
   ============================================================ */
.map-outer{ margin-top:clamp(44px,6vw,72px); }
.map-wrap{ position:relative; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.map-embed{ width:100%; height:380px; border:0; display:block; }
.map-cta{ position:absolute; bottom:18px; right:18px; box-shadow:0 14px 30px -10px rgba(0,0,0,.35); }
@media (max-width:600px){ .map-embed{ height:280px; } .map-cta{ bottom:12px; right:12px; } }

/* ============================================================
   CURSOR FOLLOWER RING (decorative — native cursor stays visible)
   ============================================================ */
@media (pointer:fine){
  .cursor-ring{
    position:fixed; left:-100px; top:-100px; width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(176,118,96,.55); pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%); will-change:left,top;
    transition:width .3s, height .3s, border-color .3s, opacity .3s;
  }
  .cursor-ring.hovering{ width:56px; height:56px; border-color:var(--red); }
}