/* Gebze Sürücü Kursu — design tokens and shared layout */
:root {
  --heading:#20242B;
  --brand-red-dark:#A80F16;
  --brand-red:#D71920;
  --accent-red:#D71920;
  --ink:#20242B;
  --muted:#606060;
  --line:#E5E7EB;
  --light:#F8F9FB;
  --surface:#FFFFFF;
  --radius:20px;
  --shadow:0 20px 55px #20242B0c
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:118px
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  font-size:16px;
  line-height:1.75
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  color:var(--heading)
}
h1,h2 {
  font-weight:800;
  line-height:1.15;
  letter-spacing:-2px
}
h2 {
  font-size:44px
}
h2 span {
  font-weight:550;
  color:#606060
}
h3 {
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.6px
}
p {
  color:var(--muted)
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
a,button,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
svg {
  width:24px;
  height:24px;
  flex-shrink:0
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent-red);
  outline-offset:5px
}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding:78px 0
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--brand-red);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  margin-bottom:18px
}
.tiny-line {
  width:25px;
  height:2px;
  background:var(--brand-red)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:18px 24px;
  background:var(--brand-red);
  color:#fff;
  border:1px solid var(--brand-red);
  border-radius:12px;
  font-size:15px;
  font-weight:750;
  line-height:1.4;
  transition:transform .25s,background .25s,box-shadow .25s;
  box-shadow:0 7px 18px #D7192018
}
.button svg {
  width:20px;
  height:20px
}
.button:hover {
  background:var(--brand-red);
  transform:translateY(-3px);
  box-shadow:0 10px 25px #D7192030
}
.button.secondary {
  color:var(--heading);
  background:#ffffff90;
  border-color:#F8F9FB;
  box-shadow:none
}
.button.secondary:hover {
  background:#fff
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  color:var(--brand-red);
  font-size:15px;
  font-weight:750;
  line-height:1.6
}
.text-link svg {
  width:20px
}
.text-link:hover {
  color:var(--brand-red)
}
.muted {
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:18px
}
/* Header and accessible dropdown */
.topline {
  background:var(--heading);
  color:#F8F9FB;
  font-size:11px;
  padding:8px 0
}
.topline .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.topline i,.photo-tag i {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent-red);
  border-radius:50%;
  margin-right:7px
}
.demo-badge {
  font-size:9px;
  font-weight:800;
  letter-spacing:1.6px;
  padding:3px 10px;
  line-height:1.5;
  color:#F8F9FB;
  border:1px solid #606060;
  border-radius:5px
}
.top-message {
  font-size:10px;
  color:#F8F9FB
}
.header {
  position:sticky;
  top:0;
  z-index:50;
  background:#ffffffed;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.nav-wrap {
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  flex-shrink:0
}
.brand-symbol {
  position:relative;
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--brand-red);
  color:#fff;
  box-shadow:inset 0 0 0 1px #ffffff30,0 6px 16px #D7192020
}
.brand-symbol svg {
  height:38px;
  width:38px;
  transform:rotate(-12deg)
}
.logo-road {
  position:absolute;
  bottom:8px;
  right:7px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent-red);
  border:2px solid #fff
}
.brand-words {
  font-size:32px;
  font-weight:800;
  letter-spacing:1.4px;
  line-height:1.06;
  color:var(--heading)
}
.brand small {
  display:block;
  font-size:10px;
  letter-spacing:3.1px;
  font-weight:750;
  margin-top:7px
}
.nav-wrap nav {
  display:flex;
  align-items:center;
  gap:27px;
  font-size:16px;
  font-weight:650
}
.nav-wrap nav>a,.dropdown-toggle {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding:35px 0;
  white-space:nowrap
}
.nav-wrap nav>a:hover,.nav-wrap nav>a.active {
  color:var(--brand-red)
}
.nav-wrap nav>a.active:after {
  content:'';
  position:absolute;
  left:0;
  bottom:23px;
  width:25px;
  height:3px;
  border-radius:3px;
  background:var(--brand-red)
}
.header-cta {
  font-size:14px;
  padding:16px 20px;
  gap:13px;
  white-space:nowrap
}
.menu-toggle {
  display:none
}
.nav-dropdown {
  position:relative
}
.dropdown-toggle {
  border:0;
  color:var(--ink);
  font-weight:650;
  font-size:16px;
  background:none
}
.dropdown-toggle svg {
  width:15px;
  height:15px;
  transition:transform .25s
}
.dropdown-toggle[aria-expanded=true] {
  color:var(--brand-red)
}
.dropdown-toggle[aria-expanded=true] svg {
  transform:rotate(180deg)
}
.submenu {
  position:absolute;
  top:calc(100% - 4px);
  left:-30px;
  width:355px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 22px 60px #20242B20;
  padding:20px;
  opacity:0;
  transform:translateY(12px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s,transform .25s,visibility .25s
}
.nav-dropdown.is-open .submenu {
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto
}
.submenu-label {
  display:block;
  font-size:10px;
  color:#606060;
  letter-spacing:1.8px;
  margin:0 10px 12px;
  font-weight:800
}
.submenu>a {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 10px;
  border-radius:10px;
  font-size:14px;
  line-height:1.5
}
.submenu>a:hover {
  background:#F8F9FB;
  color:var(--brand-red)
}
.submenu small {
  display:block;
  font-size:10px;
  font-weight:500;
  color:var(--muted);
  margin-top:3px
}
.nav-class {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid #F8F9FB;
  border-radius:10px;
  color:var(--brand-red);
  font-weight:800;
  font-size:13px;
  flex-shrink:0;
  background:#F8F9FB
}
.submenu p {
  font-size:10px;
  margin-top:12px;
  padding:12px 10px 0;
  border-top:1px solid var(--line);
  line-height:1.6
}
/* Hero */
.hero {
  background:radial-gradient(ellipse at 90% 35%,#F8F9FB,transparent 50%),linear-gradient(120deg,#F8F9FB,#F8F9FB);
  overflow:hidden;
  position:relative
}
.hero-grid {
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:55px;
  align-items:center;
  padding:54px 0 48px
}
.hero-copy {
  animation:enter .8s both
}
.hero .eyebrow {
  font-size:10px;
  letter-spacing:1.5px;
  flex-wrap:wrap;
  gap:8px
}
.local-tag {
  padding:4px 8px;
  border:1px solid #F8F9FB;
  background:#F8F9FB;
  border-radius:5px;
  margin-left:7px;
  font-size:9px;
  letter-spacing:1px
}
.hero h1 {
  font-size:59px;
  line-height:1.14;
  letter-spacing:-3px;
  margin-bottom:23px
}
.hero h1 span {
  color:var(--brand-red)
}
.hero-copy>p {
  max-width:540px;
  font-size:17px;
  line-height:1.85;
  color:#606060
}
.hero-actions {
  display:flex;
  gap:12px;
  margin-top:28px
}
.hero-actions .button {
  font-size:14px;
  gap:12px;
  padding:18px 20px
}
.hero-trust {
  display:flex;
  gap:22px;
  margin-top:23px;
  font-size:12px;
  font-weight:650;
  color:#606060
}
.hero-trust>span {
  display:flex;
  align-items:center;
  gap:7px
}
.hero-trust svg {
  height:17px;
  width:17px;
  color:var(--brand-red)
}
.hero-note {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px
}
.note-circle {
  width:38px;
  height:38px;
  background:#F8F9FB;
  border:4px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--brand-red)
}
.hero-note strong {
  display:block;
  font-size:13px
}
.hero-note small {
  font-size:11px;
  color:var(--muted)
}
.hero-visual {
  position:relative;
  padding:14px 15px 26px 0;
  animation:enter 1s .1s both;
  isolation:isolate
}
.photo-frame {
  height:530px;
  position:relative;
  border-radius:110px 22px 22px 22px;
  overflow:hidden;
  background:#F8F9FB;
  box-shadow:0 22px 55px #20242B16;
  border:6px solid #fff
}
.photo-frame img {
  object-position:49% center;
  animation:breathe 14s ease-in-out infinite alternate
}
.photo-frame:after {
  content:'';
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,#20242Ba6)
}
.photo-tag {
  position:absolute;
  right:20px;
  top:22px;
  border-radius:40px;
  background:#fffffff5;
  padding:9px 13px;
  font-size:11px;
  font-weight:750;
  z-index:1;
  box-shadow:0 6px 18px #20242B0a
}
.photo-caption {
  position:absolute;
  bottom:23px;
  left:25px;
  right:16px;
  font-size:8px;
  color:#fff;
  letter-spacing:1px;
  z-index:1
}
.float-card {
  position:absolute;
  bottom:68px;
  left:-28px;
  z-index:3;
  background:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 22px;
  border:1px solid #F8F9FB;
  border-radius:16px;
  box-shadow:0 18px 50px #20242B19;
  animation:float 7s ease-in-out infinite
}
.float-icon {
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#F8F9FB;
  color:var(--brand-red);
  height:51px;
  width:51px
}
.float-card strong {
  display:block;
  font-size:17px;
  line-height:1.4;
  letter-spacing:-.4px
}
.float-card small {
  font-size:10px;
  color:var(--muted)
}
.card-check {
  margin-left:5px;
  display:grid;
  place-items:center;
  background:#dff5ed;
  color:var(--brand-red);
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:12px
}
.hero-orbit {
  position:absolute;
  inset:-8px -9px 8px 30px;
  border:1px solid #F8F9FB;
  border-radius:135px 32px 50px 32px;
  z-index:-1;
  transform:rotate(3deg)
}
.visual-dot {
  position:absolute;
  right:-7px;
  bottom:7px;
  width:65px;
  height:65px;
  border-radius:50%;
  border:1px solid #E5E7EB;
  background:#F8F9FB
}
.visual-dot:before {
  content:'';
  position:absolute;
  left:8px;
  top:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-red)
}
.visual-corner {
  position:absolute;
  right:-7px;
  top:56px;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-red);
  color:#fff;
  border:5px solid #F8F9FB;
  border-radius:15px;
  font-size:23px;
  font-weight:800;
  transform:rotate(9deg)
}
.visual-corner>span {
  font-size:14px;
  margin-top:-13px
}
.vertical-label {
  position:absolute;
  writing-mode:vertical-rl;
  right:-20px;
  top:160px;
  font-size:8px;
  font-weight:700;
  color:#606060;
  letter-spacing:2px
}
.hero-bottom {
  border-top:1px solid #F8F9FB;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:13px;
  color:#606060
}
.hero-bottom>span {
  display:flex;
  align-items:center;
  gap:9px
}
.hero-bottom>span:first-child {
  gap:5px
}
.hero-bottom strong {
  color:var(--heading)
}
.hero-bottom svg {
  width:20px;
  height:20px;
  color:var(--brand-red)
}
.hero-bottom>a {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #F8F9FB;
  border-radius:50%;
  font-size:20px
}
/* Image-led course cards */
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:32px
}
.section-heading>p {
  font-size:16px;
  max-width:360px
}
.section-heading small {
  display:block;
  font-size:12px;
  margin-top:12px;
  line-height:1.65
}
.course-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.course-card {
  display:flex;
  flex-direction:column;
  position:relative;
  padding:0 23px 23px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  background:#fff;
  box-shadow:0 6px 20px #20242B03
}
.course-card:hover {
  transform:translateY(-7px);
  box-shadow:var(--shadow)
}
.course-photo {
  flex-shrink:0;
  position:relative;
  height:180px;
  margin:0 -23px 22px;
  overflow:hidden;
  background:#F8F9FB
}
.course-photo:after {
  content:'';
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(transparent,#20242B80)
}
.course-photo img {
  transition:transform .6s
}
.course-card:hover .course-photo img {
  transform:scale(1.05)
}
.course-letter {
  position:absolute;
  left:18px;
  bottom:14px;
  z-index:1;
  font-size:38px;
  line-height:1;
  font-weight:800;
  color:#fff;
  letter-spacing:-1px
}
.photo-disclaimer {
  position:absolute;
  right:11px;
  bottom:11px;
  z-index:1;
  color:#fff;
  font-size:9px;
  text-shadow:0 1px 5px #000;
  font-weight:600
}
.course-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:13px
}
.course-top>span:first-child {
  display:none
}
.class-label {
  font-size:10px;
  font-weight:800;
  color:var(--brand-red);
  letter-spacing:1.4px
}
.course-card h3 {
  font-size:24px;
  margin-bottom:12px
}
.course-card p {
  font-size:16px;
  line-height:1.7;
  min-height:0;
  flex:1
}
.course-card small {
  display:block;
  font-size:11px;
  color:#606060;
  margin-top:18px;
  line-height:1.7;
  min-height:0
}
.course-card>a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
  color:var(--brand-red);
  font-size:13px;
  font-weight:800
}
.course-card>a svg {
  width:18px;
  height:18px
}
.course-foot {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:28px;
  font-size:14px;
  color:var(--muted)
}
.course-foot>a {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:750;
  color:var(--brand-red)
}
.course-foot svg {
  width:18px;
  height:18px
}
/* Training, approach and timeline */
.private {
  background:linear-gradient(120deg,#F8F9FB,#F8F9FB)
}
.split {
  display:grid;
  grid-template-columns:1fr 1.02fr;
  align-items:center;
  gap:65px
}
.lesson-image {
  height:470px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow)
}
.lesson-image img {
  object-position:50% center
}
.image-label {
  position:absolute;
  left:24px;
  bottom:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 20px;
  background:#fff;
  border-radius:12px;
  font-size:14px;
  font-weight:750;
  box-shadow:var(--shadow)
}
.image-label svg {
  color:var(--brand-red)
}
.image-demo {
  position:absolute;
  left:27px;
  bottom:18px;
  font-size:10px;
  color:white;
  text-shadow:0 1px 6px #000
}
.private-copy>p {
  margin-top:22px;
  font-size:16px
}
.check-list {
  list-style:none;
  margin:22px 0 27px;
  padding:0;
  font-size:15px;
  font-weight:600
}
.check-list li {
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0
}
.check-list li:before {
  content:'✓';
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  flex-shrink:0;
  border-radius:50%;
  background:#dcf1e9;
  color:var(--brand-red);
  font-size:12px
}
.center-heading {
  max-width:750px;
  margin:0 auto 36px;
  text-align:center
}
.center-heading .eyebrow {
  justify-content:center
}
.center-heading p {
  font-size:16px;
  max-width:650px;
  margin:20px auto 0
}
.approach-grid {
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:40px;
  align-items:stretch
}
.approach-photo {
  position:relative;
  min-height:500px;
  border-radius:22px;
  overflow:hidden
}
.approach-photo img {
  position:absolute;
  inset:0;
  object-position:35% center
}
.approach-photo:after {
  content:'';
  position:absolute;
  inset:30% 0 0;
  background:linear-gradient(transparent,#20242Be8)
}
.approach-photo figcaption {
  position:absolute;
  bottom:25px;
  left:28px;
  right:25px;
  z-index:1
}
.approach-photo .eyebrow {
  color:#E5E7EB;
  font-size:10px
}
.approach-photo strong {
  display:block;
  color:#fff;
  font-size:28px;
  line-height:1.35;
  letter-spacing:-.8px
}
.approach-photo small {
  display:block;
  color:#F8F9FB;
  font-size:10px;
  margin-top:18px
}
.benefit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.benefit {
  padding:25px 23px;
  border-radius:18px;
  border:1px solid #F8F9FB;
  background:linear-gradient(135deg,#F8F9FB,#F8F9FB);
  transition:transform .3s,box-shadow .3s
}
.benefit:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}
.benefit>span {
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow:0 5px 12px #20242B06;
  color:var(--brand-red);
  width:44px;
  height:44px;
  border-radius:12px;
  margin-bottom:17px
}
.benefit h3 {
  font-size:21px;
  margin-bottom:10px;
  letter-spacing:-.5px
}
.benefit p {
  font-size:16px;
  line-height:1.7
}
.process {
  background:radial-gradient(ellipse at 10% 80%,#D71920,transparent 55%),var(--heading);
  color:#fff;
  position:relative;
  overflow:hidden
}
.process h2 {
  color:#fff
}
.process h2 span {
  color:#E5E7EB
}
.process .eyebrow {
  color:#606060
}
.process .text-link {
  color:#F8F9FB
}
.process-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:stretch;
  margin-top:40px
}
.process-photo {
  position:relative;
  min-height:560px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #606060
}
.process-photo img {
  position:absolute;
  inset:0;
  object-position:38% center
}
.process-photo:after {
  content:'';
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,#20242Bd4)
}
.process-photo figcaption {
  position:absolute;
  bottom:58px;
  left:25px;
  right:25px;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px
}
.process-photo-icon {
  background:#fff;
  color:var(--brand-red);
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:24px
}
.process-photo strong {
  font-size:20px;
  letter-spacing:-.5px
}
.process-photo small {
  display:block;
  font-size:12px;
  color:#F8F9FB;
  margin-top:5px
}
.process-image-note {
  position:absolute;
  left:26px;
  bottom:22px;
  color:#F8F9FB;
  z-index:1;
  font-size:10px
}
.steps {
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative
}
.step {
  padding:0 0 27px 78px;
  position:relative;
  flex:1
}
.step:last-child {
  padding-bottom:0
}
.step:not(:last-child):before {
  content:'';
  position:absolute;
  top:47px;
  bottom:0;
  left:25px;
  border-left:1px dashed #606060
}
.step>span {
  position:absolute;
  top:0;
  left:0;
  width:51px;
  height:51px;
  display:grid;
  place-items:center;
  border:1px solid #606060;
  background:#20242B;
  color:#E5E7EB;
  font-size:20px;
  font-weight:750;
  border-radius:50%
}
.step:first-child>span {
  background:var(--brand-red);
  border-color:var(--brand-red);
  color:#fff;
  box-shadow:0 0 0 6px #D719201c
}
.step h3 {
  color:#fff;
  font-size:22px;
  margin-bottom:10px;
  padding-top:5px
}
.step p {
  color:#F8F9FB;
  font-size:16px;
  line-height:1.7;
  max-width:400px
}
.process-note {
  font-size:12px;
  color:#E5E7EB;
  margin-top:30px;
  max-width:900px
}
/* Instructor and fleet editorial panels */
.team-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px
}
.staff-card {
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 25px #20242B04;
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s,box-shadow .3s
}
.staff-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}
.staff-photo {
  position:relative;
  height:305px;
  overflow:hidden
}
.staff-photo:after {
  content:'';
  position:absolute;
  inset:60% 0 0;
  background:linear-gradient(transparent,#20242B70)
}
.staff-photo img {
  object-position:center 47%;
  transition:transform .6s
}
.staff-card:hover img {
  transform:scale(1.03)
}
.staff-image-label {
  position:absolute;
  left:20px;
  top:20px;
  padding:6px 11px;
  border:1px solid #ffffff66;
  background:#ffffffed;
  color:var(--heading);
  border-radius:6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px
}
.staff-photo .photo-disclaimer {
  left:23px;
  right:auto;
  bottom:16px;
  font-size:10px
}
.staff-body {
  padding:29px 30px
}
.staff-body .eyebrow {
  font-size:10px;
  margin-bottom:13px
}
.staff-body h3 {
  font-size:26px;
  margin-bottom:16px
}
.staff-body>p {
  font-size:16px
}
.feature-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0
}
.feature-tags span {
  font-size:11px;
  font-weight:700;
  color:var(--brand-red);
  background:#F8F9FB;
  border:1px solid #F8F9FB;
  border-radius:30px;
  padding:5px 11px
}
.staff-body .content-note {
  font-size:12px;
  line-height:1.75;
  background:#F8F9FB;
  padding:14px;
  border-radius:9px;
  margin-bottom:20px;
  color:#606060
}
.experience {
  background:linear-gradient(105deg,#F8F9FB,#F8F9FB)
}
.experience-inner {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px;
  align-items:center
}
.experience-placeholder {
  padding-left:36px;
  border-left:1px solid #F8F9FB
}
.quote-mark {
  display:block;
  color:var(--brand-red);
  font-size:70px;
  line-height:1;
  font-family:Georgia,serif
}
.experience-placeholder h3 {
  font-size:25px;
  margin-bottom:16px
}
.experience-placeholder p {
  font-size:16px;
  margin-bottom:22px
}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px
}
.faq-grid>div>p {
  font-size:16px;
  margin:24px 0
}
.accordion details {
  border-bottom:1px solid var(--line)
}
.accordion details:first-child {
  border-top:1px solid var(--line)
}
summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:24px 0;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  color:var(--heading)
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  color:var(--brand-red);
  font-size:25px;
  font-weight:400;
  transition:transform .3s
}
details[open] summary span {
  transform:rotate(45deg)
}
details>p {
  font-size:16px;
  padding:0 25px 25px 0;
  line-height:1.8
}
/* Demo form and contact */
.registration {
  background:radial-gradient(ellipse at 0 100%,#F8F9FB,transparent 65%),#F8F9FB
}
.registration-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:95px;
  align-items:center
}
.registration h2 {
  font-size:53px;
  line-height:1.2
}
.registration h2 span {
  color:var(--brand-red)
}
.registration-copy>p {
  max-width:420px;
  font-size:17px;
  margin-top:26px
}
.demo-notice {
  display:flex;
  align-items:start;
  gap:14px;
  font-size:13px;
  line-height:1.9;
  color:#606060;
  max-width:410px;
  margin-top:36px
}
.demo-notice svg {
  color:var(--brand-red);
  width:22px;
  height:22px;
  margin-top:4px
}
.demo-notice strong {
  color:var(--heading)
}
.registration form {
  padding:35px;
  border:1px solid #F8F9FB;
  background:#fff;
  border-radius:22px;
  box-shadow:0 18px 60px #D719200c
}
.registration form h3 {
  font-size:27px
}
.registration form>p {
  font-size:14px;
  margin:7px 0 26px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
label {
  display:block;
  font-size:13px;
  font-weight:750;
  margin-bottom:18px;
  color:var(--heading)
}
label>span {
  font-weight:500;
  color:var(--muted)
}
input:not([type=checkbox]),select,textarea {
  width:100%;
  display:block;
  margin-top:8px;
  padding:13px 12px;
  min-height:49px;
  min-width:0;
  font-size:16px;
  border:1px solid #F8F9FB;
  border-radius:9px;
  background:#fcfdff;
  color:var(--ink)
}
input::placeholder,textarea::placeholder {
  color:#606060;
  font-size:13px
}
textarea {
  resize:vertical
}
input:focus,select:focus,textarea:focus {
  outline:3px solid #D7192024;
  border-color:var(--brand-red)
}
.checkbox {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.7
}
.checkbox input {
  height:17px;
  width:17px;
  flex-shrink:0;
  margin-top:2px;
  accent-color:var(--brand-red)
}
.registration form .button {
  width:100%;
  font-size:15px
}
.registration form #form-status {
  margin:16px 0 0;
  color:var(--brand-red);
  font-size:14px
}
.registration form #form-status:empty {
  display:none
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:85px;
  align-items:center
}
.contact h2 {
  font-size:42px
}
.contact-grid>div>p {
  font-size:16px;
  margin:22px 0 28px;
  max-width:450px
}
.contact-detail {
  display:flex;
  align-items:center;
  gap:15px;
  margin:20px 0
}
.contact-detail>span {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  flex-shrink:0;
  background:#F8F9FB;
  border-radius:12px;
  color:var(--brand-red);
  font-size:24px
}
.contact-detail strong {
  font-size:15px
}
.contact-detail p {
  font-size:13px
}
.map-placeholder {
  position:relative;
  min-height:355px;
  display:grid;
  place-items:center;
  border:1px solid #dfe8e3;
  border-radius:22px;
  overflow:hidden;
  background-color:#edf3ef;
  background-image:linear-gradient(30deg,transparent 47%,#dce6df 48%,#dce6df 52%,transparent 53%),linear-gradient(120deg,transparent 47%,#dce6df 48%,#dce6df 52%,transparent 53%);
  background-size:110px 90px
}
.map-road {
  position:absolute;
  transform:rotate(-30deg);
  height:25px;
  width:150%;
  background:#fff;
  border:1px solid #dee7e2
}
.r2 {
  transform:rotate(65deg);
  height:18px;
  left:-100px
}
.r3 {
  transform:rotate(10deg);
  top:20px
}
.map-center {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:25px;
  background:#fffffff2;
  border:1px solid #fff;
  border-radius:16px;
  box-shadow:var(--shadow)
}
.map-center>span {
  font-size:35px;
  color:var(--brand-red);
  line-height:1.2
}
.map-center strong {
  font-size:16px;
  margin:10px 0
}
.map-center small {
  font-size:11px;
  color:var(--muted)
}
.map-note {
  position:absolute;
  bottom:17px;
  left:23px;
  color:#61776b;
  letter-spacing:1.5px;
  font-size:9px
}
footer {
  background:#F8F9FB;
  border-top:1px solid var(--line);
  padding-top:55px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:40px
}
.footer-grid p {
  font-size:14px;
  max-width:240px;
  margin-top:20px
}
.footer-grid h3 {
  font-size:16px;
  letter-spacing:0;
  margin-bottom:18px
}
.footer-grid>div>a:not(.brand) {
  display:block;
  margin:10px 0;
  font-size:14px;
  color:var(--muted)
}
.footer-grid a:hover {
  color:var(--brand-red)
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#606060
}
.whatsapp {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:40;
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  background:#25D366;
  box-shadow:0 7px 25px #20242B25;
  border-radius:40px;
  padding:13px 18px;
  font-size:12px;
  font-weight:750;
  transition:transform .25s
}
.whatsapp:hover {
  transform:translateY(-3px)
}
.whatsapp svg {
  width:24px;
  height:24px
}
.skip {
  position:fixed;
  top:-100px;
  left:10px;
  padding:12px;
  background:#fff;
  z-index:100
}
.skip:focus {
  top:10px
}
.image-fallback {
  display:grid;
  place-items:center;
  height:100%;
  padding:30px;
  background:#F8F9FB;
  color:var(--heading);
  text-align:center;
  font-size:16px
}
.js-motion .reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s,transform .65s
}
.js-motion .reveal.visible {
  opacity:1;
  transform:none
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes float {
  50% {
    transform:translateY(-7px)
  }
}
@keyframes breathe {
  to {
    transform:scale(1.035)
  }
}
/* Desktop and tablet */
@media(min-width:1550px) {
  .hero-grid {
    padding-block:68px
  }
  .hero h1 {
    font-size:64px
  }
  .photo-frame {
    height:560px
  }
}
@media(max-width:1250px) {
  .container {
    width:calc(100% - 64px)
  }
  .nav-wrap {
    gap:20px
  }
  .nav-wrap nav {
    gap:21px
  }
  .brand-words {
    font-size:29px
  }
  .brand-symbol {
    width:49px;
    height:49px
  }
  .header-cta {
    padding:15px;
    font-size:13px;
    gap:8px
  }
  .hero-grid {
    gap:35px
  }
  .hero h1 {
    font-size:52px
  }
  .hero-actions .button {
    padding:16px;
    font-size:13px
  }
  .hero-trust {
    font-size:11px;
    gap:16px
  }
  .hero-bottom {
    font-size:11px
  }
  .photo-frame {
    height:520px
  }
  .course-grid {
    gap:16px
  }
  .course-card {
    padding-inline:20px
  }
  .course-photo {
    margin-inline:-20px
  }
  .course-card p {
    font-size:16px;
    min-height:0;
    flex:1
  }
  .split {
    gap:45px
  }
  .benefit {
    padding:23px 20px
  }
  .benefit h3 {
    font-size:21px
  }
  .process-layout {
    gap:45px
  }
  .registration-grid {
    gap:55px
  }
  .footer-grid {
    gap:28px
  }
}
@media(max-width:1100px) {
  .header-cta {
    margin-left:auto;
    margin-right:50px;
    font-size:14px;
    padding:15px 20px
  }
  .nav-wrap {
    height:90px
  }
  .menu-toggle {
    position:absolute;
    right:31px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    gap:6px;
    border:1px solid #F8F9FB;
    background:#F8F9FB;
    border-radius:10px
  }
  .menu-toggle span {
    display:block;
    width:21px;
    height:2px;
    background:var(--heading);
    transition:transform .25s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4px) rotate(-45deg)
  }
  .nav-wrap nav {
    position:absolute;
    left:0;
    right:0;
    top:90px;
    display:block;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:0 32px;
    max-height:0;
    visibility:hidden;
    overflow:hidden;
    transition:max-height .35s,padding .35s,visibility .35s;
    box-shadow:0 16px 30px #20242B0d
  }
  .nav-wrap nav.open {
    max-height:calc(100dvh - 120px);
    padding:15px 32px 22px;
    visibility:visible;
    overflow-y:auto
  }
  .nav-wrap nav>a,.dropdown-toggle {
    display:flex;
    padding:13px 0;
    min-height:48px;
    width:100%;
    font-size:16px
  }
  .nav-wrap nav>a.active:after {
    bottom:9px;
    width:22px;
    height:2px
  }
  .dropdown-toggle {
    justify-content:space-between
  }
  .submenu {
    position:static;
    width:auto;
    padding:0 14px;
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transform:none;
    box-shadow:none;
    background:#F8F9FB;
    border-color:transparent;
    transition:max-height .3s,padding .3s,opacity .3s,visibility .3s;
    margin:0
  }
  .nav-dropdown.is-open .submenu {
    max-height:450px;
    padding:16px 14px;
    opacity:1;
    visibility:visible;
    border-color:var(--line);
    margin-bottom:10px
  }
  .submenu>a {
    font-size:15px;
    padding:11px 8px
  }
  .submenu small {
    font-size:12px
  }
  .hero-grid {
    gap:30px
  }
  .hero h1 {
    font-size:48px
  }
  .hero-copy>p {
    font-size:16px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .hero-actions .button {
    width:245px;
    font-size:14px;
    justify-content:space-between
  }
  .hero-trust {
    flex-direction:column;
    gap:7px;
    margin-top:17px;
    font-size:12px
  }
  .hero-note {
    display:none
  }
  .photo-frame {
    height:550px
  }
  .float-card {
    left:-20px;
    padding:16px;
    gap:10px
  }
  .float-card strong {
    font-size:15px
  }
  .float-card small {
    font-size:10px
  }
  .float-icon {
    width:43px;
    height:43px
  }
  .card-check {
    display:none
  }
  .hero-bottom {
    font-size:11px
  }
  .hero-bottom>span:first-child {
    display:none
  }
  .section-heading>p {
    max-width:310px
  }
  h2 {
    font-size:40px
  }
  .section {
    padding:68px 0
  }
  .course-grid {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .course-photo {
    height:225px
  }
  .course-card p {
    min-height:0;
    flex:1
  }
  .course-card small {
    min-height:0
  }
  .course-card h3 {
    font-size:24px
  }
  .course-card {
    padding-inline:25px
  }
  .course-photo {
    margin-inline:-25px
  }
  .split {
    gap:35px
  }
  .private-copy h2 {
    font-size:36px
  }
  .lesson-image {
    height:530px
  }
  .image-label {
    left:17px;
    right:17px;
    padding:13px 14px;
    font-size:12px;
    gap:8px
  }
  .private-copy .text-link {
    font-size:14px
  }
  .approach-grid {
    grid-template-columns:.9fr 1.2fr;
    gap:24px
  }
  .benefit-grid {
    gap:16px
  }
  .benefit {
    padding:20px 18px
  }
  .benefit p {
    font-size:16px
  }
  .benefit h3 {
    font-size:21px
  }
  .approach-photo strong {
    font-size:27px
  }
  .approach-photo figcaption {
    left:22px;
    right:18px
  }
  .process-layout {
    gap:35px;
    grid-template-columns:.9fr 1fr
  }
  .step {
    padding-left:68px;
    padding-bottom:24px
  }
  .step h3 {
    font-size:21px
  }
  .step p {
    font-size:16px
  }
  .process-photo {
    min-height:610px
  }
  .process-photo figcaption {
    left:20px;
    right:20px;
    gap:12px
  }
  .process-photo strong {
    font-size:18px
  }
  .staff-body {
    padding:26px
  }
  .staff-photo {
    height:270px
  }
  .staff-body h3 {
    font-size:24px
  }
  .registration-grid {
    grid-template-columns:.9fr 1.1fr;
    gap:40px
  }
  .registration h2 {
    font-size:45px
  }
  .registration form {
    padding:28px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .faq-grid,.experience-inner {
    gap:40px
  }
  .contact-grid {
    gap:45px
  }
  .footer-grid {
    grid-template-columns:1.2fr 1fr;
    gap:35px
  }
  .footer-bottom {
    flex-wrap:wrap
  }
  .footer-bottom span:nth-child(2) {
    order:3;
    width:100%
  }
}
@media(max-width:800px) {
  .container {
    width:calc(100% - 48px)
  }
  .menu-toggle {
    right:24px
  }
  .top-message {
    display:none
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:25px;
    padding-top:42px
  }
  .hero h1 {
    font-size:43px;
    letter-spacing:-2.3px
  }
  .hero-copy>p {
    font-size:16px
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1px;
    gap:7px
  }
  .local-tag {
    margin-left:0;
    font-size:8px
  }
  .hero .tiny-line {
    display:none
  }
  .hero-actions .button {
    width:100%;
    padding:15px 14px;
    font-size:13px;
    gap:8px
  }
  .hero-trust {
    font-size:11px
  }
  .photo-frame {
    height:570px;
    border-top-left-radius:85px
  }
  .photo-tag {
    top:18px;
    right:12px;
    font-size:9px;
    padding:8px
  }
  .photo-caption {
    font-size:7px;
    left:16px;
    letter-spacing:.5px
  }
  .float-card {
    bottom:65px;
    left:-10px;
    padding:14px 13px;
    gap:8px
  }
  .float-card strong {
    font-size:14px
  }
  .float-card small {
    font-size:9px
  }
  .float-icon {
    width:36px;
    height:36px
  }
  .float-icon svg {
    width:23px
  }
  .hero-orbit {
    inset:0 -6px 14px 20px
  }
  .vertical-label {
    display:none
  }
  .visual-corner {
    right:-5px;
    width:45px;
    height:45px;
    font-size:20px
  }
  .visual-dot {
    right:-2px;
    width:50px;
    height:50px
  }
  .hero-bottom {
    font-size:10px;
    gap:15px
  }
  .hero-bottom>span {
    gap:6px
  }
  .hero-bottom svg {
    width:17px;
    height:17px
  }
  .hero-bottom>a {
    display:none
  }
  h2 {
    font-size:38px
  }
  .section-heading {
    gap:26px;
    align-items:start
  }
  .section-heading>p {
    max-width:235px;
    font-size:16px
  }
  .section-heading small {
    font-size:11px
  }
  .course-grid {
    gap:20px
  }
  .course-photo {
    height:210px
  }
  .course-card p {
    min-height:0;
    flex:1
  }
  .course-card small {
    font-size:11px
  }
  .course-foot {
    font-size:12px;
    gap:12px
  }
  .split {
    grid-template-columns:1fr;
    gap:32px
  }
  .lesson-image {
    height:375px
  }
  .private-copy h2 {
    font-size:40px
  }
  .private-copy h2 br:nth-child(2) {
    display:none
  }
  .private-copy>p {
    max-width:620px
  }
  .image-label {
    right:auto;
    font-size:14px;
    left:24px;
    padding:15px 20px
  }
  .approach-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .approach-photo {
    min-height:340px
  }
  .approach-photo img {
    object-position:50% 45%
  }
  .approach-photo strong {
    font-size:30px
  }
  .benefit {
    padding:24px
  }
  .benefit h3 {
    font-size:23px
  }
  .process .section-heading {
    align-items:end
  }
  .process .section-heading>.text-link {
    max-width:170px;
    font-size:14px
  }
  .process-layout {
    grid-template-columns:.9fr 1fr;
    gap:25px
  }
  .step {
    padding-left:54px
  }
  .step>span {
    height:40px;
    width:40px;
    font-size:16px
  }
  .step:not(:last-child):before {
    left:20px;
    top:40px
  }
  .step h3 {
    font-size:21px;
    padding-top:3px
  }
  .process-photo {
    min-height:660px
  }
  .process-photo-icon {
    display:none
  }
  .process-photo figcaption {
    left:18px;
    right:15px;
    bottom:55px
  }
  .process-photo strong {
    font-size:20px
  }
  .process-photo small {
    font-size:11px
  }
  .process-image-note {
    left:18px;
    font-size:9px
  }
  .team-grid {
    gap:20px
  }
  .staff-photo {
    height:240px
  }
  .staff-body {
    padding:24px
  }
  .staff-body h3 {
    font-size:24px
  }
  .staff-body .eyebrow {
    font-size:9px;
    letter-spacing:1px
  }
  .staff-body>p {
    font-size:16px
  }
  .staff-body .content-note {
    font-size:12px
  }
  .staff-body .text-link {
    font-size:14px;
    gap:10px
  }
  .staff-image-label {
    font-size:8px;
    left:15px;
    top:15px
  }
  .staff-photo .photo-disclaimer {
    left:15px;
    font-size:9px
  }
  .experience-inner,.faq-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .experience-placeholder {
    padding-left:27px
  }
  .faq-grid>div>p {
    margin:20px 0
  }
  .registration-grid {
    grid-template-columns:.85fr 1.15fr;
    gap:28px
  }
  .registration h2 {
    font-size:39px
  }
  .registration-copy>p {
    font-size:16px
  }
  .demo-notice {
    font-size:12px;
    gap:10px
  }
  .registration form {
    padding:25px
  }
  .registration form h3 {
    font-size:25px
  }
  .registration form .button {
    font-size:14px;
    gap:10px
  }
  .contact-grid {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .contact h2 {
    font-size:38px
  }
  .contact .eyebrow {
    font-size:10px
  }
  .contact-detail p {
    font-size:12px
  }
  .map-center {
    padding:20px 14px
  }
  .map-center strong {
    font-size:14px
  }
  .map-center small {
    font-size:10px
  }
  .map-placeholder {
    min-height:370px
  }
  .footer-grid .brand-words {
    font-size:28px
  }
}
/* Mobile layouts and reduced motion */
@media(max-width:600px) {
  html {
    scroll-padding-top:98px
  }
  .container {
    width:calc(100% - 40px)
  }
  .topline {
    padding:7px 0;
    font-size:9px
  }
  .topline .container {
    gap:8px
  }
  .demo-badge {
    font-size:8px;
    padding:3px 7px;
    letter-spacing:1px
  }
  .nav-wrap {
    height:84px;
    gap:10px
  }
  .brand {
    gap:8px
  }
  .brand-symbol {
    width:43px;
    height:43px;
    border-radius:12px
  }
  .brand-symbol svg {
    width:30px;
    height:30px
  }
  .logo-road {
    height:8px;
    width:8px;
    bottom:6px;
    right:5px
  }
  .brand-words {
    font-size:26px;
    letter-spacing:.8px
  }
  .brand small {
    font-size:8px;
    letter-spacing:2px;
    margin-top:5px
  }
  .header-cta {
    margin-right:41px;
    padding:12px 10px;
    font-size:11px;
    gap:0;
    border-radius:9px;
    max-width:110px;
    text-align:center;
    line-height:1.5
  }
  .header-cta svg {
    display:none
  }
  .menu-toggle {
    right:18px;
    width:37px;
    height:40px;
    border-radius:9px
  }
  .nav-wrap nav {
    top:84px;
    padding-inline:20px
  }
  .nav-wrap nav.open {
    padding-inline:20px
  }
  .submenu-label {
    font-size:9px
  }
  .submenu>a {
    font-size:14px
  }
  .submenu small {
    font-size:10px
  }
  .nav-class {
    width:34px;
    height:34px;
    font-size:11px
  }
  .hero-grid {
    grid-template-columns:1fr;
    padding:32px 0 25px;
    gap:29px
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1px;
    margin-bottom:18px
  }
  .local-tag {
    margin-left:4px;
    font-size:8px;
    padding:3px 7px
  }
  .hero h1 {
    font-size:43px;
    letter-spacing:-2.5px;
    line-height:1.14;
    margin-bottom:20px
  }
  .hero-copy>p {
    font-size:16px;
    line-height:1.85;
    max-width:360px
  }
  .hero-actions {
    flex-direction:column;
    gap:10px;
    margin-top:24px;
    align-items:stretch
  }
  .hero-actions .button {
    font-size:15px;
    padding:16px 19px;
    justify-content:space-between
  }
  .hero-trust {
    flex-direction:row;
    flex-wrap:wrap;
    gap:9px 17px;
    font-size:10px;
    margin-top:20px
  }
  .hero-trust svg {
    width:15px;
    height:15px
  }
  .hero-visual {
    padding:8px 9px 20px 8px
  }
  .photo-frame {
    height:355px;
    border-radius:75px 19px 19px 19px;
    border-width:4px
  }
  .photo-frame img {
    object-position:50% center
  }
  .photo-tag {
    right:13px;
    top:17px;
    font-size:9px;
    padding:8px 10px
  }
  .float-card {
    left:0;
    bottom:55px;
    padding:14px 17px;
    gap:12px;
    border-radius:13px
  }
  .float-card strong {
    font-size:15px
  }
  .float-card small {
    font-size:9px
  }
  .float-icon {
    width:42px;
    height:42px
  }
  .photo-caption {
    bottom:18px;
    font-size:6px;
    letter-spacing:.6px;
    left:18px;
    right:10px
  }
  .hero-orbit {
    inset:0 -1px 10px 17px;
    border-radius:95px 28px 38px 22px;
    transform:rotate(2deg)
  }
  .visual-corner {
    top:38px;
    right:-3px
  }
  .visual-dot {
    bottom:0;
    right:-2px;
    height:44px;
    width:44px
  }
  .hero-bottom {
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    padding:22px 0;
    font-size:13px
  }
  .hero-bottom>span:first-child {
    display:flex;
    font-size:14px;
    justify-content:center;
    margin-bottom:6px
  }
  .hero-bottom>span:not(:first-child) {
    display:flex;
    justify-content:center
  }
  .hero-bottom svg {
    width:19px;
    height:19px
  }
  .section {
    padding:56px 0
  }
  h2 {
    font-size:38px;
    letter-spacing:-1.9px;
    line-height:1.18
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.3px;
    margin-bottom:16px
  }
  .section-heading {
    display:block;
    margin-bottom:27px
  }
  .section-heading>p {
    margin-top:20px;
    max-width:100%;
    font-size:16px
  }
  .section-heading small {
    font-size:12px;
    margin-top:12px
  }
  .course-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .course-card {
    padding:0 24px 24px;
    border-radius:18px
  }
  .course-photo {
    height:210px;
    margin:0 -24px 22px
  }
  .course-letter {
    left:22px;
    font-size:45px;
    bottom:16px
  }
  .photo-disclaimer {
    font-size:10px;
    right:15px;
    bottom:14px
  }
  .course-card h3 {
    font-size:24px
  }
  .course-card p {
    min-height:0;
    font-size:16px
  }
  .course-card small {
    font-size:12px;
    margin-top:18px;
    min-height:0
  }
  .course-card>a {
    font-size:14px;
    padding-top:18px
  }
  .class-label {
    font-size:11px
  }
  .course-foot {
    flex-direction:column;
    text-align:center;
    gap:12px;
    font-size:14px
  }
  .course-foot>a {
    font-size:14px
  }
  .split {
    gap:30px
  }
  .lesson-image {
    height:320px;
    border-radius:18px
  }
  .image-label {
    font-size:12px;
    left:17px;
    right:17px;
    bottom:44px;
    padding:13px 15px;
    gap:8px
  }
  .image-demo {
    left:21px;
    bottom:17px;
    font-size:9px
  }
  .private-copy h2 {
    font-size:38px
  }
  .private-copy h2 br:nth-child(2) {
    display:initial
  }
  .private-copy>p {
    font-size:16px;
    line-height:1.85
  }
  .check-list {
    font-size:15px;
    margin:20px 0 25px
  }
  .check-list li {
    align-items:flex-start
  }
  .check-list li:before {
    margin-top:4px
  }
  .private-copy .text-link {
    font-size:15px;
    gap:10px
  }
  .muted {
    font-size:12px
  }
  .center-heading {
    text-align:left;
    margin-bottom:27px
  }
  .center-heading .eyebrow {
    justify-content:flex-start
  }
  .center-heading p {
    font-size:16px;
    margin-top:20px
  }
  .approach-photo {
    min-height:380px;
    border-radius:18px
  }
  .approach-photo img {
    object-position:43% center
  }
  .approach-photo figcaption {
    left:23px;
    right:22px;
    bottom:24px
  }
  .approach-photo strong {
    font-size:27px
  }
  .approach-photo small {
    font-size:10px
  }
  .benefit-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .benefit {
    position:relative;
    padding:25px 24px 25px 84px;
    min-height:160px
  }
  .benefit>span {
    position:absolute;
    left:21px;
    top:26px;
    margin:0;
    width:43px;
    height:43px
  }
  .benefit h3 {
    font-size:21px;
    line-height:1.35
  }
  .benefit p {
    font-size:16px;
    line-height:1.75
  }
  .process .section-heading>.text-link {
    max-width:none;
    margin-top:22px;
    font-size:15px
  }
  .process-layout {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:27px
  }
  .process-photo {
    min-height:340px;
    border-radius:18px
  }
  .process-photo img {
    object-position:50% center
  }
  .process-photo figcaption {
    left:22px;
    right:20px;
    bottom:51px;
    gap:11px
  }
  .process-photo-icon {
    display:grid;
    width:40px;
    height:40px;
    border-radius:10px
  }
  .process-photo strong {
    font-size:18px
  }
  .process-photo small {
    font-size:10px
  }
  .process-image-note {
    left:23px;
    bottom:20px;
    font-size:9px
  }
  .step {
    padding-left:70px;
    padding-bottom:31px
  }
  .step>span {
    width:46px;
    height:46px;
    font-size:18px
  }
  .step:not(:last-child):before {
    top:46px;
    left:23px
  }
  .step h3 {
    font-size:22px;
    padding-top:6px
  }
  .step p {
    font-size:16px;
    line-height:1.8
  }
  .process-note {
    font-size:12px;
    margin-top:26px
  }
  .team-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .staff-photo {
    height:255px
  }
  .staff-body {
    padding:25px 23px
  }
  .staff-body h3 {
    font-size:24px
  }
  .staff-body .eyebrow {
    font-size:10px;
    letter-spacing:1.2px
  }
  .staff-body .text-link {
    font-size:14px
  }
  .staff-body .content-note {
    font-size:12px
  }
  .feature-tags span {
    font-size:11px
  }
  .staff-image-label {
    font-size:9px
  }
  .staff-photo .photo-disclaimer {
    font-size:9px
  }
  .experience-inner {
    gap:26px
  }
  .experience-placeholder {
    padding-left:22px
  }
  .quote-mark {
    font-size:60px
  }
  .experience-placeholder h3 {
    font-size:24px
  }
  .experience-placeholder p {
    font-size:16px
  }
  .experience-placeholder .text-link {
    font-size:15px
  }
  .faq-grid {
    gap:25px
  }
  .faq-grid>div>p {
    font-size:16px
  }
  .faq-grid .text-link {
    font-size:15px
  }
  summary {
    font-size:16px;
    padding:23px 0;
    gap:20px
  }
  summary span {
    font-size:26px;
    flex-shrink:0
  }
  details>p {
    font-size:16px;
    padding-right:15px
  }
  .registration-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .registration h2 {
    font-size:44px;
    letter-spacing:-2px
  }
  .registration-copy>p {
    font-size:16px;
    max-width:100%;
    margin-top:22px
  }
  .demo-notice {
    font-size:12px;
    margin-top:25px;
    gap:12px
  }
  .registration form {
    padding:26px 22px;
    border-radius:18px
  }
  .registration form h3 {
    font-size:25px
  }
  .registration form>p {
    font-size:14px
  }
  label {
    font-size:13px;
    margin-bottom:19px
  }
  .checkbox {
    font-size:12px
  }
  .registration form .button {
    font-size:14px;
    padding:17px 12px
  }
  .registration form #form-status {
    font-size:14px
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .contact h2 {
    font-size:38px
  }
  .contact-grid>div>p {
    font-size:16px
  }
  .contact-detail strong {
    font-size:15px
  }
  .contact-detail p {
    font-size:13px
  }
  .map-placeholder {
    min-height:300px
  }
  .map-center {
    padding:24px 18px
  }
  .map-center strong {
    font-size:16px
  }
  .map-center small {
    font-size:11px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:32px 20px
  }
  .footer-grid>div:first-child {
    grid-column:1/-1
  }
  .footer-grid .brand-words {
    font-size:31px
  }
  .footer-grid .brand-symbol {
    width:49px;
    height:49px
  }
  .footer-grid p {
    font-size:14px;
    max-width:280px;
    margin-top:19px
  }
  .footer-grid h3 {
    font-size:15px;
    line-height:1.6
  }
  .footer-grid>div>a:not(.brand) {
    font-size:13px
  }
  .footer-grid>div:last-child {
    grid-column:1/-1
  }
  .footer-bottom {
    font-size:10px;
    gap:12px;
    padding-bottom:80px
  }
  .footer-bottom span:first-child {
    max-width:250px
  }
  .footer-bottom span:nth-child(2) {
    font-size:9px
  }
  .whatsapp {
    bottom:15px;
    right:15px;
    font-size:11px;
    padding:11px 15px
  }
  .whatsapp svg {
    width:22px;
    height:22px
  }
}
@media(max-width:370px) {
  .container {
    width:calc(100% - 32px)
  }
  .brand-symbol {
    width:37px;
    height:37px
  }
  .brand-words {
    font-size:23px
  }
  .brand small {
    font-size:7px
  }
  .brand {
    gap:7px
  }
  .header-cta {
    padding:10px 7px;
    font-size:10px;
    margin-right:38px
  }
  .menu-toggle {
    right:15px;
    width:34px
  }
  .hero h1 {
    font-size:39px
  }
  .hero-trust {
    gap:8px;
    font-size:9px
  }
  h2 {
    font-size:35px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js-motion .reveal {
    opacity:1;
    transform:none
  }
}
/* Premium v4 — existing identity, richer editorial composition */
.section{padding-block:82px}
.hero{background:radial-gradient(ellipse at 78% 28%,#E5E7EB 0,transparent 53%),linear-gradient(125deg,#fff 5%,#F8F9FB 75%)}
.hero-grid{grid-template-columns:.95fr 1.15fr;gap:40px;padding-block:56px 42px}
.hero h1{font-size:clamp(48px,4.7vw,72px);letter-spacing:-3.5px;line-height:1.08;font-weight:800}
.hero-copy>p{font-size:18px;max-width:470px;color:#606060}
.hero-visual{padding:18px 0 28px 0}
.photo-frame{height:570px;border-radius:110px 26px 110px 26px;border:8px solid #fff;box-shadow:0 30px 70px #D719202b;transform:rotate(1.5deg)}
.photo-frame img{object-position:48% center;transform:scale(1.03)}
.float-card{border:1px solid #ffffffa8;box-shadow:0 22px 50px #20242B24;backdrop-filter:blur(18px);bottom:55px;left:-24px}
.photo-tag{background:#20242Bdb;color:white;backdrop-filter:blur(12px)}
.hero-bottom{border-top:1px solid #F8F9FB}
.courses{background:linear-gradient(#fff,#F8F9FB)}
.course-grid{gap:22px}
.course-card{border-radius:24px;padding:0 23px 24px;box-shadow:0 14px 32px #D719200c;border:1px solid #F8F9FB}
.course-photo{height:225px;margin:0 -23px 24px}
.course-photo img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.course-card:hover .course-photo img{transform:scale(1.065)}
.course-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px #D719201c}
.course-letter{background:#ffffffec!important;color:var(--brand-red)!important;border-radius:14px;font-size:32px!important;padding:6px 16px;line-height:1.3;backdrop-filter:blur(10px)}
.course-card h3{font-size:29px}
.course-card>a{background:#F8F9FB;color:var(--brand-red);border:1px solid #F8F9FB;border-radius:12px;padding:14px 16px;margin-top:22px;font-weight:800;transition:background .25s,color .25s}
.course-card>a:hover{background:var(--brand-red);color:#fff}
.private{background:linear-gradient(130deg,#F8F9FB,#fff 70%)}
.lesson-image,.approach-photo{box-shadow:0 24px 55px #D7192014}
.benefit{box-shadow:0 12px 30px #D7192009;border-radius:20px}
.process{background:radial-gradient(ellipse at 0 70%,#D71920 0,transparent 60%),#20242B}
.process-layout{grid-template-columns:1.05fr 1fr;gap:55px}
.process-photo{border:1px solid #ffffff30;box-shadow:0 25px 60px #0003;border-radius:26px}
.steps{gap:12px}
.step{padding:18px 20px 18px 86px;border:1px solid #E5E7EB32;border-radius:16px;background:#ffffff06}
.step>span{left:15px;top:22px;background:var(--brand-red);border:1px solid #606060;color:#fff;width:48px;height:48px}
.step:not(:last-child):before{left:39px;top:70px;height:calc(100% - 30px);background:#60606070;z-index:1}
.step-kicker{color:#E5E7EB;letter-spacing:1.8px;font-size:10px;font-weight:800;display:block;margin-bottom:7px}
.step h3{font-size:23px;padding-top:0}.step p{margin-top:7px;font-size:16px}
.team{background:linear-gradient(180deg,#F8F9FB,#fff)}
.staff-card{border-radius:26px;box-shadow:0 15px 40px #D719200e}
.staff-photo{height:330px}.staff-body{padding:30px 32px}
.mentoring-strip{margin-top:24px;padding:26px 30px;display:grid;grid-template-columns:.8fr 1fr 1fr 1fr;gap:25px;background:#F8F9FB;border:1px solid #F8F9FB;border-radius:20px;align-items:center}
.mentoring-strip>span{font-size:11px;letter-spacing:2px;color:var(--brand-red);font-weight:800}.mentoring-strip b{font-size:17px}.mentoring-strip p{font-size:14px;margin-top:7px;color:#606060}
.registration{position:relative;isolation:isolate;background:radial-gradient(ellipse at 15% 80%,#D71920 0,transparent 60%),linear-gradient(120deg,#20242B,#D71920);color:#fff;overflow:hidden}
.registration:before{content:'';position:absolute;width:650px;height:650px;border:1px solid #60606026;border-radius:50%;left:-230px;bottom:-360px;z-index:-1;box-shadow:0 0 0 70px #60606009,0 0 0 140px #60606006}
.registration-grid{gap:65px;align-items:center;grid-template-columns:1fr 1.05fr}
.registration .eyebrow{color:#E5E7EB}.registration h2{font-size:clamp(44px,4.5vw,66px);line-height:1.1;color:#fff}.registration h2 span{color:#E5E7EB}
.registration-copy>p{color:#F8F9FB;font-size:18px}
.registration-path{display:flex;align-items:center;gap:16px;margin-top:30px;color:#E5E7EB;font-size:12px}.registration-path b{display:block;color:#fff;font-size:13px;margin-top:6px}.registration-path i{font-size:22px;font-style:normal}
.demo-notice{background:#ffffff0c;border:1px solid #E5E7EB35;padding:18px;border-radius:16px;color:#F8F9FB;line-height:1.7}
.registration form{color:#20242B;background:#fff;border:1px solid #F8F9FB;box-shadow:0 30px 80px #0003;border-radius:26px;padding:36px}
.form-eyebrow{display:inline-flex;background:#F8F9FB;color:var(--brand-red);padding:7px 12px;border-radius:7px;font-size:10px;font-weight:800;letter-spacing:1.7px;margin-bottom:16px}
.registration form h3{font-size:30px}.registration input:not([type=checkbox]),.registration select,.registration textarea{background:#F8F9FB;border:1px solid #F8F9FB;border-radius:11px;min-height:52px;font-size:16px}.registration form .button{box-shadow:0 10px 24px #D719203b;min-height:58px}
.button{transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-3px);box-shadow:0 12px 28px #D7192030}
@media(min-width:1101px){.reveal:nth-child(2){transition-delay:.08s}.reveal:nth-child(3){transition-delay:.16s}.reveal:nth-child(4){transition-delay:.24s}}
@media(max-width:1100px){.hero-grid{gap:25px;grid-template-columns:1fr 1fr}.hero h1{font-size:52px}.photo-frame{height:505px}.mentoring-strip{grid-template-columns:1fr 1fr}.registration-grid{gap:35px}.registration form{padding:28px}.course-photo{height:230px}.process-layout{gap:30px}}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr;padding-block:40px 22px}.hero-copy>p{max-width:560px}.hero h1{font-size:60px}.hero-visual{max-width:620px;width:100%;margin:auto}.photo-frame{height:460px;border-radius:70px 22px}.float-card{left:14px;bottom:35px}.process-layout{grid-template-columns:1fr}.process-photo{min-height:340px;height:390px}.registration-grid{grid-template-columns:1fr}.registration h2{font-size:58px}.registration-copy>p{max-width:560px}.registration-copy h2 br:nth-of-type(2){display:none}.staff-photo{height:280px}.section{padding-block:65px}}
@media(max-width:560px){.section{padding-block:52px}.hero h1{font-size:46px;letter-spacing:-2.5px}.hero-copy>p{font-size:17px}.hero-grid{gap:18px}.photo-frame{height:350px;border-width:5px;border-radius:60px 18px;transform:none}.hero-visual{padding-top:10px}.float-card{left:12px;bottom:24px}.photo-caption{font-size:8px}.course-photo{height:240px}.course-card{padding-inline:23px}.course-card h3{font-size:28px}.course-card>a{font-size:15px}.step{padding:18px 16px 18px 78px}.step h3{font-size:21px}.step p{font-size:16px}.mentoring-strip{grid-template-columns:1fr;padding:24px;gap:22px}.mentoring-strip>span{padding-bottom:4px}.staff-body{padding:26px 23px}.staff-photo{height:260px}.registration h2{font-size:46px;letter-spacing:-2px}.registration form{padding:26px 20px;border-radius:22px}.registration form h3{font-size:27px}.registration-path{gap:13px}.registration-path b{font-size:12px}.demo-notice{font-size:13px}.registration .form-row{grid-template-columns:1fr}.process-photo{height:330px;min-height:330px}.photo-tag{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.photo-frame{transform:none}}

.visual-source{position:relative;margin:14px 12px 0;text-align:right;font-size:10px;line-height:1.5;color:#606060;font-weight:600;letter-spacing:.2px}.photo-caption{left:auto;right:25px;bottom:25px;max-width:205px;padding:7px 10px;border-radius:6px;background:#20242Bc9;font-size:9px;line-height:1.5;text-align:right;z-index:4}
@media(max-width:560px){.visual-source{font-size:10px;margin-top:12px;text-align:left}.photo-caption{right:14px;bottom:12px;font-size:8px;max-width:150px}}
.step:last-child{padding-bottom:20px}.registration .demo-notice strong{color:#fff}.registration .demo-notice svg{color:#E5E7EB}