/* ============================================================
   Ael Tattoos — style.css
   Dark editorial tattoo studio
   ============================================================ */

:root{
  --bg:        #0e0e0f;
  --bg-2:      #141416;
  --bg-3:      #1a1a1d;
  --ink:       #f4f2ee;
  --ink-dim:   #a8a5a0;
  --ink-mute:  #6f6c68;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);
  --accent:    #c8452f;      /* muted vermillion */
  --accent-2:  #e05a41;
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Jost", system-ui, sans-serif;
  --ease:  cubic-bezier(.22,1,.36,1);
  --gutter: clamp(20px, 5vw, 80px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Typographic helpers ---------- */
.sec-head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,6vw,80px); }
.sec-head--left{ text-align:left; margin-inline:0; }
.sec-head__over{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--accent-2); display:block; margin-bottom:.6rem; }
.sec-head__title{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(2.4rem, 6vw, 4.6rem); letter-spacing:.01em;
}
.sec-head__lead{ color:var(--ink-dim); margin-top:1.2rem; font-size:1.02rem; }

.link-underline{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); position:relative; display:inline-block; padding-bottom:4px;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); }

.btn{
  display:inline-block; font-family:var(--sans); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; padding:1.15em 2.6em; border:1px solid var(--line-2);
  transition:.45s var(--ease); cursor:pointer; position:relative; overflow:hidden;
}
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--solid:hover{ background:var(--accent-2); border-color:var(--accent-2); }

/* ---------- Reveal base ---------- */
.reveal{ opacity:0; transform:translateY(38px); }

/* ============================================================
   Preloader
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:2000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .6s ease, visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ text-align:center; }
.preloader__logo{
  font-family:var(--serif); font-weight:900; font-size:clamp(3rem,9vw,6rem);
  letter-spacing:.12em; display:block; opacity:.95;
}
.preloader__bar{ display:block; width:170px; height:1px; background:var(--line-2); margin:1.4rem auto 0; overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0; background:var(--accent); }

/* ============================================================
   Header
   ============================================================ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  padding:1.5rem 0; transition:.5s var(--ease);
}
.header.is-scrolled{ background:rgba(14,14,15,.82); backdrop-filter:blur(14px); padding:.85rem 0; border-bottom:1px solid var(--line); }
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.nav{ display:flex; gap:2.4rem; }
.nav--right{ justify-content:flex-end; }
.nav a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
  position:relative; transition:color .3s;
}
.nav a:hover{ color:var(--ink); }
.nav__cta{ color:var(--ink) !important; border:1px solid var(--line-2); padding:.7em 1.4em; }
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); }

.brand{ text-align:center; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:900; font-size:1.7rem; letter-spacing:.14em; display:block; }
.brand__sub{ font-family:var(--sans); font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:.35rem; }

.burger{ display:none; background:none; border:0; flex-direction:column; gap:6px; width:34px; cursor:pointer; justify-self:end; }
.burger span{ height:1.5px; width:100%; background:var(--ink); transition:.4s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* Fullscreen menu */
.menu-overlay{
  position:fixed; inset:0; z-index:850; background:var(--bg-2);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  opacity:0; visibility:hidden; transition:.6s var(--ease);
}
.menu-overlay.is-open{ opacity:1; visibility:visible; }
.menu-overlay__list{ list-style:none; text-align:center; }
.menu-overlay__list li{ overflow:hidden; }
.menu-overlay__list a{
  font-family:var(--serif); font-size:clamp(2rem,7vw,4rem); font-weight:700; line-height:1.25;
  display:inline-block; transition:color .4s, transform .6s var(--ease); transform:translateY(105%);
  position:relative;
}
.menu-overlay.is-open .menu-overlay__list a{ transform:translateY(0); }
.menu-overlay__list a::before{ content:attr(data-i); font-family:var(--sans); font-size:.7rem; color:var(--accent); vertical-align:super; margin-right:.6rem; letter-spacing:.1em; }
.menu-overlay__list a:hover{ color:var(--accent-2); font-style:italic; }
.menu-overlay__foot{ position:absolute; bottom:2.4rem; display:flex; gap:2rem; font-size:.72rem; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; display:grid; place-items:center; }
.hero__bg{
  position:absolute; inset:-8% 0; background:
    linear-gradient(180deg, rgba(14,14,15,.62), rgba(14,14,15,.42) 40%, rgba(14,14,15,.94)),
    url("../assets/banner.jpg") center/cover no-repeat;
  filter:grayscale(1) contrast(1.06);
  will-change:transform;
}
.hero__scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0,0,0,.55)); }
.hero__content{ position:relative; text-align:center; z-index:2; padding-inline:var(--gutter); }
.hero__eyebrow{ font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:1.6rem; }
.hero__title{ line-height:.9; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:inline-block; }
.hero__title .line:first-child span{ font-family:var(--serif); font-weight:900; font-size:clamp(4.5rem,20vw,15rem); letter-spacing:.06em; }
.hero__title .line--serif span{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,9vw,7rem); }
.hero__title em{ font-style:italic; color:var(--accent-2); }
.hero__lead{ margin-top:1.8rem; color:var(--ink-dim); font-size:clamp(1rem,2.2vw,1.25rem); }

.hero__scroll{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2; text-align:center; }
.hero__scroll span{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); }
.hero__scroll i{ display:block; width:1px; height:44px; margin:.7rem auto 0; background:linear-gradient(var(--accent),transparent); animation:scrollLine 2s infinite; transform-origin:top; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); } 40%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }
.hero__side{ position:absolute; top:50%; z-index:2; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); writing-mode:vertical-rl; }
.hero__side--l{ left:1.6rem; transform:translateY(-50%) rotate(180deg); }
.hero__side--r{ right:1.6rem; transform:translateY(-50%); }

/* ============================================================
   Pillars
   ============================================================ */
.pillars{ padding:clamp(70px,10vw,140px) 0; background:var(--bg); }
.pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,5vw,80px); }
.pillar{ text-align:center; }
.pillar__icon{ width:96px; height:96px; margin:0 auto 1.8rem; color:var(--ink); }
.pillar__icon svg{ width:100%; height:100%; }
.pillar__icon img{ width:100%; height:100%; object-fit:contain; transition:transform .8s var(--ease); }
.pillar:hover .pillar__icon img{ transform:rotate(45deg) scale(1.06); }
.pillar h3{ font-family:var(--serif); font-weight:700; font-size:1.7rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1rem; }
.pillar p{ color:var(--ink-dim); font-size:.98rem; max-width:320px; margin:0 auto 1.6rem; }

/* ============================================================
   Showcase / gallery
   ============================================================ */
.showcase{ padding:clamp(70px,10vw,140px) 0; background:var(--bg-2); position:relative; }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:14px; }
.gallery__item{ position:relative; overflow:hidden; background:var(--bg-3); grid-row:span 1; }
.gallery__item--tall{ grid-row:span 2; }
.gallery__item--wide{ grid-column:span 2; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s; filter:grayscale(1) contrast(1.05); }
.gallery__item:hover img{ transform:scale(1.07); filter:grayscale(1) contrast(1.1) brightness(.72); }
.gallery__meta{
  position:absolute; left:0; bottom:0; padding:1.4rem 1.5rem; z-index:2;
  transform:translateY(14px); opacity:0; transition:.5s var(--ease);
}
.gallery__item:hover .gallery__meta{ transform:translateY(0); opacity:1; }
.gallery__meta em{ display:block; font-family:var(--serif); font-style:italic; color:var(--accent-2); font-size:.9rem; }
.gallery__meta b{ font-family:var(--serif); font-weight:700; font-size:1.35rem; }
.showcase__more{ text-align:center; margin-top:clamp(40px,6vw,70px); }

/* ============================================================
   Studio
   ============================================================ */
.studio{ padding:clamp(70px,10vw,140px) 0; background:var(--bg); }
.studio__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.studio__media{ position:relative; }
.studio__media img{ width:100%; filter:grayscale(1) contrast(1.05); }
.studio__badge{
  position:absolute; right:-20px; bottom:-20px; background:var(--accent); color:#fff;
  width:130px; height:130px; border-radius:50%; display:grid; place-content:center; text-align:center; line-height:1.1;
}
.studio__badge b{ font-family:var(--serif); font-size:2.2rem; font-weight:700; }
.studio__badge span{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; }

