/* ODS My Haberdasher 1.2.8 - "Scroll-to-Sew" homepage hero (from mockups/sewing-scroll-v3, darker overlay).
   Loaded on the front page only. The stage + machine layers are printed by the plugin at wp_body_open;
   the cards are the existing homepage sections. Excluded from LiteSpeed minify/combine (relative image URLs). */
:root{
  --k:0.72;
  --cards-end:calc(clamp(20px,5vw,80px) + min(620px,48vw));
  --ml:max(calc(var(--cards-end) + 14px - 20px * var(--k)), calc(100% - 915px * var(--k) + 8px));
  --mb:64px;
  --nx:calc(var(--ml) + 177px * var(--k));
  --ny:calc(100% - var(--mb) - 106px * var(--k));
  --tile-w:440px;--tile-h:480px;
  --mh-head:90px;
}
html{background:#141416}
/* ===== Stage: fabric, chalk line and stitches (all move with the scroll) ===== */
.mh-stage,.mh-machine-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.mh-stage{z-index:0;contain:strict}
.mh-fabric{position:absolute;left:0;right:0;top:0;height:calc(100% + var(--tile-h));
  background:#2a2a2d url(fabric-herringbone.webp) 0 0/var(--tile-w) var(--tile-h) repeat;
  background-image:image-set(url(fabric-herringbone.avif) type("image/avif"),url(fabric-herringbone.webp) type("image/webp"));
  will-change:transform}
.mh-chalk{position:absolute;top:0;left:calc(var(--nx) - 7px);width:14px;height:calc(100% + 240px);opacity:.55;
  background:url(chalk.webp) 0 0/14px 240px repeat-y;will-change:transform}
.mh-stitch-clip{position:absolute;top:0;width:12px;overflow:hidden;left:calc(var(--nx) - 6px);height:var(--ny)}
.mh-stitch{position:absolute;left:0;top:0;width:12px;height:calc(100% + var(--mh-scroll-max,6000px));
  background:url(stitch.webp) 0 0/12px 30px repeat-y;will-change:transform}
.mh-light{position:absolute;inset:0;
  background:
    radial-gradient(circle at var(--nx) var(--ny), rgba(255,232,180,.16), rgba(255,236,170,0) min(30vw,360px)),
    radial-gradient(120% 90% at 70% 60%, transparent 40%, rgba(0,0,0,.55))}

/* Darkening overlay: fixed, sits over the moving fabric only (stage ::before is painted under chalk/stitch/light). Static gradient, no filter, so scroll stays compositor-only. */
.mh-fabric{z-index:0}
.mh-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 110% at 55% 50%, rgba(6,6,8,.52) 0%, rgba(6,6,8,.60) 55%, rgba(3,3,5,.74) 100%)}
.mh-chalk,.mh-stitch-clip,.mh-light{z-index:2}

/* ===== Machine head: layered photoreal parts + moving chrome parts ===== */
.mh-machine-layer{z-index:0}
.mh-machine{position:absolute;left:var(--ml);bottom:var(--mb);width:calc(915px * var(--k));height:calc(800px * var(--k));will-change:transform}
.mh-rig{position:absolute;left:0;top:0;width:915px;height:800px;zoom:var(--k)}
@supports not (zoom:1){.mh-rig{transform:scale(var(--k));transform-origin:0 0}}
.mh-rig img,.mh-rig picture{display:block}
.mh-rig .p{position:absolute;max-width:none}
.mh-shadow{left:10px;top:14px;width:904px;height:774px;opacity:.9}
.mh-foot{left:126px;top:573px;width:101px;height:181px;will-change:transform}
.mh-nbar{left:120px;top:543px;width:115px;height:89px;will-change:transform}
.mh-needle-clip{position:absolute;left:160px;top:600px;width:40px;height:94px;overflow:hidden}
.mh-needle{left:7px;top:7px;width:17px;height:88px;will-change:transform,opacity}
.mh-needle-ghost{left:7px;top:1px;width:18px;height:109px;opacity:0;will-change:opacity}
.mh-body{left:20px;top:23px;width:895px;height:553px}
.mh-spool{left:626px;top:98px;width:167px;height:204px}
.mh-strands{position:absolute;left:632px;top:160px;width:151px;height:132px;opacity:.55;
  -webkit-mask:url(spool-mask.webp) 0 0/100% 100% no-repeat;mask:url(spool-mask.webp) 0 0/100% 100% no-repeat}
.mh-strands i{position:absolute;left:0;top:0;width:211px;height:142px;background:url(strands.webp) 0 0/60px 142px repeat-x;will-change:transform}
.mh-lever-clip{position:absolute;left:0;top:150px;width:97px;height:200px;overflow:hidden}
.mh-lever{left:46px;top:88px;width:65px;height:32px;transform-origin:254px 14px;will-change:transform,opacity}
.mh-lever-ghost{left:48px;top:62px;width:64px;height:83px;opacity:0;will-change:opacity}
.mh-thr{position:absolute;left:0;top:0;width:100px;height:1.8px;margin-top:-.9px;border-radius:1px;transform-origin:0 50%;
  background:linear-gradient(#e2c47c,#9c7a34);box-shadow:0 .6px 1px rgba(0,0,0,.55);will-change:transform}
.mh-thr[data-seg="s1b"]{opacity:0}
/* static pose (generated by src/static-pose.js) */
.mh-thr[data-seg="s1f"]{transform:translate(765.75px,213.08px) rotate(-3.0181rad) translateY(0.00px) scaleX(5.7714)}
.mh-thr[data-seg="s1b"]{transform:translate(765.75px,213.08px) rotate(-3.0181rad) translateY(0.00px) scaleX(5.7714)}
.mh-thr[data-seg="s2"]{transform:translate(193.00px,142.00px) rotate(2.5696rad) translateY(0.00px) scaleX(1.7364)}
.mh-thr[data-seg="s3"]{transform:translate(47.00px,236.00px) rotate(0.8174rad) translateY(0.00px) scaleX(0.1902)}
.mh-thr[data-seg="s4"]{transform:translate(60.01px,249.87px) rotate(1.4941rad) translateY(0.00px) scaleX(1.8267)}
.mh-thr[data-seg="s5"]{transform:translate(74.00px,432.00px) rotate(1.1192rad) translateY(0.00px) scaleX(1.4893)}
.mh-thr[data-seg="s6"]{transform:translate(139.00px,566.00px) rotate(0.9485rad) translateY(0.00px) scaleX(0.5661)}
.mh-lever{transform:rotate(0.0089rad)}
.mh-thr[data-seg="s1b"]{opacity:0.000}
.mh-thr[data-seg="s1f"]{opacity:1.000}


/* ===== WordPress / Astra adapters (front page only) ===== */
html body.mh-sew,html body.mh-sew #page,html body.mh-sew .site-content,html body.mh-sew #content,html body.mh-sew #primary,html body.mh-sew .site-main,
html body.mh-sew .ast-container,html body.mh-sew article.page,html body.mh-sew .ast-article-single,html body.mh-sew .entry-content{background:transparent!important}
html body.mh-sew #masthead{z-index:20}
html body.mh-sew:not(.ast-theme-transparent-header) #masthead{position:relative}
html body.mh-sew .site-footer,html body.mh-sew .mh-legal-links{position:relative;z-index:1}
html body.mh-sew .ast-mobile-popup-drawer{z-index:100000}
html body.mh-sew.ast-main-header-nav-open .mh-machine-layer,html body.mh-sew.ast-popup-nav-open .mh-machine-layer{visibility:hidden}

/* Mobile (<768px, approved layout): single column of cards, head bottom-right */
@media (max-width:767px){
html body.mh-sew .entry-content{display:flex;flex-direction:column;gap:clamp(40px,14vh,140px);
  margin:0 0 0 clamp(20px,5vw,80px)!important;width:min(620px,48vw);max-width:none;
  padding:calc(var(--mh-head) + clamp(32px,8vh,80px)) 0 clamp(80px,30vh,320px)}
html body.mh-sew .entry-content>.wp-block-group{position:relative;z-index:1;margin:0!important;max-width:none!important;
  padding:clamp(28px,3.4vw,44px)!important;background:rgba(8,8,8,.84)!important;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
html body.mh-sew .entry-content>.wp-block-group::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(201,162,77,.38);border-radius:2px;pointer-events:none}
html body.mh-sew .entry-content>.wp-block-group .wrap{max-width:none;margin:0;padding:0}
html body.mh-sew .entry-content .hero-grid,html body.mh-sew .entry-content .split,html body.mh-sew .entry-content .cards-2,html body.mh-sew .entry-content .testimonials{grid-template-columns:1fr!important;gap:1.75rem}
html body.mh-sew .entry-content .hero h1{font-size:clamp(2.2rem,4.2vw,3.6rem)}
html body.mh-sew .entry-content .hero-media img{width:100%;max-height:460px;object-fit:cover;object-position:50% 18%}
html body.mh-sew .entry-content .card,html body.mh-sew .entry-content .testimonial{background:rgba(26,26,26,.92)}
html body.mh-sew .entry-content .t-img{aspect-ratio:2/1}
html body.mh-sew .entry-content .testimonials{margin-top:1.25rem}
html body.mh-sew .entry-content>.cta-band{background:rgba(201,162,77,.97)!important;text-align:center}
html body.mh-sew .entry-content>.cta-band::before{border-color:rgba(0,0,0,.35)}
}

/* ===== 1.2.4 Tablet + desktop (>=768px): centred container, real grid; the machine is a dimmed background ===== */
@media (min-width:768px){
  :root{--wrap-max:1240px;--gutter:clamp(20px,4vw,56px);--sec-gap:clamp(48px,6vw,96px);--panel-pad:clamp(28px,3.6vw,60px);
    --k:0.62;--mb:24px;
    /* 1.2.5 (Xander: "stitching just to the right of the content, like how it is for mobile"):
       the needle tracks the right edge of the content column + 24px. The column is centred (max 1240px) when there's room;
       when there isn't, its right margin grows to --lane so the stitch line still runs in a clear gutter. */
    --lane:clamp(96px,10vw,160px);
    --col-r:min(calc(50% + var(--wrap-max) / 2), calc(100% - var(--lane)));
    --nx:calc(var(--col-r) + 24px);
    --ml:calc(var(--nx) - 177px * var(--k))}
  .mh-machine-layer{opacity:.6}
  html body.mh-sew .entry-content{display:flex;flex-direction:column;gap:var(--sec-gap);margin:0!important;width:auto;max-width:none;
    padding:calc(var(--mh-head) + clamp(32px,5vw,72px)) 0 0}
  html body.mh-sew .entry-content>.wp-block-group{position:relative;z-index:1;margin:0!important;max-width:none!important;
    padding:0!important;background:transparent!important}
  html body.mh-sew .entry-content>.wp-block-group>.wrap{position:relative;max-width:none;padding:var(--panel-pad);
    margin:0 max(var(--lane),calc(50% - var(--wrap-max) / 2)) 0 max(var(--gutter),calc(50% - var(--wrap-max) / 2));
    background:rgba(8,8,8,.88);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  html body.mh-sew .entry-content>.wp-block-group>.wrap::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(201,162,77,.38);border-radius:3px;pointer-events:none}
  html body.mh-sew .entry-content p{max-width:68ch}
  html body.mh-sew .entry-content h2{font-size:clamp(1.9rem,2.6vw,2.6rem);margin-bottom:.5em}
  /* hero: headline + CTA left, Jeff right */
  html body.mh-sew .entry-content .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4.5vw,80px);align-items:center}
  html body.mh-sew .entry-content .hero h1{font-size:clamp(2.5rem,4.6vw,4.6rem);line-height:1.08;margin-bottom:.45em}
  html body.mh-sew .entry-content .hero .lead{font-size:clamp(1.1rem,1.35vw,1.3rem);max-width:46ch}
  html body.mh-sew .entry-content .hero .btn-row{margin-top:clamp(20px,2.4vw,36px)}
  html body.mh-sew .entry-content .hero-media img{width:100%;max-height:min(600px,calc(100vh - 260px));min-height:360px;object-fit:cover;object-position:50% 18%}
  /* Unique Clothier: text + image split */
  html body.mh-sew .entry-content .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,80px);align-items:center}
  html body.mh-sew .entry-content .split .rounded img,html body.mh-sew .entry-content .split img{max-height:560px;object-fit:cover}
  /* Make a Statement / Custom Fit: the two cards are the panels */
  html body.mh-sew .entry-content>.section.alt>.wrap{background:transparent;box-shadow:none;padding:0}
  html body.mh-sew .entry-content>.section.alt>.wrap::before{content:none}
  html body.mh-sew .entry-content .cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
  html body.mh-sew .entry-content .card{position:relative;background:rgba(12,12,12,.92);box-shadow:0 24px 60px rgba(0,0,0,.5);padding-bottom:clamp(24px,2.6vw,40px)}
  html body.mh-sew .entry-content .card-img{aspect-ratio:3/2}
  html body.mh-sew .entry-content .card h2,html body.mh-sew .entry-content .card p{padding:0 clamp(24px,2.6vw,40px)}
  /* testimonials: 2 up on tablet (third spans), 3 up on desktop */
  html body.mh-sew .entry-content .testimonials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin-top:clamp(20px,2.4vw,36px)}
  html body.mh-sew .entry-content .testimonial:nth-child(3){grid-column:1/-1}
  html body.mh-sew .entry-content .testimonial:nth-child(3) .t-img{aspect-ratio:3/1}
  html body.mh-sew .entry-content .testimonial{background:rgba(22,22,22,.94)}
  html body.mh-sew .entry-content .t-img{aspect-ratio:16/10}
  /* CTA: full-width gold band right above the footer */
  html body.mh-sew .entry-content>.cta-band{background:rgba(201,162,77,.97)!important;padding:clamp(48px,6vw,96px) var(--gutter)!important;text-align:center}
  html body.mh-sew .entry-content>.cta-band>.wrap{background:transparent;box-shadow:none;padding:0;max-width:820px;margin:0 auto}
  html body.mh-sew .entry-content>.cta-band>.wrap::before{content:none}
  html body.mh-sew .entry-content>.cta-band p{margin-left:auto;margin-right:auto}
}
@media (min-width:1024px){
  :root{--k:0.9}
  html body.mh-sew .entry-content .testimonials{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body.mh-sew .entry-content .testimonial:nth-child(3){grid-column:auto}
  html body.mh-sew .entry-content .testimonial:nth-child(3) .t-img{aspect-ratio:16/10}
}
@media (min-width:1440px){:root{--k:1}}
@media (min-width:1800px){:root{--k:1.15}}

/* sticky mobile Call / Request Info bar (shown below 800px): keep the head above it */
@media not all and (min-width:800px){:root{--mb:84px}
  /* Astra's scroll-to-top button sits on the Call bar / machine head corner here; the header menu is a tap away */
  html body.mh-sew #ast-scroll-top{display:none!important}
}
/* exact inverse of the bar's own rule (@media (min-width:800px){.mobile-cta{display:none}}) */
@media not all and (min-width:800px){
  /* Xander: on mobile the hero doesn't need its own Call / Request Info buttons, the fixed bar has them.
     Exactly where the bar shows, so there's never a width with neither.
     Hidden with CSS only; the markup stays. This also removes the font-swap re-wrap (layout shift). */
  html body.mh-sew .entry-content .hero .btn-row{display:none!important}
  html body.mh-sew .entry-content .hero .lead{margin-bottom:0}
  html body.mh-sew .entry-content .hero-grid{gap:1.5rem}}


/* ===== Mobile (<=767px), 1.2.7 (Xander: "The content width is good. But put the machine behind it, dimmer"):
   content width/gutters unchanged from 1.2.5 (14px left, 58px right lane). Only the machine changes: larger, dimmer,
   desaturated, under the cards (cards cover it where they overlap); needle + stitch line stay in the right lane. ===== */
@media (max-width:767px){
  :root{--k:0.5;--nx:calc(100% - 44px);--ml:calc(var(--nx) - 177px * var(--k));--tile-w:300px;--tile-h:328px;--mh-head:76px}
  /* 1.2.8 (Xander: "It looks like it's dimmed behind the fabric wallpaper. It needs to be in front"): layer order is
     fabric < dark overlay < chalk/stitch/light (all in .mh-stage, z 0) < machine (.mh-machine-layer, z 1) < cards (z 2).
     The 1.2.7 opacity .4 let the herringbone show THROUGH the head, so it read as sitting behind the cloth.
     Now the head is solid (nothing shows through) and dimmed with brightness instead of transparency. */
  .mh-machine-layer{z-index:1;opacity:1;filter:brightness(.72) saturate(.7)}
  html body.mh-sew .entry-content>.wp-block-group{z-index:2}
  .mh-thr{height:2.4px;margin-top:-1.2px}
  html body.mh-sew .entry-content{width:auto;margin:0 58px 0 14px!important;gap:56px;padding:calc(var(--mh-head) + 24px) 0 380px}
  html body.mh-sew .entry-content>.wp-block-group{padding:26px 22px!important;background:rgba(8,8,8,.86)!important}
  html body.mh-sew .entry-content>.cta-band{background:rgba(201,162,77,.97)!important}
  html body.mh-sew .entry-content .hero h1{font-size:clamp(2rem,9vw,2.5rem)}
  html body.mh-sew .entry-content .hero-media img{max-height:380px}
  .mh-light{background:radial-gradient(circle at var(--nx) var(--ny), rgba(255,232,180,.10), rgba(255,236,170,0) 140px),radial-gradient(120% 90% at 70% 60%, transparent 40%, rgba(0,0,0,.5))}
}

/* ===== Reduced motion: static composed frame (JS also stands down) ===== */
@media (prefers-reduced-motion:reduce){
  .mh-fabric,.mh-stitch,.mh-chalk,.mh-machine,.mh-nbar,.mh-needle,.mh-foot,.mh-strands i{transform:none!important}
}