:root{font-family:Arial,Helvetica,sans-serif;color:#191a18;background:#f8f8f5;--line:#d8d9d0;--mono:ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #6c7f45;outline-offset:5px}
img{display:block;max-width:100%}
.skip{position:fixed;z-index:5;top:12px;left:12px;background:white;padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}
.hero{min-height:min(760px,calc(100svh - 24px));margin:12px;border-radius:24px;overflow:hidden;position:relative;display:flex;flex-direction:column;padding:20px 20px 0;background:#eeefeb linear-gradient(0deg,#151f15 0%,#4b5645 24%,transparent 57%)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#091109b5,transparent 24%),url("assets/hero-right.jpg") center 60%/cover no-repeat;pointer-events:none}
.hero>*{position:relative}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
nav{display:flex;align-items:center;gap:28px;background:#ffffffee;border-radius:100px;padding:5px 22px 5px 12px;min-height:44px;font-size:14px}
nav a:hover,footer a:hover{text-decoration:underline}
.logo{display:block;width:100px;flex:none}
.logo img{width:100%;height:auto}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:40px;padding:86px 20px 66px;flex:1}
.eyebrow,.hero-foot,.brand-meta span{font:11px/1.4 var(--mono);letter-spacing:.09em}
.hero-copy{align-self:center}
.hero-copy .eyebrow{color:#414439;margin-bottom:18px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.06em}
h1{font-size:clamp(19px,5.25vw,88px);line-height:1.04;letter-spacing:-.025em}
h1 span{color:#62665f}
.hero-copy p{font-size:16px;line-height:1.5;max-width:480px;margin:24px 0;color:#22251f}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #444 0%, #101010 56%, #000 100%);
  box-shadow: inset 0 1px 1px #ffffff66, 0 5px 12px #0004;
  color: white;
  font-size: 16px;
  font-weight: 500;
  transition: box-shadow .2s ease, transform .2s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 1px #ffffff80, 0 7px 15px #0005;
}

.button:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }
.hero-foot{display:flex;justify-content:space-between;gap:12px;padding:23px 20px 28px;border-top:1px solid #ffffff55;color:white}
.wrap{width:min(100% - 64px,1240px);margin:auto}
.section{padding:82px 0;border-bottom:1px solid var(--line)}
.section-intro{display:grid;justify-items:center;text-align:center;gap:16px}
#brands .section-intro{margin-bottom:34px}
h2{font-size:clamp(38px,5.4vw,80px);line-height:1}
.brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.brand{min-height:330px;padding:24px;display:flex;flex-direction:column;border-radius:20px;background:#20251e;color:#f8f8f4}
.studio{background:#dce2d2;color:#191a18}
.brand-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand-meta{margin-bottom:auto}
.brand-meta span:last-child{font-size:24px}
.brand h3{color:var(--card-heading);font-size:clamp(34px,4vw,58px);margin:6px 0 10px}
.brand p,.about p{font-size:16px;line-height:1.55}
.brand p{max-width:460px}
.about p{max-width:68ch;text-wrap:balance}
.about{display:grid;grid-template-columns:1fr;gap:24px}
@media(max-width:800px){
.hero-grid{gap:22px;padding:75px 8px 45px}
.hero-foot{padding-inline:8px}
.wrap{width:calc(100% - 40px)}
.section{padding:55px 0}
}
@media(max-width:620px){
.hero{min-height:0;margin:6px;border-radius:18px;padding:12px 12px 0;background:#deddda}
nav{gap:12px;padding-right:12px;font-size:12px}
nav .logo{width:82px}
.hero-grid,.brand-grid,.about{grid-template-columns:1fr}
.hero-grid{padding:34px 8px clamp(200px,60vw,330px)}
.hero::before{
  background:
    linear-gradient(180deg,#deddda 11%,transparent 36%),
    linear-gradient(0deg,#091109b5,transparent 24%),
    url("assets/hero-right.jpg") 80% bottom / auto 84% no-repeat;
}
.hero-copy p{margin:17px 0 20px}
.hero-foot{font-size:8px}
.section-intro{gap:10px}
.brand{min-height:280px}
}
@media(max-width:355px){nav{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:801px){.hero-copy{transform:translateY(-40px)}}
@media(min-width:621px) and (max-width:800px){.hero-copy{transform:translateY(-22px)}}
.manifesto{padding:105px 0 88px;border-bottom:1px solid var(--line)}
.manifesto h2{max-width:1100px;margin:30px 0 22px;font-size:clamp(40px,6.6vw,100px)}
.manifesto h2 span{color:#696e65}
.manifesto p{color:#50534c;line-height:1.5}
.brand.motion{--card-heading:#008080;--card-tint:#e2f1f1;--card-border:#b9dada;--card-hover:#d4eaea;--card-hover-border:#9ac7c7}
.brand.studio{--card-heading:#186cbe;--card-tint:#e7f1fc;--card-border:#c1daf6;--card-hover:#d9eafc;--card-hover-border:#a6c9f0}
.brand{min-height:0;background:var(--card-tint);color:#191a18;padding:14px;border:1px solid var(--card-border)}
.brand-meta{margin:0;padding:4px 7px 2px}
.brand h3,.brand p{margin-inline:8px}
.brand p{margin-bottom:20px}
.brand-visual{position:relative;aspect-ratio:1.9;overflow:hidden;border-radius:13px;background:#151915 radial-gradient(ellipse at 60% 100%,#326260,transparent 72%);isolation:isolate}
.brand-visual::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,#e0efd515 24px),repeating-linear-gradient(90deg,transparent 0 23px,#e0efd515 24px);mask-image:linear-gradient(#000,transparent)}
.frames i{position:absolute;left:21%;top:24%;width:52%;height:49%;border:1px solid #a6dede;border-radius:8px;background:linear-gradient(125deg,#81c8c840,#183032b0);transform:skewY(-11deg)}
.frames i:nth-child(2){translate:8% 13%}
.frames i:nth-child(3){translate:16% 26%;background:radial-gradient(ellipse at 70% 40%,#9ddddd85,#1d393b)}
.tracks{background:#1a191c radial-gradient(ellipse at 74% 40%,#344d74,transparent 75%)}
.tracks i{position:absolute;top:29%;left:12%;width:72%;height:10%;border-radius:4px;background:repeating-linear-gradient(90deg,#a4cbf6 0 21%,#242f45 21% 23%,#789fce 23% 57%,#242f45 57% 59%)}
.tracks i:nth-child(2){top:44%;left:19%;width:69%;filter:brightness(.84)}
.tracks i:nth-child(3){top:59%;left:12%;width:59%;filter:brightness(1.14)}
.tracks::after{content:"";position:absolute;top:18%;bottom:21%;left:58%;width:1px;background:#c4e0ff;box-shadow:0 0 12px #c4e0ff}
.about{background:#efefef;color:#191a18;border:0;border-radius:22px;margin:64px 0;padding:clamp(16px,4vw,58px)}
@media(max-width:620px){.manifesto{padding:60px 0}.about{margin:38px 0;padding:16px}}

/* Reveal below-the-fold content as it enters the viewport. */
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto h2, .section h2, .brand {
      animation: section-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 52%;
    }

    .brand.studio { animation-range: entry 5% entry 58%; }
  }
}

.brand {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.brand-visual i { transition: translate .45s cubic-bezier(.2,.75,.25,1); }
.tracks::after { transition: left .55s cubic-bezier(.2,.75,.25,1); }

.brand:focus-visible {
  background-color: var(--card-hover);
  border-color: var(--card-hover-border);
}

@media (hover: hover) {
  .brand:hover {
    background-color: var(--card-hover);
    border-color: var(--card-hover-border);
    box-shadow: 0 12px 24px #20251e12;
  }

  .motion:hover .frames i:first-child { translate: -8% -10%; }
  .motion:hover .frames i:nth-child(3) { translate: 23% 34%; }
  .studio:hover .tracks i:nth-child(2) { translate: -8% 0; }
  .studio:hover .tracks i:nth-child(3) { translate: 8% 0; }
  .studio:hover .tracks::after { left: 74%; }
  .brand:hover a span { translate: 3px -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .tracks i { translate: none !important; }
  .frames i:first-child { translate: none !important; }
  .frames i:nth-child(3) { translate: 16% 26% !important; }
  .tracks::after { left: 58% !important; }
}

.team-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.team-gallery img{width:100%;height:auto;border-radius:14px}
@media(max-width:620px){.team-gallery{grid-template-columns:1fr}}


.about .eyebrow{color:#50534c}

.site-footer {
  margin: 12px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(180deg, #10252266 0%, transparent 52%, #08130e80 100%),
    url("assets/footer-garden.jpg") center bottom / cover no-repeat,
    #19362c;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(155px, 1.2fr);
  align-items: start;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(42px, 8vw, 130px) clamp(22px, 4.5vw, 76px) 0;
}

.footer-identity .logo{width:clamp(130px,17vw,220px);filter:brightness(0) invert(1)}
.footer-identity p { margin-top: 22px; max-width: 340px; line-height: 1.6; color: #edf2ec; }
.footer-column {
  display: grid;
  gap: 15px;
  padding-left: clamp(12px, 1.6vw, 26px);
  border-left: 1px solid #ffffff30;
}
.footer-column .eyebrow { color: #f1f7ef; margin-bottom: 10px; }
.footer-column a { color: #f4f7f2; line-height: 1.4; }
.site-footer a:focus-visible { outline-color: white; }

.footer-stage {
  display: grid;
  align-items: end;
  min-height: clamp(230px, 29vw, 460px);
  padding-inline: clamp(10px, 2.7vw, 44px);
}
.footer-wordmark { display: block; justify-self: center; width: 54%; height:auto; overflow:hidden; filter: brightness(0) invert(1); }
@media (max-width: 620px) { .footer-wordmark { width: 76%; } }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px clamp(22px, 4.5vw, 76px) 20px;
  border-top: 1px solid #ffffff40;
  background: #08130e85;
  color: #f2f5f0;
  font: 11px var(--mono);
}
.footer-bottom small { font: inherit; }

@media (max-width: 780px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .footer-identity { grid-column: 1 / -1; }
  .site-footer { background-size: auto, auto 78%; }
}

@media (max-width: 420px) {
  .site-footer { margin: 6px; border-radius: 18px; }
  .footer-top { padding-inline: 16px; }
  .footer-column { padding-left: 8px; gap: 9px; font-size: 13px; }
  .footer-column .eyebrow { font-size: 9px; }
}

h1 .hero-hyphen{display:inline-block;letter-spacing:0;margin-inline-end:.04em}

@media(max-width:540px){.tagline-break{display:none}.hero-copy p{text-wrap:balance}}

.hero-foot{justify-content:flex-end}
.manifesto h2{margin-top:0}
.section-label{display:inline-flex;align-items:center;width:fit-content;padding:7px 13px;border:1px solid #d8d9d0;border-radius:100px;background:#eeefe9;color:#272a25;font-size:13px;font-weight:600;line-height:1.2}
.about .section-label{background:#f8f8f8;color:#272a25;border-color:#d7d7d7}


.brand-visual{margin-top:auto}

.hero-foot{align-items:center;gap:clamp(12px,4vw,52px)}
.hero-brand-names{flex-shrink:0;white-space:nowrap}
.client-marquee{display:flex;align-items:center;flex:1;min-width:0;gap:10px;position:relative}
.marquee-window{min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:client-scroll 60s linear infinite}
.marquee-set{display:flex;align-items:center;gap:24px;padding-right:24px}
.marquee-set img{width:116px;height:39px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
@keyframes client-scroll{to{transform:translateX(-50%)}}
.marquee-window:hover .marquee-track{animation-play-state:paused}
@media(max-width:620px){.marquee-set{gap:12px;padding-right:12px}.marquee-set img{width:82px;height:29px}.hero-brand-names{display:none}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee-set + .marquee-set{display:none}.marquee-window{overflow-x:auto;mask-image:none}}