/* Site header. Source: docs/design/kitchensmiths-redesign.html lines 45-187. */

.ks-shell {
	max-width: var(--ks-content-max);
	margin: 0 auto;
	padding: 0 var(--ks-gutter);
}

.ks-header {
	position: sticky;
	top: 0;
	z-index: 800;
}

/* --- Utility bar ------------------------------------------------------- */

.ks-utility {
	background: var(--ks-navy-deep);
	color: rgba(245, 242, 236, 0.66);
}

.ks-utility-inner {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ks-utility-tagline,
.ks-utility-right span {
	font: 300 13px/1 Jost, sans-serif;
	letter-spacing: 0.03em;
}

.ks-utility-right {
	display: flex;
	align-items: center;
	gap: 28px;
}

.ks-utility-phone {
	font: 500 13px/1 Jost, sans-serif;
	letter-spacing: 0.04em;
	color: var(--ks-cream);
	text-decoration: none;
}

/* --- Masthead ---------------------------------------------------------- */

.ks-masthead {
	background: var(--ks-navy);
}

.ks-masthead-inner {
	height: 96px;
	display: flex;
	align-items: center;
	gap: 48px;
}

.ks-logo img {
	display: block;
	height: 34px;
	width: auto;
}

.ks-nav {
	display: flex;
	align-items: center;
	gap: 34px;
	margin-left: auto;
}

.ks-nav-link {
	font: 400 13px/1 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-cream);
	text-decoration: none;
}

.ks-nav-link:hover,
.ks-nav-link[aria-expanded="true"] {
	color: var(--ks-brass);
}

.ks-nav-cta {
	font: 500 12px/1 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-navy-deep);
	background: var(--ks-brass);
	padding: 16px 26px;
	text-decoration: none;
}

.ks-nav-cta:hover {
	background: var(--ks-cream);
}

/* --- Mega-menu panels -------------------------------------------------- */

.ks-mega-panel {
	position: absolute;
	/* Explicit, rather than relying on static position: utility bar (44px)
	   + masthead (96px) = 140px. Each panel now renders in the DOM
	   immediately after its trigger link, inside .ks-nav, so keyboard tab
	   order reaches its links -- without this, an absolutely positioned box
	   with no `top` falls back to its position in normal flow, which would
	   place the panel near the top of the masthead instead of below it. */
	top: 140px;
	left: 0;
	right: 0;
	background: var(--ks-navy-deep);
	color: var(--ks-cream);
	box-shadow: 0 30px 60px -30px rgba(22, 34, 42, 0.5);
}

.ks-mega-panel[hidden] {
	display: none;
}

.ks-mega-inner {
	padding-top: 46px;
	padding-bottom: 52px;
	display: grid;
	gap: 44px;
}

.ks-mega-inner--kitchens {
	grid-template-columns: repeat(4, minmax(0, 1fr)) 340px;
}

.ks-mega-inner--work {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.ks-mega-inner--about {
	grid-template-columns: repeat(3, minmax(0, 1fr)) 340px;
}

.ks-mega-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ks-mega-inner--work .ks-mega-col {
	justify-content: center;
	border-left: 1px solid rgba(245, 242, 236, 0.16);
	padding-left: 32px;
}

.ks-mega-label {
	font: 500 11px/1 Jost, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ks-brass);
}

.ks-mega-link {
	font: 300 15px/1 Jost, sans-serif;
	color: rgba(245, 242, 236, 0.82);
	text-decoration: none;
}

.ks-mega-link:hover {
	color: var(--ks-cream);
}

/* --- Promo and project cards ------------------------------------------- */

.ks-mega-promo,
.ks-mega-card {
	display: block;
	text-decoration: none;
}

.ks-mega-promo-image,
.ks-mega-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: rgba(245, 242, 236, 0.08);
}

