/* ==========================================================================
   GET STORAGE — design system
   Clean industrial editorial. Navy + royal blue + safety-orange accent.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm:  clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl:  clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;  --space-32: 8rem;

  /* Brand palette (sampled from approved logo) */
  --navy-900: #0a1730;   /* deepest — footer / hero ground */
  --navy-800: #0b1a3a;   /* GET / outlines */
  --navy-700: #122a5c;   /* primary navy */
  --royal-600: #0e4fb8;  /* STORAGE / container */
  --royal-500: #1f5fd0;  /* lighter royal accent */
  --royal-400: #4c86e6;
  --orange:    #f5820c;  /* safety-orange — center lock only, tiny accents */
  --orange-600:#d96e00;

  /* Semantic — light (default) */
  --color-bg: #ffffff;
  --color-surface: #f6f8fb;      /* cool off-white panel */
  --color-surface-2: #eef2f8;
  --color-ink: #0b1a3a;          /* body text = navy ink */
  --color-ink-muted: #46557a;
  --color-ink-faint: #8290ac;
  --color-border: #d7deea;
  --color-divider: #e5eaf2;
  --color-primary: var(--royal-500);
  --color-primary-hover: var(--royal-600);
  --color-on-primary: #ffffff;
  --color-focus: var(--royal-500);

  /* Radius — squared / lightly rounded geometry */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(11,26,58,0.08);
  --shadow-md: 0 6px 20px rgba(11,26,58,0.10);
  --shadow-lg: 0 18px 44px rgba(11,26,58,0.16);

  --content-narrow: 680px;
  --content: 1080px;
  --content-wide: 1240px;
  --content-xwide: 1560px;

  --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.05; text-wrap: balance; }
p, li { text-wrap: pretty; }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

::selection { background: rgba(31,95,208,0.2); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button { cursor: pointer; background: none; border: none; }

a, button, input, textarea, select {
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Display type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.container--narrow { max-width: var(--content-narrow); }
.container--default { max-width: var(--content); }
.container--xwide { max-width: var(--content-xwide); }

.section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section-divider { max-width: 72px; margin: 0 auto; border: none; border-top: 3px solid var(--navy-900); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--surface { background: var(--color-surface); }
.section--navy { background: var(--navy-900); color: #eaf0fb; }
.section--navy h2, .section--navy h3 { color: #ffffff; }

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--orange); display: inline-block;
}
.section--navy .eyebrow { color: var(--royal-400); }

.h-section { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.01em; }
.lede { font-size: var(--text-lg); color: var(--color-ink-muted); max-width: 60ch; }
.section--navy .lede { color: #b9c6e0; }

.rule { height: 2px; background: var(--color-border); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary { background: var(--royal-500); color: #fff; border-color: var(--royal-500); }
.btn--primary:hover { background: var(--royal-600); border-color: var(--royal-600); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--navy-700); color: var(--navy-800); background: var(--color-surface); }
.btn--onnavy { background: #fff; color: var(--navy-800); border-color: #fff; }
.btn--onnavy:hover { background: var(--royal-400); border-color: var(--royal-400); color: var(--navy-900); transform: translateY(-1px); }
.btn--outline-navy { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--outline-navy:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: 72px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 52px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: 500; color: var(--navy-700);
  text-decoration: none; border-radius: var(--radius-sm);
}
.nav-links a:hover { color: var(--royal-500); background: var(--color-surface); }
.nav-links a[aria-current="page"] { color: var(--royal-600); box-shadow: inset 0 -2px 0 var(--orange); }
.nav-links a.btn[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.nav-cta { margin-left: var(--space-2); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--navy-700);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--color-divider);
    padding: var(--space-2) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links a { min-height: 52px; padding: var(--space-3) var(--space-2); font-size: var(--text-base); border-bottom: 1px solid var(--color-divider); border-radius: 0; }
  .nav-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange); }
  .nav-cta { margin: var(--space-4) 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #eef3fc;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,23,48,0.96) 0%, rgba(10,23,48,0.82) 46%, rgba(10,23,48,0.5) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  padding-top: clamp(var(--space-12), 7vw, var(--space-20));
  padding-bottom: clamp(var(--space-20), 12vw, var(--space-32));
}
.hero__content { max-width: 40rem; }
.hero h1 {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.hero h1 .blue { color: var(--royal-400); }

/* Pre-launch banner. Deliberately larger than .status-pill so the location
   reads at a glance, but a tier below the h1 so the hook still leads. Label
   and place sit on one line on wider screens; place is scaled up well
   beyond the label to lead with the location. */
.hero__banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  letter-spacing: 0.01em; color: #dbe6fb;
  margin-bottom: var(--space-5);
}
.hero__banner-lead {
  display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 0 auto;
}
.hero__banner .dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: var(--orange); box-shadow: 0 0 0 5px rgba(245,130,12,0.22);
}
.hero__banner-label {
  font-weight: 700; font-size: var(--text-lg); line-height: 1.1; white-space: nowrap;
}
.hero__banner-place {
  color: var(--orange); font-weight: 700; line-height: 1;
  font-size: var(--text-2xl); white-space: nowrap;
}
@media (min-width: 560px) {
  .hero__banner { flex-wrap: nowrap; }
  .hero__banner-place { font-size: var(--text-3xl); }
}
@media (min-width: 900px) {
  .hero__banner { margin-bottom: var(--space-10); }
}
.hero .lede { color: #c3d0e8; margin-bottom: var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__grid { display: grid; gap: var(--space-10); }
.hero__usp {
  list-style: none; display: grid; gap: var(--space-4);
  padding: var(--space-6); margin: 0;
  background: rgba(10,23,48,0.55); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); backdrop-filter: blur(2px);
}
.hero__usp li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.12);
}
.hero__usp li:last-child { padding-bottom: 0; border-bottom: none; }
.hero__usp .tick {
  color: var(--orange); font-weight: 700; margin-top: 2px; flex: none;
}
.hero__usp span:last-child { color: #eef3fc; font-weight: 600; font-size: var(--text-base); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: stretch; }
  .hero__content { display: flex; flex-direction: column; }
  .hero__content .hero__heading-group { margin-top: auto; margin-bottom: auto; }
}

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
  background: rgba(31,95,208,0.16); border: 1px solid rgba(76,134,230,0.5);
  color: #dbe6fb; border-radius: var(--radius-full, 999px);
  margin-bottom: var(--space-6);
}
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(245,130,12,0.22); }

