/**
 * Wriggle — 2026 redesign styles
 * ---------------------------------------------------------------------------
 * All CSS for the homepage redesign and the global header/footer updates lives
 * in this file, kept separate from the child theme's style.css so the new work
 * can be reviewed, disabled or rolled back on its own.
 *
 * Enqueued from functions.php as 'wriggle-redesign' (see
 * total_child_enqueue_parent_theme_style), loaded after the child style.css so
 * these rules win on equal specificity without needing !important.
 *
 * SCOPING — read this before editing.
 *
 * Everything specific to the homepage design is prefixed with `body.gd-home`.
 * That class is added by a body_class filter in functions.php: it matches the
 * new build page by slug AND the real front page, so the same stylesheet works
 * before and after the page is promoted to be the homepage — no find/replace
 * at go-live.
 *
 * Deliberately NOT scoped, because they live outside the homepage's markup and
 * are meant to apply site-wide:
 *   - the header search pill (section 1)
 *   - the role-chooser popup (section 8)
 *   - the footer newsletter form (section 9)
 *
 * Section order follows the page top to bottom:
 *   1. Header
 *   2. Homepage
 *   3. Footer
 */


/* ==========================================================================
   1. HEADER
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 Search toggle pill
   Figma: 40x40, rgba(255,255,255,.14) fill, fully rounded.

   Scoped to the <a>, not the <li>: the <li> also wraps #searchform-dropdown,
   so sizing the <li> would clip the dropdown and break its anchoring.

   !important is needed on the box/paint properties: Total sets the nav link
   size and padding from theme options with higher specificity than this
   selector can reach.
   -------------------------------------------------------------------------- */

.search-toggle-li > a.site-search-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;                    /* clears the theme's menu-link padding */
	background-color: rgba(255, 255, 255, .14) !important;
	border-radius: 50px !important;
	flex: none;                               /* stops the nav flex row stretching it */
	transition: background-color .2s ease !important;
}

/* Hover + open state. Not specified in the comp — stronger fill of the same
   colour. Swap the value if a hover state is added to the Figma later. */
.search-toggle-li > a.site-search-toggle:hover,
.search-toggle-li > a.site-search-toggle:focus-visible,
.search-toggle-li > a.site-search-toggle[aria-expanded="true"] {
	/* !important required here too — the base rule above is !important and would
	   otherwise win over this more-specific but normal-weight declaration. */
	background-color: rgba(255, 255, 255, .24) !important;
}

/* Inner wrapper — centre the icon instead of inheriting inline layout */
.search-toggle-li > a.site-search-toggle .link-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.gd-industry img {border-radius: 25px;}

/* Icon-only in the new design. Visually hide the "Search" label but keep it in
   the accessibility tree (the anchor also carries aria-label="Search"). */
.search-toggle-li .wpex-menu-search-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* .ticon is an icon webfont — size with font-size, not width/height */
.search-toggle-li .wpex-menu-search-icon {
	font-size: 16px;
	color: #fff;
	margin: 0;
}


/* ==========================================================================
   2. HOMEPAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Our Partners — logo carousel

   Figma card is 293x127. The logo is NOT padded to a fixed offset — it is
   centred in the card and its own box varies with the artwork:

       Apple    207.6 x 49.43  at  left 42.81  top 39
       Google   205    x 101   at  left 44     top 13

   Both centre in the same 293x127 card (42.8*2 + 207.6 = 293,
   13*2 + 101 = 127), so the rule the design is following is:
   a 208 x 101 box, centred, that the logo scales down to fit.

   That is what is built below — the card holds a fixed height and centres,
   the logo is capped at the box and never cropped or stretched, so any
   upload size lands in the same place. Card padding (13px 42px) lives with
   the rest of the card styling in style.css.
   -------------------------------------------------------------------------- */

/* The card: fixed height so every tile matches, contents centred both ways.

   width: 100% and flex-direction on .owl-item below are what stop the card
   shrinking to its content — style.css makes .owl-stage and .owl-item flex
   containers, so without these the Apple and Microsoft tiles come out wider
   than the Google and Lenovo ones. */
