:root{
  /* ---- The depth palette — King Tide Brand Standards v1.2 ----
     Read as a water column: foam at the surface, abyss at the bottom.
     Mix: 60% navy/abyss ground · 25% foam/mist · 10% king/harbor
          · 4% spray · 1% crown gold — gold is a spice, one per section. */
  --kt-foam:#FFFFFF;    /* Foam White  — body text on navy, negative space */
  --kt-mist:#E2E4E8;    /* Mist        — alternating section ground, dividers */
  --kt-crown:#FDC64E;   /* Crown Gold  — tagline, guarantees, one CTA per layout */
  --kt-spray:#00B3FF;   /* Spray Cyan  — rules, icons, links. On navy only. */
  --kt-harbor:#0057A9;  /* Harbor Blue — buttons and links on white */
  --kt-king:#014D98;    /* King Blue   — section blocks, wave gradients */
  --kt-navy:#001230;    /* Tide Navy   — the signature color */
  --kt-abyss:#000A1C;   /* Abyss       — deepest ground, footer */
  --kt-gold-2:#C87201;  /* Deep Gold   — the only gold allowed to sit on white */
  --kt-slate:#8FA3B8;   /* Slate       — captions, fine print, borders */

  /* elevation on the dark ground: base → elevated → floating */
  --navy-2:#04193C;
  --navy-3:#082250;

  --ink:var(--kt-navy);
  --ink-soft:rgba(0,18,48,.78);
  --ink-mute:rgba(0,18,48,.58);
  --line:rgba(0,18,48,.13);
  --line-2:rgba(0,18,48,.24);
  --on-navy:var(--kt-foam);
  --on-navy-soft:rgba(226,228,232,.80);
  --on-navy-mute:rgba(143,163,184,.92);
  --on-navy-line:rgba(143,163,184,.22);
  --on-navy-line-2:rgba(143,163,184,.38);

  /* squared-off corners read composed; the pill reads promotional */
  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-pill:999px;

  /* shadows are tinted with the ground they fall on, never neutral grey */
  --sh-1:0 1px 2px rgba(0,18,48,.06), 0 4px 14px -8px rgba(0,18,48,.22);
  --sh-2:0 2px 6px rgba(0,18,48,.07), 0 18px 38px -20px rgba(0,18,48,.34);
  --sh-3:0 4px 12px rgba(0,18,48,.10), 0 34px 64px -30px rgba(0,18,48,.52);
  --sh-navy:0 24px 60px -34px rgba(0,10,28,.9);

  --gap-1:8px; --gap-2:14px; --gap-3:20px; --gap-4:30px; --gap-5:42px;
  --section-y:clamp(40px,4.2vw,62px);
  --pad-x:clamp(20px,4vw,44px);
  --ease:cubic-bezier(.22,1,.36,1);

  --font-display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Jost","Futura","Century Gothic","Avenir Next",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:124px}
body{
  margin:0;background:var(--kt-foam);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ---------------- reset ----------------
   The Tailwind CDN used to inject its Preflight reset, and the site was
   quietly depending on three of its rules. The CDN was removed because no
   Tailwind utility is used anywhere on the site; these are the parts that
   were load-bearing and have to stay.

   height:auto is the critical one. Without it an <img> keeps the height
   from its width/height attributes even when max-width shrinks the width,
   so every logo and frond rendered at its full attribute height. */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* The fourth Preflight rule the site leaned on. The browser's own
   [hidden] rule is only display:none at UA level, so ANY author
   display declaration beats it — .kt-form is display:grid and
   .kt-form-done is display:flex, so hiding them did nothing and the
   success panel showed permanently. !important makes hidden mean
   hidden regardless of what else is declared. */
[hidden]{display:none!important}
::selection{background:var(--kt-navy);color:var(--kt-crown)}

.kt-wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad-x)}

/* ---------------- type ----------------
   Two faces. Montserrat Bold carries the name; Jost explains, prices and
   instructs. Montserrat sets wide and heavy, so the display scale sits
   below where the serif it replaced needed to be, and headings track
   NEGATIVE — a geometric sans tightens at display size where an old-style
   serif wanted air. Headings are mixed case: Montserrat Bold above about
   40px reads as a shout in all caps. Small tracked caps are still used, but
   only for eyebrows, the tagline and labels, where the size keeps them calm.
   Phone numbers, prices and psi ratings stay in Jost 500. */
.kt-h1,.kt-h2,.kt-h3{
  font-family:var(--font-display);font-weight:700;
  margin:0;color:var(--kt-navy);text-wrap:balance;
}
.kt-h1{font-size:clamp(36px,5vw,66px);line-height:1.05;letter-spacing:-.028em}
.kt-h2{font-size:clamp(29px,3.7vw,46px);line-height:1.09;letter-spacing:-.024em}
.kt-h3{font-size:clamp(19px,1.8vw,23px);line-height:1.28;letter-spacing:-.012em}
/* headings carry a second line in the accent tone — King Blue on foam,
   Crown Gold on navy, since gold on white is one of the two traps */