/*
 * The image INSIDE that box, which is a different element and needs its own
 * rule. `object-fit` above does nothing: these two selectors are <span>s, and
 * object-fit only applies to replaced elements. While the spans were empty
 * placeholders that never showed — they are 4:3 tinted rectangles and the
 * property was inert but harmless. The moment a real photograph went into one
 * it rendered at its own aspect ratio inside a 4:3 box, and a 16:9 kitchen
 * left a quarter of the card as a dark band between the picture and its title.
 *
 * So the fit moves to the element that can honour it, and any photograph now
 * fills the card whatever shape it arrives in — which is the point of a fixed
 * ratio on the box.
 */
.ks-mega-promo-image img,
.ks-mega-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-mega-promo-title {
	display: block;
	margin-top: 16px;
	font-family: Marcellus, serif;
	font-size: 19px;
	color: var(--ks-cream);
}

.ks-mega-promo-text {
	display: block;
	margin-top: 6px;
	font: 300 14px/1.6 Jost, sans-serif;
	color: rgba(245, 242, 236, 0.6);
}

.ks-mega-card-title {
	display: block;
	margin-top: 14px;
	font-family: Marcellus, serif;
	font-size: 18px;
	color: var(--ks-cream);
}

/* --- Hamburger and drawer (Task 13) --------------------------------------
   Source: docs/design/kitchensmiths-redesign.html lines 1015-1132, the
   design's dedicated 390px mobile screen. Below 1024px the desktop nav's
   pointer-driven mega panels are unreachable (see the narrow-widths block
   below), so a hamburger opens a full-screen drawer instead. The drawer and
   hamburger are only ever shown below 1024px, and only once JS has
   confirmed it can run (html.js, promoted from html.no-js by an inline
   script in header.php) -- see assets/js/mega-menu.js for why: without JS
   the drawer cannot open or close, so the CSS instead leaves the existing
   .ks-nav strip in place rather than showing a dead button. */

.ks-hamburger,
.ks-drawer-toggle,
.ks-drawer-link,
.ks-drawer-colrow,
.ks-drawer-back,
.ks-drawer-close {
	/* Mobile Chrome/Safari's default tap-highlight is a bright
	   magenta-tinted overlay unrelated to this palette; suppress it so a tap
	   shows the (intentional) focus outline instead of a flash that reads
	   like a colour bug. */
	-webkit-tap-highlight-color: transparent;
}

/* The box is 44x44; the mark inside it stays 24px wide and three hairlines
   tall. Before this the button WAS the mark — three 1px bars and two 5px gaps
   measured 24x13, which is the only way into the navigation on a phone and
   which fails WCAG 2.2 SC 2.5.8 (24x24) outright. `align-items: center` keeps
   the bars centred in the larger hit area so nothing moves visually.
   `.ks-social-link` in style.css has carried 40x40 and the comment "the
   smallest thing a thumb should have to hit" since it was written; this is the
   same reasoning applied to the control that matters most. */
.ks-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.ks-hamburger-bar {
	display: block;
	height: 1px;
	width: 24px;
	background: var(--ks-cream);
}

.ks-utility-condensed {
	display: none;
	font: 300 11px/1 Jost, sans-serif;
	color: rgba(245, 242, 236, 0.6);
}

/* The drawer arrives from the right rather than replacing the screen in one
   frame. 260ms and the same curve as the mega panel's entrance, for the same
   reason given there -- long enough to show which direction it came from and
   therefore where the close button sends it back to, short enough not to tax a
   navigation people repeat.

   Unlike the mega panel this one DOES animate out. A full-screen overlay that
   vanishes leaves the eye with no idea whether the page underneath changed;
   sliding it back off the edge answers that. `hidden` is restored once the
   transition ends, so the resting state is unchanged. */
.ks-drawer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 900;
	flex-direction: column;
	/* The drawer no longer scrolls: each level scrolls itself (.ks-drawer-body
	   and .ks-drawer-sub). A single scroller spanning both would carry the
	   root's scroll position into the pane that covers it, so drilling into
	   "Kitchens" from halfway down the list would open its pane already
	   scrolled -- and `hidden` alone would return you to the top of the root
	   list on the way back out. `hidden` here also stops a pane sliding in from
	   the right showing as a horizontal scrollbar while it travels. */
	overflow: hidden;
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.ks-drawer.is-open {
	transform: none;
}

