/* ==========================================================================
   Corporate coaching page — avinashanandsingh.com/corporate.html
   Rebuilt 20 Sep 2026.

   Written for one reader: an HR or L&D lead deciding whether to invite this
   coach into their building. Everything is ordered around the questions they
   actually ask, in the order they ask them — what do you run, can you hold our
   room, who else has booked you, what does it cost, how do I start — and the
   way to start is reachable from the first screen and from every section after.

   External rather than a 857-line <style> in the head, matching the shared
   site-chrome.css the rest of the site now uses.
   ========================================================================== */

.cp {
   --ink: #0c0a1e;
   --ink-2: #141130;
   --card: #1a1640;
   --line: rgba(255, 255, 255, 0.14);
   --gold: #f0c463;
   --gold-soft: rgba(240, 196, 99, 0.14);
   --text: #ece9f7;
   --muted: #a49fc4;
   --serif: "Cinzel", Georgia, serif;

   background: var(--ink);
   color: var(--text);
   font-family: "Montserrat", system-ui, sans-serif;
   overflow-x: hidden;
}

.cp section {
   padding: clamp(58px, 8.5vw, 124px) 0;
}

.cp .wrap {
   width: min(100% - 32px, 1180px);
   margin-inline: auto;
}

/* ------------------------------------------------------------- headings -- */

.cp .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   margin: 0 0 14px;
   padding: 6px 14px;
   border: 1px solid var(--gold-soft);
   border-radius: 999px;
   background: var(--gold-soft);
   color: var(--gold);
   font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.72rem);
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

.cp h2 {
   margin: 0 0 14px;
   font-family: var(--serif);
   font-weight: 600;
   font-size: clamp(1.55rem, 1.2rem + 1.8vw, 2.7rem);
   line-height: 1.2;
   color: #fff;
   text-wrap: balance;
}

/* Supporting sections step down a tier — see the note on hierarchy. */
.cp h2.sub {
   font-size: clamp(1.3rem, 1.05rem + 1.25vw, 2.05rem);
   color: #efeaff;
}

.cp .lede {
   max-width: 62ch;
   margin: 0;
   font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
   line-height: 1.65;
   color: var(--muted);
}

/* ----------------------------------------------------------------- hero -- */

.cp-hero {
   position: relative;
   isolation: isolate;
   padding: clamp(56px, 10vw, 128px) 0 clamp(40px, 6vw, 72px);
   background:
      radial-gradient(
         900px 520px at 78% 12%,
         rgba(240, 196, 99, 0.16),
         transparent 62%
      ),
      radial-gradient(
         760px 520px at 12% 88%,
         rgba(124, 92, 255, 0.2),
         transparent 62%
      ),
      var(--ink);
}

.cp-hero-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center;
}

@media (min-width: 900px) {
   .cp-hero-grid {
      grid-template-columns: 1.2fr 0.8fr;
   }
}

.cp-hero h1 {
   margin: 0 0 18px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
   line-height: 1.1;
   color: #fff;
   text-wrap: balance;
}

.cp-hero h1 em {
   font-style: normal;
   color: var(--gold);
}

.cp-hero .lede {
   font-size: clamp(1rem, 0.94rem + 0.45vw, 1.18rem);
   color: #cfc9e8;
}

.cp-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: clamp(24px, 3.5vw, 34px);
}

.cp-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.55rem;
   min-height: 54px;
   padding: 0 clamp(22px, 3vw, 34px);
   border: 0;
   border-radius: 999px;
   background: linear-gradient(180deg, #ffd87d, #e9ae36);
   color: #2b1d05;
   font-family: inherit;
   font-weight: 700;
   font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
   text-decoration: none;
   white-space: nowrap;
   touch-action: manipulation;
   box-shadow: 0 12px 28px -10px rgba(233, 174, 54, 0.65);
   transition:
      transform 0.18s ease,
      filter 0.18s ease;
}

.cp-btn:hover {
   transform: translateY(-2px);
   filter: brightness(1.05);
   color: #2b1d05;
}

.cp-btn:active {
   transform: translateY(0) scale(0.99);
}

.cp-btn--ghost {
   background: transparent;
   border: 1px solid var(--line);
   color: var(--text);
   box-shadow: none;
}

.cp-btn--ghost:hover {
   background: rgba(255, 255, 255, 0.07);
   color: #fff;
}

.cp-btn:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 3px;
}

/* The portrait, with the frame doing the work rather than a heavy shadow. */
.cp-hero-figure {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid var(--line);
   background: var(--ink-2);
}

/* The source is a 0.64 portrait — taller than the copy beside it, and left
   unframed it dwarfs the headline on desktop and eats a whole phone screen.
   A 4:5 box crops ~20% of the height; the object-position keeps that crop on
   his face and raised arm rather than centring it on his belt. */
.cp-hero-figure img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 5;
   object-fit: cover;
   object-position: 50% 18%;
}

@media (min-width: 900px) {
   .cp-hero-figure img {
      aspect-ratio: 5 / 6;
   }
}

.cp-badge {
   position: absolute;
   left: 16px;
   bottom: 16px;
   right: 16px;
   padding: 12px 16px;
   border-radius: 14px;
   background: rgba(10, 8, 26, 0.82);
   border: 1px solid var(--line);
}

.cp-badge strong {
   display: block;
   font-family: var(--serif);
   font-size: 1.02rem;
   color: #fff;
}

.cp-badge span {
   font-size: 0.78rem;
   color: var(--muted);
}

/* --------------------------------------------------------------- logos --- */

.cp-logos {
   padding: clamp(24px, 4vw, 40px) 0;
   border-block: 1px solid var(--line);
   background: var(--ink-2);
}

.cp-logos p {
   margin: 0 0 18px;
   text-align: center;
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--muted);
}

.cp-logo-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: clamp(20px, 4vw, 52px);
}

.cp-logo-row img {
   height: clamp(26px, 4.5vw, 40px);
   width: auto;
   opacity: 0.82;
   filter: grayscale(1) brightness(1.7);
   transition: opacity 0.2s ease;
}

.cp-logo-row img:hover {
   opacity: 1;
}

/* ------------------------------------------------------------ offerings -- */

.cp-cards {
   display: grid;
   gap: 18px;
   margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 760px) {
   .cp-cards {
      grid-template-columns: repeat(3, 1fr);
   }
}

.cp-card {
   display: flex;
   flex-direction: column;
   padding: clamp(26px, 3.4vw, 36px);
   border: 1px solid var(--line);
   border-radius: 20px;
   background: linear-gradient(180deg, var(--card), var(--ink-2));
}

.cp-card h3 {
   margin: 0 0 6px;
   font-family: var(--serif);
   font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
   color: #fff;
}

.cp-card .who {
   margin: 0 0 14px;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--gold);
}

.cp-card p {
   margin: 0 0 16px;
   font-size: 0.93rem;
   line-height: 1.6;
   color: var(--muted);
}

.cp-card ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 8px;
}

.cp-card li {
   display: flex;
   gap: 9px;
   font-size: 0.88rem;
   line-height: 1.45;
   color: var(--text);
}

.cp-card li::before {
   content: "";
   flex: none;
   width: 6px;
   height: 6px;
   margin-top: 7px;
   rotate: 45deg;
   background: var(--gold);
}

/* ---------------------------------------------------------------- room --- */

.cp-room {
   background: #0a1733;
   border-block: 1px solid var(--line);
}

.cp-room-grid {
   display: grid;
   gap: clamp(26px, 4vw, 52px);
   align-items: center;
}

@media (min-width: 900px) {
   .cp-room-grid {
      grid-template-columns: 1fr 1fr;
   }
}

.cp-room figure {
   margin: 0;
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid var(--line);
}

.cp-room figure img {
   display: block;
   width: 100%;
   height: auto;
}

.cp-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-top: 22px;
   padding: 0;
   list-style: none;
}

.cp-chips li {
   padding: 8px 14px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   font-size: 0.83rem;
   color: var(--text);
}

/* --------------------------------------------------------------- stats --- */

.cp-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
   border-radius: 20px;
   overflow: hidden;
}

@media (min-width: 720px) {
   .cp-stats {
      grid-template-columns: repeat(4, 1fr);
   }
}

.cp-stat {
   padding: clamp(20px, 3vw, 32px) 16px;
   text-align: center;
   background: var(--ink-2);
}

.cp-stat b {
   display: block;
   font-family: var(--serif);
   font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
   line-height: 1;
   letter-spacing: -0.02em;
   color: var(--gold);
   font-variant-numeric: tabular-nums;
}

.cp-stat span {
   display: block;
   margin-top: 6px;
   font-size: 0.78rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--muted);
}

/* -------------------------------------------------------- testimonials --- */

/* Horizontal on a phone so five long screenshots do not become five screens
   of scrolling; a grid from md up where there is room to compare them. */
.cp-quotes {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: minmax(78%, 1fr);
   gap: 14px;
   margin-top: clamp(24px, 4vw, 40px);
   padding-bottom: 8px;
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.cp-quotes::-webkit-scrollbar {
   display: none;
}

@media (min-width: 760px) {
   .cp-quotes {
      grid-auto-flow: row;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      grid-auto-columns: auto;
      overflow: visible;
   }
}

.cp-quote {
   scroll-snap-align: start;
   border: 1px solid var(--line);
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
}

.cp-quote img {
   display: block;
   width: 100%;
   height: auto;
}

.cp-scrollhint {
   margin: 12px 0 0;
   font-size: 0.74rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--muted);
}

@media (min-width: 760px) {
   .cp-scrollhint {
      display: none;
   }
}

/* ---------------------------------------------------------- credentials -- */

.cp-creds {
   display: grid;
   gap: 10px;
   margin: clamp(24px, 4vw, 38px) 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 720px) {
   .cp-creds {
      grid-template-columns: 1fr 1fr;
      gap: 10px 26px;
   }
}

.cp-creds li {
   display: flex;
   gap: 11px;
   padding: 12px 0;
   border-bottom: 1px solid var(--line);
   font-size: 0.92rem;
   line-height: 1.5;
}

.cp-creds li::before {
   content: "";
   flex: none;
   width: 7px;
   height: 7px;
   margin-top: 8px;
   rotate: 45deg;
   background: var(--gold);
}

.cp-creds b {
   color: #fff;
   font-weight: 600;
}

.cp-creds span {
   color: var(--muted);
}

.cp-certs {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 12px;
   /* Deliberately larger than the 12px between rows above: group separation
      has to exceed group spacing or the two read as one list. */
   margin-top: clamp(38px, 5vw, 60px);
}

.cp-certs a {
   display: block;
   border: 1px solid var(--line);
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
   transition: transform 0.18s ease;
}

.cp-certs a:hover {
   transform: translateY(-3px);
}

.cp-certs img {
   display: block;
   width: 100%;
   height: auto;
}

/* ------------------------------------------------------------ countries -- */

.cp-flags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: clamp(20px, 3vw, 30px) 0 0;
   padding: 0;
   list-style: none;
}

.cp-flags li {
   padding: 8px 15px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   font-size: 0.85rem;
   color: var(--text);
}

/* ---------------------------------------------------------- commercials -- */

.cp-split {
   display: grid;
   gap: 18px;
   margin-top: clamp(26px, 4vw, 40px);
}

@media (min-width: 820px) {
   .cp-split {
      grid-template-columns: 1fr 1fr;
   }
}

.cp-panel {
   padding: clamp(22px, 3vw, 32px);
   border: 1px solid var(--line);
   border-radius: 20px;
   background: var(--ink-2);
}

.cp-panel h3 {
   margin: 0 0 10px;
   font-family: var(--serif);
   font-size: 1.16rem;
   color: #fff;
}

.cp-panel p {
   margin: 0;
   font-size: 0.93rem;
   line-height: 1.65;
   color: var(--muted);
}

/* ----------------------------------------------------------------- CTA --- */

.cp-cta {
   background:
      radial-gradient(
         800px 420px at 50% 0%,
         rgba(240, 196, 99, 0.16),
         transparent 65%
      ),
      var(--ink-2);
   border-top: 1px solid var(--line);
}

.cp-cta .wrap {
   text-align: center;
}

.cp-cta .lede {
   margin-inline: auto;
}

.cp-cta .cp-actions {
   justify-content: center;
}

.cp-contact {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 28px;
   margin: clamp(26px, 4vw, 38px) 0 0;
   padding: clamp(20px, 3vw, 26px) 0 0;
   border-top: 1px solid var(--line);
   list-style: none;
   font-size: 0.9rem;
   color: var(--muted);
}

.cp-contact a {
   color: var(--text);
   text-decoration: none;
   border-bottom: 1px solid var(--gold-soft);
}

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

/* A phone should never lose sight of the one action on this page. */
.cp-sticky {
   position: fixed;
   inset-inline: 0;
   bottom: 0;
   z-index: 60;
   display: flex;
   gap: 10px;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
   background: rgba(10, 8, 26, 0.93);
   border-top: 1px solid var(--line);
}

.cp-sticky .cp-btn {
   flex: 1;
   min-height: 48px;
}

@media (min-width: 760px) {
   .cp-sticky {
      display: none;
   }
}

@media (max-width: 759px) {
   /* Clear the sticky bar so the footer is never trapped behind it. */
   .cp-tail {
      padding-bottom: 86px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .cp-btn,
   .cp-certs a,
   .cp-logo-row img {
      transition: none;
   }
}