/* ==========================================================================
   Clarke Website Design - skin-cwd5.3 theme
   Plain CSS layered on Bootstrap 5.3.9 (CDN) - no build step, no SCSS.

   Palette (CWD New Colours)
     Ink / Primary  #1F1D2B   headings, top bar, footer, dark buttons
     Accent         #FF9600   calls to action, highlights, icons
     Secondary      #FFA94D   hover states, gradients, dark-mode links
     Surface        #FFE4C7   tinted panels, icon chips, soft buttons
     Background     #FFF8EF   page background

   Light / dark: <html data-theme="light|dark" data-bs-theme="light|dark">
   is set by the inline script in template.htm and by the navbar switch.
   Bootstrap 5.3 handles its own components per colour mode; the tokens
   below re-skin them, so most rules are written once for both modes.

   Contents
     1. Tokens
     2. Bootstrap variable overrides
     3. Base / typography
     4. Bootstrap components
     5. Site chrome (top bar, navbar, mega menu, footer, copyright)
     6. Page components
     7. Plugins pages
     8. Theme switch
     9. Responsive
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    /* Brand */
    --cwd-ink:          #1F1D2B;
    --cwd-ink-2:        #2E2B40;
    --cwd-accent:       #FF9600;
    --cwd-accent-soft:  #FFA94D;
    --cwd-surface:      #FFE4C7;
    --cwd-cream:        #FFF8EF;

    /* Shape and depth */
    --cwd-radius-sm:    .5rem;
    --cwd-radius:       .875rem;
    --cwd-radius-lg:    1.25rem;
    --cwd-ease:         cubic-bezier(.2, .7, .2, 1);

    --cwd-font:         "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --cwd-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Light (default) */
:root,
[data-bs-theme="light"] {
    --cwd-bg:         var(--cwd-cream);
    --cwd-card:       #FFFFFF;
    --cwd-tint:       #FFF0DD; /* .bg-light sections - between background and surface */
    --cwd-chip:       var(--cwd-surface); /* icon circles, soft buttons */
    --cwd-border:     #EEDFCC;
    --cwd-text:       #3B3848;
    --cwd-muted:      #6D6879;
    --cwd-heading:    var(--cwd-ink);
    --cwd-link:       #A35400; /* accent darkened to pass 4.5:1 on the cream background */
    --cwd-link-hover: var(--cwd-ink);
    --cwd-on-chip:    #B35C00;
    --cwd-nav:        var(--cwd-ink);
    --cwd-glass:      rgb(255 248 239 / .82);
    --cwd-shadow-sm:  0 1px 2px rgb(31 29 43 / .06), 0 2px 6px rgb(31 29 43 / .05);
    --cwd-shadow:     0 2px 4px rgb(31 29 43 / .04), 0 12px 32px -12px rgb(31 29 43 / .22);
    --cwd-shadow-lg:  0 4px 8px rgb(31 29 43 / .05), 0 24px 48px -16px rgb(31 29 43 / .3);
    --cwd-footer:     var(--cwd-ink);
    --cwd-copyright:  #17151F;
}

/* Dark */
[data-bs-theme="dark"] {
    --cwd-bg:         #13121A;
    --cwd-card:       var(--cwd-ink); /* the brand ink doubles as the dark card colour */
    --cwd-tint:       #1A1924;
    --cwd-chip:       rgb(255 150 0 / .14);
    --cwd-border:     #34314A;
    --cwd-text:       #DCD8E4;
    --cwd-muted:      #A39EB2;
    --cwd-heading:    var(--cwd-cream);
    --cwd-link:       var(--cwd-accent-soft);
    --cwd-link-hover: var(--cwd-surface);
    --cwd-on-chip:    var(--cwd-accent-soft);
    --cwd-nav:        #E9E5EF;
    --cwd-glass:      rgb(19 18 26 / .82);
    --cwd-shadow-sm:  0 1px 2px rgb(0 0 0 / .3);
    --cwd-shadow:     0 2px 4px rgb(0 0 0 / .25), 0 12px 32px -12px rgb(0 0 0 / .6);
    --cwd-shadow-lg:  0 4px 8px rgb(0 0 0 / .3), 0 24px 48px -16px rgb(0 0 0 / .7);
    --cwd-footer:     #0E0D14;
    --cwd-copyright:  #09080D;
}


/* 2. Bootstrap variable overrides
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif:          var(--cwd-font);
    --bs-body-font-family:         var(--cwd-font);

    --bs-primary:                  #FF9600;
    --bs-primary-rgb:              255, 150, 0;
    --bs-primary-text-emphasis:    #A35400;
    --bs-primary-bg-subtle:        #FFF0DD;
    --bs-primary-border-subtle:    #FFD3A1;

    --bs-secondary:                #1F1D2B;
    --bs-secondary-rgb:            31, 29, 43;
    --bs-secondary-text-emphasis:  #1F1D2B;
    --bs-secondary-bg-subtle:      #ECEAF1;
    --bs-secondary-border-subtle:  #D3D0DD;

    --bs-dark:                     #1F1D2B;
    --bs-dark-rgb:                 31, 29, 43;
    --bs-light:                    #FFF0DD;
    --bs-light-rgb:                255, 240, 221;

    --bs-body-color:               #3B3848;
    --bs-body-color-rgb:           59, 56, 72;
    --bs-body-bg:                  #FFF8EF;
    --bs-body-bg-rgb:              255, 248, 239;
    --bs-emphasis-color:           #1F1D2B;
    --bs-emphasis-color-rgb:       31, 29, 43;
    --bs-heading-color:            #1F1D2B;
    --bs-secondary-color:          #6D6879; /* .text-muted, .text-body-secondary */
    --bs-secondary-bg:             #FFE4C7;
    --bs-tertiary-bg:              #FFF0DD;

    --bs-link-color:               #A35400;
    --bs-link-color-rgb:           163, 84, 0;
    --bs-link-hover-color:         #1F1D2B;
    --bs-link-hover-color-rgb:     31, 29, 43;

    --bs-border-color:             #EEDFCC;
    --bs-border-color-translucent: rgb(31 29 43 / .1);
    --bs-border-radius:            .625rem;
    --bs-border-radius-sm:         .5rem;
    --bs-border-radius-lg:         .875rem;

    --bs-focus-ring-color:         rgb(255 150 0 / .35);
    --bs-highlight-bg:             #FFE4C7;
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis:    #FFC27F;
    --bs-primary-bg-subtle:        #33230F;
    --bs-primary-border-subtle:    #6B4410;

    --bs-secondary:                #3A3650;
    --bs-secondary-rgb:            58, 54, 80;
    --bs-secondary-text-emphasis:  #DCD8E4;
    --bs-secondary-bg-subtle:      #24222F;
    --bs-secondary-border-subtle:  #3A3650;

    --bs-light:                    #1A1924;
    --bs-light-rgb:                26, 25, 36;

    --bs-body-color:               #DCD8E4;
    --bs-body-color-rgb:           220, 216, 228;
    --bs-body-bg:                  #13121A;
    --bs-body-bg-rgb:              19, 18, 26;
    --bs-emphasis-color:           #FFF8EF;
    --bs-emphasis-color-rgb:       255, 248, 239;
    --bs-heading-color:            #FFF8EF;
    --bs-secondary-color:          #A39EB2;
    --bs-secondary-bg:             #292738;
    --bs-tertiary-bg:              #1A1924;

    --bs-link-color:               #FFA94D;
    --bs-link-color-rgb:           255, 169, 77;
    --bs-link-hover-color:         #FFE4C7;
    --bs-link-hover-color-rgb:     255, 228, 199;

    --bs-border-color:             #34314A;
    --bs-border-color-translucent: rgb(255 255 255 / .1);
    --bs-highlight-bg:             #4A300C;
}


/* 3. Base / typography
   ========================================================================== */

html {
    scroll-padding-top: 6rem;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering:         optimizeLegibility;
}

::selection {
    background: var(--cwd-accent);
    color:      var(--cwd-ink);
}

:focus-visible {
    outline:        3px solid var(--cwd-accent);
    outline-offset: 2px;
}

input,
select,
textarea,
progress {
    accent-color: var(--cwd-accent);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:    var(--cwd-font-display), sans-serif;
    font-weight:    700;
    letter-spacing: -.015em;
    text-wrap:      balance;
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-weight:    800;
    letter-spacing: -.03em;
}

p {
    text-wrap: pretty;
}

.lead {
    color:       var(--cwd-heading);
    font-weight: 500;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset:     .2em;
    text-decoration-color:     color-mix(in srgb, currentColor 40%, transparent);
    transition:                color .15s ease, text-decoration-color .15s ease;

    &:hover {
        text-decoration-color: var(--cwd-accent);
    }
}

hr {
    color:   var(--cwd-border);
    opacity: 1;
}

blockquote {
    padding:       .75rem 1.25rem;
    margin:        0 0 1.25rem;
    font-size:     1.1rem;
    border-left:   4px solid var(--cwd-accent);
    background:    var(--cwd-tint);
    border-radius: 0 var(--cwd-radius-sm) var(--cwd-radius-sm) 0;
}

/* Small coloured text needs the darker accent to stay readable; icons keep the bright one */
:is(p, span, div, small, li, a, h1, h2, h3, h4, h5, h6, strong, em).text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

/* Utilities that Bootstrap 5.3 does not adapt between colour modes */
.bg-white {
    background-color: var(--cwd-card) !important;
}

.bg-light {
    background-color: var(--cwd-tint) !important;
}

[data-bs-theme="dark"] {
    :is(.text-dark, .text-black):not(.badge, .bg-warning, .bg-light) {
        color: var(--cwd-text) !important;
    }

    .border-dark {
        border-color: var(--cwd-border) !important;
    }
}


/* 4. Bootstrap components
   ========================================================================== */

/* Buttons - pill shaped, ink text on orange for contrast */
.btn {
    --bs-btn-font-weight:      600;
    --bs-btn-padding-x:        1.25rem;
    --bs-btn-border-radius:    50rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(255 150 0 / .35);
    transition:                color .15s ease, background-color .15s ease, border-color .15s ease,
                               box-shadow .2s ease, transform .2s var(--cwd-ease);

    &:hover {
        transform: translateY(-1px);
    }

    &:active {
        transform: none;
    }
}

.btn-sm {
    --bs-btn-padding-x: .9rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.75rem;
}

.btn-link {
    --bs-btn-border-radius: var(--bs-border-radius);
}

.btn-link:hover {
    transform: none;
}

.btn-primary {
    --bs-btn-color:                 var(--cwd-ink);
    --bs-btn-bg:                    var(--cwd-accent);
    --bs-btn-border-color:          var(--cwd-accent);
    --bs-btn-hover-color:           var(--cwd-ink);
    --bs-btn-hover-bg:              var(--cwd-accent-soft);
    --bs-btn-hover-border-color:    var(--cwd-accent-soft);
    --bs-btn-active-color:          var(--cwd-ink);
    --bs-btn-active-bg:             #F08C00;
    --bs-btn-active-border-color:   #F08C00;
    --bs-btn-disabled-color:        var(--cwd-ink);
    --bs-btn-disabled-bg:           var(--cwd-accent);
    --bs-btn-disabled-border-color: var(--cwd-accent);
    box-shadow:                     0 6px 16px -8px rgb(255 150 0 / .7);

    &:hover {
        box-shadow: 0 10px 22px -8px rgb(255 150 0 / .75);
    }
}

.btn-secondary,
.btn-dark {
    --bs-btn-color:                 var(--cwd-cream);
    --bs-btn-bg:                    var(--cwd-ink);
    --bs-btn-border-color:          var(--cwd-ink);
    --bs-btn-hover-color:           var(--cwd-ink);
    --bs-btn-hover-bg:              var(--cwd-accent);
    --bs-btn-hover-border-color:    var(--cwd-accent);
    --bs-btn-active-color:          var(--cwd-ink);
    --bs-btn-active-bg:             var(--cwd-accent-soft);
    --bs-btn-active-border-color:   var(--cwd-accent-soft);
    --bs-btn-disabled-bg:           var(--cwd-ink);
    --bs-btn-disabled-border-color: var(--cwd-ink);
}

[data-bs-theme="dark"] :is(.btn-secondary, .btn-dark) {
    --bs-btn-color:        var(--cwd-cream);
    --bs-btn-bg:           #3A3650;
    --bs-btn-border-color: #4A4663;
}

.btn-outline-primary {
    --bs-btn-color:               var(--cwd-link);
    --bs-btn-border-color:        var(--cwd-accent);
    --bs-btn-hover-color:         var(--cwd-ink);
    --bs-btn-hover-bg:            var(--cwd-accent);
    --bs-btn-hover-border-color:  var(--cwd-accent);
    --bs-btn-active-color:        var(--cwd-ink);
    --bs-btn-active-bg:           var(--cwd-accent-soft);
    --bs-btn-active-border-color: var(--cwd-accent-soft);
}

.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-color:               var(--cwd-heading);
    --bs-btn-border-color:        color-mix(in srgb, var(--cwd-heading) 35%, transparent);
    --bs-btn-hover-color:         var(--cwd-bg);
    --bs-btn-hover-bg:            var(--cwd-heading);
    --bs-btn-hover-border-color:  var(--cwd-heading);
    --bs-btn-active-color:        var(--cwd-bg);
    --bs-btn-active-bg:           var(--cwd-heading);
    --bs-btn-active-border-color: var(--cwd-heading);
}

