/* ==========================================================================
   GV Capital · Brand Guidelines
   ux-pass.css
   იტვირთება ბოლოს — ანაცვლებს section-snap.css-ისა და story.css-ის იმ
   წესებს, რომლებიც კითხვას უშლის ხელს. თითოეული ბლოკი ცალკე ეხსნება.

   მოხსნა: წაშალე <link> index.html-იდან და build-story.cjs-ის head-იდან.
   სხვა ფაილს არაფერი შეცვლია.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. სქროლი აღარ ეწინააღმდეგება მკითხველს
   ანაცვლებს: section-snap.css → @media (min-width:900px) and (min-height:640px)

   იქ დგას scroll-snap-type: y mandatory + scroll-snap-stop: always.
   „always" ბრაუზერს უკრძალავს სექციის გამოტოვებას — ერთი მოძრაობით ორ
   სექციას ვერასდროს გაივლი. ეს მუშაობს, როცა ყველა სექცია ზუსტად ერთი
   ეკრანია; აქ კი სექციები 566px-დან 4203px-მდეა. გრძელ სექციაში ეს
   გამომწყვდევის შეგრძნებას იძლევა, მოკლეებში კი — აწყდომის.

   proximity ინარჩუნებს მაგნიტს იქ, სადაც სექცია ისედაც ეკრანის ტოლია,
   და უშვებს იქ, სადაც არა.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (min-height: 640px) {
  html {
    scroll-snap-type: y proximity;
  }

  main > section[id],
  .st-page > section[id],
  .st-color-pairings,
  .gi-system,
  .st-context-block {
    scroll-snap-stop: normal;
  }
}


/* --------------------------------------------------------------------------
   2. სად ვარ — სექციის სათაური ზედა ზოლად
   ორსვეტიანი ვარიანტი მოხსნილია: ის კონტენტს სიგანეს აჭრიდა.
   ამის ნაცვლად სათაური ადგილზე რჩება, ოღონდ ეკრანის თავში, სრული სიგანით
   და დაბალ ზოლად — ინფორმაცია იმავე სიგანეზე რჩება, კონტექსტი კი არ იკარგება.

   ღირებულება: ~50px ვერტიკალი. მოგება: Applications-ში (4000px) 1500 პიქსელს
   რომ ჩამოხვალ, ისევ ხედავ რომელ სექციაში ხარ.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {

  .story-edition .st-section-head {
    position: sticky;
    top: 0;
    z-index: 20;                 /* რელსი 45-ზეა — მასზე ვერ გადავა */
    display: flex;
    align-items: baseline;
    gap: 6px 18px;
    flex-wrap: wrap;
    background: #fff;
    padding: 13px 3% 11px;
    border-bottom: 1px solid rgba(10, 102, 112, 0.14);
    margin-bottom: clamp(16px, 2vh, 26px);
  }

  /* story.css-ში სათაური ზოგან <div>-შია გახვეული — flex-ს რომ დაემორჩილოს */
  .story-edition .st-section-head > div {
    display: contents;
  }

  /* ნომერი და სექციის სახელი რელსზე უკვე წერია, სათაურიც იქვე გვერდითაა —
     ზოლში მესამედ აღარ მეორდება. 1100px-ზე ქვემოთ (სადაც რელსი იმალება)
     კიკერი რჩება. */
  .story-edition .st-section-head .st-kicker {
    display: none;
  }

  .story-edition .st-section-head .st-headline {
    font-size: clamp(20px, 1.75vw, 27px);
    line-height: 1.2;
    flex: 0 0 auto;
  }

  /* აღწერა იმავე ზოლში; ვიწრო ეკრანზე იკვეცება, არ გადადის ახალ სტრიქონზე */
  .story-edition .st-section-head > p {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------------
   3. დროფდაუნები გამოიყურება როგორც დროფდაუნი
   ანაცვლებს: story.css → .st-notes (border-top/bottom)

   დეკში 8 <details>-ია და მათ უკან ~3000 სიმბოლოა — მათ შორის ლოგოს
   გამოყენების წესები (დამცავი სივრცე, მინიმალური ზომა, უცვლელი ფორმა),
   ანუ ყველაზე სამუშაო შინაარსი. ახლა ისინი ორი თხელი ხაზით გამოიყოფა
   და ტექსტის მწკრივად იკითხება.

   „+" ნიშანი მათივე მარკაპშია და [open]-ზე ბრუნავს — ხელუხლებელია.
   -------------------------------------------------------------------------- */

.st-notes {
  border: 1px solid rgba(10, 102, 112, 0.26);
  border-radius: 12px;
  padding: 0 20px;
  background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.st-notes:hover {
  border-color: rgba(10, 102, 112, 0.50);
  background: #F5FAFB;
}

.st-notes > summary {
  font-size: 14px;
  color: var(--emerald, #0a6670);
}

.st-notes > summary > span {
  font-size: 25px;
  color: var(--emerald, #0a6670);
  transition: transform 0.2s ease;
}

.st-notes[open] {
  border-color: rgba(10, 102, 112, 0.45);
  background: #fff;
}

.st-notes[open] > summary {
  border-bottom: 1px solid var(--line, rgba(22, 35, 42, 0.12));
}

@media (prefers-reduced-motion: reduce) {
  .st-notes,
  .st-notes > summary > span {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   4. სექციებს შორის საზღვარი
   როცა სექცია ერთ ეკრანს სცდება, შემდეგი მაშინვე იწყება და ორი სექცია
   ერთ ნაკადად იკითხება. თხელი ხაზი + ოდნავ მეტი ჰაერი საზღვარს აჩენს.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .story-edition .st-section {
    padding-block: clamp(34px, 5vh, 64px);
  }

  .story-edition .st-section + .st-section {
    border-top: 1px solid rgba(10, 102, 112, 0.14);
  }
}

/* მობილურზე story.css-ის საკუთარი წესები რჩება ხელუხლებელი
   (იქ .st-section-ს padding: 0 და display: block აქვს). */


/* --------------------------------------------------------------------------
   5. მედია — სრული სიგანე, ორიგინალი პროპორციით
   ანაცვლებს: media-fit.css

   media-fit.css სიმაღლეს კეტავდა (clamp(300px,46vh,470px)) და სიგანეს
   პროპორციიდან იღებდა — ამიტომ 16:9 ფილმი 1255px-იან სვეტში მხოლოდ 644px
   იყო და გვერდებზე 306px თეთრი რჩებოდა.

   აქ სიგანე ივსება ბოლომდე, სიმაღლე კი თავად პროპორციიდან მოდის.
   წყვილში სვეტების სიგანე ვიდეოს ორიგინალ პროპორციას მიჰყვება:
   16:9 განიერია, 3:4 ვიწრო, სიმაღლე კი ორივეს ერთი — flex-grow-ს
   თავად --ar-იდან ვთვლით, ამიტომ ახალი აქტივიც ავტომატურად ჯდება.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  /* ცალკე მდგომი მედია — მთელ სიგანეზე, პროპორცია ხელუხლებელი */
  .st-context-single {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin-inline: 0;
    align-self: stretch;
    aspect-ratio: var(--ar);
  }

  /* წყვილი — სიგანეები პროპორციის მიხედვით, სიმაღლე საერთო */
  .st-context-pair {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: stretch;
    gap: 18px;
  }

  .st-context-pair > .st-media {
    flex: calc(var(--ar)) 1 0%;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: var(--ar);
  }

  /* ოფისის წყვილი — სიმაღლე გაზრდილია (510px), მარცხენა ვიდეო პროპორციულად გაზრდილი (~381px), მარჯვენა ფოტო ავსებს დარჩენილ სიგანეს (~741px) */
  .st-office-feature {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 18px;
    height: 510px;
  }

  .st-office-feature > .st-office-motion {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 1744 / 2336;
  }

  .st-office-feature > .st-office-still {
    flex: 1 1 0%;
    height: 100%;
    width: auto;
    min-width: 0;
    aspect-ratio: auto;
  }

  /* ჩარჩო აქტივის პროპორციაა, ამიტომ cover არაფერს ჭრის */
  .st-context-single video,
  .st-context-single img,
  .st-context-pair > .st-media video,
  .st-context-pair > .st-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .st-office-feature > .st-office-motion video,
  .st-office-feature > .st-office-motion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .st-office-feature > .st-office-still img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 19% center;
  }
}

/* --------------------------------------------------------------------------
   6. კორპორატიული ვიტრინა — საქაღალდის ვიდეო სრულ სიმაღლეზე
   „ONE IDENTITY. EVERY DETAIL." პანელი მოხსნილია, ამიტომ მარჯვენა სვეტში
   დარჩენილი ვიდეო ორივე რიგს იკავებს.
   -------------------------------------------------------------------------- */

.st-corporate-showcase > .st-media:not(.st-business-card-motion) {
  grid-row: 1 / -1;
}

/* --------------------------------------------------------------------------
   7. რელსის ლოგოს ჰოვერი — ლოგო ღილაკი არ არის, რეაქცია არ სჭირდება
   -------------------------------------------------------------------------- */

nav.gv-rail .gv-rail-brand:hover {
  color: #fff;              /* mint-ზე გადასვლა აღარაა */
  background: none;         /* თეთრი ფონის ნათება აღარაა */
  transform: none;          /* scale(1.04) აღარაა */
}

/* --------------------------------------------------------------------------
   8. Favicon-ის ნიმუშები — ნიშანი ფილაში მაქსიმალურად დიდი
   ფილების ზომა (96/58/38) უცვლელია, იცვლება მხოლოდ ნიშნის შევსება.
   -------------------------------------------------------------------------- */

.cm-favicon-sizes span:first-child img  { width: 74px; height: auto; }
.cm-favicon-sizes span:nth-child(2) img { width: 46px; height: auto; }
.cm-favicon-sizes span:nth-child(3) img { width: 30px; height: auto; }

/* --------------------------------------------------------------------------
   9. Aktiv Grotesk Extended Black (900)
   Adobe-ს ვებ-პროექტში დამატებულია სრული დიაპაზონი 100–900 + დახრილები.

   ორი რამ, რაც კოდში უნდა ჩანდეს:

   1) Black მხოლოდ "aktiv-grotesk-extended"-შია (Adobe-დან). ლოკალური
      ოჯახი "Aktiv" 400–700-ია, ამიტომ მხოლოდ font-weight:900 არ კმარა —
      ოჯახიც უნდა გადაერთოს, თორემ ბრაუზერი 700-ს გაასქელებს ხელოვნურად.

   2) ქართულს Black არ აქვს — "aktiv-grotesk-georgian" 400 და 700-ია.
      ამიტომ 900 მხოლოდ ლათინურ display-ლოკაპებზეა და ორენოვან
      სათაურებზე არასდროს: ქართული 700-ზე ჩამოვარდებოდა და წყვილი
      თვალით აეწყობოდა.
   -------------------------------------------------------------------------- */

/* MAKES SPACE — ერთადერთი წმინდა ლათინური display-ლოკაპი დეკში
   (მარკაპში lang="en"-ითაა მონიშნული) */
.sg-voice .st-manifesto .sg-concept {
  font-family: "aktiv-grotesk-extended", Aktiv, sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;   /* Black უფრო ფართოა — ტრეკინგი ოდნავ იკუმშება */
}

.sg-concept > span {
  font-weight: 700;          /* ზედა ხაზი „GV CAPITAL" Bold-ზე რჩება */
}

/* --------------------------------------------------------------------------
   10. რელსის ლოგო — რაც შეიძლება დიდი
   რელსის შიდა სიგანე 88px-ია (104 − 8+8 padding), ლოგო კი 50px-ზე იდგა.
   ახლა ბრენდის ბლოკის მთელ სიგანეს იკავებს.
   -------------------------------------------------------------------------- */

nav.gv-rail .gv-rail-brand {
  /* ნიშნის მარჯვენა კიდე V-ის დიაგონალით მთავრდება და ოპტიკურად უფრო
     ახლოს ჩანს კიდესთან, ვიდრე მარცხენა სწორი ხაზი — 4px ამას ასწორებს */
  padding-right: 4px;
}

nav.gv-rail .gv-rail-brand .logo {
  width: 100%;
  max-width: 88px;
}

/* --------------------------------------------------------------------------
   11. კომპაქტური ნიშანი — მხოლოდ favicon
   „01 / PRIMARY MASTER" და „02 / REVERSE" ბარათები მოხსნილია: GV-ის ნიშანი
   ლოგოს ძირითადი ვერსია არ არის — მთავარი ნიშანი სრული GV CAPITAL-ია,
   კომპაქტური კი მხოლოდ favicon-ისა და მცირე ფორმატისთვისაა.
   -------------------------------------------------------------------------- */

.cm-showcase {
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   12. ლოგოს წესები — ორი ცალკე სექცია
   „ლოგოს გამოყენების წესები" დროფდაუნი დაიშალა:
   02.1 დამცავი სივრცე · 02.2 მინიმალური ზომა + უცვლელი ფორმა.
   -------------------------------------------------------------------------- */

/* მინიმალური ზომა ზემოთ, დარღვევების ბადე ქვემოთ — ორივე სრულ სიგანეზე.
   გვერდიგვერდ რომ იდგა, ფილები 100px-მდე იკუმშებოდა და დარღვევა აღარ ჩანდა. */
#logo-rules .st-note-columns {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vh, 30px);
  align-items: start;
}

#logo-clearspace .st-clearspace-rule,
#logo-rules .st-minimum-size {
  max-width: none;
}

/* --------------------------------------------------------------------------
   13. დამცავი სივრცის დიაგრამა
   რეფერენსის ლოგიკა: ლოგო თეთრზე, გარშემო შეფერილი ზოლი = დამცავი სივრცე,
   ზოლს გარეთ წერტილოვანი მიმმართველები, ოთხივე კუთხეში X-ის ნიშნული.

   წესი: X = ლოგოს სიმაღლის ¼.
   ლოგოს ვექტორი 200.58 × 60.95 → სიმაღლე = სიგანის 30.3869%,
   ანუ X = სიგანის 7.5967%. კოდში ეს პირდაპირ წესითაა ჩაწერილი,
   რომ ციფრი აღარ დაგვჭირდეს ხელახლა გამოთვლა.
   -------------------------------------------------------------------------- */

.st-clearspace-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(68px, 9.5vh, 92px);
  padding: clamp(46px, 8vh, 88px) 18px clamp(34px, 5vh, 58px);
  background: #fff;
  border: 1px solid rgba(10, 102, 112, .12);
  border-radius: 12px;
}

.st-clearspace-frame {
  --logo-w: min(440px, 54cqw);
  --logo-h: calc(var(--logo-w) * .303869);   /* 60.95 / 200.58 */
  --x: calc(var(--logo-h) / 4);              /* X = ლოგოს სიმაღლის ¼ */
  position: relative;
  width: max-content;
  padding: var(--x);
  background: color-mix(in srgb, var(--emerald, #0a6670) 9%, #fff);  /* დამცავი ზოლი */
}

/* ლოგოს არე — თეთრი */
.st-clearspace-frame::before {
  content: '';
  position: absolute;
  inset: var(--x);
  background: #fff;
}

/* წერტილოვანი მიმმართველები ზოლს გარეთ */
.st-clearspace-frame::after {
  content: '';
  position: absolute;
  inset: calc(var(--x) * -1.25);
  border: 1px dotted rgba(10, 102, 112, .40);
  pointer-events: none;
}

.st-clearspace-frame > .logo {
  position: relative;
  display: block;
  width: var(--logo-w);
  z-index: 1;
}

/* X ოთხივე კუთხეში, ზოლის შუაგულში */
.st-x {
  position: absolute;
  z-index: 2;
  font: 700 10px/1 var(--font-text-latin, Aktiv, sans-serif);
  letter-spacing: .04em;
  color: var(--emerald, #0a6670);
}

.st-x-top    { top: calc(var(--x) / 2); left: calc(var(--x) / 2);  transform: translate(-50%, -50%); }
.st-x-right  { top: calc(var(--x) / 2); right: calc(var(--x) / 2); transform: translate(50%, -50%); }
.st-x-bottom { bottom: calc(var(--x) / 2); left: calc(var(--x) / 2);  transform: translate(-50%, 50%); }
.st-x-left   { bottom: calc(var(--x) / 2); right: calc(var(--x) / 2); transform: translate(50%, 50%); }

/* X = ლოგოს სიმაღლის ¼ */
.st-x-definition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(8px, 1.5vh, 18px);
  max-width: 560px;
  text-align: center;
}

.st-x-definition > b {
  font: 700 14px/1 var(--font-text-latin, Aktiv, sans-serif);
  color: var(--emerald, #0a6670);
}

.st-x-definition > .st-x-arrow {
  position: relative;
  display: block;
  width: 44px;
  height: 1px;
  background: rgba(10, 102, 112, .45);
}

.st-x-definition > .st-x-arrow::before,
.st-x-definition > .st-x-arrow::after {
  content: '';
  position: absolute;
  top: -3.5px;
  width: 1px;
  height: 8px;
  background: rgba(10, 102, 112, .45);
}

.st-x-definition > .st-x-arrow::before { left: 0; }
.st-x-definition > .st-x-arrow::after  { right: 0; }

.st-x-definition > strong {
  font-family: "aktiv-grotesk-extended", Aktiv, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--midnight, #16232a);
}

.st-x-definition > p {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.st-x-definition > p b { color: var(--emerald, #0a6670); }

/* --------------------------------------------------------------------------
   14. სათაურები — Aktiv Grotesk Extended Black (900)
   ოჯახი აუცილებლად "aktiv-grotesk-extended"-ია (Adobe), რადგან ლოკალურ
   "Aktiv"-ს 900 არ აქვს და ბრაუზერი 700-ს ხელოვნურად გაასქელებდა.

   ქართული სათაური (მაგ. „ვერბალური იდენტობა") 700-ზე რჩება — Adobe-ს
   კიტში aktiv-grotesk-georgian მხოლოდ 400 და 700-ია. ეს განზრახ არის:
   ხელოვნური გასქელება ასოებს ამახინჯებს.
   -------------------------------------------------------------------------- */

.story-edition .st-section-head .st-headline,
.story-edition .st-section-head h2 {
  font-family: "aktiv-grotesk-extended", Aktiv, sans-serif;
  font-weight: 900;
  letter-spacing: -.045em;
}

/* --------------------------------------------------------------------------
   15. Foundation — მარჯვენა სვეტი ფოტოა
   „ბრენდის არქიტექტურის" სქემა მოხსნილია; მარცხნივ ტექსტი, მარჯვნივ სივრცე.
   ფოტო სვეტს მთლიანად ავსებს, პროპორცია cover-ით ინარჩუნება.
   -------------------------------------------------------------------------- */

/* ჩარჩო არ არსებობს — მხოლოდ კვადრატული ფოტო.
   ადრე figure-ს ჰქონდა mist ფონი და stretch, ამიტომ სურათის გვერდებზე
   ღია ზოლი რჩებოდა. */
.st-intro-figure {
  margin: 0;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}

/* კვადრატი, რომლის ზომასაც სიმაღლე კარნახობს — ასე სექცია ერთ ეკრანზე რჩება */
.st-intro-figure img {
  width: auto;
  max-width: 100%;
  height: min(54svh, 560px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

/* --------------------------------------------------------------------------
   16. Logo Misuse — რას არ ვუშვებთ
   თითოეულ ფილაში იგივე SVG დგას, დარღვევას CSS აჩვენებს (ტრანსფორმაცია,
   გრადიენტი, ფილტრი). ანუ ახალი, „გაფუჭებული" არტვორკი არსად ინახება და
   ვერასდროს აგერევა ნამდვილ ლოგოში.
   -------------------------------------------------------------------------- */

.lm-block { min-width: 0; }

.lm-lede {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.lm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vh, 20px);
  margin-top: clamp(12px, 1.8vh, 20px);
}

.lm-tile { margin: 0; min-width: 0; }

.lm-art {
  display: grid;
  place-items: center;
  /* პროპორცია, არა ფიქსირებული სიმაღლე: ფილა სვეტის სიგანეს მიჰყვება,
     ანუ ლოგოსა და ჰაერის თანაფარდობა ყველა ზომაზე ერთი რჩება */
  /* width აუცილებელია: aspect-ratio-ს ორივე მხარეს თუ თავისუფალი ხელი აქვს,
     დაბალ რიგში ბრაუზერი სიგანეს იკლებს და ფილის მარჯვნივ ჰაერი რჩება. */
  width: 100%;
  aspect-ratio: 1.9;
  height: auto;
  padding: clamp(12px, 1.5vw, 20px);
  background: var(--mist, #e4eef0);
  border-radius: 10px;
  overflow: hidden;
  color: var(--emerald, #0a6670);
}

/* ადრე min(112px, 62%) იდგა — 290px-იან ფილაში ლოგო 38%-ს იკავებდა და
   ნიმუში პატარა ლაქად ჩანდა ღია ყუთის შუაში. ახლა ფილას ავსებს. */
.lm-art > .logo,
.lm-art > img { width: 78%; max-width: none; }

/* გადაბრუნებულსა და გაწელილს მეტი ადგილი სჭირდება, თორემ კიდეს ეხება */
.lm-art > .lm-rotate  { width: 70%; }
.lm-art > .lm-stretch { width: 58%; }

.lm-tile > b {
  display: block;
  margin: 9px 0 3px;
  font: 700 11px/1 var(--font-text-latin, Aktiv, sans-serif);
  letter-spacing: .1em;
  color: var(--orange, #ff5804);
}

.lm-tile > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- დარღვევები --- */

.lm-rotate  { transform: rotate(-12deg); }
.lm-stretch { transform: scaleX(1.45); }

.lm-gradient {
  background: linear-gradient(115deg, #0a6670, #7fd0d4 55%, #ff5804);
}

.lm-colour { background: #ff5804; }

/* ვერტიკალური გაყოფა ნიშანსა და სიტყვას შორის — ასე ცხადად ჩანს,
   რომ ლოგო ორ ფერადაა გაშლილი (ჰორიზონტალურად ორი მუქი ფერი არ იკითხებოდა) */
.lm-split {
  background: linear-gradient(180deg, #0a6670 0 62%, #ff5804 62% 100%);
}

.lm-shadow { filter: drop-shadow(0 6px 10px rgba(22, 35, 42, .55)); }

.lm-retyped {
  font: 700 clamp(15px, 1.5vw, 21px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
  color: var(--emerald, #0a6670);
}

@media (max-width: 1100px) {
  .lm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .lm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   17. EMAIL SIGNATURE — სამივე ერთად, MAKE IT YOURS გამოკვეთილად
   სექცია 1568px იყო: მთავარი ხელმოწერა 658px, ვარიანტები 462px, პერსონალიზაცია
   კი დაკეცილ ზოლად. ახლა სცენები დაბალია, სამივე ერთ ეკრანზე ჯდება და
   პერსონალიზაცია ღია, ცალკე ბლოკად დგას.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  /* სამივე ხელმოწერა ერთ ეკრანზე: მთავარი მარცხნივ, ორი ვარიანტი მარჯვნივ */
  .es-system {
    display: grid;
    grid-template-columns: 1.58fr 1fr;
    column-gap: clamp(20px, 2.2vw, 34px);
    row-gap: clamp(20px, 2.6vh, 34px);
    align-items: stretch;
  }

  .es-system > .es-header,
  .es-system > .es-personalise { grid-column: 1 / -1; }

  .es-primary  { grid-column: 1; margin: 0; }
  /* ორი ვარიანტი მარჯვენა სვეტში, მთავარის სიმაღლეზე გაწელილი:
     02 განიერი და დაბალი, 03 ვიწრო და მაღალი — თავიანთი პროპორციებით */
  .es-system > .es-variants {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(12px, 1.4vw, 20px);
    align-content: stretch;
    margin: 0;
    height: 100%;
  }

  .es-variant { margin: 0; }

  .es-primary .es-primary-stage { max-height: min(46svh, 470px); overflow: hidden; }
  .es-primary .es-primary-art img { width: 100%; height: auto; }

  .es-variant { display: flex; flex-direction: column; }

  .es-variant .es-variant-stage {
    flex: 1 1 auto;
    max-height: none;
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .es-variant .es-variant-stage img { max-height: 100%; width: auto; max-width: 100%; }
}

/* --- MAKE IT YOURS ---
   email-signature.css-ში სელექტორები `.es-system .es-personalise>summary`-ია
   (0,3,0), ამიტომ აქაც იგივე სიმძლავრე სჭირდება. */

.es-system .es-personalise {
  margin-top: clamp(22px, 3vh, 38px);
  border: 1px solid rgba(10, 102, 112, .32);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.es-system .es-personalise > summary {
  min-height: 0;
  padding: clamp(16px, 2vh, 22px) clamp(18px, 2vw, 26px);
  background: var(--emerald, #0a6670);
  color: #fff;
}

.es-system .es-personalise > summary > span:first-child {
  font-family: "aktiv-grotesk-extended", Aktiv, sans-serif;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: .01em;
}

.es-system .es-personalise summary small {
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, .82);
}

/* + და − ნიშანი ზურმუხტისფერი იყო ზურმუხტისფერზე, ანუ უხილავი */
.es-system .es-personalise summary > span:last-child,
.es-system .es-personalise[open] summary > span:last-child::after {
  color: #fff;
}

.es-system .es-personalise > .es-editor {
  padding: clamp(20px, 3vh, 32px) clamp(18px, 2vw, 26px);
}

/* შევსებისას შედეგი იქვე ჩანს — ველები მარცხნივ, ცოცხალი პრევიუ მარჯვნივ.
   პრევიუ მიყოლებულია, ანუ ველებზე გადასვლისასაც ეკრანზე რჩება. */
@media (min-width: 1100px) {
  .es-system .es-personalise > .es-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    column-gap: clamp(22px, 2.6vw, 40px);
    row-gap: 18px;
    align-items: start;
  }

  .es-system .es-live {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 92px;
  }

  .es-system .es-fields,
  .es-system .es-editor-action,
  .es-system .es-status { grid-column: 1; }
}

.es-system .es-live {
  display: block;
  padding: 14px;
  background: var(--mist, #e4eef0);
  border-radius: 10px;
}

.es-system .es-live-label {
  display: block;
  margin-bottom: 10px;
  font: 700 9.5px/1 var(--font-text-latin, Aktiv, sans-serif);
  letter-spacing: .12em;
  color: var(--emerald, #0a6670);
}

.es-system .es-live img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}

/* --------------------------------------------------------------------------
   18. ერთი სქროლი — ერთი გზავნილი
   ადრე მაგნიტი გამოვრთე, რადგან სექციები 566-დან 4203 პიქსელამდე იყო და
   „ერთი სექცია = ერთი ეკრანი" არ სრულდებოდა. ახლა პრობლემა სხვაგვარად იხსნება:
   მაგნიტი ბრუნდება, მაგრამ გაჩერება ენიჭება არა მხოლოდ სექციას, არამედ
   თითოეულ დამოუკიდებელ ბლოკს. ანუ გრძელი სექცია რამდენიმე გაჩერებად იშლება
   და ეკრანზე ყოველთვის ერთი გზავნილია.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (min-height: 640px) {
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }

  /* 1. სექცია — ძირითადი გაჩერება */
  main > section[id],
  .st-page > section[id] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
  }

  /* 2. ბლოკები, რომლებიც თავისთავად ცალკე გზავნილია.
        კლასი გაორმაგებულია სპეციფიკურობისთვის: section-snap.css-ის
        `section[id] section[id]:not(.gi-system)` და icon-system.css-ის
        `.gi-system.gi-library` სხვაგვარად ბიჯავს. */
  .st-context-block.st-context-block,
  .wf-system.wf-system,
  .es-system.es-system,
  .cm-system.cm-system,
  .gi-system.gi-system,
  .sf-studio.sf-studio,
  .lm-block.lm-block,
  .st-color-pairings.st-color-pairings,
  .st-corporate-showcase.st-corporate-showcase {
    /* section-snap.css-ის `section[id] section[id]:not(.gi-system)` არის
       (0,3,2) — კლასის გაორმაგება არ კმარა, ამიტომ !important. */
    scroll-snap-align: start !important;
    scroll-snap-stop: normal;      /* სწრაფი გადაფურცვლა შესაძლებელია */
    scroll-margin-top: 66px;       /* მიყოლებული ზოლის ქვემოთ დაჯდეს */
  }

  /* 3. სექციის პირველი ბლოკი ცალკე გაჩერება არ უნდა იყოს —
        თორემ სექციის დასაწყისი და ის ერთმანეთს 100-500px-ში მოსდევს
        და ერთ ეკრანზე ორი მაგნიტი ხვდება. */
  #graphics .sf-studio.sf-studio,
  #corporate .st-corporate-showcase.st-corporate-showcase,
  #logo-clearspace .st-clearspace-diagram,
  #logo-rules .lm-block.lm-block,
  #applications > .st-context-block.st-context-block:first-of-type {
    scroll-snap-align: none !important;
  }
}


/* --------------------------------------------------------------------------
   19. ზოლი რბილად იკეცება
   სექციის სათაური სრული ზომით გხვდება, შემდეგ სქროლისას თავისით იკუმშება
   და კონტენტს ეკრანს უთმობს. ეს სქროლზე მიბმული ანიმაციაა (scroll-driven),
   ანუ JS არ მუშაობს და ხელით არაფერი ითვლება — ბრაუზერი თავად აკავშირებს
   ანიმაციის პროგრესს სექციის პოზიციასთან.
   -------------------------------------------------------------------------- */

/* ზოლი იკეცება მაშინ, როცა ის მართლა „მიეკრა" ეკრანის თავს.
   sticky-მდგომარეობას CSS ვერ ხედავს, ამიტომ head-fold.js სვამს კლასს
   is-stuck; აქ მხოლოდ გარდამავალია აღწერილი. */

.story-edition .st-section-head {
  transition: padding-block .28s cubic-bezier(.22,.61,.36,1);
}

.story-edition .st-section-head > p {
  transition: opacity .24s ease, max-height .28s cubic-bezier(.22,.61,.36,1);
  max-height: 3em;
}

@media (min-width: 1100px) {
  .story-edition .st-section-head.is-stuck {
    padding-block: 7px 6px;
  }

  .story-edition .st-section-head.is-stuck > p {
    opacity: 0;
    max-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-edition .st-section-head,
  .story-edition .st-section-head > p { transition: none; }
}

/* --------------------------------------------------------------------------
   20. ვერტიკალური ბიუჯეტი — რომ გაჩერება ეკრანს არ სცდებოდეს
   ერთი ეკრანი = ზოლი (≈57px) + სექციის ჰაერი + მედია + წარწერა.
   თუ მედია 74svh-ია, ჯამი უკვე 100svh-ს სცდება და მაგნიტი ორ გაჩერებას
   აჩვენებს ერთად. ამიტომ მედიას 62svh ეჭრება და ჰაერი მცირდება.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (min-height: 640px) {
  .story-edition .st-section {
    padding-block: clamp(18px, 2.6vh, 38px);
  }

  /* max-height მედიაზე აღარ დგას: ფიქსირებული სიმაღლე + aspect-ratio
     ერთმანეთს ეწინააღმდეგებოდა და cover კადრს ჭრიდა. სიმაღლე ახლა
     პროპორციიდან მოდის, ანუ არაფერი იჭრება. */



  .es-primary .es-primary-stage { max-height: none; }
  .es-variant .es-variant-stage { max-height: none; }

  .lm-art { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   21. გაჩერებების დაბალანსება
   ორი პრობლემა რჩებოდა: სადაც ბლოკი ეკრანზე მოკლეა, ორი მაგნიტი ერთად
   ჩანდა; სადაც ძალიან გრძელია (ნავიგაციის სისტემა 2685px), სამ ეკრანზე
   არც ერთი გაჩერება არ იყო.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (min-height: 640px) {
  /* გრძელ ბლოკებში დამატებითი გაჩერებები */
  .wf-applications.wf-applications,
  .wf-family-head.wf-family-head,
  .es-personalise.es-personalise,
  .st-context-pair.st-context-pair {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal;
    scroll-margin-top: 66px;
  }

  /* გაჩერება არ ენიჭება ბლოკს, რომელიც სხვა გაჩერების პირველი შვილია —
     თორემ ორი მაგნიტი 50-300px-ში ხვდება ერთმანეთს */
  .wf-system .wf-family-head.wf-family-head,
  .st-context-block > .st-context-pair.st-context-pair {
    scroll-snap-align: none !important;
  }

  /* მოკლე სექცია ეკრანს ბოლომდე იკავებს, რომ მომდევნო არ ამოძვრეს */
  #digital,
  .story-edition .st-section { min-height: 100svh; }
}


/* --------------------------------------------------------------------------
   22. ტიპოგრაფიის სექცია — წყვილების სათაურები Black-ზე
   სამივე ბარათის headline წმინდა ლათინურია (Space that creates… / Long-term
   value… / Strategic infrastructure…), ანუ Black-ის ლეგიტიმური ადგილია.
   ბაზისში .ts-pair-headline 700-ზე იდგა (type-specimen.css:44), ამიტომ
   წარწერა „Extended · Bold" სიმართლეს წერდა — ახლა ორივე Black-ია.

   ოჯახი აუცილებლად "aktiv-grotesk-extended"-ია: --font-title-latin-ში
   პირველი „Aktiv"-ია, რომელსაც 900 არ აქვს და ბრაუზერი ხელოვნურად
   გაასქელებდა 700-ს.
   -------------------------------------------------------------------------- */

.ts-pairings-grid .ts-pair-headline {
  font-family: "aktiv-grotesk-extended", Aktiv, sans-serif;
  font-weight: 900;
  letter-spacing: -.045em;   /* Black უფრო ფართოა — ტრეკინგი იკუმშება */
}


/* --------------------------------------------------------------------------
   23. მოძრავი ზოლი (marquee) — დაბრუნებული, სექციის ქვედა კიდეზე
   CSS მთლიანად story.css-ში იდო (.st-marquee / -track / -group / @keyframes),
   მარკაპი კი აღარ არსებობდა — ანუ კომპონენტი „ჩუმად" გაქრა.
   მარკაპი დაბრუნებულია strategy-foundation.html-ში: ორი იდენტური ჯგუფი,
   რადგან ანიმაცია -50%-ზე ხვევს (თუ ერთი ჯგუფია, მარყუჟი წყდება).

   აქ მხოლოდ ერთი რამ სწორდება: ზოლი full-bleed-ია, ამიტომ სექციის ქვედა
   48px padding-ში უნდა ჩაჯდეს, თორემ ჰაერში ეკიდება.
   -------------------------------------------------------------------------- */

/* ადრე აქ margin-bottom:-48px ეწერა, ანუ დესკტოპის padding-ზე მიბმული
   ჯადოსნური რიცხვი. ტელეფონზე იგივე padding 36px-ია, ამიტომ ზოლი
   მომდევნო სექციაში 12px-ით შედიოდა. ახლა padding თავად იხსნება —
   ერთი წესი ყველა ზომაზე, ჯადოსნური რიცხვის გარეშე. */
.story-edition .st-foundation-section,
.story-edition .st-foundation-section.sg-foundation {
  /* !important იძულებითია: strategy-guide.css-ში ორი წესი დგას —
     `padding: 48px 0 !important` და 800px-ზე ვიწროზე
     `padding: 72px 0 36px !important`. სპეციფიკურობა აქ ვერ შველის. */
  padding-bottom: 0 !important;
}

.story-edition .st-foundation-section > .st-marquee {
  margin-top: auto;       /* დესკტოპზე flex-სვეტის ბოლოში აწვება */
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   24. ნავიგაციის „ხრიკები" — პროგრესი და ერთჯერადი მინიშნება
   ქცევა deck-nav.js-შია; აქ მხოლოდ გარეგნობაა.

   პროგრესი რელსის მარჯვენა წიბოზე ზის — იმავე 4px emerald ხაზზე, რომელიც
   რელსს ისედაც აქვს. ანუ ახალი ელემენტი ვიზუალურად არ ემატება: არსებული
   კონსტრუქციული ხაზი ხდება საზომი.
   -------------------------------------------------------------------------- */

/* ღუზა: ზოლი ლოგოს ქვედა გამყოფ ხაზში ზის */
nav.gv-rail .gv-rail-sep { position: relative; }

/* scaleX, არა width: ანიმაცია კომპოზიტორზე რჩება და ლეიაუტს ხელახლა
   არ ათვლევინებს ყოველ სქროლზე. inset-ის -0.5px 1px-იან ხაზს 2px-მდე
   ასქელებს, რომ ნარინჯისფერი შესამჩნევი იყოს. */
.gv-rail-progress {
  position: absolute;
  inset: -.5px 0;
  background: var(--orange, #FF5804);
  border-radius: 2px;
  pointer-events: none;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .gv-rail-progress { transition: none; }
}

/* --- ერთჯერადი მინიშნება --------------------------------------------------- */

/* ქვემოთ-მარცხნივ, რელსის გვერდით: ცენტრს „SCROLL ↓" იკავებს,
   მარჯვენა კუთხეს კი ქავერის „GV CAPITAL / MAKES SPACE." წარწერა.
   130px რელსის სიგანეს (104px) ზღუდით უვლის გვერდს. */
.gv-hint {
  position: fixed;
  left: 130px;
  bottom: 26px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: rgba(22, 35, 42, .92);
  color: var(--mist, #E4EEF0);
  font: 400 11.5px/1 "aktiv-grotesk-georgian", AktivGE, sans-serif;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  animation: gv-hint-in .35s ease .15s forwards;
  transition: opacity .35s ease, transform .35s ease;
}

@keyframes gv-hint-in {
  to { opacity: 1; transform: translateY(0); }
}

.gv-hint.is-gone,
html.footer-visible .gv-hint {
  animation: none;
  opacity: 0 !important;
  transform: translateY(6px);
  pointer-events: none;
}

.gv-hint kbd {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(228, 238, 240, .38);
  border-radius: 5px;
  font: 700 11px/1 Aktiv, sans-serif;
  color: #fff;
}

@media (max-width: 900px) { .gv-hint { display: none; } }


/* --------------------------------------------------------------------------
   25. Display-ის წონა — ერთი წესი ორივე დიდ სათაურზე
   ტიპოგრაფიის კიბეზე H1 Display ახლა Medium (500)-ია, რადგან ქავერი
   ზუსტად ასეთია: 121px / 500. Downloads-ის სათაური კი 76px-ზე 700-ზე იდგა,
   ანუ იმავე მასშტაბზე სხვა წონა. ახლა ორივე 500-ია და კიბე აღარ ცრუობს.

   ლოგიკა: რაც უფრო დიდია display, მით უფრო თხელია წონა. სქელი წონები
   (Bold/Black) სათაურის მასშტაბს ეკუთვნის, არა ქავერისას.
   -------------------------------------------------------------------------- */

.story-edition .st-download-hero h2 {
  font-weight: 500;
  letter-spacing: -.055em;   /* თხელი წონა ოდნავ თავისუფალ ტრეკინგს ითხოვს */
}

/* --------------------------------------------------------------------------
   26. ტიპოგრაფიის კიბის სქოლიო
   -------------------------------------------------------------------------- */

.ts-ladder-note {
  margin: 14px 0 0;
  max-width: 70ch;
  font: 400 11.5px/1.6 "aktiv-grotesk-georgian", AktivGE, sans-serif;
  color: var(--muted, #51646b);
}


/* --------------------------------------------------------------------------
   27. რელსის ხაზები — GV Space Field-ის რიტმი
   მოთხოვნა იყო: დანომვრის ნაცვლად სფეისინგის გრაფიკული ელემენტი.
   აქამდე ხაზებს ორი მდგომარეობა ჰქონდა (16px ყველა, 56px აქტიური), ანუ
   ველი არ იგრძნობოდა. ახლა რიტმი მიმდინარე სექციისკენ იკუმშება, ზუსტად
   როგორც Space Field-ში: შორს თხელი და მოკლე, ახლოს სქელი და გრძელი.

     შორს  14 × 1px   · 22%
     ±3    20 × 1px   · 30%
     ±2    28 × 1.5px · 40%
     ±1    40 × 1.5px · 55%
     ახლა  56 × 2px   · თეთრი (section-rail.css-ის წესი, უცვლელი)

   თანმიმდევრობა მნიშვნელოვანია: შორიდან ახლოსკენ, რომ უფრო ახლო
   საფეხურმა გადაფაროს. უკან მიმართული მეზობლები :has()-ით იწერება —
   სადაც არ მუშაობს, ხაზი ბაზისურ სახეს ინარჩუნებს და არაფერი ფუჭდება.
   -------------------------------------------------------------------------- */

/* ბაზა — ოდნავ უფრო მოკრძალებული, რომ საფეხურებმა ამოისუნთქოს */
nav.gv-rail .gv-rail-item .gv-rail-tick {
  width: 14px;
  height: 1px;
  background: rgba(228, 238, 240, .22);
}

/* ±3 */
nav.gv-rail .gv-rail-item[aria-current="true"] + .gv-rail-item + .gv-rail-item + .gv-rail-item .gv-rail-tick,
nav.gv-rail .gv-rail-item:has(+ .gv-rail-item + .gv-rail-item + .gv-rail-item[aria-current="true"]) .gv-rail-tick {
  width: 20px;
  height: 1px;
  background: rgba(228, 238, 240, .30);
}

/* ±2 */
nav.gv-rail .gv-rail-item[aria-current="true"] + .gv-rail-item + .gv-rail-item .gv-rail-tick,
nav.gv-rail .gv-rail-item:has(+ .gv-rail-item + .gv-rail-item[aria-current="true"]) .gv-rail-tick {
  width: 28px;
  height: 1.5px;
  background: rgba(228, 238, 240, .40);
}

/* ±1 */
nav.gv-rail .gv-rail-item[aria-current="true"] + .gv-rail-item .gv-rail-tick,
nav.gv-rail .gv-rail-item:has(+ .gv-rail-item[aria-current="true"]) .gv-rail-tick {
  width: 40px;
  height: 1.5px;
  background: rgba(228, 238, 240, .55);
}

/* ჰოვერი ზემოთ დაწერილ საფეხურებზე მაღლა უნდა იდგეს, თორემ
   (0,3,2) სელექტორები (0,2,0)-იან hover-ს გადაფარავდნენ */
nav.gv-rail .gv-rail-item:hover .gv-rail-tick,
nav.gv-rail .gv-rail-item:focus-visible .gv-rail-tick {
  width: 48px;
  height: 2px;
  background: rgba(228, 238, 240, .85);
}

/* მიმდინარე — ბოლოს და ყველაზე მაღალი წონით.
   საჭიროა, რადგან ზემოთ დაწერილი ბაზა (0,3,1) section-rail.css-ის
   aria-current წესს (0,3,0) ბიჯავდა და აქტიური ხაზი ბაზისურზე ვარდებოდა.
   ჰოვერის შემდეგ დგას განზრახ: მიმდინარე სექციაზე ჰოვერი აღარაფერს ცვლის. */
nav.gv-rail .gv-rail-item[aria-current="true"] .gv-rail-tick {
  width: 56px;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .25);
}


/* --------------------------------------------------------------------------
   28. ტელეფონზე ტექსტის წაკითხვადობის იატაკი
   375px-ზე დეკში 75 წარწერა 9px-ზე პატარაა, ნაწილი 6px-ზე — ეს ტელეფონზე
   უბრალოდ არ იკითხება. 68 წესი აწესებს 9px-ზე ნაკლებს, ათ სტაილშიტში.

   აქ მინიმალურ ჩარევას ვაკეთებ: ვზრდი მხოლოდ იმას, რაც 8px-ზე ქვემოთაა
   (ანუ 6px და 7px), 8px-ს არ ვეხები — ეს მიკრო-ვერსალის ნორმალური ზომაა.
   ყველა ეს სელექტორი 620–700px-ის მედია-ბლოკებშია, ამიტომ ერთი 700px-იანი
   ბლოკი ყველას ფარავს. .story-edition პრეფიქსი წონისთვისაა (0,3,0).
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

  /* ტიპოგრაფიის იერარქია — 6-7px → 9px */
  .story-edition .th-token,
  .story-edition .th-metric,
  .story-edition .th-display-spec,
  .story-edition .th-caption div,
  .story-edition .th-footer { font-size: 9px; }

  /* ნავიგაციის ნიშნები — 6-7px → 9px */
  .story-edition .wf-system .wf-hero figcaption,
  .story-edition .wf-system .wf-hierarchy-head p,
  .story-edition .wf-system .wf-hierarchy-board figcaption small,
  .story-edition .wf-system .wf-hierarchy-board figcaption > a,
  .story-edition .wf-system .wf-spatial-head p,
  .story-edition .wf-system .wf-spatial-mockup figcaption small,
  .story-edition .wf-system .wf-spatial-mockup figcaption > a,
  .story-edition .wf-system .wf-spatial-note,
  .story-edition .wf-system .wf-colophon p { font-size: 9px; }

  /* ხელმოწერა — 6-7px → 9px */
  .story-edition .es-system .es-intro p,
  .story-edition .es-system .es-link,
  .story-edition .es-system .es-stage-caption,
  .story-edition .es-system .es-stage-bottom,
  .story-edition .es-system .es-variant-head,
  .story-edition .es-system .es-variant figcaption > span,
  .story-edition .es-system .es-colophon,
  .story-edition .es-system .es-colophon p { font-size: 9px; }

  /* დანარჩენი 6-7px-იანები */
  .story-edition .st-pattern-copy > small,
  .story-edition .st-template > .st-kicker,
  .story-edition .oc-photo figcaption { font-size: 9px; }
}


/* --------------------------------------------------------------------------
   29. ბლოკები, რომლებსაც ბრაუზერი ჰორიზონტალურად „გადაასქროლავს"
   ხაფანგი: overflow:hidden-იანი ბლოკი, რომლის შიგთავსიც გადის კიდეზე,
   რჩება სქროლვად კონტეინერად. როცა ბრაუზერს სჭირდება შიგნით რომელიმე
   ელემენტის ჩვენება (ფოკუსი, scrollIntoView, ღუზა), ის ამ ბლოკს ჩუმად
   გადაასქროლავს — და ტექსტი მარცხნიდან იჭრება.

   ტელეფონზე ეს რეალურად ჩანს: Compact Mark-ის ბარათი 48px-ით იწევა და
   სათაური "COMPACT MARK" "MPACT MARK"-ად იკითხება.

   `clip` ვიზუალურად იგივეა, რაც `hidden`, მაგრამ სქროლვად კონტეინერს
   არ ქმნის — ანუ გადასქროლვა ფიზიკურად შეუძლებელი ხდება.
   `hidden` წინ რჩება ძველი ბრაუზერების უკანა გეგმად.
   -------------------------------------------------------------------------- */

.story-edition .cm-intro,
.story-edition .ts-letter-column {
  overflow: hidden;
  overflow: clip;
}


/* ==========================================================================
   30. ერთი ჩამოტვირთვის ღილაკი მთელ დეკში
   ==========================================================================
   დეკში 30 ჩამოტვირთვის ღილაკი იყო, ცხრა სხვადასხვა სახით:

     .st-media-download      999px აბი, 1px კიდე, თეთრი, 36px      ← ეტალონი
     .st-download-pill       9999px აბი, 1px კიდე, თეთრი, 36px
     .cm-card-links a        999px აბი, გამჭვირვალე, 35px
     .cm-pack-download       14px კუთხე, ნარინჯისფერი ბლოკი, 69px
     .bs-download            კუთხეების გარეშე, ქვედა ხაზი, 63px   (×13)
     .wf-download            კუთხეების გარეშე, ქვედა ხაზი, 44px
     .gi-package             ქვედა ხაზი, 47px
     .es-personal-download   სწორკუთხა მწვანე ბლოკი, 46px
     .st-full-download       9999px, კიდის გარეშე, 77px

   ეტალონი სავიზიტოსა და დროშების ვიდეოებზე მდგარი ღილაკია
   (.st-media-download). ყველა დანარჩენი მას ეთანაბრება: იგივე გეომეტრია,
   იგივე ტიპოგრაფია, იგივე ჰოვერი. ორი კანი რჩება — ღია ფონისთვის და
   მუქი/ვიდეოს ფონისთვის; განსხვავება მხოლოდ ფერებშია, ფორმაში არა.

   მარკაპს არ ვცვლი: ისრები სხვადასხვა ფაილშია (ზოგან SVG, ზოგან ↓/↗
   სიმბოლო), ამიტომ ორივეს ერთ სლოტში ვაყენებ ერთი ზომით.
   ========================================================================== */

/* --- საერთო გეომეტრია ------------------------------------------------------ */

.story-edition .st-download-pill,
.story-edition .st-media .st-media-download,
.story-edition .bs-download,
.story-edition .wf-system .wf-download,
.story-edition .gi-library .gi-package,
.story-edition .cm-pack-download,
.story-edition .cm-card-links a,
.story-edition .cm-production > a,
.story-edition .es-system .es-personal-download,
.story-edition .st-full-download,
.story-edition .folder-downloads a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  min-height: 38px;
  padding: 10px 20px;
  border: 1px solid #d0d7da;
  border-radius: 999px;
  background: #fff;
  color: var(--midnight, #16232a);
  font: 600 10px/1.2 var(--font-title-latin, "aktiv-grotesk-extended", Arial, sans-serif);
  letter-spacing: .025em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* --- ისარი: SVG და ტექსტური სიმბოლო ერთ ზომაზე ---------------------------- */

.story-edition .st-download-pill svg,
.story-edition .st-media .st-media-download svg,
.story-edition .bs-download svg,
.story-edition .folder-downloads a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.story-edition .bs-download > span:last-child,
.story-edition .wf-system .wf-download span:last-child,
.story-edition .gi-library .gi-package span,
.story-edition .cm-pack-download > b,
.story-edition .folder-downloads b,
.story-edition .st-full-download b {
  flex-shrink: 0;
  font: 400 15px/1 Aktiv, "aktiv-grotesk-georgian", sans-serif;
  color: inherit;
  letter-spacing: 0;
}

/* --- ჰოვერი: ერთი რეაქცია ყველგან ----------------------------------------- */

.story-edition .st-download-pill:hover,
.story-edition .st-media .st-media-download:hover,
.story-edition .bs-download:hover,
.story-edition .wf-system .wf-download:hover,
.story-edition .gi-library .gi-package:hover,
.story-edition .cm-pack-download:hover,
.story-edition .cm-card-links a:hover,
.story-edition .cm-production > a:hover,
.story-edition .es-system .es-personal-download:hover,
.story-edition .st-full-download:hover,
.story-edition .folder-downloads a:hover {
  background: var(--emerald, #0a6670);
  border-color: var(--emerald, #0a6670);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* --- კანი 2: ვიდეოზე და მუქ ბარათებზე ------------------------------------- */

.story-edition .st-media .st-media-download,
.story-edition .cm-intro .cm-pack-download,
.story-edition .cm-intro .cm-card-links a {
  border-color: #ffffff99;
  background: #fffffff0;
}

/* --- ბლოკური ღილაკები სვეტს არ უნდა გაწელონ -------------------------------- */

.story-edition .bs-download,
.story-edition .wf-system .wf-download,
.story-edition .gi-library .gi-package,
.story-edition .folder-downloads a,
.story-edition .st-full-download,
.story-edition .cm-pack-download {
  width: auto;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
  margin-inline: 0;
}

/* .bs-download-ს ქვედა ხაზი აღარ სჭირდება — ახლა აბია */
.story-edition .bs-download { border-bottom: 1px solid #d0d7da; }
.story-edition .bs-download:hover { border-bottom-color: var(--emerald, #0a6670); }

/* შიდა ტექსტი ღილაკის ტიპოგრაფიას ემორჩილება, საკუთარს აღარ ინარჩუნებს */
.story-edition .bs-download span,
.story-edition .cm-pack-download span,
.story-edition .st-full-download span,
.story-edition .folder-downloads a span {
  font: inherit;
  color: inherit;
}

.story-edition .bs-download small,
.story-edition .cm-pack-download small,
.story-edition .folder-downloads small,
.story-edition .st-full-download small {
  display: none;    /* ქვესათაური აბში აღარ ეტევა */
}

/* გრიდის შვილები ნაგულისხმევად მწკრივის სიმაღლეზე იწელებიან — .cm-production-ის
   ორი ღილაკი ასე 247px-იანი ხდებოდა. justify/align-self ორივეს ზღუდავს. */
.story-edition .cm-production > a,
.story-edition .cm-card-links a,
.story-edition .st-full-download,
.story-edition .folder-downloads a,
.story-edition .bs-download {
  align-self: start;
  justify-self: start;
  height: 38px;
  min-height: 38px;
}

.story-edition .cm-production > a small,
.story-edition .es-system .es-personal-download small,
.story-edition .wf-system .wf-download small { display: none; }


/* --------------------------------------------------------------------------
   31. ნავიგაცია უფრო მჭიდროდ
   რელსი 397px სიმაღლისა იყო შვიდი პუნქტისთვის — ჰაერი პუნქტებს შორის
   მეტი იყო, ვიდრე თავად პუნქტი. ვკუმშავ ოთხ ადგილას: ფირფიტის padding,
   პუნქტებს შორის gap, პუნქტის შიდა padding და ხაზის დაშორება სახელიდან.
   ტიპოგრაფია და ხაზების რიტმი უცვლელი რჩება.
   -------------------------------------------------------------------------- */

nav.gv-rail {
  padding: 18px 7px 7px;
  gap: 9px;                 /* პუნქტებს შორის სუნთქვა */
}

nav.gv-rail .gv-rail-item { padding: 4px 5px 4px; }

nav.gv-rail .gv-rail-tick { margin-top: 8px; }

/* ლოგო და MOTION სიაში არ უნდა ჩაერიონ: ისინი სხვა დონის ელემენტებია,
   ამიტომ მჭიდრო სიის ორივე მხარეს ჰაერი განზრახ რჩება. */
/* გამყოფი ლოგოსა და სიას შორის ზუსტად შუაში უნდა იდგეს.
   იყო: ზემოთ 50px (24 + 9 gap + 17), ქვემოთ 26px (17 + 9 gap) — ხაზი
   სიისკენ იყო მიწეული. ახლა ორივე მხარეს 38px. */
nav.gv-rail .gv-rail-brand { margin-bottom: 12px; }

nav.gv-rail .gv-rail-sep { margin-top: 17px; margin-bottom: 25px; }

nav.gv-rail .gv-rail-control { margin-top: 20px; }


/* --------------------------------------------------------------------------
   32. 02.2 Minimum Size & Fixed Form — განლაგება
   პირველი მცდელობა ორსვეტიანი იყო და არ გამოვიდა: მარცხნივ პატარა ბარათი,
   მარჯვნივ სამსტრიქონიანი ტექსტი და მათ ქვემოთ დიდი ცარიელი. ორივე სვეტი
   თავის ნახევარს ვერ ავსებდა.

   ახლა სამი ჰორიზონტალური ზოლია, თითოეული მთელ სიგანეზე:
     ზოლი 1  მინიმალური ზომა — დაბალი ზოლი: სათაური, ციფრები, გაზომილი ლოგო
     ზოლი 2  უცვლელი ფორმა   — სათაური და ერთი წინადადება
     ზოლი 3  რვა დარღვევა    — 4×2, ლოგო ფილას ავსებს

   ცარიელი ადგილი აღარსად რჩება, რადგან არცერთი ზოლი არ ცდილობს სიმაღლეს
   გვერდით მდგომს გაუთანაბროს.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  #logo-rules .st-note-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(10px, 1.6vh, 20px);
  }

  /* --- ზოლი 1: მინიმალური ზომა ------------------------------------------- */
  #logo-rules .st-minimum-size {
    display: grid;
    grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 52px);
    align-items: center;
  }

  #logo-rules .st-minimum-size > h3 { grid-column: 1; margin: 0; }

  #logo-rules .st-size-diagram {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(32px, 5vw, 86px);
    width: 100%;
    min-height: 0;
    padding: clamp(10px, 1.4vh, 16px) clamp(18px, 2.2vw, 30px);
  }

  #logo-rules .st-size-copy {
    display: flex;
    align-items: baseline;
    gap: 8px 22px;
    flex-wrap: wrap;
  }

  #logo-rules .st-size-copy b { margin: 0; }

  #logo-rules .st-size-measure {
    width: clamp(190px, 17vw, 250px);
    margin-left: auto;
    /* ისარი და წყვეტილი ზღვრები აბსოლუტურად ქვედა კიდეზეა მიბმული:
       ტიკები [H-42, H-18]-ს იკავებს, ლოგო კი 6+სიმაღლემდე. 24px padding-ით
       ისინი 18px-ით ერთმანეთს ფარავდნენ და ხაზი „CAPITAL"-ს გადაჰკვეთდა.
       42px მინიმუმია, 50 კი ჰაერსაც ტოვებს. */
    padding: 6px 0 50px;
  }

  /* --- ზოლი 2: უცვლელი ფორმა --------------------------------------------- */
  #logo-rules .lm-block { display: contents; }

  #logo-rules .lm-block > .lm-intro {
    display: grid;
    grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 52px);
    align-items: baseline;
    padding-top: clamp(12px, 1.8vh, 22px);
    border-top: 1px solid rgba(10, 102, 112, .16);
  }

  #logo-rules .lm-intro > h3 { margin: 0; }
  #logo-rules .lm-intro > .lm-lede { margin: 0; max-width: 68ch; }

  /* --- ზოლი 3: დარღვევები -------------------------------------------------- */
  #logo-rules .lm-block > .lm-grid { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   33. Everyday Identity — სამი თანაბარი სვეტი
   ბენტო ვცადეთ და არ იმუშავა: დიდ ფილაში სურათი პატარა რჩებოდა ღია
   ყუთის შუაში, მარჯვენა ორში კი აღწერა ორ ხაზზე იჭრებოდა. სამი თანაბარი
   სვეტი სამ თანაბარ დოკუმენტს უფრო შეესაბამება, ვიდრე ხელოვნური იერარქია.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   34. WEBSITE DIRECTION — ბრაუზერის ჩარჩო
   რა იყო: 540px სიმაღლის ყუთი overflow:hidden-ით, რომელშიც გრძელი
   სქრინშოტი უბრალოდ ეჭრებოდა. კიდე მკვეთრი იყო და ისე გამოიყურებოდა,
   თითქოს სურათი შემთხვევით მოიჭრა, და არა თითქოს საიტს ვუყურებთ.

   რა არის: იგივე სურათი ბრაუზერის ფანჯარაში ზის — ზედა ზოლი, სამი
   წერტილი და მისამართი. კიდე ახლა ფანჯრის კიდეა, ანუ ჭრა განზრახულად
   იკითხება. ქვემოთ რბილი გადასვლა ამბობს, რომ გვერდი გრძელდება.
   დამატებითი ასეტი არ სჭირდება — ყველაფერი ფსევდო-ელემენტებია.
   -------------------------------------------------------------------------- */

.story-edition .bs-web-preview {
  position: relative;
  padding-top: 36px;
  border: 1px solid #d3e0e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(22, 35, 42, .11);
  overflow: hidden;
}

/* ზედა ზოლი + სამი წერტილი */
.story-edition .bs-web-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 36px;
  background:
    radial-gradient(circle 3.5px at 20px 18px, #dfe7e9 98%, transparent 100%),
    radial-gradient(circle 3.5px at 35px 18px, #dfe7e9 98%, transparent 100%),
    radial-gradient(circle 3.5px at 50px 18px, #dfe7e9 98%, transparent 100%),
    #fff;
  border-bottom: 1px solid #eaf0f1;
  z-index: 2;
}

/* მისამართის ველი */
.story-edition .bs-web-preview::after {
  content: "gv.ge";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  min-width: 168px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--mist, #e4eef0);
  color: #7b949b;
  font: 500 10px/1.6 Aktiv, "aktiv-grotesk-georgian", sans-serif;
  letter-spacing: .05em;
  text-align: center;
}

.story-edition .bs-web-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* ქვედა რბილი გადასვლა: გვერდი გრძელდება, უბრალოდ აღარ ჩანს */
.story-edition .bs-digital > a.bs-web-preview {
  --fade: 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent 100%);
}

.story-edition .bs-web-preview:hover { box-shadow: 0 24px 52px rgba(22, 35, 42, .16); }

@media (prefers-reduced-motion: reduce) {
  .story-edition .bs-web-preview { transition: none; }
}

/* ბრაუზერის ზოლმა სექცია 878px-მდე გაზარდა (ეკრანი 820px) — ფანჯრის
   სიმაღლე ეკრანზეა მიბმული, რომ სექცია ისევ ერთ ჩამოსქროლვაზე დარჩეს. */
.story-edition .bs-web-preview { height: clamp(340px, 50vh, 540px); }


/* --------------------------------------------------------------------------
   35. 01 / VERBAL IDENTITY — რედაქციული იერარქია
   რა იყო: ორი თანაბარი სვეტი, მარცხნივ კონცეფცია 78px-ზე, მარჯვნივ
   სლოგანი 32px-ზე. თანაბარი სვეტები თანაბარ წონას ჰპირდება, შიგთავსი კი
   2.4-ჯერ განსხვავდებოდა — ამიტომ მარჯვენა სვეტი დანამატად იკითხებოდა და
   მის ქვემოთ 60px ცარიელი რჩებოდა.

   რა არის: სამი ჰორიზონტალური ზოლი, ერთი რიტმით.
     ზოლი 1  კონცეფცია — მთელ სიგანეზე, ყველაზე დიდი
     ზოლი 2  სლოგანი   — იმავე ბადეში, ერთი საფეხურით ჩუმად
     ზოლი 3  ტონი      — სამი ბარათი
   თითოეულ ზოლში: ეტიკეტი მარცხნივ, გზავნილი შუაში, გამოყენება მარჯვნივ.
   თმის სისქის ხაზები ზოლებს ყოფს — იერარქია თვალით ერთ წამში იკითხება.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  .sg-voice .st-manifesto {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 2.6vh, 30px);
  }

  .sg-voice .st-manifesto > div {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr) clamp(200px, 19vw, 280px);
    column-gap: clamp(22px, 2.8vw, 46px);
    align-items: start;
    padding-bottom: clamp(14px, 2.2vh, 26px);
    border-bottom: 1px solid rgba(10, 102, 112, .16);
  }

  .sg-voice .st-manifesto > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .sg-voice .st-manifesto .sg-label { grid-column: 1; grid-row: 1; margin-top: .5em; }
  .sg-voice .st-manifesto h3        { grid-column: 2; grid-row: 1; margin: 0; }
  .sg-voice .st-manifesto .sg-slogan-en { grid-column: 2; grid-row: 2; margin: 10px 0 0; }
  .sg-voice .st-manifesto .sg-use   { grid-column: 3; grid-row: 1 / span 2; max-width: none; margin: .5em 0 0; }

  /* კონცეფციამ მთელი სიგანე მიიღო — ზომაც იმას უნდა შეესაბამებოდეს */
  .sg-voice .st-manifesto .sg-concept { font-size: clamp(56px, 5.7vw, 90px); }

  /* ტონის ბარათები იმავე სისტემის მესამე ზოლია */
  .sg-voice .sg-tone-grid {
    padding-top: clamp(14px, 2.2vh, 26px);
    border-top: 1px solid rgba(10, 102, 112, .16);
    margin-top: clamp(16px, 2.6vh, 30px);
  }
}


/* --------------------------------------------------------------------------
   36. EMAIL SIGNATURE — სამი ლეიაუთის გასწორება
   სამი პრობლემა იყო:

   1) სათაურის ბადე 985px / 177px-ად იყოფოდა. მარჯვენა 177px-იან ზოლში
      აბზაცი და ბმული იყო ჩატენილი, ანუ ტექსტი ოთხ-ხუთსიტყვიან სვეტად
      ეშვებოდა. ახლა თანაფარდობა 1.5 / 1-ია.

   2) MAKE IT YOURS სრულ სიგანეზე იდგა ხელმოწერების ქვემოთ, ამიტომ სექცია
      1337px-მდე იზრდებოდა — ერთ ეკრანზე (820px) აღარ ეტეოდა და ქვედა
      ნაწილი მხოლოდ სქროლით ჩანდა. ახლა მარჯვენა სვეტშია, ხელმოწერების
      გვერდით: იგივე შიგთავსი, ნახევარი სიმაღლე.

   3) ორი ვარიანტი (compact 195px და mobile 330px) ერთმანეთს არ ესწორებოდა.
      ახლა ორივე ერთ სიმაღლეზეა და ქვედა კიდე სწორდება.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {

  /* --- 1. სათაური ---------------------------------------------------------- */
  .story-edition .es-system .es-header {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    align-items: end;
  }

  /* --- 2. ორსვეტიანი მთავარი ბადე ------------------------------------------ */
  .story-edition .es-system {
    grid-template-rows: auto auto auto auto;
    align-items: start;
  }

  .story-edition .es-system > .es-header      { grid-column: 1 / -1; grid-row: 1; }
  .story-edition .es-system > .es-primary     { grid-column: 1; grid-row: 2; }
  .story-edition .es-system > .es-variants    { grid-column: 1; grid-row: 3; }
  .story-edition .es-system > .es-personalise { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
  .story-edition .es-system > .es-status      { grid-column: 1; grid-row: 4; }
  .story-edition .es-system > .es-colophon    { grid-column: 2; grid-row: 4; }

  /* ვიწრო სვეტში ველები ერთ სვეტად ჯობია, ვიდრე ორ ვიწროდ */
  .story-edition .es-system .es-editor { grid-template-columns: minmax(0, 1fr); }
  .story-edition .es-system .es-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- 3. ვარიანტები ერთ ხაზზე --------------------------------------------- */
  .story-edition .es-system .es-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .story-edition .es-system .es-variant { height: 100%; }

  .story-edition .es-system .es-variant-stage {
    flex: 1 1 auto;
    min-height: 0;
    place-items: center;
  }
}

/* ვარიანტების რიგმა არ უნდა გაიწელოს მარჯვენა სვეტის სიმაღლემდე:
   compact და mobile პატარა ნიმუშებია, არა მთავარი ხელმოწერა. */
@media (min-width: 1100px) {
  .story-edition .es-system > .es-variants { height: clamp(215px, 28vh, 285px); }
  .story-edition .es-system .es-variant-stage { overflow: hidden; }
  .story-edition .es-system .es-variant-stage img { max-height: 100%; width: auto; object-fit: contain; }
}

/* ფილები ფიქსირებულ რიგში უნდა დაიკუმშონ: min-height:0-ის გარეშე flex-ის
   შვილი კონტენტის ზომაზე რჩება და კონტეინერიდან გადმოდის (488 vs 230). */
@media (min-width: 1100px) {
  .story-edition .es-system .es-variant { min-height: 0; overflow: hidden; }
  .story-edition .es-system .es-variant-stage img { max-height: 100%; max-width: 100%; height: auto; }

  /* სექცია ერთ ეკრანს უახლოვდება: სათაური და მთავარი ნიმუში ოდნავ დაბალი */
  .story-edition .es-system .es-header { padding-bottom: 0; }
  .story-edition .es-system .es-header h3 { font-size: clamp(30px, 3.4vw, 52px); }
  .story-edition .es-system > .es-primary { height: clamp(300px, 44vh, 380px); }
  .story-edition .es-system .es-primary-stage { min-height: 0; }
}

/* max-height:100% ვერ იმუშავებდა: flex-ის შვილს პროცენტული სიმაღლის
   ამოსახსნელად განსაზღვრული ბაზა სჭირდება. აბსოლუტური განთავსება ამ
   დამოკიდებულებას ხსნის — სურათი სცენის რეალურ ყუთში ჯდება. */
@media (min-width: 1100px) {
  .story-edition .es-system .es-variant-stage { position: relative; }
  .story-edition .es-system .es-variant-stage img {
    position: absolute;
    inset: 8px;
    width: auto;
    height: auto;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    margin: auto;
    object-fit: contain;
  }
}


/* --------------------------------------------------------------------------
   37. აბები ვიწრო ეკრანზე
   .cm-production ორსვეტიანი რჩებოდა 375px-ზეც, ამიტომ მეორე აბი
   („ერთფეროვანი ვერსია") 457px-მდე გადიოდა და კიდეზე იჭრებოდა.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

  .story-edition .cm-production,
  .story-edition .cm-card-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* ვიწრო ეკრანზე გრძელი წარწერა უნდა დაიკუმშოს, არა გადმოვიდეს */
  .story-edition .st-download-pill,
  .story-edition .bs-download,
  .story-edition .wf-system .wf-download,
  .story-edition .gi-library .gi-package,
  .story-edition .cm-pack-download,
  .story-edition .cm-card-links a,
  .story-edition .cm-production > a,
  .story-edition .es-system .es-personal-download,
  .story-edition .st-full-download,
  .story-edition .folder-downloads a {
    max-width: 100%;
    padding-inline: 16px;
    justify-content: space-between;
  }

  .story-edition .cm-production > a > span:first-child,
  .story-edition .cm-card-links a > span:first-child,
  .story-edition .bs-download > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   38. აკორდეონსა და მოძრავ ზოლს შორის ჰაერი
   .st-marquee-ს margin-top:auto აქვს, ანუ ზოლი სექციის ბოლოში ეშვება.
   როცა კონტენტი სექციას ავსებს, „auto" ნულდება და თეთრი ბარათი პირდაპირ
   მუქ ზოლს ეხება — კიდეები ერთმანეთში გადადის.
   ქვედა margin აკორდეონზე მინიმალურ დაშორებას იცავს ნებისმიერ სიმაღლეზე.
   -------------------------------------------------------------------------- */

.story-edition .st-foundation-section > .st-notes {
  margin-bottom: clamp(16px, 2.4vh, 30px);
}

/* --------------------------------------------------------------------------
   32b. ფილების ზომა — ID-ით, რადგან story.css-ში უფრო მძიმე წესი დგას
   `#logo-rules .lm-art { height: clamp(104px, 14vh, 142px) }` (ID = 0,1,1)
   ჩემს `.lm-art`-ს (0,1,0) ბიჯავდა, ამიტომ ყუთი 115px-ზე რჩებოდა და
   ლოგო სიმაღლით იზღუდებოდა: 290px სიგანის ველში ნიშანი 158px-ს იკავებდა.
   სექციაში ~190px თავისუფალი სიმაღლეა, ამიტომ ველს ვაზრდით.
   -------------------------------------------------------------------------- */

#logo-rules .lm-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1.9;
  padding: clamp(12px, 1.4vw, 18px);
}

#logo-rules .lm-art > .logo,
#logo-rules .lm-art > img { width: 100%; max-width: none; }

#logo-rules .lm-art > .lm-rotate  { width: 70%; }
#logo-rules .lm-art > .lm-stretch { width: 58%; }
#logo-rules .lm-art > .lm-retyped { width: auto; }


/* --------------------------------------------------------------------------
   39. 12 WAYFINDING SYMBOLS — სიმბოლოს ნაცვლად სრული ნიშანი
   იყო: ზურმუხტისფერი პიქტოგრამა თეთრ ფონზე, პატარა 11px წარწერა გვერდით
   და ნაცრისფერი ↓. ანუ ბიბლიოთეკის სია, არა ნიშნების ოჯახი.

   არის: თითოეული ერთეული ნამდვილი ნიშნის ფირფიტაა — ბრენდული ფონი,
   თეთრი პიქტოგრამა, დიდი თეთრი წარწერა და ბოლოში სტაფილოსფერი მრგვალი
   ისარი. ზუსტად ის ანატომია, რაც ფიზიკურ ნიშნებზეა.

   პიქტოგრამები გარე SVG ფაილებია, ანუ `fill`-ით ვერ გადავღებავთ.
   `brightness(0) invert(1)` ერთფეროვან ნიშანს სუფთა თეთრად აქცევს —
   ფაილს არ ვცვლით, ამიტომ ჩამოსატვირთი ვერსია ისევ ზურმუხტისფერია.
   -------------------------------------------------------------------------- */

@media (min-width: 621px) {

  .wf-system .wf-symbols .wf-grid {
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: clamp(10px, 1.4vh, 16px) clamp(12px, 1.2vw, 18px);
  }

  .wf-system .wf-symbols .wf-grid li { min-width: 0; }

  .wf-system .wf-symbols .wf-grid a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 0;
    height: clamp(56px, 7.2vh, 66px);
    padding: 7px 7px 7px 20px;
    border-radius: 999px;
    background: var(--emerald, #0a6670);
    color: #fff;
    text-decoration: none;
    transition: background 180ms ease;
  }

  .wf-system .wf-symbols .wf-grid a:hover,
  .wf-system .wf-symbols .wf-grid a:focus-visible {
    background: var(--midnight, #16232a);
  }

  .wf-system .wf-symbols .wf-grid img {
    grid-column: auto;
    width: clamp(24px, 2vw, 28px);
    height: clamp(24px, 2vw, 28px);
    filter: brightness(0) invert(1);   /* ზურმუხტი → თეთრი */
  }

  .wf-system .wf-symbols .wf-grid b {
    font: 700 clamp(13px, 1.05vw, 15.5px)/1.15 var(--font-title-latin, "aktiv-grotesk-extended", Aktiv, sans-serif);
    letter-spacing: .035em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* სტაფილოსფერი ისრის ჩიპი — იგივე, რაც ფიზიკურ ნიშანზეა */
  .wf-system .wf-symbols .wf-grid .wf-library-arrow {
    box-sizing: border-box;
    width: clamp(38px, 4.4vh, 46px);
    height: clamp(38px, 4.4vh, 46px);
    padding: clamp(10px, 1.2vh, 13px);
    border-radius: 50%;
    background: var(--orange, #ff5804);
    color: #fff;
    justify-self: end;
  }
}


/* --------------------------------------------------------------------------
   40. EMAIL SIGNATURE — ბადის გასწორება
   გაზომვამ ოთხი დამოუკიდებელი შეცდომა აჩვენა:

     · მარცხენა სვეტი y=301-ზე იწყებოდა, მარჯვენა y=326-ზე — 25px სხვაობა
       .es-personalise-ის საკუთარი margin-top-ის გამო. ზედა კიდე ირღვეოდა.
     · მთავარსა და ვარიანტებს შორის 49px იყო, სათაურის შემდეგ კი 21px —
       ანუ ვერტიკალურ რიტმს ორი სხვადასხვა ნაბიჯი ჰქონდა.
     · .es-status ცარიელია (h=0), მაგრამ თავის რიგს იკავებდა და 18px
       ჰაერს ამატებდა — უხილავი ელემენტი, ხილული ხვრელით.
     · .es-colophon სექციის ბოლოს მარჯვნივ იდგა მარტო, მარცხენა სვეტის
       დასრულებიდან 66px-ით ქვემოთ.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {

  .story-edition .es-system {
    row-gap: clamp(16px, 2.4vh, 26px);
    column-gap: clamp(26px, 3vw, 52px);
  }

  /* ორივე სვეტი ერთი ხაზიდან იწყება */
  .story-edition .es-system > .es-personalise { margin-top: 0; }
  .story-edition .es-system > .es-primary     { margin-top: 0; margin-bottom: 0; }
  .story-edition .es-system > .es-variants    { margin-top: 0; margin-bottom: 0; }

  /* ცარიელი სტატუსი რიგს არ უნდა იკავებდეს */
  .story-edition .es-system > .es-status:empty { display: none; }

  /* კოლოფონი ქვედა ზოლია, არა მარჯვენა სვეტის კუდი */
  .story-edition .es-system > .es-colophon {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 0;
  }
}

/* ორივე სვეტი ერთსა და იმავე ხაზზე უნდა დამთავრდეს: ვარიანტების რიგი
   იჭიმება მარჯვენა სვეტის ბოლომდე (იყო 16px სხვაობა). */
@media (min-width: 1100px) {
  .story-edition .es-system > .es-variants {
    height: auto;
    min-height: clamp(215px, 28vh, 285px);
    align-self: stretch;
  }
}


/* --------------------------------------------------------------------------
   41. სექციის ზედა წარწერის ხაზი — მხოლოდ მარცხენა მხარეს
   `.st-editorial-eyebrow`-ს border-bottom მთელ სიგანეზე გასდევდა და
   სექციას ორად ჭრიდა: ზემოთ ორი პატარა წარწერა, ქვემოთ მთელი კონტენტი.
   ახლა ხაზი მხოლოდ მარცხენა კიკერის ქვეშაა — იმდენად გრძელი, რამდენადაც
   თავად წარწერა. საზღვრის ნაცვლად ფსევდო-ელემენტია, რომ სიგრძე
   კონტენტს მიჰყვეს და არა კონტეინერს.
   -------------------------------------------------------------------------- */

.story-edition .st-editorial-eyebrow {
  border-bottom: 0;
  position: relative;
}

.story-edition .st-editorial-eyebrow > .st-kicker {
  position: relative;
  padding-bottom: 10px;
}

.story-edition .st-editorial-eyebrow > .st-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(22, 35, 42, .14);
}


/* --------------------------------------------------------------------------
   42. Foundation — ფოტო სრულად გაშლილი ზევით
   „POSITIONING · VALUES · AUDIENCE" მოიხსნა, ანუ ზედა ზოლი აღარ არსებობს.
   ფოტო იკავებს მარჯვენა სვეტს სრულად — იწყება პირველივე რიგიდან (კიკერის
   გასწვრივ) და ჩამოდის ბოლომდე, რითაც ზემოთ ცარიელი თეთრი ველი ქრება.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  .sg-foundation.st-foundation-section .st-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
  }

  #foundation .st-editorial-eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 20px;
  }

  #foundation .st-intro-lead {
    grid-column: 1;
    grid-row: 2;
  }

  #foundation .st-intro-figure {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
    height: 100%;
    min-height: clamp(340px, 44vh, 460px);
    max-height: none;
  }

  #foundation .st-intro-figure img {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   42b. სახელი და არქიტექტურა — 1 სექციაში სრულად ჩატევა (დესკტოპი)
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  #name-architecture {
    padding-block: clamp(14px, 2vh, 24px);
  }
  #name-architecture .st-section-head {
    margin-bottom: clamp(10px, 1.4vh, 16px);
  }
}



/* --------------------------------------------------------------------------
   43. კორპორატიული ვიტრინა — მარჯვენა კადრი მთელ დარჩენილ სიგანეზე
   media-fit.css ორივე ჩარჩოს 3:4-ზე კეტავს და წყვილს ცენტრში აჩერებს,
   ამიტომ მარცხნივ და მარჯვნივ ცარიელი ზოლები რჩებოდა. სავიზიტო ბარათი
   3:4-ზე რჩება (მაკეტი ასე იკითხება), საქაღალდის კადრი კი დანარჩენ სიგანეს
   იკავებს და cover-ით ივსება — ზედა შავი ველი აღარ ჩანს.
   სპეციფიკურობა: media-fit-ის წესი (1,2,0)-ია, აქ :not()-ით (1,3,0) გვაქვს,
   ux-pass კი media-fit-ის შემდეგ იტვირთება.
   -------------------------------------------------------------------------- */

#corporate .st-corporate-showcase {
  justify-content: flex-start;
}

#corporate .st-corporate-showcase > .st-media:not(.st-business-card-motion) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  aspect-ratio: auto;
  max-width: none;
}

#corporate .st-corporate-showcase > .st-media:not(.st-business-card-motion) video,
#corporate .st-corporate-showcase > .st-media:not(.st-business-card-motion) img {
  object-fit: cover;
  object-position: center 58%;
}

@media (max-width: 700px) {
  #corporate .st-corporate-showcase > .st-media:not(.st-business-card-motion) {
    flex: none;
    aspect-ratio: 3 / 4;
  }
}


/* --------------------------------------------------------------------------
   44. „სრული სამუშაო ნაკრები" — მთავრული
   ღილაკს text-transform:uppercase უკვე ჰქონდა, მაგრამ font-family ლათინური
   Aktiv Extended-ია, რომელსაც ქართული არ აქვს; ფოლბექს კი მთავრული (U+1C90–
   U+1CBA) აკლია, ამიტომ წარწერა მხედრულად რჩებოდა. Aktiv Grotesk Georgian-ს
   სამივე წონაში სრული 33 მთავრული ასონიშანი აქვს.
   -------------------------------------------------------------------------- */

.story-edition .st-full-download > span:not(.st-btn-arrow-circle) {
  font-family: "aktiv-grotesk-georgian", AktivGE,
               var(--font-title-latin, Aktiv, "aktiv-grotesk-extended"), sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   სექციის სათაურები — ხელოვნური გასქელების მოხსნა (2026-09-15)
   ზემოთ იდგა font-weight:900, მაშინ როცა Aktiv Grotesk-ს 700-ზე მეტი არ აქვს:
   ბრაუზერი წონას თვითონ ხატავდა და ქართულ ასოებს ავსებდა. ამას ემატებოდა
   -.045em უარყოფითი ტრეკინგი. ორივე ერთად სათაურს „შეწეულს" ხდიდა.
   -------------------------------------------------------------------------- */
.story-edition .st-section-head .st-headline,
.story-edition .st-section-head h2 {
  font-weight: 700;
  letter-spacing: -.012em;
  font-synthesis-weight: none;
  font-synthesis: none;
}


/* --------------------------------------------------------------------------
   44. Foundation-ის ფოტო — ოდნავ ვიწრო, მარცხენა მცენარეების ხარჯზე
   ფოტო სვეტს სრულად ავსებდა და მარცხენა კიდეზე გაბუნდოვნებული მცენარე
   კადრის მეხუთედს იკავებდა. ჩარჩო 8%-ით ვიწროვდება და მარჯვენა კიდეზე
   ეჯახება (ანუ გვერდის ველი უცვლელი რჩება), object-position კი მარჯვნივ
   იწევს, ამიტომ დაკარგული ნაწილი სწორედ მარცხენა მცენარეებია.
   -------------------------------------------------------------------------- */

#foundation .st-intro-figure.st-intro-figure {
  width: 92%;
  max-width: 100%;
  justify-self: end;
  margin-left: auto;
}

#foundation .st-intro-figure.st-intro-figure img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  #foundation .st-intro-figure.st-intro-figure {
    width: 100%;
    justify-self: stretch;
    margin-left: 0;
  }
}


/* --------------------------------------------------------------------------
   45. Clear space: X-ს ის დეტალი ხატავს, რომელიც მას განსაზღვრავს.
   აქამდე ოთხივე მხარეს პატარა ასო „X" ეწერა, ანუ ერთეული მხოლოდ ეწერა.
   ახლა ოთხივე ზოლში „CAPITAL"-ის ასო „C" ზის ზუსტად X-ის სიმაღლით და
   გამჭვირვალედ: თვალით ჩანს, რომ დამცავი ველი სწორედ ამ ასოს ტოლია.
   ვერსალის სიმაღლე ≈ 0.72em, ამიტომ font-size = X / 0.72.
   -------------------------------------------------------------------------- */

.st-clearspace-frame .st-x {
  font: 700 calc(var(--x) / .72) / 1 var(--font-title-latin, Aktiv, sans-serif);
  letter-spacing: 0;
  color: color-mix(in srgb, var(--emerald, #0a6670) 30%, transparent);
  line-height: .72;
}

/* ასო ზოლის შუაგულში, ოთხივე მხარეს ერთ მანძილზე */
.st-clearspace-frame .st-x-top,
.st-clearspace-frame .st-x-bottom,
.st-clearspace-frame .st-x-right,
.st-clearspace-frame .st-x-left { inset: auto; }

.st-clearspace-frame .st-x-top    { top: 0;    left: 50%; transform: translate(-50%, 0); }
.st-clearspace-frame .st-x-bottom { bottom: 0; left: 50%; transform: translate(-50%, 0); }
.st-clearspace-frame .st-x-left   { left: 0;   top: 50%;  transform: translate(0, -50%); }
.st-clearspace-frame .st-x-right  { right: 0;  top: 50%;  transform: translate(0, -50%); }

/* --------------------------------------------------------------------------
   Clear space — „C" ზოლის შუაგულში (2026-09-16)
   left:0 ასოს მარცხენა კიდეს აყენებდა ჩარჩოს კიდეზე, ამიტომ ასო ზოლს
   სცდებოდა და ლოგოს არეში შედიოდა. ახლა ოთხივე ცენტრირებულია X/2-ზე
   და ზომა ზოლში ეტევა.
   -------------------------------------------------------------------------- */
.st-clearspace-frame .st-x {
  font-size: calc(var(--x) * .95);
  line-height: 1;
}
.st-clearspace-frame .st-x-top    { top: calc(var(--x) / 2);    left: 50%; transform: translate(-50%, -50%); }
.st-clearspace-frame .st-x-bottom { bottom: calc(var(--x) / 2); left: 50%; transform: translate(-50%, 50%); }
.st-clearspace-frame .st-x-left   { left: calc(var(--x) / 2);   top: 50%;  transform: translate(-50%, -50%); }
.st-clearspace-frame .st-x-right  { right: calc(var(--x) / 2);  top: 50%;  transform: translate(50%, -50%); }

/* --------------------------------------------------------------------------
   Wayfinding — სათაურები სივრცეს ჭამდა (2026-09-16)
   პირველ ნიშნამდე 264 px ეწერებოდა: ოთხი სათაურის რიგი, თითოეული
   თავისი სლოგანით. ერთ სექციაში ოთხი სლოგანი ზედმეტია.
   -------------------------------------------------------------------------- */
#wayfinding .wf-eyebrow { padding-block: 0; margin-bottom: clamp(10px, 1.4vh, 16px); }

#wayfinding .wf-heading > h3 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.04;
}

/* დეკორატიული სლოგანები — სათაურს არ ეხმარება, სივრცეს კი ჭამს */
#wayfinding .wf-intro > p,
#wayfinding .wf-family-head > :last-child:not(:first-child),
#wayfinding .wf-spatial-head > :last-child:not(:first-child),
#wayfinding .wf-production-head > :last-child:not(:first-child) { display: none; }

#wayfinding .wf-family-head,
#wayfinding .wf-spatial-head,
#wayfinding .wf-production-head {
  margin-block: clamp(10px, 1.6vh, 18px) clamp(8px, 1.2vh, 14px);
  padding-block: 0;
}

/* ტრანსპორტის ვიდეო თითქმის მთელ ეკრანს იკავებდა — სიმაღლე შეზღუდულია,
   კადრი cover-ით ინარჩუნებს პროპორციას (იგივე ლოგიკა, რაც კორპორატიულ მედიას). */
#applications .st-context-single {
  height: min(520px, calc(100svh - 230px));
  aspect-ratio: auto;
}
#applications .st-context-single > video,
#applications .st-context-single > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

/* მარკიზის გამყოფები: ბრენდის Google Material Icons Round სოლიდური აიქონები (3 გამეორებადი ელემენტი) */
.st-marquee .st-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.st-marquee .st-glyph::before {
  display: none;
}
.st-marquee-ico {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}
.st-marquee-group {
  gap: clamp(34px, 2.6vw, 46px);
  padding-right: clamp(34px, 2.6vw, 46px);
}
.st-marquee-group > span:not(.st-glyph) {
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.13em;
}

/* --------------------------------------------------------------------------
   01.1 / NAME & ARCHITECTURE — Foundation-ის იდენტური სუფთა ლეიაუთი (2026-09-16)
   -------------------------------------------------------------------------- */
#name-architecture.st-foundation-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(24px, 3vh, 48px) 0;
}

#name-architecture .st-intro {
  flex: 1 1 auto;
  align-content: stretch;
  max-height: clamp(320px, calc(100vh - 224px), 620px);
}

#name-architecture .st-intro-lead,
#name-architecture .st-intro-figure {
  align-self: stretch;
  height: 100%;
}

#name-architecture .st-intro-lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 0;
}
#name-architecture .st-intro-lead > * { margin-top: 0; margin-bottom: 0; }

#name-architecture .st-intro-figure {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  width: 100%;
  max-width: 100%;
}

#name-architecture .st-intro-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Extend the photo through the eyebrow row to fill the right column. */
@media (min-width: 901px) {
  #name-architecture .st-editorial-eyebrow {
    grid-column: 1;
    grid-row: 1;
  }
  #name-architecture .st-intro-lead {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  #name-architecture .st-intro-figure {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  #name-architecture .st-intro-figure img {
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  #name-architecture.st-foundation-section {
    min-height: 0 !important;
    padding: 48px 0 !important;
  }
  #name-architecture .st-intro-lead,
  #name-architecture .st-intro-figure { align-self: auto; height: auto; }
  #name-architecture .st-intro-figure {
    width: 100%;
    margin-left: 0;
  }
  #name-architecture .st-intro-figure img { height: auto; aspect-ratio: 1 / 1; }
}

/* კოპირებადი ტექსტების აკორდეონმა #voice-ს სიმაღლე მოუმატა - ვიზუალი
   ეკრანს ერგება, ფოტო cover-ით ინარჩუნებს კადრს. */
#voice.be-section { max-height: 100svh; }
#voice > .be-visual { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#voice > .be-visual .be-photo { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   46. Downloads section — 1 ეკრანში ჩატევა (2026-09-16)
   -------------------------------------------------------------------------- */
#downloads.st-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(14px, 2vh, 22px) 0;
}

#downloads .st-download-hero {
  padding: clamp(18px, 2.5vh, 26px) clamp(22px, 3.5vw, 40px);
}

#downloads .st-download-hero h2 {
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.15;
  margin: clamp(8px, 1.2vh, 14px) 0;
}

#downloads .st-download-hero p {
  font-size: 13px;
  line-height: 1.5;
}

#downloads .st-full-download {
  margin-top: clamp(10px, 1.5vh, 16px);
  padding: 10px 18px;
  gap: 18px;
  font-size: 13px;
}

#downloads .st-full-download > span {
  font-size: 18px;
}

#downloads .bs-link-row {
  margin: clamp(8px, 1.2vh, 14px) 0;
  padding: clamp(6px, 1vh, 10px) 0;
}

#downloads .ad-release-note {
  margin: clamp(6px, 1vh, 10px) 0 0;
  font-size: 11px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   47. Colour section — Spacious, refined balance (2026-09-16)
   -------------------------------------------------------------------------- */
#colour.st-section {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: 100svh;
  padding: clamp(24px, 3.5vh, 42px) 0;
}

#colour .st-palette-layout {
  gap: clamp(16px, 2vw, 24px);
}

#colour .st-palette-layout .st-colours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 18px);
}

#colour .st-swatch-stage {
  height: clamp(82px, 10vh, 104px);
  padding: 12px 16px;
}

#colour .st-swatch-role {
  font-size: 8.5px;
  letter-spacing: .09em;
}

#colour .st-copy-pill {
  padding: 6px 14px;
  font-size: 10px;
}

#colour .st-swatch-meta {
  padding: clamp(13px, 1.7vh, 17px) clamp(14px, 1.4vw, 18px);
  gap: 5px;
}

#colour .st-swatch-name {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--midnight);
}

#colour .st-swatch-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 1px;
}

#colour .st-swatch-hex {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--midnight);
  margin-bottom: 2px;
}

#colour .st-swatch-spec {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}

#colour .st-ratio {
  margin-top: clamp(20px, 2.6vh, 28px);
  height: 36px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 600;
}

#colour .st-ratio + .st-small {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#colour .st-production-reference {
  margin: clamp(18px, 2.4vh, 26px) 0 clamp(14px, 1.8vh, 20px);
  padding: clamp(11px, 1.4vh, 15px) clamp(16px, 1.6vw, 22px);
  border-radius: 12px;
  gap: clamp(14px, 1.6vw, 22px);
}

#colour .st-production-reference > div {
  padding-left: clamp(12px, 1.4vw, 18px);
  gap: 3px;
}

#colour .st-production-reference b {
  font-size: 8.5px;
  letter-spacing: .08em;
}

#colour .st-production-reference strong {
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.35;
}

#colour details.st-notes {
  margin-top: clamp(14px, 1.8vh, 22px);
}

/* --------------------------------------------------------------------------
   48. Logo section — 1 ეკრანში ჩატევა (2026-09-16)
   -------------------------------------------------------------------------- */
#logo.st-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(14px, 2vh, 22px) 0;
}

#logo .st-logo-panel {
  min-height: clamp(160px, 20vh, 190px);
  max-height: 220px;
}

#logo .st-logo-stage {
  min-height: clamp(110px, 14vh, 135px);
  padding: 16px 18px;
}

#logo .st-logo-stage-tag {
  top: 10px;
  left: 14px;
  font-size: 8.5px;
}

#logo .st-logo-footer {
  padding: 8px 14px;
}

#logo .st-download-pill {
  min-height: 30px;
  padding: 5px 16px;
  font-size: 10px;
}

#logo .st-rule-line {
  padding: clamp(6px, 1vh, 10px) 0;
  font-size: 12px;
}

#logo #compact-mark.cm-minimal {
  margin-top: clamp(10px, 1.4vh, 16px);
  padding-top: clamp(8px, 1.2vh, 14px);
}

#logo #compact-mark .cm-minimal-copy {
  padding: 8px 24px 8px 0;
}

#logo #compact-mark .cm-minimal-copy h3 {
  font-size: clamp(18px, 1.8vw, 24px);
}

#logo #compact-mark .cm-minimal-copy p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

#logo #compact-mark .cm-minimal-download {
  margin-top: 10px;
  min-height: 32px;
  font-size: 11px;
}

#logo #compact-mark .cm-minimal-visual {
  min-height: clamp(110px, 14vh, 135px);
  padding: 12px 18px;
  gap: 10px 24px;
}

