/* ============================================================================
   home.css — A S & R Plumbing & Home Improvements · "Still Water"
   Hand-built homepage craft layer (loaded only on index.html).
   Deep, bespoke section design on top of styles.css tokens.
   ========================================================================== */

/* ---- shared rhythm helpers ---------------------------------------------- */
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head .lede{margin-top:18px;max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow svg{width:18px;height:18px;color:var(--accent)}
.lift{display:block}
.muted-text{opacity:.72}
.center{text-align:center}
.wrapline{display:block}
.nowrap{white-space:nowrap}
.tag-copper{color:var(--accent)}
.tag-aqua{color:var(--primary)}

/* gradient display type (premium kit) */
.grad-type{background:linear-gradient(100deg,var(--foreground) 0%,var(--primary) 55%,var(--accent) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* watermark wordmark (premium kit) */
.watermark{position:absolute;inset:auto 0 -2vw 0;font-family:var(--font-head);font-weight:800;font-size:clamp(5rem,22vw,20rem);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--primary) 16%,transparent);text-stroke:1px color-mix(in srgb,var(--primary) 16%,transparent);pointer-events:none;user-select:none;z-index:0;white-space:nowrap;opacity:.6}

/* divider / stat hairline */
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0}
.dot-divider{display:flex;align-items:center;gap:14px;color:var(--accent)}
.dot-divider::before,.dot-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--border))}
.dot-divider::after{background:linear-gradient(270deg,transparent,var(--border))}

/* ============================================================================
   HERO
   ========================================================================== */
.hero{min-height:100svh}
.hero__poster{background:
  radial-gradient(120% 90% at 78% 8%,color-mix(in srgb,var(--primary) 26%,transparent),transparent 55%),
  radial-gradient(90% 80% at 12% 88%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),
  linear-gradient(180deg,var(--background),#06121a)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,var(--background) 100%)}
.hero__content{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__avail{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 70%,transparent);font-family:var(--font-head);font-size:.82rem;font-weight:600;letter-spacing:.04em;margin-bottom:26px}
.hero__avail .pulse{position:relative;width:10px;height:10px;border-radius:50%;background:var(--primary);flex:none}
.hero__avail .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--primary);animation:pulse-ring 2.4s var(--ease-premium) infinite}
@keyframes pulse-ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__avail .pulse::after{animation:none;opacity:.4}}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.6rem);margin-bottom:.35em}
.hero h1 .line{display:block;overflow:hidden}
.hero .lede{max-width:46ch;font-size:clamp(1.08rem,1.6vw,1.32rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;align-items:center}
.hero__cta .btn{padding:16px 30px;font-size:1.02rem}
.btn--call{background:var(--accent);color:#1a0f06}
.btn--call:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px var(--accent)}
.btn .ico{width:20px;height:20px}
.hero__note{margin-top:18px;font-size:.9rem;opacity:.7;display:flex;align-items:center;gap:8px}
.hero__note svg{width:16px;height:16px;color:var(--primary)}

/* hero right-side floating "service card" w/ drawn pipe */
.hero__panel{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--muted) 80%,transparent));border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);padding:30px;box-shadow:var(--shadow);overflow:hidden}
.hero__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent),transparent)}
.hero__panel h2{font-size:1.05rem;letter-spacing:.02em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.hero__panel h2 svg{width:22px;height:22px;color:var(--accent)}
.hero__pipe{position:absolute;right:-30px;bottom:-30px;width:200px;height:200px;opacity:.5;color:var(--primary)}
.hero__checks{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:1}
.hero__checks li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.hero__checks svg{width:22px;height:22px;color:var(--primary);flex:none;margin-top:1px}
.hero__checks b{font-family:var(--font-head)}

/* hero trust strip */
.hero-strip{border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 50%,transparent)}
.hero-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:26px}
.hero-strip .item{display:flex;align-items:center;gap:14px}
.hero-strip svg{width:30px;height:30px;color:var(--primary);flex:none}
.hero-strip b{display:block;font-family:var(--font-head);font-size:1rem}
.hero-strip span{font-size:.82rem;opacity:.66}
@media (max-width:880px){.hero__grid{grid-template-columns:1fr}.hero__panel{display:none}.hero-strip .container{grid-template-columns:repeat(2,1fr);row-gap:20px}}

/* ============================================================================
   EMERGENCY CALLOUT BAR
   ========================================================================== */
