/* ============================================================
   Southern Oven Services - retro-modern enamel identity
   Palette derived from the real SOS brand:
   rescue red · deep navy · enamel teal · warm cream · peach
   ============================================================ */

:root{
  --paper:   #F4ECDB;   /* warm enamel paper (page bg)   */
  --paper-2: #FBF5E9;   /* lighter card surface          */
  --ink:     #072736;   /* deep navy (from SOS #002339)  */
  --ink-2:   #0C3547;   /* raised navy panel             */
  --flame:   #D23F38;   /* SOS rescue red                */
  --flame-2: #A62A24;   /* deep red (shadows/hover)      */
  --teal:    #2E8C92;   /* enamel teal                   */
  --teal-soft:#7EBEC5;  /* the real SOS accent           */
  --peach:   #F6DCC0;   /* warm tint panels              */
  --wa:      #25D366;   /* WhatsApp green                */
  --cream:   #F4ECDB;   /* alias for SVG use             */
  --gold:    #E39A2B;   /* used only in svg badge flame  */

  --display: 'Alfa Slab One', Georgia, 'Times New Roman', serif;
  --label:   'Staatliches', 'Arial Narrow', sans-serif;
  --body:    'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --wrap: 1160px;
  --radius: 14px;
  --shadow-hard: 6px 6px 0 var(--ink);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(7,39,54,.05) 1px, transparent 0);
  background-size:22px 22px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.btn{
  --btnbg:var(--flame); --btnfg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--label);letter-spacing:.06em;text-transform:uppercase;
  font-size:1.02rem;line-height:1;
  background:var(--btnbg);color:var(--btnfg);
  padding:.85em 1.4em;border:2.5px solid var(--ink);border-radius:60px;
  cursor:pointer;transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .15s;
  box-shadow:3px 3px 0 var(--ink);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--teal-soft);outline-offset:3px}
.btn--flame{--btnbg:var(--flame)}
.btn--gold{--btnbg:var(--teal-soft);--btnfg:var(--ink)}
.btn--wa{--btnbg:var(--wa);--btnfg:#0a2e17}
.btn--ghost{--btnbg:transparent;--btnfg:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--lg{font-size:1.14rem;padding:1em 1.7em}

/* ---------- eyebrows / titles ---------- */
.eyebrow{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  color:var(--flame);font-size:1.05rem;margin:0 0 .6rem;
}
.eyebrow--gold{color:var(--teal-soft)}

.section{padding:88px 0}
.section__head{max-width:720px;margin:0 auto 54px;text-align:center}
.section__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.02;
  margin:0 0 .5rem;letter-spacing:-.01em;
}
.section__title--light{color:var(--paper)}
.section__sub{font-size:1.12rem;color:#3a4b56;margin:0}
.section__sub--light{color:rgba(244,236,219,.82)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--peach{background:var(--peach)}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(244,236,219,.92);
  backdrop-filter:blur(8px);
  border-bottom:2.5px solid var(--ink);
}
.topbar__inner{display:flex;align-items:center;gap:20px;height:96px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand__logo{height:76px;width:auto;display:block}
@media (max-width:640px){.brand__logo{height:60px}}

.topnav{display:flex;gap:26px}
.topnav a{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;
  font-size:1rem;padding:4px 0;position:relative;color:var(--ink);
}
.topnav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2.5px;background:var(--flame);transition:width .2s var(--ease)}
.topnav a:hover::after{width:100%}

.topbar__cta{display:flex;align-items:center;gap:16px}
.phone-link{display:flex;flex-direction:column;line-height:1.05;text-align:right}
.phone-link__label{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--teal)}
.phone-link__num{font-family:var(--display);font-size:1.05rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:64px 0 76px;position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.1rem,8vw,5.6rem);line-height:.92;margin:.2rem 0 1rem;
  letter-spacing:-.02em;
}
.hero__title .hl{color:var(--flame);position:relative;display:inline-block;isolation:isolate}
.hero__title .hl::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.16em;
  background:var(--teal-soft);z-index:-1;transform:rotate(-1.2deg);border-radius:4px;
}
.hero__lead{font-size:1.24rem;max-width:34ch;color:#33454f;margin:0 0 1.4rem}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 1.6rem}
.chips li{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;
  background:var(--paper-2);border:2px solid var(--ink);border-radius:60px;
  padding:.45em .9em;box-shadow:2px 2px 0 var(--ink);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1rem}
.hero__reassure{font-size:.98rem;color:var(--teal);font-weight:500;margin:0}
.hero__reassure::before{content:"●";color:var(--wa);margin-right:.5em;font-size:.7em;vertical-align:middle}

/* --- oven-door before/after (signature) --- */
.hero__viz{position:relative;display:flex;justify-content:center}
.starburst{
  position:absolute;top:-18px;right:2px;z-index:5;
  width:112px;height:112px;display:grid;place-items:center;
  background:var(--flame);color:#fff;border:2.5px solid var(--ink);
  font-family:var(--label);text-transform:uppercase;text-align:center;line-height:1;
  letter-spacing:.05em;font-size:1.35rem;border-radius:50%;
  box-shadow:4px 4px 0 var(--ink);
  clip-path:polygon(50% 0,61% 12%,76% 6%,78% 23%,94% 25%,88% 40%,100% 50%,88% 60%,94% 75%,78% 77%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,22% 77%,6% 75%,12% 60%,0 50%,12% 40%,6% 25%,22% 23%,24% 6%,39% 12%);
  transform:rotate(-8deg);
  animation:spinwob 9s linear infinite;
}
@keyframes spinwob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg)}}

