@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&display=swap');
/* Figma-inspired portfolio treatment — keeps existing content and functionality. */
:root{
 --bg:#F7F5F1;--bg-2:#EEEAE5;--ink:#1D1E22;--ink-soft:#606168;
 --line:#DEDAD5;--accent:#9A6700;--accent-hover:#805600;
 --accent-alt:#9A6700;--accent-alt-hover:#805600;--on-accent:#FFFFFF;
 --sans:"Segoe UI",Tahoma,"Helvetica Neue",Arial,sans-serif;
 --wide-w:1240px;--content-w:900px;
}
:root[data-theme="dark"]{
 --bg:#17161B;--bg-2:#232129;--ink:#F5F1EC;--ink-soft:#C3BEC7;
 --line:#3C3741;--accent:#FF4A11;--accent-hover:#FF6B3D;
 --accent-alt:#FF4A11;--accent-alt-hover:#FF6B3D;--on-accent:#16121D;
}
body{font-size:1.03rem;line-height:1.7}
h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.045em}
.topbar{background:color-mix(in srgb,var(--bg) 93%,transparent);border-bottom:1px solid var(--line)}
.topbar-inner{min-height:86px;gap:32px}
.site-name{font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.desktop-nav a{font-size:.9rem;font-weight:400;letter-spacing:.01em}
.hero{padding:100px 0 125px;overflow:hidden}
.hero-eyebrow{font-size:.84rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
.hero-name{font-family:var(--serif);font-size:clamp(5rem,9vw,9rem);font-weight:600;line-height:.96;letter-spacing:-.02em;margin:0 0 40px}
.hero-intro{font-size:clamp(1.16rem,1.75vw,1.5rem);line-height:1.55;max-width:630px;color:var(--ink);margin-bottom:30px}
.hero-proof{margin-bottom:34px;font-size:.78rem;letter-spacing:.07em}
.hero-btn{border-radius:12px;padding:15px 24px;font-size:.94rem}
.hero-btn.solid{background:var(--accent);border-color:var(--accent)}
.hero-btn.outline{border-color:var(--line)}
.work-meta{color:var(--accent);font-size:.78rem}
@media(max-width:820px){
 .topbar-inner{min-height:68px}
 .hero{padding:52px 0 75px}
 .hero-name{font-size:clamp(4rem,13vw,7rem);margin-bottom:26px}
 .hero-intro{font-size:1.1rem}
}
@media(max-width:520px){
 .hero-name{font-size:clamp(3.75rem,15vw,5.2rem)}
 .hero{padding-top:38px}
 .hero-btn{padding:13px 16px}
 .hero-proof{line-height:1.6}
}


/* Dark-only layout, contact disclosure and mobile portrait hierarchy. */
:root, :root[data-theme="dark"]{
 --bg:#17161B;--bg-2:#232129;--ink:#F5F1EC;--ink-soft:#C3BEC7;
 --line:#3C3741;--accent:#FF4A11;--accent-hover:#FF6B3D;
 --accent-alt:#FF4A11;--accent-alt-hover:#FF6B3D;--on-accent:#16121D;
 color-scheme:dark;
}
.contact-trigger{font-family:inherit;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.contact-dialog{margin:auto}
.contact-dialog{width:min(94vw,980px);max-height:min(90dvh,900px);overflow:auto;border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,56px);background:var(--bg-2);color:var(--ink);box-shadow:0 24px 80px #0009}
.contact-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.contact-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-dialog-head h2{font-size:1.65rem;margin:0}
.contact-close{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:50%;width:42px;height:42px;font-size:1.5rem;cursor:pointer}
.contact-dialog-note{color:var(--ink-soft);font-size:.92rem;margin:12px 0 24px}
.contact-dialog .colophon-links{display:block}
.contact-dialog .cm-row{display:flex;flex-wrap:wrap;gap:8px 18px;padding:16px 0;border-top:1px solid var(--line)}
.contact-dialog .cm-k{min-width:75px}
.contact-dialog a,.contact-dialog button{color:var(--accent)}
@media(max-width:820px){
 .hero{padding:26px 0 56px}
 .hero-name{font-size:clamp(3.25rem,11vw,5.2rem);margin-bottom:20px;line-height:.98}
 .hero-eyebrow{font-size:.68rem;letter-spacing:.09em;margin-bottom:14px}
 .hero-intro{font-size:1rem;line-height:1.55;margin-bottom:18px}
 .hero-proof{margin-bottom:14px}
 .hero-cta-row{margin-top:8px;gap:12px;justify-content:flex-start}
 .hero-btn{font-size:.9rem;padding:10px 12px}
}
@media(max-width:520px){
 .hero-name{font-size:clamp(3.25rem,12vw,4.5rem)}
 .topbar-inner{justify-content:space-between}
 .site-name{display:inline-flex;font-size:.85rem}
 .desktop-nav a{font-size:.82rem}
 .utilbar{gap:8px}
 .lang-btn{font-size:.76rem;min-width:30px}
}

/* Minimal two-language header without redundant projects navigation. */
.topbar-inner{min-height:72px;justify-content:space-between;align-items:center;flex-wrap:nowrap}
.site-name{display:inline-flex!important;white-space:nowrap}
.utilbar{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(max-width:520px){
 .topbar-inner{min-height:64px;padding:12px 20px;gap:10px;flex-wrap:nowrap}
 .site-name{font-size:.84rem}
 .utilbar{gap:8px}
}

/* Vignelli-concept hero: full-bleed portrait, nav restored, project filmstrip. */
.topbar-inner{justify-content:flex-start}
.desktop-nav{margin-left:32px;margin-right:0}
.utilbar{margin-left:auto}
@media(max-width:700px){.desktop-nav{margin-left:0}}

/* Floating over the hero photo instead of sitting in normal flow, so the
   portrait bleeds up behind the nav — matching the reference, where the
   header reads as translucent over the portrait rather than a solid bar
   above it. */
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;background:linear-gradient(to bottom,rgba(10,9,8,.5) 0%,transparent 100%);border-bottom:0}

/* Solid accent block filling the full topbar height and bleeding to the
   right edge, matching the concept's corner block — a real trigger for
   Contatti, not a decorative stand-in. */
.topbar-contact{
  position:absolute;top:0;right:0;bottom:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:88px;margin:0;border-radius:0;
  background:var(--accent);color:var(--on-accent);border:0;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
@media(hover:hover) and (pointer:fine){.topbar-contact:hover{background:var(--accent-hover)}}
.topbar-inner{padding-right:152px}
@media(max-width:1050px){.topbar-contact{width:72px}.topbar-inner{padding-right:112px}}
@media(max-width:700px){.topbar-contact{width:64px}.topbar-inner{padding-right:88px}}
@media(max-width:520px){.topbar-contact{width:56px}.topbar-inner{padding-right:76px}}

.hero{padding:0;background:var(--bg);overflow:visible}
.hero-inner{position:relative;min-height:80vh;display:flex;align-items:center;padding:132px 0 72px}
.hero-overlay{position:relative;z-index:2;max-width:560px}
/* True full-bleed background: this photo already has its own wide dark
   backdrop on the left for the text to sit on, so it needs no CSS fade
   trick — it covers the whole hero edge to edge (true viewport edges,
   not just the centred wrap/editorial-shell ancestors) and reaches the
   top so it continues behind the floating header. */
.hero-photo-frame{position:absolute;inset:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:1;overflow:hidden;pointer-events:none}
.hero-portrait{width:100%;height:100%;object-fit:cover;object-position:100% center;display:block;filter:none}
/* The wall texture behind the text varies in tone, unlike a flat colour —
   a scrim keeps the text reliably legible regardless of what's under it,
   fading out before the subject so the portrait itself stays unobscured. */
.hero-photo-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(10,9,8,.62) 0%,rgba(10,9,8,.32) 42%,rgba(10,9,8,0) 68%)}
/* Full-bleed row like the photo above it: .hero sits inside
   .editorial-shell's centred, padded 1280px container, so without this
   the filmstrip stops at that container's edges instead of reaching the
   true viewport edges. */
.hero-filmstrip{display:flex;border-top:1px solid var(--line);position:relative;width:100vw;left:50%;margin-left:-50vw}
.filmstrip-tile{flex:1;min-width:0;padding:22px clamp(20px,3vw,40px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:var(--bg-2);transition:background var(--dur) var(--ease)}
.filmstrip-tile:last-child{border-right:0}
@media(hover:hover) and (pointer:fine){.filmstrip-tile:hover{background:color-mix(in srgb,var(--bg-2) 85%,var(--accent) 10%)}}
.filmstrip-tile:focus-visible{background:color-mix(in srgb,var(--bg-2) 85%,var(--accent) 10%)}
.filmstrip-meta{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.filmstrip-title{font-family:var(--serif);font-size:1.0625rem;color:var(--ink)}
@media(max-width:820px){
 .hero-inner{padding:96px 0 48px;min-height:70vh}
}
@media(max-width:700px){
 /* The floating transparent header only works once the photo bleeds
    behind it; on the stacked mobile layout it would just sit over a
    now-static photo block, so it goes back to a solid, in-flow bar. */
 .topbar{position:relative;background:color-mix(in srgb,var(--bg) 93%,transparent);border-bottom:1px solid var(--line)}
 .hero-inner{display:flex;flex-direction:column;min-height:0;padding:0 0 40px;gap:28px}
 .hero-overlay{max-width:none}
 .hero-photo-frame{position:static;inset:auto;left:auto;right:auto;width:100%;height:min(420px,58vh);order:-1}
 /* The mobile crop is pre-composed wider than the subject so a cover
    fit reaches both edges without cutting into the face. */
 .hero-portrait{object-fit:cover}
 .hero-filmstrip{flex-direction:column}
 .filmstrip-tile{border-right:0;border-bottom:1px solid var(--line)}
 .filmstrip-tile:last-child{border-bottom:0}
}

/* Match the concept's small rounded-rect CTA (not a pill) with a trailing
   chevron on the primary action; an earlier pass had turned every
   .hero-btn into a plain underlined link via !important overrides. */
.hero-overlay .hero-btn{
  border:0!important;border-radius:6px!important;
  padding:13px 18px!important;font-size:.88rem!important;font-weight:600;
  text-decoration:none!important;min-height:0;
  display:inline-flex!important;align-items:center;gap:8px;
}
.hero-overlay .hero-btn.solid{background:var(--accent)!important;color:var(--on-accent)!important}
@media(hover:hover) and (pointer:fine){.hero-overlay .hero-btn.solid:hover{background:var(--accent-hover)!important}}
.hero-overlay .hero-btn.outline{background:transparent!important;color:#F5F1EC!important;border:0!important;padding-left:0!important;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){.hero-overlay .hero-btn.outline:hover{text-decoration:underline!important}}
.hero-btn-chevron{flex-shrink:0}

/* Trailing arrow block closing the filmstrip, matching the concept's "more" tile. */
.filmstrip-more{flex:0 0 clamp(56px,7vw,88px);background:var(--accent)}

/* Matching neutral cell at the opposite end of the filmstrip, mirroring the
   concept's grey "scroll" block — decorative only, not a real scroll
   target (the filmstrip is the last thing on the page), so it's a span,
   never a button pretending to do something it can't. */
.filmstrip-start{flex:0 0 clamp(56px,7vw,88px);display:flex;align-items:center;justify-content:center;background:#4F4B56;color:var(--ink-soft)}
@media(max-width:700px){.filmstrip-start,.filmstrip-more{display:none}}

/* The colophon section already has its own top border; the footer note's
   own border-top on top of it read as two redundant parallel lines. */
.footer-note{border-top:0;padding-top:0}


/* High-contrast editorial serif inspired by the supplied Vignelli reference. */
:root{--display-serif:"Bodoni Moda","Times New Roman",serif}
.hero-name{font-family:var(--display-serif);font-weight:500;letter-spacing:-.055em;line-height:.91}
.filmstrip-title{font-family:var(--display-serif);letter-spacing:-.025em}
@media(max-width:700px){.hero-name{letter-spacing:-.05em;line-height:.96}}

/* Editorial alignment and responsive polish. */
:root{--editorial-gutter:clamp(24px,5vw,80px)}
.hero-inner{width:min(100% - 2*var(--editorial-gutter),1280px);margin-inline:auto}
.hero-overlay{width:min(100%,590px)}
.hero-name{font-size:clamp(4.25rem,9vw,9rem);overflow-wrap:normal}
.hero-intro{max-width:49ch;text-wrap:pretty}
.hero-cta-row{align-items:center}
.hero-filmstrip{margin-top:0}
.filmstrip-tile{justify-content:center;min-height:112px}
.filmstrip-title{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.2}
.filmstrip-meta{line-height:1.45}
.hero-portrait{filter:none}
@media(min-width:701px){.hero-inner{min-height:min(800px,80vh)}.hero-overlay{padding-block:28px}.hero-photo-frame{inset-block:0}}
@media(max-width:700px){
 .hero-inner{width:100%;padding:0 0 36px;gap:0}
 .hero-photo-frame{height:clamp(260px,53vw,420px);width:100%}
 .hero-overlay{padding:28px var(--editorial-gutter) 0}
 .hero-name{font-size:clamp(3.5rem,13vw,5.7rem);line-height:.94;margin-bottom:22px}
 .hero-intro{font-size:1rem;line-height:1.6}
 .hero-cta-row{flex-wrap:wrap;gap:10px 18px}
 .filmstrip-tile{min-height:88px;padding:18px var(--editorial-gutter)}
}
@media(max-width:380px){.hero-name{font-size:clamp(3.15rem,12.8vw,4rem)}.hero-overlay{padding-inline:20px}}

/* Mobile portrait: preserve headroom without affecting desktop composition. */
@media(max-width:700px){
 .hero-photo-frame{height:clamp(300px,68vw,480px);overflow:hidden}
 .hero-portrait{object-fit:contain;object-position:center top;width:100%;height:100%}
}

/* Reference-aligned right rail and compact colophon, 2026-10. */
:root{--rail-width:clamp(56px,7vw,88px)}
.topbar-contact{width:var(--rail-width)}
.topbar-inner{padding-right:calc(var(--rail-width) + 64px)}
.filmstrip-more,.filmstrip-start{flex:0 0 var(--rail-width)}
.colophon{margin-top:0;padding:24px 0 30px;border-top:0;background:transparent}
.colophon-inner{gap:0}
.footer-note{margin:0;padding:18px 0 0;border-top:1px solid var(--line);line-height:1.5}
@media(max-width:1050px){.topbar-inner{padding-right:calc(var(--rail-width) + 38px)}}
@media(max-width:700px){.topbar-inner{padding-right:calc(var(--rail-width) + 16px)}.colophon{padding:20px 0 24px}}

/* Mobile: make portrait flush with viewport, removing contain letterboxing. */
@media(max-width:700px){
 .hero-photo-frame{position:relative;left:50%;right:auto;width:100vw;max-width:none;margin-left:-50vw;height:clamp(330px,92vw,560px);overflow:hidden}
 .hero-photo-frame picture{display:block;width:100%;height:100%}
 .hero-photo-frame .hero-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 36%;max-width:none}
}

/* Final mobile image treatment: flush crop, controlled headroom, brighter midtones. */
@media(max-width:700px){
 .hero-inner{width:100%;max-width:none;margin:0}
 .hero-photo-frame{left:auto;right:auto;margin:0;width:100%;max-width:100%;height:clamp(350px,105vw,580px);background:#17161B}
 .hero-photo-frame picture{width:100%;height:100%}
 .hero-photo-frame .hero-portrait{width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:brightness(1.22) contrast(1.04)}
}

/* Desktop: use one viewport-aligned rail, with a soft portrait-to-page fade. */
@media(min-width:701px){
 .hero-photo-frame{left:calc(50% - 50vw);right:calc(50% - 50vw);width:100vw;max-width:none;overflow:hidden}
 .hero-photo-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.96) 8%,rgba(23,22,27,.35) 29%,transparent 51%),linear-gradient(to bottom,transparent 74%,var(--bg) 100%)}
 .hero-photo-frame .hero-portrait{object-position:center center}
}

/* Mobile: softly merge the portrait into the surrounding dark page. */
@media(max-width:700px){
 .hero-photo-frame{isolation:isolate;background:var(--bg)}
 .hero-photo-frame::before{content:none}
 .hero-photo-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.28) 7%,transparent 20%,transparent 80%,rgba(23,22,27,.28) 93%,var(--bg) 100%),
   linear-gradient(to bottom,transparent 68%,rgba(23,22,27,.22) 82%,var(--bg) 100%);
 }
}