body.gd-home #partners .owl-item .vc_column-inner > div,
body.gd-home #partners-dup .owl-item .vc_column-inner > div {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 127px;
}

body.gd-home #partners .owl-item,
body.gd-home #partners-dup .owl-item {
	flex-direction: column;
}

body.gd-home #partners .owl-item > .vc_row,
body.gd-home #partners-dup .owl-item > .vc_row,
body.gd-home #partners .owl-item .wpb_column,
body.gd-home #partners-dup .owl-item .wpb_column,
body.gd-home #partners .owl-item .vc_column-inner,
body.gd-home #partners-dup .owl-item .vc_column-inner,
body.gd-home #partners .owl-item .vc_column-inner > div,
body.gd-home #partners-dup .owl-item .vc_column-inner > div {
	width: 100%;
	min-width: 0;
}

/* The logo box: a hard 208 x 101 area, centred in the card.

   Sizing the box itself rather than capping the image with max-width/max-height
   is the part that matters. Caps only bite when the artwork is bigger than the
   cap in that axis, so a tall-ish upload (the Google logo is 158x121) keeps its
   own height and stretches the card. A fixed box has no such escape hatch. */
body.gd-home #partners .wpb_single_image .vc_single_image-wrapper,
body.gd-home #partners-dup .wpb_single_image .vc_single_image-wrapper {
	display: block;
	width: 208px;
	max-width: 100%;
	height: 101px;
	margin: 0 auto;
}

/* The image fills that box and letterboxes inside it, so the rendered area is
   identical for every upload and nothing depends on the file's own dimensions.
   !important is needed because WPBakery prints width/height attributes on the
   tag and the parent theme styles .vc_single_image-img directly. */
body.gd-home #partners .wpb_single_image .vc_single_image-wrapper img,
body.gd-home #partners-dup .wpb_single_image .vc_single_image-wrapper img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: scale-down;
	object-position: center;
}

/* Strip the figure's default spacing so only the rules above set the size. */
body.gd-home #partners .wpb_single_image,
body.gd-home #partners-dup .wpb_single_image,
body.gd-home #partners .wpb_single_image .vc_figure,
body.gd-home #partners-dup .wpb_single_image .vc_figure {
	margin: 0;
}


/* ==========================================================================
   3. FOOTER
   ========================================================================== */

/* (sections added as they are built) */

body.gd-home .multibut a {
	
	font-style: normal;
	font-weight: 700 !important;
	font-size: 16px;
	line-height: 26px;
	color: #2E2A43 !important;

}
body.gd-home .multibut a:hover,
 body.gd-home .multibut a:active,
 body.gd-home .multibut a:focus {
	color: #2E2A43 !important;
}

body.gd-home .wpb_text_column li::before {
    content: url(/wp-content/themes/total-child-theme/images/checkbox.svg);
    margin-right: 12px;
    position: relative;
    top: 6px;
}

body.gd-home #partners .owl-nav, body.gd-home #partners-dup .owl-nav {
	top: inherit;
}
body.gd-home #best .owl-nav {
	top: inherit;
}

body.gd-home h1,
 body.gd-home h2,
 body.gd-home h3,
 body.gd-home h4,
 body.gd-home h5 {
	font-family: 'Inter', sans-serif !important;
}

body.gd-home .vcex-multi-buttons .theme-button.outline[data-wpex-hover]:hover {
	color: #2E2A43 !important;
}

body.gd-home #toright-new {
	margin-left: -140px;
}

body.gd-home #toleft-new {
	margin-right: -140px;
}

@media (max-width: 1000px) {
    body.gd-home #toright-new {
        margin-left: inherit;
    }
	body.gd-home #toleft-new {
		margin-right: inherit;
	}
}

/* Wide screens are the base; the tighter offsets live in the max-width query
   underneath, where there is less room beside the panel. The cut-off is 1439,
   not 1600: Windows at 125% scaling reports a 1920 screen as 1536 CSS px. */
body.gd-home #elem1:after {
    content: url(/wp-content/themes/total-child-theme/images/elem1.svg) !important;
    position: absolute;
    top: 0;
    right: -78.12px !important;
}

body.gd-home #elem2:after {
    content: url(/wp-content/themes/total-child-theme/images/elem2.svg);
    position: absolute;
    top: 0;
    left: -77.12px;
}

