/* Tanfoam campaign and origin story. Layers: media 1, copy 2, navigation 20.
   Motion communicates scene changes and the story's reading order. */
.hero{height:100svh;min-height:720px;max-height:1100px;background:#092a20}
.hero-picture{transition:opacity .85s ease}
.hero-picture img{object-position:68% center;animation:none;transform:none}
.hero-shade{background:linear-gradient(90deg,#07271fe8 0%,#07271f9c 28%,#092a2020 57%,transparent 80%),linear-gradient(0deg,#071f1bc7,transparent 30%),linear-gradient(180deg,#071f1b65,transparent 18%)}
.hero-content{left:5vw;right:auto;bottom:22%;width:58%;max-width:900px}
.hero .hero-origin{font-size:12px;letter-spacing:.07em;color:#e1e9df}
.hero h1{font-size:clamp(76px,8.2vw,142px);line-height:.99;letter-spacing:-.045em;font-weight:600;margin-top:28px;max-width:none}
.hero-title-line{display:block}
.hero-description{font-size:17px;line-height:1.55;max-width:330px;margin-top:28px;color:#e1e9df;min-height:80px}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:30px}
.hero .hero-actions .button{margin:0;min-height:54px;padding-inline:27px;font-size:14px;background:#e8f0e7;color:#123c2c}
.hero .hero-story-link{font-size:14px;color:#fff}
.hero-controls{left:5vw;right:5vw;bottom:34px;gap:30px;padding-top:17px;border-top:1px solid #ffffff38}
.slide-buttons{gap:30px}
.slide-buttons button{display:flex;gap:10px;align-items:center;min-width:118px;min-height:48px;font-size:13px;padding:12px 0;border:0;color:#dfebe0;white-space:nowrap}
.slide-buttons button>span{font-size:11px;color:#cfdfcf;font-variant-numeric:tabular-nums}
.slide-buttons button.selected{border:0;color:#fff}
.slide-buttons button::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#dce9d9;transform:scaleX(0);transform-origin:left;animation:none;opacity:.7}
.slide-buttons button.selected::after{transform:scaleX(1);animation:none}
.hero-photo-actions{display:flex;align-items:center;gap:28px}
.hero-photo-actions .text-link{font-size:13px;color:#fff}
.hero .pause-button{width:46px;height:46px;border-radius:50%;background:transparent;border-color:#ffffff70;flex-shrink:0}
.hero.busy .hero-controls{opacity:1}.hero.busy .slide-buttons button{cursor:progress}
.hero-actions .button:hover{background:#fff}
.brand-story{display:block;padding:0;gap:0;background:#143b2d;color:#eef4e9;overflow:hidden;scroll-margin-top:0}
.story-inner{padding-block:90px 65px}
.story-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:start}
.brand-story .eyebrow{color:#c7d6c6;font-size:12px;letter-spacing:.065em}
.brand-story h2{font-size:clamp(48px,5.2vw,82px);line-height:1.04;letter-spacing:-.04em;margin-top:25px;font-weight:500}
.story-origin{padding-top:35px;max-width:410px}
.story-year{display:flex;flex-direction:column;gap:12px}
.story-year>span{font-size:12px;color:#c7d6c6}
.story-year strong{font-size:clamp(86px,8.1vw,124px);font-weight:400;line-height:.88;letter-spacing:-.055em;font-variant-numeric:lining-nums}
.story-origin-copy{margin-top:35px}
.story-origin-copy h3{font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.025em}
.story-origin-copy p{font-size:16px;line-height:1.65;color:#c7d6c6;margin-top:16px;max-width:360px}
.brand-story .text-link{color:#eef4e9;font-size:14px;margin-top:20px}
.story-visuals{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);align-items:end;gap:35px;margin-top:65px}
.brand-story figure{margin:0;min-width:0}
.brand-story img{height:auto;width:100%;object-fit:cover;filter:none;display:block}
.story-showroom img{aspect-ratio:16/9}
.story-detail img{aspect-ratio:1/1.12;object-position:65% center}
.brand-story figcaption{font-size:12px;line-height:1.5;color:#c7d6c6;margin-top:14px}
.story-close{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:32px;margin-top:36px;border-top:1px solid #ffffff30}
.story-close p{font-size:23px;letter-spacing:-.02em;line-height:1.25}
.brand-story .story-close .text-link{margin-top:0}
@keyframes brand-photo-settle{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes brand-copy-enter{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .hero-content.entering .hero-title-line{animation:brand-copy-enter .7s cubic-bezier(.2,.7,.2,1) both}.hero-content.entering .hero-title-line:nth-child(2){animation-delay:.06s}.hero-content.entering .hero-description{animation:brand-copy-enter .65s .1s both}
 .js-motion .story-origin{transition-delay:.08s}.js-motion .story-visuals{transition-duration:.85s}
}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){.hero:not(.no-auto-motion) .hero-picture.active img{animation:brand-photo-settle 9s ease-out both}.hero.paused .hero-picture.active img{animation-play-state:paused}}
.hero.no-auto-motion .hero-picture img{animation:none}
@media(max-width:1100px) and (min-width:768px){
 .hero h1{font-size:clamp(70px,8.2vw,100px)}.hero-content{width:66%;bottom:24%}.hero-actions{gap:20px}.hero-description{font-size:16px}.slide-buttons{gap:20px}.slide-buttons button{min-width:110px}.hero-photo-actions{gap:20px}.story-heading{gap:45px;grid-template-columns:1.1fr 1fr}.brand-story h2{font-size:clamp(45px,5.4vw,62px)}.story-visuals{gap:25px}.story-inner{padding-block:70px 55px}
}
@media(max-width:767px){
 .hero{height:auto;min-height:100svh;max-height:none;overflow:hidden;padding-bottom:22px}
 .hero-media{position:relative;inset:auto;height:clamp(300px,48svh,470px)}
 .hero-picture img{object-position:70% center;animation:none!important;transform:none}
 .hero-shade{inset:0 0 auto;height:clamp(300px,48svh,470px);background:linear-gradient(0deg,#092a20 0%,#092a2020 24%,transparent 55%),linear-gradient(180deg,#092a2070,transparent 32%)}
 .hero-content{position:relative;inset:auto;width:auto;max-width:none;margin-top:-15px;padding-inline:24px}
 .hero .hero-origin{font-size:11px;letter-spacing:.06em}
 .hero h1{font-size:clamp(49px,14vw,79px);line-height:1.01;letter-spacing:-.04em;margin-top:18px;min-height:2.02em}
 .hero-description{font-size:15px;line-height:1.55;margin-top:18px;max-width:310px;min-height:70px}
 .hero-actions{gap:22px;margin-top:21px;flex-wrap:wrap;row-gap:12px}
 .hero .hero-actions .button{min-height:50px;padding-inline:22px;font-size:14px}.hero .hero-story-link{font-size:13px}
 .hero-controls{position:relative;inset:auto;margin:24px 24px 0;padding-top:8px;gap:13px;align-items:center}
 .slide-buttons{gap:14px;flex:1;justify-content:space-between}.slide-buttons button{font-size:12px;min-width:0;gap:0;min-height:46px}.slide-buttons button>span{display:none}
 .hero-photo-actions{gap:0}.hero-photo-actions .text-link{display:none}.hero .pause-button{width:44px;height:44px}.hero-picture{transition-duration:.55s}
 .brand-story{scroll-margin-top:0}.story-inner{padding-block:55px 40px}.story-heading{display:block}.brand-story h2{font-size:clamp(42px,11.4vw,60px);line-height:1.06;margin-top:20px}
 .story-origin{padding-top:0;margin-top:35px;max-width:none;display:grid;grid-template-columns:115px minmax(0,1fr);gap:25px;align-items:start}.story-year{gap:12px}.story-year strong{font-size:58px;line-height:1}.story-year>span{font-size:11px}.story-origin-copy{margin:0}.story-origin-copy h3{font-size:19px;line-height:1.25}.story-origin-copy p{font-size:14px;line-height:1.65;margin-top:13px}.story-origin-copy .text-link{font-size:13px;margin-top:14px}
 .story-visuals{margin-top:35px;gap:24px;grid-template-columns:1fr}.story-showroom img{aspect-ratio:4/3}.story-detail{width:60%;justify-self:end}.story-detail img{aspect-ratio:1.6}.brand-story figcaption{margin-top:10px;font-size:12px}.story-close{display:block;margin-top:28px;padding-top:24px}.story-close p{font-size:22px}.brand-story .story-close .text-link{margin-top:13px;font-size:14px}
 .js-motion .story-origin{transition-delay:0}
}
@media(max-width:370px){.hero-content{padding-inline:20px}.hero h1{font-size:46px}.hero-controls{margin-inline:20px;gap:12px}.slide-buttons{gap:10px}.slide-buttons button{font-size:11px}.hero-actions{gap:12px}.hero .hero-story-link{font-size:12px}.hero .hero-actions .button{padding-inline:17px;font-size:13px}.story-origin{grid-template-columns:1fr;gap:22px}.story-year{flex-direction:row;justify-content:space-between;align-items:baseline}.story-year strong{font-size:68px}.story-origin-copy p{font-size:15px}.brand-story h2{font-size:39px}}
@media(prefers-reduced-motion:reduce){.hero-picture{transition:none}.hero .hero-picture img,.hero-content.entering *{animation:none!important;transform:none}.js-motion .brand-story .reveal{opacity:1;transform:none;transition:none}}
@media(max-width:767px) and (max-height:740px){.hero-media,.hero-shade{height:clamp(240px,42svh,310px)}}