/* ==========================================================================
   Zara — shared parent stylesheet

   The mockups are 1440px-wide designs exported at 724px, so every measurement
   taken from a mockup is doubled here. Child themes override only the palette
   block at the top; everything below is shared by all three sites.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
	/* Palette — overridden per site by the child theme. */
	--ink: #000000;
	--paper: #fbfbf9;
	/* The mockups alternate three near-identical tints down the page; both
	   values were sampled from the outer margin of image9. */
	--tint: #f7f7f5;
	--tint-b: #f3f3f1;
	/* Sampled text colours. Only the tile sub-labels are really grey — the
	   eyebrows, nav and body copy all read near-black in the mockups. */
	--near: #1a1a1a;
	--soft: #333333;
	--muted: #8c8c8c;
	--line: #e2e2dd;
	--on-dark: #ffffff;
	/* Validation. No mockup shows an error state, so this is a desaturated
	   red chosen to sit inside each palette rather than shout over it; a
	   child theme can retune it. */
	--err: #9c2f22;
	--ok: #2f6b4f;
	--on-dark-dim: rgba(255, 255, 255, 0.78);

	/* Type */
	--serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Headings are the display serif on every site, but the running copy is
	   not: New York sets it in the sans, Montreal in a text serif. Two tokens
	   rather than one because the two kinds of copy are set separately in the
	   mockups — `--body` is ordinary paragraphs, `--quote` is the pull quote,
	   the testimonials, the terms and the note on usage, which New York sets
	   in the display serif. A child theme overrides one or both. */
	--body: var(--sans);
	--quote: var(--serif);

	/* Layout — content is 1260px inside 90px gutters (3 tiles of 403 + 2
	   gaps of 24, measured off the mockup tile grid). */
	--wrap: 1260px;
	--gutter: 90px;
	--head-h: 122px;
	--tile-gap: 24px;

	/* Rhythm — section-to-section gap in the mockups is ~130px, so half
	   that as symmetric block padding. */
	--sec-pad: 64px;
	--eyebrow-gap: 10px;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr,
.skip {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip:focus {
	position: fixed;
	top: 8px; left: 8px;
	width: auto; height: auto;
	padding: 10px 16px;
	clip: auto;
	z-index: 200;
	background: var(--ink);
	color: var(--on-dark);
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap-narrow { max-width: calc(860px + var(--gutter) * 2); }

.sec { padding-block: var(--sec-pad); }

.ln { display: block; }

/* --- Type scale --------------------------------------------------------- */

.eyebrow {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--near);
}

.h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 64px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.body {
	font-family: var(--body);
	font-size: 20px;
	line-height: 1.6;
	color: var(--near);
}

/* Section intro paragraphs sit a step above body copy in the mockups. */
.lead {
	font-family: var(--body);
	font-size: 22px;
	line-height: 1.5;
	color: var(--near);
}

.rich p { margin-block: 0 1em; }

/* --- Buttons and links -------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	padding: 0 37px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s;
}

.btn-solid {
	background: var(--ink);
	color: var(--on-dark);
	border: 1px solid var(--ink);
}
.btn-solid:hover { background: transparent; color: var(--ink); }

.btn-ghost {
	background: transparent;
	color: var(--on-dark);
	border: 1px solid rgba(255, 255, 255, 0.65);
}
.btn-ghost:hover { background: var(--on-dark); color: var(--ink); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.link-arrow .ico { width: 16px; }
.link-arrow .ico svg { width: 16px; height: 16px; }
.link-arrow:hover .ico { transform: translateX(3px); }
.link-arrow .ico { transition: transform .2s; }

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

.site-head {
	position: relative;
	z-index: 20;
	background: var(--paper);
}

.head-in {
	display: flex;
	align-items: center;
	/* the mockups leave a wide run of whitespace between the last nav item and the
	   CTA button — 141px, measured on image4 */
	gap: 140px;
	min-height: var(--head-h);
}

.logo { margin-right: auto; }

.logo-mark {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-weight: 500;
	font-size: 39px;
	line-height: 1;
	/* The mockup wordmark is large and set almost solid — the airy tracking
	   this started with made the glyphs too small for the same total width. */
	letter-spacing: 0.02em;
}

.logo-sub {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--soft);
	text-align: center;
	/* the tracking on the mark adds a trailing gap; pull the sub back to
	   sit visually centred under it, as in the mockups */
	padding-right: 0.06em;
}

.nav ul {
	display: flex;
	align-items: center;
	gap: 50px;
}

.nav a {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--near);
	position: relative;
	padding-block: 4px;
}
.nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: currentColor;
	transition: right .25s;
}
.nav a:hover::after { right: 0; }

.head-cta { min-height: 52px; padding: 0 30px; }

.nav-toggle { display: none; }

/* --- Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--on-dark);
	isolation: isolate;
}

.hero--home { min-height: 894px; }
.hero--sub { min-height: 537px; }

.hero-bg,
.band-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
}

/* The mockups bake a dark gradient into the artwork so the white type reads.
   Our masters are clean photographs, so the scrim lives here and follows the
   breakpoint instead of being frozen into the file.

   The stops below are not a guess: the mockup hero was sampled column by
   column against our unscrimmed render and solved for alpha, which gave
   0.60 at the left edge falling to zero by 34% — a much steeper and narrower
   ramp than the one first written here. There is no top-down gradient in the
   mockups at all; the sky stays bright. */
.hero-scrim,
.band-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero-scrim {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, .60) 0%,
		rgba(0, 0, 0, .58) 10%,
		rgba(0, 0, 0, .48) 18%,
		rgba(0, 0, 0, .36) 26%,
		rgba(0, 0, 0, .20) 35%,
		rgba(0, 0, 0, .15) 44%,
		rgba(0, 0, 0, .04) 52%,
		rgba(0, 0, 0, 0) 58%
	);
}

/* The closing band reads flatter than the hero: the mockup's left ramp is
   gentler but it never fully clears, so a low dim carries to the right edge.
   Column-wise sampling is noisy here because our master is not pixel-aligned
   with the mockup's crop, so these stops were set from the overall reading
   and then checked visually. */
.band-scrim {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, .58) 0%,
		rgba(0, 0, 0, .52) 12%,
		rgba(0, 0, 0, .42) 26%,
		rgba(0, 0, 0, .30) 42%,
		rgba(0, 0, 0, .20) 62%,
		rgba(0, 0, 0, .15) 100%
	);
}

/* Some subpage heroes and CTA bands are deliberately soft in the mockups. */
.is-soft .hero-bg,
.is-soft .band-bg { filter: blur(3px); transform: scale(1.03); }

.hero-in { position: relative; width: 100%; }

.hero-h {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 76px;
	line-height: 1.14;
	letter-spacing: -0.005em;
	margin-top: 18px;
}

/* The subpage heroes carry larger type than the homepage hero in the
   mockups — measured on image4's "Request / Availability". */
.hero--sub .hero-h { font-size: 84px; }
.hero--sub .hero-body { font-size: 24px; max-width: 720px; }

.hero .eyebrow { color: var(--on-dark); letter-spacing: 0.2em; }

.hero-body {
	font-family: var(--body);
	max-width: 30em;
	margin-top: 28px;
	font-size: 20px;
	line-height: 1.6;
	color: #ededed;
}

/* New York sets this link off with a short rule above it and underlines the
   label but not the arrow. Where the mockup boxes the call to action instead
   there is no rule, and the button carries its own spacing. */
.hero-act {
	position: relative;
	margin-top: 78px;
}
.hero-act--boxed { margin-top: 44px; }
.hero-act--boxed::before { content: none; }
.hero-act::before {
	content: "";
	position: absolute;
	left: 0;
	top: -26px;
	width: 84px;
	height: 1px;
	background: rgba(255, 255, 255, .8);
}
.hero-act .link-arrow {
	font-size: 15px;
	color: var(--on-dark);
}
.hero-act .link-arrow .lbl { border-bottom: 1px solid rgba(255, 255, 255, .8); padding-bottom: 5px; }

/* An arrow inside a ghost button sits after the label with the mockup's gap;
   the label keeps its tracking, so the gap is set on the icon. */
.btn-ghost { display: inline-flex; align-items: center; }
.btn-ghost .ico { margin-left: 26px; }
.btn-ghost .ico svg { display: block; width: 20px; height: 20px; }

.hero-aside,
.band-aside {
	position: absolute;
	right: var(--gutter);
	bottom: 56px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
	text-align: left;
	padding-left: 56px;
}
.hero-aside::before,
.band-aside::before {
	content: "";
	position: absolute;
	left: 0; top: 0.7em;
	width: 40px; height: 1px;
	background: currentColor;
	opacity: .7;
}

/* --- Section head ------------------------------------------------------- */

.sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 46px;
}

/* --- Portfolio tiles ---------------------------------------------------- */

.sec-work { background: var(--tint); padding-top: 70px; }

.tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px var(--tile-gap);
}

.tile-img {
	aspect-ratio: 203 / 210;
	overflow: hidden;
	background: var(--tint);
}
.tile-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tile:hover .tile-img img { transform: scale(1.04); }

.tile figcaption { padding-top: 14px; }

.tile-t {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2a2a2a;
}

.tile-s {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --- About -------------------------------------------------------------- */

.about-in {
	display: grid;
	grid-template-columns: 628fr 604fr;
	gap: 48px;
	align-items: start;
}

.sec-about { background: var(--tint-b); padding-top: 54px; }

/* The mockup drops the about copy ~60px below the top of the photograph
   rather than aligning their tops. */
.about-copy { padding-top: 56px; }

.about-img { aspect-ratio: 314 / 272; overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }

.about-copy .h2 { margin-top: 12px; }
.about-copy .body { margin-top: 24px; max-width: 517px; }

/* Shared link treatment: a short rule above, and the label underlined but
   not the arrow — the way every mockup draws these. */
.act {
	position: relative;
	margin-top: 66px;
}
.act::before {
	content: "";
	position: absolute;
	left: 0;
	top: -24px;
	width: 62px;
	height: 1px;
	background: var(--ink);
	opacity: .45;
}
.act .link-arrow .lbl {
	border-bottom: 1px solid currentColor;
	padding-bottom: 5px;
}

.rule { display: block; width: 76px; height: 1px; background: var(--ink); opacity: .35; }

/* --- Clients / featured quote ------------------------------------------- */

.sec-clients { background: var(--tint); }
.sec-clients .h2 { margin-top: 12px; }

.clients-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
}

.clients-body { max-width: 30em; color: var(--soft); }

/* Montreal introduces the row with an inline label instead of a heading, so
   the marks follow it closely rather than after a heading block's worth of
   space. */
.clients-label + .marks { margin-top: 38px; }

/* Six equal columns with each wordmark centred in its own cell reproduces
   the mockup spacing better than space-between, which pins the first and
   last marks hard against the container edges. */
.marks {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	justify-items: center;
	margin-top: 74px;
}

.mark {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.06;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-align: center;
	white-space: nowrap;
}

/* Each of the six marks is a fixed brand wordmark and the mockup sets every
   one of them differently, so they are styled individually. The brands differ
   per city, so those six rules live in each child theme's stylesheet; only
   what they share is here. */

