/* ============================================================
   HASNAIN RAZA — Editorial Studio meets Sketchbook
   Shared design system across all pages
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300;400;500;600;700;800;900&family=Caveat:wght@500;600;700&display=swap');

:root{
  --cream:#F0E9DD;
  --cream-deep:#E7DCC9;
  --ink:#241F1A;
  --ink-soft:#4a4036;
  --terra:#B5623C;
  --olive:#6B6B47;
  --brown:#7A5C43;
  --sand:#C2AC8A;
  --paper-shadow: 0 30px 60px -25px rgba(36,31,26,.28);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --hand:"Caveat", cursive;
  --maxw:1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
::selection{background:var(--terra);color:#fff;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* paper grain — extremely subtle */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* doodle background — pre-baked 8% opacity PNG, tiles across the whole page */
body{
  background-color:var(--cream);
  background-image:url("/manus-storage/doodle-bg-8pct_a66d7986.webp");
  background-size:480px auto;
  background-repeat:repeat;
  background-attachment:scroll;
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(32px,5vw,80px);}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--terra);
}
.measure{max-width:62ch;}

/* ---------- display type ---------- */
.display{
  font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:-.02em;
  font-optical-sizing:auto;text-wrap:balance;
}
h1.display{font-size:clamp(48px,9vw,148px);}
h2.display{font-size:clamp(38px,6.5vw,92px);font-weight:550;}
h3.display{font-size:clamp(26px,3.4vw,46px);font-weight:550;}
.italic{font-style:italic;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;border:none;
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.01em;
  padding:16px 26px;border-radius:999px;transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  position:relative;
}
.btn-mag{background:var(--terra);color:#fff;box-shadow:0 14px 30px -12px rgba(181,98,60,.5);}
.btn-mag:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(181,98,60,.55);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-3px);}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}

/* magenta text link */
.tlink{
  color:var(--terra);font-weight:600;position:relative;display:inline-flex;gap:.4em;align-items:center;
}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--terra);
  transform:scaleX(.0);transform-origin:left;transition:transform .35s var(--ease);}
.tlink:hover::after{transform:scaleX(1);}
.tlink .arrow{transition:transform .3s var(--ease);}
.tlink:hover .arrow{transform:translateX(4px);}

/* ============================================================
   STICKY HEADER — color-flip logo, magenta active underline
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(32px,5vw,80px);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-head.scrolled{
  background:rgba(240,233,221,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(36,31,26,.07), 0 12px 30px -22px rgba(36,31,26,.4);
  padding-top:12px;padding-bottom:12px;
}
.brand{position:relative;height:34px;display:flex;align-items:center;}
.brand img{height:34px;width:auto;transition:opacity .4s var(--ease);}
.brand .lg-white{position:absolute;left:0;top:0;}
/* over hero: show white; scrolled: show ink */
.brand .lg-ink{opacity:0;}
.brand .lg-white{opacity:1;}
.site-head.scrolled .brand .lg-ink{opacity:1;}
.site-head.scrolled .brand .lg-white{opacity:0;}
/* light-top pages (no dark hero): ink logo + nav from the start */
.site-head.on-light .brand .lg-ink{opacity:1;}
.site-head.on-light .brand .lg-white{opacity:0;}

.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);}
.nav a{
  font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;position:relative;padding:6px 2px;transition:color .4s var(--ease), opacity .3s;
  opacity:.92;
}
.site-head.scrolled .nav a{color:var(--ink);}
.site-head.on-light .nav a{color:var(--ink);}
.nav a:hover{opacity:1;}
.nav a.active{opacity:1;}
.nav a.active .ul{position:absolute;left:-4px;right:-4px;bottom:-6px;height:9px;overflow:visible;}
.nav-cta{margin-left:6px;}
.hamb{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.hamb span{width:24px;height:2px;background:#fff;display:block;transition:background .4s,transform .3s,opacity .3s;}
.site-head.scrolled .hamb span{background:var(--ink);}
.site-head.on-light .hamb span{background:var(--ink);}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:49;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 32px;
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:var(--serif);font-size:clamp(34px,11vw,64px);font-weight:550;padding:8px 0;}
.mobile-menu a.active{color:var(--terra);}

/* ============================================================
   DOODLE LAYER
   ============================================================ */
.doodle{position:absolute;pointer-events:none;overflow:visible;z-index:5;}
.doodle path,.doodle line,.doodle circle,.doodle polyline{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.note-hand{font-family:var(--hand);font-weight:600;line-height:1;color:var(--terra);
  position:absolute;z-index:6;pointer-events:none;}
.note-denim{color:var(--brown);}

/* draw-on animation */
.draw path,.draw line,.draw polyline{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.1s var(--ease);
}
.draw.inview path,.draw.inview line,.draw.inview polyline{stroke-dashoffset:0;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.inview{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ============================================================
   GLOBAL FOOTER
   ============================================================ */
.site-foot{position:relative;background:var(--ink);color:var(--cream);padding:clamp(60px,8vw,100px) 0 0;overflow:hidden;}
.foot-inner{position:relative;z-index:2;}
/* ambient layers */
.foot-aurora{position:absolute;left:50%;top:48%;width:84vw;height:62vh;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, color-mix(in oklab,var(--terra) 24%,transparent) 0%, color-mix(in oklab,var(--olive) 14%,transparent) 42%, transparent 70%);
  filter:blur(72px);opacity:.7;animation:footBreathe 9s ease-in-out infinite alternate;}
@keyframes footBreathe{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(1.12);opacity:.82}}
.foot-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:62px 62px;
  background-image:linear-gradient(to right, rgba(240,233,221,.045) 1px,transparent 1px),linear-gradient(to bottom, rgba(240,233,221,.045) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 74%,transparent);}
/* diagonal marquee */
.foot-marq{position:relative;z-index:2;overflow:hidden;border-top:1px solid rgba(240,233,221,.14);border-bottom:1px solid rgba(240,233,221,.14);
  background:rgba(0,0,0,.2);padding:14px 0;transform:rotate(-1.6deg) scale(1.05);margin:0 0 clamp(40px,6vw,76px);}
.foot-marq-row{display:flex;width:max-content;animation:bmScroll 30s linear infinite;font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,2.2vw,30px);color:rgba(247,243,236,.6);}
.foot-marq-row span{white-space:nowrap;padding:0 .35em;} .foot-marq-row i{color:var(--terra);font-style:normal;padding:0 .1em;}

/* meta row */
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:clamp(40px,6vw,72px);border-bottom:1px solid rgba(240,233,221,.16);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,243,236,.62);}
.foot-status{display:inline-flex;align-items:center;gap:10px;}
.sdot{width:8px;height:8px;border-radius:999px;background:var(--terra);box-shadow:0 0 0 0 rgba(181,98,60,.6);animation:sdotPulse 2.4s var(--ease) infinite;}
@keyframes sdotPulse{0%{box-shadow:0 0 0 0 rgba(181,98,60,.55)}70%{box-shadow:0 0 0 9px rgba(181,98,60,0)}100%{box-shadow:0 0 0 0 rgba(181,98,60,0)}}
.foot-clock{font-variant-numeric:tabular-nums;}

/* heading + pills */
.foot-heading{font-family:var(--serif);font-weight:600;line-height:.96;letter-spacing:-.02em;text-align:center;
  font-size:clamp(40px,8vw,116px);text-wrap:balance;margin:0 auto clamp(34px,5vw,54px);max-width:13ch;
  background:linear-gradient(180deg,var(--cream) 0%, color-mix(in oklab,var(--cream) 42%, transparent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(247,243,236,.12));}
.foot-heading .em{font-style:italic;color:var(--terra);-webkit-text-fill-color:var(--terra);}
.foot-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;position:relative;z-index:2;}
.foot-pills.sub{margin-top:16px;}
.pill{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--cream);padding:14px 24px;
  background:linear-gradient(145deg, rgba(247,243,236,.07), rgba(247,243,236,.02));
  border:1px solid rgba(247,243,236,.12);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 1px rgba(247,243,236,.08);
  transition:background .4s,border-color .4s,box-shadow .4s,color .4s,filter .4s;}
.pill:hover{background:linear-gradient(145deg, rgba(247,243,236,.13), rgba(247,243,236,.04));border-color:rgba(247,243,236,.26);}
.pill svg{width:18px;height:18px;flex:none;}
.pill-lg{padding:17px 30px;font-size:15.5px;}
.pill-wa:hover{border-color:#25D366;}
.pill-cta{background:var(--terra);border-color:var(--terra);color:#fff;box-shadow:0 14px 34px -12px rgba(181,98,60,.6);}
.pill-cta:hover{filter:brightness(1.07);border-color:var(--terra);}

/* GIANT MASTHEAD */
.foot-masthead{position:relative;z-index:1;margin-top:clamp(50px,7vw,90px);overflow:hidden;line-height:.74;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.85));mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.85));}
.foot-masthead .mh{display:block;text-align:center;white-space:nowrap;font-family:var(--serif);font-weight:600;
  font-size:clamp(46px,15vw,240px);letter-spacing:-.035em;color:rgba(247,243,236,.1);
  transform:translateY(14%);transition:transform 1.2s var(--ease),color 1.2s var(--ease);will-change:transform;}
.foot-masthead.inview .mh{transform:translateY(8%);color:rgba(247,243,236,.14);}

/* base */
.foot-base{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:22px 0 30px;font-size:12.5px;opacity:.6;letter-spacing:.04em;}
.foot-top{background:none;border:none;color:inherit;font:inherit;cursor:pointer;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;opacity:.8;transition:color .3s,opacity .3s;}
.foot-top:hover{color:var(--terra);opacity:1;}

@media(max-width:720px){
  .foot-masthead .mh{font-size:clamp(48px,16vw,120px);}
  .foot-meta{justify-content:center;text-align:center;}
}

/* ============================================================
   GLOBAL MOBILE OPTIMISATION  —  comprehensive rewrite
   ============================================================ */

/* 1. SAFE AREA + OVERFLOW GUARD — must be first */
html,body{
  overflow-x:hidden;
  max-width:100vw;
}

/* 2. WRAP — consistent 24px safe margin on all small screens */
@media(max-width:820px){
  .wrap{padding:0 24px;}
  body{font-size:16px;}
}

/* 3. HEADER — fix hamburger going off-screen */
@media(max-width:820px){
  .site-head{
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    box-sizing:border-box;
  }
  .site-head.scrolled{padding-top:10px;padding-bottom:10px;}
  /* brand must not shrink and push hamb off screen */
  .brand{flex-shrink:0;}
  /* nav container: only show hamb, right-aligned */
  .nav{
    flex-shrink:0;
    gap:0;
    display:flex;
    align-items:center;
  }
  .nav .nav-link{display:none;}
  .nav-cta{display:none;}
  .hamb{display:flex;padding:8px;margin-left:4px;}
}

/* 4. MOBILE MENU OVERLAY */
@media(max-width:820px){
  .mobile-menu{
    padding:90px 28px 40px;
    gap:0;
    justify-content:flex-start;
    align-items:flex-start;
    overflow-y:auto;
  }
  .mobile-menu a{
    font-size:clamp(32px,10vw,56px);
    padding:12px 0;
    border-bottom:1px solid rgba(36,31,26,.1);
    width:100%;
    display:block;
  }
  .mobile-menu a:last-child{border-bottom:none;}
}

/* 5. FOOTER */
@media(max-width:560px){
  .foot-pills{flex-direction:column;align-items:stretch;gap:10px;}
  .foot-pills .pill-lg{justify-content:center;}
  .foot-pills.sub{flex-direction:row;justify-content:center;flex-wrap:wrap;}
  .foot-heading{font-size:clamp(32px,10vw,64px);}
  .foot-base{flex-direction:column;text-align:center;gap:8px;}
  .foot-bigmail{font-size:clamp(28px,9vw,52px);word-break:break-all;}
}

/* 6. FOOTER TOOL CAROUSEL */
@media(max-width:560px){
  .tool-tile{width:84px;}
  .tt-circle{width:48px;height:48px;}
  .tt-img{width:26px;height:26px;}
  .tt-name{font-size:10.5px;}
}

/* 7. REVEAL ANIMATION — smaller distance on mobile */
@media(max-width:820px){
  .reveal{transform:translateY(14px);}
}

/* 8. OVERFLOW GUARD for marquees and full-bleed sections */
@media(max-width:820px){
  .brand-marquee,.foot-marq,.brand-marq{overflow:hidden;}
  /* any section that uses negative margins for full-bleed must not overflow */
  section,article,.hero,.hero-sticky{max-width:100vw;}
}

/* 9. DISPLAY TYPE — clamp tighter on very small screens */
@media(max-width:480px){
  h1.display{font-size:clamp(36px,11vw,80px);}
  h2.display{font-size:clamp(28px,9vw,56px);}
  h3.display{font-size:clamp(22px,7vw,38px);}
}

/* footer tool carousel — two rows, opposite scroll, hover-pause */
.foot-tools{position:relative;z-index:2;margin:clamp(46px,7vw,80px) 0 clamp(10px,2vw,20px);}
.ft-label{text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin:0 0 22px;}
.tool-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.tool-row + .tool-row{margin-top:14px;}
.tool-track{display:flex;gap:14px;width:max-content;align-items:flex-start;}
.tool-track[data-dir="l"]{animation:toolScroll 50s linear infinite;}
.tool-track[data-dir="r"]{animation:toolScroll 60s linear infinite reverse;}
.tool-row:hover .tool-track{animation-play-state:paused;}
@keyframes toolScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* shared tool tile: white logo circle + name beneath (with monogram fallback) */
.tool-tile{flex:none;display:flex;flex-direction:column;align-items:center;gap:11px;width:120px;}
.tt-circle{position:relative;width:62px;height:62px;border-radius:999px;background:#fff;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s;}
.tool-tile:hover .tt-circle{transform:translateY(-4px) scale(1.07);box-shadow:0 20px 38px -14px rgba(181,98,60,.5);}
.tt-img{position:relative;z-index:1;width:34px;height:34px;object-fit:contain;}
.tt-mono{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:18px;color:var(--brown);}
.tt-circle.has .tt-mono{display:none;}
/* all tool logos are cream-tinted SVGs — same 34px size for all */
/* name: fixed two-line block so every tile keeps the same rhythm and names never collide */
.tt-name{font-size:12px;font-weight:500;color:rgba(247,243,236,.82);line-height:1.22;letter-spacing:.01em;text-align:center;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  width:100%;min-height:2.44em;word-break:break-word;}
/* FOOTER ONLY: warm gold medallion (brown glow + gold ring), tinted cream logos */
.foot-tools .tt-circle{background:radial-gradient(circle at 50% 36%, rgba(201,162,110,.30), rgba(120,70,38,.20) 62%, rgba(70,42,24,.10) 100%);
  border:1px solid rgba(201,162,110,.6);
  box-shadow:0 12px 30px -14px rgba(80,48,24,.7), inset 0 0 16px rgba(201,162,110,.22), 0 0 0 5px rgba(181,98,60,.07);}
.foot-tools .tool-tile:hover .tt-circle{box-shadow:0 20px 40px -14px rgba(181,98,60,.6), inset 0 0 18px rgba(201,162,110,.3), 0 0 0 6px rgba(181,98,60,.12);}
.foot-tools .tt-mono{color:#E9D8BE;}

/* ============================================================
   REUSABLE ANIMATED MARQUEE BAND
   ============================================================ */
.brand-marquee{overflow:hidden;padding:clamp(20px,2.6vw,34px) 0;background:var(--cream-deep);
  border-top:1px solid rgba(36,31,26,.14);border-bottom:1px solid rgba(36,31,26,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.brand-marquee.on-ink{background:var(--ink);border-color:rgba(240,233,221,.14);}
.bm-row{display:flex;align-items:center;width:max-content;animation:bmScroll 34s linear infinite;}
.brand-marquee:hover .bm-row{animation-play-state:paused;}
@keyframes bmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bm-row span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,4.2vw,60px);
  white-space:nowrap;padding:0 .3em;color:var(--ink);line-height:1.1;}
.brand-marquee.on-ink .bm-row span{color:var(--cream);}
.bm-row i{color:var(--terra);font-style:normal;font-size:clamp(14px,1.8vw,24px);padding:0 .15em;}

/* ============================================================
   PAGE TRANSITION LOADER
   A lightweight curtain + progress bar that fires on every
   internal navigation click and clears on pageshow/load.
   Uses the site palette — no extra dependencies.
   ============================================================ */

/* ---- progress bar (top edge) ---- */
#hr-progress{
  position:fixed;top:0;left:0;z-index:9999;
  height:3px;width:0%;
  background:linear-gradient(90deg, var(--terra), var(--sand));
  border-radius:0 3px 3px 0;
  transition:width .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
  pointer-events:none;
  opacity:0;
}
#hr-progress.loading{opacity:1;}

/* ---- full-page curtain (slides up from bottom) ---- */
#hr-curtain{
  position:fixed;inset:0;z-index:9998;
  background:var(--cream);
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.77,0,.18,1), opacity .22s ease;
  pointer-events:none;
  opacity:0;
  display:flex;align-items:center;justify-content:center;
}
#hr-curtain.entering{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
/* animated "HR" monogram inside the curtain */
#hr-curtain .loader-mark{
  font-family:var(--serif);font-weight:600;font-size:clamp(32px,8vw,56px);
  color:var(--terra);letter-spacing:-.02em;
  opacity:0;transform:scale(.92);
  transition:opacity .28s .12s ease, transform .28s .12s cubic-bezier(.22,.61,.36,1);
}
#hr-curtain.entering .loader-mark{
  opacity:1;transform:scale(1);
}

/* ---- respect reduced-motion ---- */
@media(prefers-reduced-motion:reduce){
  #hr-progress,#hr-curtain{transition:none;}
}