/* ==========================================================================
   Phonickids — design tokens and layout
   Values taken from the Claude Design bundle (phonickids-com-redesign).
   Desktop matches the design exactly; breakpoints below 1100px are authored
   here because the source prototypes carried no responsive rules.
   ========================================================================== */

:root {
  --green:        #A6CE39;
  --green-pale:   #EAF3D0;
  --green-deep:   oklch(0.34 0.15 124);
  --green-dark:   oklch(0.2 0.03 124);   /* Schools footprint panel */
  --green-tint:   oklch(0.3 0.03 124);   /* text on pale green       */
  --black:        #000000;
  --white:        #ffffff;
  --cream:        oklch(0.97 0.012 60);
  --card:         oklch(0.99 0.005 60);
  --ink:          oklch(0.24 0.02 50);
  --ink-strong:   oklch(0.22 0.02 50);
  --body:         oklch(0.32 0.02 50);
  --muted:        oklch(0.4 0.02 50);
  --muted-2:      oklch(0.42 0.02 50);
  --muted-3:      oklch(0.45 0.02 50);
  --muted-4:      oklch(0.5 0.02 50);
  --line:         oklch(0.88 0.015 60);
  --line-dark:    oklch(0.4 0.03 124);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter:  56px;
  --section: 130px;
  --maxw:    1280px;
}

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

/* Filtered-out cards use the hidden attribute; display:flex/grid would win
   over the UA default, so force it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-deep); }

img { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; text-wrap: pretty; }

.pk-wrap { max-width: var(--maxw); margin: 0 auto; }

.pk-section { padding: var(--section) var(--gutter); }

.pk-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); margin-bottom: 18px;
}

.pk-label {
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green); margin: 0 0 24px;
}

.pk-btn {
  display: inline-block; border-radius: 100px; font-weight: 600;
  padding: 15px 30px; font-size: 15px; border: 0; cursor: pointer;
  font-family: var(--sans); transition: transform 0.15s ease, opacity 0.15s ease;
}
.pk-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.pk-btn--green { background: var(--green); color: var(--ink-strong); }
.pk-btn--green:hover { color: var(--ink-strong); }
.pk-btn--dark { background: var(--ink-strong); color: var(--white); }
.pk-btn--dark:hover { color: var(--white); }

.pk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--ink); padding: 12px 20px;
}
.pk-skip:focus { left: 12px; top: 12px; }

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

.pk-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  background: var(--white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pk-nav__logo img { height: 56px; display: block; }
.pk-nav__links { display: flex; align-items: center; gap: 36px; }
.pk-nav__links a {
  color: var(--ink-strong); font-size: 15px; font-weight: 500;
}
.pk-nav__links a:hover { color: var(--green-deep); }
.pk-nav__links a.is-active { color: var(--green); font-weight: 600; }
.pk-nav__links a.pk-nav__cta {
  padding: 10px 22px; background: var(--ink-strong); color: var(--white);
  border-radius: 100px; font-size: 14px; font-weight: 600;
}
.pk-nav__links a.pk-nav__cta:hover { color: var(--white); opacity: 0.9; }

.pk-nav__toggle {
  display: none; width: 44px; height: 44px; border: 0; padding: 0;
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.pk-nav__toggle span {
  display: block; position: relative; width: 24px; height: 2px;
  background: var(--ink-strong); transition: background 0.2s ease;
}
.pk-nav__toggle span::before, .pk-nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px;
  background: var(--ink-strong); transition: transform 0.2s ease;
}
.pk-nav__toggle span::before { top: -7px; }
.pk-nav__toggle span::after  { top: 7px; }
.pk-nav__toggle[aria-expanded="true"] span { background: transparent; }
.pk-nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.pk-nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

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

.pk-hero {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
}
.pk-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.pk-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-hero__bg::after,
.pk-hero__bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pk-hero__bg::before {
  background: linear-gradient(90deg, oklch(0.1 0 0 / 0.75) 0%, oklch(0.1 0 0 / 0.4) 45%, oklch(0.1 0 0 / 0.1) 100%);
}
.pk-hero__bg::after {
  background: linear-gradient(0deg, oklch(0.08 0 0 / 0.5) 0%, transparent 40%);
}
.pk-hero__inner {
  position: relative; padding: 0 var(--gutter) 80px; max-width: 800px;
  color: oklch(0.99 0.005 60);
}
.pk-hero__eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); margin-bottom: 22px;
}
.pk-hero h1 { font-size: 64px; line-height: 1.06; margin: 0 0 26px; }
.pk-hero__lead { font-size: 19px; line-height: 1.5; margin: 0 0 28px; max-width: 620px; color: var(--white); }
.pk-hero__intro { font-size: 16px; line-height: 1.6; margin: 0 0 36px; max-width: 640px; color: var(--white); }
.pk-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.pk-hero__note { font-size: 14px; color: oklch(0.85 0.02 124); font-weight: 500; }

/* ----------------------------------------------------------------- about -- */

.pk-about { background: var(--white); }
/* The design's 0.19fr left column resolves to ~115px at 1280, which wraps the
   pull quote to eight lines. A fixed 268px keeps it to the four lines the
   design shows while leaving the bio column its width. */
.pk-about__grid {
  display: grid; grid-template-columns: 330px 1fr; gap: 72px;
  padding: var(--section) var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.pk-about__media img {
  width: 100%; height: 230px; object-fit: cover; display: block; border-radius: 2px;
}
/* blockquote carries a UA margin of 1em 40px — the 80px of side margin was
   squeezing the quote into twice as many lines as the design shows. */
.pk-about__quote {
  border-left: 3px solid var(--green); padding-left: 24px; margin: 28px 0 0;
}
.pk-about__quote p {
  font-family: var(--serif); font-size: 22px; font-style: italic;
  margin: 0 0 6px; color: var(--ink); line-height: 1.4;
}
.pk-about__body { align-self: center; }
.pk-about__body h2 { font-size: 42px; margin: 0 0 8px; line-height: 1.15; }
.pk-about__role { font-size: 16px; color: var(--muted); margin: 0 0 28px; font-weight: 500; }
.pk-about__body p:not(.pk-about__role) { font-size: 17px; margin: 0 0 20px; color: var(--body); }

/* ------------------------------------------------------------------- why -- */

.pk-why { background: var(--green); padding: 120px var(--gutter); }
.pk-why h2 { font-size: 40px; margin: 0 0 64px; max-width: 640px; line-height: 1.2; color: var(--ink-strong); }
.pk-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* Exactly five cards: 3 on top, 2 wider below, so nothing is left stretched
   across the second row on its own. Six columns make both splits exact. */
.pk-why__grid--five { grid-template-columns: repeat(6, 1fr); }
.pk-why__grid--five > .pk-why__card { grid-column: span 2; }
.pk-why__grid--five > .pk-why__card:nth-child(4),
.pk-why__grid--five > .pk-why__card:nth-child(5) { grid-column: span 3; }
.pk-why__card { background: var(--card); border-radius: 16px; padding: 40px 36px; }
.pk-why__num { font-family: var(--serif); font-size: 50px; font-weight: 600; color: var(--black); margin-bottom: 20px; line-height: 1; }
.pk-why__card h3 { font-family: var(--sans); font-size: 24px; margin: 0 0 12px; line-height: 1.35; color: var(--black); }
.pk-why__card p { font-size: 15px; color: var(--muted-2); margin: 0; line-height: 1.55; }

/* ------------------------------------------------------------- workshops -- */

.pk-workshops { background: var(--green-pale); }
.pk-workshops__inner { padding: var(--section) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.pk-workshops__head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; margin-bottom: 96px; }
.pk-workshops__head h2 { font-size: 38px; margin: 0; line-height: 1.2; }
.pk-workshops__head p { font-size: 17px; margin: 0; color: var(--body); align-self: center; }
.pk-workshops__items {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 32px; margin-bottom: 110px;
}
.pk-chip {
  display: flex; align-items: baseline; gap: 12px; font-size: 16px;
  padding: 18px 20px; background: var(--black); border-radius: 12px; color: var(--white);
}
.pk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

.pk-formats { background: var(--white); }
.pk-formats__inner { padding: var(--section) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.pk-formats h3 { font-size: 30px; margin: 0 0 40px; }
.pk-formats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.pk-format { padding: 36px 32px; background: var(--green); border-radius: 16px; }
.pk-format h4 { font-family: var(--sans); font-size: 19px; margin: 0 0 14px; line-height: 1.35; }
.pk-format p { font-size: 15px; margin: 0; color: oklch(0.35 0.02 50); line-height: 1.55; }

/* -------------------------------------------------------------- advisory -- */

.pk-advisory { background: var(--black); padding: var(--section) var(--gutter); }
.pk-advisory__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px;
}
.pk-advisory h2 { font-size: 36px; margin: 0 0 24px; line-height: 1.25; color: var(--white); }
.pk-advisory__lead { font-size: 17px; color: var(--white); margin: 0 0 20px; }
.pk-advisory__sub  { font-size: 16px; color: var(--white); margin: 0; }
.pk-advisory__label {
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--white); margin: 0 0 24px;
}
.pk-advisory__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.pk-advisory__item {
  display: flex; align-items: baseline; gap: 12px; font-size: 16px;
  padding: 12px 0; border-bottom: 1px solid oklch(0.99 0.005 60 / 0.35); color: var(--white);
}
.pk-advisory__item .pk-dot { background: var(--white); }

