/*
 * WMS Base.
 *
 * One stylesheet for every preview: cached once by a visitor and reused across
 * sites, with only four custom properties differing per business. Written
 * mobile-first because the message that carries a preview arrives on a phone,
 * and the screenshot we send is taken at 390×844.
 */

:root {
	--wms-primary: #1f6f5c;
	--wms-ink: #1b2124;
	--wms-paper: #ffffff;
	--wms-muted: #5f6c70;
	--wms-line: #e4e8e9;
	--wms-wash: #f6f8f8;
	--wms-radius: 10px;
}

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

body {
	margin: 0;
	background: var(--wms-paper);
	color: var(--wms-ink);
	font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--wms-primary); }

.wms-wrap { width: min(1100px, 100% - 40px); margin-inline: auto; }

/* ------------------------------------------------------------------ nav */
.wms-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--wms-paper) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--wms-line);
}

.wms-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
}

.wms-nav__name { font-weight: 700; letter-spacing: -.01em; }
.wms-nav__logo { display: block; line-height: 0; }
.wms-nav__logo img { max-height: 40px; width: auto; }
.wms-nav__links { display: flex; gap: 18px; font-size: 14px; }
.wms-nav__links a { color: var(--wms-muted); text-decoration: none; }
.wms-nav__links a:hover, .wms-nav__links a:focus-visible { color: var(--wms-primary); }

/* ------------------------------------------------------------------
   The plain page's hero.

   ## WHY THIS IS SCOPED AND THE FLOOR BELOW IS NOT

   `wms-hero` is a name the build contract requires a generated design to
   use, so every designed page wears it — and this block was giving all
   of them our background, our padding and, the one that showed, our
   text-align: center. Hayat's design laid its hero out left and set its
   own background and colour; it never set text-align, because it did
   not know ours existed. The headline and the standfirst came out
   centred inside boxes sized to the left, with the button under them
   left-aligned. Three alignments in one hero, none of them chosen.

   The same leak, in the same afternoon, as the removal line wearing
   .wms-footer and the quotes strip wearing .wms-carousel. A name we ask
   a design to use is a name we may not also decorate.

   So the plain page keeps its own look and the designed page gets only
   the floor further down this file: the hero photograph is sized and
   full-bleed, and nothing else is said. Scoped on a body class rather
   than on markup, because the same section element is both.
   ------------------------------------------------------------------ */
body:not(.wms-designed) .wms-hero {
	background: var(--wms-primary) center/cover no-repeat;
	color: #fff;
	padding: clamp(56px, 12vw, 120px) 0;
	text-align: center;
}

.wms-hero__inner { width: min(760px, 100% - 40px); margin-inline: auto; }

.wms-hero__eyebrow {
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 12px;
	opacity: .85;
}

body:not(.wms-designed) .wms-hero h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 7vw, 52px);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
}

body:not(.wms-designed) .wms-hero__sub {
	margin: 0 auto 26px;
	font-size: clamp(16px, 2.4vw, 19px);
	max-width: 46ch;
	opacity: .95;
}

.wms-btn {
	display: inline-block;
	background: var(--wms-paper);
	color: var(--wms-ink);
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.wms-btn:hover, .wms-btn:focus-visible { transform: translateY(-1px); }

/* ------------------------------------------------------------- sections */
.wms-section { padding: clamp(44px, 8vw, 84px) 0; }
.wms-section:nth-of-type(even) { background: var(--wms-wash); }

.wms-section h2 {
	margin: 0 0 22px;
	font-size: clamp(22px, 4vw, 32px);
	letter-spacing: -.015em;
	text-wrap: balance;
}

.wms-lede { font-size: 18px; max-width: 62ch; color: var(--wms-muted); margin: 0; }

.wms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.wms-card {
	background: var(--wms-paper);
	border: 1px solid var(--wms-line);
	border-radius: var(--wms-radius);
	padding: 20px 22px;
}

.wms-card h3 { margin: 0 0 6px; font-size: 18px; }
.wms-card p { margin: 0; color: var(--wms-muted); }
.wms-price { margin-top: 10px !important; color: var(--wms-primary) !important; font-weight: 700; }

.wms-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

.wms-photos img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wms-radius);
}

.wms-quote {
	margin: 0;
	background: var(--wms-paper);
	border: 1px solid var(--wms-line);
	border-left: 3px solid var(--wms-primary);
	border-radius: var(--wms-radius);
	padding: 20px 22px;
}

.wms-quote blockquote { margin: 0 0 10px; font-size: 16.5px; }
.wms-quote figcaption { color: var(--wms-muted); font-size: 14px; font-weight: 600; }

