/* Layout, typography and mobile polish. Loaded last so it wins over page styles. */

/* --- 1. Kill sideways scroll caused by decorative offset blocks --- */
html{overflow-x:clip}
body{overflow-x:clip}

@media (width < 768px){
  /* Homepage hero: pull the tinted offset block back inside the viewport */
  .hero-image-wrapper.hero-image-wrapper::before{transform:translate(.5rem,.5rem)}
  /* Homepage about block: the tinted panel was sitting 10% outside the page */
  .about-image-wrapper.about-image-wrapper::before{right:-2%;width:45%}
  /* Newsletter: blurred gold circle was pushing 59px past the right edge */
  .promo-decor.promo-decor{transform:translate(8%,-50%)}
}

/* --- 2. About page image pair ---
   `1fr` columns cannot shrink below their content's minimum, so the first
   image was taking 382px of a 720px row and shoving the second off the page.
   minmax(0,1fr) lets both columns share the space evenly. */
.double-images.double-images{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Two portraits side by side are too small to read on a phone, so stack them. */
@media (width < 768px){
  .double-images.double-images{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .offset-image.offset-image{margin-top:0}
}

/* --- 3. Tap targets. Phone links were 21-32px tall; 44px is the comfortable minimum. --- */
@media (width < 768px){
  .footer-link.footer-link{min-height:44px;display:flex;align-items:center}
  .link-action.link-action{min-height:44px;display:inline-flex;align-items:center;gap:.5rem}
  .method-link.method-link{min-height:44px;display:inline-flex;align-items:center}
  .nav-link.nav-link{min-height:44px;display:inline-flex;align-items:center}
  .social-btn.social-btn{min-height:44px}
  /* RIZE compare-card headings are links; give them a real touch area */
  .compare-card-title.compare-card-title a{min-height:44px;display:inline-flex;align-items:center}
}

/* --- 3b. BUG FIX: .visually-hidden was used in the markup but never defined
   in any stylesheet, so "Program Options" and "Self-paced Toolkit" were
   rendering as visible headings on the RIZE page, flush to the page edge.
   This restores the intended screen-reader-only behaviour. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* --- 3c. BUG FIX: .text-center is only defined scoped to the newsletter,
   resources and RIZE components, so on the homepage `class="container
   text-center"` did nothing. The statement section's eyebrow
   ("Coaching women at the highest level") sat left while everything around it
   was centred by auto margins. Define the utility globally. */
.text-center{text-align:center}

/* Caption under the RIZE six-month table */
.table-note{margin:.85rem 1rem 0;font-size:.875rem;font-weight:300;opacity:.7}

/* --- 3d. BUG FIX: colour utilities were only ever emitted scoped to
   individual components, never globally, so markup like
   `class="btn-primary text-paper bg-ground"` silently did nothing wherever
   that component's stylesheet lacked the rule. The visible symptom: the
   "Book a discovery call" button on BOTH RIZE product cards rendered as a
   cream button on a cream section, i.e. invisible, and it is the primary
   CTA on that page. Values copied from the existing scoped rules. */
.bg-ground.bg-ground{background-color:var(--ground)}
.bg-paper.bg-paper{background-color:var(--paper)}
.bg-mark.bg-mark{background-color:var(--mark)}
.bg-accent.bg-accent{background-color:var(--accent)}
.text-ground.text-ground{color:var(--ground)}
.text-paper.text-paper{color:var(--paper)}
.text-mark.text-mark{color:var(--mark)}
.text-accent.text-accent{color:var(--accent)}
.text-paper-muted.text-paper-muted{color:#e8e6d0b3}
.border-ground.border-ground{border-color:var(--ground)}
.border-paper.border-paper{border-color:var(--paper)}
.border-ground-light.border-ground-light{border-color:#091e2126}

/* --- 30 day guarantee (RIZE, under both coaching routes) ---
   Promise on the left, terms on the right, so the commitment reads at a
   glance and the conditions stay visible rather than hidden behind a click. */
.guarantee{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  margin-top:4rem;
  padding:3rem;
  border:1px solid #091e2126;
  background:#091e210a;
}
.guarantee-eyebrow{
  display:block;margin-bottom:1rem;color:#84142C;
  text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem;font-weight:600;
}
.guarantee-title{
  font-family:var(--font-head);
  font-size:clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  line-height:1.18;margin:0 0 1.25rem;
  text-wrap:balance;
}
.guarantee-body{margin:0 0 1rem;font-weight:300;line-height:1.65;opacity:.85}
.guarantee-cta{margin-top:1.25rem;display:inline-flex;align-self:flex-start}

.guarantee-terms{border-left:1px solid #091e2126;padding-left:2.5rem}
.guarantee-terms-title{
  font-family:var(--font-head);font-size:1.25rem;margin:0 0 1.25rem;
}
.guarantee-terms-list{
  margin:0;padding-left:1.4rem;
  list-style:decimal;                 /* the reset sets list-style:none */
  font-size:.9375rem;font-weight:300;line-height:1.6;opacity:.8;
}
.guarantee-terms-list li::marker{opacity:.65;font-variant-numeric:tabular-nums}
.guarantee-terms-list li{margin-bottom:.7rem;padding-left:.25rem}
.guarantee-terms-list li:last-child{margin-bottom:0}
.guarantee-terms-list a{text-decoration:underline;text-underline-offset:2px}

@media (width < 900px){
  .guarantee{grid-template-columns:minmax(0,1fr);gap:2rem;padding:2rem;margin-top:3rem}
  .guarantee-terms{border-left:0;border-top:1px solid #091e2126;padding-left:0;padding-top:2rem}
}
@media (width < 600px){
  .guarantee{padding:1.5rem}
  .guarantee-cta{width:100%;justify-content:center}
}

/* --- Client reviews as real text ---
   These were 160x160 screenshots stretched to full card width, with words
   cropped off both edges. They are now live text: sharp at any size,
   readable on a phone, and indexable. Cards vary in length, so the grid is
   a column flow rather than a rigid two-up. */
.proof-grid.proof-grid{
  display:block;
  columns:2;
  column-gap:1.5rem;
}
.proof-grid.proof-grid .review-card{
  break-inside:avoid;
  display:inline-block;
  width:100%;
  margin:0 0 1.5rem;
  padding:1.75rem;
}
.review-text{
  margin:1.1rem 0 0;
  padding:0;
  border:0;
  font-weight:300;
  font-size:1rem;
  line-height:1.65;
  color:#E8E6D0;
  opacity:.85;
}
.review-text p{margin:0 0 .85rem}
.review-text p:last-child{margin-bottom:0}
.review-rating .stars{letter-spacing:.06em}

@media (width < 1024px){ .proof-grid.proof-grid{columns:1} }
@media (width < 600px){
  .proof-grid.proof-grid .review-card{padding:1.35rem}
  .review-text{font-size:.9375rem}
}

/* --- "What is the extra 1%?" (homepage, directly under the hero) ---
   Dark section between the cream hero and the cream Midweek Reset block, so
   the explainer for the headline's central claim reads as its own beat. */
.extra-one{padding:5.5rem 0}
.extra-head{max-width:46rem;margin-bottom:3.5rem}
.extra-lead{
  margin:1.25rem 0 0;font-size:1.125rem;font-weight:300;line-height:1.65;opacity:.85;
}
.extra-kicker{
  margin:1.5rem 0 0;font-family:var(--font-head);font-size:1.25rem;color:#D3C098;
}

.extra-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;
}
.extra-card{padding-top:1.5rem;border-top:1px solid #d3c09859}
.extra-num{
  display:block;font-family:var(--font-head);font-size:1.125rem;
  color:#D3C098;opacity:.75;margin-bottom:.6rem;letter-spacing:.06em;
}
.extra-title{
  font-family:var(--font-head);font-size:1.625rem;margin:0 0 .85rem;line-height:1.15;
}
.extra-body{margin:0;font-weight:300;line-height:1.65;opacity:.82}

.extra-how{
  margin-top:4rem;padding-top:3rem;border-top:1px solid #e8e6d024;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:2.5rem;row-gap:1.1rem;align-items:end;
}
.extra-how-title{
  font-family:var(--font-head);font-size:1.5rem;margin:0;color:#D3C098;
  grid-column:1 / -1;align-self:start;
}
.extra-how-body{margin:0;font-weight:300;line-height:1.7;opacity:.85;max-width:52rem}
.extra-cta{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;flex-shrink:0}

@media (width < 900px){
  .extra-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .extra-how{grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:start}
}
@media (width < 600px){
  .extra-one{padding:3.5rem 0}
  .extra-head{margin-bottom:2.5rem}
  .extra-cta{width:100%;justify-content:center;white-space:normal}
}

/* --- 3e. BUG FIX + layout: the RIZE door blocks ---
   `.door-block` is a 12-column grid, but its children carry `lg:col-span-7`
   and `lg:col-span-5`, which are among the utility classes this build never
   emitted. With no span, each child was landing in a single 32px track and
   overflowing out of it, which is why the One to One and Group panels sat
   narrow and jammed against the left edge. Define the spans, and where a
   block has only one child, centre it and let it run wider. */
.door-block.door-block.door-block > .door-text.door-text:only-child{
  grid-column:1 / -1;
  justify-self:center;
  width:100%;
  max-width:58rem;
}
@media (width >= 1024px){
  /* two-child blocks (Organizations) keep the intended 7 / 5 split */
  .door-block.door-block.door-block > .door-text.door-text:not(:only-child){
    grid-column:1 / span 7;max-width:none;
  }
  .door-block.door-block.door-block > .org-starts-box.org-starts-box{grid-column:8 / span 5}
}

/* Compare-table prices were wine on dark teal, which is close to unreadable.
   Gold matches the rest of the table and lifts the number slightly. */
.price-cell.price-cell{color:var(--mark);font-size:1.5rem;letter-spacing:.01em}

/* The RIZE hero standfirst opened with a <strong>, so its first sentence
   rendered heavier than the rest. Level it out with the paragraph below. */
.hero-subhead.hero-subhead strong{font-weight:300}

/* --- 3f. BUG FIX: the spacing and size utilities were never emitted either ---
   The markup leans on a Tailwind-style scale (mb-6, mb-8, mt-8, pb-24, py-12,
   text-sm/xl/2xl, max-w-3xl) and none of it exists in the CSS, so every one of
   those classes was silently doing nothing. That is why paragraphs in "Who this
   is for" and "Find your extra 1%" ran together with no gap. Two RIZE sections
   also had no padding rule at all, so their text sat hard against the section
   edges and against the logo wall above. */
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-8{margin-top:2rem}
.pb-24{padding-bottom:6rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}
.max-w-4xl{max-width:56rem;margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.align-start{align-items:start}
.align-center{align-items:center}
.max-w-6xl{max-width:72rem;margin-left:auto;margin-right:auto}
.flex-grow{flex-grow:1}
.w-full{width:100%}
.font-light{font-weight:300}
.text-sm{font-size:.875rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}

/* the two RIZE sections that carried no padding of their own */
.rize-fit{padding:6rem 0}
.rize-close{padding:6rem 0}
/* and give their stacked paragraphs real separation */
.rize-fit .section-body,
.rize-close .section-body{margin-bottom:1.25rem}
.rize-fit .section-body:last-child,
.rize-close .section-body:last-child{margin-bottom:0}
.rize-fit h3,.rize-fit h4{margin-bottom:1rem}

@media (width < 768px){
  .rize-fit{padding:3.5rem 0}
  .rize-close{padding:3.5rem 0}
}

/* --- Light-toned sections (.tone-light) ---
   Removing the "Areas of Focus" block left five dark sections running back to
   back, so "Who I work with" and the tools section are flipped to the cream
   ground and the page alternates again. Their inner rules were written in
   cream tints for a dark background, so those are restated in the dark ink. */
.tone-light.who{border-top-color:#091e2126}
.tone-light .profile-card{border-left-color:#091e2140}
.tone-light .profile-card:hover{border-left-color:var(--ground)}
.tone-light .tool-item{border-top-color:#091e2126}
.tone-light .tool-number{color:#84142c33}
.tone-light .text-mark{color:#9a7b3f}          /* brand gold is too pale on cream */
.tone-light .eyebrow{color:#84142C}
.tone-light .btn-outline{color:var(--ground);border-color:#091e214d}
.tone-light .btn-outline:hover{background-color:#091e210d}
.tone-light .link-action{color:var(--ground)}

/* --- RIZE list headings ---
   On a phone these sat at 22px against 18px body copy, both at weight 400, so
   the heading barely separated from its own list. Playfair is only loaded at
   400, so weight is not available: the lift comes from size and a tighter
   line-height so the two lines read as one block. 26px on a phone, 28px up. */
.list-title.list-title{
  font-size:clamp(1.625rem, 1.4rem + 0.9vw, 1.75rem);
  line-height:1.2;
  margin-bottom:1.75rem;
}

/* --- Mobile hero: lead with Claire ---
   On a phone the hero stacked headline-first and pushed the photo well below
   the fold. The image now comes first. It is cropped square rather than 3:4 so
   that the photo AND the first lines of the headline both land above the fold,
   and the hero's top padding is trimmed since the fixed header already
   provides the offset. object-position:top keeps her face in frame. */
@media (width < 1024px){
  .hero.hero{padding-top:5.5rem}
  .hero-grid.hero-grid{gap:2rem}
  .hero-image-wrapper.hero-image-wrapper{
    order:-1;
    /* The source photo is a 3:4 waist-up portrait. Matching that ratio means
       object-fit:cover crops nothing, so the whole frame shows rather than a
       letterboxed slice of her shoulders. */
    aspect-ratio:3/4;
    max-width:none;
    margin-bottom:.5rem;
  }
  .hero-img.hero-img{object-position:center}
}
@media (width < 480px){
  .hero.hero{padding-top:5rem}
}

/* --- Headline highlight box ---
   As an inline element the wine box painted at the font's content-area
   height (~1.3em for Playfair), not the line-height, so at a tight
   line-height it covered the descenders of the line above: the "y" of
   "by finding" was being cut in half. Making it an inline-block with its own
   line-height pins the box to the text it wraps, and the headline
   line-height above gives it room to sit in. */
.highlight.highlight{
  display:inline-block;
  line-height:1;
  padding:.12em .34em .16em;
  vertical-align:baseline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* --- Three standalone banners: newsletter, live call, awards ---
   One shared row treatment so all three read as a set and sit at the same
   height. The live one keeps the dark box but takes a gold edge and the
   Live badge so it is distinguishable at a glance. */
.banner-row{background-color:var(--paper);padding:0 0 1.5rem}
.banner-last{padding-bottom:4rem}
.newsletter-promo.banner-row{padding-top:2.5rem}

.banner-row .promo-box,
.banner-row .awards-box{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:2rem;padding:2.5rem 3rem;min-height:15rem;
}
.banner-row .promo-content,
.banner-row .awards-content{align-items:center;gap:1.25rem;max-width:48rem}
.banner-row .promo-icon,
.banner-row .awards-icon{width:3.5rem;height:3.5rem;flex-shrink:0}
.banner-row .promo-body,
.banner-row .awards-body{margin:0;max-width:42rem}
.banner-row .promo-btn{flex-shrink:0;white-space:nowrap;align-self:center}

/* the live banner */
.live-box{
  background-color:var(--ground);color:var(--paper);
  border:1px solid #d3c09866;border-left:3px solid var(--mark);
}
.live-icon{color:var(--mark);border:1px solid #d3c09880;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.live-line{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;flex-wrap:wrap}
.live-eyebrow{margin-bottom:0 !important;opacity:.75}
.live-badge{
  display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .6rem;
  background:#84142c;color:#E8E6D0;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:#E8E6D0;
  animation:reset-pulse 2s ease-in-out infinite}
@keyframes reset-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

@media (width < 860px){
  .banner-row .promo-box,
  .banner-row .awards-box{flex-direction:column;align-items:flex-start;gap:1.5rem;padding:2rem}
  .banner-row .promo-content,
  .banner-row .awards-content{align-items:flex-start}
  .banner-row .promo-btn{width:100%;justify-content:center;white-space:normal}
}

/* --- Client logo wall (RIZE for Organizations) ---
   The source logos arrive in ten different colours, shapes and baked-in
   backgrounds, so each one is rendered as a single-colour silhouette on a
   transparent tile of identical size, scaled to even visual weight. The grid
   then only has to place them. */
.client-logos{margin-top:2rem}
.client-logos-title{margin-bottom:2.75rem;text-align:center}
.client-logo-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:3.25rem 2rem;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.client-logo-item{display:flex;align-items:center;justify-content:center;min-height:64px}
.client-logo{
  width:100%;
  max-width:210px;
  height:auto;
  opacity:.72;
  transition:opacity .25s ease;
}
.client-logo:hover{opacity:1}

@media (width < 1024px){
  .client-logo-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:2.75rem 1.5rem}
}
@media (width < 600px){
  .client-logo-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:1.75rem 1rem}
  .client-logo{max-width:165px;opacity:.85}
  .client-logos-title{margin-bottom:1.5rem}
}

/* --- 4. Small caption text nudged up for legibility --- */
.review-detail.review-detail{font-size:.8125rem}

/* Hero buttons sat at exactly the column width, so flex squeezed them and the
   labels broke onto two lines ("Book a Discovery / Call"). Stop them shrinking,
   trim the horizontal padding slightly, and let the pair wrap as whole buttons
   if a narrow screen genuinely has no room. */
.hero-actions.hero-actions{flex-wrap:wrap}
.hero-actions.hero-actions > a{flex-shrink:0;white-space:nowrap;padding-left:1.75rem;padding-right:1.75rem}
@media (width < 480px){
  .hero-actions.hero-actions > a{width:100%;white-space:normal}
}

/* --- 4b. RIZE tables on phones ---
   Three columns inside 340px squeezed "What happens" to 131px, so every cell
   wrapped to 6-7 lines and the rows became enormously tall. On phones each row
   becomes a stacked block instead. The class is repeated to out-rank the
   page stylesheet without depending on its generated attribute selectors. */
@media (width < 768px){
  .phase-table.phase-table.phase-table.phase-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .phase-table.phase-table.phase-table.phase-table,
  .phase-table.phase-table.phase-table.phase-table tbody,
  .phase-table.phase-table.phase-table.phase-table tr,
  .phase-table.phase-table.phase-table.phase-table td{display:block;width:100%}
  .phase-table.phase-table.phase-table.phase-table tr{
    padding:.85rem 0;border-bottom:1px solid #091e211a}
  .phase-table.phase-table.phase-table.phase-table tr:last-child{border-bottom:0}
  .phase-table.phase-table.phase-table.phase-table td{
    border:0;padding:.15rem 1rem;line-height:1.55}
  .phase-table.phase-table.phase-table.phase-table td:first-child{
    text-transform:uppercase;letter-spacing:.09em;font-size:.8125rem;
    font-weight:500;opacity:.65;margin-bottom:.2rem}
  .dark-table.dark-table.dark-table.dark-table tr{border-bottom-color:#e8e6d024}
}

/* --- 5. Reading comfort on phones --- */
@media (width < 768px){
  p{line-height:1.65}
}

/* --- 6. Long words and URLs should never force a page to scroll sideways --- */
h1,h2,h3,p,li,a{overflow-wrap:break-word}