/* Blue Wolf Solutions
   Palette sampled from the logo: navy #00183C, orange #FC6024, ice #9CC0CC.
   Layout is deliberately editorial rather than gridded — numbered rules and
   offset columns instead of rows of bordered cards. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&family=Inter:wght@400;500;600&display=swap');

:root {
	--navy:       #00183C;
	--ink:        #050A16;
	--ink-2:      #08122A;

	/* Signal blue, sampled from the hero banners (#0064E6). Primary accent. */
	--accent:     #0064E6;
	--accent-hot: #3B8CFF;

	/* Logo orange. Secondary only - live indicators, numerals, hover detail.
	   Never a wash (doc2 §43). */
	--ember:      #FC6024;

	/* Aliases so existing rules keep working after the switch to blue. */
	--orange:     var(--accent);
	--orange-hot: var(--accent-hot);

	--ice:        #9CC0CC;
	--steel:      #789CB4;
	--line:       rgba(156,192,204,.13);
	--text:       #E6EDF5;
	--muted:      #8FA3BC;
	--display:    'Oswald','Arial Narrow',sans-serif;
	--body:       'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--wrap:       1220px;
	--gut:        clamp(20px,5vw,60px);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body::after {
	content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
	opacity:.04; mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
::selection { background: var(--orange); color:#fff; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sr { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* --------------------------------------------------------------- wolf */

.wolfmark { color: var(--ice); display:block; }

/* Oversized background silhouette. Deliberately barely-there. */
.wolf-bg {
	position:absolute; pointer-events:none; z-index:0;
	color: var(--steel);
	opacity:.045;
}
.wolf-bg svg { width:100%; height:auto; display:block; }

.wolf-bg--hero {
	top:-6%; right:-12%;
	width:min(760px,72vw);
}
.wolf-bg--cta {
	bottom:-28%; left:50%; transform:translateX(-50%);
	width:min(640px,88vw);
	opacity:.05;
}
@media (max-width:820px){ .wolf-bg--hero{ right:-30%; top:2%; width:110vw; opacity:.035; } }

/* --------------------------------------------------------------- type */

h1,h2,h3 { margin:0; font-weight:500; line-height:1.05; letter-spacing:-.022em; }
.h-xl { font-size:clamp(2.7rem,8vw,6.4rem); }
.h-lg { font-size:clamp(1.95rem,4.4vw,3.3rem); }

.eyebrow {
	display:inline-flex; align-items:center; gap:12px;
	font-family:var(--display); font-weight:300;
	font-size:11.5px; letter-spacing:.32em; text-transform:uppercase;
	color:var(--orange); margin-bottom:20px;
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--orange); }

.lede { font-size:clamp(1.02rem,1.5vw,1.19rem); color:var(--muted); max-width:60ch; }
.muted { color:var(--muted); }

/* ------------------------------------------------------------ buttons */

.btn {
	display:inline-flex; align-items:center; gap:10px;
	padding:15px 30px;
	font-family:var(--display); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
	background:var(--orange); color:#fff; border:1px solid var(--orange);
	transition:background .25s ease,color .25s ease,border-color .25s ease;
	cursor:pointer;
}
.btn:hover { background:transparent; color:var(--orange-hot); border-color:var(--orange-hot); }
.btn--ghost { background:transparent; color:var(--text); border-color:rgba(156,192,204,.28); }
.btn--ghost:hover { border-color:var(--orange); color:var(--orange-hot); }

/* ------------------------------------------------------------- header */

.hdr {
	position:sticky; top:0; z-index:100;
	background:rgba(5,10,22,.86); backdrop-filter:blur(14px);
	border-bottom:1px solid var(--line);
}
.hdr__in { display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height:38px; width:auto; }
.brand__txt { font-family:var(--display); font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--text); }
.brand__txt b { color:var(--orange); font-weight:500; }

