/* ============================================================
   StreamPress — Media & Print
   Bold modern, magenta-accent. Dependency-free.
   ============================================================ */

:root{
  /* Brand */
  --magenta:        #C4188F;
  --magenta-bright: #E0218A;
  --magenta-deep:   #8E1268;
  --ink:            #0c0c11;
  --ink-2:          #16161f;
  --ink-3:          #20202c;
  --paper:          #ffffff;
  --mist:           #f6f3f8;
  --line:           #e8e2ee;
  --muted:          #6c6677;
  --muted-on-dark:  #b6b1c4;

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --surface: #ffffff;
  --primary: var(--magenta);
  --on-primary: #ffffff;
  --success: #16a34a;
  --danger: #dc2626;

  /* Type */
  --font-head: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(12,12,17,.06), 0 4px 14px rgba(12,12,17,.05);
  --shadow-md: 0 10px 30px rgba(12,12,17,.10);
  --shadow-mag: 0 16px 40px rgba(196,24,143,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--magenta-bright); outline-offset:3px; border-radius:6px; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(72px,11vw,140px); position:relative; }
.section--mist{ background:var(--mist); }
.section--ink{ background:var(--ink); color:#fff; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--magenta);
}
.section--ink .eyebrow{ color:var(--magenta-bright); }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; }
.section-head{ max-width:720px; margin-bottom:clamp(40px,6vw,68px); }
.section-head h2{ font-size:clamp(2rem,5vw,3.4rem); margin-top:18px; }
.section-head p{ font-size:1.12rem; color:var(--muted); margin:18px 0 0; }
.section--ink .section-head p{ color:var(--muted-on-dark); }
.text-mag{ color:var(--magenta); }
.section--ink .text-mag{ color:var(--magenta-bright); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  min-height:52px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change:transform;
}
.btn svg{ width:19px; height:19px; }
.btn--primary{ background:var(--magenta); color:#fff; box-shadow:var(--shadow-mag); }
.btn--primary:hover{ background:var(--magenta-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.section--ink .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.25); }
.section--ink .btn--ghost:hover{ border-color:#fff; }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--lg{ padding:18px 34px; font-size:1.06rem; min-height:60px; }
.btn--block{ width:100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), backdrop-filter var(--dur);
}
.header.is-scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
.brand{ display:flex; align-items:center; color:var(--ink); flex-shrink:0; }
.brand svg{ height:42px; width:auto; }
.brand img{ height:52px; width:auto; display:block; }
/* Logo PNG has a white background; multiply drops the white over the light header */
.header .brand img{ mix-blend-mode:multiply; }
/* Footer sits on dark ink — place the original (dark) logo on a white plate so it stays legible */
.brand--plate{ background:#fff; padding:10px 16px; border-radius:14px; box-shadow:var(--shadow-sm); }
.brand--plate img{ height:50px; }
.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  font-family:var(--font-head); font-weight:500; font-size:.97rem; color:var(--ink-2);
  padding:9px 14px; border-radius:10px; position:relative; transition:color var(--dur);
}
.nav__links a:hover{ color:var(--magenta); }
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--magenta); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:14px; }

