/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #EEEDE7;          /* chevron cream */
    --bg-alt: #E4E2DA;      /* darker cream for footer/story */
    --ink: #161513;         /* near-black on cream */
    --ink-soft: #5f5b52;    /* warm grey secondary text */
    --muted: #b5b5b5;       /* chevron's light grey for subtle states */
    --line: #c9c5ba;
    --line-soft: #d8d5cc;
    --accent: #161513;

    /* One grotesk everywhere, like chevronparquet — using Plank's own Source Sans */
    --font-display: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }

/* Lenis smooth (weighty) scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* Lock page scroll behind the open mobile nav drawer */
body.nav-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }

/* Display headings use the site's single grotesk (Source Sans 3 via --font-display).
   No serif on this site — Playfair was removed; whole site is one sans. */
h1, h2,
.page-title, .section-title,
.surfaces-head h2, .book-intro h2,
.how-to-order h2, .showroom-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.thin { font-weight: 300; color: var(--ink-soft); }

/* ============ HEADER ============ */
.site-header {
    display: grid;
    /* Symmetric: logo left, nav centred on the page, search right.
       header-main uses display:contents so nav + search become grid items. */
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding: 52px 30px 64px;
    gap: 0;
}

/* Desktop: nav (left) + search (right) share the right grid cell */
.header-main {
    /* Desktop: dissolve so nav + search sit directly on the site-header grid
       (logo | nav | search). Becomes a flex drawer again on mobile. */
    display: contents;
}

/* Hamburger button — hidden on desktop, shown ≤1199px */
.nav-toggle { display: none; }

.logo {
    display: inline-block;
    line-height: 0;
}

.logo img {
    height: 79px;
    width: auto;
    /* The PNG has ~234/1719 of transparent padding on its left; offset it so
       the visible "P" lines up with the content edge (scales with height). */
    margin-left: -37px;
}

/* Position the wordmark so the TOP of the visible letters lands at y≈54 and
   the bottom edge reaches y≈112 (height 79px). Transparent padding above the
   letters is ~9px at this height. Desktop only — mobile stacks the logo. */
@media (min-width: 1200px) {
    .logo { transform: translateY(-7px); }
    /* Centre the whole search block on the logo's vertical midline (≈y83) */
    .search { transform: translateY(16px); }
}

.main-nav {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 28px;
    /* Centred on the page via the site-header grid (logo | nav | search) */
    justify-content: center;
}

.main-nav .nav-col li {
    margin-bottom: 1px;
    font-size: 14.5px;
    line-height: 1.2;
}

.main-nav a {
    color: var(--ink);
    font-weight: 350;
    transition: opacity 0.2s ease;
    position: relative;
    /* Scale the glyphs a little wider and shorter (Source Sans has no width axis) */
    display: inline-block;
    transform: scaleX(1.07) scaleY(0.93);
    transform-origin: left center;
}

.main-nav a:hover {
    opacity: 0.55;
}

/* Active page — just heavier weight, no underline/pill */
.main-nav a.active {
    font-weight: 600;
}

/* Reserve the bold width on every item so the active (bold) state never
   reflows its neighbours. The hidden ::after always holds the bold-weight
   text, keeping each link's box at its bold width whether active or not. */
.main-nav a::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ink);
    padding: 4px 0;
    justify-self: end;
    width: 220px;
}

/* Live search-results dropdown under the input */
.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    max-height: 320px;
    overflow-y: auto;
}
.search-results a {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
}
.search-results a:hover { background: var(--bg-alt); }
.search-empty {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--ink-soft);
}

.search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
}

.search input::placeholder { color: var(--ink-soft); }

.search button { display: flex; align-items: center; justify-content: center; }

/* ============ HERO ============ */
.hero {
    padding: 24px 30px 64px;
}

.page-title {
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.page-tagline {
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 32px;
}

.hero-media {
    display: flex;
    flex-direction: column;
}

.hero-image {
    position: relative;
}

.hero-image img,
.hero-image video {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.hero-image figcaption {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--ink-soft);
    background: rgba(238, 237, 231, 0.85);
    padding: 4px 8px;
}

/* Overlay hero title — page-coloured, sits over the top-left of the image.
   A soft dark gradient scrim darkens the corner behind the text so the
   cream letters stay legible.
   CONVERGENCE-JUSTIFIED token=hero-gradient reason="Not a decorative hero
   accent (that's what §2 bans) — this is a functional black→transparent
   legibility scrim behind the overlay wordmark, required by the text-over-
   image readability floor. Black-only, no brand colour." */
.hero--overlay .hero-grid { margin-top: 0; }

.hero--overlay .hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.28) 22%, rgba(0, 0, 0, 0) 46%);
}

.hero-overlay-title {
    position: absolute;
    top: 0.55em;
    left: 0.58em;
    z-index: 2;
    margin: 0;
    color: var(--bg);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.hero-text {
    padding-top: 0;
    /* Centre the text block vertically against the (taller) hero image */
    align-self: center;
}

/* Big lead is the focal point of the hero (chevron style) */
.hero-text .lead {
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 28px;
    color: var(--ink);
}

.hero-text p {
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 24px;
    max-width: 400px;
    line-height: 1.55;
}

/* Optional "Les mer" reveal for hero copy that's longer than the hero can show
   by default (e.g. French Flooring). Collapsed by default; toggled via JS
   (data-open + max-height, same technique as .floor-info). */
.hero-more { max-width: 400px; margin-top: -8px; margin-bottom: 8px; }

.hero-more__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}
.hero-more[data-open="true"] .hero-more__panel { max-height: 1800px; }

.hero-more__inner p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 20px;
}
.hero-more__inner p:first-child { padding-top: 4px; }
.hero-more__inner p.hero-more__signoff {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
}

/* Compact key/value fact box inside the hero "Les mer" (Squares) */
.hero-spec {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 20px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--line-soft);
    margin-top: 14px;
}
.hero-spec dt {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.hero-spec dd {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.55;
}

.hero-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin-bottom: 24px;
    transition: opacity 0.2s;
}
.hero-more__toggle:hover { opacity: 0.7; }
.hero-more__icon {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.35s ease;
}
.hero-more[data-open="true"] .hero-more__icon { transform: rotate(45deg); }