.callbar{position:relative;background:linear-gradient(110deg,var(--secondary),var(--muted));border-block:1px solid var(--border);overflow:hidden}
.callbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(30px,5vw,46px)}
.callbar__left{display:flex;align-items:center;gap:20px}
.callbar__icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);flex:none}
.callbar__icon svg{width:30px;height:30px;color:var(--accent)}
.callbar h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0}
.callbar p{margin:4px 0 0;opacity:.8;font-size:.98rem}
.callbar__phone{font-family:var(--font-head);font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--primary);white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.callbar__phone svg{width:26px;height:26px}
.callbar__phone:hover{color:var(--accent)}
.callbar__wave{position:absolute;inset:0;z-index:0;opacity:.18;color:var(--primary);pointer-events:none}
.callbar .container{position:relative;z-index:1}

/* ============================================================================
   SERVICES — two families
   ========================================================================== */
.services{position:relative}
.services__families{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-bottom:clamp(36px,4vw,56px)}
.family{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(26px,3vw,40px);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--muted) 70%,var(--surface)));overflow:hidden}
.family::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 55%,transparent),transparent)}
.family__head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.family__badge{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--primary) 14%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.family--reno .family__badge{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.family__badge svg{width:34px;height:34px;color:var(--primary)}
.family--reno .family__badge svg{color:var(--accent)}
.family h3{margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.family__kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;font-family:var(--font-head)}
.family p{opacity:.82;margin-bottom:22px}
.family__tags{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--border);background:color-mix(in srgb,var(--background) 50%,transparent);font-size:.82rem;font-family:var(--font-head);font-weight:500;transition:border-color .3s var(--ease-premium),color .3s var(--ease-premium)}
.chip svg{width:14px;height:14px;color:var(--primary)}
.chip:hover{border-color:var(--primary);color:var(--primary)}

/* service grid cards */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:transform .4s var(--ease-premium),border-color .4s var(--ease-premium)}
.svc-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 50%);opacity:0;transition:opacity .4s var(--ease-premium)}
.svc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.svc-card:hover::after{opacity:1}
.svc-card__ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--muted) 80%,transparent);border:1px solid var(--border);position:relative;z-index:1}
.svc-card__ico svg{width:30px;height:30px;color:var(--primary)}
.svc-card h4{margin:0;font-family:var(--font-head);font-size:1.18rem;position:relative;z-index:1}
.svc-card p{margin:0;font-size:.93rem;opacity:.78;position:relative;z-index:1}
.svc-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--primary);position:relative;z-index:1}
.svc-card__more svg{width:16px;height:16px;transition:transform .3s var(--ease-premium)}
.svc-card:hover .svc-card__more svg{transform:translateX(5px)}

/* ============================================================================
   WHY US — pillars w/ illustrations
   ========================================================================== */
.why{position:relative;background:linear-gradient(180deg,var(--background),color-mix(in srgb,var(--secondary) 40%,var(--background)))}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,36px)}
.pillar{position:relative;padding-top:18px}
.pillar__art{width:88px;height:88px;margin-bottom:22px;color:var(--primary)}
.pillar:nth-child(2) .pillar__art{color:var(--accent)}
.pillar h3{font-size:1.32rem;margin-bottom:10px}
.pillar p{opacity:.8;font-size:.97rem}
.pillar__num{position:absolute;top:-6px;right:6px;font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--border) 90%,transparent);opacity:.7}
@media (max-width:820px){.why__grid,.services__families{grid-template-columns:1fr}}

/* ============================================================================
   SIGNATURE — before/after slider + 24/7 metric console
   ========================================================================== */
.signature{position:relative;overflow:hidden}
.sig__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:920px){.sig__grid{grid-template-columns:1fr}}

/* before/after */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);aspect-ratio:4/3;user-select:none;touch-action:pan-y;background:var(--muted)}
.ba__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--split,50%))}
.ba__label{position:absolute;top:14px;padding:6px 13px;border-radius:var(--radius-pill);font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--background) 78%,transparent);border:1px solid var(--border);backdrop-filter:blur(6px);z-index:3}
.ba__label--before{left:14px}
.ba__label--after{right:14px;color:var(--primary)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--primary);transform:translateX(-1px);z-index:4;box-shadow:0 0 18px color-mix(in srgb,var(--primary) 70%,transparent)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--primary);display:grid;place-items:center;color:var(--background);cursor:ew-resize;box-shadow:0 6px 20px -4px rgba(0,0,0,.6)}
.ba__grip svg{width:24px;height:24px}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 16px 12px;font-size:.8rem;text-align:center;opacity:.85;background:linear-gradient(0deg,color-mix(in srgb,var(--background) 90%,transparent),transparent)}

