/* ==========================================================================
   Kidoki — advising + coaching
   Plain CSS, no framework, no build step.

   Type scale and colors were measured off the original Wix site so the
   rebuild matches it. Five families are in play, each doing a specific job:
     Anton     wordmark
     Rubik     "advising + coaching" lockup
     Poppins   hero headings and lead copy
     Fraunces  section headings, testimonials
     Lato      body copy, form headings
   ========================================================================== */

/* --- Fonts (self-hosted, no third-party requests) ------------------------ */

@font-face { font-family:'Anton';    src:url('fonts/anton-latin.woff2')    format('woff2'); font-weight:400;     font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Rubik';    src:url('fonts/rubik-500.woff2')      format('woff2'); font-weight:500;     font-display:swap; }
@font-face { font-family:'Poppins';  src:url('fonts/poppins-200.woff2')    format('woff2'); font-weight:200;     font-display:swap; }
@font-face { font-family:'Poppins';  src:url('fonts/poppins-500.woff2')    format('woff2'); font-weight:500;     font-display:swap; }
@font-face { font-family:'Poppins';  src:url('fonts/poppins-700.woff2')    format('woff2'); font-weight:700;     font-display:swap; }
@font-face { font-family:'Lato';     src:url('fonts/lato-300.woff2')       format('woff2'); font-weight:400;     font-display:swap; }
@font-face { font-family:'Lato';     src:url('fonts/lato-400.woff2')       format('woff2'); font-weight:500;     font-display:swap; }
@font-face { font-family:'Raleway';  src:url('fonts/raleway-400.woff2')    format('woff2'); font-weight:400;     font-display:swap; }
@font-face { font-family:'Lato';     src:url('fonts/lato-700.woff2')       format('woff2'); font-weight:700;     font-display:swap; }

/* --- Tokens -------------------------------------------------------------- */

:root {
  --cream:    #fffcf7;
  --ink:      #333231;
  --ink-soft: #55534f;
  --green:    #325838;
  --beige:    #e6deca;
  --grey:     #cccac6;
  --rule:     #dcd8cf;
  --btn:      #749294;   /* measured rgb(116,146,148) */
  --nav-ink:  #373426;   /* measured rgb(55,52,38)   */

  --serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --display: 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --body:    'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --lockup:  'Rubik', -apple-system, Helvetica, Arial, sans-serif;
  --ui:      'Raleway', -apple-system, Helvetica, Arial, sans-serif;

  --wrap: 1128px;
  --gutter: 24px;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1.05em; }

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 400; line-height: 1.15; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Header / nav -------------------------------------------------------- */

.site-header { padding: 22px 0 0; }

.nav {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rule);
  max-width: 810px;
  margin: 0 auto;
}

.nav a {
  font-family: var(--ui);
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
  color: var(--nav-ink);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

/* The original shows no current-page marker, so aria-current carries the
   meaning for assistive tech without changing the visual. */
.nav a:hover { border-bottom-color: var(--ink); }

/* --- Wordmark ------------------------------------------------------------
   The original clipped a nature photo to the word KIDOKI set in Anton 221px.
   Reproduced with background-clip so it stays real, selectable text.
   ------------------------------------------------------------------------ */

.hero { padding: 58px 0 30px; }

.hero__lockup { width: min(500px, 84vw); margin: 0 auto; }

/* The letterforms are Anton "KIDOKI" converted to a vector path at build time
   (wordmark-mask.svg), so the mask needs no font at runtime and scales
   cleanly. A looping video plays behind it, as on the original. */
.wordmark {
  width: 100%;
  aspect-ratio: 499.16 / 180.47;   /* Anton "KIDOKI" advance / cap-height */
  margin: 0;
  position: relative;
}

.wordmark__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wordmark__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-clip-path: url(#kidoki-clip);
  clip-path: url(#kidoki-clip);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tagline {
  font-family: var(--lockup);
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 26px);
  line-height: normal;
  text-align: right;
  margin: 58px 0 0;
  color: var(--ink);
}

/* --- Intro --------------------------------------------------------------- */

.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 56px 0 8px;
  flex-wrap: wrap;
}

.intro img {
  width: 224px; height: 224px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.intro h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: normal;
  margin: 0;
}

/* --- Lead ---------------------------------------------------------------- */

.lead { max-width: 614px; margin: 0 auto; padding: 30px 0 53px; }

.lead h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 25px);
  line-height: normal;
  margin-bottom: 0.9em;
}

.lead p {
  font-family: var(--display);
  font-weight: 200;
  font-size: 18px;
  line-height: 23.4px;
  letter-spacing: 0.18px;
  color: var(--ink);
}

.points { list-style: none; padding: 0; margin: 26px 0 0; }

.points li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-family: var(--display);
  font-weight: 200;
  font-size: 18px;
  line-height: 1.35;
}

.points li::before {
  content: '\2794';
  position: absolute;
  left: 0;
  color: var(--ink);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  min-width: 176px;
  padding: 0 24px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: var(--btn);
  color: var(--cream);
  border: 0;
  border-radius: 0;
  transition: background 0.16s ease, color 0.16s ease;
}

.btn:hover { background: #62807f; }



.btn-row { margin: 30px 0 0; }

/* --- Sections ------------------------------------------------------------ */

.section { padding: 80px 0; }
.section--tight { padding: 74px 0 84px; }
.section--grey  { background: var(--grey); }
.section--green { background: var(--green); color: var(--cream); padding: 113px 0; }
.section--beige { background: var(--beige); }

.section h2,
.band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.41;
  margin-bottom: 0.35em;
}

.prose { max-width: 720px; }
.prose p { font-family: var(--body); font-size: 18px; line-height: 1.8; }

.feature-photo { width: 100%; max-height: 420px; object-fit: cover; }

/* --- Services ------------------------------------------------------------
   Photo offset up-and-right from a pale block, matching the layered original.
   ------------------------------------------------------------------------ */

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  margin-top: 69px;
}

.card { position: relative; width: 286px; max-width: 100%; }

.card::before {
  content: '';
  position: absolute;
  left: -18px; top: 24px; bottom: -20px;
  width: 62%;
  background: #fff;
  z-index: 0;
}

.card img {
  position: relative;
  z-index: 1;
  width: 286px;
  max-width: 100%;
  height: 335px;
  object-fit: cover;
}

.card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 26.8px;
  margin: -17px 0 0;   /* original caption overlaps the image bottom */
  padding-right: 10px;
}

/* --- Split (About, Contact) ---------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; }

.split__media { min-height: 340px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body p { line-height: 1.8; }

.split__body {
  background: var(--cream);
  padding: 58px 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split__body .subhead {
  font-family: var(--serif);
  font-size: 26px;
  line-height: normal;
  margin: 0 0 0.7em;
}

/* --- Testimonials -------------------------------------------------------- */

/* Fixed height so the band cannot resize as quotes cycle. */
.quotes { position: relative; text-align: center; height: 420px; }

.quote {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 0;
  max-width: 800px;
  margin: 0 auto;
}
.quote.is-active { display: block; animation: fade 0.5s ease; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.quote blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.9vw, 38px);
  line-height: 1.375;   /* 52.25/38 */
  margin: 0 0 20px;
}

.quote cite {
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  line-height: normal;
}

.dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 13px; }

.dots button {
  width: 9px; height: 9px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 252, 247, 0.42);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dots button[aria-selected='true'] { background: var(--cream); }

/* --- Contact form -------------------------------------------------------- */

.form-intro h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(22px, 2.7vw, 29px);
  line-height: 28px;
  margin-bottom: 8px;
}

.form-intro > p { font-family: var(--body); font-size: 18px; line-height: 28px; margin-bottom: 0; }

/* A banded split keeps its own height instead of stretching to match a very
   tall sibling (the scheduler below it). */
.split--band .split__media { height: 440px; min-height: 0; }
.split--bleed .split__media { height: 816px; }
.split__body.form-intro { padding: 48px 40px; justify-content: flex-start; }

/* HoneyBook renders its placement at a fixed 300px, so it has to be forced
   to fill the pane. */
.hb-embed { margin: 10px 0 0; }

.hb-embed > div,
.hb-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.form-fallback { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }

/* --- Podcast platform links ---------------------------------------------- */

.platforms {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 26px 0 0; padding: 0; list-style: none;
}

.platforms a {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  padding: 10px 22px;
  border: 1px solid var(--green);
  border-radius: 2px;
  color: var(--green);
  transition: background 0.16s ease, color 0.16s ease;
}

.platforms a:hover { background: var(--green); color: var(--cream); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: 40px 0 46px;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 25.06px;
  color: var(--ink);
  text-align: center;
}

.site-footer a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-footer a:hover { border-bottom-color: var(--ink); }

.footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 20px; margin-bottom: 12px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 260px; }
  .split__body { padding: 44px 26px; }
  .intro { gap: 26px; }
  .section { padding: 58px 0; }
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .nav { gap: 22px; }
  .intro img { width: 168px; height: 168px; }
  .tagline { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .quote.is-active { animation: none; }
}


/* --- Full-bleed bands ----------------------------------------------------
   Geometry measured off the original at a 1687px viewport and expressed as
   ratios so it holds at other widths.
   ------------------------------------------------------------------------ */

.band { display: grid; }

/* How I work: 842 / 845 split, photo runs the full band height */
.band--how {
  grid-template-columns: 842fr 845fr;
  background: rgba(236, 206, 142, 0.21);
}

.band--how .band__text {
  display: flex;
  align-items: flex-start;
  padding: 147px 60px 60px;
}

.band__inner { max-width: 614px; margin-left: auto; }

.band--how .band__media { background: var(--grey); aspect-ratio: 845 / 1380; }

.band--how .band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About: grey band, 60px inset, 1055 copy panel + 512 photo */
.band--about { background: rgba(204, 202, 198, 0.8); padding: 60px; }

.band--about__row {
  display: grid;
  grid-template-columns: 1055fr 512fr;
  align-items: stretch;
}

.band--about__panel {
  background: var(--cream);
  padding: 51px 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.band--about__media img { width: 100%; height: 100%; object-fit: cover; }

/* Contact: photo runs to the left edge of the viewport */
.split--bleed { grid-template-columns: 844fr 843fr; align-items: start; }
.split--bleed .split__media { height: 816px; }

@media (max-width: 860px) {
  .band--how, .band--about__row, .split--bleed { grid-template-columns: 1fr; }
  .band--how .band__text { padding: 48px 26px; }
  .band--how .band__media { min-height: 320px; }
  .band--about { padding: 26px; }
  .band--about__panel { padding: 40px 26px; }
  .band__inner { margin-left: 0; }
}


/* --- Contact pane extras -------------------------------------------------- */



/* Contact pane on small screens: the form needs the width more than the padding */
@media (max-width: 860px) {
  .split__body.form-intro { padding: 40px 16px; }
  .hb-embed { margin-top: 8px; }
}


/* --- Slack band ----------------------------------------------------------
   Measured: heading Futura 38px at x=261, list Lato 16/28.8 at x=738.
   Futura is a licensed face; Poppins (already loaded) stands in for it.
   ------------------------------------------------------------------------ */

.band--slack { display: block; background: var(--beige); padding: 72px 0 80px; }

.band--slack__row {
  max-width: 1213px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 477px 1fr;
}

.band--slack .slack-heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  line-height: normal;
  margin: 0;
}

.communities {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
  color: var(--ink);
}

@media (max-width: 860px) {
  .band--slack { padding: 44px 0 50px; }
  .band--slack__row { grid-template-columns: 1fr; gap: 14px; }
  .band--slack .slack-heading { font-size: 28px; }
}

/* --- About page -----------------------------------------------------------
   Measured at a 1459px viewport:
     portrait  428x823 at x=80
     "Hello!"  Fraunces 56 at x=647
     intro     Lato 22/39.6
     My Story  Fraunces 38 at x=268
     chapters  Lato 21/37.8, 813 wide at x=320, logo centred above each
     Contact   Fraunces 38, blurb x=268 / email x=773, Lato 16/28.8
   -------------------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 508px) minmax(0, 1fr);
  gap: 0 60px;
  align-items: start;
  padding: 40px 0 0;
  max-width: 1300px;
  margin: 0 auto;
}

.about-hero__media { padding-left: 0; }

.about-hero__media img {
  width: 100%;
  max-width: 428px;
  aspect-ratio: 428 / 823;
  object-fit: cover;
}

.about-hero__body { padding: 63px 60px 0 0; max-width: 505px; }

.about-hero__body h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: normal;
  margin: 0 0 0.5em;
}

.about-hero__body p {
  font-family: var(--body);
  font-size: 22px;
  line-height: 39.6px;
  margin: 0 0 1.1em;
}

.story { padding: 90px 0 0; }

.story__inner { max-width: 973px; margin: 0 auto; padding: 0 24px; }

.story h2,
.about-contact h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: normal;
  margin: 0;
}

.story__inner > p {
  font-family: var(--body);
  font-size: 21px;
  line-height: 37.8px;
  max-width: 813px;
  margin: 0 auto 1.6em;
}

.story__logo {
  margin: 0 auto;
  max-width: 813px;
  text-align: center;
}

.story__logo img { display: inline-block; height: auto; }
.story__logo img[alt="JPMorgan Chase"] { width: 199px; }
.story__logo img[alt="Clover Health"]   { width: 84px; }
.story__logo img[alt="Airtable"]        { width: 84px; }
.story__logo img[alt="Gusto"]           { width: 147px; }

.story__now { margin-top: 2em !important; }
.story__now strong { font-weight: 700; }

.story .btn-row { max-width: 813px; margin: 34px auto 0; }

.about-contact { padding: 84px 0 90px; }
.about-contact__inner { max-width: 973px; margin: 0 auto; padding: 0 24px; }

.about-contact__row {
  display: grid;
  grid-template-columns: 505px 1fr;
  align-items: start;
}

.about-contact__row p {
  font-family: var(--body);
  font-size: 16px;
  line-height: 28.8px;
  margin: 0;
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .about-hero__media { padding-left: 0; }
  .about-hero__media img { max-width: 100%; aspect-ratio: 4 / 3; }
  .about-hero__body { padding: 0 24px; max-width: none; }
  .about-hero__body p { font-size: 18px; line-height: 32px; }
  .story { padding-top: 48px; }
  .story__inner > p { font-size: 18px; line-height: 32px; }
  .about-contact { padding: 48px 0 56px; }
  .about-contact__row { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Podcast page ---------------------------------------------------------
   Measured at 1459px: banner 820x362 at x=80, cover 365x362 at x=137/y=191,
   copy column starts at x=723 and overlaps the banner, Lato 21/28.8 and 19/34.2.
   -------------------------------------------------------------------------- */

.pod {
  display: grid;
  grid-template-columns: 563px minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding: 70px 80px 164px;
  align-items: start;
}

.pod__media { position: relative; height: 362px; }

.pod__banner {
  position: absolute;
  top: 0; left: 0;
  width: 820px;
  max-width: none;
  height: 362px;
  object-fit: cover;
}

.pod__cover {
  position: absolute;
  top: 45px; left: 57px;
  width: 365px;
  height: 362px;
  object-fit: cover;
}

.pod__body { position: relative; z-index: 1; background: var(--cream); padding: 60px 60px 80px; }
.pod__body > * { max-width: 537px; }

.pod__intro {
  font-family: var(--body);
  font-size: 21px;
  line-height: 28.8px;
  margin: 0 0 13px;
}

.pod__line {
  font-family: var(--body);
  font-size: 19px;
  line-height: 34.2px;
  margin: 0 0 29px;
}

.pod__line strong { font-weight: 700; }
.pod__line a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.pod__line a:hover { border-bottom-color: var(--ink); }
.pod__line a + a { margin-left: 6px; }

@media (max-width: 1100px) {
  .pod { grid-template-columns: 1fr; padding: 28px 16px 40px; gap: 0; }
  .pod__body { padding: 28px 20px 36px; }
  .pod__body > * { max-width: none; }
  .pod__media { height: auto; aspect-ratio: 820 / 362; }
  .pod__banner { position: static; width: 100%; height: 100%; }
  .pod__cover { top: 12%; left: 7%; width: 44%; height: auto; aspect-ratio: 1; }
  .pod__body { padding: 0; max-width: none; }
  .pod__intro { font-size: 18px; line-height: 28px; margin-bottom: 34px; }
}


/* --- About page background bands -----------------------------------------
   Measured: page sits on pale blue-grey rgb(204,218,219) with cream panels
   inset 80px each side.
   -------------------------------------------------------------------------- */

body.about-page { background: rgb(204, 218, 219); }

.about-page .about-hero,
.about-page .story,
.about-page .about-contact { background: transparent; }

.about-panel {
  background: var(--cream);
  margin: 0 80px;
}

.about-page .site-header,
.about-page .site-footer { background: var(--cream); }

.about-social {
  display: flex;
  gap: 8px;
  margin: 26px 0 0;
}

.about-social a {
  display: inline-flex;
  width: 24px; height: 24px;
  color: var(--ink);
}

.about-social svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 900px) {
  .about-panel { margin: 0 16px; }
}

/* --- Podcast page bands --------------------------------------------------- */

.pod-band { background: rgba(204, 202, 198, 0.8); padding-bottom: 70px; }

.pod__banner-bg { position: absolute; top: 0; left: 0; width: 965px; height: 362px; background: rgb(204,202,198); }

.pod__panel { background: var(--cream); }

.pod__title {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: normal;
  margin: 0 0 26px;
}

@media (max-width: 1100px) {
  .pod__banner-bg { display: none; }
  .pod-band { padding-bottom: 36px; }
}