/* Epoxy Dept — shared stylesheet (home + all SEO sub-pages) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root{
  --bg:#0a0a0b; --bg-2:#0d0d10; --surface:#141417; --surface-2:#191a1e;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16);
  --text:#f3f4f6; --muted:#9a9aa2; --steel:#cdd0d6;
  --chrome:linear-gradient(177deg,#ffffff 0%,#e4e6ea 40%,#b6b9bf 55%,#eceef1 100%);
  --r:12px; --r-lg:16px; --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 26px 64px -18px rgba(0,0,0,.78);
}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(74vw 44vh at 50% -14%, rgba(255,255,255,.06), transparent 60%), var(--bg); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

h1,h2,h3{ margin:0; font-family:"Archivo", system-ui, sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.04; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.eyebrow{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin-bottom:18px; display:inline-flex; align-items:center; gap:11px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--steel),transparent); }
.lead{ color:var(--muted); max-width:58ch; font-size:1.18rem; line-height:1.55; }

section{ padding-block:clamp(64px,9vw,110px); position:relative; }
.section-head{ max-width:680px; margin-bottom:clamp(36px,5vw,56px); }
.section-head h2{ font-size:clamp(1.9rem,4.4vw,2.9rem); }
.section-head p{ margin-top:18px; }

:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-9999px; top:0; background:#fff; color:#0a0a0b; padding:10px 16px; border-radius:var(--r); z-index:200; font-weight:700; }
.skip:focus{ left:16px; top:12px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:"Archivo",sans-serif; font-weight:700; font-size:.97rem; line-height:1; cursor:pointer; padding:15px 24px; border-radius:var(--r); border:1px solid transparent; transition:transform .16s var(--ease), border-color .16s var(--ease), filter .16s var(--ease); white-space:nowrap; }
.btn .arw{ font-weight:500; transition:transform .16s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }
.btn-primary{ background:var(--chrome); color:#0a0a0b; border-color:rgba(255,255,255,.4); box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 10px 26px rgba(0,0,0,.5); }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--text); transform:translateY(-2px); }

/* nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:72px; display:flex; align-items:center; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); }
.nav.scrolled{ background:rgba(10,10,11,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; }
.mark{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--chrome); color:#0a0a0b; font-family:"Archivo",sans-serif; font-weight:900; font-size:.82rem; letter-spacing:-.04em; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; }
.brand .name{ font-family:"Archivo",sans-serif; font-weight:900; font-size:1.08rem; }
.brand .name .dot{ color:var(--steel); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-family:"Archivo",sans-serif; font-weight:500; font-size:.95rem; color:var(--muted); transition:color .16s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:15px; }
.nav-phone{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.95rem; color:var(--text); }
.menu-btn{ display:none; background:none; border:1px solid var(--line-2); border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--text); align-items:center; justify-content:center; }
.menu-btn svg{ width:22px; height:22px; }

/* page hero (sub-pages) */
.page-hero{ padding-top:128px; padding-bottom:clamp(36px,5vw,56px); position:relative; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 80% at 80% 0%, rgba(255,255,255,.05), transparent 60%); }
.page-hero h1{ font-size:clamp(2.3rem,5vw,3.7rem); font-weight:900; max-width:18ch; margin-top:14px; }
.page-hero .lead{ margin-top:20px; }
.page-hero .hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:13px; }