.mark-icon {
	display: block;
	margin: 0 auto 6px;
	width: 50px;
	color: var(--ink);
}
.mark-icon svg { display: block; width: 100%; height: auto; }

/* The hairline above the quote is inset from the container in the mockups —
   1058px wide, centred — rather than running the full 1260. */
.feat-quote {
	position: relative;
	max-width: 820px;
	margin: 92px auto 0;
	text-align: center;
}
.feat-quote::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	width: 1058px;
	max-width: 100vw;
	height: 1px;
	background: var(--line);
}

.feat-quote blockquote p {
	font-family: var(--quote);
	font-weight: 400;
	font-style: italic;
	font-size: 28px;
	line-height: 1.45;
}

.feat-quote figcaption {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #444444;
}

/* --- Optional mid band (MTL "Book Coverage") ---------------------------- */

.extra-in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.extra-side { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }

/* --- More Than a Portfolio ---------------------------------------------- */

/* The mockup runs this section's bottom padding right down to the CTA band,
   with the rule + copyright link acting as the closing element. */
.sec-mtp { padding-bottom: 24px; }
.sec-mtp .h2 { margin-top: 36px; }
.mtp-body { margin-top: 8px; max-width: 46em; }

.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 125px, measured between the two card edges on image9 — much wider
	   than a normal grid gutter, and it sets the card width and therefore
	   the image height. */
	gap: 125px;
	margin-top: 60px;
}

.card a { display: block; }

.card-img {
	display: block;
	aspect-ratio: 286 / 145;
	background-size: cover;
	background-position: center;
	/* the mockup cards are dimmed and softened; done here, not in the file */
	filter: grayscale(0) brightness(.86) blur(1px);
}

