/* ============================================================
   DissertationTutors.com — The Scholar's Editorial v6.0
   Design Concept: High-end academic editorial
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   Palette: Warm ivory · Deep charcoal · Amber-orange accent
   ============================================================ */


/* ────────────────────────────────────────
   CSS VARIABLES
   ──────────────────────────────────────── */
:root {
    /* Core palette */
    --col-ivory:       #FAF8F5;
    --col-cream:       #F5F1EC;
    --col-cream-mid:   #EDE7DE;
    --col-white:       #FFFFFF;
    --col-ink:         #1C1A18;
    --col-ink-mid:     #3D3A35;
    --col-ink-light:   #6B6660;
    --col-muted:       #9A948C;
    --col-border:      #E8E2D9;
    --col-border-warm: #DDD5C8;

    /* Accent */
    --col-accent:      #E05A20;
    --col-accent-dark: #C44D18;
    --col-accent-pale: #FBF0EA;
    --col-accent-tint: #F5DDD0;

    /* Spacing */
    --space-section: 40px;
    --space-section-sm: 30px;

    /* Radii */
    --r-sm:  6px;
    --r-md:  12px;
    --r-lg:  20px;
    --r-xl:  32px;

    /* Shadows */
    --shadow-card:  0 4px 24px rgba(28, 26, 24, 0.07);
    --shadow-lift:  0 12px 40px rgba(28, 26, 24, 0.10);
    --shadow-float: 0 24px 64px rgba(28, 26, 24, 0.12);

    /* Transition */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.3s var(--ease);
}

/* ────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ────────────────────────────────────────
   RESET & BASE
   ──────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background: var(--col-ivory);
    color: var(--col-ink-mid);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; cursor: pointer; }
abbr { text-decoration: none; color: var(--col-accent); }

/* ────────────────────────────────────────
   SCROLL-REVEAL BASE STATES
   ──────────────────────────────────────── */
/*.sr-fade-up {*/
/*    opacity: 0;*/
/*    transform: translateY(32px);*/
/*    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),*/
/*                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);*/
/*}*/

/*.sr-fade-left {*/
/*    opacity: 0;*/
/*    transform: translateX(-40px);*/
/*    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),*/
/*                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);*/
/*}*/

/*.sr-fade-right {*/
/*    opacity: 0;*/
/*    transform: translateX(40px);*/
/*    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),*/
/*                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);*/
/*}*/

/*.sr-scale {*/
/*    opacity: 0;*/
/*    transform: scale(0.92);*/
/*    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),*/
/*                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);*/
/*}*/

/* Revealed state */
/*.sr-fade-up.sr-visible,*/
/*.sr-fade-left.sr-visible,*/
/*.sr-fade-right.sr-visible,*/
/*.sr-scale.sr-visible {*/
/*    opacity: 1;*/
/*    transform: none;*/
/*}*/

/* Stagger delays */
/*.sr-delay-1 { transition-delay: 0.10s; }*/
/*.sr-delay-2 { transition-delay: 0.18s; }*/
/*.sr-delay-3 { transition-delay: 0.26s; }*/
/*.sr-delay-4 { transition-delay: 0.34s; }*/
/*.sr-delay-5 { transition-delay: 0.42s; }*/
/*.sr-delay-6 { transition-delay: 0.50s; }*/

/* ────────────────────────────────────────
   TYPOGRAPHY HELPERS
   ──────────────────────────────────────── */
.dt-about__overline {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--col-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    animation: overline-reveal 0.8s ease-out 0.4s both;
}

.dt-about__overline::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 1.5px;
    background: var(--col-accent);
    flex-shrink: 0;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.sr-visible .dt-about__overline::before,
.dt-about__overline.sr-visible::before {
    width: 28px;
}

/*@keyframes overline-reveal {*/
/*    from { opacity: 0; }*/
/*    to   { opacity: 1; }*/
/*}*/

/* Section heading em — animated underline on scroll */
.dt-hero__headline-em,
.dt-about__headline em,
.dt-services__headline em,
.dt-hiw__headline em,
.dt-why__headline em,
.dt-expertise__headline em,
.dt-testi__headline em,
.dt-contact__headline em {
    display: inline-block;
    position: relative;
}

.dt-about__headline em::after,
.dt-services__headline em::after,
.dt-why__headline em::after,
.dt-testi__headline em::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--col-accent);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.sr-visible .dt-about__headline em::after,
.sr-visible .dt-services__headline em::after,
.sr-visible .dt-why__headline em::after,
.sr-visible .dt-testi__headline em::after {
    width: 100%;
}

/* ────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────── */
.dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    transition: var(--t);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.dt-btn--solid {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
    display: inline-flex;
    position: relative;
    overflow: hidden;
}

.dt-btn--solid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
    transition: left 0.55s ease;
    pointer-events: none;
}

.dt-btn--solid:hover::before {
    left: 140%;
}

.dt-btn--solid:hover {
    background: var(--col-accent-dark);
    border-color: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(224, 90, 32, 0.30);
}

.dt-btn--solid:active {
    transform: translateY(0);
}

/* Ripple */
.dt-btn--solid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.dt-btn--solid:active::after {
    width: 200px;
    height: 200px;
}

.dt-btn--ghost {
    background: transparent;
    background-image: linear-gradient(var(--col-accent-pale), var(--col-accent-pale));
    background-size: 0 100%;
    background-repeat: no-repeat;
    color: var(--col-ink);
    border-color: var(--col-border-warm);
    transition: background-size 0.35s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.dt-btn--ghost:hover {
    background-size: 100% 100%;
    border-color: var(--col-accent);
    color: var(--col-accent);
}

.dt-btn--full { width: 100%; justify-content: center; }

.dt-btn--lg {
    padding: 15px 36px;
    font-size: 0.95rem;
}

.dt-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--col-accent);
    transition: gap 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
    margin-top: 24px;
}

.dt-link-arrow svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-link-arrow:hover {
    gap: 14px;
}

.dt-link-arrow:hover svg {
    transform: translateX(5px);
}

/* ────────────────────────────────────────
   TOP BAR
   ──────────────────────────────────────── */
.site-topbar {
    background: var(--col-ink);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 9px 0;
    animation: topbar-in 0.5s ease-out both;
}

/*@keyframes topbar-in {*/
/*    from { opacity: 0; transform: translateY(-100%); }*/
/*    to   { opacity: 1; transform: translateY(0); }*/
/*}*/

.topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.topbar-left span,
.topbar-right a {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.48);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: var(--t);
}

.topbar-right a:hover { color: var(--col-accent); }

.topbar-divider {
    color: rgba(255,255,255,0.15) !important;
    font-size: 0.75rem;
}

/* ────────────────────────────────────────
   NAVBAR
   ──────────────────────────────────────── */
.site-navbar {
    background: var(--col-white);
    border-bottom: 1px solid var(--col-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(28, 26, 24, 0.05);
    transition: box-shadow 0.4s ease, background 0.4s ease;
}

.site-navbar.scrolled {
    box-shadow: 0 4px 28px rgba(28, 26, 24, 0.10);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    max-width: 1320px;
    margin: 0 auto;
    height: 70px;
}

.navbar-logo img { height: 42px; width: auto; }

.navbar-inner nav { flex: 1; display: flex; justify-content: center; }

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--col-ink-mid);
    padding: 8px 16px;
    border-radius: var(--r-sm);
    transition: color 0.25s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 16px;
    width: 0;
    height: 1.5px;
    background: var(--col-accent);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    opacity: 0;
}

.nav-link:hover, .nav-link.active {
    color: var(--col-accent);
}

.nav-link:hover::after, .nav-link.active::after {
    width: calc(100% - 32px);
    opacity: 1;
}

/* Desktop CTA in navbar */
.cta-primary-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--col-accent);
    color: var(--col-white);
    font-family: var(--font-body);
    font-size: 0.825rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1.5px solid var(--col-accent);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 16px;
    position: relative;
    overflow: hidden;
    transition: var(--t);
}

.cta-primary-btn-sm::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
    transition: left 0.55s ease;
    pointer-events: none;
}

.cta-primary-btn-sm:hover::before {
    left: 140%;
}

.cta-primary-btn-sm:hover {
    background: var(--col-accent-dark);
    border-color: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 90, 32, 0.28);
}

/* Dropdown */
.nav-item-dropdown { position: relative; }

.nav-link-dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-chevron { font-size: 0.58rem; transition: var(--t); }
.nav-item-dropdown:hover .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    min-width: 240px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transform-origin: top center;
    transition: opacity 0.28s ease,
                visibility 0.28s ease,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 200;
}

.nav-item-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--col-ink-mid);
    border-radius: var(--r-sm);
    transition: var(--t);
    position: relative;
    overflow: hidden;
}

/* Dropdown item left-border indicator */
.nav-dropdown li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--col-accent);
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 2px;
}

.nav-dropdown li a:hover::before {
    transform: scaleY(1);
}

.nav-dropdown li a i { color: var(--col-accent); font-size: 0.85rem; width: 16px; text-align: center; }
.nav-dropdown li a:hover { background: var(--col-accent-pale); color: var(--col-accent); }

/* Mobile toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--col-ink);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    transform-origin: center;
}

/* Hamburger → X morph */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-cta-item { display: none; }

/* ────────────────────────────────────────
   HERO
   ──────────────────────────────────────── */
.dt-hero {
    background: var(--col-ivory);
    padding: 40px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

/* Decorative: soft floating orbs */
.dt-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.dt-hero__orb--1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(224,90,32,0.07) 0%, transparent 70%);
    top: -80px;
    right: 15%;
    animation: orb-drift 12s ease-in-out infinite;
}

.dt-hero__orb--2 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(224,90,32,0.05) 0%, transparent 70%);
    bottom: 10%;
    left: 5%;
    animation: orb-drift 16s ease-in-out infinite reverse;
}

/*@keyframes orb-drift {*/
/*    0%, 100% { transform: translate(0, 0) scale(1); }*/
/*    33%       { transform: translate(20px, -15px) scale(1.04); }*/
/*    66%       { transform: translate(-12px, 10px) scale(0.97); }*/
/*}*/

/* Decorative: animated dot pattern */
.dt-hero__dots {
    position: absolute;
    top: 60px;
    left: 0;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(224,90,32,0.12) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    animation: dots-drift 20s linear infinite;
}

/*@keyframes dots-drift {*/
/*    0%   { transform: translate(0, 0); }*/
/*    100% { transform: translate(18px, 18px); }*/
/*}*/

.dt-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 40px;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 2;
}

/* Decorative running text */
.dt-hero__ornament {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(28, 26, 24, 0.025);
    letter-spacing: 0.3em;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    padding-left: 40px;
    animation: dt-marquee 30s linear infinite;
    will-change: transform;
}

@keyframes dt-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-10%); }
}

/* Kicker */
.dt-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--col-accent);
    margin-bottom: 28px;
    animation: dt-fadeUp 0.6s ease-out;
}

.dt-kicker-dot {
    width: 7px;
    height: 7px;
    background: var(--col-accent);
    border-radius: 50%;
    animation: kicker-pulse 2.2s ease-in-out infinite;
}

@keyframes kicker-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(224,90,32,0.5); }
    50%       { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 6px rgba(224,90,32,0); }
}

/* Headline */
.dt-hero__headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--col-ink);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    animation: dt-fadeUp 0.6s ease-out 0.1s both;
}

.dt-hero__headline-em {
    font-style: italic;
    color: var(--col-accent);
    display: inline-block;
    animation: dt-glow 3s ease-in-out infinite;
}

@keyframes dt-glow {
    0%, 100% { text-shadow: 0 0 0px rgba(224,90,32,0); }
    50%       { text-shadow: 0 0 8px rgba(224,90,32,0.15); }
}

.dt-hero__body {
    font-size: 1.05rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    max-width: 460px;
    margin-bottom: 36px;
    animation: dt-fadeUp 0.6s ease-out 0.2s both;
}

/*@keyframes dt-fadeUp {*/
/*    from { opacity: 0; transform: translateY(20px); }*/
/*    to   { opacity: 1; transform: translateY(0); }*/
/*}*/

/* Stats */
.dt-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding-top: 32px;
    border-top: 1px solid var(--col-border-warm);
    animation: dt-fadeUp 0.6s ease-out 0.3s both;
}

.dt-stat {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dt-stat:first-child { padding-left: 0; }

.dt-stat strong {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1;
}

.dt-stat span {
    font-size: 0.72rem;
    color: var(--col-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.dt-stat-rule {
    width: 1px;
    height: 32px;
    background: var(--col-border-warm);
    flex-shrink: 0;
}

/* Hero panel */
.dt-hero__panel-wrap {
    position: relative;
    padding-top: 20px;
    animation: dt-slideRight 0.7s ease-out 0.15s both;
}

/*@keyframes dt-slideRight {*/
/*    from { opacity: 0; transform: translateX(40px); }*/
/*    to   { opacity: 1; transform: translateX(0); }*/
/*}*/

.dt-hero__panel {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 32px 28px 24px;
    box-shadow: var(--shadow-float);
    position: relative;
    z-index: 2;
}

.dt-panel__heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 22px;
    line-height: 1.2;
}

/* Panel features list */
.dt-panel__features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.dt-panel__features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dt-feature-item {
    opacity: 0;
    animation: dt-featureSlide 0.5s ease-out forwards;
    transition: transform 0.3s ease;
    cursor: default;
}

.dt-feature-item:nth-child(1) { animation-delay: 0.2s; }
.dt-feature-item:nth-child(2) { animation-delay: 0.3s; }
.dt-feature-item:nth-child(3) { animation-delay: 0.4s; }
.dt-feature-item:nth-child(4) { animation-delay: 0.5s; }

.dt-feature-item:hover { transform: translateX(4px); }

@keyframes dt-featureSlide {
    from { opacity: 0; transform: translateX(-15px); }
    to   { opacity: 1; transform: translateX(0); }
}

.dt-pf-num {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0;
    transition: background 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-feature-item:hover .dt-pf-num {
    transform: scale(1.1);
    background: var(--col-accent);
    color: var(--col-white);
}

.dt-pf-text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--col-ink);
    margin-bottom: 1px;
}

.dt-pf-text span {
    font-size: 0.75rem;
    color: var(--col-muted);
    line-height: 1.4;
}

/* Panel process track */
.dt-panel__process {
    display: flex;
    align-items: center;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 18px;
    gap: 4px;
}

.dt-pp-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    transition: all 0.3s ease;
}

.dt-pp-step:hover { transform: translateY(-3px); }
.dt-pp-step:hover .dt-pp-circle { transform: scale(1.1); }

.dt-pp-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--col-accent);
    color: var(--col-white);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

/* Pulse ring on process steps */
.dt-pp-circle::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(224, 90, 32, 0.3);
    animation: step-ring 3s ease-in-out infinite;
}

.dt-pp-step:nth-child(3) .dt-pp-circle::after { animation-delay: 0.4s; }
.dt-pp-step:nth-child(5) .dt-pp-circle::after { animation-delay: 0.8s; }

@keyframes step-ring {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%       { transform: scale(1.25); opacity: 0; }
}

.dt-pp-step span {
    font-size: 0.68rem;
    color: var(--col-muted);
    font-weight: 500;
}

.dt-pp-line {
    flex: 0 0 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--col-accent) 0%, var(--col-accent) 50%, transparent 100%);
    transform-origin: left;
    animation: dt-progress 2.4s ease-in-out infinite;
}