.nav { display:flex; gap:32px; }
.nav a {
	font-family:var(--display); font-weight:300;
	font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
	color:var(--muted); padding:6px 0; position:relative; transition:color .22s ease;
}
.nav a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--orange); transition:width .34s cubic-bezier(.22,1,.36,1); }
.nav a:hover { color:var(--text); }
.nav a:hover::after { width:100%; }

.hdr__cta { display:flex; align-items:center; gap:14px; }
.burger { display:none; background:none; border:0; color:var(--text); padding:8px; cursor:pointer; }
.burger span { display:block; width:22px; height:1.5px; background:currentColor; margin:5px 0; }

@media (max-width:980px){
	.nav{ display:none; } .burger{ display:block; } .hdr__cta .btn{ display:none; }
	.nav.is-open{
		display:flex; flex-direction:column; gap:0;
		position:absolute; left:0; right:0; top:78px;
		background:var(--ink-2); border-bottom:1px solid var(--line);
		padding:12px var(--gut) 22px;
	}
	.nav.is-open a{ font-size:15px; padding:13px 0; border-bottom:1px solid var(--line); }
}

/* --------------------------------------------------------------- hero */

.hero { position:relative; padding:clamp(76px,12vw,150px) 0 clamp(56px,8vw,96px); overflow:hidden; }
.hero__in { position:relative; z-index:1; }
.hero h1 { max-width:15ch; }
.hero h1 em { font-style:normal; color:var(--orange); }
.hero .lede { margin-top:28px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* Offset intro block — asymmetry instead of a centred column */
.hero__meta {
	margin-top:clamp(48px,7vw,84px);
	display:grid; gap:26px 48px;
	border-top:1px solid var(--line); padding-top:30px;
}
@media (min-width:760px){ .hero__meta{ grid-template-columns:repeat(4,1fr); } }
.hero__meta div b {
	display:block; font-family:var(--display); font-weight:300;
	font-size:12px; letter-spacing:.22em; text-transform:uppercase;
	color:var(--orange); margin-bottom:7px;
}
.hero__meta div span { font-size:14.5px; color:var(--muted); line-height:1.55; }

/* ------------------------------------------------------------ section */

.sec { position:relative; padding:clamp(62px,9vw,120px) 0; }
.sec--line { border-top:1px solid var(--line); }
.sec__head { max-width:70ch; margin-bottom:clamp(34px,4.6vw,58px); }
.sec__head .lede { margin-top:16px; }

/* Offset heading — pushes the eye off the centre axis */
@media (min-width:1000px){
	.sec__head--offset { margin-left:8%; }
}

/* --------------------------------------------- services (editorial rows) */

.svcs { border-top:1px solid var(--line); }

.svc-row {
	display:grid; gap:6px 40px;
	padding:30px 0;
	border-bottom:1px solid var(--line);
	position:relative;
	transition:padding-left .4s cubic-bezier(.22,1,.36,1);
}
@media (min-width:860px){
	.svc-row{ grid-template-columns:88px minmax(220px,1fr) 1.35fr; align-items:baseline; padding:34px 0; }
	.svc-row:hover{ padding-left:16px; }
}

.svc-row__n {
	font-family:var(--display); font-weight:200; font-size:13px;
	letter-spacing:.24em; color:var(--steel);
	transition:color .3s ease;
}
.svc-row:hover .svc-row__n { color:var(--orange); }

.svc-row__t {
	font-size:clamp(1.25rem,2.2vw,1.72rem);
	line-height:1.15; letter-spacing:-.02em;
	transition:color .3s ease;
}
.svc-row:hover .svc-row__t { color:var(--orange-hot); }

.svc-row__d { color:var(--muted); font-size:15.5px; }
.svc-row__tags { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.svc-row__tags span { font-size:12.5px; color:var(--steel); }
.svc-row__tags span::after { content:"/"; margin-left:14px; color:var(--line); }
.svc-row__tags span:last-child::after { content:""; }

/* thin orange progress bar on hover */
.svc-row::after {
	content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
	background:var(--orange); transition:width .5s cubic-bezier(.22,1,.36,1);
}
.svc-row:hover::after { width:100%; }

/* --------------------------------------------------- system (flow line) */

.flow { position:relative; display:grid; gap:34px; }
@media (min-width:900px){ .flow{ grid-template-columns:repeat(5,1fr); gap:26px; } }

.flow::before {
	content:""; position:absolute; left:0; right:0; top:9px; height:1px;
	background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
	display:none;
}
@media (min-width:900px){ .flow::before{ display:block; } }

.flow__step { position:relative; padding-top:34px; }
.flow__step::before {
	content:""; position:absolute; left:0; top:4px;
	width:11px; height:11px; border:1px solid var(--orange);
	background:var(--ink); transform:rotate(45deg);
}
.flow__step b {
	display:block; font-family:var(--display); font-weight:300;
	font-size:14.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:9px;
}
.flow__step span { font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ------------------------------------------------- areas (inline index) */

.geo { display:grid; gap:44px; }
@media (min-width:900px){ .geo{ grid-template-columns:1fr 1fr; gap:44px 72px; } }

.geo__col h3 {
	font-family:var(--display); font-weight:300;
	font-size:12px; letter-spacing:.26em; text-transform:uppercase;
	color:var(--orange); margin-bottom:20px;
}
.geo__list { list-style:none; margin:0; padding:0; }
.geo__list li { border-bottom:1px solid var(--line); }
.geo__list a {
	display:flex; align-items:baseline; justify-content:space-between; gap:20px;
	padding:15px 0;
	font-size:clamp(1.05rem,1.7vw,1.3rem);
	transition:color .25s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
.geo__list a:hover { color:var(--orange-hot); padding-left:10px; }
.geo__list em {
	font-style:normal; font-family:var(--display); font-size:11px;
	letter-spacing:.2em; text-transform:uppercase; color:var(--steel); flex:none;
}

/* ---------------------------------------------------------------- cta */

.cta { position:relative; overflow:hidden; text-align:center; }
.cta__in { position:relative; z-index:1; }
.cta h2 { max-width:18ch; margin-inline:auto; }
.cta .lede { margin:20px auto 0; }
.cta__row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* ------------------------------------------------------------- footer */

.ftr { border-top:1px solid var(--line); padding:clamp(50px,7vw,80px) 0 32px; background:var(--ink-2); }
.ftr__grid { display:grid; gap:38px; }
@media (min-width:860px){ .ftr__grid{ grid-template-columns:1.5fr 1fr 1fr; } }
.ftr h4 { font-family:var(--display); font-weight:300; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); margin:0 0 15px; }
.ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr ul a { font-size:14.5px; color:var(--muted); transition:color .2s ease; }
.ftr ul a:hover { color:var(--orange-hot); }
.ftr__bottom { margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); }

/* -------------------------------------------------------------- prose */

.prose { max-width:70ch; }
.prose h2 { margin:44px 0 14px; font-size:clamp(1.45rem,2.5vw,1.95rem); }
.prose h3 { margin:32px 0 10px; font-size:1.16rem; }
.prose p { margin:0 0 17px; color:var(--muted); }
.prose ul { margin:0 0 20px; padding-left:20px; color:var(--muted); }
.prose a { color:var(--orange-hot); text-decoration:underline; text-underline-offset:3px; }
.prose strong { color:var(--text); }

/* Pull-quote style opener for long-form pages */
.prose > p:first-of-type { font-size:1.1rem; color:var(--text); }

/* ------------------------------------------------------------- reveal */

.rv { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ===================================================================== */
/*  HERO SLIDER                                                          */
/* ===================================================================== */

.hslider {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	min-height: clamp(520px, 76vh, 820px);
	display: flex;
	align-items: stretch;
}

.hslider__track { position: relative; width: 100%; }

.hslide {
	position: absolute; inset: 0;
	display: flex; align-items: center;
	opacity: 0; visibility: hidden;
	transition: opacity .9s ease, visibility .9s;
}
.hslide.is-active { opacity: 1; visibility: visible; position: relative; }

.hslide__media { position: absolute; inset: 0; z-index: 0; }
.hslide__media img,
.hslide__media video {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 42%;
	/* Slow drift keeps a still frame from feeling like a dead screenshot. */
	animation: bw-drift 26s ease-in-out infinite alternate;
}
@keyframes bw-drift { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
	.hslide__media img, .hslide__media video { animation: none; transform: none; }
	.hslide { transition: none; }
}

/* Navy scrim - keeps text legible over any frame and pulls the photo
   into the brand palette rather than leaving it a generic stock shot. */
.hslide__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, rgba(5,10,22,.94) 0%, rgba(5,10,22,.80) 42%, rgba(5,10,22,.30) 78%, rgba(5,10,22,.45) 100%),
		linear-gradient(180deg, rgba(0,24,60,.34) 0%, transparent 40%, rgba(5,10,22,.72) 100%);
}

.hslide__body {
	position: relative; z-index: 2;
	padding-top: clamp(90px, 12vw, 140px);
	padding-bottom: clamp(96px, 12vw, 150px);
	width: 100%;
}
.hslide__body h1 { max-width: 15ch; }
.hslide__body h1 em { font-style: normal; color: var(--orange); }
.hslide__body .lede { margin-top: 24px; }
.hslide__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* controls */
.hslider__ui {
	position: absolute; left: 0; right: 0; bottom: clamp(20px, 3.5vw, 38px);
	z-index: 3;
	display: flex; align-items: center; gap: 16px;
}
.hslider__arrow, .hslider__play {
	background: transparent; border: 1px solid rgba(156,192,204,.26);
	color: var(--text); cursor: pointer;
	font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	padding: 10px 14px; line-height: 1;
	transition: border-color .25s ease, color .25s ease;
}
.hslider__play { margin-left: auto; }
.hslider__arrow:hover, .hslider__play:hover { border-color: var(--orange); color: var(--orange-hot); }

.hslider__dots { display: flex; gap: 10px; }
.hslider__dot { background: none; border: 0; padding: 8px 2px; cursor: pointer; }
.hslider__dot span {
	display: block; width: 30px; height: 2px;
	background: rgba(156,192,204,.28);
	transition: background .3s ease, width .3s ease;
}
.hslider__dot.is-active span { background: var(--orange); width: 46px; }

@media (max-width: 700px) {
	.hslider { min-height: 78vh; }
	.hslide__scrim {
		background:
			linear-gradient(180deg, rgba(5,10,22,.72) 0%, rgba(5,10,22,.62) 45%, rgba(5,10,22,.90) 100%);
	}
	.hslider__arrow { display: none; }
	.hslider__ui { justify-content: space-between; }
}


/* ===================================================================== */
/*  URBAN PASS — loosening the grid                                      */
/*  Tweaks, not a rebuild: kill the remaining hard rectangles, let type   */
/*  and rules carry structure instead of borders.                        */
/* ===================================================================== */

/* Section rules stop short of full width and fade out, so the page reads
   as a column of moments rather than stacked boxes. */
.sec--line {
	border-top: 0;
	position: relative;
}
.sec--line::before {
	content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut);
	height: 1px;
	background: linear-gradient(90deg, var(--orange) 0, var(--line) 9%, var(--line) 62%, transparent 100%);
	opacity: .8;
}

