/* ═══════════════════════════════════════════════════════════
      BASE TOKENS & RESET
   ══════════════════════════════════════════════════════════ */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   :root {
     --bg:          #FF999A;
     --white:       #FFFFFF;
     --white60:     rgba(255,255,255,0.6);
     --white30:     rgba(255,255,255,0.3);
     --hero-shadow: drop-shadow(0px 4px 12px rgba(180,60,62,0.4))
                    drop-shadow(0px 2px 4px rgba(0,0,0,0.15));
   }
   html { scroll-behavior: smooth; }
   body {
     background: #FFFFFF;
     color: var(--white);
     font-family: 'Elms+Sans', Helvetica, sans-serif;
     font-weight: 300;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     /* footer (88px) + 100px extension + buffer */
     padding-bottom: 210px;
   }

   /* ═══════════════════════════════════════════════════════════
      NAV
   ══════════════════════════════════════════════════════════ */
       /* orangeDivider.svg — sits flush at the bottom edge of the fixed nav bar */
   .nav-divider {
     position: absolute;
     top: 100%;
     left: -10px;    /* bleed: closes sub-pixel side gap without overflow:hidden */
     right: -10px;
     width: auto;
     line-height: 0;
     font-size: 0;
     pointer-events: none;
   }
   .nav-divider img {
     display: block;
     width: 100%;
     height: auto;
   }

   nav {
     position: fixed; top: 0; left: 0; right: 0; z-index: 100;
     display: flex; justify-content: space-between; align-items: center;
     padding: max(1.1rem, env(safe-area-inset-top, 1.1rem)) 1.5rem 1rem;
     transition: transform 0.45s cubic-bezier(.16,1,.3,1);
     background: #5399a5;
   }
   /* slides fully off-screen upward when user scrolls */
   nav.nav-hidden { transform: translateY(-110%); }
   .nav-logo {
     font-family: 'Mr Dafoe', cursive; font-size: 1.6rem; letter-spacing: 0.02em;
     color: var(--white); text-decoration: none;
     display: flex; align-items: flex-end; gap: 0.55rem;
   }
   .nav-icon {
     height: 2rem; width: auto; display: block;
     filter: drop-shadow(0px 4px 8px rgba(26,26,26,0.35))
             drop-shadow(0px 1px 3px rgba(26,26,26,0.2));
   }
   /* ── Language switcher — sits beside the logo, left-aligned ── */
   .nav-left { display: flex; align-items: flex-end; gap: 0.95rem; }
   .nav-lang {
     display: flex; align-items: center; gap: 0.5rem;
     list-style: none;
   }
   .nav-lang li { display: flex; align-items: center; }
   .nav-lang li + li::before {
     content: ""; display: block;
     width: 1px; height: 0.7rem; margin-right: 0.5rem;
     background: var(--white30);
   }
   .lang-link {
     position: relative;
     font-weight: 100; font-size: 0.68rem; letter-spacing: 0.1em;
     text-transform: uppercase; white-space: nowrap;
     color: var(--white); text-decoration: none;
     opacity: 0.55; padding-bottom: 2px;
     transition: opacity 0.2s;
   }
   .lang-link:hover { opacity: 0.9; }
   .lang-link[aria-current="true"] { opacity: 1; font-weight: 100; cursor: default; }
   .lang-link[aria-current="true"]::after {
     content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
     height: 1.5px; background: var(--white); border-radius: 2px;
   }
   /* Compact codes (ES/EN…) on small screens, full names on desktop */
   .lang-full { display: none; }
   @media (max-width: 420px) {
     .nav-left { gap: 0.7rem; }
     .nav-lang { gap: 0.4rem; }
     .nav-lang li + li::before { margin-right: 0.4rem; }
   }
   @media (min-width: 768px) {
     .nav-lang { gap: 0.6rem; }
     .nav-lang li + li::before { margin-right: 0.6rem; }
     .lang-link { font-size: 0.7rem; }
     .lang-full { display: inline; }
     .lang-code { display: none; }
   }
.nav-desktop { display: none; list-style: none; align-items: center; gap: 2.5rem; }
   .nav-desktop > li { position: relative; }
   .nav-desktop > li.nav-dropdown { padding-bottom: 0 rem; }
   .nav-desktop > li > a,
   .nav-desktop > li > span {
     font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
     text-transform: uppercase; color: var(--white); text-decoration: none;
     opacity: 0.85; cursor: pointer; transition: opacity 0.2s;
   }
   .nav-desktop > li.nav-dropdown { padding-bottom: 0 rem; }
   .nav-dropdown-menu {
     position: absolute; top: 100%; left: 50%;
     transform: translateX(-50%); list-style: none;
     background: rgba(255,255,255,0.15);
     backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
     padding: 0.9rem 1.2rem 0.8rem; min-width: 175px;
     border-top: 2px solid rgba(255,255,255,0.25);
     border-radius: 0 0 6px 6px;
     box-shadow: 0 8px 24px rgba(160,50,52,0.22);
     display: flex; flex-direction: column; gap: 0.6rem;
     opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
     z-index: 1;
   }
   .nav-dropdown:hover .nav-dropdown-menu,
   .nav-dropdown-menu.dd-open { opacity: 1; pointer-events: auto; }
   .nav-dropdown-menu li a {
     font-weight: 300; font-size: 0.85rem; letter-spacing: 0.1em;
     color: var(--white); text-decoration: none; opacity: 0.8; white-space: nowrap;
   }
   .nav-menu-btn {
     background: none; border: none; cursor: pointer;
     display: flex; flex-direction: column; gap: 5px; padding: 4px;
   }
   .nav-menu-btn span {
     display: block; width: 24px; height: 1.5px;
     background: var(--white); border-radius: 2px;
     transition: transform 0.3s, opacity 0.3s;
   }
   .nav-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
   .nav-menu-btn.open span:nth-child(2) { opacity: 0; }
   .nav-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
   .menu-overlay {
     position: fixed; inset: 0; background: var(--bg); z-index: 99;
     display: flex; flex-direction: column;
     justify-content: center; align-items: center; gap: 2rem;
     opacity: 0; pointer-events: none;
     transition: opacity 0.4s cubic-bezier(.16,1,.3,1);
   }
   .menu-overlay.open { opacity: 1; pointer-events: auto; }
   .menu-overlay > a,
   .menu-overlay > .menu-group {
     opacity: 0; transform: translateY(20px);
     transition: opacity 0.4s, transform 0.4s;
   }
   .menu-overlay.open > a,
   .menu-overlay.open > .menu-group { opacity: 1; transform: translateY(0); }
   .menu-overlay.open > *:nth-child(1) { transition-delay: 0.05s; }
   .menu-overlay.open > *:nth-child(2) { transition-delay: 0.15s; }
   .menu-overlay.open > *:nth-child(3) { transition-delay: 0.22s; }
   .menu-overlay > a {
     font-weight: 300; font-size: 2.2rem;
     color: var(--white); text-decoration: none; letter-spacing: 0.06em;
   }
   .menu-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
   .menu-group-label { font-weight: 300; font-size: 2.2rem; color: var(--white); letter-spacing: 0.06em; opacity: 0.5; }
   .menu-group a { font-weight: 300; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--white); text-decoration: none; opacity: 0.85; transition: opacity 0.2s; }
   .nav-desktop > li > a:hover,
   .nav-desktop > li > span:hover,
   .nav-dropdown-menu li a:hover,
   .menu-group a:hover { opacity: 1; }
   @media (min-width: 768px) {
     .nav-desktop  { display: flex; }
     .nav-menu-btn { display: none; }
     .menu-overlay { display: none !important; }
   }

   /* ═══════════════════════════════════════════════════════════
      PAGE
   ══════════════════════════════════════════════════════════ */
   .about-page {
     padding-top: calc(max(1.1rem, env(safe-area-inset-top, 1.1rem)) + 3.5rem);
     background: #FFFFFF;
   }

   #about {
     background: #FFFFFF;
     padding: 4rem 1.5rem 0;
     position: relative;
   }
   @media (min-width: 768px)  { #about { padding: 6rem 4rem 0; } }
   @media (min-width: 1100px) { #about { padding: 6rem 6rem 0; } }

   /* ── section divider ── */
   .section-divider {
     display: flex; align-items: center; gap: 1.2rem; margin-bottom: 4.5rem;
   }
   .section-divider::before,
   .section-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.22); }
   .section-divider-label {
     font-weight: 300; font-size: 0.62rem; letter-spacing: 0.38em;
     text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap;
   }

   /* ── about header ── */
   .about-header { margin-bottom: 3.5rem; }
   .about-name {
     font-family: 'Elms+Sans', font-weight:400;
     font-style: italic;
     font-size: clamp(1.9rem, 8.5vw, 3.75rem);
     line-height: 0.9; color: #5399a5; letter-spacing: 0.01em; margin-bottom: 0.6rem;
   }
   .about-role {
     font-weight: 300; font-style: italic;
     font-size: clamp(0.88rem, 3.4vw, 1.12rem);
     letter-spacing: 0.06em; color: #5399a5;
   }

   /* ── grid ── */
   .about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; margin-bottom: 4rem; }
   @media (min-width: 768px) {
     .about-grid { grid-template-columns: 1.2fr 0.8fr; gap: 5.5rem; align-items: start; }
   }
   .about-intro {
     font-weight: 300; font-style: italic;
     font-size: clamp(1.05rem, 4vw, 1.28rem);
     line-height: 1.68; letter-spacing: 0.025em;
     color: var(--white); margin-bottom: 1.8rem;
   }
   .about-body {
     font-weight: 300;
     font-size: clamp(1rem, 3.4vw, 1.05rem);
     line-height: 1.88; letter-spacing: 0.02em;
     color: #5399a5; margin-bottom: 1.6rem;
   }
   .about-body em     { font-style: italic; color: #5399a5; }
   .about-body strong { font-weight: 400;   color: #5399a5; }
   .about-quote {
     margin-top: 2.5rem; padding-left: 1.3rem;
     border-left: 1px solid rgba(255,255,255,0.70);
     font-weight: 300; font-style: italic;
     font-size: clamp(1.2rem, 3.3vw, 1.02rem);
     line-height: 1.75; color: rgba(255,255,255,0.58);
   }
   .about-quote cite {
     display: block; margin-top: 0.65rem; font-style: normal;
     font-size: 0.6rem; letter-spacing: 0.22em;
     text-transform: uppercase; color: rgb(255,255,255);
   }
   .about-credentials { display: flex; flex-direction: column; gap: 2.75rem; }
   .cred-block h3 {
     font-weight: 300; font-size: 0.58rem; letter-spacing: 0.38em;
     text-transform: uppercase; color: #5399a5;
     margin-bottom: 1rem; padding-bottom: 0.55rem;
     border-bottom: 1px solid #5399a5;
   }
   .cred-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
   .cred-list li {
     font-weight: 300; font-size: clamp(0.83rem, 3vw, 1rem);
     color: #5399a5; letter-spacing: 0.02em; line-height: 1.4;
   }
   .cred-sub {
     display: block; font-style: italic; font-size: 0.96rem;
     letter-spacing: 0.03em; color: #5399a5; margin-top: 0.18rem;
   }
   .about-disciplines {
     border-top: 1px solid rgba(255,255,255,0.16); padding-top: 2.25rem;
     display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0;
     margin-bottom: 4rem;
   }
   .disc-item {
     font-weight: 300; font-size: 0.68rem; letter-spacing: 0.26em;
     text-transform: uppercase; color: rgba(255,255,255,0.52); white-space: nowrap;
   }
   .disc-sep { font-size: 0.68rem; color: rgba(255,255,255,0.22); padding: 0 0.8rem; }
   .about-cta-row { margin-top: 1rem; margin-bottom: 2rem; display: flex; }
   .about-cta {
     display: inline-block; font-weight: 400;
     font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
     color: var(--white); text-decoration: none;
     border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 3px;
     transition: border-color 0.2s;
   }
   .about-cta:hover { border-color: var(--white); }

   /* ── scroll reveal ── */
   .reveal {
     opacity: 0; transform: translateY(22px);
     transition: opacity 0.75s cubic-bezier(.16,1,.3,1),
                 transform 0.75s cubic-bezier(.16,1,.3,1);
   }
   .reveal.visible { opacity: 1; transform: translateY(0); }
   .rd1 { transition-delay: 0.06s; } .rd2 { transition-delay: 0.14s; }
   .rd3 { transition-delay: 0.24s; } .rd4 { transition-delay: 0.34s; }
   .rd5 { transition-delay: 0.44s; } .rd6 { transition-delay: 0.54s; }

   /* ═══════════════════════════════════════════════════════════
      SITE FOOTER — fixed strip matching crossedcultures.html
   ══════════════════════════════════════════════════════════ */
   /* ── barTop.svg — sits flush above the fixed footer, full screen width ── */
   .footer-bar-top {
     position: absolute;
     bottom: 100%;
     left: -10px;
     right: -10px;
     width: auto;
     line-height: 0;
     font-size: 0;
     pointer-events: none;
     z-index: 0;
   }
   .footer-bar-top img {
     display: block;
     width: 100%;
     height: auto;
   }

   /* ── FOOTER — matches index.html/crossedcultures design ── */
   .site-footer {
     position: fixed;
     bottom: 0; left: 0; right: 0;
     z-index: 90;
     height: 150px;
     background: #675b91;              /* purple */
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     padding: 0 clamp(1.2rem, 3vw, 2.5rem);
     overflow: visible;
     transform: translateY(140%);
     transition: transform 0.9s cubic-bezier(.16,1,.3,1);
   }
   /* 100px purple strip extending below footer to viewport bottom */
   .site-footer::after {
     content: '';
     position: absolute;
     bottom: -100px; left: 0; right: 0;
     height: 100px;
     background: #675b91;
   }
   .site-footer.sf-visible { transform: translateY(0); }
   .sf-left  { display: flex; align-items: center; position: relative; z-index: 1; }
   .sf-right { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 1; }
   .sf-center {
     display: flex; flex-direction: column;
     align-items: center; gap: 3px;
     align-self: flex-start;
     transform: translateY(-28px);
     position: relative; z-index: 1;
   }
   .sf-center-link {
     display: flex; flex-direction: column;
     align-items: center; gap: 3px;
     text-decoration: none; color: inherit;
   }
   .sf-center-link:hover { opacity: 0.85; transition: opacity 0.2s; }
   .sf-bowl {
     width: clamp(200px, 4.5vw, 124px); height: auto; display: block;
     filter: drop-shadow(0px 3px 9px rgba(103,91,145,0.4))
             drop-shadow(0px 1px 3px rgba(0,0,0,0.12));
   }
   .sf-brand { display: flex; align-items: center; gap: clamp(0.4rem, 1.2vw, 0.75rem); }
   .sf-brand-title {
     font-family: 'Mr Dafoe', cursive;
     font-size: clamp(1.1rem, 2.6vw, 1.65rem);
     line-height: 0.9; color: var(--white); text-align: center;
     filter: drop-shadow(0px 2px 6px rgba(103,91,145,0.35));
   }
   .sf-dash { height: clamp(0.25rem, 0.75vw, 0.42rem); width: auto; flex-shrink: 0; filter: var(--hero-shadow); }
   .footer-insta { display: block; flex-shrink: 0; }
   .footer-insta img {
     height: 3rem; width: auto; display: block;
     filter: drop-shadow(0px 2px 6px rgba(103,91,145,0.4));
     transition: opacity 0.2s;
   }
   .footer-insta:hover img { opacity: 0.75; }
   .footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
   .footer-contact a {
     font-size: clamp(1.25rem, 2.5vw, 1.63rem); font-weight: 300;
     font-style: italic;
     letter-spacing: 0.08em; color: var(--white); text-decoration: none;
     transition: opacity 0.2s;
     text-shadow: 0px 2px 8px rgba(103,91,145,0.3);
   }
   .privacyPolicy {
     margin-top: 10px;
     font-size: 0.58rem;
     letter-spacing: 0.38em;
     text-transform: uppercase;
     color: #FFFFFF;
     white-space: nowrap;
     text-decoration: none;
 }
   .footer-contact a:hover { opacity: 0.75; }
   /* footer (88px) + 100px extension + buffer */
   body.footer-active { padding-bottom: 210px; }

   /* ── Mobile footer: keep every column within 1/3 of the screen ── */
   @media (max-width: 767px) {
     .sf-right { min-width: 0; }
     .footer-contact a {
       font-size: clamp(0.6rem, 3.2vw, 0.85rem);
       letter-spacing: 0.02em;
       word-break: break-all;
     }
   }