/* ============================================================
   NIXON KIDS
   Style. Comfort. Quality
   ============================================================ */

:root{
  /* Brand */
  --red:        #E31E24;
  --red-deep:   #B5161B;
  --red-tint:   #FDECEC;
  --ink:        #1A1A1A;
  --ink-soft:   #2A2A2A;
  --cream:      #FAF7F5;
  --white:      #FFFFFF;

  /* Pastels — pink runs warm to sit with the shop photo's pink interior */
  --pink:       #FBDCE4;
  --pink-deep:  #F3B9C8;
  --blue:       #D7E7F7;
  --blue-deep:  #AFCFEE;
  --mint:       #D8EDE4;
  --sand:       #F6E7D4;

  /* Text. --muted carries small uppercase labels, so it is tuned to clear 4.5:1
     on --cream (the lighter of the two backgrounds it sits on), not just white. */
  --body:       #55514E;
  --muted:      #726B66;
  --line:       #EAE4E0;

  /* The N mark's dark blade. Overridden on dark backgrounds. */
  --mark-ink:   #1A1A1A;

  --nav-h:      82px;
  --radius:     18px;
  --shadow:     0 4px 24px rgba(26,26,26,.06);
  --shadow-lg:  0 18px 50px rgba(26,26,26,.13);

  --ff-display: "Baloo 2", system-ui, sans-serif;
  --ff-body:    "Poppins", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--ff-display);
  color:var(--ink);
  line-height:1.15;
  margin:0;
  font-weight:700;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--red); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 10px; font-weight:600;
}
.skip-link:focus{ top:0; }

.wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:24px;
}

.red{ color:var(--red); }

/* ------------------------------------------------------------
   Icons
   ------------------------------------------------------------ */
.ico{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.ico--xs{ width:15px; height:15px; stroke-width:2; }
.ico--lg{ width:34px; height:34px; stroke-width:1.5; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-body);
  font-size:.94rem; font-weight:600; letter-spacing:.02em;
  padding:14px 28px;
  border:2px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s, background-color .18s, color .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--red{
  background:var(--red); color:#fff;
  box-shadow:0 8px 20px rgba(227,30,36,.28);
}
.btn--red:hover{ background:var(--red-deep); box-shadow:0 12px 26px rgba(227,30,36,.34); }

.btn--ghost{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

.btn--full{ width:100%; }

.link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.88rem; font-weight:600; color:var(--red);
}
.link span{ transition:transform .2s; }
.link:hover span{ transform:translateX(4px); }

/* ------------------------------------------------------------
   The swing tag — this page's signature device.
   A wholesale garment business hangs a tag on everything it sells,
   so every section label is one: notched corner, punched hole, string.
   ------------------------------------------------------------ */
.tag{
  display:inline-flex; align-items:center;
  position:relative;
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  /* --red on --red-tint is only 4.11:1; this text is small, so it needs the
     deeper red to clear 4.5:1. */
  color:var(--red-deep);
  background:var(--red-tint);
  padding:7px 16px 7px 30px;
  margin-bottom:16px;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  border-radius:0 6px 6px 0;
}
.tag::before{
  content:"";
  position:absolute; left:13px; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%;
  background:var(--red);
}
.tag--light{ background:rgba(255,255,255,.1); color:#fff; }
.tag--light::before{ background:#fff; }

/* ------------------------------------------------------------
   Section shell
   ------------------------------------------------------------ */
.section{ padding-block:clamp(60px,7.5vw,104px); }
.section--cream{ background:var(--cream); }
.section--ink{ background:var(--ink); color:rgba(255,255,255,.72); }
.section--ink h2,
.section--ink h3{ color:#fff; }

.head{ max-width:700px; margin:0 auto clamp(36px,4.5vw,58px); text-align:center; }
.head__title{
  font-size:clamp(1.85rem,4vw,2.9rem);
  font-weight:800;
  letter-spacing:-.01em;
  position:relative;
  padding-bottom:18px;
  text-wrap:balance;
}
.head__title::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:52px; height:4px; margin-left:-26px;
  background:var(--red);
  border-radius:999px;
}
.head__sub{ margin-top:16px; font-size:1rem; }
.section--ink .head__sub{ color:rgba(255,255,255,.65); }

/* ------------------------------------------------------------
   Utility bar
   ------------------------------------------------------------ */
.utility{
  background:var(--ink);
  color:rgba(255,255,255,.8);
  font-size:.78rem;
}
.utility__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:40px;
}
.utility__claim{
  display:flex; align-items:center; gap:8px;
  font-weight:500; letter-spacing:.04em; text-transform:uppercase;
}
.utility__contact{ display:flex; gap:26px; }
.utility__contact a{
  display:inline-flex; align-items:center; gap:7px;
  transition:color .18s;
}
.utility__contact a:hover{ color:#fff; }

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s, background-color .25s;
}
.nav.is-stuck{
  box-shadow:0 4px 22px rgba(26,26,26,.09);
  background:rgba(255,255,255,.98);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h);
}

/* The drawer is a child of .nav, so it stacks inside .nav's context. Lift the
   brand and the burger above it or the open drawer paints over the close button
   and there is no visible way out of the menu. */
.brand{ display:inline-flex; align-items:center; gap:11px; position:relative; z-index:76; }
/* The mark is 1387x1077 (~1.29:1), not square — sizing it square would letterbox
   it and shrink it. aspect-ratio keeps it exact at any width. */
.brand__mark{ width:46px; aspect-ratio:1387/1077; height:auto; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--ff-display);
  font-size:1.42rem; font-weight:800; letter-spacing:.01em;
  color:var(--red);
}
.brand__name em{ font-style:normal; color:var(--ink); }
.brand__tag{
  font-size:.55rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}

