/*
	JonoKeane, LLC: site layer loaded after main.css (which is the HTML5 UP
	"Spectral" base). Everything here overrides that base, so main.css and
	assets/sass stay untouched.

	Direction: warm, founder-led. Fraunces for headings (sentence case, no
	tracking), Open Sans for text, ink + gold kept from the existing brand,
	Jono's portrait in the first viewport.
*/

:root {
	--ink: #1c1f26;
	--ink-warm: #17140f;
	--gold: #c9a84c;
	--gold-bright: #ddc06a;
	--gold-text: #7a5f16;      /* gold used as text on light backgrounds: 5.3:1 on paper */
	--on-gold: #1c1f26;        /* 7.2:1 on --gold */
	--on-gold-soft: #2b2414;   /* 9:1 on --gold */
	--paper: #f5f1e8;
	--cream: #fbf7ee;
	--muted-on-paper: #5f636b; /* 5.5:1 on paper */
	--display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* Base type ------------------------------------------------------------ */

body, input, select, textarea {
	letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
header.major h2, header.major h3,
.spotlight .content h2, #cta h2, #banner h1 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.15;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }

/* Accessibility --------------------------------------------------------- */

.skip-link {
	background: var(--ink);
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 0.9rem;
	left: 1rem;
	letter-spacing: 0.02em;
	padding: 0.75rem 1.25rem;
	position: absolute;
	top: -5rem;
	z-index: 20000;
}
.skip-link:focus {
	top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	box-shadow: 0 0 0 2px var(--ink) !important;
	outline: 3px solid var(--gold) !important;
	outline-offset: 2px !important;
}

.button,
input[type=submit],
input[type=button],
input[type=reset],
button.button {
	min-height: 2.75rem;
}

.spotlight .content p a {
	display: inline-block;
	padding: 0.75em 0;
}

#footer .icons a {
	align-items: center;
	color: rgba(255, 255, 255, 0.75);
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
}
#footer .icons a:hover {
	color: #fff;
}
#footer .copyright {
	color: rgba(255, 255, 255, 0.75);
}
#footer .copyright a {
	display: inline-block;
	padding: 1.1em 0.4em;
}
#footer .copyright li {
	border-left-color: rgba(255, 255, 255, 0.4);
	line-height: 1;
}

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

/* Text on gold: ink, never white ---------------------------------------- */

.wrapper.style1,
.wrapper.style1 strong, .wrapper.style1 b,
.wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4,
.wrapper.style1 label {
	color: var(--on-gold);
}
.wrapper.style1 header p,
.wrapper.style1 header.major p,
.stats .stat-label {
	color: var(--on-gold-soft);
}
.stats .stat-number {
	color: var(--on-gold);
	font-family: var(--display);
	font-weight: 500;
}
.button.primary:hover,
button.primary:hover,
input[type=submit].primary:hover {
	background-color: var(--gold) !important;
	color: var(--on-gold) !important;
}
#menu,
#menu a,
#menu .close {
	color: var(--on-gold);
}
.zoom-icon {
	color: var(--on-gold);
}
.accordion-plusminus:before {
	color: var(--on-gold);
}

/* Labels and placeholders on paper -------------------------------------- */

#contact-page .contact-details .contact-label,
#contact-page .contact-form-card label {
	color: var(--muted-on-paper);
}
#contact-page .contact-form-card input::placeholder,
#contact-page .contact-form-card textarea::placeholder {
	color: #6b6f78 !important;
}
#contact-page .contact-form-card input::-webkit-input-placeholder,
#contact-page .contact-form-card textarea::-webkit-input-placeholder {
	color: #6b6f78 !important;
}
#contact-page .contact-form-card input::-moz-placeholder,
#contact-page .contact-form-card textarea::-moz-placeholder {
	color: #6b6f78 !important;
}

/* Header: logo is always visible, including over the hero ---------------- */

#header.alt .site-title {
	opacity: 1;
	pointer-events: auto;
}

/* Hero ------------------------------------------------------------------- */

#banner {
	height: auto;
	min-height: max(100vh, 36em);
	text-align: left;
}
#banner:after {
	display: none;
}
#banner .banner-video-bg .banner-video-overlay {
	background: linear-gradient(90deg, rgba(23, 20, 15, 0.84) 0%, rgba(23, 20, 15, 0.6) 46%, rgba(23, 20, 15, 0.22) 100%);
}
#banner > .inner.hero {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	margin: 0 auto;
	max-width: 76rem;
	padding: 7rem 3rem 6rem;
	width: 100%;
}
#banner h1 {
	color: var(--cream);
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin: 0 0 0.5em;
	max-width: 16em;
}
#banner .hero-lead {
	color: rgba(251, 247, 238, 0.9);
	font-size: 1.15rem;
	line-height: 1.6;
	margin: 0 0 2rem;
	max-width: 32rem;
}
#banner .actions {
	justify-content: flex-start;
	margin: 0;
}
#banner .button.primary {
	background-color: var(--gold);
	color: var(--on-gold) !important;
}
#banner .button.primary:hover {
	background-color: var(--gold-bright) !important;
}
#banner .more {
	transition-delay: 0.4s;
}

.hero-portrait {
	isolation: isolate;
	justify-self: center;
	margin: 0;
	position: relative;
	width: min(100%, 24rem);
}
.hero-portrait-frame {
	isolation: isolate;
	position: relative;
}
.hero-portrait-frame:before {
	border: 1px solid rgba(201, 168, 76, 0.8);
	border-radius: 3px;
	bottom: -1.1rem;
	content: "";
	left: 1.1rem;
	position: absolute;
	right: -1.1rem;
	top: 1.1rem;
	z-index: -1;
}
.hero-portrait img {
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	box-shadow: 0 1.75rem 3rem -1rem rgba(0, 0, 0, 0.65), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 50% 18%;
	width: 100%;
}
.hero-portrait figcaption {
	color: rgba(251, 247, 238, 0.85);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	margin-top: 2.3rem;
}
.hero-portrait figcaption strong {
	color: var(--cream);
	display: block;
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 0;
}

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.hero-copy {
	animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-portrait {
	animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@media screen and (max-width: 980px) {
	#banner > .inner.hero {
		gap: 3rem;
		grid-template-columns: 1fr;
		padding: 6.5rem 1.5rem 4rem;
	}
	.hero-portrait {
		justify-self: start;
		margin-right: 1.1rem;
		width: min(100%, 18rem);
	}
}
@media screen and (max-width: 736px) {
	#banner {
		background-color: var(--ink-warm);
		background-image: linear-gradient(rgba(23, 20, 15, 0.7), rgba(23, 20, 15, 0.7)), url("../../images/banner.jpg");
		background-position: center;
		background-size: cover;
		padding: 0;
	}
	#banner h1 {
		font-size: clamp(2.1rem, 9vw, 2.75rem);
	}
	#banner .hero-lead {
		font-size: 1.05rem;
	}
}

/* Follow-ups from the contrast and tap-target scan ------------------------- */

#menu .has-submenu .submenu > li > a {
	color: var(--on-gold-soft) !important;
}

#contact-page h2 em {
	color: var(--gold-text) !important;
}

#footer .copyright a {
	align-items: center;
	display: inline-flex;
	min-height: 2.75rem;
	padding: 0 0.4em;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
select {
	min-height: 2.75rem;
}

#menu > ul > li > a,
#menu .has-submenu .submenu > li > a {
	align-items: center;
	display: flex;
	min-height: 2.75rem;
}

#menu .close {
	filter: brightness(0);
}

/* Motion icons: "Your Company's Needs" ------------------------------------- */
/* Each icon has its own small gesture. service-icons.js adds .is-playing when
   a card is hovered or keyboard-focused; icons are otherwise still. */

#three .accordion-icon:before {
	display: inline-block;
	transform-origin: 50% 60%;
}
#three .accordion-icon.is-playing:before {
	animation: var(--ico-motion) var(--ico-time, 0.9s) cubic-bezier(0.16, 1, 0.3, 1) both;
}

#three .fa-video          { --ico-motion: ico-rec;    }
#three .fa-lightbulb      { --ico-motion: ico-glow;   --ico-time: 1.1s; }
#three .fa-laptop-code    { --ico-motion: ico-type;   }
#three .fa-envelope-open-text { --ico-motion: ico-mail; }
#three .fa-chart-line     { --ico-motion: ico-chart;  --ico-time: 1s; }
#three .fa-palette        { --ico-motion: ico-swirl;  --ico-time: 1s; }
#three .accordion-icon.fa-search { --ico-motion: ico-scan; --ico-time: 1s; }
#three .fa-ad             { --ico-motion: ico-shout;  --ico-time: 0.7s; }
#three .fa-network-wired  { --ico-motion: ico-link;   --ico-time: 1s; }

@keyframes ico-rec {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.25); }
	50%  { transform: scale(0.94); }
	72%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@keyframes ico-glow {
	0%   { filter: drop-shadow(0 0 0 rgba(201, 168, 76, 0)); transform: scale(1); }
	30%  { filter: drop-shadow(0 0 9px rgba(201, 168, 76, 1)); transform: scale(1.18); }
	50%  { filter: drop-shadow(0 0 3px rgba(201, 168, 76, 0.6)); transform: scale(1.06); }
	70%  { filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.95)); transform: scale(1.14); }
	100% { filter: drop-shadow(0 0 0 rgba(201, 168, 76, 0)); transform: scale(1); }
}
@keyframes ico-type {
	0%   { transform: translateY(0); }
	18%  { transform: translateY(-3px) skewX(-6deg); }
	36%  { transform: translateY(0); }
	54%  { transform: translateY(-2px) skewX(5deg); }
	72%  { transform: translateY(0); }
	100% { transform: translateY(0) skewX(0); }
}
@keyframes ico-mail {
	0%   { transform: translateY(0) rotate(0); }
	35%  { transform: translateY(-5px) rotate(-10deg); }
	65%  { transform: translateY(-1px) rotate(5deg); }
	100% { transform: translateY(0) rotate(0); }
}
@keyframes ico-chart {
	0%   { opacity: 0.35; transform: scale(0.55, 0.35); transform-origin: 0 100%; }
	60%  { opacity: 1; transform: scale(1.1, 1.08); transform-origin: 0 100%; }
	100% { opacity: 1; transform: scale(1); transform-origin: 0 100%; }
}
@keyframes ico-swirl {
	0%   { transform: rotate(0); }
	30%  { transform: rotate(-20deg) scale(1.08); }
	62%  { transform: rotate(18deg) scale(1.08); }
	82%  { transform: rotate(-6deg); }
	100% { transform: rotate(0); }
}
@keyframes ico-scan {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(4px, -3px) scale(1.1); }
	50%  { transform: translate(0, -6px) scale(1.1); }
	75%  { transform: translate(-4px, -3px) scale(1.1); }
	100% { transform: translate(0, 0); }
}
@keyframes ico-shout {
	0%, 100% { transform: rotate(0) scale(1); }
	15%  { transform: rotate(-12deg) scale(1.12); }
	35%  { transform: rotate(10deg) scale(1.12); }
	55%  { transform: rotate(-8deg) scale(1.08); }
	75%  { transform: rotate(5deg); }
}
@keyframes ico-link {
	0%   { transform: scale(1) rotate(0); }
	35%  { transform: scale(1.2) rotate(8deg); }
	65%  { transform: scale(0.94) rotate(-4deg); }
	100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
	#three .accordion-icon.is-playing:before {
		animation: none;
	}
}

#menu .menu-cta > a {
	justify-content: center;
	padding-left: 0.225em; /* offsets the trailing letter-spacing so the ink is centred */
	text-align: center;
}

#footer .footer-logo a {
	border-bottom: 0;
	text-decoration: none;
}


/* Polish pass ---------------------------------------------------------------- */

/* Inner-page banners: a real headline, a readable measure, calmer tagline */
#main > header h1,
#main > header h2 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 0.4em;
}
#main > header p {
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	margin-left: auto;
	margin-right: auto;
	max-width: 46rem;
}
#main > header p.hero-lead {
	font-size: 1.1rem;
	letter-spacing: 0.01em;
	line-height: 1.6;
	max-width: 44rem;
}

/* Headings retagged h3 -> h2 for outline order keep their old size */
.wrapper.style5 .inner > h2,
#consultation-page .consultation-steps h2 {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	margin-bottom: 0.5em;
}

/* Thank-you page: a way forward instead of an empty band */
#thanks-page {
	background: var(--ink);
	padding: 4.5em 0 5em;
	text-align: center;
}
#thanks-page .actions {
	justify-content: center;
	margin: 0;
}

/* Reserve image space from the width/height attributes without fighting
   any component that sets its own height */
:where(img[width][height]) {
	height: auto;
}

/* Gutter for text blocks inside full-bleed "alt" sections on small screens
   (the spotlight rows stay edge to edge) */
@media screen and (max-width: 980px) {
	.wrapper.alt > .inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}