/* ============================================================
   Creativ Razor / Components: nav, pills, links, band, footer
   Touch targets are >=44px throughout. Mobile-first.
   ============================================================ */

/* ---- Pills -------------------------------------------------------
   Amber ground, ink text: 11.2:1 either way round. The hover is a
   lit wipe rather than a colour swap, so contrast never dips
   mid-transition.
   ------------------------------------------------------------------ */
.cr-pill {
	display: inline-flex; align-items: center; gap: 0.5em;
	min-height: 44px; padding: 0.8em 1.6em;
	font-weight: 700; font-size: 0.74rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--cr-amber); color: var(--cr-ink);
	border-radius: 100px;
	position: relative; overflow: hidden; isolation: isolate;
	transition: transform var(--cr-dur-state) var(--cr-ease-quart),
	            box-shadow var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-pill::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var(--cr-amber-hi);
	translate: -101% 0;
	transition: translate 420ms var(--cr-ease-expo);
}
.cr-pill::after { content: '\2192'; transition: translate var(--cr-dur-state) var(--cr-ease-quart); }
.cr-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--cr-amber-glow); }
.cr-pill:hover::before { translate: 0 0; }
.cr-pill:hover::after { translate: 3px 0; }
.cr-pill:active { transform: translateY(0); }

/* Secondary: outline only. */
.cr-pill--ghost { background: transparent; color: var(--cr-fg); box-shadow: inset 0 0 0 1px var(--cr-hair); }
.cr-pill--ghost::before { background: var(--cr-fg); }
.cr-pill--ghost:hover { color: var(--cr-bg); box-shadow: inset 0 0 0 1px var(--cr-fg); }

/* ---- Text link ---------------------------------------------------- */
.cr-link {
	display: inline-flex; align-items: center; gap: 0.4em;
	min-height: 44px;
	font-weight: 700; font-size: 0.76rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--cr-fg);
	background-image: linear-gradient(var(--cr-accent), var(--cr-accent));
	background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 calc(50% + 0.9em);
	transition: gap var(--cr-dur-state) var(--cr-ease-quart),
	            color var(--cr-dur-state) var(--cr-ease-quart);
}
/* The arrow lives here, so copy must never contain one. */
.cr-link::after { content: '\2192'; transition: translate var(--cr-dur-state) var(--cr-ease-quart); }
.cr-link:hover { gap: 0.8em; color: var(--cr-accent); }
.cr-link:hover::after { translate: 3px 0; }
.cr-on-bone .cr-link:hover { color: var(--cr-fg); }

/* ---- Nav ---------------------------------------------------------
   Ink bar, always. The live logo is amber + WHITE "RAZOR", so it only
   reads on a dark ground: keeping the bar dark means one logo file
   and no recolouring.
   ------------------------------------------------------------------ */
.cr-nav {
	position: sticky; top: 0; z-index: 100;
	background: var(--cr-veil-nav);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--cr-hair-ink);
	transition: background var(--cr-dur-state) var(--cr-ease-quart),
	            border-color var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-nav__inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--cr-nav-h); gap: 1rem;
	transition: min-height 360ms var(--cr-ease-quart);
}
.cr-nav__brand { display: flex; align-items: center; min-height: 44px; }
.cr-logo { height: 2.25rem; width: auto; transition: height 360ms var(--cr-ease-quart); }

/* Condensed past 60px of scroll; set by JS. */
.cr-nav[data-cr-stuck="true"] { background: oklch(14% 0.008 83 / .95); }
.cr-nav[data-cr-stuck="true"] .cr-nav__inner { min-height: 3.5rem; }
.cr-nav[data-cr-stuck="true"] .cr-logo { height: 1.8rem; }

.cr-nav__menu { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); }
.cr-nav__links { display: flex; gap: clamp(1.25rem, 2.5vw, 1.85rem); list-style: none; padding: 0; }
.cr-nav__links a {
	display: inline-flex; align-items: center; min-height: 44px;
	font-weight: 600; font-size: 0.76rem;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--cr-white); position: relative;
	transition: color var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-nav__links a::after {
	content: ''; position: absolute; left: 0; bottom: 0.75rem;
	width: 0; height: 2px; background: var(--cr-amber);
	transition: width 320ms var(--cr-ease-expo);
}
.cr-nav__links a:hover::after, .cr-nav__links a[aria-current]::after { width: 100%; }
.cr-nav__links a[aria-current] { color: var(--cr-amber); }