.wms-contact__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
}

.wms-contact p { margin: 0 0 8px; }

.wms-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 18px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.wms-hours dt { color: var(--wms-muted); }
.wms-hours dd { margin: 0; }

/*
 * A whole week on one line has no day label beside it, so it spans both
 * columns instead of sitting in the right-hand one with a gap where the day
 * would be.
 */
.wms-hours dd.wms-hours__line { grid-column: 1 / -1; }

/* The plain page's footer, for the same reason as the hero above: a design
   that names its own footer wms-footer must not be given our border, our
   muted colour and our type size on top of its own. */
body:not(.wms-designed) .wms-footer {
	padding: 28px 0;
	border-top: 1px solid var(--wms-line);
	color: var(--wms-muted);
	font-size: 14px;
}

body:not(.wms-designed) .wms-footer p { margin: 0; }

:where(a, button):focus-visible {
	outline: 2px solid var(--wms-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- the landing page */

.wms-landing__hero { padding: clamp(40px, 8vw, 84px) 0; }

.wms-landing__hero h1 {
	font-size: clamp(28px, 5.5vw, 46px);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	max-width: 20ch;
	text-wrap: balance;
}

.wms-landing__sub {
	font-size: clamp(16px, 2.2vw, 18px);
	color: var(--wms-muted);
	max-width: 58ch;
	margin: 0 0 32px;
}

.wms-form { display: grid; gap: 16px; max-width: 520px; }

.wms-field { display: grid; gap: 6px; }
.wms-field > span { font-weight: 600; font-size: 14px; }

.wms-field textarea,
.wms-field input[type="email"] {
	width: 100%;
	font: inherit;
	padding: 12px 14px;
	border: 1px solid var(--wms-line);
	border-radius: var(--wms-radius);
	background: var(--wms-paper);
	color: var(--wms-ink);
	resize: vertical;
}

.wms-field textarea:focus-visible,
.wms-field input:focus-visible {
	outline: 2px solid var(--wms-primary);
	outline-offset: 1px;
	border-color: var(--wms-primary);
}

/* Off-screen rather than display:none — a form-filling script skips what is
   hidden, and the point is that it does not skip this. */
.wms-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wms-btn--go {
	background: var(--wms-primary);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 17px;
	padding: 15px 30px;
	justify-self: start;
}

.wms-btn--go[disabled] { opacity: .6; cursor: default; }

.wms-form__note { font-size: 13.5px; color: var(--wms-muted); margin: 0; }

.wms-progress { max-width: 520px; margin-top: 26px; }

.wms-progress__bar {
	height: 8px;
	background: var(--wms-line);
	border-radius: 999px;
	overflow: hidden;
}

.wms-progress__bar span {
	display: block;
	height: 100%;
	width: 5%;
	border-radius: 999px;
	background: var(--wms-primary);
	transition: width .6s cubic-bezier(.22,.61,.36,1);
}

.wms-progress__line { margin: 12px 0 0; color: var(--wms-muted); font-size: 15px; }

.wms-result { max-width: 520px; margin-top: 26px; display: grid; gap: 16px; justify-items: start; }
.wms-result__line { margin: 0; font-size: 17px; font-weight: 600; }

.wms-frame-wrap { padding: 0 0 clamp(40px, 7vw, 70px); }

.wms-frame-wrap iframe {
	width: 100%;
	height: min(78vh, 900px);
	border: 1px solid var(--wms-line);
	border-radius: var(--wms-radius);
	background: var(--wms-paper);
	box-shadow: 0 10px 40px rgba(18,33,29,.10);
}

/* ------------------------------------------------------------- the claim page */

.wms-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	max-width: 780px;
	margin: 8px 0 20px;
}

.wms-plan {
	border: 1px solid var(--wms-line);
	border-radius: var(--wms-radius);
	padding: 24px;
	background: var(--wms-paper);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The recurring plan is the one we recommend, and the page says so with weight
   rather than with a badge that reads as a sales device. */
.wms-plan--pick {
	border-color: var(--wms-primary);
	box-shadow: 0 6px 26px rgba(18, 33, 29, .09);
}

.wms-plan h2 { margin: 0; font-size: 19px; }

.wms-plan__price { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.wms-plan__price strong { font-size: 34px; letter-spacing: -.02em; line-height: 1; }
.wms-plan__price span { color: var(--wms-muted); font-size: 15px; }

.wms-plan ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--wms-muted); font-size: 15px; }
.wms-plan li { padding-left: 2px; }

.wms-plan .wms-btn { margin-top: auto; justify-self: stretch; text-align: center; }

/* The plan the preview bar was pressed for, marked so somebody who arrives
   having already chosen can see which one they chose. */
.wms-btn.is-asked { outline: 3px solid var(--wms-primary); outline-offset: 3px; }

.wms-btn--ghost {
	background: transparent;
	color: var(--wms-primary);
	border: 1.5px solid var(--wms-primary);
	cursor: pointer;
	font-size: 16px;
	padding: 13px 26px;
}

.wms-btn--ghost[disabled], .wms-btn--go[disabled] { opacity: .55; cursor: default; }

/* ------------------------------------------------- the price list and hours */

/*
 * Services as a list, not a grid.
 *
 * The card grid is right for a handful of things somebody is choosing between
 * and wrong for a menu somebody is scanning for a number. A barber's page and
 * a café's page are both the second thing, so their blueprints ask for this
 * shape instead — same data, read the way it is actually read.
 */
.wms-pricelist__list { margin: 0; display: grid; gap: 0; max-width: 46rem; }

.wms-pricelist__row {
	display: flex; align-items: baseline; gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wms-rule, rgba(0, 0, 0, .1));
}

