/* ==========================================================================
   Saving Tech: shared styles
   --------------------------------------------------------------------------
   Loaded by every page, before that page's own <style> block.
   Anything defined here can be overridden by a page's own styles.

   Contents
     1. Design tokens
     2. Base
     3. Site header & navigation
     4. Buttons & links
     5. Shared components
     6. Site footer
     7. Responsive
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */

:root {
    --primary-green: #2E8B57;
    --primary-green-hover: #246B43;
    --primary-green-text: #287A4C;  /* green for text and for buttons with white text (WCAG AA) */
    --lime-accent: #D4F34A;
    --hero-blue: #2373A8;
    --dark-blue: #0B4A6F;
    --icon-blue: #1085C5;
    --dark-teal: #084C53;
    --dark-grey: #1F2937;
    --text-grey: #374151;
    --light-bg: #F3F4F6;
    --cream-bg: #fef3e2;
    --white: #FFFFFF;

    /* Windows: Segoe UI. Apple devices: San Francisco. Android: Roboto */
    --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* 2. Base
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

body {
    color: var(--dark-grey);
    line-height: 1.6;
    background-color: var(--white);
}

/* Images never spill out of their container */
img {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* Long words in headings wrap instead of pushing the page sideways */
h1,
h2,
h3,
h4 {
    overflow-wrap: break-word;
}

/* Icons sized with width/height attributes: give them rem sizes so they
   scale with everything else on large screens (page styles still win) */
:where(svg[width="16"][height="16"]) {
    width: 1rem;
    height: 1rem;
}

:where(svg[width="18"][height="18"]) {
    width: 1.125rem;
    height: 1.125rem;
}

:where(svg[width="20"][height="20"]) {
    width: 1.25rem;
    height: 1.25rem;
}

:where(svg[width="40"][height="40"]) {
    width: 2.5rem;
    height: 2.5rem;
}


/* Text that screen readers announce but that isn't shown on screen */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Skip to main content": the first link on every page, for keyboard users.
   It sits above the page out of sight until it has keyboard focus */
.skip-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    background-color: var(--dark-teal);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* A section reached by a link (page.html#section) stops below the sticky
   header instead of underneath it */
:target {
    scroll-margin-top: 7.5rem;
}


/* 3. Site header & navigation
   ========================================================================== */

.site-header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .nav-container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 6rem;
}

.site-header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header .logo img {
    display: block;
    height: 2.5rem;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav .nav-item {
    position: relative;
}

.site-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 0;
    color: var(--dark-grey);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

/* Small chevron after links that open a menu */
.site-nav .has-menu > .nav-link::after {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.site-nav .nav-item:hover > .nav-link,
.site-nav .nav-link:focus-visible {
    color: var(--primary-green-text);
}

.site-nav .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 16.25rem;
    padding: 1.5rem;
    background-color: var(--white);
    border-top: 3px solid var(--primary-green);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.site-nav .nav-item:hover > .nav-menu,
.site-nav .nav-item:focus-within > .nav-menu {
    display: block;
}

.site-nav .nav-menu a {
    display: block;
    padding: 0.5rem 0;
    color: #4B5563;
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}

.site-nav .nav-menu a:hover {
    color: var(--primary-green-text);
}

.site-nav .nav-cta {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 0.3125rem;
    background-color: var(--primary-green-text);
    color: var(--white);
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.site-nav .nav-cta:hover {
    background-color: var(--primary-green-hover);
}

/* Menu button: only shown on small screens (see section 7) */
.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.375rem;
    background: var(--white);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    margin: 0.3125rem 0;
    background-color: var(--dark-grey);
    transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
}


/* 4. Buttons & links
   ========================================================================== */

.btn-primary {
    background-color: var(--primary-green-text);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 0.3125rem;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #246B43;
}

.btn-secondary-outline {
    background-color: transparent;
    color: var(--dark-grey);
    font-weight: 700;
    padding: 0.85rem 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.btn-secondary-outline:hover {
    background-color: #f3f4f6;
}

a.inline-link {
    color: var(--hero-blue);
    text-decoration: underline;
}

a.inline-link:hover {
    color: #1a6291;
}


/* 5. Shared components
   ========================================================================== */

/* Page hero for pages without a hero photo: a green band with a white card.
   Every page that uses it gets the same size, layout and colours. */
.page-hero {
    display: flex;
    align-items: center;
    min-height: 46.5rem;
    padding: 4rem 2rem;
    background-color: var(--primary-green);
}

.page-hero-card {
    width: 100%;
    max-width: 40.625rem;
    margin-left: max(0rem, calc((100vw - 75rem) / 2));
    padding: 3rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.page-hero-card .breadcrumb {
    margin-bottom: 1rem;
    color: #4B5563;
    font-size: 0.9rem;
}

.page-hero-card a {
    color: var(--primary-green-text);
    text-decoration: underline;
}

.page-hero-card h1 {
    margin-bottom: 1rem;
    color: var(--dark-grey);
    font-size: clamp(1.75rem, 1.81vw + 1.343rem, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.page-hero-card p {
    margin-bottom: 1.5rem;
    color: var(--text-grey);
    font-size: 1.1rem;
}

.page-hero-card .hero-note {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 0.85rem;
}

.page-hero-card .btn-hero {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 0.25rem;
    background-color: var(--lime-accent);
    color: var(--dark-teal);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.page-hero-card .btn-hero:hover {
    background-color: #C3E239;
}

/* Optional extras for the page hero:
   - "page-hero-pattern" on the section adds a subtle circuit-board pattern
     over a green-to-dark-teal gradient
   - add "page-hero-pattern-hex" as well for a honeycomb pattern instead,
     or "page-hero-pattern-form" for forms, checklists and pens,
     or "page-hero-pattern-data" for data destruction (drives, shredders, locks),
     or "page-hero-pattern-hardware" for IT hardware (monitors, laptops, printers),
     or "page-hero-pattern-faq" for FAQs (question and answer bubbles, an FAQ sign),
     or "page-hero-pattern-cert" for certificates (certificate, diploma, seal, stamp),
     or "page-hero-pattern-security" for data security articles (articles, keys, fingerprints)
     or "page-hero-pattern-legal" for the legal pages (signed document, ID card,
     padlock, scales of justice, shield, checklist)
   - "btn-hero-green" on the button makes it primary green instead of lime */
.page-hero-pattern {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.13' stroke-width='1.5'%3E%3Cpath d='M0 30h28l14 14h24'/%3E%3Ccircle cx='69' cy='44' r='3'/%3E%3Cpath d='M120 30h-18l-12-12V0'/%3E%3Cpath d='M90 120v-16l-10-10H62'/%3E%3Ccircle cx='59' cy='94' r='3'/%3E%3Cpath d='M20 120V98l14-14h6'/%3E%3Ccircle cx='43' cy='84' r='3'/%3E%3Cpath d='M20 0v12'/%3E%3Ccircle cx='20' cy='15' r='3'/%3E%3Cpath d='M120 66h-22l-8 8v8'/%3E%3Ccircle cx='90' cy='85' r='3'/%3E%3Cpath d='M0 66h10'/%3E%3Ccircle cx='13' cy='66' r='3'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.22'%3E%3Ccircle cx='69' cy='44' r='1.5'/%3E%3Ccircle cx='43' cy='84' r='1.5'/%3E%3Ccircle cx='90' cy='85' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 10rem 10rem;
    background-image:
        var(--hero-pattern),
        radial-gradient(circle at 85% 15%, rgba(212, 243, 74, 0.18), transparent 40%),
        linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green) 40%, var(--dark-teal) 100%);
    background-size: var(--hero-pattern-size), auto, auto;
}

.page-hero-pattern-hex {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.2'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34'/%3E%3Cpath d='M28 0v34L0 50v34l28 16 28-16V50L28 34'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.35'%3E%3Ccircle cx='28' cy='34' r='1.6'/%3E%3Ccircle cx='0' cy='84' r='1.6'/%3E%3Ccircle cx='56' cy='84' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 4.375rem 7.8125rem;
}

.page-hero-pattern-form {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16h26l10 10v38H18z'/%3E%3Cpath d='M44 16v10h10'/%3E%3Cpath d='M25 34h20M25 42h22M25 50h14'/%3E%3Cpath d='M100 24h34v42h-34z'/%3E%3Cpath d='M110 20h14v8h-14z'/%3E%3Cpath d='M107 40h20M107 48h20M107 56h12'/%3E%3Cpath d='M20 98h9v9h-9zM20 116h9v9h-9z'/%3E%3Cpath d='M36 103h22M36 121h16'/%3E%3Cpath d='M98 142l4-11 34-34 7 7-34 34z'/%3E%3Cpath d='M131 102l7 7'/%3E%3Cpath d='M102 131l7 7'/%3E%3Cpath d='M62 146c6-8 10 4 15-3s8 4 13-2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4F34A' stroke-opacity='0.4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 102.5l2.5 2.5 4.5-5.5'/%3E%3Cpath d='M25 58l2.5 2.5 4.5-5.5'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-hardware {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='14' width='46' height='31' rx='2'/%3E%3Cpath d='M35 45v7M27 52h24'/%3E%3Crect x='106' y='18' width='38' height='25' rx='2'/%3E%3Cpath d='M100 47h50l-4 5h-42z'/%3E%3Cpath d='M28 112v-10h26v10'/%3E%3Crect x='20' y='112' width='42' height='20' rx='3'/%3E%3Cpath d='M28 128v14h26v-14'/%3E%3Cpath d='M33 135h16M33 139h10'/%3E%3Crect x='86' y='100' width='18' height='32' rx='3'/%3E%3Cpath d='M92 104h6'/%3E%3Crect x='130' y='98' width='24' height='42' rx='2'/%3E%3Cpath d='M135 106h14M135 112h14'/%3E%3Ccircle cx='142' cy='130' r='3'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.4'%3E%3Ccircle cx='57' cy='41' r='1.3'/%3E%3Ccircle cx='56' cy='117' r='1.5'/%3E%3Ccircle cx='95' cy='128' r='1.4'/%3E%3Ccircle cx='149' cy='120' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-faq {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14h34a7 7 0 0 1 7 7v20a7 7 0 0 1-7 7h-21l-10 9v-9h-3a7 7 0 0 1-7-7v-20a7 7 0 0 1 7-7z'/%3E%3Cpath d='M33.5 26a4.5 4.5 0 1 1 6.5 4c-1.6 0.8 -2 1.8 -2 3.5v1.5'/%3E%3Cpath d='M126.8 23.6a7.2 7.2 0 1 1 10.4 6.4c-2.56 1.28 -3.2 2.88 -3.2 5.6v2.4'/%3E%3Cpath d='M30 104L44 92L58 104'/%3E%3Crect x='16' y='104' width='56' height='26' rx='4'/%3E%3Cpath d='M25 124V110h9M25 117h7'/%3E%3Cpath d='M38 124l5-14 5 14M40 119h6'/%3E%3Cellipse cx='58' cy='117' rx='6' ry='7'/%3E%3Cpath d='M60 120l4 5'/%3E%3Cpath d='M107 100h42a7 7 0 0 1 7 7v18a7 7 0 0 1-7 7h-3v9l-10-9h-29a7 7 0 0 1-7-7v-18a7 7 0 0 1 7-7z'/%3E%3Cpath d='M110 110h36M110 116h36M110 122h24'/%3E%3Ccircle cx='92' cy='68' r='11'/%3E%3Cpath d='M92 67v8'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.4'%3E%3Ccircle cx='38' cy='38.5' r='1.2'/%3E%3Ccircle cx='134' cy='43.6' r='1.92'/%3E%3Ccircle cx='44' cy='90' r='1.5'/%3E%3Ccircle cx='92' cy='62.5' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-cert {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='14' width='64' height='46' rx='2'/%3E%3Crect x='16' y='18' width='56' height='38' rx='1'/%3E%3Cpath d='M30 26h28M23 33h42M23 39h28M23 50h16'/%3E%3Ccircle cx='62' cy='44' r='5'/%3E%3Cpath d='M59.5 48.5l-2 6.5M64.5 48.5l2 6.5'/%3E%3Crect x='106' y='24' width='54' height='13' rx='6.5'/%3E%3Cellipse cx='154' cy='30.5' rx='3' ry='6.5'/%3E%3Cpath d='M130 24v13M135 24v13M130 37l-4 9M135 37l4 9'/%3E%3Ccircle cx='92' cy='70' r='8'/%3E%3Cpath d='M88 77l-3 10 3.5-2 1.5 3.5 1.5-10M96 77l3 10-3.5-2-1.5 3.5-1.5-10'/%3E%3Ccircle cx='40' cy='118' r='16'/%3E%3Ccircle cx='40' cy='118' r='12' stroke-dasharray='2 3'/%3E%3Crect x='100' y='100' width='32' height='40' rx='2'/%3E%3Cpath d='M106 100v-6h32v40h-6'/%3E%3Cpath d='M106 110h20M106 117h20M106 124h13'/%3E%3Cpath d='M107 132l2.5 2.5 4.5-5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4F34A' stroke-opacity='0.4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 118l4.5 4.5 8-9'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.4'%3E%3Ccircle cx='62' cy='44' r='2.2'/%3E%3Ccircle cx='132.5' cy='37.5' r='1.5'/%3E%3Ccircle cx='92' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-security {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='12' width='46' height='54' rx='2'/%3E%3Cpath d='M20 19h26'/%3E%3Crect x='20' y='25' width='34' height='15' rx='1'/%3E%3Cpath d='M21 39l9-8 6 5 5-4 12 7'/%3E%3Cpath d='M20 47h34M20 53h34M20 59h22'/%3E%3Ccircle cx='120' cy='32' r='9'/%3E%3Cpath d='M129 32h28M151 32v7M145 32v5'/%3E%3Ccircle cx='84' cy='76' r='9'/%3E%3Cpath d='M90.5 82.5l8 8'/%3E%3Cpath d='M35.18 124.72A3 3.75 0 0 1 40.82 124.72M32.37 130.06A6.5 8.12 0 1 1 42.98 131.22M31.57 135.58A10 12.5 0 1 1 47.06 131.28M31.66 140.9A13.5 16.88 0 1 1 44.75 140.61M23.28 136.62A17 21.25 0 1 1 54.83 128.96'/%3E%3Crect x='108' y='104' width='46' height='30' rx='2'/%3E%3Cpath d='M102 138h58l-4 5h-50z'/%3E%3Crect x='115' y='115' width='32' height='8' rx='2'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.4'%3E%3Ccircle cx='47.5' cy='30' r='1.6'/%3E%3Ccircle cx='120' cy='32' r='2.2'/%3E%3Ccircle cx='121' cy='119' r='1.2'/%3E%3Ccircle cx='126' cy='119' r='1.2'/%3E%3Ccircle cx='131' cy='119' r='1.2'/%3E%3Ccircle cx='136' cy='119' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-data {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='14' width='38' height='50' rx='4'/%3E%3Ccircle cx='35' cy='34' r='12'/%3E%3Ccircle cx='35' cy='34' r='2.5'/%3E%3Cpath d='M48 58l-9-20'/%3E%3Ccircle cx='21' cy='59' r='1'/%3E%3Ccircle cx='49' cy='19' r='1'/%3E%3Cpath d='M104 30h44v14h-44z'/%3E%3Cpath d='M110 37h32'/%3E%3Cpath d='M114 30v-12h24v12'/%3E%3Cpath d='M110 48v14M116 48v20M122 48v11M128 48v18M134 48v13M140 48v16'/%3E%3Crect x='22' y='112' width='30' height='24' rx='3'/%3E%3Cpath d='M28 112v-7a9 9 0 0 1 18 0v7'/%3E%3Cpath d='M84 104v12M84 104l-3 3'/%3E%3Cellipse cx='94' cy='110' rx='3.5' ry='6'/%3E%3Cpath d='M104 104v12M104 104l-3 3'/%3E%3Cpath d='M114 104v12M114 104l-3 3'/%3E%3Cellipse cx='124' cy='110' rx='3.5' ry='6'/%3E%3Cpath d='M128 140l14-6 14 6v10c0 9-6 15-14 18-8-3-14-9-14-18z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4F34A' stroke-opacity='0.4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M136 151l4 4 8-9'/%3E%3Cpath d='M37 122v5'/%3E%3Ccircle cx='37' cy='121' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-pattern-legal {
    --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 12h30l10 10v42H14z'/%3E%3Cpath d='M44 12v10h10'/%3E%3Cpath d='M21 26h17M21 33h26M21 40h26M21 47h19'/%3E%3Crect x='68' y='20' width='40' height='26' rx='3'/%3E%3Ccircle cx='78' cy='30' r='4'/%3E%3Cpath d='M72 41a6 4.5 0 0 1 12 0'/%3E%3Cpath d='M90 28h12M90 34h12M90 40h8'/%3E%3Crect x='126' y='36' width='30' height='24' rx='3'/%3E%3Cpath d='M132 36v-7a9 9 0 0 1 18 0v7'/%3E%3Cpath d='M90 72v32M80 104h20M70 78h40'/%3E%3Cpath d='M70 78l-6 12M70 78l6 12M110 78l-6 12M110 78l6 12'/%3E%3Cpath d='M63 90h14a7 5 0 0 1-14 0zM103 90h14a7 5 0 0 1-14 0z'/%3E%3Cpath d='M38 108l16 6v12c0 11-7 18-16 22-9-4-16-11-16-22v-12z'/%3E%3Crect x='110' y='116' width='46' height='46' rx='3'/%3E%3Crect x='116' y='124' width='7' height='7' rx='1'/%3E%3Crect x='116' y='136' width='7' height='7' rx='1'/%3E%3Crect x='116' y='148' width='7' height='7' rx='1'/%3E%3Cpath d='M128 127.5h22M128 139.5h22M128 151.5h16'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4F34A' stroke-opacity='0.4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 57c2-4 4-4 5-1s3 3 5-1 4-3 5 0 3 2 7-1'/%3E%3Cpath d='M141 48.5v5'/%3E%3Cpath d='M31 128l5 5 9-10'/%3E%3Cpath d='M117.5 127.5l2 2 3.5-4M117.5 139.5l2 2 3.5-4'/%3E%3C/g%3E%3Cg fill='%23D4F34A' fill-opacity='0.4'%3E%3Ccircle cx='141' cy='46' r='2.4'/%3E%3Ccircle cx='90' cy='71' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
    --hero-pattern-size: 12rem 12rem;
}

.page-hero-card .btn-hero-green {
    background-color: var(--primary-green-text);
    color: var(--white);
}

.page-hero-card .btn-hero-green:hover {
    background-color: var(--primary-green-hover);
}

/* Legal pages (Privacy Notice, Terms and Conditions): an "at a glance" list
   in the page hero card, then the text with a list of its sections (beside
   it when the full menu shows, above it on smaller screens), numbered
   sections and a contact box at the end. */
.page-hero-card .legal-glance {
    margin: 0 0 1.5rem;
    list-style: none;
}

.page-hero-card .legal-glance li {
    position: relative;
    margin-bottom: 0.6rem;
    padding-left: 1.9rem;
    color: var(--text-grey);
}

.page-hero-card .legal-glance li::before {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--primary-green-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.legal-page {
    max-width: 75rem;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
}

.legal-layout {
    display: grid;
    gap: 2.5rem;
}

.legal-contents {
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--primary-green);
    border-radius: 0.5rem;
    background-color: var(--light-bg);
}

.legal-contents h2 {
    margin-bottom: 0.75rem;
    color: var(--dark-grey);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-contents ol {
    padding-left: 1.4rem;
    color: #4B5563;
    font-size: 0.95rem;
}

.legal-contents li {
    margin-bottom: 0.4rem;
    padding-left: 0.2rem;
}

.legal-contents a {
    color: var(--dark-grey);
    text-decoration: none;
}

.legal-contents a:hover {
    color: var(--primary-green-text);
    text-decoration: underline;
}

.legal-content {
    max-width: 50rem;
    color: var(--text-grey);
    font-size: 1.05rem;
    line-height: 1.75;
}

.legal-content section {
    scroll-margin-top: 7.5rem;
}

.legal-content section + section {
    margin-top: 2.75rem;
}

.legal-content h2 {
    margin-bottom: 1rem;
    color: var(--dark-grey);
    font-size: clamp(1.35rem, 0.72vw + 1.19rem, 1.65rem);
    font-weight: 800;
    line-height: 1.25;
}

.legal-content p,
.legal-content ul {
    margin-bottom: 1rem;
}

.legal-content ul {
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content li::marker {
    color: var(--primary-green-text);
}

.legal-content strong {
    color: var(--dark-grey);
}

.legal-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
}

.legal-details dt {
    color: var(--dark-grey);
    font-weight: 700;
}

.legal-table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.6;
}

.legal-table th,
.legal-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #E5E7EB;
    text-align: start;
    vertical-align: top;
}

.legal-table th {
    background-color: var(--dark-teal);
    color: var(--white);
    font-weight: 700;
}

.legal-content .legal-contact {
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--dark-teal);
    color: var(--white);
}

.legal-content .legal-contact h2 {
    color: var(--white);
}

.legal-content .legal-contact p {
    margin-bottom: 0.5rem;
}

.legal-content .legal-contact p:last-child {
    margin-bottom: 0;
}

.legal-content .legal-contact a {
    color: var(--lime-accent);
    font-weight: 700;
}

/* Link to the Privacy Notice under the email sign-up boxes (dark teal) */
a.privacy-link {
    color: var(--lime-accent);
    text-decoration: underline;
}

a.privacy-link:hover {
    color: var(--white);
}

.article-hero {
    background-color: var(--dark-teal);
    color: var(--white);
    padding: 3.5rem 2rem;
}

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

/* "Ready to book?" section with the ITAD process box.
   It is identical on every page that has it: the markup is the same and it
   is styled only here, so pages must not restyle it. It sits at the top level
   of the page (never inside a narrower content column), so it is always the
   same width. Its colours are pinned on the section, so a page that tweaks
   its own palette can't change the box. */
.book-cta {
    --dark-blue: #0B4A6F;
    --icon-blue: #1085C5;
    --hero-blue: #2373A8;
    --lime-accent: #D4F34A;
    --dark-grey: #1F2937;
    --white: #FFFFFF;
    max-width: 75rem;
    margin: 0 auto;
    padding: 3rem 2rem;
    color: var(--dark-grey);
    line-height: 1.6;
    letter-spacing: normal;
    text-align: start;
}

.book-cta,
.book-cta * {
    font-family: var(--font-body);
}

.book-cta .book-cta-title {
    font-size: clamp(1.5rem, 1.69vw + 1.12rem, 2.2rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--dark-grey);
    margin: 0 0 1.5rem;
}

.book-cta .cta-banner {
    background-color: var(--dark-blue);
    border-radius: 0.75rem;
    padding: 3.5rem 2rem;
    color: var(--white);
    margin: 0 0 3rem;
}

.book-cta .cta-banner h2 {
    font-size: clamp(1.5rem, 1.69vw + 1.12rem, 2.2rem);
    color: var(--lime-accent);
    margin: 0 0 0.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.book-cta .cta-banner .sub-heading {
    font-size: 1.15rem;
    color: #E2E8F0;
    margin: 0 0 2.5rem;
}

.book-cta .cta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 0 0 2.5rem;
}

.book-cta .cta-card {
    background-color: var(--white);
    color: var(--dark-grey);
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.book-cta .cta-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 0.85rem;
    color: var(--icon-blue);
}

.book-cta .cta-card h3 {
    color: var(--dark-grey);
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    font-weight: 700;
}

.book-cta .cta-card p {
    font-size: 0.88rem;
    color: #4B5563;
    line-height: 1.4;
    margin: 0;
}

.book-cta a.inline-link {
    color: var(--hero-blue);
    font-weight: inherit;
    text-decoration: underline;
}

.book-cta a.inline-link:hover {
    color: #1A6291;
}

.book-cta .cta-footer-text {
    font-size: 1.05rem;
    color: #E2E8F0;
    margin: 0 0 1.5rem;
}

.book-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.book-cta .cta-actions a {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 0.25rem;
    color: var(--dark-grey);
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.book-cta .cta-actions .btn-lime {
    background-color: var(--lime-accent);
    text-transform: uppercase;
}

.book-cta .cta-actions .btn-lime:hover {
    background-color: #C3E239;
    opacity: 1;
}

.book-cta .cta-actions .btn-phone {
    background-color: #E2E8F0;
}

.book-cta .cta-actions .btn-phone:hover {
    background-color: #CBD5E1;
}


/* WhatsApp share button: dark text, white on WhatsApp green is hard to read */
.share-bar a[data-share="whatsapp"],
.share-icons a[data-share="whatsapp"] {
    color: var(--dark-grey);
}

/* "Link copied" message from the share bar's copy-link button (js/main.js) */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 1000;
    transform: translateX(-50%);
    background-color: var(--lime-accent);
    color: var(--dark-grey);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.share-toast.is-visible {
    opacity: 1;
}


/* 6. Site footer
   ========================================================================== */

.site-footer {
    background-color: var(--dark-grey);
    color: var(--white);
    text-align: center;
    padding: 2rem;
}

.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin-bottom: 0.75rem;
}

.site-footer .footer-links a {
    color: var(--white);
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer .footer-links a:hover {
    color: var(--lime-accent);
}

/* Footer site map: Home at the top, the menu sections in a row below it
   joined by lines (wide screens), and each section's pages under it */
.site-footer .footer-sitemap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 75rem;
    margin: 0 auto 1.75rem;
    padding: 1.5rem 0 2.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-sitemap ul {
    list-style: none;
}

.footer-sitemap .sitemap-home {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--lime-accent);
    border-radius: 999px;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.footer-sitemap .sitemap-home-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--lime-accent);
}

.footer-sitemap .sitemap-home:hover,
.footer-sitemap .sitemap-home[aria-current="page"] {
    background-color: var(--lime-accent);
    color: var(--dark-teal);
}

.footer-sitemap .sitemap-home:hover .sitemap-home-icon,
.footer-sitemap .sitemap-home[aria-current="page"] .sitemap-home-icon {
    color: var(--dark-teal);
}

.footer-sitemap .sitemap-branches {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.25rem 1.5rem;
    align-self: stretch;
    margin-top: 2rem;
}

.footer-sitemap .sitemap-branch {
    position: relative;
    flex: 0 1 13rem;
    text-align: center;
}

.footer-sitemap .sitemap-node {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background-color: var(--dark-grey);
    color: var(--lime-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.footer-sitemap .sitemap-node:hover,
.footer-sitemap .sitemap-node[aria-current="page"] {
    border-color: var(--lime-accent);
    background-color: rgba(212, 243, 74, 0.12);
}

.footer-sitemap .sitemap-branch-book .sitemap-node {
    border-color: var(--lime-accent);
    background-color: var(--lime-accent);
    color: var(--dark-teal);
}

.footer-sitemap .sitemap-branch-book .sitemap-node:hover {
    background-color: #C3E239;
}

.footer-sitemap .sitemap-pages {
    margin-top: 1rem;
}

.footer-sitemap .sitemap-pages li {
    margin-bottom: 0.55rem;
    line-height: 1.4;
}

.footer-sitemap .sitemap-pages a {
    color: #D1D5DB;
    font-size: 0.92rem;
    text-decoration: none;
}

.footer-sitemap .sitemap-pages a:hover {
    color: var(--white);
    text-decoration: underline;
}

.footer-sitemap .sitemap-call {
    color: #9CA3AF;
    font-size: 0.92rem;
    line-height: 1.7;
}

.footer-sitemap .sitemap-pages .sitemap-call a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.footer-sitemap .sitemap-pages a[aria-current="page"] {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--lime-accent);
    text-underline-offset: 0.25em;
}


/* 7. Responsive
   ========================================================================== */

/* Navigation collapses into a menu button below 1080px */
@media (max-width: 1080px) {
    .site-header .nav-container {
        flex-wrap: wrap;
        min-height: 4.5rem;
        padding: 0.75rem 1.25rem;
    }

    .nav-toggle {
        display: block;
    }

    .site-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
        padding: 0.5rem 0 1rem;
        border-top: 1px solid #E5E7EB;
        margin-top: 0.75rem;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav .nav-link {
        padding: 0.75rem 0;
    }

    .site-nav .has-menu > .nav-link::after {
        display: none;
    }

    /* Sub-menus are always listed underneath their heading on small screens */
    .site-nav .nav-menu {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 0.5rem 1rem;
        border-top: none;
        border-radius: 0;
        box-shadow: none;
    }

    .site-nav .nav-cta {
        margin-top: 0.75rem;
        text-align: center;
    }
}

/* Shared components on smaller screens */
@media (max-width: 1200px) {
    .book-cta .cta-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .book-cta .cta-grid {
        grid-template-columns: 1fr;
    }

    .book-cta .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 8. Screen sizes
   ==========================================================================
   Phones and tablets: see the rules above and each page's "Phones" block.
   Large screens: every size on the site is in rem, so raising the root font
   size scales the whole layout up evenly, like zooming in. */

/* Page hero: height follows the content on tablets and phones */
@media (max-width: 768px) {
    .page-hero {
        min-height: 0;
    }
}

/* Legal pages: the list of sections sits beside the text, and stays in view
   while you scroll, when the full menu shows */
@media (min-width: 1081px) {
    .legal-layout {
        grid-template-columns: 16.25rem minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }

    .legal-contents {
        position: sticky;
        top: 7.5rem;
    }
}

/* Footer site map: one row of sections joined to Home by lines when the full
   menu shows */
@media (min-width: 1081px) {
    .footer-sitemap .sitemap-home::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 2rem;
        background-color: rgba(255, 255, 255, 0.25);
    }

    .footer-sitemap .sitemap-branches {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0 1rem;
        padding-top: 1.75rem;
    }

    /* the line across, from the middle of the first section to the middle of the last */
    .footer-sitemap .sitemap-branches::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(10% - 0.4rem);
        right: calc(10% - 0.4rem);
        height: 1px;
        background-color: rgba(255, 255, 255, 0.25);
    }

    /* the drop from that line to each section */
    .footer-sitemap .sitemap-branch::before {
        content: "";
        position: absolute;
        top: -1.75rem;
        left: 50%;
        width: 1px;
        height: 1.75rem;
        background-color: rgba(255, 255, 255, 0.25);
    }
}

/* Tablets: two process cards per row */
@media (min-width: 481px) and (max-width: 768px) {
    .book-cta .cta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phones */
@media (max-width: 600px) {
    .page-hero {
        padding: 2.5rem 1rem;
    }

    .page-hero-card {
        padding: 2rem 1.25rem;
    }

    .legal-page {
        padding: 2.5rem 1rem 3.5rem;
    }

    .legal-contents {
        padding: 1.25rem 1.25rem;
    }

    .legal-content {
        font-size: 1rem;
    }

    .legal-details {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 1rem 1.25rem;
    }

    .legal-details dd {
        margin-bottom: 0.6rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 0.7rem 0.75rem;
    }

    .legal-content .legal-contact {
        padding: 1.5rem 1.25rem;
    }

    .book-cta {
        padding: 2rem 1rem;
    }

    .book-cta .cta-banner {
        padding: 2.25rem 1.25rem;
    }

    .book-cta .cta-actions .btn-lime {
        padding: 0.85rem 1rem;
    }

    .site-footer {
        padding: 1.5rem 1rem;
    }

    .site-footer .footer-sitemap {
        padding: 1rem 0 2.25rem;
    }

    .footer-sitemap .sitemap-branches {
        gap: 1.75rem 1rem;
        margin-top: 1.75rem;
    }

    .footer-sitemap .sitemap-branch {
        flex-basis: 9.5rem;
    }

    .footer-sitemap .sitemap-node {
        padding: 0.45rem 0.75rem;
        font-size: 0.72rem;
        letter-spacing: 0.03em;
    }

    .footer-sitemap .sitemap-pages a {
        font-size: 0.88rem;
    }
}

/* Large, high-resolution screens (1440p, ultrawide, 4K).
   Up to 1920px wide nothing changes. Beyond that the layout grows with the
   screen (limited by its height, so ultrawide screens don't get oversized
   text) up to exactly double size on a 4K screen. */
@media (min-width: 1921px) {
    html {
        font-size: clamp(100%, min(0.8333vw, 1.6vh), 200%);
    }

    /* Form controls don't inherit the text size, so keep them in proportion */
    :where(button, input, select, textarea) {
        font-size: 0.8333rem;
    }

    :where(input[type="checkbox"], input[type="radio"]) {
        width: 0.8125rem;
        height: 0.8125rem;
    }
}