#logo #compact-mark .cm-tile img {
  width: clamp(65px, 6vw, 90px);
}

/* --------------------------------------------------------------------------
   49. Writing section — 1 ეკრანში ჩატევა (2026-09-16)
   -------------------------------------------------------------------------- */
#writing.be-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  max-height: 100svh;
  padding: clamp(12px, 1.8vh, 18px) 0;
}

#writing .be-header {
  margin: 0 0 clamp(6px, 1vh, 10px);
}

#writing .be-visual-writing {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(420px, calc(100svh - 300px));
}

#writing .be-notes.be-writing-notes {
  margin-top: clamp(6px, 1vh, 10px);
  padding-top: clamp(6px, 1vh, 10px);
}

#writing .be-notes.be-writing-extra {
  margin-top: clamp(6px, 1vh, 10px);
  padding-top: clamp(6px, 1vh, 10px);
}

/* --------------------------------------------------------------------------
   50. Unified Media Border-Radius (14px) - Brand Standard (2026-09-16)
   ყველა ფოტოს, მოქაფს და ვიდეოს აქვს იდენტური 14px ბორდერ რადიუსი.
   გამონაკლისი: სრულეკრანიანი ყდის ვიდეო (#overview .st-cover-film).
   -------------------------------------------------------------------------- */
