@font-face {
  font-family: 'Futura PT Book';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Book'), url('/fonts/futura-pt/FuturaCyrillicBook.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Light';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Light'), url('/fonts/futura-pt/FuturaCyrillicLight.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Medium';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Medium'), url('/fonts/futura-pt/FuturaCyrillicMedium.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Demi';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Demi'), url('/fonts/futura-pt/FuturaCyrillicDemi.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Heavy';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Heavy'), url('/fonts/futura-pt/FuturaCyrillicHeavy.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Bold';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Bold'), url('/fonts/futura-pt/FuturaCyrillicBold.woff') format('woff');
}

@font-face {
  font-family: 'Futura PT Extra Bold';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Futura PT Extra Bold'), url('/fonts/futura-pt/FuturaCyrillicExtraBold.woff') format('woff');
}




/* Hobart Website Design styles */

/* Default light theme (no JS fallback) */
:root,
:root[data-theme="light"] {
  --color-1: #000;
  --color-2: #333;
  --color-3: #fff;
  --color-4: #0B3335;
  --color-5: #FC358B;
  --color-6: #F5F354;
  --color-7: #32B0D7;
  --color-8: #F65C6B;
  --color-9: #028DD3;
  --color-10: #F8F7F5;
  --color-11: #E02E7A;
  --color-12: #800080;

  
  --color-bg: #F8F7F5;
  --dolor-bg: #000;

  --brand-color-bg: #000;
  --brand-color-text: #fff;
  --brand-dolor-bg: #0a2a2c;
  --brand-dolor-text: #FAF8FF;

  --menu-color-bg: #000;
  --menu-color-text: #fff;
  --menu-dolor-bg: #0a2a2c;
  --menu-dolor-text: #FAF8FF;

  --color-text: #000;
  --dolor-text: #FAF8FF;
  --color-text-link: #333;
  --color-text-link-bg: #F8E478;
  --color-text-link-bg-hover: #ffa296;
  --color-text-link-hover: var(--color-text-link);
  --dolor-text-link: #FAF8FF;
  --dolor-text-link-bg: var(--color-5);
  --dolor-text-link-bg-hover: var(--color-6);
  --dolor-text-link-hover: var(--color-2);
  
  --color-heading: var(--color-8);
  --color-heading-media: #FAEEB0;
  --dolor-heading: var(--color-5);
  --dolor-heading-media: #F5F354;

  --color-hero-subtitle: #555;
  --dolor-hero-subtitle: var(--color-3);

  --color-home-hero-bg:  var(--color-10);
  --dolor-home-hero-bg:  var(--color-4);


  --color-toggle-disabled-bg: #0a2a2c;
  --color-toggle-disabled-control: #555;
  --toggle-indicator-enabled-bg: #555;
  --color-toggle-enabled-bg: #FC358B;
  --color-toggle-enabled-control: #fff;
  --toggle-border-radius: 0.2rem;

  --body-font-family: 'Futura PT Book', sans-serif;
  --body-font-size: 1rem;
  --body-font-weight: normal;
  --body-line-height: 1.45;

  --heading-style-1-font-family: 'Futura PT Bold', sans-serif;
  --heading-style-1-font-size: 2.8rem;
  --heading-style-1-font-weight: normal;
  --heading-style-1-line-height: 1;
  --heading-style-1-margin: 2.75rem 0 1rem;
  --heading-style-1-text-transform: uppercase;

  --heading-style-2-font-family: 'Futura PT Bold', sans-serif;
  --heading-style-2-font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  --heading-style-2-font-weight: normal;
  --heading-style-2-line-height: 1.15;
  --heading-style-2-margin: 0 0 1rem 0;
  --heading-style-2-text-transform: uppercase;

  --heading-style-3-font-family: 'Futura PT Bold', sans-serif;
  --heading-style-3-font-size: 1.4rem;
  --heading-style-3-font-weight: normal;
  --heading-style-3-line-height: 1.15;
  --heading-style-3-margin: 0 0 1em 0;

  --heading-style-4-font-family: 'Futura PT Bold', sans-serif;
  --heading-style-4-font-size: 1.2rem;
  --heading-style-4-font-weight: normal;
  --heading-style-4-line-height: 1.15;
  --heading-style-4-margin: 0;

  --content-style-strong-font-family: 'Futura PT Bold', sans-serif;
  --content-style-strong-font-weight: normal;

  --content-style-large-font-family: 'Futura PT Book', sans-serif;
  --content-style-large-font-size: 2rem;
  --content-style-large-font-weight: normal;
  --content-style-large-line-height: 1.25;
  --content-style-large-margin: 1.25em;

  --content-style-default-font-family: 'Futura PT Book', sans-serif;
  --content-style-default-font-size: 1.3rem;
  --content-style-default-font-weight: normal;
  --content-style-default-line-height: 1.45;
  --content-style-default-margin: 1.25em;

  --work-grid-column-gap: 0.5rem;
  --work-card-background: var(--color-4);
  --work-card-padding: 1rem;

  --heading-work-card-font-family: 'Futura PT Bold', sans-serif;
  --heading-work-card-color: #fff;
  --heading-work-card-dolor: #faf8ff;
  --heading-work-card-size: 1.4rem;
  --heading-work-card-font-weight: 400;
  --heading-work-card-text-align: left;
  --heading-work-card-line-height: 1.15;
  --heading-work-card-text-transform: uppercase;

  --color-work-title:       var(--color-2);
  --dolor-work-title:       var(--color-8);
  --color-work-title-hover: var(--color-5);
  --dolor-work-title-hover: var(--color-11);
  --color-work-all-title:         var(--color-7);
  --dolor-work-all-title:         var(--color-7);
  --color-work-all-title-hover:   var(--color-9);
  --dolor-work-all-title-hover:   var(--color-9);

  --color-insights-link: var(--color-7);
  --dolor-insights-link: var(--color-7);
  --color-insights-link-hover: var(--color-9);
  --dolor-insights-link-hover: var(--color-9);
  --color-insights-arrow: var(--color-4);
  --dolor-insights-arrow: var(--color-4);
  --color-insights-placeholder: var(--color-8);
  --dolor-insights-placeholder: var(--color-5);
  --color-insights-title:       var(--color-8);
  --dolor-insights-title:       var(--color-5);
  --color-insights-title-hover: var(--color-5);
  --dolor-insights-title-hover: var(--color-6);
  --color-insights-content: var(--color-text);
  --dolor-insights-content: var(--dolor-text);

  /* Related content / insights page sections */
  --color-related-content-bg:            var(--color-4);
  --dolor-related-content-bg:            var(--color-1);

  --color-insights-section-bg:           var(--color-4);
  --dolor-insights-section-bg:           var(--color-1);

  --color-insights-more-link-bg:         var(--color-3);
  --dolor-insights-more-link-bg:         var(--color-7);
  --color-insights-more-link-text:       #fff;
  --dolor-insights-more-link-text:       #fff;
  --color-insights-more-link-hover-bg:   var(--color-7);
  --dolor-insights-more-link-hover-bg:   var(--color-9);
  --color-insights-more-link-border:     var(--color-insights-arrow);
  --dolor-insights-more-link-border:     var(--dolor-insights-arrow);

  /* Post card archive logotype */
  --color-post-card-logo-w1: #01a4fb;
  --dolor-post-card-logo-w1: #01a4fb;
  --color-post-card-logo-w2: #ffff3e;
  --dolor-post-card-logo-w2: #ffff3e;
  --color-post-card-logo-w3: #fd2b93;
  --dolor-post-card-logo-w3: var(--color-12);

  /* Hero Heading Split section */
  --color-hero-split-bg:        var(--color-4);
  --dolor-hero-split-bg:        var(--color-1);
  --color-hero-split-heading-1: var(--color-8);
  --dolor-hero-split-heading-1: var(--color-5);
  --color-hero-bg-label:        #1A3D40;
  --dolor-hero-bg-label:        #202020;

  /* Taxonomy link pill colours */
  --color-service-link-bg:          var(--color-8);
  --dolor-service-link-bg:          var(--color-5);
  --color-service-link-text:        #fff;
  --dolor-service-link-text:        #fff;
  --color-service-link-hover-bg:    var(--color-5);
  --dolor-service-link-hover-bg:    #e02e7a;

  --color-category-link-bg:         #e5e3e1;
  --dolor-category-link-bg:         #0e4042;
  --color-category-link-text:       var(--color-2);
  --dolor-category-link-text:       var(--dolor-text);
  --color-category-link-hover-bg:   #e5e3e1;
  --dolor-category-link-hover-bg:   #14494c;

  --color-all-link-bg:              var(--color-4);
  --dolor-all-link-bg:              var(--color-6);
  --color-all-link-text:            #fff;
  --dolor-all-link-text:            var(--color-1);
  --color-all-link-hover-bg:        #14494c;
  --dolor-all-link-hover-bg:        #dcd930;

  --color-technology-link-bg:       var(--color-2);
  --dolor-technology-link-bg:       rgba(255, 255, 255, 0.12);
  --color-technology-link-text:     var(--color-3);
  --dolor-technology-link-text:     var(--color-3);
  --color-technology-link-hover-bg: var(--color-1);
  --dolor-technology-link-hover-bg: rgba(255, 255, 255, 0.2);

  /* Consumer vars — what component CSS uses */
  --service-link-bg:          var(--color-service-link-bg);
  --service-link-text:        var(--color-service-link-text);
  --service-link-hover-bg:    var(--color-service-link-hover-bg);
  --category-link-bg:         var(--color-category-link-bg);
  --category-link-text:       var(--color-category-link-text);
  --category-link-hover-bg:   var(--color-category-link-hover-bg);
  --all-link-bg:              var(--color-all-link-bg);
  --all-link-text:            var(--color-all-link-text);
  --all-link-hover-bg:        var(--color-all-link-hover-bg);
  --technology-link-bg:       var(--color-technology-link-bg);
  --technology-link-text:     var(--color-technology-link-text);
  --technology-link-hover-bg: var(--color-technology-link-hover-bg);

  --color-onecol-default-bg:        var(--color-10);
  --dolor-onecol-default-bg:        var(--color-4);

  --section-one-column-default-bg: var(--color-onecol-default-bg);
  --section-one-column-style-1-bg: var(--color-4);
  --section-one-column-style-2-bg: var(--color-8);
  --section-one-column-style-3-bg: var(--color-10);

  --btn-font-family: 'Futura PT Demi', sans-serif;
  --btn-font-weight: normal;
  --btn-text-transform: uppercase;

  --btn-lg-font-family: 'Futura PT Bold', sans-serif;

  --contact-label-font-family: 'Futura PT Demi', sans-serif;
  --btn-lg-font-size: 1.4rem;
  --btn-lg-font-weight: 400;
  --btn-lg-line-height: 1.15;
  --btn-lg-text-transform: uppercase;
  --btn-lg-padding: 0.75rem 1rem;

  --project-link-font-size: 0.8rem;

  /* MENU */
  --menu-border-radius: initial;
  /* TOGGLE */
  /* --toggle-border-radius: initial; */
  /* --toggle-indicator-enabled-bg: var(--color-toggle-enabled-control); */

  /* NAV — default and per-section theme overrides */
  --color-nav-bg:               var(--color-4);
  --dolor-nav-bg:               var(--color-7);

  --color-nav-default-bg:       var(--color-4);
  --dolor-nav-default-bg:       var(--color-7);
  --color-nav-default-logotype: #01a4fb;
  --dolor-nav-default-logotype: var(--color-12);
  --color-nav-default-text:     #fff;
  --dolor-nav-default-text:     #fff;

  --color-nav-s1-bg:            var(--color-7);
  --dolor-nav-s1-bg:            var(--color-7);
  --color-nav-s1-logotype:      var(--color-4);
  --dolor-nav-s1-logotype:      var(--color-12);
  --color-nav-s1-text:          #fff;
  --dolor-nav-s1-text:          #fff;

  --color-nav-s2-bg:            var(--color-4);
  --dolor-nav-s2-bg:            var(--color-7);
  --color-nav-s2-logotype:      #01a4fb;
  --dolor-nav-s2-logotype:      var(--color-12);
  --color-nav-s2-text:          #fff;
  --dolor-nav-s2-text:          #fff;

  --color-nav-s3-bg:            var(--color-4);
  --dolor-nav-s3-bg:            var(--color-7);
  --color-nav-s3-logotype:      #01a4fb;
  --dolor-nav-s3-logotype:      var(--color-12);
  --color-nav-s3-text:          #fff;
  --dolor-nav-s3-text:          #fff;

  --main-nav-bg: var(--color-nav-bg);
  --color-menu-text: #fff;

  --heading-post-card-font-family: 'Futura PT Bold', sans-serif;
  --heading-post-card-color: #222;
  --heading-post-card-dolor: #faf8ff;
  --heading-post-card-size: 1.4rem;
  --heading-post-card-font-weight: 400;
  --heading-post-card-text-align: left;
  --heading-post-card-line-height: 1.15;
  --heading-post-card-text-transform: uppercase;

  --color-widget-heading: #FAEEB0;
  --color-widget-details: #ffa296;
  --color-widget-artist: #ffe2d6;
  --color-widget-empty: #333;
  --color-widget-placeholder: #fff;
  --dolor-widget-heading: #F5F354;
  --dolor-widget-details: #FAF8FF;
  --dolor-widget-artist: #FAF8FF;
  --dolor-widget-empty: #FAF8FF;
  --dolor-widget-placeholder: #FC358B;

  --frame-color-1: #333;
  --frame-dolor-1: #0B3335;
  --frame-color-2: #666;
  --frame-dolor-2: #0B3335;
  --frame-color-3: #333;
  --frame-dolor-3: #0B3335;
  --frame-color-4: #777;
  --frame-dolor-4: #0B3335;




  --form-color-text: #222;
  --form-dolor-text: #FAF8FF;
  --form-color-border: #e5e7eb;
  --form-dolor-border: rgba(255,255,255,0.2);
  --form-color-bg: #fff;
  --form-dolor-bg: #0e4042;
  --form-color-active-border: #ffa296;
  --form-dolor-active-border: #FC358B;
  --form-color-active-bg: #fff;
  --form-dolor-active-bg: #0e4042;
  --form-color-disabled-bg: grey;
  --form-dolor-disabled-bg: grey;
  --form-color-button-bg: var(--color-8);
  --form-dolor-button-bg: var(--color-5);
  --form-color-button-text: #fff;
  --form-dolor-button-text: #fff;
  --form-color-button-hover-text: #fff;
  --form-dolor-button-hover-text: #fff;
  --form-color-button-hover-bg: var(--color-5);
  --form-dolor-button-hover-bg: var(--color-11);
  --form-color-button-hover: #fff;
  --form-dolor-button-hover: #fff;
  --form-color-button-disabled: grey;
  --form-dolor-button-disabled: grey;
  --form-color-checkbox: #fff;
  --form-dolor-checkbox: #0e4042;
  --form-color-checkbox-border: #e5e7eb;
  --form-dolor-checkbox-border: rgba(255,255,255,0.2);
  --form-color-hover-checkbox: #ffa296;
  --form-dolor-hover-checkbox: #FC358B;
  --form-color-active-checkbox: #ffa296;
  --form-dolor-active-checkbox: #FC358B;
  --form-color-disabled-checkbox: grey;
  --form-dolor-disabled-checkbox: grey;


  
  --form-color-message-success-bg: #10b981;
  --form-color-message-success-text: #fff;
  --form-color-message-error-bg: #f55951;
  --form-color-message-error-text: #fff;



  --map-marker-color-emoji-border: #F8E478;
  --map-marker-dolor-emoji-border: #F5F354;
  --map-marker-color-emoji-border-hover: #FC358B;
  --map-marker-dolor-emoji-border-hover: #F5F354;
  --map-marker-color-emoji-background: rgba(255,255,255,0.85);
  --map-marker-dolor-emoji-background: rgba(11,51,53,0.85);

  --button-color-bg: var(--color-8);
  --button-dolor-bg: var(--color-5);
  --button-color-text: #fff;
  --button-dolor-text: #fff;
  --button-color-hover-bg: var(--color-5);
  --button-dolor-hover-bg: var(--color-11);
  --button-color-hover-text: #fff;
  --button-dolor-hover-text: #fff;

  /* ButtonLayout consumer vars — global fallback (sections override these) */
  --button-color:           var(--button-color-text);
  --button-bg-color:        var(--button-color-bg);
  --button-bg-color-active: var(--button-color-hover-bg);

  --error404-code-font-family: 'Futura PT Demi', sans-serif;
  --error404-code-font-size: 10rem;
  --error404-code-font-weight: normal;
  --error404-code-line-height: 1;
  --error404-title-font-family: var(--heading-style-1-font-family);
  --error404-title-font-size: 2rem;
  --error404-title-font-weight: normal;
  --error404-title-line-height: 1;
  --error404-title-text-transform: uppercase;

  --error404-code-color: var(--color-8);
  --error404-code-dolor: var(--color-8);
  --error404-back-btn-text: #4b5563;
  --error404-back-btn-dolor: var(--dolor-text);
  --error404-back-btn-bg-color: transparent;
  --error404-back-btn-bg-dolor: transparent;
  --error404-back-btn-hover-bg-color: var(--color-5);
  --error404-back-btn-hover-bg-dolor: #FC358B;
  --error404-back-btn-hover-text-color: #fff;
  --error404-back-btn-hover-text-dolor: #fff;

  --post-nav-prev-bg-color: var(--color-4);
  --post-nav-prev-bg-dolor: var(--color-4);
  --post-nav-next-bg-color: var(--color-8);
  --post-nav-next-bg-dolor: var(--color-5);
  --post-nav-prev-hover-bg-color: var(--color-2);
  --post-nav-prev-hover-bg-dolor: var(--color-1);
  --post-nav-next-hover-bg-color: var(--color-5);
  --post-nav-next-hover-bg-dolor: var(--color-11);
  --post-nav-label-color: rgba(255, 255, 255, 0.5);
  --post-nav-label-dolor: rgba(255, 255, 255, 0.5);
  --post-nav-title-color: #fff;
  --post-nav-title-dolor: #fff;
  --post-nav-title-font-family: "Futura PT Heavy", sans-serif;

  /* Content blockquote */
  --color-blockquote-border: var(--color-5);
  --dolor-blockquote-border: var(--color-7);
  --color-blockquote-bg:     #F2EFEB;
  --dolor-blockquote-bg:     #14494c;
  --color-blockquote-text:   var(--color-2);
  --dolor-blockquote-text:   var(--dolor-text);

  /* Inline code */
  --color-code-inline-bg:   #F2EFEB;
  --dolor-code-inline-bg:   #14494c;
  --color-code-inline-text: var(--color-4);
  --dolor-code-inline-text: var(--dolor-text);

  /* Content checklist */
  --color-checklist-bg:       #F2EFEB;
  --dolor-checklist-bg:       #14494c;
  --color-checklist-divider:  rgba(0, 0, 0, 0.08);
  --dolor-checklist-divider:  rgba(255, 255, 255, 0.08);
  --color-checklist-checkbox:       var(--color-8);
  --dolor-checklist-checkbox:       var(--color-7);
  --color-checklist-checkbox-hover: var(--color-11);
  --dolor-checklist-checkbox-hover: var(--color-9);

  /* Mark / highlight */
  --color-mark-bg:   var(--color-8);
  --dolor-mark-bg:   var(--color-6);
  --color-mark-text: var(--color-3);
  --dolor-mark-text: var(--color-1);

  /* Search result title */
  --color-search-result-title:       var(--color-2);
  --dolor-search-result-title:       var(--color-3);
  --color-search-result-title-hover: var(--color-2);
  --dolor-search-result-title-hover: var(--color-2);

  --color-code-bg: var(--color-1);
  --dolor-code-bg: var(--color-4);

  /* Author signoff */
  --color-author-name: var(--color-4);
  --dolor-author-name: var(--color-7);
  --color-author-role: #666;
  --dolor-author-role: #fff;
  --color-author-bio:  #555;
  --dolor-author-bio:  var(--dolor-text);
  --color-author-link: var(--color-4);
  --dolor-author-link: var(--color-7);
  --color-author-brand-ring:   #000;
  --dolor-author-brand-ring:   var(--dolor-text);
  --color-author-brand-letter: #fff;
  --dolor-author-brand-letter: #000;

  /* Post CTA */
  --color-post-cta-link-bg:       #fff;
  --dolor-post-cta-link-bg:       var(--color-4);
  --color-post-cta-link-hover-bg: var(--color-text-link-bg-hover);
  --dolor-post-cta-link-hover-bg: var(--color-1);
  --color-post-cta-btn-bg:        var(--color-4);
  --dolor-post-cta-btn-bg:        var(--color-4);
  --color-post-cta-btn-hover-bg:  var(--color-1);
  --dolor-post-cta-btn-hover-bg:  var(--color-1);
  --color-post-cta-btn-text:      #fff;
  --dolor-post-cta-btn-text:      #fff;

  /* Related section */
  --color-related-section-bg:      var(--color-10);
  --dolor-related-section-bg:      var(--color-1);
  --color-related-section-heading: var(--color-4);
  --dolor-related-section-heading: var(--color-3);

  /* Footer links */
  --color-footer-link-bg:       transparent;
  --dolor-footer-link-bg:       transparent;
  --color-footer-link-hover-bg: var(--color-7);
  --dolor-footer-link-hover-bg: var(--color-5);

  /* Footer CTA */
  --color-footer-cta-arrow:  url('/assets/hobartwebsitedesign/arrow_pink.svg');
  --dolor-footer-cta-arrow:  url('/assets/hobartwebsitedesign/arrow_hot_pink.svg');
  --color-footer-brand-link: url('/assets/hobartwebsitedesign/link_pink.svg');
  --dolor-footer-brand-link: url('/assets/hobartwebsitedesign/link_hot_pink.svg');
}


/* System dark preference (no JS fallback) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--dolor-bg);
    --color-text: var(--dolor-text);
    --color-text-link: var(--dolor-text-link);
    --color-text-link-bg: var(--dolor-text-link-bg);
    --color-text-link-bg-hover: var(--dolor-text-link-bg-hover);
    --color-text-link-hover: var(--dolor-text-link-hover);

    --brand-color-bg: var(--brand-dolor-bg);
    --brand-color-text: var(--brand-dolor-text);

    --menu-color-bg: var(--menu-dolor-bg);
    --menu-color-text: var(--menu-dolor-text);
    --color-nav-bg:               var(--dolor-nav-bg);
    --color-nav-default-bg:       var(--dolor-nav-default-bg);
    --color-nav-default-logotype: var(--dolor-nav-default-logotype);
    --color-nav-default-text:     var(--dolor-nav-default-text);
    --color-nav-s1-bg:            var(--dolor-nav-s1-bg);
    --color-nav-s1-logotype:      var(--dolor-nav-s1-logotype);
    --color-nav-s1-text:          var(--dolor-nav-s1-text);
    --color-nav-s2-bg:            var(--dolor-nav-s2-bg);
    --color-nav-s2-logotype:      var(--dolor-nav-s2-logotype);
    --color-nav-s2-text:          var(--dolor-nav-s2-text);
    --color-nav-s3-bg:            var(--dolor-nav-s3-bg);
    --color-nav-s3-logotype:      var(--dolor-nav-s3-logotype);
    --color-nav-s3-text:          var(--dolor-nav-s3-text);

    --color-heading: var(--dolor-heading);
    --color-heading-media: var(--dolor-heading-media);
    --color-hero-subtitle: var(--dolor-hero-subtitle);
    --color-home-hero-bg:  var(--dolor-home-hero-bg);

    --color-blockquote-border: var(--dolor-blockquote-border);
    --color-blockquote-bg:     var(--dolor-blockquote-bg);
    --color-blockquote-text:   var(--dolor-blockquote-text);

    --color-code-inline-bg:   var(--dolor-code-inline-bg);
    --color-code-inline-text: var(--dolor-code-inline-text);

    --color-checklist-bg:       var(--dolor-checklist-bg);
    --color-checklist-divider:  var(--dolor-checklist-divider);
    --color-checklist-checkbox:       var(--dolor-checklist-checkbox);
    --color-checklist-checkbox-hover: var(--dolor-checklist-checkbox-hover);

    --color-mark-bg:   var(--dolor-mark-bg);
    --color-mark-text: var(--dolor-mark-text);

    --color-search-result-title:       var(--dolor-search-result-title);
    --color-search-result-title-hover: var(--dolor-search-result-title-hover);

    --color-code-bg: var(--dolor-code-bg);

    --color-author-name: var(--dolor-author-name);
    --color-author-role: var(--dolor-author-role);
    --color-author-bio:  var(--dolor-author-bio);
    --color-author-link: var(--dolor-author-link);
    --color-author-brand-ring:   var(--dolor-author-brand-ring);
    --color-author-brand-letter: var(--dolor-author-brand-letter);

    --color-post-cta-link-bg:       var(--dolor-post-cta-link-bg);
    --color-post-cta-link-hover-bg: var(--dolor-post-cta-link-hover-bg);
    --color-post-cta-btn-bg:        var(--dolor-post-cta-btn-bg);
    --color-post-cta-btn-hover-bg:  var(--dolor-post-cta-btn-hover-bg);
    --color-post-cta-btn-text:      var(--dolor-post-cta-btn-text);

    --color-related-section-bg:      var(--dolor-related-section-bg);
    --color-related-section-heading: var(--dolor-related-section-heading);

    --color-footer-link-bg:       var(--dolor-footer-link-bg);
    --color-footer-link-hover-bg: var(--dolor-footer-link-hover-bg);

    --color-footer-cta-arrow:  var(--dolor-footer-cta-arrow);
    --color-footer-brand-link: var(--dolor-footer-brand-link);

    --heading-work-card-color: var(--heading-work-card-dolor);
    --color-work-title:           var(--dolor-work-title);
    --color-work-title-hover:     var(--dolor-work-title-hover);
    --color-work-all-title:       var(--dolor-work-all-title);
    --color-work-all-title-hover: var(--dolor-work-all-title-hover);

    --color-insights-link: var(--dolor-insights-link);
    --color-insights-link-hover: var(--dolor-insights-link-hover);
    --color-insights-arrow: var(--dolor-insights-arrow);
    --color-insights-placeholder: var(--dolor-insights-placeholder);
    --color-insights-title:       var(--dolor-insights-title);
    --color-insights-title-hover: var(--dolor-insights-title-hover);
    --color-insights-content:     var(--dolor-insights-content);

    --color-related-content-bg:           var(--dolor-related-content-bg);
    --color-insights-section-bg:          var(--dolor-insights-section-bg);
    --color-insights-more-link-bg:        var(--dolor-insights-more-link-bg);
    --color-insights-more-link-text:      var(--dolor-insights-more-link-text);
    --color-insights-more-link-hover-bg:  var(--dolor-insights-more-link-hover-bg);
    --color-insights-more-link-border:    var(--dolor-insights-more-link-border);

    --color-post-card-logo-w1: var(--dolor-post-card-logo-w1);
    --color-post-card-logo-w2: var(--dolor-post-card-logo-w2);
    --color-post-card-logo-w3: var(--dolor-post-card-logo-w3);

    --color-hero-split-bg:        var(--dolor-hero-split-bg);
    --color-hero-split-heading-1: var(--dolor-hero-split-heading-1);
    --color-hero-bg-label:        var(--dolor-hero-bg-label);

    --service-link-bg:          var(--dolor-service-link-bg);
    --service-link-text:        var(--dolor-service-link-text);
    --service-link-hover-bg:    var(--dolor-service-link-hover-bg);
    --category-link-bg:         var(--dolor-category-link-bg);
    --category-link-text:       var(--dolor-category-link-text);
    --category-link-hover-bg:   var(--dolor-category-link-hover-bg);
    --all-link-bg:              var(--dolor-all-link-bg);
    --all-link-text:            var(--dolor-all-link-text);
    --all-link-hover-bg:        var(--dolor-all-link-hover-bg);
    --technology-link-bg:       var(--dolor-technology-link-bg);
    --technology-link-text:     var(--dolor-technology-link-text);
    --technology-link-hover-bg: var(--dolor-technology-link-hover-bg);

    --color-onecol-default-bg:        var(--dolor-onecol-default-bg);
    --section-one-column-default-bg: var(--color-onecol-default-bg);
    --section-one-column-style-1-bg: var(--color-8);
    --section-one-column-style-2-bg: var(--color-8);
    --section-one-column-style-3-bg: var(--dolor-bg);

    --color-widget-heading: var(--dolor-widget-heading);
    --color-widget-details: var(--dolor-widget-details);
    --color-widget-artist: var(--dolor-widget-artist);
    --color-widget-empty: var(--dolor-widget-empty);
    --color-widget-placeholder: var(--dolor-widget-placeholder);

    --frame-color-1: var(--frame-dolor-1);
    --frame-color-2: var(--frame-dolor-2);
    --frame-color-3: var(--frame-dolor-3);
    --frame-color-4: var(--frame-dolor-4);

    --form-color-text: var(--form-dolor-text);
    --form-color-border: var(--form-dolor-border);
    --form-color-bg: var(--form-dolor-bg);
    --form-color-active-border: var(--form-dolor-active-border);
    --form-color-active-bg: var(--form-dolor-active-bg);
    --form-color-disabled-bg: var(--form-dolor-disabled-bg);
    --form-color-button-bg: var(--form-dolor-button-bg);
    --form-color-button-text: var(--form-dolor-button-text);
    --form-color-button-hover-text: var(--form-dolor-button-hover-text);
    --form-color-button-hover-bg: var(--form-dolor-button-hover-bg);
    --form-color-button-hover: var(--form-dolor-button-hover);
    --form-color-button-disabled: var(--form-dolor-button-disabled);
    --form-color-checkbox: var(--form-dolor-checkbox);
    --form-color-checkbox-border: var(--form-dolor-checkbox-border);
    --form-color-hover-checkbox: var(--form-dolor-hover-checkbox);
    --form-color-active-checkbox: var(--form-dolor-active-checkbox);
    --form-color-disabled-checkbox: var(--form-dolor-disabled-checkbox);

    --map-marker-color-emoji-background: var(--map-marker-dolor-emoji-background);
    --map-marker-color-emoji-border: var(--map-marker-dolor-emoji-border);
    --map-marker-color-emoji-border-hover: var(--map-marker-dolor-emoji-border-hover);

    --button-color-bg: var(--button-dolor-bg);
    --button-color-text: var(--button-dolor-text);
    --button-color-hover-bg: var(--button-dolor-hover-bg);
    --button-color-hover-text: var(--button-dolor-hover-text);

    --error404-code-color: var(--error404-code-dolor);
    --error404-back-btn-text: var(--error404-back-btn-dolor);
    --error404-back-btn-bg-color: var(--error404-back-btn-bg-dolor);
    --error404-back-btn-hover-bg-color: var(--error404-back-btn-hover-bg-dolor);
    --error404-back-btn-hover-text-color: var(--error404-back-btn-hover-text-dolor);

    --post-nav-prev-bg-color: var(--post-nav-prev-bg-dolor);
    --post-nav-next-bg-color: var(--post-nav-next-bg-dolor);
    --post-nav-prev-hover-bg-color: var(--post-nav-prev-hover-bg-dolor);
    --post-nav-next-hover-bg-color: var(--post-nav-next-hover-bg-dolor);
    --post-nav-label-color: var(--post-nav-label-dolor);
    --post-nav-title-color: var(--post-nav-title-dolor);
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--dolor-bg);
  --color-text: var(--dolor-text);
  --color-text-link: var(--dolor-text-link);
  --color-text-link-bg: var(--dolor-text-link-bg);
  --color-text-link-bg-hover: var(--dolor-text-link-bg-hover);
  --color-text-link-hover: var(--dolor-text-link-hover);

  --brand-color-bg: var(--brand-dolor-bg);
  --brand-color-text: var(--brand-dolor-text);

  --menu-color-bg: var(--menu-dolor-bg);
  --menu-color-text: var(--menu-dolor-text);
  --color-nav-bg:               var(--dolor-nav-bg);
  --color-nav-default-bg:       var(--dolor-nav-default-bg);
  --color-nav-default-logotype: var(--dolor-nav-default-logotype);
  --color-nav-default-text:     var(--dolor-nav-default-text);
  --color-nav-s1-bg:            var(--dolor-nav-s1-bg);
  --color-nav-s1-logotype:      var(--dolor-nav-s1-logotype);
  --color-nav-s1-text:          var(--dolor-nav-s1-text);
  --color-nav-s2-bg:            var(--dolor-nav-s2-bg);
  --color-nav-s2-logotype:      var(--dolor-nav-s2-logotype);
  --color-nav-s2-text:          var(--dolor-nav-s2-text);
  --color-nav-s3-bg:            var(--dolor-nav-s3-bg);
  --color-nav-s3-logotype:      var(--dolor-nav-s3-logotype);
  --color-nav-s3-text:          var(--dolor-nav-s3-text);

  --color-heading: var(--dolor-heading);
  --color-heading-media: var(--dolor-heading-media);
  --color-hero-subtitle: var(--dolor-hero-subtitle);
  --color-home-hero-bg:  var(--dolor-home-hero-bg);

  --color-blockquote-border: var(--dolor-blockquote-border);
  --color-blockquote-bg:     var(--dolor-blockquote-bg);
  --color-blockquote-text:   var(--dolor-blockquote-text);

  --color-code-inline-bg:   var(--dolor-code-inline-bg);
  --color-code-inline-text: var(--dolor-code-inline-text);

  --color-checklist-bg:       var(--dolor-checklist-bg);
  --color-checklist-divider:  var(--dolor-checklist-divider);
  --color-checklist-checkbox:       var(--dolor-checklist-checkbox);
  --color-checklist-checkbox-hover: var(--dolor-checklist-checkbox-hover);

  --color-mark-bg:   var(--dolor-mark-bg);
  --color-mark-text: var(--dolor-mark-text);

  --color-search-result-title:       var(--dolor-search-result-title);
  --color-search-result-title-hover: var(--dolor-search-result-title-hover);

  --color-code-bg: var(--dolor-code-bg);

  --color-author-name: var(--dolor-author-name);
  --color-author-role: var(--dolor-author-role);
  --color-author-bio:  var(--dolor-author-bio);
  --color-author-link: var(--dolor-author-link);
  --color-author-brand-ring:   var(--dolor-author-brand-ring);
  --color-author-brand-letter: var(--dolor-author-brand-letter);

  --color-post-cta-link-bg:       var(--dolor-post-cta-link-bg);
  --color-post-cta-link-hover-bg: var(--dolor-post-cta-link-hover-bg);
  --color-post-cta-btn-bg:        var(--dolor-post-cta-btn-bg);
  --color-post-cta-btn-hover-bg:  var(--dolor-post-cta-btn-hover-bg);
  --color-post-cta-btn-text:      var(--dolor-post-cta-btn-text);

  --color-related-section-bg:      var(--dolor-related-section-bg);
  --color-related-section-heading: var(--dolor-related-section-heading);

  --color-footer-link-bg:       var(--dolor-footer-link-bg);
  --color-footer-link-hover-bg: var(--dolor-footer-link-hover-bg);

  --color-footer-cta-arrow:  var(--dolor-footer-cta-arrow);
  --color-footer-brand-link: var(--dolor-footer-brand-link);

  --heading-work-card-color: var(--heading-work-card-dolor);
  --color-work-title:           var(--dolor-work-title);
  --color-work-title-hover:     var(--dolor-work-title-hover);
  --color-work-all-title:       var(--dolor-work-all-title);
  --color-work-all-title-hover: var(--dolor-work-all-title-hover);

  --color-insights-link: var(--dolor-insights-link);
  --color-insights-link-hover: var(--dolor-insights-link-hover);
  --color-insights-arrow: var(--dolor-insights-arrow);
  --color-insights-placeholder: var(--dolor-insights-placeholder);
  --color-insights-title:       var(--dolor-insights-title);
  --color-insights-title-hover: var(--dolor-insights-title-hover);
  --color-insights-content:     var(--dolor-insights-content);

  --color-related-content-bg:           var(--dolor-related-content-bg);
  --color-insights-section-bg:          var(--dolor-insights-section-bg);
  --color-insights-more-link-bg:        var(--dolor-insights-more-link-bg);
  --color-insights-more-link-text:      var(--dolor-insights-more-link-text);
  --color-insights-more-link-hover-bg:  var(--dolor-insights-more-link-hover-bg);
  --color-insights-more-link-border:    var(--dolor-insights-more-link-border);

  --color-post-card-logo-w1: var(--dolor-post-card-logo-w1);
  --color-post-card-logo-w2: var(--dolor-post-card-logo-w2);
  --color-post-card-logo-w3: var(--dolor-post-card-logo-w3);

  --color-hero-split-bg:        var(--dolor-hero-split-bg);
  --color-hero-split-heading-1: var(--dolor-hero-split-heading-1);
  --color-hero-bg-label:        var(--dolor-hero-bg-label);

  --service-link-bg:          var(--dolor-service-link-bg);
  --service-link-text:        var(--dolor-service-link-text);
  --service-link-hover-bg:    var(--dolor-service-link-hover-bg);
  --category-link-bg:         var(--dolor-category-link-bg);
  --category-link-text:       var(--dolor-category-link-text);
  --category-link-hover-bg:   var(--dolor-category-link-hover-bg);
  --all-link-bg:              var(--dolor-all-link-bg);
  --all-link-text:            var(--dolor-all-link-text);
  --all-link-hover-bg:        var(--dolor-all-link-hover-bg);
  --technology-link-bg:       var(--dolor-technology-link-bg);
  --technology-link-text:     var(--dolor-technology-link-text);
  --technology-link-hover-bg: var(--dolor-technology-link-hover-bg);

  --color-onecol-default-bg:        var(--dolor-onecol-default-bg);
  --section-one-column-default-bg: var(--color-onecol-default-bg);
  --section-one-column-style-1-bg: var(--color-1);
  --section-one-column-style-2-bg: var(--color-8);
  --section-one-column-style-3-bg: var(--dolor-bg);

  --color-widget-heading: var(--dolor-widget-heading);
  --color-widget-details: var(--dolor-widget-details);
  --color-widget-artist: var(--dolor-widget-artist);
  --color-widget-empty: var(--dolor-widget-empty);
  --color-widget-placeholder: var(--dolor-widget-placeholder);

  --frame-color-1: var(--frame-dolor-1);
  --frame-color-2: var(--frame-dolor-2);
  --frame-color-3: var(--frame-dolor-3);
  --frame-color-4: var(--frame-dolor-4);

  --form-color-text: var(--form-dolor-text);
  --form-color-border: var(--form-dolor-border);
  --form-color-bg: var(--form-dolor-bg);
  --form-color-active-border: var(--form-dolor-active-border);
  --form-color-active-bg: var(--form-dolor-active-bg);
  --form-color-disabled-bg: var(--form-dolor-disabled-bg);
  --form-color-button-bg: var(--form-dolor-button-bg);
  --form-color-button-text: var(--form-dolor-button-text);
  --form-color-button-hover-text: var(--form-dolor-button-hover-text);
  --form-color-button-hover-bg: var(--form-dolor-button-hover-bg);
  --form-color-button-hover: var(--form-dolor-button-hover);
  --form-color-button-disabled: var(--form-dolor-button-disabled);
  --form-color-checkbox: var(--form-dolor-checkbox);
  --form-color-checkbox-border: var(--form-dolor-checkbox-border);
  --form-color-hover-checkbox: var(--form-dolor-hover-checkbox);
  --form-color-active-checkbox: var(--form-dolor-active-checkbox);
  --form-color-disabled-checkbox: var(--form-dolor-disabled-checkbox);

  --button-color-bg: var(--button-dolor-bg);
  --button-color-text: var(--button-dolor-text);
  --button-color-hover-bg: var(--button-dolor-hover-bg);
  --button-color-hover-text: var(--button-dolor-hover-text);

  --error404-code-color: var(--error404-code-dolor);
  --error404-back-btn-text: var(--error404-back-btn-dolor);
  --error404-back-btn-bg-color: var(--error404-back-btn-bg-dolor);
  --error404-back-btn-hover-bg-color: var(--error404-back-btn-hover-bg-dolor);
  --error404-back-btn-hover-text-color: var(--error404-back-btn-hover-text-dolor);

  --post-nav-prev-bg-color: var(--post-nav-prev-bg-dolor);
  --post-nav-next-bg-color: var(--post-nav-next-bg-dolor);
  --post-nav-prev-hover-bg-color: var(--post-nav-prev-hover-bg-dolor);
  --post-nav-next-hover-bg-color: var(--post-nav-next-hover-bg-dolor);
  --post-nav-label-color: var(--post-nav-label-dolor);
  --post-nav-title-color: var(--post-nav-title-dolor);
}

.heading {
  color: var(--color-heading);
}

.heading.style-1 {
  font-size: var(--heading-style-1-font-size);
  font-family: var(--heading-style-1-font-family);
  font-weight: var(--heading-style-1-font-weight);
  line-height: var(--heading-style-1-line-height);
  text-transform: var(--heading-style-1-text-transform);
  margin: var(--heading-style-1-margin);
}
.heading.style-2 {
  font-size: var(--heading-style-2-font-size);
  font-family: var(--heading-style-2-font-family);
  font-weight: var(--heading-style-2-font-weight);
  line-height: var(--heading-style-2-line-height);
  text-transform: var(--heading-style-2-text-transform);
  margin: var(--heading-style-2-margin);
}
.heading.style-3 {
  font-size: var(--heading-style-3-font-size);
  font-family: var(--heading-style-3-font-family);
  font-weight: var(--heading-style-3-font-weight);
  line-height: var(--heading-style-3-line-height);
  margin: var(--heading-style-3-margin);
}
.heading.style-4 {
  font-size: var(--heading-style-4-font-size);
  font-family: var(--heading-style-4-font-family);
  font-weight: var(--heading-style-4-font-weight);
  line-height: var(--heading-style-4-line-height);
  margin: var(--heading-style-4-margin);
}
.heading.style-hidden {
  display: none;
}
.content.style-large {
  font-family: var(--content-style-large-font-family);
  font-size: var(--content-style-large-font-size);
  font-weight: var(--content-style-large-font-weight);
  line-height: var(--content-style-large-line-height);
}
.content.style-large p {
  margin-bottom: var(--content-style-large-margin);
}
.content.style-medium {
  font-family: var(--content-style-medium-font-family);
  font-size: var(--content-style-medium-font-size);
  font-weight: var(--content-style-medium-font-weight);
  line-height: var(--content-style-medium-line-height);
}
.content.style-medium p {
  margin-bottom: var(--content-style-medium-margin);
}


/* WORKING OUT SPACING */
.content p:last-child {
  margin-bottom: 0;
}
.heading-layout:first-of-type .heading {
  margin-top: 0;
}
.heading-layout:has(+ .insights-layout) h1 {
  color: var(--color-4);
}






/* .section-default {
  background-color: var(--color-10);
}
.section-style-1 {
  background-color: var(--color-4);
} */

/* @media (prefers-color-scheme: dark) {
  .section-default { background-color: var(--color-bg); }
  .section-style-1 { background-color: #14494c; }
}
:root[data-theme="dark"] .section-default { background-color: var(--color-bg); }
:root[data-theme="dark"] .section-style-1 { background-color: #14494c; } */


/* ================================================
   Content blockquote
   ================================================ */
.content-default blockquote,
.content-default .wp-block-pullquote {
  background-color: var(--color-blockquote-bg);
  color: var(--color-blockquote-text);
}

.content-default blockquote p,
.content-default .wp-block-pullquote blockquote p {
  border-left-color: var(--color-blockquote-border);
}

/* ================================================
   Work card title overlay — shared between
   WorksFeaturedExtendedLayout (.works-extended-grid)
   and service pages (.extended-work-grid)
   ================================================ */

.works-extended-grid .grid-item .work-link,
.extended-work-grid .grid-item .work-link {
  height: 100%;
  position: relative;
}

.works-extended-grid .grid-item .work-title,
.extended-work-grid .grid-item .work-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: var(--color-work-title);
  margin: 0;
  padding: 0.2rem 0.4rem;
  transition: background-color 0.2s ease;
}

.works-extended-grid .grid-item .work-link:hover .work-title,
.extended-work-grid .grid-item .work-link:hover .work-title {
  background-color: var(--color-work-title-hover);
}

.works-extended-grid .grid-item .all-work-card .work-title,
.extended-work-grid .grid-item .all-work-card .work-title {
  background-color: var(--color-work-all-title);
}

.works-extended-grid .grid-item .all-work-card .work-link:hover .work-title,
.extended-work-grid .grid-item .all-work-card .work-link:hover .work-title {
  background-color: var(--color-work-all-title-hover);
}

.works-extended-grid .grid-item .all-work-card .logo,
.extended-work-grid .grid-item .all-work-card .logo {
  bottom: 16%;
}

/* ================================================
   Per-section-style colour overrides
   Each section defines a palette: --color-styleN-* (light) and --dolor-styleN-* (dark).
   The dark mode swap blocks below reference only dolor variables —
   edit a colour once here and both dark mode blocks update automatically.
   ================================================ */

.section-one-column--default {
  background-color: var(--section-one-column-default-bg);
}

.section-one-column--style-1 {
  /* Palette */
  --color-style1-heading:              #fff;
  --dolor-style1-heading:              var(--color-5);

  --color-style1-service-link:         var(--color-8);
  --dolor-style1-service-link:         var(--color-5);

  --color-style1-service-link-hover:   var(--color-5);
  --dolor-style1-service-link-hover:   #e02e7a;

  --color-style1-insights-title:       var(--color-8);
  --dolor-style1-insights-title:       var(--color-5);
  --color-style1-insights-title-hover: var(--color-5);
  --dolor-style1-insights-title-hover: var(--color-6);

  --color-style1-insights-content:     #fff;
  --dolor-style1-insights-content:     var(--dolor-text);

  --color-style1-work-title:           var(--color-8);
  --dolor-style1-work-title:           var(--color-5);
  --color-style1-work-title-hover:     var(--color-11);
  --dolor-style1-work-title-hover:     var(--color-11);

  --color-style1-work-all-title:       var(--color-7);
  --dolor-style1-work-all-title:       var(--color-7);
  --color-style1-work-all-title-hover: var(--color-9);
  --dolor-style1-work-all-title-hover: var(--color-9);

  --color-style1-insights-link:        var(--color-8);
  --dolor-style1-insights-link:        var(--color-5);

  --color-style1-insights-link-hover:  var(--color-5);
  --dolor-style1-insights-link-hover:  var(--color-6);

  --color-style1-insights-arrow:       var(--color-4);
  --dolor-style1-insights-arrow:       var(--color-1);

  --color-style1-insights-placeholder: var(--color-8);
  --dolor-style1-insights-placeholder: var(--color-5);

  --color-style1-category-link-bg:       rgba(255,255,255,0.15);
  --dolor-style1-category-link-bg:       rgba(255,255,255,0.12);
  --color-style1-category-link-text:     #fff;
  --dolor-style1-category-link-text:     var(--dolor-text);
  --color-style1-category-link-hover-bg: rgba(255,255,255,0.25);
  --dolor-style1-category-link-hover-bg: rgba(255,255,255,0.2);

  --color-style1-all-link-bg:            var(--color-6);
  --dolor-style1-all-link-bg:            var(--color-6);
  --color-style1-all-link-text:          var(--color-1);
  --dolor-style1-all-link-text:          var(--color-1);
  --color-style1-all-link-hover-bg:      #dcd930;
  --dolor-style1-all-link-hover-bg:      #dcd930;

  /* Apply */
  background-color:              var(--section-one-column-style-1-bg);
  --heading-color:               var(--color-style1-heading);
  --service-link-bg:             var(--color-style1-service-link);
  --service-link-hover-bg:       var(--color-style1-service-link-hover);
  --category-link-bg:            var(--color-style1-category-link-bg);
  --category-link-text:          var(--color-style1-category-link-text);
  --category-link-hover-bg:      var(--color-style1-category-link-hover-bg);
  --all-link-bg:                 var(--color-style1-all-link-bg);
  --all-link-text:               var(--color-style1-all-link-text);
  --all-link-hover-bg:           var(--color-style1-all-link-hover-bg);
  --color-insights-title:              var(--color-style1-insights-title);
  --color-insights-title-hover:        var(--color-style1-insights-title-hover);
  --color-insights-content:            var(--color-style1-insights-content);
  --color-work-title:           var(--color-style1-work-title);
  --color-work-title-hover:     var(--color-style1-work-title-hover);
  --color-work-all-title:       var(--color-style1-work-all-title);
  --color-work-all-title-hover: var(--color-style1-work-all-title-hover);
  --color-insights-link:               var(--color-style1-insights-link);
  --color-insights-link-hover:         var(--color-style1-insights-link-hover);
  --color-insights-arrow:              var(--color-style1-insights-arrow);
  --color-insights-placeholder:        var(--color-style1-insights-placeholder);
  --color-insights-more-link-bg:       var(--color-style1-insights-link);
  --color-insights-more-link-hover-bg: var(--color-style1-insights-link-hover);
  --color-insights-more-link-border:   var(--color-style1-insights-arrow);
}

.section-one-column--style-2 {
  /* Palette */
  --color-style2-heading:              #fff;
  --dolor-style2-heading:              #fff;

  --color-style2-insights-title:       var(--heading-post-card-color);
  --dolor-style2-insights-title:       var(--color-3);
  --color-style2-insights-title-hover: var(--color-4);
  --dolor-style2-insights-title-hover: #14494c;

  --color-style2-insights-content:     var(--color-text);
  --dolor-style2-insights-content:     var(--dolor-text);

  --color-style2-work-title:           var(--color-4);
  --dolor-style2-work-title:           var(--color-4);
  --color-style2-work-title-hover:     var(--color-1);
  --dolor-style2-work-title-hover:     #14494c;

  --color-style2-work-all-title:       var(--color-1);
  --dolor-style2-work-all-title:       var(--color-1);
  --color-style2-work-all-title-hover: var(--color-4);
  --dolor-style2-work-all-title-hover: #14494c;

  --color-style2-insights-link:        var(--color-4);
  --dolor-style2-insights-link:        var(--color-4);

  --color-style2-insights-link-hover:  var(--color-1);
  --dolor-style2-insights-link-hover:  var(--color-1);

  --color-style2-insights-arrow:       var(--color-1);
  --dolor-style2-insights-arrow:       var(--color-1);

  --color-style2-insights-placeholder: var(--color-4);
  --dolor-style2-insights-placeholder: var(--color-4);

  /* Apply */
  background-color:              var(--section-one-column-style-2-bg);
  color:                         #fff;
  --heading-color:               var(--color-style2-heading);
  --color-insights-title:              var(--color-style2-insights-title);
  --color-insights-title-hover:        var(--color-style2-insights-title-hover);
  --color-insights-content:            var(--color-style2-insights-content);
  --color-work-title:           var(--color-style2-work-title);
  --color-work-title-hover:     var(--color-style2-work-title-hover);
  --color-work-all-title:       var(--color-style2-work-all-title);
  --color-work-all-title-hover: var(--color-style2-work-all-title-hover);
  --color-insights-link:               var(--color-style2-insights-link);
  --color-insights-link-hover:         var(--color-style2-insights-link-hover);
  --color-insights-arrow:              var(--color-style2-insights-arrow);
  --color-insights-placeholder:        var(--color-style2-insights-placeholder);
  --color-insights-more-link-bg:       var(--color-style2-insights-link);
  --color-insights-more-link-hover-bg: var(--color-style2-insights-link-hover);
  --color-insights-more-link-border:   var(--color-style2-insights-arrow);
}

.section-one-column--style-3 {
  /* Palette */
  --color-style3-heading:  var(--color-5);
  --dolor-style3-heading:  var(--color-5);

  /* Apply */
  background-color:  var(--section-one-column-style-3-bg);
  --heading-color:   var(--color-style3-heading);
}

/* Dark mode — swap only. To change a dark colour edit the --dolor-styleN-* above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-one-column--style-1 {
    --heading-color:               var(--dolor-style1-heading);
    --service-link-bg:             var(--dolor-style1-service-link);
    --service-link-hover-bg:       var(--dolor-style1-service-link-hover);
    --category-link-bg:            var(--dolor-style1-category-link-bg);
    --category-link-text:          var(--dolor-style1-category-link-text);
    --category-link-hover-bg:      var(--dolor-style1-category-link-hover-bg);
    --all-link-bg:                 var(--dolor-style1-all-link-bg);
    --all-link-text:               var(--dolor-style1-all-link-text);
    --all-link-hover-bg:           var(--dolor-style1-all-link-hover-bg);
    --color-insights-title:              var(--dolor-style1-insights-title);
    --color-insights-title-hover:        var(--dolor-style1-insights-title-hover);
    --color-insights-content:            var(--dolor-style1-insights-content);
    --color-work-title:           var(--dolor-style1-work-title);
    --color-work-title-hover:     var(--dolor-style1-work-title-hover);
    --color-work-all-title:       var(--dolor-style1-work-all-title);
    --color-work-all-title-hover: var(--dolor-style1-work-all-title-hover);
    --color-insights-link:               var(--dolor-style1-insights-link);
    --color-insights-link-hover:         var(--dolor-style1-insights-link-hover);
    --color-insights-arrow:              var(--dolor-style1-insights-arrow);
    --color-insights-placeholder:        var(--dolor-style1-insights-placeholder);
    --color-insights-more-link-bg:       var(--dolor-style1-insights-link);
    --color-insights-more-link-hover-bg: var(--dolor-style1-insights-link-hover);
    --color-insights-more-link-border:   var(--dolor-style1-insights-arrow);
  }
  :root:not([data-theme="light"]) .section-one-column--style-2 {
    --heading-color:               var(--dolor-style2-heading);
    --color-insights-title:              var(--dolor-style2-insights-title);
    --color-insights-title-hover:        var(--dolor-style2-insights-title-hover);
    --color-insights-content:            var(--dolor-style2-insights-content);
    --color-work-title:           var(--dolor-style2-work-title);
    --color-work-title-hover:     var(--dolor-style2-work-title-hover);
    --color-work-all-title:       var(--dolor-style2-work-all-title);
    --color-work-all-title-hover: var(--dolor-style2-work-all-title-hover);
    --color-insights-link:               var(--dolor-style2-insights-link);
    --color-insights-link-hover:         var(--dolor-style2-insights-link-hover);
    --color-insights-arrow:              var(--dolor-style2-insights-arrow);
    --color-insights-placeholder:        var(--dolor-style2-insights-placeholder);
    --color-insights-more-link-bg:       var(--dolor-style2-insights-link);
    --color-insights-more-link-hover-bg: var(--dolor-style2-insights-link-hover);
    --color-insights-more-link-border:   var(--dolor-style2-insights-arrow);
  }
  :root:not([data-theme="light"]) .section-one-column--style-3 {
    --heading-color: var(--dolor-style3-heading);
  }
}
:root[data-theme="dark"] .section-one-column--style-1 {
  --heading-color:               var(--dolor-style1-heading);
  --service-link-bg:             var(--dolor-style1-service-link);
  --service-link-hover-bg:       var(--dolor-style1-service-link-hover);
  --category-link-bg:            var(--dolor-style1-category-link-bg);
  --category-link-text:          var(--dolor-style1-category-link-text);
  --category-link-hover-bg:      var(--dolor-style1-category-link-hover-bg);
  --all-link-bg:                 var(--dolor-style1-all-link-bg);
  --all-link-text:               var(--dolor-style1-all-link-text);
  --all-link-hover-bg:           var(--dolor-style1-all-link-hover-bg);
  --color-insights-title:              var(--dolor-style1-insights-title);
  --color-insights-title-hover:        var(--dolor-style1-insights-title-hover);
  --color-insights-content:            var(--dolor-style1-insights-content);
  --color-work-title:           var(--dolor-style1-work-title);
  --color-work-title-hover:     var(--dolor-style1-work-title-hover);
  --color-work-all-title:       var(--dolor-style1-work-all-title);
  --color-work-all-title-hover: var(--dolor-style1-work-all-title-hover);
  --color-insights-link:               var(--dolor-style1-insights-link);
  --color-insights-link-hover:         var(--dolor-style1-insights-link-hover);
  --color-insights-arrow:              var(--dolor-style1-insights-arrow);
  --color-insights-placeholder:        var(--dolor-style1-insights-placeholder);
  --color-insights-more-link-bg:       var(--dolor-style1-insights-link);
  --color-insights-more-link-hover-bg: var(--dolor-style1-insights-link-hover);
  --color-insights-more-link-border:   var(--dolor-style1-insights-arrow);
}
:root[data-theme="dark"] .section-one-column--style-2 {
  --heading-color:               var(--dolor-style2-heading);
  --color-insights-title:              var(--dolor-style2-insights-title);
  --color-insights-title-hover:        var(--dolor-style2-insights-title-hover);
  --color-insights-content:            var(--dolor-style2-insights-content);
  --color-work-title:           var(--dolor-style2-work-title);
  --color-work-title-hover:     var(--dolor-style2-work-title-hover);
  --color-work-all-title:       var(--dolor-style2-work-all-title);
  --color-work-all-title-hover: var(--dolor-style2-work-all-title-hover);
  --color-insights-link:               var(--dolor-style2-insights-link);
  --color-insights-link-hover:         var(--dolor-style2-insights-link-hover);
  --color-insights-arrow:              var(--dolor-style2-insights-arrow);
  --color-insights-placeholder:        var(--dolor-style2-insights-placeholder);
  --color-insights-more-link-bg:       var(--dolor-style2-insights-link);
  --color-insights-more-link-hover-bg: var(--dolor-style2-insights-link-hover);
  --color-insights-more-link-border:   var(--dolor-style2-insights-arrow);
}
:root[data-theme="dark"] .section-one-column--style-3 {
  --heading-color: var(--dolor-style3-heading);
}


/* ================================================
   Two-column section colour overrides
   Each section defines a palette: --color-twocol-sN-* (light) and --dolor-twocol-sN-* (dark).
   Edit a dolor value here and both dark mode blocks update automatically.
   ================================================ */

.section-two-column--default {
  /* Palette */
  --color-twocol-default-bg:            #fff;
  --dolor-twocol-default-bg:            var(--dolor-bg);
  --color-twocol-default-heading:       var(--color-text);
  --dolor-twocol-default-heading:       var(--dolor-text);
  --color-twocol-default-btn-bg:        var(--color-5);
  --dolor-twocol-default-btn-bg:        var(--color-5);
  --color-twocol-default-btn-bg-active: var(--color-11);
  --dolor-twocol-default-btn-bg-active: var(--color-11);
  --color-twocol-default-overlay:       color-mix(in srgb, var(--color-heading) 15%, transparent);
  --dolor-twocol-default-overlay:       color-mix(in srgb, var(--color-heading) 50%, transparent);

  /* Apply */
  background-color:         var(--color-twocol-default-bg);
  --heading-color:          var(--color-twocol-default-heading);
  --button-bg-color:        var(--color-twocol-default-btn-bg);
  --button-bg-color-active: var(--color-twocol-default-btn-bg-active);
}

.section-two-column--style-1 {
  /* Palette */
  --color-twocol-s1-bg:          var(--color-4);
  --dolor-twocol-s1-bg:          var(--color-1);
  --color-twocol-s1-text:        #fff;
  --dolor-twocol-s1-text:        #fff;
  --color-twocol-s1-btn-bg:      var(--color-5);
  --dolor-twocol-s1-btn-bg:      var(--color-5);
  --color-twocol-s1-btn-bg-active: var(--color-11);
  --dolor-twocol-s1-btn-bg-active: var(--color-11);
  --color-twocol-s1-overlay:     color-mix(in srgb, var(--color-heading) 15%, transparent);
  --dolor-twocol-s1-overlay:     color-mix(in srgb, var(--color-heading) 50%, transparent);

  /* Apply */
  background-color:         var(--color-twocol-s1-bg);
  color:                    var(--color-twocol-s1-text);
  --button-bg-color:        var(--color-twocol-s1-btn-bg);
  --button-bg-color-active: var(--color-twocol-s1-btn-bg-active);
}

.section-two-column--style-2 {
  /* Palette */
  --color-twocol-s2-bg:             var(--color-8);
  --dolor-twocol-s2-bg:             #431015;
  --color-twocol-s2-text:           #fff;
  --dolor-twocol-s2-text:           #fff;
  --color-twocol-s2-heading:        #fff;
  --dolor-twocol-s2-heading:        #fff;
  --color-twocol-s2-btn:            var(--color-3);
  --dolor-twocol-s2-btn:            var(--color-3);
  --color-twocol-s2-btn-bg:         var(--color-1);
  --dolor-twocol-s2-btn-bg:         var(--color-5);
  --color-twocol-s2-btn-bg-active:  var(--color-2);
  --dolor-twocol-s2-btn-bg-active:  var(--color-11);
  --color-twocol-s2-overlay:        color-mix(in srgb, var(--color-heading) 25%, transparent);
  --dolor-twocol-s2-overlay:        color-mix(in srgb, var(--color-heading) 50%, transparent);

  /* Apply */
  background-color:         var(--color-twocol-s2-bg);
  color:                    var(--color-twocol-s2-text);
  --heading-color:          var(--color-twocol-s2-heading);
  --button-color:           var(--color-twocol-s2-btn);
  --button-bg-color:        var(--color-twocol-s2-btn-bg);
  --button-bg-color-active: var(--color-twocol-s2-btn-bg-active);
}

.section-two-column--style-3 {
  /* Palette */
  --color-twocol-s3-bg:          var(--color-10);
  --dolor-twocol-s3-bg:          var(--dolor-bg);
  --color-twocol-s3-heading:     var(--color-5);
  --dolor-twocol-s3-heading:     var(--color-5);
  --color-twocol-s3-btn-bg:        var(--color-5);
  --dolor-twocol-s3-btn-bg:        var(--color-5);
  --color-twocol-s3-btn-bg-active: var(--color-11);
  --dolor-twocol-s3-btn-bg-active: var(--color-11);
  --color-twocol-s3-overlay:       color-mix(in srgb, var(--color-heading) 35%, transparent);
  --dolor-twocol-s3-overlay:       color-mix(in srgb, var(--color-5) 50%, transparent);

  /* Apply */
  background-color:         var(--color-twocol-s3-bg);
  --heading-color:          var(--color-twocol-s3-heading);
  --button-bg-color:        var(--color-twocol-s3-btn-bg);
  --button-bg-color-active: var(--color-twocol-s3-btn-bg-active);
}

/* Dark mode — swap only. To change a dark colour edit the --dolor-twocol-sN-* above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-two-column--default {
    --color-twocol-default-bg:            var(--dolor-twocol-default-bg);
    --color-twocol-default-heading:       var(--dolor-twocol-default-heading);
    --color-twocol-default-btn-bg:        var(--dolor-twocol-default-btn-bg);
    --color-twocol-default-btn-bg-active: var(--dolor-twocol-default-btn-bg-active);
    --color-twocol-default-overlay:       var(--dolor-twocol-default-overlay);
  }
  :root:not([data-theme="light"]) .section-two-column--style-1 {
    --color-twocol-s1-bg:            var(--dolor-twocol-s1-bg);
    --color-twocol-s1-text:          var(--dolor-twocol-s1-text);
    --color-twocol-s1-btn-bg:        var(--dolor-twocol-s1-btn-bg);
    --color-twocol-s1-btn-bg-active: var(--dolor-twocol-s1-btn-bg-active);
    --color-twocol-s1-overlay:       var(--dolor-twocol-s1-overlay);
  }
  :root:not([data-theme="light"]) .section-two-column--style-2 {
    --color-twocol-s2-bg:            var(--dolor-twocol-s2-bg);
    --color-twocol-s2-text:          var(--dolor-twocol-s2-text);
    --color-twocol-s2-heading:       var(--dolor-twocol-s2-heading);
    --color-twocol-s2-btn:           var(--dolor-twocol-s2-btn);
    --color-twocol-s2-btn-bg:        var(--dolor-twocol-s2-btn-bg);
    --color-twocol-s2-btn-bg-active: var(--dolor-twocol-s2-btn-bg-active);
    --color-twocol-s2-overlay:       var(--dolor-twocol-s2-overlay);
  }
  :root:not([data-theme="light"]) .section-two-column--style-3 {
    --color-twocol-s3-bg:            var(--dolor-twocol-s3-bg);
    --color-twocol-s3-heading:       var(--dolor-twocol-s3-heading);
    --color-twocol-s3-btn-bg:        var(--dolor-twocol-s3-btn-bg);
    --color-twocol-s3-btn-bg-active: var(--dolor-twocol-s3-btn-bg-active);
    --color-twocol-s3-overlay:       var(--dolor-twocol-s3-overlay);
  }
}
:root[data-theme="dark"] .section-two-column--default {
  --color-twocol-default-bg:            var(--dolor-twocol-default-bg);
  --color-twocol-default-heading:       var(--dolor-twocol-default-heading);
  --color-twocol-default-btn-bg:        var(--dolor-twocol-default-btn-bg);
  --color-twocol-default-btn-bg-active: var(--dolor-twocol-default-btn-bg-active);
  --color-twocol-default-overlay:       var(--dolor-twocol-default-overlay);
}
:root[data-theme="dark"] .section-two-column--style-1 {
  --color-twocol-s1-bg:            var(--dolor-twocol-s1-bg);
  --color-twocol-s1-text:          var(--dolor-twocol-s1-text);
  --color-twocol-s1-btn-bg:        var(--dolor-twocol-s1-btn-bg);
  --color-twocol-s1-btn-bg-active: var(--dolor-twocol-s1-btn-bg-active);
  --color-twocol-s1-overlay:       var(--dolor-twocol-s1-overlay);
}
:root[data-theme="dark"] .section-two-column--style-2 {
  --color-twocol-s2-bg:            var(--dolor-twocol-s2-bg);
  --color-twocol-s2-text:          var(--dolor-twocol-s2-text);
  --color-twocol-s2-heading:       var(--dolor-twocol-s2-heading);
  --color-twocol-s2-btn:           var(--dolor-twocol-s2-btn);
  --color-twocol-s2-btn-bg:        var(--dolor-twocol-s2-btn-bg);
  --color-twocol-s2-btn-bg-active: var(--dolor-twocol-s2-btn-bg-active);
  --color-twocol-s2-overlay:       var(--dolor-twocol-s2-overlay);
}
:root[data-theme="dark"] .section-two-column--style-3 {
  --color-twocol-s3-bg:            var(--dolor-twocol-s3-bg);
  --color-twocol-s3-heading:       var(--dolor-twocol-s3-heading);
  --color-twocol-s3-btn-bg:        var(--dolor-twocol-s3-btn-bg);
  --color-twocol-s3-btn-bg-active: var(--dolor-twocol-s3-btn-bg-active);
  --color-twocol-s3-overlay:       var(--dolor-twocol-s3-overlay);
}