/* ==========================================================================
   SALASAR — Home (Compact). Same design system (Fraunces + Manrope, brand red,
   warm neutrals); layout is new. Everything is scoped under .hc / .hc-*.
   ========================================================================== */
.hc{ --hc-gap: clamp(4.2rem, 8vw, 7.5rem); --hc-ox: #46100f; --hc-red-lift: color-mix(in srgb, var(--brand-red) 74%, #fff); }

/* ---------------------------------- HERO ---------------------------------- */
.hc-hero{ position:relative; min-height:100vh; min-height:100svh; background:var(--near-black); color:#fff; overflow:hidden; isolation:isolate; }
.hc-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s; }
.hc-slide.is-active{ opacity:1; visibility:visible; transition-delay:0s; }
.hc-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.09); transition: transform 9s linear; }
.hc-slide.is-active .hc-slide-img{ transform:scale(1); }
.hc-slide::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,14,.2) 0%, rgba(20,16,14,.18) 40%, rgba(20,16,14,.82) 100%), linear-gradient(90deg, rgba(20,16,14,.5) 0%, rgba(20,16,14,0) 60%); }
.hc-slide-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom: clamp(8.5rem, 12vw, 10rem); }
.hc-kicker{ display:flex; align-items:center; gap:.7rem; font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--stone); }
.hc-kicker::before{ content:''; width:34px; height:1px; background: var(--brand-red); }
.hc-title{ margin-top:1.3rem; font-family:var(--font-display); font-weight:400; font-size: clamp(2.6rem, 6.1vw, 5.5rem); line-height:1.03; max-width:16ch; text-wrap:balance; }
.hc-title em{ font-style:italic; color: var(--hc-red-lift); }
.hc-sub{ margin-top:1.5rem; max-width:40ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height:1.6; color: var(--stone); }
.hc-actions{ margin-top:2.2rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.hc-slide-copy > *{ opacity:0; transform:translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hc-slide.is-active .hc-slide-copy > *{ opacity:1; transform:none; }
.hc-slide.is-active .hc-slide-copy > :nth-child(1){ transition-delay:.35s; }
.hc-slide.is-active .hc-slide-copy > :nth-child(2){ transition-delay:.48s; }
.hc-slide.is-active .hc-slide-copy > :nth-child(3){ transition-delay:.62s; }
.hc-slide.is-active .hc-slide-copy > :nth-child(4){ transition-delay:.76s; }
/* entrance waits for the preloader (only when JS armed it) */
.hc-hero.is-armed:not(.is-ready) .hc-slide-copy > *{ opacity:0 !important; transform:translateY(22px) !important; transition:none !important; }

.hc-hero-nav{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hc-hero-nav .container{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.hc-count{ font-family:var(--font-display); font-size:1rem; color:rgba(255,255,255,.8); letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.hc-count b{ font-weight:400; color:#fff; font-size:1.5rem; }
.hc-thumbs{ display:flex; gap:.65rem; }
.hc-thumb{ position:relative; width:clamp(62px, 7.4vw, 108px); aspect-ratio:4/3; padding:0; border:0; border-radius:3px; overflow:hidden; background:#000; cursor:pointer; opacity:.58; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.hc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); }
.hc-thumb:hover, .hc-thumb.is-active{ opacity:1; }
.hc-thumb:hover{ transform:translateY(-3px); }
.hc-thumb-label{ position:absolute; left:.45rem; bottom:.6rem; z-index:2; font-size:.58rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#fff; }
.hc-thumb-bar{ position:absolute; left:0; bottom:0; z-index:3; height:3px; width:100%; background:var(--brand-red); transform:scaleX(0); transform-origin:left; }
.hc-thumb.is-active .hc-thumb-bar{ animation: hcBar 7s linear forwards; }
.hc-hero.is-paused .hc-thumb-bar, .hc-hero.is-armed:not(.is-ready) .hc-thumb-bar{ animation-play-state:paused; }
@keyframes hcBar{ to{ transform:scaleX(1); } }

@media (max-width:760px){
  .hc-hero{ min-height:100vh; min-height:100svh; }
  .hc-slide-copy{ padding-bottom:9.5rem; }
  .hc-hero-nav .container{ flex-direction:column; align-items:stretch; gap:.9rem; }
  .hc-count{ display:none; }
  .hc-thumbs{ gap:.4rem; }
  .hc-thumb{ flex:1; width:auto; }
}

/* ---------------------------------- INTRO --------------------------------- */
.hc-intro{ padding-block: var(--hc-gap); }
.hc-intro-grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items:center; }
.hc-lede{ margin-top:1.5rem; font-family:var(--font-display); font-weight:300; font-size: clamp(1.7rem, 3.1vw, 2.75rem); line-height:1.22; max-width:30ch; }
.hc-lede em{ font-style:italic; color:var(--brand-red); }
.hc-intro .intro-foot{ margin-top:2.2rem; }
.hc-intro-media{ position:relative; aspect-ratio: 1 / 1.08; }
.hc-intro-media .ph{ position:absolute; border-radius:3px; overflow:hidden; }
.hc-intro-media .a{ left:0; top:0; width:68%; aspect-ratio:4/5; }
.hc-intro-media .b{ right:0; bottom:0; width:54%; aspect-ratio:1/1; border:8px solid var(--warm-white); box-shadow: 0 30px 60px -30px rgba(20,16,14,.45); }
.hc-stats{ margin-top: clamp(3rem, 6vw, 5.5rem); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.hc-stats .stat{ text-align:left; padding:1.8rem 1.5rem 0 0; }
.hc-stats .stat + .stat{ padding-left:1.5rem; border-left:1px solid var(--line); }
.hc-stats .figure{ color:var(--near-black); font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.hc-stats .label{ color:var(--taupe); margin-top:.7rem; }
@media (max-width:900px){
  .hc-intro-grid{ grid-template-columns:1fr; }
  .hc-intro-media{ max-width:520px; }
  .hc-stats{ grid-template-columns:repeat(2,1fr); row-gap:.5rem; }
  .hc-stats .stat:nth-child(3){ padding-left:0; border-left:0; }
  .hc-stats .stat:nth-child(n+3){ border-top:1px solid var(--line); margin-top:1.4rem; }
}

/* ------------------------------ COLLECTIONS ------------------------------- */
.hc-collections{ background:var(--hc-ox); color:#fff; padding-block: var(--hc-gap); }
.hc-col-head{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.hc-col-head h2{ font-family:var(--font-display); font-weight:400; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height:1.08; }
.hc-btn-light{ display:inline-flex; align-items:center; gap:.6rem; background:var(--warm-white); color:var(--near-black); padding:.95rem 1.6rem; border-radius:2px; font-weight:700; font-size:.84rem; letter-spacing:.02em; transition: background .3s var(--ease), transform .3s var(--ease); }
.hc-btn-light:hover{ background:#fff; transform:translateY(-2px); }
.hc-col-grid{ margin-top: clamp(2.2rem, 4.5vw, 4rem); display:grid; grid-template-columns: minmax(230px,.82fr) minmax(0,3fr); gap: clamp(1.6rem, 4.5vw, 4.5rem); align-items:start; }
.hc-col-tabs{ list-style:none; margin:0; padding:0; }
.hc-tab{ width:100%; display:block; text-align:left; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.18); padding:1.15rem 0; color:rgba(255,255,255,.55); font-family:inherit; font-size:1.08rem; font-weight:600; cursor:pointer; transition: color .3s var(--ease), border-color .3s var(--ease); }
.hc-tab:hover{ color:#fff; }
.hc-tab[aria-selected="true"]{ color:#fff; border-bottom-color:#fff; }
.hc-tab-name{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.hc-tab-name::after{ content:'→'; opacity:0; transform:translateX(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hc-tab[aria-selected="true"] .hc-tab-name::after{ opacity:1; transform:none; }
.hc-tab-desc{ display:block; max-height:0; overflow:hidden; font-size:.86rem; font-weight:400; line-height:1.55; color:rgba(255,255,255,.68); transition: max-height .5s var(--ease), margin .5s var(--ease); }
.hc-tab[aria-selected="true"] .hc-tab-desc{ max-height:5.5rem; margin-top:.55rem; }
.hc-col-panel{ display:none; grid-template-columns:repeat(3, minmax(0,1fr)); gap: clamp(.9rem, 2vw, 1.8rem); }
.hc-col-panel.is-active{ display:grid; animation: hcPanel .6s var(--ease) both; }
@keyframes hcPanel{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hc-card{ display:block; }
.hc-card-img{ aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.08); }
.hc-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1s var(--ease); }
.hc-card:hover .hc-card-img img{ transform:scale(1.06); }
.hc-card-name{ display:inline-block; margin-top:.9rem; padding-bottom:3px; font-size:.95rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.7); }
.hc-brandline{ margin-top: clamp(2.2rem, 4vw, 3.4rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.7rem; font-size:.9rem; color:rgba(255,255,255,.68); }
.hc-brandline a{ color:#fff; font-weight:600; border-bottom:1px solid transparent; transition: border-color .3s var(--ease); }
.hc-brandline a:hover{ border-bottom-color:#fff; }
@media (max-width:900px){
  .hc-col-grid{ grid-template-columns:1fr; }
  .hc-col-tabs{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
  .hc-col-tabs::-webkit-scrollbar{ display:none; }
  .hc-col-tabs li{ flex:none; }
  .hc-tab{ width:auto; border:1px solid rgba(255,255,255,.28); border-radius:100px; padding:.6rem 1.1rem; font-size:.9rem; white-space:nowrap; }
  .hc-tab[aria-selected="true"]{ background:#fff; color:var(--near-black); border-color:#fff; }
  .hc-tab-name::after, .hc-tab-desc{ display:none; }
}
@media (max-width:640px){
  .hc-col-panel{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.4rem; }
  .hc-card{ scroll-snap-align:start; }
}

/* ---------------------------- SECTION SPACING ----------------------------- */
.hc .hc-mat, .hc .hc-surface{ padding-block: var(--hc-gap); }

/* -------------------------------- NETWORK --------------------------------- */
.hc-network-wrap{ background:var(--near-black); color:var(--warm-white); padding-block: var(--hc-gap); }
.hc-network{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items:center; }
.hc-network h2{ font-family:var(--font-display); font-weight:400; font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.1; margin-top:1rem; }
.hc-network .lead{ margin-top:1.1rem; color:var(--stone); line-height:1.7; max-width:42ch; }
.hc-network .actions{ margin-top:1.8rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.hc-cities{ margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; line-height:1.9; color:rgba(255,255,255,.6); }
.hc-map-frame{ position:relative; }
.hc-map-frame #salasar-live-map{ height:clamp(340px, 42vw, 470px); border-radius:4px; overflow:hidden; background:#1b1613; }
.hc-legend{ margin-top:.9rem; display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.78rem; color:rgba(255,255,255,.62); }
.hc-legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.5rem; border:2px solid var(--brand-red); background:var(--brand-red); vertical-align:-1px; }
.hc-legend i.o{ background:#fff; }
@media (max-width:900px){ .hc-network{ grid-template-columns:1fr; } }

/* --------------------------------- TRUST ---------------------------------- */
.hc-trust{ padding-block: var(--hc-gap); }
.hc-trust .cert-grid{ margin-top:2rem; }
.hc-faq{ margin-top: clamp(4rem, 7vw, 6.5rem); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr); gap: clamp(2rem, 6vw, 6rem); align-items:start; }
.hc-faq h2{ font-family:var(--font-display); font-weight:400; font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.1; margin-top:1rem; }
.hc-faq h2 em{ font-style:italic; color:var(--brand-red); }
.hc-faq .side p{ margin-top:1.1rem; color:var(--taupe); line-height:1.7; max-width:34ch; }
.hc-faq .side .btn{ margin-top:1.6rem; }
@media (max-width:900px){ .hc-faq{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){
  .hc-slide, .hc-slide-img, .hc-slide-copy > *{ transition-duration:.01ms !important; transition-delay:0s !important; }
  .hc-thumb.is-active .hc-thumb-bar{ animation:none; transform:scaleX(1); }
  .hc-col-panel.is-active{ animation:none; }
}

/* ---------------- HERO: designed banner images (text is part of the image) ---------------- */
.hc-slide::after{ display:none; }
.hc-slide-img{ transform:none !important; transition:none; object-position:center; }
.hc-slide-link{ position:absolute; inset:0; z-index:1; }
/* the HTML headline stays for screen readers / SEO, visually replaced by the banner text */
.hc-slide-copy{ position:absolute; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hc-hero-nav{ z-index:4; }

/* Phones, small tablets and any portrait screen: show the WHOLE banner (never cropped) on top,
   headline + button underneath, thumbnails below that. */
@media (max-width:900px), (max-aspect-ratio:3/2){
  .hc-hero{ display:grid; min-height:0; background:#1a0d0e; padding-top:calc(var(--tb, 0px) + 84px); }
  .hc-slide{ position:relative; grid-area:1 / 1; inset:auto; display:flex; flex-direction:column; }
  .hc-slide-img{ position:relative; inset:auto; height:auto; aspect-ratio:16 / 9; width:100%; object-fit:cover; }
  .hc-slide-link{ display:none; }
  .hc-slide-copy{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; padding:1.3rem 1.4rem .6rem !important; }
  .hc-slide-copy .hc-kicker{ display:none; }
  .hc-title{ margin-top:0; font-size:clamp(1.7rem, 7vw, 2.4rem); max-width:none; }
  .hc-sub{ margin-top:.7rem; font-size:.95rem; }
  .hc-actions{ margin-top:1.1rem; }
  .hc-hero-nav{ position:relative; grid-area:2 / 1; padding:.4rem 0 1.4rem; }
  .hc-count{ display:none; }
  .hc-hero-nav .container{ justify-content:center; }
  .hc-thumbs{ width:100%; gap:.4rem; }
  .hc-thumb{ flex:1; width:auto; }
}

/* mobile hero: the banner already carries the headline — keep only one centred button */
@media (max-width:900px), (max-aspect-ratio:3/2){
  .hc-slide-copy .hc-title, .hc-slide-copy .hc-sub, .hc-actions .btn-outline-light{ display:none; }
  .hc-slide-copy{ padding:1.2rem 1.4rem .4rem !important; }
  .hc-actions{ margin-top:0; justify-content:center; }
  .hc-actions .btn{ min-width:220px; justify-content:center; }
}

/* =================== Home v3 (client round) =================== */
.hc{ --hc-gap: clamp(3rem, 5.5vw, 4.8rem); }
/* hero: dots + arrows + CTAs instead of thumbnails */
.hc-hero-nav .container{ align-items:center; }
.hc-cta-pair{ display:flex; gap:.7rem; }
.hc-cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.25rem; border-radius:99px; font-size:.88rem; font-weight:700; color:#fff; background:rgba(26,13,14,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); transition:background .3s var(--ease), transform .3s var(--ease); }
.hc-cta:hover{ background:var(--brand-red); border-color:var(--brand-red); transform:translateY(-2px); }
.hc-cta-wa{ background:#25d366; border-color:#25d366; color:#fff; }
.hc-cta-wa:hover{ background:#1fb858; border-color:#1fb858; }
.hc-cta-wa svg{ width:18px; height:18px; }
.hc-dots-wrap{ display:flex; align-items:center; gap:.9rem; }
.hc-arrow{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(26,13,14,.4); backdrop-filter:blur(6px); display:grid; place-items:center; cursor:pointer; transition:background .3s var(--ease); }
.hc-arrow:hover{ background:var(--brand-red); border-color:var(--brand-red); }
.hc-arrow svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hc-thumbs{ gap:.5rem; align-items:center; }
.hc-thumb{ width:10px; height:10px; aspect-ratio:auto; border-radius:99px; background:rgba(255,255,255,.5); opacity:1; transition:width .4s var(--ease), background .3s; }
.hc-thumb::after{ display:none; }
.hc-thumb:hover{ transform:none; background:#fff; }
.hc-thumb.is-active{ width:40px; background:rgba(255,255,255,.35); }
.hc-thumb-bar{ background:#fff; height:100%; border-radius:99px; }
@media (max-width:900px), (max-aspect-ratio:3/2){ .hc-cta-pair{ display:none; } .hc-hero-nav .container{ justify-content:center; } .hc-thumb{ flex:none; width:10px; } .hc-thumb.is-active{ width:40px; } .hc-thumbs{ width:auto; } }

/* our story: smaller type, catalogue-cover imagery */
.hc-lede{ font-size:clamp(1.45rem, 2.5vw, 2.1rem); line-height:1.28; max-width:34ch; margin-top:1rem; }
.hc-facts{ margin-top:1.1rem; font-size:.96rem; }
.hc-covers{ position:relative; aspect-ratio:1 / .95; max-width:520px; justify-self:center; width:100%; border-radius:var(--radius-md); background:radial-gradient(120% 90% at 50% 25%, #fbf8f3, #ebe4d9); }
.hc-covers img{ position:absolute; mix-blend-mode:multiply; height:78%; width:auto; object-fit:contain; top:10%; transition:transform .6s var(--ease); }
.hc-covers .c1{ left:5%; transform:rotate(-7deg); }
.hc-covers .c2{ left:50%; top:6%; height:84%; transform:translateX(-50%); z-index:2; }
.hc-covers .c3{ right:5%; transform:rotate(7deg); }
.hc-covers:hover .c1{ transform:rotate(-11deg) translateX(-8px); } .hc-covers:hover .c3{ transform:rotate(11deg) translateX(8px); }
.hc-stats{ margin-top:clamp(2rem,4vw,3.2rem); }
.hc-stats .figure{ font-size:clamp(2rem,3.6vw,3rem); }

/* explorer cards: bold name + colon + regular copy */
.hc-card-name{ display:block; margin-top:.8rem; padding:0; border:0; font-size:.88rem; font-weight:400; line-height:1.5; color:rgba(255,255,255,.85); }
.hc-card-name b{ font-weight:700; color:#fff; }
.hc-col-head h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); }

/* surface library: clean texture tiles */
.hc-sl{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(1.6rem,4vw,3.5rem); align-items:center; }
.hc-sl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.hc-sl-tile{ position:relative; display:block; aspect-ratio:4/3; border-radius:10px; overflow:hidden; color:#fff; isolation:isolate; }
.hc-sl-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); z-index:-2; }
.hc-sl-tile::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(15,8,6,.72),rgba(15,8,6,0) 55%); }
.hc-sl-tile:hover img{ transform:scale(1.08); }
.hc-sl-tile span{ position:absolute; left:.8rem; bottom:.65rem; right:.6rem; font-size:.86rem; font-weight:600; line-height:1.25; }
@media (max-width:900px){ .hc-sl{ grid-template-columns:1fr; } }
@media (max-width:480px){ .hc-sl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* shop the surface: one frame */
.hc-surface{ padding-block:clamp(2.4rem,4.5vw,3.6rem) !important; }
.hc-surface-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.hc-surface-head h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.7rem); }
.hc-surface-head p{ color:var(--taupe); font-size:.92rem; }
.hc-surface .surface-stage{ margin-top:0 !important; aspect-ratio:2.35 / 1; max-height:62vh; border-radius:var(--radius-md); overflow:hidden; }
.hc-surface .surface-stage > .ph{ position:absolute; inset:0; }
.hc-surface .surface-stage > .ph img{ width:100%; height:100%; object-fit:cover; object-position:right center; }
.hc-surface a.hotspot{ display:block; }
@media (max-width:700px){ .hc-surface .surface-stage{ aspect-ratio:1.5 / 1; } }

/* our reach: compact, two clean lines */
.hc-world{ padding-top:clamp(2.6rem,5vw,4rem); }
.hc-world h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
.hc-world h2 span, .hc-world h2 em{ display:block; }
.hc-world-head{ align-items:center; }
.hc-world-map{ margin-top:1.4rem; }
.hc-world-map #salasar-presence-map{ height:clamp(280px,36vw,500px); }
.hc-world-foot{ padding-block:1rem 1.6rem; }

/* common queries: both sides start on the same line */
.hc-faq{ margin-top:clamp(2.4rem,4vw,3.6rem); align-items:start; }
.hc-faq .side .eyebrow{ margin:0; }
.hc-faq h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); margin-top:.6rem; }
.hc-faq .faq-list{ border-top:0; }
.hc-faq .faq-item:first-child .faq-q{ padding-top:0; }
.hc-trust .range-title{ font-size:clamp(1.6rem,2.8vw,2.3rem); }


.hc-covers{ background:#fff; box-shadow:0 30px 60px -36px rgba(40,20,16,.4); }
.hc-covers img{ mix-blend-mode:normal; filter:drop-shadow(0 14px 18px rgba(40,20,16,.28)); height:74%; top:13%; }
.hc-covers .c2{ top:9%; height:80%; }

/* =================== Round 5: hotspot fix, calmer card hover, more motion =================== */
/* shop the surface: tooltip image must not inherit the stage's absolute .ph rule; tooltips open downward */
.surface-stage .hotspot-tip .ph{ position:relative; inset:auto; aspect-ratio:16/9; }
.hc-surface .surface-stage{ overflow:visible; }
.hc-surface .surface-stage > .ph{ border-radius:var(--radius-md); overflow:hidden; }
.hotspot[data-pos="below"] .hotspot-tip{ bottom:auto; top:calc(100% + 14px); width:170px; }
.hotspot[data-pos="below"]:hover, .hotspot[data-pos="below"]:focus-visible{ z-index:6; }
.hotspot-tip-body{ padding:.7rem .85rem; }

/* sustainability: the slot never moves, only the card inside it, and the card never changes height */
.sus-slot{ display:block; padding-block:.4rem; margin-block:-.4rem; }
.sus-card{ height:100%; }
.sus-card:hover, .sus-card:focus-visible, .sus-card.is-on{ transform:translateY(-6px); }
.sus-more{ max-height:none; margin-top:.8rem !important; opacity:0; transform:translateY(6px); transition:opacity .45s var(--ease), transform .45s var(--ease); overflow:visible; }
.sus-card:hover .sus-more, .sus-card:focus-visible .sus-more, .sus-card.is-on .sus-more{ opacity:1; transform:none; max-height:none; margin-top:.8rem !important; }
@media (max-width:560px){ .sus-more{ opacity:1; transform:none; } }

/* buttons: soft light sweep on hover */
.btn{ position:relative; overflow:hidden; }
.btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-130%); transition:transform .8s var(--ease); pointer-events:none; }
.btn:hover::before{ transform:translateX(130%); }
/* product / blog / tile hovers */
.product-card .ph img, .blog-card-img img, .collection-card .ph img{ transition:transform .9s var(--ease); }
.product-card:hover .ph img{ transform:scale(1.06); }
.hc-card{ transition:transform .5s var(--ease); }
.hc-card:hover{ transform:translateY(-6px); }
.cat-chips a{ position:relative; }
.footer-col a{ transition:color .25s var(--ease), transform .25s var(--ease); display:inline-block; }
.footer-col a:hover{ transform:translateX(4px); }
@media (prefers-reduced-motion:no-preference){
  .hc-covers .c1{ animation:coverBobA 7s ease-in-out infinite alternate; }
  .hc-covers .c3{ animation:coverBobB 8s ease-in-out infinite alternate; }
  .sus-ico{ animation:icoIdle 4s ease-in-out infinite alternate; }
  .sus-slot:nth-child(2) .sus-ico{ animation-delay:-1s; } .sus-slot:nth-child(3) .sus-ico{ animation-delay:-2s; } .sus-slot:nth-child(4) .sus-ico{ animation-delay:-3s; }
  .hc-slide.is-active .hc-slide-img{ animation:heroDrift 9s ease-out both; }
}
@keyframes coverBobA{ from{ transform:rotate(-7deg) translateY(0); } to{ transform:rotate(-8.5deg) translateY(-8px); } }
@keyframes coverBobB{ from{ transform:rotate(7deg) translateY(0); } to{ transform:rotate(8.5deg) translateY(-10px); } }
@keyframes icoIdle{ from{ transform:translateY(0); } to{ transform:translateY(-3px); } }
@keyframes heroDrift{ from{ transform:scale(1.04); } to{ transform:scale(1); } }
.hc-slide-img{ transform:none !important; }
.hc-slide.is-active .hc-slide-img{ transform:none !important; }

/* brand marquee under the hero */
.hc-marquee{ overflow:hidden; background:var(--ivory); border-block:1px solid var(--line); padding:.85rem 0; }
.hc-marquee-track{ display:flex; gap:1.6rem; width:max-content; align-items:center; animation:gzMarq 38s linear infinite; font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--near-black); }
.hc-marquee-track i{ font-style:normal; color:var(--brand-red); font-size:.7rem; }
.hc-marquee:hover .hc-marquee-track{ animation-play-state:paused; }
@keyframes gzMarq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .hc-marquee-track{ animation:none; } }

.hotspot-tip-body{ display:block; }
.hotspot-tip-body .brand{ display:block; }

/* our story covers: continuous gentle float (small amplitude, always on) */
.hc-covers img{ transition:none !important; will-change:transform; }
.hc-covers .c1{ animation:floatC1 5.2s ease-in-out infinite alternate !important; }
.hc-covers .c2{ animation:floatC2 4.4s ease-in-out infinite alternate !important; }
.hc-covers .c3{ animation:floatC3 5.8s ease-in-out infinite alternate !important; }
@keyframes floatC1{ from{ transform:rotate(-7deg) translateY(0); } to{ transform:rotate(-7deg) translateY(-6px); } }
@keyframes floatC2{ from{ transform:translateX(-50%) translateY(0); } to{ transform:translateX(-50%) translateY(-8px); } }
@keyframes floatC3{ from{ transform:rotate(7deg) translateY(-5px); } to{ transform:rotate(7deg) translateY(1px); } }
.hc-covers:hover .c1, .hc-covers:hover .c3{ transform:none; }

.hc-arrow.arw{ background:rgba(58,34,26,.55) !important; border:0 !important; }
.hc-arrow.arw:hover{ background:var(--brand-red) !important; }
.hc-arrow.arw svg{ stroke-width:2.4; }

/* our story covers: constant float (translate Y) + side covers fan open on hover (rotate/translate properties) */
.hc-covers img{ transition:rotate .7s var(--ease), translate .7s var(--ease) !important; }
.hc-covers .c1{ rotate:-7deg; translate:0 0; animation:floatY1 5.2s ease-in-out infinite alternate !important; }
.hc-covers .c3{ rotate:7deg; translate:0 0; animation:floatY3 5.8s ease-in-out infinite alternate !important; }
.hc-covers:hover .c1{ rotate:-13deg; translate:-22px 4px; }
.hc-covers:hover .c3{ rotate:13deg; translate:22px 4px; }
.hc-covers:hover .c2{ translate:0 -4px; }
@keyframes floatY1{ from{ transform:translateY(0); } to{ transform:translateY(-6px); } }
@keyframes floatY3{ from{ transform:translateY(-5px); } to{ transform:translateY(1px); } }
.hc-covers .c1, .hc-covers .c3{ transform:none; }