.kt-accent{
  color:var(--kt-king);display:block;font-size:.6em;font-weight:600;letter-spacing:-.015em;margin-top:.32em;
}
/* gold is the tagline's alone; every other accent line on navy is Spray Cyan */
.kt-split .kt-h2{font-size:clamp(27px,3.2vw,40px)}
.kt-on-navy .kt-h1,.kt-on-navy .kt-h2,.kt-on-navy .kt-h3{color:var(--on-navy)}
.kt-on-navy .kt-accent{color:var(--kt-spray)}
.kt-h4{font-family:var(--font-body);font-weight:600;font-size:16.5px;line-height:1.4;margin:0 0 6px;color:var(--kt-navy)}
.kt-eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--kt-harbor);margin:0 0 var(--gap-2);
}
.kt-on-navy .kt-eyebrow{color:var(--kt-spray)}
.kt-lede{font-size:18px;line-height:1.7;max-width:58ch;color:var(--ink-soft);margin:0;font-weight:300}
.kt-body{max-width:68ch;margin:0;color:var(--ink-soft)}
.kt-on-navy .kt-lede,.kt-on-navy .kt-body{color:var(--on-navy-soft)}
.kt-center{text-align:center;margin-inline:auto}
.kt-num{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em}
a[href^="tel:"],a[href^="sms:"]{white-space:nowrap}

/* ---------------- the waterline ----------------
   The brand's own section device: the high-water line drawn under the
   title, bright at the mark and dissolving out toward the open water. */
.kt-waterline{
  height:2px;border:0;width:132px;margin:var(--gap-3) 0 0;
  background:linear-gradient(90deg,var(--kt-spray),var(--kt-king) 55%,rgba(1,77,152,0));
  position:relative;
}
.kt-waterline::after{
  content:"";position:absolute;left:0;right:0;top:3px;height:1px;
  background:linear-gradient(90deg,rgba(0,179,255,.34),rgba(1,77,152,0));
}
.kt-on-navy .kt-waterline{background:linear-gradient(90deg,var(--kt-crown),var(--kt-spray) 45%,rgba(0,179,255,0))}
.kt-waterline-c{
  margin-inline:auto;width:190px;
  background:linear-gradient(90deg,rgba(1,77,152,0),var(--kt-spray) 30%,var(--kt-king) 70%,rgba(1,77,152,0));
}
.kt-waterline-c::after{background:linear-gradient(90deg,rgba(0,179,255,0),rgba(0,179,255,.3),rgba(0,179,255,0))}
.kt-on-navy .kt-waterline-c{background:linear-gradient(90deg,rgba(253,198,78,0),var(--kt-crown) 30%,var(--kt-spray) 70%,rgba(0,179,255,0))}

/* ---------------- surfaces ---------------- */
.kt-section{padding-block:var(--section-y);position:relative;overflow:hidden}
.kt-canvas{background:var(--kt-foam)}
.kt-glass{background:var(--kt-mist)}
.kt-navy{background:var(--kt-navy);color:var(--on-navy)}
/* depth on the dark grounds: two blues dissolved into the navy, plus a
   grain plate, so the ink never flattens into a single printed slab */
.kt-navy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(110% 78% at 12% 0%,rgba(1,77,152,.55),transparent 62%),
    radial-gradient(80% 62% at 92% 108%,rgba(0,87,169,.36),transparent 66%);
}
.kt-grain{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay}
.kt-frond{position:absolute;pointer-events:none;opacity:.11;width:min(420px,42vw);z-index:0}
.kt-navy .kt-frond,.kt-footer .kt-frond,.kt-quote-panel .kt-frond{opacity:.16;filter:brightness(2.2) saturate(1.6)}
.kt-frond-tr{top:-40px;right:-70px;transform:scaleX(-1)}
.kt-frond-bl{bottom:-50px;left:-80px;transform:rotate(-14deg)}
.kt-section > .kt-wrap{position:relative;z-index:1}

/* ---------------- buttons ----------------
   Jost, wide-tracked caps, squared. Harbor Blue on white, Crown Gold
   on the one primary CTA. Every state accounted for. */
