/* Polish layer: calmer type scale, contact/location and visit-form fixes, and small
   Apple-style motion touches. Loaded last so it settles earlier per-breakpoint sizes. */

:root { --p-spring: cubic-bezier(.32, .72, 0, 1); --p-ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Type scale ----------
   One fluid ramp shared by every page, sized so page titles sit comfortably beside the logo. */
.hero-copy h1, .xseed-hero h1 {
  font-size: clamp(2.2rem, 1.45rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 24px;
  text-wrap: balance;
}
.section h2, .cta h2, .docs-grid h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}
.prose h2 { margin-bottom: 22px; }
.hero-copy .hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.7; }
.contact-panels h3 {
  font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  letter-spacing: .01em;
  margin: 0 0 8px;
}
.visit-form h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin-bottom: 24px; }

/* ---------- Contact panels ---------- */
.contact-panels p { font-size: 1rem; }
.phone-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.phone-stack a { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Location + embedded map ---------- */
.location-grid address a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s; }
.location-grid address a:hover { border-bottom-color: currentColor; }
.map-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--blue);
  box-shadow: 0 1px 2px rgba(23, 52, 58, .06), 0 24px 60px rgba(23, 52, 58, .12);
  isolation: isolate;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-open {
  position: absolute; right: 14px; top: 14px; z-index: 1;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-size: 1.35rem; text-decoration: none;
  box-shadow: 0 6px 18px rgba(23, 52, 58, .22);
  transition: transform .35s var(--p-spring), box-shadow .35s var(--p-spring);
}
.map-open:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(23, 52, 58, .28); }
.map-open:active { transform: scale(.96); transition-duration: .12s; }
.map-open:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* ---------- Visit form ---------- */
.visit-form label { display: grid; gap: 8px; margin-bottom: 20px; font-size: .82rem; }
.visit-form .field-label { color: var(--ink); display: inline-flex; align-items: baseline; gap: 3px; line-height: 1.3; }
.visit-form .req { color: #8d6f3a; }
.form-pair { align-items: start; column-gap: 18px; }
.visit-form input, .visit-form textarea {
  min-height: 48px; padding: 12px 14px; border-radius: 10px; font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.visit-form input[type="date"] { appearance: none; -webkit-appearance: none; }
.visit-form input:focus, .visit-form textarea:focus {
  outline: none; border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px rgba(21, 63, 67, .14);
}
.visit-form button { margin-top: 6px; background: var(--ink); color: var(--white); }
.visit-form button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) {
  .form-pair { grid-template-columns: 1fr; }
  .visit-form { padding: 24px 20px; }
}

/* ---------- Header: gentle active state on scroll (motion.js toggles .is-scrolled) ---------- */
.site-header::after {
  content: ''; position: absolute; inset: auto 0 -1px; height: 18px; pointer-events: none;
  background: linear-gradient(rgba(23, 52, 58, .07), transparent);
  transform: translateY(100%); opacity: 0; transition: opacity .4s ease;
}
.site-header.is-scrolled::after { opacity: 1; }
.brand img { transform-origin: 0 50%; transition: transform .5s var(--p-spring); }
.site-header.is-scrolled .brand img { transform: scale(.92); }

/* Desktop dropdown: settles in with a spring rather than a linear fade. */
.nav-sub {
  transform-origin: 50% 0;
  transform: translate(-50%, 8px) scale(.97);
  transition: opacity .22s ease, transform .38s var(--p-spring), visibility 0s .38s;
}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub {
  transform: translate(-50%, 0) scale(1);
  transition: opacity .22s ease, transform .38s var(--p-spring);
}

/* Mobile menu panel eases open (runs only when motion is welcome). */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav[open] > nav { animation: p-drop .42s var(--p-spring) both; transform-origin: 100% 0; }
}
@keyframes p-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- Material entrance for the map and form cards (motion.js adds .m-material) ---------- */
.m-material { transition: opacity .7s ease var(--m-delay, 0s), transform 1s var(--p-ease-out) var(--m-delay, 0s); }
.m-material:not(.is-in) { opacity: 0; transform: translateY(24px) scale(.965); }

@media (prefers-reduced-motion: reduce) {
  .brand img, .nav-sub, .map-open { transition: opacity .2s ease !important; }
  .site-header.is-scrolled .brand img { transform: none; }
  .nav-sub, .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { transform: translate(-50%, 0); }
  .m-material { transition: opacity .45s ease !important; }
  .m-material:not(.is-in) { transform: none; }
}
@media print {
  .m-material { opacity: 1 !important; transform: none !important; }
  .map-frame iframe { display: none; }
}

/* ---------- XSEED method pair: logo tile + five-step circle ----------
   Two identical warm-paper cards (same size, radius, border, shadow) so neither asset looks pasted on.
   The circle is multiplied onto the card, so its white ground takes the card tone while the ink and red stay.
   The circle never renders wider than its native 378px; the logo stays a square inside its card. */
.xseed-diagrams {
  --xc-pad: clamp(18px, 2.4vw, 28px);
  display: grid; grid-template-columns: repeat(2, minmax(0, calc(378px + 2 * var(--xc-pad))));
  justify-content: center; align-items: stretch; gap: clamp(16px, 2.6vw, 32px); margin-top: 48px;
}
.xseed-diagrams .xseed-card {
  margin: 0; width: 100%; max-width: none; box-sizing: border-box;
  aspect-ratio: 434 / 356; padding: var(--xc-pad);
  display: grid; place-items: center; overflow: hidden;
  background: #fbf8f1; border: 1px solid #e4ddcc; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(23, 52, 58, .05), 0 18px 44px rgba(23, 52, 58, .08);
}
.xseed-diagrams .xseed-card img { display: block; min-width: 0; min-height: 0; }
.xseed-diagrams .cycle-card .full-cycle {
  width: 100%; height: 100%; max-width: 378px; max-height: 300px; aspect-ratio: auto;
  object-fit: contain; background: transparent; mix-blend-mode: multiply;
  filter: brightness(1.04); /* lifts the artwork's faint off-white box to pure white so it fully dissolves */
}
.xseed-diagrams .logo-card .xseed-bubble {
  height: 86%; width: auto; max-width: 100%; max-height: 258px; aspect-ratio: 1; /* slightly inset: the solid red reads heavier than line art */
  object-fit: contain; border-radius: 14px;
}
@media (max-width: 600px) {
  .xseed-diagrams { grid-template-columns: minmax(0, calc(378px + 2 * var(--xc-pad))); gap: 16px; margin-top: 36px; }
  .xseed-diagrams .cycle-card { padding: var(--xc-pad); }
  .xseed-diagrams img:first-child { max-width: 100%; margin: 0; }
}

/* Footer return control: keep the direction visible at a glance. */
.footer-base a[href="#top"] {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.footer-base a[href="#top"]::before {
  content: '↑';
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(-.04em);
}