/* CTA list */
.cta-list li { margin-bottom: 8px; }

.cta-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink);
    transition: opacity 0.2s;
}

.cta-list a:hover { opacity: 0.6; }

.cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px; height: 18px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    font-size: 0; /* hide the text "›" */
    color: transparent;
}

/* Crisp ">" chevron drawn with borders, optically centered */
.cta-icon::before {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1.4px solid var(--ink);
    border-right: 1.4px solid var(--ink);
    transform: translateX(-1px) rotate(45deg);
}

/* ============ TABS ============ */
.tabs-section {
    padding: 0 30px 80px;
}

.tabs {
    display: grid;
    /* One equal column per tab, whatever the count (6 normally, 7 with Produktbilder).
       Always a single row; scrolls horizontally if too narrow rather than wrapping. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    text-align: left;
    font-size: 13px;
    color: var(--ink-soft);
    padding: 4px 0;
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
}

.tab:hover { color: var(--ink); }

.tab.active { color: var(--ink); }

.tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -9px;
    height: 1px;
    background: var(--ink);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Story grid (treatment tab) */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr 0.85fr;
    gap: 24px;
    align-items: end;
    padding: 24px 0 56px;
}

.story-card {
    display: block;
    color: var(--ink);
    transition: opacity 0.2s;
}

.story-card:hover { opacity: 0.85; }

.story-label {
    display: block;
    font-size: 12px;
    color: var(--ink);
    margin-bottom: 10px;
}

.story-card figure {
    overflow: hidden;
}

.story-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.story-card-wide img { aspect-ratio: 4 / 3; }

.story-card:hover img { transform: scale(1.03); }

/* Collab block (treatment tab) */
.collab-block {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    align-items: stretch;
    margin-top: 32px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.collab-block-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 30px;
}

.collab-block-mark {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-bottom: 32px;
}

.collab-block-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: 16px;
}

.collab-block-body {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--ink-soft);
}

.collab-block-image img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

/* Arkitekt — contact block */
.contact-block {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    line-height: 1.6;
}
.contact-block strong { color: var(--ink); font-weight: 500; }

/* Showroom section */
.showroom-section {
    padding: 80px 30px;
    border-top: 1px solid var(--line-soft);
}

.showroom-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
}

.showroom-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    margin-bottom: 24px;
    text-align: left;
}

.showroom-text h2 {
    font-size: 22px;
    font-weight: 400;
    text-align: left;
    margin-bottom: 32px;
}

.showroom-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
    margin-bottom: 32px;
}

.showroom-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-soft);
}

.showroom-list strong {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.showroom-faq {
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.1em;
}

.showroom-faq a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
}

.showroom-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Showroom location map — embed tinted to the site's cream/ink palette */
.map-section {
    padding: 80px 30px;
    border-top: 1px solid var(--line-soft);
}

.map-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
}

.map-embed {
    position: relative;
    overflow: hidden;
    background: var(--bg-alt);
    border: 1px solid var(--line);
}

.map-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    /* Desaturate + warm the map so it reads in the brand palette, not Google's */
    filter: grayscale(1) sepia(0.32) saturate(0.85) brightness(1.03) contrast(0.9);
}

/* Product editorial story (French Flooring, Heartwood) */
.product-story {
    padding: 96px 30px;
    border-top: 1px solid var(--line-soft);
}
.product-story__inner {
    max-width: 760px;
    margin: 0 auto;
}
.product-story__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 22px;
}
.product-story__title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.18;
    color: var(--ink);
    margin-bottom: 32px;
    max-width: 600px;
}
.product-story__body p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 20px;
}
.product-story__body p:last-child { margin-bottom: 0; }
.product-story__body p.product-story__signoff {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.6;
    margin-top: 32px;
}
@media (max-width: 600px) {
    .product-story { padding: 64px 24px; }
    .product-story__title { font-size: 25px; }
    .product-story__body p { font-size: 15px; }
}

/* Info tab — product editorial story (French Flooring, Heartwood) */
.info-story { max-width: 780px; }
.info-story__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
}
.info-story__title {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 24px;
    max-width: 560px;
}
.info-story__body p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 18px;
}
.info-story__body p:last-child { margin-bottom: 0; }
.info-story__body p.info-story__signoff {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
    margin-top: 24px;
}
@media (max-width: 600px) {
    .info-story__title { font-size: 22px; }
    .info-story__body p { font-size: 14px; }
}

/* Book a meeting */
.book-section {
    padding: 80px 30px;
    border-top: 1px solid var(--line-soft);
}

/* Konsultasjon: book-section sits right under the hero, so drop the divider line */
body[data-page="konsultasjon"] .book-section {
    border-top: none;
}

/* Konsultasjon: drop the divider line above the process-steps section, and flatten
   the panel background so it flows seamlessly out of the book-section (no tone edge) */
body[data-page="konsultasjon"] .steps-section {
    border-top: none;
    background: transparent;
}

/* Map placed under the left-side contact text — fills the left column,
   cropped to a shorter band (iframe keeps its zoom; top/bottom clipped) */
.book-map {
    margin-top: 36px;
    max-width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    position: relative;
}
.book-map iframe {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    transform: translateY(-50%);
}
.book-map-faq {
    margin-top: 16px;
    text-align: left;
}

.book-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    max-width: 1160px;
    margin: 0 auto;
}

/* Sit the form's bottom level with the map's bottom edge — offset by the
   height the "Få veibeskrivelse" link adds below the map in the left column */
.book-form { margin-bottom: 53px; }

/* Kontakt: left-align (don't centre) the band so it lines up with the
   "Kontakt" page-intro heading above it; keep the width cap so it doesn't
   sprawl. Vertical alignment inherits the default (form bottom = map bottom). */
body[data-page="kontakt"] .book-grid { margin: 0; }

