/* Piracil — page-specific styles. Engine tokens only get overridden here,
   never edited in scrollcraft.css itself. */

:root {
  --sc-canvas:     #FAFAF8;
  --sc-surface:    #F0EEE9;
  --sc-ink:        #1B1815;
  --sc-ink-soft:   #6E6860;
  --sc-accent:     #C8272A;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;

  /* Tighter than the engine default (clamp(4.5rem,9vw,11rem)) — on an
     all-dark canvas, generous section padding reads as dead black gaps
     rather than air. Kept tight on the light canvas too, for the same
     rhythm across the whole page. */
  --sc-section: clamp(2.25rem, 4.5vw, 5rem);

  --pf-card-bg: #F5F1EA;
  --pf-card-ink: #1B1815;
  --pf-hairline: rgba(27,21,17,0.1);
}

/* Pan acts pin a full 100vh stage; a rail shorter than that leaves the
   remainder as empty canvas. Centre it so the gap splits top/bottom
   instead of collecting as one dead band. */
[data-sc-act="pan"] [data-sc-stage] { display: flex; align-items: center; }

/* ---------- nav: index of objects ---------- */
.pf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter);
  background: linear-gradient(to bottom, rgba(250,250,248,0.92), rgba(250,250,248,0));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.pf-nav__mark { position: relative; z-index: 21; pointer-events: auto; display: flex; align-items: center; }
.pf-nav__mark img { height: 22px; width: auto; display: block; }
.pf-nav__index {
  pointer-events: auto; display: flex; gap: var(--sc-4); margin-left: auto;
  list-style: none; padding: 0; margin-top: 0; margin-bottom: 0;
}
.pf-nav__index a {
  font-family: var(--sc-font-text); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--sc-ink-soft); text-decoration: none;
  padding: 6px 2px; border-bottom: 1px solid transparent;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.pf-nav__index a:hover, .pf-nav__index a:focus-visible { color: var(--sc-ink); border-color: var(--sc-accent); }

.pf-nav__toggle {
  position: relative; z-index: 21;
  display: none; pointer-events: auto; margin-left: auto;
  width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.pf-nav__toggle span {
  display: block; width: 22px; height: 2px; background: var(--sc-ink); border-radius: 2px;
  transition: transform 220ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out);
}

@media (max-width: 760px) {
  .pf-nav__index {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3);
    position: fixed; inset: 0; z-index: 19;
    background: var(--sc-canvas); padding: 5rem var(--sc-gutter) var(--sc-6);
    height: 100vh; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 200ms;
  }
  .pf-nav__index a {
    font-size: 1.15rem; font-weight: 700; padding: 10px 2px; width: 100%;
    border-bottom-color: var(--pf-hairline);
  }
  .pf-nav.is-open .pf-nav__index { opacity: 1; transform: translateY(0); visibility: visible; }
  .pf-nav__toggle { display: flex; }
  .pf-nav.is-open .pf-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pf-nav.is-open .pf-nav__toggle span:nth-child(2) { opacity: 0; }
  .pf-nav.is-open .pf-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- specimen card: the framing every real photo gets ---------- */
.pf-specimen {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--pf-card-bg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 24px 60px -20px rgba(0,0,0,0.55),
    0 8px 20px -10px rgba(0,0,0,0.4);
}
.pf-specimen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hard safety cap: no standalone photo card should ever be able to eat more
   than half a mobile screen, regardless of aspect-ratio support or how its
   container resolves width. Real-device iOS scrolling reported cards
   reading far taller than desktop/emulator testing showed — this is the
   floor under that, independent of root cause. Excludes .pf-rail__item
   (stretched to fill its pan rail's own height) and .pf-hero__specimen
   (the full-bleed hero video is deliberately screen-height). */
@media (max-width: 760px) {
  .pf-specimen:not(.pf-rail__item):not(.pf-hero__specimen) { max-height: 52vh; }
  .pf-specimen:not(.pf-rail__item):not(.pf-hero__specimen) img { max-height: 52vh; }
}

.pf-specimen__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sc-4) var(--sc-5);
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.pf-specimen__label b {
  display: block; font-family: var(--sc-font-display); font-weight: 700;
  font-size: 0.95rem; color: #fff; letter-spacing: -0.01em;
}
.pf-specimen__label span {
  display: block; font-family: var(--sc-font-text); font-size: 0.76rem;
  color: rgba(255,255,255,0.72); margin-top: 2px;
}

/* ---------- act 1: recognition ---------- */
/* Full-bleed video hero on every breakpoint — a portrait clip for mobile, a
   landscape one for desktop, picked via <source media> in the markup. The
   caption sits over the footage on a scrim, not below it in normal flow. */
.pf-hero { padding: 0; position: relative; }
.pf-hero__specimen {
  width: 100vw; max-width: none; aspect-ratio: auto;
  height: 100vh; height: 100svh; min-height: 640px; margin: 0 0 0 calc(50% - 50vw);
  border-radius: 0; box-shadow: none;
}
.pf-hero__specimen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-hero__specimen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(20,17,14,0.72) 0%, rgba(20,17,14,0.08) 42%, rgba(20,17,14,0.4) 100%);
}
.pf-hero__caption {
  /* Centred with inset + margin-inline:auto, not left:50%+transform: the
     mobile static-mode rules below zero out `transform` on every
     [data-sc-in] element (this one included) to cancel its entrance slide,
     and that would silently wreck a transform-based centering trick too. */
  position: absolute; inset-inline: 0; bottom: clamp(2.5rem, 9vh, 6rem);
  margin: 0 auto; z-index: 2;
  width: 100%; padding-inline: var(--sc-gutter); max-width: 620px; text-align: center;
}
.pf-hero__caption h1, .pf-hero__caption p { color: #fff; }

@media (max-width: 760px) {
  .pf-hero__specimen { min-height: 560px; }
  /* Bottom of the clip dissolves into the flat page background instead of
     cutting hard into the next section — the last sliver is fully opaque
     canvas colour, so the seam lands invisible. The dark band that sits
     just above it is sized to the caption below, not the whole frame, so
     most of the footage up top stays fully visible. */
  .pf-hero__specimen::after {
    background: linear-gradient(to top,
      var(--sc-canvas) 0%,
      rgba(20,17,14,0.62) 9%,
      rgba(20,17,14,0.58) 40%,
      rgba(20,17,14,0.12) 62%,
      rgba(20,17,14,0.04) 100%);
  }
  /* Caption capped to 40% of the video's own height, per brief — the copy
     is short enough that this is a ceiling, not a squeeze. */
  .pf-hero__caption {
    max-height: 40%; overflow: hidden;
    bottom: clamp(1.5rem, 6vh, 3rem);
  }
}

/* ---------- act 2 & act 6: pan rail ---------- */
.pf-rail { display: flex; align-items: stretch; gap: var(--sc-5); padding-inline: var(--sc-gutter); height: 80vh; max-height: 640px; width: 100%; }
.pf-rail__lead, .pf-rail__note {
  flex: 0 0 clamp(14rem, 24vw, 20rem); display: flex; flex-direction: column;
  justify-content: center;
}
.pf-rail__item {
  flex: 0 0 clamp(15rem, 24vw, 19rem); position: relative; border-radius: 16px;
  overflow: hidden; opacity: 0.55; transform: translateY(14px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.pf-rail__item.is-settled { opacity: 1; transform: translateY(0); }
.pf-rail__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-rail__item .pf-specimen__label { }
@media (prefers-reduced-motion: reduce) {
  .pf-rail { overflow-x: auto; scroll-snap-type: x proximity; }
  .pf-rail__item { opacity: 1; transform: none; }
}

/* ---------- act 1b: proof pillars ---------- */
.pf-pillars { padding-block: var(--sc-section); }
.pf-pillars__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-6);
  max-width: 1100px; margin-inline: auto;
}
.pf-pillars__item { border-top: 1px solid var(--pf-hairline); padding-top: var(--sc-5); }
.pf-pillars__num {
  font-family: var(--sc-font-text); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--sc-accent);
}
.pf-pillars__title {
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.02em; color: var(--sc-ink); margin: var(--sc-3) 0 var(--sc-2);
}
.pf-pillars__item .sc-body { color: var(--sc-ink-soft); }
@media (max-width: 760px) { .pf-pillars__grid { grid-template-columns: 1fr; gap: var(--sc-5); } }

/* ---------- act 3: the choice (peak) ---------- */
.pf-choice { padding-block: var(--sc-section); }
.pf-choice__head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--sc-8); }
.pf-choice__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6);
  max-width: 980px; margin-inline: auto; padding-inline: var(--sc-gutter);
}
.pf-choice__card { display: flex; flex-direction: column; gap: var(--sc-4); }
.pf-choice__card .pf-specimen { aspect-ratio: 4/5; }
.pf-choice__spec { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-choice__spec li {
  font-family: var(--sc-font-text); font-size: 0.86rem; color: var(--sc-ink-soft);
  padding-left: 14px; position: relative;
}
.pf-choice__spec li::before { content: '—'; position: absolute; left: 0; color: var(--sc-accent); }
.pf-choice__tag {
  align-self: flex-start; font-family: var(--sc-font-text); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-accent-ink); background: var(--sc-accent); padding: 5px 10px; border-radius: 100px;
}
@media (max-width: 760px) { .pf-choice__grid { grid-template-columns: 1fr; } }

