/* ================================================================
   ClearUpToning — futuristic tech × earth-tone premium
   ================================================================ */

:root{
  /* earth-tone palette (premium cleaning sector) */
  --cream:    #f3ece1;
  --cream-2:  #ece3d2;
  --sand:     #d9ccb1;
  --bone:     #f8f3e8;
  --ink:      #171512;
  --ink-2:    #2a251d;
  --ink-soft: #3b3528;
  --olive:    #3a4a2a;
  --olive-dp: #1f2a15;
  --olive-lt: #6b7a4f;
  --ember:    #a8471f;   /* sparing accent */
  --line:     rgba(23,21,18,.14);
  --line-2:   rgba(23,21,18,.08);
  --glow:     rgba(107,122,79,.35);

  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Inter", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --r-lg: 14px;
  --r-md: 8px;

  --nav-h: 72px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--cream); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(107,122,79,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(168,71,31,.05), transparent 60%),
    var(--cream);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
::selection{background:var(--olive); color:var(--cream);}

.mono{font-family:var(--mono); font-weight:400; letter-spacing:.08em; text-transform:uppercase; font-size:11px;}

/* ========== CURSOR ========== */
.cursor{position:fixed; inset:0; pointer-events:none; z-index:100;}
.cursor-dot{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); transition:transform .15s ease;}
.cursor-ring{position:absolute; width:36px; height:36px; border:1px solid var(--ink); border-radius:50%; transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.2,.9,.3,1), width .3s, height .3s, border-color .3s;}
.cursor.hover .cursor-ring{width:56px; height:56px; border-color:var(--olive);}
.cursor.hidden .cursor-dot, .cursor.hidden .cursor-ring{opacity:0;}
@media (hover:none){ .cursor{display:none;} }

/* ========== PRELOADER ========== */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink); color:var(--cream);
  display:grid; place-items:center;
  transition:opacity .8s ease, visibility .8s;
}
.preloader.done{opacity:0; visibility:hidden;}
.pre-mark{display:flex; flex-direction:column; align-items:center; gap:28px;}
.pre-logo{width:96px; height:96px;}
.pre-arc{stroke-dasharray:326; stroke-dashoffset:326; animation:preArc 2.6s ease-in-out infinite;}
@keyframes preArc{0%{stroke-dashoffset:326;} 50%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-326;}}
.pre-text{display:flex; gap:20px; align-items:baseline;}
.pre-count{color:var(--olive-lt);}

/* ========== SCROLL PROGRESS ========== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--olive), var(--olive-lt), var(--ember));
  z-index:90; transition:width .08s linear;
}

/* ========== NAV ========== */
.nav{
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px; z-index:80;
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(243,236,225,.78);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line-2);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:34px; height:34px; color:var(--ink); animation:spin 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.brand-wm{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:var(--serif); font-size:18px; letter-spacing:-.01em; font-weight:500;}
.brand-sub{font-size:9px; color:var(--ink-soft); margin-top:4px;}
.nav-links{display:flex; gap:28px;}
.nav-links a{font-size:13px; color:var(--ink-soft); position:relative; padding:4px 0;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--ink); transition:width .35s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:16px;}

/* Lang toggle */
.lang-toggle{
  position:relative;
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:100px;
  padding:3px; font-family:var(--mono); font-size:11px; font-weight:500;
}
.lang-pill{
  position:absolute; top:3px; left:3px; bottom:3px; width:calc(50% - 3px);
  background:var(--ink); border-radius:100px;
  transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.lang-opt{position:relative; z-index:1; padding:5px 12px; transition:color .3s;}
.lang-opt[data-lang="en"]{color:var(--cream);}
.lang-opt[data-lang="es"]{color:var(--ink-soft);}
.lang-toggle.es .lang-pill{transform:translateX(calc(100% + 0px));}
.lang-toggle.es .lang-opt[data-lang="en"]{color:var(--ink-soft);}
.lang-toggle.es .lang-opt[data-lang="es"]{color:var(--cream);}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:100px;
  font-size:13px; font-weight:500; letter-spacing:-.005em;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), background .3s, color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn-primary{background:var(--ink); color:var(--cream); box-shadow:0 1px 0 var(--ink-2) inset;}