/* metric console */
.console{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--muted));padding:clamp(24px,3vw,34px);position:relative;overflow:hidden}
.console::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.console__head{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.console__dotrow{display:flex;gap:6px;margin-left:auto}
.console__dotrow i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.console__dotrow i:first-child{background:var(--accent)}
.console__dotrow i:nth-child(2){background:var(--primary)}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.metric{text-align:left}
.metric__val{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,5vw,3.3rem);line-height:1;color:var(--primary)}
.metric__val .u{font-size:.45em;color:var(--accent);margin-left:3px}
.metric__label{font-size:.82rem;opacity:.7;margin-top:8px}
.console__bars{display:grid;gap:14px;margin-top:6px}
.barline{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:14px;font-size:.82rem}
.barline__track{height:8px;border-radius:6px;background:color-mix(in srgb,var(--background) 70%,transparent);overflow:hidden;position:relative}
.barline__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--primary),var(--accent));width:0;transition:width 1.2s var(--ease-premium)}
.console__foot{margin-top:22px;font-size:.82rem;opacity:.66;display:flex;align-items:center;gap:8px}
.console__foot svg{width:15px;height:15px;color:var(--primary)}

/* ============================================================================
   PROCESS — vertical/horizontal step path with a drawn pipe
   ========================================================================== */
.process{position:relative}
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,32px);margin-top:24px}
.flow__pipe{position:absolute;top:46px;left:6%;right:6%;height:4px;z-index:0}
.flow__pipe svg{width:100%;height:14px;color:color-mix(in srgb,var(--primary) 60%,transparent);overflow:visible}
.step{position:relative;z-index:1;text-align:center}
.step__node{width:92px;height:92px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);position:relative}
.step__node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--primary) 40%,transparent)}
.step__node svg{width:42px;height:42px;color:var(--primary)}
.step__n{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#1a0f06;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.85rem}
.step h4{font-size:1.12rem;margin-bottom:8px}
.step p{font-size:.9rem;opacity:.76;max-width:24ch;margin-inline:auto}
@media (max-width:820px){.flow{grid-template-columns:1fr 1fr;gap:36px}.flow__pipe{display:none}}
@media (max-width:480px){.flow{grid-template-columns:1fr}}

/* ============================================================================
   EDITORIAL MARQUEE (premium kit)
   ========================================================================== */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--border);padding-block:26px;background:color-mix(in srgb,var(--surface) 50%,transparent);--marquee-gap:48px}
.marquee__track{display:flex;gap:var(--marquee-gap);width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-head);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:-.01em;color:color-mix(in srgb,var(--foreground) 80%,transparent);white-space:nowrap}
.marquee__item svg{width:22px;height:22px;color:var(--accent)}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--marquee-gap)/2))}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* ============================================================================
   SERVICE AREAS — map panel + town list
   ========================================================================== */
