/* Valley of Peace — premium design layer.
   Sits on top of the compiled Next/Tailwind build. Loaded last, unlayered, so it wins.
   World: quiet resort-editorial. Limestone paper, deep forest ink, light serif display,
   hairlines instead of cards, photography given room. One motion motif: the horizon opening. */

:root {
  --color-forest: #2c5620;
  --color-sage: #3f7d25;
  --color-ink: #1b2419;
  --color-stone: #f4f1e9;
  --color-mist: #ece8dd;
  --color-sky-soft: #e6eef0;
  --color-bronze: #7d6230;
  --color-gold: #b8975a;
  --pine: #16301a;
  --paper: #f4f1e9;
  --paper-deep: #ebe6da;
  --cream: #f6f1e4;
  --hair: rgba(27, 36, 25, 0.12);
  --hair-strong: rgba(27, 36, 25, 0.22);
  --muted: #535c50;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --radius-lg: 4px;
  --radius-2xl: 6px;
  --radius-3xl: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: #b9b39f var(--paper);
  accent-color: var(--color-forest);
}

/* ---------- Canvas ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  caret-color: var(--color-forest);
}
/* fine paper grain, fixed so it never repaints on scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > div { position: relative; z-index: 1; }

::selection { background: var(--color-forest); color: var(--cream); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #c4bda9; border: 3px solid var(--paper); border-radius: 12px; }
::-webkit-scrollbar-thumb:hover { background: #a39c86; }

:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 3px;
  border-radius: 2px;
}

a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Kill decorative blur blobs and gradient washes: they read as template, not place. */
main .absolute[class*="blur-"],
main .pointer-events-none.absolute.rounded-full,
main .absolute.rounded-full[class*="shadow-"] { display: none !important; }
.hero-glow, .section-tint { background: none !important; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-feature-settings: "liga", "dlig";
}
main h1 {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem) !important;
  line-height: 1.02 !important;
  font-weight: 400 !important;
  color: var(--pine) !important;
}
main h2[class*="text-3xl"], main h2[class*="text-4xl"] {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem) !important;
  line-height: 1.06 !important;
  font-weight: 400 !important;
  color: var(--pine) !important;
}
main h2[class*="text-2xl"], main h3[class*="text-2xl"] {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--pine) !important;
}
main h3[class*="text-lg"] {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: var(--pine) !important;
}
main p { text-wrap: pretty; }
main p[class*="text-base"], main p[class*="md:text-lg"] {
  font-size: 1.0625rem !important;
  line-height: 1.72 !important;
  color: var(--muted) !important;
  max-width: 64ch;
}
main [class*="text-sm"][class*="color-ink"] { color: var(--muted) !important; }
/* more air above headings than below */
main .space-y-3 > h2 + p, main .space-y-3 > h2 + p { margin-top: 1.1rem !important; }

/* Eyebrow labels over headings: the heading carries its own weight. */
main p[class~="uppercase"][class*="color-bronze"],
main div[class~="uppercase"][class*="color-bronze"]:has(> span:only-child) { display: none !important; }

