/* Shared Cykelmecken styles, extracted from index.html for the subpages. Regenerate, do not edit. */
/* Familjen Grotesk (SIL OFL), self-hosted → Shopify: assets/ + font_url */
@font-face{ font-family:"Familjen Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/familjen-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Familjen Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/familjen-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* =========================================================
   TOKENS — the incumbent Cykelmecken palette (cm-editorial.css)
   ========================================================= */
:root{
  --ink:#171717;
  --ink-2:#3a3a3a;
  --muted:#545454;
  --muted-2:#636363;
  --rule:#d8d8d8;
  --rule-soft:#e6e6e2;
  --paper:#f7f6f2;
  --paper-hi:#fbfaf8;
  --mint:#eef3f1;
  --mint-2:#e8f1ef;
  --lime:#d5e17c;
  --lime-pale:#e8eddf;
  --lime-wash:#edf0e6;
  --forest:#202420;
  --forest-2:#30382e;
  --forest-rule:#3c463a;
  --bone:#f7f6f2;
  --bone-muted:#c3c9bd;
  --on-ink:#ffffff;
  --on-ink-muted:#cfd3c8;
  --lime-hover:#e2ec96;
  --leader:#b4b6ae;
  --well:#efefec;
  --forest-placeholder:#9aa294;
  --open:#3f8f4f;
  --error-rule:#f0a58f;
  --error:#f4b8a6;
  --scrim:rgba(0,0,0,.6);
  /* Skylten: Cykelmecken turquoise, sampled from the round logo and the shop sign */
  --sign:#41cbd3;
  --sign-deep:#0d4a50;
  --sign-rule:#2f9ea5;
  --lime-deep:#4a521b;
  --lime-rule:#a8b45a;
  --star:#fbbc04;

  --font:"Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mark:Helvetica, Arial, sans-serif; /* the incumbent CYKELMECKEN lettering */

  --gutter:40px;
  --shell:min(100% - (var(--gutter) * 2), 1440px);
  --section:clamp(72px, 8vw, 128px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1100px){ :root{ --gutter:24px; } }
@media (max-width:799px){ :root{ --gutter:16px; } }

/* =========================================================
   BASE + BROWSER SURFACES
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-color:var(--ink-2) var(--paper); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font:400 16px/1.6 var(--font);
  color:var(--ink);
  background:
    linear-gradient(to bottom, transparent 0, transparent 900px, var(--paper) 1150px) top / 100% 1150px no-repeat,
    linear-gradient(155deg, var(--paper-hi) 0%, var(--paper) 35%, var(--mint) 72%, var(--mint-2) 100%) top / 100% 1150px no-repeat,
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 45%, var(--mint) 100%) var(--paper);
  caret-color:var(--ink);
  font-feature-settings:"ss01";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--lime); color:var(--ink); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-underline-offset:5px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ink); outline-offset:4px;
}
h1,h2,h3,h4{ margin:0; font-weight:700; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
.shell{ width:var(--shell); margin-inline:auto; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--on-ink); padding:12px 16px; font-size:14px; }
.skip:focus{ top:12px; }
.num{ font-variant-numeric:tabular-nums; }
.icon{ width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* Buttons — square, ink, the incumbent's language */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:52px; padding:14px 20px;
  background:var(--ink); color:var(--on-ink); text-decoration:none;
  font:600 14px/1.3 var(--font); letter-spacing:.005em;
  border:1px solid var(--ink); cursor:pointer;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:hover{ background:var(--ink-2); }
.btn .btn__meta{ font-weight:400; color:var(--on-ink-muted); }
.btn--lime .btn__meta{ color:var(--ink-2); }
.btn .icon{ transition:transform .3s var(--ease-out); }
.btn:hover .icon{ transform:translateX(3px); }
.btn--small{ min-height:44px; padding:10px 14px; gap:14px; font-size:13px; }
.btn--lime{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.btn--lime:hover{ background:var(--lime-hover); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--on-ink); }
.btn--ghost-light{ background:transparent; color:var(--bone); border-color:var(--bone-muted); }
.btn--ghost-light:hover{ background:var(--lime); border-color:var(--lime); color:var(--ink); }
.room__more{ margin-top:22px; align-self:flex-start; }
.link{
  display:inline-flex; align-items:center; gap:8px;
  font:600 14px/1.5 var(--font); text-decoration:underline; text-underline-offset:6px;
}
.link .icon{ transition:transform .3s var(--ease-out); }
.link:hover .icon{ transform:translateX(3px); }

/* Placeholder marker — must be replaced before launch */
.ph{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 7px; border:1px dashed currentColor;
  font:600 10px/1.4 var(--font); letter-spacing:.08em; text-transform:uppercase;
  vertical-align:middle; white-space:nowrap;
}

/* =========================================================
   SECTION: announcement  → sections/cm-announcement.liquid
   ========================================================= */
.announce{
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:9px 16px; background:var(--lime); color:var(--ink);
  font:600 11px/1.4 var(--font); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; text-align:center;
}
.announce:hover span{ text-decoration:underline; text-underline-offset:4px; }

/* =========================================================
   SECTION: header  → sections/cm-header.liquid
   ========================================================= */
.header__row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:24px;
  padding-block:18px 12px; border-bottom:1px solid var(--rule);
}
.nav__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.nav__item{ position:relative; }
.nav__tab{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:0; cursor:pointer;
  background:var(--ink); color:var(--on-ink); text-decoration:none;
  font:600 11px/1 var(--font); letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .2s var(--ease-out);
}
.nav__tab:hover, .nav__item[data-open] .nav__tab{ background:var(--ink-2); }
.nav__tab[aria-current="page"]{ background:var(--lime); color:var(--ink); }
.nav__chev{ width:12px; height:12px; transition:transform .25s var(--ease-out); }
.nav__item[data-open] .nav__chev{ transform:rotate(180deg); }
.nav__panel{
  position:absolute; left:0; top:calc(100% + 6px); z-index:45; min-width:290px; padding:6px 0;
  background:var(--paper); border:1px solid var(--ink); box-shadow:0 14px 28px rgba(0,0,0,.10);
  visibility:hidden; opacity:0; transform:translateY(-4px);
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s;
}
.nav__panel::before{ content:""; position:absolute; left:-1px; right:-1px; top:-8px; height:8px; }
.nav__item:hover .nav__panel, .nav__item[data-open] .nav__panel{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.nav__panel a{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:11px 18px; font-size:15px; font-weight:600; text-decoration:none; color:var(--ink); }
.nav__panel a span{ font-size:13px; font-weight:400; color:var(--muted); white-space:nowrap; }
.nav__panel a:hover, .nav__panel a:focus-visible{ background:var(--lime-wash); outline-offset:-2px; }
.brand{ display:flex; flex-direction:column; align-items:center; text-decoration:none; }
.brand__word{ font:900 30px/1 var(--font-mark); letter-spacing:-.06em; }
.brand__sub{ font:400 8px/1.8 var(--font); letter-spacing:.24em; text-transform:uppercase; margin-top:6px; }
.brand__logo{ width:64px; height:auto; margin-top:6px; mix-blend-mode:multiply; }
.utils{ display:flex; justify-content:flex-end; align-items:center; gap:20px; font:600 11px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.utils a:not(.btn){ text-decoration:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.utils a:not(.btn):hover{ text-decoration:underline; }
.utils .btn{ text-transform:none; letter-spacing:.005em; white-space:nowrap; }
.search{ display:flex; align-items:center; gap:8px; width:180px; border-bottom:1px solid var(--ink); }
.search input{
  width:100%; min-width:0; height:36px; border:0; background:transparent; padding:0;
  font:400 15px/1.4 var(--font); color:var(--ink); border-radius:0;
}
.search input::placeholder{ color:var(--muted); }
.search input:focus-visible{ outline:none; }
.search:focus-within{ box-shadow:0 1px 0 0 var(--ink); }
.search button{ display:grid; place-items:center; width:32px; height:40px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; }
.cart-count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; background:var(--ink); color:var(--on-ink); font-size:10px; letter-spacing:0; }

.hours{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-block:10px 12px; border-bottom:1px solid var(--rule); font-size:13px; line-height:1.5;
}
.hours a{ text-decoration:none; font-weight:600; }
.hours a:hover{ text-decoration:underline; }
.status{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.status::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--muted-2);
}
.status[data-open="true"]::before{ background:var(--open); box-shadow:0 0 0 3px color-mix(in srgb, var(--open) 18%, transparent); }
.hours__list{ color:var(--muted); }
.hours__list strong{ color:var(--ink); font-weight:600; }
.hours__links{ display:flex; align-items:center; gap:10px; }
.hours__links span{ color:var(--muted-2); }

/* Compact bar */
.minibar{
  position:fixed; inset:0 0 auto 0; z-index:60; background:var(--paper); border-bottom:1px solid var(--rule);
  transform:translateY(-100%); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.minibar[data-show="true"]{ transform:none; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.minibar__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:36px; height:56px; }
.minibar__brand{ font:900 19px/1 var(--font-mark); letter-spacing:-.05em; text-decoration:none; }
.minibar__nav{ display:flex; gap:28px; font:600 11px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; }
.minibar__nav a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.minibar__nav a:hover{ text-decoration:underline; }
.minibar__utils{ display:flex; align-items:center; gap:20px; font:600 11px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.minibar__utils > a:not(.btn){ display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; }
.minibar__utils .btn{ text-transform:none; letter-spacing:.005em; }

.menu{ display:none; }

/* =========================================================
   SECTION: hero (kept from the incumbent)  → sections/cm-hero.liquid
   ========================================================= */
.hero{ display:grid; grid-template-columns:1fr 1fr; gap:50px; padding-top:20px; }
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:16px 0 20px; }
.hero h1{ font-size:clamp(48px,5.7vw,88px); line-height:.98; letter-spacing:-.045em; max-width:12ch; margin-bottom:26px; }
.hero__lede{ font-size:17px; line-height:1.6; max-width:40ch; color:#454545; margin-bottom:24px; }
.offer{
  display:inline-block; background:var(--lime); color:var(--ink); padding:7px 12px; margin-bottom:22px;
  font:700 11px/1.5 var(--font); letter-spacing:.05em; text-transform:uppercase;
}
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.hero__hint{ font-size:13px; color:var(--muted); margin-top:14px; }
.hero__loc{ font-size:12px; color:var(--muted-2); margin-top:18px; }
.hero__photo{ position:relative; margin:0; aspect-ratio:1.16; overflow:hidden; background:var(--well); }
.hero__photo picture{ display:contents; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__photo figcaption{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:72px 24px 20px; color:var(--on-ink); background:linear-gradient(transparent,var(--scrim));
  font:600 11px/1.4 var(--font); letter-spacing:.08em; text-transform:uppercase;
}

/* Proof strip — real evidence only */
.proof{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:20px; border-block:1px solid var(--rule);
}
.proof__item{ display:flex; flex-direction:column; gap:2px; padding:20px 24px; border-left:1px solid var(--rule); text-decoration:none; }
.proof__item:first-child{ border-left:0; padding-left:0; }
.proof__item strong{ display:flex; align-items:center; gap:8px; font-size:15px; line-height:1.35; }
.proof__item span{ font-size:13px; color:var(--muted); }
a.proof__item:hover strong{ text-decoration:underline; text-underline-offset:4px; }
.stars{ display:inline-flex; gap:1px; color:var(--ink); }
.stars svg{ width:14px; height:14px; fill:currentColor; stroke:none; }
.proof .proof__item--rating{
  height:100%; justify-content:center; gap:4px; padding:18px 24px;
  background:var(--ink); color:var(--on-ink);
  transition:background-color .2s var(--ease-out);
}
.proof .proof__item--rating:hover{ background:var(--ink-2); }
.proof__item--rating strong{ font-size:16px; }
.proof .proof__item--rating .rating-line{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:inherit; color:var(--on-ink); }
.proof .proof__item--rating .rating-sub{ display:inline-flex; align-items:center; gap:6px; color:var(--bone-muted); }
.proof__item--rating .rating-sub .icon{ width:12px; height:12px; }
.proof .rating-stars{ display:inline-flex; gap:2px; color:var(--star); }
.rating-stars svg{ width:17px; height:17px; fill:currentColor; }
.proof__item--rating:focus-visible{ outline-color:var(--ink); outline-offset:3px; }

/* =========================================================
   THE WALK — the rooms in a row (the sticky route bar with the rolling bike is a premium feature)
   ========================================================= */
.walk{ position:relative; margin-top:var(--section); }

.room{ padding-block:var(--section); scroll-margin-top:56px; }
.room + .room{ border-top:1px solid var(--rule); }
.room--sign, .room--lime, .room--booth,
.room--sign + .room, .room--lime + .room, .room--booth + .room{ border-top:0; }

/* Butiken: the shop window under the turquoise sign */
.room--sign{ background:var(--sign); color:var(--ink); }
.room--sign .room__lede, .room--sign .product__type, .room--sign .aisle span, .room--sign .shop-trust{ color:var(--sign-deep); }
.room--sign .shop-trust a{ color:var(--ink); }
.room--sign .aisle{ border-bottom-color:var(--sign-rule); }
.room--sign .aisle + .aisle{ border-left-color:var(--sign-rule); }
.room--sign .product__img{ background:var(--sign-rule); }

/* Verkstaden: lime, the bench and the price board */
.room--lime{ background:var(--lime); color:var(--ink); }
.room--lime .room__lede, .room--lime .board__note, .room--lime .price__desc, .room--lime .price--ph .price__amount,
.room--lime .steps p, .room--lime .bench__photo figcaption, .room--lime .checklist__group li, .room--lime .partners p{ color:var(--lime-deep); }
.room--lime .price:not(:first-child){ border-top-color:var(--lime-rule); }
.room--lime .price:hover{ background:var(--lime-hover); }
.room--lime .price__dots{ border-bottom-color:var(--lime-rule); }
.room--lime .steps li{ border-top-color:var(--lime-rule); }
.room--lime .checklist{ border-color:var(--lime-rule); }
.room--lime .assure{ background:var(--paper); }
.room--lime ::selection{ background:var(--ink); color:var(--lime); }
.room__head{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:end;
  margin-bottom:clamp(40px,5vw,72px);
}
.room h2{ font-size:clamp(38px,4.6vw,68px); line-height:1.0; letter-spacing:-.04em; max-width:14ch; }
.room__lede{ font-size:17px; line-height:1.6; color:var(--muted); max-width:46ch; }
.room__lede + .link{ margin-top:18px; }

/* =========================================================
   ROOM 1: Verkstaden — service price board  → sections/cm-service.liquid
   ========================================================= */
.bench{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:start; }
.bench__photo{ position:sticky; top:140px; margin:0; }
.bench__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 45%; background:var(--well); }
.bench__photo figcaption{ font-size:13px; color:var(--muted); margin-top:12px; }

.board__top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:14px; }
.board__title{ font-size:22px; letter-spacing:-.02em; }
.board__note{ font-size:13px; color:var(--muted); }
.board{ border-bottom:1px solid var(--ink); }
.price{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:28px; align-items:center;
  padding:20px 12px 20px 0; border-top:1px solid var(--rule);
  transition:background-color .25s var(--ease-out);
}
.price > div{ transition:transform .4s var(--ease-out); }
.price:first-child{ border-top-color:var(--ink); }
.price:hover{ background:var(--lime-wash); }
.price:hover > div{ transform:translateX(12px); }
.price__line{ display:flex; align-items:baseline; gap:14px; }
.price__name{ font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.015em; }
.price__dots{ flex:1; min-width:20px; border-bottom:2px dotted var(--leader); transform:translateY(-5px); }
.price__amount{ font-size:24px; line-height:1; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.price__desc{ font-size:14px; color:var(--muted); margin-top:6px; max-width:52ch; }
.price--ph .price__amount{ color:var(--muted); }

.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px; counter-reset:step; }
.steps li{ counter-increment:step; padding-top:16px; border-top:1px solid var(--rule); }
.steps h3{ font-size:16px; line-height:1.35; font-weight:600; display:flex; gap:10px; }
.steps h3::before{ content:counter(step); display:inline-grid; place-items:center; width:22px; height:22px; flex-shrink:0; background:var(--ink); color:var(--on-ink); font-size:11px; }
.steps p{ font-size:14px; color:var(--muted); margin-top:6px; }

.assure{
  display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:start;
  margin-top:32px; padding:22px 24px; background:var(--lime-pale);
}
.assure .icon{ width:22px; height:22px; margin-top:2px; }
.assure p{ font-size:15px; line-height:1.55; }
.assure p strong{ font-weight:600; }

.checklist{ margin-top:32px; border-block:1px solid var(--rule); }
.checklist summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:60px;
  cursor:pointer; list-style:none; font-weight:600; font-size:16px;
}
.checklist summary::-webkit-details-marker{ display:none; }
.checklist summary .icon{ transition:transform .3s var(--ease-out); }
.checklist[open] summary .icon{ transform:rotate(45deg); }
.checklist__grid{ columns:3 200px; column-gap:32px; padding:8px 0 28px; }
.checklist__group{ break-inside:avoid; margin-bottom:20px; }
.checklist__group h4{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.checklist__group li{ font-size:14px; color:var(--muted); line-height:1.7; }

.partners{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px; }
.partners p{ font-size:13px; color:var(--muted); width:100%; }
.partners img{ height:18px; width:auto; filter:brightness(0); opacity:.78; }
.partners img[alt="Rawbike"]{ height:14px; }
.partners img[alt="Skeppshult"]{ height:26px; }
.rawbike{ margin-top:28px; font-size:15px; line-height:1.6; }
.rawbike a{ font-weight:600; }

/* Workshop gallery — one photo at a time, arrows + counter */
.shots{ min-width:0; }
.shots__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; margin:0; padding:0; list-style:none;
}
.shots__track::-webkit-scrollbar{ display:none; }
.shots__track:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.shots__item{ scroll-snap-align:start; }
.shots__item figure{ margin:0; }
.shots__bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; }
.shots__count{ font-size:13px; font-weight:600; }
.shots__nav{ display:flex; gap:8px; }
.strip__btn.strip__btn--ink{ border-color:var(--ink); color:var(--ink); }
.strip__btn.strip__btn--ink:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--lime); }

