/* ============================================================
   TopFriz — Frizerski salon Bjelovar
   Brand: #141313 ink · #934E22 copper · #FFFFFF
   Type:  Epika Serif Extended (display) + Outfit (UI)
   Layout: rounded shell, floating glass nav, oversized display
           words, rounded-rectangle imagery, asymmetric collages.
   ============================================================ */

@font-face {
  font-family: "Epika Serif Extended";
  src: url("../assets/fonts/epika-serif-extended.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --ink: #141313;
  --copper: #934e22;
  --copper-dark: #7a3f1b;
  --copper-soft: #c2a189;   /* muted copper for the oversized background word */
  --white: #ffffff;

  /* derived neutrals */
  --page: #e9e2da;   /* outside the shell */
  --shell: #f6f3ee;  /* inside the shell */
  --cream-2: #efe7dd;
  --line: rgba(147, 78, 34, 0.18);
  --muted: #7c6a5e;

  /* type */
  --f-display: "Epika Serif Extended", "Playfair Display", Georgia, serif;
  --f-ui: "Outfit", system-ui, -apple-system, sans-serif;

  /* space */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 132px;

  --maxw: 1180px;
  --r-img: 14px;   /* rounded rectangles — the reference's core shape */
  --r-shell: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(12px, 2vw, 28px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--page);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, iframe, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--copper); color: var(--white); }
body.is-locked { overflow: hidden; }

/* the page lives inside a rounded panel with breathing room around it */
.shell {
  background: var(--shell);
  border-radius: var(--r-shell);
  margin: var(--gutter);
  /* `clip` — not `hidden`. Both round the corners, but `hidden` makes this a
     scroll container, which kills position:sticky for everything inside. */
  overflow: clip;
  position: relative;
}

/* ---------- Type primitives ---------- */
.h-lead {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--copper);
}
.section-p { color: var(--ink); font-size: 0.95rem; }

/* ---------- Pill buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 100px;
  border: 1px solid var(--copper);
  background: var(--copper);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pill:hover { background: var(--copper-dark); border-color: var(--copper-dark); transform: translateY(-2px); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pill--outline { background: transparent; color: var(--copper); }
.pill--outline:hover { background: var(--copper); color: var(--white); }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { text-align: center; width: min(340px, 74vw); }
.loader__logo { opacity: 0; }
.loader__logo img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.loader__script {
  font-family: var(--f-display);
  color: var(--copper);
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: var(--s-3) 0;
  opacity: 0;
}
.loader__line { height: 1px; width: 100%; background: rgba(255,255,255,0.16); overflow: hidden; }
.loader__line-fill { display: block; height: 100%; width: 0%; background: var(--copper); }

/* ============================================================
   NAV — floating glass pill over the hero
   ============================================================ */
.nav {
  position: absolute;
  top: var(--s-3);
  left: 0; right: 0;
  z-index: 100;
  padding: 0 var(--s-3);
  display: flex;
  justify-content: center;
}
.nav__pill {
  position: relative;
  width: min(100%, 860px);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px 10px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: border-color 0.4s var(--ease);
}
/* The glass lives on a pseudo-element, NOT on .nav__pill itself.
   backdrop-filter makes an element a containing block for fixed descendants,
   and the mobile menu panel is a fixed child of this pill — with the filter on
   the pill, the panel was trapped inside its 301x64 box and only the middle
   link was visible. On the pseudo-element the effect is identical and the
   panel can escape to the viewport. */
.nav__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
}
.nav__logo { color: var(--white); display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__logo svg { width: 96px; height: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: var(--s-3); margin-inline: auto; }
.nav__links a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex; align-items: center;
  min-height: 44px;
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 12px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__call {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__call svg { width: 19px; height: 19px; }
.nav__call:hover { background: var(--white); color: var(--ink); }

.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  flex: none;
  z-index: 1200;
}
.nav__burger span {
  width: 20px; height: 2px; background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), background-color 0.3s var(--ease);
}
.nav.is-open .nav__burger span { background: var(--copper); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — full-bleed photo, oversized wordmark bleeding off the base
   ============================================================ */
/* .hero__track is pure scroll distance; .hero__frame sticks inside it and that
   progress scrubs the video. Requires .shell to use `overflow: clip` — with
   `overflow: hidden` the shell becomes a scroll container and sticky silently
   stops pinning (measured: the frame just scrolls away). */
.hero {
  position: relative;
  background: var(--copper);
}
/* scrollHeight (1500px) + 100vh — the range the clip animation is written for */
.hero__track { height: calc(1500px + 100svh); position: relative; }
.hero__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* the ground the clip window opens against — brand bronze, not black */
  background: var(--copper);
}

/* The clip lands on the media, not on .hero__frame. The reference clips its
   whole sticky block, but that block holds nothing but background — ours also
   carries the wordmark, and clipping it would hide the logo until the visitor
   scrolled. So the black frame and the logo stay put and the video window
   opens inside them. */
