/* THE SITE'S SHARED LOOK (Eugene, 2026-09-22) — cards, bands, rhythm and section heads, named once for every
   page. Loaded on all twelve pages, right after site.css, before home-presentation.css / site-look.css.

   PART 1 — CARDS. PART 2 — SECTIONS (bands, vertical rhythm, section heads, reading widths) is below.

   PART 1: ONE CARD SYSTEM FOR THE WHOLE SITE.
   Before this file the card surface was written out by hand in six places across two stylesheets that never
   load together (home-presentation.css for the homepage, site-look.css for every other page), so they drifted:
   three navy tints, four shadow strengths, two paddings, and body copy that went dark on the homepage while
   the inner pages stayed white. Everything a card is made of is named once here; both stylesheets read these
   names. Change a value here and every card on every page follows. Loaded on every page, right after site.css.

   Cards come in two kinds:
     - the TINTED card, navy glass over a photograph (homepage story cards, every inner-page hero card)
     - the LIGHT card, pale glass over a dark band (the answers, the reviews, the closing form)
   Both are the same object: a tint, a blur, one corner, one shadow, one padding, one set of type colours. */

:root {
  --navy: #1E2A47;
  --navy-deep: #141C33;

  /* THE TINTED CARD (navy glass over a photograph) */
  --card-tint: linear-gradient(125deg,rgba(34,56,118,.52),rgba(34,56,118,.38));
  --card-blur: blur(10px) saturate(1.35);
  --card-radius: clamp(28px,2.6vw,48px);
  --card-pad: clamp(34px,2.9vw,56px) clamp(40px,5.2vw,100px);
  --card-shadow: 0 18px 44px rgba(8,14,20,.28);
  /* Type on the tinted card: white label, near-black headline, dark charcoal-blue copy (2026-09-22). */
  --card-eyebrow-ink: #fff;
  --card-head-ink: #0b0b0b;
  --card-ink: #16212e;
  --card-ink-soft: #243447;
  --card-rule: rgba(22,33,46,.28);   /* hairlines and list dividers inside a tinted card */

  /* THE LIGHT CARD (pale glass over a dark band) */
  --card-light-tint: linear-gradient(135deg,rgba(255,255,255,.64),rgba(240,246,250,.48));
  --card-light-blur: blur(14px) saturate(1.25);
  --card-light-radius: clamp(24px,2vw,36px);
  --card-light-pad: clamp(26px,2.2vw,40px);
  --card-light-shadow: 0 18px 44px rgba(4,8,20,.34);
  --card-light-head-ink: #0b0b0b;
  --card-light-ink: #1f2c35;
  --card-light-rule: rgba(20,32,50,.16);

  /* The ground a tinted card sits on: the photograph lifted toward white, so the dark type reads over it. */
  --card-ground-lift: linear-gradient(rgba(233,238,239,.46),rgba(233,238,239,.46));
}

/* Phone: the same cards, closer in. */
@media (max-width:767px) {
  :root { --card-radius: 24px; --card-pad: 24px 22px; --card-light-radius: 22px; --card-light-pad: 24px 22px; }
}

/* Browsers that cannot blur behind an element get solid cards instead of transparent ones. Redefining the two
   tint names here is the whole fallback: every card that reads --card-tint follows, so no card needs its own
   @supports block (there used to be ten of them, with four different fallback colours). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --card-tint: #a9b4cc; --card-light-tint: #EEF3F6; }
}

/* ============================================================================================================
   PART 2 — SECTIONS (Eugene, 2026-09-22): "we should have some rules throughout and a consistent feel."

   The site had 18 different section paddings, 6 heading patterns and 6 reading widths across five stylesheets.
   These are the rules. Everything below is a name; the page stylesheets read the names.

   RULE 1 — BANDS. A section is one of four grounds, and nothing else:
       (a) PAGE       the page's own white — the default, for reading
       (b) PALE       --band-pale, for a band that needs to separate from the one above it
       (c) NAVY       --band-navy, for a band that carries light cards or a single statement
       (d) PHOTO      a photograph lifted with --card-ground-lift, and everything on it sits in a card
   RULE 2 — RHYTHM. Section padding is --sec-pad, or --sec-pad-lg for a feature band. Nothing else.
   RULE 3 — HEADS. One head everywhere: red dash, then the heavy headline, then an optional intro line.
       No numbering. The homepage never numbered its sections and the site follows the homepage.
   RULE 4 — WIDTH. One reading column, --page-max, inset by --page-inset. Text lines cap at --measure.
   RULE 5 — A photograph never carries bare copy. If it is on a photo, it is in a card (RULE 1d).
   ============================================================================================================ */

:root {
  /* Grounds */
  --band-pale: #F4F6F7;
  --band-navy: linear-gradient(180deg,#223052,#141C33);
  --band-rule: #DFE4E7;                    /* the one hairline between sections on the page ground */

  /* Vertical rhythm — two values, everywhere */
  --sec-pad: clamp(56px,6vw,104px);
  --sec-pad-lg: clamp(72px,8vw,136px);     /* feature bands: navy, photo, the closing section */

  /* One reading column, the homepage's */
  --page-max: 1700px;
  --page-inset: max(clamp(24px,2.5vw,64px), calc((100vw - 1700px) / 2));
  --measure: 66ch;                         /* text never runs wider than this */

  /* Section head — the homepage's, as names */
  --head-eyebrow: clamp(12px,.95vw,17px);
  --head-size: clamp(34px,3.1vw,60px);
  --head-intro: clamp(17px,1.3vw,24px);
  --head-gap: clamp(10px,.9vw,18px);       /* label → headline */
  --head-intro-gap: clamp(12px,1vw,20px);  /* headline → intro */
  --head-bottom: clamp(28px,2.6vw,48px);   /* head → the section's content */
  --head-dash: clamp(22px,1.6vw,32px);

  /* Body type inside a section on the page ground: the homepage's weight, not a document's */
  --body-title: clamp(18px,1.25vw,21px);
  --body-text: clamp(16px,1.15vw,18px);
  --body-ink: #1B2428;
  --body-ink-2: #46555C;
}

@media (max-width:980px) { :root { --page-inset: 24px; } }
@media (max-width:767px) { :root { --page-inset: 16px; --sec-pad: 44px; --sec-pad-lg: 56px; } }

/* PART 3 — ONE BUTTON FOR THE WHOLE SITE (Eugene, 2026-10-03).
   Every button is built the same way: logo red, a 1px outline, a faint even 10px grid of squares (no fade
   around the words), rounded corners. Three versions, picked by background:
     SOLID    .btn-primary — every main button: red fill, white squares, white text. (Header button and footer
              Submit are the exceptions, below.)
     OUTLINE  .btn-secondary, .btn-outline — transparent, red outline, red squares, for a second button beside a
              solid one. Text follows the background: white inside dark areas, dark ink on paper.
   Sizes stay with each page's own stylesheet; this sets only the look. Change a token here, every page follows. */
:root{
 --btn-red:var(--red,#B7352D);
 --btn-red-deep:var(--red-ink,#93281F);
 --btn-radius:18px;
 --btn-grid:10px;
 --btn-glow:none;
 --btn-ink:#182e34;
}
:is(.hdr,.hero-simple,.hero-card,.demo-hero,.demo-after,.close,.foot,#answers){--btn-ink:#fff}
html body .btn:is(.btn-primary,.btn-secondary,.btn-outline){position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--btn-red-deep)!important;border-radius:var(--btn-radius)!important;box-shadow:none!important;text-shadow:none}
html body .btn:is(.btn-primary,.btn-secondary,.btn-outline)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--btn-squares) 1px,transparent 1px) 0 0/var(--btn-grid) var(--btn-grid),linear-gradient(90deg,var(--btn-squares) 1px,transparent 1px) 0 0/var(--btn-grid) var(--btn-grid);-webkit-mask-image:var(--btn-glow);mask-image:var(--btn-glow)}
/* Solid */
html body .btn.btn-primary{--btn-squares:rgba(255,255,255,.09);background:var(--btn-red)!important;color:#fff!important}
html body .btn.btn-primary:hover:not(:disabled){background:var(--btn-red-deep)!important;color:#fff!important}
/* Outline: secondary buttons only, so they never merge with the red main button beside them */
html body .btn:is(.btn-secondary,.btn-outline){--btn-squares:rgba(183,53,45,.16);background:transparent!important;border-color:var(--btn-red)!important;color:var(--btn-ink)!important}
html body .btn:is(.btn-secondary,.btn-outline):hover:not(:disabled){background:var(--btn-red)!important;border-color:var(--btn-red)!important;color:#fff!important}
/* Exceptions (Eugene, 2026-10-03):
   HEADER button: transparent, white outline, white words, faint white squares; hover fills white with dark words.
   FOOTER Submit: soft white fill, dark words, no squares. */
html body .hdr .btn:is(.demo-header-cta,.engineering-header-cta){--btn-squares:rgba(255,255,255,.12);background:transparent!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important}
html body .hdr .btn:is(.demo-header-cta,.engineering-header-cta):hover:not(:disabled){background:#fff!important;border-color:#fff!important;color:#071214!important}
html body .foot .foot-talk .btn{background:#eef3f4!important;border-color:#eef3f4!important;color:#071214!important}
html body .foot .foot-talk .btn::after{content:none}
html body .foot .foot-talk .btn:hover:not(:disabled){background:#fff!important;border-color:#fff!important;color:#071214!important}
html body .btn:is(.btn-primary,.btn-secondary,.btn-outline):focus-visible{outline:3px solid var(--ice-ink,#1F7A99);outline-offset:3px}
html body .btn:is(.btn-primary,.btn-secondary,.btn-outline):disabled{opacity:.5}

/* PART 4 — HEADER EDGE (Eugene, 2026-10-03): a thin light-blue line under the header on every page, so the
   header stays separate from the dark sections it scrolls over. Drawn as an overlay, so nothing shifts.
   A see-through header (homepage film, photo-hero pages) shows no line; it fades in with the header's own
   background as the page scrolls (the same 0-1 value the page scripts already set). */
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(124,199,223,.38);pointer-events:none}
.home .hdr::after{opacity:var(--nav-opacity,0)}
body.has-photo-hero .hdr::after{opacity:var(--inner-nav-opacity,0)}

/* PART 5 — FOOTER "TALK TO OUR TEAM" (Eugene, 2026-10-03): the site's fallback email box, in the one shared footer
   (tools/footer.html). The talk column is the widest; the box stacks inside it and is styled for the dark footer. */
.foot .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.5fr)}
.foot .foot-talk .lead-box{margin:0 0 18px}
.foot .foot-talk .lead-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.foot .foot-talk .lead-row-text{flex-direction:column}
.foot .foot-talk .lead-row-text .btn{width:100%}
/* Email step: the Submit button sits inside the box, on its right. */
.foot .foot-talk [data-step="email"] .lead-row{position:relative;display:block}
.foot .foot-talk [data-step="email"] .field{width:100%;padding-right:112px}
.foot .foot-talk [data-step="email"] .lead-row .btn{position:absolute;top:6px;right:6px;bottom:6px;width:auto;min-height:0;padding:0 18px;border-radius:12px!important}
.foot .foot-talk .field{border:1px solid #33494d;background:#0b1a1d;color:#fff}
.foot .foot-talk .field::placeholder{color:#8a9a9c}
.foot .foot-talk .lead-note{display:none}
.foot .foot-talk .lead-done{color:rgba(255,255,255,.82)}
.foot .foot-talk .lead-error{color:#f2948a}
@media(max-width:900px){.foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot .foot-talk{grid-column:1/-1}}
@media(max-width:480px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* PART 6 — ONE FOOTER COLOUR (Eugene, 2026-10-03): the near-black of the homepage and inner pages everywhere; the
   planner had inherited site-look.css's navy. */
html body .foot{background:#071214}

/* PART 7 — FOOTER BOX HOLDS ITS LOOK ON EVERY PAGE (Eugene, 2026-10-03): page stylesheets (the planner's white,
   3px-corner fields and 48px buttons) must not restyle the footer's email box, so its own rules are stronger here. */
html body .foot .foot-talk .lead-form .field{box-sizing:border-box;min-height:52px;margin:0;padding:12px 112px 12px 16px;border:1px solid #33494d;border-radius:10px;background:#0b1a1d;color:#fff;font-size:16px;line-height:1.4}
html body .foot .foot-talk .lead-row-text .field{padding-right:16px;min-height:96px}
html body .foot .foot-talk [data-step="email"] .lead-row .btn{position:absolute;top:6px;right:6px;bottom:6px;min-height:0;min-width:0;width:auto;padding:0 18px;border-radius:12px!important;font-size:15px;line-height:1}
html body .foot .foot-talk .lead-row-text .btn{position:static;min-height:48px;border-radius:12px!important;font-size:15px}
/* Submit sits flush with the field: same top, bottom and right edge, the field's right corners (Eugene, 2026-10-03). */
html body .foot .foot-talk [data-step="email"] .lead-row .btn{top:0;right:0;bottom:0;border-radius:0 10px 10px 0!important;padding:0 20px}
/* Field and Submit side by side in one row, stretched to the same height, so their edges always line up
   (Eugene, 2026-10-03). Replaces the button-over-the-field placement. */
html body .foot .foot-talk [data-step="email"] .lead-row{display:flex;align-items:stretch;gap:0}
html body .foot .foot-talk [data-step="email"] .lead-row .field{flex:1 1 auto;min-width:0;padding-right:16px;border-radius:10px 0 0 10px;border-right:0}
html body .foot .foot-talk [data-step="email"] .lead-row .btn{position:static;flex:none;min-height:0;height:auto;margin:0;padding:0 20px;border:1px solid #eef3f4;border-radius:0 10px 10px 0!important}

/* PART 8 — A HIDDEN BUTTON STAYS HIDDEN (2026-10-03): the site button's display rule must not override [hidden]
   (the inline email asks hide their trigger button while the field is open). */
html body .btn[hidden],html body [data-inline][hidden]{display:none!important}

/* PART 9 — THE HOMEPAGE HEADER ON EVERY PAGE (Eugene, 2026-10-03): tools/build-mockup.mjs copies it in, inside
   .site-home-hdr (which carries the homepage's classes), with the homepage stylesheets. The wrapper takes no space;
   the header gets the homepage body's base text so its rows match to the pixel. */
.site-home-hdr{display:contents}
.site-home-hdr .hdr{font-size:17.5px;line-height:1.6}
/* Page button rules (the planner's 48px .btn) must not resize the copied header's button. */
html body .site-home-hdr .hdr .demo-header-cta{min-height:44px}
/* Menu sits at the bottom of the header bar on every page, homepage included (Eugene, 2026-10-03); the header button
   (where shown) aligns with it. */
@media(min-width:981px){
 .home.demo-page[data-mode="reference"] .hdr .hdr-in{align-items:flex-end}
 .home.demo-page[data-mode="reference"] .hdr :is(.nav,.hdr-right){align-self:flex-end;margin-bottom:10px}
 .home.demo-page[data-mode="reference"] .hdr .hdr-logo{align-self:center}
 /* Menu words sit on the logo's "foodprotec" baseline (Eugene, 2026-10-03): one shared baseline for the menu items,
    the bar lowered to meet the wordmark (it ends at 309/312 of the logo's height). */
 .home.demo-page[data-mode="reference"] .hdr .nav{align-items:baseline;margin-bottom:var(--fpt-nav-drop,3px)}
 .home.demo-page[data-mode="reference"] .hdr .nav-btn{align-items:baseline}
}
/* Menu in regular weight, not bold (Eugene, 2026-10-03). */
.home.demo-page[data-mode="reference"] .hdr :is(.nav-link,.nav-btn){font-weight:400}
/* No Build your project on the planner's questions or result screen. */
html body.calcpage .site-home-hdr .hdr .demo-header-cta{display:none!important}