/* ==========================================================================
   Blanc Health — go.blanc.health landing page
   Stylesheet. Loaded from index.html with an explicit ?v= cache-busting
   query string; bump that query string whenever this file changes.
   ========================================================================== */

:root{
  --bg:#EFE8E1; --bg2:#F6F3EF; --bg3:#E4D9CB;
  --sand:#d2c6b6; --sand2:#c4b8a8;
  --ink:#504C4B; --ink2:#6d625a; --ink3:#3c3938;
  --white:#ffffff;
  --line:rgba(80,76,75,.16); --line2:rgba(80,76,75,.28);
  --rose:#a9835f; --rose-soft:rgba(169,131,95,.14);
  --alert:#a8412f; --alert-soft:rgba(168,65,47,.10);
  --serif:Georgia,'Iowan Old Style','Times New Roman',Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:140px;
  --container:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
@media (min-width:768px){ .container{padding:0 48px;} }
@media (min-width:1024px){ .container{padding:0 80px;} }
.container--narrow{max-width:760px;}

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rose);
  display:flex; align-items:center; gap:10px; margin:0 0 var(--sp-2);
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--rose); flex:0 0 22px;}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; color:var(--ink3);}
em{font-style:italic;}
.section{padding:var(--sp-7) 0;}
@media (min-width:1024px){ .section{padding:var(--sp-8) 0;} }
.section--bone{background:var(--bg2);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 34px; border-radius:2px; font-family:var(--sans);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  white-space:nowrap; cursor:pointer; border:1px solid transparent;
  min-height:48px;
}
.btn--dark{ background:var(--ink3); color:var(--bg2); border-color:var(--ink3); }
.btn--dark:hover{ background:var(--rose); border-color:var(--rose); transform:translateY(-1px); }
.btn--outline{ background:transparent; color:var(--ink3); border-color:var(--line2); }
.btn--outline:hover{ border-color:var(--ink3); background:var(--ink3); color:var(--bg2); }
.btn--ghost-light{ background:transparent; color:var(--bg2); border-color:rgba(247,244,238,.55); }
.btn--ghost-light:hover{ background:var(--bg2); color:var(--ink3); }
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-block{width:100%;}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--rose); outline-offset:3px;
}

[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity 760ms var(--ease), transform 760ms var(--ease);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ [data-reveal]{transition:none; opacity:1; transform:none;} }

/* ============ NAV ============ */
/* Starts transparent over the hero photo, so logo/links/burger use the light (cream)
   treatment for legibility over the image, then flip dark once .is-scrolled gives the nav a
   solid cream backing. Two logo files are stacked and cross-faded rather than recolored live,
   since a CSS filter can't reliably hit an exact brand hex from white. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; background:rgba(239,232,225,0);
  transition:background var(--ease), padding var(--ease), box-shadow var(--ease);
}
.nav.is-scrolled{ background:rgba(239,232,225,.92); backdrop-filter:blur(10px); padding:14px 24px; box-shadow:0 1px 0 var(--line); }
@media (min-width:1024px){ .nav{padding:26px 80px;} .nav.is-scrolled{padding:16px 80px;} }
/* The wordmark is 26px tall; the link box is padded out to a 44px thumb target
   without moving the mark itself (negative margin absorbs the extra height). */