@media (max-width: 1439px) {
    body.gd-home #elem2:after {
        left: -50.12px;
    }

    /* !important repeated: the base rule above carries it. */
    body.gd-home #elem1:after {
        right: -50.12px !important;
    }
}


/* ===== Our Awards — logo cards ===== */

/* Grid: 3 per row, extras wrap; cards stretch to equal height */
body.gd-home #our-awards .vcex-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-top: 24px;
}

/* <figure> is just the grid cell — strip default margin, let inner fill it */
body.gd-home #our-awards .vcex-image {
    margin: 0 !important;
    display: flex !important;
}

/* The white card itself */
body.gd-home #our-awards .vcex-image .vcex-image-inner {
    display: flex !important;
    align-items: center;               /* centre logo vertically */
    justify-content: center;           /* centre logo horizontally */
    width: 100% !important;
    min-height: 126px;                 /* keeps short logos from squashing the card */
    padding: 22px 26px !important;
    background: #fff !important;
    border: 0 !important;              /* kills the page-builder test border */
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(64, 58, 96, .08) !important;
    box-sizing: border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover: card lifts and the shadow deepens */
body.gd-home #our-awards .vcex-image .vcex-image-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(64, 58, 96, .16) !important;
}

/* Logos: scale down to fit, never stretch (overrides the inline width/height attrs) */
body.gd-home #our-awards .vcex-image .vcex-image-inner img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 84px !important;
    object-fit: contain !important;
    transition: transform .3s ease;
}

/* Hover: subtle logo zoom inside the lifting card */
body.gd-home #our-awards .vcex-image .vcex-image-inner:hover img {
    transform: scale(1.04);
}

/* Respect reduced-motion preferences — keep the shadow change, drop the movement */
@media (prefers-reduced-motion: reduce) {
    body.gd-home #our-awards .vcex-image .vcex-image-inner,
    body.gd-home #our-awards .vcex-image .vcex-image-inner img {
        transition: box-shadow .3s ease;
        transform: none !important;
    }
}

/* ===== Our Awards — decorative squiggle on the right ===== */

/* The .vc_row itself has floated columns, so its own height is 0 —
   anchor the decoration to the inner wrapper, which has real height. */
body.gd-home #our-awards > .wpb_column > .vc_column-inner > .wpb_wrapper {
    position: relative;
    padding-right: 310px;              /* reserved lane the cards never run into */
    box-sizing: border-box;
}

/* The graphic — decorative only, so a pseudo-element rather than an <img> */
body.gd-home #our-awards > .wpb_column > .vc_column-inner > .wpb_wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);       /* vertically centred on heading + cards */
    width: 279px;                      /* the SVG's natural size */
    height: 244px;
    background: url(/wp-content/themes/total-child-theme/images/3.svg.svg?id=10877)
                no-repeat center / contain;
    pointer-events: none;              /* never blocks card hover */
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    /* Drop the decoration, give the cards the full width back */
    body.gd-home #our-awards > .wpb_column > .vc_column-inner > .wpb_wrapper {
        padding-right: 0;
    }
    body.gd-home #our-awards > .wpb_column > .vc_column-inner > .wpb_wrapper::after {
        display: none;
    }
    body.gd-home #our-awards .vcex-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    body.gd-home #our-awards .vcex-grid-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body.gd-home #our-awards .vcex-image .vcex-image-inner {
        min-height: 110px;
        padding: 20px !important;
    }
}

/* ==========================================================================
   "What we do" colour panels — decorative Wriggle "w"
   ========================================================================== */

/* The comp sets the text block at ~45% of the panel width. The existing px
   values (170px base / 140px under 1200px) leave no clear band for the mark,
   and a percentage scales with the column so the 1200px override can go. */
body.gd-home #main .par_col2 .vc_column-inner {
	padding-left: 45% !important;
}
body.gd-home #main .par_col2.right .vc_column-inner {   /* mirrored panels */
	padding-left: 50px !important;
	padding-right: 45% !important;
}

/* .vc_column-inner carries the background colour and the 25px radius, so it
   is the positioning context and the clipping box for the mark. */
body.gd-home #main .par_col2 > .vc_column-inner {
	position: relative;
	overflow: hidden;   /* clips the "w" to the rounded corners */
}

/* Absolutely positioned pseudo-elements paint above in-flow content, so the
   heading/copy/button are lifted onto their own layer to stay on top. */
body.gd-home #main .par_col2 > .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 1;
}

/* The "w". Its left edge runs under the white device card — that card
   overlaps the panel by 100px and paints above it, which reproduces the
   partial tuck in the comp. The SVG already carries its own opacity and
   gradient fade, so no opacity or blend-mode is applied here. */
body.gd-home #main .par_col2 > .vc_column-inner::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 9%;
	width: 25.5%;              /* 262px against the ~1030px comp panel */
	aspect-ratio: 262 / 265;   /* from the SVG's own viewBox */
	transform: translateY(-50%);
	background: url("/wp-content/uploads/2026/09/Group-1000005867.svg") no-repeat center / contain;
	pointer-events: none;      /* never intercepts the Learn More button */
}

/* Mirrored panels flip the mark to the right-hand band. */
body.gd-home #main .par_col2.right > .vc_column-inner::before {
	left: auto;
	right: 9%;
}

/* Under 768px the panel stacks (padding becomes 120px 30px 30px) and there
   is no side band left, so the mark is dropped. */
@media only screen and (max-width: 768px) {
	body.gd-home #main .par_col2 > .vc_column-inner::before {
		display: none;
	}
}

body.gd-home #main .par_col1 > .vc_column-inner {
    padding: 6px 6px !important;
}


/* ==========================================================================
   4. GLOBAL — homepage typography
   ========================================================================== */

/* Headings were running loose — the EdTech Success Stories h3 carried an inline
   line-height: 75px against a 60px font.

   A unitless ratio rather than a flat 40px: vcex prints a responsive font-size
   for that heading (60 / 55 / 50 / 40 / 35px down the breakpoints), so a fixed
   40px would have the desktop 60px lines overlapping each other. 1.15 gives
   69px at 60px and 40px at 35px, which is the ~40px asked for at the small end
   and stays legible at the top end.

   !important is required: vcex writes line-height into the element's inline
   style attribute, which nothing in a stylesheet can beat without it. */
body.gd-home h1,
body.gd-home h2,
body.gd-home h3,
body.gd-home h4,
body.gd-home h5,
body.gd-home h6 {
	line-height: 1.15 !important;
}


/* ==========================================================================
   5. SECTIONS — EdTech Success Stories
   ========================================================================== */

/* "View all Case Study" sits in its own 1/3 column beside the two-line heading,
   so it needs pushing down to sit on the heading's baseline rather than its top.
   Desktop and iPad Pro only (>=1024px) — below that the column stacks full
   width and the offset would just be a gap. */
@media (min-width: 1024px) {
	body.gd-home .gd-case-studies a.vcex-button {
		margin-top: 60px;
	}
}

/* Mobile: the column is full width under the heading, so the button reads
   better aligned to the same left edge as the text above it.
   float and text-align both need overriding — .align-right floats the button
   and the column itself is right-aligned. */
@media (max-width: 767px) {
	body.gd-home .gd-case-studies a.vcex-button,
	body.gd-home .gd-case-studies a.vcex-button.align-right {
		float: left !important;
	}

	body.gd-home .gd-case-studies .wpb_wrapper {
		text-align: left;
	}
}


/* ==========================================================================
   6. SECTIONS — Milestones (15yrs+ / 200K+ / 8+ / 150+)
   ========================================================================== */

/* Single column on phones, same as the Our Awards grid.
   !important on both: wpex-grid-cols-4 sets the columns and vcex writes
   gap: 38px into the container's inline style attribute. */
@media (max-width: 600px) {
	body.gd-home .gd-milestones .vcex-grid-container {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ==========================================================================
   7. SECTIONS — EdTech Success Stories carousel
   ==========================================================================

   Markup per slide (Carousel Anything -> WPBakery inner row):

     .owl-item
       > .vc_row.vc_inner              <- background photo, from Design Options
         > .wpb_column > .vc_column-inner > .wpb_wrapper
             .wpb_text_column          <- the pull quote
             .vcex-spacing             <- 40px / 30px under 959px
             .vcex-icon-box            <- school logo + name
             a.vcex-button             <- View Case Study (hover only)
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 The card
   -------------------------------------------------------------------------- */

/* Rounded corners, and the positioning context for the overlay and button.
   overflow: hidden is what clips the background photo to the radius. */
body.gd-home .gd-case-carousel .owl-item > .vc_row {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
}

/* Dark wash over the photo so the white quote and school name stay readable.
   A gradient rather than a flat fill — heavier at the bottom where the icon
   box sits, lighter at the top so the photo still reads.

   position: absolute keeps it out of the row's flex flow (the row carries
   vc_row-flex, so an in-flow pseudo-element would become a flex item). */
body.gd-home .gd-case-carousel .owl-item > .vc_row::before {
	content: "";
	/* WPBakery's flex-row CSS sets .vc_row-flex:before { display: none } to kill
	   the old clearfix pseudo-element. Without this the overlay computes
	   correctly in every other respect but never renders. */
	display: block !important;
	position: absolute;
	inset: 0;
	/* Both stops sit past the card's width (99.59% and 131.49%), so in practice
	   this paints a near-flat 60% black over the whole photo — which is why it
	   reads like the comp, where the earlier 20.59%/53.49% version only
	   darkened the left-hand strip. */
	background: linear-gradient(
		88.74deg,
		rgba(0, 0, 0, 0.6) 99.59%,
		rgba(0, 0, 0, 0) 131.49%
	);
	pointer-events: none;   /* never blocks the card's own link */
	z-index: 1;             /* above the zooming photo layer, below the content */
}

/* The photo, again, as its own layer so it can be zoomed on hover.

   The image lives on the row as a background, set by WPBakery Design Options —
   a background-image cannot be transformed, and background-size cannot animate
   away from the `cover` keyword. background: inherit copies the row's whole
   background onto this layer, which CAN be scaled; the row's own background
   stays underneath and never shows, because this sits exactly on top of it at
   rest. overflow: hidden on the row clips the zoom. */
body.gd-home .gd-case-carousel .owl-item > .vc_row::after {
	content: "";
	display: block !important;   /* same clearfix reset as above */
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	transform: scale(1);
	transition: transform .6s ease;
	pointer-events: none;
	z-index: 0;
}

body.gd-home .gd-case-carousel .owl-item > .vc_row:hover::after {
	transform: scale(1.12);
}

/* Content sits above the wash. */
body.gd-home .gd-case-carousel .owl-item > .vc_row > .wpb_column {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   7.2 Layout — quote at the top, school at the bottom
   -------------------------------------------------------------------------- */

/* The row carries vc_row-o-content-bottom, which bottom-aligns the whole
   block. The comp wants the quote at the top and the school pinned to the
   bottom instead, so the wrapper becomes a full-height flex column and the
   quote takes the leftover space as bottom margin. */
body.gd-home .gd-case-carousel .owl-item .vc_column-inner,
body.gd-home .gd-case-carousel .owl-item .vc_column-inner > .wpb_wrapper {
	height: 100%;
}

body.gd-home .gd-case-carousel .owl-item .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
}

body.gd-home .gd-case-carousel .owl-item .wpb_text_column {
	margin-bottom: auto;   /* pushes spacer + icon box down to the bottom */
}

/* Quote type, per the Figma spec: Inter Medium 20/30, no letter-spacing.
   Width (550px) and colour are set inline on the block in the page builder,
   so they are left alone here. */
body.gd-home .gd-case-carousel .owl-item .wpb_text_column p {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: normal;
	margin: 0;
}

/* School name, per the Figma spec: Inter Bold 20/33.
   !important throughout: the page builder writes font-size, font-weight and
   colour into the h4's inline style attribute, and the homepage heading rule
   in section 4 sets line-height with !important. */
body.gd-home .gd-case-carousel .owl-item .vcex-icon-box-heading {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 33px !important;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   7.3 View Case Study — revealed on hover
   -------------------------------------------------------------------------- */

/* Taken out of the flow and pinned bottom-right. The button carries
   .align-right, but float does nothing to a flex item, and absolute
   positioning means showing and hiding it never shifts the card's layout. */
body.gd-home .gd-case-carousel .owl-item .vcex-button {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.gd-case-carousel .owl-item > .vc_row:hover .vcex-button,
body.gd-home .gd-case-carousel .owl-item .vcex-button:focus-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Touch devices have no hover, and this button is the only link to the case
   study — without this it would be unreachable on phones and tablets. */
@media (hover: none) {
	body.gd-home .gd-case-carousel .owl-item .vcex-button {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Someone who prefers reduced motion still gets the reveal, just not the slide. */
@media (prefers-reduced-motion: reduce) {
	body.gd-home .gd-case-carousel .owl-item .vcex-button {
		transform: none;
		transition: opacity .3s ease, visibility .3s;
	}

	/* Drop the photo zoom too — the overlay still deepens on hover. */
	.gd-case-carousel .owl-item > .vc_row::after,
	body.gd-home .gd-case-carousel .owl-item > .vc_row:hover::after {
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   7.4 Navigation
   -------------------------------------------------------------------------- */

/* The comp has arrows only, no dots. */
body.gd-home .gd-case-carousel .owl-dots {
	display: none;
}

/* --------------------------------------------------------------------------
   7.5 Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* The button sits below the school name rather than beside it — at this
	   width there is no room for both on one line. */
	body.gd-home .gd-case-carousel .owl-item .vcex-button {
		position: static;
		margin-top: 20px;
		align-self: flex-start;
	}
}


/* ==========================================================================
   8. "I'm here as a…" role-chooser popup
   ==========================================================================

   Built in Popup Maker (popup 10934). The content markup carries
   .gd-role-popup so the styling survives the popup being rebuilt under a new
   ID.

   Popup Maker writes width/height inline on .pum-container, and its theme
   stylesheet (pum-theme-5002) loads after this file — so every rule that
   touches the panel, overlay or close button needs !important. The
   .gd-role-popup rules do not: nothing else targets them.

   Chrome (overlay, panel, close) sits outside .gd-role-popup, so it is reached
   with :has(). Swap those for #pum-10934 / #popmake-10934 if :has() ever needs
   to go.

   Also set in the popup's Display settings: Size custom, width 795px, height
   AUTO — otherwise the inline height: 380px clips the content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Overlay — the page behind is blurred rather than dimmed
   -------------------------------------------------------------------------- */

.pum-overlay:has(.gd-role-popup) {
	background-color: rgba(255, 255, 255, .35) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* --------------------------------------------------------------------------
   8.2 The panel
   -------------------------------------------------------------------------- */

.pum-container:has(.gd-role-popup) {
	width: 795px !important;
	max-width: 92vw !important;
	height: auto !important;
	padding: 70px 140px 110px !important;
	background: #F6FCFE !important;
	border: 0 !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	overflow: hidden !important;   /* clips both decorations to the radius */
}

/* Decoration, top left — the pale Wriggle monogram. */
.pum-container:has(.gd-role-popup)::before {
	content: "";
	position: absolute;
	top: 15px;
	left: -6px;
	width: 120px;
	height: 130px;
	background: url(/wp-content/themes/total-child-theme/images/3.svg-1.svg) no-repeat center / contain;
	pointer-events: none;
}

/* Decoration, bottom right — the cyan hook, flush into the corner. */
.pum-container:has(.gd-role-popup)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 76px;
	height: 145px;
	background: url(/wp-content/themes/total-child-theme/images/Image.svg) no-repeat bottom right / contain;
	pointer-events: none;
}

.pum-container:has(.gd-role-popup) .pum-content {
	padding: 0 !important;
}

/* Content sits above both decorations. */
.gd-role-popup {
	position: relative;
	z-index: 1;
	text-align: center;
}

/* --------------------------------------------------------------------------
   8.3 Close — the button renders the word "CLOSE", so the label is hidden and
   the cross drawn from two rotated rules.
   -------------------------------------------------------------------------- */

.pum-container:has(.gd-role-popup) .pum-close {
	position: absolute;
	top: 28px;
	right: 30px;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: .85;
	transition: opacity .2s ease;
}

.pum-container:has(.gd-role-popup) .pum-close::before,
.pum-container:has(.gd-role-popup) .pum-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	background: #2E2A43;
	border-radius: 2px;
}

.pum-container:has(.gd-role-popup) .pum-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pum-container:has(.gd-role-popup) .pum-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.pum-container:has(.gd-role-popup) .pum-close:hover {
	background: none !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   8.4 Type
   -------------------------------------------------------------------------- */

/* Figma: Inter Bold 40/82.5. The comp trims that line box to the cap height,
   which CSS cannot do — so roughly 21px of half-leading sits above and below
   the heading here that is not in the comp. If the gap under it reads too
   large, take margin-bottom down to about 9px rather than touching the
   line-height. */
.gd-role-popup__title {
	margin: 0 0 30px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 82.5px;
	letter-spacing: normal;
	color: #2E2A43;
}

.gd-role-popup__intro {
	margin: 0 0 46px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: normal;
	color: #2E2A43;
}

/* --------------------------------------------------------------------------
   8.5 The two options
   -------------------------------------------------------------------------- */

.gd-role-popup__options {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

/* 13px vertical padding + 26px line-height + 2px borders = the 56px tall pill
   in the comp. */
.gd-role-popup__option {
	display: block;
	padding: 13px 20px;
	border: 2px solid #00B5E2;
	border-radius: 50px;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
	color: #2E2A43;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.gd-role-popup__option:hover,
.gd-role-popup__option:focus-visible {
	background-color: #00B5E2;
	color: #ffffff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   8.6 Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.pum-container:has(.gd-role-popup) {
		padding: 50px 24px 60px !important;
	}

	.pum-container:has(.gd-role-popup)::before {
		width: 80px;
		height: 87px;
	}

	.pum-container:has(.gd-role-popup)::after {
		width: 50px;
		height: 95px;
	}

	.gd-role-popup__title {
		font-size: 28px;
		line-height: 44px;
		margin-bottom: 16px;
	}

	.gd-role-popup__intro {
		margin-bottom: 32px;
	}
}


/* ==========================================================================
   9. FOOTER — Newsletter sign-up (Contact Form 7 + Mailchimp for WP)
   ==========================================================================

   The CF7 template is wrapped in .gd-sub / .gd-sub__row / .gd-sub__field so
   the three controls sit on one line. CF7 still runs wpautop over the
   template, so <p> and <br> land inside those wrappers — neutralised below
   rather than fought with a filter, which would change every form on the site.

   No fixed height on the controls: padding + line-height set it, so all three
   pills come out the same size (2 + 13 + 26.4 + 13 + 2 = 56.4px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Undo Contact Form 7's own block spacing
   -------------------------------------------------------------------------- */

#gd-footer-subscribe-form .wpcf7-form p {
	margin: 0;
}

#gd-footer-subscribe-form .wpcf7-form br {
	display: none;
}

/* CF7 reserves inline space for the loading spinner even when idle. */
#gd-footer-subscribe-form .wpcf7-spinner {
	position: absolute;
	margin: 0;
}

/* --------------------------------------------------------------------------
   9.2 The row
   -------------------------------------------------------------------------- */

/* flex-start, not center: when a validation tip appears under one field the
   others must not shift down to stay centred against it. */
#gd-footer-subscribe-form .gd-sub__row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	flex-wrap: wrap;
}

/* Email and select share the leftover width equally; min-width: 0 stops a long
   option label forcing the select wider than its share. */
#gd-footer-subscribe-form .gd-sub__field {
	flex: 1 1 180px;
	min-width: 0;
}

#gd-footer-subscribe-form .gd-sub__submit {
	flex: 0 0 auto;
}

/* The wrap CF7 puts around each control must not break the flex sizing. It is
   also the positioning context for the validation tip below. */
#gd-footer-subscribe-form .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* --------------------------------------------------------------------------
   9.3 The pills
   -------------------------------------------------------------------------- */

#gd-footer-subscribe-form .wpcf7-form input[type="email"],
#gd-footer-subscribe-form .wpcf7-form select {
	width: 100%;
	/* Total gives inputs and selects a bottom margin; zeroed so the flex gap on
	   .gd-sub__row is the only spacing in play. */
	margin: 0;
	padding: 13px 25px;
	border: 2px solid #ffffff;
	border-radius: 30px;
	background-color: #ffffff;
	box-shadow: 0px 0px 5px 1px #e0e0e070;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26.4px;
	color: #403a60;
	height: inherit;
}

#gd-footer-subscribe-form .wpcf7-form input[type="email"]::placeholder {
	color: #403a60;
	opacity: .65;
}

/* Native select arrow replaced with the comp's chevron. appearance: none is
   what removes the OS control; the padding-right keeps text clear of it. */
#gd-footer-subscribe-form .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 50px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23403a60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	cursor: pointer;
}

/* Same box model as the fields so all three pills match in height. */
#gd-footer-subscribe-form .wpcf7-form input[type="submit"] {
	margin: 0;
	padding: 13px 25px;
	border: 2px solid #00B5E2;
	border-radius: 30px;
	background-color: #00B5E2;
	box-shadow: none;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 26.4px;
	color: #2E2A43;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

#gd-footer-subscribe-form .wpcf7-form input[type="submit"]:hover {
	background-color: #0098bd;
	border-color: #0098bd;
}

/* --------------------------------------------------------------------------
   9.4 Consent line
   -------------------------------------------------------------------------- */

#gd-footer-subscribe-form .gd-sub__consent {
	margin-top: 14px;
}

#gd-footer-subscribe-form .mc4wp-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 30.4px;
	color: #ffffff;
	cursor: pointer;
}

/* Nudged down to sit on the text's optical centre rather than its line box. */
#gd-footer-subscribe-form .mc4wp-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 8px 0 0;
	accent-color: #1E6BFF;
	cursor: pointer;
}

#gd-footer-subscribe-form .mc4wp-checkbox a {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9.5 Validation states

   CF7 puts .wpcf7-not-valid on the offending control and appends a
   .wpcf7-not-valid-tip span inside its wrapper. Both are restyled here: the
   plugin's defaults are a red border and a cream/amber message box, neither of
   which works on the purple footer.
   -------------------------------------------------------------------------- */

#gd-footer-subscribe-form .wpcf7-form .wpcf7-not-valid {
	border-color: #FF8A8A;
}

#gd-footer-subscribe-form .wpcf7-not-valid-tip {
	display: block;
	margin: 8px 0 0;
	padding-left: 25px;
	border: 0;
	background: none;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #FFC9C9;
}

/* The form-level message. CF7 ships this as a bordered amber box; on the
   purple band a translucent pill reads far better. */
#gd-footer-subscribe-form .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 25px !important;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	border-radius: 30px;
	background: rgba(255, 255, 255, .08);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   9.6 Small screens — the three pills stack
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	#gd-footer-subscribe-form .gd-sub__field,
	#gd-footer-subscribe-form .gd-sub__submit {
		flex: 1 1 100%;
	}

	#gd-footer-subscribe-form .wpcf7-form input[type="submit"] {
		width: 100%;
	}
}


/* ==========================================================================
   10. MOBILE SPACING OVERRIDES (768px and below)
   ==========================================================================

   WPBakery 6.9's Design Options box holds a single margin/padding set with no
   breakpoints, so the desktop spacing on these rows cannot be dialled back for
   phones from the builder. These do it instead.

   !important throughout: the values being overridden come from the rows' own
   vc_custom_* rules, which WPBakery prints later in the head than this file.
   ========================================================================== */

@media (max-width: 768px) {

	/* Utility — drop on any vcex Spacing element to shrink it on phones. */
	body.gd-home .gd-reduce-spacing {
		height: 40px !important;
	}

	body.gd-home #gd-what-we-do-heading {
		margin-top: 50px !important;
		margin-bottom: 0 !important;
	}

	body.gd-home #gd-what-we-do-content {
		margin-top: 20px !important;
	}

	body.gd-home #gd-our-experience-heading {
		margin-top: 60px !important;
	}

	body.gd-home .gd-milestones {
		margin-bottom: 60px !important;
	}

	body.gd-home #best {
		margin-bottom: 60px !important;
	}
}