/* =========================================================
   ORCA of Houston — main stylesheet
   Modern dental laboratory theme (gold + warm charcoal)
   ========================================================= */

/* ---------- Brand fonts (self-hosted) ---------- */
@font-face {
	font-family: "Rage Italic";
	src: url("../fonts/rage-italic.woff2") format("woff2"),
	     url("../fonts/rage-italic.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Semplice";
	src: url("../fonts/semplice-regular.woff2") format("woff2"),
	     url("../fonts/semplice-regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Utility classes to apply the brand fonts on specific elements. */
.font-rage { font-family: "Rage Italic", cursive; }
.font-semplice { font-family: "Semplice", monospace; letter-spacing: .02em; }

:root {
	/* Warm charcoal — used for dark sections, headings, footer */
	--navy:        #211e18;
	--navy-700:    #2b2720;
	--navy-600:    #39332a;
	/* Signature ORCA gold */
	--teal:        #f2a900;
	--teal-600:    #b07c00;  /* darker gold — readable text/links on light */
	--teal-300:    #f8cf63;  /* light gold */
	--accent:      #f2a900;  /* gold (buttons / highlights) */
	--ink:         #221d15;  /* warm near-black headings */
	--body:        #595149;
	--muted:       #8c8377;
	--line:        #ece6da;
	--bg:          #ffffff;
	--bg-soft:     #faf6ee;  /* warm cream */
	--bg-tint:     #fbf0d4;  /* light gold tint */
	--white:       #ffffff;

	--radius:      14px;
	--radius-lg:   22px;
	--shadow:      0 10px 30px -12px rgba(70, 52, 12, .25);
	--shadow-lg:   0 30px 60px -20px rgba(70, 52, 12, .35);

	--ff-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--container: 1160px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--body);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
	font-family: var(--ff-head);
	color: var(--ink);
	line-height: 1.15;
	margin: 0 0 .6em;
	font-weight: 700;
}

p { margin: 0 0 1.1em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding: 92px 0; }

.eyebrow {
	display: inline-block;
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--teal-600);
	margin-bottom: .9rem;
}

.text-accent { color: var(--teal); }

.section__head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.section__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section__sub { color: var(--muted); font-size: 1.05rem; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--navy); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: .95rem;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.btn--accent {
	background: var(--accent);
	color: #2c2206;
	box-shadow: 0 12px 24px -10px rgba(242, 169, 0, .7);
}
.btn--accent:hover { transform: translateY(-2px); color: #2c2206; background: var(--teal-300); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; transform: translateY(-2px); }
.btn--block { width: 100%; }

/* ---------- Topbar ---------- */
.topbar {
	background: var(--navy);
	color: #c9d8e6;
	font-size: .85rem;
}
.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 42px;
	gap: 16px;
}
.topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__link { color: #c9d8e6; display: inline-flex; align-items: center; gap: 7px; }
.topbar__link:hover { color: #fff; }
.topbar .ico { color: var(--teal-300); }
.topbar__social { display: flex; gap: 8px; }
.social {
	width: 28px; height: 28px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #c9d8e6;
	font-size: .8rem;
	font-family: var(--ff-head);
}
.social:hover { background: var(--teal); color: #fff; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(70,52,12,.28); }
/* Shrink the big logo + header when scrolling for a compact sticky bar */
.site-header.is-stuck .site-header__inner { padding-block: 8px; gap: 6px; }
.site-header.is-stuck .brand__logo,
.site-header.is-stuck .custom-logo-link img,
.site-header.is-stuck .custom-logo { height: 72px; }
.custom-logo-link img, .custom-logo { transition: height .3s ease; }
.site-header__inner {
	display: flex;
	flex-direction: column;     /* logo on top, menu below */
	align-items: center;
	gap: 10px;
	padding-block: 14px;
	position: relative;
	transition: padding .3s ease, gap .3s ease;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__logo {
	height: 160px;
	width: auto;
	display: block;
	transition: height .3s ease;
}
.brand__mark {
	display: inline-grid; place-items: center;
	width: 44px; height: 48px;
	color: var(--teal); /* gold tooth */
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
	font-family: var(--ff-head); font-weight: 700; font-size: 1.18rem;
	color: var(--navy); letter-spacing: .01em;
}
.brand__sub { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600); }
.custom-logo-link { display: inline-block; }
.custom-logo-link img, .custom-logo { height: 160px; width: auto; display: block; }

.main-navigation { width: 100%; }
.nav-menu {
	list-style: none; display: flex; gap: 22px; margin: 0; padding: 0;
	justify-content: center; flex-wrap: wrap;
}
.nav-menu a {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 1.18rem;
	color: var(--ink);
	padding: 8px 0;
	position: relative;
	transition: color .2s ease;
}
.nav-menu a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 2px; background: var(--accent); transition: right .25s ease;
}
.nav-menu a:hover::after,
.nav-menu a:focus::after,
.nav-menu a.is-active::after { right: 0; }
/* Colour change only on hover / click (NOT on "current page", since the one-page
   anchor links all match the home URL and would otherwise turn the whole menu gold) */
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a:active,
.nav-menu a.is-active { color: var(--teal-600); }

/* Calendar + Prescription Form: elegant outlined pills.
   The prescription link is a hash link on the one-page home and a real page
   elsewhere, so match "prescription" anywhere in the href. */
.nav-menu a[href*="/calendar"],
.nav-menu a[href*="prescription"] {
	border: 1px solid var(--teal);
	border-radius: 999px;
	padding: 8px 16px;
	color: var(--navy);
	letter-spacing: .02em;
	transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav-menu a[href*="/calendar"]::after,
.nav-menu a[href*="prescription"]::after { display: none; }
.nav-menu a[href*="/calendar"]:hover,
.nav-menu a[href*="/calendar"]:focus,
.nav-menu a[href*="prescription"]:hover,
.nav-menu a[href*="prescription"]:focus {
	background: var(--teal);
	color: #2c2206;
	box-shadow: 0 10px 24px -10px rgba(242, 169, 0, .6);
}
.nav-menu a[href*="/calendar"].is-active,
.nav-menu a[href*="prescription"].is-active {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* Portal item: inverted effect — gold by default, black when clicked */
.nav-menu a[href*="/portal"] { color: var(--teal); }
.nav-menu a[href*="/portal"]:hover,
.nav-menu a[href*="/portal"]:focus { color: var(--teal-300); }
.nav-menu a[href*="/portal"]:active,
.nav-menu a[href*="/portal"].is-active { color: var(--navy); }
.nav-menu a[href*="/portal"].is-active::after { background: var(--navy); }

.header-cta { display: none; } /* hidden in centered stacked header (phone is in the top bar) */

.nav-toggle {
	display: none;
	background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px;
	flex-direction: column; justify-content: center; gap: 5px;
	margin-left: auto;
}
.nav-toggle__bar {
	display: block; width: 24px; height: 2px; margin-inline: auto;
	background: var(--navy); border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	color: #f4ecdd;
	overflow: hidden;
	background: var(--navy);
}
.hero__bg {
	position: absolute; inset: 0;
	background: linear-gradient(160deg, #211e18 0%, #2b2720 55%, #342f24 100%);
}
/* animated drifting gold blobs (dynamic background) */
.hero__bg::before {
	content: ""; position: absolute; inset: -30%; pointer-events: none;
	background:
		radial-gradient(34% 34% at 20% 22%, rgba(242,169,0,.34), transparent 66%),
		radial-gradient(30% 30% at 85% 28%, rgba(242,169,0,.24), transparent 66%),
		radial-gradient(32% 32% at 65% 88%, rgba(248,201,99,.20), transparent 70%);
	animation: heroBlobs 7s ease-in-out infinite alternate;
}
@keyframes heroBlobs {
	0%   { transform: translate(-6%, 3%) scale(1); }
	50%  { transform: translate(7%, -6%) scale(1.16); }
	100% { transform: translate(-3%, 6%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__bg::before { animation: none; }
}
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 0.85fr 1.25fr;  /* give the before/after more room */
	gap: 44px;
	align-items: center;
	padding: 90px 24px 98px;
}
.hero .eyebrow { color: var(--teal-300); }
.hero__title {
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 800;
	margin-bottom: .5em;
}
.hero__lead { font-size: 1.12rem; color: #d8cbb4; max-width: 560px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 28px; }
.hero__badges { display: flex; gap: 12px; flex-wrap: wrap; }
.badge {
	font-size: .82rem;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	color: #e6dac3;
}
.badge strong { color: var(--teal-300); font-family: var(--ff-head); }

.hero__media { position: relative; }
.hero__card {
	position: relative;
	border-radius: var(--radius-lg);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	padding: 14px;
	box-shadow: var(--shadow-lg);
}
.hero__card-img {
	height: 320px;
	border-radius: 16px;
	background:
		linear-gradient(135deg, rgba(242,169,0,.30), rgba(33,30,24,.1)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h4v4H0zM4 4h4v4H4z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
		linear-gradient(160deg, #2b2720, #4a4030);
	display: grid; place-items: center;
}
.hero__card-img::after {
	content: "Restoration photo";
	font-family: var(--ff-head); font-size: .8rem; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hero__card-stat {
	position: absolute; left: -18px; bottom: -22px;
	background: #fff; color: var(--ink);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: var(--shadow);
	display: flex; flex-direction: column;
	max-width: 210px;
}
.hero__card-stat .num {
	font-family: var(--ff-head); font-weight: 800; font-size: 1.7rem; color: var(--navy);
}
.hero__card-stat .num small { font-size: .9rem; color: var(--teal-600); margin-left: 4px; }
.hero__card-stat .lbl { font-size: .82rem; color: var(--muted); }

/* ---------- Hero before/after ---------- */
.hero__ba {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hero__ba-item {
	position: relative; margin: 0;
	border-radius: 16px; overflow: hidden;
	border: 4px solid #fff;
	box-shadow:
		0 34px 60px -20px rgba(0,0,0,.7),
		0 12px 24px -12px rgba(0,0,0,.55);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.hero__ba-item img { width: 100%; height: auto; display: block; aspect-ratio: 850 / 567; object-fit: cover; }
.hero__ba-item figcaption {
	position: absolute; left: 12px; top: 12px;
	background: rgba(33,30,24,.85); color: #fff;
	font-family: var(--ff-head); font-weight: 700; font-size: .8rem;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px;
	box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
}
.hero__ba-item figcaption.is-after { background: var(--accent); color: #2c2206; }
/* straight photos, lift on hover */
.hero__ba-item:hover {
	transform: translateY(-6px) scale(1.03); z-index: 3;
	box-shadow: 0 44px 70px -18px rgba(0,0,0,.8), 0 16px 30px -12px rgba(0,0,0,.6);
}

/* ---------- Hero banner carousel ---------- */
.hero-carousel { position: relative; overflow: hidden; }
.hero-carousel__track {
	display: flex;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.hero-carousel__track > * { flex: 0 0 100%; min-width: 100%; }
.hero-carousel__btn {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 48px; height: 48px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--navy);
	font-size: 1.7rem; line-height: 1; cursor: pointer;
	display: grid; place-items: center; box-shadow: var(--shadow);
	transition: background .2s ease, color .2s ease;
}
.hero-carousel__btn:hover { background: var(--accent); color: #2c2206; }
.hero-carousel__btn--prev { left: 14px; }
.hero-carousel__btn--next { right: 14px; }
.hero-carousel__dots {
	position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 9px; z-index: 5;
}
.hero-carousel__dots button {
	width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
	border: 0; background: rgba(150,150,150,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.5);
	transition: width .25s ease, background .25s ease;
}
.hero-carousel__dots button.is-active { background: var(--accent); width: 28px; border-radius: 6px; }

@media (max-width: 560px) {
	.hero-carousel__btn { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* ---------- Tech strip ---------- */
.techstrip { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.techstrip__inner {
	display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
	padding-block: 26px; justify-content: space-between;
}
.techstrip__label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.techstrip__logos {
	list-style: none; display: flex; gap: 36px; flex-wrap: wrap; margin: 0; padding: 0;
}
.techstrip__logos li {
	font-family: var(--ff-head); font-weight: 700; font-size: 1.1rem;
	color: var(--navy-600); opacity: .75;
}

/* ---------- Services / cards ---------- */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 28px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: transparent;
}
.card__icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: 14px;
	font-size: 1.5rem;
	background: var(--bg-tint);
	color: var(--teal-600);
	margin-bottom: 18px;
}
.card:hover .card__icon { background: var(--teal); color: #fff; }
.card__title { font-size: 1.22rem; }
.card__text { color: var(--muted); margin: 0; font-size: .98rem; }

/* ---------- Grow Your Practice (iTero promo) ---------- */
.grow {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(120deg, #fff3d6 0%, var(--bg-soft) 40%, #ffe9bd 70%, var(--bg-soft) 100%);
	background-size: 280% 280%;
	animation: growShift 7s ease-in-out infinite;
}
/* drifting gold blobs for a dynamic feel */
.grow::before {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(38% 38% at 18% 28%, rgba(242,169,0,.30), transparent 68%),
		radial-gradient(32% 32% at 82% 18%, rgba(242,169,0,.22), transparent 68%),
		radial-gradient(42% 42% at 72% 82%, rgba(57,51,42,.12), transparent 70%);
	animation: growBlobs 7s ease-in-out infinite alternate;
}
.grow::after {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(30% 30% at 40% 70%, rgba(248,201,99,.28), transparent 70%),
		radial-gradient(28% 28% at 90% 60%, rgba(242,169,0,.18), transparent 70%);
	animation: growBlobs2 7s ease-in-out infinite alternate;
}
.grow > .container { position: relative; z-index: 1; }
@keyframes growShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes growBlobs {
	0%   { transform: translate(-6%, 3%) scale(1); }
	50%  { transform: translate(6%, -5%) scale(1.14); }
	100% { transform: translate(-3%, 5%) scale(1.04); }
}
@keyframes growBlobs2 {
	0%   { transform: translate(5%, -4%) scale(1.05); }
	50%  { transform: translate(-7%, 5%) scale(1.16); }
	100% { transform: translate(4%, -2%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.grow, .grow::before, .grow::after,
	.about, .about::before, .about::after,
	.rx-howto, .rx-howto::before, .rx-howto::after { animation: none; }
}
.grow__top {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 50px; align-items: center; margin-bottom: 50px;
}
.grow__head { max-width: 600px; margin: 0; text-align: left; }
.grow__media {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 22px 22px 14px;
	text-align: center;
}
.grow__media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.grow__media figcaption {
	margin-top: 12px; font-family: var(--ff-head); font-weight: 600;
	font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
}
.grow__vet {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--ff-head); font-weight: 600; font-size: .8rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
	margin-bottom: 16px;
}
.grow__vet .stars { color: var(--accent); letter-spacing: 2px; }
.grow__title {
	font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800;
	text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin-bottom: 4px;
}
.grow__sub {
	font-family: var(--ff-head); font-weight: 600; text-transform: uppercase;
	letter-spacing: .03em; color: var(--ink); font-size: 1.05rem; margin-bottom: 0;
}
.grow__script {
	display: inline-block; font-size: 2.1rem; line-height: 1; color: var(--teal-600);
	text-transform: none; letter-spacing: 0; vertical-align: -2px;
}
.grow__lead { color: var(--muted); max-width: 560px; margin: 16px 0 26px; font-size: 1.05rem; }

.grow__features {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	background: #fff;
}
.grow__feature {
	flex: 1 1 0; min-width: 170px; text-align: center;
	padding: 28px 18px; border-right: 1px solid var(--line);
	display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.grow__feature:last-child { border-right: 0; }
.grow__feature svg { width: 40px; height: 40px; color: var(--teal-600); }
.grow__feature span {
	font-family: var(--ff-head); font-weight: 600; font-size: .82rem;
	letter-spacing: .03em; text-transform: uppercase; color: var(--ink); line-height: 1.35;
}

@media (max-width: 860px) {
	.grow__top { grid-template-columns: 1fr; gap: 34px; }
	.grow__head { max-width: none; text-align: center; }
	.grow__head .grow__lead { margin-inline: auto; }
	.grow__feature { flex-basis: 33.333%; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
	.grow__feature { flex-basis: 50%; }
	.grow__script { font-size: 1.7rem; }
}

/* ---------- About ---------- */
.about {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(120deg, #fff3d6 0%, var(--bg-soft) 40%, #ffe9bd 70%, var(--bg-soft) 100%);
	background-size: 280% 280%;
	animation: growShift 7s ease-in-out infinite;
}
.about::before {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(38% 38% at 18% 28%, rgba(242,169,0,.30), transparent 68%),
		radial-gradient(32% 32% at 82% 18%, rgba(242,169,0,.22), transparent 68%),
		radial-gradient(42% 42% at 72% 82%, rgba(57,51,42,.12), transparent 70%);
	animation: growBlobs 7s ease-in-out infinite alternate;
}
.about::after {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(30% 30% at 40% 70%, rgba(248,201,99,.28), transparent 70%),
		radial-gradient(28% 28% at 90% 60%, rgba(242,169,0,.18), transparent 70%);
	animation: growBlobs2 7s ease-in-out infinite alternate;
}
.about > .container { position: relative; z-index: 1; }
.about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.about__media { position: relative; display: flex; justify-content: center; }
.about__portrait {
	margin: 0;
	max-width: 290px;
	background: #fff;
	padding: 14px 14px 6px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.about__portrait img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	display: block;
}
.about__portrait figcaption {
	text-align: center;
	padding: 14px 6px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.about__portrait-name { font-family: var(--ff-head); font-weight: 700; color: var(--navy); font-size: 1.08rem; }
.about__portrait-role { font-size: .8rem; color: var(--teal-600); letter-spacing: .05em; text-transform: uppercase; }
.about__exp {
	position: absolute; left: -10px; top: 10px;
	background: #fff; border-radius: 16px;
	padding: 14px 18px; box-shadow: var(--shadow);
	text-align: center;
}
.about__exp .num { display: block; font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; color: var(--navy); }
.about__exp .lbl { font-size: .72rem; color: var(--muted); }

.about__content .section__title { text-align: left; }
.about__memberships-label { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--ink); margin: 6px 0 12px; }
.about__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 28px; }
.about__badges li {
	font-family: var(--ff-head); font-weight: 600; font-size: .8rem; letter-spacing: .05em;
	color: var(--teal-600); background: var(--bg-tint); border: 1px solid var(--line);
	padding: 8px 16px; border-radius: 999px;
}
.checklist { list-style: none; padding: 0; margin: 0 0 28px; }
.checklist li {
	position: relative; padding-left: 34px; margin-bottom: 12px; color: var(--ink);
}
.checklist li::before {
	content: "✓";
	position: absolute; left: 0; top: 1px;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	background: var(--teal); color: #fff;
	border-radius: 50%; font-size: .75rem; font-weight: 700;
}

/* ---------- Stats ---------- */
.stats { background: var(--navy); color: #fff; padding: 60px 0; }
.stats__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.stat__num {
	display: block; font-family: var(--ff-head); font-weight: 800;
	font-size: 2.6rem; color: var(--teal-300); line-height: 1;
}
.stat__lbl { font-size: .92rem; color: #cabfa8; }

/* ---------- Portfolio carousel ---------- */
.portfolio .container { max-width: min(1480px, 94vw); } /* wider gallery */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; border-radius: var(--radius); }
.carousel__track {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.carousel__slide {
	flex: 0 0 calc((100% - 3 * 18px) / 4); /* 4 per view on desktop */
	margin: 0;
}
.carousel__slide img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
	background: var(--bg-soft);
	box-shadow: var(--shadow);
}
.carousel__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3;
	width: 50px; height: 50px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--white); color: var(--navy);
	font-size: 1.7rem; line-height: 1; cursor: pointer;
	box-shadow: var(--shadow);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carousel__btn:hover { background: var(--accent); color: #2c2206; }
.carousel__btn--prev { left: 10px; }
.carousel__btn--next { right: 10px; }
.portfolio__note { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 22px; }

/* ---------- News ---------- */
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card__thumb { display:block; margin: -28px -28px 18px; }
.news-card__thumb img { border-radius: var(--radius) var(--radius) 0 0; }
.news-card__date {
	display: inline-block; font-size: .78rem; font-weight: 600;
	color: var(--teal-600); letter-spacing: .04em; margin-bottom: 10px;
}
.news-card__title { font-size: 1.18rem; }
.news-card__title a { color: var(--ink); }
.news-card__title a:hover { color: var(--teal-600); }
.news-card__excerpt { color: var(--muted); font-size: .96rem; }
.news-card__link { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; }
.news-card__address {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
	font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--ink);
}
.news-card__address .ico { color: var(--teal-600); font-size: 1.05rem; line-height: 1.2; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-soft); }
.contact__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.contact__info .section__title { text-align: left; }
.contact__list { list-style: none; padding: 0; margin: 24px 0 0; }
.contact__list li {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 0; border-bottom: 1px solid var(--line);
	font-family: var(--ff-head); font-weight: 500; color: var(--ink);
}
.contact__list .ico {
	width: 40px; height: 40px; flex: none;
	display: grid; place-items: center;
	border-radius: 10px; background: var(--bg-tint); color: var(--teal-600);
}

.contact__form-wrap {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	padding: 34px;
	box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
	display: block; font-family: var(--ff-head); font-weight: 500;
	font-size: .85rem; color: var(--ink); margin-bottom: 7px;
}
.field input,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	background: var(--bg-soft);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--teal);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(242,169,0,.18);
}
.contact-form__hint { text-align: center; font-size: .85rem; color: var(--muted); margin: 14px 0 0; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
	background:
		radial-gradient(900px 400px at 85% -20%, rgba(242,169,0,.30), transparent 60%),
		linear-gradient(160deg, #211e18, #342f24);
	color: #fff;
	padding: 64px 0 56px;
}
.page-hero__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.page-hero__title span { color: var(--teal-300); }
.page-hero__meta { color: #cabfa8; margin: 8px 0 0; }

/* ---------- Entry content ---------- */
.entry-wrap { max-width: 820px; margin-inline: auto; }
.entry-wrap--narrow { max-width: 760px; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--radius); margin-block: 1.4em; }
.entry-thumb img { border-radius: var(--radius); margin-bottom: 1.6em; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; }
.pagination { margin-top: 48px; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 10px;
	margin: 0 4px; font-family: var(--ff-head); color: var(--ink);
}
.pagination .page-numbers.current { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #bdb3a3; }
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 40px;
	padding: 72px 24px 48px;
}
.site-footer__logo {
	display: inline-block;
	max-width: 300px;
}
.site-footer__logo img { width: 100%; height: auto; display: block; }
.site-footer__tag { margin: 18px 0; font-size: .95rem; color: #9c9182; max-width: 320px; }
.site-footer__social { display: flex; gap: 10px; }
.footer-widget__title, .site-footer h4 {
	color: #fff; font-size: 1.05rem; margin-bottom: 18px;
}
.footer-menu, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-menu li, .footer-contact li { margin-bottom: 11px; }
.footer-menu a { color: #bdb3a3; font-size: .95rem; }
.footer-menu a:hover { color: var(--teal-300); }

/* Footer "Explore" fallback menu: it re-uses the header .nav-menu class, so
   restyle it here — vertical, always readable on the dark footer, gold on hover */
.site-footer .nav-menu { display: block; }
.site-footer .nav-menu li { margin-bottom: 11px; }
.site-footer .nav-menu a {
	color: #bdb3a3; font-size: .95rem; font-weight: 400; padding: 0;
}
.site-footer .nav-menu a::after { display: none; }
.site-footer .nav-menu a:hover,
.site-footer .nav-menu a:focus { color: var(--teal-300); }
/* neutralise the header-only Calendar pill / Portal gold inside the footer */
.site-footer .nav-menu a[href*="/calendar"],
.site-footer .nav-menu a[href*="prescription"],
.site-footer .nav-menu a[href*="/portal"] { border: 0; border-radius: 0; padding: 0; color: #bdb3a3; letter-spacing: 0; }
.site-footer .nav-menu a[href*="/calendar"]:hover,
.site-footer .nav-menu a[href*="/calendar"]:focus,
.site-footer .nav-menu a[href*="prescription"]:hover,
.site-footer .nav-menu a[href*="prescription"]:focus,
.site-footer .nav-menu a[href*="/portal"]:hover,
.site-footer .nav-menu a[href*="/portal"]:focus { background: transparent; box-shadow: none; color: var(--teal-300); }
.footer-contact li { display: flex; gap: 10px; font-size: .95rem; }
.footer-contact .ico { color: var(--teal-300); }
.footer-contact a { color: #bdb3a3; }
.footer-contact a:hover { color: #fff; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__bar-inner {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	padding-block: 22px; font-size: .85rem; color: #8a7f6f;
}
.site-footer__bar p { margin: 0; }

/* ---------- Back to top ---------- */
.call-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	display: inline-flex; align-items: center; gap: 9px;
	padding: .9em 1.5em; border-radius: 100px;
	background: var(--teal); color: var(--navy);
	font-family: var(--ff-head); font-size: .82rem; font-weight: 700;
	letter-spacing: .06em; text-decoration: none;
	box-shadow: 0 10px 28px rgba(242, 169, 0, .42);
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.call-fab:hover { background: var(--navy); color: var(--teal-300); }
.call-fab__short { display: none; }

/* Air under the footer so the pill never covers the copyright line. */
.site-footer { padding-bottom: 92px; }

@media (max-width: 760px) {
	.call-fab { padding: .9em 1.25em; }
	.call-fab__short { display: inline; }
	.call-fab__full { display: none; }
}

/* On a phone the "Get the ORCA app" pill sits along the same bottom edge, so
   the call pill and the back-to-top arrow climb above it while it is showing. */
body.has-a2hs .call-fab { bottom: 80px; }
body.has-a2hs .back-to-top { bottom: 142px; }

/* Back to top rides above the call pill instead of fighting it for the corner. */
.back-to-top {
	position: fixed; right: 22px; bottom: 84px; z-index: 90;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--teal); color: #fff;
	border-radius: 50%; box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	font-size: 1.2rem;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--teal-600); color: #fff; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
	.hero__media { max-width: 460px; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.carousel__slide { flex-basis: calc((100% - 2 * 18px) / 3); } /* 3 per view */
	.carousel__slide img { height: 300px; }
	.about__grid { gap: 48px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.header-cta { display: none; }
	.nav-toggle {
		display: flex;
		position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
		margin: 0;
	}
	.brand__logo,
	.custom-logo-link img, .custom-logo { height: 100px; }
	.site-header.is-stuck .brand__logo,
	.site-header.is-stuck .custom-logo-link img,
	.site-header.is-stuck .custom-logo { height: 60px; }
	.main-navigation {
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--line);
		padding: 8px 0 20px;
		transform: translateY(-12px);
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
		box-shadow: var(--shadow);
		max-height: 80vh;
		overflow-y: auto;
	}
	.nav-open .main-navigation { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
	.nav-menu { flex-direction: column; gap: 0; }
	.nav-menu li { border-bottom: 1px solid var(--line); }
	.nav-menu a { display: block; padding: 16px 24px; }
	.nav-menu a::after { display: none; }
	/* The pills become normal rows with a gold accent on mobile */
	.nav-menu a[href*="/calendar"],
	.nav-menu a[href*="prescription"] {
		border: 0; border-radius: 0; padding: 16px 24px;
		border-left: 3px solid var(--teal);
	}
	.nav-menu a[href*="/calendar"]:hover,
	.nav-menu a[href*="/calendar"]:focus,
	.nav-menu a[href*="prescription"]:hover,
	.nav-menu a[href*="prescription"]:focus { background: rgba(242, 169, 0, .1); box-shadow: none; }
	.section { padding: 68px 0; }
}

@media (max-width: 680px) {
	body { font-size: 16px; }
	.topbar__loc { display: none; }
	.topbar__contact { gap: 16px; }
	.cards, .news__grid { grid-template-columns: 1fr; }
	.carousel__slide { flex-basis: calc((100% - 18px) / 2); } /* 2 per view */
	.carousel__slide img { height: 240px; }
	.carousel__btn--prev { left: 4px; }
	.carousel__btn--next { right: 4px; }
	.about__grid, .contact__grid { grid-template-columns: 1fr; }
	.about__img--2 { position: static; width: 100%; margin-top: 16px; }
	.about__exp { left: 12px; top: 12px; }
	.stats__grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
	.field-row { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.hero__card-stat { position: static; margin-top: 14px; max-width: none; }
	.section__head { margin-bottom: 38px; }
}

/* =========================================================
   Prescription Form page
   ========================================================= */
.rx-wrap { max-width: 920px; margin-inline: auto; }
.rx-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.btn--ghost.btn--dark { color: var(--navy); border-color: var(--navy); }
.btn--ghost.btn--dark:hover { background: var(--navy); color: #fff; }

.rx-notice { border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; font-weight: 500; }
.rx-notice--ok { background: #eaf7ec; border: 1px solid #b7e0bd; color: #1d6b2b; }
.rx-notice--err { background: #fdeceb; border: 1px solid #f3c2bf; color: #9a2820; }

.rx-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 38px;
}
.rx-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.rx-letterhead { text-align: center; border-bottom: 2px solid var(--bg-tint); padding-bottom: 18px; margin-bottom: 26px; }
.rx-logo { height: 92px; width: auto; display: inline-block; }
.rx-sub { font-size: .82rem; letter-spacing: .06em; color: var(--muted); margin: 8px 0 0; text-transform: uppercase; }

.rx-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.rx-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 1 1 200px; }
.rx-form .field > span,
.rx-form legend { font-family: var(--ff-head); font-weight: 600; font-size: .82rem; color: var(--ink); }
.rx-form .field--wide { flex: 2 1 280px; }
.rx-form .field--grow { flex: 1 1 100%; }
.rx-form .field--sm { flex: 0 1 130px; }
.rx-form .field--sex { border: 0; padding: 0; margin: 0; flex: 0 1 120px; display: flex; flex-direction: column; gap: 6px; }
.rx-inline { display: flex; gap: 22px; align-items: center; padding-top: 8px; font-weight: 500; }
.rx-inline label { display: inline-flex; align-items: center; gap: 3px; }
.rx-form input[type="text"],
.rx-form input[type="date"],
.rx-form textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--line);
	border-radius: 10px; font: inherit; font-size: .95rem; color: var(--ink);
	background: var(--bg-soft); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rx-form input:focus, .rx-form textarea:focus {
	outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(242,169,0,.18);
}

.rx-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 22px; }
.rx-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rx-box legend { padding: 0 8px; }
.rx-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .95rem; color: var(--body); cursor: pointer; }
.rx-check input { width: 17px; height: 17px; accent-color: var(--teal); }

/* A secondary row inside an option box: Layered/Monolithic under the
   posterior units, Crowns/Veneers under Diagnostic Wax Up. */
.rx-subrow { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 7px; padding-top: 8px; border-top: 1px dashed var(--line); }
.rx-subrow--under { margin-top: 0; padding: 0 0 0 26px; border-top: 0; gap: 20px; }
.rx-check--inline { padding: 2px 0; }

/* Shade: standard or custom, with the photo upload right beside them */
.rx-shade { margin-bottom: 18px; }
.rx-shade__row { display: grid; grid-template-columns: .85fr 1.4fr 1.05fr; gap: 20px; align-items: start; }
.rx-shade__col { display: flex; flex-direction: column; gap: 8px; }
.rx-shade__txt { line-height: 1.3; }
.rx-shade__note { white-space: nowrap; color: var(--muted); font-size: .8em; font-weight: 400; }
.rx-shade__lbl { font-family: var(--ff-head); font-weight: 600; font-size: .82rem; color: var(--ink); }
.rx-shade__file {
	font: inherit; font-size: .85rem; color: var(--body);
	padding: 8px; border: 1px dashed var(--line); border-radius: 10px;
	background: var(--bg-soft); cursor: pointer; width: 100%;
}
.rx-shade__file::file-selector-button {
	font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
	margin-right: 10px; padding: 7px 12px; border-radius: 8px;
	color: var(--navy); background: #fff; border: 1px solid var(--navy);
}
.rx-shade__help { display: block; font-size: .76rem; line-height: 1.45; color: var(--muted); }

/* The two tooth diagrams from the original paper form, beside Instructions:
   somewhere to draw shade zones and details by hand. */
.rx-notes { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.rx-diagram { flex: 0 0 215px; margin: 0; padding-top: 22px; }
.rx-diagram img { display: block; width: 100%; height: auto; }
.rx-diagram__note { display: none; }
.rx-form .field--notes { flex: 1 1 320px; }

.rx-teeth { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 22px; }
.rx-teeth legend { padding: 0 8px; }
.rx-printcopy { display: none; }
.rx-teeth__row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.rx-tooth { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .72rem; color: var(--muted); width: 34px; }
.rx-tooth input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

.rx-submit { margin-top: 6px; }

/* How to use the prescription: send online, print for the case, or both */
.rx-howto {
	position: relative; overflow: hidden;
	margin: 0 0 26px; padding: 20px 24px;
	border: 1px solid var(--line); border-radius: 14px;
	/* same living gradient the About section uses */
	background: linear-gradient(120deg, #fff3d6 0%, var(--bg-soft) 40%, #ffe9bd 70%, var(--bg-soft) 100%);
	background-size: 280% 280%;
	animation: growShift 7s ease-in-out infinite;
}
.rx-howto::before {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(38% 38% at 18% 28%, rgba(242,169,0,.26), transparent 68%),
		radial-gradient(32% 32% at 82% 18%, rgba(242,169,0,.18), transparent 68%);
	animation: growBlobs 7s ease-in-out infinite alternate;
}
.rx-howto::after {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(30% 30% at 40% 70%, rgba(248,201,99,.24), transparent 70%),
		radial-gradient(28% 28% at 90% 60%, rgba(242,169,0,.15), transparent 70%);
	animation: growBlobs2 7s ease-in-out infinite alternate;
}
.rx-howto__title, .rx-howto__list { position: relative; z-index: 1; }
.rx-howto__title { margin: 0 0 14px; font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.rx-howto__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rx-howto__list li { display: flex; align-items: flex-start; gap: 12px; font-size: .93rem; line-height: 1.5; color: var(--body); }
.rx-howto__ico { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.4; }
.rx-howto__list em { font-style: normal; font-weight: 600; color: var(--ink); }
.rx-howto__note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 620px) {
	.rx-howto { padding: 15px 16px; }
	.rx-howto__list li { font-size: .9rem; }
}

.rx-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; font-size: .8rem; color: var(--muted); line-height: 1.6; }

@media (max-width: 680px) {
	.rx-options { grid-template-columns: 1fr; }
	.rx-shade__row { grid-template-columns: 1fr; }
	.rx-diagram { flex: 0 0 150px; margin-inline: auto; padding-top: 0; }
	.rx-form { padding: 22px; }
	.rx-tooth { width: 30px; }
}

/* ---------- Print: the filled prescription on ONE portrait page ---------- */
@media print {
	/* 13mm keeps clear of the unprintable edge every printer has */
	@page { size: portrait; margin: 13mm; }

	/* Hide chrome + every page section except the one holding the form */
	.topbar, .site-header, .site-footer, .back-to-top, .call-fab { display: none !important; }
	#content > *:not(.rx-print-root):not(.cal-page) { display: none !important; }
	.rx-print-root { display: block !important; }
	/* Hide the section heading + interactive bits within the form block */
	.rx-print-root .section__head,
	.no-print, .rx-actions, .rx-submit { display: none !important; }

	/* iOS Safari auto-inflates text when printing, which pushed the signature
	   row onto a second sheet. Pin the text size and the base font. */
	html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
	body { background: #fff; font-size: 12px !important; line-height: 1.4; }
	.section, .rx-print-root { padding: 0 !important; margin: 0 !important; }
	/* Fix the sheet's composition width. Phones lay the page out at screen
	   width and then scale it up to the paper, which inflated everything and
	   pushed the sheet onto a second page. Pinning a paper-sized width makes
	   the printed layout identical on every device. 700px fits both Letter
	   and A4 inside their margins. */
	.rx-print-root, .rx-wrap, .rx-form {
		width: auto !important; max-width: 670px !important;
		margin-left: auto !important; margin-right: auto !important;
	}
	.rx-form { border: 0; box-shadow: none; padding: 0; }
	.rx-box, .rx-teeth { break-inside: avoid; }
	.rx-footer { color: #000; font-size: 9.5px; margin-top: 5px; padding-top: 4px; line-height: 1.35; }
	a[href]:after { content: ""; } /* don't print URLs */

	/* Ticked boxes must survive the printer's "no background graphics" default */
	.rx-form input, .rx-form textarea {
		background: #fff !important; border-color: #999 !important;
		-webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
	}

	/* Compact letterhead */
	.rx-letterhead { padding-bottom: 4px; margin-bottom: 5px; border-bottom-width: 1px; }
	.rx-logo { height: 45px; }
	.rx-sub { font-size: 9.5px; margin-top: 5px; }

	/* Tighter rows and fields */
	.rx-grid { gap: 24px; margin-bottom: 7px; }
	.rx-form .field { gap: 3px; }
	.rx-form .field > span, .rx-form legend { font-size: 10px; }
	.rx-form input[type="text"], .rx-form input[type="date"], .rx-form textarea {
		padding: 5px 7px; font-size: 12px; border-radius: 4px;
	}
	/* keep each letter tight to its own circle, with air between M and F */
	.rx-inline { padding-top: 3px; gap: 20px; }
	.rx-inline label { gap: 3px; }

	/* The paper sheet always uses the wide layout. Phones render the form in
	   its stacked, narrow form, and that layout otherwise carries into the
	   printout (making it two pages), so pin every column here with
	   !important — the screen breakpoints must not win during print. */
	.rx-form { padding: 0 !important; }
	.rx-grid { display: flex !important; flex-wrap: wrap !important; }
	.rx-form .field { flex: 1 1 170px !important; }
	.rx-form .field--wide { flex: 2 1 240px !important; }
	.rx-form .field--sm { flex: 0 1 110px !important; }
	.rx-form .field--sex { flex: 0 1 100px !important; }
	.rx-form .field--grow { flex: 1 1 100% !important; }

	/* Option boxes */
	.rx-options { display: grid !important; grid-template-columns: 1fr 1fr !important;
		gap: 10px; margin: 3px 0 6px; }
	.rx-box { padding: 10px 12px; border-radius: 7px; }
	.rx-box legend { padding: 0 5px; }
	.rx-check { gap: 7px; padding: 1px 0; font-size: 10.5px; }
	.rx-check input { width: 13px; height: 13px; }
	.rx-subrow { gap: 16px; margin-top: 4px; padding-top: 5px; }
	.rx-subrow--under { padding: 0 0 0 20px; }

	/* Shade block: one compact band, and the upload button becomes a line of text */
	.rx-shade { padding: 6px 12px; margin-bottom: 5px; }
	.rx-shade__row { display: grid !important; grid-template-columns: .8fr 1.2fr !important; gap: 14px; }
	.rx-shade__col--photos { display: none !important; }
	.rx-shade__col { gap: 4px; }
	.rx-shade__lbl { font-size: 10px; }

	/* Diagrams + Instructions stay side by side on paper */
	.rx-notes { display: flex !important; flex-wrap: nowrap !important; gap: 14px; margin-bottom: 7px; break-inside: avoid; }
	.rx-diagram { flex: 0 0 205px !important; padding-top: 14px; }
	.rx-diagram__note { display: block; margin-top: 5px; font-size: 9.5px; color: #000; text-align: center; line-height: 1.3; }
	.rx-form .field--notes { flex: 1 1 auto !important; }

	/* Odontogram */
	.rx-teeth { padding: 5px 12px; margin-bottom: 5px; border-radius: 7px; }
	.rx-teeth__row { gap: 5px; margin: 4px 0; flex-wrap: nowrap !important; }
	.rx-tooth { width: 27px !important; font-size: 9px; gap: 2px; }
	.rx-tooth input { width: 13px; height: 13px; }

	/* The typed instructions print from a mirrored block (see rx-form.js) so a
	   long note is never clipped; it may run onto a second sheet. */
	.rx-form textarea { min-height: 125px; resize: none; }
	.rx-form.has-printcopy textarea { display: none; }
	.rx-form.has-printcopy .rx-printcopy {
		display: block; white-space: pre-wrap; overflow-wrap: break-word;
		min-height: 125px; padding: 5px 7px; font-size: 12px; line-height: 1.4;
		border: 1px solid #999; border-radius: 4px; color: #111;
	}
	/* the date field's picker button is screen-only chrome */
	.rx-form input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
}

/* A phone's printable area is much narrower than a desktop's. Shrink the sheet
   to that width instead of letting it run off the right edge (which cut the
   Patient, Instructions and License # boxes). */
@media print and (max-width: 620px) {
	body { font-size: 10px !important; }
	.rx-logo { height: 46px; }
	.rx-sub { font-size: 7.5px; }
	.rx-grid { gap: 10px; margin-bottom: 6px; }
	.rx-form .field > span, .rx-form legend { font-size: 8px; }
	.rx-form input[type="text"], .rx-form input[type="date"], .rx-form textarea {
		padding: 3px 5px; font-size: 10px;
	}
	.rx-form .field { flex: 1 1 120px !important; }
	.rx-form .field--wide { flex: 2 1 160px !important; }
	.rx-form .field--sm { flex: 0 1 70px !important; }
	.rx-form .field--sex { flex: 0 1 70px !important; }
	.rx-options { gap: 7px; margin: 4px 0 7px; }
	.rx-box { padding: 6px 7px; }
	.rx-check { gap: 5px; padding: 1px 0; font-size: 8px; }
	.rx-check input { width: 10px; height: 10px; }
	.rx-teeth { padding: 6px 7px; margin-bottom: 7px; }
	.rx-teeth__row { gap: 2px; margin: 3px 0; flex-wrap: wrap !important; }
	.rx-tooth { width: 17px !important; font-size: 6.5px; }
	.rx-tooth input { width: 10px; height: 10px; }
	.rx-form textarea, .rx-form.has-printcopy .rx-printcopy { min-height: 85px; font-size: 10px; }
	.rx-footer { font-size: 7.5px; margin-top: 5px; padding-top: 4px; }
}

/* =========================================================
   Case Delivery Schedule calendar (page-calendar.php)
   ========================================================= */
.cal-page { max-width: 1160px; }
.cal-browsing {
	text-align: center; margin: 0 0 18px; font-size: .95rem; color: var(--body);
	background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px;
	padding: 10px 18px; display: inline-block; margin-inline: auto;
}
.cal-browsing { display: block; max-width: 520px; }
.cal-browsing a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cal-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }

.cal-sheet { background: #fff; border: 2px solid #111; color: #111; }
.cal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 18px 10px; }
.cal-title { font-family: var(--ff-head); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); color: #111; margin: 0; }
.cal-minis { display: flex; gap: 14px; }
.cal-mini { display: block; text-decoration: none; border-radius: 8px; padding: 2px; transition: background .2s ease, transform .2s ease; }
a.cal-mini:hover, a.cal-mini:focus-visible { background: rgba(242,169,0,.14); transform: translateY(-2px); }
a.cal-mini:hover caption { background: var(--accent); color: #2c2206; }
.cal-mini table { border-collapse: collapse; }
.cal-mini caption { font-family: var(--ff-head); font-weight: 700; font-size: .62rem; background: #ddd; padding: 2px 0; }
.cal-mini th, .cal-mini td { width: 15px; height: 13px; text-align: center; font-size: .58rem; color: #333; padding: 0; }
.cal-mini th { font-weight: 700; }

.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
	background: #2b2720; color: #fff; font-family: var(--ff-head); font-weight: 600;
	font-size: .82rem; padding: 7px 4px; border: 1px solid #111;
}
.cal-dow--short { display: none; }
.cal-grid td { border: 1px solid #111; height: 96px; vertical-align: top; padding: 4px 6px 6px; }
.cal-daynum { font-family: var(--ff-head); font-weight: 700; font-size: .9rem; color: #111; }
.cal-out { background: #f4f4f2; }
.cal-out .cal-daynum { color: #aaa; }
.cal-deliver { text-align: center; margin-top: 12px; font-size: .78rem; line-height: 1.2; }
.cal-deliver .lbl { display: block; color: #333; }
.cal-deliver .date { display: block; font-weight: 700; margin-top: 10px; color: #111; }
.cal-closed { text-align: center; margin-top: 16px; font-family: var(--ff-head); font-weight: 700; font-size: .78rem; color: #b00020; letter-spacing: .04em; }
.cal-holiday { text-align: center; margin-top: 10px; font-family: var(--ff-head); font-weight: 700; font-size: .76rem; color: var(--teal-600); }
.cal-holiday-day { background: rgba(242, 169, 0, .16); }

.cal-foot { border-top: 2px solid #111; padding: 12px 18px 14px; }
.cal-notes { list-style: none; margin: 0 0 8px; padding: 0; }
.cal-notes li { font-size: .74rem; color: #222; line-height: 1.5; }
/* Month box: the sheet's title sits beside the month name */
.cal-headline {
	font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600);
	margin: 0; align-self: center;
}
/* Footer: the logo replaces the old company text line */
.cal-foot-brand { display: flex; align-items: center; gap: 14px; margin: 8px 0 0; }
.cal-foot-logo { height: 62px; width: auto; display: block; }
.cal-foot-title { font-family: var(--ff-head); font-weight: 800; font-size: 1.05rem; color: var(--teal-600); }

@media (max-width: 760px) {
	.cal-grid td { height: 76px; }
	.cal-deliver { font-size: .66rem; }
	.cal-minis { display: none; }
}

@media (max-width: 620px) {
	/* A phone gives each column ~50px, so the full day names and 4-digit years
	   collide. Show the short forms and let the grid breathe. */
	.cal-grid th { font-size: .6rem; padding: 6px 1px; letter-spacing: 0; }
	.cal-dow { display: none; }
	.cal-dow--short { display: inline; }
	.cal-grid td { height: 58px; padding: 3px 2px 4px; }
	.cal-daynum { font-size: .72rem; }
	.cal-deliver { margin-top: 4px; }
	.cal-deliver .lbl { display: none; }
	.cal-deliver .date { margin-top: 0; font-size: .66rem; }
	.cal-yr { display: none; }
	.cal-todaytag { float: none; display: block; font-size: .46rem; padding: 1px 3px; margin-top: 2px; }
	.cal-holiday { font-size: .6rem; margin-top: 2px; }
	.cal-holiday__name { display: none; }
	.cal-holiday__icon { font-size: 1.05rem; }
	.cal-closed { font-size: .52rem; margin-top: 6px; letter-spacing: 0; }
	.cal-title { font-size: 1.5rem; }
	.cal-headline { font-size: .68rem; letter-spacing: .1em; }
	.cal-head { padding: 10px 10px 8px; }
	.cal-foot { padding: 10px 12px 12px; }
	.cal-notes li { font-size: .66rem; }
	.cal-foot-logo { height: 38px; }
	.cal-foot-title { font-size: .8rem; }
}

/* ---- Print: one landscape sheet, calendar only ---- */
@media print {
	/* NOTE: @page is global, so the calendar's landscape orientation is enqueued
	   only on the calendar page (see orca_assets) — otherwise it would flip the
	   prescription sheet to landscape too and push it onto a second page. */
	.topbar, .site-header, .site-footer, .back-to-top, .call-fab, .page-hero, .cal-actions, .no-print { display: none !important; }
	body { background: #fff; }
	.cal-page { max-width: none; padding: 0 !important; margin: 0 !important; }
	.section { padding: 0 !important; }
	/* shorter rows pay for the logo lockup, so the sheet stays on one page */
	.cal-grid td { height: 74px !important; }
	.cal-sheet { border-color: #000; }
	.cal-foot-logo { height: 62px; }
	.cal-headline { font-size: .95rem; }
	.cal-foot-brand { gap: 12px; margin-top: 6px; }
	/* the phone's short forms must never reach the printed sheet */
	.cal-dow { display: inline !important; }
	.cal-dow--short { display: none !important; }
	.cal-deliver .lbl { display: block !important; }
	.cal-yr { display: inline !important; }
	.cal-holiday__name { display: inline !important; }
	/* Force the colour design (dark header, gold "today") to print automatically,
	   without needing the browser's "Background graphics" checkbox. */
	html, body, .cal-sheet, .cal-grid, .cal-grid th, .cal-grid td,
	.cal-today, .cal-out, .cal-holiday-day, .cal-todaytag, .cal-holiday, .cal-closed,
	.cal-headline, .cal-foot-logo, .cal-foot-title {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}
}

/* ---- Calendar: today highlight + hidden staff editor ---- */
.cal-today { background: var(--accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cal-today .cal-daynum,
.cal-today .cal-deliver .lbl,
.cal-today .cal-deliver .date,
.cal-today .cal-closed,
.cal-today .cal-holiday { color: #2c2206 !important; }
.cal-todaytag {
	float: right; font-family: var(--ff-head); font-weight: 700; font-size: .6rem;
	letter-spacing: .08em; text-transform: uppercase; color: #2c2206;
	background: rgba(255,255,255,.55); border-radius: 999px; padding: 1px 7px;
}
.cal-foot { position: relative; }
.cal-edit-toggle {
	position: absolute; right: 8px; bottom: 8px;
	border: 0; background: transparent; color: var(--muted);
	font-family: var(--ff-head); font-weight: 600; font-size: .7rem;
	letter-spacing: .03em; padding: 4px 6px; line-height: 1;
	cursor: pointer; opacity: .08;
	transition: opacity .25s ease, color .2s ease;
}
.cal-edit-toggle:hover,
.cal-edit-toggle:focus-visible { opacity: 1; color: var(--teal-600); }

.cal-editor {
	display: none;
	margin-top: 22px; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow); padding: 26px;
}
.cal-editor.is-open { display: block; }
.cal-editor h3 { margin: 0 0 16px; font-size: 1.2rem; }
.cal-editor h3 span { font-weight: 500; color: var(--muted); font-size: .85rem; }
.cal-edit-msg { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-weight: 500; }
.cal-edit-msg.ok { background: #eaf7ec; border: 1px solid #b7e0bd; color: #1d6b2b; }
.cal-edit-msg.err { background: #fdeceb; border: 1px solid #f3c2bf; color: #9a2820; }
.cal-edit-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.cal-editor label { display: flex; flex-direction: column; gap: 6px; font-family: var(--ff-head); font-weight: 600; font-size: .85rem; color: var(--ink); }
.cal-edit-row label { flex: 1 1 150px; }
.cal-edit-block { margin-bottom: 16px; }
.cal-editor small { font-weight: 400; color: var(--muted); }
.cal-editor input, .cal-editor select, .cal-editor textarea {
	font: inherit; font-size: .95rem; padding: 10px 12px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--ink);
}
.cal-editor textarea { resize: vertical; }
.cal-editor input:focus, .cal-editor select:focus, .cal-editor textarea:focus {
	outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(242,169,0,.18);
}
.cal-edit-save { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.cal-edit-sum { flex-direction: row; align-items: center; gap: 10px; }
.cal-edit-sum input { width: 90px; }

/* ---- Calendar editor CAPTCHA ---- */
.cal-captcha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-captcha__img { border: 1px solid var(--line); border-radius: 8px; display: block; }
.cal-captcha__text {
	font-family: var(--ff-head); font-weight: 700; letter-spacing: .3em; font-size: 1.3rem;
	background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--ink);
}
.cal-captcha .cal-edit-sum input { width: 130px; text-transform: uppercase; letter-spacing: .15em; }

/* =========================================================
   Client Portal — case tracker
   ========================================================= */
.portal { max-width: 880px; }
.portal__lookup, .portal__result {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.portal__lookup { padding: 30px; margin-bottom: 26px; }
.portal__fields { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.portal .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; }
.portal .field span { font-family: var(--ff-head); font-weight: 600; font-size: .85rem; color: var(--ink); }
.portal input {
	padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
	font: inherit; font-size: .95rem; background: var(--bg-soft); color: var(--ink);
}
.portal input:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(242,169,0,.18); }
.portal__hint { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }

.portal__notice { border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-weight: 500; }
.portal__notice--err { background: #fdeceb; border: 1px solid #f3c2bf; color: #9a2820; }

.portal__result { padding: 32px; }
.portal__case-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.portal__case-label { font-family: var(--ff-head); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-600); }
.portal__case-num { margin: 2px 0 0; font-size: 1.55rem; }
.portal__badge { background: var(--accent); color: #2c2206; font-family: var(--ff-head); font-weight: 700; font-size: .85rem; padding: 8px 16px; border-radius: 999px; }
.portal__meta { display: flex; gap: 32px; flex-wrap: wrap; margin: 0 0 30px; padding: 0; }
.portal__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.portal__meta dd { margin: 3px 0 0; font-family: var(--ff-head); font-weight: 600; color: var(--ink); }

/* Stepper */
.stepper { position: relative; margin: 14px 0 6px; }
.stepper__line { position: absolute; left: 25px; right: 25px; top: 25px; height: 4px; background: var(--line); border-radius: 2px; }
.stepper__line-fill { display: block; height: 100%; width: var(--progress, 0%); background: var(--accent); border-radius: 2px; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.stepper__list { list-style: none; display: flex; justify-content: space-between; margin: 0; padding: 0; position: relative; }
.stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; }
.stepper__dot {
	width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 3px solid var(--line); font-size: 1.2rem; color: var(--muted); z-index: 1;
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.stepper__label { font-family: var(--ff-head); font-weight: 600; font-size: .82rem; color: var(--muted); max-width: 110px; line-height: 1.3; }
.is-done .stepper__dot { background: var(--accent); border-color: var(--accent); color: #2c2206; }
.is-done .stepper__label { color: var(--ink); }
.is-current .stepper__dot { border-color: var(--accent); color: var(--teal-600); box-shadow: 0 0 0 5px rgba(242,169,0,.22); animation: orcaPulse 1.9s ease-in-out infinite; }
.is-current .stepper__label { color: var(--navy); font-weight: 700; }
@keyframes orcaPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(242,169,0,.22); } 50% { box-shadow: 0 0 0 10px rgba(242,169,0,.08); } }
@media (prefers-reduced-motion: reduce) { .is-current .stepper__dot { animation: none; } }

.portal__note { margin-top: 26px; background: var(--bg-tint); border-radius: 12px; padding: 14px 18px; font-size: .95rem; color: var(--ink); }

@media (max-width: 620px) {
	.stepper__line { left: 25px; right: auto; top: 25px; bottom: 25px; width: 4px; height: auto; }
	.stepper__line-fill { width: 100%; height: var(--progress, 0%); }
	.stepper__list { flex-direction: column; gap: 22px; }
	.stepper__step { flex-direction: row; text-align: left; gap: 16px; }
	.stepper__label { max-width: none; }
}

/* ---- Portal: status history timeline + staff editor trigger ---- */
.portal__history { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.portal__history-title { font-size: 1.05rem; margin: 0 0 14px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.timeline__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgba(242,169,0,.15); }
.timeline__stage { font-family: var(--ff-head); font-weight: 600; color: var(--ink); }
.timeline__date { color: var(--muted); font-size: .88rem; margin-left: auto; white-space: nowrap; }

.portal__staff { position: relative; height: 34px; margin-top: 22px; }
/* The portal Staff button is a bit more visible than the calendar's (discreet pill) */
.portal__staff .cal-edit-toggle {
	opacity: .65;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft);
	padding: 6px 14px;
	color: var(--muted);
}
.portal__staff .cal-edit-toggle:hover { opacity: 1; color: var(--teal-600); background: var(--bg-tint); }
.portal-editor { max-width: 100%; }
.portal__staff-tip { font-size: .85rem; color: var(--muted); margin: 4px 0 6px; }

/* ---- Portal staff: sent-cases list ---- */
.portal-unlock { max-width: 320px; }
.portal-listform { margin-top: 16px; }
.staff-list { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.staff-list__title { font-size: 1.05rem; margin: 0 0 14px; }
.staff-case { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--bg-soft); }
.staff-case__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-case__num { font-family: var(--ff-head); font-weight: 700; color: var(--ink); }
.staff-case__meta { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.timeline--mini { margin-top: 10px; }
.timeline--mini .timeline__item { padding: 4px 0; }
.timeline--mini .timeline__stage { font-size: .9rem; }
.timeline--mini .timeline__date { font-size: .82rem; }

/* ---- Portal: job label (QR + barcode) ---- */
.portal-label { margin: 18px 0 24px; text-align: center; }
.portal-label__sheet {
	display: inline-block; background: #fff; border: 2px dashed var(--line);
	border-radius: 14px; padding: 18px 26px; min-width: 240px;
}
.portal-label__name { font-family: var(--ff-head); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.portal-label__num { font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; color: var(--navy); margin: 4px 0 12px; }
.portal-label__codes { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.portal-label__qr { display: flex; justify-content: center; }
.portal-label__qr img, .portal-label__qr canvas { display: block; }
.portal-label__bc { max-width: 240px; }
.portal-label__access { margin-top: 12px; font-size: .9rem; color: var(--ink); letter-spacing: .04em; }
.portal-label .btn { margin-top: 16px; }

/* ---- Per-case label button in the staff list ---- */
.staff-case__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-case__label {
	font-family: var(--ff-head); font-weight: 600; font-size: .78rem;
	border: 1px solid var(--line); background: #fff; color: var(--teal-600);
	border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.staff-case__label:hover { background: var(--accent); color: #2c2206; border-color: var(--accent); }

/* ---- Quick one-click status buttons ---- */
.staff-list__title small { font-weight: 400; color: var(--muted); }
.staff-stage { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.staff-stage__btn {
	font-family: var(--ff-head); font-weight: 600; font-size: .82rem;
	border: 1px solid var(--line); background: #fff; color: var(--ink);
	border-radius: 999px; padding: 8px 15px; cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.staff-stage__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--teal-600); transform: translateY(-1px); }
.staff-stage__btn.is-current { background: var(--accent); border-color: var(--accent); color: #2c2206; cursor: default; opacity: 1; }

/* ---- Prescription form CAPTCHA ---- */
.rx-captcha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; }
.rx-captcha__img { border: 1px solid var(--line); border-radius: 8px; display: block; }
.rx-captcha__text { font-family: var(--ff-head); font-weight: 700; letter-spacing: .3em; font-size: 1.3rem; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--ink); }
.rx-captcha .field { flex: 1 1 180px; }
.rx-captcha .field input { text-transform: uppercase; letter-spacing: .12em; }

/* ---- Case archive / restore ---- */
.staff-archive { margin: 6px 0 0; display: flex; justify-content: flex-end; }
.staff-case__actions .staff-archive { display: inline; margin: 0; }
.staff-case__archive, .staff-case__restore {
	font-family: var(--ff-head); font-weight: 600; font-size: .75rem;
	border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.staff-case__archive { color: var(--muted); }
.staff-case__archive:hover { border-color: #d63638; color: #d63638; }
.staff-case__restore { color: var(--teal-600); }
.staff-case__restore:hover { background: var(--accent); color: #2c2206; border-color: var(--accent); }
.staff-case--archived { opacity: .9; }

/* ---- Portal: dynamic background (same as About) ---- */
.portal-bg {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #fff3d6 0%, var(--bg-soft) 40%, #ffe9bd 70%, var(--bg-soft) 100%);
	background-size: 280% 280%;
	animation: growShift 7s ease-in-out infinite;
}
.portal-bg::before {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(38% 38% at 18% 28%, rgba(242,169,0,.30), transparent 68%),
		radial-gradient(32% 32% at 82% 18%, rgba(242,169,0,.22), transparent 68%),
		radial-gradient(42% 42% at 72% 82%, rgba(57,51,42,.12), transparent 70%);
	animation: growBlobs 7s ease-in-out infinite alternate;
}
.portal-bg::after {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(30% 30% at 40% 70%, rgba(248,201,99,.28), transparent 70%),
		radial-gradient(28% 28% at 90% 60%, rgba(242,169,0,.18), transparent 70%);
	animation: growBlobs2 7s ease-in-out infinite alternate;
}
.portal-bg > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.portal-bg, .portal-bg::before, .portal-bg::after { animation: none; }
}

/* ---- Saved-case actions (print slip / barcode) ---- */
.portal-label__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---- Print-by-case box + per-case print group ---- */
.portal-printbox { margin: 4px 0 18px; }
.portal-printbox__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.portal-printbox__row input { flex: 1 1 200px; }
.staff-case__print { display: inline-flex; gap: 6px; align-items: center; }

/* =========================================================
   Gallery tabs + front-end upload page
   ========================================================= */
.gtabs__nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.gtabs__btn {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid var(--line); border-radius: 999px; background: #fff;
	padding: 10px 22px; cursor: pointer;
	font-family: var(--ff-head); font-weight: 600; font-size: 1rem; color: var(--ink);
	transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gtabs__btn:hover { border-color: var(--teal); }
.gtabs__btn.is-active {
	background: var(--navy); border-color: var(--navy); color: #fff;
	box-shadow: 0 12px 26px -12px rgba(0,0,0,.5);
}
.gtabs__count {
	display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
	border-radius: 999px; background: var(--bg-tint); color: var(--muted);
	font-size: .74rem; font-weight: 700;
}
.gtabs__btn.is-active .gtabs__count { background: var(--accent); color: #2c2206; }
.gtabs__panel[hidden] { display: none; }

/* the upload page */
.upload-page { max-width: 720px; }
.upload-box {
	background: #fff; border: 1px solid var(--line); border-radius: 18px;
	padding: 30px 32px; box-shadow: var(--shadow);
}
.upload-box__lead { margin: 0 0 22px; color: var(--body); line-height: 1.65; }
.upload-form__group { border: 0; padding: 0; margin: 0 0 20px; }
.upload-form__group legend {
	font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 10px; padding: 0;
}
.upload-form__choices { display: flex; gap: 12px; flex-wrap: wrap; }
.upload-choice {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
	border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px;
	font-weight: 500; transition: border-color .2s ease, background .2s ease;
}
.upload-choice:hover { border-color: var(--teal); }
.upload-choice input { accent-color: var(--teal); width: 17px; height: 17px; }
.upload-choice:has(input:checked) { border-color: var(--teal); background: rgba(242,169,0,.08); }
.upload-form .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.upload-form .field > span { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--ink); }
.upload-form .field small { font-weight: 400; color: var(--muted); }
.upload-form input[type="file"],
.upload-form input[type="password"] {
	border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 1rem; width: 100%;
}
.upload-form input[type="file"] { background: var(--bg-tint); cursor: pointer; }
.upload-form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(242,169,0,.18); }
.upload-form__note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.55; text-align: center; }
.upload-box + .upload-box { margin-top: 22px; }
.upload-box__title {
	display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
	font-family: var(--ff-head); font-weight: 700; font-size: 1.25rem; color: var(--ink);
}
.upload-box__count {
	display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px;
	border-radius: 999px; background: var(--bg-tint); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.upload-box--lock { max-width: 460px; margin-inline: auto; }
.upload-lock { text-align: center; margin-top: 22px; }

/* the tick-to-remove grid */
/* The lab's own photography and films: no drag, no long-press save sheet.
   A deterrent against casual copying, not a lock. */
#portfolio img, .vshow img, .hero__ba img, [data-vbox] video {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
}

/* ---------- Banner slide: send your digital scans ---------- */
.scanslide {
	position: relative; overflow: hidden;
	background: radial-gradient(120% 90% at 78% 30%, #2b2720 0%, var(--navy) 62%);
	color: #fff;
}
/* the scan drawing, bled large behind the type */
.scanslide__mesh {
	position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
	width: 62%; aspect-ratio: 730 / 398; pointer-events: none; opacity: .5;
	background: url("../img/scan-mesh.svg") no-repeat center / contain;
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 34%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 0%, #000 34%, #000 100%);
}
.scanslide__grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 42px; align-items: center;
}
.scanslide__eyebrow {
	display: block; font-family: var(--ff-head); font-size: .78rem; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.scanslide__title {
	font-family: var(--ff-head); font-weight: 800; color: #fff; line-height: 1.04;
	font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.02em; margin: 0 0 14px;
}
.scanslide__lead { color: #d8d0c2; font-size: 1.05rem; line-height: 1.6; margin: 0 0 20px; max-width: 34ch; }

.scanslide__brands { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.scanslide__brands li {
	font-family: var(--ff-head); font-size: .82rem; font-weight: 600; letter-spacing: .02em;
	padding: 7px 14px; border-radius: 999px; color: #f3ead9;
	border: 1px solid rgba(242,169,0,.38); background: rgba(242,169,0,.09);
}
.scanslide__brands li.is-any {
	color: var(--navy); background: var(--accent); border-color: var(--accent); font-weight: 700;
}
.scanslide__stl { color: #b8b0a3; font-size: .93rem; line-height: 1.55; margin: 0 0 22px; max-width: 46ch; }
.scanslide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.scanslide__note { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.scanslide__visual { margin: 0; position: relative; }
.scanslide__visual img { width: 100%; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.scanslide__visual figcaption {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin-top: 10px; font-size: .76rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muted);
}
.scanslide__dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
	box-shadow: 0 0 0 0 rgba(242,169,0,.55); animation: orcaScanPulse 2.4s ease-out infinite;
}
@keyframes orcaScanPulse {
	70%  { box-shadow: 0 0 0 9px rgba(242,169,0,0); }
	100% { box-shadow: 0 0 0 0 rgba(242,169,0,0); }
}

@media (max-width: 900px) {
	/* sin estirar: cada diapositiva conserva su alto natural */
	.hero-carousel { transition: height .25s ease; }
	.hero-carousel__track { align-items: flex-start; }
	.scanslide__grid { grid-template-columns: 1fr; gap: 20px; }
	.scanslide__mesh { display: none; }
	.scanslide__lead, .scanslide__stl { max-width: none; }
	/* el aviso flotante del app se apoya abajo: dejarle sitio para no tapar el boton */
	.scanslide { padding-bottom: 92px; }
	.scanslide__title { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
	.scanslide__lead { font-size: .98rem; margin-bottom: 16px; }
	.scanslide__brands { gap: 6px; margin-bottom: 13px; }
	.scanslide__brands li { font-size: .76rem; padding: 6px 11px; }
	.scanslide__stl { font-size: .88rem; margin-bottom: 18px; }
	.scanslide__visual figcaption { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .scanslide__dot { animation: none; } }

/* variante de la diapositiva: casos de implante */
.scanslide--implant { background: radial-gradient(118% 92% at 24% 36%, #2b2720 0%, var(--navy) 60%); }
.scanslide__grid--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.scanslide__visual--tall img { max-height: 62vh; width: auto; margin: 0 auto; }

.scanslide__points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.scanslide__points li {
	position: relative; padding-left: 20px; color: #d8d0c2; font-size: .96rem;
}
.scanslide__points li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.scanslide__offer {
	border: 1px solid rgba(242,169,0,.4); background: rgba(242,169,0,.08);
	border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; max-width: 46ch;
}
.scanslide__offer-tag {
	display: inline-block; font-family: var(--ff-head); font-size: .76rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
	background: var(--accent); padding: 4px 11px; border-radius: 999px; margin-bottom: 8px;
}
.scanslide__offer p { margin: 0; color: #e3dbcd; font-size: .93rem; line-height: 1.55; }

@media (max-width: 900px) {
	.scanslide__grid--flip { grid-template-columns: 1fr; }
	/* el dibujo va primero y pequeno: el mensaje tiene que leerse sin desplazar */
	.scanslide__visual--tall { order: -1; }
	.scanslide__visual--tall img { max-height: 190px; }
	.scanslide__offer { max-width: none; padding: 12px 14px; margin-bottom: 16px; }
	.scanslide__offer p { font-size: .87rem; }
	.scanslide__points { gap: 5px; margin-bottom: 14px; }
	.scanslide__points li { font-size: .9rem; }
}

/* ---------- Technique videos inside the Portfolio ---------- */
/* A warm sand panel sets the films apart from the photo galleries below, and the
   charcoal cards read far better against it than against the white page. */
.vshow {
	position: relative;
	margin: 0 0 38px;
	padding: 30px clamp(18px, 3vw, 34px) 34px;
	background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg-soft) 55%);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.vshow::before {
	content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
	width: 110px; height: 4px; border-radius: 0 0 4px 4px; background: var(--accent);
}
.vshow__head { text-align: center; margin-bottom: 20px; }
.vshow__eyebrow {
	display: block; font-family: var(--ff-head); font-size: .74rem; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 7px;
}
.vshow__title {
	font-family: var(--ff-head); font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700; color: var(--ink); margin: 0 0 6px;
}
.vshow__lead { color: var(--muted); margin: 0; }
.vshow__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

.vcard {
	display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
	background: var(--navy); border: 1px solid var(--navy); border-radius: var(--radius-lg);
	overflow: hidden; font: inherit; color: #fff;
	box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.vcard:hover, .vcard:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.vcard__shot { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.vcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vcard:hover .vcard__shot img { transform: scale(1.04); }
.vcard__shot::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(33,30,24,0) 45%, rgba(33,30,24,.55) 100%);
}
.vcard__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 66px; height: 66px; border-radius: 50%; z-index: 2;
	background: var(--accent); color: var(--navy);
	display: grid; place-items: center;
	box-shadow: 0 10px 28px -8px rgba(0,0,0,.6);
	transition: transform .25s ease, background .25s ease;
}
.vcard__play svg { width: 30px; height: 30px; margin-left: 3px; }
.vcard:hover .vcard__play { transform: translate(-50%,-50%) scale(1.1); background: var(--teal-300); }

.vcard__body { display: block; padding: 16px 18px 18px; }
.vcard__name { display: block; font-family: var(--ff-head); font-weight: 700; font-size: 1.1rem; color: #fff; }
.vcard__text { display: block; margin-top: 5px; font-size: .92rem; color: #cdc5b6; line-height: 1.5; }
.vcard__meta {
	display: block; margin-top: 10px; font-size: .74rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* The lightbox */
.vbox {
	position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
	padding: 24px; background: rgba(18,16,12,.94);
	opacity: 0; transition: opacity .2s ease;
}
/* This display:grid would otherwise beat the browser's [hidden] rule, leaving an
   invisible full-screen layer that swallows every click on the page. */
.vbox[hidden] { display: none; }
.vbox.is-open { opacity: 1; }
.vbox__inner { margin: 0; width: min(1100px, 100%); }
.vbox__inner video {
	width: 100%; max-height: 78vh; display: block; background: #000;
	border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.vbox__inner figcaption {
	margin-top: 12px; text-align: center; color: #e8e2d6;
	font-family: var(--ff-head); font-weight: 600; font-size: 1.05rem;
}
.vbox__close {
	position: absolute; top: 18px; right: 20px; z-index: 2;
	width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
	font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
}
.vbox__close:hover { background: var(--accent); color: var(--navy); border-color: var(--accent); }

@media (max-width: 600px) {
	.vbox { padding: 12px; }
	.vcard__play { width: 54px; height: 54px; }
	.vcard__play svg { width: 24px; height: 24px; }
}

/* Banner editor: one collapsible panel per slide */
.bn-slide {
	border: 1px solid var(--line); border-radius: 11px;
	background: var(--bg-soft); margin-bottom: 12px; overflow: hidden;
}
.bn-slide__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 14px; cursor: pointer; list-style: none;
	font-family: var(--ff-head); font-weight: 700; color: var(--ink);
}
.bn-slide__head::-webkit-details-marker { display: none; }
.bn-slide__head::after {
	content: "▾"; margin-left: auto; color: var(--muted); font-size: .9rem;
	transition: transform .15s ease;
}
.bn-slide[open] .bn-slide__head::after { transform: rotate(180deg); }
.bn-slide__name { font-size: 1.02rem; }
.bn-slide__state {
	font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px; background: var(--bg-tint); color: #7a5600;
}
.bn-slide__body { padding: 0 14px 14px; background: #fff; border-top: 1px solid var(--line); padding-top: 13px; }
.bn-slide__top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
	padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.bn-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); cursor: pointer; }
.bn-toggle input { width: 18px; height: 18px; accent-color: var(--teal-600); }
.bn-pos { margin-bottom: 0 !important; width: 92px; }

/* Banner editor: replacing a slide's photograph */
.bn-pics__title {
	margin: 16px 0 9px; padding-top: 13px; border-top: 1px solid var(--line);
	font-size: .96rem; color: var(--ink);
}
.bn-pics { display: grid; gap: 12px; }
.bn-pic {
	display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start;
	border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--bg-soft);
}
.bn-pic > img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: 8px; border: 1px solid var(--line); background: #fff; display: block;
}
.bn-pic__side { display: flex; flex-direction: column; gap: 7px; }
.bn-pic__name { font-family: var(--ff-head); font-weight: 700; color: var(--ink); }
.bn-pic__state {
	align-self: flex-start; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
	background: #eee9dd; color: var(--muted);
}
.bn-pic__state.is-custom { background: var(--bg-tint); color: #7a5600; }
.bn-pic__file { margin-bottom: 0 !important; }
.bn-pic__reset { font-size: .88rem; font-weight: 500; color: var(--body); }
.bn-pic__hint { font-size: .78rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 620px) {
	.bn-pic { grid-template-columns: 1fr; }
	.bn-pic > img { max-width: 260px; }
}

/* Staff can always pull the original file down — the deterrents on the public
   pages deliberately do not apply here. */
.photo-grid__dl {
	position: absolute; left: 4px; bottom: 4px; z-index: 3;
	width: 24px; height: 24px; border-radius: 7px;
	display: grid; place-items: center;
	background: rgba(33,30,24,.72); color: #fff;
	font-size: .95rem; line-height: 1; text-decoration: none;
	opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.photo-grid__item:hover .photo-grid__dl,
.photo-grid__dl:focus { opacity: 1; }
.photo-grid__dl:hover { background: var(--accent); color: var(--navy); }

/* Picking photos to move or delete */
.pick-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}
.pick-bar__count { font-size: .9rem; color: var(--muted); }
.pick-bar__btns { display: flex; gap: 8px; }
.pick-bar__link {
	background: none; border: 1px solid var(--line); border-radius: 999px;
	padding: 5px 14px; font: inherit; font-size: .84rem; font-weight: 600;
	color: var(--teal-600); cursor: pointer;
}
.pick-bar__link:hover { background: var(--bg-tint); border-color: var(--teal-300); }

.pick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pick-actions .btn { flex: 1 1 220px; justify-content: center; }
.pick-actions .btn[disabled] { opacity: .45; pointer-events: none; }

/* Deleting erases the file from the server — it should not look like the safe option. */
.btn--danger {
	background: #fff; color: #a8341f; border: 1px solid #e6b3a6;
}
.btn--danger:hover { background: #a8341f; color: #fff; border-color: #a8341f; transform: translateY(-2px); }

@media (max-width: 560px) {
	.pick-actions .btn { flex: 1 1 100%; }
}

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 18px; }
.photo-grid__item { position: relative; cursor: pointer; display: block; }
.photo-grid__item img {
	width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
	border-radius: 10px; border: 2px solid transparent; transition: border-color .2s ease, opacity .2s ease;
}
.photo-grid__item input { position: absolute; opacity: 0; pointer-events: none; }
.photo-grid__tick {
	position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1rem; line-height: 1;
	background: rgba(255,255,255,.9); color: var(--muted); box-shadow: 0 2px 6px rgba(0,0,0,.25);
	transition: background .2s ease, color .2s ease;
}
.photo-grid__item:has(input:checked) img { border-color: #b00020; opacity: .55; }
.photo-grid__item:has(input:checked) .photo-grid__tick { background: #b00020; color: #fff; }
.photo-grid__item input:focus-visible ~ .photo-grid__tick { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 620px) {
	.upload-box { padding: 22px 18px; }
	.gtabs__btn { font-size: .92rem; padding: 9px 16px; }
}

/* =========================================================
   Staff area — three clearly separated jobs
   ========================================================= */
.staff-page { max-width: 860px; }
.staff-warn {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
	background: #fdf6e6; border: 1px solid #e8d6a8; border-radius: 12px;
	padding: 14px 18px; margin-bottom: 22px;
	font-size: .92rem; line-height: 1.55; color: #7a5c12;
}
.staff-warn strong { font-family: var(--ff-head); font-weight: 700; color: #6b4f0c; }
.staff-warn em { font-style: normal; font-weight: 600; }
.staff-jump { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.staff-jump a {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
	font-family: var(--ff-head); font-weight: 600; font-size: .93rem; color: var(--ink);
	background: #fff; transition: border-color .2s ease, color .2s ease;
}
.staff-jump a:hover { border-color: var(--teal); color: var(--teal-600); }
.staff-jump span {
	display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
	background: var(--accent); color: #2c2206; font-size: .78rem; font-weight: 800;
}

.staff-block { margin-bottom: 46px; scroll-margin-top: 120px; }
.staff-block__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.staff-block__num {
	flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--navy); color: var(--accent); font-family: var(--ff-head); font-weight: 800; font-size: 1.05rem;
}
.staff-block__head h2 { margin: 0 0 3px; font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.staff-block__head p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }

.staff-card {
	background: #fff; border: 1px solid var(--line); border-radius: 16px;
	padding: 24px 26px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.staff-card__title {
	display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
	font-family: var(--ff-head); font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.staff-card__empty { margin: 0; color: var(--muted); font-size: .93rem; }
.staff-card__hint { margin: 12px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.staff-form select {
	border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: .97rem;
	width: 100%; font-family: inherit; background: #fff;
}
.staff-form input[type="number"] {
	border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: .97rem;
	width: 100%; font-family: inherit;
}
.staff-form .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.staff-form .field > span { font-family: var(--ff-head); font-weight: 600; font-size: .88rem; color: var(--ink); }
.staff-form .field small { font-weight: 400; color: var(--muted); }
.staff-form input[type="text"], .staff-form textarea {
	border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: .97rem; width: 100%;
	font-family: inherit; line-height: 1.5;
}
.staff-form input:focus, .staff-form textarea:focus {
	outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(242,169,0,.18);
}
.staff-form__row { display: flex; gap: 14px; flex-wrap: wrap; }
.staff-form__row .field { flex: 1 1 180px; }
.staff-form .field--grow { flex: 2 1 240px; }

.svc-row {
	display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;
	padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint);
}
.svc-row__n {
	flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 26px;
	border-radius: 50%; background: #fff; border: 1px solid var(--line);
	font-size: .76rem; font-weight: 700; color: var(--muted);
}
.svc-row__icon { flex: 0 0 74px; }
.news-row__tag { flex: 0 0 190px; }
.news-row__addr {
	flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
	font-size: .86rem; color: var(--muted); cursor: pointer;
}
.news-row__addr input { width: 17px; height: 17px; accent-color: var(--teal-600); flex: none; }
.news-row__addr small { display: block; opacity: .75; }
.svc-row__text { flex: 1 1 100%; }
.svc-row .field { margin-bottom: 0; }

@media (max-width: 620px) {
	.staff-card { padding: 18px 16px; }
	.staff-block__head h2 { font-size: 1.25rem; }
	.svc-row { padding: 12px; }
	.svc-row__n { display: none; }
	.svc-row__icon { flex: 0 0 64px; }
}

/* =========================================================
   App promo flyer — dark, premium, with the dock graphic
   ========================================================= */
.appflyer {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, #211e18 0%, #2b2720 55%, #342f24 100%);
	color: #d8cbb4;
}
.appflyer::before {
	content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(34% 34% at 18% 22%, rgba(242,169,0,.28), transparent 66%),
		radial-gradient(30% 30% at 86% 30%, rgba(242,169,0,.18), transparent 66%),
		radial-gradient(32% 32% at 62% 88%, rgba(248,201,99,.16), transparent 70%);
	animation: growBlobs 9s ease-in-out infinite alternate;
}
.appflyer > .container { position: relative; z-index: 1; }
.appflyer__grid {
	display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 60px; align-items: center;
}

/* --- the phone: whole screen dimmed and blurred, ORCA icon lit --- */
.appflyer__phone {
	position: relative; margin: 0 auto; width: min(300px, 78%);
	/* only the top of the home screen: enough to place the icon, short enough
	   to sit in a banner without towering over the copy */
	aspect-ratio: 9 / 11; 
	border-radius: 46px; overflow: hidden;
	border: 11px solid #12141a; background: #0b0d12;
	box-shadow: 0 40px 90px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
}
.appflyer__screen {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: top center;
	filter: blur(3px) brightness(.5) saturate(.75);
	transform: scale(1.04); /* hides the blur's soft edge */
}
/* a spotlight over the ORCA icon; everything else falls into shadow */
.appflyer__spot {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle 128px at 17% 20%,
		rgba(0,0,0,0) 0 62px,
		rgba(8,10,14,.55) 96px,
		rgba(8,10,14,.82) 100%);
}
/* the icon itself, sharp, sitting exactly where it lives on the home screen */
.appflyer__pin {
	position: absolute; left: 16.6%; top: 19.5%; transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	width: 19%;
}
.appflyer__pin img {
	width: 100%; height: auto; display: block; border-radius: 23%;
	box-shadow: 0 0 0 2px rgba(242,169,0,.85), 0 0 34px 6px rgba(242,169,0,.45), 0 12px 24px -8px rgba(0,0,0,.7);
}
.appflyer__pin em {
	font-style: normal; font-size: .62rem; font-weight: 500; color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; letter-spacing: .01em;
}
.appflyer__caption {
	margin: 20px 0 0; text-align: center; font-size: .9rem; color: #9c9182; line-height: 1.5;
}

/* --- the copy --- */
.appflyer__eyebrow {
	display: inline-block; font-family: var(--ff-head); font-weight: 600;
	font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
	color: #f8cf63; margin-bottom: 14px;
}
.appflyer__title {
	font-family: var(--ff-head); font-weight: 800; color: #fff; margin: 0 0 16px;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12;
}
.appflyer__lead { margin: 0 0 26px; font-size: 1.05rem; line-height: 1.65; color: #cbbfad; }
.appflyer__list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.appflyer__list li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.6; font-size: .98rem; }
.appflyer__list svg { flex: 0 0 auto; margin-top: 3px; color: var(--teal); }
.appflyer__list strong { color: #fff; font-weight: 600; }
.appflyer__install { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appflyer__step {
	border: 1px solid rgba(242,169,0,.35); border-radius: 14px; padding: 14px 16px;
	font-size: .9rem; line-height: 1.55; background: rgba(0,0,0,.18);
}
.appflyer__stepname {
	display: block; font-family: var(--ff-head); font-weight: 700; font-size: .78rem;
	letter-spacing: .12em; text-transform: uppercase; color: #f8cf63; margin-bottom: 6px;
}
.appflyer__step strong { color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .appflyer::before { animation: none; } }
@media (max-width: 900px) {
	.appflyer__grid { grid-template-columns: 1fr; gap: 38px; }
	.appflyer__visual { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 620px) {
	.appflyer__install { grid-template-columns: 1fr; }
	.appflyer__tile { width: 44px; height: 44px; border-radius: 12px; }
	.appflyer__tile--orca { width: 60px; height: 60px; border-radius: 15px; }
	.appflyer__bar { gap: 9px; padding: 12px; }
	.appflyer__dock { padding: 34px 12px 14px; }
}

/* =========================================================
   Contact map — click anywhere to open the route
   ========================================================= */
.contact-map {
	position: relative; margin-top: 46px; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg-tint);
}
.contact-map__frame { display: block; width: 100%; height: 400px; border: 0; filter: saturate(.92); }
/* the link sits on top of the iframe, so any click opens directions */
.contact-map__link { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; }
.contact-map__pin {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%);
	width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
	border: 3px solid #fff; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
	transition: transform .25s ease;
}
.contact-map__pin img { width: 100%; height: 100%; display: block; object-fit: cover; }
.contact-map:hover .contact-map__pin { transform: translate(-50%, -70%); }
.contact-map__bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; padding: 16px 20px;
	background: linear-gradient(180deg, rgba(33, 30, 24, 0), rgba(33, 30, 24, .92) 55%);
}
.contact-map__addr {
	color: #f4ecdd; font-family: var(--ff-head); font-weight: 600; font-size: 1rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	min-width: 0; max-width: 100%; /* let a long address wrap instead of pushing past the edge */
}
.contact-map__cta {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--accent); color: #2c2206; border-radius: 999px;
	padding: 10px 22px; font-family: var(--ff-head); font-weight: 700; font-size: .95rem;
	box-shadow: 0 10px 24px -10px rgba(242, 169, 0, .7);
	transition: background .25s ease, transform .25s ease;
}
.contact-map__cta::after { content: "\2192"; font-size: 1.05rem; line-height: 1; }
.contact-map:hover .contact-map__cta { background: var(--teal-300); transform: translateY(-2px); }
@media (max-width: 620px) {
	.contact-map { margin-top: 32px; }
	.contact-map__frame { height: 280px; }
	.contact-map__bar { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 16px; }
	.contact-map__addr { font-size: .85rem; line-height: 1.4; }
	.contact-map__pin { width: 52px; height: 52px; }
}

/* =========================================================
   "Get the ORCA app" install helper (phones only)
   ========================================================= */
.a2hs-btn {
	position: fixed; left: 50%; bottom: 18px; z-index: 900;
	transform: translate(-50%, 140%);
	display: flex; align-items: center; gap: 8px;
	border: 0; border-radius: 999px; padding: 12px 18px 12px 16px;
	background: var(--navy); color: #f4ecdd;
	font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55), 0 0 0 1.5px var(--teal);
	cursor: pointer; transition: transform .35s ease;
}
.a2hs-btn.is-in { transform: translate(-50%, 0); }
.a2hs-btn__ico { font-size: 1.15rem; }
.a2hs-btn__x {
	margin-left: 6px; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #d8cbb4;
	font-size: 1rem; line-height: 1;
}
.a2hs-overlay {
	position: fixed; inset: 0; z-index: 950; display: none;
	align-items: flex-end; justify-content: center;
	background: rgba(15, 13, 10, .6); backdrop-filter: blur(3px);
	padding: 18px;
}
.a2hs-overlay.is-open { display: flex; }
.a2hs-card {
	position: relative; width: min(430px, 100%);
	background: #fff; color: var(--ink);
	border-radius: 20px; padding: 26px 24px 22px;
	box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .6);
	text-align: center;
	animation: a2hsUp .3s ease;
	margin-bottom: 8px;
}
@keyframes a2hsUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.a2hs-card__close {
	position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
	font-size: 1.5rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 4px;
}
.a2hs-card__logo { width: 74px; height: 74px; border-radius: 17px; margin: 0 auto 10px; display: block;
	box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .45); }
.a2hs-card__title { font-family: var(--ff-head); font-weight: 800; font-size: 1.3rem; margin: 0 0 14px; color: var(--navy); }
.a2hs-steps { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; }
.a2hs-steps li {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 11px 12px; border: 1px solid var(--line, #ece6da); border-radius: 12px;
	margin-bottom: 8px; font-size: .95rem; line-height: 1.45;
}
.a2hs-steps svg { vertical-align: -4px; color: #0b78e3; }
.a2hs-step__num {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--teal); color: #2c2206; font-weight: 700; font-size: .85rem;
}
.a2hs-plus { display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #999; font-size: .95rem; color: #444; }
.a2hs-card__note { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
@media (min-width: 900px) { .a2hs-btn, .a2hs-overlay { display: none !important; } }