.kt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;padding:16px 30px;border:0;
  border-radius:var(--r-sm);cursor:pointer;line-height:1;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s linear,color .2s linear;
}
@media (prefers-reduced-motion:no-preference){
  .kt-btn:hover{transform:translateY(-2px)}
  .kt-btn:active{transform:translateY(0)}
}
.kt-btn:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:3px}
.kt-navy .kt-btn:focus-visible,.kt-hero .kt-btn:focus-visible,.kt-quote-panel .kt-btn:focus-visible{outline-color:var(--kt-spray)}
.kt-callout .kt-btn:focus-visible{outline-color:var(--kt-crown)}
.kt-btn-gold{background:var(--kt-crown);color:var(--kt-navy);box-shadow:0 10px 26px -14px rgba(253,198,78,.95)}
.kt-btn-gold:hover{background:#FFD478;box-shadow:0 14px 32px -14px rgba(253,198,78,1)}
.kt-btn-gold:active{background:#F2B93F}
.kt-btn-harbor{background:var(--kt-harbor);color:var(--kt-foam);box-shadow:0 10px 26px -14px rgba(0,87,169,.9)}
.kt-btn-harbor:hover{background:#0066C6}
.kt-btn-harbor:active{background:var(--kt-king)}
.kt-btn-outline{background:transparent;color:var(--kt-navy);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.kt-btn-outline:hover{background:var(--kt-navy);color:var(--kt-foam);box-shadow:inset 0 0 0 1.5px var(--kt-navy)}
.kt-btn-ghost-light{background:transparent;color:var(--kt-foam);box-shadow:inset 0 0 0 1px rgba(226,228,232,.55)}
.kt-btn-ghost-light:hover{background:var(--kt-foam);color:var(--kt-navy);box-shadow:inset 0 0 0 1px var(--kt-foam)}
.kt-btn-ghost-light:active{background:var(--kt-mist)}
.kt-link{
  font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kt-harbor);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  transition:color .18s linear;
}
.kt-link svg{transition:transform .3s var(--ease)}
.kt-link:hover{color:var(--kt-king)}
.kt-link:hover svg{transform:translateX(5px)}
.kt-link:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:4px;border-radius:2px}
.kt-on-navy .kt-link{color:var(--kt-spray)}
.kt-on-navy .kt-link:hover{color:var(--kt-crown)}

/* ---------------- utility bar + header ---------------- */
.kt-utility{background:var(--kt-abyss);color:var(--on-navy-mute);font-size:13.5px}
.kt-utility-in{display:flex;align-items:center;gap:var(--gap-3);min-height:44px;flex-wrap:wrap;padding-block:7px}
.kt-social{display:flex;gap:7px;list-style:none;margin:0;padding:0}
.kt-social a{
  display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);
  background:rgba(143,163,184,.12);color:var(--on-navy);transition:background-color .18s linear,color .18s linear;
}
.kt-social a:hover{background:var(--kt-spray);color:var(--kt-navy)}
.kt-social a:focus-visible{outline:2px solid var(--kt-spray);outline-offset:2px}
.kt-utility-note{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.kt-utility-phone{
  margin-left:auto;display:flex;align-items:center;gap:9px;color:var(--on-navy);
  font-weight:500;text-decoration:none;font-size:15.5px;transition:color .18s linear;
}
.kt-utility-phone:hover{color:var(--kt-crown)}
.kt-utility-phone:focus-visible{outline:2px solid var(--kt-spray);outline-offset:3px;border-radius:3px}

.kt-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
.kt-header-in{display:flex;align-items:center;gap:var(--gap-3);min-height:92px}
.kt-logo{flex:none;text-decoration:none;display:block}
/* The lockup is near-square (900x837), so height drives width: at 62px tall
   it was only 67px wide, against the 160px screen minimum the standards set
   for the primary lockup. This is as far as it goes before a sticky header
   starts eating the viewport — the real fix is the horizontal lockup. */
.kt-logo img{height:72px;width:auto}
.kt-logo:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:4px;border-radius:3px}
.kt-nav{display:none;align-items:center;gap:4px;margin-left:auto}
.kt-nav a{
  font-family:var(--font-body);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:10px 13px;position:relative;
  transition:color .18s linear;
}
.kt-nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--kt-spray);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.kt-nav a:hover{color:var(--kt-navy)}
.kt-nav a:hover::after{transform:scaleX(1)}
.kt-nav a:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:2px;border-radius:2px}
.kt-header-cta{display:none;flex:none}
.kt-burger{
  margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:12px;background:none;border:1px solid var(--line-2);
  border-radius:var(--r-sm);cursor:pointer;flex:none;
}
.kt-burger span{display:block;height:1.5px;background:var(--kt-navy);transition:transform .3s var(--ease),opacity .2s linear}
.kt-burger:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:3px}
.kt-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.kt-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kt-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.kt-mobile-nav{display:none;border-top:1px solid var(--line);background:var(--kt-foam);padding:8px var(--pad-x) 20px}
.kt-mobile-nav.is-open{display:block}
.kt-mobile-nav a{
  display:block;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kt-navy);text-decoration:none;padding:15px 4px;border-bottom:1px solid var(--line);
}
.kt-mobile-nav a:last-child{border-bottom:0;color:var(--kt-harbor)}
.kt-mobile-nav a:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:-2px}
@media (min-width:1120px){
  .kt-nav{display:flex}
  .kt-header-cta{display:inline-flex}
  .kt-burger{display:none}
  .kt-mobile-nav{display:none !important}
  .kt-header-in{min-height:108px}
  .kt-logo img{height:88px}
}

/* ---------------- hero ---------------- */
.kt-hero{position:relative;display:grid;align-items:center;background:var(--kt-abyss);overflow:hidden}
.kt-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a navy plate at 80–92% is what the guide asks for over any photo */
.kt-hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(0,10,28,.96) 0%,rgba(0,18,48,.90) 46%,rgba(0,18,48,.62) 100%),
    radial-gradient(90% 70% at 8% 8%,rgba(1,77,152,.45),transparent 60%),
    radial-gradient(70% 60% at 96% 100%,rgba(0,87,169,.30),transparent 62%);
}
.kt-hero-in{position:relative;z-index:2;display:grid;gap:clamp(30px,4vw,56px);align-items:center;grid-template-columns:1fr;padding-block:clamp(56px,7vw,104px)}
@media (min-width:940px){.kt-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.kt-hero .kt-h1{color:var(--on-navy)}
.kt-hero .kt-accent{color:var(--kt-crown);letter-spacing:.16em;font-size:.3em;margin-top:.85em;text-transform:uppercase;font-weight:700}
.kt-hero-sub{font-size:18px;line-height:1.7;font-weight:300;color:var(--on-navy-soft);margin:22px 0 0;max-width:52ch}
.kt-hero-cta{display:flex;flex-wrap:wrap;gap:var(--gap-2);margin-top:var(--gap-4)}
/* never float the mark loose over a photo — it sits on its own navy plate */
.kt-hero-logo{
  background:linear-gradient(160deg,var(--navy-2),var(--kt-navy));
  border:1px solid var(--on-navy-line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);box-shadow:var(--sh-navy);
  justify-self:center;max-width:400px;width:100%;position:relative;
}
.kt-hero-logo::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:18px;width:44px;height:2px;
  background:var(--kt-crown);
}
@media (max-width:520px){
  .kt-hero-cta{flex-direction:column;align-items:stretch}
  .kt-hero-cta .kt-btn{width:100%}
}

