:root{
  --bg:#f4f3f1; --bg-rgb:244,243,241; --ink:#0d0d0d; --muted:#8a8a86; --line:rgba(0,0,0,0.16);
  --text-2:rgba(13,13,13,0.62);
  --font:"Jost","Jost Fallback","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-lg:clamp(16px,1.2vw,19px);
  --text-title:clamp(34px,4.6vw,66px); --text-hero:clamp(38px,5.2vw,76px);
}
/* Jost, self-hosted (SIL OFL 1.1), subset per script */
@font-face{ font-family:"Jost"; font-style:italic; font-weight:300; font-display:swap; src:url("public/fonts/jost-italic-300-cyrillic.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:"Jost"; font-style:italic; font-weight:300; font-display:swap; src:url("public/fonts/jost-italic-300-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Jost"; font-style:italic; font-weight:300; font-display:swap; src:url("public/fonts/jost-italic-300-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Jost"; font-style:italic; font-weight:400; font-display:swap; src:url("public/fonts/jost-italic-400-cyrillic.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:"Jost"; font-style:italic; font-weight:400; font-display:swap; src:url("public/fonts/jost-italic-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Jost"; font-style:italic; font-weight:400; font-display:swap; src:url("public/fonts/jost-italic-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap; src:url("public/fonts/jost-normal-300-600-cyrillic.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap; src:url("public/fonts/jost-normal-300-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap; src:url("public/fonts/jost-normal-300-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* metric-matched fallback so the swap from Arial to Jost barely moves the layout */
@font-face{ font-family:"Jost Fallback"; src:local("Arial"), local("Helvetica Neue"); size-adjust:94%; ascent-override:98%; descent-override:30%; line-gap-override:0%; }
::selection{ background:var(--ink); color:var(--bg); }
:focus-visible{ outline:1.5px solid var(--ink); outline-offset:4px; }
.lang-btn:focus-visible, .nav a:focus-visible, .corner:focus-visible{ outline-offset:6px; }
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  width:100%; background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  scrollbar-width:none; -ms-overflow-style:none;        /* hide scrollbar, keep scroll */
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ height:350vh; }                                   /* desktop scroll height drives rotation */
a{ color:inherit; text-decoration:none; }

.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:1.9em 2.4em; font-size:var(--text-sm); letter-spacing:0.03em; }
.header-left{ display:flex; align-items:center; gap:3em; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:15px; letter-spacing:0.01em; }
.brand-mark{ height:20px; width:auto; display:block; }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav a{ position:relative; opacity:0.62; transition:opacity .3s var(--ease); }
.nav a.is-active, .nav a:hover{ opacity:1; }
.nav a.nav-contact{ opacity:0.85; display:inline-flex; align-items:center; gap:0.3em; }
.nav a.nav-contact .link-icon{ width:12px; height:12px; stroke:currentColor; }
.nav a.is-active::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--ink); }
.header-right{ display:flex; align-items:center; gap:1.2em; }
.lang{ display:flex; align-items:center; gap:0.5em; font-weight:500; }
.lang-btn{ background:none; border:none; padding:0; font:inherit; color:inherit; letter-spacing:inherit; cursor:pointer; opacity:0.4; transition:opacity .3s var(--ease); }
.lang-btn:hover, .lang-btn.is-active{ opacity:1; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:18px;
  padding:0; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); transition:transform .35s var(--ease); }
body.menu-open .menu-toggle span:first-child{ transform:translateY(3.25px) rotate(45deg); }
body.menu-open .menu-toggle span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
.lang .sep{ opacity:0.4; }

.corner{ position:fixed; bottom:2.2em; z-index:50; display:inline-flex; align-items:center; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid var(--ink); transition:opacity .3s var(--ease); }
.corner .corner-icon{ width:15px; height:15px; margin-left:0.45em; stroke:currentColor; }
.filter-clear .corner-icon{ width:14px; height:14px; margin:0 0.4em 0 0; }
.corner:hover{ opacity:0.55; }
body.panel-open .site-header{ background:rgba(244,243,241,0.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
body.panel-open .corner, body.menu-open .corner{ opacity:0 !important; pointer-events:none; }
.corner i{ font-style:normal; margin-left:0.4em; }
.corner[hidden]{ display:none; }
.corner--left{ left:2.4em; }
.corner--right{ right:2.4em; }

.scene{ position:fixed; inset:0; overflow:hidden; perspective:1600px; perspective-origin:50% 50%; }
.scene::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 58% 50% at 50% 46%, rgba(255,255,255,0.92), rgba(var(--bg-rgb),0) 72%); }
.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px; }
.gallery{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }

/* CARD = stable hitbox. IMPORTANT: NO backface-visibility:hidden (it would hide half the ring -> "C"/spiral). */
.item{ position:absolute; top:0; left:0; width:78px; height:60px; transform-style:preserve-3d; cursor:pointer; }
.item-card{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  border:1px solid rgba(255,255,255,0.65); transition:box-shadow .4s var(--ease); }
.item-card img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.92) brightness(0.99); }
.item-card.is-active{ box-shadow:0 6px 16px -10px rgba(0,0,0,0.35); }

.center{ position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:min(620px,48vw); height:var(--hollow, 380px);
  text-align:center; pointer-events:none; z-index:5; }
.center-eyebrow{ font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:calc(1.6em * var(--center-scale, 1)); }
.center-title{ font-size:calc(var(--text-hero) * var(--center-scale, 1)); font-weight:400; line-height:1.0; letter-spacing:-0.03em; text-wrap:balance; }
.center-title em{ font-style:italic; font-weight:300; letter-spacing:-0.02em; }
.center-sub{ margin:calc(1.4em * var(--center-scale, 1)) auto 0; font-size:calc(var(--text-lg) * max(var(--center-scale, 1), 0.85)); line-height:1.5; color:var(--text-2); max-width:26em; text-wrap:balance; }
/* centre states are driven by script (studio → transition → project); never both visible */
.center-default,.center-project{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.center-project{ opacity:0; visibility:hidden; }
.preview-img{ height:clamp(120px, calc(var(--hollow, 380px) - 100px), 240px); aspect-ratio:16/10; width:auto; max-width:100%; flex-shrink:0; overflow:hidden; background:#e7e6e3; }
.preview-img img{ width:100%; height:100%; object-fit:cover; }
.preview-meta{ display:flex; align-items:baseline; justify-content:center; gap:1.1em; margin-top:0.95em; }
.preview-index{ font-size:var(--text-xs); letter-spacing:0.1em; color:var(--muted); font-variant-numeric:tabular-nums; }
.preview-cat{ font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.preview-title{ margin-top:0.3em; font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:-0.02em; line-height:1.15; min-height:2.3em; text-wrap:balance; }
.preview-arrow{ display:none; width:0.6em; height:0.6em; margin-left:0.25em; stroke:currentColor; vertical-align:0.05em; }
.center.has-link .preview-arrow{ display:inline-block; }

.labels{ position:absolute; inset:0; pointer-events:none; }
.label{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:14px; font-weight:500; font-family:var(--font); color:var(--ink);
  letter-spacing:0.01em; pointer-events:auto; cursor:pointer; opacity:0.85; background:none; border:0; padding:4px 2px; transition:opacity .2s var(--ease); }
.label:hover{ opacity:1; }
.label.is-wrapped{ white-space:normal; max-width:9.5em; line-height:1.35; text-align:center; }
.label sup{ white-space:nowrap; }
.label:focus-visible{ opacity:1; outline-offset:2px; }
.label .ul{ border-bottom:1px solid var(--ink); padding-bottom:2px; }
.label sup{ font-size:10px; color:var(--muted); margin-left:3px; font-variant-numeric:tabular-nums; }
body.has-filter .label{ opacity:0.3; }
body.has-filter .label.is-active{ opacity:1; }

/* PANELS (About, Services): open over the ring, header stays on top */
.panel{ position:fixed; inset:0; z-index:40; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(244,243,241,0.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s linear .5s; scrollbar-width:none; overscroll-behavior:contain; }
.panel::-webkit-scrollbar{ display:none; }
.panel.is-open{ opacity:1; visibility:visible; transition:opacity .5s var(--ease); }
.panel-inner{ position:relative; max-width:1240px; margin:0 auto; padding:9.5em 2.4em 6em; }
.panel-close{ position:absolute; top:5.6em; right:2.4em; display:inline-flex; align-items:center; gap:0.5em; min-height:44px; padding:0 0.2em;
  background:none; border:none; cursor:pointer; font-family:var(--font); font-size:var(--text-sm); font-weight:500; letter-spacing:0.03em; color:var(--ink);
  transition:opacity .2s var(--ease); }
.panel-close:hover{ opacity:0.6; }
.panel-close .close-icon{ width:18px; height:18px; stroke:currentColor; }
.panel-close:focus-visible{ outline-offset:6px; }
.panel-head{ display:grid; grid-template-columns:1.15fr 1fr; gap:3em 5em; align-items:end; }
.panel-eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.panel-title{ font-size:var(--text-title); font-weight:400; line-height:1.02; letter-spacing:-0.03em; text-wrap:balance; }
.panel-body{ font-size:var(--text-lg); line-height:1.55; max-width:34em; color:var(--text-2); }
.panel-body + .panel-body{ margin-top:1.1em; }
/* ABOUT */
.about-hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:2em 3.5em; align-items:start; margin-top:1.6em; }
.about-title{ font-size:clamp(36px,4.6vw,66px); line-height:1.1; hyphens:manual; -webkit-hyphens:manual; }
.about-hero-side{ max-width:28em; }
.about-lead{ font-size:clamp(17px,1.25vw,19px); font-weight:500; line-height:1.5; color:var(--ink); }
.about-hero-side .panel-body{ margin-top:1.1em; font-size:clamp(17px,1.2vw,18px); line-height:1.6; max-width:none; }
.about-hero-side .svc-actions{ margin-top:2em; }
.btn-link .link-icon{ width:16px; height:16px; stroke:currentColor; margin-left:0.35em; }
.about-process, .about-motto{ margin:5.5em 0 0; padding-top:2.4em; border-top:1px solid var(--line); }
.proc-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2.6em 3em; margin-top:2.2em; }
.proc-list li{ border-top:1px solid var(--line); padding-top:1.3em; }
.proc-num{ font-size:var(--text-xs); letter-spacing:0.14em; color:var(--text-2); font-variant-numeric:tabular-nums; }
.proc-title{ margin-top:1.1em; font-size:clamp(21px,1.7vw,25px); font-weight:400; letter-spacing:-0.015em; line-height:1.15; }
.proc-desc{ margin-top:0.6em; font-size:var(--text-base); line-height:1.6; color:var(--text-2); max-width:26em; }
.about-team{ margin:5.5em 0 0; padding-top:2.4em; border-top:1px solid var(--line); }
.team-list{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:3.2em 2.2em; margin-top:2.6em; }
.team-list li{ display:flex; flex-direction:column; }
.team-avatar{ width:100%; max-width:176px; aspect-ratio:1 / 1; height:auto; display:block; object-fit:contain; object-position:center bottom;
  border-bottom:1px solid var(--line); }                       /* the bust stands on the hairline */
.team-nick{ margin-top:0.95em; font-size:var(--text-lg); font-weight:500; letter-spacing:-0.01em; }
.team-role{ margin-top:0.25em; font-size:var(--text-base); color:var(--ink); line-height:1.4; }
.team-skills{ margin-top:0.4em; font-size:var(--text-sm); color:var(--text-2); line-height:1.5; }
.panel.is-open .team-list li{ animation:about-up .6s var(--ease) both; animation-delay:calc(min(var(--i,0), 9) * 40ms); }
.motto-lead{ font-size:var(--text-sm); color:var(--text-2); }
.motto-quote{ margin-top:1em; font-size:clamp(28px,2.5vw,36px); font-weight:400; font-style:italic; line-height:1.25; letter-spacing:-0.01em; max-width:15em; text-wrap:balance; }
.about-stats{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:2em; margin-top:5.5em; padding-top:2.2em; border-top:1px solid var(--line); }
.about-stats li{ display:flex; flex-direction:column; }
.stat-num{ font-size:clamp(40px,4.4vw,60px); font-weight:400; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-label{ margin-top:0.6em; font-size:15px; line-height:1.4; color:var(--text-2); }
.panel.is-open li:nth-child(2){ animation-delay:.06s; } .panel.is-open li:nth-child(3){ animation-delay:.12s; } .panel.is-open li:nth-child(4){ animation-delay:.18s; }
.panel.is-open li:nth-child(5){ animation-delay:.24s; } .panel.is-open li:nth-child(6){ animation-delay:.30s; }
/* SERVICES */
@keyframes about-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.5em; font:inherit; font-size:var(--text-base); font-weight:500;
  letter-spacing:0.01em; line-height:1; border:1px solid var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.btn--primary{ background:var(--ink); color:var(--bg); }
.btn--primary:hover{ background:#2a2a2a; border-color:#2a2a2a; }
.btn:active{ transform:translateY(1px); }
.btn-link{ display:inline-flex; align-items:center; min-height:48px; font-size:var(--text-base); font-weight:500; letter-spacing:0.01em; color:var(--ink);
  border-bottom:1px solid var(--ink); line-height:1.2; padding-bottom:1px; transition:opacity .18s var(--ease); }
.btn-link:hover{ opacity:0.6; }

/* SERVICES */
.panel.is-open .about-stats li{ animation:about-up .7s var(--ease) both; }
.svc-label{ font-size:var(--text-xs); letter-spacing:0.18em; text-transform:uppercase; color:var(--text-2); }
.svc-hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:2em 3.5em; align-items:end; margin-top:1.6em; }
.svc-hero .panel-title{ font-size:clamp(36px,4.6vw,68px); }
.svc-hero-side{ display:flex; flex-direction:column; gap:1.8em; }
.svc-hero-side .panel-body{ max-width:32em; }
.svc-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1em 2em; }
.svc-grid{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:3.5em 3em; margin-top:5.5em; }
.svc-item{ border-top:1px solid var(--line); padding-top:1.6em; display:flex; flex-direction:column; }
.svc-top{ display:flex; align-items:center; justify-content:space-between; }
.svc-icon{ width:26px; height:26px; color:var(--ink); stroke:currentColor; }
.svc-num{ font-size:var(--text-xs); letter-spacing:0.14em; color:var(--text-2); font-variant-numeric:tabular-nums; }
.svc-title{ margin-top:1.4em; font-size:clamp(22px,1.9vw,27px); font-weight:400; letter-spacing:-0.015em; line-height:1.15; text-wrap:balance; }
.svc-desc{ margin-top:0.7em; font-size:var(--text-lg); line-height:1.6; color:var(--text-2); max-width:30em; }
.svc-scope{ margin-top:auto; padding-top:1.4em; font-size:var(--text-sm); letter-spacing:0.01em; color:var(--text-2); }
.svc-h3{ font-size:clamp(28px,3vw,44px); font-weight:400; letter-spacing:-0.025em; line-height:1.08; text-wrap:balance; max-width:18em; }
.svc-vis{ margin-top:6em; padding-top:2.6em; border-top:1px solid var(--line); }
.vis-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2.6em 3.5em; margin-top:2.4em; }
.vis-list li{ border-top:1px solid var(--line); padding-top:1.3em; }
.vis-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1em; }
.vis-title{ font-size:clamp(19px,1.5vw,22px); font-weight:500; letter-spacing:-0.01em; line-height:1.2; }
.vis-tag{ flex:0 0 auto; font-size:var(--text-xs); letter-spacing:0.12em; color:var(--text-2); font-variant-numeric:tabular-nums; }
.vis-desc{ margin-top:0.6em; font-size:var(--text-base); line-height:1.6; color:var(--text-2); max-width:34em; }
.svc-contact{ margin-top:6em; padding-top:2.6em; border-top:1px solid var(--line); display:grid; grid-template-columns:1.1fr 1fr; gap:1.4em 3.5em; align-items:start; }
.svc-contact .panel-body{ grid-column:2; max-width:30em; }
.svc-contact .btn{ grid-column:2; justify-self:start; }
.panel.is-open .svc-grid li, .panel.is-open .vis-list li{ animation:about-up .6s var(--ease) both; }