.dt-pp-line:nth-child(4) { animation-delay: 0.4s; }

@keyframes dt-progress {
    0%    { opacity: 0.25; transform: scaleX(0.6); }
    50%   { opacity: 1;    transform: scaleX(1); }
    100%  { opacity: 0.25; transform: scaleX(0.6); }
}

.dt-panel__cta-row { margin-bottom: 14px; }

.dt-panel__trust {
    text-align: center;
    font-size: 0.71rem;
    color: var(--col-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Floating chips */
.dt-hero__chip {
    position: absolute;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--col-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-card);
    z-index: 3;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.dt-hero__chip--tl {
    top: -12px;
    left: -20px;
    animation: chip-float-a 5s ease-in-out infinite;
}

.dt-hero__chip--br {
    bottom: -14px;
    right: -10px;
    animation: chip-float-b 6s ease-in-out infinite;
}

@keyframes chip-float-a {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%       { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes chip-float-b {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50%       { transform: translateY(-8px) rotate(-0.5deg); }
}

.dt-hero__chip:hover {
    animation: none !important;
    transform: scale(1.06) translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(28,26,24,0.13) !important;
    border-color: var(--col-accent) !important;
}

/* ────────────────────────────────────────
   ABOUT
   ──────────────────────────────────────── */
.dt-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
}

.dt-about__left {
    background: var(--col-white);
    border-right: 1px solid var(--col-border);
    display: flex;
    align-items: center;
}

.dt-about__left-inner {
    padding: 40px 64px 40px 40px;
    max-width: 640px;
    margin-left: auto;
}

.dt-about__headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.12;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.dt-about__headline em { font-style: italic; color: var(--col-accent); }

.dt-about__body {
    color: var(--col-ink-light);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 14px;
}

.dt-about__pillars {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dt-about__pillars li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--col-ink-mid);
    font-weight: 500;
}

.dt-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--col-accent-pale);
    border: 1.5px solid var(--col-accent-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dt-check::after {
    content: '';
    width: 6px;
    height: 4px;
    border-left: 1.5px solid var(--col-accent);
    border-bottom: 1.5px solid var(--col-accent);
    transform: rotate(-45deg) translateY(-1px);
}

/* About right */
.dt-about__right {
    background: var(--col-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

/* Decorative blob */
.dt-about__right::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(224,90,32,0.06) 0%, transparent 70%);
    bottom: -80px;
    right: -60px;
    border-radius: 50%;
    pointer-events: none;
    animation: orb-drift 14s ease-in-out infinite reverse;
}

.dt-about__metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dt-metric {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.dt-metric:hover {
    box-shadow: 0 16px 40px rgba(28, 26, 24, 0.10);
    transform: translateY(-6px) scale(1.015);
}

.dt-metric strong {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
}

.dt-metric:hover strong { transform: scale(1.05); }

.dt-metric span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--col-muted);
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.dt-metric p {
    font-size: 0.75rem;
    color: var(--col-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.dt-metric--large {
    background: linear-gradient(135deg, var(--col-white) 0%, var(--col-accent-pale) 100%);
    border-left: 4px solid var(--col-accent);
}

.dt-metric--large strong { color: var(--col-accent); }

.dt-metric--highlight {
    background: var(--col-accent);
    border-color: var(--col-accent);
}

.dt-metric--highlight:hover {
    box-shadow: 0 16px 40px rgba(224, 90, 32, 0.22);
}

.dt-metric--highlight strong,
.dt-metric--highlight span,
.dt-metric--highlight p { color: var(--col-white); }

.dt-trust-badge {
    background: var(--col-white);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--col-border);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.dt-trust-badge:hover {
    box-shadow: 0 12px 32px rgba(28, 26, 24, 0.10);
    transform: translateY(-3px);
}

.dt-trust-badge__icon {
    width: 48px;
    height: 48px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--col-accent);
    flex-shrink: 0;
}

.dt-trust-badge__icon svg { width: 24px; height: 24px; }

.dt-trust-badge__content strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 4px;
}

.dt-trust-badge__content span {
    font-size: 0.8rem;
    color: var(--col-muted);
}

/* ────────────────────────────────────────
   SERVICES
   ──────────────────────────────────────── */
.dt-services {
    background: var(--col-ivory);
    padding: var(--space-section) 0;
    border-top: 1px solid var(--col-border);
    border-bottom: 1px solid var(--col-border);
}

.dt-services__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.dt-services__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 25px;
}

.dt-services__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
}

.dt-services__headline em { font-style: italic; color: var(--col-accent); }

.dt-services__header-desc {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    align-self: end;
    padding-bottom: 4px;
}

/* Services list */
.dt-services__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dt-svc {
    display: grid;
    grid-template-columns: 56px 64px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 32px 0;
    border-bottom: 1px solid var(--col-border);
    cursor: default;
    transition: background 0.35s ease,
                margin 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.35s ease,
                border-color 0.35s ease;
}

.dt-svc:first-child { border-top: 1px solid var(--col-border); }

.dt-svc:hover {
    background: var(--col-white);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: var(--r-md);
    border-color: transparent;
}

.dt-svc__index {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--col-cream-mid);
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-svc:hover .dt-svc__index {
    color: var(--col-accent-tint);
    transform: translateY(-4px) scale(1.08);
}

.dt-svc__icon {
    width: 56px;
    height: 56px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.dt-svc:hover .dt-svc__icon {
    background: var(--col-accent);
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(224, 90, 32, 0.22);
}

.dt-svc:hover .dt-svc__icon svg path,
.dt-svc:hover .dt-svc__icon svg rect,
.dt-svc:hover .dt-svc__icon svg circle { stroke: var(--col-white); }

.dt-svc__body h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 6px;
    line-height: 1.2;
}

.dt-svc__body p {
    font-size: 0.875rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: 500px;
}

.dt-svc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dt-svc__tags span {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.dt-svc__tags span:hover {
    background: var(--col-accent);
    color: white;
    transform: translateY(-2px);
}

.dt-svc__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--col-accent);
    padding: 10px 20px;
    border: 1.5px solid var(--col-accent-tint);
    border-radius: 50px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.dt-svc__cta:hover {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(224, 90, 32, 0.22);
}

/* ────────────────────────────────────────
   HOW IT WORKS
   ──────────────────────────────────────── */
.dt-hiw {
    background: var(--col-white);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.dt-hiw__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.dt-hiw__header { margin-bottom: 25px; }

.dt-hiw__headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
}

.dt-hiw__headline em { font-style: italic; color: var(--col-accent); }

.dt-hiw__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.dt-hstep {
    padding: 0 40px 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dt-hstep:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--col-border);
}

.dt-hstep:not(:first-child) { padding-left: 40px; padding-right: 0; }
.dt-hstep:nth-child(2) { padding-right: 40px; }

.dt-hstep__number {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: var(--col-cream);
    line-height: 1;
    letter-spacing: -0.04em;
}

.dt-hstep__content { flex: 1; }

.dt-hstep__icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    position: absolute;
    right: 0;
    top: 0;
    margin: 20px;
}

.dt-hstep:hover .dt-hstep__icon-wrap {
    background: var(--col-accent);
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 10px 24px rgba(224, 90, 32, 0.25);
}

.dt-hstep:hover .dt-hstep__icon-wrap svg path,
.dt-hstep:hover .dt-hstep__icon-wrap svg circle,
.dt-hstep:hover .dt-hstep__icon-wrap svg rect {
    stroke: white;
    transition: stroke 0.3s ease;
}

.dt-hstep__content h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
    line-height: 1.2;
}

.dt-hstep__content p {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 18px;
}

.dt-hstep__highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 7px 14px;
    border-radius: 50px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.dt-hstep:hover .dt-hstep__highlight {
    background: var(--col-accent);
    color: white;
    transform: translateX(4px);
}

/* ────────────────────────────────────────
   WHY US
   ──────────────────────────────────────── */
.dt-why {
    background: var(--col-ivory);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.dt-why__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 30px;
    align-items: start;
}

.dt-why__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-bottom: 16px;
    margin-top: 8px;
}

.dt-why__headline em { font-style: italic; color: var(--col-accent); }

.dt-why__desc {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 16px;
}

.dt-why__desc-secondary {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 16px;
}

.dt-why__desc-secondary:last-of-type { margin-bottom: 4px; }

.dt-why__bullets {
    margin: 24px 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dt-why__bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--col-ink-mid);
    transition: transform 0.3s ease;
}

.dt-why__bullet:hover { transform: translateX(5px); }

.dt-why__bullet-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--col-accent-pale);
    border: 1.5px solid var(--col-accent-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-why__bullet-check::after {
    content: '';
    width: 5px;
    height: 3px;
    border-left: 1.5px solid var(--col-accent);
    border-bottom: 1.5px solid var(--col-accent);
    transform: rotate(-45deg) translateY(-1px);
}

.dt-why__bullet:hover .dt-why__bullet-check {
    background: var(--col-accent);
    border-color: var(--col-accent);
    transform: scale(1.15);
}

.dt-why__bullet:hover .dt-why__bullet-check::after {
    border-color: white;
}

.dt-why__features {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dt-feature {
    display: flex;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--col-border);
    border-radius: var(--r-sm);
    transition: background 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
}

.dt-feature:first-child { padding-top: 0; }
.dt-feature:last-child  { border-bottom: none; padding-bottom: 0; }

.dt-feature:hover {
    background: var(--col-white);
    padding-left: 12px;
    padding-right: 12px;
}

.dt-feature__marker {
    width: 3px;
    min-width: 3px;
    background: var(--col-accent);
    border-radius: 3px;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.dt-feature:hover .dt-feature__marker { opacity: 1; }

.dt-feature__content { flex: 1; }

.dt-feature__content h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
    line-height: 1.2;
}

.dt-feature__content p {
    font-size: 0.875rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 12px;
}

.dt-feature__sub {
    font-size: 0.75rem;
    color: var(--col-muted);
    font-style: normal;
}

.dt-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dt-why-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 28px 24px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.dt-why-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--col-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--t);
}

.dt-why-card:hover::before { transform: scaleX(1); }

.dt-why-card:hover {
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
}

.dt-why-card--large {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: start;
    padding: 32px 28px;
}

.dt-why-card--large h3 { margin-bottom: 8px; }

.dt-why-card__icon {
    width: 52px;
    height: 52px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-why-card:hover .dt-why-card__icon {
    background: var(--col-accent);
    transform: rotate(-5deg) scale(1.1);
}

.dt-why-card:hover .dt-why-card__icon svg path,
.dt-why-card:hover .dt-why-card__icon svg circle,
.dt-why-card:hover .dt-why-card__icon svg rect { stroke: white; }

.dt-why-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 10px;
    line-height: 1.2;
}

.dt-why-card p {
    font-size: 0.875rem;
    color: var(--col-ink-light);
    line-height: 1.7;
}

.dt-why-card__list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dt-why-card__list li {
    font-size: 0.825rem;
    color: var(--col-ink-mid);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dt-why-card__list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--col-accent);
    flex-shrink: 0;
}

/* ────────────────────────────────────────
   EXPERTISE
   ──────────────────────────────────────── */
.dt-expertise {
    background: var(--col-white);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.dt-expertise__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.dt-expertise__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--col-border);
}

.dt-expertise__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
}

.dt-expertise__headline em { font-style: italic; color: var(--col-accent); }

.dt-expertise__desc {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    max-width: 300px;
    text-align: right;
    line-height: 1.6;
}

.dt-expertise__mosaic {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    justify-content: center;
}

.dt-subject {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 50px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--col-ink-mid);
    cursor: default;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.dt-subject:hover {
    background: var(--col-accent-pale);
    border-color: var(--col-accent-tint);
    color: var(--col-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(224, 90, 32, 0.15);
}

.dt-subject svg {
    transition: transform 0.3s ease;
}

.dt-subject:hover svg {
    transform: scale(1.15) rotate(-8deg);
}

/* Stats bar */
.dt-expertise__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 24px 32px;
    flex-wrap: wrap;
    gap: 0;
}

.dt-ebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 28px;
    gap: 2px;
    transition: transform 0.3s ease;
}

.dt-ebar-item:hover { transform: translateY(-3px); }

.dt-ebar-item strong {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--col-accent);
    line-height: 1;
    transition: color 0.3s ease;
}

.dt-ebar-item:hover strong { color: var(--col-accent-dark); }

.dt-ebar-item span {
    font-size: 0.72rem;
    color: var(--col-muted);
    font-weight: 500;
}

.dt-ebar-rule {
    width: 1px;
    height: 36px;
    background: var(--col-border-warm);
}

/* ────────────────────────────────────────
   TESTIMONIALS
   ──────────────────────────────────────── */
.dt-testi {
    background: var(--col-cream);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.dt-testi__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.dt-testi__header { margin-bottom: 52px; }

.dt-testi__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
}

.dt-testi__headline em { font-style: italic; color: var(--col-accent); }

.dt-testi__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.dt-tcard {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
}

.dt-tcard:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
    border-color: var(--col-accent-tint);
}

.dt-tcard__quote-mark {
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--col-accent-tint);
    line-height: 0.6;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
    margin-bottom: -30px;
}

.dt-tcard:hover .dt-tcard__quote-mark {
    color: var(--col-accent-tint);
    transform: scale(1.05) translateX(3px);
}

.dt-tcard--feature .dt-tcard__quote-mark { font-size: 6rem; }

.dt-tcard__text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--col-ink-mid);
    flex: 1;
}

.dt-tcard--feature .dt-tcard__text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--col-ink);
    line-height: 1.65;
}

.dt-tcard__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--col-border);
}

.dt-tcard__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--col-accent-pale);
    border: 1.5px solid var(--col-accent-tint);
    color: var(--col-accent);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dt-tcard__author > div:nth-child(2) strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--col-ink);
}

.dt-tcard__author > div:nth-child(2) span {
    font-size: 0.72rem;
    color: var(--col-muted);
}

.dt-tcard__stars {
    margin-left: auto;
    color: #F59E0B;
    font-size: 0.78rem;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.dt-tcard__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 5px 12px;
    border-radius: 50px;
    width: fit-content;
    transition: var(--t);
}

.dt-tcard:hover .dt-tcard__tag {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
}

.dt-testi__trust {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--col-ink-mid);
    font-weight: 500;
}

.dt-testi__trust strong { color: var(--col-ink); }
.dt-dot { color: var(--col-muted); }

/* ────────────────────────────────────────
   CONTACT / ENQUIRY
   ──────────────────────────────────────── */
.dt-contact {
    background: var(--col-ivory);
    padding: var(--space-section) 0;
}

.dt-contact__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.dt-contact__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-bottom: 20px;
    margin-top: 8px;
}

.dt-contact__headline em { font-style: italic; color: var(--col-accent); }

.dt-contact__desc {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 36px;
}

.dt-contact__benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.dt-cbenefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.3s ease;
}

.dt-cbenefit:hover { transform: translateX(5px); }

.dt-cbenefit__icon {
    width: 34px;
    height: 34px;
    background: var(--col-accent-pale);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-cbenefit:hover .dt-cbenefit__icon {
    background: var(--col-accent);
    transform: scale(1.12) rotate(-4deg);
}

.dt-cbenefit:hover .dt-cbenefit__icon svg path,
.dt-cbenefit:hover .dt-cbenefit__icon svg circle,
.dt-cbenefit:hover .dt-cbenefit__icon svg rect {
    stroke: white;
    transition: stroke 0.3s ease;
}

.dt-cbenefit strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--col-ink);
    margin-bottom: 2px;
}

.dt-cbenefit span {
    font-size: 0.78rem;
    color: var(--col-muted);
}

.dt-contact__trust-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--col-ink-mid);
    width: fit-content;
}

/* Form */
.dt-contact__form-wrap {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 40px;
    box-shadow: var(--shadow-card);
}

.dt-contact__form-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 28px;
    line-height: 1.2;
}

.dt-field { margin-bottom: 16px; }

.dt-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--col-ink-mid);
    margin-bottom: 7px;
    letter-spacing: 0.02em;
}

.dt-field input,
.dt-field select,
.dt-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--col-border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--col-ink);
    background: var(--col-ivory);
    appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.dt-field input::placeholder,
.dt-field textarea::placeholder { color: var(--col-muted); }

.dt-field input:focus,
.dt-field select:focus,
.dt-field textarea:focus {
    outline: none;
    border-color: var(--col-accent);
    background: var(--col-white);
    box-shadow: 0 0 0 3px rgba(224, 90, 32, 0.08);
    transform: translateY(-1px);
}

.dt-field textarea { resize: vertical; line-height: 1.6; }

.dt-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dt-submit {
    width: 100%;
    background: var(--col-accent);
    color: var(--col-white);
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.dt-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
    transition: left 0.55s ease;
    pointer-events: none;
}

.dt-submit:hover::before { left: 140%; }

.dt-submit:hover {
    background: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(224, 90, 32, 0.30);
}

.dt-form-note {
    text-align: center;
    font-size: 0.72rem;
    color: var(--col-muted);
    margin-top: 14px;
}

/* ────────────────────────────────────────
   FINAL CTA BANNER
   ──────────────────────────────────────── */
.dt-cta-banner {
    background: var(--col-ivory);
    border-top: 1px solid var(--col-border);
    padding: 40px 40px;
    position: relative;
    overflow: hidden;
}



.dt-cta-banner__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: end;
}

.dt-cta-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--col-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.dt-cta-banner__headline {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.15;
    margin-bottom: 14px;
}

.dt-cta-banner__desc {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    max-width: 540px;
}

.dt-cta-banner__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dt-cta-banner__note {
    font-size: 0.72rem;
    color: var(--col-muted);
    text-align: center;
}

/* ────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────── */
.site-footer-dark {
    background: var(--col-ink);
    padding: 30px 0 0;
    position: relative;
}

.sfd-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1320px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
}

/* Animated top accent line */
/*.sfd-grid::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 40px;*/
/*    right: 40px;*/
/*    height: 1px;*/
/*    background: linear-gradient(90deg, transparent, rgba(224,90,32,0.3), transparent);*/
/*    animation: footer-line 3s ease-in-out infinite;*/
/*}*/

/*@keyframes footer-line {*/
/*    0%, 100% { opacity: 0.4; }*/
/*    50%       { opacity: 1; }*/
/*}*/

.sfd-logo {
    height: 42px;
    width: auto;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.88;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.sfd-logo:hover {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(224,90,32,0.4));
}

.sfd-tagline {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
    max-width: 280px;
    margin: 0 0 24px;
}

.sfd-social {
    display: flex;
    gap: 10px;
}

.sfd-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.sfd-social a:hover {
    background: var(--col-accent);
    color: #fff;
    border-color: var(--col-accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(224,90,32,0.28);
}

.sfd-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
}

.sfd-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 20px;
    height: 1.5px;
    background: var(--col-accent);
    border-radius: 2px;
}

.sfd-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sfd-links li a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.42);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sfd-links li a:hover {
    color: var(--col-accent);
    padding-left: 4px;
}

/* Right-arrow on standard links */
.sfd-links:not(.sfd-links-contact) li a::before {
    content: '›';
    font-size: 0.9rem;
    color: rgba(255,255,255,0.2);
    transition: var(--t);
    flex-shrink: 0;
}

.sfd-links:not(.sfd-links-contact) li a:hover::before {
    color: var(--col-accent);
}

.sfd-links-contact li a { gap: 10px; }

.sfd-links-contact li a i {
    color: var(--col-accent);
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.sfd-contact-block { margin-top: 28px; }

.sfd-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto;
}

.sfd-copyright {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.28);
    margin: 0;
}

.sfd-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sfd-bottom-links a {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
    transition: var(--t);
}

.sfd-bottom-links a:hover { color: var(--col-accent); }
.sfd-dot { color: rgba(255,255,255,0.16); }

/* ────────────────────────────────────────
   SCROLL PROGRESS / BACK TO TOP
   ──────────────────────────────────────── */
.dt-scroll-progress {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    cursor: pointer;
    will-change: transform;
}

.dt-scroll-progress.visible {
    opacity: 1;
    transform: translateY(0);
}

.dt-scroll-progress svg {
    position: absolute;
    top: 0; left: 0;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.dt-scroll-progress__track {
    fill: none;
    stroke: rgba(224, 90, 32, 0.15);
    stroke-width: 2.5;
}

.dt-scroll-progress__fill {
    fill: none;
    stroke: var(--col-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 119.4;
    stroke-dashoffset: 119.4;
    transition: stroke-dashoffset 0.1s linear;
}

.dt-scroll-progress__inner {
    position: absolute;
    inset: 6px;
    background: var(--col-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(28, 26, 24, 0.12);
    transition: background 0.3s ease;
}

.dt-scroll-progress:hover .dt-scroll-progress__inner {
    background: var(--col-accent);
}

.dt-scroll-progress__inner svg {
    position: static;
    width: 14px;
    height: 14px;
    transform: none;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.dt-scroll-progress:hover .dt-scroll-progress__inner svg {
    color: white;
}

/* ────────────────────────────────────────
   CONTAINER SHIM
   ──────────────────────────────────────── */
.container-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 40px;
}

/* ────────────────────────────────────────
   PERFORMANCE — GPU hints
   ──────────────────────────────────────── */
.dt-metric,
.dt-tcard,
.dt-why-card,
.dt-hstep__icon-wrap,
.dt-svc__icon,
.dt-hero__chip,
.dt-hero__orb,
.dt-scroll-progress {
    will-change: transform;
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 1200px) {
    .dt-hero__inner {
        grid-template-columns: 1fr 420px;
        gap: 48px;
    }

    .dt-why__inner {
        grid-template-columns: 260px 1fr;
        gap: 48px;
    }
}

@media (max-width: 1024px) {
    .dt-hero__inner {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .dt-hero__panel-wrap { display: none; }

    .dt-about { grid-template-columns: 1fr; }
    .dt-about__left { border-right: none; border-bottom: 1px solid var(--col-border); }
    .dt-about__left-inner { padding: 40px 40px; max-width: 100%; margin: 0; }
    .dt-about__right { padding: 48px 40px; }

    .dt-services__header { grid-template-columns: 1fr; }

    .dt-svc {
        grid-template-columns: 48px 52px 1fr auto;
        gap: 20px;
    }

    .dt-hiw__steps { grid-template-columns: 1fr; gap: 48px; }
    .dt-hstep { padding: 0 !important; }
    .dt-hstep:not(:last-child)::after { display: none; }
    .dt-hstep { border-bottom: 1px solid var(--col-border); padding-bottom: 48px !important; }
    .dt-hstep:last-child { border-bottom: none; padding-bottom: 0 !important; }

    .dt-why__inner { grid-template-columns: 1fr; gap: 40px; }

    .dt-testi__grid { grid-template-columns: 1fr; }
    .dt-tcard--feature .dt-tcard__text { font-size: 1rem; }

    .dt-contact__inner { grid-template-columns: 1fr; gap: 48px; }
    .dt-cta-banner__inner { grid-template-columns: 1fr; gap: 32px; }

    .sfd-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

    .navbar-cta { display: none; }
    .cta-primary-btn-sm { display: none; }
}

@media (max-width: 900px) {
    :root { --space-section: 72px; }

    .navbar-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--col-white);
        border-top: 1px solid var(--col-border);
        border-bottom: 1px solid var(--col-border);
        padding: 16px 20px 20px;
        gap: 2px;
        box-shadow: var(--shadow-lift);
        z-index: 999;
    }

    .navbar-menu:not(.open) {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
    }

    .navbar-menu.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        display: flex !important;
    }

    .nav-toggle { display: flex; }
    .mobile-cta-item { display: block; margin-top: 12px; }
    .mobile-cta-item .dt-btn { width: 100%; justify-content: center; }

    .nav-item-dropdown { width: 100%; }

    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--col-accent-tint);
        border-radius: 0;
        background: var(--col-accent-pale);
        padding: 4px 0 4px 8px;
        margin: 4px 0 4px 10px;
        display: none;
    }

    .nav-item-dropdown.open .nav-dropdown { display: block; }
    .nav-item-dropdown.open .nav-chevron { transform: rotate(180deg); }
    .nav-link { width: 100%; display: flex; justify-content: space-between; }

    .dt-svc { grid-template-columns: 1fr; gap: 12px; }
    .dt-svc__index { display: none; }
    .dt-svc:hover { margin: 0; padding: 20px 0; border-radius: 0; border-color: transparent; border-bottom-color: var(--col-border); }

    .dt-expertise__header { flex-direction: column; align-items: flex-start; }
    .dt-expertise__desc { text-align: left; max-width: 100%; }

    .dt-testi__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    :root { --space-section: 56px; }

    .navbar-inner { padding: 0 20px; }
    .dt-hero__inner { padding: 0 20px 56px; }
    .dt-hero__headline { font-size: 2.8rem; }

    .dt-hero__stats { flex-wrap: wrap; gap: 16px; }
    .dt-stat-rule { display: none; }
    .dt-stat { padding: 0; }

    .dt-about__left-inner { padding: 48px 20px; }
    .dt-about__right { padding: 40px 20px; }
    .dt-about__metrics-grid { grid-template-columns: 1fr 1fr; }

    .dt-services__inner { padding: 0 20px; }
    .dt-services__header { gap: 20px; }

    .dt-hiw__inner { padding: 0 20px; }
    .dt-why__inner { padding: 0 20px; }
    .dt-why__grid { grid-template-columns: 1fr; }
    .dt-why-card--large { grid-column: 1; grid-template-columns: 1fr; }

    .dt-expertise__inner { padding: 0 20px; }
    .dt-testi__inner { padding: 0 20px; }

    .dt-contact__inner { padding: 0 20px; }
    .dt-field-row { grid-template-columns: 1fr; gap: 0; }
    .dt-contact__form-wrap { padding: 28px 20px; }

    .dt-cta-banner__inner { padding: 0 20px; }

    .sfd-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 48px; }
    .sfd-bottom { flex-direction: column; text-align: center; padding: 18px 20px; }
    .sfd-bottom-links { justify-content: center; }

    .topbar-left { display: none; }
    .topbar-inner { justify-content: center; padding: 0 20px; }

    .container-main { padding: 0 20px; }

    .dt-scroll-progress { bottom: 16px; right: 16px; }
}
/* ============================================================
   DissertationTutors.com — Why Us Page Styles
   Design: Premium editorial, matches home page design system
   All colors sourced exclusively from the approved CSS vars
   ============================================================ */


/* ────────────────────────────────────────
   WHY US MASTHEAD
   ──────────────────────────────────────── */
.wu-masthead {
    background: var(--col-ivory);
    padding: 42px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

/* Oversized watermark text behind content */
.wu-masthead__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 14rem);
    font-weight: 700;
    color: rgba(28, 26, 24, 0.025);
    letter-spacing: 0.25em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.wu-masthead__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 30px;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Breadcrumb */
.wu-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 32px;
}

.wu-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
}

.wu-breadcrumb a:hover { color: var(--col-accent); }
.wu-breadcrumb svg { color: var(--col-border-warm); margin-bottom: 3px;}
.wu-breadcrumb span { color: var(--col-accent); font-weight: 500; }

/* Headline */
.wu-masthead__headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    animation: dt-fadeUp 0.6s ease-out 0.05s both;
}

.wu-masthead__headline em {
    font-style: italic;
    color: var(--col-accent);
}

.wu-masthead__body {
    font-size: 1.05rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    max-width: 500px;
    margin-bottom: 36px;
    animation: dt-fadeUp 0.6s ease-out 0.15s both;
}

.wu-masthead__cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    animation: dt-fadeUp 0.6s ease-out 0.25s both;
}

.wu-masthead__ghost-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--col-ink-mid);
    transition: color 0.25s ease, gap 0.3s ease;
}

.wu-masthead__ghost-link svg { transition: transform 0.3s ease; }
.wu-masthead__ghost-link:hover { color: var(--col-accent); gap: 12px; }
.wu-masthead__ghost-link:hover svg { transform: translateX(4px); }

/* Credential card stack */
.wu-cred-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    animation: dt-slideRight 0.65s ease-out 0.1s both;
}

.wu-cred-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 22px 20px 18px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    will-change: transform;
    cursor: default;
}

.wu-cred-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: var(--col-accent-tint);
}

.wu-cred-card--primary {
    background: linear-gradient(140deg, var(--col-white) 0%, var(--col-accent-pale) 100%);
    border-left: 3px solid var(--col-accent);
}

.wu-cred-card--accent {
    background: var(--col-accent);
    border-color: var(--col-accent);
}

.wu-cred-card--accent:hover {
    border-color: var(--col-accent-dark);
    box-shadow: 0 12px 36px rgba(224, 90, 32, 0.25);
}

.wu-cred-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wu-cred-card__icon {
    width: 36px;
    height: 36px;
    background: var(--col-accent-pale);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wu-cred-card__icon--muted {
    background: var(--col-ivory);
}

.wu-cred-card__icon--white {
    background: rgba(255,255,255,0.2);
}

.wu-cred-card__figure {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1;
}

.wu-cred-card__figure span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--col-accent);
}

.wu-cred-card__figure--white,
.wu-cred-card--accent .wu-cred-card__figure {
    color: var(--col-white);
}

.wu-cred-card--accent .wu-cred-card__figure span {
    color: rgba(255,255,255,0.75);
}

.wu-cred-card__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--col-ink);
    margin-bottom: 2px;
}

.wu-cred-card__label--white,
.wu-cred-card--accent .wu-cred-card__label { color: var(--col-white); }

.wu-cred-card__sub {
    font-size: 0.68rem;
    color: var(--col-muted);
}

.wu-cred-card__sub--white,
.wu-cred-card--accent .wu-cred-card__sub { color: rgba(255,255,255,0.65); }

/* ADD THESE NEW RULES TO YOUR EXISTING CSS FILE */

.wu-masthead__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--col-border);
}

.wu-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 6px 0;
}

.wu-stat-pill svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wu-stat-pill strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--col-ink);
}

.wu-stat-pill span {
    font-size: 0.85rem;
    color: var(--col-muted);
}

.wu-stat-divider {
    width: 1px;
    height: 24px;
    background: var(--col-border);
    margin: 0 4px;
}

@media (max-width: 768px) {
    .wu-masthead__stats {
        gap: 8px;
        row-gap: 12px;
    }
    
    .wu-stat-pill {
        gap: 4px;
    }
    
    .wu-stat-pill strong {
        font-size: 0.85rem;
    }
    
    .wu-stat-pill span {
        font-size: 0.75rem;
    }
}
/* ────────────────────────────────────────
   MANIFESTO STRIP
   ──────────────────────────────────────── */
.wu-manifesto {
    background: var(--col-white);
    border-bottom: 1px solid var(--col-border);
    padding: 40px 0;
}

.wu-manifesto__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.wu-manifesto__rule {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--col-border-warm) 20%, var(--col-accent-tint) 50%, var(--col-border-warm) 80%, transparent 100%);
}

.wu-manifesto__body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 8px 0;
}

.wu-manifesto__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--col-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.wu-manifesto__quote {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 400;
    font-style: italic;
    color: var(--col-ink);
    line-height: 1.55;
    text-align: center;
    margin: 0;
    padding: 0 24px;
    border-left: none;
}

.wu-manifesto__quote em {
    font-style: normal;
    color: var(--col-accent);
    font-weight: 700;
}

.wu-manifesto__attribution {
    font-size: 0.72rem;
    color: var(--col-muted);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}


/* ────────────────────────────────────────
   ETHICS SECTION
   ──────────────────────────────────────── */
.wu-ethics {
    background: var(--col-ivory);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.wu-ethics__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 80px;
    align-items: start;
}

.wu-ethics__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    margin-top: 8px;
}

.wu-ethics__headline em {
    font-style: italic;
    color: var(--col-accent);
    display: block;
}

.wu-ethics__body {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.8;
    margin-bottom: 14px;
}

.wu-ethics__pledge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--col-ink-mid);
    font-weight: 500;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-left: 3px solid #22C55E;
    padding: 14px 18px;
    border-radius: var(--r-md);
    margin-top: 28px;
    line-height: 1.5;
}

.wu-ethics__pledge svg { flex-shrink: 0; margin-top: 2px; }

/* Pillar list */
.wu-ethics__pillar-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wu-pillar {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--col-border);
    transition: background 0.3s ease,
                padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.3s ease;
}

.wu-pillar:first-child { padding-top: 0; }
.wu-pillar:last-child { border-bottom: none; padding-bottom: 0; }

.wu-pillar:hover {
    background: var(--col-white);
    padding-left: 16px;
    padding-right: 16px;
    border-radius: var(--r-md);
    border-color: transparent;
}

.wu-pillar__num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--col-cream-mid);
    line-height: 1;
    padding-top: 4px;
    transition: color 0.3s ease;
}

.wu-pillar:hover .wu-pillar__num { color: var(--col-accent-tint); }

.wu-pillar__content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.wu-pillar__icon {
    width: 44px;
    height: 44px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wu-pillar:hover .wu-pillar__icon {
    background: var(--col-accent);
    transform: rotate(-4deg) scale(1.08);
}

.wu-pillar:hover .wu-pillar__icon svg path,
.wu-pillar:hover .wu-pillar__icon svg circle,
.wu-pillar:hover .wu-pillar__icon svg rect {
    stroke: var(--col-white);
    transition: stroke 0.3s ease;
}

.wu-pillar__text h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 8px;
    line-height: 1.2;
}

.wu-pillar__text p {
    font-size: 0.875rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin: 0;
}


/* ────────────────────────────────────────
   TUTORS SECTION
   ──────────────────────────────────────── */
.wu-tutors {
    background: var(--col-white);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.wu-tutors__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.wu-tutors__header {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--col-border);
}

.wu-tutors__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
    letter-spacing: -0.01em;
}

.wu-tutors__layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 48px;
}

/* Statement column */
.wu-tutors__big-stat {
    margin-bottom: 28px;
}

.wu-tutors__big-stat strong {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--col-accent);
    line-height: 1;
    display: block;
}

.wu-tutors__big-stat span {
    font-size: 0.85rem;
    color: var(--col-muted);
    font-weight: 500;
    line-height: 1.4;
    display: block;
    margin-top: 6px;
}

.wu-tutors__divider {
    width: 40px;
    height: 2px;
    background: var(--col-accent);
    border-radius: 2px;
    margin-bottom: 24px;
}

.wu-tutors__aside {
    font-size: 0.875rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 20px;
}

.wu-tutors__acceptance {
    font-size: 0.8rem;
    color: var(--col-ink-mid);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    border-radius: var(--r-md);
    padding: 12px 14px;
    line-height: 1.5;
}

.wu-tutors__acceptance strong {
    color: var(--col-accent);
    font-weight: 700;
}

/* Checklist */
.wu-tutors__checklist {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wu-check-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--col-border);
    transition: background 0.3s ease,
                padding-left 0.3s ease,
                padding-right 0.3s ease,
                border-radius 0.3s ease;
    cursor: default;
}

.wu-check-row:first-child { padding-top: 0; }
.wu-check-row:last-child { border-bottom: none; }

.wu-check-row:hover {
    background: var(--col-ivory);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: var(--r-sm);
    border-color: transparent;
}

.wu-check-row__icon {
    width: 28px;
    height: 28px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wu-check-row:hover .wu-check-row__icon {
    background: var(--col-accent);
    transform: scale(1.1);
}

.wu-check-row:hover .wu-check-row__icon svg path {
    stroke: var(--col-white);
    transition: stroke 0.3s ease;
}

.wu-check-row__text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--col-ink);
    margin-bottom: 2px;
}

.wu-check-row__text span {
    font-size: 0.75rem;
    color: var(--col-muted);
}

.wu-check-row__badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 4px 10px;
    border-radius: 50px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: background 0.3s ease, color 0.3s ease;
}

.wu-check-row:hover .wu-check-row__badge {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
}

/* Disciplines strip */
.wu-tutors__disciplines {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wu-tutors__disciplines-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--col-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.wu-tutors__discipline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.wu-tutors__discipline-list span {
    font-size: 0.78rem;
    color: var(--col-ink-mid);
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 4px 12px;
    border-radius: 50px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    cursor: default;
}

.wu-tutors__discipline-list span:hover {
    background: var(--col-accent-pale);
    border-color: var(--col-accent-tint);
    color: var(--col-accent);
}


/* ────────────────────────────────────────
   DIFFERENCE SECTION
   ──────────────────────────────────────── */
.wu-difference {
    background: var(--col-cream);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.wu-difference__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.wu-difference__header {
    margin-bottom: 56px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--col-border);
}

.wu-difference__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
    letter-spacing: -0.01em;
}

.wu-difference__headline em {
    font-style: italic;
    color: var(--col-accent);
}

/* Difference rows */
.wu-difference__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wu-diff-row {
    display: grid;
    grid-template-columns: 72px 1fr 80px;
    gap: 32px;
    align-items: start;
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
    transition: background 0.35s ease,
                padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding-right 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.35s ease;
    cursor: default;
}

.wu-diff-row:first-child { border-top: 1px solid var(--col-border); }
.wu-diff-row:last-child { border-bottom: none; padding-bottom: 0; }

.wu-diff-row:hover {
    background: var(--col-white);
    padding-left: 24px;
    padding-right: 24px;
    border-radius: var(--r-lg);
    border-color: transparent;
}

.wu-diff-row--alt {
    background: transparent;
}

/* Marker column */
.wu-diff-row__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.wu-diff-row__num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--col-cream-mid);
    line-height: 1;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wu-diff-row:hover .wu-diff-row__num {
    color: var(--col-accent-tint);
    transform: scale(1.08) translateY(-2px);
}

.wu-diff-row__line {
    flex: 1;
    width: 1px;
    background: var(--col-border);
    min-height: 20px;
    margin: 0 auto;
}

/* Body */
.wu-diff-row__heading-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.wu-diff-row__body h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin: 0;
}

.wu-diff-row__tag {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 4px 10px;
    border-radius: 50px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.wu-diff-row:hover .wu-diff-row__tag {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
}

.wu-diff-row__body p {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.8;
    margin: 0;
    max-width: 620px;
}

/* Visual */
.wu-diff-row__visual {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.wu-diff-row__icon-frame {
    width: 60px;
    height: 60px;
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.wu-diff-row:hover .wu-diff-row__icon-frame {
    background: var(--col-accent);
    transform: rotate(-5deg) scale(1.1);
    box-shadow: 0 10px 24px rgba(224, 90, 32, 0.22);
}

.wu-diff-row:hover .wu-diff-row__icon-frame svg path,
.wu-diff-row:hover .wu-diff-row__icon-frame svg rect,
.wu-diff-row:hover .wu-diff-row__icon-frame svg circle {
    stroke: var(--col-white);
    transition: stroke 0.3s ease;
}


/* ────────────────────────────────────────
   TRUST SECTION
   ──────────────────────────────────────── */
.wu-trust {
    background: var(--col-ivory);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.wu-trust__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 72px;
    align-items: start;
}

.wu-trust__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-bottom: 16px;
    margin-top: 8px;
}

.wu-trust__headline em {
    font-style: italic;
    color: var(--col-accent);
}

.wu-trust__body {
    font-size: 0.925rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 28px;
}

.wu-trust__seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--col-ink-mid);
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 10px 16px;
    border-radius: 50px;
}

/* Trust grid */
.wu-trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wu-trust-tile {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    will-change: transform;
    cursor: default;
}

/* Animated top-border reveal */
.wu-trust-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--col-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0;
}

.wu-trust-tile:hover::before { transform: scaleX(1); }

.wu-trust-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: var(--col-accent-tint);
}

.wu-trust-tile__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.wu-trust-tile__icon {
    width: 42px;
    height: 42px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wu-trust-tile:hover .wu-trust-tile__icon {
    background: var(--col-accent);
    transform: rotate(-4deg) scale(1.08);
}

.wu-trust-tile:hover .wu-trust-tile__icon svg path,
.wu-trust-tile:hover .wu-trust-tile__icon svg rect,
.wu-trust-tile:hover .wu-trust-tile__icon svg circle {
    stroke: var(--col-white);
    transition: stroke 0.3s ease;
}

.wu-trust-tile__header h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
}

.wu-trust-tile p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 16px;
}

.wu-trust-tile__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wu-trust-tile__tags span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 4px 10px;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: background 0.25s ease, color 0.25s ease;
}

.wu-trust-tile:hover .wu-trust-tile__tags span {
    background: var(--col-accent);
    color: var(--col-white);
    border-color: var(--col-accent);
}


/* ────────────────────────────────────────
   VOICES / TESTIMONIALS SECTION
   ──────────────────────────────────────── */
.wu-voices {
    background: var(--col-white);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--col-border);
}

.wu-voices__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.wu-voices__header {
    margin-bottom: 52px;
}

.wu-voices__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.1;
    margin-top: 8px;
}

.wu-voices__headline em {
    font-style: italic;
    color: var(--col-accent);
}

.wu-voices__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Feature quote */
.wu-voice-feature {
    background: var(--col-cream);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.wu-voice-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.wu-voice-feature__mark {
    font-family: var(--font-display);
    font-size: 6rem;
    color: var(--col-accent-tint);
    line-height: 0.7;
    font-weight: 700;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.wu-voice-feature:hover .wu-voice-feature__mark {
    color: var(--col-accent);
}

.wu-voice-feature__text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--col-ink);
    line-height: 1.65;
    margin: 0;
}

.wu-voice-feature__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--col-border-warm);
}

.wu-voice-feature__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--col-accent-pale);
    border: 2px solid var(--col-accent-tint);
    color: var(--col-accent);
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wu-voice-feature__meta strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--col-ink);
}

.wu-voice-feature__meta span {
    font-size: 0.75rem;
    color: var(--col-muted);
}

.wu-voice-feature__stars {
    margin-left: auto;
    color: #F59E0B;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.wu-voice-feature__service {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--col-accent);
    background: var(--col-accent-pale);
    border: 1px solid var(--col-accent-tint);
    padding: 5px 12px;
    border-radius: 50px;
    width: fit-content;
}

/* Secondary cards */
.wu-voices__secondary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wu-voice-card {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    will-change: transform;
    cursor: default;
}

.wu-voice-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--col-accent-tint);
}

.wu-voice-card__quote {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--col-accent-tint);
    line-height: 0.7;
    font-weight: 700;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.wu-voice-card:hover .wu-voice-card__quote { color: var(--col-accent); }

.wu-voice-card p {
    font-size: 0.875rem;
    color: var(--col-ink-mid);
    line-height: 1.7;
    margin-bottom: 16px;
}

.wu-voice-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wu-voice-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--col-accent-pale);
    border: 1.5px solid var(--col-accent-tint);
    color: var(--col-accent);
    font-weight: 700;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wu-voice-card__author strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--col-ink);
}

.wu-voice-card__author span {
    font-size: 0.7rem;
    color: var(--col-muted);
}

.wu-voice-card__stars {
    margin-left: auto;
    color: #F59E0B;
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* Trustpilot strip */
.wu-voices__trustpilot {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--col-ink-mid);
    font-weight: 500;
    padding: 16px 20px;
    background: var(--col-cream);
    border: 1px solid var(--col-border);
    border-radius: var(--r-lg);
}

.wu-voices__trustpilot strong { color: var(--col-ink); }

.wu-voices__see-all {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--col-accent);
    transition: opacity 0.25s ease;
    margin-left: auto;
}

.wu-voices__see-all:hover { opacity: 0.75; }


/* ────────────────────────────────────────
   RESPONSIVE — WHY US PAGE
   ──────────────────────────────────────── */

