/* ==========================================================================
   Kent Fencing and Landscaping design system
   Signature: vertical timber-slat rhythm. Palette: ink, bone, sage.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#0B0B0B;          /* true near-black */
  --ink-2:#161616;
  --ink-3:#222222;
  --accent:#0B0B0B;       /* black accent on light grounds */
  --accent-lift:#FFFFFF;  /* white accent on dark grounds */
  --accent-deep:#000000;
  --bone:#F5F5F3;         /* neutral paper */
  --bone-2:#ECECE9;
  --bone-3:#E2E2DE;
  --sand:#E2E2DE;
  --line:#E0E0DC;
  --line-soft:#EBEBE8;
  --slate:#56575B;
  --mute:#8B8C90;
  --gold:#C9A24B;
  --white:#fff;

  /* Welch Standard: 2px radius, borderless surfaces separated by tone,
     and a three-step two-layer shadow ladder rather than 1px outlines. */
  --radius:2px;
  --radius-lg:2px;
  --radius-sm:2px;
  --shadow-1:0 1px 2px rgba(11,11,11,.05), 0 2px 6px -2px rgba(11,11,11,.08);
  --shadow-2:0 4px 10px -4px rgba(11,11,11,.10), 0 14px 30px -12px rgba(11,11,11,.14);
  --shadow-3:0 10px 24px -8px rgba(11,11,11,.14), 0 34px 60px -24px rgba(11,11,11,.26);
  /* legacy aliases so existing rules keep working */
  --shadow:var(--shadow-1);
  --shadow-lg:var(--shadow-3);
  --shadow-accent:0 16px 40px -18px rgba(0,0,0,.45);

  --gutter:clamp(20px,5vw,48px);
  --maxw:1200px;
  --maxw-wide:1360px;

  --logo-h:46px;
  --logo-hf:42px;
  --hero-fs:68px;
  --hero-overlay:.62;
  --hero-img-op:.40;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--bone);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

/* Global icon guard */
svg{flex:none}
a svg,button svg,span svg,li svg,h1 svg,h2 svg,h3 svg,h4 svg,p svg,label svg{vertical-align:middle}

