/* ============================================================
   JAGB Portfolio · site styles (home + visual work)
   Source of truth: Figma "Portfolio-HTML" · Spec · Type scale & spacing
   Breakpoint: mobile <= 600px
   ============================================================ */

:root{
  /* color */
  --ink:#10151A; --paper:#F9FAFB; --white:#FFFFFF;
  --g1:#EEF1F3; --g2:#DAE0E5; --g3:#B2BCC4; --g4:#5F6B75; --body:#3A444D; --dline:#2A323A;

  /* type scale (desktop) */
  --fs-display-xl:176px; --fs-display-l:120px; --fs-h2:64px; --fs-h3:40px; --fs-logo:22px;
  --fs-body-l:20px; --fs-body-m:16px; --fs-body-strong:18px; --fs-ui:14px; --fs-label:12px; --fs-caption:12px;
  --font-display:'Baumans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* spacing */
  --space-section:120px; --space-head:40px; --space-gap:16px; --space-card:32px; --space-card-xl:56px;
  --page-pad:24px; --content:1200px; --measure:640px;
  /* gutter = the one left/right line shared by nav content, hero content and every section */
  --gutter:max(64px, calc((100vw - var(--content)) / 2));

  /* radius */
  --radius:8px; --radius-hero:28px; --pill:999px;

  /* buttons */
  --btn-h:48px; --btn-fs:15px; --btn-px:22px;

  --nav-top:44px; --nav-top-stuck:16px; --nav-h:60px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:600px){
  :root{
    --fs-display-xl:80px; --fs-display-l:64px; --fs-h2:40px; --fs-h3:32px; --fs-logo:20px;
    --fs-body-l:16px; --fs-body-m:15px; --fs-body-strong:16px; --fs-label:11px; --fs-caption:10px;
    --space-section:72px; --space-head:24px; --space-gap:12px; --space-card:24px; --space-card-xl:28px;
    --page-pad:16px; --btn-h:40px; --btn-fs:14px; --btn-px:16px;
    --nav-top:28px; --nav-top-stuck:12px; --nav-h:52px;
  }
}
@media (min-width:601px) and (max-width:1100px){
  :root{ --fs-display-xl:clamp(96px,12.5vw,176px); --fs-display-l:clamp(72px,10vw,120px); --fs-h2:clamp(44px,5.4vw,64px); }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--fs-body-m); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; z-index:300; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--pill); text-decoration:none; font-size:14px; }
.skip:focus{ top:12px; }

/* ---------- type roles ---------- */
.t-display-xl{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-display-xl); line-height:.85; }
.t-display-l{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-display-l); line-height:.9; }
.t-h2{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1; }
.t-h3{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h3); line-height:1.05; }
.t-body-l{ font-size:var(--fs-body-l); line-height:1.5; }
.t-body-m{ font-size:var(--fs-body-m); line-height:1.5; }
.t-strong{ font-size:var(--fs-body-strong); font-weight:600; line-height:1.3; }
.t-ui{ font-size:var(--fs-ui); font-weight:500; line-height:1.2; }
.t-label{ font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; }
.t-caption{ font-size:var(--fs-caption); font-weight:500; line-height:1.2; }

/* ---------- layout ---------- */
.wrap{ width:100%; margin:0 auto; padding:0 var(--gutter); }
@media (max-width:600px){ .wrap{ padding:0 var(--page-pad); } }
.section{ padding-top:var(--space-section); scroll-margin-top:90px; }
.section-head{ margin-bottom:var(--space-head); }
.section-label{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.section-label i{ display:block; width:32px; height:1px; background:currentColor; }
@media (max-width:600px){ .section-label{ gap:10px; margin-bottom:12px; } .section-label i{ width:24px; } }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--btn-h); padding:0 var(--btn-px);
  border-radius:var(--pill); border:1px solid transparent; font-size:var(--btn-fs); font-weight:600; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn::after{ content:""; position:absolute; inset:-2px 0; } /* 44px touch area on mobile */
