/* ===================================================================
   USAVIR v39 — full-screen panel system

   Two layout families, never more:
     phone  (<=600px wide)  single column
     wide   (>=601px)       tablets and desktops share one composition

   Inside a family every dimension is a multiple of --u, which is derived
   from viewport HEIGHT. Because the panel is also measured in height, the
   ratio between any two elements is identical on every device in that
   family — the same composition, scaled. Sizing type against width while
   the container is measured in height is what made this break before.

   dvh, not vh: it tracks the dynamic viewport, so mobile browser chrome
   appearing and disappearing does not change the layout.
   =================================================================== */

:root{
  --ink:#070707;
  --paper:#f7f7f4;
  --line:#c8c8c3;
  --muted:#565656;
}

/* ---------- scroll container ----------
   Snap must live on <html>: body overflow propagates to the viewport, so a
   scroll-snap-type set on body is silently ignored. No scroll-behavior:smooth
   here — combined with snapping it cancels scrolls back to the first panel. */
html.home-snap,
html:has(body[data-page="home"]){
  /* v39.1: snapping removed - the scroll is completely free */
  scroll-snap-type:none;
  scroll-padding-top:0;          /* the site sets 90px globally for anchors */
}
body[data-page="home"]{height:auto;min-height:100dvh}
.brand-flow{display:block}

/* ---------- the panel ---------- */
.brand-panel{
  --u:1dvh;
  /* wide family scale; the phone family overrides this one value */
  font-size:clamp(13px,calc(var(--u) * 1.98),30px);

  /* -1px matters: a snap area exactly as tall as the scrollport keeps the
     first panel captured in Chrome and snapping never advances */
  min-height:calc(100dvh - 1px);
  scroll-margin-top:0;           /* global [id] rule would offset every landing */

  display:flex;
  padding-top:calc(var(--v24-taskbar-h,72px) + var(--u) * 3);
  padding-bottom:calc(var(--u) * 3);
  border-bottom:1px solid var(--line);
}
.brand-panel--last{border-bottom:0}

/* space-between is what makes a panel read as genuinely full-screen without
   scaling type to exactly 100% — which overflows the moment font metrics or
   mobile chrome shift by a pixel */
.brand-panel__inner{
  flex:1;
  min-width:0;
  width:min(1420px,100%);
  margin:0 auto;
  padding-inline:clamp(16px,4vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:calc(var(--u) * 2);
}

/* grid and flex children default to min-width:auto and refuse to shrink below
   their content, overflowing instead — this is what clipped the hero text */
.brand-panel__inner>*,
.brand-hero,.brand-carousel,.brand-track,.brand-slide,
.brand-grid--2,.brand-grid--3,.brand-card,.brand-facts{min-width:0}
.brand-slide__copy,.brand-slide__title,.brand-lead,.brand-statement,
.brand-card p,.brand-card h3,.brand-facts dd{overflow-wrap:break-word}

/* ---------- hero ---------- */
.brand-hero{display:flex;flex-direction:column;justify-content:center;max-width:1130px;min-height:0}
.brand-kicker{
  margin:0 0 .9em;
  font-size:.62em;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
}
.brand-hero h1{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:6.9em;          /* ~16.2dvh — constant on every wide screen */
  line-height:.78;
  letter-spacing:-.09em;
}
.brand-statement{
  margin:.55em 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.3em;line-height:1.02;letter-spacing:-.05em;
}
.brand-lead{
  margin:.85em 0 0;
  max-width:46em;
  color:var(--muted);
  font-size:1.02em;line-height:1.6;
}
.brand-actions{display:flex;gap:.6em;flex-wrap:wrap;margin-top:1.1em}

.brand-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.9em;padding:0 1.35em;
  border:1px solid var(--ink);
  background:#fff;color:var(--ink);
  text-decoration:none;text-transform:uppercase;
  letter-spacing:.08em;font-size:.68em;font-weight:900;
}
.brand-button--dark{background:var(--ink);color:#fff}

/* ---------- hero proof strip ---------- */
.brand-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:1.1em 0 0;
  border-top:1px solid var(--ink);border-left:1px solid var(--ink);
}
.brand-facts>div{
  min-width:0;padding:.75em 1em;
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.brand-facts dt{
  margin:0 0 .3em;
  font-size:.56em;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.brand-facts dd{
  margin:0;font-family:Georgia,"Times New Roman",serif;
  font-size:1.05em;font-weight:500;letter-spacing:-.02em;line-height:1.15;
}

/* ---------- section panels ---------- */
.brand-panel__head{max-width:56em}
.brand-panel__head h2{
  margin:.3em 0 .35em;
  font-family:Georgia,"Times New Roman",serif;font-weight:500;
  font-size:3.1em;line-height:.98;letter-spacing:-.05em;
}
.brand-panel__head>p:last-child{
  margin:0;max-width:44em;color:var(--muted);
  font-size:1em;line-height:1.6;
}

.brand-grid--2,.brand-grid--3{
  display:grid;
  border-top:1px solid var(--ink);border-left:1px solid var(--ink);
}
.brand-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.brand-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-card{
  min-height:0;
  padding:1.15em;
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.7);
}
.brand-card span{font-size:.58em;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
.brand-card h3{
  margin:auto 0 .35em;
  font-family:Georgia,"Times New Roman",serif;font-weight:500;
  font-size:1.75em;letter-spacing:-.045em;line-height:1.08;
}
.brand-card p{margin:0 0 .6em;max-width:34em;color:var(--muted);font-size:.86em;line-height:1.5}
.brand-card a{color:inherit;font-size:.64em;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.brand-card--dark{background:var(--ink);color:#fff}
.brand-card--dark p{color:#d5d5d5}

/* ---------- hero belt ----------
   Separate cards with air between them. The gap is applied as slide margin,
   not track gap, so it is included in the measured track width — otherwise
   translating -50% lands off by half a gap and the loop visibly jumps. */
.brand-carousel{overflow:hidden;border-top:1px solid var(--ink);padding-top:.9em}
.brand-carousel__bar{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.75em}
.brand-carousel__bar .brand-kicker{margin:0}
.brand-carousel__controls{display:flex;gap:.35em}

.brand-arrow{
  width:2.6em;height:2.6em;
  display:grid;place-items:center;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  font-size:.78em;line-height:1;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.brand-arrow:hover,.brand-arrow:focus-visible{background:var(--ink);color:#fff}
.brand-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.brand-track{
  display:flex;width:max-content;
  margin:0;padding:0;list-style:none;
  animation:brand-marquee 30s linear infinite;
  will-change:transform;
}
@keyframes brand-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.brand-carousel:hover .brand-track,
.brand-carousel:focus-within .brand-track,
.brand-carousel.is-paused .brand-track{animation-play-state:paused}

.brand-slide{
  flex:0 0 20em;
  margin-right:.7em;              /* the gap — counted in the track width */
  display:flex;flex-direction:column;
  padding:1.1em;
  border:1px solid var(--ink);
  background:rgba(255,255,255,.72);
  min-width:0;
}
.brand-slide__index{font-size:.56em;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
.brand-slide__title{
  margin:auto 0 .35em;
  font-family:Georgia,"Times New Roman",serif;font-weight:500;
  font-size:1.45em;letter-spacing:-.04em;line-height:1.05;
}
.brand-slide__copy{margin:0 0 .7em;color:var(--muted);font-size:.84em;line-height:1.5}
.brand-slide__links{display:flex;flex-wrap:wrap;gap:.5em 1em}
.brand-slide__links a{color:inherit;font-size:.62em;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.brand-slide__jump{color:var(--muted)!important}

/* ---------- contact panel shares its stop with the footer ---------- */
body[data-page="home"] .global-footer{
  position:static;
  width:100%;
  margin-top:calc(var(--u) * 2);
}
.brand-panel--last{padding-bottom:calc(var(--u) * 1.5)}

/* =========================================================
   PHONE FAMILY — one column, same composition, smaller scale
   ========================================================= */
@media (orientation:portrait){
  .brand-panel{
    font-size:clamp(12px,calc(var(--u) * 1.95),19px);
    padding-top:calc(var(--v24-taskbar-h,72px) + var(--u) * 2);
    padding-bottom:calc(var(--u) * 2);
  }
  .brand-panel__inner{padding-inline:clamp(14px,4.5vw,22px)}
  .brand-hero h1{font-size:4.2em;line-height:.82}
  .brand-statement{font-size:1.55em}
  .brand-lead{font-size:.95em}
  .brand-panel__head h2{font-size:2.1em}
  /* three compact columns, not three stacked rows — stacking cost 146px on a
     667px screen, which is the whole reason the hero overflowed the SE */
  .brand-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-facts>div{padding:.5em .55em}
  .brand-facts dt{font-size:.48em;letter-spacing:.1em;margin-bottom:.2em}
  .brand-facts dd{font-size:.8em;line-height:1.2}
  .brand-grid--2,.brand-grid--3{grid-template-columns:1fr}
  .brand-card h3{font-size:1.35em}
  .brand-slide{flex:0 0 76vw}
  .brand-carousel__bar{flex-direction:column;align-items:flex-start;gap:.55em}
}

/* =========================================================
   INPUT — independent of layout. A tablet gets the wide
   layout AND touch targets; a desktop gets the same layout
   with mouse affordances.
   ========================================================= */
@media (hover:none) and (pointer:coarse){
  .brand-arrow{min-width:44px;min-height:44px}
  .brand-button{min-height:44px}
  .brand-slide__links a,.brand-card a{padding:.35em 0;display:inline-block}
}

/* =========================================================
   Too short for a full screen panel — landscape phones and
   very short windows. Panels become auto-height, snapping off.
   ========================================================= */
@media (max-height:520px){
    .brand-panel{
    min-height:0;
    font-size:clamp(12px,2.6vw,16px);
    padding-top:calc(var(--v24-taskbar-h,72px) + 14px);
    padding-bottom:22px;
  }
  .brand-panel__inner{justify-content:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
    .brand-track{animation:none}
  .brand-arrow{transition:none}
}