:root {
  color-scheme: light;
  --ink: #25313a;
  --paper: #fff8ef;
  --accent: #ef7149;
  --accent-dark: #b84e2d;
  --accent-3: #ffd66b;
  --panel: rgba(255, 252, 244, 0.93);
  --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Task 071: the bright --accent is a scene/tint colour, never a text
     background. White on #ef7149 measures 2.95:1, below the 4.5:1 AA floor for
     the 16px bold CTA label, so the button uses its own darker fill. Keep these
     two tokens together: --cta-press only reads as a pressed shadow under
     --cta-fill. */
  --cta-fill: #c04d28;   /* white text -> 4.85:1 */
  --cta-press: #8f3a1f;  /* white text -> 7.52:1 */

  /* One shell and one gutter for the header, every content section and the
     footer, so their text edges line up. The hero stage is deliberately wider
     than this shell; nothing else is. */
  --shell: 1280px;
  --gutter: clamp(16px, 4vw, 44px);
  --stage-gutter: clamp(10px, 3vw, 34px);
  --measure-narrow: 900px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: linear-gradient(180deg, #fff8ef 0%, #f3ead9 100%);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.5;
}
button, a { -webkit-tap-highlight-color: transparent; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: -60px;
  left: 12px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

.brand-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter);
}
.brand-mark {
  font-weight: 900;
  font-size: clamp(21px, 2.5vw, 30px);
  letter-spacing: -0.04em;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-inline: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus-visible { text-decoration: underline; }
.staff-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
}
a.staff-link:hover,
a.staff-link:focus-visible { background: var(--ink); color: var(--paper); }
.staff-status { background: #f2e7d6; color: #4a585f; }

/* Horizontal space belongs to the blocks, not to <main>: the stage keeps its
   own narrow inset while the text sections align to --gutter. */
main { padding: 0 0 28px; }
.stage { position: relative; width: 100%; max-width: none; margin: 0 auto; padding-inline: var(--stage-gutter); }
.scene-wrap {
  width: min(100%, calc((100vh - 84px) * 16 / 9));
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid rgba(37, 49, 58, 0.84);
  border-radius: clamp(20px, 3vw, 34px);
  background: #b9ddf3;
  box-shadow: 0 16px 0 rgba(37, 49, 58, 0.12);
}
.scene { position: relative; width: 100%; aspect-ratio: 16 / 9; isolation: isolate; }
.scene-media,
.scene-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-media { overflow: hidden; }
.scene-background {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  display: block;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: 52% 62%;
  transition: transform 1.4s cubic-bezier(0.22, 0.75, 0.22, 1);
}
.scene[data-state="approaching"] .scene-background,
.scene[data-state="network"] .scene-background { transform: scale(0.9); }
.scene[data-state="returning"] .scene-background { transform: scale(1.08); }
/* Two stacked linear washes, no radial: the original top shade, plus a gentle
   paper wash under the copy column (which starts at 38%) so hero text is not
   relying on whichever sky pixel happens to fall behind it. Deliberately light
   at 0.26 -- enough headroom for AA, not enough to flatten the garden. */
.scene-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 24%, rgba(255, 248, 239, 0.22) 40%, rgba(255, 248, 239, 0.26) 100%),
    linear-gradient(180deg, rgba(32, 60, 71, 0.06), transparent 40%);
  transition: opacity 0.35s ease;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 38%;
  top: 43%;
  width: min(50%, 590px);
  transform: translateY(-50%);
}
.eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 11px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.hero-copy h1 {
  max-width: 13ch;
  margin: 0 0 0.3em;
  font-size: clamp(2rem, 4.4vw, 4.6rem);
  /* Turkish needs real leading here: a dotted İ on one line sits directly
     under the descender of Ş/Ç/Ğ on the line above. 0.96 collided. */
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede {
  max-width: 42ch;
  margin: 0 0 0.55em;
  font-size: clamp(0.96rem, 1.45vw, 1.16rem);
  font-weight: 600;
}
/* The medical-boundary disclaimer sits on photography, so it takes the full
   ink colour rather than a soft grey: #44545e measured 3.16:1 against the
   lightest sky pixels behind it, below the 4.5:1 AA floor. It was also the
   smallest type in the hero, which is the wrong place to be smallest. */
.boundary-note {
  max-width: 54ch;
  margin: 0 0 0.9em;
  color: var(--ink);
  font-size: clamp(0.82rem, 1.05vw, 0.94rem);
}
.cta-primary {
  display: inline-block;
  min-height: 46px;
  padding: 11px 24px;
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cta-fill);
  color: #fff;
  box-shadow: 0 6px 0 var(--cta-press);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-primary:hover { transform: translateY(-2px); }
.cta-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--cta-press); }
.cta-primary:focus-visible,
.dog-button:focus-visible,
.staff-link:focus-visible,
.site-nav a:focus-visible,
.skip-link:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--ink);
}
.hint {
  min-height: 1.3em;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.dog-button {
  position: absolute;
  z-index: 4;
  left: 14%;
  bottom: 3%;
  width: 22%;
  aspect-ratio: 0.75;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 42%;
  background: transparent;
  transition: left 0.25s ease;
}
.dog-sprite {
  position: absolute;
  inset: 0;
  background: url("/assets/pati-hatti-dog-sprites.webp") 0 0 / 400% 100% no-repeat;
  filter: drop-shadow(0 10px 8px rgba(46, 32, 19, 0.2));
}
.scene[data-state="right"] .dog-button,
.scene[data-state="network"] .dog-button,
.scene[data-state="approaching"] .dog-button,
.scene[data-state="returning"] .dog-button { left: 69%; }
.scene[data-state="hopping-right"] .dog-button {
  pointer-events: none;
  animation: hop-right 1.6s cubic-bezier(0.3, 0.7, 0.35, 1) both;
}
.scene[data-state="hopping-right"] .dog-sprite { background-position: 33.333% 0; }
.scene[data-state="approaching"] .dog-button {
  pointer-events: none;
  animation: run-toward-camera 1.4s ease-in-out both;
}
.scene[data-state="approaching"] .dog-sprite { background-position: 66.666% 0; }
.scene[data-state="returning"] .dog-button {
  pointer-events: none;
  animation: hop-home 1.7s cubic-bezier(0.3, 0.7, 0.35, 1) both;
}
.scene[data-state="returning"] .dog-sprite { background-position: 100% 0; }
@keyframes hop-right {
  0% { left: 14%; transform: translateY(0) rotate(0); }
  18% { left: 23%; transform: translateY(-19%) rotate(3deg); }
  34% { left: 34%; transform: translateY(0) rotate(-2deg); }
  52% { left: 45%; transform: translateY(-23%) rotate(3deg); }
  70% { left: 55%; transform: translateY(0) rotate(-2deg); }
  86% { left: 64%; transform: translateY(-12%) rotate(2deg); }
  100% { left: 69%; transform: translateY(0) rotate(0); }
}
@keyframes run-toward-camera {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-7%) rotate(-2deg); }
  40% { transform: translateY(1%) rotate(2deg); }
  60% { transform: translateY(-8%) rotate(-2deg); }
  80% { transform: translateY(1%) rotate(2deg); }
}
@keyframes hop-home {
  0% { left: 69%; transform: translateY(0) rotate(0); }
  18% { left: 60%; transform: translateY(-18%) rotate(-3deg); }
  35% { left: 50%; transform: translateY(0) rotate(2deg); }
  54% { left: 40%; transform: translateY(-22%) rotate(-3deg); }
  72% { left: 29%; transform: translateY(0) rotate(2deg); }
  88% { left: 19%; transform: translateY(-11%) rotate(-2deg); }
  100% { left: 14%; transform: translateY(0) rotate(0); }
}
.pilot-panel {
  max-width: 670px;
  padding: clamp(14px, 2vw, 24px);
  border: 2px solid rgba(37, 49, 58, 0.72);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 9px 0 rgba(37, 49, 58, 0.12);
}
.pilot-panel h2 { margin: 0 0 0.15em; font-size: clamp(1.2rem, 2.2vw, 2rem); line-height: 1.05; }
.pilot-note { max-width: 65ch; margin: 0; color: #4a585f; font-size: clamp(0.78rem, 0.9vw, 0.86rem); }
.role-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 12px);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.role-card {
  min-width: 0;
  padding: clamp(8px, 1vw, 12px);
  border: 2px solid #eadbc4;
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
/* Task 071: these three were the smallest type on the page -- the badge
   resolved to 9.4px on desktop and about 6.9px under 420px. Nothing here goes
   below 10px now. */
.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-3);
  color: #493a0f;
  font-size: clamp(0.64rem, 0.7vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.role-name { margin: 7px 0 0; font-size: clamp(0.8rem, 0.95vw, 0.95rem); font-weight: 700; }
.role-desc { margin: 2px 0 0; color: #55626a; font-size: clamp(0.72rem, 0.85vw, 0.8rem); }

html.js .hero-copy,
html.js .pilot-panel { transition: opacity 0.35s ease, transform 0.35s ease; }
html.js .pilot-panel {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 5%, 64px);
  top: 50%;
  width: min(44%, 520px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 12px));
}
html.js .scene[data-state="approaching"] .hero-copy,
html.js .scene[data-state="network"] .hero-copy,
html.js .scene[data-state="returning"] .hero-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% - 12px));
}
html.js .pilot-panel[data-revealed="true"] { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
html.js .scene[data-state="network"] .scene-shade { opacity: 0.5; }

/* No JS: the state machine never runs, so the reveal panel must stay in the
   normal document flow instead of behind a JS-only overlay transform. */
html:not(.js) .scene-wrap { overflow: visible; }
html:not(.js) .scene {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
html:not(.js) .scene-media {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: none;
  border-radius: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0 0;
}
html:not(.js) .hero-copy,
html:not(.js) .pilot-panel {
  position: relative;
  inset: auto;
  width: auto;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 18px 20px;
  transform: none;
}
html:not(.js) .pilot-panel {
  border: 0;
  border-radius: 0 0 clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px);
  box-shadow: none;
}

/* Task 071: every section shares the header/footer shell and gutter, so all
   text edges sit on one vertical line. Before this, the page ran five
   different alignments (header 80px, stage 34px, three sections 160px, SSS and
   closing 270px, footer 80px) and content appeared to drift right on scroll. */
.content-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter);
  scroll-margin-top: 84px;
}
/* Long-form blocks keep a short measure via their own width, not a narrower
   container, so shortening the line never moves the left edge. */
.faq-list { max-width: var(--measure-narrow); }
.content-section h2 {
  max-width: 20ch;
  margin: 0 0 0.6em;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.content-section > .eyebrow { margin-bottom: 14px; }

.step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 20px 16px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(37, 49, 58, 0.14);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent-3);
  color: #493a0f;
  font-weight: 900;
}
.step-title { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; }
.step-desc { margin: 0; color: #44545e; font-size: 0.95rem; }

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.control-card {
  padding: 18px 16px;
  border: 2px solid #eadbc4;
  border-radius: 16px;
  background: #fff;
}
.control-title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
.control-desc { margin: 0; color: #44545e; font-size: 0.95rem; }
.control-note { max-width: 65ch; margin: 20px 0 0; color: #4a585f; font-size: 0.88rem; }

.boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}
.boundary-col {
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}
.boundary-col h3 { margin: 0 0 10px; font-size: 1.15rem; }
.boundary-col ul { margin: 0; padding-left: 1.2em; }
.boundary-col li { margin: 0 0 6px; }
.boundary-does { box-shadow: 0 6px 0 rgba(76, 130, 92, 0.35); }
.boundary-does-not { box-shadow: 0 6px 0 rgba(184, 78, 45, 0.35); }
.urgent-note {
  max-width: 65ch;
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 2px solid var(--accent-dark);
  border-radius: 12px;
  background: rgba(239, 113, 73, 0.1);
  font-weight: 700;
}
.pending-note { max-width: 65ch; margin: 12px 0 0; color: #4a585f; font-size: 0.88rem; }

.faq-list { margin: 28px 0 0; }
.faq-item {
  padding: 14px 16px;
  border: 2px solid #eadbc4;
  border-radius: 14px;
  background: #fff;
}
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
/* Replace the default disclosure triangle with a chevron that matches the rest
   of the card system. The <summary> element itself stays attribute-free. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.faq-item summary:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--ink);
}
.faq-item p { margin: 10px 0 0; color: #44545e; }
.faq-item[open] summary { margin-bottom: 2px; }

.closing-section p { max-width: 65ch; }
.launch-status {
  display: inline-block;
  margin: 4px 0 0;
  padding: 10px 18px;
  border: 2px solid #c8b89f;
  border-radius: 999px;
  color: #4a585f;
  font-weight: 700;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter) 34px;
  border-top: 2px solid #eadbc4;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }
.footer-status { max-width: 52ch; color: #4a585f; font-size: 0.92rem; }

@media (max-width: 768px) {
  /* Task 071: the bar used to wrap onto three rows (brand / nav / status) and
     ate 154px -- 18% of a 844px viewport -- before any content. Brand and
     status now share row one; the nav gets row two and scrolls sideways
     instead of wrapping. */
  .brand-bar { padding-block: 8px; gap: 4px 12px; }
  .brand-mark { font-size: clamp(19px, 5.4vw, 24px); }
  .staff-link { order: 2; min-height: 38px; padding: 5px 13px; font-size: 0.84rem; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: 0 18px;
    margin-inline: 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { min-height: 40px; white-space: nowrap; }
  /* 8px let text sit almost on the screen edge; 16px is the floor. */
  main { padding-inline: 0; }
  .stage { padding-inline: 16px; }
  .content-section { padding-inline: 16px; }
  .scene-wrap { width: 100%; overflow: visible; border-radius: 22px; }
  .scene { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--paper); }
  .scene-media { position: relative; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border-radius: 19px 19px 0 0; }
  .scene-shade { background: linear-gradient(180deg, transparent 52%, rgba(255, 248, 239, 0.2)); }
  .hero-copy,
  .pilot-panel { position: relative; inset: auto; width: auto; max-width: none; padding: 18px 18px 20px; transform: none; }
  .hero-copy h1 { max-width: 15ch; font-size: clamp(1.8rem, 8.4vw, 2.5rem); }
  .lede { font-size: 0.96rem; }
  /* Was 0.73rem == 11.7px for the medical disclaimer. */
  .boundary-note { font-size: 0.88rem; }
  .dog-button { left: 17%; bottom: 4%; width: 20%; }
  .scene[data-state="right"] .dog-button,
  .scene[data-state="network"] .dog-button,
  .scene[data-state="approaching"] .dog-button,
  .scene[data-state="returning"] .dog-button { left: 69%; }
  html.js .pilot-panel {
    position: relative;
    inset: auto;
    display: none;
    width: auto;
    max-width: none;
    opacity: 0;
    transform: none;
  }
  html.js .pilot-panel[data-revealed="true"] { display: block; opacity: 1; transform: none; }
  html.js .scene[data-state="approaching"] .hero-copy,
  html.js .scene[data-state="network"] .hero-copy,
  html.js .scene[data-state="returning"] .hero-copy { display: none; transform: none; }
  .pilot-panel { border: 0; border-radius: 0 0 19px 19px; box-shadow: none; }

  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boundary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* Task 071: one column for the role cards under 420px. The old three-up grid
     only fitted by shrinking the badge to about 6.9px and the description to
     about 9px, which is not readable text. */
  .role-cards { grid-template-columns: 1fr; gap: 8px; }
  .role-card { padding: 10px 12px; text-align: left; }
  .badge { font-size: 0.66rem; }
  .role-name { font-size: 0.92rem; }
  .role-desc { font-size: 0.82rem; }
  .step-list { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy,
  .pilot-panel,
  .dog-button,
  .scene-shade,
  .faq-item summary::after,
  .cta-primary,
  .skip-link { transition-duration: 0.01ms !important; }
}

@media (pointer: fine) {
  html,
  body {
    cursor: url("/assets/pati-cursor.png") 16 16, auto;
  }

  a,
  button,
  summary {
    cursor: url("/assets/pati-cursor.png") 16 16, pointer;
  }
}