/* Case page in the home page style: builds on cases.css (reset, skip link, viewer) and home.css (tokens, header, buttons, footer). */
.case-site h1,.case-site h2,.case-site h3 {
  font-weight:800;
  letter-spacing:-.035em
}
/* The case uses the home page container as is (.home-wrap: up to 1824px, side gutters 16–32px); blocks below split it into columns. */
.cs-wrap {
  padding-bottom:clamp(28px,3vw,40px)
}
.cs-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:24px clamp(36px,4vw,72px);
  align-items:center;
  padding-top:clamp(20px,3vw,40px)
}
.cs-back {
  display:inline-block;
  padding:8px 0;
  color:var(--accent);
  font-weight:600;
  text-decoration:none
}
.cs-back:hover {
  text-decoration:underline
}
.cs-kicker {
  margin:18px 0 10px;
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.case-site h1 {
  font-size:clamp(38px,5vw,64px);
  line-height:1.05;
  margin:0 0 20px
}
.cs-lead {
  max-width:62ch;
  font-size:clamp(18px,1.6vw,21px);
  color:#3c4046
}
.cs-facts {
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  margin:24px 0 0
}
.cs-facts dt {
  color:var(--muted);
  font-size:14px
}
.cs-facts dd {
  margin:2px 0 0;
  font-weight:600
}
.cs-facts a {
  color:var(--accent);
  text-decoration:none
}
.cs-facts a:hover {
  text-decoration:underline
}
.cs-status {
  display:inline-block;
  padding:3px 12px;
  border-radius:999px;
  background:#fff1d6;
  border:1px solid var(--amber);
  color:#7a4a0c
}
/* One vertical rhythm: 36–48px between chapters, 14px under headings, 20px before pictures, 24–32px between columns and cards. */
.cs-chapter {
  padding-top:clamp(36px,3.2vw,48px)
}
.case-site h2 {
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.1;
  margin:0 0 14px
}
.case-site h3 {
  font-size:clamp(22px,2vw,26px);
  margin:0 0 12px
}
.cs-text {
  max-width:68ch;
  font-size:18px;
  line-height:1.65
}
.cs-text p:last-child,.cs-chapter>p.cs-text:last-child {
  margin-bottom:0
}
/* Screenshots: framed like the project cards, captions under the picture; each fills its grid column. */
.cs-shot {
  margin:20px 0 0
}
.cs-shot a {
  display:block;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  padding:8px;
  box-shadow:0 10px 30px #6d4a1f14;
  transition:box-shadow .25s,border-color .25s
}
.cs-shot a:hover {
  border-color:var(--amber);
  box-shadow:0 14px 34px #c4781f2b
}
.cs-shot img {
  width:100%;
  border-radius:8px
}
.cs-shot figcaption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
  color:var(--muted);
  font-size:15px
}
.cs-zoom {
  color:var(--accent);
  white-space:nowrap
}
.cs-top .cs-shot {
  margin:0
}
/* Two text chapters and the phone screenshot: stacked text beside the phone on medium screens, three columns on wide ones.
   The phone picture is 400px tall; its column is as wide as the picture at that height plus the 8px frame padding and 1px border. */