/* Kontakt: lay the three contact blocks out in a horizontal row above the map */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 48px;
    margin-bottom: 4px;
}
.contact-row .contact-block { margin-bottom: 0; }

.book-intro h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 24px;
}

.book-intro p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 360px;
}

.book-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 520px;
}

.form-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.form-row label {
    font-size: 13px;
    color: var(--ink);
}

/* Conditional info note in a book-form (e.g. Vareprøve details when that type is picked) */
.form-note {
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.form-note[hidden] { display: none; }
.form-note p { margin: 0 0 8px; }
.form-note p:last-child { margin-bottom: 0; }
.form-note__title { color: var(--ink); font-weight: 600; }
.form-note strong { color: var(--ink); font-weight: 600; }

.form-row input,
.form-row select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    padding: 4px 0;
    width: 100%;
}

/* Flatten the native select so it matches the underline fields (no OS gradient/arrows) */
.form-row select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23161513' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 11px 7px;
}
.form-row select::-ms-expand { display: none; }

/* Textarea (melding) reuses the underlined-field look */
.form-row textarea {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    padding: 4px 0;
    width: 100%;
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Top-aligned row for the textarea so the label hangs at the first line */
.form-row--top { align-items: start; }
.form-row--top label { padding-top: 5px; }

.form-static {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.form-static strong { color: var(--ink); font-weight: 500; }

.btn-solid {
    margin-top: 32px;
    background: var(--ink);
    color: var(--bg);
    padding: 14px 32px;
    font-size: 12px;
    letter-spacing: 0.12em;
    align-self: flex-start;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-solid:hover { opacity: 0.85; }

/* Arkitektboks feature (arkitekt page) — curated sample box, coming autumn 2026.
   Full-width 50/50 like the hero so its edges line up with every other section. */
.arkitektboks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding: 16px 30px 88px;
}
.arkitektboks__media { margin: 0; overflow: hidden; }
.arkitektboks__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
}
.arkitektboks__eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
}
.arkitektboks__text h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 20px;
}
.arkitektboks__text > p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 440px;
    margin-bottom: 28px;
}
.arkitektboks__form {
    margin-top: 8px;
    max-width: 460px;
}
.arkitektboks__form .form-row { padding: 12px 0; }
.arkitektboks__cta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.arkitektboks__cta .btn-solid { margin-top: 0; display: inline-block; }
.arkitektboks__note {
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
    margin: 0;
}
@media (max-width: 1199px) {
    .arkitektboks { grid-template-columns: 1fr; gap: 28px; padding-bottom: 64px; }
    .arkitektboks__media { order: -1; }
    .arkitektboks__media img { aspect-ratio: 3 / 2; }
}

/* ===== Arkitekt page: keep every section on the same full-width grid so
   nothing floats/indents inconsistently. ===== */
body[data-page="arkitekt"] .book-grid { max-width: none; align-items: start; }

/* Hero intro is a long informational paragraph, not a punchy tagline — size it as a
   clean readable intro instead of the oversized 30px lead. */
body[data-page="arkitekt"] .hero-text .lead {
    font-size: 18px;
    line-height: 1.55;
    max-width: 460px;
}

/* Hero image fills its column to match the (taller) text — no short floating image.
   Image is absolutely positioned so the text drives the row height, not the square source. */
@media (min-width: 1200px) {
    body[data-page="arkitekt"] .hero-grid { align-items: stretch; }
    body[data-page="arkitekt"] .hero-image { position: relative; height: 100%; min-height: 380px; }
    body[data-page="arkitekt"] .hero-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
}

/* ============ CONSULTATION STEPS (konsultasjon) ============ */
/* Reuses the .pillars hairline-rail from the Om-oss spread, standalone */
.steps-section {
    padding: 80px 30px 88px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-alt);
}

.steps-head {
    max-width: 720px;
    margin-bottom: 8px;
}

.steps-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 18px;
}

.steps-head h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.12;
}

.steps-lead {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 560px;
    margin-top: 16px;
}

.steps-section .pillars { margin-top: 0; }

/* Maintenance tab */
.maint-grid {
    padding: 8px 0 56px;
    border-top: 1px solid var(--line);
}

.maint-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 40px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.maint-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

.maint-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 600px;
}

/* Construction tab */
.constr-grid {
    display: grid;
    grid-template-columns: 33vw 1fr;
    gap: 32px;
    padding: 24px 0 56px;
    align-items: start;
}

.constr-intro {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 32px;
}

.constr-list li {
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-soft);
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.2s;
}

.constr-list li.active {
    color: var(--ink);
    font-weight: 600;
}

.constr-list li:hover { color: var(--ink); }

.constr-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 14px;
}

.constr-body {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 560px;
    margin-bottom: 32px;
}
.constr-body p { margin-bottom: 14px; }
.constr-body p:last-child { margin-bottom: 0; }

.constr-diagram { max-width: 440px; margin-top: 4px; }
.constr-diagram img,
.constr-diagram svg {
    width: 100%;
    height: auto;
    /* Line-drawing diagrams have a white background — multiply lets the cream
       page tone show through the white while keeping the linework + fills. */
    mix-blend-mode: multiply;
}

/* Character / Sortering tab */
.char-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1.25fr) 1.1fr;
    gap: 48px;
    padding: 24px 0 56px;
    align-items: start;
}

/* Short factual intro line above a tab panel's content */
.panel-intro {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 560px;
    margin: 24px 0 40px;
}

.char-intro {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 32px;
}

.char-list li {
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-soft);
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.2s;
}

.char-list li.active {
    color: var(--ink);
    font-weight: 600;
}

.char-list li:hover { color: var(--ink); }

.char-detail h3 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.char-detail p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 460px;
    margin-bottom: 14px;
}

.char-detail p:last-child {
    margin-bottom: 0;
    color: var(--ink);
}

.char-images img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* Dimensions tab */
.dim-grid {
    display: grid;
    grid-template-columns: 33vw 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 24px 0 56px;
    align-items: start;
}

