/* ==========================================================================
   Swarm ICT — design system for the Elementor build.

   Elementor owns LAYOUT (containers, flex, widths, padding).
   This file owns LOOK (brand tokens, type, and the treatments Elementor's
   controls cannot express: hexagon icon frames, hard offset shadows, the hex
   background field, pill badges, tick lists, and the clinic type scale).

   Every rule is scoped to a sw- class that the page build adds to a container
   or widget, so nothing here leaks into the Elementor UI or the theme.
   ========================================================================== */

:root {
  --sw-yellow:      #FDFD0B;
  --sw-yellow-deep: #E3E300;
  --sw-yellow-soft: #FFFDE0;
  --sw-gold:        #806900;
  --sw-charcoal:    #2A2929;
  --sw-ink:         #141414;
  --sw-navy:        #111A31;
  --sw-navy-mid:    #1B2748;
  --sw-white:       #FFFFFF;
  --sw-cloud:       #F6F6F4;
  --sw-line:        #E4E4DE;
  --sw-line-strong: #CFCFC7;
  --sw-body:        #4B4B48;
  --sw-muted:       #6E6E69;

  --sw-radius:      14px;
  --sw-radius-sm:   8px;
  --sw-t:           .25s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------------ type -- */

body,
.elementor-widget-text-editor,
.elementor-widget-icon-list {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6 {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.02em;
}

/* Body copy sits at a comfortable measure rather than running the full width. */
.sw-measure .elementor-widget-text-editor { max-width: 66ch; }

/* Yellow highlight behind a word in a heading. Always charcoal on yellow. */
.sw-mark {
  background: var(--sw-yellow);
  color: var(--sw-charcoal);
  padding: .04em .16em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Small uppercase label. Gold on light, brand yellow on dark. */
.sw-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.sw-eyebrow .elementor-heading-title::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
  opacity: .85;
}

/* --------------------------------------------------------------- surfaces -- */

.sw-card,
.sw-card-dark {
  border-radius: var(--sw-radius);
  transition: transform var(--sw-t), box-shadow var(--sw-t), border-color var(--sw-t);
}
.sw-card:hover,
.sw-card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(20,20,20,.10);
}
.sw-card-dark:hover { box-shadow: 0 12px 36px rgba(0,0,0,.35); }

/* A card that should sit still — used where the whole row is one statement. */
.sw-card-flat:hover { transform: none; box-shadow: none; }

/* Hard offset block behind an image. No blur: this is a graphic device. */
.sw-offset img {
  border-radius: var(--sw-radius);
  display: block;
  box-shadow: 18px 18px 0 var(--sw-yellow);
}
.sw-offset-navy img { box-shadow: 18px 18px 0 var(--sw-navy); }
@media (max-width: 860px) {
  .sw-offset img,
  .sw-offset-navy img { box-shadow: 12px 12px 0 var(--sw-yellow); }
  .sw-offset-navy img { box-shadow: 12px 12px 0 var(--sw-navy); }
}

.sw-bordered img {
  border-radius: var(--sw-radius);
  border: 1px solid var(--sw-line);
  display: block;
}

/* The hexagon field from the logo, as a faint repeating ground. */
.sw-hexfield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.17v32.33L28 64.67 0 48.5V16.17z' fill='none' stroke='%23ffffff' stroke-opacity='.028' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  background-repeat: repeat;
}
.sw-hexfield-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.17v32.33L28 64.67 0 48.5V16.17z' fill='none' stroke='%232A2929' stroke-opacity='.035' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  background-repeat: repeat;
}

/* Charcoal promise panel. */
.sw-promise {
  background: var(--sw-charcoal);
  border-radius: var(--sw-radius);
  color: rgba(255,255,255,.78);
}
.sw-promise .elementor-heading-title { color: var(--sw-yellow) !important; }

/* Soft note, yellow rule down the left. */
.sw-note {
  background: var(--sw-yellow-soft);
  border-left: 4px solid var(--sw-yellow);
  border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
}

/* ----------------------------------------------------------------- lists -- */

/* Tick list: square-off the icon column and give the rows air. */
.sw-check .elementor-icon-list-item {
  align-items: flex-start;
}
.sw-check .elementor-icon-list-icon {
  padding-top: .28em;
}
.sw-check .elementor-icon-list-text {
  line-height: 1.6;
}

/* Two-column tick list on wide screens. */
@media (min-width: 861px) {
  .sw-check-2 .elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
  }
  .sw-check-2 .elementor-icon-list-item {
    flex: 1 1 calc(50% - 16px);
    min-width: 240px;
  }
}

/* ---------------------------------------------------------------- badges -- */

