/* ==========================================================================
   Zauzeto (zauzeto.eu)
   Palette: Brač stone paper, Adriatic ink, roof-tile red (= booked),
   shutter green (= vacant). Type: Newsreader (display) + Figtree (text),
   both served from assets/fonts.
   ========================================================================== */

/* Fallback faces shaped like the web fonts (widths measured with fontTools on a Croatian and
   English sample): until Figtree and Newsreader arrive the text wraps the same way, so the
   swap moves nothing (the guides' contents list jumped 0.11 CLS with system-ui = Segoe UI). */
@font-face { font-family: "Figtree Fallback"; font-weight: 100 549; src: local("Arial"), local("Helvetica"), local("Arimo");
  size-adjust: 100.2%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Arimo Bold");
  size-adjust: 95.2%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Gelasio");
  size-adjust: 98.2%; ascent-override: 73.5%; descent-override: 26.5%; line-gap-override: 0%; }

:root {
  --stone: #EDE9E0;
  --stone-2: #E3DED3;
  --paper: #F8F6F1;
  --white: #FFFDF9;
  --line: #D3CCBD;
  --field-line: #938C7E;
  --ink: #1C2B45;
  --ink-deep: #16223A;
  --ink-2: #44526A;
  --ink-3: #5B6579;
  --tile: #B0402A;
  --tile-deep: #943320;
  --shutter: #4E6E58;
  --shutter-soft: #CFDBCB;
  --sea: #3D7A96;
  --sea-soft: #BFD5DC;
  --sun: #E2A94A;

  --on-ink: rgba(248, 246, 241, .8);
  --on-ink-2: rgba(248, 246, 241, .6);
  --on-ink-line: rgba(248, 246, 241, .16);
  --ink-surface: #223351;
  --tshadow: 0 1px 2px rgba(8, 14, 26, .9), 0 3px 12px rgba(8, 14, 26, .62), 0 10px 44px rgba(8, 14, 26, .58);
  --tile-light: #E39A7F;

  --moss: #33473B;
  --moss-deep: #27382E;
  --on-moss: rgba(240, 240, 232, .78);

  /* Fine limestone grain: tiny pre-rendered tiles (no SVG filters to rasterise).
     Plaster is the slow one: soft cloudy patches a few hundred pixels wide, so
     a long scroll doesn't flatten into one even field of beige. */
  --grain: url("../img/grain.png");
  --grain-light: url("../img/grain-light.png");
  --plaster: url("../img/plaster.png");
  --plaster-size: 512px 512px;

  --f-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-xl: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);
  --t-2xl: clamp(2.35rem, 1.4rem + 3.9vw, 4rem);
  --t-3xl: clamp(3rem, 12.8vw, 4.75rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --maxw: 80rem;
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --header-h: 4.5rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --shadow-object:
    0 1px 1px rgba(28, 43, 69, .06),
    0 10px 24px -10px rgba(28, 43, 69, .24),
    0 34px 60px -34px rgba(28, 43, 69, .38);
}

@media (min-width: 860px) {
  :root {
    --t-base: 1.125rem;
    --t-md: 1.3125rem;
    --t-3xl: clamp(4.25rem, 7.7vw, 7.25rem);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* --sh: one hundredth of the screen's height. main.js replaces 1svh with that
   height in pixels, taken once and again only when the phone turns: some phone
   browsers resize the page whenever their toolbars slide in or out (each time
   the reader turns round), and every height in screens moved with them. */
:root { --sh: 1svh; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Big monitors: the whole design grows with the screen instead of floating
   in a narrow column. Sizes are in rem, so one root size scales everything:
   16px up to a 1440px-wide window, 18px at 1920, 20px from 2400 up. */
@media (min-width: 1441px) {
  html { font-size: min(calc(.625rem + .4167vw), 1.25rem); }
}

body {
  margin: 0;
  background-color: var(--stone);
  background-image: var(--plaster), var(--grain);
  background-size: var(--plaster-size), auto;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
p { max-width: 65ch; text-wrap: pretty; }
h2, h3, .h2, .h3 { text-wrap: balance; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

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

::selection { background: var(--ink); color: var(--paper); }

/* Sections receive focus after an in-page jump (for screen readers); no ring around a whole section. */
main[tabindex="-1"]:focus,
section[tabindex="-1"]:focus { outline: none; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 1rem; top: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Type ---------- */

.h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 17ch;
  text-wrap: balance;
}

.h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lead {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
}

/* One word per headline may fall to italic: the signature typographic move. */
.hero__title em,
.h2 em,
.h3 em,
.more__list em,
.prose h1 em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .28em;
  transition: color .2s;
}
.link:hover { color: var(--tile); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { min-height: 2.5rem; padding: 0 1.1rem; font-size: .9375rem; }

.btn--tile { background: var(--tile); color: var(--paper); }
.btn--tile:hover { background: var(--tile-deep); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-deep); }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--white); color: var(--tile-deep); }

/* The next step, where an argument ends. */
.next-step { max-width: none; margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }

.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__word {
  display: block;
  width: auto;
  height: 1.5rem;
  color: inherit;
  transform: translateY(-1px);
}
.brand--light { color: var(--paper); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: transform .5s var(--ease-out), background-color .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  background: rgba(237, 233, 224, .9);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.menu-open .site-header { background: var(--stone); box-shadow: none; transform: none; }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-header__inner > .brand { margin-right: auto; }
.nav__list {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  position: relative;
  display: block;
  padding-block: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .25rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav a:hover::after,
.nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.lang {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .2s;
}
.lang:hover { background: var(--stone-2); }

.menu-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .45s var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 939px) {
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
  .site-header__actions { margin-left: auto; }
}
@media (max-width: 519px) {
  .site-header__actions .btn { display: none; }
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  background: var(--stone);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s, visibility 0s .35s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .35s; }

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s, transform .6s var(--ease-out);
}
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: .16s; }
.menu__list a {
  display: block;
  padding: .6rem 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.15;
  text-decoration: none;
}
.menu__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.menu__foot a:not(.btn) { font-weight: 500; }
.menu-open, .menu-open body { overflow: hidden; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }

/* No content-visibility on these sections: a section that sized itself only
   when it came near the screen moved the page under the reader in Safari,
   which has no scroll anchoring (an iPhone, scrolling back up, 2026-10-03). */

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 3rem;
  }
}

/* Two more ways to open a section, so neighbours never repeat a skeleton:
   services and pricing split the heading and the lead across the row,
   the photographs centre them, the process stacks them in one column. */
.section-head--center {
  justify-items: center;
  text-align: center;
}
.section-head--center .h2 { max-width: 18ch; }
.section-head--center .lead { max-width: 46ch; }
.section-head--stack .lead { max-width: 40ch; }
@media (min-width: 900px) {
  .section-head--center,
  .section-head--stack { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .section-head--stack { max-width: 36rem; }
}

/* Heading reveal: each line rises out of its own mask, one after another. */
.js [data-reveal] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .14em .03em .16em;
  margin: -.14em -.03em -.16em;
}
.js [data-reveal] .w > span {
  display: inline-block;
  transform: translateY(118%) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--line, 0) * 110ms);
}
.js [data-reveal].is-visible .w > span { transform: none; }

/* ---------- Hero ---------- */

/* ---------- Hero: the view a guest is booking ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* the whole first screen: the škure wait below the fold until you scroll */
  min-height: calc(var(--sh) * 100);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3.5rem, calc(var(--sh) * 9), 6.5rem);
  overflow: clip;
  color: var(--paper);
  background: var(--ink-deep);
}

/* A 24px blur of the first frame, inline in the page, so the hero has
   colour from the first paint instead of a flat block of navy. */
.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--ink-deep);
  background-size: cover;
  background-position: 56% 46%;
}
.hero__media img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 46%;
}
/* The loop fades in over the still once it can play; the still never leaves. */
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__video.is-ready { opacity: 1; }
/* Type needs a floor to stand on. Shade gathers at the bottom and to the
   left, so the sky and the bird stay clear. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 20, 36, .55), rgba(12, 20, 36, .12) 18%, rgba(12, 20, 36, 0) 34%),
    linear-gradient(to top, rgba(12, 20, 36, .86), rgba(12, 20, 36, .5) 30%, rgba(12, 20, 36, .06) 62%),
    linear-gradient(to right, rgba(12, 20, 36, .52), rgba(12, 20, 36, 0) 64%),
    var(--grain-light);
}

.hero__inner { position: relative; }
.hero__copy { position: relative; z-index: 0; max-width: 44rem; }
/* The words carry their own shade. The film behind them is a moving
   background nobody controls frame to frame, and the sun glitter on the bay
   is exactly where the headline sits, so a soft dark pool follows the copy
   and dies out well before the edges of the frame. */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -40% -30% -36%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 48% 52%,
    rgba(8, 14, 26, .6) 0%, rgba(8, 14, 26, .5) 42%, rgba(8, 14, 26, .3) 64%, rgba(8, 14, 26, .12) 82%, rgba(8, 14, 26, 0) 100%);
}
@media (max-width: 700px) {
  .hero__copy::before {
    inset: -30% -34% -26% -34%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(8, 14, 26, .8) 0%, rgba(8, 14, 26, .7) 42%, rgba(8, 14, 26, .46) 64%, rgba(8, 14, 26, .18) 82%, rgba(8, 14, 26, 0) 100%);
  }
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-3xl);
  line-height: .98;
  letter-spacing: -.025em;
  width: fit-content;
  text-shadow: var(--tshadow);
}
/* The headline's own pool of shade. The radii are about twice the headline's
   box, so even its corners sit on the flat middle of the gradient: the pale
   sky at the top right of "slobodnog" was the worst pixel on the film. */
.hero__title { position: relative; z-index: 0; }
.hero__title::before,
.skure__copy .h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -90% -70%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(8, 14, 26, .56) 0%, rgba(8, 14, 26, .5) 42%, rgba(8, 14, 26, .3) 64%, rgba(8, 14, 26, .12) 82%, rgba(8, 14, 26, 0) 100%);
}
.skure__copy .h2 { position: relative; z-index: 0; }
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.hero__title .line > span { display: inline-block; }
/* What the studio does, inside the H1 ahead of the slogan: search engines read the H1
   as the page topic, and the slogan alone names no service. */
.hero__kicker {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248, 246, 241, .9);
}

.hero__lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  color: rgba(248, 246, 241, .94);
  text-shadow: var(--tshadow);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.hero__actions .btn--ghost { border-color: rgba(248, 246, 241, .55); color: var(--paper); }
.hero__actions .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero__note {
  margin-top: 1.5rem;
  font-size: var(--t-sm);
  color: rgba(248, 246, 241, .78);
  text-shadow: var(--tshadow);
}
.hero__note strong { color: rgba(248, 246, 241, .92); font-weight: 600; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: rgba(248, 246, 241, .86);
  text-shadow: var(--tshadow);
}
/* Text flows normally (a flex row would put gaps around the bold price);
   the tick sits in the padding. */
.hero__facts li {
  position: relative;
  padding-left: 1.15rem;
}
/* A small drawn tick, in the shutter green the site uses for "free". */
.hero__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .6rem;
  height: .32rem;
  border: solid #B9CDB8;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.hero__facts strong { color: var(--paper); font-weight: 600; }
@media (max-width: 519px) {
  .hero__facts { flex-direction: column; gap: .45rem; }
}

/* A line that keeps drawing itself downwards, the way a scroll does. */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(4.75rem, calc(var(--sh) * 10), 7rem);
  display: grid;
  justify-items: center;
  gap: .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248, 246, 241, .6);
}
.hero__cue i {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(248, 246, 241, 0), rgba(248, 246, 241, .75));
  transform-origin: top;
}
/* twice, then it rests: under five seconds of movement (WCAG 2.2.2) */
.js .hero__cue i { animation: cue-draw 2.4s var(--ease-in-out) 2; }
@keyframes cue-draw {
  0% { transform: scaleY(0); opacity: 0; }
  22% { opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3.5rem); opacity: 0; }
}
@media (max-width: 859px) { .hero__cue { display: none; } }

/* Load sequence: pure CSS so it starts on the very first paint. */
.js .hero__title .line > span { animation: title-rise 1s var(--ease-out) both; }
.js .hero__title .line + .line > span { animation-delay: .08s; }
.js .hero__kicker { animation: fade-rise .9s var(--ease-out) both; }
.js .hero__lead,
.js .hero__actions,
.js .hero__note,
.js .hero__facts { animation: fade-rise .9s var(--ease-out) both; }
.js .hero__lead { animation-delay: .18s; }
.js .hero__actions { animation-delay: .28s; }
.js .hero__note,
.js .hero__facts { animation-delay: .38s; }
@keyframes title-rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}
@keyframes fade-rise {
  from { transform: translateY(12px); }
  to { transform: none; }
}

/* The header floats over the film until the page starts to move. */
.home .site-header:not(.is-scrolled),
.home .site-header:not(.is-scrolled) .brand { color: var(--paper); }
.home .site-header:not(.is-scrolled) .lang:hover { background: rgba(248, 246, 241, .18); }
.home .site-header:not(.is-scrolled) .menu-toggle span { background: var(--paper); }
.home.menu-open .site-header .menu-toggle span { background: var(--ink); }
.home.menu-open .site-header,
.home.menu-open .site-header .brand { color: var(--ink); }

/* ---------- The sign and the calendar (they close the page) ---------- */

.proof {
  position: relative;
  container-type: inline-size;
  margin-top: .5rem;
}
.proof .stage {
  position: relative;
  padding-top: 12.5em;
}
.proof .hanger { top: 0; right: 1.5em; }
.proof .cal { margin-top: 0; }
/* Dark ironwork would disappear against the night sky behind this section. */
.proof .bracket,
.proof .sign__chains { color: rgba(248, 246, 241, .8); }
@media (max-width: 519px) {
  .proof .hanger { right: 0; }
}

.stage {
  font-size: min(16px, calc((100vw - 2 * var(--gutter)) / 32));
  font-size: min(16px, calc(100cqw / 32));
}

.hanger {
  position: absolute;
  z-index: 3;
  top: 5%;
  right: 3%;
  width: 15em;
  height: 12em;
}

.bracket {
  position: absolute;
  top: 0; right: 0;
  width: 12em;
  height: 6em;
  color: var(--ink);
  overflow: visible;
  filter: drop-shadow(.25em .35em .2em rgba(28, 43, 69, .28));
}

.sign {
  position: absolute;
  top: 1.55em;
  right: 2em;
  width: 13em;
  cursor: pointer;
}
.sign__swing {
  transform-origin: 50% .2em;
  perspective: 40em;
}
.sign__chains {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 4em;
  overflow: visible;
  color: var(--ink);
}
.sign__plate {
  position: relative;
  z-index: 1;
  height: 6.6em;
  margin-top: -.6em;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.5, -.35, .25, 1.3);
}
.sign.is-booked .sign__plate,
.no-js .sign__plate { transform: rotateY(180deg); }

.sign__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45em;
  border-radius: .9em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: var(--shadow-object);
}
.sign__face::before {
  content: "";
  position: absolute;
  inset: .5em;
  border: .12em solid currentColor;
  border-radius: .5em;
  opacity: .45;
}
.sign__face--free {
  background-color: var(--paper);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 42%), var(--grain);
  color: var(--shutter);
}
.sign__face--booked {
  background-color: var(--tile);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 45%), var(--grain);
  color: var(--paper);
  transform: rotateY(180deg);
}

.sign__word {
  padding-left: .13em;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sign__langs {
  font-size: .74em;
  font-weight: 500;
  letter-spacing: .02em;
}

.cal {
  position: relative;
  z-index: 2;
  color: var(--ink);
  width: 28em;
  margin-top: -8em;
  padding: 1.6em 1.6em 1.3em;
  background: var(--paper);
  border-radius: 1.2em;
  box-shadow: var(--shadow-object);
}
.cal__head { min-height: 3em; }
.cal__month {
  font-family: var(--f-display);
  font-size: 2em;
  line-height: 1;
  letter-spacing: -.01em;
}
.cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: .55em;
  border-bottom: 1px solid var(--line);
  font-size: .78em;
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
}
.cal__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 3.5em;
  border-bottom: 1px solid var(--stone-2);
}
.cal__day {
  position: relative;
  text-align: center;
}
.cal__day b {
  display: block;
  padding-top: .55em;
  font-size: .8em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.cal__day.is-out {
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(211, 204, 189, .55) 4px 5px);
}
.cal__day.is-free::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  top: 1.95em;
  height: 1.05em;
  border-radius: .3em;
  background: var(--shutter-soft);
}

.cal__bar {
  --gl: 0px;
  --gr: 0px;
  position: absolute;
  top: 1.85em;
  left: calc(var(--x) * 100% / 7 + var(--gl));
  width: calc(var(--w) * 100% / 7 - var(--gl) - var(--gr));
  height: 1.25em;
  display: flex;
  align-items: center;
  padding-left: .55em;
  overflow: hidden;
  background: var(--tile);
  color: var(--paper);
  transform: scaleX(0);
  transform-origin: left center;
  cursor: pointer;
  transition-property: transform, box-shadow, background-color;
  transition-duration: .5s;
  transition-timing-function: var(--ease-in-out);
}
.cal__bar.is-start { --gl: 3px; border-radius: .35em 0 0 .35em; }
.cal__bar.is-end { --gr: 3px; border-top-right-radius: .35em; border-bottom-right-radius: .35em; }
.cal__bar span {
  font-size: .66em;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s .3s;
}
.cal__bar.is-in { transform: none; }
.cal__bar.is-in span { opacity: 1; }
.no-js .cal__bar { transform: none; }

@container (max-width: 400px) {
  .cal__bar span { display: none; }
}

.cal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5em 1em;
  margin-top: 1.1em;
  font-size: .8em;
  color: var(--ink-2);
}
.cal__count b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color .4s;
}
.cal.is-full .cal__count b { color: var(--tile); }
.cal__legend { display: flex; gap: 1em; }

.key {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.key::before {
  content: "";
  width: 1em;
  height: .6em;
  border-radius: .2em;
  background: var(--shutter-soft);
}
.key--booked::before, .key--fee::before { background: var(--tile); }
.key--own::before { background: var(--ink-2); }

/* ---------- Commission calculator ---------- */

/* The one inverted band in the upper half of the page: the number has to hit. */
.calc {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  background-image: var(--grain-light);
  color: var(--paper);
}
.calc .h2 { color: var(--paper); }
.calc__intro p { color: rgba(248, 246, 241, .84); }

.calc__grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 960px) {
  .calc__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .calc__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.calc__intro > * + * { margin-top: 1.25rem; }

.calc__panel {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--ink-surface);
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-lg);
}

.calc__controls {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 640px) {
  .calc__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

.range {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .35rem .75rem;
}
@media (min-width: 640px) {
  .range { grid-template-columns: 1fr; }
}
.range label {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(248, 246, 241, .86);
}
.range output {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.range input { grid-column: 1 / -1; }

input[type="range"] {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--paper) var(--p), rgba(248, 246, 241, .22) var(--p));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--paper);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(28, 43, 69, .45), 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
input[type="range"]:active::-webkit-slider-thumb { transform: rotate(-7deg) scale(1.08); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(28, 43, 69, .45), 0 0 0 5px rgba(227, 154, 127, .5); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(248, 246, 241, .22); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--paper); }
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 16px;
  border: 2px solid var(--paper);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(28, 43, 69, .2);
}
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(176, 64, 42, .3); }

.calc__result {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--on-ink-line);
}
.calc__big {
  font-family: var(--f-display);
  font-size: clamp(3.25rem, 2rem + 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--tile-light);
  font-variant-numeric: tabular-nums;
}
.calc__line {
  margin-top: .75rem;
  font-size: var(--t-md);
  line-height: 1.45;
}
.calc__line strong { font-weight: 700; }

.nights {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1.5rem;
}
.nights i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(248, 246, 241, .45);
  transition: background-color .35s, transform .35s var(--ease-out);
}
.nights i.is-fee { transform: translateY(-1px); }
.nights i.is-fee { background: var(--tile-light); }
.nights i.is-off { display: none; }
.nights-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: .85rem;
  font-size: .8125rem;
  color: rgba(248, 246, 241, .86);
}
.calc .key--own::before { background: rgba(248, 246, 241, .45); }
.calc .key--fee::before { background: var(--tile-light); }

.calc__payback {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  color: rgba(248, 246, 241, .92);
  background: rgba(248, 246, 241, .1);
  border-radius: var(--r-md);
  max-width: none;
}
.calc__payback strong { font-weight: 700; }

/* Quick rates and the flat-rate VAT box, under the three sliders. */
.calc__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.5rem;
}
.calc__presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.calc__preset {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--on-ink-line);
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 246, 241, .9);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.calc__preset:hover { border-color: rgba(248, 246, 241, .6); }
.calc__preset.is-on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.calc__preset:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.calc__vat {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-size: var(--t-sm);
  color: rgba(248, 246, 241, .86);
  cursor: pointer;
}
.calc__vat input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--tile); }
.calc__rate { font-family: var(--f-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.calc__rate:empty { display: none; }
.calc__fine {
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: rgba(248, 246, 241, .68);
}

/* Who finds you, if not the platform: the answer straight under the sum. */
.calc__found {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--on-ink-line);
}
.calc__found .h3 { color: var(--paper); max-width: 26ch; }
.calc__found-lead { max-width: 58ch; margin-top: .9rem; color: rgba(248, 246, 241, .84); }
.calc__found-list {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .calc__found-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc__found-list li { padding-top: 1rem; border-top: 2px solid var(--tile-light); }
.calc__found-list b { display: block; font-weight: 600; color: var(--paper); }
.calc__found-list span { display: block; margin-top: .45rem; font-size: var(--t-sm); line-height: 1.55; color: rgba(248, 246, 241, .78); }

/* ---------- Services ---------- */

.service {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.service + .service { border-top: 1px solid var(--line); }
.service:first-of-type { padding-top: 0; }
.service:last-of-type { padding-bottom: 0; }

.service__text > * + * { margin-top: 1.25rem; }
.service__text > .ticks { margin-top: 1.75rem; }
.service__text > .link { display: inline-block; margin-top: 2rem; }
.service__text p { color: var(--ink-2); }

@media (min-width: 900px) {
  .service--more { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
}

.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.ticks li {
  position: relative;
  padding-left: 1.65rem;
  line-height: 1.45;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .85rem;
  height: .45rem;
  border-radius: 2px;
  background: var(--shutter);
}
.plan--main .ticks li::before { background: var(--shutter-soft); }

/* Not just apartments */
.more__list {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1rem + 2.8vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  max-width: 26ch;
  text-wrap: balance;
}
.service--more .service__text p { margin-top: 1rem; }
.service__side > .link { display: inline-block; margin-top: 1.75rem; }

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .plans {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
  }
  .plan--main { grid-row: 1 / 3; }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.plan__name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.plan__price {
  font-family: var(--f-display);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
}
.plan__desc { color: var(--ink-2); }
.plan .ticks { margin-top: .25rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }

.plan--main {
  gap: 1.25rem;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.plan--main .plan__name { font-size: 1.25rem; }
.plan--main .plan__price { font-size: clamp(3.75rem, 2rem + 7vw, 7rem); }
.plan__from {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-ink);
}
.plan--main .plan__desc { color: var(--on-ink); }
.plan__terms {
  margin-top: .6rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.plan--main .plan__terms { color: #CFDBCB; }
.plan__promise {
  margin-top: .9rem;
  font-size: var(--t-sm);
  color: var(--on-ink);
}
.plan--main .ticks { margin-block: .75rem 2rem; gap: .9rem; font-size: 1.0625rem; }
@media (min-width: 640px) and (max-width: 899px) {
  .plan--main .ticks { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

.pricing__note {
  margin-top: 2rem;
  color: var(--ink-2);
}
/* links from the home page into the service pages */
.pricing__more { margin-top: 2rem; color: var(--ink-2); }
.pricing__more + .pricing__note { margin-top: .75rem; }
.section-more { margin-top: 1rem; }
.section-head--center .section-more { text-align: center; }
.calc__next {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .28em;
}
.calc__next:hover { color: var(--tile-soft, #f2b8a4); }
.calc__fine a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.menu__label {
  margin: 1.75rem 0 .25rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.menu__pages { list-style: none; margin: 0; padding: 0; }
.menu__pages a { display: flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--ink); }
.land-crumbs { margin-bottom: .75rem; font-size: var(--t-sm); color: var(--ink-3); }
/* the guides: one readable column */
.guide { max-width: 46rem; }
.land-hero--guide { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.land-hero--guide h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; margin: .5rem 0 1rem; }
.guide__meta { margin-top: .75rem; font-size: var(--t-sm); color: var(--ink-3); }
.guide__toc { margin-top: 1.5rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); background: var(--paper); }
.guide__toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.guide__toc a { text-decoration: underline; text-underline-offset: .2em; }
.guide-body { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.guide__sec { scroll-margin-top: calc(var(--header-h) + 1rem); }
.guide__sec + .guide__sec { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.guide__sec .h3 { margin-bottom: .85rem; }
.guide__sec p, .guide__sec li { color: var(--ink-2); }
.guide__sec p + p, .guide__sec p + ul, .guide__sec p + ol, .guide__sec ul + p, .guide__sec ol + p { margin-top: .85rem; }
.guide__sec .ticks { display: grid; gap: .6rem; }
.guide__sec b { color: var(--ink); font-weight: 600; }
.guide__steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.guide__check, .guide__offer { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg, 18px); }
.guide__check { background: var(--paper); border: 1px solid var(--line); }
.guide__check .ticks { display: grid; gap: .5rem; margin-top: .9rem; }
.guide__offer { background: var(--ink); color: var(--paper); }
.guide__offer p { margin-top: .75rem; color: var(--on-ink); }
.guide__offer .land-hero__cta { margin-top: 1.25rem; }
.guide__offer .btn--ghost { border-color: rgba(248, 246, 241, .55); color: var(--paper); }
.guide__sources { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--t-sm); color: var(--ink-3); }
.guide__offer-line { margin-top: 1rem; }
.footer__ai { font-size: .75rem; opacity: .6; }
.guide__offer-line .link { display: inline-flex; align-items: center; min-height: 44px; }
.guide__ba { margin: 1.5rem 0 0; }
.guide__ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.guide__ba img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md, 12px); }
.guide__ba figcaption { margin-top: .6rem; font-size: var(--t-sm); color: var(--ink-3); }
.guide__example { margin: 1rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--tile); background: var(--paper); border-radius: 0 var(--r-md, 12px) var(--r-md, 12px) 0; }
.guide__example p + p { margin-top: .6rem; }
.land-titles { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.land-titles li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); background: var(--white); }
.land-titles__old { color: var(--ink-3); font-size: var(--t-sm); text-decoration: line-through; text-decoration-color: rgba(176, 64, 42, .55); }
.land-titles__arrow { color: var(--tile); }
.land-titles__new { font-weight: 600; }
@media (max-width: 639px) { .land-titles li { grid-template-columns: 1fr; } .land-titles__arrow { display: none; } }
.guide__sources ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.guide__sources a { text-decoration: underline; text-underline-offset: .2em; }
.land-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.land--ink .land-crumbs { color: rgba(248, 246, 241, .72); }

/* ---------- Blocks arrive rather than simply being there ---------- */

.js [data-rise] {
  opacity: 0;
  transform: translateY(22px);
}
.js [data-rise].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .85s var(--ease-out) var(--d, 0s),
    transform .85s var(--ease-out) var(--d, 0s);
}
/* Inside a price card the number lands a beat after the card itself. */
.js .plan[data-rise] .plan__price {
  opacity: 0;
  transform: translateY(14px);
}
.js .plan[data-rise].is-in .plan__price {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--ease-out) calc(var(--d, 0s) + .22s),
    transform .7s var(--ease-out) calc(var(--d, 0s) + .22s);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rise],
  .js [data-rise].is-in,
  .js .plan[data-rise] .plan__price {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Before and after: one room, photographed twice ---------- */

/* Not the stone of the rest of the page: a shaded green wall with daylight
   coming through slats, so this reads as its own room. */
.compare {
  color: var(--paper);
  background-color: var(--moss);
  background-image:
    repeating-linear-gradient(101deg,
      rgba(255, 246, 224, 0) 0,
      rgba(255, 246, 224, .05) clamp(30px, 4.4vw, 54px),
      rgba(255, 246, 224, 0) clamp(78px, 11vw, 136px)),
    radial-gradient(86% 58% at 72% -4%, rgba(255, 238, 203, .17), rgba(255, 238, 203, 0) 62%),
    var(--plaster), var(--grain-light);
  background-size: auto, auto, var(--plaster-size), auto;
}
.compare .h2 { color: var(--paper); }
.compare .lead { color: var(--on-moss); }

.ba { --x: 50; position: relative; }
.ba__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--moss-deep);
  box-shadow:
    0 2px 2px rgba(12, 20, 14, .2),
    0 30px 60px -30px rgba(8, 14, 10, .7);
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The "before" is laid over the "after" and cut back to the handle. */
.ba__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((100 - var(--x)) * 1%) 0 0);
}

.ba__tag {
  position: absolute;
  pointer-events: none;
  top: clamp(.75rem, 2vw, 1.25rem);
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(14, 22, 18, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  transition: opacity .3s;
}
.ba__tag--before { left: clamp(.75rem, 2vw, 1.25rem); opacity: clamp(0, calc((var(--x) - 8) / 10), 1); }
.ba__tag--after { right: clamp(.75rem, 2vw, 1.25rem); opacity: clamp(0, calc((92 - var(--x)) / 10), 1); }

.ba__handle {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 1%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 0 18px rgba(8, 14, 10, .5);
}
.ba__handle i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(2.75rem, 6vw, 3.5rem);
  height: clamp(2.75rem, 6vw, 3.5rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 6px 18px -6px rgba(8, 14, 10, .8);
  transition: transform .25s var(--ease-out);
}
/* Two small arrows, drawn rather than fetched. */
.ba__handle i::before,
.ba__handle i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: 1.8px solid var(--ink);
  border-width: 1.8px 1.8px 0 0;
}
.ba__handle i::before { left: 30%; transform: rotate(-135deg); }
.ba__handle i::after { right: 30%; transform: rotate(45deg); }

/* The real control: a range input stretched over the picture. Dragging,
   clicking and the arrow keys all work, and screen readers get a slider. */
input.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
input.ba__range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
input.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100%; margin: 0; border: 0; box-shadow: none; background: transparent; }
input.ba__range::-moz-range-track { height: 100%; background: transparent; }
input.ba__range::-moz-range-progress { height: 100%; background: transparent; }
input.ba__range::-moz-range-thumb { width: 3rem; height: 100%; border: 0; box-shadow: none; background: transparent; }
input.ba__range:focus-visible ~ .ba__handle i { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 3px var(--tile); }
.ba__frame:hover .ba__handle i { transform: translate(-50%, -50%) scale(1.06); }

@media (min-width: 700px) { .ba__frame { aspect-ratio: 3 / 2; } }

.ba figcaption {
  max-width: 62ch;
  margin-top: 1.5rem;
  font-size: var(--t-sm);
  color: var(--on-moss);
}

/* The listing version: the line cuts the photos, which is where the change
   shows at a glance. The words sit under them in two columns, before and
   after, always readable; the side the line is pulled towards stays lit. */
.ad {
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(.75rem, 2vw, 1.25rem);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow:
    0 2px 2px rgba(12, 20, 14, .2),
    0 30px 60px -30px rgba(8, 14, 10, .7);
}
.ba--listing .ba__frame {
  aspect-ratio: auto;
  border-radius: 12px;
  background: var(--white);
  box-shadow: none;
}
.ba--listing .ba__clip { background: var(--white); }
.ba--listing .ba__clip .ad__photos { height: 100%; }
.ba--listing figcaption { margin-inline: auto; text-align: center; }

.ad__photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  aspect-ratio: 2.35 / 1;
}
.ad__photos > :first-child { grid-row: 1 / 3; }
.ad__photos img,
.ad__more {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.ad__more { position: relative; }
.ad__more b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 26, 36, .52);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}

.ad__pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(.25rem, 1vw, .75rem) .5rem;
}
.ad__pair::before {
  content: "";
  position: absolute;
  top: clamp(1.1rem, 2.5vw, 1.6rem);
  bottom: .5rem;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.ad__side { transition: opacity .25s; }
/* both sides stay fully readable wherever the line is (dimming the far side cost it its contrast) */

.ad__label {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ad__side--after .ad__label { color: var(--tile); }
.ad__title {
  margin: .45rem 0 0;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ad__side--before .ad__title { letter-spacing: .01em; }
.ad__meta { margin: .35rem 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.ad__points {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}
.ad__points li {
  padding: .28rem .65rem;
  border-radius: 8px;
  background: var(--stone);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.ad__points b { font-weight: 600; color: var(--ink); }
.ad__desc {
  margin: .8rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 639px) {
  .ad__photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }
  .ad__photos > :first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .ad__photos > :not(:first-child) { aspect-ratio: 1; }
  .ad__pair { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .ad__pair::before { display: none; }
  .ad__side + .ad__side { padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .ad__desc { font-size: var(--t-sm); }
}

/* ---------- Process ---------- */

.process {
  color: var(--paper);
  background-color: var(--ink);
  background-image:
    radial-gradient(110% 68% at 50% 0%, rgba(90, 116, 152, .3), rgba(90, 116, 152, 0) 68%),
    var(--grain-light);
}
.process .h2 { color: var(--paper); }
.process .lead { color: var(--on-ink); }
.process .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- The studio: four rules instead of a team photo ---------- */

.about {
  background-color: var(--paper);
  background-image: var(--plaster), var(--grain);
  background-size: var(--plaster-size), auto;
}
.about .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rules {
  display: grid;
  gap: 2.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}
@media (min-width: 640px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rule {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
/* The rule's line draws itself in as the card arrives. */
.rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--shutter);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) calc(var(--d, 0s) + .15s);
}
.js .rule.is-in::before,
.no-js .rule::before { transform: scaleX(1); }
.rule__icon {
  width: 2rem;
  height: 2rem;
  color: var(--shutter);
}
.rule__title {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.rule p {
  margin-top: .55rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ---------- FAQ ---------- */

.faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: 4px; }
.qa__icon {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -.05rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color .3s, transform .45s var(--ease-out);
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -.75px 0 0 -5px;
  background: var(--ink);
  transition: transform .45s var(--ease-out), background-color .3s;
}
.qa__icon::after { transform: rotate(90deg); }
.qa summary:hover .qa__icon { background: var(--ink); }
.qa summary:hover .qa__icon::before,
.qa summary:hover .qa__icon::after { background: var(--paper); }
.qa[open] .qa__icon { transform: rotate(180deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__body { overflow: hidden; }
.qa__body p {
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-2);
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--paper);
}
.contact__photo {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto 0;
  width: 100%;
  height: 36rem;
  object-fit: cover;
  object-position: 88% 45%;
}
.contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    var(--grain-light),
    linear-gradient(180deg, rgba(28, 43, 69, .5) 0%, rgba(28, 43, 69, .8) 18rem, rgba(28, 43, 69, .97) 36rem);
}
@media (min-width: 960px) {
  .contact__photo { inset: 0; height: 100%; object-position: 70% 50%; }
  .contact::after {
    background:
      var(--grain-light),
      linear-gradient(100deg, rgba(28, 43, 69, .97) 0%, rgba(28, 43, 69, .9) 40%, rgba(28, 43, 69, .55) 100%);
  }
}
.contact__grid { display: grid; gap: 3rem; }
/* On a phone the form comes straight after the invitation; the sign and the
   calendar follow it as the page's last word. */
@media (max-width: 959px) {
  .contact__grid .form { order: 1; }
  .contact__grid .proof { order: 2; }
}
@media (min-width: 960px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .contact__intro { grid-column: 1; grid-row: 1; }
  .contact__grid .proof { grid-column: 1; grid-row: 2; }
  .contact__grid .form { grid-column: 2; grid-row: 1 / span 2; }
}
.contact__intro > p {
  margin-top: 1.5rem;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--on-ink);
}
.contact__direct {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.contact__direct dt { font-size: var(--t-sm); color: var(--on-ink-2); }
.contact__direct dd { font-size: 1.25rem; font-weight: 500; }
.contact__direct a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .35s var(--ease-out);
}
.contact__direct a:hover { background-size: 0 1px; background-position: 100% 100%; }

.form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--paper);
  border-radius: var(--r-lg);
  color: var(--ink);
}
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form .span-2 { grid-column: 1 / -1; }
}
.field { display: grid; gap: .45rem; align-content: start; }
.field > label,
.field > legend,
.choices legend {
  padding: 0;
  font-size: var(--t-sm);
  font-weight: 600;
}
.opt { font-weight: 400; color: var(--ink-3); }
.input {
  width: 100%;
  min-height: 3.15rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--field-line);
  border-radius: 10px;
  background: var(--white);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: #697082; }
.input:hover { border-color: var(--ink-3); }
.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(28, 43, 69, .12);
}
textarea.input { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.field.is-invalid .input { border-color: var(--tile); }
.field__error {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--tile-deep);
}
.field__error:empty { display: none; }

.choices {
  min-width: 0;
  padding: 0;
  border: 0;
}
.choices legend { margin-bottom: .6rem; }
.choices__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1.5px solid var(--field-line);
  border-radius: 999px;
  background: var(--white);
  font-size: .9375rem;
  font-weight: 500;
  transition: background-color .2s, color .2s, border-color .2s;
}
.choice input:hover + span { border-color: var(--ink); }
.choice input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.choice input:focus-visible + span { outline: 2px solid var(--tile); outline-offset: 2px; }

.check {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.check { position: relative; cursor: pointer; }
.check__input {
  position: absolute;
  left: 0; top: .1rem;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check__box {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: .1rem;
  border: 1.5px solid var(--field-line);
  border-radius: 6px;
  background: var(--white);
  transition: background-color .2s, border-color .2s;
}
.check__box::after {
  content: "";
  position: absolute;
  left: .38rem; top: .16rem;
  width: .4rem;
  height: .72rem;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg) scale(0);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.check__input:hover + .check__box { border-color: var(--ink); }
.check__input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check__input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check__input:focus-visible + .check__box { outline: 2px solid var(--tile); outline-offset: 2px; }
.field.is-invalid .check__box { border-color: var(--tile); }
.check a { color: var(--ink); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.form__status { font-weight: 500; font-size: .9375rem; }
.form__status.is-ok { color: var(--shutter); }
.form__status.is-error { color: var(--tile-deep); }
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  background-color: var(--ink);
  background-image: var(--grain-light);
  color: var(--on-ink);
}
.footer__top {
  display: grid;
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid var(--on-ink-line);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 3rem; align-items: start; }
}
.footer__top .brand { justify-self: start; align-self: start; }
.footer__about { font-size: .9375rem; max-width: 42ch; }
.footer__nav ul {
  display: grid;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: .25em; }

.footer__legal {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-ink-line);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--on-ink-2);
}
.legal {
  display: grid;
  gap: .3rem 2.5rem;
}
@media (min-width: 700px) {
  .legal { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1100px) {
  .legal { grid-template-columns: repeat(3, max-content); }
}
.legal div { display: flex; flex-wrap: wrap; gap: .4rem; }
.legal dt { color: var(--on-ink-2); }
.legal dd { color: var(--on-ink); }
.footer__copy a { color: var(--on-ink); }

/* ---------- Legal / text pages ---------- */

.page {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--section);
}
.prose { max-width: 44rem; }
.prose h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.prose h2 {
  margin-top: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}
.prose p, .prose ul { margin-top: 1rem; color: var(--ink-2); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose .updated { margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-3); }
.prose h3 { margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.prose ol { margin-top: 1rem; padding-left: 1.4rem; color: var(--ink-2); }
.prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-underline-offset: .2em; }
.prose a:hover { color: var(--tile); }
.prose code { font-size: .9em; padding: .1em .35em; border-radius: 4px; background: var(--stone-2); }
.prose :target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* What, why, on what basis, for how long: one small table per purpose. */
.terms-list { display: grid; margin-top: .75rem; border-top: 1px solid var(--line); }
.terms-list > div { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .terms-list > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}
.terms-list dt { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.terms-list dd { margin: 0; color: var(--ink-2); }

.toc { margin-top: 1.75rem; padding: 1.1rem 1.4rem; border-radius: var(--r-md); background: var(--stone); }
.toc ol { margin: 0; columns: 2 16rem; column-gap: 2rem; font-size: var(--t-sm); }
.toc li { break-inside: avoid; }
.toc li + li { margin-top: .3rem; }

.model-form { margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px dashed var(--field-line); border-radius: var(--r-md); }
.model-form p:first-child { margin-top: 0; }

/* Cancel or withdraw */
.cancel-cases { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .cancel-cases { grid-template-columns: 1fr 1fr; } }
.cancel-cases section { padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--stone); }
.prose .cancel-cases h2 { margin-top: 0; font-size: 1.0625rem; }
.prose .form--page { margin-top: 2.5rem; border: 1px solid var(--line); }
.form__title { margin: 0; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; line-height: 1.15; }
.prose .form__title { margin: 0; font-size: var(--t-xl); font-weight: 500; }

.pricing__vat { margin-top: .6rem; font-size: var(--t-sm); color: var(--ink-3); }
.pricing__vat a { color: inherit; }

/* Cookie settings: a small card, two equal choices, nothing pre-ticked. */
.consent {
  position: fixed;
  z-index: 60;
  left: var(--gutter);
  bottom: var(--gutter);
  width: min(26rem, calc(100% - 2 * var(--gutter)));
  padding: 1.25rem 1.35rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(28, 43, 69, .08), 0 24px 60px -20px rgba(12, 20, 36, .55);
}
.consent[hidden] { display: none; }
.consent__title { margin: 0; font-weight: 700; }
.consent p { max-width: none; margin: .45rem 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.consent a { color: var(--ink); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.consent__actions .btn { min-height: 2.75rem; padding: 0 .8rem; font-size: .9375rem; }
.consent-open .dock { visibility: hidden; }
.consent__short { display: none; }
/* Phones: a low bar at the bottom instead of the card, so the first screen's
   button and price stay in view; the title stays as the dialog's name. */
@media (max-width: 600px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .consent__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consent__long { display: none; }
  .consent .consent__short { display: block; margin: 0; font-size: .8125rem; line-height: 1.35; }
  .consent__actions { margin-top: .5rem; }
}

/* 404 */
.missing {
  min-height: calc(var(--sh) * 100);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter);
  text-align: center;
}
.missing__inner { display: grid; justify-items: center; gap: 1.25rem; }
.missing .stage-mini { font-size: 14px; width: 13em; margin-bottom: 1rem; }
.missing .sign { position: relative; top: 0; left: 0; }
.missing h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.05;
}
.missing p { color: var(--ink-2); }
.missing .hero__actions { justify-content: center; margin-top: .5rem; }

/* ---------- Legal notice: company details as a quiet ledger ---------- */

.legal-list {
  margin: 1.75rem 0 2rem;
  border-top: 1px solid var(--line);
}
.legal-list > div {
  display: grid;
  gap: .15rem 2rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .legal-list > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}