.btn-light {
    --bs-btn-color:              var(--cwd-ink);
    --bs-btn-bg:                 var(--cwd-surface);
    --bs-btn-border-color:       var(--cwd-surface);
    --bs-btn-hover-color:        var(--cwd-ink);
    --bs-btn-hover-bg:           var(--cwd-accent-soft);
    --bs-btn-hover-border-color: var(--cwd-accent-soft);
}

.btn-email {
    --bs-btn-color:              #FFFFFF;
    --bs-btn-bg:                 #0072C5;
    --bs-btn-border-color:       #0072C5;
    --bs-btn-hover-color:        #FFFFFF;
    --bs-btn-hover-bg:           #005FA6;
    --bs-btn-hover-border-color: #005FA6;
}

/* Badges */
.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x:   .7em;
    border-radius:          50rem;
}

.badge:is(.bg-primary, .bg-warning, .text-bg-primary) {
    color: var(--cwd-ink) !important;
}

/* Cards */
.card {
    --bs-card-bg:                  var(--cwd-card);
    --bs-card-border-color:        var(--cwd-border);
    --bs-card-border-radius:       var(--cwd-radius);
    --bs-card-inner-border-radius: calc(var(--cwd-radius) - 1px);
    --bs-card-cap-bg:              var(--cwd-tint);
    overflow:                      hidden;
}

.card.shadow-lg,
.shadow-lg {
    box-shadow: var(--cwd-shadow-lg) !important;
}

.shadow {
    box-shadow: var(--cwd-shadow) !important;
}

.shadow-sm {
    box-shadow: var(--cwd-shadow-sm) !important;
}

.cards-hover .card {
    transition: transform .25s var(--cwd-ease), box-shadow .25s var(--cwd-ease);

    &:hover {
        transform: translateY(-4px);
    }
}

/* Coloured circle icons (fa-stack) become soft chips: surface circle, accent glyph */
.fa-stack > .fa-circle.fa-stack-2x:is(.text-primary),
.core-box .fa-stack > .fa-circle.fa-stack-2x {
    color: var(--cwd-chip) !important;
}

.fa-stack:has(> .fa-circle.text-primary) .fa-inverse,
.core-box .fa-stack .fa-inverse {
    color: var(--cwd-on-chip);
}

/* Accordions */
.accordion {
    --bs-accordion-bg:                   var(--cwd-card);
    --bs-accordion-border-color:         var(--cwd-border);
    --bs-accordion-border-radius:        var(--cwd-radius);
    --bs-accordion-inner-border-radius:  calc(var(--cwd-radius) - 1px);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgb(255 150 0 / .3);
    --bs-accordion-active-color:         var(--cwd-heading);
    --bs-accordion-active-bg:            var(--cwd-tint);
    --bs-accordion-btn-active-icon:      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A35400' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFA94D' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-button {
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 3px 0 0 var(--cwd-accent), inset 0 -1px 0 var(--cwd-border);
}

.accordion-flush .accordion-button {
    text-align: left;
}

/* List groups */
.list-group {
    --bs-list-group-bg:                  var(--cwd-card);
    --bs-list-group-border-color:        var(--cwd-border);
    --bs-list-group-border-radius:       var(--cwd-radius);
    --bs-list-group-action-hover-bg:     var(--cwd-tint);
    --bs-list-group-action-hover-color:  var(--cwd-heading);
    --bs-list-group-action-active-bg:    var(--cwd-chip);
    --bs-list-group-active-color:        var(--cwd-ink);
    --bs-list-group-active-bg:           var(--cwd-accent);
    --bs-list-group-active-border-color: var(--cwd-accent);
}

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-bg:                 var(--cwd-card);
    --bs-dropdown-border-color:       var(--cwd-border);
    --bs-dropdown-border-radius:      var(--cwd-radius);
    --bs-dropdown-box-shadow:         var(--cwd-shadow);
    --bs-dropdown-link-color:         var(--cwd-text);
    --bs-dropdown-link-hover-color:   var(--cwd-heading);
    --bs-dropdown-link-hover-bg:      var(--cwd-tint);
    --bs-dropdown-link-active-color:  var(--cwd-ink);
    --bs-dropdown-link-active-bg:     var(--cwd-accent);
    --bs-dropdown-divider-bg:         var(--cwd-border);
    --bs-dropdown-padding-x:          .4rem;
    --bs-dropdown-item-padding-x:     .85rem;
    --bs-dropdown-item-border-radius: var(--cwd-radius-sm);
    box-shadow:                       var(--bs-dropdown-box-shadow);
}

/* Navs */
.nav-pills {
    --bs-nav-pills-border-radius:     50rem;
    --bs-nav-pills-link-active-color: var(--cwd-ink);
    --bs-nav-pills-link-active-bg:    var(--cwd-accent);
}

.nav {
    --bs-nav-link-color:       var(--cwd-link);
    --bs-nav-link-hover-color: var(--cwd-heading);
}

/* Tables */
.table {
    --bs-table-bg:           transparent;
    --bs-table-border-color: var(--cwd-border);
    --bs-table-striped-bg:   rgba(var(--bs-emphasis-color-rgb), .035);
    --bs-table-hover-bg:     var(--cwd-tint);
}

.table > thead {
    --bs-table-color: var(--cwd-heading);
}

/* Alerts */
.alert {
    --bs-alert-border-radius: var(--cwd-radius);
    border-left-width:        4px;
}

.alert-primary {
    border-left-color: var(--cwd-accent);
}

/* A solid "bg-primary" alert (home page warning) becomes an ink banner with an orange edge */
.alert.bg-primary {
    background:  var(--cwd-ink) !important;
    color:       var(--cwd-cream) !important;
    border:      0;
    border-left: 6px solid var(--cwd-accent);
    box-shadow:  var(--cwd-shadow);

    strong {
        color: var(--cwd-accent);
    }
}

[data-bs-theme="dark"] .alert.bg-primary {
    background: #2A2839 !important;
}

/* Forms */
.form-control,
.form-select {
    --bs-border-radius: var(--cwd-radius-sm);
    background-color:   var(--cwd-card);

    &:focus {
        border-color: var(--cwd-accent);
        box-shadow:   0 0 0 .25rem rgb(255 150 0 / .25);
    }
}

.form-check-input:checked {
    background-color: var(--cwd-accent);
    border-color:     var(--cwd-accent);
}

/* Progress */
.progress {
    --bs-progress-bar-bg:        var(--cwd-accent);
    --bs-progress-bg:            var(--cwd-chip);
    --bs-progress-border-radius: 50rem;
}

/* Breadcrumb */
.breadcrumb {
    --bs-breadcrumb-item-active-color: var(--cwd-muted);
    --bs-breadcrumb-divider-color:     var(--cwd-muted);
    margin-bottom:                     0;
}


/* 5. Site chrome
   ========================================================================== */

/* Top bar */
#top-bar {
    background:  var(--cwd-ink);
    color:       color-mix(in srgb, var(--cwd-cream) 80%, transparent);
    height:      40px;
    line-height: 40px;
    font-size:   .875rem;
    box-shadow:  none !important;

    a {
        color:           var(--cwd-accent-soft);
        text-decoration: none;

        &:hover {
            color:           var(--cwd-cream);
            text-decoration: underline;
        }
    }

    #top-bar-social-icons li.list-inline-item {
        padding-inline: 6px;
    }
}

[data-bs-theme="dark"] #top-bar {
    background:    var(--cwd-copyright);
    border-bottom: 1px solid var(--cwd-border);
}

/* Primary navbar - frosted glass, sticks to the top */
#primary-navbar {
    z-index:                          1030;
    background-color:                 var(--cwd-glass) !important;
    -webkit-backdrop-filter:          saturate(1.6) blur(14px);
    backdrop-filter:                  saturate(1.6) blur(14px);
    border-bottom:                    1px solid var(--cwd-border);
    box-shadow:                       0 6px 24px -18px rgb(31 29 43 / .45) !important;

    --bs-navbar-color:                var(--cwd-nav);
    --bs-navbar-hover-color:          var(--cwd-link);
    --bs-navbar-active-color:         var(--cwd-link);
    --bs-navbar-brand-color:          var(--cwd-heading);
    --bs-navbar-brand-hover-color:    var(--cwd-heading);
    --bs-navbar-toggler-border-color: var(--cwd-border);
    --bs-navbar-toggler-focus-width:  .2rem;

    /* Logo shrinks on phones so the theme switch and burger stay on the same row */

    .navbar-brand img {
        width:     min(300px, calc(100vw - 11.5rem));
        max-width: none;
        height:    auto;
    }

    .navbar-nav > .nav-item > .nav-link {
        position:    relative;
        font-weight: 600;
        font-size:   .95rem;

        /* Accent underline that grows on hover / active */

        &::before {
            content:          "";
            position:         absolute;
            left:             var(--bs-navbar-nav-link-padding-x, .5rem);
            right:            var(--bs-navbar-nav-link-padding-x, .5rem);
            bottom:           .2rem;
            height:           2px;
            border-radius:    2px;
            background:       var(--cwd-accent);
            transform:        scaleX(0);
            transform-origin: left;
            transition:       transform .25s var(--cwd-ease);
        }

        &:hover::before,
        &.show::before {
            transform: scaleX(1);
        }
    }

    /* Pages mark either the <li> (.nav-item.active) or the link itself (.nav-link.active) */

    .navbar-nav > .nav-item.active > .nav-link,
    .navbar-nav > .nav-item > .nav-link.active {
        color: var(--cwd-link) !important;

        &::before {
            transform: scaleX(1);
        }
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgb(255 150 0 / .35);
    }
}

/* Mega menu */
.megamenu {
    position: static;

    .dropdown-menu {
        background: none;
        border:     none;
        box-shadow: none;
        width:      100%;
        padding:    0;
    }

    /* Invisible bridge over the gap between the menu link and the panel, so a hover-opened
     mega menu stays open while the pointer travels down into it */
    @media (min-width: 992px) {
        .dropdown-menu.show::before {
            content:  "";
            position: absolute;
            inset:    -1.75rem 0 100% 0;
        }
    }

    /* The visible panel is the .bg-white row inside the dropdown */

    .dropdown-menu > .container > .row {
        border:        1px solid var(--cwd-border);
        border-top:    0;
        border-radius: 0 0 var(--cwd-radius-lg) var(--cwd-radius-lg) !important;
        overflow:      hidden;
        box-shadow:    var(--cwd-shadow-lg) !important;
    }

    h6 {
        font-size:      .75rem;
        font-weight:    700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color:          var(--cwd-link);
        padding-bottom: .6em;
        margin-bottom:  .25rem;
        border-bottom:  2px solid var(--cwd-chip);
    }

    .nav-link {
        color:          var(--cwd-text);
        border-radius:  var(--cwd-radius-sm);
        padding-inline: .5rem;
        margin-inline:  -.5rem;
        transition:     color .15s ease, background-color .15s ease;

        &:hover {
            color:      var(--cwd-heading);
            background: var(--cwd-tint);
        }
    }
}

/* External links (e.g. Clarke Hosting) show an "opens in a new tab" icon - see the end of this file */

/* Logo: dark text version for light, light text version for dark */
.navbar-brand .logo-dark {
    display: none;
}

[data-bs-theme="dark"] .navbar-brand {
    .logo-light {
        display: none;
    }

    .logo-dark {
        display: inline-block;
    }
}

/* Page title / breadcrumb band
   Follows the light / dark theme: a light warm band in light mode, deep ink in dark mode */
:root,
[data-bs-theme="light"] {
    /* A warm peach band, a step darker than the cream page background */
    --sh-bg:          linear-gradient(180deg, #FFE5C9 0%, #FFEEDB 100%);
    --sh-grid:        rgb(31 29 43 / .05);
    --sh-glow:        rgb(255 150 0 / .07);
    --sh-title:       var(--cwd-ink);
    --sh-text:        var(--cwd-text);
    --sh-link:        var(--cwd-muted);
    --sh-link-hover:  var(--cwd-ink);
    --sh-active:      var(--cwd-link);
    --sh-divider:     rgb(31 29 43 / .3);
    --sh-border:      var(--cwd-border);
}

[data-bs-theme="dark"] {
    --sh-bg:          #1A1824;
    --sh-grid:        rgb(255 248 239 / .04);
    --sh-glow:        rgb(255 150 0 / .05);
    --sh-title:       var(--cwd-cream);
    --sh-text:        color-mix(in srgb, var(--cwd-cream) 75%, transparent);
    --sh-link:        rgb(255 248 239 / .7);
    --sh-link-hover:  var(--cwd-cream);
    --sh-active:      var(--cwd-accent-soft);
    --sh-divider:     rgb(255 248 239 / .4);
    --sh-border:      transparent;
}

#sub-header {
    position:      relative;
    isolation:     isolate;
    overflow:      hidden;
    padding:       clamp(2.25rem, 4.5vw, 3.75rem) 0;
    background:    var(--sh-bg);
    border-bottom: 1px solid var(--sh-border);
    color:         var(--sh-text);

    &::before {
        content:    "";
        position:   absolute;
        inset:      0;
        z-index:    -1;
        background: radial-gradient(40rem 18rem at 92% 0%, var(--sh-glow), transparent 70%),
                    linear-gradient(var(--sh-grid) 1px, transparent 1px) 0 0 / 48px 48px,
                    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px) 0 0 / 48px 48px;
    }

    /* Accent rule along the bottom edge */

    &::after {
        content:    "";
        position:   absolute;
        inset:      auto 0 0 0;
        height:     3px;
        background: linear-gradient(90deg, var(--cwd-accent), var(--cwd-accent-soft) 40%, transparent 85%);
    }

    h1 {
        max-width:      30ch;
        margin:         0;
        color:          var(--sh-title);
        font-size:      clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
        font-weight:    800;
        line-height:    1.1;
        letter-spacing: -.03em;
    }

    .breadcrumb {
        --bs-breadcrumb-divider:           "\203A";
        --bs-breadcrumb-divider-color:     var(--sh-divider);
        --bs-breadcrumb-item-active-color: var(--sh-active);
        margin-bottom:                     .9rem;
        font-size:                         .875rem;
        font-weight:                       500;

        a {
            color:           var(--sh-link);
            text-decoration: none;

            &:hover {
                color: var(--sh-link-hover);
            }
        }
    }
}

