/* =========================================================
   Studija Nr.1 — stylesheet (light theme, blue accents)
   Sections: tokens → reset → layout → header → hero → marquee
             → services → rooms → work → process → rates
             → quotes → booking → footer → responsive
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --bg:#f6f8fc;
  --bg-alt:#ecf1f8;
  --panel:#ffffff;
  --panel-2:#f3f6fb;
  --line:rgba(16,32,60,.11);
  --line-strong:rgba(16,32,60,.20);

  --ink:#0f1a2e;
  --ink-soft:#4b5a73;
  --ink-dim:#5e6b81;   /* darkened so small dim text clears WCAG AA on every surface */
  --on-accent:#ffffff;

  --accent:#1d5ce0;          /* primary blue */
  --accent-2:#3f9ae0;        /* lighter sky   */
  --accent-deep:#0d3b8f;     /* deep navy     */
  --accent-soft:rgba(29,92,224,.10);

  --shadow-sm:0 1px 2px rgba(16,32,60,.05), 0 6px 18px -12px rgba(16,32,60,.20);
  --shadow-md:0 2px 6px rgba(16,32,60,.06), 0 18px 40px -22px rgba(16,32,60,.35);
  --shadow-accent:0 10px 26px -12px rgba(29,92,224,.55);

  --radius:14px;
  --radius-lg:22px;

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:1180px;
  --pad:clamp(20px, 5vw, 48px);
  --sec-y:clamp(72px, 10vw, 140px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Previous dark palette — drop these values back into :root to switch themes.
   --bg:#0a0a0c; --bg-alt:#0e0e12; --panel:#141419; --panel-2:#1a1a21;
   --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
   --ink:#f4f2ef; --ink-soft:#b4b1ac; --ink-dim:#7d7a75; --on-accent:#1a0d03;
   --accent:#ff7a2f; --accent-2:#ffb457; --accent-deep:#fff0dd;
   (also invert --shadow-* to near-transparent black and re-check the .hero gradients) */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.025em; margin:0}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:var(--accent); color:var(--on-accent)}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:10px 18px; border-radius:8px; font-weight:600;
}
.skip-link:focus{left:12px}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}
.section{padding-block:var(--sec-y); position:relative}
.section-alt{background:var(--bg-alt); border-block:1px solid var(--line)}

.eyebrow{
  font-family:var(--font-display);
  font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section-head{max-width:720px; margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.lede{color:var(--ink-soft); margin-top:18px; font-size:1.05em; max-width:62ch}
.note{color:var(--ink-dim); font-size:.875rem; margin-top:28px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.72em 1.5em; border-radius:100px; border:1px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  cursor:pointer; transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(13,59,143,.65)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--panel)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-lg{padding:.9em 1.9em; font-size:1rem}
.btn-block{display:flex; width:100%}
.btn:active{transform:translateY(0)}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s, box-shadow .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(246,248,252,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px -10px rgba(16,32,60,.35);
}
.header-inner{display:flex; align-items:center; gap:clamp(12px,2vw,24px); height:74px}
.nav{margin-left:auto}

.brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:1.06rem; letter-spacing:-.02em}
.brand-mark{width:30px; height:30px; color:var(--accent); flex:none}
.brand-mark svg{width:100%; height:100%}
.brand-text{font-weight:400; color:var(--ink)}
.brand-text strong{font-weight:700}

.nav{display:flex; align-items:center; gap:30px}
.nav > a{font-size:.925rem; transition:color .2s; position:relative}
.nav > a:not(.btn){color:var(--ink-soft)}
.nav > a:not(.btn):hover{color:var(--ink)}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--accent);
  transition:width .25s var(--ease);
}
.nav > a:not(.btn):hover::after, .nav > a.is-current::after{width:100%}
.nav > a.is-current{color:var(--ink)}
.nav-cta{margin-left:6px; padding:.6em 1.25em; font-size:.9rem}

/* ---------- language switcher ---------- */
/* In the header row this is utility text, not navigation: no chips, no fills —
   three filled pills next to a filled CTA fight it for attention. A hairline
   rule separates it from the nav links so it doesn't read as a fifth item.
   (The drawer keeps the tappable chips — see the 820px block.) */
