/* Vitræna — vitraena.is. Dark only. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:        #0b1316;
  --surface:   #111c20;
  --surface-2: #0e181c;
  --ink:       #e8f0f2;
  --ink-2:     #9fb2b9;
  --ink-3:     #667a82;
  --rule:      #1d2b31;
  --accent:    #6fcbe6;
  --accent-2:  #9cdcef;
  --tint:      #123240;
  --hl:        #143b4a;
  --contour:   111,203,230;
  --contour-a: .22;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; }
body {
  font-family:"Schibsted Grotesk", system-ui, sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 28px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* in-page jumps stop below the sticky nav instead of under it */
[id] { scroll-margin-top:69px; }

/* skip link */
.skip {
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--accent); color:var(--bg); padding:.6rem 1rem; border-radius:8px;
  font-weight:600; text-decoration:none; transition:top .15s;
}
.skip:focus { top:1rem; }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.nav .wrap { display:flex; align-items:center; height:68px; gap:2.5rem; }
.wordmark { font-weight:700; font-size:1.3rem; letter-spacing:-.03em; text-decoration:none; }
.wordmark .ae { color:var(--accent); }
.links { display:flex; gap:2rem; margin-left:auto; }
.links a { font-size:.93rem; font-weight:500; color:var(--ink-2); text-decoration:none; transition:color .15s; white-space:nowrap; }
.links a:hover, .links a[aria-current] { color:var(--ink); }
.controls { display:flex; align-items:center; gap:.5rem; margin-left:.25rem; }
.seg { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--rule); border-radius:999px; background:var(--surface); }
.seg a {
  font-size:.74rem; font-weight:600; letter-spacing:.04em; text-decoration:none;
  color:var(--ink-3); padding:4px 10px; border-radius:999px; line-height:1.2;
  transition:color .15s, background .15s;
}
.seg a:hover { color:var(--ink); }
.seg a[aria-current] { background:var(--tint); color:var(--accent); }
.cta {
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--accent);
  background:var(--tint); padding:.6rem 1.1rem; border-radius:999px; white-space:nowrap;
  transition:background .15s, transform .15s;
}
.cta:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--tint) 80%, var(--accent)); }
/* phone menu: hidden on desktop, see the max-width:860px block */
.menu-btn, .menu-panel { display:none; }

/* ---------- hero (home) ---------- */
.hero { position:relative; min-height:calc(100vh - 68px); display:flex; align-items:flex-end; overflow:hidden; }
.hero canvas, .hero .fallback { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero .fallback { display:none; }
.hero .wrap { position:relative; width:100%; padding-bottom:6.5rem; padding-top:6rem; }
.hero h1 { font-size:clamp(3rem, 8.2vw, 6.6rem); font-weight:600; line-height:.98; letter-spacing:-.045em; max-width:12ch; }
.hl {
  background-image:linear-gradient(90deg, var(--hl), var(--hl));
  background-size:0% 38%; background-position:0 78%; background-repeat:no-repeat;
  padding:0 .04em; margin:0 -.04em;
  animation:sweep .9s cubic-bezier(.2,.7,.2,1) .7s forwards;
}
@keyframes sweep { to { background-size:100% 38%; } }
.hero .sub { margin-top:1.75rem; font-size:1.15rem; color:var(--ink-2); max-width:50ch; }
.hero .btn-row { margin-top:2rem; }
/* short enough that the services heading and card tops show below it */
.hero.peek { min-height:max(520px, calc(100svh - 69px - 14rem)); }
.hero.peek .wrap { padding-top:4rem; padding-bottom:3.5rem; }
.scroll-cue {
  position:absolute; right:28px; bottom:2.5rem; width:44px; height:44px;
  display:grid; place-items:center; border:1px solid var(--rule); border-radius:8px;
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter:blur(4px); color:var(--ink); text-decoration:none;
  animation:nudge 2.6s ease-in-out infinite;
}
.scroll-cue svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---------- page head (subpages) ---------- */
.page-head { padding:4.5rem 0 3rem; border-bottom:1px solid var(--rule); }
.page-head h1 { font-size:clamp(2.6rem, 5.6vw, 4.2rem); font-weight:600; line-height:1.02; letter-spacing:-.04em; max-width:14ch; }
.page-head .sub { margin-top:1.4rem; font-size:1.15rem; color:var(--ink-2); max-width:52ch; }
.crumb { display:inline-block; margin-bottom:1.1rem; font-size:.9rem; color:var(--ink-3); text-decoration:none; }

/* ---------- sections ---------- */
section { padding:4.5rem 0; }
section + section { border-top:1px solid var(--rule); }
.tight .page-head { padding:3.75rem 0 2.25rem; }
.tight section { padding:3rem 0; }
.tight .cta-strip { padding-top:0; border-top:0; }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2rem; flex-wrap:wrap; }
.sec-head h2 { font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.sec-head .all { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
.sub-h { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; margin-bottom:1.25rem; }
.eyebrow { font-size:.85rem; font-weight:600; color:var(--accent); letter-spacing:.02em; margin-bottom:.7rem; }

/* two-column text pages (privacy) */
.two { display:grid; grid-template-columns:1fr 2fr; gap:3rem; }
.two h2 { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.two > h2, .two > :first-child > h2 { position:sticky; top:96px; }

.prose { max-width:62ch; color:var(--ink-2); }
.prose p + p { margin-top:1rem; }
.prose h2, .prose h3 { font-size:1.25rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin:2.5rem 0 .75rem; }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose ul { margin:.75rem 0 1rem 1.2rem; }
.prose li { margin-bottom:.35rem; }
.prose a { color:var(--accent); text-decoration:none; }
.prose a:hover { text-decoration:underline; text-underline-offset:3px; }
.prose strong { color:var(--ink); font-weight:600; }
.prose code { font-family:ui-monospace, monospace; font-size:.9em; color:var(--ink); }
.updated { color:var(--ink-3); font-size:.9rem; margin-bottom:2rem; }

/* screenshot frame */
.shot {
  display:block; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--rule); background:var(--surface);
  overflow:hidden; position:relative; box-shadow:var(--shadow);
}
.shot img { display:block; width:100%; height:100%; object-fit:cover; }

/* details list */
.details { display:grid; grid-template-columns:max-content 1fr; gap:.7rem 2.5rem; font-size:.98rem; }
.details dt { color:var(--ink-3); }
.details dd { color:var(--ink); }
.details a { color:var(--accent); text-decoration:none; }
.details a:hover { text-decoration:underline; text-underline-offset:3px; }

/* buttons */
.btn {
  display:inline-block; font-size:.95rem; font-weight:600; text-decoration:none;
  background:var(--accent); color:var(--bg); padding:.85rem 1.4rem; border-radius:10px;
  transition:background .15s, transform .15s;
}
.btn:hover { background:var(--accent-2); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.btn.ghost:hover { background:var(--surface); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.btn.small { padding:.65rem 1.1rem; font-size:.9rem; }
.btn-row { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.75rem; }
.btn-row.center { justify-content:center; }

/* ---------- service cards (home) ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
.svc {
  background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:1.75rem 1.6rem 1.6rem;
  display:flex; flex-direction:column; gap:.65rem; transition:border-color .2s, transform .2s;
}
.svc .icon { width:42px; height:42px; border-radius:10px; background:var(--tint); color:var(--accent); display:grid; place-items:center; margin-bottom:.35rem; }
.svc .icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc h3 { font-size:1.3rem; font-weight:600; letter-spacing:-.025em; }
.svc p { color:var(--ink-2); font-size:.96rem; }
.svc .more { margin-top:auto; padding-top:.6rem; color:var(--accent); font-weight:600; text-decoration:none; font-size:.95rem; }
.svc.tight { padding:1.35rem 1.45rem 1.3rem; gap:.55rem; }
.svc-top { display:flex; align-items:center; gap:.75rem; }
.svc.tight .icon { width:34px; height:34px; border-radius:9px; margin:0; }
.svc.tight .icon svg { width:18px; height:18px; }
.svc.tight h3 { font-size:1.2rem; }
.svc.tight p { font-size:.94rem; }
.svc .kw { font-size:.8rem; color:var(--ink-3); letter-spacing:.01em; }
.svc.tight .more { padding-top:.3rem; font-size:.9rem; }

/* ---------- projects as a list ---------- */
.proj-list { border-top:1px solid var(--rule); }
.proj-row {
  display:grid; grid-template-columns:96px 1fr 9rem auto; gap:1.5rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--rule); text-decoration:none;
}
.proj-row .mini { width:96px; height:54px; border-radius:8px; overflow:hidden; border:1px solid var(--rule); background:var(--surface-2); }
.proj-row .mini img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.proj-row .name { font-size:1.2rem; font-weight:600; letter-spacing:-.02em; }
.proj-row .kind { display:block; color:var(--ink-3); font-size:.88rem; }
.proj-row .arrow { color:var(--ink-3); transition:transform .2s, color .2s; width:1rem; }
.proj-row.nostat { grid-template-columns:96px 1fr auto; }

/* ---------- how we work + contact card (home, about) ---------- */
.close-two { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.close-two h2 { font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.steps { margin-top:1.5rem; }
.steps > div { padding:1.1rem 0; border-top:1px solid var(--rule); }
.steps h3 { font-size:1.08rem; font-weight:600; letter-spacing:-.02em; }
.steps p { color:var(--ink-2); font-size:.95rem; margin-top:.2rem; }
.contact-card {
  padding:2.2rem 2.2rem 2rem; background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  background-image:radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--tint) 90%, transparent), transparent 60%);
}
.contact-card p { color:var(--ink-2); margin-top:.6rem; }
.contact-card .mailto { display:inline-block; margin-top:1.4rem; font-size:1.35rem; font-weight:600; color:var(--accent); text-decoration:none; letter-spacing:-.02em; }
.contact-card .details { margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--rule); font-size:.9rem; gap:.4rem 2rem; }

/* one-line contact band at the bottom of subpages */
.cta-strip .box {
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem 2.5rem; flex-wrap:wrap;
  padding:2.4rem 2.6rem; background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  background-image:radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--tint) 90%, transparent), transparent 60%);
}
.cta-strip h2 { font-size:clamp(1.5rem, 3vw, 2rem); font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.cta-strip p { color:var(--ink-2); margin-top:.4rem; max-width:48ch; }
.cta-strip .mailto { font-size:clamp(1.15rem, 2.2vw, 1.4rem); font-weight:600; color:var(--accent); text-decoration:none; letter-spacing:-.02em; }

/* ---------- services page ---------- */
.svc-split { display:grid; grid-template-columns:290px 1fr; gap:3.5rem; align-items:start; }
.svc-side { position:sticky; top:100px; }
.svc-side .icon { width:42px; height:42px; border-radius:10px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.svc-side .icon svg, .svc-tab .icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc-side h2 { font-size:2rem; font-weight:600; letter-spacing:-.035em; line-height:1.1; margin-top:.9rem; }
.svc-side .lead { color:var(--ink); font-weight:500; margin-top:.5rem; }
.svc-side .note { color:var(--ink-3); font-size:.9rem; margin-top:.7rem; }
.offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.5rem; }
.offer-grid > div { border-top:1px solid var(--rule); padding-top:1rem; }
.offer-grid h3 { font-size:1.05rem; font-weight:600; letter-spacing:-.015em; margin-bottom:.25rem; }
.offer-grid p { color:var(--ink-2); font-size:.94rem; }
.steps4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem 2rem; }
.steps4 > div { border-top:1px solid var(--rule); padding-top:1rem; }
.steps4 .n { color:var(--accent); font-weight:600; font-size:.85rem; font-variant-numeric:tabular-nums; }
.steps4 h3 { font-size:1.05rem; font-weight:600; letter-spacing:-.015em; margin:.3rem 0 .25rem; }
.steps4 p { color:var(--ink-2); font-size:.92rem; }
/* the jump bar: one card per service, sticks under the nav;
   spy.js marks the one for the section you're reading with .on */
.jump-bar {
  position:sticky; top:69px; z-index:40; padding:.6rem 0; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.jump-bar ~ section[id] { scroll-margin-top:var(--jump-stop, 149px); }
.jump-bar ~ section .svc-side { top:173px; }
.svc-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; }
.svc-tab {
  display:flex; gap:.85rem; align-items:center; padding:.6rem 1rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; transition:border-color .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.svc-tab.on { border-color:var(--accent); background:var(--tint); }
.svc-tab .icon { width:38px; height:38px; flex:none; border-radius:9px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.svc-tab.on .icon { background:var(--bg); }
.svc-tab span:last-child { display:flex; flex-direction:column; line-height:1.3; }
.svc-tab b { font-size:1.1rem; font-weight:600; }
.svc-tab small { color:var(--ink-3); font-size:.82rem; }

/* ---------- projects page ---------- */
.proj-bleed {
  display:grid; grid-template-columns:1fr 1.15fr; min-height:400px; overflow:hidden;
  background:var(--surface); border:1px solid var(--rule); border-radius:16px;
}
.proj-bleed .body { padding:2.1rem 2.2rem; display:flex; flex-direction:column; gap:.65rem; }
.proj-bleed h2 { font-size:2rem; font-weight:600; letter-spacing:-.035em; line-height:1.05; }
.proj-bleed .eyebrow { margin:0; color:var(--accent); }
.proj-bleed p { color:var(--ink-2); }
.proj-bleed .details { margin-top:.5rem; font-size:.9rem; gap:.4rem 1.75rem; }
.proj-bleed .btn-row { margin-top:auto; padding-top:1rem; }
.proj-bleed .art {
  position:relative; display:block; overflow:hidden; border-left:1px solid var(--rule);
  background:radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--tint) 85%, transparent), transparent 70%), var(--surface-2);
}
.proj-bleed .art img {
  position:absolute; left:50%; top:50%; width:86%; border-radius:10px; border:1px solid var(--rule);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9); transform-origin:50% 50%;
  transform:translate(-50%,-50%) perspective(1600px) rotateY(-10deg) rotateX(2deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.title-link { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.3em; }
.title-link svg { width:.5em; height:.5em; color:var(--ink-3); transition:color .2s, transform .2s; }

/* ---------- torrex page ---------- */
.t-shot { margin-top:.25rem; }
.t-body { display:grid; grid-template-columns:1fr 320px; gap:3rem; align-items:start; }
.took-h { font-size:1.05rem; font-weight:600; color:var(--ink-3); letter-spacing:.02em; margin:0 0 1.25rem; }
.duo { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem 2.5rem; }
.duo > div { border-top:1px solid var(--rule); padding-top:1.2rem; }
.duo h3 { font-size:1.1rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.35rem; }
.duo p { color:var(--ink-2); font-size:.95rem; max-width:52ch; }
.facts-panel { position:sticky; top:96px; padding:1.4rem 1.5rem; background:var(--surface); border:1px solid var(--rule); border-radius:14px; }
.facts-panel .details { grid-template-columns:max-content 1fr; font-size:.92rem; gap:.5rem 1.5rem; }
.facts-panel .btn { margin-top:1.25rem; width:100%; text-align:center; }
.t-legal { display:grid; grid-template-columns:1fr 2fr; gap:3rem; }
.t-legal h2 { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; }

/* ---------- about page ---------- */
.about-one { display:grid; grid-template-columns:1.25fr 1fr; gap:3.5rem; align-items:start; }
.about-one .prose { max-width:none; }
.about-one h2 { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; margin:2.5rem 0 1rem; }
.about-one .contact-card h2 { margin:0; }

/* 404 */
.notfound { padding:10rem 0; text-align:center; }
.notfound .code { font-size:clamp(4rem,12vw,7rem); font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--ink-3); }
.notfound h1 { margin-top:1rem; font-size:1.6rem; font-weight:600; letter-spacing:-.02em; }
.notfound p { margin-top:.75rem; color:var(--ink-2); }