.legal-list dt { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.legal-list dd { margin: 0; color: var(--ink); }
.legal-list a { color: inherit; }

/* ---------- Touch: every standalone target at least 44px ---------- */

@media (pointer: coarse) {
  .brand, .link, .contact__direct a, .footer__copy a { position: relative; }
  .brand::after, .link::after, .contact__direct a::after, .footer__copy a::after {
    content: "";
    position: absolute;
    left: -.25rem;
    right: -.25rem;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  input[type="range"]:not(.ba__range) { height: 44px; margin-block: -6px; }
  /* Stacked links would overlap if they only grew invisibly, so these get real room. */
  .footer__nav ul { gap: 0; }
  .footer__nav a { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { clip-path: none; transform: none; }
}


/* ==========================================================================
   Craft layer: light, material and small responses
   ========================================================================== */

/* Buttons: the enamel sign's inner rule appears on hover. */
.btn { position: relative; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { opacity: .45; transform: none; }
.btn--sm::after { inset: 2.5px; }
.btn.is-sent { background: var(--shutter); color: var(--paper); }

/* Links settle closer to their text on hover. */
.link { transition: color .2s, text-underline-offset .3s var(--ease-out); }
.link:hover { text-underline-offset: .16em; }

/* Logo: the little plate swings on its hook. */
.brand__swing {
  transform-box: view-box;
  transform-origin: 50% 11.25%;
}
.brand:hover .brand__swing { animation: mark-swing 1.5s ease-in-out; }
@keyframes mark-swing {
  0% { transform: rotate(0); }
  18% { transform: rotate(9deg); }
  40% { transform: rotate(-6deg); }
  62% { transform: rotate(3deg); }
  82% { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}

/* Calendar stays answer the pointer. */
.cal__bar em {
  font-style: normal;
  font-size: .66em;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  margin-left: .45em;
  transition: opacity .25s;
}
.cal__bar.is-hot { background: var(--tile-deep); box-shadow: 0 .35em .7em -.35em rgba(148, 51, 32, .7); }
.cal__bar.is-in.is-hot { transform: translateY(-1.5px); }
.cal__bar.is-hot em { opacity: .85; }
@container (max-width: 400px) {
  .cal__bar em { display: none; }
}

/* Focus on dark surfaces. */
.calc :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible { outline-color: var(--paper); }
.contact .form :focus-visible { outline-color: var(--tile); }

/* Calculator odometer. */
.odo { display: inline-flex; line-height: 1; }
.odo__cell {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.odo__strip {
  display: block;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.odo__strip > span { display: block; height: 1em; text-align: center; }
.calc__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em; }

/* Mobile hero: two actions side by side, at thumb height. */
@media (max-width: 519px) {
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { padding: 0 .6rem; font-size: .9375rem; }
}

/* Mobile dock: the two things people actually do on a phone. */
.dock { display: none; }
@media (max-width: 759px) {
  .dock {
    position: fixed;
    z-index: 30;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(248, 246, 241, .92);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 30px -10px rgba(28, 43, 69, .35), 0 0 0 1px rgba(28, 43, 69, .08);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform .55s var(--ease-out), visibility 0s .55s;
  }
  .dock.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .55s var(--ease-out);
  }
  .dock .btn { min-height: 3rem; font-size: .9375rem; }
  .menu-open .dock { visibility: hidden; transform: translateY(calc(100% + 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .w > span { transform: none; }
}


/* ==========================================================================
   Škure: a real window in a stone house, opened by the scroll
   ========================================================================== */

/* A film of the shutters swinging open, scrubbed by the scroll (desktop 16:9,
   phones 9:16). Then the visitor walks up to the window and through it into
   the bright view, where the words wait. The stills cover the time before the
   film has loaded, and stand in for it with reduced motion or no script. */
.skure {
  --open: 0;                 /* 0 shut, 1 swung open (film time) */
  --walk: 0;                 /* 0 at the window, 1 its opening fills the screen */
  --fade: 0;                 /* the room letting go of the view */
  --flash: 0;                /* the light at the threshold */
  --push: 0;                 /* the view settling after the step through */
  position: relative;
  height: calc(var(--sh) * 260);
  background: #1B2230;
}
@media (max-aspect-ratio: 1/1) { .skure { height: calc(var(--sh) * 230); } }

.skure__sticky {
  position: sticky;
  top: 0;
  height: calc(var(--sh) * 100);
  overflow: clip;
  isolation: isolate;
}

/* The view through the window, and where the words are. */
.skure__view { position: absolute; inset: 0; }
.skure__view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: scale(calc(1.16 - var(--push) * .16));
}
.skure__view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFF6E4;
  opacity: calc(var(--flash) * .86);
  pointer-events: none;
}

.skure__copy {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  background: linear-gradient(to top, rgba(10, 18, 32, .9), rgba(10, 18, 32, .62) 42%, rgba(10, 18, 32, .22) 74%, rgba(10, 18, 32, 0));
  color: var(--paper);
  opacity: clamp(0, calc((var(--push) - .8) * 5), 1);
}
@media (max-width: 859px) {
  .skure__copy { padding-bottom: 7.5rem; }
}
.skure__copy .wrap { position: relative; z-index: 0; }
.skure__copy .wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% 10% -50% -30%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 40% 55%,
    rgba(8, 14, 26, .55) 0%, rgba(8, 14, 26, .44) 42%, rgba(8, 14, 26, .26) 64%, rgba(8, 14, 26, .1) 82%, rgba(8, 14, 26, 0) 100%);
}
.skure__copy .h2 { color: var(--paper); max-width: 16ch; width: fit-content; text-shadow: var(--tshadow); }
.skure__copy .lead { margin-top: .75rem; color: rgba(248, 246, 241, .92); text-shadow: var(--tshadow); }

/* The room: stills, then the film over them. The script scales the whole room
   up around the window (--zoom, --ox, --oy) for the walk through it. */
.skure__room {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  transform-origin: var(--ox, 50%) var(--oy, 47%);
  transform: scale(calc(1 + (var(--zoom, 3) - 1) * var(--walk)));
  opacity: calc(1 - var(--fade));
  will-change: transform, opacity;
}
.skure__room img,
.skure__film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* before the film is ready (or without it), the open still fades in across
   the whole opening, not in one step */
.skure__still--open { opacity: clamp(0, calc((var(--open) - .12) * 1.45), 1); }
.skure__film { opacity: 0; transition: opacity .3s; }
.skure__film.is-ready { opacity: 1; }

/* No script, or no appetite for motion: the window is simply open. */
.skure__room { display: none; }
.js .skure:not(.is-open) .skure__room { display: block; }
.skure.is-open, .no-js .skure { --open: 1; --walk: 1; --fade: 1; --push: 1; --flash: 0; height: auto; }
.skure.is-open .skure__sticky, .no-js .skure__sticky { position: relative; height: clamp(26rem, calc(var(--sh) * 78), 46rem); }
.no-js .skure__copy { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .skure { height: auto; }
  .skure__room { display: none; }
  .skure__sticky { position: relative; height: clamp(26rem, calc(var(--sh) * 78), 46rem); }
  .skure__view::after { opacity: 0; }
  .skure__view img { transform: none; }
  .skure__copy { opacity: 1; }
}


/* The hero film: a pause button (WCAG 2.2.2) and the note that AI made the scene
   (EU AI Act, art. 50). The note stays with the still too. */
.hero__film-ctl { position: absolute; right: var(--gutter); bottom: 1.1rem; z-index: 2; display: flex; align-items: center; gap: .65rem; }
.hero__ai { margin: 0; font-size: .6875rem; letter-spacing: .02em; color: rgba(248, 246, 241, .8); }
.film-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgba(248, 246, 241, .45); border-radius: 50%; background: rgba(12, 20, 36, .55); color: #F8F6F1; cursor: pointer; transition: background .2s; }
.film-btn[hidden] { display: none; }
.film-btn:hover { background: rgba(12, 20, 36, .85); }
.film-btn:focus-visible { outline: 2px solid #F8F6F1; outline-offset: 3px; }
.film-btn i { display: block; box-sizing: border-box; width: .65rem; height: .75rem; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.film-btn.is-paused i { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: .4rem 0 .4rem .65rem; border-color: transparent transparent transparent currentColor; }

/* ==========================================================================
   Two stories told on one pinned screen (zauzeto-src/story/build_story.py)
   With reduced motion, or before the script runs, both are plain lists.
   ========================================================================== */

/* ---------- Services: the real Sali site on a phone, one beat at a time ---------- */

.services .section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.tell { position: relative; }
.tell__grid { display: grid; gap: 3rem; align-items: center; }
.tell__beats { display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.tell__n { font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tell__n span { color: var(--tile); }
.tell__title { margin-top: .45rem; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.9rem); max-width: 13ch; }
.tell__text { margin-top: 1rem; max-width: 34ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); }
.tell__langs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.35rem; }
.tell__langs span {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  transition: background-color .3s, border-color .3s, color .3s;
}
.tell__langs span.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tell__bar { display: none; }

.tell__stage { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 1rem; margin: 0; padding-top: 1.5rem; }
/* the stone arch the phone stands in, as before */
.tell__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(430px, 100%);
  height: calc(100% - 2.25rem);
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: var(--stone-2);
}
.tell__phone {
  position: relative;
  width: min(300px, 72vw);
  padding: 10px;
  border-radius: 46px;
  background: var(--ink);
  box-shadow: var(--shadow-object);
}
/* An iPhone's top, in its proportions (a 393 pt wide screen): the 54 pt
   status bar with the time, signal, wifi and battery, and the Dynamic Island
   in it (126 x 37 pt, 11 pt down) with the front camera on its right. As in
   Safari, the page starts under the status bar, so the island never covers
   the site. Its colour is the site's theme-color, as Safari paints it
   (Sali #F4EFE6, Milly #17231F). --u is 1% of the screen's width. */
.tell__screen { container-type: inline-size; --u: 1cqw; --sb: calc(var(--u) * 13.7); }
.tell__screen::before,
.case__view::before {
  content: "9:41";
  content: "9:41" / "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto 0;
  height: var(--sb);
  display: flex;
  align-items: center;
  padding-left: calc(var(--u) * 11.5);
  font: 600 calc(var(--u) * 4.1)/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #0b0b0c;
  background: #F4EFE6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12' fill='%230b0b0c'%3E%3Crect x='0' y='8' width='3' height='3.5' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='5.5' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10.5' rx='.8'/%3E%3Cg fill='none' stroke='%230b0b0c' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M24.6 4.6a9 9 0 0 1 12.8 0'/%3E%3Cpath d='M27.3 7.3a5.2 5.2 0 0 1 7.4 0'/%3E%3C/g%3E%3Ccircle cx='31' cy='10' r='1.5'/%3E%3Crect x='45' y='1' width='23' height='10' rx='3' fill='none' stroke='%230b0b0c' stroke-opacity='.4'/%3E%3Crect x='47' y='3' width='19' height='6' rx='1.6'/%3E%3Crect x='69.2' y='4.2' width='1.8' height='3.6' rx='.9' fill-opacity='.45'/%3E%3C/svg%3E") no-repeat right calc(var(--u) * 7.5) center / calc(var(--u) * 18) auto;
  pointer-events: none;
}
.tell__screen::after,
.case__view::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: calc(var(--u) * 2.8);
  left: 50%;
  width: calc(var(--u) * 32);
  aspect-ratio: 126 / 37;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle closest-side at 81% 50%, #2b3a52 0 18%, #10161f 30% 52%, transparent 60%),
    #050608;
  pointer-events: none;
}
.tell__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 844;
  border-radius: 36px;
  background: var(--paper);
}
.tell__strip { position: absolute; inset: 0 0 auto 0; will-change: transform; }
.tell__shot { position: relative; aspect-ratio: 390 / 844; }
.tell__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tell__over { opacity: 0; transition: opacity .45s var(--ease-out); }
.tell__over.is-on { opacity: 1; }
/* the film of the real site moving between two screens lies over the stills;
   the other languages, the picked dates and "sent" lie over the film */
.tell__film { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.tell__film.is-ready { opacity: 1; }
.tell__overs { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.tell__overs > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the page starts under the phone's status bar (see .tell__screen) */
.tell__strip { top: var(--sb); }
.tell__film,
.tell__overs { inset: var(--sb) 0 auto 0; height: 100%; }
.tell__sent {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 2;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--shutter);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(28, 43, 69, .5);
  opacity: 0;
  transform: translate(-50%, .8rem);
  transition: opacity .3s, transform .45s var(--ease-out);
}
.tell__sent::before { content: "\2713\00a0"; }
.tell__sent.is-on { opacity: 1; transform: translate(-50%, 0); }
/* where the guest's finger touches */
.tell__tap {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: scale(1.35);
  transition: opacity .2s, transform .25s var(--ease-out);
  pointer-events: none;
}
.tell__tap.is-on { opacity: 1; transform: scale(1); }
.tell__tap.is-on.is-down { transform: scale(.76); }
/* the owner's phone: a new enquiry */
.tell__note {
  position: absolute;
  z-index: 5;
  top: 16%;
  left: 50%;
  width: min(17.5rem, 92%);
  display: grid;
  gap: .1rem;
  padding: .8rem 1rem .85rem 3.4rem;
  border-radius: 18px;
  background: rgba(255, 253, 249, .97);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(28, 43, 69, .08), 0 22px 44px -18px rgba(28, 43, 69, .45);
  opacity: 0;
  transform: translate(-30%, -.8rem) scale(.97);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.tell__note::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: .9rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13v9h-13zM3.5 5.8 10 11l6.5-5.2' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.tell__note-app { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tell__note b { font-weight: 600; }
.tell__note span:last-child { color: var(--ink-2); }
.tell__note.is-on { opacity: 1; transform: translate(-22%, 0); }
.tell__cap { font-size: .8125rem; color: var(--ink-3); }
.tell__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.services .service--more { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }

@media (min-width: 900px) {
  .tell__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
  /* as a plain list, the phone keeps beside the words */
  .tell:not(.is-live) .tell__stage { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* The live story: the screen stays while the page scrolls through it. */
.js .tell.is-live { height: calc(calc(var(--sh) * 100) + var(--n, 6) * calc(var(--sh) * 62)); }
.js .tell.is-live .tell__pin { position: sticky; top: 0; height: calc(var(--sh) * 100); display: flex; align-items: center; overflow: hidden; }
.js .tell.is-live .tell__grid { width: min(100% - 2 * var(--gutter), var(--maxw)); }
.js .tell.is-live .tell__beats { display: block; position: relative; min-height: clamp(15rem, calc(var(--sh) * 36), 21rem); }
.js .tell.is-live .tell__beat { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.js .tell.is-live .tell__beat > * {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .45s var(--ease-out), transform .7s var(--ease-out);
}
.js .tell.is-live .tell__beat.is-past > * { transform: translateY(-1.4rem); transition-duration: .3s, .5s; }
.js .tell.is-live .tell__beat.is-on > * { opacity: 1; transform: none; }
.js .tell.is-live .tell__beat.is-on > :nth-child(2) { transition-delay: .06s; }
.js .tell.is-live .tell__beat.is-on > :nth-child(3) { transition-delay: .12s; }
.js .tell.is-live .tell__beat.is-on > :nth-child(4) { transition-delay: .18s; }
.js .tell.is-live .tell__bar { display: flex; gap: .4rem; margin-top: 2rem; }
.tell__bar i { position: relative; flex: 0 1 3rem; height: 3px; overflow: hidden; border-radius: 2px; background: var(--line); }
.tell__bar i::after { content: ""; position: absolute; inset: 0; background: var(--tile); transform: scaleX(var(--f, 0)); transform-origin: left; }
.js .tell.is-live .tell__phone { width: min(360px, calc((calc(var(--sh) * 100) - 8.5rem) * .4621 + 20px)); }

@media (max-width: 899px) {
  .js .tell.is-live .tell__pin { align-items: flex-start; padding-top: .75rem; }
  .js .tell.is-live .tell__grid { gap: 1.1rem; }
  .js .tell.is-live .tell__stage { order: -1; padding-top: .75rem; }
  .js .tell.is-live .tell__phone { width: min(64vw, calc(calc(var(--sh) * 53) * .4621 + 20px)); padding: 8px; border-radius: 38px; }
  .js .tell.is-live .tell__screen { border-radius: 30px; }
  .js .tell.is-live .tell__cap { margin-top: .5rem; font-size: .75rem; text-align: center; }
  .js .tell.is-live .tell__stage::before { height: 100%; }
  .js .tell.is-live .tell__beats { min-height: 12.5rem; }
  .js .tell.is-live .tell__beat { top: 0; transform: none; }
  .js .tell.is-live .tell__title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .js .tell.is-live .tell__text { margin-top: .6rem; font-size: 1rem; }
  .js .tell.is-live .tell__langs { margin-top: .8rem; }
  .js .tell.is-live .tell__bar { margin-top: .5rem; }
  .tell__note { top: 10%; font-size: .8125rem; }
  .tell__note.is-on { transform: translate(-50%, 0); }
}

/* ---------- Process: the step stays, the scenes come down beside it ---------- */

.flow__grid { display: grid; gap: 2.5rem; }
.flow__steps { display: grid; gap: 2.75rem; margin: 0; padding: 0; list-style: none; }
.flow__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  line-height: .9;
  font-variant-numeric: lining-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(248, 246, 241, .6);
  transition: -webkit-text-stroke-color .4s;
}
.flow__step h3 { margin-top: .8rem; color: var(--paper); }
.flow__step p { margin-top: .75rem; max-width: 36ch; font-size: var(--t-md); line-height: 1.5; color: var(--on-ink); }
.flow__stage, .flow__line { display: none; }

.js .flow.is-live { height: calc(calc(var(--sh) * 100) + var(--n, 4) * calc(var(--sh) * 72)); }
.js .flow.is-live .flow__pin { position: sticky; top: 0; height: calc(var(--sh) * 100); display: flex; align-items: center; overflow: hidden; }
.js .flow.is-live .flow__grid { width: min(100% - 2 * var(--gutter), var(--maxw)); align-items: center; }
.js .flow.is-live .flow__words { position: relative; padding-left: 2.75rem; }
.js .flow.is-live .flow__line { display: block; position: absolute; left: .55rem; top: 6%; bottom: 6%; width: 2px; margin: 0; background: rgba(248, 246, 241, .16); }
.flow__fill { position: absolute; inset: 0; background: var(--tile-light); transform: scaleY(var(--p, 0)); transform-origin: top; }
.flow__line b {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(248, 246, 241, .35);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease-out);
}
.flow__line b:nth-of-type(1) { top: 0; }
.flow__line b:nth-of-type(2) { top: 33.333%; }
.flow__line b:nth-of-type(3) { top: 66.667%; }
.flow__line b:nth-of-type(4) { top: 100%; }
.flow__line b.is-on { background: var(--tile-light); border-color: var(--tile-light); transform: scale(1.3); }
.js .flow.is-live .flow__steps { display: block; position: relative; min-height: clamp(18rem, calc(var(--sh) * 44), 24rem); }
.js .flow.is-live .flow__step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.js .flow.is-live .flow__step > * { opacity: 0; transform: translateY(1.4rem); transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); }
.js .flow.is-live .flow__step.is-past > * { transform: translateY(-1.4rem); transition-duration: .3s, .5s; }
.js .flow.is-live .flow__step.is-on > * { opacity: 1; transform: none; }
.js .flow.is-live .flow__step.is-on > :nth-child(2) { transition-delay: .06s; }
.js .flow.is-live .flow__step.is-on > :nth-child(3) { transition-delay: .12s; }
.js .flow.is-live .flow__step.is-on .flow__num { -webkit-text-stroke-color: var(--tile-light); }

.js .flow.is-live .flow__stage { display: grid; gap: .9rem; margin: 0; }
.flow__window {
  position: relative;
  height: min(calc(var(--sh) * 70), 42rem);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink-surface) var(--grain-light);
  box-shadow: inset 0 0 0 1px rgba(248, 246, 241, .08);
}
/* four scenes, the first at the bottom: the reel comes down as the page goes on */
.flow__reel { position: absolute; inset: 0 0 auto 0; height: 400%; will-change: transform; transform: translate3d(0, -75%, 0); }
.scene { position: relative; height: 25%; display: grid; place-items: center; align-content: center; gap: 1rem; padding: clamp(1.25rem, 3vw, 2.75rem); overflow: hidden; }
.flow__cap { font-size: .8125rem; color: var(--on-ink-2); }

@media (min-width: 900px) {
  .js .flow.is-live .flow__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 5.5rem); }
}

/* 1 · the chat */
.chat { width: min(27rem, 100%); overflow: hidden; border-radius: 22px; background: var(--stone); color: var(--ink); box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .7); }
.chat__head { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; background: var(--shutter); color: #fff; font-size: .9375rem; }
.chat__head small { margin-left: auto; font-size: .75rem; }
.chat__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); color: var(--shutter); font-family: var(--f-display); font-weight: 600; }
/* The thread keeps its full height from the start: each message has its
   place and only fades in, and the typing dots sit in a strip kept free at
   the bottom. (When messages opened by height, the chat grew and the whole
   scene re-centred: a layout shift.) */
