/* =========================================================
   Sai Mai — Ostrava / Pro firmy
   Load after base.css and branch.css.

   ---------------------------------------------------------
   ART DIRECTION — "zlatá linka a thajský oblouk"
   ---------------------------------------------------------
   This is the most "sales" page on the site, and the version before
   this one said so in the most ordinary way available: a centred hero,
   a 4-up card grid, a 3-up card grid, a vertical timeline. Correct,
   and interchangeable with any agency template.

   The rewrite keeps every colour, font, radius and shadow token exactly
   as it was and changes only composition. Three motifs carry it:

     1. THE ARCH   RETIRED. Every photograph on the page used to be cut
                   with the pointed lotus arch from the rozcestník
                   (--arch below). Repeated across the hero and three
                   offer cards it stopped being a signature and became
                   wallpaper, and it cropped the heads off photographs of
                   people. Photographs are now plain rounded rectangles
                   like everywhere else on the site. The helper is left
                   in place below but NOTHING USES IT — delete it, or
                   reuse it somewhere it earns its keep.
     2. THE FIGURE Lora numerals blown up to 56–72px and set at low
                   opacity behind the headings, instead of a 40px accent
                   sitting politely above them.
     3. THE THREAD one gold hairline runs through the page: vertically
                   between the four reasons, as a wave under the four
                   steps, as the standalone .rule elsewhere on the site.

   Below the hero nothing is a symmetric N-column grid. Every section is
   deliberately off balance: staggered columns in the reasons, one wide
   feature plus a narrower pair in the offer, alternating sides in the
   process, full-bleed dark for payment. The hero itself is now the
   site's standard full-width photograph, because a page that opens
   unlike every other page reads as a different website.

   Everything is scoped under `body.firmy` so the shared components
   (header, footer, .split, .faq, .cta, .btn) keep behaving exactly as
   they do on the other five pages.
   ========================================================= */

.firmy {
  /* The pointed lotus arch, same silhouette as the rozcestník pillars.
     Two mask layers: the arched head, sized as a percentage of the box
     so it scales with any aspect ratio, and a plain fill below it. */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V162C0 104 34 62 104 38 158 20 196 12 210 0c14 12 52 20 106 38 70 24 104 66 104 124v138z' fill='%23000'/%3E%3C/svg%3E");
  --arch-h: 52%;
}

/* ---------------------------------------------------------
   Arch helper — CURRENTLY UNUSED, see motif 1 in the header note.
   Put it on a wrapper around an <img>.
   The wrapper is the gold hairline (a 2px padding with the gradient
   showing through); the image carries the same mask one step in, so the
   frame follows the dome instead of boxing it.
   --------------------------------------------------------- */
.firmy .arch,
.firmy .arch > img {
  -webkit-mask-image: var(--arch), linear-gradient(#000, #000);
          mask-image: var(--arch), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--arch-h), 100% calc(100% - var(--arch-h) + 1px);
          mask-size: 100% var(--arch-h), 100% calc(100% - var(--arch-h) + 1px);
  -webkit-mask-position: top center, bottom center;
          mask-position: top center, bottom center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.firmy .arch {
  position: relative;
  display: block;
  padding: 2px;
  /* The mask cuts the head; the radius softens the two bottom corners. */
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg,
    rgba(197, 160, 89, .85) 0%,
    rgba(197, 160, 89, .38) 45%,
    rgba(197, 160, 89, .16) 100%);
}
.firmy .arch > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
  object-fit: cover;
  background: var(--cream-mid);   /* holds the shape while the file loads */
}
/* Portrait boxes need a taller head than landscape ones, or the dome
   flattens into a lozenge. */
.firmy .arch--tall { --arch-h: 56%; }
.firmy .arch--wide { --arch-h: 40%; }

/* =========================================================
   HERO — photograph across the full width, copy set on it

   Built like every other hero on the site (.hero on the homepage,
   .ohero on O nás): a bleeding background layer, a scrim, and the copy
   in an .__inner that outranks both. The gradient that guarantees the
   floor of contrast and the z-index on .fhero__inner come from the
   shared "Hero craft layer" in base.css, which .fhero is now part of.

   This page used to do its own thing here — a 7/5 grid with an
   arch-masked photograph on the right, a gold glow behind it and four
   chips straddling the bottom edge. It was the only hero on the site
   with its own composition, which made Pro firmy read as a page from a
   different website rather than a section of this one.

   Copy runs left, like the homepage hero, because it carries an h1 and
   two buttons and has the same job. O nás and Kontakt centre theirs;
   both patterns are in the house, this is the one that fits.
   ========================================================= */
