/* ===========================================================================
   BOYLE GENEALOGY KIT — design components
   ---------------------------------------------------------------------------
   Loaded automatically by the plugin. You do not paste this anywhere.

   HOW TO USE
   Add a class to a widget or container in Elementor:
       Advanced tab → CSS Classes → bg-note

   Every rule is namespaced .bg- so nothing here can leak out and restyle
   Hello Elementor, OceanWP, or any other widget on the page.

   Colors and fonts are variables here, but set them in Elementor's Global
   Colors and Global Fonts as well, so ordinary Heading and Text widgets pick
   them up without needing a class.
   =========================================================================== */

:root{
  --bg-cream:#F4F0E4;
  --bg-warm-white:#FDFBF5;
  --bg-muted:#DCE8D6;
  --bg-green:#3C592D;
  --bg-green-deep:#334C27;
  --bg-mint:#A9D69F;
  --bg-clay:#C1663F;        /* rules, borders, underlines only */
  --bg-clay-text:#A9512E;   /* all small clay TEXT — 4.7:1 on cream */
  --bg-ink:#2A2A22;
  --bg-ink-70:rgba(42,42,34,.78);
  --bg-ink-55:rgba(42,42,34,.58);
  --bg-rule:rgba(42,42,34,.16);
  --bg-rule-strong:rgba(42,42,34,.3);
  --bg-rule-light:rgba(244,240,228,.22);
  --bg-serif:"Lora",Georgia,serif;
  --bg-sans:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --bg-radius:2px;
}

/* ===========================================================================
   ANCHOR SCROLLING
   Every section carries an id so the menu and in-page buttons can jump to it.
   Without scroll-padding the target lands underneath the sticky header, so
   you arrive halfway into a heading. This reserves the header's height.
   =========================================================================== */
html{ scroll-behavior:smooth; scroll-padding-top:104px; }
@media(max-width:900px){ html{ scroll-padding-top:80px; } }
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ===========================================================================
   404
   =========================================================================== */
.bg-404{background:var(--bg-cream);padding:clamp(72px,10vw,140px) 24px}
.bg-404__inner{max-width:640px;margin:0 auto}
.bg-404__eyebrow{
  font-family:var(--bg-sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bg-clay-text);margin:0 0 16px;
}
.bg-404 h1{
  font-family:var(--bg-serif);font-weight:500;
  font-size:clamp(30px,4.4vw,46px);line-height:1.1;color:var(--bg-ink);margin:0 0 20px;
}
.bg-404__lead{
  font-family:var(--bg-sans);font-size:17px;line-height:1.65;
  color:var(--bg-ink-70);margin:0 0 32px;
}
.bg-404__links{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--bg-rule)}
.bg-404__links li{border-bottom:1px solid var(--bg-rule)}
.bg-404__links a{
  display:flex;align-items:center;min-height:52px;
  font-family:var(--bg-serif);font-size:19px;color:var(--bg-ink);
  text-decoration:none;padding:0 4px;transition:color .2s ease,padding-left .2s ease;
}
.bg-404__links a:hover{color:var(--bg-clay-text);padding-left:12px}
.bg-404__note{font-family:var(--bg-sans);font-size:14.5px;color:var(--bg-ink-55);margin:0}
.bg-404__note a{color:var(--bg-clay-text)}

/* ===========================================================================
   TOOL CARDS
   Two across on desktop, stacking on narrow screens. Built as containers so
   adding a third tool is duplicating a card, not redesigning the page.
   =========================================================================== */
.bg-tools-grid{flex-wrap:wrap}
.bg-tool-card{
  flex:1 1 340px;
  min-width:0;
  transition:border-color .25s ease,transform .25s ease;
}
.bg-tool-card:hover{border-color:var(--bg-clay) !important;transform:translateY(-2px)}
.bg-tool-card .bg-tool-link{margin-top:auto;padding-top:8px}
.bg-tool-card .bg-tool-link a{
  color:var(--bg-clay-text);
  text-decoration:none;
  border-bottom:1.5px solid var(--bg-clay);
  padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.bg-tool-card .bg-tool-link a:hover{color:var(--bg-ink);border-bottom-color:var(--bg-ink)}
@media(prefers-reduced-motion:reduce){ .bg-tool-card{transition:none} .bg-tool-card:hover{transform:none} }

/* ===========================================================================
   MORE FROM ME
   A slim band on the home page pointing at the pages that moved off it.
   =========================================================================== */
.bg-more-grid{flex-wrap:wrap}
.bg-more-item{
  flex:1 1 240px;
  min-width:0;
  border-top:2px solid var(--bg-rule-strong);
  transition:border-color .25s ease;
}
.bg-more-item:hover{border-top-color:var(--bg-clay) !important}
.bg-more-item .bg-more-link a{
  color:var(--bg-clay-text);
  text-decoration:none;
  transition:color .2s ease;
}
.bg-more-item:hover .bg-more-link a{color:var(--bg-ink)}

/* ===========================================================================
   BACK TO TOP
   Hidden until you are a screen and a half down, so it never covers content
   near the top. 48px so it is comfortable to tap.
   =========================================================================== */
.bg-to-top{
  position:fixed;
  right:clamp(16px,2.5vw,32px);
  bottom:clamp(16px,2.5vw,32px);
  z-index:900;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--bg-mint);
  border-radius:50%;
  background:var(--bg-green);
  color:var(--bg-cream);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background-color .2s ease;
}
.bg-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.bg-to-top:hover{background:var(--bg-green-deep)}
.bg-to-top:focus-visible{outline:2px solid var(--bg-mint);outline-offset:3px}
@media(prefers-reduced-motion:reduce){ .bg-to-top{transition:opacity .01s,visibility .01s} }
@media print{ .bg-to-top{display:none} }

/* ===========================================================================
   25. QUESTION FINDER, BUILT ON NESTED TABS
   ---------------------------------------------------------------------------
   The finder is now a native Elementor Tabs widget in vertical mode, so every
   question and answer is editable in the panel. This restores the original
   look on top of that markup:

     - a ruled list of questions on the left
     - green wipes up on hover only
     - the one you are reading keeps a quiet clay bar
     - the answer sits in a cream panel with a clay edge

   Numbering comes from a CSS counter rather than being typed into each tab
   title, so the titles stay clean editable text and renumber themselves if
   you add, remove or reorder a question.
   =========================================================================== */
/* Elementor drives this widget from CSS custom properties rather than plain
   declarations, so setting the variables is both the tidiest way in and the
   one that survives its own stylesheet loading afterwards. */
/* Elementor names these --n-tabs-title-padding-left, not -inline-start.
   Base padding is set on the widget itself so it stays editable; only the
   hover and selected indent is nudged here. */
.bg-finder-tabs{
  --n-tabs-gap:clamp(28px,4.5vw,60px);
  --n-tabs-title-border-radius:0;
  --n-tabs-heading-gap:0px;
}
.bg-finder-tabs .e-n-tabs{
  gap:clamp(28px,4.5vw,60px);
  align-items:start;
}
/* the indent on hover and on the selected row, applied as inline padding so it
   works with the variables above rather than against them */
