/* ---------------------------------------------------------
     TOKENS
     --------------------------------------------------------- */
  :root{
    --bg:        #080808;
    --bg-elev:   #101010;
    --ink:       #ffffff;
    --fog:       #9a9a9a;   /* secondary text */
    --fog-dim:   #5b5b5b;   /* faint labels    */
    --line:      rgba(255,255,255,0.12);
    --line-2:    rgba(255,255,255,0.26);

    --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --f-body:    "Hanken Grotesk", system-ui, sans-serif;
    --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

    --pad:  clamp(20px, 5vw, 64px);   /* page side padding */
    --frame-inset: clamp(14px, 2.2vw, 26px); /* viewfinder bracket inset */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---------------------------------------------------------
     RESET / BASE
     --------------------------------------------------------- */
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  html{
    scroll-behavior:smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust:100%;
  }

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--f-body);
    font-weight:300;
    line-height:1.55;
    letter-spacing:0.01em;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* film-grain / vignette atmosphere, extremely subtle */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:2;
    background:
      radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
    mix-blend-mode:multiply;
  }
  body::after{
    content:"";
    position:fixed; inset:-50%;
    pointer-events:none;
    z-index:3;
    opacity:0.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation: grain 6s steps(6) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
    40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
    80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
  }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  ::selection{ background:var(--ink); color:var(--bg); }

  :focus-visible{
    outline:1.5px solid var(--ink);
    outline-offset:3px;
  }

  .mono{
    font-family:var(--f-mono);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.18em;
    font-size:0.7rem;
  }

  /* ---------------------------------------------------------
     VIEWFINDER — fixed corner brackets + HUD readouts
     This is the signature: the page as seen through the lens.
     --------------------------------------------------------- */
  .viewfinder{
    position:fixed; inset:0;
    z-index:40;
    pointer-events:none;
  }
  .vf-bracket{
    position:absolute;
    width:26px; height:26px;
    border:1.5px solid var(--line-2);
  }
  .vf-bracket.tl{ top:var(--frame-inset); left:var(--frame-inset); border-right:0; border-bottom:0; }
  .vf-bracket.tr{ top:var(--frame-inset); right:var(--frame-inset); border-left:0;  border-bottom:0; }
  .vf-bracket.bl{ bottom:var(--frame-inset); left:var(--frame-inset); border-right:0; border-top:0; }
  .vf-bracket.br{ bottom:var(--frame-inset); right:var(--frame-inset); border-left:0;  border-top:0; }

  .hud{
    position:absolute;
    color:var(--fog);
    font-family:var(--f-mono);
    font-size:0.62rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
    white-space:nowrap;
  }
  .hud.tl{ top:calc(var(--frame-inset) + 4px); left:calc(var(--frame-inset) + 40px); }
  .hud.tr{ top:calc(var(--frame-inset) + 4px); right:calc(var(--frame-inset) + 40px); }
  .hud.bl{ bottom:calc(var(--frame-inset) + 6px); left:calc(var(--frame-inset) + 40px); }
  .hud.br{ bottom:calc(var(--frame-inset) + 6px); right:calc(var(--frame-inset) + 40px); }

  .hud .live{ color:var(--ink); }

  .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--ink);
    animation: blink 1.6s var(--ease) infinite;
  }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0.15} }

  /* thin scroll-progress line along the very top */
  .scanline{
    position:fixed; top:0; left:0; height:2px; width:0%;
    background:var(--ink); z-index:45;
  }

  @media (max-width: 720px){
    .hud{ display:none; }                        /* declutter: keep only the viewfinder brackets on phones */
    .vf-bracket{ width:18px; height:18px; }
  }

  /* focus reticle that follows the cursor (desktop only) */
  .reticle{
    position:fixed; top:0; left:0;
    width:34px; height:34px;
    margin:-17px 0 0 -17px;
    z-index:44;
    pointer-events:none;
    mix-blend-mode:difference;
    opacity:0;
    transition:opacity .3s ease;
  }
  .reticle::before,.reticle::after{
    content:""; position:absolute; background:#fff;
  }
  .reticle::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
  .reticle::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
  .reticle span{
    position:absolute; inset:0; border:1px solid #fff; border-radius:50%;
    transform:scale(.5);
  }

  /* ---------------------------------------------------------
     NAV
     --------------------------------------------------------- */
  header.nav{
    position:fixed; top:0; left:0; width:100%;
    z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px var(--pad);
    background:rgba(8,8,8,0.28);
    backdrop-filter:blur(11px) saturate(125%);
    -webkit-backdrop-filter:blur(11px) saturate(125%);
    border-bottom:1px solid transparent;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
  }
  header.nav.scrolled{
    background:rgba(8,8,8,0.72);
    border-bottom:1px solid var(--line);
    padding-top:14px; padding-bottom:14px;
  }
  /* keep content legible if the browser can't do backdrop-filter */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    header.nav{ background:rgba(8,8,8,0.82); }
  }
  .brand{
    font-family:var(--f-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:1.15rem;
    line-height:1;
    display:flex; align-items:baseline; gap:10px;
  }
  .brand small{
    font-family:var(--f-mono);
    font-weight:400;
    font-size:0.56rem;
    letter-spacing:0.2em;
    color:var(--fog);
  }
  nav.links{ display:flex; align-items:center; gap:34px; }
  nav.links a{
    font-family:var(--f-mono);
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--fog);
    position:relative;
    padding:4px 0;
    transition:color .25s ease;
  }
  nav.links a .idx{ color:var(--fog-dim); margin-right:7px; }
  nav.links a::after{
    content:""; position:absolute; left:0; bottom:0;
    width:100%; height:1px; background:var(--ink);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
  }
  nav.links a:hover{ color:var(--ink); }
  nav.links a:hover::after,
  nav.links a.active::after{ transform:scaleX(1); }
  nav.links a.active{ color:var(--ink); }

  .menu-btn{
    display:none;
    background:none; border:0; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0;
  }
  .menu-btn span{ width:24px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; transform-origin:center; }
  .menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* mobile menu overlay */
  .mobile-menu{
    position:fixed; inset:0; z-index:49;
    background:var(--bg);
    display:flex; flex-direction:column; justify-content:center;
    gap:6px; padding:var(--pad);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{
    font-family:var(--f-display);
    font-weight:700; text-transform:uppercase;
    font-size:clamp(2.6rem,12vw,4.5rem);
    line-height:1.02;
    color:var(--ink);
    display:flex; align-items:baseline; gap:14px;
  }
  .mobile-menu a .idx{ font-family:var(--f-mono); font-size:.8rem; color:var(--fog-dim); font-weight:400; }

  @media (max-width: 720px){
    nav.links{ display:none; }
    .menu-btn{ display:flex; }
  }

  /* ---------------------------------------------------------
     LAYOUT SCAFFOLD
     --------------------------------------------------------- */
  section{ position:relative; padding: clamp(90px,14vh,170px) var(--pad); }
  .eyebrow{
    font-family:var(--f-mono);
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.24em;
    color:var(--fog);
    display:flex; align-items:center; gap:12px;
    margin-bottom:28px;
  }
  .eyebrow::before{
    content:""; width:34px; height:1px; background:var(--line-2);
    transform:scaleX(0); transform-origin:left;
    transition:transform .8s var(--ease);
  }
  .eyebrow.in-view::before{ transform:scaleX(1); }

  /* reveal-on-scroll */
  [data-reveal]{
    opacity:0; transform:translateY(26px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  [data-reveal].in-view{ opacity:1; transform:none; }

  /* ---------------------------------------------------------
     HERO
     --------------------------------------------------------- */
  .hero{
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:120px; padding-bottom:120px;
  }
  .hero__eyebrow{
    font-family:var(--f-mono);
    font-size:0.72rem; text-transform:uppercase; letter-spacing:0.28em;
    color:var(--fog);
    margin-bottom: clamp(18px,3vw,30px);
    overflow:hidden;
  }
  .hero__eyebrow span{ display:inline-block; }

  .hero__name{
    font-family:var(--f-display);
    font-weight:800;
    text-transform:uppercase;
    line-height:0.82;
    letter-spacing:0.005em;
    font-size:clamp(4.2rem, 20vw, 18rem);
  }
  .hero__name .line{ display:block; overflow:hidden; }
  .hero__name .line__inner{ display:block; transform:translateY(112%); }
  .hero__name .line:nth-child(2) .line__inner{ color:var(--fog); }

  .hero__foot{
    margin-top: clamp(34px,6vw,64px);
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:40px; flex-wrap:wrap;
  }
  .hero__statement{
    max-width:46ch;
    font-size:clamp(1.05rem,2vw,1.5rem);
    font-weight:300;
    line-height:1.45;
    color:#d9d9d9;
  }
  .hero__statement b{ color:var(--ink); font-weight:500; }

  .scrollcue{
    display:flex; align-items:center; gap:12px;
    font-family:var(--f-mono); font-size:0.64rem; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--fog);
  }
  .scrollcue .bar{
    width:1px; height:46px; background:var(--line-2); position:relative; overflow:hidden;
  }
  .scrollcue .bar::after{
    content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--ink); animation: drop 2.2s var(--ease) infinite;
  }
  @keyframes drop{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }

  /* ---------------------------------------------------------
     ABOUT
     --------------------------------------------------------- */
  .about{ border-top:1px solid var(--line); }
  .about__grid{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px,7vw,110px);
    align-items:start;
  }
  .about__lead{
    font-family:var(--f-display);
    font-weight:600;
    text-transform:uppercase;
    line-height:0.95;
    letter-spacing:0.01em;
    font-size:clamp(2.2rem,4.6vw,4rem);
  }
  .about__lead em{ color:var(--fog); font-style:normal; }
  .about__body p{
    font-size:clamp(1.02rem,1.5vw,1.22rem);
    color:#cfcfcf; font-weight:300; line-height:1.7;
    max-width:60ch;
  }
  .about__body p + p{ margin-top:1.3em; }

  /* optional portrait slot — see comment in the markup */
  .portrait{
    margin-top:44px;
    aspect-ratio: 4/5;
    max-width:300px;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    background:var(--bg-elev);
  }
  .portrait .mono{ color:var(--fog-dim); }
  .portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
  .portrait::after{
    content:""; position:absolute; inset:9px; border:1px solid var(--line);
  }

  @media (max-width: 820px){
    .about__grid{ grid-template-columns:1fr; gap:36px; }
  }

  /* ---------------------------------------------------------
     APPROACH — how the work is made (labels, not a sequence)
     --------------------------------------------------------- */
  .approach{ border-top:1px solid var(--line); }
  .approach__grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line);
  }
  .approach__cell{
    background:var(--bg);
    padding: clamp(28px,3.5vw,48px);
    min-height:230px;
    display:flex; flex-direction:column;
    transition:background .4s ease;
  }
  .approach__cell:hover{ background:var(--bg-elev); }
  .approach__k{
    font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--fog); margin-bottom:auto;
  }
  .approach__t{
    font-family:var(--f-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1; margin: 40px 0 14px;
  }
  .approach__d{ color:var(--fog); font-size:0.98rem; line-height:1.6; max-width:34ch; }

  @media (max-width: 820px){
    .approach__grid{ grid-template-columns:1fr; }
    .approach__cell{ min-height:0; }
  }

  /* ---------------------------------------------------------
     CITIES — marquee ("around the world")
     --------------------------------------------------------- */
  .cities{ border-top:1px solid var(--line); padding-left:0; padding-right:0; overflow:hidden; }
  .cities .eyebrow{ padding:0 var(--pad); }
  .marquee{ display:flex; width:max-content; will-change:transform; animation: slide 40s linear infinite; }
  .marquee:nth-child(3){ animation-duration:52s; animation-direction:reverse; opacity:0.4; }
  .marquee__set{ display:flex; align-items:center; }
  .marquee__item{
    font-family:var(--f-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(2.6rem,7vw,6rem); line-height:1;
    padding:0 clamp(22px,3vw,48px);
    color:var(--ink);
  }
  .marquee__item.ghost{ color:transparent; -webkit-text-stroke:1px var(--line-2); }
  .marquee__dot{ width:9px; height:9px; border-radius:50%; background:var(--fog-dim); flex:0 0 auto; }

  @keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ---------------------------------------------------------
     PORTFOLIO
     --------------------------------------------------------- */
  .portfolio{ border-top:1px solid var(--line); }
  .portfolio__head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:30px; flex-wrap:wrap; margin-bottom: clamp(36px,5vw,60px);
  }
  .portfolio__title{
    font-family:var(--f-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(3rem,9vw,7rem); line-height:0.85; letter-spacing:0.01em;
  }
  .portfolio__note{ color:var(--fog); max-width:40ch; font-size:0.98rem; line-height:1.6; }

  .set{ margin-top: clamp(50px,7vw,92px); }
  .set:first-of-type{ margin-top:0; }
  .set__head{
    display:flex; align-items:baseline; justify-content:space-between; gap:20px;
    padding-bottom:15px; margin-bottom: clamp(14px,1.7vw,24px);
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .set__head::after{
    content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
    background:var(--line-2); transform:scaleX(0); transform-origin:left;
    transition:transform 1s var(--ease) .12s;
  }
  .set__head.in-view::after{ transform:scaleX(1); }
  .set__name{
    font-family:var(--f-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.5rem,3.4vw,2.7rem); line-height:1; letter-spacing:0.01em;
  }
  .set__meta{
    font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--fog); text-align:right; padding-bottom:4px; white-space:nowrap;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-flow:dense;
    gap: clamp(12px,1.4vw,20px);
  }
  .grid.two{ grid-template-columns:repeat(2,1fr); }
  /* let a few frames span for a contact-sheet rhythm */
  .frame.tall{ grid-row:span 2; }
  .frame.wide{ grid-column:span 2; }

  .frame{
    position:relative;
    background:var(--bg-elev);
    border:1px solid var(--line);
    overflow:hidden;
    transition:transform .5s var(--ease), opacity .8s var(--ease);
  }
  .frame__media{
    position:relative;
    aspect-ratio:4/5;
    width:100%; height:100%;
    overflow:hidden;
  }
  .frame.wide .frame__media{ aspect-ratio: 16/10; }
  .frame.tall .frame__media{ aspect-ratio: 4/6.4; }

  .frame__media img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(8%) contrast(1.02);
    transition:transform .8s var(--ease), filter .6s ease;
  }

  /* hover-to-focus: grow the frame you're pointing at, ease its section-mates back */
  @media (hover: hover) and (pointer: fine){
    .frame:hover .frame__media img{ transform:scale(1.05); filter:grayscale(0%) contrast(1.05); }
    .frame:has(img):hover .frame__cap{ opacity:1; }
    .grid:hover .frame{ transform:scale(0.97); }
    .grid:hover .frame:hover{ transform:scale(1.04); z-index:3; }
  }

  /* placeholder state — designed so an empty grid still looks intentional */
  .frame__placeholder{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:var(--fog-dim);
    background:
      repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.015) 14px 15px);
  }
  .frame__ph-mark{ font-size:1.8rem; font-weight:300; line-height:1; color:var(--fog); }
  .frame__ph-text{ font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; }

  .frame__cap{
    position:absolute; left:0; bottom:0; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px;
    font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--fog);
    background:linear-gradient(0deg, rgba(0,0,0,0.72), transparent);
    transform:translateY(0);
  }
  .frame__no{ color:var(--ink); }
  .frame:has(img) .frame__cap{ opacity:0; transition:opacity .35s ease; }

  /* corner ticks on each frame — the contact-sheet feel */
  .frame::before, .frame::after{
    content:""; position:absolute; width:10px; height:10px; z-index:2; pointer-events:none;
    border-color:var(--line-2);
  }
  .frame::before{ top:8px; left:8px; border-left:1px solid; border-top:1px solid; }
  .frame::after{ bottom:8px; right:8px; border-right:1px solid; border-bottom:1px solid; }

  @media (max-width: 820px){
    .grid, .grid.two{ grid-template-columns:repeat(2,1fr); }
    .frame.wide{ grid-column:span 2; }
  }
  @media (max-width: 520px){
    .grid, .grid.two{ grid-template-columns:1fr; }
    .frame.wide, .frame.tall{ grid-column:auto; grid-row:auto; }
    .set__head{ flex-direction:column; align-items:flex-start; gap:5px; }
    .set__meta{ text-align:left; white-space:normal; }
  }

  /* ---------------------------------------------------------
     LIGHTBOX
     --------------------------------------------------------- */
  .lightbox{
    position:fixed; inset:0; z-index:80;
    background:rgba(4,4,4,0.94);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding: clamp(24px,6vw,80px);
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
  }
  .lightbox.open{ opacity:1; visibility:visible; }
  .lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; border:1px solid var(--line); }
  .lightbox__meta{
    position:absolute; bottom:clamp(14px,4vw,36px); left:0; width:100%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:0 68px; text-align:center; pointer-events:none;
    font-family:var(--f-mono); text-transform:uppercase; color:var(--fog);
  }
  .lightbox__cap{ font-size:0.64rem; letter-spacing:0.18em; }
  .lightbox__count{ font-size:0.58rem; letter-spacing:0.22em; color:var(--fog-dim); }
  .lightbox__close, .lightbox__nav{
    position:absolute; background:rgba(8,8,8,0.5); border:1px solid var(--line-2); color:var(--ink);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    transition:background .3s ease, color .3s ease;
  }
  .lightbox__close{ top:clamp(16px,4vw,36px); right:clamp(16px,4vw,36px); width:46px; height:46px; font-size:1.1rem; }
  .lightbox__nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.7rem; line-height:1; }
  .lightbox__nav.prev{ left:clamp(10px,2.5vw,28px); }
  .lightbox__nav.next{ right:clamp(10px,2.5vw,28px); }
  .lightbox__close:hover, .lightbox__nav:hover{ background:var(--ink); color:var(--bg); }
  @media (max-width: 520px){
    .lightbox__nav{ width:42px; height:42px; font-size:1.5rem; }
    .lightbox__meta{ padding:0 50px; }
  }

  /* ---------------------------------------------------------
     CONTACT / FOOTER
     --------------------------------------------------------- */
  .contact{ border-top:1px solid var(--line); }
  .contact__big{
    font-family:var(--f-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2.6rem,7vw,6rem); line-height:0.9; letter-spacing:0.01em;
    margin-bottom:8px;
  }
  .contact__big a{ display:inline-block; position:relative; }
  .contact__big a::after{
    content:""; position:absolute; left:0; bottom:0.08em; width:100%; height:2px;
    background:var(--ink); transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--ease);
  }
  .contact__big a:hover::after{ transform:scaleX(1); }
  .contact__row{
    margin-top: clamp(40px,6vw,70px);
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    border-top:1px solid var(--line); padding-top:26px;
  }
  .contact__row a, .contact__row span{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fog);
    transition:color .25s ease; padding:6px 0;
  }
  .contact__row a:hover{ color:var(--ink); }

  footer.foot{
    padding: 26px var(--pad) 34px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fog-dim);
  }

  /* ---------------------------------------------------------
     LOAD-IN SEQUENCE
     --------------------------------------------------------- */
  body.loaded .hero__name .line__inner{
    transform:translateY(0);
    transition:transform 1.1s var(--ease);
  }
  body.loaded .hero__name .line:nth-child(1) .line__inner{ transition-delay:.15s; }
  body.loaded .hero__name .line:nth-child(2) .line__inner{ transition-delay:.28s; }

  .hero__eyebrow span{ transform:translateY(110%); }
  body.loaded .hero__eyebrow span{ transform:translateY(0); transition:transform .9s var(--ease) .05s; }

  .hero__foot{ opacity:0; }
  body.loaded .hero__foot{ opacity:1; transition:opacity 1s ease .7s; }

  /* ---------------------------------------------------------
     REDUCED MOTION
     --------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .hero__name .line__inner, .hero__eyebrow span{ transform:none !important; }
    .hero__foot{ opacity:1 !important; }
    [data-reveal]{ opacity:1 !important; transform:none !important; }
    .eyebrow::before, .set__head::after{ transform:none !important; }
    .reticle{ display:none !important; }
    body::after{ display:none; }
  }