.hero__media {
  /* JS reads these and animates them to 0 — one inset per axis */
  --clip-x: 25;
  --clip-y: 25;
  position: absolute;
  inset: 0;
  clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
  will-change: clip-path;
}
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.7);   /* zooms back to 1 as the window opens */
  will-change: transform;
}
/* the phone still — hidden wherever the scrubbed clip runs */
.hero__img { display: none; }
/* bronze wash over the footage — multiply tints and darkens at once, so the
   white wordmark stays readable without a second dark layer */
.hero__scrim {
  position: absolute; inset: 0;
  background: var(--copper);
  mix-blend-mode: multiply;
  opacity: 0.72;
}
/* The brand wordmark itself, scaled up to fill the hero base.
   It does NOT bleed off the edge: TOPFRIZ is all-caps with a flat
   baseline, so clipping it would read as a broken crop, not as design. */
.hero__word {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 clamp(var(--s-3), 5vw, var(--s-6)) clamp(var(--s-3), 4vw, var(--s-5));
  color: var(--white);
}
.hero__word .line { display: block; overflow: hidden; }
.hero__word .line__inner { display: block; transform: translateY(105%); }
.hero__word svg { width: 100%; height: auto; display: block; }

/* ---------- cascade reveal on the wordmark ----------
   Knobs match the source component: 25ms stagger, 250ms, ease-in-out, "up".
   Each <g> holds the letter twice (the second copy sits 50.05 user units
   below, outside the viewBox, so the svg viewport hides it). On hover the
   pair slides up by exactly that height, letter by letter. */
.cascade { outline: none; }
.cascade__l {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translateY(0);
  transition: transform 250ms ease-in-out;
  transition-delay: calc(var(--i) * 25ms);
  will-change: transform;
}
.cascade:hover .cascade__l,
.cascade:focus-visible .cascade__l {
  transform: translateY(-50.05px);   /* px = user units under transform-box: view-box */
}
.cascade:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; border-radius: 4px; }

/* The logo keeps its colour — the cascade is the whole effect.

   Deliberately NOT gated behind prefers-reduced-motion: this is a small,
   user-initiated hover movement, not autoplaying or vestibular motion.
   The parallax, loader and scroll reveals stay gated. */

/* ============================================================
   PITCH — copy | product shot
   ============================================================ */
.pitch {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-7) var(--s-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.pitch__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.pitch__text p { font-size: 0.92rem; color: var(--ink); max-width: 42ch; }
.pitch__text .h-lead { margin-bottom: var(--s-1); }
.pitch__text .pill { margin-top: var(--s-2); }
.pitch__media {
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}
.pitch__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CARE — asymmetric collage
   ============================================================ */
.care {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--s-3) var(--s-7);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "a b text"
    "a b c";
  gap: var(--s-2);
  align-items: start;
}
.care__a { grid-area: a; }
.care__b { grid-area: b; }
.care__c { grid-area: c; }
.care__text { grid-area: text; padding: var(--s-1) 0 var(--s-2) var(--s-2); }
.care__text p { font-size: 0.88rem; color: var(--ink); margin-top: var(--s-2); }
.care figure {
  position: relative;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--cream-2);
}
/* care__b holds a 720x900 (4:5) clip — matching the ratio means no crop */
.care__a { aspect-ratio: 3 / 4; }
.care__b { aspect-ratio: 4 / 5; background: var(--ink); }
.care__c { aspect-ratio: 16 / 10; }
.care figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.care figure:hover img { transform: scale(1.04); }
.care__b video { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   NEW — oversized background word + video
   ============================================================ */
.new {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--s-3) var(--s-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: center;
}
.new__head { align-self: center; }
.new__head p { font-size: 0.9rem; color: var(--ink); margin-top: var(--s-2); max-width: 34ch; }
.new__top {
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--cream-2);
}
.new__top img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* the band that carries the giant word */
.new__band {
  grid-column: 1 / -1;
  position: relative;
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: var(--s-4);
  align-items: end;
}
.new__giant {
  position: absolute;
  left: 50%;
  top: -0.34em;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.8;
  color: var(--copper-soft);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.new__video {
  position: relative;
  z-index: 1;
  border-radius: var(--r-img);
  overflow: hidden;
  /* source is a 720x1280 vertical clip — match it so nothing is cropped */
  aspect-ratio: 9 / 16;
  max-width: 360px;
  background: var(--ink);
  box-shadow: 0 24px 60px rgba(20, 19, 19, 0.16);
}
.new__video video { width: 100%; height: 100%; object-fit: cover; }
.videobtn {
  position: absolute;
  right: var(--s-2); bottom: var(--s-2);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--copper);
  color: var(--white);
  display: grid; place-items: center;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.videobtn:hover { background: var(--copper-dark); transform: scale(1.06); }
.videobtn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.videobtn svg { width: 18px; height: 18px; fill: currentColor; }
.videobtn .ico-pause { display: none; }
.videobtn.is-playing .ico-play { display: none; }
.videobtn.is-playing .ico-pause { display: block; }

.new__copy { position: relative; z-index: 1; padding-bottom: var(--s-2); }
.new__copy p { font-size: 0.88rem; color: var(--ink); max-width: 46ch; margin-bottom: var(--s-3); }

/* ============================================================
   OFFER — service list
   ============================================================ */
.offer {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--s-3) var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.offer__col h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.offer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.offer li { position: relative; padding-left: 18px; font-size: 0.92rem; }
.offer li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--copper);
}