.areas{position:relative;overflow:hidden}
.areas__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,60px);align-items:center}
.areas__map{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(120% 120% at 50% 0,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.areas__map svg{width:90%;height:90%;color:var(--primary)}
.areas__pin{position:absolute;display:flex;flex-direction:column;align-items:center;color:var(--accent);font-family:var(--font-head);font-size:.72rem;font-weight:600}
.areas__pin svg{width:22px;height:22px}
.areas__list{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.areas__list li{break-inside:avoid;display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-family:var(--font-head);font-weight:500}
.areas__list svg{width:16px;height:16px;color:var(--primary);flex:none}
.areas__note{margin-top:22px;font-size:.88rem;opacity:.7}
@media (max-width:820px){.areas__grid{grid-template-columns:1fr}.areas__map{max-width:380px;margin-inline:auto;width:100%}}

/* ============================================================================
   TESTIMONIALS (placeholder-aware) + DEVICE MOCKUP (premium kit)
   ========================================================================== */
.proof{position:relative}
.proof__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.quote-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:clamp(26px,3vw,38px);position:relative}
.quote-card .qmark{width:52px;height:52px;color:color-mix(in srgb,var(--accent) 60%,transparent);margin-bottom:8px}
.quote-card blockquote{margin:0;font-family:var(--font-head);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4}
.quote-card cite{display:block;margin-top:20px;font-style:normal;font-size:.9rem;opacity:.7}
.phone{position:relative;width:min(280px,72vw);margin-inline:auto;aspect-ratio:9/19;border-radius:38px;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--muted));padding:12px;box-shadow:var(--shadow)}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:80px;height:6px;border-radius:6px;background:var(--border);z-index:2}
.phone__screen{width:100%;height:100%;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#06121a,var(--secondary));display:flex;flex-direction:column;padding:30px 18px 18px}
.phone__screen .biz{font-family:var(--font-head);font-weight:700;font-size:.92rem}
.phone__screen .row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:.78rem}
.phone__screen .row svg{width:20px;height:20px;color:var(--primary);flex:none}
.phone__screen .calling{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;background:var(--accent);color:#1a0f06;font-family:var(--font-head);font-weight:700;font-size:.9rem}
.phone__screen .calling svg{width:20px;height:20px}
@media (max-width:820px){.proof__grid{grid-template-columns:1fr}}

/* ============================================================================
   FAQ
   ========================================================================== */
.faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,4vw,60px);align-items:start}
.faq__list{display:grid;gap:0}
.faq__list details{border-bottom:1px solid var(--border);padding:6px 0}
.faq__list summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:clamp(1.02rem,1.6vw,1.18rem)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary .q-ico{width:26px;height:26px;flex:none;color:var(--primary);transition:transform .3s var(--ease-premium)}
.faq__list details[open] summary .q-ico{transform:rotate(45deg);color:var(--accent)}
.faq__list details p{padding:0 0 22px 42px;opacity:.82;margin:0;max-width:62ch}
.faq__aside{position:sticky;top:100px;border:1px solid var(--border);border-radius:var(--radius);padding:30px;background:linear-gradient(180deg,var(--surface),var(--muted))}
.faq__aside h3{font-size:1.3rem}
.faq__aside p{opacity:.8;font-size:.95rem}
@media (max-width:820px){.faq__grid{grid-template-columns:1fr}.faq__aside{position:static}}

/* ============================================================================
   CONTACT / FINAL CTA
   ========================================================================== */
.contact{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--background),color-mix(in srgb,var(--secondary) 55%,var(--background)))}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.contact__info h2{font-size:clamp(2rem,4vw,3.2rem)}
.contact__rows{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px}
.contact__rows li{display:flex;align-items:flex-start;gap:16px;padding:18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 60%,transparent);transition:border-color .3s var(--ease-premium)}
.contact__rows li:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.contact__rows .ci{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);flex:none}
.contact__rows .ci svg{width:22px;height:22px;color:var(--primary)}
.contact__rows .lab{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-family:var(--font-head);font-weight:600}
.contact__rows a,.contact__rows b{font-family:var(--font-head);font-weight:600;font-size:1.05rem}
.contact__rows span{display:block;font-size:.9rem;opacity:.74;font-family:var(--font-body);font-weight:400}
.contact__form{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--muted));padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}
.contact__form::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 55%,transparent),transparent)}
.contact__form h3{font-size:1.4rem}
.contact__form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact__form .btn{width:100%;justify-content:center;margin-top:6px}
.contact__form .fineprint{font-size:.78rem;opacity:.6;margin-top:14px;text-align:center}
@media (max-width:820px){.contact__grid,.contact__form .grid2{grid-template-columns:1fr}}

/* ---- footer enrichment (homepage adds columns via styles.css base) ------- */
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;width:100%}
.foot-cols h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-cols a{opacity:.78;font-size:.92rem}
.foot-cols a:hover{opacity:1;color:var(--primary)}
.foot-brand .mark{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin-bottom:14px}
.foot-brand .mark svg{width:34px;height:34px;color:var(--primary)}
.foot-brand p{font-size:.9rem;opacity:.72;max-width:34ch}
.foot-legal{border-top:1px solid var(--border);margin-top:40px;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.82rem;opacity:.62;width:100%}
@media (max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}

/* ---- decorative wave divider between sections ---------------------------- */
.wave-sep{display:block;width:100%;height:48px;color:var(--secondary)}
.wave-sep svg{width:100%;height:100%}

/* ---- reveal default transform for grouped children ---------------------- */
[data-reveal-group]>*{will-change:transform,opacity}

/* ---- tilt cards (premium kit marker via data-tilt) ---------------------- */
[data-tilt]{transform-style:preserve-3d;transition:transform .4s var(--ease-premium)}