/* Restore portrait visibility on desktop: keep fade confined to text side. */
@media(min-width:701px){
 .hero-photo-frame::after{
  background:linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.88) 16%,rgba(23,22,27,.28) 38%,transparent 55%),linear-gradient(to bottom,transparent 88%,rgba(23,22,27,.25) 100%);
 }
 .hero-photo-frame .hero-portrait{object-position:right center;filter:brightness(1.15) contrast(1.04)}
}

/* Desktop final: progressive feathering around the portrait, not over the face. */
@media(min-width:701px){
 .hero-photo-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.93) 13%,rgba(23,22,27,.55) 29%,rgba(23,22,27,.12) 43%,transparent 57%),
   linear-gradient(to bottom,rgba(23,22,27,.30) 0%,transparent 17%,transparent 83%,rgba(23,22,27,.25) 93%,var(--bg) 100%);
 }
}

/* Final editorial refinements: real progressive fades, restrained copy and footer. */
@media(min-width:701px){
 .hero-overlay{max-width:min(47vw,530px)}
 .hero-intro{font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.57;max-width:43ch;text-wrap:pretty}
 .hero-photo-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.96) 12%,rgba(23,22,27,.76) 24%,rgba(23,22,27,.36) 35%,rgba(23,22,27,.08) 45%,transparent 54%),
   linear-gradient(to bottom,rgba(23,22,27,.26) 0%,transparent 18%,transparent 74%,rgba(23,22,27,.12) 83%,rgba(23,22,27,.55) 94%,var(--bg) 100%);
 }
}
@media(max-width:700px){.hero-intro{font-size:clamp(.96rem,3.6vw,1.06rem);line-height:1.56;max-width:43ch}}
.colophon{padding-top:12px;padding-bottom:16px}
.footer-note{padding-top:12px;line-height:1.4;font-size:.85rem}
@media(max-width:700px){.colophon{padding:12px 0 18px}.footer-note{padding-top:12px}}