/* ---------- Grid / cards ---------- */
.grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 940px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 640px) and (max-width: 939px) { .grid--4 { grid-template-columns: repeat(2,1fr); } }

.panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.panel--surface { background: var(--color-surface); border-color: var(--color-divider); }

.feature { padding: var(--space-2) 0; }
.feature__num {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: var(--text-lg); color: var(--royal-500);
  border-top: 3px solid var(--orange); padding-top: var(--space-3); display: inline-block; min-width: 44px;
}
.feature h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); color: var(--navy-800); font-weight: 700; }
.section--navy .feature h3 { color: #fff; }
.feature p { color: var(--color-ink-muted); font-size: var(--text-base); }
.section--navy .feature p { color: #b9c6e0; }

/* use-case cards */
.usecase {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-left: 4px solid var(--royal-500);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}
.usecase h3 { font-size: var(--text-lg); color: var(--navy-800); margin-bottom: var(--space-2); font-weight: 700; }
.usecase p { color: var(--color-ink-muted); font-size: var(--text-base); }

/* steps */
.steps { counter-reset: step; display: grid; gap: var(--space-6); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.step__marker {
  counter-increment: step;
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--text-lg);
  color: #fff; background: var(--navy-700); border-radius: var(--radius-md);
}
.step__marker::before { content: counter(step); }
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); color: var(--navy-800); font-weight: 700; }
.step p { color: var(--color-ink-muted); }
.section--navy .step h3 { color: #fff; } .section--navy .step p { color: #b9c6e0; }
.section--navy .step__marker { background: var(--royal-500); }

/* transparency list */
.trust-list { list-style: none; display: grid; gap: var(--space-4); }
.trust-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.trust-list .tick { color: var(--royal-500); margin-top: 3px; flex: none; }
.section--navy .trust-list .tick { color: var(--royal-400); }
.trust-list strong { color: var(--navy-800); }

/* ---------- Find us map ---------- */
.find-us__header { margin-bottom: var(--space-8); }
.find-us__header .lede { margin-bottom: 0; }
.find-us__layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 800px) { .find-us__layout { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.find-us__map {
  width: 100%; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); background: #eef1f6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.find-us__map .leaflet-container { font-family: inherit; background: #eef1f6; }
.find-us__map .leaflet-control-attribution { font-size: 10px; }
.find-us__map .leaflet-control-zoom a { border-radius: var(--radius-sm) !important; }
.find-us__panel {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: #fff;
}
.find-us__panel label { font-size: var(--text-sm); font-weight: 600; color: var(--navy-800); }
.find-us__form { display: flex; gap: var(--space-3); }
.find-us__form input {
  flex: 1; min-width: 0; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base);
  background: #fff; color: var(--navy-800);
}
.find-us__form input:focus-visible { outline: 2px solid var(--royal-500); outline-offset: 2px; }
.find-us__form .btn { flex: none; white-space: nowrap; }
.find-us__result { min-height: 1.5em; font-size: var(--text-sm); color: var(--navy-700); margin: 0; }
.find-us__result[data-state="ok"] { color: var(--navy-800); font-weight: 600; }
.find-us__result[data-state="error"] { color: var(--orange-600); font-weight: 600; }
.find-us__links { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.find-us__directions-btn { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); min-height: 36px; }
.find-us__directions { font-size: var(--text-sm); font-weight: 600; color: var(--royal-500); text-decoration: none; }
.find-us__directions:hover { text-decoration: underline; }
.section--navy .find-us__panel { box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
@media (max-width: 520px) { .find-us__form { flex-direction: column; } .find-us__form .btn { width: 100%; } }
.find-us-pin span { display: block; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(15,26,54,0.35); }
.find-us-pin--site span { width: 22px; height: 22px; background: #1f9d55; }
.find-us-pin--user span { width: 18px; height: 18px; background: var(--royal-500); }
.section--navy .trust-list strong { color: #fff; }

/* split layout */
.split { display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } .split--form-wide { grid-template-columns: 0.8fr 1.2fr; } }
.split__media img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: 100%; }
.figure-caption { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-2); }

/* ---------- FAQ (accordion) ---------- */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; min-height: 44px;
  font-weight: 600; font-size: var(--text-lg); color: var(--navy-800);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--royal-500); transition: transform var(--transition); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .faq__body { padding-bottom: var(--space-5); color: var(--color-ink-muted); }
.faq .faq__body p + p { margin-top: var(--space-3); }

/* ---------- Callout / note ---------- */
.callout {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6);
}
.callout p { color: var(--color-ink-muted); }

/* ---------- Business info card ("find us" panel) ---------- */
.biz-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-8); max-width: 460px;
}
.biz-card__header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.biz-card__logo { border-radius: var(--radius-md); flex: 0 0 auto; }
.biz-card__name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--text-lg); color: var(--navy-800); line-height: 1.2; }
.biz-card__category { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-1); }
.biz-card__rows { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.biz-card__rows li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink); }
.biz-card__rows svg { flex: 0 0 auto; margin-top: 2px; color: var(--royal-500); }
.biz-card__rows a { color: var(--color-ink); text-decoration: none; }
.biz-card__rows a:hover { color: var(--royal-600); text-decoration: underline; }
.biz-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.biz-card__actions .btn { min-height: 44px; padding-inline: var(--space-5); }

/* ---------- Trustpilot badge ---------- */
.trustpilot-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  text-decoration: none; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.trustpilot-badge:hover { border-color: #00b67a; box-shadow: var(--shadow-sm); }
.trustpilot-badge__stars { display: inline-flex; gap: 2px; }
.trustpilot-badge__stars span {
  width: 18px; height: 18px; background: #00b67a; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px;
}
.trustpilot-badge__stars svg { width: 12px; height: 12px; color: #fff; }
.trustpilot-badge__text { display: grid; line-height: 1.25; }
.trustpilot-badge__text strong { font-size: var(--text-sm); color: var(--color-ink); }
.trustpilot-badge__text span { font-size: var(--text-xs); color: var(--color-ink-muted); }
.footer-contact + .trustpilot-badge, .biz-card .trustpilot-badge { margin-top: var(--space-2); }
.site-footer .trustpilot-badge { margin-top: var(--space-4); }

.trustpilot-badge--nav {
  padding: 6px var(--space-3); gap: var(--space-2); border-color: transparent; background: transparent;
}
.trustpilot-badge--nav:hover { background: var(--color-surface); border-color: var(--color-border); }
.trustpilot-badge--nav .trustpilot-badge__stars span { width: 14px; height: 14px; }
.trustpilot-badge--nav .trustpilot-badge__stars svg { width: 9px; height: 9px; }
.trustpilot-badge--nav .trustpilot-badge__text { display: none; }
.trustpilot-badge--nav .trustpilot-badge__text--short { display: inline; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
@media (max-width: 860px) {
  .nav-trustpilot { border-bottom: 1px solid var(--color-divider); padding-block: var(--space-3); }
  .nav-trustpilot .trustpilot-badge--nav { padding: var(--space-2) var(--space-2); }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--navy-800); }
.field .req { color: var(--orange-600); }
.field .hint { font-size: var(--text-xs); color: var(--color-ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #fff; color: var(--navy-800);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9c4d8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--royal-500); box-shadow: 0 0 0 3px rgba(31,95,208,0.18);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #c62828; }
.field .error-msg { font-size: var(--text-xs); color: #c62828; min-height: 1em; display: none; }
.field.has-error .error-msg { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #c62828; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.consent input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; margin-top: 2px; accent-color: var(--royal-500); }
.consent label { font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-muted); }

.form-status { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); display: none; }
.form-status.is-visible { display: block; }
.form-status--success { background: #e6f4ea; border: 1px solid #9bcfac; color: #1c5e2f; }
.form-status--error { background: #fdecea; border: 1px solid #e1a49e; color: #a52217; }

/* form panel */
.form-panel {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: clamp(var(--space-6), 4vw, var(--space-12));
  box-shadow: var(--shadow-md);
}

/* ---------- Size guide (original cutaway rooms + illustrative contents) ---------- */
.size-diagram {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.size-diagram__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.size-diagram__title {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-weight: 700; color: var(--navy-800); letter-spacing: 0.01em;
}
.size-diagram__note { font-size: var(--text-sm); color: var(--color-ink-muted); }
/* The viewBox is re-fitted to whatever is drawn, so the frame is sized here by
   height instead: a selected box is close to square and would be absurdly tall
   if it filled a desktop panel's width. The drawing is centred inside the frame,
   so the panel keeps its height whatever is selected. The wide three-option
   overview gets its own, shorter frame. */
.size-diagram__stage { position: relative; }
.size-diagram__svg {
  display: block; width: 100%; height: clamp(250px, 32vw, 400px);
  pointer-events: none;
}
.size-diagram__svg.is-overview { height: clamp(112px, 26vw, 350px); }
.size-diagram .is-hidden { display: none; }

/* The measurements read in HTML, not SVG <text>: this component renders between
   about 235px and 890px wide, so SVG type would scale with it. */
.size-diagram__value {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-weight: 700; font-size: var(--text-lg); line-height: 1.1;
  letter-spacing: 0.01em; color: var(--royal-600);
}
.size-diagram__value--neutral { color: var(--color-ink-faint); }
.size-diagram__scale-note {
  margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-ink-faint);
}

/* Size switches. Buttons, not fields: they set the existing unit_size select,
   so the form still has exactly one set of named inputs. */
.size-diagram__picks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.size-diagram__pick {
  font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  padding: var(--space-1) var(--space-4); border-radius: 999px;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-ink-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.size-diagram__pick:hover { border-color: var(--royal-500); color: var(--royal-600); }
.size-diagram__pick.is-active {
  background: var(--royal-600); border-color: var(--royal-600); color: #fff;
}

.size-diagram__ground { stroke: var(--color-border); stroke-width: 2; }

/* Neutral overview: all three options, wireframed, nothing selected. */
/* Neutral overview: each empty outline gets its own entrance plane edged in
   orange, so the entrance is visible before anything is selected. */
.size-diagram__ghost-entrance {
  fill: rgba(245, 130, 12, 0.10); stroke: var(--orange); stroke-width: 1.6;
  stroke-linejoin: round; opacity: 0.75;
}
.size-diagram__ghost-face {
  fill: rgba(31, 95, 208, 0.08); stroke: #c3d2ea; stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Selected unit: an original cutaway room. Solid floor, white corrugated panels
   on the two farthest walls, and the two near planes left almost clear so the
   contents inside can be seen. Structural edges are brand blue. */
.size-diagram__floor {
  fill: #e9edf4; stroke: var(--royal-600); stroke-width: 1.5; stroke-linejoin: round;
}
.size-diagram__wall {
  stroke: var(--royal-600); stroke-width: 1.5; stroke-linejoin: round;
}
.size-diagram__wall--back { fill: #fdfefe; }   /* far panel along the length */
.size-diagram__wall--end { fill: #f3f6fa; }    /* far panel across the width, in shade */
/* Vertical ribbing. Two runs half a pitch apart — a shadow line and a highlight
   line — which is what makes a flat fill read as a corrugated panel. */
.size-diagram__rib { fill: none; stroke: rgba(15, 45, 100, 0.16); stroke-width: 1; }
.size-diagram__rib--light { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.4; }
.size-diagram__edge {
  fill: none; stroke: var(--royal-600); stroke-width: 1.5; stroke-linejoin: round;
}

/* The two near planes stay open: a whisper of blue so the volume still reads. */
.size-diagram__face { stroke: var(--royal-600); stroke-width: 1.5; stroke-linejoin: round; }
.size-diagram__face--top { fill: rgba(76, 134, 230, 0.12); }
.size-diagram__face--left { fill: rgba(14, 79, 184, 0.05); }
.size-diagram__face--right { fill: rgba(14, 79, 184, 0.07); }
/* The entrance plane, in brand orange: a translucent tint plus a strong
   perimeter. Both stay see-through, because the contents behind this plane are
   the whole point of the drawing. Nothing here draws a door leaf, a shutter or a
   swing arc — the plane is identified, not the mechanism. */
.size-diagram__entrance-face { fill: rgba(245, 130, 12, 0.14); }
.size-diagram__entrance-frame {
  fill: none; stroke: var(--orange); stroke-width: 3.5;
  stroke-linejoin: round; stroke-linecap: round;
}

/* The word itself is HTML over the drawing, so it never scales with the SVG.
   It is small, opaque and sits high on the entrance plane, clear of the
   contents; the same information is in the legend and the live readout. */
.size-diagram__tag {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  background: var(--orange); color: #fff;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 26, 58, 0.28);
  pointer-events: none; transition: opacity var(--transition);
}
.size-diagram__tag--off { opacity: 0; }
@media (max-width: 720px) {
  /* Narrow: the drawing shrinks but the pill does not, so trim it back rather
     than let it cover the unit. */
  .size-diagram__tag { font-size: 0.52rem; padding: 0.1rem 0.34rem; letter-spacing: 0.04em; }
}

.size-diagram__axis { stroke-width: 4; stroke-linecap: round; }
.size-diagram__axis--length { stroke: var(--royal-600); }
.size-diagram__axis--across { stroke: #7fb0f5; }
.size-diagram__axis--upright { stroke: var(--orange); }

/* Illustrative contents: one original cartoon set, drawn by js/main.js from a
   fixed table of real-world sizes, at the same scale in every configuration.
   Soft-shaded flat colour — lit top, mid near-left face, deeper near-right face
   — so the sofa, bicycle and boxes read as one family. */
.size-diagram__contents { transition: opacity var(--transition); }
.size-diagram__contents.is-settling { opacity: 0; }
.gs-face { stroke: rgba(11, 26, 58, 0.35); stroke-width: 0.8; stroke-linejoin: round; }
.gs-shadow { fill: rgba(11, 26, 58, 0.12); stroke: none; }
.gs-sofa-top { fill: #f2a97e; }
.gs-sofa-left { fill: #e58a53; }
.gs-sofa-right { fill: #cc6f39; }
.gs-cushion-top { fill: #f8c39d; }
.gs-cushion-left { fill: #eda071; }
.gs-cushion-right { fill: #d98553; }
.gs-box-top { fill: #e4bb8b; }
.gs-box-left { fill: #d3a06a; }
.gs-box-right { fill: #bb8752; }
.gs-tape { fill: none; stroke: #f7efe4; stroke-width: 2.4; stroke-linecap: round; }
.gs-bike * { vector-effect: non-scaling-stroke; }
.gs-tyre { fill: none; stroke: #2b3240; stroke-width: 2.6; }
.gs-rim { fill: none; stroke: #b9c2d2; stroke-width: 1.2; }
.gs-hub { fill: #6d7788; stroke: none; }
.gs-frame { fill: none; stroke: var(--navy-800); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.gs-bar { fill: none; stroke: #2b3240; stroke-width: 3; stroke-linecap: round; }
.gs-saddle { fill: none; stroke: #2b3240; stroke-width: 3.4; stroke-linecap: round; }
.gs-crank { fill: none; stroke: #6d7788; stroke-width: 2; stroke-linecap: round; }

.size-diagram__legend {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--color-ink-muted);
}
.size-diagram__key { display: flex; align-items: baseline; gap: var(--space-2); }
.size-diagram__key::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px; flex: none;
  transform: translateY(-3px);
}
.size-diagram__key--length::before { background: var(--royal-600); }
.size-diagram__key--across::before { background: #7fb0f5; }
.size-diagram__key--upright::before { background: var(--orange); }
/* Keyed to the tinted plane, not to the orange upright axis line: a filled block
   rather than a rule. */
.size-diagram__key--entrance::before {
  height: 12px; width: 14px; border-radius: 2px; transform: translateY(1px);
  background: rgba(245, 130, 12, 0.18); border: 2px solid var(--orange);
}
.size-diagram__key b { color: var(--navy-800); font-weight: 600; }

.size-diagram__contents-key {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--color-ink-muted);
}
.size-diagram__item { display: flex; align-items: baseline; gap: var(--space-2); }
.size-diagram__item::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none;
  transform: translateY(-1px);
}
.size-diagram__item--sofa::before { background: #e58a53; }
.size-diagram__item--bike::before { background: var(--navy-800); }
.size-diagram__item--box::before { background: #d3a06a; }
.size-diagram__item b { color: var(--navy-800); font-weight: 600; }

.size-diagram__readout {
  margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted);
}

/* ---------- Legal / prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-xl); color: var(--navy-800); margin-top: var(--space-10); margin-bottom: var(--space-3); font-weight: 700; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-lg); color: var(--navy-800); margin-top: var(--space-6); margin-bottom: var(--space-2); font-weight: 700; }
.prose p, .prose li { color: var(--color-ink-muted); }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4) var(--space-6); display: grid; gap: var(--space-2); }
.prose a { font-weight: 500; }
.legal-meta { font-size: var(--text-sm); color: var(--color-ink-faint); margin-bottom: var(--space-8); }
.legal-note {
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-5); margin-top: var(--space-10);
  font-size: var(--text-sm);
}
.legal-note strong { color: var(--navy-800); }

/* page header (interior) */
.page-head { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.page-head__inner { padding-block: clamp(var(--space-12), 8vw, var(--space-20)); }
.page-head h1 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: 700; font-size: var(--text-2xl); color: var(--navy-800); letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.page-head .lede { color: var(--color-ink-muted); }
.breadcrumb { font-size: var(--text-xs); color: var(--color-ink-faint); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--royal-500); }

/* stat / metric strip */
.metrics { display: grid; gap: var(--space-8); }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .metrics { grid-template-columns: repeat(4,1fr); } }
.metric { border-top: 3px solid var(--orange); padding-top: var(--space-4); }
.metric__k { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--text-xl); color: #fff; text-transform: uppercase; }
.metric__v { color: #b9c6e0; font-size: var(--text-base); margin-top: var(--space-1); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b9c6e0; padding-block: var(--space-16) var(--space-8); }
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .footer-brand img {
  height: 56px;
  width: auto;
  margin-bottom: var(--space-4);
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,0.98))
    drop-shadow(-1px 0 0 rgba(255,255,255,0.98))
    drop-shadow(0 1px 0 rgba(255,255,255,0.98))
    drop-shadow(0 -1px 0 rgba(255,255,255,0.98));
}
.site-footer .footer-brand p { color: #8fa1c4; font-size: var(--text-sm); max-width: 40ch; }
.site-footer .footer-contact { margin-top: var(--space-3); font-size: var(--text-sm); color: #c3d0e8; }
.site-footer .footer-contact a { color: #c3d0e8; text-decoration: underline; text-decoration-color: rgba(195,208,232,0.4); }
.site-footer .footer-contact a:hover { color: #fff; }
.footer-col h4 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.06em; color: #dbe6fb; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-col a { color: #b9c6e0; text-decoration: none; font-size: var(--text-sm); display: inline-flex; min-height: 32px; align-items: center; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-12); padding-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--text-xs); color: #8fa1c4; }
.footer-bottom a { color: #8fa1c4; }

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 200;
  background: var(--royal-600); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: var(--text-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }