/* ==========================================================================
   ARMOUR COACH — brand overrides
   Loads AFTER assets/css/main.css. Nothing here belongs in main.css: that file
   is the Spectral template plus the existing cinematic theme block.

   Colour values mirror brand/colours.txt. Keep them in step.
   ========================================================================== */

:root {
	--armour-band:        #0d0d0d;  /* section bands */

	/* Card ground, a few percent lighter than the band it sits on. */
	--armour-card-bg:     #1b1b1b;
	--armour-card-radius: 12px;   /* shared by every raised panel */
	--armour-card-border: rgba(201, 162, 39, 0.22); /* brand gold at 22% */
	--armour-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);

	/* How far the card bites into the photograph. */
	--armour-spotlight-overlap:         15px;    /* horizontal, >=981px */
	--armour-spotlight-overlap-stacked: 1.75rem; /* vertical, <=980px  */
	--armour-spotlight-gap:             3rem;    /* breathing room under a stacked card */
	--armour-spotlight-inset:           34em;    /* stacked card width clamp */
	--armour-spotlight-gutter:          1.25rem; /* min breathing room at the screen edge */

	/* Footer badge. */
	--armour-badge-size:       112px;
	--armour-badge-size-small: 76px;
	--armour-badge-overhang-small: 30px;
	--armour-badge-radius:     12px;
	--armour-badge-border:     rgba(201, 162, 39, 0.4); /* brand gold at 40% */
	/* Four layers, and each one is doing a job: a catch-light along the top
	   edge, the stitched inner rim, a tight contact edge directly beneath the
	   patch, then the wide soft cast that sells the height. */
	--armour-badge-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		inset 0 0 0 1px rgba(201, 162, 39, 0.12),
		0 2px 0 rgba(0, 0, 0, 0.55),
		0 22px 44px rgba(0, 0, 0, 0.75);

	/* Header badge: the same patch, shrunk to sit inside a 3em bar. The shadow
	   is scaled down with it — the footer's 22px cast would smear across the
	   whole bar at this size. */
	--armour-header-badge-size:       34px;
	--armour-header-badge-size-small: 30px;
	--armour-header-badge-radius:     8px;
	/* "What I Do" cards. */
	--armour-feature-gap:    1.5rem;
	--armour-feature-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 2px 0 rgba(0, 0, 0, 0.4),
		0 18px 36px rgba(0, 0, 0, 0.6);
	--armour-feature-shadow-hover:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 2px 0 rgba(0, 0, 0, 0.45),
		0 26px 52px rgba(0, 0, 0, 0.7);

	/* Wordmark beside the header badge. Kept in em, not px: #header inherits
	   the body font-size, which Spectral steps down at the small breakpoints,
	   so em keeps the name in proportion to the bar at every width. */
	--armour-header-name-size:     0.68em;
	--armour-header-name-tracking: 0.15em;
	--armour-header-badge-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		inset 0 0 0 1px rgba(201, 162, 39, 0.1),
		0 1px 0 rgba(0, 0, 0, 0.5),
		0 6px 14px rgba(0, 0, 0, 0.55);
}

/* --- Effect 1: raised spotlight card -------------------------------------- */

/* Spectral tints each spotlight row individually — .spotlight:nth-child(1)
   through (10), rgba(0,0,0,.075) stepping to .75. Against a card ground those
   read as grey seams between rows, so flatten them and let the band show. The
   band itself is already painted by .wrapper.style2 in main.css.
   :nth-child(n) matches the template's own specificity (0,2,0); this sheet
   loads later, so it wins without !important. */
.spotlight:nth-child(n) {
	background-color: transparent;
}