/* =========================================================
   RAWBIKE — service for one brand  → sections/cm-rawbike.liquid
   ========================================================= */
.room-group{ scroll-margin-top:56px; }
.rb{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:start; }
.rb .room__lede{ margin-top:24px; }
.rb__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; margin-top:40px; border-top:1px solid var(--ink); }
.rb__list li{ padding-top:18px; }
.rb__list h3{ font-size:18px; line-height:1.35; font-weight:600; letter-spacing:-.015em; }
.rb__list p{ font-size:14px; color:var(--muted); margin-top:6px; }
.rb__offer{ margin-top:44px; padding-top:24px; border-top:1px solid var(--rule); }
.rb__price{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:18px; font-weight:600; }
.rb__price strong{ font-size:24px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.rb__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:20px; }
.rb__note{ font-size:14px; color:var(--muted); margin-top:20px; max-width:62ch; }
.rb__note a{ color:var(--ink); font-weight:600; }
.rb__photo{ position:sticky; top:140px; margin:0; }
.rb__photo > img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--well); }
.rb__photo figcaption{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); margin-top:12px; }
.rb__logo{ height:12px; width:auto; filter:brightness(0); }

/* =========================================================
   ROOM 2: Butiken — shop window  → sections/cm-shop-window.liquid
   ========================================================= */
