/*
 * Naxdor concept template "Hantverk", design "Nordisk" (founder's choice 2026-10-23).
 * From the founder's reference picks: Scandiwest (the name across the landscape), Brightstone
 * (serif with italic accents, photos off the grid), Myresjöhus (a headline card on the photo, a mosaic).
 * Per page, <html> sets --brand, --on-brand, --brand-strong, --brand-wash, --deep and --name-size.
 * Fonts: Fraunces (display) and Inter (text), SIL Open Font License, self-hosted.
 */
@font-face { font-family: "Fraunces"; font-weight: 300 700; font-style: normal; font-display: swap; src: url("fonts/fraunces-var.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 300 700; font-style: italic; font-display: swap; src: url("fonts/fraunces-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("fonts/inter-var.woff2") format("woff2"); }

:root {
  --page: #F4F5F1;
  --stone: #E6E9E2;
  --ink: #1B221F;
  --muted: #59635D;
  --line: #CCD2CA;
  --white: #FFFFFF;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px;
  --brand: #2F5D50;
  --on-brand: #FFFFFF;
  --brand-strong: #2F5D50;
  --brand-wash: #E3EBE8;
  --deep: #0F1F1B;
  --name-size: 14vw;
  --head-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 17px/1.65 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--brand-strong); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.section { padding-block: clamp(72px, 9vw, 128px); }
.h-xl { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; }
/* Eyebrow: a short sentence-case label with an icon above a heading. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 14.5px/1.2 var(--sans); color: var(--brand-strong); }
.eyebrow .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-strong); stroke-width: 1.9; }
.hero-card .eyebrow { margin-bottom: 12px; }
section[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

/* Concept notice (approved wording in leadmart docs/legal/texter-sv.md § D2) */
.concept-bar { background: var(--deep); color: rgb(255 255 255 / 0.86); font: 500 13px/1.45 var(--sans); padding-block: 9px; }
.concept-bar a { color: inherit; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; font: 600 15.5px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease; }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-strong); }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-glass { min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--white); background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); backdrop-filter: blur(8px); }

/* Hero: their name across a landscape, the headline on a card */
/* Header: sticky. See-through over the hero photo, a frosted bar in the brand's deep shade once the
   page scrolls (a scroll-driven animation, no script; browsers without it show the bar from the start). */
.top { position: sticky; top: 0; z-index: 20; color: var(--white); background-color: color-mix(in srgb, var(--deep) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); }
@supports (animation-timeline: scroll()) {
  .top { animation: top-solid linear both; animation-timeline: scroll(root); animation-range: 0 260px; }
}
@keyframes top-solid {
  from { background-color: transparent; backdrop-filter: none; box-shadow: none; }
  to { background-color: color-mix(in srgb, var(--deep) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 30px -22px rgb(0 0 0 / 0.7); }
}
.top-in { display: flex; align-items: center; gap: 28px; min-height: var(--head-h); }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(680px, 94vh, 920px); margin-top: calc(-1 * var(--head-h)); padding-top: var(--head-h); color: var(--white); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(9 15 12 / 0.62) 0%, rgb(9 15 12 / 0.18) 34%, rgb(9 15 12 / 0) 52%, rgb(9 15 12 / 0.5) 100%); }
.hero > .wrap { width: 100%; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark-badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--brand-strong); }
.mark-badge .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.mark-name { font: 500 21px/1 var(--serif); letter-spacing: -0.01em; }
.top nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.top nav a { text-decoration: none; padding-block: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size 0.25s ease; }
.top nav a:hover, .top nav a:focus-visible { background-size: 100% 1.5px; }
.menu { display: none; }
.masthead { margin: clamp(4px, 1.6vw, 24px) 0 0; font: 400 var(--name-size)/0.86 var(--serif); letter-spacing: -0.045em; text-align: center; white-space: nowrap; color: rgb(255 255 255 / 0.95); text-shadow: 0 2px 40px rgb(0 0 0 / 0.25); }
.hero-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-block: 48px 44px; }
.hero-card { width: min(540px, 100%); background: rgb(249 250 247 / 0.96); color: var(--ink); border-radius: var(--r); padding: clamp(24px, 3vw, 34px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55); }
.hero-card h1 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.04; }
.hero-card p:not(.eyebrow) { margin-top: 14px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-weight: 500; font-size: 15.5px; text-shadow: 0 1px 14px rgb(0 0 0 / 0.6); }
.hero-trust li { display: flex; align-items: flex-start; gap: 10px; }
.hero-trust .ico { flex: none; width: 18px; height: 18px; margin-top: 0.2em; stroke-width: 2.2; }

