/* hohcoach.com type pass (v16.00, 6 Nov 2026)
   One scale for the whole site. Fraunces carries the headings, upright and a little larger and tighter;
   Figtree carries everything else, a size up from before. Long reading blocks sit left-aligned at a
   comfortable line length; short lines and card copy stay centred. Nothing here changes a word of copy. */

/* ---- tokens ---- */
:root{
  --fs-xs:13px;--fs-sm:14.5px;--fs-card:15.5px;
  --fs-lede:clamp(17px,.6vw + 15px,19px);
  --measure:66ch;
}
@media(max-width:700px){:root{--fs-card:15px;--fs-xs:12.5px}}

/* ---- body ---- */
body{font-size:17px;line-height:1.65}
@media(max-width:700px){body{font-size:16px;line-height:1.6}}

/* ---- headings: Fraunces, a touch larger, tighter, never italic ---- */
h1{font-size:clamp(34px,4.3vw,48px);line-height:1.08;letter-spacing:-.018em;font-weight:580;text-wrap:balance}
.hero h1{font-size:clamp(36px,4.6vw,52px);letter-spacing:-.02em}
h2{font-size:clamp(26px,2.9vw,34px);line-height:1.15;letter-spacing:-.012em;font-weight:580;text-wrap:balance}
h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.004em}
.h1-sub{font-style:normal;font-weight:470;font-size:.64em;color:var(--teal-2);margin-top:10px;letter-spacing:-.008em;line-height:1.2}
@media(max-width:700px){
  h1{font-size:34px;line-height:1.1}
  .hero h1{font-size:36px}
  h2{font-size:26px;line-height:1.18}
  h3{font-size:18px}
  .h1-sub{font-size:20px;margin-top:8px}
}

/* ---- the strap under every heading: upright Figtree, not italic serif ---- */
.strap{font-family:"Figtree","Figtree Fallback","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2);max-width:40em;margin-left:auto;margin-right:auto}
.hero p.strap{font-size:clamp(17.5px,.6vw + 15.5px,19.5px)}
@media(max-width:700px){.strap,.hero p.strap{font-size:17px;line-height:1.5;max-width:26em}}

/* ---- labels: a size up, a little less tracking ---- */
.eyebrow,.tcard2 .eyebrow{font-size:12.5px;letter-spacing:.14em}
.agenda .kick,.named .kick,.pk-inaug .kick,.li-badge .kick,.card .kick{font-size:12px;letter-spacing:.12em}
.t-icf{font-size:12px}
@media(max-width:700px){.eyebrow,.tcard2 .eyebrow{font-size:12px;letter-spacing:.12em}}

/* ---- buttons (the header keeps its own tuned sizes; everything below it grows) ---- */
.btn{font-size:15px;min-height:44px;padding:12px 22px;letter-spacing:0}
.btn-sm{font-size:14px;min-height:40px;padding:9px 16px}
@media(max-width:700px){.btn{font-size:15px;min-height:46px;padding:12px 20px}.btn-sm{font-size:14px;min-height:42px}}

/* ---- card copy, lists and answers ---- */
.card:not(.unl-prem) p:not(.small):not(.eyebrow):not(.kick):not(.cred-cap):not(.pam-meta):not(.t-icf):not(.pk-price):not(.pk-terms):not(.price):not(.tznote):not(.picked),.card:not(.unl-prem) li{font-size:var(--fs-card);line-height:1.6}
.topics li{font-size:16px;line-height:1.6}
.callis .topics li{font-size:15.5px}
.pk-inaug .inc-list li{font-size:15.5px}
/* FAQ questions are buttons in a list, not display headings: they sit in the site's text face, Figtree, like every other control. */
.faq summary h3{font-family:"Figtree","Figtree Fallback","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:17px;line-height:1.4;letter-spacing:0;color:var(--ink)}
.faq p{font-size:16.5px;line-height:1.65;max-width:var(--measure)}
.lgl p{font-size:16.5px;line-height:1.7;max-width:var(--measure)}
.lgl h3{font-size:19px}
.pk-price{font-size:36px}
@media(max-width:700px){
  .topics li{font-size:15.5px}
  .faq summary h3{font-size:16px}
  .lgl h3{font-size:18px}
  .faq p,.lgl p{font-size:16px}
  .pk-price{font-size:32px}
}

/* ---- About Me story: centred like every other section (and its twin, "Hi, I'm Nick" on the home page), at a comfortable line length ---- */
.about-text,.about-text h2,.about-text p{text-align:center}
.about-text h2{text-wrap:balance}
.about-text p{max-width:var(--measure);margin-left:auto;margin-right:auto;text-wrap:pretty}
.about-text .eyebrow{justify-content:center}
ul.topics.one{text-align:left;max-width:calc(var(--measure) + 40px);margin-left:auto;margin-right:auto}
.tcard2 .t-find,.tcard2 .t-exp,.tcard2 .t-ask{text-align:left}

/* ---- small print, trust row, footer ---- */
.small{font-size:14px}
.trust>div span{font-size:14.5px}
.trust small{font-size:13px}
.ft a{font-size:15px}
.ft h2{font-size:12.5px;letter-spacing:.14em}
.ft .legal-line{font-size:13.5px}
@media(max-width:700px){.trust>div span{font-size:13.5px}.ft a{font-size:14.5px}.ft .legal-line{font-size:13px}}

/* ---- the HEARD stage cards: a full-width row of three, so each column holds a comfortable 40-odd characters ---- */
.heard-sec .wrap.mid{max-width:1168px}
@media(min-width:900px){.tcard2{padding:26px 26px 22px}}

/* ---- the Next card: where a band ends the page, the card sits centred in the dark strip between that band and the closing band ---- */
section.pg:has(> .band:last-child) + .next-pg{margin-top:44px;margin-bottom:44px}
@media(max-width:700px){section.pg:has(> .band:last-child) + .next-pg{margin-top:32px;margin-bottom:32px}}

/* ---- QA pass (v16.14): nothing readable below 12px except the logo itself; headings never push the page sideways ---- */
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:700px){h1{font-size:clamp(28px,8.6vw,34px)}.hero h1{font-size:clamp(30px,9.2vw,36px)}}
.pk.rec span.pk-pill{font-size:10px!important;letter-spacing:.1em!important;padding:4px 9px!important}
.announce .a-tag{font-size:11px}
.next-pg .np-k{font-size:12px}
.tcard2 .t-icf{font-size:12px}
.thead,.thead small{font-size:12px}
.trust>div small{font-size:12px}
.pam-hint{font-size:12px}
/* the pamphlet hint says Tap on touch screens and Click everywhere else */
.pam-hint .ph-t{display:none}
@media (hover:none) and (pointer:coarse){.pam-hint .ph-c{display:none}.pam-hint .ph-t{display:inline}}
/* a closed Inaugural Offer banner stays closed for the visit */
.ann-off #announce{display:none!important}
/* small phones: the header's logo, call button and menu button fit inside the page edges */
@media(max-width:400px){.hd .hd-in .logo .rl{max-width:150px}.hd .hd-in{gap:6px}.hd .hd-in .burger{margin-left:0}}

/* ---- Discovery Call: the three steps of the call sit centred in a premium card, like every other card on the site ---- */
.call-box.card{position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-6);text-align:center}
.call-box .call-k{color:var(--gold-2);font-size:12.5px;letter-spacing:.14em;margin:0 0 var(--sp-5)}
.call-steps li{justify-items:center;text-align:center}
.call-steps b,.call-steps span{grid-column:1;text-wrap:balance}
.call-steps span{max-width:30ch;margin-left:auto;margin-right:auto}
.call-steps li::before{position:relative;z-index:1;background:color-mix(in srgb,var(--teal) 16%,var(--card));border:1.5px solid color-mix(in srgb,var(--teal) 60%,transparent)}
@media(max-width:860px){.call-steps{gap:var(--sp-5)}.call-steps li{grid-template-columns:1fr;row-gap:var(--sp-2)}.call-steps li::before{grid-row:auto;margin-top:0}.call-steps li:not(:last-child)::after{display:none}}
@media(min-width:861px){.call-steps{position:relative}.call-steps::before{content:"";position:absolute;top:16px;left:calc((100% - 2 * var(--sp-6)) / 6);right:calc((100% - 2 * var(--sp-6)) / 6);height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 70%,transparent),color-mix(in srgb,var(--gold) 90%,transparent) 50%,color-mix(in srgb,var(--teal) 70%,transparent))}.call-steps li:not(:last-child)::after{display:none}}

/* ---- Booking calendars (Discovery Call and Book A Session). Browsers paint an iframe opaque, white in dark mode, when the page and the
   calendar inside it disagree on light or dark. Cal.com's own stylesheet unsets colour-scheme on anything named .cal-embed (our container
   included), so the two drifted apart. These rules make the container and the calendar frame match the site's theme, which also tells
   Cal.com which scheme to give the calendar, so the frame stays see-through and the card shows around it. ---- */
html.is-dark .cal-card .cal-embed,html.is-dark .cal-card iframe{color-scheme:dark!important}
html:not(.is-dark) .cal-card .cal-embed,html:not(.is-dark) .cal-card iframe{color-scheme:light!important}

/* ---- Phone menu (v17.04): the seven main pages as a light serif list, Get Started as a gold-framed card, the small print as pills,
   and the theme and listening controls labelled at the foot. Centred throughout, in the site's own type and colours. ---- */
.mmenu .top .icons{gap:0}
.mm-kick{font-size:12px}
.mmenu .mm-nav{margin-top:4px}
.mmenu .mm-nav .mm-kick{margin:12px 0 4px}
.mmenu .mm-nav a{font-size:20px;font-weight:540;letter-spacing:-.004em;line-height:1.25;padding:9px 0;border-bottom:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mmenu .mm-nav a[aria-current="page"]::after{margin-top:5px}
.mmenu.open .mm-nav a:nth-child(7){transition-delay:.28s}
.mmenu.open .mm-nav a:nth-child(8){transition-delay:.32s}
.mmenu .mm-start,.mmenu .mm-more,.mmenu .mm-foot,.mmenu .mm-nav{flex:none}
.mm-start{position:relative;margin-top:16px;padding:16px 18px 14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--card)) 0%,var(--card) 65%);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 6%,transparent),0 14px 30px -20px rgba(0,0,0,.45);text-align:center;overflow:hidden}
.mm-start::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.mm-start .mm-kick{margin:0 0 12px}
.mm-start .mm-cta{margin-top:0;gap:10px}
.mm-mini{margin:12px 0 0;font-size:15px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--mut)}
.mm-mini a{display:inline-flex;align-items:center;min-height:36px;padding:0 6px;color:var(--teal-2);font-weight:600;text-decoration:none}
.mm-mini a[aria-current="page"]{color:var(--gold-2)}
.mmenu .mm-more{margin-top:18px;text-align:center}
.mmenu .mm-more .mm-kick{margin:0 0 10px}
.mm-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mmenu .mm-pills a{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:14.5px;font-weight:600;line-height:1;padding:0 16px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:color-mix(in srgb,var(--card) 70%,transparent);text-decoration:none}
.mmenu .mm-pills a:hover{border-color:var(--teal);color:var(--teal-2)}
.mmenu .mm-pills a[aria-current="page"]{border-color:var(--gold);color:var(--gold-2)}
.mmenu .mm-pills a[aria-current="page"]::after{display:none}
.mm-foot{padding-top:22px}
.mm-tools{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.mmenu .icobtn.mm-tool{width:auto;height:40px;min-height:40px;padding:0 14px;gap:8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mmenu .mm-tool svg{width:16px;height:16px;flex:none}
.mm-tl-light,.mm-tl-on{display:none}
html.is-dark .mm-tl-dark{display:none}
html.is-dark .mm-tl-light{display:inline}
.mk-listen.on .mm-tl-off{display:none}
.mk-listen.on .mm-tl-on{display:inline}
.mmenu .mk-listen.mm-tool.on{color:#fff}
.mm-cred{font-size:12px;letter-spacing:.06em;text-wrap:balance}
.mm-contact{font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.mm-contact a{display:inline-flex;align-items:center;min-height:32px}
.mm-foot .mm-contact+.mm-contact{margin-top:-4px}
@media (hover:none){.mmenu .mm-nav a:hover:not([aria-current="page"]){color:var(--ink)}.mmenu .mm-pills a:hover:not([aria-current="page"]){border-color:var(--line);color:var(--ink-2)}}
@media (prefers-reduced-motion:no-preference){
  .mmenu .mm-start,.mmenu .mm-more .mm-kick,.mmenu .mm-foot{opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
  .mmenu.open .mm-start{opacity:1;transform:none;transition-delay:.3s}
  .mmenu.open .mm-more .mm-kick{opacity:1;transform:none;transition-delay:.36s}
  .mmenu.open .mm-foot{opacity:1;transform:none;transition-delay:.42s}
  .mmenu.open .mm-pills a{transition-delay:.4s}
}

/* ---- Next card: the same premium frame as every other card (gold-tinted border, halo, warm gradient, gold rule kept inside the
   rounded corners, soft gold glow), a gold-ruled kicker, and the arrow in a gold ring that fills on hover ---- */
.next-pg a{overflow:hidden;padding:28px 28px 26px;gap:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,var(--card)) 0%,var(--card) 40%,color-mix(in srgb,var(--teal) 4%,var(--card)) 100%);border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 8%,transparent),0 16px 36px -22px rgba(23,42,38,.30),inset 0 1px 0 var(--hl);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease}
.next-pg a::before{inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--gold) 28%,#F0C979 50%,var(--gold) 72%,transparent)}
.next-pg a::after{content:"";position:absolute;width:320px;height:320px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);pointer-events:none}
.next-pg a>*{position:relative;z-index:1}
.next-pg .np-k{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em}
.next-pg .np-k::before,.next-pg .np-k::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.next-pg .np-k::after{background:linear-gradient(90deg,var(--gold),transparent)}
.next-pg .np-t{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px .5em;font-size:clamp(22px,2.6vw,27px)}
.next-pg .np-t::after{content:"\2192";display:inline-grid;place-items:center;width:34px;height:34px;margin-left:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--gold-2);font-family:"Figtree","Figtree Fallback",system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s ease,color .35s ease,border-color .35s ease}
.next-pg .np-d{font-size:15px;max-width:46ch}
.next-pg a:hover,.next-pg a:focus-visible{border-color:color-mix(in srgb,var(--gold) 72%,var(--line));box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 13%,transparent),0 22px 44px -22px rgba(23,42,38,.42),inset 0 1px 0 var(--hl);transform:translateY(-3px)}
.next-pg a:hover .np-t::after,.next-pg a:focus-visible .np-t::after{transform:translateX(4px);background:linear-gradient(135deg,#F0C979,var(--gold));border-color:transparent;color:#1E1A10}
@media (prefers-reduced-motion:reduce){.next-pg a,.next-pg .np-t::after{transition:none}.next-pg a:hover,.next-pg a:focus-visible,.next-pg a:hover .np-t::after,.next-pg a:focus-visible .np-t::after{transform:none}}

/* ---- The closed phone menu must never catch clicks. A shared logo rule (.logo .rl{visibility:visible}) kept the menu's tagline
   clickable while the rest of the menu was hidden, and on laptops that invisible line sat over the middle of the header links,
   sending some clicks to the home page instead of the page clicked. ---- */
.mmenu:not(.open) .logo .rl{visibility:inherit}
.mmenu:not(.open),.mmenu:not(.open) *{pointer-events:none!important}

/* ---- HEARD Method stage cards: centred like the rest of the site (the earlier left-aligned reading blocks are retired). Tick lists
   and the legal pages keep their left edge so the ticks line up and the terms read easily. ---- */
.tcard2 .t-ask,.tcard2 .t-find,.tcard2 .t-exp{text-align:center;text-wrap:pretty;margin-left:auto;margin-right:auto}

/* ---- HEARD cards: the footer line always sits on the card's last row, so The Landing's "Five stages" line lines up with the ICF
   lines beside it instead of floating mid-card ---- */
.sg7>.card.tcard2>.t-icf{grid-row:7}