:root{
    --bg:#131110;
    --bg-alt:#1a1611;
    --surface:#201a13;
    --ink:#f2ece0;
    --ink-dim:#a99d87;
    --accent:#bd7a3f;
    --accent-soft:rgba(189,122,63,.16);
    --line:rgba(242,236,224,.13);
    --line-strong:rgba(242,236,224,.24);
    --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
    --space-5:48px; --space-6:64px; --space-7:96px; --space-8:140px;
    --radius:2px;
    --ease:cubic-bezier(.22,.7,.2,1);
    --sat:env(safe-area-inset-top, 0px);
    --sab:env(safe-area-inset-bottom, 0px);
    --sal:env(safe-area-inset-left, 0px);
    --sar:env(safe-area-inset-right, 0px);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3{font-family:'Fraunces',serif; font-weight:400; margin:0; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{
    max-width:1240px; margin:0 auto;
    padding-left:max(var(--space-3), calc(var(--sal) + var(--space-2)));
    padding-right:max(var(--space-3), calc(var(--sar) + var(--space-2)));
  }
  @media(min-width:768px){ .wrap{padding-left:var(--space-5); padding-right:var(--space-5);} }

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); display:inline-block;}

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:1px;
  }

  /* ---------- Film grain ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:999;
    opacity:.035; mix-blend-mode:overlay;
    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>");
  }
  @media (max-width:600px), (hover:none) and (pointer:coarse){
    .grain{display:none;}
  }

  /* ---------- Header ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:calc(var(--space-3) + var(--sat)) 0 var(--space-3);
    transition:background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    border-bottom:1px solid transparent;
  }
  .site-header.is-scrolled{
    background:rgba(19,17,16,.86);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
    padding:calc(var(--space-2) + var(--sat)) 0 var(--space-2);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);}
  .logo{
    font-family:'Fraunces',serif; font-size:22px; letter-spacing:.03em;
    text-decoration:none; display:flex; align-items:baseline; gap:8px;
  }
  .logo .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;}
  nav.primary-nav{display:none; gap:var(--space-4);}
  nav.primary-nav a{
    text-decoration:none; font-size:14px; letter-spacing:.03em; color:var(--ink-dim);
    padding:10px 2px; position:relative; transition:color .25s var(--ease);
  }
  nav.primary-nav a:hover, nav.primary-nav a:focus-visible{color:var(--ink);}
  nav.primary-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
    background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
  }
  nav.primary-nav a:hover::after, nav.primary-nav a:focus-visible::after{transform:scaleX(1);}
  .header-social{display:none; gap:var(--space-2); align-items:center;}
  .header-social a{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; transition:border-color .25s var(--ease), color .25s var(--ease);}
  .header-social a:hover{border-color:var(--accent); color:var(--accent);}
  .header-social svg{width:15px; height:15px;}

  .menu-toggle{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line); border-radius:50%; cursor:pointer;
  }
  .menu-toggle svg{width:18px; height:18px;}
  @media(min-width:900px){
    .menu-toggle{display:none;}
    nav.primary-nav{display:flex;}
    .header-social{display:flex;}
  }

  /* mobile nav panel */
  .mobile-nav{
    position:fixed; inset:0; z-index:120; background:var(--bg);
    display:flex; flex-direction:column; justify-content:center; padding:var(--space-5);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .mobile-nav.is-open{opacity:1; visibility:visible; transform:translateY(0);}
  .mobile-nav a{font-family:'Fraunces',serif; font-size:32px; text-decoration:none; padding:var(--space-2) 0; border-bottom:1px solid var(--line); color:var(--ink);}
  .mobile-nav{padding-top:calc(var(--space-5) + var(--sat)); padding-bottom:calc(var(--space-5) + var(--sab));}
  .mobile-nav-close{position:absolute; top:calc(var(--space-3) + var(--sat)); right:calc(var(--space-3) + var(--sar)); width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .mobile-nav-close svg{width:16px; height:16px;}
  .mobile-nav-social{display:flex; gap:var(--space-2); margin-top:var(--space-4);}
  .mobile-nav-social a{width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; color:var(--ink);
  }
  .hero-slides{position:absolute; inset:0;}
  .hero-slide{
    position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease);
    background-size:cover; background-position:center;
  }
  .hero-slide.is-active{opacity:1;}
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(19,17,16,.55) 0%, rgba(19,17,16,.35) 35%, rgba(19,17,16,.92) 100%);
  }
  .hero-content{
    position:relative; z-index:2;
    padding-bottom:calc(var(--space-6) + var(--sab));
    padding-top:clamp(110px, 34vh, 220px);
  }
  @media(min-width:768px){ .hero-content{padding-bottom:var(--space-7);} }
  .hero-eyebrow{color:var(--accent); margin-bottom:var(--space-3);}
  .hero h1{
    font-size:clamp(38px, 8vw, 92px);
    line-height:1.02;
    font-weight:400;
    max-width:16ch;
  }
  .hero h1 em{font-style:italic; color:var(--accent);}
  .hero-sub{
    max-width:46ch; color:var(--ink-dim); margin-top:var(--space-3); font-size:17px;
  }
  .hero-bottom-row{
    display:flex; flex-wrap:wrap-reverse; align-items:flex-end; justify-content:space-between; gap:var(--space-2) var(--space-3);
    margin-top:var(--space-5); padding-top:var(--space-3); border-top:1px solid var(--line);
  }
  @media(min-width:768px){ .hero-bottom-row{margin-top:var(--space-6); flex-wrap:nowrap;} }
  .hero-frame-counter{font-size:13px; color:var(--ink-dim); letter-spacing:.08em;}
  .hero-frame-counter b{color:var(--ink);}
  .scroll-cue{
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-dim);
    font-size:13px; letter-spacing:.05em; min-height:44px;
  }
  .scroll-cue .arrow{
    width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%;
    display:flex; align-items:center; justify-content:center; animation:bob 2.4s ease-in-out infinite;
    flex-shrink:0;
  }
  .scroll-cue svg{width:14px; height:14px;}
  @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

  /* ---------- Sections generic ---------- */
  section{padding:var(--space-6) 0;}
  .section-tight{padding:var(--space-5) 0;}
  @media(min-width:768px){
    section{padding:var(--space-7) 0;}
    .section-tight{padding:var(--space-6) 0;}
  }
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* ---------- About ---------- */
  .about-grid{display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center;}
  @media(min-width:860px){ .about-grid{grid-template-columns:0.85fr 1.15fr; gap:var(--space-7);} }
  .about-photo{position:relative;}
  .about-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);}
  .about-photo-tag{
    position:absolute; left:var(--space-2); bottom:var(--space-2);
    background:rgba(19,17,16,.78); backdrop-filter:blur(6px);
    border:1px solid var(--line-strong); padding:6px 12px; font-size:11px; letter-spacing:.08em;
  }
  .about-text h2{font-size:clamp(28px,4vw,44px); margin-bottom:var(--space-3);}
  .about-text p{color:var(--ink-dim); font-size:17px; margin:0 0 var(--space-2);}
  .about-text p:last-of-type{margin-bottom:var(--space-4);}
  .about-text p strong{color:var(--ink); font-weight:500;}

  .btn{
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
    padding:15px 26px; border:1px solid var(--ink); color:var(--ink); background:transparent;
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    cursor:pointer; min-height:44px;
  }
  .btn:hover, .btn:focus-visible{background:var(--ink); color:var(--bg);}
  .btn.-accent{border-color:var(--accent); color:var(--accent);}
  .btn.-accent:hover, .btn.-accent:focus-visible{background:var(--accent); color:var(--bg);}
  .btn svg{width:14px; height:14px;}

  /* ---------- Divider ---------- */
  .sprocket-divider{
    display:flex; align-items:center; justify-content:center; gap:10px; padding:var(--space-4) 0;
  }
  .sprocket-divider span{width:5px; height:5px; background:var(--line-strong); border-radius:1px;}
  .sprocket-divider .mid{width:24px; height:24px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 6px;}
  .sprocket-divider .mid svg{width:11px; height:11px; color:var(--accent);}

  /* ---------- Approach / quote ---------- */
  .approach{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .approach-grid{display:grid; grid-template-columns:1fr; gap:var(--space-6);}
  @media(min-width:860px){ .approach-grid{grid-template-columns:1.3fr 0.7fr;} }
  .approach h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:var(--space-3); max-width:16ch;}
  .approach p{color:var(--ink-dim); font-size:17px; margin:0 0 var(--space-2);}
  .approach-list{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-2);}
  .approach-list li{
    display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-dim);
    padding-top:var(--space-2); border-top:1px solid var(--line);
  }
  .approach-list li b{color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:12px; padding-top:2px;}

  .contact-card{
    border:1px solid var(--line-strong); padding:var(--space-4); background:var(--surface);
  }
  .contact-card .eyebrow{margin-bottom:var(--space-2);}
  .contact-card h3{font-size:24px; margin-bottom:var(--space-3);}
  .contact-card .row{
    display:flex; align-items:center; gap:12px; padding:var(--space-2) 0; border-top:1px solid var(--line);
    text-decoration:none; font-size:15px; color:var(--ink); min-height:44px;
  }
  .contact-card .row:first-of-type{border-top:none;}
  .contact-card svg{width:16px; height:16px; color:var(--accent); flex-shrink:0;}
  .contact-card .social-row{display:flex; gap:10px; margin-top:var(--space-3);}
  .contact-card .social-row a{
    width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center;
    justify-content:center; transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .contact-card .social-row a:hover{border-color:var(--accent); color:var(--accent);}
  .contact-card .social-row svg{width:16px; height:16px;}

  /* ---------- Big quote ---------- */
  .big-quote{text-align:center; position:relative;}
  .big-quote .label{margin:0 auto var(--space-4); justify-content:center;}
  .big-quote blockquote{margin:0; max-width:18ch; margin-left:auto; margin-right:auto;}
  .big-quote h2{font-size:clamp(30px,5.2vw,58px); font-style:italic; line-height:1.15;}

  /* ---------- Portfolio ---------- */
  .portfolio-head{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3);
    margin-bottom:var(--space-5);
  }
  .portfolio-head h2{font-size:clamp(28px,4.4vw,48px); max-width:12ch;}
  .portfolio-count{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-dim);}
  .gallery{
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2);
  }
  @media(min-width:700px){ .gallery{grid-template-columns:repeat(4,1fr); gap:var(--space-3);} }
  .frame{
    position:relative; overflow:hidden; cursor:pointer; background:var(--surface);
    aspect-ratio:3/4; border:1px solid var(--line);
  }
  .frame:nth-child(4n+1){aspect-ratio:3/4;}
  .frame:nth-child(4n+2){aspect-ratio:4/5;}
  @media(min-width:700px){
    .frame:nth-child(6n+3){grid-row:span 2; aspect-ratio:3/5.4;}
  }
  .frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s var(--ease), filter .6s var(--ease);
    filter:grayscale(.15) contrast(1.02);
  }
  .frame:hover img, .frame:focus-visible img{transform:scale(1.045); filter:grayscale(0) contrast(1.05);}
  .frame-tag{
    position:absolute; left:10px; bottom:10px; padding:4px 9px;
    background:rgba(19,17,16,.72); backdrop-filter:blur(4px);
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--ink-dim);
    opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .frame:hover .frame-tag, .frame:focus-visible .frame-tag{opacity:1; transform:translateY(0);}
  @media (hover:none) and (pointer:coarse){
    .frame-tag{opacity:1; transform:translateY(0);}
  }
  .frame button.frame-hit{position:absolute; inset:0; width:100%; height:100%; background:none; border:none; padding:0; cursor:pointer;}

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; z-index:200; background:rgba(11,10,9,.94);
    display:flex; align-items:center; justify-content:center; padding:var(--space-4);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
    touch-action:pan-y;
  }
  .lightbox.is-open{opacity:1; visibility:visible;}
  .lightbox img{max-height:86vh; max-width:100%; width:auto; margin:0 auto; border:1px solid var(--line-strong);}
  .lightbox-close{
    position:absolute; top:calc(var(--space-3) + var(--sat)); right:calc(var(--space-3) + var(--sar)); width:44px; height:44px;
    border:1px solid var(--line-strong); border-radius:50%; background:none; color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .lightbox-close svg{width:16px; height:16px;}
  .lightbox-tag{position:absolute; left:calc(var(--space-3) + var(--sal)); bottom:calc(var(--space-3) + var(--sab)); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim);}
  .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%; background:rgba(19,17,16,.5); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .lightbox-nav svg{width:16px; height:16px;}
  .lightbox-prev{left:calc(var(--space-2) + var(--sal));}
  .lightbox-next{right:calc(var(--space-2) + var(--sar));}
  @media(max-width:600px){
    .lightbox-nav{width:40px; height:40px;}
    .lightbox img{max-height:70vh;}
  }

  /* ---------- Final CTA / contact section ---------- */
  .contact-final{background:var(--bg-alt); border-top:1px solid var(--line);}
  .contact-final-inner{
    display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:end;
  }
  @media(min-width:860px){ .contact-final-inner{grid-template-columns:1.2fr .8fr;} }
  .contact-final h2{font-size:clamp(30px,5vw,56px); max-width:14ch;}
  .contact-final p{color:var(--ink-dim); font-size:17px; max-width:46ch; margin-top:var(--space-3);}
  .contact-methods{display:grid; gap:0;}
  .contact-methods a{
    display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:var(--ink);
    padding:var(--space-3) 0; border-top:1px solid var(--line); font-size:18px; min-height:44px;
    transition:color .25s var(--ease), padding-left .25s var(--ease);
  }
  .contact-methods a:first-child{border-top:1px solid var(--line);}
  .contact-methods a:hover, .contact-methods a:focus-visible{color:var(--accent); padding-left:8px;}
  .contact-methods svg{width:16px; height:16px; color:var(--accent); flex-shrink:0;}
  .contact-methods .left{display:flex; align-items:center; gap:14px;}

  /* ---------- Footer ---------- */
  footer{padding:var(--space-4) 0; border-top:1px solid var(--line);}
  .footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2);}
  .footer-inner .mono{font-size:12px; color:var(--ink-dim); letter-spacing:.05em;}

  /* ---------- Floating contact button ---------- */
  .fab{
    position:fixed;
    right:calc(var(--space-3) + var(--sar));
    bottom:calc(var(--space-3) + var(--sab));
    z-index:90;
    width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--bg);
    border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .25s var(--ease);
  }
  .fab:hover{transform:scale(1.06);}
  .fab svg{width:22px; height:22px;}
  @media(max-width:480px){
    .fab{width:50px; height:50px; right:calc(var(--space-2) + var(--sar)); bottom:calc(var(--space-2) + var(--sab));}
    .fab svg{width:19px; height:19px;}
  }