/* Feather the photograph's right edge; preserve the face and the timeline rail. */
@media(min-width:701px){
 .hero-photo-frame::after{
  background:
   linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.96) 12%,rgba(23,22,27,.76) 24%,rgba(23,22,27,.36) 35%,rgba(23,22,27,.08) 45%,transparent 54%),
   linear-gradient(to left,var(--bg) 0%,rgba(23,22,27,.92) 5%,rgba(23,22,27,.58) 10%,rgba(23,22,27,.14) 15%,transparent 21%),
   linear-gradient(to bottom,rgba(23,22,27,.26) 0%,transparent 18%,transparent 74%,rgba(23,22,27,.12) 83%,rgba(23,22,27,.55) 94%,var(--bg) 100%);
 }
}

/* The portrait's right edge is feathered into the page colour inside
   photo.webp itself, so no CSS fade is needed over the face. */
@media(min-width:701px){
 .hero-photo-frame::after{
  background:
   linear-gradient(to right,var(--bg) 0%,rgba(23,22,27,.96) 12%,rgba(23,22,27,.76) 24%,rgba(23,22,27,.36) 35%,rgba(23,22,27,.08) 45%,transparent 54%),
   linear-gradient(to bottom,rgba(23,22,27,.26) 0%,transparent 18%,transparent 74%,rgba(23,22,27,.12) 83%,rgba(23,22,27,.55) 94%,var(--bg) 100%);
 }
}