/* Ghosted oversized section index — editorial, not corporate. */
.sec__head { position: relative; }

/* Buttons: keep the square edge but soften the ghost so it is less boxy. */
.btn--ghost { border-color: rgba(156,192,204,.20); }
.btn--ghost:hover { border-color: var(--orange); background: rgba(252,96,36,.06); }

/* Geo index — drop the full-width rules for something lighter. */
.geo__list li { border-bottom: 0; position: relative; }
.geo__list li::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--line);
	transform-origin: left;
	transition: background .3s ease;
}
.geo__list a:hover ~ ::after { background: var(--orange); }
.geo__list li:hover::after { background: rgba(252,96,36,.55); }

/* Flow steps: diamonds become slimmer and the connector fades at both ends. */
.flow__step::before { width: 9px; height: 9px; }

/* Hero slide copy sits a touch wider and looser. */
.hslide__body .lede { max-width: 54ch; }

/* A faint diagonal light sweep across dark sections — stops large flat
   areas from looking like empty panels. */
.sec--line::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background: radial-gradient(120% 60% at 12% 0%, rgba(0,24,60,.55), transparent 62%);
}
.sec { isolation: isolate; }

/* Slightly looser rhythm overall. */
.sec { padding: clamp(70px, 10vw, 138px) 0; }


