/* ===========================================================================
   Design 11 — Blueprint (warm line-art)
   Cream paper + navy line-art + mustard accent. Mono labels, thin rules,
   two-column hero. Familjen Grotesk display · Figtree body · Space Mono labels.
   =========================================================================== */
:root {
  --bg:#f6f1e5; --panel:#fffdf6; --tint:#efe7d3;
  --navy:#22466c; --navy-dk:#193550; --mustard:#d99a2c; --mustard-dk:#b27c16;
  --ink:#243140; --ink-soft:#5d6b78; --line:#ddd3bf;
  --r:10px; --r-sm:8px;
  --shadow:0 14px 30px -22px rgba(34,49,64,.3);
  --maxw:1140px; --fd:"Familjen Grotesk", system-ui, sans-serif; --fb:"Figtree", system-ui, sans-serif; --fm:"Space Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; font-family:var(--fb); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--fd); color:var(--navy); line-height:1.1; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
p { margin:0 0 1rem; }
a { color:var(--navy); text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow { max-width:780px; }
.accent { color:var(--mustard-dk); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:12px; z-index:100; background:var(--navy); color:#fff; padding:8px 14px; border-radius:6px; }
.wave { display:none; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fb); font-weight:700; font-size:.95rem; padding:.78rem 1.4rem; border-radius:var(--r-sm); border:2px solid var(--navy); cursor:pointer; transition:transform .15s, background .2s, color .2s; white-space:nowrap; }
.btn-lg { padding:.95rem 1.7rem; font-size:1.02rem; }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-dk); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--navy); }
.btn-ghost:hover { background:var(--navy); color:#fff; }
.btn-light { background:var(--mustard); color:var(--navy-dk); border-color:var(--navy-dk); }
.btn-light:hover { transform:translateY(-2px); }

.site-header { position:sticky; top:0; z-index:50; background:rgba(246,241,229,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:1.25rem; height:76px; }
.brand-logo { height:46px; width:auto; display:block; }
.brand-logo-footer { height:116px; width:auto; margin-bottom:.8rem; }
.nav { margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav a { color:var(--ink); font-weight:600; font-size:.92rem; font-family:var(--fm); text-transform:uppercase; letter-spacing:.02em; }
.nav a:hover { color:var(--mustard-dk); }
.nav .nav-cta { display:none; }
.header-call { margin-left:1rem; }
.nav-toggle { display:none; }

/* hero: two-column */
.hero { background:var(--bg); padding:clamp(2.5rem,6vw,5rem) 0; border-bottom:1px solid var(--line); }
.hero-inner { display:grid; grid-template-columns:1.05fr .95fr; column-gap:clamp(2rem,5vw,4rem); align-items:center; text-align:left; }
.hero-inner > * { grid-column:1; max-width:560px; }
.hero-img { grid-column:2 !important; grid-row:1 / -1; align-self:center; max-width:none !important; margin:0; border:1.5px solid var(--navy); border-radius:var(--r); background:var(--panel); }
.eyebrow { font-family:var(--fm); font-weight:700; font-size:.74rem; letter-spacing:.06em; color:var(--mustard-dk); margin-bottom:1.1rem; }
.hero h1 { font-size:clamp(2.4rem,5vw,3.9rem); }
.hero .lead { font-size:clamp(1.05rem,2vw,1.25rem); color:var(--ink-soft); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 1.4rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; color:var(--ink-soft); font-weight:600; font-size:.88rem; font-family:var(--fm); padding-top:1.2rem; border-top:1px solid var(--line); }
.hero-trust span:first-child { color:var(--mustard-dk); }

.section { padding:clamp(3rem,7vw,5.5rem) 0; }
.section-tint { background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:680px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.kicker { font-family:var(--fm); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--mustard-dk); margin:0 0 .7rem; }
h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); }
.section-sub { color:var(--ink-soft); font-size:1.05rem; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.card { background:var(--panel); border:1.5px solid var(--navy); border-radius:var(--r); padding:1.8rem 1.6rem; transition:transform .15s, box-shadow .2s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.card-icon, .card-icon.i1, .card-icon.i2, .card-icon.i3 { display:inline-grid; place-content:center; width:54px; height:54px; border-radius:50%; background:transparent; border:1.5px solid var(--navy); color:var(--navy); margin-bottom:1rem; }
.card-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { font-size:1.2rem; }
.card p { margin:0; color:var(--ink-soft); }

.ba-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.ba { --pos:50%; position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); border:1.5px solid var(--navy); margin:0; background:var(--panel); }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--navy); transform:translateX(-50%); pointer-events:none; }
.ba-handle::after { content:"⇄"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; background:var(--mustard); color:var(--navy-dk); border:1.5px solid var(--navy); border-radius:50%; display:grid; place-content:center; }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-tag { position:absolute; top:11px; font-family:var(--fm); font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--navy-dk); background:var(--bg); border:1px solid var(--navy); padding:.18rem .5rem; pointer-events:none; }
.ba-before-tag { left:11px; } .ba-after-tag { right:11px; background:var(--mustard); }
.ba figcaption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(34,49,64,.82)); color:#fff; font-weight:600; padding:1.5rem .9rem .6rem; font-size:.86rem; font-family:var(--fm); }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.work-grid img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); border:1.5px solid var(--navy); transition:transform .15s; }
.work-grid img:hover { transform:translateY(-3px); }

.areas-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.area-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.area-list li { background:var(--panel); border:1.5px solid var(--navy); border-radius:6px; padding:.5rem 1rem; font-weight:600; color:var(--navy); font-family:var(--fm); font-size:.84rem; }

.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.review { margin:0; background:var(--panel); border:1.5px solid var(--navy); border-radius:var(--r); padding:1.8rem; }
.stars { color:var(--mustard-dk); letter-spacing:.1em; margin-bottom:.6rem; }
.review p { font-size:1.05rem; color:var(--ink); }
.review cite { display:block; margin-top:1rem; font-style:normal; font-weight:700; color:var(--navy); font-size:.88rem; font-family:var(--fm); }

.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-list { list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:0; }
.contact-list li { display:grid; grid-template-columns:70px 1fr; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.ci-label { font-family:var(--fm); font-weight:700; text-transform:uppercase; font-size:.68rem; letter-spacing:.06em; color:var(--mustard-dk); }
.ci-value { font-weight:600; color:var(--navy); }
a.ci-value:hover { color:var(--mustard-dk); }
.estimate { background:var(--panel); border:1.5px solid var(--navy); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.2rem); display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.3rem; }
.field-full { grid-column:1/-1; }
.estimate label { font-family:var(--fm); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.estimate input,.estimate select,.estimate textarea { font:inherit; padding:.7rem .85rem; border:1.5px solid var(--navy); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); width:100%; }
.estimate input:focus,.estimate select:focus,.estimate textarea:focus { outline:none; border-color:var(--mustard-dk); box-shadow:0 0 0 3px rgba(217,154,44,.2); }
.estimate .btn { grid-column:1/-1; }
.form-note { grid-column:1/-1; margin:0; color:var(--navy); font-weight:700; }
.form-fineprint { grid-column:1/-1; margin:0; font-size:.8rem; color:var(--ink-soft); }

.faq { display:grid; gap:.7rem; }
.faq-item { background:var(--panel); border:1.5px solid var(--navy); border-radius:var(--r-sm); overflow:hidden; }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--fd); font-size:1.1rem; font-weight:700; color:var(--navy); padding:1.05rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-i { position:relative; flex:none; width:18px; height:18px; }
.faq-i::before,.faq-i::after { content:""; position:absolute; background:var(--mustard-dk); transition:transform .2s; }
.faq-i::before { top:8px; left:0; width:18px; height:2px; }
.faq-i::after { top:0; left:8px; width:2px; height:18px; }
.faq-q[aria-expanded="true"] .faq-i::after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a p { margin:0; padding:0 1.3rem 1.2rem; color:var(--ink-soft); }

.cta-band { background:var(--navy); color:#fff; }
.cta-inner { text-align:center; padding:clamp(2.8rem,6vw,4.5rem) 0; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#c4d2e0; font-size:1.12rem; margin-bottom:1.5rem; }

.site-footer { background:var(--navy-dk); color:#bcc9d8; padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-meta { color:#8898ab; font-size:.9rem; }
.site-footer h4 { color:#fff; font-family:var(--fm); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.site-footer a { color:#bcc9d8; }
.site-footer a:hover { color:var(--mustard); }
.site-footer p { margin:.3rem 0; }
.footer-areas { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.25rem .8rem; color:#bcc9d8; font-size:.9rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.4rem; font-size:.85rem; color:#8898ab; font-family:var(--fm); }

[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity:1; transform:none; }

@media (max-width:900px) {
  .cards,.ba-grid,.work-grid,.reviews { grid-template-columns:repeat(2,1fr); }
  .hero-inner,.areas-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-inner > *, .hero-img { grid-column:1 !important; max-width:none; }
  .hero-img { grid-row:auto; order:-1; margin-bottom:1.5rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .header-call { display:none; }
  .nav { position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--navy); padding:1rem 24px 1.4rem; gap:0; transform:translateY(-130%); transition:transform .3s ease; box-shadow:var(--shadow); }
  body.nav-open .nav { transform:none; }
  .nav a { padding:.8rem 0; border-bottom:1px solid var(--line); }
  .nav .nav-cta { display:block; color:var(--mustard-dk); }
  .nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; width:46px; height:46px; background:none; border:1.5px solid var(--navy); border-radius:8px; cursor:pointer; }
  .nav-toggle span { display:block; width:22px; height:2px; background:var(--navy); margin:0 auto; transition:transform .25s,opacity .2s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px) {
  .cards,.ba-grid,.work-grid,.reviews,.area-list,.footer-grid,.estimate { grid-template-columns:1fr; }
  .footer-bottom { justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } [data-reveal] { opacity:1; transform:none; transition:none; } }

/* ===========================================================================
   Services — Spec-Sheet / Drawing-Schedule (replaces the .cards grid)
   Numbered, full-width ruled rows that read like a blueprint legend.
   =========================================================================== */
.svc-schedule { border-top:1.5px solid var(--navy); }
.svc-row { display:grid; grid-template-columns:2.6rem 52px 1fr auto; align-items:center; gap:0 1.2rem; padding:1.25rem 0; border-bottom:1px solid var(--line); transition:background .15s; }
.svc-row:hover { background:var(--panel); }
.svc-num { font-family:var(--fm); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--mustard-dk); line-height:1; padding-top:.1em; }
.svc-icon { display:inline-grid; place-content:center; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--navy); color:var(--navy); flex-shrink:0; }
.svc-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc-body { min-width:0; }
.svc-name { font-size:1.12rem; margin:0 0 .2rem; color:var(--navy); }
.svc-desc { margin:0; color:var(--ink-soft); font-size:.96rem; }
.svc-desc em { font-style:normal; color:var(--mustard-dk); font-family:var(--fm); font-size:.78rem; letter-spacing:.02em; }
.svc-arrow { font-size:1.1rem; color:var(--mustard-dk); font-family:var(--fm); opacity:.6; transition:opacity .15s, transform .15s; padding-right:.4rem; }
.svc-row:hover .svc-arrow { opacity:1; transform:translateX(3px); }
@media (max-width:560px) {
  .svc-row { grid-template-columns:2.2rem 44px 1fr; padding:1rem 0; gap:0 .85rem; }
  .svc-icon { width:44px; height:44px; }
  .svc-icon svg { width:22px; height:22px; }
  .svc-name { font-size:1rem; }
  .svc-arrow { display:none; }
}