/* footer */
footer { border-top:1px solid var(--rule); padding:2.5rem 0 3rem; font-size:.88rem; color:var(--ink-3); }
footer .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
footer a { color:var(--ink-3); text-decoration:none; }
footer a:hover { color:var(--ink); }
footer .row { display:flex; gap:1.25rem; flex-wrap:wrap; }

/* reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* hover only where there's a real pointer: a phone keeps :hover on whatever was tapped last */
@media (hover:hover) {
  .sec-head .all:hover, .svc .more:hover, .cta-strip .mailto:hover { text-decoration:underline; text-underline-offset:3px; }
  .cta-strip .mailto:hover { text-underline-offset:5px; }
  .crumb:hover { color:var(--accent); }
  .svc:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); transform:translateY(-2px); }
  a.proj-row:hover .name { color:var(--accent); }
  a.proj-row:hover .arrow { color:var(--accent); transform:translateX(4px); }
  .svc-tab:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--rule)); background:var(--tint); }
  .svc-tab:hover .icon { background:var(--bg); }
  .proj-bleed:hover .art img { transform:translate(-50%,-50%) perspective(1600px) rotateY(-3deg) rotateX(1deg); }
  .title-link:hover { color:var(--accent-2); }
  .title-link:hover svg { color:var(--accent); transform:translate(.08em,-.08em); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .scroll-cue { animation:none; }
  .hl { animation:none; background-size:100% 38%; }
  .cta, .btn, .svc, .proj-bleed .art img { transition:none; }
}

