/* ══════════════════════════════════════════════════════════════════
   KARAKUS DRIVE — SITE STYLESHEET
   The approved ROLZO-led visual system, promoted from the prototype to
   the live customer-facing site. This is the only stylesheet; the
   rejected system now lives in legacy/. Namespace kept as .pt-*.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Ground: warm espresso-black — tinted brown, not neutral black.
     Light surfaces: cool limestone, deliberately not cream. */
  --pt-night:    #17120D;
  --pt-night-2:  #221B14;
  --pt-night-3:  #30261C;
  --pt-limestone:#EFEEE9;
  --pt-pale:     #F8F7F4;
  --pt-ink:      #1A1611;
  --pt-ink-60:   #6A625A;
  --pt-bone:     #EDE8DE;
  --pt-bone-60:  rgba(237,232,222,.62);
  --pt-bone-28:  rgba(237,232,222,.28);
  --pt-hair-d:   rgba(237,232,222,.16);
  --pt-hair-l:   rgba(26,22,17,.16);
  --pt-sand:     #C6B393;

  --pt-serif: Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --pt-sans:  "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --pt-shell: 1560px;
  --pt-gut:   clamp(22px, 4.6vw, 76px);

  --pt-ease:  cubic-bezier(.19,.72,.24,1);
}

/* ── 2. BASE ───────────────────────────────────────────────────── */
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.pt {
  margin: 0;
  background: var(--pt-night);
  color: var(--pt-bone);
  font-family: var(--pt-sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "locl" 1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps the reset at zero specificity so every single-class
   component rule below can override it without an arms race. */
:where(.pt) h1, :where(.pt) h2, :where(.pt) h3 { margin: 0; font-weight: 400; }
:where(.pt) p  { margin: 0; }
:where(.pt) ul { margin: 0; padding: 0; list-style: none; }
:where(.pt) a  { color: inherit; text-decoration: none; }
:where(.pt) figure { margin: 0; }
:where(.pt) img { display: block; max-width: 100%; }

.pt :focus-visible {
  outline: 2px solid var(--pt-sand);
  outline-offset: 3px;
  border-radius: 1px;
}

.pt-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pt-skip {
  position: absolute; left: 14px; top: -70px; z-index: 90;
  background: var(--pt-bone); color: var(--pt-night);
  padding: 12px 18px; font-size: .875rem; font-weight: 500;
  transition: top .2s var(--pt-ease);
}
.pt-skip:focus { top: 14px; }

/* ── 3. SHARED TYPE ATOMS ──────────────────────────────────────── */
.pt-eyebrow {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--pt-bone-60);
}
.pt-eyebrow--dark { color: var(--pt-ink-60); }

.pt-fine {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--pt-bone-60);
}

/* ── 4. BUTTONS ────────────────────────────────────────────────── */
.pt-btn {
  display: inline-block;
  font-family: var(--pt-sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1;
  padding: 19px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color .34s var(--pt-ease), color .34s var(--pt-ease);
}
.pt-btn--light { background: var(--pt-bone); color: var(--pt-night); }
.pt-btn--light:hover { background: #FFFDF8; }
.pt-btn--dark  { background: var(--pt-night); color: var(--pt-bone); }
.pt-btn--dark:hover  { background: var(--pt-night-3); }
.pt-btn--sm    { padding: 13px 20px; font-size: .8125rem; }

/* ── 5. PHOTOGRAPHY ────────────────────────────────────────────── */
/* One grade across every photograph so a set of stock frames reads as
   a single art-directed body of work rather than a mixed library. */
.pt-shot { position: relative; overflow: hidden; background: var(--pt-night-2); }
/* absolute so the frame, not the file's aspect ratio, sets the crop —
   and so a flex/grid parent can't shrink the image */
.pt-shot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pt-focus, 50% 50%);
  /* --pt-zoom crops on the axis object-position cannot reach, so a frame
     can be pushed past detail that shouldn't be in a prototype (a legible
     number plate on a stock car, for one) */
  transform: scale(var(--pt-zoom, 1));
  transform-origin: var(--pt-origin, 50% 50%);
  filter: saturate(.72) contrast(1.06) brightness(.94);
}
.pt-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(60,36,14,.30), rgba(23,18,13,.16) 58%, rgba(10,16,24,.26));
  mix-blend-mode: multiply;
}

/* ── 6. HEADER RAIL ────────────────────────────────────────────── */
.pt-rail {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color .4s var(--pt-ease),
              box-shadow .4s var(--pt-ease),
              backdrop-filter .4s var(--pt-ease);
}
.pt-rail::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,7,4,.62), rgba(10,7,4,0));
  transition: opacity .4s var(--pt-ease);
}
.pt-rail.is-stuck {
  background: rgba(23,18,13,.9);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--pt-hair-d);
}
.pt-rail.is-stuck::before { opacity: 0; }

.pt-rail__in {
  max-width: var(--pt-shell);
  margin: 0 auto;
  padding: 26px var(--pt-gut);
  display: flex; align-items: center; gap: 20px;
  transition: padding .4s var(--pt-ease);
}
.pt-rail.is-stuck .pt-rail__in { padding-top: 15px; padding-bottom: 15px; }

.pt-rail__nav { display: flex; align-items: center; gap: 30px; }
.pt-rail__nav--lead  { flex: 1 1 0; }
.pt-rail__nav--trail { flex: 1 1 0; justify-content: flex-end; }

.pt-rail__nav a {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .012em;
  color: var(--pt-bone-60);
  transition: color .3s var(--pt-ease);
}
.pt-rail__nav a:hover { color: var(--pt-bone); }
.pt-rail__nav .pt-btn { color: var(--pt-night); }