.wms-pricelist__row:last-child { border-bottom: 0; }

.wms-pricelist__row dt { flex: 1 1 auto; font-weight: 600; }

/* The description sits under the name rather than beside it: at a phone width
   a name and a description on one line wrap into an unreadable tangle. */
.wms-pricelist__row dt span {
	display: block; margin-top: 0.2rem;
	font-weight: 400; font-size: 0.92em; color: var(--wms-muted);
}

/* Tabular figures so a column of prices lines up on the decimal. */
.wms-pricelist__row dd {
	margin: 0; flex: 0 0 auto;
	font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Hours given their own section rather than a column beside the address. */
.wms-hours--wide {
	max-width: 34rem;
	grid-template-columns: auto 1fr;
	gap: 0.55rem 2rem;
}

.wms-hours--wide dt { font-weight: 600; color: inherit; }
.wms-hours--wide dd { text-align: right; font-variant-numeric: tabular-nums; }

/* The way out. Quiet, present on every page, and never the loudest thing in
   the footer — a business that wants it will look for it, and one that does
   not should not be invited to leave.

   Its own block, under whatever footer the page has, on one line. It wore
   .wms-footer until 10 September, which is the name a generated design picks
   for its own footer: on Salon Prince the design's rules gave it a second dark
   band and squeezed the sentence into a 28-pixel column. Two authors, one name.
   Now the name is ours, and functions.php holds the shape of it against the
   design's sheet. */
.wms-wayout {
	padding: 14px 1.5rem 18px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
}

.wms-wayout__remove,
.wms-wayout__again { margin: 0; }
.wms-wayout__remove a { color: inherit; opacity: .65; }
.wms-wayout__remove a:hover { opacity: 1; }

/* ------------------------------------------------------------------- marks */

/*
 * A mark sits on the text it belongs to: same colour, same optical size,
 * nudged down a fraction because a 24-unit box centres higher than a cap
 * height does. currentColor throughout, so a mark inside a button, a heading
 * or a muted line is right without a rule for each.
 */
.wms-i {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.19em;
	color: inherit;
}

/* Beside a line of text rather than in it. */
.wms-with-i {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

/* --------------------------------------------------------------- lightbox */

.wms-photos img { cursor: zoom-in; }

.wms-lb {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	gap: 8px; padding: 16px;
	background: rgba(12, 14, 16, .92);
}

.wms-lb[hidden] { display: none; }

.wms-lb img {
	max-width: min(100%, 1100px);
	max-height: 88vh;
	object-fit: contain;
	border-radius: 8px;
}

.wms-lb button {
	background: rgba(255, 255, 255, .12);
	color: #fff; border: 0; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%;
	font-size: 26px; line-height: 1;
	flex: none;
}

.wms-lb button:hover { background: rgba(255, 255, 255, .24); }

/* The close control sits out of the way of the arrows, which are where the
   thumb lands on a phone. */
.wms-lb__x { position: absolute; top: 14px; right: 14px; font-size: 30px; }

@media (max-width: 640px) {
	.wms-lb__nav { position: absolute; bottom: 18px; }
	.wms-lb__prev { left: 22px; }
	.wms-lb__next { right: 22px; }
}

/* ---------------------------------------------------------- quote carousel */

/*
 * One at a time, only once the script has said so. Without it the class is
 * never added and all six quotes stay stacked, which is the correct page for
 * somebody whose JavaScript never arrived.
 *
 * ## AND WHY THE NAME IS NO LONGER wms-carousel, NOR wms-onebyone EITHER
 *
 * It was, and a generated design wrote `class="wms-carousel"` around the quotes
 * of its own accord — the obvious name for the thing it had built. These rules
 * then hid all five of Hayat's real reviews, the script that un-hides one
 * looked for a different class and returned, and the camera does not run it at
 * all. The page went out with an empty band under a heading reading "In Their
 * Words", and nothing anywhere said so.
 *
 * Two faults, and both are fixed here. The hiding now depends on the class the
 * script itself adds, so markup that merely says "carousel" is a div and
 * nothing more; a rule that hides content must be switched on by the thing that
 * will switch it back.
 *
 * And the name. It became `wms-onebyone`, which no designer would reach for —
 * and the next build used it, because the contract had just been taught to
 * list the reserved names and a model given a list of names will use one. So
 * the furniture wears a family instead: anything beginning `wms-x-` is ours,
 * the contract says so as a rule rather than as a vocabulary, and there is no
 * reason for a design to invent a name in that shape.
 */
.wms-x-onebyone { display: block; position: relative; }
.wms-x-onebyone > * { display: none; }
.wms-x-onebyone > .is-on { display: block; animation: wms-fade .22s ease both; }

@keyframes wms-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.wms-x-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.wms-x-dot {
	width: 9px; height: 9px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: currentColor; opacity: .28;
	transition: opacity .15s ease, transform .15s ease;
}

.wms-x-dot.is-on { opacity: 1; transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
	.wms-x-onebyone > .is-on { animation: none; }
	.wms-x-dot { transition: none; }
}

/* ------------------------------------------------------------------
   The gallery rail.

   A row of stuck-down photographs was what every generated page had,
   and the gallery is usually the best thing a small business owns.

   Scroll-snap does the sliding, so this works with no JavaScript at
   all — on a phone it is already the right behaviour, a row a finger
   can push. preview.js adds the two arrows for a mouse.

   Named wms-rail and not wms-x-onebyone because that name belongs to the
   quotes strip above, which hides every child but one.
   ------------------------------------------------------------------ */
.wms-rail {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/*
 * ## SIZED AS A FLEX ITEM, NOT WITH A WIDTH
 *
 * This said `width: min(78%, 420px)`, which is right for the scrolling row
 * above and wrong everywhere else — and a design is free to lay the same rail
 * out another way. Hayat's made it a two-column grid with the first photograph
 * spanning both rows; that cell was 690px wide and our width held the picture
 * at 420, leaving a 270-pixel hole in the middle of the gallery.
 *
 * A flex basis does the same job inside a flex container and is ignored
 * entirely outside one, so the grid stretches the item as its author intended.
 * The rule is the general one: express a floor in properties that only apply to
 * the arrangement the floor was written for.
 */
.wms-rail__slide {
	flex: 0 0 min(78%, 420px);
	scroll-snap-align: center;
}

.wms-rail__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wms-rail-frame { position: relative; }

.wms-rail__go {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
	font-size: 22px;
	line-height: 1;
	color: #1b2124;
	cursor: pointer;
}

.wms-rail__go--prev { left: 8px; }
.wms-rail__go--next { right: 8px; }

.wms-rail:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* A finger does not need arrows, and they sit on top of the picture. */
@media (hover: none) {
	.wms-rail__go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wms-rail { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   The hero always carries a photograph.

   The first section is what fills the screen when a preview opens, and
   it could be a coloured rectangle: the gallery had a picture rule and
   the most important surface on the page had none. The generated
   stylesheet is written per site and may size this differently — this
   is the floor, so a hero image is never left unsized and full-bleed
   down the page.
   ------------------------------------------------------------------ */
.wms-hero__photo,
.wms-hero img.wms-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.wms-hero { position: relative; }
.wms-hero > *:not(img) { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   The WhatsApp button.

   Since the contact form was removed on 8 September this is the only
   thing on the page a visitor can press to start a conversation, so it
   is given WhatsApp's own green rather than the site's palette — a
   visitor recognises the colour before they read the label, and it is
   the one place on these pages where being recognisable beats matching.

   The generated stylesheet is written per site and has never seen this
   class, so the colour is stated here rather than inherited.
   ------------------------------------------------------------------ */
.wms-btn--wa {
	background: #25d366;
	border-color: #25d366;
	color: #05230f;
}

.wms-btn--wa:hover,
.wms-btn--wa:focus-visible {
	background: #1eb955;
	border-color: #1eb955;
	color: #05230f;
}

.wms-contact__wa { margin-top: 1rem; }