/* ==========================================================================
   YardOS — values copied 1:1 from Figma "Oxalis Visual Guidelines R1" ›
   YARDOS Website › "2.0 - YardOS - 1512px x 5636px" (4595:12947).
   Desktop design width 1512px; content column 1155px (page margin 178.5px).
   ========================================================================== */

@font-face {
	font-family: 'Tenez';
	src: url('../fonts/tenez-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Figma variables */
	--text-primary: #13252a;          /* text/primary (light) */
	--text-primary-dark: #f3f4f4;     /* text/primary (dark) */
	--text-secondary-dark: #899294;   /* text/secondary (footer subheads) */
	--gull-grey: #f3f4f4;             /* page background + nav items + tags */
	--card: #eceeee;                  /* card / value-box fill */
	--border-primary: #717c7f;        /* border/primary */
	--nav-bar: #2b3b3f;
	--clearwater-50: #e6fbfb;
	--clearwater-200: #9aefef;
	--clearwater-300: #68e8e8;
	--clearwater-400: #35e0e0;
	--clearwater-500: #03d8d8;
	--clearwater-600: #02adad;
	--icon-ring: #97e9e0;             /* icon/clearwater/stroke-color (light) */
	--icon-ring-dark: #015656;        /* icon/clearwater/stroke-color (dark) */
	--surface-dark: #13252a;          /* surface/page-primary (dark) */
	--surface-accent-dark: #1f3035;   /* surface/accent-secondary, surface/button/default */
	--cta-text: #28261f;              /* surface/button/accent-hover */

	--font-display: 'Tenez', Georgia, serif;
	--font-text: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--frame: 1512px;
	--col: 1155px;
	--gutter: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--gull-grey);
	color: var(--text-primary);
	font-family: var(--font-text);
	font-weight: 300;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--clearwater-500); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--clearwater-500); outline-offset: 2px; }

.yd-skip {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 12px 16px; background: var(--clearwater-500); color: var(--text-primary);
	font: 600 16px/1 var(--font-text);
}
.yd-skip:focus { top: 16px; }

.yd-wrap {
	width: min(var(--col), calc(100% - 2 * var(--gutter)));
	margin-inline: auto;
}

/* ---------- Type (Figma text styles) ---------- */
.yd-h1 {            /* Desktop/Heading/H1 */
	font: 400 68px/1.05 var(--font-display);
	letter-spacing: -0.02em;
}
.yd-h2 {            /* Desktop/Heading/H2 */
	font: 400 46px/1.05 var(--font-display);
}
.yd-h2--cap { text-transform: capitalize; }
.yd-h4 {            /* Desktop/Heading/H4 */
	font: 600 22px/1.2 var(--font-text);
	letter-spacing: -0.02em;
}
.yd-body {          /* Desktop/Body/Default */
	font: 300 18px/1.6 var(--font-text);
}
.yd-body-card {     /* Desktop/Body/Card */
	font: 300 14px/21px var(--font-text);
}

