/* ==========================================================================
   GrowthStudioz, header and mobile drawer
   Tokens come from base.css. No raw hex, no magic numbers.
   ========================================================================== */

/* Held at the top by the template part around it (its own sticky never held:
   its parent was exactly its height). The bar slides up out of view when the
   page scrolls down and back when it scrolls up (Adarsh, 7th October 2026);
   header.js sets is-hidden. Only this bar moves, never the template part,
   which also holds the phone drawer: a transform on the drawer's ancestor
   would become its containing block and trap it. Out faster than in. */
.wp-site-blocks > .wp-block-template-part:has(.gs-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--gs-z-sticky);
	/* Its own box stays at the top while the bar is away and would block
	   clicks on the page under it; the bar and the drawer take them back. */
	pointer-events: none;
}

/* WordPress's admin bar stops being fixed on narrow phones and scrolls away,
   so the header sticks to the very top there. Logged-in editors only. */
@media screen and (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:has(.gs-header) {
		top: 0;
	}
}

.gs-header,
.gs-drawer {
	pointer-events: auto;
}

.gs-header {
	position: relative;
	z-index: var(--gs-z-sticky);
	background: var(--gs-surface);
	/* Permanent hairline separator, M Grey #DDDDDD via --gs-border. Always on,
	   not only once scrolled: it is part of the header, not a scroll state. */
	border-bottom: var(--gs-border-width) solid var(--gs-border);
	transition: transform 240ms var(--gs-ease-out);
}

.gs-header.is-hidden {
	transform: translateY(-100%);
	transition-duration: 180ms;
}

/* Still hides and shows, without the slide. */
@media (prefers-reduced-motion: reduce) {
	.gs-header {
		transition: none;
	}
}

/* No backdrop-filter here, ever. A filtered sticky header becomes the
   containing block for the position:fixed drawer and clips it. */

.gs-header__inner {
	display: flex;
	align-items: center;
	gap: var(--gs-space-5);
	min-height: 72px;
}

.gs-header__brand {
	display: inline-flex;
	align-items: center;
	color: var(--gs-ink);
	text-decoration: none;
	flex: none;
}

/* The wordmark holds its colour on hover and focus. Written with `.gs-header`
   in front: base.css's `a:not(.gs-btn):hover` (0,2,1) beat a bare
   `.gs-header__brand:hover` (0,2,0) and turned the whole logo red. */
.gs-header .gs-header__brand:hover,
.gs-header .gs-header__brand:focus-visible {
	color: var(--gs-ink);
}

.gs-logo {
	display: block;
	width: 168px;
	height: auto;
}

/* --- desktop nav ---------------------------------------------------------- */

.gs-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.gs-nav {
	display: flex;
	align-items: center;
	gap: var(--gs-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-nav li {
	position: relative;
	max-width: none;
}

.gs-nav a {
	display: block;
	padding: var(--gs-space-2) 0;
	color: var(--gs-ink);
	font-size: var(--gs-b4);
	font-weight: var(--gs-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

/* Current page: a red rule under the item. The accent earns this use because
   it carries meaning (location) rather than decoration. */
/* Drawn as a 2px background bar, not an inset box-shadow: at in-between
   display scales (125%) the shadow's anti-aliased side edges showed as thin
   vertical lines either side of the item. A bar has no side edges. The
   colour is a custom property so a division header can swap it. */
/* On a parent (Services, Divisions) the rule sits under the LABEL only, not
   the chevron, so the word is centred on it the way every plain link is
   (Adarsh, 25th September 2026). The label is the toggle's own <span>. */
.gs-nav > .current-menu-item > a,
.gs-nav > .current-menu-ancestor > a,
.gs-nav > .current-menu-ancestor > .gs-nav__toggle > span {
	background: linear-gradient(var(--gs-nav-rule, var(--gs-accent)), var(--gs-nav-rule, var(--gs-accent))) left bottom / 100% 2px no-repeat;
}

/* The toggle's vertical padding moves onto that label, so the label's box
   reaches the toggle's bottom edge and its rule lands at exactly the height
   of a plain link's. The toggle keeps the same overall size. */
.gs-nav > li > .gs-nav__toggle {
	padding-block: 0;
}

.gs-nav > li > .gs-nav__toggle > span {
	padding-block: var(--gs-space-2);
}

@media (hover: hover) and (pointer: fine) {
	.gs-nav a:hover {
		color: var(--gs-accent);
	}
}

/* --- desktop submenu ------------------------------------------------------ */

.gs-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: var(--gs-z-dropdown);
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-1);
	min-width: 220px;
	margin: 0;
	padding: var(--gs-space-3);
	list-style: none;
	background: var(--gs-surface);
	border: var(--gs-border-rule);
	border-radius: var(--gs-radius);
	box-shadow: 0 12px 32px rgb(0 0 0 / 8%);

	/* Never scale(0): the panel keeps a real shape and eases up into place. */
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition:
		opacity var(--gs-dur-hover) var(--gs-ease-out),
		transform var(--gs-dur-hover) var(--gs-ease-out),
		visibility 0s linear var(--gs-dur-hover);
}

/* Focus INSIDE the panel keeps it open while tabbing through its links; focus
   on the parent button alone does not, or Escape (which returns focus to that
   button) could never close it. The button opens it with a click (is-open). */
.gs-nav li:hover > .sub-menu,
.gs-nav .sub-menu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.gs-nav .sub-menu a {
	padding: var(--gs-space-2) var(--gs-space-3);
	border-radius: var(--gs-radius-sm);
	white-space: normal;
}

/* Inside a dropdown the current page is marked by colour, not by the bar's
   underline, which ran the full width of the panel. */
.gs-nav .sub-menu .current-menu-item > a {
	color: var(--gs-accent);
}

/* Hover: the text turns red, as the top-level links do; no grey box behind
   it (Adarsh, 6th October 2026). */
@media (hover: hover) and (pointer: fine) {
	.gs-nav .sub-menu a:hover {
		background: none;
		color: var(--gs-accent);
	}
}

/* --- parents that only open a submenu ------------------------------------ */

/* Services and Divisions do not go to a page; they open their submenu
   (Adarsh, 25th September 2026). A button dressed as a nav link, with a
   chevron that turns when the submenu is open. Hover opens it as before;
   a click or tap opens it too (is-open, from header.js), for touch screens
   and keyboards. */
.gs-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--gs-space-1);
	padding: var(--gs-space-2) 0;
	border: 0;
	background: none;
	color: var(--gs-ink);
	font: inherit;
	font-size: var(--gs-b4);
	font-weight: var(--gs-weight-medium);
	white-space: nowrap;
	cursor: pointer;
}

.gs-nav__toggle .gs-icon {
	transition: rotate var(--gs-dur-hover) var(--gs-ease-out);
}

.gs-nav li:hover > .gs-nav__toggle .gs-icon,
.gs-nav li.is-open > .gs-nav__toggle .gs-icon {
	rotate: 180deg;
}

.gs-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
	.gs-nav__toggle:hover {
		color: var(--gs-accent);
	}
}

/* --- right-hand actions --------------------------------------------------- */

.gs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gs-space-5);
	margin-inline-start: auto;
	flex: none;
}

.gs-header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--gs-space-2);
	color: var(--gs-ink);
	font-size: var(--gs-b4);
	text-decoration: none;
	white-space: nowrap;
}

.gs-icon {
	flex: none;
}

.gs-header__cta {
	white-space: nowrap;
}

/* --- burger --------------------------------------------------------------- */

.gs-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-start: calc(var(--gs-space-2) * -1);
	padding: 0;
	border: 0;
	border-radius: var(--gs-radius-sm);
	background: none;
	color: var(--gs-ink);
	font-size: var(--gs-b1);
	cursor: pointer;
	flex: none;
}

