/* v2 interaction layer. Loaded after styles.css.
   Everything that hides content before it animates in is scoped to html.motion, which
   motion.js only sets when the visitor has not asked for reduced motion. Without JS
   (or with reduced motion) the page is the same as v1, fully visible. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --lift: 0 18px 40px rgba(4, 54, 26, .12);
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

::selection { background: var(--stream); color: var(--green-deep); }

/* Scroll progress */
.scroll-progress { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto 0; height: 3px; z-index: 45; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--stream)); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Header: condenses after the first screenful */
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(4, 54, 26, .08); }
@media (min-width: 1081px) {
  .header-inner { transition: min-height .35s var(--ease-out); }
  .brand img { transition: width .35s var(--ease-out), height .35s var(--ease-out), transform .5s var(--ease-out); }
  .site-header.scrolled .header-inner { min-height: 64px; }
  .site-header.scrolled .brand img { width: 42px; height: 42px; }
  .brand:hover img { transform: rotate(-8deg) scale(1.04); }
  /* animated underline on nav links */
  .nav a.nav-link { position: relative; }
  .nav a.nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--stream); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
  .nav a.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav a.nav-link:hover { background: transparent; }
  .submenu li { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s var(--ease-out); }
  .has-sub:hover .submenu li, .has-sub:focus-within .submenu li { opacity: 1; transform: none; }
  .submenu li:nth-child(2) { transition-delay: .03s; } .submenu li:nth-child(3) { transition-delay: .06s; }
  .submenu li:nth-child(4) { transition-delay: .09s; } .submenu li:nth-child(5) { transition-delay: .12s; }
  .submenu li:nth-child(6) { transition-delay: .15s; } .submenu li:nth-child(n+7) { transition-delay: .18s; }
  .submenu a img { transition: transform .35s var(--ease-out); }
  .submenu a:hover img { transform: scale(1.12) rotate(-6deg); }
  .has-sub .chev { transition: transform .3s var(--ease-out); }
  .has-sub:hover .chev, .has-sub:focus-within .chev { transform: rotate(180deg); }
}
@media (max-width: 1080px) {
  .nav.open { animation: navIn .35s var(--ease-out) both; }
  .nav.open > ul > li { animation: rise-in .45s var(--ease-out) both; }
  .nav.open > ul > li:nth-child(2) { animation-delay: .04s; } .nav.open > ul > li:nth-child(3) { animation-delay: .08s; }
  .nav.open > ul > li:nth-child(4) { animation-delay: .12s; } .nav.open > ul > li:nth-child(5) { animation-delay: .16s; }
  .nav.open > ul > li:nth-child(6) { animation-delay: .2s; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

/* Buttons: light sweep and a little lift */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease-out), box-shadow .35s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out); }
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4, 54, 26, .18); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Hero */
/* hero height is set in styles.css (fits the screen minus the header, on every orientation) */
.hero-art .layer { will-change: transform; }
/* clip vertically only, so long words are never cut at the side */
.hero h1 > span { clip-path: inset(-.1em -100vw -.08em -100vw); }
.hero h1 .line { display: block; }
.scroll-cue { position: absolute; left: 50%; bottom: clamp(84px, 9vw, 110px); width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,.55); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--stream); }
.scroll-cue:hover { border-color: #fff; }
@media (max-width: 760px), (max-height: 540px) { .scroll-cue { display: none; } }

/* Stats */
.stat { position: relative; transition: background .3s; }
.stat::before { content: ""; position: absolute; left: 24px; top: 0; width: 32px; height: 3px; background: var(--stream); transform: scaleX(.4); transform-origin: left; transition: transform .45s var(--ease-out); }
.stat:hover { background: #f7faf7; }
.stat:hover::before { transform: scaleX(1.6); }

/* Marquee of the six sectors */
.marquee { overflow: hidden; padding-block: 28px; margin-top: clamp(40px, 5vw, 64px); border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; gap: clamp(32px, 5vw, 72px); padding-right: clamp(32px, 5vw, 72px); }
.marquee-item { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem); color: var(--green); }
.marquee-item img { width: 40px; height: 40px; }
.marquee-item::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stream); margin-left: clamp(18px, 3vw, 36px); }

/* Sector cards: green fill rises on hover, icon sits in a disc */
.sector { overflow: hidden; isolation: isolate; transition: color .35s; }
.sector::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.sector img { width: 68px; height: 68px; padding: 10px; border-radius: 50%; background: var(--mist); transition: transform .5s var(--ease-out), background .35s; }
.sector .kind, .sector h3, .sector p, .sector .textlink { transition: color .35s; }
.sector:hover, .sector:focus-visible { background: var(--paper); color: var(--on-green); }
.sector:hover::before, .sector:focus-visible::before { transform: scaleY(1); }
.sector:hover img, .sector:focus-visible img { background: var(--paper); transform: translateY(-4px) rotate(-6deg); }
.sector:hover .kind, .sector:focus-visible .kind { color: var(--stream); }
.sector:hover p, .sector:focus-visible p { color: var(--on-green-muted); }
.sector:hover .textlink, .sector:focus-visible .textlink { color: var(--on-green); }
.sector:hover .textlink svg { transform: translateX(6px); }

/* Pointer spotlight (motion.js sets --mx / --my) */
.principle, .loc, .pager a, .stat, .contact-card, .corp { --mx: 50%; --my: 50%; }
.principle, .loc, .pager a { position: relative; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.principle::after, .loc::after, .pager a::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(145, 191, 215, .22), transparent 60%); }
.principle:hover, .loc:hover, .pager a:hover { transform: translateY(-4px); box-shadow: var(--lift); border-color: rgba(7, 78, 36, .3); }
.principle:hover::after, .loc:hover::after, .pager a:hover::after { opacity: 1; }
.principle header img { transition: transform .5s var(--ease-out); }
.principle:hover header img { transform: rotate(-8deg) scale(1.08); }

/* Portfolio rows */
.pf-row { position: relative; transition: padding .45s var(--ease-out); }
.pf-row::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(12px, 2vw, 24px)); z-index: -1; background: var(--mist); border-radius: var(--radius); opacity: 0; transform: scale(.98); transition: opacity .35s, transform .45s var(--ease-out); }
.pf-row:hover::before { opacity: 1; transform: none; }
.pf-row img { transition: transform .5s var(--ease-out); }
.pf-row:hover img { transform: rotate(-8deg) scale(1.08); }
.portfolio { isolation: isolate; }

/* Footprint matrix */
.matrix tbody tr { transition: background .2s; }
.matrix tbody tr:hover { background: rgba(145, 191, 215, .14); }
.matrix tbody tr:hover th { color: var(--green); }

/* Founder portrait: gentle tilt toward the pointer */
.portrait { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .6s var(--ease-out), box-shadow .6s; }
.portrait:hover { box-shadow: 0 30px 60px rgba(4, 54, 26, .22); }
.portrait .ring { transition: transform 1.2s var(--ease-out); }
.portrait:hover .ring { transform: scale(1.08); }

/* Contact cards and info chips */
.amenities li, .place-list li, .county { transition: background .25s, color .25s, transform .3s var(--ease-out), border-color .25s; }
.amenities li:hover, .place-list li:hover, .county:hover { background: var(--green); color: var(--on-green); border-color: var(--green); transform: translateY(-2px); }
.county:hover i { background: var(--stream); }
.dir-entry a, .contact-card dd a, .mini-contact a, .site-footer a, .loc a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out); }
.dir-entry a:hover, .contact-card dd a:hover, .mini-contact a:hover, .site-footer a:hover, .loc a:hover { background-size: 100% 1.5px; text-decoration: none; }

/* Form fields */
.field input, .field textarea, .field select { transition: border-color .2s, box-shadow .25s; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--sage); }
.field:focus-within label { color: var(--green); }

/* Gallery */
.filters button { transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out); }
.filters button:hover { border-color: var(--green); transform: translateY(-1px); }
.gallery figure .photo-slot { overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.gallery figure:hover .photo-slot { transform: translateY(-4px); box-shadow: var(--lift); }
.gallery .photo-slot.has-photo img { transition: transform .9s var(--ease-out); }
.gallery figure:hover .photo-slot.has-photo img { transform: scale(1.06); }
.gallery .photo-slot.has-photo { cursor: zoom-in; }
.gallery figure.is-leaving { opacity: 0; transform: scale(.96); }
.gallery figure { transition: opacity .3s, transform .4s var(--ease-out); }

/* Lightbox */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: visible; }
dialog.lightbox::backdrop { background: rgba(4, 30, 15, .88); backdrop-filter: blur(4px); }
dialog.lightbox[open] { animation: zoom-in .4s var(--ease-out); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); border-radius: var(--radius); margin: 0 auto; }
.lightbox p { color: #fff; text-align: center; margin-top: 14px; font-size: 1rem; }
.lightbox .lb-btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 1.4rem/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lightbox .lb-btn:hover { background: var(--stream); color: var(--green-deep); }
.lightbox .lb-close { top: -8px; right: -8px; }
.lightbox .lb-prev { left: 8px; top: 50%; margin-top: -40px; }
.lightbox .lb-next { right: 8px; top: 50%; margin-top: -40px; }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }

/* Back to top with reading progress ring */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 35; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(4, 54, 26, .25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .4s var(--ease-out), visibility .3s, background .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--green-deep); color: #fff; }
.to-top svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.to-top path { transform: rotate(90deg); transform-origin: 22px 22px; }
.to-top circle { fill: none; stroke-width: 2; }
.to-top .track { stroke: rgba(255,255,255,.18); }
.to-top .ring { stroke: var(--stream); stroke-dasharray: 125.7; stroke-dashoffset: calc(125.7 * (1 - var(--p, 0))); }

/* ---------- Motion that only runs when motion.js has opted in ---------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
html.motion [data-reveal="left"] { transform: translateX(-32px); }
html.motion [data-reveal="right"] { transform: translateX(32px); }
html.motion [data-reveal="scale"] { transform: scale(.94); }
html.motion [data-reveal].in { opacity: 1; }
html.motion [data-reveal].in:not(.done) { transform: none; }
/* after the reveal finishes, hand transform back to hover effects */
html.motion [data-reveal].done { transition: opacity .3s, transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .3s, border-color .3s, color .35s, padding .45s var(--ease-out); transition-delay: 0s; }

html.motion .label::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .2s; }
html.motion .in .label::before, html.motion .label.in::before, html.motion .page-head .label::before, html.motion .hero .label::before { transform: none; }

/* Hero headline: lines slide up from behind a mask */
html.motion .hero .rise { animation: none; }
html.motion .hero h1 .line { transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * .12s); }
html.motion .hero.ready h1 .line { transform: none; }
html.motion .hero .hero-meta, html.motion .hero .lede, html.motion .hero .btn-row { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.motion .hero .lede { transition-delay: .55s; }
html.motion .hero .btn-row { transition-delay: .7s; }
html.motion .hero.ready .hero-meta, html.motion .hero.ready .lede, html.motion .hero.ready .btn-row { opacity: 1; transform: none; }
html.motion .hero-meta span { display: inline-block; }
html.motion .scroll-cue span { animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
html.motion .halo { transform-origin: 1140px 250px; animation: halo 9s var(--ease-io) infinite alternate; }
html.motion .halo-2 { animation-duration: 12s; }
@keyframes halo { to { transform: scale(1.07); } }

/* Inner page heads: the title rises in on load */
html.motion .page-head .wrap > * { animation: rise-in .9s var(--ease-out) both; }
html.motion .page-head .wrap > :nth-child(2) { animation-delay: .06s; }
html.motion .page-head .wrap > :nth-child(3) { animation-delay: .12s; }
html.motion .page-head .wrap > :nth-child(4) { animation-delay: .2s; }
html.motion .page-head .wrap > :nth-child(5) { animation-delay: .28s; }
html.motion .page-head .head-icon { animation: pop .8s var(--ease-out) both .1s; }
@keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }
html.motion .leafline { transition: transform .1s linear; }

/* Marquee loops */
html.motion .marquee-track { animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Matrix dots pop in column by column */
html.motion .matrix-wrap .dot { transform: scale(0); transition: transform .5s var(--ease-out); transition-delay: calc(var(--c, 0) * .05s + var(--r, 0) * .03s); }
html.motion .matrix-wrap.in .dot { transform: none; }

/* About page: the river line draws as you read */
html.motion .story-line svg path:first-child { stroke-dasharray: var(--len, 600); stroke-dashoffset: calc(var(--len, 600) * (1 - var(--p, 0))); }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .scroll-cue span { display: none; }
  .portrait { transform: none !important; }
  .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; }
}

/* Short landscape phones: smaller lightbox controls stay inside the screen */
@media (orientation: landscape) and (max-height: 540px) {
  .lightbox img { max-height: calc(100dvh - 90px); }
  .lightbox p { margin-top: 8px; font-size: .9rem; }
  .lightbox .lb-close { top: 4px; right: 4px; }
}
/* Hover lift effects are for mouse users; on touch they stick after a tap */
@media (hover: none) {
  .principle:hover, .loc:hover, .pager a:hover, .gallery figure:hover .photo-slot, .btn:hover { transform: none; box-shadow: none; }
  .portrait { transform: none !important; }
}