:root { --indigo-50: #e8eaf2; --indigo-100: #c3c8dc; --indigo-300: #8d96b8; --indigo-400: #5a648f; --indigo-500: #323B60; --indigo-600: #262d4a; --indigo-700: #1a2036; --moss-50: #e9ebe5; --moss-100: #cdd1c4; --moss-300: #a2a893; --moss-400: #6f7761; --moss-500: #41483c; --moss-600: #33392f; --moss-700: #252a22; --gold-50: #f7f1e4; --gold-100: #eadfc4; --gold-300: #d9c396; --gold-500: #c4a668; --gold-600: #a5843e; --gold-700: #83682f; --gold-800: #5f4b21; --paper: #f5f4f0; --stone: #e2e0d8; --slate-text: #6b6f63; --ink: #22283f; --white: #ffffff; --surface-page: var(--paper); --surface-card: var(--white); --surface-dark: var(--indigo-700); --surface-grounding: var(--moss-500); --text-heading: var(--ink); --text-body: #3d4252; --text-muted: var(--slate-text); --text-on-dark: #eef0f6; --text-on-dark-muted: #b9bfd4; --accent: var(--gold-500); --accent-strong: var(--gold-600); --link: var(--indigo-500); --link-hover: var(--indigo-400); --border-subtle: var(--stone); --border-on-dark: rgba(196, 166, 104, 0.35); --focus-ring: 0 0 0 3px rgba(90, 100, 143, 0.35); }
:root { --font-display: 'Spectral', Georgia, serif; --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --text-hero: 500 clamp(44px, 5.2vw, 76px)/1.12 var(--font-display); --text-h1: 500 48px/1.1 var(--font-display); --text-h2: 500 36px/1.15 var(--font-display); --text-h3: 500 26px/1.25 var(--font-display); --text-lead: 400 19px/1.55 var(--font-body); --text-body-m: 400 16px/1.6 var(--font-body); --text-body-s: 400 14px/1.55 var(--font-body); --text-eyebrow: 600 13px/1.2 var(--font-body); --eyebrow-tracking: 0.18em; --text-button: 600 14px/1 var(--font-body); --button-tracking: 0.08em; --text-quote: italic 500 24px/1.4 var(--font-display); }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1200px; --radius-s: 4px; --radius-m: 8px; --radius-round: 999px; --shadow-card: 0 1px 2px rgba(34, 40, 63, 0.06), 0 8px 24px rgba(34, 40, 63, 0.08); --shadow-lift: 0 2px 4px rgba(34, 40, 63, 0.08), 0 16px 40px rgba(34, 40, 63, 0.14); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-med: 300ms; }
body { margin: 0px; background: var(--surface-page); color: var(--text-body); font: var(--text-body-m); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }
html, body { margin: 0px; }
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500i.woff2') format('woff2');}

/* No global box-sizing reset. The comp is content-box: a border-box reset
   pulled every 1200px container in to 1136px of content, 64px narrower than
   the comp's 1264px. The comp sets box-sizing itself where it wants it. */
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold-600);outline-offset:2px;border-radius:2px}
[id]{scroll-margin-top:96px}
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--indigo-500);color:#fff;padding:12px 18px;z-index:100}
.skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip-path:none}
/* ---- form states: the comp drew the resting state only ---- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-toggle:focus-visible~.nav-burger{outline:3px solid var(--gold-600);outline-offset:2px}
.s189:focus,.s190:focus{outline:none;border-color:var(--indigo-400);box-shadow:var(--focus-ring)}
.s189[aria-invalid=true],.s190[aria-invalid=true]{border-color:#9b2c2c;background:#fdf7f7}
.field-error{display:block;margin-top:6px;font:400 13px/1.4 var(--font-body);color:#9b2c2c}
.form-status{margin:14px 0 0;font:400 15px/1.5 var(--font-body);min-height:1.5em}
/* Collapse the empty slots. The invisible Turnstile mount and the status line
   were reserving about 91px of dead space above SEND MESSAGE. The status keeps
   its aria-live region in the DOM so it still announces when it fills. */
