/* ── MAYER-CONSULTING · HOME PAGE STYLES ── */

/* hero */
.hero{
  padding: 88px 0 112px;
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, #0E2236 0%, #14304D 38%, #1B4068 72%, #2B5680 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(234,243,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,243,250,.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 100% 90% at 30% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 30% 40%, #000 30%, transparent 85%);
}
.hero::after{
  content:"";
  position:absolute; right:-200px; bottom:-200px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,124,123,.18), transparent 70%);
  pointer-events:none;
}
.hero > .wrap{ position: relative; z-index: 1 }

h1.h1{
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: rgb(164, 172, 179);
  font-weight: 400;
  max-width: 20ch;
  margin: 0 0 40px;
  text-wrap: balance;
}
h1.h1 em{
  font-style: italic;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  color: var(--teal-soft);
  letter-spacing: -.01em;
}
.hero-sub{
  color:#C5D2E1; font-size: 18px; line-height: 1.6;
  max-width: 62ch; margin: 0 0 18px; text-wrap: pretty; font-weight: 400;
}
.hero-sub:first-of-type{
  color:#E7ECF2; font-size: 19px; margin-top: -16px;
}
.hero-sub + .ctas{ margin-top: 38px }
.hero .ctas{
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 56px;
}

/* metadata grid */
.meta{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: 28px;
}
.meta .m{ padding-right: 28px }
.meta .m + .m{ border-left: 1px solid var(--rule); padding-left: 28px }
.meta .k{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--text-dimmer); margin-bottom:10px; font-weight: 500;
}
.meta .v{
  font-size:17px; color:#fff; font-weight:500; letter-spacing:-.005em; line-height:1.3;
}
.meta .v small{
  display:block; margin-top:6px; color: var(--text-dim);
  font-size:13px; font-weight:400; letter-spacing:0;
}

/* intro */
.intro .grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items:start;
  border-top: 1px solid var(--rule-strong); padding-top: 36px;
}
.intro .left .label{
  font-size: 22px; letter-spacing: normal; color: var(--teal-soft);
  text-transform: none; margin-bottom: 18px; font-weight: 400;
  font-family: 'Inter', system-ui, sans-serif; line-height: 1;
}
.intro h3{
  font-size: 20px; color: rgb(164, 172, 179); font-weight:400; letter-spacing:-.005em;
  margin: 0 0 12px; line-height: 1.25;
}
.intro p{ color: var(--text-dim); font-size:14.5px; line-height:1.55; max-width: 38ch }
.intro .right p{ color:#C5D2E1; font-size:17px; line-height:1.6; max-width: 56ch; margin: 0 }
.intro .right .badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px 8px 12px; border-radius: 99px;
  border:1px solid rgba(47,124,123,.4); color: var(--teal-soft);
  font-size:12.5px; letter-spacing:.04em; margin-top: 22px;
}
.intro .right .badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--petrol);
  box-shadow: 0 0 0 3px rgba(47,124,123,.18);
}

/* problem */
.problem .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:start;
}
.pull{
  font-family:'Newsreader', Georgia, serif;
  font-style: italic; font-weight:400;
  font-size: 30px; line-height:1.25; color:#fff;
  border-top: 1px solid var(--rule-strong); padding-top: 24px;
  max-width: 24ch;
}
.pull span{ color: var(--teal-soft) }
.problem ul{
  list-style:none; padding:0; margin: 12px 0 0;
  display:flex; flex-direction:column; gap:0;
}
.problem ul li{
  display:grid; grid-template-columns: 70px 1fr; gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.problem ul li:first-child{ border-top: 1px solid var(--rule) }
.problem ul .k{
  font-size:11px; letter-spacing:.18em; color: var(--text-dimmer);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.problem ul .v{ color:#E7ECF2; font-size:15px; line-height:1.5 }

/* solution */
.solution .three{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule-strong); margin-top: 48px;
}
.solution .three .col{ padding: 28px 28px 32px 0 }
.solution .three .col + .col{ border-left: 1px solid var(--rule); padding-left: 28px }
.solution .three .step{
  font-size:11px; letter-spacing:.22em; color: var(--teal-soft);
  text-transform: uppercase; font-weight:600; margin-bottom: 18px;
}
.solution .three h3{
  font-size: 22px; color: rgb(164, 172, 179); font-weight:400; letter-spacing:-.012em;
  margin: 0 0 14px; line-height: 1.2;
}
.solution .three h3 em{
  font-style: italic; font-family:'Newsreader', Georgia, serif;
  color: var(--teal-soft); font-weight: 400;
}
.solution .three p{
  color: var(--text-dim); font-size:14.5px; line-height:1.6; margin: 0 0 18px;
}
.solution .three .more{
  font-size:12px; letter-spacing:.04em; color:#C5D2E1;
  border-top: 1px dashed var(--rule); padding-top: 14px;
  display:flex; flex-direction:column; gap:6px;
}
.solution .three .more span{ display:flex; gap:8px; align-items:baseline }
.solution .three .more span::before{
  content:""; width:5px; height:1px; background: var(--petrol);
  flex:none; transform: translateY(-3px);
}

/* course */
.course .ml{
  display:grid; grid-template-columns: 100px 1.4fr 1fr 100px;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}
.course .ml > div{
  padding: 24px 18px 24px 0;
  border-bottom: 1px solid var(--rule);
  align-self: start;
}
.course .ml .num{
  font-size:11px; letter-spacing:.18em; color: var(--text-dimmer);
  font-variant-numeric: tabular-nums; padding-top: 6px;
}
.course .ml .ttl{
  color: rgb(164, 172, 179); font-size:19px; font-weight:400;
  letter-spacing:-.012em; line-height:1.3;
  padding-right: 32px;
}
.course .ml .desc{ color: var(--text-dim); font-size:14px; line-height:1.6 }
.course .ml .chap{
  text-align:right; color: var(--teal-soft); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; padding-top: 9px;
}
.course .ml .row{ display:contents }
.course .ml .row:hover .ttl{ color: var(--teal-soft) }
.course .note{
  margin-top: 32px; padding: 16px 18px;
  background: rgba(234,243,250,.04); border:1px solid var(--rule);
  border-radius: 6px; color: var(--text-dim); font-size:13.5px;
  display:flex; gap:14px; align-items:flex-start; max-width: 80ch;
}
.course .note svg{ flex:none; margin-top:2px; color: var(--text-dim) }

/* benefit */
.benefit .top{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:end;
  border-top: 1px solid var(--rule-strong); padding-top: 36px;
}
.benefit .top .lead{ max-width: 38ch }
.benefit ol{
  counter-reset: bn; list-style: none; padding:0; margin: 56px 0 0;
  columns: 2; column-gap: 48px;
}
.benefit ol li{
  counter-increment: bn;
  break-inside: avoid;
  display:grid; grid-template-columns: 48px 1fr; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.benefit ol li::before{
  content: counter(bn, decimal-leading-zero);
  color: var(--teal-soft); font-size:13px; letter-spacing:.08em;
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.benefit ol li span{
  color:#E7ECF2; font-size:16px; line-height:1.45; letter-spacing:-.005em;
}

/* audience */
.audience .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border-top:1px solid var(--rule-strong);
}
.audience .col{ padding: 32px 32px 32px 0 }
.audience .col + .col{ border-left: 1px solid var(--rule); padding-left: 32px }
.audience .col h3{
  font-size:11px; letter-spacing:.22em; color: var(--teal-soft);
  text-transform: uppercase; font-weight:600; margin: 0 0 18px;
}
.audience .col.neg h3{ color: var(--text-dim) }
.audience .col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0 }
.audience .col li{
  padding: 12px 0;
  color:#D6DEE8; font-size:15.5px; line-height:1.5;
  border-bottom: 1px solid var(--rule);
  display:grid; grid-template-columns: 22px 1fr; gap:14px; align-items: baseline;
}
.audience .col .ix{
  color: var(--teal-soft); font-size:11.5px; letter-spacing:.12em;
  font-variant-numeric: tabular-nums; padding-top:3px;
}
.audience .col.neg .ix{ color: var(--text-dimmer) }
.audience .col.neg li{ color: var(--text-dim) }

/* trust */
.trust .box{
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 56px 0;
  display:grid; grid-template-columns: 5fr 7fr; gap:64px;
}
.trust .left h2{ margin-bottom:0 }
.trust .right{ display:flex; flex-direction:column; gap:0 }
.trust .right p.body{
  color:#C5D2E1; font-size:16.5px; line-height:1.6;
  margin: 0 0 28px; max-width: 56ch;
}
.trust .right .neg{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border-top:1px solid var(--rule);
}
.trust .right .neg .item{
  padding: 16px 0; padding-right:16px;
  border-bottom: 1px solid var(--rule);
  display:grid; grid-template-columns: 20px 1fr; gap:12px;
  color:#C5D2E1; font-size:14px; line-height:1.5;
}
.trust .right .neg .item:nth-child(2n){ border-left: 1px solid var(--rule); padding-left: 24px }
.trust .right .neg .x{ color: var(--text-dimmer); font-size:14px; padding-top:1px }

/* booking */
.booking .panel{
  background: linear-gradient(180deg, rgba(234,243,250,.03), rgba(234,243,250,.01));
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  padding: 48px 48px 44px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center;
}
.booking .panel .lead{ margin-bottom: 28px }
.booking .panel .ctas{ display:flex; gap:10px; flex-wrap:wrap }
.booking .ledger{
  background: rgba(0,0,0,.22); border-radius: 14px;
  padding: 22px; border:1px solid var(--rule);
  font-size:13px;
}
.booking .ledger .ttl{
  display:flex; justify-content:space-between; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule); margin-bottom: 14px;
  align-items: baseline;
}
.booking .ledger .ttl b{ color:#fff; font-weight:500; font-size:14.5px; letter-spacing:-.005em }
.booking .ledger .ttl span{ color: var(--text-dimmer); font-size:11px; letter-spacing:.16em; text-transform:uppercase }
.booking .ledger ol{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column }
.booking .ledger li{
  display:grid; grid-template-columns: 36px 1fr 90px; gap:10px;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  color:#D6DEE8; font-size:13px; align-items: baseline;
}
.booking .ledger li:last-child{ border-bottom: 0 }
.booking .ledger .ix{ color: var(--text-dimmer); font-size:11px; letter-spacing:.12em; font-variant-numeric: tabular-nums }
.booking .ledger .rt{ color: var(--text-dim); font-size:11.5px; text-align:right; letter-spacing:.04em }
.booking .ledger .footer{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
}
.booking .ledger .footer span{ color: var(--text-dim); font-size:11.5px; letter-spacing:.04em }
.booking .ledger .footer b{ color: var(--teal-soft); font-weight:500; font-size:13px }

/* faq */
.faq .list{ border-top:1px solid var(--rule-strong) }
.faq details{ border-bottom:1px solid var(--rule); padding: 0 }
.faq summary{
  list-style:none; cursor:pointer;
  padding: 24px 0;
  display:grid; grid-template-columns: 60px 1fr 32px;
  gap:24px; align-items: baseline;
  color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .num{
  font-size:14px; color: var(--teal-soft);
  font-variant-numeric: tabular-nums; text-transform:uppercase;
  font-family:'Newsreader', Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing:-.005em; line-height:1; padding-top:2px;
}
.faq summary .q{
  font-size: 18px; font-weight:400; color: rgb(164, 172, 179); letter-spacing:-.008em; line-height:1.3;
}
.faq summary .plus{
  font-size: 24px; color: var(--text-dim); line-height:1; justify-self:end;
  transition: transform .2s ease;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight:300;
}
.faq details[open] summary .plus{ transform: rotate(45deg); color: var(--teal-soft) }
.faq details[open] summary .q{ color: var(--teal-soft) }
.faq .ans{
  padding: 0 0 28px 84px;
  color:#C5D2E1; font-size:15.5px; line-height:1.65; max-width: 70ch;
}

/* contact */
.contact .panel{
  border-top:1px solid var(--rule-strong);
  padding-top: 56px;
  display:grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items:start;
}
.contact h2{ margin-bottom: 14px }
.contact .left p.body{
  color:#C5D2E1; font-size:16.5px; line-height:1.6; margin: 0 0 24px; max-width: 38ch;
}
.contact .contact-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:22px }
.contact .contact-cta .cta-body{ color:#C5D2E1; font-size:16.5px; line-height:1.6; margin:0; max-width:42ch }
.contact .contact-cta .cta-btn{ font-size:15px; padding:13px 24px }

/* section tints + textures */
section{ overflow: hidden }
section > .wrap{ z-index: 2 }
section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 40%, #000 35%, transparent 92%);
          mask-image: radial-gradient(ellipse 100% 90% at 50% 40%, #000 35%, transparent 92%);
  opacity: .8;
}

section.intro{
  background:
    radial-gradient(ellipse 90% 60% at 75% 0%, rgba(47,124,123,.10), transparent 60%),
    linear-gradient(180deg, rgba(234,243,250,.025), transparent 80%);
}
section.intro::before{
  background-image: linear-gradient(to bottom, rgba(234,243,250,.05) 1px, transparent 1px);
  background-size: 100% 72px;
}
section.problem{
  background:
    radial-gradient(ellipse 70% 60% at 10% 0%, rgba(15,37,64,.55), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.04) 80%);
}
section.problem::before{
  background-image: repeating-linear-gradient(135deg,
    rgba(234,243,250,.045) 0 1px,
    transparent 1px 88px);
}
section.solution{
  background:
    radial-gradient(ellipse 80% 70% at 90% 50%, rgba(47,124,123,.12), transparent 60%),
    linear-gradient(180deg, rgba(234,243,250,.020), transparent 80%);
}
section.solution::before{
  background-image: radial-gradient(circle, rgba(234,243,250,.07) 1px, transparent 1.4px);
  background-size: 36px 36px;
}
section.course{
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(47,124,123,.06), transparent 60%),
    linear-gradient(180deg, rgba(11,28,48,.55), rgba(11,28,48,.30));
}
section.course::before{
  background-image: linear-gradient(to right, rgba(234,243,250,.05) 1px, transparent 1px);
  background-size: 96px 100%;
}
section.benefit{
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(47,124,123,.10), transparent 60%),
    linear-gradient(180deg, rgba(234,243,250,.040), transparent 80%);
}
section.benefit::before{
  background-image: linear-gradient(to bottom, rgba(234,243,250,.05) 1px, transparent 1px);
  background-size: 100% 56px;
}
section.audience{
  background:
    radial-gradient(ellipse 70% 60% at 90% 100%, rgba(15,37,64,.45), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 80%);
}
section.audience::before{
  background-image: linear-gradient(to right, rgba(234,243,250,.045) 1px, transparent 1px);
  background-size: 80px 100%;
}
section.trust{
  background:
    radial-gradient(ellipse 70% 80% at 80% 50%, rgba(47,124,123,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02));
}
section.trust::before{
  background-image: radial-gradient(circle, rgba(47,124,123,.18) 1px, transparent 1.6px);
  background-size: 32px 32px;
}
section.booking{
  background:
    radial-gradient(ellipse 80% 70% at 30% 0%, rgba(159,211,210,.08), transparent 60%),
    linear-gradient(180deg, rgba(234,243,250,.035), transparent 80%);
}
section.booking::before{
  background-image: linear-gradient(to bottom, rgba(234,243,250,.06) 1px, transparent 1px);
  background-size: 100% 64px;
}
section.faq{
  background:
    radial-gradient(ellipse 70% 50% at 15% 100%, rgba(15,37,64,.40), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.02));
}
section.faq::before{
  background-image: linear-gradient(to right, rgba(234,243,250,.05) 1px, transparent 1px);
  background-size: 88px 100%;
}
section.contact{
  background:
    radial-gradient(ellipse 80% 80% at 20% 50%, rgba(47,124,123,.14), transparent 60%),
    linear-gradient(180deg, rgba(234,243,250,.020), transparent 80%);
}
section.contact::before{
  background-image: radial-gradient(circle, rgba(47,124,123,.14) 1px, transparent 1.5px);
  background-size: 38px 38px;
}

/* per-section heading tones */
section.intro h3,
section.problem h2,
section.solution h2,
section.course h2,
section.benefit h2,
section.audience h2,
section.trust h2,
section.booking h2,
section.faq h2,
section.contact h2{ color: rgb(164, 172, 179) }

/* responsive */
@media (max-width: 980px){
  .intro .grid, .problem .grid, .benefit .top, .audience .grid,
  .trust .box, .booking .panel, .contact .panel{
    grid-template-columns: 1fr !important; gap: 36px !important;
  }
  .solution .three{ grid-template-columns: 1fr }
  .solution .three .col + .col{ border-left:0; padding-left:0; border-top:1px solid var(--rule) }
  .meta{ grid-template-columns: 1fr 1fr }
  .meta .m + .m{ border-left: 0; padding-left: 0 }
  .meta{ gap: 24px }
  .benefit ol{ columns: 1 }
  .course .ml{ grid-template-columns: 60px 1fr }
  .course .ml .desc, .course .ml .chap{ grid-column: 1 / -1; padding-left:0 }
  .trust .right .neg{ grid-template-columns: 1fr }
  .trust .right .neg .item:nth-child(2n){ border-left:0; padding-left:0 }
}
@media (max-width: 720px){
  .audience .col + .col{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top: 24px }
}