.ks-drawer[hidden] {
	display: none;
}

.ks-drawer-masthead {
	background: var(--ks-navy);
	height: 64px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* Not space-between: see .ks-masthead-inner below. The three children size
	   themselves so the logo lands dead centre, and this masthead and the
	   page's have to agree about where that is.

	   22px, not the 20px this used to carry, so the close button's 44px box
	   sits on the same gutter as the drawer body below it -- which is what puts
	   the close glyph, the accordion chevrons and the column chevrons all on one
	   vertical line 44px in from the right edge. */
	padding: 0 22px;
}

.ks-drawer-masthead .ks-logo {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.ks-drawer-masthead .ks-logo img {
	display: block;
	height: 22px;
	width: auto;
}

/* 44x44 to match the phone button opposite it, which is what centres the logo
   between them -- and, incidentally, what gives the close button a target
   meeting WCAG 2.2 SC 2.5.8. It was previously a bare 22px glyph with no
   padding: a 14x22 hit area in the corner of a touchscreen. */
.ks-drawer-close {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 300 26px/1 Jost, sans-serif;
	color: var(--ks-cream);
	background: transparent;
	border: 0;
	padding: 0;
	line-height: 1;
	cursor: pointer;
}

/* --- The mobile masthead's tap-to-call button ---------------------------
   Hidden by default so the desktop masthead is untouched; the narrow-width
   block below turns it on. The utility bar carries the number in text at
   desktop widths, and that bar is hidden below 1024px -- which is exactly
   where this button appears, so the number is reachable at every width. */
/* CREAM, MATCHING THE HAMBURGER, not brass. The masthead already sorts its
   colours by job: cream is chrome -- the hamburger's bars, the drawer's close,
   the logo -- and brass is action and accent, the "Book a design consultation"
   button and the chevrons. A brass handset opposite a cream hamburger broke
   that twice over: it made the two controls flanking the logo read as different
   weights when they are a matched pair, and it spent the accent colour on an
   icon that then competed with the brass CTA a few rows below it. */
.ks-masthead-phone {
	display: none;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--ks-cream);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.ks-masthead-phone .ks-phone-icon {
	display: block;
}

/* hello-elementor's `a:hover { color: #336 }` would otherwise take the icon
   navy-on-navy on tap. Same reason as the block below. */
.ks-header .ks-masthead-phone:hover,
.ks-header .ks-masthead-phone:focus,
.ks-drawer .ks-masthead-phone:hover,
.ks-drawer .ks-masthead-phone:focus {
	color: var(--ks-cream);
	background-color: transparent;
}

/* The root level. Scrolls on its own now that .ks-drawer itself does not --
   see the pane rule below for why that moved. */
.ks-drawer-body {
	background: var(--ks-navy-deep);
	padding: 24px 22px 40px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}

.ks-drawer-list {
	display: flex;
	flex-direction: column;
}

/* --- Level one: five rows that expand in place ---------------------------
   A top-level row. Either a plain .ks-drawer-link, or a .ks-drawer-row holding
   a link to the section page plus the chevron that expands it -- the two look
   identical, which is the point: the split is an extra destination, not an
   extra kind of row. The rule below therefore puts the border and the vertical
   rhythm on whichever element IS the row. */
.ks-drawer-row,
.ks-drawer-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid rgba(245, 242, 236, 0.14);
}

