/* White study only. The independent versions/v2 snapshot stays dark. */
:root {
  --black:#ffffff; --text:#202421; --accent:#1f5b57; --teal:#1f5b57;
  --mesh-ink:#202421; --mesh-surface:#ffffff; --muted-ink:#5b6b62;
  --rule-ink:#20242130;
  --cursor-flow-strength:.2;
  color-scheme:light;
}
body { background:var(--black);color:var(--text); }
::selection { background:#1f5b57;color:#ffffff; }
.hero {
  --black:#1f5b57; --text:#ece9e2; --accent:#1f5b57; --mesh-ink:#ece9e2;
  background:var(--black);color:var(--text);
}
.intro {
  --black:#ffffff; --text:#1f5b57; --accent:#1f5b57; --mesh-ink:#1f5b57;
  background:var(--black);color:var(--text);
}
/* Reserve the original full phrase geometry; only glyph visibility changes. */
.intro .char { opacity:1;visibility:hidden; }
.intro-caret { position:absolute;visibility:hidden;pointer-events:none;margin-left:.12em;font:inherit;line-height:inherit; }
.intro-caret.is-complete { animation:intro-caret-blink .9s step-end infinite; }
@keyframes intro-caret-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.intro #intro-count { left:50%;transform:translateX(-50%); }
@media(prefers-reduced-motion:reduce) { .intro-caret { animation:none!important; } }
.hero h1 { color:#ece9e2; }
/* A scroll-scrubbed sentence on the revealed teal, separate from the hero H1. */
.hero-scroll-message { position:sticky;top:48svh;width:80%;margin:0 auto;z-index:3;pointer-events:none;text-align:center; }
.hero-scroll-message p { color:#ece9e2;font-size:clamp(18px,2.2vw,36px);line-height:1.8;letter-spacing:.14em;opacity:0;transform:translateY(24px);filter:blur(3px); }
.hero-message-static .hero-scroll-message,html:not(.motion-ready) .hero-scroll-message { position:absolute;top:auto;bottom:8%;left:10%;margin:0;padding:14px 18px;background:#1f5b57; }
.hero-message-static .hero-scroll-message p,html:not(.motion-ready) .hero-scroll-message p { opacity:1;transform:none;filter:none; }
@media(max-width:767px) {
  /* Give the ordinary mobile photo scroll a real teal tail, without adding
   * desktop-style photo parallax or extending the intro. */
  .hero { height:145svh;min-height:0; }
  .hero-sticky { height:100svh; }
}
@media(prefers-reduced-motion:reduce) { .hero-scroll-message p { transform:none!important;filter:none!important; } }
/* Difference keeps the fixed light wordmark readable across dark film and paper. */
.site-header,.edge-info { color:#fff;mix-blend-mode:difference; }
.edge-info { left:0;right:0;display:flex;justify-content:center; }
.scroll-cue { opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s; }
.edge-info .scroll-cue.is-dismissed { opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s .22s; }
.footer-copyright { margin-top:36px;font-family:var(--label);font-size:9px;line-height:1;color:var(--muted-ink); }
@media(max-width:650px) { .footer-copyright { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .scroll-cue,.edge-info .scroll-cue.is-dismissed { transition:none; } }
.wordmark-symbol { display:block;width:54px;height:auto; }
@media(max-width:650px) { .wordmark-symbol { width:44px; } }
.philosophy,.business,.company { background:var(--black); }
.media { background:#ffffff; }
.hero-media { background:#1f5b57; }
.hero-media img { filter:brightness(1) saturate(1); }
.collage-base img { filter:brightness(.9) saturate(.75); }
.collage-front img,.project-image img { filter:brightness(1) saturate(.85); }
.project-secondary .project-image img { filter:brightness(.95) saturate(.75); }
/* Supplied business photographs share a 4:5 frame, without changing rows/copy. */
.business .project-row .project-image[data-business-photo] { height:auto;aspect-ratio:4/5;margin:0; }
/* Move the frame, not its crop: native and WebGL use the same measured box. */
@media(min-width:768px) {
  .business .project-row .project-image[data-business-photo] { transform:translateX(-20%); }
}
.project-image[data-business-photo] img { filter:none;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat; }
#ec-support .project-image[data-business-photo] img { object-position:50% 100%; }
#brands .project-image[data-business-photo] img { object-position:50% 50%; }
#sales .project-image[data-business-photo] img { object-position:36% 50%; }
@media(max-width:650px) {
  .business .project-row .project-image[data-business-photo] { margin:25px 0 0; }
}
/* Keep the supplied grain/color and chosen frame layout; motion stays independent. */
.watering-pair { height:auto;aspect-ratio:13/20; }
.watering-pair .collage-front { width:53.84615385%;height:57.5%;left:30.15%;top:-17.5%; }
.watering-pair img { filter:none;object-position:50% 50%; }
/* Simplified philosophy: copy plus the supplied seedling/watering pair only. */
.philosophy { padding:28vw 5vw 17vw;min-height:90vw; }
.philosophy>.section-label-rail { top:28vw; }
.philosophy-content { margin-left:12.5vw;width:40vw; }
.philosophy-content .editorial-copy { width:36vw; }
.philosophy .watering-pair { top:26vw;right:5vw;width:32.5vw; }
@media(min-width:768px) {
  .philosophy .editorial-title { font-size:clamp(40px,4.1vw,74px); }
}
@media(max-width:767px) {
  .philosophy { min-height:0;padding:28vw 10vw 28vw; }
  .philosophy>.section-label-rail { top:28vw;left:10vw; }
  .philosophy .section-label-rail>.vertical-label { font-size:12px; }
  .philosophy-content { margin-left:15vw;width:65vw; }
  .philosophy-content .editorial-copy { width:auto; }
  .philosophy .watering-pair { position:relative;top:auto;right:auto;width:65vw;margin:35vw 0 0 15vw; }
}
/* Pure-white beta: no faint full-section forest tint; foreground photos remain. */
.business-background,.company-background { display:none; }
.business-background img,.company-background img { filter:brightness(1) saturate(.5); }
.company-mark { color:var(--text); }
#company-open { margin-left:0;transform:translateX(var(--company-link-shift,0px)); }
.company-symbol { display:block;width:68px;height:68px; }
#menu-toggle { display:flex;justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-top:-14px;margin-right:-10px; }
.hamburger { display:flex;flex-direction:column;gap:5px;width:24px; }
.hamburger>span { display:block;height:1px;width:100%;background:currentColor; }
.contact-heading-row { display:flex;justify-content:space-between;gap:4vw;align-items:center;padding:35px 0;margin-top:24px; }
.contact-title { font-family:var(--serif);font-size:clamp(45px,5vw,90px);line-height:1.15;letter-spacing:-.02em; }
.contact-title>span { display:block; }
.contact-link { flex:none;align-self:center;transform:translateY(12px); }
.contact>.vertical-label { left:-12.5vw;top:8vw; }
@media(max-width:650px) {
  .company-symbol { width:54px;height:54px; }
  .contact-heading-row { flex-direction:column;align-items:flex-start;gap:12px;padding:24px 0; }
  .contact-title { font-size:11vw; }
  .contact-link { align-self:flex-end;transform:none; }
  .contact>.vertical-label { left:-5vw;top:22vw;font-size:12px; }
}
.project-row::before,.contact,.footer-title,.detail-dialog dl>div { border-color:var(--rule-ink); }
.project-row::before { background:var(--rule-ink); }
.motion-link .link-rule,.motion-link:hover .link-rule,.motion-link:focus-visible .link-rule { background:var(--text); }
.small-label,.vertical-label,.project-label,.project-number { color:var(--accent); }
.footer-note { color:var(--muted-ink); }
.navigation { position:fixed;z-index:29;background:transparent;color:var(--text);opacity:1;padding:0; }
.navigation::backdrop { background:transparent; }
.navigation .nav-top { align-items:flex-start; }
.nav-transition-layer { position:relative;isolation:isolate;min-height:100svh;padding:32px 5vw; }
.nav-transition-layer::before { content:"";position:absolute;inset:0;z-index:-1;background:var(--black);pointer-events:none; }
.menu-wordmark { display:none; }
.nav-logo-spacer { flex:none;width:70px;height:80.24px; }
/* One real header logo, always above the non-modal navigation layer. This
 * avoids difference blending against a transparent modal top-layer backdrop. */
body:has(#navigation[open]) #menu-toggle { visibility:hidden; }
body:has(#navigation[open]) :is(.edge-info,.preview-tools,.effect-checks) { visibility:hidden; }
html:has(#navigation[open]) { overflow:hidden; }
.navigation .nav-text { padding-right:.12em; }
.navigation nav a::after { right:.12em; }
@media(max-width:650px) {
  .menu-wordmark { left:7.5vw;top:28px; }
  .nav-logo-spacer { width:58px;height:67.34px; }
  .nav-transition-layer { padding:28px 7.5vw; }
}
#menu-close { margin-left:0;padding-right:0; }
.footer-grid nav a { align-self:flex-start;width:max-content;max-width:100%; }
.footer-fluid-text { display:block;width:max-content;max-width:100%; }
.site-footer.fluid-footer { z-index:auto; }
.fluid-mesh-copy { color:transparent!important; }
.fluid-logo-ready>svg { opacity:0; }
.motion-paused .fluid-mesh-copy { color:var(--text)!important; }
.motion-paused .fluid-logo-ready>svg { opacity:1; }
@media(prefers-reduced-motion:reduce) { .fluid-mesh-copy { color:var(--text)!important; }.fluid-logo-ready>svg { opacity:1; } }
.detail-dialog { border-color:#20242140; }
.detail-dialog input,.detail-dialog select,.detail-dialog textarea { background:#ffffff;border-color:#20242140; }
.detail-dialog form>button { background:var(--teal);color:#ffffff; }
.preview-tools { background:#ffffff;color:#394840;flex-wrap:wrap;max-width:90vw; }
.effect-checks { background:#ffffff;border-color:#20242140;color:var(--text); }
.white-study .mesh-copy { text-shadow:none; }
/* v3.1: staggered strengths; a separate inner layer drifts without moving triggers. */
.strengths { position:relative;background:var(--black);padding:14vw 5vw 18vw; }
.strengths>.section-label-rail { top:14vw; }
.strengths-intro { position:relative;z-index:4;margin-left:12.5vw;width:67.5vw; }
.strengths-intro .editorial-title { font-size:clamp(40px,4.1vw,74px); }
.strengths-list { margin-top:18vw; }
.strength-item { position:relative;z-index:4;width:47.5vw;margin-left:12.5vw; }
.strength-item+.strength-item { margin-top:22vw; }
.strength-item:nth-child(2) { margin-left:37.5vw; }
.strength-item:nth-child(3) { margin-left:17.5vw; }
.strength-item:nth-child(4) { margin-left:30vw; }
.strength-number { display:inline-block;margin-bottom:24px;color:var(--teal);font-family:var(--label);font-size:clamp(15px,1.4vw,22px);line-height:1.4; }
.motion-ready .strength-number { opacity:0; }
.strength-group-float { animation:strength-group-drift 7.6s ease-in-out infinite;animation-play-state:paused;text-shadow:0 3px 8px rgb(32 36 33 / 18%); }
.strength-item:nth-child(2) .strength-group-float { animation-duration:8.4s; }
.strength-item:nth-child(3) .strength-group-float { animation-duration:9.2s; }
.strength-item:nth-child(4) .strength-group-float { animation-duration:8.8s; }
.motion-ready .strength-item.is-floating.is-in-view .strength-group-float { animation-play-state:running; }
.strength-title { font-family:var(--mincho);font-size:clamp(22px,2.3vw,40px);line-height:1.65;letter-spacing:.025em;text-wrap:balance; }
.strength-copy { margin-top:22px;font-size:clamp(12px,1.05vw,18px);line-height:2.4;text-wrap:balance; }
.strength-phrase { display:inline-block; }
.motion-paused .strength-group-float { animation-play-state:paused!important; }
.motion-paused .strength-number { opacity:1!important; }
@keyframes strength-group-drift { 0%,100% { transform:translateY(0); } 25% { transform:translateY(-4px); } 75% { transform:translateY(4px); } }
@media(prefers-reduced-motion:reduce) { .strength-group-float { animation:none!important;transform:none!important; } }
@media(max-width:767px) {
  .preview-tools { max-width:90vw; }
  .strengths { padding:30vw 10vw 36vw; }
  .strengths>.section-label-rail { top:30vw;left:10vw; }
  .strengths .section-label-rail>.vertical-label { font-size:12px; }
  .strengths-intro { margin-left:15vw;width:65vw; }
  .strengths-intro .editorial-title { font-size:clamp(29px,7.6vw,48px); }
  .strengths-list { margin-top:38vw; }
  .strength-item { width:70vw;margin-left:5vw; }
  .strength-item+.strength-item { margin-top:45vw; }
  .strength-item:nth-child(2) { margin-left:15vw;width:65vw; }
  .strength-item:nth-child(3) { margin-left:5vw; }
  .strength-item:nth-child(4) { margin-left:12vw;width:68vw; }
  .strength-number { margin-bottom:18px;font-size:15px; }
  .strength-title { font-size:clamp(19px,4.6vw,28px);line-height:1.8; }
  .strength-copy { margin-top:18px;font-size:12px;line-height:2.3;letter-spacing:.01em; }
}
/* Native, section-bounded tracking. The absolute rail keeps content geometry
 * unchanged; only its existing semantic label is sticky. No scroll script. */
.section-label-rail { position:absolute;left:5vw;bottom:clamp(100px,8vw,160px);width:max-content;z-index:5;pointer-events:none; }
.section-label-rail>.vertical-label { position:sticky;top:clamp(160px,30svh,320px);left:auto; }
.company>.section-label-rail { top:6.25vw; }
@media(max-width:650px) {
  .company>.section-label-rail { top:28vw;left:10vw; }
  .company .section-label-rail>.vertical-label { font-size:12px; }
}
/* Tiny/short screens keep the original in-section label instead of crowding
 * the fixed wordmark or consuming a narrow reading gutter. */
@media(max-width:359px),(max-height:399px) {
  .section-label-rail>.vertical-label { position:relative;top:0; }
}