/* ===================================================================== */
/*  WOLF SYMBOLISM + VISUAL WEIGHT                                       */
/* ===================================================================== */

/* Small inline glyph — corners, dividers, eyebrow accents. */
.wglyph { display: inline-block; line-height: 0; color: var(--orange); }
.wglyph svg { width: 100%; height: auto; display: block; }
.wglyph--eyebrow { width: 13px; opacity: .9; margin-right: 2px; }
.wglyph--divider { width: 22px; opacity: .5; color: var(--steel); }
.wglyph--corner {
	position: absolute; top: 26px; right: var(--gut);
	width: 46px; opacity: .10; color: var(--ice); pointer-events: none;
}

/* Wolf tracks — paw pairs padding diagonally across a strip. */
.tracks {
	position: absolute; pointer-events: none; z-index: 0;
	opacity: .11;
	background-repeat: repeat-x;
	background-size: 118px 68px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='68'%3E%3Cg fill='%239CC0CC'%3E%3Cellipse cx='16' cy='42' rx='5.4' ry='7'/%3E%3Cellipse cx='9' cy='30' rx='2.5' ry='3.2'/%3E%3Cellipse cx='16.5' cy='26' rx='2.5' ry='3.2'/%3E%3Cellipse cx='24' cy='29' rx='2.5' ry='3.2'/%3E%3Cellipse cx='70' cy='22' rx='5.4' ry='7'/%3E%3Cellipse cx='63' cy='10' rx='2.5' ry='3.2'/%3E%3Cellipse cx='70.5' cy='6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='78' cy='9' rx='2.5' ry='3.2'/%3E%3C/g%3E%3C/svg%3E");
}
.tracks--services { left: 0; right: 0; top: 0; height: 68px; opacity: .07; }
.tracks--cta      { left: 0; right: 0; bottom: 0; height: 68px; opacity: .09; transform: scaleX(-1); }