/* Optional action (e.g. "Back to Portfolio") on the right of the title band, vertically centred.
   On narrow screens it wraps below the title. */
#sub-header .page-header-inner {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             1.25rem 2rem;

    .page-header-text   { flex: 1 1 22rem; min-width: 0; }
    .page-header-action { flex: 0 0 auto; }

    .btn { white-space: nowrap; }
}

/* Closing call-to-action band */
.cta-band {
    padding-block: clamp(2.5rem, 5vw, 4rem);

    .cta-band-inner {
        position:        relative;
        isolation:       isolate;
        overflow:        hidden;
        display:         flex;
        flex-wrap:       wrap;
        align-items:     center;
        justify-content: space-between;
        gap:             1.5rem 2.5rem;
        padding:         clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
        border-radius:   var(--cwd-radius-lg);
        background:      var(--cwd-ink);
        color:           color-mix(in srgb, var(--cwd-cream) 75%, transparent);
        box-shadow:      var(--cwd-shadow-lg);

        &::before {
            content:    "";
            position:   absolute;
            inset:      0;
            z-index:    -1;
            background: radial-gradient(34rem 16rem at 100% 100%, rgb(255 150 0 / .09), transparent 70%);
        }
    }

    h2 {
        margin-bottom:  .4rem;
        color:          var(--cwd-cream);
        font-size:      clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
        font-weight:    800;
        letter-spacing: -.02em;
    }

    p {
        margin:    0;
        max-width: 40rem;
    }

    .cta-band-actions {
        display:   flex;
        flex-wrap: wrap;
        gap:       .75rem;
    }

    .btn-outline-light {
        --bs-btn-color:              var(--cwd-cream);
        --bs-btn-border-color:       rgb(255 248 239 / .35);
        --bs-btn-hover-color:        var(--cwd-ink);
        --bs-btn-hover-bg:           var(--cwd-cream);
        --bs-btn-hover-border-color: var(--cwd-cream);
    }
}

[data-bs-theme="dark"] .cta-band .cta-band-inner {
    background: #24222F;
    border:     1px solid var(--cwd-border);
}

/* Footer */
#footer {
    position:       relative;
    background:     radial-gradient(60rem 20rem at 100% 0%, rgb(255 150 0 / .05), transparent 65%),
                    var(--cwd-footer);
    color:          color-mix(in srgb, var(--cwd-cream) 75%, transparent);
    padding-top:    3rem;
    padding-bottom: 1.5rem;

    /* Accent bar along the top */

    &::before {
        content:    "";
        position:   absolute;
        inset:      0 0 auto 0;
        height:     4px;
        background: linear-gradient(90deg, var(--cwd-accent), var(--cwd-accent-soft) 60%, var(--cwd-surface));
    }

    h4 {
        color:          var(--cwd-cream);
        font-size:      1.1rem;
        margin-bottom:  1rem;
        padding-bottom: .75rem;
        position:       relative;

        &::after {
            content:       "";
            position:      absolute;
            left:          0;
            bottom:        0;
            width:         2.5rem;
            height:        3px;
            border-radius: 3px;
            background:    var(--cwd-accent);
        }
    }

    a {
        color:           var(--cwd-cream);
        text-decoration: none;

        &:hover {
            color: var(--cwd-accent-soft);
        }
    }

    .other-services ul {
        list-style:   none;
        padding-left: 0;

        li {
            padding-block: .2rem;
        }

        li a::before {
            content:      "\203A";
            color:        var(--cwd-accent);
            margin-right: .5rem;
            font-weight:  700;
        }
    }

    /* Contact details with small icon chips */
    .footer-contact {
        margin: 0;

        li {
            display:     flex;
            align-items: flex-start;
            gap:         .75rem;
            line-height: 1.5;

            & + li { margin-top: .85rem; }
        }

        i {
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           1.9rem;
            height:          1.9rem;
            margin-top:      -.15rem;
            border-radius:   .55rem;
            background:      rgb(255 150 0 / .12);
            color:           var(--cwd-accent);
            font-size:       .8rem;
        }

        a { overflow-wrap: anywhere; }
    }
}

/* Copyright */
#copyright {
    background:  var(--cwd-copyright);
    color:       color-mix(in srgb, var(--cwd-cream) 55%, transparent);
    padding-top: .6em;
    font-size:   .875rem;
    border-top:  1px solid rgb(255 255 255 / .06);

    a {
        color:           color-mix(in srgb, var(--cwd-cream) 80%, transparent);
        text-decoration: none;

        &:hover {
            color:           var(--cwd-accent-soft);
            text-decoration: underline;
        }
    }

    #copyright-menu .nav-link {
        padding-top: 0;
    }
}


/* 6. Page components
   ========================================================================== */

.wrapper.padding50 {
    padding-block: 50px;
}

.bg-light-orange {
    background:    var(--cwd-chip);
    border-top:    1px solid var(--bs-primary-border-subtle);
    border-bottom: 1px solid var(--bs-primary-border-subtle);
}

.anchors {
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

.img-outline {
    outline:        1px solid rgb(255 255 255 / .7);
    outline-offset: -6px;
    border-radius:  var(--cwd-radius-lg);
    box-shadow:     var(--cwd-shadow-lg);
}

/* SEO quick links */
ul.seo-ql {
    --seo-audit:      #FF9600;
    --seo-keywords:   #ED1C24;
    --seo-links:      #0072BC;
    --seo-competitor: #39B54A;

    list-style:       none;
    padding-left:     1em;

    > li {
        padding:          .2rem .6rem;
        margin-bottom:    .25rem;
        border-left:      4px solid var(--seo);
        background-color: color-mix(in srgb, var(--seo) 16%, transparent);
        border-radius:    0 var(--cwd-radius-sm) var(--cwd-radius-sm) 0;

        a {
            color:           var(--cwd-heading);
            text-decoration: none;
        }
    }

    li.audit {
        --seo: var(--seo-audit);
    }

    li.keywords {
        --seo: var(--seo-keywords);
    }

    li.links {
        --seo: var(--seo-links);
    }

    li.competitors {
        --seo: var(--seo-competitor);
    }
}

/* Core boxes (icon + heading + text) */
.core-box {
    padding-block:  1em;
    display:        flex;
    flex-direction: column;

    .heading {
        display:     flex;
        align-items: center;

        .fa-stack {
            flex-shrink: 0;
        }

        a {
            color:           var(--cwd-heading);
            text-decoration: none;

            &:hover {
                color: var(--cwd-link);
            }
        }
    }

    p.core-box-indent {
        margin-left: 5em;
        text-indent: unset;
    }
}

.core-box-seo {
    .heading {
        padding-bottom: 10px;

        h3 {
            padding-left:  30px;
            margin-bottom: 6px;
        }
    }

    p {
        margin-left: 5em;
    }
}

.icon-box-grid {
    display: grid;
    gap:     1.25rem;
}

/* Contact page */
dl:is(#contact-details, #business-hours, #social-networks) {
    margin-bottom: 1em;

    dt {
        clear:        left;
        float:        left;
        font-weight:  700;
        margin-right: 10px;
        padding:      5px;
        width:        140px;
        text-align:   right;
        color:        var(--cwd-heading);
    }

    dd {
        margin:  2px 0 2px 150px;
        padding: 5px 0;
    }
}

div.flexslider {
    background:    none;
    border:        none;
    border-radius: 0;
    box-shadow:    none;
    margin:        0;
}

#terms {
    p.indent {
        margin-left: 1.7em;
        text-indent: 0;
    }

    span.item {
        font-weight: 700;
        color:       var(--cwd-link);
    }
}

/* Portfolio filter chips (MixItUp adds .mixitup-control-active to the chosen one) */
.portfolio-filters {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             .5rem;
    margin-bottom:   clamp(2rem, 4vw, 2.75rem);
}

.filter-chip {
    padding:       .5rem 1.15rem;
    border:        1px solid var(--cwd-border);
    border-radius: 50rem;
    background:    var(--cwd-card);
    color:         var(--cwd-heading);
    font-size:     .92rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background-color .15s ease, border-color .15s ease, color .15s ease;

    &:hover { border-color: var(--cwd-accent); }

    &.mixitup-control-active {
        background:   var(--cwd-accent);
        border-color: var(--cwd-accent);
        color:        var(--cwd-ink);
    }
}

/* Portfolio grid of captioned cards */
.portfolio-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap:                   1.5rem;
}

.portfolio-card {
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    background:      var(--cwd-card);
    border:          1px solid var(--cwd-border);
    border-radius:   var(--cwd-radius-lg);
    box-shadow:      var(--cwd-shadow-sm);
    text-decoration: none;
    transition:      border-color .2s ease, box-shadow .2s ease;

    /* Gentle fade each time a card is shown by the portfolio filter. A CSS animation restarts
       whenever the card goes from hidden to shown, and never holds up the filter itself.
       The theme's reduced-motion rule switches it off for visitors who prefer less motion. */
    animation:       portfolio-card-in .35s ease both;

    .portfolio-card-img {
        display:       block;
        aspect-ratio:  4 / 3;
        overflow:      hidden;
        border-bottom: 1px solid var(--cwd-border);
        background:    var(--cwd-tint);

        img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
    }

    .portfolio-card-title {
        padding:     .9rem 1.1rem 1rem;
        color:       var(--cwd-heading);
        font-weight: 700;
        line-height: 1.3;
    }

    &:hover {
        border-color: var(--bs-primary-border-subtle);
        box-shadow:   var(--cwd-shadow);

        .portfolio-card-title { color: var(--cwd-link); }
    }
}

@keyframes portfolio-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Portfolio thumbnails (home page and category "recent work" sections) */
a.portfolio-item {
    display: block;

    .grid-image {
        overflow:      hidden;
        border-radius: var(--cwd-radius);
        border-color:  var(--cwd-border) !important;
        transition:    border-color .2s ease, box-shadow .2s ease;
    }

    &:hover .grid-image {
        border-color: var(--bs-primary-border-subtle) !important;
        box-shadow:   var(--cwd-shadow) !important;
    }
}

/* Single portfolio item */
.portfolio-showcase {
    overflow:      hidden;
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    background:    var(--cwd-card);
    box-shadow:    var(--cwd-shadow-lg);

    /* Browser-window bar above the screenshots */
    .portfolio-showcase-bar {
        display:       flex;
        align-items:   center;
        gap:           .4rem;
        padding:       .65rem .9rem;
        background:    var(--cwd-tint);
        border-bottom: 1px solid var(--cwd-border);

        span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--cwd-border); }
        span:first-child { background: var(--cwd-accent); }

        small {
            margin-left:   .5rem;
            overflow:      hidden;
            color:         var(--cwd-muted);
            font-size:     .8rem;
            white-space:   nowrap;
            text-overflow: ellipsis;
        }
    }

    .flexslider {
        margin:       0;
        touch-action: pan-y;   /* sideways swipes go to the slider, vertical ones still scroll the page */
    }
    .flex-control-nav { bottom: .75rem; z-index: 2; }

    /* Previous / next arrows: always visible (touch screens have no hover), round, on-theme */
    .flex-direction-nav a {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        top:             50%;
        width:           2.75rem;
        height:          2.75rem;
        margin:          0;
        translate:       0 -50%;
        border:          1px solid var(--cwd-border);
        border-radius:   50%;
        background:      color-mix(in srgb, var(--cwd-card) 88%, transparent);
        color:           var(--cwd-heading);
        font-size:       1rem;
        text-shadow:     none;
        text-decoration: none;   /* no theme link underline inside the round buttons */
        box-shadow:      var(--cwd-shadow);
        opacity:         .85;
        backdrop-filter: blur(4px);
        transition:      opacity .2s ease, background-color .2s ease, color .2s ease, scale .2s ease;

        /* Drop the plugin's own icon font. flexslider.css loads after this file and its a.flex-next:before
           rule would otherwise win, so these selectors name the prev / next classes to out-rank it */
        &::before,
        &.flex-prev::before,
        &.flex-next::before { content: none; display: none; }

        &:hover, &:focus-visible {
            opacity:    1;
            background: var(--cwd-accent);
            border-color: var(--cwd-accent);
            color:      #1F1D2B;
            scale:      1.06;
        }
        &:focus-visible { outline: 2px solid var(--cwd-accent); outline-offset: 2px; }
    }
    .flex-direction-nav .flex-prev,
    .flexslider:hover .flex-prev { left: .75rem; }
    .flex-direction-nav .flex-next,
    .flexslider:hover .flex-next { right: .75rem; }
    .flexslider:hover .flex-direction-nav a { opacity: .85; }
    .flexslider:hover .flex-direction-nav a:hover { opacity: 1; }
}

.portfolio-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       .5rem;
    margin:    0 0 1.5rem;
    padding:   0;
    list-style: none;

    li {
        display:       inline-flex;
        align-items:   center;
        gap:           .45rem;
        padding:       .35rem .8rem;
        border-radius: 50rem;
        background:    var(--cwd-chip);
        color:         var(--cwd-heading);
        font-size:     .88rem;
        font-weight:   600;

        i { color: var(--cwd-on-chip); }
        a { color: inherit; }
    }
}

