/* Generated by scripts/build-opening-css.mjs; edit the original sheets. */
:root{
      --bg: #e9e2d8;
      --bg-rgb: 233, 226, 216;
      --paper: #f3ece2;
      --paper-rgb: 243, 236, 226;
      --paper-soft: #eee6da;
      --ink: #10242d;
      --blue: #0b3f51;
      --blue-2: #0b4e63;
      --orange: #e47a2e;
      --orange-display: #c45f21;
      --orange-text: #b94e25;
      --orange-soft: #f4c09b;
      --teal-soft: #cddfd7;
      --green: #6f987b;
      --line: rgba(11, 63, 81, 0.16);
      --shadow: 0 24px 70px rgba(11, 63, 81, 0.10);
      --radius-xl: 34px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --max: 1160px;
    }
*{ box-sizing: border-box; }
html{
      scroll-behavior: smooth;
      scroll-padding-top: 112px;
    }
body{
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 5%, rgba(var(--warm-rgb), 0.23), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(var(--teal-soft-rgb), 0.43), transparent 28rem),
        var(--bg);
      line-height: 1.55;
    }
body::before{
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(11, 63, 81, 0.07) 0.7px, transparent 0.7px);
      background-size: 18px 18px;
      mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
      opacity: 0.35;
    }
a{ color: inherit; }
.container{
      width: min(calc(100% - 32px), var(--max));
      margin-inline: auto;
    }
.skip-link{
      position: absolute;
      left: -999px;
      top: 12px;
      background: var(--blue);
      color: white;
      padding: 10px 14px;
      border-radius: 999px;
      z-index: 50;
    }
.skip-link:focus-visible{ left: 12px; }
header{
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(16px);
      background: rgba(var(--bg-rgb), 0.78);
      border-bottom: 1px solid rgba(var(--line-rgb), 0.08);
    }
.nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px 0;
    }
.logo{
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      min-width: 180px;
    }
.logo img{
      width: 64px;
      height: 64px;
      object-fit: contain;
      display: block;
    }
.brand-lockup{
      display: grid;
      gap: 1px;
      line-height: 1;
    }
.brand-lockup strong{
      color: var(--heading);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.55rem;
      letter-spacing: -0.04em;
    }
.brand-lockup > span{
      color: #1f7a75;
      font-size: 0.63rem;
      font-weight: 900;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }
.brand-lockup .brand-can{
      color: var(--orange-display);
    }
.nav-links{
      display: flex;
      align-items: center;
      gap: 26px;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--heading);
    }
.nav-links a{
      text-decoration: none;
      opacity: 0.9;
    }
.nav-links a:hover{ opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.button, .text-button{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 12px;
      font-weight: 800;
      text-decoration: none;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }
.button{
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      color: white;
      padding: 14px 20px;
      box-shadow: 0 14px 30px rgba(11, 63, 81, 0.18);
    }
.button:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(11, 63, 81, 0.22); }
.button.secondary{
      background: transparent;
      color: var(--heading);
      border: 1px solid rgba(var(--line-rgb), 0.28);
      box-shadow: none;
    }
.mobile-home,
    .mobile-menu{ display: none; }
main{ overflow: hidden; }
.eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--brand-green);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.75rem;
      margin-bottom: 14px;
    }
.eyebrow::before{
      content: "";
      width: 32px;
      height: 2px;
      background: var(--orange);
      border-radius: 999px;
    }
h1, h2, h3{
      color: var(--heading);
      line-height: 1.02;
      margin: 0;
      letter-spacing: -0.045em;
    }
h1{
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.9rem, 6.25vw, 5.15rem);
      max-width: 760px;
    }
h1 span{ color: var(--orange-display); }
.hero-actions{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
    }
.hero-actions .button{
      padding: 12px 18px;
    }
section{ padding: 96px 0; }
blockquote{
      margin: 0;
      background: rgba(var(--paper-rgb), 0.8);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 28px;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
blockquote p{ margin: 0; font-size: 1.05rem; color: rgba(var(--ink-rgb), 0.78); }
blockquote footer{ margin-top: 22px; color: var(--heading); font-weight: 900; }
@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto; }
}
@media (max-width: 940px){.nav{ align-items: start; }
.nav-links{
        gap: 12px;
        font-size: 0.84rem;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
}
@media (max-width: 620px){html{
        --sticky-header-height: 64px;
        scroll-padding-top: calc(var(--sticky-header-height) + 12px);
      }
.container{ width: min(calc(100% - 24px), var(--max)); }
.nav{
        height: calc(var(--sticky-header-height) - 1px);
        padding: 0;
        display: flex;
        align-items: center;
        gap: 16px;
      }
.nav .logo{ min-width: 0; min-height: 44px; }
.logo img{ width: 40px; height: 40px; }
.logo .brand-lockup, .nav-links{ display: none; }
.mobile-home{ display: inline; font-size: 1rem; font-weight: 800; }
.mobile-menu{
        display: block;
        color: var(--mobile-menu-ink, var(--heading));
        font-size: 1rem;
        font-weight: 700;
      }
.mobile-menu summary{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid currentColor;
        border-radius: 10px;
        list-style: none;
        cursor: pointer;
      }
.mobile-menu summary::-webkit-details-marker{ display: none; }
.mobile-menu summary::marker{ content: ""; }
.menu-icon{ font-size: 1.1rem; line-height: 1; }
.mobile-menu nav{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        gap: 8px;
        max-height: calc(100vh - var(--sticky-header-height));
        max-height: calc(100dvh - var(--sticky-header-height));
        overflow-y: auto;
        padding: 12px max(12px, var(--page-gutter, 12px)) 16px;
        border-bottom: 1px solid currentColor;
        background: var(--mobile-menu-surface, var(--bg));
        box-shadow: 0 14px 30px rgba(11, 63, 81, 0.18);
      }
.mobile-menu nav a{
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 16px;
        border-radius: 10px;
        text-decoration: none;
      }
.mobile-menu nav a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.mobile-menu nav .button{ width: 100%; transform: none; font: inherit; }
.nav .logo:focus-visible,
      .mobile-menu summary:focus-visible,
      .mobile-menu nav a:focus-visible{
        outline: 3px solid currentColor;
        outline-offset: 3px;
      }
h1{ font-size: clamp(3rem, 14vw, 4.6rem); }
.hero-actions{ align-items: stretch; }
.button{ width: 100%; }
section{ padding: 68px 0; }
.card, .muted-panel, .value, blockquote, .case-study, .cta-box{ padding: 22px; }
}
@keyframes product-showcase{
  0%,
  100% {
    transform: perspective(900px) rotateY(-3deg) translateY(0);
  }

  50% {
    transform: perspective(900px) rotateY(3deg) translateY(-5px);
  }
}
.button:focus-visible,
.text-button:focus-visible{
  outline: 3px solid var(--orange-text);
  outline-offset: 3px;
}
.eyebrow,
.method-ribbon span,
.how-number,
.how-overview .how-note{
  font-weight: 750;
}
h1{
  font-family: inherit;
  font-size: clamp(2.7rem, 4.9vw, 4.1rem);
  font-weight: 760;
  line-height: 1.01;
  letter-spacing: -0.052em;
}
@media (max-width: 940px){h1{
    font-size: clamp(2.8rem, 8vw, 4.4rem);
  }
}
@media (max-width: 620px){h1{
    font-size: clamp(2.65rem, 12.5vw, 3.9rem);
    letter-spacing: -0.045em;
  }
}
h1{
  max-width: 740px;
  font-size: clamp(2.9rem, 4.95vw, 4.25rem);
  line-height: 1.015;
}
@media (min-width: 941px){h1{
    max-width: 760px;
    font-size: clamp(3.05rem, 5.2vw, 4.5rem);
  }
}
@media (min-width: 941px){h1{
    max-width: 760px;
    font-size: clamp(3.05rem, 5.2vw, 4.5rem);
  }
}
@media (min-width: 941px){.nav{
    gap: 30px;
    padding: 22px 0;
  }
.logo{
    gap: 12px;
    min-width: 198px;
  }
.logo img{
    width: 64px;
    height: 64px;
  }
.brand-lockup strong{
    font-size: 1.72rem;
  }
.brand-lockup > span{
    font-size: 0.68rem;
  }
.nav-links{
    gap: 30px;
    font-size: 1rem;
  }
.nav-links .button{
    padding: 16px 22px;
  }
h1{
    max-width: 790px;
    font-size: clamp(3.2rem, 5.45vw, 4.75rem);
  }
}
@media (min-width: 941px) and (max-height: 820px){h1{
    font-size: clamp(3rem, 4.75vw, 4.08rem);
  }
}
:root{
  color-scheme: light;
  --heading: #0b3f51;
  --heading-rgb: 11, 63, 81;
  --ink-rgb: 16, 36, 45;
  --line-rgb: 11, 63, 81;
  --brand-green: #1f7a75;
  --badge-ink: #10242d;
  --teal-soft-rgb: 205, 223, 215;
  --warm-rgb: 244, 192, 155;
  --route-warm-rgb: 244, 192, 155;
  --route-warm-surface: #f3ece2;
  --warm-glow-rgb: 255, 248, 240;
  --warm-surface: #f4c09b;
  --warm-line: rgba(196, 95, 33, 0.18);
  --disabled-surface: #f1ece4;
  --error-ink: #8b3030;
  --error-rgb: 255, 232, 228;
  --theme-sun: none;
  --theme-moon: inline;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #0f1d21;
    --bg-rgb: 15, 29, 33;
    --paper: #16292e;
    --paper-rgb: 22, 41, 46;
    --paper-soft: #1b3237;
    --ink: #ece6db;
    --ink-rgb: 236, 230, 219;
    --heading: #f6f0e6;
    --heading-rgb: 246, 240, 230;
    
    --brand-green: #1f7a75;
    --orange-display: #d9733a;
    --orange-text: #f4b78f;
    --teal-soft: #1e383b;
    --teal-soft-rgb: 30, 56, 59;
    --warm-rgb: 58, 43, 36;
    --route-warm-rgb: 86, 61, 46;
    --route-warm-surface: #3a2b24;
    --warm-glow-rgb: 86, 61, 46;
    --warm-surface: #3a2b24;
    --warm-line: rgba(244, 192, 155, 0.28);
    --line: rgba(236, 230, 219, 0.18);
    --line-rgb: 236, 230, 219;
    --disabled-surface: #1b3237;
    --error-ink: #ffd2c7;
    --error-rgb: 70, 34, 32;
    --theme-sun: inline;
    --theme-moon: none;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0f1d21;
  --bg-rgb: 15, 29, 33;
  --paper: #16292e;
  --paper-rgb: 22, 41, 46;
  --paper-soft: #1b3237;
  --ink: #ece6db;
  --ink-rgb: 236, 230, 219;
  --heading: #f6f0e6;
  --heading-rgb: 246, 240, 230;
  --brand-green: #1f7a75;
  --orange-display: #d9733a;
  --orange-text: #f4b78f;
  --teal-soft: #1e383b;
  --teal-soft-rgb: 30, 56, 59;
  --warm-rgb: 58, 43, 36;
  --route-warm-rgb: 86, 61, 46;
  --route-warm-surface: #3a2b24;
  --warm-glow-rgb: 86, 61, 46;
  --warm-surface: #3a2b24;
  --warm-line: rgba(244, 192, 155, 0.28);
  --line: rgba(236, 230, 219, 0.18);
  --line-rgb: 236, 230, 219;
  --disabled-surface: #1b3237;
  --error-ink: #ffd2c7;
  --error-rgb: 70, 34, 32;
  --theme-sun: inline;
  --theme-moon: none;
}
.theme-toggle{
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid currentColor;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.theme-toggle:hover{ background: rgba(var(--paper-rgb), 0.12); }
.theme-toggle:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; }
.theme-toggle svg{ display: block; width: 22px; height: 22px; }
.theme-toggle .theme-sun{ display: var(--theme-sun); }
.theme-toggle .theme-moon{ display: var(--theme-moon); }
@media (max-width: 620px){.nav .nav-links{ display: contents; }
.nav .nav-links > :not(.theme-toggle){ display: none; }
.nav .theme-toggle{ margin-left: auto; }
}
:root body .theme-toggle,
:root .team-page > header .theme-toggle{ border-color: transparent; color: #f3ece2; background: #10242d; }
.theme-toggle:hover{ background: #1d3a44; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body .theme-toggle,
  :root:not([data-theme="light"]) .team-page > header .theme-toggle{ color: #10242d; background: #f3ece2; }
:root:not([data-theme="light"]) .theme-toggle:hover{ background: #ffffff; }
}
:root[data-theme="dark"] body .theme-toggle,
:root[data-theme="dark"] .team-page > header .theme-toggle{ color: #10242d; background: #f3ece2; }
:root[data-theme="dark"] .theme-toggle:hover{ background: #ffffff; }
:root:not([data-theme="dark"]) body .toucan-opening-header .theme-toggle{ color: #f3ece2; background: #10242d; border-color: transparent; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body .toucan-opening-header .theme-toggle{ color: #10242d; background: #f3ece2; }
}
.theme-toggle .theme-moon,
.theme-toggle .theme-sun circle{ fill: currentColor; }

.logo--wordmark{
  min-width: 150px;
}
.logo--wordmark .brand-lockup{
  margin-left: -6px;
}
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html.homepage-root{
  scroll-padding-top: 0;
}
body.homepage{
  --max: 1280px;
  --page-gutter: 20px;
  --section-space: 64px;
  --section-gap: 24px;
  --section-heading-size: clamp(2rem, 3.2vw, 3rem);
  --card-heading-size: clamp(1.25rem, 1.7vw, 1.5rem);
  --section-card-space: clamp(24px, 2.3vw, 32px);
  --sticky-header-height: 95px;
  --anchor-breathing-room: 12px;
}
body.homepage .toucan-opening-header .nav{
  height: calc(var(--sticky-header-height) - 1px);
}
body.homepage #main,
body.homepage #main > section{
  scroll-margin-top: calc(var(--sticky-header-height) + var(--anchor-breathing-room));
}
body.homepage .container,
body.homepage #main .container{
  width: min(calc(100% - 2 * var(--page-gutter)), var(--max));
}
#main > .homepage-section{
  width: auto;
  padding: 0;
  margin: var(--section-space) 0 0;
  min-height: 0;
  display: flow-root;
}
body.homepage .site-footer{
  margin-top: var(--section-space);
}
@media (min-width: 900px){body.homepage #main > section{
    scroll-margin-top: var(--sticky-header-height);
  }
body.homepage #main > #support-routes{
    scroll-margin-top: calc(var(--sticky-header-height) - 12px);
  }
#main > .homepage-section:not(.offer-section){
    box-sizing: border-box;
    min-height: calc(100vh - var(--sticky-header-height));
    min-height: calc(100svh - var(--sticky-header-height));
    margin-top: 0;
    padding-block: var(--section-space);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
#main > .homepage-section.offer-section{
    margin-top: 0;
  }
}
#main > .homepage-section h2{
  
  max-width: none;
  margin: 0;
  font-size: var(--section-heading-size);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
#main > .homepage-section .how-cta h2,
.homepage-section .how-cta > div > span{
  color: white;
}
@media (min-width: 900px) and (max-height: 820px){#main > .homepage-section:not(.offer-section){
    padding-block: 32px;
  }
}
@media (max-width: 620px){body.homepage{
    --sticky-header-height: 64px;
  }
}
@media (min-width: 900px){#main > .homepage-section.how-section{
    padding-block: 24px;
  }
}
#main > .homepage-section h2{
  text-wrap: balance;
}
@media (min-width: 900px){#main > .homepage-section.proof-section{
    padding-block: 24px;
  }
}
@media (max-width: 620px){body.homepage .toucan-opening-header{
    --mobile-menu-surface: #0a272c;
    --mobile-menu-ink: #f0ebe0;
  }
body.homepage .toucan-opening-header .nav{
    min-height: 0;
    padding-block: 0;
  }
}
.nav-links{
  --nav-panel-surface: #f3ece2;
  --nav-panel-ink: #10242d;
  --nav-panel-highlight: #cddfd7;
}
body.homepage .toucan-opening-header .nav-links{
  --nav-panel-surface: #0a272c;
  --nav-panel-ink: #f0ebe0;
  --nav-panel-highlight: #16414a;
}
.nav-links .nav-item{
  position: relative;
}
.nav-links .nav-item > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-chevron{
  font-size: 0.75em;
  line-height: 1;
}
.nav-links .nav-dropdown{
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  display: none;
  width: 18rem;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--nav-panel-ink);
  border-radius: 16px;
  color: var(--nav-panel-ink);
  background: var(--nav-panel-surface);
  box-shadow: 0 14px 30px rgba(11, 63, 81, 0.18);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}
.nav-links .nav-item:hover > .nav-dropdown,
.nav-links .nav-item:focus-within > .nav-dropdown{
  display: block;
}
.nav-links .nav-dropdown a{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--nav-panel-ink);
  opacity: 1;
  text-decoration: none;
}
.nav-links .nav-dropdown a:hover,
.nav-links .nav-dropdown a:focus-visible{
  background: var(--nav-panel-highlight);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-links .nav-item > a:focus-visible,
.nav-links .nav-dropdown a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (max-width: 620px){.mobile-menu .mobile-sub-links{
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
  }
.mobile-menu .mobile-sub-links a{
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
.mobile-menu .mobile-sub-links .nav-group-label{
    padding: 10px 16px 2px;
    color: var(--orange-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
body.homepage .toucan-opening-header .mobile-sub-links .nav-group-label{
    color: var(--orange-soft);
  }
}
.nav-links,
body.homepage .toucan-opening-header .nav-links{
  --nav-panel-surface: #0b2c33;
  --nav-panel-ink: #f3ede2;
  --nav-panel-highlight: rgba(244, 192, 155, 0.14);
}
.nav-links .nav-dropdown{
  top: calc(100% + 10px);
  padding: 10px;
  border: 1px solid rgba(205, 223, 215, 0.18);
  border-radius: 18px;
  background: linear-gradient(165deg, #0f3a44 0%, var(--nav-panel-surface) 60%);
  box-shadow: 0 22px 48px rgba(4, 24, 30, 0.38);
  overflow: visible;
}
.nav-links .nav-dropdown::before{
  content: "";
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
}
.nav-links .nav-dropdown::after{
  content: "";
  position: absolute;
  top: -7px;
  right: 28px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(205, 223, 215, 0.18);
  border-left: 1px solid rgba(205, 223, 215, 0.18);
  background: #0f3a44;
  transform: rotate(45deg);
}
.nav-links .nav-dropdown a{
  position: relative;
  padding: 10px 14px 10px 16px;
  font-weight: 650;
  letter-spacing: 0.005em;
}
.nav-links .nav-dropdown a::before{
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--orange-soft);
  opacity: 0;
}
.nav-links .nav-dropdown a:hover,
.nav-links .nav-dropdown a:focus-visible{
  color: #fff8f0;
  text-decoration: none;
}
.nav-links .nav-dropdown a:hover::before,
.nav-links .nav-dropdown a:focus-visible::before{
  opacity: 1;
}
.nav-links .nav-dropdown .nav-group-label{
  padding: 8px 16px 4px;
  color: var(--orange-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.nav-links .nav-dropdown .nav-group-label:not(:first-child){
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(205, 223, 215, 0.16);
}
.nav-links .nav-item > a:focus-visible,
.nav-links .nav-dropdown a:focus-visible{
  outline-color: var(--orange-soft);
}
@media (min-width: 900px) and (max-height: 800px){#main > .homepage-section.proof-section{ padding-block: 8px; }
}
.nav .nav-links > .button,
.nav .mobile-menu nav > .button{
  border: 1px solid transparent;
  background: linear-gradient(135deg, #ffd1b1, #f28a45 72%, #e36f7f);
  color: #17112e;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(239, 172, 142, 0.2);
  text-decoration: none;
}
.nav .nav-links > .button:hover,
.nav .mobile-menu nav > .button:hover{
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(239, 172, 142, 0.35);
}
.nav .nav-links > .button:focus-visible,
.nav .mobile-menu nav > .button:focus-visible{
  outline: 3px solid var(--heading);
  outline-offset: 4px;
}
.toucan-opening-header .nav .button:focus-visible{ outline-color: #f0ebe0; }
@media (prefers-reduced-motion: reduce){.nav .nav-links > .button,
  .nav .mobile-menu nav > .button{ transition: none; }
.nav .nav-links > .button:hover,
  .nav .mobile-menu nav > .button:hover{ transform: none; }
}
body.homepage .homepage-section .trial-button{
  background: linear-gradient(135deg, #ffd1b1, #f28a45 72%, #e36f7f);
  color: #17112e;
  box-shadow: 0 6px 18px rgba(239, 172, 142, 0.2);
}
body.homepage .homepage-section .trial-button:hover{
  box-shadow: 0 9px 22px rgba(239, 172, 142, 0.35);
}
:root{
  --hero-cream: #f0ebe0;
  --hero-night: #0a272c;
  --trial-light-fill: var(--blue);
  --trial-light-ink: var(--hero-cream);
  --trial-light-hover: #0e4c60;
  --trial-light-glow: 11, 63, 81;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    --trial-light-fill: var(--hero-cream);
    --trial-light-ink: var(--hero-night);
    --trial-light-hover: #fbf8f2;
    --trial-light-glow: 240, 235, 224;
  }
}
:root[data-theme="dark"]{
  --trial-light-fill: var(--hero-cream);
  --trial-light-ink: var(--hero-night);
  --trial-light-hover: #fbf8f2;
  --trial-light-glow: 240, 235, 224;
}
body :is(.nav, .living-hero, .homepage-section) .button.trial-button{
  --trial-fill: var(--hero-cream);
  --trial-ink: var(--hero-night);
  --trial-hover: #fbf8f2;
  --trial-glow: 240, 235, 224;
  background: var(--trial-fill);
  color: var(--trial-ink);
  box-shadow: 0 0 0 1px var(--trial-ink), 0 10px 28px rgba(var(--trial-glow), .28);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body :is(.nav, .living-hero, .homepage-section) .button.trial-button--light-surface{
  --trial-fill: var(--trial-light-fill);
  --trial-ink: var(--trial-light-ink);
  --trial-hover: var(--trial-light-hover);
  --trial-glow: var(--trial-light-glow);
}
body :is(.nav, .living-hero, .homepage-section) .button.trial-button:is(:hover, :focus-visible){
  background: var(--trial-hover);
  box-shadow: 0 0 0 1px var(--trial-ink), 0 14px 34px rgba(var(--trial-glow), .35);
  transform: translateY(-2px);
}
body :is(.nav, .living-hero, .homepage-section) .button.trial-button:focus-visible{
  outline: 3px solid var(--trial-fill);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px var(--trial-ink), 0 14px 34px rgba(var(--trial-glow), .35);
}
@media (prefers-reduced-motion: reduce){body :is(.nav, .living-hero, .homepage-section) .button.trial-button,
  body :is(.nav, .living-hero, .homepage-section) .button.trial-button:is(:hover, :focus-visible){
    transition: none;
    transform: none;
  }
}
#main > .team-section .section-head h1{
  max-width: none;
  margin: 0;
  font-size: var(--section-heading-size);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
#main > .team-section .team-founder h2{ margin: 0; color: white; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; text-wrap: wrap; }
header:not(.toucan-opening-header) > .container.nav{
  width: min(calc(100% - 40px), 1280px);
  min-height: 90px;
  padding-block: 15px;
}
header:not(.toucan-opening-header) .brand-lockup strong{
  font-size: 29px;
}
header:not(.toucan-opening-header) .nav-links{
  gap: 26px;
}
@media (max-width: 620px){header:not(.toucan-opening-header) > .container.nav{
    min-height: 0;
    padding-block: 0;
  }
}
#main > .team-section .team-founder h3{ margin: 0; color: white; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; text-wrap: wrap; }
#main > .team-section .team-story h3{ margin: 0 0 14px; color: white; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; }
.nav-chevron{ display: inline-block; width: 0; height: 0; font-size: 0; line-height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; }
@keyframes launch-offer-appear{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.living-hero, .toucan-opening-header, .piano-world{
  --hero-night: #0a272c;
  --hero-cream: #f0ebe0;
  --hero-peach: #efac8e;
  --piano-now-green: #63c47b;
  --piano-now-ring: #b9ecc4;
  --piano-next-violet: #7b6fd6;
  --piano-next-tint: #d2cdf2;
  --hero-serif: Georgia, 'Times New Roman', serif;
  --hero-sans: 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif;
}
.toucan-opening-header{ background: #0a272cf5; color: var(--hero-cream); border-bottom: 1px solid #c3d2ba20; }
.toucan-opening-header .nav{ min-height: 90px; padding-block: 15px; }
.toucan-opening-header .brand-lockup strong{ color: var(--hero-cream); font-size: 29px; }
.toucan-opening-header .brand-lockup .brand-can{ color: #d9733a; }
.toucan-opening-header .brand-lockup > span{ color: #1f7a75; }
.toucan-opening-header .nav-links{ gap: 26px; color: #d5ded3; }
.toucan-opening-header .button{ background: transparent; color: var(--hero-cream); border: 1px solid #bed0bc6b; box-shadow: none; }
.toucan-opening-header .mobile-note{ color: #c1d2c4; }
.toucan-opening-header .mobile-note .text-button{ color: var(--hero-cream); border-color: #efac8e; }
.living-hero{ position: relative; z-index: 1; isolation: isolate; overflow: visible; padding: 0; color: var(--hero-cream); background: var(--hero-night); font-family: var(--hero-sans); line-height: 1.6; }
.living-hero .container{ width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.living-hero button{ font: inherit; cursor: pointer; }
.living-hero button:disabled{ cursor: default; }
.living-hero button:focus-visible, .living-hero a:focus-visible{ outline: 3px solid var(--hero-peach); outline-offset: 5px; }
.living-hero .hero-haze{ position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 78% 36%, #719e7d29, transparent 46%), radial-gradient(ellipse at 9% 91%, #456d6555, transparent 46%); }
.living-hero .hero-layout{ display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; min-height: 600px; }
.living-hero .hero-copy{ z-index: 2; min-width: 0; padding: 35px 0; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; }
.living-hero .eyebrow{ display: block; color: #c1d2c4; font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: .17em; margin: 0 0 18px; }
.living-hero .eyebrow::before{ content: none; }
.living-hero #hero-title{ color: var(--hero-cream); font: 800 clamp(2.625rem, min(4.583vw, 11.85cqi), 4.5rem)/.85 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.045em; margin: 0 0 28px; max-width: none; white-space: nowrap; }
.living-hero #hero-title em{ font-weight: inherit; font-style: normal; font-size: inherit; color: var(--hero-peach); letter-spacing: inherit; }
.living-hero .hero-description{ color: #d0d9cf; font-size: 20px; line-height: 1.55; max-width: 590px; margin: 0 0 52px; }
.living-hero .keep-together{ white-space: nowrap; }
.living-hero .hero-actions{ display: flex; gap: 29px; align-items: center; flex-wrap: wrap; }
.living-hero .hero-actions .button{ display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; padding: 13px 23px; border: 1px solid transparent; border-radius: 7px; background: var(--hero-peach); color: #173538; box-shadow: none; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s; }
.living-hero .hero-actions .button:hover{ transform: translateY(-3px); background: #f9c4a9; }
.living-hero .button span{ font-size: 20px; line-height: 1; }
.living-hero .quiet-link{ color: var(--hero-cream); font-size: 12px; text-decoration: none; padding: 12px 0; border-bottom: 1px solid #b0c4b85c; }
.living-hero .quiet-link span{ margin-left: 12px; }
.living-hero .hero-offer{ margin: 20px 0 0; line-height: 1.25; }
.living-hero .hero-offer strong{ display: block; color: var(--hero-peach); font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 700; }
.living-hero .hero-offer span{ display: block; margin-top: 2px; color: var(--hero-cream); font-size: 12px; line-height: 1.6; }
.living-hero .hero-world{ min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 32px 0 32px 32px; }
.living-hero .sky-studio{ width: 100%; overflow: visible; border: 1px solid #adc4b533; border-radius: 15px; background: #071c23; box-shadow: 0 24px 60px #01191d55; }
:is(.living-hero, .piano-world) .world-art{ display: block; padding: 0; border: 0; position: relative; width: 100%; height: 450px; background: #071219 url("/assets/loading-pixel-sky.png") center / cover; cursor: default; touch-action: pan-y; }
:is(.living-hero, .piano-world) .world-art:focus-visible{ outline-offset: -6px; }
:is(.living-hero, .piano-world) .world-art canvas{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
:is(.living-hero, .piano-world) #sky-canvas{ z-index: 0; opacity: .65; }
:is(.living-hero, .piano-world) .world-art[data-sky-preset="pixel"] #sky-canvas{ opacity: 1; }
:is(.living-hero, .piano-world) #flock-canvas{ z-index: 2; image-rendering: auto; }
:is(.living-hero, .piano-world) .hero-mascot{ position: absolute; z-index: 3; width: 51%; height: auto; left: 50%; top: 50%; pointer-events: none; transform: translate(-50%, -50%) rotate(-11deg); filter: drop-shadow(8px 15px 12px #02131788); animation: hero-toucan-float 8s ease-in-out infinite; }
.living-hero .scene-controls{ display: flex; justify-content: flex-end; padding: 10px 14px; background: #0b2228; border-top: 1px solid #a9c8ba2b; }
.living-hero .calm-button{ border: 1px solid #96b4a73d; background: transparent; color: #c5d5ca; padding: 7px 12px; min-height: 38px; border-radius: 20px; font-size: 11px; white-space: nowrap; }
.living-hero .calm-button:hover, .living-hero .calm-button[aria-pressed=true]{ background: #dce3c8; color: #16363b; }
.living-hero [hidden]{ display: none !important; }
@keyframes hero-toucan-float{ 0%, 100% { transform: translate(-50%, -50%) rotate(-11deg); } 50% { transform: translate(-50%, calc(-50% - 9px)) rotate(-8deg); } }
@media (min-width: 1550px){.living-hero .hero-layout{ min-height: 690px; }
:is(.living-hero, .piano-world) .world-art{ height: 540px; }
}
@media (max-width: 1050px){.living-hero .container{ width: calc(100% - 64px); }
.living-hero .hero-layout{ grid-template-columns: 1fr 1fr; min-height: 565px; }
.living-hero .eyebrow{ font-size: 8px; }
.living-hero .hero-actions{ gap: 17px; }
.living-hero .hero-world{ padding-left: 20px; }
:is(.living-hero, .piano-world) .world-art{ height: 400px; }
}
@media (max-width: 760px){.toucan-opening-header .nav{ min-height: 78px; }
.living-hero .container{ width: calc(100% - 40px); }
.living-hero .hero-layout{ grid-template-columns: 1fr; }
.living-hero .hero-copy{ padding: 52px 0 0; }
.living-hero .eyebrow{ font-size: 8px; margin-bottom: 25px; }
.living-hero #hero-title{ font-size: clamp(3rem, 14.5vw, 4.5rem); line-height: 1; margin-bottom: 28px; white-space: normal; }
.living-hero .hero-description{ margin-bottom: 32px; }
.living-hero .hero-actions{ gap: 25px; }
.living-hero .hero-world{ margin: 32px auto; width: min(490px, 100%); padding: 0; }
:is(.living-hero, .piano-world) .world-art{ height: 340px; }
}
@media (max-width: 360px){.living-hero .hero-actions{ gap: 15px; }
.living-hero .hero-actions .button{ padding-inline: 18px; }
.living-hero .quiet-link{ font-size: 11px; }
:is(.living-hero, .piano-world) .world-art{ height: 280px; }
}
@media (min-width: 761px) and (max-height: 820px){.living-hero .hero-copy{ padding: 20px 0; }
.living-hero .eyebrow{ margin-bottom: 16px; }
.living-hero .hero-offer{ margin-top: 14px; }
.living-hero .hero-offer strong{ font-size: 22px; }
}
@media (min-width: 900px){.living-hero .hero-layout{ min-height: calc(100vh - 95px); min-height: calc(100svh - 95px); }
}
@media (prefers-reduced-motion: reduce){:is(.living-hero, .piano-world) *, :is(.living-hero, .piano-world) *::before, :is(.living-hero, .piano-world) *::after{ animation: none !important; transition: none !important; }
}
.living-hero .hero-world{ flex-direction: column; justify-content: center; align-items: stretch; }
.living-hero .hero-world > .eyebrow{ margin-bottom: 12px; }
.living-hero .sky-studio{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
:is(.living-hero, .piano-world) .world-art{ grid-area: 1 / 1 / 2 / 2; overflow: hidden; border-radius: 14px 14px 0 0; }
:is(.living-hero, .piano-world) .piano-toggle{ grid-area: 2 / 1 / 3 / 2; border-radius: 0 0 14px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 14px; border: 0; border-top: 1px solid #adc4b533; color: var(--hero-cream); background: #0b2228; font-size: 12px; }
:is(.living-hero, .piano-world) .piano-toggle:hover, :is(.living-hero, .piano-world) .piano-toggle[aria-expanded=true]{ color: var(--hero-peach); background: #103138; }
:is(.living-hero, .piano-world) .piano-toggle:focus-visible{ outline-offset: -4px; }
:is(.living-hero, .piano-world) .piano-panel{ position: absolute; inset: calc(100% + 1px) -1px auto; z-index: 4; overflow: hidden; border-radius: 0 0 15px 15px; box-shadow: 0 18px 40px #00000066; visibility: hidden; pointer-events: none; transition: visibility 280ms; }
:is(.living-hero, .piano-world) .piano-panel.is-open{ visibility: visible; pointer-events: auto; }
:is(.living-hero, .piano-world) .piano-panel-inner{ position: relative; border: 1px solid #adc4b533; border-top: 0; border-radius: 0 0 15px 15px; overflow: hidden; background: #0b2228; transform: translateY(-100%); transition: transform 280ms ease; }
:is(.living-hero, .piano-world) .piano-panel.is-open .piano-panel-inner{ transform: translateY(0); }
:is(.living-hero, .piano-world) .piano-scroll{ overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 12px 10px; background: #0b2228; scrollbar-color: #adc4b566 #0b2228; }
:is(.living-hero, .piano-world) .piano-keys{ position: relative; display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); min-width: 528px; height: 71px; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; }
:is(.living-hero, .piano-world) .piano-key{ padding: 0; touch-action: none; border-radius: 0 0 4px 4px; }
:is(.living-hero, .piano-world) .piano-key--white{ min-width: 0; height: 100%; border: 1px solid #0a272c80; color: #0a272c; background: linear-gradient(#dcd6c9, var(--hero-cream) 12%, #fff9ed 92%, #c5bdad); box-shadow: inset 0 -4px 0 #b7ae9b; }
:is(.living-hero, .piano-world) .piano-key--black{ position: absolute; top: 0; z-index: 2; width: 2.9%; height: 62%; transform: translateX(-50%); border: 1px solid #020d10; background: linear-gradient(90deg, #071519, #203136 50%, #061317); box-shadow: 0 4px 3px #00101380, inset 0 -5px 0 #010b0e; }
:is(.living-hero, .piano-world) .piano-key.is-next{ background: var(--piano-next-tint); box-shadow: inset 0 0 0 2px var(--piano-next-violet); }
:is(.living-hero, .piano-world) .piano-key.is-now{ background: var(--piano-now-green); box-shadow: inset 0 0 0 2px var(--piano-now-ring), 0 0 13px #63c47b88; }
:is(.living-hero, .piano-world) .piano-key.is-pressed{ background: #f9c4a9; box-shadow: inset 0 4px 7px #6b342b77; }
:is(.living-hero, .piano-world) .piano-key.is-next.is-pressed{ background: var(--piano-next-tint); box-shadow: inset 0 0 0 2px var(--piano-next-violet), inset 0 4px 7px #2a235580; }
:is(.living-hero, .piano-world) .piano-key.is-now.is-pressed{ background: var(--piano-now-green); box-shadow: inset 0 0 0 2px var(--piano-now-ring), inset 0 4px 7px #153d2580; }
:is(.living-hero, .piano-world) .piano-key.is-now.is-next{ background: var(--piano-now-green); box-shadow: inset 0 0 0 3px var(--piano-next-violet), 0 0 13px #63c47b88; }
:is(.living-hero, .piano-world) .piano-key.is-now.is-next.is-pressed{ background: var(--piano-now-green); box-shadow: inset 0 0 0 3px var(--piano-next-violet), inset 0 4px 7px #153d2580, 0 0 13px #63c47b88; }
:is(.living-hero, .piano-world) .piano-key:focus-visible{ outline: 3px solid #bc653e; outline-offset: -4px; }
:is(.living-hero, .piano-world) .piano-key.is-next:focus-visible{ outline-color: var(--piano-next-violet); }
:is(.living-hero, .piano-world) .piano-key[data-note="C#3"]{ left: calc(100% * 1 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="D#3"]{ left: calc(100% * 2 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="F#3"]{ left: calc(100% * 4 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="G#3"]{ left: calc(100% * 5 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="A#3"]{ left: calc(100% * 6 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="C#4"]{ left: calc(100% * 8 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="D#4"]{ left: calc(100% * 9 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="F#4"]{ left: calc(100% * 11 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="G#4"]{ left: calc(100% * 12 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="A#4"]{ left: calc(100% * 13 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="C#5"]{ left: calc(100% * 15 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="D#5"]{ left: calc(100% * 16 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="F#5"]{ left: calc(100% * 18 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="G#5"]{ left: calc(100% * 19 / 22); }
:is(.living-hero, .piano-world) .piano-key[data-note="A#5"]{ left: calc(100% * 20 / 22); }
@media (min-width: 900px){.living-hero .hero-world{ padding-block: 24px; }
}
@media (max-width: 760px){:is(.living-hero, .piano-world) .piano-keys{ min-width: 528px; height: 64px; }
.living-hero .hero-world > .eyebrow{ margin-bottom: 12px; }
}
@media (max-width: 600px) and (orientation: portrait){:is(.living-hero, .piano-world) .piano-panel[data-song] .piano-scroll{ overflow-x: hidden; }
:is(.living-hero, .piano-world) .piano-panel[data-song] .piano-keys{ min-width: 0; }
:is(.living-hero, .piano-world) .piano-panel[data-song] .piano-key{ display: none; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-keys{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key:is([data-note="G3"], [data-note="G#3"], [data-note="A3"], [data-note="A#3"], [data-note="B3"], [data-note="C4"], [data-note="C#4"], [data-note="D4"], [data-note="D#4"], [data-note="E4"], [data-note="F4"], [data-note="F#4"], [data-note="G4"]){ display: block; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key--black{ width: 8%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key[data-note="G#3"]{ left: 12.5%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key[data-note="A#3"]{ left: 25%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key[data-note="C#4"]{ left: 50%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key[data-note="D#4"]{ left: 62.5%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="no-one-noticed"] .piano-key[data-note="F#4"]{ left: 87.5%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-keys{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key:is([data-note="C4"], [data-note="C#4"], [data-note="D4"], [data-note="D#4"], [data-note="E4"], [data-note="F4"], [data-note="F#4"], [data-note="G4"], [data-note="G#4"], [data-note="A4"], [data-note="A#4"], [data-note="B4"], [data-note="C5"], [data-note="C#5"], [data-note="D5"], [data-note="D#5"], [data-note="E5"]){ display: block; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key--black{ width: 6.4%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="C#4"]{ left: 10%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="D#4"]{ left: 20%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="F#4"]{ left: 40%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="G#4"]{ left: 50%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="A#4"]{ left: 60%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="C#5"]{ left: 80%; }
:is(.living-hero, .piano-world) .piano-panel[data-song="runaway"] .piano-key[data-note="D#5"]{ left: 90%; }
}
@media (prefers-reduced-motion: reduce){:is(.living-hero, .piano-world) .piano-panel, :is(.living-hero, .piano-world) .piano-panel-inner{ transition: none; }
}
:is(.living-hero, .piano-world) .world-art,
:is(.living-hero, .piano-world) .piano-toggle,
:is(.living-hero, .piano-world) .piano-keys button{
  -webkit-tap-highlight-color: transparent;
}
.living-hero .hero-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.living-hero .hero-actions .button.trial-button{
  justify-content: space-between;
  gap: 20px;
  width: min(470px, 100%);
  min-width: 0;
  min-height: 76px;
  padding: 16px 34px 16px 38px;
  border: 0;
  border-radius: 16px;
  background: var(--trial-fill);
  color: var(--trial-ink);
  outline: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.living-hero .hero-actions .button.trial-button > span{
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--hero-night);
  font-size: 24px;
  line-height: 1;
}
.living-hero .hero-actions .button.trial-button:is(:hover, :focus-visible){
  background: var(--trial-fill);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.46);
}
.living-hero .hero-actions .button.trial-button:focus-visible{
  outline: 3px solid var(--hero-cream);
  outline-offset: 5px;
  box-shadow: 0 16px 32px rgba(0,0,0,.46);
}
.living-hero .hero-actions .quiet-link{ padding-block: 6px; }
.living-hero .hero-benefits{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  color: var(--hero-cream);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.living-hero .hero-benefits li{ display: flex; align-items: flex-start; gap: 8px; }
.living-hero .hero-benefits li:last-child{ flex-basis: 100%; }
.living-hero .hero-benefits span{
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(228, 122, 46, .22);
  color: var(--orange-soft);
  font-size: 14px;
  line-height: 1;
}
@media (min-width: 900px){.living-hero .hero-layout{ align-content: center; align-items: stretch; }
.living-hero .hero-copy{ align-self: stretch; padding-block: 0; }
.living-hero .hero-world{ align-self: end; padding-block: 0; }
}
@media (max-width: 760px){.living-hero .hero-actions .button.trial-button{ width: 100%; padding-inline: 24px; }
.living-hero .hero-benefits{ margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce){.living-hero .hero-actions .button.trial-button,
  .living-hero .hero-actions .button.trial-button:is(:hover, :focus-visible){ transition: none; transform: none; }
}
.living-hero .hero-actions .button.approach-button{
  justify-content: space-between;
  gap: 20px;
  width: min(470px, 100%);
  min-width: 0;
  min-height: 76px;
  padding: 14px 32px 14px 36px;
  border: 2px solid var(--hero-cream);
  border-radius: 16px;
  background: transparent;
  color: var(--hero-cream);
  outline: none;
  box-shadow: none;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  transition: background 180ms ease;
}
.living-hero .hero-actions .button.approach-button > span{
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--hero-cream);
  border-radius: 50%;
  background: transparent;
  color: var(--hero-cream);
  font-size: 24px;
  line-height: 1;
}
.living-hero .hero-actions .button.approach-button:is(:hover, :focus-visible){
  background: rgba(240, 235, 224, .08);
  transform: none;
  box-shadow: none;
}
.living-hero .hero-actions .button.approach-button:focus-visible{
  outline: 3px solid var(--hero-cream);
  outline-offset: 5px;
}
@media (max-width: 760px){.living-hero .hero-actions .button.approach-button{ width: 100%; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce){.living-hero .hero-actions .button.approach-button{ transition: none; transform: none; }
}
.living-hero #hero-title em{ color: #c45f21; }
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .toucan-opening-header{ background: rgba(233, 226, 216, 0.94); color: #0b3f51; border-bottom-color: rgba(11, 63, 81, 0.12); }
:root:not([data-theme="dark"]) .toucan-opening-header .brand-lockup strong{ color: #0b3f51; }
:root:not([data-theme="dark"]) .toucan-opening-header .brand-lockup .brand-can{ color: #c45f21; }
:root:not([data-theme="dark"]) .toucan-opening-header .brand-lockup > span{ color: #1f7a75; }
:root:not([data-theme="dark"]) .toucan-opening-header .nav-links{ color: #0b3f51; }
:root:not([data-theme="dark"]) .toucan-opening-header .theme-toggle{ color: #0b3f51; border-color: #0b3f51; }
:root:not([data-theme="dark"]) .toucan-opening-header .mobile-menu summary{ color: #0b3f51; }
:root:not([data-theme="dark"]) .toucan-opening-header .mobile-home{ color: #0b3f51; }
:root:not([data-theme="dark"]) body .toucan-opening-header .nav .button.trial-button{ --trial-fill: var(--trial-light-fill); --trial-ink: var(--trial-light-ink); --trial-hover: var(--trial-light-hover); --trial-glow: var(--trial-light-glow); }
:root:not([data-theme="dark"]) .toucan-opening-header .nav .button:focus-visible{ outline-color: #0b3f51; }
}
:root[data-theme="light"] .toucan-opening-header{ background: rgba(233, 226, 216, 0.94); color: #0b3f51; border-bottom-color: rgba(11, 63, 81, 0.12); }
:root[data-theme="light"] .toucan-opening-header .brand-lockup strong{ color: #0b3f51; }
:root[data-theme="light"] .toucan-opening-header .brand-lockup .brand-can{ color: #c45f21; }
:root[data-theme="light"] .toucan-opening-header .brand-lockup > span{ color: #1f7a75; }
:root[data-theme="light"] .toucan-opening-header .nav-links{ color: #0b3f51; }
:root[data-theme="light"] .toucan-opening-header .theme-toggle{ color: #0b3f51; border-color: #0b3f51; }
:root[data-theme="light"] .toucan-opening-header .mobile-menu summary{ color: #0b3f51; }
:root[data-theme="light"] .toucan-opening-header .mobile-home{ color: #0b3f51; }
:root[data-theme="light"] body .toucan-opening-header .nav .button.trial-button{ --trial-fill: var(--trial-light-fill); --trial-ink: var(--trial-light-ink); --trial-hover: var(--trial-light-hover); --trial-glow: var(--trial-light-glow); }
:root[data-theme="light"] .toucan-opening-header .nav .button:focus-visible{ outline-color: #0b3f51; }
@media (max-width: 620px){:root[data-theme="light"] body.homepage .toucan-opening-header{ --mobile-menu-surface: #e9e2d8; --mobile-menu-ink: #0b3f51; }
:root[data-theme="light"] body.homepage .toucan-opening-header .mobile-sub-links .nav-group-label{ color: #b94e25; }
}
@media (max-width: 620px) and (prefers-color-scheme: light){:root:not([data-theme="dark"]) body.homepage .toucan-opening-header{ --mobile-menu-surface: #e9e2d8; --mobile-menu-ink: #0b3f51; }
:root:not([data-theme="dark"]) body.homepage .toucan-opening-header .mobile-sub-links .nav-group-label{ color: #b94e25; }
}
:is(.living-hero, .piano-world) .piano-hint{ margin: 0; padding: 8px 12px 0; color: #c1d2c4; font-size: 12px; line-height: 1.4; text-align: center; }
:is(.living-hero, .piano-world) .piano-song-controls{ position: absolute; inset: auto 0 0; z-index: 4; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 12px; background: #0b2228cc; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 280ms, visibility 280ms; }
:is(.living-hero, .piano-world) .piano-song-controls.is-open{ visibility: visible; opacity: 1; pointer-events: auto; }
:is(.living-hero, .piano-world) .piano-credit{ flex: 1; min-width: 0; margin: 0; color: #c1d2c4; font-size: 11px; line-height: 1.4; }
:is(.living-hero, .piano-world) .piano-next{ flex: none; min-height: 30px; padding: 4px 8px; border: 1px solid #adc4b566; border-radius: 6px; color: var(--hero-cream); background: transparent; font-size: 11px; }
:is(.living-hero, .piano-world) .piano-next:hover{ color: var(--hero-peach); border-color: var(--hero-peach); }
:is(.living-hero, .piano-world) .piano-next:focus-visible{ outline-offset: 2px; }
:is(.living-hero, .piano-world) .piano-key[data-key]{ position: relative; }
:is(.living-hero, .piano-world) .piano-key--black[data-key]{ position: absolute; }
@media (hover: hover) and (pointer: fine){:is(.living-hero, .piano-world) .piano-key[data-key]::after{ content: attr(data-key); position: absolute; inset: auto 0 6px; color: #0a272c99; font: 700 9px/1 var(--hero-sans); text-align: center; pointer-events: none; }
:is(.living-hero, .piano-world) .piano-key--black[data-key]::after{ bottom: 5px; color: #f0ebe0b3; }
:is(.living-hero, .piano-world) .piano-key:is(.is-now, .is-next, .is-pressed)[data-key]::after{ color: #0a272c; }
}
:is(.living-hero, .piano-world) .piano-tempo{ position: absolute; inset: auto 12px 1px; height: 9px; display: flex; align-items: center; gap: 7px; color: #c1d2c4; pointer-events: none; }
:is(.living-hero, .piano-world) .piano-tempo-label{ flex: none; font-size: 9px; line-height: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.living-hero, .piano-world) .piano-tempo-bar{ appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; width: 0; height: 3px; margin: 0; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: #adc4b533; color: var(--piano-now-green); }
:is(.living-hero, .piano-world) .piano-tempo-bar::-webkit-progress-bar{ background: #adc4b533; border-radius: 2px; }
:is(.living-hero, .piano-world) .piano-tempo-bar::-webkit-progress-value{ background: var(--piano-now-green); }
:is(.living-hero, .piano-world) .piano-tempo-bar::-moz-progress-bar{ background: var(--piano-now-green); }
:is(.living-hero, .piano-world) .piano-tempo[data-phase="landing"] .piano-tempo-bar{ box-shadow: 0 0 5px 1px #a7e6b5; }
@media (prefers-reduced-motion: reduce){:is(.living-hero, .piano-world) .piano-tempo[data-phase="landing"] .piano-tempo-bar{ box-shadow: none; }
}
@media (hover: none), (pointer: coarse){:is(.living-hero, .piano-world) .piano-hint{ display: none; }
}
@media (min-width: 761px){.living-hero .hero-benefits{ padding-top: 40px; }
}
@media (min-width: 900px){.living-hero .hero-layout{ padding-block: 44px; }
}

.framework-intro > .container, .container.framework-shell, .framework-shell ~ .cta > .container, .framework-cta > .container{ width: min(calc(100% - 80px), 1280px); }
.framework-section-nav a:focus-visible,
.framework-project-controls button:focus-visible,
.framework-profile-controls button:focus-visible,
[data-project-viewer]:focus-visible,
[data-profile-viewer]:focus-visible{ outline: 3px solid var(--orange-text); outline-offset: 4px; }
[data-project-status], [data-profile-status]{ min-width: 4.8em; font-size: .88rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.living-hero #hero-title{ white-space: normal; max-width: 100%; line-height: 1; text-wrap: balance; }
.homepage .team-section .framework-team-grid .team-promise{ flex: 1; width: 100%; margin: 0; padding: clamp(24px, 3vw, 36px); background: var(--blue); color: #fff; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .homepage .team-section .framework-team-grid .team-promise{ background: var(--teal-soft); color: var(--ink); }
}
:root[data-theme="dark"] .homepage .team-section .framework-team-grid .team-promise{ background: var(--teal-soft); color: var(--ink); }
.homepage .framework-team-viewer{ min-width: 0; width: 100%; max-width: 560px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); }
.homepage .framework-profile + .framework-profile{ margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.homepage #main .team-section .framework-profile h3{ margin-block: 0 8px; color: var(--heading); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.homepage .framework-profile p{ margin-block: 0 12px; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.homepage .framework-profile .framework-profile-role{ color: var(--orange-text); font-size: .95rem; font-weight: 800; line-height: 1.5; }
.homepage .framework-profile .framework-profile-role + p{ color: var(--heading); font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.homepage .framework-profile .framework-portrait-frame{ width: 135px; height: 200px; margin-left: 22px; margin-bottom: 14px; }
.homepage .framework-profile-footer{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.homepage .framework-profile-link{ color: var(--heading); font-weight: 800; line-height: 1.35; text-underline-offset: 4px; }
.homepage .framework-profile-link:focus-visible{ outline: 3px solid var(--orange-text); outline-offset: 4px; }
.homepage .framework-team-viewer .framework-profile-controls{ margin: 0; padding: 0; }
.homepage .framework-team-viewer .framework-profile-controls button{ border-color: var(--line); background: var(--paper); color: var(--heading); }
.homepage .framework-team-viewer .framework-profile-controls button:hover{ background: var(--teal-soft); }
.homepage .framework-team-viewer .framework-profile-controls button:focus-visible,
.homepage .framework-team-viewer:focus-visible{ outline-color: var(--orange-text); }
@media (min-width: 1200px){.homepage .framework-team-grid{ grid-template-columns: minmax(0, 1fr) 560px; }
}
@media (max-width: 1100px){.homepage .framework-profile .framework-profile-role + p{ font-size: 1.15rem; }
}
@media (max-width: 760px){.homepage .framework-team-viewer{ padding: 24px; }
.homepage .framework-profile .framework-portrait-frame{ width: 105px; height: 156px; margin-left: 16px; }
}
@media (max-width: 420px){.homepage .framework-team-viewer{ padding: 20px; }
.homepage .framework-profile-controls{ gap: 8px; }
.homepage [data-profile-status]{ min-width: 3.5em; }
.homepage #main .team-section .framework-profile h3{ font-size: 1.5rem; }
.homepage .framework-profile .framework-portrait-frame{ width: 88px; height: 132px; margin-left: 12px; }
}
@media (max-width: 620px){.framework-intro > .container, .container.framework-shell, .framework-shell ~ .cta > .container, .framework-cta > .container{ width: calc(100% - 40px); }
}
@media (min-width: 621px) and (max-width: 940px){html{ --sticky-header-height: 78px; scroll-padding-top: 90px; }
:root body > header > .container.nav{ width: calc(100% - 40px); height: 77px; min-height: 0; padding: 0; align-items: center; gap: 12px; }
:root body > header .nav-links{ display: contents; }
:root body > header .nav-links > :not(.theme-toggle){ display: none; }
:root body > header .theme-toggle{ margin-left: auto; }
:root body > header .mobile-menu{ display: block; color: var(--mobile-menu-ink, var(--heading)); font-weight: 700; }
.mobile-menu summary{ display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid currentColor; border-radius: 10px; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker{ display: none; }
.mobile-menu summary::marker{ content: ''; }
.mobile-menu nav{ position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 8px; max-height: calc(100dvh - 78px); overflow-y: auto; padding: 12px 20px 16px; background: var(--mobile-menu-surface, var(--bg)); border-bottom: 1px solid currentColor; }
.mobile-menu nav a{ display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-radius: 10px; text-decoration: none; }
.mobile-menu nav a:hover{ text-decoration: underline; }
.mobile-menu nav .button{ width: 100%; transform: none; font: inherit; }
.mobile-menu .mobile-sub-links{ margin: 0; padding: 0 0 0 16px; list-style: none; }
.mobile-menu .mobile-sub-links a{ min-height: 44px; padding: 8px 16px; font-size: .9rem; }
.mobile-menu .mobile-sub-links .nav-group-label{ padding: 10px 16px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mobile-menu summary:focus-visible, .mobile-menu nav a:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; }
}
@media print{.homepage .framework-team-viewer{ background: #fff; color: #10242d; border: 1px solid #aaa; }
}
@media (min-width: 941px){:root body > header .nav-links > a:not(.button),
  :root body > header .nav-links > .nav-item > a{ font-size: .9375rem; }
}
.language-flag{ display: inline-block; width: 21px; height: 16px; margin-right: 6px; object-fit: cover; border-radius: 3px; vertical-align: -2px; }
@media (min-width: 900px){.homepage .framework-team-viewer[data-enhanced] .framework-profile{ display: flex; flex-direction: column; }
.homepage .framework-team-viewer[data-enhanced] .framework-profile-content{ position: relative; flex: 1 0 auto; padding-bottom: 44px; }
.homepage .framework-team-viewer[data-enhanced] .framework-profile-content > .profile-availability{ position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; }
}
@media (min-width: 1000px){.homepage .homepage-section.team-section{ padding-top: 18px; padding-bottom: 28px; scroll-margin-top: var(--sticky-header-height, 95px); }
.homepage .team-section .framework-team-intro h2,
  .homepage .team-section h2{ margin-bottom: 14px; }
.homepage .team-section .framework-team-grid{ row-gap: 14px; }
}
@media (min-width: 1000px) and (max-height: 820px){.homepage .framework-profile .framework-profile-role + p{ font-size: 1.12rem; line-height: 1.38; }
.homepage .framework-team-viewer{ padding-block: 22px; }
}
bdi[lang="ar"]{ white-space: nowrap; }
@media (min-width: 1000px) and (max-height: 820px){.homepage .homepage-section.team-section{ padding-top: 6px; }
.homepage .team-section h2{ margin-bottom: 10px; }
.homepage .framework-profile .framework-profile-role + p{ font-size: 1.05rem; line-height: 1.36; }
.homepage .framework-team-viewer{ padding-block: 18px; }
.homepage .framework-profile .framework-portrait-frame{ width: 120px; height: 178px; }
}
@media (min-width: 1000px) and (max-height: 820px){#main > .homepage-section.team-section{ scroll-margin-top: calc(var(--sticky-header-height, 95px) - 22px); }
}
@media (min-width: 1000px) and (max-height: 820px){.homepage #main > .homepage-section.team-section{ display: flex; flex-direction: column; min-height: calc(100vh - var(--sticky-header-height, 95px) + 22px + 32px - 10px); }
.homepage .homepage-section.team-section > .container{ flex: 1; display: flex; flex-direction: column; }
.homepage .team-section .framework-team-grid{ flex: 1; grid-template-rows: 1fr auto; }
}
@media screen and (max-width: 767px){html body, html body.homepage{
    --page-gutter: 16px;
    --section-space: 32px;
    --section-gap: 12px;
    --section-card-space: 16px;
    --section-heading-size: 1.5rem;
    --card-heading-size: 1.125rem;
    font-size: 16px;
    line-height: 1.5;
  }
html body #main :is(p, li, dd, dt, label, input, select, textarea){
    font-size: 1rem !important;
    line-height: 1.5;
  }
html body #main :is(h1, h2, h3, h4){ text-wrap: balance; overflow-wrap: break-word; }
html body #main :is(h1, h2){ letter-spacing: -.035em; }
html body #main :is(img, video, iframe, input, textarea, select){ max-width: 100%; }
html body #main :is(.container, .framework-panels, [data-content-panel], .subject-card, .picture-cell, .contact-primary, .contact-sidebar){ min-width: 0; }
html body .container,
  html body.homepage #main .container,
  html body .framework-intro > .container,
  html body .container.framework-shell,
  html body .framework-shell ~ .cta > .container,
  html body .team-page-intro > .container,
  html body.team-page .cta > .container,
  html body .contact-main{ width: calc(100% - 2 * var(--page-gutter)); }
:root body > header > .container.nav{ width: calc(100% - 32px); gap: 8px; min-width: 0; }
:root body > header .logo{ min-width: 0; flex-shrink: 1; gap: 6px; }
:root body > header .brand-toucan{ width: 32px; height: 32px; flex-shrink: 0; }
:root body > header .theme-toggle{ width: 44px; height: 44px; flex: 0 0 44px; }
:root body > header .mobile-menu > summary{ min-height: 44px; padding: 8px 10px; }
html body #main .button{ min-height: 44px; white-space: normal; text-align: center; line-height: 1.35; }
html body #main :is(.opening-actions, .learning-links, .how-actions, .contact-next-actions, .thanks-actions){ display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
html body #main :is(.opening-actions, .learning-links, .how-actions, .contact-next-actions, .thanks-actions) > .button{ width: 100%; margin: 0; }
html body #main :is(.opening-actions, .learning-links) > a:not(.button){ padding-block: 8px; overflow-wrap: anywhere; }
html body #main .opening-offer{ margin-top: 12px; }
html body #main :is(.opening-proof, .opening-guarantee, .opening-review){ margin-block: 12px; }
html body #main .opening-actions{ margin-top: 12px; }
html body #main .opening-reviews{ font-size: 1rem; line-height: 1.5; }
html body #main > .framework-intro{ padding-block: 24px 0; }
html body #main .framework-intro h1,
  html body #main .contact-hero h1,
  html body.team-page #main .team-page-intro h1{ margin: 0 0 16px; font-size: clamp(1.875rem, 8vw, 2.25rem); line-height: 1.12; }
html body #main .container.framework-shell{ padding-block: 16px 24px; gap: 24px; grid-template-columns: minmax(0, 1fr); }
html body #main .framework-section-nav{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
html body #main .framework-section-nav a{ min-width: 0; min-height: 48px; padding: 10px 12px; gap: 8px; line-height: 1.35; text-wrap: balance; }
html body #main .framework-section-nav a::before{ flex: 0 0 auto; }
html body #main .framework-panels > [data-content-panel]:not([hidden]){ min-height: 0; flex: none; }
html body #main [data-section-page]{ min-height: 0 !important; }
html body #main .framework-panels .section-head{ margin: 0 0 16px; }
html body #main .framework-panels .section-head h2{ margin: 0 0 8px; font-size: 1.5rem; line-height: 1.2; }
html body #main .framework-panels .section-head p{ margin: 0; }
html body #main :is(.framework-page-controls, .showcase-navigation){ flex-wrap: wrap; gap: 8px; }
html body #main .framework-page-controls button{ min-height: 44px; padding: 10px 12px; }
html body #main .cta{ padding-block: 0 24px; }
html body #main .cta .cta-box{ padding: 16px; gap: 16px; border-radius: var(--radius-lg); }
html body #main .cta .cta-box > .button{ width: 100%; }
html body #main .cta .cta-box :is(h2, h3){ margin: 0; font-size: 1.25rem; line-height: 1.25; }
html body.homepage #main .living-hero .hero-layout{ min-height: 0; }
html body.homepage #main .living-hero .hero-copy{ padding: 24px 0 0; }
html body.homepage #main .living-hero #hero-title{ margin-bottom: 16px; font-size: clamp(2rem, 8.8vw, 2.5rem); line-height: 1.08; white-space: normal; text-wrap: balance; }
html body.homepage #main .living-hero .hero-description{ margin-bottom: 12px; }
html body.homepage #main .living-hero .hero-actions{ display: flex; width: 100%; gap: 12px; }
html body.homepage #main .living-hero .hero-actions .button{ width: 100%; min-height: 48px; }
html body.homepage #main .living-hero .hero-actions .opening-reviews{ padding-block: 4px; }
html body.homepage #main .living-hero .hero-benefits{ padding-top: 12px; margin-block: 12px 0; gap: 8px; }
html body.homepage #main .living-hero .hero-world{ margin: 24px 0 0; padding: 0 0 24px; }
html body.homepage #main .living-hero .hero-project-caption{ min-height: 0; justify-content: flex-start; padding: 12px; margin-bottom: 12px; }
html body.homepage #main .living-hero .hero-project-caption h2{ font-size: 1.25rem; line-height: 1.25; }
html body.homepage #main .living-hero .hero-project-caption .project-label{ font-size: .75rem !important; }
html body.homepage #main .living-hero .hero-world-eyebrow{ font-size: .75rem; margin-top: 12px; }
html body.homepage #main > .homepage-section{ margin-top: var(--section-space); }
html body.homepage #main .section-head{ margin-bottom: 16px; }
html body.homepage #main .section-head h2{ font-size: 1.5rem; line-height: 1.2; }
html body.homepage #main #team .framework-team-grid{ gap: 12px; }
html body.homepage #main #team :is(.team-promise, .framework-profile-content){ padding: 16px; border-radius: var(--radius-lg); }
html body.homepage #main #team .framework-profiles > [data-profile-slide][hidden]{ display: none; }
html body.homepage #main #team .framework-profile-content h3{ font-size: 1.25rem; }
html body.homepage #main #team .framework-profile-controls{ flex-wrap: wrap; gap: 8px; padding-top: 12px; }
html body.homepage #main #team .framework-profile-controls button{ min-width: 44px; min-height: 44px; }
html body.homepage #main #support-routes .audience-route-grid{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
html body.homepage #main #support-routes .audience-route-card{ min-height: 0; height: auto; padding: 16px; gap: 12px; border-radius: var(--radius-lg); grid-template-rows: auto auto; }
html body.homepage #main #support-routes .audience-route-media{ max-height: 144px; aspect-ratio: 16 / 9; }
html body.homepage #main #support-routes .audience-route-copy{ justify-content: flex-start; gap: 8px; }
html body.homepage #main #support-routes .audience-route-copy :is(.eyebrow, h3){ margin: 0; }
html body.homepage #main #support-routes .audience-route-copy h3{ font-size: 1.25rem; line-height: 1.25; }
html body.homepage #main #support-routes .audience-button{ width: 100%; margin-top: 4px; }
html body.homepage #main #how-it-works .how-steps{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
html body.homepage #main #how-it-works .how-steps li{ grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; padding: 12px; }
html body.homepage #main #how-it-works .how-step-media{ grid-column: 1; grid-row: 1; align-self: center; width: 72px; height: 45px; aspect-ratio: auto; }
html body.homepage #main #how-it-works .how-step-media img{ width: 100%; height: 100%; object-fit: contain; }
html body.homepage #main #how-it-works .how-number{ grid-column: 2; grid-row: 1; align-self: start; width: auto; height: auto; font-size: .875rem; }
html body.homepage #main #how-it-works .how-steps li > div:not(.how-step-media){ grid-column: 2; grid-row: 1; align-self: center; padding-left: 28px; }
html body.homepage #main #how-it-works .how-steps h3{ font-size: 1.125rem; line-height: 1.25; }
html body.homepage #main #how-it-works .how-step-detail{ grid-column: 1 / -1; grid-row: 2; opacity: 1; margin: 0; }
html body.homepage #main #how-it-works .how-follow-up{ margin-top: 16px; gap: 12px; }
html body.homepage #main #how-it-works .how-note{ padding: 16px; }
html body.homepage #main #reviews .reviews-orbit{ margin-block: 16px; }
html body.homepage #main #reviews .review-quote{ padding: 16px; border-radius: var(--radius-lg); }
html body.homepage #main #reviews .review-quote blockquote{ padding: 0; }
html body.homepage #main #reviews .reviews-enhanced .reviews-grid{ height: auto !important; }
html body.homepage #main #reviews .reviews-enhanced .review-quote{ height: auto !important; }
html body.homepage #main #reviews .reviews-enhanced .review-quote.is-current{ position: relative; inset: auto; }
html body.homepage #main #reviews .reviews-enquiry{ min-height: 0; padding: 16px; margin-top: 24px; gap: 16px; border-radius: var(--radius-lg); }
html body.homepage #main #reviews .reviews-enquiry > .button{ width: 100%; }
html body #main [data-showcase]{ --showcase-height: 340px; --showcase-bar: 44px; max-width: 100%; }
html body #main .showcase-stage > img{ object-fit: cover; }
html body #main .showcase-caption > button{ flex-basis: 44px; min-width: 44px; min-height: 44px; }
html body #main .showcase-cell .piano-toggle{ min-height: 44px; padding-inline: 8px; }
html body #main .showcase-drink-controls{ gap: 4px; max-width: calc(100% - 16px); }
html body #main .showcase-drink-controls button{ min-height: 44px; padding: 6px 8px; font-size: .875rem; }
html body #main .showcase-cell .showcase-match-mute{ width: 44px; height: 44px; }
html body #main #learner-projects .framework-project-copy,
  html body #main #learner-projects .project-copy-result{ padding: 16px; }
html body #main #learner-projects .framework-project-copy h3{ font-size: 1.25rem; }
html body #main #learner-projects .project-copy-cells h4{ font-size: 1rem; }
html body #main #learner-projects .showcase-navigation > button{ min-width: 44px; min-height: 44px; }
html body #main.contact-main{ padding-block: 24px; gap: 24px; }
html body #main .contact-primary{ gap: 24px; }
html body #main :is(.enquiry-form, .contact-pricing, .contact-next, .vietnam-card, .vietnam-teacher){ padding: 16px; border-radius: var(--radius-lg); }
html body #main .enquiry-form :is(.field, .field-stack){ min-width: 0; }
html body #main .enquiry-form .field :is(input, textarea, select){ min-height: 44px; padding: 10px 12px; }
html body #main .enquiry-form .field :is(small, .field-error){ font-size: 1rem; line-height: 1.5; }
html body #main .enquiry-form .form-submit{ width: 100%; min-height: 48px; }
html body #main .pricing-bands{ display: grid; gap: 12px; }
html body #main .pricing-bands > .price-band{ padding: 12px; }
html body #main .contact-sidebar{ gap: 16px; }
html body #main .contact-next-actions .button{ min-height: 44px; }
html body #main .vietnam-teacher-grid{ gap: 12px; }
html body #main .vietnam-teacher{ gap: 12px; }
html body #main .vietnam-cards{ gap: 12px; }
html body #main .vietnam-card{ grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto; gap: 8px 12px; align-items: start; }
html body #main .vietnam-card > img{ grid-column: 1; grid-row: 1; width: 72px; height: 45px; aspect-ratio: auto; border-radius: 10px; object-fit: contain; }
html body #main .vietnam-card-copy{ display: contents; }
html body #main .vietnam-card-copy > h2{ grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.125rem; }
html body #main .vietnam-card-copy > p{ grid-column: 1 / -1; margin: 0; }
html body #main .vietnam-details{ gap: 16px; }
html body #main .vietnam-language{ margin: 0; }
html body #main.thanks-main{ min-height: 0; padding-block: 32px; }
html body #main .thanks-card{ padding: 24px 16px; border-radius: var(--radius-lg); }
html body #main .thanks-card h1{ font-size: 2rem; line-height: 1.12; }
html body #main .thanks-card .lead{ margin-bottom: 16px; }
html body.homepage .site-footer{ margin-top: 24px; }
}
@media screen and (max-width: 340px){html body #main .framework-section-nav{ grid-template-columns: minmax(0, 1fr); }
html body #main .framework-section-nav a{ min-height: 44px; }
html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell),
  html body.homepage #main #how-it-works .how-steps li{ grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-media,
  html body.homepage #main #how-it-works .how-step-media{ width: 56px; height: 35px; }
html body #main .vietnam-teacher-copy{ display: contents; }
html body #main .vietnam-teacher-copy > p{ grid-column: 1 / -1; }
html body #main .vietnam-teacher-copy > p:first-child{ grid-column: 2; grid-row: 2; }
html body #main .vietnam-teacher > .framework-portrait-frame{ width: 72px; height: 108px; }
html body #main .vietnam-teacher{ grid-template-columns: 72px minmax(0, 1fr); }
}
@media screen and (max-width: 767px){html body #main .framework-panels p > .button,
  html body #main .approach-panel-cta > .button,
  html body #main .vietnam-hero .button,
  html body #main .framework-team-cta{ width: 100%; }
}
@media screen and (max-width: 767px){html body #main .framework-portrait-frame--joshua > .framework-portrait{
    max-width: none; width: 220%; height: auto; left: -42%; top: -82%;
  }
html body:not([data-mobile-mock]){ min-height: 0; height: auto; padding-bottom: 0; }
html body.homepage{ --section-space: 24px; }
html body.homepage #main > .homepage-section{ padding-block: 0; min-height: 0; }
html body.homepage #main .section-head{ margin-bottom: 12px; }
html body.homepage #main .living-hero .hero-copy{ padding-top: 16px; }
html body.homepage #main .living-hero .hero-world{ margin-top: 16px; padding-bottom: 0; }
html body.homepage #main .living-hero .hero-project-caption{ padding: 12px; margin-bottom: 8px; }
html body.homepage #main .living-hero [data-showcase]{ --showcase-height: 260px; }
html body.homepage #main .living-hero .hero-world-eyebrow{ margin-block: 8px 0; }
html body.homepage #main #team .framework-team-viewer{ min-width: 0; padding: 12px; }
html body.homepage #main #team .framework-profiles{
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px); gap: 12px; align-items: start;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x pan-y;
  }
html body.homepage #main #team .framework-profiles > [data-profile-slide],
  html body.homepage #main #team .framework-profiles > [data-profile-slide][hidden]{
    display: block; grid-area: auto; align-self: start; min-width: 0;
    margin: 0; padding: 0; border: 0; visibility: visible; pointer-events: auto;
    scroll-snap-align: start;
  }
html body.homepage #main #team .framework-profile-content{ padding: 0; }
html body.homepage #main #team .framework-profile .framework-portrait-frame{ width: 72px; height: 108px; margin: 0 0 8px 12px; }
html body.homepage #main #team .framework-profile-footer{ margin-top: 12px; padding-top: 12px; }
html body.homepage #main #team .framework-profile-controls{ padding-top: 0; }
html body.homepage #main #support-routes .audience-route-card{
    grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto;
    gap: 12px; padding: 12px; align-items: center;
  }
html body.homepage #main #support-routes .audience-route-media{ width: 88px; height: 88px; aspect-ratio: 1; }
html body.homepage #main #support-routes .audience-route-copy{ gap: 8px; }
html body.homepage #main #support-routes .audience-route-copy .eyebrow{ font-size: .6875rem; letter-spacing: .06em; }
html body.homepage #main #support-routes .audience-route-copy h3{ font-size: 1.125rem; }
html body.homepage #main #support-routes .audience-button{ padding: 10px 8px; }
html body.homepage #main #how-it-works .how-steps li{
    grid-template-columns: 28px minmax(0, 1fr) 56px;
    grid-template-rows: auto auto; gap: 8px; min-height: 0; padding: 12px;
  }
html body.homepage #main #how-it-works .how-number{
    grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
    position: static; width: 28px; height: 28px; border-radius: 8px;
  }
html body.homepage #main #how-it-works .how-steps li > div:not(.how-step-media){
    grid-column: 2; grid-row: 1; padding: 0; align-self: center;
  }
html body.homepage #main #how-it-works .how-steps h3{ margin: 0; }
html body.homepage #main #how-it-works .how-step-media{
    grid-column: 3; grid-row: 1; width: 56px; height: 35px; margin: 0; align-self: center;
  }
html body.homepage #main #how-it-works .how-step-detail{ grid-column: 1 / -1; grid-row: 2; }
html body.homepage #main #how-it-works .how-follow-up{ margin-top: 12px; }
html body.homepage #main #how-it-works .how-note{ padding: 12px; }
html body.homepage #main #reviews .reviews-orbit{ padding: 0; margin-block: 12px; perspective: none; touch-action: pan-x pan-y; }
html body.homepage #main #reviews .reviews-grid{
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px); gap: 12px; align-items: start;
    width: 100%; height: auto !important; margin: 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    transform: none !important; transform-style: flat; transition: none; scrollbar-width: thin;
  }
html body.homepage #main #reviews .reviews-grid .review-quote{
    position: relative; inset: auto; width: auto; min-width: 0; min-height: 0;
    height: auto !important; margin: 0; padding: 16px; align-self: start;
    transform: none !important; opacity: 1 !important; visibility: visible;
    pointer-events: auto !important; transition: none; scroll-snap-align: start;
  }
html body.homepage #main #reviews .reviews-enquiry{ margin-top: 16px; }
html body.homepage .site-footer{ margin-top: 16px; }
}

[data-showcase]{ --showcase-height: 450px; --showcase-bar: 38px; --showcase-inset: 8px; --drink-backdrop: var(--brand-green, #1f7a75); }
.hero-world > [data-showcase]{ display: block; }
.hero-world .showcase-cell{ height: calc(var(--showcase-height) + var(--showcase-bar)); }
@keyframes showcase-darty-zoom{
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
[data-showcase][data-project="drinks"] .showcase-stage > img,
[data-project="drinks"] .showcase-fallback{ object-fit: cover; object-position: center; background: var(--drink-backdrop, #1f7a75); }
[data-showcase][data-enhanced] .showcase-fallback{ display: none !important; }
.hero-world .showcase-fallback{ display: block; width: 100%; height: calc(var(--showcase-height) + var(--showcase-bar)); object-fit: cover; border-radius: 14px; }
@media (min-width: 1550px){[data-showcase]{ --showcase-height: 540px; }
}
@media (max-width: 1050px){[data-showcase]{ --showcase-height: 400px; }
}
@media (max-width: 760px){[data-showcase]{ --showcase-height: 340px; }
}
@media (max-width: 360px){[data-showcase]{ --showcase-height: 280px; }
}
.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 352px; }
.living-hero .hero-project-caption{ flex: none; width: 100%; min-width: 0; margin: 0 0 10px; padding: 10px 14px; border: 1px solid rgba(11, 63, 81, .16); border-radius: 16px; background: #f3ece2; color: #10242d; }
.living-hero .hero-project-caption .project-label{ margin: 0 0 2px; color: #1d7470; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.living-hero .hero-project-caption h2{ margin: 0 0 4px; color: #0b3f51; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: normal; }
.living-hero .hero-project-caption > .project-caption-detail{ margin: 0; color: inherit; font-size: 13px; line-height: 1.4; }
@media (min-width: 1550px){.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 460px; }
}
@media (min-width: 768px) and (max-width: 1050px){.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 320px; }
}
@media (max-width: 767px){.living-hero .hero-layout{ grid-template-columns: minmax(0, 1fr); }
.living-hero .hero-world{ width: 100%; margin: 32px auto; padding: 0; }
.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 340px; }
}
@media (max-width: 360px){.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 280px; }
}
@media print{[data-showcase][data-enhanced] .showcase-fallback{ display: block !important; height: auto !important; position: static !important; }
}
[data-showcase]:focus-visible{ outline: 2px solid #efac8e; outline-offset: 3px; }
.living-hero .hero-world > .hero-world-eyebrow{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; letter-spacing: .05em; }
.living-hero .hero-world > .hero-world-eyebrow::before{ display: none; }
.living-hero .hero-world > .hero-world-eyebrow{ margin: 10px 0 0; }
.living-hero .hero-project-caption{ box-sizing: border-box; min-height: 103px; }
@media (min-width: 768px) and (max-width: 1099px){.living-hero .hero-project-caption{ min-height: 139px; }
}
@media (max-width: 767px){.living-hero .hero-project-caption{ min-height: 175px; }
}
.living-hero .hero-project-caption{ display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1100px) and (max-width: 1320px){.living-hero .hero-project-caption{ min-height: 139px; }
.living-hero .hero-world > [data-showcase-mode="auto"]{ --showcase-height: 297px; }
}
@media (min-width: 900px){.living-hero .hero-world{ align-self: stretch; }
}
@media (min-width: 900px){.living-hero .hero-world{ justify-content: flex-start; }
.living-hero .hero-world > [data-showcase-mode="auto"]{ display: flex; flex: 1 0 auto; flex-direction: column; }
.living-hero .hero-world > [data-showcase-mode="auto"] > .showcase-cell{ flex: 1 0 auto; }
}
@media (min-width: 1250px) and (max-width: 1269px){.living-hero .hero-project-caption{ min-height: 121px; }
}
@media (min-width: 1270px) and (max-width: 1320px){.living-hero .hero-project-caption{ min-height: 103px; }
}
@media (min-width: 900px){.living-hero .hero-world > .hero-project-caption{ margin-top: clamp(7px, .78vw, 12px); }
}
@media (min-width: 1000px){.living-hero .hero-project-caption{ display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: center; }
.living-hero .hero-project-caption .project-label{ grid-row: 1; grid-column: 2; align-self: center; margin: 0; }
.living-hero .hero-project-caption h2{ grid-row: 1; grid-column: 1; }
.living-hero .hero-project-caption > .project-caption-detail{ grid-column: 1 / -1; }
}
@media (min-width: 1000px) and (max-width: 1248px){.living-hero .hero-project-caption{ min-height: 122px; }
}
@media (min-width: 1249px) and (max-width: 1269px){.living-hero .hero-project-caption{ min-height: 104px; }
}
@media (min-width: 1270px){.living-hero .hero-project-caption{ min-height: 86px; }
}