.ks-drawer-grouplink,
.ks-drawer-link {
	padding: 20px 0;
	border: 0;
	background: transparent;
	font-family: Marcellus, serif;
	font-size: 24px;
	/* The design sets no line-height on these rows (line 1127), so they take
	   Marcellus's normal ~1.2 and stand 69px tall. Inherited, they were taking
	   36px and standing at 77 -- eight pixels each, forty across the five
	   top-level rows, on a screen 844px tall. */
	line-height: 1.2;
	color: var(--ks-cream);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Takes the row minus the chevron, so the whole width of the title reads as
   one target rather than only the glyphs themselves. */
.ks-drawer-grouplink {
	flex: 1 1 auto;
	min-width: 0;
}

/* The chevron's button. 44x44 (WCAG 2.2 SC 2.5.8), sitting flush to the
   drawer's 22px gutter -- which puts the mark at its centre, 44px in from the
   right edge, the same place the close button's glyph and the column rows'
   chevrons sit. See the gutter note above .ks-drawer-body. */
.ks-drawer-toggle {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* TWO CHEVRONS, TWO MEANINGS, and the drawer uses both because it has two
   mechanisms. Pointing DOWN means "expands here" -- the five top-level rows,
   which stay in place and push the list open beneath them. Pointing RIGHT means
   "leads somewhere else" -- the column rows, which slide a pane in over the top.
   A visitor should be able to tell which is about to happen before tapping, and
   the direction of the mark is the cheapest way to say so.

   Drawn from two borders on a rotated square rather than set as a glyph, so the
   weight matches the hairline rules around it instead of whatever the font
   happens to give a "›" at this size. */
.ks-drawer-chevron,
.ks-drawer-back-arrow {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--ks-brass);
	border-right: 1px solid var(--ks-brass);
	transform: rotate(45deg);
	transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

/* Down, and up again once the accordion is open -- so an expanded row and a
   collapsed one are distinguishable at a glance. They were not: the mark was a
   fullwidth "＋" that stayed a "＋" whatever the row was doing, and the only
   signal was the sub-list, which on a phone is mostly below the fold. */
.ks-drawer-chevron--down {
	transform: rotate(135deg) translate(-2px, -2px);
}

.ks-drawer-toggle[aria-expanded="true"] .ks-drawer-chevron--down {
	transform: rotate(-45deg) translate(-2px, -2px);
}

.ks-drawer-back-arrow {
	margin-right: 12px;
	transform: rotate(-135deg);
}

/* THE ACCORDION'S HEIGHT IS ANIMATED, and this is the two-element shape that
   lets it be. A panel's height is content-dependent, so it cannot be written
   down as a `to` value; `grid-template-rows: 0fr -> 1fr` on a wrapper is the
   one way to interpolate to "however tall the content is" without measuring it
   in JavaScript and hard-coding a pixel height that goes stale the moment an
   editor adds a link.
	 - .ks-drawer-sub is the grid, and animates the row.
	 - .ks-drawer-sub-inner is the row's only child. It must clip (overflow) and
	   must be allowed to be shorter than its content (min-height: 0), or the
	   row cannot resolve to 0fr and the panel simply pops.

   `hidden` is still the closed state at rest, so a panel is display:none for
   assistive tech, for Tab, and with JavaScript off. The script removes it a
   frame BEFORE adding .is-open, and restores it a beat after removing it. See
   assets/js/mega-menu.js. */
.ks-drawer-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1);
	border-bottom: 1px solid rgba(245, 242, 236, 0.14);
}

.ks-drawer-sub.is-open {
	grid-template-rows: 1fr;
}

.ks-drawer-sub[hidden] {
	display: none;
}

/* NO LEFT INDENT. The column rows used to sit 16px in from the section title
   above them, on the reasoning that an indent shows nesting -- but the drawer
   already shows it, twice: the rows only exist while the accordion is open, and
   they are 16px Jost under a 24px Marcellus heading. What the indent actually
   did was put four rows, a photograph and a promo on a left edge of their own,
   16px off every other thing in the drawer. Nesting is worth less than a
   straight edge here. */
.ks-drawer-sub-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 0 24px;
}

/* --- Level one and a half: a column, inside the open accordion -----------
   One row per column of the desktop mega panel -- "Door Styles", "Finishes",
   "Layouts". Quieter than the Marcellus row above it and louder than the links
   it leads to, because it sits between them.

   IT HAS TO OUTWEIGH THE LINKS IT LEADS TO. Set at 300 16px it was the same
   type as .ks-drawer-sublink in every respect, so "Door Styles" and "Handleless"
   read as the same kind of thing when they are a level apart -- and the only
   thing distinguishing them was a chevron 300px away at the other end of the
   row. 18px at 400 in full cream separates it from the links on three counts at
   once (size, weight, brightness), which survives being read at arm's length in
   a showroom. */