.dim-intro {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.dim-col {
    display: flex;
    flex-direction: column;
}

.dim-head {
    font-size: 13px;
    color: var(--ink-soft);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 16px;
}

.dim-cell {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    min-height: 120px;
}

.dim-cell:last-child { border-bottom: none; }

/* Plank-specific Dimensjoner: left text field + independent Tykkelse/Bredde/Lengde lists */
.dim-plank {
    display: grid;
    grid-template-columns: 33vw 1fr 1fr 1fr;
    gap: 32px;
    padding: 24px 0 40px;
    align-items: start;
}
.dim-plank__constr {
    font-size: 20px;
    color: var(--ink);
    margin-top: 4px;
}
.dim-plank__soon {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    margin-top: 16px;
}
.dim-plank__col { display: flex; flex-direction: column; }
.dim-list { list-style: none; margin: 0; padding: 0; }
.dim-list li {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.dim-list li:last-child { border-bottom: none; }
.dim-plank__notes {
    border-top: 1px solid var(--line-soft);
    padding: 24px 0 40px;
    max-width: 640px;
}
.dim-plank__notes p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 8px;
}

.download-list { padding: 24px 0; }
.download-list li { margin-bottom: 12px; }
.download-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink);
}
.download-list a:hover { opacity: 0.7; }

.panel-placeholder {
    color: var(--ink-soft);
    font-size: 14px;
    padding: 40px 0;
}

/* Variants */
.variants-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

.variants li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-soft);
    border-bottom: 1px dashed transparent;
    cursor: pointer;
    transition: color 0.2s;
}

.variants li:hover { color: var(--ink); }

.variants li.active {
    color: var(--ink);
}

.variants li.active .variant-name { font-weight: 500; }
/* Period after the design name in the list, e.g. "Design No1." */
.variants .variant-name::after { content: "."; }

.swatch {
    width: 24px; height: 16px;
    display: inline-block;
    border: 1px solid var(--line-soft);
    background-size: cover;
    background-position: center;
}

.variant-type { color: var(--ink-soft); font-size: 12px; }

.variant-detail h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 14px;
}

.variant-detail p {
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 320px;
}

.variant-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Desktop: the preview stretches to the variant list's height, so the list,
   description and image line up as one clean block (no overhang). */
@media (min-width: 1200px) {
    .variant-image {
        align-self: stretch;
        position: relative;
        min-height: 320px;
    }
    .variant-image img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}

.pager {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
}

.pager button {
    width: 28px; height: 28px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.pager button:hover { background: var(--ink); color: var(--bg); }

/* ============ HOW TO ORDER ============ */
.how-to-order {
    padding: 64px 30px 80px;
    border-top: 1px solid var(--line-soft);
}

.how-to-order h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 40px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.steps li {
    position: relative;
    padding-left: 32px;
}

.step-num {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    color: var(--ink);
}

.steps h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.steps p {
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 280px;
}

.step-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
}

/* ============ REFERENCES SCROLLER ============ */
/* Product-photo grid ("Produktbilder" tab) — real photos of the actual product per category.
   Responsive; adapts to however many photos a category provides. */
.product-gallery__grid {
    display: grid;
    /* Cap each photo's width so a category with only 2–3 images doesn't blow
       them up to full-column size on wide screens — keep a modest gallery feel. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: start;
    gap: 16px;
    padding: 8px 0 24px;
}
.product-gallery__grid figure {
    margin: 0;
    overflow: hidden;
    background: var(--bg-alt);
}
.product-gallery__grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.product-gallery__grid figure:hover img { transform: scale(1.03); }
/* Single-photo galleries: one modest column instead of a full-bleed image */
.product-gallery__grid--single { grid-template-columns: minmax(0, 300px); }
@media (max-width: 560px) {
    .product-gallery__grid { grid-template-columns: 1fr 1fr; }
    .product-gallery__grid--single { grid-template-columns: minmax(0, 1fr); }
}

.references {
    padding: 64px 0 80px 30px;
    border-top: 1px solid var(--line-soft);
}

.references-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-right: 30px;
    margin-bottom: 28px;
}

.references-head h2 { font-size: 24px; font-weight: 400; }

.references-head .references-sub {
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 360px;
}

.references-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.references-track::-webkit-scrollbar { height: 4px; }
.references-track::-webkit-scrollbar-thumb { background: var(--line); }

.reference-card {
    flex: 0 0 auto;
    width: clamp(260px, 34vw, 460px);
    scroll-snap-align: start;
    color: var(--ink);
}

.reference-card figure { overflow: hidden; margin-bottom: 12px; }

.reference-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.reference-card:hover img { transform: scale(1.03); }

.reference-card figcaption {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* ============ FOOTER ============ */
.site-footer {
    background: var(--bg-alt);
    padding: 64px 30px 24px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px 64px;
    flex-wrap: wrap;
    padding-bottom: 40px;
    /* Contain on ultra-wide screens, left-aligned so the footer logo lines up
       with the header logo; brand left, nav rows right within the band. */
    max-width: 1320px;
}

/* Big brand on the left: larger logo + tagline + CTA row */
.footer-brand { flex: 0 1 auto; max-width: 440px; }

.footer-logo img {
    height: 46px;
    width: auto;
    /* Offset the PNG's transparent left pad (~234/1719 of width) so the visible
       "P" lines up with the tagline + CTA buttons below it (scales w/ height). */
    margin-left: -21.5px;
}

.footer-tagline {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    margin: 20px 0 26px;
    max-width: 320px;
}

.footer-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

.btn-outline {
    border: 1px solid var(--ink);
    padding: 10px 18px;
    font-size: 13px;
    color: var(--ink);
    transition: background 0.2s, color 0.2s;
    text-align: center;
}

.btn-outline:hover {
    background: var(--ink);
    color: var(--bg);
}

/* Right side: stacked rows of inline links (middot-separated) */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    text-align: right;
    /* Drop the rows down so the first one lines up with the tagline
       (the text under the logo), not the logo itself. */
    padding-top: 66px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.footer-row a,
.footer-row span {
    font-size: 14px;
    color: var(--ink);
    transition: opacity 0.2s;
}

.footer-row a:hover { opacity: 0.55; }

.footer-row > * + *::before {
    content: '·';
    margin: 0 14px;
    color: var(--line);
}

.footer-row--muted a { color: var(--ink-soft); }

.footer-row--contact a,
.footer-row--contact span {
    font-size: 13px;
    color: var(--ink-soft);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line-soft);
    padding-top: 16px;
    font-size: 12px;
    color: var(--ink-soft);
    /* Align the © / Personvern row with the left-aligned footer band above. */
    max-width: 1320px;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}