/* Section index numerals — big, ghosted, editorial. */
.sec__ix {
	position: absolute; top: -18px; left: -6px;
	font-family: var(--display); font-weight: 200;
	font-size: clamp(64px, 11vw, 132px); line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(156,192,204,.10);
	pointer-events: none; z-index: -1; letter-spacing: -.04em;
}

/* Give dark sections real depth instead of flat panels. */
.sec--tint::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(80% 55% at 88% 8%,  rgba(252,96,36,.07), transparent 60%),
		radial-gradient(90% 70% at 6% 100%, rgba(0,24,60,.72),   transparent 66%);
}

/* Media band — reuses the hero photo as a full-bleed textural break so the
   page has visual rhythm without waiting on more photography. */
.band {
	position: relative; overflow: hidden;
	min-height: clamp(260px, 34vw, 420px);
	display: flex; align-items: center;
	isolation: isolate;
}
.band__img { position: absolute; inset: 0; z-index: -2; }
.band__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(.55) contrast(1.06); }
.band::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(5,10,22,.95) 0%, rgba(5,10,22,.80) 46%, rgba(0,24,60,.55) 100%),
		linear-gradient(180deg, rgba(5,10,22,.65), transparent 30%, rgba(5,10,22,.75));
}
.band__in { position: relative; z-index: 1; }
.band h2 { max-width: 20ch; }
.band .lede { margin-top: 16px; max-width: 52ch; }
.band__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Inline CTA strip that can sit after any section. */
.cta-strip {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	padding: 26px 0;
	border-top: 1px solid var(--line);
	margin-top: clamp(34px, 5vw, 56px);
}
.cta-strip p { margin: 0; font-size: clamp(1.05rem, 1.9vw, 1.32rem); color: var(--text); max-width: 46ch; letter-spacing: -.01em; }
.cta-strip .btn { flex: none; }