/* Intro: the promise, four points, two photos placed off the grid */
.intro .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.points { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
.points li { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.points .ico { width: 26px; height: 26px; color: var(--brand-strong); margin-bottom: 4px; }
.points h3 { font-size: 23px; letter-spacing: -0.01em; }
.points p { color: var(--muted); font-size: 15.5px; }
.duo { position: relative; padding-bottom: 16%; }
.duo .p1 { width: 80%; margin-left: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.duo .p2 { position: absolute; left: 0; bottom: 0; width: 48%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 10px solid var(--page); }

/* Ribbon: a thin full-width strip with the trade's services moving slowly, after the founder's
   reference (2026-10-23): fine lines above and below, small text, brand-coloured dots, soft edges. */
.ribbon { background: var(--white); border-block: 1px solid var(--line); }
.ribbon-view { overflow: hidden; padding-block: 17px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 86%, transparent); }
.ribbon-track { display: flex; width: max-content; animation: ribbon 42s linear infinite; }
.ribbon-track > span { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.ribbon-item { font: 500 16px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.ribbon-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-strong); }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* Services as a photo mosaic */
.services { background: var(--stone); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px 60px; align-items: end; margin-bottom: 44px; }
.sec-head > p { color: var(--muted); max-width: 44ch; }
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 25vw, 350px); gap: 16px; }
.bento li { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); color: var(--white); }
.bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bento li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 12 10 / 0) 38%, rgb(8 12 10 / 0.8) 100%); }
.bento .cap { position: absolute; inset: auto 0 0 0; padding: 24px 26px; }
.bento h3 { font-size: clamp(25px, 2.3vw, 33px); line-height: 1.08; }
.bento p { margin-top: 6px; font-size: 15px; color: rgb(255 255 255 / 0.86); max-width: 42ch; }
.bento li:nth-child(1), .bento li:nth-child(4) { grid-column: span 4; }
.bento li:nth-child(2), .bento li:nth-child(3) { grid-column: span 2; }
.bento li:nth-child(5), .bento li:nth-child(6) { grid-column: span 3; }

/* Steps of a job, a real sequence: an icon per step, joined by a dashed line through the icons. */
.steps { position: relative; list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.steps::before { content: ""; position: absolute; top: 31px; left: 32px; right: calc((100% - 90px) / 4 - 32px); border-top: 1.5px dashed var(--line); }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.step-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--page); color: var(--brand-strong); box-shadow: inset 0 0 0 1.5px var(--line); }
.step-ico .ico { width: 28px; height: 28px; }
.steps .n { margin-top: 14px; font: italic 400 22px/1 var(--serif); color: var(--brand-strong); }
.steps h3 { font-size: 25px; }
.steps p { color: var(--muted); font-size: 15.5px; }

/* "Bra att veta": three tips as cards with photos */
.guide-sec { background: var(--stone); }
.guide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.guide li { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: 0 22px 44px -34px rgb(20 30 25 / 0.4); }
.guide-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.guide-photo img { width: 100%; height: 100%; object-fit: cover; }
.guide-body { display: grid; gap: 10px; align-content: start; padding: 24px 26px 28px; }
.guide h3 { font-size: 25px; line-height: 1.12; }
.guide p { color: var(--muted); font-size: 16px; }

/* Area: the map lit on a dark ground */
.area { background: var(--deep); color: var(--white); }
.area .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.area h2 em { color: var(--brand-wash); }
.area .eyebrow { color: var(--brand-wash); }
.area .eyebrow .ico { background: rgb(255 255 255 / 0.1); color: var(--brand-wash); }
.area p:not(.eyebrow) { margin-top: 18px; color: rgb(255 255 255 / 0.78); max-width: 42ch; }
.towns { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.towns li { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32); font-size: 15px; font-weight: 500; }
.towns li.home { background: var(--white); color: var(--deep); box-shadow: none; }
.map svg { display: block; width: 100%; height: auto; max-height: 560px; }
.map path { fill: rgb(255 255 255 / 0.07); stroke: var(--deep); stroke-width: 2.5; stroke-linejoin: round; }
.map path.near { fill: rgb(255 255 255 / 0.2); }
.map path.home { fill: var(--brand-wash); }
/* Sizes are in map units: every region map is 600 units wide. */
.map text { font: 600 21px var(--sans); fill: rgb(255 255 255 / 0.92); }
.map text.home { font-size: 25px; font-weight: 700; fill: var(--deep); }

/* Questions */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.faq-head p:not(.eyebrow) { margin-top: 18px; color: var(--muted); max-width: 34ch; }
.faq-head a { display: inline-flex; margin-top: 22px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 400 clamp(21px, 1.8vw, 25px)/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
/* A thin plus that turns into a cross when the answer is open. */
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 16px no-repeat; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 60ch; }

/* Contact: details on the left, the sample quote form on the right */
.contact { background: var(--stone); }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact .lead { margin-top: 16px; color: var(--muted); max-width: 40ch; }
.reach { margin-top: 28px; display: grid; gap: 10px; }
.reach a { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-weight: 600; font-size: 18px; text-decoration: none; }
.reach a:hover { text-decoration: underline; text-underline-offset: 5px; }
.reach .ico { width: 20px; height: 20px; color: var(--brand-strong); }
.tips { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.tips h3 { font-size: 22px; }
.tips ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 16px; }
.tips li { display: flex; gap: 12px; }
.tips .ico { width: 19px; height: 19px; color: var(--brand-strong); margin-top: 3px; }
.quote { background: var(--white); border-radius: var(--r); padding: clamp(24px, 3vw, 38px); box-shadow: 0 30px 70px -40px rgb(20 30 25 / 0.5); }
.quote h3 { font-size: 30px; }
.fields { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fields label { display: grid; gap: 6px; font-weight: 500; font-size: 14.5px; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--page); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.fields textarea { resize: vertical; min-height: 104px; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.quote .btn { margin-top: 20px; width: 100%; }
.form-note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }

/* Footer, with their name once more */
.foot { background: var(--deep); color: rgb(255 255 255 / 0.74); font-size: 15px; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-block: 72px 36px; }
.foot-brand p { margin-top: 16px; max-width: 30ch; }
.foot .mark-badge { background: var(--brand-wash); color: var(--deep); }
.foot .mark-name { color: var(--white); }
.foot h3 { font: 600 14px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--white); }
.foot ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.foot ul a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.foot ul a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot ul .ico { width: 16px; height: 16px; }
.foot-name { margin: 0; padding-bottom: 8px; font: 400 var(--name-size)/0.86 var(--serif); letter-spacing: -0.045em; text-align: center; white-space: nowrap; color: rgb(255 255 255 / 0.09); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 20px 28px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 13px; color: rgb(255 255 255 / 0.55); }

.actionbar { display: none; }

/* Back to top: a round button that fades in once the page has scrolled (scroll-driven, no script;
   browsers without it always show it). It uses `translate` so hover can use `transform`. */
.to-top { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 15; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background-color: var(--brand); color: var(--on-brand); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.18); transition: transform 0.25s ease, background-color 0.2s ease, box-shadow 0.25s ease; }
.to-top .ico { width: 22px; height: 22px; stroke-width: 2.2; }
@supports (animation-timeline: scroll()) {
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(root); animation-range: 500px 760px; }
}
@keyframes to-top-in {
  from { opacity: 0; translate: 0 18px; visibility: hidden; }
  to { opacity: 1; translate: 0 0; visibility: visible; }
}

/* Motion: hover effects for mouse and trackpad only (never stuck on after a tap), all switched off
   for visitors who ask for reduced motion. */
.bento img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bento .cap { transition: transform 0.4s ease; }
.duo img { transition: transform 0.5s ease, box-shadow 0.5s ease; }
.towns li, .faq summary, .foot ul a { transition: background-color 0.2s ease, color 0.2s ease; }
.map path { transition: fill 0.25s ease; }
.step-ico { transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.guide li { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.guide-photo img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-brand:hover { box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--brand) 85%, #000000); }
  .btn-line:hover, .btn-glass:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 12px 24px -16px rgb(0 0 0 / 0.35); }
  .btn-glass:hover { background-color: rgb(255 255 255 / 0.24); }
  .bento li:hover img { transform: scale(1.06); }
  .bento li:hover .cap { transform: translateY(-4px); }
  .duo img:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgb(0 0 0 / 0.45); }
  .towns li:not(.home):hover { background-color: rgb(255 255 255 / 0.12); }
  .map path:not(.home):hover { fill: rgb(255 255 255 / 0.32); }
  .faq summary:hover { color: var(--brand-strong); }
  .to-top:hover { transform: translateY(-3px); background-color: var(--brand-strong); box-shadow: 0 18px 34px -14px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.18); }
  .steps li:hover .step-ico { transform: translateY(-3px); background-color: var(--brand); color: var(--on-brand); box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--brand) 80%, #000000); }
  .guide li:hover { transform: translateY(-4px); box-shadow: 0 32px 54px -30px rgb(20 30 25 / 0.5); }
  .guide li:hover .guide-photo img { transform: scale(1.05); }
  .ribbon:hover .ribbon-track { animation-play-state: paused; }
}

/* Tablet */
@media (max-width: 980px) {
  .top nav { display: none; }
  .intro .wrap, .area .wrap, .faq .wrap, .contact .wrap, .sec-head { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .guide { grid-template-columns: minmax(0, 1fr); }
  .guide li { flex-direction: row; min-height: 220px; }
  /* The text sets the card's height; the photo fills it, whatever its own shape. */
  .guide-photo { flex: none; width: 42%; aspect-ratio: auto; position: relative; }
  .guide-photo img { position: absolute; inset: 0; }
  .guide-body { align-content: center; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu { display: block; margin-left: auto; position: relative; }
  .menu summary { list-style: none; cursor: pointer; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 210px; padding: 8px; display: grid; background: var(--white); color: var(--ink); border-radius: 12px; box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5); }
  .menu nav a { padding: 12px 14px; border-radius: 8px; text-decoration: none; font-weight: 500; }
  .top .btn-glass { display: none; }
}

/* Tablet only: the photo pair stays calm, and contact keeps its two columns. */
@media (min-width: 721px) and (max-width: 980px) {
  /* The trust points run as one row under the card instead of wrapping beside it. */
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14.5px; }
  .duo { padding-bottom: 12%; }
  .duo .p1 { aspect-ratio: 5 / 4; }
  .duo .p2 { width: 40%; }
  .contact .wrap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
}

