.brand-story{ --muted:#beb9b0; --motion-ease:cubic-bezier(.18,.7,.25,1); scroll-padding-top:32px; }
.brand-story{ background:#111110; overflow-x:clip; }
.brand-story,.brand-story button,.brand-story a{ -webkit-font-smoothing:antialiased; }
.brand-story [hidden]{ display:none!important; }
.brand-story .preview-bar{ display:flex; justify-content:space-between; gap:24px; padding:15px 5%; border-bottom:1px solid #5f4935; background:#282019; font-size:12px; letter-spacing:.8px; line-height:1.6; color:#e1bda2; }
.brand-story .preview-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 5%; border-bottom:1px solid var(--line); }
.brand-story .motion-controls{ display:flex; gap:12px; }
.brand-story .motion-controls button{ display:flex; align-items:center; gap:10px; background:transparent; border:1px solid #5d4a3a; color:#dbcec1; font-size:13px; padding:12px 15px; border-radius:3px; transition:background .25s,border-color .25s; min-height:44px; }
.brand-story .motion-controls button:hover{ background:#33251b; border-color:var(--copper); }
.brand-story .motion-controls button:disabled{ opacity:.7; cursor:default; }
.brand-story .motion-controls button>span:first-child{ font-size:18px; }
.brand-story .reading-progress{ position:fixed; top:0; left:0; right:0; z-index:100; height:3px; pointer-events:none; }
.brand-story .reading-progress i{ display:block; width:100%; height:100%; background:#e1b18a; transform:scaleX(var(--read-progress,0)); transform-origin:left; }
.brand-story .craft-hero{ position:relative; min-height:690px; min-height:clamp(660px,81svh,880px); overflow:hidden; display:flex; align-items:center; isolation:isolate; }
.brand-story .hero-media{ position:absolute; inset:-65px -35px; transform:translate3d(var(--pointer-x,0px),var(--photo-y,0px),0); will-change:transform; }
.brand-story .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:75% center; animation:photo-drift 16s ease-in-out infinite alternate; }
.brand-story .craft-shade{ position:absolute; inset:0; background:linear-gradient(90deg,#111110f5 2%,#111110d9 26%,#1111103d 78%),linear-gradient(0deg,#111110e6,transparent 35%); }
.brand-story .copper-light{ position:absolute; width:80%; height:110%; left:40%; top:-20%; background:radial-gradient(ellipse,#e4ab6e25,transparent 65%); mix-blend-mode:screen; pointer-events:none; animation:light-drift 10s ease-in-out infinite alternate; }
.brand-story .craft-content{ position:relative; padding:65px 8% 125px; width:100%; transform:translate3d(0,var(--copy-y,0px),0); }
.brand-story .eyebrow{ font-size:13px; line-height:1.7; letter-spacing:2.2px; color:#e2b28e; }
.brand-story .small-line{ height:1px; width:34px; display:inline-block; background:#c9a180; vertical-align:middle; margin-right:13px; }
.brand-story .craft-content h2{ font-size:clamp(48px,5.4vw,82px); line-height:1.15; letter-spacing:-3.3px; font-weight:400; margin:28px 0; max-width:none; }
.brand-story .title-mask{ display:block; overflow:hidden; padding:0 0 .1em; margin-bottom:-.1em; }
.brand-story .title-mask>span,.brand-story .title-mask>em{ display:inline-block; }
.brand-story .craft-content em{ background:linear-gradient(110deg,#c5916b 5%,#eac8ac 28%,#bb8054 48%,#e6ba98 72%,#c5916b 95%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:copper-sheen 10s ease-in-out infinite; }
.brand-story .craft-content p{ font-size:18px; line-height:1.85; color:#ded8d0; max-width:630px; margin:26px 0 0; }
.brand-story .craft-link{ display:inline-flex; gap:56px; align-items:center; margin-top:34px; font-size:16px; font-weight:500; color:#ecd2bc; border-bottom:1px solid #b9926d; padding:10px 0 14px; }
.brand-story .craft-link>span{ font-size:25px; animation:arrow-drift 2.8s ease-in-out infinite; }
.brand-story .craft-link:hover{ color:#fff4e9; }
.brand-story .film-caption{ position:absolute; bottom:32px; left:8%; right:8%; display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #a27c5066; padding-top:23px; color:#cbb9a8; font-size:12px; letter-spacing:1.4px; line-height:1.6; }
.brand-story .film-caption a{ display:flex; align-items:center; gap:18px; }
.brand-story .film-caption a span{ font-size:21px; animation:arrow-drift 2.8s .4s ease-in-out infinite; }
.brand-story .craft-materials{ max-width:1400px; margin:auto; padding:95px 7% 50px; }
.brand-story .craft-intro{ display:flex; justify-content:space-between; gap:50px; align-items:flex-end; }
.brand-story .craft-intro h2{ font-size:clamp(36px,3.4vw,48px); font-weight:400; letter-spacing:-1.7px; line-height:1.25; margin:22px 0 0; }
.brand-story .craft-intro>p{ font-size:17px; line-height:1.9; color:#c4beb5; max-width:395px; margin:0 0 4px; }
.brand-story .craft-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:60px; border-top:1px solid #5a4533; border-bottom:1px solid #5a4533; }
.brand-story .craft-steps article{ position:relative; min-width:0; padding:60px 27px 35px; border-right:1px solid #43372c; transition:background .6s; }
.brand-story .craft-steps article:first-child{ padding-left:0; }
.brand-story .craft-steps article:last-child{ border-right:0; }
.brand-story .craft-steps article:hover,.brand-story .craft-steps article:focus-within{ background:linear-gradient(0deg,#7a503317,transparent); }
.brand-story .step-number{ position:absolute; right:26px; top:21px; font-size:13px; color:#c3a17f; }
.brand-story .craft-steps h3{ font-size:25px; font-weight:500; margin:31px 0 14px; letter-spacing:-.4px; }
.brand-story .craft-steps p{ font-size:17px; line-height:1.85; color:#c4beb5; min-height:94px; margin:0; }
.brand-story .material-symbol{ height:75px; color:var(--copper); font-family:Manrope,sans-serif; font-size:43px; display:flex; gap:18px; align-items:center; letter-spacing:-2px; }
.brand-story .material-symbol>span{ animation:metal-float 5s ease-in-out infinite; }
.brand-story .material-symbol>span:nth-child(2){ color:#e1dfdb; animation-delay:-1.7s; }
.brand-story .material-symbol>span:nth-child(3){ animation-delay:-3.3s; }
.brand-story .layer-art{ height:75px; width:155px; position:relative; }
.brand-story .layer-art>i{ position:absolute; left:12px; top:0; width:130px; height:34px; border:1px solid #d5ae87; background:#33271d; transform:skewY(-12deg); box-shadow:0 10px 15px #0002; animation:layer-breathe 6s ease-in-out infinite; --lift:-13px; }
.brand-story .layer-art>i:nth-child(2){ top:14px; left:8px; background:#5a4633; --lift:-5px; }
.brand-story .layer-art>i:nth-child(3){ top:28px; left:4px; background:#241c17; --lift:3px; }
.brand-story .layer-art>i:nth-child(4){ top:42px; left:0; background:#775b40; --lift:11px; }
.brand-story .measurement-art{ height:75px; display:flex; align-items:center; }
.brand-story .measurement-art svg{ height:70px; width:180px; stroke:#d5ad88; stroke-width:1.8; fill:none; }
.brand-story .measurement-art .axes{ stroke:#80664f; stroke-width:1; }
.brand-story .measurement-art .signal{ animation:signal-flow 6s linear infinite; }
.brand-story .detail-link{ display:inline-flex; align-items:center; gap:30px; font-size:15px; color:#e1bda2; margin-top:20px; padding:10px 0; }
.brand-story .detail-link span{ transition:transform .35s; }
.brand-story .detail-link:hover span{ transform:translate(4px,-4px); }
.brand-story .step-line{ display:block; height:1px; width:50px; margin-top:44px; background:#b18a64; transition:width .8s var(--motion-ease); }
.brand-story article:hover .step-line{ width:100px; }
.brand-story .sound-interlude{ max-width:1220px; margin:15px auto 70px; padding:30px 5%; display:flex; align-items:center; justify-content:center; gap:40px; color:#d0ad8c; font-size:12px; letter-spacing:2px; overflow:hidden; }
.brand-story .sound-bars{ height:55px; width:270px; display:flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.brand-story .sound-bars i{ display:block; width:2px; height:var(--bar-height,30px); background:linear-gradient(#a77046,#e0b38c); transform:scaleY(.45); animation:sound-rise var(--bar-speed,3s) var(--bar-delay,0s) ease-in-out infinite alternate; }
.brand-story .craft-ending{ max-width:1400px; margin:0 auto 100px; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:60px; padding:0 5%; }
.brand-story .craft-ending h2{ font-size:clamp(34px,3vw,43px); line-height:1.3; letter-spacing:-1.6px; font-weight:400; margin:24px 0 0; }
.brand-story .craft-ending .button{ margin-top:34px; font-size:16px; padding:20px 25px; transition:transform .4s,background .4s,box-shadow .4s; }
.brand-story .craft-ending .button:hover{ transform:translateY(-4px); box-shadow:0 14px 34px #cf9c781c; background:#e1b798; }
.brand-story .craft-ending .button span{ transition:transform .4s; }
.brand-story .craft-ending .button:hover span{ transform:translate(3px,-3px); }
.brand-story .ending-frame{ position:relative; overflow:hidden; border:1px solid #765639; height:350px; }
.brand-story .ending-frame img{ height:120%; width:100%; max-width:none; object-fit:cover; filter:brightness(.88); transform:translateY(var(--ending-y,-8%)) scale(1.04); will-change:transform; }
.brand-story .image-corner{ position:absolute; inset:20px; border:1px solid #d2ad7e55; pointer-events:none; transition:inset .8s; }
.brand-story .ending-frame:hover .image-corner{ inset:12px; }
.brand-story .preview-note{ padding:30px 8%; background:#211d18; border-top:1px solid #4d4033; font-size:14px; line-height:1.9; color:#c4beb5; }
.brand-story .preview-note strong{ color:#e1bda2; font-weight:500; font-size:15px; }
.brand-story .preview-note p{ max-width:1100px; margin:10px 0 0; }
.brand-story.motion-ready:not(.motion-paused) .title-mask>span,.brand-story.motion-ready:not(.motion-paused) .title-mask>em{ animation:heading-enter 1.35s .12s var(--motion-ease) both; }
.brand-story.motion-ready:not(.motion-paused) .title-mask>em{ animation:heading-enter 1.35s .3s var(--motion-ease) both,copper-sheen 10s 1.6s ease-in-out infinite; }
.brand-story.motion-ready:not(.motion-paused) .hero-enter{ animation:hero-enter 1.2s .1s var(--motion-ease) both; }
.brand-story.motion-ready:not(.motion-paused) .hero-description{ animation-delay:.4s; }
.brand-story.motion-ready:not(.motion-paused) .craft-link{ animation-delay:.55s; }
.brand-story.motion-ready [data-reveal]{ opacity:0; transform:translate3d(0,46px,0); transition:opacity 1s var(--motion-ease),transform 1.1s var(--motion-ease); transition-delay:var(--reveal-delay,0ms); }
.brand-story.motion-ready [data-reveal=left]{ transform:translate3d(-38px,24px,0); }
.brand-story.motion-ready [data-reveal=right]{ transform:translate3d(38px,24px,0); }
.brand-story.motion-ready [data-reveal].is-in{ opacity:1; transform:none; }
.brand-story.motion-paused *,.brand-story.page-hidden *{ animation-play-state:paused!important; }
.brand-story.motion-paused [data-reveal]{ opacity:1; transform:none; transition:none; }
.brand-story.motion-paused .hero-media,.brand-story.motion-paused .craft-content{ transform:none; }
.brand-story.motion-paused .ending-frame img{ transform:translateY(-8%) scale(1.04); }
.brand-story.motion-paused .title-mask>span,.brand-story.motion-paused .title-mask>em,.brand-story.motion-paused .hero-enter{ opacity:1; transform:none; }
.brand-story.motion-paused{ scroll-behavior:auto; }
@keyframes photo-drift{ from{transform:scale(1.035) translateX(-10px)} to{transform:scale(1.12) translateX(20px)} }
@keyframes light-drift{ from{transform:translate(-12%,-3%);opacity:.35} to{transform:translate(8%,5%);opacity:.85} }
@keyframes copper-sheen{ 0%,100%{background-position:0% center} 50%{background-position:100% center} }
@keyframes arrow-drift{ 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(5px)} }
@keyframes metal-float{ 0%,100%{transform:translateY(3px)} 50%{transform:translateY(-5px)} }
@keyframes layer-breathe{ 0%,100%{transform:skewY(-12deg) translateY(0)} 50%{transform:skewY(-12deg) translateY(var(--lift))} }
@keyframes signal-flow{ to{transform:translateX(90px)} }
@keyframes sound-rise{ from{transform:scaleY(.35);opacity:.55} to{transform:scaleY(1);opacity:1} }
@keyframes heading-enter{ from{opacity:0;transform:translate3d(0,112%,0) rotate(2deg)} to{opacity:1;transform:none} }
@keyframes hero-enter{ from{opacity:0;transform:translate3d(0,25px,0)} to{opacity:1;transform:none} }
@media(max-width:1000px){.brand-story .craft-intro{gap:30px}
.brand-story .craft-intro>p{max-width:330px}
.brand-story .craft-steps article{padding-right:18px;padding-left:18px}
.brand-story .craft-steps p{font-size:16px}
.brand-story .craft-ending{gap:35px}
.brand-story .film-caption{letter-spacing:.8px}}
@media(max-width:800px){.brand-story .preview-header{padding:20px 5%;flex-wrap:wrap}
.brand-story .preview-header .wordmark{font-size:24px}
.brand-story .preview-bar{font-size:12px;flex-direction:column;gap:4px;letter-spacing:.5px}
.brand-story .preview-bar>span:last-child{color:#cfbbab}
.brand-story .motion-controls{gap:8px}
.brand-story .motion-controls button{font-size:13px;padding:10px 12px}
.brand-story .craft-hero{min-height:660px}
.brand-story .craft-content{padding:65px 6% 125px}
.brand-story .craft-content h2{font-size:clamp(42px,7.7vw,61px);letter-spacing:-2.3px}
.brand-story .craft-content p{font-size:17px;max-width:500px}
.brand-story .craft-shade{background:linear-gradient(90deg,#111110ee,#11111060),linear-gradient(0deg,#111110,transparent 70%)}
.brand-story .film-caption{left:6%;right:6%;font-size:12px;letter-spacing:.7px;flex-wrap:wrap;gap:12px}
.brand-story .film-caption>a{display:none}
.brand-story .craft-materials{padding:70px 6% 25px}
.brand-story .craft-intro{display:block}
.brand-story .craft-intro>p{font-size:17px;margin-top:24px;max-width:540px}
.brand-story .craft-intro h2{font-size:39px}
.brand-story .craft-steps{grid-template-columns:1fr;margin-top:38px}
.brand-story .craft-steps article,.brand-story .craft-steps article:first-child{padding:55px 15px 28px;border-right:0;border-bottom:1px solid #514132}
.brand-story .craft-steps article:last-child{border-bottom:0}
.brand-story .craft-steps p{font-size:17px;min-height:0}
.brand-story .step-line{margin-top:28px}
.brand-story .detail-link{margin-top:14px}
.brand-story .sound-interlude{gap:20px;flex-wrap:wrap;font-size:12px;letter-spacing:1.4px;margin:10px auto 55px}
.brand-story .sound-bars{width:100%;order:-1}
.brand-story .craft-ending{grid-template-columns:1fr;gap:36px;padding:0 6%;margin-bottom:65px}
.brand-story .craft-ending h2{font-size:37px}
.brand-story .ending-frame{height:330px}
.brand-story .preview-note{padding:26px 6%;font-size:14px}
.brand-story .eyebrow{font-size:12px;letter-spacing:1.7px}}
@media(max-width:440px){.brand-story .craft-content h2{font-size:clamp(34px,10.1vw,44px);letter-spacing:-1.7px}
.brand-story .craft-content p{font-size:17px}
.brand-story .craft-hero{min-height:650px}
.brand-story .craft-content{padding-top:45px}
.brand-story .craft-intro h2{font-size:35px}
.brand-story .craft-ending h2{font-size:33px}
.brand-story .ending-frame{height:270px}
.brand-story .craft-link{font-size:16px}
.brand-story .film-caption{gap:6px}
.brand-story .film-caption>span{flex-basis:100%}
.brand-story .motion-controls{width:100%}
.brand-story .motion-controls button{flex:1;justify-content:center}
.brand-story .preview-header{gap:17px}}
@media(prefers-reduced-motion:reduce){.brand-story{ scroll-behavior:auto; }
.brand-story *,.brand-story *::before,.brand-story *::after{ animation:none!important; transition:none!important; }
.brand-story.motion-ready [data-reveal],.brand-story.motion-ready .hero-enter{ opacity:1; transform:none; }
.brand-story .hero-media,.brand-story .craft-content{ transform:none; }
.brand-story .ending-frame img{ transform:translateY(-8%) scale(1.04); }
.brand-story .sound-bars i{ transform:scaleY(.65); }}
.brand-toolbar{display:flex;justify-content:flex-end;padding:20px 5%;border-top:1px solid #453425;background:#171410}.brand-story{scroll-margin-top:90px}.brand-story .craft-content h2{color:#f0eee9}