/* =========================================================================
   Good Creations Theme Support: block-page styles (v1.2)
   -------------------------------------------------------------------------
   Styles for pages built with the WordPress block editor and the
   "Air-Weigh" block patterns (first user: the Weight Intelligence home page,
   /home-2/). Loaded ONLY on pages whose content contains a .gc-wi section,
   and inside the block editor. Tokens come from gc-tokens.css.

   HOW A PAGE IS PUT TOGETHER
     Every section is a core Group block with:
       - class "gc-wi"            -> section frame (padding, type, full width)
       - a Style (Styles panel)   -> background: aw-navy, aw-mist, aw-white,
                                     aw-gold, aw-blue, aw-green, aw-gold-band
       - class "gc-wi-<name>"     -> layout specific to that section
     Buttons pick a Style: aw-solid, aw-line, aw-blue, aw-blue-line, aw-link.
     Nothing here targets IDs, so blocks can be moved, copied and rebuilt.

   CONTENTS
     1. Section frame + type        6. Product sections (iWeigh/QW/BinMaxx)
     2. Section styles (colours)    7. Use cases
     3. Buttons + links             8. Weight-data cards
     4. Hero (drawing to truck)     9. Accuracy, how to buy, registration
     5. Under-hero band + lineup   10. Road close (Cover)
                                   11. SeedProd frame fixes  [SEEDPROD]
                                   12. Responsive
   ========================================================================= */


/* =========================================================================
   1. SECTION FRAME + TYPE
   ========================================================================= */
.gc-wi {
  box-sizing: border-box;
  font-family: var(--aw-font-body);
  -webkit-font-smoothing: antialiased;
  padding: 110px var(--gc-R, var(--gc-gut)) 110px var(--gc-L, var(--gc-gut));
  color: var(--gc-ink, var(--aw-navy));
}
.gc-wi *, .gc-wi *::before, .gc-wi *::after { box-sizing: border-box; }

/* Reset theme/SeedProd/core-layout margins; spacing below is explicit. */
.gc-wi :is(h1, h2, h3, h4, ul, ol, figure, .wp-block-buttons, .wp-block-columns) { margin: 0; }
/* :where() keeps this at element specificity so the rhythm rules below win.
   !important beats SeedProd's paragraph margins while SeedProd pages remain. */
:where(.gc-wi) p { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Vertical rhythm inside any stack (group, column, media-text text, cover) */
.gc-wi :is(.wp-block-group, .wp-block-column, .wp-block-media-text__content, .wp-block-cover__inner-container) > * + * {
  margin-top: var(--gc-gap, 18px) !important;
}
.gc-wi > * + * { margin-top: 44px !important; }        /* between a section's top-level blocks */
.gc-wi > :is(h1, h2) + p { margin-top: 18px !important; }   /* heading + its intro line */

.gc-wi :is(h1, h2, h3, h4) {
  font-family: inherit;
  color: var(--gc-head, inherit);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.06;
}
/* SeedProd centers headings on phones with !important; keep ours left unless
   an editor sets an alignment on the block. */
.gc-wi :is(h1, h2, h3, h4):not([class*="has-text-align"]) { text-align: left !important; }
.gc-wi h2 { font-size: clamp(34px, 3.8vw, 56px); }
.gc-wi h3 { font-size: clamp(21px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.gc-wi p, .gc-wi li { font-size: 18px; line-height: 1.6; color: var(--gc-text, var(--aw-text-dark)); }
.gc-wi ul { padding-left: 20px; list-style: disc outside; }   /* SeedProd sets bullets inside */
.gc-wi li { display: list-item; }
.gc-wi li + li { margin-top: 2px; }
.gc-wi a { color: inherit; }
.gc-wi img { max-width: 100%; height: auto; display: block; }
.gc-wi .gc-lede { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.45; font-weight: 500; color: var(--gc-head, var(--aw-navy)); }
.gc-wi .gc-small { font-size: 16px; }
:where(.gc-wi) :focus-visible { outline: 3px solid var(--aw-cyan); outline-offset: 3px; }


/* =========================================================================
   2. SECTION STYLES (Group block > Styles panel)
   Each style sets the background and three text colours.
   ========================================================================= */
.is-style-aw-navy  { background: var(--aw-navy); --gc-ink: #fff; --gc-head: #fff; --gc-text: var(--aw-text-light); }
.is-style-aw-navy-fade { background: linear-gradient(180deg, var(--aw-navy) 0%, #10151b 100%); --gc-ink: #fff; --gc-head: #fff; --gc-text: var(--aw-text-light); }
.is-style-aw-mist  { background: var(--aw-mist); --gc-head: var(--aw-navy); --gc-text: var(--aw-text-dark); }
.is-style-aw-white { background: #fff; --gc-head: var(--aw-navy); --gc-text: var(--aw-text-dark); }
.is-style-aw-gold  {
  /* bright gold behind the product, easing to mid gold at the edges */
  background: radial-gradient(ellipse 85% 95% at 70% 50%, var(--aw-gold) 0%, var(--aw-gold-mid) 38%, var(--aw-gold-deep) 100%);
  --gc-ink: #fff; --gc-head: #fff; --gc-text: #fff;
}
.is-style-aw-gold :is(p, li, h2, h3) { text-shadow: var(--aw-text-lift); }  /* white type on bright gold */
.is-style-aw-blue  { background: linear-gradient(115deg, #0f2238 0%, var(--aw-blue) 55%, var(--aw-sky) 100%); --gc-ink: #fff; --gc-head: #fff; --gc-text: #dbe9f7; }
.is-style-aw-green { background: linear-gradient(115deg, var(--aw-deep) 0%, var(--aw-green) 55%, var(--aw-mint) 100%); --gc-ink: #fff; --gc-head: #fff; --gc-text: #d9f2e3; }
.is-style-aw-gold-band { background: linear-gradient(115deg, var(--aw-olive), #7a6200 45%, var(--aw-gold)); --gc-ink: #fff; --gc-head: #fff; --gc-text: #fff8de; }


/* =========================================================================
   3. BUTTONS + LINKS (Button block > Styles panel)
   ========================================================================= */
.gc-wi .wp-block-buttons { gap: 12px 14px; }
.wp-block-button:is(.is-style-aw-solid, .is-style-aw-line, .is-style-aw-blue, .is-style-aw-blue-line) .wp-block-button__link {
  display: inline-block;
  font: 600 15px/1 var(--aw-font-body);
  padding: 16px 24px;
  border-radius: 2px;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.wp-block-button.is-style-aw-solid .wp-block-button__link     { background: #fff; color: var(--aw-ink); border-color: #fff; }
.wp-block-button.is-style-aw-solid .wp-block-button__link:hover { background: transparent; color: #fff; }
.wp-block-button.is-style-aw-line .wp-block-button__link      { background: transparent; color: #fff; border-color: #fff; }
.wp-block-button.is-style-aw-line .wp-block-button__link:hover { background: #fff; color: var(--aw-ink); }
.wp-block-button.is-style-aw-blue .wp-block-button__link      { background: var(--aw-blue); color: #fff; border-color: var(--aw-blue); }
.wp-block-button.is-style-aw-blue .wp-block-button__link:hover { background: var(--aw-blue-hover); border-color: var(--aw-blue-hover); }
.wp-block-button.is-style-aw-blue-line .wp-block-button__link { background: transparent; color: var(--aw-blue); border-color: var(--aw-blue); }
.wp-block-button.is-style-aw-blue-line .wp-block-button__link:hover { background: var(--aw-blue); color: #fff; }
/* Text link styled as a button slot (e.g. "Download the one-sheet") */
.wp-block-button.is-style-aw-link .wp-block-button__link {
  background: none; border: 0; padding: 16px 4px; border-radius: 0;
  font: 600 15px/1 var(--aw-font-body);
  color: inherit; text-decoration: underline;
}
/* Inline text links on light / dark sections */
/* .gc-links: a paragraph of links shown as a row of link tiles
   (each <a> is a tile; editors just type links in the paragraph). */
.gc-wi .gc-links { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-wi .gc-links a {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 auto;                      /* rows fill the width: no tile left hanging */
  padding: 13px 18px;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  color: var(--aw-navy); text-decoration: none;
  background: #fff; border: 1px solid var(--aw-rule); border-radius: 2px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.gc-wi .gc-links a:hover, .gc-wi .gc-links a:focus-visible { background: var(--aw-blue); border-color: var(--aw-blue); color: #fff; }
:is(.is-style-aw-navy, .is-style-aw-navy-fade, .is-style-aw-blue, .is-style-aw-green, .is-style-aw-gold, .is-style-aw-gold-band) .gc-links a {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
:is(.is-style-aw-navy, .is-style-aw-navy-fade, .is-style-aw-blue, .is-style-aw-green, .is-style-aw-gold, .is-style-aw-gold-band) .gc-links a:hover { background: #fff; color: var(--aw-navy); border-color: #fff; }
.gc-wi .gc-go a { font-weight: 600; font-size: 16px; }
.gc-wi .gc-go a { color: var(--aw-cyan); }


/* =========================================================================
   4. HERO: the line drawing becomes the truck  (.gc-wi-hero)
   Markup: Group.gc-wi-hero > Custom HTML (.gc-hero-stage, the SVG)
                            + Group.gc-hero-copy (Heading 1 + Buttons).
   gc-blocks.js fits the drawing to the screen, runs the animation and sets
   --gc-L / --gc-R so every section below lines up with the truck.
   ========================================================================= */
.gc-wi.gc-wi-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: min(calc(100vh - 90px), 900px);
  min-height: 640px;
  background: var(--aw-hero-bg);
  --gc-ink: #fff; --gc-head: #fff; --gc-text: var(--aw-text-light);
}
.gc-hero-stage { position: absolute; inset: 0; margin: 0 !important; }
.gc-hero-stage svg { width: 100%; height: 100%; display: block; }
.gc-wi .gc-hero-copy {
  position: absolute;
  left: var(--gc-L, var(--gc-gut));
  right: var(--gc-R, var(--gc-gut));
  bottom: 56px;
  margin: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 56px;
  flex-wrap: wrap;
}
.gc-wi .gc-hero-copy > * + * { margin-top: 0 !important; }
.gc-wi .gc-hero-copy h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.018em; max-width: 15em; }

/* Drawing states: s1 lines draw, s2 load + weights, s3 photo resolves, s4 data flows */
#rig .ln { stroke: #cfd8e1; stroke-width: 1.6; stroke-dasharray: 3200; stroke-dashoffset: 3200; }
#rig .thin { stroke-width: 1; stroke: #8e9aa6; }
#rig.s1 .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.45, 0, .2, 1); }
#rig #draw { transition: opacity 1.2s ease; }
#rig.s3 #draw, #rig.s3 g.ticks.late { opacity: 0; }
#rig .ticks { transition: opacity 1.2s ease; }
#rig #photo { opacity: 0; transition: opacity 1.4s ease; }
#rig.s3 #photo { opacity: 1; }
#rig #hatch-fill { opacity: .9; transition: opacity 1.2s ease; }
#rig.s3 #hatch-fill { opacity: 0; }
#rig .late { opacity: 0; transition: opacity .6s ease; }
#rig.s2 .late { opacity: 1; }
#rig .sensor { fill: #f5a50d; }
#rig .lead { stroke: #f5a50d; stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; }
#rig .brk { stroke: #cfd8e1; stroke-width: 1.4; fill: none; }
#rig .lbl { font: 500 15px var(--aw-font-body); fill: var(--aw-text-light); }
#rig .val { font: 600 27px var(--aw-font-body); fill: #fff; font-variant-numeric: tabular-nums; }
#rig .u { font-size: 15px; font-weight: 500; fill: var(--aw-text-light); }
#rig .gross .val tspan:first-child { fill: #f5a50d; }
#rig .small { font-size: 12px; fill: #8d949b; }
#rig .ticks line { stroke: #58626c; stroke-width: 1; }
#rig .end { opacity: 0; transition: opacity .6s ease; }
#rig.s4 .end { opacity: 1; }
#rig .flow { fill: none; stroke: #f5a50d; stroke-width: 1.6; stroke-dasharray: 900; stroke-dashoffset: 900; }
#rig.s4 .flow { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1); }
#rig .node { fill: var(--aw-hero-bg); stroke: var(--aw-cyan); stroke-width: 1.6; }
#rig .dest { font: 500 17px var(--aw-font-body); fill: #e6eaee; }
#rig .dest.sub { font-size: 13px; fill: #8d949b; }
#rig .pulse { fill: #f5a50d; }
@media (prefers-reduced-motion: reduce) { #rig * { transition: none !important; } }


/* =========================================================================
   5. UNDER-HERO BAND + PRODUCT LINEUP
   ========================================================================= */
.gc-wi-under { padding-top: 72px; padding-bottom: 64px; }
.gc-wi-under .wp-block-columns { gap: 56px; align-items: center; }
.gc-wi .wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border: 0; }
.gc-wi .wp-block-embed__wrapper { background: #0e1318; }

.gc-wi-lineup .gc-top { gap: 56px; align-items: flex-end; }
.gc-wi-lineup .gc-top p { font-size: 19px; }
.gc-wi-lineup .gc-row { gap: 18px; }
.gc-wi .gc-ph {
  height: 260px;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 55%, #2c3642 0%, #161c23 70%);
  border: 1px solid var(--aw-steel);
}
.gc-wi .gc-ph a { display: contents; }
.gc-wi .gc-ph img { max-height: 200px; max-width: 72%; width: auto; object-fit: contain; }
.gc-wi .gc-ph:hover { border-color: #3f5163; }
.gc-wi .gc-name-sm { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }


/* =========================================================================
   6. PRODUCT SECTIONS  (.gc-wi-prod + Style aw-gold / aw-blue / aw-green)
   Columns: text on the left, product visual on the right.
   ========================================================================= */
.gc-wi.gc-wi-prod { min-height: min(100vh, 940px); display: flex; align-items: center; scroll-margin-top: 40px; }
.gc-wi-prod > .wp-block-columns { width: 100%; gap: 64px; }
.gc-wi .gc-name { font-size: clamp(44px, 5vw, 76px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.gc-wi-prod h3 { font-size: clamp(30px, 3.2vw, 48px); font-weight: 600; line-height: 1.06; letter-spacing: -0.016em; }
.gc-wi-prod .wp-block-list li { font-size: 17px; }
.gc-wi-prod .gc-shot img { width: 100%; max-width: 600px; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto; }
/* App-store badges and partner logos (iWeigh) */
.gc-wi .gc-apps { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-wi .gc-apps > * + * { margin-top: 0 !important; }
.gc-wi .gc-apps img { height: 42px; width: auto; }
.gc-wi .gc-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gc-wi .gc-partners > * + * { margin-top: 0 !important; }
.gc-wi .gc-partners p { font-size: 14px; font-weight: 600; margin-right: 4px !important; }
.gc-wi .gc-partners figure { background: #fff; padding: 9px 14px; }
.gc-wi .gc-partners img { height: 24px; width: auto; }
/* iWeigh visual sizing on block pages (the .iwx visual itself is in gc-theme-support.css 4e) */
.gc-wi .iwx-fan > * + *, .gc-wi .iwx-halo > * + *, .gc-wi .iwx-right > * + * { margin-top: 0 !important; }
.gc-wi .iwx-fan { margin-top: -26px !important; }


/* =========================================================================
   7. USE CASES  (.gc-wi-uses: six Media & Text blocks in a two-column grid)
   ========================================================================= */
.gc-wi-uses .gc-top { gap: 56px; align-items: flex-end; }
.gc-wi .gc-use-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.gc-wi .gc-use-grid > * + * { margin-top: 0 !important; }
.gc-wi .gc-use { border-top: 1px solid var(--aw-rule); padding: 24px 0; align-items: start; }
.gc-wi .gc-use .wp-block-media-text__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gc-wi .gc-use .wp-block-media-text__content { padding: 0 0 0 22px; }
.gc-wi .gc-use h3 { font-size: 22px; }
.gc-wi .gc-use p { font-size: 16px; --gc-gap: 8px; }
.gc-wi .gc-use .wp-block-media-text__content > * + * { margin-top: 8px !important; }


/* =========================================================================
   8. WEIGHT-DATA CARDS  (.gc-card on navy)
   ========================================================================= */
.gc-wi-data .gc-cols { gap: 18px; }
.gc-wi .gc-card { background: var(--aw-card-dark); border: 1px solid var(--aw-steel); padding: 0; --gc-gap: 12px; }
.gc-wi .gc-card > figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gc-wi .gc-card-body { padding: 26px 28px 28px; }
.gc-wi .gc-card p { font-size: 16.5px; }
.gc-wi .gc-card-stack { display: grid; gap: 18px; }
.gc-wi .gc-card-stack > * + * { margin-top: 0 !important; }
.gc-wi .gc-card.wp-block-media-text { align-items: stretch; }
.gc-wi .gc-card.wp-block-media-text .wp-block-media-text__media img { height: 100%; min-height: 220px; object-fit: cover; }
.gc-wi .gc-card .wp-block-media-text__content { padding: 24px; }
.gc-wi .gc-card h3 { font-size: 21px; }


/* =========================================================================
   9. ACCURACY, HOW TO BUY, REGISTRATION
   ========================================================================= */
.gc-wi .gc-lit .wp-block-media-text__media {
  background: radial-gradient(ellipse at 50% 45%, #2a3440 0%, #151b22 60%, #0e1318 100%);
  aspect-ratio: 5 / 4; display: grid; place-items: center;
}
.gc-wi .gc-lit .wp-block-media-text__media img { width: 72%; margin: auto; }
.gc-wi .gc-lit .wp-block-media-text__content { padding: 0 0 0 64px; }

.gc-wi .gc-card-light { background: #fff; border: 1px solid var(--aw-rule); padding: 28px; --gc-gap: 14px; }
.gc-wi-buy .gc-cols { gap: 18px; }
.gc-wi .gc-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  background: #fff; border: 1px solid var(--aw-rule); padding: 22px 28px;
}
.gc-wi .gc-strip > * + *, .gc-wi .gc-inline > * + * { margin-top: 0 !important; }
.gc-wi .gc-strip p { max-width: 44em; font-size: 17px; }
.gc-wi .gc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.gc-wi-buy > .gc-strip, .gc-wi-buy > .gc-inline { margin-top: 18px !important; }

.gc-wi.gc-wi-reg { padding-top: 88px; padding-bottom: 88px; }
.gc-wi-reg .wp-block-columns { gap: 56px; align-items: center; }


/* =========================================================================
   10. ROAD CLOSE  (Cover block .gc-wi-road)
   ========================================================================= */
.gc-wi.gc-wi-road { min-height: 720px; align-items: center; --gc-ink: #fff; --gc-head: #fff; --gc-text: #dfe3e7; }
.gc-wi-road::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(7, 9, 11, .88) 0%, rgba(7, 9, 11, .55) 42%, rgba(7, 9, 11, 0) 70%);
}
.gc-wi-road .wp-block-cover__inner-container { z-index: 2; width: 100%; }
.gc-wi-road h2 { font-size: clamp(44px, 5.4vw, 84px); max-width: 12em; }
.gc-wi-road h2 sup { font-size: .32em; vertical-align: top; position: relative; top: .35em; margin-left: .05em; }
.gc-wi .gc-zip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px !important; }
.gc-wi .gc-zip input {
  font: 17px var(--aw-font-body); padding: 15px 16px;
  border: 1px solid #9aa3ab; border-radius: 2px; width: 220px; max-width: 100%;
}
.gc-wi .gc-zip button {
  font: 600 15px/1 var(--aw-font-body); padding: 16px 24px; border-radius: 2px;
  background: #fff; color: var(--aw-ink); border: 1px solid #fff; cursor: pointer;
}
.gc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* =========================================================================
   11. SEEDPROD FRAME FIXES  [SEEDPROD]
   While SeedProd draws the header/footer, block pages sit inside its
   "page" template. Hide its title banner and drop its content padding on
   pages that use these sections (body class added by the plugin).
   Delete this section when SeedProd is gone.
   ========================================================================= */
.gc-wi-page .sp-el-section:has(+ .sp-el-section .gc-wi) { display: none; }
.gc-wi-page .sp-el-section:has(.gc-wi),
.gc-wi-page .sp-el-section:has(.gc-wi) :is(.sp-el-row, .sp-el-col, .sp-el-block) { padding: 0 !important; max-width: none !important; }
.gc-wi-page { overflow-x: clip; }
/* Full-bleed inside SeedProd's centred row (the block theme's page-canvas
   template is already full width, so this only applies under SeedProd). */
.gc-wi-page .sp-el-section .gc-wi.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .gc-wi .gc-use-grid { grid-template-columns: 1fr; }
  .gc-wi .gc-lit .wp-block-media-text__content { padding: 32px 0 0; }
}
@media (max-width: 781px) {          /* core Columns stack at 781px */
  .gc-wi { padding-top: 72px; padding-bottom: 72px; }
  .gc-wi.gc-wi-prod { min-height: 0; }
  .gc-wi-prod > .wp-block-columns { gap: 40px; }
  .gc-wi .wp-block-columns > .wp-block-column + .wp-block-column { margin-top: 0 !important; }
  .gc-wi .gc-card.wp-block-media-text .wp-block-media-text__media img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 759px) {          /* hero matches the drawing script's mobile breakpoint */
  .gc-wi.gc-wi-hero { height: 700px; min-height: 0; }
  .gc-wi .gc-hero-copy { left: 20px; right: 20px; bottom: 36px; flex-direction: column; align-items: flex-start; }
  .gc-wi .gc-hero-copy h1 { font-size: clamp(34px, 10vw, 44px); }
  .gc-wi.gc-wi-road { min-height: 600px; }
  .gc-wi-road::before { background: linear-gradient(180deg, rgba(7, 9, 11, .86) 0%, rgba(7, 9, 11, .72) 100%); }
  .gc-wi .gc-use .wp-block-media-text__content { padding-left: 16px; }
}


/* =========================================================================
   13. GENERIC PAGE COMPONENTS (used by the converted SeedProd pages)
   Each is a class on a core block (Advanced > Additional CSS class).
     .gc-wi-pagehero  Cover: dark photo hero with H1, lede, buttons
     .gc-narrow       Group: keeps running text to a readable width
     .gc-center       Group: centres a heading block (title + lede)
     .gc-split        Media & Text: large photo beside text
     .gc-grid         Columns: equal cards; pair with .gc-card-light / .gc-card
     .gc-checks       List: tick bullets
     .gc-faq          Group of Details blocks (accordion)
     .gc-videos       Columns of YouTube embeds
     .gc-files        Group of File blocks / links (manuals, PDFs)
     .gc-quote        Quote: testimonial
     .gc-form         Group around a Gravity Forms shortcode
     .gc-logos        Group/Columns of partner logos
   ========================================================================= */

/* Page hero */
.gc-wi.gc-wi-pagehero { min-height: 460px; align-items: flex-end; padding-top: 140px; padding-bottom: 72px; --gc-ink: #fff; --gc-head: #fff; --gc-text: #e6eaee; }
.gc-wi-pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7, 9, 11, .25) 0%, rgba(7, 9, 11, .82) 100%);
}
.gc-wi-pagehero .wp-block-cover__inner-container { z-index: 2; width: 100%; }
.gc-wi-pagehero h1 { font-size: clamp(38px, 4.6vw, 68px); max-width: 16em; }
.gc-wi-pagehero .gc-lede { color: #e6eaee; max-width: 38em; }

/* Text width and centring */
.gc-wi .gc-narrow { max-width: 820px; }
.gc-wi .gc-center { text-align: center; margin-left: auto; margin-right: auto; max-width: 900px; }
.gc-wi .gc-center :is(h2, h3):not([class*="has-text-align"]) { text-align: center !important; }
.gc-wi .gc-center .wp-block-buttons { justify-content: center; }

/* Large media & text */
.gc-wi .gc-split { gap: 0; align-items: center; }
.gc-wi .gc-split .wp-block-media-text__media img { width: 100%; height: auto; }
.gc-wi .gc-split .wp-block-media-text__content { padding: 0 0 0 56px; }
.gc-wi .gc-split.has-media-on-the-right .wp-block-media-text__content { padding: 0 56px 0 0; }

/* Card grid */
.gc-wi .gc-grid { gap: 18px; }
.gc-wi .gc-grid > .wp-block-column { display: flex; flex-direction: column; }
.gc-wi .gc-grid > .wp-block-column > :is(.gc-card, .gc-card-light) { flex: 1; }
.gc-wi .gc-card-light > figure:first-child { margin: -28px -28px 6px !important; }
.gc-wi .gc-card-light > figure:first-child img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Tick list */
.gc-wi ul.gc-checks { list-style: none; padding-left: 0; }
.gc-wi ul.gc-checks li { display: block; position: relative; padding-left: 30px; }
.gc-wi ul.gc-checks li + li { margin-top: 8px; }
.gc-wi ul.gc-checks li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg);
  color: var(--aw-blue);
}
:is(.is-style-aw-navy, .is-style-aw-navy-fade, .is-style-aw-blue, .is-style-aw-green, .is-style-aw-gold) ul.gc-checks li::before { color: var(--aw-cyan); }

/* Accordion */
.gc-wi .gc-faq { max-width: 900px; }
.gc-wi .gc-faq > * + * { margin-top: 0 !important; }
.gc-wi .gc-faq .wp-block-details { border-top: 1px solid var(--aw-rule); padding: 18px 0; }
.gc-wi .gc-faq .wp-block-details:last-child { border-bottom: 1px solid var(--aw-rule); }
.gc-wi .gc-faq summary { font-weight: 600; font-size: 19px; cursor: pointer; color: var(--gc-head, var(--aw-navy)); }
.gc-wi .gc-faq .wp-block-details > :not(summary) { margin-top: 12px; }

/* Video grid */
.gc-wi .gc-videos { gap: 18px; }
.gc-wi .gc-videos .wp-block-embed { margin: 0; }
.gc-wi .gc-videos h3 { font-size: 18px; margin-top: 10px !important; }

/* Downloads */
.gc-wi .gc-files > * + * { margin-top: 0 !important; }
.gc-wi .gc-files .wp-block-file { border-top: 1px solid var(--aw-rule); padding: 14px 0; margin: 0; }
.gc-wi .gc-files .wp-block-file a { font-weight: 600; text-decoration: none; color: var(--aw-blue); }
.gc-wi .gc-files .wp-block-file a::before { content: "PDF"; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--aw-navy); padding: 3px 6px; margin-right: 12px; border-radius: 2px; vertical-align: 2px; }

/* Testimonial */
.gc-wi .gc-quote { border-left: 3px solid var(--aw-gold); padding: 6px 0 6px 24px; margin: 0; }
.gc-wi .gc-quote p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--gc-head, var(--aw-navy)); }
.gc-wi .gc-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--gc-text, var(--aw-text-dark)); }

/* Forms (Gravity Forms) */
.gc-wi .gc-form { background: #fff; border: 1px solid var(--aw-rule); padding: 32px; max-width: 900px; }
.gc-wi .gc-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { border: 1px solid #9aa3ab; border-radius: 2px; padding: 12px 14px; font: inherit; font-size: 16px; }
.gc-wi .gc-form :is(input[type="submit"], button) { background: var(--aw-blue); color: #fff; border: 0; border-radius: 2px; padding: 16px 24px; font: 600 15px/1 var(--aw-font-body); cursor: pointer; }

/* Partner logos */
.gc-wi .gc-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; }
.gc-wi .gc-logos > * + * { margin-top: 0 !important; }
.gc-wi .gc-logos img { max-height: 56px; width: auto; }

@media (max-width: 781px) {
  .gc-wi .gc-split .wp-block-media-text__content,
  .gc-wi .gc-split.has-media-on-the-right .wp-block-media-text__content { padding: 28px 0 0; }
  .gc-wi.gc-wi-pagehero { min-height: 380px; padding-top: 110px; }
}


/* =========================================================================
   14. CLASSIC PAGE COMPONENTS (interior pages, matching their SeedProd look)
     Section modifier:
       .gc-tight        Group section: compact vertical padding (32px)
     Blocks:
       .gc-wi-pagetitle Section: centred H1 + H2 tagline on white
       .gc-quicklinks   Group (flex) inside a navy section: label + buttons
       .gc-statement    Heading/paragraph: bold centred intro line
       .gc-prodcard     Group: bordered card holding a Media & Text block
       .gc-subtitle     Heading (h4): bold line under a card title
     Button Style "aw-classic": the legacy blue rounded button (tokens
     --gc-btn-bg / --gc-btn-radius, shared with the old site buttons).
   ========================================================================= */
.gc-wi.gc-tight { padding-top: 32px; padding-bottom: 32px; }
.gc-wi.gc-wi-pagetitle { padding-top: 56px; padding-bottom: 24px; text-align: center; }
.gc-wi-pagetitle h1 { font-size: clamp(34px, 3.6vw, 52px); text-align: center !important; }
.gc-wi-pagetitle h2 { font-size: clamp(22px, 2.4vw, 36px); text-align: center !important; }
.gc-wi.gc-wi-pagetitle > h1 + h2 { margin-top: 10px !important; }

.gc-wi .gc-quicklinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.gc-wi .gc-quicklinks > * + * { margin-top: 0 !important; }
.gc-wi .gc-quicklinks h3 { font-size: 22px; color: #fff; }
.gc-wi .gc-quicklinks .wp-block-buttons { gap: 12px; }
.gc-wi .gc-quicklinks .wp-block-button.is-style-aw-classic .wp-block-button__link { font-size: 17px; padding: 9px 16px; }

.gc-wi .gc-statement { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.35; text-align: center !important; max-width: 1120px; margin-left: auto; margin-right: auto; color: var(--gc-head, var(--aw-navy)); }

.gc-wi .gc-prodcard { border: 2px solid var(--aw-navy); border-radius: 4px; padding: 20px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.gc-wi > .gc-prodcard + .gc-prodcard { margin-top: 40px !important; }
.gc-wi .gc-prodcard .wp-block-media-text { gap: 0; align-items: center; }
.gc-wi .gc-prodcard .wp-block-media-text__media img { width: 100%; height: auto; }
.gc-wi .gc-prodcard .wp-block-media-text__content { padding: 0 8px 0 40px; --gc-gap: 14px; }
.gc-wi .gc-prodcard .has-media-on-the-right .wp-block-media-text__content { padding: 0 40px 0 8px; }
.gc-wi .gc-prodcard h3 { font-size: clamp(24px, 2vw, 30px); }
.gc-wi .gc-prodcard p, .gc-wi .gc-prodcard li { font-size: 16px; }
.gc-wi .gc-prodcard .wp-block-buttons { justify-content: center; }
.gc-wi .gc-subtitle { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }

.wp-block-button.is-style-aw-classic .wp-block-button__link {
  background: var(--gc-btn-bg); color: #fff; border: 0;
  border-radius: var(--gc-btn-radius);
  font: 400 20px/1.2 var(--aw-font-body);
  padding: 12px 22px;
  text-decoration: none;
  transition: background-color .3s ease;
}
.wp-block-button.is-style-aw-classic .wp-block-button__link:hover { background: var(--gc-btn-bg-hover); }

@media (max-width: 781px) {
  .gc-wi .gc-prodcard .wp-block-media-text__content,
  .gc-wi .gc-prodcard .has-media-on-the-right .wp-block-media-text__content { padding: 22px 4px 4px; }
}


/* =========================================================================
   15. REFINEMENTS FROM THE PAGE CONVERSION (2026-10-01)
   Requested by the conversion of the 70 SeedProd pages; one definition each.
     .gc-section-title  Heading: interior section title (~28px bold)
     .gc-caps           Heading/paragraph: uppercase (SeedProd's CSS caps)
     .gc-shadow         Group: rounded card with a soft shadow
     .gc-btn-stack      Buttons: full-width stacked buttons
     .gc-icon           Image: never cropped (icons inside cards)
   ========================================================================= */

/* Light panels keep dark text even inside navy/blue/green sections (bug fix:
   forms and white cards inherited the section's light text colours). */
.gc-wi :is(.gc-form, .gc-card-light, .gc-prodcard, .gc-shadow) {
  --gc-text: var(--aw-text-dark); --gc-head: var(--aw-navy); --gc-ink: var(--aw-navy);
  color: var(--aw-text-dark);
}
.gc-wi .gc-form { margin-left: auto; margin-right: auto; }
.gc-wi .gc-form :is(label, legend, .gfield_label) { color: var(--aw-navy); }

/* Interior section titles */
.gc-wi .gc-section-title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.2; }
.gc-wi .gc-caps { text-transform: uppercase; }

/* Cards */
.gc-wi .gc-shadow { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); padding: 24px; }
.gc-wi .gc-card-light { display: flex; flex-direction: column; }
.gc-wi .gc-card-light > .wp-block-buttons:last-child { margin-top: auto !important; padding-top: 14px; }
.gc-wi .gc-card-light > figure.gc-icon:first-child { margin: 0 auto 6px !important; }
.gc-wi figure.gc-icon img { aspect-ratio: auto !important; object-fit: contain !important; width: auto !important; max-width: 160px; margin: 0 auto; }

/* Stacked full-width buttons */
.gc-wi .gc-btn-stack { flex-direction: column; align-items: stretch; }
.gc-wi .gc-btn-stack .wp-block-button { width: 100%; }
.gc-wi .gc-btn-stack .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* FAQs: centred, fill cards, spaced answers */
.gc-wi .gc-faq { margin-left: auto; margin-right: auto; }
.gc-wi .gc-prodcard .gc-faq, .gc-wi .gc-shadow .gc-faq { max-width: none; }
.gc-wi .gc-faq .wp-block-details > :not(summary) + :not(summary) { margin-top: 12px !important; }

/* Post listings (Query Loop) inside block pages */
.gc-wi .wp-block-post-template { list-style: none; padding-left: 0; }
.gc-wi .wp-block-post-template > li { display: flex; flex-direction: column; margin: 0; }
.gc-wi .wp-block-post-template > li > :not(.wp-block-post-featured-image) { padding-left: 20px; padding-right: 20px; }
.gc-wi .wp-block-query .wp-block-post { background: #fff; border: 1px solid var(--aw-rule); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); padding-bottom: 20px; }
.gc-wi .wp-block-read-more { display: inline-block; background: var(--gc-btn-bg); color: #fff !important; border-radius: var(--gc-btn-radius); padding: 10px 18px; text-decoration: none; margin-left: 20px; }
.gc-wi .wp-block-query-pagination { margin-top: 32px !important; }

/* In-page anchors clear the sticky header */
.gc-wi[id], .gc-wi [id] { scroll-margin-top: 96px; }


/* =========================================================================
   16. PRODUCT TILES  (.gc-tiles columns of .gc-tile groups)
   Tall colour tiles, one per product, the product cutout lit and large.
   Each tile is a Group with Style aw-gold / aw-blue / aw-green (section 2
   colours), holding an Image (transparent cutout), H3, paragraph, link.
   ========================================================================= */
.gc-wi .gc-tiles { gap: 18px; }
.gc-wi .gc-tile {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 560px; padding: 32px; border-radius: 2px;
  display: flex; flex-direction: column; justify-content: flex-end;
  --gc-gap: 10px;
}
.gc-wi .gc-tile::before {             /* soft light behind the product */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 52%);
}
.gc-wi .gc-tile > figure {
  position: absolute; inset: 24px 0 40% 0; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
.gc-wi .gc-tile > figure a { display: contents; }
.gc-wi .gc-tile > figure img {
  max-height: min(290px, 100%); max-width: 72%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .45));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.gc-wi .gc-tile:hover > figure img { transform: translateY(-6px) scale(1.04); }
.gc-wi .gc-tile h3 { font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.015em; }
.gc-wi .gc-tile p { font-size: 17px; line-height: 1.5; }
.gc-wi .gc-tile .gc-go a { color: #fff; }
@media (prefers-reduced-motion: reduce) { .gc-wi .gc-tile > figure img { transition: none; } }
@media (max-width: 781px) { .gc-wi .gc-tile { min-height: 460px; } }


/* =========================================================================
   17. BLOCK EDITOR CANVAS
   The front end sizes section padding from the viewport (100vw) and lines
   the hero up with the truck by script. Inside the editor canvas the
   viewport is not the content width and the script does not run, so use
   fixed padding and a normal-flow hero there. Front end is unaffected.
   ========================================================================= */
.editor-styles-wrapper {
  --gc-gut: 32px;
  --gc-L: 32px;
  --gc-R: 32px;
  --wp--style--root--padding-left: 24px;
  --wp--style--root--padding-right: 24px;
}
.editor-styles-wrapper .gc-wi { padding: 56px 32px; }
.editor-styles-wrapper .gc-wi.gc-wi-hero { height: auto; min-height: 0; padding: 0 0 40px; }
.editor-styles-wrapper .gc-wi-hero .gc-hero-stage { position: relative; inset: auto; height: 420px; }
.editor-styles-wrapper .gc-wi .gc-hero-copy { position: relative; left: auto; right: auto; bottom: auto; padding: 24px 32px 0; }
.editor-styles-wrapper .gc-wi.gc-wi-prod { min-height: 0; }
.editor-styles-wrapper .gc-wi .gc-tile > figure { position: relative; inset: auto; height: 260px; }
.editor-styles-wrapper .gc-wi .gc-tile { min-height: 0; }


/* =========================================================================
   18. ANDURIL LAYOUT  (home-3; reusable "framed" sections)
     .gc-wi-frame      Section: black frame, 16px inset (hero, mosaic)
     .gc-film          Cover (video): the framed hero film
     .gc-film-copy     Group in the film: H1 left, intro + buttons right
     .gc-mosaic        Group: 4-column photo grid of .gc-mtile groups
     .gc-mtile         Group: full-bleed linked image + name + one line
                       (.gc-mtile-big spans 2x2, .gc-mtile-wide spans 2)
     .gc-wi-steelband  Section: steel feature band with wide image
     .gc-bar           Group: title left, small link right, rule below
     .gc-newslead      Columns: lead story text + image
     .gc-panels        Section: two colour story panels (columns)
   ========================================================================= */
.gc-wi.gc-wi-frame { background: #050607; padding: 16px; --gc-ink: #fff; --gc-head: #fff; --gc-text: #dfe3e7; }
.gc-wi.gc-wi-frame + .gc-wi-frame { padding-top: 0; }
.gc-wi .gc-film { min-height: calc(100vh - 110px) !important; padding: 0; align-items: flex-end; background: #0d1117 url(/wp-content/uploads/2026/10/aw-home3-hero-poster.jpg) center/cover; }
.gc-wi .gc-film::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,6,7,.15) 0%, rgba(5,6,7,.05) 40%, rgba(5,6,7,.78) 100%); pointer-events: none; }
.gc-wi .gc-film .wp-block-cover__inner-container { z-index: 2; width: 100%; }
.gc-wi .gc-film-copy { padding: 0 40px 44px; gap: 48px; align-items: flex-end; }
.gc-wi .gc-film-copy h1 { font-size: clamp(40px, 5.2vw, 84px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; max-width: 13em; }
.gc-wi .gc-film-copy p { font-size: 16px; line-height: 1.55; }

.gc-wi .gc-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gc-wi .gc-mosaic > * + * { margin-top: 0 !important; }
.gc-wi .gc-mtile { position: relative; overflow: hidden; min-height: 300px; background: #111; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; }
.gc-wi .gc-mtile > figure { position: absolute; inset: 0; margin: 0 !important; z-index: 0; }
.gc-wi .gc-mtile > figure a { display: block; height: 100%; }
.gc-wi .gc-mtile > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.gc-wi .gc-mtile:hover > figure img { transform: scale(1.04); }
.gc-wi .gc-mtile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.75) 100%); }
.gc-wi .gc-mtile > :not(figure) { position: relative; z-index: 2; }
.gc-wi .gc-mtile > * + * { margin-top: 4px !important; }
.gc-wi .gc-mtile h3 { font-size: 24px; font-weight: 700; }
.gc-wi .gc-mtile h3 a { text-decoration: none; }
.gc-wi .gc-mtile p { font-size: 14px; line-height: 1.45; color: #dfe3e7; max-width: 26em; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.gc-wi .gc-mtile:hover p, .gc-wi .gc-mtile:focus-within p { opacity: 1; transform: none; }
.gc-wi .gc-mtile-big { grid-column: span 2; grid-row: span 2; min-height: 640px; }
.gc-wi .gc-mtile-wide { grid-column: span 2; }

.gc-wi.gc-wi-steelband { background: var(--aw-steel); padding: 28px; --gc-ink: #fff; --gc-head: #fff; --gc-text: #dfe3e7; }
.gc-wi .gc-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(127,140,152,.35); }
.gc-wi .gc-bar > * + * { margin-top: 0 !important; }
.gc-wi .gc-bar h2 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; }
.gc-wi .gc-bar p { font-size: 13px; white-space: nowrap; }
.gc-wi-steelband > * + * { margin-top: 22px !important; }
.gc-wi-steelband .gc-wide img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.gc-wi-steelband .gc-caprow { gap: 24px; }
.gc-wi-steelband .gc-caprow p { font-size: 14px; max-width: 34em; }

.gc-wi.gc-wi-news { padding: 56px 28px 64px; }
.gc-wi-news > * + * { margin-top: 28px !important; }
.gc-wi .gc-newslead { gap: 48px; }
.gc-wi .gc-newslead h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.15; }
.gc-wi .gc-newslead img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gc-wi .gc-date { font-size: 13px !important; color: #6b7682 !important; }
.gc-wi-news .wp-block-query { border-top: 1px solid var(--aw-rule); padding-top: 24px; }
.gc-wi-news .wp-block-post-template { gap: 28px; }
.gc-wi-news .wp-block-query .wp-block-post { background: none; border: 0; box-shadow: none; padding: 0; }
.gc-wi-news .wp-block-post-template > li > * { padding-left: 0 !important; padding-right: 0 !important; }
.gc-wi-news .wp-block-post-title { font-size: 18px; font-weight: 500; line-height: 1.3; }
.gc-wi-news .wp-block-post-title a { text-decoration: none; color: var(--aw-ink); }
.gc-wi-news .wp-block-post-date { font-size: 13px; color: #6b7682; }

.gc-wi.gc-panels { padding: 0; }
.gc-wi.gc-panels > .wp-block-columns { gap: 0; }
.gc-wi .gc-panel { padding: 28px 28px 34px; height: 100%; --gc-ink: #fff; --gc-head: #fff; --gc-text: #e6eaee; color: #fff; }
.gc-wi .gc-panel-olive { background: var(--aw-olive); }
.gc-wi .gc-panel-navy { background: var(--aw-navy); }
.gc-wi .gc-panel > * + * { margin-top: 20px !important; }
.gc-wi .gc-panel figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gc-wi .gc-panel p { font-size: 16px; max-width: 32em; }

@media (prefers-reduced-motion: reduce) { .gc-wi .gc-mtile > figure img, .gc-wi .gc-mtile p { transition: none; } }
@media (max-width: 1000px) {
  .gc-wi .gc-mosaic { grid-template-columns: 1fr 1fr; }
  .gc-wi .gc-mtile-big { grid-row: auto; min-height: 440px; }
  .gc-wi .gc-mtile p { opacity: 1; transform: none; }
  .gc-wi .gc-mtile::after { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%); }
}
@media (max-width: 781px) {
  .gc-wi .gc-film-copy { padding: 0 20px 28px; gap: 18px; }
  .gc-wi .gc-film-copy h1 { font-size: clamp(34px, 10vw, 44px); }
  .gc-wi.gc-wi-frame { padding: 10px; }
  .gc-wi .gc-mosaic { grid-template-columns: 1fr; gap: 10px; }
  .gc-wi .gc-mtile-big, .gc-wi .gc-mtile-wide { grid-column: auto; }
  .gc-wi .gc-mtile { min-height: 320px; }
  .gc-wi-steelband .gc-wide img { aspect-ratio: 16 / 9; }
}
.editor-styles-wrapper .gc-wi .gc-film { min-height: 520px !important; }
.editor-styles-wrapper .gc-wi .gc-mtile p { opacity: 1; transform: none; }


/* =========================================================================
   19. FILM WITH ITS OWN GRAPHICS  (home-3, 2026-10-02)
   The hero film now carries its own on-screen graphics and step text, so
   nothing is laid over it: the video shows full width at 16:9 and the
   headline, intro and buttons sit in the black band underneath.
   Content is unchanged; this only re-flows the Cover block.
   ========================================================================= */
.gc-wi .gc-film { display: flex; flex-direction: column; min-height: 0 !important; background: #050607; }
.gc-wi .gc-film::after { display: none; }
.gc-wi .gc-film .wp-block-cover__video-background { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gc-wi .gc-film .wp-block-cover__background { display: none; }
.gc-wi .gc-film .wp-block-cover__inner-container { position: relative; }
.gc-wi .gc-film-copy { padding: 36px 40px 40px; }
@media (max-width: 781px) { .gc-wi .gc-film-copy { padding: 24px 16px 28px; } }


/* =========================================================================
   20. HOME PAGE FILM + ANIMATION  (2026-10-02 meeting)
     .gc-film-cap  Section (frame): caps the hero film's height so the
                   headline band below it shows without scrolling. The whole
                   video stays visible (contain), centred on black.
     .gc-anim      Video block: the truck-to-cloud animation, autoplaying
                   and looping in a content column.
   ========================================================================= */
/* Full width like home-3, but never cropped and never full height.
   The film always shows whole (16:9) at up to 70vh / 980px tall. When the
   screen is wider than that, the sides are filled with a blurred, darkened
   still of the same footage, so the band still reads full width. */
.gc-wi.gc-film-cap .gc-film { position: relative; }
.gc-wi.gc-film-cap .gc-film::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: min(70vh, 980px, 56.25vw);
  background: url(/wp-content/uploads/2026/10/aw-home3-hero-poster.jpg) center / cover;
  filter: blur(28px) brightness(.45); transform: scale(1.08);
}
.gc-wi.gc-film-cap .gc-film { overflow: hidden; }
.gc-wi.gc-film-cap .gc-film .wp-block-cover__video-background {
  position: relative; z-index: 1;
  width: auto; max-width: 100%; height: min(70vh, 980px); aspect-ratio: 16 / 9;
  margin: 0 auto; object-fit: contain;
}
@media (max-width: 781px) {
  .gc-wi.gc-film-cap .gc-film .wp-block-cover__video-background { width: 100%; height: auto; }
}
.gc-wi.gc-film-cap .gc-film-copy { padding-top: 28px; padding-bottom: 32px; align-items: center !important; }
.gc-wi.gc-film-cap .gc-film-copy > .wp-block-column { align-self: center !important; }   /* buttons centred on the headline */
.gc-wi.gc-film-cap .gc-film-copy h1 { font-size: clamp(36px, 3.6vw, 60px); }
@media (max-width: 781px) {
  .gc-wi.gc-film-cap .gc-film .wp-block-cover__video-background { height: auto; aspect-ratio: 16 / 9; }
}
.gc-wi .gc-anim { margin: 0; background: #07090b; }
.gc-wi .gc-anim video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }