/* ==========================================================================
   DrGabyCora.com  ·  site.css
   Rebuilt 2026-09-05. Reproduces the original 2010 design on modern code.
   Replaces: default.css, jScrollPane.css, jquery 1.4, jquery.mousewheel,
   jScrollPane.js, unitpngfix.js, swfobject.js, facebox, and ga.js.
   The only JavaScript on the whole site is /js/quiz.js, which scores the
   Burnout Quiz in the reader's own browser. Every other page runs none.
   ========================================================================== */

:root{
  --red:#CC1518;
  --red-deep:#8F1414;
  --ink:#000;
  --grey:#707070;
  --grey-dark:#555;
  --grey-mid:#5E5E5E;
  --page:#E5E5E5;
  --bar:#898989;
  --purple:#513F8E;   /* leadership consultant */
  --blue:#2A51A1;     /* wellness coach       */
  --orange:#F54B20;   /* inspirational speaker */
  --max:960px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page) url(/images/bubble-background.jpg) top center no-repeat;
  font:14px/20px Arial,Helvetica,sans-serif;
  color:var(--ink);
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:var(--red)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.red{color:var(--red)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}

/* ---------- top bar ---------- */
.topbar{background:var(--bar);color:#EBEBEB;font-size:12px}
.topbar .wrap{display:flex;justify-content:flex-end;gap:20px;padding-top:3px;padding-bottom:3px}
.topbar a{color:#EBEBEB;text-decoration:none}
.topbar a:hover{color:#C6C6C6}

/* ---------- header ---------- */
.header{background:#fff}
.header .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;
              justify-content:space-between;gap:10px;padding-top:22px;padding-bottom:10px}
.header .logo img{width:287px;max-width:70vw}
.nav-main{display:flex;flex-wrap:wrap;gap:6px 23px;font-size:15px;padding-bottom:4px}
.nav-main a{color:#636363;text-decoration:none;padding-bottom:3px}
.nav-main a:hover{border-bottom:1px dashed var(--grey-mid);color:var(--grey-mid)}
.nav-sub{background:#fff;border-bottom:1px solid #D3D3D3}
.nav-sub .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;
               gap:4px 26px;font-size:15px;font-weight:bold;padding-bottom:10px}
.nav-sub a{color:#707070;text-decoration:none}
.nav-sub a:hover{text-decoration:underline}

/* ---------- the white card ---------- */
/* 30px of page background above the card, exactly as the original site had:
   her portrait is hung 71px above the card top, so without this clearance the
   top of her head rides up over the "Dr. Gaby Cora" logo. Original geometry:
   logo bottom 89, card top 158. */
.card{position:relative;max-width:var(--max);margin:30px auto 0;background:#fff;
      border-radius:8px 8px 0 0;box-shadow:0 3px 14px rgba(0,0,0,.22);
      padding-bottom:28px}

/* Desktop geometry, measured off the original site. The two page types differ:
     inner pages  tagline art 900x132, inset 30px, crumb 5px under it
     the homepage tagline art 664x211, right aligned 73px from the edge
   Either way her portrait hangs 71px above the top of the card, and the copy
   column starts 466px in. The portraits are 449, 464 and 466px wide, so they
   render at their own size rather than being stretched to a single number. */
.tagline{line-height:0;padding-left:30px}
.tagline img{display:inline-block;width:auto;max-width:100%;height:auto}
.home .tagline{height:211px;line-height:normal;text-align:right;padding:0 73px 0 0}
.home .tagline img{width:664px}

.cols{position:relative;min-height:520px;padding-top:5px}
.cols .photo{position:absolute;left:0;top:-203px}
.cols .photo img{width:auto;max-width:100%;height:auto}
.home .cols{padding-top:0}
.home .cols .photo{top:-282px}
.cols .body{margin-left:466px;width:434px;padding-right:48px}
.cols.solo .body{margin-left:0;width:auto;padding:0 60px}
.cols.solo .photo{display:none}

h1{font-size:24px;line-height:28px;font-weight:normal;color:var(--grey-dark);margin-bottom:12px}
h2{font-size:16px;line-height:22px;font-weight:normal;color:var(--grey);margin-bottom:18px}
h3{font-size:18px;font-weight:normal;color:var(--grey-dark);margin:22px 0 6px}
p{margin-bottom:14px}
.home .body p{margin-bottom:8px}
.crumb{font-size:10px;color:var(--grey);margin-bottom:10px}
.crumb a{color:var(--grey);text-decoration:none}

/* the glossy red call-to-action, rebuilt without the JPG */
.hire{display:block;width:415px;max-width:100%;text-decoration:none;color:#fff;
      text-align:center;padding:16px 20px;border-radius:5px;line-height:1.3;
      background:linear-gradient(to bottom,#D6302E 0%,#C0201F 48%,#9B1616 52%,#8F1414 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 3px rgba(0,0,0,.35);
      font-size:22px;font-weight:bold}
.hire span{display:block;font-size:14px;font-weight:normal;opacity:.95}
.hire:hover{filter:brightness(1.08)}

/* The three media icons from the original site, reused from /images/icons/.
   On the old page they were CSS backgrounds on floated links; here they are
   real images so they scale and reflow on a phone. */
/* The banner is 400px wide but the copy column's text width is 386px, so
   without the negative right margin it renders 14px narrow. The column has
   48px of padding to the right, so borrowing 14 of it costs nothing. */
.stations{margin:4px -14px 16px 0}
.stations img{display:block;width:400px;max-width:100%;height:auto;border-radius:4px}
.jump-lead{font-size:13px;color:var(--grey);margin-bottom:8px}
.medicons{display:flex;gap:10px;margin:0 0 20px}
.medicons a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
            text-decoration:none;color:var(--grey);font-size:12.5px;font-weight:bold;
            padding:12px 4px 10px;border:1px solid #DCDCDC;border-radius:5px;
            background:#FBFBFB}
.medicons a em{font-style:normal;font-weight:normal;font-size:11px;color:#8A8A8A}
.medicons a:hover{color:#555;border-color:var(--red);background:#fff}
.medicons img{display:block}
@media (max-width:900px){ .stations{margin-right:0} }
@media (max-width:560px){ .medicons{gap:6px} .medicons a{font-size:11.5px} }

/* The speaker kit, given its own block right after the videos. A text link at
   the foot of the page was invisible: this is the one document a booker wants. */
.kitcard{display:flex;gap:16px;align-items:flex-start;margin:4px 0 20px;
         padding:16px;border:1px solid #E0E0E0;border-radius:6px;background:#FAFAFA}
.kit-cover{flex:none;display:block;line-height:0}
.kit-cover img{width:170px;height:auto;border-radius:3px;
               box-shadow:0 1px 4px rgba(0,0,0,.22)}
.kit-cover:hover img{box-shadow:0 2px 9px rgba(0,0,0,.3)}
.kit-text h3{margin:0 0 6px;font-size:17px;color:var(--grey-dark)}
.kit-text p{font-size:13px;margin-bottom:10px}
.hire.kit-btn{width:auto;display:inline-block;font-size:16px;padding:10px 18px;
              line-height:1.25}
.hire.kit-btn span{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:560px){
  .kitcard{flex-direction:column;align-items:center;text-align:center}
  .kit-cover img{width:210px}
}

/* ---------- footer ---------- */
.footer{max-width:var(--max);margin:0 auto 18px;padding:18px 20px 0;font-size:12px;
        color:var(--grey-dark);display:flex;flex-wrap:wrap;gap:20px 40px}
.footer nav ul li{margin-bottom:3px}
.footer a{color:var(--grey-dark);text-decoration:none}
.footer a:hover{color:#363636;border-bottom:1px dashed var(--grey-mid)}
.footer .meta{margin-left:auto;text-align:right;color:var(--grey)}
.footer .social{display:flex;gap:6px;justify-content:flex-end;margin-bottom:10px}
.footer .social img{width:52px;height:53px}
.footer .meta p{margin-bottom:3px}
.footer .meta .info{color:#474747}
.cta .kit{margin-top:10px;font-size:13px}
.footer .updated{color:var(--grey-mid);font-size:11px;margin-top:6px}

/* ==========================================================================
   Responsive. The original site had none: it was locked to 960px with no
   viewport tag, so phones rendered it zoomed out and unreadable.
   ========================================================================== */
@media (max-width:900px){
  .header .wrap{justify-content:center;text-align:center}
  .header .logo img{margin:0 auto}
  .nav-main{justify-content:center;width:100%}
  .nav-sub .wrap{justify-content:center}
  .card{border-radius:0;padding-bottom:22px;margin-top:0}
  .tagline{height:auto;line-height:normal;text-align:center;padding:14px 20px 6px}
  .home .tagline{height:auto;text-align:center;padding:14px 20px 6px}
  .home .tagline img{width:auto}
  .cols{padding-top:0}
  .tagline img{width:auto;max-width:100%;margin:0 auto}
  .cols{min-height:0;padding:0 20px;display:flex;flex-direction:column}
  .cols .photo{position:static;width:auto;order:-1;text-align:center;margin-bottom:4px}
  .cols .photo img{width:auto;max-width:260px;margin:0 auto}
  .cols .body{margin-left:0;width:auto;padding-right:0}
  .cols.solo .body{padding:0}
  .hire{width:auto;font-size:20px}
  .footer{flex-direction:column;text-align:center}
  .footer nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
  .footer .meta{margin-left:0;text-align:center}
  .footer .social{justify-content:center}
}
@media (max-width:560px){
  .nav-main{gap:4px 16px;font-size:14px}
  .nav-sub .wrap{gap:2px 16px;font-size:14px}
  .cols .photo img{max-width:210px}
  .footer .social img{width:44px;height:45px}
}

/* ---------- video: demo reels and clip grids ---------- */
h3.section{margin-top:34px;padding-top:20px;border-top:1px solid #E0E0E0}
.embed{position:relative;padding-top:56.25%;background:#000;border-radius:4px;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reels{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:18px 0 4px;align-items:start}
.reel h3{margin-top:0}
.reel h3{margin:2px 0 8px}
.reel-link{margin-top:8px;font-size:13px}
.clip-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
             color:var(--grey);font-weight:bold}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
       gap:22px;margin-top:16px}
.clip h3{font-size:15px;margin:4px 0 7px;line-height:19px;min-height:38px}

/* ---------- radio: native audio, no Flash ---------- */
.tracks{margin-top:14px}
.track{padding:14px 0;border-bottom:1px solid #E8E8E8}
.track h3{margin:0 0 2px;font-size:17px}
.track .who{color:var(--grey);font-size:13px;margin-bottom:8px}
.track .who .dur{color:#999}
.track audio{width:100%;max-width:520px;display:block}

@media (max-width:900px){
  .reels{grid-template-columns:1fr;gap:22px}
  .clips{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
  .clip h3{min-height:0}
}

/* ---------- published works ---------- */
.work{display:flex;gap:20px;align-items:flex-start;padding:20px 0;
      border-bottom:1px solid #E8E8E8}
.work:last-child{border-bottom:0}
.work .cover{flex:0 0 150px}
.work .cover img{border:1px solid #DDD}
.work .about{flex:1}
.work .about.wide{flex:1 1 100%}
.work h3{margin:0 0 3px;font-size:22px;color:var(--red)}
.work .sub{font-weight:bold;color:var(--grey-dark);margin-bottom:8px;font-size:13px}
.work .more a{color:var(--red);text-decoration:none;font-weight:bold}
.work .more a:hover{text-decoration:underline}
@media (max-width:560px){
  .work{flex-direction:column;gap:12px}
  .work .cover{flex:none}
}

/* ---------- The Power of Wellbeing Suite + apps ---------- */
.suite{margin:16px 0 8px}
.suite-card{display:block;text-decoration:none;color:var(--ink);
   background:linear-gradient(to bottom,#FDF8EE,#F7EFDD);
   border:2px solid #C9A227;border-radius:10px;padding:18px 22px}
.suite-card:hover{border-color:#A8841C}
.suite-card h4{margin:2px 0 6px;font-size:20px;color:var(--red)}
.suite-card p{margin-bottom:8px}
.kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--grey);font-weight:bold}
.go{color:var(--red);font-weight:bold;font-size:13px}

.apps{margin:18px 0 6px}
.app{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:var(--ink);
     background:#FCFCFC;border:1px solid #E0E0E0;border-radius:10px;padding:16px 18px;
     margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
.app:hover{border-color:#C9A227;box-shadow:0 3px 12px rgba(0,0,0,.10)}
.app img{flex:0 0 88px;width:88px;height:88px;border-radius:18px}
.app .txt{flex:1}
.app h4{margin:3px 0 6px;font-size:17px;color:var(--red)}
.app p{font-size:13px;line-height:19px;margin-bottom:8px}
.app .go{display:block;font-size:12px}
@media (max-width:420px){
  .app{flex-direction:column;align-items:center;text-align:center}
}

/* ---------- Substack sections ---------- */
.letters{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.letter{background:#FCFCFC;border:1px solid #E4E4E4;border-left:3px solid var(--red);
        border-radius:6px;padding:13px 15px}
.letter h4{margin:0 0 5px;font-size:15px;color:var(--grey-dark)}
.letter p{font-size:13px;line-height:19px;margin:0}
@media (max-width:700px){ .letters{grid-template-columns:1fr} }

/* ---------- bio ---------- */
ul.roles{list-style:none;margin:6px 0 0;padding:0}
ul.roles li{margin:.5em 0;padding-left:15px;position:relative}
ul.roles li:before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
                   border-radius:50%;background:var(--red)}
ul.roles .r{font-weight:bold;color:var(--grey-dark)}
p.note{color:var(--grey);font-style:italic;margin-top:12px}
p.closing{margin-top:26px;padding-top:18px;border-top:1px solid #E8E8E8}

/* ---------- contact ---------- */
ul.contact{list-style:none;margin:10px 0 0;padding:0}
ul.contact li{margin:.55em 0;display:flex;gap:12px;flex-wrap:wrap}
ul.contact .k{display:inline-block;min-width:78px;font-weight:bold;color:var(--grey-dark)}
ul.contact a{color:var(--red);text-decoration:none}
ul.contact a:hover{text-decoration:underline}

/* ---------- media: networks, press list ---------- */
.networks{display:flex;flex-wrap:wrap;gap:7px 8px;margin:12px 0 16px}
.networks span{display:inline-block;padding:5px 12px;border:1px solid #DDD;
               border-radius:99px;background:#FCFCFC;font-size:12.5px;color:var(--grey-dark)}
ul.press{list-style:none;margin:14px 0 0;padding:0}
ul.press li{padding:9px 0;border-bottom:1px solid #EDEDED}
ul.press a{color:var(--red);text-decoration:none;font-weight:bold}
ul.press a:hover{text-decoration:underline}
ul.press .outlet{display:block;color:var(--grey);font-size:12.5px;margin-top:2px}

/* ---------- service pages ---------- */
ul.topics,ul.clients{list-style:none;margin:10px 0 0;padding:0}
ul.topics li,ul.clients li{margin:.45em 0;padding-left:15px;position:relative}
ul.topics li:before,ul.clients li:before{content:"";position:absolute;left:0;top:.62em;
       width:5px;height:5px;border-radius:50%;background:var(--red)}
ul.clients{column-count:2;column-gap:26px}
ul.topics a{color:var(--red);text-decoration:none}
ul.topics a:hover{text-decoration:underline}
.speaker-video{margin:0 0 18px}
.cta{margin-top:28px;padding-top:20px;border-top:1px solid #E8E8E8}
@media (max-width:560px){ ul.clients{column-count:1} }

/* ---------- burnout quiz ---------- */
fieldset.q{border:0;margin:0 0 22px;padding:18px 20px;background:#FCFCFC;
           border:1px solid #E4E4E4;border-radius:8px}
fieldset.q legend{padding:0;font-weight:bold;color:var(--grey-dark);
           line-height:1.45;margin-bottom:12px;display:block;width:100%}
fieldset.q legend .n{display:inline-block;width:24px;height:24px;line-height:24px;
           text-align:center;border-radius:50%;background:var(--red);color:#fff;
           font-size:12px;margin-right:9px;vertical-align:1px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
label.opt{display:flex;align-items:center;gap:8px;padding:11px 15px;min-height:44px;
          border:1px solid #DDD;border-radius:99px;background:#fff;cursor:pointer;
          font-size:14px;transition:border-color .12s,background .12s}
label.opt:hover{border-color:var(--red)}
label.opt input{width:18px;height:18px;margin:0;accent-color:var(--red);cursor:pointer}
label.opt:has(input:checked){border-color:var(--red);background:#FDF2F2;font-weight:bold}
label.opt:focus-within{outline:2px solid var(--red);outline-offset:2px}
.quiz-actions{text-align:center;margin:26px 0 0}
.quiz-actions .hire{width:auto;display:inline-block;font-size:19px;padding:14px 34px}
.err{color:var(--red);font-weight:bold;margin-top:12px}

.score{text-align:center;margin:14px 0 18px}
.score .num{font-size:56px;font-weight:bold;color:var(--red);line-height:1}
.score .of{display:block;color:var(--grey);font-size:13px;margin-top:4px}
.disclaimer{font-style:italic;color:var(--grey);font-size:13.5px}

.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.path{display:block;text-decoration:none;color:var(--ink);background:#fff;
      border:1px solid #E0E0E0;border-left-width:5px;border-radius:8px;padding:16px 18px;
      transition:box-shadow .15s,transform .15s}
.path:hover{box-shadow:0 4px 14px rgba(0,0,0,.10);transform:translateY(-2px)}
.path .verb{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--grey);font-weight:bold;margin-bottom:5px}
.path strong{display:block;font-size:17px;color:var(--red);margin-bottom:6px}
.path .why{display:block;font-size:13.5px;line-height:19px;color:var(--grey-dark)}
.p-lead{border-left-color:#E3781A}
.p-restore{border-left-color:#7C4E9E}
.p-transform{border-left-color:#C9A227}
.p-talk{border-left-color:var(--red)}
.retake{text-align:center;margin-top:20px;font-size:13.5px}
@media (max-width:640px){
  .paths{grid-template-columns:1fr}
  .opts{flex-direction:column}
  label.opt{width:100%}
}
.band{text-align:center;font-size:19px;font-weight:bold;color:var(--grey-dark);
      margin:0 0 12px}
.path.lead-path{border-color:var(--red);border-left-width:5px;
      box-shadow:0 3px 14px rgba(204,21,24,.16);order:-1}
.paths{display:grid}
p.through{margin:14px 0 0;font-weight:bold;color:var(--grey-dark)}