/* 1200px */
@media (max-width: 1200px) {
    .wu-masthead__inner {
        grid-template-columns: 1fr 340px;
        gap: 48px;
    }

    .wu-ethics__inner {
        grid-template-columns: 400px 1fr;
        gap: 56px;
    }

    .wu-tutors__layout {
        grid-template-columns: 240px 1fr;
        gap: 48px;
    }

    .wu-trust__inner {
        grid-template-columns: 260px 1fr;
        gap: 48px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .wu-masthead__inner {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    .wu-cred-stack {
        grid-template-columns: repeat(4, 1fr);
        animation: dt-fadeUp 0.6s ease-out 0.15s both;
    }

    .wu-manifesto__body {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .wu-manifesto__eyebrow { justify-content: center; }
    .wu-manifesto__attribution { text-align: center; }

    .wu-ethics__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wu-tutors__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wu-tutors__big-stat {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .wu-tutors__big-stat strong { font-size: 3rem; }

    .wu-diff-row {
        grid-template-columns: 56px 1fr 60px;
        gap: 20px;
    }

    .wu-trust__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wu-voices__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 900px */
@media (max-width: 900px) {
    .wu-masthead__inner { padding: 0 20px 48px; }

    .wu-cred-stack {
        grid-template-columns: 1fr 1fr;
    }

    .wu-manifesto__inner,
    .wu-ethics__inner,
    .wu-tutors__inner,
    .wu-difference__inner,
    .wu-trust__inner,
    .wu-voices__inner {
        padding: 0 20px;
    }

    .wu-diff-row {
        grid-template-columns: 48px 1fr;
        gap: 16px;
    }

    .wu-diff-row__visual { display: none; }

    .wu-diff-row:hover {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }

    .wu-trust__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* 640px */
@media (max-width: 640px) {
    .wu-masthead__headline { font-size: 2.4rem; }

    .wu-cred-stack {
        grid-template-columns: 1fr 1fr;
    }

    .wu-masthead__cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .wu-manifesto {
        padding: 36px 0;
    }

    .wu-manifesto__quote { font-size: 1.05rem; padding: 0; }

    .wu-ethics__headline { font-size: 2rem; }

    .wu-pillar {
        grid-template-columns: 32px 1fr;
    }

    .wu-tutors__disciplines {
        flex-direction: column;
        align-items: flex-start;
        border-radius: var(--r-lg);
        padding: 16px 20px;
    }

    .wu-voices__layout {
        gap: 16px;
    }

    .wu-voice-feature {
        padding: 28px 24px;
    }

    .wu-voices__trustpilot {
        flex-wrap: wrap;
        gap: 8px;
    }

    .wu-voices__see-all { margin-left: 0; }

    .wu-trust__grid {
        grid-template-columns: 1fr;
    }
}

/* 480px */
@media (max-width: 480px) {
    .wu-masthead__headline { font-size: 2rem; }

    .wu-cred-stack {
        grid-template-columns: 1fr 1fr;
    }

    .wu-cred-card {
        padding: 16px 14px 14px;
    }

    .wu-cred-card__figure { font-size: 1.6rem; }

    .wu-check-row {
        grid-template-columns: 28px 1fr;
        gap: 12px;
    }

    .wu-check-row__badge { display: none; }

    .wu-diff-row__num { font-size: 1.8rem; }

    .wu-voices__trustpilot .dt-dot { display: none; }
}
/* Stats strip */
.wu-masthead__stats {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--col-border);
    padding: 18px 0;
    flex-wrap: wrap;
    row-gap: 10px;
    animation: dt-fadeUp 0.55s ease-out 0.2s both;
}
 
.wu-stat-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 28px 0 0;
    flex-shrink: 0;
}
 
.wu-stat-item strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1;
}
 
.wu-stat-item strong span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--col-accent);
}
 
.wu-stat-item > span {
    font-size: 0.75rem;
    color: var(--col-muted);
    font-weight: 500;
}
 
.wu-stat-sep {
    width: 1px;
    height: 24px;
    background: var(--col-border);
    margin-right: 28px;
    flex-shrink: 0;
    align-self: center;
}
 
/* ============================================================
   MASTER'S DISSERTATION PAGE — Updated Per Request
   ============================================================ */

/* ────────────────────────────────────────
     HERO — Compact (Updated Card Design)
     ──────────────────────────────────────── */
.mast-hero {
    background: var(--col-ivory);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.mast-hero__bg-text {
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 10rem;
    font-weight: 700;
    color: rgba(28, 26, 24, 0.02);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.mast-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 40px 40px;
    position: relative;
    z-index: 2;
}

.mast-hero__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 60px;
    align-items: center;
}

.mast-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 20px;
}

.mast-breadcrumb a {
    color: var(--col-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.mast-breadcrumb a:hover {
    color: var(--col-accent);
}

.mast-breadcrumb__sep {
    color: var(--col-border-warm);
}

.mast-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.15;
    margin-bottom: 16px;
}

.mast-hero__title span {
    color: var(--col-accent);
    font-style: italic;
}

.mast-hero__lead {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.65;
    margin-bottom: 0;
    max-width: 500px;
}

/* Hero Card — Clean Redesigned Rating */
.mast-hero__card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 24px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.mast-hero__card-icon {
    width: 56px;
    height: 56px;
    background: var(--col-accent-pale);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.mast-hero__card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 20px;
}

.mast-hero__rating-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid var(--col-border);
    padding-top: 20px;
}

.mast-rating-badge {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: var(--col-accent-pale);
    padding: 8px 16px;
    border-radius: 50px;
}

.mast-rating-number {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--col-accent);
    line-height: 1;
}

.mast-rating-star {
    font-size: 1.2rem;
    color: #f5a623;
}

.mast-rating-reviews {
    text-align: left;
}

.mast-rating-reviews strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--col-ink);
}

.mast-rating-reviews span {
    font-size: 0.7rem;
    color: var(--col-muted);
}

/* ────────────────────────────────────────
     JOURNEY — Cards Side by Side with Arrows
     ──────────────────────────────────────── */
