/* ==========================================================================
   site-chrome.css — makes the case study sit inside fgred.com

   The nav and footer rules below are copied verbatim from WPCode snippet #64
   (fgred_nav_html / fgred_footer_html), so this page matches every other page
   on the site. If the real nav changes, re-copy from #64 — do not hand-edit.

   Everything under "DECK FIT" is new: it makes the scroll-snap deck live
   underneath a fixed 70px nav and end with the footer.
   ========================================================================== */

/* ── NAV (from #64) ─────────────────────────────────────────────────────── */
@keyframes fgr_pulse_nav{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}55%{box-shadow:0 0 0 10px rgba(192,57,43,0)}}
.fgr-nav{position:fixed;top:0;left:0;right:0;z-index:40;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 60px;background:rgba(13,13,11,.97)!important;backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);font-family:'DM Sans',system-ui,sans-serif}
.fgr-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.fgr-logo img{height:30px;width:auto;display:block}
.fgr-nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.fgr-nav-links a{font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:#9a958e;transition:color .2s;text-decoration:none}
.fgr-nav-links a:hover,.fgr-nav-links a.active{color:#f2ede3}
.fgr-nav-links a.active{border-bottom:1px solid #C0392B;padding-bottom:2px}
.fgr-nav-right{display:flex;align-items:center;gap:20px}
.fgr-nav-phone small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6a6660;margin-bottom:1px}
.fgr-nav-phone a{font-size:15px;font-weight:500;color:#f2ede3;transition:color .2s;text-decoration:none}
.fgr-nav-phone a:hover{color:#c9a96e}
.fgr-btn-nav{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:#C0392B;color:#fff;border:none;padding:12px 24px;white-space:nowrap;animation:fgr_pulse_nav 2.8s 1.5s ease-in-out infinite;transition:background .2s;text-decoration:none;display:inline-block}
.fgr-btn-nav:hover{background:#d9432f;animation:none}
.fgr-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;cursor:pointer}
.fgr-hamburger span{width:24px;height:1.5px;background:#f2ede3;display:block;transition:all .3s}
.fgr-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.fgr-hamburger.open span:nth-child(2){opacity:0}
.fgr-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.fgr-drawer{display:none;position:fixed;top:70px;left:0;right:0;z-index:39;background:rgba(13,13,11,.99)!important;border-bottom:1px solid rgba(255,255,255,.08);padding:16px 28px 24px;flex-direction:column}
.fgr-drawer.open{display:flex}
.fgr-drawer a{font-size:15px;font-weight:400;color:#c8c3b8;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);display:block;transition:color .2s;text-decoration:none}
.fgr-drawer a:hover{color:#f2ede3}
.fgr-drawer .drawer-phone{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#f2ede3!important;padding:22px 0 6px!important;border-bottom:none!important}
.fgr-drawer .drawer-cta{display:block;text-align:center;background:#C0392B;color:#fff!important;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:16px!important;margin-top:16px;border:none!important}

/* ── FOOTER (from #64) ──────────────────────────────────────────────────── */
footer.fgr-footer{background:#080806!important;padding:72px 80px 36px;border-top:1px solid rgba(255,255,255,.08);font-family:'DM Sans',sans-serif;width:100%}
.fgr-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:48px}
.fgr-foot-tag{font-size:14px;color:#c8c3b8;line-height:1.78;margin-bottom:22px;max-width:260px}
.fgr-foot-social{display:flex;gap:10px}
.fgr-soc{width:36px;height:36px;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;color:#9a958e;transition:all .2s;text-decoration:none}
.fgr-soc:hover{border-color:#C0392B;color:#C0392B}
.fgr-col-title{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#9a958e;margin-bottom:18px}
.fgr-foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fgr-foot-links a{font-size:14px;color:#c8c3b8;transition:color .2s;text-decoration:none}
.fgr-foot-links a:hover{color:#f2ede3}
.fgr-foot-contact{font-size:14px;color:#c8c3b8;margin:0 0 10px;line-height:1.65}
.fgr-foot-contact a{color:#f2ede3;transition:color .2s;text-decoration:none}
.fgr-foot-contact a:hover{color:#c9a96e}
.fgr-foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.fgr-foot-copy,.fgr-foot-lic{font-size:12px;color:#9a958e}
.fgr-foot-lic em{color:#c9a96e;font-style:normal}

/* ── DECK FIT (new) ─────────────────────────────────────────────────────────
   The deck is its own scroll container. Shrink it by the nav height and push
   it down, so full-bleed panels are never cut by the opaque nav bar.        */
.deck{height:calc(100svh - 70px);margin-top:70px}
.panel{height:100%}            /* 100% of the deck, which has a definite height */
@media(max-width:768px){
  .deck{height:calc(100svh - 62px);margin-top:62px}
}

/* The footer is the last child of the deck. min-height keeps it a full
   section; height:auto lets it grow taller than the viewport on mobile,
   which also takes it out of mandatory snapping (a snap area larger than
   the snapport is not snapped to) so it stays scrollable. */
/* The footer is only as tall as the footer. It used to be forced to a full
   panel height with the content pinned to the bottom, which left a screen of
   empty black above it. scroll-snap-align:end parks its bottom against the
   bottom of the deck, so the last panel stays partly visible above it and the
   transition reads as the story ending rather than a blank slide. */
.site-foot{height:auto;min-height:0;scroll-snap-align:end;scroll-snap-stop:normal;display:block;background:#080806}

/* Landscape phones: styles.css deliberately lets panels grow instead of
   clipping (@media max-height:540px). That rule sits earlier in the cascade
   than this file, so restore it here or short screens lose content. */
@media(max-height:540px){
  .panel{height:auto;min-height:100%}
}

/* The panel scrubber is for the story, not the footer — fade it out there. */
body.at-foot .scrub{opacity:0;pointer-events:none;transition:opacity .35s ease}
.scrub{transition:opacity .35s ease}

/* ── NAV RESPONSIVE (from #64) ──────────────────────────────────────────── */
@media(max-width:1024px){
  .fgr-nav{padding:0 32px}
  .fgr-nav-links{gap:18px}
  .fgr-nav-phone{display:none}
  footer.fgr-footer{padding:56px 48px 28px}
  .fgr-foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
  .fgr-nav{padding:0 20px;height:62px}
  .fgr-nav-links,.fgr-nav-right{display:none}
  .fgr-hamburger{display:flex}
  .fgr-drawer{top:62px}
  footer.fgr-footer{padding:44px 24px 24px}
  .fgr-foot-grid{grid-template-columns:1fr;gap:32px}
  .fgr-foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

/* The hero caption sat at bottom:74-104px, which cleared the figures when the
   deck was a full 100svh. With 70px taken by the nav it collides with them.
   Move it under the nav instead of shaving the gap. */
.hero-cap{top:22px;bottom:auto;left:auto;right:clamp(24px,6vw,88px);text-align:right}
@media(max-width:760px){ .hero-cap{top:14px;bottom:auto} }

/* noscript copy is for crawlers and no-JS visitors; keep it legible, not hidden */
.seo-copy{max-width:820px;margin:0 auto;padding:110px 24px 60px;color:#d5cfc4;
  font-family:'DM Sans',system-ui,sans-serif;line-height:1.7}
.seo-copy h1,.seo-copy h2,.seo-copy h3{font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;color:#f7f2e9;line-height:1.15;margin:32px 0 12px}
.seo-copy h1{font-size:44px}.seo-copy h2{font-size:30px}.seo-copy h3{font-size:22px}
.seo-copy p{margin:0 0 16px}
.seo-copy ul{margin:0 0 16px 20px}