.accordion{ margin-top:2.4rem; border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%; background:none; border:0; color:var(--ink); cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.15rem; padding:1.35rem 3rem 1.35rem 0; position:relative;
  display:flex; justify-content:space-between; align-items:center; transition:color .3s;
}
.acc__head:hover{ color:var(--accent-2); }
.acc__head i{ position:relative; width:14px; height:14px; flex:none; }
.acc__head i::before,.acc__head i::after{ content:""; position:absolute; background:currentColor; transition:.4s var(--ease); }
.acc__head i::before{ top:6px; left:0; width:14px; height:1.5px; }
.acc__head i::after{ top:0; left:6px; width:1.5px; height:14px; }
.acc__item.is-open .acc__head i::after{ transform:rotate(90deg); opacity:0; }
.acc__item.is-open .acc__head{ color:var(--accent-2); }
.acc__panel{ overflow:hidden; height:0; }
.acc__panel p{ color:var(--ink-dim); padding-bottom:1.4rem; padding-right:2rem; font-size:.98rem; }

/* ============================================================
   Counters
   ============================================================ */
.counters{ padding:clamp(60px,8vw,110px) 0; background:var(--bg-2); border-block:1px solid var(--line); }
.counters__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; }
.counter b{ font-family:var(--serif); font-weight:700; font-size:clamp(2.8rem,6vw,4.6rem); display:block; line-height:1; }
.counter span{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); margin-top:.9rem; display:block; }

/* ============================================================
   About Ael
   ============================================================ */
.about{ padding:clamp(70px,10vw,140px) 0; background:var(--bg); }
.about__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,7vw,110px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.about__tag{
  position:absolute; left:0; bottom:0; transform:translateY(50%);
  background:var(--accent); color:#fff; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.85em 1.4em; white-space:nowrap;
}
.about__text{ margin-top:1.8rem; }
.about__text p{ color:var(--ink-dim); font-size:1.02rem; margin-bottom:1.1rem; }
.about__text p:first-child{ color:var(--ink); font-size:1.14rem; }
.about__meta{ display:flex; gap:clamp(24px,4vw,54px); margin:2.4rem 0; padding:1.6rem 0; border-block:1px solid var(--line); flex-wrap:wrap; }
.about__meta b{ font-family:var(--serif); font-weight:700; font-size:1.9rem; display:block; line-height:1; }
.about__meta span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-top:.55rem; display:block; }
.about__actions{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{ overflow:hidden; padding:clamp(30px,4vw,50px) 0; background:var(--bg-2); border-block:1px solid var(--line); }
.marquee__track{ display:flex; align-items:center; gap:2.4rem; white-space:nowrap; width:max-content; animation:marquee 28s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,4vw,3rem); text-transform:uppercase; letter-spacing:.04em; color:transparent; -webkit-text-stroke:1px var(--ink-dim); }
.marquee__track i{
  display:inline-block; width:1.05rem; height:1.05rem; flex:none; background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='21'/%3E%3Cline%20x1='3'%20y1='12'%20x2='21'%20y2='12'/%3E%3Cline%20x1='5.6'%20y1='5.6'%20x2='18.4'%20y2='18.4'/%3E%3Cline%20x1='18.4'%20y1='5.6'%20x2='5.6'%20y2='18.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='21'/%3E%3Cline%20x1='3'%20y1='12'%20x2='21'%20y2='12'/%3E%3Cline%20x1='5.6'%20y1='5.6'%20x2='18.4'%20y2='18.4'/%3E%3Cline%20x1='18.4'%20y1='5.6'%20x2='5.6'%20y2='18.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   Leave a review CTA
   ============================================================ */
.review-cta{ margin-top:clamp(40px,7vw,90px); padding:clamp(70px,10vw,130px) 0; background:var(--bg); text-align:center; }
.review-cta__title{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); line-height:1; margin-bottom:1rem; }
.review-cta__lead{ color:var(--ink-dim); max-width:480px; margin:0 auto 2.2rem; }

/* ============================================================
   Blog
   ============================================================ */