/* ---------- Header ---------- */
header.sticky {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  border-bottom: 1px solid transparent !important;
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  transition: border-color 0.4s var(--ease-soft), background-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
header.sticky.is-scrolled {
  border-bottom-color: var(--hair) !important;
  box-shadow: 0 8px 24px -18px rgba(22, 48, 26, 0.35);
}
header.sticky > div { max-width: 76rem !important; padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
header nav.absolute { gap: 0.25rem !important; }
header nav.absolute a {
  position: relative;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: var(--muted) !important;
  border-radius: 0 !important;
  transition: color 0.25s var(--ease-soft);
}
header nav.absolute a::before { display: none !important; }
header nav.absolute a::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
header nav.absolute a:hover { color: var(--pine) !important; }
header nav.absolute a:hover::after { transform: scaleX(1); transform-origin: left; }
header nav.absolute a:not([class*="color-ink"]) { color: var(--pine) !important; }
header nav.absolute a:not([class*="color-ink"])::after { transform: scaleX(1); }

/* mobile menu */
header details > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 2px !important;
  border-color: var(--hair-strong) !important;
  letter-spacing: 0.18em !important;
  color: var(--pine) !important;
}
header details > summary::-webkit-details-marker { display: none; }
header details > div {
  border-radius: 6px !important;
  border: 1px solid var(--hair) !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 48px -20px rgba(22, 48, 26, 0.35) !important;
  transform-origin: top right;
}
header details[open] > div { animation: vop-menu 0.35s var(--ease-out) both; }
header details nav a { border-radius: 3px !important; border: 0 !important; font-size: 1rem; }
header details nav a[class*="font-semibold"] { background: var(--paper-deep) !important; }
@keyframes vop-menu { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* ---------- Buttons ---------- */
a[class~="rounded-full"][class~="uppercase"],
button[class~="rounded-full"][class~="uppercase"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 2px !important;
  letter-spacing: 0.2em !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 1rem 1.6rem !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft);
}
header a[class~="rounded-full"][class~="uppercase"] { padding: 0.8rem 1.25rem !important; }
a[class~="rounded-full"][class~="uppercase"][class*="bg-[color:var(--color-forest)]"],
button[class~="rounded-full"][class~="uppercase"] { background: var(--pine) !important; color: var(--cream) !important; }
a[class~="rounded-full"][class~="uppercase"]::after,
button[class~="rounded-full"][class~="uppercase"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-forest);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"])::after { background: var(--pine); }
a[class~="rounded-full"][class~="uppercase"]:hover::after,
button[class~="rounded-full"][class~="uppercase"]:hover::after { transform: scaleY(1); }
a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"]) { border-color: var(--hair-strong) !important; color: var(--pine) !important; }
a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"]):hover { color: var(--cream) !important; border-color: var(--pine) !important; background: transparent !important; }
a[class~="rounded-full"][class~="uppercase"]:active,
button[class~="rounded-full"][class~="uppercase"]:active { transform: translateY(1px) !important; }

/* "Back to" links */
main a[class~="uppercase"][class*="tracking-[0.3em]"]:not([class~="rounded-full"]) {
  display: inline-flex; gap: 0.5rem; color: var(--muted) !important; transition: color 0.25s, gap 0.35s var(--ease-out);
}
main a[class~="uppercase"][class*="tracking-[0.3em]"]:not([class~="rounded-full"]):hover { color: var(--pine) !important; }

/* ---------- Sections & surfaces ---------- */
.section-padding { padding: clamp(4.5rem, 3rem + 6vw, 8.5rem) 1.5rem !important; }
.section-divider::before { width: min(100% - 3rem, 76rem) !important; background: var(--hair) !important; }
main .max-w-6xl { max-width: 76rem !important; }

/* Glass cards that only frame a photo: drop the frame, let the photo stand. */
.glass-panel:has(> img), .glass-panel:has(> .relative > img) {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
}
.glass-panel > img, main img[class*="rounded-2xl"] { border-radius: 4px !important; }
main section .glass-panel > img[class*="h-[320px]"],
main section .glass-panel > img[class*="h-[340px]"] { height: clamp(320px, 38vw, 520px) !important; }

/* Remaining glass panels become quiet paper sheets. */
.glass-panel {
  background: color-mix(in srgb, #fff 55%, var(--paper)) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -48px rgba(22, 48, 26, 0.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Big rounded white slabs (product/post heroes and bodies): flatten into the page. */
main div[class*="rounded-[36px]"], main div[class*="rounded-[32px]"] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
main div[class*="rounded-[32px]"] { padding-top: 0 !important; }
main div[class*="rounded-[32px]"] > .relative { max-width: 70rem; }
main div[class*="rounded-[32px]"] h3[id] {
  padding-top: 2.5rem;
  margin-top: 1.5rem !important;
  border-top: 1px solid var(--hair);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem) !important;
  font-weight: 400 !important;
  text-transform: none;
}
main div[class*="rounded-[32px]"] h3[id]:first-child { border-top: 0; padding-top: 0; margin-top: 0 !important; }
main div[class*="rounded-[32px]"] .grid > div { border-radius: 4px !important; box-shadow: none !important; background: var(--paper-deep) !important; }
main div[class*="rounded-[32px]"] .grid img { transition: transform 1.2s var(--ease-out); }
main div[class*="rounded-[32px]"] .grid > div:hover img { transform: scale(1.04); }

/* Spec pairs (Lot Size: / value) — paired by premium.js */
main p.vop-spec-label {
  margin-top: 1.75rem !important;
  font-family: var(--font-body);
  font-size: 0.72rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-bronze) !important;
}
main p.vop-spec-label + p { margin-top: 0.35rem !important; color: var(--color-ink) !important; }

/* Post meta chips (date, author) */
main div[class~="uppercase"][class*="color-bronze"] > span {
  border-radius: 2px !important;
  border-color: var(--hair-strong) !important;
  background: transparent !important;
  color: var(--muted);
}

/* ---------- Home hero: the valley, full bleed ---------- */
.hero-glow {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--header-h)), 900px);
  padding: 0 1.5rem clamp(3rem, 2rem + 5vw, 6.5rem) !important;
  overflow: hidden;
  color: var(--cream);
}
.hero-glow > .grid { position: static !important; z-index: auto !important; display: block !important; width: 100%; max-width: 76rem !important; }
.hero-glow > .grid > .relative { position: absolute !important; inset: 0; z-index: -2; }
.hero-glow .glass-panel {
  position: absolute !important;
  inset: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #3b5a32 url("/assets/vop/images/vop-hero-valley.webp") center 42% / cover no-repeat !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (max-width: 760px) {
  .hero-glow .glass-panel { background-image: url("/assets/vop/images/vop-hero-valley-m.webp") !important; background-position: 30% 40% !important; }
}
.hero-glow .glass-panel > img { display: none !important; }
.hero-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 22, 10, 0.92) 0%, rgba(12, 22, 10, 0.72) 30%, rgba(12, 22, 10, 0.25) 62%, rgba(12, 22, 10, 0.18) 100%),
    linear-gradient(to right, rgba(12, 22, 10, 0.55), transparent 65%);
}
.hero-glow .fade-up:not(.glass-panel) { max-width: 44rem; position: relative; }
.hero-glow h1 {
  color: var(--cream) !important;
  text-transform: lowercase;
  font-size: clamp(3.1rem, 1.8rem + 6vw, 6.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.02em;
  font-weight: 300 !important;
}
.hero-glow h1::first-letter { text-transform: uppercase; }
.hero-glow h1 + p {
  color: rgba(246, 241, 228, 0.92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem) !important;
  max-width: 34rem;
}
.hero-glow a[class~="rounded-full"][class~="uppercase"][class*="bg-[color:var(--color-forest)]"] { background: var(--cream) !important; color: var(--pine) !important; }
.hero-glow a[class~="rounded-full"][class~="uppercase"][class*="bg-[color:var(--color-forest)]"]::after { background: #fff; }
.hero-glow a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"]) { color: var(--cream) !important; border-color: rgba(246, 241, 228, 0.5) !important; }
.hero-glow a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"])::after { background: rgba(246, 241, 228, 0.16); }
.hero-glow a[class~="rounded-full"][class~="uppercase"]:not([class*="bg-[color:var(--color-forest)]"]):hover { border-color: var(--cream) !important; }

/* ---------- Pillars: from icon cards to an editorial index ---------- */
main .grid:has(> .glass-panel > .flex > div > img) {
  gap: 0 !important;
  border-top: 1px solid var(--hair-strong);
}
@media (min-width: 1280px) {
  main .grid:has(> .glass-panel > .flex > div > img) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
main .glass-panel:has(> .flex > div > img) {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2rem 1.5rem 2.5rem 0 !important;
  transform: none !important;
}
@media (min-width: 768px) {
  main .glass-panel:has(> .flex > div > img) + .glass-panel:has(> ul) { padding-left: 1.5rem !important; border-left: 1px solid var(--hair) !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  main .glass-panel:has(> .flex > div > img):nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  main .glass-panel:has(> .flex > div > img):nth-child(n+3) { border-top: 1px solid var(--hair) !important; }
}
main .glass-panel:has(> .flex > div > img) > .flex { flex-direction: column; align-items: flex-start !important; gap: 1.25rem !important; }
main .glass-panel:has(> .flex > div > img) > .flex > div:first-child {
  width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important;
  padding: 0 !important; justify-content: flex-start !important;
}
main .glass-panel:has(> .flex > div > img) > .flex img { width: 32px; height: 32px; }
main .glass-panel:has(> .flex > div > img) h3 { font-size: 1.45rem !important; min-height: 2.4em; }
main .glass-panel:has(> .flex > div > img) ul { gap: 0 !important; margin-top: 1rem !important; }
main .glass-panel:has(> .flex > div > img) li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.925rem;
  line-height: 1.45;
  color: var(--muted);
}
main .glass-panel:has(> .flex > div > img) li > span:first-child { display: none; }

/* 5-fundamentals ticker strip */
.logo-ticker__label { font-family: var(--font-body); letter-spacing: 0.02em; color: var(--muted); }

/* ---------- Story cards (updates) ---------- */
main .group[class*="overflow-hidden"] {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: block;
}
main .group[class*="overflow-hidden"] > img,
main .group[class*="overflow-hidden"] > div:first-child:has(img) {
  border-radius: 4px !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  clip-path: inset(0 round 4px);
}
main .group[class*="overflow-hidden"] img {
  transition: transform 1.4s var(--ease-out), filter 0.6s var(--ease-soft) !important;
  filter: saturate(0.9);
}
main .group[class*="overflow-hidden"]:hover img { transform: scale(1.045) !important; filter: saturate(1.05); }
main .group[class*="overflow-hidden"] > div:last-child { padding: 1.1rem 0 0 !important; }
main .group[class*="overflow-hidden"] h3 {
  display: inline;
  margin: 0 !important;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease-out);
  padding-bottom: 2px;
}
main .group[class*="overflow-hidden"]:hover h3,
main .group[class*="overflow-hidden"]:focus-visible h3 { background-size: 100% 1px; }
main .grid:has(> .group) { column-gap: 2rem !important; row-gap: 3rem !important; }

/* ---------- Testimonial ---------- */
main div[class*="bg-[color:var(--color-sky-soft)]"] {
  background: var(--pine) !important;
  border-radius: 6px !important;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  align-items: center;
}
main div[class*="bg-[color:var(--color-sky-soft)]"] h2 { color: rgba(246, 241, 228, 0.7) !important; font-size: 1.1rem !important; font-family: var(--font-body); letter-spacing: 0.02em; font-weight: 500 !important; }
main div[class*="bg-[color:var(--color-sky-soft)]"] h2 + p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.05rem) !important;
  line-height: 1.35 !important;
  color: var(--cream) !important;
  max-width: 34ch;
}
main div[class*="bg-[color:var(--color-sky-soft)]"] p[class*="font-semibold"] { color: var(--color-gold) !important; letter-spacing: 0.04em; font-weight: 500 !important; }
main div[class*="bg-[color:var(--color-sky-soft)]"] img { border-radius: 4px !important; }

