/*
Theme Name:   Wellness Spot
Theme URI:    https://wellness-spot.com.ua
Description:  Сайт велнес-центру Wellness Spot в Одесі. Брендбук, прайс і вільні години читаються напряму з CRM.
Author:       Wellness Spot
Version:      1.7.1
Requires PHP: 8.1
Text Domain:  wellness-spot
*/

/* =========================================================================
 * Brand
 *
 * The palette and the type are the brand book's, and deliberately the same
 * tokens the CRM uses: one salon, one set of colours, whichever screen you are
 * looking at. Terracotta is the accent and is spent sparingly — one word in a
 * heading, the number on a card, the price — so that it still reads as one.
 * ====================================================================== */

:root{
	--cream:#F5EBE2;
	--surface:#FFFCF9;
	--sand:#B59C7D;
	--olive:#696F55;
	--olive-dark:#4A5A3A;
	--terra:#AD6237;
	--terra-dark:#96522D;
	--gold:#EBD082;
	--gold-soft:rgba(235,208,130,.55);
	--line:#E6D8C9;
	--ink:#4C4A3C;
	--muted:#8E8471;
	--radius:1rem;
	--radius-lg:1.5rem;
	--wrap:72rem;
	--shadow:0 18px 40px -18px rgba(76,74,60,.28);
	--ease:cubic-bezier(.2,.7,.2,1);
}

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

html{scroll-behavior:smooth}

body{
	margin:0;
	background:var(--cream);
	color:var(--ink);
	font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	font-size:1rem;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

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

a{color:var(--olive);text-decoration:none;transition:color .15s}
a:hover{color:var(--terra)}

h1,h2,h3,h4{margin:0;font-weight:600;color:var(--olive);line-height:1.2}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:1.5rem}
.narrow{max-width:46rem}

/* Skip link — hidden until a keyboard finds it. */
.skip{position:absolute;left:-9999px;top:0;background:var(--olive);color:#fff;
	padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;z-index:100}
.skip:focus{left:0;color:#fff}

/* --- the accent word ---------------------------------------------------
   One word per heading, in terracotta, with a stroke of gold under it. The
   stroke is a background that grows from the left once the heading is on
   screen; before that it is not there. */

.hl{color:var(--terra);
	background-image:linear-gradient(var(--gold-soft),var(--gold-soft));
	background-repeat:no-repeat;background-position:0 88%;background-size:0 .34em;
	transition:background-size .8s var(--ease) .35s}
.in .hl,.hero .hl{background-size:100% .34em}
.band-olive .hl{color:var(--gold);background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12))}

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

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.8125rem 1.75rem;border-radius:999px;border:1px solid transparent;
	font:inherit;font-weight:600;font-size:.9375rem;cursor:pointer;white-space:nowrap;
	transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 8px 20px -10px rgba(173,98,55,.6)}
.btn-primary:hover{background:var(--terra-dark);color:#fff;transform:translateY(-2px);
	box-shadow:0 14px 28px -12px rgba(173,98,55,.65)}