.ks-drawer-colrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font: 400 18px/1.2 Jost, sans-serif;
	color: var(--ks-cream);
	text-align: left;
	cursor: pointer;
}

/* ONE ROW HEIGHT, IN BOTH LEVELS. The accordion's column rows stood 44px tall
   while the pane's links were bare text on a 16px line, so sliding from
   "Kitchens" into "Door Styles" changed the rhythm underfoot -- the same gap
   between rows, but rows of two different heights. Both are now 44px, which
   also gives every link in a pane a target meeting WCAG 2.2 SC 2.5.8; they were
   16px tall.

   Scoped to .ks-drawer-pane-inner rather than set on .ks-drawer-sublink,
   because the work cards share that class and a flex row would lay their
   picture and title side by side instead of stacked. */
.ks-drawer-colrow,
.ks-drawer-pane-inner .ks-drawer-sublink {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* Lands the mark on the same vertical line as the accordion chevron above it
   and the close button above that: 44px in from the drawer's right edge. The
   accordion's chevron gets there by being centred in a 44px button flush to the
   22px gutter; this one has no button around it, so the 18px stands in for the
   half-button (22 - 4) that would have put it there. */
.ks-drawer-colrow .ks-drawer-chevron {
	margin-right: 18px;
}

/* --- Level two: a pane that slides in over the drawer --------------------
   Absolutely positioned against .ks-drawer (which is `position: fixed`), so it
   covers the whole list and stops 64px down, leaving the drawer's own masthead
   -- logo, phone, close -- in place across the transition. Being an overlay
   rather than a step in a track is what keeps the levels independent: the list
   underneath is not measured, moved or re-flowed for a pane to open over it,
   and it is still exactly as the visitor left it -- same scroll position, same
   accordion open -- when the pane slides back off.

   `hidden` remains the resting state, so a pane is display:none for assistive
   tech and for Tab until it is opened -- and with JavaScript off, never. */
.ks-drawer-pane {
	position: absolute;
	top: 64px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: var(--ks-navy-deep);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}

.ks-drawer-pane.is-open {
	transform: none;
}

.ks-drawer-pane[hidden] {
	display: none;
}

/* Same 14px between rows as the accordion above it (.ks-drawer-sub-inner), and
   the same 22px gutter -- so the only thing that changes when a pane slides
   over the list is which rows are on screen. */
.ks-drawer-pane-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 22px 40px;
}

/* "Back", above the pane's own title. Small and quiet: it is the way out of a
   level the visitor chose to enter, not a destination competing with the links
   below it. */
.ks-drawer-back {
	align-self: flex-start;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	font: 500 11px/1 Jost, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(245, 242, 236, 0.66);
	cursor: pointer;
}

/* The pane's heading. A column heading has no destination of its own -- these
   are menu items seeded with url "#" -- so this is a <span>, not a link, and
   carries no arrow. The section page is reachable from the accordion row that
   led here. */
.ks-drawer-panetitle {
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(245, 242, 236, 0.14);
	font-family: Marcellus, serif;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ks-cream);
}

/* --- The project photographs -------------------------------------------
   The ONLY pictures the drawer carries. The desktop panel also gives each of
   its promos a photograph; the drawer draws no promo at all (see
   kitchensmiths_render_drawer_sublist()). The projects are the work being sold
   and are worth the bytes on a phone; the promos are two more destinations,
   both of which the drawer already reaches by other rows.

   Four, two by two. Three in a two-column grid leaves the second row half empty
   and the section looking like it failed to load one; four fills it. Two per
   row rather than the desktop's three, because a third of a 390px screen is
   110px, which is not a photograph of a kitchen. The count is set at the call
   site in inc/header.php, next to this grid. */
.ks-drawer-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 4px;
}