.st-media:not(.st-cover-film),
.st-media:not(.st-cover-film) video,
.st-media:not(.st-cover-film) img,
.st-intro-figure,
.st-intro-figure img,
.be-section .be-visual,
.be-section .be-visual::after,
.be-section .be-photo,
#social.so-campaign .so-campaign-art,
#social.so-campaign .so-campaign-art img,
.wf-system .wf-spatial-mockup > .wf-spatial-image,
.wf-system .wf-spatial-mockup > .wf-spatial-image img,
.wf-system .wf-spatial-mockup > .wf-spatial-film,
.wf-system .wf-spatial-mockup > .wf-spatial-film video,
.wf-system .wf-spatial-image,
.wf-system .wf-spatial-image img,
.bs-preview,
.bs-preview img,
.bs-web-preview,
.folder-stage,
.folder-stage > img,
.bs-badge-preview,
.bs-badge-preview img {
  border-radius: 14px !important;
}

.bs-web-preview img {
  border-radius: 0 0 14px 14px !important;
}

/* Containment and hardware acceleration for smooth rounded corners */
.st-media:not(.st-cover-film),
.be-section .be-visual,
#social.so-campaign .so-campaign-art,
.wf-system .wf-spatial-mockup > .wf-spatial-image,
.wf-system .wf-spatial-mockup > .wf-spatial-film,
.bs-preview,
.bs-web-preview,
.folder-stage,
.bs-badge-preview {
  overflow: hidden !important;
  isolation: isolate;
}