.spotlight .content {
	/* Opaque literal FIRST. If a browser can't parse the color-mix below it
	   discards only that line and keeps this one. An unparsed background-color
	   would fall back to transparent, and along the strip where the card laps
	   over the photograph the picture would show straight through it. */
	background-color: var(--armour-card-bg);
	background-color: color-mix(in srgb, var(--armour-band) 94%, #ffffff);

	/* main.css sets `.spotlight .content { border-color: ... !important }`, so
	   the colour needs !important to land. Width and style are unclaimed. */
	border-width: 1px;
	border-style: solid;
	border-color: var(--armour-card-border) !important;
	border-radius: 3px;

	box-shadow: var(--armour-card-shadow);

	/* Lifts the card above the image in paint order so the overlap reads as
	   the card sitting on the photograph rather than under it. */
	position: relative;
	z-index: 1;
}

/* Stacked (<=980px): image on top, card pulled up over its foot. */
@media screen and (max-width: 980px) {

	.spotlight .content {
		/* max-width, not width: Spectral sets width:100% on .content and
		   box-sizing is border-box globally, so clamping the max leaves the
		   template's own sizing alone and margin-inline centres what's left.
		   The em clamp alone is not enough: Spectral drops font-size to
		   14.67px at the small breakpoints, so 34em shrinks in step with the
		   viewport and the card hits the screen edges — measured 499px wide
		   inside a 500px viewport, with the inset gone. min() floors it
		   against a real gutter. The plain clamp is kept first as the
		   fallback if min() can't be parsed. */
		max-width: var(--armour-spotlight-inset);
		max-width: min(var(--armour-spotlight-inset), 100% - var(--armour-spotlight-gutter) * 2);
		margin-inline: auto;
		margin-top: calc(var(--armour-spotlight-overlap-stacked) * -1);
	}

	/* Gap goes on the PARENT as padding, never as margin-bottom on .content.
	   A bottom margin on a last child escapes a parent that has no padding or
	   border of its own, landing outside the band's background and showing as
	   a seam of whatever sits underneath. */
	.spotlight {
		padding-bottom: var(--armour-spotlight-gap);
	}

}

/* Flex row (>=981px): Spectral switches .spotlight from block to flex here. */
@media screen and (min-width: 981px) {

	.spotlight {
		padding-bottom: 0;
	}

	.spotlight .content {
		margin-top: 0;
		/* PHYSICAL margin-left, not margin-inline-start. Spectral alternates
		   rows with flex-direction: row-reverse, and margin-inline-start still
		   resolves to the left edge inside a row-reverse container — which is
		   the edge facing away from the picture on every other row. */
		margin-left: calc(var(--armour-spotlight-overlap) * -1);
		margin-right: 0;
	}

	/* Same :nth-child(2n) the template uses to reverse the row. Image sits on
	   the right here, so the card pulls right instead. */
	.spotlight:nth-child(2n) .content {
		margin-left: 0;
		margin-right: calc(var(--armour-spotlight-overlap) * -1);
	}

}

/* --- Effect 2: scroll reveal ---------------------------------------------- */

/* main.css puts opacity:0 on .reveal itself and reveals with .is-revealed.
   That hands a visitor with JS disabled a page of invisible sections, so the
   resting state is reset to visible here and the hidden state moved onto a
   class that only the script ever applies. main.css's .reveal.is-revealed rule
   is left unused as a result — this sheet's script no longer adds it. */
.reveal {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
		transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
	will-change: opacity, transform;
}

.reveal.armour-reveal--hidden {
	opacity: 0;
	transform: translateY(1.5rem);
}

/* Second half of the reduced-motion guard. The script also bails before wiring
   the observer, but that only covers the setting at load; this covers a visitor
   who turns it on afterwards, with the hidden class already applied. */
@media (prefers-reduced-motion: reduce) {

	.reveal,
	.reveal.armour-reveal--hidden {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

}

/* --- Footer badge --------------------------------------------------------- */

/* The mark is styled as a patch stitched onto the footer, straddling the
   hairline at its top edge — the same trick as the spotlight cards, where the
   overlap is what makes the thing read as raised rather than printed on.

   No wrapper element: an <img> takes padding, background, border and radius
   perfectly well, and object-fit keeps the shield centred inside the square
   rather than stretching it (the artwork is 630x792, so it is NOT square and
   would distort if it were simply sized to the box). */

#footer {
	/* The badge is pulled up by half its own height, so the footer's 6em top
	   padding would leave it sitting well inside the panel instead of on the
	   edge. Zero here, and the badge's own bottom margin carries the spacing
	   down to the copyright line. */
	padding-top: 0;
}

.footer-logo {
	box-sizing: border-box;
	display: block;
	width: var(--armour-badge-size);
	height: var(--armour-badge-size);
	padding: 26px;
	object-fit: contain;

	/* Opaque literal first, same reasoning as the spotlight card: the badge
	   overhangs the section above, so an unparsed background would let that
	   section show through the patch. Same ground as the cards, deliberately. */
	background-color: var(--armour-card-bg);
	background-color: color-mix(in srgb, var(--armour-band) 94%, #ffffff);

	border: 1px solid var(--armour-badge-border);
	border-radius: var(--armour-badge-radius);
	box-shadow: var(--armour-badge-shadow);

	/* Half the badge hangs above the footer's top border. */
	margin: calc(var(--armour-badge-size) / -2) auto 2em auto;

	/* Paints above the footer's border-top and the section behind it. */
	position: relative;
	z-index: 1;

	/* Was 0.85 while it was a flat mark; a deliberate badge earns full weight. */
	opacity: 1;
}

@media screen and (max-width: 736px) {

	.footer-logo {
		width: var(--armour-badge-size-small);
		height: var(--armour-badge-size-small);
		padding: 17px;
		/* Not half the badge here. On a phone the section above ends flush with
		   the footer — the last contact row measured 4px BELOW the footer's top
		   edge — so a half-height bite landed straight on the Instagram line.
		   A shallower bite, plus the clearance added to #contact below. */
		margin-top: calc(var(--armour-badge-overhang-small) * -1);
	}

	/* Makes room for what the badge hangs into. Without this the overhang has
	   nothing to overhang onto but live content. */
	#contact {
		padding-bottom: 5em;
	}

}

/* --- Header badge --------------------------------------------------------- */

/* Same patch as the footer, sized to live inside the fixed 3em header bar.
   The mark has to shrink to make room for the box around it: it was a 30px
   shield, and is now a 20px shield inside a 34px patch, so the badge occupies
   about the same room in the bar as the bare logo did.

   No vertical centring needed — #header h1 a is already an inline-flex with
   align-items: center, so a fixed-size block centres itself in the bar. */

.header-logo {
	box-sizing: border-box;
	width: var(--armour-header-badge-size);
	height: var(--armour-header-badge-size);
	padding: 7px;
	object-fit: contain;

	/* Opaque literal before the color-mix, as everywhere else here: the header
	   is translucent over the hero photograph, so an unparsed background would
	   let the picture through the patch. */
	background-color: var(--armour-card-bg);
	background-color: color-mix(in srgb, var(--armour-band) 94%, #ffffff);

	border: 1px solid var(--armour-badge-border);
	border-radius: var(--armour-header-badge-radius);
	box-shadow: var(--armour-header-badge-shadow);
}

@media screen and (max-width: 736px) {

	.header-logo {
		width: var(--armour-header-badge-size-small);
		height: var(--armour-header-badge-size-small);
		padding: 6px;
	}

}

/* The name was 0.85em on a 0.95em anchor — 12.92px at 0.18em tracking, which
   measured 147px wide, over four times the badge's height. Against a 34px mark
   it read as the headline with the logo as decoration, rather than the other
   way round. Same selector main.css uses, so this simply supersedes it. */
#header:not(.alt) .header-name {
	font-size: var(--armour-header-name-size);
	letter-spacing: var(--armour-header-name-tracking);
}

/* --- "What I Do" cards ---------------------------------------------------- */

/* Spectral builds these four as one slab: flush 50% flex items, each tinted a
   step darker than the last, with a 3px radius on only the slab's outer
   corners. Prising them apart into separate raised cards means undoing all
   three of those, plus opening a gap the template never leaves room for. */

.features {
	gap: var(--armour-feature-gap);
}

/* The 50% widths assume no gap, so they have to come down by half of it or the
   pair no longer fits on one row. Scoped to 737px and up: below that the
   template puts one card per row at 100%, and that rule sits earlier in the
   cascade than this sheet, so an unscoped width here would override it. */
@media screen and (min-width: 737px) {

	.features li {
		width: calc(50% - var(--armour-feature-gap) / 2);
	}

}

/* :nth-child(n) matches the specificity of the template's per-child tints and
   its corner radii, so both are superseded by load order rather than force.
   The background still needs !important, because below 736px the template
   sets background-color: transparent !important to strip the tints for its
   stacked layout — and that beats specificity outright. */
.features li:nth-child(n) {
	background-color: var(--armour-card-bg) !important;
	background-color: color-mix(in srgb, var(--armour-band) 94%, #ffffff) !important;

	/* All four corners, not just the slab's outer ones. */
	border-radius: var(--armour-card-radius);

	/* Width and style are unclaimed; the colour needs !important because
	   main.css pins it with one. Below 736px this also replaces the template's
	   2px white top border, which was its separator for the stacked list. */
	border-width: 1px;
	border-style: solid;
	border-color: var(--armour-card-border) !important;

	box-shadow: var(--armour-feature-shadow);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.features li:nth-child(n):hover {
	transform: translateY(-4px);
	box-shadow: var(--armour-feature-shadow-hover);
	border-color: rgba(201, 162, 39, 0.45) !important;
}

/* Below 736px the template sets `padding: 3em 0 1em 0` — no horizontal padding
   at all, which was correct when these were transparent full-bleed rows. Now
   that each one is a bordered card, the copy runs straight into its own edge,
   so the inset has to be put back. */
@media screen and (max-width: 736px) {

	.features li:nth-child(n) {
		padding-left: 1.75em;
		padding-right: 1.75em;
	}

}

/* The lift is decoration; the card still gets its raised shadow without it. */
@media (prefers-reduced-motion: reduce) {

	.features li:nth-child(n) {
		transition: none;
	}

	.features li:nth-child(n):hover {
		transform: none;
	}

}

/* --- Testimonials --------------------------------------------------------- */

/* These were the last flat panels on the page, sitting between two runs of
   raised cards, which read as an unfinished section rather than a deliberate
   change of idiom. Same ground, hairline and shadow as everything else.

   The 3px gold rule down the left is kept: it is what marks these as quotes
   rather than another feature card, and main.css pins it with !important, so
   only the other three edges are set here. No hover lift either — a quote is
   not interactive, and lifting it would promise a click that does not exist. */

#testimonials blockquote {
	background-color: var(--armour-card-bg);
	background-color: color-mix(in srgb, var(--armour-band) 94%, #ffffff);

	border-top: 1px solid var(--armour-card-border);
	border-right: 1px solid var(--armour-card-border);
	border-bottom: 1px solid var(--armour-card-border);
	border-radius: var(--armour-card-radius);

	box-shadow: var(--armour-feature-shadow);

	/* A little more room than the flat panel needed. */
	padding: 1.75em 1.75em 1.5em 1.75em;
}

/* --- Banner button on mobile ---------------------------------------------- */

/* Spectral grows buttons at <=736px for tappability — height and line-height go
   from 3.125em to 3.75em — but leaves the label at font-size 0.8em, and its own
   base font-size steps down to 12.83px on a small screen. The result measured
   10.27px of text inside a 39px-tall button: the box is nearly four times the
   height of the word it contains.

   The label goes up and the box stays put. Tracking and padding come down to
   pay for the extra glyph width, because .button is white-space: nowrap and the
   widest phones here are only 375px — grow the text without buying the room
   back and it simply overflows the screen. */
@media screen and (max-width: 736px) {

	#banner .button {
		font-size: 0.95em;
		height: 3.2em;
		line-height: 3.2em;
		padding: 0 1.5em;
		letter-spacing: 0.08em;

		/* .button caps itself at max-width: 30em, which is 30x its OWN font-size
		   — so raising the label from 10.27px to 13.93px pushed that cap past
		   the screen and the button went edge to edge with no gutter. Pinned to
		   the container instead, which holds a 20px gutter at every width. */
		max-width: calc(100% - 2.5rem);
	}

}

/* --- Footer credit hierarchy ---------------------------------------------- */

/* Stacked on a phone, the design credit read as the louder of the two lines:
   the copyright sat at #6a6a6a while the DenMotion link beneath it is #9a9a9a
   and underlined. Same font-size on both — measured 11.73px each — so it was
   purely contrast and the longer string doing it.

   Rather than dim the link, which is the accessible half of the pair (7.2:1
   against the footer, against 3.75:1 for #6a6a6a — already under AA), the
   copyright is brought up to meet it. Stephen's line is then never darker than
   his designer's, and the small print gets more legible rather than less. */
#footer .copyright li {
	color: #9a9a9a !important;
}

/* Below 480px the template stacks the two onto separate lines. With both the
   same colour, size is what carries the hierarchy, so the credit steps down. */
@media screen and (max-width: 480px) {

	#footer .copyright li:last-child {
		font-size: 0.85em;
		letter-spacing: 0.16em;
	}

}

