:root {
  --paper: #f4f2eb;
  --ink: #171816;
  --muted: #73736f;
  --line: rgba(23, 24, 22, .16);
  --blue: #2538dc;
  --blue-deep: #1a2aad;
  --lime: #d7ff51;
  --orange: #ff6a43;
  --violet: #c9b9ff;
  --white: #fffefa;
  --body: 'DM Sans', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.site-header { width: min(1320px, calc(100% - 104px)); min-height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand-name { flex: 0 0 auto; color: var(--ink); font: 700 17px/1 var(--display); letter-spacing: -.055em; text-decoration: none; }
.brand-period { color: var(--blue); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.main-nav a { color: #51514c; font-size: 11px; font-weight: 600; text-decoration: none; transition: color .18s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--blue); }
.main-nav .nav-contact { padding: 11px 15px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); }
.main-nav .nav-contact:hover { border-color: var(--blue); color: var(--blue); }
.main-nav .nav-contact span { padding-left: 11px; }
.home-hero, .about-strip, .areas-section, .shared-principle, .home-experience, .recommendations-overview, .contact-section, .site-footer { width: min(1320px, calc(100% - 104px)); margin: 0 auto; }
.home-hero { position: relative; min-height: 620px; display: grid; grid-template-columns: 1.03fr .97fr; grid-template-rows: 1fr auto; align-items: center; column-gap: 6%; padding-top: 48px; }
.hero-copy { padding: 40px 0 65px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: #656660; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.eyebrow-mark { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(37,56,220,.1); }
h1, h2, h3, h4, p, figure { margin-top: 0; }
.home-hero h1 { margin: 26px 0 21px; font: 600 clamp(72px, 8.6vw, 122px)/.88 var(--display); letter-spacing: -.095em; }
.home-hero h1 span { color: var(--blue); }
.hero-deck { max-width: 490px; margin-bottom: 27px; color: #555650; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.button { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 999px; font-size: 10px; font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--blue); }
.button-light { background: var(--lime); color: var(--ink); }
.quiet-link, .text-arrow { display: inline-flex; align-items: center; gap: 11px; font-size: 10px; font-weight: 700; text-decoration: none; }
.quiet-link:hover, .text-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-portrait { position: relative; width: min(100%, 495px); height: 470px; justify-self: end; margin: 0 10px 43px 0; isolation: isolate; }
.hero-portrait img { position: absolute; inset: 18px 0 21px 23px; z-index: 1; width: calc(100% - 23px); height: calc(100% - 39px); object-fit: cover; object-position: 50% 44%; border: 10px solid var(--paper); border-radius: 38% 5% 32% 5%; background: #d9d5cf; filter: saturate(.8); }
.portrait-shape { position: absolute; display: block; }
.portrait-shape-blue { inset: 0 5% 6% 4%; background: var(--blue); border-radius: 37% 4% 31% 4%; transform: rotate(-2deg); }
.portrait-shape-lime { width: 88px; height: 88px; right: -4px; bottom: 15%; z-index: 2; background: var(--lime); border-radius: 50%; }
.hero-portrait figcaption { position: absolute; z-index: 3; left: 44px; right: 20px; bottom: 36px; display: flex; justify-content: space-between; color: var(--white); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 1px 5px rgba(0,0,0,.7); }
.hero-baseline { grid-column: 1 / -1; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.hero-baseline a { text-decoration: none; color: var(--ink); }
.hero-baseline a:hover { color: var(--blue); }
.about-strip { display: grid; grid-template-columns: .7fr 1.4fr .8fr; align-items: center; gap: 7%; padding: 73px 7.3%; background: var(--lime); }
.about-lead { margin: 0; font: 600 clamp(27px, 3.2vw, 43px)/.96 var(--display); letter-spacing: -.07em; }
.about-lead span { color: var(--blue); }
.about-strip > p:nth-child(2) { max-width: 530px; margin: 0; font-size: 14px; line-height: 1.8; }
.about-strip .text-arrow { white-space: nowrap; }
.areas-section { padding: 96px 0 105px; }
.section-topline { min-height: 31px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); color: #6f706a; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.areas-intro, .experience-heading, .recommendation-heading, .journey-heading { display: flex; justify-content: space-between; align-items: end; gap: 45px; padding: 40px 0 31px; }
.areas-intro h2, .experience-heading h2, .recommendation-heading h2, .journey-heading h2 { margin: 0; font: 600 clamp(54px, 6.7vw, 88px)/.88 var(--display); letter-spacing: -.085em; }
.areas-intro h2 span, .experience-heading h2 span, .recommendation-heading h2 span, .journey-heading h2 span { color: var(--blue); }
.areas-intro > p, .experience-heading > p, .recommendation-heading > p, .journey-heading > p { max-width: 330px; margin: 0 1.7% 4px 0; color: #62635e; font-size: 13px; line-height: 1.75; }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.area-card { position: relative; min-height: 410px; padding: 25px 27px 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; text-decoration: none; transition: transform .22s ease; }
.area-card:hover { transform: translateY(-4px); }
.area-tech { background: var(--blue); color: #fff; }
.area-soccer { background: var(--orange); color: var(--ink); }
.area-card-top { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; }
.area-number { font: 600 14px/1 var(--display); }
.area-label { justify-self: center; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.area-open { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 17px; transition: background .2s ease,color .2s ease; }
.area-card:hover .area-open { background: var(--ink); color: white; }
.area-card-main { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.area-word { font: 600 clamp(57px, 7.8vw, 94px)/.83 var(--display); letter-spacing: -.09em; }
.area-tech .area-word { color: var(--lime); }
.area-note { margin-top: 25px; color: currentColor; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.area-card-bottom { padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid currentColor; font-size: 10px; }
.area-cta { white-space: nowrap; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.area-cta b { padding-left: 14px; font-size: 14px; }
.shared-principle { padding: 72px 7.2% 76px; background: var(--ink); color: white; }
.shared-principle .section-topline { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.63); }
.shared-main { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 8%; padding: 48px 0 43px; }
.shared-main h2 { margin: 0; font: 600 clamp(43px, 6vw, 78px)/.95 var(--display); letter-spacing: -.08em; }
.shared-main h2 span { color: var(--lime); }
.shared-main p { max-width: 400px; margin: 0 0 5px; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.8; }
.principle-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.principle-row article { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.24); }
.principle-row article > span { color: var(--lime); font-size: 8px; font-weight: 700; }
.principle-row h3 { margin: 20px 0 8px; font: 600 22px/1.1 var(--display); letter-spacing: -.05em; }
.principle-row p { max-width: 280px; margin: 0; color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.7; }
.home-experience { padding: 98px 0 103px; }
.experience-heading { padding-bottom: 40px; }
.timeline-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.timeline-lane { min-width: 0; padding: 24px 26px 16px; }
.timeline-lane-tech { background: #e4e7ff; }
.timeline-lane-soccer { background: #ffe2d6; }
.lane-heading { min-height: 43px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; margin-bottom: 3px; }
.lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.timeline-lane-soccer .lane-dot { background: var(--orange); }
.lane-heading h3 { margin: 0; font: 600 19px/1 var(--display); letter-spacing: -.04em; }
.lane-heading a { color: #484944; font-size: 8px; font-weight: 700; text-decoration: none; }
.lane-heading a:hover { text-decoration: underline; }
.mini-role { display: grid; grid-template-columns: 100px 1fr; gap: 13px; padding: 18px 0; border-top: 1px solid rgba(23,24,22,.14); }
.mini-role time { padding-top: 3px; color: #666660; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.mini-role h4 { margin: 0 0 5px; font: 600 14px/1.1 var(--display); letter-spacing: -.03em; }
.mini-role p { margin: 0; color: #60615b; font-size: 9px; line-height: 1.5; }
.recommendations-overview { padding: 85px 0 92px; }
.recommendation-heading { padding: 41px 0 34px; }
.recommendation-panels { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.recommendation-panel { min-height: 222px; padding: 19px 21px 23px; }
.rec-panel-tech { background: var(--blue); color: white; }
.rec-panel-soccer { background: var(--orange); color: var(--ink); }
.rec-panel-title { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid currentColor; }
.rec-panel-title > span { font-size: 8px; font-weight: 700; }
.rec-panel-title h3 { margin: 0; font: 600 16px/1 var(--display); }
.rec-panel-title a { font-size: 8px; font-weight: 700; text-decoration: none; }
.rec-panel-title a:hover { text-decoration: underline; }
.home-quote { margin: 23px 0 0; }
.home-quote blockquote { margin: 0; font: 500 17px/1.42 var(--display); letter-spacing: -.03em; }
.home-quote figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 17px; font-size: 8px; }
.home-quote figcaption strong { font-size: 9px; }
.home-quote figcaption a { width: fit-content; color: inherit; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.rec-empty { max-width: 380px; margin: 24px 0 0; font-size: 13px; line-height: 1.6; }
.recommendation-footnote { margin: 16px 0 0; color: #6f706a; font-size: 8px; }
.contact-section { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 8%; padding: 67px 7.3% 73px; background: var(--violet); }
.contact-section .eyebrow, .detail-contact .eyebrow { color: #55515f; }
.contact-section h2, .detail-contact h2 { margin: 19px 0 0; font: 600 clamp(54px, 7vw, 86px)/.88 var(--display); letter-spacing: -.09em; }
.contact-section h2 span, .detail-contact h2 span { color: var(--blue); }
.contact-copy > p { max-width: 390px; margin: 0 0 21px; color: #45444b; font-size: 13px; line-height: 1.8; }
.contact-email { display: inline-flex; align-items: center; gap: 17px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: clamp(15px, 2vw, 21px); font-weight: 700; text-decoration: none; }
.contact-email:hover { color: var(--blue); }
.contact-links { display: flex; gap: 19px; margin-top: 20px; }
.contact-links a { font-size: 9px; font-weight: 700; text-decoration: none; }
.contact-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #64655f; font-size: 8px; }
.site-footer .brand-name { color: var(--ink); font-size: 14px; }
.site-footer > a:not(.brand-name) { color: var(--ink); font-weight: 700; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Detail pages keep each field visually distinct and independently navigable. */
.ovi-detail .site-header { width: min(1320px, calc(100% - 104px)); }
.detail-hero { width: min(1320px, calc(100% - 104px)); min-height: 492px; margin: auto; padding: 58px 6.4%; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 7%; }
.tech-detail-hero { background: var(--blue); color: white; }
.soccer-detail-hero { background: var(--orange); color: var(--ink); }
.detail-hero .eyebrow { color: rgba(255,255,255,.76); }
.soccer-detail-hero .eyebrow { color: rgba(23,24,22,.63); }
.tech-detail-hero .eyebrow-mark { background: var(--lime); box-shadow: 0 0 0 4px rgba(215,255,81,.15); }
.soccer-detail-hero .eyebrow-mark { background: var(--ink); box-shadow: 0 0 0 4px rgba(23,24,22,.13); }
.detail-hero h1 { margin: 24px 0 18px; font: 600 clamp(65px, 8vw, 106px)/.88 var(--display); letter-spacing: -.09em; }
.tech-detail-hero h1 span { color: var(--lime); }
.soccer-detail-hero h1 span { color: white; }
.detail-deck { max-width: 515px; margin-bottom: 24px; font-size: 14px; line-height: 1.75; }
.tech-detail-hero .detail-deck { color: rgba(255,255,255,.79); }
.soccer-detail-hero .detail-deck { color: rgba(23,24,22,.76); }
.tech-hero-aside, .soccer-hero-aside { min-height: 264px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid currentColor; }
.tech-hero-aside { background: var(--blue-deep); border-color: rgba(255,255,255,.36); }
.soccer-hero-aside { background: #ff865e; border-color: rgba(23,24,22,.3); }
.tech-hero-aside > span, .soccer-hero-aside > span { font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.tech-hero-aside strong, .soccer-hero-aside strong { font: 600 clamp(30px, 4vw, 47px)/.97 var(--display); letter-spacing: -.08em; }
.impact-strip { width: min(1320px, calc(100% - 104px)); min-height: 124px; margin: 0 auto; padding: 19px 5.5%; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; background: var(--ink); color: white; }
.impact-strip div { min-height: 66px; padding-left: 25px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.23); }
.impact-strip div:first-child { padding-left: 0; }
.impact-strip div:last-child { border: 0; }
.impact-strip strong { font: 600 37px/.95 var(--display); letter-spacing: -.07em; }
.impact-strip strong span { color: var(--lime); }
.impact-strip div > span { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 8px; line-height: 1.4; }
.detail-block, .tech-results, .player-journey, .detail-recommendations, .tech-skills, .soccer-credentials { width: min(1320px, calc(100% - 104px)); margin: 0 auto; }
.detail-block { padding: 85px 5.5%; }
.detail-intro { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: 9%; padding: 43px 0 36px; }
.detail-intro h2, .tech-skills h2, .soccer-credentials h2 { margin: 0; font: 600 clamp(45px, 5.8vw, 72px)/.92 var(--display); letter-spacing: -.085em; }
.detail-intro > p, .tech-skills > div:nth-child(2) > p { max-width: 480px; margin: 0 0 2px; color: #5e5f59; font-size: 12px; line-height: 1.85; }
.approach-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.approach-cards article { min-height: 248px; padding: 20px; background: #e5e7ff; }
.approach-cards article:nth-child(2) { background: #e6f0c7; }
.approach-cards article:nth-child(3) { background: #e8e4dd; }
.approach-cards article > span, .soccer-practice-grid article > span { font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.approach-cards h3, .soccer-practice-grid h3 { margin: 48px 0 11px; font: 600 25px/.99 var(--display); letter-spacing: -.07em; }
.approach-cards p, .soccer-practice-grid p { max-width: 310px; margin: 0; color: #555650; font-size: 10px; line-height: 1.75; }
.tech-results { padding: 50px 5.5% 68px; background: var(--lime); }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; padding-top: 29px; }
.result-grid article { padding-top: 14px; border-top: 1px solid rgba(23,24,22,.22); }
.result-grid strong { color: var(--blue); font: 600 34px/.95 var(--display); letter-spacing: -.07em; }
.result-grid h3 { margin: 18px 0 8px; font: 600 15px/1.15 var(--display); }
.result-grid p { max-width: 330px; margin: 0; color: #555650; font-size: 10px; line-height: 1.75; }
.work-history, .soccer-history { padding-top: 84px; padding-bottom: 86px; }
.history-intro { padding-bottom: 22px; }
.history-row { display: grid; grid-template-columns: 148px minmax(0,1fr) 100px; gap: 25px; align-items: start; padding: 23px 0; border-top: 1px solid var(--line); }
.history-row time { padding-top: 4px; color: #6b6c66; font-size: 8px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.history-row h3 { margin: 0 0 4px; font: 600 20px/1.1 var(--display); letter-spacing: -.05em; }
.history-row .history-role { margin: 0 0 10px; color: var(--blue); font-size: 9px; font-weight: 700; line-height: 1.55; }
.history-row > div > p:last-child { max-width: 690px; margin: 0; color: #555650; font-size: 10px; line-height: 1.8; }
.history-tag { justify-self: end; padding: 7px 9px; border: 1px solid var(--line); border-radius: 99px; color: #5b5c56; font-size: 7px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.tech-skills { padding: 57px 6.5%; display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 8%; background: #e4e7ff; }
.tech-skills .eyebrow { margin-bottom: 16px; color: #5c63a0; }
.tech-skills h2 { color: var(--blue); }
.tech-skills > div:nth-child(2) > p { max-width: 570px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 21px; }
.skill-tags span { padding: 8px 11px; border: 1px solid rgba(37,56,220,.3); border-radius: 99px; font-size: 8px; font-weight: 600; }
.detail-recommendations { padding: 85px 5.5% 88px; }
.testimonial-head { display: grid; grid-template-columns: 1fr .8fr; gap: 8%; align-items: end; padding: 40px 0 30px; }
.testimonial-head h2 { margin: 0; font: 600 clamp(45px, 6.2vw, 78px)/.9 var(--display); letter-spacing: -.085em; }
.testimonial-head h2 span { color: var(--blue); }
.testimonial-head > p { max-width: 430px; margin: 0 0 2px; color: #5f605b; font-size: 11px; line-height: 1.8; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.testimonial-card { min-width: 0; margin: 0; padding: 20px; background: var(--blue); color: white; }
.testimonial-card:nth-child(2n) { background: #20211e; }
.testimonial-quote-mark { height: 32px; color: var(--lime); font: 600 51px/.9 var(--display); }
.testimonial-card blockquote { margin: 11px 0 22px; font: 500 16px/1.48 var(--display); letter-spacing: -.03em; }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 5px; font-size: 8px; color: rgba(255,255,255,.73); }
.testimonial-card figcaption strong { color: white; font-size: 9px; }
.testimonial-card figcaption a { width: fit-content; color: inherit; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.testimonial-examples-label { margin: 0 0 12px; color: #6f706a; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.testimonial-empty { min-height: 97px; padding: 18px 0; display: grid; grid-template-columns: 35px 1fr auto; gap: 13px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.testimonial-empty > span { color: var(--blue); font: 600 12px/1 var(--display); }
.testimonial-empty p { margin: 0; color: #5e5f59; font-size: 11px; }
.testimonial-empty a { color: var(--blue); font-size: 9px; font-weight: 700; text-decoration: none; }
.testimonial-empty a:hover { text-decoration: underline; }
.soccer-testimonial-empty { min-height: 70px; display: flex; justify-content: flex-end; }
.detail-recommendations > .text-arrow { margin-top: 21px; color: var(--blue); }
.tech-recommendations { background: #e5e7ff; }
.soccer-page .main-nav a:hover, .soccer-page .main-nav a.active { color: #d54e2d; }
.soccer-page .brand-period { color: var(--orange); }
.soccer-page .detail-intro h2 span { color: #d54e2d; }
.team-belief { width: min(1320px, calc(100% - 104px)); min-height: 164px; margin: 0 auto; padding: 33px 6.5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); color: white; }
.team-belief p { margin: 0; font: 500 clamp(24px, 3.6vw, 45px)/1.03 var(--display); letter-spacing: -.055em; }
.team-belief p span { color: var(--orange); }
.belief-caption { align-self: end; padding-bottom: 4px; color: rgba(255,255,255,.63); font-size: 8px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.soccer-practice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.soccer-practice-grid article { min-height: 242px; padding: 18px; background: #ffe0d5; }
.soccer-practice-grid article:nth-child(2) { background: #e9e4f6; }
.soccer-practice-grid article:nth-child(3) { background: #dff0c1; }
.soccer-practice-grid article:nth-child(4) { background: #e7e5dc; }
.soccer-practice-grid h3 { margin-top: 45px; }
.soccer-approach .detail-intro h2 span { color: #e75a35; }
.player-journey { padding: 62px 5.5% 68px; background: #ffe0d5; }
.journey-heading { padding-top: 34px; }
.journey-heading h2 span { color: #df5231; }
.journey-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.journey-steps article { min-height: 150px; padding: 14px 0 0; border-top: 1px solid rgba(23,24,22,.27); }
.journey-steps article > span { color: #d74f30; font-size: 8px; font-weight: 700; }
.journey-steps h3 { margin: 21px 0 8px; font: 600 19px/1.05 var(--display); letter-spacing: -.05em; }
.journey-steps p { max-width: 240px; margin: 0; color: #555650; font-size: 9px; line-height: 1.7; }
.soccer-history .history-row .history-role { color: #d55031; }
.soccer-history .history-tag { background: #ffe0d5; border-color: rgba(23,24,22,.11); }
.soccer-credentials { padding: 61px 6.5%; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 8%; background: var(--lime); }
.soccer-credentials .eyebrow { margin-bottom: 16px; }
.soccer-credentials h2 { color: #d54e2d; }
.credential-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.credential-list article { padding-top: 12px; border-top: 1px solid rgba(23,24,22,.24); }
.credential-list article > span { display: block; margin-bottom: 12px; color: #66665f; font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.credential-list strong { font: 600 16px/1.2 var(--display); }
.credential-list p { margin: 8px 0 0; color: #60615b; font-size: 9px; line-height: 1.65; }
.soccer-recommendations { background: #ffe0d5; }
.soccer-recommendations .testimonial-head h2 span { color: #d54e2d; }
.soccer-recommendations .testimonial-card { background: #e95c38; color: var(--ink); }
.soccer-recommendations .testimonial-card:nth-child(2n) { background: var(--ink); color: white; }
.soccer-recommendations .testimonial-card figcaption { color: rgba(23,24,22,.7); }
.soccer-recommendations .testimonial-card figcaption strong { color: var(--ink); }
.soccer-recommendations .testimonial-card:nth-child(2n) figcaption { color: rgba(255,255,255,.7); }
.soccer-recommendations .testimonial-card:nth-child(2n) figcaption strong { color: white; }
.soccer-recommendations .testimonial-quote-mark { color: var(--lime); }
.soccer-recommendations .detail-recommendations > .text-arrow, .soccer-recommendations > .text-arrow { color: #d54e2d; }
.soccer-contact { background: var(--orange); }
.soccer-contact h2 span { color: white; }
.detail-contact { width: min(1320px, calc(100% - 104px)); margin: 0 auto 45px; padding: 57px 6.5% 61px; background: var(--lime); }
.detail-contact h2 { margin: 17px 0 23px; }
.soccer-contact .eyebrow { color: rgba(23,24,22,.63); }
.soccer-contact h2 span { color: white; }
.detail-contact .contact-email { font-size: 15px; }

@media (max-width: 900px) {
  .site-header, .home-hero, .about-strip, .areas-section, .shared-principle, .home-experience, .recommendations-overview, .contact-section, .site-footer, .ovi-detail .site-header, .detail-hero, .impact-strip, .detail-block, .tech-results, .player-journey, .detail-recommendations, .tech-skills, .soccer-credentials, .team-belief, .detail-contact { width: calc(100% - 56px); }
  .home-hero { min-height: 540px; column-gap: 2%; }
  .hero-portrait { height: 405px; }
  .home-hero h1 { font-size: clamp(68px, 9vw, 94px); }
  .about-strip { padding: 51px 5%; grid-template-columns: .65fr 1.35fr; }
  .about-strip .text-arrow { grid-column: 2; }
  .area-card { min-height: 350px; }
  .area-card-bottom { flex-direction: column; align-items: flex-start; }
  .contact-section { padding-left: 5%; padding-right: 5%; }
  .detail-hero { padding-left: 5%; padding-right: 5%; }
  .history-row { grid-template-columns: 120px minmax(0,1fr) 83px; gap: 16px; }
  .team-belief { padding-left: 5%; padding-right: 5%; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }
  .site-header, .home-hero, .about-strip, .areas-section, .shared-principle, .home-experience, .recommendations-overview, .contact-section, .site-footer, .ovi-detail .site-header, .detail-hero, .impact-strip, .detail-block, .tech-results, .player-journey, .detail-recommendations, .tech-skills, .soccer-credentials, .team-belief, .detail-contact { width: calc(100% - 34px); }
  .site-header { min-height: 67px; gap: 14px; }
  .brand-name { font-size: 15px; }
  .main-nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 10px; }
  .main-nav a { font-size: 8px; }
  .main-nav a:first-child { display: none; }
  .ovi-home .main-nav a:not(:nth-child(2)):not(.nav-contact) { display: none; }
  .main-nav .nav-contact { padding: 8px 9px; }
  .main-nav .nav-contact span { padding-left: 4px; }
  .home-hero { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: 30px; }
  .hero-copy { padding: 32px 0 8px; }
  .hero-copy { min-width: 0; }
  .eyebrow { font-size: 8px; }
  .home-hero h1 { margin: 22px 0 17px; font-size: clamp(64px, 15vw, 90px); }
  .hero-deck { max-width: 100%; font-size: 13px; }
  .button { min-height: 43px; padding: 0 14px; font-size: 9px; }
  .hero-portrait { width: 86%; max-width: 390px; height: 340px; justify-self: center; margin: 28px 0 37px; }
  .hero-portrait img { border-width: 7px; }
  .portrait-shape-lime { width: 65px; height: 65px; right: -11px; }
  .hero-portrait figcaption { left: 37px; bottom: 48px; font-size: 7px; }
  .hero-baseline { min-height: 43px; font-size: 6px; gap: 5px; letter-spacing: .07em; }
  .hero-baseline span:nth-child(2) { display: none; }
  .about-strip { padding: 31px 22px; display: grid; grid-template-columns: 1fr; gap: 15px; }
  .about-lead { font-size: 33px; }
  .about-strip > p:nth-child(2) { font-size: 11px; }
  .about-strip .text-arrow { grid-column: auto; font-size: 9px; }
  .areas-section, .home-experience, .recommendations-overview { padding: 60px 0; }
  .section-topline { min-height: 28px; font-size: 6px; letter-spacing: .1em; }
  .areas-intro, .experience-heading, .recommendation-heading, .journey-heading { flex-direction: column; align-items: flex-start; gap: 15px; padding: 29px 0 22px; }
  .areas-intro h2, .experience-heading h2, .recommendation-heading h2, .journey-heading h2 { font-size: 58px; }
  .areas-intro > p, .experience-heading > p, .recommendation-heading > p, .journey-heading > p { max-width: 420px; margin: 0; font-size: 11px; }
  .area-grid, .timeline-columns, .recommendation-panels { grid-template-columns: 1fr; gap: 10px; }
  .area-card { min-height: 310px; padding: 20px; }
  .area-word { font-size: clamp(60px, 16vw, 82px); }
  .area-note { margin-top: 17px; font-size: 6px; }
  .area-card-bottom { flex-direction: row; align-items: center; font-size: 9px; }
  .area-cta { font-size: 7px; }
  .shared-principle { padding: 42px 20px; }
  .shared-main { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; }
  .shared-main h2 { font-size: clamp(38px, 10vw, 56px); }
  .shared-main p { max-width: 440px; font-size: 11px; }
  .principle-row { grid-template-columns: 1fr; gap: 12px; }
  .principle-row article { padding-top: 11px; }
  .principle-row h3 { margin: 13px 0 5px; font-size: 18px; }
  .principle-row p { max-width: 420px; font-size: 10px; }
  .timeline-lane { padding: 18px 17px 10px; }
  .mini-role { grid-template-columns: 83px 1fr; gap: 10px; padding: 14px 0; }
  .mini-role time { font-size: 7px; }
  .mini-role h4 { font-size: 12px; }
  .mini-role p { font-size: 8px; }
  .recommendation-panel { min-height: 175px; padding: 16px; }
  .rec-panel-title { grid-template-columns: 24px 1fr auto; gap: 5px; }
  .rec-panel-title a { font-size: 7px; }
  .home-quote blockquote { font-size: 15px; }
  .contact-section { grid-template-columns: 1fr; gap: 22px; padding: 35px 23px; }
  .contact-section h2, .detail-contact h2 { font-size: 57px; }
  .contact-copy > p { font-size: 11px; }
  .contact-email { font-size: 15px; }
  .site-footer { min-height: 67px; flex-wrap: wrap; justify-content: space-between; padding: 14px 0; gap: 12px; font-size: 7px; }
  .site-footer > span:not(.footer-year) { display: none; }
  .site-footer .brand-name { font-size: 12px; }
  .detail-hero { min-height: 0; grid-template-columns: 1fr; gap: 25px; padding: 38px 21px 24px; }
  .detail-hero h1 { margin: 21px 0 15px; font-size: clamp(62px, 15vw, 83px); }
  .detail-deck { font-size: 11px; }
  .tech-hero-aside, .soccer-hero-aside { min-height: 154px; padding: 14px; }
  .tech-hero-aside strong, .soccer-hero-aside strong { font-size: 28px; }
  .impact-strip { min-height: 0; grid-template-columns: 1fr 1fr; padding: 12px 15px; }
  .impact-strip div { min-height: 76px; padding-left: 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .impact-strip div:first-child { padding-left: 14px; }
  .impact-strip div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.2); }
  .impact-strip div:nth-last-child(-n+2) { border-bottom: 0; }
  .impact-strip strong { font-size: 31px; }
  .impact-strip div > span { font-size: 7px; }
  .detail-block { padding: 57px 0; }
  .detail-intro { grid-template-columns: 1fr; gap: 15px; padding: 28px 0 22px; }
  .detail-intro h2, .tech-skills h2, .soccer-credentials h2 { font-size: 49px; }
  .detail-intro > p, .tech-skills > div:nth-child(2) > p { font-size: 10px; }
  .approach-cards, .result-grid { grid-template-columns: 1fr; gap: 8px; }
  .approach-cards article { min-height: 195px; padding: 17px; }
  .approach-cards h3, .soccer-practice-grid h3 { margin: 31px 0 9px; font-size: 23px; }
  .approach-cards p, .soccer-practice-grid p, .result-grid p { font-size: 9px; }
  .tech-results, .player-journey { padding: 35px 19px; }
  .result-grid { padding-top: 17px; }
  .result-grid article { padding: 12px 0; }
  .result-grid strong { font-size: 29px; }
  .result-grid h3 { margin: 9px 0 6px; font-size: 13px; }
  .history-intro { padding-bottom: 17px; }
  .history-row { grid-template-columns: 1fr auto; gap: 7px 12px; padding: 18px 0; }
  .history-row time { grid-column: 1 / -1; font-size: 7px; }
  .history-row h3 { font-size: 17px; }
  .history-row .history-role { font-size: 8px; }
  .history-row > div > p:last-child { font-size: 9px; }
  .history-tag { grid-column: 2; grid-row: 2; font-size: 6px; }
  .history-row > div { grid-column: 1 / -1; }
  .history-row > .history-tag { grid-column: 2; grid-row: 2; align-self: center; }
  .tech-skills, .soccer-credentials { grid-template-columns: 1fr; gap: 22px; padding: 34px 21px; }
  .skill-tags span { font-size: 7px; }
  .detail-recommendations { padding: 57px 18px; }
  .testimonial-head { grid-template-columns: 1fr; gap: 15px; padding: 29px 0 22px; }
  .testimonial-head h2 { font-size: 54px; }
  .testimonial-head > p { font-size: 10px; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 8px; }
  .testimonial-card { padding: 16px; }
  .testimonial-card blockquote { font-size: 14px; }
  .testimonial-empty { grid-template-columns: 24px 1fr; gap: 8px; }
  .testimonial-empty p { font-size: 9px; }
  .testimonial-empty a { grid-column: 2; font-size: 8px; }
  .team-belief { min-height: 126px; padding: 24px 20px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .team-belief p { font-size: 25px; }
  .belief-caption { align-self: flex-start; font-size: 7px; }
  .soccer-practice-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .soccer-practice-grid article { min-height: 203px; padding: 13px; }
  .soccer-practice-grid h3 { font-size: 20px; }
  .journey-heading { padding: 28px 0 22px; }
  .journey-steps { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .journey-steps article { min-height: 130px; }
  .journey-steps h3 { margin: 13px 0 6px; font-size: 16px; }
  .journey-steps p { font-size: 8px; }
  .credential-list { grid-template-columns: 1fr; gap: 12px; }
  .detail-contact { margin-bottom: 25px; padding: 36px 21px; }
  .detail-contact .contact-email { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* The landing page is a simple personal introduction and a clear choice of field. */
.ovi-home .home-hero,
.ovi-home .home-areas,
.ovi-home .site-footer { width: min(1320px, calc(100% - 104px)); margin-inline: auto; }
.ovi-home .home-hero { min-height: 360px; grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr; column-gap: 7%; padding: 22px 0 25px; }
.ovi-home .site-header .brand-name { font-size: 21px; }
.ovi-home .hero-copy { padding: 30px 0; }
.ovi-home .home-hero h1 { max-width: 700px; margin: 0 0 23px; font-size: clamp(66px, 7.6vw, 104px); line-height: .91; }
.ovi-home .home-hero h1 span { color: var(--blue); }
.ovi-home .hero-deck { max-width: 560px; margin: 0; color: #42433e; font-size: 18px; font-weight: 600; line-height: 1.5; }
.ovi-home .hero-portrait { width: min(100%, 380px); height: 320px; justify-self: center; margin: 0; }
.ovi-home .hero-portrait img { inset: 50% auto auto 50%; width: min(100%, 310px); height: min(100%, 310px); transform: translate(-50%, -50%); object-fit: contain; object-position: center; border: 8px solid var(--paper); border-radius: 22px 22px 56px 22px; background: transparent; filter: none; }
.ovi-home .portrait-shape-blue { inset: 2% 7% 5% 6%; }
.ovi-home .portrait-shape-lime { width: 68px; height: 68px; right: 2%; bottom: 13%; }
.ovi-home .home-areas { padding: 0 0 72px; }
.ovi-home .home-areas-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 13px 0 15px; border-top: 1px solid var(--line); }
.ovi-home .home-areas-heading .eyebrow { margin-bottom: 8px; }
.ovi-home .home-areas-heading h2 { margin: 0; font: 600 clamp(29px, 4vw, 43px)/1 var(--display); letter-spacing: -.07em; }
.ovi-home .home-areas-heading h2 span { color: var(--blue); font-size: .75em; }
.ovi-home .area-grid { gap: 14px; }
.ovi-home .area-card-top { grid-template-columns: 1fr auto; }
.ovi-home .area-card { min-height: 300px; padding: 20px 23px 18px; }
.ovi-home .area-word { font-size: clamp(54px, 6.3vw, 78px); }
.ovi-home .area-note { margin-top: 17px; font-size: 8px; }
.ovi-home .area-card-bottom { font-size: 10px; }
.ovi-home .site-footer { min-height: 76px; }
.tech-detail-hero .tech-hero-aside strong { color: var(--lime); }
.tech-detail-hero .tech-hero-aside p { max-width: 280px; margin: -14px 0 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.6; }
.tech-approach .detail-intro > p { max-width: 540px; }
.tech-contact-copy { max-width: 490px; margin: 18px 0 23px; color: #555650; font-size: 13px; line-height: 1.75; }

@media (max-width: 900px) {
  .ovi-home .home-hero,
  .ovi-home .home-areas,
  .ovi-home .site-footer { width: calc(100% - 56px); }
  .ovi-home .home-hero { min-height: 410px; }
  .ovi-home .hero-portrait { height: 330px; }
  .ovi-home .home-hero h1 { font-size: clamp(61px, 8vw, 82px); }
  .ovi-home .area-card { min-height: 300px; }
  .ovi-home .area-card-bottom { align-items: flex-start; }
}
@media (max-width: 620px) {
  .ovi-home .site-header,
  .ovi-home .home-hero,
  .ovi-home .home-areas,
  .ovi-home .site-footer { width: calc(100% - 34px); }
  .ovi-home .site-header { gap: 9px; }
  .ovi-home .site-header .brand-name { font-size: 17px; }
  .ovi-home .main-nav { flex: 0 1 auto; gap: 10px; }
  .ovi-home .main-nav a:first-child { display: inline-flex; }
  .ovi-home .main-nav a { font-size: 9px; }
  .ovi-home .main-nav .nav-contact { padding: 8px 9px; }
  .ovi-home .home-hero { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0; padding: 23px 0 26px; }
  .ovi-home .hero-copy { padding: 24px 0 0; }
  .ovi-home .home-hero h1 { margin: 0 0 17px; font-size: clamp(54px, 13vw, 70px); line-height: .94; }
  .ovi-home .hero-deck { max-width: 430px; font-size: 15px; line-height: 1.5; }
  .ovi-home .hero-portrait { width: 84%; max-width: 340px; height: 245px; justify-self: center; margin: 18px 0 12px; }
  .ovi-home .hero-portrait img { width: min(100%, 320px); height: min(100%, 320px); border-width: 7px; }
  .ovi-home .portrait-shape-lime { width: 57px; height: 57px; right: -10px; }
  .ovi-home .hero-portrait figcaption { left: 34px; right: 13px; bottom: 34px; font-size: 6px; }
  .ovi-home .home-areas { padding: 0 0 40px; }
  .ovi-home .home-areas-heading { display: block; padding: 15px 0 17px; }
  .ovi-home .home-areas-heading .eyebrow { margin-bottom: 8px; font-size: 7px; }
  .ovi-home .home-areas-heading h2 { font-size: 29px; }
  .ovi-home .area-grid { grid-template-columns: 1fr; gap: 9px; }
  .ovi-home .area-card { min-height: 255px; padding: 17px 18px 15px; }
  .ovi-home .area-card-top { grid-template-columns: 1fr auto; }
  .ovi-home .area-open { width: 32px; height: 32px; }
  .ovi-home .area-word { font-size: clamp(56px, 15vw, 70px); }
  .ovi-home .area-note { margin-top: 13px; font-size: 6px; }
  .ovi-home .area-card-bottom { flex-direction: row; align-items: center; gap: 8px; font-size: 8px; }
  .ovi-home .area-cta { font-size: 6px; }
  .ovi-home .area-cta b { padding-left: 5px; }
  .ovi-home .site-footer { min-height: 62px; }
}
@media (max-width: 620px) {
  .tech-detail-hero .tech-hero-aside p { margin-top: -8px; font-size: 10px; }
  .tech-contact-copy { margin: 14px 0 18px; font-size: 10px; }
}