/*
 * Naxdor concept template "Hantverk", design "Studio" (founder's choice 2026-10-24 for the renovation trades).
 * Built to the founder's reference Refit and measured against it on 2026-10-24: a first screen split 55/45
 * with the photo panel inset 30px from the window's edges; Manrope throughout (headline 58px, section
 * headings 50px, list titles 22px, text 22 and 18px); small dark pills; 10px corners; 150px between
 * sections; a strip of photos that runs sideways; cards that stack while you scroll; the contact form and
 * the footer on dark inset cards. Founder additions 2026-10-25: a sticky header with a logo badge, the menu
 * and a phone pill (it floats as a dark bar once you scroll); two buttons in the first screen; social icons
 * in the footer; one calm entrance and sections that ease in (both off under reduced motion); the photo
 * beside the services follows the open service. Refit's near-black and whites, kept a touch warm; the niche
 * colour only in small accents. Per page, <html> sets --brand, --on-brand, --brand-strong and --brand-wash.
 * Font: Manrope, SIL Open Font License, self-hosted. No scripts: menus and lists are <details>.
 */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/manrope-var.woff2") format("woff2"); }

:root {
  --ink: #12110f;
  --ink-2: #292825;
  --text: #45433e;
  --on-dark: #d6d3cd;
  --page: #ffffff;
  --soft: #f9f9f7;
  --card: #ecebe7;
  --line: #e6e4df;
  --muted: #6f6c66;
  --white: #ffffff;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 10px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section: 150px;
  /* The header's space over the first screen and its bar; the notice bar's height above it (measured
     2026-10-25: a concept's bar takes two lines on desktops, a design example's one). */
  --head-h: 128px;
  --row-h: 68px;
  --bar-h: 56px;
  --brand: #2f5d50;
  --on-brand: #ffffff;
  --brand-strong: #2f5d50;
  --brand-wash: #e3ebe8;
  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: 400 18px/1.5 var(--sans); letter-spacing: -0.1px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
/* The packs mark a phrase with *stars* for Nordisk's italic; this design has no italic, so it reads as one line. */
h1 em, h2 em { font-style: normal; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Anchors land below the floating header bar. */
section[id], #offert { scroll-margin-top: 104px; }

/* Concept or example notice (leadmart docs/legal/texter-sv.md § D2 and § I1) */
.concept-bar { background: #0b0a09; color: rgb(255 255 255 / 0.8); font: 500 13px/1.45 var(--sans); letter-spacing: 0; padding-block: 9px; }
.concept-bar a { color: inherit; }

.is-example { --bar-h: 37px; }
@media (max-width: 900px) { .is-example { --bar-h: 56px; } }
@media (max-width: 720px) { :root { --bar-h: 86px; } .is-example { --bar-h: 68px; } }

/* Everything under the notice bar. A query container, so the header and the first screen can line up with the page's content (cqw leaves out the scrollbar). */
.s-page { container-type: inline-size; }

/* Pills and buttons */
.s-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 16px; padding: 5px 12px 6px; border-radius: 16px; background: var(--ink-2); color: var(--white); font: 500 16px/1 var(--sans); letter-spacing: 0.5px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 60px; padding: 10px 10px 10px 26px; border: 0; border-radius: 50px; background: rgb(255 255 255 / 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); font: 500 16px/1 var(--sans); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.s-btn-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform 0.3s ease; }
.s-btn-ico .ico { width: 18px; height: 18px; stroke-width: 2; }
.s-arrow .ico { rotate: 45deg; }
.s-btn-line { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
.s-btn-line .s-btn-ico { background: rgb(255 255 255 / 0.14); color: var(--white); }
.s-btn-light { background: rgb(18 17 15 / 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
.s-btn-light .s-btn-ico { background: var(--ink); color: var(--white); }

/* Logo: the trade's icon in a round badge beside the company's name (our wordmark, never their logo) */
.s-mark { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: inherit; text-decoration: none; }
.s-badge { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--ink); }
.s-badge .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.s-mark-name { font: 600 22px/1.15 var(--sans); letter-spacing: -0.5px; }

/* Header: sticky over the whole page. Over the first screen it is clear and lines up with the hero's two
   columns (the menu inside the photo panel); once you scroll it floats as a dark bar (scroll-driven, no
   script; browsers without scroll timelines show the dark bar from the start). */
.s-top { --edge: max(var(--gutter), (100cqw - 1280px) / 2); position: sticky; top: 0; z-index: 20; height: var(--head-h); margin-bottom: calc(-1 * var(--head-h)); padding: 30px 30px 0; pointer-events: none; }
/* The bar hugs its content (founder, 2026-10-25): it starts at the logo, lined up with the page's text, and
   ends just after the phone pill beside the menu. The menu starts where the photo panel's content starts,
   so the space after the name stays as it was. */
.s-top-in { display: grid; grid-template-columns: calc(0.55 * (100cqw - 60px) + 70px - var(--edge)) auto; align-items: center; width: fit-content; height: var(--row-h); margin-left: calc(var(--edge) - 44px); padding: 0 8px 0 14px; border-radius: var(--r); background-color: rgb(18 17 15 / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--white); pointer-events: auto; }
@supports (animation-timeline: scroll()) {
  .s-top-in { animation: s-top linear both; animation-timeline: scroll(root); animation-range: 0 180px; }
}
@keyframes s-top {
  from { background-color: rgb(18 17 15 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); box-shadow: 0 0 0 0 rgb(0 0 0 / 0); translate: 0 0; }
  to { background-color: rgb(18 17 15 / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6); translate: 0 -16px; }
}
.s-top-end { display: flex; align-items: center; gap: 28px; min-width: 0; }
.s-nav { display: flex; gap: 28px; font: 500 16px/1.3 var(--sans); }
.s-nav a { color: var(--white); text-decoration: none; white-space: nowrap; }
.s-call { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 46px; padding: 0 16px; border-radius: 50px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); font: 600 16px/1 var(--sans); letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: background-color 0.25s ease; }
.s-call .ico { width: 18px; height: 18px; }
.s-menu { display: none; position: relative; }
.s-menu summary { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); cursor: pointer; list-style: none; }
.s-burger { display: grid; gap: 5px; width: 20px; }
.s-burger i { display: block; height: 2px; border-radius: 1px; background: var(--white); }
.s-menu nav { position: absolute; right: 0; top: calc(100% + 12px); z-index: 5; display: grid; min-width: 230px; padding: 8px; border-radius: var(--r); background: var(--white); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5); }
.s-menu nav a { padding: 12px 14px; border-radius: 6px; color: var(--ink); font: 500 17px/1.2 var(--sans); text-decoration: none; }

/* First screen: the headline on the left, a tall rounded photo on the right; together with the notice bar
   it fills the window. */
.s-hero { --edge: max(var(--gutter), (100cqw - 1280px) / 2); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); padding: 30px; background: var(--ink); color: var(--white); }
.s-hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 110px 64px 60px calc(var(--edge) - 30px); }
.s-hero-copy { max-width: 600px; }
.s-pill-hero { height: 25px; margin-bottom: 10px; padding: 0 12px 0 8px; color: var(--on-dark); font: 400 14px/1 var(--sans); letter-spacing: 0; }
.s-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.16); }
.s-hero h1 { font-size: 58px; line-height: 1.2; letter-spacing: -1px; }
.s-lead { max-width: 22em; margin-top: 28px; font-size: 22px; line-height: 1.5; letter-spacing: -0.3px; color: var(--on-dark); }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 40px; }
/* The photo panel; a shade at the top keeps the header readable on any photo. */
.s-hero-panel { position: relative; min-height: 520px; border-radius: var(--r); overflow: hidden; background: var(--ink-2); }
.s-hero-panel > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hero-panel::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 170px; background: linear-gradient(var(--ink), rgb(18 17 15 / 0)); }
.s-trust { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: grid; gap: 10px; max-width: calc(100% - 40px); margin: 0; padding: 20px 22px; list-style: none; border-radius: var(--r); background: rgb(18 17 15 / 0.55); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); color: var(--white); font: 400 16px/1.3 var(--sans); }
.s-trust li { display: flex; align-items: flex-start; gap: 10px; }
.s-trust .ico { width: 18px; height: 18px; margin-top: 0.08em; stroke-width: 2.2; }

/* Our promise: the statement beside a calm paragraph */
.s-about { padding-block: var(--section) 100px; }
.s-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 128px; align-items: start; }
.s-about h2 { font-size: 50px; line-height: 1.1; letter-spacing: -0.8px; }
.s-big { font-size: 22px; line-height: 1.5; letter-spacing: -0.3px; color: var(--text); }

/* A strip of finished rooms that runs slowly sideways (decoration only; the set is there twice for a seamless loop) */
.s-strip { overflow: hidden; }
.s-strip-track { display: flex; gap: 32px; width: max-content; animation: s-strip 80s linear infinite; }
.s-strip img { flex: none; width: 400px; height: 500px; object-fit: cover; }
@keyframes s-strip { to { transform: translateX(calc(-50% - 16px)); } }

/* What you can count on: four promises, with large thin icons where the reference shows figures */
.s-promises { padding-block: 100px var(--section); }
.s-promises ul { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.s-promises .ico { width: 64px; height: 64px; stroke-width: 0.9; }
.s-promises h3 { margin-top: 26px; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -0.2px; }
.s-promises p { max-width: 240px; margin-top: 6px; font-size: 16px; line-height: 1.3; color: var(--text); }

/* Section heads */
.s-head { margin-bottom: 60px; }
.s-head h2, .s-area h2, .s-faq h2, .s-contact h2 { font-size: 50px; line-height: 1.1; letter-spacing: -0.8px; }
.s-head p:not(.s-pill) { margin-top: 20px; font-size: 22px; line-height: 1.5; letter-spacing: -0.3px; color: var(--text); }
.s-center { display: flex; flex-direction: column; align-items: center; max-width: 640px; margin-inline: auto; text-align: center; }

/* Services: a photo beside an expandable list, one open at a time; the photo follows the open service. */
.s-services { padding-block: 105px 100px; background: var(--soft); }
.s-svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.s-svc-photo { position: relative; margin: 0; aspect-ratio: 610 / 686; border-radius: var(--r); overflow: hidden; background: var(--card); }
.s-svc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.s-svc-photo img:first-child { opacity: 1; }
.s-svc:has(.s-acc details[open]) .s-svc-photo img:first-child { opacity: 0; }
.s-svc:has(.s-acc details:nth-child(1)[open]) .s-svc-photo img:nth-child(1),
.s-svc:has(.s-acc details:nth-child(2)[open]) .s-svc-photo img:nth-child(2),
.s-svc:has(.s-acc details:nth-child(3)[open]) .s-svc-photo img:nth-child(3),
.s-svc:has(.s-acc details:nth-child(4)[open]) .s-svc-photo img:nth-child(4),
.s-svc:has(.s-acc details:nth-child(5)[open]) .s-svc-photo img:nth-child(5),
.s-svc:has(.s-acc details:nth-child(6)[open]) .s-svc-photo img:nth-child(6) { opacity: 1; }
.s-acc details { border-bottom: 1px solid var(--line); }
.s-acc summary, .s-faq-list summary { display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; }
.s-acc summary::-webkit-details-marker, .s-faq-list summary::-webkit-details-marker, .s-menu summary::-webkit-details-marker { display: none; }
.s-acc summary { padding: 20px 0; font: 500 22px/1.4 var(--sans); letter-spacing: -0.2px; }
.s-acc summary .ico { width: 40px; height: 40px; stroke-width: 1.1; }
.s-acc p { padding: 0 0 24px 60px; font-size: 18px; line-height: 1.5; color: var(--text); }
.s-plus { position: relative; flex: none; width: 18px; height: 18px; margin-left: auto; transition: transform 0.3s ease; }
.s-plus::before, .s-plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 1.6px; background: currentColor; }
.s-plus::after { transform: rotate(90deg); }
details[open] > summary .s-plus { transform: rotate(45deg); }

