/* ==========================================================================
   Jamesha Travel Agency — site styles

   Self-contained by design: does not import the other stylesheets in this
   directory, so it cannot be broken by changes to them.

   Some rules below suppress default affordances (cursors, outlines, select
   behaviour) on purpose. They are not omissions; leave them alone.
   ========================================================================== */

:root {
  --pc-paper:      #f4f7f2;
  --pc-paper-2:    #f4ede1;
  --pc-card:       #ffffff;
  --pc-ink:        #23303a;
  --pc-ink-soft:   #55636e;
  --pc-ink-faint:  #5f6c76;   /* 4.5:1 on paper, alt and card - do not lighten */
  --pc-rule:       #e2d9ca;

  --pc-sea:        #2f6b4f;   /* headline blue */
  --pc-sea-deep:   #1e4a36;
  --pc-sun:        #e08a3c;   /* warm accent */
  --pc-sun-soft:   #f2c185;
  --pc-leaf:       #4b7f5e;

  --pc-sans: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --pc-body: ui-serif, Georgia, "Times New Roman", serif;

  --pc-shadow: 0 2px 4px rgba(35, 48, 58, .05), 0 8px 24px rgba(35, 48, 58, .07);
  --pc-radius: 10px;
  --pc-max: 1120px;
}

/* --------------------------------------------------------------- base --- */

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

html { -webkit-text-size-adjust: 100%; }

body.pc {
  margin: 0;
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-family: var(--pc-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Base defaults are wrapped in :where() so they carry ZERO specificity.
   Written plainly as `body.pc a` they score (0,1,2) and silently beat every
   single-class component rule — .pc-btn-primary, .pc-svc, .pc-footer a and
   the rest all lost their own colour to this and rendered blue-on-blue.
   Keep the :where(). It is what makes these overridable defaults instead of
   near-unbeatable rules. */
:where(body.pc img) { max-width: 100%; height: auto; display: block; }

:where(body.pc a) { color: var(--pc-sea); }
:where(body.pc a:hover) { color: var(--pc-sea-deep); }

.pc-wrap {
  width: 100%;
  max-width: var(--pc-max);
  margin: 0 auto;
  padding: 0 20px;
}

.pc-skip {
  position: absolute; left: -9999px;
  background: var(--pc-sea); color: #fff;
  padding: 10px 16px; z-index: 200; text-decoration: none;
}
.pc-skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--pc-sun);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- header --- */

.pc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pc-rule);
}
.pc-header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px;
}

/* Same mobile long-press pattern as jamesha terminal.html .logo (setupShieldLongPress):
   touch-action:none + touch-callout/user-drag none. Do NOT set pointer-events:none on the
   img — the working fix listens for touchstart on the image and preventDefaults it. */
.pc-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  margin-right: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: none;
}
.pc-brand img {
  width: 38px;
  height: 38px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.pc-brand.brand-holding img {
  filter: drop-shadow(0 0 10px rgba(47, 107, 79, 0.55));
}
.pc-brand-name {
  font-family: var(--pc-sans);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--pc-sea-deep);
}
.pc-brand-sub {
  font-family: var(--pc-sans);
  font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pc-ink-faint);
}

.pc-nav { display: flex; gap: 4px; align-items: center; }
.pc-nav a {
  font-family: var(--pc-sans);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--pc-ink-soft);
  padding: 10px 12px; border-radius: 6px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.pc-nav a:hover { background: var(--pc-paper-2); color: var(--pc-sea-deep); }
.pc-nav a.pc-cta {
  background: var(--pc-sun); color: #3a2408; font-weight: 600;
}
.pc-nav a.pc-cta:hover { background: #d17f33; color: #2a1a05; }

/* Phones previously lost every nav link except BOOK, which left a visitor
   with no way to reach Pet Travel or Contact except guessing how far to
   scroll. The links stay; the row becomes a horizontal scroller and BOOK is
   pinned to the right so it never scrolls out of reach. */
@media (max-width: 720px) {
  .pc-header-inner { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 6px; }
  .pc-brand-sub { display: none; }
  .pc-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-left: max(0px, env(safe-area-inset-left));
  }
  .pc-nav::-webkit-scrollbar { display: none; }
  .pc-nav a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 10px 10px;
    white-space: nowrap;
  }
  .pc-nav a.pc-cta { position: sticky; right: 0; }
}