.lang{
  display:flex; align-items:center; gap:11px; flex:none;
  padding-left:clamp(16px,2.4vw,30px); border-left:1px solid var(--line);  /* matches the nav gap, so the rule sits centred */
}
.lang a{
  font-family:var(--font-display); font-size:.76rem; font-weight:600; letter-spacing:.1em;
  color:var(--ink-dim); transition:color .2s;
}
.lang a:hover{color:var(--ink)}
.lang a.is-active{color:var(--accent)}

.menu-toggle{
  display:none; width:44px; height:44px; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:10px; cursor:pointer; padding:0; place-items:center;
}
.menu-toggle span{display:block; width:18px; height:1.6px; background:var(--ink); margin:3.5px auto; transition:transform .3s var(--ease), opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:124px 84px; overflow:hidden;
  background:
    radial-gradient(900px 520px at 78% 6%, rgba(29,92,224,.16), transparent 62%),
    radial-gradient(760px 520px at 6% 94%, rgba(63,154,224,.18), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 60%);
}
.hero-wave{position:absolute; inset:auto 0 0 0; width:100%; height:44vh; opacity:.9; pointer-events:none}
.hero-glow{
  position:absolute; left:50%; top:-280px; width:900px; height:560px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(29,92,224,.14), transparent 68%);
  filter:blur(30px); pointer-events:none;
}
.hero-inner{position:relative; z-index:2}
.hero-title{font-size:clamp(2.3rem,5vw,4.15rem); font-weight:700; max-width:19ch}
.grad{
  background:linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 45%, #2b7fd4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{margin-top:26px; max-width:56ch; color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.18rem)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

.hero-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px);
  margin:clamp(52px,7vw,84px) 0 0; padding-top:30px; border-top:1px solid var(--line); max-width:820px;
}
.hero-stats dt{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.hero-stats dd{margin:6px 0 0; font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:600; letter-spacing:-.03em}
.hero-stats .unit{font-size:.5em; color:var(--ink-dim); font-weight:500}

.scroll-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2}
.scroll-hint span{
  display:block; width:22px; height:36px; border:1.5px solid var(--line-strong); border-radius:12px; position:relative;
}
.scroll-hint span::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:6px; border-radius:2px;
  background:var(--accent); transform:translateX(-50%); animation:scrolldot 1.8s infinite var(--ease);
}
@keyframes scrolldot{0%{opacity:0; transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0; transform:translate(-50%,13px)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:var(--bg-alt); padding:16px 0}
.marquee-track{display:flex; gap:26px; width:max-content; animation:slide 34s linear infinite; align-items:center}
.marquee-track span{font-family:var(--font-display); font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim)}
.marquee-track i{color:var(--accent); font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- services ---------- */
/* Four across on desktop — the copy below is tuned to stay readable at ~260px wide. */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

/* Line the cards up row by row, so a longer paragraph in one card can't push its
   tick list below the others. Each card hands its four parts (number, title, body,
   list) to the shared track set; the body row takes the slack. */
@supports (grid-template-rows: subgrid){
  .cards{grid-template-rows:auto auto 1fr auto; grid-auto-rows:auto auto 1fr auto; row-gap:14px}
  .card{display:grid; grid-template-rows:subgrid; grid-row:span 4}
  /* The shared row-gap now spaces the four parts, so drop their own margins. */
  .card .card-num, .card h3{margin-bottom:0}
  .card .ticks{margin-top:0; align-self:start}
}
.card{
  position:relative; padding:28px 24px 26px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--shadow-sm);
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s;
  background:radial-gradient(500px 220px at var(--mx,50%) var(--my,0%), rgba(29,92,224,.09), transparent 70%);
  pointer-events:none;
}
.card:hover{border-color:rgba(29,92,224,.35); transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card:hover::before{opacity:1}
.card-num{
  font-family:var(--font-display); font-size:.76rem; letter-spacing:.2em; color:var(--accent);
  display:block; margin-bottom:12px;
}
.card h3{font-size:1.18rem; margin-bottom:10px}
.card p{color:var(--ink-soft); font-size:.9rem}
.card .ticks{margin-top:18px}

.ticks{margin-top:20px; display:grid; gap:9px}
.ticks li{position:relative; padding-left:22px; font-size:.86rem; color:var(--ink-soft)}
.ticks li::before{
  content:""; position:absolute; left:2px; top:.62em; width:9px; height:5px;
  border-left:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(130px,14vw,190px); gap:14px;
}
.gal-item{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--line); background:var(--panel-2); box-shadow:var(--shadow-sm);
  cursor:zoom-in; transition:transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
/* 4-column mosaic. Spans are chosen so each box lands near its photo's own
   aspect ratio -- a 2x1 tile is ~3:1 and letterboxes anything but a banner shot. */
.gal-item.is-hero, .gal-item.is-big{grid-column:span 2; grid-row:span 2}  /* ~1.44:1 */
.gal-item.is-tall{grid-row:span 2}                                        /* ~0.70:1 */
.gal-item.is-wide{grid-column:span 2}                                     /* ~3:1 banner */

.gal-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .4s;
}
.gal-item:hover, .gal-item:focus-visible{
  transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(29,92,224,.4);
}
.gal-item:hover img{transform:scale(1.05)}