/* ----------------------------------------------------------- recognition -- */

.pk-recognition { background: var(--green-pale); }
.pk-recognition__inner { padding: var(--section) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.pk-recognition h2 { font-size: 36px; margin: 0 0 56px; }
.pk-recognition__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 48px; }
.pk-recognition__item {
  display: flex; align-items: flex-start; gap: 14px; font-size: 17px;
  padding: 18px 0; border-bottom: 1px solid var(--line); color: oklch(0.28 0.02 50);
}
.pk-recognition__num { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--green); flex-shrink: 0; }

/* ------------------------------------------------------------------- cta -- */

.pk-cta { background: var(--green); color: var(--ink-strong); padding: 140px var(--gutter); text-align: center; }
.pk-cta__inner { max-width: 760px; margin: 0 auto; }
.pk-cta .pk-eyebrow { font-size: 13px; color: var(--green-tint); margin-bottom: 22px; }
.pk-cta h2 { font-size: 44px; margin: 0 0 28px; line-height: 1.2; }
.pk-cta__body { font-size: 18px; margin: 0 0 40px; color: oklch(0.3 0.02 50); line-height: 1.6; }
.pk-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.pk-cta__tagline { font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--green-tint); margin: 0; }

/* ----------------------------------------------------------------- form -- */

.pk-form { max-width: 760px; margin: 48px auto 0; text-align: left; }
.pk-form .ff-el-group { margin-bottom: 18px; }
.pk-form input[type="text"], .pk-form input[type="email"], .pk-form input[type="tel"],
.pk-form textarea, .pk-form select {
  width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line);
  font-family: var(--sans); font-size: 15px; background: var(--white); color: var(--ink);
}
.pk-form textarea { min-height: 130px; resize: vertical; }
.pk-form label, .pk-form .ff-el-input--label label {
  font-size: 14px; font-weight: 600; color: var(--ink-strong); margin-bottom: 6px; display: block;
}
.pk-form .ff-btn-submit, .pk-form button[type="submit"] {
  background: var(--ink-strong) !important; color: var(--white) !important;
  border-radius: 100px !important; padding: 16px 34px !important; border: 0 !important;
  font-size: 15px !important; font-weight: 600 !important; font-family: var(--sans) !important;
  cursor: pointer;
}

/* ----------------------------------------------------- generic page body -- */

.pk-prose { max-width: 760px; font-size: 17px; color: var(--body); }
.pk-prose h2 { font-size: 30px; margin: 48px 0 16px; color: var(--ink); }
.pk-prose h3 { font-size: 22px; margin: 32px 0 12px; color: var(--ink); }
.pk-prose ul, .pk-prose ol { padding-left: 22px; }
.pk-prose li { margin-bottom: 8px; }
.pk-prose img { border-radius: 12px; height: auto; }

/* ---------------------------------------------- consultation popup (modal) */

.pk-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pk-modal[hidden] { display: none !important; }

