/* Layout, second pass (package 08, 28 Oct 2026; critique of 28 Oct, section 2).
   A new layer: the approved styles (styles.css, mvp.css, examples.css, services-compact.css, about-preview.css, faq.css)
   are not edited. The build links this file last in <head>, so it wins over all of them at equal specificity.
   Removing the layer = removing the two lines in build.mjs that link layout-2.css and layout-2.js. */

/* L1. Case Study call on the home ("One portal. Every area of the business."): the page's own H2 scale, not 100px.
   Desktop 64px (the services/about H2s are 62px); phone stays at 40px. The words still grow with scroll
   (examples.js scales them with transform, which does not depend on font-size). */
@media (min-width:761px){
  .xh-invite-title{font-size:64px}
}
@media (max-width:760px){
  .xh-invite-title{font-size:40px}
}

/* L2. Services index on desktop: the intro + index block sits at the vertical centre of the stage column, so any extra
   height of the stage is shared above and below it. Same grid, same section height, same stage position. */
@media (min-width:761px){
  .sx-wide .sx-index{align-self:center}
}

/* L3. About on desktop: the book aligns by the top with the text instead of floating at the centre. Static position
   only; the book turn (about-preview.js) is untouched. The book's top margin equals the first paragraph's (28px). */
@media (min-width:761px){
  .about-story .about-story-grid{align-items:start}
  .about-story .experience-book{margin-top:28px;margin-bottom:0}
  /* The approved context paragraph added height in Update09. Recover that space through vertical padding only;
     keep the text, type sizes, top alignment and reversible turn. */
  .about-story{padding-bottom:clamp(40px,4vw,64px)}
  .about-story .book-sheet{padding-top:22px;padding-bottom:14px}
  .about-story .book-context{margin:6px 0 10px}
  .about-story .experience-milestones{margin-top:12px}
  .about-story .experience-milestones li{padding-top:8px;padding-bottom:8px}
  .about-story .book-endnote{margin-top:8px;padding-top:10px}
}

/* L4. Shorter phone (up to 760px). layout-2.js adds the buttons and the .l2-collapsed class; without it nothing folds.
   Above 760px the buttons do not exist visually and the folding rules do not apply. */
.l2-toggle{display:none}
@media (max-width:760px){
  /* Crossing from an unfinished desktop turn can restore a GSAP inline transform during context cleanup.
     A phone always reads this content in normal flow, including while rotating or resizing the viewport. */
  .contact-grid.contact-book{transform:none!important;opacity:1!important;pointer-events:auto!important}
  .contact-book>.contact-copy,.contact-book>form{opacity:1!important;visibility:visible!important}
  .l2-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:0;border:0;border-top:1px solid #cbdcea;border-radius:0;background:none;box-shadow:none;color:#164bff;font:inherit;font-size:.9rem;line-height:1.3;text-align:left;cursor:pointer}
  .l2-toggle::after{content:"";flex:none;width:8px;height:8px;margin:-3px 4px 0 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .l2-toggle[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}
  .l2-toggle:focus-visible{outline:2px solid #164bff;outline-offset:2px}
  /* (a) About card: caption and first item only. */
  .book-sheet.l2-collapsed .experience-milestones li:nth-child(n+2),
  .book-sheet.l2-collapsed .book-credentials,
  .book-sheet.l2-collapsed .book-endnote{display:none}
  /* (b) Form privacy text: behind "Why I ask for this". Still in the DOM; aria-describedby still points at it. */
  .l2-privacy-toggle{border-top:0;min-height:44px}
  .form-privacy.l2-collapsed{display:none}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .l2-toggle::after{transition:transform .2s}
}