.fhero {
  position: relative;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s12) var(--edge) var(--s13);
  background: var(--hero-dark);
  overflow: hidden;
  isolation: isolate;
}
.fhero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: center 35%, 0 0;
  background-repeat: no-repeat, repeat;
}
/* Weighted to the left, because that is the side the copy sits on. The
   right stays light enough that the photograph is still a photograph
   and not a dark texture. base.css adds the bottom-weighted gradient on
   top of this, so the buttons keep their edge over the floor as well. */
.fhero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to right,
    rgba(31, 22, 13, .92) 0%,
    rgba(31, 22, 13, .82) 34%,
    rgba(31, 22, 13, .5) 64%,
    rgba(31, 22, 13, .24) 100%);
}

.fhero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 864px;
}
.js .fhero__inner > * { animation: heroRise .9s var(--ease) both; }
.js .fhero__inner > *:nth-child(2) { animation-delay: .1s; }
.js .fhero__inner > *:nth-child(3) { animation-delay: .2s; }
.js .fhero__inner > *:nth-child(4) { animation-delay: .3s; }

.fhero__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: var(--lh7);
  color: var(--cream-hi);
}
.fhero__title em {
  font-style: italic;
  color: var(--gold-light);
}
.fhero__lede {
  max-width: 56ch;
  font-size: 17px;
  line-height: var(--lh3);
  color: var(--cream-mid);
}
.fhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}

/* =========================================================
   PROČ — four typographic entries on a gold thread
   ========================================================= */
.fben { padding-top: var(--s13); }
.fhead {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s4) var(--s10);
  align-items: end;
}
.fhead__lede { justify-self: end; max-width: 46ch; }

/* Sekce "Zdravější a spokojenější tým" (.fben__grid / .fbcard) je
   přestavěná na sdílenou časovou osu .ptrack z branch.css — čtyři
   typografické záznamy na zlaté niti nahradily čtyři kroky s fotkou,
   číslem za ní a vlnovkou, která se dokresluje scrollem. Texty zůstaly
   beze změny. Zůstává jen .fben s odsazením a .fhead pro nadpis. */


/* =========================================================
   NABÍDKA — one wide feature, then a narrower pair
   ========================================================= */
.foffer { padding-top: var(--s13); }
.foffer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8);
  margin-top: var(--s10);
  align-items: stretch;   /* 02 and 03 end level whatever their copy runs to */
}

/* ---------------------------------------------------------
   The photograph IS the card, and the copy sits inside it.

   These were arch-cut photographs with the copy set underneath. Two
   things were wrong with that. The pointed arch is the hero's shape and
   the rozcestník's — repeating it three more times down the same page
   turned a signature into wallpaper. And it cut the top off three
   photographs that have people in them, which is the one place a
   decorative mask has no business being.

   So: one rectangle per offer, photograph edge to edge, copy resting on
   its floor over a scrim. 01 keeps its prominence by running the full
   width of the grid rather than by sitting on a panel of its own.
   --------------------------------------------------------- */
.ocard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  padding: var(--s6);
  border-radius: var(--radius);
  overflow: hidden;
  /* Keeps the scrim and the copy stacking against each other and not
     against whatever else the page has going on. */
  isolation: isolate;
  box-shadow: var(--shadow-2);
}
.ocard--lead {
  grid-column: 1 / -1;
  min-height: 560px;
  padding: var(--s8);
}

.ocard__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cream-mid);   /* holds the box while the file loads */
}
.ocard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-weighted, because that is the only part the copy has to
   survive. Near-nothing at the top leaves the photograph readable as a
   photograph rather than as a dark texture behind some words.

   Odstín je rgba(58, 34, 21) — táž hněď jako .giftee__veil na poukazech.
   Původní rgba(31, 22, 13) je hero-tmavá, skoro černá; na fotce vypadala
   jako ztmavení, ne jako teplý závoj, a tyhle karty pak nepatřily
   k ostatním fotokartám na webu. Když se bude ladit, musí se ladit na
   obou místech naráz. (Třetí místo, .need__veil na masážích, zaniklo —
   ta karta má teď fotku a text oddělené, ne přes sebe.) */
.ocard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(58, 34, 21, .92) 0%,
    rgba(58, 34, 21, .74) 32%,
    rgba(58, 34, 21, .3) 64%,
    rgba(58, 34, 21, .08) 100%);
}

.ocard__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 56ch;
}
.ocard__no {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  opacity: .55;
}
.ocard__thai {
  margin-top: -20px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--gold-light);
}
.ocard__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: var(--lh4);
  color: #fff;
}
.ocard__desc { font-size: 15px; line-height: var(--lh2); color: rgba(255, 255, 255, .86); }
.ocard__list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s1);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, .22);
  align-self: stretch;
}
.ocard__list li {
  position: relative;
  padding-left: var(--s4);
  font-size: 14px;
  line-height: var(--lh2);
  color: rgba(255, 255, 255, .82);
}
.ocard__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-light);
  font-weight: 700;
}
/* On a photograph the gold-tinted pill from the cream layout disappears;
   this is the same shape drawn in light instead. */