/* ---------------- the tideline band ----------------
   The technical differentiator in Crown Gold on King Blue — the one gold
   moment in this band. Small enough that caps still read as composed. */
.kt-callout{background:var(--kt-king);color:var(--on-navy);position:relative;overflow:hidden}
.kt-callout::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 200% at 0% 50%,rgba(0,10,28,.55),transparent 70%);
}
.kt-callout-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-3);padding-block:26px;position:relative;z-index:1}
.kt-callout p{
  margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.045em;
  font-size:clamp(15px,1.5vw,21px);line-height:1.4;flex:1;min-width:300px;color:var(--kt-crown);
}
.kt-callout .kt-btn-outline{color:var(--kt-foam);box-shadow:inset 0 0 0 1px rgba(226,228,232,.6)}
.kt-callout .kt-btn-outline:hover{background:var(--kt-foam);color:var(--kt-king);box-shadow:inset 0 0 0 1px var(--kt-foam)}

/* ---------------- split promise ---------------- */
.kt-split{display:grid;gap:clamp(32px,4.5vw,64px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.kt-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kt-checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-3)}
.kt-checks li{display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start;padding-bottom:var(--gap-3);border-bottom:1px solid var(--line)}
.kt-checks li:last-child{border-bottom:0;padding-bottom:0}
.kt-tick{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--kt-king);color:var(--kt-foam);margin-top:2px;flex:none;
}
.kt-checks b{
  font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kt-navy);display:block;margin-bottom:4px;
}
.kt-checks span span{color:var(--ink-mute);font-size:15.5px;line-height:1.65;display:block;font-weight:300}
.kt-badges{display:flex;flex-wrap:wrap;gap:var(--gap-2);margin-top:var(--gap-4)}
.kt-badge{
  display:flex;align-items:center;gap:12px;background:var(--kt-foam);border:1px solid var(--line);
  border-left:2px solid var(--kt-spray);border-radius:var(--r-sm);padding:13px 18px;box-shadow:var(--sh-1);
}
.kt-badge svg{color:var(--kt-king);flex:none}
.kt-badge b{font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kt-navy);display:block;line-height:1.4}
.kt-badge span span{font-size:12.5px;color:var(--ink-mute);display:block;font-weight:300;line-height:1.5}

/* ---------------- service cards ---------------- */
.kt-cards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:640px){.kt-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kt-cards{grid-template-columns:repeat(3,1fr)}}
.kt-card{
  background:var(--kt-foam);padding:38px 30px 32px;text-align:center;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background-color .3s var(--ease);
}
.kt-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--kt-spray),var(--kt-king));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
@media (prefers-reduced-motion:no-preference){
  .kt-card:hover::before{transform:scaleX(1)}
  .kt-card:hover .kt-card-icon{transform:translateY(-3px)}
}
.kt-card:hover{background:#FAFBFC}
.kt-card-icon{
  width:64px;height:64px;margin:0 auto 6px;border-radius:var(--r-pill);
  background:var(--kt-mist);display:grid;place-items:center;color:var(--kt-king);
  transition:transform .35s var(--ease);
}
.kt-card p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-soft);font-weight:300}
.kt-card-foot{margin-top:auto;padding-top:16px}
.kt-card-commercial::before{background:linear-gradient(90deg,var(--kt-crown),var(--kt-gold-2))}
.kt-card-commercial .kt-card-icon{background:#F7F0E1;color:var(--kt-gold-2)}

/* ---------------- quote panel ---------------- */
.kt-quote-panel{
  background:linear-gradient(165deg,var(--navy-2),var(--kt-navy) 60%,var(--kt-abyss));
  color:var(--on-navy);border:1px solid var(--on-navy-line);border-radius:var(--r-lg);
  padding:clamp(30px,4.4vw,64px);position:relative;overflow:hidden;box-shadow:var(--sh-navy);
}
.kt-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap-2);position:relative;z-index:1}
.kt-field{display:flex;flex-direction:column;gap:8px}
.kt-field-wide{grid-column:1/-1}
.kt-field label{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-mute)}
.kt-field input,.kt-field select,.kt-field textarea{
  font-family:var(--font-body);font-size:16px;font-weight:400;color:var(--kt-navy);background:var(--kt-foam);
  border:1px solid transparent;border-radius:var(--r-sm);padding:14px 16px;width:100%;
  transition:border-color .18s linear,box-shadow .18s linear;
}
.kt-field textarea{resize:vertical;min-height:100px;line-height:1.6}
.kt-field input::placeholder,.kt-field textarea::placeholder{color:rgba(0,18,48,.40);font-weight:300}
.kt-field input:focus,.kt-field select:focus,.kt-field textarea:focus{
  outline:none;border-color:var(--kt-spray);box-shadow:0 0 0 3px rgba(0,179,255,.42);
}
.kt-field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--kt-harbor) 50%),linear-gradient(135deg,var(--kt-harbor) 50%,transparent 50%);
  background-position:calc(100% - 21px) 23px,calc(100% - 15px) 23px;background-size:6px 6px;
  background-repeat:no-repeat;padding-right:44px;
}
.kt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kt-field input[aria-invalid="true"],.kt-field textarea[aria-invalid="true"]{border-color:var(--kt-crown);box-shadow:0 0 0 3px rgba(253,198,78,.32)}
.kt-field-msg{font-size:13px;color:var(--kt-crown);margin:0;font-weight:400}
.kt-form-error{margin:0;padding:13px 16px;border-radius:var(--r-sm);font-size:14.5px;color:#FFE7B8;background:rgba(200,114,1,.22);border-left:2px solid var(--kt-crown)}
.kt-btn[aria-busy="true"]{pointer-events:none;opacity:.75}
.kt-form-done{display:flex;flex-direction:column;gap:14px;color:var(--kt-crown);position:relative;z-index:1}
.kt-form-done p{margin:0;color:var(--on-navy-soft);font-size:16px;max-width:46ch;font-weight:300}
.kt-fine{font-size:13px;color:var(--on-navy-soft);margin:0;font-weight:300;line-height:1.6}
.kt-quote-panel a{color:var(--kt-spray)}

/* ---------------- FAQ ---------------- */
.kt-faq{display:grid;gap:0;max-width:920px;margin:0 auto;border-top:1px solid var(--line)}
.kt-faq details{border-bottom:1px solid var(--line);background:transparent}
.kt-faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:22px 6px;font-family:var(--font-body);font-weight:400;font-size:17px;color:var(--kt-navy);
  transition:color .18s linear;
}
.kt-faq summary::-webkit-details-marker{display:none}
.kt-faq summary::marker{content:""}
.kt-faq summary:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:-2px}
.kt-faq summary:hover{color:var(--kt-harbor)}
.kt-faq .kt-tick{width:22px;height:22px;margin-top:0;background:var(--kt-mist);color:var(--kt-king)}
.kt-faq details[open] .kt-tick{background:var(--kt-king);color:var(--kt-foam)}
.kt-chev{margin-left:auto;color:var(--kt-harbor);transition:transform .3s var(--ease);flex:none}
.kt-faq details[open] .kt-chev{transform:rotate(180deg)}
.kt-faq-body{padding:0 6px 24px 38px;color:var(--ink-soft);font-size:15.5px;line-height:1.75;font-weight:300}
.kt-faq-body p{margin:0;max-width:70ch}
abbr[title]{text-decoration:none;cursor:help}