.btn-primary:hover{background:var(--olive); box-shadow:0 10px 30px -10px var(--glow);}
.btn-ghost{border:1px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); background:transparent;}
.btn-lg{padding:14px 22px; font-size:14px;}
.btn-xl{padding:20px 32px; font-size:15px;}

/* ========== HERO ========== */
.hero{
  position:relative;
  min-height:100vh;
  padding:calc(var(--nav-h) + 80px) 36px 100px;
  overflow:hidden;
  isolation:isolate;
}
.hero-inner{position:relative; max-width:1400px; margin:0 auto; z-index:3;}

/* 3D grid floor */
.hero-grid{
  position:absolute; inset:0; z-index:1;
  perspective:1200px; perspective-origin:50% 30%;
  pointer-events:none;
}
.grid-floor{
  position:absolute; left:50%; bottom:-30%;
  width:260%; height:90vh; transform:translateX(-50%) rotateX(68deg);
  background:
    linear-gradient(to right, transparent 49.9%, rgba(23,21,18,.18) 50%, transparent 50.1%) 0 0/60px 100%,
    linear-gradient(to bottom, transparent 49.9%, rgba(23,21,18,.18) 50%, transparent 50.1%) 0 0/100% 60px;
  mask-image:radial-gradient(ellipse 70% 90% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 30%, #000 30%, transparent 75%);
  animation:gridFloor 18s linear infinite;
}
@keyframes gridFloor{
  0%{background-position:0 0, 0 0;}
  100%{background-position:0 0, 0 60px;}
}
.grid-horizon{
  position:absolute; left:0; right:0; top:52%;
  height:1px; background:linear-gradient(90deg, transparent, var(--olive), transparent);
  filter:blur(.4px);
  box-shadow:0 0 40px rgba(107,122,79,.35);
}
.grid-sun{
  position:absolute; left:50%; top:52%;
  width:400px; height:400px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,204,177,.7), rgba(217,204,177,.15) 40%, transparent 70%);
  filter:blur(2px);
  animation:sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse{50%{transform:translate(-50%,-50%) scale(1.06); opacity:.85;}}

.orb{position:absolute; border-radius:50%; filter:blur(60px); z-index:1; pointer-events:none;}
.orb-1{top:8%; right:8%; width:320px; height:320px; background:radial-gradient(circle, rgba(107,122,79,.55), transparent 60%);}
.orb-2{bottom:-10%; left:-5%; width:400px; height:400px; background:radial-gradient(circle, rgba(168,71,31,.25), transparent 60%);}

.hero-media{position:absolute; inset:0; z-index:2; pointer-events:none;}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.8) contrast(1.02) brightness(.72);
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(248,243,232,.18) 0%, rgba(248,243,232,.1) 18%, rgba(23,21,18,.42) 100%),
    linear-gradient(90deg, rgba(248,243,232,.78) 0%, rgba(248,243,232,.58) 36%, rgba(248,243,232,.2) 62%, rgba(23,21,18,.18) 100%);
}

/* meta */
.hero-meta{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid var(--line); border-radius:100px;
  background:rgba(248,243,232,.5); backdrop-filter:blur(8px);
  color:var(--ink-soft);
}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 4px rgba(107,122,79,.2); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(107,122,79,0);}}

.hero-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px, 9vw, 148px);
  line-height:1.03;
  letter-spacing:-.035em;
  margin:28px 0 32px;
  max-width:12ch;
}
.hero-title em{font-style:italic; color:var(--olive); font-weight:400;}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.16em;}
.hero-title .word{display:inline-block; padding-bottom:.04em; transform:translateY(110%); opacity:0; will-change:transform;}
.hero-title .word.in{animation:wordIn 1.1s cubic-bezier(.2,.9,.2,1) forwards;}
@keyframes wordIn{to{transform:translateY(0); opacity:1;}}

