/* ==========================================================================
   Pitit Plezans, brand tokens
   Colours extracted directly from print_transparent.svg (the official mark).
   Contrast ratios measured against the page background, not eyeballed.
   --------------------------------------------------------------------------
   RULE: only --pp-navy is safe for body text on a light background.
   Cyan, amber and vermilion are graphic accents. For text, use the -text
   variants below, which are darkened to clear WCAG AA (4.5:1).
   ========================================================================== */

:root {

  /* --- brand core, straight from the logo ------------------------------- */
  --pp-navy:            #2A3890;   /* wordmark, upper-right shard          */
  --pp-cyan:            #00AEEF;   /* upper-left shard                     */
  --pp-amber:           #F7931D;   /* tagline, right shard                 */
  --pp-vermilion:       #F15A29;   /* lower-left shard                     */

  /* --- text-safe accents, AA on --pp-bg --------------------------------- */
  --pp-amber-text:      #9B5C12;   /* 4.60:1 */
  --pp-vermilion-text:  #BB461F;   /* 4.52:1 */
  --pp-cyan-text:       #0074A0;   /* 4.52:1 */

  /* --- text-safe accents, AA on --pp-navy --------------------------------
     Measured against the navy inverted ground, not --pp-bg. The -text
     variants above are only safe on the light ground. */
  --pp-amber-on-navy:   #F79623;   /* 4.52:1 on --pp-navy */
  --pp-vermilion-deep:  #CC4C22;   /* white text on it, 4.54:1 */

  /* --- surfaces --------------------------------------------------------- */
  --pp-bg:              #F0EEE9;   /* Cloud Dancer, page background        */
  --pp-surface:         #FFFFFF;
  --pp-surface-sunk:    #E7E4DD;
  --pp-ink:             #1A1F3D;   /* body copy, navy-black                */
  --pp-ink-soft:        #4A5168;
  --pp-rule:            #D8D4CB;

  /* --- inverted sections (navy blocks) ---------------------------------- */
  --pp-on-navy:         #FFFFFF;   /* 10.16:1 on --pp-navy                 */
  --pp-on-navy-soft:    #C3C8E4;

  /* --- semantic --------------------------------------------------------- */
  --pp-link:            var(--pp-navy);
  --pp-link-hover:      var(--pp-cyan-text);
  --pp-focus:           var(--pp-cyan);
  --pp-accent-bar:      var(--pp-amber);

  /* --- type ------------------------------------------------------------- */
  /* The logo's lettering is outlined, so no font is recoverable from it.
     It is a heavy geometric grotesque. Archivo Black is the closest free
     match; Anton and Oswald are fallbacks if a narrower cut is wanted. */
  --pp-font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --pp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;

  --pp-track-display: 0.01em;
  --pp-track-tagline: 0.16em;      /* the tagline in the mark is widely set */

  /* --- spacing scale ---------------------------------------------------- */
  --pp-s1: 0.5rem;  --pp-s2: 1rem;   --pp-s3: 1.5rem;
  --pp-s4: 2.5rem;  --pp-s5: 4rem;   --pp-s6: 6rem;

  --pp-radius: 4px;
  --pp-maxw:   1180px;
}

/* --------------------------------------------------------------------------
   Usage notes for the build

   1. Never set body text in --pp-amber or --pp-cyan on --pp-bg. They measure
      1.98:1 and 2.18:1, which is unreadable. Use the -text variants.
   2. The four brand colours are the four shards of the mark. Using all four
      at full strength on one screen fights the photography, which is already
      warm and red-heavy. Suggested split: navy carries structure and text,
      amber is the single accent, cyan and vermilion appear only in the logo
      and in small graphic moments.
   3. Section rhythm that suits this palette: Cloud Dancer default, navy for
      one or two inverted bands, white for cards.
   4. The -text variants are only safe on --pp-bg. An accent on a --pp-navy
      ground needs the -on-navy variant instead, since the two grounds do
      not share a safe colour. Check both before adding a new accent use.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--pp-link);
  text-decoration: none;
}

a:hover {
  color: var(--pp-link-hover);
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--pp-font-display);
  letter-spacing: var(--pp-track-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--pp-navy);
}

.container {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding: 0 var(--pp-s3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--pp-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   The diamond rule, the one recurring signature device
   ========================================================================== */

.rule-diamond {
  position: relative;
  height: 1px;
  background: var(--pp-rule);
  margin-bottom: var(--pp-s3);
}

.rule-diamond::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 11px;
  height: 11px;
  background: var(--pp-amber);
  transform: rotate(45deg);
}