.cr-nav__toggle {
	display: flex; flex-direction: column; justify-content: center; gap: 6px;
	width: 44px; height: 44px; align-items: flex-end;
}
.cr-nav__toggle span {
	width: 24px; height: 2px; background: var(--cr-amber);
	transition: transform var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-nav[data-open="true"] .cr-nav__toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.cr-nav[data-open="true"] .cr-nav__toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile drawer is the base state; the desktop row is the enhancement. */
.cr-nav__menu {
	position: fixed; inset: var(--cr-nav-h) 0 auto 0;
	flex-direction: column; align-items: flex-start; gap: 1.5rem;
	background: var(--cr-ink);
	border-bottom: 1px solid var(--cr-hair-ink);
	padding: 2rem var(--cr-gut) 2.5rem;
	translate: 0 -115%;
	transition: translate 480ms var(--cr-ease-expo);
}
.cr-nav[data-open="true"] .cr-nav__menu { translate: 0 0; }
.cr-nav__links { flex-direction: column; gap: 0.5rem; }
.cr-nav__links a { font-size: 1.05rem; letter-spacing: 0.06em; }

@media (min-width: 54rem) {
	.cr-nav__toggle { display: none; }
	.cr-nav__menu {
		position: static; inset: auto; flex-direction: row;
		background: none; border-bottom: 0; padding: 0;
		translate: none; transition: none;
	}
	.cr-nav__links { flex-direction: row; gap: clamp(1.25rem, 2.5vw, 1.85rem); }
	.cr-nav__links a { font-size: 0.76rem; letter-spacing: 0.1em; }
}

/* ---- Marquee band: ink ground, amber accent word ------------------ */
.cr-band {
	background: var(--cr-ink-2); color: var(--cr-white);
	overflow: hidden; padding-block: 1.1rem;
	border-block: 1px solid var(--cr-hair-ink);
}
.cr-band__track { display: flex; width: max-content; animation: cr-scroll 60s linear infinite; }
.cr-band__group {
	font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.02em; font-size: clamp(0.95rem, 2.2vw, 1.15rem);
	white-space: nowrap; padding-right: 0.6rem;
}
.cr-band__group em { font-style: italic; font-weight: 600; color: var(--cr-amber); }
@keyframes cr-scroll { to { transform: translateX(-50%); } }
.cr-band:hover .cr-band__track, .cr-band:focus-within .cr-band__track { animation-play-state: paused; }

/* ---- Footer ------------------------------------------------------- */
.cr-footer {
	padding-block: clamp(3rem, 7vw, 5rem) 1.75rem;
	background: var(--cr-ink); color: var(--cr-white);
	border-top: 1px solid var(--cr-hair-ink);
}
.cr-footer__logo { height: 2.85rem; width: auto; margin-bottom: 2.25rem; }
.cr-footer__grid {
	display: grid; grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.25rem);
	border-bottom: 1px solid var(--cr-hair-ink);
	padding-bottom: clamp(2rem, 5vw, 3rem);
}
.cr-footer__hd {
	font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.3rem);
	text-transform: uppercase; letter-spacing: -0.02em;
	line-height: 1; margin-top: 0.4rem;
}
.cr-footer__news p { color: var(--cr-mute-ink); margin-top: 0.7rem; max-width: 44ch; }
.cr-news { display: flex; gap: 0.5rem; margin-top: 1.3rem; max-width: 27rem; flex-wrap: wrap; }
.cr-news__input {
	flex: 1 1 11rem; min-height: 44px;
	background: var(--cr-ink-2); border: 1px solid var(--cr-ink-3);
	color: var(--cr-white); padding: 0.8em 1.1em; border-radius: 100px;
	transition: border-color var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-news__input::placeholder { color: var(--cr-mute-ink); }
.cr-news__input:focus { outline: none; border-color: var(--cr-amber); }
.cr-news__btn {
	min-height: 44px;
	font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--cr-amber); color: var(--cr-ink);
	padding: 0.8em 1.4em; border-radius: 100px;
	transition: background var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-news__btn:hover { background: var(--cr-amber-hi); }
.cr-news__note { color: var(--cr-amber); font-size: 0.9rem; margin-top: 1rem; max-width: 44ch; }
.cr-news__note:not(.is-shown) { display: none; }
.cr-footer__block p { color: var(--cr-mute-ink); margin-top: 0.65rem; }
/* These are primary contact actions on a phone, so they get a real touch
   target rather than a 20px line of inline text. */
.cr-footer__block a {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--cr-white);
	transition: color var(--cr-dur-state) var(--cr-ease-quart);
	/*
	 * This one declaration is the fix for 16px of horizontal scroll that was on
	 * EVERY route of the site at tablet width.
	 *
	 * `hello@creativrazor.com` is 200px of unbreakable string in a 154px grid
	 * column. An email address has no space in it, so the browser has no legal
	 * break point, and the link ran 46px past its own column and 16px past the
	 * viewport, which is what dragged the whole page sideways. `minmax(0, ...)`
	 * on the footer tracks does not help: the problem is not a track refusing to
	 * shrink, it is content that cannot wrap.
	 *
	 * `anywhere` rather than `break-word` because only `anywhere` also lets the
	 * string affect min-content sizing, so the grid track can actually resolve
	 * narrower than the unbroken word. It was missed for a long time because
	 * only 375px and desktop were ever checked, and 375px puts the footer in one
	 * column where there is room for the address.
	 */
	overflow-wrap: anywhere;
}
.cr-footer__block a:hover { color: var(--cr-amber); }
.cr-footer__signoff {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding-top: 1.6rem;
	font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--cr-mute-ink);
}
.cr-footer__signoff em { font-style: italic; color: var(--cr-amber); font-weight: 500; }

