:root{
    --ink: #56534b;
    --ink-soft: #9b988f;
    --hair: rgba(60,58,52,0.16);
    --ui: "Onest", system-ui, sans-serif;
    --stable-vh: 100vh;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; }
  body{
    background:#f2f2f2;
    font-family:var(--ui);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  /* size to a JS-locked stable height (--stable-vh): on Samsung the address bar
     collapsing/expanding changes 100vh during scroll, which made the cover-fit
     background jump in width. --stable-vh never shrinks on mobile, so it doesn't. */
  #gl{ position:fixed; left:0; top:0; width:100%; height:var(--stable-vh, 100vh); display:block; cursor:crosshair; }
  #grain{
    position:fixed; inset:0; pointer-events:none; opacity:1; mix-blend-mode:multiply;
    transition:opacity .4s ease;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  }

  .chrome{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  .chrome a, .chrome button{ pointer-events:auto; }

  /* persistent header / footer */
  .mark{ position:absolute; left:48px; top:44px; display:flex; align-items:center; gap:14px; cursor:pointer; pointer-events:auto; }
  .mark .glyph{ width:30px; height:30px; border:1px solid var(--ink); display:grid; place-items:center; border-radius:2px; }
  .mark .glyph span{ font-family:var(--ui); font-weight:600; font-size:15px; line-height:1; transform:translateY(0); }
  .mark .wordmark{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; font-weight:500; }

  .nav{ position:absolute; right:48px; top:46px; z-index:22; font-size:12px; letter-spacing:.16em; text-transform:uppercase; display:flex; gap:26px; }
  .nav button{ background:none; border:none; color:var(--ink); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; opacity:.85; }
  .nav button:hover{ opacity:1; }
  .nav button.active{ opacity:1; border-bottom:1px solid var(--ink); padding-bottom:2px; }

  .footer{ position:absolute; left:48px; bottom:40px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
  .footer .dot{ width:5px; height:5px; border-radius:50%; background:var(--ink); }

  .scroller{ position:absolute; right:48px; bottom:40px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:12px; }
  .scroller .ring{ width:30px; height:30px; border:1px solid var(--ink-soft); border-radius:50%; position:relative; }
  .scroller .ring::after{ content:""; position:absolute; left:50%; top:8px; width:1px; height:8px; background:var(--ink-soft); transform:translateX(-50%); animation:drop 2s ease-in-out infinite; }
  @keyframes drop{ 0%{ opacity:0; transform:translate(-50%,-4px);} 40%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,8px);} }

  /* page panels */
  /* content/UI layer tracks the VISIBLE viewport (inset:0) so the bottom controls
     stay on-screen and content scrolls fully - only the #gl BACKGROUND uses the
     stable (large) height to avoid the scroll-jump. */
  .page{ position:fixed; inset:0; will-change:opacity, transform; transition:opacity .45s ease, transform .45s ease; }
  /* inactive pages are invisible but still full-screen fixed; they must NOT
     intercept wheel/pointer events or they swallow scroll over the active page */
  .page{ pointer-events:none; }
  .page.active-page{ pointer-events:auto; }
  .home .tagline{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:min(900px,86vw); }
  .home h1{ font-family:var(--ui); font-weight:300; font-size:clamp(30px,4.2vw,60px); line-height:1.08; letter-spacing:-0.01em; color:#8a877f; text-wrap:balance; }
  .home .sub{ margin-top:22px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }

  .about{ display:flex; align-items:center; }
  .about .col{ width:min(860px, 86vw); margin-left:clamp(48px, 12vw, 220px); }
  .about .eyebrow, .contacts .eyebrow{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:24px; }
  .about h2, .contacts h2{ font-family:var(--ui); font-weight:400; font-size:clamp(26px,3.1vw,44px); line-height:1.18; letter-spacing:-0.01em; color:#6f6c64; margin-bottom:26px; text-wrap:balance; }
  .about p{ font-size:15px; line-height:1.75; color:#6c6962; max-width:66ch; }
  .about p + p{ margin-top:15px; }
  /* highlight — Variant 4: phrase set on a thin stone plate (soft neumorphic chip) */
  .about p .hl{ color:#39362f; font-weight:600; padding:2px 11px; border-radius:20px;
    background:rgba(255,255,255,.72);
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.95), inset -1px -1px 2px rgba(0,0,0,.16), 0 1px 2px rgba(40,36,28,0.10);
    -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .about p a{ color:#3b3933; text-decoration:none; border-bottom:1px solid rgba(60,58,52,0.34); transition:border-color .2s ease, color .2s ease; }
  .about p a:hover{ color:#2a6fdb; border-color:#2a6fdb; }
  .about .meta, .contacts .meta{ display:flex; gap:46px; margin-top:42px; }  .about .meta .k, .contacts .meta .k{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
  .about .meta .v, .contacts .meta .v{ font-family:var(--ui); font-weight:500; font-size:17px; color:#3b3933; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }

  /* portfolio cases row */
  .cases{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px 20px; margin-top:34px; }
  .case{ min-width:0; display:flex; flex-direction:column; gap:4px; cursor:pointer;
    text-decoration:none; padding-top:16px; border-top:1px solid var(--hair);
    transition:border-color .3s ease, transform .3s ease; }
  .case:hover{ border-color:rgba(60,58,52,0.45); transform:translateY(-3px); }
  /* readability chip: when the relief is revealed behind a hovered card, a soft
     paper backing fades in so the text stays legible over the busy relief */
  .case::after{ content:''; position:absolute; inset:-4px -12px -18px -12px; border-radius:12px; z-index:0;
    background:rgba(244,243,241,0); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
    box-shadow:0 16px 40px -20px rgba(28,24,18,0); pointer-events:none;
    transition:background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease; }
  .case:hover::after{ background:rgba(244,243,241,0.95); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    box-shadow:0 16px 40px -20px rgba(28,24,18,0.45); }
  .case > span{ position:relative; z-index:1; }
  .case .cid{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); }
  .case .cname{ font-size:18px; color:#3b3933; margin-top:3px; }
  .case .cniche{ font-size:12.5px; color:#8a877f; }
  .case .cmetric{ font-family:var(--ui); font-weight:600; font-size:15px; color:#56534b; margin-top:7px; }

  /* Google Certified Partner badge */
  .gpartner{ display:inline-flex; align-items:center; gap:11px; margin-top:26px; pointer-events:auto;
    padding:9px 16px 9px 11px; background:rgba(255,255,255,0.62); border:1px solid rgba(60,58,52,0.16);
    border-radius:999px; text-decoration:none; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    transition:background .25s ease, box-shadow .25s ease; }
  .gpartner:hover{ background:rgba(255,255,255,0.92); box-shadow:0 6px 24px rgba(40,40,40,0.08); }
  .gpartner .g{ width:24px; height:24px; border-radius:50%; background:#fff; display:grid; place-items:center;
    box-shadow:0 1px 4px rgba(0,0,0,0.12); font-family:var(--ui); font-weight:700; font-size:15px; line-height:1; }
  .gpartner .g b{ background:conic-gradient(from -45deg,#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .gpartner .gtxt{ font-size:12px; letter-spacing:.04em; color:#3b3933; font-weight:500; }
  .gpartner .garr{ font-size:12px; color:var(--ink-soft); }
  .contacts .gpartner{ margin-top:30px; }

  /* preloader */
  #preloader{ position:fixed; inset:0; z-index:200; background:transparent;
    transition:opacity .6s ease; }
  #preloader.hidden{ opacity:0; pointer-events:none; }
  #preCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; }
  #preGl{ position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block; }
  .pre-cover{ position:absolute; inset:0; z-index:0; background:#f2f2f2; }
  .pre-cover.gone{ display:none; }
  .pre-stage{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none; }
  .pre-col{ display:flex; flex-direction:column; align-items:center; }
  .pre-logo{ display:flex; align-items:center; gap:13px; opacity:0; transform:translateY(7px);
    transition:opacity .9s ease, transform .9s ease; }
  .pre-logo.in{ opacity:1; transform:none; }
  .pre-logo.fade{ opacity:0; transition:opacity .5s ease; }
  .pre-mark{ width:42px; height:42px; border:1px solid var(--ink); border-radius:3px; display:grid; place-items:center; }
  .pre-mark span{ font-family:var(--ui); font-weight:600; font-size:21px; color:var(--ink); }
  .pre-logo-word{ font-family:var(--ui); font-weight:500; letter-spacing:.34em; font-size:13px; color:var(--ink); }
  .pre-line{ margin-top:40px; text-align:center; font-family:var(--ui); font-weight:300;
    font-size:clamp(17px,3.0vw,32px); line-height:1.45; letter-spacing:-0.005em; color:#aaa79f;
    max-width:min(660px,92vw); }
  .pre-line .pl-row{ display:block; }
  .pre-line .wkeep{ color:#aaa79f; }
  .pre-line .w{ display:inline-block; opacity:0; filter:blur(7px); transform:translateY(9px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), filter .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
  .pre-line .w.in{ opacity:1; filter:blur(0); transform:none; }
  .pre-line .w.out{ opacity:0 !important; filter:blur(9px) !important; transform:translateY(-5px) !important;
    transition:opacity .6s ease, filter .6s ease, transform .6s ease; }
  .pre-line.toCanvas .wkeep{ opacity:0 !important; transition:opacity .2s ease; }

  /* contacts */
  .contacts{ display:flex; align-items:center; }
  .contacts .col{ width:min(640px,80vw); margin-left:clamp(48px,12vw,220px); }
  .contacts h2{ margin-bottom:34px; }
  .contacts .links{ display:flex; flex-direction:column; gap:16px; margin:0 0 8px; }
  .contacts .links a{ font-size:18px; font-weight:400; color:#5a574f; text-decoration:none; width:fit-content; border-bottom:1px solid transparent; transition:border-color .25s; }
  .contacts .links a:hover{ border-color:rgba(60,58,52,0.4); }
  .contacts .links .lreg{ font-size:11px; letter-spacing:.2em; color:var(--ink-soft); margin-left:4px; }

  /* reveal-background button */
  .bgbtn{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%); pointer-events:auto;
    background:rgba(255,255,255,0.5); border:1px solid rgba(60,58,52,0.18); color:var(--ink);
    font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase; padding:11px 22px;
    border-radius:999px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    transition:background .25s ease, color .25s ease, border-color .25s ease; }
  .bgbtn:hover{ background:rgba(255,255,255,0.85); }
  .bgbtn.on{ background:#56534b; color:#f2f2f2; border-color:#56534b; }

  /* hamburger (mobile only) */
  .menu-btn{ display:none; }
  /* opaque header mask (mobile only) - content scrolls UNDER the header */
  .topmask{ display:none; }

  /* translucent backing for text when the whole background is revealed */
  body.bg-open .home .tagline,
  body.bg-open .about .col,
  body.bg-open .contacts .col{
    background:rgba(244,244,243,0.64); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    padding:30px 36px; border-radius:7px; box-shadow:0 10px 50px rgba(40,40,40,0.07);
    transition:background .3s ease;
  }

  /* desktop: when the background is open, a tall text card (e.g. Контекст with 6
     cases) must not climb under the nav. Scroll the page and use safe-center so
     short pages stay centred while tall ones top-align below the header. */
  body.bg-open .about, body.bg-open .contacts{
    align-items:safe center; overflow-y:auto; overflow-x:hidden;
    padding-top:104px; padding-bottom:78px;
  }

  /* ===== top bar: language + contact ===== */
  .topbar{ position:absolute; top:44px; right:48px; display:flex; align-items:center; gap:20px; pointer-events:auto; z-index:20; }
  .langsw{ display:flex; gap:1px; }
  .langsw button{ background:none; border:none; font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:4px 6px; cursor:pointer; transition:color .2s; }
  .langsw button.active{ color:var(--ink); font-weight:600; }
  .contact-btn{ background:var(--ink); color:#f4f3f1; border:none; border-radius:999px; font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px 18px; cursor:pointer; transition:background .25s ease; }
  .contact-btn:hover{ background:#2c2722; }

  /* nav centred on desktop */
  .nav{ left:50%; right:auto; transform:translateX(-50%); }
  .nav-bar, .nav-phones, .nav-eyebrow, .nav-top{ display:none; }

  /* case hover hint */
  .case{ position:relative; }
  .chint{ position:relative; margin-top:11px; display:flex; align-items:center; gap:5px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:0; transform:translateY(-3px); transition:opacity .25s ease, transform .25s ease; }
  .chint::before{ content:'✶'; color:#b0322b; font-size:11px; }
  .chint{ pointer-events:none; }
  .page:not(.active-page) a, .page:not(.active-page) button{ pointer-events:none; }
  .case:hover .chint{ opacity:.75; transform:none; }

  .vlink{ color:#3b3933; text-decoration:none; border-bottom:1px solid rgba(60,58,52,0.25); white-space:nowrap; }
  .vlink:hover{ border-color:rgba(60,58,52,0.6); }

  /* ===== modals ===== */
  .modal{ position:fixed; inset:0; z-index:120; display:none; }
  .modal.on{ display:block; }
  .modal-back{ position:absolute; inset:0; background:rgba(34,32,29,0.36); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:mfade .3s ease; }
  /* all modal close ✕ share ONE top-right anchor so they coincide across modals */
  .modal-x{ position:absolute; top:16px; right:20px; width:46px; height:46px; display:grid; place-items:center; background:none; border:none; font-size:30px; line-height:1; color:var(--ink-soft); cursor:pointer; z-index:7; -webkit-tap-highlight-color:transparent; }
  .modal-x:hover{ color:var(--ink); }
  @keyframes mfade{ from{ opacity:0; } to{ opacity:1; } }
  /* contact modal - a "surfacing" reveal in the site's relief/water language */
  #contactModal .modal-back{ background:rgba(40,36,30,0.30);
    -webkit-backdrop-filter:blur(8px) saturate(105%); backdrop-filter:blur(8px) saturate(105%);
    animation:cmBack .5s ease both; }
  #contactModal.closing .modal-back{ animation:cmBackOut .26s ease forwards; }
  @keyframes cmBack{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes cmBackOut{ from{ opacity:1; } to{ opacity:0; } }

  .cm-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(444px,92vw);
    background:linear-gradient(177deg,#f8f7f5,#f0efec); border:1px solid rgba(60,58,52,0.10); border-radius:18px;
    padding:42px 38px 32px; overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 42px 90px -22px rgba(28,24,18,0.36), 0 10px 34px rgba(28,24,18,0.10); }
  /* a thin water-line drawing across the top edge (the meniscus) */
  .cm-panel::before{ content:''; position:absolute; left:8%; right:8%; top:0; height:1.5px; transform:scaleX(0);
    background:linear-gradient(90deg, transparent, rgba(86,83,75,0.55), transparent); }
  /* soft wet highlight pooling under the top edge */
  .cm-panel::after{ content:''; position:absolute; left:50%; top:-42%; width:120%; height:80%; transform:translateX(-50%);
    background:radial-gradient(58% 100% at 50% 100%, rgba(255,255,255,0.5), transparent 70%); pointer-events:none; }

  #contactModal.on .cm-panel{ animation:cmRise .62s cubic-bezier(.16,.84,.3,1) both; }
  #contactModal.on .cm-panel::before{ animation:cmLine .7s ease .2s both; }
  #contactModal.closing .cm-panel{ animation:cmFall .26s cubic-bezier(.4,0,.7,.4) forwards; }
  @keyframes cmRise{
    0%{ opacity:0; transform:translate(-50%,calc(-50% + 26px)) scale(.965); filter:blur(7px); }
    62%{ opacity:1; filter:blur(0); }
    100%{ opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } }
  @keyframes cmFall{ to{ opacity:0; transform:translate(-50%,calc(-50% + 14px)) scale(.985); filter:blur(3px); } }
  @keyframes cmLine{ to{ transform:scaleX(1); } }
  @keyframes cmItem{ from{ opacity:0; transform:translateY(11px); } to{ opacity:1; transform:none; } }
  /* cascade the contents in, like settling water */
  #contactModal.on .cm-head,
  #contactModal.on form > *,
  #contactModal.on .cm-direct{ opacity:0; animation:cmItem .55s cubic-bezier(.2,.7,.2,1) both; }
  #contactModal.on .cm-head{ animation-delay:.18s; }
  #contactModal.on form > *:nth-child(1){ animation-delay:.25s; }
  #contactModal.on form > *:nth-child(2){ animation-delay:.31s; }
  #contactModal.on form > *:nth-child(3){ animation-delay:.37s; }
  #contactModal.on form > *:nth-child(4){ animation-delay:.43s; }
  #contactModal.on form > *:nth-child(5){ animation-delay:.49s; }
  #contactModal.on .cm-direct{ animation-delay:.55s; }
  @media (prefers-reduced-motion: reduce){
    #contactModal .modal-back, #contactModal .cm-panel, #contactModal .cm-panel::before,
    #contactModal.on .cm-head, #contactModal.on form > *, #contactModal.on .cm-direct{ animation-duration:.01ms !important; }
  }
  .cm-head .eyebrow{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }
  .cm-sub{ font-size:14px; color:#6c6962; margin-top:10px; line-height:1.5; }
  .cm-panel form{ display:flex; flex-direction:column; gap:11px; margin-top:24px; }
  .cm-panel input, .cm-panel textarea{ font-family:var(--ui); font-size:14px; padding:12px 14px; border:1px solid rgba(60,58,52,0.18); border-radius:6px; background:#fbfbfa; color:var(--ink); resize:none; }
  .cm-panel input::placeholder, .cm-panel textarea::placeholder{ color:#a7a49c; }
  .cm-panel input:focus, .cm-panel textarea:focus{ outline:none; border-color:var(--ink); }
  .cm-submit{ background:var(--ink); color:#f4f3f1; border:none; border-radius:6px; padding:13px; font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; margin-top:3px; transition:background .25s; }
  .cm-submit:hover{ background:#2c2722; }
  .cm-ok{ display:none; margin-top:20px; font-size:15px; line-height:1.5; color:#2f7d52; }
  .cm-direct{ margin-top:24px; padding-top:18px; border-top:1px solid rgba(60,58,52,0.12); display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
  .cm-or{ width:100%; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
  .cm-direct a{ font-size:13.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
  .cm-direct a:hover{ border-color:rgba(60,58,52,0.4); }

  /* ===== case modal (embroidery) ===== */
  .case-stage{ position:fixed; inset:0; background:#e7dcc6; overflow:hidden;
    background-image:radial-gradient(rgba(120,95,55,0.05) 1px, transparent 1px); background-size:5px 5px; }
  .case-stage .emb{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .case-modal .modal-x{ z-index:7; color:#5b4a36; font-size:30px; }
  .case-modal .modal-x:hover{ color:#2b2622; }
  .emb-hud{ position:absolute; left:44px; bottom:42px; z-index:4; width:min(340px,84vw);
    background:rgba(238,228,207,0.62); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    border:1px solid rgba(120,90,50,0.18); border-radius:12px; padding:22px 24px; }
  .emb-hint{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#7a6647; }
  .stages{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:11px; }
  .stg{ display:flex; align-items:center; gap:12px; opacity:.42; }
  .stg-dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid #5b4a36; flex:none; }
  .stg-name{ font-size:13.5px; color:#4a3c28; flex:1; }
  .stg-val{ font-weight:600; font-size:13.5px; color:#8a3a30; }
  .emb-foot{ margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
  .emb-pct{ font-family:var(--ui); font-size:22px; font-weight:600; color:#4a3c28; }
  .emb-skip{ background:none; border:none; font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8a7656; cursor:pointer; }
  .emb-skip:hover{ color:#4a3c28; }
  .case-detail{ position:absolute; top:0; right:0; height:100%; width:min(480px,94vw);
    background:rgba(245,244,242,0.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:-24px 0 70px rgba(40,30,20,0.18); padding:66px 50px 50px; overflow:auto;
    opacity:0; transform:translateX(40px); pointer-events:none; }
  .cd-eyebrow{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
  .cd-name{ font-family:var(--ui); font-weight:500; font-size:30px; color:#3b3933; margin-top:7px; }
  .cd-niche{ font-size:13px; color:#8a877f; margin-top:5px; }
  .cd-desc{ font-size:14.5px; line-height:1.7; color:#6c6962; margin-top:20px; }
  .cd-label{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin:28px 0 12px; }
  .cd-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
  .mtr{ border-top:1px solid rgba(60,58,52,0.14); padding-top:9px; }
  .mtr-k{ font-size:11px; color:var(--ink-soft); }
  .mtr-v{ font-family:var(--ui); font-weight:600; font-size:16px; color:#56534b; margin-top:2px; }
  .cd-shots{ display:flex; flex-direction:column; gap:18px; }
  .cd-shots-img{ gap:22px; }
  .shot{ position:relative; }
  .shot-img img{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid rgba(60,58,52,0.14);
    box-shadow:0 18px 44px -26px rgba(28,24,18,0.5); }
  .shot-lb-fig img{ width:100%; height:auto; max-height:92vh; object-fit:contain; border-radius:8px; }
  .cd-visit{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:13px 22px;
    border-radius:999px; background:var(--ink); color:#f4f3f1; text-decoration:none;
    font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    transition:transform .2s ease, box-shadow .2s ease; }
  .cd-visit::before{ content:'↗'; font-size:15px; letter-spacing:0; }
  .cd-visit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(28,24,18,0.6); }
  .cd-visit-url{ text-transform:none; letter-spacing:.02em; opacity:0.7; font-size:12px; }
  .shot figcaption{ font-size:11px; color:var(--ink-soft); margin-top:7px; letter-spacing:.04em; }
  .shot-zoom{ position:absolute; top:8px; right:8px; width:30px; height:30px; border:none; border-radius:7px; background:rgba(40,35,30,0.5); color:#fff; font-size:16px; line-height:1; cursor:pointer; z-index:2; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .2s; }
  .shot-zoom:hover{ background:rgba(40,35,30,0.82); }
  .shot-lightbox{ position:fixed; inset:0; z-index:170; display:grid; place-items:center; }
  .shot-lb-back{ position:absolute; inset:0; background:rgba(20,18,16,0.95); }
  /* enlarge the screenshot to near its real width on click (they are ~1500px wide) */
  .shot-lb-fig{ position:relative; z-index:1; width:min(1500px,96vw); max-height:92vh; margin:0; }
  .shot-lb-fig:has(image-slot){ height:min(82vh,820px); }
  .shot-lb-fig image-slot{ width:100% !important; height:100% !important; }
  .shot-lb-fig figcaption{ position:absolute; bottom:-28px; left:2px; color:#efe7d6; font-size:12px; letter-spacing:.06em; }
  /* lightbox close shares the SAME top-right screen anchor as the modal ✕ */
  .shot-lb-x{ position:fixed; top:16px; right:20px; transform:none; width:46px; height:46px; display:grid; place-items:center; border:none; border-radius:50%; background:#f4f3f1; color:#2b2622; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,0.3); z-index:171; }

  @media (max-width:1024px){
    .footer, .scroller{ display:none; }
    .topbar{ display:none; }
    .case-detail{ width:100%; padding:54px 28px 40px; }
    .emb-hud{ left:20px; right:20px; bottom:20px; width:auto; }
    .nav-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
    .nav-bar .nav-close{ position:absolute; top:25px; right:25px; width:44px; height:44px;
      display:grid; place-items:center; background:none; border:none;
      font-size:34px; line-height:1; color:var(--ink); cursor:pointer; padding:0; margin:0; z-index:41; }
    .nav-bar .nav-close:hover{ color:#2c2722; }
    .nav-bar .nav-contact{ width:auto; background:rgba(255,255,255,0.55); color:var(--ink);
      border:1px solid rgba(60,58,52,0.18); border-radius:999px; font-family:var(--ui);
      font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:11px 17px;
      cursor:pointer; display:inline-flex; align-items:center; gap:9px; }
    .nav-bar .nav-contact::after{ content:'→'; font-size:14px; letter-spacing:0; }
    .nav-phones{ display:flex; flex-direction:column; gap:2px; margin-top:24px; }
    .nav-phones a{ display:flex; align-items:center; gap:14px; font-size:18px; color:var(--ink); text-decoration:none;
      letter-spacing:.01em; padding:13px 0; border-bottom:1px solid rgba(60,58,52,0.1); }
    .nav-email{ font-size:15px !important; color:var(--ink-soft) !important; }
    .np-flag{ font-size:9.5px; letter-spacing:.1em; color:var(--ink-soft); border:1px solid rgba(60,58,52,0.28);
      border-radius:5px; padding:4px 7px; flex:none; min-width:30px; text-align:center; }
    .mark{ left:30px; top:36px; }
    /* hide the nav's classic scrollbar so it never shifts the close X inward
       (mobile scrollbars are overlay anyway; this also covers narrow desktop) */
    .nav{ scrollbar-width:none; }
    .nav::-webkit-scrollbar{ width:0; height:0; display:none; }
    /* every top-right close X lands on the hamburger's center (~47px,47px) so
       menu✕ = hamburger and case✕ = contact✕ - no jump between contexts */
    .modal-x{ top:25px; right:25px; width:44px; height:44px; }
    .shot-lb-x{ top:25px; right:25px; width:44px; height:44px; }
    .about .col, .contacts .col{ margin-left:30px; margin-right:22px; }
    .home .tagline{ width:86vw; }
    .bgbtn{ bottom:30px; }

    .menu-btn{ display:flex; flex-direction:column; justify-content:center; gap:5px;
      position:absolute; top:34px; right:30px; width:34px; height:26px;
      background:none; border:none; cursor:pointer; pointer-events:auto; z-index:40; }
    .menu-btn span{ display:block; width:26px; height:1.5px; background:var(--ink); transition:transform .3s ease, opacity .25s ease; }
    body.menu-open .menu-btn span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
    body.menu-open .menu-btn span:nth-child(2){ opacity:0; }
    body.menu-open .menu-btn span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

    .nav{ position:fixed; inset:0; top:0; right:0; left:0; bottom:0;
      width:100%; max-height:none; height:100%;
      flex-direction:column; align-items:stretch; gap:0;
      padding:18px 24px 36px; background:#efede8; border-radius:0;
      box-shadow:none;
      overflow-y:auto; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      opacity:0; transform:none; transform-origin:top center;
      pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:30; }
    body.menu-open .nav{ opacity:1; transform:none; pointer-events:auto; }
    body.menu-open .menu-btn{ opacity:0; pointer-events:none; }
    /* when the menu is closed the full-screen nav must not intercept taps (overrides .chrome button{pointer-events:auto}) */
    body:not(.menu-open) .nav, body:not(.menu-open) .nav *{ pointer-events:none !important; }
    .nav-eyebrow{ display:block; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
      color:var(--ink-soft); }
    .nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
    .nav-lang{ display:flex; gap:6px; }
    .nav-lang button{ background:none; border:1px solid transparent; font-family:var(--ui); font-size:13px;
      letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; padding:3px 12px; border-radius:999px; }
    .nav-lang button.active{ color:var(--ink); border-color:rgba(60,58,52,0.3); font-weight:600; }
    .nav > button[data-go]{ position:relative; text-align:left; font-size:23px; letter-spacing:.005em;
      text-transform:none; color:var(--ink); opacity:1; padding:15px 26px 15px 32px;
      border:none; border-bottom:1px solid rgba(60,58,52,0.1); counter-increment:navi; }
    .nav > button[data-go]:first-of-type{ border-top:1px solid rgba(60,58,52,0.1); }
    .nav > button[data-go]::before{ content:'0' counter(navi); position:absolute; left:0; top:50%;
      transform:translateY(-50%); font-size:11px; letter-spacing:.05em; color:var(--ink-soft); font-weight:400; }
    .nav > button[data-go]::after{ content:'↗'; position:absolute; right:6px; top:50%;
      transform:translateY(-50%); font-size:15px; color:var(--ink-soft); opacity:.5; }
    .nav > button[data-go].active{ border-bottom:1px solid rgba(60,58,52,0.1); padding-bottom:16px; }
    .nav > button[data-go].active::after{ opacity:1; color:#b0322b; }
    .nav{ counter-reset:navi; }
  }

  /* ---- mobile: sections scroll on their own; content clears the fixed
     header and the bottom controls so nothing is cut off ---- */
  @media (max-width:1024px){
    .page{ pointer-events:none; }
    .page.active-page{ pointer-events:auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
    .about, .contacts{ align-items:flex-start; }
    .about .meta, .contacts .meta{ flex-direction:column; gap:24px; width:100%; }
    .about .col, .contacts .col{ width:auto; margin:0 22px; padding:104px 0 144px; }
    .cases{ grid-template-columns:repeat(2, 1fr); gap:22px 18px; }
    .home .tagline{ width:88vw; }
    .bgbtn{ z-index:8; }
    /* background-reveal mode: lock scroll so a finger drag only drives the
       relief animation, and keep the header/bottom clearance (don't let the
       translucent text backing collapse the padding and shove content up) */
    /* the relief reveals automatically on mobile, so the page stays scrollable
       even while the background is open (finger-drag no longer fights scroll) */
    body.bg-open .page.active-page{ overflow-y:auto; }
    body.bg-open .about .col, body.bg-open .contacts .col{ padding:104px 22px 132px; }
    /* opaque bar so scrolled content disappears under the header's bottom edge,
       not at the very top of the screen */
    .topmask{ display:block; position:fixed; top:0; left:0; right:0; height:74px;
      background:#f2f2f2; z-index:20; pointer-events:none; }
    .mark{ z-index:21; }
  }