.ocard__tag {
  margin-top: var(--s2);
  padding: 6px var(--s3);
  border-radius: 9999px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}

/* =========================================================
   JAK TO FUNGUJE — four steps on a gold wave
   ========================================================= */
.fsteps {
  position: relative;
  margin-top: var(--s12);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--s5);
}
/* The wave passes exactly through the four node centres: the nodes are
   72px, so their centres sit 36px below the top of an odd column, and
   the even columns are pushed down by --zig. */
.fsteps { --zig: 112px; }
/* Inline SVG místo obrázku na pozadí. Jako background se křivka nedala
   animovat — dokreslování scrollem potřebuje sáhnout na stroke-dashoffset
   samotné dráhy, a to jde jen u skutečného <path> v dokumentu.

   z-index 0 proti kolečkům s čísly (z-index 1), takže vlnovka vede ZA
   nimi a nepřetíná je. Tloušťka 2 px a krytí 0,5 — stejné hodnoty jako
   osa kroků na poukazech, ať jsou obě linky na webu stejně silné. */
.fsteps__wave {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 36px;
  /* width: 100% není zbytečné vedle left/right. SVG je nahrazený prvek
     a u těch se `width: auto` řeší jako VNITŘNÍ šířka — tedy 1200 px
     z viewBoxu —, ne jako rozdíl mezi left a right; `right` se pak
     zahodí jako přeurčené. Bez tohohle řádku vlnovka držela napevno
     1200 px: pod 1360 px viewportu přetékala (na 1180 o 100 px ven
     z obrazovky), nad ním naopak nedosáhla ke čtvrtému kroku.
     Táž dvojice width/height je z téhož důvodu u .ptrack__line. */
  width: 100%;
  height: var(--zig);
  pointer-events: none;
  overflow: visible;
}
.fsteps__wave path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .5;
}
.fstep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-bottom: var(--s5);
}
.firmy .fstep:nth-of-type(odd) { padding-bottom: calc(var(--zig) + var(--s5)); }
.firmy .fstep:nth-of-type(even) { margin-top: var(--zig); }
.fstep__node {
  position: relative;
  z-index: 1;
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--gold);
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--gold);
}
.fstep__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: var(--lh3);
  color: var(--ink);
}
.fstep__desc { margin-top: var(--s1); font-size: 14px; line-height: var(--lh2); color: var(--body); }


/* =========================================================
   POPTÁVKA — two-column inquiry
   ========================================================= */
.finq { padding: var(--s13) var(--edge); scroll-margin-top: var(--s10); }
.finq__grid {
  display: grid;
  grid-template-columns: 420fr 860fr;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s7);
}
.finq__aside {
  position: sticky;
  top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border-radius: 88px 88px var(--radius) var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-card);
  text-align: center;
  align-items: center;
}
.finq__asideTitle { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: var(--lh3); color: var(--ink); }
.finq__asideText { font-size: 14px; line-height: var(--lh2); color: var(--body); }
.finq__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-self: stretch;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s4);
  text-align: left;
}
.finq__contact { display: flex; align-items: center; gap: var(--s2); font-size: 15px; color: var(--ink); }
.finq__contact .ico { color: var(--gold); }
.finq__contact a { color: var(--brown); }

/* ---------- Form primitives (shared look with the voucher form) ---------- */
.fform { display: flex; flex-direction: column; gap: var(--s5); }
.fset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.fset__legend {
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--gold);
  text-transform: uppercase;
}
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field--full { grid-column: 1 / -1; }
.field__label {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--body);
  text-transform: uppercase;
}
.field__label span { color: var(--copper); }

