/* =========================================================
   BEST SPEAK
   MASTER WEBSITE DESIGN SYSTEM
   ========================================================= */

:root{
  --navy:#061c35;
  --navy-2:#0c2e50;
  --blue:#155486;

  --gold:#c99a42;
  --gold-light:#ead7ad;

  --red:#a9342d;

  --cream:#f8f6f1;
  --soft:#f2f6f8;

  --text:#17212c;
  --muted:#66717d;

  --line:#dfe5e9;
  --white:#ffffff;

  --max:1160px;
  --narrow:940px;

  --radius:20px;
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    Inter,
    Aptos,
    "Segoe UI",
    Arial,
    sans-serif;

  color:var(--text);

  font-size:17px;
  line-height:1.7;

  background:#fff;

  -webkit-font-smoothing:antialiased;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
}

button,
input{
  font:inherit;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.container{
  width:min(calc(100% - 64px),var(--max));
  margin-inline:auto;
}

.container.narrow{
  max-width:var(--narrow);
}

.centered{
  text-align:center;
}

section{
  padding:clamp(82px,8vw,118px) 0;
}


/* =========================================================
   TYPOGRAPHY
   Vietnamese-safe line height
   ========================================================= */

h1,
h2,
h3{
  color:var(--navy);
  font-weight:900;
  text-wrap:balance;
}

h1{
  line-height:1.07;
}

h2{
  line-height:1.12;
}

h3{
  line-height:1.25;
}

p{
  text-wrap:pretty;
}

.section-title{
  max-width:980px;

  font-size:clamp(
    2.35rem,
    4.7vw,
    4.45rem
  );

  letter-spacing:-.045em;
}

.centered .section-title{
  margin-inline:auto;
}

.section-title span{
  color:var(--gold);
}

.wide-title{
  max-width:1060px;
}

.eyebrow{
  margin-bottom:20px;

  color:var(--gold);

  font-size:.76rem;
  font-weight:900;

  letter-spacing:.15em;
  line-height:1.5;
}

.light-eyebrow{
  color:var(--gold-light);
}

.red-text{
  color:var(--red) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:58px;

  padding:0 30px;

  border-radius:999px;

  background:var(--gold);

  color:#101820;

  text-decoration:none;

  font-size:.88rem;
  font-weight:900;

  letter-spacing:.02em;

  transition:
    transform .2s ease,
    background .2s ease;
}

.button:hover{
  transform:translateY(-2px);
  background:#d5aa58;
}

.button-small{
  min-height:46px;
  padding:0 22px;
  font-size:.72rem;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;

  height:78px;

  background:rgba(255,255,255,.94);

  backdrop-filter:blur(15px);

  border-bottom:1px solid
    rgba(6,28,53,.08);
}

.nav{
  height:78px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;
}

.brand{
  display:flex;
  flex-direction:column;

  text-decoration:none;

  color:var(--navy);

  font-size:.7rem;
  font-weight:700;

  line-height:1.1;

  letter-spacing:.05em;
}

.brand strong{
  font-size:.96rem;
  font-weight:950;
}

.desktop-nav{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:30px;
}

.desktop-nav a{
  text-decoration:none;

  color:var(--navy);

  font-size:.75rem;
  font-weight:850;

  letter-spacing:.025em;
}

.desktop-nav a.active{
  color:var(--gold);
}

.menu-button,
.mobile-nav{
  display:none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  min-height:
    calc(100svh - 78px);

  display:flex;
  align-items:center;

  overflow:hidden;

  padding:90px 0;

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(21,84,134,.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 80% 85%,
      rgba(201,154,66,.10),
      transparent 25%
    ),
    #fff;
}

.hero-decoration{
  position:absolute;

  width:600px;
  height:600px;

  right:-320px;
  bottom:-280px;

  border-radius:50%;

  border:
    1px solid rgba(6,28,53,.08);
}

.hero-content{
  position:relative;
  z-index:2;

  max-width:1040px;
}

.hero h1{
  max-width:1040px;

  font-size:
    clamp(4rem,7.7vw,7.3rem);

  letter-spacing:-.065em;
}

.hero h1 span{
  color:var(--navy);
}

.hero-statement{
  max-width:800px;

  margin-top:38px;

  color:#3c4855;

  font-size:
    clamp(1.35rem,2.25vw,1.95rem);

  font-weight:720;

  line-height:1.42;
}

.hero-statement strong{
  color:var(--red);
}

.hero-reason{
  max-width:720px;

  margin-top:18px;

  color:var(--muted);

  font-size:1.06rem;
}

.hero-solution{
  max-width:880px;

  margin-top:38px;

  padding:5px 0 5px 25px;

  border-left:4px solid var(--gold);

  color:var(--navy);

  font-size:
    clamp(1.5rem,2.7vw,2.35rem);

  font-weight:850;

  line-height:1.4;
}

.hero-solution strong{
  color:var(--gold);
}

.text-link{
  display:inline-flex;

  gap:10px;

  margin-top:35px;

  color:var(--navy);

  text-decoration:none;

  font-size:.75rem;
  font-weight:900;

  letter-spacing:.08em;
}


/* =========================================================
   DARK SECTIONS
   ========================================================= */

.dark-section{
  color:#fff;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(21,84,134,.35),
      transparent 32%
    ),
    var(--navy);
}

.light-title{
  color:#fff;
}


/* =========================================================
   PROMISES
   Compact: no artificial min-height
   ========================================================= */

.promise-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  margin-top:48px;

  border-top:
    1px solid rgba(255,255,255,.16);
}

.promise-item{
  padding:28px 30px;

  border-bottom:
    1px solid rgba(255,255,255,.16);
}

.promise-item:nth-child(odd){
  border-right:
    1px solid rgba(255,255,255,.16);
}

.promise-index{
  display:block;

  margin-bottom:12px;

  color:var(--gold);

  font-size:.7rem;
  font-weight:900;

  letter-spacing:.1em;
}

.promise-item strong{
  display:block;

  font-size:
    clamp(1.3rem,2vw,1.75rem);

  line-height:1.3;
}


/* =========================================================
   PROBLEM
   ========================================================= */

.intro-line{
  margin-top:38px;

  color:var(--navy);

  font-size:1.35rem;
  font-weight:800;
}

.reason-list{
  max-width:1000px;

  margin-top:32px;

  border-top:1px solid var(--line);
}

.reason{
  display:grid;

  grid-template-columns:70px 1fr;

  gap:20px;

  padding:30px 0;

  border-bottom:1px solid var(--line);
}

.reason-number{
  color:var(--gold);

  font-size:.8rem;
  font-weight:900;

  letter-spacing:.08em;
}

.reason h3{
  margin-bottom:9px;

  font-size:1.25rem;
}

.reason p{
  max-width:820px;

  color:#566370;
}

.reason p + p{
  margin-top:13px;
}


/* =========================================================
   SOFT SECTION
   ========================================================= */

.soft-section{
  background:var(--cream);
}


/* =========================================================
   BROKEN PROCESS
   ========================================================= */

.process-flow{
  display:flex;
  flex-wrap:wrap;

  align-items:center;

  gap:10px;

  margin-top:42px;
}

.process-flow span{
  padding:10px 14px;

  border-bottom:
    2px solid var(--gold);

  color:var(--navy);

  font-size:.78rem;
  font-weight:900;

  line-height:1.4;
}

.process-flow i{
  color:var(--gold);

  font-size:1.1rem;
  font-style:normal;
}

.statement-panel{
  max-width:900px;

  margin-top:38px;

  padding:30px 32px;

  border-radius:var(--radius);

  background:var(--navy);

  color:#fff;

  line-height:1.7;
}

.statement-panel p + p{
  margin-top:16px;
}


/* =========================================================
   SYSTEM OPENING
   ========================================================= */

.system-opening{
  padding-bottom:65px;
}

.large-body{
  max-width:760px;

  margin:28px auto 0;

  color:var(--muted);

  font-size:
    clamp(1.05rem,1.6vw,1.22rem);

  line-height:1.75;
}


/* =========================================================
   SYSTEM STEPS
   No giant cards
   ========================================================= */

.system-section{
  padding-top:65px;
}

.system-steps{
  max-width:1000px;

  margin-top:48px;

  border-top:1px solid var(--line);
}

.system-step{
  display:grid;

  grid-template-columns:70px 1fr;

  gap:22px;

  padding:28px 0;

  border-bottom:1px solid var(--line);
}

.system-number{
  color:var(--gold);

  font-size:.85rem;
  font-weight:950;

  letter-spacing:.08em;
}

.system-step h3{
  margin-bottom:8px;

  font-size:
    clamp(1.25rem,2vw,1.55rem);
}

.system-step p{
  max-width:820px;

  color:#596674;
}

.system-step p + p{
  margin-top:13px;
}

.featured-step{
  padding:32px 28px;

  margin-top:8px;

  border:0;
  border-radius:var(--radius);

  background:var(--soft);
}


/* =========================================================
   REFLEX
   Horizontal progression, not 3 tall boxes
   ========================================================= */

.reflex-flow{
  display:grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items:center;

  gap:18px;

  margin-top:45px;

  padding-top:28px;

  border-top:
    1px solid rgba(255,255,255,.16);
}

.reflex-flow div{
  display:flex;

  gap:15px;

  align-items:flex-start;
}

.reflex-flow div span{
  color:var(--gold);

  font-size:.7rem;
  font-weight:900;
}

.reflex-flow div strong{
  color:#fff;

  font-size:
    clamp(1rem,1.5vw,1.3rem);

  line-height:1.35;
}

.reflex-flow i{
  color:var(--gold);

  font-style:normal;
}


/* =========================================================
   CLOSED LOOP
   ========================================================= */

.closed-loop-section{
  background:var(--soft);
}

.compact-loop{
  display:flex;
  flex-wrap:wrap;

  justify-content:center;
  align-items:center;

  gap:10px;

  margin-top:42px;

  padding:25px;

  border:1px solid var(--line);

  border-radius:var(--radius);

  background:#fff;
}

.compact-loop span{
  color:var(--navy);

  font-size:.77rem;
  font-weight:900;
}

.compact-loop i{
  color:var(--gold);
  font-style:normal;
}

.commitment-copy{
  max-width:700px;

  margin:32px auto 0;

  font-size:1.08rem;
}

.commitment-copy strong{
  display:block;

  margin-top:18px;

  color:var(--navy);
}


/* =========================================================
   CONTRAST
   ========================================================= */

.contrast-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1px;

  margin-top:42px;

  background:var(--line);

  border:1px solid var(--line);
}

.contrast-grid article{
  padding:30px;

  background:#fff;
}

.contrast-grid h3{
  margin-bottom:13px;

  font-size:1.25rem;
}

.contrast-grid p{
  color:#596674;
}

.contrast-grid p + p{
  margin-top:14px;
}


/* =========================================================
   FINAL
   ========================================================= */

.final-section{
  position:relative;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(21,84,134,.42),
      transparent 38%
    ),
    #05182d;
}

.final-section h2{
  color:#fff;
  font-size:clamp(2.45rem,5.2vw,4.7rem);
  line-height:1.16;
  letter-spacing:-.04em;
  font-weight:900;
}

.final-solution{
  max-width:900px;
  margin:32px auto 0;
  color:#fff;
  font-size:clamp(2.45rem,5.2vw,4.7rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.035em;
}

.once{
  margin-top:26px;

  color:var(--gold);

  font-size:
    clamp(2rem,4.5vw,3.7rem);

  font-weight:950;

  line-height:1.2;
}

.final-promises{
  max-width:700px;

  margin:45px auto 38px;

  border-top:
    1px solid rgba(255,255,255,.16);
}

.final-promises div{
  padding:14px 10px;

  border-bottom:
    1px solid rgba(255,255,255,.16);

  font-size:1rem;
  font-weight:850;

  line-height:1.45;
}

.final-button{
  min-height:60px;

  padding-inline:38px;
}

.contact{
  margin-top:30px;

  color:rgba(255,255,255,.72);

  font-size:.9rem;
}

.contact p + p{
  margin-top:4px;
}

.contact a{
  color:#fff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  padding:25px 0;

  background:#031323;

  color:rgba(255,255,255,.55);

  font-size:.75rem;
}

.site-footer .container{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.footer-brand strong{
  color:#fff;
}


/* =========================================================
   MOBILE STICKY CTA
   ========================================================= */

.mobile-sticky{
  display:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:960px){

  .desktop-nav{
    display:none;
  }

  .menu-button{
    width:42px;
    height:42px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    padding:9px;

    border:0;

    background:transparent;

    cursor:pointer;
  }

  .menu-button span{
    display:block;

    height:2px;

    background:var(--navy);
  }

  .mobile-nav{
    position:absolute;

    left:0;
    right:0;
    top:78px;

    padding:15px 32px 24px;

    background:#fff;

    border-bottom:1px solid var(--line);
  }

  .mobile-nav.open{
    display:grid;
  }

  .mobile-nav a{
    padding:12px 0;

    border-bottom:1px solid var(--line);

    color:var(--navy);

    text-decoration:none;

    font-size:.82rem;
    font-weight:850;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  body{
    font-size:16px;
  }

  .container{
    width:calc(100% - 32px);
  }

  section{
    padding:66px 0;
  }


  /* Header */

  .site-header,
  .nav{
    height:68px;
  }

  .mobile-nav{
    top:68px;
  }

  .desktop-cta{
    display:none;
  }


  /* Hero */

  .hero{
    min-height:auto;

    padding:65px 0 70px;
  }

  .hero h1{
    font-size:
      clamp(3rem,14vw,4.4rem);

    line-height:1.1;

    letter-spacing:-.055em;
  }

  .hero-statement{
    margin-top:30px;

    font-size:1.25rem;

    line-height:1.48;
  }

  .hero-reason{
    font-size:.96rem;
  }

  .hero-solution{
    margin-top:30px;

    padding-left:18px;

    font-size:1.4rem;

    line-height:1.48;
  }


  /* Titles */

  .section-title{
    font-size:
      clamp(2rem,9vw,2.85rem);

    line-height:1.16;

    letter-spacing:-.035em;
  }


  /* Promise */

  .promise-grid{
    grid-template-columns:1fr;

    margin-top:35px;
  }

  .promise-item{
    padding:20px 4px;
  }

  .promise-item:nth-child(odd){
    border-right:0;
  }

  .promise-index{
    margin-bottom:7px;
  }

  .promise-item strong{
    font-size:1.25rem;
  }


  /* Reasons */

  .intro-line{
    margin-top:28px;

    font-size:1.15rem;
  }

  .reason{
    grid-template-columns:38px 1fr;

    gap:10px;

    padding:24px 0;
  }

  .reason h3{
    font-size:1.08rem;

    line-height:1.35;
  }


  /* Broken flow */

  .process-flow{
  display:grid;
  grid-template-columns:1fr;
  margin-top:32px;
  padding-left:0;
}

  .process-flow span{
    width:100%;

    padding:10px 0;

    border-bottom:1px solid var(--gold);

    text-align:left;

    font-size:1.25rem;
    line-height:1.4;
  }

  .process-flow i{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    height:30px;

    margin:0;

    transform:none;

    color:var(--gold);

    font-size:1.6rem;
    line-height:1;
  }

}


  /* System */

  .system-opening{
    padding-bottom:45px;
  }

  .system-section{
    padding-top:45px;
  }

  .system-steps{
    margin-top:35px;
  }

  .system-step{
    grid-template-columns:38px 1fr;

    gap:10px;

    padding:24px 0;
  }

  .featured-step{
    padding:24px 18px;
  }


  /* Reflex */

  .reflex-flow{
    grid-template-columns:1fr;

    gap:10px;

    margin-top:32px;
  }

  .reflex-flow div{
    padding:12px 0;
  }

  .reflex-flow i{
    display:none;
  }


  /* Loop */

  .compact-loop{
    display:grid;

    grid-template-columns:1fr;

    justify-items:start;

    padding:20px;

    gap:5px;
  }

  .compact-loop i{
    transform:rotate(90deg);

    margin-left:8px;
  }


  /* Contrast */

  .contrast-grid{
    grid-template-columns:1fr;
  }

  .contrast-grid article{
    padding:24px;
  }


  /* Final */

  .final-section{
    padding:78px 0 105px;
  }

  .final-section h2{
    font-size:
      clamp(2.1rem,9vw,3rem);

    line-height:1.18;
  }

  .final-solution{
    font-size:1.25rem;

    line-height:1.5;
  }

  .once{
    font-size:2.1rem;

    line-height:1.3;
  }

  .final-button{
    width:100%;
  }


  /* Sticky CTA */

  .mobile-sticky{
    position:fixed;

    z-index:90;

    left:12px;
    right:12px;
    bottom:12px;

    display:block;
  }

  .mobile-sticky a{
    min-height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:var(--gold);

    box-shadow:
      0 10px 35px rgba(0,0,0,.20);

    color:#111820;

    text-decoration:none;

    font-size:.8rem;
    font-weight:950;

    letter-spacing:.03em;
  }


  /* Footer */

  .site-footer{
    padding-bottom:85px;
  }

  .site-footer .container{
    display:grid;
  }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media(max-width:380px){

  .hero h1{
    font-size:2.75rem;
  }

  .section-title{
    font-size:1.95rem;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:4px;
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
  }

}
/* =========================================================
   BEST SPEAK - USER REVISION ROUND 2
   ========================================================= */


/* ---------------------------------------------------------
   REAL BRAND LOGO
   --------------------------------------------------------- */

/* ===== LOGO BEST SPEAK ===== */

.brand-logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:210px;
  text-decoration:none;
}

.brand-wordmark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.brand-prefix{
  margin:0 0 3px 2px;
  color:#111;
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
}

.brand-text-logo{
  width:126px;
  height:auto;
  object-fit:contain;
}

.brand-icon-logo{
  width:45px;
  height:45px;
  object-fit:contain;
}
/* ---------------------------------------------------------
   HERO SOLUTION +50%
   --------------------------------------------------------- */

.hero-solution{
  font-size:
    clamp(2.15rem,4vw,3.55rem);

  line-height:1.38;

  max-width:980px;
}


/* ---------------------------------------------------------
   EYEBROWS - APPROX 2X
   --------------------------------------------------------- */

.eyebrow{
  font-size:1.45rem;

  line-height:1.35;

  letter-spacing:.045em;

  margin-bottom:24px;
}


/* ---------------------------------------------------------
   BROKEN PROCESS - APPROX 2X
   --------------------------------------------------------- */

.process-flow span{
  font-size:1.35rem;

  line-height:1.35;

  padding:12px 8px;
}

.process-flow i{
  font-size:1.75rem;
}


/* ---------------------------------------------------------
   REFLEX PROGRESSION - APPROX 2X
   --------------------------------------------------------- */

.reflex-flow div span{
  font-size:1.15rem;
}

.reflex-flow div strong{
  font-size:
    clamp(1.55rem,2.4vw,2.15rem);

  line-height:1.35;
}

.reflex-flow i{
  font-size:1.8rem;
}


/* ---------------------------------------------------------
   CLOSED LOOP - APPROX 2X
   --------------------------------------------------------- */

.compact-loop span{
  font-size:
    clamp(1.15rem,1.7vw,1.5rem);

  line-height:1.35;
}

.compact-loop i{
  font-size:1.55rem;
}


/* ---------------------------------------------------------
   NEGATIVE CARDS
   --------------------------------------------------------- */

.negative-card{
  position:relative;

  padding-top:34px !important;

  border-top:4px solid var(--red);
}

.negative-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:18px;

  border-radius:50%;

  background:var(--red);

  color:#fff;

  font-size:2.6rem;
  font-weight:500;

  line-height:1;
}

.negative-card h3{
  color:var(--red);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

  .brand-logo{
    gap:7px;
    min-width:auto;
  }

  .brand-prefix{
    font-size:.48rem;
    margin-bottom:2px;
  }

  .brand-text-logo{
    width:96px;
  }

  .brand-icon-logo{
    width:34px;
    height:34px;
  }

}


  /* Hero headline approx 75% */

  .hero h1{
    font-size:
      clamp(2.25rem,10.5vw,3.3rem);

    line-height:1.12;
  }


  /* Hero solution much larger */

  .hero-solution{
    font-size:2rem;

    line-height:1.45;

    margin-top:32px;
  }


  /* Eyebrows doubled but controlled for mobile */

  .eyebrow{
    font-size:1.15rem;

    line-height:1.4;

    letter-spacing:.025em;

    margin-bottom:18px;
  }


  /* Broken speaking flow */

.process-flow span{
  width:100%;
  padding:10px 0;
  border-bottom:1px solid var(--gold);
  text-align:left;
  font-size:1.25rem;
  line-height:1.4;
}

.process-flow i{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  margin:0;
  transform:none;
  color:var(--gold);
  font-size:0;
  line-height:1;
}

.process-flow i::after{
  content:"↓";
  font-size:1.6rem;
}


  /* Reflex */

  .reflex-flow div{
    align-items:center;

    gap:13px;

    padding:16px 0;
  }

  .reflex-flow div span{
    font-size:1rem;

    min-width:28px;
  }

  .reflex-flow div strong{
    font-size:1.6rem;

    line-height:1.4;
  }


  /* Closed loop */

  .compact-loop span{
    font-size:1.25rem;

    line-height:1.4;
  }

  .compact-loop i{
    font-size:1.4rem;
  }


  /* Negative visual */

  .negative-icon{
    width:46px;
    height:46px;

    font-size:2.25rem;

    margin-bottom:14px;
  }

}
/* ===== NEGATIVE CARDS ===== */

.negative-card{
  position:relative;
  border-top:4px solid var(--red);
}

.negative-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:2.6rem;
  font-weight:500;
  line-height:1;
}

.negative-card h3{
  color:var(--red);
}
@media(max-width:700px){

  .brand-logo{
    min-width:auto;
    gap:7px;
  }

  .brand-prefix{
    font-size:.48rem;
    margin-bottom:2px;
  }

  .brand-text-logo{
    width:96px;
  }

  .brand-icon-logo{
    width:34px;
    height:34px;
  }

  .final-section h2,
  .final-solution{
    font-size:clamp(2rem,9vw,2.9rem);
    line-height:1.2;
  }

  .final-solution{
    font-weight:400;
  }

  .negative-icon{
    width:46px;
    height:46px;
    font-size:2.25rem;
    margin-bottom:14px;
  }

}
/* =========================================================
   BEST SPEAK LOGO - CORRECT OFFICIAL LAYOUT
   ========================================================= */

.brand.brand-logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;

  gap:12px;

  min-width:230px;

  text-decoration:none;
}

.brand-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  width:145px;
}

.brand-prefix{
  display:block;

  margin:0 0 5px 2px;

  color:#111;

  font-family:Arial, "Helvetica Neue", sans-serif;
  font-size:1.02rem;
  font-weight:400;

  letter-spacing:.10em;
  line-height:1.15;

  white-space:nowrap;
}

.brand-text-logo{
  display:block;

  width:145px;
  height:auto;

  object-fit:contain;
}

.brand-icon-logo{
  display:block;

  width:64px;
  height:64px;

  object-fit:contain;

  flex:0 0 auto;
}


/* ===== MOBILE LOGO ===== */

@media(max-width:700px){

  .brand.brand-logo{
    gap:7px;
    min-width:auto;
  }

  .brand-left{
    width:108px;
  }

  .brand-prefix{
    margin:0 0 3px 1px;

    font-size:.76rem;
    letter-spacing:.09em;
  }

  .brand-text-logo{
    width:108px;
  }

  .brand-icon-logo{
    width:47px;
    height:47px;
  }

}
/* =========================================================
   BEST SPEAK - OFFICIAL FULL LOGO
   ========================================================= */

.brand-logo-full{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  min-width:220px;

  text-decoration:none;
}

.header-logo{
  display:block;

  width:205px;
  height:auto;

  object-fit:contain;
}


/* MOBILE */

@media(max-width:700px){

  .brand-logo-full{
    min-width:auto;
  }

  .header-logo{
    width:160px;
    height:auto;
  }

}
/* =========================================================
   MOBILE FLOW ALIGNMENT
   Canh mũi tên cùng trục trái với text
   ========================================================= */

@media(max-width:700px){

  /* Flow:
     NGHĨ TIẾNG VIỆT
     ↓
     TÌM TỪ...
  */

  .process-flow{
    display:grid;
    grid-template-columns:1fr;
    justify-items:start;
    margin-top:32px;
    padding-left:0;
  }

  .process-flow span{
    width:100%;
    padding:10px 0;

    border-bottom:1px solid var(--gold);

    text-align:left;

    font-size:1.25rem;
    line-height:1.4;
  }

  .process-flow i{
    width:auto;
    height:auto;

    display:block;

    margin:5px 0 5px 8px;
    padding:0;

    transform:none;

    color:var(--gold);

    font-size:0;
    line-height:1;
  }

  .process-flow i::after{
    content:"↓";

    display:block;

    font-size:1.5rem;
    line-height:1;
  }


  /* Flow:
     PHÁT ÂM
     ↓
     PHÁT TRIỂN CÂU NÓI...
  */

  .compact-loop{
    display:grid;
    grid-template-columns:1fr;
    justify-items:start;

    gap:0;

    padding:20px;

    text-align:left;
  }

  .compact-loop span{
    width:100%;

    padding:8px 0;

    text-align:left;

    font-size:1.25rem;
    line-height:1.4;
  }

  .compact-loop i{
    display:block;

    margin:4px 0 4px 8px;

    padding:0;

    transform:none;

    color:var(--gold);

    font-size:0;
    line-height:1;
  }

  .compact-loop i::after{
    content:"↓";

    display:block;

    font-size:1.5rem;
    line-height:1;
  }

}
/* FINAL 4 PROMISES - ADJUST TO +30% */

.final-promises div{
  font-size:1.3rem;
  font-weight:400;
  line-height:1.5;
  padding:17px 10px;
}

@media(max-width:700px){

  .final-promises div{
    font-size:1.3rem;
    font-weight:400;
    line-height:1.5;
    padding:16px 6px;
  }

}

/* =========================================================
   BEST SPEAK
   BUSINESS ENGLISH / EXECUTIVE PAGE
   ========================================================= */


/* =========================================================
   BUSINESS HERO
   ========================================================= */

.business-hero{
  position:relative;
  overflow:hidden;

  padding:95px 0 105px;

  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(201,154,66,.14),
      transparent 25%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(21,84,134,.09),
      transparent 28%
    ),
    #fff;
}

.business-hero::after{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-320px;
  bottom:-330px;

  border-radius:50%;

  border:1px solid rgba(6,28,53,.08);
}

.business-hero .container{
  position:relative;
  z-index:2;
}

.business-hero-label{
  margin-bottom:25px;

  color:var(--gold);

  font-size:1.25rem;
  font-weight:850;

  letter-spacing:.06em;
  line-height:1.35;
}

.business-hero h1{
  max-width:950px;

  font-size:
    clamp(4rem,8vw,7.4rem);

  line-height:1.06;

  letter-spacing:-.06em;
}

.business-hero h1 span{
  display:block;
  color:var(--gold);
}

.business-audience{
  max-width:780px;

  margin-top:25px;

  color:var(--navy);

  font-size:
    clamp(1.2rem,2vw,1.65rem);

  font-weight:850;

  line-height:1.45;
}

.business-opening{
  max-width:900px;

  margin-top:55px;

  padding-top:35px;

  border-top:1px solid var(--line);
}

.business-dont{
  color:var(--red);

  font-size:
    clamp(1.7rem,3vw,2.6rem);

  font-weight:900;

  line-height:1.35;
}

.business-root{
  max-width:900px;

  margin-top:14px;

  color:var(--navy);

  font-size:
    clamp(2rem,3.8vw,3.45rem);

  font-weight:400;

  line-height:1.35;

  letter-spacing:-.035em;
}

.business-root strong{
  color:var(--gold);
  font-weight:700;
}


/* =========================================================
   BUSINESS PROMISES
   ========================================================= */

.business-promise-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  margin-top:40px;

  border-top:
    1px solid rgba(255,255,255,.15);
}

.business-promise{
  display:grid;

  grid-template-columns:42px 1fr;

  align-items:start;

  gap:15px;

  padding:26px 24px;

  border-bottom:
    1px solid rgba(255,255,255,.15);
}

.business-promise:nth-child(odd){
  border-right:
    1px solid rgba(255,255,255,.15);
}

.promise-symbol{
  width:32px;
  height:32px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  font-size:1rem;
  font-weight:950;
}

.business-promise strong{
  color:#fff;

  font-size:
    clamp(1.25rem,2vw,1.7rem);

  font-weight:700;

  line-height:1.4;
}


/* =========================================================
   BUSINESS GENERAL PROBLEM
   ========================================================= */

.business-negative-list{
  max-width:1000px;

  margin-top:32px;

  border-top:1px solid var(--line);
}

.business-negative{
  display:grid;

  grid-template-columns:60px 1fr;

  gap:20px;

  padding:30px 0;

  border-bottom:1px solid var(--line);
}

.business-negative .negative-icon{
  margin:0;
}

.business-negative h3{
  margin-bottom:10px;

  color:var(--red);

  font-size:
    clamp(1.25rem,2vw,1.6rem);
}

.business-negative p{
  max-width:850px;

  color:#596674;

  line-height:1.75;
}

.business-negative p + p{
  margin-top:13px;
}


/* =========================================================
   EXECUTIVE-SPECIFIC PROBLEM
   ========================================================= */

.business-specific{
  background:var(--cream);
}

.business-specific-intro{
  max-width:980px;
}

.executive-problems{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1px;

  margin-top:45px;

  background:#dedbd4;

  border:1px solid #dedbd4;
}

.executive-problems article{
  padding:34px;

  background:#fff;
}

.executive-cross{
  width:46px;
  height:46px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin-bottom:20px;

  border-radius:50%;

  background:var(--red);

  color:#fff;

  font-size:2.2rem;

  line-height:1;
}

.executive-problems h3{
  margin-bottom:15px;

  color:var(--red);

  font-size:
    clamp(1.3rem,2vw,1.65rem);
}

.executive-problems p{
  color:#596674;

  line-height:1.75;
}

.executive-problems p + p{
  margin-top:14px;
}


/* =========================================================
   SYSTEM OPENING
   ========================================================= */

.business-system-opening{
  background:#fff;
}


/* =========================================================
   TAILOR-MADE
   Main executive visual section
   ========================================================= */

.tailored-section{
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(21,84,134,.42),
      transparent 32%
    ),
    var(--navy);

  color:#fff;
}

.tailored-section::after{
  content:"CEO";

  position:absolute;

  right:-35px;
  bottom:-90px;

  color:rgba(255,255,255,.025);

  font-size:18rem;
  font-weight:950;

  line-height:1;
}

.tailored-layout{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:70px;

  align-items:start;
}

.tailored-title h2{
  color:#fff;

  font-size:
    clamp(2.5rem,4.8vw,4.6rem);

  line-height:1.15;

  letter-spacing:-.045em;
}

.tailored-title h2 span{
  display:block;

  margin:10px 0;

  color:var(--gold);
}

.tailored-copy > p{
  color:rgba(255,255,255,.82);

  font-size:1.18rem;

  line-height:1.7;
}

.tailored-copy > p strong{
  color:#fff;
}

.tailored-items{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  margin-top:28px;

  border-top:
    1px solid rgba(255,255,255,.15);
}

.tailored-items span{
  padding:13px 5px;

  border-bottom:
    1px solid rgba(255,255,255,.15);

  color:#fff;

  font-size:.88rem;
  font-weight:800;

  line-height:1.4;
}

.tailored-items span:nth-child(odd){
  padding-right:15px;
}


/* =========================================================
   EXECUTIVE PROCESS
   ========================================================= */

.process-intro{
  margin-top:30px;

  color:var(--navy);

  font-size:1.25rem;
  font-weight:700;
}

.executive-process{
  max-width:1000px;

  margin-top:38px;

  border-top:1px solid var(--line);
}

.executive-process article{
  display:grid;

  grid-template-columns:70px 1fr;

  gap:20px;

  padding:28px 0;

  border-bottom:1px solid var(--line);
}

.process-number{
  color:var(--gold);

  font-size:1rem;
  font-weight:950;

  letter-spacing:.08em;
}

.executive-process h3{
  margin-bottom:8px;

  font-size:
    clamp(1.3rem,2vw,1.6rem);
}

.executive-process p{
  max-width:830px;

  color:#596674;

  line-height:1.75;
}

.executive-process p + p{
  margin-top:13px;
}

.executive-process-final{
  margin-top:8px;

  padding:30px 25px !important;

  border:0 !important;

  border-radius:var(--radius);

  background:var(--soft);
}


/* =========================================================
   EXECUTIVE SUMMARY
   ========================================================= */

.executive-summary{
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(21,84,134,.38),
      transparent 38%
    ),
    var(--navy);

  color:#fff;
}

.executive-summary h2{
  color:#fff;

  font-size:
    clamp(2.4rem,4.5vw,4.2rem);

  line-height:1.18;

  letter-spacing:-.04em;
}

.executive-summary h2 span{
  display:block;

  margin-top:10px;

  color:var(--gold);
}

.executive-summary-flow{
  max-width:700px;

  margin:42px auto 0;

  text-align:left;
}

.executive-summary-flow div{
  display:flex;

  align-items:center;

  gap:14px;

  padding:13px 0;

  border-bottom:
    1px solid rgba(255,255,255,.14);

  color:#fff;

  font-size:
    clamp(1.15rem,1.8vw,1.45rem);

  font-weight:600;

  line-height:1.4;
}

.executive-summary-flow div span{
  width:30px;
  height:30px;

  display:flex;

  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  font-size:.85rem;
  font-weight:950;
}

.executive-summary-flow i{
  display:block;

  margin:5px 0 5px 8px;

  color:var(--gold);

  font-size:1.4rem;
  font-style:normal;

  line-height:1;
}

.executive-commitment{
  max-width:700px;

  margin:35px auto 0;

  color:rgba(255,255,255,.76);

  font-size:1.1rem;

  line-height:1.7;
}

.executive-commitment strong{
  display:block;

  margin-top:10px;

  color:#fff;
}


/* =========================================================
   DON'T
   ========================================================= */

.executive-dont-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1px;

  margin-top:40px;

  background:var(--line);

  border:1px solid var(--line);
}

.executive-dont-grid article{
  padding:30px;

  background:#fff;

  border-top:4px solid var(--red);
}

.executive-dont-grid .negative-icon{
  margin-bottom:18px;
}

.executive-dont-grid h3{
  margin-bottom:12px;

  color:var(--red);

  font-size:
    clamp(1.25rem,2vw,1.55rem);
}

.executive-dont-grid p{
  color:#596674;

  line-height:1.75;
}


/* =========================================================
   FINAL BUSINESS CTA
   ========================================================= */

.business-final{
  color:#fff;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(21,84,134,.45),
      transparent 38%
    ),
    #05182d;
}

.business-final h2{
  color:#fff;

  font-size:
    clamp(2.5rem,5.1vw,4.7rem);

  font-weight:900;

  line-height:1.17;

  letter-spacing:-.04em;
}

.business-final-solution{
  max-width:900px;

  margin:30px auto 0;

  color:#fff;

  font-size:
    clamp(2.25rem,4.5vw,4rem);

  font-weight:400;

  line-height:1.2;

  letter-spacing:-.035em;
}

.business-once{
  margin-top:28px;

  color:var(--gold);

  font-size:
    clamp(2rem,4vw,3.5rem);

  font-weight:900;

  line-height:1.25;
}

.business-final-promises{
  max-width:720px;

  margin:42px auto 36px;

  border-top:
    1px solid rgba(255,255,255,.16);
}

.business-final-promises div{
  padding:16px 8px;

  border-bottom:
    1px solid rgba(255,255,255,.16);

  color:#fff;

  font-size:1.3rem;

  font-weight:400;

  line-height:1.5;
}

.business-final-button{
  min-height:60px;

  padding-inline:38px;
}


/* =========================================================
   BUSINESS MOBILE
   ========================================================= */

@media(max-width:700px){

  /* Hero */

  .business-hero{
    padding:60px 0 70px;
  }

  .business-hero-label{
    margin-bottom:17px;

    font-size:1.05rem;
  }

  .business-hero h1{
    font-size:
      clamp(2.7rem,13vw,4rem);

    line-height:1.1;
  }

  .business-audience{
    margin-top:20px;

    font-size:1.15rem;

    line-height:1.45;
  }

  .business-opening{
    margin-top:36px;
    padding-top:26px;
  }

  .business-dont{
    font-size:1.55rem;

    line-height:1.4;
  }

  .business-root{
    font-size:1.85rem;

    line-height:1.45;
  }


  /* Promises */

  .business-promise-grid{
    grid-template-columns:1fr;
  }

  .business-promise{
    grid-template-columns:36px 1fr;

    gap:11px;

    padding:19px 0;
  }

  .business-promise:nth-child(odd){
    border-right:0;
  }

  .promise-symbol{
    width:29px;
    height:29px;
  }

  .business-promise strong{
    font-size:1.22rem;
  }


  /* General problems */

  .business-negative{
    grid-template-columns:46px 1fr;

    gap:10px;

    padding:24px 0;
  }

  .business-negative .negative-icon{
    width:40px;
    height:40px;

    font-size:2rem;
  }


  /* Executive-specific problems */

  .executive-problems{
    grid-template-columns:1fr;
  }

  .executive-problems article{
    padding:25px;
  }


  /* Tailored */

  .tailored-layout{
    grid-template-columns:1fr;

    gap:35px;
  }

  .tailored-title h2{
    font-size:2.45rem;

    line-height:1.2;
  }

  .tailored-copy > p{
    font-size:1.05rem;
  }

  .tailored-items{
    grid-template-columns:1fr;
  }

  .tailored-items span{
    padding:11px 0;
  }


  /* Process */

  .executive-process article{
    grid-template-columns:40px 1fr;

    gap:8px;

    padding:23px 0;
  }

  .executive-process-final{
    padding:23px 17px !important;
  }


  /* Summary */

  .executive-summary h2{
    font-size:
      clamp(2.1rem,9vw,2.9rem);

    line-height:1.22;
  }

  .executive-summary-flow{
    margin-top:32px;
  }

  .executive-summary-flow div{
    font-size:1.25rem;
  }

  .executive-summary-flow i{
    margin-left:8px;
  }


  /* Don't */

  .executive-dont-grid{
    grid-template-columns:1fr;
  }

  .executive-dont-grid article{
    padding:25px;
  }


  /* Final */

  .business-final{
    padding-bottom:105px;
  }

  .business-final h2,
  .business-final-solution{
    font-size:
      clamp(2rem,9vw,2.9rem);

    line-height:1.22;
  }

  .business-final-solution{
    font-weight:400;
  }

  .business-once{
    font-size:2.15rem;

    line-height:1.3;
  }

  .business-final-promises div{
    font-size:1.3rem;

    font-weight:400;

    line-height:1.5;
  }

  .business-final-button{
    width:100%;
  }

}

/* =========================================================
   BUSINESS FINAL CONTACT INFO
   ========================================================= */

.business-contact-info{
  margin-top:25px;

  color:rgba(255,255,255,.82);

  font-size:1.05rem;
  line-height:1.7;
}

.business-contact-info p{
  margin:3px 0;
}

.business-contact-info a{
  color:#fff;
  text-decoration:none;
}

.business-contact-info a:hover{
  color:var(--gold);
}

.business-contact-info strong{
  font-weight:700;
}


/* MOBILE */

@media(max-width:700px){

  .business-contact-info{
    margin-top:22px;

    font-size:1rem;
    line-height:1.65;
  }

}

/* =========================================================
   BUSINESS TAILORED ITEMS
   +30% FONT SIZE + REGULAR WEIGHT
   ========================================================= */

.tailored-items span{
  font-size:1.15rem;
  font-weight:400;
  line-height:1.5;
}


/* MOBILE */

@media(max-width:700px){

  .tailored-items span{
    font-size:1.15rem;
    font-weight:400;
    line-height:1.5;
  }

}

/* =========================================================
   ABOUT US — FOUNDER STORY
   ========================================================= */

.about-page{
  background:#fff;
  color:var(--navy);
}

.about-reading{
  max-width:850px;
}

.about-reading > p{
  max-width:760px;
  margin:0 0 22px;
  color:#333c4b;
  font-size:1.08rem;
  line-height:1.82;
}

.about-reading > p strong{
  color:var(--navy);
}

.about-reading h2{
  margin:0 0 34px;
  color:var(--navy);
  font-size:clamp(2.1rem,4vw,3.45rem);
  line-height:1.13;
  letter-spacing:-.035em;
}

.about-reading h3{
  margin:70px 0 26px;
  padding-top:28px;
  border-top:1px solid var(--line);
  color:var(--navy);
  font-size:1.5rem;
  line-height:1.3;
}


/* HERO */

.about-hero{
  position:relative;
  overflow:hidden;
  padding:130px 0 95px;
  background:
    radial-gradient(circle at 88% 16%, rgba(197,157,72,.15), transparent 26%),
    radial-gradient(circle at 12% 86%, rgba(11,43,76,.06), transparent 27%),
    #fff;
}

.about-hero::after{
  content:"22+";
  position:absolute;
  right:-25px;
  bottom:-110px;
  color:rgba(11,43,76,.035);
  font-size:26rem;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

.about-hero-inner{
  position:relative;
  z-index:1;
  max-width:1050px;
}

.about-hero-kicker{
  margin-bottom:22px;
  color:var(--gold);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.2em;
}

.about-hero h1{
  max-width:1000px;
  margin:0;
  color:var(--navy);
  font-size:clamp(3.1rem,6.7vw,6.5rem);
  font-weight:800;
  line-height:1.01;
  letter-spacing:-.055em;
}

.about-hero h1 span{
  color:var(--gold);
}

.about-hero-lead{
  margin:42px 0 10px;
  color:#5a6470;
  font-size:1.3rem;
  line-height:1.7;
}

.about-hero-question{
  max-width:850px;
  color:var(--navy);
  font-size:clamp(1.45rem,2.6vw,2.2rem);
  font-weight:400;
  line-height:1.35;
}

.about-scroll-cue{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:65px;
  color:#8b929b;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
}

.about-scroll-cue i{
  color:var(--gold);
  font-size:1.25rem;
  font-style:normal;
}


/* GENERAL STORY */

.about-story,
.discovery-section,
.pronunciation-story,
.about-guarantee{
  padding:105px 0;
}

.story-chapter{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:30px;
}

.story-chapter span{
  display:flex;
  width:45px;
  height:45px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
}

.story-chapter p{
  margin:0;
  color:#7c8490;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.15em;
}

.story-chapter.light p{
  color:rgba(255,255,255,.55);
}

.story-quote{
  position:relative;
  margin:38px 0 42px;
  padding:10px 0 10px 30px;
  border-left:4px solid var(--gold);
  color:var(--navy);
  font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:400;
  line-height:1.45;
}

.story-emphasis{
  color:var(--navy) !important;
  font-size:1.35rem !important;
  font-weight:600;
}

.story-emphasis.gold{
  color:#e0bd69 !important;
}

.story-discovery{
  margin:45px 0;
  padding:32px 35px;
  border-left:5px solid var(--gold);
  background:#f7f4ed;
}

.story-discovery small{
  display:block;
  margin-bottom:9px;
  color:#7b7f84;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
}

.story-discovery strong{
  display:block;
  color:var(--navy);
  font-size:1.55rem;
  line-height:1.35;
}

.story-discovery.red{
  border-left-color:var(--red);
  background:#fff4f3;
}


/* DARK CHAPTER */

.about-dark{
  padding:105px 0;
  background:var(--navy);
  color:#fff;
}

.about-dark .about-reading > p{
  color:rgba(255,255,255,.78);
}

.about-dark .about-reading > p strong{
  color:#fff;
}

.about-dark h2{
  color:#fff;
}

.about-dark .story-quote{
  color:#fff;
}

.three-sayings{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:35px 0 45px;
}

.three-sayings div{
  padding:24px 18px;
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  font-size:1.05rem;
  font-weight:500;
  line-height:1.4;
}

.big-questions{
  margin:48px 0;
}

.big-questions article{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:20px;
  padding:25px 0;
  border-top:1px solid rgba(255,255,255,.14);
}

.big-questions article:last-child{
  border-bottom:1px solid rgba(255,255,255,.14);
}

.big-questions span{
  color:var(--gold);
  font-size:.82rem;
  font-weight:800;
}

.big-questions p{
  margin:0;
  color:#fff;
  font-size:1.25rem;
  font-weight:500;
  line-height:1.45;
}


/* EDITORIAL LIST */

.editorial-list{
  display:flex;
  flex-direction:column;
  margin:28px 0 35px;
}

.editorial-list span{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:#4b5562;
  font-size:1.08rem;
}

.editorial-list.ticks span::before{
  content:"✓";
  margin-right:13px;
  color:var(--gold);
  font-weight:800;
}


/* OLD SPEAKING FLOW */

.about-flow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:9px;
  margin:35px 0 45px;
  padding:25px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.about-flow span{
  color:var(--navy);
  font-size:.9rem;
  font-weight:700;
}

.about-flow i{
  color:var(--red);
  font-style:normal;
}


/* DISCOVERIES */

.discovery-section{
  background:#f7f4ed;
}

.discovery-number{
  margin-bottom:18px;
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
}

.question-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:28px 0 38px;
}

.question-stack span{
  color:var(--navy);
  font-size:1.15rem;
  line-height:1.45;
}

.major-discovery{
  margin:42px 0;
  padding:34px 0;
  border-top:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  color:var(--navy);
  font-size:clamp(1.65rem,3vw,2.45rem);
  font-weight:700;
  line-height:1.3;
}

.major-discovery.gold{
  border-color:var(--gold);
}

.major-discovery.gold strong{
  color:var(--gold);
}

.mini-flow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
  margin:38px 0;
}

.mini-flow span{
  color:var(--navy);
  font-size:.92rem;
  font-weight:700;
}

.mini-flow i{
  color:var(--gold);
  font-style:normal;
}


/* EARLY METHODS */

.sticky-places{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:25px 0 35px;
}

.sticky-places span{
  padding:9px 13px;
  background:#f5d85e;
  color:#313131;
  font-size:.76rem;
  font-weight:700;
  transform:rotate(-1deg);
}

.sticky-places span:nth-child(even){
  transform:rotate(1.2deg);
}

.method-name{
  margin:30px 0 42px;
  padding:25px 30px;
  border-left:5px solid var(--gold);
  background:#f7f4ed;
  color:var(--gold);
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  font-weight:800;
  line-height:1.2;
}

.method-name.navy{
  color:var(--navy);
}

.method-name.pronunciation-method{
  background:#fff;
}


/* US MILESTONE */

.milestone-section{
  position:relative;
  overflow:hidden;
}

.dark-discovery{
  margin:45px 0;
  padding:35px 0;
  border-top:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  color:var(--gold);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:700;
  line-height:1.3;
}

.dark-mini-flow{
  margin:35px 0;
  color:var(--gold);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.03em;
}


/* LANGUAGE EXAMPLES */

.language-example{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:25px 0 35px;
  padding:25px 28px;
  border-left:4px solid var(--gold);
  background:#fff;
}

.language-example strong{
  color:var(--navy);
  font-size:1.25rem;
}

.language-example span{
  color:#717984;
  font-size:.95rem;
}

.language-example.secondary{
  gap:10px;
}

.language-example.secondary strong:not(:first-child){
  margin-top:15px;
}

.big-principle{
  margin:45px 0;
  color:var(--gold);
  font-size:clamp(2.4rem,5vw,4.8rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
}


/* RETRIEVAL */

.three-brain-lines{
  margin:42px 0;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.three-brain-lines span{
  display:block;
  padding:7px 0;
  color:var(--navy);
  font-size:1.05rem;
  font-weight:600;
}


/* PRONUNCIATION */

.pronunciation-story{
  background:#f2f5f7;
}


/* 22+ YEARS */

.about-22-years{
  padding:115px 0;
  background:var(--navy);
}

.about-22-years .about-reading > p{
  color:rgba(255,255,255,.78);
}

.about-22-years .about-reading > p strong{
  color:#fff;
}

.about-22-years h2{
  color:#fff;
}

.years-number{
  color:var(--gold);
  font-size:clamp(7rem,18vw,13rem);
  font-weight:800;
  line-height:.78;
  letter-spacing:-.07em;
}

.years-label{
  margin:20px 0 38px;
  color:#fff;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.25em;
}

.years-question{
  margin:35px 0 55px;
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
  color:var(--gold);
  font-size:clamp(1.4rem,2.7vw,2rem);
  font-weight:500;
  line-height:1.45;
}

.learning-findings{
  margin:45px 0;
}

.learning-findings article{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:20px;
  padding:25px 0;
  border-top:1px solid rgba(255,255,255,.13);
}

.learning-findings article:last-child{
  border-bottom:1px solid rgba(255,255,255,.13);
}

.learning-findings article > span{
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
}

.learning-findings p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:1.02rem;
  line-height:1.7;
}

.learning-findings strong{
  color:#fff;
}

.founder-process{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:35px;
}

.founder-process span{
  color:#fff;
  font-size:.82rem;
  font-weight:700;
}

.founder-process i{
  color:var(--gold);
  font-style:normal;
}


/* TIMELINE */

.founder-timeline{
  padding:115px 0;
  background:#fff;
}

.timeline-intro{
  margin-bottom:60px;
  color:var(--gold);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.18em;
}

.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:145px 1fr;
  gap:45px;
  padding:20px 0 90px;
}

.timeline-item::before{
  content:"";
  position:absolute;
  left:72px;
  top:72px;
  bottom:0;
  width:1px;
  background:var(--line);
}

.timeline-item:last-child::before{
  display:none;
}

.timeline-year{
  position:relative;
  z-index:1;
  align-self:start;
  padding:14px 0;
  background:#fff;
  color:var(--gold);
  font-size:2rem;
  font-weight:800;
  line-height:1;
}

.timeline-content h2{
  margin:0 0 8px;
  color:var(--navy);
  font-size:2.3rem;
  line-height:1.1;
}

.timeline-content h3{
  margin:0 0 32px;
  padding:0;
  border:0;
  color:#7a828b;
  font-size:.9rem;
  letter-spacing:.1em;
}

.timeline-content p{
  margin:0 0 20px;
  color:#3f4854;
  font-size:1.05rem;
  line-height:1.75;
}

.timeline-highlight{
  color:var(--navy) !important;
  font-size:1.3rem !important;
  font-weight:600;
}

.gold-text{
  color:var(--gold) !important;
}

.timeline-question{
  margin:35px 0;
  padding:25px 0;
  border-top:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  color:var(--navy);
  font-size:1.3rem;
  font-weight:700;
  line-height:1.4;
}

.timeline-brand{
  color:var(--gold) !important;
  font-size:2rem !important;
  font-weight:800;
}

.timeline-questions-list,
.timeline-capabilities,
.system-statements{
  display:flex;
  flex-direction:column;
  margin:25px 0 35px;
}

.timeline-questions-list span,
.timeline-capabilities span,
.system-statements span{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:#4b5562;
  font-size:1rem;
  line-height:1.55;
}

.timeline-capabilities span{
  color:var(--navy);
  font-weight:600;
}

.timeline-item.final{
  padding-bottom:0;
}

.timeline-item.final .timeline-year{
  font-size:1.3rem;
  line-height:1.05;
}

.old-outcome{
  color:#8b9299 !important;
  text-decoration:line-through;
}

.new-outcome{
  color:var(--gold) !important;
  font-size:1.55rem !important;
  font-weight:700;
}


/* GUARANTEE */

.about-guarantee{
  background:#f7f4ed;
}

.responsibility-list{
  margin:30px 0 40px;
  padding-left:25px;
  border-left:3px solid var(--gold);
}

.responsibility-list span{
  display:block;
  padding:6px 0;
  color:#404955;
  font-size:1.08rem;
}

.three-promises-about{
  margin:40px 0;
  border-top:1px solid var(--navy);
}

.three-promises-about div{
  padding:20px 0;
  border-bottom:1px solid rgba(11,43,76,.18);
  color:var(--navy);
  font-size:1.2rem;
  font-weight:500;
}


/* MAINTENANCE */

.about-maintenance{
  padding:110px 0;
  background:var(--navy);
}

.about-maintenance h2{
  color:#fff;
}

.about-maintenance .about-reading > p{
  color:rgba(255,255,255,.78);
}

.maintenance-flow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:35px 0 55px;
}

.maintenance-flow span{
  color:#fff;
  font-size:1.15rem;
  font-weight:600;
}

.maintenance-flow i{
  margin:5px 0 5px 8px;
  color:var(--gold);
  font-size:1.3rem;
  font-style:normal;
}

.commit-maintain{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:45px 0;
}

.commit-maintain div{
  padding:30px;
  border:1px solid rgba(255,255,255,.14);
}

.commit-maintain small{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
}

.commit-maintain strong{
  color:#fff;
  font-size:1.3rem;
  font-weight:500;
}


/* CLOSING STORY */

.about-closing-story{
  padding:115px 0;
  background:#fff;
}

.closing-old-flow{
  margin:35px 0 45px;
  padding:25px 0;
  border-top:1px solid var(--red);
  border-bottom:1px solid var(--red);
  color:var(--red);
  font-size:1rem;
  font-weight:700;
  line-height:1.6;
}

.problem-solution-lines{
  margin:50px 0;
}

.problem-solution-lines > div{
  display:grid;
  grid-template-columns:1fr 35px 1.25fr;
  gap:15px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid var(--line);
}

.problem-solution-lines > div:last-child{
  border-bottom:1px solid var(--line);
}

.problem-solution-lines span{
  color:#7c848d;
  font-size:.85rem;
  font-weight:700;
  line-height:1.4;
}

.problem-solution-lines i{
  color:var(--gold);
  font-style:normal;
  text-align:center;
}

.problem-solution-lines strong{
  color:var(--navy);
  font-size:.95rem;
  line-height:1.45;
}

.journey-ending{
  display:flex;
  flex-direction:column;
  margin-top:70px;
}

.journey-ending span{
  color:#626b76;
  font-size:1.15rem;
  line-height:1.7;
}

.journey-ending strong{
  margin-top:25px;
  color:var(--gold);
  font-size:clamp(3rem,7vw,6rem);
  line-height:1;
}

.journey-ending em{
  margin-top:15px;
  color:var(--navy);
  font-size:1.25rem;
  font-style:normal;
}


/* FINAL */

.about-final{
  padding:120px 0 100px;
  background:var(--navy);
  color:#fff;
  text-align:center;
}

.about-final-inner{
  max-width:950px;
}

.about-final-brand{
  margin-bottom:35px;
  color:var(--gold);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.25em;
}

.about-final h2{
  margin:0;
  color:#fff;
  font-size:clamp(2.2rem,5vw,4.5rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.035em;
}

.about-final-gold{
  margin:30px 0 55px;
  color:var(--gold);
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:500;
  line-height:1.2;
}

.about-final-promises{
  max-width:750px;
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,.18);
}

.about-final-promises div{
  padding:17px 8px;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.3rem;
  font-weight:400;
  line-height:1.5;
}

.about-policy-note{
  max-width:750px;
  margin:35px auto 0;
  color:rgba(255,255,255,.55);
  font-size:.82rem;
  line-height:1.65;
}

.founder-signature{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:70px;
  color:rgba(255,255,255,.65);
  font-size:.92rem;
  line-height:1.65;
}

.founder-signature strong{
  margin:10px 0 2px;
  color:#fff;
  font-size:1.35rem;
  font-weight:600;
}


/* =========================================================
   ABOUT — MOBILE
   ========================================================= */

@media(max-width:700px){

  .about-reading > p{
    font-size:1rem;
    line-height:1.72;
    margin-bottom:19px;
  }

  .about-reading h2{
    margin-bottom:27px;
    font-size:2rem;
    line-height:1.14;
  }

  .about-reading h3{
    margin-top:55px;
    font-size:1.3rem;
  }


  /* HERO */

  .about-hero{
    padding:80px 0 65px;
  }

  .about-hero::after{
    right:-20px;
    bottom:-35px;
    font-size:11rem;
  }

  .about-hero-kicker{
    margin-bottom:17px;
  }

  .about-hero h1{
    font-size:2.65rem;
    line-height:1.06;
    letter-spacing:-.045em;
  }

  .about-hero-lead{
    margin-top:32px;
    font-size:1.15rem;
  }

  .about-hero-question{
    font-size:1.35rem;
    line-height:1.42;
  }

  .about-scroll-cue{
    margin-top:45px;
  }


  /* SECTIONS */

  .about-story,
  .discovery-section,
  .pronunciation-story,
  .about-guarantee,
  .about-dark,
  .about-maintenance,
  .about-closing-story{
    padding:72px 0;
  }

  .story-chapter{
    margin-bottom:25px;
  }

  .story-quote{
    margin:30px 0 34px;
    padding-left:20px;
    font-size:1.3rem;
  }

  .story-emphasis{
    font-size:1.18rem !important;
  }

  .story-discovery{
    margin:35px 0;
    padding:25px 22px;
  }

  .story-discovery strong{
    font-size:1.3rem;
  }


  /* DARK */

  .three-sayings{
    grid-template-columns:1fr;
    gap:7px;
  }

  .three-sayings div{
    padding:17px 16px;
  }

  .big-questions article{
    grid-template-columns:40px 1fr;
    gap:12px;
  }

  .big-questions p{
    font-size:1.05rem;
  }


  /* FLOWS */

  .about-flow{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .about-flow span{
    padding:5px 0;
    font-size:.9rem;
  }

  .about-flow i{
    margin:1px 0 1px 8px;
  }

  .mini-flow{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .mini-flow span{
    padding:5px 0;
  }

  .mini-flow i{
    margin-left:8px;
    transform:rotate(90deg);
  }


  /* DISCOVERIES */

  .major-discovery{
    padding:25px 0;
    font-size:1.55rem;
  }

  .method-name{
    padding:21px 20px;
    font-size:1.65rem;
  }


  /* 22 YEARS */

  .about-22-years{
    padding:80px 0;
  }

  .years-number{
    font-size:8rem;
  }

  .learning-findings article{
    grid-template-columns:40px 1fr;
    gap:12px;
  }

  .founder-process{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .founder-process span{
    padding:5px 0;
  }

  .founder-process i{
    margin-left:8px;
    transform:rotate(90deg);
  }


  /* TIMELINE */

  .founder-timeline{
    padding:80px 0;
  }

  .timeline-intro{
    margin-bottom:45px;
  }

  .timeline-item{
    display:block;
    padding:0 0 75px;
  }

  .timeline-item::before{
    display:none;
  }

  .timeline-year{
    display:inline-block;
    margin-bottom:20px;
    padding:9px 13px;
    background:var(--navy);
    color:var(--gold);
    font-size:1.3rem;
  }

  .timeline-content h2{
    font-size:1.9rem;
  }

  .timeline-question{
    font-size:1.12rem;
  }


  /* MAINTENANCE */

  .commit-maintain{
    grid-template-columns:1fr;
    gap:8px;
  }

  .commit-maintain div{
    padding:23px;
  }


  /* CLOSING */

  .problem-solution-lines > div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
  }

  .problem-solution-lines i{
    margin-left:8px;
    transform:rotate(90deg);
  }

  .journey-ending{
    margin-top:55px;
  }


  /* FINAL */

  .about-final{
    padding:80px 0 75px;
  }

  .about-final h2{
    font-size:2.2rem;
    line-height:1.14;
  }

  .about-final-gold{
    margin:25px 0 42px;
    font-size:1.9rem;
  }

  .about-final-promises div{
    padding:16px 6px;
    font-size:1.3rem;
    font-weight:400;
    line-height:1.5;
  }

  .founder-signature{
    margin-top:55px;
  }

}

/* =========================================================
   ABOUT PAGE — ENLARGE SMALL SECTION LABELS +50%
   ========================================================= */

.about-page .about-hero-kicker{
  font-size:1.14rem;
}

.about-page .story-chapter p{
  font-size:1.14rem;
}

.about-page .story-discovery small{
  font-size:1.14rem;
}

.about-page .discovery-number{
  font-size:1.14rem;
}

/* Các eyebrow / nhãn nhỏ khác riêng trong trang About */
.about-page .eyebrow{
  font-size:1.14rem;
}


/* MOBILE */
@media(max-width:700px){

  .about-page .about-hero-kicker,
  .about-page .story-chapter p,
  .about-page .story-discovery small,
  .about-page .discovery-number,
  .about-page .eyebrow{
    font-size:1.05rem;
    line-height:1.45;
  }

}

/* ABOUT — Founder development process: font +50% */

.about-page .founder-process span{
  font-size:1.1rem;
  font-weight:700;
  line-height:1.4;
}

.about-page .founder-process i{
  font-size:1.23rem;
  line-height:1.4;
}


/* MOBILE */
@media(max-width:700px){

  .about-page .founder-process span{
    font-size:1.1rem;
    line-height:1.4;
  }

  .about-page .founder-process i{
    font-size:1.23rem;
  }

}

/* ABOUT — Increase selected labels +50% */

.about-page .timeline-intro{
  font-size:1.2rem;
  line-height:1.4;
}

.about-page .about-final-brand{
  font-size:1.2rem;
  line-height:1.4;
}


/* MOBILE */
@media(max-width:700px){

  .about-page .timeline-intro{
    font-size:1.2rem;
    line-height:1.4;
  }

  .about-page .about-final-brand{
    font-size:1.2rem;
    line-height:1.4;
  }

}

/* =========================================================
   ABOUT — FOUNDER SIGNATURE
   ========================================================= */

.about-page .founder-signature{
  max-width:900px;
  margin:70px auto 0;

  display:grid;
  grid-template-columns:minmax(260px, 38%) 1fr;
  gap:55px;
  align-items:center;

  padding-top:45px;
  border-top:1px solid rgba(6,28,53,.14);
}


/* PHOTO */

.about-page .founder-photo-wrap{
  width:100%;
  overflow:hidden;

  background:#eee;
}

.about-page .founder-photo{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;

  object-fit:cover;
  object-position:center 28%;
}


/* COPY */

.about-page .founder-signature-copy{
  text-align:left;
}

.about-page .founder-location{
  margin-bottom:18px;

  color:var(--gold);

  font-size:.85rem;
  font-weight:800;
  letter-spacing:.08em;
}

.about-page .founder-signature-copy h3{
  margin:0 0 18px;

  color:var(--navy);

  font-size:clamp(2rem,3vw,2.8rem);
  font-weight:900;
  line-height:1.15;
}

.about-page .founder-signature-copy p{
  margin:5px 0;

  color:#596674;

  font-size:1.05rem;
  line-height:1.6;
}

.about-page .founder-youtube{
  margin-top:18px !important;
}

.about-page .founder-youtube a{
  color:var(--navy);
  font-weight:800;
  text-decoration:none;

  border-bottom:1px solid var(--gold);
}

.about-page .founder-youtube a:hover{
  color:var(--gold);
}


/* MOBILE */

@media(max-width:700px){

  .about-page .founder-signature{
    margin-top:50px;

    grid-template-columns:1fr;
    gap:28px;

    padding-top:32px;
  }

  .about-page .founder-photo-wrap{
    width:100%;
    max-width:430px;
  }

  .about-page .founder-photo{
    aspect-ratio:4 / 5;
    object-position:center 28%;
  }

  .about-page .founder-signature-copy h3{
    font-size:2rem;
  }

  .about-page .founder-signature-copy p{
    font-size:1rem;
  }

}

/* =========================================================
   FIX ABOUT FOUNDER SIGNATURE ON DARK BLUE BACKGROUND
   ========================================================= */

.about-page .about-final .founder-signature-copy{
  color:#ffffff !important;
}

.about-page .about-final .founder-signature-copy h3{
  color:#ffffff !important;
}

.about-page .about-final .founder-signature-copy p{
  color:rgba(255,255,255,.82) !important;
}

.about-page .about-final .founder-location{
  color:#d4af5a !important;
}

.about-page .about-final .founder-youtube a,
.about-page .about-final .founder-youtube a:visited{
  color:#ffffff !important;
  text-decoration:none;
  border-bottom:1px solid #d4af5a;
}

.about-page .about-final .founder-youtube a:hover{
  color:#d4af5a !important;
}