/* --- Legal pages (privacy.html) ------------------------------------------- */

/* A reading column, not a marketing band. The section is a plain
   .wrapper.style1 so it inherits the site's black ground, the gold-underlined
   h2 and the responsive gutters; everything below narrows it to a measure that
   can actually be read and turns the copy left-aligned, which .special never
   is on the landing page. */

.legal-head {
	text-align: center;
	margin-bottom: 3em;
}

.legal {
	/* ~70 characters at this font size. Wider than this and the eye loses the
	   start of the next line on a long clause. */
	max-width: 42em;
	margin: 0 auto;
	text-align: left;
}

/* .wrapper.style1 p carries !important in main.css at 0-2-1, so the reading
   colour has to be stated at least as specifically to land. Brought up from
   the band's #b4b4b4 to the brand's body grey: this is a page of small print
   and it needs the contrast more than a three-line marketing paragraph does. */
.wrapper.style1 .legal p,
.wrapper.style1 .legal li {
	color: #c2c2c2 !important;
	font-size: 1em;
	line-height: 1.75;
}

.wrapper.style1 .legal strong {
	color: #f4f4f4 !important;
}

.legal a {
	color: #c9a227 !important;
	border-bottom-color: rgba(201, 162, 39, 0.4);
}

.legal a:hover {
	color: #e0b836 !important;
	border-bottom-color: rgba(224, 184, 54, 0.6);
}

.legal-updated {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75em !important;
	color: #8a8a8a !important;
	margin-bottom: 2.5em;
}

/* Numbered section headings. The rule under each one is the page's only
   repeating structure, so it does the work the gold underline does for h2. */
.legal h3 {
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #f4f4f4 !important;
	margin: 3em 0 1.25em 0;
	padding-bottom: 0.75em;
	border-bottom: solid 1px rgba(201, 162, 39, 0.28);
}

/* Sub-headings inside a section: gold, no rule, so the hierarchy is colour
   against the h3's line rather than two competing rules. */
.legal h4 {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #c9a227 !important;
	margin: 2.25em 0 0.75em 0;
}

/* Gold discs rather than the browser's bullets, which sat as grey dashes
   outside the measure and read as an unstyled document.

   :not(.actions) throughout: ul.actions is Spectral's button row, and it was
   picking up an indent and a bullet of its own beside "Back To The Site". */
.legal ul:not(.actions) {
	list-style: none;
	padding-left: 0;
	margin-bottom: 2em;
}

.legal ul:not(.actions) li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.85em;
}

.legal ul:not(.actions) li:before {
	content: '';
	position: absolute;
	left: 0;
	/* Sits on the first line's optical centre, not its top. */
	top: 0.75em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #c9a227;
}

