/* The red strip closes the first viewport; its natural height is part of the flex layout. */
.home-page .home-opening{--opening-chrome:128px;display:flex;flex-direction:column;height:calc(100vh - var(--opening-chrome));height:calc(100dvh - var(--opening-chrome));min-height:0}
.home-page .home-opening .hero{flex:1;min-height:0;height:auto;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-content:normal}
.home-page .home-opening .hero-content{min-width:0;align-self:center;padding-block:clamp(16px,3svh,45px);margin-block:0}
.home-page .home-opening .hero h1{font-size:clamp(42px,min(7.2vw,12svh),110px);line-height:.96;max-width:920px}
.home-page .home-opening .hero .eyebrow{margin-bottom:clamp(12px,2.2svh,24px)}
.home-page .home-opening .hero-lead{margin-block:18px;font-size:clamp(14px,1.25vw,17px);line-height:1.7}
.home-page .home-opening .hero-buttons .button{min-height:50px;padding-block:12px}
.home-page .home-opening .hero-bottom{position:static;inset:auto;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:9px 19px;flex-wrap:nowrap}
.home-page .hero-bottom>span{font-size:10px;letter-spacing:1.2px;margin:0}
.home-page .hero-bottom .hero-discover{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:58px;padding:15px 24px;margin:0;border:1px solid #a65f69;background:linear-gradient(115deg,#482930e8,#642f3be8);color:#fff5f2;font-size:13px;font-weight:600;letter-spacing:1.3px;line-height:1.6;text-decoration:none;box-shadow:0 9px 28px #0003}
.home-page .hero-discover .arrow-right{width:43px;height:24px;margin-left:0}
.home-page .home-opening .service-strip{flex:none}
.home-page .home-opening .service-strip>div{gap:clamp(14px,2.3vw,35px);font-size:clamp(19px,1.65vw,25px);min-height:63px}

/* A shared, quiet cue guides readers through each main section. */
.flow-next{display:flex;justify-content:center;align-items:center;clear:both;position:relative;z-index:2;padding:42px 20px 17px;min-width:0}
.flow-link{display:flex;flex-direction:column;align-items:center;gap:15px;color:var(--accent);text-decoration:none;text-align:center;max-width:100%}
.flow-kicker{font-size:9px;font-weight:600;letter-spacing:1.7px;line-height:1.6;color:var(--muted)}
.flow-arrow{display:grid;place-items:center;min-width:92px;height:55px;border:1px solid var(--line);background:var(--surface);box-shadow:0 7px 20px #00000012}
.flow-arrow .arrow-right{width:42px;height:22px}
.flow-link:hover .flow-arrow{border-color:var(--accent)}
.flow-link:focus-visible{outline-offset:9px}
.home-page .story-flow{padding-top:18px;padding-bottom:6px;align-self:end}
.home-page .process-section .flow-link{color:var(--accent-on-paper)}
.home-page .process-section .flow-kicker{color:#54564d}
.home-page .process-section .flow-arrow{background:#e3ded3;border-color:#a5a799}
.home-page .embroidery-section>.flow-next,.home-page .product-section>.flow-next,.home-page .process-section>.flow-next,.home-page .faq-section>.flow-next{padding-top:0;padding-bottom:35px}
@media(prefers-reduced-motion:no-preference){
 .float-cue{animation:float-cue 3.1s infinite;will-change:transform}
 a:hover.float-cue,a:focus-visible.float-cue,a:hover .float-cue,a:focus-visible .float-cue{animation-play-state:paused}
 @keyframes float-cue{
  0%{transform:translateY(0);opacity:.9;animation-timing-function:cubic-bezier(.2,.55,.35,1)}
  72%{transform:translateY(-8px);opacity:1;animation-timing-function:cubic-bezier(.4,0,.8,.4)}
  100%{transform:translateY(0);opacity:.9}
 }
}
@media(max-width:900px){
 .home-page .home-opening .service-strip>div{white-space:normal;flex-wrap:wrap;justify-content:center;gap:5px 18px;padding:10px 18px;font-size:18px;line-height:1.4;min-height:0}
 .home-page .service-strip b{display:none}.home-page .service-strip span{flex-basis:calc(50% - 18px);text-align:center}
}
@media(max-width:700px){
 .home-page .home-opening{--opening-chrome:104px}
 .home-page .home-opening .hero h1{font-size:clamp(42px,min(10.6vw,11svh),72px)}
 .home-page .home-opening .hero-content{padding-block:18px 8px}
 .home-page .home-opening .hero .eyebrow{font-size:9px;margin-bottom:16px}
 .home-page .home-opening .hero-lead{font-size:14px;line-height:1.6;margin-block:16px;max-width:380px}
 .home-page .home-opening .hero-bottom{justify-content:center;min-height:76px;padding-block:10px 16px}
 .home-page .hero-bottom>span{display:none}
 .home-page .hero-bottom .hero-discover{min-height:52px;font-size:11px;letter-spacing:1.1px;gap:20px;padding:13px 20px}
 .home-page .home-opening .service-strip>div{font-size:16px;padding:9px 12px;gap:4px 12px}
 .flow-next{padding-top:30px}.home-page .story-flow{padding-top:8px}
}
@media(min-width:701px) and (max-height:650px){
 .home-page .home-opening .hero h1{font-size:clamp(42px,min(7vw,11.5svh),78px)}
 .home-page .home-opening .hero-content{padding-block:10px}
 .home-page .home-opening .hero .eyebrow{font-size:10px;margin-bottom:10px}
 .home-page .home-opening .hero-lead{font-size:14px;line-height:1.6;margin-block:13px}
 .home-page .home-opening .hero-bottom{min-height:68px;padding-block:7px 12px}
 .home-page .hero-bottom .hero-discover{min-height:50px;padding-block:11px;font-size:12px}
}
/* On unusually short/zoomed viewports, preserve readable content instead of clipping it. */
@media(max-height:520px), (min-width:701px) and (max-height:580px){
 .home-page .home-opening{height:auto;min-height:calc(100dvh - var(--opening-chrome))}
 .home-page .home-opening .hero{min-height:365px;grid-template-rows:1fr auto}
 .home-page .home-opening .hero-content{padding-block:23px 12px}
}
@media(prefers-reduced-motion:reduce){.float-cue{animation:none}}
@media print{.home-page .home-opening{height:auto}.home-page .home-opening .hero{min-height:0}.flow-next,.home-page .hero-bottom{display:none!important}.float-cue{animation:none}}
@media(min-width:701px) and (max-height:700px){
 .home-page .is-carousel .story-sticky{padding-block:22px 10px;row-gap:10px}
 .home-page .is-carousel .story-heading .lead{margin-block:15px 8px;font-size:18px!important}
 .home-page .is-carousel .story-controls{margin-top:17px}
 .home-page .is-carousel .story-next{margin-top:18px}
 .home-page .is-carousel .scene-visual{height:clamp(210px,35svh,250px)}
 .home-page .story-flow{padding-top:8px;padding-bottom:0}
 .home-page .story-flow .flow-link{gap:10px}
 .home-page .story-flow .flow-arrow{height:48px}
}
