/* LungMAP — Direction C, "One screen".
 *
 * Direction B's warmth and craft, compressed into a single viewport. Nothing
 * scrolls: the headline, the search and the three ways in are all visible at
 * once, on top of the imagery that makes up most of the atlas.
 *
 * Craft notes:
 *  - The page is a 100vh flex column. The hero takes the remaining height, so
 *    the layout stays balanced from a 13" laptop to a 27" display.
 *  - Type scales with the viewport (clamp), so the headline never wraps and
 *    never overwhelms.
 *  - The three doors are glass panels over the image rather than cards below
 *    it, which is what removes the scroll without losing them.
 *  - One idea per panel, one line of copy each.
 */
:root{
  --paper:#fbf9f6; --ink:#1c2530; --ink2:#56636f; --ink3:#8a949e; --line:#e6e0d8;
  --blue:#14527f; --blue-lift:#2a7fbf; --pine:#1f6b5e; --clay:#c2653f;
  --sh:0 18px 50px rgba(9,20,27,.34);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0d1b24; color:var(--ink); overflow:hidden; min-width:1120px;
  font:16px/1.6 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:600; letter-spacing:-.014em; margin:0; line-height:1.12}
a{text-decoration:none;color:inherit}

/* header -------------------------------------------------------------- */
/* A leftover fragment of a deleted mockup rule sat here, a bare "display:flex;...}". A
   browser read it as the start of the next rule's selector and dropped that rule,
   `header{flex:0 0 auto;background:var(--paper);border-bottom:1px solid var(--line)}`,
   so the approved page never showed its border. Both are removed; `.HomeC header`
   below sets the background, and the page renders exactly as approved. */
.hrow{max-width:1420px;margin:0 auto;padding:13px 34px;display:flex;align-items:center;gap:28px}
.logo{height:34px}
nav{margin-left:auto;display:flex;gap:26px;align-items:center}
nav a{font-size:15px;font-weight:500;color:var(--ink)}
nav a:hover{color:var(--blue)}
.signin{border:1px solid rgba(20,82,127,.3);border-radius:999px;padding:7px 17px;
  font-size:14px;color:var(--blue);transition:.15s}
.signin:hover{background:rgba(20,82,127,.07)}

/* stage --------------------------------------------------------------- */
.stage{flex:1 1 auto;position:relative;overflow:hidden;display:flex;flex-direction:column}
/* Four full-resolution confocal images (2482x1730, undimmed) cross-fade
   behind the hero, each drifting slowly
   inward while it is visible. One 40s loop, four 10s slots: a layer fades in
   over the first second of its slot, holds, then fades out over the last
   1.5s while the next one is already fading in. The scale reset happens at
   80% of each layer's cycle, when its opacity is 0, so it is never seen. */
.stage .bg{position:absolute;inset:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;opacity:0;transform:scale(1.13);will-change:transform,opacity;
  animation:hold 40s linear infinite, drift 40s linear infinite}
.stage .bg:nth-of-type(1){background-image:url('/static/theme/home-c/hero-1.jpg');animation-delay:0s,0s}
.stage .bg:nth-of-type(2){background-image:url('/static/theme/home-c/hero-2.jpg');animation-delay:10s,10s}
.stage .bg:nth-of-type(3){background-image:url('/static/theme/home-c/hero-3.jpg');animation-delay:20s,20s}
.stage .bg:nth-of-type(4){background-image:url('/static/theme/home-c/hero-4.jpg');animation-delay:30s,30s}
@keyframes hold{
  0%{opacity:0} 2.5%{opacity:1} 25%{opacity:1} 29%{opacity:0} 100%{opacity:0}}
@keyframes drift{
  0%{transform:scale(1.13)} 29%{transform:scale(1.02)}
  29.01%{transform:scale(1.13)} 100%{transform:scale(1.13)}}
/* The scrim exists only so the white headline stays readable. It is opaque
   under the text and clears completely by 70% across, so the right two thirds
   of the image is seen at full strength. */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,20,27,.92) 0%,rgba(9,20,27,.74) 32%,
    rgba(9,20,27,.28) 55%,rgba(9,20,27,0) 74%)}
.inner{position:relative;z-index:2;max-width:1420px;width:100%;margin:0 auto;
  padding:clamp(14px,2vh,26px) 34px clamp(28px,5vh,64px);flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center}

.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:11.5px;font-weight:700;
  color:#7fc3b6;margin-bottom:14px}
h1{color:#fff;font-size:clamp(34px,3.5vw,52px);max-width:none;margin-bottom:14px;
   white-space:normal}
.sub{color:#d3dde4;font-size:clamp(16px,1.35vw,20px);line-height:1.55;max-width:50ch;margin:0}

.seek{margin-top:clamp(18px,2.4vh,34px);display:flex;align-items:center;gap:12px;background:#fff;
  border-radius:999px;padding:7px 7px 7px 22px;max-width:580px;box-shadow:var(--sh)}
.seek input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink)}
.seek input::placeholder{color:var(--ink3)}
.go{border:0;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-weight:600;
  font-size:15px;padding:11px 24px;cursor:pointer;transition:.18s}
.go:hover{background:var(--blue-lift);transform:translateY(-1px)}

.tries{margin-top:13px;display:flex;gap:8px;flex-wrap:wrap}
.try{border:1.5px solid rgba(255,255,255,.5);color:#f2f7fa;border-radius:999px;
  padding:6px 14px;font-size:13.5px;cursor:pointer;transition:.16s}
.try:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.9)}

/* three ways in ------------------------------------------------------- */
/* Four cards, not three. Each one is narrower: the row keeps the same
   1060px measure, so a card goes from about 343px to 250px. Type size is
   unchanged; only the column count and the gap move. */
/* Back to the original 1060px measure: four columns over a 12px gap give a
   256px card. Narrowing this to 980 and then 900 was reverted — the cards had
   to give up 36px of text column, and the thumbnail is now larger, which needs
   the room back. */
/* Narrower boxes, same thumbnail and same type.
   The four columns share the track, so the box width is
   (max-width - 3 gaps) / 4. At 1060px that is (1060-36)/4 = 256px.
   At 980px it is (980-36)/4 = 236px, a 20px trim per box, about 8%.
   The 84px thumbnail and the 18px/13.5px type below are untouched: only the
   line the text wraps at moves in. */
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:clamp(56px,8vh,104px);max-width:980px}
@media (max-width:1199.98px){.ways{grid-template-columns:repeat(2,1fr)}}
/* The borders on everything over the hero were set against a background
   dimmed to .72. With the images now at full strength a 16% white line
   disappeared into the imagery, so the glass panels had no visible edge.
   These are raised to hold their shape over a bright, busy photograph. */
.way{
  background:rgba(255,255,255,.09); border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(150%); border-radius:18px; padding:15px 15px 14px;
  display:flex; gap:12px; align-items:flex-start; color:#fff;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s;
}
.way:hover{transform:translateY(-4px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.92)}
/* 84px, past the 73px this page's design carried and well past the 58px it
   had shrunk to. The card is 256px wide with 30px of padding and a 12px gap,
   so the thumbnail takes 84 and leaves 130px of text column. */
.way .thumb{width:84px;height:84px;border-radius:17px;flex:0 0 auto;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.5);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.way .thumb img{width:100%;height:100%;object-fit:cover}
.way h3{font-size:18px;color:#fff;margin-bottom:3px}
.way p{margin:0;font-size:13.5px;line-height:1.5;color:#c6d3dc}

/* footer strip -------------------------------------------------------- */
.strip{flex:0 0 auto;position:relative;z-index:2;background:rgba(9,20,27,.55);
  border-top:1.5px solid rgba(255,255,255,.34);backdrop-filter:blur(10px)}
.striprow{max-width:1420px;margin:0 auto;padding:12px 34px;display:flex;
  align-items:center;gap:40px;flex-wrap:wrap}
.striprow .s{display:flex;align-items:baseline;gap:7px;color:#cddae2;font-size:13.5px}
.striprow .s b{font-family:"Iowan Old Style",Georgia,serif;font-size:19px;color:#7fc3b6;
  font-variant-numeric:tabular-nums}
.striprow .right{margin-left:auto;display:flex;gap:22px;font-size:13.5px;color:#9fb3c1}
.striprow .right a{color:#9fb3c1} .striprow .right a:hover{color:#fff}

@media (prefers-reduced-motion: reduce){
  .stage .bg{animation:none;transform:none;opacity:0}
  .stage .bg:nth-of-type(1){opacity:1}
  .way,.go{transition:none}
}

/* The site loads page.css (283 KB of SilverStripe theme) before this file.
   Three of its rules reach the mockup's own markup, because the mockup uses
   the same bare element and class names:
     page.css:10481  .header { padding:12px; gradient; shadow }
     page.css:10491  .logo   { height:60px; margin:12px 0 }
   The mockup declares only `height` on .logo, so page.css's margin survived
   and added 18.6px to the bar: measured 84px against the mockup's 65.4px.
   These reset exactly what page.css adds and nothing else. */
.HomeC .logo { margin: 0; }
.HomeC header { padding: 0; background: var(--paper); box-shadow: none; }

/* The mockup's <body> IS the layout: `height:100%; overflow:hidden;
   display:flex; flex-direction:column` (01-home.html:27-32), so the header is
   flex:0 and <main class="stage"> takes the rest of the screen exactly.
   base.html wraps its blocks in a plain <div>, which sat between body and
   those two children and broke the column: main no longer stretched, so the
   page ended above the fold and left a grey band beneath the strip.
   `display:contents` removes that wrapper from layout without removing it from
   the DOM, so header and main become the body's own flex children again. */
.HomeC > div { display: contents; }
.HomeC { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
html:has(> .HomeC) { height: 100%; }

/* The real navigation replaces the mockup's five placeholder links, so the
   dropdowns work here as on every other page. `.lm-nav*` is restyled to the
   mockup's own nav rules (01-home.html:47-51) so the bar is unchanged:
     nav{margin-left:auto;display:flex;gap:26px;align-items:center}
     nav a{font-size:15px;font-weight:500;color:var(--ink)}
   Only the closed panel is repositioned. A `visibility:hidden` panel still
   takes part in layout, and the mockup's <body> is `overflow:hidden`, so a
   panel hanging past the last section would be clipped and could widen the
   row; anchoring it to the right edge keeps it inside the screen. */
.HomeC .lm-nav {
  margin: 0 0 0 auto; padding: 0; list-style: none;
  display: flex; gap: 26px; align-items: center;
}
.HomeC .lm-nav__item { position: relative; display: flex; align-items: center; }
.HomeC .lm-nav__link {
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 0; margin: 0; white-space: nowrap;
}
.HomeC .lm-nav__link:hover { color: var(--blue); }

/* LungChat, the one highlighted item. `.HomeC .lm-nav__link` above sets
   `padding: 0` at (0,2,0) and this file loads after components.css, so the
   pill rule there lost on both specificity and order: the background and the
   radius applied while the padding was zeroed, and the purple collapsed onto
   the text. This page also has no `.lm-header` wrapper -- the markup is
   `<header><div class="hrow">` -- so the `.lm-header .lm-nav__link--chat`
   rule in components.css cannot match here at all. Restated at the same
   specificity as the rule that zeroed it. Colour #6c4fb5 is the accent the
   "Ask in LungChat" button uses (templates/pages/ask.html:82). */
.HomeC .lm-nav__link--chat {
  color: #ffffff; background: #6c4fb5;
  border-radius: 999px; padding: 7px 15px; font-weight: 600;
}
.HomeC .lm-nav__link--chat:hover,
.HomeC .lm-nav__item:hover > .lm-nav__link--chat {
  color: #ffffff; background: #59409a;
}
/* `width:max-content` sizes the panel to its longest link. The fixed
   `min-width:232px` it replaces left a band of empty white to the right of
   every item, because no section's links are that wide. `max-width` stops a
   long child from running off the screen. */
.HomeC .lm-nav__panel {
  position: absolute; top: 100%; right: 0; left: auto;
  /* components.css:135 also sets `min-width:232px` on this class. Setting
     only `width` left that floor in force, so the panel stayed 232px wide
     with 38-64px of empty space beside every label. */
  width: max-content; min-width: 0; max-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(13,27,36,.18); padding: 8px; margin: 0;
  list-style: none; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s; z-index: 60;
}
.HomeC .lm-nav__item:hover > .lm-nav__panel,
.HomeC .lm-nav__item:focus-within > .lm-nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.HomeC .lm-nav__panel a {
  display: block; padding: 8px 14px; font-size: 14px; color: var(--ink2);
  text-decoration: none; border-radius: 6px; white-space: nowrap;
}
.HomeC .lm-nav__panel a:hover { background: rgba(20,82,127,.07); color: var(--blue); }
/* The header must not clip its own dropdown. */
.HomeC header { position: relative; z-index: 50; overflow: visible; }

/* The example chips are now <button> so they are keyboard reachable and
   announce themselves as controls. The mockup styled <span>, so the browser's
   own button chrome has to be cleared for them to look unchanged. */
.tries .try { background: none; font-family: inherit; line-height: 1.4; }
.HomeC .seek { margin-top: clamp(18px,2.4vh,34px); }

/* The waiting state, matching the header search bar's own treatment
   (partials/breath_search_bar.html). The assistant takes seconds on a
   sentence; without this the page reads as frozen and people click again. */
#home-go { display: inline-flex; align-items: center; gap: 7px; }
#home-go .sp {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: lm-spin .7s linear infinite;
}
.seek.is-thinking #home-go .sp { display: inline-block; }
.seek.is-thinking #home-go { pointer-events: none; opacity: .92; }
/* A sweep along the field, so the wait reads as work rather than a stall. */
.seek.is-thinking {
  background-image: linear-gradient(90deg, transparent 0%,
                    rgba(20,82,127,.45) 50%, transparent 100%);
  background-size: 40% 2px; background-repeat: no-repeat;
  background-position: -40% 100%;
  animation: lm-sweep 1.1s ease-in-out infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-sweep { to { background-position: 140% 100%; } }
@media (prefers-reduced-motion: reduce) {
  #home-go .sp, .seek.is-thinking { animation: none; }
}

/* Four of the strip counts are links. They must look exactly as they did as
   plain text -- the strip is part of the approved design -- so the anchor
   takes the same colour and no underline, and only hover marks it as
   clickable. `.s b` keeps its own colour from the rule above. */
.striprow a.s{text-decoration:none;color:#cddae2}
.striprow a.s:hover{color:#ffffff}
.striprow a.s:hover b{color:#9fd8cc}
.striprow a.s:focus-visible{outline:2px solid #7fc3b6;outline-offset:3px;border-radius:3px}

/* RESPONSIVE TIERS, on the site scale documented in tokens.css. The one-screen
   composition above holds from 1200px up, where its 1120px minimum fits. Below that
   the page scrolls, and each tier narrows the layout. The hero keeps overflow:hidden
   at every tier: it clips the zooming background images, which otherwise spill past
   the viewport, and it no longer clips content because the hero grows with it. */
@media (max-width: 1199.98px) {  /* laptop */
  html:has(> .HomeC) { height: auto; min-height: 100%; }
  body.HomeC {
    height: auto; min-height: 100dvh; min-width: 0;
    overflow-x: hidden; overflow-y: auto;
  }
  .HomeC .stage { min-height: 0; }
  .HomeC .inner { justify-content: flex-start; padding: 48px 34px 56px; }
  .HomeC .ways { margin-top: 48px; }
}
@media (max-width: 991.98px) {  /* tablet */
  .HomeC header .hrow { padding: 12px 24px; gap: 18px; }
  .HomeC .lm-nav { gap: 18px; }
  .HomeC .inner { padding: 40px 24px 48px; }
  .HomeC .ways { max-width: none; }
  .HomeC .striprow { padding: 12px 24px; flex-wrap: wrap; gap: 8px 22px; }
  .HomeC .striprow .right { margin-left: 0; width: 100%; }
}
@media (max-width: 767.98px) {  /* large phone */
  .HomeC header .hrow { padding: 10px 16px; gap: 10px 16px; flex-wrap: wrap; }
  .HomeC .lm-nav {
    width: 100%; margin: 0; gap: 8px 14px;
    justify-content: flex-start; flex-wrap: wrap;
  }
  .HomeC .lm-nav__link { font-size: 13px; }
  .HomeC .inner { padding: 32px 18px 36px; }
  .HomeC h1 { font-size: clamp(32px, 7vw, 44px); }
  .HomeC .sub { max-width: 38ch; font-size: 16px; }
  .HomeC .ways { gap: 10px; margin-top: 32px; }
  .HomeC .way { padding: 12px; gap: 12px; }
  .HomeC .way .thumb { width: 64px; height: 64px; }
  .HomeC .striprow { padding: 12px 16px; gap: 8px 18px; }
}
@media (max-width: 575.98px) {  /* phone */
  .HomeC h1 { font-size: clamp(28px, 9vw, 36px); }
  .HomeC .ways { grid-template-columns: minmax(0, 1fr); }
  .HomeC .seek { padding-left: 16px; }
  .HomeC .seek input { min-width: 0; font-size: 15px; }
  .HomeC .striprow .s { font-size: 12.5px; }
  .HomeC .striprow .s b { font-size: 17px; }
}