.oven{margin:0;width:100%;max-width:440px;
  background:var(--ink);border:2.5px solid var(--ink);border-radius:20px;
  padding:18px;box-shadow:8px 8px 0 rgba(7,39,54,.28)}
.oven__door{
  border:6px solid #d9d2c4;border-radius:14px;overflow:hidden;
  background:#000;aspect-ratio:4/3;position:relative;
  box-shadow:inset 0 0 0 3px var(--ink);
}
.ba{position:absolute;inset:0;user-select:none;touch-action:none}
.ba__img{position:absolute;inset:0}
.ba__after{
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(150deg,#e9e4d8,#c9c3b6 60%,#b4ad9f);
}
.ba__after::before{ /* clean shine streak */
  content:"";position:absolute;top:-20%;left:20%;width:32%;height:150%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:rotate(18deg);
}
.ba__before{
  width:50%;
  background:
    radial-gradient(70% 60% at 40% 30%, rgba(70,45,20,.55), transparent 60%),
    repeating-radial-gradient(circle at 60% 70%, rgba(20,12,4,.5) 0 2px, transparent 2px 9px),
    linear-gradient(150deg,#5b4527,#2f2312 65%,#1c150a);
  border-right:3px solid var(--paper);
}
.ba__tag{
  position:absolute;bottom:12px;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;padding:.35em .8em;border:2px solid var(--ink);border-radius:40px;
}
.ba__tag--before{left:12px;background:var(--flame);color:#fff}
.ba__tag--after{right:12px;background:var(--teal-soft);color:var(--ink)}
.ba__handle{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:44px;background:transparent;border:0;cursor:ew-resize;z-index:4;padding:0;
}
.ba__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:4px;background:var(--paper)}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--flame);border:2.5px solid var(--paper);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.ba__grip::before,.ba__grip::after{content:"";position:absolute;top:50%;width:0;height:0;border:5px solid transparent}
.ba__grip::before{left:6px;transform:translateY(-50%);border-right-color:var(--paper)}
.ba__grip::after{right:6px;transform:translateY(-50%);border-left-color:var(--paper)}
.ba__handle:focus-visible{outline:3px solid var(--teal-soft);outline-offset:2px}

.oven__dials{display:flex;align-items:center;gap:14px;margin-top:14px;padding:0 4px}
.dial{width:26px;height:26px;border-radius:50%;background:#d9d2c4;border:2.5px solid #000;position:relative;flex:0 0 auto}
.dial::after{content:"";position:absolute;top:50%;left:50%;width:2.5px;height:10px;background:#000;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(var(--deg,0deg))}
.oven__label{margin-left:auto;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;color:var(--teal-soft);font-size:.88rem}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--ink);color:var(--paper);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);overflow:hidden}
.marquee__track{display:flex;gap:0;white-space:nowrap;animation:slide 26s linear infinite;width:max-content}
.marquee__track span{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;
  padding:16px 30px;position:relative;
}
.marquee__track span::after{content:"✶";color:var(--flame);position:absolute;right:-4px;top:50%;transform:translateY(-50%)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SERVICES
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:30px 26px 28px;position:relative;box-shadow:var(--shadow-hard);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.card__dial{
  display:block;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--teal-soft));
  border:2.5px solid var(--ink);position:relative;margin-bottom:18px;
}
.card__dial::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:15px;background:var(--ink);transform:translate(-50%,-100%) rotate(38deg);transform-origin:bottom center}
.card h3{font-family:var(--display);font-weight:400;font-size:1.32rem;margin:0 0 .5rem;letter-spacing:-.01em}
.card p{margin:0;color:#3a4b56;font-size:1rem}
.card--cta{background:var(--flame);color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4rem}
.card--cta h3{color:#fff}
.card--cta p{color:rgba(255,255,255,.9);margin-bottom:.8rem}

/* ============================================================
   AGA SPECIALISTS
   ============================================================ */
.aga{background:linear-gradient(160deg,#2E8C92,#256a70);color:var(--paper)}
.aga .eyebrow{color:#fff}
.aga__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center}
.aga__badge{display:flex;justify-content:center}
.aga__roundel{
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #FBF5E9, #efe7d6 70%);
  border:5px solid var(--paper);outline:3px solid var(--flame);outline-offset:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.22);
  transform:rotate(-4deg);
}
.aga__roundel-top{font-family:var(--display);font-size:2.9rem;line-height:.8;color:var(--flame)}
.aga__roundel-mid{font-family:var(--label);letter-spacing:.16em;font-size:1.25rem}
.aga__roundel-bot{font-family:var(--label);letter-spacing:.12em;font-size:.85rem;color:var(--teal)}
.aga__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;padding:0;margin:22px 0 26px;max-width:440px}
.aga__list li{position:relative;padding-left:30px;font-size:1.03rem}
.aga__list li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center/76% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center/76% no-repeat;
}

/* ============================================================
   WHY US (badges)
   ============================================================ */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.badge{text-align:center;padding:8px}
.badge__mark{
  width:82px;height:82px;margin:0 auto 16px;border-radius:50%;
  background:var(--paper-2);border:2.5px solid var(--paper);
  outline:3px solid var(--flame);outline-offset:5px;
  box-shadow:4px 4px 0 rgba(0,0,0,.3);
  background-repeat:no-repeat;background-position:center;background-size:44%;
}
.badge__mark--eco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23F38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13C4 7 9 4 16 4c0 7-3 12-9 12z'/%3E%3Cpath d='M4 13c4-1 7 1 8 6'/%3E%3C/svg%3E")}
.badge__mark--shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23F38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E")}
.badge__mark--tag{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23F38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E")}
.badge__mark--home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23F38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.badge h3{font-family:var(--display);font-weight:400;font-size:1.18rem;margin:0 0 .4rem}
.badge p{margin:0;color:rgba(244,236,219,.78);font-size:.98rem}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:none}
.step{background:var(--paper-2);border:2.5px solid var(--ink);border-radius:var(--radius);padding:30px 26px;position:relative;box-shadow:var(--shadow-hard)}
.step__num{font-family:var(--display);font-size:2.6rem;color:var(--flame);line-height:1;display:block;margin-bottom:.3rem}
.step h3{font-family:var(--display);font-weight:400;font-size:1.28rem;margin:0 0 .5rem}
.step p{margin:0;color:#3a4b56}
.steps .step:not(:last-child)::after{
  content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;color:var(--teal);z-index:2;font-family:var(--body)
}

/* ============================================================
   PRICES
   ============================================================ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.price-card{background:var(--paper-2);border:2.5px solid var(--ink);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-hard);position:relative}
.price-card--feature{background:var(--ink);color:var(--paper)}
.price-card__flag{
  position:absolute;top:-14px;right:20px;background:var(--flame);color:#fff;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  padding:.35em .9em;border:2.5px solid var(--paper);border-radius:40px;box-shadow:2px 2px 0 rgba(0,0,0,.35)
}
.price-card__title{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0 0 1rem;letter-spacing:-.01em}
.price-list{list-style:none;padding:0;margin:0}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:.55em 0;border-bottom:1.5px dashed rgba(7,39,54,.22)}
.price-card--feature .price-list li{border-bottom-color:rgba(244,236,219,.25)}
.price-list li:last-child{border-bottom:0}
.price-list span{font-size:1rem}
.price-list b{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--flame);white-space:nowrap}
.price-card--feature .price-list b{color:var(--teal-soft)}
.price-card__note{margin:.9rem 0 0;font-size:.9rem;color:rgba(244,236,219,.75)}
.price-cta{margin-top:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.price-cta p{margin:0;font-size:1.1rem;font-weight:500}

/* ============================================================
   AREAS
   ============================================================ */
.areas__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.areas__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.areas__list li{
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:10px;
  padding:.7em .6em;text-align:center;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.05em;font-size:.98rem;box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s var(--ease),background .12s
}
.areas__list li:hover{transform:translate(-2px,-2px);background:var(--teal-soft)}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testi{background:var(--paper)}
.testi__inner{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:center;
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:20px;padding:48px;box-shadow:var(--shadow-hard)}
.testi__stat{text-align:center;border-right:2.5px dashed rgba(7,39,54,.25);padding-right:28px}
.testi__big{font-family:var(--display);font-size:4.6rem;color:var(--flame);line-height:.9;display:block}
.testi__cap{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;display:block;margin:.4rem 0 .6rem}
.stars{color:var(--gold);letter-spacing:.15em;font-size:1.3rem}
.testi__quote p{font-size:1.32rem;line-height:1.5;margin:0 0 1rem;font-weight:500}
.testi__quote cite{font-style:normal;font-family:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--teal);font-size:.95rem}

/* ============================================================
   QUOTE / CTA
   ============================================================ */
.quote{background:var(--ink);color:var(--paper)}
.quote__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start}
.quote__copy .section__title{text-align:left;font-size:clamp(2rem,4.4vw,3rem)}
.quote__contacts{list-style:none;padding:0;margin:28px 0 0}
.quote__contacts li{display:flex;gap:14px;align-items:baseline;padding:.5em 0;border-bottom:1.5px dashed rgba(244,236,219,.22);font-size:1.05rem}
.quote__contacts li:last-child{border-bottom:0}
.quote__contacts span{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;color:var(--teal-soft);min-width:88px;font-size:.85rem}
.quote__contacts a:hover{color:var(--teal-soft)}

