@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap");
@font-face { font-family: "MN Brutazze"; src: url("fonts/HistoryOfWawa.otf") format("opentype"), url("fonts/HistoryOfWawa.ttf") format("truetype"); font-display: swap; }
:root {
  --pad: clamp(20px, 3vw, 44px);
  --charcoal: #1c1c1e; --silver: #6b6b70; --white: #fff;
  --fire: linear-gradient(135deg, #ff3d00 0%, #ff7a00 55%, #ffb000 100%);
  --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brand-font: "MN Brutazze", "Syne", var(--ui);
  --brand-blur: 0px;  /* 0px = sharp, .6px = soft */
  --veil: 1;          /* white layer over video: 1 = on, 0.5 = half, 0 = off */
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--ui); color: var(--charcoal); background: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.fire { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 500; }

/* NAV (white text) */
#nav { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px var(--pad); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.28); }
body:not([data-page="index"]) #nav { background: rgba(28,28,30,.95); text-shadow: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; }
.brand-text { font-family: var(--brand-font); font-size: 22px; line-height: 26px; color: #fff; filter: blur(var(--brand-blur)); }
.links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 15px; flex-wrap: wrap; }
.links > a:not(.btn) { position: relative; color: #fff; padding: 4px 0; }
.links > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.links > a:not(.btn):hover::after, .links > a:not(.btn):focus-visible::after, .links > a[aria-current]::after { transform: scaleX(1); opacity: 1; }
.btn { padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #fff; text-shadow: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.btn-wa { background: #25D366; }
.btn-fire { background: var(--fire); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* HOME */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: var(--pad); background: linear-gradient(160deg, #fff, #ececec); }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.veil { position: absolute; inset: 0; z-index: 1; opacity: var(--veil); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.22) 70%, rgba(255,255,255,.4) 100%); }
.hero h1, .hero .stats { position: relative; z-index: 2; }
.hero h1 { font-weight: 500; font-size: clamp(40px, 6vw, 110px); line-height: .95; letter-spacing: -.035em; }
#l1 { font-size: .78em; }
#l2 { font-weight: 700; }
.stats { max-width: 340px; text-align: right; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.3; }
.tone-dark .veil { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.5) 100%); }
.tone-dark .hero h1 { color: #fff; }

/* ABOUT / CASE */
.page { max-width: 760px; margin: 0 auto; padding: 150px var(--pad) 90px; }
.page h1 { font-weight: 500; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.03em; margin-bottom: 36px; }
.page p { color: var(--silver); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; margin-bottom: 1.4em; }
.slots { max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.slot { min-height: 340px; border: 1px solid #e3e3e5; border-radius: 6px; padding: 24px; pointer-events: none; cursor: default; }
.slot h2 { font-weight: 500; margin-bottom: 8px; }

@media (max-width: 760px) {
  .hero { flex-direction: column-reverse; align-items: flex-start; }
  .stats { text-align: left; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero video { display: none; } .links > a::after { transition: none; } }

@media (min-width: 761px) {
  #l2 { white-space: nowrap; }
  .hero h1 { flex: none; }
  .stats { flex: 0 1 340px; }
}