/* Language switcher */
.lang{ display:flex; align-items:center; gap:2px; background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:3px; }
.header:not(.is-scrolled) .lang{ background:rgba(246,243,248,.7); }
.lang button{
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.04em;
  color:var(--muted); background:transparent; border:0; padding:6px 11px; border-radius:999px;
  min-height:34px; transition:background var(--dur), color var(--dur);
}
.lang button[aria-pressed="true"]{ background:var(--ink); color:#fff; }

.nav__cta{ display:inline-flex; }
.nav-toggle{ display:none; }

/* Mobile nav */
@media (max-width:980px){
  .nav__links, .nav__cta{ display:none; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px; justify-content:center; align-items:center;
    width:48px; height:48px; border:1px solid var(--line); border-radius:12px; background:#fff;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur); }
  body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:78px 0 0 0; z-index:99; background:#fff;
    padding:24px clamp(20px,5vw,40px) 40px; display:flex; flex-direction:column; gap:6px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    overflow-y:auto;
  }
  body.menu-open .mobile-menu{ opacity:1; transform:none; pointer-events:auto; }
  .mobile-menu a{ font-family:var(--font-head); font-weight:600; font-size:1.5rem; padding:14px 4px; border-bottom:1px solid var(--line); color:var(--ink); }
  .mobile-menu .btn{ margin-top:18px; }
}
@media (min-width:981px){ .mobile-menu{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:148px; padding-bottom:clamp(60px,9vw,110px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.blob--1{ width:560px; height:560px; background:radial-gradient(circle,#E0218A,transparent 68%); top:-180px; right:-120px; animation:float1 18s var(--ease) infinite alternate; }
.blob--2{ width:480px; height:480px; background:radial-gradient(circle,#7c1bd1,transparent 68%); bottom:-220px; left:-120px; opacity:.32; animation:float2 22s var(--ease) infinite alternate; }
.hero__grid{ position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(circle at 50% 24%,#000,transparent 72%); mask-image:radial-gradient(circle at 50% 24%,#000,transparent 72%); opacity:.5; }
@keyframes float1{ to{ transform:translate(-40px,40px) scale(1.1);} }
@keyframes float2{ to{ transform:translate(40px,-30px) scale(1.12);} }

.hero__inner{ position:relative; z-index:1; max-width:880px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 16px 8px 10px; font-size:.86rem; font-weight:500; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.hero__badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(22,163,74,.16); }
.hero h1{ font-size:clamp(2.6rem,7vw,5.2rem); margin:26px 0 0; letter-spacing:-.03em; }
.hero h1 .accent{ position:relative; color:var(--magenta); }
@media (min-width:680px){ .hero h1 .accent{ white-space:nowrap; } }
.hero h1 .accent::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; background:linear-gradient(90deg,var(--magenta-bright),transparent); border-radius:4px; transform:scaleX(0); transform-origin:left; animation:underline 1s var(--ease) .5s forwards; }
@keyframes underline{ to{ transform:scaleX(1);} }
.hero__sub{ font-size:clamp(1.05rem,2vw,1.32rem); color:var(--muted); max-width:620px; margin:24px 0 0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,56px); margin-top:56px; }
.stat__num{ font-family:var(--font-head); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); line-height:1; color:var(--ink); }
.stat__num .text-mag{ color:var(--magenta); }
.stat__label{ font-size:.92rem; color:var(--muted); margin-top:6px; }

/* Service marquee */
.marquee{ margin-top:clamp(48px,7vw,80px); border-block:1px solid var(--line); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:48px; padding-block:20px; width:max-content; animation:scroll-x 28s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--ink-2); white-space:nowrap; }
.marquee__item::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--magenta); transform:rotate(45deg); }
@keyframes scroll-x{ to{ transform:translateX(-50%);} }

/* ============================================================
   SERVICES
   ============================================================ */
.services__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .services__grid{ grid-template-columns:1fr; } }
.svc{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.5vw,40px); overflow:hidden; isolation:isolate;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.svc::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,rgba(196,24,143,.06),transparent 60%); opacity:0; transition:opacity var(--dur); }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.svc:hover::before{ opacity:1; }
.svc__num{ position:absolute; top:24px; right:30px; font-family:var(--font-head); font-weight:700; font-size:3.2rem; color:var(--mist); z-index:-1; transition:color var(--dur); }
.svc:hover .svc__num{ color:rgba(196,24,143,.12); }
.svc__icon{
  width:62px; height:62px; border-radius:16px; display:grid; place-items:center; margin-bottom:24px;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-deep)); color:#fff; box-shadow:var(--shadow-mag);
}
.svc__icon svg{ width:30px; height:30px; }
.svc h3{ font-size:1.55rem; }
.svc p{ color:var(--muted); margin:12px 0 20px; font-size:1.02rem; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.svc__tags li{ font-size:.83rem; font-weight:500; color:var(--ink-2); background:var(--mist); border:1px solid var(--line); padding:5px 12px; border-radius:999px; }

/* Full-width featured service card (Offset) */
.svc--wide{ grid-column:1 / -1; }
@media (min-width:761px){
  .svc--wide{
    display:grid; align-items:center; gap:6px 44px;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"icon title tags" "icon desc tags";
  }
  .svc--wide .svc__icon{ grid-area:icon; margin-bottom:0; align-self:center; }
  .svc--wide h3{ grid-area:title; align-self:end; }
  .svc--wide p{ grid-area:desc; align-self:start; margin:6px 0 0; max-width:48ch; }
  .svc--wide .svc__tags{ grid-area:tags; justify-content:flex-end; }
}

/* ============================================================
   FEATURE / WHY
   ============================================================ */
.why__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,80px); align-items:center; }
@media (max-width:900px){ .why__grid{ grid-template-columns:1fr; } }
.why__list{ display:grid; gap:8px; margin-top:32px; }
.why__item{ display:flex; gap:18px; padding:20px; border-radius:var(--radius); transition:background var(--dur); }
.why__item:hover{ background:rgba(255,255,255,.04); }
.why__check{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(224,33,138,.14); color:var(--magenta-bright); }
.why__check svg{ width:22px; height:22px; }
.why__item h4{ font-size:1.18rem; margin-bottom:4px; }
.why__item p{ margin:0; color:var(--muted-on-dark); font-size:1rem; }
.why__panel{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:40px; background:linear-gradient(150deg,var(--ink-2),var(--ink-3)); border:1px solid rgba(255,255,255,.08); }
.why__panel-glow{ position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,var(--magenta),transparent 70%); filter:blur(50px); opacity:.5; top:-60px; right:-60px; }
.why__quote{ position:relative; font-family:var(--font-head); font-weight:600; font-size:1.5rem; line-height:1.35; letter-spacing:-.01em; }
.why__quote span{ color:var(--magenta-bright); }
.why__by{ position:relative; margin-top:24px; color:var(--muted-on-dark); font-size:.95rem; }