/* CONTACT FORM */
.contact-channels{ list-style:none; margin-top:1.6em; display:flex; flex-direction:column; gap:0.55em; font-size:var(--text-lg); }
.contact-channels li{ display:flex; align-items:baseline; gap:1em; }
.ch-label{ min-width:5.5em; font-size:var(--text-sm); color:var(--text-2); }
.contact-channels a{ border-bottom:1px solid var(--ink); padding-bottom:1px; font-variant-numeric:tabular-nums; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:2em 3em; margin-top:4em; padding-top:2.6em; border-top:1px solid var(--line); max-width:52em; }
.field{ display:flex; flex-direction:column; gap:0.6em; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:var(--text-sm); color:var(--text-2); letter-spacing:0.02em; }
.field input, .field textarea{ font:inherit; font-size:16px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,0.28); padding:0.55em 0;
  border-radius:0; transition:border-color .18s var(--ease); min-height:44px; }
.field textarea{ resize:vertical; min-height:7em; line-height:1.55; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-bottom-color:#b3261e; }
.form-actions{ grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:1em 1.6em; }
.form-note{ font-size:var(--text-sm); color:var(--text-2); }
.form-note.is-error{ color:#b3261e; }

/* GRID VIEW */
.grid-head{ display:flex; align-items:baseline; justify-content:space-between; gap:2em; flex-wrap:wrap; }
.grid-count{ font-size:var(--text-sm); color:var(--muted); font-variant-numeric:tabular-nums; }
.chips{ display:flex; flex-wrap:wrap; gap:0.7em 1.7em; margin-top:2.6em; font-size:var(--text-sm); font-weight:500; letter-spacing:0.02em; }
.chip{ background:none; border:none; padding:0 0 4px; font:inherit; color:var(--ink); cursor:pointer; opacity:0.45;
  border-bottom:1px solid transparent; transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.chip:hover, .chip.is-active{ opacity:1; }
.chip.is-active{ border-bottom-color:var(--ink); }
.chip sup{ font-size:10px; color:var(--muted); margin-left:3px; font-variant-numeric:tabular-nums; }
.tiles{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:3em 2.2em; margin-top:3.2em; }
.tiles li[hidden]{ display:none; }
.tile a, .tile > div{ display:block; color:inherit; }
.tile figure{ margin:0; aspect-ratio:16/10; overflow:hidden; background:#e7e6e3; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001);
  transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:saturate(0.94); }
.tile a:hover img{ transform:scale(1.04); filter:saturate(1); }
.tile-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1em; margin-top:0.85em; }
.tile-title{ font-size:var(--text-base); font-weight:400; letter-spacing:-0.01em; }
.tile-cat{ font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.panel.is-open .tiles li{ animation:about-up .7s var(--ease) both; animation-delay:calc(min(var(--i,0), 11) * 45ms); }

.mobile-menu{ display:none; }
.mobile-preview{ display:none; }
.mobile-ring-hitbox{ display:none; }

@media (max-width:768px){
  /* mobile spec: warm off-white, charcoal ink, dark-grey secondary; 22px gutter */
  :root{ --bg:#F5F4EF; --bg-rgb:245,244,239; --ink:#171717; --text-2:#5A5A56; --muted:#75756F; --line:rgba(23,23,23,0.14); --gutter:22px; }
  .item-card img{ filter:none; }                      /* let each project's own colours show */
  .mobile-ring-hitbox{ display:block; position:fixed; left:0; right:0; bottom:0; top:50%;
    z-index:20; touch-action:none; pointer-events:auto; }
  html, body{ height:100%; overscroll-behavior:none; }      /* nothing to scroll on the home: no rubber-band, no toolbar bounce */
  body{ height:auto; min-height:100%; }
  .scene{ height:100svh; overflow:hidden; touch-action:pinch-zoom; }   /* vertical swipes never reach the browser's scroll handling */
  .center, .labels{ display:none; }
  .custom-cursor{ display:none !important; }
  .site-header{ padding:0.8em var(--gutter); align-items:center; }
  .brand-mark{ height:28px; }                      /* mark only on mobile: the wordmark would just repeat it */
  .brand-word{ display:none; }
  .nav{ display:none; }
  .site-header .lang{ display:none; }              /* languages live in the menu on mobile */
  .header-right{ gap:0; }
  .menu-toggle{ display:flex; }
  /* view / filter controls sit on the preview's label row, in the content column, as quiet 12px text */
  .corner{ bottom:auto; top:calc(6.2rem + 1px); font-size:12px; font-weight:500; letter-spacing:0.02em; color:var(--text-2); border-bottom:0; padding-bottom:0; line-height:1.3; }
  .corner .corner-icon{ width:13px; height:13px; margin-left:0.35em; }
  .filter-clear .corner-icon{ width:12px; height:12px; margin:0 0.35em 0 0; }
  .corner--left{ left:var(--gutter); color:var(--ink); }
  .corner--right{ display:none; }                     /* no grid view on mobile */
  body.has-filter .mp-label{ visibility:hidden; }      /* the active filter takes the label's place */
  .mobile-preview{ display:block; position:fixed; top:6.2em; left:0; right:0; z-index:6; padding:0 var(--gutter); pointer-events:none; }
  .mp-label{ font-size:15px; letter-spacing:0.01em; color:var(--text-2); margin-bottom:12px; line-height:1.3; }
  .mp-title{ font-size:clamp(32px,8.6vw,38px); line-height:1.05; font-weight:400; letter-spacing:-0.025em; margin-bottom:14px; text-wrap:balance; }
  .mp-img{ width:100%; aspect-ratio:16/10; overflow:hidden; background:#e7e6e3; }
  .mp-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mp-view{ display:inline-flex; align-items:center; margin-top:14px; font-size:15px; font-weight:500;
    border-bottom:1px solid var(--ink); padding-bottom:2px; pointer-events:auto; }
  .mp-view .link-icon{ width:15px; height:15px; margin-left:0.35em; stroke:currentColor; }
  .panel-inner{ padding:7.6em var(--gutter) 4em; }
  .panel-close{ top:5.2em; right:calc(var(--gutter) - 0.2em); }
  .panel-head{ grid-template-columns:1fr; gap:1.8em; align-items:start; }
  .panel-title{ font-size:clamp(30px,8.4vw,40px); }
  .panel-body{ font-size:16px; }
  .svc-hero-grid{ grid-template-columns:1fr; gap:1.4em; align-items:start; }
  .svc-hero .panel-title{ font-size:clamp(36px,9.6vw,44px); }
  .svc-grid{ grid-template-columns:1fr; gap:2.4em; margin-top:3.5em; }
  .svc-title{ font-size:clamp(22px,6vw,24px); }
  .svc-vis, .svc-contact{ margin-top:3.5em; padding-top:2em; }
  .vis-list{ grid-template-columns:1fr; gap:1.8em; margin-top:1.8em; }
  .svc-contact{ grid-template-columns:1fr; gap:1.2em; }
  .svc-contact .panel-body, .svc-contact .btn{ grid-column:1; }
  .btn{ width:100%; max-width:24em; }
  .contact-form{ grid-template-columns:1fr; gap:1.6em; margin-top:2.6em; padding-top:2em; }
  .about-hero-grid{ grid-template-columns:1fr; gap:1.4em; }
  .about-title{ font-size:clamp(36px,9.6vw,44px); }
  .about-hero-side .panel-body{ font-size:16px; }
  .about-process, .about-team, .about-motto{ margin-top:3em; padding-top:2em; }
  .team-list{ grid-template-columns:1fr 1fr; gap:2.4em 1.2em; margin-top:1.8em; }
  .team-avatar{ max-width:none; }
  .team-nick{ font-size:17px; }
  .team-role{ font-size:14px; }
  .team-skills{ font-size:13px; }
  .proc-list{ grid-template-columns:1fr; gap:1.8em; margin-top:1.6em; }
  .motto-quote{ font-size:clamp(24px,6.6vw,28px); }
  .chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding:0 var(--gutter); gap:0 1.4em; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; padding-bottom:6px; }
  .tiles{ grid-template-columns:1fr 1fr; gap:2em 1em; margin-top:2.4em; }
  .tile-meta{ flex-direction:column; gap:0.25em; }
  .loading-count{ font-size:clamp(64px,22vw,96px); }
  .svc-desc{ max-width:none; }
  .about-stats{ grid-template-columns:1fr 1fr; gap:1.8em 1.2em; margin-top:3em; padding-top:1.8em; }
  .stat-num{ font-size:clamp(36px,10vw,44px); }
  .stat-label{ font-size:14px; }
  .mobile-menu{ display:flex; position:fixed; inset:0; z-index:45; background:var(--bg); flex-direction:column; justify-content:center;
    padding:0 var(--gutter); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
  body.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
  .mobile-menu a{ font-size:clamp(30px,9vw,40px); font-weight:500; letter-spacing:-0.02em; padding:0.45em 0; border-bottom:1px solid var(--line); opacity:0.5; transition:opacity .3s var(--ease); }
  .mobile-menu a.is-active{ opacity:1; }
  .mm-lang{ display:flex; align-items:center; gap:0.6em; margin-top:2.4em; font-size:15px; font-weight:500; letter-spacing:0.08em; }
  .mm-lang .lang-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 0.2em; opacity:0.4; border-bottom:1px solid transparent; }
  .mm-lang .lang-btn.is-active{ opacity:1; border-bottom-color:var(--ink); }
  body.menu-open .mobile-preview, body.panel-open .mobile-preview{ opacity:0 !important; pointer-events:none; }
}

.custom-cursor{ display:none; }
@media (pointer:fine) and (hover:hover){
  body{ cursor:none; }                                  /* dot replaces the OS cursor */
  .custom-cursor{ display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:10px; height:10px;
    border-radius:999px; background:var(--ink); pointer-events:none; z-index:99999; will-change:transform;
    transition:opacity .25s var(--ease), width .22s var(--ease), height .22s var(--ease); }
  .custom-cursor.is-hidden{ opacity:0; }
  .custom-cursor.is-card{ width:52px; height:52px; }
  .cursor-icon{ width:18px; height:18px; stroke:var(--bg); opacity:0; transition:opacity .15s var(--ease); }
  .custom-cursor.is-card .cursor-icon{ opacity:1; }
}

body:not(.page-ready) .scene{ opacity:0; }              /* hide ring until fully built+painted */

.loading-screen{ position:fixed; inset:0; z-index:999999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:default; }
.loading-screen.is-hidden{ pointer-events:none; }
.loading-inner{ text-align:center; opacity:0; animation:load-in .8s var(--ease) forwards; }
.loading-mark{ height:34px; width:auto; display:block; margin:0 auto; }
.loading-count{ margin-top:0.45em; font-size:clamp(64px,9vw,120px); font-weight:300; letter-spacing:-0.045em; line-height:1; font-variant-numeric:tabular-nums; }
.loading-pct{ font-size:0.3em; vertical-align:super; margin-left:0.12em; color:var(--muted); letter-spacing:0; }
.loading-text{ margin-top:1.2em; font-size:var(--text-xs); letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); animation:load-pulse 1.8s ease-in-out infinite; }
.loading-bar{ width:140px; height:1px; margin:1.6em auto 0; background:rgba(0,0,0,0.12); overflow:hidden; }
.loading-bar span{ display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--ease); }
@keyframes load-in{ to{ opacity:1; } }
@keyframes load-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@media (max-width:768px){ .loading-screen{ height:100svh; } }
@media (max-width:480px){ .tiles{ grid-template-columns:1fr; gap:2.2em; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .loading-text{ animation:none; }
}
@media (max-width:1024px) and (min-width:769px){
  .team-list{ grid-template-columns:1fr 1fr; gap:2.8em 2.4em; }
  .team-avatar{ max-width:160px; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:3em 2.6em; }
  .svc-hero-grid{ gap:2em 2.6em; }
}
@media (min-width:600px) and (max-width:768px){
  .svc-grid{ grid-template-columns:1fr 1fr; gap:2.6em 2.2em; }
  .vis-list{ grid-template-columns:1fr 1fr; gap:2em 2.2em; }
  .btn{ width:auto; }
}