*, *::before, *::after {
    box-sizing: border-box;
}

::selection {
    background-color: #e8c46a;
    color: #222;
}

:root {

   /* =====================
      COLOURS
      ===================== */
   --color-primary:       #1a3d2b;   /* Deep green; Main brand colour */
   --color-primary-dark:  #0f2238;   /* Darker navy for hover states */
   --color-secondary:     #4e5a64;   /* Supporting colour */
   --color-accent:        #c9a84c;   /* Warm muted gold */
   --color-accent-hover:  #e8c46a;   /* Lighter gold for hover */

   --color-background:    #222;   /* Warm off-white; Main page background */
   --color-surface:       #f0ede8;   /* Slightly deeper warm grey; Cards, sections, slightly off-white areas */
   --color-surface-dark:  rgba(15, 25, 40, 0.88);  /* Dark overlay sections */
   --color-border:        #e0e0e0;   /* Lines, dividers, input borders */

   --color-text:          #222222;   /* Soft black body text */
   --color-text-muted:    #666666;
   --color-text-inverse:  #ffffff;
   --color-heading:       #e8c46a;   /* Headings in your primary colour */

   --color-navbar-bg:     #f0ede8;
   --color-footer-bg:     #f0ede8;


   /* =====================
      TYPOGRAPHY
      ===================== */
   --font-heading:        'Playfair Display', sans-serif;
   --font-body:           'Lato', serif;

   --font-size-small:     14px;
   --font-size-base:      16px;
   --font-size-medium:    20px;
   --font-size-large:     28px;
   --font-size-xlarge:    40px;
   --font-size-xxlarge:   64px;

   --font-weight-normal:  400;
   --font-weight-bold:    700;

   --line-height-base:    1.6;
   --line-height-heading: 1.2;


   /* =====================
      SPACING
      ===================== */
   --spacing-xs:          4px;
   --spacing-sm:          8px;
   --spacing-md:          16px;
   --spacing-lg:          32px;
   --spacing-xl:          64px;


   /* =====================
      LAYOUT
      ===================== */
   --container-max-width: 1100px;
   --container-padding:   20px;


   /* =====================
      BORDERS & RADIUS
      ===================== */
   --border-width:        1px;
   --border-style:        solid;

   --radius-sm:           4px;
   --radius-md:           8px;
   --radius-lg:           16px;
   --radius-pill:         999px;
   --radius-circle:       50%;


   /* =====================
      SHADOWS
      ===================== */
   --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.15);


   /* =====================
      TRANSITIONS
      ===================== */
   --transition-speed:    0.3s;
   --transition-ease:     ease-in-out;


   /* ================ EXTRAS ================ */


   /* =====================
      DARK MODE COLOURS
      ===================== */
   /* Pair with @media (prefers-color-scheme: dark) to override the above */
   --color-background-dark:   #1a1a1a;
   --color-surface-dark:      #2a2a2a;
   --color-text-dark:         #f0f0f0;


   /* =====================
      Z-INDEX SCALE
      ===================== */
   /* Keeps layering (what appears on top of what) organized */
   --z-base:              0;
   --z-dropdown:          100;
   --z-navbar:            200;
   --z-modal:             300;
   --z-tooltip:           400;


   /* =====================
      OPACITY
      ===================== */
   --opacity-disabled:    0.5;
   --opacity-hover:       0.85;


   /* =====================
      ANIMATION
      ===================== */
   --animation-speed-fast:   0.15s;
   --animation-speed-slow:   0.6s;


   /* =====================
      IMAGES & MEDIA
      ===================== */
   --image-border-radius: var(--radius-md);
   --image-shadow:        var(--shadow-md);

}

/* =====================
   BASE STYLES
   ===================== */

body {
   font-family: var(--font-body);
   font-size: var(--font-size-base);
   color: var(--color-text);
   background-color: var(--color-background);
   line-height: var(--line-height-base);
   display: flex;
   flex-direction: column;
   min-height: 100vh;

   background-image: url('/assets/images/main-background.jpg');
   background-size: cover;        
   background-position: center;   
   background-attachment: fixed;  
   background-repeat: no-repeat;
}

main {
    flex: 1;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);   
    z-index: -1;
}

h1, h2, h3, h4 {
   font-family: var(--font-heading);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-heading);
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

a {
   color: var(--color-primary);
}