/* ---------- act 4: application ---------- */
.pf-apply { padding-block: var(--sc-section); }
.pf-apply__wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sc-7); align-items: center; max-width: 1100px; margin-inline: auto; padding-inline: var(--sc-gutter); }
.pf-apply__specimen { aspect-ratio: 3/4; }
.pf-apply__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sc-5); }
.pf-apply__tags span {
  font-family: var(--sc-font-text); font-size: 0.74rem; color: var(--sc-ink-soft);
  border: 1px solid var(--pf-hairline); padding: 6px 12px; border-radius: 100px;
}
@media (max-width: 760px) { .pf-apply__wrap { grid-template-columns: 1fr; } }
.pf-spec-table { width: 100%; border-collapse: collapse; margin-top: var(--sc-5); font-family: var(--sc-font-text); font-size: 0.82rem; }
.pf-spec-table th { text-align: left; font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-accent); padding: 0 10px 8px 0; border-bottom: 1px solid var(--pf-hairline); }
.pf-spec-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--pf-hairline); color: var(--sc-ink-soft); }
.pf-spec-table tr:last-child td { border-bottom: none; }
.pf-spec-table td:first-child { color: var(--sc-ink); font-weight: 600; }

/* ---------- act 5: origin (parallax) ---------- */
.pf-origin { padding-block: var(--sc-section); position: relative; overflow: hidden; }
.pf-origin__stage { position: relative; max-width: 640px; margin: 0 auto var(--sc-7); aspect-ratio: 1/1; }
.pf-origin__stage .pf-specimen { position: absolute; inset: 0; }
.pf-origin__copy { max-width: 560px; margin-inline: auto; text-align: center; }
.pf-origin__badge {
  position: absolute; right: -14px; bottom: 24px; z-index: 2;
  background: var(--sc-surface); border: 1px solid var(--pf-hairline);
  color: var(--sc-ink); font-family: var(--sc-font-text); font-size: 0.74rem;
  font-weight: 600; padding: 10px 16px; border-radius: 100px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
}
@media (max-width: 640px) { .pf-origin__badge { right: 8px; bottom: 12px; font-size: 0.66rem; padding: 8px 12px; } }

/* ---------- act 6: scale rail items are fact cards, not photos ---------- */
.pf-fact { flex: 0 0 clamp(11rem, 18vw, 14rem); border-radius: 16px; border: 1px solid var(--pf-hairline); padding: var(--sc-5); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pf-fact b { font-family: var(--sc-font-display); font-size: 1.6rem; color: var(--sc-ink); letter-spacing: -0.02em; }
.pf-fact span { font-family: var(--sc-font-text); font-size: 0.78rem; color: var(--sc-ink-soft); }

/* ---------- act 7: commitment / inquiry plate ---------- */
.pf-plate { padding-block: var(--sc-section); }
.pf-plate__wrap {
  max-width: 720px; margin-inline: auto; padding: var(--sc-8) var(--sc-7);
  border-radius: 20px; border: 1px solid var(--pf-hairline);
  display: flex; flex-direction: column; gap: var(--sc-5); align-items: flex-start;
}
.pf-plate__label { font-family: var(--sc-font-text); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.pf-plate__cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 0.92rem;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 14px 22px; border-radius: 100px; text-decoration: none;
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
  box-shadow: 0 10px 24px -10px rgba(200,39,42,0.55);
}
.pf-plate__cta:hover { transform: translateY(-2px); }
.pf-plate__cta:active { transform: scale(0.97); }
.pf-plate__cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

/* Holographic foil: a slow-spinning iridescent conic gradient sits under the
   label (z-index -1, so it never covers the text — see CSS painting order),
   clipped to the pill by overflow:hidden. A gloss streak sweeps across on
   hover/focus, like foil catching light at an angle. */
.pf-plate__cta::before {
  content: ''; position: absolute; inset: -70%; z-index: -1;
  background: conic-gradient(from 0deg,
    #ff6ec7, #7afcff, #fff56e, #7aff9e, #b98bff, #ff9d6e, #ff6ec7);
  opacity: 0.4; mix-blend-mode: color-dodge;
  animation: pf-holo-spin 6s linear infinite;
}
.pf-plate__cta::after {
  content: ''; position: absolute; inset: -70% -20%; z-index: -1;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.65) 50%, transparent 58%);
  transform: translateX(-140%);
  transition: transform 550ms var(--sc-ease-out);
}
.pf-plate__cta:hover::after, .pf-plate__cta:focus-visible::after { transform: translateX(140%); }
@keyframes pf-holo-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .pf-plate__cta::before { animation: none; }
}

