/* Primary Project Labs - premium finish for the subpages (Partnerships, Founder,
   Shop, Schools & Learning Centres, English and zh-tw).

   Brings the homepage's signature treatment to the pages built after it:
   pictures sit in a calm cream frame that lights up amber and lifts forward
   on hover (the Studio picture on the homepage), and cards rise with a soft
   layered shadow and an amber hairline. Loaded LAST on those pages so it wins
   over each page's inline <style>, gemini-theme.css and shop.css.
   Styling only: no wording, links or prices are touched, so Website Studio
   overrides keep their keys. */

:root {
  --pf-ease: cubic-bezier(.22, .61, .36, 1);
  --pf-amber: #F5A623;
  --pf-cream: #FDFBF7;
  --pf-navy: #1D234A;
  --pf-hair: #E2E8F0;
  /* Layered shadows read as real depth rather than one flat blur. */
  --pf-shadow-rest: 0 1px 2px rgba(29,35,74,.06), 0 8px 20px rgba(29,35,74,.07), 0 24px 48px rgba(29,35,74,.06);
  --pf-shadow-lift: 0 2px 4px rgba(29,35,74,.06), 0 16px 32px rgba(29,35,74,.12), 0 36px 72px rgba(29,35,74,.12);
  --pf-shadow-dark-rest: 0 18px 44px rgba(0,0,0,.28);
  --pf-shadow-dark-lift: 0 26px 60px rgba(0,0,0,.36), 0 0 0 6px rgba(245,166,35,.10);
}

/* =====================================================================
   1. Signature picture frame
   ===================================================================== */

/* Partnerships - "Our experience / Teaching experience". The frame used to be
   navy on a navy band, so it was invisible and nothing reacted to hover. */
html body .experience-band .split-media {
  margin: 0;
  transition: transform .45s var(--pf-ease);
}
html body .experience-band .split-media .framed {
  border: 5px solid var(--pf-cream) !important;
  border-radius: 20px;
  box-shadow: var(--pf-shadow-dark-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease);
}
html body .experience-band .split-media .framed img {
  aspect-ratio: 4 / 3;
  transition: transform .8s var(--pf-ease);
}

