/* One colour identity per discipline, shared by the home panels and landing
   heroes. Galleries retain their own paper/ink surfaces and original assets. */
:root {
  --discipline-blue: #086aff;
  --discipline-yellow: #ffd23f;
  --discipline-emerald: #00c67a;
  --discipline-orange: #ff660a;
  --discipline-graphite: #151721;
  /* Original vector lightfields: broad satin folds, saturated light and deep
     shadow. Static gradients only: no shaders, blur filters or render loop. */
  --discipline-web-field: #0749c7 url('assets/discipline-light-blue.svg') center / 100% 100% no-repeat;
  --discipline-logo-field: #ffd23f url('assets/discipline-light-yellow.svg') center / 100% 100% no-repeat;
  --discipline-campaign-field: #f04406 url('assets/discipline-light-orange.svg') center / 100% 100% no-repeat;
  --discipline-tools-field: #008c58 url('assets/discipline-light-emerald.svg?v=3') center / 100% 100% no-repeat;
}
.discipline-web, .websites-page { --discipline-field: var(--discipline-web-field); --discipline-current: var(--discipline-blue); }
.discipline-logos, .logo-gallery-page { --discipline-field: var(--discipline-logo-field); --discipline-current: var(--discipline-yellow); }
.discipline-campaigns, .campaigns-page { --discipline-field: var(--discipline-campaign-field); --discipline-current: var(--discipline-orange); }
.discipline-tools, .tools-page { --discipline-field: var(--discipline-tools-field); --discipline-current: var(--discipline-emerald); }
.discipline-panel { background: var(--discipline-field); }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero {
  background: var(--discipline-field); color: #fffaf4;
}
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero::before,
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero::after { display: none; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero .hero-title,
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero .hero-title .accent { color: #fffaf4; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero .hero-copy { color: #fffaf4; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero .eyebrow { color: #efe1d9; }
/* Pure warm white retains contrast against the restored saturated orange. */
.campaigns-page .showcase-hero .eyebrow { color: #fffaf4; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-actions .button.primary {
  color: #17141b; background: #fffaf4; box-shadow: 0 10px 32px rgba(12,9,18,.16);
}
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-actions .button.secondary {
  color: #fffaf4; background: rgba(15,13,24,.20); border-color: rgba(255,250,244,.58);
}
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-actions .button.primary:hover { background: #e9e1d9; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-actions .button.secondary:hover { background: rgba(15,13,24,.40); }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero a:focus-visible { outline: 2px solid #fffaf4; outline-offset: 5px; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-card {
  background: rgba(17,15,27,.22); border-color: rgba(255,250,244,.32);
  box-shadow: 0 28px 65px rgba(12,9,18,.24);
}
/* Captions remain dark-on-paper within the artwork. */
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .hero-rotator-caption { color: #211924; }
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a.active {
  background: linear-gradient(rgba(16,17,24,.40),rgba(16,17,24,.40)),var(--discipline-field); color: #fffaf4;
}
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a.active span { color: #fffaf4; }
.websites-page .site-links a[aria-current="page"]::after { background: var(--discipline-blue); }
.logo-gallery-page .site-links a[aria-current="page"]::after { background: var(--discipline-yellow); }
.campaigns-page .site-links a[aria-current="page"]::after { background: var(--discipline-orange); }
.tools-page .site-links a[aria-current="page"]::after { background: var(--discipline-emerald); }
/* A single stage governs all four heroes. Media keeps its own aspect ratio
   inside it, so the logo wheel / portrait film cannot change the page height. */
:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero {
  --hero-stage-height: 500px;
  min-height: max(760px, calc(100svh - 28px));
  padding: 132px clamp(1.25rem,5vw,4rem) 96px;
}
.showcase-hero .hero-grid {
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr);
  min-height: 520px; gap: clamp(2rem,4.5vw,4.5rem);
}
.hero-content { min-width: 0; }
.showcase-hero .hero-title {
  font-size: clamp(44px,4.8vw,68px); line-height: 1;
  letter-spacing: -.055em;
}
.showcase-hero .hero-copy { max-width: 540px; font-size: 16px; line-height: 1.75; }
.hero-visual {
  position: relative; display: grid; place-items: center;
  width: 100%; height: var(--hero-stage-height); min-width: 0;
}
.hero-visual .hero-card { width: 100%; max-width: 560px; }
.campaign-hero .hero-visual .hero-card {
  width: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 14;
  padding: 10px; border-radius: 28px;
}
.campaign-hero .hero-visual .hero-card::before { inset: 10px; border-radius: 19px; }
.campaign-hero .hero-visual .hero-card video { min-height: 0; height: 100%; border-radius: 19px; }
.hero-visual .logo-orbit {
  width: 100%; height: 100%; max-width: none; justify-self: center;
}
.hero-visual .logo-orbit-card { width: min(clamp(168px,50%,260px),calc(var(--hero-stage-height) / 2)); }
.showcase-hero .hero-actions .button { min-height: 46px; }
@media (max-width: 980px) {
  :is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero {
    --hero-stage-height: 420px;
    min-height: 0; padding-top: 120px; padding-bottom: 76px;
    /* Only shade the copy, not the artwork below. The lower field retains
       its full colour rather than the old blanket dark overlay. */
    background: linear-gradient(180deg,rgba(6,12,22,.70),rgba(6,12,22,.62) 56%,transparent 80%),var(--discipline-field);
  }
  .showcase-hero .hero-grid {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(440px,auto) var(--hero-stage-height);
    min-height: 0; gap: 32px;
  }
  .hero-content { align-self: center; width: 100%; max-width: 680px; margin: auto; }
  .showcase-hero .hero-title { font-size: clamp(44px,6vw,58px); max-width: 680px; }
  .showcase-hero .hero-copy { max-width: 650px; }
  .hero-visual { max-width: 580px; margin: auto; }
  .hero-visual .logo-orbit-card { width: min(clamp(168px,46%,240px),calc(var(--hero-stage-height) / 2)); }
}
@media (max-width: 600px) {
  :is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .showcase-hero {
    --hero-stage-height: 360px;
    padding-top: 104px; padding-bottom: 68px;
  }
  .showcase-hero .hero-grid { grid-template-rows: minmax(520px,auto) var(--hero-stage-height); gap: 24px; }
  .showcase-hero .hero-title { font-size: clamp(38px,10.6vw,54px); }
  .showcase-hero .hero-copy { font-size: 15px; line-height: 1.7; }
  .showcase-hero .hero-actions { gap: 10px; }
  .hero-visual .hero-card .hero-badge { left: 10px; bottom: 16px; max-width: calc(100% - 20px); padding: .8rem 1rem; }
  .hero-visual .hero-badge b { font-size: 18px; }
  .hero-visual .hero-badge span { font-size: 8px; line-height: 1.5; letter-spacing: 1px; }
  .campaign-hero .hero-visual .hero-rotator-caption { top: 20px; right: -16px; }
  .hero-visual .logo-orbit-card { width: min(clamp(148px,50%,210px),calc(var(--hero-stage-height) / 2)); }
}
@media (max-width: 360px) {
  .showcase-hero .hero-grid { grid-template-rows: minmax(580px,auto) var(--hero-stage-height); }
}
/* Golden yellow is a light material: ink, not white type, keeps it crisp.
   The same unshaded field links the hero, homepage panel and destination tab. */
.logo-gallery-page .showcase-hero { background: var(--discipline-logo-field); color: #282116; }
.logo-gallery-page .showcase-hero .hero-title,
.logo-gallery-page .showcase-hero .hero-title .accent,
.logo-gallery-page .showcase-hero .hero-copy,
.logo-gallery-page .showcase-hero .eyebrow { color: #282116; }
.logo-gallery-page .hero-actions .button.primary { background: #282116; color: #fff8e6; box-shadow: 0 10px 32px #28211618; }
.logo-gallery-page .hero-actions .button.primary:hover { background: #44351b; }
.logo-gallery-page .hero-actions .button.secondary { background: #fff8e624; color: #282116; border-color: #28211680; }
.logo-gallery-page .hero-actions .button.secondary:hover { background: #fff8e662; }
.logo-gallery-page .showcase-hero a:focus-visible { outline-color: #282116; }
.discipline-panel.discipline-logos { color: #282116; }
.discipline-panel.discipline-logos .discipline-shade { background: linear-gradient(180deg,#ffd23f00 25%,#ffd23fd9 100%); }
.discipline-panel.discipline-logos .discipline-number,
.discipline-panel.discipline-logos .discipline-copy small { color: #44351b; }
.discipline-panel.discipline-logos .discipline-copy b { color: #282116; border-color: #28211670; background: #fff8e637; }
.discipline-panel.discipline-logos:focus-visible { outline-color: #282116; }

/* Emerald keeps its saturated light on narrow screens; shade the copy only. */
@media (max-width: 980px) {
  .tools-page .showcase-hero {
    background: linear-gradient(180deg,#003a2a80,#003a2a70 56%,transparent 80%),var(--discipline-tools-field);
  }
}