:root {
  color-scheme:light;
  --paper:#faf9f7;
  --ink:#080d16;
  --muted:#6f7b92;
  --blue:#315fae;
  --line:#d8d9dc;
  --gutter:clamp(24px,3.8vw,72px);
  --support-font-size:16px;
}

* {
  box-sizing:border-box;
}

html {
  background:var(--paper);
}

body {
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 77% 45%,#eeece8 0%,#f8f7f5 35%,var(--paper) 65%);
  min-width:320px;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:6px;
}

.site-header {
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5;
}

.header-inner {
  max-width:1920px;
  margin:auto;
  min-height:76px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand {
  display:flex;
  align-items:baseline;
  gap:18px;
  white-space:nowrap;
}

.brand-name {
  font-size:28px;
  font-weight:600;
  letter-spacing:-1.4px;
}


.brand-signature {
  font-size:var(--support-font-size);
  font-weight:400;
  letter-spacing:normal;
  line-height:1.65;
  color:var(--muted);
}

.navigation {
  display:flex;
  gap:34px;
  align-items:center;
}

.navigation :is(button,a) {
  position:relative;
  padding:12px 0;
  border:0;
  background:none;
  font-size:14px;
  transition:color .2s;
  isolation:isolate;
  --glow-low:0 0 5px 1px rgb(49 111 214 / 12%),0 0 12px 2px rgb(49 111 214 / 6%);
  --glow-high:0 0 12px 2px rgb(49 111 214 / 35%),0 0 25px 4px rgb(49 111 214 / 22%);
}

/* Size the halo to the label, independently of the full-width mobile tap target. */
.navigation-label {
  display:inline-block;
  position:relative;
  isolation:isolate;
}

.navigation-label::before {
  content:"";
  position:absolute;
  inset:-7px -10px;
  border-radius:8px;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  background:rgb(49 111 214 / 16%);
  box-shadow:var(--glow-low);
  transition:opacity .45s ease;
}

.navigation :is(button,a):hover .navigation-label::before,.navigation :is(button,a):focus-visible .navigation-label::before,
.coming-soon-contact a:hover .navigation-label::before,.coming-soon-contact a:focus-visible .navigation-label::before {
  opacity:1;
  animation:cta-glow 2.8s ease-in-out infinite;
}

.navigation :is(button,a)::after {
  content:"";
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}

.navigation :is(button,a):hover,.navigation :is(button,a):focus-visible {
  color:var(--blue);
}

.navigation :is(button,a):hover::after,.navigation :is(button,a):focus-visible::after {
  transform:scaleX(1);
}

.menu-toggle {
  display:none;
}

main {
  max-width:1920px;
  margin:auto;
  padding:0 var(--gutter) 30px;
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  column-gap:24px;
  align-items:center;
  min-height:min(820px,calc(100svh - 124px));
  padding:32px 0;
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:20px 0 34px;
  animation:copy-enter .85s ease both;
}

.eyebrow,.tagline {
  font-size:12px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:3.7px;
  text-transform:uppercase;
  color:var(--blue);
}

.eyebrow {
  margin:0 0 26px;
}

h1 {
  font-size:clamp(46px,4.65vw,88px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:1.1;
  margin:0 0 28px;
}

h1 span {
  display:block;
  white-space:normal;
}

.description {
  margin:0;
  color:var(--muted);
  font-size:clamp(18px,1.52vw,27px);
  line-height:1.5;
  letter-spacing:-.45px;
  width:100%;
  max-width:660px;
}

.course-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:linear-gradient(145deg,#111823,#080d14);
  border:1px solid #111823;
  border-radius:100px;
  margin-top:34px;
  padding:18px 29px;
  color:#fff;
  font-size:clamp(16px,1.23vw,21px);
  box-shadow:inset 0 1px 1px #ffffff0c;
  position:relative;
  isolation:isolate;
  --glow-low:0 0 16px 3px rgb(49 111 214 / 22%),0 0 30px 6px rgb(49 111 214 / 12%);
  --glow-high:0 0 25px 8px rgb(49 111 214 / 65%),0 0 60px 15px rgb(49 111 214 / 38%);
}

.course-cta svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
}

.course-cta::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity .45s ease;
  box-shadow:var(--glow-low);
}

.course-cta:hover::before,.course-cta:focus-visible::before {
  opacity:1;
  animation:cta-glow 2.8s ease-in-out infinite;
}

@keyframes cta-glow {
  0%,100% {
    box-shadow:var(--glow-low);
  }
  50% {
    box-shadow:var(--glow-high);
  }
}

.tagline {
  margin:40px 0 0;
  letter-spacing:3px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
}

.course-artwork {
  margin:0;
  position:relative;
  z-index:1;
  animation:art-enter 1.1s .15s ease both;
}

.course-artwork img {
  display:block;
  width:100%;
  height:auto;
}

.bottom-divider {
  height:1px;
  background:var(--line);
}

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

@keyframes art-enter {
  from {
    opacity:0;
    transform:translateY(17px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1700px) {
  .hero {
    min-height:calc(100svh - 124px);
    max-height:1080px;
  }
  .course-artwork {
    max-width:1120px;
  }
}

@media(max-width:1150px) {
  .header-inner {
    min-height:72px;
  }
  .brand-name {
    font-size:25px;
  }
  .brand {
    gap:12px;
  }

  .navigation {
    gap:26px;
  }
  .hero {
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    min-height:680px;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:2.8px;
  }
  h1 {
    font-size:clamp(44px,4.65vw,58px);
  }
  .description {
    font-size:19px;
    max-width:470px;
  }
  .desktop-break {
    display:none;
  }
  .course-artwork {
    margin-left:0;
    margin-right:0;
  }
  .tagline {
    font-size:10px;
    letter-spacing:2.3px;
    gap:10px;
  }
}

@media(max-width:1100px) {
  .brand {
    gap:10px;
  }
  .brand-name {
    font-size:24px;
  }

  .navigation {
    gap:22px;
  }
  .navigation :is(button,a) {
    font-size:12px;
  }
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:65px;
  }
  .hero-copy {
    padding:0;
    max-width:680px;
  }
  h1 {
    font-size:clamp(54px,7.4vw,72px);
  }
  .description {
    width:auto;
    max-width:570px;
    font-size:23px;
  }
  .eyebrow {
    font-size:12px;
  }
  .tagline {
    font-size:12px;
    letter-spacing:2.8px;
  }
  .course-artwork {
    width:90%;
    max-width:740px;
    justify-self:end;
    margin:20px 0 0;
  }
  .bottom-divider {
    margin-top:10px;
  }
}

@media(max-width:650px) {
  :root {
    --gutter:24px;
  }
  .header-inner {
    min-height:80px;
    gap:12px;
  }
  .brand {
    gap:9px;
  }
  .brand-name {
    font-size:22px;
    letter-spacing:-1.1px;
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:36px;
    height:40px;
    padding:7px;
    border:0;
    background:transparent;
    flex-shrink:0;
  }
  .menu-toggle span {
    display:block;
    width:22px;
    height:1px;
    background:var(--ink);
    transition:transform .25s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg);
  }
  .navigation {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    padding:14px var(--gutter) 20px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 25px #10152008;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s,transform .2s,visibility .2s;
  }
  .navigation.is-open {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .navigation :is(button,a) {
    font-size:16px;
    text-align:left;
    padding:13px 0;
  }
  .navigation :is(button,a)::after {
    right:auto;
    width:32px;
    bottom:8px;
  }
  .hero {
    padding:48px 0 16px;
  }
  .hero-copy {
    text-align:center;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:2.6px;
    margin-bottom:24px;
  }
  h1 {
    font-size:clamp(35px,8.6vw,55px);
    letter-spacing:-.055em;
    line-height:1.13;
    margin-bottom:24px;
  }
  .description {
    font-size:18px;
    line-height:1.55;
    max-width:430px;
    margin-inline:auto;
    letter-spacing:-.3px;
  }
  .course-cta {
    font-size:15px;
    gap:17px;
    padding:17px 23px;
    margin-top:28px;
  }
  .course-cta svg {
    width:24px;
  }
  .tagline {
    margin-top:32px;
    justify-content:center;
    font-size:9px;
    letter-spacing:2px;
    gap:9px;
  }
  .course-artwork {
    width:100%;
    max-width:none;
    justify-self:center;
    margin:36px 0 0;
  }
  .bottom-divider {
    margin-top:8px;
  }
  main {
    padding-bottom:24px;
  }
}

@media(max-width:360px) {
  :root {
    --gutter:20px;
  }
  .brand-name {
    font-size:20px;
  }

  .brand {
    gap:7px;
  }
  .tagline {
    font-size:8px;
    letter-spacing:1.6px;
  }
  .course-cta {
    padding-left:20px;
    padding-right:20px;
  }
  h1 {
    font-size:8.5vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .course-cta::before,.navigation-label::before {
    box-shadow:var(--glow-low);
  }
}

@media(min-width:1101px) {
  .course-artwork img {
    max-height:min(740px,calc(100svh - 160px));
    object-fit:contain;
    object-position:right center;
  }
}
/* Let the course composition keep its visual weight on wider screens. */
@media (min-width: 1700px) {
  .course-artwork img {
    max-height: min(1000px, calc(100svh - 200px));
  }
}



/* A compact, centered message beneath the opening experience. */
.coming-soon {
  padding:48px 0 28px;
  text-align:center;
}
.coming-soon h2 {
  margin:0 0 16px;
  font-size:clamp(26px,2.4vw,36px);
  font-weight:600;
  letter-spacing:-1.2px;
  line-height:1.15;
}
.coming-soon-message {
  max-width:540px;
  margin:0 auto;
  color:var(--muted);
  font-size:var(--support-font-size);
  line-height:1.65;
}
.coming-soon-name {
  margin:24px 0 0;
  font-size:14px;
  line-height:1.7;
}
.coming-soon-name > span[aria-hidden] {
  margin:0 6px;
  color:var(--muted);
}
.coming-soon-signature {
  color:var(--muted);
}
.coming-soon-contact {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 24px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.coming-soon-contact a {
  display:inline-block;
  position:relative;
  isolation:isolate;
  --glow-low:0 0 5px 1px rgb(49 111 214 / 12%),0 0 12px 2px rgb(49 111 214 / 6%);
  --glow-high:0 0 12px 2px rgb(49 111 214 / 35%),0 0 25px 4px rgb(49 111 214 / 22%);
  color:var(--blue);
  font-size:14px;
  line-height:1.6;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
  overflow-wrap:anywhere;
  transition:text-decoration-color .2s;
}
.coming-soon-contact a:hover {
  text-decoration-color:currentColor;
}
.coming-soon-contact a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px;
  border-radius:2px;
}
@media(max-width:650px) {
  .coming-soon {
    padding:36px 0 16px;
  }
  :root {
    --support-font-size:15px;
  }
}

@media(max-width:480px) {
  .brand {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
}

/* Course approach and delivery options. */
.approach-section,.delivery-section {padding:42px 0 32px;scroll-margin-top:24px;}
.approach-section h2,.delivery-section h2,.contact-banner h2 {margin:0;font-size:clamp(30px,3.5vw,54px);font-weight:600;line-height:1.12;letter-spacing:-.045em;}
.approach-section .eyebrow,.delivery-section .eyebrow {margin-bottom:16px;font-size:11px;letter-spacing:2.8px;}
.approach-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:34px 0 0;}
.approach-steps li {border-left:1px solid var(--line);padding:0 0 0 30px;}
.step-number {color:#3184f5;font-size:22px;line-height:1.4;}
.approach-steps h3 {font-size:22px;letter-spacing:-.7px;font-weight:500;line-height:1.25;margin:3px 0 12px;}
.approach-steps p {color:var(--muted);font-size:17px;line-height:1.6;max-width:330px;margin:0;}
.delivery-section {border-top:1px solid var(--line);padding-top:32px;}
.delivery-heading {display:flex;align-items:center;justify-content:space-between;gap:28px;}
.delivery-heading p {color:var(--muted);font-size:14px;line-height:1.5;margin:0;}
.delivery-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px;}
.delivery-grid h3 {font-size:16px;font-weight:500;letter-spacing:-.4px;margin:14px 0 5px;}
.delivery-grid > article > p {font-size:13px;color:var(--muted);line-height:1.5;margin:0;}
.format-preview {aspect-ratio:1.8;background:linear-gradient(130deg,#eae9e7,#f0efed);border-radius:8px;position:relative;overflow:hidden;padding:20px 18px 0;}
.mini-browser {background:#fff;border-radius:10px 10px 0 0;box-shadow:0 8px 25px #15192312;height:110%;overflow:hidden;}
.browser-toolbar {display:flex;align-items:center;justify-content:space-between;padding:10px;font-size:8px;border-bottom:1px solid #eee;}
.browser-toolbar span {color:#408eff;letter-spacing:2px;}
.browser-toolbar small {font-size:6px;}
.browser-content {display:flex;height:100%;}
.mini-sidebar {width:23%;background:#f8f9fb;padding:10px;flex-shrink:0;}
.mini-sidebar i,.mini-course i,.pdf-page i {display:block;height:4px;border-radius:3px;background:#dfe2e7;margin-bottom:7px;}
.mini-sidebar i:first-child {height:13px;background:#cfe1ff;}
.mini-course {position:relative;padding:20px 12px;width:77%;overflow:hidden;}
.mini-course strong {display:block;font-size:clamp(12px,1.45vw,22px);letter-spacing:-.5px;line-height:1.1;position:relative;z-index:1;}
.mini-course small {display:block;font-size:7px;margin:9px 0;}
.mini-course i {width:50%;}
.mini-course b {display:block;width:40px;height:13px;background:#3184f5;border-radius:9px;margin-top:10px;}
.mini-course img {position:absolute;right:-15%;bottom:12%;width:70%;height:85%;object-fit:cover;transform:rotate(-24deg);opacity:.85;border-radius:50% 0 0 0;}
.pdf-preview {display:flex;align-items:flex-start;justify-content:center;padding-top:22px;}
.pdf-page {background:#fff;width:51%;height:120%;padding:16px;box-shadow:0 4px 16px #121a2212;}
.pdf-page small {display:block;color:#3184f5;font-size:7px;margin-bottom:14px;}
.pdf-page strong {display:block;font-size:clamp(12px,1.4vw,21px);letter-spacing:-.5px;line-height:1.15;margin-bottom:15px;}
.pdf-page img {width:100%;height:auto;margin-bottom:12px;}
.front-page {transform:rotate(-5deg);position:relative;z-index:1;}
.back-page {position:absolute;right:15%;transform:rotate(6deg);top:30px;}
.code-lines {padding:16px 10px;background:#101924;margin-bottom:18px;}
.code-lines i {background:#64798c;height:3px;}
.pdf-note {color:#527391;font-size:11px;background:#e8f1fa;padding:16px 8px;}
.mini-tablet {background:#fff;border:9px solid #0b0e12;border-radius:18px;height:125%;box-shadow:0 3px 5px #141b2340;overflow:hidden;}
.reader-toolbar {padding:9px 8px;border-bottom:1px solid #eee;font-size:7px;display:flex;justify-content:space-between;}
.reader-content {display:flex;height:100%;}
.reader-sidebar {width:40%;font-size:7px;line-height:3;padding:8px;background:#f9fafc;}
.reader-sidebar b {display:block;background:#e2edff;color:#315fae;font-weight:400;white-space:nowrap;}
.reader-lesson {padding:12px 10px;width:60%;}
.reader-lesson small {font-size:6px;}
.reader-lesson strong {display:block;font-size:clamp(12px,1.35vw,20px);letter-spacing:-.5px;margin:8px 0;}
.reader-lesson p {font-size:7px;line-height:1.45;color:var(--muted);margin:0 0 10px;}
.reader-lesson img {width:100%;height:auto;}
.contact-banner {margin:40px calc(-1 * var(--gutter)) 0;padding:36px var(--gutter);background:#0b1119 url('../assets/images/learning-waves.svg') right bottom / 75% auto no-repeat;color:#fff;position:relative;scroll-margin-top:20px;}
.contact-banner > div {position:relative;z-index:1;}
.contact-banner h2 {font-size:clamp(30px,3vw,48px);}
.contact-banner p {font-size:17px;line-height:1.5;margin:10px 0 0;color:#e3e7ec;}
.light-cta {background:#fff;color:var(--ink);border-color:#fff;text-decoration:none;font-size:15px;padding:14px 24px;margin-top:18px;}
.site-footer {max-width:1920px;margin:auto;padding:22px var(--gutter);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;}
.site-footer > span {font-size:18px;font-weight:600;letter-spacing:-.6px;}
.site-footer .tagline {margin:0;font-size:9px;letter-spacing:2px;gap:10px;}
@media(max-width:1100px) {
 .approach-steps {gap:24px;}
 .approach-steps li {padding-left:20px;}
 .approach-steps h3 {font-size:20px;}
 .approach-steps p {font-size:16px;}
 .delivery-heading {align-items:flex-start;flex-direction:column;gap:12px;}
 .format-preview {padding:14px 12px 0;}
 .pdf-page {padding:12px;}
}
@media(max-width:650px) {
 .approach-section,.delivery-section {padding:32px 0;}
 .approach-steps {grid-template-columns:1fr;gap:24px;margin-top:28px;}
 .approach-steps li {padding-left:20px;}
 .approach-steps h3 {font-size:21px;}
 .approach-steps p {max-width:none;}
 .delivery-grid {grid-template-columns:1fr;gap:28px;}
 .format-preview {padding:22px 22px 0;}
 .mini-course strong,.pdf-page strong {font-size:22px;}
 .reader-lesson strong {font-size:20px;}
 .reader-sidebar {font-size:9px;}
 .reader-toolbar {font-size:8px;}
 .reader-lesson p,.mini-course small {font-size:9px;}
 .pdf-page {padding:18px;}
 .contact-banner {margin-top:12px;padding-block:36px;text-align:center;background-size:170% auto;}
 .contact-banner p {font-size:16px;}
 .site-footer {flex-direction:column;gap:14px;text-align:center;}
}
/* Keep the preview artwork clear of the course title and banner copy. */
.mini-course img {height:55%;bottom:0;}
.contact-banner {background-image:linear-gradient(90deg,#0b1119 0%,#0b1119ed 40%,#0b111955 75%),url('../assets/images/learning-waves.svg');}
@media(max-width:650px) {
 .format-preview {aspect-ratio:1.65;}
 .pdf-page strong {font-size:17px;}
 .reader-lesson strong {font-size:17px;}
}

/* Match the existing pulsing blue highlight on the delivery cards. */
.delivery-grid > article,.approach-steps > li {
  position:relative;
  isolation:isolate;
  border-radius:10px;
  --glow-low:0 0 8px 1px rgb(49 111 214 / 14%),0 0 18px 3px rgb(49 111 214 / 8%);
  --glow-high:0 0 16px 3px rgb(49 111 214 / 40%),0 0 32px 6px rgb(49 111 214 / 24%);
}
.delivery-grid > article::before,.approach-steps > li::before {
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border-radius:14px;
  background:rgb(49 111 214 / 8%);
  box-shadow:var(--glow-low);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine) {
  .delivery-grid > article:hover::before,.approach-steps > li:hover::before {
    opacity:1;
    animation:cta-glow 2.8s ease-in-out infinite;
  }
}
.delivery-grid > article:focus-visible,.approach-steps > li:focus-visible {outline:2px solid var(--blue);outline-offset:8px;}
.delivery-grid > article:focus-visible::before,.approach-steps > li:focus-visible::before {opacity:1;animation:cta-glow 2.8s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce) {
  .delivery-grid > article::before,.approach-steps > li::before {box-shadow:var(--glow-low);}
}

.delivery-grid > article,.approach-steps > li {cursor:pointer;}
.card-details {
  position:fixed;
  inset:auto;
  margin:0;
  width:min(420px,calc(100vw - 32px));
  padding:0;
  overflow:visible;
  border:1px solid #cbd7e8;
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 14px 48px rgb(13 32 61 / 18%),0 0 20px rgb(49 111 214 / 12%);
  transform-origin:var(--pointer-x,50%) bottom;
}
.card-details:popover-open {animation:details-enter .28s ease both;}
.card-details::before {
  content:"";
  position:absolute;
  width:16px;height:16px;
  left:calc(var(--pointer-x,50%) - 8px);
  bottom:-9px;
  background:var(--paper);
  border-right:1px solid #cbd7e8;
  border-bottom:1px solid #cbd7e8;
  transform:rotate(45deg);
}
.card-details[data-side="below"] {transform-origin:var(--pointer-x,50%) top;}
.card-details[data-side="below"]::before {top:-9px;bottom:auto;transform:rotate(225deg);}
.details-dismiss {
  position:absolute;right:10px;top:10px;
  width:36px;height:36px;border:0;border-radius:8px;
  background:transparent;display:grid;place-items:center;color:var(--muted);
}
.details-dismiss:hover {background:#e5edfa;color:var(--blue);}
.details-dismiss:focus-visible {outline:2px solid var(--blue);outline-offset:1px;}
.details-dismiss svg {fill:none;stroke:currentColor;stroke-width:1.5;}
.details-scroll {overflow-y:auto;overscroll-behavior:contain;max-height:inherit;min-height:140px;padding:58px 28px 28px;border-radius:16px;}
.details-scroll p {margin:0;font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1.3;}
@keyframes details-enter {from {opacity:0;transform:scale(.94);}to {opacity:1;transform:scale(1);}}

/* Local hero experiment: real course artwork in a shared learning-material frame. */
.real-artwork {perspective:1600px;}
.real-course-composition {position:relative;aspect-ratio:1.05; width:100%;}
.real-learning-card {position:absolute;padding:clamp(8px,1.1vw,18px);background:linear-gradient(135deg,#fff,#fafaf9);border:1px solid #fff;border-radius:15px;box-shadow:2px 3px 2px #252a3330,0 18px 35px #252a3320;}
.learning-card-header {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:clamp(8px,.65vw,12px);line-height:1.4;color:#5f6e86;margin:0 0 10px;}
.lesson-marker {display:block;flex-shrink:0;width:24px;height:4px;background:#3184f5;border-radius:4px;margin-right:auto;}
.real-artwork .real-learning-card img {width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;display:block;border-radius:7px;}
.workflow-card {left:1%;top:2%;width:40%;transform:rotate(-5deg);z-index:1;}
.coordinator-card {right:2%;top:10%;width:41%;transform:rotate(5deg);z-index:2;}
.experience-card {left:3%;bottom:4%;width:31%;transform:rotate(-7deg);z-index:3;}
.ai-card {left:28%;top:20%;width:40%;transform:rotate(-1deg);z-index:4;}
.workspace-card {right:0;bottom:1%;width:64%;transform:rotate(-4deg);z-index:5;}
@media(max-width:1100px) {
 .real-artwork {width:94%;max-width:740px;justify-self:center;margin-top:48px;}
 .real-learning-card {padding:14px;}
 .learning-card-header {font-size:10px;}
}
@media(max-width:650px) {
 .real-artwork {width:100%;margin-top:40px;}
 .real-course-composition {aspect-ratio:auto;padding:0 12px 24px;}
 .workflow-card,.coordinator-card,.experience-card {display:none;}
 .ai-card {position:relative;left:auto;top:auto;width:88%;margin:0 auto;transform:rotate(-3deg);padding:14px;}
 .workspace-card {position:relative;right:auto;bottom:auto;width:100%;margin:-16px 0 0;transform:rotate(2deg);}
 .learning-card-header {font-size:10px;}
}

/* Readable course website information inside the anchored panel. */
.details-copy h3 {font-size:25px;font-weight:600;line-height:1.15;letter-spacing:-.8px;margin:0 0 18px;}
.details-scroll .details-copy p {font-size:15px;font-weight:400;line-height:1.6;letter-spacing:normal;margin:0 0 16px;color:var(--muted);}
.details-copy ul {margin:0 0 20px;padding-left:20px;font-size:15px;line-height:1.6;color:var(--muted);}
.details-copy li {margin-bottom:12px;padding-left:3px;}
.details-copy li::marker {color:var(--blue);}
.details-copy strong {color:var(--ink);font-weight:600;}
.details-scroll .details-copy p:last-child {margin-bottom:0;}

.navigation a {text-decoration:none;color:inherit;}
a.course-cta {text-decoration:none;}
a:focus-visible {outline:2px solid var(--blue);outline-offset:6px;}

/* Lesson illustrations cropped into the original delivery previews. */
.website-preview .mini-course img {position:relative;right:auto;bottom:auto;width:100%;height:155px;object-fit:cover;object-position:center 35%;transform:none;opacity:1;border-radius:5px;margin-top:10px;}
.website-preview .mini-course {padding:14px 12px;}
.website-preview .mini-course strong {font-size:clamp(12px,1.2vw,18px);}
.website-preview .mini-course small {margin:7px 0;}
.website-preview .mini-course i,.website-preview .mini-course b {display:none;}
.pdf-preview .front-page img {width:100%;height:145px;object-fit:cover;object-position:center 40%;border-radius:4px;}
.pdf-preview .front-page strong {font-size:clamp(12px,1.2vw,18px);margin-bottom:10px;}
.pdf-preview .front-page small {margin-bottom:10px;}
.reader-preview .reader-lesson img {width:100%;height:145px;object-fit:cover;object-position:center 40%;border-radius:4px;}

/* Match the PDF document frame to the neighboring delivery previews. */
.pdf-preview {display:block;padding:20px 18px 0;}
.pdf-preview .back-page {display:none;}
.pdf-preview .front-page {width:100%;height:110%;transform:none;border-radius:10px 10px 0 0;padding:14px 12px;overflow:hidden;box-shadow:0 8px 25px #15192312;}
.pdf-preview .front-page small {font-size:7px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eee;}
.pdf-preview .front-page strong {font-size:clamp(12px,1.2vw,18px);line-height:1.1;margin-bottom:10px;}
.pdf-preview .front-page img {height:155px;object-fit:cover;object-position:center 35%;margin:0;border-radius:5px;}
@media(max-width:1000px) {.pdf-preview {padding:14px 12px 0;}}
@media(max-width:650px) {.pdf-preview {padding:22px 22px 0;}}

/* Larger lesson images with a small, recognizable frame for each format. */
.artwork-showcase {aspect-ratio:1.18;padding:14px;background:linear-gradient(135deg,#eceff4,#f1efeb);}
.showcase-frame {position:relative;width:100%;height:100%;background:#fff;overflow:hidden;box-shadow:0 7px 18px #16243b1a;border:1px solid #dce2eb;border-radius:9px;}
.showcase-toolbar {height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #e7ebf2;color:#65748b;font-size:8px;}
.showcase-toolbar span {color:#3184f5;letter-spacing:2px;}
.showcase-toolbar small {font-size:7px;letter-spacing:0;}
.showcase-toolbar b {font-weight:500;color:#142338;}
.showcase-frame img {display:block;width:100%;height:calc(100% - 25px);object-fit:cover;object-position:center 38%;}
.pdf-showcase {padding:14px 20px;}
.pdf-showcase .showcase-frame {border-radius:2px;}
.pdf-showcase .showcase-toolbar {height:25px;}
.pdf-showcase .showcase-toolbar span {font-size:7px;letter-spacing:.8px;}
.pdf-showcase .showcase-frame::after {content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(45deg,#dde4ed 50%,#f2f0ec 51%);box-shadow:-2px 2px 3px #14233815;}
.ipad-showcase {padding:14px;}
.ipad-showcase .showcase-frame {border:7px solid #101319;border-radius:17px;box-shadow:1px 3px 2px #151b2340,0 8px 16px #1423381a;}
.ipad-showcase .showcase-frame img {object-position:center 38%;}
@media(max-width:650px) {.artwork-showcase {aspect-ratio:1.18;padding:14px;}.pdf-showcase {padding:14px 20px;}}

.contact-banner .contact-direct {justify-content:flex-start;gap:24px;margin:22px 0 0;padding:0;flex-wrap:wrap;}
.contact-banner .contact-direct a {color:#d1e2ff;font-size:14px;}
@media(max-width:650px) {.contact-banner .contact-direct {justify-content:center;gap:10px 24px;}}

[data-details-template] {cursor:pointer;}

.footer-brand {flex-wrap:wrap;}
.footer-brand .brand-name {font-size:18px;letter-spacing:-.6px;}
@media(max-width:650px) {.footer-brand {justify-content:center;align-items:center;}}

/* Temporary Work and About windows, opened only by pressing navigation. */
.coming-soon-dialog {position:fixed;inset:0;margin:auto;width:min(400px,calc(100% - 40px));box-sizing:border-box;padding:64px 32px;border:1px solid #c7d7ef;border-radius:22px;background:var(--paper,#faf9f7);color:var(--ink);box-shadow:0 18px 55px #18263f30;text-align:center;}
.coming-soon-dialog[open] {animation:details-enter .28s ease both;}
.coming-soon-dialog::backdrop {background:rgb(12 20 32 / 24%);}
.coming-soon-dialog h2 {margin:0;font-size:28px;line-height:1.2;letter-spacing:-.8px;}
@media(prefers-reduced-motion:reduce) {.coming-soon-dialog[open] {animation:none;}}
/* Client needs and a compact project story, local review. */
.client-introduction {padding:46px 0 36px;max-width:900px;}
.client-introduction .eyebrow,.home-project-preview .eyebrow {font-size:11px;letter-spacing:2.8px;margin:0 0 18px;}
.client-introduction h2 {font-size:clamp(30px,3.5vw,54px);line-height:1.12;letter-spacing:-.045em;margin:0;}
.client-intro-copy {font-size:20px;line-height:1.65;color:var(--muted);max-width:680px;margin:22px 0;}
.learning-priorities {list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px 36px;margin:26px 0 0;color:var(--blue);font-size:15px;}
.learning-priorities li {padding-left:14px;border-left:2px solid #9cb8e3;}
.home-project-preview {display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;align-items:center;gap:40px;padding:28px;margin:12px 0 26px;border:1px solid #dde3ed;border-radius:18px;background:#ffffff55;}
.home-project-image {display:block;border-radius:10px;overflow:hidden;height:230px;}
.home-project-image img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 33%;}
.home-project-preview h2 {font-size:32px;line-height:1.15;letter-spacing:-1px;margin:0;}
.home-project-preview p:not(.eyebrow) {font-size:17px;line-height:1.65;color:var(--muted);max-width:580px;margin:16px 0;}
.project-story-link {display:inline-flex;gap:18px;align-items:center;color:var(--blue);font-size:15px;text-decoration:none;padding:10px 0;}
.project-story-link:hover {text-decoration:underline;text-underline-offset:5px;}
.project-story-link:focus-visible,.home-project-image:focus-visible {outline:2px solid var(--blue);outline-offset:5px;}
@media(max-width:650px) {.client-introduction {padding:32px 0;}.client-intro-copy {font-size:18px;}.learning-priorities {gap:16px;}.home-project-preview {grid-template-columns:1fr;gap:24px;padding:20px;}.home-project-image {height:220px;}.home-project-preview h2 {font-size:28px;}}
.working-together {display:grid;grid-template-columns:1fr 1.2fr;gap:64px;border-top:1px solid var(--line);padding:44px 0;}
.working-together .eyebrow {font-size:11px;letter-spacing:2.8px;margin:0 0 18px;}
.working-together h2 {font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-1.2px;margin:0;}
.working-together>div>p:not(.eyebrow) {font-size:17px;line-height:1.65;color:var(--muted);max-width:390px;}
.faq-questions details {border-bottom:1px solid var(--line);padding:0;margin:0;}
.faq-questions summary {display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;padding:20px 0;font-size:18px;line-height:1.4;cursor:pointer;}
.faq-questions summary::-webkit-details-marker {display:none;}
.faq-questions summary::after {content:'+';color:var(--blue);font-size:24px;flex-shrink:0;}
.faq-questions details[open] summary::after {content:'−';}
.faq-questions summary:focus-visible {outline:2px solid var(--blue);outline-offset:4px;border-radius:3px;}
.faq-questions summary:hover {color:var(--blue);}
.faq-questions details p {font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 22px;padding-right:22px;}
.faq-contact {margin-top:18px;}
@media(max-width:800px) {.working-together {grid-template-columns:1fr;gap:18px;padding:32px 0;}.working-together h2 br {display:none;}.working-together>div>p:not(.eyebrow) {max-width:600px;}.faq-questions summary {font-size:17px;min-height:60px;}}