.card-body {
	display: block;
	padding: 24px 28px 14px;
	background: var(--ink);
	color: var(--on-dark);
}
.card-body .eyebrow { color: #ffffff; letter-spacing: 0.12em; }

.card-t {
	display: block;
	margin-top: 20px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.22;
	color: #ffffff;
}

.card-body .link-arrow {
	margin-top: 14px;
	letter-spacing: 0.1em;
	color: #ffffff;
}

.mtp-foot {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* --- Closing band ------------------------------------------------------- */

.band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 584px;
	overflow: hidden;
	color: var(--on-dark);
	isolation: isolate;
}

.band--solid { background: var(--ink); min-height: 0; padding-block: 96px; }

/* The photo bands are not quite vertically centred in the mockups — the
   copy sits about 28px below centre. */
.band-in { position: relative; width: 100%; }
.band--photo .band-copy { padding-top: 28px; }

.band-h {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 68px;
	line-height: 1.14;
	margin-top: 4px;
}

.band .eyebrow { color: var(--on-dark); letter-spacing: 0.2em; }
.band .body { margin-top: 46px; max-width: 32em; color: #f2f2f2; }
.band-act { margin-top: 38px; }
.band .btn { min-height: 62px; }
.band-aside { color: #ffffff; }
.band .btn-ghost { border-color: rgba(255, 255, 255, .85); }

/* The Copyright pages put the button on the right of a single row. */
.band--solid .band-in {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
}
.band--solid .band-h { font-size: 44px; }
.band--solid .band-act { margin-top: 0; }

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

.tst-label { margin-bottom: 76px; }

.tst-row {
	display: grid;
	grid-template-columns: 406fr 810fr;
	gap: 64px;
	align-items: center;
	padding-block: 46px;
	border-top: 1px solid var(--line);
}
.tst-row:first-child { border-top: 0; padding-top: 0; }

.tst-row.is-right { grid-template-columns: 810fr 406fr; }
.tst-row.is-right .tst-img { order: 2; }
.tst-row.is-right .tst-q { order: 1; }

.tst-img { aspect-ratio: 203 / 149; overflow: hidden; background: var(--tint); }
.tst-img img { width: 100%; height: 100%; object-fit: cover; }

.tst-q blockquote p {
	font-family: var(--quote);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.45;
}

.tst-q figcaption {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --- Review submission (not in the mockups; fills the gap they leave) --- */

.sec-submit { background: var(--tint); }
.sec-submit .h2 { margin-top: 12px; font-size: 40px; }
.sec-submit .body { margin-top: 14px; color: var(--soft); }
.review-form { position: relative; margin-top: 40px; }

/*
   Strong Testimonials' own form stylesheet is only enqueued for views it
   finds by scanning post content for its shortcode. This form is rendered
   from a template part, so the plugin never sees it and none of its CSS
   loads — including the rule that keeps the submit spinner hidden, which is
   why it appeared full size on the page. Rather than hardcode a path into
   the plugin's template folder, the handful of rules that matter are written
   here, matched to the Book page's field treatment.
   Selectors belonging to the plugin are marked PLUGIN.
*/

.review-form .strong-form-wait {                             /* PLUGIN */
	display: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(251, 251, 249, .72);
}
.review-form .strong-form-wait.is-visible { display: block; }
.review-form .strong-form-wait .message {                    /* PLUGIN */
	position: absolute;
	top: calc(50% - 22px);
	width: 100%;
	height: 44px;
	text-align: center;
}
.review-form .strong-form-wait .message img {                /* PLUGIN */
	width: 44px;
	height: 44px;
	margin: 0 auto;
	animation: zara-spin 1.4s linear infinite;
}
@keyframes zara-spin { to { transform: rotate(-360deg); } }

.review-form .wpmtst-required-notice { display: none; }      /* PLUGIN */

.review-form .wpmtst-submission-form {                       /* PLUGIN */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 32px;
}
.review-form .wpmtst-field-post_content,                     /* PLUGIN */
.review-form .wpmtst-submit { grid-column: 1 / -1; }

.review-form .wpmtst-form-field > label {                    /* PLUGIN */
	display: block;
	padding-bottom: 16px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.review-form .wpmtst-required.wpmtst-symbol { display: none; } /* PLUGIN */
.review-form .wpmtst-after { display: none; }                /* PLUGIN */

.review-form .wpmtst-text,                                   /* PLUGIN */
.review-form .wpmtst-textarea {
	display: block;
	width: 100%;
	height: 68px;
	padding: 0 18px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}
.review-form .wpmtst-text:focus,
.review-form .wpmtst-textarea:focus { border-color: var(--ink); outline: 0; }
.review-form .wpmtst-textarea {
	height: 163px;
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
}

/* The plugin wraps the submit input inside a bare <label>, so the label has
   to stay in the flow and only the input is styled. */
.review-form .wpmtst-submit label { display: block; }        /* PLUGIN */
.review-form .wpmtst-submit input[type="submit"],            /* PLUGIN */
.review-form input.wpmtst_submit_testimonial {
	display: block;
	width: 100%;
	min-height: 88px;
	padding: 0 24px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-dark);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.review-form .wpmtst-submit input[type="submit"]:hover,
.review-form input.wpmtst_submit_testimonial:hover {
	color: var(--ink);
	background: transparent;
}

/* Validation and the post-submit message. */
.review-form .wpmtst-error-message,                          /* PLUGIN */
.review-form label.error {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: #a3241d;
}
.review-form input.wpmtst-error,                             /* PLUGIN */
.review-form textarea.wpmtst-error { border-color: #a3241d; background: var(--paper); }

.review-form .wpmtst-success,                                /* PLUGIN */
.review-form .strong-form-success {
	padding: 22px 26px;
	font-size: 16px;
	background: var(--paper);
	border-left: 3px solid var(--ink);
}
/* It is in the markup from the start, so it only exists once filled. */
.book-form .ea-bootstrap #booking-overview:empty { display: none; } /* PLUGIN */

/* --- Book page ---------------------------------------------------------- */
/*
   Everything below restyles Easy Appointments' own markup. The plugin keeps
   ownership of the form; these rules only change how it looks, and the
   geometry comes from measuring image4.png (see MEASUREMENTS.md).
   Selectors that belong to the plugin are marked PLUGIN so it is obvious
   which ones to re-check after a plugin update.
*/

.step-label { margin-bottom: 10px; }

.book-h {
	font-size: 34px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 34px;
}

/* 01 / SERVICE — the project-type tiles, built from the plugin's select. */

.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 22px;
	margin-bottom: 62px;
}

.svc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 86px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--line);
	transition: background-color .2s, color .2s, border-color .2s;
}
.svc:hover { border-color: var(--ink); }
.svc.is-on {
	color: var(--on-dark);
	background: var(--ink);
	border-color: var(--ink);
}

/* Two columns: calendar and times on the left, details on the right. */

.book-form .ea-bootstrap { max-width: none !important; }     /* PLUGIN */

.book-form .form-horizontal {                                /* PLUGIN */
	display: grid;
	grid-template-columns: 610fr 595fr;
	gap: 64px;
	align-items: start;
}

/* Bootstrap ships .col-md-6 { float: left; width: 50% } and the plugin's
   stylesheet loads after the theme's, so both the width and the float have to
   be overridden or the calendar column collapses to half its grid track. */
.book-form .col-md-6,                                        /* PLUGIN */
.book-form .step.final {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	min-width: 0;
	padding: 0 !important;
}

/* An empty spacer the plugin emits at the top of each step. */
.book-form .step > .block { display: none; }                 /* PLUGIN */

/* The two columns' step labels sit on one line in the mockups; the calendar
   column's starts 16px lower on its own. */
.book-form .step.final { margin-top: 16px; }                 /* PLUGIN */

.step-head { margin-bottom: 18px; }

/* The location, project-type and photographer selects are all driven from
   elsewhere — one location, one photographer, and the tile grid above — so
   the plugin's own rows for them are removed from the layout. */
.book-form .step.form-group,                                 /* PLUGIN */
.book-form .ea-service-description,                          /* PLUGIN */
.book-form .step.final h3,                                   /* PLUGIN */
.book-form .step.final > .ea_hide_show > small,              /* PLUGIN */
.book-form #booking-overview-header,                         /* PLUGIN */
.book-form .ea-bootstrap .ea-cancel { display: none !important; } /* PLUGIN */

/* The plugin shows a confirmation summary between submit and save. The
   mockup has no such step, but it is the plugin's own flow and a booking
   request is worth confirming, so it is styled to belong rather than hidden. */
.book-form .ea-bootstrap #booking-overview {                 /* PLUGIN */
	margin-bottom: 26px;
	padding: 24px 26px;
	background: var(--tint);
	border-left: 3px solid var(--ink);
}
.book-form .ea-bootstrap #booking-overview #ea-overview-message {
	display: block;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--soft);
}
.book-form .ea-bootstrap #booking-overview table { width: 100%; border-collapse: collapse; }
.book-form .ea-bootstrap #booking-overview td {
	padding: 7px 0;
	font-size: 15px;
	vertical-align: top;
	border: 0;
}
.book-form .ea-bootstrap #booking-overview td.ea-label {
	width: 40%;
	padding-right: 16px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
/* One location and one photographer per site, so those two rows say nothing. */
.book-form .ea-bootstrap #booking-overview .row-price,
.book-form .ea-bootstrap #booking-overview .row-location,
.book-form .ea-bootstrap #booking-overview .row-worker,
.book-form .ea-bootstrap #booking-overview .row-service-description { display: none; }

.book-form .block { display: none; }                         /* PLUGIN overlay */