/* Steps: cards that stack as the page scrolls (sticky, no script), below the floating header bar */
.s-steps { padding-block: var(--section); }
.s-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.s-stack li { position: sticky; top: calc(100px + var(--i) * 24px); display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 70px; min-height: 560px; padding: 30px; border-radius: var(--r); background: var(--card); }
.s-stack li:nth-child(even) { background: var(--ink); color: var(--white); }
.s-stack img { order: -1; width: 100%; height: 100%; min-height: 360px; max-height: 500px; object-fit: cover; border-radius: var(--r); }
.s-step-text { align-self: start; max-width: 620px; padding-top: 30px; }
.s-step-n { display: block; font: 300 72px/1 var(--sans); letter-spacing: -0.8px; }
.s-step-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 30px; border-radius: 50%; background: var(--ink-2); color: var(--white); }
.s-step-ico .ico { width: 20px; height: 20px; }
.s-stack li:nth-child(even) .s-step-ico { background: rgb(255 255 255 / 0.1); }
.s-stack h3 { margin-top: 24px; font-size: 42px; line-height: 1.1; letter-spacing: -1px; }
.s-stack p { max-width: 32em; margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--text); }
.s-stack li:nth-child(even) p { color: var(--on-dark); }

/* Good to know */
.s-guide { padding-block: 0 var(--section); }
.s-guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.s-guide-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.s-guide-list h3 { margin-top: 24px; font-size: 22px; line-height: 1.4; letter-spacing: -0.2px; }
.s-guide-list p { margin-top: 8px; font-size: 18px; line-height: 1.5; color: var(--text); }

/* Area */
.s-area { padding-block: 0 var(--section); }
.s-area-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 100px; align-items: center; }
.s-area p:not(.s-pill) { max-width: 24em; margin-top: 20px; font-size: 22px; line-height: 1.5; letter-spacing: -0.3px; color: var(--text); }
.s-towns { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s-towns li { padding: 5px 12px 6px; border-radius: 16px; background: var(--card); font: 500 16px/1 var(--sans); letter-spacing: 0.2px; }
.s-towns li.home { background: var(--ink-2); color: var(--white); }
.s-map { padding: clamp(20px, 3vw, 40px); border-radius: var(--r); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.s-map svg { display: block; width: 100%; height: auto; max-height: 520px; }
.s-map path { fill: var(--page); stroke: var(--line); stroke-width: 3; stroke-linejoin: round; transition: fill 0.25s ease; }
.s-map path.near { fill: var(--card); }
.s-map path.home { fill: var(--ink); }
.s-map text { font: 600 21px var(--sans); fill: var(--ink); }
/* A dark outline keeps the home label readable where it runs past its kommun's edge. */
.s-map text.home { font-size: 24px; font-weight: 700; fill: var(--white); paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }

/* Questions */
.s-faq { padding-block: 0 var(--section); }
.s-faq-in { display: grid; grid-template-columns: minmax(0, 407fr) minmax(0, 813fr); gap: 40px 60px; align-items: start; }
.s-faq-head { position: sticky; top: 110px; }
.s-faq-head p:not(.s-pill) { max-width: 22em; margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--text); }
.s-faq-head .s-btn { margin-top: 32px; }
.s-faq-list { display: grid; gap: 20px; }
.s-faq-list details { padding: 0 25px; border-radius: var(--r); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.s-faq-list summary { padding: 20px 0; font: 500 22px/1.4 var(--sans); letter-spacing: -0.2px; }
.s-faq-list p { padding: 0 0 24px; font-size: 18px; line-height: 1.5; color: var(--text); }

/* Contact: a dark inset card with the sample form. Its content lines up with the page's. */
.s-contact { margin-inline: 20px; padding-block: 80px; border-radius: var(--r); background: var(--ink); color: var(--white); }
.s-contact .wrap, .s-foot .wrap { width: min(1280px, 100% - 2 * (var(--gutter) - 20px)); }
.s-contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 590px); gap: 60px 100px; align-items: center; }
.s-contact-lead { max-width: 24em; margin-top: 20px; font-size: 22px; line-height: 1.5; letter-spacing: -0.3px; color: var(--on-dark); }
.s-rows { margin: 40px 0 0; }
.s-rows div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.s-rows div:first-child { border-top: 1px solid rgb(255 255 255 / 0.12); }
.s-rows dt { font-weight: 600; }
.s-rows dd { margin: 0; color: var(--on-dark); text-align: right; }
.s-rows a { text-decoration: none; }
.s-tips { margin-top: 40px; }
.s-tips h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.1px; }
.s-tips ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; color: var(--on-dark); }
.s-tips li { display: flex; align-items: flex-start; gap: 12px; }
.s-tips .ico { width: 20px; height: 20px; margin-top: 0.15em; }
.quote { padding: 28px; border-radius: var(--r); background: var(--white); color: var(--ink); }
.quote h3 { font-size: 26px; letter-spacing: -0.5px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.fields label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: var(--ink); font: 400 16px/1.3 var(--sans); }
.fields textarea { min-height: 120px; resize: vertical; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.quote button { width: 100%; min-height: 48px; margin-top: 20px; border: 0; border-radius: 6px; background: var(--ink); color: var(--white); font: 500 16px/1 var(--sans); cursor: pointer; }
.form-note { margin-top: 12px; font-size: 13px; text-align: center; color: var(--muted); }

/* Footer: a dark card right under the contact card, with the logo and example social icons (not links) */
.s-foot { margin: 12px 20px 0; padding-block: 64px 32px; border-radius: var(--r) var(--r) 0 0; background: var(--ink); color: var(--white); }
.s-foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.s-foot-brand .s-badge { width: 44px; height: 44px; }
.s-foot-brand .s-badge .ico { width: 23px; height: 23px; }
.s-foot-brand .s-mark-name { font-size: 28px; letter-spacing: -0.6px; }
.s-foot-brand p + p { max-width: 24em; margin-top: 16px; font-size: 16px; color: var(--on-dark); }
.s-social { list-style: none; display: flex; gap: 10px; margin: 24px 0 0; padding: 0; }
.s-social li { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.s-social .ico { width: 19px; height: 19px; stroke-width: 1.6; }
.s-foot h3 { font-size: 20px; letter-spacing: -0.3px; }
.s-foot ul:not(.s-social) { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 17px; font-weight: 500; }
.s-foot ul:not(.s-social) li, .s-foot li a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.s-foot ul:not(.s-social) li .ico { width: 17px; height: 17px; }
/* Footer contact (founder, 2026-10-25): the dummy phone, email, address and opening hours, each with its icon. */
.s-foot ul.s-foot-contact li, .s-foot ul.s-foot-contact a { align-items: flex-start; }
.s-foot ul.s-foot-contact .ico { margin-top: 0.25em; }
.s-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; margin-top: 60px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); color: var(--on-dark); }
.s-foot-base small { font-size: 14px; }