@media (prefers-reduced-motion: reduce) { .tracks { display: none; } }


/* ---- ember: the one place the logo orange still speaks (doc2 §43) ---- */
.sec__ix { -webkit-text-stroke-color: rgba(252,96,36,.13); }
.chain__n, .mod__n { color: var(--ember); }
.hslider__dot.is-active span { background: var(--ember); }


/* ===================================================================== */
/*  BARE SLIDE — artwork carries the copy; only buttons are added        */
/* ===================================================================== */

/* Full-bleed, identical to slide 1: the picture fills the slider edge to
   edge with `cover`, no width cap and no letterboxing.

   min-height is load-bearing — every child here is absolutely positioned,
   and a slide flips to position:relative when it becomes active, so without
   it the slide collapses to zero height and the picture never paints. */
.hslide--bare {
	min-height: clamp(520px, 76vh, 820px);
	align-items: center;
	background: var(--ink);
}
.hslide--bare .hslide__media {
	position: absolute;
	inset: 0;
	width: auto;
	display: block;
}
.hslide--bare .hslide__media img {
	/* 10% smaller than the slide: inset 5% on every side leaves a 90% box,
	   centred, with the slide's own near-black showing around it. Kept on
	   `cover` so the composition still fills that box rather than
	   letterboxing a second time inside it. */
	position: absolute;
	inset: 5%;
	width: 90%;
	height: 90%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	animation: none;            /* drift would shift the baked copy */
}

/* Edge fade — the slide's own ground colour is painted inward over all four
   edges so the picture dissolves into the page instead of ending on a hard
   rectangle.

   Done as an overlay rather than a CSS mask because it reuses the exact
   --ink token as the surround, which makes the blend correct by definition
   and sidesteps mask-composite support gaps. Written as rgba(5,10,22,0)
   rather than `transparent`, which some engines ramp through grey.

   Stops are eased (opaque -> 55% -> clear) so the falloff is gradual and
   the ramp's midpoint lands ~4%, keeping the baked-in headline clear. */
.hslide--bare .hslide__media::after {
	content: "";
	position: absolute;
	inset: 5%;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right,
			var(--ink) 0%, rgba(5,10,22,.55) 4%, rgba(5,10,22,0) 11%,
			rgba(5,10,22,0) 89%, rgba(5,10,22,.55) 96%, var(--ink) 100%),
		linear-gradient(to bottom,
			var(--ink) 0%, rgba(5,10,22,.55) 5%, rgba(5,10,22,0) 13%,
			rgba(5,10,22,0) 87%, rgba(5,10,22,.55) 95%, var(--ink) 100%);
}

/* Buttons sit on the page gutter, matching every other element. */
.hslide__baked {
	position: absolute;
	left: 0; right: 0;
	transform: none;
	/* 5% inset matches the picture, so the buttons sit inside it, not
	   floating on the bare ground below. */
	bottom: clamp(84px, 15vh, 168px);
	z-index: 4;   /* above the edge-fade overlay */
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: auto;
	padding-inline: calc(var(--gut) + 5%);
	max-width: var(--wrap);
	margin-inline: auto;
}

@media (max-width: 780px) {
	.hslide--bare .hslide__media img { object-position: 66% center; }
	.hslide--bare .hslide__media::after {
		background:
			linear-gradient(to right,
				var(--ink) 0%, rgba(5,10,22,0) 7%,
				rgba(5,10,22,0) 93%, var(--ink) 100%),
			linear-gradient(to bottom,
				var(--ink) 0%, rgba(5,10,22,0) 8%,
				rgba(5,10,22,0) 92%, var(--ink) 100%);
	}
	.hslide__baked { bottom: clamp(64px, 13vh, 120px); gap: 10px; }
	.hslide__baked .btn { flex: 1 1 auto; justify-content: center; padding: 12px 16px; }
}