/* The calendar panel: tinted box with a hairline, holding the month grid
   and the time slots (the plugin injects the times into the table itself). */
.book-form .ea-bootstrap .step.calendar {                    /* PLUGIN */
	padding: 42px;
	background: var(--tint);
	border: 1px solid var(--line);
}
.book-form .step.calendar.disabled { opacity: 1; }           /* PLUGIN */
.book-form .step:not(.calendar):not(.final):not(.form-group) { display: none; }

.book-form .ea-bootstrap .ui-datepicker,                     /* PLUGIN jQuery UI */
.book-form .ea-bootstrap .ui-datepicker-inline {
	width: 100% !important;
	margin: 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--sans);
	font-size: inherit;
}

/*
 * jQuery UI and the plugin's bootstrap stylesheet between them draw a blue
 * widget box, 1px grid lines on every cell, a blue current-day fill and
 * Glyphicons arrows. All of it is cleared here. The selectors are prefixed
 * with .book-form .ea-bootstrap so they outrank the plugin's own, which
 * loads after the theme stylesheet.
 */
.book-form .ea-bootstrap .ui-datepicker table,
.book-form .ea-bootstrap .ui-datepicker th,
.book-form .ea-bootstrap .ui-datepicker td {
	border: 0 !important;
	border-radius: 0 !important;
	background: none;
}

.book-form .ea-bootstrap .ui-widget-header,
.book-form .ea-bootstrap .ui-state-default,
.book-form .ea-bootstrap .ui-state-active,
.book-form .ea-bootstrap .ui-state-hover,
.book-form .ea-bootstrap .ui-state-highlight {
	background: none;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-weight: 400;
}

.book-form .ea-bootstrap .ui-datepicker-header {
	position: relative;
	margin: 0;
	padding: 0 0 26px;
	background: none;
	border: 0;
}

.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ink);
}

/* The plugin sets these with a Glyphicons ::before that the site does not
   load, so replace the content with a plain chevron. */
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-prev,
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: -3px;
	float: none;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 21px;
	line-height: 28px;
	text-align: center;
	color: var(--ink);
	cursor: pointer;
	background: none;
	border: 0;
}
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-prev { left: 0; }
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-next { right: 0; }
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-prev::before { content: "\2039"; }
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-next::before { content: "\203A"; }
/* The plugin hides a disabled prev/next arrow outright; the mockup shows
   both, greyed out, so the header never changes shape. */
.book-form .ea-bootstrap .ui-datepicker a.ui-state-disabled,
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-next.ui-state-disabled {
	display: block;
	opacity: .3;
	cursor: default;
}

.book-form .ea-bootstrap .ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar th {
	padding: 0 0 22px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td {
	height: 70px;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	background: none !important;
}
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td:hover { background: none !important; }

.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td a,
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
	background: none;
	border: 0;
}
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td a:hover {
	color: var(--ink);
	background: rgba(0, 0, 0, .07);
}

/* Days outside the booking window, and hours already past today, are the
   plugin's own judgement — they just need to look like the rest of the page. */
.book-form .ea-bootstrap .ui-datepicker .ui-state-disabled span,
.book-form .ea-bootstrap .ui-datepicker .not-working span {
	font-size: 15px;
	color: var(--muted);
	opacity: .5;
}
.book-form .ea-bootstrap .ui-datepicker .no-slots,
.book-form .ea-bootstrap .ui-datepicker .no-slots:hover { background: none !important; }
.book-form .ea-bootstrap .ui-datepicker .no-slots a { color: var(--muted) !important; }

.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-current-day,
.book-form .ea-bootstrap .ui-datepicker td.ui-datepicker-current-day:hover {
	background: none !important;
}
.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-current-day a,
.book-form .ea-bootstrap .ui-datepicker td a.ui-state-active {
	color: var(--on-dark) !important;
	background: var(--ink) !important;
}

/* Available times — moved out of the calendar table by booking.js so they
   sit below the whole month, as the mockup shows. */

.times-head { margin: 84px 0 18px; }

.book-form .ea-bootstrap tr.zara-time-row { display: none; }

.book-form .ea-bootstrap .time {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 26px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: center;
}

.book-form .ea-bootstrap .time .time-value,
.book-form .ea-bootstrap .time .time-disabled {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	max-width: none;
	min-height: 64px;
	padding: 6px 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	transition: background-color .2s, color .2s, border-color .2s;
}
.book-form .ea-bootstrap .time .time-value:hover {
	background: var(--paper);
	border-color: var(--ink);
}
.book-form .ea-bootstrap .time .time-disabled { color: var(--muted); opacity: .5; }

.book-form .ea-bootstrap .time .time-value.selected-time,
.book-form .ea-bootstrap .time .time-value.active {
	color: var(--on-dark) !important;
	background: var(--ink) !important;
	border-color: var(--ink);
}

/* 03 / DETAILS — the plugin's own fields, labels moved above the inputs. */

.book-form .ea-bootstrap .step.final .form-group {           /* PLUGIN */
	display: block;
	width: 100%;
	margin-bottom: 26px;
}

.book-form .ea-bootstrap .step.final .control-label,         /* PLUGIN */
.book-form .ea-bootstrap .step.final .col-sm-4 {
	display: block;
	width: auto;
	padding: 0 0 16px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	color: var(--muted);
}

.book-form .ea-bootstrap .step.final .col-sm-8 { width: 100%; padding: 0; } /* PLUGIN */

/* Required marker. The plugin puts a bare "*" inside the label text;
   booking.js lifts it into its own element so it can be coloured without
   the label's muted grey swallowing it. */
.book-form .ea-bootstrap .step.final .control-label .req {
	margin-left: 5px;
	font-size: 13px;
	line-height: 0;
	color: var(--err);
}

