:root{
      --bg:#fbfaf7; --paper:#fffefa; --ink:#151515; --muted:#6f6a62; --soft:#e8e1d6; --line:rgba(20,20,20,.10); --gold:#9b8150; --max:1200px;
      --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
      --serif:Georgia, "Times New Roman", serif;
    }

    /* Dark theme variables. When the [data-theme="dark"] attribute is set on the body element
       these variables are used instead of the default light values. */
    [data-theme="dark"]{
      --bg:#121212;
      --paper:#1e1e1e;
      --ink:#f5f5f5;
      --muted:#a8a8a8;
      --soft:#2a2a2a;
      --line:rgba(255,255,255,.10);
    }
    /* In dark mode, bold text outside the showreel side panel stays white for readability. */
    [data-theme="dark"] strong{color:#f5f5f5!important;font-weight:600!important}
    [data-theme="dark"] .caption strong,[data-theme="dark"] .meta strong{color:#f5f5f5!important}
    /* Keep the showreel right-hand text panel identical to the light homepage in dark mode. */
    [data-theme="dark"] .stats-list{
      --ink:#151515;
      --muted:#6f6a62;
      --line:rgba(20,20,20,.10);
      background:rgba(251,250,247,.92)!important;
      color:#6f6a62!important;
      border-color:rgba(20,20,20,.10)!important;
    }
    [data-theme="dark"] .stats-list strong{color:#151515!important;font-weight:600!important}

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--bg)}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
    a{color:inherit;text-decoration:none} a:hover{color:var(--gold)}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 96px}
    .topbar{position:sticky;top:0;z-index:30;background:rgba(251,250,247,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
    nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:420;white-space:nowrap}
    .navlinks{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
    .navlinks a{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:360}
    .navlinks .pill{border:1px solid var(--line);border-radius:999px;padding:9px 13px;color:var(--ink)}
    .hero{padding:28px 0 16px}
    .video{position:relative;width:100%;aspect-ratio:16/9;background:transparent;overflow:hidden}
    /* Further enlarge the hero showreel video so it fills a bit more vertical space.
       The aspect ratio is reduced (smaller denominator) and minimum height
       increased so that the video sits closer to the content below. */
    .hero .video{aspect-ratio:16/6.5;min-height:55vh;max-height:72vh;max-width:1180px;margin:0 auto;background:transparent}
    iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;box-shadow:none;outline:0}
    .caption,.meta{display:flex;justify-content:space-between;gap:20px;margin-top:10px;color:var(--muted);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.55}
    .caption strong,.meta strong{color:var(--ink);font-weight:430}
    .intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:74px;align-items:end;margin-top:42px}
    .eyebrow{margin:0 0 17px;color:var(--gold);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:430;line-height:1.5}
    h1,h2,h3,p{margin:0}
    h1{max-width:1080px;font-size:clamp(38px,5.5vw,80px);line-height:.95;letter-spacing:-.06em;font-weight:280}
    h2{font-size:clamp(26px,3.5vw,52px);line-height:.96;letter-spacing:-.05em;font-weight:285}
    h3{margin-top:18px;color:var(--muted);font-family:var(--serif);font-size:clamp(15px,1.2vw,20px);line-height:1.45;font-weight:400;letter-spacing:-.01em}
    p{color:var(--muted);font-size:15px;line-height:1.76;letter-spacing:.005em}
    .lead{color:var(--ink);font-size:17px;line-height:1.7}
    .proof{display:flex;flex-wrap:wrap;gap:9px 19px;margin-top:26px;padding-top:12px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);line-height:1.6}
    .proof span:first-child{color:var(--gold)}
    .section{padding:22px 0;border-top:1px solid var(--line)}
    .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.62fr);gap:70px;align-items:end;margin-bottom:44px}
    .section-head p{max-width:560px}
    .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
    .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 16px}
    figure{margin:0}.project{min-width:0}.project .video{background:#f4f1eb}
    .meta{display:grid;grid-template-columns:1fr auto;align-items:start}.meta span:last-child{text-align:right}
    .quote{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:70px;align-items:start}
    .bio p+p{margin-top:17px}.bio .lead{font-size:16px}
    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);margin-top:34px}
    .stats span{min-height:88px;background:rgba(255,255,255,.58);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-size:10px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
    .links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
    .links a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
    .contact{padding:58px;background:linear-gradient(135deg,rgba(155,129,80,.12),rgba(255,255,255,.55));border:1px solid rgba(155,129,80,.14);border-radius:12px}
    .contact h2{max-width:900px}.contact h3{max-width:760px}.contact-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
    .button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:999px;padding:13px 20px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
    .button.primary{background:var(--ink);color:white}.button:hover{border-color:var(--gold);color:var(--gold)}.button.primary:hover{background:var(--gold);border-color:var(--gold);color:#fff}
    footer{padding:0 0 28px}.foot{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
    .legal-nav{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}
    .legal-pages{padding:0 0 56px}
    .legal-page{display:none;margin-top:28px;padding:52px 0 0;border-top:1px solid var(--line)}
    .legal-page:target{display:block}
    .legal-inner{max-width:820px;margin:0 auto;color:var(--muted)}
    .legal-inner h2{font-size:clamp(28px,3.8vw,54px);margin-bottom:28px;text-align:center}
    .legal-inner h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:28px 0 10px;line-height:1.45}
    .legal-inner p{font-size:12px;line-height:1.7;text-align:justify;margin:0 0 10px}
    .legal-inner .legal-actions{display:flex;justify-content:center;gap:18px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

    @media(max-width:1000px){.intro,.section-head,.quote{grid-template-columns:1fr;gap:30px}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:720px){.wrap{padding:0 20px}nav{height:auto;padding:19px 0;display:block}.navlinks{justify-content:flex-start;gap:14px;margin-top:14px}.hero{padding-top:10px}.hero-grid{grid-template-columns:1fr!important}.stats-list{max-width:none!important}.hero .video{aspect-ratio:16/9;min-height:auto;max-height:none}.grid2,.grid3,.stats{grid-template-columns:1fr}.section{padding:68px 0}.caption,.meta{display:block}.meta span:last-child{display:block;text-align:left;margin-top:3px}.contact{padding:34px 22px}h1{letter-spacing:-.055em}.legal-inner p{text-align:left}}
    /* Image studies — no-crop editorial photo layer */
    .bm-photo-layer-nocrop {
      /* gap between images and overall height scaling variables */
      --gap: clamp(6px, .75vw, 12px);
      --h: clamp(360px, 41vw, 760px);
      --left-w: calc(var(--h) * .661);
      --center-w: calc(var(--h) * .91);
      --right-w: calc(var(--h) * .667);
      width: min(100%, calc(var(--left-w) + var(--center-w) + var(--right-w) + (var(--gap) * 2)));
      margin: 0 auto;
    }
    .bm-photo-layer-nocrop__grid {
      display: grid;
      grid-template-columns: var(--left-w) var(--center-w) var(--right-w);
      gap: var(--gap);
      align-items: stretch;
      justify-content: center;
    }
    .bm-photo-layer-nocrop__cell {
      background: transparent;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      /* start with opacity 0 and custom transform defined via --init-transform */
      opacity: 0;
      transform: var(--init-transform, translate(0, 40%) scale(0.9));
      transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .bm-photo-layer-nocrop__cell.in-view {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
    .bm-photo-layer-nocrop__cell img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
    }
    .bm-photo-layer-nocrop__left,
    .bm-photo-layer-nocrop__right {
      height: var(--h);
    }
    .bm-photo-layer-nocrop__center {
      height: var(--h);
      display: grid;
      grid-template-rows: 0.46fr 0.54fr;
      gap: var(--gap);
    }
    .bm-photo-layer-nocrop__center-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
    }
    @media (max-width: 860px) {
      .bm-photo-layer-nocrop {
        width: 100%;
        --h: auto;
      }
      .bm-photo-layer-nocrop__grid {
        grid-template-columns: 1fr;
      }
      .bm-photo-layer-nocrop__left,
      .bm-photo-layer-nocrop__right,
      .bm-photo-layer-nocrop__center {
        height: auto;
      }
      .bm-photo-layer-nocrop__cell img {
        height: auto;
        width: 100%;
      }
      .bm-photo-layer-nocrop__center {
        grid-template-rows: auto;
      }
      .bm-photo-layer-nocrop__center-bottom {
        grid-template-columns: 1fr 1fr;
      }
    }


    /* --- Mobile luxury video poster system ---------------------------------
       Desktop keeps Vimeo players directly visible.
       Mobile shows clean thumbnail cards first, with a tiny label in the corner;
       the Vimeo player is loaded only after the visitor taps the image. */
    .mobile-video-poster{
      display:none;
    }
    .project-featured{
      grid-column:1 / -1;
    }
    .project-featured .video{
      aspect-ratio:16 / 7.2;
      min-height:clamp(360px,48vw,620px);
    }
    @media (max-width:720px){
      .hero-inner > div[style*="grid-template-columns"]{
        grid-template-columns:1fr!important;
        align-items:start!important;
        gap:18px!important;
      }
      .hero-inner h2{
        max-width:96%;
      }
      .project-featured .video{
        aspect-ratio:16 / 9;
        min-height:auto;
      }
      .project.has-mobile-poster > .video{
        display:none!important;
      }
      .project.has-mobile-poster.video-loaded > .video{
        display:block!important;
      }
      .project.has-mobile-poster.video-loaded > .mobile-video-poster{
        display:none!important;
      }
      .mobile-video-poster{
        display:block;
        position:relative;
        width:100%;
        aspect-ratio:16 / 9;
        padding:0;
        border:0;
        border-radius:0;
        background:linear-gradient(135deg,rgba(155,129,80,.10),rgba(20,20,20,.08));
        overflow:hidden;
        cursor:pointer;
        text-align:left;
      }
      .mobile-video-poster img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        opacity:0;
        transition:opacity .45s ease;
      }
      .mobile-video-poster.has-image img{
        opacity:1;
      }
      .mobile-video-poster span{
        display:none!important;
      }
      .mobile-video-poster:active img{
        opacity:.72;
      }
    }


    /* Mobile clean thumbnail overrides — no visible play label */
    @media (max-width:720px){
      .mobile-video-poster span,
      .mobile-video-poster::before,
      .mobile-video-poster::after{
        display:none!important;
        content:none!important;
      }
      .mobile-video-poster{
        background:transparent!important;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
      }
      .mobile-video-poster img{
        border-radius:0;
      }
      .grid2,
      .grid3,
      .selected-projects-grid{
        grid-template-columns:1fr!important;
      }
      .grid4{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:34px 22px!important;
      }
    }