.chat__thread { position: relative; display: grid; align-content: start; min-height: 16.5rem; padding: .35rem 1rem 3.4rem; background-image: var(--grain); }
.msg {
  max-width: 82%;
  margin: .55rem 0 0;
  padding: .55rem .85rem;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(.5rem) scale(.97);
  transition: opacity .3s, transform .45s var(--ease-out);
}
.msg.is-on { opacity: 1; transform: none; }
.msg--in { justify-self: start; background: var(--white); border-top-left-radius: 4px; }
.msg--out { justify-self: end; background: var(--shutter-soft); border-top-right-radius: 4px; }
.chat__typing { position: absolute; left: 1rem; bottom: .9rem; display: flex; gap: 4px; margin: 0; padding: .7rem .85rem; border-radius: 14px; background: var(--white); opacity: 0; transition: opacity .2s; }
.chat__typing.is-out { left: auto; right: 1rem; background: var(--shutter-soft); }
.chat__typing.is-on { opacity: 1; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.chat__typing.is-on i { animation: typing 1s ease-in-out 3; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { opacity: 1; transform: translateY(-3px); } }

/* 2 · the photos arrive and the list is ticked off */
.drop { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: center; width: min(42rem, 100%); }
.drop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.drop__grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translateY(-2.5rem) rotate(var(--r, 0deg)) scale(1.08);
  transition: opacity .35s, transform .7s var(--ease-out);
}
.drop__grid img.is-on { opacity: 1; transform: rotate(calc(var(--r, 0deg) / 4)); }
.drop__card { padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.drop__head { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.drop__list { display: grid; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.drop__list li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; color: var(--ink-3); transition: color .3s; }
.drop__list li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s, transform .35s var(--ease-out);
}
.drop__list li.is-on { color: var(--ink); }
.drop__list li.is-on::before {
  border-color: var(--shutter);
  background: var(--shutter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.5l4.4-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  transform: scale(1.08);
}

/* 3 · the design is painted in, in four languages, and approved */
.browser { position: relative; width: min(42rem, 100%); overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .75); }
.browser__bar { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; background: var(--stone-2); }
.browser__dots { display: flex; gap: 5px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(28, 43, 69, .22); }
.browser__url { flex: 1; display: flex; align-items: center; gap: .35rem; min-height: 1.6rem; padding: .2rem .75rem; border-radius: 999px; background: var(--paper); font-size: .78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.browser__lock { flex: none; width: 8px; height: 7px; margin-top: 3px; border-radius: 1.5px; background: var(--ink-3); position: relative; }
.browser__lock::before { content: ""; position: absolute; left: 1.5px; bottom: 5px; width: 5px; height: 5px; border: 1.5px solid var(--ink-3); border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box; }
.browser__caret { flex: none; width: 1px; height: 1em; margin-left: -.25rem; background: var(--ink); }
.browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--white); }
.browser__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wire { position: absolute; inset: 0; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto 1fr; gap: 5% 6%; padding: 6% 6% 0; }
.wire i { border-radius: 6px; background: var(--stone-2); }
.wire i:nth-child(1) { height: 2.2rem; }
.wire i:nth-child(2) { height: .7rem; align-self: end; }
.wire i:nth-child(3) { height: .7rem; width: 70%; }
.wire i:nth-child(4) { height: .7rem; width: 50%; }
.wire i:nth-child(5) { grid-column: 1 / -1; min-height: 6rem; border-radius: 14px 14px 0 0; }
.wire i:nth-child(6) { display: none; }
.design__shot { clip-path: inset(0 calc((1 - var(--wipe, 0)) * 100%) 0 0); }
.scene--design .browser__view::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--wipe, 0) * 100%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--tile);
  box-shadow: 0 0 14px rgba(176, 64, 42, .6);
  opacity: calc(var(--wipe, 0) * (1 - var(--wipe, 0)) * 8);
}
.design__langs { display: flex; gap: .45rem; margin: 0; }
.design__langs span {
  padding: .3rem .7rem;
  border: 1px solid rgba(248, 246, 241, .3);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--on-ink-2);
  transition: background-color .3s, color .3s, border-color .3s;
}
.design__langs span.is-on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.stamp {
  position: absolute;
  top: 22%;
  right: 12%;
  padding: .45rem 1rem;
  border: 3px solid var(--shutter);
  border-radius: 10px;
  background: rgba(248, 246, 241, .94);
  color: var(--shutter);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-9deg) scale(1.7);
  transition: opacity .15s, transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.stamp.is-on { opacity: 1; transform: rotate(-9deg) scale(1); }

/* 4 · the address is typed, the site loads, the first enquiry arrives */
.browser__load { display: block; height: 3px; background: var(--tile); transform: scaleX(var(--load, 0)); transform-origin: left; opacity: calc(1 - var(--show, 0)); }
.scene--launch [data-show] { opacity: var(--show, 0); }
.toast {
  position: absolute;
  top: 14%;
  right: 7%;
  width: min(19rem, 84%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .8rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 16px;
  background: rgba(255, 253, 249, .97);
  color: var(--ink);
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .65);
  opacity: 0;
  transform: translateY(-1rem) scale(.96);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: none; }
