/**
 * Implant and Crown Melbourne — site styles.
 *
 * Ported from the Claude Design project "Website redesign project", where every
 * rule lived as an inline style attribute. Tokens below are the literal values
 * used across those files; component classes group the repeated patterns.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--bg: #f7fafa;
	--surface: #ffffff;
	--ink: #17292d;
	--brand: #1d3c41;
	--brand-dark: #122a2e;
	--muted: #54666a;
	--muted-soft: #8a968f;
	--muted-alt: #84928f;
	--nav-ink: #3c4b4f;
	--line: #dde5e3;
	--line-soft: #e7edeb;
	--field-line: #c7d3d1;
	--tint: #e8efee;
	--tint-line: #c2d3d0;
	--step-num: #4f7a70;
	--hero-top: #e9f0ef;

	/* Footer / dark band */
	--dark: #17292d;
	--dark-text: #cfd8d3;
	--dark-body: #93a7a9;
	--dark-label: #7d9194;
	--dark-link: #e8efec;

	/* Sage accent used for eyebrows and stat labels on the dark bands */
	--accent: #8fb5ab;
	--on-dark: #c3d2cf;

	/* Image placeholders */
	--ph-a: #e2eae8;
	--ph-b: #d8e2e0;
	--ph-line: #d5dfdd;
	--ph-ink: #6e8480;

	--radius: 8px;
	--radius-sm: 6px;
	--font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/*
	 * Horizontal page gutter. Every full-width container reads this so the
	 * inset stays identical between the sections, the header and the footer.
	 * Fluid rather than fixed: 24px is the floor a phone needs to stop reading
	 * as text-on-the-bezel, and it opens up to 48px through the tablet range,
	 * where the container has not yet hit its max-width and the gutter is the
	 * only thing holding content off the edge.
	 */
	--gutter: clamp(24px, 4vw, 48px);
}

/* ------------------------------------------------------------------ base -- */

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--brand);
}

a:hover {
	color: var(--brand-dark);
}

img {
	max-width: 100%;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--radius-sm) 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	z-index: 200;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- layout --- */

.wrap {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.wrap--header  { max-width: 1440px; }
.wrap--900     { max-width: 900px; }
.wrap--narrow  { max-width: 860px; }
.wrap--faq     { max-width: 820px; }
.wrap--prose   { max-width: 800px; }
.wrap--form    { max-width: 720px; }

/*
 * padding-block, NOT `padding: X 0`.
 *
 * These classes are always used together with .wrap on the same element
 * (`class="wrap section"`). Both are single-class selectors, so the later one
 * wins — and the `padding` shorthand would reset .wrap's horizontal gutter to
 * zero, putting text hard against the screen edge on any viewport narrower than
 * .wrap's max-width. Desktop hid it because the max-width plus auto margins
 * produce an inset anyway; every phone and tablet showed it.
 */
.section        { padding-block: clamp(44px, 6vw, 76px); }
.section--sm    { padding-block: clamp(32px, 4.5vw, 56px); }
.section--md    { padding-block: clamp(40px, 5.5vw, 68px); }
.section--cta   { padding-block: clamp(40px, 5.5vw, 64px); }
.section--cta-lg { padding-block: clamp(44px, 6vw, 70px); }
.section--fine  { padding-block: clamp(28px, 4vw, 44px); }

/* A page intro sets up the page; it does not need as much air beneath it. */
.section--hero  { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); }

/*
 * ...and the block that follows an intro sits under that padding already.
 * Left at full height the two insets stack into a ~160px void that reads as a
 * missing section. Matches both markup shapes: the band is either the padded
 * element itself, or a plain colour band wrapping one.
 */
.band--hero + .section,
.band--hero + .section--sm,
.band--hero + .section--md,
.band--hero + * > .section,
.band--hero + * > .section--sm,
.band--hero + * > .section--md,
.hero + .section,
.hero + * > .section {
	padding-top: clamp(22px, 3vw, 36px);
}

.band--hero    { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); }
.band--surface { background: var(--surface); }
.band--dark    { background: var(--dark); }
.band--brand   { background: var(--brand); }
.band--top     { border-top: 1px solid var(--line); }
.band--bottom  { border-bottom: 1px solid var(--line); }