.nav__logo{display:flex; align-items:center; position:relative; min-height:44px; margin:-9px 0; padding-right:8px;}
.nav__logo img{height:26px; width:auto; display:block;}
.nav__logo-img--dark{position:absolute; top:50%; left:0; transform:translateY(-50%); opacity:0; transition:opacity 320ms var(--ease);}
.nav__logo-img--light{transition:opacity 320ms var(--ease);}
.nav.is-scrolled .nav__logo-img--light{opacity:0;}
.nav.is-scrolled .nav__logo-img--dark{opacity:1;}
.nav__links{display:none; align-items:center; gap:var(--sp-4); font-size:13px; letter-spacing:.03em; color:var(--bg2); transition:color var(--ease);}
.nav.is-scrolled .nav__links{color:var(--ink3);}
.nav__links a{padding:6px 0; border-bottom:1px solid transparent; transition:border-color var(--ease), opacity var(--ease);}
.nav__links a:hover{border-color:var(--rose);}
@media (min-width:900px){ .nav__links{display:flex;} }
.nav__right{display:flex; align-items:center; gap:var(--sp-3);}
.nav__cta{padding:11px 22px; font-size:11px; min-height:44px;}
.nav__burger{display:flex; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; background:none; border:0; cursor:pointer; padding:0;}
.nav__burger span{display:block; height:1px; background:var(--bg2); width:26px; transition:background var(--ease);}
.nav.is-scrolled .nav__burger span{background:var(--ink3);}
@media (min-width:900px){ .nav__burger{display:none;} }

.mobile-panel{
  position:fixed; inset:0; z-index:99; background:var(--bg2);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--sp-3);
  padding:0 32px; transform:translateY(-100%); transition:transform 420ms var(--ease);
}
.mobile-panel.is-open{transform:translateY(0);}
.mobile-panel a{font-family:var(--serif); font-size:30px; color:var(--ink3); min-height:48px; display:flex; align-items:center;}
.mobile-panel .btn{margin-top:var(--sp-3); font-family:var(--sans); font-size:12px;}
@media (min-width:900px){ .mobile-panel{display:none;} }

/* ============ HERO ============ */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink3);}
.hero__media{position:absolute; inset:0; z-index:0;}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform:scale(1.06); transition:transform 1400ms var(--ease);}
.hero.is-loaded .hero__media img{transform:scale(1);}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(37,33,30,.18) 0%, rgba(37,33,30,.22) 45%, rgba(30,26,23,.74) 100%); z-index:1;}
.hero__content{position:relative; z-index:2; width:100%; padding:calc(var(--sp-7) + 64px) 24px var(--sp-6);}
@media (min-width:1024px){ .hero__content{padding:0 80px var(--sp-8);} }
.hero__eyebrow{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,244,238,.82); margin-bottom:var(--sp-3); display:flex; align-items:center; gap:10px;}
.hero__eyebrow::before{content:""; width:22px; height:1px; background:var(--rose); flex:0 0 22px;}
.hero h1{color:var(--bg2); font-size:clamp(32px,6.4vw,64px); line-height:1.12; letter-spacing:-.01em; max-width:820px;}
.hero h1 em{color:var(--bg2);}
.hero__sub{font-family:var(--serif); font-style:italic; color:rgba(247,244,238,.88); font-size:clamp(15px,1.9vw,19px); margin-top:var(--sp-3); max-width:460px;}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5);}

/* ============ MARQUEE ============ */
/* The 4-phrase set is repeated 8x in the markup (32 spans), so the track is always well over
   2x the widest realistic viewport. Animating to exactly -12.5% (100% / 8 copies) shifts by
   precisely one copy-width, so the loop point is invisible and the right edge never empties. */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); overflow:hidden; padding:18px 0;}
.marquee__track{display:flex; width:max-content; animation:marquee 64s linear infinite; gap:56px;}
.marquee__track span{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink2); white-space:nowrap; display:flex; align-items:center; gap:56px;}
.marquee__track span::after{content:"—"; color:var(--rose);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-12.5%);} }
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none;} }

/* ============ THE PROGRAM (intro) ============ */
/* Bridges the hook (hero) to the offer. The mirror portrait sits in an organic blob
   mask (asymmetric border-radius, no SVG needed) with a faint oversized "Ritual" wordmark
   ghosted behind it. */
.program__grid{display:grid; grid-template-columns:1fr; gap:var(--sp-6); align-items:center;}
@media (min-width:900px){ .program__grid{grid-template-columns:1fr 1fr; gap:var(--sp-7);} }
.program__media{position:relative; display:flex; align-items:center; justify-content:center; min-height:280px;}
.program__ghost{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-style:italic; font-weight:700; color:var(--ink3);
  font-size:clamp(70px,16vw,170px); opacity:.07; white-space:nowrap; z-index:0;
  pointer-events:none; user-select:none;
}
.program__blob{
  position:relative; z-index:1; overflow:hidden; width:100%; max-width:400px; aspect-ratio:4/5; margin:0 auto;
  border-radius:52% 48% 58% 42% / 48% 44% 56% 52%;
  box-shadow:0 30px 60px -20px rgba(37,33,30,.25);
}
.program__blob img{width:100%; height:100%; object-fit:cover;}
.program__text{position:relative; z-index:1;}
.program__quote{
  font-family:var(--serif); font-style:italic; color:var(--ink3);
  font-size:clamp(24px,3.6vw,38px); line-height:1.28; margin:0 0 var(--sp-3); max-width:440px;
}
.program__body{font-size:15.5px; color:var(--ink2); line-height:1.75; max-width:440px; margin:0;}
.program__body + .program__body{margin-top:var(--sp-3);}

.sec-head{max-width:640px; margin-bottom:var(--sp-6);}
.sec-head--booking{margin-bottom:var(--sp-5);}
.sec-head h2{font-size:clamp(30px,4.6vw,50px); line-height:1.08;}
.sec-head p{font-size:16px; color:var(--ink2); margin-top:var(--sp-3); max-width:520px; line-height:1.65;}

/* ============ WHAT'S INCLUDED ============ */
/* Two typographic cards — no photography. The only images this page is allowed to show
   are the ones that genuinely depict Blanc (hero, mirror portrait, map); a stock facial
   would be a picture of a treatment nobody has verified. */
.include-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-3);}
@media (min-width:900px){ .include-grid{grid-template-columns:1fr 1fr; gap:var(--sp-4);} }
.include-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:var(--sp-4); display:flex; flex-direction:column;
  transition:border-color var(--ease), transform var(--ease);
}
@media (min-width:640px){ .include-card{padding:var(--sp-5);} }
.include-card:hover{border-color:var(--line2);}
.include-card__num{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose); margin:0 0 var(--sp-2);
}
.include-card h3{font-family:var(--serif); font-size:clamp(21px,2.8vw,27px); line-height:1.2; margin:0 0 var(--sp-2);}
.include-card p{margin:0; font-size:15px; line-height:1.72; color:var(--ink2);}
.include-card__meta{
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line);
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2);
}
/* margin-top:auto pins the meta strip to the card floor so the two cards align;
   it still needs breathing room when the copy above is short. */
.include-card p + .include-card__meta{margin-top:var(--sp-4);}

/* ============ HOW IT WORKS ============ */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--sp-4);}
@media (min-width:640px){ .steps{grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-4);} }
@media (min-width:1024px){ .steps{grid-template-columns:repeat(4,1fr);} }
.step{padding-top:var(--sp-3); border-top:1px solid var(--line2);}
.step__num{
  width:30px; height:30px; border-radius:2px; border:1px solid var(--line2); background:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:11px; font-weight:600; color:var(--ink3);
  margin-bottom:var(--sp-2);
}
.step h3{font-family:var(--serif); font-size:19px; line-height:1.25; margin:0 0 8px;}
.step p{margin:0; font-size:14.5px; line-height:1.68; color:var(--ink2);}

/* ============ PRICE & VALIDITY ============ */
/* Two options of ONE program, side by side. The four-session card is the only
   one with an online purchase path (its package is published in Blanc's
   webstore); the six-session package exists in Zenoti but is not sold online,
   so its card deliberately carries no deep link. */
.price-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-3);}
@media (min-width:900px){ .price-grid{grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:stretch;} }

.price-option{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:var(--sp-4); display:flex; flex-direction:column;
}
@media (min-width:640px){ .price-option{padding:var(--sp-5);} }
/* The purchasable option carries slightly more weight — a darker rule, not a
   colour change, so the pair still reads as one program with two lengths. */
.price-option--online{border-color:var(--line2);}

.price-option__label{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose); margin:0 0 var(--sp-2);
}
.price-option__amount{
  font-family:var(--serif); font-size:clamp(42px,8vw,64px); line-height:1;
  letter-spacing:-.02em; color:var(--ink3); margin:0;
}
.price-option__tax{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2); margin:var(--sp-2) 0 0;
}
.price-option .facts{grid-template-columns:1fr;}
@media (min-width:520px) and (max-width:899px){ .price-option .facts{grid-template-columns:repeat(2,1fr);} }
/* margin-top:auto floors the actions so both cards' buttons line up even when
   one has fewer facts than the other. */
.price-option__actions{margin-top:auto; padding-top:var(--sp-4);}
.price-option__actions .btn{width:100%;}
.price-option__aka{font-size:12px; line-height:1.55; color:var(--ink2); margin:var(--sp-2) 0 0;}

/* ============ LOCATION & MAP ============ */
.split{display:grid; grid-template-columns:1fr; gap:var(--sp-5); align-items:center;}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr; gap:var(--sp-7);} }
.location__title{font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
.location__body{color:var(--ink2); font-size:15.5px; line-height:1.7; max-width:460px;}
.location__actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4);}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line);}
.facts dt{font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-bottom:6px;}
.facts dd{margin:0; font-family:var(--serif); font-size:17px; color:var(--ink3);}
.facts__link{display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid var(--line2); transition:color var(--ease), border-color var(--ease);}
.facts__link:hover{color:var(--rose); border-color:var(--rose);}

/* .map-frame is the real sized box. A static screenshot of Blanc's own Google Business listing
   sits as the base layer (always visible — works offline and in print). The live Google Maps
   iframe of that same listing layers on top and fades in once it finishes loading, so the page
   is never waiting on the network to show a recognizable map. */
.map-frame{
  position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  background:var(--bg3); border:1px solid var(--line2);
}
.map-static, .map-embed{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;}
.map-embed{opacity:0; transition:opacity 500ms var(--ease);}
.map-frame.is-loaded .map-embed{opacity:1;}
@media print{ .map-embed{display:none !important;} }

/* ============ BOOKING (2-STEP) ============ */
.booking-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:var(--sp-4); max-width:640px; margin:0 auto;
}
@media (min-width:640px){ .booking-card{padding:var(--sp-5);} }
.booking-steps{display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2);}
.booking-steps__dot{width:22px; height:22px; border-radius:50%; border:1px solid var(--line2); display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:11px; color:var(--ink2); flex-shrink:0;}
.booking-steps__dot.is-active{background:var(--ink3); border-color:var(--ink3); color:var(--bg2);}
.booking-steps__line{flex:1; height:1px; background:var(--line2); max-width:60px;}
.booking-steps__label.is-current{color:var(--ink3); font-weight:600;}

.booking-step{display:none;}
.booking-step.is-active{display:block;}
.field{margin-bottom:var(--sp-3);}
.field label{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px;}
.field input, .field select{
  width:100%; border:0; border-bottom:1px solid var(--line2); background:transparent;
  padding:12px 2px; font-family:var(--sans); font-size:16px; color:var(--ink3);
  border-radius:0; -webkit-appearance:none; appearance:none;
  min-height:48px;
  transition:border-color var(--ease);
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%); background-position:calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px;}
.field input:focus, .field select:focus{outline:none; border-color:var(--rose);}
.field.has-error input, .field.has-error select{border-color:var(--alert);}
.field__error{display:none; font-size:12px; color:var(--alert); margin:6px 0 0; letter-spacing:0; text-transform:none;}
.field.has-error .field__error{display:block;}
.field-row{display:grid; grid-template-columns:1fr; gap:0 var(--sp-3);}
@media (min-width:520px){ .field-row{grid-template-columns:1fr 1fr;} }

/* Off-canvas decoy field: pulled out of the viewport rather than display:none, so automated
   fillers still populate it. aria-hidden + tabindex="-1" keep it away from humans entirely. */
.nope{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

.form-status{
  display:none; margin:0 0 var(--sp-2); font-size:13.5px; line-height:1.5;
  padding:12px 14px; border-radius:4px;
}
.form-status.is-error{display:block; color:var(--alert); background:var(--alert-soft); border:1px solid rgba(168,65,47,.3);}
.form-status.is-info{display:block; color:var(--ink2); background:var(--bg2); border:1px solid var(--line);}
.booking-submit{margin-top:var(--sp-2);}
.booking-submit.is-busy{opacity:.6; pointer-events:none;}
.form-consent{font-size:11.5px; line-height:1.55; color:var(--ink2); margin:var(--sp-2) 0 0; text-align:center;}

.booking-step2__intro{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink3); margin:0 0 var(--sp-4);}
.book-option{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3); border:1px solid var(--line); border-radius:4px; margin-bottom:var(--sp-2);
  transition:border-color var(--ease); flex-wrap:wrap;
}
.book-option:hover{border-color:var(--rose);}
.book-option__text h4{font-family:var(--serif); font-size:17px; font-weight:400; margin:0 0 4px;}
.book-option__text p{font-size:13px; color:var(--ink2); margin:0; max-width:320px;}
.book-option .btn{flex-shrink:0; padding:12px 20px; font-size:10.5px; min-height:44px;}
@media (max-width:479px){ .book-option .btn{width:100%;} }

.book-option__note{font-size:12px; line-height:1.5; color:var(--ink2); margin:6px 0 0;}
.book-option[hidden]{display:none;}
.booking-note{font-size:13px; color:var(--ink2); margin:var(--sp-4) 0 0;}
.booking-back{
  display:inline-flex; align-items:center; min-height:44px; margin-top:var(--sp-2);
  font-family:var(--sans); font-size:12.5px; color:var(--ink2);
  background:none; border:0; border-bottom:1px solid var(--line2); padding:0 0 2px; cursor:pointer;
  transition:color var(--ease), border-color var(--ease);
}
.booking-back:hover{color:var(--rose); border-color:var(--rose);}

/* ============ FOOTER ============ */
.footer{background:var(--sand); padding:var(--sp-6) 0 var(--sp-3);}
.footer__top{display:grid; grid-template-columns:1fr; gap:var(--sp-5);}
@media (min-width:768px){ .footer__top{grid-template-columns:1.3fr repeat(3,1fr);} }
.footer__brand{display:flex; flex-direction:column; gap:var(--sp-2);}
.footer__brand img{width:44px; height:auto;}
.footer__brand p{font-family:var(--serif); font-style:italic; color:var(--ink3); font-size:16px; line-height:1.5; margin:0; max-width:260px;}
.footer__col h4{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin:0 0 var(--sp-2); font-weight:600;}
.footer__col p{font-size:14px; color:var(--ink3); margin-bottom:8px; line-height:1.5;}
.footer__col a{display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--ink3); line-height:1.5; transition:color var(--ease);}
.footer__col a:hover{color:var(--rose);}
.footer__bottom{
  margin-top:var(--sp-6); padding-top:var(--sp-3); border-top:1px solid var(--line2);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2);
  font-size:12px; color:var(--ink2);
}
.footer__legal{max-width:640px; line-height:1.6; min-width:0; margin:0;}

@media print{
  .nav, .mobile-panel, .marquee{display:none !important;}
  .hero{min-height:auto;}
  *{transition:none !important; animation:none !important;}
  [data-reveal]{opacity:1 !important; transform:none !important;}
}