.toast__icon {
  grid-row: span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13v9h-13zM3.5 5.8 10 11l6.5-5.2' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.toast b { font-size: .9375rem; }
.toast span:last-child { font-size: .8125rem; color: var(--ink-2); }

@media (max-width: 899px) {
  .js .flow.is-live .flow__pin { align-items: flex-start; padding-top: .75rem; }
  .js .flow.is-live .flow__grid { gap: 1rem; }
  .js .flow.is-live .flow__stage { order: -1; }
  .js .flow.is-live .flow__cap { display: none; }
  .flow__window { height: calc(var(--sh) * 48); }
  .scene { padding: 1rem; gap: .7rem; }
  .js .flow.is-live .flow__words { padding: 1.4rem 0 0; }
  .js .flow.is-live .flow__line { left: 7px; right: 7px; top: 0; bottom: auto; width: auto; height: 2px; }
  .flow__fill { transform: scaleX(var(--p, 0)); transform-origin: left; }
  .flow__line b { top: 50% !important; }
  .flow__line b:nth-of-type(1) { left: 0; }
  .flow__line b:nth-of-type(2) { left: 33.333%; }
  .flow__line b:nth-of-type(3) { left: 66.667%; }
  .flow__line b:nth-of-type(4) { left: 100%; }
  .js .flow.is-live .flow__steps { min-height: 13.5rem; }
  .js .flow.is-live .flow__step { top: 0; transform: none; }
  .js .flow.is-live .flow__num { font-size: 2.75rem; }
  .js .flow.is-live .flow__step h3 { margin-top: .4rem; font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .js .flow.is-live .flow__step p { margin-top: .5rem; font-size: 1rem; }
  .chat__thread { min-height: 14rem; padding: .7rem .8rem 1rem; }
  .msg { font-size: .84rem; }
  .drop { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .drop__grid { gap: .4rem; }
  .drop__card { padding: .8rem 1rem; }
  .drop__list { grid-template-columns: 1fr 1fr; gap: .45rem .8rem; margin-top: .5rem; }
  .drop__list li { font-size: .8125rem; }
  .toast { top: 8%; right: 4%; padding: .7rem .8rem; }
  .stamp { top: 16%; right: 8%; }
}

/* A small line over a heading: which service this section is about. */
.eyebrow { margin: 0; font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tile); }
.compare .eyebrow { color: var(--paper); opacity: .85; }


/* ---------- Service pages (izrada web stranica, uređivanje oglasa, kalkulator) ----------
   One page per search people make, built by zauzeto-src/landing/build_landing.py.
   Plain stone and paper bands, the home page's cards, plans and questions;
   the calculator page opens on the same ink band as the home page's. */

.land-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.land-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .land-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); }
  .land-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
}
.land-hero h1 {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 16ch;
  text-wrap: balance;
}
.land-hero h1 em,
.land-calc h1 em { font-style: italic; font-weight: 400; letter-spacing: 0; }
.land-hero .lead { margin-top: 1.5rem; max-width: 42ch; }
.land-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.land-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.land-facts li { display: flex; align-items: center; gap: .55rem; }
.land-facts li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--shutter); }