.mast-journey {
    background: var(--col-ivory);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.mast-journey__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.mast-journey__track {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mast-journey__step {
    flex: 1;
    min-width: 200px;
}

.mast-journey__card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.mast-journey__card:hover {
    transform: translateY(-5px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-lift);
}

.mast-journey__num {
    width: 52px;
    height: 52px;
    background: var(--col-accent);
    color: var(--col-white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.mast-journey__card:hover .mast-journey__num {
    transform: scale(1.05);
    background: var(--col-accent-dark);
}

.mast-journey__card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.mast-journey__card p {
    font-size: 0.8rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin: 0;
}

.mast-journey__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mast-journey__arrow i {
    font-size: 1.3rem;
    color: var(--col-accent);
    opacity: 0.5;
}

/* Section Header */
.mast-section__header {
    text-align: center;
    margin-bottom: 25px;
}

.mast-section__badge {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.mast-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 0;
}

.mast-section__title span {
    color: var(--col-accent);
    font-style: italic;
}

.mast-section__underline {
    width: 56px;
    height: 3px;
    background: var(--col-accent);
    border-radius: 3px;
    margin: 16px auto 0;
}

/* ────────────────────────────────────────
     OVERVIEW SECTION (KEPT AS IS)
     ──────────────────────────────────────── */
.mast-overview {
    background: var(--col-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.mast-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.mast-overview__grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.mast-overview__tag {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.mast-overview__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin-bottom: 20px;
}

.mast-overview__title span {
    color: var(--col-accent);
}

.mast-overview__text {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 28px;
}

.mast-feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mast-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mast-feature i {
    color: var(--col-accent);
    font-size: 1rem;
    width: 24px;
}

.mast-feature span {
    font-size: 0.88rem;
    color: var(--col-ink-mid);
}

.mast-overview__visual {
    background: linear-gradient(145deg, var(--col-ivory) 0%, var(--col-white) 100%);
    border: 1px solid var(--col-border);
    border-radius: 32px;
    padding: 40px;
    text-align: center;
}

.mast-visual-icon {
    width: 80px;
    height: 80px;
    background: var(--col-accent-pale);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.mast-visual-icon i {
    font-size: 2rem;
    color: var(--col-accent);
}

.mast-visual-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.mast-visual-block p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 24px;
}

.mast-visual-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.mast-visual-badges span {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--col-ink-mid);
}

/* ────────────────────────────────────────
     WHAT'S INCLUDED (KEPT AS IS)
     ──────────────────────────────────────── */
.mast-included {
    background: var(--col-ivory);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.mast-included__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.mast-included__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mast-included__row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 28px;
    padding: 32px;
    transition: all 0.3s ease;
}

.mast-included__row--alt {
    background: var(--col-white);
    border-left: 4px solid var(--col-accent);
}

.mast-included__row:hover {
    transform: translateX(8px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-card);
}

.mast-included__icon {
    width: 64px;
    height: 64px;
    background: var(--col-accent-pale);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mast-included__icon i {
    font-size: 1.5rem;
    color: var(--col-accent);
}

.mast-included__content {
    flex: 1;
}

.mast-included__content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 8px;
}

.mast-included__content p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 12px;
}

.mast-included__content ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.mast-included__content ul li {
    font-size: 0.75rem;
    color: var(--col-ink-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mast-included__content ul li::before {
    content: "✓";
    color: var(--col-accent);
    font-weight: bold;
}

/* ────────────────────────────────────────
     WHY CHOOSE US (KEPT AS IS)
     ──────────────────────────────────────── */
.mast-why {
    background: var(--col-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.mast-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.mast-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.mast-why__card {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.mast-why__card:hover {
    transform: translateY(-4px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-card);
}

.mast-why__icon {
    width: 64px;
    height: 64px;
    background: var(--col-white);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.mast-why__card:hover .mast-why__icon {
    background: var(--col-accent-pale);
}

.mast-why__icon i {
    font-size: 1.5rem;
    color: var(--col-accent);
}

.mast-why__card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.mast-why__card p {
    font-size: 0.82rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin: 0;
}

/* ────────────────────────────────────────
     RESPONSIVE
     ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .mast-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .mast-hero__right {
        max-width: 380px;
        margin: 0 auto;
    }
    
    .mast-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .mast-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mast-journey__track {
        flex-direction: column;
        align-items: center;
    }
    
    .mast-journey__step {
        width: 100%;
        max-width: 380px;
    }
    
    .mast-journey__arrow {
        transform: rotate(90deg);
        margin: 8px 0;
    }
}

@media (max-width: 768px) {
    .mast-hero__inner {
        padding: 30px 20px 50px;
    }
    
    .mast-hero__title {
        font-size: 2rem;
    }
    
    .mast-overview__inner,
    .mast-journey__inner,
    .mast-included__inner,
    .mast-why__inner {
        padding: 0 20px;
    }
    
    .mast-included__row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .mast-included__content ul {
        justify-content: center;
    }
    
    .mast-why__grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .mast-hero__title {
        font-size: 1.8rem;
    }
    
    .mast-hero__card {
        padding: 24px 20px;
    }
    
    .mast-hero__rating-wrap {
        flex-direction: column;
        gap: 12px;
    }
    
    .mast-rating-reviews {
        text-align: center;
    }
    
    .mast-overview__visual {
        padding: 28px 20px;
    }
}
/* ============================================================
   PHD PAGE — EXACT PATTERN MATCHING MASTER'S PAGE
   ============================================================ */

/* ────────────────────────────────────────
     HERO — EXACT MATCH TO MASTER'S PAGE
     ──────────────────────────────────────── */
.phd-hero {
    background: var(--col-ivory);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.phd-hero__bg-text {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 10rem;
    font-weight: 700;
    color: rgba(28, 26, 24, 0.02);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.phd-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 40px 40px;
    position: relative;
    z-index: 2;
}

.phd-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.phd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 20px;
}

.phd-breadcrumb a {
    color: var(--col-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.phd-breadcrumb a:hover {
    color: var(--col-accent);
}

.phd-breadcrumb__sep {
    color: var(--col-border-warm);
}

.phd-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.15;
    margin-bottom: 16px;
}

.phd-hero__title span {
    color: var(--col-accent);
    font-style: italic;
}

/* ────────────────────────────────────────
     OVERVIEW SECTION — MATCHING MASTER'S
     ──────────────────────────────────────── */
.phd-overview {
    background: var(--col-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.phd-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.phd-overview__grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.phd-overview__tag {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.phd-overview__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin-bottom: 20px;
}

.phd-overview__title span {
    color: var(--col-accent);
}

.phd-overview__text {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 28px;
}

.phd-feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.phd-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phd-feature i {
    color: var(--col-accent);
    font-size: 1rem;
    width: 24px;
}

.phd-feature span {
    font-size: 0.88rem;
    color: var(--col-ink-mid);
}

.phd-overview__visual {
    background: linear-gradient(145deg, var(--col-ivory) 0%, var(--col-white) 100%);
    border: 1px solid var(--col-border);
    border-radius: 32px;
    padding: 40px;
    text-align: center;
}

.phd-visual-icon {
    width: 80px;
    height: 80px;
    background: var(--col-accent-pale);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.phd-visual-icon i {
    font-size: 2rem;
    color: var(--col-accent);
}

.phd-visual-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.phd-visual-block p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 24px;
}

.phd-visual-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.phd-visual-badges span {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--col-ink-mid);
}

/* ────────────────────────────────────────
     SECTION HEADERS
     ──────────────────────────────────────── */
.phd-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.phd-section-badge {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.phd-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 0;
}

.phd-section-title span {
    color: var(--col-accent);
    font-style: italic;
}

.phd-title-underline {
    width: 56px;
    height: 3px;
    background: var(--col-accent);
    border-radius: 3px;
    margin: 16px auto 0;
}

.phd-section-subtitle {
    color: var(--col-ink-light);
    max-width: 650px;
    margin: 16px auto 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ────────────────────────────────────────
     TIMELINE SECTION
     ──────────────────────────────────────── */
.phd-timeline {
    background: var(--col-ivory);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.phd-timeline-vertical {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.phd-timeline-vertical::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(180deg, var(--col-accent) 0%, var(--col-accent-pale) 100%);
    border-radius: 1px;
}

.phd-timeline-block {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    position: relative;
}

.phd-timeline-block:last-child {
    margin-bottom: 0;
}

.phd-timeline-dot {
    width: 56px;
    height: 56px;
    background: var(--col-white);
    border: 2px solid var(--col-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.phd-timeline-block:hover .phd-timeline-dot {
    background: var(--col-accent);
    transform: scale(1.05);
}

.phd-timeline-dot span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.phd-timeline-block:hover .phd-timeline-dot span {
    color: var(--col-white);
}

.phd-timeline-content {
    flex: 1;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 22px 28px;
    transition: all 0.3s ease;
}

.phd-timeline-block:hover .phd-timeline-content {
    transform: translateX(6px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-card);
}

.phd-timeline-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 8px;
}

.phd-timeline-content p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.phd-timeline-tag {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
}

/* ────────────────────────────────────────
     RESEARCH SUPPORT SECTION
     ──────────────────────────────────────── */
.phd-research {
    background: var(--col-white);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.phd-research-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.phd-research-card {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.phd-research-card:hover {
    transform: translateY(-6px);
    border-color: var(--col-accent-tint);
    background: var(--col-white);
    box-shadow: var(--shadow-md);
}

.phd-research-icon {
    width: 60px;
    height: 60px;
    background: var(--col-white);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.phd-research-card:hover .phd-research-icon {
    background: var(--col-accent);
}

.phd-research-icon i {
    font-size: 1.5rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.phd-research-card:hover .phd-research-icon i {
    color: var(--col-white);
}

.phd-research-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 10px;
}

.phd-research-card p {
    font-size: 0.8rem;
    color: var(--col-ink-light);
    line-height: 1.55;
    margin-bottom: 16px;
}

.phd-research-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.phd-research-features li {
    font-size: 0.7rem;
    color: var(--col-ink-mid);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--col-border);
}

.phd-research-features li:last-child {
    border-bottom: none;
}

.phd-research-features li i {
    color: var(--col-accent);
    font-size: 0.65rem;
    width: 16px;
}

/* ────────────────────────────────────────
     WHY CHOOSE US SECTION
     ──────────────────────────────────────── */
.phd-why {
    background: var(--col-ivory);
    padding: 30px 0;
}

.phd-why-grid {
    max-width: 800px;
    margin: 0 auto;
}

.phd-why-item {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
    background: var(--col-white);
    border-radius: 20px;
    padding: 24px 28px;
    transition: all 0.3s ease;
    border: 1px solid var(--col-border);
}

.phd-why-item:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
    border-color: var(--col-accent-tint);
}

.phd-why-item:nth-child(even) {
    flex-direction: row-reverse;
}

.phd-why-icon {
    width: 65px;
    height: 65px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.phd-why-item:hover .phd-why-icon {
    background: var(--col-accent);
    transform: rotate(360deg);
}

.phd-why-icon i {
    font-size: 1.6rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.phd-why-item:hover .phd-why-icon i {
    color: var(--col-white);
}

.phd-why-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 6px;
}

.phd-why-content p {
    font-size: 0.82rem;
    color: var(--col-ink-light);
    line-height: 1.55;
    margin: 0;
}

/* ────────────────────────────────────────
     RESPONSIVE
     ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .phd-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .phd-research-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .phd-hero__inner {
        padding: 30px 20px 50px;
    }
    
    .phd-hero__title {
        font-size: 2rem;
    }
    
    .phd-overview__inner,
    .phd-timeline,
    .phd-research,
    .phd-why {
        padding: 60px 0;
    }
    
    .phd-overview__inner {
        padding: 0 20px;
    }
    
    .phd-research-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    
    .phd-why-item,
    .phd-why-item:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }
    
    .phd-why-item:hover {
        transform: translateY(-4px);
    }
    
    .phd-timeline-vertical::before {
        left: 20px;
    }
    
    .phd-timeline-dot {
        width: 40px;
        height: 40px;
    }
    
    .phd-timeline-dot span {
        font-size: 0.9rem;
    }
    
    .phd-timeline-content {
        padding: 16px 20px;
    }
}

@media (max-width: 550px) {
    .phd-timeline-block {
        flex-direction: column;
        gap: 16px;
    }
    
    .phd-timeline-vertical::before {
        display: none;
    }
    
    .phd-timeline-dot {
        margin: 0 auto;
    }
    
    .phd-timeline-content {
        text-align: center;
    }
}
/* ============================================================
   STRATEGY PAGE — MATCHING MASTER'S PAGE PATTERN
   ============================================================ */

/* ────────────────────────────────────────
     HERO — EXACT MATCH TO MASTER'S PAGE
     ──────────────────────────────────────── */
.strategy-hero {
    background: var(--col-ivory);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.strategy-hero__bg-text {
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 10rem;
    font-weight: 700;
    color: rgba(28, 26, 24, 0.02);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.strategy-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 40px 40px;
    position: relative;
    z-index: 2;
}

.strategy-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.strategy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 20px;
}

.strategy-breadcrumb a {
    color: var(--col-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.strategy-breadcrumb a:hover {
    color: var(--col-accent);
}

.strategy-breadcrumb__sep {
    color: var(--col-border-warm);
}

.strategy-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.15;
    margin-bottom: 16px;
}

.strategy-hero__title span {
    color: var(--col-accent);
    font-style: italic;
}

/* ────────────────────────────────────────
     OVERVIEW SECTION — MATCHING MASTER'S
     ──────────────────────────────────────── */
.strategy-overview {
    background: var(--col-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.strategy-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.strategy-overview__grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.strategy-overview__tag {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.strategy-overview__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin-bottom: 20px;
}

.strategy-overview__title span {
    color: var(--col-accent);
}

.strategy-overview__text {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 28px;
}

.strategy-feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.strategy-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.strategy-feature i {
    color: var(--col-accent);
    font-size: 1rem;
    width: 24px;
}

.strategy-feature span {
    font-size: 0.88rem;
    color: var(--col-ink-mid);
}

.strategy-overview__visual {
    background: linear-gradient(145deg, var(--col-ivory) 0%, var(--col-white) 100%);
    border: 1px solid var(--col-border);
    border-radius: 32px;
    padding: 40px;
    text-align: center;
}

.strategy-visual-icon {
    width: 80px;
    height: 80px;
    background: var(--col-accent-pale);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.strategy-visual-icon i {
    font-size: 2rem;
    color: var(--col-accent);
}

.strategy-visual-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.strategy-visual-block p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 24px;
}

.strategy-visual-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.strategy-visual-badges span {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--col-ink-mid);
}

/* ────────────────────────────────────────
     SECTION HEADERS
     ──────────────────────────────────────── */
.strategy-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.strategy-section-badge {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.strategy-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 0;
}

.strategy-section-title span {
    color: var(--col-accent);
    font-style: italic;
}

.strategy-title-underline {
    width: 56px;
    height: 3px;
    background: var(--col-accent);
    border-radius: 3px;
    margin: 16px auto 0;
}

.strategy-section-subtitle {
    color: var(--col-ink-light);
    max-width: 650px;
    margin: 16px auto 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ────────────────────────────────────────
     PLAN COMPONENTS SECTION
     ──────────────────────────────────────── */
.strategy-components {
    background: var(--col-ivory);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.strategy-components-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.strategy-component-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s ease;
}

.strategy-component-card:hover {
    transform: translateY(-4px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-md);
}

.strategy-component-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--col-border);
}

.strategy-component-icon {
    width: 50px;
    height: 50px;
    background: var(--col-accent-pale);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.strategy-component-card:hover .strategy-component-icon {
    background: var(--col-accent);
}

.strategy-component-icon i {
    font-size: 1.2rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.strategy-component-card:hover .strategy-component-icon i {
    color: var(--col-white);
}

.strategy-component-header h3 {
    font-size: 1.05rem;
    margin: 0;
    color: var(--col-ink);
}

.strategy-component-card p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin: 0;
}

/* ────────────────────────────────────────
     KEY BENEFITS SECTION
     ──────────────────────────────────────── */
.strategy-benefits {
    background: var(--col-white);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.strategy-benefits-timeline {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.strategy-benefits-item {
    flex: 1;
    min-width: 200px;
    text-align: center;
    position: relative;
    padding: 20px 15px;
    background: var(--col-ivory);
    border-radius: 16px;
    margin: 0 5px;
    transition: all 0.3s ease;
    border: 1px solid var(--col-border);
}

.strategy-benefits-item:hover {
    transform: translateY(-6px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-md);
    background: var(--col-white);
}

.strategy-benefits-item:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--col-accent);
    opacity: 0.5;
}

.strategy-benefits-icon {
    width: 60px;
    height: 60px;
    background: var(--col-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}

.strategy-benefits-item:hover .strategy-benefits-icon {
    background: var(--col-accent);
}

.strategy-benefits-icon i {
    font-size: 1.4rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.strategy-benefits-item:hover .strategy-benefits-icon i {
    color: var(--col-white);
}

.strategy-benefits-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 6px;
}

.strategy-benefits-item p {
    font-size: 0.75rem;
    color: var(--col-ink-light);
    line-height: 1.5;
    margin: 0;
}

/* ────────────────────────────────────────
     WHY CHOOSE US SECTION
     ──────────────────────────────────────── */
.strategy-why {
    background: var(--col-ivory);
    padding: 30px 0;
}

.strategy-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.strategy-why-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.strategy-why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--col-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.strategy-why-card:hover::before {
    transform: scaleX(1);
}

.strategy-why-card:hover {
    transform: translateY(-6px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-md);
}

.strategy-why-icon {
    width: 70px;
    height: 70px;
    background: var(--col-accent-pale);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.strategy-why-card:hover .strategy-why-icon {
    background: var(--col-accent);
    transform: scale(1.05);
}

.strategy-why-icon i {
    font-size: 1.6rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.strategy-why-card:hover .strategy-why-icon i {
    color: var(--col-white);
}

.strategy-why-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 10px;
}

.strategy-why-card p {
    font-size: 0.8rem;
    color: var(--col-ink-light);
    line-height: 1.55;
    margin-bottom: 14px;
}

.strategy-why-stat {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
}

/* ────────────────────────────────────────
     RESPONSIVE
     ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .strategy-overview__grid {
        gap: 40px;
    }
    
    .strategy-components-grid {
        gap: 20px;
    }
    
    .strategy-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .strategy-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .strategy-benefits-timeline {
        flex-direction: column;
        gap: 20px;
    }
    
    .strategy-benefits-item:not(:last-child)::after {
        content: '↓';
        right: 50%;
        top: auto;
        bottom: -25px;
        transform: translateX(50%);
    }
}

@media (max-width: 768px) {
    .strategy-hero__inner {
        padding: 30px 20px 50px;
    }
    
    .strategy-hero__title {
        font-size: 2rem;
    }
    
    .strategy-overview__inner,
    .strategy-components,
    .strategy-benefits,
    .strategy-why {
        padding: 60px 0;
    }
    
    .strategy-components-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    
    .strategy-why-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
    }
}

@media (max-width: 550px) {
    .strategy-hero__title {
        font-size: 1.8rem;
    }
    
    .strategy-overview__visual {
        padding: 28px 20px;
    }
    
    .strategy-component-card {
        padding: 20px;
    }
    
    .strategy-component-header {
        flex-direction: column;
        text-align: center;
    }
    
    .strategy-benefits-item {
        padding: 20px;
    }
    
    .strategy-why-card {
        padding: 24px 20px;
    }
}
/* ============================================================
   CONSULTATION PAGE — MATCHING MASTER'S PAGE PATTERN
   ============================================================ */

/* ────────────────────────────────────────
     HERO — EXACT MATCH TO MASTER'S PAGE
     ──────────────────────────────────────── */
.consultation-hero {
    background: var(--col-ivory);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.consultation-hero__bg-text {
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 10rem;
    font-weight: 700;
    color: rgba(28, 26, 24, 0.02);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.consultation-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 40px 40px;
    position: relative;
    z-index: 2;
}

.consultation-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.consultation-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 20px;
}

.consultation-breadcrumb a {
    color: var(--col-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.consultation-breadcrumb a:hover {
    color: var(--col-accent);
}

.consultation-breadcrumb__sep {
    color: var(--col-border-warm);
}

.consultation-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.15;
    margin-bottom: 16px;
}

.consultation-hero__title span {
    color: var(--col-accent);
    font-style: italic;
}

/* ────────────────────────────────────────
     OVERVIEW SECTION — MATCHING MASTER'S
     ──────────────────────────────────────── */
.consultation-overview {
    background: var(--col-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--col-border);
}

.consultation-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.consultation-overview__grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.consultation-overview__tag {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.consultation-overview__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin-bottom: 20px;
}

.consultation-overview__title span {
    color: var(--col-accent);
}

.consultation-overview__text {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 28px;
}

.consultation-feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.consultation-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.consultation-feature i {
    color: var(--col-accent);
    font-size: 1rem;
    width: 24px;
}

.consultation-feature span {
    font-size: 0.88rem;
    color: var(--col-ink-mid);
}

.consultation-overview__visual {
    background: linear-gradient(145deg, var(--col-ivory) 0%, var(--col-white) 100%);
    border: 1px solid var(--col-border);
    border-radius: 32px;
    padding: 40px;
    text-align: center;
}

.consultation-visual-icon {
    width: 80px;
    height: 80px;
    background: var(--col-accent-pale);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.consultation-visual-icon i {
    font-size: 2rem;
    color: var(--col-accent);
}

.consultation-visual-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
}

.consultation-visual-block p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 24px;
}

.consultation-visual-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.consultation-visual-badges span {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--col-ink-mid);
}

/* ────────────────────────────────────────
     SECTION HEADERS
     ──────────────────────────────────────── */
.consultation-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.consultation-section-badge {
    display: inline-block;
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.consultation-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 0;
}

.consultation-section-title span {
    color: var(--col-accent);
    font-style: italic;
}

.consultation-title-underline {
    width: 56px;
    height: 3px;
    background: var(--col-accent);
    border-radius: 3px;
    margin: 16px auto 0;
}

.consultation-section-subtitle {
    color: var(--col-ink-light);
    max-width: 650px;
    margin: 16px auto 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ────────────────────────────────────────
     HOW IT WORKS — Numbered List with Icons & Hover
     Number positioned in top right corner (small)
     ──────────────────────────────────────── */
.consultation-steps {
    background: var(--col-ivory);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.consultation-steps-list {
    max-width: 800px;
    margin: 0 auto;
}

.consultation-list-item {
    display: flex;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--col-border);
    transition: all 0.3s ease;
    position: relative;
}

.consultation-list-item:last-child {
    border-bottom: none;
}

.consultation-list-item:hover {
    padding-left: 16px;
    background: var(--col-white);
    border-radius: 20px;
    margin: 0 -16px;
    padding-right: 16px;
    border-bottom-color: transparent;
    box-shadow: var(--shadow-sm);
}

.consultation-list-left {
    flex-shrink: 0;
}

.consultation-list-icon {
    width: 52px;
    height: 52px;
    background: var(--col-accent-pale);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.consultation-list-item:hover .consultation-list-icon {
    background: var(--col-accent);
}

.consultation-list-icon i {
    font-size: 1.3rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.consultation-list-item:hover .consultation-list-icon i {
    color: var(--col-white);
}

.consultation-list-content {
    flex: 1;
}

.consultation-list-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.consultation-list-item:hover .consultation-list-content h3 {
    color: var(--col-accent);
}

.consultation-list-content p {
    font-size: 0.88rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin: 0;
}

.consultation-list-number {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--col-accent);
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 4px;
}

.consultation-list-item:hover .consultation-list-number {
    opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
    .consultation-list-item {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        position: relative;
        padding-top: 40px;
    }
    
    .consultation-list-left {
        display: flex;
        justify-content: center;
    }
    
    .consultation-list-number {
        position: absolute;
        top: 12px;
        right: 16px;
        font-size: 0.75rem;
    }
    
    .consultation-list-item:hover {
        padding: 40px 20px 20px;
        margin: 0;
    }
    
    .consultation-list-content h3 {
        font-size: 1rem;
    }
}

/* ────────────────────────────────────────
     WHAT YOU'LL RECEIVE SECTION
     ──────────────────────────────────────── */
.consultation-receive {
    background: var(--col-white);
    padding: 30px 0;
    border-bottom: 1px solid var(--col-border);
}

.consultation-receive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.consultation-receive-card {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s ease;
}

.consultation-receive-card:hover {
    transform: translateY(-5px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-md);
    background: var(--col-white);
}

.consultation-receive-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--col-border);
}

.consultation-receive-icon {
    width: 48px;
    height: 48px;
    background: var(--col-white);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.consultation-receive-card:hover .consultation-receive-icon {
    background: var(--col-accent);
}

.consultation-receive-icon i {
    font-size: 1.2rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.consultation-receive-card:hover .consultation-receive-icon i {
    color: var(--col-white);
}

.consultation-receive-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin: 0;
}

.consultation-receive-card p {
    font-size: 0.82rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.consultation-receive-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.consultation-receive-tags span {
    background: var(--col-accent-pale);
    color: var(--col-accent);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
}

/* ────────────────────────────────────────
     WHY CHOOSE US SECTION
     ──────────────────────────────────────── */
.consultation-why {
    background: var(--col-ivory);
    padding: 30px 0;
}

.consultation-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.consultation-why-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.consultation-why-card:hover {
    transform: translateY(-6px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-md);
}

.consultation-why-icon {
    width: 65px;
    height: 65px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.consultation-why-card:hover .consultation-why-icon {
    background: var(--col-accent);
    transform: scale(1.05);
}

.consultation-why-icon i {
    font-size: 1.5rem;
    color: var(--col-accent);
    transition: color 0.3s ease;
}

.consultation-why-card:hover .consultation-why-icon i {
    color: var(--col-white);
}

.consultation-why-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 10px;
}

.consultation-why-card p {
    font-size: 0.8rem;
    color: var(--col-ink-light);
    line-height: 1.55;
    margin: 0;
}

/* ────────────────────────────────────────
     RESPONSIVE
     ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .consultation-overview__grid {
        gap: 40px;
    }
    
    .consultation-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .consultation-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .consultation-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .consultation-receive-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }
}

@media (max-width: 768px) {
    .consultation-hero__inner {
        padding: 30px 20px 50px;
    }
    
    .consultation-hero__title {
        font-size: 2rem;
    }
    
    .consultation-overview__inner,
    .consultation-steps,
    .consultation-receive,
    .consultation-why {
        padding: 60px 0;
    }
    
    .consultation-steps-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .consultation-why-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .consultation-receive-grid {
        max-width: 100%;
    }
}

@media (max-width: 550px) {
    .consultation-hero__title {
        font-size: 1.8rem;
    }
    
    .consultation-overview__visual {
        padding: 28px 20px;
    }
    
    .consultation-receive-card {
        padding: 20px;
    }
    
    .consultation-receive-header {
        flex-direction: column;
        text-align: center;
    }
    
    .consultation-why-card {
        padding: 24px 20px;
    }
}
/* ============================================================
   How It Works Page — Human-Designed Layout
   No excessive whitespace, balanced density
   ============================================================ */

/* ────────────────────────────────────────
   HIW MASTHEAD — Clean, minimal
   ──────────────────────────────────────── */
.hiw-masthead {
    background: var(--col-ivory);
    padding: 32px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.hiw-masthead__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 8rem);
    font-weight: 700;
    color: rgba(28, 26, 24, 0.025);
    letter-spacing: 0.25em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.hiw-masthead__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 44px;
    position: relative;
    z-index: 2;
}

.hiw-masthead__content {
    max-width: 700px;
}

.hiw-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 12px;
}

.hiw-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
}

.hiw-breadcrumb a:hover { color: var(--col-accent); }

.hiw-breadcrumb__sep svg { color: var(--col-border-warm); }

.hiw-breadcrumb__current {
    color: var(--col-accent);
    font-weight: 500;
}

.hiw-masthead__headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.hiw-masthead__headline span {
    color: var(--col-accent);
    font-style: italic;
}


/* ────────────────────────────────────────
   3-CARD OVERVIEW — Side by side
   ──────────────────────────────────────── */
.hiw-overview {
    background: var(--col-white);
    padding: 48px 0;
    border-bottom: 1px solid var(--col-border);
}

.hiw-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.hiw-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hiw-overview-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 32px 28px;
    transition: all 0.3s ease;
    position: relative;
}

.hiw-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--col-accent-tint);
}

.hiw-overview-card__icon {
    width: 56px;
    height: 56px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.hiw-overview-card__number {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--col-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px 20px;
    font-size: 2.5rem;
}

.hiw-overview-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
    line-height: 1.3;
}

.hiw-overview-card__desc {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    line-height: 1.6;
}

.hiw-overview-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--col-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.hiw-overview-card:hover .hiw-overview-card__link {
    opacity: 1;
}

/* ────────────────────────────────────────
   DETAILED PROCESS — Left/Right layout
   ──────────────────────────────────────── */
.hiw-details {
    background: var(--col-ivory);
    padding: 48px 0;
}

.hiw-details__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.hiw-detail-block {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 48px;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 30px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.hiw-detail-block:last-child {
    margin-bottom: 0;
}

.hiw-detail-block--alt {
    background: var(--col-white);
    border-left: 3px solid var(--col-accent);
}

.hiw-detail-block:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-card);
    border-color: var(--col-accent-tint);
}

.hiw-detail-block__step {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--col-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    margin-bottom: 12px;
}

.hiw-detail-block__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 16px;
    line-height: 1.3;
}

.hiw-title-note {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--col-accent);
    display: inline-block;
    margin-left: 8px;
}

.hiw-detail-block__desc {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 24px;
}

.hiw-detail-block__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.hiw-detail-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.hiw-detail-feature i {
    width: 28px;
    height: 28px;
    background: var(--col-accent-pale);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--col-accent);
}

.hiw-detail-feature span {
    font-size: 0.8rem;
    color: var(--col-ink-mid);
}

.hiw-detail-block__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--col-accent-pale);
    padding: 12px 18px;
    border-radius: var(--r-md);
}

.hiw-detail-block__highlight i {
    color: var(--col-accent);
    font-size: 0.85rem;
}

.hiw-detail-block__highlight span {
    font-size: 0.8rem;
    color: var(--col-ink-mid);
}

.hiw-detail-block__note {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--col-accent-pale);
    padding: 12px 18px;
    border-radius: var(--r-md);
}

.hiw-detail-block__note i {
    color: var(--col-accent);
    font-size: 0.85rem;
}

.hiw-detail-block__note span {
    font-size: 0.8rem;
    color: var(--col-accent);
    font-weight: 500;
}

.hiw-detail-block__right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-visual-icon {
    width: 80px;
    height: 80px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-visual-icon i {
    font-size: 2rem;
    color: var(--col-accent);
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .hiw-overview__grid {
        gap: 16px;
    }
    
    .hiw-overview-card {
        padding: 24px 20px;
    }
    
    .hiw-overview-card__title {
        font-size: 1.15rem;
    }
}

@media (max-width: 900px) {
    .hiw-hero__inner {
        padding: 0 20px;
    }
    
    .hiw-overview__inner {
        padding: 0 20px;
    }
    
    .hiw-overview__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .hiw-details__inner {
        padding: 0 20px;
    }
    
    .hiw-detail-block {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 20px;
    }
    
    .hiw-detail-block__right {
        display: none;
    }
    
    .hiw-detail-block__features {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .hiw-hero {
        padding: 24px 0 36px;
    }
    
    .hiw-hero__title {
        font-size: 2rem;
    }
    
    .hiw-hero__lead {
        font-size: 0.9rem;
    }
    
    .hiw-overview {
        padding: 36px 0;
    }
    
    .hiw-overview-card {
        padding: 20px 18px;
    }
    
    .hiw-details {
        padding: 36px 0;
    }
    
    .hiw-detail-block {
        padding: 20px 18px;
    }
    
    .hiw-detail-block__title {
        font-size: 1.25rem;
    }
    
    .hiw-title-note {
        display: block;
        margin-left: 0;
        margin-top: 6px;
    }
}
/* ────────────────────────────────────────
   3-CARD OVERVIEW — Side by side WITH ARROWS
   Fixed grid that properly handles arrow elements
   ──────────────────────────────────────── */
.hiw-overview {
    background: var(--col-white);
    padding: 48px 0;
    border-bottom: 1px solid var(--col-border);
}

.hiw-overview__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.hiw-overview__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.hiw-overview-card {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: var(--r-xl);
    padding: 32px 28px;
    transition: all 0.3s ease;
    position: relative;
}

.hiw-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--col-accent-tint);
}

.hiw-overview-card__icon {
    width: 56px;
    height: 56px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}


.hiw-overview-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 12px;
    line-height: 1.3;
}

.hiw-overview-card__desc {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.hiw-overview-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--col-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.hiw-overview-card:hover .hiw-overview-card__link {
    opacity: 1;
}

/* Arrow styling */
.hiw-overview__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hiw-overview__arrow i {
    font-size: 1.3rem;
    color: var(--col-accent);
    opacity: 0.5;
}

/* Responsive - Stack cards vertically on mobile */
@media (max-width: 900px) {
    .hiw-overview__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .hiw-overview__arrow {
        transform: rotate(90deg);
        margin: 8px 0;
    }
    
    .hiw-overview-card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .hiw-overview {
        padding: 36px 0;
    }
    
    .hiw-overview__inner {
        padding: 0 20px;
    }
    
    .hiw-overview-card {
        padding: 20px 18px;
    }
    
    .hiw-overview-card__title {
        font-size: 1.15rem;
    }
}
/* ============================================================
   FAQ PAGE — Premium Redesign (Matches Why Us Design Language)
   All original font sizes preserved
   ============================================================ */

/* ────────────────────────────────────────
   FAQ MASTHEAD — Premium (Matches Why Us)
   ──────────────────────────────────────── */
.faq-masthead {
    background: var(--col-ivory);
    padding: 42px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.faq-masthead__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 8rem);
    font-weight: 700;
    color: rgba(28, 26, 24, 0.025);
    letter-spacing: 0.25em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.faq-masthead__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 30px;
    position: relative;
    z-index: 2;
}

.faq-masthead__content {
    max-width: 700px;
}

.faq-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 12px;
}

.faq-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
    text-decoration: none;
}

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

.faq-breadcrumb__sep svg { color: var(--col-border-warm); }

.faq-breadcrumb__current {
    color: var(--col-accent);
    font-weight: 500;
}

.faq-masthead__headline {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--col-ink);
    line-height: 1.2;
}

.faq-masthead__headline span {
    color: var(--col-accent);
    font-style: italic;
}

/* ────────────────────────────────────────
   FAQ BODY
   ──────────────────────────────────────── */
.faq-body {
    background: var(--col-white);
    padding: 30px 0;
}

/* Search Bar — Premium Styling */
.faq-search-wrap {
    max-width: 560px;
    margin: 0 auto 48px;
    position: relative;
}

.faq-search-wrap i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--col-muted);
    font-size: 0.9rem;
}

.faq-search {
    width: 100%;
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--col-border);
    border-radius: 50px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--col-ink);
    background: var(--col-ivory);
    transition: all 0.25s ease;
    outline: none;
}

.faq-search:focus {
    border-color: var(--col-accent);
    background: var(--col-white);
    box-shadow: 0 0 0 3px var(--col-accent-pale);
}

.faq-search::placeholder {
    color: var(--col-muted);
}

/* Tabs — Premium Styling */
.faq-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.faq-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 50px;
    border: 1px solid var(--col-border);
    background: var(--col-white);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--col-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.faq-tab i {
    font-size: 0.8rem;
}

.faq-tab:hover,
.faq-tab.active {
    background: var(--col-accent);
    border-color: var(--col-accent);
    color: var(--col-white);
}

/* FAQ List */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}