.field__input,
.field__select,
.field__area {
  width: 100%;
  min-height: 56px;
  padding: var(--s2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder,
.field__area::placeholder { color: var(--grey); }
.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field__area { min-height: 120px; resize: vertical; }

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--copper) 50%),
    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-position: right var(--s3) center, right calc(var(--s3) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__hint { padding: 0 4px; font-family: var(--font-ui); font-size: 12px; line-height: var(--lh2); color: var(--muted); }
.field__error { padding: 0 4px; font-family: var(--font-ui); font-size: 12px; line-height: var(--lh2); color: #A6402B; }
.field__error:empty { display: none; }
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__area { border-color: #A6402B; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--body);
  cursor: pointer;
}
.consent input { accent-color: var(--copper); width: 18px; height: 18px; margin-top: 3px; flex: none; cursor: pointer; }
.consent a { color: var(--brown); }

.fform__submit {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s4);
}
.fform__next { font-family: var(--font-ui); font-size: 14px; line-height: var(--lh2); color: var(--body); }
.fform__fine { font-family: var(--font-ui); font-style: italic; font-size: 12px; line-height: var(--lh2); color: var(--muted); }

.fform__done {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.fform__done[hidden] { display: none; }
.fform__done h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: var(--lh3); color: var(--ink); }
.fform__done p { font-family: var(--font-ui); font-size: 14px; line-height: var(--lh2); color: var(--body); }
.fform__done strong { color: var(--brown); }

/* =========================================================
   Responsive
   The desktop composition is the exception, not the rule: every
   asymmetry below unwinds into one honest column on a phone.
   ========================================================= */
@media (max-width: 1180px) {
  .fhero { min-height: 680px; padding-top: var(--s10); }
  .fhero__title { font-size: 52px; line-height: var(--lh6); }
  .ocard--lead { min-height: 520px; padding: var(--s6); }
}

/* Tablet: the hero stacks, the process gives up the wave. */
@media (max-width: 1080px) {
  .fhero { min-height: 600px; padding-bottom: var(--s12); }
  .fhero__title { max-width: 20ch; }
  /* Copy takes the whole width here, so the scrim has to carry all the
     way across instead of fading out on the right. */
  .fhero__scrim {
    background: linear-gradient(to right,
      rgba(31, 22, 13, .92) 0%,
      rgba(31, 22, 13, .86) 50%,
      rgba(31, 22, 13, .72) 100%);
  }

  .fhead { grid-template-columns: minmax(0, 1fr); }
  .fhead__lede { justify-self: start; }

  /* One column: 01 loses its width advantage, so it gives up its extra
     height too and the three read as equals. */
  .foffer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ocard, .ocard--lead { min-height: 480px; padding: var(--s6); }

  /* Back to the vertical rail — a wave across four columns needs width
     it does not have here. */
  .fsteps { display: flex; flex-direction: column; max-width: 720px; margin-inline: auto; --zig: 0px; }
  .fsteps__wave { display: none; }
  .fstep {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
    padding-bottom: var(--s6);
  }
  .firmy .fstep:nth-of-type(odd) { padding-bottom: var(--s6); }
  .firmy .fstep:nth-of-type(even) { margin-top: 0; }
  .firmy .fstep:last-child { padding-bottom: 0; }
  /* The rail returns as a straight hairline between the nodes. */
  .fstep::before {
    content: "";
    position: absolute;
    left: 35px;
    top: 76px;
    bottom: var(--s2);
    width: 1px;
    background: linear-gradient(var(--gold), var(--gold-soft));
  }
  .firmy .fstep:last-child::before { display: none; }
  .fstep__body { padding-top: var(--s2); }

  .finq__grid { grid-template-columns: minmax(0, 1fr); }
  .finq__aside { position: static; }

  /* Four chips across a tablet turns every label into two lines, and the
     arc stops reading as an arc in two rows — so both go. */
}

@media (max-width: 860px) {
  .fhero { min-height: 560px; }
  .fhero__title { font-size: 44px; line-height: var(--lh6); }

}

@media (max-width: 640px) {
  .fhero { min-height: 0; padding: var(--s10) var(--edge) var(--s11); }
  .fhero__title { font-size: 34px; line-height: var(--lh5); }
  .fhero__lede { font-size: 16px; line-height: var(--lh2); }



  .ocard, .ocard--lead { min-height: 420px; padding: var(--s4); }
  .ocard__title { font-size: 22px; line-height: var(--lh3); }
  .ocard__no { font-size: 48px; }

  .fstep { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); }
  .fstep__node { width: 56px; height: 56px; font-size: 24px; }
  .fstep::before { left: 27px; top: 60px; }


  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .finq__aside { border-radius: 56px 56px var(--radius) var(--radius); padding: var(--s4); }

  /* Mobil — fotky se ořezávají odshora (proč, viz branch.css).
     U .arch to platí dvojnásob: obloukovou maskou je vidět hlavně horní
     část boxu, takže středový ořez odsud uřízl přesně to, co má klenba
     rámovat. */
  .fhero__bg { background-position: center top, 0 0; }
  .ocard__img,
  .firmy .arch > img { object-position: center top; }
}

/* Mobil: písmo polí 16 px, jinak iPhone při klepnutí stránku přiblíží. */
@media (max-width: 640px) {
  .field__input,
  .field__select,
  .field__area { font-size: 16px; }
}