.window{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.product{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
.product--lead{ grid-column:span 2; grid-row:span 2; }
.product__img{ position:relative; overflow:hidden; background:var(--well); aspect-ratio:4/3; }
.product--lead .product__img{ aspect-ratio:auto; flex:1; min-height:320px; }
.product__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.product:hover .product__img img{ transform:scale(1.03); }
.product__meta{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding-top:14px; }
.product__name{ font-size:16px; line-height:1.3; font-weight:600; }
.product--lead .product__name{ font-size:22px; letter-spacing:-.02em; }
.product__type{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.product__price{ font-size:16px; font-weight:700; white-space:nowrap; }
.product--lead .product__price{ font-size:22px; }

.aisles{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:56px; border-top:1px solid var(--ink); }
.aisle{
  display:flex; flex-direction:column; gap:4px; padding:20px 20px 22px 0; text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.aisle + .aisle{ padding-left:20px; border-left:1px solid var(--rule); }
.aisle strong{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:18px; letter-spacing:-.015em; }
.aisle span{ font-size:13px; color:var(--muted); }
.aisle .icon{ transition:transform .3s var(--ease-out); }
.aisle:hover strong{ text-decoration:underline; text-underline-offset:5px; }
.aisle:hover .icon{ transform:translateX(3px); }
.shop-trust{ display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:24px; font-size:14px; color:var(--muted); }
.shop-trust span{ display:inline-flex; align-items:center; gap:8px; }
.shop-trust a{ color:var(--ink); font-weight:600; }

/* =========================================================
   ROOM 3: Lackering — paint booth  → sections/cm-paint.liquid
   ========================================================= */
.room--booth{ background:var(--forest); color:var(--bone); }
.room--booth .room__lede{ color:var(--bone-muted); }
.booth{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:stretch; }
.booth__photo{ margin:0; position:relative; min-height:420px; }
.booth__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% center; }
.booth__copy{ display:flex; flex-direction:column; justify-content:center; }
.booth h2{ max-width:10ch; }
.booth .room__lede{ margin-top:24px; }
.booth__prices{ margin-top:36px; border-top:1px solid var(--forest-rule); }
.booth__price{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0; border-bottom:1px solid var(--forest-rule); }
.booth__price > span:first-child{ font-size:17px; font-weight:600; }
.booth__price > span:last-child{ color:var(--lime); font-weight:700; font-size:18px; display:inline-flex; align-items:center; gap:10px; }
.booth__price .ph{ color:var(--bone-muted); }
.booth__steps{ margin-top:28px; display:grid; gap:10px; counter-reset:b; }
.booth__steps li{ counter-increment:b; display:flex; gap:12px; font-size:15px; color:var(--bone-muted); }
.booth__steps li::before{ content:counter(b); display:inline-grid; place-items:center; width:22px; height:22px; flex-shrink:0; border:1px solid var(--lime); color:var(--lime); font-size:11px; font-weight:700; }

.booth__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.quote-form{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px);
  margin-top:clamp(56px,6vw,96px); padding-top:clamp(40px,4vw,56px); border-top:1px solid var(--forest-rule);
}
.quote-form h3{ font-size:clamp(26px,2.6vw,36px); line-height:1.08; letter-spacing:-.03em; max-width:16ch; }
.quote-form__aside p{ color:var(--bone-muted); margin-top:14px; max-width:40ch; }
.quote-form__aside a{ color:var(--bone); font-weight:600; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-content:start; align-self:start; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; letter-spacing:.02em; }
.field input, .field select, .field textarea{
  width:100%; min-height:48px; padding:12px 0; border:0; border-bottom:1px solid var(--bone-muted);
  background:transparent; color:var(--bone); font:400 16px/1.4 var(--font); border-radius:0; caret-color:var(--lime);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--bone) 50%),linear-gradient(135deg,var(--bone) 50%,transparent 50%); background-position:calc(100% - 12px) 52%, calc(100% - 7px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:28px; }
.field select option{ color:var(--ink); }
.field textarea{ min-height:112px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--forest-placeholder); }
.room--booth :focus-visible{ outline-color:var(--lime); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:none; border-bottom-color:var(--lime); box-shadow:0 1px 0 0 var(--lime); }
.field[data-invalid] input, .field[data-invalid] textarea{ border-bottom-color:var(--error-rule); }
.field__error{ font-size:13px; color:var(--error); min-height:0; }
.field__error:empty{ display:none; }
.form__foot{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.form__foot p{ font-size:13px; color:var(--bone-muted); }
.form__done{ grid-column:1 / -1; padding:24px; background:var(--forest-2); border:1px solid var(--forest-rule); }
.form__done h4{ font-size:20px; color:var(--lime); }
.form__done p{ color:var(--bone-muted); margin-top:6px; }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* Gallery arrow buttons, used by the photo steppers */
.strip__btn{
  display:grid; place-items:center; width:48px; height:48px; padding:0; cursor:pointer;
  border:1px solid var(--bone-muted); background:transparent; color:var(--bone);
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.strip__btn:hover:not(:disabled){ background:var(--lime); border-color:var(--lime); color:var(--ink); }
.strip__btn:disabled{ opacity:.35; cursor:default; }
.strip__btn .icon{ width:18px; height:18px; }
.strip__btn--prev .icon{ transform:rotate(180deg); }

/* =========================================================
   ROOM 4: Omdömen — reviews, award, community  → sections/cm-community.liquid
   ========================================================= */
.yard{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:start; }
.yard__photo{ margin:0; }
.yard__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 40%; background:var(--well); }
.yard__photo figcaption{ font-size:13px; color:var(--muted); margin-top:12px; }
.quotes{ display:flex; flex-direction:column; gap:40px; }
.quote{ margin:0; }
.quote blockquote{ margin:0; font-size:clamp(26px,2.6vw,38px); line-height:1.15; letter-spacing:-.025em; font-weight:600; max-width:24ch; }
.quote--small blockquote{ font-size:clamp(19px,1.6vw,22px); line-height:1.4; letter-spacing:-.01em; font-weight:500; max-width:44ch; }
.quote figcaption{ margin-top:14px; font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:center; }
.rating{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  padding-top:24px; border-top:1px solid var(--rule);
}
.rating p{ display:flex; align-items:center; gap:10px; font-size:16px; }
.rating strong{ font-weight:700; }
.yard__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); margin-top:clamp(48px,5vw,72px); padding-top:28px; border-top:1px solid var(--ink); }
.award{ display:flex; gap:18px; align-items:flex-start; }
.award .icon{ width:28px; height:28px; stroke-width:1.4; }
.award h3{ font-size:20px; line-height:1.25; letter-spacing:-.015em; }
.award p{ font-size:15px; color:var(--muted); margin-top:6px; }
.social{ min-width:0; }
.social h3{ font-size:20px; line-height:1.25; letter-spacing:-.015em; }
.social p{ font-size:15px; color:var(--muted); margin-top:6px; }
.social ul{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px; }
.social a{ font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; min-height:32px; }

