/* front-page.css — the front page's sheet, FIRST part of three: the top of the page: hero, running text, about us, prices, the team behind and the centers.
   Moved VERBATIM out of the `<style>` block in `index.html` 07-10-2026 (code quality, step E — no source file over 1.000
   code lines) and split at two lines. ⚠ THE ORDER IS THE MECHANISM: the three sheets are fetched one after the other, where the block stood —
   after `app-site.css` and before the `<noscript>` rule — so every rule stands in the same place in the cascade as before. */
/* ══ EVERY RAW COLOUR THAT IS LEFT ON THE FRONT PAGE IS A CHOICE — HERE IS THE LIST (28-08-2026) ══
   MEASURED: 37 raw colour expressions against 474 token lookups = 511 in all, that is 92,8 % theme-bound.
   (Counted on the file with comments cut away: «raw» = a hex or an `rgb/rgba(` with numbers
   in it; `rgba(var(--x), .5)` is NOT raw — it is the channel form and follows the style direction.)
   NEVER write a new hex here — the rules stand in `assets/pulsn-theme.css` under
   «READ THIS FIRST». The 37 are FIVE groups, and every one now stands by NAME:

   ① THE GOOGLE LOGO (12) — `#4285F4 · #34A853 · #FBBC05 · #EA4335`, repeated in the three
      review marks. They are GOOGLE's colours, not ours, and must NEVER follow our
      style direction. The canon's exception ⑤, second item.

   ② PHOTO TREATMENT (9) — they used to lie only as line numbers, and the numbers were long
      since wrong. Now by name and value:
         `.hero-overlay`            rgba(5,5,7,0.97) · rgba(5,5,7,0.72) · rgba(5,5,7,0.12)
                                    rgba(5,5,7,0.3)  · rgba(5,5,7,1)
         `.hero-overlay::after`     rgba(255,90,20,0.07)   — the warm flame glow
         `.hero-portal-chip:hover`  #fff                   — ink ON TOP OF the photo
         `.team-photo-overlay`      rgba(8,8,8,0.8)
         `.cta-overlay`             rgba(8,8,8,0.82)
      THE REASON: all nine lie ON TOP OF AN IMAGE. A veil is not a colour, it is a
      damping — what makes a heading readable on top of a photo. If it followed the
      style direction, on the four LIGHT ones it would become a light film over a dark
      motif, and then it dampens nothing. The same logic as the canon's shadow exception,
      mirrored.
      ⛔ AND THEY CANNOT BE DERIVED, EVEN IF ONE WANTED TO: there is no
      `--app-bg-rgb` in the theme (measured — only `--app-ink-rgb`, `--app-red-rgb`,
      `--app-nav-ink-rgb`, `--app-portalsheet-ink-rgb`). And `5,5,7` is by the way not
      `--app-bg` (`#080808`), so there is not even a number to reuse.

      ⚠⚠ BUT THE VEIL HIDES A REAL ERROR, AND IT MUST NOT BE FORGOTTEN BECAUSE THE VEIL IS LAWFUL:
      **the veil stands fixed, but THE INK ON TOP OF IT follows the theme.** Measured 28-08 in
      Chromium, the hero's heading against the veil (photo assumed rgb(40,40,40) behind
      `brightness(.6)`):
            standard 20,24:1  ·  sand 20,24:1
            avispapir 1,14:1  ·  frost 1,22:1  ·  ler 1,24:1
      `.team-name` against `.team-photo-overlay` measures 1,09–1,18:1 in the same three places.
      That is: on the light style directions the front page's biggest heading is practically
      INVISIBLE. It is the house's known error form reversed — before, the surfaces turned with the theme,
      while the ink stood fixed; here the surface stands fixed, while the ink turns.
      ⇒ THE FIX DOES NOT BELONG HERE. It requires an «ink on a photo» token in
      `assets/pulsn-theme.css` — exactly the same answer the nav bar and the portal sheet got
      (`--app-nav-ink-rgb`, `--app-portalsheet-ink-rgb`). If the pair is declared in THIS block,
      it wins over the sheet (the F3 error), and then the theme can never set it.
      ⚠ And `.hero-portal-chip` shows the break in miniature: its REST colour is
      `rgba(var(--app-ink-rgb),0.65)` and turns with the theme, while its HOVER is `#fff` and
      does not. On avispapir hover is therefore the only readable one of the two states.
      **Do not turn hover into a token for consistency's sake** — that would only make it
      just as invisible as the rest. Both must get the photo ink when it exists.

   ③ BLACK VEILS AND SHADOWS (6) — `.hero-overlay`'s two `rgba(0,0,0,…)`, `.legal-overlay`,
      `.portal-backdrop`, `.portal-sheet`'s `box-shadow` and `#ci-modal`. The canon's exception
      ⑤, first item: a shadow in the house's ink would GLOW on a dark base.
      ⚠ FOR THE SHEET THAT REASONING IS OUTDATED — but the conclusion stands. The sheet is no
      longer always dark: on light/avispapir/ler/frost `assets/pulsn-theme.css`
      (line 982 · 1015 · 1049 · 1082) fetches the sheet's surface from the page's `--app-bg-2`, so the drawer
      is LIGHT in those four places. The shadow stays anyway, for two MEASURED reasons:
      1) IT DOES NOT LAND ON THE PAGE. `.portal-backdrop` covers the whole screen with 74 % black
         and is painted UNDER the sheet, so the shadow's base is the carpet — not the page's surface. Measured
         composed: 0,0,0 on contrast … 64,63,63 on light, that is dark on all eleven.
         The shadow's own step has an upper limit of 17,88 dL* (light, full alpha). If you measure
         it against the page's surface instead, the answer is 54,69 — and that figure is a MEASUREMENT ERROR,
         not a shadow. A guard that looks for too strong shadows must exempt this
         one AND write the carpet as its base; otherwise it reports the house's biggest finding, and
         the finding does not exist.
      2) IT POINTS UPWARD ON PURPOSE. The sheet is a bottom drawer: the lower edge lies outside
         the screen, and the only visible edge is the UPPER one. An ordinary
         elevation token casts DOWNWARD and would remove the separation exactly where it
         is the only one left. Therefore do not switch instrument here.

   ④ `var(--x, #hex)` EMERGENCY ROUTES (9) — the seven in `:root` below plus `.portal-sheet`'s
      `--app-portalsheet-top/-bund`. The canon's exception ⑤, third item. ⚠ A fallback is
      a CLAIM about the token's value; if it says something other than the token's actual value,
      it lies exactly the day the sheet does not get through.
      ⚠⚠ AND A FALLBACK CAN MAKE A MEASUREMENT BLIND, WITHOUT ANYONE BEING TOLD.
      `--app-portalsheet-ink-rgb` is on the four light style directions an ALIAS — it points
      to the page's own ink token instead of standing as three numbers — and the house's `kk_color()`
      cannot follow a channel alias: it answers null. The front page's 11 lookups of that name
      are therefore UNMEASURED exactly where the sheet has just switched from dark to light, that is
      where a contrast error is most likely. They are not reported green — they are not
      seen at all. The fix belongs in the theme (write the four as literal triples), not here;
      but until then «no finding on the front page» is not the same as «no error».

   ⑤ `--blue: #0e274f` is a token DEFINITION with zero consumers (measured in
      `public_theme_reach_test`). A definition is the one place a raw number belongs.

   ✅ WHAT NO LONGER STANDS HERE: the old list had a group ④ «THE HARDCODED
   PORTAL SHEET (5) … the one that still WAITS for a fix». That fix HAS landed:
   `assets/pulsn-theme.css` now has `--app-portalsheet-top/-bund/-ink-rgb`, and the sheet
   reads them. Only the emergency routes are left, and they belong in ④. A note that describes work
   that has been done makes the next person look for an error that is not there.
   ══════════════════════════════════════════════════════════════════════════════════════ */
/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
/* ⚠ WITHOUT JAVASCRIPT THE WHOLE PAGE WAS EMPTY (fixed 2026-08-19).
   38 elements — the price list, the contact form, the addresses and the footer's legal links —
   stand at `opacity:0` until `IntersectionObserver` sets `.visible`. If JS is blocked, or
   the one big inline block throws an error BEFORE the observer is raised, the visitor sees a
   completely empty page. Not a worse page: an EMPTY page.
   Animation is decoration; the content is not. So the decoration is now what falls away. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* ⚠ THE BELT AND BRACES STAND AT THE BOTTOM OF `<head>` — `<noscript><style>` with the same rule.
   It is there because `@media (scripting: none)` is also the NEWEST of the two: older Safari and
   some embedded browsers skip the whole block, and that is exactly where JS most often
   fails too. The two can stand together without fighting — both set the same value.

   ⚠ BUT THE HOLE IS NOT CLOSED, and that must be written down. Both rules answer «JS is switched
   OFF». Neither answers «JS is ON and threw an error before the observer was
   raised» — and that is the state a typo in the big inline block actually gives.
   The result is still a completely empty front page. The only real fix is to make `.visible`
   the DEFAULT and let JS remove it; that is a bigger change than this and belongs in a
   place where the front page can be verified afterwards. */
/* The same rule for those who have asked for less motion — they got the animation anyway until now,
   because it is the only way to become visible. */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── HERO ───────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  /* ⛔ HERE STOOD `align-items: flex-end` WITH `padding-top: 0`, AND THAT WAS THE ERROR.
     In flexbox an element that is too tall overflows TOWARD THE START EDGE — that is, upward — and with a FIXED
     menu bar above and `overflow: hidden` here the top lines of the heading disappeared
     completely. The symptom is «sometimes», because it only happens when the content is taller than the
     screen: short screen, phone sideways, or large font.
     ⭐ The cure is two things, and both must be there: `flex-start` makes the padding edge the
     start line, so nothing can rise above it — and `margin-top: auto` on `.hero-content`
     (below) keeps the bottom placement when there IS room, and falls to zero when there
     is not. An `auto` margin beats `align-items`, so the two do not contradict each other. */
  align-items: flex-start;
  /* The bar's height PLUS air: without the last pixels the heading touches the bar's lower edge on
     a short screen. The air costs nothing on a tall screen — `margin-top: auto` eats it. */
  padding: calc(var(--nav-h) + 20px) var(--gutter) 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* WEBP WITH A PARACHUTE — the same arrangement as <picture>, just for a background image (G5).
     The hero is NOT an <img>, and that is exactly why it slipped past the first conversion:
     `<picture>` can only wrap an <img>, so the heaviest file on the front page (884.451 B) stayed
     untouched while the nine others got light.
     `image-set()` with `type()` gives the same contract: if the browser understands the declaration, it chooses
     the WebP (163.152 B); if not, it discards the WHOLE declaration and uses the `url()`
     line above — that is exactly the page we deliver today. The order is therefore not for
     decoration: the fallback MUST stand first, otherwise there is no parachute.
     The same double declaration stands on the element itself (`style=` on #heroBg), because an
     inline style wins over this rule set — if only one place is fixed, nothing happens. */
  /* ⚠ ROOT-ABSOLUTE (07-10-2026): a relative address in a sheet is read from the SHEET's folder. `images/…` pointed to /images/ as long as
     the rule stood in `index.html`; from here it would point to /assets/images/, which does not exist (`dead_links_test` ④). */
  background-image: url('/images/tarp-pulsn-3.JPEG');
  background-image: image-set(url('/images/tarp-pulsn-3.webp') type('image/webp'),
                              url('/images/tarp-pulsn-3.JPEG') type('image/jpeg'));
  background-size: cover;
  background-position: 40% center;
  transform: scale(1.04);
  transition: transform 9s ease-out;
  filter: brightness(0.6) contrast(1.15) saturate(0.75);
}
.hero-bg.loaded { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 65% at 62% 52%, transparent 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.92) 88%),
    linear-gradient(to right, rgba(5,5,7,0.97) 0%, rgba(5,5,7,0.72) 28%, rgba(5,5,7,0.12) 55%),
    linear-gradient(to bottom, rgba(5,5,7,0.3) 0%, transparent 15%, transparent 55%, rgba(5,5,7,1) 100%);
}
/* Warm flame glow bleeds through on right side */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 60% at 65% 50%, rgba(255,90,20,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 25% 40% at 88% 45%, rgba(var(--app-red-rgb,255,28,53),0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  /* `auto` at the top, 0 at the bottom: the bottom placement is kept when there is free space, and falls to
     zero when the content fills more than the screen — so it can never rise up under the bar. */
  margin: auto auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-end;
  /* ⛔ THE INHERITANCE WAS THE ERROR. `body{color:var(--white)}` → `--app-ink`, which is NEARLY BLACK on
     the four light style directions — and h1 inherited it down onto a veil that is ALWAYS dark.
     Measured: 1,00:1 on avispapir. Not hard to read; the same colour. The whole table stands at
     `--app-photo-ink` in `assets/pulsn-theme.css`. */
  color: var(--app-photo-ink);
}
.hero-left { min-width: 0; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
}
.hero-eyebrow-line {
  width: 40px;
  height: 2px;
  background: var(--red);
}
.hero-eyebrow span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--app-photo-accent);
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: var(--app-display-weight, 800);
  font-style: var(--app-display-style, italic);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.35s forwards;
}
.hero-headline em {
  font-style: normal;
  color: var(--app-photo-accent);
}
/* Location + service INSIDE the H1 — Google reads the most important heading as
   "Forandringen … Fitnesscenter i Bramming & Tarp". Deliberately visible (not
   display:none): hidden text in an H1 is cloaking and can cost ranking. */
.hero-h1-sub {
  display: block;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: clamp(var(--fs-md), 1.4vw, var(--fs-xl));
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--app-photo-ink-rgb), .72);
}
.hero-sub {
  font-size: var(--fs-2xl);
  color: rgba(var(--app-photo-ink-rgb), .72);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.5s forwards;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.65s forwards;
}
.hero-portal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.8s forwards;
}
.hero-portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  min-height: 44px;
  background: rgba(var(--app-photo-ink-rgb), 0.06);
  border: 1px solid rgba(var(--app-photo-ink-rgb), 0.12);
  border-radius: 20px;
  color: rgba(var(--app-photo-ink-rgb), 0.65);
  font: 500 var(--fs-sm)/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hero-portal-chip:hover {
  background: rgba(var(--app-red-rgb,255,28,53),0.15);
  border-color: rgba(var(--app-red-rgb,255,28,53),0.4);
  color: var(--app-photo-ink);
}
.hero-portal-chip svg { flex-shrink: 0; opacity: 0.7; }
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--red);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paa-brand);
  border-radius: 2px;
  transition: background 0.2s, gap 0.2s;
}
.btn-hero-primary:hover { background: var(--red-dark); gap: 14px; }
.btn-hero-primary svg { width: 16px; height: 16px; }
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--app-photo-ink-rgb), .72);
  border-bottom: 1px solid rgba(var(--app-photo-ink-rgb), .66);
  transition: color 0.2s, border-color 0.2s;
}
.btn-hero-ghost:hover { color: var(--app-photo-ink); border-color: var(--app-photo-ink); }

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-end;
  padding-bottom: 8px;
}
.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.5s forwards;
}
.hero-stat {
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  backdrop-filter: blur(8px);
  padding: 28px 24px;
}
.hero-stat-number {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight:var(--app-number-weight, 800);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.hero-stat-number span { color: var(--accent-ink, var(--red)); }
.hero-stat-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.hero-locations {
  display: flex;
  gap: 20px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.7s forwards;
}
.hero-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  color: rgba(var(--app-photo-ink-rgb), .72);
}
.hero-location svg { color: var(--app-photo-accent); flex-shrink: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── MARQUEE TICKER ─────────────────────────────────────── */
.marquee-section {
  background: var(--red);
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid rgba(var(--app-ink-rgb,255,255,255),0.1);
  border-bottom: 1px solid rgba(var(--app-ink-rgb,255,255,255),0.1);
}
.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* TEXT ON THE BRAND SURFACE. `.marquee-section` is filled with var(--red), but this rule
     stands in its OWN body and the selector does not spell out the parent — therefore neither
     the direct nor the inherited scanner in public_theme_reach_test could see it, and it
     survived both D1 fixes. Measured as raw white .9: 2,54–5,10:1 (worst
     «skovnat», whose accent is a light coral). With the style direction's OWN choice of ink
     on the brand surface: 3,84–6,70:1. The 3,84 is the house's known F3 (white on PULSN red) and
     can only be raised when the brand colour's foreground is chosen — but no style direction measures
     worse than its own choice any more. */
  color: var(--paa-brand);
}
.marquee-item::after {
  content: '';
  width: 4px;
  height: 4px;
  background: rgba(var(--app-ink-rgb), 0.5);
  border-radius: 50%;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── ABOUT ──────────────────────────────────────────────── */
#about {
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
  border-bottom: 1px solid var(--border);
}
.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.about-img {
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.about-img:first-child { margin-top: 40px; }
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.about-img:hover img { transform: scale(1.04); }
.about-text {}
/* HEADING: the section's title (capitals, line height 0.95, <em> in accent) — the weight belongs to the style direction. */
.about-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: var(--app-display-weight, 800);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.about-title em { font-style: normal; color: var(--accent-ink, var(--red)); }
.about-desc {
  font-size: var(--fs-2xl);
  color: var(--gray-2);
  line-height: 1.8;
  margin-bottom: 40px;
}
.about-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-lg);
  color: var(--gray-1);
}
.about-feature-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-ink, var(--red));
}


/* ─── PRICING ────────────────────────────────────────────── */
#pricing {}
.pricing-header {
  text-align: center;
  margin-bottom: 60px;
}
.pricing-header .section-tag { justify-content: center; }
.pricing-header .section-sub { margin: 0 auto; text-align: center; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.pricing-card {
  background: var(--bg);
  padding: 48px 40px;
  position: relative;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  background: var(--bg-3);
}
.pricing-card.featured::before {
  content: 'MEST POPULÆR';
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--red);
  text-align: center;
  padding: 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.pricing-card.featured { padding-top: 60px; }
.pricing-tier {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: 20px;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.pricing-currency {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-2);
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-period {
  font-size: var(--fs-md);
  color: var(--gray-3);
}
.pricing-divider {
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}
.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-lg);
  color: var(--gray-1);
}
.pricing-features li.disabled { color: var(--gray-3); }
.pricing-features li svg { flex-shrink: 0; width: 16px; height: 16px; }
.pricing-features li.disabled svg { color: var(--gray-3); }
.pricing-features li:not(.disabled) svg { color: var(--accent-ink, var(--red)); }
.pricing-btn {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 14px;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--white);
  transition: background 0.2s, border-color 0.2s;
}
.pricing-btn:hover { background: var(--bg-3); border-color: var(--gray-3); }
.pricing-btn.featured-btn {
  background: var(--red);
  border-color: var(--accent-ink, var(--red));
}
.pricing-btn.featured-btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.pricing-note {
  text-align: center;
  margin-top: 32px;
  font-size: var(--fs-md);
  color: var(--gray-3);
}

/* ─── TEAM ───────────────────────────────────────────────── */
#team { background: var(--bg-2); }
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  gap: 40px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.team-card {
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
}
.team-photo {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
  filter: grayscale(30%);
}
.team-card:hover .team-photo img {
  transform: scale(1.05);
  filter: grayscale(0%);
}
.team-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.8) 0%, transparent 50%);
}
.team-info {
  padding: 24px;
  border-top: 1px solid var(--border);
}
/* HEADING: the employee's name — «Tine», «Daisy» (markup l.3539/3555/3572), not a number. */
.team-name {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--app-display-weight, 800);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.team-role {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--red));
  margin-bottom: 12px;
}
.team-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-cert {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gray-2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 1px;
}

/* ─── LOCATIONS ──────────────────────────────────────────── */
#locations {}
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 60px;
}
.location-card {
  background: var(--bg);
  overflow: hidden;
}
.location-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.location-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.location-card:hover .location-image img { transform: scale(1.03); }
.location-body {
  padding: 40px;
}
.location-name {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
}
.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--red));
  margin-bottom: 28px;
}
.location-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}
.location-badge-closed { color: var(--gray-3) !important; }
.location-badge-closed::before { animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.location-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.location-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.location-detail-icon {
  color: var(--accent-ink, var(--red));
  margin-top: 2px;
  flex-shrink: 0;
}
.location-detail-content {}
.location-detail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-3);
  margin-bottom: 2px;
}
.location-detail-value {
  font-size: var(--fs-lg);
  color: var(--gray-1);
  line-height: 1.5;
}
.location-hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.location-hour-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-md);
  color: var(--gray-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.location-hour-row span:first-child { color: var(--gray-3); font-size: var(--fs-sm); }
.location-hour-all { border-bottom: none; font-size: var(--fs-lg); }
.location-hour-all span:last-child { color: var(--white); font-weight: 600; }
.location-reception-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(var(--app-ink-rgb), 0.04);
  border: 1px solid rgba(var(--app-ink-rgb,255,255,255),0.09);
  border-radius: 8px;
  color: var(--gray-2);
}
.location-reception-block svg { flex-shrink: 0; color: var(--accent-ink, var(--red)); }
.location-reception-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.location-reception-label { font-size: var(--fs-xs); color: var(--gray-3); text-transform: uppercase; letter-spacing: 0.08em; }
.location-reception-hours { font-size: var(--fs-md); color: var(--white); font-weight: 500; }