/* page-staging-home.css
   PAGE-LOCAL CSS for the staging home page build only.
   Not a library module. Two parts:
     A. Global chrome reconstruction (header / footer / contact modal).
        Header and footer are now the shared page-chrome components
        (css/components/squareshift-menu.css + squareshift-footer.css). Only the
        contact modal is still reconstructed — no shared stylesheet covers it.
        ASSUMPTION, flagged in the notes.
     B. Approved page-specific exceptions on library sections (see notes/section-map.md).
   Tokens only. Square corners. No new colour ramps. */

/* ============================================================
   TRIAL 2026-09-21 — section rhythm
   Grace asked to see the page at a more generous vertical rhythm.
   Every section's padding rule resolves --section-padding-y, so this single
   token override lifts all eight from 80px to 120px top and bottom.
   REVERT = delete this block. Nothing else was touched.
   ============================================================ */
.page-staging-home{
  --section-padding-y:120px;
}

/* ============================================================
   A. GLOBAL CHROME
   ============================================================ */

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;background:var(--deep);color:var(--paper);
  font-family:var(--body);font-weight:700;font-size:var(--fs-small);
  letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{left:0}

/* ---- Contact modal (ssm) ---- */
.ssm{
  width:min(980px,calc(100% - 40px));max-width:none;padding:0;
  border:1px solid var(--rule);background:var(--paper);color:var(--black);
}
.ssm::backdrop{background:rgba(24,24,24,.72)}
.ssm__shell{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.ssm__close{position:absolute;top:10px;right:14px;z-index:2;font-size:28px;line-height:1;color:var(--grey-mid)}
.ssm__close:hover{color:var(--black)}
.ssm__panel{padding:40px 34px;background:var(--sage);color:var(--on-sage)}
.ssm__logo{width:auto;height:28px;object-fit:contain;margin-bottom:28px}
.ssm__title{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-size:32px;line-height:1.1;color:var(--paper)}
.ssm__rule{display:block;width:44px;height:3px;margin:16px 0 18px;background:var(--gold)}
.ssm__lede{margin:0;font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--on-sage)}
.ssm__reply{margin:18px 0 0;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.ssm__form{padding:40px 34px}
.lead-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lead-form label{display:block;margin-bottom:16px}
.lead-form label > span{
  display:block;margin-bottom:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-mid);
}
.lead-form input,
.lead-form textarea{
  width:100%;padding:11px 12px;font:inherit;color:var(--black);
  background:var(--paper);border:1px solid #C5B9AB;
}
.lead-form input:focus,
.lead-form textarea:focus{outline:2px solid var(--bronze);outline-offset:1px}
.lead-form textarea{resize:vertical}
.lead-form__trap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.lead-form .button{
  padding:14px 28px;background:var(--gold);color:var(--black);
  font-family:var(--display);font-weight:var(--display-weight);font-size:var(--fs-small);
  line-height:1;letter-spacing:.08em;text-transform:uppercase;
}
.lead-form .button:hover{background:var(--gold-pure)}
.lead-form__status{margin:0;font-size:var(--fs-small);line-height:1.35;color:var(--deep)}
.lead-form__status[data-state="error"]{color:#8A2B12}
.lead-form__privacy{margin:12px 0 0;font-size:var(--fs-small);line-height:1.35;color:var(--deep)}
.lead-form__privacy a{color:inherit;text-decoration:underline}
@media (max-width:820px){
  .ssm__shell{grid-template-columns:1fr}
  .ssm{max-height:90vh;overflow:auto}
  .lead-form__grid{grid-template-columns:1fr}
}

/* ============================================================
   B. APPROVED PAGE-SPECIFIC EXCEPTIONS
   ============================================================ */

/* client-work — exception: six source case studies, not the template's eight,
   so the 4-up grid would leave a two-tile orphan row. 3-up gives two full rows.
   (This override was lost in an earlier edit and is restored here.) */
@media (min-width:1081px){
  .page-staging-home .case-study-showcase-variant-f__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* client-work — exception: the template's `aspect-ratio:1/1.35` is tuned to its
   4-up grid (~257px wide → ~347px tall, which meta + art + figure + summary +
   cta fills almost exactly). Here the tile is 3-up and has no `__summary`, so it
   runs 30–40% wider — 478–537px tall — around shorter content, and the
   `margin-top:auto` below collected all the surplus into a ~263px hole between
   the art and the title. Fixed with the template's own escape hatch, the one it
   already uses at <=520px: release the ratio and set a floor, so height follows
   content while grid stretch keeps each row even. Applied from 521px up, which
   covers the 2-up band (761–1080px) where the gap was widest. */
@media (min-width:521px){
  .page-staging-home .case-study-showcase-variant-f__tile{
    aspect-ratio:auto;
    min-height:390px;
  }
  /* Any slack left over the 390px floor goes to the artwork rather than sitting
     as a gap under it — the template pins `flex:0 0 auto; max-height:105px`,
     which is right at 4-up but leaves a hole once the tile is wider. */
  .page-staging-home .case-study-showcase-variant-f__art{
    flex:1 1 auto;
    max-height:none;
    min-height:105px;
  }
}
.page-staging-home .case-study-showcase-variant-f__body{margin-top:auto}

/* industries — exception: the refreshed template still carries
   `__style-019{margin-top:auto}`, so the tile bottom-anchors its text block and
   any height variance below it — chips wrapping to two lines, descriptions to
   three — pushes the heading baseline down (measured up to 56px across a row).
   Moving the anchor to the chip row lets icon, heading and description
   top-align while chips stay on the tile floor. A second `auto` alongside the
   first would split the free space rather than collapse it, so `__style-019`
   is explicitly cleared. FLAG for the template owner. */
.page-staging-home .industries-signal-console-white__style-019{margin-top:0}
.page-staging-home .industries-signal-console-white__style-015{
  gap:6px 16px;flex-wrap:wrap;align-items:flex-start;min-height:28px;
}
.page-staging-home .industries-signal-console-white__style-022{
  margin-top:auto;align-content:flex-start;
}

/* Link defaults for any link added later inside page-local blocks.
   Scoped to page-local wrappers only: a bare `.page-staging-home a` is specificity
   0-1-1 in the last-loaded sheet, so it outranks the single-class rules the section
   and chrome templates use for their own CTAs and silently repaints them. The base
   `a{color:inherit}` already lives in tokens.css, so only the hover needs declaring. */
[class*="page-staging-home__"] a:hover{color:var(--bronze)}


/* Home news strip: a deep green announcement between the film and the white next section. */
#latest-news{
  position:relative;
  border:0;
  border-top:3px solid var(--gold);
  border-bottom:1px solid var(--deep);
  background:var(--deep);
  color:var(--paper);
  overflow:hidden;
}
#latest-news .news-strip-thin-ticker__inner{
  position:relative;
  width:var(--shell);
  min-height:142px;
  margin:0 auto;
  display:grid;
  grid-template-columns:170px 1px minmax(0,1fr);
  align-items:center;
  gap:30px;
}
#latest-news .news-strip-thin-ticker__strip-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--paper);
  text-decoration:none;
}
#latest-news .news-strip-thin-ticker__label-rule{
  width:36px;
  height:3px;
  background:var(--gold);
}
#latest-news .news-strip-thin-ticker__label-title{
  font:700 13px/1.2 var(--body);
  letter-spacing:.16em;
  text-transform:uppercase;
}
#latest-news .news-strip-thin-ticker__label-action{
  color:var(--on-sage);
  font:400 14px/1.3 var(--body);
}
#latest-news .news-strip-thin-ticker__label-action span{color:var(--gold)}
#latest-news .news-strip-thin-ticker__divider{
  width:1px;
  height:72px;
  background:rgba(255,255,255,.25);
}
#latest-news .news-strip-thin-ticker__headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-width:0;
  color:var(--paper);
  text-decoration:none;
}
#latest-news .news-strip-thin-ticker__story{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
#latest-news .news-strip-thin-ticker__story-meta{
  color:var(--gold);
  font:700 11px/1.2 var(--body);
  letter-spacing:.14em;
  text-transform:uppercase;
}
#latest-news .news-strip-thin-ticker__story-title{
  font:400 27px/1.2 var(--display);
  text-wrap:balance;
}
#latest-news .news-strip-thin-ticker__story-action{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:18px;
  padding:12px 0 12px 17px;
  border-left:1px solid rgba(255,255,255,.25);
  color:var(--paper);
  font:700 13px/1.2 var(--body);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
#latest-news .news-strip-thin-ticker__story-action span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--gold);
  color:var(--gold);
  font:400 23px/1 var(--body);
  transition:background .2s ease,color .2s ease;
}
#latest-news .news-strip-thin-ticker__headline:hover .news-strip-thin-ticker__story-action span{
  background:var(--gold);
  color:var(--deep);
}
#latest-news .news-strip-thin-ticker__strip-label:hover .news-strip-thin-ticker__label-action,
#latest-news .news-strip-thin-ticker__headline:hover .news-strip-thin-ticker__story-title{
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:5px;
}
#latest-news a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media (max-width:900px){
  #latest-news .news-strip-thin-ticker__inner{grid-template-columns:150px 1px minmax(0,1fr);gap:22px}
  #latest-news .news-strip-thin-ticker__headline{gap:18px}
  #latest-news .news-strip-thin-ticker__story-title{font-size:23px}
  #latest-news .news-strip-thin-ticker__story-action{font-size:0;gap:0;padding-left:14px}
  #latest-news .news-strip-thin-ticker__story-action span{font-size:23px}
}
@media (max-width:700px){
  #latest-news .news-strip-thin-ticker__inner{
    min-height:0;
    padding:24px 0 28px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  #latest-news .news-strip-thin-ticker__strip-label{gap:5px}
  #latest-news .news-strip-thin-ticker__label-rule{width:28px;height:2px;margin-bottom:3px}
  #latest-news .news-strip-thin-ticker__label-action{font-size:13px}
  #latest-news .news-strip-thin-ticker__divider{display:none}
  #latest-news .news-strip-thin-ticker__story{gap:7px}
  #latest-news .news-strip-thin-ticker__story-title{font-size:23px}
  #latest-news .news-strip-thin-ticker__story-action{align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){
  #latest-news .news-strip-thin-ticker__story-action span{transition:none}
}