/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 21 2026 | 15:10:58 */
  /* ═══ SECTION S1 ═══ */

  :root {
    --sky: #e8f4e0;
    --canopy: #2d5a1b;
    --canopy-mid: #3d7a25;
    --leaf: #5a9e30;
    --leaf-fresh: #7dc242;
    --apple: #8fce3a;
    --sunlight: #f0e068;
    --gold-afternoon: #d4a820;
    --water: #a8d8ea;
    --water-deep: #5ba3c9;
    --flower-white: #f8f8f0;
    --flower-pink: #f0a0b0;
    --flower-yellow: #f5d060;
    --earth: #8b6040;
    --mist: rgba(255,255,255,0.15);
    --ink: #1a2810;
    --ink-soft: #2d3d20;
    --muted: #4a5c38;
    --paper-light: #f2f8ec;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; overflow-x: hidden; }

  body {
    font-family: 'Karla', sans-serif;
    color: var(--ink);
    background: var(--paper-light);
  }

  /* ── SECTION CONTAINMENT (applies to every page-section wrapper) ──
     Guarantees birds, particles, mist, butterflies, or any future
     decorative animation can never visually escape the section they
     belong to, regardless of transforms or viewport-relative values. */
  .page-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 28px;
    overflow: hidden;
    background-image: url('YOUR-PHOTO-URL-HERE.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Optional dark overlay for readability over busy photos */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20,40,16,0.15);
    z-index: 0;
    pointer-events: none;
  }

  
  .bg-sun {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,240,120,0.55) 0%, rgba(240,200,60,0.2) 35%, transparent 70%);
    z-index: 1;
    animation: sun-breathe 8s ease-in-out infinite;
  }

  @keyframes sun-breathe {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  }

  
  .bg-mountain {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    z-index: 3;
  }

  .bg-mountain svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── BIRDS ── */
  .birds {
    position: absolute;
    top: 12%;
    left: 0;
    right: 0;
    z-index: 8;
    pointer-events: none;
  }

  .bird {
    position: absolute;
    animation: bird-fly linear infinite;
  }

  .bird svg path {
    fill: none;
    stroke: var(--canopy);
    stroke-width: 1.5;
    stroke-linecap: round;
  }

  .b1 { top: 0; left: -60px; animation-duration: 18s; animation-delay: 0s; }
  .b2 { top: 20px; left: -80px; animation-duration: 22s; animation-delay: 4s; }
  .b3 { top: 8px; left: -40px; animation-duration: 15s; animation-delay: 9s; }
  .b4 { top: 35px; left: -100px; animation-duration: 25s; animation-delay: 2s; }

  @keyframes bird-fly {
    0% { transform: translateX(-100px) translateY(0px); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translateX(50vw) translateY(-20px); }
    95% { opacity: 1; }
    100% { transform: translateX(110vw) translateY(-5px); opacity: 0; }
  }

  /* ── BUTTERFLIES ── */
  .butterfly {
    position: absolute;
    z-index: 9;
    animation: flutter linear infinite;
    pointer-events: none;
  }

  .bf1 { top: 45%; left: 15%; animation-duration: 12s; animation-delay: 3s; }
  .bf2 { top: 55%; right: 20%; animation-duration: 9s; animation-delay: 7s; }

  @keyframes flutter {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    25% { transform: translate(30px, -20px) rotate(15deg); }
    50% { transform: translate(-10px, -40px) rotate(-10deg); }
    75% { transform: translate(20px, -15px) rotate(8deg); }
    90% { opacity: 1; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  }

  /* ── FLOATING PARTICLES — pollen, dust motes ── */
  .particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
  }

  .particle {
    position: absolute;
    border-radius: 50%;
    animation: float linear infinite;
    opacity: 0;
  }

  .p1 { width: 3px; height: 3px; background: rgba(255,240,100,0.7); left: 20%; animation-duration: 12s; animation-delay: 0s; top: 80%; }
  .p2 { width: 2px; height: 2px; background: rgba(255,255,255,0.8); left: 45%; animation-duration: 9s; animation-delay: 3s; top: 90%; }
  .p3 { width: 4px; height: 4px; background: rgba(255,240,100,0.5); left: 70%; animation-duration: 14s; animation-delay: 6s; top: 85%; }
  .p4 { width: 2px; height: 2px; background: rgba(255,255,255,0.9); left: 30%; animation-duration: 11s; animation-delay: 2s; top: 75%; }
  .p5 { width: 3px; height: 3px; background: rgba(240,160,176,0.6); left: 60%; animation-duration: 10s; animation-delay: 5s; top: 88%; }
  .p6 { width: 2px; height: 2px; background: rgba(255,240,100,0.8); left: 80%; animation-duration: 13s; animation-delay: 1s; top: 82%; }
  .p7 { width: 3px; height: 3px; background: rgba(255,255,255,0.7); left: 10%; animation-duration: 16s; animation-delay: 8s; top: 78%; }
  .p8 { width: 2px; height: 2px; background: rgba(255,240,100,0.6); left: 55%; animation-duration: 8s; animation-delay: 4s; top: 92%; }

  @keyframes float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    50% { transform: translateY(-60vh) translateX(20px); opacity: 0.6; }
    90% { opacity: 0.2; }
    100% { transform: translateY(-100vh) translateX(-10px); opacity: 0; }
  }

  /* ── MIST LAYER ── */
  .mist-layer {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
    z-index: 6;
    animation: mist-drift 12s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes mist-drift {
    0%, 100% { transform: translateX(-3%) scaleY(1); opacity: 0.6; }
    50% { transform: translateX(3%) scaleY(1.2); opacity: 0.9; }
  }

  /* ── CONTENT CARD ── */
  .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 640px;
    padding: 52px 48px;
    background: rgba(242,248,236,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-top: 3px solid rgba(143,206,58,0.5);
    box-shadow:
      0 20px 60px rgba(44,90,27,0.12),
      0 4px 20px rgba(44,90,27,0.08),
      inset 0 1px 0 rgba(255,255,255,0.8);
    animation: card-arrive 1.4s cubic-bezier(0.16,1,0.3,1) both 0.3s;
  }

  @keyframes card-arrive {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Corner leaves on card */
  .card-corner {
    position: absolute;
    font-size: 1.1rem;
    opacity: 0.5;
    line-height: 1;
  }
  .cc-tl { top: 10px; left: 14px; transform: rotate(-30deg); }
  .cc-tr { top: 10px; right: 14px; transform: rotate(30deg) scaleX(-1); }
  .cc-bl { bottom: 10px; left: 14px; transform: rotate(30deg); }
  .cc-br { bottom: 10px; right: 14px; transform: rotate(-30deg) scaleX(-1); }

  /* Top ornament */
  .top-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
    animation: fade-in 1s ease both 0.9s;
    opacity: 0;
  }

  .orn-l {
    height: 1px;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--leaf));
  }
  .orn-l.r { background: linear-gradient(90deg, var(--leaf), transparent); }
  .orn-gem { width: 6px; height: 6px; background: var(--apple); transform: rotate(45deg); }

  /* Sanctuary label */
  .sanc-label {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--canopy-mid);
    margin-bottom: 22px;
    animation: fade-in 1s ease both 1s;
    opacity: 0;
  }

  /* Name */
  .hero-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 9vw, 5.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
    animation: name-arrive 1.4s cubic-bezier(0.16,1,0.3,1) both 1.1s;
    opacity: 0;
    position: relative;
  }

  @keyframes name-arrive {
    from { opacity: 0; transform: translateY(16px) scale(0.97); letter-spacing: 0.12em; }
    to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.04em; }
  }

  /* Gold underline */
  .name-line {
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold-afternoon), transparent);
    margin: 10px auto 28px;
    border-radius: 1px;
    animation: line-grow 1s ease both 1.8s;
  }

  @keyframes line-grow {
    from { width: 0; opacity: 0; }
    to { width: 60%; opacity: 1; }
  }

  /* Positioning */
  .positioning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    animation: fade-in 1s ease both 1.5s;
    opacity: 0;
  }

  .pw {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pw1 { color: var(--ink-soft); }
  .pw2 { color: var(--canopy); font-style: italic; font-weight: 400; text-transform: none; font-size: clamp(1rem, 2.4vw, 1.3rem); letter-spacing: 0.04em; }
  .pw3 { color: var(--gold-afternoon); }
  .psep { color: var(--apple); font-size: 1rem; opacity: 0.7; font-weight: 300; }

  /* Sanctuary line */
  .sanc-line {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-style: italic;
    font-weight: 300;
    color: var(--canopy);
    line-height: 1.8;
    margin-bottom: 36px;
    animation: fade-in 1s ease both 1.7s;
    opacity: 0;
  }

  .sanc-line em {
    font-style: normal;
    font-weight: 600;
    color: var(--canopy-mid);
  }

  /* Enter */
  .enter-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fade-in 1s ease both 2s;
    opacity: 0;
  }

  .enter-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .enter-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--apple), transparent);
    animation: enter-pulse 2.5s ease-in-out infinite 2.5s;
  }

  @keyframes enter-pulse {
    0%, 100% { opacity: 0.5; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.15); }
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Responsive */
  @media (max-width: 540px) {
    .hero-content { padding: 36px 24px; }
    .positioning { gap: 8px; }
    .psep { display: none; }
    .pw { display: block; }
    .waterfall { right: 5%; }
    .b3, .b4 { display: none; }
  }


  /* ═══ SECTION S2 ═══ */

  :root {
    --paper: #f4f8ee;
    --paper-deep: #e8f0dc;
    --ink: #1a2810;
    --ink-soft: #2d3d20;
    --forest: #2c4a1e;
    --forest-mid: #3d6628;
    --forest-light: #4d7a30;
    --leaf: #6a9e40;
    --apple: #8fce3a;
    --gold: #c49a30;
    --gold-light: #d4b050;
    --muted: #5a6e48;
    --rule: #c8d8b0;
    --tint: #eef5e4;
    --tint-deep: #e4f0d4;
    --water: #7ab8d4;

    /* Door colours — each path its own nature colour */
    --student: #2c6e3a;
    --parent: #5a3e8c;
    --teacher: #8c5a1a;
    --reader: #1a5c5c;
    --career: #6e2c2c;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--paper);
    font-family: 'Karla', sans-serif;
    color: var(--ink);
  }

  /* ── SECTION WRAPPER ── */
  .section-sfh {
    padding: 96px 28px 104px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f4f8ee 0%, #edf5e0 50%, #e8f0d8 100%);
  }

  /* Subtle background leaf pattern */
  .section-sfh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(106,158,64,0.06) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(44,74,30,0.05) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(196,154,48,0.04) 0%, transparent 50%);
    pointer-events: none;
  }

  /* Grain */
  .section-sfh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .s2-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ── SECTION HEADER ── */
  .s2-section-header {
    text-align: center;
    margin-bottom: 64px;
  }

  .s2-section-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--forest-light);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .s2-section-tag::before,
  .s2-section-tag::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--leaf);
    opacity: 0.5;
  }

  .s2-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  .s2-section-title em {
    font-style: italic;
    color: var(--forest-mid);
  }

  .s2-section-sub {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto;
    font-style: italic;
  }

  /* ── ORNAMENT ── */
  .s2-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px auto 0;
  }

  .s2-orn-line {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
  }
  .s2-orn-line.r { background: linear-gradient(90deg, var(--gold), transparent); }
  .s2-orn-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); opacity: 0.8; }

  /* ── DOORS GRID ── */
  .doors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 16px;
  }

  @media (max-width: 900px) {
    .doors-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .s2-door-card:last-child {
      grid-column: 1 / -1;
      max-width: 340px;
      margin: 0 auto;
      width: 100%;
    }
  }

  @media (max-width: 500px) {
    .doors-grid { grid-template-columns: 1fr; }
    .s2-door-card:last-child { grid-column: auto; max-width: 100%; }
  }

  /* ── DOOR CARD ── */
  .s2-door-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(200,216,176,0.6);
    border-top: 4px solid var(--door-color);
    border-radius: 2px;
    padding: 32px 24px 28px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-decoration: none;
    display: block;
  }

  .s2-door-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(var(--door-rgb), 0.04));
    transition: height 0.4s ease;
  }

  .s2-door-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(44,74,30,0.12), 0 4px 12px rgba(44,74,30,0.08);
    background: rgba(255,255,255,0.92);
  }

  .s2-door-card:hover::before { height: 100%; }

  /* Individual door colours */
  .d-student { --door-color: var(--student); --door-rgb: 44,110,58; }
  .d-parent  { --door-color: var(--parent);  --door-rgb: 90,62,140; }
  .d-teacher { --door-color: var(--teacher); --door-rgb: 140,90,26; }
  .d-reader  { --door-color: var(--reader);  --door-rgb: 26,92,92; }
  .d-career  { --door-color: var(--career);  --door-rgb: 110,44,44; }

  /* Door icon */
  .door-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(200,216,176,0.5);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
  }

  .s2-door-card:hover .door-icon {
    transform: scale(1.12) rotate(-5deg);
  }

  /* Door label */
  .door-label {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--door-color);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }

  /* Door title */
  .door-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
  }

  /* Door desc */
  .door-desc {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }

  /* Door path list */
  .door-paths {
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
  }

  .door-paths li {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.6;
    padding: 5px 0;
    border-bottom: 1px solid rgba(200,216,176,0.4);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Karla', sans-serif;
  }

  .door-paths li:last-child { border-bottom: none; }

  .path-arrow {
    color: var(--door-color);
    font-size: 0.75rem;
    padding-top: 2px;
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;
  }

  /* Enter button */
  .door-enter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--door-color);
    position: relative;
    z-index: 1;
    transition: gap 0.3s ease;
  }

  .s2-door-card:hover .door-enter { gap: 12px; }

  .enter-arrow {
    width: 24px;
    height: 1px;
    background: var(--door-color);
    position: relative;
    transition: width 0.3s ease;
  }

  .enter-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--door-color);
    border-top: 1px solid var(--door-color);
    transform: rotate(45deg);
  }

  .s2-door-card:hover .enter-arrow { width: 32px; }

  /* ── BOTTOM NOTE ── */
  .bottom-note {
    text-align: center;
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
  }

  .bottom-note p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    max-width: 560px;
    margin: 0 auto;
  }

  .bottom-note em {
    font-style: normal;
    color: var(--forest-mid);
    font-weight: 600;
  }

  /* ── ANIMATIONS ── */
  .s2-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .s2-fade.in { opacity: 1; transform: translateY(0); }

  .s2-door-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .s2-door-card.in { opacity: 1; transform: translateY(0); }
  .s2-door-card:hover { transform: translateY(-6px) !important; }

  .d1 { transition-delay: 0.05s; }
  .d2 { transition-delay: 0.12s; }
  .d3 { transition-delay: 0.19s; }
  .d4 { transition-delay: 0.26s; }
  .d5 { transition-delay: 0.33s; }


  /* ═══ SECTION S3 ═══ */

  :root {
    --paper: #f0f6e8;
    --ink: #1a2810;
    --ink-soft: #2d3d20;
    --forest: #2c4a1e;
    --forest-mid: #3d6628;
    --forest-light: #4d7a30;
    --leaf: #6a9e40;
    --gold: #c49a30;
    --muted: #5a6e48;
    --rule: #c8d8b0;
    --tint: #e8f2d8;
    --tint-deep: #ddecc8;

    --c-summaries: #2c4a1e;
    --c-skills:    #5a3e8c;
    --c-articles:  #1a4a6e;
    --c-career:    #8c5a1a;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--paper);
    font-family: 'Karla', sans-serif;
    color: var(--ink);
  }

  .section {
    padding: 96px 28px 104px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #e8f0d8 0%, #e0ecd0 50%, #dce8c8 100%);
  }

  .section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 50% at 10% 20%, rgba(44,74,30,0.05) 0%, transparent 60%),
      radial-gradient(ellipse 60% 60% at 90% 80%, rgba(196,154,48,0.05) 0%, transparent 55%);
    pointer-events: none;
  }

  .section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .s3-inner {
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ── HEADER ── */
  .s3-section-header {
    text-align: center;
    margin-bottom: 72px;
  }

  .s3-section-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--forest-light);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .s3-section-tag::before,
  .s3-section-tag::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--leaf);
    opacity: 0.5;
  }

  .s3-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .s3-section-title em { font-style: italic; color: var(--forest-mid); }

  .s3-section-sub {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto;
    font-style: italic;
  }

  .s3-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }

  .s3-orn-line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
  .s3-orn-line.r { background: linear-gradient(90deg, var(--gold), transparent); }
  .s3-orn-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); opacity: 0.8; }

  /* ── FOUR PATHWAYS GRID ── */
  .pathways {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  @media (max-width: 960px) {
    .pathways { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 540px) {
    .pathways { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  }

  /* ── PATHWAY CARD ── */
  .s3-pathway {
    position: relative;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(200,220,170,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
  }

  .s3-pathway:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(44,74,30,0.14), 0 6px 16px rgba(44,74,30,0.08);
    background: rgba(255,255,255,0.92);
  }

  /* Top colour band */
  .pathway-band {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
  }

  .ps .pathway-band { background: linear-gradient(90deg, var(--c-summaries), #4d7a30); }
  .pk .pathway-band { background: linear-gradient(90deg, var(--c-skills), #7a5ab0); }
  .pa .pathway-band { background: linear-gradient(90deg, var(--c-articles), #2a6a9e); }
  .pc .pathway-band { background: linear-gradient(90deg, var(--c-career), #b07830); }

  /* Big background number */
  .pathway-bg-num {
    position: absolute;
    bottom: -24px;
    right: -8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.04;
    color: var(--ink);
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .s3-pathway:hover .pathway-bg-num { opacity: 0.08; }

  .pathway-body {
    padding: 28px 24px 24px;
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Icon */
  .pathway-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border: 1px solid rgba(200,220,170,0.4);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }

  .ps .pathway-icon { background: rgba(44,74,30,0.08); }
  .pk .pathway-icon { background: rgba(90,62,140,0.08); }
  .pa .pathway-icon { background: rgba(26,74,110,0.08); }
  .pc .pathway-icon { background: rgba(140,90,26,0.08); }

  .s3-pathway:hover .pathway-icon { transform: scale(1.1) rotate(-8deg); }

  /* Label */
  .pathway-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .ps .pathway-label { color: var(--c-summaries); }
  .pk .pathway-label { color: var(--c-skills); }
  .pa .pathway-label { color: var(--c-articles); }
  .pc .pathway-label { color: var(--c-career); }

  /* Title */
  .pathway-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.25;
  }

  /* Desc */
  .pathway-desc {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 20px;
  }

  /* Rule */
  .s3-pathway-rule {
    height: 1px;
    background: var(--rule);
    margin-bottom: 16px;
  }

  /* Inside */
  .inside-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }

  .inside-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
    flex: 1;
  }

  .inside-pill {
    font-family: 'Karla', sans-serif;
    font-size: 0.75rem;
    color: var(--ink-soft);
    background: var(--tint);
    border: 1px solid var(--rule);
    padding: 3px 9px;
    transition: background 0.2s ease;
    line-height: 1.6;
  }

  .s3-pathway:hover .inside-pill { background: rgba(255,255,255,0.9); }

  /* Highlight pill — for unique features */
  .inside-pill.highlight {
    font-weight: 600;
    color: white;
  }

  .ps .inside-pill.highlight { background: var(--c-summaries); border-color: var(--c-summaries); }
  .pk .inside-pill.highlight { background: var(--c-skills); border-color: var(--c-skills); }
  .pa .inside-pill.highlight { background: var(--c-articles); border-color: var(--c-articles); }
  .pc .inside-pill.highlight { background: var(--c-career); border-color: var(--c-career); }

  /* CTA */
  .pathway-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: auto;
    transition: gap 0.3s ease;
  }

  .ps .pathway-cta { color: var(--c-summaries); }
  .pk .pathway-cta { color: var(--c-skills); }
  .pa .pathway-cta { color: var(--c-articles); }
  .pc .pathway-cta { color: var(--c-career); }

  .s3-pathway:hover .pathway-cta { gap: 14px; }

  .cta-line {
    height: 1px;
    width: 28px;
    position: relative;
    transition: width 0.3s ease;
  }

  .ps .cta-line { background: var(--c-summaries); }
  .pk .cta-line { background: var(--c-skills); }
  .pa .cta-line { background: var(--c-articles); }
  .pc .cta-line { background: var(--c-career); }

  .cta-line::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    width: 6px; height: 6px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
  }

  .ps .cta-line::after { border-color: var(--c-summaries); }
  .pk .cta-line::after { border-color: var(--c-skills); }
  .pa .cta-line::after { border-color: var(--c-articles); }
  .pc .cta-line::after { border-color: var(--c-career); }

  .s3-pathway:hover .cta-line { width: 40px; }

  /* ── PHILOSOPHY NOTE ── */
  .philosophy {
    margin-top: 64px;
    background: rgba(44,74,30,0.06);
    border: 1px solid rgba(106,158,64,0.25);
    border-left: 4px solid var(--forest-mid);
    padding: 36px 40px;
    position: relative;
    overflow: hidden;
  }

  .philosophy::before {
    content: '\201C';
    position: absolute;
    top: -10px; left: 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    color: var(--leaf);
    opacity: 0.2;
    line-height: 1;
  }

  .philosophy-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-style: italic;
    font-weight: 300;
    color: var(--forest);
    line-height: 1.85;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .philosophy-text em {
    font-style: normal;
    font-weight: 600;
    color: var(--forest-mid);
  }

  .philosophy-sig {
    text-align: center;
    margin-top: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
    z-index: 1;
  }

  /* ── ANIMATIONS ── */
  .s3-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .s3-fade.in { opacity: 1; transform: translateY(0); }

  .s3-pathway {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease, box-shadow 0.35s ease, background 0.3s ease;
  }
  .s3-pathway.in { opacity: 1; transform: translateY(0); }
  .s3-pathway:hover { transform: translateY(-8px) !important; }

  .d1 { transition-delay: 0.05s; }
  .d2 { transition-delay: 0.13s; }
  .d3 { transition-delay: 0.21s; }
  .d4 { transition-delay: 0.29s; }


  /* ═══ SECTION S4 ═══ */

  :root {
    --paper: #edf5e0;
    --ink: #1a2810;
    --ink-soft: #2d3d20;
    --forest: #2c4a1e;
    --forest-mid: #3d6628;
    --forest-light: #4d7a30;
    --forest-dark: #1a2e10;
    --leaf: #6a9e40;
    --apple: #8fce3a;
    --gold: #c49a30;
    --gold-light: #d4b050;
    --muted: #5a6e48;
    --rule: #c8d8b0;
    --tint: #e4f0d4;
    --tint-deep: #d8e8c4;
    --night: #0e1c08;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--paper);
    font-family: 'Karla', sans-serif;
    color: var(--ink);
  }

  /* ── SECTION ── */
  .section-origin {
    position: relative;
    overflow: hidden;
  }

  /* ── TOP HALF — LIGHT FOREST ── */
  .origin-top {
    padding: 96px 28px 80px;
    background: linear-gradient(180deg, #dce8c8 0%, #d0e0b8 100%);
    position: relative;
  }

  .origin-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 20% 40%, rgba(196,154,48,0.06) 0%, transparent 55%),
      radial-gradient(ellipse 50% 60% at 80% 60%, rgba(44,74,30,0.05) 0%, transparent 50%);
    pointer-events: none;
  }

  /* ── BOTTOM HALF — DEEP FOREST DARK ── */
  .origin-bottom {
    padding: 80px 28px 96px;
    background: linear-gradient(180deg, #1e3412 0%, #162a0e 50%, #0e1c08 100%);
    position: relative;
    overflow: hidden;
  }

  /* Stars / fireflies in dark section */
  .origin-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 15% 25%, rgba(255,240,120,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 35%, rgba(255,240,120,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 40%, rgba(255,240,120,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 50%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 65% 55%, rgba(255,240,120,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(2px 2px at 90% 30%, rgba(255,240,120,0.7) 0%, transparent 100%),
      radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,0.4) 0%, transparent 100%);
    pointer-events: none;
    animation: firefly 6s ease-in-out infinite alternate;
  }

  @keyframes firefly {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
  }

  /* Grain on dark */
  .origin-bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .s4-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ── SECTION TAG ── */
  .s4-section-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--forest-light);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .s4-section-tag::before,
  .s4-section-tag::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  /* ── ORIGIN ONE — THE HUNGER ── */
  .origin-one {
    margin-bottom: 64px;
  }

  .origin-label {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--forest-mid);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .origin-label::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--gold);
  }

  .origin-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
  }

  .origin-heading em {
    font-style: italic;
    color: var(--forest-mid);
  }

  .origin-text {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.9;
    margin-bottom: 1.4em;
  }

  .origin-text:last-child { margin-bottom: 0; }

  .origin-text em {
    font-style: italic;
    color: var(--forest);
  }

  .origin-text strong {
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
  }

  /* Hours strip */
  .hours-strip {
    display: flex;
    gap: 2px;
    margin: 28px 0;
    flex-wrap: wrap;
  }

  .hour-block {
    background: var(--tint-deep);
    border: 1px solid var(--rule);
    padding: 10px 14px;
    text-align: center;
    flex: 1;
    min-width: 80px;
  }

  .hour-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--forest-mid);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
  }

  .hour-label {
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Gap quote */
  .gap-quote {
    background: var(--tint);
    border-left: 3px solid var(--gold);
    padding: 20px 24px;
    margin: 28px 0;
  }

  .gap-quote p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--forest);
    line-height: 1.75;
  }

  .gap-quote em {
    font-style: normal;
    font-weight: 600;
    color: var(--forest-mid);
  }

  /* Divider between two halves */
  .origin-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 0;
    padding: 40px 28px;
    background: linear-gradient(180deg, #d0e0b8, #1e3412);
    position: relative;
    z-index: 2;
  }

  .div-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule), rgba(255,255,255,0.1)); }
  .div-text {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
  }

  /* ── ORIGIN TWO — THE LOVE (dark section) ── */
  .origin-two-tag {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(196,154,48,0.8);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .origin-two-tag::after {
    content: '';
    width: 28px;
    height: 1px;
    background: rgba(196,154,48,0.6);
  }

  .origin-two-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 400;
    color: #e8f0d8;
    line-height: 1.3;
    margin-bottom: 28px;
    letter-spacing: -0.01em;
  }

  .origin-two-heading em {
    font-style: italic;
    color: var(--gold-light);
  }

  .origin-two-text {
    font-size: 1rem;
    color: rgba(232,240,216,0.75);
    line-height: 1.9;
    margin-bottom: 1.4em;
  }

  .origin-two-text em {
    font-style: italic;
    color: rgba(232,240,216,0.95);
  }

  .origin-two-text strong {
    font-weight: 600;
    color: #e8f0d8;
  }

  /* The dedication pull */
  .dedication-pull {
    margin: 40px 0;
    padding: 40px 40px;
    border: 1px solid rgba(196,154,48,0.2);
    border-top: 3px solid rgba(196,154,48,0.5);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
  }

  .dedication-pull::before {
    content: '\201C';
    position: absolute;
    top: -12px; left: 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    color: rgba(196,154,48,0.15);
    line-height: 1;
  }

  .dedication-pull p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-style: italic;
    font-weight: 300;
    color: #e8f0d8;
    line-height: 1.85;
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .dedication-pull em {
    font-style: normal;
    color: var(--gold-light);
    font-weight: 600;
  }

  .dedication-pull .pull-sub {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(196,154,48,0.6);
    text-align: center;
    margin-top: 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    display: block;
  }

  /* ── ANIMATIONS ── */
  .s4-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }
  .s4-fade.in { opacity: 1; transform: translateY(0); }

  .s4-fade-dark {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .s4-fade-dark.in { opacity: 1; transform: translateY(0); }


  /* ═══ SECTION S5 ═══ */

  :root {
    --paper: #f0f6e8;
    --ink: #1a2810;
    --ink-soft: #2d3d20;
    --forest: #2c4a1e;
    --forest-mid: #3d6628;
    --forest-light: #4d7a30;
    --leaf: #6a9e40;
    --gold: #c49a30;
    --gold-light: #d4b050;
    --muted: #5a6e48;
    --rule: #c8d8b0;
    --tint: #e8f2d8;
    --tint-deep: #ddecc8;

    --c-summaries: #2c4a1e;
    --c-skills:    #5a3e8c;
    --c-articles:  #1a4a6e;
    --c-career:    #8c5a1a;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--paper);
    font-family: 'Karla', sans-serif;
    color: var(--ink);
  }

  .section-latest {
    padding: 96px 28px 104px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f0f6e8 0%, #eaf2dc 50%, #e4ecd4 100%);
  }

  .section-latest::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(196,154,48,0.05) 0%, transparent 55%),
      radial-gradient(ellipse 50% 50% at 20% 80%, rgba(44,74,30,0.04) 0%, transparent 50%);
    pointer-events: none;
  }

  .section-latest::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .s5-inner {
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ── HEADER ── */
  .s5-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .header-left {}

  .s5-section-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--forest-light);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .s5-section-tag::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--leaf);
    opacity: 0.5;
  }

  .s5-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
  }

  .s5-section-title em { font-style: italic; color: var(--forest-mid); }

  .view-all {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--forest-mid);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
  }

  .view-all:hover { gap: 12px; color: var(--forest); }

  .va-arrow {
    width: 20px;
    height: 1px;
    background: var(--forest-mid);
    position: relative;
    transition: width 0.3s ease;
  }

  .va-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    width: 6px; height: 6px;
    border-right: 1px solid var(--forest-mid);
    border-top: 1px solid var(--forest-mid);
    transform: rotate(45deg);
  }

  .view-all:hover .va-arrow { width: 28px; }

  /* ── TABS ── */
  .tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 32px;
    background: var(--rule);
    border: 1px solid var(--rule);
    width: fit-content;
  }

  .tab {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 18px;
    background: var(--tint);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    white-space: nowrap;
  }

  .tab:hover { background: var(--tint-deep); color: var(--ink); }

  .tab.active {
    background: var(--ink);
    color: var(--gold);
  }

  /* ── CARDS GRID ── */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  @media (max-width: 860px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .cards-grid { grid-template-columns: 1fr; } }

  /* Tab panels — now just a plain container; the shortcode's own
     wrapper div (.dp-grid) handles the actual grid layout below */
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* ── CONTENT CARD ── */
  .content-card {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(200,220,170,0.5);
    border-top: 3px solid var(--card-color, var(--leaf));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .content-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(44,74,30,0.12);
    background: rgba(255,255,255,0.92);
  }

  /* Featured card — first one larger */
  .content-card.featured {
    grid-column: span 1;
  }

  .card-body { padding: 24px 22px 20px; flex: 1; display: flex; flex-direction: column; }

  .card-type {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--card-color, var(--leaf));
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .card-type::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--card-color, var(--leaf));
  }

  .card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .card-excerpt {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 20px;
  }

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }

  .card-meta {
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.7;
  }

  .card-read {
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--card-color, var(--leaf));
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
  }

  .content-card:hover .card-read { gap: 10px; }

  .read-arrow {
    width: 16px; height: 1px;
    background: var(--card-color, var(--leaf));
    position: relative;
    transition: width 0.3s ease;
  }

  .read-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    width: 5px; height: 5px;
    border-right: 1px solid var(--card-color, var(--leaf));
    border-top: 1px solid var(--card-color, var(--leaf));
    transform: rotate(45deg);
  }

  .content-card:hover .read-arrow { width: 22px; }

  /* New badge */
  .new-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--gold);
    color: white;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 3px 8px;
  }

  /* Coming soon card */
  .content-card.coming-soon {
    opacity: 0.6;
    cursor: default;
  }

  .content-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
  }

  .coming-label {
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 10px;
    border: 1px dashed var(--rule);
    display: inline-block;
    margin-top: 12px;
  }

  /* ── BOTTOM CTA ── */
  .bottom-cta {
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
  }

  .cta-link {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--rule);
    background: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
  }

  .cta-link:hover {
    background: var(--ink);
    color: var(--gold) !important;
    border-color: var(--ink);
    gap: 12px;
  }

  .cl-summaries { color: var(--c-summaries); }
  .cl-skills    { color: var(--c-skills); }
  .cl-articles  { color: var(--c-articles); }
  .cl-career    { color: var(--c-career); }

  /* ── ANIMATIONS ── */
  .s5-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .s5-fade.in { opacity: 1; transform: translateY(0); }

  .content-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, background 0.3s ease;
  }

  .content-card.in { opacity: 1; transform: translateY(0); }
  .content-card:hover:not(.coming-soon) { transform: translateY(-6px) !important; }

  .c1 { transition-delay: 0.05s; }
  .c2 { transition-delay: 0.12s; }
  .c3 { transition-delay: 0.19s; }

  /* ── DYNAMIC POST CARDS ──
     Targets the exact markup the Display Posts Shortcode plugin
     outputs for [display-posts wrapper="div" wrapper_class="dp-grid"]:
     a <div class="listing-item"> per post, containing (in this order)
     .image, .title, .date, .excerpt-dash, .excerpt as direct children.
     Deliberately NOT wired into the scroll-fade IntersectionObserver —
     these cards are always fully visible, so they can never get stuck
     invisible the way a missed/late reveal trigger could cause. */
  .dp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  @media (max-width: 860px) { .dp-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .dp-grid { grid-template-columns: 1fr; } }

  .dp-grid .listing-item {
    opacity: 1;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(200,220,170,0.5);
    border-top: 3px solid var(--leaf);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }

  .dp-grid .listing-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(44,74,30,0.12);
    background: rgba(255,255,255,0.92);
  }

  .dp-grid .listing-item .image { display: block; line-height: 0; margin-bottom: 16px; }
  .dp-grid .listing-item .image img { width: 100%; height: 160px; object-fit: cover; display: block; }

  .dp-grid .listing-item .title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    text-decoration: none;
    padding: 0 22px;
    margin: 0 0 10px;
    display: block;
  }

  .dp-grid .listing-item .title:hover { color: var(--leaf); }

  .dp-grid .listing-item .date {
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.7;
    padding: 0 22px;
    margin-bottom: 10px;
    display: block;
  }

  .dp-grid .listing-item .excerpt-dash { display: none; }

  .dp-grid .listing-item .excerpt {
    font-family: 'Karla', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.75;
    padding: 0 22px;
    flex: 1;
    display: block;
  }

  .dp-grid .listing-item .excerpt-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--leaf);
    text-decoration: none;
    transition: gap 0.3s ease;
  }

  .dp-grid .listing-item .excerpt-more:hover { gap: 10px; }

  /* No-posts placeholder — shown automatically via each shortcode's
     no_posts_message parameter when a category has nothing published yet */
  .dp-grid p {
    grid-column: 1 / -1;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 22px 20px;
    border: 1px dashed var(--rule);
  }

  /* Per-category accent colour */
  #tab-articles .listing-item { border-top-color: var(--c-articles); }
  #tab-articles .listing-item .title:hover,
  #tab-articles .listing-item .excerpt-more { color: var(--c-articles); }

  #tab-summaries .listing-item { border-top-color: var(--c-summaries); }
  #tab-summaries .listing-item .title:hover,
  #tab-summaries .listing-item .excerpt-more { color: var(--c-summaries); }

  #tab-career-skills .listing-item { border-top-color: var(--c-career); }
  #tab-career-skills .listing-item .title:hover,
  #tab-career-skills .listing-item .excerpt-more { color: var(--c-career); }

  /* For Parents / Readers / Students / Teachers — shared teal-forest accent */
  #tab-for-parents .listing-item,
  #tab-for-readers .listing-item,
  #tab-for-students .listing-item,
  #tab-for-teachers .listing-item { border-top-color: var(--reader); }

  #tab-for-parents .listing-item .title:hover,
  #tab-for-parents .listing-item .excerpt-more,
  #tab-for-readers .listing-item .title:hover,
  #tab-for-readers .listing-item .excerpt-more,
  #tab-for-students .listing-item .title:hover,
  #tab-for-students .listing-item .excerpt-more,
  #tab-for-teachers .listing-item .title:hover,
  #tab-for-teachers .listing-item .excerpt-more { color: var(--reader); }


  /* ═══ SECTION S6 ═══ */

  :root {
    --night: #0a1406;
    --night-mid: #0e1c08;
    --night-light: #162a0e;
    --gold: #c49a30;
    --gold-light: #d4b050;
    --gold-dim: rgba(196,154,48,0.4);
    --paper-glow: rgba(232,240,216,0.85);
    --paper-soft: rgba(232,240,216,0.6);
    --paper-dim: rgba(232,240,216,0.35);
    --leaf-glow: rgba(106,158,64,0.15);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--night);
    font-family: 'Cormorant Garamond', serif;
    color: var(--paper-glow);
  }

  /* ── SECTION ── */
  .section-dedication {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 28px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0e1c08 0%, #0a1406 40%, #060e04 100%);
  }

  /* Deep forest night glow */
  .section-dedication::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(44,74,30,0.12) 0%, transparent 65%),
      radial-gradient(ellipse 40% 40% at 50% 50%, rgba(196,154,48,0.06) 0%, transparent 50%);
    pointer-events: none;
    animation: glow-breathe 8s ease-in-out infinite;
  }

  @keyframes glow-breathe {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  /* Fireflies */
  .section-dedication::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 8%  20%, rgba(255,240,120,0.7) 0%, transparent 100%),
      radial-gradient(1px   1px   at 18% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(2px   2px   at 28% 35%, rgba(255,240,120,0.6) 0%, transparent 100%),
      radial-gradient(1px   1px   at 38% 80%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 15%, rgba(255,240,120,0.5) 0%, transparent 100%),
      radial-gradient(1px   1px   at 62% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(2px   2px   at 72% 28%, rgba(255,240,120,0.65) 0%, transparent 100%),
      radial-gradient(1px   1px   at 82% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 92% 42%, rgba(255,240,120,0.55) 0%, transparent 100%),
      radial-gradient(1px   1px   at 15% 88%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(2px   2px   at 45% 92%, rgba(255,240,120,0.4) 0%, transparent 100%),
      radial-gradient(1px   1px   at 75% 85%, rgba(255,255,255,0.3) 0%, transparent 100%);
    pointer-events: none;
    animation: fireflies 10s ease-in-out infinite alternate;
  }

  @keyframes fireflies {
    0%   { opacity: 0.5; transform: translate(0, 0); }
    25%  { opacity: 0.9; }
    50%  { opacity: 0.6; transform: translate(2px, -3px); }
    75%  { opacity: 1; }
    100% { opacity: 0.7; transform: translate(-1px, 2px); }
  }

  /* Grain */
  .grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
  }

  /* Silhouette trees at bottom */
  .tree-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 2;
    pointer-events: none;
  }

  .tree-silhouette svg {
    width: 100%;
    height: 100%;
  }

  /* ── CONTENT ── */
  .dedication-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 600px;
    width: 100%;
    animation: arrive 1.4s cubic-bezier(0.16,1,0.3,1) both;
  }

  @keyframes arrive {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Top ornament */
  .top-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 52px;
    opacity: 0;
    animation: fade-up 1s ease both 0.4s;
  }

  .orn-l {
    height: 1px;
    width: 48px;
    background: linear-gradient(90deg, transparent, var(--gold-dim));
  }
  .orn-l.r { background: linear-gradient(90deg, var(--gold-dim), transparent); }

  .orn-centre {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .orn-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.5;
  }

  .s6-orn-diamond {
    width: 7px; height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    opacity: 0.7;
  }

  /* For label */
  .for-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(196,154,48,0.55);
    margin-bottom: 32px;
    opacity: 0;
    animation: fade-up 1s ease both 0.65s;
  }

  /* Main dedication */
  .dedication-main {
    font-size: clamp(1.25rem, 3.5vw, 1.7rem);
    font-style: italic;
    font-weight: 300;
    color: var(--paper-glow);
    line-height: 1.85;
    margin-bottom: 44px;
    opacity: 0;
    animation: fade-up 1.2s ease both 0.85s;
    letter-spacing: 0.01em;
  }

  .dedication-main em {
    font-style: normal;
    color: var(--gold-light);
  }

  /* Mid rule */
  .mid-rule {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, var(--gold-dim), transparent);
    margin: 0 auto 44px;
    opacity: 0;
    animation: fade-up 1s ease both 1.2s;
  }

  /* Secondary text */
  .dedication-secondary {
    font-family: 'Karla', sans-serif;
    font-size: 0.97rem;
    font-weight: 300;
    color: var(--paper-dim);
    line-height: 1.9;
    margin-bottom: 48px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fade-up 1s ease both 1.4s;
  }

  .dedication-secondary strong {
    color: var(--paper-soft);
    font-weight: 500;
  }

  /* Bottom dots */
  .bottom-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fade-up 1s ease both 1.65s;
  }

  .bd { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0.4; }
  .bd.centre { width: 5px; height: 5px; opacity: 0.8; }

  /* Signature */
  .dedication-sig {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(196,154,48,0.4);
    opacity: 0;
    animation: fade-up 1s ease both 1.8s;
  }

  /* Bottom gradient — merges into footer */
  .bottom-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent, rgba(6,14,4,0.8));
    z-index: 4;
    pointer-events: none;
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Responsive */
  @media (max-width: 480px) {
    .section-dedication { padding: 60px 20px; }
    .dedication-main { font-size: 1.15rem; }
  }

  /* Fade-in on scroll */
  .s6-scroll-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
  }
  .s6-scroll-fade.in {
    opacity: 1;
    transform: translateY(0);
  }




  /* ═══ GLOBAL FADE-IN OBSERVER TARGETS ═══ */
  [class*="-fade"], [class*="-pathway"], [class*="-door-card"] {
    will-change: opacity, transform;
  }