/* =========================================================
   SECTION: FAQ  → sections/cm-faq.liquid
   ========================================================= */
.faq{ padding-block:var(--section); border-top:1px solid var(--rule); }
.faq__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); }
.faq h2{ font-size:clamp(32px,3.4vw,48px); line-height:1.04; letter-spacing:-.035em; max-width:12ch; }
.faq__aside p{ color:var(--muted); margin-top:16px; max-width:36ch; }
.faq__aside .link{ margin-top:16px; }
.faq__list{ border-top:1px solid var(--ink); }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding-block:14px;
  cursor:pointer; list-style:none; font-size:18px; font-weight:600; letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .icon{ width:18px; height:18px; transition:transform .3s var(--ease-out); }
.qa[open] summary .icon{ transform:rotate(45deg); }
.qa summary:hover{ text-decoration:underline; text-underline-offset:5px; }
.qa p{ padding-bottom:22px; color:var(--muted); max-width:62ch; }

/* =========================================================
   SECTION: find us  → sections/cm-find-us.liquid
   ========================================================= */
.find{ padding-block:var(--section); border-top:1px solid var(--rule); }
.find__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); }
.find h2{ font-size:clamp(38px,4.6vw,68px); line-height:1.0; letter-spacing:-.04em; max-width:12ch; }
.find address{ font-size:22px; line-height:1.35; font-weight:600; letter-spacing:-.015em; margin-top:28px; }
.find address span{ display:block; font-weight:400; color:var(--muted); font-size:17px; }
.week{ margin-top:28px; border-top:1px solid var(--rule); }
.week div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.week div[data-today]{ font-weight:700; }
.week div[data-today] dt::after{ content:" · idag"; font-weight:400; color:var(--muted); }
.week dd{ margin:0; }
.find__status{ margin-top:20px; font-size:15px; }
.find__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.find__contact{ margin-top:20px; font-size:15px; display:grid; gap:4px; }
.find__contact a{ font-weight:600; }
.find__media{ display:block; }
.find__media figure{ margin:0; }
.find__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--well); }
.find__media figcaption{ font-size:13px; color:var(--muted); margin-top:10px; }