/* ============================================================
   WORK / GALLERY (bento)
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; }
@media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } }
@media (max-width:520px){ .bento{ grid-template-columns:1fr; } }
.tile{
  position:relative; border-radius:var(--radius); overflow:hidden; color:#fff; isolation:isolate;
  background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:22px;
  transition:transform var(--dur) var(--ease);
}
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(12,12,17,.82),transparent 62%); }
.tile:hover{ transform:scale(.985); }
.tile img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.tile:hover img{ transform:scale(1.07); }
.tile__tag{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta-bright); }
.tile__title{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; margin-top:4px; }
.tile--wide{ grid-column:span 2; }
.tile--tall{ grid-row:span 2; }
@media (max-width:520px){ .tile--wide{ grid-column:span 1; } .tile--tall{ grid-row:span 1; } }
.tile--placeholder img{ display:none; }
.tile--placeholder{ background:linear-gradient(135deg,var(--ink-2),var(--magenta-deep)); }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
@media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:30px; }
.step__num{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-deep)); box-shadow:var(--shadow-mag); margin-bottom:20px;
}
.step h4{ font-size:1.22rem; }
.step p{ color:var(--muted); margin:10px 0 0; font-size:.98rem; }
.step:not(:last-child)::before{ content:""; position:absolute; top:55px; left:64px; right:-12px; height:2px; background:linear-gradient(90deg,var(--line),transparent); }
@media (max-width:880px){ .step::before{ display:none; } }

/* ============================================================
   ORDER FORM
   ============================================================ */