/* ============================================================
   GALERIJA — square tiles, evenly divisible
   ============================================================ */
.gal { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--s-3) var(--s-7); }
.gal__head { margin-bottom: var(--s-4); }
.gal__head p { font-size: 0.9rem; color: var(--muted); margin-top: var(--s-1); }
.gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.gal__item {
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
}
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.gal__item:hover img { transform: scale(1.05); }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--s-3) var(--s-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.contact__text { display: flex; flex-direction: column; align-items: flex-start; }
.contact__list { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-2); display: grid; gap: var(--s-3); }
.contact__list li { display: flex; flex-direction: column; gap: 2px; }
.contact__k {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper); font-weight: 600;
}
.contact__list li > span:not(.contact__k) { font-size: 0.95rem; }
.contact__list a {
  font-size: 0.95rem;
  display: inline-flex; align-items: center;
  min-height: 44px;                /* tap target */
  align-self: flex-start;
  transition: color 0.2s var(--ease);
}
.contact__list a:hover { color: var(--copper); }
/* social — icon + label pills, same family as the other buttons */
.social {
  list-style: none;
  padding: 0;
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;              /* tap target */
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.social a:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--white);
  transform: translateY(-2px);
}
.social a:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.social svg { width: 17px; height: 17px; flex: none; }

.contact__map {
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}
.contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.28) contrast(1.04); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  padding: var(--s-5) var(--s-3) var(--s-3);
}
.footer__top {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__logo { color: var(--white); display: flex; align-items: center; min-height: 44px; }
.footer__logo svg { width: 130px; height: auto; display: block; }
.footer__links { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.footer__links a {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 10px;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--copper-soft); }
.footer__social { list-style: none; padding: 0; display: flex; gap: var(--s-1); }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* tap target */
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.footer__social a:hover { background: var(--copper); border-color: var(--copper); color: var(--white); }
.footer__social a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.footer__social svg { width: 18px; height: 18px; }
.footer__copy {
  max-width: var(--maxw);
  margin: var(--s-3) auto 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.36);
  text-align: center;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__word .line__inner { transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --s-7: 96px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__pill { padding-right: 8px; }
  .nav__links.is-panel { display: flex; }

  /* menu becomes a full overlay */
  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--shell);
    flex-direction: column;
    justify-content: center;
    gap: var(--s-2);
    margin: 0;
    clip-path: circle(0% at calc(100% - 60px) 50px);
    transition: clip-path 1.15s var(--ease);
    pointer-events: none;
    z-index: 1100;
  }
  .nav.is-open .nav__links {
    display: flex;
    clip-path: circle(160% at calc(100% - 60px) 50px);
    pointer-events: auto;
  }
  .nav__links a {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    color: var(--copper);
    min-height: 52px;
  }
  .nav__links a::after { display: none; }

  .pitch, .contact { grid-template-columns: 1fr; gap: var(--s-4); }
  .care {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "a b"
      "c c";
  }
  .care__text { padding: 0 0 var(--s-1) 0; }
  .new { grid-template-columns: 1fr; }
  .new__band { grid-template-columns: minmax(0, 340px) 1fr; }
}

@media (max-width: 720px) {
  :root { --s-7: 76px; --s-6: 64px; }

  /* Phones get a plain still hero — no scroll track, no pin, no clip window,
     no scrubbed video. The scroll choreography needs 1500px of runway and a
     landscape frame; on a portrait phone it cost a 3.4 MB download to show a
     letterbox slot. A single image with the bronze wash says the same thing. */
  .hero__track { height: auto; }
  .hero__frame {
    position: static;
    height: clamp(420px, 66svh, 560px);
  }
  .hero__media {
    clip-path: none;          /* window fully open, nothing to reveal */
    will-change: auto;
  }
  .hero__media video { display: none; }
  .hero__img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .offer { grid-template-columns: 1fr; gap: var(--s-4); }
  .new__band { grid-template-columns: 1fr; gap: var(--s-3); }
  .new__giant { top: -0.2em; opacity: 0.4; }
  .new__video { max-width: 340px; margin-inline: auto; }
  .new__copy { padding-bottom: 0; text-align: center; }
  .new__copy p { margin-inline: auto; }
  .new__copy .pill { display: inline-flex; }
  /* 6 tiles stay 2 across — a single column would strand every photo alone */
  .gal__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-1); }
  .footer__top { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .care {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "a b"
      "c c";
  }
  .nav__logo svg { width: 84px; }
}