.footer-bottom a:hover { opacity: 0.6; }

/* ============ PRELOADER ============
   Full-screen loading overlay shown on every page load (markup = #plank-preloader
   at the top of <body>; controller = script.js). Uses the site's own tokens so it
   is a seamless extension of the page. */
#plank-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;                          /* above all site content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg);                  /* site cream */
    opacity: 1;
    transition: opacity 0.3s ease;          /* smooth fade-out on completion */
}
#plank-preloader.is-done {                  /* JS adds this when loading finishes */
    opacity: 0;
    pointer-events: none;                   /* never block interaction while fading */
}

.plank-preloader__logo {                    /* the PLANK wordmark image */
    height: 46px;
    width: auto;
    display: block;
    opacity: 0;                             /* refined fade-in */
    transform: translateY(6px);
    animation: plank-pre-fade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.plank-preloader__track {                   /* thin loading line under the logo */
    position: relative;
    width: 168px;
    height: 2px;
    border-radius: 999px;
    background: var(--line-soft);           /* subtle warm track */
    overflow: hidden;
    opacity: 0;
    animation: plank-pre-fade 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.plank-preloader__bar {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--ink);                 /* near-black fill, no glow */
    transform: scaleX(0);
    transform-origin: left center;          /* grows from the left; script.js drives scaleX */
}

@keyframes plank-pre-fade { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .plank-preloader__logo,
    .plank-preloader__track { animation: none; opacity: 1; transform: none; }
    #plank-preloader { transition: opacity 0.25s ease; }
}

/* ============ CHAT BUBBLE ============ */
/* ============ HOMEPAGE ============ */
.home-hero {
    display: grid;
    grid-template-columns: 2.08fr 2.08fr 1fr 1fr;
    gap: 18px;
    align-items: start;
    padding: 8px 30px 96px;
}

/* Desktop 5-tile bento (mobile ≤1199 uses the 2-col auto-flow defined in the media query):
   the two big tiles span both rows; the two small tiles sit top-right; the wide tile fills
   the bottom-right cell beneath them (spans both narrow columns). */
@media (min-width: 1200px) {
    .home-hero { grid-template-rows: auto auto; }
    .hero-tile--xl { grid-column: 1; grid-row: 1 / 3; }
    .hero-tile--lg { grid-column: 2; grid-row: 1 / 3; }
    .hero-tile--md { grid-column: 3; grid-row: 1; }
    .hero-tile--sm { grid-column: 4; grid-row: 1; }
    .hero-tile--wide { grid-column: 3 / 5; grid-row: 2; }
    /* The big tiles STRETCH to fill both rows; min-height:0 stops their media from inflating
       the row heights, so the rows are sized ONLY by the small tiles (row 1) and the wide
       tile (row 2). The big tiles then match that exactly → every bottom edge lines up at
       any viewport width. The wide tile's aspect just sets how tall the bottom row is
       (449/273 keeps the big tiles at ≈4/5). */
    .hero-tile--xl, .hero-tile--lg { align-self: stretch; min-height: 0; position: relative; }
    .home-hero .hero-tile--xl figure,
    .home-hero .hero-tile--lg figure { position: absolute; inset: 0; aspect-ratio: auto; }
    .home-hero .hero-tile--wide figure { aspect-ratio: 449 / 273; }
}

.hero-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hero-caption {
    display: block;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 16px;
    font-weight: 450;
}

.hero-tile figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #efece6;
}

/* A soft light that follows the cursor and brightens the image under it */
.hero-tile figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 360px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 72%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.hero-tile:hover figure::after { opacity: 1; }

.hero-tile img,
.hero-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* All stories tiles share a 4:5 image; big tiles are 2x wider so 2x taller */
.hero-tile figure { aspect-ratio: 4 / 5; }

.hero-tile:hover img,
.hero-tile:hover video {
    opacity: 1;
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink);
    transition: opacity 0.2s;
}

.cta-link:hover { opacity: 0.6; }

/* Collaboration section */
.collab {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
    min-height: 100vh; /* full-height, scales with the browser */
    padding: 0 0 0 30px; /* right side bleeds to the edge */
    border-top: none;
}

.collab-text {
    padding-left: 48px; /* nudge the text column a little right */
}

.collab-mark {
    font-family: var(--font-body); /* same as the slider floor names */
    /* Floor is 26px, not 28px: the longest word in the headline (EKSTRAORDINÆRE)
       is 290px at 28px + 0.16em tracking, which overflows the 272px text column
       on a 320px phone. The 3.4vw middle term is unchanged — the two-column
       layout at 1200–1294px depends on it. */
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 28px;
}

.collab-lead {
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 24px;
    max-width: 420px;
}

.collab-cta {
    margin-top: 32px;
}

.collab-image {
    align-self: stretch;
}

.collab-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

/* ===== Floor-type slider (collab section) ===== */
.floor-slider {
    position: relative;
    overflow: hidden;
    /* Big, full-viewport height that scales with the browser. Images crop via
       object-fit cover rather than dictating the height. Mobile height below. */
    height: 100vh;
}

.floor-track {
    display: flex;
    height: 100%;
    transition: transform 0.85s cubic-bezier(0.65, 0, 0.25, 1);
    will-change: transform;
}

.floor-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
}

.floor-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.floor-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    /* slow fade-out is the default */
    transition: opacity 1.8s ease;
}

.floor-overlay.is-visible {
    opacity: 1;
    /* quick fade-in on click */
    transition: opacity 0.3s ease;
}

.floor-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.2s, opacity 0.2s;
}