/* Partnerships - "Your project" picture */
html body .custom-image {
  margin: 0;
  border: 5px solid var(--pf-navy);
  border-radius: 20px;
  box-shadow: var(--pf-shadow-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body .custom-image img {
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform .8s var(--pf-ease);
}

/* Partnerships - Eco-Base guide excerpt */
html body .proof-media a {
  border: 1px solid var(--pf-hair);
  border-radius: 18px;
  box-shadow: var(--pf-shadow-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}

/* Shop - the picture beside "A little curiosity. A world to discover." */
html body .shop-welcome {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
}
html body .shop-welcome-image {
  aspect-ratio: 5 / 4;
  border: 5px solid #FFFFFF;
  border-radius: 22px;
  box-shadow: var(--pf-shadow-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body .shop-welcome-image img { transition: transform .8s var(--pf-ease); }
html body .shop-welcome-image figcaption { letter-spacing: .16em; }

/* Shop - the four grade collections */
html body .shop-collection-grid .collection-card-image {
  border: 4px solid #FFFFFF;
  border-radius: 16px;
  box-shadow: var(--pf-shadow-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body .shop-collection-grid .collection-card-image img { transition: transform .8s var(--pf-ease); }

/* Shop - Tailor-Made row */
html body .tailor-collection {
  box-shadow: var(--pf-shadow-rest);
  transition: box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body .tailor-collection .collection-card-image img { transition: transform .8s var(--pf-ease); }

/* Schools - hero picture */
html body.refined-subpage .subpage-media {
  border: 5px solid var(--pf-cream);
  border-radius: 20px;
  box-shadow: var(--pf-shadow-dark-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body.refined-subpage .subpage-media img {
  height: 330px;
  transition: transform .8s var(--pf-ease);
}

/* Founder - carousel frame */
html body .fc-frame {
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease);
}

/* Hover only where a real pointer hovers, so touch screens never stick. */
@media (hover: hover) and (pointer: fine) {
  html body .experience-band .split-media:hover { transform: translateY(-6px) scale(1.02); }
  html body .experience-band .split-media:hover .framed {
    border-color: var(--pf-amber) !important;
    box-shadow: var(--pf-shadow-dark-lift);
  }

  html body .custom-image:hover,
  html body .shop-welcome-image:hover,
  html body.refined-subpage .subpage-media:hover {
    border-color: var(--pf-amber);
    transform: translateY(-6px) scale(1.015);
  }
  html body .custom-image:hover,
  html body .shop-welcome-image:hover { box-shadow: var(--pf-shadow-lift), 0 0 0 6px rgba(245,166,35,.10); }
  html body.refined-subpage .subpage-media:hover { box-shadow: var(--pf-shadow-dark-lift); }

  html body .experience-band .split-media:hover .framed img,
  html body .custom-image:hover img,
  html body .shop-welcome-image:hover img,
  html body.refined-subpage .subpage-media:hover img,
  html body .tailor-collection:hover .collection-card-image img,
  html body .shop-collection-grid .collection-card:hover .collection-card-image img { transform: scale(1.05); }

  html body .proof-media a:hover {
    border-color: var(--pf-amber);
    box-shadow: var(--pf-shadow-lift);
    transform: translateY(-5px);
  }

  html body .shop-collection-grid .collection-card:hover .collection-card-image {
    border-color: var(--pf-amber);
    box-shadow: var(--pf-shadow-lift);
    transform: translateY(-6px);
  }

  html body .tailor-collection:hover {
    transform: translateY(-5px);
    box-shadow: var(--pf-shadow-lift), 0 0 0 2px rgba(245,166,35,.75);
  }

  html body .fc-frame:hover {
    border-color: var(--pf-amber) !important;
    box-shadow: var(--pf-shadow-dark-lift);
  }
}

/* =====================================================================
   2. Cards: soft layered depth, amber hairline, rise on hover
   ===================================================================== */

/* Partnerships - "Who we work with" */
html body .opportunity {
  border-top: 0;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--pf-shadow-rest);
  padding: 1.6rem 1.45rem 1.5rem;
  transition: transform .4s var(--pf-ease), box-shadow .4s var(--pf-ease), border-color .3s var(--pf-ease);
}
html body .opportunity::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pf-amber);
}
html body .opportunity ul li::marker { color: var(--pf-amber); }

/* Partnerships - "How we work" four steps */
html body .process-strip {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--pf-shadow-rest);
}
html body .process-step {
  position: relative;
  transition: background-color .35s var(--pf-ease);
}
html body .process-step::after {
  content: "";
  position: absolute;
  left: clamp(1.45rem, 3vw, 2.1rem);
  right: clamp(1.45rem, 3vw, 2.1rem);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pf-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--pf-ease);
}

/* Partnerships - "Our design work" list */
html body .service-item {
  position: relative;
  background-image: linear-gradient(var(--pf-amber), var(--pf-amber));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .55s var(--pf-ease);
}
html body .service-no { transition: transform .4s var(--pf-ease); }
html body .chip-list li { transition: border-color .25s var(--pf-ease), background-color .25s var(--pf-ease); }

/* Partnerships - custom theme tiles and the two large white panels */
html body .custom-themes li {
  transition: border-color .25s var(--pf-ease), background-color .25s var(--pf-ease), transform .3s var(--pf-ease), box-shadow .3s var(--pf-ease);
}
html body .custom-panel {
  border-radius: 24px;
  box-shadow: var(--pf-shadow-rest);
}
html body .custom-panel .eyebrow { color: var(--pf-amber) !important; }

/* Schools - the four information cards: calmer, smaller headings, one amber rule */
html body.refined-subpage .landing-grid { gap: clamp(1.25rem, 2.4vw, 1.75rem); }
/* The Schools sections stacked two full paddings between cards; keep one calm gap. */
html body.refined-subpage main > .landing,
html body.refined-subpage main > .section { padding-block: clamp(2rem, 4vw, 3rem) !important; }
html body.refined-subpage main > .landing-hero + .landing { padding-top: clamp(3rem, 5vw, 4rem) !important; }
html body.refined-subpage .panel {
  position: relative;
  overflow: hidden;
  background: #FFFFFF !important;
  border: 1px solid var(--pf-hair) !important;
  border-top: 1px solid var(--pf-hair) !important;
  border-radius: 20px !important;
  padding: clamp(1.5rem, 2.6vw, 2.15rem) !important;
  box-shadow: var(--pf-shadow-rest) !important;
  transition: transform .4s var(--pf-ease), box-shadow .4s var(--pf-ease), border-color .3s var(--pf-ease);
}
html body.refined-subpage .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pf-amber);
}
html body.refined-subpage .panel .kicker { color: var(--pf-amber) !important; margin-bottom: .5rem; }
html body.refined-subpage .panel h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem) !important;
  line-height: 1.15;
  margin: 0 0 1rem;
}
html body.refined-subpage .panel .list-clean { gap: .7rem; padding-left: 1.1rem; margin: 0; }
html body.refined-subpage .panel .list-clean li::marker { color: var(--pf-amber); }

/* Schools - closing "Discuss your school" panel: navy gradient, no stacked borders,
   button at its natural width rather than stretched across the panel */
html body.refined-subpage .panel.cta-panel {
  background: linear-gradient(135deg, #1D234A, #2A3166) !important;
  border: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title button" "text button";
  column-gap: 2.5rem;
  align-items: center;
  padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.5rem, 3.4vw, 3rem) !important;
  box-shadow: 0 24px 60px rgba(29,35,74,.22) !important;
}
html body.refined-subpage .panel.cta-panel::before { height: 3px; }
html body.refined-subpage .panel.cta-panel h2 { grid-area: title; margin-bottom: .45rem; }
html body.refined-subpage .panel.cta-panel p { grid-area: text; margin: 0; color: rgba(253,251,247,.82) !important; }
html body.refined-subpage .panel.cta-panel .btn { grid-area: button; justify-self: end; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  html body .opportunity:hover,
  html body.refined-subpage .panel:not(.cta-panel):hover {
    transform: translateY(-8px);
    box-shadow: var(--pf-shadow-lift) !important;
    border-color: rgba(245,166,35,.55) !important;
  }
  html body .process-step:hover { background-color: #FFFDF8; }
  html body .process-step:hover::after { transform: scaleX(1); }
  html body .service-item:hover { background-size: 100% 2px; }
  html body .service-item:hover .service-no { transform: translateX(6px); }
  html body .chip-list li:hover { border-color: var(--pf-amber); background-color: #FFF8EA; }
  html body .custom-themes li:hover {
    background-color: #FFFFFF;
    border-color: var(--pf-amber);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(29,35,74,.08);
  }
  html body .country-line li { transition: background-color .25s var(--pf-ease), border-color .25s var(--pf-ease); }
  html body .country-line li:hover { background-color: rgba(245,166,35,.14); border-color: var(--pf-amber); }
}

/* Keyboard users get the same lift as a hover. */
html body .shop-collection-grid .collection-card:focus-visible .collection-card-image,
html body .proof-media a:focus-visible {
  border-color: var(--pf-amber);
  box-shadow: var(--pf-shadow-lift);
}

/* =====================================================================
   3. Small screens and reduced motion
   ===================================================================== */

@media (max-width: 850px) {
  html body .shop-welcome { grid-template-columns: 1fr; }
  html body.refined-subpage .subpage-media img { height: 230px; }
  html body.refined-subpage .panel.cta-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "text" "button";
    row-gap: .9rem;
  }
  html body.refined-subpage .panel.cta-panel .btn { justify-self: stretch; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html body .experience-band .split-media,
  html body .custom-image,
  html body .proof-media a,
  html body .shop-welcome-image,
  html body .shop-collection-grid .collection-card-image,
  html body .tailor-collection,
  html body.refined-subpage .subpage-media,
  html body .opportunity,
  html body.refined-subpage .panel,
  html body .custom-themes li,
  html body .service-no,
  html body .experience-band .split-media .framed img,
  html body .custom-image img,
  html body .shop-welcome-image img,
  html body .collection-card-image img,
  html body.refined-subpage .subpage-media img { transition: none !important; transform: none !important; }
}

/* =====================================================================
   4. Homepage - match the subpages (index.html and zh-tw/index.html)
   ===================================================================== */

/* Cards keep their existing lift; they gain the layered depth and an amber
   ring on hover. gemini-theme.css sets these shadows with !important. */
html body .grade-card,
html body .serve-card,
html body #insights .arc-sheet {
  box-shadow: var(--pf-shadow-rest) !important;
  transition: transform .4s var(--pf-ease), box-shadow .4s var(--pf-ease) !important;
}
html body .projects .grade-card,
html body .band-navy .grade-card { box-shadow: var(--pf-shadow-dark-rest) !important; }

/* "Selected work" - the three pictures used to sit flat and only dim. */
html body .portfolio-media {
  border-radius: 16px;
  box-shadow: var(--pf-shadow-rest);
  transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease), transform .45s var(--pf-ease);
}
html body .portfolio-media img { transition: transform .8s var(--pf-ease), filter .3s var(--pf-ease); }

/* Portal video preview frame */
html body .lab-preview .framed { transition: border-color .3s var(--pf-ease), box-shadow .45s var(--pf-ease); }

@media (hover: hover) and (pointer: fine) {
  html body .grade-card:hover,
  html body .serve-card:hover,
  html body #insights .arc-sheet:hover {
    box-shadow: var(--pf-shadow-lift), 0 0 0 2px var(--pf-amber) !important;
  }
  html body .projects .grade-card:hover,
  html body .band-navy .grade-card:hover {
    box-shadow: var(--pf-shadow-dark-lift), 0 0 0 2px var(--pf-amber) !important;
  }
  html body .grade-card.is-tailor:hover { transform: translateY(-6px) !important; }

  html body .portfolio-media:hover {
    border-color: var(--pf-amber);
    box-shadow: var(--pf-shadow-lift), 0 0 0 1px var(--pf-amber);
    transform: translateY(-6px);
  }
  html body .portfolio-media:hover img { filter: none; transform: scale(1.04); }

  html body .lab-preview .zoom-btn:hover .framed,
  html body .lab-preview:hover .framed { border-color: var(--pf-amber); box-shadow: var(--pf-shadow-lift); }

  html body #founder .split-media:hover .framed { border-color: var(--pf-amber) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .portfolio-media,
  html body .portfolio-media img { transition: none !important; transform: none !important; }
}