.cs-duo {
  --phone-h:400px;
  display:grid;
  grid-template-columns:minmax(0,68ch) auto;
  gap:32px;
  align-items:start
}
.cs-duo-text section+section {
  margin-top:32px
}
.cs-duo .cs-shot {
  margin:0
}
.cs-duo .cs-shot-phone {
  width:calc(var(--phone-h) * 780 / 1688 + 18px)
}
.cs-shot-phone figcaption {
  flex-wrap:wrap;
  gap:2px 12px
}
/* Address search and the application form side by side, each with its own paragraph above; subgrid rows keep both pictures on one line. */
.cs-pair,.cs-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px clamp(24px,2vw,32px);
  align-items:start;
  margin-top:20px
}
.cs-pair-item {
  display:grid;
  grid-row:span 2;
  grid-template-rows:subgrid;
  row-gap:20px
}
.cs-pair .cs-shot {
  margin:0
}
.cs-card {
  display:grid;
  grid-row:span 4;
  grid-template-rows:subgrid;
  row-gap:0;
  padding:clamp(18px,2vw,28px);
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #6d4a1f0f
}
.cs-card>p {
  max-width:68ch;
  font-size:17px;
  line-height:1.6;
  margin:0
}
.cs-card .cs-shot {
  margin-top:20px
}
.cs-card .cs-card-link {
  padding-top:16px
}
.cs-plans {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:20px 0 24px
}
.cs-plans article {
  padding:26px;
  border-radius:16px;
  background:var(--card);
  border:1px dashed #d9c7ab
}
.cs-plans p {
  color:#43474d;
  font-size:16px;
  margin:0
}
.cs-plans .cs-planned {
  display:inline-block;
  margin-bottom:12px;
  padding:2px 10px;
  border-radius:999px;
  background:#f1ece4;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em
}
.cs-end {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(32px,3vw,40px);
  padding:24px 28px;
  border-radius:20px;
  background:linear-gradient(115deg,#fff4df,#fffdf9)
}
.case-site .footer-contact {
  display:inline-flex;
  align-items:center
}
@media(min-width:1280px) {
  .cs-duo {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto
  }
  .cs-duo-text {
    display:contents
  }
  .cs-duo-text section+section {
    margin-top:0
  }
}
@media(max-width:1099px) {
  .cs-top {
    grid-template-columns:1fr
  }
  .cs-intro {
    max-width:860px
  }
}
@media(max-width:899px) {
  .cs-duo,.cs-pair,.cs-cards,.cs-plans {
    grid-template-columns:1fr
  }
  .cs-duo .cs-shot-phone {
    width:auto;
    max-width:340px
  }
}
@media(max-width:699px) {
  .cs-text {
    font-size:17px
  }
  .cs-shot a {
    padding:5px;
    border-radius:12px
  }
  .cs-end {
    padding:20px
  }
  .cs-end .btn {
    flex:1 1 100%
  }
}
/* RouteDome case: a compact page in the full home container — title and subtitle on the left, the small orbit mark at the
   container's right edge, text in pairs of equal columns, a row of screenshot previews, a two-part closing card. */
.case-rd:lang(ka) .cs-kicker {
  text-transform:none;
  letter-spacing:.02em
}
.case-rd .cs-top {
  grid-template-columns:minmax(0,1fr);
  padding-top:clamp(8px,1.4vw,20px)
}
/* Every block spans the whole .home-wrap, so both outer edges match the home page; line length comes from the columns. */
.case-rd .cs-intro {
  max-width:none
}
.case-rd .cs-kicker {
  margin:4px 0 6px
}
/* Denser rhythm for this short case only: 28px between chapters, 10px under headings. */
.case-rd .cs-chapter {
  padding-top:28px
}
.case-rd h2 {
  margin-bottom:10px
}
/* Title row: the name and a smaller subtitle on the left, the mark pushed to the right edge; on the narrowest screens the
   mark wraps under the text, still on the right. */
.rd-title {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px clamp(20px,2.4vw,40px)
}
.rd-title-text {
  flex:1 1 12.5em;
  min-width:0
}
.case-rd h1 {
  font-size:clamp(38px,4.2vw,60px);
  line-height:1.05;
  margin:0
}
.rd-subtitle {
  margin:6px 0 0;
  font-size:clamp(19px,1.6vw,25px);
  font-weight:600;
  line-height:1.3;
  text-wrap:balance
}
.rd-intro-text {
  margin-top:14px
}
.case-rd .cs-facts {
  gap:10px 40px;
  margin-top:12px
}
/* Two equal columns for short paired texts. */
.rd-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px clamp(28px,3vw,56px)
}
.rd-pair.cs-text {
  max-width:none
}
.rd-pair p,.rd-pair .cs-lead {
  max-width:none;
  margin:0
}
.rd-pair p+.rd-levels {
  margin-top:8px
}
.rd-levels {
  margin:0;
  padding-left:1.2em
}
.rd-levels li {
  margin-bottom:0
}
.rd-levels li+li {
  margin-top:4px
}
/* Wide screens: the four short items in two columns, so the list is as tall as the laptop paragraph beside it. */
@media(min-width:1280px) {
  .rd-levels {
    columns:2;
    column-gap:32px
  }
  .rd-levels li {
    break-inside:avoid
  }
}
/* Screenshot previews: two rows of two whole pictures. Each column's share follows its picture's aspect ratio,
   so both pictures in a row get one height without cropping or empty bands. 18px is the frame's padding and
   border; 57px is the 20px gap, both frames and 1px slack against rounding. The cleaned original opens in the lightbox. */