.floor-nav:hover { background: #fff; }
.floor-prev { left: 18px; }
.floor-next { right: 18px; }

.floor-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}

.floor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.floor-dot.active { background: #fff; }

/* ===== Expandable floor-info box (collab section) ===== */
.floor-info {
    width: 338px;
    max-width: 100%;
    margin-top: 36px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.4);
}

.floor-info__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.floor-info__name { font-weight: 600; }

.floor-info__icon {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.35s ease;
}

.floor-info[data-open="true"] .floor-info__icon { transform: rotate(45deg); }

.floor-info__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

.floor-info[data-open="true"] .floor-info__panel { max-height: 340px; }

.floor-info__panel-inner { padding: 0 20px 18px; }

.floor-info__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.floor-info__specs { margin-bottom: 14px; }

.floor-info__specs li {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
}

.floor-info__specs li span:first-child { color: var(--ink-soft); }

.floor-info__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    transition: opacity 0.2s;
}

.floor-info__link:hover { opacity: 0.7; }

/* Surfaces */
.surfaces {
    padding: 80px 30px;
    text-align: center;
}

.surfaces-head h2 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 16px;
}

.surfaces-head p {
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 520px;
    margin: 0 auto 20px;
}

/* Design grid */
/* ===== Dimensjoner band (home) — wide-plank drawing slides in from the right ===== */
.dim-band {
    padding: 32px 0 72px 78px; /* left = 30px section pad + 48px collab-text nudge; right bleeds */
    overflow: hidden;          /* the off-screen start position must not widen the page */
}

.dim-band__text {
    padding-right: 30px; /* the band itself has no right pad (media bleeds); text must not touch the edge */
}

.dim-band__title {
    font-family: var(--font-body);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 20px;
}

.dim-band__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.dim-band__specs strong {
    font-weight: 600;
    color: var(--ink);
}

.dim-band__media {
    margin: 40px 0 0 auto;   /* pushed toward the right edge */
    width: min(820px, 86%);  /* client 2026-08-26: "litt mindre på pc" (was 1100px; the 86% keeps mobile as before) */
    line-height: 0;
}

.dim-band__media img {
    width: 100%;
    height: auto;
    /* The drawing has a white background; multiply melts white into the cream
       page exactly, and keeps the artist's soft blown-out highlights intact
       (an alpha cutout would eat them). */
    mix-blend-mode: multiply;
    /* client 2026-08-26 asked for a fade toward the background: DONE IN THE JPEG
       (pixels blended 28% toward white), NOT via CSS opacity/filter — either one
       isolates the element and silently kills the multiply blend (white box). */
}

/* Entrance: text fades up, planks glide in from the right (client request).
   The glide/fade lives on the IMG, not the figure: animating the figure gives it
   opacity<1 + transform mid-transition, which isolates the group and breaks the
   img's multiply blend — the drawing's white box flashes visible while gliding.
   Transform/opacity on the blended element itself do not isolate its own blend. */
.dim-band__text,
.dim-band__media img {
    opacity: 0;
    transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.dim-band__text { transform: translateY(24px); }
.dim-band__media img { transform: translateX(14vw); transition-delay: 0.12s; }

.dim-band.is-in .dim-band__text,
.dim-band.is-in .dim-band__media img {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dim-band__text,
    .dim-band__media img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1199px) {
    .dim-band { padding-left: 24px; }
}

@media (max-width: 600px) {
    .dim-band { padding: 8px 0 56px 20px; }
    .dim-band__text { padding-right: 20px; }
    .dim-band__media { width: 94%; margin-top: 28px; }
}

/* ============ DINE VALG. DITT GULV. (home) — centered sorting picker, client mock ============ */
.choices {
    padding: 16px 30px 88px;
    text-align: center;
}

.sort-title {
    font-family: var(--font-body);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 18px;
}

.choices-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 48px;
}

.sort-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

.sort-col { margin: 0; }

.sort-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sort-desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    max-width: 240px;
    margin: 0 auto 18px;
}

.sort-col img {
    width: 100%;
    height: auto;
    display: block;
}

/* Whole sorting column is a link to that sorting on the Plank page */
.sort-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.25s ease;
}
.sort-link:hover { opacity: 0.85; }

/* Client: the two paragraphs continue BELOW the sorting grid */
.choices-body {
    max-width: 640px;
    margin: 56px auto 0;
    display: grid;
    gap: 18px;
    text-align: left;
}

.choices-body p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
}

/* ============ FARGE OG OVERFLATE (home) — centered, paired with the sorting picker above ============
   Client 2026-09-14: "kan denne seksjonen midtstilles?" — yes: same centered voice as
   .choices (title = .sort-title), so the two bands read as one pair. */
.colors {
    padding: 0 30px 88px;
    text-align: center;
}

.colors-lead {
    max-width: 560px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}

/* Overlapping colour dots, light → dark. Centered when they fit; when they don't
   (narrow screens) the rail scrolls horizontally instead of clipping the first dot —
   safe-center via auto margins on the first/last dot, not justify-content:center. */
.colors-rail {
    display: flex;
    align-items: center;
    padding: 44px 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.colors-rail::-webkit-scrollbar { display: none; }

.color-dot {
    display: block;   /* the dots are links */
    flex: 0 0 auto;
    width: clamp(92px, 10.5vw, 148px);
    aspect-ratio: 1 / 1;
    margin: 0 0 0 -26px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--bg);   /* cream ring makes the overlap read cleanly */
    transition: transform 0.35s ease;
}
.color-dot:first-child { margin-left: auto; }
.color-dot:last-child { margin-right: auto; }
.color-dot:hover { transform: translateY(-6px); }

.color-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.colors-note {
    max-width: 560px;
    margin: 22px auto 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .color-dot { transition: none; }
    .color-dot:hover { transform: none; }
}

