/* Home page: daylight workshop. Builds on cases.css (reset, skip link, image viewer). */
/* Georgian letters only (ru/en text keeps the system stack); Noto Sans Georgian, OFL 1.1, see assets/fonts/OFL.txt. */
@font-face {
  font-family:'Noto Sans Georgian Local';
  src:url('/assets/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
  font-weight:100 500;
  font-display:swap;
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F
}
@font-face {
  font-family:'Noto Sans Georgian Local';
  src:url('/assets/fonts/NotoSansGeorgian-Bold.ttf') format('truetype');
  font-weight:600 900;
  font-display:swap;
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F
}
html.i18n-pending body {
  visibility:hidden
}
body.home {
  --bg:#faf6ef;
  --card:#fffdf9;
  --ink:#1e2124;
  --muted:#5d6166;
  --line:#e8dfd2;
  --amber:#f7b84b;
  --amber-deep:#e39a26;
  --accent:#c4561b;
  --glow:#ffc65c;
  --paper:var(--bg);
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans Georgian Local',Inter,'Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;
  font-size:17px;
  line-height:1.6
}
.home a:hover {
  color:inherit
}
.home a:focus-visible,.home button:focus-visible,.home select:focus-visible {
  outline:3px solid var(--amber-deep);
  outline-offset:3px;
  border-radius:6px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}
.home-wrap {
  width:min(1824px,calc(100% - 2*clamp(16px,3.2vw,32px)));
  margin-inline:auto
}
html.panel-open {
  overflow:hidden
}

/* Header */
.home-header {
  position:relative;
  z-index:5;
  background:color-mix(in srgb,var(--bg) 92%,transparent)
}
.home-header-inner {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  text-decoration:none;
  font-size:21px;
  letter-spacing:.12em;
  font-weight:400;
  white-space:nowrap
}
.brand b {
  font-weight:800
}
.home-nav {
  display:flex;
  margin-left:auto;
  align-items:center;
  gap:6px 30px;
  font-size:16px
}
.home-nav a:not(.btn) {
  text-decoration:none;
  padding:10px 0
}
.home-nav a:not(.btn):hover {
  color:var(--accent)
}
/* Language switch: a native select styled like the small outline button. */
.lang-switch {
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231e2124' stroke-width='1.8'/%3E%3C/svg%3E")
}
.lang-code {
  display:none
}
.lang-switch select {
  appearance:none;
  min-height:44px;
  padding:9px 34px 9px 14px;
  border:1.5px solid #3a3d42;
  border-radius:12px;
  background:#fffdf9cc var(--chevron) no-repeat right 13px center/11px 8px;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer
}
.lang-switch select:hover {
  background-color:#fff
}

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 24px;
  border-radius:12px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .2s
}
.btn-amber {
  background:var(--amber);
  border-color:var(--amber-deep);
  box-shadow:0 6px 18px #e39a2633
}
.btn-amber:hover {
  background:#ffc461;
  box-shadow:0 8px 24px #e39a2655
}
.btn-line {
  background:#fffdf9cc;
  border-color:#3a3d42
}
.btn-line:hover {
  background:#fff
}
.btn-small {
  min-height:44px;
  padding:9px 18px;
  font-size:15px
}

/* Hero */
.hero {
  position:relative;
  overflow:hidden
}
.hero-copy {
  position:relative;
  z-index:3;
  padding-block:28px 32px;
  pointer-events:none
}
.hero-copy a {
  pointer-events:auto
}
.hero-kicker {
  margin:0 0 18px;
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase
}
.hero h1 {
  font-size:clamp(42px,4.7vw,78px);
  line-height:.98;
  font-weight:850;
  letter-spacing:-.045em;
  margin:0 0 26px;
  max-width:none
}
.hero-lead {
  font-size:clamp(19px,1.6vw,25px);
  line-height:1.4;
  color:#41454b;
  margin:0 0 28px
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px
}
.hero-explore {
  display:inline-flex;
  gap:10px;
  min-height:44px;
  align-items:center;
  color:#4c5560;
  text-decoration:none;
  font-size:16px
}