.menu{ display:flex; align-items:center; gap:30px; }
.menu__list{ display:flex; align-items:center; gap:28px; }
.menu__list a{
  position:relative;
  font-size:.86rem; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
  padding-block:6px;
  transition:color .18s;
}
.menu__list a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:2.5px;
  background:var(--red);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s;
}
.menu__list a:hover{ color:var(--red); }
.menu__list a:hover::after,
.menu__list a.is-active::after{ transform:scaleX(1); }
.menu__list a.is-active{ color:var(--red); }
.menu__cta{ padding:11px 24px; font-size:.84rem; }

.burger{
  display:none;
  position:relative; z-index:76;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.burger span{
  width:23px; height:2.5px;
  background:var(--ink); border-radius:2px;
  transition:transform .3s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.scrim{
  position:fixed; inset:var(--nav-h) 0 0; z-index:70;
  background:rgba(26,26,26,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .3s;
}
.scrim.is-on{ opacity:1; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(170deg,var(--cream) 0%,#fff 60%);
  padding-block:clamp(48px,6vw,84px);
}
.hero__in{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(32px,5vw,68px);
  position:relative;
  z-index:2;
}

.hero__title{
  font-size:clamp(2.2rem,5.4vw,4rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
  text-transform:uppercase;
}
.hero__line{ display:block; }
.hero__line--red{ color:var(--red); }

.hero__sub{
  margin-top:22px;
  font-size:1.02rem;
  max-width:44ch;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* Arched frame — the shop doorway shape, and it fits a portrait phone photo natively.
   Capped and right-aligned: unconstrained it grew to 687px against a 488px text
   block, overpowering the headline and running past the fold. */
.hero__visual{ position:relative; max-width:430px; margin-left:auto; }
.arch{
  position:relative;
  margin:0;
  border-radius:999px 999px 26px 26px;
  overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-lg);
  border:8px solid #fff;
}
.arch img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* A solid pastel arch peeking out behind the photo. An outline here read as a
   stray arc, because an offset stroke on a curve shows as a crescent rather
   than a frame. A filled shape reads as a deliberate layer. */
.hero__visual::before{
  content:"";
  position:absolute; inset:30px -18px -18px 30px;
  background:var(--pink-deep);
  border-radius:999px 999px 26px 26px;
  z-index:-1;
}
.arch__badge{
  position:absolute; left:-14px; bottom:26px;
  display:flex; align-items:center; gap:11px;
  background:#fff;
  padding:12px 20px 12px 15px;
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  font-size:.8rem;
  color:var(--red);
}
.arch__badge span{ display:flex; flex-direction:column; color:var(--body); line-height:1.4; }
.arch__badge strong{
  font-family:var(--ff-display);
  font-size:.95rem; color:var(--ink);
}

/* Floating pastel atmosphere. Three shapes, large and slow. */
.blobs{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(46px);
  opacity:.72;
}
.blob--pink{
  width:36vw; height:36vw; max-width:440px; max-height:440px;
  background:var(--pink);
  top:-8%; right:6%;
  animation:drift-a 26s ease-in-out infinite;
}
.blob--blue{
  width:30vw; height:30vw; max-width:380px; max-height:380px;
  background:var(--blue);
  bottom:-14%; right:34%;
  animation:drift-b 31s ease-in-out infinite;
}
.blob--cream{
  width:26vw; height:26vw; max-width:320px; max-height:320px;
  background:var(--sand);
  top:22%; left:-6%;
  animation:drift-a 23s ease-in-out infinite reverse;
}
@keyframes drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(28px,34px) scale(1.09); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-34px,-24px) scale(1.12); }
}

/* ------------------------------------------------------------
   Feature strip
   ------------------------------------------------------------ */
.features{ background:#fff; padding-block:clamp(40px,5vw,60px); }
.features__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.feature{ padding:22px 30px; border-left:1px solid var(--line); }
.feature:first-child{ border-left:0; padding-left:0; }
.feature .ico{ color:var(--red); margin-bottom:14px; }
.feature h2{ font-size:1.06rem; font-weight:700; margin-bottom:7px; }
.feature p{ font-size:.87rem; line-height:1.6; }

/* ------------------------------------------------------------
   Collection cards
   ------------------------------------------------------------ */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .28s, box-shadow .28s;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.card__art{
  aspect-ratio:1/1;
  display:grid; place-items:center;
  position:relative;
  overflow:hidden;
}
.card__art svg{ width:64%; height:auto; position:relative; z-index:1; }
/* A soft disc behind each garment so the artwork reads as composed, not floating */
.card__art::after{
  content:"";
  position:absolute;
  width:74%; aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.5);
}
.card__art--boys  { background:linear-gradient(150deg,var(--blue),#EAF3FC); }
.card__art--girls { background:linear-gradient(150deg,var(--pink),#FDEFF3); }
.card__art--unisex{ background:linear-gradient(150deg,var(--mint),#EDF7F2); }
.card__art--acc   { background:linear-gradient(150deg,var(--sand),#FCF4E9); }

.a-fill{ fill:#fff; stroke:var(--ink); stroke-width:2.4; stroke-linejoin:round; }
.a-line{ fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.card__art--boys  .a-fill{ fill:var(--blue-deep); }
.card__art--girls .a-fill{ fill:var(--pink-deep); }
.card__art--unisex .a-fill{ fill:#fff; }
.card__art--acc   .a-fill{ fill:#fff; }

.card__body{ padding:22px 22px 26px; }
.card__body h3{ font-size:1.14rem; margin-bottom:7px; }
.card__body p{ font-size:.87rem; line-height:1.6; margin-bottom:15px; }

/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.about{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:clamp(38px,6vw,80px);
}
/* No overflow:hidden here — the offset accent sits outside the frame and would
   be clipped by it. The radius goes on the image instead. */
.shot{ position:relative; margin:0; }
.shot img{
  width:100%;
  /* height:auto is load-bearing: the img's height="1920" attribute becomes a CSS
     height, and aspect-ratio is ignored unless height is auto. */
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover; object-position:center 45%;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
/* Same solid pastel offset as the hero arch, so the two photos read as one
   motif. An outline here read as a stray line rather than an accent. */
.shot::after{
  content:"";
  position:absolute; inset:24px -20px -20px 24px;
  background:var(--pink-deep);
  border-radius:var(--radius);
  z-index:-1;
}
.about__copy .head__title{ text-align:left; padding-bottom:0; }
.about__copy .head__title::after{ display:none; }
.about__lede{ margin-top:18px; font-size:1rem; }

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:34px 0;
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{ text-align:center; }
.stat .ico{ color:var(--red); margin:0 auto 9px; }
.stat__num{
  font-family:var(--ff-display);
  font-size:1.6rem; font-weight:800;
  color:var(--red);
  line-height:1.1;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.stat__num--text{ color:var(--ink); }
.stat dd{
  margin:2px 0 0;
  font-size:.76rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}

/* ------------------------------------------------------------
   Why choose us
   ------------------------------------------------------------ */
.whys{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.whys li{
  position:relative;
  padding:26px 24px 26px 62px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  transition:background-color .25s, border-color .25s, transform .25s;
}
.whys li:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(227,30,36,.5);
  transform:translateY(-4px);
}
.whys .ico{
  position:absolute; left:22px; top:27px;
  width:22px; height:22px;
  padding:4px;
  color:#fff;
  background:var(--red);
  border-radius:50%;
  stroke-width:3;
}
.whys h3{ font-size:1.02rem; margin-bottom:6px; }
.whys p{ font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.6); }

/* ------------------------------------------------------------
   Gallery
   ------------------------------------------------------------ */
/* 3 columns, lead tile 2x2 = 4 cells, + 5 placeholders = 9 = exactly 3 full rows.
   The counts are chosen to leave no holes; if you add a tile, add three. */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:205px;
  gap:16px;
}
.tile{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.tile--lead{ grid-column:span 2; grid-row:span 2; }
.tile--lead img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }

.tile--ph{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  border:1px dashed rgba(26,26,26,.14);
}
.tile--ph svg{ width:52px; height:52px; opacity:.5; }
.tile--ph .a-line{ stroke-width:3; }
.tile--ph span{
  font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.tile--blue{ background:linear-gradient(150deg,var(--blue),#EDF5FD); }
.tile--pink{ background:linear-gradient(150deg,var(--pink),#FDF1F4); }
.tile--mint{ background:linear-gradient(150deg,var(--mint),#EFF8F4); }
.tile--sand{ background:linear-gradient(150deg,var(--sand),#FDF6EC); }

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,52px);
  align-items:start;
}
.contact__info{ display:flex; flex-direction:column; gap:14px; }

.info{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 22px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  transition:border-color .22s, transform .22s, background-color .22s;
}
.info:hover{ border-color:var(--red); transform:translateX(4px); background:#fff; }
.info--static:hover{ transform:none; border-color:var(--line); background:var(--cream); }
.info .ico{ color:var(--red); }
.info span{ display:flex; flex-direction:column; font-size:.9rem; line-height:1.55; }
.info strong{
  font-family:var(--ff-display);
  font-size:1rem; color:var(--ink);
  margin-bottom:2px;
}

.map{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  height:230px;
  margin-top:4px;
}
.map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }

.contact__form{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.form__intro{ font-size:.87rem; color:var(--muted); margin-bottom:20px; }
#form label{
  display:block;
  font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink);
  margin-bottom:7px;
}
#form input,
#form textarea{
  width:100%;
  font-family:var(--ff-body); font-size:.94rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 15px;
  margin-bottom:18px;
  transition:border-color .2s, box-shadow .2s;
}
#form input::placeholder,
#form textarea::placeholder{ color:#B9B3AE; }
#form input:focus,
#form textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-tint);
}
#form input.is-bad,
#form textarea.is-bad{ border-color:var(--red); background:var(--red-tint); }
#form textarea{ resize:vertical; min-height:110px; }

.form__note{
  min-height:20px;
  margin-top:12px;
  font-size:.82rem;
  text-align:center;
  /* An error message has to be legible: --red on --cream is 4.40:1, just short. */
  color:var(--red-deep);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot{ background:var(--ink); color:rgba(255,255,255,.6); padding-top:clamp(48px,6vw,72px); }
.foot__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.5fr;
  gap:40px;
  padding-bottom:44px;
}
.foot__col h2{
  font-size:.86rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.foot__col ul{ display:flex; flex-direction:column; gap:11px; }
.foot__col a{ font-size:.88rem; transition:color .18s, padding-left .18s; }
.foot__col ul a:hover{ color:var(--red); padding-left:5px; }
.foot__col--brand p{ font-size:.88rem; margin:18px 0 20px; max-width:34ch; }

.brand--foot{ margin-bottom:0; }
.brand--foot .brand__mark{ --mark-ink:#FFFFFF; }
.brand--foot .brand__name em{ color:#fff; }
.brand--foot .brand__tag{ color:rgba(255,255,255,.45); }

.socials{ display:flex; gap:11px; }
.socials a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#fff;
  transition:background-color .2s, border-color .2s, transform .2s;
}
.socials a:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }
.socials .ico{ width:17px; height:17px; }

.foot__contact li{ display:flex; align-items:flex-start; gap:11px; font-size:.88rem; line-height:1.55; }
.foot__contact .ico{ width:17px; height:17px; margin-top:4px; color:var(--red); }

.foot__base{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;
}

/* ------------------------------------------------------------
   Floating actions
   ------------------------------------------------------------ */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:grid; place-items:center;
  width:56px; height:56px;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:transform .22s;
}
.wa .ico{ width:29px; height:29px; }
.wa:hover{ transform:scale(1.08); }
.wa::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:-1;
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%  { transform:scale(1);   opacity:.55; }
  70% { transform:scale(1.7); opacity:0;   }
  100%{ transform:scale(1.7); opacity:0;   }
}

.top{
  position:fixed; right:22px; bottom:88px; z-index:60;
  display:grid; place-items:center;
  width:44px; height:44px;
  background:var(--ink); color:#fff;
  border:0; border-radius:50%;
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background-color .2s;
}
.top.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.top:hover{ background:var(--red); }
.top .ico{ width:19px; height:19px; }

/* ------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------ */
/* Scoped to .js — without JavaScript nothing ever adds .is-in, so an unscoped
   opacity:0 here would blank the entire page. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease-out, transform .55s ease-out;
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1024px){
  .features__grid{ grid-template-columns:repeat(2,1fr); row-gap:8px; }
  .feature:nth-child(odd){ border-left:0; padding-left:0; }
  .feature:nth-child(n+3){ border-top:1px solid var(--line); padding-top:26px; }

  .cards{ grid-template-columns:repeat(2,1fr); }
  .whys{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; }

  /* 2 cols: lead 2x2 + 4 tiles fills rows 3–4, and the 5th widens to close the row. */
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .grid > .tile--ph:last-child{ grid-column:span 2; }
}

/* The nav collapses earlier than the layout does: six links plus a CTA button
   start wrapping to two lines around 1080px, well before the hero needs to stack. */
@media (max-width:1080px){
  .burger{ display:flex; }

  /* Sits below the navbar rather than over it, so the logo and the close button
     stay whole instead of being sliced by the drawer's edge. */
  .menu{
    position:fixed; top:var(--nav-h); right:0; z-index:75;
    width:min(320px,84vw); height:calc(100dvh - var(--nav-h));
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    background:#fff;
    padding:22px 30px 30px;
    box-shadow:-14px 0 44px rgba(26,26,26,.16);
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .menu.is-open{ transform:none; }
  .menu__list{ flex-direction:column; align-items:stretch; gap:0; }
  .menu__list li{ border-bottom:1px solid var(--line); }
  .menu__list a{
    display:block;
    font-size:.95rem;
    padding:16px 0;
  }
  .menu__list a::after{ display:none; }
  .menu__list a.is-active{ padding-left:12px; border-left:3px solid var(--red); }
  .menu__cta{ margin-top:26px; }
}

/* Layout stacking */
@media (max-width:900px){
  :root{ --nav-h:70px; }

  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .hero__copy{ text-align:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .tag{ margin-inline:auto; }
  .hero__visual{ max-width:380px; margin-inline:auto; }

  .about{ grid-template-columns:1fr; gap:44px; }
  .shot{ max-width:420px; margin-inline:auto; }
  .shot img{ aspect-ratio:5/6; }
  .about__copy{ text-align:center; }
  .about__copy .head__title{ text-align:center; }
  .about__lede{ margin-inline:auto; max-width:60ch; }

  .contact{ grid-template-columns:1fr; }

  .grid{ grid-auto-rows:150px; }
  .tile--lead{ grid-row:span 2; }
}

@media (max-width:768px){
  .utility{ display:none; }
}

@media (max-width:640px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px 12px; }
  .whys{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:32px; }
  .foot__base{ flex-direction:column; text-align:center; gap:8px; }
  .foot__col--brand p{ max-width:none; }
}

@media (max-width:480px){
  .wrap{ padding-inline:18px; }

  .features__grid{ grid-template-columns:1fr; }
  .feature{ border-left:0; padding:20px 0; }
  .feature:nth-child(n+2){ border-top:1px solid var(--line); }

  .cards{ grid-template-columns:1fr; gap:18px; }

  .grid{ grid-template-columns:1fr; grid-auto-rows:180px; }
  .grid > .tile--lead{ grid-column:span 1; grid-row:span 2; }
  .grid > .tile--ph:last-child{ grid-column:span 1; }

  .hero__actions .btn{ flex:1 1 100%; }
  .arch__badge{ left:50%; bottom:-18px; transform:translateX(-50%); white-space:nowrap; }
  .hero__visual::before{ inset:18px -10px -10px 18px; }

  .wa{ width:52px; height:52px; right:16px; bottom:16px; }
  .top{ right:16px; bottom:78px; }
}

/* ============================================================
   REDUCED MOTION
   Kill ambient and entrance motion, but never hide content:
   revealed elements start visible, counters are handled in JS.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .blob{ animation:none; }
  .wa::before{ display:none; }

  .js [data-reveal]{ opacity:1; transform:none; }
}