/* ==========================================================================
   layout.css: frame and spacing layer, loaded after chainlabs.css.

   This file changes size, spacing and line-breaking only. It contains no
   colours, fonts, borders, shadows or animations, so every palette in the
   Theme picker and every effect in chainlabs.css/js looks exactly as before.
   Delete the <link> to this file and the site returns to its previous layout.
   ========================================================================== */

:root {
  /* Height of the top bar + sticky header (31 + 1 + 72 + 1 px, rounded). */
  --chrome-h: 112px;
  /* Height of the scrolling sectors strip under the home hero. */
  --marquee-h: 61px;
  /* Page scale. 1 = as designed. */
  --z: 1;
}

/* 0. Desktop page scale.
      At 100% browser zoom the site looked "zoomed in"; at 80% it looked right.
      On laptop and desktop screens the whole page is drawn at 80%, so a visitor
      at normal 100% zoom sees what the team saw at 80%. Phones and tablets are
      unaffected. Change --z here to tune it (e.g. .85). */
@media (min-width: 1100px) {
  :root { --z: .8; }
  body { zoom: var(--z); }
  /* Screen-relative sizes (vw/vh) are divided by --z so they behave exactly
     like browser zoom instead of shrinking twice. */
  :root { --gutter: clamp(18px, calc(4.2vw / var(--z)), 58px); }
  .section { padding-block: clamp(38px, calc(4.8vw / var(--z)), 68px); }
  .section.tight { padding-block: clamp(26px, calc(3.4vw / var(--z)), 46px); }
  .lab-story { padding: clamp(42px, calc(6vw / var(--z)), 82px) 0 clamp(46px, calc(6vw / var(--z)), 84px); }
  .lab-story-head { margin-bottom: clamp(26px, calc(4vw / var(--z)), 52px); }
  .theme-panel { max-height: calc(100vh / var(--z) - 126px); }
}
/* Large and 2K/4K monitors: the scale grows with the screen so the page keeps
   the same proportions instead of sitting as a narrow strip in the middle. */
@media (min-width: 1680px) { :root { --z: .9; } }
@media (min-width: 2200px) { :root { --z: 1.2; } }
@media (min-width: 3000px) { :root { --z: 1.5; } }
@media (min-width: 3600px) { :root { --z: 1.8; } }

/* 1. Headlines never split a word in half ("appointm / ent").
      A word only wraps mid-way if it cannot fit on a line by itself. */
h1, h2, h3,
[data-split], [data-split] .w { overflow-wrap: break-word; word-break: normal; hyphens: manual; }

/* 2. Display type also listens to the screen height (vh), so short laptop
      screens get proportionally smaller headings. */
.h2 { font-size: clamp(2.1rem, calc(min(3.7vw, 7vh) / var(--z)), 4.4rem); }
.lab-story-head h2 { font-size: clamp(2.6rem, calc(min(4.9vw, 9vh) / var(--z)), 5.4rem); }
.cta-band h2 { font-size: clamp(1.9rem, calc(min(3.3vw, 6vh) / var(--z)), 3.4rem); }
.quote { font-size: clamp(1.6rem, calc(min(2.9vw, 5.4vh) / var(--z)), 3rem); }

/* 3. Home and GrowthEdge hero: the whole first section fills exactly one
      screen on laptops and desktops, then the visitor scrolls. */
@media (min-width: 901px) and (min-height: 500px) {
  .hero.lab-hero {
    min-height: calc(100vh / var(--z) - var(--chrome-h));
    min-height: calc(100svh / var(--z) - var(--chrome-h));
    display: flex;
    align-items: center;
    padding-block: clamp(20px, calc(3.6vh / var(--z)), 48px);
  }
  .hero.lab-hero > .container { width: 100%; }
  /* Home page: the hero AND the scrolling sectors strip below it share the first screen. */
  body:has(.hero.lab-hero + .marquee) .hero.lab-hero {
    min-height: calc(100vh / var(--z) - var(--chrome-h) - var(--marquee-h));
    min-height: calc(100svh / var(--z) - var(--chrome-h) - var(--marquee-h));
  }
  .hero.lab-hero .display,
  .hero.lab-hero .h1 { font-size: clamp(2.9rem, calc(min(5.9vw, 10vh) / var(--z)), 6.1rem); }
  body.ge .hero.lab-hero .h1 { font-size: clamp(2.6rem, calc(min(4.5vw, 7.6vh) / var(--z)), 5.2rem); }
  .hero.lab-hero .kicker { margin-bottom: clamp(10px, calc(1.8vh / var(--z)), 16px); }
  .hero.lab-hero .lead { margin-top: clamp(12px, calc(2.1vh / var(--z)), 18px); font-size: clamp(.97rem, calc(min(1.25vw, 2.2vh) / var(--z)), 1.12rem); }
  .hero.lab-hero .btn-row { margin-top: clamp(14px, calc(2.4vh / var(--z)), 22px); }
  .hero.lab-hero .trust { margin-top: clamp(12px, calc(2.1vh / var(--z)), 18px); padding-top: clamp(10px, calc(1.6vh / var(--z)), 14px); }
  /* The 3D object and cost sheet shrink with the screen height instead of pushing the fold. */
  .lab-hero-visual { min-height: clamp(360px, min(calc(38vw / var(--z)), calc(100svh / var(--z) - var(--chrome-h) - var(--marquee-h) - 60px)), 520px); }
}

/* 3b. Tall screens (1080p desktops, 2K, 4K): the hero headline and the cost sheet
       grow to use the height instead of leaving empty bands above and below. */
@media (min-width: 1100px) and (min-height: 900px) {
  .hero.lab-hero .display,
  .hero.lab-hero .h1 { font-size: clamp(2.9rem, calc(min(5.9vw, 10vh) / var(--z)), 7rem); }
  .hero.lab-hero .lead { font-size: clamp(.97rem, calc(min(1.25vw, 2.2vh) / var(--z)), 1.22rem); }
  .lab-hero-visual { min-height: clamp(360px, min(calc(40vw / var(--z)), calc(100svh / var(--z) - var(--chrome-h) - var(--marquee-h) - 60px)), 640px); }
  .lab-hero .sheet { width: min(78%, 490px); }
  .lab-hero .quad { width: min(84%, 560px); }
}

/* 4. Inner-page headers: title, intro and buttons are visible without scrolling. */
@media (min-width: 901px) {
  .pagehead { padding-block: clamp(22px, calc(3.6vh / var(--z)), 48px) clamp(30px, calc(5vh / var(--z)), 60px); }
  .crumbs { margin-bottom: clamp(16px, calc(3.2vh / var(--z)), 40px); }
  .pagehead .h1 { font-size: clamp(2.6rem, calc(min(5vw, 8.6vh) / var(--z)), 5.6rem); }
  .pagehead .lead { font-size: clamp(.97rem, calc(min(1.2vw, 2.1vh) / var(--z)), 1.1rem); }
  .pagehead .btn-row.mt { margin-top: clamp(16px, calc(2.6vh / var(--z)), 24px); }
}

/* 5. The sticky "lab story" picture always fits inside the screen under the header. */
@media (min-width: 901px) {
  .lab-story-art { min-height: clamp(360px, min(calc(42vw / var(--z)), calc(100svh / var(--z) - var(--header-h) - 120px)), 600px); }
}

/* 6. Short screens (under ~760px tall): GrowthEdge has the longest headline, so tighten it a little more. */
@media (min-width: 901px) and (max-height: 760px) {
  body.ge .hero.lab-hero .h1 { font-size: clamp(2.5rem, calc(min(4.2vw, 6.9vh) / var(--z)), 4.6rem); }
}

/* 7. Phones: the logo block refused to shrink, which pushed the menu button
      half off the right edge of the screen on 360-414px wide phones. */
@media (max-width: 760px) {
  .site-header .nav { gap: 10px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand > span { min-width: 0; font-size: clamp(11px, 3.2vw, 14px); }
  .brand small { white-space: normal; }
  .nav-cta, .menu-btn { flex: none; }
}

/* 8. Phones: long single words in page titles ("appointment") fit on one line. */
@media (max-width: 480px) {
  .pagehead .h1 { font-size: clamp(2rem, 8.6vw, 3.2rem); }
  .lab-story-head h2 { font-size: clamp(2.2rem, 10.5vw, 3.6rem); }
}

/* 9. 404 page: its inline "min-height:60vh" must follow the page scale too. */
.pagehead[style*="min-height:60vh"] { min-height: calc(60vh / var(--z)) !important; }