.blog{ padding:clamp(70px,10vw,140px) 0; background:var(--bg-2); }
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.5vw,48px); }
.post__img{ display:block; overflow:hidden; margin-bottom:1.4rem; background:var(--bg-3); }
.post__img img{ width:100%; aspect-ratio:7/5; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:transform 1s var(--ease), filter .6s; }
.post:hover .post__img img{ transform:scale(1.06); filter:grayscale(0); }
.post__date{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2); }
.post h3{ font-family:var(--serif); font-weight:700; font-size:1.5rem; margin:.7rem 0 .8rem; line-height:1.2; }
.post h3 a{ transition:color .3s; }
.post:hover h3 a{ color:var(--accent-2); }
.post p{ color:var(--ink-dim); font-size:.95rem; margin-bottom:1.3rem; }

/* ============================================================
   Booking
   ============================================================ */
.booking{ padding:clamp(70px,10vw,140px) 0; background:var(--bg); }
.booking__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); }
.hours{ list-style:none; margin:2.4rem 0; border-top:1px solid var(--line); }
.hours li{ display:flex; justify-content:space-between; align-items:baseline; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.hours span{ color:var(--ink-dim); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; }
.hours b{ font-family:var(--serif); font-size:1.15rem; }
.booking__contact{ display:flex; flex-direction:column; gap:.6rem; }
.booking__contact a{ font-family:var(--serif); font-size:1.35rem; transition:color .3s; }
.booking__contact a:hover{ color:var(--accent-2); }
.booking__contact span{ color:var(--ink-mute); font-size:.9rem; margin-top:.4rem; }

.booking__form{ display:flex; flex-direction:column; gap:1.6rem; }
.field{ position:relative; }
.field input,.field textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--ink);
  font-family:var(--sans); font-size:1rem; padding:.9rem 0; resize:none; transition:border-color .4s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field label{ position:absolute; left:0; top:.9rem; color:var(--ink-mute); font-size:1rem; pointer-events:none; transition:.35s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:-.7rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2);
}
.booking__form .btn{ align-self:flex-start; margin-top:.5rem; }
.booking__note{ font-size:.85rem; color:var(--accent-2); min-height:1em; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:clamp(50px,7vw,90px); }
.footer__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding-bottom:clamp(40px,5vw,70px); border-bottom:1px solid var(--line); }
.brand--footer{ text-align:left; }
.footer__nav{ display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.footer__nav a{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); transition:color .3s; }
.footer__nav a:hover{ color:var(--ink); }
.footer__soc{ display:flex; gap:1.4rem; justify-content:flex-end; }
.footer__soc a{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); transition:color .3s; }
.footer__soc a:hover{ color:var(--accent); }
.footer__base{ display:flex; justify-content:space-between; padding:1.8rem 0; font-size:.72rem; letter-spacing:.08em; color:var(--ink-mute); }

/* To-top */
.to-top{ position:fixed; right:1.6rem; bottom:1.6rem; z-index:800; width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; background:rgba(14,14,15,.6); backdrop-filter:blur(8px); opacity:0; transform:translateY(20px); transition:.5s var(--ease); pointer-events:none; }
.to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top i{ width:9px; height:9px; border-left:1.5px solid var(--ink); border-top:1.5px solid var(--ink); transform:rotate(45deg); margin-top:3px; }
.to-top:hover{ border-color:var(--accent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .gallery__item--wide{ grid-column:span 2; }
  .studio__grid,.booking__grid,.about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:440px; }
  .studio__badge{ right:20px; }
}
@media (max-width:820px){
  .nav--left,.nav--right{ display:none; }
  .burger{ display:flex; }
  .header__inner{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ text-align:left; }
  .pillars__grid{ grid-template-columns:1fr; gap:56px; }
  .counters__grid{ grid-template-columns:repeat(2,1fr); gap:44px 20px; }
  .blog__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .footer__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:2rem; }
  .brand--footer{ text-align:center; }
  .footer__soc{ justify-content:center; }
  .footer__base{ flex-direction:column; gap:.6rem; text-align:center; align-items:center; }
}
@media (max-width:560px){
  .gallery{ grid-template-columns:1fr; }
  .gallery__item,.gallery__item--tall,.gallery__item--wide{ grid-column:auto; grid-row:auto; height:300px; }
  .about__meta{ gap:24px; }
  .counters__grid{ grid-template-columns:1fr; }
  .hero__side{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track,.hero__scroll i{ animation:none; }
  *{ scroll-behavior:auto !important; }
}