/*
 Theme Name:  akoca Child Theme
 Theme URL:    https://akoca-seo.co.uk/
 Description:  Child Theme for Divi
 Author:       Akoca SEO
 Author URI:   https://akoca-seo.co.uk/
 Template:     Divi
 Version:      1.0.0
*/

/* 
========================================
INSTRUCTIONS FOR DEVELOPERS
========================================
This section of code contains responsive heading styles, body text styles, and @font-face declarations for custom fonts. 
These styles are commented out by default to prevent them from affecting the site until they are needed. Follow the steps below 
to activate and customise them as per your project requirements.

1. ACTIVATING STYLES:
   - Remove the `/*` at the beginning and the end of any section you want to enable. This will make the styles active on the website.

2. CUSTOMISING PLACEHOLDERS:
   - Replace all instances of `PLACEHOLDER_MIN`, `PLACEHOLDER_CALC`, and `PLACEHOLDER_MAX` with the actual `clamp()` values for each heading or body text.
   - Replace `PLACEHOLDER_FONT` with your actual font family name in the `@font-face` declarations, and update the URLs to point to the correct font files.

3. ADDING/REMOVING STYLES:
   - If additional font weights or styles are required, copy the existing `@font-face` structure and adjust the weight/style accordingly.
   - Delete any unnecessary `@font-face` rules if the project doesn't require them.

5. DEACTIVATING STYLES:
   - To deactivate any section, re-wrap it in `/*`  comment tags.

By following these instructions, you ensure the template remains flexible and doesn't impact the project until customised.
=======================================
*/


/* Responsive Headings 
h1 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
h2 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
h3 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
h4 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
h5 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
h6 {font-size: clamp(PLACEHOLDER_MIN, PLACEHOLDER_CALC, PLACEHOLDER_MAX);}
*/

/* Responsive Body Text
body, p, .et_pb_text_inner, .et_pb_text_inner p, .dsm_icon_list_text, .dsm_business_hours, .dsm-content, .et_pb_blurb_description {
	font-size: clamp(PLACEHOLDER_MIN_BODY, PLACEHOLDER_CALC_BODY, PLACEHOLDER_MAX_BODY);
}
a {
	color: PLACEHOLDER_COLOR;
}

/* Custom Font Regular 
@font-face {
    font-display: swap;
    font-family: 'PLACEHOLDER_FONT';
    src: url('fonts/PLACEHOLDER_FONT-regular.woff2') format('woff2'),
         url('fonts/PLACEHOLDER_FONT-regular.woff') format('woff'); 
    font-weight: normal;
    font-style: normal;
}
*/

/* Custom Font Italic 
@font-face {
    font-display: swap;
    font-family: 'PLACEHOLDER_FONT';
    src: url('fonts/PLACEHOLDER_FONT-italic.woff2') format('woff2'),
         url('fonts/PLACEHOLDER_FONT-italic.woff') format('woff'); 
    font-weight: normal;
    font-style: italic;
}
*/

/* Custom Font Bold 
@font-face {
    font-display: swap;
    font-family: 'PLACEHOLDER_FONT';
    src: url('fonts/PLACEHOLDER_FONT-bold.woff2') format('woff2'),
         url('fonts/PLACEHOLDER_FONT-bold.woff') format('woff'); 
    font-weight: bold;
    font-style: normal;
}

/* Poppins - Regular 
@font-face {
    font-family: 'Poppins';
    font-display: swap;
    src: url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-regular.woff2') format('woff2'),
         url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* Poppins - Bold 
@font-face {
    font-family: 'Poppins';
    font-display: swap;
    src: url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-700.woff2') format('woff2'),
         url('/wp-content/themes/akoca-Child-Theme/fonts/poppins-v21-latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

*/

/*****Add any custom CSS below this line*****/

/* =========================================================================
   SELF-HOSTED FONTS — Nicole Backhouse
   Added 19/09/2026 following the Font Upload SOP.

   Two families, and they carry the whole design:
     Newsreader      the serif. Headings, the header wordmark, the pull quotes.
     Instrument Sans the sans. Body copy, navigation, buttons, captions.

   THE PATHS ARE RELATIVE ON PURPOSE. A url() in a stylesheet resolves against
   the stylesheet's own location, so 'fonts/x.woff2' keeps working if the theme
   is renamed or the site moves host. An absolute '/wp-content/themes/...' path
   does not, and a leading slash resolving against the wrong host has already
   cost this agency up to three days on another client site. The commented
   Poppins placeholders further up this file use the absolute form; do not copy
   them.

   WOFF2 IS LISTED FIRST AND WOFF SECOND. The browser takes the first format it
   understands, so the order is what makes every current browser take the
   smaller file and only old ones fall back.

   font-display: swap is on every face deliberately. It shows the fallback face
   immediately rather than holding the text invisible, which is what stops a
   slow font request turning into blank headings.

   DIVI'S OWN GOOGLE FONTS SETTING MUST STAY DISABLED for these to be the only
   fonts that load. Divi > Theme Options > General > Use Google Fonts.
   ========================================================================= */

/* Newsreader — the serif, as a VARIABLE font: one file per style and subset
   covering weights 300 to 500 (roman) and 300 to 400 (italic) and the optical
   size axis 6 to 72, the same files the signed-off design loads from Google.
   Fixed instances render one optical size at every size, so a 52px heading
   set 2% narrower than the design (Divi build standard, the fonts paragraph;
   16/10/2026). font-optical-sizing is left at its default, auto, so the browser
   picks the optical size from the font size. The unicode-range lines are
   Google's, so a page in English fetches only the latin files.
   No WOFF fallback: every browser that supports variable fonts reads WOFF2. */

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('fonts/newsreader-v26-variable-roman-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('fonts/newsreader-v26-variable-roman-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url('fonts/newsreader-v26-variable-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url('fonts/newsreader-v26-variable-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Instrument Sans — the sans. Regular, medium and semibold, roman only:
   the design sets no italic sans anywhere, so none is loaded. */

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-sans-v4-latin_latin-ext-regular.woff2') format('woff2'),
         url('fonts/instrument-sans-v4-latin_latin-ext-regular.woff') format('woff');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/instrument-sans-v4-latin_latin-ext-500.woff2') format('woff2'),
         url('fonts/instrument-sans-v4-latin_latin-ext-500.woff') format('woff');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/instrument-sans-v4-latin_latin-ext-600.woff2') format('woff2'),
         url('fonts/instrument-sans-v4-latin_latin-ext-600.woff') format('woff');
}

/* The families, assigned here and nowhere else (Divi build standard, "Fonts
   are loaded AND assigned in the child theme"). Divi's two family variables
   point at the site's faces, with !important on those two lines only: the
   Visual Builder sets its own copy of these variables after the child theme
   loads, and without it Heading modules show Divi's default font in the
   builder only. The selector is :root:root because Divi 5.14's builder writes
   its own copy as `:root { --et_global_heading_font: 'Open Sans' !important }`
   (the style tag classed et-vb-global-variables-numbers, printed after this
   file), so a plain :root loses on order; the doubled selector wins on
   specificity and changes nothing on the front end (found R6, 16/10/2026).
   Still needed on Divi 5.15.1: re-tested 16/10/2026 with a plain :root, and
   the builder showed every heading and paragraph in Open Sans again.
   Divi's Theme Options fonts stay at their default, and no
   preset or module types a family. Size and weight are NOT set here: they are
   the global variables and the presets. */
:root:root {
    --et_global_heading_font: 'Newsreader', Georgia, 'Times New Roman', serif !important;
    --et_global_body_font: 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
body { font-family: var(--et_global_body_font); }
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 { font-family: var(--et_global_heading_font); }

/* =========================================================================
   WHAT THIS FILE HOLDS, since the rebuild of 15/10/2026
   The header, footer and homepage are built in Divi on presets, and every
   value the builder has a control for lives there. What stays here is only
   what Divi cannot express: the fonts, the Divi defaults it gives no control
   for (heading padding, reduced motion), a workaround for a Divi fault
   (grid presets), the eyebrow's drawn bar, the
   scripts' own dependencies (the Menu button, the FAQ and its ease, the
   practitioners' Read more, the skip link), the gallery's swipe snap, and the two plugins' markup (Trust Index, Fluent Forms), which no
   Divi setting reaches. Colours are read from Divi's global colours
   (--gcid-*), so a colour changed in the Variable Manager changes here too;
   each carries its own value as the fallback for a page where Divi does not
   print that colour. The file before the rebuild is in development/backups/
   (20261015-before-rebuild-child-style.css).
   ========================================================================= */

/* =========================================================================
   DIVI'S OWN DEFAULTS, RESET
   Divi's parent stylesheet sets these and they are not anybody's decision.
   Each one below cost another akoca build about an hour to trace, because the
   assumption was that a person had set it (G&O Engineers, 11/09/2026).

   EVERY SELECTOR HERE IS PREFIXED WITH `body` ON PURPOSE. Divi's inlined
   blocks load AFTER the child theme, so a bare `h1` ties on specificity and
   loses on source order. One extra specificity point beats it; reaching for
   !important would only have to be beaten by another !important later.
   ========================================================================= */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    /* Divi sets `padding-bottom: 10px` on every heading. The design spaces
       headings with margins on the blocks around them, so this padding shows
       up as an unexplained gap under every title. */
    padding-bottom: 0;
}

/* =========================================================================
   THE EYEBROW'S BAR — a DEPENDENCY of the Eyebrow presets.
   The design draws a short hairline beside every eyebrow (a 2px upright
   before the words; under them, 26px wide, when the eyebrow is centred).
   Divi has no control that draws a mark beside text, so the Eyebrow presets
   (Text and Heading modules) carry the class nb-eyebrow, plus
   nb-eyebrow-centred and nb-eyebrow-on-dark on their variants, and the bar is
   drawn here. Everything else about the eyebrow (size, weight, small caps,
   colour, alignment) is on the preset. Added 15/10/2026 (rebuild, R3).
   ========================================================================= */
.nb-eyebrow .et_pb_text_inner,
.nb-eyebrow .et_pb_heading_container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nb-eyebrow .et_pb_text_inner::before,
.nb-eyebrow .et_pb_heading_container::before {
    content: "";
    flex: 0 0 auto;
    width: 2px;
    height: 1.05em;
    background: var(--gcid-nb-hair, #8B8494);
}
.nb-eyebrow-on-dark .et_pb_text_inner::before,
.nb-eyebrow-on-dark .et_pb_heading_container::before {
    background: var(--gcid-nb-cream60, rgba(252, 250, 247, 0.6));
}
.nb-eyebrow-centred .et_pb_text_inner {
    flex-direction: column;
    gap: 9px;
}
.nb-eyebrow-centred .et_pb_text_inner::before {
    order: 2;
    width: 26px;
    height: 2px;
}

/* =========================================================================
   THE TIMELINE'S LINE AND SQUARES — a DEPENDENCY of the Timeline presets.
   The design joins the steps of a timeline with a 1px hairline and marks
   each step with a 13px slate square: across the top when the steps sit in a
   row, down the left once they stack. Divi has no control that draws a line
   behind siblings or a mark beside a group, so the Column – Timeline preset
   carries the class nb-timeline and the Timeline Step preset nb-timeline-step,
   and only the two marks are drawn here. The steps' padding (room for the
   marks), their gap, their width and the switch to a column at 980px are all
   on those presets. Both marks are absolutely placed, so they take no part in
   the column's flex layout. Added 15/10/2026 (rebuild, R5).
   ========================================================================= */
.nb-timeline {
    position: relative;
}
.nb-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    height: 1px;
    background: var(--gcid-nb-hair, #8B8494);
}
.nb-timeline-step {
    position: relative;
}
.nb-timeline-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    background: var(--gcid-primary-color, #3B3841);
}
/* 980px is Divi's tablet breakpoint, where the Timeline presets stack the
   steps (the design's 1024px, moved: run-sheet, Filed 15 and 22). */
@media (max-width: 980px) {
    .nb-timeline::before {
        right: auto;
        bottom: 6px;
        width: 1px;
        height: auto;
    }
    .nb-timeline-step::before {
        top: 4px;
    }
}

/* =========================================================================
   THE QUOTED HEADING — a DEPENDENCY of the homepage's About heading.
   The About heading is her own line, so the design sets it as a quotation:
   an oversized opening mark in the serif, in lilac, laid behind the first
   words. Divi has no control that draws a glyph behind a heading, so the
   Heading module carries the class nb-quoted (a one-off, labelled in the
   builder) and the mark is drawn here. The heading's own type is its preset.
   "\201C" is the escape for the opening mark, so the file's encoding cannot
   garble it. Added 15/10/2026 (rebuild, R5).
   ========================================================================= */
.nb-quoted {
    position: relative;
}
.nb-quoted::before {
    content: "\201C";
    position: absolute;
    left: -12px;
    top: -22px;
    z-index: 0;
    font-family: var(--et_global_heading_font);
    font-size: 170px;
    line-height: 1;
    color: var(--gcid-nb-lilac, #E8DDEB);
}
/* The heading sits above the mark. */
.nb-quoted .et_pb_heading_container {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   GRID PRESETS — a WORKAROUND for a Divi 5.14.0 fault, not a design value.
   A row, column or group whose grid comes from a PRESET gets Divi's
   et_grid_row / et_grid_column / et_grid_group class, but Divi loads the
   stylesheet that makes those classes a grid (css_grid_grid.css) only when
   its feature check finds "display":"grid". That check merges every preset on
   the page into one object first, so a flex preset met later on the page
   overwrites the grid and the stylesheet is never loaded: the row renders as
   a block (found on a probe page, 15/10/2026, rebuild R3). These three lines
   are Divi's own base rule, copied, so a grid preset works wherever it sits.
   The tracks and gaps stay on the presets. Delete this block once Divi loads
   its grid CSS for preset-only grids (re-test after each Divi update).
   Re-tested on Divi 5.15.1, 16/10/2026: the merge is unchanged
   (DynamicAssetsDetection.php still folds every preset into one object with
   array_replace_recursive before it looks for a grid). Homepage, header and
   footer measured right without this block, but only because the footer's
   row types its own grid, which loads Divi's grid CSS on every page. Kept, so
   a grid preset does not depend on how the footer happens to be built.
   ========================================================================= */
.et_grid_row,
.et_grid_column,
.et_grid_group {
    display: grid;
    column-gap: var(--horizontal-gap);
    row-gap: var(--vertical-gap);
}

/* =========================================================================
   STACKED COLUMNS FROM PRESETS — a WORKAROUND for a Divi 5.15.1 fault, not a
   design value. A column whose tablet / phone width comes only from a PRESET
   gets Divi's et_flex_column_24_24_<breakpoint> class, but Divi prints the
   rule behind that class only when some module on the page TYPES a width at
   that breakpoint. The homepage happens to have two such columns; About has
   none, so its three value cards stayed three across on a phone (About QA
   pass 1, 16/10/2026). These are Divi's own three rules, copied, so a preset's
   full-width stacking works on every page. Delete once Divi prints them for
   preset-only widths (re-test after each Divi update).
   ========================================================================= */
@media only screen and (max-width: 980px) { .et_flex_column_24_24_tablet { width: calc(100% - var(--horizontal-gap-parent, 5.5%)*0/1); } }
@media only screen and (max-width: 767px) { .et_flex_column_24_24_phoneWide { width: calc(100% - var(--horizontal-gap-parent, 5.5%)*0/1); } }
@media only screen and (max-width: 479px) { .et_flex_column_24_24_phone { width: calc(100% - var(--horizontal-gap-parent, 5.5%)*0/1); } }

/* =========================================================================
   REDUCED MOTION — a Divi default it gives no control for.
   Divi 5.14 plays its scroll animations even when the visitor has asked for
   reduced motion (operations room, divi5-knowledge/known-faults-by-version.md).
   The design's reveal is off under prefers-reduced-motion, so animated
   modules are shown in place. !important beats the opacity and animation
   Divi writes on .et_animated and its et_pb_animation_* classes.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .et_animated {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================================
   THE MENU BUTTON — a DEPENDENCY of js/scripts.js.
   Divi 5 does not load its Menu module script on a Theme Builder header, so
   its own hamburger never opens (Black Dog, 28/09/2026). The header's "Menu"
   button is a Code module with the class nb-burger; at 980px and below (Divi's
   tablet breakpoint, so the builder's tablet view shows what the page does;
   the design switched at 1024px, moved 15/10/2026 with the other 768px steps)
   the script toggles .nb-menu-open on the header section (class nb-header),
   and the navigation group (class nb-header-nav) opens below the bar. A
   <button> inside a Code module has no builder controls, so its look is here.
   The icon is the three-line SVG inside the button (in the Code module, not
   drawn here); this sets only its size, colour and the 44px touch target
   (Jordan, 16/10/2026: an icon, no "MENU" text, no border).
   The panel's own ground, padding and rule are set on the group in the
   builder, at tablet and phone; only showing, hiding and placing it is here,
   because that depends on the script's class.
   ========================================================================= */

/* Divi's own mobile hamburger never runs here. Hidden for good. */
.nb-header .et_mobile_nav_menu { display: none !important; }

/* The button: hidden above 980px. */
.nb-burger { display: none; }
.nb-burger button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;   /* the icon's right edge on the content edge, the box still 44px */
    padding: 0;
    background: none;
    border: 0;
    color: var(--gcid-heading-color, #2B292F);
    cursor: pointer;
}
.nb-burger button svg { display: block; width: 24px; height: 24px; }

@media (max-width: 980px) {
    .nb-burger { display: block; }
    /* The panel hangs from the header section, so the row and column between
       must not become its positioning box. */
    .nb-header { position: relative; }
    .nb-header.et_pb_section .et_pb_row,
    .nb-header.et_pb_section .et_pb_column { position: static !important; }
    /* Opens and closes with a 250ms ease-out (Jordan, 16/10/2026): it drops
       into place and fades. Divi has no transition for a state set by a
       script's class. visibility, not display, so the transition can run and
       the closed links still leave the tab order. */
    .nb-header-nav {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s ease-out, transform .25s ease-out, visibility 0s linear .25s;
    }
    .nb-header.nb-menu-open .nb-header-nav {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .25s ease-out, transform .25s ease-out, visibility 0s;
    }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
    .nb-header-nav,
    .nb-header.nb-menu-open .nb-header-nav { transition: none; transform: none; }
}

/* THE WORDMARK AND FOOTER CREDIT: NO BODY-LINK UNDERLINE (18/10/2026). Text – Body is the site's default
   Text preset, so a Text module given no preset takes its underlined links; the header and footer wordmarks
   and the footer credit are such modules. Divi cannot switch an underline off on the module (an empty
   Style there inherits the preset's), so in the header and footer it is switched off here. */
.et-l--header .preset--module--divi-text--default .et_pb_text_inner a,
.et-l--footer .preset--module--divi-text--default .et_pb_text_inner a { text-decoration: none; }

/* THE MAIN MENU'S LINKS — Divi 5.14's Menu module offers only its links' font
   (no spacing, no direction), so the design's 30px between links and their
   44px touch height are here, replacing Divi's own 11px side padding, 8px top
   margin and 8px bottom padding. Font, colour and hover are on the module. */
.nb-header-nav .et_pb_menu .et-menu { margin: 0; gap: 30px; }
.nb-header-nav .et_pb_menu .et-menu > li { margin: 0; padding: 0; }
.nb-header-nav .et_pb_menu .et-menu > li > a { display: flex; align-items: center; min-height: 44px; padding: 0; }
/* The links' underline follows the Secondary button's border (Jordan, 17/10 and 18/10/2026): drawn
   always, transparent and 1px at rest. On hover and keyboard focus it appears at once and grows from 1px
   to 2px in one quick ease (.14s, no pause between: Jordan wanted one pixel growing into two, not two
   steps), as the Secondary's border does on hover. The current page holds at 1px
   (the design's [aria-current]) and thickens to 2px only when hovered. An underline switched on and off
   cannot ease; Divi's Menu has no control for an underline's colour, thickness or the current page's
   underline. The colours themselves are the module's: link, hover and Active Link Color, all in the
   builder. Above 980px only: the open panel below uses its rules instead. */
@media (min-width: 981px) {
    .nb-header-nav .et_pb_menu .et-menu > li > a {
        text-decoration-line: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
        transition: color .18s ease, text-decoration-color .06s linear, text-decoration-thickness .14s ease-out;
    }
    .nb-header-nav .et_pb_menu .et-menu > li.current-menu-item > a { text-decoration-color: currentColor; }
    .nb-header-nav .et_pb_menu .et-menu > li > a:hover,
    .nb-header-nav .et_pb_menu .et-menu > li > a:focus-visible {
        text-decoration-color: currentColor;
        text-decoration-thickness: 2px;
    }
}
@media (prefers-reduced-motion: reduce) { .nb-header-nav .et_pb_menu .et-menu > li > a { transition: none !important; } }

/* In the open panel the links run down the page, one per row, each with a
   rule under its own words only, not the panel's width (Jordan, 16/10/2026),
   and none under the last. Divi hides its menu below 980px for its own hamburger, which never
   runs here (above), so it is shown again inside the panel. */
@media (max-width: 980px) {
    .nb-header-nav .et_pb_menu .et_pb_menu__menu { display: block; }
    /* The module is full width from the builder; Divi's own wrappers inside it
       have no control, so they are stretched here for the rules to run across. */
    .nb-header-nav .et_pb_menu .et_pb_menu_inner_container,
    .nb-header-nav .et_pb_menu .et_pb_menu__wrap,
    .nb-header-nav .et_pb_menu .et_pb_menu__menu,
    .nb-header-nav .et_pb_menu .et-menu-nav,
    .nb-header-nav .et_pb_menu .et-menu { width: 100%; }
    .nb-header-nav .et_pb_menu .et-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .nb-header-nav .et_pb_menu .et-menu > li { align-self: flex-start; }
    .nb-header-nav .et_pb_menu .et-menu > li:not(:last-child) > a { border-bottom: 1px solid var(--gcid-nb-rule, rgba(43, 41, 47, 0.14)); }
    /* The panel's rule is the link's underline here (Jordan, 18/10/2026: one line, not a text underline
       as well): on hover it darkens to the link's colour, and on the current page it is also doubled to
       2px, the second pixel an inset shadow so the row does not move. The last link has no rule, so the
       current page draws one there too. The hover darkening is for a mouse only: on a phone a tap sets
       :hover for the moment before the next page loads, which flashed the rule (Jordan, 18/10/2026). */
    .nb-header-nav .et_pb_menu .et-menu > li > a { transition: color .18s ease, border-color .18s ease, box-shadow .18s ease; }
    /* The Menu module's own hover font carries an underline (it is the desktop design's); in the panel the
       rule is the underline, so the text never takes one, hovered, tapped or focused (Jordan, 18/10/2026). */
    .nb-header-nav .et_pb_menu .et-menu > li > a,
    .nb-header-nav .et_pb_menu .et-menu > li > a:hover,
    .nb-header-nav .et_pb_menu .et-menu > li > a:focus,
    .nb-header-nav .et_pb_menu .et-menu > li > a:active { text-decoration: none !important; }
    .nb-header-nav .et_pb_menu .et-menu > li > a:focus-visible { border-bottom-color: currentColor; }
    @media (hover: hover) { .nb-header-nav .et_pb_menu .et-menu > li > a:hover { border-bottom-color: currentColor; } }
    .nb-header-nav .et_pb_menu .et-menu > li.current-menu-item > a {
        border-bottom: 1px solid currentColor;
        box-shadow: inset 0 -1px 0 currentColor;
    }
    .nb-header-nav .et_pb_menu .et-menu > li > a { min-height: 48px; }
}

/* =========================================================================
   THE FAQ — a DEPENDENCY of js/scripts.js.
   Divi's toggle script does not run on this site (technical register), so the
   script wraps each question in a real <button> inside its heading and sets
   .et_pb_toggle_open / .et_pb_toggle_close itself. These rules are what that
   needs and nothing more: Divi's own rule hiding a closed answer does not load
   here, and the injected button must look like the heading it sits in. The
   rows' look (rules, the open row's ground, padding, type) is on the Toggle
   module's preset in the builder. Any group with the class nb-faq gets it.
   ========================================================================= */
.nb-faq .et_pb_toggle_title { cursor: pointer; }
/* The whole closed row opens its answer (scripts.js, 20/10/2026), so the pointer says so;
   an open answer's text keeps the normal cursor. */
.nb-faq .et_pb_toggle_close { cursor: pointer; }
/* Closed answers are hidden. Divi's own rule for this does not load here. */
.nb-faq .et_pb_toggle_close .et_pb_toggle_content { display: none !important; }
/* The answer's reading measure, 74 characters (the design's .ans). The Toggle
   module has no width control for its body, only its type (R5, 15/10/2026). */
.nb-faq .et_pb_toggle_content { max-width: 74ch; }
.nb-faq-q {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.nb-faq-q:focus-visible { outline: 2px solid var(--gcid-primary-color, #3B3841); outline-offset: 2px; }
/* While an answer eases shut (250ms), the script marks its row nb-faq-closing so
   the rule above does not hide it before the ease has run (G1b, 16/10/2026). */
.nb-faq .et_pb_toggle_close.nb-faq-closing .et_pb_toggle_content { display: flex !important; }

/* =========================================================================
   THE GALLERY'S SWIPE ON PHONES — a DEPENDENCY of the Gallery group (class
   nb-swipe), added 16/10/2026 (G1b). On both phone sizes the two photographs
   stay side by side in a row that scrolls sideways, each 85% wide so the next
   one peeks: the row's direction, no wrap, the sideways scroll and the 85% are
   all set in the builder (the group's Layout and Overflow, each Image's
   Sizing, at Phone and Phone Wide). Divi has no control for scroll snapping,
   which makes a swipe stop on a photograph rather than between two, so that
   alone is here. It does nothing where the row does not scroll (tablet up).
   ========================================================================= */
.nb-swipe {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.nb-swipe > .et_pb_module { scroll-snap-align: start; }

/* =========================================================================
   THE PRACTITIONERS' READ MORE — a DEPENDENCY of js/scripts.js, added
   16/10/2026 (G1b). Where a bio runs past its portrait, the script marks the
   card nb-clamped, cuts the bio to the portrait's height and adds a "Read
   more" button. This is the cut's ease and the button's look, which is the
   Button - Tertiary preset's (15px, Semi Bold (600), muted, a 1px rule under
   it, 2px and slate on hover): an injected button takes no Divi preset, so a
   change to that preset is repeated here.
   ========================================================================= */
.nb-pracs .nb-clamped .et_pb_team_member_description_content {
    overflow: hidden;
    transition: max-height 250ms ease;
}
.nb-more {
    all: unset;
    display: inline-block;
    margin-top: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--gcid-secondary-color, #5F5C69);
    color: var(--gcid-secondary-color, #5F5C69);
    font-family: var(--et_global_body_font);
    font-size: var(--gvid-nb-bodysm, 15px);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.02em;
    cursor: pointer;
    /* The preset's hover timing, matched to the menu's (batch 3 D8). */
    transition: color 140ms ease-out, border-color 140ms ease-out,
        border-bottom-width 140ms ease-out, padding-bottom 140ms ease-out;
}
.nb-more[hidden] { display: none; }
.nb-more:hover,
.nb-more:focus-visible {
    color: var(--gcid-primary-color, #3B3841);
    border-bottom: 2px solid var(--gcid-primary-color, #3B3841);
    padding-bottom: 1px;
}
.nb-more:focus-visible { outline: 2px solid var(--gcid-primary-color, #3B3841); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .nb-pracs .nb-clamped .et_pb_team_member_description_content,
    .nb-more { transition: none; }
}
/* Its 44px tap area: the same invisible box as THE TEXT LINKS' TAP AREA
   below, for the same reason (the rule must stay 2px under the words). */
.nb-more { position: relative; }
.nb-more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    margin-top: -22px;
}

/* =========================================================================
   THE PRACTITIONERS, TWO ACROSS FROM 981 TO 1024PX — a DEPENDENCY of the
   width band, added 20/10/2026 (responsive pass, batch 3 D1). Person -
   Practitioner (n5personpr) is three across on desktop and two on tablet,
   but Divi's tablet range stops at 980px (Filed 22) and its Tablet Wide
   breakpoint is off sitewide, so no builder control reaches 981-1024px.
   There three cards beside a 165px portrait left each bio about 100px wide
   and the names wrapping. Here they take the tablet's two across. Applies to
   every Practitioner List (class nb-pracs: Home, Retreats), and to the
   "Available on request" panel that ends Retreats' list. !important because
   Divi prints a width typed on a module (that panel's) with !important; the
   longer selector beats the preset's own width as well.
   ========================================================================= */
@media (min-width: 981px) and (max-width: 1024px) {
    .nb-pracs.et_pb_group > .et_pb_module {
        width: calc((100% - clamp(24px, 3vw, 38px)) / 2) !important;
    }
}

/* =========================================================================
   SKIP LINK — a DEPENDENCY of functions.php. The link is printed by the theme
   before the header, outside anything the builder reaches; hidden until it
   has keyboard focus.
   ========================================================================= */
.nb-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100000;
    padding: 12px 18px;
    background: var(--gcid-primary-color, #3B3841);
    color: var(--gcid-nb-cream, #FCFAF7);
    font-family: var(--et_global_body_font);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}
.nb-skip:focus { top: 12px; outline: 2px solid var(--gcid-nb-cream, #FCFAF7); outline-offset: 2px; }

/* =========================================================================
   KEYBOARD FOCUS — an accessibility DEPENDENCY, added 20/10/2026 (Elle,
   batch 2, C3). Divi has no focus setting for a link, button or field, and
   its defaults draw nothing, so a keyboard user could not see where they were.

   A 2px Slate outline, 2px clear of the element, on :focus-visible only: the
   browser shows it after a key press and not after a click or a tap, so mouse
   and touch users see no change. Text fields are the exception: a browser
   counts a click into one as focus-visible, so theirs is shown only while
   html carries nb-kbd, which js/scripts.js (KEYBOARD FOCUS) sets on the Tab
   key and clears on the next click or tap. (":not([hidden])" on select and
   textarea only lifts them past the forms' own ".ff-el-form-control:focus".)

   On a dark ground Slate would not show, so the footer and anything on an
   "On Dark" preset (Buttons Primary / Secondary / Tertiary On Dark, Text –
   Body On Dark: the photo heroes and closing banners) take Cream, as the
   footer sign-up's own focus already did. A new dark section whose links sit
   on a preset not named here needs its preset added to the second list.
   The FAQ question and the practitioners' Read more keep their own rules
   above, at the same 2px offset.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="submit"]:focus-visible,
.nb-kbd input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.nb-kbd select:not([hidden]):focus,
.nb-kbd textarea:not([hidden]):focus {
    outline: 2px solid var(--gcid-primary-color, #3B3841);
    outline-offset: 2px;
}
.et-l--footer a:focus-visible,
.et-l--footer button:focus-visible,
.et-l--footer input[type="checkbox"]:focus-visible,
.et-l--footer input[type="submit"]:focus-visible,
.nb-kbd .et-l--footer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.nb-kbd .et-l--footer select:focus,
.nb-kbd .et-l--footer textarea:focus,
.preset--module--divi-button--n5btnprimd a:focus-visible,
.preset--module--divi-button--n5btnsecd1 a:focus-visible,
.preset--module--divi-button--n5btnterd1 a:focus-visible,
a.preset--module--divi-button--n5btnprimd:focus-visible,
a.preset--module--divi-button--n5btnsecd1:focus-visible,
a.preset--module--divi-button--n5btnterd1:focus-visible,
.preset--module--divi-text--n5txbodyd1 a:focus-visible {
    outline-color: var(--gcid-nb-cream, #FCFAF7);
}
/* Plugins that take the outline off their own controls: Fluent Forms
   (".ff-default .ff_btn_style:focus { outline: 0 }") on the footer's Sign up,
   and Trust Index on the reviews' Write a review and arrows. The first needs
   only a more specific selector; Trust Index sets its own with !important in
   places, so its controls take !important here (the REVIEWS rules below do
   the same, for the same reason). */
.et-l--footer .nb-signup-wrap .ff-btn-submit:focus-visible {
    outline: 2px solid var(--gcid-nb-cream, #FCFAF7);
    outline-offset: 2px;
}
.nb-reviews .ti-widget :is(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--gcid-primary-color, #3B3841) !important;
    outline-offset: 2px !important;
}

/* =========================================================================
   REVIEWS — the Trust Index widget, [trustindex no-registration=google],
   connected 29/09/2026. Added the same day to match signed-off Design 1's
   reviews block (Slider layout, Drop shadow style).

   A MAINTENANCE ITEM, per the Trust Index SOP: this restyles a plugin's own
   markup, so a plugin update can move a class name and undo any of it. Check
   the homepage after every Trust Index update.

   Why each change, and nothing beyond these:
   - Corners 3px, not the widget's 12px: the client's own rule is "squared,
     not rounded", and the design draws 3px.
   - The Drop shadow style's shadow, which the design draws and this widget
     style omits.
   - The design's system font stack, not the widget's bundled Poppins: the
     house rule keeps Poppins off client pages bar the akoca credit.
   - Sizes and greys as the design's .ti block. The Google colours and gold
     stars are the widget's and are left alone (HANDOVER: do not recolour).
   ========================================================================= */
.nb-reviews .ti-widget.ti-goog,
.nb-reviews .ti-widget.ti-goog * {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
/* The summary column, 230px as the design. */
.nb-reviews .ti-widget.ti-goog .ti-footer {
    flex: 0 0 230px !important;
    max-width: 230px !important;
    width: 230px !important;
}
.nb-reviews .ti-widget.ti-goog .ti-footer .ti-profile-img img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(43, 41, 47, 0.14);
    object-fit: cover;
}
.nb-reviews .ti-widget.ti-goog .ti-footer .ti-name { font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #1A1A1A !important; }
.nb-reviews .ti-widget.ti-goog .ti-footer .ti-rating-text { font-size: 14px !important; color: #5B5B5B !important; }
.nb-reviews .ti-widget.ti-goog .ti-header-write-btn {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    padding: 9px 18px !important;
    border: 1px solid #D8D5D2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    box-shadow: none !important;
}
.nb-reviews .ti-widget.ti-goog .ti-header-write-btn:hover { background: #F5F3F1 !important; }

/* The cards: 3px corners, the Drop shadow, 18px inside. */
.nb-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
    border-radius: 3px !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14) !important;
    padding: 18px !important;
    border: 0 !important;
}
/* Room for the shadow, so the slider's overflow does not clip it. */
.nb-reviews .ti-widget.ti-goog .ti-reviews-container-wrapper { padding-top: 6px !important; padding-bottom: 8px !important; }
.nb-reviews .ti-widget.ti-goog .ti-review-item .ti-name { font-size: 15px !important; font-weight: 600 !important; color: #1A1A1A !important; }
.nb-reviews .ti-widget.ti-goog .ti-review-item .ti-date { font-size: 13px !important; color: #6B6B6B !important; }
.nb-reviews .ti-widget.ti-goog .ti-review-content,
.nb-reviews .ti-widget.ti-goog .ti-review-content * { font-size: 14px !important; line-height: 1.5 !important; color: #2A2A2A !important; }
.nb-reviews .ti-widget.ti-goog .ti-read-more,
.nb-reviews .ti-widget.ti-goog .ti-read-more * { font-size: 13px !important; color: #6B6B6B !important; }

/* The arrows: white circles with a hairline and a soft shadow, as the design. */
.nb-reviews .ti-widget.ti-goog .ti-controls .ti-next,
.nb-reviews .ti-widget.ti-goog .ti-controls .ti-prev {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #E2E0DE !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

/* Phones and tablets: the summary sits above the cards, as the design's
   single column below 1025px. */
@media (max-width: 1024px) {
    .nb-reviews .ti-widget.ti-goog .ti-footer {
        flex: 1 1 100% !important;
        max-width: none !important;
        width: 100% !important;
        margin-bottom: 18px;
    }
}

/* Reviews: reserve the widget's height before it loads. Trust Index renders
   lazily, as the block nears the viewport, so the block went from 0px to its
   full height mid-scroll and pushed everything below it down: a layout shift
   of 0.072 measured 29/09/2026, where the Animations SOP requires 0. Heights
   are the widget's own, measured loaded at each width (257px wide, 442px
   stacked, 485px on a 390px phone). */
.nb-reviews { min-height: 257px; }
@media (max-width: 600px) { .nb-reviews { min-height: 440px; } }
@media (max-width: 420px) { .nb-reviews { min-height: 480px; } }


/* =========================================================================
   FOOTER SIGN-UP — Fluent Forms form 3, [fluentform id="3"], 29/09/2026.
   Restyled to the design's version 2 on 16/10/2026 (Jordan's D2; the design
   is 02-primary/base.css, ".signup"): visible labels in the label style,
   fields with only a bottom rule, the consent line BEFORE the button.
   Fluent Forms' own settings carry what they can: labels on top, no
   placeholders, no asterisks, and the field order (name, email, consent,
   then its submit button, which Fluent always prints last). Everything
   below is what Fluent Forms has no setting for, keyed off its own classes,
   so a plugin update can move one: check after each update.
   ========================================================================= */
.nb-signup-wrap .frm-fluent-form { margin-top: 14px; }
.nb-signup-wrap .frm-fluent-form fieldset {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
.nb-signup-wrap .ff-el-group { margin: 0 !important; }

/* The labels: the design's label style (12px, Semi Bold (600), spaced
   capitals), cream at 82%. Fluent sets its own label font and colour. */
.nb-signup-wrap .ff-el-input--label { margin-bottom: 6px; padding: 0; }
.nb-signup-wrap .ff-el-input--label label {
    margin: 0;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-label, 12px) !important;
    line-height: 1.6;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(252, 250, 247, .82) !important;
}

/* The fields: no box, only a bottom rule (cream at 60%, 5.1:1 on slate);
   2px of cream on focus. Fluent draws a bordered, rounded, white box. */
.nb-signup-wrap .ff-el-form-control {
    min-height: 44px;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(252, 250, 247, .6) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gcid-nb-cream, #FCFAF7) !important;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-bodylg, 16px) !important;
    box-shadow: none !important;
}
.nb-signup-wrap .ff-el-form-control:focus,
.nb-signup-wrap .ff-el-form-control:focus-visible {
    outline: 0;
    border-bottom-color: var(--gcid-nb-cream, #FCFAF7) !important;
    box-shadow: 0 1px 0 0 var(--gcid-nb-cream, #FCFAF7) !important;
}

/* The consent line and its tick square: empty with a cream edge; ticked,
   the cream square with a slate tick. Square, as the client's brand. */
.nb-signup-wrap .ff_tc_label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 2px 0 0;
    cursor: pointer;
}
.nb-signup-wrap .ff_t_c,
.nb-signup-wrap .ff_t_c a {
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-small, 13px) !important;
    line-height: 1.5 !important;
    color: rgba(252, 250, 247, .88) !important;
}
.nb-signup-wrap .ff_t_c a { color: var(--gcid-nb-cream, #FCFAF7) !important; }
.nb-signup-wrap .ff_tc_checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--gcid-nb-cream, #FCFAF7);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}
.nb-signup-wrap .ff_tc_checkbox input[type="checkbox"]:checked {
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23FCFAF7'/%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.8' fill='none' stroke='%233B3841' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat;
}
.nb-signup-wrap .ff_tc_checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--gcid-nb-cream, #FCFAF7); outline-offset: 2px; }

/* The button: Primary on dark, at its own width, after the consent line.
   Fluent's submit button takes no Divi preset. */
.nb-signup-wrap .ff_submit_btn_wrapper { margin: 0 !important; }
.nb-signup-wrap .ff-btn-submit {
    min-height: 50px;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    border: 1px solid var(--gcid-nb-cream, #FCFAF7) !important;
    background: var(--gcid-nb-cream, #FCFAF7) !important;
    color: var(--gcid-primary-color, #3B3841) !important;
    font-family: var(--et_global_body_font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease;
}
.nb-signup-wrap .ff-btn-submit:hover,
.nb-signup-wrap .ff-btn-submit:focus-visible {
    background: var(--gcid-nb-lilac, #E8DDEB) !important;
    border-color: var(--gcid-nb-lilac, #E8DDEB) !important;
    opacity: 1 !important;
}

/* Errors, legible on slate. Cream and bold, not red: the client's own rule is
   no red, and the message is in words, so colour is not the only signal. */
.nb-signup-wrap .error.text-danger,
.nb-signup-wrap .ff-el-is-error .text-danger { color: var(--gcid-nb-cream, #FCFAF7) !important; font-weight: 600; font-size: 0.8125rem; margin-top: 4px; }
.nb-signup-wrap .ff-el-is-error .ff-el-form-control { border-bottom: 2px solid var(--gcid-nb-cream, #FCFAF7) !important; }
.nb-signup-wrap .ff-message-success { color: var(--gcid-nb-cream, #FCFAF7); border: 0; box-shadow: none; background: transparent; padding: 0; }

/* =========================================================================
   THE VERTICAL TIMELINE — a DEPENDENCY of About's timeline and Retreats'
   package rail. The designs run a 1px line down the left of the steps and a
   13px square beside each, at every width. Divi has no control that draws a
   line behind siblings, so the column carries nb-timeline-v and each step
   nb-timeline-v-step; the steps' indent and spacing are on their modules.
   Drawn in full and filled here: the designs' own reduced-motion state, and
   what shows without the script; the scroll-linked draw follows below.
   nb-rail (Retreats) sets the squares beside the step names, which sit lower
   on steps 2 to 4 by the row's top padding on desktop and tablet.
   ========================================================================= */
.nb-timeline-v { position: relative; }
.nb-timeline-v::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--gcid-primary-color, #3B3841);
}
.nb-timeline-v-step { position: relative; }
.nb-timeline-v-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 13px;
    height: 13px;
    background: var(--gcid-primary-color, #3B3841);
}
.nb-rail .nb-timeline-v-step::before { top: 9px; }
@media (min-width: 768px) {
    .nb-rail .nb-timeline-v-step ~ .nb-timeline-v-step::before { top: calc(clamp(36px, 4vw, 56px) + 9px); }
}

/* THE VERTICAL TIMELINE, DRAWN AS THE READER SCROLLS — a DEPENDENCY of js/scripts.js (Jordan, 18/10/2026:
   "stick with the design"). The designs' v2: a Hairline track, the Slate line drawing down over it as the
   reader scrolls, and each square filling as the line reaches it, from when the timeline's top passes 60% of
   the window until its foot does. The script sets nb-tl-live on the column, the line's length as --nb-tl-draw
   (0 to 1) and nb-tl-lit on each step the line has reached. Without the script (the builder, reduced motion,
   no JavaScript) the timeline stays drawn in full, as above. A script, not CSS scroll-driven animation: that
   did not move on Jordan's screen, and Firefox does not run it. An unlit square is filled with its section's
   ground so the track does not show through it: Sage on About, Sand on the Retreats rail. Change
   --nb-tl-ground if a timeline moves ground. */
.nb-timeline-v.nb-tl-live { --nb-tl-ground: var(--gcid-nb-sage, #E3E9DC); }
.nb-timeline-v.nb-rail.nb-tl-live { --nb-tl-ground: var(--gcid-nb-sand, #E9E3D6); }
.nb-timeline-v.nb-tl-live::before { background: var(--gcid-nb-hair, #8B8494); }
.nb-timeline-v.nb-tl-live::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--gcid-primary-color, #3B3841);
    transform-origin: top;
    transform: scaleY(var(--nb-tl-draw, 0));
}
.nb-timeline-v.nb-tl-live .nb-timeline-v-step::before {
    background: var(--nb-tl-ground);
    box-shadow: inset 0 0 0 1px var(--gcid-primary-color, #3B3841);
    transition: background .3s ease;
}
.nb-timeline-v.nb-tl-live .nb-timeline-v-step.nb-tl-lit::before { background: var(--gcid-primary-color, #3B3841); }

/* =========================================================================
   FORMS ON A LIGHT GROUND — Fluent Forms form 4 (the Contact enquiry), in a
   Code module classed nb-form-light, 16/10/2026 (primary pages, step-7 brief
   section 3B). The design is 02-primary/contact.html, ".cform" version 2:
   labels in the label style (12px, Semi Bold (600), spaced capitals, Muted);
   fields with only a bottom rule in Muted, 2px Slate on focus; the five
   options as the Retreats tick square, two across; the note small and Muted;
   the button as Button – Primary. Fluent Forms has no setting for any of
   this (its own settings carry labels on top, no placeholders, no
   asterisks), so it is keyed off Fluent's classes: check after each Fluent
   update. The FOOTER SIGN-UP block above is the dark-ground twin.
   ========================================================================= */
.nb-form-light .frm-fluent-form fieldset {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
}
.nb-form-light .ff-el-group { margin: 0 !important; }

/* Name and phone side by side; one column below 560px, as the design. */
.nb-form-light .ff-t-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
    align-items: end;
    margin: 0 !important;
}
.nb-form-light .ff-t-container .ff-t-cell { width: auto !important; padding: 0 !important; }
@media (max-width: 560px) { .nb-form-light .ff-t-container { grid-template-columns: 1fr; } }

/* The labels: the design's label style, Muted. Fluent sets its own. */
.nb-form-light .ff-el-input--label { margin-bottom: 8px; padding: 0; }
.nb-form-light .ff-el-input--label label {
    margin: 0;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-label, 12px) !important;
    line-height: 1.6;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gcid-secondary-color, #5F5C69) !important;
}

/* The fields: no box, a Muted bottom rule (3:1 on sage), 2px Slate on
   focus. Fluent draws a bordered, rounded, white box. */
.nb-form-light .ff-el-form-control {
    min-height: 46px;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gcid-secondary-color, #5F5C69) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gcid-heading-color, #2B292F) !important;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-bodylg, 16px) !important;
    box-shadow: none !important;
}
.nb-form-light textarea.ff-el-form-control { min-height: 120px; height: 120px; resize: vertical; line-height: 1.6; }

/* The hint beside a label ("(optional)"): sentence case, 13px, Regular
   (400). The span (class nb-opt) is in the label text in form 4's own
   settings, because a label is one string in Fluent. */
.nb-form-light .ff-el-input--label label .nb-opt {
    font-size: var(--gvid-nb-small, 13px);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.nb-form-light .ff-el-form-control:focus,
.nb-form-light .ff-el-form-control:focus-visible {
    outline: 0;
    border-bottom-color: var(--gcid-primary-color, #3B3841) !important;
    box-shadow: 0 1px 0 0 var(--gcid-primary-color, #3B3841) !important;
}

/* The options: two across (one below 560px), each a row with the tick
   square: Cream with a Slate edge; ticked, the Slate square, Cream tick. */
.nb-form-light .ff-el-input--content:has(> .ff-el-form-check:not(.ff-el-tc)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}
@media (max-width: 560px) { .nb-form-light .ff-el-input--content:has(> .ff-el-form-check:not(.ff-el-tc)) { grid-template-columns: 1fr; } }
/* A consent line (form 3 in the post sidebar): one row, the square then
   the words, 13px Muted, as the design's sidebar sign-up. */
.nb-form-light .ff-el-tc .ff_tc_label { align-items: flex-start; gap: 12px; }
.nb-form-light .ff_t_c,
.nb-form-light .ff_t_c a {
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-small, 13px) !important;
    font-weight: 400;
    line-height: 1.5 !important;
    color: var(--gcid-secondary-color, #5F5C69) !important;
}
.nb-form-light .ff_t_c a { color: var(--gcid-heading-color, #2B292F) !important; }
.nb-form-light .ff-el-form-check { margin: 0 !important; }
.nb-form-light .ff-el-form-check-label {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-height: 28px;
    margin: 0;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-bodysm, 15px) !important;
    font-weight: 500;
    color: var(--gcid-heading-color, #2B292F);
    line-height: 1.7;
    margin-bottom: 0 !important;
    cursor: pointer;
}
.nb-form-light .ff-el-form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    border: 1px solid var(--gcid-primary-color, #3B3841);
    border-radius: 0;
    background: var(--gcid-nb-cream, #FCFAF7);
    cursor: pointer;
}
.nb-form-light .ff-el-form-check-input[type="checkbox"]:checked {
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%233B3841'/%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.8' fill='none' stroke='%23FCFAF7' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat;
}
.nb-form-light .ff-el-form-check-input[type="checkbox"]:focus-visible { outline: 2px solid var(--gcid-primary-color, #3B3841); outline-offset: 2px; }

/* The note: small and Muted, links Ink. */
.nb-form-light .nb-form-note,
.nb-form-light .nb-form-note p {
    margin: 0;
    font-family: var(--et_global_body_font) !important;
    font-size: var(--gvid-nb-small, 13px) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: var(--gcid-secondary-color, #5F5C69) !important;
}
.nb-form-light .nb-form-note a { color: var(--gcid-heading-color, #2B292F) !important; }

/* Errors: Ink and bold, never red (the client's rule). */
.nb-form-light .error,
.nb-form-light .text-danger { color: var(--gcid-heading-color, #2B292F) !important; font-weight: 600; font-size: var(--gvid-nb-small, 13px); }
.nb-form-light .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--gcid-heading-color, #2B292F) !important; }

/* The button: Button – Primary (Slate, Cream text, 4px radius, Slate Deep
   on hover), at its own width. Fluent's submit takes no Divi preset. */
.nb-form-light .ff_submit_btn_wrapper { margin: 0 !important; }
.nb-form-light .ff-btn-submit {
    min-height: 50px;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    border: 1px solid var(--gcid-primary-color, #3B3841) !important;
    background: var(--gcid-primary-color, #3B3841) !important;
    color: var(--gcid-nb-cream, #FCFAF7) !important;
    font-family: var(--et_global_body_font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease;
}
.nb-form-light .ff-btn-submit:hover,
.nb-form-light .ff-btn-submit:focus-visible {
    background: var(--gcid-nb-slatedeep, #2A2731) !important;
    border-color: var(--gcid-nb-slatedeep, #2A2731) !important;
    opacity: 1 !important;
}
.nb-form-light .ff-btn-submit:focus-visible { outline: 2px solid var(--gcid-primary-color, #3B3841); outline-offset: 2px; }

/* =========================================================================
   THE POST'S BODY - a DEPENDENCY of the Blog post template (Theme Builder
   template 277911, body layout 277910): the Post Content module carries
   nb-post-content and prints the post's own blocks (wp-block-paragraph,
   wp-block-quote, wp-block-list), which no Divi control reaches. The
   design is 02-primary/blog-post.html ".art": the first paragraph as a
   serif lead at the H4 size; H2 and H3 spaced above; the quote serif with
   a Hairline rule; list markers Muted; and the references (the LAST list,
   with the paragraph before it as its label) small, Muted and italic under
   a Rule. 17/10/2026, primary pages 8f. How Nicole's real posts mark a
   lead or references is a question for Jordan once their source is known.
   ========================================================================= */
.nb-post-content p:first-of-type {
    font-family: var(--et_global_heading_font);
    font-size: var(--gvid-nb-h4, 21px);
    line-height: 1.45;
    color: var(--gcid-heading-color, #2B292F);
}
/* Divi's paragraph spacing is a 22px bottom margin on p, which collapses into
   these: 40px (H2) and 30px (H3) above, 22px below, as the design. */
.nb-post-content h2 { margin: 40px 0 22px; }
.nb-post-content h3 { margin: 30px 0 22px; }
/* The quote's rule, size and line height are the Post Content module's Quote
   controls; only its spacing and family are here. */
.nb-post-content blockquote {
    margin: 32px 0;
    padding: 6px 0 6px 26px;
    font-family: var(--et_global_heading_font);
}
.nb-post-content blockquote p { padding: 0; font: inherit; }
.nb-post-content ul li::marker { color: var(--gcid-secondary-color, #5F5C69); }
.nb-post-content .wp-block-paragraph:has(+ .wp-block-list:last-child) {
    margin-top: 42px;
    padding-top: 22px;
    line-height: 1.7;
    border-top: 1px solid var(--gcid-nb-rule, rgba(43, 41, 47, .14));
    font-size: var(--gvid-nb-label, 12px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gcid-secondary-color, #5F5C69);
}
.nb-post-content .wp-block-list:last-child { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-bottom: 0; }
.nb-post-content .wp-block-list:last-child li {
    font-size: var(--gvid-nb-small, 13px);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0;
    color: var(--gcid-secondary-color, #5F5C69);
}
/* The H4 size steps down to 19px at 980px and below, as Heading – H4 does
   (the number variable holds the desktop size only). */
@media (max-width: 980px) {
    .nb-post-content p:first-of-type { font-size: 19px; }
}

/* =========================================================================
   THE CONTENTS LIST — a DEPENDENCY of the legal pages' contents (Contents
   List preset, class nb-contents on the Text module). The design rules every
   row: a 1px rule above the list and below each item, each link a 44px row.
   Divi's text module has no per-item border (Filed 19). Type and link colours
   are the Contents List preset's.
   ========================================================================= */
/* padding: 0 cancels Divi's own .et_pb_text ol { padding-bottom: 1em } (Policy QA 2). */
.nb-contents ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gcid-nb-rule, rgba(43, 41, 47, .14)); }
.nb-contents li { margin: 0; padding: 0; border-bottom: 1px solid var(--gcid-nb-rule, rgba(43, 41, 47, .14)); }
.nb-contents li a { display: flex; align-items: center; min-height: 44px; }

/* =========================================================================
   THE TEXT LINKS' TAP AREA — a DEPENDENCY of the Button - Tertiary presets
   (n5btnter01, and n5btnterd1 On Dark: "or call 07780 605717", "Read the
   post", the contact details), added 20/10/2026 (responsive pass, batch 3
   D2). Their rule is the button's own bottom border, 2px under the words, so
   padding would move it: the button stays 29px tall to the eye and this
   invisible box gives it a 44px tap area, centred on it. Divi hides a
   button's ::before with !important when its icon is off (it is, on every
   one of these), so this has to say !important back, on a longer selector.
   Button - Secondary needs none: it is 44px already (min height, padding).
   ========================================================================= */
html body #page-container .et_pb_button.preset--module--divi-button--n5btnter01::before,
html body #page-container .et_pb_button.preset--module--divi-button--n5btnterd1::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    margin: -22px 0 0;
    transform: none; /* Divi's own ::before carries translateY(-50%) */
    opacity: 0;
}

/* =========================================================================
   THE GALLERY'S ARROWS ON TOUCH SCREENS — a DEPENDENCY of Divi's Gallery
   module in slider layout (About), added 20/10/2026 (responsive pass, batch 3
   D3). Divi shows the previous and next arrows only on hover, so on a touch
   screen the only controls were its 7px dots. Where nothing hovers, and below
   981px, the arrows (48px square, over the 44px minimum) stay in view, inset
   8px, on a Cream ground so they read on any photograph. A desktop with a
   mouse is unchanged. Divi has no setting for either. The selector beats
   Divi's ".et_pb_slider:hover .et-pb-arrow-prev" on specificity.
   ========================================================================= */
@media (hover: none), (max-width: 980px) {
    body .et_pb_gallery.et_pb_slider .et-pb-arrow-prev,
    body .et_pb_gallery.et_pb_slider .et-pb-arrow-next {
        opacity: 1;
        background-color: var(--gcid-nb-cream, #FCFAF7);
        color: var(--gcid-heading-color, #2B292F) !important;
    }
    body .et_pb_gallery.et_pb_slider .et-pb-arrow-prev { left: 8px; }
    body .et_pb_gallery.et_pb_slider .et-pb-arrow-next { right: 8px; }
}

/* =========================================================================
   THE POST TITLES' TAP AREA — a DEPENDENCY of Group - Post Row (n5postrow1,
   About's "My writing" list), added 20/10/2026 (responsive pass, batch 3
   D4). Each title is a static link typed in the Heading's text (register 29),
   19-21px tall a line. Made a block with padding taken back by an equal
   negative margin, so the words do not move and a one-line title gives a
   44px tap area.
   ========================================================================= */
.preset--module--divi-group--n5postrow1 h3 a {
    display: block;
    padding: 10.5px 0;
    margin: -10.5px 0;
}

/* =========================================================================
   THE FOOTER CONTACT LINKS' TAP AREA — a DEPENDENCY of the footer's contact
   Text module (Theme Builder footer 277614, on every page), added 20/10/2026
   (responsive pass, batch 3 E1). The phone, email and what3words links are
   plain links in the text, 18.5px tall, so each gets an invisible box round
   it, as THE TEXT LINKS' TAP AREA does, with the words left where they are.
   The phone and email sit on two lines 25.5px apart (one paragraph, a line
   break between), so a 44px box each would cover the other's words: the
   boxes meet halfway between neighbouring links instead and reach 12.75px
   out where nothing is beside them. Measured at 390: phone 34.75px, email
   31.5px, what3words 40.75px (each over the 24px minimum, none overlapping).
   The full 44px needs the lines spaced further apart: a change to the look.
   Keyed off the link targets, so a link moved in the text keeps a box.
   ========================================================================= */
.et-l--footer a[href^="tel:"],
.et-l--footer a[href^="mailto:"],
.et-l--footer a[href*="what3words.com"] {
    position: relative;
}
.et-l--footer a[href^="tel:"]::before,
.et-l--footer a[href^="mailto:"]::before,
.et-l--footer a[href*="what3words.com"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}
/* Phone: free above, halfway to the email below (7px between them). */
.et-l--footer a[href^="tel:"]::before { top: -12.75px; bottom: -3.5px; }
/* Email: halfway to the phone above, halfway to what3words below (19px). */
.et-l--footer a[href^="mailto:"]::before { top: -3.5px; bottom: -9.5px; }
/* what3words: halfway to the email above, free below. */
.et-l--footer a[href*="what3words.com"]::before { top: -9.5px; bottom: -12.75px; }


/* =========================================================================
   POST CARD HOVER — a DEPENDENCY, keyed to two presets (Jordan, 05/11/2026).
   Hovering anywhere on a blog post card shows its "Read the post" link in
   its own hover state and eases the photograph in 4% (the design's
   .post:hover); on the latest post only its photograph, title or link start
   it. The image, the title and the link each open the post.
   A hover on a PARENT changing a CHILD is something no Divi setting can
   express, so it lives here, keyed to the group presets rather than to a
   page: any group given either preset gets it.
     Card – Post (n5cardpost)                   the Blog's "All Posts" cards
     Card – Post Feature – Dark BG (n5cardfeat)  the Blog's latest post
   The link's hover values are copied from its own presets (Button –
   Tertiary n5btnter01, and Tertiary On Dark n5btnterd1): change them there
   and here together.
   ========================================================================= */
.preset--module--divi-group--n5cardpost .et_pb_image_wrap,
.preset--module--divi-group--n5cardfeat .et_pb_image_wrap {
    overflow: hidden;              /* keeps the eased-in photograph inside its frame */
}

.preset--module--divi-group--n5cardpost .et_pb_image_wrap img,
.preset--module--divi-group--n5cardfeat .et_pb_image_wrap img {
    transition: transform 500ms ease-out;
}

@media (hover: hover) {
    /* All Posts: anywhere on the card. */
    .preset--module--divi-group--n5cardpost:hover .et_pb_image_wrap img {
        transform: scale(1.04);
    }
    /* The latest post sits in a wide two-column block, so only its three
       links start the effect: the photograph, the title and "Read the post"
       (Jordan, 05/11/2026). :has() is in every current browser. */
    .preset--module--divi-group--n5cardfeat:has(.et_pb_image_wrap:hover, .et_pb_heading:hover, a.et_pb_button:hover) .et_pb_image_wrap img {
        transform: scale(1.04);
    }

    /* The card's link takes the look its preset gives it on its own hover. */
    html body #page-container .preset--module--divi-group--n5cardpost:hover .et_pb_button.preset--module--divi-button--n5btnter01 {
        color: var(--gcid-primary-color, #3B3841) !important;   /* the preset's own colour is printed !important */
        border-bottom-color: var(--gcid-primary-color, #3B3841);
        border-bottom-width: 2px;
        padding-bottom: 1px !important;   /* !important: Divi's padding rule outranks this, and without it the link grew 1px */
    }
    html body #page-container .preset--module--divi-group--n5cardfeat:has(.et_pb_image_wrap:hover, .et_pb_heading:hover, a.et_pb_button:hover) .et_pb_button.preset--module--divi-button--n5btnterd1 {
        color: var(--gcid-nb-cream, #FCFAF7) !important;
        border-bottom-color: var(--gcid-nb-cream, #FCFAF7);
        border-bottom-width: 2px;
        padding-bottom: 1px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preset--module--divi-group--n5cardpost .et_pb_image_wrap img,
    .preset--module--divi-group--n5cardfeat .et_pb_image_wrap img {
        transition: none;
    }
}

/* =========================================================================
   THE TEXT LINKS' HOVER CHANGES AT ONCE — a FIX (Jordan, 05/11/2026).
   Button – Secondary and both Tertiaries draw their hover rule by trading
   1px of bottom padding for 1px more border. Divi animated the two over
   140ms, and a border snaps to whole device pixels while padding does not,
   so for a moment the link was up to 0.4px taller. In a vertically centred
   block (the Blog's latest post) that nudged the title and the excerpt above
   it. Only the colours animate now; the rule thickens in one step, as it
   already did for a keyboard focus.
   ========================================================================= */
html body #page-container .et_pb_button.preset--module--divi-button--n5btnsec01,
html body #page-container .et_pb_button.preset--module--divi-button--n5btnter01,
html body #page-container .et_pb_button.preset--module--divi-button--n5btnterd1 {
    /* !important: Divi prints each button's own "transition: all" with a
       per-module selector that outranks a preset class. */
    transition-property: color, border-color, background-color !important;
}


/* =========================================================================
   TESTIMONIALS — the [nb_testimonials] shortcode's output (functions.php),
   in a Code module on Psychotherapy, so it is styled here rather than by a
   preset. Values copied from Text – Pull Quote (n5txpullqt) and Card Label
   (n5txcardlb), the presets the design's .tq blockquote and cite map to:
   change those and these together. One difference from the design, on
   Jordan's call (05/11/2026): the quote is italic.
   ========================================================================= */
.nb-testimonials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;                           /* between testimonials, when there are several */
}
.nb-tq {
    margin: 0;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;                           /* the design's .tq gap, quote to name */
    text-align: center;
}
.nb-tq blockquote {
    margin: 0;
    padding: 0;
    border: 0;                           /* Divi gives every blockquote a left rule and padding */
    font-family: var(--et_global_heading_font);
    font-size: var(--gvid-nb-h3, 25px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.45;
    color: var(--gcid-heading-color, #2B292F);
}
.nb-tq blockquote p {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}
@media (max-width: 980px) {
    .nb-tq blockquote { font-size: var(--gvid-nb-h3-sm, 22px); }
}
.nb-tq-name {
    font-family: var(--et_global_body_font);
    font-size: var(--gvid-nb-label, 12px);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--gcid-secondary-color, #5F5C69);
}

/* ===== TURNSTILE, added 10/11/2026 at launch (launch SOP step 3, Hub #2425), from the handbook's website-launch-templates.md ===== */
/* Cloudflare Turnstile: hold its 65px so nothing jumps when it appears on first use,
   and scale its fixed 300px box down on narrow phones. transform-origin: left is
   load-bearing: a transform does not shrink the layout box, so without it the widget
   shrinks about its centre and leaves a gap both sides. Targets .cf-turnstile
   (Cloudflare's element), not .ff-el-turnstile (Fluent's wrapper, which does not move
   the iframe). Does nothing until a form carries Turnstile. */
.frm-fluent-form .cf-turnstile { min-height: 65px; }
.cf-turnstile { transform-origin: left center; }
@media (max-width: 460px) { .cf-turnstile { transform: scale(.92); } }
@media (max-width: 430px) { .cf-turnstile { transform: scale(.85); } }
@media (max-width: 400px) { .cf-turnstile { transform: scale(.78); } }
@media (max-width: 365px) { .cf-turnstile { transform: scale(.71); } }
@media (max-width: 335px) { .cf-turnstile { transform: scale(.65); } }