:root{color-scheme:light dark;--bg:#ffffff;--ink:#000000;--muted:#000000;--blue:#10367a;--orange:#FE5716;--outline:#c8c9ca;--sans:'DM Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}html[data-theme="dark"]{--bg:#000000;--ink:#f1f0ec;--muted:#aaa9a5;--blue:#91b2ec;--orange:#FE5716;--outline:#515151}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}main{max-width:1120px;margin:auto;padding:64px 48px 0}.skip{position:fixed;top:-100px;left:16px;z-index:10;padding:12px;background:var(--bg)}.skip:focus{top:12px}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}h1{font-size:clamp(46px,5.5vw,76px);line-height:1.06;letter-spacing:-.055em;color:var(--blue);font-weight:450;margin:0 0 24px}.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}.orange{color:var(--orange)}.bio{font-size:14px;line-height:1.9;color:var(--muted);margin:0;max-width:470px}.portrait{display:block;width:100%;height:auto;border-radius:12px;max-height:430px;object-fit:contain}.companies{overflow:hidden;margin:35px 0 46px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.logo-track{display:flex;width:max-content;animation:logos-right 22s linear infinite}.logo-group{display:flex;align-items:center;gap:75px;flex-shrink:0;padding:0 38px}.logo-group img{display:block;object-fit:contain;flex-shrink:0;filter:none}.logo-group .edf{width:190px;height:auto}.logo-group .rolls{width:39px;height:auto}.logo-group .arabelle{width:210px;height:auto}@keyframes logos-right{from{transform:translate3d(-25%,0,0)}to{transform:translate3d(0,0,0)}}.yurt{display:grid;grid-template-columns:.7fr 1.5fr;gap:65px;align-items:center;margin-bottom:58px}.yurt h2{font-size:42px;line-height:1.12;letter-spacing:-.04em;font-weight:450;color:var(--blue);margin:0 0 18px}.yurt p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 12px;max-width:530px}.perspective{text-align:center;max-width:800px;margin:0 auto}.perspective h2{font-size:44px;line-height:1.15;letter-spacing:-.04em;font-weight:450;color:var(--blue);margin:0 0 20px}.perspective p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}footer{padding:34px 24px 28px;text-align:center}.footer-buttons{display:flex;justify-content:center;gap:12px}.contact-button{min-width:112px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid var(--outline);border-radius:12px;font-size:12px;color:var(--blue)}.contact-button:hover{border-color:var(--orange);color:var(--orange)}footer p{font-size:10px;color:var(--muted);margin:20px 0 0}@media(max-width:767px){main{padding:30px 25px 0}.intro{display:flex;flex-direction:column;gap:22px}h1{order:1;font-size:46px;line-height:1.04;margin:0;letter-spacing:-.055em}.portrait{order:2;width:184px;height:auto;max-height:none;border-radius:10px}.bio{order:3;font-size:12px;line-height:1.8;margin:0}.companies{margin:25px -5px 28px}.logo-group{gap:34px;padding:0 17px}.logo-group .edf{width:130px}.logo-group .rolls{width:28px}.logo-group .arabelle{width:150px}.yurt{display:block;margin-bottom:32px}.yurt h2{font-size:30px;margin:0 0 12px}.yurt p{font-size:12px;line-height:1.75;margin-bottom:10px}.perspective h2{font-size:31px;margin-bottom:14px;line-height:1.15}.perspective p{font-size:10px;line-height:1.8}footer{padding:26px 25px 24px}.contact-button{min-width:106px;min-height:44px;font-size:11px}.footer-buttons{gap:10px}footer p{font-size:9px;margin-top:16px}}@media(max-width:350px){main{padding:25px 22px 0}h1{font-size:41px}.portrait{width:165px}.perspective h2{font-size:28px}}@media(prefers-reduced-motion:reduce){.logo-track{animation:none;transform:none}.logo-group[aria-hidden="true"]{display:none}.companies{overflow-x:auto;mask:none}}.page-name{text-align:center;font-size:clamp(42px,6vw,76px);margin:0 0 38px;color:var(--blue);font-weight:450;letter-spacing:-.05em}.intro h2{font-size:clamp(38px,4.3vw,60px);line-height:1.1;letter-spacing:-.04em;font-weight:450;color:var(--blue);margin:0 0 24px}.annotated{position:relative;display:inline-block;padding-bottom:8px}.annotated svg{position:absolute;width:100%;height:20px;left:0;bottom:-6px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-dasharray:650;animation:ink 1.8s ease both}.bio p{margin:0 0 12px}.bio strong{font-weight:550;color:var(--ink)}.portrait{border-radius:0;max-height:410px;mask-image:linear-gradient(#000 88%,transparent)}.logo-group .edf{mix-blend-mode:multiply}.yurt{display:block;text-align:center;max-width:660px;margin:0 auto 40px}.yurt p{max-width:none}.yurt .stealth{font-size:11px}.perspective h2{font-size:36px}.companies{margin-top:27px;margin-bottom:36px}footer{max-width:1024px;margin:26px auto 0;padding-top:25px;border-top:1px solid var(--outline)}@keyframes ink{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}html[data-theme="dark"] .logo-group .edf{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg)}@media(max-width:767px){main{padding-top:22px}.page-name{font-size:45px;line-height:1.1;margin-bottom:25px}.intro{gap:18px}.intro h2{font-size:36px;order:1;margin:0;text-align:center}.intro .portrait{width:168px;order:2}.intro .bio{order:3;font-size:11px;line-height:1.7}.bio p{margin-bottom:9px}.companies{margin:14px -5px 23px}.yurt h2{font-size:29px;line-height:1.15}.yurt p{font-size:11px;line-height:1.75}.yurt{margin-bottom:26px}.yurt .stealth{font-size:10px}.perspective h2{font-size:29px;margin-bottom:0}footer{margin:24px 25px 0;padding:22px 0}.annotated svg{height:15px}}@media(prefers-reduced-motion:reduce){.annotated svg{animation:none}.logo-track{animation:none}}
.logo-group{background:var(--bg)}

.identity-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin-bottom:42px;text-align:center}.identity-contact{display:flex;justify-content:center;align-items:center;gap:24px}.identity-header .page-name{margin:0;font-size:52px;line-height:1.15}.bio{text-align:center}.intro h2{text-align:center}.portrait{mask-image:none;-webkit-mask-image:none}@keyframes tagline-arrive{from{opacity:0;transform:translateY(9px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}@media(max-width:767px){.identity-header{gap:17px;margin-bottom:28px}.identity-contact{gap:15px;width:100%}.identity-header .page-name{font-size:30px;letter-spacing:-.04em}.bio{text-align:center}}@media(max-width:350px){.identity-header .page-name{font-size:26px}.identity-contact{gap:10px}}
.identity-contact .page-name{order:0}

.identity-header .page-name{background:linear-gradient(110deg,var(--blue) 15%,var(--orange) 42%,var(--blue) 70%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:name-arrive 1.2s ease both,name-colour 9s ease-in-out infinite}.intro h2{font-size:clamp(36px,4.1vw,58px);line-height:1.15}.yurt{max-width:760px}.yurt-heading{position:relative;margin-bottom:25px}.yurt h2{font-size:46px;line-height:1.15}.yurt-explanation{max-width:650px;margin:0 auto 20px}.yurt-explanation p{font-size:13px;line-height:1.95;margin-bottom:18px}.yurt .stealth{font-size:23px;line-height:1.7;margin:22px 0;color:var(--ink)}.stealth-word{position:relative;display:inline-block;color:var(--orange)}.stealth-word svg{position:absolute;left:0;bottom:-7px;width:100%;height:17px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:300;animation:stealth-ink 6s ease-in-out infinite}@keyframes name-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes name-colour{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes spark-turn{to{transform:rotate(360deg)}}@keyframes stealth-ink{0%{stroke-dashoffset:300;opacity:.3}25%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.5}}@media(max-width:767px){.intro h2{font-size:34px}.yurt h2{font-size:31px}.yurt-explanation p{font-size:11px;line-height:1.85;margin-bottom:15px}.yurt .stealth{font-size:18px;margin:20px 0}.yurt-heading{margin-bottom:22px}}@media(prefers-reduced-motion:reduce){.identity-header .page-name{animation:none;background:none;color:var(--blue)}.stealth-word svg{animation:none}.stealth-word svg{stroke-dashoffset:0}}

.portrait{border-radius:50%;aspect-ratio:1;width:100%;height:auto;object-fit:cover;object-position:center;max-height:none;border:1px solid var(--outline);padding:0}.intro .portrait{aspect-ratio:1;object-fit:cover}@media(max-width:767px){.intro .portrait{width:168px;height:168px;border-radius:50%}}

.identity-header{border-bottom:1px solid var(--outline);padding-bottom:22px;margin-bottom:35px}.identity-header .page-name{background:none;-webkit-text-fill-color:var(--blue);color:var(--blue);animation:none}.portrait{border:0!important}.profile{position:relative;margin:0;text-align:center;min-width:0}.profile .portrait{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%}.profile figcaption{font-size:12px;line-height:1.7;color:var(--blue);margin-top:18px;padding:0 15px}@keyframes yurt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@media(max-width:767px){.identity-header{padding-bottom:18px;margin-bottom:25px}.intro .profile{order:2;width:185px;margin:0 auto}.intro .profile .portrait{width:168px;height:168px;margin:auto}.profile figcaption{font-size:10px;padding:0;margin-top:13px;white-space:normal}}

.footer-buttons .contact-button{min-width:0;width:auto;flex:0 0 auto;gap:7px;padding:10px 13px;font-weight:600;min-height:44px}.contact-button img{display:block;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:3px}.footer-buttons .contact-button span{margin:0}

main{padding-top:20px}@media(max-width:767px){main{padding-top:12px}}

.yurt-explanation .yurt-emphasis{color:var(--orange);font-style:italic;font-family:var(--serif);font-size:1.17em;line-height:1;font-weight:400}

.after-description-logo{width:234px;padding:12px;margin:20px auto 24px}.logo-window{position:relative;width:210px;height:86px;overflow:hidden}.logo-window img{display:block;width:272px;height:184px;max-width:none;transform:translate(-12px,-22px)}html[data-theme="dark"] .after-description-logo{background:#fafaf8;border-radius:10px}

.after-description-logo{background:transparent!important;border:0;border-radius:0}.stealth-word svg{animation:none!important;stroke-dasharray:none;stroke-dashoffset:0}.profile{margin-bottom:0}html[data-theme="dark"] .logo-window img{filter:brightness(1.8) saturate(.85)}

main{padding-top:8px}.identity-header{padding-bottom:12px;margin-bottom:22px;gap:0}footer{margin-top:12px;padding-top:12px;padding-bottom:12px}footer p{margin-top:10px}.logo-group{gap:0;padding:0}.logo-slot{display:flex;align-items:center;justify-content:center;width:240px;height:110px;flex:0 0 240px}@media(max-width:767px){main{padding-top:6px}.identity-header{padding-bottom:10px;margin-bottom:20px}footer{margin-top:12px;padding-top:12px;padding-bottom:12px}footer p{margin-top:10px}.logo-group{gap:0;padding:0}.logo-slot{width:180px;height:76px;flex-basis:180px}}

.after-description-logo{width:265px}.logo-window{width:241px;height:100px}.logo-window img{width:311.5px;height:210.5px;transform:translate(-13px,-24.5px);image-rendering:auto}img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.profile,.logo-slot,.logo-window{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

.after-description-logo{display:flex;align-items:center;justify-content:center;width:100%;padding:0;margin:22px auto;background:transparent!important}.logo-window{width:241px;max-width:100%;height:auto;aspect-ratio:482/200;margin:0 auto;overflow:hidden;line-height:0}.logo-window .yurd-logo{display:block;width:100%;height:auto;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html[data-theme="dark"] .logo-window .yurd-logo{filter:brightness(1.8) saturate(.85)}

.profile .portrait,.intro .profile .portrait{border-radius:0;object-fit:contain;filter:none;mask-image:none;-webkit-mask-image:none;border:0;padding:0;height:auto;aspect-ratio:auto}.yurd-name{font-family:var(--sans);font-style:normal;font-size:1.16em;font-weight:550;letter-spacing:.025em;animation:none;text-decoration:none}

.after-description-logo{display:grid;place-items:center;box-sizing:border-box;margin-inline:auto;text-align:center}.logo-window{width:244px;aspect-ratio:488/200;margin-inline:auto;justify-self:center}.logo-window .yurd-logo{margin-inline:auto;max-width:100%;overflow:hidden}

.bio,.intro .bio{font-size:17px;line-height:1.85}.yurt-explanation p{font-size:17px;line-height:1.85}.bio p{margin-bottom:15px}.yurt-explanation p{margin-bottom:22px}@media(max-width:767px){.bio,.intro .bio,.yurt-explanation p{font-size:15px;line-height:1.8}.bio p{margin-bottom:13px}.yurt-explanation p{margin-bottom:19px}}

.logo-window{width:105px;aspect-ratio:105/44}.logo-window .yurd-logo{width:105px;height:44px}.profile{border-radius:50%;overflow:hidden;aspect-ratio:1}.profile .portrait,.intro .profile .portrait{border-radius:50%;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center;border:0;filter:none;mask-image:none;-webkit-mask-image:none}@media(max-width:767px){.intro .profile{width:185px;height:185px}.intro .profile .portrait{width:185px;height:185px}}

.logo-group .iat{width:185px;height:110px;object-fit:contain}@media(max-width:767px){.logo-group .iat{width:140px;height:72px}}

.logo-window{width:200px;aspect-ratio:488/200}.logo-window .yurd-logo{width:200px;height:auto;max-width:100%;shape-rendering:geometricPrecision}.logo-group,.logo-slot{background:var(--bg)}.logo-group{gap:0;padding:0}.logo-slot{width:240px;flex:0 0 240px;justify-content:center;align-items:center}.logo-group .iat{width:165px;height:100px;mix-blend-mode:multiply;filter:none}html[data-theme="dark"] .logo-group .iat{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg)}@media(max-width:767px){.logo-slot{width:180px;flex-basis:180px}.logo-group .iat{width:125px;height:65px}}
.profile .portrait,.intro .profile .portrait{filter:grayscale(100%)}
.logo-window{position:relative;left:-6px}

.profile .portrait,.intro .profile .portrait{filter:none;mask-image:none;-webkit-mask-image:none;border-radius:50%;object-fit:contain}

/* Responsive safeguards. The company ribbon above is deliberately unchanged. */
main, footer { width: 100%; }
main { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(24px, 4.5vw, 64px); row-gap: 0; }
.intro > h2 { grid-column: 1; grid-row: 1; }
.intro > .bio { grid-column: 1; grid-row: 2; justify-self: center; }
.intro > .profile { grid-column: 2; grid-row: 1 / 3; }
.intro > *, .yurt-copy { min-width: 0; }
.bio, .yurt-explanation { overflow-wrap: break-word; }
.identity-header .page-name { font-size: clamp(30px, 4.65vw, 52px); }
.footer-buttons { flex-wrap: wrap; }
.contact-button { font-size: 14px; }
main:focus { outline: none; }
@media (min-width: 768px) { main { padding-inline: 48px; } }
@media (min-width: 768px) and (max-width: 1000px) {
  .intro h2 { font-size: clamp(30px, 3.7vw, 37px); }
  .intro .bio { font-size: 16px; }
}
@media (max-width: 767px) {
  .intro > h2 { order: 1; }
  .intro > .profile { order: 2; flex: none; }
  .intro > .bio { order: 3; }
  .intro h2 { font-size: clamp(29px, 5.6vw, 34px); }
  .yurt h2 { font-size: clamp(28px, 5.2vw, 31px); }
  .perspective h2 { font-size: clamp(26px, 5vw, 29px); }
  .yurt .stealth { font-size: clamp(17px, 3.6vw, 18px); }
  footer { width: auto; }
}
/* On browsers that expose a dual-screen hinge, keep reading content on one panel. */
@media (horizontal-viewport-segments: 2) {
  main, footer { max-width: env(viewport-segment-width 0 0); margin-left: env(viewport-segment-left 0 0); margin-right: auto; }
  .intro { display: flex; flex-direction: column; gap: 18px; }
  .intro > h2 { order: 1; }
  .intro > .profile { order: 2; width: min(185px, 100%); }
  .intro > .bio { order: 3; }
}
/* Preserve comfortable separation in the stacked hero and inset footer rule. */
footer { width: calc(100% - 44px); }
@media (max-width: 767px) {
  .intro { row-gap: 18px; }
  .identity-header .page-name { font-size: clamp(26px, 7.7vw, 30px); }
  footer { width: auto; }
}
/* Keep the keyboard-only shortcut clipped until focused, including full-page captures. */
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }

/* Match the portrait’s circular background to the orange text in either theme. */
.profile { background: transparent; }
.profile .portrait, .intro .profile .portrait { filter: none; }





/* Display the supplied transparent portrait without edge processing. */
.profile .portrait, .intro .profile .portrait { filter: none; clip-path: none; -webkit-clip-path: none; object-fit: cover; }

/* Shared visible height, original proportions, and tighter artwork-to-artwork spacing. */
.companies { --company-logo-height: 65.6px; --company-logo-gap: 52px; }
.logo-group { gap: var(--company-logo-gap); padding: 0 calc(var(--company-logo-gap) / 2); }
.logo-slot { width: auto; flex: 0 0 auto; height: var(--company-logo-height); }
.logo-group .company-logo { display: block; width: auto; height: var(--company-logo-height); flex: none; overflow: hidden; }
.logo-group .company-logo.edf { aspect-ratio: 2187 / 474; }
.logo-group .company-logo.rolls { aspect-ratio: 960 / 1560; }
.logo-group .company-logo.arabelle { aspect-ratio: 2525 / 459; }
.logo-group .company-logo.iat { aspect-ratio: 552 / 401; }
footer .footer-invitation { font-size: clamp(16px, 2vw, 20px); line-height: 1.4; color: var(--blue); font-weight: 500; margin: 2px 0 14px; }
@media (max-width: 767px) {
  .companies { --company-logo-height: 43.2px; --company-logo-gap: 36px; }
}

footer .footer-invitation { max-width: 640px; margin: 2px auto 22px; line-height: 1.65; font-size: clamp(15px, 1.6vw, 18px); font-weight: 400; }
.footer-invitation .contact-underline { position: relative; display: inline-block; color: var(--orange); white-space: nowrap; padding-bottom: 3px; }
.contact-underline svg { position: absolute; left: 0; bottom: -4px; width: 100%; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 240; animation: contact-ink 1.6s ease-out both; }
@keyframes contact-ink { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .contact-underline svg { animation: none; stroke-dasharray: none; } }

/* Bridge from the experience logos directly into the Yurd introduction. */
.yurt .yurd-transition { max-width: 650px; margin: 0 auto 20px; font-size: 17px; line-height: 1.8; color: var(--muted); }
@media (max-width: 767px) { .yurt .yurd-transition { font-size: 15px; margin-bottom: 18px; } }

/* Give the experience ribbon breathing room and pair Yurd’s mark with its headline. */
.companies { margin-top: 54px; margin-bottom: 72px; }
.yurd-brand-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 24px; max-width: 700px; margin: 0 auto 26px; }
.yurd-brand-row .after-description-logo { width: 100%; margin: 0; padding: 0; }
.yurd-brand-row .logo-window { width: 140px; left: 0; margin: 0; }
.yurd-brand-row .logo-window .yurd-logo { width: 100%; height: auto; }
.yurd-brand-row .yurt-heading { margin: 0; }
.yurd-brand-row h2 { margin: 0; }
@media (max-width: 767px) {
  .companies { margin-top: 28px; margin-bottom: 46px; }
  .yurd-brand-row { grid-template-columns: 90px minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
  .yurd-brand-row .logo-window { width: 90px; }
  .yurd-brand-row h2 { font-size: clamp(22px, 5.8vw, 31px); line-height: 1.2; }
}

/* Center the heading with the smaller Yurd logo immediately below it. */
.yurd-brand-row { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.yurd-brand-row .yurt-heading { width: 100%; }
.yurd-brand-row .after-description-logo { width: auto; }
@media (max-width: 767px) { .yurd-brand-row { gap: 14px; } .yurd-brand-row h2 { font-size: clamp(28px, 5.2vw, 31px); } }

/* Keep the introductory phrase together, with the emphasized words on line two. */
.yurd-brand-row .challenge-first-line { white-space: nowrap; }
.yurd-brand-row h2 { font-size: clamp(26px, 4vw, 42px); }
.contact-underline svg { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
@media (max-width: 767px) { .yurd-brand-row h2 { font-size: clamp(18px, 6.1vw, 31px); } }
@media (max-width: 767px) {
  .footer-buttons { gap: 8px; }
  .footer-buttons .contact-button { padding-inline: 9px; gap: 6px; font-size: 13px; }
}

/* Balance spacing above/below the mark and optically shift it slightly left. */
.yurd-brand-row { gap: 26px; }
.yurd-brand-row .logo-window { left: -6px; }
@media (max-width: 767px) { .yurd-brand-row { gap: 24px; } }
/* Keep contact button borders blue in every interaction state. */
.footer-buttons .contact-button,
.footer-buttons .contact-button:hover,
.footer-buttons .contact-button:active,
.footer-buttons .contact-button:focus,
.footer-buttons .contact-button:visited {
  border: 1px solid var(--blue);
  color: var(--blue);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.footer-buttons .contact-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Four identical runs cover the viewport through the invisible loop boundary. */
.logo-track { will-change: transform; }

/* Keep the ribbon on the same compositor layer across its loop boundary. */
.logo-track { backface-visibility: hidden; isolation: isolate; }
.logo-group .company-logo { transform: translateZ(0); backface-visibility: hidden; }

/* Slightly shorter, consistent footer buttons on every screen. */
.footer-buttons .contact-button { min-height: 40px; padding-block: 8px; }

/* Preserve the supplied portrait's colours independently of the page theme. */
.profile { isolation: isolate; }
.profile .portrait, .intro .profile .portrait {
  color-scheme: only light;
  forced-color-adjust: none;
  filter: none;
  -webkit-filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.theme-control { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.theme-toggle { font: 500 12px var(--sans); color: var(--blue); background: transparent; border: 1px solid var(--blue); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Theme control above the divider; identity immediately below it. */
.theme-control { padding-bottom: 12px; border-bottom: 1px solid var(--outline); margin-bottom: 20px; }
.identity-header { border-bottom: 0; padding-bottom: 0; }

/* Lead with the tagline above the divider and the name beneath it. */
.theme-control { flex-wrap: wrap; row-gap: 18px; }
.theme-control h2 { flex: 0 0 100%; margin: 0 0 16px; text-align: center; color: var(--blue); font-size: clamp(34px, 4.3vw, 60px); font-weight: 450; line-height: 1.12; letter-spacing: -.04em; }
@media (max-width: 767px) { .theme-control h2 { font-size: clamp(28px, 7vw, 36px); margin-bottom: 10px; } }

.intro > .bio, .intro > .profile { grid-row: 1; }

/* Keep the title and mode button on one row; group the name with its biography. */
.theme-control { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(12px, 2vw, 24px); }
.theme-control h2 { order: 0; flex: 1 1 0; min-width: 0; margin: 0; text-align: left; font-size: clamp(25px, 3.5vw, 44px); }
.theme-control .theme-toggle { order: 1; flex: 0 0 auto; }
.bio .identity-header { margin: 0 0 22px; padding: 0; }
.bio .identity-contact { width: 100%; }
.bio .page-name { font-size: clamp(30px, 4vw, 48px); }
@media (max-width: 767px) {
  .theme-control h2 { font-size: clamp(19px, 4.8vw, 30px); }
  .theme-control .theme-toggle { font-size: 11px; padding-inline: 10px; }
  .bio .identity-header { margin-bottom: 16px; }
}

.theme-control { justify-content: center; }
.theme-control h2 { text-align: center; }

/* Restore the name above the divider and tagline above the biography. */
.theme-control .identity-header { width: 100%; margin: 0; padding: 0; }
.bio > h2 { margin: 0 0 24px; text-align: center; }

.intro > .bio { grid-row: 2; }
.intro > .profile { grid-row: 1 / 3; }

/* Pale orange bookends with edge-to-edge dividers. */
.theme-control, footer {
  --blue: #10367a;
  --ink: #000;
  --muted: #000;
  background: #f0f6fc;
  color: var(--ink);
}
.theme-control { width: 100%; margin: 0 0 22px; padding: 20px max(22px, calc((100% - 1024px) / 2)); border-bottom: 1px solid var(--outline); }
footer { width: 100%; max-width: none; margin: 26px 0 0; padding: 24px max(22px, calc((100% - 1024px) / 2)) 18px; border-top: 1px solid var(--outline); }
@media (max-width: 767px) {
  .theme-control { padding-block: 16px; margin-bottom: 18px; }
  footer { width: 100%; margin: 22px 0 0; padding-block: 20px 16px; }
}

/* Keep the footer flush with the viewport, including phone safe areas. */
html { min-height: 100%; background: #f0f6fc; }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.theme-control, footer { flex-shrink: 0; }
.theme-control { border-radius: 0 0 24px 24px; }
footer { border-radius: 24px 24px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
@media (max-width: 767px) { footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); } }

/* Carry the header fill behind the phone's top safe area. */
body { margin-top: 0; padding-top: 0; }
.theme-control { padding-top: calc(20px + env(safe-area-inset-top)); }
@media (max-width: 767px) { .theme-control { padding-top: calc(16px + env(safe-area-inset-top)); } }

/* Soft blue bands with understated inset rules. */
.theme-control, footer { position: relative; background: #f0f6fc; border: 0; }
.theme-control { border-radius: 0; }
footer { border-radius: 24px 24px 0 0; }
.theme-control::after, footer::before {
  content: ""; position: absolute; left: max(22px, calc((100% - 1024px) / 2)); right: max(22px, calc((100% - 1024px) / 2)); height: 1px; background: #c8c9ca;
}
.theme-control::after { bottom: 0; }
footer::before { top: 0; }

/* Plain header; retain only the footer's blue band without a divider. */
html { background: var(--bg); }
.theme-control { --blue: inherit; --ink: inherit; --muted: inherit; background: var(--bg); }
footer::before { content: none; }

footer { background-color: #dcebf9; }

footer { --blue: inherit; --ink: inherit; --muted: inherit; background: var(--bg); }

/* Compact sticky identity bar and accessible icon-only theme control. */
.theme-control { position: sticky; top: 0; z-index: 50; justify-content: space-between; gap: 16px; padding: calc(10px + env(safe-area-inset-top)) max(22px, calc((100% - 1024px) / 2)) 10px; margin-bottom: 22px; background: var(--bg); }
.theme-control .identity-header { width: auto; margin: 0; padding: 0; }
.theme-control .identity-contact { width: auto; }
.theme-control .page-name { font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.theme-control .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: var(--blue); background: transparent; }
.theme-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun-icon { display: none; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
html[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
main { flex: 0 0 auto; }
.yurt { margin-bottom: 14px; }
footer { margin-top: 10px; padding-top: 20px; }
footer::before { content: ""; }
@media(max-width:767px) { .theme-control .page-name { font-size: 23px; } footer { margin-top: 8px; padding-top: 18px; } .yurt { margin-bottom: 10px; } }

/* Personal brand lockup and full-width dividers with up/down turned ends. */
.theme-control .identity-contact { gap: 12px; }
.header-mark { display: block; width: 36px; height: 36px; border-radius: 9px; object-fit: contain; flex: 0 0 auto; }
.identity-divider { display: block; width: 1px; height: 28px; background: var(--outline); flex: 0 0 auto; }
.theme-control::after, footer::before { left: 0; right: 0; height: 22px; background: none; border-color: var(--outline); border-style: solid; pointer-events: none; }
.theme-control::after { bottom: 0; border-width: 0 1px 1px; border-radius: 0 0 22px 22px; }
footer::before { top: 0; border-width: 1px 1px 0; border-radius: 22px 22px 0 0; }
@media(max-width:767px) {
  .theme-control { gap: 8px; padding-inline: 16px; }
  .theme-control .identity-contact { gap: 9px; }
  .theme-control .page-name { font-size: clamp(18px, 5vw, 23px); white-space: nowrap; }
  .header-mark { width: 32px; height: 32px; }
  .identity-divider { height: 25px; }
}

/* Center the name independently between the existing mark and mode control. */
.theme-control .identity-header, .theme-control .identity-contact { display: contents; }
.theme-control .page-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.theme-control .theme-toggle { margin-left: auto; }
.theme-control::after, footer::before { height: 100%; border-color: #f5b28f; }
.theme-control::after { top: 0; bottom: 0; }
footer::before { top: 0; bottom: 0; }
@media(max-width:767px) { .theme-control .page-name { font-size: clamp(18px, 5vw, 23px); max-width: calc(100% - 132px); } }

/* Larger centered identity with simple edge-to-edge orange rules. */
.theme-control .page-name { font-size: clamp(26px, 3vw, 34px); }
.theme-control::after, footer::before { height: 1px; border: 0; border-radius: 0; background: #f5b28f; }
.theme-control::after { top: auto; bottom: 0; }
footer::before { top: 0; bottom: auto; }
@media(max-width:767px) { .theme-control .page-name { font-size: clamp(22px, 6vw, 28px); } }

/* Monochrome social links and a more prominent uppercase identity. */
.theme-control .page-name { font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.025em; }
.footer-buttons .contact-button { width: 48px; height: 44px; min-height: 44px; padding: 10px; border: 1px solid currentColor; border-radius: 12px; color: #171717; }
.footer-buttons .contact-button:hover, .footer-buttons .contact-button:focus, .footer-buttons .contact-button:active, .footer-buttons .contact-button:visited { border: 1px solid currentColor; color: #171717; }
.contact-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .footer-buttons .contact-button { color: #f1f0ec; }
@media(max-width:767px) { .theme-control .page-name { font-size: clamp(22px, 5.8vw, 30px); max-width: calc(100% - 112px); } }

/* Match the tagline typeface with a bold header identity. */
.theme-control .page-name { font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; }
.footer-buttons .contact-button,
.footer-buttons .contact-button:hover,
.footer-buttons .contact-button:focus,
.footer-buttons .contact-button:active,
.footer-buttons .contact-button:visited { border: 0; background: transparent; }