*,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{overflow-x:hidden}
  body{margin:0;background:#fbf8f4;color:#37302f;font-family:"Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  a{color:#7a5f66;text-decoration:none}
  a:hover{color:#4b3e42}
  button{font:inherit;color:inherit;cursor:pointer}
  img{display:block;max-width:100%}
  h1,h2,h3{margin-top:0;text-wrap:balance;overflow-wrap:break-word}
  ::selection{color:#fffdf9;background:#7a5f66}
  :focus-visible{outline:2px solid #c7af7c;outline-offset:3px}
  section[id]{scroll-margin-top:130px}
  .skip{position:absolute;left:-9999px;top:0;z-index:200}
  .skip:focus{left:12px;top:12px;padding:12px 18px;background:#fbf8f4;color:#37302f;border:1px solid #7a5f66;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  @keyframes cueDrift{0%{transform:translateY(0);opacity:.35}45%{transform:translateY(9px);opacity:1}100%{transform:translateY(0);opacity:.35}}
  @keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .service-ticker-track{display:flex;width:max-content;animation:tickerRun 34s linear infinite}
  .service-ticker-set{flex:0 0 auto;min-width:100vw;display:flex;align-items:center;justify-content:space-around;gap:30px;padding-inline:clamp(18px,2.4vw,34px);font-family:'Instrument Serif',Georgia,serif;font-size:20px;color:rgba(251,248,244,.66);white-space:nowrap}
  @keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes plateRise{from{opacity:0;transform:translateY(26px) rotate(1.6deg)}to{opacity:1;transform:translateY(0) rotate(1.6deg)}}
  .hv-rise{animation:heroRise .9s cubic-bezier(.2,.8,.2,1) both}
  .hv-plate{animation:plateRise 1.05s cubic-bezier(.2,.8,.2,1) .12s both}
  @media (min-width:901px){.hv-plate{transform:rotate(1.1deg);transform-origin:right center}}
  .hv-nav a{position:relative;white-space:nowrap;color:inherit}
  .hv-nav a::after{content:"";position:absolute;left:13px;right:100%;bottom:11px;height:1px;background:#e5cfa4;transition:right .28s cubic-bezier(.2,.8,.2,1)}
  .hv-nav a:hover::after{right:13px}
  .hv-nav .hv-cta::after{display:none}
  #top > header{
    background:linear-gradient(180deg,rgba(24,15,17,.42) 0%,rgba(24,15,17,.18) 72%,rgba(24,15,17,0) 100%);
    text-shadow:0 2px 14px rgba(16,10,12,.78),0 1px 3px rgba(16,10,12,.72)
  }
  #top > header .hv-cta{background:rgba(30,20,22,.18)!important;box-shadow:0 8px 28px rgba(16,10,12,.12)}
  #top > header .hv-cta:hover,
  #top > header .hv-cta:focus-visible{
    color:#fffdf9!important;
    background:rgba(94,66,75,.78)!important;
    border-color:#e5cfa4!important;
    box-shadow:0 10px 30px rgba(16,10,12,.24)
  }
  .hv-grid{display:flex;align-items:center;gap:clamp(22px,2.8vw,44px)}
  @media (min-width:901px){
    .hv-grid{align-items:stretch;justify-content:space-between}
    .hv-plate{display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:0}
    .hv-plate-inner{flex:0 1 auto;display:flex;max-height:min(560px,100%)}
    .hv-video{height:100%;aspect-ratio:auto;min-height:360px}
  }
  .plate-lift{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
  .plate-lift:hover{transform:translateY(-6px) rotate(0deg)!important;box-shadow:0 30px 60px rgba(58,39,44,.3)!important}
  /* Hero reel is visual atmosphere, not a separate card. */
  .hv-cap,.hv-silent{display:none!important}
  /* Keep a separate still above Safari's blocked-playback UI. The video stays
     visually hidden until playback has genuinely started, so Low Power Mode
     can never expose Safari's native play button. */
  .hv-video-poster{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:1;transition:opacity .28s ease;pointer-events:none;backface-visibility:hidden}
  .hv-video-poster-desktop{display:none}
  /* The still is the permanent first-paint base, not merely an error state.
     Safari can leave play() pending indefinitely in Low Power Mode, so this
     must exist before any autoplay result is known. */
  #top .hv-plate-inner{background:#2e2124 url("assets/hero-gloria-cups-poster-v1.jpg?v=20260801") 60% center/cover no-repeat!important}
  .hv-video{position:relative;z-index:2;visibility:hidden;opacity:0;transition:opacity .2s ease;pointer-events:none}
  .hv-plate-inner.is-playing .hv-video{visibility:visible;opacity:1}
  .hv-plate-inner.is-playing .hv-video-poster{opacity:0}
  /* Once Safari denies autoplay (commonly Low Power Mode), remove the media
     surface from layout entirely. This prevents WebKit's compositor from
     drawing its native play badge above the poster, even when controls=false. */
  .hv-plate-inner.is-fallback .hv-video{display:none!important;visibility:hidden!important;opacity:0!important}
  .hv-plate-inner.is-fallback{background:#2e2124 url("assets/hero-gloria-cups-poster-v1.jpg?v=20260801") 60% center/cover no-repeat!important}
  .hv-plate-inner.is-fallback .hv-video-poster{display:block!important;z-index:20;opacity:1!important;visibility:visible!important}
  .hv-video::-webkit-media-controls,
  .hv-video::-webkit-media-controls-panel,
  .hv-video::-webkit-media-controls-start-playback-button,
  .hv-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
  @media (min-width:901px){
    /* Let the new hero video continue behind the navigation. The header itself
       stays transparent instead of showing the older standalone hero image. */
    #top{isolation:isolate}
    #top > header{z-index:10!important}
    .hv-still{display:none!important}
    .hv-body{position:static!important;overflow:hidden}
    .hv-body::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,9,11,.5) 0%,rgba(8,9,11,.2) 34%,rgba(8,9,11,.06) 64%,rgba(8,9,11,0) 100%)}
    .hv-grid{position:static;isolation:auto}
    .hv-col{position:relative;z-index:2;max-width:740px;padding:52px 42px 46px;background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
    .hv-plate{position:absolute;inset:0;z-index:0;display:block!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;transform:none!important;animation:none!important}
    .hv-plate-inner{display:block!important;max-height:none!important;height:100%;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
    .hv-video-poster-mobile{display:none}
    .hv-video-poster-desktop{display:block;object-position:60% center}
    .hv-video{width:100%;height:100%;min-height:0!important;aspect-ratio:auto!important;object-fit:cover;object-position:60% center}
  }
  .rail{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;-webkit-user-select:none}
  .rail::-webkit-scrollbar{display:none}
  .rail.is-drag{cursor:grabbing}
  .gal-fig{flex:none;width:172px;cursor:zoom-in}
  .gal-fig+.gal-fig{margin-left:-14px}
  .gal-mat{border:7px solid #fffdf9;border-radius:3px;box-shadow:0 18px 38px rgba(58,39,44,.2);height:218px}
  .gal-fig:nth-child(3n+1){width:158px;transform:rotate(-2.2deg) translateY(10px);z-index:1}
  .gal-fig:nth-child(3n+2){width:198px;transform:rotate(1.5deg);z-index:3}
  .gal-fig:nth-child(3n+2) .gal-mat{height:262px;border-width:8px;box-shadow:0 24px 50px rgba(58,39,44,.27)}
  .gal-fig:nth-child(3n+3){width:146px;transform:rotate(-1.4deg) translateY(20px);z-index:2}
  .gal-fig:nth-child(3n+3) .gal-mat{height:188px}
  .gal-fig:nth-child(6n+5){transform:rotate(2.6deg) translateY(-12px)}
  .gal-fig:hover .gal-mat{transform:translateY(-6px);box-shadow:0 30px 60px rgba(58,39,44,.3)}
  .gal-mat{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;contain:paint}
  .rail{will-change:scroll-position}
  .shop-card,.svc-ex>div,.plate-lift{contain:paint}
  .card-hov{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
  .card-hov:hover{transform:translateY(-5px);box-shadow:0 28px 58px rgba(58,39,44,.2)}
  .svc-ex>div{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
  .svc-ex:hover>div{transform:translateY(-5px);box-shadow:0 26px 52px rgba(58,39,44,.26)}
  .svc-row{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;gap:clamp(28px,4.4vw,84px);padding:clamp(32px,3.6vw,54px) 0}
  .svc-row+.svc-row{border-top:1px solid rgba(74,56,58,.18)}
  .svc-ex{margin:0}
  .svc-ex>div{border-width:6px!important;aspect-ratio:16/10!important;box-shadow:0 10px 26px rgba(58,39,44,.12)!important}
  .svc-ex:hover>div{transform:none;box-shadow:0 16px 34px rgba(58,39,44,.17)!important}
  .svc-ex figcaption{display:none}
  .shop-card{display:flex;flex-direction:column;background:#fbf8f4;border:1px solid rgba(74,56,58,.14);border-radius:18px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
  .shop-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(58,39,44,.16);border-color:rgba(199,175,124,.7)}
  .shop-card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .shop-card:hover img{transform:scale(1.035)}
  @media (max-width:900px){
    .svc-row{grid-template-columns:1fr!important;gap:20px;padding:30px 0}
    .svc-ex>div{aspect-ratio:3/2!important}
  }
  .faq details{border-bottom:1px solid rgba(74,56,58,.16)}
  .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;font-family:"Instrument Serif",Georgia,serif;font-size:23px;letter-spacing:-.02em;color:#37302f;transition:color .2s ease}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:#7a5f66}
  .faq summary i{flex:0 0 auto;font-style:normal;font-family:"Manrope";font-size:17px;font-weight:400;color:#ab888f;transition:transform .25s ease}
  .faq details[open] summary i{transform:rotate(45deg);color:#7a5f66}
  .faq details p{margin:0 0 22px;max-width:640px;font-size:14.5px;line-height:1.75;color:#796f6c}
  .fld{display:flex;flex-direction:column;gap:8px;font-size:9.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,248,244,.66)}
  .fld input,.fld select,.fld textarea{font:inherit;font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#fffdf9;background:rgba(255,253,249,.06);border:1px solid rgba(255,253,249,.2);border-radius:11px;padding:14px 14px;min-height:50px;transition:border-color .2s ease,background .2s ease}
  .fld textarea{min-height:118px;resize:vertical}
  .fld input::placeholder,.fld textarea::placeholder{color:rgba(251,248,244,.4)}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:#e5cfa4;background:rgba(255,253,249,.1)}
  .fld select option{color:#37302f}
  .chip{transition:background .2s ease,border-color .2s ease,color .2s ease}
  .chip:hover{border-color:#e5cfa4;color:#fffdf9;background:rgba(255,253,249,.1)}
  .ftr a{color:rgba(251,248,244,.72);transition:color .18s ease}
  .ftr a:hover{color:#e5cfa4}
  @media (max-width:1040px){.hv-nav{display:none!important}.hv-burger{display:flex!important}}
  @media (max-width:900px){
    .announcement-bar{gap:10px!important;padding:7px 8px!important;font-size:8.3px!important;letter-spacing:.055em!important}
    .announcement-bar i{display:none}
    #top{min-height:calc(100svh - 36px)!important}
    .hv-grid{flex-direction:column;align-items:center;text-align:center;gap:0}
    .hv-col{align-items:center!important;text-align:center;position:relative;z-index:3;padding:30px 20px 26px;background:linear-gradient(180deg,rgba(28,16,21,.2),rgba(28,16,21,.34));border:1px solid rgba(255,250,247,.13);border-radius:26px;box-shadow:0 18px 52px rgba(22,12,16,.2);-webkit-backdrop-filter:blur(3px) saturate(1.04);backdrop-filter:blur(3px) saturate(1.04)}
    .hv-trust{justify-content:center}.hv-actions{justify-content:center}.hv-cue{display:none!important}
    .hv-still{display:none}
    .hv-body{position:static!important}
    /* Keep the cups vivid on small screens while preserving a dark base for
       the headline and calls to action. */
    .hv-mscrim{display:block!important;background:linear-gradient(180deg,rgba(22,14,16,.42) 0%,rgba(22,14,16,.18) 30%,rgba(22,14,16,.42) 62%,rgba(22,14,16,.84) 100%)!important}
    .hv-video{filter:brightness(.9) saturate(1.12) contrast(1.05)}
    .hv-col h1{text-shadow:0 3px 32px rgba(18,10,12,1),0 1px 5px rgba(18,10,12,.96)}
    .hv-col p{color:#fffdf9!important;text-shadow:0 2px 20px rgba(18,10,12,1),0 1px 4px rgba(18,10,12,.96)}
    .hv-col > p:first-child{color:#f5e3bd!important}
    .hv-trust{color:rgba(255,253,249,.95)!important;text-shadow:0 2px 14px rgba(18,10,12,.96),0 1px 3px rgba(18,10,12,.7)}
    .hv-plate{position:absolute;inset:0;z-index:0;width:100%;max-width:none!important;height:100%;margin:0!important;transform:none!important;animation:none!important}
    .hv-plate-inner{border:0!important;border-radius:0!important;box-shadow:none!important;height:100%;background:transparent!important}
    .hv-video{height:100%;aspect-ratio:auto!important;object-fit:cover;object-position:60% center}
    .hv-body{padding:42px 28px 64px!important}
    .hv-col h1{margin-bottom:26px!important;font-size:clamp(62px,16vw,76px)!important;line-height:.93!important}
    .hv-col > p:first-child{margin-bottom:22px!important;font-size:11.8px!important}
    .hv-col > p:not(:first-child){max-width:390px!important;margin-bottom:34px!important;font-size:16.5px!important;line-height:1.66!important}
    .hv-actions{width:100%;gap:15px!important;margin-bottom:32px!important}
    .hv-actions a{min-height:64px!important;font-size:12.6px!important}
    .hv-trust{gap:16px!important;font-size:10.8px!important}
    .hv-cap{position:absolute;left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:0!important;background:none!important}
    .hv-cap-text,.hv-silent{display:none!important}
    .stack{flex-direction:column!important}
    .service-ticker-set{gap:22px;padding-inline:18px;font-size:17px}
    /* Desktop inline flex-basis values become fixed vertical heights when
       these editorial layouts stack on a phone. */
    .stack > *{flex:0 0 auto!important;width:100%}
    .stack > [style*="position: sticky"]{position:static!important;top:auto!important}
    .craft-figs{max-width:420px;margin-inline:auto}
    .occ{grid-template-columns:1fr 1fr!important}
    .menu-plate{display:none!important}
    .mbar{display:flex!important}
  }
  @media (max-width:900px) and (max-height:760px){
    .hv-body{padding:22px 22px 30px!important}
    .hv-col{padding:12px 14px 10px!important}
    .hv-col h1{margin-bottom:18px!important;font-size:clamp(56px,14.5vw,68px)!important}
    .hv-col > p:first-child{margin-bottom:15px!important;font-size:10.5px!important}
    .hv-col > p:not(:first-child){margin-bottom:22px!important;font-size:15px!important;line-height:1.5!important}
    .hv-actions{gap:10px!important;margin-bottom:22px!important}
    .hv-actions a{min-height:58px!important}
    .hv-trust{gap:11px!important;font-size:9.6px!important}
  }
  @media (max-width:620px){.occ{grid-template-columns:1fr!important}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}