#name-architecture .sg-detail-content s,
#name-architecture .sg-detail-content del {
  color: #7a8e94;
  text-decoration: line-through;
  text-decoration-color: #8fa0a5;
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}

/* 01.1 — kicker ახლა ტექსტის ბლოკის შიგნითაა, რომ სვეტმა ერთად დაიჭიროს
   ცენტრი. ერთი ვერტიკალური საწყისი სამის ნაცვლად. */
#name-architecture .st-intro-lead .st-editorial-eyebrow { margin: 0 0 14px; }
#name-architecture .st-intro-lead .sg-positioning { max-width: 38ch; }

/* --------------------------------------------------------------------------
   Tooltips — მხოლოდ იმ კონტროლებზე, რომლებსაც ხილული წარწერა არ აქვთ.
   ფსევდო-ელემენტია, ამიტომ a11y ხეში არ ჩანს და aria-label-ს არ ეჯახება.
   -------------------------------------------------------------------------- */
[data-tip]:not(.qr-trigger):not(.qr-top) { position: relative; }
.qr-trigger,
.qr-top {
  position: fixed !important;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: 50%;
  transform: translateY(-50%) scale(.96);
  padding: 7px 10px; border-radius: 7px;
  background: var(--midnight, #16232a); color: #fff;
  font: 600 10px/1 Aktiv, "aktiv-grotesk-extended", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(17, 22, 21, .22);
  opacity: 0; pointer-events: none; z-index: 120;
  transition: opacity .16s ease, transform .16s ease;
}
[data-tip-side="left"]::after { right: calc(100% + 12px); }
[data-tip-side="right"]::after { left: calc(100% + 12px); }
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1); }
@media (hover: none) { [data-tip]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }
@media print { [data-tip]::after { display: none; } }

/* On phones and touch-first tablets, let the browser own finger scrolling.
   Section snapping fights native momentum and can pull a long page away from
   the reader. Smooth behavior still applies to in-page links and controls. */
@media (max-width: 899px), (pointer: coarse) {
  html {
    scroll-snap-type: none;
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}