.land-shot {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-object);
}
.land-shot img { display: block; width: 100%; height: auto; }
.land-shot figcaption { padding: .8rem 1.1rem; font-size: var(--t-sm); color: var(--ink-3); border-top: 1px solid var(--line); }
/* A phone screenshot stands like a phone: narrow, rounded, the caption under it. */
.land-shot--phone {
  justify-self: center;
  width: min(100%, 19rem);
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
.land-shot--phone img {
  border: .55rem solid var(--ink);
  border-radius: 2.2rem;
  box-shadow: var(--shadow-object);
}
.land-shot--phone figcaption { border-top: 0; text-align: center; }

.land-band { background: var(--paper); }

.rules.land-grid { margin-top: 0; }
/* two columns for the longer cards (enquiry / booking request / engine / sync) */
@media (min-width: 760px) { .rules.land-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); } }
.land-story { margin-top: clamp(2.5rem, 5vw, 4rem); }
.land-story .h3 { margin-bottom: .75rem; }
@media (min-width: 1040px) {
  .rules.land-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.land-note { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 60ch; color: var(--ink-2); }
.land-note--center { margin-inline: auto; text-align: center; font-size: var(--t-sm); }
.land-more { margin-top: 2.5rem; }

.land-cases { display: grid; gap: 2rem; }
@media (min-width: 900px) { .land-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.land-case {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.land-case img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.land-case__text { padding: clamp(1.5rem, 3vw, 2.25rem); }
.land-case__text > * + * { margin-top: .9rem; }
.land-case__place { font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tile); }
.land-case__text p { color: var(--ink-2); }
.land-case__text .land-case__facts { font-size: var(--t-sm); color: var(--ink-3); }

.land-split { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .land-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
.land-split .section-head { margin-bottom: 1.5rem; }
.land-split > div > p { margin-top: .75rem; }
.land-found { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.land-found li { display: grid; gap: .35rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.land-found b { font-weight: 600; }
.land-found span { color: var(--ink-2); }

.plans.plans--one,
.plans.plans--two { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
@media (min-width: 640px) {
  .plans.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plans--one .plan--main { grid-row: auto; }

.steps { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.step { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.step__n { display: block; font-family: var(--f-display); font-size: 2.5rem; line-height: 1; color: var(--tile); }
.step__title { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.step p { margin-top: .5rem; color: var(--ink-2); }

.land-pair { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .land-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.land-ba { margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.land-ba img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.land-ba figcaption { display: grid; gap: .5rem; padding: 1.25rem 1.4rem 1.5rem; }
.land-ba__tag { justify-self: start; padding: .2rem .65rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--stone-2); color: var(--ink-2); }
.land-ba--after .land-ba__tag { background: var(--shutter); color: var(--paper); }
.land-ba__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.land-ba__meta { font-size: var(--t-sm); color: var(--ink-3); }
.land-ba__desc { color: var(--ink-2); }

.land-cross { max-width: 44rem; }
.land-cross p { margin-top: 1rem; color: var(--ink-2); }
.land-cross .link { display: inline-block; margin-top: 1.25rem; }

.land-rates { display: grid; gap: 1rem; }
@media (min-width: 860px) { .land-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.land-rate { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.land-rate p { margin-top: .9rem; color: var(--ink-2); }
.land-text { max-width: 44rem; }
.land-text p { color: var(--ink-2); }
.land-text p + p { margin-top: 1rem; }

/* The calculator page opens on the ink band, under the header. */
.land-calc { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); content-visibility: visible; }
.land-calc .eyebrow { color: var(--tile-light); }
.land-calc h1 { color: var(--paper); }

.land-cta {
  background-color: var(--ink);
  background-image: var(--grain-light);
  color: var(--paper);
}
.land-cta .h2 { color: var(--paper); }
.land-cta .lead { margin-top: 1.25rem; max-width: 40ch; color: var(--on-ink); }
.land-cta .btn { margin-top: 2rem; }
.land-cta__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .land-cta__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.land-cta .contact__direct { margin-top: 0; }

.footer__nav--services { margin-top: 1.5rem; }
/* The way back to the home page stays in the header on every screen (buttons hide on phones). */
.land-home {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: 0 .5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.land-home:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Over the calculator's ink band the header turns light, as over the home page's film. */
.land--ink .site-header:not(.is-scrolled),
.land--ink .site-header:not(.is-scrolled) .brand { color: var(--paper); }
.land--ink .site-header:not(.is-scrolled) .lang:hover { background: rgba(248, 246, 241, .18); }
.land--ink .site-header:not(.is-scrolled) .btn--ink { background: var(--paper); color: var(--ink); }
.land--ink .site-header:not(.is-scrolled) .btn--ink:hover { background: var(--white); color: var(--tile-deep); }

/* Comparison tables (cost guide, calculator): the table scrolls inside its own
   frame on a phone, never the page. */
.cmp-wrap { max-width: 100%; margin-top: 1.5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.cmp-wrap:focus-visible { outline: 2px solid var(--tile); outline-offset: 2px; }
.guide__sec .cmp-wrap + p { margin-top: 1.25rem; }
.cmp { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.cmp caption { padding: .9rem 1rem .25rem; text-align: left; font-weight: 600; color: var(--ink); }
.cmp th, .cmp td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cmp thead th { border-top: 0; font-weight: 600; color: var(--ink-3); }
.cmp tbody th { font-weight: 600; color: var(--ink); }
.land-rates + .cmp-wrap { margin-top: 1rem; }

/* Screenshots of a client's site in the guides: three phones in a row */
.shots { margin: 1.5rem 0 0; }
.shots__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1rem); max-width: 42rem; }
.shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.shots figcaption { margin-top: .75rem; font-size: var(--t-sm); color: var(--ink-3); }
/* ---------- /Service pages ---------- */

/* ---------- Phones: one thought per screen ----------
   On a touch phone the home page drops a few explanations that only repeat
   what the headline or the service pages say (2026-10-03: the owner found
   the phone page "brda teksta"). display:none hides them from screen readers
   too, so nothing that matters is in this list: prices and terms, the trust
   lines (pay after the design, reply in 24 hours, your domain, the same
   people), the case facts and the AI and example notes all stay (the Radovi
   beats are visually hidden on phones, not removed). Only touch
   phones: a computer zoomed to 400 % keeps every word (WCAG 1.4.10). */
@media (max-width: 639px) and (pointer: coarse) {
  .home .calc__intro > p:not(.lead),
  .home .calc__found-list span,
  .home .more__list,
  .home .work .section-head .lead,
  .home .pricing .section-head .lead,
  .home .calc__found-lead,
  .home .pricing__note,
  .home .m-hide { display: none; }
  .home .calc__found-list li { padding-block: .9rem; }
}
/* ---------- /Phones ---------- */

/* ---------- Phones: more scroll per movement ----------
   On a phone one swipe used to carry the scenes through several steps at
   once. Each step now takes about a screen of scrolling (2026-10-03). */
@media (max-aspect-ratio: 1/1) { .skure { height: calc(var(--sh) * 360); } }
@media (max-width: 899px) {
  .js .tell.is-live { height: calc(calc(var(--sh) * 100) + var(--n, 6) * calc(var(--sh) * 100)); }
  .js .flow.is-live { height: calc(calc(var(--sh) * 100) + var(--n, 4) * calc(var(--sh) * 105)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .js .work:not(.is-still) .work__rail { height: calc(var(--sh) * 970); }
}
/* ---------- /Phones: more scroll ---------- */

/* ---------- Tap targets: at least 44 px for a finger (2026-10-04) ---------- */
.brand { min-height: 44px; }
.film-btn { width: 2.75rem; height: 2.75rem; }
/* the phone and e-mail links keep their look; an invisible margin takes the tap */
.contact__direct a { position: relative; }
.contact__direct a::after { content: ""; position: absolute; inset: -10px -6px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.choice input { margin: 0; }
.check { min-height: 44px; }
.section-more .link, .land-more .link, .case__link, .tell__cta .link { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- /Tap targets ---------- */

/* ---------- Radovi: two real sites, each on its own screen ---------- */

/* Real work, straight after the illustration. Each case is a room in its own
   site's colours (Sali's pebble and harbour navy, Yoko's shade under the
   reeds), so the proof looks like what it proves. With motion allowed, a case
   is a long stretch of scroll with the screen pinned while its recording
   plays; otherwise it is a still and a plain list. */
.work {
  --c-bg: #E9EAE6;
  --c-ink: #1E2B3C;
  --c-ink-2: #4A5563;
  --c-accent: #9A6420;
  --c-line: rgba(30, 43, 60, .16);
  --c-bar: #F4F4F1;
  padding-bottom: 0;
  background-color: var(--c-bg);
  background-image: var(--grain);
  color: var(--c-ink);
}
.work .h2 { color: var(--c-ink); }
.work .lead { color: var(--c-ink-2); }
.work .section-head { margin-bottom: 0; }

.case { position: relative; color: var(--c-ink); }
.case--yoko {
  --c-bg: #17231F;
  --c-ink: #F3F3EE;
  --c-ink-2: rgba(243, 243, 238, .76);
  --c-accent: #D4B275;
  --c-line: rgba(243, 243, 238, .17);
  --c-bar: #25332E;
  background-color: var(--c-bg);
  /* light through the reed pergola, at a whisper */
  background-image:
    repeating-linear-gradient(100deg, rgba(212, 178, 117, 0) 0 46px, rgba(212, 178, 117, .025) 46px 62px),
    var(--grain-light);
}

.case__grid {
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(3.5rem, 8vw, 5rem);
}

.case__kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.case__kicker::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 2px;
  background: var(--c-accent);
}
.case__title {
  margin: .5rem 0 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.5rem + 2.1vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.case__idea {
  max-width: 36ch;
  margin: 1rem 0 0;
  color: var(--c-ink-2);
}
.case__idea strong { color: var(--c-ink); font-weight: 600; }
.case__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.case__link { display: inline-block; margin-top: 1rem; color: var(--c-ink); }
.case__link:hover { color: var(--c-accent); }
.case__facts li {
  padding: .3rem .75rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--c-ink-2);
}

/* The screen: a browser window on larger screens, a phone on phones. */
.case__screen { margin: 0; min-width: 0; }
.case__device {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--c-bar);
  box-shadow:
    0 0 0 1px rgba(10, 16, 24, .08),
    0 2px 3px rgba(10, 16, 24, .1),
    0 30px 70px -28px rgba(10, 16, 24, .5);
}
.case__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 2.25rem;
  padding: 0 .9rem;
}
.case__bar i {
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--c-line);
}
.case__tab {
  min-width: 0;
  margin-left: .8rem;
  padding: .2rem .8rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(128, 128, 128, .13);
  font-size: .75rem;
  font-weight: 500;
  color: var(--c-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.case__view {
  position: relative;
  aspect-ratio: 1280 / 800;
  overflow: hidden;
  background: #CDD3CD;
}
.case__view img,
.case__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__video { opacity: 0; transition: opacity .35s; }
.case__video.is-ready { opacity: 1; }

.case__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .9rem;
  font-size: .8125rem;
  color: var(--c-ink-2);
}
.case__track {
  position: relative;
  flex: 1;
  display: none;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-line);
}
.case__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* What the site does, in the order the recording shows it. */
.case__beats {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: beat;
}
.case__beats li {
  position: relative;
  padding: .75rem 0 .75rem 2.4rem;
  border-top: 1px solid var(--c-line);
  counter-increment: beat;
}
.case__beats li::before {
  content: counter(beat, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .95rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-2);
}
.case__beats b { display: block; font-weight: 600; line-height: 1.35; }
.case__say { display: block; overflow: hidden; }
.case__say > span {
  display: block;
  padding-top: .3rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}
/* A step can say something different about the phone, which the phone screen shows. */
@media (max-width: 899px) { .case__say > [data-screen="desk"] { display: none; } }
@media (min-width: 900px) { .case__say > [data-screen="phone"] { display: none; } }

@media (max-width: 899px) {
  .case__bar { display: none; }
  .case__device {
    width: fit-content;
    margin-inline: auto;
    padding: 8px;
    border-radius: 40px;
    background: #0E1411;
  }
  .case__view {
    aspect-ratio: 540 / 1168;
    height: min(64svh, 128vw);
    border-radius: 32px;
  }
  .case__meta { justify-content: center; }
}

@media (min-width: 900px) {
  .case__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 1.75rem;
    align-items: center;
  }
  .case__stage { display: contents; }
  .case__screen { grid-column: 1; grid-row: 1 / span 2; }
  .case__head { grid-column: 2; grid-row: 1; align-self: end; }
  .case__beats { grid-column: 2; grid-row: 2; align-self: start; }
}

/* After the proof, the ask. */
.work__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.work__next p {
  max-width: 26ch;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-ink);
}

/* Playback: the two cases sit side by side on one pinned rail. Scrolling
   down zooms into the first screen, plays its recording while it is large,
   lets it settle back, then slides the rail sideways to the next case. */
.case__now,
.work__pager { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .work:not(.is-still) .work__rail { position: relative; height: 540svh; }
  .js .work:not(.is-still) .work__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }
  .js .work:not(.is-still) .work__track {
    display: flex;
    height: 100%;
    transform: translate3d(calc(var(--slide, 0) * -100%), 0, 0);
  }
  .js .work:not(.is-still) .case--sali { background-image: var(--grain); }
  .js .work:not(.is-still) .case {
    flex: none;
    width: 100%;
    height: 100%;
    background-color: var(--c-bg);
  }
  .js .work:not(.is-still) .case__pin {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .js .work:not(.is-still) .case__screen { position: relative; z-index: 2; }
  /* While the screen is large, everything around it steps back. */
  .js .work:not(.is-still) .case__head,
  .js .work:not(.is-still) .case__meta,
  .js .work:not(.is-still) .case__beats { opacity: clamp(0, calc(1 - var(--z, 0) * 1.6), 1); }
  .js .work:not(.is-still) .case__track { display: block; }
  .js .work:not(.is-still) .case__beats li { opacity: .45; transition: opacity .4s; }
  .js .work:not(.is-still) .case__beats li.is-past { opacity: .72; }
  .js .work:not(.is-still) .case__beats li.is-on { opacity: 1; }
  .js .work:not(.is-still) .case__beats li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease-out);
  }
  .js .work:not(.is-still) .case__beats li.is-on::after { transform: scaleX(1); }
  .js .work:not(.is-still) .case__beats li.is-on::before { color: var(--c-ink); }

  /* The step being played, under the large screen. */
  .js .work:not(.is-still) .case__now {
    display: block;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: clamp(1.25rem, 3svh, 2rem);
    width: min(40rem, calc(100% - 2 * var(--gutter)));
    margin: 0;
    text-align: center;
    color: var(--c-ink);
    opacity: clamp(0, calc(var(--z, 0) * 2 - 1), 1);
    transform: translate3d(-50%, calc((1 - var(--z, 0)) * 14px), 0);
    pointer-events: none;
  }
  .case__now b { font-weight: 600; }
  .case__now i {
    margin-right: .6rem;
    font-style: normal;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
  }
  .case__now > span {
    display: block;
    margin-top: .3rem;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-ink-2);
    text-wrap: balance;
  }
  .case__now.is-swap { animation: now-in .45s var(--ease-out); }
  @keyframes now-in { from { opacity: 0; transform: translate3d(-50%, 8px, 0); } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .work:not(.is-still) .case__grid { padding-block: 2rem; }
  .js .work:not(.is-still) .case__head { transform: translateX(calc(var(--z, 0) * 3rem)); }
  .js .work:not(.is-still) .case__device { max-width: calc((100svh - 9rem) * 1.6); }
  /* only the step being played says its sentence */
  .js .work:not(.is-still) .case__beats li {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: opacity .4s, grid-template-rows .5s var(--ease-out);
  }
  .js .work:not(.is-still) .case__beats li.is-on { grid-template-rows: auto 1fr; }
  .js .work:not(.is-still) .case__say { min-height: 0; }
}
/* Which case the rail is on, bottom left, where the step caption can't reach it. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .js .work:not(.is-still) .work__pager {
    display: flex;
    position: absolute;
    z-index: 4;
    left: var(--gutter);
    bottom: 1.6rem;
    gap: 1.4rem;
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1E2B3C;
    transition: color .4s;
    pointer-events: none;
  }
  .js .work.on-dark .work__pager { color: #F3F3EE; }
  .work__pager span {
    padding-bottom: .35rem;
    border-bottom: 2px solid transparent;
    opacity: .5;
    transition: opacity .4s, border-color .4s;
  }
  .work__pager span.is-on { opacity: 1; border-color: currentColor; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .js .work:not(.is-still) .case__pin {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + .25rem);
  }
  .js .work:not(.is-still) .case__grid { gap: 1rem; padding-block: 0; }
  .js .work:not(.is-still) .case__title { font-size: 2rem; }
  .js .work:not(.is-still) .case__idea { margin-top: .6rem; font-size: var(--t-sm); }
  /* the facts stay on screen; the beats come one at a time through the caption
     (.case__now, aria-hidden), so the list itself stays only for screen readers */
  .js .work:not(.is-still) .case__facts { margin-top: .6rem; gap: .35rem; }
  .js .work:not(.is-still) .case__facts li { padding: .2rem .6rem; font-size: .75rem; }
  .js .work:not(.is-still) .case__beats {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .js .work:not(.is-still) .case__link { margin-top: .6rem; font-size: var(--t-sm); }
  .js .work:not(.is-still) .case__view { height: min(38svh, 80vw); }
  .js .work:not(.is-still) .case__meta { margin-top: .7rem; }
  /* above the contact dock */
  .js .work:not(.is-still) .case__now { bottom: 5.25rem; }
}
/* ---------- /Radovi ---------- */

/* ==========================================================================
   Audit pass, 2026-10-10: tap targets, small text, hero button row (CLS).
   For phones and touch screens, or invisible at rest. Kept at the very end
   (after the Radovi block build_cases.py appends) on purpose.
   ========================================================================== */

/* ---------- Tap targets 2: 44 px for a finger ----------
   Vertical padding on an inline link grows the box a finger can hit without
   moving anything (it takes no room in the line). Stacked lists have no spare
   room, so those get real height, as the footer links did. */
@media (max-width: 899px), (pointer: coarse) {
  /* single links on a line of their own, with free space around them */
  .land-crumbs a,
  .rule > p + p > .link,
  .land-found span > .link,
  .land-case__text > .link { padding-block: 14px; }
  .land-split > div > p > .link:only-child { padding-block: 12px; }
  /* the phone and e-mail links: their underline is a background, so keep it on the text */
  .contact__direct a { padding-block: 10px; background-origin: content-box; background-clip: content-box; }
  .contact__direct a::after { content: none; }
  /* "Terms" and "Privacy" (EN footer) were under 44 px wide */
  .footer__legal a { min-width: 44px; justify-content: center; }
  /* the e-mail link at the foot of the open menu, and the link ending a page */
  .menu__foot a:not(.btn) { display: flex; align-items: center; min-height: 44px; margin-block: -8.4px; }
  .land-cross .link { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(1.25rem - 8.4px) -8.4px; }
  /* stacked lists (contents, sources, related links): real height */
  .guide__toc ul, .guide__sources ul { gap: 0; }
  .guide__toc { padding-block: .35rem; }   /* the rows bring their own air */
  .guide__toc a, .guide__sources a { display: flex; align-items: center; min-height: 44px; padding-block: .3rem; }
  /* a stack of related links: a little more between them so the 44 px boxes do not overlap */
  .land-split > div > p:has(> .link:only-child) + p:has(> .link:only-child) { margin-top: 1.1rem; }
}

/* ---------- Small text on phones: nothing under 12 px ----------
   The July calendar is drawn in em, so its labels shrink with the screen. */
@media (max-width: 899px) {
  .cal__dow { font-size: max(.78em, 12px); }
  .cal__day b { font-size: max(.8em, 12px); padding-top: .4em; }
  .cal__foot { font-size: max(.8em, 12px); }
  .tell__note-app { font-size: .75rem; }
  .js .tell.is-live .tell__cap { font-size: .8125rem; }
  .footer__ai { font-size: .8125rem; }
}

/* ---------- Hero buttons: same line breaks before and after the web font (CLS) ----------
   On a service page the two hero buttons fit on one line in the fallback font
   but wrap onto two once Figtree 600 arrives, which pushed everything below
   them down by 64 px (CLS 0.127 at 412 px on /uredivanje-oglasa/). From the
   width where the real font wraps them, stack them from the first paint.
   Same look as the wrapped row: left-aligned, natural width, same gap.
   Limits are where each page's own two labels stop fitting side by side. */
@media (max-width: 414px) {
  .land-hero__cta:has(> a[href="/?usluga=listing#kontakt"]) { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 395px) {
  .land-hero__cta:has(> a[href="/?usluga=website#kontakt"]):has(> a[href="#cijene"]) { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 401px) {
  .land-hero__cta:has(> a[href="/?usluga=website#kontakt"]):has(> a[href="/#radovi"]) { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 377px) {
  .land-hero__cta:has(> a[href="/en/?usluga=listing#contact"]) { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .land-hero__cta:has(> a[href="/en/?usluga=website#contact"]):has(> a[href="#pricing"]) { flex-direction: column; align-items: flex-start; }
}
/* ---------- /Audit pass 2026-10-10 ---------- */