.container {
   max-width: var(--container-max-width);
   padding: 0 var(--container-padding);
   margin: 0 auto;
}

/* SECTIONS */

.section {
   padding: var(--spacing-xl) 0;
}

.section-light {
   background-color: rgba(255, 255, 255, 0.92);
}

.section-dark {
   background-color: rgba(0, 0, 0, 0.82); 
   color: var(--color-text-inverse);
}

/* NAVBAR */

.navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);        
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-md) var(--container-padding);
}

.navbar-logo {
    font-family: var(--font-heading);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    text-decoration: none;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.navbar-logo-link {
    text-decoration: none;
    color: var(--color-accent);
}

.navbar-link {
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease);
}

.navbar-link:hover {
    color: var(--color-accent-hover);
}

.navbar-link.active {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

.navbar .navbar-cta {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease);
}

.navbar-cta:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Hamburger button */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: var(--radius-pill);
    transition: transform var(--transition-speed) var(--transition-ease),
                opacity var(--transition-speed) var(--transition-ease);
}

/* Hamburger animation when open */
.navbar-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggle.open span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Navbar responsive */
@media (max-width: 768px) {

    .navbar-toggle {
        display: flex;
    }

    .navbar-links {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        width: 100%;
        padding: var(--spacing-md) 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: var(--shadow-md);
    }

    .navbar-links.open {
        display: flex;
    }

    .navbar-inner {
        flex-wrap: wrap;
        position: relative;
    }

    .navbar-link {
        font-size: var(--font-size-medium);
        padding: var(--spacing-sm) 0;
        width: 100%;
        text-align: center;
    }

    .navbar .navbar-cta {
        margin: var(--spacing-sm) 0;
    }

}

/* FOOTER */

.footer {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    color: var(--color-text-inverse);
    padding: var(--spacing-lg) 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.footer-links {
    display: flex;
    gap: var(--spacing-md);
}

.footer-links a {
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-tagline {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(232, 196, 106, 0.8);
    font-style: italic;
    margin: 0;
}

.footer-copy {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--spacing-xs) 0;
}

.footer-hub-link {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin: var(--spacing-sm) 0 0 0;
}

.footer-hub-link a {
    color: var(--color-accent);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity var(--transition-speed) var(--transition-ease);
}

.footer-hub-link a:hover {
    opacity: 1;
}

/* BUTTONS */

.btn-primary {
   background-color: var(--color-primary);
   color: var(--color-text-inverse);
   transition: background-color var(--transition-speed) var(--transition-ease);
}

.btn-primary:hover {
   background-color: var(--color-accent);
   color: var(--color-primary);
}


/* =====================
    PAGES
    ===================== */
    

/* ========================
   HOME PAGE
   ======================== */


/* --- Hero --- */

.hero {
    padding: var(--spacing-xl) 0;
}

.hero-layout {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
}

.hero-photo {
    flex: 0 0 320px;
}

.hero-photo img {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--color-accent);
}

.hero-content {
    flex: 1;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxlarge);
    color: var(--color-text-inverse);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-md);
}

.hero-pitch {
    font-family: var(--font-body);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    font-style: italic;
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
}

.hero-intro {
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
    opacity: 0.92;
}

.hero-cta-label {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-md);
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
}


/* --- Stats Bar --- */

.stats-bar {    
    padding: var(--spacing-lg) 0;
    background-color: rgba(26, 61, 43, 0.80); 
    border-radius: var(--radius-lg);    
    margin: 0 auto;
    display: flex;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: var(--font-size-xlarge);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    color: var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    text-align: center;
}


/* --- Services Snapshot --- */

.services-snapshot {
    padding: var(--spacing-xl) 0;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xlarge);
    color: var(--color-text-inverse);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.snapshot-grid {
    display: flex;
    gap: var(--spacing-lg);
    align-items: stretch;
    margin-bottom: var(--spacing-lg);
}

.snapshot-card {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    border-top: 4px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-speed) var(--transition-ease),
                transform var(--transition-speed) var(--transition-ease);
}

.snapshot-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.snapshot-card-featured {
    border-top: 4px solid var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.snapshot-card-featured:hover {
    transform: translateY(-12px);
}

.snapshot-card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-medium);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-heading);
}

.snapshot-card-tagline {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    font-style: italic;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    line-height: var(--line-height-base);
}

.snapshot-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.snapshot-card-list li {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    line-height: var(--line-height-base);
}

.snapshot-card-list li:last-child {
    border-bottom: none;
}

.snapshot-card-list li::before {
    content: '●';
    color: var(--color-accent);
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 6px;
}

.snapshot-cta {
    text-align: center;
    margin-top: var(--spacing-lg);
}


/* --- Why Work With Me --- */

.why-me {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.why-me-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    text-align: left;
}

.why-me-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: var(--border-width) var(--border-style) rgba(255, 255, 255, 0.15);
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    opacity: 0.92;
}

.why-me-list li:last-child {
    border-bottom: none;
}

.why-me-icon {
    color: var(--color-accent);
    font-size: var(--font-size-medium);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ========================
   PRINCIPLES SECTION
   ======================== */

.principles {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.principles-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.principle-item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent);
    text-align: left;
    transition: background-color var(--transition-speed) var(--transition-ease);
}

.principle-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.principle-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.principle-divider {
    font-family: var(--font-body);
    color: var(--color-text-inverse);
    opacity: 0.40;
    flex-shrink: 0;
}

.principle-text {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    opacity: 0.90;
}


/* ========================
   PRINCIPLES — RESPONSIVE
   ======================== */

@media (max-width: 768px) {

    .principle-item {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
    }

    .principle-divider {
        display: none;
    }

}


/* --- Testimonials --- */

.testimonials {
    padding: var(--spacing-xl) 0;
}

.testimonials-grid {
    display: flex;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.testimonial-card {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    border-top: 4px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-quote {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-style: italic;
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
    flex: 1;
}

.testimonial-quote::before {
    content: '\201C'; /* Opening quotation mark */
    font-size: var(--font-size-xlarge);
    color: var(--color-accent);
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: var(--spacing-xs);
}

.testimonial-author {
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
}


/* --- Closing CTA --- */

.cta {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.cta-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-lg);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}


/* ========================
   HOME — RESPONSIVE
   ======================== */

@media (max-width: 1024px) {

    .hero-photo {
        flex: 0 0 300px;
    }

    .hero-photo img {
        height: 380px;
    }

    .snapshot-grid {
        gap: var(--spacing-md);
    }

}

@media (max-width: 768px) {

    .hero-layout {
        flex-direction: column;
        text-align: center;
    }

    .hero-photo {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero-photo img {
        height: 320px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .stats-grid {
        gap: var(--spacing-lg);
    }

    .stat-number {
        font-size: var(--font-size-large);
    }

    .snapshot-grid {
        flex-direction: column;
    }

    .snapshot-card-featured {
        transform: translateY(0);
    }

    .snapshot-card-featured:hover {
        transform: translateY(-4px);
    }

    .testimonials-grid {
        flex-direction: column;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-title {
        font-size: var(--font-size-xlarge);
    }

    .section-title {
        font-size: var(--font-size-large);
    }

    .cta-title {
        font-size: var(--font-size-large);
    }

}

@media (max-width: 480px) {

    .stats-grid {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .hero-title {
        font-size: var(--font-size-large);
    }

    .hero-pitch {
        font-size: var(--font-size-base);
    }

    .hero-intro {
        font-size: var(--font-size-base);
    }

    .why-me-list li {
        font-size: var(--font-size-base);
    }

}

/* ========================
   ABOUT PAGE
   ======================== */


/* --- Hero --- */

.about-hero {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.about-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-sm);
}

.about-intro {
    font-family: var(--font-body);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    font-style: italic;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
}


/* --- Sections --- */

.about-sections {
    padding: var(--spacing-xl) 0;
}


/* --- Each Row --- */

.about-row {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
    padding: var(--spacing-xl) 0;
    border-bottom: var(--border-width) var(--border-style) rgba(255, 255, 255, 0.15);    
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-accent);
    transition: background-color var(--transition-speed) var(--transition-ease);
    margin-bottom: var(--spacing-lg);
}

.about-row:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* --- Heading Column --- */

.about-row-heading {
    flex: 0 0 280px;
    padding-top: var(--spacing-xs);
}

.about-row-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xlarge);
    color: var(--color-accent);
    line-height: var(--line-height-heading);
    position: sticky;
    top: calc(70px + var(--spacing-lg));
}


/* --- Content Column --- */

.about-row-content {
    flex: 1;               
}

.about-row-content p {
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
    opacity: 0.92;
}

.about-row-content p:last-child {
    margin-bottom: var(--spacing-lg);
}


/* ========================
   ABOUT — RESPONSIVE
   ======================== */

@media (max-width: 768px) {

    .about-row {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg) 0;
    }

    .about-row-heading {
        flex: none;
        width: 100%;
        padding-top: 0;
    }

    .about-row-heading h2 {
        position: static;  
        font-size: var(--font-size-large);
    }

    .about-row-content p {
        font-size: var(--font-size-base);
    }

    .about-hero h1 {
        font-size: var(--font-size-xlarge);
    }

    .about-intro {
        font-size: var(--font-size-medium);
    }

}