@media (max-width:860px) {
  /* header: one slim row (logo, Get in touch, menu button); links and EN/IS move into the menu */
  .nav .wrap { flex-wrap:nowrap; height:60px; gap:.75rem; }
  .nav .links, .nav .controls { display:none; }
  .cta { padding:.5rem .9rem; font-size:.85rem; }
  .nav > .wrap > .cta { margin-left:auto; }
  .menu-btn {
    display:grid; place-items:center; width:44px; height:44px; margin-right:-10px;
    background:none; border:0; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .menu-btn svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; fill:none; }
  .menu-btn .x, .nav.open .menu-btn .bars { display:none; }
  .nav.open .menu-btn .x { display:block; }
  .nav.open .menu-panel { display:block; }
  .menu-panel {
    position:absolute; left:0; right:0; top:100%; padding:.25rem 0 1.25rem;
    background:var(--bg); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    box-shadow:0 24px 48px -24px rgba(0,0,0,.8);
  }
  .nav .menu-panel .wrap { display:block; height:auto; }
  .menu-panel nav a {
    display:flex; justify-content:space-between; align-items:center; padding:.95rem 0; border-bottom:1px solid var(--rule);
    font-size:1.2rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
  }
  .menu-panel nav a[aria-current] { color:var(--accent); }
  .menu-panel nav a::after { content:"→"; color:var(--ink-3); font-weight:400; }
  .menu-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
  .menu-panel .seg a { padding:8px 14px; font-size:.8rem; }

  /* the header is 61px tall here */
  [id] { scroll-margin-top:61px; }
  .jump-bar { top:61px; padding:.5rem 0; }

  section { padding:3.25rem 0; }
  .page-head { padding:4.5rem 0 3rem; }
  .tight .page-head { padding:2.75rem 0 1.75rem; }
  .tight section { padding:2.25rem 0; }
  .hero.peek { min-height:max(460px, calc(100svh - 61px - 8rem)); }
  .hero.peek .wrap { padding-bottom:3.5rem; }
  .two, .t-body, .t-legal { grid-template-columns:1fr; gap:1.75rem; }
  .two > h2, .two > :first-child > h2 { position:static; }
  .details { grid-template-columns:1fr; gap:.2rem; }
  .details dd { margin-bottom:.8rem; }
  .svc-grid { grid-template-columns:1fr; gap:1.25rem; }
  .proj-row, .proj-row.nostat { grid-template-columns:72px 1fr auto; gap:.4rem 1rem; }
  .proj-row .mini { width:72px; height:41px; }
  .proj-row .arrow { grid-column:3; grid-row:1 / 3; }
  .close-two { grid-template-columns:1fr; gap:2rem; }
  .contact-card { padding:1.6rem 1.4rem; }
  .cta-strip .box { padding:1.75rem 1.5rem; }
  .svc-split, .offer-grid, .steps4 { grid-template-columns:1fr; }
  .svc-split { gap:1.5rem; }
  .svc-side { position:static; }
  .svc-tabs { gap:.4rem; }
  .svc-tab { padding:.5rem .4rem; justify-content:center; }
  .svc-tab .icon, .svc-tab small { display:none; }
  .svc-tab b { font-size:.95rem; }
  .proj-bleed { grid-template-columns:1fr; }
  .proj-bleed .art { order:-1; aspect-ratio:16/10; border-left:0; border-bottom:1px solid var(--rule); }
  .proj-bleed .body { padding:1.5rem 1.4rem; }
  .duo { grid-template-columns:1fr; gap:1.5rem; }
  .facts-panel { position:static; order:-1; }
  .about-one { grid-template-columns:1fr; gap:2.5rem; }
}