.skill-chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    margin:     0 0 1.5rem;
    padding:    0;
    list-style: none;

    li {
        display:       inline-flex;
        align-items:   center;
        gap:           .4rem;
        padding:       .35rem .8rem;
        border:        1px solid var(--cwd-border);
        border-radius: 50rem;
        background:    var(--cwd-card);
        font-size:     .88rem;
        font-weight:   600;

        i { color: var(--cwd-accent); }
    }
}

/* Testimonials page: every testimonial in turn, no slider */
ul.testimonial-list {
    display:    grid;
    gap:        clamp(2rem, 4vw, 3rem);
    margin:     0;
    padding:    0;
    list-style: none;

    > li {
        padding:       clamp(1.25rem, 3vw, 2rem);
        background:    var(--cwd-card);
        border:        1px solid var(--cwd-border);
        border-radius: var(--cwd-radius-lg);
        box-shadow:    var(--cwd-shadow-sm);
    }

    .row-testimonial { margin-bottom: 0; }

    /* The quote sits inside the card already, so drop its own card styling */
    blockquote.testimonial { border: 0; box-shadow: none; padding: 1.75rem 0 0; background: none; }
    blockquote.testimonial::before { left: 0; top: -.75rem; }
}

/* Before and after gallery */
#before-after .portfolio-ba-item {
    height:        100%;
    overflow:      hidden;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    h3 {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             .75rem;
        margin:          0;
        padding:         .9rem 1.1rem;
        font-size:       1.02rem;
        font-weight:     700;

        a { color: var(--cwd-heading); text-decoration: none; }
        a:hover { color: var(--cwd-link); }
    }

    .ba-labels {
        display:         flex;
        justify-content: space-between;
        padding:         .55rem 1.1rem;
        border-top:      1px solid var(--cwd-border);
        color:           var(--cwd-muted);
        font-size:       .75rem;
        font-weight:     800;
        letter-spacing:  .08em;
        text-transform:  uppercase;
    }
}

.row-testimonial .testimonial-author img {
    width:         60px !important;
    height:        60px !important;
    margin-right:  1em;
    border-radius: 50%;
    box-shadow:    0 0 0 3px var(--cwd-chip);
}

/* Articles */
#cwd-articles {
    .article-single {
        margin-bottom:  1em;
        padding-bottom: 1em;
        position:       relative;
    }

    .article-single-image a {
        position:      relative;
        height:        100%;
        display:       block;
        overflow:      hidden;
        border-radius: var(--cwd-radius);
    }

    h3 a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    .article-date {
        font-style:    italic;
        font-size:     80%;
        color:         #FFFFFF;
        position:      absolute;
        bottom:        .5rem;
        right:         .5rem;
        background:    rgb(31 29 43 / .7);
        padding:       2px 8px;
        border-radius: 50rem;
    }
}

/* Help pages */
/* Email account types (help guides) */
div.email-type {
    margin:            1.25rem 0 0;
    padding:           1.5rem 1.6rem .5rem;
    background:        var(--cwd-card);
    border:            1px solid var(--cwd-border);
    border-radius:     var(--cwd-radius-lg);
    box-shadow:        var(--cwd-shadow-sm);
    scroll-margin-top: 7rem;

    .email-type-head {
        display:       flex;
        align-items:   center;
        gap:           1rem;
        margin-bottom: 1rem;

        h4 {
            margin:      0 0 .2rem;
            padding:     0;
            border:      0;
            font-size:   1.2rem;
            font-weight: 800;
        }
    }

    .email-type-tag {
        display:        inline-block;
        padding:        .15rem .65rem;
        border-radius:  50rem;
        background:     var(--cwd-chip);
        color:          var(--cwd-on-chip);
        font-size:      .72rem;
        font-weight:    800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .alert { margin-bottom: 1rem; }
}

/* Quick-jump grid of email types */
.email-type-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap:                   .75rem;
    margin:                1.25rem 0 .5rem;

    /* 4 + 3 on wide screens rather than 5 + 2 */
    @media (min-width: 1200px) { grid-template-columns: repeat(4, 1fr); }

    a {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        gap:             .6rem;
        padding:         1.1rem .75rem;
        background:      var(--cwd-card);
        border:          1px solid var(--cwd-border);
        border-radius:   var(--cwd-radius);
        color:           var(--cwd-heading);
        font-size:       .9rem;
        font-weight:     700;
        line-height:     1.25;
        text-align:      center;
        text-decoration: none;
        transition:      border-color .2s ease, background-color .2s ease;

        i {
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2.75rem;
            height:          2.75rem;
            border-radius:   .8rem;
            background:      var(--cwd-chip);
            color:           var(--cwd-on-chip);
            font-size:       1.15rem;
        }

        &:hover {
            border-color: var(--cwd-accent);
            background:   var(--cwd-tint);
        }
    }
}

/* Good points / not-so-good points, side by side */
.pros-cons {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap:                   .5rem 1.5rem;
    margin:                1.25rem 0;
    padding:               1.25rem 1.25rem .5rem;
    border-radius:         var(--cwd-radius);
    background:            var(--cwd-tint);

    h5 { margin: 0 0 .75rem; font-size: .95rem; }
}

/* Step-by-step flow diagram (e.g. how POP3 / IMAP email works) */
/* Light mode: peach band with the faint grid, like the page title band. Dark mode: deep ink */
:root,
[data-bs-theme="light"] {
    --fd-text:       var(--cwd-text);
    --fd-caption:    var(--cwd-link);
    --fd-step-bg:    rgb(255 255 255 / .7);
    --fd-step-line:  rgb(31 29 43 / .1);
    --fd-title:      var(--cwd-ink);
    --fd-emphasis:   var(--cwd-link);
    --fd-icon-bg:    var(--cwd-surface);
}

[data-bs-theme="dark"] {
    --fd-text:       color-mix(in srgb, var(--cwd-cream) 78%, transparent);
    --fd-caption:    var(--cwd-accent);
    --fd-step-bg:    rgb(255 248 239 / .06);
    --fd-step-line:  rgb(255 248 239 / .12);
    --fd-title:      var(--cwd-cream);
    --fd-emphasis:   var(--cwd-accent-soft);
    --fd-icon-bg:    rgb(255 150 0 / .16);
}

figure.flow-diagram {
    margin:        1.25rem 0 0;
    padding:       1.5rem;
    border:        1px solid var(--ill-border);
    border-radius: var(--cwd-radius-lg);
    background:    linear-gradient(var(--ill-grid) 1px, transparent 1px) 0 0 / 40px 40px,
                   linear-gradient(90deg, var(--ill-grid) 1px, transparent 1px) 0 0 / 40px 40px,
                   var(--ill-bg);
    color:         var(--fd-text);
    box-shadow:    var(--cwd-shadow);

    figcaption {
        margin-bottom:  1.25rem;
        color:          var(--fd-caption);
        font-size:      .8rem;
        font-weight:    800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    ol {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   1.75rem;
        margin:                0;
        padding:               0;
        list-style:            none;
    }

    li {
        position:       relative;
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            .4rem;
        padding:        1.1rem 1rem;
        border-radius:  var(--cwd-radius);
        background:     var(--fd-step-bg);
        border:         1px solid var(--fd-step-line);
        text-align:     center;

        > i {
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           3rem;
            height:          3rem;
            border-radius:   50%;
            background:      var(--fd-icon-bg);
            color:           var(--ill-icon);
            font-size:       1.25rem;
        }

        strong { color: var(--fd-title); }
        span   { font-size: .88rem; line-height: 1.5; }
        em     { color: var(--fd-emphasis); font-style: normal; font-weight: 700; }

        /* Arrow to the next step (downwards on phones, across on wider screens) */
        &:not(:last-child)::after {
            content:     "\f063";
            position:    absolute;
            left:        50%;
            bottom:      -1.45rem;
            translate:   -50% 0;
            font-family: "Font Awesome 7 Free";
            font-weight: 900;
            color:       var(--cwd-accent);
        }

        /* IMAP: the last step syncs both ways */
        &.flow-sync { border-color: rgb(255 150 0 / .4); }
    }

    @media (min-width: 768px) {
        ol { grid-template-columns: 1fr 1.3fr 1.3fr; gap: 2rem; }

        li:not(:last-child)::after {
            content: "\f061";
            left:    auto;
            right:   -1.55rem;
            bottom:  auto;
            top:     50%;
            translate: 0 -50%;
        }

        li:nth-child(2):has(+ .flow-sync)::after { content: "\f362"; }
    }
}

[data-bs-theme="dark"] figure.flow-diagram { --ill-bg: #24222F; border-color: var(--cwd-border); }

/* Home - introduction cards */
#home-introduction {
    background:    linear-gradient(180deg, var(--cwd-tint), var(--cwd-bg)) !important;
    border-bottom: 0 !important;

    .intro-grid {
        margin-block:   15px;
        height:         calc(100% - 30px);
        display:        flex;
        flex-direction: column;

        .intro-image {
            position:      relative;
            border-radius: var(--cwd-radius-lg);
            overflow:      hidden;
            box-shadow:    var(--cwd-shadow);
        }

        .intro-content {
            flex:           1;
            display:        flex;
            flex-direction: column;
            box-shadow:     var(--cwd-shadow);
            border:         1px solid var(--cwd-border);
            border-radius:  var(--cwd-radius-lg);
            background:     var(--cwd-card);
            padding:        1.5rem;
            margin:         -40px 20px 0;
            position:       relative;
        }

        .intro-content h5 {
            font-size:   1.15rem;
            font-weight: 700;

            a {
                color: var(--cwd-heading);
            }

            a:hover {
                color: var(--cwd-link);
            }
        }
    }
}

/* Home - "We work hard" band: ink overlay over the photo, glass cards */
.wrapper:has(.icon-box-grid) {
    position:            relative;
    isolation:           isolate;
    background-size:     cover;
    background-position: center;
    padding-block:       3.5rem !important;

    &::before {
        content:    "";
        position:   absolute;
        inset:      0;
        z-index:    -1;
        background: linear-gradient(160deg, rgb(31 29 43 / .92) 0%, rgb(31 29 43 / .82) 55%, rgb(255 150 0 / .15) 140%);
    }

    h2 {
        color: var(--cwd-cream);
    }

    h2 + p {
        color:       var(--cwd-accent-soft);
        font-weight: 500;
    }

    .section-eyebrow {
        color: var(--cwd-accent-soft);
    }

    .section-lead {
        color: var(--cwd-accent-soft);
    }

    .icon-box-grid > .col {
        background:    var(--cwd-card);
        border:        1px solid rgb(255 255 255 / .1);
        border-radius: var(--cwd-radius-lg);
        padding:       2rem 1.75rem;
        box-shadow:    var(--cwd-shadow-lg);

        :is(h3, h4) a {
            color: var(--cwd-heading);
        }

        :is(h3, h4) a:hover {
            color: var(--cwd-link);
        }
    }
}

/* Database unavailable messages */
.border-danger-subtle {
    border-color: var(--bs-danger-border-subtle) !important;
}


/* 6b. Page building blocks - reusable on any page
   ========================================================================== */

/* Section rhythm */
.cwd-section {
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.cwd-section-tint {
    background: var(--cwd-tint);
}

/* Section heading: eyebrow + title + lead */
.section-head {
    max-width:     48rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);

    &.text-center {
        margin-inline: auto;
    }
}

.section-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            .6rem;
    margin-bottom:  .75rem;
    font-size:      .8rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--cwd-link);

    &::before {
        content:       "";
        width:         1.5rem;
        height:        2px;
        border-radius: 2px;
        background:    var(--cwd-accent);
    }
}

.section-title {
    font-size:      clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    font-weight:    800;
    letter-spacing: -.025em;
    line-height:    1.15;
    margin-bottom:  1rem;
}

.section-lead {
    font-size:   1.125rem;
    line-height: 1.65;
    color:       var(--cwd-muted);
}

/* Highlighted words in a heading */
.text-accent {
    color: var(--cwd-link);
}

/* Feature card: icon chip, title, text */
.feature-card {
    display:       flex;
    gap:           1.1rem;
    padding:       1.35rem 1.5rem;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);
    transition:    border-color .2s ease, box-shadow .2s ease;

    &:hover {
        border-color: var(--bs-primary-border-subtle);
        box-shadow:   var(--cwd-shadow);
    }

    & + & {
        margin-top: 1rem;
    }

    h3, .h5 {
        font-size:     1.15rem;
        margin-bottom: .4rem;

        a {
            color:           var(--cwd-heading);
            text-decoration: none;
        }

        a:hover {
            color: var(--cwd-link);
        }
    }

    p:last-child {
        margin-bottom: 0;
    }
}

.feature-icon {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           3rem;
    height:          3rem;
    border-radius:   .9rem;
    background:      var(--cwd-chip);
    color:           var(--cwd-on-chip);
    font-size:       1.25rem;
}