.btn-ghost{background:transparent;color:var(--olive);border-color:var(--sand)}
.btn-ghost:hover{background:var(--surface);border-color:var(--olive);color:var(--olive);transform:translateY(-2px)}
.btn-light{background:var(--surface);color:var(--olive)}
.btn-light:hover{background:#fff;color:var(--terra);transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:.5625rem 1.125rem;font-size:.875rem}
.btn-lg{padding:1rem 2.125rem;font-size:1rem}

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

section{padding-block:4.5rem}
section.tight{padding-block:3rem}
.band-surface{background:var(--surface);border-block:1px solid var(--line)}
.band-olive{background:var(--olive);color:#EFE6DA;position:relative;overflow:hidden}
.band-olive h2,.band-olive h3{color:#fff}
.band-olive a{color:var(--gold)}
.band-olive .eyebrow{color:var(--gold)}
.band-olive .eyebrow::before{background:var(--gold)}
.band-olive .section-head p{color:#D8CEBE}

/* The eyebrow carries a short terracotta dash — the mark that a new part of
   the page starts here. */
.eyebrow{display:flex;align-items:center;gap:.625rem;font-size:.75rem;letter-spacing:.16em;
	text-transform:uppercase;color:var(--sand);font-weight:600;margin:0 0 .875rem}
.eyebrow::before{content:'';width:1.5rem;height:2px;border-radius:1px;background:var(--terra);flex-shrink:0}

.section-head{max-width:40rem;margin-bottom:2.5rem}
.section-head h2{font-size:clamp(1.75rem,3.6vw,2.375rem);letter-spacing:-.01em}
.section-head p{margin-top:.875rem;color:var(--muted);font-size:1.0625rem}

/* =========================================================================
 * Header
 * ====================================================================== */

.site-head{position:sticky;top:0;z-index:50;background:rgba(245,235,226,.92);
	backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
	transition:box-shadow .3s}
.site-head.scrolled{box-shadow:0 8px 24px -12px rgba(76,74,60,.22)}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.brand img{width:2.75rem;height:2.75rem;object-fit:contain;transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand b{font-weight:600;font-size:1.0625rem;color:var(--olive);letter-spacing:.02em;
	line-height:1.15;display:block}
.brand small{display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}

.site-nav{display:flex;gap:.25rem;margin-inline-start:auto;align-items:center}
.site-nav a{padding:.5rem .875rem;border-radius:999px;font-size:.9375rem;font-weight:500;transition:background .2s,color .2s}
.site-nav a:hover{background:var(--surface)}
.site-nav a[aria-current]{background:var(--olive);color:#fff}
/* The nav carries its own «Записатися» for the collapsed menu, where the
   header's call to action is not on screen. Side by side they would be the
   same button twice. */
.site-nav .btn{display:none}

.head-cta{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.head-phone{font-weight:600;font-size:.9375rem;white-space:nowrap;color:var(--olive)}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--olive)}
.burger svg{display:block}

@media (max-width:1000px){
	.head-phone{display:none}
}
@media (max-width:860px){
	.burger{display:block;margin-inline-start:auto}
	.site-nav{position:absolute;inset-inline:0;top:100%;flex-direction:column;
		align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);
		padding:.5rem 1.5rem 1.25rem;margin:0;box-shadow:0 20px 30px -20px rgba(76,74,60,.3)}
	.site-nav[hidden]{display:none}
	.site-nav a{padding:.8125rem .5rem;border-radius:.625rem}
	.site-nav .btn{display:inline-flex;margin-top:.625rem}
	.head-cta{display:none}
}

/* =========================================================================
 * Hero
 *
 * Words on the left, the room on the right: a tall photograph with a second,
 * smaller one tucked over its corner and a chip with the hours. Everything
 * arrives in order, top to bottom, in the first second.
 * ====================================================================== */

.hero{position:relative;overflow:hidden;padding-block:4rem 4.5rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.hero-copy{position:relative}
.hero h1{font-size:clamp(2.25rem,5.2vw,3.5rem);letter-spacing:-.02em;max-width:14ch;line-height:1.08}
.hero .lede{font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--ink);
	max-width:34rem;margin-top:1.375rem;line-height:1.6}
.hero-acts{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2rem}

.hero-trust{list-style:none;margin:2.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1.75rem}
.hero-trust li{font-size:.9375rem;color:var(--muted);display:flex;align-items:baseline;gap:.5rem}
.hero-trust b{font-size:1.75rem;font-weight:700;color:var(--terra);letter-spacing:-.02em;line-height:1}

.hero-media{position:relative;aspect-ratio:4/5;max-height:38rem;margin-inline:2rem 0}
.hero-media::before{content:'';position:absolute;inset:-8% -12% 10% 6%;border-radius:48% 52% 45% 55%/55% 45% 55% 45%;
	background:radial-gradient(ellipse at 40% 40%,rgba(235,208,130,.55),rgba(235,208,130,0) 70%);
	z-index:0;pointer-events:none}
.hero-media .ph-main{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 45%;
	border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.hero-media .ph-sub{position:absolute;z-index:2;left:-2rem;bottom:-1.5rem;width:38%;aspect-ratio:1;
	object-fit:cover;border-radius:var(--radius-lg);border:6px solid var(--cream);box-shadow:var(--shadow)}
.hero-media .chip{position:absolute;z-index:2;top:1.25rem;right:-1rem;background:var(--surface);color:var(--olive);
	border:1px solid var(--line);border-radius:999px;padding:.625rem 1.125rem;font-size:.875rem;font-weight:500;
	box-shadow:var(--shadow);display:inline-flex;gap:.375rem;align-items:center}
.hero-media .chip::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--terra);
	box-shadow:0 0 0 0 rgba(173,98,55,.45);animation:pulse 2.4s ease-out infinite}
.hero-media .chip b{font-weight:700;color:var(--terra)}

@media (max-width:900px){
	.hero{padding-block:3rem 3.5rem}
	.hero-grid{grid-template-columns:1fr;gap:2.75rem}
	.hero-media{margin-inline:1.5rem .5rem;max-height:none;aspect-ratio:4/4.6;max-width:26rem}
}
@media (max-width:560px){
	.hero h1{max-width:none}
	.hero-acts .btn-lg{padding:.9375rem 1.375rem;font-size:.9375rem}
	.hero-trust{gap:1.25rem}
	.hero-media{margin-inline:1.25rem .25rem}
	.hero-media .ph-sub{left:-1.25rem;bottom:-1rem;width:46%}
	.hero-media .chip{right:-.25rem;top:.875rem;font-size:.8125rem;padding:.5rem .875rem}
}

.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
	gap:1px;margin-top:4rem;background:var(--line);border:1px solid var(--line);
	border-radius:var(--radius);overflow:hidden}
.hero-facts div{background:var(--cream);padding:1.25rem 1.375rem;position:relative;transition:background .25s}
.hero-facts div:hover{background:var(--surface)}
.hero-facts dt{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
	color:var(--sand);font-weight:600;margin-bottom:.375rem;display:flex;align-items:center;gap:.5rem}
.hero-facts dt::before{content:'';width:.375rem;height:.375rem;border-radius:50%;background:var(--terra)}
.hero-facts dd{margin:0;font-size:1.0625rem;font-weight:600;color:var(--olive)}
.hero-facts dd small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:.125rem}

/* =========================================================================
 * Cards
 * ====================================================================== */

.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
	padding:1.75rem;position:relative;overflow:hidden;
	transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--terra);
	transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.band-surface .card{background:var(--cream)}