.form-status:empty{min-height:0;height:0;margin:0;overflow:hidden}
#ts-slot:empty{display:none}
.form-status.is-error{color:#9b2c2c}
.form-status a{color:#9b2c2c;text-decoration:underline}
.s191[disabled]{opacity:.6;cursor:progress}
.s191:hover:not([disabled]){background:var(--gold-600)}
a[role=button]{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* burger: hidden above the mobile breakpoint, shown inside the media query */
.nav-burger{box-sizing:border-box;display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:auto;cursor:pointer;padding:0}
.nav-burger i{display:block;width:24px;height:2px;background:var(--indigo-500);border-radius:1px;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
.nav-toggle:checked~.nav-burger i:nth-of-type(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked~.nav-burger i:nth-of-type(2){opacity:0}
.nav-toggle:checked~.nav-burger i:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)}

/* --- components, lifted verbatim from the approved comp --- */
.s1{background: var(--white); border-bottom: 1px solid var(--border-subtle)}
.s2{max-width: var(--container-max); margin: 0px auto; padding: 0px 32px; height: 84px; display: flex; align-items: center; gap: 40px}
.s3{display: flex; align-items: center; height: 84px}
.s4{height: 62px}
.s5{display: flex; gap: 28px; margin-left: auto}
.s6{font: 500 14px/1 var(--font-body); color: var(--indigo-500); padding-bottom: 6px; box-shadow: inset 0 -2px 0 var(--gold-500); transition: box-shadow var(--dur-fast) var(--ease-out)}
.s7{font: 500 14px/1 var(--font-body); color: var(--text-body); padding-bottom: 6px; box-shadow: none; transition: box-shadow var(--dur-fast) var(--ease-out)}
.s8{font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; background: var(--indigo-500); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius-s); padding: 13px 22px; cursor: pointer}
.s9{position: relative; overflow: hidden; min-height: 720px}
.s10{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; display: block; filter: saturate(0.85) brightness(0.95) contrast(1.02)}
.s11{position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(26, 32, 54, 0.95) 0%, rgba(26, 32, 54, 0.7) 38%, rgba(26, 32, 54, 0.12) 64%, rgba(26, 32, 54, 0.05) 100%)}
.s12{position: absolute; inset: 0px; background: linear-gradient(rgba(26, 32, 54, 0.45) 0%, rgba(26, 32, 54, 0) 26%, rgba(26, 32, 54, 0) 70%, rgba(26, 32, 54, 0.55) 100%)}
.s13{position: relative; max-width: var(--container-max); margin: 0px auto; padding: 168px 32px 176px}
.s14{max-width: 760px}
.s15{width: 44px; height: 3px; background: var(--gold-500); margin-bottom: 12px}
.s16{font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-300)}
.s17{font: var(--text-hero); color: var(--paper); margin: 20px 0px 0px; padding-bottom: 4px}
.s18{white-space: nowrap}
.s19{font-style: italic; color: var(--gold-300); white-space: nowrap}
.s20{font: var(--text-lead); color: var(--text-on-dark-muted); margin: 24px 0px 34px; max-width: 560px}
.s21{display: flex; gap: 14px; flex-wrap: wrap}
.s22{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 18px 32px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border: 1px solid transparent; background: var(--gold-500); color: var(--indigo-700)}
.s23{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 18px 32px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border-width: 1px; border-style: solid; border-color: var(--border-on-dark); border-image: none; background: transparent; color: var(--gold-300)}
.s24{background: var(--paper)}
.s25{max-width: var(--container-max); margin: 0px auto; padding: 96px 32px}
.s26{width: 44px; height: 3px; background: var(--gold-500); margin-bottom: 16px}
.s27{font: var(--text-h2); color: var(--text-heading); margin: 0px; max-width: 640px}
.s28{font: var(--text-lead); color: var(--text-muted); margin: 16px 0px 48px; max-width: 620px}
.s29{display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px}
.s30{grid-row: 1 / 3}
.s31{height: 100%; border-radius: var(--radius-m); overflow: hidden; position: relative; min-height: 420px}
.s32{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 33%}
.s33{position: absolute; inset: 0px; background: linear-gradient(rgba(26, 32, 54, 0) 40%, rgba(26, 32, 54, 0.78))}
.s34{position: absolute; left: 28px; right: 28px; bottom: 26px}
.s35{font: var(--text-h3); color: var(--paper)}
.s36{font: var(--text-body-m); color: var(--text-on-dark-muted); margin: 8px 0px 0px}
.s37{grid-column: 2 / 4}
.s38{display: block; text-decoration: none; background: var(--white); border-radius: var(--radius-m); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); padding: 32px; transition: all var(--dur-med) var(--ease-out); transform: none}
.s39{width: 56px; height: 56px; border-radius: var(--radius-round); background: var(--gold-50); display: grid; place-items: center; color: var(--gold-600); margin-bottom: 20px}
.s40{font: var(--text-h3); color: var(--text-heading); margin-bottom: 10px}
.s41{font: var(--text-body-m); color: var(--text-muted); margin: 0px 0px 18px}
.s42{font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; color: var(--indigo-500); transition: color var(--dur-fast) var(--ease-out)}
.s43{background: var(--moss-500); position: relative; overflow: hidden}
.s44{position: absolute; top: -180px; left: -120px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.2)}
.s45{position: absolute; top: -110px; left: -20px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.12)}
.s46{position: absolute; bottom: -220px; right: -150px; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.16)}
.s47{position: absolute; inset: 0px; background: radial-gradient(55% 95% at 12% 15%, rgba(37, 42, 34, 0.5) 0%, rgba(37, 42, 34, 0) 62%)}
.s48{position: relative; max-width: var(--container-max); margin: 0px auto; padding: 80px 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center}
.s49{margin: 0px; max-width: 560px}
.s50{font: 500 64px/0.5 var(--font-display); color: var(--gold-500); height: 30px}
.s51{margin: 0px; font: var(--text-quote); color: var(--text-on-dark)}
.s52{margin-top: 14px; font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-300)}
.s53{display: grid; grid-template-columns: 1fr 1fr; gap: 36px}
.s54{font: 500 52px/1 var(--font-display); color: var(--gold-300)}
.s55{font: var(--text-body-s); color: var(--text-on-dark-muted); margin-top: 8px; max-width: 200px}
.s56{background: var(--white)}
.s57{display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: center}
.s58{border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-lift)}
.s59{width: 100%; display: block}
.s60{font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-600)}
.s61{font: var(--text-h2); color: var(--text-heading); margin: 14px 0px 0px}
.s62{font: var(--text-body-m); color: var(--text-body); margin: 20px 0px 0px; max-width: 560px}
.s63{display: flex; gap: 10px; margin: 22px 0px 28px; flex-wrap: wrap}
.s64{display: inline-block; font: 600 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-s); background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-100)}
.s65{display: inline-block; font: 600 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-s); background: var(--moss-50); color: var(--moss-500); border: 1px solid var(--moss-100)}
.s66{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 14px 26px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border-width: 1px; border-style: solid; border-color: var(--gold-500); border-image: none; background: transparent; color: var(--ink)}
.s67{max-width: var(--container-max); margin: 0px auto; padding: 96px 32px 112px}
.s68{display: grid; grid-template-columns: 380px 1fr; gap: 72px}
.s69{font: var(--text-body-m); color: var(--text-muted); margin: 16px 0px 28px}
.s70{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 14px 26px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border: 1px solid transparent; background: var(--indigo-500); color: rgb(255, 255, 255)}
.s71{display: grid; gap: 12px}
.s72{display: flex; gap: 24px; align-items: flex-start; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-m); padding: 26px 30px}
.s73{width: 52px; height: 52px; border-radius: var(--radius-round); background: var(--gold-50); display: grid; place-items: center; color: var(--gold-600); flex-shrink: 0}
.s74{font: var(--text-h3); color: var(--text-heading); margin-bottom: 6px}
.s75{font: var(--text-body-m); color: var(--text-muted); margin: 0px}
.s76{background: var(--indigo-700); padding: 72px 32px 40px}
.s77{max-width: var(--container-max); margin: 0px auto}
.s78{display: grid; grid-template-columns: 1.3fr 0.8fr 1.2fr; gap: 56px; align-items: start}
.s79{height: 56px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95}
.s80{font: var(--text-body-s); color: var(--text-on-dark-muted); margin: 20px 0px 0px; max-width: 340px}
.s81{font: italic 500 18px/1.4 var(--font-display); color: var(--gold-300); margin-top: 16px}
.s82{font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-300); margin-bottom: 16px}
.s83{color: var(--text-on-dark-muted); font: var(--text-body-s); text-decoration: none}
.s84{display: grid; gap: 14px}
.s85{color: var(--text-on-dark-muted); font: var(--text-body-s); text-decoration: none; display: flex; align-items: center; gap: 12px}
.s86{width: 34px; height: 34px; border-radius: var(--radius-round); background: rgba(196, 166, 104, 0.14); display: grid; place-items: center; color: var(--gold-300); flex-shrink: 0}
.s87{border-top: 1px solid var(--border-on-dark); margin-top: 48px; padding-top: 24px; font: var(--text-body-s); color: var(--text-on-dark-muted)}
.s88{background: rgb(16, 19, 33); position: relative; overflow: hidden}
.s89{position: absolute; top: -200px; right: -140px; width: 600px; height: 600px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.3)}
.s90{position: absolute; top: -130px; right: -30px; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.16)}
.s91{position: absolute; bottom: -260px; left: -180px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.12)}
.s92{position: absolute; inset: 0px; background: radial-gradient(62% 90% at 80% 12%, rgba(50, 59, 96, 0.6) 0%, rgba(16, 19, 33, 0) 62%)}
.s93{position: relative; max-width: var(--container-max); margin: 0px auto; padding: 96px 32px 88px}
.s94{font: var(--text-h1); color: var(--gold-300); margin: 0px}
.s95{font: var(--text-lead); color: var(--text-on-dark-muted); margin: 18px 0px 0px; max-width: 640px}
.s96{background: var(--white); border-radius: var(--radius-m); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1fr 380px; overflow: hidden; scroll-margin-top: 90px}
.s97{padding: 52px 56px}
.s98{display: flex; align-items: center; gap: 16px; margin-bottom: 16px}
.s99{font: var(--text-h2); color: var(--text-heading); margin: 0px}
.s100{font-style: italic; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--gold-600); margin: 0px 0px 18px}
.s101{font: 400 17.5px/1.65 var(--font-body); color: var(--text-body); margin: 0px 0px 22px}
.s102{font: 400 17.5px/1.65 var(--font-body); color: var(--text-body); margin: 0px}
.s103{min-height: 280px; position: relative}
.s104{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover}
.s105{background: var(--indigo-700); border-radius: var(--radius-m); padding: 56px 48px; margin-top: 40px; text-align: center}
.s106{font: 500 clamp(24px, 3.2vw, 40px)/1.2 var(--font-display); color: var(--paper); white-space: nowrap}
.s107{font: var(--text-body-s); color: var(--text-on-dark-muted); margin: 12px 0px 0px}
.s108{font-style: italic; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--gold-300); margin: 28px auto 0px; max-width: 620px}
.s109{margin-top: 48px}
.s110{font: var(--text-h3); color: var(--text-heading); margin: 0px 0px 24px}
.s111{display: grid; grid-template-columns: 1fr 1fr; gap: 0px 40px; align-items: start}
.s112{margin: 0px; padding: 0px; list-style: none; display: grid; gap: 14px; align-content: start}
.s113{font: 400 17.5px/1.65 var(--font-body); color: var(--text-body); display: flex; gap: 12px; align-items: flex-start}
.s114{width: 22px; height: 22px; border-radius: var(--radius-round); background: var(--gold-50); color: var(--gold-600); display: grid; place-items: center; flex-shrink: 0; transform: translateY(3px)}
.s115{background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: var(--radius-m); padding: 28px 34px; margin-top: 40px}
.s116{font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-700); margin-bottom: 10px}
.s117{font: italic 500 20px/1.5 var(--font-display); color: var(--text-heading); margin: 0px}
.s118{margin-top: 32px}
.s119{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 14px 26px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border: 1px solid transparent; background: var(--gold-500); color: var(--indigo-700)}
.s120{max-width: var(--container-max); margin: 0px auto; padding: 112px 32px}
.s121{display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; scroll-margin-top: 90px}
.s122{border-radius: var(--radius-m); overflow: hidden; position: relative; min-height: 380px; align-self: stretch; box-shadow: var(--shadow-card)}
.s123{color: var(--text-heading)}
.s124{background: var(--moss-500); border-radius: var(--radius-m); padding: 48px 52px; margin-top: 72px; position: relative; overflow: hidden}
.s125{position: absolute; top: -160px; right: -110px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.2)}
.s126{position: absolute; top: -100px; right: -30px; width: 250px; height: 250px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.12)}
.s127{position: absolute; inset: 0px; background: radial-gradient(60% 100% at 10% 0%, rgba(37, 42, 34, 0.5) 0%, rgba(37, 42, 34, 0) 60%)}
.s128{position: relative}
.s129{display: flex; align-items: center; gap: 14px; margin-bottom: 14px}
.s130{width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--white); display: grid; place-items: center; color: var(--moss-500); flex-shrink: 0; box-shadow: var(--shadow-card)}
.s131{font: var(--text-h3); color: var(--paper); margin: 0px}
.s132{font: italic 500 19px/1.4 var(--font-display); color: var(--gold-300); margin: 0px 0px 14px}
.s133{font: 400 17.5px/1.65 var(--font-body); color: var(--moss-100); margin: 0px 0px 28px; max-width: 680px}
.s134{color: var(--paper)}
.s135{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px}
.s136{background: var(--white); border-top: 3px solid var(--moss-400); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: var(--radius-m); padding: 28px 30px}
.s137{font: 400 17.5px/1.65 var(--font-body); color: var(--text-muted); margin: 0px}
.s138{background: var(--moss-500); border-radius: var(--radius-m); padding: 48px 52px; margin-top: 40px; position: relative; overflow: hidden}
.s139{position: absolute; bottom: -170px; left: -120px; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.2)}
.s140{position: absolute; bottom: -110px; left: -40px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(196, 166, 104, 0.12)}
.s141{position: absolute; inset: 0px; background: radial-gradient(60% 100% at 90% 100%, rgba(37, 42, 34, 0.5) 0%, rgba(37, 42, 34, 0) 60%)}
.s142{width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--white); display: grid; place-items: center; color: var(--gold-600); flex-shrink: 0; box-shadow: var(--shadow-card)}
.s143{display: grid; grid-template-columns: 1fr 1fr; gap: 24px}
.s144{background: var(--white); border-top: 3px solid var(--gold-500); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: var(--radius-m); padding: 28px 30px}
.s145{max-width: var(--container-max); margin: 0px auto; padding: 112px 32px 120px}
.s146{border-radius: var(--radius-m); overflow: hidden; position: relative; min-height: 340px}
.s147{position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(26, 32, 54, 0.85) 0%, rgba(26, 32, 54, 0.55) 55%, rgba(26, 32, 54, 0.25) 100%)}
.s148{position: relative; padding: 64px 56px; max-width: 560px}
.s149{font: var(--text-h2); color: var(--paper)}
.s150{font-style: italic; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--gold-300); margin: 12px 0px 0px}
.s151{font: 400 17.5px/1.65 var(--font-body); color: var(--text-on-dark-muted); margin: 16px 0px 26px}
.s152{margin-top: 72px; scroll-margin-top: 90px}
.s153{display: flex; align-items: center; gap: 14px; margin-bottom: 12px}
.s154{width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--gold-50); display: grid; place-items: center; color: var(--gold-600)}
.s155{font: var(--text-h3); color: var(--text-heading); margin: 0px}
.s156{font: 400 17.5px/1.65 var(--font-body); color: var(--text-muted); margin: 0px 0px 28px; max-width: 680px}
.s157{margin-top: 64px; scroll-margin-top: 90px}
.s158{font: var(--text-body-s); color: var(--text-muted); margin: 22px 0px 0px}
.s159{font: var(--text-lead); color: var(--text-on-dark-muted); margin: 18px 0px 0px; max-width: 680px}
.s160{display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: start}
.s161{border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-lift); position: sticky; top: 110px}
.s162{font: var(--text-h2); color: var(--text-heading); margin: 0px 0px 22px}
.s163{font: var(--text-body-m); color: var(--text-body); margin: 0px 0px 22px}
.s164{font: var(--text-body-m); color: var(--text-body); margin: 0px}
.s165{display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap}
.s166{display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 64px}
.s167{border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card)}
.s168{width: 100%; height: 360px; object-fit: cover; display: block}
.s169{max-width: 760px; margin: 0px auto}
.s170{background: var(--white); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left: 3px solid var(--gold-500); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: var(--radius-m); padding: 26px 32px; margin-top: 36px}
.s171{position: relative; max-width: var(--container-max); margin: 0px auto; padding: 96px 32px; text-align: center}
.s172{font: italic 500 32px/1.4 var(--font-display); color: var(--paper); max-width: 720px; margin: 0px auto}
.s173{color: var(--gold-300)}
.s174{font: var(--text-body-m); color: var(--moss-100); margin: 16px 0px 0px}
.s175{margin-top: 36px}
.s176{max-width: var(--container-max); margin: 0px auto; padding: 72px 32px 96px}
.s177{display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px}
.s178{font: var(--text-h1); color: var(--text-heading); margin: 16px 0px 0px}
.s179{font: var(--text-lead); color: var(--text-muted); margin: 18px 0px 32px}
.s180{display: flex; gap: 14px; align-items: baseline}
.s181{font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-600); width: 80px}
.s182{font: var(--text-body-m)}
.s183{font: var(--text-body-m); color: var(--text-body)}
.s184{background: var(--paper); border-radius: var(--radius-m); border: 1px solid var(--border-subtle); padding: 40px}
.s185{display: grid; gap: 18px}
.s186{display: grid; grid-template-columns: 1fr 1fr; gap: 18px}
.s187{display: grid; gap: 8px}
.s188{font: 600 13px/1 var(--font-body); color: var(--ink)}
.s189{width: 100%; box-sizing: border-box; font: var(--text-body-m); color: var(--ink); background: var(--white); border: 1px solid var(--stone); box-shadow: none; outline: none; border-radius: var(--radius-s); padding: 13px 16px; transition: all var(--dur-fast) var(--ease-out); resize: vertical}
.s190{width: 100%; box-sizing: border-box; font: var(--text-body-m); color: var(--ink); background: var(--white); border: 1px solid var(--stone); box-shadow: none; outline: none; border-radius: var(--radius-s); padding: 13px 16px; transition: all var(--dur-fast) var(--ease-out); resize: vertical; min-height: 120px}
.s191{display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-button); letter-spacing: var(--button-tracking); text-transform: uppercase; border-radius: var(--radius-s); padding: 18px 32px; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border: 1px solid transparent; background: var(--indigo-500); color: rgb(255, 255, 255)}