.rule-diamond--on-navy {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Lang bar
   ========================================================================== */

.lang-bar {
  background: var(--pp-navy);
  color: var(--pp-on-navy-soft);
}

.lang-bar__inner {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding: var(--pp-s1) var(--pp-s3);
  display: flex;
  justify-content: flex-end;
  gap: var(--pp-s1);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-bar button {
  background: none;
  border: none;
  color: var(--pp-on-navy-soft);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: var(--pp-s1);
}

.lang-bar button:hover {
  color: var(--pp-on-navy);
}

.lang-bar button.active {
  color: var(--pp-amber-on-navy);
}

.lang-bar span {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.site-header {
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding: var(--pp-s2) var(--pp-s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo img {
  height: 34px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--pp-s4);
}

.nav__links a {
  color: var(--pp-ink);
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.nav__links a:hover {
  color: var(--pp-navy);
}

.nav__links a.active {
  border-bottom-color: var(--pp-amber);
  color: var(--pp-navy);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--pp-s1);
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--pp-navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-rule);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu__inner {
  padding: var(--pp-s2) var(--pp-s3) var(--pp-s3);
  display: flex;
  flex-direction: column;
  gap: var(--pp-s2);
}

.mobile-menu a {
  color: var(--pp-ink);
  font-size: 1.05rem;
  padding: var(--pp-s1) 0;
}

.mobile-menu a.active {
  color: var(--pp-navy);
  font-weight: 600;
}

/* ==========================================================================
   Honeypot field, shared by every form
   ========================================================================== */

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: var(--pp-radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--pp-amber);
  color: var(--pp-ink);
}

.btn-primary:hover {
  background: var(--pp-vermilion-deep);
  color: var(--pp-on-navy);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--pp-navy);
}

.btn-outline:hover {
  background: var(--pp-navy);
  color: var(--pp-on-navy);
}

.btn-outline--on-navy {
  color: var(--pp-on-navy);
  border-color: var(--pp-on-navy-soft);
}

.btn-outline--on-navy:hover {
  background: var(--pp-on-navy);
  color: var(--pp-navy);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Section primitives
   ========================================================================== */

.section {
  padding: var(--pp-s6) 0;
}

.section--navy {
  background: var(--pp-navy);
  color: var(--pp-on-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--pp-on-navy);
}

.section--sunk {
  background: var(--pp-surface-sunk);
}

.section-eyebrow {
  display: block;
  font-size: 0.8rem;
  letter-spacing: var(--pp-track-tagline);
  text-transform: uppercase;
  color: var(--pp-amber-text);
  margin-bottom: var(--pp-s1);
}

.section--navy .section-eyebrow {
  color: var(--pp-amber-on-navy);
}

/* .hero sits on a navy ground but is not a .section--navy, so its eyebrow
   needs its own rule rather than inheriting the one above. */
.hero .section-eyebrow {
  color: var(--pp-amber-on-navy);
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 40ch;
}

.section-intro {
  max-width: 60ch;
  color: var(--pp-ink-soft);
  font-size: 1.05rem;
  margin-top: var(--pp-s2);
}

.section--navy .section-intro {
  color: var(--pp-on-navy-soft);
}

.section-header {
  margin-bottom: var(--pp-s4);
}

.closing-cta {
  text-align: center;
}

.closing-cta .section-title {
  max-width: none;
  margin: 0 auto;
}

.closing-cta p {
  max-width: 55ch;
  margin: var(--pp-s2) auto var(--pp-s3);
  color: var(--pp-ink-soft);
}

.teaser-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--pp-amber-text);
  margin-top: var(--pp-s3);
}

.teaser-link::after {
  content: "\2192";
}

.teaser-link--on-navy {
  color: var(--pp-amber-on-navy);
}

/* ==========================================================================
   Card
   ========================================================================== */

.card {
  background: var(--pp-surface);
  border-radius: var(--pp-radius);
  padding: var(--pp-s3);
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--pp-s1);
}

.card p {
  color: var(--pp-ink-soft);
  font-size: 0.95rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pp-s3);
  align-items: start;
}

.pill {
  display: inline-block;
  background: rgba(247, 147, 29, 0.15);
  color: var(--pp-amber-text);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  margin-bottom: var(--pp-s2);
}

/* ==========================================================================
   Photo placeholder pattern
   ========================================================================== */

.photo-frame {
  position: relative;
  background: var(--pp-surface-sunk);
  overflow: hidden;
  border-radius: var(--pp-radius);
}

.photo-frame__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--pp-s2);
  color: var(--pp-ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--pp-navy);
  color: var(--pp-on-navy-soft);
  padding: var(--pp-s5) 0 var(--pp-s3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: var(--pp-s4);
  padding-bottom: var(--pp-s4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: var(--pp-s2);
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-family: var(--pp-font-display);
  letter-spacing: var(--pp-track-tagline);
  color: var(--pp-amber-on-navy);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.footer-col h4 {
  font-family: var(--pp-font-body);
  font-weight: 600;
  color: var(--pp-on-navy);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--pp-s2);
}

.footer-col a,
.footer-col p {
  display: block;
  color: var(--pp-on-navy-soft);
  font-size: 0.9rem;
  margin-bottom: var(--pp-s1);
}

.footer-col a:hover {
  color: var(--pp-on-navy);
}

.footer-bottom {
  padding-top: var(--pp-s3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pp-s1);
  font-size: 0.8rem;
  color: var(--pp-on-navy-soft);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Mobile, one breakpoint
   ========================================================================== */

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section {
    padding: var(--pp-s5) 0;
  }
}