/* ============================================================
   pages.css — layout shared by the inner content pages.

   This block was byte-identical in coaching, parawing, week and
   contact, and differed in about.html by one property. It is the
   about.html version, which is the correct one: .story-photo needs
   overflow:hidden to clip the portrait inside it.

   ~83 lines x 5 pages of duplication removed. Covers the plain
   arrow list, pricing tables, the included/coverage grids, the
   week schedule, and the about and contact page furniture.

   Load AFTER base.css and BEFORE the page's own <style>.
   ============================================================ */
  /* --- page hero (no photo, used on inner pages) --- */
  .page-hero{background:var(--black); color:var(--white); padding:96px 0 68px;}
  .page-hero .overline{color:var(--teal);}
  .page-hero h1{font-size:3rem; color:var(--white); max-width:760px; margin:14px 0 18px;}
  .page-hero p{color:#D8D8E0; font-size:1.08rem; max-width:600px; margin-bottom:28px;}

  /* --- plain arrow list (pain points, "who this is for") --- */
  ul.list-plain{display:flex; flex-direction:column; gap:0; margin:28px 0; padding:0;}
  ul.list-plain li{list-style:none; padding:18px 4px; border-bottom:1px solid rgba(var(--black-rgb),0.1); font-size:1.04rem; display:flex; gap:14px; align-items:flex-start; color:var(--black);}
  ul.list-plain li::before{content:"→"; color:var(--teal); font-family:'Barlow Condensed'; font-weight:800; flex-shrink:0;}
  ul.list-plain.on-dark li{border-bottom-color:rgba(255,255,255,0.14); color:#EDEDF2;}

  /* --- pricing tables --- */
  table.pack-table{width:100%; border-collapse:collapse; margin:22px 0 10px;}
  table.pack-table th{text-align:left; font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.08em; color:var(--slate); padding:10px 12px; border-bottom:2px solid var(--black);}
  table.pack-table td{padding:14px 12px; border-bottom:1px solid rgba(var(--black-rgb),0.1); font-size:0.96rem;}
  .pricing-block{margin-bottom:44px;}
  .pricing-block h3{font-size:1.5rem; margin-bottom:6px;}
  .pricing-block .sub{color:var(--slate); font-size:0.94rem;}

  .reschedule-note{background:var(--lavender); border-radius:var(--radius); padding:18px 22px; font-size:0.95rem; color:var(--black); margin:8px 0 32px; display:flex; gap:12px; align-items:center;}
  .reschedule-note::before{content:"↻"; font-size:1.3rem; color:var(--teal);}

  /* --- included / feature grid --- */
  ul.included-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:24px 0; padding:0;}
  ul.included-grid li{list-style:none; padding:16px 18px; border:1.5px solid rgba(var(--black-rgb),0.12); border-radius:var(--radius); font-size:0.95rem;}

  /* --- 3up coverage cards (what we work on) --- */
  .cover-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .cover-card{border:1.5px solid rgba(var(--black-rgb),0.12); border-radius:var(--radius); padding:22px;}
  .cover-card h4{font-family:'Barlow Condensed'; font-weight:800; font-size:1.2rem; margin-bottom:8px;}
  .cover-card p{color:var(--slate); font-size:0.92rem;}

  /* --- coaching week: included table --- */
  .week-included{display:flex; flex-direction:column; gap:0; margin:24px 0;}
  .week-included .row{display:grid; grid-template-columns:190px 1fr; gap:20px; padding:18px 4px; border-bottom:1px solid rgba(var(--black-rgb),0.1); align-items:baseline;}
  .week-included .row .label{font-family:'Barlow Condensed'; font-weight:800; font-size:1.02rem;}
  .week-included .row .detail{color:var(--slate); font-size:0.95rem;}

  .day-flow{display:flex; flex-direction:column; gap:16px; margin:24px 0;}
  .day-flow .item{display:flex; gap:18px; align-items:baseline;}
  .day-flow .time{font-family:'Barlow Condensed'; font-weight:800; color:var(--teal-ink); min-width:120px; text-transform:uppercase; font-size:0.84rem; letter-spacing:0.05em; flex-shrink:0;}
  .day-flow .desc{color:var(--slate); font-size:0.98rem;}

  .quote-price{font-family:'Barlow Condensed'; font-weight:800; font-size:2rem; margin:18px 0 6px;}
  .quote-price span{font-family:'Inter'; font-weight:400; font-size:0.9rem; color:var(--slate); display:block; margin-top:6px;}

  /* --- about page --- */
  .story{max-width:680px; margin:0 auto;}
  .story p{margin-bottom:20px; font-size:1.04rem; line-height:1.7; color:var(--black);}
  .story-photo{width:220px; height:220px; background:var(--slate); border-radius:var(--radius); flex-shrink:0; overflow:hidden;}
  .about-hero-grid{display:flex; gap:36px; align-items:center;}
  .values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .value-card{border:1.5px solid rgba(var(--black-rgb),0.12); border-radius:var(--radius); padding:24px;}
  .value-card h4{font-family:'Barlow Condensed'; font-weight:800; font-size:1.15rem; margin-bottom:8px;}
  .value-card p{color:var(--slate); font-size:0.92rem;}

  /* --- contact page: the two ways to get in touch ---
     WhatsApp is the preferred route, so it leads: it is the first card in
     source order (and so the first thing a screen reader and a phone see),
     it carries the teal border and badge, and it gets the solid button.
     The form is offered as the alternative and simply scrolls down to it.
     The wa.me URL is never written here — the anchor carries data-wa-link
     and whatsapp.js fills it in from config.js. --- */
  .contact-options{margin-bottom:28px;}
  .contact-option{
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start;
    border:1.5px solid rgba(var(--black-rgb),0.12); border-radius:var(--radius);
    padding:24px;
  }
  .contact-option h3{font-size:1.35rem; margin-bottom:6px;}
  .contact-option p{color:var(--slate); font-size:0.94rem; margin-bottom:18px;}
  .contact-option .btn{margin-top:auto;}
  .contact-option--preferred{border-color:var(--teal); border-width:2px; background:rgba(var(--teal-rgb),0.05);}
  /* the badge is taken out of flow so both cards' headings share a
     baseline — otherwise the badge pushes only the preferred one down */
  .contact-option .badge{
    position:absolute; top:22px; right:22px;
    font-family:'Barlow Condensed', sans-serif; font-weight:700;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--teal-ink); border:1.5px solid var(--teal-ink);
    border-radius:var(--radius-sm); padding:4px 9px;
  }
  .contact-option--preferred h3{padding-right:96px;}

  /* --- "or" divider ---
     A rule across the column with the word sitting in the gap. The
     word is a real element rather than a background trick so it
     stays legible at any zoom and reads correctly aloud. --- */
  .or-divider{
    display:flex; align-items:center; gap:18px;
    margin:0 0 28px;
    font-family:'Barlow Condensed', sans-serif; font-weight:700;
    font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--slate);
  }
  .or-divider::before, .or-divider::after{
    content:""; flex:1; height:1px; background:rgba(var(--black-rgb),0.12);
  }

  /* --- background video on a dark section ---
     The section keeps its own background colour and a poster image,
     so the copy stays readable before the video loads, if it never
     loads, or when the visitor has asked for reduced motion. --- */
  .section-video{position:relative; overflow:hidden;}
  .section-video > .wrap{position:relative; z-index:2;}
  .section-video video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    z-index:0;
  }
  .section-video .scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(var(--black-rgb),0.72) 0%, rgba(var(--black-rgb),0.62) 50%, rgba(var(--black-rgb),0.80) 100%);
  }
  @media (prefers-reduced-motion:reduce){
    /* no clip and no poster: the section falls back to the flat dark
       band it was before, which is already a finished design */
    .section-video video, .section-video .scrim{display:none;}
  }

  /* --- contact page --- */
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;}
  .form-field{margin-bottom:18px;}
  .form-field label{display:block; font-family:'Barlow Condensed'; font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); margin-bottom:8px;}
  .form-field input, .form-field select, .form-field textarea{
    width:100%; padding:13px 14px; border:1.5px solid rgba(var(--black-rgb),0.18); border-radius:var(--radius-sm);
    font-family:'Inter'; font-size:0.98rem; background:var(--white); color:var(--black);
  }
  .form-field textarea{resize:vertical; min-height:100px;}
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--teal);}
  .form-note{font-size:0.85rem; color:var(--slate); margin-top:10px;}
  .direct-contact{display:flex; flex-direction:column; gap:14px; margin:20px 0;}
  .direct-contact .item{display:flex; gap:10px; align-items:center; font-size:1rem;}
  .faq-item{padding:20px 4px; border-bottom:1px solid rgba(var(--black-rgb),0.1);}
  .faq-item h4{font-family:'Barlow Condensed'; font-weight:800; font-size:1.1rem; margin-bottom:6px;}
  .faq-item p{color:var(--slate); font-size:0.95rem;}
  /* map.js swaps #site-map for an <iframe class="map-embed">; the
     lavender background is what shows while the frame loads. */
  .map-embed{
    width:100%; height:320px; margin:20px 0;
    border:0; display:block;
    background:var(--lavender); border-radius:var(--radius);
  }

  @media (max-width:860px){
    .cover-grid, .values-grid, .included-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .week-included .row{grid-template-columns:1fr; gap:4px;}
    .about-hero-grid{flex-direction:column; align-items:flex-start;}
    .page-hero h1{font-size:2.2rem;}
  }


  /* --- confirmation pages (thank-you, message-sent) ---
     A full-height dark panel with a tick. Was inline in thank-you.html
     until message-sent needed exactly the same thing. --- */
  .done{
    background:var(--black); color:var(--white);
    min-height:calc(100vh - 74px);
    display:flex; align-items:center;
    padding:80px 0;
  }
  .done .wrap{max-width:640px;}
  .done .tick{
    width:54px; height:54px; margin-bottom:24px;
    border:2px solid var(--teal);
    display:flex; align-items:center; justify-content:center;
  }
  .done .tick svg{width:26px; height:26px; color:var(--teal);}
  .done h1{
    font-size:clamp(2.2rem, 5.5vw, 3rem);
    text-transform:uppercase; line-height:0.9;
    letter-spacing:-0.015em; margin-bottom:18px;
  }
  .done h1 em{font-style:normal; color:var(--teal);}
  .done p{color:#D8D8E0; font-size:1.04rem; margin-bottom:16px;}
  .done .next{
    margin:28px 0 30px; padding:20px 22px;
    border:1.5px solid rgba(var(--white-rgb),0.2);
  }
  .done .next h2{
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--teal); margin-bottom:12px;
  }
  .done .next p{font-size:0.95rem; margin:0;}
  .done .btnrow{display:flex; gap:12px; flex-wrap:wrap;}
  @media (max-width:560px){
    .done .btnrow .btn{width:100%; justify-content:center;}
  }

  /* --- contact form states ---
     The form can be in four states: idle, invalid, sending, and done.
     Each one has to be visible AND announced, so every rule here has an
     ARIA counterpart in contact-form.js. --- */

  /* Honeypot. Off-screen rather than display:none — a bot that skips
     hidden fields would sail past a display:none trap. aria-hidden and
     tabindex="-1" in the markup keep it away from real people. */
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  /* Error summary: the one thing focus moves to when a submit fails, so
     a screen reader hears every problem at once instead of hunting. */
  .form-errors{
    border:1.5px solid #B3261E; border-left-width:4px;
    background:rgba(179,38,30,0.06);
    padding:16px 18px; margin-bottom:20px;
  }
  .form-errors:focus{outline:2px solid #B3261E; outline-offset:2px;}
  .form-errors h3{font-size:1rem; margin-bottom:8px; color:#B3261E;}
  .form-errors ul{margin:0; padding-left:18px;}
  .form-errors li{font-size:0.92rem; margin-bottom:4px;}
  .form-errors a{color:#B3261E; text-decoration:underline;}

  /* Per-field message. Colour is never the only signal — the border
     changes too, and aria-invalid carries it to assistive tech. */
  .form-field .msg{display:none; font-size:0.86rem; color:#B3261E; margin-top:6px;}
  .form-field.invalid .msg{display:block;}
  .form-field.invalid input,
  .form-field.invalid select,
  .form-field.invalid textarea{border-color:#B3261E;}

  .contact-form.sending{opacity:0.7; pointer-events:none;}

  /* The receipt. Shown in place of the form, carrying the reference and
     the message back, so the page stands on its own if no email lands. */
  .form-success{border:1.5px solid var(--teal); border-left-width:4px; padding:22px 24px;}
  .form-success h3{font-size:1.3rem; margin-bottom:8px;}
  .form-success p{color:var(--slate); font-size:0.95rem; margin-bottom:14px;}
  .form-success .echo{
    border-top:1px solid rgba(var(--black-rgb),0.12); padding-top:14px; margin-top:4px;
    font-size:0.92rem; color:var(--slate); white-space:pre-wrap;
  }
  /* The reference is a quiet footnote, not a case number to quote:
     nothing behind this form takes one. It stays visible so a screen
     can still be matched to an inbox while testing. */
  .form-success .ref-line{
    margin:14px 0 0; font-size:0.8rem; letter-spacing:0.04em;
    color:var(--slate);
  }

  /* Shown when config.js has no endpoint yet — better than a button that
     silently does nothing. */
  .form-offline{
    border:1.5px solid rgba(var(--black-rgb),0.18); background:var(--lavender);
    padding:16px 18px; margin-bottom:20px; font-size:0.92rem;
  }