/* Contrast deviation from the approved comp, per design-fidelity-standards §6.
   The comp sets small gold TEXT in --gold-600 #a5843e: 3.52:1 on #fff and 3.20:1
   on --paper, both under the 4.5 AA floor for text under 24px. Swapped to the
   palette's own --gold-700 #83682f: 5.27:1 on #fff, 4.79:1 on paper. Minimum
   change that clears the threshold, using a value the palette already defines.
   Text only. The gold-600 ICONS on gold-50 discs (.s39 .s73 .s114 .s142 .s154)
   are unchanged: decorative, and they sit beside the text they label.
   --gold-500 is untouched everywhere it already passes. */
.s60,.s181,.s100{color:var(--gold-700)}
/* Contact row: David asked for a wider form (2026-09-25). The comp splits it
   1fr / 1.2fr, which gave 509px to four short detail rows and 611px to the form.
   380px / 1fr gives the form 740px. Deviation from the comp, requested. */
.s177{grid-template-columns:380px 1fr}

@media (max-width:760px){
.s2{padding:0px 20px;gap:24px}
.s9{min-height:auto}
.s13{padding:76px 20px 79px}
.s22{padding:18px 20px}
.s23{padding:18px 20px}
.s25{padding:43px 20px}
.s29{grid-template-columns:1fr;grid-template-rows:auto}
.s30{grid-column:auto;grid-row:auto}
.s37{grid-column:auto;grid-row:auto}
.s38{padding:20px}
.s48{grid-template-columns:1fr;padding:36px 20px;gap:38px}
.s53{grid-template-columns:1fr;gap:22px}
.s57{grid-template-columns:1fr;gap:43px}
.s67{padding:43px 20px 50px}
.s68{grid-template-columns:1fr;gap:43px}
.s76{padding:32px 20px 20px}
.s78{grid-template-columns:1fr;gap:34px}
.s93{padding:43px 20px 40px}
.s96{grid-template-columns:1fr}
.s97{padding:20px 20px}
.s105{padding:20px 20px}
.s111{grid-template-columns:1fr;gap:0px 24px}
.s115{padding:28px 20px}
.s120{padding:50px 20px}
.s121{grid-template-columns:1fr;gap:34px}
.s124{padding:20px 20px}
.s135{grid-template-columns:1fr}
.s138{padding:20px 20px}
.s143{grid-template-columns:1fr}
.s145{padding:50px 20px 54px}
.s148{padding:29px 20px}
.s160{grid-template-columns:1fr;gap:43px}
.s161{position:static;top:auto}
.s166{grid-template-columns:1fr}
.s170{padding:26px 20px}
.s171{padding:43px 20px}
.s176{padding:32px 20px 43px}
.s177{grid-template-columns:1fr;gap:48px}
.s184{padding:20px}
.s186{grid-template-columns:1fr}
.s191{padding:18px 20px}

/* ---- mobile layer: the comp defines no breakpoints, so this surface is composed ---- */
/* hero display type: clamp floor of 44px clipped "Lead with conviction." at 360 */
:root{--text-hero:500 clamp(30px,8.2vw,76px)/1.14 var(--font-display);
      --text-h1:500 clamp(30px,7.6vw,48px)/1.14 var(--font-display);
      --text-h2:500 clamp(26px,6.4vw,36px)/1.18 var(--font-display);
      --text-h3:500 clamp(21px,5.4vw,26px)/1.3 var(--font-display);
      --text-quote:italic 500 clamp(19px,5vw,24px)/1.4 var(--font-display)}

/* header becomes a burger menu */
.nav-burger{display:flex}
.nav-toggle~nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
  background:var(--white);border-bottom:1px solid var(--border-subtle);
  box-shadow:var(--shadow-card);padding:8px 20px 16px;margin-left:0;display:none;z-index:50}