.hero-sub{
  max-width:54ch; font-size:18px; line-height:1.55;
  color:var(--ink-soft); margin-bottom:36px;
  text-wrap:pretty;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:72px;}

.hero-strip{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px;
  border-top:1px solid var(--line);
  padding-top:24px;
  max-width:900px;
}
.strip-item{display:flex; flex-direction:column; gap:4px; padding-right:20px;}
.strip-item strong{font-family:var(--serif); font-size:32px; font-weight:500; letter-spacing:-.02em;}
.strip-item span{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}

.scroll-hint{
  position:absolute; left:36px; bottom:28px; z-index:3;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  color:var(--ink-soft);
}
.scroll-line{width:1px; height:48px; background:linear-gradient(to bottom, var(--ink), transparent); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;}}

/* ========== MARQUEE ========== */
.marquee-band{
  position:relative; z-index:2;
  background:var(--ink); color:var(--cream);
  border-top:1px solid var(--olive-dp); border-bottom:1px solid var(--olive-dp);
  padding:22px 0;
  overflow:hidden;
}
.marquee{display:flex;}
.marquee-track{
  display:inline-flex; gap:48px; align-items:center;
  white-space:nowrap;
  animation:mar 40s linear infinite;
  font-family:var(--serif); font-size:28px; font-weight:300; font-style:italic;
}
.marquee-track span:nth-child(even){color:var(--olive-lt); font-size:16px; font-style:normal;}
@keyframes mar{to{transform:translateX(-50%);}}

/* ========== SECTION HEAD ========== */
.sec-head{max-width:1400px; margin:0 auto; padding:0 36px;}
.sec-eyebrow{color:var(--ink-soft); display:inline-block; padding-bottom:18px; border-bottom:1px solid var(--line); width:100%; max-width:380px; margin-bottom:36px;}
.sec-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px, 6vw, 88px); line-height:1.02; letter-spacing:-.03em;
  max-width:16ch;
}
.sec-title em{font-style:italic; color:var(--olive); display:block;}

/* ========== MANIFESTO ========== */
.manifesto{
  padding:140px 36px 140px;
  max-width:1400px; margin:0 auto;
}
.manifesto-text{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 3.8vw, 54px);
  line-height:1.18; letter-spacing:-.02em;
  max-width:22ch;
  margin:24px 0 40px;
  text-wrap:balance;
}
.manifesto-sig{color:var(--ink-soft);}

/* split text reveal */
[data-split] .split-w{display:inline-block; opacity:.15; transition:opacity .6s ease, color .6s ease;}
[data-split] .split-w.lit{opacity:1;}

/* ========== SERVICES ========== */
.services{padding:120px 36px; max-width:1400px; margin:0 auto;}
.services .sec-head{padding:0; margin-bottom:80px;}
.svc-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.svc{
  position:relative;
  background:var(--cream);
  padding:48px 40px 40px;
  transition:background .6s ease;
  overflow:hidden;
  min-height:480px;
  display:flex; flex-direction:column;
}
.svc:hover{background:var(--ink); color:var(--cream);}
.svc:hover .svc-num{color:var(--olive-lt);}
.svc:hover .svc-list li{border-color:rgba(243,236,225,.15);}
.svc:hover .svc-img{transform:translateY(0) scale(1); opacity:.35;}
.svc-num{font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.1em; transition:color .4s;}
.svc h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 3vw, 42px); line-height:1.05; letter-spacing:-.02em;
  margin:24px 0 18px;
  max-width:14ch;
}
.svc p{font-size:15px; line-height:1.55; color:inherit; opacity:.85; max-width:50ch; margin-bottom:28px;}
.svc-list{list-style:none; margin-top:auto; position:relative; z-index:2;}
.svc-list li{
  padding:12px 0; border-top:1px solid var(--line);
  font-size:13px; font-family:var(--mono); letter-spacing:.02em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  transition:border-color .4s;
}
.svc-list li::before{content:"→"; font-family:var(--mono); color:var(--olive-lt);}
.svc-img{
  position:absolute; right:-40px; bottom:-40px; width:320px; height:320px;
  background-size:cover; background-position:center;
  border-radius:50%;
  transform:translateY(40px) scale(.8);
  opacity:0;
  transition:transform .8s cubic-bezier(.2,.9,.3,1), opacity .8s;
  filter:grayscale(.5) sepia(.2);
  z-index:1;
  pointer-events:none;
}