@media (max-width: 400px) {
  .pc-wrap { padding: 0 14px; }
  .pc-nav a { font-size: 13px; letter-spacing: .06em; padding: 10px 8px; }
}

/* --------------------------------------------------------------- hero --- */

.pc-hero {
  position: relative;
  padding: 68px 0 60px;
  background:
    radial-gradient(1000px 400px at 72% -8%, rgba(242,193,133,.42), transparent 62%),
    linear-gradient(180deg, var(--pc-paper) 0%, var(--pc-paper-2) 100%);
  border-bottom: 1px solid var(--pc-rule);
  overflow: hidden;
}
.pc-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 44px; align-items: center;
}
.pc-kicker {
  font-family: var(--pc-sans);
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pc-sun); font-weight: 600; margin: 0 0 14px;
}
.pc-hero h1 {
  font-family: var(--pc-sans);
  font-weight: 700; font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02; letter-spacing: .01em;
  margin: 0 0 18px; color: var(--pc-sea-deep);
  text-transform: uppercase;
}

/* Verb spans are addressed by script. Keep them. */
.pc-motto {
  font-family: var(--pc-sans);
  font-size: clamp(19px, 2.4vw, 25px);
  letter-spacing: .05em;
  color: var(--pc-ink-soft);
  margin: 0 0 22px;
}
.pc-motto .pc-verb { color: var(--pc-sea); font-weight: 600; }

.pc-hero p.pc-lede { margin: 0 0 26px; max-width: 46ch; color: var(--pc-ink-soft); }

.pc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--pc-sans); font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
}
.pc-btn-primary { background: var(--pc-sea); color: #fff; }
.pc-btn-primary:hover { background: var(--pc-sea-deep); color: #fff; }
.pc-btn-ghost {
  background: transparent; color: var(--pc-sea-deep);
  border-color: var(--pc-sea);
}
.pc-btn-ghost:hover { background: rgba(31,111,139,.08); }
.pc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero stamp — a luggage tag, not a classification stamp. */
.pc-stamp {
  justify-self: center;
  width: min(300px, 100%);
  background: var(--pc-card);
  border: 1px solid var(--pc-rule);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: 22px;
  transform: rotate(-2deg);
}
.pc-stamp h2 {
  font-family: var(--pc-sans); font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pc-ink-faint);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--pc-rule);
}
.pc-stamp dl { margin: 0; font-size: 15px; }
.pc-stamp dt {
  font-family: var(--pc-sans); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pc-ink-faint); margin-top: 10px;
}
.pc-stamp dd { margin: 0; color: var(--pc-ink); }

.pc-hero-media {
  margin: 0;
  position: relative;
  border-radius: var(--pc-radius);
  overflow: hidden;
  box-shadow: var(--pc-shadow);
  border: 1px solid var(--pc-rule);
  background: #1a2820;
  aspect-ratio: 16 / 10;
}
.pc-hero-media video,
.pc-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pc-hero-media picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pc-hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--pc-sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f4f7f2;
  background: linear-gradient(180deg, transparent, rgba(12, 24, 20, .72));
}

@media (max-width: 860px) {
  .pc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .pc-hero { padding: 44px 0 40px; }
}

/* ----------------------------------------------------------- sections --- */

.pc-section { padding: 66px 0; }
.pc-section + .pc-section { border-top: 1px solid var(--pc-rule); }
.pc-section-alt { background: var(--pc-paper-2); }