/* Service card: image (or icon), title, text, arrow link pinned to the bottom */
.service-card {
    height:         100%;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    background:     var(--cwd-card);
    border:         1px solid var(--cwd-border);
    border-radius:  var(--cwd-radius-lg);
    box-shadow:     var(--cwd-shadow-sm);
    transition:     border-color .2s ease, box-shadow .2s ease;

    &:hover {
        border-color: var(--bs-primary-border-subtle);
        box-shadow:   var(--cwd-shadow);
    }

    .service-card-img {
        display:       block;
        aspect-ratio:  3 / 1;
        overflow:      hidden;
        border-bottom: 1px solid var(--cwd-border);

        img {
            width:      100%;
            height:     100%;
            object-fit: cover;
        }

        /* Photos taller than the 3:1 banner images */

        &.service-card-img-photo {
            aspect-ratio: 16 / 10;
        }

        /* An icon tile in place of a photo */

        .icon-illustration {
            aspect-ratio:  auto;
            height:        100%;
            border-radius: 0;
            box-shadow:    none;

            > i {
                font-size: 3.5rem;
            }
        }
    }

    .service-card-body {
        flex:           1;
        display:        flex;
        flex-direction: column;
        padding:        1.5rem 1.6rem 1.6rem;

        .feature-icon {
            margin-bottom: 1.1rem;
        }
    }

    h3 {
        font-size:     1.2rem;
        margin-bottom: .5rem;

        a {
            color:           var(--cwd-heading);
            text-decoration: none;
        }

        a:hover {
            color: var(--cwd-link);
        }
    }

    p {
        color: var(--cwd-text);
    }

    .link-arrow {
        margin-top: auto;
    }

    /* Small "Stage 1" style label above a card title */

    .stage-label {
        display:        block;
        margin-bottom:  .3rem;
        font-size:      .75rem;
        font-weight:    800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color:          var(--cwd-link);
    }
}

/* "Learn more ->" text link */
.link-arrow {
    display:         inline-flex;
    align-items:     center;
    gap:             .45rem;
    font-weight:     700;
    text-decoration: none;
    color:           var(--cwd-link);

    &::after {
        content:     "\f061";
        font-family: "Font Awesome 7 Free", emoji;
        font-weight: 900;
        font-size:   .8em;
        transition:  transform .2s ease;
    }

    &:hover {
        color: var(--cwd-heading);
    }

    &:hover::after {
        transform: translateX(3px);
    }
}

/* Content panel: a white card for a block of text */
.content-panel {
    padding:       clamp(1.5rem, 3vw, 2.25rem);
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    > :last-child {
        margin-bottom: 0;
    }
}

/* Stat callout: big figure beside a sentence */
.stat-callout {
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    padding:       1.1rem 1.5rem;
    border-radius: var(--cwd-radius-lg);
    background:    var(--cwd-chip);
    border:        1px solid var(--bs-primary-border-subtle);

    .stat-callout-figure {
        flex-shrink:    0;
        font-family:    var(--cwd-font-display), sans-serif;
        font-size:      clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
        font-weight:    800;
        line-height:    1;
        letter-spacing: -.04em;
        color:          var(--cwd-link);
    }

    p {
        margin: 0;
        color:  var(--cwd-heading);
    }
}

/* Question and answer card */
.qa-card {
    height:        100%;
    padding:       clamp(1.5rem, 3vw, 2rem);
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    h3 {
        display:       flex;
        gap:           .85rem;
        align-items:   flex-start;
        font-size:     1.2rem;
        line-height:   1.35;
        margin-bottom: 1rem;

        /* "Q" badge */

        &::before {
            content:         "Q";
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2rem;
            height:          2rem;
            margin-top:      -.1rem;
            border-radius:   .6rem;
            background:      var(--cwd-accent);
            color:           var(--cwd-ink);
            font-size:       .95rem;
            font-weight:     800;
        }
    }

    p {
        color: var(--cwd-text);
    }

    /* Warning variant: "!" badge instead of "Q" */

    &.warning-card h3::before {
        content: "!";
    }
}

/* Pricing cards */
.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap:                   1.5rem;
    align-items:           stretch;
}

.price-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    padding:        2rem 1.75rem;
    background:     var(--cwd-card);
    border:         1px solid var(--cwd-border);
    border-radius:  var(--cwd-radius-lg);
    box-shadow:     var(--cwd-shadow-sm);

    h3 {
        font-size:      1rem;
        font-weight:    700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color:          var(--cwd-link);
        margin-bottom:  .75rem;
    }

    .price {
        font-family:    var(--cwd-font-display), sans-serif;
        font-size:      3rem;
        font-weight:    800;
        line-height:    1;
        letter-spacing: -.04em;
        color:          var(--cwd-heading);

        small {
            font-size:      1rem;
            font-weight:    500;
            letter-spacing: 0;
            color:          var(--cwd-muted);
        }
    }

    .price-note {
        margin:    .5rem 0 1.5rem;
        color:     var(--cwd-muted);
        font-size: .95rem;
    }

    ul.tick-list {
        margin-bottom: 1.75rem;
    }

    .btn {
        margin-top: auto;
    }

    /* Recommended plan */

    &.price-card-featured {
        border:     2px solid var(--cwd-accent);
        box-shadow: var(--cwd-shadow-lg);
    }

    .price-badge {
        position:       absolute;
        top:            0;
        left:           50%;
        translate:      -50% -50%;
        padding:        .3rem .9rem;
        border-radius:  50rem;
        background:     var(--cwd-accent);
        color:          var(--cwd-ink);
        font-size:      .75rem;
        font-weight:    800;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space:    nowrap;
    }
}

/* Large icon illustration (used where there's no photo)
   Light mode borrows the page title band: warm peach with the faint grid. Dark mode stays deep ink. */
:root,
[data-bs-theme="light"] {
    --ill-bg:          var(--sh-bg);
    --ill-grid:        var(--sh-grid);
    --ill-border:      rgb(31 29 43 / .08);
    --ill-shadow:      var(--cwd-shadow);
    --ill-icon:        #F08C00;
    --ill-chip-bg:     rgb(255 255 255 / .7);
    --ill-chip-border: rgb(31 29 43 / .1);
    --ill-chip-text:   var(--cwd-ink);
    --ill-chip-icon:   var(--cwd-on-chip);
}

[data-bs-theme="dark"] {
    --ill-bg:          var(--cwd-ink);
    --ill-grid:        rgb(255 248 239 / .04);
    --ill-border:      rgb(255 248 239 / .06);
    --ill-shadow:      var(--cwd-shadow-lg);
    --ill-icon:        var(--cwd-accent);
    --ill-chip-bg:     rgb(255 248 239 / .08);
    --ill-chip-border: rgb(255 248 239 / .14);
    --ill-chip-text:   var(--cwd-cream);
    --ill-chip-icon:   var(--cwd-accent);
}

.icon-illustration {
    position:      relative;
    display:       grid;
    place-items:   center;
    aspect-ratio:  4 / 3;
    border:        1px solid var(--ill-border);
    border-radius: var(--cwd-radius-lg);
    background:    linear-gradient(var(--ill-grid) 1px, transparent 1px) 0 0 / 40px 40px,
                   linear-gradient(90deg, var(--ill-grid) 1px, transparent 1px) 0 0 / 40px 40px,
                   var(--ill-bg);
    color:         var(--ill-icon);
    box-shadow:    var(--ill-shadow);
    overflow:      hidden;

    > i {
        font-size: clamp(4rem, 9vw, 6.5rem);
    }

    .icon-illustration-chips {
        position:        absolute;
        inset:           auto 1.25rem 1.25rem 1.25rem;
        display:         flex;
        flex-wrap:       wrap;
        justify-content: center;
        gap:             .5rem;
    }

    .icon-illustration-chips span {
        display:       inline-flex;
        align-items:   center;
        gap:           .45rem;
        padding:       .35rem .8rem;
        border-radius: 50rem;
        background:    var(--ill-chip-bg);
        border:        1px solid var(--ill-chip-border);
        color:         var(--ill-chip-text);
        font-size:     .85rem;
        font-weight:   600;

        i {
            color: var(--ill-chip-icon);
        }
    }
}

/* Warning callout */
.callout-warning {
    display:       flex;
    gap:           1rem;
    align-items:   flex-start;
    padding:       1.25rem 1.5rem;
    border-radius: var(--cwd-radius-lg);
    background:    var(--bs-danger-bg-subtle);
    border:        1px solid var(--bs-danger-border-subtle);
    color:         var(--bs-danger-text-emphasis);

    > i {
        font-size:  1.4rem;
        margin-top: .15rem;
    }

    p {
        margin: 0;
    }
}

/* Illustration tile: soft tinted panel behind an SVG illustration */
.illustration-tile {
    display:       grid;
    place-items:   center;
    padding:       clamp(1.25rem, 3vw, 2rem);
    /*border-radius: var(--cwd-radius-lg);*/
    /*background:    radial-gradient(circle at 30% 20%, rgb(255 150 0 / .14), transparent 60%),*/
    /*               var(--cwd-tint);*/
    /*border:        1px solid var(--cwd-border);*/

    img {
        width:     100%;
        max-width: 320px;
        height:    auto;
    }
}