/* sub-page photo hero (service pages with a matched real photo) */
.page-hero.has-photo{ isolation:isolate; padding-top:140px; padding-bottom:clamp(48px,7vw,88px); overflow:hidden; }
.page-hero .hero-img{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.85) contrast(1.04) saturate(.92); }
.page-hero.has-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.52) 46%, rgba(10,10,11,.32) 100%), linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.18) 34%, rgba(10,10,11,.6) 88%, var(--bg)); }
.page-hero.has-photo .wrap{ position:relative; z-index:2; }
.page-hero.has-photo h1{ text-shadow:0 2px 26px rgba(0,0,0,.5); }
.page-hero.has-photo .lead{ color:#d6d7dc; text-shadow:0 1px 14px rgba(0,0,0,.55); }

/* breadcrumb */
.crumbs{ font-size:.82rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a:hover{ color:var(--text); }
.crumbs .sep{ opacity:.5; }

/* prose content */
.prose{ max-width:72ch; }
.prose h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-top:1.6em; }
.prose h3{ font-size:1.25rem; margin-top:1.4em; }
.prose p{ color:var(--muted); margin-top:1em; }
.prose ul{ color:var(--muted); margin-top:1em; padding-left:0; list-style:none; display:grid; gap:12px; }
.prose li{ display:flex; gap:12px; align-items:flex-start; }
.prose li svg{ width:20px; height:20px; color:var(--steel); flex:none; margin-top:3px; }
.prose strong{ color:var(--text); }

.layout{ display:grid; grid-template-columns:1fr 320px; gap:clamp(36px,5vw,64px); align-items:start; }
.aside{ position:sticky; top:96px; display:grid; gap:18px; }
.card{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-2); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
.card h3{ font-size:1.1rem; }
.card .big{ font-family:"Archivo",sans-serif; font-weight:800; font-size:1.45rem; }
.linklist{ display:grid; gap:9px; margin-top:6px; }
.linklist a{ color:var(--muted); font-size:.95rem; }
.linklist a:hover{ color:var(--steel); }

/* showcase image */
.shot{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow); margin:0; aspect-ratio:16/9; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* service cards grid */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc{ position:relative; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:26px; transition:transform .2s var(--ease), border-color .2s var(--ease); }
.svc::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.svc:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.svc .kicker{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; }
.svc h3{ font-size:1.2rem; margin-bottom:8px; }
.svc p{ color:var(--muted); font-size:.95rem; }

/* checks */
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
.check{ display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.check svg{ width:22px; height:22px; color:var(--steel); flex:none; margin-top:3px; }
.check b{ font-family:"Archivo",sans-serif; font-weight:700; font-size:1.02rem; display:block; }
.check span{ color:var(--muted); font-size:.93rem; }

/* area chips */
.areas{ display:flex; flex-wrap:wrap; gap:10px; }
.area-chip{ border:1px solid var(--line-2); border-radius:10px; padding:10px 16px; font-family:"Archivo",sans-serif; font-weight:500; font-size:.94rem; color:var(--text); transition:border-color .16s var(--ease), background .16s var(--ease); }
.area-chip:hover{ border-color:var(--steel); background:var(--surface); }

/* faq */
.faq{ max-width:760px; display:grid; gap:0; }
.faq details{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary{ font-family:"Archivo",sans-serif; font-weight:700; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--steel); font-weight:400; }
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ color:var(--muted); margin-top:12px; }

/* cta band */
.cta-band{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border-block:1px solid var(--line-2); text-align:center; }
.cta-band h2{ font-size:clamp(2rem,4.6vw,3.1rem); max-width:680px; margin:0 auto; }
.cta-band p{ color:var(--muted); margin:18px auto 0; max-width:50ch; font-size:1.12rem; }
.cta-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* footer */
footer{ border-top:1px solid var(--line); padding-block:54px 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot-brand p{ color:var(--muted); font-size:.92rem; max-width:34ch; margin-top:14px; }
.foot-logo{ display:inline-block; }
.foot-logo img{ width:210px; max-width:100%; height:auto; filter:brightness(1.08) contrast(1.04); -webkit-mask-image:radial-gradient(135% 135% at 50% 50%, #000 64%, transparent 88%); mask-image:radial-gradient(135% 135% at 50% 50%, #000 64%, transparent 88%); }
.foot-col h4{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 14px; }
.foot-col a, .foot-col span{ display:block; color:var(--muted); font-size:.92rem; margin-bottom:9px; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:#86868d; font-size:.82rem; }
.kelo{ color:var(--muted); }
.kelo a{ color:var(--steel); font-weight:600; }
.kelo a:hover{ color:var(--text); }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0s); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

@media (max-width:980px){
  .layout{ grid-template-columns:1fr; }
  .aside{ position:static; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav-links, .nav-phone{ display:none; }
  .menu-btn{ display:inline-flex; }
  .nav .mark{ display:none; }
  .nav.open{ background:rgba(10,10,11,.97); border-bottom-color:var(--line); }
  .nav.open .nav-links{ display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; background:rgba(10,10,11,.98); border-bottom:1px solid var(--line); padding:6px 24px 18px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .nav.open .nav-links a{ padding:15px 0; border-bottom:1px solid var(--line); width:100%; }
  .checks{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } }
@media (max-width:400px){
  .brand .name{ font-size:.94rem; }
  .nav-cta{ gap:9px; }
  .nav-cta .btn-primary{ padding:10px 13px; font-size:.8rem; }
  .nav-cta .btn .arw{ display:none; }
}

/* mobile / cross-browser hardening */
*{ -webkit-tap-highlight-color: transparent; }
@supports (padding: max(0px)){
  .wrap{ padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  footer{ padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}
