/* Floating navigation and coordinated editorial motion. */
:root{--motion-ease:cubic-bezier(.22,.68,.25,1);--section-gutter:3%;--nav-gutter:28px;--nav-radius:28px}
html{scroll-padding-top:135px}body{padding-top:124px}
.header{position:fixed;top:20px;left:28px;right:28px;height:88px;padding:0 32px;border-radius:28px;border:0;box-shadow:0 8px 30px #1e2e2814;transition:height .45s var(--motion-ease),top .45s var(--motion-ease),box-shadow .45s}
.header.is-compact{height:72px;top:12px;box-shadow:0 8px 28px #1e2e2824}
.header .brand{height:72px;width:170px;transition:width .45s var(--motion-ease),height .45s var(--motion-ease)}.header.is-compact .brand{height:60px;width:150px}
.header nav>a:not(.nav-cta){position:relative;padding:10px 0;color:#fff;transition:translate .3s var(--motion-ease)}
.header nav>a:not(.nav-cta):after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--motion-ease)}
.header nav>a:not(.nav-cta):hover,.header nav>a:not(.nav-cta):focus-visible{color:white;translate:0 -2px}
.header nav>a:not(.nav-cta):hover:after,.header nav>a:not(.nav-cta):focus-visible:after{transform:scaleX(1);transform-origin:left}
.hero{height:calc(100svh - 124px)}
.button,.nav-cta{transition:background .35s,color .35s,transform .35s var(--motion-ease),box-shadow .35s}.button:hover,.nav-cta:hover{transform:translateY(-3px);box-shadow:0 8px 18px #1e2e2815}
.text-link{position:relative;border-bottom-color:transparent}.text-link:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(.24);transform-origin:left;transition:transform .45s var(--motion-ease)}.text-link:hover:after,.text-link:focus-visible:after{transform:scaleX(1)}
.place h3{width:fit-content;position:relative;transition:translate .4s var(--motion-ease)}.place h3:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--motion-ease)}.place:hover h3{translate:4px 0}.place:hover h3:after{transform:scaleX(1)}
.motion-item{transition:opacity .85s var(--motion-ease) var(--reveal-delay,0ms),translate .95s var(--motion-ease) var(--reveal-delay,0ms)}.motion-waiting{opacity:0;translate:0 22px}.motion-heading{opacity:1;translate:none}
.word-mask{display:inline-block!important;overflow:clip;vertical-align:top;padding-top:.24em;margin-top:-.24em;padding-bottom:.2em;margin-bottom:-.2em;color:inherit!important}.word-ink{display:inline-block!important;color:inherit!important;translate:0 0;transition:translate 1s var(--motion-ease) var(--word-delay,0ms),opacity .8s ease var(--word-delay,0ms)}.motion-waiting .word-ink{translate:0 140%;opacity:0}
.motion-waiting:focus-within{opacity:1;translate:none}.motion-waiting:focus-within .word-ink{translate:none;opacity:1}
.home-picture,.region-story figure{overflow:hidden}.home-picture>img,.region-story figure>img,.hero-photo>img{transform:translate3d(0,var(--parallax-y,0px),0) scale(1.045);transition:scale 1s var(--motion-ease)}.home-picture:hover>img,.region-story figure:hover>img{transform:translate3d(0,var(--parallax-y,0px),0) scale(1.045);scale:1.012}.home-picture.motion-waiting>img,.region-story.motion-waiting img{scale:1.04}
.wholesale-images img{transition:scale 1.1s var(--motion-ease),filter .6s,clip-path 1.1s var(--motion-ease);clip-path:inset(0 round 24px)}.wholesale-images .motion-waiting img{scale:1.04;clip-path:inset(2% round 24px)}
.trade-points,.principles article,.market-heading{position:relative;border-color:transparent}.trade-points:before,.principles article:before,.market-heading:before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:currentColor;opacity:.22;transform:scaleX(1);transform-origin:left;transition:transform 1.1s var(--motion-ease) .12s}.market-heading:before{top:auto;bottom:0}.motion-waiting.trade-points:before,.motion-waiting.market-heading:before,.principles article.motion-waiting:before{transform:scaleX(0)}
.region-retail{border-top:1px solid #00704a30;margin-top:50px;padding-top:25px;display:flex;justify-content:space-between;align-items:center;gap:30px}.region-retail p{font-size:14px;line-height:1.7}
.hub-main{padding:55px 6% 0}.hub-heading h1{color:var(--green);font-size:clamp(52px,7.5vw,110px);line-height:1.02;letter-spacing:-.055em;margin:25px 0}.hub-heading p:last-child{line-height:1.8}.hub-filters{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 20px}.hub-filters button{cursor:pointer;border:1px solid var(--green);background:white;color:var(--green);border-radius:30px;padding:12px 20px}.hub-filters button[aria-pressed=true]{color:white;background:var(--green)}.filter-status{font-size:12px;margin-bottom:25px}.hub-place{display:grid;grid-template-columns:70px 1fr 1fr;gap:25px;border-top:1px solid var(--line);padding:30px 0;align-items:center}.hub-place[hidden]{display:none}.hub-place h2{color:var(--green);font-size:clamp(30px,4vw,55px);letter-spacing:-.04em}.hub-place p{font-size:14px;line-height:1.8}.hub-place .eyebrow{margin-bottom:10px}.hub-place>span{color:var(--red);font-size:13px}.hub-photo{height:380px;margin:45px 0 0;border-radius:35px;overflow:hidden}.hub-home{margin-top:30px}
@media(max-width:1000px){.header{padding:0 24px}.header nav{gap:22px}.hero{height:calc(100svh - 124px)}}
@media(max-width:700px){html{scroll-padding-top:108px}body{padding-top:100px}.header{top:12px;left:14px;right:14px;height:76px;border-radius:24px;padding:0 20px}.header .brand{width:140px;height:62px}.header.is-compact{height:64px;top:8px}.header.is-compact .brand{width:128px;height:56px}.header nav{top:calc(100% + 8px);border-radius:24px;padding:15px 24px 24px;box-shadow:0 10px 30px #1e2e2826;max-height:calc(100svh - 120px);overflow:auto}.header nav>a:not(.nav-cta){padding:16px 0}.header nav>a:not(.nav-cta):after{bottom:10px}.hero{height:calc(100svh - 100px)}.region-retail{flex-direction:column;align-items:start;margin-top:30px;gap:20px}.region-retail p{font-size:13px}.region-retail .button{gap:20px;font-size:11px}.hub-main{padding-top:30px}.hub-place{grid-template-columns:30px 1fr;gap:15px}.hub-place>p{grid-column:2}.hub-photo{height:300px}.hub-filters button{font-size:12px;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-item,.motion-waiting{opacity:1;translate:none}.word-ink,.motion-waiting .word-ink{translate:none;opacity:1}.hero-photo>img,.home-picture>img,.region-story figure>img{transform:none!important;scale:1!important}.wholesale-images img{scale:1!important;clip-path:none!important}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.motion-waiting,.motion-waiting .word-ink{opacity:1;translate:none}.header{position:static}body{padding-top:0}}
.button.motion-item{transition:opacity .85s var(--motion-ease) var(--reveal-delay,0ms),translate .95s var(--motion-ease) var(--reveal-delay,0ms),background .35s,color .35s,transform .35s var(--motion-ease),box-shadow .35s}
@media(prefers-reduced-motion:reduce){.button.motion-item{transition:none}}
@media(max-width:360px){.hero-actions .button{padding:15px 12px;gap:8px;font-size:11px;white-space:nowrap}}

/* Only the homepage sits beneath the floating navigation. Keep the hub inset. */
.home-page{padding-top:0}
.home-page .header{z-index:30}
.home-page .hero{height:100svh;min-height:804px;max-height:1224px;isolation:isolate}
.home-page .hero-copy{padding-top:169px}
@media(min-width:701px) and (max-height:800px){.home-page .hero{min-height:714px}.home-page .hero-copy{padding-top:152px}}
@media(max-width:700px){.home-page .hero{height:100svh;min-height:720px;max-height:1050px}.home-page .hero-copy{padding-top:135px}}
@media(min-width:701px) and (max-width:900px){.header .brand{width:140px;flex-shrink:0}.header nav{gap:18px;font-size:12px}.header nav>a{white-space:nowrap}.header .nav-cta{padding:13px 16px}.header .nav-cta span{margin-left:12px}}

/* Reveal clipping belongs to the animated ink, never to a permanent line box.
   Expanded final bounds protect accents, descenders and font-swap metrics. */
.word-mask{overflow:visible!important;padding:.3em 0;margin:-.3em 0}
/* Grid/flex items must be allowed to shrink to their allocated track.
   Animated words keep their reveal, but no longer impose an unbreakable width. */
main :where(section,article,div,figure){min-inline-size:0}
main :is(h1,h2,h3){overflow-wrap:anywhere}
.word-mask,.word-ink{max-inline-size:100%;overflow-wrap:inherit;hyphens:auto}
.word-ink{clip-path:inset(-1em);transition:translate 1s var(--motion-ease) var(--word-delay,0ms),opacity .8s ease var(--word-delay,0ms),clip-path 1s var(--motion-ease) var(--word-delay,0ms)}
.motion-waiting .word-ink{clip-path:inset(0 0 100%);translate:0 110%;opacity:0}
.motion-waiting:focus-within .word-ink{clip-path:inset(-1em)}
main h1,main h2,main h3{overflow:visible;height:auto;max-height:none}
.header nav a,.button,button,.nav-cta{white-space:nowrap}
.button>span,.nav-cta>span{flex-shrink:0}
.hero-actions{flex-wrap:wrap}
.hero-actions .button{flex:0 0 auto;min-width:180px}
.footer-legal{display:flex;flex-wrap:wrap;gap:20px;font-size:11px}
.footer-legal a{white-space:nowrap;text-underline-offset:5px}
.footer-legal a:hover,.footer-legal a:focus-visible{text-decoration:underline}
.place:focus-within h3{translate:4px 0}.place:focus-within h3:after{transform:scaleX(1)}
@media(max-width:1100px) and (min-width:901px){.header nav{gap:20px;font-size:13px}.header .brand{width:145px}.header .nav-cta{padding:14px 18px}.nav-cta span{margin-left:15px}}
@media(max-width:1199px){
 .menu-toggle{display:flex;align-items:center;gap:12px;border:0;background:none;color:white;font-size:13px;padding:12px 0}
 .menu-toggle span{display:block;width:20px;height:9px;border-top:1px solid;border-bottom:1px solid}
 .header nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--green);color:white;flex-direction:column;align-items:stretch;gap:0;padding:15px 24px 24px;border-radius:24px;box-shadow:0 10px 30px #1e2e2826;max-height:calc(100svh - 130px);overflow:auto}
 .header nav.open{display:flex}.header nav>a:not(.nav-cta){padding:16px 0;font-size:16px}.header nav .nav-cta{display:flex;justify-content:space-between;padding:14px 18px;margin-top:10px;font-size:14px}
}
@media(max-width:700px){.hero-actions{gap:10px}.hero-actions .button{min-width:0;flex:0 1 auto;padding:15px 16px;gap:14px;font-size:12px}.footer-bottom{align-items:start}.footer-legal{flex-basis:100%;gap:20px}}
@media(max-width:360px){.hero-actions .button{font-size:11px;padding:15px 12px;gap:9px}.closing .button{padding:15px 13px;gap:12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.word-ink,.motion-waiting .word-ink{clip-path:none;translate:none;opacity:1;transition:none}}
@media print{.word-ink,.motion-waiting .word-ink{clip-path:none;translate:none;opacity:1}}

/* Both strokes morph together, driven by the accessible menu state. */
.menu-toggle{min-height:44px;cursor:pointer}
.menu-toggle span{position:relative;border:0;width:20px;height:9px}
.menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;left:0;top:4px;width:20px;height:1px;background:currentColor;transform-origin:center;transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
.menu-toggle span::before{transform:translateY(-4px)}
.menu-toggle span::after{transform:translateY(4px)}
.menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-toggle span::before,.menu-toggle span::after{transition:none}}

/* Match dark panels to the existing large-section inset, and footer to navbar. */
main :is(.wholesale,.remembrance-request){margin-inline:var(--section-gutter);max-width:calc(100% - 2 * var(--section-gutter))}
.header{left:var(--nav-gutter);right:var(--nav-gutter);border-radius:var(--nav-radius)}
footer{margin-inline:var(--nav-gutter);max-width:calc(100% - 2 * var(--nav-gutter));margin-bottom:var(--nav-gutter);border-radius:var(--nav-radius)}
@media(max-width:700px){:root{--section-gutter:4%;--nav-gutter:14px;--nav-radius:24px}}

/* Shared navigation and footer: retain the existing brand and floating shell. */
.header nav>.nav-bouquet{display:none}
@media(max-width:1199px){.header nav>.nav-bouquet{display:flex;justify-content:space-between;border-top:1px solid currentColor;font-weight:600}}
.header .brand{flex-shrink:0}
@media(min-width:1200px){
 .header{gap:40px}
 .header nav{gap:32px;flex-shrink:0}
 .header nav>a{white-space:nowrap}
}
footer .footer-top{grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding-bottom:30px}
footer .footer-top p{font-size:14px;line-height:1.5;letter-spacing:0;font-weight:400;opacity:.8;padding-top:0}
footer .back-top{display:block;padding:12px 0;min-height:44px}
.footer-groups{display:grid;grid-template-columns:1fr .9fr 1.3fr .9fr;align-items:start;gap:32px;padding:28px 0 30px;border-top:1px solid #ffffff30}
.footer-group{min-width:0;align-self:start;margin:0;padding:0}
.footer-group h2{font-size:19px;line-height:1.3;min-height:1.3em;letter-spacing:-.02em;margin:0 0 12px;padding:0}
.footer-group nav{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:0;font-size:13px;line-height:1.5}
.footer-group nav a{display:flex;align-items:center;min-height:44px;max-width:100%;padding:8px 0;white-space:normal;text-underline-offset:5px}
.footer-group nav a:hover,.footer-group nav a:focus-visible{text-decoration:underline}
footer a:focus-visible,.header a:focus-visible,.header button:focus-visible{outline-color:white}
footer .footer-bottom{align-items:center;font-size:11px;gap:16px}
@media(min-width:701px) and (max-width:1199px){.footer-groups{grid-template-columns:1fr 1fr;gap:28px 48px}}
@media(max-width:700px){
 footer .footer-top{grid-template-columns:auto 1fr;gap:20px;padding-bottom:24px}
 footer .back-top{grid-column:1 / -1;justify-self:start}
 .footer-groups{grid-template-columns:1fr;gap:24px;padding-top:24px}
 .footer-group+.footer-group{border-top:1px solid #ffffff30;padding-top:24px}
 .footer-group nav{font-size:14px}
 .footer-group h2{font-size:21px;margin-bottom:8px}
 footer .footer-bottom{align-items:flex-start}
}
@media(max-width:360px){footer .footer-top{grid-template-columns:1fr;gap:12px}}

/* Stage 1: cap inner editorial content; preserve full-width section surfaces.
   Each max() starts at the existing inset, so smaller layouts are unchanged. */
@media (min-width:1720px) {
 body > .header { left:max(28px,calc(50vw - 832px)); right:max(28px,calc(50vw - 832px)); }
 body > footer :is(.footer-top,.footer-groups,.footer-bottom) { max-width:1600px; margin-inline:auto; }
}
@media (min-width:1818.182px) {
 body main > section:is(.intro,.home-flowers,.b2c-everyday,.b2c-season,.b2c-moments,.occasion-stories,.occasion-craft,.occasion-image,.local-selection,.local-arrival):not(.stage-two),
 body .hero > .hero-copy,
 body.b2b-page main > .b2b-hero {
  padding-inline:calc(50vw - 800px);
 }
 /* These sections already have 6% margins and no horizontal padding. */
 body main > section:is(.craft,.b2c-craft,.local-barn,.local-floristry,.bouquet-service):not(.remembrance-selection) {
  padding-inline:max(0px,calc(44vw - 800px));
 }
 /* The 3% shell margin is retained. Borders match the C simulation (1598px). */
 body main > section:is(.region,.local-hours):not(.stage-two) {
  padding-inline:max(3.2vw,calc(47vw - 800px));
 }
 body main > section.wholesale:not(.stage-two) {
  padding-inline:max(6vw,calc(47vw - 800px));
 }
 /* Location assortment panels are pending their individual decision. */
 body.b2b-location main > section.wholesale:not(.stage-two) { padding-inline:6%; }
 body main > .local-quicklinks { padding-inline:calc(50vw - 800px); }
 body main > .occasion-remembrance { padding-inline:max(30px,calc(44vw - 800px)); }
}
/* Stage 2: only the approved functional content axes, at most 1500px inside.
   Preserve existing shells, percentage margins and all smaller layouts. */
@media (min-width:1704.546px) {
 body.contact-page main > .contact-direct,
 body main.hub-main,
 body.bouquet-page main > .bouquet-opening,
 body.remembrance-page main > .remembrance-guidance {
  padding-inline:max(6vw,calc(50vw - 750px));
 }
 body.contact-page main > :is(.contact-routing,.contact-locations),
 body.bouquet-page main > .bouquet-layout {
  max-width:1500px;
  margin-inline:auto;
 }
 body.contact-page main > .contact-form-section {
  padding-inline:max(3.2vw,calc(47vw - 751px));
 }
 body.remembrance-page main > .remembrance-selection {
  padding-inline:max(0px,calc(44vw - 750px));
 }
 body.remembrance-page main > .remembrance-request {
  padding-inline:max(6vw,calc(47vw - 750px));
 }
 body.tour-page .tour-process > .tour-steps {
  max-width:1500px;
  margin-inline:auto;
 }
}

/* Mobile navigation: reserve the underline for the current page. */
@media(max-width:1199px){
 .header nav>.nav-bouquet { border-top:0; }
 .header nav>a:not(.nav-cta):hover:after,.header nav>a:not(.nav-cta):focus-visible:after { transform:scaleX(0); }
 .header nav>a:not(.nav-cta)[aria-current="page"]:after { transform:scaleX(1); }
}
