/* ==========================================================================
   OTHER SERVICES (/other-services/)
   Same tokens, type scale, buttons and motion grammar as the rest of the
   Glow Fusion system, with a vocabulary of its own: a single path opening
   into several — branch, junction, node, route. Every selector is prefixed
   .gfe-os- and the sheet loads on /other-services/ only, so nothing here
   can reach another page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bands
   -------------------------------------------------------------------------- */
.e-con.gfe-os-sec {
	--padding-top: clamp(56px, 5.2vw, 92px);
	--padding-bottom: clamp(56px, 5.2vw, 92px);
	position: relative;
	overflow: hidden;
}
.e-con.gfe-os-bone {
	background-color: #EFECE4;
	background-image:
		radial-gradient(56% 56% at 50% 0%, rgba(253, 251, 246, .9) 0%, rgba(253, 251, 246, 0) 70%),
		linear-gradient(180deg, #F1EEE7 0%, #EDEAE2 62%, #E9E6DC 100%);
}
.e-con.gfe-os-cream {
	background-color: #E7E4D8;
	background-image:
		radial-gradient(70% 52% at 8% 50%, rgba(250, 248, 242, .72) 0%, rgba(250, 248, 242, 0) 72%),
		linear-gradient(180deg, #E9E6DA 0%, #E4E1D3 60%, #E0DDCE 100%);
}
.e-con.gfe-os-sage {
	background-color: #565B45;
	background-image: linear-gradient(180deg, #4E5340 0%, #545943 52%, #5B6049 100%);
}
.e-con.gfe-os-sage--deep {
	background-color: #474C3A;
	background-image: linear-gradient(180deg, #3F4433 0%, #454A38 54%, #4C5140 100%);
}

/* One origin opening outward: the page's recurring atmosphere. It reads as
   light spreading from where the path begins, not as a spotlight. */
.e-con.gfe-os-spread::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 4%;
	top: 50%;
	width: min(1500px, 138%);
	height: min(1100px, 152%);
	pointer-events: none;
	translate: 0 -50%;
	background: radial-gradient(46% 46% at 0% 50%, rgba(226, 201, 151, .16) 0%, rgba(226, 201, 151, .06) 40%, rgba(226, 201, 151, 0) 72%);
	transform-origin: 0% 50%;
}
.e-con.gfe-os-spread--ink::before {
	background: radial-gradient(46% 46% at 0% 50%, rgba(194, 158, 95, .13) 0%, rgba(194, 158, 95, .045) 42%, rgba(194, 158, 95, 0) 72%);
}

/* In-page anchors clear the sticky header, matching the rest of the site. */
#other-services,
#beauty-bundles,
#brow-lamination-lash-lift,
#lash-brow-tint,
#waxing-services,
#which-service-fits,
#other-services-faq,
#where-your-service-fits {
	scroll-margin-top: calc(var(--gfe-header-h) - 8px);
}

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
.gfe-sec .gfe-os-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #6B5329;
}
.gfe-sec .gfe-os-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 26px;
	height: 10px;
	background: var(--gfe-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 5h10M11 5l7-3.6M11 5l7 3.6'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 5h10M11 5l7-3.6M11 5l7 3.6'/%3E%3C/svg%3E") no-repeat 50% / contain;
	transform-origin: 0% 50%;
}
.gfe-sec .gfe-os-eyebrow--light .elementor-heading-title { color: #E6D3AE; }
.gfe-sec .gfe-os-eyebrow--light .elementor-heading-title::before { background: #D2B27A; }

.gfe-sec .gfe-os-h1 .elementor-heading-title {
	margin-top: 16px;
	font-family: var(--gfe-serif);
	font-size: clamp(36px, 5vw, 66px);
	line-height: 1.04;
	letter-spacing: -.016em;
	color: var(--gfe-paper);
}
.gfe-sec .gfe-os-h2 .elementor-heading-title {
	margin-top: 14px;
	font-family: var(--gfe-serif);
	font-size: clamp(29px, 3.3vw, 48px);
	line-height: 1.07;
	letter-spacing: -.013em;
	color: var(--gfe-ink);
}
.gfe-sec .gfe-os-h2--light .elementor-heading-title { color: var(--gfe-paper); }

.gfe-sec .gfe-os-lead.elementor-widget-text-editor {
	margin-top: 20px;
	max-width: 52ch;
	font-size: clamp(16.5px, 1.35vw, 19px);
	line-height: 1.72;
	color: rgba(244, 240, 235, .92);
}
.gfe-sec .gfe-os-text.elementor-widget-text-editor {
	margin-top: 18px;
	max-width: 64ch;
	font-size: 16.5px;
	line-height: 1.82;
	color: var(--gfe-ink-soft);
}
.gfe-sec .gfe-os-text--light.elementor-widget-text-editor { color: rgba(244, 240, 235, .9); }
.gfe-sec .gfe-os-text a { color: #6B5329; text-decoration: underline; text-underline-offset: 3px; }
.gfe-sec .gfe-os-text a:hover { color: var(--gfe-ink); }
.gfe-sec .gfe-os-text--light a { color: #E6D3AE; }
.gfe-sec .gfe-os-text--light a:hover { color: var(--gfe-paper); }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.e-con.gfe-os-hero {
	--padding-top: calc(var(--gfe-header-h) + clamp(48px, 5vw, 88px));
	--padding-bottom: clamp(58px, 5.2vw, 96px);
}
.e-con.gfe-os-hero > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(30px, 4.4vw, 72px);
	align-items: center;
}
.e-con.gfe-os-hero__copy { --gap: 0px; padding: 0; max-width: 620px; position: relative; z-index: 1; }
.e-con.gfe-os-hero__fig { padding: 0; width: 100%; position: relative; z-index: 1; }
.gfe-os-hero .e-con.gfe-actions { margin-top: 34px; padding: 0; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }

.gfe-os-fig { display: block; width: 100%; height: auto; overflow: visible; }
.gfe-os-hero__fig .gfe-os-fig { aspect-ratio: 460 / 300; }

/* --------------------------------------------------------------------------
   4. Positioning intro
   -------------------------------------------------------------------------- */
.e-con.gfe-os-intro > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
	gap: clamp(28px, 4vw, 70px);
	align-items: start;
}
.e-con.gfe-os-intro__copy { --gap: 0px; padding: 0; position: relative; z-index: 1; }
.e-con.gfe-os-intro__aside { --gap: 0px; padding: 0; position: relative; z-index: 1; }
.gfe-os-intro .gfe-os-text { max-width: 58ch; }

/* A quiet aside, not a banner: what this page can and cannot tell you yet. */
.gfe-os-note {
	margin: clamp(18px, 2vw, 34px) 0 0;
	padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
	border: 1px solid rgba(107, 83, 41, .26);
	border-radius: 3px;
	background: rgba(253, 251, 246, .58);
}
.gfe-os-note__label {
	margin: 0 0 12px;
	font-family: var(--gfe-sans);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #6B5329;
}
.gfe-os-note p {
	margin: 0;
	font-family: var(--gfe-sans);
	font-size: 15px;
	line-height: 1.78;
	color: var(--gfe-ink-soft);
}
.gfe-os-note p + p { margin-top: 12px; }
.gfe-os-note a { color: #6B5329; text-decoration: underline; text-underline-offset: 3px; }
.gfe-os-note a:hover { color: var(--gfe-ink); }

/* --------------------------------------------------------------------------
   5. Explore Glow Fusion — the branching index
   One spine, five connectors, five destinations. This is the page's
   signature composition: a single path opening into the categories that
   already exist, rather than five interchangeable cards.
   -------------------------------------------------------------------------- */
.e-con.gfe-os-index > .e-con-inner { display: block; }
.gfe-os-index__head { max-width: 60ch; }

.gfe-os-paths {
	list-style: none;
	margin: clamp(30px, 3vw, 48px) 0 0;
	padding: 0;
	position: relative;
}
/* The spine. */
.gfe-os-paths::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: linear-gradient(180deg, rgba(194, 158, 95, 0) 0%, rgba(194, 158, 95, .6) 7%, rgba(194, 158, 95, .6) 93%, rgba(194, 158, 95, 0) 100%);
	transform-origin: 50% 0%;
}
.gfe-os-path { position: relative; }
/* The connector reaching out from the spine. */
.gfe-os-path::before {
	content: "";
	position: absolute;
	left: 31px;
	top: 50%;
	width: 30px;
	height: 1px;
	background: rgba(194, 158, 95, .6);
	transform-origin: 0% 50%;
	pointer-events: none;
}
/* The node where the connector leaves the spine. */
.gfe-os-path::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	border: 1px solid var(--gfe-gold);
	background: #E7E4D8;
	rotate: 45deg;
	transform-origin: 50% 50%;
	pointer-events: none;
	transition: background .45s var(--gfe-ease), border-color .45s var(--gfe-ease);
}

.gfe-os-path__link {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 36px;
	align-items: center;
	gap: clamp(14px, 1.6vw, 26px);
	padding: clamp(20px, 2.2vw, 30px) 8px clamp(20px, 2.2vw, 30px) 0;
	border-bottom: 1px solid rgba(59, 63, 49, .13);
	text-decoration: none;
	color: inherit;
}
.gfe-os-path:last-child .gfe-os-path__link { border-bottom: 0; }
.gfe-os-path__num {
	justify-self: end;
	font-family: var(--gfe-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	color: #6F7362;
	transition: color .45s var(--gfe-ease);
}
.gfe-os-path__body { min-width: 0; }
.gfe-os-path__name {
	display: block;
	font-family: var(--gfe-serif);
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.16;
	letter-spacing: -.01em;
	color: var(--gfe-ink);
	transition: transform .5s var(--gfe-ease), color .45s var(--gfe-ease);
}
.gfe-os-path__desc {
	display: block;
	margin-top: 8px;
	max-width: 56ch;
	font-family: var(--gfe-sans);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--gfe-ink-soft);
	transition: transform .5s var(--gfe-ease);
}
.gfe-os-path__go {
	justify-self: end;
	width: 22px;
	height: 10px;
	background: var(--gfe-ink-soft);
	-webkit-mask: var(--gfe-arrow) no-repeat 50% / contain;
	mask: var(--gfe-arrow) no-repeat 50% / contain;
	transition: transform .5s var(--gfe-ease), background-color .45s var(--gfe-ease);
}

.gfe-os-path__link:hover .gfe-os-path__name,
.gfe-os-path__link:focus-visible .gfe-os-path__name { color: #4E5340; transform: translateX(6px); }
.gfe-os-path__link:hover .gfe-os-path__desc,
.gfe-os-path__link:focus-visible .gfe-os-path__desc { transform: translateX(6px); }
.gfe-os-path__link:hover .gfe-os-path__num,
.gfe-os-path__link:focus-visible .gfe-os-path__num { color: #6B5329; }
.gfe-os-path__link:hover .gfe-os-path__go,
.gfe-os-path__link:focus-visible .gfe-os-path__go { transform: translateX(7px); background: #6B5329; }
.gfe-os-path:hover::after,
.gfe-os-path:focus-within::after { background: var(--gfe-gold); }
.gfe-os-path__link:focus-visible {
	outline: 2px solid #6B5329;
	outline-offset: 4px;
	border-radius: 2px;
}


/* --------------------------------------------------------------------------
   7. Katherinne
   -------------------------------------------------------------------------- */
.e-con.gfe-os-kath > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
	gap: clamp(28px, 4.4vw, 72px);
	align-items: center;
}
.e-con.gfe-os-kath__fig { padding: 0; width: 100%; position: relative; z-index: 1; }
.e-con.gfe-os-kath__copy { --gap: 0px; padding: 0; max-width: 580px; position: relative; z-index: 1; }

/* An architectural frame: the portrait sits inside a drawn corner, with a
   champagne rule stepping away from it. The crop is new to this page. */
.gfe-os-kath__frame { position: relative; width: min(100%, 390px); }
.gfe-os-kath__frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 40% 42%;
	border-radius: 2px;
}
.gfe-os-kath__frame::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -16px;
	top: -16px;
	width: 46%;
	height: 42%;
	border-top: 1px solid rgba(194, 158, 95, .6);
	border-left: 1px solid rgba(194, 158, 95, .6);
	transform-origin: 0% 0%;
	pointer-events: none;
}
.gfe-os-kath__frame::after {
	content: "";
	position: absolute;
	right: -16px;
	bottom: -16px;
	width: 46%;
	height: 42%;
	border-bottom: 1px solid rgba(194, 158, 95, .6);
	border-right: 1px solid rgba(194, 158, 95, .6);
	transform-origin: 100% 100%;
	pointer-events: none;
}
.gfe-os-kath .gfe-os-text { max-width: 56ch; }
.gfe-os-kath .e-con.gfe-actions { margin-top: 30px; padding: 0; justify-content: flex-start; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   8. Closing CTA and NAP
   -------------------------------------------------------------------------- */
.e-con.gfe-os-cta {
	--padding-top: clamp(64px, 6vw, 108px);
	--padding-bottom: clamp(64px, 6vw, 108px);
	text-align: center;
}
.e-con.gfe-os-cta > .e-con-inner { align-items: center; }
.gfe-os-cta .gfe-os-eyebrow .elementor-heading-title,
.gfe-os-cta .gfe-os-h2 .elementor-heading-title,
.gfe-os-cta .gfe-os-text { margin-inline: auto; }
.gfe-os-cta .gfe-os-text.elementor-widget-text-editor { max-width: 56ch; }
.gfe-os-cta .e-con.gfe-actions { margin-top: 32px; padding: 0; justify-content: center; flex-wrap: wrap; gap: 14px; }

.gfe-os-nap {
	margin: clamp(34px, 3.4vw, 52px) auto 0;
	padding-top: clamp(24px, 2.4vw, 34px);
	border-top: 1px solid rgba(226, 201, 151, .26);
	max-width: 720px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px clamp(20px, 3vw, 42px);
	font-family: var(--gfe-sans);
	font-size: 13.5px;
	line-height: 1.7;
	color: rgba(244, 240, 235, .82);
}
.gfe-os-nap span { display: inline-block; }
.gfe-os-nap a { color: rgba(244, 240, 235, .92); text-decoration: none; border-bottom: 1px solid rgba(226, 201, 151, .42); }
.gfe-os-nap a:hover { color: var(--gfe-paper); border-color: rgba(244, 240, 235, .72); }

/* --------------------------------------------------------------------------
   9. Motion — the signature is one path opening into several
   The trunk draws in, the junction sets, the branches fan out to their nodes.
   The index below repeats the same idea structurally: the spine draws down,
   then each connector reaches out to its destination in turn.
   -------------------------------------------------------------------------- */
@keyframes gfeOsRise {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes gfeOsDraw { to { stroke-dashoffset: 0; } }
@keyframes gfeOsFade { to { opacity: 1; } }
@keyframes gfeOsNode { to { opacity: 1; transform: none; } }
@keyframes gfeOsSpread { to { opacity: 1; transform: none; } }

/* Below the fold: viewport-triggered. */
.gfe-js .gfe-os-sec .gfe-os-line {
	stroke-dasharray: 1.002;
	stroke-dashoffset: 1.002;
	transition: stroke-dashoffset 1.5s var(--gfe-ease-out);
	transition-delay: var(--d, 0s);
}
.gfe-js .gfe-os-sec.is-in .gfe-os-line { stroke-dashoffset: 0; }

.gfe-js .gfe-os-sec .gfe-os-node {
	opacity: 0;
	transform: scale(.4);
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: opacity .7s var(--gfe-ease-out), transform .9s var(--gfe-ease-out);
	transition-delay: var(--d, 0s);
}
.gfe-js .gfe-os-sec.is-in .gfe-os-node { opacity: 1; transform: none; }

/* The ambient light opens outward from the origin. */
.gfe-js .e-con.gfe-os-spread::before {
	opacity: 0;
	transform: scaleX(.55);
	transition: opacity 1.5s var(--gfe-ease-out) .1s, transform 2s var(--gfe-ease-out) .1s;
}
.gfe-js .e-con.gfe-os-spread.is-in::before { opacity: 1; transform: none; }

/* Copy rises. */
.gfe-js .gfe-os-sec .gfe-os-eyebrow,
.gfe-js .gfe-os-sec .gfe-os-h1,
.gfe-js .gfe-os-sec .gfe-os-h2,
.gfe-js .gfe-os-sec .gfe-os-lead,
.gfe-js .gfe-os-sec .gfe-os-text,
.gfe-js .gfe-os-sec .gfe-os-rise,
.gfe-js .gfe-os-sec .e-con.gfe-actions {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity .9s var(--gfe-ease-out), transform 1s var(--gfe-ease-out);
}
.gfe-js .gfe-os-sec.is-in .gfe-os-eyebrow,
.gfe-js .gfe-os-sec.is-in .gfe-os-h1,
.gfe-js .gfe-os-sec.is-in .gfe-os-h2,
.gfe-js .gfe-os-sec.is-in .gfe-os-lead,
.gfe-js .gfe-os-sec.is-in .gfe-os-text,
.gfe-js .gfe-os-sec.is-in .gfe-os-rise,
.gfe-js .gfe-os-sec.is-in .e-con.gfe-actions { opacity: 1; transform: none; }
.gfe-js .gfe-os-sec.is-in .gfe-os-eyebrow { transition-delay: .05s; }
.gfe-js .gfe-os-sec.is-in .gfe-os-h1,
.gfe-js .gfe-os-sec.is-in .gfe-os-h2 { transition-delay: .14s; }
.gfe-js .gfe-os-sec.is-in .gfe-os-lead,
.gfe-js .gfe-os-sec.is-in .gfe-os-text { transition-delay: .24s; }
.gfe-js .gfe-os-sec.is-in .gfe-os-rise { transition-delay: .32s; }
.gfe-js .gfe-os-sec.is-in .e-con.gfe-actions { transition-delay: .4s; }

/* The eyebrow's branch opens from its own root. */
.gfe-js .gfe-os-sec .gfe-os-eyebrow .elementor-heading-title::before {
	opacity: 0;
	transform: scaleX(.2);
	transition: opacity .7s var(--gfe-ease-out) .3s, transform .9s var(--gfe-ease-out) .3s;
}
.gfe-js .gfe-os-sec.is-in .gfe-os-eyebrow .elementor-heading-title::before { opacity: 1; transform: none; }

/* The index: spine down, then each connector reaches its destination. */
.gfe-js .gfe-os-index .gfe-os-paths::before {
	transform: scaleY(0);
	transition: transform 1.25s var(--gfe-ease-out) .18s;
}
.gfe-js .gfe-os-index.is-in .gfe-os-paths::before { transform: none; }
.gfe-js .gfe-os-index .gfe-os-path::before {
	transform: scaleX(0);
	transition: transform .72s var(--gfe-ease-out);
	transition-delay: var(--d, 0s);
}
.gfe-js .gfe-os-index.is-in .gfe-os-path::before { transform: none; }
.gfe-js .gfe-os-index .gfe-os-path::after {
	opacity: 0;
	transform: rotate(45deg) scale(.35);
	transition: opacity .6s var(--gfe-ease-out), transform .8s var(--gfe-ease-out), background-color .45s var(--gfe-ease);
	transition-delay: var(--d, 0s);
}
.gfe-js .gfe-os-index.is-in .gfe-os-path::after { opacity: 1; transform: rotate(45deg); }
.gfe-js .gfe-os-index .gfe-os-path__link {
	opacity: 0;
	transform: translate3d(10px, 0, 0);
	transition: opacity .8s var(--gfe-ease-out), transform .9s var(--gfe-ease-out);
	transition-delay: calc(var(--d, 0s) + .16s);
}
.gfe-js .gfe-os-index.is-in .gfe-os-path__link { opacity: 1; transform: none; }

/* Portrait and its drawn corners. */
.gfe-js .gfe-os-kath .gfe-os-kath__frame img {
	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(1.03);
	transition: opacity 1.1s var(--gfe-ease-out) .12s, transform 1.6s var(--gfe-ease-out) .12s;
}
.gfe-js .gfe-os-kath.is-in .gfe-os-kath__frame img { opacity: 1; transform: none; }
.gfe-js .gfe-os-kath .gfe-os-kath__frame::before,
.gfe-js .gfe-os-kath .gfe-os-kath__frame::after {
	opacity: 0;
	transform: scale(.5);
	transition: opacity .9s var(--gfe-ease-out) .62s, transform 1.1s var(--gfe-ease-out) .62s;
}
.gfe-js .gfe-os-kath.is-in .gfe-os-kath__frame::before,
.gfe-js .gfe-os-kath.is-in .gfe-os-kath__frame::after { opacity: 1; transform: none; }

/* Above the fold the hero plays on load rather than waiting on the observer,
   the same pattern as the homepage, Brow Services and Lash Services heroes. */
.gfe-js .gfe-os-hero .gfe-os-eyebrow { animation: gfeOsRise .9s var(--gfe-ease-out) .06s both; }
.gfe-js .gfe-os-hero .gfe-os-h1 { animation: gfeOsRise 1s var(--gfe-ease-out) .16s both; }
.gfe-js .gfe-os-hero .gfe-os-lead { animation: gfeOsRise 1s var(--gfe-ease-out) .28s both; }
.gfe-js .gfe-os-hero .e-con.gfe-actions { animation: gfeOsRise 1s var(--gfe-ease-out) .4s both; }
.gfe-js .gfe-os-hero .gfe-os-eyebrow .elementor-heading-title::before { animation: gfeOsFade .7s var(--gfe-ease-out) .34s both; }
.gfe-js .gfe-os-hero .gfe-os-line { animation: gfeOsDraw 1.5s var(--gfe-ease-out) both; animation-delay: calc(var(--d, 0s) + .2s); }
.gfe-js .gfe-os-hero .gfe-os-node { animation: gfeOsNode .8s var(--gfe-ease-out) both; animation-delay: calc(var(--d, 0s) + .2s); }
.gfe-js .e-con.gfe-os-hero.gfe-os-spread::before { animation: gfeOsSpread 1.9s var(--gfe-ease-out) .2s both; }

/* The Elementor editor shows the finished page, never a blank canvas. */
.elementor-editor-active .gfe-os-sec .gfe-os-node,
.elementor-editor-active .gfe-os-index .gfe-os-path__link { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.e-con.gfe-os-intro > .e-con-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
	.gfe-os-path__link { grid-template-columns: 66px minmax(0, 1fr) 30px; }
}

@media (max-width: 900px) {
	.e-con.gfe-os-hero > .e-con-inner,
	.e-con.gfe-os-intro > .e-con-inner,
	.e-con.gfe-os-kath > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(22px, 3.4vw, 34px);
	}
	.e-con.gfe-os-hero__fig { order: -1; width: min(100%, 460px); }
	.e-con.gfe-os-kath__fig { width: min(100%, 340px); }
	.gfe-os-kath__frame { width: 100%; }
	.gfe-os-note { max-width: 620px; }
}

/* The index keeps its spine on a phone — it just draws tighter. The row stays
   one tap target with the name, the line of copy and the arrow all intact. */
@media (max-width: 760px) {
	.gfe-os-paths::before { left: 22px; }
	.gfe-os-path::before { left: 23px; width: 22px; }
	.gfe-os-path::after { left: 18px; }
	.gfe-os-path__link { grid-template-columns: 54px minmax(0, 1fr) 26px; gap: 12px; }
	.gfe-os-path__name { font-size: 21px; }
	.gfe-os-path__desc { font-size: 14px; margin-top: 7px; }
	.gfe-os-path__go { width: 19px; }
}

@media (max-width: 600px) {
	.e-con.gfe-os-sec { --padding-top: clamp(44px, 10vw, 62px); --padding-bottom: clamp(44px, 10vw, 62px); }
	.e-con.gfe-os-hero { --padding-top: calc(var(--gfe-header-h) + 34px); }
	.e-con.gfe-os-cta { --padding-top: clamp(52px, 12vw, 72px); --padding-bottom: clamp(52px, 12vw, 72px); }
	.gfe-sec .gfe-os-eyebrow .elementor-heading-title { letter-spacing: .26em; gap: 10px; }
	.gfe-sec .gfe-os-text.elementor-widget-text-editor { font-size: 15.8px; }
	.gfe-os-nap { gap: 8px 18px; font-size: 13px; }
}

@media (max-width: 400px) {
	.gfe-os-paths::before { left: 15px; }
	.gfe-os-path::before { left: 16px; width: 17px; }
	.gfe-os-path::after { left: 11px; width: 8px; height: 8px; margin-top: -4px; }
	.gfe-os-path__link { grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 10px; padding-right: 2px; }
	.gfe-os-path__num { font-size: 10px; letter-spacing: .14em; }
	.gfe-os-path__name { font-size: 19.5px; }
	.gfe-os-path__desc { font-size: 13.5px; }
	.gfe-os-path__go { width: 17px; }
	.gfe-os-note { padding: 20px 17px; }
}

/* --------------------------------------------------------------------------
   11. Reduced motion — the finished page, immediately
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gfe-js .gfe-os-sec .gfe-os-line {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		animation: none !important;
		transition: none !important;
	}
	.gfe-js .gfe-os-sec .gfe-os-node,
	.gfe-js .gfe-os-sec .gfe-os-eyebrow,
	.gfe-js .gfe-os-sec .gfe-os-h1,
	.gfe-js .gfe-os-sec .gfe-os-h2,
	.gfe-js .gfe-os-sec .gfe-os-lead,
	.gfe-js .gfe-os-sec .gfe-os-text,
	.gfe-js .gfe-os-sec .gfe-os-rise,
	.gfe-js .gfe-os-sec .e-con.gfe-actions,
	.gfe-js .gfe-os-sec .gfe-os-eyebrow .elementor-heading-title::before,
	.gfe-js .gfe-os-index .gfe-os-paths::before,
	.gfe-js .gfe-os-index .gfe-os-path__link,
	.gfe-js .gfe-os-index .gfe-os-path::before,
	.gfe-js .gfe-os-kath .gfe-os-kath__frame img,
	.gfe-js .gfe-os-kath .gfe-os-kath__frame::before,
	.gfe-js .gfe-os-kath .gfe-os-kath__frame::after,
	.gfe-js .e-con.gfe-os-spread::before {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	.gfe-js .gfe-os-index .gfe-os-path::after {
		opacity: 1 !important;
		transform: rotate(45deg) !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   PHASE TWO — the confirmed menu: beauty bundles and professional waxing.
   The page's existing vocabulary carries straight over: a path that opens.
   Here it says something specific — two strands converging into one node for
   a bundle, four separate branches reaching four precise points for waxing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Duration chip (public; prices never appear anywhere on this site)
   -------------------------------------------------------------------------- */
.gfe-os-dur {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 6px 15px 6px 12px;
	border: 1px solid rgba(107, 83, 41, .36);
	border-radius: 2px;
	background: rgba(255, 253, 247, .5);
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6B5329;
}
.gfe-os-dur::before {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	background: var(--gfe-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='7' cy='7' r='5.4'/%3E%3Cpath d='M7 3.6V7l2.4 1.7'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='7' cy='7' r='5.4'/%3E%3Cpath d='M7 3.6V7l2.4 1.7'/%3E%3C/svg%3E") no-repeat 50% / contain;
}
.gfe-os-dur--light {
	border-color: rgba(226, 201, 151, .42);
	background: rgba(255, 253, 247, .06);
	color: #E6D3AE;
}
.gfe-os-dur--light::before { background: #D2B27A; }

/* --------------------------------------------------------------------------
   B. Two ways to complete your routine
   -------------------------------------------------------------------------- */
.e-con.gfe-os-two > .e-con-inner { display: block; }
.gfe-os-two__head { max-width: 62ch; }
.gfe-os-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 60px);
	margin-top: clamp(30px, 3.2vw, 48px);
}
.gfe-os-duo__col {
	padding-top: clamp(22px, 2.2vw, 30px);
	border-top: 1px solid rgba(107, 83, 41, .38);
}
.gfe-os-duo__icon { display: block; width: 56px; height: 26px; margin-bottom: 16px; overflow: visible; }
.gfe-os-duo__t {
	margin: 0;
	font-family: var(--gfe-serif);
	font-size: clamp(23px, 2.1vw, 30px);
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--gfe-ink);
}
.gfe-os-duo__p {
	margin: 12px 0 0;
	max-width: 44ch;
	font-family: var(--gfe-sans);
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--gfe-ink-soft);
}
.gfe-os-jump {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #6B5329;
	text-decoration: none;
	border-bottom: 1px solid rgba(107, 83, 41, .38);
	padding-bottom: 4px;
	transition: color .4s var(--gfe-ease), border-color .4s var(--gfe-ease);
}
.gfe-os-jump::after {
	content: "";
	width: 18px;
	height: 9px;
	background: currentColor;
	-webkit-mask: var(--gfe-arrow) no-repeat 50% / contain;
	mask: var(--gfe-arrow) no-repeat 50% / contain;
	transition: transform .45s var(--gfe-ease);
}
.gfe-os-jump:hover, .gfe-os-jump:focus-visible { color: var(--gfe-ink); border-color: rgba(59, 63, 49, .5); }
.gfe-os-jump:hover::after, .gfe-os-jump:focus-visible::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   C. Featured bundle and the second bundle
   -------------------------------------------------------------------------- */
.e-con.gfe-os-feat {
	--padding-top: clamp(64px, 6vw, 112px);
	--padding-bottom: clamp(64px, 6vw, 112px);
}
.e-con.gfe-os-feat > .e-con-inner,
.e-con.gfe-os-half > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(30px, 4.4vw, 74px);
	align-items: center;
}
.e-con.gfe-os-half > .e-con-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.e-con.gfe-os-feat__fig,
.e-con.gfe-os-half__fig { padding: 0; width: 100%; position: relative; z-index: 1; }
.e-con.gfe-os-feat__copy,
.e-con.gfe-os-half__copy { --gap: 0px; padding: 0; max-width: 600px; position: relative; z-index: 1; }
.gfe-sec .gfe-os-feat__copy .gfe-os-h2 .elementor-heading-title { font-size: clamp(30px, 3.6vw, 52px); }
.gfe-os-feat .e-con.gfe-actions,
.gfe-os-half .e-con.gfe-actions { margin-top: 28px; padding: 0; justify-content: flex-start; flex-wrap: wrap; gap: 14px; }
.gfe-os-feat__fig .gfe-os-fig { aspect-ratio: 420 / 300; }
.gfe-os-half__fig .gfe-os-fig { aspect-ratio: 360 / 260; }

/* The quiet cross-link line under a bundle. */
.gfe-os-bridge {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(226, 201, 151, .28);
	font-family: var(--gfe-sans);
	font-size: 13.5px;
	line-height: 1.74;
	max-width: 50ch;
	color: rgba(244, 240, 235, .8);
}
.gfe-os-bridge a { color: #E6D3AE; text-decoration: underline; text-underline-offset: 3px; }
.gfe-os-bridge a:hover { color: var(--gfe-paper); }
.gfe-os-bridge--ink {
	border-top-color: rgba(107, 83, 41, .3);
	color: var(--gfe-ink-soft);
}
.gfe-os-bridge--ink a { color: #6B5329; }
.gfe-os-bridge--ink a:hover { color: var(--gfe-ink); }

/* --------------------------------------------------------------------------
   D. The waxing menu — the spine again, now reaching four precise areas.
   Each row is a menu line: the service on the left, its exact duration on the
   right, wrapping underneath rather than shrinking on a narrow phone.
   -------------------------------------------------------------------------- */
.gfe-os-path__row {
	padding: clamp(20px, 2.2vw, 30px) 8px clamp(20px, 2.2vw, 30px) 78px;
	border-bottom: 1px solid rgba(59, 63, 49, .13);
}
.gfe-os-path:last-child .gfe-os-path__row { border-bottom: 0; }
.gfe-os-path__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 18px;
}
.gfe-os-path__row .gfe-os-path__name { display: inline; }
.gfe-os-wdur {
	flex: none;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #6B5329;
}
.gfe-os-path__row .gfe-os-path__desc { margin-top: 10px; }

/* --------------------------------------------------------------------------
   E. Which service fits?
   -------------------------------------------------------------------------- */
.gfe-os-fits {
	list-style: none;
	margin: clamp(28px, 3vw, 44px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.gfe-os-fit__link {
	display: block;
	height: 100%;
	padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
	border: 1px solid rgba(59, 63, 49, .16);
	border-radius: 3px;
	background: rgba(253, 251, 246, .52);
	text-decoration: none;
	transition: border-color .45s var(--gfe-ease), background .45s var(--gfe-ease), transform .5s var(--gfe-ease);
}
.gfe-os-fit__q {
	display: block;
	font-family: var(--gfe-sans);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--gfe-ink-soft);
}
.gfe-os-fit__a {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	font-family: var(--gfe-serif);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.18;
	color: var(--gfe-ink);
	transition: color .45s var(--gfe-ease);
}
.gfe-os-fit__a::after {
	content: "";
	flex: none;
	width: 20px;
	height: 10px;
	background: #6B5329;
	-webkit-mask: var(--gfe-arrow) no-repeat 50% / contain;
	mask: var(--gfe-arrow) no-repeat 50% / contain;
	transition: transform .5s var(--gfe-ease);
}
.gfe-os-fit__link:hover,
.gfe-os-fit__link:focus-visible {
	border-color: rgba(194, 158, 95, .62);
	background: rgba(255, 253, 247, .8);
	transform: translateY(-2px);
}
.gfe-os-fit__link:hover .gfe-os-fit__a::after,
.gfe-os-fit__link:focus-visible .gfe-os-fit__a::after { transform: translateX(6px); }
.gfe-os-fit__link:focus-visible { outline: 2px solid #6B5329; outline-offset: 4px; }

/* --------------------------------------------------------------------------
   F. FAQs — native details/summary, keyboard-operable as shipped
   -------------------------------------------------------------------------- */
.gfe-os-faq { margin-top: clamp(26px, 2.6vw, 38px); width: 100%; }
.gfe-os-faq details { border-top: 1px solid rgba(59, 63, 49, .16); }
.gfe-os-faq details:last-of-type { border-bottom: 1px solid rgba(59, 63, 49, .16); }
.gfe-os-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--gfe-serif);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.35;
	color: var(--gfe-ink);
	transition: color .35s var(--gfe-ease);
}
.gfe-os-faq summary::-webkit-details-marker { display: none; }
.gfe-os-faq summary:hover { color: #6B5329; }
.gfe-os-faq summary:focus-visible { outline: 2px solid #3B3F31; outline-offset: 3px; }
/* The marker is a branch tip: it points onward, then turns down when open. */
.gfe-os-faq summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 5px;
	background: #6B5329;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .4s var(--gfe-ease);
}
.gfe-os-faq details[open] summary::after { transform: rotate(90deg); }
.gfe-os-faq__a {
	margin: 0;
	padding: 0 40px 22px 2px;
	font-size: 15px;
	line-height: 1.75;
	color: #565A4B;
	max-width: 54em;
}
.gfe-os-faq__a a { color: #6B5329; text-decoration: underline; text-underline-offset: 3px; }
.gfe-os-faq__a a:hover { color: var(--gfe-ink); }

/* --------------------------------------------------------------------------
   G. Motion for the phase-two components — same grammar, same easings
   -------------------------------------------------------------------------- */
.gfe-js .gfe-os-sec .gfe-os-dur,
.gfe-js .gfe-os-sec .gfe-os-bridge {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity .85s var(--gfe-ease-out), transform .95s var(--gfe-ease-out);
}
.gfe-js .gfe-os-sec.is-in .gfe-os-dur { opacity: 1; transform: none; transition-delay: .2s; }
.gfe-js .gfe-os-sec.is-in .gfe-os-bridge { opacity: 1; transform: none; transition-delay: .46s; }
.gfe-js .gfe-os-hero .gfe-os-dur { animation: gfeOsRise .9s var(--gfe-ease-out) .32s both; }

/* The two families arrive one after the other, left then right. */
.gfe-js .gfe-os-two .gfe-os-duo__col {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .85s var(--gfe-ease-out), transform .95s var(--gfe-ease-out);
	transition-delay: var(--d, 0s);
}
.gfe-js .gfe-os-two.is-in .gfe-os-duo__col { opacity: 1; transform: none; }

/* Waxing rows ride the same connectors as the linked rows do. */
.gfe-js .gfe-os-index .gfe-os-path__row {
	opacity: 0;
	transform: translate3d(10px, 0, 0);
	transition: opacity .8s var(--gfe-ease-out), transform .9s var(--gfe-ease-out);
	transition-delay: calc(var(--d, 0s) + .16s);
}
.gfe-js .gfe-os-index.is-in .gfe-os-path__row { opacity: 1; transform: none; }

/* Decision cards and FAQ rows settle in sequence. */
.gfe-js .gfe-os-fit-sec .gfe-os-fits > li,
.gfe-js .gfe-os-faq-sec .gfe-os-faq details {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .75s var(--gfe-ease-out), transform .85s var(--gfe-ease-out);
}
.gfe-js .gfe-os-fit-sec.is-in .gfe-os-fits > li,
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details { opacity: 1; transform: none; }
.gfe-js .gfe-os-fit-sec.is-in .gfe-os-fits > li:nth-child(1),
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(1) { transition-delay: .16s; }
.gfe-js .gfe-os-fit-sec.is-in .gfe-os-fits > li:nth-child(2),
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(2) { transition-delay: .24s; }
.gfe-js .gfe-os-fit-sec.is-in .gfe-os-fits > li:nth-child(3),
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(3) { transition-delay: .32s; }
.gfe-js .gfe-os-fit-sec.is-in .gfe-os-fits > li:nth-child(4),
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(4) { transition-delay: .4s; }
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(5) { transition-delay: .48s; }
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(6) { transition-delay: .56s; }
.gfe-js .gfe-os-faq-sec.is-in .gfe-os-faq details:nth-of-type(7) { transition-delay: .64s; }

.elementor-editor-active .gfe-os-sec .gfe-os-dur,
.elementor-editor-active .gfe-os-sec .gfe-os-bridge,
.elementor-editor-active .gfe-os-two .gfe-os-duo__col,
.elementor-editor-active .gfe-os-index .gfe-os-path__row,
.elementor-editor-active .gfe-os-fit-sec .gfe-os-fits > li,
.elementor-editor-active .gfe-os-faq-sec .gfe-os-faq details { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   H. Responsive for the phase-two components
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.e-con.gfe-os-feat > .e-con-inner,
	.e-con.gfe-os-half > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(22px, 3.4vw, 34px);
	}
	.e-con.gfe-os-feat__fig { order: -1; width: min(100%, 460px); margin-inline: auto; }
	.e-con.gfe-os-half__fig { width: min(100%, 400px); margin-inline: auto; }
	.gfe-os-bridge { max-width: none; }
}

@media (max-width: 760px) {
	.gfe-os-path__row { padding-left: 54px; }
}

@media (max-width: 640px) {
	.gfe-os-duo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.gfe-os-duo__p { max-width: none; }
	.gfe-os-fits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.gfe-os-wdur { letter-spacing: .12em; }
	.gfe-os-faq summary { font-size: 16.5px; gap: 14px; }
	.gfe-os-faq__a { padding-right: 8px; }
}

@media (max-width: 400px) {
	.gfe-os-path__row { padding-left: 40px; padding-right: 2px; }
	.gfe-os-dur { letter-spacing: .1em; padding: 6px 12px 6px 10px; }
}

/* --------------------------------------------------------------------------
   I. Reduced motion for the phase-two components
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gfe-js .gfe-os-sec .gfe-os-dur,
	.gfe-js .gfe-os-sec .gfe-os-bridge,
	.gfe-js .gfe-os-two .gfe-os-duo__col,
	.gfe-js .gfe-os-index .gfe-os-path__row,
	.gfe-js .gfe-os-fit-sec .gfe-os-fits > li,
	.gfe-js .gfe-os-faq-sec .gfe-os-faq details {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* The waxing caveat sits under the menu, at reading width. */
.gfe-os-wax .gfe-os-note { max-width: 640px; margin-top: clamp(26px, 2.6vw, 36px); }
