/* Desktop-first breakpoints: 1180 (compact nav), 900 (tablet), 600 (mobile) */
@media (max-width:1180px){
  .site-header__inner{grid-template-columns:1fr auto}
  .menu-toggle{display:grid}
  .tools__cta{display:none}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--space-md) var(--gutter) var(--space-lg);display:none;flex-direction:column;gap:var(--space-md);max-height:calc(100dvh - var(--header-h));overflow:auto}
  .nav.is-open{display:flex}
  .nav__list{flex-direction:column;gap:0}
  .nav__link{padding:1rem 0;font-size:.8125rem;width:100%;border-bottom:1px solid var(--color-border)}
  .nav__link::after{display:none}
  .nav__cta{align-self:stretch}
  .nav__item{position:relative}
  .menu-arrow{display:block;position:absolute;right:0;top:0;width:3.25rem;height:3.25rem}
  .menu-arrow::before{content:"";position:absolute;left:50%;top:50%;width:.55rem;height:.55rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);transition:transform var(--dur-fast) var(--ease)}
  .menu-arrow[aria-expanded="true"]::before{transform:translate(-50%,-30%) rotate(-135deg)}
  .menu{position:static;min-width:0;padding:0 0 .5rem 1rem;border:0;opacity:1;visibility:visible;transform:none;display:none}
  .menu::before{display:none}
  .has-menu:hover>.menu,.has-menu:focus-within>.menu{display:none}
  .has-menu.is-open>.menu{display:block}
  .menu__list{gap:0}
  .menu__item{position:relative;border-bottom:1px solid var(--color-border)}
  .menu__link{display:block;padding:.95rem 3rem .95rem 0;font-size:1.15rem}
  .menu-arrow--sub{width:3rem;height:3rem}
  .menu__sub{display:none;flex-direction:column;gap:0;margin:0 0 .6rem;padding-left:1rem}
  .has-sub.is-open>.menu__sub{display:flex}
  .menu__sub a{display:block;padding:.6rem 0;font-size:.75rem}
}
@media (min-width:1181px){.nav__cta{display:none}.nav{display:block}}

@media (max-width:900px){
  .hero{display:block;min-height:0}
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"intro" "media" "actions" "craft";padding-block:var(--space-md) var(--space-lg)}
  .hero__media{position:relative;inset:auto;grid-area:media;width:auto;margin:var(--space-md) calc(var(--gutter) * -1) 0;aspect-ratio:3/3.6;-webkit-mask-image:none;mask-image:none}
  .hero__media img{position:absolute;inset:0}
  .collections__strip{grid-template-columns:repeat(2,1fr)}
  .create__grid{grid-template-columns:1fr}
  .board{max-width:640px;margin-inline:auto;width:100%}
  .atelier__grid{grid-template-columns:1fr 1fr;grid-template-areas:"copy copy" "left right"}
  .atelier__copy{grid-area:copy}.atelier__img--left{grid-area:left;aspect-ratio:4/5}.atelier__img--right{grid-area:right}
  .footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
}

@media (max-width:600px){
  :root{--header-h:64px}
  .brand__icon{height:40px}.brand__word{height:12px}
  .hero__media{aspect-ratio:2/3}
  .hero__actions{flex-direction:column}.hero__actions .btn{width:100%}
  .hero__craft{flex-direction:column;gap:var(--space-sm)}
  .collections__strip{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(clamp(.75rem,2.6vw,2.5rem) * -1);padding-inline:clamp(.75rem,2.6vw,2.5rem);scroll-padding-inline:clamp(.75rem,2.6vw,2.5rem)}
  .collections__strip::-webkit-scrollbar{display:none}
  .collections__strip>li{flex:0 0 78%;scroll-snap-align:start}
  .col-card__img{aspect-ratio:4/4.6}
  .board{aspect-ratio:1/1.28;margin-right:0}
  .board__cake{left:0;width:68%;height:74%;bottom:auto}
  .board__venue{right:0;top:0;width:38%;aspect-ratio:auto;height:20%}
  .board__floral{right:3%;top:24%;width:32%;aspect-ratio:auto;height:24%}
  .board__fabric{left:auto;right:0;bottom:auto;top:53%;width:36%;aspect-ratio:auto;height:19%}
  .board__note{left:0;bottom:0;top:auto;width:50%;font-size:.8125rem}
  .board__palette{right:0;top:auto;bottom:3%}
  .board__star{left:52%;bottom:14%}
  .create__copy .btn{width:100%}
  .atelier__grid{grid-template-columns:1fr;grid-template-areas:"left" "copy" "right"}
  .atelier__img--right{aspect-ratio:4/4.6}
  .closing__actions{flex-direction:column;width:100%}.closing__actions .btn{width:100%}
  .footer__grid{grid-template-columns:1fr}
}

/* Tablet: keep the craft points inside the porcelain area, clear of the image fade */
@media (min-width:901px) and (max-width:1180px){
  .hero__craft{max-width:calc(50vw - var(--gutter) - 2rem);gap:1rem 1.5rem}
}

@media (min-width:901px) and (max-width:1180px){
  .create__grid{grid-template-columns:minmax(0,36vw) minmax(0,1fr)}
  .board__venue{width:27%}
  .board__floral{width:18%}
  .board__fabric{width:20%}
}

/* Large desktop: keep the palette comfortably inside the composition */
@media (min-width:1600px){
  .board__palette{right:11%}
}
/* Tablet: a little more room between the note and the cake edge */
@media (min-width:901px) and (max-width:1180px){
  .board__note{left:-3%;width:clamp(9.4rem,22%,10.5rem);padding-right:1.1rem}
  .board__star{left:0;bottom:calc(41.5% + .6rem)}
}

/* Tablet: keep the Atelier heading to two lines inside the narrower copy column */
@media (min-width:901px) and (max-width:1180px){
  .atelier__copy{padding:1.75rem}
  .atelier__copy .h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}
}

@media (max-width:600px){
  .br-m{display:inline}
}

/* ===== Wedding & Engagement page ===== */
@media (max-width:1180px) and (min-width:901px){
  .whero__copy{padding-left:2.5rem}
  .wc{gap:2.5rem}
}
@media (max-width:900px){
  .whero__grid{grid-template-columns:1fr;min-height:0}
  .whero__media{aspect-ratio:4/4.6}
  .whero__copy{padding:var(--space-lg) var(--gutter) var(--space-xl)}
  .wintro{padding-top:var(--space-xl)}
  .wcolls__list{gap:var(--space-xl)}
  .wc,.wc--flip{grid-template-columns:1fr;gap:var(--space-md)}
  .wc--flip .wc__img{order:0}
  .wc__img{aspect-ratio:4/4.4}
  .wdetail__grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-md)}
  .wd--2,.wd--3,.wd--4{margin-top:0}
  .wd--2,.wd--4{margin-top:var(--space-lg)}
  .wprocess__list{grid-template-columns:1fr;gap:var(--space-md)}
  .wcreate__grid{grid-template-columns:1fr}
  .wcreate__img{aspect-ratio:4/3.6;max-height:none}
  .wcreate__copy{padding:var(--space-md) var(--gutter) 0}
}
@media (max-width:600px){
  .whero__actions{flex-direction:column;align-items:stretch;align-self:stretch;gap:var(--space-sm)}
  .whero__actions .btn{width:100%}
  .whero__actions .link-arrow{align-self:flex-start}
  .wcreate__actions{flex-direction:column;width:100%}
  .wcreate__actions .btn{width:100%}
}