@media (max-width: 900px) {
    .sort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

@media (max-width: 600px) {
    .choices { padding: 8px 20px 56px; }
    .colors { padding: 0 20px 56px; }
    .colors-rail { padding-top: 32px; }
    .choices-sub { margin-bottom: 36px; }
    .choices-body { margin-top: 40px; }
    .color-dot { border-width: 3px; margin-left: -20px; }
}

.design-sub {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: -20px 0 32px;  /* tucks under .section-title's 32px bottom margin */
}

.design-grid-section {
    padding: 64px 30px 96px;
}

.section-title {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 32px;
}

/* Horizontal side-scroller — one row, scrolls instead of wrapping */
.design-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;            /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.design-grid::-webkit-scrollbar { display: none; }   /* WebKit */
.design-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
}

.design-card {
    display: block;
    color: var(--ink);
    transition: opacity 0.2s;
}

.design-card:hover { opacity: 0.85; }

.design-card figure {
    overflow: hidden;
    margin-bottom: 12px;
}

.design-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.design-card:hover img { transform: scale(1.03); }

.design-card span {
    font-size: 13px;
    color: var(--ink);
}

/* Auto-scrolling marquee variant (home Design section). The controller in
   script.js drives a GPU translate3d transform for a buttery, sub-pixel loop and
   handles manual wheel + drag; the container just clips (overflow:hidden). Cards
   are duplicated in the markup (and cloned further on wide screens) so the loop
   never shows a gap. */
.design-grid--auto {
    overflow: hidden;
    scroll-snap-type: none;
    cursor: grab;
    touch-action: pan-y;                  /* vertical page scroll passes through; JS owns horizontal */
}
.design-grid--auto.is-dragging { cursor: grabbing; }
.design-marquee {
    display: flex;
    gap: 20px;
    flex: 0 0 auto;
    width: max-content;
    /* Own compositor layer → the transform animates without repainting the floor
       images each frame (the old scrollLeft approach stuttered). */
    will-change: transform;
    backface-visibility: hidden;
}
/* Reduced motion: JS bails, so fall back to a plain native horizontal scroller. */
@media (prefers-reduced-motion: reduce) {
    .design-grid--auto {
        overflow-x: auto;
        overflow-y: hidden;
        cursor: default;
        touch-action: auto;
        scrollbar-width: none;
    }
    .design-grid--auto::-webkit-scrollbar { display: none; }
    .design-marquee { will-change: auto; }
}

/* Story / about */
.story {
    padding: 96px 30px;
    background: var(--bg-alt);
}

.story-inner {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.story-inner p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
}

/* ============ SIMPLE CONTENT PAGES ============ */
.page-intro {
    padding: 24px 30px 8px;
    max-width: 820px;
}

.page-intro .lead {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    color: var(--ink);
    margin-top: 18px;
}

.content-block {
    padding: 48px 30px 80px;
}

.content-narrow {
    max-width: 720px;
    display: grid;
    gap: 20px;
}

.content-narrow p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
}

/* ============ LEGAL / PERSONVERN ============ */
.legal .legal-updated {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 4px;
}
.legal h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 20px;
}
.legal ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}
.legal ul li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
.legal a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal a:hover { opacity: 0.6; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 32px 30px 88px;
}

.gallery-grid a { display: block; color: var(--ink); }
.gallery-grid figure { overflow: hidden; margin-bottom: 10px; }

.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-grid a:hover img { transform: scale(1.03); }
.gallery-grid figcaption { font-size: 12px; color: var(--ink-soft); }
.gallery-grid .gallery-tall { grid-row: span 2; }
.gallery-grid .gallery-tall img { aspect-ratio: 4 / 7; }

/* ============ ABOUT SPREAD (Om oss) ============ */
.about-spread {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36%;
    gap: 56px;
    align-items: stretch;
    background: var(--bg-alt);
    /* no padding here so the image bleeds to the top/right/bottom edges;
       breathing room is on the content column instead */
    padding: 0 0 0 30px;
    min-height: clamp(560px, 74vh, 760px);
}

.about-spread__content {
    display: flex;
    flex-direction: column;
    padding: 88px 0;
}

.about-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 22px;
}

.about-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin-bottom: 26px;
}

.about-intro {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--ink);
    max-width: 560px;
}

/* Four pillars sit at the bottom of the spread, like the reference */
.pillars {
    position: relative;
    margin-top: auto;
    padding-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Continuous hairline rail the dots hang from */
.pillars::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(72px + 48px);   /* padding-top + title row height */
    height: 1px;
    background: var(--line);
}

.pillar {
    display: grid;
    grid-template-rows: 48px 32px 1fr;   /* title · node · body — deterministic dot alignment */
}

.pillar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    align-self: start;
}

.pillar-node {
    position: relative;
}
.pillar-node::before {              /* node dot, centred on the rail */
    content: '';
    position: absolute;
    top: -4px; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink);
    z-index: 1;
}
.pillar-node::after {               /* vertical dropper to the body */
    content: '';
    position: absolute;
    top: 6px; left: 3px;
    width: 1px; height: 24px;
    background: var(--line);
}

.pillar p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 230px;
}

.about-spread__image {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    min-height: 320px;
}
.about-spread__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============ INSPIRATION GALLERY ============ */
.insp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 8px 30px 88px;
}

.insp-item { margin: 0; }

.insp-item .insp-frame {
    overflow: hidden;
    line-height: 0;
    background: var(--bg-alt);
}

.insp-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.insp-item:hover img { transform: scale(1.04); }

.insp-item figcaption {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ink);
}

.insp-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

.insp-item--hero { grid-column: 1 / -1; }
.insp-item--hero img { aspect-ratio: 16 / 9; }

.insp-item--banner { grid-column: 1 / -1; }
.insp-item--banner img { aspect-ratio: 21 / 9; }

.insp-item { cursor: pointer; }