@media (max-width: 480px) {

    .about-row-heading {
        flex: none;
        width: 100%;
    }

    .about-hero h1 {
        font-size: var(--font-size-large);
    }

}

/* ========================
   SERVICES PAGE
   ======================== */


/* --- Hero --- */

.services-hero {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.services-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-sm);
}

.services-intro {
    font-family: var(--font-body);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    font-style: italic;
    opacity: 0.95;
}


/* --- Service Cards Grid --- */

.services-cards {
    padding: var(--spacing-xl) 0;
}

.services-grid {
    display: flex;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.service-card {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border-top: 4px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-speed) var(--transition-ease),
                transform var(--transition-speed) var(--transition-ease);
}

.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);   
}

/* Featured card — the middle one */
.service-card-featured {
    border-top: 4px solid var(--color-accent);
    transform: translateY(-4px);  
    box-shadow: var(--shadow-lg);
}

.service-card-featured:hover {
    transform: translateY(-12px);
}

.service-card-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.service-card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-heading);
}

.service-card-tagline {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    font-style: italic;
    line-height: var(--line-height-base);
}

.service-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;          
}

.service-card-list li {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    line-height: var(--line-height-base);
}

.service-card-list li:last-child {
    border-bottom: none;
}

/* Gold dot before each list item */
.service-card-list li::before {
    content: '●';
    color: var(--color-accent);
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 6px;
}

/* --- Service Details --- */

.services-details .services-section-title {
    text-align: center;
    width: 100%;
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-xlarge);
}

.services-details {
    padding: var(--spacing-xl) 0;
}

.services-detail-row {
    display: flex;
    margin-bottom: var(--spacing-lg);
}

/* Left-nudged — aligns to the left two thirds of the container */
.services-detail-row--left {
    justify-content: flex-start;
}

/* Right-nudged — aligns to the right two thirds of the container */
.services-detail-row--right {
    justify-content: flex-end;
}

.services-detail-inner {
    width: 70%; /* Each block takes up 70% of the container width */
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-accent);
    transition: background-color var(--transition-speed) var(--transition-ease);
}

.services-detail-inner:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.services-detail-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-heading);
}

.services-detail-description {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    opacity: 0.92;
    margin-bottom: var(--spacing-sm);
}

.services-detail-description:last-child {
    margin-bottom: 0;
}


/* ========================
   SERVICE DETAILS — RESPONSIVE
   ======================== */

@media (max-width: 768px) {

    .services-detail-row--left,
    .services-detail-row--right {
        justify-content: center;
    }

    .services-detail-inner {
        width: 100%;
    }

    .services-detail-title {
        font-size: var(--font-size-medium);
    }

}

/* --- Materials Section --- */

.services-materials {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.services-section-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-lg);
}

.services-materials .services-section-title {
    margin-bottom: var(--spacing-lg);
}

.services-materials .principle-text a {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease);
}

.services-materials .principle-text a:hover {
    color: var(--color-accent-hover);
}


/* --- Tips Section --- */

.services-tips {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.services-tips-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 480px;
}

.services-tips-list li {
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) 0;
    opacity: 0.92;
    transition: color var(--transition-speed) var(--transition-ease);
}

.services-tips-list li:hover {
    color: var(--color-accent);
    opacity: 1;
}


/* --- CTA Section --- */

.services-cta {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.services-cta-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-lg);
}

.services-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-inverse);
    border: 2px solid var(--color-text-inverse);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease),
                border-color var(--transition-speed) var(--transition-ease);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    color: var(--color-primary);
    border-color: var(--color-text-inverse);
}


