/*
┌──────────────────────────────────────────────────────────────────────────────────┐
│                     ©2026 s james kitty grey for Patrin LLC.                     │
├──────────────────────────────────────────────────────────────────────────────────┤
│  ORGANIZATION                                                                    │
│  1. Reset                                                                        │
│  2. Design tokens (:root)                                                        │
│  3. Global                                                                       │
│  4. Typography                                                                   │
│  5. Rhythm (context-specific spacing)                                            │
│  6. Objects — buttons, close control, icons, animations                          │
│  7. Layout — grid, header & nav                                                  │
│  8. Sections — hero, services, about, faq, reviews, footer                       │
│  9. Modals — shared, contact, calendar, policy, sos                              │
│ 10. Media & container queries                                                    │
│                                                                                  │
└──────────────────────────────────────────────────────────────────────────────────┘
*/

/* 1. RESET =========================================================== */

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

/* 2. DESIGN TOKENS ==================================================== */

:root {
/* COLORS — bare RGB triplets so alpha can be composed with rgb()/rgba() */

	--color-background:			255, 254, 252;									  /* vanilla  10% */
	--color-foreground:			 49,  54,  60;									  /* carbon  100% */

	--color-action:				155,  17,  30;									  /* ruby    100% */
	--color-wayfind:			 10,  74,  50;									  /* emerald 100% */
	--color-notation:			131, 134, 138;									  /* carbon   60% */
	--color-notation-lite:		193, 195, 197;									  /* carbon   30% */
	--color-callout-bg:			245, 245, 245;									  /* carbon    5% */
	--color-focus:				220, 194, 138;									  /* tobacco  60% */

	--color-vanilla:			253, 246, 227;
	--color-sapphire:			 15,  82, 186;				/* download button on macOS sos modal */

	--color-ruby:				155,  17,  30;									  /* action color */
	--color-emerald:			 10,  74,  50;						/* accent & way finding color */
	--color-tobacco-60:			220, 194, 138;						   /* selection & focus color */

/* deprecated
	--color-carbon:				 49,  54,  60;
	--color-carbon-05:			245, 245, 245;
	--color-carbon-10:			234, 235, 236;
	--color-carbon-15:			224, 225, 226;
	--color-carbon-20:			214, 215, 216;
	--color-carbon-25:			203, 205, 206;
	--color-carbon-30:			193, 195, 197;
	--color-carbon-35:			183, 185, 187;
	--color-carbon-40:			173, 175, 177;
	--color-carbon-45:			162, 164, 167;
	--color-carbon-50:			152, 154, 158;
	--color-carbon-55:			142, 144, 148;
	--color-carbon-60:			131, 134, 138;
	--color-carbon-65:			121, 124, 128;
	--color-carbon-70:			111, 114, 119;
	--color-carbon-75:			100, 104, 109;
	--color-carbon-80:			 90,  94,  99;
	--color-carbon-85:			 80,  84,  89;
	--color-carbon-90:			 69,  74,  80;
	--color-carbon-95:			 59,  64,  70;

	--color-white:				255, 255, 255;
	--color-black:				  0,   0,   0;
	--color-black-20:			204, 204, 204;
	--color-black-40:			153, 153, 153;

	--color-licorice:			 26,  17,  16;
	--color-licorice-10:		232, 231, 231;
	--color-licorice-20:		209, 207, 207;
	--color-licorice-30:		186, 184, 183;
	--color-licorice-40:		163, 160, 159;
	--color-licorice-50:		141, 136, 136;
	--color-licorice-60:		118, 112, 112;
	--color-licorice-70:		 95,  88,  88;
	--color-licorice-80:		 72,  65,  64;
	--color-licorice-90:		 49,  41,  40;
	--color-licorice-95:		 37,  29,  28;									/* dark chocolate * /

	--color-asphalt:			 12,   4,   4;
	--color-asphalt-10:			231, 230, 230;
	--color-asphalt-20:			206, 205, 205;
	--color-asphalt-30:			182, 180, 180;
	--color-asphalt-40:			158, 155, 155;
	--color-asphalt-50:			134, 130, 130;
	--color-asphalt-60:			109, 104, 104;
	--color-asphalt-70:			 85,  79,  79;
	--color-asphalt-80:			 61,  54,  54;
	--color-asphalt-90:			 36,  29,  29;
	--color-asphalt-95			 24,  17,  17;								/* a little red/brown * /
*/

/* CORNER RADIUS */
	--radius:      0.5rem;
	--radius-sm:  0.25rem;
	--radius-pill: 9999px;

/* ANIMATION */
	--animation-primary: .5s cubic-bezier(.3, 1, .3, 1);
	--animation-fast:    .3s cubic-bezier(.7, 0, .3, 1);

/* TYPOGRAPHY */
	font-synthesis: none;
	font-size: clamp(16px, 1.39vw, 20px);	/* change to {--font-size-18: clamp(15px, 1.25vw, 18px); } */
	counter-reset: section;

/* FONT-SIZE: FLUID TYPE SCALE */
	--font-size-xxl:	clamp(43px, 5.0vw, 72px);											/* H1 */
	--font-size-xl:		clamp(36px, 4.1667vw, 60px);										/* H2 */
	--font-size-lg:		clamp(27px, 3.125vw, 45px);											/* H3 */
	--font-size-md:		clamp(19px, 2.2222vw, 32px);										/* H4 */
	--font-size-base:	1rem;
	--font-size-sm:		clamp(15px, 1.25vw, 18px);
	--font-size-xs:		clamp(14px, 1.1111vw, 16px);
	--font-size-xxs:	clamp(11px, 0.9722vw, 14px);

/* FONT-FACE */
	--font-face-display:	"Bricolage Grotesque", sans-serif;
	--font-face-body:		"Montserrat", sans-serif;
	--font-face-mono:		"Inconsolata", monospace;

/* FONT-VARIATIONS */
	--font-fv-display-hvy:  "opsz" 96, "wdth" 75, "wght" 800;							/* h1, h2 */
	--font-fv-display-bld:  "opsz" 12, "wdth" 75, "wght" 700;		 /* h4, FAQ question & marker */
	--font-fv-display-semi: "opsz" 96, "wdth" 75, "wght" 600;				   /* h3, orbit title */

/* FONT-WEIGHT */
	--font-weight-hvy:  800;
	--font-weight-bld:	700;
	--font-weight-semi: 600;
	--font-weight-med:	500;
	--font-weight-rom:	400;
	--font-weight-lght: 300;

/* FONT-STYLE */
	--font-style-norm:	normal;
	--font-style-ital:	italic;

	--font-capslock:	uppercase;

/* LINE-HEIGHT */
	--font-lh-p-loose:	  1.5;
	--font-lh-p:		  1.3;
	--font-lh-one:			1;
	--font-lh-mono-cap:	0.623;

/* TRACKING */
	--tracking-xloose:  0.75em;
	--tracking-loose:  0.075em;
	--tracking-title:  0.025em;
	--tracking-tight:  0.015em;
	--tracking-xtight:       0;

/* SPACING */
	--vspace-tight-sm:  0.5rem;
	--vspace-tight-md: 0.75rem;
	--vspace-base:        1rem;
	--vspace-base-lg:   1.5rem;
	--vspace-open:        2rem;
	--vspace-open-lg:	  2.25rem;
	--vspace-open-xl:     3rem;
	--vspace-open-xxl:    4rem;
	--vspace-section:     6rem;

	--container-inset:	4rem;
}

/* 3. GLOBAL =========================================================== */
html { overflow-x: hidden; }

body {
	font-family: var(--font-face-body);
	color: rgb(var(--color-foreground));
	background-color: rgb(var(--color-background));
	background-image: url('/img/topo.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: min(4865px, calc((100% - var(--container-inset)) * 4.223)) auto;

}

.skip-link {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.5rem;
	background: rgb(var(--color-background));
	color: rgb(var(--color-foreground));
	transform: translateY(-100%);
	transition: transform var(--animation-fast);
}
.skip-link:focus { transform: translateY(0); }

#page-content { overflow-x: hidden; }

.container {
	width: min(100% - var(--container-inset), 72rem);
	margin: 0 auto;
}

::selection  { background-color: rgba(var(--color-focus), 0.5); }
:focus-visible { outline: 2px solid rgb(var(--color-focus)); outline-offset: 2px; }

/* 4. TYPOGRAPHY ======================================================= */
h1, h2, h3, h4, #services .orbit-title-text {
	font-family: var(--font-face-display);
	font-style: var(--font-style-norm);
	letter-spacing: var(--tracking-title);
	line-height: var(--font-lh-one);
}

h1, h2 { font-variation-settings: var(--font-fv-display-hvy); }

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl);
}

h3, #services .orbit-title-text {
	font-variation-settings: var(--font-fv-display-semi);
	font-size: var(--font-size-lg);
}

h4 {
	font-variation-settings: var(--font-fv-display-bld);
	font-size: var(--font-size-md);
}

/* debug -- i believe this is no longer used
h5 { font-weight: var(--font-weight-bld); font-size: var(--font-size-24); background-color: red; }
*/

p {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-rom);
	line-height: var(--font-lh-p);
}

strong, b, .client-name { font-weight: var(--font-weight-semi); }
em, i, .dek { font-style: var(--font-style-ital);  }

a {	color: inherit; text-decoration: none; }
a:hover, a:active { color: rgb(var(--color-action)); text-decoration: none; }

code {
	font-family: var(--font-face-mono);
	font-size: var(--font-size-xs);
	padding: 0.15em 0.25em 0.25em;
	border-radius: var(--radius-sm);
	background-color: rgb(var(--color-callout-bg));
}

#faq details a,
.modal-body a:not(.button-install, .appstore-badge) {
	color: rgb(var(--color-action));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.alert      { color:rgb(var(--color-action)); }

p.eyebrow {
	font-family: var(--font-face-mono);
	color: rgb(var(--color-notation));
	text-transform: var(--font-capslock);
	letter-spacing: var(--tracking-xloose);
	line-height: var(--font-lh-mono-cap);
}

#services label, #services .dek, #services h4 { text-align: center; }

.callout {
	letter-spacing: var(--tracking-xtight);
	text-wrap: pretty;
	padding: 0.5rem 0.75rem;
	margin-top: var(--vspace-base);
	border-left: 4px solid;
	background-color: rgb(var(--color-callout-bg));
}
.callout p:first-child { margin-top: 0; }
.callout-label { font-weight: var(--font-weight-bld); margin-right: 0.5rem; }

.callout.dek { border-left: 4px solid rgb(var(--color-wayfind)); }

.callout.is-note    { border-color: rgb(var(--color-wayfind)); }
.callout.is-note .callout-label    { color: rgb(var(--color-wayfind)); }

.callout.is-warning { border-color: rgb(var(--color-action));  }
.callout.is-warning .callout-label { color: rgb(var(--color-action));  }

/* QUOTE FRAME -- Specific type formatting excepted from other site rules & patterns */
.quote-text,
.quote-text p {
	font-size: var(--font-size-sm);
	line-height: var(--font-lh-p-loose);
	letter-spacing: var(--tracking-title);
	font-style: var(--font-style-ital);
}
.quote-text { padding: 0 0.25rem; }
.quote-text p:first-of-type { margin: 0; }
.quote-attr {
	text-align: right;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-rom);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	padding: 0 0.25rem;
	margin-top: 0;
	margin-bottom: 0.75em;
}

#faq .dek { font-style: var(--font-style-rom); }
#faq summary {
	font-family: var(--font-face-display);
	font-variation-settings: var(--font-fv-display-bld);
	font-size: var(--font-size-md);
	line-height: var(--font-lh-one);
	list-style: none;
}

#footer p.column-title {
	font-family: var(--font-face-mono);
	letter-spacing: var(--tracking-xloose);
	line-height: var(--font-lh-mono-cap);
	text-transform: var(--font-capslock);
	color: rgb(var(--color-notation-lite));
}
#footer .copyright {
	font-size: var(--font-size-xs);
	text-align: center;
	white-space: nowrap;
}

h2, h3 { margin-top: 0.75em; }
p	   { margin-top: 1em;	 }
.dek   { margin-top: 0.5em;  }

.ui-pseudo-button { margin-top: var(--vspace-open-xl); }
#contact-form .ui-pseudo-button { margin-top: var(--vspace-base-lg); }

#faq .dek { margin-top: var(--vspace-base-lg); }
#faq .dek:first-of-type { margin-top: 0;  }

#footer div:is(.explore, .policies) > p { margin-top: 2.5em; }
#footer div:is(.explore, .policies) > a { display: block; margin-top: 0.375em }
#footer div:is(.explore, .policies) > a:first-of-type { margin-top: 1.5em; }
#footer .copyright { margin-top: 5rem; }

/* 5. RHYTHM =========================================================== */
/* ── WAYPOINT EYEBROWS ── */
p.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--tracking-xloose);								 /* one gap governs the whole row */
}

.eyebrow::before {
	content: "";
	flex: none;
	width: 0.75em;
	height: 0.75em;
	box-sizing: border-box;
	border: 2.25px solid currentColor;
	border-radius: var(--radius-pill);
	transition: background-color var(--animation-fast), border-color var(--animation-fast);
}
.eyebrow.is-current::before {
	border-color: rgb(var(--color-wayfind));
	background-color: rgb(var(--color-wayfind));
}

.eyebrow > .num {
	counter-increment: section;
	display: flex;
	align-items: center;
	gap: var(--tracking-xloose);
	letter-spacing: var(--tracking-xtight);
}

.eyebrow > .num::before {
	content: counter(section, decimal-leading-zero);
	letter-spacing: var(--tracking-xloose);
	margin-right: calc(var(--tracking-xloose) * -1);
}
.eyebrow > .num::after  { content: "-"; }

.eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 0;
	border-top: 2px dashed currentColor;
}

/* 6. OBJECTS ========================================================== */

/* BUTTONS */
button {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

button:disabled { opacity: 0.6; cursor: not-allowed; }

.button-fill {
	position: relative;
	display: inline-flex;
	align-self: center;

	align-items: center;
	justify-content: center;

	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;

	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-rom);
	line-height: var(--font-lh-one);

	overflow: hidden;
	max-height: 3.75rem;
	text-decoration: none;

	color: rgb(var(--color-action));

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: color var(--animation-primary);
}

.button-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgb(var(--color-action));
	pointer-events: none;
}

.button-fill:hover, .button-fill:focus-visible { color: rgb(var(--color-background)); }
.button-fill:hover  .button-fill__fill, .button-fill:focus-visible .button-fill__fill { transform: translate3d(0, 0, 0); }

.button-fill__fill {
	position: absolute;
	z-index: 0;
	display: block;
	width: 150%;
	height: 200%;
	inset-block-start: -50%;
	inset-inline-start: -25%;
	border-radius: var(--radius-pill);
	background: rgb(var(--color-action));
	transform: translate3d(0, -76%, 0);
	transition: transform var(--animation-primary);
}

.button-fill__text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    pointer-events: none;
    will-change: color;
}

/* SVGs */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* UNIFIED CLOSE CONTROL */
.close-control {
	cursor: pointer;
	position: absolute;
	top:       1rem;															  /* corner inset */
	right:     1rem;															  /* corner inset */
	width:  2.25rem;																/* tap target */
	height: 2.25rem;																/* tap target */

	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	z-index: 1;

	--close-ring: rgb(var(--color-foreground));
	--close-x:    rgb(var(--color-foreground));
	--close-disc: transparent;
}

#services .close-control { top: 0.25rem; right: 0.25rem; }

.close-control:hover,
.close-control:active {
	--close-ring: rgb(var(--color-action));
	--close-x:    rgb(var(--color-background));
	--close-disc: rgb(var(--color-action));
}

.close-control:focus-visible { outline: none; --close-ring: rgb(var(--color-focus)); }
.close-control svg { display: block; width: 1.5rem; height: 1.5rem; }

.button-fill__icon,
.nav-link__icon { width: 1.1rem; aspect-ratio: 1; }

/* QUOTE FRAME LAYOUT */
:is(.quote-open, .quote-close) { display: flex; align-items: center; }
:is(.quote-open, .quote-close) hr {
	flex: 1;
	height: 2px;
	background: rgb(var(--color-foreground));
	border: none;
}
.quote-open hr  { margin-left: 0.5rem; }
.quote-close hr { margin-right: 0.5rem; }

.quote-mark {
	display: block;
	width: 1.875rem;
	aspect-ratio: 26.1445 / 16.2539;
	flex: none;
}
.quote-mark--flip { transform: rotate(180deg); }

/* LOTTIE ANIMATIONS */
dotlottie-wc {
	width: 100%;
	height: 100%;
	display: block;
}
.animation { pointer-events: none; }

/* 7. LAYOUT =========================================================== */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); }

/* HEADER */
header { position: relative; z-index: 4; height: 6rem; }
header .nav-inner {
	height: 100%;
	align-items: center;
	border-bottom: 0.25px solid rgb(var(--color-notation));
}

.logo              { grid-column:  1 /  3; }    /* columns  1–2  */
.nav-desktop-links { grid-column:  3 / 11; }    /* columns  3–10 */
.nav-button        { grid-column: 11 / 13; }    /* columns 11–12 */

/* LOGO */
.nav-logo img {
	display: block;
	height: 3.75rem;
	width: auto;
}
.nav-desktop-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem;
	padding-right: 1rem;
}
.nav-desktop-links a,
.nav-desktop-links .nav-current {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	white-space: nowrap;
	position: relative;
}

.nav-desktop-links a::after,
.nav-desktop-links .nav-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.75rem;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--animation-fast);
}
.nav-desktop-links a:hover::after,
.nav-desktop-links a:focus-visible::after { transform: scaleX(1); }
.nav-desktop-links .nav-current { font-weight: var(--font-weight-med); cursor: default; }
.nav-desktop-links .nav-current::after {
	transform: scaleX(1);
	height: 4px;
	background-color: rgb(var(--color-wayfind));
	transition: none;
}
.nav-button { justify-self: start; padding-left: 1rem; }

/* HAMBURGER BUTTON (≤ 1024px) */
.nav-hamburger-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
}

.nav-hamburger-btn span {
	display: block;
	width: 1.375rem;
	height: 0.125rem;
	background-color: rgb(var(--color-foreground));
	border-radius: var(--radius);
	transition: opacity 0.2s, transform 0.2s;
}

.nav-open .nav-hamburger-btn span:nth-child(1) { transform: translateY(0.425rem) rotate(45deg); }
.nav-open .nav-hamburger-btn span:nth-child(2) { opacity: 0; }
.nav-open .nav-hamburger-btn span:nth-child(3) { transform: translateY(-0.425rem) rotate(-45deg); }

.nav-hamburger-menu {
	display: none;
	background-color: rgb(var(--color-background));
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--animation-fast);
}
.nav-open .nav-hamburger-menu { grid-template-rows: 1fr; }

.nav-hamburger-menu ul {
	list-style: none;
	min-height: 0;
	overflow: hidden;
}
.nav-hamburger-menu ul li::before { content: none; }
.nav-hamburger-menu li             { border-top: 0.25px solid rgb(var(--color-notation)); }
.nav-hamburger-menu li:first-child { border-top: none; }
.nav-hamburger-menu li:last-child  { border-bottom: 0.25px solid rgb(var(--color-notation)); }

.nav-hamburger-menu a {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 1rem 2rem;                     /* generous tap target */
	/* staggered entrance: each row slides down and fades as the panel opens */
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity var(--animation-primary), transform var(--animation-primary);
}
.nav-open .nav-hamburger-menu a { opacity: 1; transform: translateY(0); }
.nav-open .nav-hamburger-menu li:nth-child(2) a { transition-delay: 50ms; }
.nav-open .nav-hamburger-menu li:nth-child(3) a { transition-delay: 100ms; }
.nav-open .nav-hamburger-menu li:nth-child(4) a { transition-delay: 150ms; }

/* MAIN & SECTION */
main    { position: relative; z-index: 2;}
section { padding: var(--vspace-section) 0; }

/* 8. SECTIONS ========================================================= */

/* HERO */
#hero					 { margin-top: -0.525rem; padding: 4.5rem 0 3rem; }
[data-page="home"] #hero { margin-top: 0; padding-top: 1.7rem; }

#hero .copy							   { grid-column: 1 /  7; grid-row: 1; }
[data-page="remote"]  #hero .animation,
[data-page="studios"] #hero .animation { grid-column: 5 / 13; grid-row: 1; }
[data-page="home"]    #hero .animation { grid-column: 6 / 13; grid-row: 1; }

#hero .copy {
	position: relative;
	transform: translateY(-2rem);
	align-self: end;
}

#hero .copy .button-fill {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}

[data-page="remote"]  #hero .animation,
[data-page="studios"] #hero .animation {
	width: 100%;
	aspect-ratio: 960 / 854;
	transform: translateX(9.27%);
	align-self: start;
}

[data-page="home"] #hero .animation {
	width: 95.24%;
	aspect-ratio: 9 / 10;
	transform: translate(6.75%, -0.45%);
	align-self: start;
}

/* SERVICES */
#services .waypoint { grid-column: 1 / 13; grid-row: 1; }
#services .copy	    { grid-column: 1 / 13; grid-row: 2; }
#services .orbit    { grid-column: 1 / 13; grid-row: 3; }

/* ---- DESKTOP: RADIAL ORBIT ---- */
#services .orbit {
	container-type: inline-size;
	position: relative;
	margin-top: -5rem;
	aspect-ratio: 1 / 0.975;
}

#services .animation {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 69.44cqi;
	aspect-ratio: 1;
}

#services .orbit-title {
	position: absolute;
	left: 50%;
	top: 55%;
	cursor: pointer;
	padding: 1rem;
	max-width: 16rem;
	background-color: rgb(var(--color-background));
	border: 2px solid currentColor;
	border-radius: var(--radius);
	transform: translate(
		calc(-50% + var(--r) * cos(var(--a))),
		calc(-50% + var(--r) * sin(var(--a)))
	);
	transition: color var(--animation-fast);
}

#services .orbit-title .dek { display: block; }

#services .orbit-title:hover,
#services .orbit-title:focus-visible { color: rgb(var(--color-action)); }

#services .orbit-title::before,
#services .orbit-title::after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

#services .orbit-title::before {
	border-width: 1rem 0 1rem 2rem;
	border-color: transparent transparent transparent currentColor;
}

#services .orbit-title::after {
	border-width: 1rem 0 1rem 2rem;
	border-color: transparent transparent transparent rgb(var(--color-background));
}

#services .svc-radio { position: absolute; inset: 0; opacity: 0; pointer-events: none; outline: none; }

#services .svc-radio:focus-visible + .orbit-title {
	outline: 2px solid rgb(var(--color-action));
	outline-offset: 2px;
}

#services .card {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	width: 25rem;
	max-height: 80vh;
	max-height: 80dvh;
	padding: 2.5rem 2.5rem 3rem;
	background-color: rgb(var(--color-background));
	border-radius: var(--radius);
	border: 2px solid currentColor;
	box-shadow: 0 4px 24px rgba(var(--color-foreground), 0.5);
	pointer-events: none;
	clip-path: inset(50%);
	transition: clip-path var(--animation-fast);
}

#services .card > p {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

#services .svc-item:has(.svc-radio:checked) .card {
	clip-path: inset(-40px);
	pointer-events: auto;
	z-index: 5;
}

/* ABOUT */
#about .waypoint  { grid-column:  1 / 13; grid-row: 1; }
#about .title     { grid-column:  1 /  7; grid-row: 2; }
#about .copy      { grid-column:  1 /  7; grid-row: 3; }
#about .pullquote { grid-column:  9 / 13; grid-row: 3; }

#about .copy { position: relative; align-self: end; }

#about .brand-story { margin-top: var(--vspace-base); }
#about .founder-bio { margin-top: var(--vspace-base-lg); }

#about .pullquote {
	position: relative;
	margin-top: 3.75rem;
	align-self: start;
	transform: translateX(-2rem);
}

#about .pullquote, #reviews .tcard {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	background-color: rgb(var(--color-vanilla));
	border-radius: var(--radius);
	padding: 2rem;
}

/* FAQ */
#faq .waypoint  { grid-column:  1 / 13; grid-row: 1; }
#faq .title     { grid-column:  1 / 13; grid-row: 2; }
#faq .questions { grid-column:  6 / 13; grid-row: 3; }

[data-page="remote"]  #faq .questions,
[data-page="studios"] #faq .questions { padding: 0 4.5rem;  }
[data-page="home"]    #faq .questions { padding: 0 1.75rem; }

#faq .dek { display: flex; align-items: center; }
#faq .dek::after {
	content: "";
	flex: 1 1 auto;
	margin-left: 0.5rem;
	border-bottom: 1px solid currentColor;
}

#faq details { border-bottom: none; position: relative; }
#faq details::after {
	content: '';
	display: block;
	border-bottom: 1px solid currentColor;
}
#faq details:has(+ .dek)::after  { display: none; }
#faq details:last-of-type::after { display: none; }

/*	QUESTION */
#faq summary {
	padding: 1rem 0;
	cursor: pointer;
	user-select: none;

	display: flex;
	align-items: center;
	gap: 0.9rem;
}

/*	ANSWER	*/
#faq details div { padding: 0 2.25rem 1.25rem;	background-color: rgb(var(--color-background));}

/*	Remove native triangle in WebKit (list-style: none above covers the rest)	*/
#faq summary::-webkit-details-marker { display: none; }

/*	+/− INDICATOR	*/
#faq summary::before {
	content: '+';
	flex-shrink: 0;
	font-family:  var(--font-face-display);
	font-variation-settings: var(--font-fv-display-bld);
	font-size: var(--font-size-xl);
	line-height: 0.35;	/* Must be < summary font-size/60, but > 0.341 (actual "+" ink) */
	transform: translateY(-0.02em);
	transition: transform 0.2s ease;
}

#faq summary:hover, #faq summary:hover::before { color: rgb(var(--color-action)); text-decoration: none; }

#faq details[open] > summary::before {	content: '−';	}
#faq details div p + p,
#faq details div p + ul,
#faq details div ul + p { margin-top: 1em; }

:is(#faq, #modal-policy) ul {
	list-style: none;
	margin: 0.7rem 0;
	display: grid;
	grid-template-columns: 0.5rem minmax(0, max-content) max-content;
	column-gap: 1rem;
	row-gap: 0.125rem;
}
:is(#faq, #modal-policy) ul li         { display: contents; }
ul li::before { content: '◆'; }

/* REVIEWS */

#reviews .waypoint     { grid-column: 1 / 13; grid-row: 1; }
#reviews .title        { grid-column: 1 /  6; grid-row: 2; }
#reviews .review-cards { grid-column: 1 /  7; grid-row: 3; }

#reviews .review-cards { margin-top: var(--vspace-open); }

/* CARD STACK */
#reviews .review-stack { display: grid; }
#reviews .review-stack > .tcard { grid-area: 1 / 1; }
#reviews .tcard {
	--enter-from: 100vw;
	user-select: none;
	transform: translateX(var(--enter-from));
	z-index: 0;
	will-change: transform;
}
#reviews .tcard.s-current { transform: translateX(0);    z-index: 2; }
#reviews .tcard.s-leaving { transform: translateX(0);    z-index: 1; }
#reviews .tcard.is-animating { transition: transform 0.55s cubic-bezier(.4, 0, .2, 1); }
/* ── Progress bar (optional — see markup comment) ── */
#reviews .progress-track {
	width: 80%;
	height: 3px;
	background: rgba(var(--color-foreground), 0.2);
	border-radius: var(--radius-pill);
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	margin-inline: auto;
	overflow: hidden;
}
#reviews .progress-fill {
	height: 100%;
	background: rgb(var(--color-wayfind));
	border-radius: var(--radius-pill);
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
}

#reviews .controls-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
#reviews .dots { display: flex; gap: 1rem; align-items: center; }
#reviews .dot {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-pill);
	background: rgba(var(--color-foreground), 0.25);
	transition: background 0.2s, transform 0.2s;
}
#reviews .dot::before { content: ""; position: absolute; inset: -7px;  /* extends dot to a 24px tap target */ }
#reviews .dot.active {
	background: rgb(var(--color-wayfind));
	transform: scale(1.2);
}
#reviews .dot:hover:not(.active) { background: rgba(var(--color-foreground), 0.45); }
#reviews .playpause {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: rgba(var(--color-foreground), 0.5);
	transition: color 0.2s;
}
#reviews .playpause:hover { color: rgb(var(--color-wayfind)); }
#reviews .playpause svg { display: block; width: 100%; height: 100%; overflow: visible; }

#reviews .status-text {
	text-align: center;
	font-size: var(--font-size-xs);
	color: rgb(var(--color-notation));
	letter-spacing: var(--tracking-loose);
	min-height: 1.2em;
}

/* FOOTER */
#footer {
	padding: var(--vspace-section) 0;
	color:            rgb(var(--color-background));
	background-color: rgb(var(--color-foreground));
}

#footer .logo		  { grid-column:  1 / 13; grid-row: 1; }
#footer .footer-icons { grid-column:  1 /  7; grid-row: 2; }
#footer .explore	  { grid-column:  8 / 10; grid-row: 2; }
#footer .policies	  { grid-column: 11 / 13; grid-row: 2; }
#footer .copyright	  { grid-column:  1 / 13; grid-row: 3; }

#footer .logo { border-bottom: 0.25px solid rgb(var(--color-notation-lite)); }
#footer .footer-logo img { display: block; width: 12rem; height: auto; margin-bottom: 1.5rem; }

#footer .footer-icons {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	align-items: flex-end;
	gap: 2.5rem;
}

#footer .copyright {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: var(--tracking-xloose);
}

/* 9. MODALS */

/* MODAL: STRUCTURE
┌─ .modal-overlay ─────────────────────────────────────────────────────────────────────────────────┐
│                                                                                                  │
│               ┌─ .modal-content ─────────────────────────────────────────────────┐               │
│               │                                                               (X)│               │
│               │┌─ .modal-body ──────────────────────────────────────────────────┐│               │
│               ││  ┌─ .tab-group ─────────────────────────────────────────────┐  ││               │
│               ││  │                                                          │  ││               │
│               ││  ├── .tab-panel ────────────────────────────────────────────┤  ││               │
│               ││  │┌─ .modal-opening ───────────────────────────────────────┐│  ││               │
│               ││  ││                                                        ││  ││               │
│               ││  │├─ .modal-substance  ────────────────────────────────────┤│  ││               │
│               ││  ││                                                        ││  ││               │
│               ││  │├─ .modal-closing  ──────────────────────────────────────┤│  ││               │
│               ││  ││                                                        ││  ││               │
│               ││  │└────────────────────────────────────────────────────────┘│  ││               │
│               ││  └──────────────────────────────────────────────────────────┘  ││               │
│               │└────────────────────────────────────────────────────────────────┘│               │
│               └──────────────────────────────────────────────────────────────────┘               │
│                                                                                                  │
└──────────────────────────────────────────────────────────────────────────────────────────────────┘
*/

/* MODAL: COMMON */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color-foreground), 0.75);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.modal-content {
	position: relative;
	z-index: 101;
	width: min(45rem, 100%);									/* sets modal's width (was 50rem) */
	max-height: calc(100vh - var(--container-inset));
	max-height: calc(100dvh - var(--container-inset));
	background-color: rgb(var(--color-background));
	border-radius: var(--radius);
	transform: translateY(8px);
	transition: transform 0.2s ease;
	overflow: hidden;
}
.modal-overlay.is-open .modal-content { transform: translateY(none); }
.modal-body {
    padding: var(--vspace-open-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(100vh  - var(--container-inset) - 3.25rem);
    max-height: calc(100dvh - var(--container-inset) - 3.25rem);
}
/* MODAL TAB SELECTOR */
.tab-group {
	display: flex;
	width: max-content;
	margin-inline: auto;
	padding: 2px;
	border: 2px solid rgb(var(--color-wayfind));
	border-radius: var(--radius-pill);
}
.tab {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-rom);
	line-height: var(--font-lh-one);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
}
.tab.is-active {
	background-color: rgb(var(--color-wayfind));
	border-color: rgb(var(--color-wayfind));
	color: rgb(var(--color-background));
}
.tab-panel:focus	 { outline: none; }
.tab-panel			 { display: none; }
.tab-panel.is-active { display: block; }

/* MODAL: CONTACT & SCHEDULE */
#modal-contact .modal-content {	width: min(40rem, 100%); }	  /* narrower width than other modals */
#modal-contact p { font-size: var(--font-size-sm); }

#contact-form { margin-top: var(--vspace-base-lg); }

#contact-form label {
	font-size:      var(--font-size-xxs);
	font-weight:    var(--font-weight-bld);
	line-height:    var(--font-lh-p);
	text-transform: var(--font-capslock);
	letter-spacing: var(--tracking-loose);
}
#contact-form ::placeholder {
	font-size: var(--font-size-xs);
	color: rgb(var(--color-notation));
	font-weight: var(--font-weight-lght);
}
#modal-contact p.form-success { font-size: var(--font-size-sm); }
#modal-contact p.form-error   {
	font-size: var(--font-size-xxs);
	color: rgb(var(--color-action));
	line-height: var(--font-lh-p);
	margin-left: 0.5rem;
	margin-bottom: 0;
}

#contact-form div {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 0.875rem;
}

#contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	font-family: inherit;
	font-size: var(--font-size-xs);
	width: 100%;
	background-color: rgb(var(--color-background));
	border: 1px solid rgba(var(--color-foreground), 0.2);
	border-radius:    var(--radius);
	padding: 0.375rem 0.75rem;
	transition: border-color 0.15s ease;
}
#contact-form div:has(> input[type="checkbox"]) {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.375rem;
	padding-left: 0.5rem;
	margin-bottom: 0;
}
#contact-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	background-color: rgb(var(--color-background));
	border: 1px solid rgba(var(--color-foreground), 0.3);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
#contact-form input[type="checkbox"]:checked {
	background-color: rgb(var(--color-action));
	border-color:     rgb(var(--color-action));
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}
#contact-form input[type="checkbox"]:focus { outline: none; }
#contact-form div:has(> input[type="checkbox"]) > label {
	font-weight: var(--font-weight-rom);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-xtight);
	text-transform: none;
	color: rgba(var(--color-foreground), 0.625);
	cursor: pointer;
}

#contact-form textarea {
	resize: vertical;
	min-height: 5rem;
	line-height: var(--font-lh-p);
}
#contact-form :is(input, textarea):focus {
	outline: none;
	border-color: rgb(var(--color-tobacco-60));
}

#contact-form div:has(> input[required]) > label::after,
#contact-form div:has(> textarea[required]) > label::after {
	content: "*";
	color:rgb(var(--color-action));
	display: inline-block;
	transform: scale(1.25);
	transform-origin: left bottom;
	font-weight: var(--font-weight-rom);
	margin-left: 0.125em;
}

/* SCHEDULE TAB (CALENDLY EMBED) */
#schedule-embed { min-width: 280px; height: 720px; }
#schedule-embed iframe { display: block; width: 100%; height: 100%; }
.calendly-spinner { display: none; }

/* ================ MACOS & IOS SPLASHTOP INSTALLATION ================= */
/* DOWNLOAD BUTTONS */
#modal-sos .button-install {
	display: block;
	width: fit-content;
	font-size: var(--font-size-sm);
	text-align: center;
	background-color: rgb(var(--color-sapphire));
	color: rgb(var(--color-background));

	margin-inline: auto;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
}
#modal-sos .appstore-badge {
	display: block;
	width: fit-content;
	margin-inline: auto;
}
#modal-sos .appstore-badge img {
	display: block;
	height: 2.5rem;
	width: auto;
}

.kb {
	letter-spacing: var(--tracking-xtight);
	text-wrap: pretty;
	padding-left: 1.375rem;
}

.kb > li {
	margin-top: var(--vspace-open-xl);								 /* vspace above each kb step */
	padding-right: 1.375rem;
}
.kb > li:first-of-type { margin-top: var(--vspace-open-xxl); }

.kb p { margin-top: 0.625em; }

/* SCREENSHOTS */
.kb img { margin-top: 0.5em; }
.kb img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}
.kb img.size-600 { width: 30rem; }
.kb img.size-400 { width: 20rem; }
.kb img.size-360 { width: 18rem; }

.kb ul   { padding-left: 1.125rem; list-style: none; }
.kb ul li { margin-top: 0.5em; font-size: var(--font-size-sm); }
.kb ul li::before {
	display: inline-block;
	width: 1.125rem;
	margin-left: -1.125rem;
}

/* PRIVACY POLICY, DATA HANDLING POLICY, & TERMS OF ENGAGEMENT */
#modal-policy p { margin-top: 0.75em; }
#modal-policy ol { margin: 0.7rem 1.25rem; }
#modal-policy ol li { margin-top: 0.75em;}

/* 10. MEDIA & CONTAINER QUERIES */

@media (prefers-reduced-motion: reduce) {
	.nav-desktop-links a::after { transition: none; }	  /* underline: on/off, no wipe */
	.nav-hamburger-menu, .nav-hamburger-menu a { transition: none; }
	#reviews .tcard.is-animating { transition: none; }	   /* jump-cut instead of slide */
	.eyebrow::before { transition: none; }				   /* marker fills instantly */
	.modal-content { transition: none; }
}

/* Tablet 820–1023 */
@media (max-width: 63.9375rem) {
	:root                           { --vspace-section: 4rem; --container-inset: 3rem; }
	header                          { height: auto; }
	header .nav-inner               { min-height: 6rem; }
	.nav-desktop-links              { display: none; }
	.nav-hamburger-btn              { display: flex; }
	.nav-hamburger-menu             { display: grid; }

	header .nav-inner > *           { padding-inline: 0; }
	.logo                           { grid-column: 1 / 4; }
	.nav-hamburger-btn              { grid-column: 12 / 13; justify-self: end; }

	.nav-button                     { display: none; }
	.nav-hamburger-menu ul          {
		width: min(100% - var(--container-inset), 72rem);
		margin: 0 auto;
	}
	.button-fill                    { color: rgb(var(--color-background)); }
	.button-fill .button-fill__fill { transform: translate3d(0, 0, 0) !important; }

	#hero                                  { margin-top: 0; padding:  4rem  0; }
	[data-page="home"] #hero               { margin-top: 0; padding-top: 4rem; }
	#hero .copy                            { transform: translateY(0); align-self: start; }
	[data-page="remote"] #hero .animation,
	[data-page="studios"] #hero .animation { transform: translateX(9.27%); }
	[data-page="home"] #hero .animation    { transform: translate(6.75%, 0); }

	#services .copy	                       { grid-column: 1 / 13; grid-row: 1; }
	#services .orbit                       { grid-column: 1 / 13; grid-row: 2; }
	#services .orbit-title                 { padding: 0.725rem; max-width: 12rem; }

	#about .title                          { grid-column:  1 / 13; grid-row: 1; }
	#about .copy                           { grid-column:  1 /  7; grid-row: 2; }
	#about .pullquote                      { grid-column:  7 / 13; grid-row: 2; }
	#about .copy                           { margin-right: 1rem; }
	#about .pullquote                      { margin-top:   3rem; margin-left: 1rem; }

	#faq .title                            { grid-column: 1 / 13; grid-row: 1; }
	#faq .questions                        { grid-column: 6 / 13; grid-row: 2; }
	#faq .questions                        { margin-top:   1rem; }

	#reviews .title                        { grid-column:  1 / 13; grid-row: 1; }
	#reviews .review-cards                 { grid-column: 1 /  10; grid-row: 2; }

	#footer .footer-icons                  { grid-column:  1 /  6; grid-row: 2; }
	#footer .explore	                   { grid-column:  7 /  9; grid-row: 2; }
	#footer .policies	                   { grid-column: 10 / 13; grid-row: 2; }
	#footer .copyright	                   { grid-column:  1 / 13; grid-row: 3; }

	#footer .copyright                     { margin-top: 2.5rem; transform: scale(0.9); }

	#footer a { text-decoration: underline; text-underline-offset: 0.15em;	}
	.modal-overlay { padding: 1.5rem; }
	.modal-body { padding: 2rem; }

}

/* Phone ≤ 819 — this query REPLACES the current 33.75rem one */
/* @media (max-width: 51.1875rem) { fucking claude. */
@media (max-width: 45rem) {
	:root {
		--vspace-section:     3rem;			/* 48px */
		--container-inset:   3rem;
	}

	body { 	background-image: none; }

	p.eyebrow { letter-spacing: 0.55em; }   /* this was set to keep eyebrows from wrapping on mobile, i've since shortened the longest eyebrow, may not be needed */

 	#hero .animation { display: none; }
	#hero .copy						       { grid-column: 1 / 13; grid-row: 1; }

	#services .orbit { aspect-ratio: auto; display: block;	margin-top: var(--vspace-open); }
	#services .animation, #services .orbit-title, #services .close-control { display: none; }

	#services .card {
		position: static;
		transform: none;
		width: auto;
		max-height: none;
		padding: 0;
		margin: 0 0 var(--vspace-open);
		background: none;
		border: none;
		outline: none;
		box-shadow: none;
		clip-path: none;
		pointer-events: auto;
	}

	#services .card > p { overflow: visible; }
	#services .card h4 { text-align: left; }

	#about .title                          { grid-column:  1 / 13; grid-row: 1; }
	#about .copy                           { grid-column:  1 / 13; grid-row: 2; }
	#about .pullquote                      { grid-column:  1 / 13; grid-row: 3; }
	#about .copy                           { margin: 0rem; }
	#about .pullquote                      { margin-top: var(--vspace-open); margin-left: 0; }

	#faq .title                            { grid-column:  1 / 13; grid-row: 1; }
	#faq .questions                        { grid-column:  1 / 13; grid-row: 2; }
	#faq .questions                        { margin-top:  var(--vspace-base); }

	#reviews .title                        { grid-column:  1 / 13; grid-row: 1; }
	#reviews .review-cards                 { grid-column:  1 / 13; grid-row: 2; }

	#footer .explore	                   { grid-column:  1 /  6; grid-row: 2; }
	#footer .policies	                   { grid-column:  7 / 13; grid-row: 2; }
	#footer .footer-icons                  { grid-column:  1 / 13; grid-row: 3; }
	#footer .copyright	                   { grid-column:  1 / 13; grid-row: 4; }

	#footer .footer-icons                  { margin-top:  var(--vspace-open); }
	#footer .copyright                     { transform: scale(0.95); }

	.modal-overlay { padding: 0.25rem; }
	.modal-body { padding: 1.5rem}
}
/*
┌─ Assignment map ───────────────────────────────────────────────────────────────────────┐
│                                                                                        │
│  Section   Desktop       Tablet 820–1023                 Phone ≤819                    │
├────────────────────────────────────────────────────────────────────────────────────────┤
│  Header    3|6|3         logo + hamburger                logo + hamburger              │
│                                                                                        │
│  Hero      6|6 ovrlp     copy 1–7 r1;                    copy 12; animation drop       │
│                          animation 5-13/6-13 r1                                        │
│                                                                                        │
│  Services  12 orbit      12 orbit retained -             card grid, single column      │
│                          scale animation w/ orbit                                      │
│                                                                                        │
│  About     6|2|4         6:6 side x side (~42-ch)        copy 12 r1; quote 12 r2       │
│                          or copy 1–10 r1                 stacked                       │
│                          quote 3–11 r2 stacked                                         │
│                                                                                        │
│  FAQ       5|1|6         title 12 row 1;                 title 12 r1; questions 12 r2  │
│                          questions 3–13 r2                                             │
│                                                                                        │
│  Reviews   6|6           title 1–6; cards 1–9 (~58-ch)   title 12 r1; cards 12 r2      │
│                                                                                        │
│  Footer    logo 12 r1    logo 12 r1                      logo 12 r1                    │
│            6|1|2|1|2 r2  icons 12 r2                     icons 12 r2                   │
│            (c) 12 r3     explr 1–7 | pols 7–13 r3        explr 1–7 | pols 7–13 r3      │
│                          copyright 12 r4                 copyright 12 r4               │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘
*/