/* KAL Construction and Services, Inc. — shared site stylesheet
   Extracted from per-page inline <style> blocks so every page ships one
   cacheable file instead of ~15KB of duplicated CSS each.

   Palette: "working drawing on paper" — a warm off-white ground with navy
   linework and an amber highlight pen, instead of a dark digital panel.
   The footer stays a deep navy so the site still has a strong dark note,
   just used once, deliberately, as a bookend rather than everywhere. */

:root{
  --paper: #FAF7F1;
  --paper-2: #F1ECE1;
  --paper-3: #E7E0D0;
  --ink: #14202E;
  --body-c: #445064;
  --muted: #5C6B82;
  --amber: #E8A23C;
  --amber-dim: #C98A2E;
  --amber-ink: #8A5A16;
  --navy: #10182A;
  --navy-2: #182236;
  --line: rgba(20,32,46,0.14);
  --line-strong: rgba(20,32,46,0.30);
  --display: 'Archivo', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --max: 1120px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

body{
  background:var(--paper);
  color:var(--body-c);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--amber-ink); outline-offset:3px;}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--amber); color:var(--ink); font-family:var(--mono);
  font-size:13px; font-weight:600; padding:12px 18px; z-index:100; border-radius:2px;
}
.skip-link:focus{left:16px; top:16px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-ink); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--amber-dim); display:inline-block;}

h1,h2,h3{font-family:var(--display); font-weight:900; letter-spacing:-0.01em; line-height:1.05; color:var(--ink);}
h2{font-size:clamp(28px,4vw,40px); text-transform:uppercase; letter-spacing:.01em;}

.mark{position:relative; flex-shrink:0;}
.mark svg{display:block;}

.blueprint-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 65% 30%, black 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 65% at 65% 30%, black 10%, transparent 72%);
  pointer-events:none;
}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,241,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:92px; gap:40px;}
.brand{display:flex; align-items:center; gap:26px; text-decoration:none;}
.brand-name{font-family:var(--display); font-weight:900; font-size:16.5px; letter-spacing:.02em; line-height:1.15; color:var(--ink);}
.brand-name span{display:block; font-family:var(--mono); font-weight:500; font-size:10.5px; color:var(--amber-ink); letter-spacing:.16em; margin-top:2px;}
nav{display:flex; align-items:center; gap:34px;}
nav a.navlink{font-size:14px; font-weight:500; text-decoration:none; color:var(--muted); transition:color .15s;}
nav a.navlink:hover, nav a.navlink.active{color:var(--ink);}
nav a.navlink.active{color:var(--amber-ink);}
.btn{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em;
  padding:11px 20px; border-radius:2px; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
  transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-primary:hover{background:#f2b45b; transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--amber-ink); color:var(--amber-ink);}
.navbtns{display:flex; align-items:center; gap:16px; margin-left:24px; padding-left:24px; border-left:1px solid var(--line);}
.navtoggle{display:none; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink); width:42px; height:42px; border-radius:2px; cursor:pointer;}

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--paper-2);}
.hero .wrap{position:relative; z-index:2; padding:108px 28px 96px;}
.hero h1{font-size:clamp(34px,5.6vw,62px); text-transform:uppercase; max-width:920px;}
.hero h1 em{font-style:normal; color:var(--amber-ink);}
.hero p.lede{font-size:18px; color:var(--body-c); max-width:580px; margin-top:22px;}
.hero-cta{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
.hero-stats{
  margin-top:76px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line);
}
.hero-stats div{padding:22px 22px 0; border-right:1px solid var(--line);}
.hero-stats div:last-child{border-right:none;}
.hero-stats .n{font-family:var(--display); font-weight:900; font-size:clamp(24px,3vw,34px); color:var(--amber-ink);}
.hero-stats .l{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:6px;}

/* Sub-page header band — gives every interior page a proper <h1> and the
   same blueprint-textured treatment as the homepage hero, instead of
   dropping straight into a content section. A per-page icon badge (see
   .hero-icon) gives each of these bands its own identity beyond the
   heading text, so the six interior pages don't read as one template
   with the words swapped. */
.page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:64px 0 52px; background:var(--paper-2);}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{font-size:clamp(28px,4vw,42px); text-transform:uppercase; letter-spacing:.01em; max-width:760px;}
.page-hero p.lede{font-size:15.5px; color:var(--body-c); max-width:560px; margin-top:16px;}

.hero-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); margin-bottom:20px;
}
.hero-icon svg{width:22px; height:22px;}

section{padding:96px 0; border-bottom:1px solid var(--line); position:relative; background:var(--paper);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap;}
.section-head p{color:var(--body-c); max-width:440px; font-size:15px;}

.framed{position:relative; padding:34px; border:1px solid var(--line); background:var(--paper); box-shadow:0 1px 2px rgba(20,32,46,0.05);}
.framed::before, .framed::after{content:""; position:absolute; width:16px; height:16px; border:2px solid var(--ink);}
.framed::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.framed::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}

.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start;}
.about-grid p{color:var(--body-c); font-size:16px; margin-bottom:16px;}
.about-grid p strong{color:var(--ink); font-weight:600;}
.about-side .row{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:13.5px;}
.about-side .row:last-child{border-bottom:none;}
.about-side .row span:first-child{color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px;}
.about-side .row span:last-child{color:var(--ink); text-align:right;}

/* Capabilities grid — a compact list of cards with a numbered badge.
   Deliberately styled differently from .explore-grid below (rounded
   number chip + border card vs. top-accent-bar tile) so the two grid
   modules read as distinct pieces of the design rather than the same
   component copy-pasted between the homepage and this page. */
/* Two columns × five rows for ten items — a 3-column grid leaves a lone
   10th card stranded on its own row, which is the layout this replaced. */
.cap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.cap-item{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:28px 30px; box-shadow:0 1px 2px rgba(20,32,46,0.04); transition:transform .18s, box-shadow .18s, border-color .18s;}
.cap-item:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,32,46,0.10); border-color:var(--amber-dim);}
.cap-item .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:12px; color:var(--amber-ink); margin-bottom:14px;
}
.cap-item h3{font-family:var(--body); font-weight:600; font-size:17px; text-transform:none; letter-spacing:0;}
.cap-item p{color:var(--body-c); font-size:14px; margin-top:8px;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.split > div > .eyebrow{margin-bottom:24px;}

.strength{padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:64px 1fr; gap:20px;}
.strength:first-child{padding-top:0;}
.strength:last-child{border-bottom:none;}
.strength .idx{font-family:var(--mono); color:var(--amber-ink); font-size:13px; padding-top:3px;}
.strength h3{font-family:var(--body); font-weight:600; font-size:16px; text-transform:none; letter-spacing:0; margin-bottom:6px;}
.strength p{color:var(--body-c); font-size:14.5px;}

.area-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.area-list .area{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.area-list .area:first-child{padding-top:0;}
.area-list .area:last-child{border-bottom:none;}
.area-list h3{font-family:var(--body); font-weight:600; font-size:18px; text-transform:none; letter-spacing:0;}
.area-list span{font-family:var(--mono); font-size:12px; color:var(--muted);}
.map-frame{position:relative;}
.map-frame svg{width:100%; height:auto;}
.map-note{font-family:var(--mono); font-size:12.5px; color:var(--body-c); margin-top:18px; text-align:center;}
.map-note strong{color:var(--amber-ink); font-weight:600;}

.cert-row{display:flex; flex-wrap:wrap; gap:14px;}
.pill{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em;
  border:1px solid var(--line-strong); padding:10px 16px; border-radius:20px; color:var(--body-c);
  background:var(--paper); display:flex; align-items:center; gap:10px;
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.contact-list .row{padding:22px 0; border-bottom:1px solid var(--line);}
.contact-list .row:first-child{padding-top:0;}
.contact-list .row:last-child{border-bottom:none;}
.contact-list .row .l{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink);}
.contact-list .row .v{font-size:19px; margin-top:16px; color:var(--ink);}
.contact-list .row .v a{text-decoration:none; border-bottom:1px solid var(--line-strong); color:var(--ink);}
.contact-list .row .v a:hover{border-color:var(--amber-ink); color:var(--amber-ink);}

form{display:flex; flex-direction:column; gap:16px;}
label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
input,textarea{
  background:var(--paper); border:1px solid var(--line-strong); color:var(--ink);
  padding:13px 14px; font-family:var(--body); font-size:14.5px; border-radius:4px; width:100%;
}
input:focus,textarea:focus{border-color:var(--amber-ink);}
textarea{resize:vertical; min-height:96px;}

/* Homepage teaser grid — cards with a top accent bar and a small icon,
   set apart from .cap-grid's circular numbered badges so the homepage
   preview doesn't look like a re-run of the capabilities page. */
.explore-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.explore-item{
  position:relative; background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--amber);
  border-radius:0 0 6px 6px; padding:30px 26px; text-decoration:none; display:block;
  box-shadow:0 1px 2px rgba(20,32,46,0.04); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.explore-item:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(20,32,46,0.10); border-top-color:var(--amber-ink);}
.explore-item .num{position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:12px; color:var(--muted);}
.explore-item .ico{
  width:38px; height:38px; border-radius:8px; background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--amber-ink); margin-bottom:16px;
}
.explore-item .ico svg{width:19px; height:19px;}
.explore-item h3{font-family:var(--body); font-weight:600; font-size:18px; margin-top:0; text-transform:none; letter-spacing:0;}
.explore-item p{color:var(--body-c); font-size:14px; margin-top:8px;}
.explore-item .go{font-family:var(--mono); font-size:12px; color:var(--amber-ink); margin-top:16px; display:inline-block; transition:transform .15s;}
.explore-item:hover .go{transform:translateX(3px);}