.ks-drawer-cards .ks-mega-card-title {
	margin-top: 10px;
	font-size: 15px;
}

/* The page you are on, in the drawer. */
.ks-drawer-grouplink[aria-current="page"],
.ks-drawer-link[aria-current="page"],
.ks-drawer-sublink[aria-current="page"] {
	color: var(--ks-brass);
}

.ks-drawer-sublink[aria-current="page"] {
	position: relative;
}

.ks-drawer-sublink[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 0.15em;
	bottom: 0.15em;
	width: 2px;
	background: var(--ks-brass);
}

/* hello-elementor's reset.css applies generic hover/focus colours to every
   plain <button> (`button:focus, button:hover { background-color: #CC3366;
   ... }`) and <a> (`a:hover { color: #336 }`) on the site. Both selectors'
   specificity (element + pseudo-class) ties with a plain class + one
   pseudo-class, so without explicit overrides here every interactive
   element in the drawer would shift to one of those two colours on
   hover/focus -- neither belongs to this design. The extra `.ks-header`/
   `.ks-drawer` ancestor qualifier guarantees these win regardless of
   stylesheet load order. Only colour/background/border are reset; the
   outline that provides keyboard focus visibility is untouched. */
.ks-header .ks-hamburger:hover,
.ks-header .ks-hamburger:focus,
.ks-drawer .ks-drawer-close:hover,
.ks-drawer .ks-drawer-close:focus,
.ks-drawer .ks-drawer-toggle:hover,
.ks-drawer .ks-drawer-toggle:focus,
.ks-drawer .ks-drawer-grouplink:hover,
.ks-drawer .ks-drawer-grouplink:focus,
.ks-drawer .ks-drawer-colrow:hover,
.ks-drawer .ks-drawer-colrow:focus,
.ks-drawer .ks-drawer-back:hover,
.ks-drawer .ks-drawer-back:focus,
.ks-drawer .ks-drawer-link:hover,
.ks-drawer .ks-drawer-link:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--ks-cream);
}

.ks-drawer .ks-drawer-sublink:hover,
.ks-drawer .ks-drawer-sublink:focus {
	color: rgba(245, 242, 236, 0.8);
}

.ks-drawer .ks-drawer-phone:hover,
.ks-drawer .ks-drawer-phone:focus {
	color: rgba(245, 242, 236, 0.7);
}

.ks-drawer .ks-drawer-cta:hover,
.ks-drawer .ks-drawer-cta:focus {
	background-color: var(--ks-brass);
	border-color: transparent;
	color: #16222a;
}

/* .ks-drawer-sub-label is gone with the flat list it belonged to. A column's
   heading is now the row that opens the column's pane (.ks-drawer-colrow) and
   the heading at the top of that pane (.ks-drawer-panetitle) -- so the 28px
   margin that used to separate one group of links from the next in a single
   scrolling list has nothing left to separate. */

.ks-drawer-sublink {
	font: 300 16px/1 Jost, sans-serif;
	color: rgba(245, 242, 236, 0.8);
	text-decoration: none;
}

.ks-drawer-cta {
	display: block;
	margin-top: 34px;
	text-align: center;
	font: 500 12px/1 Jost, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #16222a;
	background: var(--ks-brass);
	padding: 19px 20px;
	text-decoration: none;
}

.ks-drawer-phone {
	display: block;
	margin-top: 22px;
	text-align: center;
	font: 300 15px/1 Jost, sans-serif;
	color: rgba(245, 242, 236, 0.7);
	text-decoration: none;
}

/* Desktop geometry (1440px etc.) must stay completely unchanged: keep the
   drawer/hamburger out of the picture entirely above 1024px, regardless of
   the html.js/no-js state. */
@media (min-width: 1025px) {
	.ks-hamburger,
	.ks-drawer {
		display: none !important;
	}
}

/* --- Narrow widths ------------------------------------------------------
   The mega-menus are a pointer-driven desktop pattern. Below 1024px the
   .ks-nav mega-panel triggers collapse to a hamburger + full-screen drawer
   (above) rather than attempting a hover interaction that touch devices
   cannot express. The plain .ks-nav strip that shipped before Task 13 is
   kept as the no-JS fallback (html.no-js, the default; see header.php). */