/* ---------------- gallery ---------------- */
.kt-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-2)}
@media (min-width:900px){.kt-gallery{grid-template-columns:repeat(4,1fr)}}
.kt-gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--kt-navy);box-shadow:var(--sh-1)}
.kt-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:no-preference){.kt-gallery figure:hover img{transform:scale(1.04)}}
/* a navy wash over the photo, then a gradient so the caption always reads */
.kt-gallery figure::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--kt-king);mix-blend-mode:multiply;opacity:.09;
  transition:opacity .4s var(--ease);
}
@media (prefers-reduced-motion:no-preference){.kt-gallery figure:hover::before{opacity:0}}
.kt-gallery figure::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,10,28,.86) 0%,rgba(0,10,28,.52) 9%,rgba(0,10,28,0) 27%);
}
.kt-gallery figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;color:var(--kt-foam);
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------------- before / after ---------------- */
.kt-ba{position:relative;--pos:52%}
.kt-ba-frame{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--kt-navy);box-shadow:var(--sh-navy);aspect-ratio:3/2;border:1px solid var(--on-navy-line)}
.kt-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kt-ba-after{clip-path:inset(0 0 0 var(--pos))}
.kt-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:transparent}
.kt-ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%}
.kt-ba-range::-moz-range-thumb{width:52px;height:100%;border:0;background:transparent}
.kt-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:3;pointer-events:none}
.kt-ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--kt-foam);box-shadow:0 0 18px rgba(226,228,232,.55)}
.kt-ba-grip{
  position:absolute;top:50%;left:50%;translate:-50% -50%;display:flex;align-items:center;gap:6px;
  padding:11px 12px;border-radius:var(--r-pill);background:var(--kt-foam);color:var(--kt-navy);
  box-shadow:0 8px 22px -8px rgba(0,10,28,.8);
}
.kt-ba-range:focus-visible ~ .kt-ba-handle .kt-ba-grip{box-shadow:0 0 0 3px var(--kt-spray),0 8px 22px -8px rgba(0,10,28,.8)}
.kt-ba-tag{
  position:absolute;top:16px;z-index:2;border-radius:var(--r-sm);padding:7px 15px;
  font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(0,10,28,.88);color:var(--kt-foam);
}
.kt-ba-tag-b{left:16px}
.kt-ba-tag-a{right:16px;background:var(--kt-crown);color:var(--kt-navy)}

/* ---------------- reviews ---------------- */
.kt-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--gap-3)}
.kt-quote{background:var(--kt-foam);border:1px solid var(--line);border-top:2px solid var(--kt-spray);border-radius:var(--r-sm);padding:28px;margin:0;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-1)}
.kt-quote blockquote{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--ink-soft);font-weight:300}
.kt-quote figcaption{margin-top:auto;font-size:12.5px;color:var(--ink-mute);font-weight:300}
.kt-quote figcaption b{display:block;font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kt-navy);margin-bottom:2px}
.kt-stars{display:flex;gap:3px;color:var(--kt-gold-2)}

/* ---------------- service area ---------------- */
.kt-towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kt-town{
  background:var(--kt-foam);padding:14px 16px;font-size:13.5px;color:var(--ink-soft);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-weight:400;letter-spacing:.02em;
  transition:background-color .2s linear,color .2s linear;
}
.kt-town::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--kt-spray);flex:none}
.kt-town:hover{background:var(--kt-mist);color:var(--kt-navy)}