.order__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,64px); align-items:start; }
@media (max-width:920px){ .order__grid{ grid-template-columns:1fr; } }
.order__aside h2{ font-size:clamp(2rem,4.5vw,3rem); }
.order__aside p{ color:var(--muted-on-dark); font-size:1.1rem; margin-top:18px; }
.order__perk{ display:flex; gap:14px; align-items:center; margin-top:26px; color:#fff; }
.order__perk svg{ width:22px; height:22px; color:var(--magenta-bright); flex-shrink:0; }
.order__calc{ margin-top:36px; padding:24px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.order__calc p{ margin:0 0 16px; font-size:1rem; color:var(--muted-on-dark); }

.form{ background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:clamp(24px,3.4vw,40px); box-shadow:var(--shadow-md); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem; margin-bottom:8px; }
.field .req{ color:var(--magenta); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--mist);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; min-height:50px;
  transition:border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.field textarea{ min-height:108px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--magenta); background:#fff; box-shadow:0 0 0 4px rgba(196,24,143,.12); }
.field .hint{ font-size:.82rem; color:var(--muted); margin-top:6px; }

/* Dropzone */
.dropzone{
  border:2px dashed var(--line); border-radius:var(--radius); background:var(--mist);
  padding:28px 20px; text-align:center; cursor:pointer; transition:border-color var(--dur), background var(--dur);
}
.dropzone:hover, .dropzone.is-drag{ border-color:var(--magenta); background:rgba(196,24,143,.05); }
.dropzone svg{ width:34px; height:34px; color:var(--magenta); margin:0 auto 10px; }
.dropzone strong{ font-family:var(--font-head); }
.dropzone span{ color:var(--muted); font-size:.9rem; display:block; margin-top:4px; }
.filelist{ margin-top:14px; display:grid; gap:8px; }
.filelist__item{ display:flex; align-items:center; gap:12px; background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:.9rem; }
.filelist__item svg{ width:18px; height:18px; color:var(--magenta); flex-shrink:0; }
.filelist__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filelist__size{ color:var(--muted); font-variant-numeric:tabular-nums; }
.filelist__rm{ border:0; background:transparent; color:var(--muted); width:28px; height:28px; border-radius:8px; display:grid; place-items:center; }
.filelist__rm:hover{ background:rgba(220,38,38,.1); color:var(--danger); }

.form__consent{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 20px; font-size:.9rem; color:var(--muted); }
.form__consent input{ width:20px; height:20px; margin-top:2px; accent-color:var(--magenta); flex-shrink:0; }
.form__consent a{ color:var(--magenta); text-decoration:underline; }

.form__status{ margin-top:16px; padding:14px 16px; border-radius:12px; font-size:.95rem; display:none; }
.form__status.is-success{ display:block; background:rgba(22,163,74,.1); color:#15803d; border:1px solid rgba(22,163,74,.3); }
.form__status.is-error{ display:block; background:rgba(220,38,38,.08); color:#b91c1c; border:1px solid rgba(220,38,38,.3); }
.field.has-error input, .field.has-error select{ border-color:var(--danger); }
.field__err{ color:var(--danger); font-size:.82rem; margin-top:6px; display:none; }
.field.has-error .field__err{ display:block; }

.btn[aria-busy="true"]{ pointer-events:none; opacity:.85; }
.spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; }
.btn[aria-busy="true"] .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:760px){ .contact__grid{ grid-template-columns:1fr; } }
.contact__card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.contact__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.contact__card .ic{ width:48px; height:48px; border-radius:12px; background:var(--mist); display:grid; place-items:center; color:var(--magenta); margin-bottom:16px; }
.contact__card h4{ font-size:1.1rem; margin-bottom:6px; }
.contact__card a, .contact__card p{ color:var(--muted); margin:0; }
.contact__card a:hover{ color:var(--magenta); }
.map-note{ margin-top:8px; font-size:.86rem; }

.footer{ background:var(--ink); color:#fff; padding-block:64px 32px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:760px){ .footer__top{ grid-template-columns:1fr; gap:32px; } }
.footer .brand{ color:#fff; margin-bottom:18px; }
.footer .brand svg{ height:46px; }
.footer__about{ color:var(--muted-on-dark); max-width:340px; font-size:.96rem; }
.footer h5{ font-family:var(--font-head); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-on-dark); margin:0 0 16px; }
.footer__links a{ display:block; color:#e7e3ee; padding:6px 0; transition:color var(--dur); }
.footer__links a:hover{ color:var(--magenta-bright); }
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#fff; transition:background var(--dur), transform var(--dur); }
.socials a:hover{ background:var(--magenta); transform:translateY(-2px); }
.socials svg{ width:20px; height:20px; }
.footer__legal{ padding-top:24px; color:var(--muted-on-dark); font-size:.84rem; }
.footer__legal a{ color:#e7e3ee; text-decoration:underline; }
.footer__legal a:hover{ color:var(--magenta-bright); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding-top:20px; color:var(--muted-on-dark); font-size:.88rem; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .blob, .marquee__track, .hero h1 .accent::after{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* Skip link */
.skip{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; }
.skip:focus{ left:16px; }

/* ============================================================
   CALCULATOR PAGE
   ============================================================ */
.calc-hero{ position:relative; padding:108px 0 36px; overflow:hidden; }
.calc-hero__bg{ position:absolute; inset:0; z-index:0; }
.calc-hero .container{ position:relative; z-index:1; }
.calc-hero h1{ font-size:clamp(2rem,5vw,3.2rem); margin:14px 0 0; }
.calc-hero__sub{ color:var(--muted); max-width:640px; margin:16px 0 0; font-size:1.08rem; }

.calc-section{ padding-top:20px; }
.calc-layout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:32px; align-items:start; }
@media (max-width:920px){ .calc-layout{ grid-template-columns:1fr; } }

.calc-form{ display:grid; gap:20px; }
.calc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(20px,3vw,30px); }
.calc-card__title{ display:flex; align-items:center; gap:12px; font-size:1.2rem; margin:0 0 18px; }
.calc-step{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--magenta),var(--magenta-deep)); color:#fff; display:grid; place-items:center; font-size:.95rem; font-family:var(--font-head); flex-shrink:0; }

/* segmented radios */
.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px){ .seg{ grid-template-columns:1fr; } }
.seg__opt{ cursor:pointer; display:block; }
.seg__opt input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.seg__box{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--mist); transition:border-color var(--dur),background var(--dur),box-shadow var(--dur); min-height:66px; justify-content:center; }
.seg__box strong{ font-family:var(--font-head); font-size:1rem; }
.seg__box small{ color:var(--muted); font-size:.84rem; }
.seg__opt input:checked + .seg__box{ border-color:var(--magenta); background:#fff; box-shadow:0 0 0 3px rgba(196,24,143,.14); }
.seg__opt input:focus-visible + .seg__box{ outline:3px solid var(--magenta-bright); outline-offset:2px; }
.seg--good{ color:var(--success)!important; font-weight:600; }
.seg--rush{ color:var(--magenta)!important; font-weight:600; }

.field-label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem; margin-bottom:4px; }
.field-note{ display:block; color:var(--muted); font-size:.82rem; margin-bottom:12px; }
.calc-hint{ color:var(--muted); font-size:.92rem; margin:0 0 16px; }

/* sizes grid */
.sizes-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:520px){ .sizes-grid{ grid-template-columns:repeat(3,1fr); } }
.size-cell{ display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.size-cell span{ font-family:var(--font-head); font-weight:600; font-size:.85rem; }
.size-cell.is-3xl span{ color:var(--magenta); }
.size-cell input{ width:100%; text-align:center; padding:10px 6px; border:1.5px solid var(--line); border-radius:10px; background:var(--mist); font:inherit; min-height:44px; }
.size-cell input:focus{ outline:none; border-color:var(--magenta); background:#fff; }
.sizes-total{ margin:14px 0 0; font-size:.95rem; color:var(--muted); }
.sizes-total strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* color swatches */
.color-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(30px,1fr)); gap:8px; margin-top:2px; }
.swatch{ aspect-ratio:1; border-radius:8px; border:1px solid rgba(0,0,0,.15); cursor:pointer; transition:transform var(--dur); }
.swatch:hover{ transform:scale(1.12); }
.swatch.is-sel{ outline:3px solid var(--magenta); outline-offset:2px; }
.color-selected{ margin:14px 0 0; font-size:.95rem; color:var(--muted); }
.color-selected strong{ color:var(--ink); }

/* positions */
.position-row{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; background:var(--mist); }
.position-row__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.position-row__idx{ font-family:var(--font-head); font-weight:700; color:var(--magenta); }
.position-row__rm{ border:0; background:transparent; color:var(--muted); width:32px; height:32px; border-radius:8px; cursor:pointer; }
.position-row__rm:hover{ background:rgba(220,38,38,.1); color:var(--danger); }
.position-row__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .position-row__grid{ grid-template-columns:1fr; } }
.position-row .field{ margin:0; }
.position-row .field span{ display:block; font-family:var(--font-head); font-weight:600; font-size:.85rem; margin-bottom:6px; }
.position-row input, .position-row select{ width:100%; font:inherit; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; min-height:46px; color:var(--ink); }
.position-row input:focus, .position-row select:focus{ outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(196,24,143,.12); }

.btn--sm{ padding:11px 18px; min-height:44px; font-size:.95rem; }

/* result ticket */
.calc-aside{ position:sticky; top:96px; }
@media (max-width:920px){ .calc-aside{ position:static; } }
.ticket{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-md); }
.ticket__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.ticket__title{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; }
.ticket__tag{ font-size:.7rem; letter-spacing:.12em; background:var(--magenta); padding:4px 10px; border-radius:999px; font-weight:600; }
.ticket__error{ background:rgba(224,33,138,.15); border:1px solid rgba(224,33,138,.4); color:#ffd0e8; padding:10px 12px; border-radius:10px; font-size:.86rem; margin-bottom:14px; }
.ticket__sep{ height:1px; background:rgba(255,255,255,.12); margin:16px 0; }
.ticket__sub{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-on-dark); margin:0 0 10px; }
.trow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:.95rem; color:var(--muted-on-dark); }
.trow strong{ color:#fff; font-variant-numeric:tabular-nums; }
.trow--total{ font-size:1.05rem; color:#fff; margin-top:4px; }
.trow--total strong{ color:var(--magenta-bright); font-size:1.5rem; font-family:var(--font-head); }
.rot-list{ display:grid; gap:6px; }
.rot-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.88rem; color:#fff; }
.rot-badge{ font-size:.68rem; letter-spacing:.06em; background:rgba(255,255,255,.1); padding:3px 8px; border-radius:6px; color:var(--muted-on-dark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rot-badge--90{ background:rgba(224,33,138,.22); color:#ffd0e8; }
.shirt-summary{ font-size:.9rem; color:#fff; margin:0; }
.ticket__note{ font-size:.8rem; color:var(--muted-on-dark); margin:16px 0 18px; }
.ticket__hint{ font-size:.78rem; color:var(--muted-on-dark); margin:10px 0 0; text-align:center; }
.ticket .btn--primary{ box-shadow:none; }
.turnstile-box{ margin:0 0 14px; min-height:65px; display:flex; justify-content:center; }
.ticket__consent{ color:var(--muted-on-dark); margin:4px 0 16px; }
.ticket__consent a{ color:var(--magenta-bright); }
.ticket #formStatus{ margin-top:14px; }