/* ==========================================================================
   Breakpoints

   The desktop nav needs real room. Measured on the live header: logo 168px,
   nav 471px, actions 329px, plus a 60px gutter each side and the flex gaps
   comes to ~1136px before anything is tight. It collapses below 1200px, which
   is that measurement rounded up to the next hundred rather than a guess.
   ========================================================================== */

@media (max-width: 1199px) {
	.gs-header__nav {
		display: none;
	}

	.gs-header__burger {
		display: inline-flex;
	}

	.gs-header__phone {
		display: none;
	}

	.gs-header__inner {
		min-height: 60px;
		gap: var(--gs-space-3);
	}

	.gs-logo {
		width: 140px;
	}

	/* The mockup puts the burger left of the wordmark, not opposite it. */
	.gs-header__brand {
		margin-inline-end: auto;
	}
}

@media (max-width: 480px) {
	.gs-logo {
		width: 120px;
	}

	/* THE ONE DOCUMENTED EXCEPTION to the sitewide button size.

	   Header chrome is not a page button: the bar is 60px tall and already
	   carries a 120px wordmark and a 40px burger, so the sitewide 20px button
	   at 16/32 padding (54px tall, 242px wide) cannot fit beside them on a
	   375px screen. It is written as an override of the button's OWN tokens
	   rather than as raw font-size and padding, so it still reads as the same
	   component and cannot drift from it. Nothing else on the site may do
	   this. */
	.gs-header__cta {
		--gs-btn-size: var(--gs-b5);
		--gs-btn-pad-y: var(--gs-space-2);
		--gs-btn-pad-x: var(--gs-space-3);
	}
}

/* The narrowest phones (320): burger, wordmark and button ran 9px past the
   screen. The button gives up 4px of padding a side and 8px between label and
   arrow; label, logo and height stay (Adarsh, 6th October 2026). */
@media (max-width: 359px) {
	.gs-header__cta {
		--gs-btn-pad-x: var(--gs-space-2);
		gap: var(--gs-space-1);
	}
}

/* ==========================================================================
   Drawer
   ========================================================================== */

.gs-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--gs-z-drawer);
}

/* WordPress's flow layout gives every block after the first a 24px top margin,
   and the drawer is the second child of the header part, so it opened 24px
   down with a strip of the page showing above it. The doubled class outranks
   the layout rule without !important. */
.gs-drawer.gs-drawer {
	margin: 0;
}

.gs-drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: var(--gs-z-drawer-backdrop);
	background: rgb(0 0 0 / 40%);
	opacity: 0;
	transition: opacity var(--gs-dur-exit) var(--gs-ease-out);
}

.gs-drawer.is-open .gs-drawer__backdrop {
	opacity: 1;
	transition-duration: var(--gs-dur-enter);
}

.gs-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: var(--gs-z-drawer);
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);
	width: min(360px, 88vw);
	padding: var(--gs-space-5);
	background: var(--gs-surface);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Percentage translate: moves by its own width whatever that resolves to. */
	transform: translateX(100%);
	transition: transform var(--gs-dur-exit) var(--gs-ease-drawer);
}

.gs-drawer.is-open .gs-drawer__panel {
	transform: translateX(0);
	/* Enter is slower than exit: opening is the moment worth seeing. */
	transition-duration: var(--gs-dur-enter);
}

.gs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gs-space-4);
	padding-bottom: var(--gs-space-4);
	border-bottom: var(--gs-border-rule);
}

.gs-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--gs-radius-sm);
	background: none;
	color: var(--gs-ink);
	font-size: var(--gs-b1);
	cursor: pointer;
	flex: none;
}

.gs-drawer__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-drawer__list li {
	max-width: none;
}

.gs-drawer__list > li > a {
	display: block;
	padding: var(--gs-space-3) 0;
	color: var(--gs-ink);
	font-size: var(--gs-b2);
	font-weight: var(--gs-weight-medium);
	text-decoration: none;
}

.gs-drawer__list .current-menu-item > a {
	color: var(--gs-accent);
}