/* ============ LIGHTBOX ============ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(22, 21, 19, 0.95);
}
.lightbox.is-open { display: flex; }

.lightbox__stage {
    margin: 0;
    max-width: 86vw;
    max-height: 84vh;
    display: flex;
}
.lightbox__img {
    max-width: 86vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.lightbox__close {
    position: absolute;
    top: 22px; right: 30px;
    font-size: 32px;
    line-height: 1;
    color: var(--bg);
    opacity: 0.8;
    transition: opacity 0.2s;
}
.lightbox__close:hover { opacity: 1; }

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 44px;
    line-height: 1;
    color: var(--bg);
    padding: 18px 22px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }

.lightbox__meta {
    position: absolute;
    bottom: 22px; left: 0; right: 0;
    text-align: center;
    color: var(--bg);
    font-size: 13px;
    letter-spacing: 0.04em;
}
.lightbox__title { opacity: 0.9; }
.lightbox__count { opacity: 0.55; margin-left: 10px; }

@media (max-width: 600px) {
    .lightbox__nav { font-size: 34px; padding: 12px; }
    .lightbox__close { top: 16px; right: 18px; }
    .maint-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1199px) {
    /* === Header: compact bar + hamburger drawer === */
    .site-header {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 16px 20px;
        gap: 16px;
        position: relative;
        z-index: 60;
    }
    .logo { position: relative; z-index: 62; }
    .logo img { height: 44px; margin-left: -20px; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px; height: 42px;
        margin-right: -8px;
        position: relative;
        z-index: 62;
    }
    .nav-toggle__bars { position: relative; display: block; width: 26px; height: 13px; }
    .nav-toggle__bars i {
        position: absolute; left: 0; width: 100%; height: 1.6px;
        background: var(--ink);
        transition: top .3s ease, transform .3s ease, opacity .2s ease;
    }
    .nav-toggle__bars i:nth-child(1) { top: 0; }
    .nav-toggle__bars i:nth-child(2) { top: 6px; }
    .nav-toggle__bars i:nth-child(3) { top: 12px; }
    .site-header.nav-open .nav-toggle__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .site-header.nav-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
    .site-header.nav-open .nav-toggle__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

    /* Drawer overlay — fades/slides in vertically (no horizontal overflow) */
    .header-main {
        display: flex;
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 90px 28px 40px;
        background: var(--bg);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .3s ease, transform .35s ease, visibility .3s;
        z-index: 55;
    }
    .site-header.nav-open .header-main {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .header-main .main-nav {
        display: flex;
        flex-direction: column;
        gap: 26px;
        width: 100%;
        flex: none;
        justify-content: flex-start;
    }
    .header-main .main-nav .nav-col { display: flex; flex-direction: column; gap: 12px; }
    .header-main .main-nav li { font-size: 21px; line-height: 1.1; margin: 0; }
    .header-main .main-nav a { transform: none; font-weight: 400; }
    .header-main .main-nav a.active { font-weight: 600; }
    .header-main .main-nav a::after { display: none; }
    .header-main .search {
        width: 100%;
        margin-top: 30px;
        transform: none;
    }

    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-media { order: 2; }
    .variants-grid { grid-template-columns: 1fr; }
    .char-grid { grid-template-columns: 1fr; gap: 24px; }
    .constr-grid { grid-template-columns: 1fr; gap: 24px; }
    .dim-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .dim-intro { grid-column: 1 / -1; }
    .dim-plank { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
    .dim-plank__intro { grid-column: 1 / -1; }
    /* Keep tabs on ONE line at all widths; each tab natural-width, row scrolls if needed */
    .tabs { grid-auto-columns: max-content; gap: 20px; }
    .steps { grid-template-columns: 1fr; gap: 40px; }
    .footer-inner { flex-direction: column; gap: 36px; }
    .footer-brand { flex-basis: auto; }
    .footer-nav { align-items: flex-start; text-align: left; padding-top: 0; }
    .footer-row { justify-content: flex-start; }
    .home-hero { grid-template-columns: 1fr 1fr; padding: 16px 20px 56px; gap: 16px; }
    .home-hero .hero-tile figure { aspect-ratio: 4 / 5; }
    /* The wide (art-book) tile becomes a full-width band at the bottom on smaller screens */
    .home-hero .hero-tile--wide { grid-column: 1 / -1; }
    .home-hero .hero-tile--wide figure { aspect-ratio: 16 / 10; }
    .collab { grid-template-columns: 1fr; padding: 48px 24px; min-height: auto; }
    .collab-text { padding-left: 0; }
    .floor-slider { height: 60vh; min-height: 360px; align-self: auto; }
    .design-card { flex-basis: 78vw; }
    .story { padding: 64px 24px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); padding: 24px 24px 64px; }
    .gallery-grid .gallery-tall { grid-row: auto; }
    .gallery-grid .gallery-tall img { aspect-ratio: 4 / 5; }
    .showroom-grid, .book-grid, .map-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-spread { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px; min-height: 0; }
    .about-spread__image { order: -1; height: 300px; min-height: 0; }
    .pillars { grid-template-columns: 1fr 1fr; gap: 44px 32px; padding-top: 8px; }
    .pillars::before { display: none; }
    .pillar { grid-template-rows: auto 28px 1fr; }
    .pillar-title { margin-bottom: 14px; }
}

@media (max-width: 600px) {
    .site-header, .hero, .tabs-section, .how-to-order, .site-footer { padding-left: 20px; padding-right: 20px; }
    .steps-section { padding: 56px 20px 64px; }
    .about-spread { padding: 48px 20px; }
    .pillars { grid-template-columns: 1fr; gap: 28px; }
    .insp-grid { grid-template-columns: 1fr; gap: 28px; padding: 8px 20px 64px; }
    .insp-item--hero img, .insp-item--banner img { aspect-ratio: 16 / 10; }
    .footer-inner { gap: 32px; }
    .footer-cta { flex-direction: column; width: 100%; }
    .btn-outline { width: 100%; }
    .footer-row { justify-content: flex-start; }
    /* Extra bottom space so the footer-bottom row clears the floating chat bubble */
    .site-footer { padding-bottom: 88px; }
    .footer-bottom { gap: 16px; flex-direction: column; align-items: flex-start; }
    .page-title { font-size: 24px; }
    /* Stack booking-form rows (label over field) so inputs get full width */
    .form-row { grid-template-columns: 1fr; align-items: start; gap: 6px; padding: 12px 0; }
    .form-row--top label { padding-top: 0; }
}