/* =========================================================
   KAPRIS HALI & KOLTUK YIKAMA — stylesheet
   ========================================================= */

:root{
  --bordo-900:#3a0710;
  --bordo-800:#4d0a17;
  --bordo-700:#651024;
  --bordo-600:#7d1530;
  --bordo-500:#9a1c3a;
  --bordo-glow:#c22a49;

  --silver-100:#f6f4f1;
  --silver-200:#eae7e2;
  --silver-300:#d9d5cd;
  --silver-400:#c2bcb2;
  --silver-500:#a29a8d;
  --silver-700:#736b60;

  /* Metallic gray — echoes the chrome/silver in the Kapris emblem */
  --metal-1:#eef0f1;
  --metal-2:#d9dbde;
  --metal-3:#c1c4c9;
  --metal-4:#a6a9b0;
  --metal-5:#8b8e95;

  --ink:#231a19;
  --ink-soft:#4a4340;
  --cream:#fbf9f5;
  --white:#ffffff;

  --font-display:'Zodiak', 'Times New Roman', serif;
  --font-body:'General Sans', 'Segoe UI', sans-serif;

  --curtain-sweep:3.2s;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --container:1220px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:96px; font-size:17.5px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:var(--metal-2);
}

/* Brushed-metal surface — echoes the chrome/silver in the Kapris emblem.
   Applied per-section (not as a fixed body background) since
   background-attachment:fixed is unreliable in headless/iOS Safari. */
.metal-surface{
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(255,255,255,.55), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.025) 2px 4px),
    linear-gradient(160deg, var(--metal-1) 0%, var(--metal-2) 32%, var(--metal-3) 62%, var(--metal-4) 85%, var(--metal-5) 100%);
}
body.lock-scroll{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; color:var(--bordo-900); line-height:1.12; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; border-radius:100px;
  font-family:var(--font-body); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
  white-space:nowrap;
}
.btn-sm{ padding:11px 20px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn-primary{
  background:linear-gradient(135deg, var(--bordo-600), var(--bordo-800));
  color:var(--silver-100);
  box-shadow:0 10px 24px -10px rgba(77,10,23,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(77,10,23,.65); }
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.18); transform:translateY(-3px); }
.btn-outline{
  background:transparent; color:var(--bordo-700); border-color:var(--bordo-700);
}
.btn-outline:hover{ background:var(--bordo-700); color:var(--silver-100); transform:translateY(-3px); }

/* ---------------------------------------------------------
   Reveal-on-scroll base
--------------------------------------------------------- */
.reveal-up, .reveal-left, .reveal-right{
  opacity:0; will-change:transform,opacity;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up{ transform:translateY(34px); }
.reveal-left{ transform:translateX(-46px); }
.reveal-right{ transform:translateX(46px); }
.reveal-up.in-view, .reveal-left.in-view, .reveal-right.in-view{ opacity:1; transform:translate(0,0); }

/* ---------------------------------------------------------
   Curtain overlay
--------------------------------------------------------- */
.curtain-stage{
  position:fixed; inset:0; z-index:900;
  overflow:hidden;
  background:transparent;
  pointer-events:none;
}
.curtain-rod{
  position:absolute; top:0; left:0; right:0; height:22px; z-index:30;
  background:linear-gradient(180deg,#3a3a3a,#171717 45%,#0a0a0a);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
.curtain-panel{
  position:absolute; top:0; bottom:0; width:52%; height:100%;
  background-color:var(--bordo-800);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.10), transparent 55%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) 10px,
      rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px,
      var(--bordo-700) 20px, var(--bordo-700) 42px,
      var(--bordo-800) 42px, var(--bordo-800) 64px);
  box-shadow: inset 0 0 120px rgba(0,0,0,.55);
  /* Promote to its own GPU layer so the sweep composites instead of
     repainting each frame — the main cause of the earlier FPS drop. */
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* Gentle idle billow while the curtain is still closed and the emblem shows,
   so it reads as hanging fabric rather than a flat panel. */
.curtain-left{ left:0; transform-origin:top left; animation:curtainSwayLeft 5s ease-in-out infinite alternate; }
.curtain-right{ right:0; transform-origin:top right; animation:curtainSwayRight 5s ease-in-out infinite alternate; }
@keyframes curtainSwayLeft{
  from{ transform:translateZ(0) skewY(0deg) scaleX(1); }
  to{ transform:translateZ(0) skewY(.28deg) scaleX(1.004); }
}
@keyframes curtainSwayRight{
  from{ transform:translateZ(0) skewY(0deg) scaleX(1); }
  to{ transform:translateZ(0) skewY(-.28deg) scaleX(1.004); }
}
.curtain-pleats{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.16) 0 5px,
    rgba(255,255,255,.06) 5px 9px,
    rgba(0,0,0,.09) 9px 26px,
    transparent 26px 42px);
}
.curtain-fringe{
  position:absolute; left:0; right:0; bottom:0; height:26px;
  background:
    repeating-linear-gradient(90deg, var(--silver-400) 0 3px, transparent 3px 14px);
  opacity:.85;
}
.curtain-fringe::before{
  content:''; position:absolute; left:0; right:0; top:-6px; height:6px;
  background:linear-gradient(180deg, var(--silver-300), var(--silver-500));
}
.curtain-shadow{
  position:absolute; top:0; bottom:0; width:70px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent);
}
.curtain-left .curtain-shadow{ right:0; }
.curtain-right .curtain-shadow{ left:0; transform:scaleX(-1); }

.curtain-glow{
  position:absolute; top:38%; left:50%; width:520px; height:520px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(226,196,196,.25), transparent 70%);
  z-index:5; opacity:0; transition:opacity 1.6s var(--ease) .3s;
}
.curtain-emblem{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) scale(.82);
  z-index:10; opacity:0;
  transition:opacity 1.5s var(--ease) .25s, transform 1.6s var(--ease) .25s;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
.curtain-emblem img{ width:180px; height:auto; }

.curtain-stage.ready .curtain-emblem{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.curtain-stage.ready .curtain-glow{ opacity:1; }

.curtain-stage.opening .curtain-emblem{ opacity:0; transform:translate(-50%,-50%) scale(1.15); transition:opacity .5s ease, transform .6s ease; }
.curtain-stage.opening .curtain-glow{ opacity:0; transition:opacity .5s ease; }
/* Fabric sweep: brief inward "gather" (someone grasping the drape), then a
   weighted pull-away where the hem trails via increasing skew. No filter or
   blend-mode animation, so it stays composited and smooth. */
.curtain-stage.opening .curtain-left{ animation:curtainOpenLeft var(--curtain-sweep) cubic-bezier(.62,0,.2,1) forwards; }
.curtain-stage.opening .curtain-right{ animation:curtainOpenRight var(--curtain-sweep) cubic-bezier(.62,0,.2,1) forwards; }
@keyframes curtainOpenLeft{
  0%{ transform:translateZ(0) translateX(0) skewY(.2deg) scaleX(1) rotate(0deg); }
  14%{ transform:translateZ(0) translateX(1.6%) skewY(.7deg) scaleX(1.012) rotate(.5deg); }
  100%{ transform:translateZ(0) translateX(-106%) skewY(-1.8deg) scaleX(.965) rotate(-2.6deg); }
}
@keyframes curtainOpenRight{
  0%{ transform:translateZ(0) translateX(0) skewY(-.2deg) scaleX(1) rotate(0deg); }
  14%{ transform:translateZ(0) translateX(-1.6%) skewY(-.7deg) scaleX(1.012) rotate(-.5deg); }
  100%{ transform:translateZ(0) translateX(106%) skewY(1.8deg) scaleX(.965) rotate(2.6deg); }
}

/* The overlay fades away on the SAME animation clock as the sweep — delayed by
   exactly the sweep duration — so it can never disappear before the panels
   finish opening, even if the tab is throttled or the device is slow. */
.curtain-stage.opening{ animation:curtainStageOut .55s ease var(--curtain-sweep) forwards; }
@keyframes curtainStageOut{
  from{ opacity:1; }
  to{ opacity:0; visibility:hidden; }
}

.curtain-stage.done{ pointer-events:none; visibility:hidden; }

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  opacity:0; transform:translateY(-12px);
  transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s, background .4s var(--ease-soft), box-shadow .4s var(--ease-soft), padding .35s var(--ease-soft);
}
.site-header.shown{ opacity:1; transform:translateY(0); }
.site-header.solid{
  background:rgba(238,240,241,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -14px rgba(58,7,16,.25);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-mark{ flex:none; }
.brand-word{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--white); transition:color .4s var(--ease-soft); line-height:1; }
.site-header.solid .brand-word{ color:var(--bordo-900); }

.main-nav ul{ display:flex; align-items:center; gap:34px; }
.nav-link{
  font-weight:600; font-size:.92rem; color:var(--white);
  position:relative; padding:6px 0; transition:color .35s var(--ease-soft);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--bordo-glow); transition:width .35s var(--ease);
}
.nav-link:hover::after, .has-dropdown:hover .nav-link::after{ width:100%; }
.site-header.solid .nav-link{ color:var(--ink); }
.site-header.solid .nav-link::after{ background:var(--bordo-700); }

.has-dropdown{ position:relative; }
.dropdown li a{
  display:block; padding:11px 16px; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--ink-soft);
  transition:background .25s, color .25s, padding-left .25s;
}
.dropdown li a:hover{ background:var(--cream); color:var(--bordo-700); padding-left:20px; }

/* Hover-driven dropdown is a desktop-only interaction; on touch devices a
   sticky :hover state combined with this rule's specificity would otherwise
   fight the mobile accordion override below. */
@media (min-width:921px){
  .main-nav .dropdown{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
    background:var(--white); border-radius:16px; padding:12px;
    display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
    width:420px; box-shadow:0 24px 50px -20px rgba(58,7,16,.35);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility .3s;
  }
  .main-nav .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
}

.header-actions{ display:flex; align-items:center; gap:20px; flex:none; }
.header-phone{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--white);
  transition:color .35s var(--ease-soft);
}
.site-header.solid .header-phone{ color:var(--bordo-800); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; padding:0;
}
.nav-toggle span{ display:block; height:2px; background:var(--white); border-radius:2px; transition:transform .35s var(--ease), opacity .35s, background .35s; }
.site-header.solid .nav-toggle span{ background:var(--bordo-800); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden;
  padding:140px 24px 90px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; transform:scale(1.08); animation:heroDrift 24s ease-in-out infinite alternate; }
@keyframes heroDrift{ from{ transform:scale(1.08) translateY(0); } to{ transform:scale(1.14) translateY(-2%); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(31,5,11,.72) 0%, rgba(38,7,14,.62) 40%, rgba(20,4,8,.86) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(90,15,30,.35), transparent 60%);
}
.hero-content{ position:relative; z-index:2; max-width:800px; }
.eyebrow{
  display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bordo-600); margin-bottom:18px; position:relative; padding-bottom:12px;
}
.eyebrow::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:46px; height:2px; background:var(--bordo-glow); }
.section-head.center .eyebrow::after, .about-copy .eyebrow::after{ left:0; transform:none; }
.section-head.center{ text-align:center; }
.section-head.center .eyebrow{ display:block; }
.hero .eyebrow{ color:var(--silver-200); }

.hero-title{ color:var(--white); font-size:clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing:-.01em; margin-bottom:22px; }
.hero-title .script{ font-style:italic; font-weight:400; color:var(--silver-200); position:relative; }
.hero-sub{ color:rgba(255,255,255,.86); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.65; max-width:600px; margin:0 auto 38px; }
.hero-cta{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

.hero-services{
  position:relative; z-index:2; margin-top:56px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:760px;
}
.hero-services span{
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--silver-100);
  padding:9px 16px; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--silver-200); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------------------------------------------------------
   Section shells
--------------------------------------------------------- */
section{ padding:120px 0; position:relative; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-top:8px; }
.section-head.light h2{ color:var(--silver-100); }
.section-head.light .eyebrow{ color:var(--silver-400); }

/* ---------------------------------------------------------
   About
--------------------------------------------------------- */
.about{ padding-top:110px; }
.about-grid{ display:grid; grid-template-columns:.85fr 1fr; gap:80px; align-items:center; }
.about-media{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5; }
.about-media img{ width:100%; height:100%; object-fit:cover; border-radius:4px; box-shadow:0 40px 70px -30px rgba(58,7,16,.35); }
.frame-corner{ position:absolute; width:64px; height:64px; z-index:2; pointer-events:none; }
.frame-corner.tl{ top:-16px; left:-16px; border-top:3px solid var(--bordo-600); border-left:3px solid var(--bordo-600); }
.frame-corner.br{ bottom:-16px; right:-16px; border-bottom:3px solid var(--silver-700); border-right:3px solid var(--silver-700); }

.about-copy .eyebrow{ display:block; }
.about-copy h2{ margin-bottom:22px; }
.about-copy p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.75; margin-bottom:16px; }

/* ---------------------------------------------------------
   Process — compact grid
--------------------------------------------------------- */
.process{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, var(--bordo-900), var(--bordo-800) 55%, var(--bordo-900));
  color:var(--silver-100);
}
.process-grid{
  margin-top:52px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.process-card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:22px 18px; transition:transform .45s var(--ease), background .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.process-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.p-num{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--silver-300); margin-bottom:10px; }
.process-card h4{ color:var(--silver-100); font-size:.98rem; margin-bottom:6px; font-weight:600; }
.process-card p{ color:rgba(246,244,241,.62); font-size:.8rem; line-height:1.5; }

/* ---------------------------------------------------------
   Detail zigzag
--------------------------------------------------------- */
.detail-row{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
  margin-top:80px;
}
.detail-row:first-of-type{ margin-top:60px; }
.detail-row.reverse .detail-media{ order:2; }
.detail-media{ position:relative; border-radius:10px; overflow:hidden; box-shadow:0 40px 70px -30px rgba(58,7,16,.3); aspect-ratio:5/4; }
.detail-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.detail-media:hover img{ transform:scale(1.06); }
.detail-index{ font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:var(--metal-4); line-height:1; display:block; margin-bottom:8px; }
.detail-copy h3{ font-size:1.7rem; margin-bottom:16px; }
.detail-copy p{ color:var(--ink-soft); font-size:1rem; line-height:1.75; max-width:440px; }

/* ---------------------------------------------------------
   Services
--------------------------------------------------------- */
.service-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.service-card{
  position:relative; border-radius:20px; padding:30px;
  background:linear-gradient(165deg, var(--white), var(--silver-100));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 20px 40px -26px rgba(30,20,20,.35);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -24px rgba(58,7,16,.4); }
.service-icon{
  width:60px; height:60px; border-radius:16px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bordo-700), var(--bordo-900)); color:var(--silver-200);
  transition:transform .5s var(--ease);
}
.service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.08); }
.service-text h3{ font-size:1.05rem; margin-bottom:8px; color:var(--bordo-900); }
.service-text p{ font-size:.85rem; line-height:1.55; color:var(--ink-soft); }

/* ---------------------------------------------------------
   Guarantee banner
--------------------------------------------------------- */
.guarantee{
  text-align:center; padding:110px 24px;
  background:radial-gradient(120% 140% at 50% 0%, var(--bordo-600), var(--bordo-900) 65%);
  color:var(--silver-100); overflow:hidden; position:relative;
}
.guarantee-drop{
  width:76px; height:76px; margin:0 auto 26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:var(--silver-100);
  animation:dropPulse 2.8s ease-in-out infinite;
}
@keyframes dropPulse{
  0%,100%{ transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.25); }
  50%{ transform:translateY(-6px) scale(1.05); box-shadow:0 0 0 16px rgba(255,255,255,0); }
}
.guarantee h2{ color:var(--white); font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:16px; }
.guarantee p{ max-width:520px; margin:0 auto; color:rgba(246,244,241,.82); line-height:1.7; }

/* ---------------------------------------------------------
   Contact
--------------------------------------------------------- */
.contact-info.centered{ max-width:720px; margin:0 auto; text-align:center; }
.contact-info.centered .eyebrow{ display:block; }
.contact-info.centered .eyebrow::after{ left:50%; transform:translateX(-50%); }
.contact-info h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:16px; }
.contact-info > p{ color:var(--ink-soft); line-height:1.7; margin:0 auto 30px; max-width:440px; }
.contact-list{ display:flex; flex-direction:column; align-items:center; gap:16px; margin:0 auto 34px; }
.contact-list li{ display:flex; align-items:center; gap:14px; font-weight:600; font-size:.95rem; color:var(--ink); }
.contact-ico{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--bordo-700); box-shadow:0 6px 16px -8px rgba(58,7,16,.3);
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{ background:var(--bordo-900); color:var(--silver-300); padding-top:90px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ margin-bottom:16px; }
.footer-word{ font-family:var(--font-display); font-size:1.3rem; color:var(--white); margin-bottom:6px; }
.footer-word em{ display:block; font-style:normal; font-size:.52em; letter-spacing:.14em; text-transform:uppercase; color:var(--silver-500); margin-top:4px; }
.footer-tagline{ font-size:.88rem; color:var(--silver-500); }
.footer-col h4{ color:var(--white); font-size:.98rem; margin-bottom:20px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:.88rem; color:var(--silver-400); transition:color .3s, padding-left .3s; }
.footer-col a:hover{ color:var(--white); padding-left:4px; }
.footer-contact li{ font-size:.88rem; color:var(--silver-400); }
.footer-bottom{ padding:26px 0; }
.footer-bottom-inner{ text-align:center; font-size:.8rem; color:var(--silver-500); }

/* ---------------------------------------------------------
   Floating WhatsApp
--------------------------------------------------------- */
.float-whatsapp{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#2fbf5f,#1f9e4a);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -12px rgba(31,158,74,.6);
  opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.float-whatsapp.shown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.float-whatsapp:hover{ transform:translateY(-4px) scale(1.06); }
.pulse{
  position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(47,191,95,.55);
  animation:ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse{
  0%{ transform:scale(.9); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:1080px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:920px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,84vw);
    background:var(--white); padding:110px 30px 40px; z-index:180;
    transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:-30px 0 60px rgba(0,0,0,.2); overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:6px; }
  .main-nav .nav-link{ color:var(--bordo-900); display:block; padding:12px 0; width:100%; }
  .has-dropdown{ width:100%; }
  .main-nav .dropdown{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; padding:0 0 0 14px; margin-top:4px; display:none; flex-direction:column; min-width:0; width:auto; }
  .main-nav .has-dropdown.open .dropdown{ display:flex; }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; flex:none; }
  .header-actions{ gap:12px; }
  .brand-mark{ width:64px !important; height:64px !important; }
  .brand-word{ font-size:1.2rem; }
  .curtain-panel{ width:52%; }

  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .detail-row{ grid-template-columns:1fr; gap:30px; }
  .detail-row.reverse .detail-media{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .header-inner{ padding:10px 16px; }
  .btn-sm{ padding:10px 16px; font-size:.76rem; }
  .brand-mark{ width:52px !important; height:52px !important; }
  .brand-word{ font-size:1.05rem; }
}

@media (max-width:680px){
  section{ padding:80px 0; }
  .service-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:120px; }
  .header-inner{ padding:14px 20px; }
  .process-grid{ grid-template-columns:1fr 1fr; }
}