.card h3{font-size:1.1875rem;margin-bottom:.625rem}
.card p{color:var(--muted);font-size:.9375rem;margin-bottom:0}
.card .num{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
	background:var(--gold-soft);color:var(--terra);font-size:.8125rem;font-weight:700;letter-spacing:.06em;
	margin-bottom:1.125rem;transition:background .3s,color .3s}
.card:hover .num{background:var(--terra);color:#fff}
.card .more{display:inline-flex;align-items:center;gap:.375rem;margin-top:1rem;font-size:.9375rem;font-weight:600;color:var(--terra)}
.card .more::after{content:'→';transition:transform .3s var(--ease)}
.card:hover .more::after{transform:translateX(4px)}

/* --- masters ---------------------------------------------------------- */

.master{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
	padding:1.5rem;display:flex;flex-direction:column;gap:.875rem;
	transition:transform .35s var(--ease),box-shadow .35s}
.master:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Sized for a face, not for two initials: the circle was 4.5rem while the cards
   had no photographs in them. */
.master .ava{width:6rem;height:6rem;border-radius:50%;display:grid;place-items:center;
	font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:.02em;flex-shrink:0;
	object-fit:cover;overflow:hidden;box-shadow:0 0 0 0 var(--gold-soft);transition:box-shadow .35s}
.master:hover .ava{box-shadow:0 0 0 5px var(--gold-soft)}
.master h3{font-size:1.125rem}
.master .role{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
	color:var(--sand);font-weight:600;margin-top:.25rem}
.master p{font-size:.9375rem;color:var(--muted);margin:0}
.master ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.master li{font-size:.75rem;background:var(--cream);border:1px solid var(--line);
	border-radius:999px;padding:.25rem .625rem;color:var(--olive)}
.band-surface .master{background:var(--cream)}
.band-surface .master li{background:var(--surface)}

/* =========================================================================
 * Photographs
 * ====================================================================== */

.shots{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.shots figure{margin:0;background:var(--surface);border:1px solid var(--line);
	border-radius:var(--radius);overflow:hidden}
.band-surface .shots figure{background:var(--cream)}
/* The photographs are phone-shaped, so the frame is fixed and the picture is
   cropped into it. Without this one tall shot stretches its whole row. */
.shots img{width:100%;height:20rem;object-fit:cover;object-position:center;
	transition:transform .8s var(--ease)}
.shots figure:hover img{transform:scale(1.045)}
.shots figcaption{padding:.875rem 1.125rem;font-size:.875rem;color:var(--muted)}

/* On the olive band the frames go dark and the captions light. */
.band-olive .shots figure{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band-olive .shots figcaption{color:#EFE6DA}
.band-olive::after{content:'';position:absolute;right:-10rem;bottom:-14rem;width:34rem;height:34rem;border-radius:50%;
	background:radial-gradient(circle,rgba(235,208,130,.18),rgba(235,208,130,0) 65%);pointer-events:none}
.band-olive .wrap{position:relative;z-index:1}

.shot-wide{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
	background:var(--surface);margin:0}
.shot-wide img{width:100%;height:22rem;object-fit:cover;object-position:center 40%;
	transition:transform .8s var(--ease)}
.shot-wide:hover img{transform:scale(1.03)}
.shot-wide figcaption{padding:.875rem 1.125rem;font-size:.875rem;color:var(--muted);
	border-top:1px solid var(--line)}

@media (max-width:560px){
	.shots img{height:15rem}
	.shot-wide img{height:15rem}
}

/* =========================================================================
 * Price list
 * ====================================================================== */

.pricegroup + .pricegroup{margin-top:3rem}
.pricegroup > h3{font-size:1.375rem;margin-bottom:1.25rem;
	padding-bottom:.75rem;border-bottom:2px solid var(--line);display:flex;align-items:center;gap:.75rem}
.pricegroup > h3::before{content:'';width:.625rem;height:.625rem;border-radius:50%;background:var(--terra)}

.price{display:flex;gap:1.5rem;align-items:flex-start;justify-content:space-between;
	padding:1rem .75rem;margin-inline:-.75rem;border-bottom:1px solid var(--line);border-radius:.75rem;
	transition:background .25s}
.price:hover{background:var(--surface)}
.band-surface .price:hover{background:var(--cream)}
.price:last-child{border-bottom:0}
.price .l{min-width:0}
.price .r{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}
.price .name{display:block;font-weight:600;color:var(--ink);font-size:1.0625rem;transition:color .2s}
.price:hover .name{color:var(--terra)}
.price .desc{display:block;font-size:.875rem;color:var(--muted);margin-top:.25rem}
.price .meta{display:block;font-size:.8125rem;color:var(--sand);margin-top:.375rem}
.price .cost{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.25rem;
	color:var(--terra);white-space:nowrap}

@media (max-width:560px){
	.price{flex-direction:column;gap:.75rem}
	.price .r{flex-direction:row;align-items:center;gap:1rem;align-self:stretch;
		justify-content:space-between}
}

/* =========================================================================
 * The terracotta band — the one place the accent is the ground
 * ====================================================================== */

.cta-band{background:var(--terra);color:#fff;padding-block:3.5rem;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;left:-6rem;top:-8rem;width:22rem;height:22rem;border-radius:50%;
	background:rgba(255,255,255,.07);pointer-events:none}
.cta-band::after{content:'';position:absolute;right:-4rem;bottom:-10rem;width:26rem;height:26rem;border-radius:50%;
	background:rgba(235,208,130,.16);pointer-events:none}
.cta-band .wrap{position:relative;z-index:1}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em}
.cta-band p{margin:.5rem 0 0;color:rgba(255,255,255,.85);font-size:1.0625rem}
.cta-acts{display:flex;gap:.875rem;flex-wrap:wrap}
.cta-band .btn-light{color:var(--terra)}
.cta-band .btn-light:hover{color:var(--terra-dark)}

/* =========================================================================
 * Contacts
 * ====================================================================== */

.contact-grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
	align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:1.125rem 0;border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0}
.contact-list .k{display:block;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
	color:var(--sand);font-weight:600;margin-bottom:.25rem}
.contact-list .v{display:block;font-size:1.0625rem;color:var(--ink)}
.contact-list .v a{font-weight:600}

.map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
	background:var(--surface);line-height:0}
.map iframe{width:100%;height:24rem;border:0;display:block}
.map .under{line-height:1.5;padding:.875rem 1.125rem;font-size:.875rem;
	border-top:1px solid var(--line);color:var(--muted);
	display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.map .under .btn{flex-shrink:0}
.map .under svg{margin-inline-end:-.125rem}

/* =========================================================================
 * Footer
 * ====================================================================== */

.site-foot{background:var(--olive);color:#D8CEBE;padding-block:3.5rem 2rem;
	font-size:.9375rem}
.site-foot a{color:#EFE6DA}
.site-foot a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
	padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.15)}
.foot-grid h4{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
	color:var(--gold);margin-bottom:.875rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.5rem}
.foot-brand img{width:3.25rem;height:3.25rem;margin-bottom:.875rem}
.foot-badge{display:inline-block;margin-top:1.25rem;line-height:0;border-radius:6px;
	transition:opacity .2s}
.foot-badge:hover{opacity:.85}
.foot-brand .foot-badge img{width:250px;max-width:100%;height:auto;margin:0;border-radius:6px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
	padding-top:1.5rem;font-size:.8125rem;color:rgba(239,230,218,.65)}

/* =========================================================================
 * Sticky call to action — phones only
 * ====================================================================== */

.sticky-cta{display:none}
@media (max-width:860px){
	.sticky-cta{display:grid;grid-template-columns:1fr auto;gap:.5rem;position:fixed;
		inset-inline:0;bottom:0;z-index:40;padding:.625rem .875rem;
		padding-bottom:max(.625rem,env(safe-area-inset-bottom));
		background:rgba(245,235,226,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);
		transition:transform .4s var(--ease)}
	/* Out of the way while the first screen — with its own buttons — is up. */
	.js .sticky-cta:not(.show){transform:translateY(110%)}
	.sticky-cta .btn{padding-block:.75rem}
	.sticky-cta .btn-light{border:1px solid var(--line);gap:.375rem}
	/* The bar covers the bottom of the page; the footer needs room to be read. */
	.site-foot{padding-bottom:5.5rem}
}

/* =========================================================================
 * Editor content (any page written in the admin)
 * ====================================================================== */

.entry{font-size:1.0625rem}
.entry h2{font-size:1.625rem;margin:2.5rem 0 1rem}
.entry h3{font-size:1.25rem;margin:2rem 0 .75rem}
.entry ul,.entry ol{margin:0 0 1.25rem;padding-inline-start:1.25rem}
.entry li{margin-bottom:.375rem}
.entry li::marker{color:var(--terra)}
.entry img{border-radius:var(--radius);margin-block:1.5rem}
.entry blockquote{margin:1.5rem 0;padding:1rem 1.5rem;border-inline-start:3px solid var(--terra);
	background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}

.page-head{padding-block:3.5rem 0}
.page-head h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.015em}
.page-head p{margin-top:1rem;color:var(--muted);font-size:1.0625rem;max-width:42rem}

/* =========================================================================
 * Motion
 *
 * Two kinds. The first screen plays itself on load: eyebrow, heading, text,
 * buttons, photograph, one after another. Everything below it waits out of
 * sight until it scrolls into view, then rises into place; cards in a row
 * come one after another. Both are off for anyone who asked their system for
 * less motion, and the waiting only ever happens when the script that ends
 * it is present (html.js).
 * ====================================================================== */

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(173,98,55,.45)}100%{box-shadow:0 0 0 .75rem rgba(173,98,55,0)}}
@keyframes hl-grow{from{background-size:0 .34em}to{background-size:100% .34em}}

.js .hero-copy > *{animation:rise .8s var(--ease) both}
.js .hero-copy > :nth-child(1){animation-delay:.05s}
.js .hero-copy > :nth-child(2){animation-delay:.15s}
.js .hero-copy > :nth-child(3){animation-delay:.27s}
.js .hero-copy > :nth-child(4){animation-delay:.39s}
.js .hero-copy > :nth-child(5){animation-delay:.5s}
.js .hero .hl{animation:hl-grow .8s var(--ease) .75s both}
.js .hero-media .ph-main{animation:rise .9s var(--ease) .2s both}
.js .hero-media .ph-sub{animation:pop .7s var(--ease) .55s both}
.js .hero-media .chip{animation:pop .6s var(--ease) .8s both}
.js .hero-facts{animation:rise .8s var(--ease) .6s both}

/* What rises into view. Named here, in the stylesheet, rather than tagged by
   the script, so nothing is drawn and then snatched away while the script is
   still on its way: the page's first paint already has these out of sight. */
.js :is(.section-head,.card,.master,.shots figure,.shot-wide,.pricegroup,.contact-list,.map,.cta-inner,.wss-book,.entry,.wss-offline){
	transition:opacity .7s ease,transform .8s var(--ease);
	transition-delay:calc(var(--i,0) * 90ms)}
.js :is(.section-head,.card,.master,.shots figure,.shot-wide,.pricegroup,.contact-list,.map,.cta-inner,.wss-book,.entry,.wss-offline):not(.in){
	opacity:0;transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
	.js :is(.section-head,.card,.master,.shots figure,.shot-wide,.pricegroup,.contact-list,.map,.cta-inner,.wss-book,.entry,.wss-offline):not(.in){opacity:1;transform:none}
	.hl{background-size:100% .34em}
	.js .sticky-cta:not(.show){transform:none}
}