/* ==========================================================================
   Good With Inside - site stylesheet
   Loaded only by the Good With Inside theme (goodwith-inside).

   HOW THIS FILE IS ORGANISED
     1. Settings ........ colours, fonts, sizes and spacing as variables
     2. Base & layout ... page defaults, containers, sections, backgrounds
     3. Components ...... one block per part of the page; each one keeps its
                          own phone/tablet rules directly underneath it
          3.1 Buttons        3.7  Quote card       3.13 Radar chart
          3.2 Header         3.8  Stats            3.14 Collage
          3.3 Hero           3.9  Cards            3.15 Videos
          3.4 Slideshow      3.10 Team             3.16 Sign-up popup
          3.5 Logo strip     3.11 Lens cards       3.17 Password page
          3.6 Logo grid      3.12 Footer
     4. Utilities ....... small helper classes you can add to any block
     5. Editor .......... tweaks that only apply inside the WordPress editor
   Search for a heading such as "3.7" to jump straight to it.

   HOW EDITING MAPS ONTO THIS FILE
   - Colours: Site Editor -> Styles -> Colors -> Palette. Sizes, spacing, images: Appearance -> Design settings.
   - Section "Background": a gradient from Styles -> Colors -> Gradients (as --gw-bg), or a solid colour (--section-bg).
   - Section "Padding" / "Width" / "Divider" options add the matching class.
   - Anything else: edit this file, or use WordPress's Additional CSS box.

   SIZES
   Sizes are written as calc(Npx * var(--gw-s)) so they follow the "Site size"
   setting. To change a size, change the N and leave the rest.

   BREAKPOINTS (CSS can't use variables in media queries, so they're written out)
     1100px  logo strip stacks under its label
      800px  phone layout: single-column stats, smaller site size
      781px  WordPress Columns blocks stack (lens cards)
      600px  small phones: team goes two per row
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS
   ========================================================================== */

:root {
  /* Site size (Appearance -> Design settings): 1 = sizes exactly as written in this file (the design).
     Phones use 88% of it for component sizes (see the phone block below). */
  --gw-scale: 1;
  --gw-s: var(--gw-scale);

  /* Brand colours: edit them in Site Editor -> Styles -> Colors -> Palette (the hex here is only a fallback) */
  --gw-ink: var(--wp--preset--color--ink, #0a0a0a);
  --gw-ink-soft: #2a2a2a;
  /* Buttons: primary / secondary / tertiary, each with rest, hover and pressed colours */
  --gw-accent: var(--wp--preset--color--accent, #00dc72);          /* green: primary at rest, secondary while pressing */
  --gw-accent-ink: var(--wp--preset--color--accent-ink, #0a0a0a);      /* text on buttons */
  --gw-accent-hover: var(--wp--preset--color--accent-hover, #c8f7dc);    /* mint: primary + tertiary on hover */
  --gw-accent-active: var(--wp--preset--color--accent-active, #d3ed3c);   /* Dark lime (brand): primary + tertiary while pressing, secondary at rest */
  --gw-lime-hover: var(--wp--preset--color--lime-hover, #eef59a);      /* pale lime: secondary on hover */
  --gw-secondary-bg: #ffffff;    /* tertiary (white) at rest */
  --gw-line: var(--wp--preset--color--line, #2b2b2b);            /* section dividers, card borders */
  --gw-card-bg: var(--wp--preset--color--card, #ffffff);

  /* Gradient palette (used by the section backgrounds in part 2) */
  --gw-mint: var(--wp--preset--color--mint, #8fe6a4);
  --gw-green: var(--wp--preset--color--green, #6fdc86);
  --gw-lime: var(--wp--preset--color--lime, #e6f5a3);
  --gw-butter: var(--wp--preset--color--butter, #f6f7c8);
  --gw-cream: var(--wp--preset--color--cream, #fbfdf1);
  --gw-aqua: var(--wp--preset--color--aqua, #c9f3de);

  /* Type: the font and text sizes are set in Site Editor -> Styles -> Typography (theme.json font sizes:
     a desktop size and a phone size each, scaling smoothly in between). These names point at those settings. */
  --gw-font: var(--wp--preset--font-family--helvetica, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --gw-hero-title: var(--wp--preset--font-size--hero);   /* 46px */
  --gw-title: var(--wp--preset--font-size--title);        /* 40px - H1 + H2 */
  --gw-subtitle: var(--wp--preset--font-size--subtitle);  /* 28px - H3 + bold intro lines (.gw-lead) */
  --gw-text-xl: var(--wp--preset--font-size--x-large);    /* 22px - hero paragraph + "Explore..." line */
  --gw-text-lg: var(--wp--preset--font-size--large);      /* 22px - body text beside a visual */
  --gw-body: var(--wp--preset--font-size--medium);        /* 18px - body text (all paragraphs) */
  /* Titles inside components also use named sizes from Styles: card-title, lens-title, name, name-lg, stat */

  /* Shape & rhythm */
  --gw-radius: calc(27.5px * var(--gw-s));
  --gw-radius-sm: calc(17.5px * var(--gw-s));
  /* Content widths: Site Editor -> Styles -> Layout (theme.json) */
  --gw-container: var(--wp--style--global--content-size, 928px);   /* content width: theme.json settings.layout.contentSize */
  --gw-container-wide: var(--wp--style--global--wide-size, 1350px);
  --gw-gutter: calc(25px * var(--gw-s));
  --gw-pad-sm: calc(60px * var(--gw-s));     /* section padding: small */
  --gw-pad-md: calc(100px * var(--gw-s));     /* section padding: default */
  --gw-pad-lg: calc(160px * var(--gw-s));    /* section padding: large */

  /* Dot grids (quote card, collage). Desktop sizes in the comments. */
  --gw-dot-size: calc(2.4px * var(--gw-s));  /* = 2.4px dot */
  --gw-dot-gap: calc(12px * var(--gw-s));    /* = 12px gap between dots */
  --gw-dot-pitch: calc(var(--gw-dot-size) + var(--gw-dot-gap));
  --gw-dot-color: var(--gw-ink);
  --gw-dots: radial-gradient(circle at calc(var(--gw-dot-size) / 2) calc(var(--gw-dot-size) / 2), var(--gw-dot-color) calc(var(--gw-dot-size) / 2 - .3px), transparent calc(var(--gw-dot-size) / 2 + .3px)) 0 0 / var(--gw-dot-pitch) var(--gw-dot-pitch);
}

/* Phones: gentler site size and less section padding */
@media (max-width: 800px) {
  :root {
    --gw-s: calc(var(--gw-scale) * .88);
    --gw-pad-md: calc(80px * var(--gw-s));
    --gw-pad-lg: calc(110px * var(--gw-s));
  }
}


/* ==========================================================================
   2. BASE & LAYOUT
   ========================================================================== */

/* ---------- 2.1 Page defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Page colours, font, text size and heading styles come from Site Editor -> Styles (theme.json) */
.gw-site { margin: 0; -webkit-font-smoothing: antialiased; }
.gw-site img { max-width: 100%; height: auto; display: block; }
.gw-site a:not(.wp-element-button) { color: inherit; }   /* buttons keep their own text colour (Styles -> Button) */
.gw-site :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 .5em; }
.gw-site p { margin: 0 0 1em; }
.gw-site p:last-child { margin-bottom: 0; }
/* In-page links (e.g. the lens cards' "Learn more") glide to their section; headings stop clear of a sticky header */
html:has(.gw-site) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.gw-site) { scroll-behavior: auto; } }
.gw-site [id] { scroll-margin-top: calc(30px * var(--gw-s)); }
.gw-site:has(.gw-header--sticky, .gw-header--fixed) [id] { scroll-margin-top: calc(137.5px * var(--gw-s)); }

/* ---------- 2.2 Containers (section "Width" option) ---------- */
.gw-container { width: 100%; max-width: calc(var(--gw-container) + var(--gw-gutter) * 2); margin: 0 auto; padding: 0 var(--gw-gutter); }
.gw-width--wide { --gw-container: var(--gw-container-wide); }
.gw-width--narrow { --gw-container: calc(700px * var(--gw-s)); }
.gw-width--full .gw-container { max-width: none; }

/* ---------- 2.3 Sections ---------- */
.gw-section { position: relative; padding: var(--gw-pad-md) 0; background: var(--section-bg, transparent); overflow: hidden;
  display: flex; flex-direction: column; justify-content: var(--gw-y, center); min-height: var(--gw-min-h, 0); background-position: var(--gw-bg-pos, center); }
.gw-section > .gw-container { width: 100%; }
/* Layers: background overlay (::before) under the content */
.gw-section::before { z-index: 1; }
.gw-section > .gw-container { position: relative; z-index: 2; }
/* Section layout controls: text width + horizontal position of the content */
.gw-stack > * { max-width: var(--gw-text-w, none); }
.gw-x--center .gw-stack > * { margin-left: auto; margin-right: auto; }
.gw-x--right .gw-stack > * { margin-left: auto; margin-right: 0; }
/* Section "Padding" option */
.gw-pad--none { padding: 0; }
.gw-pad--xs { padding: calc(17.5px * var(--gw-s)) 0; }
.gw-pad--sm { padding: var(--gw-pad-sm) 0; }
.gw-pad--lg { padding: var(--gw-pad-lg) 0; }
/* Section "Divider line above / below" and "Alignment" options */
.gw-divider { border-top: 1px solid #000; }
.gw-divider--below { border-bottom: 1px solid #000; }
/* Every section is separated from the one before it by a black line */
.gw-section + .gw-section { border-top: 1px solid #000; }
.gw-divider--below + .gw-section { border-top: 0; }   /* the line below already separates them (no double line) */
.gw-align--center { text-align: center; }

/* ---------- 2.4 Section backgrounds ----------
   The gradient presets (Cream, Mint, Meadow, Lime, Spring, Journey, Breeze, Sky) live in
   Site Editor -> Styles -> Colors -> Gradients (theme.json). A section's "Background" picks one by name
   and gets it as --gw-bg; any gradient added in Styles shows up in the section's list too. */
.gw-bg--white { background: #fff; }
.gw-section[style*="--gw-bg:"] { background: var(--gw-bg); }

/* A solid colour picked for a section always beats its gradient preset */
.gw-section[style*="--section-bg"] { background: var(--section-bg); }

/* Custom gradient: 3 colours chosen per section + a style */
.gw-bg--custom { --gw-g1: var(--gw-mint); --gw-g2: var(--gw-lime); --gw-g3: var(--gw-cream); }
.gw-bg--custom, .gw-bg--custom.gw-grad--corner { background:
    radial-gradient(55% 75% at 100% 0%, var(--gw-g1) 0%, transparent 70%),
    radial-gradient(50% 75% at 0% 100%, var(--gw-g2) 0%, transparent 70%),
    var(--gw-g3); }
.gw-bg--custom.gw-grad--horizontal { background: linear-gradient(90deg, var(--gw-g1), var(--gw-g2) 50%, var(--gw-g3)); }
.gw-bg--custom.gw-grad--vertical { background: linear-gradient(180deg, var(--gw-g1), var(--gw-g2) 50%, var(--gw-g3)); }
.gw-bg--custom.gw-grad--blobs { background:
    radial-gradient(35% 55% at 0% 55%, var(--gw-g1) 0%, transparent 75%),
    radial-gradient(45% 60% at 100% 10%, var(--gw-g2) 0%, transparent 70%),
    var(--gw-g3); }
.gw-bg--custom.gw-grad--center { background: radial-gradient(60% 70% at 50% 50%, var(--gw-g1) 0%, var(--gw-g2) 55%, var(--gw-g3) 100%); }

/* Slowly "morphing" gradients, CSS only. The gradient is drawn larger than the section and its size and position
   are animated, so the colour patches drift and stretch smoothly. A larger-than-the-box background with a 0-100%
   position always covers the section, so no edge can ever show. A mirrored copy on top (::after) moves the other
   way and fades in and out, so the patches seem to change shape. Solid-colour, photo and hero sections stay still.
   --gw-bg-speed sets how long one drift takes. isolation keeps the copy (z-index -1) beneath all section content. */
.gw-section { isolation: isolate; --gw-bg-speed: 10s; --gw-bg-delay: 0s; }
:is(.gw-section[style*="--gw-bg:"], .gw-bg--custom):not(.gw-hero, [style*="--section-bg"], [style*="background-image"]) {
  background-repeat: no-repeat; background-size: 150% 150%; background-position: 0% 0%;
  animation: gw-bg-pan var(--gw-bg-speed) ease-in-out var(--gw-bg-delay) infinite alternate; }
:is(.gw-section[style*="--gw-bg:"], .gw-bg--custom):not(.gw-hero, [style*="--section-bg"], [style*="background-image"])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: inherit; transform: scaleX(-1); opacity: 0;
  animation: gw-bg-pan var(--gw-bg-speed) ease-in-out calc(var(--gw-bg-delay) - var(--gw-bg-speed) * .6) infinite alternate-reverse,
             gw-bg-fade calc(var(--gw-bg-speed) * 1.3) ease-in-out var(--gw-bg-delay) infinite alternate; }
/* Neighbouring sections drift out of step with each other */
.gw-section:nth-of-type(2n) { --gw-bg-delay: calc(var(--gw-bg-speed) * -.4); }
.gw-section:nth-of-type(3n) { --gw-bg-delay: calc(var(--gw-bg-speed) * -.75); }
@keyframes gw-bg-pan {
  0%   { background-size: 150% 150%; background-position: 0% 0%; }
  33%  { background-size: 175% 140%; background-position: 100% 30%; }
  66%  { background-size: 140% 180%; background-position: 40% 100%; }
  100% { background-size: 165% 160%; background-position: 80% 70%; }
}
@keyframes gw-bg-fade { 0% { opacity: 0; } 100% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .gw-section, .gw-section::after { animation: none !important; }
  .gw-section::after { opacity: 0 !important; }
}

/* ---------- 2.5 Stacking blocks inside a section or column ---------- */
.gw-stack > * + * { margin-top: calc(25px * var(--gw-s)); }
.gw-measure { max-width: calc(612.5px * var(--gw-s)); }   /* comfortable line length for intro paragraphs (about 610px) */
/* Body text beside a visual: 22px, regular, full column width */
.gw-site .wp-block-column:not(.gw-lens, .gw-card .wp-block-column) > p:not(.gw-lead) { font-size: var(--gw-body); font-weight: 400; line-height: normal; max-width: none; }
.gw-align--center .gw-measure { margin-left: auto; margin-right: auto; }
/* Call-to-action blocks (heading -> intro paragraph -> button): a little more air between the three */
.gw-stack > .wp-block-heading + .gw-measure { margin-top: calc(35px * var(--gw-s)); }
.gw-stack > .gw-measure + .wp-block-buttons { margin-top: calc(45px * var(--gw-s)); }


/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* ---------- 3.1 Buttons: hover ----------
   Hover and click only change the background colour (colours are in Styles -> Blocks -> Button and style.css).
   No shadow and no movement. */
.gw-site :is(.wp-block-button__link, .gw-header .wp-block-navigation-item__content, .wpcf7-submit, .gw-password button) {
  box-shadow: none; transform: none; transition: background-color .15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .gw-site :is(.wp-block-button__link, .gw-header .wp-block-navigation-item__content, .wpcf7-submit, .gw-password button) { transition: none; }
}

/* ---------- 3.2 Header ---------- */
.gw-header { position: absolute; inset: 0 0 auto 0; z-index: 10; padding: calc(47.5px * var(--gw-s)) 0 0; }
.gw-header .gw-container { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(20px * var(--gw-s)); max-width: calc(var(--gw-container) + var(--gw-gutter) * 2); }

/* Header options (Site Editor -> Header -> Header layout) */
.gw-header--wide .gw-container { max-width: calc(var(--gw-container-wide) + var(--gw-gutter) * 2) !important; }
.gw-header--full .gw-container { max-width: none !important; }
.gw-header--fixed { position: fixed; }
.gw-header--static { position: relative; padding: calc(25px * var(--gw-s)) 0; }
.gw-header--sticky { position: sticky; top: 0; padding: calc(17.5px * var(--gw-s)) 0; }
.gw-header--fixed.gw-header--scrolled, .gw-header--sticky { transition: padding .2s, background .2s; }
.gw-header--fixed.gw-header--scrolled { padding: calc(15px * var(--gw-s)) 0; }
.gw-header--bg-white { background: #fff; border-bottom: 1px solid var(--gw-line); }
.gw-header--bg-blur { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(calc(15px * var(--gw-s))); backdrop-filter: blur(calc(15px * var(--gw-s))); border-bottom: 1px solid rgba(0,0,0,.08); }
.gw-header--bg-scroll.gw-header--scrolled { background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(calc(15px * var(--gw-s))); backdrop-filter: blur(calc(15px * var(--gw-s))); border-bottom: 1px solid rgba(0,0,0,.08); }
.gw-header--centered .gw-container { flex-direction: column; align-items: center; gap: calc(17.5px * var(--gw-s)); }
.gw-header--stacked .gw-container { flex-direction: column; align-items: flex-start; gap: calc(17.5px * var(--gw-s)); }
/* When the header isn't overlaid, the first hero doesn't need room for it */
.gw-header--static ~ main > .gw-hero:first-child, .gw-header--sticky ~ main > .gw-hero:first-child { padding-top: calc(130px * var(--gw-s)); }

@media (max-width: 800px) {
  .gw-header .gw-container { flex-wrap: wrap; align-items: center; }
}

/* ---------- 3.3 Hero ---------- */
.gw-hero { --gw-min-h: calc(700px * var(--gw-s)); --gw-y: flex-end; --gw-text-w: calc(680px * var(--gw-s));   /* text column width: 680px */ padding: calc(250px * var(--gw-s)) 0 calc(130px * var(--gw-s)); color: #fff; background: #bbb no-repeat; background-size: cover; background-position: var(--gw-bg-pos, center); background-image: var(--hero-img); }
/* Darkening over the photo so the white text reads (section "Darken" option sets --gw-overlay) */
.gw-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,var(--gw-overlay, .28)) 0%, rgba(0,0,0,calc(var(--gw-overlay, .28) * .45)) 50%, rgba(0,0,0,0) 75%); pointer-events: none; }
.gw-hero.gw-x--center::before, .gw-hero.gw-x--right::before { background: rgba(0,0,0,var(--gw-overlay, .28)); }
.gw-overlay--none::before { display: none; }
.gw-hero .gw-container { position: relative; }
/* Hero type: title 46px, subtitle 28px bold, paragraph 22px, "Explore..." line 22px bold */
.gw-hero h1 { font-size: var(--gw-hero-title); line-height: normal; }
.gw-hero p:has(> strong:only-child) { font-size: var(--gw-text-xl); margin-top: calc(27.5px * var(--gw-s)); }
/* Hero buttons sit 10px apart (their larger size is set on each button: Typography and Dimensions) */
.gw-site .gw-hero .wp-block-buttons { gap: calc(10px * var(--gw-s)); }
/* Second line under the hero title */
.gw-hero h2 { font-size: var(--gw-subtitle); line-height: normal; }
.gw-hero h1 + h2 { margin-top: calc(7.5px * var(--gw-s)); }
.gw-hero h2 + p { margin-top: calc(12.5px * var(--gw-s)); }
/* Hero paragraph: 22px, regular */
.gw-hero p:not(:has(strong:only-child)) { font-size: var(--gw-text-xl); font-weight: 400; line-height: 1.18; }
/* Hand-drawn underline under the italic word (e.g. "transform"). Replace it in Appearance -> Design settings -> Images. */
/* It draws itself in from the left once the page has loaded (revealed, not stretched). */
.gw-hero h2 em { position: relative; isolation: isolate; padding: 0 .08em .16em; margin: 0 -.08em; }
.gw-hero h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .3em; z-index: -1; pointer-events: none;
  background: var(--gw-swoosh, url(../img/swoosh.svg)) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: gw-swoosh .9s cubic-bezier(.6, 0, .3, 1) .6s forwards; }
@keyframes gw-swoosh { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .gw-hero h2 em::after { animation: none; clip-path: none; } }
/* Soft shadow under the hero text, so white text stays readable wherever it lands on the photo
   (bright walls, light clothing) on any screen size. Set --gw-hero-shadow: none to turn it off. */
.gw-hero { --gw-hero-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.35); }
.gw-hero :is(h1, h2, h3, p) { text-shadow: var(--gw-hero-shadow); }
/* The "Explore..." line has its own softer shadow from the design */
.gw-hero p:has(> strong:only-child) { text-shadow: 0 4px 24px rgba(0,0,0,.25); }
@media (max-width: 800px) {
  .gw-hero { padding-top: calc(237.5px * var(--gw-s)); min-height: 0; }
  .gw-hero::before { background: rgba(0,0,0,.35); }
}

/* ---------- 3.4 Slideshow (<gw-slides>, assets/js/gw.js) ---------- */
.gw-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: block; }
.gw-slide { position: absolute; inset: 0; background-size: cover; background-position: var(--gw-bg-pos, center); opacity: 0; transition: opacity 1.2s ease, transform 1s ease; }
.gw-slide.is-active { opacity: 1; }
.gw-slides--slide .gw-slide { opacity: 1; transform: translateX(100%); }
.gw-slides--slide .gw-slide.is-active { transform: translateX(0); }
.gw-slides--slide .gw-slide.is-leaving { transform: translateX(-100%); }
.gw-slides--slide .gw-slide:not(.is-active):not(.is-leaving) { transition: none; }
.gw-slides--zoom .gw-slide.is-active { animation: gw-kenburns calc(var(--gw-slide-speed, 6s) + 1.2s) linear both; }
@keyframes gw-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.gw-slide-dots { position: absolute; z-index: 3; left: 50%; bottom: calc(25px * var(--gw-s)); transform: translateX(-50%); display: flex; gap: calc(12.5px * var(--gw-s)); }
.gw-slide-dots button { width: calc(13.75px * var(--gw-s)); height: calc(13.75px * var(--gw-s)); padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.gw-slide-dots button[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .gw-slide { transition: none; animation: none !important; } }

/* ---------- 3.5 Logo strip ("Trusted by", under the hero) ---------- */
/* Logo heights come from the block's "Logo height" setting (--gw-logo-h) */
.gw-logostrip { display: flex; align-items: center; gap: calc(35px * var(--gw-s)); }
.gw-logostrip__label { font-weight: 700; font-size: var(--gw-body);   /* 18px, same as body text */ white-space: nowrap; }
.gw-logostrip__list { display: flex; align-items: center; justify-content: space-between; gap: calc(30px * var(--gw-s)); flex: 1; overflow-x: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: none; }
.gw-logostrip__list img { height: var(--gw-logo-h, calc(55px * var(--gw-s))); width: auto; max-width: none; mix-blend-mode: multiply; }

/* Scrolling style (marquee): the list is rendered twice and slides left forever.
   Speed comes from the block's "Scroll speed" setting (--gw-marquee-speed). */
.gw-marquee { flex: 1; min-width: 0; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gw-marquee__track { display: flex; width: max-content; animation: gw-marquee var(--gw-marquee-speed, 40s) linear infinite; }
.gw-marquee:hover .gw-marquee__track { animation-play-state: paused; }
.gw-marquee__list { display: flex; flex: none; align-items: center; gap: calc(60px * var(--gw-s)); margin: 0; padding: 0 calc(30px * var(--gw-s)); list-style: none; }
.gw-marquee__list img { height: var(--gw-logo-h, calc(55px * var(--gw-s))); width: auto; max-width: none; mix-blend-mode: multiply; }
@keyframes gw-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gw-marquee { -webkit-mask-image: none; mask-image: none; }
  .gw-marquee__track { animation: none; width: auto; }
  .gw-marquee__list { flex-wrap: wrap; justify-content: center; gap: calc(17.5px * var(--gw-s)) calc(32.5px * var(--gw-s)); }
  .gw-marquee__list[aria-hidden] { display: none; }
}
/* Tablets: label above the logos */
@media (max-width: 1100px) {
  .gw-logostrip { flex-direction: column; align-items: center; gap: calc(15px * var(--gw-s)); }
  .gw-logostrip__list { width: 100%; flex-wrap: wrap; justify-content: center; gap: calc(17.5px * var(--gw-s)) calc(32.5px * var(--gw-s)); overflow: visible; }
}
/* Phones: slightly smaller logos */
@media (max-width: 800px) {
  .gw-logostrip__list img, .gw-marquee__list img { height: calc(var(--gw-logo-h, calc(55px * var(--gw-s))) * .78); }
  .gw-marquee__list { gap: calc(40px * var(--gw-s)); padding: 0 calc(20px * var(--gw-s)); }
}

/* ---------- 3.6 Logo grid ("Supported by", advisors/investors) ---------- */
.gw-logogrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(45px * var(--gw-s)) calc(37.5px * var(--gw-s)); margin: calc(40px * var(--gw-s)) auto 0; padding: 0; list-style: none; max-width: calc(875px * var(--gw-s)); }
.gw-logogrid img { height: var(--gw-logo-h, calc(32.5px * var(--gw-s))); width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Even columns so logos line up (counting logos only, so the editor's extra buttons don't change it): 6 logos -> one row of 6, 8 logos -> two rows of 4 (each logo centred in its cell) */
.gw-logogrid:has(> figure:nth-of-type(6):last-of-type), .gw-logogrid:has(> figure:nth-of-type(8):last-of-type) { display: grid; justify-items: center; align-items: center; }
.gw-logogrid:has(> figure:nth-of-type(6):last-of-type) { grid-template-columns: repeat(6, 1fr); max-width: calc(1300px * var(--gw-s)); margin-top: calc(100px * var(--gw-s)); }
/* Advisor logos (6): each sits in a 150 x 72 box (scaled to fit, never squashed) */
.gw-logogrid:has(> figure:nth-of-type(6):last-of-type) img { width: calc(187.5px * var(--gw-s)); height: calc(90px * var(--gw-s)); object-fit: contain; }
.gw-logogrid:has(> figure:nth-of-type(8):last-of-type) { grid-template-columns: repeat(4, 1fr); max-width: calc(650px * var(--gw-s)); gap: calc(50px * var(--gw-s)) calc(40px * var(--gw-s)); margin-top: calc(60px * var(--gw-s)); }
/* "Supported by" logos (8): smaller than the advisor row */
.gw-logogrid:has(> figure:nth-of-type(8):last-of-type) img { height: calc(var(--gw-logo-h, calc(32.5px * var(--gw-s))) * .68); }
.gw-logogrid > * { margin: 0 !important; }
/* Editor: the "add block" button sits on its own row instead of taking a logo's place */
.gw-logogrid > .block-list-appender { grid-column: 1 / -1; justify-self: center; }
/* A heading placed just before a logo grid (e.g. "Supported by credit domain...") gets space above it */
.gw-stack > * + .wp-block-heading:has(+ .gw-logogrid) { margin-top: calc(110px * var(--gw-s)); }
/* Phones: smaller logos and tighter rows, so more fit per row */
@media (max-width: 600px) {
  .gw-logogrid { gap: calc(22.5px * var(--gw-s)) calc(27.5px * var(--gw-s)); margin-top: calc(27.5px * var(--gw-s)); }
  .gw-logogrid img { height: calc(var(--gw-logo-h, calc(32.5px * var(--gw-s))) * .7); }
  .gw-logogrid:has(> figure:nth-of-type(6):last-of-type) { grid-template-columns: repeat(3, 1fr); margin-top: calc(45px * var(--gw-s)); }
  .gw-stack > * + .wp-block-heading:has(+ .gw-logogrid) { margin-top: calc(70px * var(--gw-s)); }
  .gw-logogrid:has(> figure:nth-of-type(8):last-of-type) { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 3.7 Quote card ("Voice of the customer") ----------
   The photo sits lower-left, tucked under the card's bottom-left corner.
   Its frame, outline and corners are CSS; any photo fills the frame (WordPress renders it as a background).
   Block options add: --photo-right, --no-photo, --no-dots, --no-mark. */
.gw-quote { display: block; max-width: calc(797px * var(--gw-s)); min-height: calc(490px * var(--gw-s)); margin: 0 auto; position: relative; }
/* Photo: portrait 275 x 355 by default (wide 375 x 327), 135px below the card's top, tucked under its left edge */
.gw-quote__media { position: absolute; left: 0; top: var(--gw-quote-photo-top, calc(135px * var(--gw-s))); z-index: 1; }
.gw-quote__media img, .gw-quote__photo { display: block; width: var(--gw-quote-photo-w, calc(275px * var(--gw-s))); aspect-ratio: 275 / 355; object-fit: cover; background: center / cover no-repeat; border-radius: var(--gw-radius) 0 var(--gw-radius) var(--gw-radius); border: 1px solid var(--gw-line); }
.gw-quote__card { margin-left: calc(231px * var(--gw-s)); max-width: calc(566px * var(--gw-s)); position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: calc(16px * var(--gw-s)); padding: calc(32px * var(--gw-s)); border: 1px solid #000; border-radius: calc(32px * var(--gw-s)); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gw-quote__card > * { margin: 0; }
.gw-quote__card .gw-quote__cite { align-self: stretch; }
.gw-quote__mark { display: block; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: calc(137.5px * var(--gw-s)); line-height: .75; height: calc(60px * var(--gw-s)); margin: calc(5px * var(--gw-s)) 0 calc(2px * var(--gw-s)); letter-spacing: -.04em; }
.gw-quote blockquote { margin: 0; font-size: calc(21.25px * var(--gw-s)); line-height: 1.17; }
.gw-quote blockquote p { margin-bottom: 1.15em; }
.gw-quote__cite { margin-top: calc(3px * var(--gw-s)); text-align: right; font-style: italic; font-size: calc(18.75px * var(--gw-s)); }
/* Dot grids (also reusable elsewhere as .gw-dots). Size is set in whole dots: --cols x --rows (default 6 x 6). */
.gw-dots { --cols: 6; --rows: 6; position: absolute; z-index: 0; background: var(--gw-dots);
  width: calc(var(--gw-dot-pitch) * var(--cols) - var(--gw-dot-gap)); height: calc(var(--gw-dot-pitch) * var(--rows) - var(--gw-dot-gap)); }
/* Top grid: above the photo, running under the card. Bottom grid: just below the card, right of the photo.
   The bottom grid lives inside the card (top: 100%), so it stays fully visible however tall the quote is. */
.gw-quote .gw-dots--a { --cols: 6; --rows: 6; left: calc(143px * var(--gw-s)); top: calc(45px * var(--gw-s)); }
.gw-quote .gw-dots--b { --cols: 12; --rows: 6; left: calc(54px * var(--gw-s)); top: calc(100% + 7.5px * var(--gw-s)); }
/* Block options */
.gw-quote--no-dots .gw-dots, .gw-quote--no-mark .gw-quote__mark { display: none; }
.gw-quote--photo-right .gw-quote__media { left: auto; right: 0; }
.gw-quote--photo-right .gw-quote__media img, .gw-quote--photo-right .gw-quote__photo { border-radius: 0 var(--gw-radius) var(--gw-radius) var(--gw-radius); }
.gw-quote--photo-right .gw-quote__card { margin-left: 0; margin-right: calc(231px * var(--gw-s)); }
.gw-quote--photo-right .gw-dots--a { left: auto; right: calc(143px * var(--gw-s)); }
.gw-quote--photo-right .gw-dots--b { left: auto; right: calc(54px * var(--gw-s)); }
/* Wide photo option (quote block -> Photo shape -> Wide): landscape frame that sits lower, with a 10 x 6 dot grid above it */
.gw-quote--wide .gw-quote__media img, .gw-quote--wide .gw-quote__photo { width: var(--gw-quote-photo-w, calc(375px * var(--gw-s))); aspect-ratio: 375 / 327; }
.gw-quote--wide { min-height: calc(595px * var(--gw-s)); }
.gw-quote--wide .gw-quote__media { top: var(--gw-quote-photo-top, calc(268px * var(--gw-s))); }
.gw-quote--wide .gw-dots--a { --cols: 10; left: calc(84px * var(--gw-s)); top: calc(180px * var(--gw-s)); }
.gw-quote--wide .gw-dots--b { left: calc(165px * var(--gw-s)); top: calc(100% + 10px * var(--gw-s)); }
.gw-quote--wide.gw-quote--photo-right .gw-dots--a { left: auto; right: calc(84px * var(--gw-s)); }
.gw-quote--wide.gw-quote--photo-right .gw-dots--b { left: auto; right: calc(165px * var(--gw-s)); }
.gw-quote--no-photo { min-height: 0; }
.gw-quote--no-photo .gw-quote__card { margin: 0; }
/* Phones: the card on top and the photo below it, overlapping the card's bottom-left corner by 20px (only its padding, never the text) (bottom-right with
   Photo side -> Right), a 14 x 3 dot grid just above the card and a 14 x 6 grid just below it on the other side.
   The photo is in the flow, so a longer quote pushes it down. Desktop keeps the photo beside the card. */
@media (max-width: 800px) {
  .gw-quote { display: flex; flex-direction: column; align-items: flex-start; max-width: calc(566px * var(--gw-s)); min-height: 0;
    padding-top: calc(var(--gw-dot-pitch) * 3 - var(--gw-dot-gap) + 9px * var(--gw-s)); }
  .gw-quote .gw-quote__card { order: 1; margin: 0; max-width: none; align-self: stretch; }
  .gw-quote .gw-quote__media { order: 2; position: relative; top: auto; left: auto; right: auto; z-index: 3; margin: calc(-20px * var(--gw-s)) 0 0 calc(39px * var(--gw-s)); }
  .gw-quote .gw-quote__photo, .gw-quote .gw-quote__media img { width: var(--gw-quote-photo-w, calc(235px * var(--gw-s))); border-radius: var(--gw-radius); }
  .gw-quote--wide .gw-quote__photo, .gw-quote--wide .gw-quote__media img { width: var(--gw-quote-photo-w, calc(320px * var(--gw-s))); }
  .gw-quote .gw-dots--a { --cols: 14; --rows: 3; top: 0; }
  .gw-quote .gw-dots--b { --cols: 14; --rows: 6; top: calc(100% + 7px * var(--gw-s)); }
  .gw-quote--wide .gw-dots--b { --cols: 8; }   /* clears the wider photo */
  .gw-quote:not(.gw-quote--photo-right) .gw-dots { left: auto; right: calc(85px * var(--gw-s)); }
  .gw-quote.gw-quote--photo-right .gw-dots { right: auto; left: calc(85px * var(--gw-s)); }
  .gw-quote--photo-right .gw-quote__media { align-self: flex-end; margin: calc(-20px * var(--gw-s)) calc(39px * var(--gw-s)) 0 0; }
  .gw-quote--no-photo { padding-bottom: calc(var(--gw-dot-pitch) * 6 + 7px * var(--gw-s)); }
  .gw-quote--no-dots { padding-top: 0; padding-bottom: 0; }
}

/* ---------- 3.8 Stats (99% / 75% / +7pt) ---------- */
.gw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(212.5px * var(--gw-s)), 1fr)); gap: calc(40px * var(--gw-s)); text-align: center; max-width: calc(900px * var(--gw-s)); margin: 0 auto; }
.gw-stat .gw-stat__icon { width: calc(100px * var(--gw-s)); height: calc(100px * var(--gw-s)); object-fit: contain; margin: 0 auto calc(10px * var(--gw-s)); mix-blend-mode: multiply; }
.gw-stat__value { display: block; font-size: var(--wp--preset--font-size--stat); font-weight: 700; line-height: 1; margin-bottom: calc(10px * var(--gw-s)); }
.gw-stat__label { font-weight: 700; font-size: calc(16.25px * var(--gw-s)); line-height: 1.2; }
.gw-stat__note { font-size: calc(16.25px * var(--gw-s)); margin-top: calc(5px * var(--gw-s)); }
/* Button under the stats row */
.gw-stack > .gw-stats + * { margin-top: calc(64px * var(--gw-s)); }
/* Phones and small tablets: one centred column, so no stat is left on its own or clipped */
@media (max-width: 800px) { .gw-stats { grid-template-columns: 1fr; } }

/* ---------- 3.9 Cards (white outlined boxes, e.g. "Acquisition Uplift") ---------- */
.gw-card { background: rgba(255, 255, 255, .5); border: 1px solid #000; border-radius: calc(32px * var(--gw-s)); padding: calc(24px * var(--gw-s)); text-align: left; }
.gw-card .wp-block-columns { gap: calc(16px * var(--gw-s)) !important; }
.gw-card > * + * { margin-top: calc(16px * var(--gw-s)); }
.gw-card h3 { font-size: var(--wp--preset--font-size--card-title); margin: 0; }
/* Space between a card title and its text (7px, as in the design). .gw-site .gw-card beats style.css's
   ".gw-site .wp-block-heading { margin-bottom: 0 }" */
.gw-site .gw-card .wp-block-heading { margin-bottom: calc(7px * var(--gw-s)); }
.gw-site .gw-card .wp-block-heading + p { margin-top: 0; }
/* Inside cards the heading scale starts smaller, but still gets smaller from h1 down */
.gw-card h1 { font-size: calc(25px * var(--gw-s)); }
.gw-card h2 { font-size: calc(22.5px * var(--gw-s)); }
.gw-card h4 { font-size: calc(16.25px * var(--gw-s)); margin: 0 0 .45em; }
.gw-card :is(h5, h6) { font-size: calc(15px * var(--gw-s)); margin: 0 0 .45em; }
.gw-card p { font-size: calc(16px * var(--gw-s)); line-height: 1.2; }
.gw-card h3:not(:first-child) { margin-top: calc(16px * var(--gw-s)); }

/* ---------- 3.10 Team ("Scientific rigor") ----------
   Photo frame, rounded corners and the LinkedIn badge are all CSS; any photo fills the
   frame (WordPress renders it as a background). The badge shows when a LinkedIn URL is set. */
/* Gaps come from the People block's sidebar (--gw-team-row / --gw-team-col, in px at 100% size) */
.gw-team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gw-team-row, 60) * 1px * var(--gw-s)) calc(var(--gw-team-col, 45) * 1px * var(--gw-s)); margin: 0 auto calc(50px * var(--gw-s)); padding: 0; list-style: none; max-width: calc(900px * var(--gw-s)); }
.gw-team__grid:last-child { margin-bottom: 0; }
.gw-person { width: calc(187.5px * var(--gw-s)); }
.gw-person__media { position: relative; width: max-content; margin: 0 auto calc(17.5px * var(--gw-s)); }
/* --gw-photo = photo size in px */
.gw-person img, .gw-person__photo { display: block; width: calc(var(--gw-photo, 130px) * var(--gw-s)); height: calc(var(--gw-photo, 130px) * var(--gw-s)); object-fit: cover; background: center 30% / cover no-repeat; border-radius: calc(22.5px * var(--gw-s)); border: 1px solid var(--gw-ink); margin: 0 auto; }
.gw-person__linkedin { position: absolute; right: calc(7.5px * var(--gw-s)); bottom: calc(7.5px * var(--gw-s)); display: grid; place-items: center; width: calc(15px * var(--gw-s)); height: calc(15px * var(--gw-s)); border-radius: calc(2.5px * var(--gw-s)); background: #fff; color: var(--gw-ink); }
.gw-person__linkedin svg { width: 78%; height: 78%; fill: currentColor; }
/* Whole card links to LinkedIn: on hover the icon turns green and the name is underlined */
.gw-person__link { display: block; color: inherit; text-decoration: none; }
a.gw-person__link:hover .gw-person__linkedin, a.gw-person__link:focus-visible .gw-person__linkedin { background: var(--gw-accent); color: var(--gw-ink); }
/* Name underline draws in from the left on hover */
.gw-person__link h3 { width: fit-content; margin-left: auto; margin-right: auto; padding-bottom: .08em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s ease; }
a.gw-person__link:hover h3, a.gw-person__link:focus-visible h3 { background-size: 100% 2px; }   /* whole px: 1.5px rounded to 1 or 2px depending on the row */
a.gw-person__link:focus-visible { outline: 2px solid var(--gw-ink); outline-offset: 4px; border-radius: calc(22.5px * var(--gw-s)); }
.gw-person h3 { font-size: var(--wp--preset--font-size--name); margin-bottom: .3em; }
.gw-person p { font-size: calc(15px * var(--gw-s)); }
/* "Large (leadership)" grid option */
.gw-team__grid--featured { gap: calc(var(--gw-team-row, 60) * 1px * var(--gw-s)) calc(var(--gw-team-col, 112) * 1px * var(--gw-s)); }
.gw-team__grid--featured .gw-person { width: calc(287.5px * var(--gw-s)); --gw-photo: 220px; }
.gw-team__grid--featured .gw-person h3 { font-size: var(--wp--preset--font-size--name-lg); }
.gw-team__grid--featured .gw-person p { font-size: calc(17.5px * var(--gw-s)); }
/* Spacing around team grids */
.gw-stack > .gw-team__grid + .gw-team__grid { margin-top: calc(50px * var(--gw-s)); }
.gw-stack > .gw-team__grid + h2 { margin-top: calc(80px * var(--gw-s)); }
.gw-stack > .gw-team__grid { margin-top: calc(45px * var(--gw-s)); }
@media (max-width: 800px) {
  .gw-team__grid--featured { gap: calc(var(--gw-team-row, 60) * .7px * var(--gw-s)) calc(35px * var(--gw-s)); }
}
/* Small phones: two people per row */
@media (max-width: 600px) {
  .gw-team__grid { gap: calc(var(--gw-team-row, 60) * .6px * var(--gw-s)) calc(20px * var(--gw-s)); }
  .gw-person { width: calc(50% - 10px * var(--gw-s)); }
}

/* ---------- 3.11 Lens cards ("Our lenses support safe lending") ----------
   The "Lens cards" block holds "Lens card" blocks: portrait, title, short line, optional intro, stats.
   The dotted outline and rounded corners are CSS; portraits are plain images you can swap. */
.gw-lenses {
  --gw-lens-border: 3px dotted var(--gw-accent);   /* outline: width, style, colour */
  --gw-lens-radius: calc(55px * var(--gw-s));      /* corner roundness */
  --gw-lens-portrait: calc(150px * var(--gw-s));   /* portrait height */
  gap: calc(25px * var(--gw-s)) !important;
  margin-top: calc(45px * var(--gw-s));
}
.gw-lenses { display: flex; flex-wrap: nowrap; }
.gw-lens { flex: 1 1 0; min-width: 0; padding: calc(32.5px * var(--gw-s)) calc(27.5px * var(--gw-s)) calc(35px * var(--gw-s)); border: var(--gw-lens-border); border-radius: var(--gw-lens-radius); text-align: left; }
.gw-lens .wp-block-image { margin: 0 auto calc(20px * var(--gw-s)) !important; text-align: center; }   /* portrait centred in the card */
.gw-lens .wp-block-image img { height: var(--gw-lens-portrait) !important; width: auto !important; }   /* !important: beats the block editor's image sizing */
.gw-lens h3 { text-align: center; font-size: var(--wp--preset--font-size--lens-title); margin: 0 0 .15em; }
.gw-lens h3 + p { text-align: center; margin: 0 0 calc(22.5px * var(--gw-s)); }   /* short line under the title */
.gw-lens h3 + p.gw-lens__intro { text-align: left; margin-top: calc(37.5px * var(--gw-s)); }
.gw-lens p { font-size: calc(18.75px * var(--gw-s)); }
.gw-lens .gw-lens__stats { font-size: calc(16.25px * var(--gw-s)); line-height: 1.25; margin-bottom: 0; text-align: center; }   /* Lens card -> Text alignment can change it */
/* "Learn more" link: pinned to the bottom of the card, so the links line up across the row */
.gw-lens { display: flex; flex-direction: column; }
.gw-lens .gw-lens__more { margin: auto 0 0; padding-top: calc(22.5px * var(--gw-s)); text-align: center; font-size: calc(18.75px * var(--gw-s)); font-weight: 700; }   /* same size as the card text */
.gw-lens .gw-lens__more a { color: inherit; text-decoration: none; padding-bottom: .1em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
/* On hover the underline wipes away to the right and draws back in from the left */
.gw-lens .gw-lens__more a:is(:hover, :focus-visible) { animation: gw-underline .6s ease-in-out; }
@keyframes gw-underline {
  0%   { background-size: 100% 2px; background-position: 100% 100%; }
  45%  { background-size: 0 2px;    background-position: 100% 100%; }
  55%  { background-size: 0 2px;    background-position: 0 100%; }
  100% { background-size: 100% 2px; background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-lens .gw-lens__more a:is(:hover, :focus-visible) { animation: none; }
  .gw-person__link h3 { transition: none; }
}
/* Desktop: the cards share one grid, so each part (portrait, title, short line, intro, stats, link) sits on the
   same line in every card, even when one card's short line wraps onto two lines */
@media (min-width: 782px) {
  .gw-lenses { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .gw-lens { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .gw-lens > .wp-block-image { grid-row: 1; }
  .gw-lens > h3 { grid-row: 2; align-self: end; }   /* title sits just above its short line, even when another card's title wraps */
  .gw-lens > p:not([class]) { grid-row: 3; }
  .gw-lens > .gw-lens__intro { grid-row: 4; }
  .gw-lens > .gw-lens__stats { grid-row: 5; }
  .gw-lens > .gw-lens__more { grid-row: 6; align-self: end; }
}
/* Stats row placed under the lens cards in the same section */
.gw-lenses + .gw-stats { margin-top: calc(64px * var(--gw-s)); }
/* Phones: cards stack, and all card text is centred */
@media (max-width: 781px) {
  .gw-lenses { flex-direction: column; }
  .gw-lens, .gw-lens p, .gw-lens h3 + p.gw-lens__intro { text-align: center; }
}

/* ---------- 3.12 Footer ---------- */
.gw-footer { padding: calc(50px * var(--gw-s)) 0; border-top: 1px solid var(--gw-line); font-size: calc(16.25px * var(--gw-s)); background: #fff; }
.gw-footer .gw-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(20px * var(--gw-s)); max-width: calc(var(--gw-container-wide) + var(--gw-gutter) * 2); }
.gw-footer ul { display: flex; flex-wrap: wrap; gap: calc(25px * var(--gw-s)); margin: 0; padding: 0; list-style: none; }
/* Footer options (Site Editor -> Footer -> Footer layout) */
.gw-footer--centered .gw-container { flex-direction: column; align-items: center; text-align: center; }
.gw-footer--centered ul { justify-content: center; flex-wrap: wrap; }
.gw-footer--stacked .gw-container { flex-direction: column; align-items: flex-start; }
.gw-footer--content .gw-container { max-width: calc(var(--gw-container) + var(--gw-gutter) * 2); }
.gw-footer--wide .gw-container { max-width: calc(var(--gw-container-wide) + var(--gw-gutter) * 2); }
.gw-footer--full .gw-container { max-width: none; }
.gw-footer--bg-transparent { background: transparent; }
.gw-footer--bg-cream { background: var(--gw-cream); }
.gw-footer--bg-accent { background: var(--gw-accent); }
.gw-footer--bg-dark { background: var(--gw-ink); color: #fff; border-top-color: var(--gw-ink); }
.gw-footer--bg-dark a { color: #fff; }

/* ---------- 3.13 Radar chart (<gw-radar>, assets/js/gw-radar.js) - Open Banking Intelligence ---------- */
.gw-radar { display: block; max-width: calc(650px * var(--gw-s)); margin: 0 auto; }
.gw-radar svg { width: 100%; height: auto; display: block; overflow: visible; }
.gw-radar__grid circle, .gw-radar__grid line { fill: none; stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* Profile shape */
.gw-radar__shape { fill: #b9fdd9; stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; mix-blend-mode: multiply; }
.gw-radar__icon circle { fill: #fff; stroke: var(--gw-ink); stroke-width: 2.4; transition: fill .2s; }
/* The icon file draws its own frame, so nothing is filled behind it */
.gw-radar__icon circle.gw-radar__icon-bg { stroke: none; fill: transparent; mix-blend-mode: multiply; pointer-events: none; }   /* hover tint over the icon (its white fill is in the icon file) */
/* Interactive chart: hover or tap an icon (the same chart shows on phones) */
.gw-radar__grid line { transition: stroke .2s, stroke-width .2s; }
.gw-radar__grid line.is-active { stroke: var(--gw-accent); stroke-width: 3px; }
.gw-radar__dot { fill: var(--gw-accent); stroke: var(--gw-ink); stroke-width: 3; opacity: 0; transition: opacity .2s; }
.gw-radar__icon { cursor: pointer; outline: none; }
.gw-radar__icon-inner { transition: transform .2s ease; transform-origin: 0 0; }
.gw-radar__icon:hover .gw-radar__icon-inner, .gw-radar__icon.is-active .gw-radar__icon-inner { transform: scale(1.12); }
.gw-radar__icon:hover circle.gw-radar__icon-bg, .gw-radar__icon.is-active circle.gw-radar__icon-bg { fill: var(--gw-accent-hover); }
.gw-radar__icon path { fill: none; stroke: var(--gw-ink); stroke-width: 1.4; vector-effect: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3.14 Collage (FinIQ section): app screens + photo ----------
   A Group block with class "gw-collage" holding Image blocks with these classes:
     gw-collage__photo        the photo (gets the rounded outlined frame)
     gw-collage__phone--back  the phone screen at the back-left
     gw-collage__phone--front optional phone screen in front (covers the start of the arrow)
   Swap any image in the editor. The frame, both dot patterns and the arrow are CSS.
   Positions are percentages of the collage box, so it all scales together. */
.gw-collage {
  --gw-collage-radius: calc(32.5px * var(--gw-s));   /* photo corner roundness */
  position: relative; width: 100%; max-width: calc(816.25px * var(--gw-s)); aspect-ratio: 653 / 415; margin: 0 0 calc(40px * var(--gw-s));
}
.gw-collage > * { position: absolute !important; margin: 0 !important; }   /* !important: the block editor sets its own position on every block */
.gw-collage img { display: block; width: 100%; height: 100% !important; }
/* Parts of a long section (a new H2 or a quote after columns) get room above them */
.gw-stack > .wp-block-columns + .wp-block-heading, .gw-stack > .wp-block-columns + .gw-quote { margin-top: calc(96px * var(--gw-s)) !important; }
/* Collage after columns (Readiness -> FinIQ): extra room above, centred */
.gw-stack > .wp-block-columns + .gw-collage { margin-top: calc(200px * var(--gw-s)) !important; margin-left: auto !important; margin-right: auto !important; }
/* When the collage follows another block in the same section, give it room */
.gw-stack > * + .gw-collage { margin-top: calc(120px * var(--gw-s)) !important; }
/* Layers, back to front: dots (0) -> photo (2) -> back phone (3) -> arrow (4) -> front phone (5) */
.gw-collage__photo { left: 34.9%; top: 0; width: 57%; aspect-ratio: 372 / 305; z-index: 2; }
.gw-collage__photo img { object-fit: cover; border: 1px solid var(--gw-ink); border-radius: var(--gw-collage-radius); }
.gw-collage__phone--back { left: 0; top: 0; width: 24.2%; z-index: 3; }
.gw-collage__phone--front { left: 16.2%; top: 18.8%; width: 23.7%; z-index: 5; }
.gw-collage__phone--back img, .gw-collage__phone--front img { height: auto; object-fit: contain; }
/* Front phone screenshot has square corners: round and outline it to match the back phone */
.gw-collage__phone--front img { border: 1px solid #000; border-radius: calc(16.25px * var(--gw-s)); }
/* Dot patterns: one under the photo, one between the back phone and the photo (sizes from --gw-dot-* in part 1) */
.gw-collage::before, .gw-collage__photo::before { content: ""; position: absolute; z-index: 0; background: var(--gw-dots); }
.gw-collage::before { left: 40.6%; top: 73.5%; width: 43%; height: 15.7%; }
.gw-collage__photo::before { right: 100%; top: 16%; width: 19%; height: 17%; }
/* Rising arrow over the photo. Replace it in Appearance -> Design settings -> Images. */
.gw-collage::after { content: ""; position: absolute; z-index: 4; left: 37.2%; top: 41.8%; width: 62%; aspect-ratio: 484 / 241; background: var(--gw-finiq-arrow, url(../img/finiq-arrow.svg)) center / contain no-repeat; pointer-events: none; }

/* ---------- 3.15 Videos (Readiness Score, financial-inclusion faces) ----------
   Add these classes to a Video block:
     gw-video--blend   white areas of the video take on the section's background colour
     gw-video--narrow  small 208 x 374 frame, video at the top (change the 166.4px width / 299.2px height) */
.gw-video--blend video { mix-blend-mode: multiply; }
/* Square video filling its column (Readiness Score) */
.gw-video--blend:not(.gw-video--narrow) { margin: 0; }
.gw-video--blend:not(.gw-video--narrow) video { display: block; width: 100%; max-width: calc(524px * var(--gw-s)); aspect-ratio: 1 / 1; height: auto; object-fit: contain; margin: 0 auto; }
/* Hide the browser's own play button over decorative looping videos (gw.js starts them) */
.gw-video--blend video::-webkit-media-controls-start-playback-button,
.gw-video--blend video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
/* Small 208 x 374 frame with the video at the top (financial-inclusion faces) */
.gw-video--narrow { max-width: calc(208px * var(--gw-s)); margin-left: auto; margin-right: auto; }
/* A heading that follows a video in the same section starts a new part: give it room */
.gw-stack > .wp-block-video + .wp-block-heading { margin-top: calc(70px * var(--gw-s)); }
.gw-video--narrow video { width: 100%; height: calc(374px * var(--gw-s)); max-height: none; object-fit: contain; object-position: top; display: block; }
/* Phones: the frame fits the video (no empty space under it) and the next heading sits closer */
@media (max-width: 800px) {
  .gw-video--narrow video { height: auto; }
  .gw-stack > .wp-block-video + .wp-block-heading { margin-top: calc(40px * var(--gw-s)); }
}
/* Blending only works if the section's content isn't on its own layer,
   so sections that contain a blended video drop that layer. Leave as is. */
.gw-section:not(.gw-hero):has(.gw-video--blend) > .gw-container { z-index: auto; }
.gw-section:not(.gw-hero):has(.gw-video--blend)::before { z-index: auto; }


/* ---------- 3.16 Contact popup ("Contact us") ----------
   A Group block with class "gw-modal" and HTML anchor "get-in-contact" holding a heading and the
   Contact Form 7 shortcode. Any link to #get-in-contact opens it;
   the x, the backdrop and Esc close it (gw.js). */
.gw-modal { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; padding: var(--gw-gutter); background: rgba(0,0,0,.25); }
.gw-modal:target:not(.is-dismissed), .gw-modal.is-open { display: grid; }
.gw-modal > .wp-block-group__inner-container, .gw-modal > :first-child { margin: 0; }
.gw-modal .gw-modal__card { position: relative; width: min(100%, calc(432px * var(--gw-s))); max-height: calc(100vh - 2 * var(--gw-gutter)); overflow: auto;
  padding: calc(32px * var(--gw-s)); border: 1px solid #000; border-radius: calc(32px * var(--gw-s));
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: left; }
.gw-modal h2, .gw-modal h3 { font-size: var(--wp--preset--font-size--card-title); margin: 0; }
.gw-modal .gw-modal__card > .wpcf7 { margin-top: calc(36px * var(--gw-s)); }   /* 36px between the title and the first label */
.gw-modal__close { position: absolute; top: calc(24px * var(--gw-s)); right: calc(24px * var(--gw-s)); font-size: calc(25px * var(--gw-s)); line-height: 1; text-decoration: none; }
/* Contact Form 7 puts all fields in one paragraph split by line breaks: hide the breaks, space the fields instead */
.gw-modal .wpcf7-form p { margin: 0; }
.gw-modal .wpcf7-form textarea.wpcf7-textarea { height: calc(120px * var(--gw-s)); resize: vertical; border-radius: calc(17.5px * var(--gw-s)); }
.gw-modal .wpcf7-form br { display: none; }
.gw-modal .wpcf7-form label { font-size: calc(14px * var(--gw-s)); line-height: 1.2; margin: 0 0 calc(17px * var(--gw-s)); }
.gw-modal .wpcf7-form-control-wrap { display: block; margin-top: calc(6px * var(--gw-s)); }
.gw-modal .wpcf7-form :is(input:not([type="submit"]), select, textarea) { font-size: calc(14px * var(--gw-s)); line-height: 1.2; padding: .6em 1.15em; border-width: 1px; background-color: rgba(255, 255, 255, .4); }
/* Dropdowns: chevron on the right; grey text until something is chosen, like the placeholders */
.gw-modal .wpcf7-form select.wpcf7-select { appearance: none; -webkit-appearance: none; padding-right: 2.8em;
  background: rgba(255, 255, 255, .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E") right 1em center / 1.45em no-repeat; }
.gw-modal .wpcf7-form select:has(option[value=""]:checked), .gw-modal .wpcf7-form select:invalid { color: #8a8a8a; }
.gw-modal .wpcf7-form select option { color: var(--gw-ink); }
.gw-modal .wpcf7-submit { margin: calc(16px * var(--gw-s)) 0 0; padding: .45em .95em; border: 1px solid #000; border-radius: 999px; background: var(--gw-accent); color: var(--gw-accent-ink); font: inherit; font-weight: 700; font-size: calc(16px * var(--gw-s)); line-height: 1.2; cursor: pointer; }
.gw-modal .wpcf7-submit:hover { background: var(--gw-accent-hover); }
.gw-modal .wpcf7-submit:active { background: var(--gw-accent-active); }
.gw-modal .wpcf7-spinner { margin: 0 0 0 8px; }
.gw-modal .wpcf7-not-valid-tip { font-size: calc(11.25px * var(--gw-s)); margin-top: 3px; }
.gw-modal .wpcf7-response-output { margin: calc(12.5px * var(--gw-s)) 0 0 !important; padding: .5em .8em !important; border-radius: calc(12.5px * var(--gw-s)); font-size: calc(11.25px * var(--gw-s)); }
body:has(.gw-modal:target:not(.is-dismissed), .gw-modal.is-open) { overflow: hidden; }

/* ---------- 3.17 Password page (page set to "Password protected" in WordPress) ----------
   The form card reuses the sign-up popup's look: frosted card, pill field, green button. */
.gw-site main:has(> .gw-password) { min-height: 100vh; display: grid; place-items: center; padding: calc(150px * var(--gw-s)) var(--gw-gutter) calc(60px * var(--gw-s));
  background: radial-gradient(120% 90% at 0% 0%, var(--gw-mint) 0%, transparent 55%), radial-gradient(100% 80% at 100% 100%, var(--gw-lime) 0%, transparent 60%), var(--gw-cream); }
.gw-password { width: min(100%, calc(432px * var(--gw-s))); padding: calc(32px * var(--gw-s)); border: 1px solid #000; border-radius: calc(32px * var(--gw-s)); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: left; }
.gw-password h1 { font-size: var(--wp--preset--font-size--card-title); margin: 0 0 calc(10px * var(--gw-s)); }
.gw-password p { font-size: calc(14px * var(--gw-s)); line-height: 1.3; margin: 0 0 calc(24px * var(--gw-s)); }
.gw-password label { font-size: calc(14px * var(--gw-s)); margin: 0 0 calc(6px * var(--gw-s)); }
.gw-site .gw-password input[type="password"] { width: 100%; font-size: calc(14px * var(--gw-s)); line-height: 1.2; padding: .6em 1.15em; border: 1px solid var(--gw-ink); border-radius: 999px; background: rgba(255, 255, 255, .4); font-family: inherit; }
.gw-password button { margin-top: calc(20px * var(--gw-s)); padding: .45em .95em; border: 1px solid #000; border-radius: 999px; background: var(--gw-accent); color: var(--gw-accent-ink); font: inherit; font-weight: 700; font-size: calc(16px * var(--gw-s)); line-height: 1.2; cursor: pointer; }
.gw-password button:hover { background: var(--gw-accent-hover); }
.gw-password button:active { background: var(--gw-accent-active); }
.gw-password .gw-password__error { color: #b00020; font-weight: 700; }
/* Nothing to sign up to until they're in: hide the header menu */
body:has(.gw-password) .gw-header .wp-block-navigation { display: none; }


/* ==========================================================================
   4. UTILITIES - helper classes you can add to any block
   ========================================================================== */

/* ---------- 4.1 Text ---------- */
/* .gw-lead: large bold line under a section heading.
   Add it to a paragraph via Advanced -> Additional CSS class. */
.gw-lead { font-size: var(--gw-subtitle); font-weight: 700; line-height: normal; }

/* ---------- 4.2 Form fields (label above a pill-shaped input or select) ---------- */
.gw-site label { display: block; font-size: calc(16.25px * var(--gw-s)); margin-bottom: calc(7.5px * var(--gw-s)); }
.gw-site :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], select, textarea) {
  width: 100%; padding: .55em 1.1em; border: 1.5px solid var(--gw-ink); border-radius: calc(1248.75px * var(--gw-s));
  background: #fff; color: var(--gw-ink); font: inherit; font-size: calc(17.5px * var(--gw-s)); }
.gw-site textarea { border-radius: var(--gw-radius-sm); }
.gw-site :is(input, textarea)::placeholder { color: #8a8a8a; }
.gw-site select { appearance: none; padding-right: 2.6em; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") right 1em center / 1.1em no-repeat; }
.gw-site :is(input, select, textarea):focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }

/* ---------- 4.3 Visibility & phone spacing (each block's "Visibility & mobile" panel) ---------- */
@media (min-width: 801px) {
  .gw-hide-desktop { display: none !important; }
}
@media (max-width: 800px) {
  .gw-hide-mobile { display: none !important; }
  .gw-mpad--none { padding-top: 0; padding-bottom: 0; }
  .gw-mpad--xs { padding-top: calc(17.5px * var(--gw-s)); padding-bottom: calc(17.5px * var(--gw-s)); }
  .gw-mpad--sm { padding-top: calc(40px * var(--gw-s)); padding-bottom: calc(40px * var(--gw-s)); }
  .gw-mpad--md { padding-top: calc(70px * var(--gw-s)); padding-bottom: calc(70px * var(--gw-s)); }
  .gw-mpad--lg { padding-top: calc(110px * var(--gw-s)); padding-bottom: calc(110px * var(--gw-s)); }
}

/* ---------- 4.4 Advanced panel (every block & section) ---------- */
.gw-shadow--sm { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); }
.gw-shadow--md { box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.gw-shadow--lg { box-shadow: 0 18px 40px rgba(0,0,0,.14); }
/* Separate phone values set in the Advanced panel */
@media (max-width: 800px) {
  .gw-m-pt { padding-top: var(--m-pt) !important; }
  .gw-m-pr { padding-right: var(--m-pr) !important; }
  .gw-m-pb { padding-bottom: var(--m-pb) !important; }
  .gw-m-pl { padding-left: var(--m-pl) !important; }
  .gw-m-mt { margin-top: var(--m-mt) !important; }
  .gw-m-mb { margin-bottom: var(--m-mb) !important; }
  .gw-m-mw { max-width: var(--m-mw) !important; }
}

/* ---------- 4.5 Scroll-in motion (gw.js adds .is-in when the element comes into view) ---------- */
.gw-anim { opacity: 0; transition: opacity .7s ease var(--anim-delay, 0ms), transform .7s ease var(--anim-delay, 0ms); }
.gw-anim--fade-up { transform: translateY(28px); }
.gw-anim--slide-left { transform: translateX(-40px); }
.gw-anim--slide-right { transform: translateX(40px); }
.gw-anim--zoom { transform: scale(.94); }
.gw-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gw-anim { opacity: 1; transform: none; transition: none; } }


/* ==========================================================================
   5. EDITOR - only affects the WordPress editor, not the live site
   ========================================================================== */
.gw-editor-thumb { max-width: 100%; border-radius: calc(7.5px * var(--gw-s)); }
/* Never hide content inside the editor */
.editor-styles-wrapper .gw-anim { opacity: 1 !important; transform: none !important; }