/* Unified dark surfaces: hero, project strip and footer share one ground. */
:root[data-theme="dark"]{--bg:#111014;--bg-2:#111014;--line:#29262D}
:root[data-theme="dark"] body,:root[data-theme="dark"] .hero,:root[data-theme="dark"] .colophon,:root[data-theme="dark"] .hero-filmstrip,:root[data-theme="dark"] .filmstrip-tile{background:var(--bg)}
:root[data-theme="dark"] .filmstrip-start{background:#29262D}
:root[data-theme="dark"] .filmstrip-tile{border-color:var(--line)}
:root[data-theme="dark"] .footer-note{border-color:var(--line)}
@media(hover:hover) and (pointer:fine){:root[data-theme="dark"] .filmstrip-tile:hover{background:#1C1A20}}
:root[data-theme="dark"] .filmstrip-tile:focus-visible{background:#1C1A20}
/* Keep portrait fades calibrated to the new, unified background. */
:root[data-theme="dark"] .hero-photo-frame::after{background:
 linear-gradient(to right,#111014 0%,rgba(17,16,20,.96) 12%,rgba(17,16,20,.76) 24%,rgba(17,16,20,.36) 35%,rgba(17,16,20,.08) 45%,transparent 54%),
 linear-gradient(to bottom,rgba(17,16,20,.26) 0%,transparent 18%,transparent 74%,rgba(17,16,20,.12) 83%,rgba(17,16,20,.55) 94%,#111014 100%)}
@media(max-width:700px){:root[data-theme="dark"] .hero-photo-frame::after{background:linear-gradient(to right,#111014 0%,rgba(17,16,20,.28) 7%,transparent 20%,transparent 80%,rgba(17,16,20,.28) 93%,#111014 100%),linear-gradient(to bottom,transparent 68%,rgba(17,16,20,.22) 82%,#111014 100%)}}

/* Center labels and icons in all orange action controls. */
.topbar-contact,.hero-overlay .hero-btn.solid{
 display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
.topbar-contact svg{display:block;flex-shrink:0;margin:auto}
.hero-overlay .hero-btn.solid{gap:12px;line-height:1.2}
.hero-overlay .hero-btn.solid svg{flex-shrink:0}

/* Keep the original header dimensions; size the lower strip to match it. */
:root{--action-rail-height:86px}
.topbar-contact{padding:0;display:grid;place-items:center}
.hero-filmstrip{height:var(--action-rail-height);min-height:0;align-items:stretch}
.filmstrip-tile,.filmstrip-start,.filmstrip-more{box-sizing:border-box;height:100%;min-height:0;align-self:stretch}
.filmstrip-tile{justify-content:center;padding-top:8px;padding-bottom:8px}
.filmstrip-start{padding:0;display:grid;place-items:center}
.filmstrip-more{padding:0}
.topbar-contact svg{display:block;width:18px;height:18px;margin:0;position:static;transform:none}
.hero-name{font-weight:700}
@media(max-width:700px){
 .hero-filmstrip{height:auto;min-height:0}
 .filmstrip-tile{height:auto;min-height:0}
}

/* Exact optical centering in orange rails: avoid inherited grid/flex margins. */
.topbar-contact{position:relative;display:block;padding:0;line-height:0;text-align:center}
.topbar-contact svg{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:0;transform:translate(-50%,-50%);display:block}
/* The footer rule is the bottom closing line of the project strip. */
.colophon{padding-top:0}
.colophon-inner{padding-top:0}
.footer-note{margin:0;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:700px){.colophon{padding-top:0}}

/* Restore the envelope's orange surface and visible dark icon. */
.topbar-contact{background:var(--accent)!important;color:#16121D!important;z-index:5}
.topbar-contact svg{color:#16121D!important;stroke:#16121D!important;fill:none;opacity:1;visibility:visible;z-index:1;pointer-events:none}

/* Fix regression: header contact must be anchored to viewport right, not relative. */
.topbar-contact{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;display:grid!important;place-items:center!important;padding:0!important;background:var(--accent)!important;color:#16121D!important}
.topbar-contact svg{position:static!important;transform:none!important;margin:0!important;display:block!important;stroke:currentColor!important;opacity:1!important}
/* Keep lower arrow geometrically centered without absolute SVG offsets. */

/* Final rail geometry: center SVGs in the actual colored boxes. */
.topbar-contact{position:absolute!important;inset:0 0 0 auto!important;width:var(--rail-width)!important;height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
.topbar-contact svg{position:static!important;width:18px!important;height:18px!important;flex:none!important;transform:none!important;margin:0!important}
.filmstrip-more{box-sizing:border-box!important;min-width:var(--rail-width)!important;flex:0 0 var(--rail-width)!important}
/* No inert grey scroll control: first project occupies its former slot. */
.hero-filmstrip .filmstrip-tile:first-child{border-left:0}
@media(max-width:700px){.topbar-contact{width:var(--rail-width)!important}}

/* Match the empty leading rail to the orange trailing action rail. */
.filmstrip-start,:root[data-theme="dark"] .filmstrip-start{background:var(--accent)}

.hero-filmstrip .filmstrip-tile{align-items:center;justify-content:center;text-align:center}

/* Case study readability and keyboard accessibility */
.filmstrip-tile:focus-visible,.desktop-nav a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.filmstrip-tile{scroll-behavior:auto;transition:none}}

/* Desktop: slide the portrait left, closer to the headline. The right edge
   of photo.webp is already feathered into the page colour, so the strip it
   uncovers blends in with the background. */
@media(min-width:701px) and (max-width:1099px){.hero-photo-frame .hero-portrait{transform:translateX(4vw)}}
@media(min-width:701px) and (max-width:900px){.hero-photo-frame .hero-portrait{transform:translateX(8vw)}}
@media(min-width:1100px){.hero-photo-frame .hero-portrait{transform:translateX(-4vw)}}
@media(min-width:1400px){.hero-photo-frame .hero-portrait{transform:translateX(-9vw)}}