/* Russell's Hustles — design system.
   Dark ground: RH Black is the foundation, Deep Ocean adds depth, brushed
   silver carries the hairlines and secondary text, cream and white are the
   sheets (cards, forms, tables, long reading). Adventure Aqua is the marker:
   primary buttons, links, the active nav plate, marker bars, one word in a
   heading. Bebas Neue for display, Barlow for everything else. */

:root {
	/* Muted-teal palette (Sept 2026): softer, more established than the old
	   bright turquoise. Base colors from Russell; derived shades tuned for
	   contrast on the dark ground and on the light sheets. */
	--black: #071014;          /* Near Black */
	--charcoal: #1B2226;       /* Charcoal — panels/depth on the dark ground */
	--ocean: #24666B;          /* Deep Teal — bands and panels */
	--aqua: #32777A;           /* Primary Teal — the attention color */
	--silver: #BFC5C8;         /* Silver — hairlines, secondary text */
	--cream: #F3F4F4;          /* Off White — sheets (cards, forms, reading) */
	--white: #FFFFFF;

	--ground: var(--black);
	--ground-2: #121B1F;
	--ocean-deep: #1B4E52;
	--ocean-lt: #2E7276;
	--aqua-lt: #47898A;        /* Soft Teal Accent — pill/hover fills */
	--aqua-lt2: #6FB2B2;       /* lighter teal — link hover on the dark ground */
	--aqua-ink: #24666B;       /* Deep Teal — links/accents on light sheets, button hover */
	--aqua-dim: rgba(50, 119, 122, .16);
	--line: #26333A;
	--line-strong: #3B4D52;
	--line-light: #C9D0D5;
	--ink: #101A1C;
	--ink-soft: #45565C;
	--ok: #4CC38A;
	--ok-ink: #1F7A4C;
	--danger: #F0857C;
	--danger-ink: #B23A2E;

	--fg: var(--cream);
	--fg-2: var(--silver);
	--fg-strong: var(--white);
	--link: var(--aqua-lt);
	--link-hover: var(--aqua-lt2);
	--rule: var(--line);
	--bg: var(--ground);

	--wrap: 1180px;
	--r: 6px;
	--display: "Bebas Neue", "Barlow Condensed", "Oswald", sans-serif;
	--sans: "Barlow", "Helvetica Neue", Helvetica, sans-serif;
	--script: "Permanent Marker", "Bebas Neue", cursive;
	--shadow: 0 14px 32px rgba(0, 0, 0, .45);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--black); }

body {
	margin: 0;
	background: var(--ground);
	background-image: radial-gradient(circle at 1px 1px, rgba(174, 183, 189, .09) 1px, transparent 1.5px);
	background-size: 28px 28px;
	color: var(--fg);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	caret-color: var(--aqua);
}

::selection { background: var(--aqua); color: var(--white); }

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

h1, h2, h3, .display {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 .35em;
	color: var(--fg-strong);
	text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; text-transform: none; letter-spacing: 0; line-height: 1.25; text-wrap: pretty; }

h1 em, h2 em, .hi { font-style: normal; color: var(--aqua); }
h1 em { font-family: var(--script); text-transform: none; font-size: .92em; letter-spacing: 0; line-height: 1; }

/* Marker bar: the short aqua strip that precedes a section heading. */
.section-head h2::before, .mark::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	background: var(--aqua);
	margin: 0 0 14px;
}

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.lede { font-size: 1.15rem; color: var(--fg); font-weight: 500; }
.meta { font-size: .9rem; color: var(--fg-2); }
.muted { color: var(--fg-2); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--aqua); color: var(--white); padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 2px; }

.hp { position: absolute; left: -9999px; }

/* Light sheets: cards, forms, tables, long reading. Contextual tokens flip
   so the same components read correctly on cream and white. */
.sheet, .card, .prose, .notice, .faq-list details, .form-sheet, .contact-form, .sell-form, .quote-form {
	--fg: var(--ink);
	--fg-2: var(--ink-soft);
	--fg-strong: var(--ink);
	--link: var(--aqua-ink);
	--link-hover: var(--ocean-deep);
	--rule: var(--line-light);
	--bg: var(--cream);
	--ok: var(--ok-ink);
	--danger: var(--danger-ink);
	color: var(--fg);
	color-scheme: light;
}

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

.site-head {
	background: var(--black);
	color: var(--white);
	border-bottom: 2px solid var(--aqua);
	position: relative;
	z-index: 20;
}

.head-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 72px;
	flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; margin-right: auto; }
.brand-mark { width: 48px; height: 48px; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-word { font-family: var(--display); font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); line-height: 1; }
.brand-word em, .foot-name em { font-style: normal; color: var(--aqua); }
.brand-line, .foot-line { font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--silver); line-height: 1; }
.foot-line { margin: 6px 0 12px; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
	color: var(--silver); text-decoration: none; font-weight: 600; font-size: .92rem;
	text-transform: uppercase; letter-spacing: .07em; padding: 8px 12px;
	border-radius: var(--r);
	transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--white); background: var(--ground-2); }
.nav a[aria-current="page"] { color: var(--aqua); background: var(--aqua-dim); box-shadow: inset 0 -3px 0 var(--aqua); }

.text-pill {
	background: var(--aqua); color: var(--white); font-weight: 700; text-decoration: none;
	padding: 9px 16px; border-radius: 999px; font-size: .9rem; white-space: nowrap;
	transition: background-color .15s ease;
}
.text-pill:hover { background: var(--aqua-lt); color: var(--white); }

.cart-link { color: var(--silver); text-decoration: none; font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.cart-link:hover { color: var(--white); }
.cart-count {
	display: inline-block; min-width: 24px; text-align: center; background: var(--aqua);
	color: var(--black); border-radius: 999px; padding: 1px 7px; font-weight: 700; margin-left: 4px;
}

.nav-toggle { position: absolute; left: -9999px; }
.nav-burger { display: none; }

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

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--sans); font-weight: 700; font-size: .95rem;
	text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
	padding: 12px 22px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer;
	line-height: 1.2; min-height: 44px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--aqua); color: var(--white); border-color: var(--aqua); }
.btn-primary:hover { background: var(--aqua-ink); color: var(--white); border-color: var(--aqua-ink); }
.btn-black { background: var(--ocean); color: var(--white); border-color: var(--ocean); }
.btn-black:hover { background: var(--ocean-lt); color: var(--white); border-color: var(--ocean-lt); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg-2); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-arrow::after {
	content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-sm { padding: 7px 12px; font-size: .82rem; min-height: 32px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; max-width: none; }

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

.hero {
	position: relative;
	overflow: hidden;
	background: var(--black);
	min-height: 600px;
	display: flex;
	align-items: stretch;
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 620px) 1fr;
	align-items: center;
	position: static;
	padding: 72px 0;
}
.hero-copy { position: relative; z-index: 2; }
.hero-kicker {
	font-weight: 700; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--white); margin: 0 0 14px;
}
.hero-copy h1 { font-size: clamp(3.2rem, 7.2vw, 5.8rem); margin-bottom: .2em; position: relative; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.hero-copy h1 em { display: block; margin-top: .08em; }
.hero-copy h1::after {
	content: "";
	display: block;
	width: 120px; height: 5px;
	background: var(--aqua);
	margin-top: 18px;
	transform-origin: left center;
	animation: mark-draw .7s var(--ease-out) .45s both;
}
.hero-copy .hero-lines { font-size: 1.25rem; font-weight: 600; color: var(--white); margin-bottom: .5em; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.hero-copy .hero-sub { color: var(--cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

.hero-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; z-index: 0; }
.hero-panel::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, var(--black) 0%, rgba(8, 11, 13, .78) 24%, rgba(8, 11, 13, .22) 58%, rgba(8, 11, 13, .06) 100%),
		linear-gradient(180deg, rgba(8, 11, 13, .3) 0%, transparent 30%, transparent 70%, rgba(8, 11, 13, .5) 100%);
	pointer-events: none;
}
.hero-panel picture { width: 100%; height: 100%; }
.hero-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.rise-0 { --i: 0; }
.rise-1 { --i: 1; }
.rise-2 { --i: 2; }
.rise-3 { --i: 3; }
.rise-4 { --i: 4; }
.rise-5 { --i: 5; }
.rise { opacity: 0; transform: translateY(16px); animation: rise-in .7s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes mark-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ bands */

.trust-band { background: var(--ocean); color: var(--white); padding: 26px 0; text-align: center; border-top: 2px solid var(--aqua); border-bottom: 1px solid var(--line-strong); }
.trust-band p { color: var(--cream); margin: 0 auto; max-width: 72ch; font-size: 1.05rem; font-weight: 500; }

.strip-band { background: var(--black); border-bottom: 1px solid var(--line); }
.photo-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.photo-strip li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ocean-deep); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 11, 13, .85) 100%); }
.photo-strip span {
	position: absolute; left: 18px; bottom: 12px; z-index: 1;
	font-family: var(--script); font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--white); line-height: 1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.cta-band { background: var(--ocean); color: var(--white); padding: 52px 0; border-top: 1px solid var(--line-strong); }
.cta-band h2 { color: var(--white); }
.cta-band h2::before { content: ""; display: block; width: 44px; height: 4px; background: var(--aqua); margin: 0 0 14px; }
.cta-band p { color: var(--cream); }
.cta-band .btn-black, .method-band .btn-black, .trust-band .btn-black { background: var(--black); border-color: var(--black); }
.cta-band .btn-black:hover, .method-band .btn-black:hover, .trust-band .btn-black:hover { background: var(--ground-2); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ sections */

.section { padding: 64px 0; }
.section-alt { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tight { padding: 40px 0; }
.section-head { max-width: 72ch; margin-bottom: 32px; }
.section-head h1::before { content: ""; display: block; width: 44px; height: 4px; background: var(--aqua); margin: 0 0 14px; }
.faq-section h2::before, .section > .wrap > h1:first-child::before { content: ""; display: block; width: 44px; height: 4px; background: var(--aqua); margin: 0 0 14px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.card {
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--r);
	padding: 22px;
	transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card a { font-weight: 600; }

/* Homepage hub: the five doors into the ecosystem. Dark, atmospheric panels that
   match the hero — a big ghost number, a display-font name, an aqua bar that
   fills across on hover, a lift with shadow, and an arrow that slides. */
.hub-grid { margin-top: 6px; }
.hub-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 190px;
	padding: 26px 22px 20px;
	background: linear-gradient(155deg, var(--charcoal), var(--ground-2));
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	color: var(--cream);
	text-decoration: none;
	transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.hub-card::before {
	content: "";
	position: absolute; left: 0; top: 0;
	height: 3px; width: 46px;
	background: var(--aqua);
	transition: width .4s var(--ease-out);
}
.hub-card:hover, .hub-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--aqua); }
.hub-card:hover::before, .hub-card:focus-visible::before { width: 100%; }
.hub-card:focus-visible { outline: 2px solid var(--aqua-lt2); outline-offset: 3px; }
.hub-num {
	position: absolute; right: 12px; bottom: -18px;
	font-family: var(--display); font-size: 6rem; line-height: 1;
	color: rgba(255, 255, 255, .05);
	pointer-events: none; user-select: none;
}
.hub-card h3 {
	font-family: var(--display); font-weight: 400;
	text-transform: uppercase; letter-spacing: .03em;
	font-size: 2.1rem; line-height: 1;
	color: var(--white); margin: 2px 0 0;
}
.hub-card p { position: relative; margin: 0; flex: 1; color: var(--silver); font-size: .98rem; line-height: 1.5; }
.hub-card .hub-go { position: relative; font-weight: 700; color: var(--aqua-lt2); }
.hub-card .hub-go .arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.hub-card:hover .hub-go .arrow, .hub-card:focus-visible .hub-go .arrow { transform: translateX(6px); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.split-narrow { grid-template-columns: 1.3fr 1fr; }
.split > figure, .split > .photo-frame, .split > .photo-pair { width: 100%; max-width: 480px; justify-self: center; }
.split > .photo-small { max-width: 220px; }
.photo-frame { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--ocean-deep); }
.photo-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.photo-small { max-width: 220px; }
.photo-small img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo-wide img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo-ad { max-width: 560px; margin-inline: auto; }
.photo-ad img { aspect-ratio: 1 / 1; object-fit: cover; }
figure { margin: 0; }
picture { display: block; }
figcaption { font-size: .9rem; color: var(--fg-2); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ RH method */

.method-band { background: var(--ocean); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.method-band .section-head p { color: var(--cream); }
.method { counter-reset: step; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.method li { counter-increment: step; position: relative; padding-top: 60px; }
.method li::before {
	content: counter(step);
	position: absolute; top: 0; left: 0;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--aqua); color: var(--white);
	font-family: var(--display); font-size: 1.45rem;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 4px var(--ocean);
	z-index: 1;
}
.method li::after {
	content: ""; position: absolute; top: 21px; left: 44px; right: -16px; height: 2px; background: var(--aqua); opacity: .55;
}
.method li:last-child::after { display: none; }
.method h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.4rem; margin: 0 0 .2em; color: var(--white); }
.method p { font-size: .95rem; color: var(--cream); margin: 0; }

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

.form-sheet, .contact-form, .sell-form, .quote-form {
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--r);
	padding: 28px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide, .span-2 { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .9rem; }
.hint { font-size: .85rem; color: var(--fg-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select {
	height: 40px; padding: 0 12px;
	border: 1px solid var(--line-light); border-radius: var(--r);
	background: var(--white); color: var(--ink);
	font-family: var(--sans); font-size: 1rem; width: 100%;
	caret-color: var(--aqua-ink);
}
textarea {
	padding: 10px 12px; min-height: 110px;
	border: 1px solid var(--line-light); border-radius: var(--r);
	background: var(--white); color: var(--ink);
	font-family: var(--sans); font-size: 1rem; width: 100%; resize: vertical;
	caret-color: var(--aqua-ink);
}
input::placeholder, textarea::placeholder { color: #5E6D76; opacity: 1; }
input[type="file"] { font-size: .9rem; color: var(--fg); }
input:focus, textarea:focus, select:focus { border-color: var(--aqua-ink); outline: 3px solid var(--aqua); outline-offset: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--aqua); outline-offset: 0; }

.form-actions { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-msg { font-size: .9rem; margin: 8px 0 0; min-height: 1.2em; }
span.form-msg { display: block; min-height: 0; }
[aria-invalid="true"] { border-color: var(--danger-ink); }
.form-msg.is-ok { color: var(--ok); font-weight: 600; }
.form-msg.is-bad { color: var(--danger); font-weight: 600; }

.notice {
	border: 1px solid var(--aqua); background: var(--cream);
	border-radius: var(--r); padding: 16px 18px; margin: 0 0 24px; max-width: none;
}
.notice-ok { border-color: var(--ok-ink); }
.notice-bad, .notice-error { border-color: var(--danger-ink); background: #FBEDEA; }
.notice h2 { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

.signup-form { display: grid; gap: 8px; max-width: 320px; }

/* ------------------------------------------------------------------ FAQ */

.faq-list { display: grid; gap: 10px; max-width: 840px; }
.faq-list details {
	background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--r); padding: 14px 18px;
}
.faq-list summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: baseline; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "+"; color: var(--aqua-ink); font-weight: 700; font-size: 1.2em; line-height: 1; flex: 0 0 auto; }
.faq-list details[open] summary::before { content: "\2212"; }
.faq-list details p { margin: 10px 0 0 26px; color: var(--fg-2); }

/* ------------------------------------------------------------------ prose */

.prose {
	max-width: calc(76ch + 88px);
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--r);
	padding: clamp(24px, 4vw, 44px);
}
.prose h2 { margin-top: 1.4em; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r); border: 1px solid var(--line-light); }
.prose blockquote {
	margin: 1.2em 0; padding: 14px 18px; border: 1px solid var(--line-light); border-radius: var(--r);
	background: var(--white); font-size: 1.1rem; color: var(--fg-2);
}
.prose .btn-row { margin-top: 32px; }

.pull {
	display: inline-block;
	font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	color: var(--black); background: var(--cream); text-transform: uppercase; line-height: 1.1; margin: 28px 0;
	padding: 10px 18px; transform: rotate(-1.2deg); border-radius: 3px 10px 4px 12px / 12px 4px 10px 3px;
	max-width: none;
}
.prose .pull { background: var(--ocean); color: var(--white); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.chip {
	display: inline-block; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
	background: transparent; color: var(--fg); text-decoration: none; font-weight: 600; font-size: .9rem;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--aqua); color: var(--aqua); }
.chip[aria-current="page"] { background: var(--aqua); color: var(--white); border-color: var(--aqua); }

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

.site-foot { background: var(--black); color: var(--cream); padding: 52px 0 0; margin-top: 64px; border-top: 1px solid var(--line-strong); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot-grid a { color: var(--cream); }
.foot-grid a:hover { color: var(--aqua); }
.foot-mark { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; }
.foot-name { font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; color: var(--white); margin: 0; }
.foot-tagline { font-weight: 600; color: var(--aqua); margin: 0 0 1em; }
.foot-note { font-size: .9rem; color: var(--silver); }
.site-foot h2 { font-size: 1.2rem; color: var(--white); letter-spacing: .06em; }
.site-foot h2::after { content: ""; display: block; width: 28px; height: 3px; background: var(--aqua); margin-top: 8px; }
.foot-links { display: grid; gap: 6px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-links a[aria-current="page"] { color: var(--aqua); }
.foot-signup input { background: var(--ground-2); border-color: var(--line-strong); color: var(--white); caret-color: var(--aqua); }
.foot-signup input:focus { border-color: var(--aqua); }
.foot-signup .form-msg.is-ok { color: var(--aqua); }
.foot-base {
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	border-top: 1px solid var(--line); margin-top: 36px; padding: 18px 0; font-size: .85rem; color: var(--silver);
}

/* ------------------------------------------------------------------ sticky sms */

.sms-bar { display: none; }

@media (max-width: 760px) {
	.sms-bar {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		background: var(--aqua); color: var(--white); text-align: center;
		font-weight: 700; text-decoration: none; padding: 9px 16px;
		padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
		line-height: 1.2;
	}
	.sms-bar-main { display: block; font-size: 1rem; }
	.sms-bar-sub { display: block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; opacity: .85; }
	body { padding-bottom: 60px; }
	body.rh-chat-open .sms-bar, body.no-sms-bar .sms-bar { display: none; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
	.method { grid-template-columns: repeat(3, 1fr); }
	.method li:nth-child(3)::after { display: none; }
	.foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.head-inner { min-height: 64px; gap: 12px; }
	.nav-burger {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 44px; height: 44px; cursor: pointer; order: 3;
	}
	.nav-burger span { display: block; height: 2px; background: var(--cream); border-radius: 2px; }
	.nav { order: 5; flex-basis: 100%; display: none; flex-direction: column; gap: 0; padding: 4px 0 10px; }
	.nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
	.nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--aqua); background: transparent; padding-left: 12px; }
	.nav-toggle:checked ~ .nav { display: flex; }
	.text-pill { order: 2; font-size: .85rem; padding: 8px 12px; }
	.cart-link { order: 4; }
	.hero { min-height: 0; }
	.hero-grid { grid-template-columns: 1fr; padding: 48px 0 40px; }
	.hero-panel::before { background: linear-gradient(180deg, rgba(8, 11, 13, .82) 0%, rgba(8, 11, 13, .72) 60%, rgba(8, 11, 13, .9) 100%); }
	.hero-panel { width: 100%; }
	.hero-panel img { object-position: 60% 40%; }
	.brand-line { display: none; }
	.brand-word { font-size: 1.35rem; }
	.split, .split-narrow { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr; }
	.section { padding: 48px 0; }
}

@media (max-width: 560px) {
	.method { grid-template-columns: repeat(2, 1fr); }
	.method li::after { display: none; }
	.photo-pair { grid-template-columns: 1fr; }
	.photo-strip { grid-template-columns: 1fr 1fr; }
	.form-sheet, .contact-form, .sell-form, .quote-form { padding: 18px; }
	.btn-row .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.rise { opacity: 1; transform: none; }
	.hero-copy h1::after { transform: none; }
}

@media print {
	.site-head, .site-foot, .sms-bar, .btn-row, .faq-list summary::before { display: none; }
	body { background: #fff; color: #000; font-size: 12pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}