/* ========== PROCESS ========== */
.process{
  padding:140px 36px 160px;
  max-width:1400px; margin:0 auto;
  position:relative;
}
.process-head{padding:0; margin-bottom:100px;}
.roadmap{
  position:relative;
  display:flex; flex-direction:column; gap:80px;
  padding-left:80px;
}
.rail{
  position:absolute; left:32px; top:0; bottom:0; width:1px;
  background:var(--line);
}
.rail-fill{
  position:absolute; inset:0 0 auto 0; width:1px; height:0%;
  background:linear-gradient(to bottom, var(--olive), var(--olive-lt));
  box-shadow:0 0 18px var(--glow);
}
.step{
  position:relative;
  display:grid; grid-template-columns:180px 1fr 80px;
  gap:40px; align-items:start;
  opacity:.3; transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.step.in{opacity:1; transform:translateY(0);}
.step::before{
  content:""; position:absolute; left:-58px; top:10px;
  width:14px; height:14px; border-radius:50%;
  background:var(--cream); border:1px solid var(--ink);
  transition:background .4s, transform .4s;
}
.step.in::before{background:var(--olive); border-color:var(--olive); transform:scale(1.2); box-shadow:0 0 0 6px rgba(107,122,79,.2);}
.step-index{color:var(--ink-soft); padding-top:10px;}
.step-body h3{font-family:var(--serif); font-weight:400; font-size:clamp(28px, 3vw, 42px); line-height:1.05; letter-spacing:-.02em; margin-bottom:14px;}
.step-body p{font-size:16px; line-height:1.55; color:var(--ink-soft); max-width:56ch;}
.step-tag{
  font-family:var(--serif); font-style:italic;
  font-size:80px; font-weight:300; color:var(--sand);
  line-height:1; text-align:right;
  transition:color .4s;
}
.step.in .step-tag{color:var(--olive);}

/* ========== CASES ========== */
.cases{padding:140px 36px; max-width:1400px; margin:0 auto;}
.cases .sec-head{padding:0; margin-bottom:80px;}
.case-reel{display:flex; flex-direction:column; gap:100px;}
.case{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px; align-items:center;
}
.case.reverse{direction:rtl;}
.case.reverse > *{direction:ltr;}
.case-photo{
  aspect-ratio:5/6;
  background-size:cover; background-position:center;
  border-radius:var(--r-lg);
  filter:grayscale(.35) contrast(1.05);
  box-shadow:0 30px 60px -30px rgba(23,21,18,.35);
  transform:scale(.95); opacity:.6;
  transition:transform 1.1s cubic-bezier(.2,.9,.3,1), opacity 1.1s, filter .8s;
}
.case.in .case-photo{transform:scale(1); opacity:1;}
.case:hover .case-photo{filter:grayscale(0) contrast(1.1);}
.case-meta{color:var(--olive); margin-bottom:20px;}
.case h3{font-family:var(--serif); font-weight:400; font-size:clamp(28px, 3.4vw, 48px); line-height:1.05; letter-spacing:-.025em; margin-bottom:18px; max-width:18ch;}
.case p{font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:52ch; margin-bottom:32px;}
.case-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; border-top:1px solid var(--line); padding-top:24px;}
.case-kpis strong{display:block; font-family:var(--serif); font-size:28px; font-weight:500; letter-spacing:-.02em; margin-bottom:4px;}
.case-kpis span{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}