/* Validation messages. jQuery Validate inserts <label class="error"> after
   the field and adds .error to the field itself; both are styled here so a
   failure looks like part of the page rather than like Bootstrap. */
.book-form .ea-bootstrap label.error {                       /* PLUGIN */
	display: block;
	width: 100%;
	margin: 0;
	padding: 9px 0 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--err);
}
.book-form .ea-bootstrap .form-control.error,                /* PLUGIN */
.book-form .ea-bootstrap .form-control.error:focus { border-color: var(--err); }

/* The plugin's own "Fields with * are required" line is hidden along with
   the rest of its headings; the asterisks carry the same meaning in place. */

.book-form .ea-bootstrap .form-control {                     /* PLUGIN */
	display: block;
	width: 100%;
	height: 68px;
	padding: 0 18px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color .2s;
}
.book-form .ea-bootstrap .form-control:focus { border-color: var(--ink); outline: 0; box-shadow: none; }
.book-form .ea-bootstrap textarea.form-control {
	height: 163px;
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
}

.book-form .ea-actions-group { width: auto; padding: 0; }    /* PLUGIN */

.book-form .ea-bootstrap .ea-submit,
.book-form .ea-bootstrap .ea-submit.btn-primary {            /* PLUGIN */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 88px;
	margin-top: 24px;
	padding: 0 24px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-dark) !important;
	background: var(--ink) !important;
	background-image: none !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0;
	text-shadow: none;
	box-shadow: none;
}
.book-form .ea-bootstrap .ea-submit:hover {
	color: var(--ink) !important;
	background: transparent !important;
}
/* The plugin greys the button out until a slot is picked. It still refuses
   to submit without one, so there is no reason to show the grey state. */
.book-form .ea-bootstrap .ea-submit[disabled],
.book-form .ea-bootstrap .step.final.disabled .ea-submit {
	opacity: 1;
	color: var(--on-dark) !important;
	background: var(--ink) !important;
}

.book-form .step.final.disabled { opacity: 1; }              /* PLUGIN */

/* Validation messages and the plugin's status notices. */
.book-form label.error {                                     /* PLUGIN */
	display: block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: #a3241d;
}
.book-form .alert {                                          /* PLUGIN */
	padding: 20px 24px;
	font-size: 15px;
	background: var(--tint);
	border: 0;
	border-left: 3px solid var(--ink);
	border-radius: 0;
	color: var(--ink);
}

/* --- Custom project band ------------------------------------------------ */

.sec-custom { padding: 0; background: var(--tint); }

.custom-in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 400px;
}

.custom-copy { display: flex; align-items: center; padding-block: 56px; }
.custom-copy .wrap-h {
	width: 100%;
	max-width: calc(var(--wrap) / 2);
	margin-left: auto;
	padding-right: 64px;
	padding-left: var(--gutter);
}
.custom-copy .h2 { margin-top: 12px; font-size: 42px; }
.custom-copy .body { margin-top: 16px; max-width: 26em; }
.custom-copy .btn { margin-top: 32px; }

.custom-img { position: relative; overflow: hidden; }
.custom-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Copyright terms ---------------------------------------------------- */

.terms-intro {
	margin-top: 18px;
	font-family: var(--quote);
	font-style: italic;
	font-size: 19px;
	color: var(--soft);
}

.terms {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px 96px;
	margin-top: 52px;
}

.term-t {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.term-n { margin-right: 2px; }

.term-b {
	/* Measured on image6: 30px line pitch, 24px below the section title. */
	margin-top: 24px;
	font-family: var(--quote);
	font-size: 19px;
	line-height: 1.58;
	color: var(--soft);
}

/* --- Note on usage ------------------------------------------------------ */

.note-in {
	display: grid;
	grid-template-columns: 580fr 700fr;
	gap: 0;
	align-items: stretch;
}

.note-img { position: relative; overflow: hidden; min-height: 420px; }
.note-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.note-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px;
	background: var(--tint);
}

.note-text {
	margin-top: 16px;
	font-family: var(--quote);
	font-size: 25px;
	line-height: 1.44;
}

.note-cite {
	margin-top: 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

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

.site-foot { background: var(--paper); }

/* Column starts measured off image4: 90 / 426 / 724, social flush right. */
.foot-in {
	display: grid;
	grid-template-columns: 336px 298px 1fr auto;
	gap: 0;
	align-items: start;
	padding-block: 66px 58px;
}

.foot-nav a {
	display: block;
	padding-block: 6px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--near);
}

.foot-blurb .blurb {
	font-family: var(--quote);
	font-size: 20px;
	line-height: 1.5;
	max-width: 18em;
}

.foot-mail { margin-top: 32px; font-size: 16px; }
.foot-mail a { border-bottom: 1px solid var(--line); }

.social { display: flex; gap: 18px; }
.social a { display: block; color: var(--ink); opacity: .85; }
.social a:hover { opacity: 1; }
.social svg { width: 19px; height: 19px; }

.foot-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px 62px;
	border-top: 1px solid var(--line);
}

.foot-bar p,
.foot-bar a {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.foot-links { display: flex; align-items: center; gap: 28px; }
.foot-links a:hover { color: var(--ink); }
.foot-tag { display: inline-flex; align-items: center; gap: 8px; opacity: .72; }

/* --- Plain pages -------------------------------------------------------- */

.sec-plain { min-height: 50vh; }

.zara-notice {
	padding: 20px 24px;
	background: var(--tint);
	border-left: 3px solid var(--ink);
	font-size: 14px;
}

/* --- Contact popup ------------------------------------------------------ */
/*
   No mockup draws this dialog, so it is assembled out of the parts the
   mockups do define: the Book page's field, label and button treatment, the
   section eyebrow, and the display serif for the heading. The child themes
   set the palette, so it lands in each site's own colours without any
   per-site rules.
*/

.contact-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .22s ease;
}
.contact-modal[hidden] { display: none; }
.contact-modal.is-open { opacity: 1; }