/* Set uppercase in the markup, not via text-transform: lang="tr" casing
   would turn the wordmark's "i" into "İ". */
.pt-mark {
  flex: 0 0 auto;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--pt-bone);
  white-space: nowrap;
}
.pt-mark__gap { display: inline-block; width: .62em; }

/* ── 7. MOBILE MENU ────────────────────────────────────────────── */
.pt-burger { display: none; }

.pt-menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--pt-night);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pt-gut);
}
.pt-menu[hidden] { display: none; }
.pt-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.pt-menu__nav a {
  font-family: var(--pt-serif);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1.24;
  font-variation-settings: "opsz" 40;
}
.pt-menu__cta { margin-top: 44px; align-self: flex-start; }
.pt-menu__mark { position: absolute; top: 24px; left: var(--pt-gut); }
.pt-menu__close {
  position: absolute; top: 22px; right: var(--pt-gut);
  background: none; border: 0; padding: 8px 0;
  font-family: var(--pt-sans); font-size: .8125rem; font-weight: 500;
  color: var(--pt-bone-60); cursor: pointer;
}

/* ── 8. HERO ───────────────────────────────────────────────────── */
.pt-hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 98px;
}
.pt-hero__shot { position: absolute; inset: 0; z-index: -2; --pt-focus: 64% 52%; }
/* the scrim is part of the composition: it opens the lower-left corner
   for the headline and lets the wet street read on the right */
.pt-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,9,6,.90) 0%, rgba(12,9,6,.52) 34%, rgba(12,9,6,0) 68%),
    linear-gradient(to right, rgba(12,9,6,.68) 0%, rgba(12,9,6,.10) 52%, rgba(12,9,6,0) 78%);
}

.pt-hero__in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--pt-shell);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 58px) var(--pt-gut) clamp(52px, 6vw, 92px);
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
}
.pt-hero__datum { letter-spacing: .03em; color: var(--pt-bone); }

.pt-hero__h {
  font-family: var(--pt-serif);
  font-size: clamp(3.4rem, 9.2vw, 8.6rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: .92;
  letter-spacing: -.022em;
  margin: 0;
  text-shadow: 0 2px 40px rgba(8,5,3,.42);
}
/* the mask must clear Ş / ş descenders at line-height .92 */
.pt-line { display: block; overflow: hidden; padding-bottom: .19em; margin-bottom: -.19em; }
.pt-line > span { display: block; }

.pt-hero__foot {
  margin-top: clamp(34px, 4.4vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 30ch) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}
.pt-hero__lede {
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.48;
  color: var(--pt-bone);
}
/* reversed so the CTA lands flush on the right margin, with its
   qualifier reading into it */
.pt-hero__act {
  display: flex; flex-direction: row-reverse;
  align-items: center; gap: 30px;
  justify-content: flex-start;
}
.pt-hero__act .pt-fine { max-width: 26ch; text-align: right; color: var(--pt-bone); }

/* intent selector — anchored to the foot of the first viewport */
.pt-intent {
  position: relative; z-index: 1;
  border-top: 1px solid var(--pt-hair-d);
  background: rgba(10,7,4,.44);
  backdrop-filter: blur(6px);
}
.pt-intent__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: 0 var(--pt-gut);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: stretch;
}
.pt-intent__lead { padding: 22px 34px 24px 0; align-self: center; }
.pt-intent__q { font-size: .9375rem; font-weight: 500; }
.pt-intent__note { margin-top: 6px; max-width: 34ch; }

.pt-intent__list { display: grid; grid-template-columns: repeat(5, 1fr); }
.pt-intent__list a {
  display: flex; align-items: flex-end;
  height: 100%; min-height: 108px;
  padding: 16px 20px 24px;
  border-left: 1px solid var(--pt-hair-d);
  font-size: .9375rem; line-height: 1.34;
  color: var(--pt-bone-60);
  transition: color .34s var(--pt-ease), background-color .34s var(--pt-ease);
}
.pt-intent__list a:hover { color: var(--pt-bone); background: rgba(237,232,222,.07); }

/* ── 9. SERVICES — photographic blocks ─────────────────────────── */
.pt-svc {
  background: var(--pt-limestone);
  color: var(--pt-ink);
  padding: clamp(72px, 7vw, 124px) 0 clamp(60px, 5.6vw, 96px);
  counter-reset: pt-blk;
}
.pt-svc__head {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: 0 var(--pt-gut) clamp(38px, 4.2vw, 66px);
}
.pt-svc__h {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 48;
  line-height: 1.06;
  letter-spacing: -.018em;
  margin-top: 22px;
  max-width: 21ch;
}

/* Each block: a large photograph bleeding to the outer edge of the
   viewport, the approved service names set against the gutter. The row
   is stretched, not bottom-aligned: the photograph takes exactly the
   height of the name column (or its own floor, whichever is taller), so
   the frame's top and bottom edges land on the type block's rules
   instead of leaving a tall unused rectangle beside a short list. */
.pt-blk {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(26px, 3.4vw, 58px);
  padding-right: var(--pt-gut);
  margin-bottom: clamp(46px, 4.4vw, 80px);
  counter-increment: pt-blk;
}
.pt-blk__shot { height: auto; min-height: clamp(300px, 29vw, 440px); }
.pt-blk__list {
  position: relative;
  margin-left: clamp(8px, 1.5vw, 28px);
  padding: clamp(42px, 4vw, 62px) 0 clamp(20px, 2.2vw, 34px);
  border-top: 1px solid var(--pt-hair-l);
  display: flex; flex-direction: column; justify-content: center;
}
/* a quiet index rather than an invented heading — it holds the top of
   the column so the names read as set type, not as floating labels */