@media (max-width: 1024px) {
	.ks-utility-inner {
		height: 34px;
		padding: 0 20px;
		justify-content: center;
	}

	.ks-utility-tagline,
	.ks-utility-right {
		display: none;
	}

	.ks-utility-condensed {
		display: flex;
		align-items: center;
	}

	/* THE MASTHEAD MUST NOT MOVE WHEN THE DRAWER OPENS. The drawer draws its
	   own logo and close button at the top of the viewport; the masthead sat
	   34px lower, under the utility bar, and its hamburger sat immediately
	   after the logo rather than at the edge. Opening the menu therefore
	   jumped the logo up 34px and the control right 150px — measured. Both
	   rules below exist to make the closed state land exactly where the open
	   one does.

	   The utility bar goes on narrow widths. The design draws it (Mobile
	   screen, line 1072), but it costs 34px of a small screen to repeat a
	   phone number the drawer already carries as a tap-to-call link, and it
	   is what pushes the masthead out of alignment with the drawer. */
	.ks-utility {
		display: none;
	}

	/* PHONE LEFT, LOGO CENTRE, HAMBURGER RIGHT.
	   Not `justify-content: space-between`: that only appears to centre the
	   logo, and only for as long as the two controls flanking it happen to be
	   the same width. Sizing the controls to a fixed 44px and letting the logo
	   take everything left over centres it by construction -- it cannot drift
	   if the close glyph or the phone icon is ever changed.

	   The .ks-nav in the middle of this row is display:none at these widths
	   (html.js, below) so it takes no part; with JavaScript off it reappears as
	   the fallback strip and this row simply carries four items instead of
	   three. */
	.ks-masthead-inner {
		height: 64px;
		/* Must equal .ks-drawer-masthead's gutter, or the logo, the phone icon
		   and the hamburger jump sideways by the difference the moment the
		   drawer opens over this row. */
		padding: 0 22px;
		gap: 8px;
	}

	.ks-masthead-phone {
		display: flex;
	}

	.ks-masthead-inner .ks-logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
	}

	.ks-logo img {
		height: 22px;
	}

	.ks-nav {
		gap: 18px;
		overflow-x: auto;
	}

	.ks-mega-panel {
		display: none !important;
	}

	html.js .ks-nav {
		display: none;
	}

	html.js .ks-hamburger {
		display: flex;
		flex: 0 0 44px;
	}

	html.js .ks-drawer:not([hidden]) {
		display: flex;
	}
}

/* The mega panel's entrance.
   448px tall and 1440 wide, arriving in one frame. A short fade with a 4px
   settle tells the eye something opened rather than something replaced the
   page. 140ms because this is a tens-per-day interaction, not a once-per-visit
   one — anything longer becomes a tax on navigating.

   There is deliberately NO exit animation. A 448px overlay lingering on top of
   whatever you are moving towards is worse than a clean disappearance, and the
   panel is dismissed by `hidden`, which cannot be transitioned anyway.

   `backwards` matters: it holds the from-state during any delay, so the panel
   can never paint at full opacity for a frame before starting. */
.ks-mega-panel:not([hidden]) {
	animation: ks-mega-in 140ms cubic-bezier(0.2, 0, 0, 1) backwards;
}

@keyframes ks-mega-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-mega-panel:not([hidden]) {
		animation: none;
	}

	/* The drawer and its accordions still open and close -- only the movement
	   goes. Both are driven by a class the script adds and removes, not by the
	   transition itself, so removing the transition changes when the end state
	   is reached and nothing else. mega-menu.js does not wait on transitionend
	   for longer than a timeout it sets itself, precisely so that this block
	   cannot leave a panel stuck open. */
	.ks-drawer,
	.ks-drawer-sub,
	.ks-drawer-pane,
	.ks-drawer-chevron {
		transition: none;
	}
}