/* Warm material layer and motion polish */
.hero{background:linear-gradient(180deg,rgba(255,253,248,.98),rgba(246,240,230,.94))}
.site-header{background:rgba(255,253,248,.9);border-color:rgba(163,148,124,.2)}
.hero-stage-shell,.spec-card,.feature-card,.timeline-panel,.about-lead,.about-body-panel,.faq-item{border-color:rgba(164,148,122,.24);background-color:rgba(255,253,248,.9)}
.product-atmosphere{position:relative;padding:clamp(40px,6vw,88px) 0;background:linear-gradient(180deg,rgba(239,231,218,.9),rgba(250,247,241,.96));overflow:hidden}
.product-atmosphere::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.82),transparent 34%),radial-gradient(circle at 82% 72%,rgba(181,157,116,.12),transparent 32%);pointer-events:none}
.product-atmosphere-frame{position:relative;margin:0;border:1px solid rgba(153,133,101,.22);border-radius:32px;background:#e9e0d2;box-shadow:0 32px 80px rgba(83,66,42,.16);overflow:hidden}
.product-atmosphere-frame img{width:100%;aspect-ratio:16/8.4;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.product-atmosphere-frame:hover img{transform:scale(1.018);filter:saturate(1.03) contrast(1.01)}
.feature-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-rows:minmax(300px,auto)!important;grid-auto-flow:row!important;align-items:stretch;gap:18px!important}
.feature-card{position:relative!important;grid-column:span 4!important;grid-row:auto!important;min-width:0!important;width:auto!important;height:auto!important;min-height:300px!important;margin:0!important;inset:auto!important;transform:none;overflow:hidden}
.feature-card:nth-child(1),.feature-card:nth-child(5){grid-column:span 8!important}
.feature-card::after{content:''!important;display:block!important;position:absolute;right:-48px;bottom:-58px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(188,163,119,.12),transparent 68%);pointer-events:none;transition:transform .45s ease}
.feature-card:hover::after{transform:scale(1.22)}
@keyframes milkRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes milkTitle{from{opacity:.2;transform:translateY(12px);letter-spacing:-.06em}to{opacity:1;transform:none;letter-spacing:-.045em}}
@keyframes sectionTitleReveal{0%{opacity:0;transform:translateY(18px);letter-spacing:-.065em;filter:blur(5px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;letter-spacing:-.045em;filter:none}}
@keyframes titleSheen{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes cardTitleReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes heroHeadlineLive{0%,100%{transform:translateY(0);background-position:0% 50%;filter:drop-shadow(0 8px 24px rgba(93,73,41,.05))}50%{transform:translateY(-2px);background-position:100% 50%;filter:drop-shadow(0 12px 30px rgba(93,73,41,.11))}}
@keyframes sectionSheenLive{0%,72%,100%{background-position:110% 0}88%{background-position:-10% 0}}
@keyframes eyebrowLive{0%,100%{opacity:.76;letter-spacing:.1em}50%{opacity:1;letter-spacing:.115em}}
@keyframes milkGlow{0%,100%{box-shadow:0 0 0 4px rgba(23,92,211,.08)}50%{box-shadow:0 0 0 7px rgba(23,92,211,.025)}}
.hero-copy h1{position:relative;background:linear-gradient(108deg,#292a23 0%,#292a23 34%,#a58b61 48%,#292a23 62%,#292a23 100%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:milkTitle .85s cubic-bezier(.16,1,.3,1) both,heroHeadlineLive 7s .9s ease-in-out infinite}.hero-copy .hero-text{animation:milkRise .75s .12s ease-out both}.hero-actions{animation:milkRise .75s .22s ease-out both}.eyebrow{animation:eyebrowLive 5s ease-in-out infinite}.eyebrow::before{animation:milkGlow 3.2s ease-in-out infinite}
.section-heading h2,.about-lead h2{background:linear-gradient(105deg,var(--ui-ink) 0 38%,#8d7652 48%,var(--ui-ink) 58% 100%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.section-heading.is-visible h2{animation:sectionTitleReveal .82s cubic-bezier(.16,1,.3,1) both,titleSheen 1.15s .48s ease-out both,sectionSheenLive 9s 1.8s ease-in-out infinite}
.feature-card h3,.timeline-copy h3,.app-card h4{transition:transform .28s cubic-bezier(.16,1,.3,1),color .28s ease}
.reveal-stagger.is-visible .feature-card h3,.timeline-panel.is-visible .timeline-copy h3,.reveal-stagger.is-visible .app-card h4{animation:cardTitleReveal .58s .12s cubic-bezier(.16,1,.3,1) both}
.feature-card:hover h3,.app-card:hover h4{transform:translateX(5px);color:var(--ui-brand)}
.timeline-panel:hover .timeline-copy h3{transform:translateY(-2px)}
.about-grid{position:relative;display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;gap:0!important;min-height:540px;border:1px solid rgba(126,107,77,.24);border-radius:32px;background:#1c211f;box-shadow:0 34px 90px rgba(74,57,34,.17);overflow:hidden;isolation:isolate}
.about-grid::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.about-lead{position:relative;display:flex!important;flex-direction:column;justify-content:flex-start;min-width:0;padding:clamp(44px,5vw,64px)!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(21,25,24,.2),rgba(17,20,19,.93)),url('design-work/pictures/sougpt-milk-studio.png') center/cover no-repeat!important;overflow:hidden}
.about-lead::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,12,11,.2),transparent 48%),radial-gradient(circle at 15% 12%,rgba(221,204,174,.22),transparent 34%);pointer-events:none}
.about-lead>*{position:relative;z-index:1}.about-lead .eyebrow{color:#d9c7a6}.about-lead .eyebrow::before{background:#d9c7a6;box-shadow:0 0 0 4px rgba(217,199,166,.15)}
.about-lead h2{max-width:780px;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(34px,4vw,55px);line-height:1.13;text-wrap:balance;text-shadow:0 10px 34px rgba(0,0,0,.24);animation:none!important}
.about-body-panel{position:relative;display:flex!important;align-items:center;padding:clamp(40px,5vw,68px)!important;border:0!important;border-radius:0!important;background:linear-gradient(145deg,#fffdf8,#eee5d7)!important;box-shadow:none!important;overflow:hidden}
.about-body-panel::before{content:'“'!important;display:block!important;position:absolute;right:28px;top:12px;color:rgba(151,123,82,.13);font:700 150px/1 Georgia,serif}
.about-body-panel::after{content:'';position:absolute;right:-90px;bottom:-100px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(174,144,99,.13),transparent 68%)}
.about-body{position:relative;z-index:1;margin:0!important;color:#3f433d!important;font-size:clamp(18px,1.55vw,22px)!important;line-height:1.9!important;letter-spacing:.005em}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{animation:milkRise .7s cubic-bezier(.16,1,.3,1) both}
.reveal-stagger.is-visible>*{animation:milkRise .62s cubic-bezier(.16,1,.3,1) both}.reveal-stagger.is-visible>*:nth-child(2){animation-delay:.05s}.reveal-stagger.is-visible>*:nth-child(3){animation-delay:.1s}.reveal-stagger.is-visible>*:nth-child(4){animation-delay:.15s}.reveal-stagger.is-visible>*:nth-child(5){animation-delay:.2s}.reveal-stagger.is-visible>*:nth-child(6){animation-delay:.25s}
.button,.model-btn,.faq-question,.timeline-item{transition-timing-function:cubic-bezier(.16,1,.3,1)!important}
@media(max-width:960px){.feature-card,.feature-card:nth-child(1),.feature-card:nth-child(5){grid-column:span 6}.product-atmosphere-frame{border-radius:24px}.about-grid{grid-template-columns:1fr!important}.about-lead{min-height:480px}.about-body-panel{min-height:300px}}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr!important}.feature-card,.feature-card:nth-child(1),.feature-card:nth-child(5){grid-column:auto}.product-atmosphere{padding:28px 0}.product-atmosphere-frame img{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.hero-copy h1,.hero-copy .hero-text,.hero-actions,.eyebrow,.eyebrow::before,.section-heading h2,.about-lead h2,.feature-card h3,.timeline-copy h3,.app-card h4,.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible,.reveal-stagger.is-visible>*{animation:none!important;filter:none!important}.hero-copy h1,.section-heading h2{background:none;color:var(--ui-ink);-webkit-text-fill-color:currentColor}.about-lead h2{color:#fff!important;-webkit-text-fill-color:#fff!important}.product-atmosphere-frame img{transition:none}}