/* =========================================================
   SECTION: footer  → sections/cm-footer.liquid
   ========================================================= */
.footer{ background:var(--ink); color:var(--on-ink); padding-top:72px; overflow:hidden; }
.footer :focus-visible{ outline-color:var(--lime); }
.footer__top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; }
.footer h2{ font-size:30px; line-height:1.1; letter-spacing:-.035em; }
.footer__news p{ font-size:14px; color:var(--bone-muted); margin-top:12px; max-width:40ch; }
.news-input{ display:flex; border-bottom:1px solid var(--bone-muted); margin-top:20px; max-width:460px; }
.news-input input{ flex:1; min-width:0; min-height:48px; border:0; background:transparent; font:400 16px/1.4 var(--font); color:var(--on-ink); caret-color:var(--lime); padding:0; border-radius:0; }
.news-input input::placeholder{ color:var(--bone-muted); }
.news-input input:focus-visible{ outline:none; }
.news-input:focus-within{ border-bottom-color:var(--lime); box-shadow:0 1px 0 0 var(--lime); }
.news-input button{ display:grid; place-items:center; width:48px; border:0; background:none; color:var(--lime); cursor:pointer; }
.news-input button .icon{ transition:transform .3s var(--ease-out); }
.news-input button:hover .icon{ transform:translateX(3px); }
.news-input button .icon{ width:20px; height:20px; }
.footer h3{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; color:var(--lime); }
.footer__col a{ display:block; font-size:14px; line-height:1.5; padding:5px 0; text-decoration:none; }
.footer__col a span{ display:none; }
.footer__col a:hover{ text-decoration:underline; text-decoration-color:var(--lime); }
.footer__col address{ font-size:14px; line-height:1.7; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 0 28px; border-top:1px solid var(--ink-2); font-size:12px; color:var(--bone-muted); }
.footer__bottom a:hover{ color:var(--on-ink); }
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer__bottom a{ text-decoration:none; }
.footer__bottom a:hover{ text-decoration:underline; }
/* SVG so the mark spans the shell exactly whatever face the device resolves */
.footer__word{ display:block; width:100%; height:auto; margin:12px 0 clamp(16px,2.2vw,32px); overflow:visible; color:var(--on-ink); }
.footer__word text{ font-family:var(--font-mark); font-weight:900; font-size:138px; fill:currentColor; }

