@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/cormorant-garamond-d80df8ff5a.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/dm-sans-9fea608a94.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/caveat-e743d95811.woff2") format("woff2");
}

/* Metric-matched local fallbacks so the swap to each web font does not move text. One face per local font,
   each calibrated against that font's own file by scripts/font-fallback-metrics.py; uncalibrated alternates are not listed. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman");
  size-adjust: 97.07%;
  ascent-override: 95.19%;
  descent-override: 29.57%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback Times";
  src: local("Times");
  size-adjust: 97.07%;
  ascent-override: 95.19%;
  descent-override: 29.57%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 105.81%;
  ascent-override: 93.76%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback Helvetica Neue";
  src: local("Helvetica Neue");
  size-adjust: 104.45%;
  ascent-override: 94.97%;
  descent-override: 29.68%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback Helvetica";
  src: local("Helvetica");
  size-adjust: 105.81%;
  ascent-override: 93.76%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Caveat Fallback";
  src: local("Arial");
  size-adjust: 77.01%;
  ascent-override: 124.66%;
  descent-override: 38.96%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Caveat Fallback Helvetica Neue";
  src: local("Helvetica Neue");
  size-adjust: 76.3%;
  ascent-override: 125.81%;
  descent-override: 39.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Caveat Fallback Helvetica";
  src: local("Helvetica");
  size-adjust: 77.01%;
  ascent-override: 124.66%;
  descent-override: 38.96%;
  line-gap-override: 0%;
}

:root {
  /* Brand palette */
  --color-primary: #6d263d;
  --color-primary-dark: #491425;
  --color-secondary: #1f4337;
  --color-accent: #f3d4dc;
  --color-text: #201a1c;
  --color-text-muted: #6e6566;
  --color-text-on-dark: #fffdf9;
  --color-text-on-dark-muted: #bdb3b6;
  --color-text-on-dark-subtle: #8f8387;
  --color-background: #ffffff;
  --color-background-subtle: #f7f7f7;
  --color-background-muted: #ececec;
  --color-border: #d8cec4;
  --color-secondary-muted: #d2ded9;
  --color-error: #8f2d2d;
  --color-error-background: #f5dddd;
  --color-border-translucent: rgba(216, 206, 196, .8);
  --color-surface-translucent: rgba(255, 253, 249, .94);
  --color-surface-strong: rgba(255, 253, 249, .97);
  --color-background-subtle-translucent: rgba(243, 238, 231, .96);
  --color-overlay-strong: rgba(0, 0, 0, .62);
  --color-overlay-hero: rgba(0, 0, 0, .48);
  --color-overlay-hero-start: rgba(0, 0, 0, .38);
  --color-overlay-hero-end: rgba(0, 0, 0, .13);
  --color-text-on-dark-translucent: rgba(255, 253, 249, .9);

  /* Typography */
  --font-family-display: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Times", serif;
  --font-family-body: "DM Sans", "DM Sans Fallback", "DM Sans Fallback Helvetica Neue", "DM Sans Fallback Helvetica", sans-serif;
  --font-family-accent: "Caveat", "Caveat Fallback", "Caveat Fallback Helvetica Neue", "Caveat Fallback Helvetica", cursive;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-body: 1rem;
  --font-size-reading: 1.0625rem;
  --font-size-lead: 1.125rem;
  --font-size-editorial-h3: 1.25rem;
  --font-size-editorial-h2: clamp(1.5rem, 2.2vw, 2rem);
  --font-size-editorial-title: clamp(2.125rem, 4.5vw, 3.75rem);
  --font-size-h3: 1.375rem;
  --font-size-h2: clamp(1.75rem, 2.8vw, 2.5rem);
  --font-size-h1: clamp(2.5rem, 4.4vw, 4.25rem);
  --font-size-hero: clamp(3rem, 7vw, 6.75rem);
  --line-height-body: 1.68;
  --line-height-reading: 1.76;
  --line-height-title: 1.02;
  --line-height-heading: 1.12;
  --measure-reading: 64ch;
  --measure-editorial-rail: 14rem;
  --measure-table: 40rem;
  --measure-diagram-portrait: 23rem;
  --measure-diagram-landscape: 47.5rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Shape, elevation and layout */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 28px rgba(32, 26, 28, .08);
  --shadow-search: 0 20px 48px rgba(32, 26, 28, .2);
  --shadow-text: 0 2px 18px rgba(32, 26, 28, .38);
  --blur-surface: 12px;
  --opacity-disabled: .55;
  --focus-outline: 2px solid var(--color-primary);
  --focus-offset: var(--space-1);
  --offset-hidden: -1px;
  --shell-gutter: clamp(var(--space-6), 5vw, var(--space-9));
  --shell: min(1220px, calc(100% - var(--shell-gutter)));
  --header-height: clamp(var(--space-10), 8vw, var(--space-11));
  --guide-filter-height: 0px;
  --layer-skip-link: 60;

  /* Motion: transform and opacity only, never layout */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .0534, .1757, .3248, .4744, .6097, .7238, .8149, .8841, .9343, .969, .9915, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1);
  --lift: -2px;
  --press: .98;
}
@supports not (transition-timing-function: linear(0, 1)) {
  body { --ease-spring: var(--ease-out); }
}

/* Page-to-page crossfade: DISABLED on 14 September 2026. Chrome 152 stable stalls every cross-document view transition
   to its four-second timeout and then stops rendering (reproduced on Linux, headless and Xvfb, with Chrome 152.0.7977.82;
   Chrome 153 is fine). Re-enable by restoring, inside @media (prefers-reduced-motion: no-preference),
   @view-transition { navigation: auto; } once Chrome 152 usage is negligible or the stall is disproved on a real device.
   The rules below and view-transitions.js stay in place and are inert without the opt-in. */
.site-header { view-transition-name: site-header; }
/* While a transition is active the fragment landing must be instant; otherwise the smooth scroll to #anchor only starts
   after the crossfade and the linked section is not in view when the page settles (found by the quote browser smoke). */
:root:active-view-transition { scroll-behavior: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duration-base); animation-timing-function: var(--ease-in-out); }
::view-transition-group(site-header) { animation-duration: var(--duration-base); }
::view-transition-group(profile-visual) { animation-duration: var(--duration-slow); animation-timing-function: var(--ease-out); }
::view-transition-old(profile-visual), ::view-transition-new(profile-visual) { height: 100%; width: 100%; object-fit: cover; overflow: clip; animation-duration: var(--duration-slow); }

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-synthesis: none;
  text-rendering: auto;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-family-display);
  font-weight: 500;
  line-height: var(--line-height-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-title); letter-spacing: -.03em; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
.handwritten {
  display: inline-block;
  color: inherit;
  font-family: var(--font-family-accent);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .8;
}
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: var(--offset-hidden);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--layer-skip-link);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: var(--space-1);
  transform: translateY(0);
  transition: transform var(--duration-base) var(--ease-out); /* eases in only; leaves instantly so it never covers the next focus target */
}
:where(a, button, input, select, textarea, summary, .table-wrap):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: var(--space-1);
}
.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow.light { color: var(--color-accent); }

/* Shared navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border-translucent);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(var(--blur-surface));
}
.header-inner { display: flex; align-items: center; height: 100%; gap: clamp(var(--space-5), 3vw, var(--space-8)); }
.logo {
  flex: 0 0 auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  text-decoration: none;
}
.logo span { color: var(--color-primary); }
.desktop-nav { display: flex; min-width: 0; gap: clamp(var(--space-3), 2.2vw, var(--space-7)); margin-left: auto; }
.desktop-nav a { white-space: nowrap; font-size: var(--font-size-sm); font-weight: 500; text-decoration: none; }
.desktop-nav a:not(.header-cta) { position: relative; }
.desktop-nav a:not(.header-cta)::after {
  position: absolute;
  right: 0;
  bottom: calc(var(--space-2) * -1);
  left: 0;
  height: 1px;
  background: var(--color-primary);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.desktop-nav a:not(.header-cta):hover::after, .desktop-nav a:not(.header-cta):focus-visible::after, .desktop-nav a:not(.header-cta)[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-text); }
.mobile-nav { display: none; margin-left: auto; }
.mobile-nav summary { display: flex; min-height: var(--space-8); align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-size: var(--font-size-sm); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary i, .mobile-nav summary i::after { display: block; width: 18px; height: 1px; background: currentColor; content: ""; }
.mobile-nav summary i::after { transform: translateY(var(--space-1)); }
.mobile-nav summary i, .mobile-nav summary i::after { transition: transform var(--duration-base) var(--ease-out); }
.mobile-nav[open] summary i { transform: translateY(2px) rotate(45deg); }
.mobile-nav[open] summary i::after { transform: rotate(90deg); }
.mobile-nav[open] nav { animation: motion-drop var(--duration-base) var(--ease-out); }
.mobile-nav nav {
  position: absolute;
  top: var(--header-height);
  right: 0;
  left: 0;
  display: grid;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}
.mobile-nav nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.mobile-nav nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

/* Home */
.visual-hero {
  position: relative;
  min-height: 660px;
  height: calc(100svh - var(--header-height));
  max-height: 860px;
  overflow: hidden;
  color: var(--color-text-on-dark);
}
.visual-hero > picture { position: absolute; inset: 0; }
.visual-hero > picture img { width: 100%; height: 100%; object-fit: cover; }
.visual-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-overlay-hero-start), var(--color-overlay-hero-end) 70%), var(--color-overlay-hero);
}
.visual-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-block: var(--space-10) var(--space-11);
  text-shadow: var(--shadow-text);
}
.visual-hero h1 { max-width: 980px; margin-bottom: var(--space-6); color: var(--color-text-on-dark); font-size: var(--font-size-hero); line-height: .98; letter-spacing: -.035em; }
.visual-hero h1 .handwritten { color: var(--color-accent); }
.visual-hero-copy > p:not(.eyebrow) { max-width: 620px; color: var(--color-text-on-dark-translucent); font-size: var(--font-size-lead); }
.visual-path-entry {
  display: flex;
  width: min(790px, 100%);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-text-on-dark-muted);
  color: var(--color-text-on-dark);
  background: var(--color-overlay-strong);
  font-size: var(--font-size-sm);
  text-decoration: none;
  text-shadow: none;
}
.visual-path-entry strong { display: block; color: var(--color-accent); font-weight: 600; }
.visual-path-entry i { flex: none; color: var(--color-text-on-dark); font-style: normal; font-weight: 600; }
.visual-path-entry { transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.visual-path-entry:hover, .visual-path-entry:focus-visible { border-color: var(--color-accent); transform: translateY(var(--lift)); }
.visual-search {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) minmax(190px, .8fr) 78px;
  width: min(790px, 100%);
  min-height: 86px;
  margin-top: var(--space-4);
  color: var(--color-text);
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-search);
  text-shadow: none;
}
.visual-search label { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-right: 1px solid var(--color-border); }
.visual-search label span { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.visual-search input, .visual-search select { width: 100%; min-width: 0; min-height: var(--space-6); padding: 0; border: 0; color: var(--color-text); background: transparent; }
.visual-search button { border: 0; color: var(--color-text-on-dark); background: var(--color-primary); cursor: pointer; font-size: var(--font-size-body); transition: background-color var(--duration-fast) var(--ease-out); }
.visual-search button svg { width: var(--space-6); height: var(--space-6); stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.visual-search button:hover { background: var(--color-primary-dark); }
.quick {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: calc(var(--space-6) * -1);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
}
.quick a { display: flex; min-width: 0; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5); border-right: 1px solid var(--color-border); font-size: var(--font-size-body); text-decoration: none; }
.quick a:last-child { border-right: 0; }
.quick a span { color: var(--color-primary); }
.section { padding-block: clamp(var(--space-10), 7vw, var(--space-11)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-7); }
.section-head h2 { margin-bottom: 0; }
.section-head > a { flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: 500; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-5); }
.profile-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-background); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.profile-card:hover, .profile-card:has(a:focus-visible) { border-color: var(--color-primary); box-shadow: var(--shadow-card); transform: translateY(var(--lift)); }
.profile-card > a { display: flex; height: 100%; flex-direction: column; text-decoration: none; }
.card-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-background-subtle); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.visual-card:hover .card-photo img { transform: scale(1.025); }
.card-photo span { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: var(--space-1) var(--space-2); color: var(--color-text-on-dark); background: var(--color-overlay-strong); font-size: var(--font-size-xs); letter-spacing: .02em; }
.card-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: var(--space-5); }
.card-kicker { margin-bottom: var(--space-2); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card-copy h3 { min-height: 2em; margin-bottom: var(--space-2); }
.card-copy > p:not(.card-kicker) {
  display: -webkit-box;
  min-height: 4.7em;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.reputation-card-summary { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); padding-block: var(--space-3); border-block: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.reputation-card-summary span { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.reputation-card-summary strong { color: var(--color-text); font-weight: 600; }
.reputation-card-source { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tags li { max-width: 100%; padding: var(--space-1) var(--space-2); overflow-wrap: anywhere; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-sm); }
.card-link { display: block; margin-top: auto; padding-top: var(--space-5); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; transition: color var(--duration-fast) var(--ease-out); }
.profile-card:hover .card-link, .card-link:hover, .card-link:focus-visible { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.guide-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-line { margin: var(--space-6) auto 0; color: var(--color-text-muted); font-size: var(--font-size-body); }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.link-row + .link-row { margin-top: var(--space-4); }
.link-row > span { margin-right: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.link-row a { padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-background); font-size: var(--font-size-sm); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.link-row a:hover, .link-row a:focus-visible { border-color: var(--color-primary); background: var(--color-background-subtle); }
.guide-grid > a { display: flex; min-height: 210px; flex-direction: column; padding: var(--space-7); border: 1px solid var(--color-border); background: var(--color-background-subtle); text-decoration: none; transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.guide-grid > a:hover, .guide-grid > a:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-card); transform: translateY(var(--lift)); }
.guide-grid span { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.guide-grid strong { max-width: 480px; margin: var(--space-5) 0; font-family: var(--font-family-display); font-size: var(--font-size-h3); font-weight: 500; line-height: 1.05; }
.guide-grid i { margin-top: auto; color: var(--color-primary); font-size: var(--font-size-sm); font-style: normal; font-weight: 600; }
.method { padding-block: clamp(var(--space-10), 7vw, var(--space-11)); color: var(--color-text-on-dark); background: var(--color-secondary); }
.method-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr); align-items: center; gap: clamp(var(--space-8), 8vw, var(--space-12)); }
.method h2 { margin: 0; }
.method p { color: var(--color-secondary-muted); }
.button { display: inline-block; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-sm); color: var(--color-text-on-dark); background: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; }
.light-button { margin-top: var(--space-3); color: var(--color-secondary); background: var(--color-background); }
/* Shared control feedback: colour on hover, a spring press, an eased disabled state. */
.button, .text-button, .header-cta, .filters button, .path-options button, .visual-search button { transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-spring); }
.button:hover, .button:focus-visible { background: var(--color-primary-dark); }
.light-button:hover, .light-button:focus-visible, .tools-feature .button:hover, .tools-feature .button:focus-visible { background: var(--color-accent); }
.text-button:hover, .text-button:focus-visible, .filters button:hover, .filters button:focus-visible { border-color: var(--color-primary); }
:where(.button, .text-button, .header-cta, .filters button, .path-options button, .visual-search button):active:not(:disabled) { transform: scale(var(--press)); }

/* Directory and collection pages */
.page-main { min-height: 60vh; }
.page-hero { max-width: 880px; padding-block: clamp(var(--space-9), 7vw, var(--space-11)) var(--space-8); }
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero > p:not(.eyebrow):not(.reviewed-line) { max-width: 680px; margin-bottom: 0; color: var(--color-text-muted); font-size: var(--font-size-lead); }
.page-hero .reviewed-line { margin-top: var(--space-5); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.collection-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-7), 7vw, var(--space-11)); padding-block: var(--space-4) var(--space-10); }
.collection-guide h2 { max-width: 620px; }
.related-searches { padding-block: var(--space-2) var(--space-11); }
.related-searches h2 { max-width: 760px; }
.related-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--color-border); }
.related-links a { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.related-links a:hover, .related-links a:focus-visible { color: var(--color-primary); }
.quick a, .editorial-contents a, .guide-journey-grid a, .footer nav a { transition: color var(--duration-fast) var(--ease-out); }
.filters {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-background-subtle-translucent);
  backdrop-filter: blur(var(--blur-surface));
}
.filters label { min-width: 0; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.filters input, .filters select { display: block; width: 100%; min-width: 0; margin-top: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-border); outline-color: var(--color-primary); background: var(--color-background); }
.filters button { align-self: end; padding: var(--space-3) var(--space-3); border: 1px solid var(--color-border); background: var(--color-background); cursor: pointer; }
.filters .saved-filter { display: flex; align-self: end; align-items: center; gap: var(--space-2); min-height: var(--space-9); padding-inline: var(--space-2); white-space: nowrap; }
.filters .saved-filter input { display: inline-block; width: var(--space-6); min-width: var(--space-6); height: var(--space-6); margin: 0; padding: 0; accent-color: var(--color-primary); }
.directory-saved-note { margin: calc(var(--space-4) * -1) 0 var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.directory-no-script { margin: var(--space-4) 0 0; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.directory-page:has(.directory-no-script) .filters { display: none; }
.result-count { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.empty { padding: clamp(var(--space-7), 6vw, var(--space-10)); border: 1px dashed var(--color-border); text-align: center; }
.comparison-section { padding-top: var(--space-3); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
thead th { color: var(--color-primary); background: var(--color-background-subtle); font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }

/* Profile pages */
.profile-page { padding-bottom: var(--space-11); }
.breadcrumbs { display: flex; min-width: 0; gap: var(--space-2); padding: var(--space-5) 0; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.breadcrumbs > * { overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs > :not(:last-child) { flex: 0 0 auto; }
.breadcrumbs > :last-child { flex: 1 1 auto; min-width: 0; }
.profile-hero { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(var(--space-7), 7vw, var(--space-12)); padding: var(--space-6) 0 var(--space-10); border-bottom: 1px solid var(--color-border); }
.profile-visual { min-width: 0; margin: 0; }
.profile-visual { grid-column: 1; grid-row: 1; }
.profile-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: var(--radius-md); background: var(--color-background-subtle); }
.photo-credit { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.profile-title { min-width: 0; grid-column: 2; grid-row: 1; }
.profile-title h1 { max-width: 12ch; margin-bottom: var(--space-3); }
.profile-principal { margin-bottom: var(--space-7); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--font-size-sm); }
.profile-actions .profile-shortlist-toggle { min-height: var(--space-9); }
.profile-shortlist-status { min-height: 1.5em; margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.profile-shortlist-review { display: inline-block; margin-top: var(--space-1); font-size: var(--font-size-sm); font-weight: 600; }
.profile-shortlist-review[hidden] { display: none; }
.profile-shortlist-boundary { max-width: var(--measure-reading); margin: var(--space-2) 0 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: clamp(var(--space-8), 8vw, var(--space-12)); padding: var(--space-10) 0; }
.profile-grid > * { min-width: 0; }
.profile-grid .lead { font-size: var(--font-size-lead); line-height: 1.62; }
.profile-grid article section { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }
.profile-grid article .reputation-panel { padding: var(--space-7); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.reputation-panel h2 { margin-bottom: var(--space-4); }
.reputation-overall { margin-bottom: var(--space-6); font-size: var(--font-size-lead); line-height: var(--line-height-body); }
.reputation-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.reputation-source-grid > div { padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-background); }
.reputation-source-grid h3 { margin-bottom: var(--space-3); }
.reputation-channel-facts { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.reputation-channel-facts > div { min-width: 0; }
.reputation-channel-facts dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.reputation-channel-facts dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.reputation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-6); }
.reputation-facts > div { min-width: 0; }
.reputation-facts dt { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.reputation-facts dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.profile-grid article .verification-panel { padding: var(--space-7); border: 1px solid var(--color-border); background: var(--color-background); }
.verification-panel h2 { margin-bottom: var(--space-4); }
.verification-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-4) var(--space-6); }
.verification-facts > div { min-width: 0; }
.verification-facts dt { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.verification-facts dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.verification-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: 600; }
.reputation-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: 600; }
.detail-list { columns: 2; gap: var(--space-7); padding-left: var(--space-4); }
.detail-list li, .check-list li { margin-bottom: var(--space-2); break-inside: avoid; }
.check-list { padding-left: var(--space-5); }
.source-card { position: sticky; top: calc(var(--header-height) + var(--space-5)); align-self: start; padding: var(--space-7); background: var(--color-background-subtle); }
.source-card dl { margin: var(--space-6) 0; }
.source-card dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.source-card dd { margin: var(--space-1) 0 var(--space-4); overflow-wrap: anywhere; }
.fine { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.related { padding-top: var(--space-9); border-top: 1px solid var(--color-border); }

/* Editorial pages */
.editorial-page { padding-bottom: var(--space-12); }
.editorial-masthead { border-bottom: 1px solid var(--color-border); background: var(--color-background-subtle); }
.editorial-masthead .breadcrumbs { padding-bottom: var(--space-7); }
.editorial-masthead-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr); align-items: end; gap: clamp(var(--space-8), 7vw, var(--space-12)); padding-block: var(--space-5) var(--space-10); }
.editorial-masthead-grid-single { grid-template-columns: minmax(0, var(--measure-reading)); }
.editorial-heading h1 { max-width: 18ch; margin-bottom: var(--space-5); font-family: var(--font-family-body); font-size: var(--font-size-editorial-title); font-weight: 600; letter-spacing: -.045em; line-height: var(--line-height-title); text-wrap: pretty; }
.editorial-summary { padding: var(--space-6); border-top: var(--space-1) solid var(--color-primary); background: var(--color-background); }
.editorial-summary-label { margin-bottom: var(--space-3); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.editorial-answer { margin: 0; font-size: var(--font-size-lead); font-weight: 500; line-height: var(--line-height-body); }
.editorial-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.editorial-page-tool .editorial-masthead .breadcrumbs { padding-bottom: var(--space-2); }
.editorial-page-tool .editorial-masthead-grid { padding-block: var(--space-2) var(--space-5); }
.editorial-page-tool .editorial-heading h1 { max-width: 22ch; margin-bottom: 0; }
.tool-entry { padding-top: var(--space-4); }
.tool-entry .fee-comparison-tool { width: 100%; margin: 0 0 var(--space-6); transform: none; }
.tool-entry .tool-heading h2 { margin: 0 0 var(--space-3); font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; letter-spacing: -.025em; line-height: var(--line-height-heading); }
.tool-entry .tool-heading > :last-child { margin-bottom: var(--space-5); }
.tool-article-intro { margin-bottom: var(--space-7); }
.tool-article-intro .editorial-summary { margin-bottom: var(--space-4); }
.editorial-layout { display: grid; grid-template-columns: var(--measure-editorial-rail) minmax(0, var(--measure-reading)); justify-content: center; align-items: start; gap: clamp(var(--space-8), 7vw, var(--space-11)); padding-top: var(--space-10); }
.editorial-layout > * { min-width: 0; }
.editorial-layout-single { grid-template-columns: minmax(0, var(--measure-reading)); }
.editorial-rail { min-width: 0; }
.editorial-contents { position: sticky; top: calc(var(--header-height) + var(--space-6)); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.editorial-contents > p { margin-bottom: var(--space-4); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.editorial-contents ol { margin: 0; padding: 0; list-style: none; }
.editorial-contents li { margin-bottom: var(--space-3); }
.editorial-contents a { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.45; text-decoration: none; }
.editorial-contents a:hover, .editorial-contents a:focus-visible { color: var(--color-primary); text-decoration: underline; }
.editorial-content { max-width: var(--measure-reading); font-size: var(--font-size-reading); line-height: var(--line-height-reading); }
.editorial-content > :first-child { margin-top: 0; }
.editorial-content h2, .editorial-content h3 { font-family: var(--font-family-body); font-weight: 600; letter-spacing: -.025em; text-wrap: pretty; scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.editorial-content h2 { margin-top: var(--space-9); margin-bottom: var(--space-4); font-size: var(--font-size-editorial-h2); line-height: 1.2; }
.editorial-content h3 { margin-top: var(--space-7); margin-bottom: var(--space-3); font-size: var(--font-size-editorial-h3); line-height: 1.3; }
.editorial-content p { margin-bottom: var(--space-5); }
.editorial-content p, .editorial-content li { overflow-wrap: anywhere; }
.editorial-content li { margin-bottom: var(--space-2); }
.editorial-content ul, .editorial-content ol { margin-top: 0; margin-bottom: var(--space-6); padding-left: var(--space-6); }
.editorial-content blockquote { margin: var(--space-7) 0; padding: var(--space-5) var(--space-6); border-left: 3px solid var(--color-primary); background: var(--color-background-subtle); }
.editorial-content blockquote > :last-child { margin-bottom: 0; }
.editorial-content table { margin: 0; }
.editorial-content > .table-wrap { margin: var(--space-7) 0; }
.editorial-content hr { margin: var(--space-9) 0; border: 0; border-top: 1px solid var(--color-border); }
.editorial-figure { margin: var(--space-8) 0; padding: var(--space-5); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); box-shadow: var(--shadow-card); }
.editorial-figure-portrait { width: min(100%, calc(var(--measure-diagram-portrait) + var(--space-8))); margin: var(--space-8) auto; }
.editorial-figure-landscape { width: min(var(--measure-diagram-landscape), calc(100vw - var(--shell-gutter))); margin-left: 50%; transform: translateX(-50%); }
.pinterest-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5); margin: var(--space-8) 0; }
.pinterest-idea { display: flex; min-width: 0; margin: 0; padding: var(--space-4); flex-direction: column; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background-subtle); }
.pinterest-idea > a[data-pin-do] { display: grid; min-height: var(--space-13); padding: var(--space-4); place-items: center; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary); font-size: var(--font-size-sm); text-align: center; }
.pinterest-idea > span, .pinterest-idea iframe { max-width: 100% !important; margin-inline: auto !important; }
.pinterest-idea figcaption { margin-top: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.pinterest-idea figcaption a { color: var(--color-primary); }
.pinterest-gallery-note { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.editorial-diagram { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.editorial-diagram-portrait { max-width: var(--measure-diagram-portrait); }
.editorial-diagram .diagram-primary { fill: var(--color-accent); stroke: var(--color-primary); }
.editorial-diagram .diagram-secondary { fill: var(--color-secondary-muted); stroke: var(--color-secondary); }
.editorial-diagram .diagram-label, .editorial-diagram .diagram-note { font-family: var(--font-family-body); text-anchor: middle; }
.editorial-diagram .diagram-label { fill: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.editorial-diagram .diagram-note { fill: var(--color-text); font-size: var(--font-size-xs); }
.fee-comparison-tool { width: min(1100px, calc(100vw - var(--space-12))); margin: var(--space-9) 0 var(--space-10) 50%; padding: var(--space-7); transform: translateX(-50%); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background-subtle); }
.fee-comparison-tool .tool-heading { max-width: 760px; }
.fee-comparison-tool .tool-heading h3 { margin-top: 0; }
.fee-comparison-tool .tool-heading > :last-child { margin-bottom: var(--space-7); }
.fee-comparison-tool fieldset { min-width: 0; margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-background); }
.fee-comparison-tool legend { padding: 0 var(--space-2); color: var(--color-primary); font-weight: 600; }
.fee-comparison-tool label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.fee-comparison-tool input, .fee-comparison-tool select, .fee-comparison-tool textarea { width: 100%; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline-color: var(--color-primary); color: var(--color-text); background: var(--color-background); font-size: var(--font-size-body); font-weight: 400; }
:where(.fee-comparison-tool, .quote-checker, .quick-tool, .filters) :where(input, select, textarea) { transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
:where(.fee-comparison-tool, .quote-checker, .quick-tool, .filters) :where(input, select, textarea):hover { border-color: var(--color-text-muted); }
.fee-comparison-tool textarea { min-height: calc(var(--space-12) + var(--space-8)); resize: vertical; }
.fee-comparison-tool [tabindex="-1"]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.fee-common-basis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5) !important; }
.fee-candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fee-candidate { display: flex; flex-direction: column; gap: var(--space-4); }
.fee-component, .fee-adjustments { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.fee-component[hidden] { display: none; }
.fee-card-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: auto 0 0 !important; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: 600; }
.fee-card-total output { color: var(--color-primary); font-size: var(--font-size-lead); }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; }
.text-button { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-background); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; }
.fee-summary { background: var(--color-background); }
.fee-summary table { min-width: 860px; margin: 0; }
.fee-summary td { font-size: var(--font-size-sm); }
.fee-summary tbody tr:nth-last-child(-n + 1) td { color: var(--color-text-muted); }
.fee-comparison-tool .tool-note { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.tool-simple-panel { margin: var(--space-6) 0 var(--space-5); padding: var(--space-5); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-background); box-shadow: var(--shadow-card); }
.tool-no-script { margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.fee-comparison-tool:has(.tool-no-script) > :not(.tool-heading):not(noscript) { display: none; }
.tool-entry:has(> noscript .tool-no-script) > :is(.tool-simple-panel, .fee-comparison-tool) { display: none; }
.tool-simple-intro { max-width: var(--measure-reading); }
.tool-simple-intro h3 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-lead); font-weight: 600; line-height: var(--line-height-title); }
.tool-simple-intro > :last-child { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.tool-simple-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tool-simple-grid [aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-background); }
.tool-simple-primary { margin-top: var(--space-5); }
.tool-simple-ready > :has([data-tool-original]):not([data-tool-result-region]) { display: none; }
[data-tool-original][hidden] { display: none; }
.tool-simple-ready .fee-candidate > label,
.tool-simple-ready .fee-component,
.tool-simple-ready .fee-adjustments { display: none; }
.tool-options { margin: 0 0 var(--space-5); }
.fee-comparison-tool :where(button, input, select, textarea) { scroll-margin-block: var(--space-6); }
.tool-options-toggle { color: var(--color-primary); }
.tool-options-toggle[aria-expanded="true"] { border-color: var(--color-primary); background: var(--color-background-muted); }
.tool-options-panel { margin-top: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); }
.tool-options-panel[hidden] { display: none; }
/* Panels that start hidden ease in when a script reveals them. Nothing is hidden in the base state. */
:where(.tool-options-panel, .empty, #quote-result, #quote-receipt, .quote-pair, [data-quick-basis]) { transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out); }
@starting-style {
  :where(.tool-options-panel, .empty, #quote-result, #quote-receipt, .quote-pair, [data-quick-basis]) { opacity: 0; translate: 0 var(--space-2); }
}
.quick-result.is-updated { animation: motion-settle var(--duration-slow) var(--ease-out); }
@keyframes motion-settle { from { opacity: .4; translate: 0 var(--space-1); } }
@keyframes motion-drop { from { opacity: 0; translate: 0 calc(var(--space-2) * -1); } }
.tool-options-heading { max-width: var(--measure-reading); }
.tool-options-heading h3 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-lead); font-weight: 600; line-height: var(--line-height-title); }
.tool-options-heading > :last-child { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.tool-basis { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); align-items: end; gap: var(--space-5); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); }
.tool-basis p, .tool-status { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.painting-product-systems { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: var(--space-5); }
.painting-product-systems fieldset { display: grid; align-content: start; gap: var(--space-3); }
.tool-status { min-height: 1.5em; margin-bottom: var(--space-5); }
.project-starter-result, .quote-comparison-result, .material-comparison-result, .inspection-record-result, .handover-record-result, .project-control-result, .project-task-result, .maintenance-record-result, .document-record-result, .procurement-record-result { margin-top: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-background-muted); }
.project-starter-result:focus, .quote-comparison-result:focus, .material-comparison-result:focus, .inspection-record-result:focus, .handover-record-result:focus, .project-control-result:focus, .project-task-result:focus, .maintenance-record-result:focus, .document-record-result:focus, .procurement-record-result:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
[data-project-summary]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.project-starter-result h3, .quote-comparison-result h3, .material-comparison-result h3, .inspection-record-result h3, .handover-record-result h3, .project-control-result h3, .project-task-result h3, .maintenance-record-result h3, .document-record-result h3, .procurement-record-result h3 { margin: 0 0 var(--space-3); font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; line-height: var(--line-height-heading); }
.project-starter-result > p:not(.eyebrow), .quote-comparison-result > p:not(.eyebrow), .material-comparison-result > p:not(.eyebrow), .inspection-record-result > p:not(.eyebrow), .handover-record-result > p:not(.eyebrow), .project-control-result > p:not(.eyebrow), .project-task-result > p:not(.eyebrow), .maintenance-record-result > p:not(.eyebrow), .document-record-result > p:not(.eyebrow), .procurement-record-result > p:not(.eyebrow) { max-width: var(--measure-reading); margin-bottom: var(--space-5); font-size: var(--font-size-lead); line-height: var(--line-height-body); }
.project-starter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: center; }
.project-starter-actions a { min-width: 0; overflow-wrap: anywhere; }
.project-requirements { margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); }
.project-requirements:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.project-requirements h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-lead); line-height: var(--line-height-title); }
.project-requirements > p:not(.eyebrow):not(.tool-status) { max-width: var(--measure-reading); margin-bottom: var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.project-requirements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.project-requirements-summary { padding: var(--space-3); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background-muted); }
.quote-comparison-result .table-wrap { margin-bottom: var(--space-5); background: var(--color-background); }
.material-comparison-result .table-wrap { margin-bottom: var(--space-5); background: var(--color-background); }
.material-comparison-result h4 { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-family-body); font-size: var(--font-size-body); }
.material-comparison-result ul { margin-bottom: var(--space-5); }
.inspection-record-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.inspection-record-summary div { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); }
.inspection-record-summary dt { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.inspection-record-summary dd { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.inspection-record-tool .tool-simple-grid label { align-self: start; }
.inspection-record-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.inspection-record-list[hidden] { display: none; }
[data-inspection-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.inspection-record-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.inspection-record-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.inspection-record-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.inspection-record-list .inspection-record-stage { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.inspection-record-list .inspection-record-next, .inspection-register-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.inspection-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inspection-record-actions .text-button { min-height: var(--space-9); }
.handover-record-tool { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }
.handover-record-heading { max-width: var(--measure-reading); }
.handover-record-heading h3 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-lead); line-height: var(--line-height-title); }
.handover-record-heading > :last-child { margin-bottom: var(--space-5); color: var(--color-text-muted); }
.handover-record-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.handover-record-tool > .button { margin-top: var(--space-5); }
.handover-record-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.handover-record-list[hidden] { display: none; }
[data-handover-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.handover-record-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.handover-record-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.handover-record-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.handover-record-list .handover-record-category { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.handover-record-list .handover-record-stage { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.handover-record-list .handover-record-next, .handover-register-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.handover-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.handover-record-actions .text-button { min-height: var(--space-9); }
.project-control-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.project-control-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.project-control-list[hidden] { display: none; }
[data-project-control-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.project-control-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.project-control-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.project-control-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.project-control-list .project-control-kind { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.project-control-list .project-control-stage { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.project-control-list .project-control-next, .project-control-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.project-control-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.project-control-actions .text-button { min-height: var(--space-9); }
.project-task-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.project-task-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.project-task-list[hidden] { display: none; }
[data-project-task-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.project-task-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.project-task-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.project-task-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.project-task-list .project-task-stage { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.project-task-list .project-task-state { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.project-task-list .project-task-next, .project-task-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.project-task-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.project-task-actions .text-button { min-height: var(--space-9); }
.maintenance-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.maintenance-record-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.maintenance-record-list[hidden] { display: none; }
[data-maintenance-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.maintenance-record-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.maintenance-record-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.maintenance-record-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.maintenance-record-list .maintenance-record-source { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.maintenance-record-list .maintenance-record-state { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.maintenance-record-list .maintenance-record-next, .maintenance-register-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.maintenance-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.maintenance-record-actions .text-button { min-height: var(--space-9); }
.document-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.document-record-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.document-record-list[hidden] { display: none; }
[data-document-count]:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.document-record-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.document-record-list h4 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.document-record-list p { max-width: var(--measure-reading); margin: 0 0 var(--space-3); line-height: var(--line-height-body); }
.document-record-list .document-record-part { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.document-record-list .document-record-state { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.document-record-list .document-record-next, .document-register-limit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.document-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.document-record-actions .text-button { min-height: var(--space-9); }
.procurement-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.procurement-record-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.procurement-record-list[hidden] { display: none; }
.procurement-record-list li { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); }
.procurement-record-list h4, .procurement-record-list p { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.procurement-record-state { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.procurement-record-meta, .procurement-record-next { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.procurement-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.renovation-budget-table { margin-bottom: var(--space-5); background: var(--color-background); }
.renovation-budget-table select, .renovation-budget-table input { margin: 0; }
.renovation-budget-adjustments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.bathroom-tile-schedules { align-items: start; margin-top: var(--space-5); }
.bathroom-tile-schedules .renovation-budget-adjustments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.renovation-budget-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.renovation-budget-summary div { padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); }
.renovation-budget-summary dt { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.renovation-budget-summary dd { margin: var(--space-2) 0 0; color: var(--color-primary); font-size: var(--font-size-lead); font-weight: 600; }
.renovation-budget-summary .budget-grand-total { border-color: var(--color-primary); background: var(--color-background-muted); }
.renovation-budget-flags { padding: var(--space-4); border-left: var(--space-1) solid var(--color-accent); background: var(--color-background); font-size: var(--font-size-sm); }
.room-layout-add { margin-top: var(--space-5) !important; }
.room-layout-add .renovation-budget-adjustments { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.room-layout-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(16rem, .85fr); align-items: start; gap: var(--space-5); margin-top: var(--space-5); }
.room-layout-canvas-wrap, .room-layout-editor { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); }
.room-layout-canvas { display: block; width: 100%; height: auto; overflow: visible; border: 1px solid var(--color-border); background: var(--color-background-subtle); touch-action: none; }
.layout-room { fill: var(--color-background); stroke: var(--color-text); stroke-width: 2; }
.layout-grid-line { stroke: var(--color-border); stroke-width: 1; }
.layout-item { cursor: move; }
.layout-item rect { fill: var(--color-accent); stroke: var(--color-primary); stroke-width: 2; }
.layout-clearance rect { fill: var(--color-background-muted); stroke-dasharray: 7 5; }
.layout-item.is-selected rect { stroke: var(--color-secondary); stroke-width: 4; }
.layout-item.has-conflict rect { fill: var(--color-error-background); stroke: var(--color-error); }
.layout-item-label { fill: var(--color-text); font-family: var(--font-family-body); font-size: var(--font-size-xs); font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.room-layout-editor[hidden] { display: none; }
.room-layout-editor .eyebrow { margin-top: 0; }
.room-layout-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.room-layout-list .text-button.is-selected { border-color: var(--color-secondary); background: var(--color-background-muted); }
.project-budget-table { margin-bottom: var(--space-5); background: var(--color-background); }
.project-budget-table input { margin: 0; }
.project-budget-adjustments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.project-budget-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.project-budget-summary div { padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); }
.project-budget-summary dt { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.project-budget-summary dd { margin: var(--space-2) 0 0; color: var(--color-primary); font-size: var(--font-size-lead); font-weight: 600; }
.project-budget-summary .budget-grand-total { border-color: var(--color-primary); background: var(--color-background-muted); }
.guides-masthead { border-bottom: 1px solid var(--color-border); background: var(--color-background-subtle); }
.guides-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); align-items: end; gap: clamp(var(--space-8), 8vw, var(--space-12)); padding-block: var(--space-6) var(--space-9); }
.guides-intro h1 { max-width: 14ch; margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-editorial-title); font-weight: 600; letter-spacing: -.045em; text-wrap: pretty; }
.guides-intro-copy > p:first-child { font-size: var(--font-size-lead); line-height: var(--line-height-body); }
.guides-intro-copy > :last-child { margin-bottom: 0; }
.cluster-nav { display: flex; gap: var(--space-2); padding-bottom: var(--space-6); overflow-x: auto; }
.cluster-nav a { flex: 0 0 auto; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-background); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.guide-journey { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); gap: clamp(var(--space-7), 7vw, var(--space-10)); padding-block: var(--space-8); border-bottom: 1px solid var(--color-border); }
.guide-path-entry { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-block: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.guide-path-entry h2 { margin-bottom: var(--space-1); font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; }
.guide-path-entry p { margin-bottom: 0; color: var(--color-text-muted); }
.guide-path-entry .eyebrow { margin-bottom: var(--space-1); color: var(--color-primary); }
.guide-path-entry .button { flex: none; }
.project-path { min-height: calc(100vh - var(--header-height)); background: var(--color-background-subtle); }
.project-path-shell { max-width: 58rem; padding-block: var(--space-6) var(--space-10); }
.project-path-intro { max-width: 48rem; margin-top: var(--space-8); }
.project-path-intro > p:last-child { color: var(--color-text-muted); font-size: var(--font-size-lead); }
.path-quiz { margin-top: var(--space-7); padding: clamp(var(--space-5), 5vw, var(--space-8)); border: 1px solid var(--color-border); background: var(--color-background); box-shadow: var(--shadow-card); }
.path-progress { display: flex; align-items: center; gap: var(--space-4); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; }
.path-progress-track { flex: 1; height: 3px; overflow: hidden; background: var(--color-background-muted); }
.path-progress-track i { display: block; width: 33.333%; height: 100%; background: var(--color-primary); transition: width .2s ease; }
.path-panel { min-height: min(28rem, calc(100vh - 22rem)); padding-top: var(--space-7); }
.path-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.path-options button { min-height: 4.5rem; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); color: var(--color-text); text-align: left; cursor: pointer; }
.path-options button:hover, .path-options button:focus-visible { border-color: var(--color-primary); background: var(--color-accent); }
.path-back { margin-top: var(--space-4); }
.path-result { min-height: 0; }
.path-result > p:not(.eyebrow) { max-width: var(--measure-reading); color: var(--color-text-muted); }
.path-result-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.path-result-list li { display: flex; min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); flex-direction: column; }
.path-result-list p { margin-bottom: var(--space-2); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.path-result-list h3 { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: 600; }
.path-result-list .button { margin-top: auto; text-align: center; }
.path-restart { margin-top: var(--space-5); }
.path-fallback { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-background); }
.guide-journey-heading h2 { font-family: var(--font-family-body); font-size: var(--font-size-editorial-h2); font-weight: 600; letter-spacing: -.035em; }
.guide-journey-heading > p:not(.eyebrow) { color: var(--color-text-muted); }
.project-summary-next { display: block; width: 100%; margin-top: var(--space-4); text-align: center; }
.project-summary-facts { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.project-summary-facts div { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.project-summary-facts dt { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.project-summary-facts dd { margin: var(--space-1) 0 0; }
.project-provider-shortlist { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.project-provider-shortlist[hidden] { display: none; }
.project-provider-shortlist h3 { margin: 0 0 var(--space-3); font-family: var(--font-family-body); font-size: var(--font-size-body); }
.project-provider-shortlist ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.project-provider-shortlist li { display: grid; justify-items: start; gap: var(--space-2); }
.project-provider-shortlist a { min-width: 0; overflow-wrap: anywhere; }
.project-provider-shortlist .text-button { padding: var(--space-2); font-size: var(--font-size-xs); }
.project-summary-privacy { font-size: var(--font-size-sm); }
.project-summary-actions { display: grid; gap: var(--space-2); align-items: stretch; }
.project-summary-actions > * { width: 100%; margin: 0; text-align: center; }
.project-summary-actions .text-button { padding: var(--space-3); }
.project-summary-actions button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.guide-journey-heading .tool-status { min-height: 0; margin: var(--space-3) 0 0; font-size: var(--font-size-sm); }
.guide-journey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-text); border-left: 1px solid var(--color-border); }
.guide-journey-grid nav { display: grid; align-content: start; min-width: 0; padding: var(--space-5); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.guide-journey-grid h3 { margin: 0 0 var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; }
.guide-journey-grid a { padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); text-decoration: none; }
.guide-journey-grid a:last-child { border-bottom: 0; }
.guide-journey-grid a:hover, .guide-journey-grid a:focus-visible { color: var(--color-primary); text-decoration: underline; }
.guide-search-active .guide-path-entry { display: none; }
.guide-filters, .guide-filter-feedback { display: none; }
.guide-search-ready .guide-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--space-6); }
.guide-search-ready .guide-filter-feedback { display: block; padding-top: var(--space-4); }
.guide-filter-feedback .result-count { margin-bottom: 0; }
.guide-filter-feedback .empty { margin-top: var(--space-4); }
.guide-no-script { margin: var(--space-6) 0 0; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
.guides-archive [hidden] { display: none !important; }
.guide-search-active .guide-cluster { padding-top: var(--space-6); }
.calculator-directory { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); align-items: start; gap: clamp(var(--space-8), 8vw, var(--space-12)); }
.calculator-directory-heading h2 { font-family: var(--font-family-body); font-size: var(--font-size-editorial-h2); font-weight: 600; letter-spacing: -.035em; }
.calculator-directory-heading > p:not(.eyebrow) { color: var(--color-text-muted); }
.calculator-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-text); border-left: 1px solid var(--color-border); }
.calculator-directory-grid article { min-width: 0; padding: var(--space-5); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.calculator-directory-grid h3 { margin: var(--space-3) 0 0; font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; letter-spacing: -.025em; line-height: var(--line-height-heading); }
.calculator-directory-grid h3 a { text-decoration: none; }
.calculator-directory-grid article > p:not(.archive-date) { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.calculator-directory-grid .card-link { display: inline-block; margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: 600; }
.guide-cluster { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); align-items: start; gap: clamp(var(--space-8), 8vw, var(--space-12)); border-top: 1px solid var(--color-border); }
.guide-cluster-heading { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
.guide-search-ready .guide-cluster-heading { top: calc(var(--header-height) + var(--space-6) + var(--guide-filter-height)); }
.guide-cluster-heading h2 { font-family: var(--font-family-body); font-size: var(--font-size-editorial-h2); font-weight: 600; letter-spacing: -.035em; }
.guide-cluster-heading > p:not(.eyebrow) { color: var(--color-text-muted); }
.guide-cluster-heading .cluster-count { margin-top: var(--space-5); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.archive-list { border-top: 1px solid var(--color-text); }
.archive-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .65fr); column-gap: var(--space-7); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.archive-card-meta { display: flex; grid-column: 1 / -1; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.archive-card-meta span { font-variant-numeric: tabular-nums; }
.archive-card h3 { margin: var(--space-3) 0 0; font-family: var(--font-family-body); font-size: var(--font-size-editorial-h3); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.archive-card h3 a { text-decoration: none; }
.archive-card > p { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.archive-card .card-link { grid-column: 2; margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: 600; }
.archive-date { color: var(--color-primary) !important; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.not-found { min-height: 65vh; padding-block: var(--space-12); }
.not-found > p:not(.eyebrow) { max-width: var(--measure-reading); }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.not-found-actions > a:not(.button) { font-size: var(--font-size-sm); font-weight: 600; }

/* Shared footer */
.footer { padding-block: var(--space-9) var(--space-7); color: var(--color-text-on-dark); background: var(--color-text); }
.footer-inner { display: grid; grid-template-columns: minmax(200px, 1.25fr) repeat(3, minmax(130px, .7fr)) minmax(160px, .75fr); gap: clamp(var(--space-6), 4vw, var(--space-9)); }
.logo.light { color: var(--color-text-on-dark); }
.footer-brand p { max-width: 260px; margin: var(--space-3) 0 0; color: var(--color-text-on-dark-muted); font-size: var(--font-size-sm); }
.footer nav { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.footer nav p { margin-bottom: var(--space-2); color: var(--color-text-on-dark-subtle); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer nav a { width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: var(--font-size-sm); text-decoration: none; }
.footer .fine { margin: 0; color: var(--color-text-on-dark-subtle); }

@media (max-width: 980px) {
  .desktop-nav { gap: var(--space-3); }
  .profile-hero { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); }
  .footer-inner { grid-template-columns: 1.25fr 1fr 1fr; }
  .footer .fine { grid-column: 1 / -1; }
  .fee-candidate-grid { grid-template-columns: 1fr; }
  .renovation-budget-adjustments, .renovation-budget-summary { grid-template-columns: 1fr; }
  .project-budget-adjustments, .project-budget-summary { grid-template-columns: 1fr; }
  .room-layout-add .renovation-budget-adjustments, .room-layout-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
}

@media (max-width: 760px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .visual-hero { min-height: 650px; max-height: 780px; }
  .visual-hero-copy { padding-block: var(--space-10) var(--space-11); }
  .visual-path-entry { align-items: flex-start; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
  .visual-search { grid-template-columns: minmax(0, 1fr) 64px; min-height: 76px; }
  .visual-search label:nth-child(2) { display: none; }
  .visual-search label { padding: var(--space-3) var(--space-4); }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick a:nth-child(even) { border-right: 0; }
  .quick a:nth-child(-n + 4) { border-bottom: 1px solid var(--color-border); }
  .quick a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .guide-grid, .guide-grid.three { grid-template-columns: 1fr; }
  .editorial-masthead-grid, .guides-intro { grid-template-columns: 1fr; }
  .editorial-layout { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-7); }
  .editorial-contents { position: static; padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-background-subtle); }
  .editorial-contents ol { columns: 2; column-gap: var(--space-7); }
  .editorial-contents li { break-inside: avoid; }
  .guide-cluster, .calculator-directory, .guide-journey { grid-template-columns: 1fr; }
  .calculator-directory-grid, .guide-journey-grid { grid-template-columns: 1fr; }
  .path-result-list { grid-template-columns: 1fr; }
  .guide-cluster-heading { position: static; }
  .section-head { align-items: start; flex-direction: column; gap: var(--space-3); }
  .method-grid, .profile-hero, .profile-grid, .collection-guide { grid-template-columns: 1fr; }
  .profile-hero { gap: var(--space-7); }
  .profile-title { grid-column: 1; grid-row: 1; }
  .profile-visual { grid-column: 1; grid-row: 2; }
  .profile-photo { aspect-ratio: 16 / 10; }
  .profile-card .card-photo { aspect-ratio: 16 / 10; }
  .reputation-source-grid, .reputation-facts, .verification-facts { grid-template-columns: 1fr; }
  .source-card { position: static; }
  .filters { position: static; grid-template-columns: 1fr 1fr; }
  .filters label:first-child { grid-column: 1 / -1; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer .fine { grid-column: 1 / -1; }
  .editorial-content table { display: block; min-width: var(--measure-table); max-width: 100%; overflow-x: auto; }
  .editorial-content { font-size: var(--font-size-body); }
  .editorial-figure { padding: var(--space-3); }
  .editorial-figure-landscape .editorial-diagram { min-width: var(--measure-diagram-landscape); }
  .fee-comparison-tool { width: calc(100vw - var(--space-7)); padding: var(--space-5); }
  .fee-common-basis { grid-template-columns: 1fr; }
  .tool-basis, .renovation-budget-adjustments, .renovation-budget-summary, .bathroom-tile-schedules, .handover-record-fields, .project-control-fields, .project-task-fields, .maintenance-record-fields, .document-record-fields, .procurement-record-fields { grid-template-columns: 1fr; }
  .tool-simple-grid { grid-template-columns: 1fr; }
  .project-starter-actions, .project-requirements-grid, .inspection-record-summary { grid-template-columns: 1fr; }
  .pinterest-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .guide-path-entry { min-height: 0; max-height: 190px; align-items: stretch; flex-direction: column; gap: var(--space-3); margin-block: var(--space-4); padding: var(--space-4); }
  .guide-path-entry .button { padding-block: var(--space-2); text-align: center; }
  .project-path-shell { padding-block: var(--space-4) var(--space-7); }
  .project-path-intro { margin-top: var(--space-4); }
  .project-path-intro h1 { font-size: var(--font-size-h2); }
  .project-path-intro > p:last-child { margin-bottom: 0; font-size: var(--font-size-body); }
  .path-quiz { margin-top: var(--space-4); padding: var(--space-4); }
  .path-panel { min-height: 0; padding-top: var(--space-4); }
  .path-options { grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-4); }
  .path-options button { min-height: 3.25rem; padding: var(--space-3); }
  .quick { grid-template-columns: 1fr; }
  .quick a { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .quick a:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
  .quick a:last-child { border-bottom: 0; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-list { columns: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand, .footer .fine { grid-column: auto; }
  .editorial-contents ol { columns: 1; }
  .archive-card { grid-template-columns: 1fr; }
  .archive-card .card-link { grid-column: 1; }
}

@media print {
  body:has(.editorial-page-tool) > :is(.skip-link, .site-header, .footer) { display: none !important; }
  .editorial-page-tool > :not(.tool-entry) { display: none !important; }
  .editorial-page-tool .tool-entry { width: 100%; max-width: none; margin: 0; padding: 0; }
  .editorial-page-tool .fee-comparison-tool { margin: 0; box-shadow: none; }
  .editorial-page-tool .tool-entry:has([data-print-active]) > .fee-comparison-tool:not([data-print-active]) { display: none !important; }
  .editorial-page-tool :is(.tool-simple-primary, .tool-options-toggle, .tool-actions, .tool-status, .tool-share-status) { display: none !important; }
  .editorial-page-tool .tool-options-panel[hidden] { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Keyframes here only describe a start state, so removing them leaves every element in its final state. */
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .visual-card:hover .card-photo img,
  .profile-card:hover, .profile-card:has(a:focus-visible),
  .visual-path-entry:hover, .visual-path-entry:focus-visible,
  :where(.button, .text-button, .header-cta, .filters button, .path-options button, .visual-search button):active,
  .guide-grid > a:hover,
  .guide-grid > a:focus-visible { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (forced-colors: active) {
  .button,
  .visual-search button { border: 1px solid ButtonBorder; }
}

/* Focused navigation and guide/tool entry points. */
.desktop-nav { align-items: center; gap: var(--space-7); }
.desktop-nav a { padding: var(--space-3) 0; }
.desktop-nav .header-cta { padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-dark); }
.mobile-nav summary { border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.mobile-nav summary:hover, .mobile-nav[open] summary { border-color: var(--color-primary); background: var(--color-background-subtle); }
.desktop-nav .header-cta:hover, .desktop-nav .header-cta:focus-visible, .mobile-nav nav a.header-cta:hover { background: var(--color-primary-dark); }
.mobile-nav nav { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.tools-heading { padding: var(--space-9) 0; max-width: var(--measure-reading); }
.tools-heading h1 { margin: var(--space-3) 0; }
.tools-feature, .quote-intro { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); align-items: center; }
.tools-feature { background: var(--color-primary); color: var(--color-text-on-dark); padding: var(--space-8); border-radius: var(--radius-md); }
.tools-feature .eyebrow, .tools-feature p { color: var(--color-text-on-dark); }
.tools-feature .button { background: var(--color-text-on-dark); color: var(--color-primary); margin-top: var(--space-4); }
.tools-feature-note { display: grid; gap: var(--space-4); border-left: 1px solid var(--color-text-on-dark-subtle); padding-left: var(--space-7); }
.tools-feature-note strong { font-family: var(--font-family-display); font-size: var(--font-size-h2); }
.guide-decisions { padding-top: var(--space-8); padding-bottom: var(--space-5); }
.guide-decision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
.guide-decision-grid a { display: grid; align-content: start; gap: var(--space-3); text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.guide-decision-grid a:hover { background: var(--color-background-subtle); border-color: var(--color-primary); }
.guide-decision-grid span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.guide-decision-grid strong { font-size: var(--font-size-lead); }
.quote-checker, .quick-tool { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); margin-bottom: var(--space-8); }
.quote-checker h2, .quick-tool h2 { font-size: var(--font-size-h2); margin: var(--space-2) 0 var(--space-4); }
.quote-checker h3 { font-size: var(--font-size-h3); margin: var(--space-6) 0 var(--space-3); }
.quote-privacy { font-size: var(--font-size-sm); color: var(--color-secondary); background: var(--color-secondary-muted); padding: var(--space-4); border-radius: var(--radius-md); }
.quote-upload, .quick-inputs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); margin-top: var(--space-6); align-items: start; }
.quote-checker label, .quick-tool label { display: grid; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 600; }
.quote-checker input:not([type=checkbox]), .quote-checker select, .quick-tool input, .quick-tool select { width: 100%; min-height: var(--space-9); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-background); color: var(--color-text); font: inherit; box-sizing: border-box; }
.quote-file { background: var(--color-background-subtle); border: 1px dashed var(--color-border); padding: var(--space-5); border-radius: var(--radius-md); }
.quote-file span { font-weight: 400; color: var(--color-text-muted); }
.quote-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; grid-column: 1 / -1; margin: var(--space-4) 0; }
.quote-result-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.quote-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
.quote-summary div { display: grid; gap: var(--space-2); border-radius: var(--radius-sm); background: var(--color-background-subtle); padding: var(--space-4); }
.quote-summary span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.quote-summary strong { font-size: var(--font-size-lead); overflow-wrap: anywhere; }
.quote-warnings { border-left: 3px solid var(--color-primary); padding-left: var(--space-6); }
.quote-warnings li { margin: var(--space-3) 0; }
.quote-details, .quote-contribution { border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-6); }
.quote-details summary, .quote-contribution summary { cursor: pointer; font-weight: 600; padding: var(--space-3) 0; transition: color var(--duration-fast) var(--ease-out); }
.quote-checker summary:hover { color: var(--color-primary); }
.quote-checker details[open] > :not(summary) { animation: motion-drop var(--duration-base) var(--ease-out); }
.quote-checker .quote-check { display: flex; gap: var(--space-3); align-items: start; font-weight: 400; margin: var(--space-4) 0; }
.quote-check input { margin-top: var(--space-1); width: var(--space-5); height: var(--space-5); flex-shrink: 0; }
.quote-checker pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; font-size: var(--font-size-sm); background: var(--color-background-subtle); padding: var(--space-4); }
.quote-checker button:disabled { opacity: .55; cursor: not-allowed; }
.quote-price-panel { background: var(--color-background-subtle); padding: var(--space-5); border-radius: var(--radius-md); margin-top: var(--space-6); }
.quote-price-panel article + article { border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-5); }
.quick-result, .quick-inputs .tool-note { grid-column: 1 / -1; }
.quick-result { font-size: var(--font-size-lead); color: var(--color-secondary); background: var(--color-secondary-muted); border-radius: var(--radius-sm); padding: var(--space-5); }
.retired-tool-anchor { scroll-margin-top: var(--header-height); }
@media (max-width: 760px) {
  .guide-decision-grid, .quote-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quote-checker, .quick-tool, .tools-feature { padding: var(--space-5); }
  .quote-upload, .quick-inputs, .tools-feature, .quote-intro { grid-template-columns: 1fr; }
  .tools-feature-note { border-left: 0; border-top: 1px solid var(--color-text-on-dark-subtle); padding: var(--space-5) 0 0; }
}
@media (max-width: 430px) { .guide-decision-grid { grid-template-columns: 1fr; } }

#quotation-comparison, #quick-title { scroll-margin-top: var(--space-4); }

.quote-checker [hidden], .quick-tool [hidden] { display: none !important; }

.mobile-nav nav a.header-cta, .mobile-nav nav a.header-cta[aria-current="page"] { margin-top: var(--space-2); padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-dark); text-align: center; }

.quote-pair { margin-block: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.quote-pair > label { display: grid; gap: var(--space-2); margin-block: var(--space-3); }
@media (max-width: 760px) {
  .quote-intro { gap: var(--space-3); }
  .quote-intro p { margin-bottom: var(--space-3); }
  .quote-intro .quote-privacy { padding: var(--space-3); }
  .quote-upload { gap: var(--space-4); margin-top: var(--space-4); }
  .quote-file { padding: var(--space-3); }
}