.gs-drawer__list .sub-menu {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--gs-space-3);
	padding: 0 0 0 var(--gs-space-4);
	list-style: none;
}

.gs-drawer__list .sub-menu a {
	display: block;
	padding: var(--gs-space-2) 0;
	color: var(--gs-body);
	font-size: var(--gs-b3);
	text-decoration: none;
}

/* In the phone menu the same parents are an accordion: the submenu stays
   folded until its parent is tapped. */
.gs-drawer__list .gs-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--gs-space-3) 0;
	border: 0;
	background: none;
	color: var(--gs-ink);
	font: inherit;
	font-size: var(--gs-b2);
	font-weight: var(--gs-weight-medium);
	text-align: start;
	cursor: pointer;
}

.gs-drawer__list .gs-nav__toggle .gs-icon {
	transition: rotate var(--gs-dur-hover) var(--gs-ease-out);
}

.gs-drawer__list li.is-open > .gs-nav__toggle .gs-icon {
	rotate: 180deg;
}

.gs-drawer__list .menu-item-has-children > .sub-menu {
	display: none;
}

.gs-drawer__list .menu-item-has-children.is-open > .sub-menu {
	display: flex;
}

/* Items cascade in behind the panel. Decorative, short, and never blocking:
   the links are usable from the first frame. */
.gs-drawer__list > li {
	opacity: 0;
	transform: translateX(8px);
}

.gs-drawer.is-open .gs-drawer__list > li {
	opacity: 1;
	transform: translateX(0);
	transition:
		opacity var(--gs-dur-exit) var(--gs-ease-out),
		transform var(--gs-dur-exit) var(--gs-ease-out);
	transition-delay: calc(60ms + (var(--gs-i, 0) * 40ms));
}

.gs-drawer__list > li:nth-child(1) { --gs-i: 0; }
.gs-drawer__list > li:nth-child(2) { --gs-i: 1; }
.gs-drawer__list > li:nth-child(3) { --gs-i: 2; }
.gs-drawer__list > li:nth-child(4) { --gs-i: 3; }
.gs-drawer__list > li:nth-child(5) { --gs-i: 4; }
.gs-drawer__list > li:nth-child(6) { --gs-i: 5; }
.gs-drawer__list > li:nth-child(7) { --gs-i: 6; }

.gs-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-4);
	margin-block-start: auto;
	padding-top: var(--gs-space-4);
	border-top: var(--gs-border-rule);
}

.gs-drawer__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--gs-space-2);
	color: var(--gs-ink);
	font-size: var(--gs-b3);
	text-decoration: none;
}

/* Scroll lock. Applied to the root rather than body so it survives themes that
   also set overflow on body. */
.gs-drawer-open {
	overflow: hidden;
}

@media (min-width: 1200px) {
	.gs-drawer {
		display: none;
	}
}

/* ==========================================================================
   Reduced motion
   Crossfade, no travel. The drawer still works; it just stops moving.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-drawer__panel {
		transform: none;
		opacity: 0;
		transition: opacity var(--gs-dur-exit) ease;
	}

	.gs-drawer.is-open .gs-drawer__panel {
		opacity: 1;
	}

	.gs-drawer__list > li {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gs-nav .sub-menu {
		transform: translate(-50%, 0);
	}
}

/* ==========================================================================
   Division swap

   On a page tied to a division (the "Division" box on the page), the header
   loads white with the GrowthStudioz logo. After --gs-hdr-delay seconds the
   division's colour sweeps across it left to right like a blowtorch: a hot
   white-to-amber edge at a slight angle, licking as it goes, with the colour
   left behind it (Adarsh, 29th September 2026, option 4 of six previewed;
   it was a rising water wave before). The logo rolls like a die to the
   division's logo, and the links, phone, button and burger turn the
   division's header text colour, each as the sweep passes it; the burger
   also turns 180 degrees. Every page load.

   The script adds the classes and works out when each part turns; the
   drawing is all here.
   ========================================================================== */

/* Where the sweep's hot edge is, registered so it can be transitioned. A
   browser without @property simply fills at once with no sweep. */
@property --gs-sweep {
	syntax: "<length>";
	inherits: true;
	initial-value: -140px;
}

/* DESKTOP dials. The phone block below declares its own copy of each. */
.gs-header--division,
.gs-drawer--division {
	/* Halved, wait included (Adarsh, 7th October 2026; was 3 / 1 / 0.6). */
	--gs-hdr-delay: 1.5;      /* seconds before the swap starts */
	--gs-hdr-fill: 0.5;       /* seconds for the sweep to cross the header */
	--gs-hdr-flip: 0.3;       /* seconds for the logo roll and burger turn */
	--gs-hdr-divlogo: 40px;   /* division logo height */
}

@media (max-width: 767px) {
	/* PHONE dials. */
	.gs-header--division,
	.gs-drawer--division {
		--gs-hdr-delay: 1.5;    /* was 3 */
		--gs-hdr-fill: 0.4;     /* was 0.8 */
		--gs-hdr-flip: 0.3;     /* was 0.6 */
		--gs-hdr-divlogo: 30px;
	}
}

/* --- the sweep ------------------------------------------------------------ */

/* Clipped to the header. */
.gs-header__fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.gs-header.is-div-filling .gs-header__fill {
	--gs-sweep: var(--gs-sweep-to, 4000px);
	/* Even speed, so the script can time each part by where it sits. */
	transition: --gs-sweep calc(var(--gs-hdr-fill) * 1s) linear;
}

.gs-header--division .gs-header__inner {
	position: relative;
	z-index: 1;
}

/*
 * The colour behind the edge, then the hot edge: amber warmed toward the
 * division's own colour, white-hot at the very front. The layer runs a
 * little past the header on every side and the header clips it, because the
 * licking filter (#gs-lick, printed with the header, a flickering noise
 * displacement) would otherwise pull white in at the edges. The filter
 * comes off once the sweep is done, leaving a plain solid header.
 */
.gs-header__torch {
	--gs-torch-glow: color-mix(in oklch, var(--gs-div-color) 25%, #FFB53D);

	position: absolute;
	inset: -10px -24px;
	background: linear-gradient(100deg,
		var(--gs-div-color) 0,
		var(--gs-div-color) calc(var(--gs-sweep) - 70px),
		var(--gs-torch-glow) calc(var(--gs-sweep) - 22px),
		#FFF1CC calc(var(--gs-sweep) - 6px),
		transparent var(--gs-sweep));
}

.gs-header.is-div-filling .gs-header__torch {
	filter: url(#gs-lick);
}

.gs-header.is-div-done .gs-header__torch {
	filter: none;
}

/* --- the die -------------------------------------------------------------- */

/* Two faces in one slot. The slot takes the wider of the two, so nothing
   beside the logo moves when they swap. */
.gs-header--division .gs-header__brand {
	perspective: 500px;
}

.gs-header__die {
	--gs-die-d: calc(var(--gs-hdr-divlogo) / 2);

	display: grid;
	align-items: center;
	justify-items: start;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--gs-die-d) * -1)) rotateX(0deg);
	transition: transform calc(var(--gs-hdr-flip) * 1s) cubic-bezier(0.3, 0.8, 0.25, 1);
}

.gs-header__face {
	grid-area: 1 / 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gs-header__face--gs {
	transform: translateZ(var(--gs-die-d));
}

/* Underneath, facing down, until the die rolls it up to the front. */
.gs-header__face--div {
	transform: rotateX(-90deg) translateZ(var(--gs-die-d));
}

.gs-header.is-div-on .gs-header__die {
	transform: translateZ(calc(var(--gs-die-d) * -1)) rotateX(90deg);
}

/* The outgoing GrowthStudioz logo turns the header text colour as the fill
   reaches it, so it rolls away visibly on a dark division (on Narrativ's
   black it stayed black and the roll could not be seen). */
.gs-header__face--gs {
	transition: color var(--gs-dur-hover) ease;
}

.gs-header.is-div-on .gs-header__face--gs {
	color: var(--gs-div-ink);
}

/* The hairline under the header joins the fill instead of staying grey under
   the coloured bar. */
.gs-header--division {
	transition: border-bottom-color var(--gs-dur-hover) ease;
}

.gs-header.is-div-on {
	border-bottom-color: var(--gs-div-color);
}

/* The division logo in one colour, through the #gs-divink filter printed in
   the header: dark parts in the header text colour, light parts clear. */
.gs-divmark {
	display: block;
	width: auto;
	max-width: none;
	height: var(--gs-hdr-divlogo);
	aspect-ratio: var(--gs-divmark-ratio);
	filter: url(#gs-divink);
	/* Trims the last pixel column: Narrativ's file draws its artwork as a
	   repeating image fill, and the repeat leaves a 1px sliver of the N's
	   left edge down the right-hand side. */
	clip-path: inset(0 1px 0 0);
}

.gs-svgdefs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* --- text, button, burger ------------------------------------------------- */

.gs-header--division .gs-nav > li > a,
.gs-header--division .gs-nav > li > .gs-nav__toggle,
.gs-header--division .gs-header__phone,
.gs-header--division .gs-header__burger {
	transition: color var(--gs-dur-hover) ease;
}

.gs-header.is-div-on .gs-nav > li > a,
.gs-header.is-div-on .gs-nav > li > .gs-nav__toggle,
.gs-header.is-div-on .gs-header__phone,
.gs-header.is-div-on .gs-header__burger {
	color: var(--gs-div-ink);
}

/* The red current-page rule would vanish on a red header; it takes the text
   colour instead. */
.gs-header.is-div-on .gs-nav {
	--gs-nav-rule: var(--gs-div-ink);
}

@media (hover: hover) and (pointer: fine) {
	.gs-header.is-div-on .gs-nav > li > a:hover,
	.gs-header.is-div-on .gs-nav > li > .gs-nav__toggle:hover {
		color: var(--gs-div-ink);
		opacity: 0.7;
	}
}

/* The button's own tokens, so it stays the same component: outlined in the
   text colour, filling with it on hover. */
.gs-header.is-div-on .gs-header__cta {
	--btn-ink: var(--gs-div-ink);
	--btn-line: var(--gs-div-ink);
	--btn-fill-hover: var(--gs-div-ink);
	--btn-ink-hover: var(--gs-div-color);
}

.gs-header--division .gs-header__burger .gs-icon {
	transition: rotate calc(var(--gs-hdr-flip) * 1s) cubic-bezier(0.3, 0.8, 0.25, 1);
}

.gs-header.is-div-on .gs-header__burger .gs-icon {
	rotate: 180deg;
}

/* --- phone menu ----------------------------------------------------------- */

/* Once the header has swapped, the menu opens already in the division's
   colour with its logo. No fill replay: it is simply that colour. */
.gs-drawer__logo-div {
	display: none;
}

.gs-drawer.is-div-on .gs-drawer__logo-gs {
	display: none;
}

.gs-drawer.is-div-on .gs-drawer__logo-div {
	display: block;
}

.gs-drawer.is-div-on .gs-drawer__head {
	margin: calc(var(--gs-space-5) * -1) calc(var(--gs-space-5) * -1) 0;
	padding: var(--gs-space-5) var(--gs-space-5) var(--gs-space-4);
	background: var(--gs-div-color);
	border-bottom-color: transparent;
}

.gs-drawer.is-div-on .gs-drawer__close {
	color: var(--gs-div-ink);
}

/* --- reduced motion ------------------------------------------------------- */

/* Same swap at the same moment, with nothing moving: no sweep, no licking
   edge, no roll, no turn. */
@media (prefers-reduced-motion: reduce) {
	.gs-header.is-div-filling .gs-header__fill,
	.gs-header__die,
	.gs-header--division .gs-header__burger .gs-icon {
		transition: none !important;
	}

	.gs-header.is-div-filling .gs-header__torch {
		filter: none;
	}
}