.contact-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

/* Keeping the page from scrolling behind the dialog. */
body.has-modal { overflow: hidden; }

.contact-panel {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 56px 60px 60px;
	background: var(--paper);
	border: 1px solid var(--line);
	transform: translateY(12px);
	transition: transform .22s ease;
}
.contact-modal.is-open .contact-panel { transform: none; }

.contact-x {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 30px;
	line-height: 1;
	color: var(--muted);
	background: none;
	border: 0;
	transition: color .2s;
}
.contact-x:hover { color: var(--ink); }

.contact-eyebrow { margin-bottom: var(--eyebrow-gap); }

.contact-h {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}

.contact-intro {
	font-size: 17px;
	line-height: 1.55;
	color: var(--soft);
	margin-bottom: 34px;
}

.contact-field { margin-bottom: 22px; }

.contact-field label {
	display: block;
	padding-bottom: 14px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.contact-field .req {
	margin-left: 2px;
	font-size: 13px;
	line-height: 0;
	color: var(--err);
}

.contact-field input,
.contact-field textarea {
	display: block;
	width: 100%;
	height: 64px;
	padding: 0 18px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	transition: border-color .2s;
}
.contact-field textarea {
	height: auto;
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
}
.contact-field input:focus,
.contact-field textarea:focus { border-color: var(--ink); outline: 0; }
.contact-field input.is-bad,
.contact-field textarea.is-bad { border-color: var(--err); }

.contact-err {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.4;
	color: var(--err);
}
.contact-err:empty { display: none; }
.contact-field .contact-err { padding-top: 9px; }
.contact-err--form { margin-bottom: 18px; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-submit {
	width: 100%;
	min-height: 74px;
	margin-top: 8px;
	font-family: var(--sans);
}
.contact-submit.is-busy { opacity: .6; }

.contact-done-text {
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.55;
	color: var(--near);
	margin-bottom: 30px;
}
.contact-done-close {
	font-family: var(--sans);
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--line);
}
.contact-done-close:hover { border-color: var(--ink); }

/* ==========================================================================
   Responsive — the mockups are desktop-only, so tablet and mobile are ours.
   ========================================================================== */

@media (max-width: 1200px) {
	:root { --gutter: 48px; --sec-pad: 88px; }

	.hero-h { font-size: 60px; }
	.hero--sub .hero-h { font-size: 50px; }
	.h2, .band-h { font-size: 44px; }
	.nav ul { gap: 28px; }
}

@media (max-width: 960px) {
	:root { --gutter: 32px; --head-h: 88px; --sec-pad: 72px; }

	/* Collapse the desktop nav into a disclosure panel. */
	.nav,
	.head-cta { display: none; }

	.nav-toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 44px; height: 44px;
	}
	.bars { display: block; width: 26px; }
	.bars i {
		display: block;
		height: 1px;
		background: var(--ink);
		transition: transform .25s;
	}
	.bars i + i { margin-top: 7px; }
	.nav-toggle[aria-expanded="true"] .bars i:first-child { transform: translateY(4px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .bars i:last-child { transform: translateY(-4px) rotate(-45deg); }

	.m-nav {
		padding: 8px var(--gutter) 32px;
		background: var(--paper);
		border-top: 1px solid var(--line);
	}
	.m-nav[hidden] { display: none; }
	.m-nav a {
		display: block;
		padding-block: 14px;
		font-size: 13px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		border-bottom: 1px solid var(--line);
	}
	.m-nav .btn { margin-top: 24px; width: 100%; }

	.hero--home { min-height: 620px; }
	.hero--sub { min-height: 420px; }
	.hero-h { font-size: 46px; }
	.hero--sub .hero-h { font-size: 40px; }
	.hero-aside, .band-aside { display: none; }

	/* A single readable column everywhere the desktop used two. */
	.tiles { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
	.about-in,
	.clients-head,
	.extra-in,
	.cards,
	.terms,
	.custom-in,
	.note-in { grid-template-columns: 1fr; gap: 40px; }

	/* Six nowrap wordmarks in six columns cannot fit a narrow viewport, so
	   drop to three columns and let each mark wrap. */
	.marks { grid-template-columns: repeat(3, 1fr); gap: 34px 24px; }
	.mark { white-space: normal; }
	.mark-6 { transform: none; }

	.head-in { gap: 24px; }
	.about-copy { padding-top: 0; }
	.band--photo .band-copy { padding-top: 0; }
	.feat-quote { margin-top: 64px; }
	.feat-quote::before { top: -32px; width: 100%; }

	.tst-row,
	.tst-row.is-right { grid-template-columns: 1fr; gap: 26px; }
	.tst-row.is-right .tst-img { order: 0; }
	.tst-row.is-right .tst-q { order: 1; }
	.tst-img { aspect-ratio: 16 / 10; }

	.band { min-height: 480px; }
	.band--solid .band-in { grid-template-columns: 1fr; }
	.band--solid .band-act { margin-top: 32px; }

	.custom-copy { padding-block: 56px; }
	.custom-copy .wrap-h {
		max-width: none;
		margin-left: 0;
		padding-inline: var(--gutter);
	}
	.custom-img { min-height: 320px; }

	.note-panel { padding: 44px var(--gutter); }

	.foot-in { grid-template-columns: 1fr 1fr; gap: 40px; }
	.social { grid-column: 1 / -1; }

	/* Book page. The two columns stay, as the tablet layout is signed off,
	   but the day cells cannot: they are a fixed 58px wide, and seven of
	   them no longer fit a seventh of half the page. The table is
	   table-layout:fixed, so the cells overflow their own columns and the
	   dates stop lining up under their day names. Fluid cells below the
	   desktop width keep all seven columns readable. */
	.book-form .form-horizontal { gap: 40px; }                 /* PLUGIN */
	.book-form .ea-bootstrap .step.calendar { padding: 28px; }
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar th {
		padding-bottom: 16px;
		font-size: 10px;
		letter-spacing: 0.04em;
	}
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td { height: 52px; }
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td a,
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td span {
		width: 100%;
		height: 44px;
		font-size: 14px;
	}
	.times-head { margin-top: 48px; }
	.book-form .ea-bootstrap .time { gap: 16px 14px; }
	.book-form .ea-bootstrap .time .time-value,
	.book-form .ea-bootstrap .time .time-disabled {
		min-height: 54px;
		padding: 6px 4px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 600px) {
	:root { --gutter: 22px; --sec-pad: 56px; }

	body { font-size: 15px; }

	.hero--home { min-height: 540px; }
	.hero-h { font-size: 36px; }
	.hero--sub .hero-h { font-size: 31px; }
	.h2, .band-h { font-size: 31px; }
	.band--solid .band-h { font-size: 27px; }
	.hero-scrim, .band-scrim {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .62) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .2) 70%);
	}

	.tiles { grid-template-columns: 1fr; gap: 32px; }
	.tile-img { aspect-ratio: 4 / 3; }
	.marks { grid-template-columns: repeat(2, 1fr); }

	/* Three service tiles do not fit a phone once a city has long service
	   names ("Real Estate / Architecture"). */
	.svc-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 44px;
	}
	.svc {
		min-height: 72px;
		padding: 10px 8px;
		font-size: 12px;
		letter-spacing: 0.1em;
	}
	.mark, .mark-2, .mark-3, .mark-4, .mark-5, .mark-6 { font-size: 21px; }

	.feat-quote blockquote p { font-size: 21px; }
	.tst-q blockquote p { font-size: 21px; }
	.note-text { font-size: 20px; }
	.sec-submit .h2 { font-size: 28px; }
	.review-form .wpmtst-submission-form { grid-template-columns: 1fr; }
	.book-h { font-size: 24px; }

	/* Book page, one column: service tiles, then the calendar, then the
	   times, then the details form — which is the order the markup is
	   already in, so collapsing the grid is enough to get it. */
	.book-form .form-horizontal {                            /* PLUGIN */
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.book-form .step.final { margin-top: 0; }                /* PLUGIN */
	.step-head { margin-bottom: 14px; }

	/* The calendar now has the full column, so the cells can breathe again
	   even at 320px: seven 39px columns with 9.5px day names. */
	.book-form .ea-bootstrap .step.calendar { padding: 20px 14px; }
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar th {
		font-size: 11px;
		letter-spacing: 0;
	}
	/* The month arrows are a 28px hit area on the desktop, where there is a
	   cursor to aim with. A thumb needs more. */
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-prev,
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-next {
		width: 44px;
		height: 44px;
	}
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td { height: 46px; }
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td a,
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-calendar td span { height: 40px; }
	.book-form .ea-bootstrap .ui-datepicker .ui-datepicker-title { font-size: 15px; }
	.times-head { margin-top: 40px; }
	.book-form .ea-bootstrap .time { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.book-form .ea-bootstrap .form-control { height: 58px; }
	.book-form .ea-bootstrap textarea.form-control { height: 140px; }
	.book-form .ea-bootstrap .step.final .form-group { margin-bottom: 20px; }
	.book-form .ea-bootstrap .ea-submit,
	.book-form .ea-bootstrap .ea-submit.btn-primary { min-height: 72px; }

	/* Contact popup at phone width: full-bleed panel, smaller heading, and
	   the fields at the same height as the Book page's. */
	.contact-modal { padding: 0; }
	.contact-panel {
		max-width: none;
		min-height: 100%;
		max-height: none;
		padding: 64px 22px 36px;
		border: 0;
	}
	.contact-h { font-size: 29px; }
	.contact-intro { font-size: 16px; margin-bottom: 26px; }
	.contact-field input,
	.contact-field textarea { height: 58px; }
	.contact-field textarea { height: auto; }
	.contact-submit { min-height: 66px; }
	.contact-x { top: 10px; right: 8px; }

	/* Buttons are nowrap by design, which is fine while they sit on their
	   own line. Inside a grid track it makes the track's min-content as wide
	   as the longest label ("DISCUSS A CUSTOM PROJECT" is 324px), and the
	   track drags the page wider than the viewport at 320. On a phone they
	   are full width anyway, so they may as well wrap. */
	.btn {
		width: 100%;
		padding-inline: 18px;
		white-space: normal;
		line-height: 1.3;
		text-align: center;
	}
	.foot-in { grid-template-columns: 1fr; }
	.foot-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
	.foot-links { flex-direction: column; align-items: flex-start; gap: 10px; }

	/*
	 * Phone legibility and thumbs. The mockups are desktop designs, so their
	 * 10px tracked micro-type and their text links, which are sized for a
	 * cursor, both need a little more room here. Nothing above 600px moves.
	 */
	/* .foot-bar p/a is two class levels deep, so the phone size has to be
	   written the same way to outrank it. */
	.foot-bar p,
	.foot-bar a,
	.foot-tag span { font-size: 11px; }

	/* The footer's contact link is a standalone control, not running copy. */
	.foot-mail a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.link-arrow {
		min-height: 44px;
		align-items: center;
	}

	.social a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
	.social { gap: 4px; margin-left: -10px; }
}