.bg-finder-tabs .e-n-tab-title:hover,
.bg-finder-tabs .e-n-tab-title[aria-selected="true"]{
  --n-tabs-title-padding-left:26px;
}

/* ---- the list of questions --------------------------------------------- */
.bg-finder-tabs .e-n-tabs-heading{
  counter-reset:bgq;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--bg-rule-strong);
}
.bg-finder-tabs .e-n-tab-title{
  counter-increment:bgq;
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  width:100%;
  min-height:52px;
  padding:17px clamp(10px,1.4vw,18px);
  border:0;
  border-bottom:1px solid var(--bg-rule);
  border-radius:0;
  background:transparent;
  text-align:left;
  font-family:var(--bg-serif);
  font-weight:400;
  font-size:clamp(16.5px,1.5vw,20px);
  line-height:1.3;
  color:var(--bg-ink);
  cursor:pointer;
  transition:color .3s ease,padding-left .3s ease;
}
/* the green fill, wiping up from the bottom */
.bg-finder-tabs .e-n-tab-title::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg-green);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.bg-finder-tabs .e-n-tab-title:hover::after{transform:scaleY(1);transform-origin:top}
.bg-finder-tabs .e-n-tab-title:hover{color:var(--bg-cream);padding-left:clamp(16px,2vw,26px)}

/* the number, from the counter */
.bg-finder-tabs .e-n-tab-title::before{
  content:counter(bgq,decimal-leading-zero);
  position:relative;
  z-index:1;
  flex:0 0 auto;
  font-family:var(--bg-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--bg-clay-text);
  transition:color .3s ease;
}
.bg-finder-tabs .e-n-tab-title:hover::before{color:var(--bg-mint)}

/* keep the label above the fill */
.bg-finder-tabs .e-n-tab-title > *{position:relative;z-index:1}
.bg-finder-tabs .e-n-tab-title-text{position:relative;z-index:1;flex:1 1 auto}

/* the question you are reading */
.bg-finder-tabs .e-n-tab-title[aria-selected="true"]{
  color:var(--bg-ink);
  box-shadow:inset 3px 0 0 0 var(--bg-clay);
  padding-left:clamp(16px,2vw,26px);
}
.bg-finder-tabs .e-n-tab-title[aria-selected="true"]::after{transform:scaleY(0)}
.bg-finder-tabs .e-n-tab-title[aria-selected="true"]:hover::after{transform:scaleY(1);transform-origin:top}
.bg-finder-tabs .e-n-tab-title[aria-selected="true"]:hover{color:var(--bg-cream)}
.bg-finder-tabs .e-n-tab-title:focus-visible{outline:2px solid var(--bg-clay-text);outline-offset:-4px}

/* ---- the answer panel --------------------------------------------------- */
.bg-finder-tabs .e-n-tabs-content{
  background:var(--bg-cream);
  border:1px solid var(--bg-rule);
  border-left:3px solid var(--bg-clay);
  border-radius:var(--bg-radius);
}
.bg-finder-tabs .bg-finder-quote p{
  border-top:1px solid var(--bg-rule);
  border-bottom:1px solid var(--bg-rule);
  padding:16px 0;
  margin:0;
}
.bg-finder-tabs .bg-finder-cta-row{border-top:1px solid var(--bg-rule);padding-top:20px}
.bg-finder-tabs .bg-finder-cta-row a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:44px;
  text-decoration:none;
  color:var(--bg-ink);
  transition:color .2s ease;
}
.bg-finder-tabs .bg-finder-cta-row a:hover{color:var(--bg-clay-text)}

@media(max-width:900px){
  .bg-finder-tabs .e-n-tabs{grid-template-columns:1fr;gap:24px}
  .bg-finder-tabs .e-n-tab-title:hover{padding-left:clamp(10px,1.4vw,18px)}
  .bg-finder-tabs .e-n-tab-title:hover::after{transform:scaleY(0)}
  .bg-finder-tabs .e-n-tab-title:hover{color:var(--bg-ink)}
  .bg-finder-tabs .e-n-tab-title[aria-selected="true"]::after{transform:scaleY(1);transform-origin:top}
  .bg-finder-tabs .e-n-tab-title[aria-selected="true"]{color:var(--bg-cream)}
}

/* ===========================================================================
   HERO HEADLINE
   The line breaks are written into the heading so it reads
   Every / family story / is different. That holds the mint words together on
   their own line, which is the whole point of the accent.
   On a phone the column is too narrow for forced breaks to help, so they are
   suppressed and the text wraps naturally.
   =========================================================================== */
@media(max-width:767px){
  .bg-hero h1 br{ display:none; }
}

/* ===========================================================================
   CONTACT FORM 7
   The textareas default to rows=10, which renders about 284px each. Two of
   those stacked makes the form look like a tax return. 130px still shows four
   or five lines, and they grow as you type.
   =========================================================================== */
.wpcf7-form textarea{
  min-height:104px;
  height:104px;
  resize:vertical;
  field-sizing:content;
  max-height:300px;
}
.wpcf7-form textarea[name="done"]{
  min-height:76px;
  height:76px;
}

/* ---------------------------------------------------------------------------
   TIGHTER FORM
   Six fields stacked with generous spacing ran well over a screen. These pull
   the vertical rhythm in without shrinking the tap targets, which stay at the
   48px minimum.
   --------------------------------------------------------------------------- */
.wpcf7-form .field{margin-bottom:15px}
.wpcf7-form label{
  display:block;
  margin:0 0 5px;
  font-family:var(--bg-sans);
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--bg-ink);
}
/* CF7's autop is off for this form, but belt and braces: any stray break or
   paragraph it does emit should not reintroduce the gaps. */
.wpcf7-form .field br{display:none}
.wpcf7-form .field p{margin:0}
.wpcf7-form .wpcf7-form-control-wrap{display:block;line-height:0}
.wpcf7-form .field > br,
.wpcf7-form label > br{display:none}
.wpcf7-form .help{
  display:block;
  font-weight:400;
  font-size:12.5px;
  color:var(--bg-ink-55);
  margin-top:2px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select{
  height:48px;
  padding:0 14px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%;
  font-family:var(--bg-sans);
  font-size:15.5px;
  border:1px solid var(--bg-rule-strong);
  border-radius:var(--bg-radius);
  background-color:#fff;
  color:var(--bg-ink);
}
.wpcf7-form textarea{padding:12px 14px}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{
  outline:2px solid var(--bg-clay-text);
  outline-offset:1px;
  border-color:var(--bg-clay-text);
}
.wpcf7-form .form-note{
  font-family:var(--bg-sans);
  font-size:12.5px;
  color:var(--bg-ink-55);
  margin:10px 0 0;
}
.wpcf7-form .wpcf7-submit{margin-top:4px;min-height:48px}

/* ---------------------------------------------------------------------------
   HONEYPOT
   The spam trap is a real text input with a randomised name that only a bot
   fills in. The plugin hides it, but the generic input rules above were
   dragging it back into view at 48px tall. Hide it properly, and keep it out
   of the tab order and off screen readers.
   --------------------------------------------------------------------------- */
.wpcf7-form .cf7apps-honeypot-wrap,
.wpcf7-form .cf7apps-honeypot-wrap input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  opacity:0 !important;
  overflow:hidden;
  pointer-events:none;
}
.wpcf7-form .cf7apps-honeypot-wrap{clip:rect(0,0,0,0)}
/* The empty paragraph it sits in should not add space either. */
.wpcf7-form p:has(> .cf7apps-honeypot-wrap){margin:0;padding:0;line-height:0}

/* Name and email side by side once there is room for them. */
@media(min-width:600px){
  .wpcf7-form .field-row{display:flex;gap:16px}
  .wpcf7-form .field-row .field{flex:1 1 0;margin-bottom:16px}
}

/* ---------------------------------------------------------------------------
   FORM FEEDBACK
   Contact Form 7 ships a 1px pale border and grey text for every state, which
   on a cream card is close to invisible. Someone who has just written to you
   should be in no doubt it sent.
   --------------------------------------------------------------------------- */
/* Contact Form 7's own stylesheet loads after this one and sets border,
   padding and margin at the same weight, so it wins a tie. The [class]
   attribute selector lifts these above it without !important. */
.wpcf7 form[class] .wpcf7-response-output{
  margin:24px 0 0;
  padding:16px 20px;
  border:0;
  border-left:3px solid var(--bg-green);
  border-radius:var(--bg-radius);
  background-color:var(--bg-muted);
  color:var(--bg-ink);
  font-family:var(--bg-sans);
  font-size:15.5px;
  line-height:1.5;
}

/* Sent */
.wpcf7 form.sent[class] .wpcf7-response-output{
  background-color:var(--bg-green);
  border-left-color:var(--bg-mint);
  color:var(--bg-cream);
  font-weight:500;
}

/* Something was wrong, or the send failed */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  background-color:#F6E7DF;
  border-left-color:var(--bg-clay);
  color:#7A3A1E;
}

/* Per-field errors: red-on-white by default, which does not belong here. */
.wpcf7-not-valid-tip{
  color:#A9512E;
  font-family:var(--bg-sans);
  font-size:13.5px;
  font-weight:600;
  margin-top:6px;
}
.wpcf7-form .wpcf7-not-valid{
  border-color:var(--bg-clay) !important;
  background-color:#FCF6F3;
}

/* The spinner sits awkwardly beside the button otherwise. */
.wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

/* Screen reader only. Used by the finder's live region. */
.bg-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===========================================================================
   SECTION BACKGROUNDS
   Apply to a container. Saves setting the hex on every section by hand.
   =========================================================================== */
.bg-sec-cream{background-color:var(--bg-cream)}
.bg-sec-warm{background-color:var(--bg-warm-white)}
.bg-sec-muted{background-color:var(--bg-muted)}
.bg-sec-green{background-color:var(--bg-green)}

/* Put bg-on-dark on any container with a dark green background. It flips the
   components below to their light variants. */
.bg-on-dark{color:var(--bg-muted)}
.bg-on-dark h1,.bg-on-dark h2,.bg-on-dark h3,
.bg-on-dark .elementor-heading-title{color:var(--bg-cream)}

/* ===========================================================================
   1. EYEBROW  →  bg-eyebrow
   =========================================================================== */
.bg-eyebrow,.bg-eyebrow p{
  font-family:var(--bg-sans);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg-clay-text);margin:0 0 16px;
}
.bg-on-dark .bg-eyebrow,.bg-on-dark .bg-eyebrow p{color:var(--bg-mint)}

/* ===========================================================================
   2. RESEARCH NOTE  →  bg-note              ★ the signature component
   Text Editor widget. Put the label in bold as the first thing.
   =========================================================================== */
.bg-note,.bg-note p{
  font-family:var(--bg-sans);font-size:14.5px;line-height:1.6;
  color:var(--bg-ink-70);margin:0;
}
.bg-note{border-left:2px solid var(--bg-clay);padding:2px 0 2px 18px}
.bg-note strong,.bg-note b{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bg-clay-text);margin-bottom:7px;
}
.bg-on-dark .bg-note{border-left-color:var(--bg-mint)}
.bg-on-dark .bg-note,.bg-on-dark .bg-note p{color:var(--bg-muted)}
.bg-on-dark .bg-note strong,.bg-on-dark .bg-note b{color:var(--bg-mint)}

/* ===========================================================================
   3. RULED BULLET LIST  →  bg-fitlist
   =========================================================================== */
.bg-fitlist ul{list-style:none;margin:0;padding:0}
.bg-fitlist li{
  position:relative;padding:14px 0 14px 22px;
  border-bottom:1px solid var(--bg-rule);
  font-size:16px;line-height:1.5;list-style:none;
}
.bg-fitlist li:first-child{border-top:1px solid var(--bg-rule)}
.bg-fitlist li::before{
  content:"";position:absolute;left:0;top:23px;
  width:7px;height:1.5px;background:var(--bg-clay);
}
.bg-on-dark .bg-fitlist li{border-color:var(--bg-rule-light)}
.bg-on-dark .bg-fitlist li::before{background:var(--bg-mint)}

/* ===========================================================================
   4. PULL QUOTE  →  bg-pullquote
   =========================================================================== */
.bg-pullquote,.bg-pullquote p{
  font-family:var(--bg-serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.3vw,29px);line-height:1.34;margin:0;
}
.bg-pullquote{
  color:var(--bg-mint);
  border-top:1px solid var(--bg-rule-light);
  border-bottom:1px solid var(--bg-rule-light);
  padding:24px 0;margin:32px 0;max-width:30ch;
}
/* On a light background, use bg-pullquote bg-pullquote-light */
.bg-pullquote-light{
  color:var(--bg-green);
  border-color:var(--bg-rule);
}

/* ===========================================================================
   5. OFFSET PHOTO FRAME  →  bg-frame-offset  (on the CONTAINER, not the image)
   =========================================================================== */
.bg-frame-offset{position:relative}
.bg-frame-offset::after{
  content:"";position:absolute;inset:0;border:1px solid var(--bg-rule);
  transform:translate(16px,16px);pointer-events:none;
  border-radius:var(--bg-radius);
}
.bg-frame-offset > *{position:relative;z-index:1}
.bg-on-dark .bg-frame-offset::after{border-color:var(--bg-rule-light)}
@media(max-width:900px){ .bg-frame-offset::after{display:none} }

/* Sticky photo column. Keeps an image beside long copy instead of leaving a
   hole. Put on the image container. */
.bg-sticky-media{position:sticky;top:108px}
@media(max-width:900px){ .bg-sticky-media{position:static} }

/* Caption under an image */
.bg-caption,.bg-caption p{
  font-family:var(--bg-sans);font-size:12.5px;color:var(--bg-ink-55);
  margin:14px 0 0;letter-spacing:.01em;
}
.bg-on-dark .bg-caption,.bg-on-dark .bg-caption p{color:rgba(220,232,214,.7)}

/* ===========================================================================
   6. CREDENTIALS STRIP  →  bg-cred   (the four boxes in About)
   =========================================================================== */
.bg-cred ul{
  list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--bg-rule-light);border:1px solid var(--bg-rule-light);
}
.bg-cred li{
  background:var(--bg-green);padding:18px 20px;list-style:none;
  font-size:15px;line-height:1.45;color:var(--bg-muted);
}
/* The credential tile links out to the accrediting body. Mint keeps it legible
   on dark green, and the underline makes it read as a link, not emphasis. */
.bg-cred li a{
  color:var(--bg-mint);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.bg-cred li a:hover{color:var(--bg-cream)}
.bg-cred li strong{
  display:block;font-family:var(--bg-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bg-mint);
  margin-bottom:6px;
}
@media(max-width:620px){ .bg-cred ul{grid-template-columns:1fr} }

/* ===========================================================================
   7. CONSULTATION FORMATS  →  bg-formats
   =========================================================================== */
.bg-formats ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--bg-rule)}
.bg-formats li{
  display:grid;grid-template-columns:130px 1fr;gap:16px 24px;
  padding:18px 0;border-bottom:1px solid var(--bg-rule);
  align-items:baseline;list-style:none;
  font-size:15px;line-height:1.55;color:var(--bg-ink-70);
}
.bg-formats li strong{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bg-clay-text);
}
.bg-formats li em{
  display:block;font-family:var(--bg-serif);font-style:normal;
  font-size:20px;line-height:1.2;margin-bottom:6px;color:var(--bg-ink);
}
@media(max-width:620px){ .bg-formats li{grid-template-columns:1fr} }

/* ===========================================================================
   8. SPEAKING TOPIC INDEX  →  bg-talks
   =========================================================================== */
.bg-talks ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--bg-rule-strong)}
.bg-talks li{
  display:grid;grid-template-columns:170px 1fr;gap:8px 30px;align-items:baseline;
  padding:20px 12px;border-bottom:1px solid var(--bg-rule);list-style:none;
  font-family:var(--bg-serif);font-size:clamp(18px,1.8vw,23px);line-height:1.28;
  transition:padding-left .25s ease,background-color .25s ease;
}
.bg-talks li:hover{padding-left:18px;background:rgba(220,232,214,.4)}
.bg-talks li strong{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bg-clay-text);
}
@media(max-width:900px){ .bg-talks li{grid-template-columns:1fr;gap:6px} }

/* ===========================================================================
   9. STAY CONNECTED BOXES
   bg-connect-grid on the outer container, bg-connect-card on each inner one.
   Set each inner container's Link to the social URL.
   =========================================================================== */
.bg-connect-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--bg-rule);border:1px solid var(--bg-rule);
}
.bg-connect-card{
  background:var(--bg-cream);color:var(--bg-ink);
  padding:clamp(26px,3vw,38px);
  transition:background-color .28s ease,color .28s ease;
}
.bg-connect-card:hover{background:var(--bg-green);color:var(--bg-muted)}
.bg-connect-card:hover h3,
.bg-connect-card:hover .elementor-heading-title{color:var(--bg-cream)}
.bg-connect-card:hover p{color:var(--bg-muted)}
.bg-connect-card:hover .bg-connect-go{color:var(--bg-mint)}
.bg-connect-icon{
  width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--bg-rule-strong);
  border-radius:var(--bg-radius);transition:border-color .28s ease;
}
.bg-connect-card:hover .bg-connect-icon{
  border-color:var(--bg-mint);background:rgba(169,214,159,.14);
}
.bg-connect-go,.bg-connect-go p{
  font-family:var(--bg-sans);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bg-clay-text);
  transition:color .28s ease;margin:0;
}
@media(max-width:900px){ .bg-connect-grid{grid-template-columns:1fr} }

/* ===========================================================================
   10. CAN / CAN'T LIST  →  bg-canlist
   Add class bg-cant to the two "Can't" list items.
   =========================================================================== */
.bg-canlist ul{list-style:none;margin:0;padding:0}
.bg-canlist li{
  display:grid;grid-template-columns:96px 1fr;gap:8px 24px;
  padding:18px 0;border-bottom:1px solid var(--bg-rule);
  align-items:baseline;list-style:none;font-size:16.5px;line-height:1.55;
}
.bg-canlist li:first-child{border-top:1px solid var(--bg-rule)}
.bg-canlist li strong{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bg-clay-text);
}
.bg-canlist li.bg-cant strong{color:var(--bg-ink-55)}
@media(max-width:620px){ .bg-canlist li{grid-template-columns:1fr} }

/* ===========================================================================
   11. PROCESS STEP  →  bg-step  on each of the four containers
   =========================================================================== */
.bg-step{border-top:1px solid var(--bg-rule-strong);padding-top:24px}
.bg-step-num,.bg-step-num p{
  font-family:var(--bg-sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--bg-clay-text);margin:0 0 16px;
}

/* ===========================================================================
   12. BUTTONS AND TEXT LINKS
   Style the Button widget once in Global settings, then use bg-btn-dark only
   where a button sits on dark green.
   =========================================================================== */
.bg-btn-dark .elementor-button{
  background-color:var(--bg-mint)!important;
  color:var(--bg-green)!important;
  border-color:var(--bg-mint)!important;
}
.bg-btn-dark .elementor-button:hover{
  background-color:var(--bg-muted)!important;
  border-color:var(--bg-muted)!important;
}
.bg-tlink a{
  font-family:var(--bg-sans);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--bg-clay-text);
  border-bottom:1.5px solid var(--bg-clay);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.bg-tlink a:hover{color:var(--bg-ink);border-bottom-color:var(--bg-ink)}
.bg-on-dark .bg-tlink a{color:var(--bg-mint);border-bottom-color:var(--bg-mint)}
.bg-on-dark .bg-tlink a:hover{color:var(--bg-cream);border-bottom-color:var(--bg-cream)}

/* ===========================================================================
   13. HERO
   =========================================================================== */
.bg-qblock{
  border-top:1px solid var(--bg-rule-light);
  border-bottom:1px solid var(--bg-rule-light);
  padding:clamp(20px,2.4vw,28px) 0;margin-top:clamp(28px,3.4vw,42px);
}
.bg-qlabel,.bg-qlabel p{
  font-family:var(--bg-sans);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bg-mint);margin:0 0 12px;
}
/* Rotating line. min-height stops the page jumping on a longer question. */
.bg-rotator{
  display:block;position:relative;min-height:2.32em;
  font-family:var(--bg-serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.4vw,42px);line-height:1.16;color:var(--bg-cream);
}
.bg-rot-item{
  position:absolute;left:0;top:0;width:100%;opacity:0;
  transform:translateY(.18em);
  transition:opacity .55s ease,transform .55s ease;
}
.bg-rot-item.is-on{opacity:1;transform:none}
/* Mint on the two words the page is built around. 4.8:1 on dark green. */
.bg-accent{color:var(--bg-mint)}
.bg-place,.bg-place p{
  font-family:var(--bg-sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(220,232,214,.7);margin:0 0 24px;
  display:flex;align-items:center;gap:12px;
}
.bg-place::before{content:"";width:36px;height:1px;background:var(--bg-mint);flex:none}

/* ===========================================================================
   14. QUESTION FINDER
   =========================================================================== */
.bg-finder{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,4.5vw,64px);align-items:start;
}
.bg-finder-list{border-top:1px solid var(--bg-rule-strong)}
.bg-finder-btn{
  position:relative;width:100%;background:none;border:0;cursor:pointer;
  text-align:left;border-bottom:1px solid var(--bg-rule);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,2vw,22px);padding:19px clamp(10px,1.4vw,18px);min-height:48px;
  font-family:var(--bg-serif);font-weight:400;
  font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--bg-ink);
  transition:color .3s ease,padding-left .3s ease;
}
.bg-finder-btn::before{
  content:"";position:absolute;inset:0;background:var(--bg-green);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;
}
.bg-finder-btn > *{position:relative;z-index:1}
/* The green fill is a HOVER state only. The selected row keeps a quiet clay
   bar instead, so you can still see which answer you are reading without a
   heavy block of colour sitting there permanently. */
.bg-finder-btn:hover::before{transform:scaleY(1);transform-origin:top}
.bg-finder-btn:hover{color:var(--bg-cream);padding-left:clamp(16px,2vw,26px)}

.bg-finder-btn[aria-selected="true"]::before{transform:scaleY(0)}
.bg-finder-btn[aria-selected="true"]{
  color:var(--bg-ink);
  box-shadow:inset 3px 0 0 0 var(--bg-clay);
  padding-left:clamp(16px,2vw,26px);
}
/* Hovering the selected row still gives the green. */
.bg-finder-btn[aria-selected="true"]:hover::before{transform:scaleY(1);transform-origin:top}
.bg-finder-btn[aria-selected="true"]:hover{color:var(--bg-cream)}
.bg-finder-btn:focus-visible{outline:2px solid var(--bg-clay-text);outline-offset:-4px}
.bg-finder-num{
  font-family:var(--bg-sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--bg-clay-text);transition:color .3s ease;
}
.bg-finder-btn:hover .bg-finder-num,
.bg-finder-btn[aria-selected="true"] .bg-finder-num{color:var(--bg-mint)}
.bg-finder-go{font-family:var(--bg-sans);font-size:15px;opacity:0;transition:opacity .3s ease}
.bg-finder-btn:hover .bg-finder-go,
.bg-finder-btn[aria-selected="true"] .bg-finder-go{opacity:1}

.bg-finder-panel{
  position:sticky;top:108px;
  background:var(--bg-cream);border:1px solid var(--bg-rule);
  border-left:3px solid var(--bg-clay);
  padding:clamp(26px,3.2vw,42px);border-radius:var(--bg-radius);
}
.bg-finder-label,.bg-finder-label p{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bg-clay-text);margin:0 0 10px;
}
.bg-finder-route{
  font-family:var(--bg-serif);font-size:clamp(26px,3.2vw,40px);line-height:1.1;
  margin:0 0 24px;color:var(--bg-ink);
}
.bg-finder-quote{
  font-family:var(--bg-serif);font-style:italic;font-size:clamp(17px,1.5vw,20px);
  line-height:1.4;color:var(--bg-green);
  border-top:1px solid var(--bg-rule);border-bottom:1px solid var(--bg-rule);
  padding:16px 0;margin:0 0 24px;
}
.bg-finder-content p{color:var(--bg-ink-70);font-size:16.5px}
.bg-finder-cta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--bg-rule);
  font-family:var(--bg-sans);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--bg-ink);min-height:48px;
  transition:color .2s ease;
}
.bg-finder-cta:hover{color:var(--bg-clay-text)}

@media(max-width:900px){
  .bg-finder{grid-template-columns:1fr;gap:32px}
  .bg-finder-panel{position:static}
  .bg-finder-btn:hover{padding-left:clamp(10px,1.4vw,18px)}
  .bg-finder-btn:hover::before{transform:scaleY(0)}
  .bg-finder-btn[aria-selected="true"]::before{transform:scaleY(1)}
  .bg-finder-btn[aria-selected="true"]{padding-left:clamp(16px,2vw,26px)}
}

/* ===========================================================================
   15. FAQ ACCORDION — native <details>, no JavaScript
   Elementor 4 free may not include an Accordion widget. This works everywhere,
   is keyboard accessible by default, and needs no script.

   Markup, in one HTML widget:
     <div class="bg-faq">
       <details>
         <summary><span class="bg-faq-num">01</span>How much does this cost?</summary>
         <div class="bg-faq-body"><p>...</p></div>
       </details>
       ... five more ...
     </div>
   =========================================================================== */
.bg-faq{border-top:1px solid var(--bg-rule-strong)}
.bg-faq details{border-bottom:1px solid var(--bg-rule)}
.bg-faq summary{
  position:relative;list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2vw,22px);padding:18px clamp(10px,1.4vw,18px);min-height:48px;
  font-family:var(--bg-serif);font-size:clamp(16.5px,1.5vw,20px);line-height:1.3;
  color:var(--bg-ink);transition:color .3s ease;
}
.bg-faq summary::-webkit-details-marker{display:none}
.bg-faq summary::before{
  content:"";position:absolute;inset:0;background:var(--bg-green);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;
}
.bg-faq summary > *{position:relative;z-index:1}
.bg-faq summary:hover::before,
.bg-faq details[open] summary::before{transform:scaleY(1);transform-origin:top}
.bg-faq summary:hover,.bg-faq details[open] summary{color:var(--bg-cream)}
.bg-faq summary:focus-visible{outline:2px solid var(--bg-clay-text);outline-offset:-4px}
.bg-faq-num{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:var(--bg-clay-text);transition:color .3s ease;
}
.bg-faq summary:hover .bg-faq-num,
.bg-faq details[open] .bg-faq-num{color:var(--bg-mint)}
/* Plus / minus sign, drawn in CSS */
.bg-faq summary::after{
  content:"";position:relative;z-index:1;width:15px;height:15px;
  background:
    linear-gradient(currentColor,currentColor) center/15px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 15px no-repeat;
  transition:background-size .28s ease;
}
.bg-faq details[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/15px 1.5px no-repeat;
}
.bg-faq-body{
  background:var(--bg-muted);
  padding:clamp(24px,3vw,36px) clamp(10px,1.4vw,18px);
}
.bg-faq-body p{color:var(--bg-ink-70);font-size:16.5px;margin:0 0 1.1em}
.bg-faq-body p:last-child{margin-bottom:0}
.bg-faq-body .bg-note{margin-top:20px}

/* ===========================================================================
   16. NAVIGATION AND HEADER
   =========================================================================== */
.bg-sticky-header{
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.bg-sticky-header.is-scrolled{border-bottom-color:var(--bg-rule)}
.bg-spy-nav a{
  border-bottom:1.5px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.bg-spy-nav a:hover{color:var(--bg-green);border-bottom-color:var(--bg-clay)}
.bg-spy-nav a[aria-current="true"]{color:var(--bg-green);border-bottom-color:var(--bg-clay)}

/* ===========================================================================
   17. ACCESSIBILITY BACKSTOPS
   Two things a page builder makes easy to break.
   =========================================================================== */
/* Footer links render around 18px tall by default. Too small to tap. */
.bg-footer-links li a{
  display:inline-flex;align-items:center;min-height:44px;padding:2px 0;
}
/* Never remove focus outlines. */
.bg-connect-card a:focus-visible,
.bg-talks li a:focus-visible,
.bg-tlink a:focus-visible{
  outline:2px solid var(--bg-clay-text);outline-offset:3px;
}
.bg-on-dark :focus-visible{outline-color:var(--bg-mint)}

@media(prefers-reduced-motion:reduce){
  .bg-talks li,.bg-connect-card,.bg-finder-btn,
  .bg-faq summary,.bg-rot-item{transition:none!important}
}

/* ===========================================================================
   18. ELEMENTOR TEMPLATE ADDITIONS
   ---------------------------------------------------------------------------
   Only needed by the Elementor version of this page. Harmless if unused.
   Elementor emits its own wrappers, so a few rules below reach through
   .elementor-widget-container to get at the real element.
   =========================================================================== */

/* Logos */
.bg-header-logo img{height:52px;width:auto}
.bg-footer-logo img{height:46px;width:auto}

/* Header nav rendered as a text-editor with inline links */
.bg-spy-nav p{display:flex;flex-wrap:wrap;gap:clamp(20px,2.8vw,40px);margin:0;justify-content:flex-end}
.bg-spy-nav a{
  font-family:var(--bg-sans);font-size:14px;font-weight:500;color:var(--bg-ink);
  text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.bg-spy-nav a:hover,
.bg-spy-nav a[aria-current="true"]{color:var(--bg-green);border-bottom-color:var(--bg-clay)}

/* Footer link columns */
.bg-footer-links{list-style:none;margin:0;padding:0}
.bg-footer-links li{margin:0}
.bg-footer-links li a{
  display:inline-flex;align-items:center;min-height:44px;padding:2px 0;
  color:rgba(220,232,214,.9);text-decoration:none;transition:color .2s ease;
}
.bg-footer-links li a:hover{color:var(--bg-mint)}
.bg-footer-legal p{margin:0;font-size:12.5px}
.bg-site-footer{border-top:1px solid rgba(244,240,228,.14)}

/* Wide UI screenshot, shown whole rather than cropped */
.bg-frame-shot img{
  width:100%;height:auto;border:1px solid var(--bg-rule-strong);
  background:var(--bg-warm-white);border-radius:var(--bg-radius);
}

/* The italic line in the contact section */
.bg-hand-note p{
  font-family:var(--bg-serif);font-style:italic;line-height:1.35;
  border-left:2px solid var(--bg-mint);padding-left:18px;margin:0;max-width:26ch;
}

/* Email, phone, based in */
.bg-contact-direct{margin:0;border-top:1px solid var(--bg-rule-light);padding-top:24px}
.bg-contact-direct dt{
  font-family:var(--bg-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bg-mint);margin-bottom:5px;
}
.bg-contact-direct dd{margin:0 0 16px;font-size:16px;color:var(--bg-muted)}
.bg-contact-direct dd a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--bg-cream);
  text-decoration:none;box-shadow:inset 0 -1px 0 var(--bg-mint);
}
.bg-contact-direct dd a:hover{box-shadow:inset 0 -1px 0 var(--bg-cream)}

/* Contact Form 7, styled to match the page */
.bg-form-card{
  background:var(--bg-warm-white);border:1px solid var(--bg-rule);
  padding:clamp(24px,3vw,40px);border-radius:var(--bg-radius);
}
.bg-form-card .field{margin-bottom:24px}
.bg-form-card label{
  display:block;font-family:var(--bg-sans);font-size:13px;font-weight:600;
  letter-spacing:.03em;margin-bottom:7px;color:var(--bg-ink);
}
.bg-form-card .help{
  display:block;font-size:13px;font-weight:400;color:var(--bg-ink-55);
  margin-top:3px;letter-spacing:0;
}
.bg-form-card input[type=text],
.bg-form-card input[type=email],
.bg-form-card textarea,
.bg-form-card select{
  width:100%;font-family:var(--bg-sans);font-size:16px;color:var(--bg-ink);
  background:var(--bg-cream);border:1px solid var(--bg-rule-strong);
  border-radius:var(--bg-radius);padding:13px 14px;min-height:48px;
}
.bg-form-card textarea{min-height:150px;resize:vertical;line-height:1.6}
.bg-form-card select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--bg-clay) 50%),
    linear-gradient(135deg,var(--bg-clay) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.bg-form-card input:focus,.bg-form-card textarea:focus,.bg-form-card select:focus{
  border-color:var(--bg-green);outline:2px solid var(--bg-clay-text);outline-offset:1px;
}
.bg-form-card .wpcf7-submit{
  background:var(--bg-green);color:var(--bg-cream);border:1px solid var(--bg-green);
  font-family:var(--bg-sans);font-size:14px;font-weight:600;
  padding:15px 28px;border-radius:var(--bg-radius);min-height:48px;cursor:pointer;
}
.bg-form-card .wpcf7-submit:hover{background:var(--bg-green-deep)}
.bg-form-card .form-note{font-size:13.5px;color:var(--bg-ink-55);margin-top:16px}

/* Elementor's nested accordion, styled like the prototype FAQ.
   It renders as <details>/<summary> inside .e-n-accordion. */
.bg-faq .e-n-accordion{border-top:1px solid var(--bg-rule-strong)}
.bg-faq .e-n-accordion-item{border-bottom:1px solid var(--bg-rule)}
.bg-faq .e-n-accordion-item-title{
  position:relative;padding:18px clamp(10px,1.4vw,18px);min-height:48px;
  font-family:var(--bg-serif);font-size:clamp(16.5px,1.5vw,20px);line-height:1.3;
  color:var(--bg-ink);cursor:pointer;transition:color .3s ease;
}
.bg-faq .e-n-accordion-item-title::before{
  content:"";position:absolute;inset:0;background:var(--bg-green);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;
}
.bg-faq .e-n-accordion-item-title:hover::before,
.bg-faq details[open] .e-n-accordion-item-title::before{transform:scaleY(1);transform-origin:top}
.bg-faq .e-n-accordion-item-title:hover,
.bg-faq details[open] .e-n-accordion-item-title{color:var(--bg-cream)}
.bg-faq .e-n-accordion-item-title > *{position:relative;z-index:1}
.bg-faq details[open] .e-n-accordion-item-title-text{color:var(--bg-cream)}
.bg-faq .e-con-inner,
.bg-faq .e-n-accordion-item > .e-con{
  background:var(--bg-muted);
  padding:clamp(24px,3vw,36px) clamp(10px,1.4vw,18px);
}

/* Connect cards are Elementor containers here, not anchors */
.bg-connect-grid{background:var(--bg-rule);border:1px solid var(--bg-rule)}
.bg-connect-card{background:var(--bg-cream);transition:background-color .28s ease}
.bg-connect-card:hover{background:var(--bg-green)}
.bg-connect-card:hover .elementor-heading-title,
.bg-connect-card:hover p{color:var(--bg-cream)!important}
.bg-connect-card:hover .bg-connect-go p{color:var(--bg-mint)!important}

@media(max-width:900px){
  .bg-spy-nav p{justify-content:flex-start}
  .bg-connect-grid{flex-direction:column}
}

/* ===========================================================================
   19. STOP ELEMENTOR PAINTING ITS OWN HOVER COLOURS
   ---------------------------------------------------------------------------
   Elementor 4's default accent is pink and it applies to button and link hover
   states. The finder rows and FAQ titles draw their own green fill with a
   ::before, so the element underneath has to stay transparent or the pink
   shows through. These are the same overrides the standalone plugin carries.
   =========================================================================== */
.bg-finder-btn,
.bg-finder-btn:hover,
.bg-finder-btn:focus,
.bg-finder-btn:active,
.bg-finder-btn[aria-selected="true"]{
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.bg-finder-btn::before{background-color:var(--bg-green) !important}
/* Cream text belongs to the green fill, so it is a hover state only.
   The selected row stays dark on the page background. */
.bg-finder-btn:hover{color:var(--bg-cream) !important}
.bg-finder-btn:hover .bg-finder-num{color:var(--bg-mint) !important}
.bg-finder-btn[aria-selected="true"]:not(:hover){color:var(--bg-ink) !important}
.bg-finder-btn[aria-selected="true"]:not(:hover) .bg-finder-num{color:var(--bg-clay-text) !important}
/* The reset above sets box-shadow:none !important to stop Elementor drawing
   button shadows, which also killed the clay marker. Put it back for the
   selected row only. */
.bg-finder-btn[aria-selected="true"]:not(:hover){
  box-shadow:inset 3px 0 0 0 var(--bg-clay) !important;
}

.bg-faq .e-n-accordion-item-title:hover,
.bg-faq details[open] .e-n-accordion-item-title{
  background-color:transparent !important;
  color:var(--bg-cream) !important;
}
.bg-faq .e-n-accordion-item-title::before{background-color:var(--bg-green) !important}

/* Links keep their own colours rather than the theme accent */
.bg-finder a:hover,
.bg-talks a:hover,
.bg-footer-links a:hover,
.bg-contact-direct a:hover{background-color:transparent !important}
.bg-finder-cta:hover{color:var(--bg-clay-text) !important;background:transparent !important}

/* The connect card is the one place a hover background is wanted */
.bg-connect-card:hover{background-color:var(--bg-green) !important}

/* The panel is filled by script. Give the empty state some height so the
   layout does not jump on first paint. */
.bg-finder-content{min-height:6em}
.bg-finder-content p{margin:0 0 1.1em}
.bg-finder-content p:last-child{margin-bottom:0}
.bg-finder-panel .bg-note:empty{display:none}
.bg-finder-panel .bg-note{margin-top:24px}

/* ===========================================================================
   24. ROTATING HERO QUESTION, BUILT ON A NATIVE ICON LIST
   ---------------------------------------------------------------------------
   The six phrases live in an Elementor Icon List widget, so they are edited
   in the panel like any other list: add, remove, reorder, retype. This CSS
   stacks the items on top of each other and the script fades between them.

   Elementor cannot do the rotation itself (Animated Headline is Pro only on
   this install), but the CONTENT is fully native and editable, which is the
   part that matters.
   =========================================================================== */
/* Specificity note: Elementor ships .elementor-widget-icon-list
   .elementor-icon-list-item at the same weight as a two-class selector and
   loads after this file, so it wins a tie. Qualifying the tag names lifts
   these above it without resorting to !important. */
.bg-rotator-list ul.elementor-icon-list-items{
  position:relative;
  /* Two lines of the rotating text, which is 36px desktop down to 25px mobile.
     Set in px rather than em because the em here would resolve against the
     list's 16px, not the phrase's size. */
  min-height:calc(2 * 1.18 * clamp(25px, 3.4vw, 36px));
  margin:0;
  padding:0;
  list-style:none;
}
.bg-rotator-list ul.elementor-icon-list-items > li.elementor-icon-list-item{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  margin:0;
  padding:0;
  opacity:0;
  transform:translateY(.18em);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;
}
.bg-rotator-list ul.elementor-icon-list-items > li.elementor-icon-list-item.is-on{
  opacity:1;
  transform:none;
}
/* No bullet, no icon slot. */
.bg-rotator-list .elementor-icon-list-icon{display:none}
.bg-rotator-list .elementor-icon-list-text{
  padding-inline-start:0;
  display:block;
}
/* In the editor, show them stacked so every phrase is visible and clickable. */
.elementor-editor-active .bg-rotator-list .elementor-icon-list-items,
.elementor-editor-preview .bg-rotator-list .elementor-icon-list-items{
  min-height:0;
}
.elementor-editor-active .bg-rotator-list ul.elementor-icon-list-items > li.elementor-icon-list-item{
  position:static;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce){
  .bg-rotator-list .elementor-icon-list-item{transition:none}
}

/* ===========================================================================
   20. CONNECT CARDS INSIDE ELEMENTOR CONTAINERS
   ---------------------------------------------------------------------------
   Elementor containers do not take padding from a plain class. They write it
   into CSS custom properties (--padding-top and friends) and read those back
   in .e-con, which outranks anything set here by class name alone. The page
   template sets those vars to 0, so the cards collapsed to bare text with no
   background and no dividers.
   Forcing the values is the fix that does not need the page re-imported.
   =========================================================================== */
.bg-connect-grid{
  align-items:stretch;
}
.bg-connect-card{
  /* padding and background now come from the page template */
  transition:background-color .28s ease;
  cursor:pointer;
}
.bg-connect-card:hover{background-color:var(--bg-green) !important}
.bg-connect-card:hover .elementor-heading-title,
.bg-connect-card:hover p{color:var(--bg-cream) !important}
.bg-connect-card:hover .bg-connect-go p{color:var(--bg-mint) !important}
.bg-connect-card .elementor-heading-title{margin-bottom:12px}
.bg-connect-go p{margin-top:18px}

@media(max-width:900px){
  .bg-connect-grid{flex-direction:column !important}
}

/* ===========================================================================
   21. HEADER LOGO SIZE
   ---------------------------------------------------------------------------
   Same reason. Elementor image widgets are full width unless told otherwise,
   and a 2039px logo will fill the header. Forced here so it is right whether
   or not the class survived being rebuilt in UAE.
   =========================================================================== */
/* LOGO SIZING
   A default, not an override. Specific enough to beat Elementor's generic
   image styles, but still losing to anything you set on the widget itself,
   because Elementor writes per-element rules that are more specific again.

   So: leave it alone and the logo is 52px tall rather than its native 2039px.
   Set a width in the Style tab and yours wins.

   The min-height guard matters. If a stray width of 0 ends up on the widget,
   this keeps the logo visible instead of collapsing it to nothing. */
.bg-sticky-header .elementor-widget-image .elementor-widget-container img,
.bg-header-logo .elementor-widget-container img,
.bg-header-logo img{
  height:52px;
  width:auto;
  max-width:100%;
  min-height:32px;
  display:block;
}
.bg-site-footer .bg-footer-logo .elementor-widget-container img,
.bg-footer-logo img{
  height:46px;
  width:auto;
  max-width:100%;
  min-height:28px;
  display:block;
}
/* Never let an image collapse to nothing anywhere on the page. */
.bg-sticky-header img,
.bg-site-footer img{visibility:visible;opacity:1}

/* ===========================================================================
   22. LET ELEMENTOR'S COLOUR PICKER WIN
   ---------------------------------------------------------------------------
   Elementor sets colour on a widget's wrapper and lets it cascade to the
   paragraph inside. Earlier sections of this file colour that paragraph
   directly, and a direct rule always beats an inherited one, so the picker in
   the Style tab appeared to do nothing.

   Telling those paragraphs to inherit hands control back to Elementor while
   keeping every layout rule intact. Colour becomes editable; spacing, rules
   and pseudo-elements stay as designed.

   The exceptions below stay forced on purpose: they are part of a component's
   identity rather than free choices, and there is nowhere sensible in the
   Elementor UI to set them.
   =========================================================================== */
.bg-caption p,
.bg-eyebrow p,
.bg-note p,
.bg-connect-go p,
.bg-step-num p,
.bg-qlabel p,
.bg-finder-label p,
.bg-finder-content p,
.bg-faq-body p{
  color:inherit;
}

/* Still forced: the uppercase label inside a research note, and the
   credential labels. Both are structural, not a colour choice. */
.bg-note strong,.bg-note b{color:var(--bg-clay-text)}
.bg-on-dark .bg-note strong,.bg-on-dark .bg-note b{color:var(--bg-mint)}
.bg-cred li strong{color:var(--bg-mint)}

/* Hover states on the connect cards have to override, or the text would stay
   dark on the green fill and become unreadable. */
.bg-connect-card:hover p{color:var(--bg-cream) !important}
.bg-connect-card:hover .bg-connect-go p{color:var(--bg-mint) !important}

/* ===========================================================================
   23. HEADER LAYOUT INSIDE UAE
   ---------------------------------------------------------------------------
   UAE renders the header template inside its own full width wrapper, so the
   boxed width set on the container in the template is ignored and the content
   spreads to the browser edges. It also lets the three columns wrap onto two
   rows once they run out of room.

   Capping the inner container at 1360px is what lines the logo up with the
   headline underneath it, because the page sections use the same figure.
   =========================================================================== */
.bg-sticky-header{
  --padding-top:14px;
  --padding-bottom:14px;
  --padding-left:24px;
  --padding-right:24px;
}

/* Elementor puts boxed content in .e-con-inner. Cap and centre it. */
.bg-sticky-header > .e-con-inner{
  max-width:1360px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* One row: logo left, menu and button right, never wrapping. */
/* Direction and wrapping stay forced, because letting the menu drop under the
   logo is never what you want. Vertical alignment is NOT forced, so the
   container's Align Items control works:
       select the header row > Layout > Align Items
   Start / Center / End moves the logo up, centres it, or drops it down. */
.bg-sticky-header .e-con-inner > .e-con,
.bg-sticky-header > .e-con-inner > .e-child{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  width:100% !important;
  align-items:center;
  gap:32px;
}

/* Let the logo keep its size and the menu take the slack. */
.bg-sticky-header .bg-header-logo{flex:0 0 auto !important;width:auto !important}
.bg-sticky-header .bg-spy-nav{flex:1 1 auto !important;width:auto !important}
.bg-sticky-header .elementor-widget-button{flex:0 0 auto !important;width:auto !important}

/* Menu sits hard right, next to the button, and on the same optical line as
   the logo. The nav widget's own item padding pushed it 23px low otherwise. */
.bg-sticky-header .bg-spy-nav p{
  justify-content:flex-end;
  margin:0;
}
.bg-sticky-header .bg-spy-nav{
  display:flex;
  align-items:center;
}
.bg-sticky-header .bg-spy-nav .elementor-widget-container,
.bg-sticky-header .bg-spy-nav .hfe-nav-menu,
.bg-sticky-header .bg-spy-nav .hfe-nav-menu__layout-horizontal{
  width:100%;
}
.bg-sticky-header .bg-spy-nav ul.hfe-nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0;
  padding:0;
}
.bg-sticky-header .bg-spy-nav .menu-item{display:flex;align-items:center}

/* MOBILE HEADER
   Stay on one row: logo left, hamburger right. Letting these wrap pushed the
   header to 213px on a phone, which is a third of the screen before you have
   read anything. The "Ask a question" button is hidden because Contact is
   already in the menu, and two calls to action in a 393px bar is one too many. */
@media(max-width:900px){
  .bg-sticky-header .e-con-inner > .e-con,
  .bg-sticky-header > .e-con-inner > .e-child{
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center;
    gap:12px;
  }
  .bg-sticky-header .elementor-widget-button{display:none}
  .bg-sticky-header .bg-spy-nav{flex:0 0 auto !important}

  /* A 37px target is under the 44px minimum for comfortable tapping. */
  .bg-sticky-header .hfe-nav-menu__toggle{
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
}

/* Footer gets the same treatment, same reason. */
.bg-site-footer > .e-con-inner{
  max-width:1360px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* The logo sits in its own column. Give it something to align against so
   Align Self works on it too, and keep the header from growing taller than
   its contents need. */
.bg-sticky-header .bg-header-logo{align-self:auto}
.bg-sticky-header .e-con-inner > .e-con{min-height:0}

/* ===========================================================================
   26. CONNECT CARDS: WHOLE CARD CLICKABLE
   ---------------------------------------------------------------------------
   Elementor 4 does not render a container's Link setting as an anchor, so the
   Substack, YouTube and Facebook cards had the URL stored but nothing clickable
   on the page. The real link now lives on the Read / Watch / Follow line, and
   this stretches it to cover the whole card.

   Better than wrapping the card in an anchor: screen readers announce one
   sensible link rather than reading the entire card as link text, and the
   heading and description stay selectable.
   =========================================================================== */
.bg-connect-card{position:relative}
.bg-connect-card .bg-connect-go a{position:static}
.bg-connect-card .bg-connect-go a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.bg-connect-card:focus-within{outline:2px solid var(--bg-clay-text);outline-offset:3px}
.bg-connect-card .bg-connect-go a:focus-visible{outline:none}

/* ===========================================================================
   27. CONTACT FORM SUBMIT BUTTON
   ---------------------------------------------------------------------------
   This is Contact Form 7's own submit input, not an Elementor button, which is
   why it has no Style tab and why Elementor's default pink accent was showing
   on hover.

   Earlier rules for this were scoped to .bg-form-card, which is not present on
   the live page, so none of them applied. These are scoped to the form itself.

   Hover uses the darker clay rather than the brand clay: cream on #C1663F is
   3.9:1, which fails AA for 14px bold text. #A9512E is 5:1 and reads as the
   same colour.
   =========================================================================== */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit,
.wpcf7-form button[type="submit"]{
  background-color:var(--bg-green);
  color:var(--bg-cream);
  border:1px solid var(--bg-green);
  font-family:var(--bg-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  padding:15px 28px;
  border-radius:var(--bg-radius);
  min-height:48px;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form button[type="submit"]:hover{
  background-color:var(--bg-clay-text);
  border-color:var(--bg-clay-text);
  color:var(--bg-cream);
}
.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-form .wpcf7-submit:focus-visible,
.wpcf7-form button[type="submit"]:focus-visible{
  outline:2px solid var(--bg-clay-text);
  outline-offset:3px;
}
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form .wpcf7-submit:disabled{
  opacity:.6;
  cursor:wait;
}