/* =================================================================
   LOOKS BY ALIYA — styles.css
   Minimal editorial multi-page site. Brand fonts: Playfair Display
   (display), Albert Sans (labels/nav/buttons), Onest (body).
   ================================================================= */
:root{
  --ink:#0e0e0e;
  --ink-2:#1c1c1a;
  --body:#5d605a;
  --body-soft:#7c7f79;
  --line:#e7e7e2;
  --line-2:#ededea;
  --sage:#c7d1c2;
  --sage-deep:#b3c0ad;
  --sage-tint:#eef1eb;
  --night:#0b0b0b;
  --cloud:#f6f5f0;
  --maxw:1240px;
  --space:clamp(72px,9vw,150px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* manipulation = keep scrolling and pinch-zoom, drop double-tap-to-zoom.
   Deliberately NOT user-scalable=no, which would break zoom for low-vision
   visitors (and iOS ignores it anyway). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;touch-action:manipulation}
a,button,input,select,textarea,label,summary,[role="button"]{touch-action:manipulation}
body{
  font-family:"Onest",system-ui,sans-serif;
  color:var(--ink);background:#fff;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* No page-load fade and no view transition: both delayed or flickered the
   new page. Plain navigation is fastest - browsers hold the old page on
   screen until the new one has painted. */
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
p{color:var(--body)}
em{font-style:italic}
::selection{background:var(--sage);color:var(--ink)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 30px;border:1px solid var(--ink);border-radius:0;cursor:pointer;background:transparent;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.btn--outline{background:transparent;color:var(--ink)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--sage);border-color:var(--sage);color:var(--ink)}
.btn--lg{padding:18px 42px;font-size:13.5px}

/* quiet editorial link (portfolio — keeps booking subtle, not salesy) */
.text-link{display:inline-flex;align-items:center;gap:9px;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--sage-deep);padding-bottom:5px;transition:gap .35s var(--ease),border-color .35s var(--ease)}
.text-link::after{content:"→";font-size:13px}
.text-link:hover{gap:14px;border-color:var(--ink)}
.section--dark .text-link{color:#fff;border-color:var(--sage)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.nav__logo{font-family:"Playfair Display",serif;font-weight:600;font-size:23px;letter-spacing:.01em;color:#fff;white-space:nowrap;transition:color .4s var(--ease)}
.nav__logo em{font-weight:500;font-size:.82em;opacity:.8;padding:0 .1em}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a:not(.btn){position:relative;font-family:"Albert Sans",sans-serif;font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:4px 0;transition:color .4s var(--ease)}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav__links .btn{border-color:#fff;color:#fff;padding:11px 26px}
.nav__links .btn:hover{background:#fff;color:var(--ink)}
.nav__toggle{position:relative;display:none;flex-direction:column;gap:6px;width:28px;height:20px;background:none;border:0;cursor:pointer;z-index:70}
/* The 28x20 bars are the visual only. This invisible ::before grows the touch
   target to 56x48 (past the 44x44 minimum) without shifting any layout. */
.nav__toggle::before{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px}
.nav__toggle span{display:block;height:1.5px;width:100%;background:#fff;transition:transform .4s var(--ease),opacity .3s,background .4s}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* solid state (scrolled, or sub-pages) */
.nav--scrolled,.nav--solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px -26px rgba(40,46,36,.5)}
.nav--scrolled .nav__logo,.nav--solid .nav__logo{color:var(--ink)}
.nav--scrolled .nav__links a:not(.btn),.nav--solid .nav__links a:not(.btn){color:var(--ink)}
.nav--scrolled .nav__links .btn,.nav--solid .nav__links .btn{border-color:var(--ink);color:var(--ink)}
.nav--scrolled .nav__links .btn:hover,.nav--solid .nav__links .btn:hover{background:var(--ink);color:#fff}
.nav--scrolled .nav__toggle span,.nav--solid .nav__toggle span{background:var(--ink)}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:#c9c6c0 center center/cover no-repeat;
  background-image:url("IMAGES%20GO%20HERE/website-centered.jpg");}
/* Hidden by default so desktop never downloads the video at all; the mobile
   media query below turns it on. Sits under .hero__overlay and .hero__content,
   both of which paint later / carry a z-index. */
.hero__video{display:none}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,11,.45),rgba(11,11,11,.25) 40%,rgba(11,11,11,.6))}
.hero__content{position:relative;z-index:2;text-align:center;width:100%;padding-top:74px}
.hero__kicker{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--sage);margin-bottom:22px}
.hero__title{font-size:clamp(3rem,9vw,7.5rem);font-weight:600;color:#fff;line-height:1}
.hero__title em{font-weight:500;font-size:.62em;opacity:.92}
.hero__tagline{font-family:"Albert Sans",sans-serif;font-weight:400;font-size:clamp(.82rem,1.7vw,1.05rem);letter-spacing:.18em;text-transform:uppercase;color:#f1efe9;margin:26px 0 40px}
.hero__tagline span{color:var(--sage);padding:0 6px}
.hero__scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;font-family:"Albert Sans",sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;opacity:.85}
.hero__scroll::after{content:"";display:block;width:1px;height:34px;background:#fff;margin:10px auto 0;opacity:.6}

/* ---------- intro splash (home, first visit per session) ---------- */
.splash{position:fixed;inset:0;z-index:200;background:var(--night);display:flex;align-items:center;justify-content:center;will-change:transform;
  animation:splashOut 1s cubic-bezier(.76,0,.24,1) 1.5s forwards}
.splash__inner{text-align:center;padding:0 24px}
.splash__brand{display:block;font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(2rem,6.5vw,4.6rem);color:#fff;opacity:0;transform:translateY(16px);
  animation:splashBrand 1s var(--ease) .15s forwards}
.splash__brand em{font-style:italic;font-weight:500;font-size:.78em;opacity:.85;padding:0 .08em}
.splash__rule{display:block;width:0;height:1px;background:var(--sage);margin:20px auto 0;animation:splashRule .8s var(--ease) .65s forwards}
@keyframes splashBrand{to{opacity:1;transform:none}}
@keyframes splashRule{to{width:130px}}
@keyframes splashOut{to{transform:translateY(-100%);visibility:hidden}}
body.splash-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.splash{display:none}}

/* ---------- email signup ---------- */
.signup{background:var(--cloud);text-align:center;padding:clamp(64px,9vw,120px) 0}
.signup__eyebrow{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:18px}
.signup h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px}
.signup p{max-width:46ch;margin:0 auto 34px}
.signup__form{display:flex;gap:12px;max-width:560px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.signup__form input{flex:1;min-width:240px;background:#fff;border:1px solid var(--line);padding:16px 20px;font-family:"Onest",sans-serif;font-size:15px;color:var(--ink);transition:border-color .3s}
.signup__form input::placeholder{color:var(--body-soft)}
.signup__form input:focus{outline:none;border-color:var(--sage-deep)}
.signup__note{margin-top:18px;font-size:13px;color:var(--body-soft);min-height:1.2em}
.signup__note.ok{color:var(--sage-deep);font-weight:600;font-family:"Albert Sans",sans-serif}

/* ---------- home: small about ---------- */
.intro{text-align:center;padding:clamp(64px,9vw,116px) 0}
.intro__inner{max-width:680px;margin:0 auto}
.intro__roles{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:22px}
.intro__roles span{color:var(--line);padding:0 4px}
.intro__text{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(1.3rem,2.7vw,2.05rem);line-height:1.35;color:var(--ink)}

/* ---------- portfolio: full-look grid (3 across, square, near-full-width) ---------- */
.looks-wrap{width:100%;padding:0 clamp(14px,2.5vw,38px)}
.looks{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(12px,1.6vw,22px);row-gap:clamp(44px,5.5vw,88px)}
/* All look-*.jpg are pre-cut to a matching 1200x1800, so every photo renders
   at an identical size with no band and no further cropping. contain (not
   cover) so a future off-ratio image letterboxes visibly instead of being
   silently cropped. */
.looks .look{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--cloud)}
.looks .look img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 1.1s var(--ease)}
.looks .look:hover img{transform:scale(1.04)}