/* Phone */
@media (max-width: 720px) {
  :root { --head-h: 64px; }
  body { font-size: 16.5px; }
  /* Above the sticky call bar. */
  .to-top { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
  .concept-bar { font-size: 12px; padding-block: 8px; }
  .hero { min-height: 0; }
  .top .mark-name { display: none; }
  .masthead { margin-top: 12px; font-size: var(--name-size-phone, 12.5vw); line-height: 0.95; white-space: normal; text-wrap: balance; }
  .hero-foot { flex-direction: column; align-items: stretch; margin-top: clamp(200px, 62vw, 340px); padding-bottom: 20px; gap: 18px; }
  .hero-trust { order: -1; font-size: 15px; }
  .points, .steps, .fields { grid-template-columns: minmax(0, 1fr); }
  /* Steps stack, with the dashed line running down through the icons. */
  .steps { gap: 26px; }
  .steps::before { display: none; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; bottom: -26px; border-left: 1.5px dashed var(--line); }
  .steps li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
  .steps li > * { grid-column: 2; }
  .steps li > .step-ico { grid-column: 1; grid-row: 1 / span 3; }
  .steps .n { margin-top: 4px; }
  .guide li { flex-direction: column; min-height: 0; }
  .guide-photo { width: auto; aspect-ratio: 4 / 3; }
  .ribbon-track > span { gap: 32px; padding-right: 32px; }
  .ribbon-item { font-size: 15px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 250px; }
  .bento li:nth-child(n) { grid-column: auto; }
  .foot-brand, .foot-grid > div:nth-child(4) { grid-column: 1 / -1; }
  .foot-base { padding-bottom: 96px; }
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: sticky; bottom: 0; z-index: 5;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgb(255 255 255 / 0.96); box-shadow: 0 -10px 30px -18px rgb(15 25 20 / 0.5);
  }
  .actionbar .btn { min-height: 48px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* The back-to-top button still waits until you have scrolled; it fades in place instead of sliding. */
  @supports (animation-timeline: scroll()) {
    .to-top { animation: to-top-fade linear both !important; animation-timeline: scroll(root) !important; animation-range: 500px 760px !important; }
  }
  .btn:hover, .bento li:hover img, .bento li:hover .cap, .duo img:hover, .to-top:hover, .steps li:hover .step-ico, .guide li:hover, .guide li:hover .guide-photo img { transform: none; }
}

/* Refinements (founder, 2026-10-25): no big name over the hero or in the footer, a larger headline card,
   the trust points on a frosted panel, icons on the hero buttons, step numbers above the icons, social
   icons in the footer, one calm entrance and sections that ease in. Pages rendered since then carry class
   "v2" on <body>; pages rendered before keep their look (they still use .masthead and .foot-name above)
   until they are re-rendered, after which those two rules can go. */
.v2 .hero { overflow: clip; }
.v2 .hero::after { background: linear-gradient(180deg, rgb(9 15 12 / 0.5) 0%, rgb(9 15 12 / 0) 26%, rgb(9 15 12 / 0) 55%, rgb(9 15 12 / 0.45) 100%); }
.v2 .hero-card { width: min(580px, 100%); }
.v2 .hero-card h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; }
.v2 .hero-trust { padding: 18px 22px; border-radius: var(--r); background: color-mix(in srgb, var(--deep) 45%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); text-shadow: none; }
.v2 .btn .ico { width: 19px; height: 19px; }
/* Steps: the number above its icon, so the dashed line runs lower (number 22px, gap 10px, half an icon). */
.v2 .steps::before { top: 63px; }
.v2 .steps .n { margin: 0; }
/* Footer: example social icons under the name; not links, since a concept page links nowhere. */
.foot .foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot-social li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--white); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.foot .foot-social .ico { width: 18px; height: 18px; }
/* Footer contact (founder, 2026-10-25): the dummy phone, email, address and opening hours, each with its icon. */
.foot .foot-contact li, .foot .foot-contact a { display: flex; align-items: flex-start; gap: 8px; }
.foot .foot-contact .ico { margin-top: 0.29em; }
@media (prefers-reduced-motion: no-preference) {
  .v2 .hero-card { animation: v2-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .v2 .hero-trust { animation: v2-rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .v2 .hero-img { animation: v2-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @supports (animation-timeline: view()) {
    .v2 :is(.sec-head, .intro .h-xl, .points li, .duo, .bento li, .steps-sec .h-xl, .steps li, .guide li, .area .wrap > *, .faq-head, .faq-list, .contact .wrap > *, .foot-grid > *) {
      animation: v2-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes v2-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes v2-settle { from { scale: 1.06; } }
@media (max-width: 720px) {
  /* The photo above, then the whole card with both buttons above the call bar, then the trust panel. */
  .v2 .hero-foot { margin-top: clamp(90px, 14svh, 150px); }
  .v2 .hero-trust { order: 1; padding: 16px 18px; }
  .v2 .hero-card h1 { font-size: clamp(26px, 7.6vw, 30px); }
}
@keyframes to-top-fade { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }