/* ==========================================================================
   QoLFit — site.css  (qolfit.net)
   ==========================================================================
   Brand tokens. Green and navy are SAMPLED from QolFit_ColorLogo-1.png, her own
   artwork, not eyeballed from a screenshot: they are the two dominant opaque
   colours in the file, at 341,839 and 252,260 pixels. The logo has 513 distinct
   colours in total, which is what flat vector-drawn artwork looks like; a
   recreated one had 18,992 and colours a shade out on both. Use hers.

   The page styles under "QoLFit pages" are carried over from the Day One
   rebuild, where every number was MEASURED on her live Elementor pages at
   1850px. Her Elementor globals were #1C2657 / #589843 / #549444, all within a
   shade of the logo; here they resolve to the logo's own two colours.
   ========================================================================== */
:root {
  --green:  #579742;
  --navy:   #1C2758;
  --green-dark: #477a35;      /* derived: hover */
  --ink:    #2b2b2b;
  --ink-soft: #505050;
  --rule:   #e2e6ea;
  --wash:   #f2f6f1;          /* a pale wash of the green, for banding */
  --white:  #ffffff;

  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap:   1200px;

  /* the names the page styles use */
  --qf-indigo: var(--navy);
  --qf-green:  var(--green);
  --qf-grey:   #bcbaba;
  --qf-slate:  #3f444b;
  --blue:      var(--navy);   /* the "who is it for" headings used the Day One blue; navy here */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
h1, h2, h3, h4 { font-family: var(--sans); line-height: 1.2; margin: 0 0 .5em; color: var(--navy); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }   /* a UA style loses to any class that sets display */

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--white); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Masthead + nav (one level)
   -------------------------------------------------------------------------- */
.masthead { position: relative; z-index: 100; background: var(--white); border-bottom: 1px solid var(--rule); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 88px; padding-block: 12px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { width: auto; height: clamp(34px, 4vw, 46px); }   /* the wordmark, 1920x467 */

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: var(--navy); color: var(--white); border: 0; border-radius: 4px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 1px;
  padding: .7rem 1rem; min-height: 44px; cursor: pointer;
}
.nav-toggle__bars { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.nav__link {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--navy); text-decoration: none;
  white-space: nowrap; padding: 0 18px; line-height: 64px;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--green); }
.nav__link--cta {
  margin-left: 10px; line-height: 40px; padding: 0 22px;
  background: var(--green); color: var(--white); border-radius: 0;
}
.nav__link--cta:hover { background: var(--green-dark); color: var(--white); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--rule);
    box-shadow: 0 8px 28px rgba(28, 39, 88, .16);
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: 8px 0; }
  .nav__link { line-height: 48px; padding: 0 var(--gutter); white-space: normal; }
  .nav__link--cta { margin: 8px var(--gutter) 4px; line-height: 44px; text-align: center; }
}

/* --------------------------------------------------------------------------
   Inner-page title band
   -------------------------------------------------------------------------- */
.pagehead { background: var(--navy); padding: 56px 0; }
.pagehead h1 {
  color: var(--white); font-size: clamp(1.7rem, 3vw, 44px); font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0;
}

/* --------------------------------------------------------------------------
   Footer + back to top
   -------------------------------------------------------------------------- */
.footer { background: var(--wash); border-top: 4px solid var(--green); color: var(--navy); margin-top: 40px; }
.footer__grid {
  display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 40px;
  padding-block: 48px; align-items: start;
}
.footer__brand img { width: 220px; height: auto; display: block; }
.footer__tagline { margin: 14px 0 0; font-size: 14px; font-style: italic; color: var(--green); letter-spacing: .5px; }
.footer__about p { font-size: 15px; line-height: 25px; margin: 0 0 10px; }
.footer a { color: var(--navy); }
.footer a:hover { color: var(--green); }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 14px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.footer__bottom { border-top: 1px solid var(--rule); padding: 18px var(--gutter); text-align: center; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

.to-top {
  position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--navy); color: var(--white);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  display: flex; align-items: center; justify-content: center; z-index: 90;
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--green); }

/* ==========================================================================
   QoLFit pages
   ==========================================================================
   Every number below was MEASURED on her live pages at 1850px (Day One
   rebuild, 2026-09-09), not eyeballed. Her layout is one 1120px content
   column all the way down, with 20px gutters, so each grid is 550+550 or
   4x265 and nothing else. Type: Poppins 500 for the headings, Montserrat for
   everything else.
   -------------------------------------------------------------------------- */

/* Her sections carry no padding of their own; the 10px is Elementor's column
   padding, which is what actually sets the rhythm on this page. */
.qf-sec { padding: 0; }
.qf-sec > .wrap { padding-block: 10px; }
.qf-sec--white { background: #fff; }
.qf-sec--spacer { height: 40px; }          /* her 20px spacer + 2x10 column padding */

.qf-logo { display: block; width: 300px; height: 213px; margin-inline: auto; }
.qf-sec--logo > .wrap { padding-top: 40px; }

/* 40px/500 italic Poppins, letter-spacing 3px, NOT uppercase. */
.qf-title {
  font-family: "Poppins", var(--sans);
  font-size: 40px; font-weight: 500; font-style: italic;
  line-height: 40px; letter-spacing: 3px; text-transform: none;
  color: var(--qf-green); text-align: center; margin: 0;
}
.qf-title--alt { color: var(--qf-green); }

/* Her intro and closing lines: 16px/300 italic, #303030. The closing one is
   wrapped in <b>, which resolves to 400 against a 300 base. */
.qf-sec--lede > .wrap { padding-block: 25px; }   /* 10 column + 15 widget */
.qf-lede {
  font-size: 16px; font-weight: 300; font-style: italic;
  line-height: 26px; color: #303030; text-align: center;
  max-width: 1090px; margin: 0 auto;
}
.qf-lede b { font-weight: 400; }
.qf-sec--lede-close .qf-lede b { font-weight: 700; }   /* Tambra 9/10: the closing statement in bold */

/* Section headings: Poppins 32/500, 3px tracking, uppercase, white on navy.
   Three of the four carry a 2px double white border; "What is QoLFit?" does
   not; it sits in a white 25px-radius card instead. */
.qf-head {
  font-family: "Poppins", var(--sans);
  font-size: 32px; font-weight: 500; line-height: 32px;
  letter-spacing: 3px; text-transform: uppercase;
  color: #fff; background: var(--qf-indigo);
  text-align: center; margin: 0;
}
.qf-head--framed { border: 2px double #fff; }
.qf-sec--card > .wrap { padding-block: 0; }
.qf-card {
  background: #fff; border-radius: 25px; padding: 20px; margin-inline: -10px;
  transition: box-shadow 0.3s;
}
.qf-card:hover { box-shadow: 0 0 10px 0 #555588 inset; }

/* Body copy: 15px/25px, centred, navy. Her paragraphs are separated by an
   empty <p>, i.e. one blank 25px line, reproduced as a margin. */
.qf-copy { text-align: center; color: var(--qf-indigo); }
.qf-copy p { font-size: 15px; line-height: 25px; margin: 0; max-width: none; }
.qf-copy p + p { margin-top: 25px; }
.qf-copy p.qf-flush { margin-top: 0; }
.qf-copy h3 { color: var(--qf-indigo); font-size: 23px; line-height: 30px; margin: 0 0 14px; }
.qf-copy p + h3 { margin-top: 26px; }

/* Photo left, copy right. Until 9/10 the section height was set by the 550x825 photo; Tambra:
   "large compared to text ... I just don't like all the white space", so now the COPY sets the
   height and the photo is cropped (centre) to match it, never taller than her original. */
.qf-split__grid { display: grid; grid-template-columns: 550px 550px; gap: 20px; justify-content: center; align-items: stretch; }
.qf-split__grid > div:first-child { position: relative; min-height: 420px; }   /* the photo cell adds no height of its own */
.qf-split__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.qf-split__copy > .qf-copy { padding: 20px; }
.qf-rule { width: 85%; margin: 0 auto; border: 0; border-top: 2px solid var(--qf-green); }

.qf-sec--copy > .wrap { padding-block: 30px; }   /* 10 column + 20 widget */

/* Four "who is it for" cards: 265px images, 20px gutters, headings 23/600. */
.qf-who__grid { display: grid; grid-template-columns: repeat(4, 265px); gap: 20px; justify-content: center; }
.qf-who__item img { display: block; width: 265px; height: 177px; object-fit: cover; }
.qf-who__item h4 {
  font-size: 23px; font-weight: 600; line-height: 23px;
  letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--blue); text-align: center; margin: 20px 0 0;
}

.qf-figure { margin: 0; }
.qf-process { display: block; width: 1024px; max-width: 100%; height: auto; margin-inline: auto; }

/* "Why was QoLFit created?": two grey columns on white. */
.qf-why__grid { display: grid; grid-template-columns: 550px 550px; gap: 20px; justify-content: center; }
.qf-why__col { background: var(--qf-grey); }
.qf-panel {
  background: var(--qf-grey); padding: 29px;
  border: 2px double #f7f8fb; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  color: #000;
}
.qf-panel p { color: #000; }
.qf-frame {
  background: var(--qf-green); border: 2px double #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); line-height: 0;
}
.qf-frame img { display: block; width: 546px; height: 364px; object-fit: cover; }

/* The two call-to-action cards: a 200px banner, then a #f9fafa panel. */
.qf-cta__grid { display: grid; grid-template-columns: 550px 550px; gap: 20px; justify-content: center; }
.qf-cta__card { background: #f9fafa; }
/* The two banners carry their own artwork and words (1024x307), so they must never be
   cropped: the box keeps the image's own proportions and the image fills it exactly.
   A fixed 200px box with `cover` cut both sides off on a phone (Tambra, 2026-09-09). */
.qf-cta__bg { aspect-ratio: 1024 / 307; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.qf-cta__content { padding: 35px; text-align: center; }
.qf-cta__title {
  font-size: 23px; font-weight: 600; line-height: 48px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--qf-slate); margin: 0;
}
.qf-cta__desc { font-size: 15px; line-height: 26px; color: var(--qf-slate); margin: 15px 0 0; }
.qf-cta__actions { margin: 15px 0 0; }
.qf-cta__btn {
  display: inline-block; font-size: 15px; font-weight: 500; line-height: 15px;
  padding: 12px 24px; border: 2px solid; border-radius: 0;
  color: #fff; text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.qf-cta__btn:hover { color: #fff; }
.qf-cta__btn--indigo { background: var(--qf-indigo); border-color: var(--qf-indigo); }
.qf-cta__btn--indigo:hover { background: #101838; border-color: #101838; }
.qf-cta__btn--green { background: var(--qf-green); border-color: var(--qf-green); }
.qf-cta__btn--green:hover { background: var(--green-dark); border-color: var(--green-dark); }

/* Fifty-fifty rows on the two inner pages. */
.qf-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; }
.qf-square { display: block; width: 100%; max-width: 570px; height: auto; margin-inline: auto; }
/* Tambra 9/10: a photo beside short copy follows the copy's height (cropped, centre) */
.qf-two--fit { align-items: stretch; }
.qf-two--fit > div:first-child { position: relative; min-height: 360px; }
.qf-two--fit .qf-square { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.qf-copy p.qf-gap { margin-top: 50px; }              /* a blank line before, as asked */
.qf-copy ul.qf-list--gap { margin-top: 25px; }
.qf-wide { display: block; width: 100%; max-width: 550px; height: auto; margin: 20px auto 0; }
.qf-aside { text-align: center; }
.qf-aside img { display: block; width: 100%; max-width: 550px; height: auto; margin: 20px auto 0; }
.qf-wordmark { display: block; width: 420px; max-width: 100%; height: auto; margin: 24px auto; }
.qf-banner { display: block; width: 100%; max-width: 1024px; height: auto; margin-inline: auto; }
.qf-copy--pad { padding: 10px; }
.qf-tiers h3 { color: var(--qf-indigo); margin-top: 26px; }
.qf-tiers h3:first-child { margin-top: 0; }
.qf-sub { text-transform: uppercase; letter-spacing: .3px; }

.qf-copy h4 {
  font-family: var(--sans);
  font-size: 23px; font-weight: 600; line-height: 33px;
  letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--qf-green); margin: 26px 0 6px;
}
.qf-copy h4:first-child { margin-top: 0; }
.qf-list { margin: 20px 0 0; padding-left: 22px; text-align: left; }
.qf-list li { font-size: 15px; line-height: 26px; color: var(--qf-indigo); max-width: none; }

.qf-btns { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.qf-btn {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--qf-green); color: #fff;
  font-size: 15px; font-weight: 500; line-height: 15px;
  padding: 12px 24px; border: 2px solid var(--qf-green); border-radius: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.qf-btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* FAQ: native <details>. */
.qf-faq { border-top: 1px solid var(--rule); }
.qf-faq__item { border-bottom: 1px solid var(--rule); }
.qf-faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 18px 0;
  font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 26px;
  color: var(--qf-indigo);
}
.qf-faq__item > summary::-webkit-details-marker { display: none; }
.qf-faq__item > summary::before {
  content: "+"; flex: 0 0 auto; width: 22px; text-align: center;
  font-size: 20px; font-weight: 400; line-height: 1; color: var(--qf-green);
}
.qf-faq__item[open] > summary::before { content: "\2013"; }
.qf-faq__item > summary:hover { color: var(--qf-green); }
.qf-faq__item > summary:focus-visible { outline: 3px solid var(--qf-green); outline-offset: 2px; }
.qf-faq__body { padding: 0 0 20px 36px; }
.qf-faq__body p { font-size: 15px; line-height: 26px; color: var(--qf-indigo); max-width: none; margin: 0; }

/* Below her 1140px boxed container the fixed grids have to give way. */
@media (max-width: 1180px) {
  .qf-split__grid, .qf-why__grid, .qf-cta__grid { grid-template-columns: minmax(0, 550px); justify-content: center; }
  .qf-split__photo { position: static; width: 100%; height: auto; }
  .qf-split__grid > div:first-child, .qf-two--fit > div:first-child { min-height: 0; }
  .qf-two--fit .qf-square { position: static; height: auto; max-width: 570px; }
  .qf-who__grid { grid-template-columns: repeat(2, minmax(0, 265px)); }
  .qf-frame img, .qf-who__item img { width: 100%; height: auto; }
}
@media (max-width: 900px) { .qf-two { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 620px) {
  .qf-who__grid { grid-template-columns: minmax(0, 265px); }
  .qf-title { font-size: 30px; line-height: 34px; }
  .qf-head { font-size: 22px; line-height: 26px; letter-spacing: 2px; }
  .qf-logo { width: 240px; height: auto; }
}

/* The four-step graphic carries its words as pixels; on a phone they shrink past reading
   (Tambra, 2026-09-09: "other images are small in the mobile version"). The same words already
   sit under it as real text for screen readers, so at phone width that text simply shows. */
@media (max-width: 640px) {
  .qf-sec--process .qf-figure figcaption.visually-hidden {
    position: static !important; width: auto; height: auto; margin: 18px 0 0; padding: 0; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
  }
  .qf-sec--process .qf-figure figcaption ol { margin: 0; padding-left: 22px; }
  .qf-sec--process .qf-figure figcaption li { margin: 0 0 10px; line-height: 1.45; }
}