.nav-toggle:checked~nav{display:flex}
.nav-toggle~nav a{padding:14px 0;box-shadow:none;border-bottom:1px solid var(--border-subtle);
  font:500 16px/1 var(--font-body)}
.nav-toggle~nav a:last-child{border-bottom:0}
.nav-toggle~nav a[aria-current=page]{color:var(--indigo-500);box-shadow:inset 3px 0 0 var(--gold-500);padding-left:12px}
header>div{position:relative;flex-wrap:nowrap;height:68px;padding:0 20px;gap:12px}
header>div>a:first-of-type{height:68px}
header img[alt^="NFP"]{height:44px;width:auto}
header a[role=button]{display:none}
/* header CTA stays hidden on mobile: Contact sits in the menu and the hero carries the same CTA */
/* Gallwey equation: white-space:nowrap held it at 422px inside a 224px box. Allow the wrap. */
.s106{white-space:normal;font-size:clamp(21px,5.8vw,40px);line-height:1.25}
/* stacked grids leave fixed-px tracks behind */
.s57,.s68,.s96,.s121,.s160{grid-template-columns:1fr}
/* Hero at 360. Two facts drive this, both measured.
   1. The source is a 2750x1250 landscape frame. At any mobile height the full
      image height shows, so object-position Y does nothing and Tyler's face is
      locked at 22-52% of the frame.
   2. The comp's copy block sat at exactly 14-59%, directly on top of his face.
      No gradient can darken the headline and reveal the face: they are the same
      pixels.
   So the copy moves below him. The hero grows to 730px, the copy anchors to the
   bottom and is tightened to fit, and the scrim stays clear to 47% then rises
   hard. Mean face luminance 0.464 with 0.97 detail, against 0.087 before.
   Worst-case text contrast: eyebrow 5.61, h1 12.01, lead 7.33, outline button
   9.15, all above their AA floors. Desktop is untouched. */