/* Workshop scene. Coordinates: scene 1134×624; pane A = x 0…455, pane B = x 340…1134. */
.scene {
  position:relative;
  aspect-ratio:1134/624;
  outline:none
}
.pane {
  position:absolute;
  top:0;
  height:100%
}
.pane-a {
  left:0;
  width:40.1235%
}
.pane-b {
  left:29.9824%;
  width:70.0176%;
  pointer-events:none
}
.pane-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  user-select:none
}
.pane-b .pane-img {
  clip-path:inset(0 0 0 calc(14.4836% - 2px))
}
.hotspots {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:3
}
.hot {
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent
}
.hot path {
  fill:transparent;
  stroke:transparent;
  stroke-width:2.5;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:all;
  transition:fill .25s,stroke .25s
}
.hot:hover path,.hot:focus path {
  fill:#ffc65c14;
  stroke:#ffc65c8c
}
.hot:focus path {
  stroke-width:3
}
.dup,.hot .hit {
  display:none
}
.hot .hit {
  fill:transparent!important;
  stroke:transparent!important;
  filter:none!important
}
/* Rack activity LEDs: a dark dot briefly covers a lit indicator of the art, each on its own rhythm. */
.rack-leds {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none
}
.rack-leds i {
  position:absolute;
  width:.75%;
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle,#0d0f12 45%,#0d0f1200 72%);
  opacity:0;
  animation:led-blink var(--d) linear var(--o) infinite
}
@keyframes led-blink {
  0%,9%,37%,41%,100% { opacity:0 }
  5% { opacity:.85 }
  39% { opacity:.7 }
}
.lamp-light {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 15% 9% at 39% 39%,#ffe2a6f2,transparent 72%),
    radial-gradient(ellipse 26% 22% at 40% 56%,#ffc56f40,transparent 78%),
    radial-gradient(ellipse 48% 20% at 42% 73%,#ffb54fcc,transparent 75%),
    radial-gradient(ellipse 70% 36% at 40% 70%,#ff9f3a4d,transparent 80%);
  transition:opacity .6s ease
}
.scene.lamp-on .lamp-light {
  opacity:1
}
/* The art has a lit shade opening; while the lamp is off a multiply ellipse dims only that opening. */
.lamp-shade {
  position:absolute;
  left:27.5%;
  top:37.3%;
  width:22%;
  height:4.2%;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  rotate:-10deg;
  mix-blend-mode:multiply;
  background:radial-gradient(closest-side,#463e38 72%,#463e3800);
  transition:opacity .4s ease
}
.scene.lamp-on .lamp-shade {
  opacity:0
}
/* Sections */
.home-section {
  padding-block:clamp(56px,7vw,96px) 0
}
.home-section h2 {
  font-size:clamp(34px,3.6vw,52px);
  font-weight:850;
  letter-spacing:-.045em;
  margin:0 0 34px
}
.project-grid {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}
.project-card {
  margin:0;
  padding:0
}
.project-open {
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 30px #6d4a1f12;
  transition:box-shadow .25s,transform .25s,border-color .25s
}
.project-open:hover {
  border-color:var(--amber);
  box-shadow:0 14px 34px #c4781f2b
}
.project-card img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:left top;
  border-radius:10px;
  border:1px solid #0000001a
}
.project-text {
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
  padding-top:6px;
  color:var(--muted);
  font-size:16px;
  line-height:1.45
}
.project-title {
  color:var(--ink);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em
}
.project-arrow {
  margin-top:auto;
  color:var(--accent);
  font-size:24px
}
.demo-line {
  margin:22px 0 0;
  color:var(--muted);
  font-size:15px
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.service-grid article {
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line)
}
.service-grid h3 {
  text-wrap:balance;
  font-size:22px;
  margin:0 0 12px
}
.service-grid p {
  color:#43474d;
  font-size:16px
}
.service-links {
  margin:auto 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px
}
.about-grid p,.service-grid p {
  max-width:72ch
}
.service-links a {
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  padding:8px 0;
  display:inline-block
}
.about-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:22px 60px
}
.about-grid h2:focus {
  outline:none
}
.about-lead {
  font-size:22px;
  font-weight:600;
  letter-spacing:-.015em
}
.contact {
  padding-bottom:clamp(56px,7vw,96px)
}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px 40px;
  flex-wrap:wrap;
  padding:34px;
  border-radius:20px;
  background:linear-gradient(115deg,#fff4df,#fffdf9)
}
.contact h2 {
  margin-bottom:10px
}
.contact p {
  margin:0;
  color:var(--muted)
}
.home-footer {
  padding:26px 0 40px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--line)
}
.footer-inner {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:4px 24px
}
.intro-replay,.footer-contact {
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer
}
.intro-replay:hover,.footer-contact:hover {
  color:var(--ink)
}

/* Contact form (panel-contact): sent by the site's own handler, the recipient never reaches the page. */
.contact-form fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0
}
.contact-field {
  display:grid;
  gap:6px;
  margin:0 0 16px;
  font-size:15px;
  font-weight:600
}
.contact-field input,.contact-field textarea {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1.5px solid #3a3d42;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:400;
  font-size:16px
}
.contact-field textarea {
  min-height:120px;
  resize:vertical
}
.contact-field input:focus-visible,.contact-field textarea:focus-visible {
  outline:3px solid var(--amber-deep);
  outline-offset:2px
}
.contact-field [aria-invalid=true] {
  border-color:#b3261e
}
.contact-error {
  color:#b3261e;
  font-size:14px;
  font-weight:600
}
.contact-form fieldset:disabled {
  opacity:.7
}
.contact-status {
  margin:4px 0 0;
  padding:12px 14px;
  border-radius:10px;
  background:#fff4df;
  font-weight:600;
  overflow-wrap:anywhere
}
.contact-status.is-error {
  background:#fdecea;
  color:#8c1d18
}
.contact-status.is-success {
  background:#e7f4e8;
  color:#1d5b26
}
/* SmartCaptcha widget: it follows the box width but never gets narrower than 300px,
   so on the narrowest phones it borrows the panel's side padding instead of overflowing. */