/* FAQ Item — Premium Card Styling */
.faq-item {
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item:hover {
    border-color: var(--col-accent-tint);
}

.faq-item.open {
    border-color: var(--col-accent);
    box-shadow: var(--shadow-lift);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.25s ease;
}

.faq-question:hover {
    background: var(--col-ivory);
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.faq-num {
    width: 32px;
    height: 32px;
    background: var(--col-accent-pale);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--col-accent);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.faq-item.open .faq-num {
    background: var(--col-accent);
    color: var(--col-white);
}

.faq-q-text {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--col-ink);
    line-height: 1.45;
}

.faq-chevron {
    width: 32px;
    height: 32px;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.faq-chevron i {
    font-size: 0.65rem;
    color: var(--col-muted);
    transition: transform 0.25s ease;
}

.faq-item.open .faq-chevron {
    background: var(--col-accent);
    border-color: var(--col-accent);
}

.faq-item.open .faq-chevron i {
    color: var(--col-white);
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 24px;
}

.faq-item.open .faq-answer {
    max-height: 400px;
    padding: 0 24px 22px;
}

.faq-answer-inner {
    padding-left: 46px;
    border-top: 1px solid var(--col-border);
    padding-top: 18px;
}

.faq-answer-inner p {
    font-size: 0.9rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin: 0;
}

.faq-answer-inner a {
    color: var(--col-accent);
    text-decoration: none;
}

.faq-answer-inner a:hover {
    text-decoration: underline;
}

/* CTA Strip — Premium Styling */
.faq-cta-strip {
    max-width: 860px;
    margin: 56px auto 0;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 28px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    transition: all 0.35s ease;
}

.faq-cta-strip:hover {
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.faq-cta-strip-left {
    flex: 1;
}

.faq-cta-strip-left h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 6px;
}

.faq-cta-strip-left p {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin: 0;
    line-height: 1.55;
}

.faq-cta-strip-right {
    flex-shrink: 0;
}

.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--col-accent);
    color: var(--col-white);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.faq-cta-btn i {
    font-size: 0.9rem;
}

.faq-cta-btn:hover {
    background: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(224, 90, 32, 0.25);
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 900px) {
    .faq-masthead__inner {
        padding: 0 20px 30px;
    }
}

@media (max-width: 768px) {
    .faq-masthead__headline {
        font-size: 2rem;
    }
    
    .faq-body {
        padding: 60px 0;
    }
    
    .faq-cta-strip {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }
    
    .faq-cta-strip-right {
        width: 100%;
    }
    
    .faq-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .faq-question {
        padding: 16px 18px;
    }
    
    .faq-answer {
        padding: 0 18px;
    }
    
    .faq-item.open .faq-answer {
        padding: 0 18px 18px;
    }
    
    .faq-answer-inner {
        padding-left: 0;
    }
    
    .faq-tabs {
        gap: 8px;
    }
    
    .faq-tab {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .faq-masthead__headline {
        font-size: 1.8rem;
    }
    
    .faq-cta-strip {
        padding: 24px 20px;
    }
    
    .faq-num {
        width: 28px;
        height: 28px;
    }
}
/* ============================================================
   Contact Page — Human-Designed Layout
   Preserves original font sizes, only restructures layout
   ============================================================ */

/* ────────────────────────────────────────
   CONTACT MASTHEAD — Premium (Matches Why Us)
   ──────────────────────────────────────── */
.contact-masthead {
    background: var(--col-ivory);
    padding: 42px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
}

.contact-masthead__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 8rem);
    font-weight: 700;
    color: rgba(28, 26, 24, 0.025);
    letter-spacing: 0.25em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.contact-masthead__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 40px;
    position: relative;
    z-index: 2;
}

.contact-masthead__content {
    max-width: 700px;
}

.contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 12px;
}

.contact-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
}

.contact-breadcrumb a:hover { color: var(--col-accent); }

.contact-breadcrumb__sep svg { color: var(--col-border-warm); }

.contact-breadcrumb__current {
    color: var(--col-accent);
    font-weight: 500;
}

.contact-masthead__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-dark);
}

.contact-masthead__headline em {
   font-style: italic;
    color: var(--col-accent);
}
}

/* ────────────────────────────────────────
   SECTION 1: GENERAL INQUIRIES
   ──────────────────────────────────────── */
.contact-general {
    background: var(--col-white);
    padding: 60px 0;
    border-bottom: 1px solid var(--col-border);
}

.contact-general__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-general__header i {
    width: 44px;
    height: 44px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--col-accent);
}

.contact-general__header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin: 0;
}

.contact-general__intro {
    font-size: 0.88rem;
    color: var(--col-ink-light);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 600px;
}

.contact-general__grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.contact-general-card {
    flex: 1;
    min-width: 200px;
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-general-card:hover {
    transform: translateY(-4px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-card);
}

.contact-general-card__icon {
    width: 55px;
    height: 55px;
    background: var(--col-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.contact-general-card__icon i {
    font-size: 1.3rem;
    color: var(--col-accent);
}

.contact-general-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 8px;
}

.contact-general-card a,
.contact-general-card p {
    font-size: 0.8rem;
    color: var(--col-muted);
    text-decoration: none;
}

.contact-general-card a:hover {
    color: var(--col-accent);
}

/* ────────────────────────────────────────
   SECTION 2: MAIN CONTENT (Team + Form)
   ──────────────────────────────────────── */
.contact-main {
    background: var(--col-white);
    padding: 20px 0;
}

.contact-main__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

/* Consultant Team */
.contact-team {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 28px;
    padding: 32px;
}

.contact-team__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--col-border);
}

.contact-team__header i {
    width: 44px;
    height: 44px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--col-accent);
}

.contact-team__header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin: 0;
}

.contact-team__members {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-team-member {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--col-white);
    border: 1px solid var(--col-border);
    border-radius: 18px;
    transition: all 0.3s ease;
}

.contact-team-member:hover {
    transform: translateX(6px);
    border-color: var(--col-accent-tint);
    box-shadow: var(--shadow-sm);
}

.contact-team-member__avatar {
    width: 52px;
    height: 52px;
    background: var(--col-accent-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-team-member__avatar span {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--col-accent);
}

.contact-team-member__info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 4px;
}

.contact-team-member__role {
    font-size: 0.7rem;
    color: var(--col-accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-team-member__email a {
    font-size: 0.7rem;
    color: var(--col-muted);
    text-decoration: none;
}

.contact-team-member__email a:hover {
    color: var(--col-accent);
}

.contact-team__footer {
    background: var(--col-accent-pale);
    border-radius: 16px;
    padding: 16px;
}

.contact-team__footer > p {
    font-size: 0.78rem;
    color: var(--col-accent);
    font-weight: 500;
    margin-bottom: 12px;
}

.contact-team__footer i {
    margin-right: 8px;
}


.contact-team__helpful p {
    font-size: 0.72rem;
    color: var(--col-accent);
    font-weight: 500;
    margin: 6px 0;
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 28px;
    padding: 32px;
}

.contact-form__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-form__header i {
    width: 44px;
    height: 44px;
    background: var(--col-accent-pale);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--col-accent);
}

.contact-form__header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin: 0;
}

.contact-form__intro {
    font-size: 0.85rem;
    color: var(--col-ink-light);
    margin-bottom: 24px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.contact-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.contact-form__group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--col-ink);
}

.contact-form__group .required {
    color: var(--col-accent);
}

.contact-form__group input,
.contact-form__group select,
.contact-form__group textarea {
    padding: 12px 14px;
    border: 1px solid var(--col-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--col-ink);
    background: var(--col-white);
    transition: all 0.25s ease;
}

.contact-form__group input:focus,
.contact-form__group select:focus,
.contact-form__group textarea:focus {
    outline: none;
    border-color: var(--col-accent);
    box-shadow: 0 0 0 3px var(--col-accent-pale);
}

.contact-form__submit {
    width: 100%;
    background: var(--col-accent);
    color: var(--col-white);
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.contact-form__submit:hover {
    background: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(224, 90, 32, 0.25);
}

.contact-form__note {
    font-size: 0.7rem;
    color: var(--col-muted);
    text-align: center;
    margin-top: 16px;
}

.contact-form__note i {
    color: var(--col-accent);
    margin-right: 4px;
}

/* Response Bar */
.contact-response-bar {
    background: var(--col-ivory);
    border: 1px solid var(--col-border);
    border-radius: 60px;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.contact-response-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-response-bar__left i {
    font-size: 1.2rem;
    color: var(--col-accent);
}

.contact-response-bar__left span {
    font-size: 0.85rem;
    color: var(--col-ink-mid);
    font-weight: 500;
}

.contact-response-bar__badge {
    background: var(--col-white);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--col-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .contact-masthead__inner {
        padding: 0 20px 48px;
    }
    
    .contact-general {
        padding: 48px 0;
    }
}

@media (max-width: 900px) {
    .contact-main__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contact-general__grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .contact-masthead__headline {
        font-size: 2rem;
    }
    
    .contact-general {
        padding: 40px 0;
    }
    
    .contact-general__header h2 {
        font-size: 1.2rem;
    }
    
    .contact-general__grid {
        flex-direction: column;
    }
    
    .contact-general-card {
        min-width: auto;
    }
    
    .contact-team {
        padding: 24px;
    }
    
    .contact-form-wrapper {
        padding: 24px;
    }
    
    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .contact-response-bar {
        flex-direction: column;
        text-align: center;
        border-radius: 28px;
    }
    
    .contact-response-bar__left {
        flex-direction: column;
    }
}

@media (max-width: 550px) {
    .contact-team-member {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-team__header,
    .contact-form__header {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-general__header {
        flex-direction: column;
        text-align: center;
    }
}
/* ============================================================
   PRIVACY POLICY PAGE — Simple, Clean, Document Style
   No card designs, no hover effects, just readable content
   ============================================================ */

/* Hero Section */
.pp-hero {
    background: var(--col-ivory);
    padding: 40px 0 48px;
    border-bottom: 1px solid var(--col-border);
    text-align: center;
}

.pp-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pp-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
}

.pp-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
    text-decoration: none;
}

.pp-breadcrumb a:hover {
    color: var(--col-accent);
}

.pp-breadcrumb i {
    font-size: 0.65rem;
    color: var(--col-muted);
}

.pp-breadcrumb span {
    color: var(--col-accent);
    font-weight: 500;
}

.pp-hero-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--col-ink);
    line-height: 1.2;
    margin: 0;
}

.pp-hero-title span {
    color: var(--col-accent);
    font-style: italic;
}

.pp-hero-meta {
    font-size: 0.8rem;
    color: var(--col-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-hero-meta i {
    color: var(--col-accent);
}

/* Policy Body — Simple Document Style */
.pp-body {
    background: var(--col-white);
    padding: 60px 0 80px;
}

.pp-content {
    max-width: 960px;
    margin: 0 auto;
}

/* Simple Section Styling — No Cards */
.pp-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--col-border);
}

.pp-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pp-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 20px;
}

.pp-section p {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 16px;
}

.pp-section p:last-child {
    margin-bottom: 0;
}

/* Simple List Styling */
.pp-section ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px;
}

.pp-section ul li {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.pp-section ul li::before {
    content: "•";
    color: var(--col-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.pp-section ul li strong {
    color: var(--col-ink);
    font-weight: 600;
}

/* Simple Highlight Box */
.pp-highlight-box {
    background: var(--col-ivory);
    border-left: 3px solid var(--col-accent);
    padding: 18px 24px;
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: var(--col-ink-mid);
    line-height: 1.65;
}

.pp-highlight-box strong {
    color: var(--col-accent);
}

/* Links */
.pp-section a {
    color: var(--col-accent);
    text-decoration: none;
}

.pp-section a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .pp-hero {
        padding: 32px 0 40px;
    }
    
    .pp-hero-title {
        font-size: 1.8rem;
    }
    
    .pp-body {
        padding: 40px 0 60px;
    }
    
    .pp-section {
        margin-bottom: 36px;
        padding-bottom: 36px;
    }
    
    .pp-section h2 {
        font-size: 1.25rem;
    }
    
    .pp-section p,
    .pp-section ul li {
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .pp-hero {
        padding: 28px 0 36px;
    }
    
    .pp-hero-title {
        font-size: 1.6rem;
    }
    
    .pp-body {
        padding: 32px 0 48px;
    }
    
    .pp-section {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
    
    .pp-highlight-box {
        padding: 14px 18px;
    }
}
/* ============================================================
   TERMS & CONDITIONS PAGE — Simple, Clean, Document Style
   No card designs, no hover effects, just readable content
   ============================================================ */

/* Hero Section */
.tc-hero {
    background: var(--col-ivory);
    border-bottom: 1px solid var(--col-border);
    text-align: center;
}

.tc-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tc-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
}

.tc-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
    text-decoration: none;
}

.tc-breadcrumb a:hover {
    color: var(--col-accent);
}

.tc-breadcrumb i {
    font-size: 0.65rem;
    color: var(--col-muted);
}

.tc-breadcrumb span {
    color: var(--col-accent);
    font-weight: 500;
}

.tc-hero-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--col-ink);
    line-height: 1.2;
    margin: 0;
}

.tc-hero-title span {
    color: var(--col-accent);
    font-style: italic;
}

.tc-hero-meta {
    font-size: 0.8rem;
    color: var(--col-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-hero-meta i {
    color: var(--col-accent);
}

/* Terms Body — Simple Document Style */
.tc-body {
    background: var(--col-white);
    padding: 60px 0 80px;
}

.tc-content {
    max-width: 960px;
    margin: 0 auto;
}

/* Simple Section Styling — No Icons, No Cards */
.tc-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--col-border);
}

.tc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tc-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 20px;
}

.tc-section p {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 16px;
}

.tc-section p:last-child {
    margin-bottom: 0;
}

/* Simple List Styling */
.tc-section ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px;
}

.tc-section ul li {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.tc-section ul li::before {
    content: "•";
    color: var(--col-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.tc-section ul li strong {
    color: var(--col-ink);
    font-weight: 600;
}

/* Simple Highlight Box */
.tc-highlight-box {
    background: var(--col-ivory);
    border-left: 3px solid var(--col-accent);
    padding: 18px 24px;
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: var(--col-ink-mid);
    line-height: 1.65;
}

.tc-highlight-box strong {
    color: var(--col-accent);
}

/* Links */
.tc-section a {
    color: var(--col-accent);
    text-decoration: none;
}

.tc-section a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .tc-hero {
        padding: 32px 0 40px;
    }
    
    .tc-hero-title {
        font-size: 1.8rem;
    }
    
    .tc-body {
        padding: 40px 0 60px;
    }
    
    .tc-section {
        margin-bottom: 36px;
        padding-bottom: 36px;
    }
    
    .tc-section h2 {
        font-size: 1.25rem;
    }
    
    .tc-section p,
    .tc-section ul li {
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .tc-hero {
        padding: 28px 0 36px;
    }
    
    .tc-hero-title {
        font-size: 1.6rem;
    }
    
    .tc-body {
        padding: 32px 0 48px;
    }
    
    .tc-section {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
    
    .tc-highlight-box {
        padding: 14px 18px;
    }
}
/* ============================================================
   REFUND POLICY PAGE — Simple, Clean, Document Style
   No card designs, no hover effects on sections
   Table and badges kept for clarity
   ============================================================ */

/* Hero Section */
.rp-hero {
    background: var(--col-ivory);
    padding: 40px 0 48px;
    border-bottom: 1px solid var(--col-border);
    text-align: center;
}

.rp-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rp-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
}

.rp-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
    text-decoration: none;
}

.rp-breadcrumb a:hover {
    color: var(--col-accent);
}

.rp-breadcrumb i {
    font-size: 0.65rem;
    color: var(--col-muted);
}

.rp-breadcrumb span {
    color: var(--col-accent);
    font-weight: 500;
}

.rp-hero-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--col-ink);
    line-height: 1.2;
    margin: 0;
}

.rp-hero-title span {
    color: var(--col-accent);
    font-style: italic;
}

.rp-hero-meta {
    font-size: 0.8rem;
    color: var(--col-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rp-hero-meta i {
    color: var(--col-accent);
}

/* Refund Policy Body — Simple Document Style */
.rp-body {
    background: var(--col-white);
    padding: 60px 0 80px;
}

.rp-content {
    max-width: 960px;
    margin: 0 auto;
}

/* Simple Section Styling — No Icons, No Cards */
.rp-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--col-border);
}

.rp-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.rp-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-ink);
    margin-bottom: 20px;
}

.rp-section p {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.75;
    margin-bottom: 16px;
}

.rp-section p:last-child {
    margin-bottom: 0;
}

/* Simple List Styling */
.rp-section ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px;
}

.rp-section ul li {
    font-size: 0.95rem;
    color: var(--col-ink-light);
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.rp-section ul li::before {
    content: "•";
    color: var(--col-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Simple Highlight Box */
.rp-highlight-box {
    background: var(--col-ivory);
    border-left: 3px solid var(--col-accent);
    padding: 18px 24px;
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: var(--col-ink-mid);
    line-height: 1.65;
}

.rp-highlight-box strong {
    color: var(--col-accent);
}

/* Table Styles — Clean & Readable */
.rp-table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid var(--col-border);
    border-radius: 12px;
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.rp-table th {
    background: var(--col-ivory);
    color: var(--col-ink);
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--col-border);
}

.rp-table td {
    padding: 13px 16px;
    color: var(--col-ink-light);
    border-bottom: 1px solid var(--col-border);
    vertical-align: top;
}

.rp-table tr:last-child td {
    border-bottom: none;
}

/* Badges — Clean & Simple */
.rp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
}

.rp-badge-full {
    background: #E8F5E9;
    color: #2E7D32;
}

.rp-badge-partial {
    background: #FFF3E0;
    color: #E65100;
}

.rp-badge-none {
    background: #FFEBEE;
    color: #C62828;
}

/* Links */
.rp-section a {
    color: var(--col-accent);
    text-decoration: none;
}

.rp-section a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .rp-hero {
        padding: 32px 0 40px;
    }
    
    .rp-hero-title {
        font-size: 1.8rem;
    }
    
    .rp-body {
        padding: 40px 0 60px;
    }
    
    .rp-section {
        margin-bottom: 36px;
        padding-bottom: 36px;
    }
    
    .rp-section h2 {
        font-size: 1.25rem;
    }
    
    .rp-section p,
    .rp-section ul li {
        font-size: 0.9rem;
    }
    
    .rp-table th,
    .rp-table td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
}

@media (max-width: 600px) {
    .rp-hero {
        padding: 28px 0 36px;
    }
    
    .rp-hero-title {
        font-size: 1.6rem;
    }
    
    .rp-body {
        padding: 32px 0 48px;
    }
    
    .rp-section {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
    
    .rp-highlight-box {
        padding: 14px 18px;
    }
    
    .rp-table th,
    .rp-table td {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    .rp-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
}
/* ============================================================
   404 PAGE — Premium Error Page (Matches Why Us Design)
   Friendly, helpful, and on-brand
   ============================================================ */

/* ────────────────────────────────────────
   ERROR MASTHEAD — Premium (Matches Why Us)
   ──────────────────────────────────────── */
.error-masthead {
    background: var(--col-ivory);
    padding: 42px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--col-border);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.error-masthead__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(8rem, 20vw, 18rem);
    font-weight: 700;
    color: rgba(28, 26, 24, 0.02);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.error-masthead__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 80px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.error-masthead__content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Breadcrumb */
.error-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--col-muted);
    margin-bottom: 32px;
}

.error-breadcrumb a {
    color: var(--col-muted);
    transition: color 0.25s ease;
    text-decoration: none;
}

.error-breadcrumb a:hover { color: var(--col-accent); }

.error-breadcrumb__sep svg { color: var(--col-border-warm); }

.error-breadcrumb__current {
    color: var(--col-accent);
    font-weight: 500;
}

/* Error Code */
.error-code {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 800;
    color: var(--col-accent);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

/* Headline */
.error-masthead__headline {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--col-ink);
    line-height: 1.2;
    margin-bottom: 16px;
}

.error-masthead__headline span {
    color: var(--col-accent);
    font-style: italic;
}

.error-masthead__lead {
    font-size: 1rem;
    color: var(--col-ink-light);
    line-height: 1.65;
    margin-bottom: 32px;
}

/* Action Buttons */
.error-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.error-btn--primary {
    background: var(--col-accent);
    color: var(--col-white);
    border: none;
}

.error-btn--primary:hover {
    background: var(--col-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(224, 90, 32, 0.25);
}

.error-btn--outline {
    background: transparent;
    color: var(--col-accent);
    border: 2px solid var(--col-accent);
}

.error-btn--outline:hover {
    background: var(--col-accent-pale);
    transform: translateY(-2px);
}

/* Quick Links */
.error-quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid var(--col-border);
}

.error-quick-links span {
    font-size: 0.8rem;
    color: var(--col-muted);
}

.error-quick-links a {
    font-size: 0.8rem;
    color: var(--col-ink-mid);
    text-decoration: none;
    transition: color 0.25s ease;
}

.error-quick-links a:hover {
    color: var(--col-accent);
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 768px) {
    .error-masthead__inner {
        padding: 0 20px 60px;
    }
    
    .error-code {
        font-size: 5rem;
    }
    
    .error-masthead__headline {
        font-size: 2rem;
    }
    
    .error-masthead__lead {
        font-size: 0.9rem;
    }
    
    .error-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .error-btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
    
    .error-quick-links {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .error-masthead {
        min-height: 70vh;
    }
    
    .error-code {
        font-size: 4rem;
    }
    
    .error-masthead__headline {
        font-size: 1.6rem;
    }
    
    .error-masthead__lead br {
        display: none;
    }
}