/* ---------- hair bookings page ---------- */
.booking-info{max-width:600px;margin:0 auto;display:grid;gap:clamp(30px,4.5vw,48px);text-align:center}
.booking-step__num{font-family:"Albert Sans",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:12px}
.booking-step p{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--ink-2);line-height:1.55}
.booking-step a:not(.text-link){color:var(--ink);border-bottom:1px solid var(--sage-deep);transition:border-color .3s}
.booking-step a:not(.text-link):hover{border-color:var(--ink)}

/* ---------- sections / headings ---------- */
.section{padding:var(--space) 0}
.section--first{padding-top:calc(74px + clamp(48px,7vw,90px))}
.section--tint{background:var(--cloud)}
.section--dark{background:var(--night);color:#fff}
.section--dark .section__title,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .section__sub{color:#cfcfca}
.section__head{margin-bottom:clamp(38px,5vw,60px);max-width:62ch}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:16px}
.section--dark .eyebrow{color:var(--sage)}
.section__title{font-size:clamp(2.2rem,5.2vw,4rem);font-weight:600}
.section__sub{margin-top:16px;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--body)}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- portfolio tiles ---------- */
.tile{position:relative;display:block;overflow:hidden;background:var(--cloud)}
.tile img,.tile .ph{width:100%;height:100%;object-fit:cover}
.tile__media{aspect-ratio:4/5;overflow:hidden}
.tile__media img{transition:transform 1s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.55),transparent 55%);opacity:.5;transition:opacity .5s var(--ease)}
.tile:hover::after{opacity:.8}
.tile:hover .tile__media img{transform:scale(1.05)}
.tile__label{position:absolute;left:22px;bottom:20px;z-index:2;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff}

/* simple image grid (portfolio detail) */
.shots{columns:3;column-gap:clamp(14px,1.6vw,20px)}
.shots figure{margin:0 0 clamp(14px,1.6vw,20px);break-inside:avoid;overflow:hidden;background:var(--cloud)}
.shots img{width:100%;height:auto;transition:transform 1s var(--ease)}
.shots figure:hover img{transform:scale(1.04)}

/* ---------- services menu ---------- */
.services__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px)}
/* Category label as a chip that hugs its text, so it reads as a heading for
   the group below rather than another service row. The old full-width
   underline mimicked the row separators and blended in. */
.menu__group{display:inline-block;font-family:"Albert Sans",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);background:var(--sage-tint);padding:9px 16px;border-radius:2px;margin-bottom:18px}
/* editorial cards for the service pillars / coming-soon list */
.pillar{border-top:1px solid var(--line);padding-top:22px}
.pillar h3{font-family:"Playfair Display",serif;font-weight:600;font-size:1.4rem;color:var(--ink);margin-bottom:10px}
.pillar p{color:var(--body);font-size:1rem}
.menu__list{list-style:none}
.menu__list li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.menu__list li>span{font-family:"Playfair Display",serif;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;color:var(--ink)}
.menu__list .price{font-style:normal;font-family:"Albert Sans",sans-serif;font-weight:500;font-size:.95rem;color:var(--body-soft);margin-left:10px;letter-spacing:.02em}
.menu__list li>a{flex:none;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:9px 18px;border:1px solid var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
.menu__list li>a:hover{background:var(--ink);color:#fff}

/* ---------- before / after ---------- */
.ba{position:relative;width:100%;max-width:880px;margin:0 auto;aspect-ratio:4/3;overflow:hidden;user-select:none;background:var(--cloud)}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover;display:block}
.ba__before{clip-path:inset(0 50% 0 0);z-index:2}
.ba__after{z-index:1}
.ba__divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;pointer-events:none;transform:translateX(-1px)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 6px 20px -6px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.ba__grip::before{content:"‹ ›";font-family:"Albert Sans",sans-serif;font-weight:700;color:var(--ink);font-size:14px;letter-spacing:1px}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba__tag{position:absolute;top:16px;z-index:3;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(11,11,11,.5);padding:6px 12px}
.ba__tag--before{left:16px}
.ba__tag--after{right:16px}
.transform__cta{text-align:center;margin-top:clamp(34px,4vw,52px)}

/* ---------- about ---------- */
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.about__photo{aspect-ratio:2/3;overflow:hidden;background:var(--cloud)}
.about__photo img{width:100%;height:100%;object-fit:contain}
.about__text h2{margin-bottom:18px}
.about__text p{margin-bottom:18px;max-width:48ch}
.about__text .btn{margin-top:10px}

/* ---------- reviews ---------- */
.quote{border:1px solid var(--line);padding:30px 30px 34px;background:#fff;display:flex;flex-direction:column;gap:14px}
.quote__stars{color:var(--sage-deep);letter-spacing:3px;font-size:14px}
.quote p{color:var(--ink-2);font-size:1.04rem;line-height:1.6}
.quote footer{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:14px;color:var(--ink);margin-top:auto}
.quote footer span{display:block;font-weight:400;font-size:13px;color:var(--body-soft);margin-top:3px}
/* reviews wall (masonry) */
.reviews-wall{columns:3;column-gap:clamp(16px,1.8vw,24px)}
.reviews-wall .quote{break-inside:avoid;margin-bottom:clamp(16px,1.8vw,24px)}
.reviews-toggle{text-align:center;margin-top:36px}
/* rating badge (replaces the numeric average) */
.rating-badge{display:inline-flex;align-items:center;gap:12px;margin-top:16px}
.rating-badge__stars{color:var(--sage-deep);letter-spacing:4px;font-size:17px;white-space:nowrap}
.rating-badge__count{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* all-reviews pop-up: scrolls inside itself, so closing returns you in place */
.reviews-modal{position:fixed;inset:0;z-index:200;display:none}
.reviews-modal.is-open{display:block}
.reviews-modal__scrim{position:absolute;inset:0;background:rgba(11,11,11,.62)}
.reviews-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:min(94vw,960px);max-height:88vh;background:#fff;box-shadow:0 40px 90px -24px rgba(0,0,0,.55)}
.reviews-modal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3vw,32px);border-bottom:1px solid var(--line);flex:none}
.reviews-modal__head .rating-badge{margin:0}
.reviews-modal__close{width:44px;height:44px;flex:none;border:0;background:none;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
.reviews-modal__body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:clamp(20px,3vw,34px)}
.reviews-wall--modal{columns:2}
body.modal-open{overflow:hidden}

/* ---------- contact form ---------- */
.contact-form{max-width:720px;margin:0 auto;display:grid;gap:20px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .field{display:flex;flex-direction:column;gap:9px;text-align:left}
.contact-form label{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--body-soft)}
.contact-form input,.contact-form textarea{border:1px solid var(--line);background:#fff;padding:14px 16px;font-family:"Onest",sans-serif;font-size:15px;color:var(--ink);transition:border-color .3s var(--ease);border-radius:0}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--sage-deep)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form .btn{justify-self:start}
.contact-note{min-height:1.2em;font-size:14px;color:var(--body-soft)}
.contact-note.ok{color:var(--sage-deep);font-weight:600;font-family:"Albert Sans",sans-serif}
@media(max-width:560px){.cf-row{grid-template-columns:1fr}.contact-form .btn{width:100%}}

/* ---------- footer ---------- */
.footer{background:var(--night);color:#fff;padding:clamp(56px,7vw,90px) 0 36px}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand .nav__logo--light{color:#fff;font-size:27px;display:inline-block;margin-bottom:14px}
.footer__brand p{color:#bdbdb6;max-width:30ch;margin-bottom:16px}
/* inline-block + padding so the tap area is ~33px tall, not 15px - the old
   target was too small to hit reliably on a phone. */
.footer__ig{display:inline-block;padding:10px 2px;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);transition:color .3s}
.footer__ig:hover{color:#fff}
.footer__col h4{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer__col p,.footer__col a{color:#a7a7a1;font-size:15px;line-height:1.7}
.footer__col a:hover{color:#fff}
.footer__col .btn{margin-top:16px;border-color:#fff;color:#fff}
.footer__col .btn:hover{background:#fff;color:var(--ink)}
.footer__legal{text-align:center;color:#85857f;font-size:13px;padding-top:26px}

/* ---------- reveal ---------- */
/* Scoped to .js (set by an inline head script) so that if app.js is blocked
   or fails, .reveal content is never hidden with nothing left to reveal it. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* Anything already on screen when the page loads is shown outright, with no
   transition. Fading it in left a freshly opened page looking blank for a
   beat, which read as a flicker on arrival. Only below-fold content animates. */
.js .reveal--now{opacity:1;transform:none;transition:none}

/* ---------- responsive ---------- */
/* Looping hero film on every mobile device — the gate is the DEVICE (touch-
   first: no hover + coarse pointer), not viewport width, so landscape phones
   and tablets keep the film; max-width covers narrow windows as a fallback.
   Must match the media list on the preload link and the video-writing script
   in index.html. The source is cut so its last frame is the same moment as
   its first, so `loop` repeats with no visible jump. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .hero__video{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;z-index:0;pointer-events:none}
  /* Behind the film, show the film's OWN first frame rather than the desktop
     still. The still used to paint at ~300ms and sit there until playback
     began near 1s, which read as a flash of the old image on every visit.
     Same source frame and same cover framing, so the handover is invisible.
     It is also the fallback when the video can't start (no JS, data saver). */
  /* ?v must stay in lockstep with the preload link and poster attribute in
     index.html - same URL means the browser fetches the file exactly once. */
  .hero{background-image:url("IMAGES%20GO%20HERE/hero-poster.jpg?v=7")}
}
@media(max-width:900px){
  .nav__toggle{display:flex}
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
    background:#0b0b0b;padding:0 40px;transform:translateX(100%);transition:transform .45s var(--ease)}
  .nav__links.is-open{transform:none}
  /* 12px block padding takes each row to ~46px tall for a reliable tap; the
     gap drops from 26 to 4 so the visual rhythm stays the same as before. */
  .nav__links a:not(.btn){color:#fff;font-size:16px;padding:12px 0}
  .nav__links .btn{border-color:#fff;color:#fff;margin-top:8px}
  /* A backdrop-filter makes .nav the containing block for its fixed-position
     children, which collapses the slide-out panel to the 74px header. Drop it
     on mobile so the panel measures against the viewport instead. */
  .nav--solid,.nav--scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Keep the panel light-on-dark on sub-pages: .nav--solid/.nav--scrolled
     colour rules outrank the plain .nav__links ones. */
  .nav--solid .nav__links a:not(.btn),
  .nav--scrolled .nav__links a:not(.btn){color:#fff}
  .nav--solid .nav__links .btn,
  .nav--scrolled .nav__links .btn{border-color:#fff;color:#fff}
  .nav--solid .nav__toggle.is-open span,
  .nav--scrolled .nav__toggle.is-open span{background:#fff}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .services__cols{grid-template-columns:1fr;gap:42px}
  .about__inner{grid-template-columns:1fr;gap:34px}
  .reviews-wall{columns:2}
  .shots{columns:2}
  .looks{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:560px){
  .grid--4{grid-template-columns:1fr}
  .reviews-wall{columns:1}
  /* phones: show 4 featured reviews before "See all"; the pop-up (--modal)
     still lists every review. */
  .reviews-wall:not(.reviews-wall--modal) .quote:nth-child(n+5){display:none}
  .shots{columns:1}
  .looks{grid-template-columns:1fr}
  /* Once the footer stacks to one column, centre every block. The brand
     paragraph keeps its 30ch measure, so it needs auto margins to sit
     centred rather than hugging the left edge. */
  .footer__inner{grid-template-columns:1fr;text-align:center}
  .footer__brand p{margin-left:auto;margin-right:auto}
  .signup__form input{min-width:0;width:100%}
  .signup__form .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  /* The hero film intentionally stays on here: the owner wants the backdrop
     playing on every mobile device, and it is muted, decorative, and sits
     behind a darkening overlay. Hiding it for Reduce Motion users was being
     reported as "the video is frozen". */
  /* must match .js .reveal specificity to still win here */
  .js .reveal{opacity:1;transform:none}
}