.contact-captcha {
  min-height:119px;
  margin:0 min(0px,(100% - 300px)/2) 12px
}
@media(max-width:359px) {
  .panel.panel-contact {
    width:100vw;
    max-height:100dvh;
    border-radius:0
  }
}
.contact-trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}

/* Door intro (assets/js/intro.js): the video sits over the real page and keeps its own proportions;
   the rest of the screen is the page background. Both layers hide themselves if the script dies. */
html.intro-cover body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--bg);
  animation:intro-failsafe 0s linear 10s forwards
}
html.intro-lock {
  overflow:hidden
}
@keyframes intro-failsafe {
  to { visibility:hidden }
}
.intro {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--bg);
  overscroll-behavior:contain;
  touch-action:none;
  transition:opacity .32s ease;
  animation:intro-failsafe 0s linear 160s forwards
}
.intro.is-out {
  opacity:0;
  pointer-events:none
}
.intro video {
  display:block;
  width:min(100vw,100vh*16/9);
  width:min(100vw,100svh*16/9);
  height:auto;
  aspect-ratio:16/9;
  background:transparent;
  transition:opacity .22s ease
}
/* Portrait: the 4:5 edit, its top and bottom edges dissolve into the page background. */
.intro[data-mode=portrait] video {
  width:min(100vw,100vh*4/5);
  width:min(100vw,100svh*4/5);
  aspect-ratio:4/5;
  -webkit-mask-image:linear-gradient(#0000,#000 6%,#000 94%,#0000);
  mask-image:linear-gradient(#0000,#000 6%,#000 94%,#0000)
}
.intro video.is-hidden {
  opacity:0
}
/* Splash while the chosen file downloads whole: covers the video, then fades once it plays. */
.intro-splash {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:14px;
  background:var(--bg);
  transition:opacity .22s ease
}
.intro-splash.is-out {
  opacity:0
}
.intro-name {
  margin:0;
  color:var(--ink);
  font-size:clamp(22px,4vw,32px);
  font-weight:700;
  letter-spacing:.01em
}
.intro-bar {
  position:relative;
  width:min(220px,60vw);
  height:2px;
  overflow:hidden;
  border-radius:2px;
  background:#e39a2633
}
.intro-bar i {
  position:absolute;
  inset:0;
  background:var(--amber-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s linear
}
/* Size unknown: a short segment runs along the line instead of a made-up percentage. */
.intro-bar.is-indeterminate i {
  transform:translateX(-100%) scaleX(.3);
  animation:intro-sweep 1.4s ease-in-out infinite
}
@keyframes intro-sweep {
  to { transform:translateX(100%) scaleX(.3) }
}
.intro-percent {
  min-height:1.4em;
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-variant-numeric:tabular-nums
}
@media (prefers-reduced-motion:reduce) {
  .intro-splash,.intro-bar i { transition:none }
  .intro-bar.is-indeterminate i { animation:none; transform:scaleX(.3) }
}
.intro-skip {
  position:absolute;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  min-width:44px;
  min-height:44px;
  padding:0 20px;
  border:1.5px solid #3a3d42;
  border-radius:999px;
  background:#fffdf9e6;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer
}
.intro-skip:hover {
  background:#fff
}
.intro-skip:focus-visible {
  outline:3px solid var(--amber-deep);
  outline-offset:3px
}

/* Panels */
.panel {
  width:min(860px,calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  padding:0;
  border:0;
  border-radius:20px;
  background:var(--card);
  color:var(--ink);
  box-shadow:0 30px 80px #2b1d0c4d
}
.panel::backdrop {
  background:#2a1f1499;
  backdrop-filter:blur(2px)
}
.panel[open] {
  display:flex;
  flex-direction:column
}
.panel-portal {
  width:min(640px,calc(100vw - 32px))
}
.portal-shot {
  display:block;
  width:100%;
  margin:6px 0 14px;
  border:1px solid var(--line);
  border-radius:12px
}
.panel-narrow {
  width:min(440px,calc(100vw - 32px))
}
.panel-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:22px 24px 12px
}
.panel-head h2 {
  font-size:clamp(24px,2.4vw,32px);
  font-weight:800;
  letter-spacing:-.035em;
  margin:0
}
.panel-kicker {
  margin:0 0 6px;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase
}
.panel-close {
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1.5px solid #3a3d42;
  background:#fff;
  color:var(--ink);
  font-size:26px;
  line-height:1;
  cursor:pointer
}
.panel-close:hover {
  background:#fff1d9
}
.panel-body {
  overflow:auto;
  padding:4px 24px 12px;
  overscroll-behavior:contain
}
.panel-body p {
  font-size:16px
}
.panel-body h3 {
  font-size:20px;
  margin:24px 0 8px
}
.panel-body h3,.panel-body p {
  overflow-wrap:break-word
}
.panel-shot {
  display:block;
  margin:6px 0 14px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #0000001f;
  cursor:zoom-in
}
.panel-shot img {
  width:100%
}
.panel-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 24px 22px;
  border-top:1px solid var(--line)
}
.panel-note {
  color:var(--muted);
  font-size:14px
}
.tabs {
  display:flex;
  gap:6px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line)
}
.tabs [role=tab] {
  min-height:44px;
  padding:8px 16px;
  border:0;
  border-bottom:3px solid transparent;
  background:none;
  color:var(--muted);
  font-weight:600
}
.tabs [aria-selected=true] {
  color:#9e2347;
  border-bottom-color:#9e2347
}
.panel-crimson .panel-kicker {
  color:#9e2347
}
.task-list {
  list-style:none;
  padding:0;
  margin:0
}
.task-list li {
  margin:0;
  padding:14px 0;
  border-top:1px solid var(--line)
}
.task-list b {
  display:block;
  font-size:18px
}
.task-list span {
  color:var(--muted);
  font-size:15px
}
.chat {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
  max-height:46dvh;
  overflow:auto;
  padding:14px;
  border-radius:16px;
  background:#f1f4f9
}
.msg {
  max-width:86%;
  margin:0;
  padding:10px 13px;
  border-radius:14px;
  font-size:15px!important;
  line-height:1.4
}
.msg.bot {
  align-self:flex-start;
  background:#fff;
  border-bottom-left-radius:4px
}
.msg.user {
  align-self:flex-end;
  background:#dbe8ff;
  border-bottom-right-radius:4px
}
.chat-actions {
  display:flex;
  gap:10px;
  margin:12px 0
}

/* Georgian has no letter case: keep kickers in ordinary letters (uppercase may turn into Mtavruli). */
:lang(ka) .hero-kicker,:lang(ka) .panel-kicker {
  text-transform:none;
  letter-spacing:.04em
}
/* Georgian words are wider and taller: only the headline is a step smaller with more line room. */
:lang(ka) .hero h1 {
  font-size:clamp(36px,4.1vw,68px);
  line-height:1.12;
  letter-spacing:-.02em
}

/* Desktop: one text column, then a clear gap, then the workshop. The scene keeps 70% of the hero
   while the column is at least 400px; on narrower screens the scene gives way. Copy and scene share
   one grid cell, so a longer translation makes the hero taller instead of running into the picture. */
@media(min-width:1280px) {
  .hero {
    --copy:clamp(400px,30cqi - 72px,494px);
    --copy-gap:40px;
    display:grid;
    container-type:inline-size;
    max-width:1888px;
    margin-inline:auto;
    padding-top:0
  }
  .hero-copy,.scene {
    grid-area:1/1;
    align-self:start
  }
  .scene {
    justify-self:end;
    width:calc(100cqi - 32px - var(--copy) - var(--copy-gap))
  }
  .hero-copy>* {
    max-width:var(--copy)
  }
  /* Headline size follows the column: the widest line («в работающие», «იდეებს ვაქცევ») fits it. */
  .hero h1 {
    font-size:calc(var(--copy)/6.6)
  }
  :lang(ka) .hero h1 {
    font-size:calc(var(--copy)/7.7)
  }
  .hero-lead {
    font-size:clamp(19px,1.35vw,24px)
  }
  .pane-a::after {
    content:'';
    position:absolute;
    inset:0 auto 0 0;
    width:16%;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,var(--bg),#faf6ef00)
  }
  .hero-copy {
    /* The shared case-page hero top padding moves here, so the scene still starts right under the header. */
    padding-top:calc(38px + clamp(30px,3.2vw,60px))
  }
}
@media(max-width:1279px) {
  .hero-copy {
    padding-bottom:26px
  }
  .hero h1 br:first-of-type {
    display:none
  }
}
@media(max-width:1099px) {
  .project-open {
    grid-template-columns:1fr;
    gap:12px
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .about-grid {
    grid-template-columns:1fr
  }
}
/* Narrower screens: brand and language on the first row, navigation below. */
@media(max-width:1023px) {
  .home-header-inner {
    flex-wrap:wrap;
    row-gap:0
  }
  .lang-switch {
    margin-left:auto
  }
  .home-nav {
    order:3;
    width:100%;
    margin-left:0
  }
}
@media(max-width:699px) {
  body.home {
    font-size:16px
  }
  .home-header-inner {
    min-height:0;
    padding-block:12px;
    gap:4px 8px
  }
  /* Compact language code over a transparent native select; the picker still lists full names. */
  .lang-switch {
    position:relative
  }
  .lang-code {
    display:flex;
    align-items:center;
    min-height:40px;
    padding:0 22px 0 10px;
    border:1.5px solid #3a3d42;
    border-radius:12px;
    background:#fffdf9cc var(--chevron) no-repeat right 8px center/9px 6px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em
  }
  .lang-switch select {
    position:absolute;
    inset:0;
    width:100%;
    min-height:0;
    height:100%;
    opacity:0
  }
  .lang-switch:has(select:focus-visible) .lang-code {
    outline:3px solid var(--amber-deep);
    outline-offset:3px
  }
  .brand {
    font-size:18px
  }
  .home-nav {
    flex-wrap:wrap;
    justify-content:space-between;
    gap:4px 14px;
    font-size:15px
  }
  .home-nav .btn-small {
    padding-inline:14px
  }
  .hero h1 {
    font-size:clamp(38px,11vw,48px)
  }
  .hero h1 br:first-of-type {
    display:inline
  }
  :lang(ka) .hero h1 {
    font-size:clamp(32px,9.4vw,44px)
  }
  .hero-actions .btn {
    flex:1 1 100%
  }
  /* The scene stays one picture, only smaller; the wider phone hit area helps on touch. */
  .hot .hit {
    display:inline
  }
  .project-grid {
    grid-template-columns:1fr
  }
  .contact-inner {
    padding:24px
  }
  .contact-inner .btn {
    width:100%
  }
  .panel {
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:16px
  }
  .panel-head,.panel-body,.panel-foot {
    padding-inline:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  .scene *,.scene {
    animation:none!important
  }
}