/* it-t10-beauty.css: hair and beauty page to the owner's mockup (tools/trades10/references-2/hair-beauty.png,
   765 wide). Sizes are the mockup's measured sizes x1.673 at a 1280 screen, written in vw (1280px = 100vw)
   with floors for phones and caps for wide screens. Built by tools/trades10/beauty.py. */
/* 'Inter Tight Fallback' (1 Oct 2026): the h1 on this page has its manual <br> line breaks turned off
   below 820px (.hb-brk{display:none}), so the heading wraps purely on font metrics there. 'Inter
   Fallback' (tools/font_fallback.py) is sized to match plain Inter, not the narrower Inter Tight
   webfont this page's --hb-display asks for first, so while Inter Tight is still loading the h1 rendered
   in Arial (via the generic sans-serif/'Inter Fallback' chain) ran one extra wrapped line wider than the
   real font needs; once Inter Tight loaded the line dropped out, a ~41px CLS shift measured live on
   /industries/beauty/ (0.1241, the only one of 46 industry pages to fail). size-adjust values below are
   measured (Playwright canvas measureText, local Arial vs the real Google-hosted Inter Tight, same
   weight) against this page's own h1 string; ascent/descent-override reused from 'Inter Fallback''s
   matching weight band since Inter Tight shares Inter's vertical metrics, only the set width differs. */
@font-face{font-family:'Inter Tight Fallback';font-weight:100 449;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:450 549;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:550 649;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:93.67%;ascent-override:95.07%;descent-override:23.77%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:650 749;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:95.77%;ascent-override:92.79%;descent-override:23.20%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:750 849;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:850 1000;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
main.t-beauty{--cw:1190px;--gut:clamp(20px,3.7vw,56px);--hb-ink:#111827;--hb-body:#394350;--hb-line:#E5E7EB;--hb-soft:#F7F7F8;
  --hb-display:"Inter Tight",'Inter Tight Fallback',Inter,'Inter Fallback',-apple-system,"Segoe UI",sans-serif}
.t-beauty h1,.t-beauty h2,.t-beauty h3{font-family:var(--hb-display);color:var(--hb-ink)}
.t-beauty h2{font-size:clamp(28px,2.97vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.018em}
.hb-kick{font:600 clamp(11px,.98vw,14px)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--hb-ink);margin:0 0 clamp(12px,1.3vw,18px)!important}
.hb-p{font-size:clamp(16px,1.37vw,19px);line-height:1.55;color:var(--hb-body)}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:clamp(50px,4.53vw,62px);padding:0 clamp(26px,2.6vw,38px);background:var(--cta);color:#fff!important;border-radius:5px;
  font:600 clamp(16px,1.4vw,19px) var(--sans);box-shadow:0 12px 22px -16px rgba(192,78,6,.9);transition:background .15s,transform .15s}
.hb-btn:hover{background:var(--cta-h);transform:translateY(-1px)}
.hb-link{display:inline-flex;align-items:center;gap:8px;font:600 clamp(15px,1.25vw,17px) var(--sans);color:var(--hb-ink)!important;border-bottom:1.5px solid var(--orange);padding-bottom:2px}
.hb-link svg{width:16px;height:16px;flex:none}
.hb-link:hover{color:var(--cta)!important}

.hb-sec{padding-block:clamp(26px,2.4vw,34px)}
.hb-split{--l:39%;display:grid;grid-template-columns:minmax(0,var(--l)) minmax(0,1fr);align-items:center}
.hb-copy{padding-right:clamp(16px,2vw,32px)}
.hb-copy h2{margin-bottom:clamp(14px,1.6vw,22px)!important}
.hb-copy .hb-p{max-width:420px}
.hb-copy .hb-btn{margin-top:clamp(18px,1.9vw,26px)}
.hb-copy .hb-link{margin-top:clamp(16px,1.7vw,24px)}

/* hero: the stylist and her menu board fill the right; the text sits over the photo's own white fade */
.hb-hero{position:relative;min-height:clamp(560px,58vw,800px);overflow:hidden}
.hb-hero-img{position:absolute;top:0;right:0;bottom:0;left:max(19.6%,calc(50% - 400px))}
.hb-hero-img img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)}
.hb-hero-in{position:relative;width:100%;padding-block:clamp(60px,15.1vw,196px) 56px}
.hb-hero-copy{max-width:min(560px,42vw)}
.hb-hero h1{max-width:min(470px,36vw)}
.hb-hero h1{display:block}
.hb-k{display:block;font:600 clamp(11px,.98vw,14px)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--hb-ink);margin-bottom:clamp(16px,1.6vw,22px)}
.hb-big{display:block;font-size:clamp(38px,3.98vw,56px);line-height:1.07;font-weight:700;letter-spacing:-.022em}
.hb-lede{margin-top:clamp(18px,1.9vw,26px)!important;font-size:clamp(17px,1.44vw,20px);line-height:1.45;color:var(--hb-body);max-width:420px}
.hb-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,1.9vw,26px);margin-top:clamp(22px,2.4vw,32px)}
.hb-hero .hb-btn{padding:0 clamp(22px,1.9vw,30px)}
.hb-note{font-size:clamp(13px,1.15vw,15.5px);line-height:1.45;color:var(--hb-body)}

/* packages */
.hb-pk{padding-top:clamp(30px,2.97vw,40px)}
.hb-pk .hb-split{--l:40%;align-items:start}
.hb-pk .hb-copy{padding-top:clamp(0px,1.9vw,26px)}
.hb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.2vw,30px)}
.hb-cards li{border:1px solid var(--hb-line);border-radius:6px;overflow:hidden;text-align:center;padding-bottom:clamp(18px,2vw,28px);background:#fff;
  box-shadow:0 8px 22px -18px rgba(17,24,39,.45)}
.hb-cards figure{margin:0 0 clamp(16px,1.8vw,24px)!important}
.hb-cards img{display:block;width:100%;height:auto;aspect-ratio:125/78;object-fit:cover}
.hb-cards h3{font:700 clamp(15px,1.37vw,19px)/1.25 var(--hb-display);padding-inline:10px}
.hb-sub{font-size:clamp(12.5px,1.05vw,14.5px);color:#6B7280;margin-top:4px!important}
.hb-price{font:700 clamp(24px,2.3vw,32px)/1 var(--hb-display);color:var(--hb-ink);margin-top:clamp(16px,1.7vw,24px)!important}
.hb-small{font-size:clamp(12.5px,1.05vw,14.5px);color:#6B7280;margin-top:clamp(6px,.8vw,11px)!important}

/* client service record: a picture of the fields, not a form */
.hb-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.4vw,60px);border:1px solid var(--hb-line);border-radius:6px;
  padding:clamp(20px,2.3vw,30px) clamp(20px,2.4vw,32px);background:#fff}
.hb-f{margin-bottom:clamp(10px,.8vw,12px)}
.hb-f:last-child{margin-bottom:0}
.hb-fl,.hb-fh{display:block;font:600 clamp(13px,1.2vw,16px) var(--sans);color:var(--hb-ink);margin-bottom:clamp(4px,.45vw,7px)!important}
.hb-fi{display:flex;align-items:center;min-height:clamp(36px,3vw,40px);border:1px solid #D6DADF;border-radius:4px;padding:0 14px;font-size:clamp(13px,1.1vw,15px);color:#6B7280}
.hb-fh:not(:first-child){margin-top:clamp(16px,1.6vw,22px)!important}
.hb-cbs{display:grid;gap:clamp(8px,.75vw,11px)}
.hb-cbs li{display:flex;align-items:center;gap:10px;font-size:clamp(13px,1.15vw,15.5px);color:var(--hb-body)}
.hb-cbs b{margin-left:auto;font-weight:500;color:var(--hb-body)}
.hb-cb{flex:none;width:16px;height:16px;border:1.5px solid #B9C0C6;border-radius:3px}
.hb-cb.on{background:var(--hb-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--hb-ink)}
.hb-tip{padding:0;gap:14px;color:#9AA2A9}
.hb-tip i{font-style:normal;display:grid;place-items:center;width:38px;align-self:stretch;border-right:1px solid #D6DADF;color:var(--hb-ink)}

/* estimate, deposit invoice, receipt: HTML papers, each opening a real design */
.hb-flow .hb-split{--l:36%}
.hb-doclinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(14px,1.6vw,22px)!important}
.hb-docs{display:grid;grid-template-columns:1fr clamp(24px,4vw,56px) 1fr clamp(24px,4vw,56px) 1fr;align-items:start;padding-block:10px}
.hb-arrow{align-self:center;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M3 7h17M14 1.5L20 7l-6 5.5' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.t10 a.hb-doc{border-radius:6px;overflow:hidden;border:1px solid var(--hb-line);background:#fff;box-shadow:0 10px 26px -20px rgba(17,24,39,.45);transition:transform .2s,box-shadow .2s}
.t10 a.hb-doc:hover,.t10 a.hb-doc:focus-visible{transform:translateY(-3px);box-shadow:0 20px 36px -24px rgba(17,24,39,.55)}
.hb-docs li:nth-child(5){margin-top:-11px}
.hb-paper{display:flex;flex-direction:column;min-height:clamp(230px,19.6vw,280px);padding:clamp(16px,2.3vw,30px) clamp(14px,1.9vw,26px) clamp(16px,2vw,26px)}
.hb-rcpt .hb-paper{padding-top:clamp(14px,1.9vw,25px)}
.hb-dh{font:700 clamp(14px,1.37vw,18px)/1.2 var(--hb-display);color:var(--hb-ink);padding-bottom:clamp(10px,1.2vw,15px);border-bottom:1px solid #9CA3AF;margin-bottom:clamp(12px,1.5vw,20px)}
.hb-dl{display:grid;gap:clamp(8px,.95vw,12px)}
.hb-dl li{display:flex;justify-content:space-between;gap:8px;font-size:clamp(12px,1.02vw,14px);color:var(--hb-body)}
.hb-dl b{font-weight:500;color:var(--hb-ink);white-space:nowrap}
.hb-dtot{display:flex;justify-content:space-between;gap:8px;margin-top:auto!important;padding-top:clamp(10px,1.2vw,15px);border-top:1px solid #9CA3AF;font-size:clamp(12px,1.02vw,14px);font-weight:700;color:var(--hb-ink)}
.hb-dl+.hb-dtot{margin-top:clamp(18px,2vw,26px)!important}
.hb-rcpt .hb-dtot{margin-top:clamp(12px,1.4vw,18px)!important}
.hb-thanks{display:block;text-align:center;margin-top:clamp(10px,1.2vw,15px);padding-top:clamp(10px,1.2vw,15px);border-top:1px solid var(--hb-line)}
.hb-ty{display:block;font:400 clamp(28px,2.9vw,40px)/1 "Allura","Segoe Script",cursive;color:var(--hb-ink)}
.hb-tys{display:block;margin-top:8px;font:600 clamp(8.5px,.72vw,10px)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4B5563}
.hb-doc .t10-edit{bottom:12px;font-size:13px;padding:10px 14px}

/* payment: the page's one QR */
.hb-paywrap{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:0;align-items:stretch}
.hb-qrcard{border:1px solid var(--hb-line);border-radius:6px;padding:clamp(18px,1.7vw,24px) 18px clamp(16px,1.6vw,22px);text-align:center;background:#fff;align-self:center}
.hb-qrh{font:700 clamp(14px,1.28vw,17px) var(--hb-display);color:var(--hb-ink);margin-bottom:clamp(8px,.9vw,12px)!important}
.t10 .hb-qr{width:clamp(104px,9.4vw,132px);margin:0 auto}
.hb-qrs{font-size:clamp(12.5px,1.1vw,14.5px);color:var(--hb-body);margin:clamp(10px,1.2vw,16px) 0 clamp(12px,1.4vw,18px)!important}
.hb-qricons{display:flex;justify-content:center;gap:clamp(14px,3vw,40px)}
.hb-qricons li{display:grid;justify-items:center;gap:8px;font-size:clamp(11.5px,1vw,13.5px);color:var(--hb-body)}
.hb-qricons svg{width:clamp(24px,2.5vw,32px);height:clamp(24px,2.5vw,32px);color:var(--hb-ink)}
.hb-qrf{font-size:clamp(12.5px,1.1vw,14.5px);color:var(--hb-body);margin-top:clamp(14px,1.9vw,24px)!important}
.hb-ways{margin-left:clamp(20px,4vw,52px);border-left:1px solid var(--hb-line);padding:clamp(10px,1.4vw,18px) 0 clamp(10px,1.4vw,18px) clamp(20px,4.9vw,64px)}
.hb-kick2{font-size:clamp(10px,.9vw,12.5px);margin-bottom:clamp(14px,1.7vw,22px)!important}
.hb-ways ul{display:grid;gap:clamp(12px,1.6vw,21px)}
.hb-ways li{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);font-size:clamp(13.5px,1.2vw,16px);color:var(--hb-ink)}
.hb-ways svg{width:clamp(20px,1.9vw,25px);height:clamp(20px,1.9vw,25px);flex:none;color:var(--hb-ink)}
.hb-usd{display:flex;gap:12px;margin-top:clamp(18px,2.2vw,28px)!important;font-size:clamp(12px,1.05vw,14px);color:var(--hb-body)}
.hb-usd span+span{padding-left:12px;border-left:1px solid #C9CED3}
.hb-ways .hb-link{margin-top:clamp(14px,1.6vw,20px);font-size:14px}
.hb-fine{margin-top:10px!important;font-size:12.5px;line-height:1.5;color:#6B7280}

/* useful links */
.hb-use .hb-split{--l:36%}
.hb-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.45vw,20px)}
.t10 .hb-tools a.hb-tool{display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:clamp(150px,13.7vw,190px);padding:clamp(16px,1.6vw,22px) 10px clamp(14px,1.5vw,20px);border-radius:6px;background:var(--hb-soft);
  text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.t10 .hb-tools a.hb-tool:hover{transform:translateY(-2px);box-shadow:0 14px 26px -20px rgba(17,24,39,.5)}
.hb-tools svg{width:clamp(28px,2.9vw,38px);height:clamp(28px,2.9vw,38px);color:var(--hb-ink);margin-bottom:clamp(12px,1.5vw,20px)}
.hb-tools h3{font:700 clamp(13.5px,1.25vw,17px)/1.25 var(--hb-display)}
.hb-view{margin-top:auto;padding-top:10px;font:600 clamp(13.5px,1.2vw,16px) var(--sans);color:var(--cta)}
.hb-util{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:clamp(14px,1.6vw,22px)!important}
.t10 .hb-tl{margin-left:0!important;font-size:14.5px;color:var(--hb-ink)!important;text-decoration:underline!important;text-decoration-color:rgba(242,98,7,.55)!important;text-underline-offset:4px}
.t10 .hb-tl:hover{color:var(--cta)!important}

/* FAQ: boxed list, like the mockup */
.hb-faqs .hb-split{--l:40%;align-items:start}
.hb-faqs .hb-copy{padding-top:clamp(0px,.8vw,12px)}
.hb-faq{border:1px solid var(--hb-line);border-radius:5px}
.hb-faq details{border-bottom:1px solid var(--hb-line)}
.hb-faq details:last-child{border-bottom:0}
.hb-faq summary{padding:0 clamp(16px,1.9vw,24px);min-height:clamp(46px,4vw,54px);font-size:clamp(14px,1.28vw,17px);color:var(--hb-ink)}
.hb-faq summary::after{font-size:22px;font-weight:300;color:#6B7280}
.hb-faq .a{padding:0 clamp(16px,1.9vw,24px) 16px}

/* final CTA: the salon floor, full width; the text sits over the wall */
.hb-end{position:relative;overflow:hidden;min-height:clamp(300px,29.3vw,420px);display:flex;align-items:center;margin-top:clamp(20px,2.4vw,32px)}
.hb-end-img{position:absolute;inset:0}
.hb-end-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hb-end-in{position:relative;width:100%;padding-block:40px}
.hb-end-copy{max-width:600px}
.hb-end h2{font-size:clamp(30px,3.1vw,44px);line-height:1.12}
.hb-end p{margin-top:clamp(10px,1.3vw,18px)!important;font-size:clamp(16px,1.4vw,19px);color:var(--hb-ink)}
.hb-end .hb-btn{margin-top:clamp(18px,2vw,28px)}

@media (min-width:821px) and (max-width:1120px){.hb-big{font-size:3.6vw}.hb-hero-copy{max-width:calc(38vw - var(--gut) + 20px)}.hb-lede{font-size:16px}.hb-note{font-size:12.5px}}
@media (max-width:980px){
  .hb-paywrap{grid-template-columns:1fr}
  .hb-ways{margin:22px 0 0;border-left:0;padding:0}
  .hb-tools{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hb-brk{display:none}
  .hb-hero h1{max-width:none}
  .hb-split{grid-template-columns:1fr;gap:26px}
  .hb-copy{padding-right:0}
  .hb-pk .hb-copy,.hb-faqs .hb-copy{padding-top:0}
  .hb-sec{padding-block:30px}
  .hb-hero{min-height:0}
  .hb-hero-img{position:relative;left:auto}
  .hb-hero-img img{height:auto;aspect-ratio:615/444;-webkit-mask-image:none;mask-image:none}
  .hb-hero-in{padding-block:28px 40px}
  .hb-hero-copy{max-width:none}
  .hb-end{display:block;min-height:0}
  .hb-end-img{position:relative}
  .hb-end-img img{height:auto;aspect-ratio:765/224}
  .hb-end-in{padding-block:28px 44px}
}
@media (max-width:640px){
  .hb-cards{grid-template-columns:1fr 1fr}
  .hb-cards li:last-child{grid-column:1/-1}
  .hb-cards li:last-child img{aspect-ratio:125/60}
  .hb-form{grid-template-columns:1fr}
  .hb-docs{grid-template-columns:1fr;gap:14px;max-width:360px;margin-inline:auto}
  .hb-docs li:nth-child(5){margin-top:0}
  .hb-arrow{height:22px;transform:rotate(90deg)}
  .hb-paper{min-height:0}
  .hb-qricons{gap:14px}
}
@media (prefers-reduced-motion:reduce){.hb-btn,.t10 a.hb-doc,.t10 .hb-tools a{transition:none}}

/* restored to the mockup (19 Sep): its kicker stays; the search line sits small in the white space above it */
.hb-hero-copy{position:relative}
.hb-k1{margin:0 0 clamp(16px,1.6vw,22px)!important;letter-spacing:.17em!important;word-spacing:.12em}
.hb-hero .hb-btn{min-width:clamp(140px,13.1vw,190px)}
.hb-seo{position:absolute;left:0;top:calc(-1 * clamp(40px,4.2vw,58px));white-space:nowrap;font:600 clamp(10px,.8vw,11.5px)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9A4A12}
.hb-big{font-weight:800;letter-spacing:-.012em}
.hb-fine a{color:var(--cta)!important;text-decoration:underline!important;text-underline-offset:3px}
@media (max-width:820px){.hb-seo{position:static;display:block;white-space:normal;margin-bottom:12px}.hb-hero-copy{display:flex;flex-direction:column}.hb-hero-copy h1{order:0}.hb-k1{order:-1}}
.hb-pk .hb-copy .hb-p,.hb-rec .hb-copy .hb-p,.hb-flow .hb-copy .hb-p,.hb-pay .hb-copy .hb-p{max-width:none}
.hb-pk .hb-copy .hb-p{font-size:clamp(14.5px,1.12vw,16px)}
.hb-qricons svg{stroke-width:2}
.hb-qricons svg{width:clamp(28px,3vw,40px);height:clamp(28px,3vw,40px)}
.t10 .hb-qr{width:clamp(110px,10.4vw,148px)}

/* it-hero-phone-v1 start */
/* One composed hero on phones (24 Sep 2026): the picture sits under the copy inside the same panel,
   with a scrim in the panel color, instead of a separate strip beneath the text. */
@media (max-width:820px){
.hb-hero{display:flex;flex-direction:column;position:relative;background:rgb(255,255,255);overflow:hidden;height:auto;min-height:0}
.hb-hero-in{order:1;position:relative;inset:auto;z-index:2;background:transparent;padding-bottom:0;margin-bottom:0}
.hb-hero-img{order:2;position:relative;z-index:1;inset:auto;margin:calc(100vw*-0.2520) 0 0;width:100%;max-width:none;height:auto}
.hb-hero-img{aspect-ratio:1/0.7200;overflow:hidden}
.hb-hero-img img{display:block;position:static;width:100%;height:100%;max-width:none;aspect-ratio:auto;padding-top:calc(100vw*0.1512);box-sizing:border-box;background:rgb(255,255,255);object-fit:cover;object-position:50% 0;-webkit-mask-image:none;mask-image:none}
.hb-hero-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgb(255,255,255) 0,rgb(255,255,255) calc(100vw*0.1584),rgba(255,255,255,0.85) calc(100vw*0.1944),rgba(255,255,255,0.5) calc(100vw*0.2736),rgba(255,255,255,0) calc(100vw*0.4824))}
}
/* it-hero-phone-v1 end */