/* ---------------- floating quote + mobile bar ---------------- */
.kt-float{position:fixed;right:24px;bottom:24px;z-index:75;display:none;box-shadow:0 14px 34px -14px rgba(0,10,28,.7)}
@media (min-width:900px){.kt-float{display:inline-flex}}
.kt-actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1fr 1.4fr;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(0,10,28,.97);backdrop-filter:blur(12px);border-top:1px solid var(--on-navy-line);
}
.kt-actionbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:var(--r-sm);
  font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
}
.kt-ab-quiet{background:rgba(143,163,184,.14);color:var(--kt-foam)}
.kt-ab-quiet:hover{background:rgba(143,163,184,.26)}
.kt-ab-gold{background:var(--kt-crown);color:var(--kt-navy)}
.kt-actionbar a:focus-visible{outline:2px solid var(--kt-spray);outline-offset:2px}
@media (min-width:900px){.kt-actionbar{display:none}}
@media (max-width:899px){body{padding-bottom:86px}}

/* ---------------- footer ---------------- */
.kt-footer{background:var(--kt-abyss);color:var(--on-navy);padding-block:clamp(44px,4.6vw,66px) 28px;position:relative;overflow:hidden}
.kt-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%,rgba(1,77,152,.35),transparent 65%);
}
.kt-footer > .kt-wrap{position:relative;z-index:1}
.kt-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:var(--gap-4)}
.kt-footer h3{
  margin:0 0 18px;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kt-spray);
}
.kt-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.kt-footer a{color:var(--on-navy-soft);text-decoration:none;font-size:14.5px;font-weight:300;transition:color .18s linear}
.kt-footer a:hover{color:var(--kt-foam)}
.kt-footer a:focus-visible{outline:2px solid var(--kt-spray);outline-offset:3px;border-radius:2px;color:var(--kt-foam)}
.kt-footer-mark{
  background:linear-gradient(160deg,var(--navy-2),var(--kt-navy));border:1px solid var(--on-navy-line);
  border-radius:var(--r-md);padding:20px;max-width:230px;
}
.kt-footer-tag{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kt-crown);margin:20px 0 0;line-height:1.5;
}
/* the floating estimate button parks over the bottom-right of the footer */
@media (min-width:900px){.kt-footer-bottom{padding-right:216px}}
.kt-footer-bottom{
  margin-top:var(--gap-5);padding-top:22px;border-top:1px solid var(--on-navy-line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:12.5px;color:var(--on-navy-mute);font-weight:300;
}

/* grain: the dark grounds get a fine tooth so the ink reads as paper, not slab */
.kt-hero::after,.kt-navy::after,.kt-footer::after,.kt-mast::after,.kt-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* reviews and FAQ can land on the same ground; rule them apart when they do */
.kt-abuts{border-top:1px solid var(--line)}

/* ---------------- skip + reveal ---------------- */
.kt-skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--kt-crown);color:var(--kt-navy);
  padding:13px 22px;border-radius:var(--r-sm);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.kt-skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:no-preference){
  .kt-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .kt-reveal.is-in{opacity:1;transform:none}
  .kt-reveal[data-d="1"]{transition-delay:.08s}
  .kt-reveal[data-d="2"]{transition-delay:.16s}
  .kt-reveal[data-d="3"]{transition-delay:.24s}
  .kt-reveal[data-d="4"]{transition-delay:.32s}
}

/* ============================================================
   MULTI-PAGE COMPONENTS
   Everything below exists because the site is no longer one
   scrolling page. Inner pages open on a mast rather than the
   hero, and every page that is not the form closes on a CTA.
   ============================================================ */

/* ---------------- current page in the nav ---------------- */
.kt-nav a[aria-current="page"]{color:var(--kt-navy)}
.kt-nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--kt-king)}
.kt-mobile-nav a[aria-current="page"]{color:var(--kt-harbor)}
.kt-footer a[aria-current="page"]{color:var(--kt-foam)}

/* ---------------- page mast ----------------
   The hero's smaller sibling: same navy ground, same waterline,
   sized so the first real content is still near the fold. */
/* Every banner is the same height at a given width, whatever it carries, so
   moving between pages does not make the page jump. The floor is set above
   the tallest content measured at each breakpoint — 360px is the worst case,
   where a two-word service name wraps to two lines. Content is centred in
   the band rather than sitting at the top of it. */
.kt-mast{
  background:var(--kt-navy);color:var(--on-navy);position:relative;overflow:hidden;
  padding-block:clamp(28px,2.8vw,40px) clamp(26px,2.6vw,36px);
  display:flex;align-items:center;min-height:305px;
}
.kt-mast > .kt-wrap{width:100%}
@media (min-width:480px){.kt-mast{min-height:250px}}
@media (min-width:900px){.kt-mast{min-height:272px}}
@media (min-width:1120px){.kt-mast{min-height:310px}}
.kt-mast::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(105% 80% at 8% 0%,rgba(1,77,152,.58),transparent 62%),
    radial-gradient(75% 60% at 96% 110%,rgba(0,87,169,.34),transparent 66%);
}
.kt-mast > .kt-wrap{position:relative;z-index:1;max-width:1240px}
.kt-mast .kt-h1{color:var(--on-navy);font-size:clamp(30px,4.1vw,52px);line-height:1.07}
.kt-mast .kt-accent{color:var(--kt-spray)}
.kt-mast-lede{
  font-size:17px;line-height:1.65;font-weight:300;color:var(--on-navy-soft);
  margin:var(--gap-2) 0 0;max-width:56ch;
}

/* ---------------- breadcrumbs ----------------
   Only on the service pages, where a visitor is two levels down
   and needs to know it. */
.kt-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;margin:0 0 var(--gap-2);padding:0;
  font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.kt-crumbs li{display:flex;align-items:center;gap:9px;color:var(--on-navy-mute)}
.kt-crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--on-navy-line-2)}
.kt-crumbs a{color:var(--kt-spray);text-decoration:none;transition:color .18s linear}
.kt-crumbs a:hover{color:var(--kt-crown)}
.kt-crumbs a:focus-visible{outline:2px solid var(--kt-spray);outline-offset:3px;border-radius:2px}
.kt-crumbs [aria-current="page"]{color:var(--on-navy-soft)}

/* ---------------- closing CTA band ----------------
   The last thing on every page except the form itself. */
.kt-cta{background:var(--kt-navy);color:var(--on-navy);position:relative;overflow:hidden;padding-block:clamp(30px,2.9vw,42px)}
.kt-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,rgba(0,179,255,0),var(--kt-spray) 28%,var(--kt-king) 72%,rgba(1,77,152,0)) top/100% 2px no-repeat,
    radial-gradient(85% 130% at 50% 0%,rgba(1,77,152,.55),transparent 66%);
}
.kt-cta > .kt-wrap{position:relative;z-index:1;text-align:center}
.kt-cta .kt-h2{color:var(--on-navy)}
.kt-cta-sub{
  font-size:17px;line-height:1.65;font-weight:300;color:var(--on-navy-soft);
  margin:var(--gap-2) auto 0;max-width:70ch;
}
.kt-cta-actions{display:flex;flex-wrap:wrap;gap:var(--gap-2);justify-content:center;align-items:center;margin-top:22px}
.kt-cta .kt-waterline{margin-top:14px}
.kt-cta-phone{
  display:inline-flex;align-items:center;gap:10px;color:var(--on-navy);text-decoration:none;
  font-family:var(--font-body);font-weight:500;font-size:16px;transition:color .18s linear;
}
.kt-cta-phone:hover{color:var(--kt-crown)}
.kt-cta-phone:focus-visible{outline:2px solid var(--kt-spray);outline-offset:4px;border-radius:3px}
@media (max-width:520px){
  .kt-cta-actions{flex-direction:column;align-items:stretch}
  .kt-cta-actions .kt-btn{width:100%}
}

/* ---------------- whole-card link ----------------
   One real link per card, stretched to the card's edges, so the
   hit area is the card but a screen reader still hears one link. */
.kt-card-link::after{content:"";position:absolute;inset:0;z-index:2}
.kt-card:focus-within{background:#FAFBFC}
.kt-card-link:focus-visible{outline:none}
.kt-card:focus-within::before{transform:scaleX(1)}
.kt-card:has(.kt-card-link:focus-visible){outline:2px solid var(--kt-harbor);outline-offset:-2px}

/* ---------------- framed photo ---------------- */
.kt-media{
  margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--kt-navy);box-shadow:var(--sh-2);
}
.kt-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.kt-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--kt-king);mix-blend-mode:multiply;opacity:.07;
}
.kt-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,10,28,.34) 0%,rgba(0,10,28,0) 34%);
}
.kt-media figcaption{
  position:absolute;left:16px;bottom:13px;z-index:2;color:var(--kt-foam);
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------------- surfaces covered ----------------
   Reuses the service-area cell so the two lists read as one idea. */
.kt-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:var(--gap-3) 0 0;padding:0}
.kt-chips li{
  background:var(--kt-foam);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 14px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:9px;
}
.kt-chips li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--kt-spray);flex:none}
.kt-on-navy .kt-chips li{background:rgba(143,163,184,.10);border-color:var(--on-navy-line);color:var(--on-navy-soft)}

/* ---------------- ordered method ----------------
   Numbered only where the order is the point — clean, then sand,
   then seal. Everywhere else the list is unnumbered on purpose. */
.kt-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-3);counter-reset:step}
.kt-steps li{
  display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;counter-increment:step;
  padding-bottom:var(--gap-3);border-bottom:1px solid var(--line);
}
.kt-steps li:last-child{border-bottom:0;padding-bottom:0}
.kt-steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.01em;
  color:var(--kt-king);line-height:1;padding-top:2px;
}
.kt-on-navy .kt-steps li::before{color:var(--kt-spray)}
.kt-on-navy .kt-steps li{border-bottom-color:var(--on-navy-line)}
.kt-steps b{
  font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kt-navy);display:block;margin-bottom:5px;
}
.kt-on-navy .kt-steps b{color:var(--on-navy)}
.kt-steps span span{color:var(--ink-mute);font-size:15.5px;line-height:1.65;display:block;font-weight:300}
.kt-on-navy .kt-steps span span{color:var(--on-navy-soft)}

/* ---------------- prose block ---------------- */
.kt-prose{max-width:68ch}
.kt-prose p{margin:0 0 var(--gap-3);color:var(--ink-soft);font-weight:300}
.kt-prose p:last-child{margin-bottom:0}
.kt-prose strong{font-weight:500;color:var(--kt-navy)}