.btn .arr{ font-weight:400; }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.btn[aria-disabled="true"], .btn:disabled{ pointer-events:none; }
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--dline); }
.btn--primary:active{ background:#000; }
.btn--primary:disabled,.btn--primary[aria-disabled="true"]{ background:var(--g2); color:var(--g4); }
.btn--secondary{ background:#fff; color:var(--ink); border-color:var(--g2); }
.btn--secondary:hover{ background:var(--g1); border-color:var(--ink); }
.btn--secondary:active{ background:var(--g2); border-color:var(--ink); }
.btn--secondary:disabled,.btn--secondary[aria-disabled="true"]{ background:var(--paper); border-color:var(--g1); color:var(--g3); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--outline-light:active{ background:rgba(255,255,255,.2); }
.btn--block{ width:100%; }
.on-dark .btn:focus-visible{ box-shadow:0 0 0 2px var(--ink), 0 0 0 4px #fff; }

/* ---------- tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.tag{ display:inline-flex; align-items:center; height:27px; padding:0 12px; border:1px solid var(--g2); border-radius:var(--pill); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--g4); }
.on-dark .tag{ border-color:var(--g4); color:var(--g2); }

/* ---------- nav ---------- */
.nav{ position:fixed; z-index:100; left:calc(var(--gutter) - 20px); right:calc(var(--gutter) - 20px); top:var(--nav-top);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#fff; border-radius:var(--pill);
  box-shadow:0 4px 20px rgba(16,21,26,.08); transition:top .25s var(--ease), box-shadow .25s ease; }
.nav.is-stuck{ top:var(--nav-top-stuck); box-shadow:0 6px 24px rgba(16,21,26,.12); }
.nav__name{ font-family:var(--font-display); font-size:calc(var(--fs-logo) + 4px); letter-spacing:.02em; line-height:1; text-decoration:none; color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:32px; }
.nav__links{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.nav__links a{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:var(--pill); text-decoration:none; font-size:var(--fs-ui); font-weight:500; color:var(--body); transition:background-color .15s, color .15s; }
.nav__links a:hover{ background:var(--g1); color:var(--ink); }
.nav__links a[aria-current="page"]{ background:var(--g1); color:var(--ink); }
.lang{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; letter-spacing:.14em; }
.lang [data-lang-btn]{ cursor:pointer; padding:8px 2px; }
.lang .sep{ color:var(--g4); }
.nav__menu{ display:none; }
@media (max-width:860px){ .nav__links,.nav .lang{ display:none; } .nav__contact{ display:none; } .nav__menu{ display:inline-flex; } }
@media (max-width:600px){ .nav{ left:28px; right:28px; padding:0 6px 0 20px; } }

/* ---------- mobile menu ---------- */
.mnav{ position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; padding:28px 16px calc(32px + env(safe-area-inset-bottom));
  opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease; }
.mnav[hidden]{ display:none; }
.mnav.is-open{ opacity:1; transform:none; }
.mnav__top{ display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 6px 0 20px; background:#fff; border-radius:var(--pill); box-shadow:0 4px 20px rgba(16,21,26,.08); }
.mnav__links{ list-style:none; margin:40px 0 0; padding:0; }
.mnav__links a{ display:flex; align-items:baseline; gap:16px; padding:16px 4px; border-bottom:1px solid var(--g2); text-decoration:none; font-family:var(--font-display); font-size:40px; line-height:1.1; }
.mnav__links .idx{ font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--g4); }
.mnav__cta{ margin-top:32px; }
.mnav__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:16px 4px 0; border-top:1px solid var(--g2); gap:12px; }
.mnav__mail{ font-size:13px; color:var(--g4); text-decoration:none; overflow:hidden; text-overflow:ellipsis; }
@media (prefers-reduced-motion:reduce){ .mnav,.nav{ transition:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; margin:24px; height:clamp(640px, 59.7vw, 860px); border-radius:var(--radius-hero); overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.hero__img,.hero__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 40%; z-index:-2; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(16,21,26,0) 0%, rgba(16,21,26,0) 33%, rgba(16,21,26,.92) 100%); }
.hero__title{ position:absolute; left:calc(var(--gutter) - 24px); top:50%; transform:translateY(-58%); max-width:5em; color:#fff; }
.hero__bottom{ position:absolute; left:calc(var(--gutter) - 24px); right:calc(var(--gutter) - 24px); bottom:40px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.hero__intro .t-label{ color:#fff; opacity:.92; margin-bottom:10px; }
.hero__intro .t-body-l{ max-width:620px; text-wrap:balance; }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:600px){
  .hero{ margin:16px; height:min(720px, calc(100svh - 32px)); min-height:600px; }
  .hero__img img{ object-position:50% 30%; }
  /* mobile: title and intro stack from the bottom, so a longer subtitle pushes the title up instead of overlapping it */
  .hero{ display:flex; flex-direction:column; justify-content:flex-end; gap:20px; padding:0 0 24px 32px; }
  .hero__title{ position:static; transform:none; max-width:none; }
  .hero__bottom{ position:static; margin-right:32px; flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ---------- UX case studies (bento rows) ---------- */
.cases{ display:flex; flex-direction:column; gap:var(--space-gap); }
.case{ display:grid; grid-template-columns:400px 1fr; gap:var(--space-gap); min-height:480px; }
.case--flip{ grid-template-columns:1fr 400px; }
.case--flip .case__text{ order:2; }
.case__text{ display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:var(--space-card); border-radius:var(--radius); background:#fff; border:1px solid var(--g2); }
.case__text--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.case__meta{ color:var(--g4); margin-bottom:16px; }
.case__text--dark .case__meta{ color:var(--g3); }
.case__title{ margin-bottom:16px; }
.case__desc{ color:var(--g4); margin-bottom:16px; }
.case__text--dark .case__desc{ color:var(--g3); }
.case__img{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--g1); }
.case__img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
@media (hover:hover){ .case:hover .case__img img{ transform:scale(1.03); } }
@media (max-width:1100px) and (min-width:601px){ .case{ grid-template-columns:minmax(300px,1fr) 1.4fr; } .case--flip{ grid-template-columns:1.4fr minmax(300px,1fr); } }
@media (max-width:600px){
  .case,.case--flip{ grid-template-columns:1fr; min-height:0; }
  .case--flip .case__text{ order:0; }
  .case__img{ height:240px; }
}

/* ---------- tiles (shared: home bento + visual masonry) ---------- */
.tile{ position:relative; display:block; width:100%; padding:0; border:0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; text-align:left;
  background:var(--g1); background-image:linear-gradient(100deg, var(--g1) 30%, var(--g2) 50%, var(--g1) 70%); background-size:300% 100%; animation:shimmer 1.2s linear infinite; }
.tile.is-loaded,.tile--video{ animation:none; background-image:none; }
.tile img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s ease, transform .3s ease; }
.tile.is-loaded img{ opacity:1; }
.tile__cap{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; padding:7px 12px; border-radius:var(--pill); background:rgba(255,255,255,.92); color:var(--ink);
  font-size:var(--fs-caption); font-weight:500; line-height:1.2; transition:background-color .2s ease, color .2s ease; pointer-events:none; }
.tile__badge{ position:absolute; right:12px; top:12px; padding:6px 10px; border-radius:var(--pill); background:rgba(16,21,26,.75); color:#fff; font-size:11px; font-weight:500; pointer-events:none; }
@media (hover:hover){
  .tile:hover img{ transform:scale(1.03); }
  .tile:hover .tile__cap{ background:var(--ink); color:#fff; }
}
.tile:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.tile:focus-visible img{ transform:scale(1.03); }
.tile:focus-visible .tile__cap{ background:var(--ink); color:#fff; }
@media (max-width:600px){ .tile__cap{ left:8px; bottom:8px; padding:4px 8px; } .tile__badge{ right:8px; top:8px; padding:4px 8px; font-size:10px; } }
@keyframes shimmer{ from{ background-position:100% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .tile{ animation:none; } .tile img,.case__img img{ transition:opacity .2s ease; } .tile:hover img,.case:hover .case__img img,.tile:focus-visible img{ transform:none; } }
.tile--video{ cursor:default; background:var(--ink); }
.tile--video video{ width:100%; height:100%; object-fit:cover; background:var(--ink); }

/* home curated bento */
.vgrid{ display:flex; flex-direction:column; gap:var(--space-gap); }
.vrow{ display:flex; gap:var(--space-gap); }
.vrow > .tile{ flex:var(--w) 1 0; height:var(--h); }
.vgrid .tile[data-piece="at-flyer"] img{ object-position:top; }
.see-all{ display:flex; justify-content:center; padding-top:24px; }
@media (max-width:600px){
  .vgrid--d{ display:none; }
}
@media (min-width:601px){ .vgrid--m{ display:none; } }
@media (max-width:1100px) and (min-width:601px){ .vrow > .tile{ height:calc(var(--h) * .75); } }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:400px 1fr; gap:var(--space-gap); }
.about__photo{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:560px; background:var(--g1); }
.about__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about__col{ display:flex; flex-direction:column; gap:var(--space-gap); }
.box{ background:#fff; border:1px solid var(--g2); border-radius:var(--radius); padding:var(--space-card); }
.box--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.about__text{ flex:1; display:flex; flex-direction:column; gap:20px; color:var(--body); }
.about__text p{ max-width:var(--measure); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-gap); }
.stat{ display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:168px; }
.stat__n{ font-family:var(--font-display); font-size:var(--fs-h2); line-height:1; }
.stat__l{ color:var(--g4); }
.box--dark .stat__l{ color:var(--g3); }
@media (max-width:1100px) and (min-width:601px){ .about{ grid-template-columns:minmax(260px,1fr) 1.6fr; } }
@media (max-width:600px){
  .about{ grid-template-columns:1fr; }
  .about__photo{ min-height:0; height:380px; }
  .stats{ gap:8px; }
  .stat{ min-height:118px; padding:16px 14px; }
  .stat__l{ font-size:10px; letter-spacing:.1em; }
}

/* ---------- tools ---------- */
.tools{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap); }
.tools__group{ padding:var(--space-card); }
.tools__group > .t-label{ color:var(--g4); margin-bottom:12px; }
.box--dark.tools__group > .t-label{ color:var(--g3); }
.tools__list{ list-style:none; margin:0; padding:0; }
.tools__list li{ padding:16px 0; border-top:1px solid var(--g2); }
.box--dark .tools__list li{ border-color:var(--dline); }
.tools__list p{ color:var(--g4); font-size:15px; margin-top:4px; }
.box--dark .tools__list p{ color:var(--g3); }
.exploring{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:16px; border-top:1px solid var(--dline); }
.exploring .t-label{ color:var(--g3); margin-right:4px; }
@media (max-width:760px){ .tools{ grid-template-columns:1fr; } }

/* ---------- contact + footer ---------- */
.contact{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:var(--space-card-xl); display:flex; flex-direction:column; gap:40px; }
.contact .section-label{ color:var(--g3); margin:0; }
.contact__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.contact__mail{ font-size:22px; color:#fff; text-decoration:none; word-break:break-all; }
.contact__mail:hover{ text-decoration:underline; text-underline-offset:4px; }
.contact__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.footer{ display:flex; justify-content:space-between; padding:16px 4px 40px; color:var(--g4); }
@media (max-width:600px){
  .contact{ gap:28px; padding:32px 24px 28px; }
  .contact__row{ flex-direction:column; align-items:flex-start; }
  .contact__mail{ font-size:16px; }
  .footer{ padding-bottom:24px; }
}

/* ---------- visual work page ---------- */
.vpage-head{ padding-top:calc(var(--nav-top) + var(--nav-h) + 72px); padding-bottom:40px; }
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--g4); text-decoration:none; font-size:14px; font-weight:500; margin-bottom:20px; }
.back:hover{ color:var(--ink); }
.vpage-head .t-display-l{ margin:4px 0 20px; }
.vpage-head .intro{ color:var(--body); max-width:var(--measure); }
.chips{ position:sticky; top:calc(var(--nav-top-stuck) + var(--nav-h) + 16px); z-index:20; padding:12px 0; margin-bottom:12px; background:linear-gradient(var(--paper) 75%, rgba(249,250,251,0)); }
.chips__in{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ height:44px; padding:0 18px; border-radius:var(--pill); border:1px solid var(--g2); background:#fff; font-size:14px; font-weight:500; cursor:pointer; transition:background-color .15s, border-color .15s; }
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.brand{ padding:48px 0; border-top:1px solid var(--g2); scroll-margin-top:170px; }
.brand[hidden]{ display:none; }
.brand__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:24px; }
.brand__head .t-label{ color:var(--g4); margin-bottom:8px; }
.brand__line{ max-width:440px; color:var(--body); }
.masonry{ display:flex; gap:var(--space-gap); align-items:flex-start; }
.masonry__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--space-gap); }
.masonry .tile{ aspect-ratio:var(--ar); }
.vpage-end{ display:flex; justify-content:center; padding:24px 0; }
@media (max-width:600px){
  .vpage-head{ padding-top:calc(var(--nav-top) + var(--nav-h) + 40px); padding-bottom:24px; }
  .chip{ height:40px; padding:0 14px; font-size:13px; }
  .brand{ padding:32px 0; }
  .brand__head{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px; }
  .masonry{ gap:10px; } .masonry__col{ gap:10px; }
}

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:400; background:#0E1216; color:#fff; display:grid; grid-template-rows:auto 1fr auto; opacity:0; transition:opacity .2s ease; }
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 32px; }
.lb__kicker{ color:var(--g3); margin-bottom:4px; }
.lb__title{ font-size:18px; font-weight:600; }
.lb__controls{ display:flex; align-items:center; gap:8px; }
.lb__zoom{ display:flex; align-items:center; border:1px solid var(--g4); border-radius:var(--pill); }
.lb__zoom button{ height:44px; min-width:44px; padding:0 12px; background:none; border:0; color:#fff; font-size:15px; font-weight:500; cursor:pointer; }
.lb__zoom span{ font-size:14px; font-weight:500; min-width:46px; text-align:center; }
.lb__close{ height:44px; padding:0 18px; border:0; border-radius:var(--pill); background:#fff; color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.lb__stage{ position:relative; overflow:auto; display:flex; align-items:center; justify-content:center; padding:0 120px; overscroll-behavior:contain; }
.lb__stage.is-zoomed{ align-items:flex-start; justify-content:flex-start; cursor:grab; }
.lb__img{ max-width:100%; max-height:calc(100vh - 230px); width:auto; height:auto; object-fit:contain; border-radius:var(--radius); margin:auto; }
.lb__stage.is-zoomed .lb__img{ max-width:none; max-height:none; }
.lb__stage.is-tall{ align-items:flex-start; }
.lb__stage.is-tall:not(.is-zoomed) .lb__img{ max-height:none; width:min(900px,100%); margin:0 auto 24px; }
.lb__arrow{ position:fixed; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer; transition:background-color .15s; }
.lb__arrow:hover{ background:rgba(255,255,255,.22); }
.lb__arrow--prev{ left:32px; } .lb__arrow--next{ right:32px; }
.lb__bottom{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px 16px 28px; }
.lb__count{ font-size:12px; font-weight:500; letter-spacing:.14em; }
.lb__thumbs{ display:flex; gap:8px; overflow-x:auto; max-width:100%; padding:4px; }
.lb__thumbs button{ flex:0 0 auto; width:56px; height:56px; padding:0; border:2px solid transparent; border-radius:var(--radius); overflow:hidden; background:var(--dline); opacity:.45; cursor:pointer; }
.lb__thumbs button[aria-current="true"]{ opacity:1; border-color:#fff; }
.lb__thumbs img{ width:100%; height:100%; object-fit:cover; }
.lb__hint{ display:none; font-size:12px; color:var(--g3); }
.lb .on-focus:focus-visible, .lb button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:600px){
  .lb__top{ padding:16px; }
  .lb__zoom{ display:none; }
  .lb__close .lbl{ display:none; }
  .lb__close{ width:44px; padding:0; justify-content:center; }
  .lb__stage{ padding:0 16px; }
  .lb__img{ max-height:calc(100svh - 220px); }
  .lb__arrow{ display:none; }
  .lb__thumbs button{ width:44px; height:44px; }
  .lb__hint{ display:block; }
}
@media (prefers-reduced-motion:reduce){ .lb{ transition:none; } }

/* ============================================================
   Motion (home): intro, visual grid rotation, about stats, contact light
   Everything here is off for prefers-reduced-motion.
   ============================================================ */
/* ---- 1. intro (html.intro is set by intro.js before paint; site.js adds .intro-go) ---- */
html.intro .hero__img img{ opacity:0; scale:1.06; }
html.intro .nav,
html.intro .hero__title .w,
html.intro .hero__intro > *,
html.intro .hero__ctas .btn{ opacity:0; }
html.intro .hero__title{ opacity:0; }
html.intro.intro-go .hero__title{ opacity:1; }
html.intro.intro-go .hero__img img{ animation:in-img 1.6s cubic-bezier(.2,.7,.2,1) both; }
html.intro.intro-go .nav{ animation:in-nav .8s cubic-bezier(.2,.7,.2,1) .15s both; }
html.intro.intro-go .nav__name,
html.intro.intro-go .nav__links li,
html.intro.intro-go .nav .lang,
html.intro.intro-go .nav__contact,
html.intro.intro-go .nav__menu{ animation:in-fade .6s ease calc(.35s + var(--n, 0) * .08s) both; }
html.intro.intro-go .hero__title .w{ animation:in-word .9s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--i) * .13s) both; }
html.intro.intro-go .hero__intro > *{ animation:in-up .8s cubic-bezier(.2,.7,.2,1) calc(1s + var(--n, 0) * .1s) both; }
html.intro.intro-go .hero__ctas .btn{ animation:in-btn .7s cubic-bezier(.2,.9,.3,1.2) calc(1.25s + var(--n, 0) * .1s) both; }
.hero__title .w{ display:inline-block; }
@keyframes in-img{ from{ opacity:0; scale:1.06; } to{ opacity:1; scale:1; } }
@keyframes in-nav{ from{ opacity:0; translate:0 -14px; } to{ opacity:1; translate:0 0; } }
@keyframes in-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes in-word{ from{ opacity:0; filter:blur(12px); translate:0 .18em; } to{ opacity:1; filter:blur(0); translate:0 0; } }
@keyframes in-up{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
@keyframes in-btn{ from{ opacity:0; translate:0 12px; scale:.94; } to{ opacity:1; translate:0 0; scale:1; } }

/* ---- 2. visual grid: tiles crossfade to another piece of the same format ---- */
.tile img.tile__next{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease, transform .3s ease; }
.tile img.tile__next.is-in{ opacity:1; }
.tile__cap{ transition:background-color .2s ease, color .2s ease, opacity .3s ease; }
.tile.is-swapping .tile__cap,.tile.is-swapping .tile__badge{ opacity:0; }
.tile__badge{ transition:opacity .3s ease; }

/* ---- 3. about stats: they turn dark one by one, in a loop ---- */
.stats.is-anim .stat{ background:#fff; border-color:var(--g2); color:var(--ink); transition:background-color .6s ease, border-color .6s ease, color .6s ease; }
.stats.is-anim .stat__l{ color:var(--g4); transition:color .6s ease; }
.stats.is-anim .stat.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.stats.is-anim .stat.is-on .stat__l{ color:var(--g3); }

/* ---- 4. contact buttons: a soft light running around the border ---- */
@property --ray{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.contact__btns .btn{ position:relative; }
.contact__btns .btn::before{ content:""; position:absolute; inset:-3px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ray), transparent 0deg 230deg, rgba(255,255,255,.08) 260deg, rgba(255,255,255,.85) 330deg, rgba(255,255,255,.08) 350deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:ray 4.5s linear infinite; }
.contact__btns .btn + .btn::before{ animation-delay:-2.25s; }
@keyframes ray{ to{ --ray:360deg; } }

@media (prefers-reduced-motion:reduce){
  .contact__btns .btn::before{ display:none; }
  .tile img.tile__next{ transition:none; }
}