/* Portfolio art direction: editorial scale, warm metal, and quiet technical detail. */
:root { --accent: #e9b58e; --line: #c7aa8d30; --muted: #b9b1aa; --paper: #f0ece5; --ink: #292321; }
body { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.container, .preview-shell { width: min(1480px,calc(100% - clamp(44px,10vw,176px))); }
.eyebrow { font-size: 10px; letter-spacing: .13em; }
.site-header { height: 80px; background: #0b111bf5; border-color: #c7aa8d26; }
.brand__mark, .preview-brand__portrait { border-color: #cda47b77; border-radius: 50%; }
.brand__name { font-weight: 500; letter-spacing: .1em; }
.desktop-nav a { position: relative; font-size: 10px; letter-spacing: .09em; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; bottom: 9px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.button, .nav-action, .preview-button { border-radius: 0; font-size: 10px; letter-spacing: .1em; }
.button:hover, .button:focus-visible { transform: none; box-shadow: none; }
.hero { background: radial-gradient(ellipse at 78% 46%, #253b4d5e, transparent 52%), radial-gradient(ellipse at 30% 92%, #b77b4920, transparent 65%), #0c1721; }
.hero::before { opacity: .45; }
.hero::after { background: radial-gradient(ellipse, #ccaa7c12, #829eae0d 42%, transparent 70%); animation: hero-atmosphere 20s ease-in-out infinite alternate; animation-play-state: paused; }
.hero.is-in-view::after { animation-play-state: running; }
html[data-entry="booting"] .hero::after, html[data-entry="waiting"] .hero::after, html[data-entry="leaving"] .hero::after, html.document-paused .hero::after { animation-play-state: paused; }
.hero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#0c1721b8 0%,#0c17217a 38%,transparent 66%); }
#hero-title:focus { outline: none; }
.hero__content { padding-top: 31px; padding-bottom: 58px; }
.hero__topline { font-size: 9px; letter-spacing: .11em; color: #b5afa9; }
.signal-dot { width: 4px; height: 4px; box-shadow: none; }
.hero__stage { gap: 58px 48px; padding-top: 82px; grid-template-columns: minmax(0,1.18fr) minmax(280px,.82fr); }
.hero h1 { font-weight: 500; font-size: clamp(62px,7.2vw,112px); letter-spacing: -.075em; line-height: .98; }
.hero__eyebrow { font-size: 9px; margin-bottom: 26px; }
.hero__statement { grid-template-columns: 100px minmax(0,1fr); gap: 28px; margin-top: 39px; border-color: #b99c784d; }
.hero__statement-index { font-size: 8px; line-height: 1.6; letter-spacing: .07em; }
.hero__statement p { font-size: clamp(26px,2.35vw,36px); line-height: 1.22; }
.hero__statement div > span { color: #c4beb7; font-size: 15px; max-width: 430px; }
.hero__actions { margin-left: 128px; }
.hero__portrait-note { font-size: 8px; color: #b5afa9; }
.hero__index { padding: 0; border: 0; border-top: 1px solid #a3856455; background: transparent; }
.hero__index-top { padding: 17px 0; color: #bca78f; font-size: 9px; }
.hero__index a { padding: 20px 19px; min-height: 105px; border-color: #b99c7833; }
.hero__index a:first-of-type { padding-left: 0; }
.hero__index a strong { font-size: clamp(18px,1.35vw,23px); }
.hero__index a small { font-size: 8px; letter-spacing: .06em; color: #b3aaa1; }
.hero__index-foot { font-size: 8px; border-color: #b99c7833; color: #b3aaa1; padding-top: 16px; }
.work { background: #0e1923; padding-block: 126px 138px; }
.section-heading { align-items: flex-end; margin-bottom: 68px; }
.section-heading h2 { font-size: clamp(56px,5.7vw,91px); }
.section-heading > p { max-width: 345px; font-size: 16px; color: #b9b1aa; }
.project-grid { gap: 66px 32px; }
.project { border-color: #bd9c7830; background: #14232e; }
.project:has(.project-card:hover), .project:focus-within { border-color: #d4ab8170; }
.project-card__visual { height: 380px; }
.project--feature .project-card { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.project--feature .project-card__visual { min-height: 540px; }
.project--reverse .project-card { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.project-card__body { min-height: 410px; padding: clamp(28px,3vw,46px); background: linear-gradient(125deg,#1a2b3655,transparent 65%); }
.project-card__meta { font-size: 9px; line-height: 1.6; letter-spacing: .1em; color: #dcb894; margin-bottom: 22px; }
.project-card__title { font-size: clamp(30px,2.6vw,41px); letter-spacing: -.045em; }
.project-card__headline { margin-top: 22px; color: #ece2d8; font-size: clamp(26px,2.2vw,34px); line-height: 1.25; }
.project-card__description { max-width: 520px; color: #bfb7ae; line-height: 1.75; }
.project-card__tags { gap: 8px 14px; }
.project-card__tags > span { padding: 0; border: 0; color: #b3aaa1; font-size: 9px; }
.project-card__tags > span + span::before { content: '/'; color: #886d54; margin-right: 14px; }
.project-card__proof { margin-top: 28px; font-size: 8px; color: #c2b3a5; }
.project-card__destination { margin-top: 28px; padding-top: 22px; border-top: 1px solid #c7aa8d30; font-size: 9px; }
.project-card__topline, .project-card__signal { font-size: 9px; }
.project-card__signal { padding: 9px 12px; background: #101c25da; border: 1px solid #bea48155; }
.product-window { width: 72%; height: 51%; border-color: #c5b29a80; border-radius: 3px; box-shadow: 0 18px 45px #0006; }
.product-window__bar { background: #202c35; }
.project-notes { border-color: #bd9c7830; }
.project-notes summary { min-height: 62px; font-size: 9px; padding-inline: clamp(28px,3vw,46px); }
.project-notes__content { padding: 5px clamp(28px,3vw,46px) 34px; }
.project-notes__grid { gap: 26px; }
.project-notes p { font-size: 15px; line-height: 1.75; }
.project-notes__credit { margin-top: 20px !important; color: #a89c91 !important; font: 400 10px/1.7 var(--mono) !important; }
.approach { padding-block: 112px 122px; background: var(--paper); color: var(--ink); }
.approach__intro h2 { font-size: clamp(56px,6.1vw,100px); letter-spacing: -.067em; margin-bottom: 64px; }
.approach__principle { position: relative; padding-top: 28px; }
.approach__principle h3 { margin-top: 36px; font-weight: 500; font-size: clamp(29px,2.5vw,40px); }
.principle-art { display: block; width: 112px; height: 88px; margin-top: 34px; color: #9c6a4b; }
.principle-art svg { width: 100%; height: 100%; overflow: visible; }
.principle-art__base { fill: none; stroke: currentColor; stroke-width: 1; opacity: .38; }
.principle-art__accent { fill: none; stroke: #895437; stroke-width: 1.4; stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset .9s var(--ease), transform .7s var(--ease); transform-origin: center; }
.approach__principle.is-interacting .principle-art__accent, .approach__principle:focus-within .principle-art__accent { stroke-dashoffset: 0; transform: translateY(-3px); }
.approach__principle.is-pressed .principle-art__accent { transition-duration: .25s; }
.principle-note { margin-top: 28px; }
.principle-note summary { font-size: 9px; }
.approach__principle p { color: #625b53; }
.about { background: #142530; padding-block: 100px 102px; }
.about__masthead { border-color: #c7aa8d40; }
.about__story { grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: clamp(44px,7vw,110px); padding-block: 62px 78px; }
.about h2 { font-size: clamp(58px,6.1vw,98px); }
.about__body { align-self: start; }
.about__body p { color: #c1b8ae; line-height: 1.8; }
.about__body .about__lead { font-size: clamp(22px,2vw,29px); color: #eee5dc; line-height: 1.4; }
.about__practice { margin-top: 48px; max-width: 350px; border-top: 1px solid #c7aa8d40; }
.about__practice span { display: flex; align-items: center; gap: 20px; min-height: 45px; border-bottom: 1px solid #c7aa8d26; color: #d0b99f; font: 400 10px/1.5 var(--mono); letter-spacing: .07em; }
.about__practice i { color: #8d7c6c; font-style: normal; }
.about__signature { border-color: #c7aa8d40; font-size: 9px; }
.roadmap { margin-top: 56px; border-color: #c7aa8d40; }
.roadmap__item + .roadmap__item { border-color: #c7aa8d40; }
.roadmap__item p { font-size: 18px; color: #ded4c9; }
.roadmap__item span { font-size: 9px; }
.contact { overflow: hidden; background: #e9b992; min-height: 620px; padding-top: 104px; }
.contact__inner { position: relative; }
.contact h2 { font-size: clamp(65px,7.2vw,114px); max-width: 1000px; }
.contact h2 em { color: #865236; }
.contact__lead { max-width: 520px; font-size: 18px; }
.contact__invitation { position: absolute; right: 0; top: 62px; display: grid; place-items: center; width: clamp(110px,13vw,194px); aspect-ratio: 1; border: 1px solid #76533a77; border-radius: 50%; color: #493022; transition: background .5s, color .5s; }
.contact__invitation::before { content: ''; position: absolute; inset: 10px; border: 1px solid #76533a33; border-radius: 50%; transition: inset .5s var(--ease); }
.contact__invitation svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .55s var(--ease); }
.contact__invitation:hover, .contact__invitation:focus-visible, .contact__invitation.is-pressed { background: #493022; color: #f7debf; }
.contact__invitation:hover::before, .contact__invitation:focus-visible::before { inset: 17px; border-color: #f7debf44; }
.contact__invitation:hover svg, .contact__invitation.is-pressed svg { transform: translate(4px,-4px); }
.contact__invitation.is-pressed { background: #493022; color: #f7debf; }
.contact__footer { margin-top: 94px; padding-top: 24px; font-size: 9px; }
.contact__socials a { position: relative; }
.contact__socials a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.contact__socials a:hover::after, .contact__socials a:focus-visible::after { transform: scaleX(1); }
/* Project field notes use the same palette, with diagram-specific geometry. */
body[data-project="slm"] { --accent: #ead0ad; }
body[data-project="business"] { --accent: #d8ac7f; }
.preview-main { background: radial-gradient(ellipse at 77% 38%,#30404a33,transparent 60%),#0d1822; }
.preview-main__grid { opacity: .16; background-size: 72px 72px; }
.preview-header { border-color: #c7aa8d30; }
.preview-header__back { font-size: 9px; }
.preview-layout { gap: clamp(40px,6vw,95px); padding-block: 76px 80px; }
.preview-copy h1 { font-size: clamp(60px,6.7vw,112px); letter-spacing: -.07em; }
.preview-lead { font-size: 18px; line-height: 1.75; color: #c4bcb3; }
.preview-kicker { font-size: 9px; }
.preview-kicker__dot, .preview-console__light { width: 4px; height: 4px; box-shadow: none; }
.preview-console { padding-inline: 26px; border-color: #c7aa8d50; background: #152630; backdrop-filter: none; box-shadow: 0 20px 55px #050b122e; }
.preview-console::before { height: 1px; background: #e9c7a3; }
.preview-console__top { color: #bcad9d; font-size: 9px; }
.preview-console__visual { background: radial-gradient(ellipse,#bb997712,transparent 65%); }
.preview-console__core { border-color: #c5a480; background: #10202c; box-shadow: none; }
.preview-console__core small { font-size: 8px; }
.preview-console__orbit { border-color: #c7aa8d33; }
.preview-console__orbit--outer { box-shadow: none; }
.preview-console__cross { background: #c7aa8d19; }
.preview-console__satellite { box-shadow: none; width: 5px; height: 5px; background: #e9c7a3; border-color: #e9c7a3; }
.preview-console__readout { min-height: 178px; padding-top: 25px; }
.preview-console__phase { min-height: 54px; }
.preview-console__explore { font-size: 8px; border-color: #c7aa8d50; background: #132430; }
body[data-project="rag"] .preview-console__orbit { border-radius: 4px; }
body[data-project="rag"] .preview-console__orbit--outer { transform: rotate(-8deg); width: 62%; }
body[data-project="rag"] .preview-console__orbit--inner { transform: rotate(8deg); width: 49%; border-style: solid; }
body[data-project="rag"] .preview-console[data-stage="2"] .preview-console__orbit--inner { transform: rotate(-4deg) scale(.9); }
body[data-project="rag"] .preview-console[data-stage="3"] .preview-console__orbit--inner { transform: rotate(0) scale(1.06); }
body[data-project="slm"] .preview-console__orbit { border-radius: 3px; aspect-ratio: 1.4; transform: rotate(-14deg); border-style: solid; }
body[data-project="slm"] .preview-console__orbit--inner { transform: rotate(14deg); }
body[data-project="business"] .preview-console__orbit--inner { border-style: solid; border-right-color: #e9c7a3; }
@media (min-width:1101px) { #project-praj { margin-top: 90px; } }
@media (max-width:1100px) {
  .hero__stage { gap: 44px 28px; }
  .hero h1 { font-size: clamp(52px,6.7vw,78px); }
  .hero__statement { grid-template-columns: 1fr; gap: 12px; }
  .hero__actions { margin-left: 0; }
  .project--feature .project-card__visual { min-height: 510px; }
  .project-card__body { padding: 30px; }
  .contact__invitation { top: 80px; width: 110px; }
  .contact h2 { max-width: calc(100% - 110px); }
}
@media (max-width:760px) {
  .container, .preview-shell { width: calc(100% - 44px); }
  .site-header { height: 70px; }
  .hero__stage { grid-template-columns: 1fr; padding-top: 68px; gap: 46px; }
  .hero__veil { background: linear-gradient(#0c1721b8 0%,#0c172180 28%,transparent 48%); }
  .hero h1 { font-size: clamp(40px,10.2vw,78px); }
  .hero__portrait { width: min(100%,360px); }
  .hero__index a { padding-inline: 12px; }
  .hero__index a:first-of-type { padding-left: 12px; }
  .hero__index a strong { font-size: 20px; }
  .hero__index a small { font-size: 8px; }
  .work { padding-block: 84px 88px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2 { font-size: clamp(48px,9vw,72px); }
  .project-grid { gap: 32px; }
  .project--feature .project-card { display: flex; }
  .project-card__visual, .project--feature .project-card__visual { height: clamp(290px,65vw,410px); min-height: 0; }
  .project-card__body { min-height: 0; padding: 30px; }
  .project-card__title { font-size: 32px; }
  .project-card__headline { font-size: 28px; }
  .project-card__destination { margin-top: 26px; }
  .product-window { width: 78%; height: 53%; }
  .approach { padding-block: 83px 90px; }
  .approach__intro h2 { font-size: clamp(47px,8vw,70px); margin-bottom: 40px; }
  .principle-art { position: absolute; top: 9px; right: 10px; width: 82px; height: 66px; margin: 0; }
  .approach__principle h3 { margin-top: 34px; }
  .about { padding-block: 82px; }
  .about__story { grid-template-columns: 1fr; gap: 36px; padding-block: 45px 50px; }
  .about h2 { font-size: clamp(51px,9vw,76px); }
  .about__practice { margin-top: 28px; max-width: none; display: flex; flex-wrap: wrap; border: 0; gap: 8px 22px; }
  .about__practice span { border: 0; gap: 9px; min-height: 30px; font-size: 8px; }
  .contact { min-height: 580px; padding-top: 83px; }
  .contact h2 { max-width: none; font-size: clamp(48px,9vw,76px); }
  .contact__invitation { display: none; }
  .contact__lead { font-size: 17px; }
  .contact__footer { margin-top: 76px; }
  .preview-layout { padding-block: 66px; }
  .preview-copy h1 { font-size: clamp(48px,10.5vw,80px); }
  .preview-lead { font-size: 17px; }
  .preview-console { padding-inline: 20px; }
}
@media (max-width:400px) {
  .container, .preview-shell { width: calc(100% - 40px); }
  .hero h1 { font-size: 10vw; }
  .hero__eyebrow { font-size: 8px; }
  .hero__index a strong { font-size: 19px; }
  .section-heading h2 { font-size: 45px; }
  .project-card__body { padding: 27px 23px; }
  .project-card__title { font-size: 28px; }
  .project-card__headline { font-size: 26px; }
  .project-card__topline, .project-card__signal { font-size: 8px; gap: 9px; }
  .project-notes summary, .project-notes__content { padding-inline: 23px; }
  .approach__intro h2 { font-size: 43px; }
  .contact h2 { font-size: 12vw; }
}
@media (prefers-reduced-motion:reduce) {
  .principle-art__accent { stroke-dashoffset: 0; }
  .principle-art__accent, .contact__invitation svg { transform: none !important; }
  .project-card__art, .product-window { transform: none !important; }
}