/* Back to top and the phone call bar */
.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; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.15); transition: transform 0.25s ease; }
.to-top .ico { width: 22px; height: 22px; stroke-width: 2.2; }
@supports (animation-timeline: scroll()) {
  .to-top { animation: s-to-top linear both; animation-timeline: scroll(root); animation-range: 500px 760px; }
}
@keyframes s-to-top {
  from { opacity: 0; translate: 0 18px; visibility: hidden; }
  to { opacity: 1; translate: 0 0; visibility: visible; }
}
.actionbar { display: none; }

/* Motion: one calm entrance for the first screen, and sections that ease in as they come into view
   (scroll-driven, no script). Nothing moves for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .s-hero-copy > * { animation: s-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .s-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .s-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .s-hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .s-hero-panel > img { animation: s-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .s-trust { animation: s-rise 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @supports (animation-timeline: view()) {
    .s-head, .s-about-in > *, .s-promises li, .s-svc-photo, .s-acc, .s-guide-list li, .s-area-in > *, .s-faq-head, .s-faq-list, .s-contact-in > *, .s-foot-grid > * {
      animation: s-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes s-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes s-settle { from { scale: 1.06; } }

/* Hover, for mouse and trackpad only */
@media (hover: hover) {
  .s-btn:hover, .s-call:hover { background-color: rgb(255 255 255 / 0.16); }
  .s-btn-line:hover { background-color: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); }
  .s-btn-light:hover { background-color: rgb(18 17 15 / 0.13); }
  .s-btn:hover .s-arrow { transform: rotate(45deg); }
  .s-nav a:hover, .s-foot li a:hover, .s-rows a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .s-menu nav a:hover { background: var(--soft); }
  .s-acc summary:hover, .s-faq-list summary:hover { color: var(--muted); }
  .s-guide-list img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .s-guide-list li:hover img { transform: scale(1.015); }
  .s-map path:not(.home):hover { fill: var(--card); }
  .to-top:hover { transform: translateY(-3px); }
}