.s9{min-height:730px;display:flex;align-items:flex-end}
.s13{width:100%;padding-top:20px;padding-bottom:34px}
.s10{object-position:77% 0%;filter:saturate(.85) brightness(1.16) contrast(1.05)}
.s11{background:linear-gradient(180deg,rgba(26,32,54,0) 0%,rgba(26,32,54,.02) 38%,rgba(26,32,54,.22) 47%,rgba(26,32,54,.92) 55%,rgba(26,32,54,.97) 100%)}
.s12{background:none}
:root{--text-hero:500 clamp(25px,6.8vw,76px)/1.1 var(--font-display)}
.s20{font-size:16.5px;line-height:1.45;margin-top:14px}
.s16{margin-bottom:0}
.s21{gap:8px;margin-top:20px;flex-direction:column;align-items:flex-start}
.s22,.s23{padding:14px 18px}
/* Contact details: the comp gives the label a fixed 80px column but no
   flex-shrink, so the long "Where" value squeezed its label to 61px and knocked
   that row out of alignment with Email, Phone and LinkedIn. */
.s181{flex-shrink:0}
/* The comp's outline button is transparent because on desktop it always sits on
   the dark left half of the hero. At 360 it lands over the bright pavement and
   its gold-300 label measured 1.04:1. A translucent indigo fill gives it a
   reliable ground without changing the button's shape, border or color. */
.s23{background:rgba(26,32,54,.78);border-color:rgba(196,166,104,.6)}
/* Contact: David asked for a wider form (2026-09-25). The comp splits the row
   1fr / 1.2fr, giving 509px to four short detail rows and 611px to the form.
   Retuned to 380px / 1fr so the form gets 740px. Deviation from the comp, requested. */
}

/* ---- /thank-you/ and 404: composed from the comp's tokens, no new visual language ---- */
.s171x{background:var(--surface-page)}
.s172x{max-width:var(--container-max);margin:0 auto;padding:128px 32px 144px}
.s17x{font:var(--text-h1);color:var(--text-heading);margin:16px 0 0;max-width:18ch}
.s20x{font:var(--text-lead);color:var(--text-muted);margin:20px 0 0;max-width:60ch}
.ty-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.ty-actions .s8{background:var(--indigo-500);color:#fff}
.ty-actions .s8:first-child{background:var(--gold-500);color:var(--indigo-700)}
@media (max-width:760px){.s172x{padding:64px 20px 72px}}