/* ---------- Fonts (self-hosted, latin + latin-ext) ---------- */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-400-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: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-semi-condensed-600i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-semi-condensed-600i-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;
}

/* Fallbacks sized to the web fonts' widths, so the swap barely moves text (CLS) */
@font-face {
  font-family: 'BSD Fallback';
  font-weight: 800;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 75.2%;
}
@font-face {
  font-family: 'Barlow Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 93.8%;
}
@font-face {
  font-family: 'BSC Fallback';
  font-style: italic;
  font-weight: 600;
  src: local('Arial Bold Italic'), local('Arial-BoldItalicMT');
  size-adjust: 79.1%;
}

:root {
  --red: #C4161C;
  --red-dark: #8A0E13;
  --ink: #17181A;
  --paper: #F4F1EC;
  --line: #D8D4CC;
  --line-dark: #3B3C3F;
  --ph-after: #EAE6DF;
  --f-display: 'Big Shoulders Display', 'BSD Fallback', sans-serif;
  --f-cond: 'Barlow Semi Condensed', 'BSC Fallback', sans-serif;
  --f-body: 'Barlow', 'Barlow Fallback', sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --rail-w: 112px;
  --slant: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --notch: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { color: var(--red-dark); }
button { font: inherit; }
/* Call buttons: the phone number is never in the HTML, so these replace tel: links and look like them */
.call {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
}
.call-link { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.call-link:hover { color: var(--red-dark); }
.red .call-link:hover { color: var(--ink); }
.dark .call-link:hover { color: #fff; }
::selection { background: var(--red); color: #fff; }
p { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.red :focus-visible, .dark :focus-visible { outline-color: #fff; }
.red a:hover { color: var(--ink); }
.dark a:hover { color: #fff; }
main:focus { outline: none; }
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.1em;
}
.skip-link:focus { top: 8px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Type helpers ---------- */
.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}
.cond, .label, .label-sm, .photo-note {
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
}
.label { font-size: 14px; letter-spacing: 0.14em; }
.label-sm { font-size: 13px; letter-spacing: 0.14em; }
.cond { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.lead { font-size: 18px; line-height: 1.5; }
.red-text { color: var(--red); }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }
.nowrap { white-space: nowrap; }

/* ---------- Surfaces ---------- */
.red { background: var(--red); color: #fff; }
.dark { background: var(--ink); color: var(--paper); }

/* ---------- Rail layout (number + vertical label column) ---------- */
.rail-grid { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.rail {
  border-style: solid;
  border-color: var(--line);
  border-width: 0 1px 0 0;
  padding: 18px 14px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.red .rail { border-color: var(--red-dark); }
.dark .rail { border-color: var(--line-dark); }
.rail-inner { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rail-inner.sticky { position: sticky; top: 84px; }
.rail-label { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-no { font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: 44px; line-height: 0.9; letter-spacing: 0; }
.section-body { padding: clamp(48px, 7vw, 96px) var(--gutter); }

/* ---------- Placeholders for photos ---------- */
.photo {
  position: relative;
  isolation: isolate;
  background: var(--line);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
/* Real photo covers the grey placeholder; a missing file stays invisible */
.photo > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}
.photo > img.is-missing { display: none; }
/* Shot description is only for the placeholder; hide it once the real photo is in */
.photo.has-photo > .photo-note { visibility: hidden; }
.photo-note { font-size: 12px; letter-spacing: 0.1em; line-height: 1.4; }
.notch { clip-path: var(--notch); }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-4-5 { aspect-ratio: 4 / 5; }

/* ---------- Buttons ---------- */
.slant { clip-path: var(--slant); border-radius: 0; }
.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 15px 16px;
  border: 0;
  cursor: pointer;
}
.btn-sm { font-size: 15px; padding: 14px 20px; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--ink); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--red-dark); color: #fff; }
.btn-red { background: var(--red); color: #fff; font-size: 15px; padding: 15px 20px; }
.btn-red:hover { background: var(--red-dark); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.logo {
  text-decoration: none;
  background: var(--red);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 0.95;
  padding: 10px 14px;
  display: flex;
  align-items: center;
}
.logo:hover { color: #fff; }
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gutter);
  min-width: 0;
}
.nav-full {
  display: flex;
  gap: 4px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.nav-full a {
  text-decoration: none;
  padding: 10px 16px;
  display: flex;
  gap: 6px;
  white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.nav-full a span { color: var(--red); }
.nav-full a:hover { background: var(--ink); color: #fff; }
.header-tel {
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-tel:hover { color: var(--red); }
.header-tel-prefix {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--red);
}
.nav-toggle {
  display: none;
  background: var(--ink);
  color: #fff;
  border: 0;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.nav-mobile {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  background: var(--red);
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.nav-mobile a { color: #fff; text-decoration: none; padding: 16px 20px; border-bottom: 1px solid var(--red-dark); }
.nav-mobile a:last-child { border-bottom: 0; }

@media (max-width: 1099.98px) {
  .nav-full { display: none; }
  .nav-toggle { display: block; }
}
@media (min-width: 1100px) {
  .nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-width: 0; }
.hero-text {
  padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
}
.hero-h { font-size: clamp(56px, 7vw, 124px); line-height: 0.9; letter-spacing: -0.005em; }
.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 40px;
  align-items: end;
}
.hero-since {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid #fff;
  padding-top: 10px;
}
.hero-since .label { font-size: 16px; letter-spacing: 0.08em; }
/* padding keeps the slanted (synthetic italic) digits inside the rule line */
.hero-since-year { font-size: clamp(56px, 5.5vw, 80px); line-height: 0.85; font-variant-numeric: tabular-nums; padding-right: 0.12em; min-width: 2.1em; text-align: right; }
.hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-photo {
  clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%);
  min-height: 560px;
  justify-content: flex-end;
  padding: 16px;
  text-align: right;
}
.hero-photo .photo-note { max-width: 30ch; }

@media (max-width: 899.98px) {
  .hero-body { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { min-height: 300px; }
}

/* Racing stripes */
.stripes { background: var(--red); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.stripes div:first-child { height: 8px; background: #fff; margin-left: 42%; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }
.stripes div:last-child { height: 18px; background: var(--ink); margin-left: 36%; clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%); }
.stripes-end { padding-bottom: 18px; }

/* ---------- 01 Services ---------- */
.services-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 48px;
  padding-bottom: 32px;
}
.services-head p { font-size: 17px; line-height: 1.55; max-width: 40ch; }
.services-h { font-size: clamp(48px, 6.4vw, 104px); line-height: 0.86; }
.board {
  display: grid;
  grid-template-columns: 88px minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px 32px;
  border-top: 2px solid var(--paper);
  padding: 32px 0 40px;
}
.board-letter {
  background: var(--red);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-main { display: flex; flex-direction: column; gap: 16px; }
.board-h { font-size: clamp(40px, 4.4vw, 64px); line-height: 0.9; }
.board-p { font-size: 16px; line-height: 1.55; max-width: 36ch; }
.board-photo { margin-top: 8px; }
.svc-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  column-gap: 28px;
  align-content: start;
}
.svc-list div { border-bottom: 1px solid var(--line-dark); padding: 12px 0; }
.svc-list dt { font-family: var(--f-cond); font-weight: 600; font-style: italic; font-size: 15px; letter-spacing: 0.1em; }
.svc-list dd { margin: 3px 0 0; font-size: 16px; line-height: 1.45; }
.plain-list { margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.4; }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.text-link {
  color: var(--paper);
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-decoration-color: var(--paper);
  align-self: flex-start;
  padding: 6px 0;
}
.text-link:hover { color: #fff; }
.photo-pair { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: end; }
.diag { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; align-self: start; }
.diag tr { border-bottom: 1px solid var(--line-dark); }
.diag tr:last-child { border-bottom: 0; }
.diag td { padding: 14px 0; }
.diag td.diag-no {
  padding: 14px 16px 14px 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  vertical-align: top;
  width: 56px;
}
.diag strong { font-family: var(--f-cond); font-weight: 600; font-style: italic; font-size: 16px; letter-spacing: 0.1em; }
.diag span { font-size: 16px; line-height: 1.5; }
.board-ac {
  gap: 16px 32px;
  background: var(--red);
  color: #fff;
  padding: 24px;
  align-items: center;
  border-top: 0;
}
.board-ac .board-letter { background: #fff; color: var(--red); font-size: 48px; width: 64px; height: 64px; }
.ac-head { display: flex; flex-direction: column; gap: 6px; }
.ac-h { font-size: 36px; line-height: 0.92; }
.board-ac .label { letter-spacing: 0.12em; }
.board-ac p { font-size: 16px; line-height: 1.55; }

/* Narrow screens: letter sits next to the title instead of on its own row */
@media (max-width: 999.98px) {
  .board { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .board-main { display: contents; }
  .board-letter { grid-row: 1; width: 64px; height: 64px; font-size: 46px; align-self: center; }
  .board-h { grid-column: 2; grid-row: 1; align-self: center; }
  .board-main > :not(.board-h),
  .board > :not(.board-letter):not(.board-main) { grid-column: 1 / -1; }
  .board.board-ac > .ac-head { grid-column: 2; grid-row: 1; }
  .board .text-link { justify-self: start; }
}

/* ---------- 02 Before / after ---------- */
.before-after-body { display: flex; flex-wrap: wrap-reverse; gap: 32px clamp(32px, 4vw, 56px); align-items: flex-start; }
.compare-fig { margin: 0; flex: 3 1 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.compare-fig figcaption { font-size: 15px; line-height: 1.45; }
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--line);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  isolation: isolate;
}
.compare-before, .compare-after { position: absolute; inset: 0; padding: 14px; }
.compare-before { z-index: 0; background: var(--line); }
.compare-after { z-index: 1; background: var(--ph-after); justify-content: flex-end; clip-path: inset(0 0 0 var(--pos)); }
.compare .photo-note { max-width: 46%; }
.compare-after .photo-note { text-align: right; }
.compare img { pointer-events: none; -webkit-user-drag: none; }
.compare-line {
  z-index: 2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background: var(--red);
  transform: skewX(-6deg);
}
.compare-handle {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  background: var(--red);
  color: #fff;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 10px;
  white-space: nowrap;
}
.tag {
  z-index: 2;
  position: absolute;
  top: 12px;
  color: #fff;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 5px 8px;
}
.tag-before { left: 12px; background: var(--ink); }
.tag-after { right: 12px; background: var(--red); }
/* Range stays for keyboard + screen readers; pointer/touch dragging is handled in JS (iOS ignores taps on a range track) */
.compare-range {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.compare:has(.compare-range:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.before-after-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 24px; }
.before-after-side > p { font-size: 16px; line-height: 1.55; }
.before-after-h { font-size: clamp(48px, 5.6vw, 88px); line-height: 0.86; }
.cases { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.cases button {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 12px;
  cursor: pointer;
  min-height: 48px;
  font-size: 15px;
  line-height: 1.4;
}
.cases button[aria-selected="true"] { background: var(--ink); color: #fff; }
.cases button:not([aria-selected="true"]):hover { background: var(--line); }
.case-no { font-family: var(--f-cond); font-weight: 600; font-style: italic; letter-spacing: 0.08em; }

/* ---------- Phone band ---------- */
.phone-band {
  padding: clamp(36px, 5vw, 64px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  align-items: flex-end;
  justify-content: space-between;
}
.phone-band-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phone-band-main .label { font-size: 15px; }
.phone-big {
  font-size: clamp(64px, 13vw, 200px);
  line-height: 0.82;
  text-decoration: none;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.phone-big:hover { color: var(--ink); }
.phone-hours {
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* ---------- 03 Reviews ---------- */
.reviews-body { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 5vw, 80px); align-items: flex-start; }
.reviews-head { flex: 1 1 260px; display: flex; flex-direction: column; gap: 22px; }
.reviews-head .btn { align-self: flex-start; }
.reviews-h { font-size: clamp(44px, 5vw, 80px); line-height: 0.86; }
.reviews { flex: 2 1 420px; display: flex; flex-direction: column; border-top: 2px solid var(--paper); }
.reviews blockquote {
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px 32px;
}
.reviews blockquote:last-child { border-bottom: 0; }
.reviews footer { font-family: var(--f-cond); font-weight: 600; font-style: italic; font-size: 14px; letter-spacing: 0.1em; }
.reviews p { font-size: 18px; line-height: 1.5; grid-column: span 2; }

/* ---------- 04 Contact ---------- */
.contact-body {
  padding-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}
.contact-head { display: flex; flex-direction: column; gap: 10px; }
.contact-h { font-size: clamp(72px, 14vw, 232px); line-height: 0.8; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 32px 48px;
  border-top: 2px solid #fff;
  padding-top: 24px;
}
.contact-col { display: flex; flex-direction: column; gap: 8px; }
.contact-col.gap-14 { gap: 14px; }
.contact-col p { font-size: 16px; line-height: 1.5; }
.contact-col .btn { align-self: flex-start; }
.contact-tel { font-size: 44px; line-height: 1; color: #fff; text-decoration-color: #fff; align-self: flex-start; }
.contact-mail { font-size: 18px; color: #fff; text-decoration-color: #fff; }
.red .contact-tel:hover, .red a.contact-mail:hover { color: var(--ink); }
.hours-table {
  border-collapse: collapse;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  width: 100%;
  align-self: start;
}
.hours-table caption { text-align: left; font-size: 13px; letter-spacing: 0.14em; padding-bottom: 8px; }
.hours-table tr { border-bottom: 1px solid var(--red-dark); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table th { text-align: left; padding: 9px 0; font-weight: 600; }
.hours-table td { text-align: right; padding: 9px 0; }

/* ---------- Map (click to load) ---------- */
.map-placeholder {
  padding: 32px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 200px;
}
.map-text { display: flex; flex-direction: column; gap: 6px; max-width: 64ch; font-size: 16px; line-height: 1.5; }
.map-text a { color: #fff; text-decoration-color: #fff; }
.map-h { font-size: 32px; line-height: 1; }
.map-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }

.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-dark); }
.footer-logo { padding: 14px; align-self: start; }
.footer-body {
  padding: 28px var(--gutter) 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 24px 32px;
  font-size: 15px;
  line-height: 1.6;
}
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer a:hover { color: #fff; }

/* ---------- Mobile quick-contact bar ---------- */
.quickbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}
.quickbar > a, .quickbar > button {
  color: #fff;
  text-decoration: none;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.12em;
}
.qb-call { background: var(--red); }
.qb-nav { background: var(--ink); }
.quickbar > *:hover { color: #fff; }

/* ---------- Mobile (< 760px) ---------- */
@media (max-width: 759.98px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(61px + env(safe-area-inset-bottom)); }
  .quickbar { padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
  .rail-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { border-width: 0 0 1px 0; }
  .rail-inner { flex-direction: row; }
  .rail-inner.sticky { position: static; }
  .rail-label { writing-mode: horizontal-tb; transform: none; }
  .quickbar { display: grid; }
  /* Logo + phone + MENU in one row, so the sticky header stays short */
  .site-header.rail-grid { grid-template-columns: auto minmax(0, 1fr); }
  .logo { font-size: 20px; padding: 8px 12px; }
  .header-bar { gap: 10px; padding: 0 12px; }
  .header-tel { font-size: 22px; gap: 6px; }
  .nav-toggle { padding: 0 12px; }
  body.subpage { padding-bottom: 0; }
  /* Compact section rails; label-only rails (address, "TELEFON") add nothing on a phone */
  .rail { padding: 12px 16px; }
  .rail-plain { display: none; }
  .rail-inner { gap: 10px; align-items: baseline; }
  .rail-no { font-size: 34px; }
  .section-body { padding-top: 32px; }
  .hero-text { padding-top: 24px; }
  /* Bigger touch targets in the footer */
  .footer-links > * { padding: 10px 0; }
}
@media (max-width: 379.98px) {
  .header-tel-prefix { display: none; }
}

/* ---------- Subpages (privacy policy, 404) ---------- */
.back-link {
  font-family: var(--f-cond);
  font-weight: 600;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 10px 0;
}
.subpage .header-bar { min-height: 56px; flex-wrap: wrap; row-gap: 4px; }
.doc { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.doc-h { font-size: clamp(48px, 7vw, 104px); line-height: 0.88; margin-bottom: 4px; }
.doc-meta { font-family: var(--f-cond); font-weight: 600; font-style: italic; letter-spacing: 0.08em; font-size: 15px; }
.doc h2 {
  margin: 28px 0 2px;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 0.95;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.doc p, .doc li { font-size: 17px; line-height: 1.6; max-width: 70ch; }
.doc ul { margin: 0; padding-left: 1.2em; }
.doc li::marker { color: var(--red); }
.doc-back { margin-top: 24px; }
.doc-back .btn:hover { color: #fff; }
.err-body { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.err-h { font-size: clamp(72px, 14vw, 200px); line-height: 0.82; }
.err .lead { max-width: 44ch; }
.err-cta { width: min(100%, 440px); }

/* ---------- Motion ----------
   Only transform and opacity are animated (compositor-only, no layout work).
   Everything here is skipped for visitors who ask the system for reduced motion.
   The hero title is painted from the first frame (a bar slides off it), so it never delays LCP. */
.site-header { transition: transform 0.3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
[data-call-label] { display: inline-block; }
/* inline-block children do not get the parent underline, so pass it on */
.call-link [data-call-label] { text-decoration: inherit; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: black bars wipe off each title line, left to right.
     Lines stay inline so the title is one text block for LCP and is painted under the bars from frame one. */
  .hero-line { position: relative; }
  .hero-line::after {
    content: '';
    position: absolute;
    inset: 0.02em -0.08em 0.04em -0.04em;
    background: var(--ink);
    transform-origin: right center;
    animation: wipe 0.65s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .hero-line:nth-of-type(2)::after { animation-delay: 0.08s; }
  .hero-line:nth-of-type(3)::after { animation-delay: 0.16s; }
  .hero-line:nth-of-type(4)::after { animation-delay: 0.24s; }
  .hero-kicker { animation: fade-up 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-meta > * { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  /* The lead can be the LCP element on phones: it only moves, it is never transparent */
  .hero-meta > :nth-child(1) { animation-name: rise; animation-delay: 0.2s; }
  .hero-meta > :nth-child(2) { animation-delay: 0.55s; }
  .hero-meta > :nth-child(3) { animation-delay: 0.65s; }
  .hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--ink);
    transform-origin: right center;
    animation: wipe 0.9s 0.2s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .hero + .stripes > div { animation: stripe-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero + .stripes > div:first-child { animation-delay: 0.5s; }
  .hero + .stripes > div:last-child { animation-delay: 0.6s; }

  /* Scroll reveals: main.js marks elements below the fold as pending, then releases them on entry */
  .reveal {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0ms);
  }
  .reveal-pending { opacity: 0; transform: translateY(28px); }
  .reveal-pending.reveal-skew { transform: translateX(-48px) skewX(-10deg); }
  .reveal-stripes > div { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-stripes > div:last-child { transition-delay: 0.1s; }
  .reveal-pending.reveal-stripes { opacity: 1; transform: none; }
  .reveal-pending.reveal-stripes > div { transform: translateX(105%); }

  /* Mobile menu: links slide in one after another */
  .nav-mobile:not([hidden]) a { animation: menu-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .nav-mobile:not([hidden]) a:nth-child(2) { animation-delay: 0.04s; }
  .nav-mobile:not([hidden]) a:nth-child(3) { animation-delay: 0.08s; }
  .nav-mobile:not([hidden]) a:nth-child(4) { animation-delay: 0.12s; }

  /* Buttons */
  .btn { transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
  .btn:active { transform: scale(0.97); }
  .board-letter { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  @media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
    .board:hover .board-letter { transform: skewX(-8deg) scale(1.04); }
  }

  /* Number appears on a call button */
  .call-flip { animation: flip-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
@media print {
  .reveal-pending { opacity: 1 !important; transform: none !important; }
}

@keyframes wipe { to { transform: scaleX(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes rise { from { transform: translateY(14px); } }
@keyframes stripe-in { from { transform: translateX(105%); } }
@keyframes menu-in { from { opacity: 0; transform: translateX(-28px); } }
@keyframes flip-in { from { opacity: 0; transform: translateY(0.35em) skewX(-8deg); } }