.pk-modal__backdrop {
  position: absolute; inset: 0; background: oklch(0.14 0.01 50 / 0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: pk-fade 0.2s ease both;
}

.pk-modal__panel {
  position: relative; width: 100%; max-width: 680px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--white); border-radius: 24px;
  box-shadow: 0 30px 70px oklch(0.15 0.02 50 / 0.35);
  animation: pk-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

.pk-modal__close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; z-index: 2;
  border: 0; border-radius: 50%; background: oklch(0.94 0.014 60); color: var(--ink-strong);
  font-size: 22px; line-height: 1; cursor: pointer; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.pk-modal__close:hover { background: var(--green); }

/* Green banner head, so the popup reads as part of the brand rather than a
   generic plugin form. */
.pk-modal__head {
  background: var(--green); padding: 24px 32px 22px; border-radius: 24px 24px 0 0;
}
.pk-modal__head .pk-eyebrow { color: var(--green-tint); margin-bottom: 6px; font-size: 12px; }
.pk-modal__head h2 { font-size: 26px; margin: 0 0 6px; line-height: 1.2; color: var(--ink-strong); }
.pk-modal__head p { font-size: 14px; margin: 0; color: oklch(0.3 0.02 50); line-height: 1.5; }

.pk-modal__body { padding: 24px 32px 4px; margin: 0; max-width: none; }

/* Two fields per row.
   Fluent Forms nests every field inside a <fieldset>, so the grid has to live
   on the fieldset — putting it on <form> leaves a single grid item. Each
   field's container_class (pk-half / pk-full) decides its width. */
.pk-modal__body .frm-fluent-form { display: block; }
.pk-modal__body .frm-fluent-form fieldset {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start;
  border: 0; margin: 0; padding: 0; min-inline-size: 0;
}
/* The screen-reader legend is a grid item too; keep it off the field rows. */
.pk-modal__body .frm-fluent-form legend { grid-column: 1 / -1; }
.pk-modal__body .ff-el-group { margin-bottom: 14px; grid-column: 1 / -1; min-width: 0; }
.pk-modal__body .ff-el-group.pk-half { grid-column: span 1; }
.pk-modal__body .ff-el-group.pk-full { grid-column: 1 / -1; }
/* Submit row, error summary and anything Fluent Forms injects: full width. */
.pk-modal__body .ff-el-group.ff-text-left,
.pk-modal__body .ff_submit_btn_wrapper,
.pk-modal__body .ff-el-is-error,
.pk-modal__body .ff-message-success,
.pk-modal__body .error-text { grid-column: 1 / -1; }

.pk-modal__body .ff-el-input--label label { font-size: 13px; margin-bottom: 5px; }
.pk-modal__body input[type="text"],
.pk-modal__body input[type="email"],
.pk-modal__body input[type="tel"],
.pk-modal__body textarea {
  padding: 11px 14px; border-radius: 10px; font-size: 15px;
}
.pk-modal__body textarea { min-height: 84px; }
.pk-modal__body .ff-el-form-check-label { font-size: 14px; }

.pk-modal__foot {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center;
  padding: 14px 32px 22px; border-top: 1px solid var(--line); margin-top: 14px;
  font-size: 13px;
}
.pk-modal__foot a { color: var(--muted); font-weight: 500; }
.pk-modal__foot a:hover { color: var(--green-deep); }

/* Scroll lock. `overflow:hidden` alone strands the viewport below the clipped
   content when the page is already scrolled (e.g. arriving on /#contact), so
   the body is pinned instead and its offset restored on close. */
body.pk-modal-open {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}

/* Tablet and down: one column, and the panel becomes a bottom sheet on phones
   so the keyboard never pushes the form off-screen. */
@media (max-width: 640px) {
  .pk-modal { padding: 0; align-items: flex-end; }
  .pk-modal__panel { max-width: none; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .pk-modal__head { border-radius: 20px 20px 0 0; padding: 22px 20px 18px; }
  .pk-modal__head h2 { font-size: 22px; }
  .pk-modal__head p { font-size: 13px; }
  .pk-modal__close { top: 12px; right: 12px; width: 34px; height: 34px; }
  .pk-modal__body { padding: 20px 20px 4px; }
  .pk-modal__body .frm-fluent-form fieldset { grid-template-columns: 1fr; gap: 0; }
  .pk-modal__body .ff-el-group.pk-half { grid-column: 1 / -1; }
  .pk-modal__foot { padding: 12px 20px 20px; gap: 4px 16px; }
}

/* Short screens (landscape phones): let the panel scroll rather than clip. */
@media (max-height: 620px) {
  .pk-modal { align-items: flex-start; padding: 12px; }
  .pk-modal__panel { max-height: calc(100dvh - 24px); }
  .pk-modal__head { padding-top: 18px; padding-bottom: 16px; }
}

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

.pk-footer {
  background: var(--green-pale); padding: 48px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.pk-footer img { height: 26px; display: block; }
.pk-footer__tagline { font-size: 14px; color: var(--muted-4); }
.pk-footer__meta { font-size: 14px; color: var(--muted-4); }
.pk-footer__meta a { color: var(--muted-4); }
.pk-footer__meta a:hover { color: var(--green-deep); }

/* -------------------------------------------------------------- whatsapp -- */

.pk-whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px oklch(0.2 0.02 50 / 0.28);
  transition: transform 0.15s ease;
}
.pk-whatsapp:hover { transform: scale(1.06); }
.pk-whatsapp svg { width: 30px; height: 30px; fill: #ffffff; }

/* =========================================================== page: schools */

.pk-footprint { background: var(--green-dark); color: oklch(0.97 0.01 60); padding: var(--section) var(--gutter); }
.pk-footprint h2 { font-size: 38px; margin: 0 0 40px; max-width: 760px; line-height: 1.25; }
.pk-footprint__lead { font-size: 17px; max-width: 700px; color: oklch(0.85 0.015 60); margin: 0 0 72px; }
.pk-countries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 88px; }
.pk-country { border-top: 1px solid var(--line-dark); padding-top: 20px; }
.pk-country img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; display: block; }
.pk-country__name { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.pk-cities__label {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: oklch(0.7 0.02 124); margin: 0 0 24px;
}
.pk-cities { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 80px; }
.pk-city { padding: 9px 18px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 14px; }
.pk-footprint__closing {
  font-family: var(--serif); font-size: 22px; font-style: italic; max-width: 640px;
  margin: 0; color: oklch(0.95 0.01 60); line-height: 1.5;
}

.pk-trusted { background: var(--green-pale); }
.pk-trusted__inner { padding: 120px var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.pk-trusted h2 { font-size: 34px; margin: 0 0 12px; }
.pk-trusted__lead { font-size: 16px; color: var(--muted-2); margin: 0 0 56px; }
.pk-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.pk-tab {
  padding: 12px 24px; border-radius: 100px; cursor: pointer; font-size: 15px;
  font-weight: 600; background: var(--black); color: var(--white);
  border: 0; font-family: var(--sans); transition: background 0.18s ease;
}
.pk-tab[aria-selected="true"] { background: var(--green); }
.pk-schools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pk-school {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 20px; display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center;
}
.pk-school img { height: 48px; max-width: 100%; object-fit: contain; }
.pk-school__name { font-size: 14px; font-weight: 500; }
.pk-trusted__note { font-size: 15px; color: var(--muted-2); margin: 32px 0 0; }

/* ========================================================= page: workshops */

.pk-page--workshops { background: var(--green-pale); }
.pk-pagehead--dark { background: var(--black); padding: 90px var(--gutter) 70px; }
.pk-pagehead--dark .pk-wrap { max-width: 1000px; }
.pk-pagehead--dark h1 { font-size: 46px; margin: 0; color: var(--white); line-height: 1.15; }
.pk-pagehead--dark p { font-size: 17px; margin: 20px 0 0; color: var(--white); max-width: 640px; }

.pk-schedule { max-width: 1000px; margin: 0 auto; padding: 80px var(--gutter); }
.pk-schedule__group { margin-bottom: 56px; }
.pk-schedule__group h2 { font-size: 22px; margin: 0 0 20px; color: var(--ink); }
.pk-schedule__list { display: flex; flex-direction: column; gap: 16px; }
.pk-event {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 28px; display: grid; grid-template-columns: 200px 1fr; gap: 24px;
}
.pk-event__date { font-size: 14px; font-weight: 600; color: var(--black); }
.pk-event__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.pk-event__course, .pk-event__venue { font-size: 14px; color: var(--muted); }
.pk-event__course { margin-bottom: 4px; }
.pk-schedule__divider {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  margin: 88px 0 32px; padding-top: 40px; border-top: 1px solid var(--line);
}
.pk-schedule__empty { font-size: 17px; color: var(--muted); }
.pk-event--past { opacity: 0.78; }

/* =========================================================== page: gallery */

.pk-pagehead { background: var(--white); padding: 90px var(--gutter) 60px; }
.pk-pagehead h1 { font-size: 46px; margin: 0; line-height: 1.15; max-width: 700px; }
.pk-pagehead p { font-size: 17px; color: var(--muted); margin: 20px 0 0; max-width: 620px; }

.pk-gallery { background: var(--white); padding: 0 var(--gutter) var(--section); }
.pk-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pk-gallery__item {
  aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; cursor: pointer;
  position: relative; padding: 0; border: 0; background: var(--line);
  transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; width: 100%;
}
.pk-gallery__item:hover { transform: scale(1.02); box-shadow: 0 12px 28px oklch(0.2 0.02 50 / 0.18); }
.pk-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;
}
.pk-gallery__item:hover img { transform: scale(1.06); }

.pk-lightbox {
  position: fixed; inset: 0; background: oklch(0.1 0 0 / 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 40px; cursor: zoom-out;
}
.pk-lightbox[hidden] { display: none; }
.pk-lightbox img { max-width: 90vw; max-height: 82vh; border-radius: 8px; object-fit: contain; }
.pk-lightbox__close {
  position: absolute; top: 32px; right: 40px; width: 44px; height: 44px;
  border-radius: 50%; background: oklch(0.99 0.005 60 / 0.15); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  cursor: pointer; border: 0; font-family: var(--sans);
}
.pk-lightbox__close:hover { background: oklch(0.99 0.005 60 / 0.28); }
.pk-lightbox__caption {
  position: absolute; bottom: 32px; left: 0; right: 0; text-align: center;
  color: var(--white); font-size: 15px; padding: 0 40px;
}

/* ========================================================= page: locations */

.pk-page--locations { background: var(--white); }
.pk-locations { padding: 0 var(--gutter) var(--section); max-width: var(--maxw); margin: 0 auto; }
.pk-locations__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.pk-pill {
  padding: 12px 24px; border-radius: 100px; cursor: pointer; font-size: 15px;
  font-weight: 600; background: var(--black); color: var(--white); border: 0;
  font-family: var(--sans); transition: background 0.18s ease;
}
.pk-pill[aria-selected="true"] { background: var(--green); }

.pk-location[hidden] { display: none; }
.pk-location__badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pk-badge { padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.pk-badge--cat { background: var(--green-pale); color: var(--green-tint); }
.pk-badge--star { background: var(--black); color: var(--green); }
.pk-badge--tag { background: oklch(0.94 0.014 60); color: oklch(0.3 0.02 50); }
.pk-location h2 { font-size: 36px; margin: 0 0 10px; line-height: 1.2; }
.pk-location__where { font-size: 15px; color: var(--muted-3); margin-bottom: 32px; }
.pk-location__pull {
  font-family: var(--serif); font-size: 22px; font-style: italic; margin: 0 0 32px;
  line-height: 1.5; color: var(--ink); border-left: 3px solid var(--green); padding-left: 24px;
}
.pk-location__body p { font-size: 16px; margin: 0 0 20px; color: var(--body); }
.pk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin: 40px 0; }
.pk-stat { background: var(--green-pale); border-radius: 16px; padding: 28px 20px; text-align: center; }
.pk-stat__value { font-family: var(--serif); font-size: 36px; font-weight: 600; color: var(--ink-strong); }
.pk-stat__label { font-size: 14px; color: var(--muted); margin-top: 4px; }
.pk-location__meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px;
  margin-bottom: 64px; border-top: 1px solid var(--line); padding-top: 24px;
}
.pk-location__meta div { padding: 12px 0; font-size: 15px; }
.pk-location__meta b { font-weight: 600; color: var(--ink-strong); }
.pk-location__meta span { color: var(--muted); }
.pk-location h3 { font-size: 24px; margin: 0 0 24px; }
.pk-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pk-photos .pk-gallery__item { aspect-ratio: 4/3; border-radius: 14px; }

/* ========================================================== responsive === */

@media (max-width: 1180px) {
  :root { --gutter: 40px; --section: 104px; }
  .pk-hero h1 { font-size: 54px; }
  .pk-countries { grid-template-columns: repeat(2, 1fr); }
  .pk-schools { grid-template-columns: repeat(3, 1fr); }
  .pk-about__grid { grid-template-columns: 240px 1fr; gap: 48px; }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; --section: 88px; }

  .pk-nav { padding: 16px var(--gutter); }
  .pk-nav__logo img { height: 44px; }
  .pk-nav__toggle { display: flex; }
  .pk-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px; display: none;
    box-shadow: 0 16px 32px oklch(0.2 0.02 50 / 0.12);
  }
  .pk-nav__links.is-open { display: flex; }
  .pk-nav__links a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .pk-nav__links a.pk-nav__cta {
    margin-top: 16px; text-align: center; border-bottom: 0; padding: 14px 22px; font-size: 15px;
  }

  .pk-hero { min-height: 78vh; }
  .pk-hero__inner { padding-bottom: 56px; }
  .pk-hero h1 { font-size: 40px; }
  .pk-hero__lead { font-size: 17px; }

  .pk-about__grid { grid-template-columns: 1fr; gap: 36px; }
  .pk-about__media img { height: 280px; }
  .pk-about__body h2 { font-size: 34px; }

  .pk-why { padding: 88px var(--gutter); }
  .pk-why h2 { font-size: 32px; margin-bottom: 40px; }
  .pk-why__card { padding: 32px 28px; }
  /* Tablet: plain two-up, and the last card takes the full row. */
  .pk-why__grid--five { grid-template-columns: repeat(2, 1fr); }
  .pk-why__grid--five > .pk-why__card,
  .pk-why__grid--five > .pk-why__card:nth-child(4),
  .pk-why__grid--five > .pk-why__card:nth-child(5) { grid-column: span 1; }
  .pk-why__grid--five > .pk-why__card:nth-child(5) { grid-column: span 2; }

  .pk-workshops__head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .pk-workshops__head h2 { font-size: 30px; }
  .pk-workshops__items { margin-bottom: 0; }
  .pk-formats h3 { font-size: 26px; }

  .pk-advisory__grid { grid-template-columns: 1fr; gap: 40px; }
  .pk-advisory h2 { font-size: 30px; }
  .pk-advisory__list { grid-template-columns: 1fr; }

  .pk-recognition h2 { font-size: 30px; margin-bottom: 32px; }

  .pk-cta { padding: 88px var(--gutter); }
  .pk-cta h2 { font-size: 32px; }

  .pk-footprint h2 { font-size: 30px; }
  .pk-footprint__lead { margin-bottom: 48px; }
  .pk-countries { margin-bottom: 56px; }
  .pk-cities { margin-bottom: 56px; }
  .pk-trusted__inner { padding: 88px var(--gutter); }
  .pk-trusted h2 { font-size: 28px; }
  .pk-schools { grid-template-columns: repeat(2, 1fr); }

  .pk-pagehead, .pk-pagehead--dark { padding: 64px var(--gutter) 48px; }
  .pk-pagehead h1, .pk-pagehead--dark h1 { font-size: 36px; }
  .pk-schedule { padding: 56px var(--gutter); }
  .pk-event { grid-template-columns: 1fr; gap: 10px; padding: 20px 22px; }

  .pk-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pk-photos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pk-lightbox { padding: 20px; }
  .pk-lightbox__close { top: 16px; right: 16px; }

  .pk-location h2 { font-size: 28px; }
  .pk-location__pull { font-size: 19px; }
  .pk-location__meta { grid-template-columns: 1fr; margin-bottom: 40px; }
  .pk-locations__pills { margin-bottom: 36px; }

  .pk-footer { padding: 36px var(--gutter); }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; --section: 64px; }

  .pk-hero h1 { font-size: 32px; }
  .pk-hero__eyebrow { font-size: 12px; margin-bottom: 16px; }
  .pk-hero__lead { font-size: 16px; margin-bottom: 20px; }
  .pk-hero__intro { font-size: 15px; margin-bottom: 28px; }
  .pk-btn { padding: 13px 24px; font-size: 14px; }

  .pk-why__grid, .pk-formats__grid { grid-template-columns: 1fr; }
  .pk-why__grid--five { grid-template-columns: 1fr; }
  .pk-why__grid--five > .pk-why__card,
  .pk-why__grid--five > .pk-why__card:nth-child(4),
  .pk-why__grid--five > .pk-why__card:nth-child(5) { grid-column: span 1; }
  .pk-why__num { font-size: 40px; }
  .pk-why__card h3 { font-size: 20px; }

  .pk-countries { grid-template-columns: 1fr; gap: 24px; }
  .pk-schools { grid-template-columns: 1fr; }
  .pk-tab, .pk-pill { padding: 10px 18px; font-size: 14px; }

  .pk-gallery__grid, .pk-photos { grid-template-columns: 1fr; }
  .pk-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pk-stat { padding: 20px 14px; }
  .pk-stat__value { font-size: 28px; }

  .pk-cta h2 { font-size: 27px; }
  .pk-footer { justify-content: center; text-align: center; }
  .pk-whatsapp { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .pk-whatsapp svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}