/* ---------------- contact page ---------------- */
.kt-contact{display:grid;gap:clamp(28px,3.6vw,52px);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.kt-contact{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.kt-contact-card{
  background:var(--kt-foam);border:1px solid var(--line);border-top:2px solid var(--kt-spray);
  border-radius:var(--r-sm);padding:30px 28px;box-shadow:var(--sh-1);
}
.kt-contact-card + .kt-contact-card{margin-top:var(--gap-2)}
.kt-contact-card h3{
  margin:0 0 16px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--kt-navy);
}
.kt-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kt-contact-list li{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;font-size:15px;color:var(--ink-soft);font-weight:300}
.kt-contact-list svg{color:var(--kt-king);margin-top:3px}
.kt-contact-list b{
  display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px;
}
.kt-contact-list a{color:var(--kt-harbor);text-decoration:none;font-weight:400}
.kt-contact-list a:hover{color:var(--kt-king);text-decoration:underline}
.kt-contact-list a:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:3px;border-radius:2px}

/* ---------------- photo on the service card ----------------
   The work itself, not a glyph standing in for it. Bleeds to the card
   edges by cancelling the card's own padding, so the padding is held in
   variables rather than repeated as magic numbers. The accent rule that
   wipes in on hover stays on top of the photo. */
.kt-card{--card-pad-x:30px;--card-pad-y:38px}
.kt-card-photo{
  display:block;position:relative;overflow:hidden;background:var(--kt-navy);
  margin:calc(var(--card-pad-y) * -1) calc(var(--card-pad-x) * -1) 8px;
}
.kt-card-photo img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
/* the same King Blue wash the gallery uses, so the two sets read as one system */
.kt-card-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--kt-king);mix-blend-mode:multiply;opacity:.10;
  transition:opacity .4s var(--ease);
}
.kt-card-photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,10,28,.30) 0%,rgba(0,10,28,0) 34%);
}
@media (prefers-reduced-motion:no-preference){
  .kt-card:hover .kt-card-photo img,
  .kt-card:focus-within .kt-card-photo img{transform:scale(1.05)}
  .kt-card:hover .kt-card-photo::before,
  .kt-card:focus-within .kt-card-photo::before{opacity:0}
}

/* the commercial band pairs a 16:9 drive-thru with a 4:3 canopy, so both are
   held to one ratio — otherwise the two figures sit at different heights */
/* two photographs stacked beside a column of copy, held to one ratio so the
   pair reads as a single block rather than two loose frames */
.kt-media-stack{display:grid;gap:var(--gap-2)}
.kt-media-stack .kt-media img{aspect-ratio:16/9}

/* ---------------- feature mast ----------------
   Results opens on the slider itself. Describing the before/after in one navy
   band and then repeating that description in a second navy band underneath
   was both a duplicated paragraph and two identical grounds with no edge
   between them, so the two are now one. */
.kt-mast.kt-mast-feature{padding-block:clamp(50px,6vw,94px);min-height:0;display:block}
.kt-mast-feature .kt-h1{font-size:clamp(33px,4.5vw,58px)}
.kt-mast-feature .kt-mast-lede{max-width:50ch}
.kt-mast-feature .kt-cta-actions{justify-content:flex-start;margin-top:var(--gap-4)}

/* ---------------- nav dropdowns ----------------
   Opens on hover for a mouse, on :focus-within for a keyboard (so tabbing
   into the menu reveals it without any script), and on the caret button for
   touch, where hover does not exist. visibility — not display — keeps the
   links out of the tab order while closed but still allows a transition. */
.kt-nav-item{position:relative;display:flex;align-items:center}
.kt-nav-caret{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-left:-8px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--ink-mute);
  transition:transform .25s var(--ease),color .18s linear;
}
.kt-nav-caret:hover{color:var(--kt-navy)}
.kt-nav-caret:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:2px;border-radius:2px}
.kt-nav-item:hover .kt-nav-caret,
.kt-nav-item:focus-within .kt-nav-caret,
.kt-nav-item.is-open .kt-nav-caret{transform:rotate(180deg);color:var(--kt-navy)}

.kt-submenu{
  position:absolute;top:100%;left:0;z-index:90;min-width:250px;
  display:flex;flex-direction:column;padding:8px 0;
  background:var(--kt-foam);border:1px solid var(--line);border-top:2px solid var(--kt-spray);
  border-radius:0 0 var(--r-sm) var(--r-sm);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.kt-nav-item:hover .kt-submenu,
.kt-nav-item:focus-within .kt-submenu,
.kt-nav-item.is-open .kt-submenu{opacity:1;visibility:visible;transform:none}
.kt-submenu a{
  padding:10px 18px;font-family:var(--font-body);font-weight:500;font-size:13.5px;
  letter-spacing:.02em;text-transform:none;color:var(--ink-soft);text-decoration:none;
  white-space:nowrap;transition:background-color .16s linear,color .16s linear;
}
.kt-submenu a::after{content:none}
.kt-submenu a:hover{background:var(--kt-mist);color:var(--kt-navy)}
.kt-submenu a:focus-visible{outline:2px solid var(--kt-harbor);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .kt-submenu{transition:none}
  .kt-nav-caret{transition:none}
}

/* the burger menu has no hover, so the same pages sit inline underneath */
.kt-mobile-sub{
  padding-left:22px !important;font-size:12px !important;
  color:var(--ink-soft) !important;letter-spacing:.1em !important;
}
.kt-mobile-sub::before{content:"— ";opacity:.5}