/* =========================================================
   Mobile booking bar
   ========================================================= */
.dock{ display:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .header__row{ gap:16px; }
  .nav__tab{ padding:0 10px; font-size:10px; gap:6px; }
  .nav__item--rawbike{ display:none; }
  .utils{ gap:14px; }
  .search{ width:40px; border-bottom-color:transparent; transition:border-color .3s var(--ease-out); }
  .search input{ width:0; }
  .search:focus-within{ width:170px; border-bottom-color:var(--ink); }
  .search:focus-within input{ width:100%; }
  .utils:focus-within .utils__book{ display:none; }
  .minibar__nav{ gap:18px; }
  .brand__word{ font-size:26px; }
  .hero{ gap:28px; }
  .hero h1{ font-size:clamp(45px,6vw,68px); }
  .proof__item{ padding:18px 16px; }
  .window{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product--lead{ grid-row:auto; }
  .product--lead .product__img{ aspect-ratio:16/10; flex:none; min-height:0; }
  .aisles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .aisle:nth-child(4){ padding-left:0; border-left:0; }
  .footer__top{ grid-template-columns:1fr 1fr 1fr; }
  .footer__news{ grid-column:1 / -1; }
}

@media (max-width:799px){
  body{ font-size:16px; }
  .announce{ font-size:10px; letter-spacing:.06em; }
  .header__row{ grid-template-columns:1fr auto 1fr; align-items:center; padding-block:12px; }
  .nav, .search, .utils__book, .minibar{ display:none; }
  .menu{ display:block; }
  .menu summary{
    display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none;
    font:600 11px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  }
  .menu summary::-webkit-details-marker{ display:none; }
  .menu__panel{
    position:absolute; left:0; right:0; top:100%; z-index:40; background:var(--paper);
    border-block:1px solid var(--rule); padding:8px var(--gutter) 24px; box-shadow:0 12px 24px rgba(0,0,0,.08);
    max-height:calc(100svh - 140px); overflow-y:auto; overscroll-behavior:contain;
  }
  .menu__panel .menu__cta{ min-height:52px; margin:8px 0; border:1px solid var(--lime); font-size:15px; }
  .menu__group{ margin:20px 0 2px; font:600 11px/1.4 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .menu__panel a span{ font-size:13px; font-weight:400; color:var(--muted); }
  .hours__links .hide-m{ display:none; }
  .menu__panel a{ display:flex; justify-content:space-between; align-items:center; min-height:52px; border-bottom:1px solid var(--rule-soft); font-size:17px; font-weight:600; text-decoration:none; }
  .menu__panel form{ margin-top:16px; display:flex; border-bottom:1px solid var(--ink); }
  .menu__panel input{ flex:1; min-width:0; min-height:48px; border:0; background:transparent; font:400 16px var(--font); color:var(--ink); }
  .menu__panel button{ border:0; background:none; width:44px; color:var(--ink); }
  .header{ position:relative; }
  .brand__word{ font-size:22px; }
  .brand__sub{ font-size:7px; letter-spacing:.18em; margin-top:4px; }
  .brand__logo{ display:none; }
  .utils{ gap:12px; }
  .hours{ font-size:12px; }
  .hours__list{ display:none; }

  .hero{
    position:relative; isolation:isolate; overflow:hidden;
    grid-template-columns:1fr; gap:0; padding:0;
    margin-inline:calc(var(--gutter) * -1);
    min-height:clamp(600px, calc(100svh - 140px), 760px);
    color:var(--on-ink); background:var(--ink);
  }
  .hero__photo{ position:absolute; inset:0; z-index:-1; aspect-ratio:auto; background:var(--ink); }
  .hero__photo img{ object-position:center 18%; }
  .hero__photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 45%, transparent) 0%,
      transparent 18%,
      transparent 34%,
      color-mix(in srgb, var(--ink) 62%, transparent) 56%,
      color-mix(in srgb, var(--ink) 90%, transparent) 100%);
  }
  .hero__photo figcaption{
    inset:0 0 auto 0; z-index:1; flex-direction:column; align-items:flex-start; gap:3px;
    padding:16px var(--gutter); background:none; font-size:10px;
  }
  .hero__copy{ justify-content:flex-end; padding:140px var(--gutter) 28px; }
  .hero h1{ font-size:clamp(44px,12vw,72px); margin-bottom:16px; color:var(--on-ink); }
  .hero__lede{ font-size:16px; color:var(--on-ink-muted); margin-bottom:20px; }
  .hero .offer{ margin-bottom:18px; }
  .hero__actions{ gap:16px; width:100%; }
  .hero__actions .btn{ width:100%; background:var(--lime); border-color:var(--lime); color:var(--ink); }
  .hero__actions .btn:hover{ background:var(--lime-hover); }
  .hero__actions .btn .btn__meta{ color:var(--ink-2); }
  .hero .link{ color:var(--on-ink); }
  .hero__hint, .hero__loc{ color:var(--on-ink-muted); }
  .hero__loc{ margin-top:10px; }
  .hero :focus-visible{ outline-color:var(--lime); }
  .proof{ grid-template-columns:1fr 1fr; }
  .proof__item{ padding:16px 12px 16px 0; border-left:0; }
  .proof__item:nth-child(even){ padding-left:16px; border-left:1px solid var(--rule); }
  .proof .proof__item--rating{ padding:14px 14px; }
  .rating-stars svg{ width:15px; height:15px; }
  .proof__item--rating strong{ font-size:15px; }
  .proof__item:nth-child(n+3){ border-top:1px solid var(--rule); }
  .proof__item strong{ font-size:14px; }
  .proof__item span{ font-size:12px; }

  .walk{ margin-top:56px; }
  .room{ padding-block:64px; scroll-margin-top:52px; }
  .room__head{ grid-template-columns:1fr; gap:18px; margin-bottom:36px; }
  .room h2{ font-size:clamp(36px,10vw,52px); }
  .room__lede{ font-size:16px; }

  .bench{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .bench__photo{ position:static; }
  .room-group{ scroll-margin-top:0; }
  .rb{ grid-template-columns:1fr; gap:28px; }
  .rb__photo{ position:static; order:-1; }
  .rb__photo > img{ aspect-ratio:4/3; }
  .rb__list{ grid-template-columns:1fr; margin-top:28px; }
  .rb__list li{ padding:16px 0; border-bottom:1px solid var(--rule); }
  .rb__offer{ margin-top:28px; border-top:0; padding-top:0; }
  .rb__actions .btn{ width:100%; }
  .bench__photo img{ aspect-ratio:4/3; }
  .price{ padding:16px 0; column-gap:14px; }
  .price:hover{ background:none; }
  .price:hover > div{ transform:none; }
  .price__line{ gap:10px; }
  .price__name{ font-size:17px; }
  .price__amount{ font-size:18px; }
  .price__desc{ font-size:13px; }
  .price .btn{ min-height:44px; padding:10px 12px; gap:8px; }
  .partners{ gap:14px 22px; }
  .steps{ grid-template-columns:1fr; gap:0; margin-top:32px; }
  .steps li{ padding-block:14px; }
  .assure{ padding:18px; gap:6px 14px; }

  .window{ grid-template-columns:1fr 1fr; gap:24px 12px; }
  .product--lead{ grid-column:1 / -1; }
  .product__meta{ flex-direction:column; gap:2px; padding-top:10px; }
  .product__name{ font-size:14px; }
  .product__price{ font-size:15px; }
  .product--lead .product__meta{ flex-direction:row; }
  .product--lead .product__name, .product--lead .product__price{ font-size:18px; }
  .aisles{ grid-template-columns:1fr; margin-top:40px; }
  .aisle, .aisle + .aisle{ padding:16px 0; border-left:0; }

  .booth{ grid-template-columns:1fr; gap:32px; }
  .booth__photo{ min-height:0; aspect-ratio:4/3; }
  .quote-form{ grid-template-columns:1fr; gap:28px; }
  .form{ grid-template-columns:1fr; gap:20px; }
  .form__foot .btn{ width:100%; }

  .yard{ grid-template-columns:1fr; gap:32px; }
  .yard__photo img{ aspect-ratio:4/3; }
  .yard__row{ grid-template-columns:1fr; gap:28px; }
  .social{ padding-top:28px; border-top:1px solid var(--rule); }

  .faq__grid, .find__grid{ grid-template-columns:1fr; gap:28px; }
  .qa summary{ font-size:17px; }
  .find h2{ font-size:clamp(36px,10vw,52px); }

  .footer__top{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  .footer__bottom{ flex-direction:column; }

  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:grid; grid-template-columns:1fr auto; gap:8px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,246,242,.97); border-top:1px solid var(--rule);
    transform:translateY(110%); transition:transform .45s var(--ease-out);
  }
  .dock[data-show="true"]{ transform:none; }
  .dock .btn{ min-height:52px; }
  .dock__call{ display:grid; place-items:center; width:52px; min-height:52px; border:1px solid var(--ink); color:var(--ink); }
  .dock__call .icon{ width:20px; height:20px; }
}

@media (max-width:390px){
  .brand__word{ font-size:19px; letter-spacing:-.05em; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}