/* The summary card. Same raised-panel treatment as the feature cards on the
   landing page, so the page opens with something that belongs to the site
   rather than with a wall of clauses. */
.legal-summary {
	background-color: var(--armour-card-bg);
	border: solid 1px var(--armour-card-border);
	border-radius: var(--armour-card-radius);
	box-shadow: var(--armour-card-shadow);
	padding: 1.75em 2em 1.5em 2em;
	margin-bottom: 3.5em;
}

/* First heading in the card: no 3em lead-in, and no rule — the card's own
   border is already drawing the box. */
.legal-summary h3 {
	margin-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
	color: #c9a227 !important;
}

/* Matched to the :not(.actions) selectors above, which are a class heavier
   than a bare `.legal-summary ul` and would otherwise keep the 2em/0.85em
   spacing meant for the flowing body copy. */
.legal .legal-summary ul:not(.actions) {
	margin-bottom: 0;
}

.legal .legal-summary ul:not(.actions) li:last-child {
	margin-bottom: 0;
}

.legal-actions {
	margin-top: 3.5em;
}

@media screen and (max-width: 736px) {

	.legal-summary {
		padding: 1.5em 1.5em 1.25em 1.5em;
	}

	.legal h3 {
		margin-top: 2.5em;
	}

	/* Full width, so the tap target matches the Send button in the form. */
	.legal-actions .button {
		width: 100%;
	}

}

/* --- Contact form privacy line -------------------------------------------- */

/* Lives INSIDE #contact-form, which means it travels with the form when the
   booking script moves it into the dialog — one line of markup that shows up
   in both places, and no second copy to keep in step.
   The link opens in a new tab on purpose: followed from inside the dialog it
   would otherwise navigate away and bin whatever the visitor had typed. */
.form-privacy {
	font-size: 0.8em !important;
	line-height: 1.6;
	color: #8a8a8a !important;
	margin: 1.25em 0 0 0 !important;
}

.form-privacy a {
	color: #9a9a9a !important;
	border-bottom-color: rgba(201, 162, 39, 0.35);
}

.form-privacy a:hover {
	color: #c9a227 !important;
	border-bottom-color: rgba(201, 162, 39, 0.7);
}

/* In the dialog the panel's own padding closes the page-side gap under it. */
.armour-modal .form-privacy {
	margin-top: 1em !important;
}