/* Narrower desktops: the four links fold into the menu button; the phone pill stays. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .s-nav { display: none; }
  .s-menu { display: block; }
  .s-top-end { gap: 12px; }
}

/* Small laptops and tablets: the first screen becomes one photo card with the text on it, as in the reference */
@media (max-width: 1199px) {
  /* Inside the photo card the bar spans the card: the name on the left, the phone and the menu button on the right. */
  .s-top-in { display: flex; justify-content: space-between; gap: 16px; width: auto; margin-left: 0; padding: 0 12px 0 40px; }
  .s-top .s-mark { min-width: 0; }
  .s-top-end { gap: 12px; }
  .s-nav { display: none; }
  .s-menu { display: block; }
  .s-hero { grid-template-columns: minmax(0, 1fr); }
  .s-hero-text, .s-hero-panel { grid-area: 1 / 1; }
  .s-hero-panel { min-height: 0; }
  .s-hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(18 17 15 / 0.1) 20%, rgb(18 17 15 / 0.82)); }
  .s-hero-text { justify-content: flex-end; padding: 130px 40px 44px; }
  .s-hero-copy { max-width: 720px; }
  .s-trust { display: none; }
  .s-about-in { grid-template-columns: minmax(0, 1fr); }
  .s-promises ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .s-stack li { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; min-height: 0; }
  .s-faq-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .s-contact-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
}