/* Two-column "split" rows (hero, feature blocks). */
.split {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.split--top { align-items: flex-start; }

.split__body {
	flex: 1 1 440px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.split__body--home { gap: 22px; }
.split__body--wide { flex-basis: 460px; }
.split__body--even { flex: 1 1 400px; }
.split__body--text { flex: 1 1 420px; }

.split__media { flex: 1 1 380px; }
.split__media--sm { flex: 1 1 360px; }
.split__media--md { flex: 1 1 340px; }
.split__media--lg { flex: 1 1 420px; }
.split__aside { flex: 1 1 320px; }
.split__aside--wide { flex: 1 1 300px; }
.split__form { flex: 1 1 480px; }

/* Auto-fit card grids. */
.grid {
	display: grid;
	gap: 24px;
}

/*
 * The min() guard matters on narrow phones: a bare minmax(300px, 1fr) keeps a
 * 300px track inside a ~270px container, which pushes the card past the screen
 * edge and makes the whole page scroll sideways.
 */
.grid--230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--270 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.stack {
	display: flex;
	flex-direction: column;
}

.stack--center {
	text-align: center;
	align-items: center;
	gap: 18px;
}

.stack--gap-14 { gap: 14px; }
.stack--gap-16 { gap: 16px; }
.stack--gap-18 { gap: 18px; }
.stack--gap-20 { gap: 20px; }
.stack--gap-22 { gap: 22px; }
.stack--gap-24 { gap: 24px; }

/* ----------------------------------------------------------- trust bar --- */

/*
 * Four short credibility points directly under the home hero. Deliberately a
 * single tight band rather than a card grid: it has to read as one glance's
 * worth of reassurance between the hero and the first offer, not as another
 * section competing with them.
 */
.trustbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px clamp(20px, 3vw, 36px);
	padding-block: clamp(18px, 2.5vw, 26px);
}

.trustbar__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
}

.trustbar__item::before {
	content: '✓';
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

/* Uppercase keyword band under the home hero. */
.marquee {
	margin: 0;
	padding: 16px var(--gutter);
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dark-text);
	line-height: 2;
}

/* ------------------------------------------------------------ typography -- */

.eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 600;
}

.label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-alt);
	font-weight: 600;
}

.h1 {
	margin: 0;
	font-size: clamp(30px, 4.5vw, 46px);
	font-weight: 600;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: pretty;
}

/* The home hero runs larger than inner-page h1s. */
.h1--home {
	font-size: clamp(34px, 5.5vw, 56px);
	line-height: 1.08;
}

.h1--bold { font-weight: 700; }

.h2 {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	color: var(--ink);
}

.h2--sm { font-size: clamp(26px, 3.5vw, 36px); }
.h2--light { color: #fff; }
.h2--spaced { margin-bottom: 30px; }
.h2--spaced-sm { margin-bottom: 26px; }
.h2--tight { margin-bottom: 12px; }

.h3 {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 600;
	color: var(--ink);
}

.h3--card {
	font-size: 22px;
	font-weight: 600;
}

.h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}

.h4--sm { font-size: 17px; }

.lede {
	margin: 0;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.7;
	color: var(--muted);
	text-wrap: pretty;
}

.lede--home { line-height: 1.6; max-width: 44ch; }
.lede--52 { max-width: 52ch; }
.lede--54 { max-width: 54ch; }
.lede--56 { max-width: 56ch; }
.lede--58 { max-width: 58ch; }
.lede--60 { max-width: 60ch; }
.lede--64 { max-width: 64ch; }

.price-line {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.35;
	color: var(--brand);
	font-weight: 600;
}

.prose {
	margin: 0;
	font-size: clamp(16px, 1.8vw, 17.5px);
	line-height: 1.75;
	color: var(--muted);
	text-wrap: pretty;
}

.body {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--muted);
}

.body--sm {
	font-size: 15px;
	line-height: 1.7;
}

.copy {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted);
}

.copy--sm {
	font-size: 14.5px;
	line-height: 1.65;
}

/*
 * Disclaimers and source notes.
 *
 * These carry the pricing qualifications and the medical/regulatory notes, so
 * they have to be genuinely readable rather than decoratively small. The old
 * 13px on --muted-soft measured 2.9:1 against the page background — below the
 * WCAG AA 4.5:1 floor for body text. --muted is 5.7:1 at the same size, and the
 * type is up a step so the small print no longer reads as an afterthought.
 */
.fine {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--muted);
}

.fine--xs {
	font-size: 13.5px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- links --- */

.btn {
	display: inline-block;
	text-decoration: none;
	font-family: var(--font);
	font-size: 15.5px;
	font-weight: 600;
	padding: 15px 28px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	text-align: center;
}

.btn--primary {
	background: var(--brand);
	color: #fff;
}

.btn--primary:hover {
	background: var(--brand-dark);
	color: #fff;
}

.btn--outline {
	background: none;
	border: 1.5px solid var(--brand);
	color: var(--brand);
	padding: 14px 26px;
}

.btn--outline:hover {
	background: var(--tint);
	color: var(--brand);
}

/* On the dark/brand CTA bands. */
.btn--light {
	background: #fff;
	color: var(--brand-dark);
	font-size: 16px;
	padding: 15px 30px;
}

.btn--light:hover {
	background: var(--tint);
	color: var(--brand-dark);
}

.btn--light-sm {
	font-size: 15.5px;
	padding: 14px 26px;
}

.btn--ghost {
	background: none;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 15.5px;
	padding: 13px 24px;
}

.btn--ghost:hover {
	border-color: #fff;
	color: #fff;
}

/* Hero-scale buttons. The ghost variant loses 1px per side to its border. */
.btn--lg {
	font-size: 16.5px;
	padding: 17px 32px;
	border-radius: var(--radius);
}

.btn--ghost.btn--lg { padding: 16px 30px; }

.btn--submit {
	font-size: 16px;
	align-self: flex-start;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.btn-row--center {
	justify-content: center;
	margin-top: 0;
}

.arrow-link {
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	margin-top: auto;
}

/* ---------------------------------------------------------------- cards --- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.card--tight {
	padding: 28px;
	gap: 12px;
}

.card--contact {
	padding: 22px 24px;
	gap: 6px;
}

.card--flat {
	padding: 20px 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	display: block;
}

.card__price {
	font-size: clamp(30px, 3.5vw, 38px);
	font-weight: 700;
	color: var(--brand);
}

.card__value {
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.card__value--sm {
	font-size: 16px;
	overflow-wrap: anywhere;
}

.card__value--plain {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

/* Rule-topped blocks (process steps, inclusion lists, coverage facts). */
.topline {
	border-top: 2px solid var(--brand);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.topline--sm { padding-top: 18px; gap: 10px; }
.topline--fact { padding-top: 16px; gap: 6px; }

.topline__num {
	font-size: 15px;
	font-weight: 700;
	color: var(--step-num);
}

.topline__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-soft);
	font-weight: 600;
}

.topline__value {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.topline__value--link { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ dash lists -- */

.dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dash-list--hero { margin-top: 6px; }

.dash-list li {
	font-size: 15.5px;
	color: var(--ink);
	display: flex;
	gap: 10px;
	align-items: baseline;
	line-height: 1.5;
}

.dash-list--sm li { font-size: 15px; }

.dash-list li::before {
	content: '—';
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

/* ----------------------------------------------------------- media slots -- */

/*
 * Image slots.
 *
 * The box needs a *definite* height, otherwise `height: 100%` on the image
 * resolves to `auto`, object-fit never engages, and the photo sits at its own
 * aspect ratio inside the slot — leaving the placeholder hatching visible above
 * and below a wide photo, or stretching the row to 600px+ for a tall one.
 * aspect-ratio gives that definite height and keeps the slot in proportion at
 * every width; min-height is the floor on narrow phones (and the fallback if
 * aspect-ratio is unsupported).
 */
.media {
	position: relative;
	aspect-ratio: 3 / 2;
	min-height: 240px;
	border-radius: var(--radius);
	background: repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ph-line);
	overflow: hidden;
}

.media--300 { aspect-ratio: 16 / 10; }

.media__note {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--ph-ink);
	background: rgba(247, 250, 250, 0.85);
	padding: 8px 14px;
	border-radius: 4px;
}

/*
 * Taken out of flow so the slot keeps the height aspect-ratio gave it and the
 * image fills that box edge to edge rather than sizing the box itself.
 */
.media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Diagrams and the coverage map are artwork with their own margins and labels —
 * cropping them loses information, so they are contained on a plain ground.
 * Both are natively 3:2, so the slot matches and the inset reads as a margin
 * around the artwork rather than as letterboxing.
 */
.media--contain {
	aspect-ratio: 3 / 2;
	background: var(--surface);
}

.media--contain img {
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
}

/* ------------------------------------------------------------ home hero --- */

/*
 * Photo, scrim and content are all positioned, none carry a z-index, so they
 * paint in DOM order — photo, then gradient, then text on top. No stacking
 * context juggling needed.
 */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--dark);
}

.hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(23, 41, 45, 0.96) 0%, rgba(23, 41, 45, 0.82) 45%, rgba(23, 41, 45, 0.55) 100%),
		radial-gradient(ellipse at 80% 20%, rgba(79, 122, 112, 0.35) 0%, rgba(23, 41, 45, 0) 55%);
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-block: clamp(56px, 7.5vw, 104px) clamp(44px, 6vw, 76px);
}

.hero__eyebrow {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
}

.hero__title {
	margin: 0;
	font-size: clamp(40px, 7.5vw, 84px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: pretty;
	/*
	 * Wide enough that "New teeth. Clear prices." holds together on line one and
	 * "No confusion" drops beneath it — the headline is three sentences, and
	 * breaking mid-sentence loses the rhythm the copy is built on.
	 */
	max-width: 24ch;
}

.hero__lede {
	margin: 0;
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.6;
	color: #b9c9c6;
	max-width: 52ch;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px clamp(24px, 5vw, 64px);
	width: 100%;
	margin-top: clamp(14px, 2vw, 24px);
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	/* Top-aligned: only the package stat carries an inclusions line, and the two
	   figures should sit on the same baseline regardless. */
	align-items: flex-start;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hero__stat-num {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}

.hero__stat-label {
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}

/* What the headline figure actually buys — sentence case, so it reads as a
   statement rather than as a second label. */
.hero__stat-note {
	font-size: 14px;
	line-height: 1.5;
	color: #b9c9c6;
	max-width: 34ch;
	margin-top: 2px;
}

/*
 * The pricing qualification under the stats row. Pulled back against
 * .hero__inner's 24px column gap: this line qualifies the figures directly
 * above it, and at a full gap it reads as a separate block instead.
 */
.hero__fine {
	margin: -10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #a8bab7;
	max-width: 60ch;
}

/* ------------------------------------------------------------------ cta --- */

.cta { background: var(--brand); }

.cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.cta__inner--lg { gap: 24px; }

.cta__title {
	margin: 0;
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 600;
	color: #fff;
}

.cta__title--lg { font-size: clamp(28px, 4vw, 40px); }

.cta__lede {
	margin: 0;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.7;
	color: #d3e0de;
	max-width: 52ch;
}

.cta__email {
	color: #d3e0de;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.cta__email:hover { color: #fff; }

/* ---------------------------------------------------------------- table --- */

.ftable {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.ftable__row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 16px clamp(16px, 3vw, 28px);
	border-bottom: 1px solid var(--line-soft);
	align-items: baseline;
}

.ftable__row:last-child { border-bottom: none; }

.ftable__row--head {
	background: var(--dark);
	padding: 14px clamp(16px, 3vw, 28px);
	border-bottom: none;
}

.ftable__row--highlight { background: var(--tint); }

.ftable--compare .ftable__row { grid-template-columns: 1.2fr 1.2fr 1fr; padding-left: clamp(14px, 3vw, 28px); padding-right: clamp(14px, 3vw, 28px); }
.ftable--compare .ftable__row:not(.ftable__row--head):not(.ftable__row--highlight) { padding-top: 15px; padding-bottom: 15px; }

.ftable__th {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dark-text);
	font-weight: 600;
}

.ftable__th--strong { color: #fff; }
.ftable__th--right,
.ftable__cell--right { text-align: right; }

.ftable__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.ftable__name--plain { font-weight: 400; }
.ftable__name--highlight { color: var(--brand-dark); }

.ftable__price {
	font-size: 19px;
	font-weight: 700;
	color: var(--brand);
	text-align: right;
}

.ftable__price--sm { font-size: 18px; }

.ftable__was {
	font-size: 14.5px;
	color: var(--muted-soft);
	text-align: right;
	text-decoration: line-through;
}

.ftable__range {
	font-size: 14.5px;
	color: var(--muted);
	text-align: right;
}

/* Source note for the asterisked comparison column. */
.ftable__note {
	margin-top: 12px;
	padding-inline: 2px;
}

/* ------------------------------------------------------------------ faq --- */

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Topic jump-nav above the grouped list. */
.faq-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.faq-jump__link {
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nav-ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-jump__link:hover {
	background: var(--tint);
	border-color: var(--tint-line);
	color: var(--brand-dark);
}

.faq-group {
	/* Clears the sticky header when a jump link lands here. */
	scroll-margin-top: 88px;
}

.faq-group + .faq-group { margin-top: clamp(32px, 4.5vw, 52px); }

.faq-group__title {
	margin: 0 0 14px;
	font-size: clamp(19px, 2.2vw, 22px);
	font-weight: 700;
	color: var(--ink);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

html { scroll-behavior: smooth; }

.faq {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 22px;
}

.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.45;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: baseline;
}

.faq summary::-webkit-details-marker { display: none; }

.faq__sign {
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

.faq[open] .faq__sign::before { content: '−'; }
.faq:not([open]) .faq__sign::before { content: '+'; }

.faq__answer {
	margin: 0;
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

/* ---------------------------------------------------------------- forms --- */

/*
 * Markup comes from the Implant & Crown Forms plugin (IAC_Render::render_form).
 * The plugin ships only a minimal fallback stylesheet and expects the active
 * theme to own field styling, so the design's form treatment lives here.
 */

.form-wrap { display: block; }

/*
 * Contact puts the form's heading inside the card so the left column starts on
 * the same line as the first contact card on the right. With the heading loose
 * above the card the two columns start at different heights.
 */
.form-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(22px, 4vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.form-card__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
}

/* The card is now the outer element, so the form drops its own chrome. */
.form-card .iac-form {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

.iac-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(22px, 4vw, 36px);
}

/* On white bands the card inverts so it still separates from the background. */
.form-wrap--inverted .iac-form { background: var(--bg); }
.form-wrap--inverted .iac-form input:not([type="checkbox"]):not([type="radio"]),
.form-wrap--inverted .iac-form select,
.form-wrap--inverted .iac-form textarea { background: var(--surface); }

.iac-form .field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.iac-form label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nav-ink);
}

.iac-form .legend {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nav-ink);
}

.iac-form .req { color: var(--brand); }

.iac-form input:not([type="checkbox"]):not([type="radio"]),
.iac-form select,
.iac-form textarea {
	border: 1px solid var(--field-line);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	font-size: 15px;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	width: 100%;
}

.iac-form textarea {
	resize: vertical;
	min-height: 132px;
}

.iac-form input[type="file"] {
	padding: 11px 14px;
	font-size: 14px;
}

/*
 * Guidance under a field. Carries the upload rules for the quote form — how
 * many files, which formats, what size — which are the things people otherwise
 * discover only by having a submission rejected.
 */
.iac-form .field-help {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--muted);
}

/* Running list of the files actually chosen, written by forms.js. */
.iac-form .iac-filelist {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.iac-form .iac-filelist__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	overflow-wrap: anywhere;
}

.iac-form .iac-filelist__item::before {
	content: '✓';
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

.iac-form .iac-filelist__name { flex: 1 1 auto; min-width: 0; }

/* Per-file remove control. 28px square keeps it thumb-reachable on a phone. */
.iac-form .iac-filelist__remove {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	line-height: 1;
	font-size: 18px;
	font-family: var(--font);
	color: var(--muted);
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.iac-form .iac-filelist__remove:hover {
	background: #fdecec;
	border-color: #f0c4c4;
	color: #8c2b2b;
}

.iac-form .iac-filelist__item.is-error {
	color: #8c2b2b;
	font-weight: 600;
	background: #fdecec;
	border-color: #f0c4c4;
}

.iac-form .iac-filelist__item.is-error::before {
	content: '!';
	color: #8c2b2b;
}

/* Plain status line ("Maximum of 5 files reached") — not a file row. */
.iac-form .iac-filelist__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* Paired fields (row_with) sit side by side and stack on narrow screens. */
.iac-form .row2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}

.iac-form .row2 > div {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* Checkbox / radio groups — the consent tick uses this. */
.iac-form .checks,
.iac-form .radios {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.iac-form .check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.5;
	cursor: pointer;
}

.iac-form .check input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--brand);
	flex-shrink: 0;
}

/*
 * The label's sentence as ONE flex item.
 *
 * .check is a flex container, so text either side of an inline link would
 * become separate anonymous flex items — the consent line would lay out as
 * side-by-side columns instead of wrapping as a paragraph.
 */
.iac-form .check__text {
	flex: 1 1 auto;
	min-width: 0;
}

.iac-form .check__text a {
	color: var(--brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.iac-form .check__text a:hover { color: var(--brand-dark); }

.iac-form .form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
}

.iac-form .form-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	flex: 1 1 220px;
}

.iac-form .btn-primary {
	background: var(--brand);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 28px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-family: var(--font);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.iac-form .btn-primary:hover { background: var(--brand-dark); }
.iac-form .btn-primary[disabled] { opacity: 0.6; cursor: default; }
.iac-form .btn-primary .arrow { font-size: 15px; }

.iac-form .iac-error {
	background: #fdecec;
	border: 1px solid #f0c4c4;
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #8c2b2b;
}

.iac-form .iac-invalid { border-color: #c64a5e; }

/* Success panel swapped in by the plugin's JS after a successful submit. */
.iac-success {
	background: var(--tint);
	border: 1px solid var(--tint-line);
	border-radius: var(--radius);
	padding: 40px 32px;
	text-align: center;
	max-width: none;
}

.iac-success .check-mark {
	background: var(--brand);
	color: #fff;
}

.iac-success h3 { color: var(--brand-dark); }

.iac-success p {
	color: var(--brand-dark);
	font-size: 16px;
	line-height: 1.7;
}

/* --------------------------------------------------------------- header --- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(247, 250, 250, 0.96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 70px;
}

.site-header__brand {
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 6px 0;
}

/*
 * The source file is a 747x220 two-line lockup. Capping both axes with auto
 * width/height scales it proportionally — setting `height` outright let the
 * `img { max-width: 100% }` base rule squash it horizontally once the header
 * ran out of room on a phone. multiply hides the logo's white matte against
 * the near-white header; the PNG has no alpha channel.
 */
.site-header__logo {
	width: auto;
	height: auto;
	max-height: 52px;
	/*
	 * The wordmark reads "Implant and Crown Melbourne", so the lockup is a wider
	 * 4.5:1 rather than the old 3.4:1. Width is the binding constraint here: the
	 * desktop bar also carries eight nav links plus the CTA at the 1120px
	 * breakpoint, so this is kept close to the previous footprint rather than
	 * letting max-height drive it out to ~236px.
	 */
	max-width: 210px;
	display: block;
	mix-blend-mode: multiply;
}

.site-header__wordmark {
	font-size: 20px;
	font-weight: 700;
	color: var(--brand-dark);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.site-nav__link {
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nav-ink);
	letter-spacing: 0.01em;
}

.site-nav__link:hover { color: var(--brand-dark); }

.site-nav__link.is-active {
	font-weight: 600;
	color: var(--brand-dark);
}

.site-header__cta {
	text-decoration: none;
	background: var(--brand);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.site-header__cta:hover { background: var(--brand-dark); color: #fff; }

.site-header__mobile {
	display: none;
	align-items: center;
	gap: 10px;
}

.site-header__call {
	text-decoration: none;
	border: 1px solid var(--brand);
	color: var(--brand);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.site-header__toggle {
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 44px;
	justify-content: center;
}

.site-header__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ink);
}

.site-nav--mobile {
	border-top: 1px solid var(--line);
	background: var(--bg);
	display: none;
	flex-direction: column;
	padding: 8px 0 12px;
}

.site-nav--mobile.is-open { display: flex; }

.site-nav--mobile .site-nav__link {
	font-size: 16px;
	padding: 13px 24px;
	border-bottom: 1px solid var(--line-soft);
}

.site-nav--mobile .site-header__cta {
	padding: 14px 20px;
	font-size: 15px;
	margin: 14px 20px 4px;
	text-align: center;
}

/* The design switches to the mobile header below 1120px. */
@media (max-width: 1119px) {
	.site-header__desktop { display: none; }
	.site-header__mobile { display: flex; }
}

@media (max-width: 480px) {
	.site-header__bar {
		gap: 12px;
		min-height: 62px;
	}

	/* vw cap so the wider lockup cannot crowd the Call + menu controls on
	   narrow handsets (it would otherwise want ~191px at 42px tall). */
	.site-header__logo { max-height: 42px; max-width: 52vw; }

	/* Keep the brand from squeezing the call + menu controls off the bar. */
	.site-header__mobile { flex-shrink: 0; }
	.site-header__call { padding: 10px 12px; }
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
	background: var(--dark);
	color: var(--on-dark);
	font-family: var(--font);
}

.site-footer__top {
	max-width: 1360px;
	margin: 0 auto;
	padding: 48px var(--gutter) 36px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 40px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__name {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
}

.site-footer__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--dark-body);
	max-width: 32ch;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.site-footer__label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dark-label);
	font-weight: 700;
}

.site-footer__link {
	color: var(--on-dark);
	text-decoration: none;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.site-footer__link:hover { color: #fff; }

/* The phone number is the one link in the footer that reads as a heading. */
.site-footer__phone {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
}

.site-footer__phone:hover { color: var(--accent); }

.site-footer__meta {
	font-size: 14px;
	color: var(--dark-body);
}

.site-footer__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dark-body);
}

.site-footer__cta {
	text-decoration: none;
	background: #fff;
	color: var(--brand-dark);
	font-size: 14.5px;
	font-weight: 700;
	padding: 13px 22px;
	border-radius: var(--radius);
	text-align: center;
}

.site-footer__cta:hover { background: var(--tint); color: var(--brand-dark); }

.site-footer__cta--ghost {
	background: none;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	font-weight: 600;
	padding: 12px 22px;
}

.site-footer__cta--ghost:hover { background: none; border-color: #fff; color: #fff; }

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * The clinical + surgical-risk notices. These are the statements a patient is
 * meant to actually read before enquiring, so they sit on their own line above
 * the copyright rather than being crushed into it, and they run a step larger
 * and lighter than the copyright for contrast against the dark band.
 */
.site-footer__legal {
	max-width: 1360px;
	margin: 0 auto;
	padding: 18px var(--gutter) 0;
}

.site-footer__legal p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dark-body);
	text-wrap: pretty;
}

/* Privacy Policy | Website by … — the right-hand end of the copyright row. */
.site-footer__copy-end {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.site-footer__sep {
	color: var(--dark-label);
	/* Purely a visual divider; it collapses out when the row wraps. */
	opacity: 0.6;
}

.iac-form .field-help a {
	color: var(--brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.iac-form .field-help a:hover { color: var(--brand-dark); }

.site-footer__copy {
	max-width: 1360px;
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

.site-footer__copy p {
	margin: 0;
	font-size: 13px;
	color: var(--dark-body);
}

.site-footer__copy a {
	color: var(--dark-body);
	text-decoration: none;
}

.site-footer__copy a:hover { color: #fff; }

/* --------------------------------------------------- sticky mobile bar --- */

/*
 * Call + Check My Suitability, pinned to the bottom of the viewport on phones.
 *
 * Hidden by default and switched on at the breakpoint rather than the reverse,
 * so no desktop viewport can ever have a fixed bar covering the footer. The
 * safe-area inset keeps the buttons clear of the iOS home indicator, and the
 * matching body padding stops the bar sitting on top of the last few lines of
 * the footer at the bottom of the scroll.
 */
.mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	gap: 10px;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(247, 250, 250, 0.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 18px rgba(23, 41, 45, 0.08);
}

.mobile-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
}

.mobile-bar__btn--call {
	flex: 0 0 auto;
	min-width: 96px;
	border: 1.5px solid var(--brand);
	color: var(--brand);
	background: var(--surface);
}

.mobile-bar__btn--cta {
	flex: 1 1 auto;
	background: var(--brand);
	color: #fff;
}

.mobile-bar__btn--cta:hover { background: var(--brand-dark); color: #fff; }
.mobile-bar__btn--call:hover { background: var(--tint); color: var(--brand); }

@media (max-width: 767px) {
	.mobile-bar { display: flex; }

	/* Reserve the bar's own height (10 + 48 + 10 + 1px border) plus the inset. */
	body { padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------- fallback --- */

/* Default page/post template — plain editor content. */
.entry {
	padding-block: clamp(48px, 7vw, 90px);
}

.entry__content h2 { margin: 1.6em 0 0.5em; font-size: clamp(24px, 3vw, 32px); font-weight: 600; }
.entry__content h3 { margin: 1.4em 0 0.5em; font-size: 22px; font-weight: 600; }
.entry__content p,
.entry__content li { font-size: 16px; line-height: 1.75; color: var(--muted); }

/*
 * Below 640px the three columns will not hold. The row name moves onto its own
 * line and the two figures sit under it, our price on the left and the thing it
 * is being compared against on the right.
 */
@media (max-width: 640px) {
	.ftable__row,
	.ftable--compare .ftable__row {
		grid-template-columns: 1fr auto;
		row-gap: 4px;
		column-gap: 12px;
	}

	.ftable__th:first-child,
	.ftable__name { grid-column: 1 / -1; }

	/*
	 * The two figure headings stay on. They used to be hidden here, which left
	 * the numbers in every row unlabelled — on the pricing table you could not
	 * tell our fixed fee from the standard market figure, and on the comparison
	 * table the "Implant + Crown" and "Zirconia Crown" columns were unnamed.
	 * They drop into the same two slots the figures below them use, so the
	 * labels line up with the numbers they describe.
	 */
	.ftable__th:first-child { margin-bottom: 8px; }

	.ftable__th--right:nth-child(2),
	.ftable__th--right:nth-child(3) {
		font-size: 10px;
		letter-spacing: 0.06em;
		line-height: 1.25;
		align-self: end;
	}

	/* Whichever cell type lands in the first figure slot, anchor it left. */
	.ftable__row > :nth-child(2) { text-align: left; }
}

/* ------------------------------------------------------------- motion --- */

/*
 * Entrance animation.
 *
 * Three gates, so content can never end up permanently invisible:
 *   1. .js-anim is set on <html> by an inline head script — no JS, no hiding.
 *   2. The whole block sits inside prefers-reduced-motion: no-preference.
 *   3. site.js reveals everything on a timer if IntersectionObserver is
 *      missing or an entry never fires.
 * Sections animate as a unit rather than per card — the block rising together
 * reads as considered; twenty individually staggered cards read as a demo.
 */
@media (prefers-reduced-motion: no-preference) {
	.js-anim #main > section {
		opacity: 0;
		transform: translateY(20px);
	}

	.js-anim #main > section.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.7s ease,
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* The hero is the LCP block — fade it without the slide so text lands fast. */
	.js-anim #main > section.hero,
	.js-anim #main > section.band--hero {
		transform: none;
	}

	.js-anim #main > section.hero.is-in,
	.js-anim #main > section.band--hero.is-in {
		transition: opacity 0.5s ease;
	}
}

/* Hover/interaction polish — safe to run unconditionally, all are tiny. */
.btn,
.site-header__cta,
.site-footer__cta {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.site-nav__link,
.site-footer__link,
.site-footer__phone,
.arrow-link,
.cta__email {
	transition: color 0.2s ease;
}

.arrow-link {
	display: inline-block;
	transition: color 0.2s ease, transform 0.2s ease;
}

.arrow-link:hover { transform: translateX(3px); }

/* Only the offer/feature cards in a grid lift — info cards stay put. */
.grid > .card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.grid > .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(23, 41, 45, 0.09);
	border-color: var(--tint-line);
}

.faq { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq:hover { border-color: var(--tint-line); }
.faq[open] { box-shadow: 0 6px 18px rgba(23, 41, 45, 0.06); }
.faq__sign { transition: transform 0.2s ease; }
.faq[open] .faq__sign { transform: rotate(180deg); }

.hero__media { transition: opacity 0.9s ease; }

/* The header gains a shadow once it is actually overlapping content. */
.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(23, 41, 45, 0.08); }

.media img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.split:hover .media:not(.media--contain) img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------ utilities -- */

.h2--lede { margin-bottom: 10px; }
.body--intro { margin-bottom: 24px; }
.body--spaced { margin-bottom: 26px; }
.body--on-brand { color: #d3e0de; }