.quote__form{
  background:var(--paper-2);color:var(--ink);border:2.5px solid var(--paper);
  border-radius:18px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px;
  box-shadow:8px 8px 0 rgba(0,0,0,.35)
}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--ink)}
.field .opt{color:#7a8790;letter-spacing:0;text-transform:none;font-family:var(--body)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:9px;padding:.7em .8em;width:100%
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--teal-soft);outline-offset:1px;border-color:var(--teal)}
.quote__submit{display:flex;flex-wrap:wrap;gap:12px}
.quote__note{grid-column:1/-1;margin:0;font-weight:600;min-height:1.2em}
.quote__note.ok{color:var(--teal)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--paper);border-top:2.5px solid var(--flame);padding:44px 0 26px}
.footer__inner{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:30px;align-items:start}
.brand__word--foot{display:flex;flex-direction:column;line-height:1.15;gap:2px}
.brand__word--foot strong{font-family:var(--display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em}
.brand__word--foot em{font-family:var(--label);font-style:normal;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--teal-soft)}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer__nav a{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.footer__nav a:hover{color:var(--teal-soft)}
.footer__contact{display:flex;flex-direction:column;gap:6px;font-size:1rem}
.footer__contact a:hover{color:var(--teal-soft)}
.footer__legal{max-width:var(--wrap);margin:30px auto 0;padding:18px 24px 0;border-top:1.5px solid rgba(244,236,219,.2);font-size:.85rem;color:rgba(244,236,219,.6)}

/* ---------- floating whatsapp ---------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:var(--wa);color:#0a2e17;
  display:grid;place-items:center;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--ease)
}
.fab:hover{transform:translateY(-3px) scale(1.05)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .topnav{display:none}
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__viz{order:-1}
  .cards,.price-grid,.badges{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .steps .step:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}
  .aga__grid,.areas__grid,.testi__inner,.quote__grid{grid-template-columns:1fr}
  .testi__stat{border-right:0;border-bottom:2.5px dashed rgba(7,39,54,.25);padding-right:0;padding-bottom:22px}
  .footer__inner{grid-template-columns:1fr}
  .aga__badge{order:-1}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .phone-link{display:none}
  .cards,.price-grid,.badges,.areas__list{grid-template-columns:1fr}
  .areas__list{grid-template-columns:1fr 1fr}
  .quote__form{grid-template-columns:1fr;padding:24px}
  .testi__inner{padding:30px}
  .aga__list{grid-template-columns:1fr}
  .starburst{width:88px;height:88px;font-size:1.05rem;top:-10px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track,.starburst{animation:none}
  .btn:hover,.card:hover,.areas__list li:hover,.fab:hover{transform:none}
}