.her-barber-page{background:var(--her-cream);color:var(--her-ink);overflow:hidden}
.her-barber-hero{position:relative;min-height:777px;background:var(--her-cream)}
.her-barber-header{position:relative;z-index:3;height:150px;padding-top:80px;display:flex;align-items:flex-start}
.her-barber-header .her-navigation{width:auto;gap:56px}
.her-barber-header .her-navigation a{margin:0;display:inline-flex;align-items:center;gap:10px}
.her-barber-header .her-navigation--right{margin-left:auto;margin-right:100px}
.her-barber-header .her-navigation a.is-current{opacity:.55}
.her-barber-logo{position:absolute;left:50%;top:72px;transform:translateX(-50%);width:131px;height:61px}
.her-barber-logo img{width:100%;height:100%;object-fit:contain}
.her-barber-header .her-header__actions{margin-left:24px}
.her-barber-hero__content{position:relative;min-height:627px;padding-top:158px}
.her-barber-hero__copy{position:relative;z-index:1;width:620px}
.her-barber-hero h1{margin:0;font:400 76px/.95 "EB Garamond",Georgia,serif;letter-spacing:-1.4px}
.her-barber-hero h2{margin:29px 0 0;font:400 52px/1.06 "EB Garamond",Georgia,serif;letter-spacing:-.5px}
.her-barber-hero h2 em{font-style:italic}
.her-barber-hero p{max-width:520px;margin:28px 0 0;font-size:18px;line-height:1.6;color:var(--her-copy)}
.her-barber-hero__media{position:absolute;top:158px;right:0;width:621px;height:359px;overflow:hidden;border-radius:20px}
.her-barber-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.her-barber-mobile-break{display:block}
.her-barber-desktop-break{display:block}
.her-barber-expert,.her-barber-program{position:relative;min-height:822px;display:flex;align-items:center;overflow:hidden;background:var(--her-olive);color:var(--her-cream)}
.her-barber-expert__backdrop,.her-barber-program__backdrop{position:absolute;inset:0}
.her-barber-expert__backdrop{background:var(--her-barber-expert-bg) lightgray -10.694px 0 / cover no-repeat;opacity:.5;mix-blend-mode:multiply}
.her-barber-program__backdrop{background:var(--her-barber-program-bg) lightgray -10.694px 0 / cover no-repeat;opacity:.5;mix-blend-mode:multiply}
.her-barber-expert__backdrop:after,.her-barber-program__backdrop:after{display:none}
.her-barber-expert__content,.her-barber-program__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.her-barber-mark{width:44px;height:47px;object-fit:contain;filter:brightness(0) invert(1)}
.her-barber-expert .her-eyebrow,.her-barber-program .her-eyebrow{color:rgba(255,255,255,.58);margin-top:15px}
.her-barber-expert h2{margin:20px 0 0;font:400 62px/.98 "EB Garamond",Georgia,serif;letter-spacing:.3px}
.her-barber-expert> .her-container>p{max-width:650px;margin:15px 0 0;font:400 25px/1.35 "EB Garamond",Georgia,serif}
.her-barber-expert> .her-container>p em,.her-barber-expert h3 em{font-style:italic}
.her-barber-expert h3{margin:61px 0 0;font:400 44px/1.1 "EB Garamond",Georgia,serif}
.her-barber-expert__arrow{position:absolute;left:calc(50% + 220px);top:405px;width:44px;height:123px;overflow:visible;fill:none;stroke:none;transform:none}
.her-barber-expert__label{margin:10px 0 0;font-size:16px;color:rgba(255,255,255,.82)}
.her-barber-search{display:flex;width:360px;height:64px;margin-top:47px;overflow:hidden;border-radius:40px;background:rgba(255,255,255,.9)}
.her-barber-search input{min-width:0;flex:1;padding:0 28px;border:0;outline:0;background:transparent;color:var(--her-brown);font-size:16px}
.her-barber-search button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:190px;flex:0 0 190px;border:0;background:var(--her-olive);color:var(--her-cream);font-size:16px;cursor:pointer;white-space:nowrap}
.her-barber-search button span{margin-left:0;font-size:18px}
.her-barber-map{height:620px;background:#ddd8ce;overflow:hidden}
.her-barber-map img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.15);opacity:.72}
.her-barber-partners{padding:155px 0 135px;background:var(--her-cream)}
.her-barber-partners__heading{display:flex;flex-direction:column;align-items:center;text-align:center}
.her-barber-partners__heading .her-barber-mark,.her-barber-contact .her-barber-mark{filter:none}
.her-barber-partners__heading .her-eyebrow{margin-top:15px}
.her-barber-partners__heading h2{margin:24px 0 0;font:400 62px/.95 "EB Garamond",Georgia,serif;letter-spacing:.3px}
.her-barber-partners__heading p{margin:21px 0 0;font:400 28px/1.2 "EB Garamond",Georgia,serif}
.her-barber-partners__heading p em{font-style:italic}
.her-barber-partners__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:68px;margin:90px auto 0;justify-content:center}
.her-barber-card{min-height:335px;padding:58px 48px 35px;border:1px solid rgba(84,66,54,.43)}
.her-barber-card .her-eyebrow{font-size:11px;letter-spacing:7px}
.her-barber-card h3{min-height:70px;margin:17px 0 25px;font:400 29px/1.08 "EB Garamond",Georgia,serif;color:var(--her-brown)}
.her-barber-card p{margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--her-copy)}
.her-barber-card p+p{margin-top:27px}
.her-barber-card a{text-decoration:underline;text-underline-offset:3px}
.her-barber-card__socials{display:flex;gap:20px;margin-top:25px;align-items:center}
.her-barber-card__socials a{font:500 19px/1 "DM Sans",sans-serif;text-decoration:none;color:var(--her-brown)}
.her-barber-card__socials img,.her-barber-card__socials svg{display:block;width:18px;height:18px;object-fit:contain;fill:currentColor}
.her-barber-all{display:block;width:max-content;margin:75px auto 0;padding:0;border:0;background:transparent;color:var(--her-brown);font:400 17px/1.4 "EB Garamond",Georgia,serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.her-barber-all:hover{color:var(--her-ink)}
.her-barber-all[hidden]{display:none}
.her-barber-why{padding:150px 0 160px;background:var(--her-cream)}
.her-barber-why__grid{display:grid;grid-template-columns:42% 58%;gap:7%}
.her-barber-why h2{margin:27px 0 0;font:400 62px/.94 "EB Garamond",Georgia,serif;letter-spacing:.4px}
.her-barber-why h2 em{font-style:italic}
.her-barber-why__steps article{display:grid;grid-template-columns:75px 1fr;gap:22px;padding:0 0 42px;margin:0 0 42px;border-bottom:1px solid rgba(84,66,54,.4)}
.her-barber-why__steps article:last-child{margin-bottom:0}
.her-barber-why__steps>article>span{font:400 34px/1.2 "EB Garamond",Georgia,serif;color:rgba(153,129,114,.75)}
.her-barber-why__steps h3{margin:0;font:400 42px/1.02 "EB Garamond",Georgia,serif}
.her-barber-why__steps p{max-width:340px;margin:17px 0 0;font-size:17px;line-height:1.55;color:var(--her-copy)}
.her-barber-program{min-height:820px}
.her-barber-program h2{margin:24px 0 0;font:400 62px/.98 "EB Garamond",Georgia,serif}
.her-barber-program h3{margin:17px 0 0;font:italic 31px/1.1 "EB Garamond",Georgia,serif;font-weight:400}
.her-barber-program__content>p{max-width:640px;margin:23px 0 0;font-size:16px;line-height:1.55}
.her-barber-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:55px;width:100%;margin-top:100px;text-align:left}
.her-barber-benefits strong{display:flex;width:76px;height:70px;align-items:flex-start;font:400 47px/1 "EB Garamond",serif;color:var(--her-cream)}
.her-barber-benefits strong img{display:block;width:100%;height:100%;object-fit:contain}
.her-barber-benefits strong svg{display:block;width:72px;height:72px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.her-barber-benefits h4{margin:27px 0 0;font:400 27px/1.1 "EB Garamond",Georgia,serif}
.her-barber-benefits p{margin:32px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.86)}
.her-barber-contact{padding:155px 0 165px;background:var(--her-cream)}
.her-barber-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.her-barber-contact__steps h2{margin:0;font:400 62px/.95 "EB Garamond",Georgia,serif}
.her-barber-contact__steps h2 em{font-style:italic}
.her-barber-contact__steps article{display:grid;grid-template-columns:75px 1fr;gap:22px;margin-top:75px;padding-bottom:35px;border-bottom:1px solid rgba(84,66,54,.4)}
.her-barber-contact__steps article+article{margin-top:34px}
.her-barber-contact__steps article>span{font:400 40px/1 "EB Garamond",Georgia,serif;color:var(--her-olive)}
.her-barber-contact__steps h3{margin:0;font:400 35px/1 "EB Garamond",Georgia,serif}
.her-barber-contact__steps p{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--her-copy)}
.her-barber-form{padding:70px 75px 65px;border-radius:20px;background:#f2eee7;color:#000000}
.her-barber-form__title-mobile,.her-barber-form__copy-mobile,.her-barber-form__button-mobile{display:none}
.her-barber-form h2{margin:25px 0 0;color:#000000;font:400 55px/.95 "EB Garamond",Georgia,serif;letter-spacing:-.4px}
.her-barber-form>p{margin:24px 0 42px;color:rgba(0,0,0,.5);font:300 16px/1.5 "DM Sans",Arial,sans-serif}
.her-barber-form>p strong{color:#24231e;font-weight:500}
.her-barber-form label:not(.her-barber-consent){display:block;margin-top:28px;color:#000000;font:400 16px/1.4 "DM Sans",Arial,sans-serif}
.her-barber-form input[type=text],.her-barber-form input[type=email],.her-barber-form input[type=tel],.her-barber-form input[type=url],.her-barber-form textarea{display:block;width:100%;padding:13px 0;border:0;border-bottom:1px solid rgba(0,0,0,.16);outline:0;background:transparent;color:#000000;font:400 16px/1.4 "DM Sans",Arial,sans-serif;resize:vertical}
.her-barber-form input:focus,.her-barber-form textarea:focus{border-bottom-color:var(--her-olive)}
.her-barber-consent{display:flex;gap:12px;align-items:flex-start;margin-top:29px;color:rgba(0,0,0,.5);font:300 14px/1.45 "DM Sans",Arial,sans-serif}
.her-barber-consent input{margin-top:3px}
.her-barber-form button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:58px;margin-top:33px;border:0;border-radius:40px;background:#697052;color:var(--her-cream);font:500 16px/1 "DM Sans",Arial,sans-serif;cursor:pointer}
.her-barber-form button:hover,.her-barber-form button:focus-visible{background:var(--her-olive)}
.her-barber-form button > span:last-child{font-size:18px;line-height:1}

@media (min-width:1101px){
	/* Desktop Figma measurements. The final responsive layer makes the canvas
	 * fluid at the laptop and tablet breakpoints. */
	.her-barber-page .her-container{width:1312px;max-width:none}
	.her-barber-hero .her-header{width:1312px;max-width:none;padding-top:86px}
	.her-barber-hero .her-navigation{position:absolute;inset:0;display:block;width:100%;font-size:16px;letter-spacing:4px}
	.her-barber-hero .her-navigation a{position:absolute;top:0;height:100%;display:flex;align-items:center;margin:0;white-space:nowrap}
	.her-barber-hero .her-navigation a:nth-child(1){left:0}
	.her-barber-hero .her-navigation a:nth-child(2){left:179px}
	.her-barber-hero .her-navigation a:nth-child(3){left:326px}
	.her-barber-hero .her-navigation a:nth-child(4){left:886px;transform:none}
	.her-barber-hero .her-navigation a:nth-child(5){left:1028px;transform:none}
	.her-barber-hero .her-navigation a:first-child img{display:none}
	.her-barber-hero .her-logo{z-index:2}
	.her-barber-hero__copy{width:560px;padding-top:22px}
	.her-barber-expert__content{transform:translateY(-4px)}
	.her-barber-program__content{transform:translateY(10px)}
	.her-barber-page .her-barber-benefits{width:1114px;gap:80px;margin-left:auto;margin-right:auto}
	.her-barber-benefits h4{margin-top:60px}
	.her-barber-page .her-barber-partners__grid{width:1115px;max-width:none;grid-template-columns:repeat(3,325px);gap:70px;margin-top:90px;margin-left:auto;margin-right:auto}
	.her-barber-page .her-barber-why__grid{width:1115px;max-width:none;grid-template-columns:521px 1fr;gap:70px;margin-left:auto;margin-right:auto}
	.her-barber-page .her-barber-contact__grid{width:1115px;max-width:none;grid-template-columns:521px 1fr;gap:70px;margin-left:auto;margin-right:auto}
	.her-barber-form{padding:120px 99px 65px}
	.her-barber-page .her-faq__grid{width:1115px;max-width:none;grid-template-columns:521px 1fr;gap:70px;margin-left:auto;margin-right:auto}
}

@media (max-width:1400px) and (min-width:801px){
	.her-barber-header .her-navigation{gap:32px;font-size:15px;letter-spacing:2.5px}
	.her-barber-header .her-navigation--right{margin-right:100px}
	.her-barber-header .her-header__actions{margin-left:24px}
	.her-barber-hero h1{font-size:64px}
	.her-barber-hero h2{font-size:46px}
}
@media (max-width:800px){
	.her-barber-hero{min-height:820px}
	.her-barber-hero .her-header{width:calc(100% - 80px);height:125px;padding-top:78px;align-items:center}
	.her-barber-hero .her-header .her-navigation,.her-barber-hero .her-header .her-header__actions{display:none}
	.her-barber-hero .her-logo{position:relative;left:auto;top:auto;transform:none;width:100px;height:47px;margin:0 auto 0 0}
	.her-barber-hero .her-menu-toggle{display:flex;position:absolute;right:0;top:88px}
	.her-barber-hero .her-header.is-menu-open .her-menu-toggle span:first-child{transform:translateY(9px) rotate(45deg)}
	.her-barber-hero .her-header.is-menu-open .her-menu-toggle span:nth-child(2){opacity:0}
	.her-barber-hero .her-header.is-menu-open .her-menu-toggle span:last-child{transform:translateY(-9px) rotate(-45deg)}
	.her-barber-hero__content{min-height:692px;padding-top:85px}
	.her-barber-hero__copy{width:100%}
	.her-barber-hero h1{font-size:48px}
	.her-barber-hero h2{margin-top:28px;font-size:35px;line-height:1.08}
	.her-barber-mobile-break{display:block}
	.her-barber-hero p{margin-top:28px;font-size:17px;line-height:1.55}
	.her-barber-hero__media{top:422px;right:auto;left:0;width:100%;height:243px;border-radius:20px}
	.her-barber-expert{min-height:700px}
	.her-barber-expert__content{padding-top:85px;padding-bottom:85px}
	.her-barber-expert h2{margin-top:23px;font-size:43px;line-height:1.02}
	.her-barber-expert> .her-container>p{margin-top:27px;font-size:24px;line-height:1.33}
	.her-barber-expert h3{margin-top:61px;font-size:37px}
	.her-barber-expert__arrow{left:auto;right:-18px;top:392px;width:44px;height:123px}
	.her-barber-search{width:100%;height:64px;margin-top:23px}
	.her-barber-search__desktop-label{display:none}
	.her-barber-search button{width:115px;flex-basis:115px}
	.her-barber-map{height:390px}
	.her-barber-partners{padding:88px 0 100px}
	.her-barber-partners__heading h2{margin-top:23px;font-size:43px;line-height:1.03}
	.her-barber-partners__heading p{margin-top:18px;font-size:24px}
	.her-barber-partners__grid{grid-template-columns:1fr;gap:23px;margin-top:59px}
	.her-barber-card{min-height:335px;padding:58px 48px 35px}
	.her-barber-all{margin-top:63px;font-size:16px}
	.her-barber-why{padding:89px 0 104px}
	.her-barber-why__grid{display:block}
	.her-barber-why h2{margin-top:26px;font-size:43px;line-height:1.04}
	.her-barber-why__steps{margin-top:64px}
	.her-barber-why__steps article{grid-template-columns:42px 1fr;gap:17px;padding-bottom:35px;margin-bottom:35px}
	.her-barber-why__steps>article>span{font-size:31px}
	.her-barber-why__steps h3{font-size:34px}
	.her-barber-why__steps p{margin-top:16px;font-size:16px;line-height:1.6}
	.her-barber-desktop-break{display:none}
	.her-barber-program{min-height:820px}
	.her-barber-program__content{padding-top:85px;padding-bottom:90px}
	.her-barber-program h2{font-size:43px;line-height:1.02}
	.her-barber-program h3{max-width:310px;margin-top:18px;font-size:25px;line-height:1.15}
	.her-barber-program__content>p{max-width:310px;margin-top:23px;font-size:15px}
	.her-barber-benefits{grid-template-columns:1fr 1fr;gap:47px 27px;margin-top:69px}
	.her-barber-benefits strong{width:52px;height:52px;font-size:36px}
	.her-barber-benefits strong svg{width:52px;height:52px}
	.her-barber-benefits h4{margin-top:20px;font-size:25px}
	.her-barber-benefits p{margin-top:19px;font-size:14px;line-height:1.55}
	.her-barber-contact{padding:86px 0 105px}
	.her-barber-contact__grid{display:block;width:100%}
	/* Keep the cooperation steps visible on mobile and let the block order
	 * place them directly above the form, as in the mobile composition. */
	.her-barber-contact__steps{display:block;width:calc(100% - 80px);margin:0 auto}
	.her-barber-contact__steps h2{font-size:45px;line-height:1.02}
	.her-barber-contact__steps article{grid-template-columns:42px 1fr;gap:17px;margin-top:55px;padding-bottom:31px}
	.her-barber-contact__steps article+article{margin-top:31px}
	.her-barber-contact__steps article>span{font-size:31px}
	.her-barber-contact__steps h3{font-size:32px}
	.her-barber-contact__steps p{font-size:15px}
	.her-barber-contact__steps article:last-child{margin-bottom:86px;padding-bottom:0;border-bottom:0}
	.her-barber-form{width:100%;padding:70px 40px 60px;border-radius:0}
	.her-barber-form .her-barber-mark{width:50px;height:54px}
	.her-barber-form__title-desktop,.her-barber-form__copy-desktop,.her-barber-form__button-desktop{display:none}
	.her-barber-form__title-mobile,.her-barber-form__copy-mobile,.her-barber-form__button-mobile{display:block}
	.her-barber-form h2{font-size:32px;line-height:1.08}
	.her-barber-form>p{margin-top:26px;margin-bottom:50px;font-size:16px;line-height:1.55}
	.her-barber-form label:not(.her-barber-consent){margin-top:24px;font-size:18px}
	.her-barber-form .her-barber-desktop-field{display:none}
	.her-barber-form textarea{min-height:120px}
}
@media (max-width:420px){
	.her-barber-hero .her-header,.her-barber-hero__content,.her-barber-expert__content,.her-barber-partners__heading,.her-barber-why__grid,.her-barber-program__content,.her-barber-contact__grid,.her-barber-page .her-faq__grid{width:calc(100% - 80px)}
	.her-barber-page .her-barber-contact__grid{width:100%}
	.her-barber-partners__grid{width:calc(100% - 64px)}
	.her-barber-hero__media{width:100%}
}

/* The prototype remains on the full desktop canvas even when the browser
 * viewport is narrower than 1512px, so keep desktop type and navigation
 * metrics unchanged until the mobile breakpoint. */
@media (min-width:1101px){
	/* Use the same responsive header metrics as the homepage. */
	.her-barber-hero .her-header{width:min(1312px,calc(100vw - 200px));max-width:none;margin-left:max(100px,calc((100vw - 1312px)/2));margin-right:0;padding-top:86px}
	.her-barber-hero .her-navigation{position:static;display:flex;width:100%;gap:0;font-size:16px;letter-spacing:4px}
	.her-barber-hero .her-navigation a{position:static;height:auto;display:inline-flex;align-items:center;margin:0;white-space:nowrap}
	.her-barber-hero .her-navigation a:first-child{margin-right:87px;display:flex;align-items:center;gap:12px}
	.her-barber-hero .her-navigation a:first-child img{display:block}
	.her-barber-hero .her-navigation a:nth-child(2){margin-right:84px}
	.her-barber-hero .her-navigation a:nth-child(3){margin-right:auto}
	.her-barber-hero .her-navigation a:nth-child(4){margin-left:0;margin-right:81px}
	.her-barber-hero .her-navigation a:nth-child(5){margin-right:182px}
	.her-barber-hero .her-header__actions{position:absolute;right:0;top:84px;display:flex;gap:28px}
	.her-barber-hero h1{font-size:76px}
	.her-barber-hero h2{font-size:52px}
}

@media (max-width:800px){
	/* Keep the Barberzy mobile header identical to the homepage header. */
	.her-barber-hero .her-header{
		width:100%;
		height:150px;
		padding:50px 40px 0;
		align-items:center
	}
	.her-barber-hero .her-logo{
		position:static;
		order:0;
		left:auto;
		top:auto;
		transform:none;
		width:103px;
		height:auto;
		margin:0
	}
	.her-barber-hero .her-logo img{
		width:103px;
		height:auto;
		max-width:none
	}
	.her-barber-hero .her-menu-toggle{
		display:flex;
		position:static;
		width:28px;
		height:30px;
		padding:5px 2px;
		margin-left:auto;
		flex-direction:column;
		justify-content:space-between;
		border:0;
		background:transparent
	}
	.her-barber-hero .her-navigation,
	.her-barber-hero .her-header__actions{display:none}
	.her-barber-hero .her-header.is-menu-open .her-navigation{
		display:flex;
		position:absolute;
		z-index:21;
		top:150px;
		left:0;
		width:100%;
		padding:28px 40px 38px;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		background:var(--her-cream);
		box-shadow:0 20px 30px #0002
	}
	.her-barber-hero .her-navigation a,
	.her-barber-hero .her-navigation a:first-child,
	.her-barber-hero .her-navigation a:nth-child(2),
	.her-barber-hero .her-navigation a:nth-child(3),
	.her-barber-hero .her-navigation a:nth-child(4),
	.her-barber-hero .her-navigation a:nth-child(5){
		display:flex;
		width:100%;
		margin:0;
		padding:16px 0;
		justify-content:space-between;
		border-bottom:1px solid #68534544;
		font:500 20px/1.2 "Cormorant",serif;
		letter-spacing:3px
	}
	.her-barber-hero .her-navigation a img{width:12px;height:7px}
}