/* Tablets: one column where two get tight */
@media (max-width: 999px) {
  :root { --section: 110px; }
  .s-hero h1 { font-size: 52px; }
  .s-head h2, .s-area h2, .s-faq h2, .s-contact h2, .s-about h2 { font-size: 44px; }
  .s-svc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .s-svc-photo { aspect-ratio: 16 / 10; }
  .s-stack li { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-stack img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .s-step-text { padding: 0 10px 14px; }
  .s-step-ico { margin-top: 24px; }
  .s-guide-list { gap: 24px; }
  .s-guide-list h3 { font-size: 20px; }
  .s-guide-list p { font-size: 16px; }
  .s-area-in, .s-faq-in, .s-contact-in { grid-template-columns: minmax(0, 1fr); }
  .s-faq-head { position: static; }
  .s-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-foot-brand { grid-column: 1 / -1; }
}

/* Phones */
@media (max-width: 720px) {
  :root { --section: 88px; --head-h: 80px; --row-h: 56px; }
  body { font-size: 17px; }
  .concept-bar { font-size: 12px; padding-block: 8px; }
  /* The header is a dark bar inside the top of the photo card from the start; the call bar below has the phone. */
  .s-top { padding: 24px 24px 0; }
  .s-top-in { padding: 0 5px 0 14px; background-color: rgb(18 17 15 / 0.72); }
  .s-mark { gap: 10px; }
  .s-badge { width: 32px; height: 32px; }
  .s-badge .ico { width: 17px; height: 17px; }
  .s-mark-name { font-size: 18px; }
  .s-top .s-call { display: none; }
  /* Room at the bottom for the call bar, so the first screen's buttons are never under it. */
  .s-hero { padding: 14px 14px 88px; }
  .s-hero-text { padding: 100px 22px 26px; }
  .s-hero h1 { font-size: 38px; line-height: 1.15; letter-spacing: -0.8px; }
  .s-lead { margin-top: 18px; font-size: 18px; }
  .s-actions { display: grid; margin-top: 28px; gap: 10px; }
  .s-btn { min-height: 54px; gap: 18px; padding: 7px 7px 7px 20px; }
  .s-actions .s-btn { justify-content: space-between; }
  .s-head { margin-bottom: 40px; }
  .s-head h2, .s-area h2, .s-faq h2, .s-contact h2, .s-about h2 { font-size: 36px; letter-spacing: -0.6px; }
  .s-head p:not(.s-pill), .s-big, .s-area p:not(.s-pill), .s-contact-lead { font-size: 18px; letter-spacing: -0.2px; }
  .s-about { padding-bottom: 64px; }
  .s-strip-track { gap: 16px; animation-duration: 60s; }
  .s-strip img { width: 260px; height: 325px; }
  @keyframes s-strip { to { transform: translateX(calc(-50% - 8px)); } }
  .s-promises { padding-top: 64px; }
  .s-promises ul { gap: 36px 20px; }
  .s-promises .ico { width: 48px; height: 48px; }
  .s-promises h3 { margin-top: 18px; font-size: 18px; }
  .s-promises p { font-size: 15px; }
  .s-services { padding-block: 80px; }
  .s-acc summary { gap: 14px; font-size: 19px; }
  .s-acc summary .ico { width: 32px; height: 32px; }
  .s-acc p { padding-left: 46px; font-size: 16px; }
  .s-stack li { position: static; padding: 16px; }
  .s-step-n { font-size: 56px; }
  .s-stack h3 { font-size: 30px; letter-spacing: -0.6px; }
  .s-stack p { font-size: 16px; }
  .s-guide-list { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .s-faq-list details { padding: 0 18px; }
  .s-faq-list summary { gap: 14px; font-size: 18px; }
  .s-faq-list p { font-size: 16px; }
  .s-contact { margin-inline: 10px; padding-block: 56px; }
  .s-contact .wrap, .s-foot .wrap { width: calc(100% - 40px); }
  .s-rows div { flex-direction: column; gap: 4px; }
  .s-rows dd { text-align: left; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .quote { padding: 20px; }
  .s-foot { margin-inline: 10px; padding-top: 48px; }
  .s-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .s-foot-grid > div:has(> .s-foot-contact) { grid-column: 1 / -1; }
  .s-foot-brand .s-mark-name { font-size: 24px; }
  .s-foot-base { padding-bottom: 96px; }
  .to-top { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
  .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(18 17 15 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .actionbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 50px; font: 500 16px/1 var(--sans); text-decoration: none; }
  .actionbar .ico { width: 19px; height: 19px; }
  .s-ab-call { background: var(--white); color: var(--ink); }
  .s-ab-mail { background: rgb(255 255 255 / 0.12); color: var(--white); }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  /* On phones the header bar is dark from the start, so it only slides up a little once you scroll. */
  @supports (animation-timeline: scroll()) {
    .s-top-in { animation-name: s-top-phone; }
  }
}
@keyframes s-top-phone {
  from { background-color: rgb(18 17 15 / 0.72); translate: 0 0; }
  to { background-color: rgb(18 17 15 / 0.9); translate: 0 -12px; }
}

@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: s-to-top-fade linear both !important; animation-timeline: scroll(root) !important; animation-range: 500px 760px !important; }
  }
  /* The strip stands still; it can be scrolled sideways instead. */
  .s-strip { overflow-x: auto; scrollbar-width: none; }
  .s-btn:hover .s-arrow, .s-guide-list li:hover img, .to-top:hover { transform: none; }
}
@keyframes s-to-top-fade { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }