/* ===== GRUNDVAKT — foundations & drainage (Figma BRCibOteBxjpXGRPJGdYN8, node 1:2116, 1280 x 4517) =====
 *
 * Tokens read off the design: near-black ink (#111827) on white and a cool
 * off-white (#f9fafb), a warm signal orange (#f47503) for accents, badges
 * and pill buttons, a near-black process band (#111215) and a deep navy
 * (#0f172a) for the cross-section panel. Inter throughout. Desktop frame
 * is 1280 wide; everything reflows to one column under 900.
 */
:root {
  --ink: #111827;
  --navy: #091d34;
  --panel: #0f172a;
  --band: #111215;
  --body: #4b5563;
  --muted: #6b7280;
  --soft: #9ca3af;
  --orange: #f47503;
  --orange-soft: #fff7ed;
  --orange-line: rgba(254, 215, 170, .8);
  --paper: #f9fafb;
  --line: #e5e7eb;
  --line-soft: #f3f4f6;
  --line-2: #e2e8f0;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The shared booking wizard follows the design. */
  --vs-accent: var(--orange);
  --vs-accent-ink: #ffffff;
  --vs-ink: var(--ink);
  --vs-muted: var(--body);
  --vs-bg: #ffffff;
  --vs-surface: var(--paper);
  --vs-radius: 8px;
  --vs-line: var(--line);
  --vs-font: var(--sans);
  --vs-ok: #15803d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--body); background: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(1276px, 100% - 2rem); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2rem); }
@media (min-width: 900px) { .wrap { width: min(1276px, 100% - 4rem); } }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* Type scale */
.eyebrow { font: 700 12px/16.5px var(--sans); letter-spacing: .55px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.eyebrow--center { text-align: center; }
.eyebrow--orange { color: var(--orange); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; margin-bottom: 14px; border: 1px solid var(--orange-line); border-radius: 999px; background: var(--orange-soft); font: 700 11px/16.5px var(--sans); letter-spacing: .55px; text-transform: uppercase; color: var(--orange); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.h2 { font: 800 clamp(24px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -.85px; color: var(--ink); }
.h2--light { color: #fff; }
.h2--navy { color: var(--navy); }
.lede { max-width: 700px; margin-top: 12px; font: 400 16px/21.13px var(--sans); color: var(--body); }
.arrow { font-style: normal; margin-inline-start: .3em; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 12px 24px; border: 1px solid transparent; border-radius: 8px;
  font: 700 13px/19.5px var(--sans); text-decoration: none; color: var(--ink);
  transition: filter .15s, background .15s, color .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.btn--pill { border-radius: 999px; }
.btn--orange { background: var(--orange); color: #fff; box-shadow: 0 4px 6px -1px rgba(244,117,3,.25), 0 2px 4px -2px rgba(244,117,3,.25); }
.btn--sm { min-height: 39px; padding: 10px 18px; font-size: 12px; border-radius: 999px; }
.link { display: inline-flex; align-items: center; font: 700 13px/16px var(--sans); color: var(--orange); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* HEADER */
.hd { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(229,231,235,.8); }
.hd__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding-inline: 1rem; }
@media (min-width: 900px) { .hd__inner { min-height: 70px; padding-inline: 32px; } }
.hd__brand { display: flex; align-items: center; flex-shrink: 0; gap: 14px; text-decoration: none; white-space: nowrap; }
.hd__logo { width: 100px; height: 40px; object-fit: contain; }
.hd__rule { display: none; width: 1px; height: 24px; background: #d6d3cd; }
.hd__meta { display: none; flex-direction: column; gap: 2px; }
@media (min-width: 640px) { .hd__meta { display: flex; } .hd__rule { display: block; } }
.hd__part { font: 700 9px/9px var(--sans); letter-spacing: 1.98px; text-transform: uppercase; color: var(--ink); }
.hd__part b { color: var(--orange); }
.hd__sub { font: 400 8px/12px var(--sans); letter-spacing: 1.28px; text-transform: uppercase; color: var(--muted); }
.hd__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.hd__toggle span { display: block; height: 2px; background: var(--ink); }
.hd__nav { display: none; }
.hd__nav > a { font: 500 13px/1.4 var(--sans); color: #374151; text-decoration: none; }
.hd__nav > a:hover { color: var(--ink); }
.hd__nav > a { position: relative; white-space: nowrap; }
.hd__nav > a.is-active, .hd.is-home .hd__link--home, .hd.is-projekt .hd__link--projekt, .hd.is-blogg .hd__link--blogg, .hd.is-post .hd__link--blogg, .hd.is-kontakt .hd__link--kontakt { color: var(--orange); font-weight: 700; }
.hd.is-home .hd__link--home::after, .hd.is-projekt .hd__link--projekt::after, .hd.is-blogg .hd__link--blogg::after, .hd.is-post .hd__link--blogg::after, .hd.is-kontakt .hd__link--kontakt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 999px; background: var(--orange); }
.hd__nav.is-open > a::after { display: none; }
.hd__nav.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 14px; padding: 1.25rem 1rem 1.5rem; background: #fff; border-bottom: 1px solid var(--line); }
.hd__right { display: flex; align-items: center; flex-shrink: 0; gap: 16px; }
.hd__lang { font: 600 12px/1.3 var(--sans); letter-spacing: .6px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
@media (min-width: 1200px) {
  .hd__toggle { display: none; }
  .hd__nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
}

/* HERO (1:2118): a 1280x594 frame; the photo fills the right 61.8%; the white
   swoosh with its 6px orange stroke (731x643 at x=-107, y=-26) covers the left;
   the copy sits at x=43, y=64, 483px wide. */
.hero { position: relative; background: #fff; overflow: hidden; }
.hero__media { position: relative; width: 100%; height: 260px; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.hero__swoosh { display: none; }
.hero__inner { position: relative; z-index: 2; width: min(1276px, 100% - 2rem); margin-inline: auto; padding: 36px 0 48px; }
.hero__title { font: 800 clamp(30px, 3.6vw, 46px)/1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.hero__title-main, .hero__accent { display: block; }
.hero__accent { font-style: normal; color: var(--orange); }
.hero__lead { max-width: 512px; margin-top: 16px; font: 500 16px/24.38px var(--sans); color: var(--body); }
.hero__lead:empty { display: none; }
.hero__actions { margin-top: 26px; }
.btn--hero { width: 300px; max-width: 100%; }
.btn__arrow { width: 16px; height: 12px; flex: none; }
.trust { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 455px; margin-top: 32px; padding-top: 21px; border-top: 1px solid var(--line-soft); }
@media (min-width: 560px) { .trust { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.trust li { position: relative; padding-left: 18px; }
.trust img { position: absolute; left: 0; top: 1px; width: 14px; height: 14px; }
.trust b { display: block; font: 700 12px/16px var(--sans); color: var(--ink); }
.trust span { display: block; margin-top: 2px; font: 400 11px/14px var(--sans); color: var(--muted); }
@media (min-width: 1024px) {
  .hero { aspect-ratio: 1280 / 594; min-height: 520px; }
  .hero__media { position: absolute; inset: 0; height: auto; }
  .hero__photo { position: absolute; left: 38.2%; top: 0; width: 61.8%; height: 100%; }
  .hero__swoosh { display: block; position: absolute; left: -8.36%; top: -4.4%; width: 57.1%; height: 108.2%; max-width: none; }
  .hero__inner { position: absolute; left: 3.36%; top: 10.8%; width: 37.7%; margin: 0; padding: 0; }
}

/* SERVICES */
.svc { background: var(--paper); border-top: 1px solid rgba(229,231,235,.8); border-bottom: 1px solid rgba(229,231,235,.8); padding: 60px 0; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(5, 1fr); } }
.card { display: flex; flex-direction: column; justify-content: space-between; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--orange); transform: translateY(-2px); }
.card__media { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--line-soft); }
.card__media img { width: 100%; height: 150px; object-fit: cover; }
.card__num { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.75); font: 700 10px/15px var(--sans); color: #fff; }
.card__body { display: block; padding-top: 8px; }
.card__body b { display: block; margin-bottom: 4px; font: 700 14px/20px var(--sans); color: var(--ink); }
.card__body > span { display: block; font: 400 12px/19.5px var(--sans); color: var(--muted); }
.card__foot { display: block; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line-soft); font: 600 13px/16px var(--sans); color: var(--body); }
.svc__list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.svc__list:empty { display: none; }
.svc__list li { font: 500 13px/1.4 var(--sans); color: var(--body); }
.svc__list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 9px; vertical-align: middle; }

/* PROCESS */
.proc { background: var(--band); background-image: linear-gradient(180deg, #000 0%, rgba(23,23,23,.9) 100%); color: var(--soft); padding: 64px 0; }
.proc__grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .proc__grid { grid-template-columns: 4fr 8fr; gap: 48px; } }
.proc__text { margin: 14px 0 24px; font: 400 15px/24px var(--sans); color: var(--soft); }
.steps { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { padding: 18px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.steps img { width: 18px; height: 18px; margin-bottom: 12px; }
.steps__num { display: block; font: 700 11px/1.3 var(--sans); letter-spacing: 1px; color: var(--orange); margin-bottom: 8px; }
.steps b { display: block; margin-bottom: 8px; font: 700 14px/1.3 var(--sans); color: #fff; }
.steps p { font: 400 12px/19px var(--sans); color: var(--soft); }

/* BEFORE / AFTER */
.ba { background: #fff; padding: 64px 0; }
.ba__grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .ba__grid { grid-template-columns: 7fr 5fr; gap: 48px; } }
.ba__split { position: relative; display: grid; gap: 12px; grid-template-columns: 1fr; }
.ba__knob { display: none; position: absolute; left: 50%; top: 50%; z-index: 2; width: 40px; height: 40px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); font: 700 18px/1 var(--sans); color: var(--ink); }
@media (min-width: 560px) { .ba__split { grid-template-columns: repeat(2, 1fr); gap: 2px; } .ba__knob { display: grid; } }
.ba__half { position: relative; overflow: hidden; border-radius: 8px; color: #fff; }
.ba__half img { width: 100%; height: 360px; object-fit: cover; }
.ba__half--before { background: #111827; }
.ba__half--after { background: #1c1917; }
.ba__half::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.88) 62%); }
.ba__half figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 20px; }
.ba__label { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 4px; font: 700 10px/15px var(--sans); letter-spacing: 1px; text-transform: uppercase; }
.ba__label--bad { background: rgba(220,38,38,.9); color: #fff; }
.ba__label--good { background: var(--orange); color: #fff; }
.ba__half b { display: block; margin-bottom: 10px; font: 700 18px/1.3 var(--sans); color: #fff; }
.ba__half ul { display: grid; gap: 5px; }
.ba__half li { position: relative; padding-left: 18px; font: 400 12px/18px var(--sans); color: rgba(255,255,255,.82); }
.ba__half--before li::before { content: '\2715'; position: absolute; left: 0; top: 0; color: #f87171; font-size: 10px; }
.ba__half--after li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--orange); font-size: 11px; }
.ba .h2 { margin-bottom: 14px; }
.ba__text { margin-bottom: 14px; font: 400 15px/24px var(--sans); color: var(--body); }
.ba__text:empty { display: none; }
.metrics { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 20px 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.metrics dt { font: 800 clamp(20px, 2.4vw, 28px)/1.1 var(--sans); color: var(--orange); }
.metrics dd { margin-top: 4px; font: 400 11px/16px var(--sans); color: var(--muted); }

/* CLIENT SECTORS */
.seg { background: var(--paper); border-top: 1px solid rgba(229,231,235,.8); padding: 56px 0; }
.seg .h2 { margin-bottom: 32px; max-width: 760px; }
.seg__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .seg__grid { grid-template-columns: repeat(3, 1fr); } }
.seg__card { padding: 22px 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.seg__num { display: inline-block; margin-bottom: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(255,237,213,.8); font: 700 11px/16px var(--sans); color: var(--orange); }
.seg__card b { display: block; margin-bottom: 8px; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.seg__card p { margin-bottom: 14px; font: 400 13px/21px var(--sans); color: var(--muted); }

/* PROJECTS */
.work { background: #fff; border-top: 1px solid rgba(229,231,235,.8); padding: 60px 0; }
.work__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work__grid { grid-template-columns: repeat(4, 1fr); } }
.proj { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.proj__media { position: relative; overflow: hidden; }
.proj__media img { width: 100%; height: 180px; object-fit: cover; transition: transform .6s ease; }
.proj:hover .proj__media img { transform: scale(1.04); }
.proj__tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.9); font: 600 10px/15px var(--sans); color: var(--ink); }
.proj__body { padding: 16px 18px 18px; }
.proj__body b { display: block; margin-bottom: 6px; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.proj__body p { margin-bottom: 12px; font: 400 12px/19px var(--sans); color: var(--muted); }
.proj--more { position: relative; display: block; min-height: 220px; background: #000; border-color: #000; text-decoration: none; overflow: hidden; }
.proj--more__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.proj--more__body { position: relative; z-index: 1; display: block; padding: 20px; color: #fff; }
.proj--more__eyebrow { display: block; margin-bottom: 8px; font: 700 10px/16px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); }
.proj--more b { display: block; margin-bottom: 14px; font: 700 18px/1.3 var(--sans); color: #fff; }
.proj--more__link { font: 600 12px/1.4 var(--sans); color: #fff; }

/* GROUND TELLS A STORY */
.ground { background: #fff; border-top: 1px solid #f1f5f9; padding: 56px 0; }
.ground__grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ground__grid { grid-template-columns: 5fr 7fr; gap: 48px; } }
.ground__text { margin: 14px 0 22px; font: 400 15px/24px var(--sans); color: var(--body); }
.zones { display: grid; gap: 10px; margin-bottom: 20px; }
.zones li { padding: 14px 16px; background: #faf9f6; border: 1px solid var(--line-2); border-radius: 12px; }
.zones li.is-active { background: #fff; border-color: var(--orange); }
.zones__num { display: block; font: 700 10px/1.3 var(--sans); letter-spacing: 1.2px; color: var(--orange); margin-bottom: 6px; }
.zones b { display: block; margin-bottom: 4px; font: 700 12px/1.3 var(--sans); letter-spacing: .8px; text-transform: uppercase; color: var(--ink); }
.zones p { font: 400 13px/20px var(--sans); color: var(--muted); }

/* Architectural cross-section (1:2737): the design's vectors placed as
   percentages of its 633 x 435 box; the hotspots and the floating card too. */
.xsec { padding: 25px; background: var(--panel); border: 1px solid rgba(226,232,240,.8); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.xsec__frame { padding: 1px; background: #111a24; border: 1px solid rgba(51,65,85,.6); border-radius: 16px; overflow: hidden; }
.draw { position: relative; width: 100%; aspect-ratio: 633 / 435; container-type: inline-size; overflow: hidden; }
.draw__v { position: absolute; max-width: none; }
.draw__v0 { left: .07%; top: 0; width: 99.86%; height: 41.82%; }
.draw__v3 { left: .07%; top: 41.82%; width: 99.86%; height: 58.18%; }
.draw__v4 { left: .07%; top: 60%; width: 99.86%; height: 40%; }
.draw__v5 { left: .07%; top: 77.27%; width: 99.86%; height: 22.73%; }
.draw__v6 { left: .07%; top: 41.82%; width: 99.86%; height: 5.45%; }
.draw__v7 { left: .07%; top: 41.82%; width: 99.86%; height: 3.27%; }
.draw__v1a { left: 10.06%; top: 3.64%; width: 1px; height: 90.91%; }
.draw__v1b { left: 89.94%; top: 3.64%; width: 1px; height: 90.91%; }
.draw__v2 { left: 6.31%; top: 41.82%; width: 87.38%; height: 1px; }
.draw__v8 { left: 20.04%; top: 8.18%; width: 42.44%; height: 33.64%; }
.draw__v9 { left: 41.26%; top: 8.18%; width: 21.22%; height: 33.64%; }
.draw__v10 { left: 18.79%; top: 7.64%; width: 44.94%; height: 13.81%; }
.draw__v11 { left: 25.66%; top: 24.55%; width: 8.74%; height: 10.9%; }
.draw__v12a { left: 25.91%; top: 24.91%; width: 3.99%; height: 10.18%; }
.draw__v12b { left: 30.15%; top: 24.91%; width: 4%; height: 10.18%; }
.draw__v13 { left: 26.16%; top: 25.27%; width: 3.49%; height: 9.46%; }
.draw__v14 { left: 30.4%; top: 25.27%; width: 3.5%; height: 9.46%; }
.draw__v15 { left: 43.76%; top: 27.27%; width: 14.35%; height: 13.64%; }
.draw__v16 { left: 44.01%; top: 27.64%; width: 13.85%; height: 12.91%; }
.draw__v17 { left: 22.54%; top: 67.27%; width: 36.2%; height: 4.73%; }
.draw__v18 { left: 54.99%; top: 67.27%; width: 7.49%; height: 7.64%; }
.draw__v19 { left: 53.12%; top: 74.91%; width: 11.23%; height: 4%; }
.draw__v20 { left: 54.99%; top: 41.82%; width: 3.75%; height: 25.82%; opacity: .7; }
.draw__v21 { left: 58.99%; top: 41.82%; width: 1px; height: 29.09%; opacity: .7; }
.draw__dash { position: absolute; left: 59.36%; top: 47.27%; width: 8.11%; height: 28.73%; border: 1px dashed #5f6d7d; opacity: .7; }
.draw__v22 { left: 61.11%; top: 68.36%; width: 3.99%; height: 5.82%; opacity: .7; }
.draw__v23 { left: 61.73%; top: 69.27%; width: 2.75%; height: 4%; opacity: .7; }
.draw__v24 { left: 62.36%; top: 70.18%; width: 1.5%; height: 2.18%; opacity: .7; }
.draw__v25 { left: 61.86%; top: 61.82%; width: 2.49%; height: 5.82%; opacity: .7; }
.draw__v26 { left: 59.36%; top: 40.36%; width: 26.84%; height: 5.46%; opacity: .7; }
.draw__v27 { left: 85.7%; top: 45.09%; width: 1.5%; height: 1.82%; opacity: .7; }
.draw__v28 { left: 60.24%; top: 37.27%; width: 19.72%; height: 4.73%; opacity: .7; }
.draw__v29a { left: 5.06%; top: 41.82%; width: 2.5%; height: 1px; opacity: .65; }
.draw__v29b { left: 5.06%; top: 71.27%; width: 2.5%; height: 1px; opacity: .65; }
.draw__v30 { left: 6.31%; top: 41.82%; width: 1px; height: 29.45%; opacity: .65; }
.draw__bed { position: absolute; left: 6.3%; top: 41.6%; height: 14.7%; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 clamp(6px, 1.13cqw, 7.2px)/1 var(--sans); letter-spacing: .1em; color: #8ca0b5; opacity: .65; white-space: nowrap; }
.hot { position: absolute; width: 7.56%; aspect-ratio: 1; display: grid; place-items: center; }
.hot::before { content: ''; position: absolute; inset: 16.7%; border-radius: 50%; background: var(--orange); opacity: .6; }
.hot i { position: relative; display: grid; place-items: center; width: 58%; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: var(--orange); font: 700 clamp(7px, 1.9cqw, 12px)/1 var(--sans); font-style: normal; color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.hot--1 { left: 52.21%; top: 66.41%; }
.hot--1 i { width: 73%; box-shadow: 0 0 0 4px rgba(244,117,3,.4), 0 10px 15px -3px rgba(0,0,0,.1); }
.hot--2 { left: 59.18%; top: 64.42%; }
.hot--3 { left: 53.2%; top: 46.5%; }
.hot--4 { left: 67.16%; top: 35.55%; }
.tip { position: absolute; left: 2.5%; bottom: 3.7%; max-width: min(320px, 55%); padding: 15px; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.tip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 7px; margin-bottom: 7.5px; border-bottom: 1px solid rgba(255,255,255,.1); }
.tip__tag { font: 700 10px/15px ui-monospace, "Cascadia Mono", Menlo, monospace; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); }
.tip__std { font: 400 9px/13.5px var(--sans); color: var(--soft); white-space: nowrap; }
.tip p { font: 400 12px/19.5px var(--sans); color: #e2e8f0; }
@media (max-width: 559px) { .tip { display: none; } .draw__bed { display: none; } }
.xsec__legend { display: grid; gap: 12px; padding: 14px 8px 0; }
.xsec__legend-row { display: flex; flex-wrap: wrap; gap: 16px; }
.xsec__legend-row > span { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/16.5px var(--sans); color: var(--soft); }
.lg { display: inline-block; }
.lg--dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.lg--line { width: 10px; height: 2px; background: #48a5c4; }
.lg--box { width: 8px; height: 8px; border: 1px solid var(--soft); }
.xsec__cap { font: 400 10px/15px var(--sans); color: var(--soft); }
.link--navy { color: var(--navy); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
.ground__title { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -1px; font-weight: 700; }
.zones li { display: flex; align-items: flex-start; gap: 14px; }
.zones__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); font: 700 12px/1 var(--sans); color: #fff; margin: 0; }
.zones li.is-active .zones__num { background: var(--orange); }
.zones b { color: var(--navy); letter-spacing: .3px; }
.zones p { color: #64748b; font-size: 12px; line-height: 16.5px; }


/* Panel pages + FAQ */
.section { background: #fff; padding: 56px 0; border-top: 1px solid var(--line); }
.container { width: min(1276px, 100% - 2rem); margin-inline: auto; }
.container--narrow { width: min(860px, 100% - 2rem); }
.page-blocks h2 { font: 800 clamp(22px, 3vw, 30px)/1.15 var(--sans); letter-spacing: -.8px; color: var(--ink); margin-bottom: 16px; }
.page-blocks h3 { font: 700 18px/1.3 var(--sans); color: var(--ink); margin: 20px 0 8px; }
.page-blocks p, .page-blocks li { font: 400 15px/24px var(--sans); color: var(--body); }
.page-blocks p { margin-bottom: 12px; }
.page-blocks li { position: relative; padding-left: 18px; }
.page-blocks li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* FULL-WIDTH CTA (1:2541): the cabin photo, the lake at 25% luminosity over it, a black gradient. */
.cta { position: relative; padding: 64px 0; color: #fff; overflow: hidden; background: #000; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__bg-lake { opacity: .25; mix-blend-mode: luminosity; object-position: 50% 40%; }
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 50%, rgba(36,19,6,.9) 100%); }
.cta__grid { position: relative; z-index: 1; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .cta__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.cta .eyebrow { font-size: 14px; margin-bottom: 6px; }
.cta .h2 { font-size: clamp(26px, 2.9vw, 36px); letter-spacing: -.9px; line-height: 1; }
.cta__text { max-width: 448px; margin-bottom: 18px; font: 400 13px/21.13px var(--sans); color: #d1d5db; }
.cta__text:empty { display: none; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cta__actions .btn { font-size: 12px; }
.cta__phone { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/16px var(--sans); color: #fff; text-decoration: none; }
.cta__phone:hover { color: var(--orange); }
.cta__part { display: inline-flex; align-items: center; gap: 6px; padding-left: 17px; border-left: 1px solid rgba(255,255,255,.2); font: 400 12px/16px var(--sans); color: var(--soft); }
.cta__part b { font-weight: 700; letter-spacing: .6px; color: #d1d5db; }
.cta__part a { font-weight: 600; color: #fff; text-decoration: none; }

/* FOOTER */
.ft { background: #000; color: #a3a3a3; border-top: 1px solid #171717; padding: 48px 0 32px; }
.ft__grid { display: grid; gap: 24px; grid-template-columns: 1fr; padding-bottom: 41px; border-bottom: 1px solid #262626; }
@media (min-width: 640px) { .ft__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ft__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; } }
.ft__brand img { width: 164px; height: auto; object-fit: contain; margin-bottom: 14px; }
.ft__bio { max-width: 340px; font: 400 13px/21px var(--sans); color: #a3a3a3; margin-bottom: 12px; }
.ft__region { font: 400 12px/19px var(--sans); color: #737373; }
.ft__label { font: 700 10px/16px var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.ft__label--eco { color: var(--orange); }
.ft__eco-sub { font: 400 10px/15px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: #737373; margin-bottom: 12px; }
.ft__links { display: flex; flex-direction: column; gap: 8px; }
.ft__links a { font: 400 13px/20px var(--sans); color: #a3a3a3; text-decoration: none; }
.ft__links a:hover { color: #fff; }
.ft__social { display: flex; gap: 12px; margin-bottom: 14px; }
.ft__social a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #262626; border-radius: 6px; }
.ft__hours { font: 400 12px/20px var(--sans); color: #a3a3a3; }
.ft__hours a { text-decoration: none; }
.ft__hours a:hover { color: #fff; }
.ft__eco { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 8px; }
.ft__eco a { font: 600 10px/15px var(--sans); letter-spacing: .5px; text-transform: uppercase; color: #a3a3a3; text-decoration: none; }
.ft__eco a:hover { color: #fff; }
.ft__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 22px; font: 400 11px/18px var(--sans); color: #737373; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.ft__legal a { text-decoration: none; }
.ft__legal a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .proj__media img, .card { transition: none; }
}