.gal-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 18px 14px;
  font-family:var(--font-display); font-size:.88rem; font-weight:500; color:#fff;
  background:linear-gradient(to top, rgba(8,16,32,.88), rgba(8,16,32,.55) 45%, transparent);
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s var(--ease);
}
.gal-item:hover figcaption, .gal-item:focus-visible figcaption{opacity:1; transform:none}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(8,14,26,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:clamp(16px,4vw,56px); animation:lbIn .25s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{margin:0; display:grid; gap:14px; justify-items:center; max-width:100%; max-height:100%}
.lb-stage img{
  max-width:min(1100px,92vw); max-height:78vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.lb-stage figcaption{
  font-family:var(--font-display); font-size:.95rem; color:#e8eefb; text-align:center;
}
.lb-close, .lb-nav{
  position:absolute; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  transition:background .2s, transform .2s var(--ease); line-height:1;
}
.lb-close{top:18px; right:18px; width:44px; height:44px; font-size:1.7rem; padding-bottom:4px}
.lb-nav{top:50%; margin-top:-26px; width:52px; height:52px; font-size:2rem; padding-bottom:5px}
.lb-prev{left:clamp(10px,2vw,28px)}
.lb-next{right:clamp(10px,2vw,28px)}
.lb-close:hover, .lb-nav:hover{background:var(--accent); border-color:var(--accent); transform:scale(1.06)}
body.lb-open{overflow:hidden}

/* ---------- work / tracks ---------- */
.tracks{border-top:1px solid var(--line)}
.track{
  display:grid; grid-template-columns:auto minmax(150px,1fr) 1.4fr auto auto;
  align-items:center; gap:clamp(12px,2.4vw,28px);
  padding:16px 14px; border-bottom:1px solid var(--line); border-radius:12px;
  transition:background .25s, box-shadow .25s;
}
.track:hover{background:var(--panel); box-shadow:var(--shadow-sm)}
.track-play{
  width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease), border-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.track-play svg{grid-area:1/1; width:20px; height:20px}
/* Both icons are stroked with round joins/caps — no hard corners, and the play
   triangle sits on its own optical centre instead of being nudged by a margin. */
.track-play .ico-play path{fill:currentColor; stroke:currentColor; stroke-width:2.6; stroke-linejoin:round}
.track-play .ico-pause path{fill:none; stroke:currentColor; stroke-width:3.1; stroke-linecap:round}
.track-play .ico-pause{opacity:0}
.track-play:hover{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  transform:scale(1.06); box-shadow:var(--shadow-accent);
}
.track.is-playing .track-play{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:var(--shadow-accent);
}
.track.is-playing .ico-play{opacity:0}
.track.is-playing .ico-pause{opacity:1}
.track-meta strong{display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:600}
.track-meta span{font-size:.85rem; color:var(--ink-dim)}
/* Click or arrow-key anywhere along the waveform to scrub the track. */
.track-bars{
  display:flex; align-items:center; gap:2.5px; height:34px;
  cursor:pointer; border-radius:6px; touch-action:none;
}
/* Bars stretch to fill the strip, so what you see lines up with where you click. */
.track-bars i{display:block; flex:1 1 0; min-width:2px; border-radius:2px; background:var(--line-strong); height:20%; transition:background .15s}
.track-bars i.is-played{background:var(--accent)}
.track-bars:hover i:not(.is-played){background:rgba(16,32,60,.34)}
.track-bars:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.track.is-playing .track-bars i{animation:eq .9s ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.track-role{font-size:.82rem; color:var(--ink-dim); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.track-dur{font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.9rem}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:s}
.step{padding:30px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow-sm); position:relative}
.step-n{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-family:var(--font-display); font-weight:700;
  margin-bottom:18px;
}
.step h3{font-size:1.15rem; margin-bottom:10px}
.step p{color:var(--ink-soft); font-size:.92rem}

/* ---------- rates ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; align-items:start}
.plan{
  padding:34px 30px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--shadow-sm); position:relative;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.plan:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-md)}
.plan-featured{
  border-color:var(--accent);
  background:linear-gradient(170deg, rgba(29,92,224,.07), var(--panel) 55%);
  box-shadow:0 24px 60px -34px rgba(29,92,224,.75);
}
.plan-flag{
  position:absolute; top:-12px; left:30px; background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px;
}
.plan h3{font-size:1.15rem; color:var(--ink-soft); font-weight:500; letter-spacing:.02em}
.price{font-family:var(--font-display); font-size:clamp(2.2rem,4vw,2.9rem); font-weight:700; letter-spacing:-.04em; margin-top:10px}
.price span{font-size:.36em; font-weight:500; color:var(--ink-dim); letter-spacing:0}
.plan-sub{color:var(--ink-dim); font-size:.86rem; margin-top:4px}
.plan .ticks{margin:24px 0 28px}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

/* The three reviews are very different lengths — hand the quote and the name to a
   shared track set so every attribution sits on the same line. */
@supports (grid-template-rows: subgrid){
  /* auto, not 1fr — fr tracks size equally across the whole grid, which would stretch
     a one-line quote on its own row to match the longest one elsewhere. */
  .quotes{grid-template-rows:auto auto; grid-auto-rows:auto; row-gap:20px}
  .quote{display:grid; grid-template-rows:subgrid; grid-row:span 2}
  /* Short quotes sit centred in the shared block rather than stranded at the top. */
  .quote blockquote{align-self:center}
  .quote figcaption{margin-top:0}
}
.quote{
  margin:0; padding:32px 28px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--shadow-sm); position:relative;
}
.quote::before{
  content:"“"; position:absolute; top:6px; right:22px; font-family:var(--font-display);
  font-size:5rem; line-height:1; color:var(--accent); opacity:.20;
}
.quote blockquote{margin:0; font-size:1.02rem; color:var(--ink)}
.quote figcaption{margin-top:20px; font-size:.83rem; color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase}

/* ---------- booking ---------- */
.section-book{
  background:
    radial-gradient(820px 460px at 85% 0%, rgba(29,92,224,.14), transparent 62%),
    radial-gradient(620px 420px at 5% 100%, rgba(63,154,224,.16), transparent 62%),
    var(--bg);
  border-top:1px solid var(--line);
}
.book-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:start}
.book-copy h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.contact-list{margin-top:38px; display:grid; gap:20px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.contact-list .ci{
  width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1rem;
}
.contact-list strong{display:block; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); font-weight:500}
.contact-list a, .contact-list div span{color:var(--ink); font-size:.98rem}
.contact-list a:hover{color:var(--accent)}