.rd-shots {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:20px;
  margin-top:14px
}
.rd-shots .cs-shot {
  flex:0 0 auto;
  width:calc(18px + (100% - 57px) * var(--rd-share));
  margin:0
}
.rd-shots .cs-shot:nth-child(1) { --rd-share:.59736 }
.rd-shots .cs-shot:nth-child(2) { --rd-share:.40264 }
.rd-shots .cs-shot:nth-child(3) { --rd-share:.42313 }
.rd-shots .cs-shot:nth-child(4) { --rd-share:.57687 }
.rd-tag {
  display:inline-block;
  margin-right:4px;
  padding:0 8px;
  border-radius:999px;
  background:#f1ece4;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em
}
.rd-shots-note {
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px
}
.case-rd .rd-end {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;
  gap:12px clamp(28px,3vw,56px);
  margin-top:28px;
  padding:20px 24px
}
.rd-end p {
  max-width:none;
  margin:0
}
.rd-end h2 {
  margin-bottom:6px
}
.rd-end-join {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px
}
.rd-join {
  flex:1 1 100%;
  font-size:clamp(19px,1.6vw,22px);
  font-weight:700
}
/* The two crossing orbits of the RouteDome controller logo (brand_orbits(): 106×45 stadium at −10°, 84×54 at 18°, same
   centre), recoloured for the cream page. One small light point travels the amber orbit at a steady pace; the orbits stay
   still. Decorative only; motion is a CSS stroke-dashoffset on a copy of the orbit. */
.rd-mark {
  flex:none;
  margin-left:auto;
  width:clamp(140px,10vw,164px);
  height:auto;
  aspect-ratio:118/82;
  overflow:visible;
  pointer-events:none
}
.rd-orbit,.rd-mark-glow,.rd-mark-dot {
  fill:none
}
.rd-orbit {
  stroke-width:2.2
}
.rd-orbit-a {
  stroke:var(--amber-deep)
}
.rd-orbit-b {
  stroke:#4a4540
}
.rd-mark-glow,.rd-mark-dot {
  stroke-linecap:round;
  stroke-dasharray:.001 99.999;
  animation:rd-mark-travel 18s linear infinite
}
.rd-mark-glow {
  stroke:var(--amber-deep);
  stroke-width:8;
  opacity:.45
}
.rd-mark-dot {
  stroke:#fffaf0;
  stroke-width:3.8
}
@keyframes rd-mark-travel {
  to { stroke-dashoffset:-100 }
}
/* Tablets and phones: one column, so the wide route and history pictures stay large. The tall wizard keeps its
   natural size at most and, on tablets, shows its connections and mode part; phones show it whole. */
@media(max-width:1099px) {
  .rd-shots .cs-shot {
    width:100%
  }
  .rd-shots .cs-shot:nth-child(2) {
    max-width:839px
  }
}
@media(min-width:560px) and (max-width:1099px) {
  .rd-shots .cs-shot:nth-child(2) img {
    aspect-ratio:821/660;
    object-fit:cover;
    object-position:top
  }
}
@media(max-width:899px) {
  .rd-pair,.case-rd .rd-end {
    grid-template-columns:1fr
  }
}
/* Narrow screens: the mark beside the title at its small size while it fits. */
@media(max-width:699px) {
  .rd-title {
    gap:16px
  }
  .case-rd h1 {
    font-size:clamp(34px,10vw,40px)
  }
  .rd-subtitle {
    font-size:18px
  }
  .rd-mark {
    width:100px
  }
  .rd-intro-text {
    margin-top:12px
  }
}
/* Reduced motion: the static mark, without the travelling point. */
@media(prefers-reduced-motion:reduce) {
  .rd-mark-glow,.rd-mark-dot {
    animation:none;
    display:none
  }
}