.pt-blk__list::before {
  content: counter(pt-blk, decimal-leading-zero);
  position: absolute; top: clamp(14px, 1.5vw, 20px); left: 0;
  font-size: .75rem; font-weight: 500; letter-spacing: .16em;
  color: var(--pt-ink-60);
}

.pt-blk--flip {
  padding-right: 0;
  padding-left: var(--pt-gut);
  direction: rtl;
}
.pt-blk--flip > * { direction: ltr; }
.pt-blk--flip .pt-blk__list { margin-left: 0; margin-right: clamp(8px, 2vw, 40px); }

.pt-blk__list li + li { margin-top: clamp(2px, .6vw, 10px); }
.pt-blk__list a {
  display: block;
  font-family: var(--pt-serif);
  font-size: clamp(1.55rem, 3.05vw, 3rem);
  font-weight: 300;
  font-variation-settings: "opsz" 32;
  line-height: 1.16;
  letter-spacing: -.012em;
  padding: 9px 0;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color .34s var(--pt-ease), color .34s var(--pt-ease);
}
.pt-blk__list a:hover,
.pt-blk__list a:focus-visible { border-bottom-color: var(--pt-ink); }

.pt-svc__foot {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(18px, 2vw, 32px) var(--pt-gut) 0;
}
.pt-svc__foot::before {
  content: ""; display: block;
  border-top: 1px solid var(--pt-hair-l);
  margin-bottom: clamp(24px, 2.6vw, 40px);
}

/* ── 10. JOURNEY ───────────────────────────────────────────────── */
.pt-jrn { background: var(--pt-night); }

.pt-jrn__band {
  position: relative;
  height: clamp(360px, 62vw, 760px);
  display: flex; align-items: flex-end;
  --pt-focus: 50% 40%;
  --pt-zoom: 1.5;
  --pt-origin: 14% 42%;
}
.pt-jrn__band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(12,9,6,.88), rgba(12,9,6,0) 46%);
}
.pt-jrn__cap {
  position: relative; z-index: 2;
  padding: 0 var(--pt-gut) clamp(26px, 3vw, 46px);
  max-width: var(--pt-shell); margin: 0 auto; width: 100%;
  color: var(--pt-bone);
}

.pt-jrn__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(58px, 7vw, 116px) var(--pt-gut) clamp(60px, 7vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 108px);
  align-items: start;
}
.pt-jrn__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.15rem, 4.3vw, 4.4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 56;
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.pt-jrn__body > p { max-width: 54ch; color: var(--pt-bone-60); }
.pt-jrn__body .pt-aside {
  margin-top: 26px; padding-left: 22px;
  border-left: 1px solid var(--pt-hair-d);
  color: var(--pt-bone);
}
.pt-jrn__body .pt-btn { margin-top: 38px; }

.pt-coda {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(66px, 8vw, 132px) var(--pt-gut) clamp(90px, 11vw, 180px);
  border-top: 1px solid var(--pt-hair-d);
  text-align: center;
}
.pt-coda__h {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 56;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 14px 0 26px;
}
.pt-coda__p {
  max-width: 58ch; margin: 0 auto;
  font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  color: var(--pt-bone-60);
}
.pt-coda__f { max-width: 52ch; margin: 26px auto 0; color: var(--pt-bone-28); }

/* ── 11. MOTION ────────────────────────────────────────────────── */
.pt-js [data-h] { opacity: 0; }
.pt-js .pt-line > [data-h] { transform: translateY(105%); opacity: 1; }
[data-h="1"] { --d: .04s; }
[data-h="2"] { --d: .12s; }
[data-h="3"] { --d: .21s; }
[data-h="4"] { --d: .40s; }
[data-h="5"] { --d: .54s; }

.is-live [data-h] {
  opacity: 1;
  transition: opacity .9s var(--pt-ease) var(--d, 0s),
              transform 1.05s var(--pt-ease) var(--d, 0s);
}
.is-live .pt-line > [data-h] { transform: translateY(0); }
.is-live .pt-hero__foot,
.is-live .pt-intent { transform: translateY(0); }
.pt-hero__foot[data-h], .pt-intent[data-h] { transform: translateY(16px); }

.pt-js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s var(--pt-ease), transform .85s var(--pt-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pt [data-h], .pt [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pt * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 12. BREAKPOINTS ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .pt-rail__nav--lead a:nth-child(2) { display: none; }
  .pt-intent__in { grid-template-columns: 1fr; }
  .pt-intent__lead { padding: 20px 0 16px; }
  .pt-intent__list a { min-height: 88px; }
  .pt-intent__list a:first-child { border-left: 0; }
}

@media (max-width: 900px) {
  .pt-rail__nav { display: none; }
  .pt-burger {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
    background: none; border: 0; padding: 10px 0; cursor: pointer;
    color: var(--pt-bone);
  }
  .pt-burger__bars { display: block; width: 26px; }
  .pt-burger__bars i { display: block; height: 1px; background: currentColor; }
  .pt-burger__bars i + i { margin-top: 7px; }
  .pt-rail__in { padding-top: 18px; padding-bottom: 18px; gap: 0; }
  .pt-mark { margin-right: auto; }

  .pt-hero { min-height: 0; padding-top: 108px; }
  /* portrait crop keeps the car in frame instead of the facade above it */
  .pt-hero__shot { --pt-focus: 54% 63%; --pt-zoom: 1.12; --pt-origin: 50% 62%; }
  .pt-hero::before {
    background:
      linear-gradient(to top, rgba(12,9,6,.93) 0%, rgba(12,9,6,.46) 44%, rgba(12,9,6,.06) 78%),
      linear-gradient(to bottom, rgba(12,9,6,.52), rgba(12,9,6,0) 28%);
  }
  .pt-hero__in { padding-bottom: 46px; min-height: calc(100svh - 108px); }
  .pt-hero__h { font-size: clamp(3.25rem, 15.5vw, 5rem); line-height: .95; }
  .pt-hero__foot { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .pt-hero__act { flex-direction: column; align-items: stretch; gap: 16px; }
  .pt-hero__act .pt-btn { text-align: center; padding: 21px 26px; }
  .pt-hero__act .pt-fine { max-width: none; text-align: center; }

  .pt-intent__list { grid-template-columns: 1fr; }
  .pt-intent__list a {
    min-height: 0; padding: 18px 0;
    border-left: 0; border-top: 1px solid var(--pt-hair-d);
    color: var(--pt-bone);
  }
  .pt-intent__list a:hover { background: none; }
  .pt-intent__in { padding-bottom: 14px; }

  /* blocks stack: photograph full-bleed, names in the gutter below */
  .pt-svc { padding: clamp(60px, 13vw, 92px) 0 clamp(48px, 10vw, 76px); }
  .pt-svc__head { padding-bottom: clamp(30px, 7vw, 46px); }
  .pt-svc__h { max-width: 15ch; }
  .pt-blk,
  .pt-blk--flip {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0;
    direction: ltr;
    margin-bottom: clamp(40px, 9vw, 64px);
  }
  /* stacked, the photograph no longer answers to the type column: give
     it back a fixed editorial height */
  .pt-blk__shot { height: clamp(290px, 68vw, 400px); min-height: 0; }
  .pt-blk__list,
  .pt-blk--flip .pt-blk__list {
    margin: 0 var(--pt-gut);
    padding: 34px 0 0;
    display: block;
  }
  .pt-blk__list::before { top: 12px; }

  .pt-jrn__in { grid-template-columns: 1fr; gap: 26px; }
  .pt-jrn__h { max-width: 12ch; }
  .pt-jrn__body .pt-btn { display: block; text-align: center; padding: 21px 26px; }

  .pt-coda { text-align: left; }
  .pt-coda__p, .pt-coda__f { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   SITE EXPANSION — the same visual system carried across the rest of
   the funnel. Nothing below introduces a second design language: every
   block reuses the tokens, the serif display scale, the photographic
   grade and the hairline rhythm established above.
   ══════════════════════════════════════════════════════════════════ */

/* ── 13. SHARED ADDITIONS ──────────────────────────────────────── */
.pt-link {
  display: inline-block;
  font-size: .9375rem; font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .3s var(--pt-ease);
}
.pt-link:hover { opacity: .68; }

/* contact rows — rendered only when a real value is configured (§L.8) */
.pt-chan { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--pt-hair-d); }
.pt-chan__k { flex: 0 0 92px; font-size: .8125rem; color: var(--pt-bone-60); }
.pt-chan__v { font-size: 1.0625rem; border-bottom: 1px solid var(--pt-bone-28); }
.pt-reach .pt-chan { border-top-color: var(--pt-hair-l); }
.pt-reach .pt-chan__k { color: var(--pt-ink-60); }
.pt-reach .pt-chan__v { border-bottom-color: var(--pt-hair-l); }

/* ── 14. S1-02 · REQUEST ENTRY (early) ─────────────────────────── */
.pt-entry { background: var(--pt-night); border-top: 1px solid var(--pt-hair-d); }
.pt-entry__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(66px, 8vw, 140px) var(--pt-gut);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 108px);
  align-items: end;
}
.pt-entry__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.1rem, 3.9vw, 3.9rem);
  font-weight: 300; font-variation-settings: "opsz" 48;
  line-height: 1.04; letter-spacing: -.02em;
  max-width: 14ch;
}
.pt-entry__p { max-width: 50ch; color: var(--pt-bone-60); }
.pt-entry__act { margin-top: clamp(26px, 3vw, 40px); }
.pt-entry__act .pt-fine { margin-top: 18px; max-width: 48ch; }

/* ── 15. S1-03 · REAL OPERATIONAL EVIDENCE ─────────────────────── */
/* The photograph runs off the left edge of the viewport and the copy is
   set against it as one composition: the row is stretched, so the frame
   is exactly as tall as the text block beside it. The right edge stays
   on the shell line so the section still measures with its neighbours. */
.pt-evid { background: var(--pt-night); }
.pt-evid__in {
  padding: clamp(58px, 6vw, 96px) max(var(--pt-gut), calc(50vw - var(--pt-shell) / 2)) clamp(58px, 6vw, 96px) 0;
  display: grid;
  /* the photograph takes whatever the text measure does not need, so the
     copy column is a measure rather than a half-empty half of the grid */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 47ch);
  gap: clamp(30px, 4.4vw, 78px);
  align-items: stretch;
}
/* editorial cabin detail — material, finish and cleanliness. Atmosphere,
   not fleet evidence: it is not a Karakus Drive vehicle and no copy in
   this section presents it as one (§4/§5). */
.pt-evid__shot {
  height: auto; min-height: clamp(360px, 33vw, 500px);
  --pt-focus: 52% 52%;
}
.pt-evid__copy { align-self: center; }
.pt-evid__h {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  font-weight: 300; font-variation-settings: "opsz" 48;
  line-height: 1.05; letter-spacing: -.02em;
  margin-top: 18px; max-width: 13ch;
}
.pt-evid__p { margin-top: 22px; color: var(--pt-bone-60); }
.pt-evid__note {
  margin-top: 22px; padding-left: 22px;
  border-left: 1px solid var(--pt-hair-d);
}
/* the section's action is set as a ruled row inside the text measure,
   not as a button dropped on top of it */
.pt-evid__act { margin-top: clamp(26px, 2.8vw, 38px); }
.pt-evid__cta {
  display: block;
  padding: 18px 2px;
  border-top: 1px solid var(--pt-bone-28);
  border-bottom: 1px solid var(--pt-bone-28);
  font-family: var(--pt-sans);
  font-size: .9375rem; font-weight: 500; letter-spacing: .06em;
  color: var(--pt-bone);
  transition: background-color .34s var(--pt-ease), border-color .34s var(--pt-ease), padding-left .34s var(--pt-ease);
}
.pt-evid__cta:hover,
.pt-evid__cta:focus-visible {
  background: rgba(237,232,222,.07);
  border-color: var(--pt-bone-60);
  padding-left: 12px;
}

/* ── 16. S1-06 + S1-08 · REACHABILITY & ON-BEHALF ROUTE ────────── */
.pt-reach { background: var(--pt-pale); color: var(--pt-ink); }
.pt-reach__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(70px, 9vw, 148px) var(--pt-gut);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
.pt-reach__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.1rem, 4.1vw, 4.1rem);
  font-weight: 300; font-variation-settings: "opsz" 52;
  line-height: 1.02; letter-spacing: -.02em;
  margin-top: 20px; max-width: 14ch;
}
.pt-reach__p { margin-top: 26px; max-width: 54ch; color: var(--pt-ink-60); }
.pt-reach__act { margin-top: clamp(30px, 3.4vw, 44px); }
.pt-reach__ledger { margin-top: clamp(30px, 3.4vw, 44px); max-width: 32ch; }

.pt-route {
  padding-left: clamp(24px, 3vw, 54px);
  border-left: 1px solid var(--pt-hair-l);
}
.pt-route__h {
  font-family: var(--pt-serif);
  font-size: clamp(1.5rem, 2.1vw, 2.15rem);
  font-weight: 300; font-variation-settings: "opsz" 32;
  line-height: 1.12; letter-spacing: -.015em;
  max-width: 16ch;
}
.pt-route__p { margin-top: 18px; color: var(--pt-ink-60); font-size: 1rem; }
.pt-route__act { margin-top: 26px; }

/* ── 17. S1-09 · CLOSING REQUEST ENTRY ─────────────────────────── */
.pt-close {
  position: relative; isolation: isolate;
  min-height: clamp(480px, 74vh, 800px);
  display: flex; align-items: flex-end;
}
.pt-close__shot { position: absolute; inset: 0; z-index: -2; --pt-focus: 58% 46%; --pt-zoom: 1.08; }
.pt-close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,9,6,.92) 0%, rgba(12,9,6,.48) 42%, rgba(12,9,6,.10) 76%),
    linear-gradient(to right, rgba(12,9,6,.62) 0%, rgba(12,9,6,0) 62%);
}
.pt-close__in {
  position: relative;
  max-width: var(--pt-shell); margin: 0 auto; width: 100%;
  padding: clamp(58px, 7vw, 116px) var(--pt-gut) clamp(58px, 7vw, 108px);
}
.pt-close__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  font-weight: 300; font-variation-settings: "opsz" 72;
  line-height: .98; letter-spacing: -.022em;
  max-width: 13ch;
  text-shadow: 0 2px 40px rgba(8,5,3,.42);
}
.pt-close__p { margin-top: 24px; max-width: 46ch; font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); }
.pt-close__act { margin-top: clamp(30px, 3.6vw, 48px); }
.pt-close__act .pt-fine { margin-top: 18px; max-width: 46ch; color: var(--pt-bone); }

/* ── 18. S3 · REQUEST FLOW ─────────────────────────────────────── */
.pt-req { background: var(--pt-night-2); border-top: 1px solid var(--pt-hair-d); }
.pt-req__in {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(58px, 7vw, 118px) var(--pt-gut) clamp(66px, 8vw, 128px);
}
/* native date/time pickers must render on the dark ground, not white */
.pt-req form { color-scheme: dark; }

.pt-prog__label {
  display: block;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--pt-bone-60);
}
.pt-prog__label .pt-prog__n { color: var(--pt-bone); }
.pt-prog__track { height: 1px; margin-top: 16px; background: var(--pt-hair-d); overflow: hidden; }
.pt-prog__fill {
  height: 1px; background: var(--pt-sand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--pt-ease);
}
.pt-flow-intro {
  margin-top: 28px; max-width: 62ch;
  font-size: .9375rem; color: var(--pt-bone-60);
}

.pt-step { margin-top: clamp(38px, 4.4vw, 62px); }
.pt-step__h {
  font-family: var(--pt-serif);
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 300; font-variation-settings: "opsz" 44;
  line-height: 1.04; letter-spacing: -.02em;
  max-width: 16ch;
}

.pt-fld { margin-top: clamp(26px, 3vw, 38px); }
.pt-fld > label, .pt-fld__legend {
  display: block; padding: 0;
  font-size: .8125rem; letter-spacing: .025em;
  color: var(--pt-bone-60);
  margin-bottom: 12px;
}
.pt-fld input, .pt-fld textarea {
  display: block; width: 100%;
  background: transparent; color: var(--pt-bone);
  border: 0; border-bottom: 1px solid var(--pt-bone-28); border-radius: 0;
  font-family: var(--pt-sans); font-size: 1.125rem; line-height: 1.5;
  padding: 12px 0;
  transition: border-color .3s var(--pt-ease);
}
.pt-fld textarea { resize: vertical; min-height: 92px; }
.pt-fld input:hover, .pt-fld textarea:hover { border-bottom-color: var(--pt-bone-60); }
.pt-fld input:focus, .pt-fld textarea:focus { border-bottom-color: var(--pt-sand); }
.pt-fld :focus-visible { outline-offset: 6px; }
.pt-opt { color: var(--pt-bone-28); }

.pt-help { margin-top: 12px; font-size: .8125rem; line-height: 1.5; color: var(--pt-bone-60); }
.pt-err  { margin-top: 12px; font-size: .8125rem; line-height: 1.5; color: #E7B681; }
[data-invalid="true"] input,
[data-invalid="true"] textarea { border-bottom-color: #E7B681; }

.pt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.pt-pair .pt-fld { margin-top: 0; }
.pt-group { border: 0; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; min-width: 0; }
.pt-group .pt-fld:first-of-type { margin-top: 0; }

/* choices read as a concierge menu, not a grid of SaaS cards */
.pt-choices { margin: 0; border-top: 1px solid var(--pt-hair-d); }
.pt-choice {
  display: flex; align-items: center; gap: 18px;
  padding: 17px 2px;
  border-bottom: 1px solid var(--pt-hair-d);
  cursor: pointer;
}
.pt-choice input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 15px; height: 15px; margin: 0;
  border: 1px solid var(--pt-bone-28); border-radius: 50%;
  transition: border-color .3s var(--pt-ease), background-color .3s var(--pt-ease);
}
.pt-choice input:checked { background: var(--pt-sand); border-color: var(--pt-sand); box-shadow: inset 0 0 0 3px var(--pt-night-2); }
.pt-choice span {
  font-family: var(--pt-serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 300; font-variation-settings: "opsz" 28;
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--pt-bone-60);
  transition: color .3s var(--pt-ease);
}
.pt-choice:hover span { color: var(--pt-bone); }
.pt-choice input:checked + span { color: var(--pt-bone); }

.pt-suberr {
  margin-top: clamp(30px, 3.4vw, 42px);
  padding: 16px 0 16px 20px;
  border-left: 2px solid #E7B681;
  font-size: .9375rem; color: #E7B681;
}

.pt-fnav {
  margin-top: clamp(38px, 4.4vw, 60px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--pt-hair-d);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.pt-fnav .pt-btn { cursor: pointer; }
.pt-fnav .pt-btn[disabled] { opacity: .62; }
.pt-fnav__quiet {
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  font-family: var(--pt-sans); font-size: .8125rem; font-weight: 500;
  color: var(--pt-bone-60);
  transition: color .3s var(--pt-ease);
}
.pt-fnav__quiet:hover { color: var(--pt-bone); }
.pt-fnav__back { margin-left: auto; }
.pt-req__note { margin-top: 18px; max-width: 56ch; }

.pt-spin {
  display: inline-block; width: 13px; height: 13px; margin-left: 12px;
  vertical-align: -1px;
  border: 1px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: pt-turn .7s linear infinite;
}
@keyframes pt-turn { to { transform: rotate(360deg); } }

/* ── 19. S4 · CONFIRMATION ─────────────────────────────────────── */
.pt-done { background: var(--pt-night); border-top: 1px solid var(--pt-hair-d); }
.pt-done__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(80px, 10vw, 168px) var(--pt-gut) clamp(84px, 11vw, 176px);
}
.pt-done__head { max-width: 46ch; }
.pt-done__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.3rem, 4.6vw, 4.6rem);
  font-weight: 300; font-variation-settings: "opsz" 60;
  line-height: 1; letter-spacing: -.022em;
}
.pt-done__h:focus { outline: none; }
.pt-done__p { margin-top: 22px; font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); color: var(--pt-bone-60); }
.pt-done__ref {
  margin-top: clamp(38px, 4.4vw, 60px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--pt-hair-d);
}
.pt-done__no {
  display: block; margin-top: 8px;
  font-family: var(--pt-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300; font-variation-settings: "opsz" 60;
  line-height: 1; letter-spacing: .01em;
  color: var(--pt-sand);
  font-variant-numeric: lining-nums tabular-nums;
}
.pt-done__grid {
  margin-top: clamp(56px, 7vw, 108px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(30px, 4vw, 68px);
}
.pt-done__blk { padding-top: 26px; border-top: 1px solid var(--pt-hair-d); }
.pt-done__blk h3 {
  font-family: var(--pt-serif);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 300; font-variation-settings: "opsz" 28;
  line-height: 1.16; letter-spacing: -.012em;
}
.pt-done__blk p { margin-top: 14px; font-size: .9375rem; color: var(--pt-bone-60); }
.pt-done__blk .pt-chan:first-of-type { margin-top: 24px; }

/* ── 20. FOOTER ────────────────────────────────────────────────── */
.pt-foot { background: var(--pt-night); border-top: 1px solid var(--pt-hair-d); }
.pt-foot__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(50px, 6vw, 92px) var(--pt-gut) clamp(54px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.pt-foot__ledger { margin-top: 26px; max-width: 30ch; }
.pt-foot__fine { margin-top: 26px; }
.pt-foot__fine a { border-bottom: 1px solid var(--pt-bone-28); }
.pt-foot__nav { display: flex; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap; justify-content: flex-end; }
.pt-foot__nav a {
  font-size: .8125rem; font-weight: 500; letter-spacing: .012em;
  color: var(--pt-bone-60);
  transition: color .3s var(--pt-ease);
}
.pt-foot__nav a:hover { color: var(--pt-bone); }

/* ── 21. STICKY MOBILE CTA (§G.4) ──────────────────────────────── */
.pt-sticky { display: none; }

/* ── 21b. WHATSAPP — secondary contact, never louder than the CTA ─ */
/* A dark disc that belongs to the night palette; only the glyph carries
   WhatsApp green, which is all the recognition it needs at this size. */
.pt-wa {
  position: fixed; z-index: 45;
  right: clamp(22px, 4.6vw, 44px);
  bottom: clamp(22px, 3vw, 40px);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(34,27,20,.92);
  border: 1px solid var(--pt-hair-d);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 6px 26px rgba(8,5,3,.34);
  color: #25D366;
  transition: border-color .3s var(--pt-ease), transform .3s var(--pt-ease), opacity .3s var(--pt-ease);
}
.pt-wa:hover { border-color: rgba(37,211,102,.55); transform: translateY(-2px); }
.pt-wa:focus-visible { border-radius: 50%; }   /* the shared focus reset squares it off otherwise */
/* talep formu ekrandayken çekilir — alan kontrollerinin üstüne binmez */
.pt-wa[data-away] { opacity: 0; transform: translateY(14px); pointer-events: none; }
.pt-wa svg { width: 22px; height: 22px; fill: currentColor; }

/* ── 22. S5 · CORPORATE PAGE ───────────────────────────────────── */
.pt-bhero {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 76vh, 820px);
  display: flex; align-items: flex-end;
  padding-top: 98px;
}
.pt-bhero__shot { position: absolute; inset: 0; z-index: -2; --pt-focus: 56% 52%; }
.pt-bhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,9,6,.92) 0%, rgba(12,9,6,.50) 40%, rgba(12,9,6,.06) 74%),
    linear-gradient(to right, rgba(12,9,6,.66) 0%, rgba(12,9,6,0) 64%);
}
.pt-bhero__in {
  position: relative;
  max-width: var(--pt-shell); margin: 0 auto; width: 100%;
  padding: clamp(40px, 5vw, 84px) var(--pt-gut) clamp(52px, 6vw, 96px);
}
.pt-bhero__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  font-weight: 300; font-variation-settings: "opsz" 72;
  line-height: .96; letter-spacing: -.022em;
  margin-top: 18px; max-width: 13ch;
  text-shadow: 0 2px 40px rgba(8,5,3,.42);
}
.pt-bhero__p { margin-top: 26px; max-width: 50ch; font-size: clamp(1.0625rem, 1.15vw, 1.25rem); line-height: 1.48; }
.pt-bhero__act { margin-top: clamp(30px, 3.6vw, 46px); }

.pt-same { background: var(--pt-limestone); color: var(--pt-ink); }
.pt-same__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(70px, 9vw, 148px) var(--pt-gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: start;
}
.pt-same__h {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  font-weight: 300; font-variation-settings: "opsz" 48;
  line-height: 1.04; letter-spacing: -.02em;
  max-width: 14ch;
}
.pt-same__p { margin-top: 24px; max-width: 46ch; color: var(--pt-ink-60); }
.pt-same__list { border-top: 1px solid var(--pt-hair-l); }
.pt-same__list li {
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--pt-hair-l);
  font-family: var(--pt-serif);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 300; font-variation-settings: "opsz" 28;
  line-height: 1.24; letter-spacing: -.01em;
  max-width: 34ch;
}

.pt-stmt { background: var(--pt-night); }
.pt-stmt__in {
  max-width: var(--pt-shell); margin: 0 auto;
  padding: clamp(72px, 9vw, 152px) var(--pt-gut);
}
.pt-stmt__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  font-weight: 300; font-variation-settings: "opsz" 56;
  line-height: 1.02; letter-spacing: -.02em;
  max-width: 14ch;
}
.pt-stmt__p {
  margin-top: clamp(30px, 3.6vw, 48px);
  max-width: 58ch; margin-left: auto;
  font-size: clamp(1.0625rem, 1.25vw, 1.375rem);
  line-height: 1.58;
  color: var(--pt-bone-60);
}

/* ── 23. EXPANSION BREAKPOINTS ─────────────────────────────────── */
@media (max-width: 1180px) {
  .pt-reach__in { grid-template-columns: 1fr; }
  .pt-route { padding-left: 0; border-left: 0; border-top: 1px solid var(--pt-hair-l); padding-top: clamp(30px, 4vw, 44px); }
  .pt-foot__in { grid-template-columns: 1fr; align-items: start; }
  .pt-foot__nav { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .pt-entry__in,
  .pt-evid__in,
  .pt-same__in { grid-template-columns: 1fr; gap: 28px; align-items: start; }

  .pt-entry__h, .pt-evid__h, .pt-reach__h, .pt-same__h, .pt-stmt__h { max-width: 13ch; }
  .pt-entry__act .pt-btn,
  .pt-reach__act .pt-btn,
  .pt-close__act .pt-btn,
  .pt-bhero__act .pt-btn { display: block; text-align: center; padding: 21px 26px; }

  /* stacked: the photograph leads the section full-bleed, the copy is
     set below it inside the gutter */
  .pt-evid__in {
    padding: 0 0 clamp(52px, 12vw, 76px);
    gap: clamp(26px, 6vw, 38px);
  }
  .pt-evid__shot { aspect-ratio: 5 / 4; height: auto; min-height: 0; }
  .pt-evid__copy { padding: 0 var(--pt-gut); }
  .pt-evid__p, .pt-evid__note, .pt-evid__act { max-width: none; }
  .pt-evid__cta { text-align: center; padding: 20px 8px; }
  .pt-evid__cta:hover, .pt-evid__cta:focus-visible { padding-left: 8px; }
  .pt-stmt__p { margin-left: 0; }

  .pt-close { min-height: 0; }
  .pt-close__in { padding-top: clamp(190px, 58vw, 330px); }

  .pt-bhero { min-height: 0; padding-top: 108px; }
  .pt-bhero__in { padding-top: clamp(170px, 48vw, 280px); }

  .pt-pair { grid-template-columns: 1fr; gap: clamp(26px, 3vw, 38px); }
  .pt-fnav { gap: 16px; }
  .pt-fnav .pt-btn { width: 100%; text-align: center; padding: 21px 26px; }
  .pt-fnav__back { margin-left: 0; }

  /* the page's one persistent action, kept clear of the dark request bands */
  .pt-sticky[data-mounted] {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px var(--pt-gut) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(23,18,13,.93);
    backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--pt-hair-d);
    transform: translateY(130%);
    transition: transform .42s var(--pt-ease);
  }
  .pt-sticky[data-visible="true"] { transform: none; }
  .pt-sticky .pt-btn { display: block; width: 100%; text-align: center; padding: 19px 26px; }

  /* clears the sticky bar's full height whether or not it is showing,
     so the primary action is never covered and nothing jumps */
  .pt-wa {
    width: 50px; height: 50px;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .pt-wa svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-wa { transition: none; }
  .pt-wa:hover { transform: none; }
  .pt-sticky[data-mounted] { transition: none; }
  .pt-prog__fill { transition: none; }
}

/* ── 24. REQUEST SURFACE — measured two-column reading ─────────── */
/* The flow is read like a planning document: the step context stays
   fixed in the left rail while the fields move, so the form never
   presents itself as a full-width admin screen. */
.pt-req__in { max-width: 1240px; }
.pt-req__grid {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.pt-req__rail { position: sticky; top: 104px; }
.pt-req__rail .pt-step__h {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-variation-settings: "opsz" 32;
  max-width: 14ch;
}
.pt-req__rail .pt-flow-intro { max-width: 38ch; }
.pt-req__body { max-width: 640px; }
.pt-req__body > .pt-step:first-of-type { margin-top: 0; }

/* a bottom-ruled field takes a bottom-ruled focus state, not a box */
.pt-fld input:focus-visible,
.pt-fld textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--pt-sand);
  padding-bottom: 11px;
  background: rgba(237,232,222,.05);
}

@media (max-width: 900px) {
  .pt-req__grid { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
  .pt-req__rail { position: static; }
  .pt-req__body { max-width: none; }
}

/* the radio inherits .pt-fld input's field padding without this and
   inflates into an ellipse */
.pt-choice input { padding: 0; }
.pt-choice input:focus-visible {
  outline: 2px solid var(--pt-sand);
  outline-offset: 3px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  border-width: 1px;
}
.pt-choice input:checked:focus-visible { background: var(--pt-sand); }

/* ── 25. S1-02V · VITO ─────────────────────────────────────────
   The Vito service gets the page's one full-height photographic
   split: the frame bleeds off the left edge of the viewport at the
   same grade as every other shot, and the type column sits on the
   night ground beside it. Same tokens, same serif scale — a larger
   share of the screen, not a different design language. */
.pt-vito {
  background: var(--pt-night);
  border-top: 1px solid var(--pt-hair-d);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: stretch;
}
.pt-vito__shot {
  min-height: clamp(520px, 78vh, 880px);
  --pt-focus: 52% 54%;
  --pt-zoom: 1.04;
}
/* the photograph's own darkness is uneven; this keeps the seam with
   the type column from reading as a hard paste-up */
.pt-vito__shot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(12,9,6,0) 68%, rgba(23,18,13,.55));
}
.pt-vito__in {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(58px, 7vw, 116px) var(--pt-gut) clamp(58px, 7vw, 116px) clamp(34px, 5vw, 92px);
  max-width: 44rem;
}
.pt-vito__h {
  font-family: var(--pt-serif);
  font-size: clamp(2.2rem, 4vw, 4.05rem);
  font-weight: 300; font-variation-settings: "opsz" 56;
  line-height: 1.02; letter-spacing: -.021em;
  margin-top: 20px;
}
.pt-vito__p {
  margin-top: clamp(26px, 3vw, 38px);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  color: var(--pt-bone);
}
.pt-vito__note {
  margin-top: 26px; padding-left: 22px;
  border-left: 1px solid var(--pt-hair-d);
  max-width: 48ch;
  font-size: .9375rem;
  color: var(--pt-bone-60);
}
.pt-vito__act { margin-top: clamp(30px, 3.4vw, 46px); }

@media (max-width: 900px) {
  .pt-vito { grid-template-columns: 1fr; }
  /* portrait frame keeps the cabin's depth instead of cropping it to a band */
  .pt-vito__shot { min-height: 0; aspect-ratio: 4 / 5; --pt-zoom: 1; }
  .pt-vito__shot::before {
    background: linear-gradient(to bottom, rgba(12,9,6,0) 62%, rgba(23,18,13,.72));
  }
  .pt-vito__in {
    max-width: none;
    padding: clamp(34px, 8vw, 56px) var(--pt-gut) clamp(52px, 11vw, 76px);
  }
  .pt-vito__h { font-size: clamp(2.05rem, 8.4vw, 2.9rem); }
  .pt-vito__act .pt-btn { display: block; text-align: center; padding: 21px 26px; }
}