:root { --bg:#f7f5f1; --surface:#fbfaf7; --text:#181614; --text-soft:#716a63; --accent:#ad6b42; --accent-hover:#945735; --border:rgba(42,34,28,.10); --shadow:0 8px 28px rgba(36,28,20,.065); --paper:var(--bg); --paper-deep:var(--surface); --ink:var(--text); --muted:var(--text-soft); --copper:var(--accent); --line:var(--border); --serif:Iowan Old Style, Baskerville, "Times New Roman", serif; --sans:"Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }
.home-page .card-top b { visibility:hidden; }

/* Homepage: the intro and eight cards are the complete interface. */
.home-page { background:#fcfaf6; }
.home-shell { min-height:100svh; padding:clamp(22px,2.7vw,44px); display:grid; grid-template-columns:clamp(310px,32vw,460px) minmax(0,1fr); gap:clamp(24px,2.8vw,44px); }
.home-intro { min-height:calc(100svh - clamp(44px,5.4vw,88px)); padding:clamp(18px,2.2vw,34px); display:flex; flex-direction:column; position:relative; overflow:hidden; border-right:1px solid var(--line); }
.brand { display:inline-block; font-size:1.35rem; font-weight:800; letter-spacing:-.1em; text-decoration:none; }.brand span { color:var(--copper); }
.mobile-menu { display:none; }
.eyebrow { margin:0 0 18px; color:var(--copper); font-size:.65rem; font-weight:700; letter-spacing:.27em; text-transform:uppercase; }
.brand, .intro-main, .intro-links { position:relative; z-index:1; }.intro-main { margin-block:auto; padding-block:38px; }.intro-main h1 { max-width:400px; margin:0; font-family:var(--sans); font-size:clamp(2.45rem,4.25vw,4.1rem); letter-spacing:.065em; line-height:1.03; text-transform:uppercase; }.name-light, .name-bold { display:block; }.name-light { font-weight:300; }.name-bold { margin-top:5px; font-weight:800; letter-spacing:.04em; }.intro-role { max-width:285px; margin:25px 0 26px; color:var(--muted); font-size:.98rem; line-height:1.6; }.traits { display:grid; gap:10px; margin:0; padding:0; list-style:none; }.traits li { display:flex; align-items:center; gap:10px; color:#4f4841; font-size:.73rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.traits li::before { content:""; width:17px; height:1px; background:var(--copper); box-shadow:5px 4px 0 -0.2px var(--copper); }
.intro-links { display:flex; flex-wrap:wrap; gap:12px 20px; padding-top:23px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; font-weight:700; }.intro-links a { min-height:32px; display:inline-flex; align-items:center; text-decoration:none; }.intro-links a:last-child { color:var(--copper); }.intro-links span { cursor:default; }

.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(142px,1fr)); gap:clamp(12px,1.3vw,18px); min-width:0; }
.menu-card { position:relative; min-width:0; min-height:136px; overflow:hidden; display:block; isolation:isolate; border:1px solid rgba(166,101,59,.28); border-radius:8px; background:#211f1d; box-shadow:0 10px 24px rgba(38,24,15,.12); color:#fff; text-decoration:none; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.menu-card::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(14,14,13,.85) 0%,rgba(14,14,13,.66) 43%,rgba(14,14,13,.18) 100%); }
.menu-card img { position:absolute; z-index:0; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .35s ease, filter .35s ease; }
.card-top { position:absolute; z-index:2; top:61px; right:20px; left:20px; display:flex; justify-content:space-between; align-items:start; font-size:.76rem; font-weight:500; letter-spacing:.03em; }.card-top b { color:#dc955e; }.card-top b::after { content:""; }.card-top i { color:#dc955e; font-size:1.35rem; font-style:normal; line-height:.8; transition:transform .2s ease; }
.card-copy { position:absolute; z-index:2; right:20px; bottom:19px; left:20px; min-width:0; }.card-copy strong { display:block; overflow-wrap:break-word; font-family:var(--sans); font-size:clamp(1.05rem,1.5vw,1.42rem); font-weight:650; letter-spacing:-.035em; line-height:1.08; text-transform:uppercase; }.card-copy small { display:block; margin-top:7px; color:#f1ebe6; font-size:.72rem; line-height:1.25; }

/* Detail pages use the same type system but remain separate documents. */
.detail-header { width:min(1180px,calc(100% - 48px)); min-height:78px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }.detail-header .brand { justify-self:start; }.back-link, .header-contact { min-height:44px; display:inline-flex; align-items:center; font-size:.75rem; font-weight:700; text-decoration:none; }.back-link { color:var(--muted); }.header-contact { justify-self:end; color:var(--copper); }
.detail-page { width:min(1040px,calc(100% - 48px)); padding:clamp(65px,10vw,130px) 0; margin:0 auto; }.detail-page h1 { max-width:850px; margin-bottom:35px; overflow-wrap:break-word; font-size:clamp(3rem,7vw,6.7rem); }.lead { max-width:610px; margin:0 0 46px; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.18rem); }.detail-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(35px,8vw,120px); }.data-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:0; }.data-list div { min-width:0; padding:18px 0; border-top:1px solid var(--line); }.data-list dt { margin-bottom:7px; color:var(--copper); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.data-list dd { margin:0; overflow-wrap:anywhere; }.data-list a { text-decoration-color:var(--copper); text-underline-offset:4px; }
.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:850px; border:1px solid var(--line); background:var(--line); gap:1px; }.reference-grid article { min-height:158px; padding:25px; background:var(--paper-deep); }.reference-grid h2 { margin:0 0 8px; font-family:var(--serif); font-size:1.45rem; font-weight:600; letter-spacing:-.03em; }.reference-grid p { min-height:44px; margin:0 0 12px; color:var(--muted); font-size:.85rem; }.reference-grid a { color:var(--copper); font-size:.79rem; font-weight:700; text-decoration:none; }
.timeline { max-width:810px; border-top:1px solid var(--line); }.timeline article { display:grid; grid-template-columns:minmax(190px,.75fr) 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); }.timeline span { font-family:var(--serif); font-size:1.35rem; font-weight:600; line-height:1.12; }.timeline p { margin:0; color:var(--muted); }
.skill-list { display:flex; flex-wrap:wrap; gap:10px; max-width:790px; margin:0; padding:0; list-style:none; }.skill-list li { padding:11px 14px; border:1px solid rgba(255,250,244,.35); border-radius:30px; color:#fffaf4; font-size:.86rem; }.interest-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 34px; max-width:780px; }.interest-list span { padding:19px 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.1; }.language-list { max-width:710px; margin:0; }.language-list div { display:grid; grid-template-columns:1fr auto; padding:17px 0; border-bottom:1px solid var(--line); }.language-list dt { font-family:var(--serif); font-size:1.5rem; }.language-list dd { margin:0; color:var(--muted); }.detail-dark { min-height:100vh; background:#211d1a; color:#fffaf4; }.detail-dark .detail-header { border-color:rgba(255,250,244,.18); }.detail-dark .back-link { color:#d9ccc0; }.detail-dark .lead, .detail-dark .ambition-copy { color:#ded3c9; }.ambition-copy { max-width:675px; margin:0 0 28px; font-size:clamp(1.05rem,1.6vw,1.22rem); }.quote { max-width:600px; margin:0 0 33px; color:#dfaa84; font-family:var(--serif); font-size:1.32rem; font-style:italic; line-height:1.25; }.button { display:inline-flex; align-items:center; min-height:44px; gap:15px; padding:12px 16px; background:var(--copper); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }

@media (hover:hover) and (pointer:fine) { .intro-links a:hover, .back-link:hover { color:var(--copper); }.menu-card:hover { border-color:#d4b49d; box-shadow:0 14px 28px rgba(47,32,20,.12); transform:translateY(-2px); }.menu-card:hover img { transform:scale(1.045); }.menu-card:hover .card-top i { transform:translate(3px,-3px); }.button:hover { background:#bf754a; } }

@media (max-width:900px) { .home-shell { grid-template-columns:minmax(270px,32vw) minmax(0,1fr); gap:22px; padding:22px; }.home-intro { padding:25px; }.intro-main h1 { font-size:clamp(2.35rem,4.4vw,3.45rem); }.card-copy { padding:14px; }.card-top { padding:14px; }.card-copy strong { font-size:1rem; }.detail-grid { grid-template-columns:1fr; gap:25px; }.data-list { max-width:650px; } }
@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) { .home-shell { display:block; min-height:0; padding:16px; }.home-intro { min-height:0; padding:23px; border-right:0; border-bottom:1px solid var(--line); }.mobile-menu { width:44px; height:44px; position:absolute; top:14px; right:14px; z-index:2; display:block; }.mobile-menu::before, .mobile-menu::after, .mobile-menu span { content:""; position:absolute; right:9px; width:21px; height:1px; background:var(--ink); }.mobile-menu::before { top:14px; }.mobile-menu span { top:21px; }.mobile-menu::after { top:28px; }.intro-main { margin:0; padding:56px 0 40px; }.intro-main h1 { font-size:clamp(2.3rem,10.5vw,3.5rem); }.intro-role { max-width:310px; margin:19px 0 23px; }.intro-links { padding-top:17px; }.menu-grid { grid-template-columns:1fr; grid-template-rows:none; gap:10px; margin-top:16px; }.menu-card, .menu-card:nth-child(even) { position:relative; display:grid; grid-template-columns:86px minmax(0,1fr) 26px 28px; min-height:112px; border:1px solid #e7dfd6; border-radius:11px; background:#fffefd; box-shadow:0 5px 15px rgba(47,32,20,.06); color:var(--ink); }.menu-card::before, .menu-card::after { content:none; }.menu-card img, .menu-card:nth-child(even) img { position:static; z-index:auto; inset:auto; grid-column:1; grid-row:1; width:100%; height:100%; min-height:0; object-fit:cover; }.card-top, .menu-card:nth-child(even) .card-top { position:static; display:contents; }.card-top b { grid-column:3; grid-row:1; align-self:center; color:var(--copper); font-size:.6rem; letter-spacing:0; }.card-top b::after { content:""; }.card-top i { grid-column:4; grid-row:1; align-self:center; justify-self:center; color:var(--copper); font-size:1.15rem; }.card-copy, .menu-card:nth-child(even) .card-copy { position:static; grid-column:2; grid-row:1; align-self:center; padding:15px 7px 15px 15px; }.card-copy strong { max-width:100%; color:var(--ink); font-size:1.06rem; line-height:1.13; }.card-copy small { margin-top:4px; color:var(--muted); font-size:.66rem; }.detail-header { width:min(1180px,calc(100% - 32px)); grid-template-columns:1fr auto; min-height:66px; }.back-link { order:3; grid-column:1 / -1; min-height:34px; padding-bottom:10px; }.header-contact { font-size:.7rem; }.detail-page { width:min(1040px,calc(100% - 32px)); padding:65px 0 84px; }.detail-page h1 { font-size:clamp(2.75rem,12vw,4.4rem); }.reference-grid, .interest-list { grid-template-columns:1fr; }.timeline article { grid-template-columns:1fr; gap:5px; }.data-list { grid-template-columns:1fr; } }
@media (max-width:420px) { .home-intro { padding:21px; }.intro-main { padding-block:48px 34px; }.menu-card, .menu-card:nth-child(even) { grid-template-columns:78px minmax(0,1fr) 23px 26px; min-height:104px; }.card-copy, .menu-card:nth-child(even) .card-copy { padding-left:13px; }.card-copy strong { font-size:1rem; }.card-copy small { font-size:.62rem; } }
@media (prefers-reduced-motion:reduce) { .menu-card, .menu-card::after, .menu-card img, .card-top i { transition:none; } }

/* Reference rendering alignment: responsive two-part homepage composition. */
@media (min-width:801px) {
  .home-shell { height:100svh; min-height:820px; padding:clamp(24px,2.15vw,36px); grid-template-columns:minmax(340px,31vw) minmax(0,1fr); gap:clamp(25px,2.35vw,39px); }
  .home-intro { min-height:0; padding:0 4px 0 0; border:0; }
  .home-intro > .brand { margin-top:2px; font-size:1.7rem; }.home-intro > .brand::after { content:""; display:block; width:45px; height:2px; margin-top:9px; background:var(--copper); }.intro-main { margin-block:auto; padding:48px 0 72px; }.intro-main h1 { font-size:clamp(2.25rem,3.05vw,3.25rem); letter-spacing:.095em; }.name-bold { margin-top:9px; }.eyebrow { margin-bottom:22px; font-size:.68rem; letter-spacing:.32em; }.intro-role { margin:26px 0 32px; font-size:.98rem; }.traits { gap:12px; }.traits li { font-size:.72rem; }.intro-links { display:none; }
  .menu-area { min-width:0; display:flex; flex-direction:column; }.utility-links { display:flex; align-items:center; justify-content:flex-end; gap:25px; color:#141414; font-size:1rem; font-weight:800; }.utility-links a { min-height:34px; display:inline-flex; align-items:center; color:inherit; text-decoration:none; }.utility-links a:last-child { padding:0 16px; border-radius:5px; background:linear-gradient(90deg,#a7653c,#bd7c52); color:#fff; font-family:var(--serif); font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }.utility-links span { font-size:1.25rem; }
  .menu-grid { min-height:0; grid-template-rows:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.1vw,16px); }.menu-card { min-height:0; border-color:rgba(172,111,68,.38); border-radius:7px; box-shadow:0 7px 16px rgba(30,20,13,.14); }.menu-card::before { top:clamp(15px,1.55vw,22px); left:clamp(15px,1.45vw,21px); font-size:clamp(1.25rem,1.75vw,1.65rem); }.card-top { top:clamp(52px,4.2vw,62px); right:clamp(15px,1.45vw,21px); left:clamp(15px,1.45vw,21px); font-size:.72rem; }.card-copy { right:clamp(15px,1.45vw,21px); bottom:clamp(15px,1.45vw,20px); left:clamp(15px,1.45vw,21px); }.card-copy strong { font-size:clamp(.98rem,1.26vw,1.3rem); }.card-copy small { margin-top:6px; font-size:.67rem; }
}

@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) {
  .intro-links { display:flex; }.menu-area { display:block; }.utility-links { display:none; }
}

/* Desktop polish: visual refinement only, with no layout or breakpoint changes. */
@media (min-width:801px) {
  .intro-main h1 { padding-right:26px; letter-spacing:.1em; }.name-bold { letter-spacing:.085em; }
  .utility-links { gap:19px; font-size:.92rem; }.utility-links span { font-size:1.12rem; }.utility-links a:last-child { min-height:30px; padding:0 13px; font-size:.68rem; letter-spacing:.075em; }
  .menu-grid { gap:clamp(10px,.95vw,14px); }.menu-card { border-color:rgba(172,111,68,.29); box-shadow:0 5px 14px rgba(30,20,13,.105); }.menu-card img { filter:saturate(.88) sepia(.055) contrast(.98) brightness(.94); }.menu-card::after { background:linear-gradient(90deg,rgba(14,14,13,.81) 0%,rgba(14,14,13,.61) 43%,rgba(14,14,13,.15) 100%); }.card-top { opacity:.94; }.card-copy { bottom:17px; }.card-copy small { color:rgba(241,235,230,.88); }
}

/* Desktop alignment: both columns share one grid row and one viewport height. */
@media (min-width:801px) {
  .home-shell { height:100svh; min-height:0; grid-template-columns:minmax(0,32fr) minmax(0,68fr); align-items:stretch; }
  .home-intro { height:100%; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; }.home-intro > .brand { flex:0 0 auto; }.intro-main { flex:0 0 auto; margin:clamp(54px,8vh,96px) 0 0; padding:0 26px 0 0; }.intro-links { margin-top:auto; }
  .menu-area { height:100%; min-height:0; display:flex; flex-direction:column; }.utility-links { align-self:start; }.menu-grid { height:100%; min-height:0; grid-template-rows:repeat(4,minmax(0,1fr)); }
}

/* Card imagery refinement only: lighter photography and a local text gradient. */
@media (min-width:801px) {
  .menu-card::before, .card-top b { display:none; }.card-top { top:auto; right:18px; bottom:18px; left:auto; }.card-top i { color:rgba(211,138,82,.92); font-size:1.05rem; font-weight:300; }.card-copy { right:52px; bottom:18px; left:20px; }.menu-card::after { background:linear-gradient(to top,rgba(20,18,16,.55) 0%,rgba(20,18,16,.27) 28%,rgba(20,18,16,0) 61%); }.menu-card img { filter:brightness(1.09) contrast(.92) saturate(.91) sepia(.035); }.card-copy small { color:rgba(255,253,249,.9); }
}

/* Introductie en utilities: content polish binnen de bestaande compositie. */
.download-cv { width:max-content; min-height:38px; margin-top:24px; display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid transparent; border-radius:5px; background:linear-gradient(90deg,#a7653c,#bc7950); box-shadow:0 5px 12px rgba(126,72,38,.16); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.1em; line-height:1; text-decoration:none; text-transform:uppercase; }
.download-cv span { font-size:1rem; font-weight:400; line-height:1; }
.download-cv[aria-disabled="true"], .placeholder-link[aria-disabled="true"] { cursor:default; }

@media (min-width:801px) {
  .intro-main { max-width:380px; }
  .intro-role { max-width:360px; margin:24px 0 24px; color:#665e56; font-size:.88rem; line-height:1.55; }
  .traits { gap:9px; }
  .traits li { gap:11px; color:#514a43; font-size:.68rem; font-weight:650; letter-spacing:.035em; }
  .traits li::before { width:18px; box-shadow:5px 4px 0 -.2px var(--copper); }
  .download-cv { margin-top:23px; }
  .utility-links { gap:16px; color:#39332e; font-size:.68rem; font-weight:700; letter-spacing:.025em; }
  .utility-links a { min-height:30px; }
  .utility-links .placeholder-link { color:#39332e; text-decoration:none; }
  .utility-links a:last-child { gap:7px; padding:0 12px; font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.09em; }
  .utility-links a:last-child span { font-size:.78rem; }
}

@media (max-width:800px) {
  .intro-role { max-width:335px; font-size:.88rem; line-height:1.55; }
  .traits { gap:8px; }
  .traits li { font-size:.67rem; }
  .download-cv { min-height:40px; margin-top:22px; padding:9px 14px; }
  .card-top b { display:none; }
  .menu-card, .menu-card:nth-child(even) { grid-template-columns:86px minmax(0,1fr) 30px; }
  .card-top i { grid-column:3; }
}

@media (max-width:420px) {
  .menu-card, .menu-card:nth-child(even) { grid-template-columns:78px minmax(0,1fr) 29px; }
}

@media (hover:hover) and (pointer:fine) {
  .download-cv:hover { background:linear-gradient(90deg,#915832,#b97046); box-shadow:0 7px 14px rgba(126,72,38,.22); }
  .utility-links .placeholder-link:hover { color:#39332e; }
}

/* Open hero composition, matched to reference/rendering.png. */
.mobile-contact { display:none; }

@media (min-width:801px) {
  .home-shell { grid-template-columns:minmax(0,37fr) minmax(0,63fr); gap:clamp(30px,2.5vw,40px); background:radial-gradient(circle at 12% 22%,#fffefd 0,rgba(255,254,253,.65) 26%,transparent 54%); }
  .home-intro { padding:0; overflow:hidden; border:0; }
  .home-intro > .brand { margin-top:2px; }
  .intro-main { max-width:390px; margin:clamp(64px,10.5vh,118px) 0 0; padding:0 20px 0 0; }
  .intro-main h1 { padding-right:0; font-size:clamp(2.3rem,3.1vw,3.35rem); letter-spacing:.09em; line-height:1.02; }
  .name-bold { margin-top:8px; letter-spacing:.075em; }
  .eyebrow { margin:20px 0 0; font-size:.67rem; letter-spacing:.33em; }
  .intro-role, .download-cv { display:none; }
  .traits { gap:12px; margin-top:28px; }
  .traits li { font-size:.78rem; font-weight:500; letter-spacing:0; text-transform:none; }

  .menu-area { gap:0; }
  .utility-links { gap:17px; padding-top:8px; }
  .menu-grid { gap:10px; }
  .menu-card { border-color:rgba(172,111,68,.25); border-radius:7px; box-shadow:0 7px 18px rgba(47,32,20,.1); }
  .menu-card::after { background:linear-gradient(90deg,rgba(20,18,16,.72) 0%,rgba(20,18,16,.61) 44%,rgba(20,18,16,.17) 63%,rgba(20,18,16,0) 100%); }
  .menu-card img { filter:brightness(1.05) contrast(1.03) saturate(.95) sepia(.025); }
  .menu-card:nth-child(1) { --fade-end:78%; --image-position:76% center; }
  .menu-card:nth-child(2) { --fade-end:75%; --image-position:70% center; }
  .menu-card:nth-child(3) { --fade-end:70%; --image-position:72% center; }
  .menu-card:nth-child(4) { --fade-end:82%; --image-position:73% center; }
  .menu-card:nth-child(5) { --fade-end:79%; --image-position:72% center; }
  .menu-card:nth-child(6) { --fade-end:84%; --image-position:70% center; }
  .menu-card:nth-child(7) { --fade-end:69%; --image-position:72% center; }
  .menu-card:nth-child(8) { --fade-end:74%; --image-position:68% center; }
  .card-copy { right:44%; bottom:18px; left:20px; }
  .card-copy strong { font-size:clamp(1rem,1.22vw,1.2rem); }
  .card-copy small { margin-top:5px; font-size:.68rem; }
  .card-top { right:17px; bottom:17px; }
}

@media (max-width:800px) {
  .home-intro { overflow:visible; border-bottom:0; }
  .intro-main { padding:56px 0 30px; text-align:center; }
  .intro-main h1 { margin-inline:auto; letter-spacing:.075em; }
  .name-bold { letter-spacing:.06em; }
  .eyebrow { margin:17px 0 0; }
  .intro-role { margin:20px auto 22px; }
  .traits { justify-items:center; }
  .traits li { justify-content:center; }
  .download-cv { margin-inline:auto; }
  .menu-grid { margin-top:10px; }
  .mobile-contact { min-height:46px; margin:22px 0 8px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:6px; background:linear-gradient(90deg,#a7653c,#bc7950); box-shadow:0 6px 14px rgba(126,72,38,.16); color:#fff; font-size:.69rem; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
}

@media (min-width:801px) {
  .traits li::before { content:none; width:0; box-shadow:none; }
  .traits li { gap:12px; }
  .trait-icon { width:16px; height:16px; position:relative; flex:0 0 16px; display:inline-block; color:var(--copper); }
  .traits li:nth-child(1) .trait-icon { border:1.2px solid currentColor; border-radius:50%; }
  .traits li:nth-child(1) .trait-icon::before { content:""; position:absolute; inset:4px; border:1.1px solid currentColor; border-radius:50%; }
  .traits li:nth-child(1) .trait-icon::after { content:""; position:absolute; width:7px; height:1px; right:-3px; bottom:0; background:currentColor; transform:rotate(-46deg); transform-origin:left center; }
  .traits li:nth-child(2) .trait-icon::before { content:""; position:absolute; top:0; left:5px; width:5px; height:5px; border:1.2px solid currentColor; border-radius:50%; }
  .traits li:nth-child(2) .trait-icon::after { content:""; position:absolute; right:1px; bottom:0; left:1px; height:7px; border:1.2px solid currentColor; border-radius:8px 8px 2px 2px; }
  .traits li:nth-child(3) .trait-icon { border:1.2px solid currentColor; border-radius:2px; transform:rotate(45deg) scale(.78); }
  .traits li:nth-child(3) .trait-icon::before { content:""; position:absolute; top:3px; left:3px; width:7px; height:7px; border:1px solid currentColor; border-radius:50%; }
  .traits li:nth-child(4) .trait-icon { border:1.2px solid currentColor; border-radius:50%; }
  .traits li:nth-child(4) .trait-icon::before { content:""; position:absolute; right:3px; bottom:-4px; left:3px; height:4px; border:1.2px solid currentColor; border-top:0; border-radius:0 0 3px 3px; }
  .traits li:nth-child(4) .trait-icon::after { content:""; position:absolute; top:3px; left:7px; width:1px; height:7px; background:currentColor; }
  .traits li:nth-child(5) .trait-icon { border-top:1.2px solid currentColor; border-right:1.2px solid currentColor; transform:rotate(-45deg) scale(.78); }
  .traits li:nth-child(5) .trait-icon::before { content:""; position:absolute; right:-1px; top:-1px; width:5px; height:5px; border-top:1.2px solid currentColor; border-right:1.2px solid currentColor; }
}

@media (hover:hover) and (pointer:fine) {
  .menu-card:hover { box-shadow:0 11px 23px rgba(47,32,20,.14); }
  .mobile-contact:hover { background:linear-gradient(90deg,#915832,#b97046); }
}

/* Desktop implementation following the approved rendering-desktop composition. */
@media (min-width:801px) {
  .home-page { --bg:#f7f5f1; --surface:#fbfaf7; --text:#181614; --text-soft:#716a63; --accent:#ad6b42; --accent-hover:#945735; --border:rgba(42,34,28,.10); --shadow:0 8px 28px rgba(36,28,20,.065); background:var(--bg); }
  .home-shell { grid-template-columns:minmax(330px,39fr) minmax(0,61fr); gap:clamp(18px,1.25vw,22px); }
  .home-intro { isolation:isolate; border:0; background:transparent; box-shadow:none; }
  .home-intro > .brand, .home-intro > .mobile-menu, .intro-main { position:relative; z-index:2; }
  .intro-main { margin:clamp(70px,9vh,98px) 0 0; max-width:430px; }
  .intro-main h1 { font-size:clamp(2.75rem,3.95vw,4.95rem); line-height:.96; letter-spacing:.075em; }
  .name-light { font-weight:300; }
  .name-bold { margin-top:8px; font-weight:800; letter-spacing:.035em; }
  .eyebrow { margin-top:23px; font-size:.66rem; }
  .intro-role { display:none; }
  .traits { gap:15px; margin-top:32px; }
  .traits li { gap:11px; color:var(--text-soft); font-size:.75rem; font-weight:500; line-height:1.25; }
  .traits li::before { content:none; width:0; box-shadow:none; }
  .trait-icon { width:18px; height:18px; flex:0 0 18px; align-self:center; display:block; fill:none; stroke:var(--accent); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; opacity:.86; }
  .trait-icon::before, .trait-icon::after { content:none !important; }
  .download-cv { display:inline-flex; min-height:33px; margin-top:21px; padding:7px 12px; border-radius:4px; background:var(--accent); box-shadow:0 4px 10px rgba(120,72,40,.12); font-size:.61rem; }
  .download-cv span { font-size:.88rem; }

  .menu-area { width:98.5%; justify-self:end; gap:0; }
  .utility-links { padding-top:13px; gap:17px; }
  .menu-grid { column-gap:10px; row-gap:10px; }
  .menu-card { --fade-end:76%; --image-position:70% center; border:1px solid rgba(42,34,28,.09); border-radius:9px; background:var(--surface); box-shadow:0 7px 24px rgba(36,28,20,.055); color:var(--text); }
  .menu-card img { right:0; left:31%; width:69%; height:100%; object-position:var(--image-position); filter:brightness(.99) contrast(1.075) saturate(.94) sepia(.025); }
  .card-personalia { --image-position:72% top; }
  .card-personalia img { filter:none; }
  .menu-card::after { background:linear-gradient(90deg,#fbfaf7 0%,#fbfaf7 25%,rgba(251,250,247,.995) 31%,rgba(251,250,247,.97) 36%,rgba(251,250,247,.90) 42%,rgba(251,250,247,.76) 48%,rgba(251,250,247,.58) 54%,rgba(251,250,247,.38) 60%,rgba(251,250,247,.20) 66%,rgba(251,250,247,.08) 72%,transparent var(--fade-end)); }
  .card-personalia::after { background:linear-gradient(90deg,#fbfaf7 0%,#fbfaf7 38%,rgba(251,250,247,.985) 43%,rgba(251,250,247,.90) 49%,rgba(251,250,247,.72) 55%,rgba(251,250,247,.46) 60%,rgba(251,250,247,.22) 65%,rgba(251,250,247,.06) 69%,transparent 71%); }
  .card-copy { right:44%; bottom:44px; left:18px; }
  .card-copy strong { color:var(--text); font-size:clamp(.92rem,1.05vw,1.08rem); font-weight:750; letter-spacing:-.02em; }
  .card-copy small { margin-top:4px; color:var(--text-soft); font-size:.62rem; }
  .card-top { right:auto; bottom:16px; left:18px; }
  .card-top i { color:var(--accent); font-size:.78rem; opacity:.74; }
}

@media (min-width:801px) and (hover:hover) and (pointer:fine) {
  .menu-card { transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }
  .menu-card img { transition:transform .55s ease,filter .35s ease; }
  .menu-card:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(36,28,20,.085); }
  .menu-card:hover img { transform:scale(1.025); }
  .menu-card:hover .card-top i { transform:translateX(3px); }
  .download-cv:hover { background:var(--accent-hover); box-shadow:0 5px 11px rgba(120,72,40,.16); }
}

@media (min-width:801px) {
  .utility-links { justify-content:flex-end; gap:10px; }
  .utility-links a { min-height:40px; transition:border-color .22s ease,background-color .22s ease,color .22s ease; }
  .utility-links .utility-social { width:40px; height:40px; flex:0 0 40px; padding:0; justify-content:center; border:1px solid rgba(42,34,28,.16); border-radius:8px; background:var(--surface); color:#24211e; box-shadow:none; }
  .utility-linkedin > span { font-size:.88rem; font-weight:800; letter-spacing:-.045em; line-height:1; text-transform:lowercase; }
  .utility-instagram-icon { width:17px; height:17px; position:relative; display:block; border:1.5px solid currentColor; border-radius:5px; }
  .utility-instagram-icon::before { content:""; position:absolute; inset:4px; border:1.35px solid currentColor; border-radius:50%; }
  .utility-instagram-icon::after { content:""; position:absolute; top:2.5px; right:2.5px; width:2px; height:2px; border-radius:50%; background:currentColor; }
  .utility-links a.utility-contact { height:40px; min-height:40px; gap:9px; padding:0 15px; border:1px solid transparent; border-radius:8px; background:var(--accent); color:#fff; box-shadow:none; font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.13em; line-height:1; text-transform:uppercase; }
  .utility-contact > span:last-child { font-size:inherit; }
  .utility-mail-icon { width:16px; height:12px; position:relative; display:block; flex:0 0 16px; border:1.3px solid currentColor; border-radius:2px; }
  .utility-mail-icon::before, .utility-mail-icon::after { content:""; position:absolute; top:1px; width:9px; height:1.2px; background:currentColor; }
  .utility-mail-icon::before { left:0; transform:rotate(35deg); transform-origin:left center; }
  .utility-mail-icon::after { right:0; transform:rotate(-35deg); transform-origin:right center; }
}

@media (min-width:801px) and (hover:hover) and (pointer:fine) {
  .utility-links .utility-social:hover { border-color:var(--accent); background:#f8f1eb; }
  .utility-links a.utility-contact:hover { background:var(--accent-hover); }
}

/* Shared page architecture: one topbar, then one aligned hero/menu canvas. */
.hero-photo-layer { display:none; }

@media (min-width:801px) {
  .home-page { min-height:100svh; }

  .home-shell {
    --content-top:clamp(26px,1.95vw,28px);
    height:100svh;
    min-height:0;
    padding:clamp(18px,1.6vw,30px);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:40px minmax(0,1fr);
    gap:0;
    align-items:stretch;
  }

  .page-header {
    min-width:0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding-top:2px;
  }

  .page-header > .brand {
    position:relative;
    z-index:2;
    flex:0 0 auto;
    margin:0;
    font-size:1.7rem;
    line-height:1;
  }

  .page-header > .brand::after {
    content:"";
    display:block;
    width:45px;
    height:2px;
    margin-top:9px;
    background:var(--copper);
  }

  .page-header > .mobile-menu { display:none; }

  .page-header .utility-links {
    align-self:flex-start;
    padding-top:0;
  }

  .home-layout {
    min-width:0;
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:minmax(330px,39fr) minmax(0,61fr);
    grid-template-rows:minmax(0,1fr);
    column-gap:clamp(18px,1.25vw,22px);
    row-gap:0;
    align-items:stretch;
  }

  .home-intro {
    grid-column:1;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:0;
  }

  .home-intro::before,
  .home-intro::after { content:none; }

  .hero-photo-layer {
    position:absolute;
    z-index:0;
    top:34%;
    right:0;
    bottom:0;
    left:0;
    display:block;
    overflow:hidden;
    pointer-events:none;
    background:url("assets/intro-desk-photo.jpg") 50% bottom / cover no-repeat;
    opacity:.98;
    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.02) 10%,
      rgba(0,0,0,.07) 20%,
      rgba(0,0,0,.16) 30%,
      rgba(0,0,0,.32) 40%,
      rgba(0,0,0,.52) 50%,
      rgba(0,0,0,.72) 60%,
      rgba(0,0,0,.90) 70%,
      #000 80%,
      #000 100%
    );
    mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.02) 10%,
      rgba(0,0,0,.07) 20%,
      rgba(0,0,0,.16) 30%,
      rgba(0,0,0,.32) 40%,
      rgba(0,0,0,.52) 50%,
      rgba(0,0,0,.72) 60%,
      rgba(0,0,0,.90) 70%,
      #000 80%,
      #000 100%
    );
  }

  .hero-photo-layer::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      var(--bg) 0%,
      color-mix(in srgb,var(--bg) 96%,transparent) 18%,
      color-mix(in srgb,var(--bg) 82%,transparent) 32%,
      color-mix(in srgb,var(--bg) 54%,transparent) 46%,
      color-mix(in srgb,var(--bg) 22%,transparent) 60%,
      transparent 74%
    );
  }

  .intro-main,
  .hero-main-content {
    margin:0;
    padding:var(--content-top) 20px 0 0;
  }

  .eyebrow {
    margin:clamp(22px,1.7vw,28px) 0 0;
    font-size:clamp(1rem,1.15vw,1.35rem);
    font-weight:600;
    letter-spacing:.24em;
    line-height:1.1;
  }

  .eyebrow::after { content:none; }

  .menu-area {
    grid-column:2;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .menu-grid {
    flex:1 1 auto;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding-top:var(--content-top);
  }

  .mobile-contact { display:none; }
}

/* Keep the existing mobile composition after moving the header in the DOM. */
@media (max-width:800px) {
  .page-header {
    position:relative;
    padding:23px 23px 0;
  }

  .page-header > .brand { position:relative; z-index:1; }
  .page-header .utility-links { display:none; }
  .home-layout { display:block; }
  .home-intro { padding:0 23px 23px; }
}

@media (max-width:420px) {
  .page-header { padding:21px 21px 0; }
  .home-intro { padding:0 21px 21px; }
}

/* Official LG. production mark: shared unchanged by home and detail headers. */
.brand {
  width:50px;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 50px;
  overflow:visible;
  font-size:0;
  letter-spacing:0;
  line-height:1;
}

.brand-logo {
  width:50px;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:left center;
}

@media (min-width:801px) {
  .page-header > .brand {
    width:50px;
    height:auto;
    flex-basis:50px;
    margin:0;
    font-size:0;
    line-height:1;
  }

  .page-header > .brand::after {
    content:none;
    display:none;
  }
}

/* Final large-screen canvas override: height-led scaling prevents ultra-wide stretching. */
@media (min-width:2000px) {
  body.home-page .home-shell {
    width:min(90vw,147.2svh,4000px);
    height:auto;
    max-height:92svh;
    min-height:0;
    aspect-ratio:16 / 10;
    margin:auto;
    padding:clamp(34px,2.1svh,58px);
    grid-template-rows:clamp(48px,3.3svh,80px) minmax(0,1fr);
    --content-top:clamp(34px,2.5svh,68px);
  }

  .home-page .home-layout {
    column-gap:clamp(30px,2.15svh,56px);
  }

  .home-page .intro-main,
  .home-page .hero-main-content {
    max-width:clamp(620px,38svh,980px);
    padding-top:var(--content-top);
  }
}

/* Large and ultra-wide screens: preserve the approved desktop proportions. */
@media (min-width:2000px) {
  body.home-page {
    min-height:100svh;
    display:grid;
    place-items:center;
  }

  .home-shell {
    width:min(90vw,147.2svh,4000px);
    height:auto;
    max-height:92svh;
    min-height:0;
    aspect-ratio:16 / 10;
    margin:auto;
    padding:clamp(34px,2.1svh,58px);
    grid-template-rows:clamp(48px,3.3svh,80px) minmax(0,1fr);
    --content-top:clamp(34px,2.5svh,68px);
  }

  .home-layout {
    column-gap:clamp(30px,2.15svh,56px);
  }

  .intro-main,
  .hero-main-content {
    max-width:clamp(620px,38svh,980px);
    padding-top:var(--content-top);
  }

  .home-page .intro-main h1 {
    max-width:clamp(610px,37svh,950px);
    font-size:clamp(5.25rem,6.3svh,9.5rem);
  }

  .home-page .eyebrow {
    margin-top:clamp(28px,2svh,52px);
    font-size:clamp(1.05rem,1.15svh,1.65rem);
  }

  .home-page .traits {
    margin-top:clamp(34px,2.35svh,62px);
    gap:clamp(15px,1.15svh,28px);
  }

  .home-page .traits li {
    gap:clamp(14px,1svh,24px);
    font-size:clamp(.98rem,1.1svh,1.65rem);
  }

  .home-page .trait-icon {
    width:clamp(20px,1.45svh,34px);
    height:clamp(20px,1.45svh,34px);
    flex-basis:clamp(20px,1.45svh,34px);
  }

  .home-page .download-cv {
    min-height:clamp(42px,3.1svh,70px);
    margin-top:clamp(28px,2svh,50px);
    padding:clamp(10px,.75svh,17px) clamp(16px,1.2svh,29px);
    font-size:clamp(.72rem,.78svh,1.12rem);
  }

  .home-page .brand,
  .home-page .page-header > .brand {
    width:clamp(64px,4.3svh,110px);
    flex-basis:clamp(64px,4.3svh,110px);
  }

  .home-page .brand-logo {
    width:clamp(64px,4.3svh,110px);
  }

  .home-page .utility-links .utility-social {
    width:clamp(48px,3.3svh,80px);
    height:clamp(48px,3.3svh,80px);
    flex-basis:clamp(48px,3.3svh,80px);
  }

  .home-page .utility-links a.utility-contact {
    height:clamp(48px,3.3svh,80px);
    min-height:clamp(48px,3.3svh,80px);
    padding-inline:clamp(18px,1.35svh,32px);
    font-size:clamp(.7rem,.76svh,1.08rem);
  }

  .home-page .utility-linkedin > span {
    font-size:clamp(.94rem,1svh,1.45rem);
  }

  .home-page .utility-instagram-icon {
    width:clamp(18px,1.25svh,30px);
    height:clamp(18px,1.25svh,30px);
  }

  .home-page .utility-mail-icon {
    width:clamp(17px,1.2svh,28px);
    height:clamp(13px,.9svh,21px);
    flex-basis:clamp(17px,1.2svh,28px);
  }

  .home-page .menu-grid {
    column-gap:clamp(12px,.8svh,20px);
    row-gap:clamp(12px,.8svh,20px);
  }

  .home-page .menu-card {
    border-radius:clamp(11px,.75svh,18px);
  }

  .home-page .card-copy {
    right:43%;
    bottom:clamp(54px,3.7svh,92px);
    left:clamp(24px,1.7svh,42px);
  }

  .home-page .card-copy strong {
    font-size:clamp(1.3rem,1.65svh,2.6rem);
  }

  .home-page .card-copy small {
    margin-top:clamp(7px,.5svh,12px);
    font-size:clamp(.8rem,1svh,1.4rem);
  }

  .home-page .card-top {
    right:auto;
    bottom:clamp(22px,1.55svh,38px);
    left:clamp(24px,1.7svh,42px);
  }

  .home-page .card-top i {
    font-size:clamp(.92rem,1.05svh,1.55rem);
  }
}

@media (max-width:800px) {
  .page-header > .brand,
  .brand {
    width:46px;
    height:auto;
    flex-basis:46px;
  }

  .brand-logo {
    width:46px;
    height:auto;
  }
}

/* Mobile refinement only. Desktop rules above 800px remain untouched. */
@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) {
  html {
    scroll-padding-top:18px;
  }

  body.home-page {
    overflow-x:hidden;
    background:var(--bg);
  }

  .home-shell {
    width:100%;
    min-height:100svh;
    padding:0;
    background:var(--bg);
  }

  .page-header {
    width:100%;
    min-height:68px;
    padding:16px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
  }

  .page-header > .mobile-menu {
    width:44px;
    height:44px;
    top:16px;
    right:max(18px,env(safe-area-inset-right));
  }

  .home-layout,
  .home-intro,
  .menu-area {
    width:100%;
    min-width:0;
  }

  .home-intro {
    padding:0 max(18px,env(safe-area-inset-right)) 24px max(18px,env(safe-area-inset-left));
  }

  .intro-main,
  .hero-main-content {
    width:100%;
    max-width:440px;
    margin-inline:auto;
    padding:28px 0 26px;
    text-align:center;
  }

  .intro-main h1 {
    width:100%;
    max-width:100%;
    padding:0;
    font-size:clamp(2.05rem,9.8vw,3.5rem);
    letter-spacing:.055em;
    line-height:.96;
    overflow-wrap:normal;
    word-break:normal;
  }

  .name-bold {
    margin-top:7px;
    letter-spacing:.035em;
  }

  .eyebrow {
    margin:17px 0 0;
    font-size:.63rem;
    letter-spacing:.28em;
    line-height:1.35;
  }

  .traits {
    width:min(100%,270px);
    margin:24px auto 0;
    gap:11px;
    justify-items:stretch;
  }

  .traits li {
    min-height:24px;
    justify-content:center;
    gap:10px;
    color:var(--text-soft);
    font-size:.69rem;
    font-weight:550;
    letter-spacing:.015em;
    line-height:1.35;
    text-align:center;
    text-transform:none;
  }

  .traits li::before {
    content:none;
  }

  .trait-icon {
    width:18px;
    height:18px;
    flex:0 0 18px;
    display:block;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.86;
  }

  .download-cv {
    min-height:44px;
    margin:22px auto 0;
    padding:10px 15px;
    border-radius:6px;
  }

  .menu-area {
    padding:0 max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }

  .menu-grid {
    width:100%;
    margin:0;
    gap:10px;
    scroll-margin-top:18px;
  }

  .menu-card,
  .menu-card:nth-child(even) {
    width:100%;
    min-width:0;
    min-height:clamp(94px,27vw,108px);
    grid-template-columns:clamp(86px,28vw,108px) minmax(0,1fr) 42px;
    border-color:var(--border);
    border-radius:11px;
    background:var(--surface);
    box-shadow:0 5px 16px rgba(36,28,20,.055);
    isolation:isolate;
  }

  .menu-card img,
  .menu-card:nth-child(even) img {
    width:100%;
    height:100%;
    min-width:0;
    object-fit:cover;
    object-position:center;
  }

  .menu-card.card-personalia img {
    object-position:50% 28%;
  }

  .card-copy,
  .menu-card:nth-child(even) .card-copy {
    min-width:0;
    padding:14px 8px 14px 14px;
  }

  .card-copy strong {
    color:var(--text);
    font-size:clamp(.9rem,4vw,1.02rem);
    letter-spacing:-.018em;
    line-height:1.14;
    overflow-wrap:normal;
    word-break:normal;
  }

  .card-copy small {
    margin-top:5px;
    color:var(--text-soft);
    font-size:.68rem;
    line-height:1.35;
    overflow-wrap:normal;
  }

  .card-top i {
    width:42px;
    height:44px;
    display:grid;
    place-items:center;
    color:var(--accent);
    font-size:.92rem;
    opacity:.78;
  }

  .mobile-contact {
    min-height:48px;
    margin:18px 0 0;
    border-radius:7px;
  }

  .mobile-contact .utility-mail-icon {
    width:18px;
    height:14px;
    position:relative;
    display:block;
    flex:0 0 18px;
    border:1.4px solid currentColor;
    border-radius:2px;
  }

  .mobile-contact .utility-mail-icon::before,
  .mobile-contact .utility-mail-icon::after {
    content:"";
    width:10px;
    height:1.3px;
    position:absolute;
    top:1px;
    background:currentColor;
  }

  .mobile-contact .utility-mail-icon::before {
    left:0;
    transform:rotate(35deg);
    transform-origin:left center;
  }

  .mobile-contact .utility-mail-icon::after {
    right:0;
    transform:rotate(-35deg);
    transform-origin:right center;
  }
}

.mobile-social-links {
  display:none;
}

@media (min-width:481px) and (max-width:800px) {
  .page-header .utility-links {
    display:flex;
    align-items:center;
    gap:8px;
    position:absolute;
    top:16px;
    right:calc(max(18px,env(safe-area-inset-right)) + 104px);
    padding:0;
  }

  .page-header .utility-links .utility-contact {
    display:none;
  }
}

@media (max-width:480px) {
  .mobile-social-links {
    margin:16px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }
}

@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) {
  .mobile-social-links .utility-social,
  .page-header .utility-links .utility-social {
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
  }

  .mobile-social-links .utility-linkedin > span,
  .page-header .utility-linkedin > span {
    font-size:.86rem;
    font-weight:800;
    letter-spacing:-.045em;
    line-height:1;
  }

  .mobile-social-links .utility-instagram-icon,
  .page-header .utility-instagram-icon {
    width:17px;
    height:17px;
    position:relative;
    display:block;
    border:1.5px solid currentColor;
    border-radius:5px;
  }

  .mobile-social-links .utility-instagram-icon::before,
  .page-header .utility-instagram-icon::before {
    content:"";
    position:absolute;
    inset:4px;
    border:1.35px solid currentColor;
    border-radius:50%;
  }

  .mobile-social-links .utility-instagram-icon::after,
  .page-header .utility-instagram-icon::after {
    content:"";
    width:2px;
    height:2px;
    position:absolute;
    top:2.5px;
    right:2.5px;
    border-radius:50%;
    background:currentColor;
  }
}

/* Wide touch devices: keep mobile behaviour instead of entering desktop mode. */
@media (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) {
  .home-shell {
    height:auto;
    min-height:100svh;
    padding:0;
    display:block;
  }

  .page-header {
    min-height:68px;
    padding:16px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
    position:relative;
    display:flex;
  }

  .page-header > .mobile-menu {
    width:44px;
    height:44px;
    top:16px;
    right:max(18px,env(safe-area-inset-right));
    display:block;
  }

  .page-header .utility-links {
    display:flex;
    align-items:center;
    gap:8px;
    position:absolute;
    top:16px;
    right:calc(max(18px,env(safe-area-inset-right)) + 104px);
    padding:0;
  }

  .page-header .utility-links .utility-contact {
    display:none;
  }

  .page-header .utility-links .utility-social {
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
  }

  .page-header .utility-linkedin > span {
    font-size:.86rem;
    font-weight:800;
    letter-spacing:-.045em;
    line-height:1;
  }

  .page-header .utility-instagram-icon {
    width:17px;
    height:17px;
    position:relative;
    display:block;
    border:1.5px solid currentColor;
    border-radius:5px;
  }

  .page-header .utility-instagram-icon::before {
    content:"";
    position:absolute;
    inset:4px;
    border:1.35px solid currentColor;
    border-radius:50%;
  }

  .page-header .utility-instagram-icon::after {
    content:"";
    width:2px;
    height:2px;
    position:absolute;
    top:2.5px;
    right:2.5px;
    border-radius:50%;
    background:currentColor;
  }

  .home-layout {
    width:100%;
    height:auto;
    display:block;
  }

  .home-intro {
    height:auto;
    min-height:0;
    padding:0 max(18px,env(safe-area-inset-right)) 24px max(18px,env(safe-area-inset-left));
    overflow:visible;
  }

  .hero-photo-layer {
    display:none;
  }

  .intro-main,
  .hero-main-content {
    max-width:460px;
    margin:0 auto;
    padding:24px 0 26px;
    text-align:center;
  }

  .intro-main h1 {
    font-size:clamp(2.45rem,7vw,3.55rem);
  }

  .traits {
    width:min(100%,270px);
    margin:24px auto 0;
  }

  .download-cv {
    margin:22px auto 0;
    display:inline-flex;
  }

  .menu-area {
    width:100%;
    height:auto;
    padding:0 max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    display:block;
  }

  .menu-grid {
    width:100%;
    height:auto;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:minmax(104px,auto);
    gap:10px;
  }

  .mobile-contact {
    min-height:48px;
    margin:18px 0 0;
    display:flex;
  }
}

@media (max-width:380px) {
  .page-header {
    padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  }

  .page-header > .mobile-menu {
    right:max(14px,env(safe-area-inset-right));
  }

  .home-intro {
    padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  }

  .intro-main h1 {
    font-size:clamp(1.95rem,10.2vw,2.35rem);
    letter-spacing:.04em;
  }

  .menu-area {
    padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
  }

  .menu-card,
  .menu-card:nth-child(even) {
    min-height:92px;
    grid-template-columns:82px minmax(0,1fr) 40px;
  }

  .card-copy,
  .menu-card:nth-child(even) .card-copy {
    padding-left:12px;
  }

  .card-copy strong {
    font-size:.88rem;
  }
}

/* Mobile social links live at the end of the page, never in the topbar. */
@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (any-pointer:coarse), (min-width:801px) and (max-width:1000px) and (orientation:landscape) and (max-height:600px), (min-width:768px) and (max-width:1100px) and (min-height:700px) {
  .page-header .utility-links {
    display:none;
  }

  .mobile-social-links {
    margin:16px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }

  .menu-area > .mobile-social-links {
    margin-top:14px;
  }

  .mobile-contact {
    width:100%;
    min-height:48px;
    margin:18px 0 0;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:7px;
    background:linear-gradient(90deg,#a7653c,#bc7950);
    box-shadow:0 6px 14px rgba(126,72,38,.16);
    color:#fff;
    font-size:.69rem;
    font-weight:700;
    letter-spacing:.12em;
    line-height:1;
    text-decoration:none;
    text-transform:uppercase;
  }
}

/* Large desktop canvas: scale from height and retain the approved 16:10 composition. */
@media (min-width:2000px) {
  body.home-page .home-shell {
    width:min(90vw,147.2svh,4000px);
    height:auto;
    max-height:92svh;
    min-height:0;
    aspect-ratio:16 / 10;
    margin:auto;
    padding:clamp(34px,2.1svh,58px);
    grid-template-rows:clamp(48px,3.3svh,80px) minmax(0,1fr);
    --content-top:clamp(34px,2.5svh,68px);
  }

  .home-page .home-layout {
    column-gap:clamp(30px,2.15svh,56px);
  }

  .home-page .intro-main,
  .home-page .hero-main-content {
    max-width:clamp(620px,38svh,980px);
    padding-top:var(--content-top);
  }

  .home-page .intro-main h1 {
    max-width:clamp(610px,37svh,950px);
    font-size:clamp(5.25rem,6.3svh,9.5rem);
  }

  .home-page .eyebrow {
    margin-top:clamp(28px,2svh,52px);
    font-size:clamp(1.05rem,1.15svh,1.65rem);
  }

  .home-page .traits {
    margin-top:clamp(34px,2.35svh,62px);
    gap:clamp(15px,1.15svh,28px);
  }

  .home-page .traits li {
    gap:clamp(14px,1svh,24px);
    font-size:clamp(.98rem,1.1svh,1.65rem);
  }

  .home-page .trait-icon {
    width:clamp(20px,1.45svh,34px);
    height:clamp(20px,1.45svh,34px);
    flex-basis:clamp(20px,1.45svh,34px);
  }

  .home-page .download-cv {
    min-height:clamp(42px,3.1svh,70px);
    margin-top:clamp(28px,2svh,50px);
    padding:clamp(10px,.75svh,17px) clamp(16px,1.2svh,29px);
    font-size:clamp(.72rem,.78svh,1.12rem);
  }

  .home-page .brand,
  .home-page .page-header > .brand,
  .home-page .brand-logo {
    width:clamp(64px,4.3svh,110px);
  }

  .home-page .brand,
  .home-page .page-header > .brand {
    flex-basis:clamp(64px,4.3svh,110px);
  }

  .home-page .utility-links .utility-social {
    width:clamp(48px,3.3svh,80px);
    height:clamp(48px,3.3svh,80px);
    flex-basis:clamp(48px,3.3svh,80px);
  }

  .home-page .utility-links a.utility-contact {
    height:clamp(48px,3.3svh,80px);
    min-height:clamp(48px,3.3svh,80px);
    padding-inline:clamp(18px,1.35svh,32px);
    font-size:clamp(.7rem,.76svh,1.08rem);
  }

  .home-page .utility-linkedin > span {
    font-size:clamp(.94rem,1svh,1.45rem);
  }

  .home-page .utility-instagram-icon {
    width:clamp(18px,1.25svh,30px);
    height:clamp(18px,1.25svh,30px);
  }

  .home-page .utility-mail-icon {
    width:clamp(17px,1.2svh,28px);
    height:clamp(13px,.9svh,21px);
    flex-basis:clamp(17px,1.2svh,28px);
  }

  .home-page .menu-grid {
    column-gap:clamp(12px,.8svh,20px);
    row-gap:clamp(12px,.8svh,20px);
  }

  .home-page .menu-card {
    border-radius:clamp(11px,.75svh,18px);
  }

  .home-page .card-copy {
    right:43%;
    bottom:clamp(54px,3.7svh,92px);
    left:clamp(24px,1.7svh,42px);
  }

  .home-page .card-copy strong {
    font-size:clamp(1.3rem,1.65svh,2.6rem);
  }

  .home-page .card-copy small {
    margin-top:clamp(7px,.5svh,12px);
    font-size:clamp(.8rem,1svh,1.4rem);
  }

  .home-page .card-top {
    right:auto;
    bottom:clamp(22px,1.55svh,38px);
    left:clamp(24px,1.7svh,42px);
  }

  .home-page .card-top i {
    font-size:clamp(.92rem,1.05svh,1.55rem);
  }
}