/* ---------- Team ---------- */
main img[src*="-min.jpg"], main img[src*="DANOY"] { transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease-soft); filter: grayscale(0.25); }
main div:hover > img[src*="-min.jpg"], main div:hover > img[src*="DANOY"] { transform: scale(1.03); filter: grayscale(0); }

/* ---------- Forms ---------- */
main input, main textarea, main select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair-strong) !important;
  border-radius: 0 !important;
  padding: 0.9rem 0.1rem !important;
  font-size: 1rem !important;
  color: var(--color-ink);
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s;
}
main input::placeholder, main textarea::placeholder { color: #6e7569; opacity: 1; }
main input:focus, main textarea:focus, main select:focus {
  outline: none;
  border-bottom-color: var(--color-forest) !important;
  background: linear-gradient(to top, rgba(44, 86, 32, 0.05), transparent 60%) !important;
}
main input:focus-visible, main textarea:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--color-forest); }
main form button { margin-top: 0.75rem; }

/* ---------- Footer ---------- */
footer {
  background: var(--paper-deep) !important;
  border-top: 1px solid var(--hair) !important;
  position: relative;
  z-index: 1;
}
footer > div { max-width: 76rem !important; padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem) !important; }
footer p[class~="uppercase"] { color: var(--color-bronze) !important; letter-spacing: 0.22em !important; font-size: 0.68rem !important; }
footer a:not([aria-label]) { position: relative; color: var(--color-ink); transition: color 0.25s; }
footer a:not([aria-label]):hover { color: var(--color-forest); text-decoration: underline; }
footer a[aria-label] { border-radius: 2px !important; transform: none !important; }
footer a[aria-label]:hover { background: var(--pine) !important; color: var(--cream) !important; border-color: var(--pine) !important; }

/* =========================================================
   Motion. One motif: the horizon opens.
   Hero: the valley unveils from a thin horizon band, then settles.
   Photos below: the same horizon reveal, smaller, as they arrive.
   Lists that appear as lists stagger. Nothing else moves.
   ========================================================= */
.fade-up, .hero-float { animation: none !important; }

@keyframes vop-horizon {
  from { clip-path: inset(46% 0 46% 0); transform: scale(1.14); }
  60% { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes vop-rise {
  from { opacity: 0; transform: translateY(0.6em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes vop-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-glow .glass-panel { animation: vop-horizon 2.2s var(--ease-out) both !important; will-change: clip-path, transform; }
  .hero-glow .fade-up:not(.glass-panel) > * { animation: vop-rise 1.1s var(--ease-out) both; }
  .hero-glow .fade-up:not(.glass-panel) > :nth-child(1) { animation-delay: 0.7s; }
  .hero-glow .fade-up:not(.glass-panel) > :nth-child(2) { animation-delay: 0.85s; }
  .hero-glow .fade-up:not(.glass-panel) > :nth-child(3) { animation-delay: 1s; }
  .hero-glow .fade-up:not(.glass-panel) > :nth-child(4) { animation-delay: 1.15s; }
  .hero-glow::after { animation: vop-fade 1.6s var(--ease-soft) 0.3s both; }

  /* premium.js tags these after hydration; untagged content is always visible */
  [data-vop-reveal="photo"] { clip-path: inset(18% 0 18% 0 round 4px); opacity: 0.001; transition: clip-path 1.3s var(--ease-out), opacity 0.6s var(--ease-soft); }
  [data-vop-reveal="photo"] > img { transform: scale(1.1); transition: transform 1.8s var(--ease-out); }
  [data-vop-reveal="photo"].is-in { clip-path: inset(0 0 0 0 round 4px); opacity: 1; }
  [data-vop-reveal="photo"].is-in > img { transform: scale(1); }

  [data-vop-reveal="item"] { opacity: 0.001; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  [data-vop-reveal="item"].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-vop-reveal] { transition: opacity 0.4s linear; }
  .hero-glow .fade-up:not(.glass-panel) > * { animation: vop-fade 0.6s linear both; }
}

/* split text + photo sections: text sits on the photo's centre line */
main section > .grid:has(> .glass-panel > img) { align-items: center; }

/* ---------- Small screens ---------- */
@media (max-width: 520px) {
  header a[class~="rounded-full"][class~="uppercase"] { display: none !important; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .section-padding { padding: 4rem 1.25rem !important; }
  .hero-glow { min-height: min(calc(92svh - var(--header-h)), 720px); padding-bottom: 2.75rem !important; }
  .hero-glow h1 { font-size: clamp(2.7rem, 11vw, 3.6rem) !important; }
  main .glass-panel:has(> .flex > div > img) { padding-right: 0 !important; }
  main .glass-panel:has(> .flex > div > img) h3 { min-height: 0; }
  main div[class*="bg-[color:var(--color-sky-soft)]"] { padding: 2rem 1.5rem !important; }
  header a[class~="rounded-full"][class~="uppercase"] { padding: 0.7rem 0.9rem !important; letter-spacing: 0.14em !important; }
}

/* =========================================================
   Icons — one family everywhere: Phosphor Light (thin, even stroke, pairs with the serif).
   Drawn as masks so they take the text colour of wherever they sit.
   ========================================================= */
.vop-i::before, main a[href$=".pdf"]::before, main a[href$=".pdf"]::after,
footer a[aria-label]::before, header details > summary::before,
main div[class*="bg-[color:var(--color-sky-soft)]"] h2::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.vop-i { display: flex !important; align-items: flex-start; gap: 0.7rem; }
.vop-i::before { margin-top: 0.15em; color: var(--color-forest); opacity: 0.85; }
.vop-i--pin { --ico: url("/assets/vop/icons/ph/map-pin.svg"); }
.vop-i--mail { --ico: url("/assets/vop/icons/ph/envelope-simple.svg"); }
.vop-i--phone { --ico: url("/assets/vop/icons/ph/phone.svg"); }
.vop-i--clock { --ico: url("/assets/vop/icons/ph/clock.svg"); }
.vop-i--none::before { visibility: hidden; }

/* back links */
.vop-i--back { --ico: url("/assets/vop/icons/ph/arrow-left.svg"); display: inline-flex !important; align-items: center; }
.vop-i--back::before { margin-top: 0; color: inherit; transition: transform 0.4s var(--ease-out); }
.vop-i--back:hover::before { transform: translateX(-4px); }

/* footer socials: swap the old glyphs for the same family */
footer a[aria-label] > svg { display: none !important; }
footer a[aria-label]::before { width: 18px; height: 18px; }
footer a[aria-label="Facebook"] { --ico: url("/assets/vop/icons/ph/facebook-logo.svg"); }
footer a[aria-label="Twitter"] { --ico: url("/assets/vop/icons/ph/x-logo.svg"); }
footer a[aria-label="LinkedIn"] { --ico: url("/assets/vop/icons/ph/linkedin-logo.svg"); }

/* mobile menu trigger */
header details > summary { display: inline-flex !important; align-items: center; gap: 0.5rem; --ico: url("/assets/vop/icons/ph/list.svg"); }
header details[open] > summary { --ico: url("/assets/vop/icons/ph/x.svg"); }
header details > summary::before { width: 1.25em; height: 1.25em; }

/* story + feature cards: a quiet arrow that arrives on hover */
main .group[class*="overflow-hidden"] h3::after {
  content: "";
  display: inline-block;
  width: 0.8em; height: 0.8em;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  background-color: currentColor;
  -webkit-mask: url("/assets/vop/icons/ph/arrow-up-right.svg") center / contain no-repeat;
  mask: url("/assets/vop/icons/ph/arrow-up-right.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease-out);
}
main a.group[class*="overflow-hidden"]:hover h3::after,
main a.group[class*="overflow-hidden"]:focus-visible h3::after { opacity: 1; transform: none; }
main div.group h3::after { display: none; }

/* downloads: document sheets with a file mark and a download cue */
main a[href$=".pdf"] {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding: 2rem 3.5rem 2rem 1.75rem !important;
  transform: none !important;
  transition: border-color 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft) !important;
}
main a[href$=".pdf"] > * { grid-column: 2; }
main a[href$=".pdf"]::before {
  --ico: url("/assets/vop/icons/ph/file-pdf.svg");
  grid-column: 1; grid-row: 1 / span 3;
  width: 40px; height: 40px;
  color: var(--color-forest);
}
main a[href$=".pdf"]::after {
  --ico: url("/assets/vop/icons/ph/download-simple.svg");
  position: absolute; top: 2rem; right: 1.5rem;
  width: 22px; height: 22px;
  color: var(--muted);
  transition: transform 0.45s var(--ease-out), color 0.3s;
}
main a[href$=".pdf"]:hover { border-color: var(--hair-strong) !important; background: #fff !important; }
main a[href$=".pdf"]:hover::after { transform: translateY(3px); color: var(--color-forest); }
main a[href$=".pdf"] h3 { margin-top: 0 !important; }

/* testimonial: a drawn quote mark leads the voice */
main div[class*="bg-[color:var(--color-sky-soft)]"] h2 { display: flex; flex-direction: column; gap: 1.25rem; }
main div[class*="bg-[color:var(--color-sky-soft)]"] h2::before {
  --ico: url("/assets/vop/icons/ph/quotes.svg");
  width: 44px; height: 44px;
  color: var(--color-gold);
}

/* 5-fundamentals ticker marks */
.logo-ticker__item img[src*="/icons/ticker-"] { width: 44px !important; height: 44px !important; object-fit: contain; }

/* list bullets: glowing dots become a drawn check */
main li > span[class*="rounded-full"]:first-child {
  width: 1rem !important;
  height: 1rem !important;
  margin-top: 0.3rem !important;
  flex: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--color-forest) !important;
  -webkit-mask: url("/assets/vop/icons/ph/check.svg") center / contain no-repeat;
  mask: url("/assets/vop/icons/ph/check.svg") center / contain no-repeat;
}

/* =========================================================
   Full-pass fixes (all 21 pages, desktop + phone)
   ========================================================= */

/* rhythm: generous, not cavernous; heroes that asked for a tight bottom keep it */
.section-padding { padding-top: clamp(4rem, 2.5rem + 4.5vw, 7rem) !important; padding-bottom: clamp(4rem, 2.5rem + 4.5vw, 7rem) !important; }
.section-padding[class*="pb-6"] { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem) !important; }
.section-padding[class*="pt-6"] { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; }
@media (max-width: 767px) { .section-padding { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }

/* small body copy (mission, vision, site plan) reads at body size, on a measure */
main p[class~="text-sm"][class*="color-ink"] { font-size: 1rem !important; line-height: 1.72 !important; max-width: 68ch; }
main .space-y-3 > p, main .space-y-4 > p { max-width: 68ch; }

/* text-only panels: no card, a hairline and air */
main .glass-panel:not(a):not(:has(img)):not(:has(form)):not(:has(> .flex > div > img)) {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--hair-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 0 0 !important;
}
main .glass-panel:not(a):not(:has(img)):not(:has(form)) + .glass-panel:not(a):not(:has(img)):not(:has(form)) { margin-top: 1.5rem; }
main .glass-panel:not(a):not(:has(img)):not(:has(form)) > p:only-child { font-size: 1.0625rem !important; line-height: 1.72 !important; }

/* maps and plans are information: show the whole sheet */
main img[alt="Site development plan"], main img[alt="Vicinity map"] {
  height: auto !important;
  max-height: 820px;
  object-fit: contain !important;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 4px !important;
}

/* team portraits: story-card rules must not strip their captions */
main .group[class*="overflow-hidden"]:has(> div.absolute) { overflow: hidden !important; border-radius: 4px !important; }
main .group[class*="overflow-hidden"]:has(> div.absolute) > div:first-child { aspect-ratio: 4 / 5 !important; clip-path: none; }
main .group[class*="overflow-hidden"]:has(> div.absolute) > div.absolute { padding: 1.25rem 1.25rem 1.1rem !important; background: linear-gradient(to top, rgba(14, 26, 12, 0.75), transparent); }
main .group[class*="overflow-hidden"]:has(> div.absolute) h3 { color: #fff !important; font-size: 1.3rem !important; font-weight: 500 !important; background: none !important; }
main .group[class*="overflow-hidden"]:has(> div.absolute) p { font-size: 0.62rem !important; letter-spacing: 0.2em !important; color: rgba(255, 255, 255, 0.82) !important; margin-top: 0.3rem; }

/* touch targets */
footer a:not([aria-label]) { display: inline-block; padding: 0.3rem 0; }
footer a[aria-label] { width: 2.5rem !important; height: 2.5rem !important; }
main a.vop-i--back { padding: 0.6rem 0; }

/* 404: the only page without the site frame, so it carries its own */
body:has(.next-error-h1) > div:not([hidden]) { font-family: var(--font-body) !important; padding: 2rem; gap: 2rem; }
body:has(.next-error-h1) .next-error-h1 {
  display: block !important;
  border: 0 !important;
  margin: 0 auto 0.5rem !important;
  padding: 0 !important;
  font-family: var(--font-display);
  font-weight: 300 !important;
  font-size: clamp(6rem, 4rem + 10vw, 11rem) !important;
  line-height: 0.9 !important;
  color: var(--pine);
  letter-spacing: -0.03em;
}
body:has(.next-error-h1) h2 { font-size: 1.1rem !important; color: var(--muted); line-height: 1.5 !important; }
.vop-home-link { display: flex !important; width: max-content; margin: 2rem auto 0; }
body:has(.next-error-h1) { background: var(--paper) !important; color: var(--color-ink) !important; }