/* Footer stays the one deliberately dark band on the site — a bookend
   after five-plus screens of light paper, not a return to the old
   all-dark theme. */
footer{padding:56px 0 40px; background:var(--navy); color:var(--paper);}
footer .wrap{display:flex; flex-direction:column; gap:32px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(245,247,250,0.14);}
.footer-brand{display:flex; align-items:center; gap:18px; text-decoration:none;}
.footer-brand .brand-name{color:var(--paper);}
.footer-links{display:flex; gap:32px; flex-wrap:wrap;}
.footer-links .col{display:flex; flex-direction:column; gap:10px;}
.footer-links .col span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:4px;}
.footer-links a{font-size:13.5px; color:rgba(245,247,250,0.78); text-decoration:none; transition:color .15s;}
.footer-links a:hover{color:var(--amber);}
footer .bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer p{font-family:var(--mono); font-size:12px; color:rgba(245,247,250,0.55);}

/* The inline desktop nav (7 links + brand + phone + quote button) needs
   roughly 1550px of width to lay out in one row without collapsing the
   .wrap max-width column — below that it wrapped/overflowed the viewport
   on every common laptop size (1280, 1366, 1440, 1512...), producing a
   horizontal scrollbar and clipping the "Request a Quote" button off the
   right edge. The collapsed/hamburger nav is used for anything narrower. */
@media (max-width:1550px){
  /* The open menu is an anchored dropdown panel under the toggle button,
     not a full-width bar across the top of the page — it should look and
     feel like a small menu, not a takeover of the header. header.wrap is
     the positioning context (set below) so the panel lines up under the
     hamburger button instead of the edge of the viewport. */
  header .wrap{position:relative;}
  nav{
    position:absolute; top:calc(100% + 12px); right:28px;
    width:min(300px, calc(100vw - 56px));
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    flex-direction:column; align-items:stretch; padding:10px;
    gap:2px; display:none; max-height:calc(100vh - 130px); overflow-y:auto;
    box-shadow:0 20px 40px rgba(20,32,46,0.18);
  }
  nav.open{display:flex;}
  nav a.navlink{padding:12px 14px; border-radius:6px;}
  nav a.navlink:hover, nav a.navlink.active{background:var(--paper-2);}
  .navtoggle{display:block;}
  .navbtns{margin-left:0; padding-left:0; border-left:none;}
  .navbtns .btn-ghost{display:none;}
}
@media (max-width:900px){
  .about-grid,.split,.area-wrap,.contact-grid{grid-template-columns:1fr; gap:40px;}
  .cap-grid,.explore-grid{grid-template-columns:1fr 1fr;}
  .hero-stats{grid-template-columns:1fr 1fr; row-gap:26px;}
  .hero-stats div{border-right:none; border-bottom:1px solid var(--line); padding-bottom:22px;}
  .footer-top{flex-direction:column; gap:24px;}
}
@media (max-width:560px){ .cap-grid,.explore-grid{grid-template-columns:1fr;} }
@media (max-width:480px){
  .wrap{padding:0 18px;}
  header .wrap{gap:10px; height:76px;}
  .brand{gap:12px;}
  .mark svg{width:32px; height:32px;}
  .brand-name{font-size:12.5px;}
  .brand-name span{font-size:8.5px; letter-spacing:.1em; margin-top:1px;}
  .navbtns{gap:8px;}
  .navbtns .btn-primary{padding:9px 12px; font-size:11px;}
  nav{inset:76px 0 auto 0; max-height:calc(100vh - 76px);}
}
@media (max-width:340px){
  .navbtns .btn-primary{display:none;}
}