/* ---------- Eyebrow (global-eyebrow) ---------- */
.yd-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.yd-eyebrow__label {  /* Desktop/Label/Eyebrow */
	font: 300 16px/1 var(--font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.yd-eyebrow__mark {
	display: inline-grid;
	grid-template-columns: repeat(3, 4px);
	grid-template-rows: repeat(3, 4px);
	gap: 1px;
}
.yd-eyebrow__mark span { background: var(--icon-ring); }
.yd-eyebrow__mark span:nth-child(5) { background: var(--clearwater-500); }
.yd-eyebrow__mark--solid span { background: var(--clearwater-500); }
.yd-eyebrow__mark--dark span { background: var(--icon-ring-dark); }

/* ---------- Fancy stroke ---------- */
.yd-stroke { display: flex; align-items: center; height: 2px; width: 100%; }
.yd-stroke span:nth-child(odd) { flex: 0 0 24px; height: 100%; background: var(--text-primary); }
.yd-stroke span:nth-child(2) { flex: 1 1 0; height: 100%; background: var(--text-primary); opacity: 0.2; }
.yd-stroke--hero span:nth-child(2) { opacity: 0.25; }
.yd-stroke--spacer { height: 169px; padding: 83.5px 0; }  /* fancy-stroke-spacer: 169 tall, 2px rule centred */
.yd-stroke--spacer span { height: 2px; }
.yd-stroke--dark span:nth-child(odd),
.yd-stroke--dark span:nth-child(2) { background: var(--text-primary-dark); }
.yd-stroke--dark-top { height: 160px; padding: 79px 0; }
.yd-stroke--dark-bottom { height: 108px; padding: 53px 0; }
.yd-stroke--dark span { height: 2px; }

/* ---------- Buttons (button 239:32130) ---------- */
.yd-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 12px 16px;
	border: 0;                                          /* reset the <button> UA border */
	box-shadow: inset 0 0 0 1px var(--clearwater-500);   /* Figma inside stroke */
	color: var(--text-primary);
	cursor: pointer;
	font: inherit;
	transition: background-color 160ms ease, opacity 160ms ease;
}
.yd-btn__label {    /* Desktop/Button/Defaut */
	font: 600 16px/normal var(--font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.yd-btn--primary { background: var(--clearwater-500); }
.yd-btn--primary:hover { background: var(--clearwater-600); box-shadow: inset 0 0 0 1px var(--clearwater-600); }
.yd-btn--secondary { background: var(--clearwater-50); }
.yd-btn--secondary:hover { opacity: 0.72; }
.yd-btn--dark { background: var(--surface-accent-dark); color: var(--text-primary-dark); }
.yd-btn--dark:hover { opacity: 0.72; }

/* 6×12 slot; the SVG is 7.708×13.132 offset by -0.577px (Figma inset -4.81% / -9.61%) */
.yd-btn__chevron { position: relative; flex: 0 0 6px; width: 6px; height: 12px; }
.yd-btn__chevron img { position: absolute; left: -0.577px; top: -0.577px; width: 7.708px; height: 13.132px; max-width: none; }

/* 10px dot with a 4px outside ring (18px visual), layout box stays 10px */
.yd-btn__dot { position: relative; flex: 0 0 10px; width: 10px; height: 10px; }
.yd-btn__dot::before {
	content: ''; position: absolute; inset: -4px;
	background: var(--clearwater-500);
	border: 4px solid var(--icon-ring);
	border-radius: 50px;
}
.yd-btn__dot--dark::before { border-color: var(--icon-ring-dark); }

/* ==========================================================================
   NAV (4595:12949) — x 299, y 54 on the 1512 frame
   ========================================================================== */
.yd-nav {
	position: absolute;
	z-index: 10;
	top: 54px;
	left: calc(50% - 475.75px);   /* centred: Figma nav 914 wide + 37.5 for the wider YARDOS logo */
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.yd-nav__group { display: flex; align-items: center; gap: 2px; height: 48px; }
.yd-nav__bar { display: block; flex: 0 0 2px; width: 2px; height: 48px; background: var(--nav-bar); }
.yd-nav__logo { display: flex; align-items: center; height: 100%; padding: 10px 32px; }
.yd-nav__logo img { height: 38px; width: auto; }   /* YARDOS-aqua-light at Figma in-use size 157.5×38 (4659:4701) */
.yd-nav__item {     /* W-Top Nav */
	display: flex; align-items: center;
	height: 48px; padding: 12px 32px;
	background: var(--gull-grey);
	font: 300 14px/normal var(--font-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 160ms ease;
}
.yd-nav__item:hover { background: var(--card); }
.yd-nav__cta {      /* W-Button */
	display: flex; align-items: center;
	height: 100%; padding: 12px 32px;
	background: var(--clearwater-500);
	color: var(--cta-text);
	font: 600 16px/normal var(--font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 160ms ease;
}
.yd-nav__cta:hover { background: var(--clearwater-600); }

/* ==========================================================================
   HERO
   ========================================================================== */
.yd-page { position: relative; }

.yd-hero-bg {
	position: absolute;
	inset: 0 0 auto 0;
	height: 992px;               /* texture node 1538×1007 at y -15, clipped to the frame */
	pointer-events: none;
	overflow: hidden;
}
.yd-hero-bg__texture {
	position: absolute; inset: 0;
	background: url('../img/hero-texture.png') center top / max(var(--frame), 100%) 992px no-repeat;
}
.yd-hero-bg__frame {
	position: absolute; top: 0; left: 50%;
	width: var(--frame); height: 992px;
	margin-left: calc(var(--frame) / -2);
}
.yd-hero-bg__gulls { position: absolute; left: 769px; top: 203px; width: 684px; height: 538px; z-index: 1; object-fit: cover; }
.yd-hero-bg__dots  { position: absolute; left: 632px; top: -22px; width: 892px; height: 852px; z-index: 2; overflow: hidden; }
.yd-hero-bg__dots img { position: absolute; left: 0; top: -0.03%; width: 100.01%; height: 104.14%; max-width: none; }

.yd-hero { position: relative; z-index: 3; height: 858px; }
.yd-hero__lockup {
	position: absolute;
	top: 224px;
	left: 2.5px;                 /* lockup x 181 vs column x 178.5 */
	width: 563px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.yd-hero__eyebrow { display: flex; align-items: center; gap: 8px; width: 451px; }
.yd-hero__eyebrow-icon { display: flex; align-items: center; padding: 0 4px; }
.yd-hero__eyebrow-icon span { position: relative; width: 8px; height: 8px; }
.yd-hero__eyebrow-icon span::before {
	content: ''; position: absolute; inset: -4px;
	background: var(--clearwater-500);
	border: 4px solid var(--icon-ring);
}
.yd-hero .yd-h1 { width: 100%; }

/* ==========================================================================
   BODY SECTIONS (Frame 2041 — 1155 wide at x 178.5)
   ========================================================================== */
.yd-body-sections { position: relative; z-index: 3; }

.yd-section { display: flex; flex-direction: column; gap: 32px; }
.yd-section__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.yd-section__head .yd-h2,
.yd-section__head .yd-body { width: 100%; }

/* ---------- Origin ---------- */
.yd-origin { display: flex; height: 618px; }
.yd-origin__card {
	flex: 1 1 50%;
	min-width: 0;
	margin-right: -1px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: 24px 32px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-origin__break { display: block; }
.yd-origin__copy p + p { margin-top: 16px; }
.yd-origin__shot { position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; }
.yd-origin__shot img {
	position: absolute;
	left: -25.92%; top: -2.53%;
	width: 263.08%; height: 152.89%;
	max-width: none;
}

/* ---------- Platform value boxes ---------- */
.yd-values { display: flex; align-items: stretch; }
.yd-value {
	flex: 1 0 0;
	min-width: 0;
	margin-right: -1px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	padding: 24px 16px 24px 24px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-value:last-child { margin-right: 0; }
.yd-value__block { flex: 0 0 20px; width: 20px; height: 20px; }
.yd-value__inner { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.yd-value__head { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.yd-value__rule { position: relative; height: 0; width: 100%; }
.yd-value__rule::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border-primary); }

/* ---------- Stats ---------- */
.yd-stats { display: flex; justify-content: center; gap: 59px; text-align: center; }
.yd-stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.yd-stat__num {     /* Stat Number */
	font: 400 77px/1.05 var(--font-display);
	letter-spacing: -0.02em;
	color: var(--clearwater-600);
}
.yd-stat__label {   /* Desktop/Body/Large */
	font: 300 24px/1.6 var(--font-text);
}

/* ---------- Solutions ---------- */
.yd-solutions { display: flex; flex-direction: column; }
.yd-sol { display: flex; align-items: flex-start; }
.yd-sol:first-child { margin-bottom: -1px; }
.yd-sol + .yd-sol { background: var(--card); }
.yd-sol__num {
	flex: 0 0 54px; width: 54px; height: 54px;
	margin-right: -1px;
	display: flex; flex-direction: column; justify-content: center;
	padding: 8px 10px;
	background: var(--clearwater-400);
	box-shadow: inset 0 0 0 1px var(--border-primary);
	font: 600 22px/1.2 var(--font-text);
	letter-spacing: -0.02em;
	text-align: center;
}
.yd-sol__card {
	flex: 1 0 0; min-width: 0;
	display: flex; align-items: flex-start; gap: 16px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-sol__body {
	flex: 1 0 0; min-width: 0;
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	padding: 24px 0 20px 24px;
}
.yd-sol__meta { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.yd-sol__eyebrow {  /* Desktop/Label/Eyebrow-small */
	font: 300 14px/1.05 var(--font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.yd-sol__tags { display: flex; flex-wrap: wrap; align-items: center; align-content: center; }
.yd-sol__tags li {  /* Desktop/Label/Tag */
	margin-right: -1px;
	display: flex; align-items: center; justify-content: center;
	padding: 8px 16px;
	background: var(--gull-grey);
	box-shadow: inset 0 0 0 1px var(--border-primary);
	font: 300 14px/18px var(--font-text);
	white-space: nowrap;
}
.yd-sol__tags li:last-child { margin-right: 0; }
.yd-sol__type {
	align-self: flex-start;
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	background: var(--clearwater-400);
	box-shadow: inset 0 0 0 1px var(--border-primary);
	font: 600 13px/19.5px var(--font-text);   /* Desktop/Label/Solution-Type */
	white-space: nowrap;
}
.yd-sol__type img { width: 8px; height: 9px; }

/* ==========================================================================
   V2 HOMEPAGE (ME-2045 site copy) — sections fitted from the Figma components
   ========================================================================== */
.yd-lede { font-style: italic; }
.yd-h3 { font: 400 32px/1.1 var(--font-display); }   /* between H2 46 and H4 22, Tenez */
.yd-link { text-decoration: underline; text-underline-offset: 3px; }
.yd-link:hover { color: var(--clearwater-600); }

/* Hero: the V2 H1 runs ~3× the Figma headline, so the lockup is wider and the type a step down */
.yd-page--v2 .yd-hero__lockup { top: 200px; width: 600px; }
.yd-page--v2 .yd-hero .yd-h1 { font-size: 52px; }

/* Origin card that grows with two headed blocks of copy */
.yd-origin--auto { height: auto; min-height: 618px; }
.yd-origin--auto .yd-origin__card { gap: 16px; padding-bottom: 32px; }
.yd-origin--auto .yd-h2 { font-size: 36px; line-height: 1.1; }   /* two headed blocks share the card */
.yd-origin--auto .yd-origin__copy p + p { margin-top: 12px; }
.yd-card-rule { display: block; width: 100%; height: 1px; margin: 8px 0; background: var(--border-primary); }

/* Six use cases: value boxes in a 3 × 2 grid sharing 1px rules */
.yd-values--grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.yd-values--grid .yd-value { margin: 0 -1px -1px 0; }

/* Program / work / AI */
.yd-roles { display: grid; grid-template-columns: repeat(3, 1fr); }
.yd-role {
	display: flex; flex-direction: column; gap: 12px;
	margin: 0 -1px 0 0;
	padding: 24px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-role__sub { font: italic 600 18px/1.4 var(--font-text); }

/* Product screen */
.yd-screen { margin: 0; aspect-ratio: 1155 / 618; overflow: hidden; position: relative; background: #0d1b1f; box-shadow: inset 0 0 0 1px var(--border-primary); }
.yd-screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* Security claims */
.yd-claims { display: grid; grid-template-columns: repeat(2, 1fr); }
.yd-claim {
	display: flex; flex-direction: column; gap: 12px;
	margin: 0 -1px -1px 0;
	padding: 24px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-claim .yd-body-card { font-size: 16px; line-height: 1.6; }
.yd-form-section > .yd-btn { align-self: flex-start; }   /* V2 contact: button instead of the form */
.yd-claims__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }

/* V2 footer: logo + one line */
.yd-footer--v2 .yd-footer__legal--v2 { font-size: 14px; }
.yd-footer--v2 .yd-footer__legal--v2 a { text-decoration: underline; text-underline-offset: 3px; }
.yd-footer--v2 .yd-footer__legal--v2 a:hover { color: var(--clearwater-500); }

/* ---------- Brochure (homepage only) — not in Figma; Origin card + image panel,
   oxalis.io copy, HubSpot form restyled to the YARDOS form tokens ---------- */
.yd-brochure { display: flex; }
.yd-brochure__card {
	flex: 1 1 50%; min-width: 0;
	margin-right: -1px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: 24px 32px 32px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-brochure__subhead { font: 400 24px/1.3 var(--font-display); }
.yd-brochure__thumb {
	flex: 1 1 50%; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 32px;
	background: var(--clearwater-50);
	box-shadow: inset 0 0 0 1px var(--border-primary);
}
.yd-brochure__thumb img { width: 100%; max-width: 450px; height: auto; }

.yd-hs-form { width: 100%; margin-top: 12px; }   /* form styles: assets/js/hubspot-brochure.js (iframe) */

/* ---------- Compliance links (ME-2049) — not in Figma; layout from oxalis.io SEWP
   "Related Links" (aside 1 1 280 / list 2 1 520, 22px rows, top rule), YardOS tokens ---------- */
.yd-links { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 96px); }
.yd-links__aside { flex: 1 1 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.yd-links__list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; }
.yd-links__item {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 22px 0;
	border-top: 1px solid var(--border-primary);
	font: 600 22px/1.2 var(--font-text);   /* Desktop/Heading/H4 */
	letter-spacing: -0.02em;
	transition: color 160ms ease;
}
.yd-links__item:hover { color: var(--clearwater-600); }
.yd-links__arrow { flex-shrink: 0; color: var(--clearwater-600); }
.yd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   DARK — form + footer (4595:13038)
   ========================================================================== */
.yd-dark { position: relative; z-index: 3; background: var(--surface-dark); color: var(--text-primary-dark); }
.yd-dark__inner {
	width: min(1154px, calc(100% - 2 * var(--gutter)));
	margin-inline: auto;
	display: flex; flex-direction: column; align-items: center;
}
.yd-form-section { display: flex; flex-direction: column; gap: 32px; width: 100%; scroll-margin-top: 24px; }

.yd-form { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.yd-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.yd-field { display: flex; flex-direction: column; gap: 12px; height: 61px; min-width: 0; }
.yd-field--area { height: 156px; width: 100%; }
.yd-field__label {
	font: 300 14px/1.05 var(--font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.yd-field__label::first-letter { text-transform: uppercase; }
.yd-field__req { color: var(--clearwater-500); }
.yd-field__input {
	flex: 1 0 0; min-height: 0; width: 100%;
	margin: 0; padding: 0 12px;
	background: var(--surface-accent-dark);
	border: 1px solid var(--border-primary);
	border-radius: 0;
	color: var(--text-primary-dark);
	font: 300 16px/1.5 var(--font-text);
	transition: border-color 120ms ease;
}
textarea.yd-field__input { padding: 10px 12px; resize: vertical; }
.yd-field__input:focus { outline: none; border-color: var(--clearwater-500); }
.yd-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.yd-form__notice { padding: 16px; border: 1px solid var(--clearwater-500); background: var(--surface-accent-dark); }
.yd-form__notice--error { border-color: #d14617; }

/* ---------- Footer ---------- */
.yd-footer { display: flex; flex-direction: column; gap: 64px; width: min(1090px, 100%); }
.yd-footer__cols { display: flex; align-items: flex-start; gap: 54px; }
.yd-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.yd-footer__col--solutions { width: 508px; }
.yd-footer__col--products  { width: 144px; }
.yd-footer__col--resources { width: 180px; }
.yd-footer__col--company   { width: 96px; }
.yd-footer__title {  /* Footer - Nav */
	font: 300 18px/normal var(--font-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.yd-footer__title--center { width: 100%; text-align: center; }
.yd-footer__sub { display: flex; align-items: flex-start; gap: 54px; }
.yd-footer__subcol { display: flex; flex-direction: column; gap: 16px; }
.yd-footer__subcol--industry  { width: 206px; }
.yd-footer__subcol--challenge { width: 248px; }
.yd-footer__subhead { /* Footer - Subhead */
	font: italic 300 18px/1.6 var(--font-text);
	color: var(--text-secondary-dark);
}
.yd-footer__list { display: flex; flex-direction: column; }
.yd-footer__list--12 { gap: 12px; }
.yd-footer__list--8  { gap: 8px; }
.yd-footer__col--company .yd-footer__list { width: 83px; }
.yd-footer__list a { /* Footer - Body */
	font: 300 16px/1.7 var(--font-text);
	transition: color 160ms ease;
}
.yd-footer__list a:hover,
.yd-footer__logo:hover { color: var(--clearwater-500); }
.yd-footer__base { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; width: 937px; max-width: 100%; }
.yd-footer__logo img { height: 166.33px; width: auto; }   /* YARDOS-aqua-dark at the Figma footer logo height (4595:13044) */
.yd-footer__legal {  /* Disclosure */
	font: 300 12px/1.7 var(--font-text);
}

.yd-bottom-graphic {
	height: 373px;
	background: url('../img/bottom-graphic.png') center bottom / var(--frame) 373px repeat-x;
}

/* ==========================================================================
   Below the 1512 design width
   ========================================================================== */
@media (max-width: 1240px) {
	.yd-nav { left: 50%; transform: translateX(-50%); }
	.yd-nav__item, .yd-nav__logo, .yd-nav__cta { padding-inline: 20px; }
	.yd-footer__cols { flex-wrap: wrap; row-gap: 40px; }
}

@media (max-width: 1024px) {
	.yd-nav__item { display: none; }
	.yd-hero { height: auto; padding: 160px 0 96px; }
	.yd-hero__lockup { position: static; width: min(563px, 100%); }
	.yd-hero__eyebrow { width: auto; }
	.yd-hero-bg__frame { left: auto; right: 0; margin-left: 0; transform: translateX(35%); opacity: 0.5; }
	.yd-origin { flex-direction: column; height: auto; }
	.yd-brochure { flex-direction: column; }
	.yd-brochure__card { margin: 0 0 -1px; }
	.yd-origin__card { margin: 0 0 -1px; }
	.yd-origin__shot { flex: none; aspect-ratio: 578 / 618; }
	.yd-values, .yd-stats { flex-direction: column; }
	.yd-value { margin: 0 0 -1px; }
	.yd-values--grid, .yd-roles, .yd-claims { grid-template-columns: 1fr; }
	.yd-values--grid .yd-value, .yd-role, .yd-claim { margin: 0 0 -1px; }
	.yd-page--v2 .yd-hero__lockup { width: min(600px, 100%); }
	.yd-stats { gap: 32px; }
	.yd-footer__col--solutions { width: 100%; }
}

@media (max-width: 720px) {
	:root { --gutter: 16px; }
	.yd-nav { top: 16px; gap: 8px; }
	.yd-nav__bar { display: none; }
	.yd-nav__logo { padding-left: 0; }
	.yd-nav__logo img { height: 30px; }
	.yd-nav__cta { padding-inline: 16px; font-size: 14px; }
	.yd-hero { padding-top: 120px; }
	.yd-h1 { font-size: 44px; }
	.yd-page--v2 .yd-hero .yd-h1 { font-size: 36px; }
	.yd-h3 { font-size: 26px; }
	.yd-origin--auto .yd-h2 { font-size: 28px; }
	.yd-h2 { font-size: 34px; }
	.yd-stat__num { font-size: 56px; }
	.yd-stat__label { font-size: 20px; }
	.yd-origin__card, .yd-brochure__card { padding: 24px 20px; }
	.yd-brochure__thumb { padding: 20px; }
	.yd-sol__num { display: none; }
	.yd-sol__card { flex-direction: column-reverse; gap: 0; }
	.yd-sol__type { align-self: flex-end; }
	.yd-sol__body { padding: 16px 20px 20px; }
	.yd-sol__tags li { white-space: normal; }
	.yd-btn { height: auto; min-height: 44px; }
	.yd-btn__label { white-space: normal; }
	.yd-form__grid { grid-template-columns: 1fr; }
	.yd-footer__sub { flex-direction: column; gap: 32px; }
	.yd-footer__logo img { height: 96px; }
	.yd-hero-bg__frame { display: none; }
}