:root{
    --paper:#E8E6DE;
    --paper-2:#DEDBD0;
    --ink:#1B1B18;
    --ink-soft:#4a4944;
    --sienna:#8A4B2E;
    --sienna-deep:#5f3220;
    --slate:#3D4F5C;
    --rule: rgba(27,27,24,0.16);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Fraunces', serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 48px;}
  .mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;}
  .eyebrow{font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);}
  p{font-family:'Fraunces', serif; font-weight:400;}

  /* pill button, per referenced sites */
  .pill-btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Fraunces', serif; font-size:16px; color:var(--ink);
    border:1px solid var(--ink); border-radius:999px;
    padding:14px 26px; text-decoration:none;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .pill-btn:hover{background:var(--ink); color:var(--paper);}

  .speedup-btn{
    position:fixed; top:0; left:0; z-index:20;
    font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--paper); background:var(--ink);
    border-radius:999px; padding:12px 22px;
    pointer-events:none; opacity:0; user-select:none;
    -webkit-user-drag:none; user-drag:none;
    transform:translate(-82%, -82%) scale(0.9);
    transition:opacity 0.18s ease, transform 0.18s ease, background 0.12s ease, color 0.12s ease;
    box-shadow:0 10px 24px rgba(27,27,24,0.25);
  }
  .speedup-btn.is-visible{opacity:1; transform:translate(-82%, -82%) scale(1); pointer-events:auto; cursor:pointer;}
  .speedup-btn.is-pressed{background:var(--paper); color:var(--ink);}

  /* ---------- NAV ---------- */
  nav{position:sticky; top:0; z-index:50; background:#ffffff; border-bottom:1px solid var(--rule);}
  nav .edge{display:flex; align-items:center; justify-content:flex-end; height:64px;}
  .nav-links{display:flex; gap:32px;}
  .nav-links a{color:var(--ink); text-decoration:none; font-family:'JetBrains Mono', monospace; font-size:13px; opacity:0.75;}
  .nav-links a:hover{opacity:1;}

  /* shared edge margin: ~30% left/right on wide screens, tapering on small */
  .edge{padding-left:30vw; padding-right:30vw;}
  @media (max-width:1100px){ .edge{padding-left:12vw; padding-right:12vw;} }
  @media (max-width:640px){ .edge{padding-left:24px; padding-right:24px;} }

  /* ---------- HERO ---------- */
  .hero-sketch{
    position:absolute; z-index:0;
    left:calc(6% - 200px); top:50%; transform:translateY(-50%);
    height:135%; width:auto;
    opacity:0; pointer-events:none;
  }
  .hero-underlay{
    position:absolute; z-index:0;
    left:calc(6% - 200px); top:50%; transform:translateY(-50%);
    height:135%; width:auto;
    opacity:0.07; pointer-events:none;
    mask-image: linear-gradient(to right, black 60%, transparent 92%);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 92%);
  }
  .hero-sketch .sketch-line{
    fill:none; stroke:var(--sienna);
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .hero-sketch .edge-line{ stroke-width:1.3; }
  .hero-sketch .shade-line{ stroke-width:0.8; stroke-opacity:0.55; }
  .grid-lines{
    position:absolute; inset:0; z-index:1;
    background-image:
      repeating-linear-gradient(to right, rgba(138,75,46,0.35) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, rgba(138,75,46,0.35) 0 1px, transparent 1px 120px);
    opacity:0.5;
    /* anchored top-right: strong at the corner, fading out before reaching center */
    mask-image: radial-gradient(circle at 100% 0%, black 0%, black 22%, transparent 48%);
    -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, black 22%, transparent 48%);
  }
  .hero{
    position:relative; overflow:hidden; background:#ffffff;
    min-height:100vh; padding:60px 0;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-inner{
    position:fixed; top:50%; left:50%; z-index:2; text-align:center;
    display:flex; flex-direction:column; align-items:center;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .hero-eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:12.5px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
    text-align:center; margin-bottom:45px;
  }
  .hero-line-1{
    font-family:'JetBrains Mono', monospace; font-weight:500;
    font-size:clamp(29px, 6.16vw, 81px); line-height:0.95;
    letter-spacing:-0.005em; word-spacing:-0.2em; text-transform:uppercase; color:var(--ink);
    margin:0; position:relative; z-index:1;
  }
  .hero-line-2{
    font-family:'Fraunces', serif; font-weight:400; font-style:italic;
    font-size:clamp(48px, 11vw, 168px); line-height:0.88;
    letter-spacing:-0.01em; color:var(--ink);
    margin:-0.05em 0 0; position:relative; z-index:2;
    white-space:nowrap;
  }
  .scroll-cue{
    position:fixed; bottom:40px; left:50%; z-index:2;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-soft);
    transform:translateX(-50%);
    will-change:transform, opacity;
    pointer-events:none;
  }
  .scroll-cue .arrow{
    display:inline-block;
    animation:cue-bounce 1.6s ease-in-out infinite;
  }
  @keyframes cue-bounce{
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(5px); }
  }

  /* ---------- BIG WORD BREAK ---------- */
  .word-break{padding:40px 0 24px; border-top:1px solid var(--rule);}
  .word-break h2{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic;
    font-size:clamp(64px, 12vw, 168px); line-height:1.05; letter-spacing:-0.02em;
    margin:0 0 0 0.02em; color:var(--ink);
  }
  .word-break .tag{margin-top:8px; display:block;}

  /* ---------- QUICK HIT LISTS ---------- */
  .section{padding-bottom:100px; display:flow-root;}
  .quick-grid{
    display:grid; grid-template-columns: repeat(2, 1fr) 340px; gap:48px 40px; margin-top:56px;
  }
  .hit{position:relative; cursor:default;}
  .hit-thumb{ display:none; } /* shown only on the mobile breakpoint */
  .hit-text{
    position:relative; z-index:2;
  }
  .hit h3{font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin:0 0 8px;}
  .hit p{color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0; max-width:38ch;}
  .hit .tagline{font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--slate); margin-bottom:6px; display:block;}
  .hover-preview{
    position:fixed; top:0; left:0; z-index:5;
    width:200px; height:260px; border-radius:3px;
    pointer-events:none; opacity:0;
    transform:translate(-50%,-50%) scale(0.96);
    transition:opacity 0.22s ease, transform 0.22s ease;
    box-shadow:0 18px 40px rgba(27,27,24,0.25);
    overflow:hidden;
  }
  .hover-preview.is-visible{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .hover-preview .plate-fill{width:100%; height:100%; position:absolute; inset:0;}
  .hover-preview .icon-layer{
    width:100%; height:100%; position:absolute; inset:0;
    background-repeat:no-repeat; background-position:center; background-size:72px 72px;
    display:none;
  }
  .hover-preview .preview-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; display:none; pointer-events:none;
  }
  .hover-preview .cap{
    position:absolute; left:10px; bottom:10px; color:#efece3;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; opacity:0.85;
  }
  .feature-plate{
    grid-row: span 3; border-radius:6px; overflow:hidden;
    background:linear-gradient(150deg,#26302f,#1c211f); position:relative; min-height:340px;
  }
  .feature-plate .cap{
    position:absolute; left:16px; bottom:16px; color:#e8e6de;
    font-family:'JetBrains Mono', monospace; font-size:12px; opacity:0.85;
  }

  .clients-line{
    margin-top:48px; padding-top:28px; border-top:1px solid var(--rule);
    display:flex; flex-wrap:wrap; gap:10px 28px; align-items:baseline;
  }
  .clients-line span{font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--ink-soft);}
  .clients-line .label{color:var(--slate); margin-right:8px;}
  .clients-marquee{ display:none; } /* shown only on the mobile breakpoint */

  /* ---------- SHOWCASE MARQUEE (infinite horizontal loop, pxpush-style) ---------- */
  .showcase{
    margin-top:96px; padding:0 0 60px;
    overflow:hidden;
    /* full-bleed break-out: escapes the centered .wrap container regardless of
       where this section sits in the page, rather than being confined to it */
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
  }
  .showcase-divider{max-width:1180px; margin:0 auto 56px; padding:0 48px; position:relative; z-index:1;}
  .showcase-divider div{border-top:1px solid var(--rule);}
  @media (max-width:900px){ .showcase-divider{padding:0 24px;} }
  .showcase-scale{width:100%;}
  .showcase-loop{
    display:flex; align-items:center; gap:28px;
    width:max-content;
    will-change:transform;
  }
  .showcase-item{
    height:460px; flex:0 0 auto; margin:0; overflow:hidden; border-radius:20px;
    box-shadow:0 18px 40px rgba(27,27,24,0.15);
  }
  .showcase-item img{
    height:100%; width:auto; display:block; user-select:none;
  }
  @media (max-width:860px){
    .showcase-item{height:220px;}
  }


  /* ---------- IMPACT / STATS ---------- */
  .stat-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; margin-top:56px;}
  .stat-num{font-family:'Fraunces', serif; font-weight:500; font-size:56px; line-height:1; color:var(--ink);}
  .stat-label{font-family:'Fraunces', serif; font-weight:500; font-size:16px; margin-top:12px;}
  .stat-desc{color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin-top:8px; max-width:32ch;}
  .highlight-list{border-top:1px solid var(--rule);}
  .highlight-frame{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; margin-top:56px;}
  .highlight-blank{grid-column:1;}
  .highlight-list{grid-column:2 / 4;}
  @media (max-width:860px){
    .highlight-frame{grid-template-columns:1fr;}
    .highlight-blank{display:none;}
  }
  .highlight-row{
    display:block; padding:16px 0; border-bottom:1px solid var(--rule); font-size:16px;
  }
  .cta-row{margin-top:48px;}

  /* ---------- OPEN PHOTO SCATTER ---------- */
  .field{padding:70px 0 90px; display:flow-root;}
  .field-scatter{display:flex; flex-direction:column;}
  .scatter-item{
    display:block; margin:0; border-radius:8px; overflow:hidden;
    background:linear-gradient(155deg,#d3cdb9,#c3bda7);
    will-change:transform;
  }
  .scatter-item img{width:100%; height:auto; display:block;}
  .scatter-item.size-sm{width:260px;}
  .scatter-item.size-md{width:340px;}
  .scatter-item.size-lg{width:460px;}
  .scatter-item.align-left{align-self:flex-start;}
  .scatter-item.align-right{align-self:flex-end;}
  .scatter-item.align-center{align-self:center;}

  .field-note{
    max-width:28ch; font-family:'Fraunces', serif; font-style:italic; font-size:22px; line-height:1.55;
    color:var(--ink-soft); align-self:flex-start; text-align:left;
  }

  /* ---------- FIELD NOTES GRID LINES (draws/undraws with scroll, same motif as header) ---------- */
  .field-gridline{
    position:absolute; z-index:0; pointer-events:none;
    opacity:0.55;
  }
  .field-gridline-left{ left:-60px; }
  .field-gridline-right{ right:-60px; }
  .grid-seg{
    stroke:var(--sienna); stroke-width:1; fill:none;
    vector-effect:non-scaling-stroke;
  }
  @media (max-width:860px){
    .field-gridline{display:none;}
  }

  /* ---------- FOOTER ---------- */
  footer{padding:72px 0 56px; border-top:1px solid var(--rule); display:flow-root;}
  .footer-grid{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}
  footer h3{font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin:0 0 4px;}
  .footer-links{display:flex; gap:28px;}
  .footer-links a{color:var(--ink); font-family:'JetBrains Mono', monospace; font-size:13px; text-decoration:none; opacity:0.75;}
  .footer-links a:hover{opacity:1;}
  .wink{margin-top:28px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-soft); opacity:0.55;}

  @media (max-width:900px){
    .wrap{padding:0 24px;}
    .hero-eyebrow{margin-bottom:22px;}
    .hero-sketch{left:-20%;}
    .hero-underlay{left:-20%;}
    .hero-line-2{white-space:normal;}
    .quick-grid{grid-template-columns:1fr;}
    .feature-plate{grid-row:auto; min-height:220px;}
    .stat-grid{grid-template-columns:1fr;}
    .stroke-svg{display:none;}
    .field-scatter{gap:40px;}
    .scatter-item{width:100% !important; align-self:stretch !important;}
    .field-note{text-align:left;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  /* =====================================================================
     MOBILE BREAKPOINT (<=768px) ONLY -- do not adjust tablet/desktop above
     ===================================================================== */
  @media (max-width:768px){

    /* ---- 1 & 2: Hero -- doubled type, left-justified, bottom-left anchored ---- */
    .hero-inner{
      top:auto; left:24px; right:24px; bottom:100px;
      transform:none;
      align-items:stretch;
      text-align:left;
    }
    .hero-eyebrow{
      text-align:left;
      margin-bottom:20px;
    }
    .hero-line-1{
      font-size:clamp(58px, 12.32vw, 162px);
      text-align:left;
    }
    .hero-line-2{
      font-size:clamp(72px, 18vw, 336px);
      text-align:left;
      white-space:normal;
      overflow-wrap:break-word;
      -webkit-hyphens:auto;
      hyphens:auto;
    }
    /* keep the portrait line-art clear of the new bottom-left text block */
    .hero-sketch, .hero-underlay{
      top:35%; height:85%;
    }

    /* ---- 3: client list as a single-line, left-to-right running ticker ---- */
    .word-break .clients-static{ display:none; }
    .clients-marquee{
      display:block; overflow:hidden; margin-top:8px;
      /* full-bleed: break out of the .wrap side margins to reach the viewport edge */
      width:100vw; position:relative; left:50%; right:50%;
      margin-left:-50vw; margin-right:-50vw;
    }
    .clients-marquee-track{
      display:inline-flex; width:max-content;
      animation:clients-scroll 18s linear infinite;
    }
    .clients-marquee-track span{ white-space:nowrap; }
    @keyframes clients-scroll{
      from{ transform:translateX(-50%); }
      to{ transform:translateX(0%); }
    }

    /* ---- 4: work items -- always-on full-width thumbnail per entry ---- */
    /* !important needed: the quick-grid has an inline style="grid-template-columns:..."
       on this element that otherwise wins over any external stylesheet rule */
    .quick-grid{ grid-template-columns:1fr !important; }
    #hover-preview{ display:none !important; }
    .hit-thumb{
      display:block; position:relative; width:100%;
      aspect-ratio:2.397 / 1; overflow:hidden; border-radius:10px;
      margin-bottom:18px; background:#1c211f;
    }
    .hit-thumb img, .hit-thumb video{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .hit-thumb-placeholder .hit-thumb-icon{
      position:absolute; top:50%; left:50%; width:72px; height:72px;
      transform:translate(-50%,-50%); object-fit:contain; opacity:0.2;
    }
    .hit-thumb-placeholder .hit-thumb-contain{
      width:100%; height:100%; object-fit:contain; padding:24px;
    }
    .hit-thumb-cap{
      position:absolute; left:12px; bottom:10px; color:#efece3;
      font-family:'JetBrains Mono', monospace; font-size:11px; opacity:0.85;
    }

    /* ---- 5: work gallery marquee -- taller cards, tighter corners ---- */
    .showcase-item{ height:320px; border-radius:10px; }

    /* ---- 6: leadership highlight list -- full width, no desktop offset ---- */
    .highlight-list{ grid-column:1; }

    /* ---- 7: field notes -- static, uniform, single-column stacked gallery ---- */
    .field-scatter{ gap:30px; }
    .scatter-item{
      transform:none !important;
      margin-top:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      /* crop every photo to match field-p1's proportions (920x676) for a uniform card height */
      aspect-ratio:920 / 676;
    }
    .scatter-item img{
      width:100%; height:100%; object-fit:cover;
    }
    /* pin these two crops to the top instead of the default center */
    .scatter-item img[src*="moses"],
    .scatter-item img[src*="duomo"]{
      object-position:center top;
    }
  }