.quotes{
  margin-top:140px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.quote{background:var(--cream); padding:40px 32px 36px; display:flex; flex-direction:column; gap:28px;}
.quote blockquote{font-family:var(--serif); font-weight:400; font-style:italic; font-size:22px; line-height:1.35; letter-spacing:-.01em; text-wrap:pretty;}
.quote figcaption{display:flex; flex-direction:column; gap:2px; margin-top:auto;}
.quote figcaption strong{font-weight:500; font-size:14px;}
.quote figcaption span{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}

/* ========== CTA-BIG ========== */
.cta-big{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--cream);
  padding:160px 36px;
  text-align:center;
  isolation:isolate;
}
.cta-grid{
  position:absolute; inset:0; z-index:0; opacity:.4;
  background:
    linear-gradient(to right, rgba(243,236,225,.06) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(to bottom, rgba(243,236,225,.06) 1px, transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 80%);
}
.cta-inner{position:relative; z-index:1; max-width:1200px; margin:0 auto;}
.cta-inner .sec-eyebrow{color:var(--olive-lt); border-color:rgba(243,236,225,.12); margin:0 auto 40px;}
.cta-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(48px, 7.5vw, 120px);
  line-height:.98; letter-spacing:-.035em;
  margin-bottom:56px;
  text-wrap:balance;
}
.cta-title em{font-style:italic; color:var(--olive-lt);}

.cta-big .btn-primary{background:var(--cream); color:var(--ink);}
.cta-big .btn-primary:hover{background:var(--olive-lt); color:var(--cream);}

/* ========== CONTACT ========== */
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  padding:140px 36px;
  max-width:1400px; margin:0 auto;
}
.contact-left .sec-eyebrow{max-width:none;}
.contact-copy{font-size:17px; line-height:1.55; color:var(--ink-soft); margin:32px 0 48px; max-width:48ch;}
.contact-meta{display:grid; grid-template-columns:1fr 1fr; gap:32px 24px;}
.contact-meta dt{color:var(--ink-soft); margin-bottom:6px;}
.contact-meta dd{font-family:var(--serif); font-size:18px; font-weight:400; letter-spacing:-.01em;}

.contact-form{display:flex; flex-direction:column; gap:28px; align-content:start;}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.field{display:flex; flex-direction:column; gap:10px;}
.field label{color:var(--ink-soft);}
.field input, .field select, .field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:10px 0 12px;
  font-family:var(--serif); font-weight:400;
  transition:border-color .3s;
  width:100%;
}
.field textarea{resize:vertical; font-family:var(--sans); font-size:15px;}
.field select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position:calc(100% - 12px) 50%, calc(100% - 6px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--olive);}
.submit-btn{align-self:flex-start; margin-top:12px;}

.form-success{
  display:none; gap:10px; flex-wrap:wrap;
  padding:18px 22px; border:1px solid var(--olive); border-radius:var(--r-md);
  background:rgba(107,122,79,.08);
  margin-top:12px; font-size:14px;
}
.form-success.show{display:flex;}
.form-success strong{font-weight:500;}
.form-success span{color:var(--ink-soft);}

/* ========== FOOTER ========== */
.foot{
  position:relative;
  background:var(--ink); color:var(--cream);
  padding:80px 36px 0;
  overflow:hidden;
}
.foot-top{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 2fr; gap:60px;
  padding-bottom:80px; border-bottom:1px solid rgba(243,236,225,.12);
}
.foot-brand{display:flex; flex-direction:column; gap:12px;}
.foot-wm{font-family:var(--serif); font-size:28px; font-weight:400; letter-spacing:-.02em;}
.foot-tag{color:var(--olive-lt);}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.foot-cols > div{display:flex; flex-direction:column; gap:14px;}
.foot-cols span{color:var(--olive-lt); margin-bottom:6px;}
.foot-cols a{font-size:14px; color:rgba(243,236,225,.78); transition:color .2s;}
.foot-cols a:hover{color:var(--cream);}

.foot-bottom{
  max-width:1400px; margin:0 auto;
  padding:32px 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  color:rgba(243,236,225,.55);
}
.foot-mega{
  font-family:var(--serif); font-weight:300; font-size:clamp(80px, 18vw, 260px);
  line-height:.85; letter-spacing:-.04em;
  color:rgba(243,236,225,.05);
  text-align:center;
  user-select:none;
  margin-top:-40px;
  pointer-events:none;
}

/* ========== RESPONSIVE ========== */
@media (max-width:1000px){
  .nav-links{display:none;}
  .hero-video{object-position:60% center;}
  .svc-grid{grid-template-columns:1fr;}
  .step{grid-template-columns:100px 1fr; gap:20px;}
  .step-tag{display:none;}
  .case{grid-template-columns:1fr; gap:32px;}
  .case.reverse{direction:ltr;}
  .quotes{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr; gap:60px;}
  .foot-top{grid-template-columns:1fr;}
  .foot-cols{grid-template-columns:1fr 1fr;}
  .hero-strip{grid-template-columns:1fr 1fr;}
  .hero-title{font-size:clamp(44px, 12vw, 80px);}
  .roadmap{padding-left:48px;}
  .rail{left:16px;}
  .step::before{left:-40px;}
  .scroll-hint{display:none;}
}
@media (max-width:600px){
  .nav{padding:0 20px;}
  .hero{padding:calc(var(--nav-h) + 40px) 20px 60px;}
  .brand-sub{display:none;}
  .sec-head, .manifesto, .services, .process, .cases, .contact{padding-left:20px; padding-right:20px;}
  .case-kpis{grid-template-columns:1fr 1fr; gap:18px;}
  .contact-meta{grid-template-columns:1fr;}
  .contact-form .row{grid-template-columns:1fr;}
  .foot-cols{grid-template-columns:1fr;}
  .hero-strip{grid-template-columns:1fr;}
}

/* ========== TOOLS ========== */
.tools{padding:120px 36px; max-width:1400px; margin:0 auto;}
.tools .sec-head{padding:0; margin-bottom:80px;}

.tools-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; align-items:start;
}

.tool-card{
  background:var(--ink); color:var(--cream);
  padding:52px 48px 48px;
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.tool-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(700px 500px at 80% -10%, rgba(107,122,79,.18), transparent 60%);
  pointer-events:none;
}

.tool-label{color:var(--olive-lt); margin-bottom:12px; position:relative;}
.tool-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 2.4vw, 38px);
  line-height:1.05; letter-spacing:-.025em;
  margin-bottom:10px; position:relative;
}
.tool-desc{
  font-size:14px; color:rgba(243,236,225,.6);
  margin-bottom:36px; line-height:1.55; position:relative;
}

/* --- Calc --- */
.calc-section{margin-bottom:26px; position:relative;}

.calc-field-label{
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(243,236,225,.45); margin-bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
}
.calc-live-val{color:var(--olive-lt); font-size:11px; transition:color .2s;}

.calc-type-btns{display:flex; gap:6px; flex-wrap:wrap;}

.type-btn{
  padding:7px 14px;
  border:1px solid rgba(243,236,225,.18);
  background:transparent;
  color:rgba(243,236,225,.45);
  font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; border-radius:100px;
  transition:all .22s;
}
.type-btn:hover{border-color:rgba(243,236,225,.4); color:rgba(243,236,225,.85);}
.type-btn.active{background:var(--olive); border-color:var(--olive); color:var(--cream);}

.calc-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px;
  background:rgba(243,236,225,.15);
  outline:none; cursor:pointer; margin-bottom:8px;
  border-radius:1px;
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px;
  background:var(--cream); border-radius:50%;
  border:3px solid var(--olive-lt);
  cursor:pointer; transition:transform .2s;
}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.25);}
.calc-range::-moz-range-thumb{
  width:18px; height:18px;
  background:var(--cream); border-radius:50%;
  border:3px solid var(--olive-lt); cursor:pointer;
}

.calc-range-ends{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:rgba(243,236,225,.25);
}

.calc-output{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; margin-top:4px;
  padding-top:28px; border-top:1px solid rgba(243,236,225,.1);
  position:relative;
}

.calc-result{padding:6px 0;}
.calc-result-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px, 2.2vw, 34px);
  line-height:1; letter-spacing:-.02em;
  color:var(--olive-lt);
  transition:opacity .15s, transform .15s;
}
.calc-result-num.fade-out{opacity:0; transform:translateY(4px);}
.calc-result-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:rgba(243,236,225,.35); margin-top:7px;
  text-transform:uppercase; transition:none;
}
.calc-disclaimer{
  margin-top:22px; font-family:var(--mono); font-size:9px;
  letter-spacing:.06em; color:rgba(243,236,225,.2);
  text-transform:uppercase; position:relative;
}

/* --- Quiz --- */
.quiz-progress{display:flex; gap:6px; margin-bottom:30px; position:relative;}
.quiz-dot{
  height:2px; flex:1; border-radius:1px;
  background:rgba(243,236,225,.15);
  transition:background .4s ease;
}
.quiz-dot.done{background:var(--olive-lt);}
.quiz-dot.active{background:rgba(107,122,79,.55);}

.quiz-body{flex:1; position:relative;}
.quiz-question{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px, 1.9vw, 28px);
  line-height:1.18; letter-spacing:-.02em;
  margin-bottom:22px; min-height:3.5rem; color:var(--cream);
}
.quiz-options{display:flex; flex-direction:column; gap:8px;}
.quiz-option{
  padding:13px 18px;
  border:1px solid rgba(243,236,225,.14);
  background:rgba(243,236,225,.03);
  color:rgba(243,236,225,.65);
  font-family:var(--sans); font-size:14px;
  text-align:left; cursor:pointer;
  border-radius:8px; line-height:1.4;
  transition:border-color .2s, background .2s, color .2s;
}
.quiz-option:hover{border-color:var(--olive-lt); color:var(--cream); background:rgba(107,122,79,.08);}
.quiz-option.selected{border-color:var(--olive-lt); background:rgba(107,122,79,.15); color:var(--cream);}

.quiz-result{display:none; flex-direction:column; align-items:flex-start; position:relative;}
.quiz-result.show{display:flex;}

.quiz-result-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--olive-lt); margin-bottom:10px; text-transform:uppercase;
}
.quiz-result-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 2.8vw, 44px);
  letter-spacing:-.025em; line-height:1.05;
  margin-bottom:16px; color:var(--cream);
}
.quiz-result-title em{font-style:italic; color:var(--olive-lt);}
.quiz-result-body{
  color:rgba(243,236,225,.65); font-size:15px;
  line-height:1.65; margin-bottom:28px; max-width:44ch;
}
.quiz-restart{
  margin-top:14px; background:none; border:none;
  color:rgba(243,236,225,.28); font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; cursor:pointer;
  padding:0; transition:color .2s; text-transform:uppercase;
}
.quiz-restart:hover{color:rgba(243,236,225,.6);}

@media (max-width:900px){
  .tools-grid{grid-template-columns:1fr;}
  .tools{padding:80px 36px;}
}
@media (max-width:600px){
  .tools{padding:60px 20px;}
  .tool-card{padding:36px 28px 32px;}
  .calc-output{grid-template-columns:1fr 1fr 1fr;}
  .calc-result-num{font-size:22px;}
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}