/* Content block: heading + text beside an illustration */
.content-block + .content-block {
    margin-top:  clamp(2.5rem, 5vw, 3.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top:  1px solid var(--cwd-border);
}

.content-block h2 {
    font-size:      clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight:    800;
    letter-spacing: -.02em;
    margin-bottom:  1rem;
}

.content-block h3 {
    font-size:  1.2rem;
    margin-top: 1.5rem;
}

/* Notice panel (e.g. "all website designers are not the same") */
.notice-panel {
    position:      relative;
    overflow:      hidden;
    margin-block:  2rem;
    padding:       1.75rem 1.75rem 1.75rem 2rem;
    border-radius: var(--cwd-radius-lg);
    background:    var(--cwd-ink);
    color:         color-mix(in srgb, var(--cwd-cream) 78%, transparent);
    box-shadow:    var(--cwd-shadow);

    &::before {
        content:    "";
        position:   absolute;
        inset:      0 auto 0 0;
        width:      6px;
        background: linear-gradient(180deg, var(--cwd-accent), var(--cwd-accent-soft));
    }

    .notice-eyebrow {
        display:        inline-flex;
        align-items:    center;
        gap:            .5rem;
        margin-bottom:  .6rem;
        color:          var(--cwd-accent);
        font-size:      .8rem;
        font-weight:    800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    h3 {
        color:         var(--cwd-cream);
        font-size:     1.3rem;
        margin-bottom: .6rem;
    }

    p:last-child {
        margin-bottom: 0;
    }

    a {
        color: var(--cwd-accent-soft);
    }
}

[data-bs-theme="dark"] .notice-panel {
    background: #24222F;
    border:     1px solid var(--cwd-border);
}

/* Section side navigation (sidebar) */
.side-nav {
    padding:       1.5rem;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    h2 {
        margin:         0 0 .6rem;
        font-size:      .78rem;
        font-weight:    800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color:          var(--cwd-link);
    }

    ul {
        list-style: none;
        margin:     0 0 1.5rem;
        padding:    0;

        &:last-child {
            margin-bottom: 0;
        }
    }

    a {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             .5rem;
        padding:         .45rem .75rem;
        margin-inline:   -.75rem;
        border-radius:   var(--cwd-radius-sm);
        color:           var(--cwd-text);
        font-weight:     500;
        text-decoration: none;
        transition:      background-color .15s ease, color .15s ease;

        &:hover {
            background: var(--cwd-tint);
            color:      var(--cwd-heading);
        }

        &[aria-current="page"],
        &[aria-current="location"] {
            background:  var(--cwd-chip);
            color:       var(--cwd-heading);
            font-weight: 700;
            box-shadow:  inset 3px 0 0 var(--cwd-accent);
        }
    }
}

.side-nav .side-nav-contact {
    margin-top:  1.25rem;
    padding-top: 1.25rem;
    border-top:  1px solid var(--cwd-border);
    font-size:   .95rem;

    a.link-arrow {
        display:     inline-flex;
        margin:      0;
        padding:     0;
        color:       var(--cwd-link);
        font-weight: 700;

        &:hover {
            background: none;
            color:      var(--cwd-heading);
        }
    }
}

@media (min-width: 992px) {
    .side-nav-sticky {
        position: sticky;
        top:      6.5rem;
    }
}

/* Numbered steps (e.g. payment stages) */
ol.steps {
    list-style:    none;
    margin:        1.5rem 0;
    padding:       0;
    counter-reset: step;

    > li {
        position:          relative;
        counter-increment: step;
        padding:           0 0 2rem 4rem;

        /* connecting line */

        &:not(:last-child)::after {
            content:    "";
            position:   absolute;
            left:       1.35rem;
            top:        3rem;
            bottom:     .25rem;
            width:      2px;
            background: var(--cwd-border);
        }

        &:last-child {
            padding-bottom: 0;
        }

        &::before {
            content:         counter(step);
            position:        absolute;
            left:            0;
            top:             0;
            width:           2.75rem;
            height:          2.75rem;
            display:         flex;
            align-items:     center;
            justify-content: center;
            border-radius:   50%;
            background:      var(--cwd-accent);
            color:           var(--cwd-ink);
            font-weight:     800;
            font-size:       1.1rem;
            box-shadow:      0 0 0 6px var(--cwd-chip);
        }

        h3 {
            display:     flex;
            flex-wrap:   wrap;
            align-items: center;
            gap:         .5rem .75rem;
            margin:      .45rem 0 .6rem;
            font-size:   1.2rem;
        }

        p:last-child {
            margin-bottom: 0;
        }
    }

    .step-tag {
        display:        inline-block;
        padding:        .2rem .7rem;
        border-radius:  50rem;
        background:     var(--cwd-ink);
        color:          var(--cwd-cream);
        font-size:      .8rem;
        font-weight:    700;
        letter-spacing: .02em;
    }
}

[data-bs-theme="dark"] ol.steps .step-tag {
    background: #3A3650;
}

/* Pull quote */
figure.pull-quote {
    margin:      1.75rem 0;
    padding:     .25rem 0 .25rem 1.5rem;
    border-left: 4px solid var(--cwd-accent);

    blockquote {
        margin:         0 0 .5rem;
        padding:        0;
        border:         0;
        background:     none;
        font-family:    var(--cwd-font-display), sans-serif;
        font-size:      clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
        font-weight:    700;
        line-height:    1.3;
        letter-spacing: -.01em;
        color:          var(--cwd-heading);
    }

    figcaption {
        color:     var(--cwd-muted);
        font-size: .9rem;

        &::before {
            content: "\2014\00a0";
        }
    }
}

/* Link list: icon + title + description rows */
.link-list {
    display:       grid;
    margin-bottom: 1rem;
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    background:    var(--cwd-card);
    overflow:      hidden;

    /* Rows can be links, or plain .link-list-item rows with no arrow */

    a,
    .link-list-item {
        display:         flex;
        align-items:     center;
        gap:             1rem;
        padding:         1rem 1.25rem;
        color:           var(--cwd-text);
        text-decoration: none;
        transition:      background-color .15s ease;

        & + a,
        & + .link-list-item {
            border-top: 1px solid var(--cwd-border);
        }

        > i {
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2.5rem;
            height:          2.5rem;
            border-radius:   .75rem;
            background:      var(--cwd-chip);
            color:           var(--cwd-on-chip);
        }

        strong {
            display: block;
            color:   var(--cwd-heading);
        }
    }

    a {

        > i {
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2.5rem;
            height:          2.5rem;
            border-radius:   .75rem;
            background:      var(--cwd-chip);
            color:           var(--cwd-on-chip);
        }

        strong {
            display: block;
            color:   var(--cwd-heading);
        }

        &::after {
            content:     "\f054";
            margin-left: auto;
            font-family: "Font Awesome 7 Free";
            font-weight: 900;
            font-size:   .8rem;
            color:       var(--cwd-muted);
            transition:  transform .2s ease, color .2s ease;
        }

        &:hover {
            background: var(--cwd-tint);
        }

        &:hover::after {
            color:     var(--cwd-link);
            transform: translateX(3px);
        }
    }
}

/* Domain extension chips */
.domain-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem;

    span {
        padding:       .25rem .7rem;
        border-radius: 50rem;
        background:    var(--cwd-chip);
        color:         var(--cwd-on-chip);
        font-family:   ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size:     .85rem;
        font-weight:   700;
    }
}

/* System status panel (status page, and alerts on the home page) */
.status-panel {
    display:       flex;
    align-items:   flex-start;
    gap:           1.25rem;
    padding:       1.5rem 1.75rem;
    border-radius: var(--cwd-radius-lg);
    border:        1px solid;
    box-shadow:    var(--cwd-shadow-sm);

    .status-icon {
        flex-shrink:     0;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        width:           3.25rem;
        height:          3.25rem;
        border-radius:   50%;
        font-size:       1.5rem;
    }

    h2 {
        font-size:   1.3rem;
        font-weight: 800;
        margin:      .3rem 0 .4rem;
        color:       inherit;
    }

    p {
        margin: 0;
    }

    &.status-ok {
        background:   var(--bs-success-bg-subtle);
        border-color: var(--bs-success-border-subtle);
        color:        var(--bs-success-text-emphasis);

        .status-icon {
            background: var(--bs-success);
            color:      #FFFFFF;
            box-shadow: 0 0 0 6px rgb(25 135 84 / .15);
        }
    }

    &.status-alert {
        background:   var(--bs-danger-bg-subtle);
        border-color: var(--bs-danger-border-subtle);
        color:        var(--bs-danger-text-emphasis);

        .status-icon {
            background: var(--bs-danger);
            color:      #FFFFFF;
            box-shadow: 0 0 0 6px rgb(220 53 69 / .15);
        }
    }
}

/* Site map */
.sitemap-group {
    height:        100%;
    padding:       1.5rem;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    h2 {
        display:       flex;
        align-items:   center;
        gap:           .6rem;
        font-size:     1.1rem;
        font-weight:   800;
        margin-bottom: 1rem;

        i {
            color: var(--cwd-accent);
        }
    }

    ul {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    li + li {
        margin-top: .35rem;
    }

    a {
        text-decoration: none;
        font-weight:     500;
    }

    a:hover {
        text-decoration: underline;
    }
}

/* Error pages */
.error-code {
    display:        inline-block;
    margin-bottom:  .75rem;
    padding:        .3rem .9rem;
    border-radius:  50rem;
    background:     var(--cwd-chip);
    color:          var(--cwd-on-chip);
    font-size:      .85rem;
    font-weight:    800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.error-actions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .75rem;
    margin-top: 1.75rem;
}

.error-illustration img { max-width: 380px; }

.error-links {
    margin-top:  clamp(2.5rem, 5vw, 3.5rem);
    padding-top: clamp(2rem, 4vw, 2.5rem);
    border-top:  1px solid var(--cwd-border);

    h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; }

    .link-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

        a + a { border-top: 0; }
        a     { border-top: 1px solid var(--cwd-border); }
    }
}

/* Website colours page */
.colour-jump {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             .5rem;
    margin-bottom:   clamp(2rem, 4vw, 3rem);

    a {
        display:         inline-flex;
        align-items:     center;
        gap:             .5rem;
        padding:         .4rem .9rem;
        border:          1px solid var(--cwd-border);
        border-radius:   50rem;
        background:      var(--cwd-card);
        color:           var(--cwd-heading);
        font-size:       .9rem;
        font-weight:     600;
        text-decoration: none;

        &:hover { border-color: var(--cwd-accent); }
    }

    span {
        width:         .9rem;
        height:        .9rem;
        border-radius: 50%;
        box-shadow:    inset 0 0 0 1px rgb(0 0 0 / .15);
    }
}

.colour-group {
    scroll-margin-top: 7rem;

    & + & { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

    h2 {
        display:        flex;
        align-items:    baseline;
        gap:            .75rem;
        margin-bottom:  1.25rem;
        font-size:      1.5rem;
        font-weight:    800;
        letter-spacing: -.02em;

        span { color: var(--cwd-muted); font-size: .9rem; font-weight: 500; letter-spacing: 0; }
    }
}

.colour-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap:                   1rem;
}

.colour-swatch {
    display:        flex;
    flex-direction: column;
    padding:        0;
    overflow:       hidden;
    text-align:     left;
    background:     var(--cwd-card);
    border:         1px solid var(--cwd-border);
    border-radius:  var(--cwd-radius);
    box-shadow:     var(--cwd-shadow-sm);
    cursor:         copy;
    transition:     box-shadow .2s ease, border-color .2s ease;

    &:hover { box-shadow: var(--cwd-shadow); border-color: var(--bs-primary-border-subtle); }

    .colour-swatch-chip {
        position:      relative;
        display:       grid;
        place-items:   center;
        height:        5.5rem;
        border-bottom: 1px solid rgb(0 0 0 / .08);
    }

    .colour-swatch-copied {
        opacity:     0;
        font-size:   .85rem;
        font-weight: 800;
        transition:  opacity .2s ease;
    }

    &.is-copied .colour-swatch-copied { opacity: 1; }

    .colour-swatch-info {
        display:        flex;
        flex-direction: column;
        gap:            .1rem;
        padding:        .75rem .85rem .85rem;
    }

    strong { color: var(--cwd-heading); font-size: .92rem; line-height: 1.25; }
    code   { color: var(--cwd-link); font-size: .85rem; font-weight: 700; }
    small  { color: var(--cwd-muted); font-size: .72rem; }
}

/* FAQ page */
.faq-search {
    position:  relative;
    max-width: 34rem;
    margin:    2rem auto 0;

    > i {
        position:       absolute;
        left:           1.15rem;
        top:            50%;
        translate:      0 -50%;
        color:          var(--cwd-muted);
        pointer-events: none;
    }

    .form-control {
        padding-left:  3rem;
        border-radius: 50rem;
        box-shadow:    var(--cwd-shadow-sm);
    }
}

.faq-card {
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    /* Bootstrap lets .card-body grow to fill the card; here it should only be as tall as its
       title, so the questions start straight underneath and any spare height falls below them */
    .card-body {
        flex:    0 0 auto;
        padding: 1.5rem 1.5rem .75rem;
    }

    .card-title {
        display:     flex;
        align-items: center;
        gap:         .6rem;
        font-size:   1.2rem;
        font-weight: 800;

        i {
            color: var(--cwd-accent);
        }
    }

    .card-subtitle {
        font-size:   .95rem;
        font-weight: 400;
    }

    .accordion {
        --bs-accordion-bg: transparent;
    }

    .accordion-button {
        font-size: .98rem;
    }

    .accordion-item:last-child {
        border-bottom: 0;
    }
}

/* Help articles: long-form guides beside the help sidebar */
.help-article {
    font-size: 1.02rem;

    /* The opening paragraph of each guide carries class="lead" */
    .lead {
        font-size:   1.15rem;
        font-weight: 400;
        line-height: 1.65;
        color:       var(--cwd-heading);
    }

    p, li {
        line-height: 1.75;
    }

    h2, h3 {
        margin:         2.75rem 0 1rem;
        padding-top:    2rem;
        border-top:     1px solid var(--cwd-border);
        font-size:      clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
        font-weight:    800;
        letter-spacing: -.02em;
    }

    h4 {
        margin:      2rem 0 .75rem;
        font-size:   1.15rem;
        font-weight: 700;
    }

    h5 {
        margin:      1.5rem 0 .5rem;
        font-size:   1.02rem;
        font-weight: 700;
    }

    /* Headings inside panels and cards don't need the section rule */

    :is(.row, .card, .alert) :is(h2, h3) {
        margin-top:  0;
        padding-top: 0;
        border-top:  0;
    }

    /* Screenshots and example images */

    img.img-fluid:not(.float-end):not(.float-start) {
        border:        1px solid var(--cwd-border);
        border-radius: var(--cwd-radius);
        box-shadow:    var(--cwd-shadow-sm);
        background:    #FFFFFF;
    }

    .alert {
        border-left-width: 4px;
        text-align:        left !important;
    }

    /* Highlighted panels written as .row.bg-light.border */

    .row.bg-light.border {
        margin-inline: 0;
        padding:       1.5rem !important;
        border-color:  var(--cwd-border) !important;
        border-radius: var(--cwd-radius-lg);
    }

    .fa-ul {
        margin-left: 2rem;

        .fa-check {
            color: var(--cwd-accent);
        }

        .fa-times, .fa-xmark {
            color: var(--cwd-muted);
        }
    }

    .card {
        box-shadow: var(--cwd-shadow-sm);
    }
}

/* Contact cards */
.contact-card {
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .35rem;
    padding:         2rem 1.5rem;
    text-align:      center;
    text-decoration: none;
    background:      var(--cwd-card);
    border:          1px solid var(--cwd-border);
    border-radius:   var(--cwd-radius-lg);
    box-shadow:      var(--cwd-shadow-sm);
    color:           var(--cwd-text);
    transition:      border-color .2s ease, box-shadow .2s ease;

    .feature-icon {
        margin-bottom: .75rem;
    }

    .contact-card-label {
        font-size:      .8rem;
        font-weight:    700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color:          var(--cwd-link);
    }

    strong {
        color:         var(--cwd-heading);
        font-size:     1.1rem;
        overflow-wrap: anywhere;
    }

    &:hover {
        border-color: var(--bs-primary-border-subtle);
        box-shadow:   var(--cwd-shadow);
        color:        var(--cwd-text);
    }
}

/* Opening hours */
dl.hours-list {
    margin: 0;

    > div {
        display:         flex;
        flex-wrap:       wrap;
        justify-content: space-between;
        gap:             .25rem 1rem;
        padding:         .7rem .9rem;
        margin-inline:   -.9rem;
        border-radius:   var(--cwd-radius-sm);

        & + div {
            border-top: 1px solid var(--cwd-border);
        }
    }

    dt {
        font-weight: 700;
        color:       var(--cwd-heading);
    }

    dd {
        margin:     0;
        text-align: right;
    }

    .is-closed dd {
        color: var(--cwd-muted);
    }

    .is-today {
        background:   var(--cwd-chip);
        border-color: transparent !important;

        dt::after {
            content:        "Today";
            margin-left:    .6rem;
            padding:        .1rem .55rem;
            border-radius:  50rem;
            background:     var(--cwd-accent);
            color:          var(--cwd-ink);
            font-size:      .7rem;
            font-weight:    800;
            letter-spacing: .06em;
            text-transform: uppercase;
            vertical-align: middle;
        }
    }

    .is-today + div {
        border-color: transparent;
    }
}

/* Owner card */
.owner-card {
    display:       flex;
    overflow:      hidden;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);

    > img {
        width:      40%;
        max-width:  220px;
        height:     auto;
        object-fit: cover;
    }

    .owner-card-body {
        padding: 1.75rem 1.5rem;

        p {
            color: var(--cwd-muted);
        }
    }
}

/* Map */
.map-frame {
    overflow:      hidden;
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow);
    line-height:   0;

    iframe {
        width:  100%;
        height: clamp(300px, 40vw, 440px);
        border: 0;
    }
}

/* Long-form legal text, with a generated table of contents */
.legal-prose {
    max-width: 48rem;
    font-size: 1rem;

    .legal-intro {
        padding:       1.5rem 1.75rem;
        margin-bottom: 2.5rem;
        background:    var(--cwd-tint);
        border:        1px solid var(--cwd-border);
        border-radius: var(--cwd-radius-lg);

        h2 {
            font-size:      1.6rem;
            font-weight:    800;
            letter-spacing: -.02em;
        }

        .lead {
            font-size: 1.05rem;
            color:     var(--cwd-text);
        }

        > :last-child {
            margin-bottom: 0;
        }
    }

    h2 {
        margin-top:     3rem;
        font-size:      1.6rem;
        font-weight:    800;
        letter-spacing: -.02em;
    }

    h4 {
        margin:            2.5rem 0 1rem;
        padding-top:       1.5rem;
        border-top:        1px solid var(--cwd-border);
        font-size:         1.05rem;
        font-weight:       800;
        letter-spacing:    .02em;
        color:             var(--cwd-heading);
        scroll-margin-top: 7rem;
    }

    h5 {
        margin-top:  1.5rem;
        font-size:   1rem;
        font-weight: 700;
    }

    p, li {
        line-height: 1.75;
    }

    span.item {
        font-weight: 700;
        color:       var(--cwd-heading);
    }

    p.indent {
        margin-left: 1.7em;
    }

    hr {
        margin-block: 3rem;
    }
}

#legal-toc {
    ol {
        list-style: none;
        margin:     0;
        padding:    0;
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }

    a {
        font-size: .9rem;
    }

    li.toc-group {
        margin-top: .75rem;
    }

    li.toc-group > span {
        display:        block;
        margin-bottom:  .25rem;
        color:          var(--cwd-muted);
        font-size:      .75rem;
        font-weight:    700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

/* Two-column tick list on wider screens */
@media (min-width: 768px) {
    ul.report-list {
        columns:    2;
        column-gap: 2rem;

        li {
            break-inside: avoid;
        }
    }
}

/* Screenshot of a report, framed with a caption */
figure.report-figure {
    margin: 0;

    img {
        display:       block;
        width:         100%;
        height:        auto;
        padding:       .5rem;
        background:    #FFFFFF;
        border:        1px solid var(--cwd-border);
        border-radius: var(--cwd-radius);
        box-shadow:    var(--cwd-shadow);
    }

    figcaption {
        margin-top: .6rem;
        text-align: center;
        color:      var(--cwd-muted);
        font-size:  .85rem;
    }
}

/* Stage tracker (e.g. the 4 stages of SEO) */
ol.stage-track {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   .5rem;
    list-style:            none;
    margin:                0 0 clamp(2rem, 4vw, 3rem);
    padding:               0;

    a {
        display:         flex;
        align-items:     center;
        gap:             .65rem;
        height:          100%;
        padding:         .7rem .8rem;
        border:          1px solid var(--cwd-border);
        border-radius:   var(--cwd-radius);
        background:      var(--cwd-card);
        color:           var(--cwd-muted);
        font-size:       .9rem;
        font-weight:     600;
        line-height:     1.25;
        text-decoration: none;
        transition:      border-color .2s ease;

        &:hover {
            border-color: var(--bs-primary-border-subtle);
            color:        var(--cwd-heading);
        }

        > i {
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2.1rem;
            height:          2.1rem;
            border-radius:   50%;
            background:      var(--cwd-tint);
            color:           var(--cwd-muted);
            font-size:       .85rem;
        }

        small {
            display:        block;
            font-size:      .68rem;
            font-weight:    800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
    }

    .is-done a > i {
        background: var(--cwd-chip);
        color:      var(--cwd-on-chip);
    }

    .is-current a {
        border:     2px solid var(--cwd-accent);
        color:      var(--cwd-heading);
        box-shadow: var(--cwd-shadow-sm);

        > i {
            background: var(--cwd-accent);
            color:      var(--cwd-ink);
        }

        small {
            color: var(--cwd-link);
        }
    }
}

@media (max-width: 767.98px) {
    ol.stage-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Previous / next page navigation */
.page-nav {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap:                   1rem;
    margin-top:            clamp(2.5rem, 5vw, 3.5rem);

    a {
        display:         flex;
        flex-direction:  column;
        gap:             .2rem;
        padding:         1.1rem 1.4rem;
        background:      var(--cwd-card);
        border:          1px solid var(--cwd-border);
        border-radius:   var(--cwd-radius-lg);
        box-shadow:      var(--cwd-shadow-sm);
        text-decoration: none;
        transition:      border-color .2s ease, box-shadow .2s ease;

        span {
            font-size:      .75rem;
            font-weight:    800;
            letter-spacing: .1em;
            text-transform: uppercase;
            color:          var(--cwd-link);
        }

        strong {
            color:     var(--cwd-heading);
            font-size: 1.05rem;
        }

        &:hover {
            border-color: var(--bs-primary-border-subtle);
            box-shadow:   var(--cwd-shadow);
        }
    }

    .page-nav-prev span::before {
        content: "\2190\00a0";
    }

    .page-nav-next {
        text-align: right;
    }

    .page-nav-next span::after {
        content: "\00a0\2192";
    }
}

/* About page slider sits inside an illustration tile */
.about-slider {
    display: block;

    img {
        max-width: 100%;
    }

    .flex-control-nav {
        position:   static;
        margin-top: .5rem;
    }

    .flex-control-paging li a {
        background: color-mix(in srgb, var(--cwd-ink) 25%, transparent);
        box-shadow: none;

        &.flex-active {
            background: var(--cwd-accent);
        }
    }
}

[data-bs-theme="dark"] .about-slider .flex-control-paging li a:not(.flex-active) {
    background: rgb(255 255 255 / .25);
}

/* Cross list (the opposite of a tick list) */
ul.cross-list {
    list-style:   none;
    padding-left: 0;

    li {
        position:      relative;
        padding-left:  2rem;
        margin-bottom: .6rem;
        color:         var(--cwd-muted);
    }

    li::before {
        content:         "\f00d";
        font-family:     "Font Awesome 7 Free", emoji;
        font-weight:     900;
        position:        absolute;
        left:            0;
        top:             .15em;
        width:           1.35rem;
        height:          1.35rem;
        display:         flex;
        align-items:     center;
        justify-content: center;
        border-radius:   50%;
        background:      color-mix(in srgb, var(--cwd-muted) 15%, transparent);
        color:           var(--cwd-muted);
        font-size:       .7rem;
    }
}

/* Embedded video */
.video-frame {
    overflow:      hidden;
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-lg);
    background:    var(--cwd-ink);

    iframe {
        border: 0;
    }
}

/* Tick list */
ul.tick-list {
    list-style:   none;
    padding-left: 0;

    li {
        position:      relative;
        padding-left:  2rem;
        margin-bottom: .6rem;
    }

    li::before {
        content:         "\f00c";
        font-family:     "Font Awesome 7 Free", emoji;
        font-weight:     900;
        position:        absolute;
        left:            0;
        top:             .15em;
        width:           1.35rem;
        height:          1.35rem;
        display:         flex;
        align-items:     center;
        justify-content: center;
        border-radius:   50%;
        background:      var(--cwd-chip);
        color:           var(--cwd-on-chip);
        font-size:       .7rem;
    }
}

/* Framed photo with an accent offset behind it */
.photo-frame {
    position:      relative;
    border-radius: var(--cwd-radius-lg);

    &::before {
        content:       "";
        position:      absolute;
        inset:         .75rem 0 -.75rem .75rem;
        z-index:       0;
        border-radius: inherit;
        background:    linear-gradient(135deg, var(--cwd-accent-soft), var(--cwd-surface));
        opacity:       .55;
    }

    img {
        position:      relative;
        z-index:       1;
        display:       block;
        width:         100%;
        height:        auto;
        border-radius: inherit;
        box-shadow:    var(--cwd-shadow-lg);
    }
}

/* Dark mode: a deep orange that fades into the page, rather than a pale peach block */
[data-bs-theme="dark"] .photo-frame::before {
    background: linear-gradient(135deg, rgb(255 150 0 / .42) 0%, rgb(255 169 77 / .14) 55%, rgb(255 150 0 / .03) 100%);
    border:     1px solid rgb(255 150 0 / .18);
    opacity:    1;
}

/* Hero (home page) */
.cwd-hero {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    background: var(--cwd-ink);
    color:      color-mix(in srgb, var(--cwd-cream) 78%, transparent);
    padding:    clamp(3.5rem, 7vw, 6rem) 0 clamp(7rem, 11vw, 9rem);

    /* Warm glows */

    &::before {
        content:    "";
        position:   absolute;
        inset:      0;
        z-index:    -2;
        background: radial-gradient(46rem 28rem at 88% 8%, rgb(255 150 0 / .09), transparent 70%),
                    radial-gradient(32rem 24rem at 0% 100%, rgb(255 169 77 / .05), transparent 72%);
    }

    /* Faint design grid, fading out towards the bottom */

    &::after {
        content:            "";
        position:           absolute;
        inset:              0;
        z-index:            -1;
        background-image:   linear-gradient(rgb(255 248 239 / .05) 1px, transparent 1px),
                            linear-gradient(90deg, rgb(255 248 239 / .05) 1px, transparent 1px);
        background-size:    48px 48px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
        mask-image:         linear-gradient(180deg, #000 0%, transparent 85%);
    }

    .hero-eyebrow {
        display:       inline-flex;
        align-items:   center;
        gap:           .55rem;
        padding:       .4rem .9rem;
        margin-bottom: 1.5rem;
        border:        1px solid rgb(255 150 0 / .35);
        border-radius: 50rem;
        background:    rgb(255 150 0 / .1);
        color:         var(--cwd-accent-soft);
        font-size:     .85rem;
        font-weight:   600;

        &::before {
            content:       "";
            width:         .5rem;
            height:        .5rem;
            border-radius: 50%;
            background:    var(--cwd-accent);
            box-shadow:    0 0 0 4px rgb(255 150 0 / .2);
        }
    }

    h1 {
        max-width:      17ch;
        margin-bottom:  1.25rem;
        color:          var(--cwd-cream);
        font-size:      clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem);
        font-weight:    800;
        line-height:    1.05;
        letter-spacing: -.035em;

        .text-accent {
            color:                   var(--cwd-accent);
            background:              linear-gradient(90deg, var(--cwd-accent), var(--cwd-accent-soft));
            -webkit-background-clip: text;
            background-clip:         text;
            -webkit-text-fill-color: transparent;
        }
    }

    .lead {
        max-width:   38rem;
        color:       inherit;
        font-size:   clamp(1.05rem, 1rem + .3vw, 1.25rem);
        font-weight: 400;
        line-height: 1.6;
    }

    .hero-actions {
        display:    flex;
        flex-wrap:  wrap;
        gap:        .75rem;
        margin-top: 2rem;
    }

    .btn-outline-light {
        --bs-btn-color:              var(--cwd-cream);
        --bs-btn-border-color:       rgb(255 248 239 / .35);
        --bs-btn-hover-color:        var(--cwd-ink);
        --bs-btn-hover-bg:           var(--cwd-cream);
        --bs-btn-hover-border-color: var(--cwd-cream);
    }

    .hero-visual {
        display:   block;
        width:     118%;
        max-width: none;
        height:    auto;
        margin:    -1rem -6% -2rem 0;
        filter:    drop-shadow(0 30px 40px rgb(0 0 0 / .45));
    }

    .hero-trust {
        display:               grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
        gap:                   1.25rem 1.5rem;
        margin:                3rem 0 0;
        padding:               1.75rem 0 0;
        list-style:            none;
        border-top:            1px solid rgb(255 248 239 / .12);

        li {
            display:     flex;
            align-items: center;
            gap:         .75rem;
            font-size:   .95rem;
        }

        strong {
            display:     block;
            color:       var(--cwd-cream);
            font-weight: 700;
        }

        i {
            flex-shrink:     0;
            display:         inline-flex;
            align-items:     center;
            justify-content: center;
            width:           2.5rem;
            height:          2.5rem;
            border-radius:   .75rem;
            background:      rgb(255 150 0 / .14);
            color:           var(--cwd-accent);
        }
    }
}

[data-bs-theme="dark"] .cwd-hero {
    background:    #1A1824;
    border-bottom: 1px solid var(--cwd-border);
}

/* Home: intro cards overlap the bottom of the hero */
.cwd-hero + #home-introduction {
    position:    relative;
    z-index:     1;
    background:  var(--cwd-bg) !important;
    padding-top: 0 !important;

    > .container {
        margin-top: clamp(-6rem, -8vw, -4rem);
    }
}

/* Testimonials */
blockquote.testimonial {
    position:      relative;
    margin:        0;
    padding:       2rem 2rem 1.5rem 2rem;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-left:   1px solid var(--cwd-border);
    border-radius: var(--cwd-radius-lg);
    box-shadow:    var(--cwd-shadow-sm);
    font-size:     1.05rem;
    line-height:   1.7;

    &::before {
        content:     "\201C";
        position:    absolute;
        top:         -.4rem;
        left:        1.25rem;
        font-family: Georgia, serif;
        font-size:   4.5rem;
        line-height: 1;
        color:       var(--cwd-accent);
    }

    p:first-child strong {
        color:     var(--cwd-heading);
        font-size: 1.1rem;
    }

    p:last-child {
        margin-bottom: 0;
    }
}

/* Single portfolio item: one large, faint opening quote mark set behind the text, top left */
.portfolio-id-testimonial blockquote.testimonial {
    isolation: isolate;     /* keeps the quote mark's z-index inside this card */
    overflow:  hidden;
    padding:   2.5rem 2.5rem 2rem 3rem;

    &::before {
        z-index:        -1;
        top:            .25rem;
        left:           .75rem;
        font-size:      28rem;
        line-height:    .8;     /* Georgia's quote mark sits high in its box, so tighten the line to keep it in view */
        color:          var(--cwd-accent);
        opacity:        .12;
        pointer-events: none;
    }
}
[data-bs-theme="dark"] .portfolio-id-testimonial blockquote.testimonial::before { opacity: .16; }

.row-testimonial {
    .testimonial-author {
        align-items:   center;
        margin-bottom: 1.25rem;

        h5 {
            margin-bottom: .1rem;
        }

        p {
            margin-bottom: 0;
            color:         var(--cwd-muted);
        }
    }

    .img-thumbnail {
        padding:       0;
        border-color:  var(--cwd-border);
        border-radius: var(--cwd-radius);
        background:    var(--cwd-card);
        box-shadow:    var(--cwd-shadow);
    }
}


/* 7. Plugins pages
   ========================================================================== */

.plugin-card {
    transition: box-shadow .2s ease, transform .25s var(--cwd-ease);

    .plugin-card-head {
        background:    var(--cwd-tint);
        border-bottom: 1px solid var(--cwd-border);
    }

    /* Keep the buttons clickable above a linked card's stretched link */

    .btn:not(.stretched-link) {
        position: relative;
        z-index:  2;
    }

    &.plugin-card-premium .plugin-card-head {
        background:          var(--cwd-chip);
        border-bottom-color: var(--bs-primary-border-subtle);
    }

    &.plugin-card-linked:hover {
        transform:  translateY(-4px);
        box-shadow: var(--cwd-shadow-lg) !important;
    }

    .card-img-top {
        height:        auto;
        aspect-ratio:  16 / 9;
        object-fit:    cover;
        border-bottom: 1px solid var(--cwd-border);
    }
}

/* Free vs Pro comparison table */
.plugin-compare {
    .plugin-compare-pro {
        background:   color-mix(in srgb, var(--cwd-accent) 8%, transparent);
        border-left:  2px solid var(--cwd-accent);
        border-right: 2px solid var(--cwd-accent);
    }

    thead .plugin-compare-pro {
        background:     var(--cwd-accent);
        color:          var(--cwd-ink);
        font-size:      1.1rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .plugin-compare-actions .plugin-compare-pro {
        border-bottom: 2px solid var(--cwd-accent);
    }

    .plugin-compare-group th {
        padding-top:    1rem;
        color:          var(--cwd-link);
        font-size:      .85rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .plugin-compare-pro-only td:first-child {
        font-weight: 600;
    }
}

ul.plugin-ticks {
    list-style:   none;
    padding-left: 0;

    li {
        display:       flex;
        align-items:   baseline;
        margin-bottom: .35rem;
    }

    li i {
        color:        var(--cwd-accent);
        margin-right: .6rem;
        flex-shrink:  0;
    }
}

.plugin-section-icon {
    color:        var(--cwd-accent);
    margin-right: .5rem;
}

.plugin-trust {
    .plugin-trust-item {
        display:     flex;
        align-items: center;
    }

    .plugin-trust-item i {
        color:       var(--cwd-accent);
        font-size:   1.6rem;
        width:       2.4rem;
        flex-shrink: 0;
    }
}

.plugin-hero {
    background:    linear-gradient(135deg, var(--cwd-chip) 0%, var(--cwd-bg) 75%);
    border-bottom: 1px solid var(--cwd-border);

    .plugin-eyebrow {
        font-size:      .85rem;
        font-weight:    700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color:          var(--cwd-link);
    }

    .plugin-price-card .plugin-price {
        font-size:   3rem;
        font-weight: 800;
        line-height: 1;
    }
}

.plugin-feature {
    height:        100%;
    padding:       1.5rem;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius);
    transition:    transform .2s ease, box-shadow .2s ease;

    &:hover {
        transform:  translateY(-3px);
        box-shadow: var(--cwd-shadow);
    }

    .plugin-feature-icon {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        width:           3.25rem;
        height:          3.25rem;
        margin-bottom:   1rem;
        border-radius:   var(--cwd-radius);
        background:      var(--cwd-chip);
        color:           var(--cwd-on-chip);
        font-size:       1.4rem;
    }

    .plugin-feature-head {
        display:       flex;
        align-items:   center;
        gap:           1rem;
        margin-bottom: 1rem;

        .plugin-feature-icon {
            flex-shrink:   0;
            margin-bottom: 0;
        }
    }
}

ol.plugin-steps {
    list-style:    none;
    padding-left:  0;
    counter-reset: plugin-step;

    li {
        position:          relative;
        counter-increment: plugin-step;
        padding-left:      3.25rem;
        margin-bottom:     1.25rem;
        min-height:        2.25rem;
    }

    li::before {
        content:         counter(plugin-step);
        position:        absolute;
        left:            0;
        top:             -.2rem;
        width:           2.25rem;
        height:          2.25rem;
        display:         flex;
        align-items:     center;
        justify-content: center;
        border-radius:   50%;
        background:      var(--cwd-accent);
        color:           var(--cwd-ink);
        font-weight:     700;
    }
}

.plugin-cta {
    background: radial-gradient(40rem 16rem at 100% 100%, rgb(255 150 0 / .08), transparent 65%),
                var(--cwd-ink);
    color:      var(--cwd-cream);

    h2 {
        color: var(--cwd-cream);
    }

    a:not(.btn) {
        color: var(--cwd-accent-soft);
    }
}

[data-bs-theme="dark"] .plugin-cta {
    background-color: #2A2839;
}

/* Screenshot collection on each plugin's page */
.plugin-screens {
    background:    var(--cwd-tint);
    border-top:    1px solid var(--cwd-border);
    border-bottom: 1px solid var(--cwd-border);
}

.plugin-screen-button {
    position:      relative;
    display:       block;
    width:         100%;
    padding:       0;
    overflow:      hidden;
    background:    var(--cwd-card);
    border:        1px solid var(--cwd-border);
    border-radius: var(--cwd-radius);
    box-shadow:    var(--cwd-shadow-sm);
    cursor:        zoom-in;
    transition:    box-shadow .2s ease;

    img {
        display:      block;
        width:        100%;
        height:       auto;
        aspect-ratio: 16 / 10;
        object-fit:   cover;
    }

    &:is(:hover, :focus-visible) {
        box-shadow: var(--cwd-shadow-lg);

        .plugin-screen-zoom {
            opacity: 1;
        }
    }

    &:focus-visible {
        outline:        3px solid var(--cwd-accent);
        outline-offset: 2px;
    }
}

.plugin-screen-zoom {
    position:        absolute;
    right:           .6rem;
    bottom:          .6rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.4rem;
    height:          2.4rem;
    border-radius:   50%;
    background:      rgb(31 29 43 / .7);
    color:           #FFFFFF;
    opacity:         0;
    transition:      opacity .2s ease;
}

/* Full-size screenshot viewer */
.plugin-lightbox {
    width:         min(1280px, 94vw);
    max-width:     none;
    padding:       0;
    overflow:      visible;
    border:        0;
    border-radius: var(--cwd-radius);
    background:    var(--cwd-ink);
    color:         var(--cwd-cream);

    &::backdrop {
        background: rgb(19 18 26 / .85);
    }

    img {
        display:       block;
        width:         100%;
        height:        auto;
        max-height:    80vh;
        object-fit:    contain;
        border-radius: var(--cwd-radius) var(--cwd-radius) 0 0;
    }

    .plugin-lightbox-caption {
        margin:  0;
        padding: .75rem 1rem;
    }

    :is(.plugin-lightbox-close, .plugin-lightbox-prev, .plugin-lightbox-next) {
        position:        absolute;
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           2.75rem;
        height:          2.75rem;
        border:          0;
        border-radius:   50%;
        background:      rgb(31 29 43 / .75);
        color:           #FFFFFF;
        font-size:       1.25rem;

        &:is(:hover, :focus-visible) {
            background: var(--cwd-accent);
            color:      var(--cwd-ink);
        }
    }

    .plugin-lightbox-close {
        top:   .6rem;
        right: .6rem;
    }

    .plugin-lightbox-prev {
        top:  calc(50% - 2.75rem);
        left: .6rem;
    }

    .plugin-lightbox-next {
        top:   calc(50% - 2.75rem);
        right: .6rem;
    }
}


/* 8. Theme switch (navbar)
   ========================================================================== */

.theme-toggle {
    padding:     0;
    border:      0;
    background:  none;
    line-height: 0;
    cursor:      pointer;
    flex-shrink: 0;

    &:focus {
        outline: none;
    }

    &:focus-visible .theme-toggle-track {
        outline:        3px solid rgb(255 150 0 / .5);
        outline-offset: 2px;
    }

    .theme-toggle-track {
        position:      relative;
        display:       block;
        width:         3.5rem;
        height:        1.75rem;
        border:        1px solid var(--cwd-accent-soft);
        border-radius: 2rem;
        background:    var(--cwd-surface);
        transition:    background-color .3s ease, border-color .3s ease;
    }

    /* The thumb slides under the icons, so the active icon always sits on it */

    .theme-toggle-thumb {
        position:      absolute;
        top:           2px;
        left:          2px;
        width:         calc(1.75rem - 6px);
        height:        calc(1.75rem - 6px);
        border-radius: 50%;
        background:    #FFFFFF;
        box-shadow:    0 1px 3px rgb(31 29 43 / .3);
        transition:    transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
    }

    :is(.theme-toggle-icon-sun, .theme-toggle-icon-moon) {
        position:    absolute;
        top:         2px;
        z-index:     1;
        width:       calc(1.75rem - 6px);
        font-size:   .8rem;
        line-height: calc(1.75rem - 6px);
        text-align:  center;
        transition:  color .3s ease, transform .3s ease;
    }

    .theme-toggle-icon-sun {
        left:  2px;
        color: #E07F00;
    }

    .theme-toggle-icon-moon {
        right: 2px;
        color: color-mix(in srgb, var(--cwd-ink) 45%, transparent);
    }

    &:hover .theme-toggle-thumb {
        box-shadow: 0 1px 6px rgb(31 29 43 / .4);
    }

    &:hover .theme-toggle-icon-sun {
        transform: rotate(45deg);
    }
}

[data-bs-theme="dark"] .theme-toggle {
    .theme-toggle-track {
        background:   #292738;
        border-color: var(--cwd-border);
    }

    .theme-toggle-thumb {
        /* track width - thumb width - both 2px gaps - both 1px borders */
        transform:  translateX(calc(3.5rem - (1.75rem - 6px) - 6px));
        background: var(--cwd-ink);
        box-shadow: 0 0 0 1px var(--cwd-accent-soft);
    }

    .theme-toggle-icon-sun {
        color:     #6D6879;
        transform: none;
    }

    .theme-toggle-icon-moon {
        color: var(--cwd-accent-soft);
    }

    &:hover .theme-toggle-icon-moon {
        transform: rotate(-20deg);
    }
}


/* 9. Responsive
   XS < 576 · SM ≥ 576 · MD ≥ 768 · LG ≥ 992 · XL ≥ 1200 · XXL ≥ 1400
   ========================================================================== */

#copyright {
    margin-bottom: 60px;
}

.icon-box-grid {
    grid-template-columns: 1fr;
}

.core-box .heading h3 {
    font-size: 1.2rem;
}

@media (min-width: 576px) {
    #copyright {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .icon-box-grid {
        grid-template-columns: repeat(3, minmax(10px, 1fr));
    }
}

@media (min-width: 1200px) {
    #primary-navbar {
        --bs-navbar-nav-link-padding-x: .7rem;
    }
}

@media (min-width: 992px) {
    .photo-frame::before {
        inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    }

    .core-box .heading h3 {
        font-size: calc(1.3rem + .6vw);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        left: 0;
    }
}

/* LG only - tighter menu so the logo keeps its size beside the theme switch */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left:  .35rem;
        padding-right: .35rem;
    }

    #primary-navbar .navbar-brand img {
        width: 210px;
    }

    #primary-navbar .navbar-nav > .nav-item > .nav-link {
        font-size: .875rem;
    }

    #home-portfolio a.portfolio-item:last-of-type {
        display: none;
    }
}

/* Mobile menu: give the collapsed menu a little breathing room */
@media (max-width: 991.98px) {
    #primary-navbar .navbar-collapse {
        max-height:    calc(100dvh - 5rem);
        overflow-y:    auto;
        padding-block: .5rem 1rem;
    }

    #primary-navbar .navbar-nav > .nav-item > .nav-link::before {
        display: none;
    }

    .megamenu .dropdown-menu > .container > .row {
        border-radius: var(--cwd-radius) !important;
        border-top:    1px solid var(--cwd-border);
        box-shadow:    none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation:  none !important;
    }
}


/* 10. External links
   Links to other websites (e.g. www.clarkehosting.co.uk) carry .link-external and open in a new tab.
   They show Font Awesome's "up right from square" icon in place of any arrow or chevron.
   Kept at the end of the file so it overrides the arrows on .link-arrow and .link-list rows.
   ========================================================================== */

a.link-external::after {
    content:         "\f08e";
    display:         inline-block;
    margin-left:     .4em;
    font-family:     "Font Awesome 7 Free";
    font-weight:     900;
    font-size:       .75em;
    opacity:         .75;
    text-decoration: none;
    transition:      transform .2s ease, opacity .2s ease;
}

a.link-external:hover::after {
    opacity:   1;
    transform: translate(2px, -2px);
}

/* Arrow links already have a gap between text and icon */
.link-arrow.link-external::after {
    margin-left: 0;
}

/* Link list rows keep the icon pinned to the right */
.link-list a.link-external::after {
    content:     "\f08e";
    margin-left: auto;
    font-size:   .8rem;
}