/* Home Harmony Family LLC — clean, editorial, minimal.
   Sky blue and ink black on a soft white ground, straight off the logo. */

:root {
  --paper: #f9fcfe;
  --paper-2: #edf6fc;
  --white: #ffffff;
  --ink: #0e1a21;
  --ink-2: #475a66;
  --ink-3: #8798a3;
  --sun: #2fb3e8;
  --sun-lit: #74d2f6;
  --sun-deep: #0b6e9b;
  --sand: #e3f4fd;
  --teal: #0d3f58;
  --teal-soft: #e2eef5;
  --clay: #2d7ea3;
  --clay-soft: #e6f3f9;
  --line: #d9e8f1;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2.75rem);
  --r: 22px;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.03rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.2rem, 7.4vw, 6.1rem); }
h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.015em; }
em { font-style: italic; }

p { margin: 0; }

.shell { width: min(var(--shell), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(5rem, 10vw, 9rem); }

.eyebrow {
  margin: 0 0 1.2rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sun-deep);
  display: flex; align-items: center; gap: 0.75rem;
}
.eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--sun); flex: none; }
.eyebrow.centered { justify-content: center; }

.lede { margin-top: 1.5rem; max-width: 54ch; font-size: 1.08rem; color: var(--ink-2); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 10px;
}
.skip-link:focus { top: 1rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.85rem 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--body); font-size: 0.98rem; font-weight: 600;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-sun {
  background: linear-gradient(135deg, var(--sun-lit), var(--sun));
  color: #ffffff;
  box-shadow: 0 14px 30px -16px rgba(11, 110, 155, 0.9);
}
.btn-sun:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -16px rgba(11, 110, 155, 0.9); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #1b2c38; transform: translateY(-3px); }
.btn-ghost { border-color: var(--line); background: var(--white); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn-lg { min-height: 58px; padding: 1rem 2rem; font-size: 1.03rem; }

.textlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; color: var(--teal);
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.textlink svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.textlink:hover svg { transform: translateX(5px); }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(249, 252, 254, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.site-header.stuck { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 2rem; height: 80px; }
.brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; }
.brand img { width: 36px; height: 36px; transition: transform 0.6s var(--ease); }
.brand:hover img { transform: rotate(40deg); }
.brand-text { display: grid; line-height: 1; }
.brand-text b { font-family: var(--display); font-size: 1.34rem; font-weight: 600; letter-spacing: -0.02em; }
.brand-text span { font-size: 0.59rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.nav { display: flex; gap: 2.1rem; }
.nav a { position: relative; font-size: 0.94rem; font-weight: 500; color: var(--ink-2); transition: color 0.2s; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1.5px; background: var(--sun); transition: right 0.35s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; padding: 0; }
.menu-btn span { display: block; width: 18px; height: 1.6px; background: var(--ink); margin: 3.6px auto; transition: 0.3s var(--ease); }
.menu-btn[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: 0.6rem var(--gutter) 1.5rem; }
.mobile-nav.open { display: grid; }
.mobile-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.mobile-nav .btn { margin-top: 1.1rem; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem); overflow: clip; }
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -22%; right: -8%; width: min(760px, 70vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47, 179, 232, 0.26), rgba(47, 179, 232, 0) 68%);
  animation: breathe 11s ease-in-out infinite;
}
.hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  bottom: -28%; left: -14%; width: min(560px, 60vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(13, 63, 88, 0.12), rgba(13, 63, 88, 0) 68%);
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.78; } }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.hero h1 em { color: var(--sun-deep); display: inline-block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.hero-trust div { display: grid; gap: 0.25rem; }
.hero-trust b { font-family: var(--display); font-size: 1.85rem; font-weight: 600; line-height: 1; }
.hero-trust span { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* layered image stack — grid overlap keeps the two shots in register */
.hero-media { position: relative; display: grid; padding: 0 clamp(18px, 4%, 34px) clamp(26px, 6%, 48px) 0; }
.hero-media .shot-main {
  grid-area: 1 / 1;
  width: 100%; aspect-ratio: 4 / 5; max-height: 530px; object-fit: cover;
  border-radius: var(--r);
  box-shadow: 0 40px 70px -46px rgba(21, 29, 25, 0.6);
}
.hero-media .shot-sub {
  grid-area: 1 / 1; z-index: 2;
  align-self: end; justify-self: end;
  width: clamp(130px, 42%, 215px); height: clamp(130px, 42%, 215px);
  object-fit: cover;
  border-radius: 18px; border: 6px solid var(--paper);
  box-shadow: 0 28px 50px -34px rgba(21, 29, 25, 0.7);
  transform: translate(26%, 30%);
}
.hero-badge {
  position: absolute; z-index: 3; left: -14px; top: 30px;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.55rem 1.15rem 0.55rem 0.65rem;
  box-shadow: 0 20px 40px -26px rgba(21, 29, 25, 0.6);
}
.hero-badge img { width: 30px; height: 30px; }
.hero-badge b { display: block; font-size: 0.87rem; }
.hero-badge span { display: block; font-size: 0.73rem; color: var(--ink-3); }

/* ── Marquee ─────────────────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--white); padding-block: 1rem; }
.marquee-track { display: flex; gap: 2.8rem; white-space: nowrap; width: max-content; animation: slide 38s linear infinite; }
.marquee-track span { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 2.8rem; }
.marquee-track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sun); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Section heads ───────────────────────────────────────────── */
.head { max-width: 48rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.head.centered { margin-inline: auto; text-align: center; }
.head.centered .lede { margin-inline: auto; }

/* ── Services ────────────────────────────────────────────────── */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.svc {
  position: relative; padding: 2.2rem 1.9rem 2rem;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--white);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.svc::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 32px 54px -38px rgba(21, 29, 25, 0.6); border-color: transparent; }
.svc:hover::after { transform: scaleX(1); }
.svc .mark { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 1.6rem; transition: transform 0.4s var(--ease); }
.svc:hover .mark { transform: scale(1.08) rotate(-4deg); }
.svc .mark svg { width: 22px; height: 22px; }
.svc.sun { --accent: var(--sun); }
.svc.sun .mark { background: var(--sand); color: var(--sun-deep); }
.svc.teal { --accent: var(--teal); }
.svc.teal .mark { background: var(--teal-soft); color: var(--teal); }
.svc.clay { --accent: var(--clay); }
.svc.clay .mark { background: var(--clay-soft); color: var(--clay); }
.svc p { margin-top: 0.75rem; color: var(--ink-2); font-size: 0.97rem; }
.svc ul { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.svc li { position: relative; padding-left: 1.55rem; font-size: 0.93rem; color: var(--ink-2); }
.svc li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ── Feature blocks ──────────────────────────────────────────── */
.feature { border-radius: 30px; overflow: hidden; }
.feature-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch; }
.feature-copy { padding: clamp(2.6rem, 5.5vw, 4.4rem); display: flex; flex-direction: column; justify-content: center; }
.feature-copy p { margin-top: 1.4rem; max-width: 42ch; }
.feature-copy .textlink { margin-top: 2rem; align-self: flex-start; }
.feature-media { position: relative; min-height: 380px; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.feature:hover .feature-media img { transform: scale(1.05); }

.feature.ink { background: var(--teal); color: #eaf4f1; }
.feature.ink .eyebrow { color: #f3c979; }
.feature.ink .eyebrow::before { background: #f3c979; }
.feature.ink h2 { color: #fff; }
.feature.ink p { color: #c7ded9; }
.feature.ink .textlink { color: #f3c979; }

.feature.warm { background: var(--sand); }
.feature.warm .feature-grid { grid-template-columns: 0.98fr 1.02fr; }
.feature.warm .feature-media { order: -1; }
.feature.warm p { color: var(--ink-2); }

/* ── Compare slider ──────────────────────────────────────────── */
.compare-wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
/* The frame owns the aspect ratio and both shots fill it absolutely, so the
   two halves always line up no matter what the source files measure. */
.compare {
  position: relative; --pos: 50%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 36px 60px -46px rgba(21, 29, 25, 0.6);
  touch-action: pan-y;
}
.compare > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.compare .after-pane { position: absolute; inset: 0; width: var(--pos); overflow: hidden; }
.compare .after-pane img {
  position: absolute; left: 0; top: 0;
  width: var(--cmpw, 100%); height: 100%; max-width: none; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.compare .tag {
  position: absolute; top: 0.9rem; z-index: 3;
  padding: 0.32rem 0.9rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.94); color: var(--ink); backdrop-filter: blur(4px);
}
.compare .tag-before { right: 0.9rem; }
.compare .tag-after { left: 0.9rem; background: var(--sun); color: #ffffff; }
.compare .divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 2px; background: rgba(255, 255, 255, 0.95); transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(21, 29, 25, 0.12); pointer-events: none;
}
.compare .knob {
  position: absolute; top: 50%; left: var(--pos); z-index: 5;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: var(--white); color: var(--ink);
  display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 10px 26px -10px rgba(21, 29, 25, 0.7);
}
.compare .knob svg { width: 20px; height: 20px; }
.compare input[type='range'] {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.compare input[type='range']:focus-visible ~ .knob { outline: 3px solid var(--sun); outline-offset: 3px; }
.compare-hint { margin-top: 1rem; font-size: 0.82rem; color: var(--ink-3); display: flex; align-items: center; gap: 0.45rem; }
.compare-hint svg { width: 15px; height: 15px; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.gallery figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.g-a { grid-column: span 4; aspect-ratio: 16 / 9; }
.g-b { grid-column: span 2; aspect-ratio: 4 / 5; }
.g-c { grid-column: span 2; aspect-ratio: 1; }
.g-d { grid-column: span 2; aspect-ratio: 1; }
.g-e { grid-column: span 2; aspect-ratio: 1; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(14, 20, 17, 0.84));
  color: #fff; font-size: 0.87rem; font-weight: 500;
  transform: translateY(8px); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.gallery figure:hover figcaption, .gallery figure:focus-within figcaption { transform: none; opacity: 1; }
@media (hover: none) { .gallery figcaption { transform: none; opacity: 1; } }

/* ── Reels ───────────────────────────────────────────────────── */
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.reel { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: #0f1512; border: 1px solid var(--line); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.reel:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -36px rgba(21, 29, 25, 0.7); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; cursor: pointer; display: block; }
.reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1rem 0.95rem;
  background: linear-gradient(transparent, rgba(10, 14, 12, 0.9));
  color: #fff; font-size: 0.86rem; font-weight: 500;
}
.vtoggle {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(249, 252, 254, 0.9); color: var(--ink);
  opacity: 0; transition: opacity 0.3s, background 0.2s;
}
.reel:hover .vtoggle, .vtoggle:focus-visible { opacity: 1; }
@media (hover: none) { .vtoggle { opacity: 1; } }
.vtoggle svg { width: 15px; height: 15px; }
.vtoggle .ico-play { display: none; }
.vtoggle.paused { opacity: 1; }
.vtoggle.paused .ico-play { display: block; }
.vtoggle.paused .ico-pause { display: none; }

/* ── About ───────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.about-media { position: relative; }
.about-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); box-shadow: 0 36px 60px -48px rgba(21, 29, 25, 0.65); }
.about-quote {
  margin-top: 1.9rem; padding: 1.8rem 2rem;
  background: var(--sand); border-radius: var(--r);
  font-family: var(--display); font-size: 1.42rem; font-style: italic; line-height: 1.42;
  position: relative;
}
.about-quote::before {
  content: '“'; position: absolute; top: -0.15em; left: 0.5rem;
  font-family: var(--display); font-size: 4.5rem; color: rgba(47, 179, 232, 0.34); line-height: 1;
}
.about-points { display: grid; gap: 0.95rem; margin-top: 2.1rem; }
.about-points div { display: flex; gap: 0.9rem; align-items: flex-start; }
.about-points svg { width: 20px; height: 20px; flex: none; color: var(--teal); margin-top: 3px; }
.about-points span { color: var(--ink-2); font-size: 0.97rem; }

/* ── Pull quote ──────────────────────────────────────────────── */
.pullquote { background: var(--ink); color: #e9efec; border-radius: 30px; padding: clamp(2.8rem, 6vw, 5rem); text-align: center; }
.pullquote .stars { color: var(--sun-lit); letter-spacing: 0.3em; font-size: 1rem; }
.pullquote blockquote { margin: 1.6rem auto 0; max-width: 34ch; font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 500; line-height: 1.26; color: #fff; }
.pullquote cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 0.92rem; color: #9fb0aa; }
.pullquote cite b { display: block; color: #fff; font-size: 1rem; margin-bottom: 2px; }

/* ── Reviews ─────────────────────────────────────────────────── */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.review {
  margin: 0; padding: 2rem 1.8rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.review:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -38px rgba(21, 29, 25, 0.55); }
.review .stars { color: var(--sun); letter-spacing: 0.16em; font-size: 0.9rem; }
.review p { margin-top: 1.05rem; color: var(--ink-2); font-size: 0.96rem; }
.review figcaption { margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line); font-weight: 600; font-size: 0.93rem; }
.review figcaption small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; }

/* ── Contact ─────────────────────────────────────────────────── */
.contact { background: var(--white); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: start; }
.contact-rows { display: grid; gap: 0.75rem; margin-top: 2.2rem; }
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
  transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
}
a.contact-row:hover { border-color: var(--sun); background: var(--sand); transform: translateX(4px); }
.contact-row span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.contact-row b { font-weight: 600; }

.form { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; padding: clamp(1.8rem, 3.2vw, 2.5rem); border: 1px solid var(--line); border-radius: 26px; background: var(--paper); }
.form h3 { grid-column: 1 / -1; }
.field { display: grid; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.83rem; font-weight: 600; }
.field label small { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 0.97rem; color: var(--ink);
  padding: 0.82rem 0.95rem; border: 1px solid var(--line); border-radius: 13px;
  background: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(47, 179, 232, 0.24); }
.field textarea { resize: vertical; }
.field input.bad, .field textarea.bad { border-color: var(--clay); }
.form .btn { grid-column: 1 / -1; }
.form-note { grid-column: 1 / -1; font-size: 0.83rem; color: var(--ink-3); text-align: center; }
.form-msg { grid-column: 1 / -1; padding: 0.9rem 1.1rem; border-radius: 13px; background: var(--teal-soft); color: var(--teal); font-size: 0.9rem; font-weight: 500; }
.form-err { grid-column: 1 / -1; color: var(--clay); font-size: 0.88rem; font-weight: 500; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #c6d1cc; padding-block: clamp(3.2rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.6rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { width: 36px; height: 36px; }
.footer-brand b { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: #fff; }
.site-footer p { margin-top: 1.1rem; max-width: 34ch; font-size: 0.93rem; color: #94a39d; }
.footer-col h4 { margin: 0 0 1.1rem; font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sun-lit); font-weight: 600; }
.footer-col a, .footer-col span { display: block; font-size: 0.93rem; color: #c6d1cc; margin-bottom: 0.65rem; transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-base { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; font-size: 0.82rem; color: #84918b; }
.footer-base strong { color: #fff; }

.callbar { display: none; }

/* ── Reveal + stagger ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid, .feature-grid, .about, .contact-grid, .compare-wrap { grid-template-columns: 1fr; }
  .feature.warm .feature-grid { grid-template-columns: 1fr; }
  .feature-media { min-height: 300px; order: -1; }
  .services, .reviews { grid-template-columns: 1fr 1fr; }
  .reels { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-a, .g-b, .g-c, .g-d, .g-e { grid-column: span 1; aspect-ratio: 1; }
  .g-a { grid-column: span 2; aspect-ratio: 16 / 9; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .header-inner > .btn-ink { display: none; }
  .hero-media { padding: 0; }
  .hero-media .shot-sub { display: none; }
  .hero-badge { left: auto; right: 14px; top: auto; bottom: 14px; }
}

@media (max-width: 680px) {
  .services, .reviews { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .g-a { grid-column: span 1; }
  .reels { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.1rem; }
  body { padding-bottom: 76px; }
  .callbar {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(249, 252, 254, 0.95); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .hero-trust { gap: 1.4rem; }
  .hero-trust b { font-size: 1.5rem; }
  .about-quote { font-size: 1.22rem; padding: 1.5rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .hero::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==== KIT ==== */

/* ==========================================================================
   BOOKING WIZARD
   Uses the palette tokens defined at the top of this file, so it themes
   itself to whichever site it is dropped into.
   ========================================================================== */

.booking-shell {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.1rem, 3vw, 2rem);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, 0.9);
}

/* ── progress rail ─────────────────────────────────────────── */
.bk-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}

.bk-rail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px 11px;
  border-top: 3px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.bk-rail-step.is-on,
.bk-rail-step.is-done { border-top-color: var(--red); color: var(--text); }

.bk-rail-num {
  flex: none;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 0.74rem;
}

.bk-rail-step.is-on .bk-rail-num,
.bk-rail-step.is-done .bk-rail-num { background: var(--red); color: var(--black); }

.bk-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── layout ────────────────────────────────────────────────── */
.bk-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}

.bk-step { display: grid; gap: 1rem; }
.bk-step h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }

.bk-sub {
  margin: 0.4rem 0 -0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk-note { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* ── service cards ─────────────────────────────────────────── */
.bk-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.bk-service {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  text-align: left;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}

.bk-service:hover { border-color: var(--red); transform: translateY(-2px); }

.bk-service.is-on {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 13%, var(--panel-2));
  box-shadow: inset 0 0 0 1px var(--red);
}

.bk-service strong { font-size: 1.02rem; color: #fff; }
.bk-service span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.bk-service b { margin-top: 4px; color: var(--red-lit); font-size: 0.92rem; }

.bk-flag {
  position: absolute;
  top: -9px;
  right: 12px;
  background: var(--red);
  color: var(--black);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── chips ─────────────────────────────────────────────────── */
.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bk-chip {
  display: grid;
  gap: 1px;
  padding: 9px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.bk-chip small { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.bk-chip:hover { border-color: var(--red); }

.bk-chip.is-on {
  border-color: var(--red);
  background: var(--red);
  color: var(--black);
}

.bk-chip.is-on small { color: color-mix(in srgb, var(--black) 72%, transparent); }

/* ── fields ────────────────────────────────────────────────── */
.bk-field { display: grid; gap: 6px; }
.bk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bk-full { grid-column: 1 / -1; }

.bk-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk-label small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.78rem; opacity: 0.8; }

.bk-field input,
.bk-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.bk-field textarea { resize: vertical; min-height: 84px; }

.bk-field input:focus,
.bk-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 26%, transparent);
}

.bk-field input.is-bad { border-color: #e2756f; box-shadow: 0 0 0 3px rgba(226, 117, 111, 0.22); }
.bk-field input::placeholder,
.bk-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bk-field input[type='date'] { color-scheme: dark; }

.bk-stepper {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-2);
  overflow: hidden;
}

.bk-stepper button {
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.bk-stepper button:hover { background: var(--red); color: var(--black); }
.bk-stepper output { text-align: center; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── summary rail ──────────────────────────────────────────── */
.bk-summary {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.bk-sum-title {
  margin: 0 0 2px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red-lit);
}

.bk-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}

.bk-sum-row span { color: var(--muted); flex: none; }
.bk-sum-row strong { text-align: right; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

.bk-estimate {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
}

.bk-estimate span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bk-estimate strong { font-size: 1.1rem; color: #fff; }
.bk-estimate small { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }

/* ── nav + errors ──────────────────────────────────────────── */
.bk-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1.2rem; flex-wrap: wrap; }
.bk-nav .button { margin: 0; }

.bk-error {
  margin: 0.8rem 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(226, 117, 111, 0.14);
  border: 1px solid rgba(226, 117, 111, 0.4);
  color: #ffd9d6;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── confirmation ──────────────────────────────────────────── */
.bk-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: clamp(1.4rem, 5vw, 3rem) 1rem; }

.bk-done svg {
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 20%, transparent);
  border: 1px solid var(--red);
  fill: none;
  stroke: var(--red-lit);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bk-done h3 { font-size: clamp(1.4rem, 4vw, 2rem); }
.bk-done p { margin: 0; max-width: 46ch; color: var(--muted); }

.bk-ref {
  display: inline-grid;
  gap: 2px;
  margin-top: 4px !important;
  padding: 11px 24px;
  border-radius: 11px;
  border: 1px dashed var(--red);
  background: color-mix(in srgb, var(--red) 11%, transparent);
}

.bk-ref span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bk-ref strong { font-size: 1.3rem; color: #fff; font-family: var(--display); letter-spacing: 0.04em; }

.bk-done-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .bk-body { grid-template-columns: 1fr; }
  .bk-summary { position: static; order: -1; }
  .bk-rail-label { display: none; }
  .bk-rail { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .bk-rail-step { justify-content: center; padding: 9px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-service, .bk-chip, .bk-stepper button, .bk-field input, .bk-field textarea { transition: none; }
}

/* ==========================================================================
   BOOKING WIZARD — LIGHT TEMPLATE SHIM
   The wizard rules below are written against the dark template's token
   names. Rather than fork them, remap those names to this site's palette
   inside the booking block, then fix the few places that assumed a dark
   ground.
   ========================================================================== */

.booking-shell {
  --black: #ffffff;        /* the colour that sits ON the accent */
  --panel: var(--white);
  --panel-2: var(--paper-2);
  --red: var(--sun);
  --red-lit: var(--sun-deep);
  --text: var(--ink);
  --muted: var(--ink-2);
  --line-soft: var(--line);
  --radius: 16px;
  --header-h: 86px;

  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 3vw, 2.2rem);
  box-shadow: 0 30px 70px -56px rgba(13, 63, 88, 0.55);
}

/* Headings inside the wizard follow the site's display face. */
.booking-shell .bk-step h3 { font-family: var(--display); font-weight: 600; }

/* Ink, not white, on a light ground. */
.booking-shell .bk-service strong,
.booking-shell .bk-estimate strong,
.booking-shell .bk-ref strong { color: var(--ink); }

.booking-shell .bk-rail-step.is-on,
.booking-shell .bk-rail-step.is-done { color: var(--ink); }

.booking-shell .bk-error {
  background: #fdecea;
  border-color: #f1b7b0;
  color: #8c2f24;
}

.booking-shell .bk-field input[type='date'] { color-scheme: light; }

.booking-shell .bk-service:hover { border-color: var(--sun); }
.booking-shell .bk-service.is-on { box-shadow: inset 0 0 0 1px var(--sun); }

.booking-shell .bk-chip.is-on { color: #fff; }
.booking-shell .bk-chip.is-on small { color: rgba(255, 255, 255, 0.78); }

.booking-shell .bk-stepper button:hover { background: var(--sun); color: #fff; }

.booking-shell .bk-done svg { stroke: var(--sun-deep); }

/* The wizard's own buttons come from the site's .btn system, so they need
   no colour work here — just room to breathe. */
.booking-shell .bk-nav .btn { margin: 0; }

/* ==========================================================================
   HOME HARMONY — components the base template doesn't carry
   ========================================================================== */

/* The brand mark here is a wide lockup, not a small square icon. */
.brand img {
  width: auto;
  height: 54px;
  max-width: min(58vw, 290px);
  object-fit: contain;
  transition: opacity 0.3s var(--ease);
}
.brand:hover img { transform: none; opacity: 0.82; }

.footer-brand img { width: auto; height: 64px; max-width: 280px; object-fit: contain; }

/* ── a second row of before/after sliders ─────────────────────────── */
.compare-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

.compare-cap {
  margin: 0.85rem 0 0;
  color: var(--ink-2);
  font-size: 0.94rem;
}

/* ── why-us promises ──────────────────────────────────────────────── */
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.promise {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.promise svg {
  width: 30px;
  height: 30px;
  color: var(--sun-deep);
  margin-bottom: 0.2rem;
}

.promise h3 { font-size: 1.14rem; }
.promise p { margin: 0; color: var(--ink-2); font-size: 0.96rem; }

/* ── service area list ────────────────────────────────────────────── */
.area-list {
  list-style: none;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-list li {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--teal);
}

/* The warm feature band runs on a tinted ground, so lift the chips off it. */
.feature.warm .area-list li { background: var(--white); }

/* ── work page ────────────────────────────────────────────────────── */
.page-head { padding-block: clamp(2.6rem, 6vw, 4.5rem) 0; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }

.crumb { margin-top: 1.8rem; }
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
}
.crumb svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.crumb a:hover { color: var(--ink); }
.crumb a:hover svg { transform: translateX(-4px); }

.compare-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

/* One ratio across the trio so the row reads as a set. Square is the kindest
   compromise: the pair is portrait and the shelf shot is landscape. */
.compare-trio .compare { aspect-ratio: 1 / 1; }
.compare-trio .compare img { width: 100%; height: 100%; object-fit: cover; }

.work-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.3rem);
}

.work-wall figure {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

/* height:auto is required here — these imgs carry width/height attributes,
   and aspect-ratio is ignored while the height resolves from the attribute. */
.work-wall img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
}

.work-wall figcaption { font-size: 0.9rem; color: var(--ink-2); }

/* "See all our work" link under the home page gallery */
.gallery-more { margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* ── three reels instead of four ──────────────────────────────────── */
.reels.reels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .reels.reels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
}

/* ── wide contact strip under the wizard ──────────────────────────── */
.contact-rows-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
}

/* Stacked, so a long email gets the whole column width. The row must stretch
   its children — a flex-start column sizes them to their content, which
   leaves a long address nothing to wrap against and it spills out. */
.contact-rows-wide .contact-row {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}

/* break-word (not anywhere) so the <wbr> after the @ is preferred over
   splitting the address mid-word; anywhere is the backstop on tiny screens. */
.contact-rows-wide .contact-row b {
  width: 100%;
  min-width: 0;
  font-size: 0.95rem;
  text-align: left;
  overflow-wrap: break-word;
}

@media (max-width: 380px) {
  .contact-rows-wide .contact-row b { overflow-wrap: anywhere; }
}

/* ==========================================================================
   AGENCY PREVIEW POPUP — remove with its markup and script once they sign
   ========================================================================== */

.agency-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(14, 26, 33, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.agency-pop[hidden] { display: none; }
.agency-pop.is-open { opacity: 1; }

.agency-card {
  position: relative;
  width: min(430px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
  box-shadow: 0 40px 90px -40px rgba(13, 63, 88, 0.5);
  transform: translateY(12px);
  transition: transform 0.32s var(--ease);
}

.agency-pop.is-open .agency-card { transform: none; }

.agency-card img { width: auto; height: 68px; max-width: 230px; margin: 0 auto 0.9rem; object-fit: contain; }
.agency-card h2 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.agency-card p { margin: 0 0 0.8rem; color: var(--ink-2); font-size: 0.96rem; }

.agency-note {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem !important;
}

.agency-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1rem 0 0.4rem; }

.agency-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  border: 0;
  background: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.agency-close:hover { color: var(--ink); }

.agency-dismiss {
  margin-top: 0.7rem;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.agency-dismiss:hover { color: var(--ink); }