.pc-section-head { max-width: 58ch; margin: 0 0 34px; }
.pc-section-head h2 {
  font-family: var(--pc-sans); font-weight: 700;
  font-size: clamp(27px, 3.6vw, 38px); text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.1;
  margin: 0 0 10px; color: var(--pc-sea-deep);
}
.pc-section-head p { margin: 0; color: var(--pc-ink-soft); }

/* ------------------------------------------------------- destinations --- */

.pc-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 22px;
}

.pc-svc {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 340px;
  border-radius: var(--pc-radius);
  overflow: hidden;
  border: 1px solid var(--pc-rule);
  box-shadow: var(--pc-shadow);
  text-decoration: none;
  color: #fff;
  background: var(--pc-sea-deep);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-svc:hover, .pc-svc:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(35,48,58,.18);
  color: #fff;
}

/* Poster art is drawn, not photographed — consistent across all four, and
   no asset hunt for the destinations we have no scenery for. */
.pc-svc-art { position: absolute; inset: 0; }
.pc-svc-art svg,
.pc-svc-art picture,
.pc-svc-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pc-svc-body {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(12,24,32,.82) 42%);
}
.pc-svc-name {
  font-family: var(--pc-sans); font-weight: 700;
  font-size: 25px; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.05; margin: 0 0 4px;
}
.pc-svc-tag {
  font-family: var(--pc-sans); font-size: 13.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: 0 0 10px;
}
.pc-svc-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--pc-sans); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 9px;
}
.pc-svc-price { color: var(--pc-sun-soft); font-weight: 600; }

/* ---------------------------------------------------------- pet travel --- */

.pc-paws {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
@media (max-width: 860px) { .pc-paws { grid-template-columns: 1fr; gap: 26px; } }

.pc-paws-list { margin: 18px 0 0; padding: 0; list-style: none; }
.pc-paws-list li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--pc-ink-soft);
}
.pc-paws-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pc-leaf);
}

.pc-staff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc-staff figure {
  margin: 0; background: var(--pc-card);
  border: 1px solid var(--pc-rule); border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow); overflow: hidden;
}
.pc-staff picture { display: block; }
.pc-staff img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pc-staff figcaption { padding: 11px 13px 13px; }
.pc-staff-name {
  font-family: var(--pc-sans); font-weight: 600; font-size: 17px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--pc-sea-deep);
}
.pc-staff-role {
  font-family: var(--pc-sans); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pc-ink-faint);
}

/* ------------------------------------------------------------ gallery --- */

.pc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
}
.pc-gallery figure {
  margin: 0; background: var(--pc-card); padding: 9px 9px 0;
  border: 1px solid var(--pc-rule); border-radius: 6px;
  box-shadow: var(--pc-shadow);
}
.pc-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--pc-paper-2);
}
.pc-gallery figcaption {
  font-family: var(--pc-sans); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pc-ink-faint);
  padding: 9px 2px 10px; text-align: center;
}

/* ------------------------------------------------------- testimonials --- */

.pc-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}
.pc-quote {
  background: var(--pc-card); border: 1px solid var(--pc-rule);
  border-left: 4px solid var(--pc-sun);
  border-radius: var(--pc-radius); padding: 22px 22px 18px;
  box-shadow: var(--pc-shadow); margin: 0;
}
.pc-quote p { margin: 0 0 14px; font-style: italic; color: var(--pc-ink); }
.pc-quote figcaption {
  font-family: var(--pc-sans); font-size: 13.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pc-ink-faint);
}

/* Plain emphasis only: no cursor change, no hover state. */
.pc-sig-mark { font-weight: 600; color: var(--pc-ink-soft); }

/* ---------------------------------------------------------- booking ----- */

.pc-book {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: start;
}
@media (max-width: 860px) { .pc-book { grid-template-columns: 1fr; gap: 28px; } }

.pc-form {
  background: var(--pc-card); border: 1px solid var(--pc-rule);
  border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  padding: 26px;
}
.pc-field { margin-bottom: 17px; }
.pc-field label {
  display: block; margin-bottom: 6px;
  font-family: var(--pc-sans); font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pc-ink-soft);
}
.pc-field input, .pc-field select, .pc-field textarea {
  width: 100%; min-height: 46px;
  padding: 11px 13px;
  font-family: var(--pc-body); font-size: 16px; /* 16px: iOS won't zoom */
  color: var(--pc-ink);
  background: var(--pc-paper);
  border: 1px solid var(--pc-rule); border-radius: 7px;
}
.pc-field textarea { min-height: 96px; resize: vertical; }
.pc-field input:focus, .pc-field select:focus, .pc-field textarea:focus {
  border-color: var(--pc-sea); background: #fff;
}
.pc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-form .pc-btn { width: 100%; margin-top: 6px; }
.pc-form-note {
  margin: 14px 0 0; font-size: 13.5px; color: var(--pc-ink-faint);
  text-align: center;
}

.pc-confirm {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(75,127,94,.1);
  border: 1px solid rgba(75,127,94,.4);
  border-radius: 7px; color: #2f5c45; font-size: 15px;
}
.pc-confirm[hidden] { display: none; }

/* ------------------------------------------------------------ contact --- */

.pc-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.pc-contact-block h3 {
  font-family: var(--pc-sans); font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pc-ink-faint);
  margin: 0 0 8px;
}
.pc-contact-block p { margin: 0; color: var(--pc-ink-soft); }

/* Contact phone — normal typesetting. Tap opens the payphone keypad. */
.pc-phone {
  font-family: var(--pc-sans);
  font-size: 21px; letter-spacing: .04em;
  color: var(--pc-ink); white-space: nowrap;
  margin: 0;
}
.pc-phone-open {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; padding: 4px 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pc-ink) 28%, transparent);
  text-underline-offset: 3px;
}
.pc-phone-open:hover,
.pc-phone-open:focus-visible {
  text-decoration-color: var(--pc-ink);
}
.pc-phone-open:focus { outline: none; }
.pc-phone-open:focus-visible {
  outline: 2px solid var(--pc-rule); outline-offset: 3px;
}

/* ----------------------------------------------------------- payphone --- */
.payphone[hidden] { display: none !important; }
.payphone {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.payphone-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 28, 24, .55);
  backdrop-filter: blur(2px);
}
.payphone-panel {
  position: relative; z-index: 1;
  width: min(320px, 100%);
  background: linear-gradient(180deg, #2a3a32 0%, #1a2420 100%);
  color: #e8f4ee;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 22px 18px 18px;
  font-family: var(--pc-sans);
}
.payphone-x {
  position: absolute; top: 8px; right: 10px;
  appearance: none; background: none; border: 0;
  color: rgba(255,255,255,.55); font-size: 28px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.payphone-x:hover { color: #fff; }
.payphone-title {
  margin: 0 0 12px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  text-align: center;
}
.payphone-lcd {
  background: #0c1410;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  min-height: 48px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 22px; letter-spacing: .12em;
  color: #9dffb0;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.payphone-lcd.is-fail { color: #ff8f8f; letter-spacing: .08em; font-size: 18px; }
.payphone-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.payphone-key {
  appearance: none; -webkit-appearance: none;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #3a4a42, #2b3630);
  color: #f4faf7;
  font: inherit; font-size: 22px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.payphone-key:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.payphone-actions {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
}
.payphone-clr,
.payphone-call {
  appearance: none; -webkit-appearance: none;
  min-height: 48px; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .12em; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.payphone-clr {
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.75);
}
.payphone-call {
  border: 0;
  background: linear-gradient(180deg, #4ad48a, #2a9f5c);
  color: #0a1a10;
  box-shadow: 0 2px 0 #1d6b3e;
}
.payphone-call:active { transform: translateY(1px); }
html.payphone-open { overflow: hidden; }

/* ------------------------------------------------------------- footer --- */

.pc-footer {
  background: var(--pc-sea-deep); color: rgba(255,255,255,.8);
  padding: 44px 0 34px; font-size: 15px;
}
.pc-footer a { color: #cfe6ef; }
.pc-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px; margin-bottom: 28px;
}
@media (max-width: 720px) { .pc-footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.pc-footer h4 {
  font-family: var(--pc-sans); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  margin: 0 0 10px;
}
.pc-footer ul { list-style: none; margin: 0; padding: 0; }
.pc-footer li { margin-bottom: 7px; }
.pc-footer-brand {
  font-family: var(--pc-sans); font-weight: 700; font-size: 20px;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  margin: 0 0 8px;
}
.pc-footer-legal {
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 18px; font-size: 13px; color: rgba(255,255,255,.75);
}

/* ----------------------------------------------------------- handover --- */
/* Colours here are the terminal's, not this sheet's: the whole point is
   that one palette bleeds through the other. */

.pc-reveal {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: rgba(4, 7, 13, 0);
  transition: background 1.5s ease-in;
  display: flex; align-items: center; justify-content: center;
}
.pc-reveal.is-sweeping { background: rgba(4, 7, 13, .55); }
.pc-reveal.is-typing   { background: rgba(4, 7, 13, .97); }
.pc-reveal.is-plain    { background: rgba(4, 7, 13, .97); }

/* A single bright line crossing the page once. */
.pc-reveal-scan {
  position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: linear-gradient(90deg, transparent, #7fe9ff 12%, #d8fbff 50%, #7fe9ff 88%, transparent);
  box-shadow: 0 0 22px 5px rgba(127, 233, 255, .55);
  opacity: 0;
}
.pc-reveal.is-sweeping .pc-reveal-scan {
  animation: pc-scan 1.15s cubic-bezier(.4, 0, .5, 1) forwards;
}
@keyframes pc-scan {
  0%   { opacity: 0;  top: -3px; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0;  top: 100%; }
}

.pc-reveal-text {
  position: relative;
  text-align: center;
  font-family: "Share Tech Mono", var(--pc-sans), monospace;
  color: #8ef0ff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  padding: 0 24px;
}
.pc-reveal.is-typing .pc-reveal-text,
.pc-reveal.is-plain  .pc-reveal-text { opacity: 1; transform: none; }

.pc-reveal-l1 {
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  color: #4fbfd6; margin-bottom: 12px;
}
.pc-reveal-l2 {
  font-size: clamp(17px, 3.4vw, 27px);
  letter-spacing: .12em; line-height: 1.35;
  text-shadow: 0 0 18px rgba(127, 233, 255, .45);
}
.pc-reveal.is-typing .pc-reveal-l2 { animation: pc-flicker 2.1s steps(1) 1; }
@keyframes pc-flicker {
  0%, 6%, 11%, 100% { opacity: 1; }
  8%, 9%            { opacity: .32; }
}

/* The page itself drains of colour underneath. */
body.pc-revealing > :not(.pc-reveal) {
  filter: grayscale(.85) brightness(.5) contrast(1.15);
  transition: filter 1.1s ease-in;
}
body.pc-revealing { overflow: hidden; }

/* THE TURN. The verb stays exactly where it is; only its content changes,
   under cover of a short blur. Anything that moved the surrounding words
   would break the effect - the sentence must look untouched. */
.pc-motto .pc-verb {
  display: inline-block;
  transition: color .35s ease-out, text-shadow .35s ease-out;
}
.pc-motto .pc-verb.is-turning {
  color: #8ef0ff;
  text-shadow: 0 0 14px rgba(127, 233, 255, .8);
  animation: pc-verb-turn .34s ease-in-out 1;
}
@keyframes pc-verb-turn {
  0%   { filter: blur(0);     opacity: 1;   }
  45%  { filter: blur(4px);   opacity: .25; }
  55%  { filter: blur(4px);   opacity: .25; }
  100% { filter: blur(0);     opacity: 1;   }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}