/* ========================
   SERVICES — RESPONSIVE
   ======================== */

@media (max-width: 1024px) {

    .services-grid {
        gap: var(--spacing-md);
    }

    .service-card-title {
        font-size: var(--font-size-medium);
    }

}

@media (max-width: 768px) {

    .services-grid {
        flex-direction: column;
    }

    .service-card-featured {
        transform: translateY(0);
    }

    .service-card-featured:hover {
        transform: translateY(-4px);
    }

    .services-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .services-cta-title {
        font-size: var(--font-size-large);
    }

    .services-hero h1 {
        font-size: var(--font-size-xlarge);
    }

    .services-intro {
        font-size: var(--font-size-medium);
    }

}

@media (max-width: 480px) {

    .services-tips-list li {
        font-size: var(--font-size-base);
    }

    .services-cta-title {
        font-size: var(--font-size-large);
    }

}

/* ========================
   FAQ
   ======================== */

.faq {
    padding: var(--spacing-xl) 0;    
}

.faq h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.faq-category {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-accent);
}

.faq-item {
    background-color: transparent;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    border: var(--border-width) var(--border-style) var(--color-border);
    transition: box-shadow var(--transition-speed) var(--transition-ease);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-item summary {
    list-style: none; /* Removes the default triangle arrow */
    cursor: pointer;
    padding: var(--spacing-md);
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    background-color: rgba(26, 61, 43, 0.75); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease);
}

/* Removes default arrow in Firefox */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Custom arrow icon using CSS */
.faq-item summary::after {
    content: '+';
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-normal);
    color: var(--color-accent);
    transition: transform var(--transition-speed) var(--transition-ease);
}

.faq-item:hover summary {
    background-color: var(--color-accent-hover);
    color: var(--color-text-inverse);
}

.faq-item:hover summary::after {
    color: var(--color-accent);
}

/* When the item is open */
.faq-item[open] summary {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Rotates the + into an x when open */
.faq-item[open] summary::after {
    content: '×';
    color: var(--color-accent);
}

.faq-item p {
    padding: var(--spacing-md);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    line-height: var(--line-height-base);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}

.faq-item a {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease);
}

.faq-item a:hover {
    color: var(--color-accent);
}

/* ========================
   FAQ — RESPONSIVE
   ======================== */

@media (max-width: 768px) {

    .faq h1 {
        font-size: var(--font-size-xlarge);
    }

    .faq-category {
        font-size: var(--font-size-medium);
        margin-top: var(--spacing-md);
    }

    .faq-item summary {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .faq-item p {
        font-size: var(--font-size-small);
    }

}

@media (max-width: 480px) {

    .faq h1 {
        font-size: var(--font-size-large);
    }

    .faq-category {
        font-size: var(--font-size-base);
    }

    .faq-item summary {
        font-size: var(--font-size-small);
    }

}


/* ========================
   CONTACT PAGE (VERSION B)
   ======================== */

.contact-b {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.contact-b h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxlarge);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-sm);
}

.contact-b-notice {
    font-family: var(--font-body);
    font-size: var(--font-size-medium);
    color: var(--color-accent);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-xl);
    opacity: 0.90;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.contact-b-content {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border-top: 4px solid var(--color-accent);
    max-width: 580px;
    margin: 0 auto;
    text-align: left;
}

.contact-b-content h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.contact-b-intro {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
    opacity: 0.92;
}

.contact-b-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.contact-b-list li {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    line-height: var(--line-height-base);
}

.contact-b-list li:last-child {
    border-bottom: none;
}

.contact-b-list li::before {
    content: '●';
    color: var(--color-accent);
    font-size: 10px;
    flex-shrink: 0;
}

.contact-b-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-medium);
}


/* ========================
   CONTACT B — RESPONSIVE
   ======================== */

@media (max-width: 768px) {

    .contact-b h1 {
        font-size: var(--font-size-xlarge);
    }

    .contact-b-notice {
        font-size: var(--font-size-medium);
    }

    .contact-b-content {
        padding: var(--spacing-lg);
    }

    .contact-b-content h2 {
        font-size: var(--font-size-large);
    }

}

@media (max-width: 480px) {

    .contact-b-content {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }

    .contact-b-btn {
        font-size: var(--font-size-base);
    }

}