/* ---------- quote form: falls straight into WhatsApp ---------- */
.pf-quote { display: flex; flex-direction: column; gap: var(--sc-4); width: 100%; }
.pf-quote__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.pf-quote__field { display: flex; flex-direction: column; gap: 6px; }
.pf-quote__field span {
  font-family: var(--sc-font-text); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--sc-ink-soft);
}
.pf-quote__field input, .pf-quote__field select {
  /* 16px minimum: below that, iOS Safari auto-zooms the whole page in on
     focus — it hijacks the viewport, not just the field. */
  font-family: var(--sc-font-text); font-size: 16px; color: var(--sc-ink);
  background: rgba(27,21,17,0.03); border: 1px solid var(--pf-hairline);
  border-radius: 10px; padding: 11px 13px; outline: none; width: 100%;
  transition: border-color 160ms var(--sc-ease-out), background 160ms var(--sc-ease-out);
  appearance: none;
}
.pf-quote__field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%),
                     linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
.pf-quote__field input::placeholder { color: rgba(110,104,96,0.6); }
.pf-quote__field input:focus, .pf-quote__field select:focus {
  border-color: var(--sc-accent); background: rgba(27,21,17,0.05);
}
.pf-quote__field input:invalid:not(:placeholder-shown) { border-color: var(--sc-accent); }
.pf-quote__submit {
  align-self: flex-start; border: none; cursor: pointer;
  font-family: inherit; margin-top: var(--sc-2);
}
.pf-quote__submit:active { transform: scale(0.97); }
.pf-quote__note {
  font-family: var(--sc-font-text); font-size: 0.76rem; color: var(--sc-ink-soft);
  margin: -4px 0 0;
}
@media (max-width: 620px) { .pf-quote__row { grid-template-columns: 1fr; } }
.pf-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4);
  max-width: 720px; margin: var(--sc-8) auto 0; padding-inline: var(--sc-gutter);
  font-family: var(--sc-font-text); font-size: 0.72rem; color: var(--sc-ink-soft);
  flex-wrap: wrap;
}
.pf-foot img { height: 16px; width: auto; opacity: 0.7; }

/* ---------- Fio Vivo: the signature move ---------- */
#fio {
  position: fixed; left: 0; top: 0; height: 100vh; width: 34px; z-index: 15;
  pointer-events: none;
}
#fio svg { width: 100%; height: 100%; display: block; }
#fio .fio-a, #fio .fio-b {
  transition: stroke 480ms linear, transform 480ms var(--sc-ease-out);
}
@media (max-width: 760px) { #fio { width: 18px; } }
@media (prefers-reduced-motion: reduce) { #fio .fio-a, #fio .fio-b { transition: stroke 480ms linear; } }

/* ---------- mobile: static mode ----------
   Real iOS Safari showed the pin/pan mechanic reading distorted mid-scroll —
   the engine pins the stage at 100svh but sets each pinned section's actual
   scroll track from data-sc-span in plain vh (scrollcraft.js line ~513);
   svh and vh disagree by the browser-chrome height on mobile Safari, and
   that gap moves live as the address bar collapses, which desyncs the
   track from the stage it's supposed to be driving. Rather than chase that
   on a device we can't fully reproduce, the whole scroll-driven layer is
   turned off below 760px: no pin, no pan transform, no parallax, no reveal
   wipe, no tilt. Content stays exactly where it is in the HTML, just
   presented as a normal static page. JS (ScrollCraft.mount) keeps running
   — the [data-sc-in] fade-ins are IntersectionObserver-driven, not part of
   this bug, and the quote form / nav toggle / Fio Vivo need it. */
@media (max-width: 760px) {
  [data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"] { height: auto !important; }
  .sc-stage { position: relative !important; top: auto !important; height: auto !important; }

  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] { transform: none !important; }
  [data-sc-pan] > * { scroll-snap-align: center; }

  [data-sc-parallax], [data-sc-tilt], .sc-split__i { transform: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
}