.sw-badge .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.sw-badge .elementor-icon-box-content { flex: none; }
.sw-badge .elementor-icon-box-title { margin: 0; white-space: nowrap; }
.sw-badge .elementor-icon-box-description { display: none; }

/* ----------------------------------------------------------------- stats -- */

.sw-stat-num .elementor-heading-title {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- hex icon -- */

/* Elementor's stacked icon widget supplies the yellow ground and the charcoal
   glyph; the hexagon itself is the one shape its control cannot draw, so it is
   clipped here from the same proportions as the logo mark.

   The box needs an explicit size and inline-grid. As a plain grid it is a block
   box, so it stretched to the full width of its card and the hexagon came out
   as a long flat sliver. */
.sw-hex .elementor-icon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 0 !important;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 70px;
  padding: 0 !important;
}
.sw-hex-sm .elementor-icon {
  width: 46px;
  height: 51px;
}

/* The glyph sits inside the hexagon, so it must not take the hexagon's size. */
.sw-hex .elementor-icon svg,
.sw-hex .elementor-icon i { width: 26px; height: 26px; font-size: 24px; }
.sw-hex-sm .elementor-icon svg,
.sw-hex-sm .elementor-icon i { width: 19px; height: 19px; font-size: 17px; }

/* Keep the hexagon hard against the left edge of the card it sits in. */
.sw-hex .elementor-icon-wrapper { text-align: left; }

/* Large phone link in the closing band. */
.sw-phonelink .elementor-icon-box-wrapper { align-items: center; }
.sw-phonelink .elementor-icon-box-title { margin: 0; }
.sw-phonelink .elementor-icon-box-description { margin: 0 0 2px; order: -1; }
.sw-phonelink .elementor-icon-box-content { display: flex; flex-direction: column; }
.sw-phonelink a { text-decoration: none; }

/* --------------------------------------------------------------- buttons -- */

.elementor .elementor-button {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  transition: transform var(--sw-t), background-color var(--sw-t), box-shadow var(--sw-t), border-color var(--sw-t);
}
.elementor .elementor-button:hover { transform: translateY(-2px); }
.sw-btn-primary .elementor-button:hover { box-shadow: 0 10px 26px rgba(227,227,0,.4); }
.sw-btn-dark .elementor-button:hover    { box-shadow: 0 12px 36px rgba(20,20,20,.18); }

/* ------------------------------------------------------------ press card -- */

.sw-press {
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  transition: transform var(--sw-t), border-color var(--sw-t), box-shadow var(--sw-t);
}
.sw-press:hover {
  border-color: var(--sw-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(20,20,20,.06);
}
.sw-press-dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.sw-press-dark:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.34);
}

/* --------------------------------------------------------------- pricing -- */

/* Background and border now come from the Elementor container settings, so the
   card is editable in the UI. Only the featured treatment lives here. */
.sw-price { border-radius: var(--sw-radius); }

/* The recommended tier is a filled charcoal card ringed in brand yellow. The
   ring is drawn with box-shadow rather than a border so it sits outside the
   box and cannot shift the layout, and it reads on the light pricing section
   and the dark one alike. */
.sw-price-featured {
  position: relative;
  box-shadow: 0 0 0 3px var(--sw-yellow), 0 22px 50px rgba(20, 20, 20, .22);
}
.sw-price-featured:hover { transform: none; }

/* The flag sits on yellow already, so keep it charcoal on white inside the
   dark card for a second point of contrast. */
.sw-price-featured .sw-flag .elementor-heading-title {
  background: var(--sw-yellow);
  color: var(--sw-charcoal);
}
.sw-flag .elementor-heading-title {
  display: inline-block;
  background: var(--sw-yellow);
  color: var(--sw-charcoal);
  border-radius: 100px;
  padding: .4rem 1rem;
}

/* --------------------------------------------------- timetable slot row -- */

.sw-slot {
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
}

/* ------------------------------------------------------------ accordions -- */

.sw-faq .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid var(--sw-line);
}
.sw-faq .elementor-tab-title {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
}

/* ============================================================== CLINIC ====
   The Tech Clinic pages are read by people in their seventies, eighties and
   nineties, often on a tablet at high zoom. They run a larger type scale and
   never use yellow text on a light ground.

   Scoped to the page's own content. The header and footer are shared Xpro
   templates sized for the whole site, and bumping their type up here made the
   footer link columns wrap on these three pages only.
   ========================================================================= */

/* Size only, never colour. Adding a colour here outranks the colour set on
   each widget, which turns light text on the dark sections dark-on-dark. */
body.sw-clinic [data-elementor-type="wp-page"] .elementor-widget-text-editor { font-size: 19px; line-height: 1.78; }
body.sw-clinic [data-elementor-type="wp-page"] .sw-lead .elementor-widget-text-editor,
body.sw-clinic [data-elementor-type="wp-page"] .elementor-widget-text-editor.sw-lead { font-size: 22px; }
body.sw-clinic [data-elementor-type="wp-page"] .elementor-icon-list-text { font-size: 19px; }
body.sw-clinic [data-elementor-type="wp-page"] .elementor-button { font-size: 18px; padding: 20px 34px; }
body.sw-clinic [data-elementor-type="wp-page"] .elementor-tab-title { font-size: 20px; }
body.sw-clinic [data-elementor-type="wp-page"] .elementor-tab-content { font-size: 18px; color: #55554F; }

@media (max-width: 600px) {
  body.sw-clinic [data-elementor-type="wp-page"] .elementor-widget-text-editor { font-size: 18px; }
}
/* ------------------------------------------------------------ motion off -- */

@media (prefers-reduced-motion: reduce) {
  .sw-card:hover, .sw-card-dark:hover, .sw-press:hover,
  .elementor .elementor-button:hover { transform: none; }
  * { transition: none !important; animation: none !important; }
}

/* Note panel on a dark ground. */
.sw-note-dark {
  background: rgba(253,253,11,.10);
  border-left: 4px solid var(--sw-yellow);
}

/* Divider rule between the what-we-fix category bands. */
.sw-ruled { border-top: 1px solid var(--sw-line); }

/* --------------------------------------------------------------- contact -- */

/* Round portrait beside "You'll be speaking to Olly". */
.sw-avatar img {
  /* Elementor writes width:100% on the image widget, so this has to win. */
  width: 104px !important;
  height: 104px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Fluent Forms, dressed to match the rest of the site. The plugin ships very
   little styling of its own, so these are the whole look rather than overrides. */
.sw-form .ff-el-input--label label {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--sw-charcoal);
  margin-bottom: .4rem;
}
.sw-form .ff-el-is-required.asterisk-right label:after { color: #A02020; }

.sw-form input[type=text],
.sw-form input[type=email],
.sw-form input[type=tel],
.sw-form select,
.sw-form textarea {
  width: 100%;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-radius-sm);
  padding: .85rem 1rem;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  color: var(--sw-charcoal);
  background: var(--sw-white);
  box-shadow: none;
}
.sw-form input:focus,
.sw-form select:focus,
.sw-form textarea:focus {
  outline: 3px solid rgba(253,253,11,.55);
  outline-offset: 1px;
  border-color: var(--sw-charcoal);
}
.sw-form textarea { min-height: 150px; resize: vertical; }
.sw-form .ff-el-group { margin-bottom: 1.25rem; }

.sw-form .ff-btn-submit {
  background: var(--sw-yellow);
  color: var(--sw-charcoal);
  border: 2px solid var(--sw-yellow);
  border-radius: var(--sw-radius-sm);
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 18px 34px;
  cursor: pointer;
  transition: background-color var(--sw-t), transform var(--sw-t);
}
.sw-form .ff-btn-submit:hover {
  background: var(--sw-yellow-deep);
  border-color: var(--sw-yellow-deep);
  transform: translateY(-2px);
}

/* Validation and the thank-you message. */
.sw-form .error-text,
.sw-form .text-danger { color: #A02020; font-size: 14px; }
.sw-form .ff-message-success {
  background: var(--sw-yellow-soft);
  border-left: 4px solid var(--sw-yellow);
  border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
  padding: 1.2rem 1.4rem;
  color: var(--sw-charcoal);
  font-size: 17px;
}

/* Name and phone sit side by side on wide screens. */
 (min-width: 700px) {
  .sw-form .ff_col_half { display: inline-block; width: calc(50% - 10px); vertical-align: top; }
  .sw-form .ff_col_half + .ff_col_half { margin-left: 16px; }
}

/* Map keeps the card treatment. */
.sw-map iframe,
.sw-map > div {
  border-radius: var(--sw-radius);
  border: 1px solid var(--sw-line);
}

/* ---------------------------------------------------------------- header -- */

/* Xpro's menu widget defaults to a pale grey (#B5B5B5) for link text, which
   fails contrast badly in the mobile drawer. Restate it in brand charcoal for
   every state and both breakpoints. */
.sw-header .menu-link,
.sw-header .nav-link,
.sw-header .xpro-elementor-nav-link,
.sw-header .xpro-elementor-dropdown-item,
.xpro-elementor-horizontal-navbar-wrapper .menu-link,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-item {
  color: var(--sw-charcoal);
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}
.sw-header .menu-link:hover,
.sw-header .menu-link:focus-visible,
.sw-header .xpro-elementor-dropdown-item:hover,
.xpro-elementor-horizontal-navbar-wrapper .menu-link:hover,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-item:hover {
  color: var(--sw-ink);
}

/* The dropdown-arrow and drawer-close glyphs inherit the same grey. */
.sw-header .xpro-dropdown-menu-toggle,
.xpro-elementor-horizontal-menu-close { color: var(--sw-charcoal); }

/* Drawer panel: white ground, so the charcoal type sits at full contrast. */
.xpro-elementor-horizontal-navbar-wrapper { background: var(--sw-white); }

/* NOTE: do NOT add `html { overflow-x: hidden }` here. Astra already sets it on
   <body>, which is enough to clip the closed off-canvas drawer. Setting it on
   <html> makes overflow-y compute to `auto`, which turns the root into a
   scroll container and stops the sticky header sticking. */

/* Elementor's responsive-hide control is not offered on this container, so the
   header's phone + CTA column is hidden with a class instead. Every page opens
   with a call button, so nothing is lost on a phone. */
@media (max-width: 767px) {
  .sw-hide-mobile { display: none !important; }
}

/* ------------------------------------------------------- header dropdown -- */

/* Xpro paints the desktop dropdown with Elementor's GLOBAL PRIMARY colour,
   which on this kit is the brand yellow, so every submenu item rendered as a
   solid yellow block. Yellow belongs on hover only.

   !important is needed here: Xpro ships its dropdown background as an
   !important declaration, so a more specific selector alone does not win. */
@media (min-width: 1025px) {
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a {
  background: var(--sw-white) !important;
  color: var(--sw-charcoal);
  border-bottom: 1px solid var(--sw-line);
}
}
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li:last-child > a {
  border-bottom: 0;
}
@media (min-width: 1025px) {
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a:hover,
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a:focus-visible {
  background: var(--sw-yellow) !important;
  color: var(--sw-charcoal) !important;
}
}

/* The page you are already on is marked with a yellow edge and heavier type,
   not a filled block — a solid yellow row reads as a hover that got stuck. */
@media (min-width: 1025px) {
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li.current-menu-item > a {
  background: var(--sw-white) !important;
  color: var(--sw-charcoal);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--sw-yellow);
}
}
@media (min-width: 1025px) {
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li.current-menu-item > a:hover {
  background: var(--sw-yellow) !important;
}
}

/* The little caret above the panel takes the same global colour. */
@media (min-width: 1025px) {
.sw-header .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu::after {
  background: var(--sw-white);
}
}

/* Give the now-white panel an edge so it lifts off the page. */
.sw-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-sm);
  box-shadow: 0 14px 40px rgba(20, 20, 20, .13);
  overflow: hidden;
}

/* The five top-level items must stay on one line at desktop. */
@media (min-width: 1025px) {
  .sw-header .xpro-elementor-horizontal-navbar-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a { white-space: nowrap; }
}

/* ------------------------------------------------------------- hero glow -- */

/* The static build carried a soft yellow bloom off the top-right of every dark
   hero. It warms the charcoal without competing with the headline. */
.sw-glow { position: relative; overflow: hidden; }
.sw-glow::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(253,253,11,.16) 0%, rgba(253,253,11,0) 68%);
  pointer-events: none;
  z-index: 0;
}
.sw-glow > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .sw-glow::after { width: 380px; height: 380px; top: -18%; right: -28%; }
}

/* ----------------------------------------------------------- body links -- */

/* Links inside copy were falling back to WordPress blue with no underline.
   Inheriting the surrounding colour keeps contrast correct on light and dark
   grounds alike; the underline is what marks them as links, so it does not
   depend on colour alone. Yellow arrives on hover. */
.elementor-widget-text-editor a,
.elementor-widget-icon-list .elementor-icon-list-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--sw-t), text-decoration-thickness var(--sw-t);
}
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible,
.elementor-widget-icon-list .elementor-icon-list-text a:hover {
  text-decoration-color: var(--sw-yellow);
  text-decoration-thickness: 3px;
}

/* ---------------------------------------------------------------- footer -- */

/* A hairline above the copyright row, rather than a second block of colour. */
.sw-footer-bar { border-top: 1px solid rgba(255,255,255,.12); }

/* Footer link lists carry no icons, so drop the icon column entirely. */
.sw-footer-bar .elementor-icon-list-icon,
footer .elementor-icon-list-icon { display: none; }

/* Astra sets a global `ul { list-style: disc }`. Elementor's icon-list stylesheet
   normally overrides it, but it is only enqueued on pages that use the widget in
   the page body -- on the contact page it was not, so the footer sprouted bullets.
   State it here so the footer is not at the mercy of which widgets a page uses. */
footer .elementor-icon-list-items,
footer .elementor-icon-list-item {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

footer .elementor-icon-list-item > a,
footer .elementor-icon-list-text { transition: color var(--sw-t); }

/* ------------------------------------------------------------- guides -- */

/* Byline under a guide's title, in the dark hero. */
.sw-postmeta .sw-postmeta-line {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13.5px;
  color: rgba(255,255,255,.62);
  letter-spacing: .01em;
}

/* The guide itself. One column, a comfortable measure, room to breathe. */
.sw-post-body {
  color: var(--sw-body);
  font-size: 17.5px;
  line-height: 1.72;
}
.sw-post-body p { margin: 0 0 1.35em; }
.sw-post-body > *:last-child { margin-bottom: 0; }

.sw-post-body h2,
.sw-post-body h3 {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  color: var(--sw-ink);
  letter-spacing: -.02em;
}
.sw-post-body h2 { font-size: 27px; line-height: 1.2; margin: 2.1em 0 .6em; }
.sw-post-body h3 { font-size: 20px; line-height: 1.28; margin: 1.7em 0 .5em; }
.sw-post-body h2:first-child,
.sw-post-body h3:first-child { margin-top: 0; }

.sw-post-body ul,
.sw-post-body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.sw-post-body li { margin-bottom: .5em; }
.sw-post-body li::marker { color: var(--sw-gold); }

.sw-post-body a { color: var(--sw-gold); text-underline-offset: 2px; }
.sw-post-body a:hover { color: var(--sw-charcoal); }

.sw-post-body strong { color: var(--sw-ink); font-weight: 600; }

.sw-post-body blockquote {
  margin: 1.8em 0;
  padding: 1.1em 1.4em;
  background: var(--sw-yellow-soft);
  border-left: 3px solid var(--sw-yellow-deep);
  border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
}
.sw-post-body blockquote p:last-child { margin-bottom: 0; }

.sw-post-body img { border-radius: var(--sw-radius); max-width: 100%; height: auto; }

.sw-post-image img { border-radius: var(--sw-radius); width: 100%; height: auto; }

/* Older readers find this section too, so nothing here drops below 17px. */
@media (max-width: 767px) {
  .sw-post-body { font-size: 17px; }
  .sw-post-body h2 { font-size: 24px; }
}

/* ------------------------------------------------------ guides index -- */

.sw-postgrid .xpro-post-grid-item,
.sw-postgrid article {
  border-radius: var(--sw-radius);
  overflow: hidden;
  transition: transform var(--sw-t), box-shadow var(--sw-t);
}
.sw-postgrid .xpro-post-grid-item:hover,
.sw-postgrid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(20,20,20,.10);
}
.sw-postgrid img { border-radius: 0; }
.sw-postgrid h1, .sw-postgrid h2, .sw-postgrid h3, .sw-postgrid h4 {
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.015em;
  line-height: 1.24;
}
.sw-postgrid a { color: inherit; text-decoration: none; }
.sw-postgrid a:hover { color: var(--sw-gold); }

/* ---------------------------------------------------------------
   Single posts: release Astra's narrow reading column.

   Astra sets .ast-container to max-width:750px on single posts, which
   squeezed the whole Xpro post template into a 710px box: the hero lost
   its full-bleed background and the CTA sat as a yellow block with its
   own content spilling outside it.

   Pages escape this by using Elementor's Full Width template. Posts
   cannot: setting elementor_header_footer on a post stops the Xpro
   theme-builder template rendering at all, hero and CTA included.
   So the container is released here instead.
   --------------------------------------------------------------- */
body.single-post .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.single-post .xpro-theme-builder-singular-wrapper {
  width: 100%;
  max-width: 100%;
}

/* Blog index (/guides/): same release as single posts.
   Astra boxes it at 1240px while the header and footer run to the full
   viewport, so the navy hero sat as a panel with white either side. */
body.blog .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Centre the inner columns of the post template. Releasing the container
   above left the 760px reading column hard against the left padding edge,
   because it was authored inside a fixed 750px area and never needed to
   centre itself. The wider hero and CTA columns are already centred, so
   auto margins are a no-op for them. */
body.single-post .xpro-theme-builder-singular-wrapper > [data-elementor-type] > .e-con > .e-con {
  margin-left: auto;
  margin-right: auto;
}


/* ---------------------------------------------------------------
   Guides index: take layout back from Cubeportfolio.

   Xpro positions each card absolutely from JavaScript. With featured
   images switched on it mismeasures and stacks the cards full width
   instead of forming columns. A plain CSS grid is more robust, reflows
   without JS, and does not care when the images finish loading.
   --------------------------------------------------------------- */
/* The items live inside .cbp-wrapper, not directly under the grid root,
   and Cubeportfolio leaves that wrapper visibility:hidden until its own
   JS reveals it. With its layout disabled that never happens, so the
   grid goes on the wrapper and visibility is forced back on. */
.sw-postgrid .xpro-post-grid-main,
.sw-postgrid .cbp-wrapper-outer {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
}
.sw-postgrid .cbp-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
}
.sw-postgrid .cbp-item { visibility: visible !important; }
.sw-postgrid .xpro-post-grid-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  opacity: 1 !important;
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  overflow: hidden;
}
.sw-postgrid .cbp-item-wrapper { display: flex; flex-direction: column; height: 100%; }

.sw-postgrid .xpro-post-grid-image { margin: 0; overflow: hidden; }
.sw-postgrid .xpro-post-grid-image img {
  display: block;
  width: 100%;
  height: 176px;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--sw-t);
}
.sw-postgrid .xpro-post-grid-item:hover .xpro-post-grid-image img { transform: scale(1.04); }

.sw-postgrid .xpro-post-grid-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.sw-postgrid .xpro-post-grid-meta-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  color: var(--sw-muted);
}
.sw-postgrid .xpro-post-grid-meta-list li { margin: 0; }
.sw-postgrid .xpro-post-grid-title {
  font-size: 18px;
  margin: 0 0 9px;
  color: var(--sw-charcoal);
}
.sw-postgrid .xpro-post-grid-excerpt {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.58;
  color: var(--sw-body);
  flex: 1;
}
.sw-postgrid .xpro-post-grid-btn {
  align-self: flex-start;
  font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--sw-gold);
  border-bottom: 2px solid var(--sw-yellow);
  padding-bottom: 2px;
  transition: color var(--sw-t), border-color var(--sw-t);
}
.sw-postgrid .xpro-post-grid-item:hover .xpro-post-grid-btn {
  color: var(--sw-charcoal);
  border-color: var(--sw-charcoal);
}

@media (max-width: 1240px) {
  .sw-postgrid .cbp-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1024px) {
  .sw-postgrid .cbp-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  .sw-postgrid .cbp-wrapper { grid-template-columns: 1fr; gap: 20px; }
  .sw-postgrid .xpro-post-grid-image img { height: 190px; }
}

/* Centre the archive columns.

   The guides grid sits in a fixed-width container with no auto margins, so on
   a wide screen it pinned to the left with dead space beside it while the hero
   above it centred correctly. Single posts were already handled; the archive
   and the blog index were not. */
body.blog .xpro-theme-builder-archive-wrapper > [data-elementor-type] > .e-con > .e-con,
body.archive .xpro-theme-builder-archive-wrapper > [data-elementor-type] > .e-con > .e-con {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
   Mobile corrections
   --------------------------------------------------------------- */

/* Astra back-to-top button ships in its own bright blue (#046BD2), which
   belongs to no part of this site. Charcoal with a yellow arrow instead. */
#ast-scroll-top {
  background-color: var(--sw-charcoal) !important;
  color: var(--sw-yellow) !important;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(20,20,20,.22);
}
#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background-color: var(--sw-yellow) !important;
  color: var(--sw-charcoal) !important;
}

/* The open mobile menu painted the current section as a solid yellow bar,
   which shouts louder than the page title and fights the panel. Match the
   dropdown treatment already used elsewhere: white, with a yellow marker. */
/* Only in the collapsed menu. On the desktop bar the items sit side by side,
   so an inset left edge reads as a stray vertical line beside the active item,
   and the horizontal nav already has its own underline for the current page. */
@media (max-width: 1024px) {
  
}

/* The submenu arrow showed a dotted focus ring after being tapped. Give it a
   proper visible focus style for keyboards, and none for a mouse or finger. */
.xpro-elementor-horizontal-navbar-wrapper button:focus:not(:focus-visible),
.xpro-elementor-horizontal-navbar-wrapper a:focus:not(:focus-visible) {
  outline: none;
}
.xpro-elementor-horizontal-navbar-wrapper button:focus-visible,
.xpro-elementor-horizontal-navbar-wrapper a:focus-visible {
  outline: 2px solid var(--sw-charcoal);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------
   Mobile menu: the parts the Xpro widget cannot set itself.

   All colours now live in the menu widget settings (navy panel, white text,
   yellow for the current page, a lighter navy for taps). Only the things the
   widget has no control over are handled here, so nothing fights the widget.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* a soft yellow glow across the panel, as on the page heroes */
  .sw-header .xpro-elementor-horizontal-navbar-wrapper {
    background-image:
      radial-gradient(120% 60% at 100% 0%, rgba(253,253,11,.10) 0%, rgba(253,253,11,0) 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(253,253,11,.06) 0%, rgba(253,253,11,0) 62%);
  }

  /* the widget has no size control for the collapsed menu */
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 15px 14px !important;
  }
  .sw-header .xpro-elementor-dropdown-menu > li > a {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    padding: 13px 14px 13px 30px !important;
  }

  /* a marker down the edge of the page you are on */
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-parent > a {
    box-shadow: inset 4px 0 0 var(--sw-yellow);
  }
  .sw-header .xpro-elementor-dropdown-menu > li.current-menu-item > a {
    box-shadow: inset 3px 0 0 var(--sw-yellow);
    font-weight: 700 !important;
  }

  /* the arrows are spans that keep their own colour and vanish on navy */
  .sw-header .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle,
  .sw-header .xpro-elementor-horizontal-navbar-nav .dropdown-menu-toggle {
    color: var(--sw-yellow) !important;
    opacity: 1 !important;
  }

  /* the close button takes the brand yellow */
  .sw-header .xpro-elementor-horizontal-menu-close {
    background: var(--sw-yellow) !important;
    color: var(--sw-charcoal) !important;
    border-radius: 8px;
  }

  /* no dotted ring on tap; keep one for keyboards. The arrow is a span. */
  .sw-header .xpro-elementor-horizontal-navbar-wrapper a:focus:not(:focus-visible),
  .sw-header .xpro-elementor-horizontal-navbar-wrapper span:focus:not(:focus-visible),
  .sw-header .xpro-elementor-horizontal-navbar-wrapper button:focus:not(:focus-visible) {
    outline: none !important;
  }
}





.sw-card .sw-hex .elementor-icon-wrapper,
.sw-card .sw-hex .elementor-widget-container {
  text-align: center !important;
}

/* Icon, heading and body all centred, at Olly's request. */
.sw-card:has(.sw-hex) h3,
.sw-card:has(.sw-hex) h4,
.sw-card:has(.sw-hex) p,
.sw-card:has(.sw-hex) .elementor-widget-text-editor {
  text-align: center;
}








/* ---------------------------------------------------------------
   Card grids.

   Marked with .sw-cardgrid on the container rather than detected by counting
   .sw-card children. An earlier version did the counting, and caught the
   contact page column, which is a deliberate vertical stack of six cards,
   and laid it out in columns. Explicit beats clever here.

   Rows are equal height, so both rows of a six card block finish level.
   --------------------------------------------------------------- */
.sw-cardgrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.sw-cardgrid > .sw-card {
  width: auto !important;
  height: auto !important;
}

/* four cards read better two by two than three with one stranded below */
.sw-cardgrid:has(> .sw-card ~ .sw-card ~ .sw-card ~ .sw-card):not(:has(> .sw-card ~ .sw-card ~ .sw-card ~ .sw-card ~ .sw-card)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .sw-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sw-cardgrid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------
   Fluid content column

   Sections were built with a fixed 1180px inner column. Two problems:

   1. Between 1025px and about 1230px the column was wider than the window,
      so the page scrolled sideways. Elementor stops applying its tablet
      rules at 1024, leaving that band uncovered. It affected anyone who
      does not maximise the browser, and some older laptops.

   2. On a 27 inch screen a 1180px column fills under half the width, so the
      site looked like a narrow strip.

   One mechanism fixes both: the column fills the space up to a ceiling, and
   the ceiling grows on larger screens. No fixed width means no dead band.
   --------------------------------------------------------------- */
:root { --sw-shell: 1180px; }

@media (min-width: 1600px) { :root { --sw-shell: 1360px; } }
@media (min-width: 2100px) { :root { --sw-shell: 1560px; } }
@media (min-width: 2500px) { :root { --sw-shell: 1700px; } }

/* the inner column of every top level page section */
[data-elementor-type='wp-page'] > .e-con > .e-con,
[data-elementor-type='xpro-themer'] > .e-con > .e-con {
  width: min(var(--sw-shell), 100%) !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Reading columns stay narrow whatever the monitor. Long lines are hard to
   read, and that matters more here than filling the glass. */
body.single-post .xpro-theme-builder-singular-wrapper [data-elementor-type] > .e-con > .e-con:has(.xpro-post-content),
body.single-post .xpro-theme-builder-singular-wrapper [data-elementor-type] > .e-con > .e-con:has(.xpro-featured-image) {
  width: min(760px, 100%) !important;
}


/* A white strip above the footer on guide pages.

   WordPress gives single posts the hentry class, and Astra styles .hentry
   with margin-bottom: 1.5em. On a normal blog that separates one post from
   the next; here the Elementor wrapper carries it, so 24px of page
   background showed between the yellow call to action and the footer.
   Pages are unaffected because their wrapper has no hentry class. */
.site-content .elementor.hentry {
  margin-bottom: 0;
}

/* ------------------------------------------------- header hover (desktop) -- */
/* sw-menu-hover-pill: the dropdown items already fill yellow on hover, so the
   top-level items now do the same. Yellow text on the white header would sit
   at about 1.1:1 contrast and be unreadable, so the yellow goes behind the
   text, not on it. Mobile is untouched: the drawer is navy and handles its
   own hover colours through the widget settings. */
@media (min-width: 1025px) {
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a.sw-menu-hover-pill,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    border-radius: var(--sw-radius-sm);
    transition: background-color var(--sw-t), color var(--sw-t);
  }
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a:focus-visible,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li:hover > a {
    background: var(--sw-yellow) !important;
    color: var(--sw-charcoal) !important;
  }
  /* the caret is a span with its own colour: yellow on yellow disappears */
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a:hover .xpro-dropdown-menu-toggle,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li:hover > a .xpro-dropdown-menu-toggle,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a:hover .dropdown-menu-toggle,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li:hover > a .dropdown-menu-toggle {
    color: var(--sw-charcoal) !important;
  }
  /* the current-page edge marker would cut across the filled pill */
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a:hover,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a:hover,
  .sw-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-parent > a:hover {
    box-shadow: none;
  }
}

/* --------------------------------------------- header at middle widths -- */
/* sw-header-midwidth: the header row is three fixed columns (26% logo,
   50% menu, 24% phone + button). Adding Home made the menu wider than its
   50% below roughly 1300px, so it spilled left across the logo and pushed
   the phone onto a second line. Nothing above 1300px or below 1025px (where
   the burger takes over) is affected. */
@media (min-width: 1025px) and (max-width: 1600px) {
  /* let the columns size themselves instead of holding fixed percentages */
  .sw-header > .e-con-inner > .e-con, .sw-header > .e-con {
    min-width: 0;
  }
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 15.5px !important;
    padding: 10px 8px !important;
  }
  /* the strapline is decorative; the name carries the brand on its own */
}



/* Below 1200 the phone number text is the first thing to go: the yellow
   button does the same job, and the number is in the hero and the footer. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .sw-header .sw-hide-mobile .elementor-widget-heading {
    display: none !important;
  }
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 14.5px !important;
    padding: 9px 6px !important;
  }
}

/* sw-header-columns-auto: the three header columns are locked to 26/50/24%.
   Between 1025 and 1300 the menu no longer fits its 50% and overflowed left
   across the logo. Letting the columns size to their content, with the menu
   taking whatever is left, removes the overlap at every width in between. */
@media (min-width: 1025px) {
  .sw-header .elementor-element-41bd520 { width: auto !important; flex: 0 0 auto !important; }
  .sw-header .elementor-element-2a5cde1 { width: auto !important; flex: 0 0 auto !important; }
  .sw-header .elementor-element-be20189 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .sw-header .xpro-elementor-horizontal-navbar-wrapper { min-width: 0; }
  .sw-header .xpro-elementor-horizontal-navbar-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/* sw-header-tight: the menu row is justify-content:flex-end, so when the
   items outgrow the space the overflow spills LEFT across the logo rather
   than wrapping. At 1035px it wanted 682px and had 622px. Below 1200 the
   wordmark and the menu both give up a little to close that gap. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .sw-header .elementor-element-352baf8 .elementor-heading-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .sw-header .elementor-element-ffd12fb img { width: 34px !important; }
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 13.5px !important;
    padding: 8px 5px !important;
    letter-spacing: -0.1px;
  }
  .sw-header .elementor-element-6e661c4 { gap: 12px !important; }
  /* if it is still tight, the caret spacing is the last easy win */
  .sw-header .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle { margin-left: 2px !important; }
}

/* sw-header-row-widen: between 1301 and 1600 the header row was still being
   held to the 1180px content shell while logo + menu + phone + button needed
   about 1278px, so the menu overflowed left across the logo. The header is
   the one row that may run wider than the article shell. */
@media (min-width: 1301px) and (max-width: 1600px) {
  .sw-header .elementor-element-6e661c4 {
    width: min(1400px, calc(100% - 48px)) !important;
    max-width: none !important;
  }
}

/* On laptops up to 1400 the strapline goes so the phone number can stay.
   Given the audience, a visible telephone number is worth more than a
   decorative line under the wordmark. */

/* The strapline is decorative and costs about 60px of header width. It goes
   for the whole desktop band below 1600 so the telephone number can stay,
   and comes back on genuinely wide screens. */
@media (min-width: 1025px) and (max-width: 1600px) {
  .sw-header .elementor-element-352baf8 .elementor-heading-title br,
  .sw-header .elementor-element-352baf8 .elementor-heading-title span {
    display: none !important;
  }
}

/* sw-header-breathing: at 1320-1536 the menu cleared the logo by only 5px,
   which one longer label would undo. A slightly smaller menu at these widths
   buys about 45px of margin for error. */
@media (min-width: 1301px) and (max-width: 1600px) {
  .sw-header .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 14.5px !important;
    padding: 9px 7px !important;
  }
}