h1,h2,h3,h4{font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);line-height:1.08;margin:0 0 .5em;letter-spacing:-.032em;font-weight:800}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3.15rem)}
h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
strong{font-weight:600}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding:clamp(72px,10vw,140px) 0}
.section--tight{padding:clamp(52px,7vw,96px) 0}
.section--paper{background:var(--bone-2)}
.section--ink{background:var(--ink);color:#D6D6D9}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:"DM Sans";font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:0}
.section--ink .eyebrow{color:var(--accent-lift)}
.section--ink .eyebrow::before{background:var(--accent-lift)}

/* Welch Standard section header: title left, sub right, hairline rule that
   scales in, oversized ghost numeral behind the title. */
.sec-head{max-width:66ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--slate);margin:0}
.section--ink .lede{color:#B5B5B8}

.sec-split{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-split__rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sec-split.in .sec-split__rule{transform:scaleX(1)}
.section--ink .sec-split__rule{background:rgba(255,255,255,.16)}
.sec-split__row{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.sec-split__title{position:relative}
.sec-split__title .eyebrow{margin-bottom:.8rem}
.sec-split__title h2{margin:0;position:relative;z-index:1}
.sec-split__ghost{position:absolute;right:-.1em;top:-.62em;font-family:"DM Sans";font-weight:800;font-size:clamp(6rem,14vw,11rem);line-height:1;color:var(--ink);opacity:.05;z-index:0;pointer-events:none;letter-spacing:-.04em}
.section--ink .sec-split__ghost{color:#fff;opacity:.06}
.sec-split__sub{color:var(--slate);font-size:1.05rem;padding-bottom:.35rem}
.section--ink .sec-split__sub{color:#B5B5B8}
@media(max-width:760px){
  .sec-split__row{grid-template-columns:1fr;gap:1rem;align-items:start}
  .sec-split__ghost{display:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:"DM Sans";font-weight:600;font-size:.98rem;line-height:1;padding:1.05rem 1.6rem;border-radius:2px;border:1.5px solid transparent;background:var(--accent);color:#fff;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .2s;box-shadow:var(--shadow-accent);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(0,0,0,.6);background:var(--accent-deep)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.15rem 1.9rem;font-size:1.05rem}
.btn--ink{background:var(--ink);box-shadow:0 16px 40px -16px rgba(11,11,11,.5)}
.btn--ink:hover{background:#000}
.btn--light{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.btn--light:hover{background:#fff;box-shadow:var(--shadow-lg)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--block{width:100%}
.btn--on-dark.btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn--on-dark.btn--ghost:hover{background:#fff;color:var(--ink)}

/* ---------- Topbar ---------- */
.topbar{background:#000;color:#9A9B9F;font-size:.82rem;letter-spacing:.01em}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{color:#E5E5E7;font-weight:500;display:inline-flex;align-items:center;gap:.4rem;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar svg{width:15px;height:15px;color:var(--accent-lift)}
.topbar__badges{display:flex;gap:1.5rem;align-items:center}
.topbar__badges span{display:inline-flex;align-items:center;gap:.45rem}
.topbar__right{display:flex;gap:1.4rem;align-items:center}
@media(max-width:860px){.topbar__badges{display:none}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:900;background:#000;border-bottom:1px solid rgba(255,255,255,.1);transition:box-shadow .3s,background .3s}
.site-header.is-stuck{background:#000;box-shadow:0 10px 34px -20px rgba(0,0,0,.8)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:80px}
.brand{display:flex;align-items:center;gap:.7rem;font-family:"DM Sans";font-weight:800;font-size:1.22rem;color:#fff;letter-spacing:-.03em;line-height:1}
.brand small{display:block;font-family:"Inter";font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.brand__mark{width:42px;height:42px;flex:none;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.brand__mark::before{content:"";position:absolute;inset:9px 8px;background-image:repeating-linear-gradient(90deg,var(--accent-lift) 0 3px,transparent 3px 8px)}
.brand__mark::after{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:3px;background:#fff;opacity:.9}
.brand__logo{height:var(--logo-h);width:auto;max-width:230px;object-fit:contain}
.brand--img{gap:0}

.nav{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav li{list-style:none;position:relative}
.nav>li>a{display:inline-flex;align-items:center;gap:.35rem;font-family:"DM Sans";font-weight:600;font-size:.96rem;color:#CACACD;padding:.6rem .85rem;border-radius:2px;transition:color .2s,background .2s}
.nav>li>a:hover,.nav>li>a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.nav .menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s}
.nav .sub-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:238px;background:#0d0d0d;border:1px solid rgba(255,255,255,.1);border-radius:2px;box-shadow:var(--shadow-lg);padding:.5rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s}
.nav .menu-item-has-children:hover .sub-menu,.nav .menu-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:.68rem .85rem;border-radius:2px;font-weight:500;font-size:.94rem;color:#CACACD;transition:background .18s,color .18s}
.nav .sub-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-fallback{list-style:none;display:flex;gap:.15rem;margin:0;padding:0}
.nav-fallback li{list-style:none}
.nav-fallback a{padding:.6rem .85rem;font-family:"DM Sans";font-weight:600;font-size:.97rem;color:var(--slate)}

.header__cta{display:flex;align-items:center;gap:.9rem}
.header__phone{display:inline-flex;align-items:center;gap:.5rem;font-family:"DM Sans";font-weight:700;color:#fff;font-size:.98rem}
.header__phone svg{width:18px;height:18px;color:var(--accent-lift)}
.nav-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:2px}
.nav-toggle svg{width:22px;height:22px}

/* Mobile drawer */
.mobile-nav{display:none}
.mobile-backdrop{display:none}

@media(max-width:1000px){
  .nav,.header__phone{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(11,11,11,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:940;backdrop-filter:blur(2px)}
  .mobile-backdrop.open{opacity:1;visibility:visible}
  .mobile-nav{display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100%;width:min(88vw,380px);background:#000;z-index:950;transform:translateX(100%);transition:transform .4s var(--ease-out);box-shadow:var(--shadow-lg);overflow-y:auto}
  .mobile-nav.open{transform:translateX(0)}
  .mobile-nav__head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--gutter);border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
  .mobile-nav__head strong{font-family:"DM Sans";font-weight:800;font-size:1.05rem}
  .mobile-nav__close{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:2px;background:transparent;color:#fff}
  .mobile-nav__close svg{width:20px;height:20px}
  .mobile-nav ul{list-style:none;margin:0;padding:1rem var(--gutter);display:flex;flex-direction:column}
  .mobile-nav li{list-style:none}
  .mobile-nav a{display:block;font-family:"DM Sans";font-weight:600;font-size:1.12rem;padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.08);color:#E5E5E7}
  .mobile-nav .sub-menu a{font-size:.98rem;font-weight:500;padding-left:1rem;color:#A8A9AD}
  .mobile-nav__foot{margin-top:auto;padding:1.4rem var(--gutter);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.7rem}
  .mobile-nav__foot .btn{width:100%}
  .mobile-nav__foot .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:var(--hero-img-op)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,8,8,calc(var(--hero-overlay) * .78)),rgba(8,8,8,var(--hero-overlay))),
  linear-gradient(105deg,rgba(8,8,8,.55) 0%,transparent 60%)}
/* Timber-slat signature over the hero */
.hero__slats{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.028) 62px 64px);pointer-events:none}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5.5rem)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:"DM Sans";font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:.55rem 1rem;border-radius:100px;margin-bottom:1.6rem}
.hero__eyebrow b{color:var(--accent-lift);display:inline-flex;align-items:center;gap:.25rem}
.hero__eyebrow svg{width:14px;height:14px;fill:var(--gold);stroke:var(--gold)}
.hero h1{color:#fff;margin-bottom:1.2rem;font-size:clamp(2.1rem,7vw,var(--hero-fs));letter-spacing:-.03em}
.hero__sub{font-size:clamp(1.05rem,1.6vw,1.24rem);color:#D0D0D3;max-width:54ch;margin-bottom:2.2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:2rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14)}
.hero__trust .t{display:flex;flex-direction:column;line-height:1.1}
.hero__trust .t b{font-family:"DM Sans";font-weight:800;font-size:1.7rem;color:#fff}
.hero__trust .t span{font-size:.82rem;color:#9C9DA1;margin-top:.25rem}
.hero__stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}

/* Hero form card */
.hero-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(1.6rem,2.5vw,2.3rem);box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 18px)}
.hero-card h3{font-size:1.4rem;margin-bottom:.3rem}
.hero-card .small{color:var(--mute);font-size:.95rem;margin-bottom:1.3rem}

/* ---------- Marquee trust strip ---------- */
.trust-strip{background:var(--ink);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.trust-track{display:flex;gap:3.5rem;align-items:center;padding:1.1rem 0;white-space:nowrap;animation:marquee 32s linear infinite;width:max-content}
.trust-track:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
.trust-item{display:inline-flex;align-items:center;gap:.6rem;font-family:"DM Sans";font-weight:600;font-size:.98rem;color:#DDDDE0}
.trust-item svg{width:19px;height:19px;color:var(--accent-lift)}
.trust-item .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-lift);opacity:.6}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(1.2rem,2.5vw,1.8rem)}
.svc-card{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-3)}
.svc-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bone-2)}
.svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.svc-card:hover .svc-card__media img{transform:scale(1.05)}
.svc-card__ico{position:absolute;left:1.1rem;bottom:1.1rem;width:52px;height:52px;border-radius:14px;background:rgba(247,245,239,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:var(--shadow)}
.svc-card__ico svg{width:26px;height:26px}
.svc-card__body{padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;flex:1}
.svc-card__body h3{font-size:1.5rem;margin-bottom:.5rem}
.svc-card__body p{color:var(--slate);margin-bottom:1.1rem}
.svc-card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.svc-card__tags span{font-size:.76rem;font-weight:600;color:var(--accent-deep);background:var(--bone-2);border-radius:2px;padding:.34rem .7rem;letter-spacing:.01em}
.svc-card__link{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-family:"DM Sans";font-weight:700;color:var(--accent);font-size:.98rem}
.svc-card__link svg{width:18px;height:18px;transition:transform .3s var(--ease-out)}
.svc-card:hover .svc-card__link svg{transform:translateX(5px)}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--bone-2);box-shadow:var(--shadow-lg)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__badge{position:absolute;right:1.2rem;bottom:1.2rem;background:var(--ink);color:#fff;border-radius:16px;padding:1rem 1.3rem;text-align:center;box-shadow:var(--shadow-lg)}
.split__badge b{display:block;font-family:"DM Sans";font-weight:800;font-size:2rem;line-height:1;color:var(--accent-lift)}
.split__badge span{font-size:.78rem;color:#B5B5B8;margin-top:.3rem;display:block}
.checklist{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.75rem}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;font-weight:500}
.checklist svg{width:22px;height:22px;color:var(--accent);margin-top:2px;flex:none}

/* Service page: content left, sticky image+form aside right, aligned to top */
.split--svc{align-items:start;grid-template-columns:1.15fr .85fr}
.svc-aside{position:sticky;top:100px}
.svc-aside .split__media{aspect-ratio:4/3;box-shadow:var(--shadow)}
@media(max-width:960px){
  .split--svc{grid-template-columns:1fr}
  .svc-aside{position:static}
}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.2rem,2.5vw,1.8rem);counter-reset:step}
.step{position:relative;padding:2rem 1.8rem;background:#fff;border-radius:var(--radius);transition:transform .4s var(--ease-out),box-shadow .4s;box-shadow:var(--shadow-1)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.step__n{font-family:"DM Sans";font-weight:800;font-size:1rem;color:#fff;background:var(--accent);width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.step h3{font-size:1.15rem;margin-bottom:.4rem}
.step p{color:var(--slate);font-size:.96rem;margin:0}

/* ---------- Why-choose ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2vw,1.4rem)}
.why-card{padding:2.1rem 1.9rem;background:#fff;border-radius:var(--radius);transition:transform .4s var(--ease-out),box-shadow .4s;box-shadow:var(--shadow-1)}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.why-card__ico{width:54px;height:54px;border-radius:15px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;box-shadow:var(--shadow-accent)}
.why-card__ico svg{width:26px;height:26px}
.why-card h3{font-size:1.2rem;margin-bottom:.5rem}
.why-card p{color:var(--slate);font-size:.96rem;margin:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;grid-auto-flow:dense}
.gallery__item{position:relative;border:0;padding:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--bone-2);cursor:pointer}
.gallery__item:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;font-size:.82rem;font-weight:600;color:#fff;text-align:left;background:linear-gradient(0deg,rgba(8,8,8,.82),transparent);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.gallery__item:hover .gallery__cap{opacity:1;transform:translateY(0)}
@media(max-width:560px){.gallery__item:nth-child(6n+1){grid-column:span 1;grid-row:span 1}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,8,8,.92);display:none;align-items:center;justify-content:center;padding:5vw;backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:var(--shadow-lg)}
.lightbox__cap{position:absolute;bottom:5vw;left:0;right:0;text-align:center;color:#fff;font-weight:600}
.lightbox__close{position:absolute;top:4vw;right:5vw;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center}
.lightbox__close svg{width:24px;height:24px}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center}
.lightbox__nav svg{width:24px;height:24px}
.lightbox__nav.prev{left:3vw}.lightbox__nav.next{right:3vw}
.lightbox__nav.prev svg{transform:rotate(180deg)}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.review{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1.8rem 1.7rem;display:flex;flex-direction:column}
.section--ink .review{backdrop-filter:blur(4px)}
.review--light{background:#fff;border-color:var(--line)}
.review__stars{color:var(--gold);letter-spacing:2px;margin-bottom:1rem;font-size:1.05rem}
.review__body{font-size:1rem;line-height:1.65;margin-bottom:1.4rem;color:inherit}
.review--light .review__body{color:var(--ink)}
.review__by{margin-top:auto;display:flex;align-items:center;gap:.8rem}
.review__av{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"DM Sans";font-weight:800;font-size:1.05rem;flex:none}
.review__by b{display:block;font-family:"DM Sans";font-weight:700;font-size:.98rem}
.review__by span{font-size:.85rem;color:#9C9DA1}
.review--light .review__by span{color:var(--mute)}
.review__src{margin-left:auto;font-size:.78rem;opacity:.6}

/* ---------- Areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.6rem}
.area-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.1rem;background:#fff;border-radius:var(--radius);font-family:"DM Sans";font-weight:600;font-size:.92rem;color:var(--ink);transition:transform .25s var(--ease-out),box-shadow .25s,color .2s;box-shadow:var(--shadow-1)}
.area-chip svg{width:15px;height:15px;color:var(--accent)}
.area-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);color:var(--accent-deep)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:none;border:0;padding:1.4rem 3rem 1.4rem 0;font-family:"DM Sans";font-weight:700;font-size:1.1rem;color:var(--ink);position:relative;display:block}
.faq__q::after{content:"";position:absolute;right:.2rem;top:50%;width:13px;height:13px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease-out)}
.faq__item.open .faq__q::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
.faq__a p{padding:0 0 1.4rem;color:var(--slate);margin:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(2.8rem,6vw,4.5rem) clamp(1.6rem,5vw,4rem);text-align:center;overflow:hidden;isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.03) 54px 56px)}
.cta-band h2{color:#fff;max-width:20ch;margin:0 auto .8rem}
.cta-band p{color:#B5B5B8;max-width:56ch;margin:0 auto 2rem}
.cta-band .hero__actions{justify-content:center;margin:0}

/* ---------- Page hero ---------- */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;min-height:clamp(340px,42vw,480px);display:flex;align-items:center}
/* The wrap is a flex child here, so it would otherwise shrink to fit its
   content and sit centred. Force full width so the copy lines up with the
   same left gutter as every other section. */
.page-hero>.wrap,.page-hero>.wrap-wide{width:100%;flex:1 1 auto}
.page-hero__bg{position:absolute;inset:0;z-index:-2}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:var(--hero-img-op);transform:scale(1.06);filter:blur(1.5px) saturate(.95)}
/* Layered scrim: strong on the left where the copy sits, softer to the right,
   plus a base wash so any photo (or a placeholder) can never fight the text. */
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.82) 38%,rgba(8,8,8,.42) 70%,rgba(8,8,8,.30) 100%),
  linear-gradient(180deg,rgba(8,8,8,calc(var(--hero-overlay) * .55)),rgba(8,8,8,calc(var(--hero-overlay) * .9))),
  repeating-linear-gradient(90deg,transparent 0 56px,rgba(255,255,255,.028) 56px 58px)}
.page-hero--plain::after{background:
  linear-gradient(90deg,rgba(255,255,255,.03),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 56px,rgba(255,255,255,.03) 56px 58px)}
.page-hero__inner{padding:clamp(3.2rem,6vw,5rem) 0 clamp(3rem,5vw,4.4rem);max-width:54ch;position:relative}
/* Accent rule above the headline */
.page-hero__rule{width:56px;height:3px;background:var(--accent-lift);margin-bottom:1.4rem;transform:scaleX(0);transform-origin:left;animation:kfl-rule .9s var(--ease-out) .15s forwards}
@keyframes kfl-rule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.page-hero__rule{transform:scaleX(1);animation:none}}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,5.6vw,var(--hero-fs));margin-bottom:1rem;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.page-hero p{color:#D0D0D3;font-size:clamp(1.02rem,1.4vw,1.14rem);margin:0;max-width:52ch}
/* Trust markers under the hero copy */
.page-hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.page-hero__meta span{display:inline-flex;align-items:center;gap:.5rem;font-family:"DM Sans";font-weight:600;font-size:.9rem;color:#DDDDE0}
.page-hero__meta svg{width:17px;height:17px;color:var(--accent-lift)}
@media(max-width:620px){
  .page-hero{min-height:0}
  .page-hero__meta{gap:.7rem 1.4rem;margin-top:1.5rem}
  .page-hero__meta span{font-size:.84rem}
}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#9C9DA1;margin-bottom:1.4rem;flex-wrap:wrap}
.crumbs a{color:#C8C8CB;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* ---------- Prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:1.7rem;margin:2rem 0 .8rem}
.prose h3{font-size:1.3rem;margin:1.6rem 0 .6rem}
.prose p{color:var(--slate);margin-bottom:1.1rem}
.prose ul{padding-left:0;list-style:none;display:grid;gap:.6rem;margin:1.2rem 0}
.prose ul li{display:flex;gap:.7rem;align-items:flex-start;color:var(--slate)}
.prose ul li::before{content:"";width:20px;height:20px;flex:none;margin-top:3px;border-radius:6px;background:var(--bone-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A6B4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:14px;background-repeat:no-repeat;background-position:center}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact-info .info-item{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.contact-info .info-item:last-child{border-bottom:0}
.contact-info .info-item svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:2px}
.contact-info h4{margin:0 0 .2rem;font-size:1rem}
.contact-info a,.contact-info p{color:var(--slate);margin:0}
.contact-info a:hover{color:var(--accent)}
.contact-card{background:#fff;border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.3rem);box-shadow:var(--shadow-2)}

/* ---------- Forms ---------- */
.field{margin-bottom:.95rem}
.field label{display:block;font-family:"DM Sans";font-weight:600;font-size:.82rem;color:var(--slate);margin-bottom:.38rem}
.field input,.field select,.field textarea{width:100%;font-family:"Inter";font-size:1rem;color:var(--ink);background:var(--bone);border:1.5px solid var(--line);border-radius:12px;padding:.85rem .95rem;transition:border .2s,box-shadow .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:#A7A8AC}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.14);background:#fff}
.field textarea{min-height:104px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:480px){.field-row{grid-template-columns:1fr;gap:0}}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.8rem;color:var(--mute);margin:.6rem 0 0;text-align:center}
.form-msg{margin-top:.9rem;padding:.9rem 1rem;border-radius:12px;font-size:.94rem;font-weight:600;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#EEEEEC;color:var(--accent-deep)}
.form-msg.err{background:#FBEBE9;color:#A5372B}
.hero-card .field{margin-bottom:.75rem}
.hero-card .field input,.hero-card .field select{background:var(--bone)}

/* ---------- Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.6rem}
.post-card{background:#fff;border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s;box-shadow:var(--shadow-1)}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-3)}
.post-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--bone-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:1.5rem}
.post-card__meta{font-size:.82rem;color:var(--mute);margin-bottom:.5rem}
.post-card h3{font-size:1.2rem;margin-bottom:.5rem}
.post-card p{color:var(--slate);font-size:.95rem;margin-bottom:1rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#B5B5B8;padding-top:clamp(3.5rem,6vw,5rem)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,3rem);padding-bottom:3rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:"DM Sans";font-weight:800;font-size:1.15rem;color:#fff;margin-bottom:1rem}
.footer-brand__logo{height:var(--logo-hf);width:auto;max-width:210px;object-fit:contain}
.site-footer p{color:#9C9DA1;font-size:.94rem;line-height:1.7}
.footer-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.footer-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:#DDDDE0;background:rgba(255,255,255,.06);border-radius:100px;padding:.4rem .8rem}
.footer-pill svg{width:15px;height:15px;color:var(--accent-lift)}
.footer-col h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.footer-col a{color:#9C9DA1;font-size:.95rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.footer-contact li{display:flex;gap:.65rem;align-items:flex-start;color:#9C9DA1;font-size:.95rem}
.footer-contact svg{width:18px;height:18px;color:var(--accent-lift);flex:none;margin-top:2px}
.footer-contact a{color:#9C9DA1}
.footer-contact a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.6rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#828A78}
.footer-bottom a{color:#B5B5B8}
.footer-bottom a:hover{color:#fff}

/* Sticky mobile call bar */
.mobile-cta{display:none}
@media(max-width:700px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:930;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));background:#000;border-top:1px solid rgba(255,255,255,.12)}
  .mobile-cta .btn{width:100%;padding:.9rem 1rem;font-size:.95rem}
  body{padding-bottom:74px}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
/* Failsafe: if JS never adds .in (script blocked or errored), reveal anyway so
   content is never permanently hidden. Runs once, a moment after load. */
@keyframes kfl-reveal-fallback{to{opacity:1;transform:none}}
.reveal:not(.in){animation:kfl-reveal-fallback .7s var(--ease-out) 1.2s forwards}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;animation:none}}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero__inner{grid-template-columns:1fr;padding-top:2.6rem}
  .hero-card{order:2}
  .split{grid-template-columns:1fr;gap:2.2rem}
  .split__media{aspect-ratio:16/11;max-height:420px}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero__trust{gap:1.4rem}
  .hero__trust .t b{font-size:1.4rem}
}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:1100;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.divider-slats{height:4px;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 20px);opacity:.4;max-width:120px;margin:0 auto}

/* GDPR consent checkbox */
.field-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--slate);margin:.2rem 0 1rem;line-height:1.45;cursor:pointer}
.field-consent input{margin-top:.15rem;width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer}
.field-consent a{color:var(--accent);text-decoration:underline}
.hero-card .field-consent,.contact-card .field-consent{font-size:.78rem}

/* Cookie consent banner */
.kfl-cookie{position:fixed;left:0;right:0;bottom:0;z-index:1200;padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));background:rgba(11,11,11,.97);backdrop-filter:blur(8px);color:#DDDDE0;box-shadow:0 -12px 40px -12px rgba(0,0,0,.5)}
.kfl-cookie__inner{max-width:var(--maxw-wide);margin:0 auto;display:flex;align-items:center;gap:1.5rem;justify-content:space-between}
.kfl-cookie__text strong{display:block;font-family:"DM Sans";font-weight:700;color:#fff;font-size:.98rem;margin-bottom:.2rem}
.kfl-cookie__text p{margin:0;font-size:.86rem;color:#B5B5B8;line-height:1.5;max-width:74ch}
.kfl-cookie__text a{color:var(--accent-lift);text-decoration:underline}
.kfl-cookie__actions{display:flex;gap:.6rem;flex:none}
.kfl-cookie__actions .btn{padding:.7rem 1.3rem;font-size:.92rem}
.kfl-cookie__actions .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.kfl-cookie__actions .btn--ghost:hover{background:#fff;color:var(--ink)}
@media(max-width:760px){
  .kfl-cookie__inner{flex-direction:column;align-items:stretch;gap:.9rem}
  .kfl-cookie__actions{justify-content:stretch}
  .kfl-cookie__actions .btn{flex:1}
  .kfl-cookie{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
}
/* Lift the sticky mobile call bar above the cookie bar when both show */
@media(max-width:700px){ .kfl-cookie:not([hidden]) ~ .mobile-cta{display:none} }

/* ============================================================
   Welch Standard flourishes
   ============================================================ */

/* Film grain on dark sections */
.section--ink,.hero,.cta-band,.page-hero{position:relative}
.section--ink::before,.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}
.section--ink>.wrap,.section--ink>.wrap-wide,.cta-band>*{position:relative;z-index:1}

/* Angled section edge (brand-motif roofline) */
.edge-top{position:relative}
.edge-top::before{content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(28px,5vw,64px);background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%);transform:translateY(-99%);z-index:2}

/* Glass panel on dark imagery */
.glass{background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* Magnetic accent button micro-interaction */
.btn{will-change:transform}
.btn--magnetic{transition:transform .25s var(--ease-out),box-shadow .35s var(--ease-out),background .2s}

/* Clip-path image wipe on reveal */
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out)}
.wipe.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.wipe{clip-path:none !important}}

/* Masked per-line heading reveal */
.reveal-h{overflow:hidden}
.reveal-h>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.reveal-h.in>span{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal-h>span{transform:none}}

/* Counter block */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(1rem,3vw,2.5rem)}
.counter b{display:block;font-family:"DM Sans";font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.section--ink .counter b{color:#fff}
.counter span{display:block;margin-top:.5rem;font-size:.92rem;color:var(--slate)}
.section--ink .counter span{color:#B5B5B8}
.counter{position:relative;padding-left:1.2rem}
.counter::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;background:var(--accent)}
.section--ink .counter::before{background:var(--accent-lift)}

/* ============================================================
   Service page layout
   ============================================================ */

/* Intro: label rail left, oversized lead statement right */
.svc-intro{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.svc-intro__grid{display:grid;grid-template-columns:minmax(140px,.4fr) 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.svc-intro__label{display:flex;flex-direction:column;gap:1rem;padding-top:.5rem}
.svc-intro__label .eyebrow{margin:0}
.svc-intro__ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-accent)}
.svc-intro__ico svg{width:32px;height:32px}
.svc-lead{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:0 0 1.8rem;max-width:24ch}
.svc-intro__actions{display:flex;flex-wrap:wrap;gap:.9rem}
@media(max-width:760px){
  .svc-intro__grid{grid-template-columns:1fr;gap:1.4rem}
  .svc-intro__ico{width:54px;height:54px}
}

/* Feature: large image one side, body the other, alternating room to breathe */
.svc-feature__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.svc-feature__media{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-3)}
.svc-feature__media img{width:100%;height:100%;object-fit:cover}
.svc-feature__media figcaption{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;background:rgba(11,11,11,.82);backdrop-filter:blur(8px);color:#fff;font-family:"DM Sans";font-weight:600;font-size:.82rem;padding:.6rem .9rem;border-radius:var(--radius)}
.svc-feature__media figcaption svg{width:16px;height:16px;color:var(--accent-lift)}
.svc-feature__body h2{margin-bottom:1.1rem}
.svc-feature__body .prose{max-width:52ch}
@media(max-width:860px){
  .svc-feature__grid{grid-template-columns:1fr;gap:1.8rem}
  .svc-feature__media{aspect-ratio:16/10}
}

/* Offer grid: numbered cards */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.offer{background:var(--bone);padding:1.8rem 1.7rem;display:flex;gap:1.1rem;align-items:flex-start;transition:background .3s}
.offer:hover{background:#fff}
.offer__n{font-family:"DM Sans";font-weight:800;font-size:1.1rem;color:var(--accent);flex:none;line-height:1.2}
.offer p{margin:0;font-weight:500;color:var(--ink)}

/* Quote band */
.svc-quote{background:var(--ink);color:#D6D6D9;position:relative;overflow:hidden}
.svc-quote::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}
.svc-quote>.wrap{position:relative;z-index:1}
.svc-quote__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.svc-quote__copy h2{color:#fff;margin-bottom:.8rem}
.svc-quote__copy .eyebrow{color:var(--accent-lift)}
.svc-quote__copy .eyebrow::before{background:var(--accent-lift)}
.svc-quote__copy .lede{color:#B5B5B8;margin-bottom:1.4rem}
.svc-quote__copy .checklist li{color:#DDDDE0}
.svc-quote__copy .checklist svg{color:var(--accent-lift)}
.svc-quote__call{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-family:"DM Sans";font-weight:700;font-size:1.15rem;color:#fff}
.svc-quote__call svg{width:20px;height:20px;color:var(--accent-lift)}
@media(max-width:860px){.svc-quote__grid{grid-template-columns:1fr;gap:2rem}}

/* No uploaded photo yet: keep layouts clean rather than showing placeholders */
.split:not(:has(.split__media)){grid-template-columns:1fr;max-width:72ch}
.svc-card--noimg .svc-card__body{padding-top:1.9rem}
.svc-card--noimg .svc-card__body h3{display:flex;align-items:center;gap:.6rem}
.svc-card--noimg .svc-card__body h3::before{content:"";width:34px;height:3px;background:var(--accent);flex:none}
.svc-aside:not(:has(.split__media)) .svc-card__tags{margin-bottom:1.2rem}
/* Eyebrow icon sizing (was inheriting a large default) */
.eyebrow svg{width:20px;height:20px;flex:none}
.split__copy>.eyebrow svg{width:22px;height:22px}

/* ---------- Form conversion elements ---------- */
.field label .opt{font-weight:500;color:var(--mute);text-transform:none;letter-spacing:0;font-size:.74rem}
.hero-card .small{display:flex;align-items:center;gap:.4rem;color:var(--accent-deep);font-weight:600;font-size:.88rem;margin-bottom:1.2rem}
.hero-card .small svg{width:16px;height:16px;color:var(--accent)}

/* Tap-to-choose service chips instead of a dropdown */
.choice-grid{display:flex;flex-wrap:wrap;gap:.45rem}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:inline-block;padding:.6rem .9rem;background:var(--bone);border:1.5px solid var(--line);border-radius:2px;font-size:.88rem;font-weight:600;color:var(--slate);cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.choice span:hover{border-color:var(--accent);color:var(--accent-deep)}
.choice input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.choice input:focus-visible+span{outline:2.5px solid var(--accent);outline-offset:2px}

/* Trust row under the submit button */
.form-trust{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:.9rem 0 0;padding:0;justify-content:center}
.form-trust li{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--mute)}
.form-trust svg{width:14px;height:14px;color:var(--accent)}
.form-note{margin-top:.6rem}

/* Inline validation */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C0463A;background:#fdf6f5}
.field-error{display:block;margin-top:.3rem;font-size:.78rem;font-weight:600;color:#A5372B}

/* Service card with no photo yet: branded tile so the grid stays even */
.svc-card__tile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:
  linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%),
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.03) 46px 48px);color:rgba(255,255,255,.14)}
.svc-card__tile svg{width:78px;height:78px}
.svc-card--noimg .svc-card__body{padding-top:1.5rem}
.svc-card--noimg .svc-card__body h3::before{display:none}

/* ============================================================
   Black and white system: buttons invert on dark grounds
   ============================================================ */
.btn{background:var(--ink);color:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.btn:hover{background:#000;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.site-header .btn,.hero .btn:not(.btn--ghost):not(.btn--light),.section--ink .btn:not(.btn--ghost):not(.btn--light),
.cta-band .btn:not(.btn--ghost):not(.btn--light),.svc-quote .btn:not(.btn--ghost):not(.btn--light),
.page-hero .btn:not(.btn--ghost):not(.btn--light),.mobile-nav .btn:not(.btn--ghost),.site-footer .btn:not(.btn--ghost){
  background:#fff;color:#0B0B0B;box-shadow:0 14px 34px -18px rgba(255,255,255,.35)}
.site-header .btn:hover,.hero .btn:not(.btn--ghost):not(.btn--light):hover,.section--ink .btn:not(.btn--ghost):not(.btn--light):hover,
.cta-band .btn:not(.btn--ghost):not(.btn--light):hover,.svc-quote .btn:not(.btn--ghost):not(.btn--light):hover,
.page-hero .btn:not(.btn--ghost):not(.btn--light):hover,.mobile-nav .btn:not(.btn--ghost):hover{background:#E8E8E8;color:#000}
/* Forms always sit on a white card, so their submit stays black */
.hero-card .btn,.contact-card .btn{background:#0B0B0B !important;color:#fff !important;box-shadow:0 14px 30px -16px rgba(0,0,0,.55) !important}
.hero-card .btn:hover,.contact-card .btn:hover{background:#000 !important}
.cta-band .btn--light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.cta-band .btn--light:hover{background:#fff;color:#0B0B0B}
/* Mobile call bar: Call is white, Quote outlined */
.mobile-cta .btn{background:#fff;color:#0B0B0B}
.mobile-cta .btn--ink{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
/* Gold stays only for star ratings */
.review__stars,.hero__stars,.hero__eyebrow svg{color:#E4B84A}

/* ============================================================
   Upgraded sections
   ============================================================ */

/* Process timeline: outlined numerals joined by a rule that draws in */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem);position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:2.15rem;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out) .2s}
.timeline.in::before{transform:scaleX(1)}
.timeline__step{position:relative;padding-top:4.4rem;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i) * .12s + .3s)}
.timeline.in .timeline__step{opacity:1;transform:none}
.timeline__n{position:absolute;top:0;left:0;font-family:"DM Sans";font-weight:800;font-size:3.6rem;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ink);background:var(--bone);padding-right:.6rem}
.section--paper .timeline__n{background:var(--bone-2)}
.timeline__step h3{font-size:1.18rem;margin-bottom:.45rem}
.timeline__step p{color:var(--slate);font-size:.96rem;margin:0}
@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr;row-gap:2.6rem}.timeline::before{display:none}}
@media(max-width:520px){.timeline{grid-template-columns:1fr}}

/* Why choose us: bento with a black feature tile */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:clamp(.9rem,1.6vw,1.2rem)}
.bento__tile{background:#fff;padding:clamp(1.6rem,2.4vw,2.2rem);border-radius:var(--radius);box-shadow:var(--shadow-1);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);position:relative;overflow:hidden}
.bento__tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.bento__tile--feature{grid-row:span 2;background:var(--ink);color:#C8C8CB;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px}
.bento__tile--feature::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.035) 46px 48px);pointer-events:none}
.bento__tile--feature h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem)}
.bento__tile h3{font-size:1.15rem;margin:.9rem 0 .45rem;position:relative}
.bento__tile p{margin:0;color:var(--slate);font-size:.95rem;position:relative}
.bento__tile--feature p{color:#B5B5B8;font-size:1rem}
.bento__ico{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:var(--radius);position:relative}
.bento__ico svg{width:22px;height:22px}
.bento__tile--feature .bento__ico{background:#fff;color:var(--ink)}
.bento__stat{position:relative;display:block;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.15);font-size:.9rem;color:#B5B5B8}
.bento__stat b{font-family:"DM Sans";font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-.03em;margin-right:.35rem;vertical-align:-.15em}
.bento__tile:last-child{grid-column:span 2}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento__tile--feature{grid-row:auto;grid-column:span 2;min-height:0}.bento__tile:last-child{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento__tile--feature,.bento__tile:last-child{grid-column:auto}}

/* Reviews: editorial quote glyph, featured first card */
.review{position:relative;border-radius:var(--radius)}
.review__q{position:absolute;top:.4rem;right:1.2rem;font-family:Georgia,serif;font-size:5rem;line-height:1;opacity:.12;pointer-events:none}
.section--ink .review{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.section--ink .review__q{color:#fff}
.review--light .review__q{color:var(--ink)}
.review__av{background:var(--ink);color:#fff}
.section--ink .review__av{background:#fff;color:var(--ink)}
.review__body{margin:0}
.review{margin:0}
.reviews{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.section--ink .review--feature{background:rgba(255,255,255,.09)}
.review--light.review--feature{background:var(--ink);color:#D0D0D3}.review--light.review--feature .review__body,.review--light.review--feature .review__by b{color:#fff}.review--light.review--feature .review__av{background:#fff;color:var(--ink)}.review--light.review--feature .review__q{color:#fff}

/* FAQ: crisper rows with a plus that turns to a cross */
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{padding-right:3.4rem}
.faq__q::after{content:"";width:16px;height:16px;border:0;border-radius:0;background:
  linear-gradient(var(--ink),var(--ink)) center/16px 1.5px no-repeat,
  linear-gradient(var(--ink),var(--ink)) center/1.5px 16px no-repeat;
  transform:translateY(-50%) rotate(0);transition:transform .35s var(--ease-out)}
.faq__item.open .faq__q::after{transform:translateY(-50%) rotate(135deg)}

/* Area chips in mono */
.area-chip svg{color:var(--ink)}
.area-chip:hover{background:var(--ink);color:#fff}
.area-chip:hover svg{color:#fff}

/* ============================================================
   Modern motion
   ============================================================ */
/* Scroll progress hairline under the header */
.kfl-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;z-index:1001;pointer-events:none;mix-blend-mode:difference}
/* Image reveal wipe for in-flow images, with a failsafe if JS never runs */
.img-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
.img-wipe.in{clip-path:inset(0 0 0 0)}
.img-wipe img{transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.img-wipe.in img{transform:scale(1)}
@keyframes kfl-wipe-fallback{to{clip-path:inset(0 0 0 0)}}
.img-wipe:not(.in){animation:kfl-wipe-fallback 1s var(--ease-out) 1.6s forwards}
/* Card image zoom and lift */
.svc-card__media img{transition:transform .9s var(--ease-out),filter .6s}
.svc-card:hover .svc-card__media img{transform:scale(1.06)}
/* Magnetic buttons */
.btn--mag{transition:transform .25s var(--ease-out),background .2s,box-shadow .35s}
/* Gallery items: greyscale until hover for a premium mono feel */
.gallery__item img{filter:grayscale(.15) contrast(1.02);transition:transform .7s var(--ease-out),filter .5s}
.gallery__item:hover img{filter:none}
@media (prefers-reduced-motion:reduce){
  .timeline::before,.timeline__step{transition:none;opacity:1;transform:none}
  .timeline::before{transform:scaleX(1)}
  .img-wipe,.img-wipe img{clip-path:none;transform:none;transition:none;animation:none}
  .kfl-progress{display:none}
}
.faq{margin-left:0;margin-right:0;max-width:900px}