.book-form{
  padding:clamp(26px,3.4vw,38px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--shadow-md); display:grid; gap:18px;
}
.field{display:grid; gap:7px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
.field abbr{color:var(--accent); text-decoration:none}
.field input, .field select, .field textarea{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:.95rem; transition:border-color .2s, background .2s, box-shadow .2s; width:100%;
}
.field textarea{resize:vertical; min-height:118px; font-family:inherit}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); outline:none; background:#fff; box-shadow:0 0 0 3px rgba(29,92,224,.14);
}
.field input::placeholder, .field textarea::placeholder{color:#9aa6ba}
.field.has-error input, .field.has-error textarea{border-color:#d92d20; background:#fff6f5}
.err{font-size:.8rem; color:#b42318; min-height:0}
.form-status{font-size:.9rem; margin-top:2px; min-height:1.2em}
.form-status.ok{color:#067647}
.form-status.bad{color:#b42318}
.form-small{font-size:.78rem; color:var(--ink-dim)}

/* ---------- footer ---------- */
.site-footer{background:var(--panel); border-top:1px solid var(--line); padding-top:clamp(50px,6vw,80px)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,48px)}
.footer-brand p{color:var(--ink-soft); font-size:.92rem; margin-top:16px; max-width:34ch}
.socials{display:flex; flex-wrap:wrap; gap:16px; margin-top:22px}
.socials a{font-size:.85rem; color:var(--ink-dim); transition:color .2s}
.socials a:hover{color:var(--accent)}
.footer-col{display:grid; gap:9px; align-content:start}
.footer-col h4{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin-bottom:6px}
.footer-col a, .footer-col p{color:var(--ink-dim); font-size:.9rem}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:clamp(40px,5vw,64px); padding-block:24px; border-top:1px solid var(--line);
  color:var(--ink-dim); font-size:.84rem;
}
.footer-links a:hover{color:var(--accent)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1150px){
  /* The credit column is a fixed-width nowrap block on every row — ~220px in English
     and Russian, ~256px in Latvian. Below this the longest track title starts
     wrapping and that row grows taller than its neighbours. Since the credit repeats
     identically down the list, the title and the scrubber are the better use of the
     space. The threshold is set for the widest translation, not the English one. */
  .track-role{display:none}
}
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  /* Three price cards in two columns would leave a hole — widen the last one instead.
     Squeezing all three in is not an option: the mix range wraps below ~290px. */
  .plans{grid-template-columns:repeat(2,1fr)}
  .plan:last-child{grid-column:span 2}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .quote:last-child{grid-column:span 2}

  /* Two columns. Row spans are dropped and each photo sets its own height from an
     aspect ratio close to its source, so nothing crops to a letterbox strip.
     Only is-hero and is-wide keep the full width; the counts stay even, no holes. */
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:auto}
  .gal-item, .gal-item.is-big, .gal-item.is-tall{grid-column:span 1; grid-row:auto}
  .gal-item.is-hero, .gal-item.is-wide{grid-column:span 2; grid-row:auto}
  .gal-item img{aspect-ratio:4/3}
  .gal-item.is-tall img{aspect-ratio:3/4}
  .gal-item.is-hero img{aspect-ratio:3/2}
  .gal-item.is-wide img{aspect-ratio:16/9}
  .footer-grid{grid-template-columns:1fr 1fr}
  .book-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .menu-toggle{display:grid; margin-left:auto}
  .nav{margin-left:0}
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); box-shadow:0 18px 40px -26px rgba(16,32,60,.5);
    padding:12px var(--pad) 26px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease);
  }
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav > a{padding:15px 0; font-size:1.05rem; border-bottom:1px solid var(--line)}
  .nav > a::after{display:none}
  .nav-cta{margin:20px 0 0; border-bottom:none !important; justify-content:center}
  /* In the drawer the switcher becomes its own centred row between the links and
     the call to action. The last link already draws the divider above it. */
  .lang{justify-content:center; gap:6px; margin-top:14px; padding-left:0; border-left:none}
  .lang a{padding:10px 18px; font-size:.92rem; border-radius:7px; transition:color .2s, background .2s}
  .lang a:hover{background:rgba(16,32,60,.06)}
  .lang a.is-active{background:var(--accent-soft)}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .track{
    grid-template-columns:auto 1fr auto; gap:14px; padding:14px 8px;
    grid-template-areas:"play meta dur" "bars bars bars"; row-gap:10px;
  }
  .track-play{grid-area:play}
  .track-meta{grid-area:meta}
  .track-dur{grid-area:dur}
  .track-bars{grid-area:bars; height:28px}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan:last-child{grid-column:auto}
  .quotes{grid-template-columns:1fr}
  .quote:last-child{grid-column:auto}
  .gallery{grid-template-columns:1fr; grid-auto-rows:auto; gap:12px}
  .gal-item, .gal-item.is-hero, .gal-item.is-big,
  .gal-item.is-wide, .gal-item.is-tall{grid-column:auto; grid-row:auto}
  .gal-item img, .gal-item.is-hero img, .gal-item.is-wide img{aspect-ratio:4/3}
  .gal-item.is-tall img{aspect-ratio:3/4}
  .gal-item figcaption{opacity:1; transform:none}
  .lb-nav{width:44px; height:44px; font-size:1.6rem; margin-top:-22px}
  .hero{min-height:auto; padding-block:120px 70px}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%}
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}
@media print{
  .site-header,.hero-wave,.marquee,.scroll-hint,.book-form,.lightbox{display:none}
  body{background:#fff; color:#000}
  .card,.plan,.quote,.step,.gal-item{box-shadow:none}
}