@media (min-width: 48rem) {
	.cr-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr)); }
}

/* ---- Footer composition on a wide screen --------------------------
   Three fractional columns across a full-width shell just spread the
   blocks evenly, and even spacing reads as accidental: an address
   stranded in the middle of 1900px looks dropped rather than placed.

   So above 75rem the footer is composed instead of distributed. The
   newsletter, which is the only block with real content, holds a
   measured column on the left. The two short reference blocks pair up
   hard against the right edge, sized to their content. The empty `1fr`
   between them is deliberate negative space that separates the thing
   you can act on from the things you merely look up.
   ------------------------------------------------------------------ */
@media (min-width: 75rem) {
	.cr-footer__grid {
		grid-template-columns: minmax(0, 34rem) 1fr max-content max-content;
		column-gap: clamp(2.5rem, 4vw, 5rem);
		align-items: start;
	}
	/* Explicit placement: auto-flow would drop the address into the
	   spacer column and undo the whole arrangement.
	   nth-child, not nth-of-type: all three blocks are divs, so counting
	   by type would match the newsletter rather than the address. */
	.cr-footer__grid > :nth-child(1) { grid-column: 1; }
	.cr-footer__grid > :nth-child(2) { grid-column: 3; }
	.cr-footer__grid > :nth-child(3) { grid-column: 4; }
}

/* Privacy link sits with the copyright rather than as a third column, so
   the signoff stays a two-part line at every width. */
.cr-footer__legal { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cr-footer__legal a { color: var(--cr-mute-ink); }
.cr-footer__legal a:hover { color: var(--cr-amber); }

/* ---- Consent banner ----------------------------------------------
   Bottom sheet rather than a full-screen interstitial: it must be
   dismissible without being a gate, because the site is readable
   whichever choice is made and blocking the content to force a
   decision is the pattern regulators single out.
   ------------------------------------------------------------------ */
.cr-consent {
	position: fixed; z-index: 200;
	left: 0; right: 0; bottom: 0;
	background: var(--cr-ink-2);
	border-top: 2px solid var(--cr-amber);
	padding: clamp(1rem, 3vw, 1.5rem) var(--cr-gut);
	box-shadow: 0 -12px 40px -18px rgb(0 0 0 / 0.8);
}
.cr-consent[hidden] { display: none; }
.cr-consent__inner {
	max-width: var(--cr-maxw); margin-inline: auto;
	display: grid; gap: 1rem;
}
.cr-consent h2 { color: var(--cr-amber); }
.cr-consent p {
	color: var(--cr-fg-mute); font-size: 0.92rem; line-height: 1.5;
	margin-top: 0.4rem; max-width: 68ch;
}
/* Both actions are the same size and sit side by side. Decline first in
   the DOM and in reading order: equal prominence is what makes the
   consent freely given rather than extracted. */
.cr-consent__acts { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cr-consent__acts .cr-pill { flex: 1 1 auto; justify-content: center; min-width: 8rem; }
.cr-consent__more { font-size: 0.84rem; }
.cr-consent__more a { color: var(--cr-fg-mute); text-decoration: underline; text-underline-offset: 3px; }
.cr-consent__more a:hover { color: var(--cr-amber); }

@media (min-width: 48rem) {
	.cr-consent__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
	}
	.cr-consent__acts { grid-column: 2; }
	.cr-consent__more { grid-column: 1 / -1; margin-top: -0.25rem; }
	.cr-consent__acts .cr-pill { flex: 0 0 auto; }
}

/* ---- Honeypot ----------------------------------------------------
   Removed from the layout without `display: none`, which some bots
   check for. It must never be focusable, hence tabindex -1 in the
   markup as well.
   ------------------------------------------------------------------ */
.cr-hp {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* The pill's `::after` arrow means "this takes you onward", which is wrong on
   a pair of equal choices, and actively misleading on Decline where it reads
   as forward progress. Both lose it. */
.cr-consent__acts .cr-pill::after { content: none; }
/* The detail link sits with the copy rather than floating below a gap. */
.cr-consent__more { margin-top: 0.25rem; }
@media (min-width: 48rem) {
	.cr-consent__more { grid-column: 1; grid-row: 2; margin-top: 0.5rem; }
	.cr-consent__inner { row-gap: 0.25rem; }
}