/* ============================================
   TATVA INTERIORS — Premium Design System
   ============================================ */

/* ── CSS Custom Properties (Design Tokens) ── */
/*
   Single unified token set for the whole site.
   The homepage's palette (--hp-*) is canonical — every page draws
   from the same values now, so no page can visually drift from it.
   --clr-* names are kept as aliases so existing component CSS
   (buttons, cards, page sections) doesn't need to be rewritten;
   they just automatically pick up the homepage's exact colors.
*/
:root {
    /* Homepage palette — canonical brand colors */
    --hp-teal:   #2F5852;
    --hp-teal2:  #43796F;
    --hp-terra:  #A96B4C;
    --hp-sand:   #C08A5E;
    --hp-cream:  #F6F2EA;
    --hp-sage:   #9DB3A4;
    --hp-ink:    #161B19;
    --hp-mut:    #6C7671;
    --hp-line:   rgba(22, 27, 25, .11);

    /* Brand Colors — aliased to the homepage palette above */
    --clr-teal:        var(--hp-teal);
    --clr-teal-dark:   #1D3733;
    --clr-teal-light:  var(--hp-teal2);
    --clr-terracotta:  var(--hp-terra);
    --clr-terracotta-dark: #8A5640;
    --clr-terracotta-light: var(--hp-sand);
    --clr-cream:       var(--hp-cream);
    --clr-ivory:       #FAF7F2;
    --clr-warm-gray:   #E8DDD0;

    /* Neutrals */
    --clr-black:       var(--hp-ink);
    --clr-dark:        #2A2A2A;
    --clr-gray-900:    #333333;
    --clr-gray-700:    #555555;
    --clr-gray-500:    #888888;
    --clr-gray-300:    #BBBBBB;
    --clr-gray-100:    #EEEEEE;
    --clr-white:       #FFFFFF;

    /* Accent & State */
    --clr-gold:        #C9A96E;
    --clr-success:     #4CAF50;
    --clr-error:       #E53935;

    /* Typography */
    --ff-heading:      'Cormorant Garamond', 'Georgia', serif;
    --ff-body:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fw-light:        300;
    --fw-regular:      400;
    --fw-medium:       500;
    --fw-semibold:     600;
    --fw-bold:         700;

    /* Font Sizes (fluid) */
    --fs-xs:     clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --fs-sm:     clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --fs-base:   clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    --fs-md:     clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    --fs-lg:     clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    --fs-xl:     clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    --fs-2xl:    clamp(1.6rem, 1.3rem + 1.5vw, 2.5rem);
    --fs-3xl:    clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --fs-4xl:    clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
    --fs-hero:   clamp(3rem, 2rem + 5vw, 7rem);

    /* Spacing */
    --sp-xs:     0.25rem;
    --sp-sm:     0.5rem;
    --sp-md:     1rem;
    --sp-lg:     1.5rem;
    --sp-xl:     2rem;
    --sp-2xl:    3rem;
    --sp-3xl:    4rem;
    --sp-4xl:    6rem;
    --sp-5xl:    8rem;
    --sp-section: clamp(4rem, 3rem + 5vw, 8rem);

    /* Layout */
    --container-max: 1280px;
    --container-wide: 1440px;
    --container-narrow: 800px;

    /* Borders & Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
    --shadow-xl:   0 16px 60px rgba(0,0,0,0.16);
    --shadow-glow: 0 0 40px rgba(46, 107, 98, 0.15);

    /* Transitions */
    --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow:   0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Z-Index Scale */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-cursor:   9999;

    /* Height of the homepage's fixed mobile CTA bar (.hp-sticky). Anything
       that has to sit clear of it references this rather than repeating the
       number, which is how the back-to-top button ended up overlapping it. */
    --sticky-cta-h: 62px;
}


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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.7;
    color: var(--clr-gray-900);
    background-color: var(--clr-ivory);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    color: var(--clr-black);
}

::selection {
    background: var(--clr-teal);
    color: var(--clr-white);
}


/* ── Layout ── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-xl);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--sp-section) 0;
    /* .reveal--left/--right slide in via translateX() before they're visible;
       on narrow viewports that pre-animation offset can extend past the
       viewport edge and widen the whole page's scrollable area. Clipping
       it here keeps the slide-in effect without ever causing overflow. */
    overflow-x: clip;
}

.section--dark {
    background-color: var(--clr-black);
    color: var(--clr-cream);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--clr-cream);
}

.section--teal {
    background-color: var(--clr-teal-dark);
    color: var(--clr-cream);
}

.section--teal h1,
.section--teal h2,
.section--teal h3,
.section--teal h4 {
    color: var(--clr-cream);
}

.section--cream {
    background-color: var(--clr-cream);
}


/* ── Typography Utilities ── */
.section-label {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clr-terracotta);
    margin-bottom: var(--sp-md);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.section-label::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--clr-terracotta);
}

/* Matches the homepage's section H2 (.index-page .hp-section h2) exactly.
   These previously used --fs-3xl at weight 300, which rendered 56px against
   the homepage's 46px — inner pages were shouting louder than the homepage,
   and Cormorant at 300 vs 500 reads as a different typeface. The tokens are
   left alone because eight other rules depend on them. */
.section-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: var(--fw-medium);
    letter-spacing: -.01em;
    margin-bottom: var(--sp-lg);
    line-height: 1.15;
}

.section-title em {
    font-style: italic;
    color: var(--clr-teal);
}

.section-subtitle {
    font-size: var(--fs-md);
    color: var(--clr-gray-700);
    max-width: 600px;
    line-height: 1.8;
}


/* ── Buttons ──
   Same visual language as the homepage's .hp-gh/.hp-btn: soft
   rounded-rect (not a hard pill or a near-square corner), sentence
   case, no letter-spacing gimmicks. .btn is the one system used
   everywhere now — hp-gh/hp-gh2/hp-btn stay as homepage-only
   aliases so index.php markup doesn't need to change. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    font-family: var(--ff-body);
    font-weight: var(--fw-semibold);
    font-size: 15px;
    padding: 15px 30px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
}

.btn svg {
    transition: transform var(--transition-base);
}

.btn:hover svg {
    transform: translateX(4px);
}

/* Primary */
.btn--primary {
    background: var(--clr-teal);
    color: var(--clr-white);
    border-color: var(--clr-teal);
}

.btn--primary:hover {
    background: var(--clr-teal-dark);
    border-color: var(--clr-teal-dark);
    box-shadow: 0 8px 24px rgba(47, 88, 82, 0.28);
    transform: translateY(-2px);
}

/* Accent (Terracotta) */
.btn--accent {
    background: var(--clr-terracotta);
    color: var(--clr-white);
    border-color: var(--clr-terracotta);
}

.btn--accent:hover {
    background: var(--clr-terracotta-dark);
    border-color: var(--clr-terracotta-dark);
    box-shadow: 0 8px 24px rgba(169, 107, 76, 0.3);
    transform: translateY(-2px);
}

/* Outline — for light surfaces (cards, light hero, white sections) */
.btn--outline {
    background: transparent;
    color: var(--clr-teal);
    border-color: var(--clr-teal);
}

.btn--outline:hover {
    background: var(--clr-teal);
    color: var(--clr-white);
    transform: translateY(-2px);
}

/* Outline-dark — reserved for use directly on a dark surface */
.btn--outline-dark {
    background: transparent;
    color: var(--clr-white);
    border-color: rgba(255, 255, 255, .5);
}

.btn--outline-dark:hover {
    background: var(--clr-white);
    color: var(--clr-black);
    border-color: var(--clr-white);
}

/* Ghost */
.btn--ghost {
    background: transparent;
    color: var(--clr-teal);
    padding: 10px 0;
    border: none;
}

.btn--ghost:hover {
    color: var(--clr-teal-dark);
}

/* Sizes */
.btn--sm {
    padding: 10px 20px;
    font-size: var(--fs-xs);
}

.btn--lg {
    padding: 18px 42px;
    font-size: var(--fs-sm);
}


/* ── Preloader ── */
/* ============================================
   BRAND INTRO
   Plays once per session (gated by the inline
   script in header.php). The whole sequence is
   CSS-driven, so it still clears itself if
   JavaScript never runs.
   Timeline: 0s logo -> 0.3s wordmark -> 0.9s rule
             -> 1.1s subtitle -> 1.55s fade
             -> 1.75s panels split -> 2.55s gone
   ============================================ */

/* Already seen this session: never render it at all */
html.intro-seen .preloader {
    display: none !important;
}

/* Hold the page still while the intro plays */
body.intro-lock {
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: introRetire 0s linear 2.55s forwards;
}

@keyframes introRetire {
    to { visibility: hidden; pointer-events: none; }
}

/* Manual dismissal (JS safety net) */
.preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease, visibility .5s ease;
}

/* ── Split panels ── */
.preloader__panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50.4%;
    will-change: transform;
    /* One gradient sized to the whole viewport, anchored differently in each
       half, so the two panels read as a single seamless surface. */
    background-image: linear-gradient(160deg, #FBF9F5 0%, var(--clr-cream) 60%, #EDE7DB 100%);
    background-size: 100% 100vh;
    background-repeat: no-repeat;
}

.preloader__panel--top {
    top: 0;
    background-position: left top;
    animation: introPanelUp .9s cubic-bezier(.76, 0, .24, 1) 1.75s forwards;
}

.preloader__panel--bottom {
    bottom: 0;
    background-position: left bottom;
    animation: introPanelDown .9s cubic-bezier(.76, 0, .24, 1) 1.75s forwards;
}

@keyframes introPanelUp   { to { transform: translateY(-100.5%); } }
@keyframes introPanelDown { to { transform: translateY(100.5%); } }

/* ── Centre content ── */
.preloader__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: introContentOut .45s cubic-bezier(.6, 0, .8, .2) 1.55s forwards;
}

@keyframes introContentOut {
    to { opacity: 0; transform: translateY(-14px); }
}

/* Logo mark — the artwork sits on its own cream ground,
   so the rounded tile blends into the panel behind it. */
.preloader__mark {
    width: 96px;
    height: 96px;
    border-radius: 26px;
    overflow: hidden;
    background: #EDE9DE;
    box-shadow: 0 22px 48px -20px rgba(30, 74, 68, .45),
                0 0 0 1px rgba(46, 107, 98, .08);
    opacity: 0;
    transform: scale(.84);
    animation: introMarkIn .85s cubic-bezier(.2, .85, .25, 1) .1s forwards;
}

.preloader__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes introMarkIn {
    to { opacity: 1; transform: scale(1); }
}

/* Wordmark — letters rise out of a mask */
.preloader__word {
    display: flex;
    margin-top: 26px;
    overflow: hidden;
    padding-bottom: .08em;
}

.preloader__word span {
    display: block;
    font-family: var(--ff-heading);
    font-size: clamp(38px, 8vw, 62px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: .22em;
    color: var(--clr-teal-dark);
    transform: translateY(115%);
    animation: introLetterUp .8s cubic-bezier(.2, .85, .25, 1) forwards;
}

.preloader__word span:nth-child(1) { animation-delay: .30s; }
.preloader__word span:nth-child(2) { animation-delay: .37s; }
.preloader__word span:nth-child(3) { animation-delay: .44s; }
.preloader__word span:nth-child(4) { animation-delay: .51s; }
.preloader__word span:nth-child(5) { animation-delay: .58s; }

@keyframes introLetterUp {
    to { transform: translateY(0); }
}

/* Hairline rule sweeping out from the centre */
.preloader__rule {
    width: min(190px, 46vw);
    height: 1px;
    margin-top: 20px;
    background: linear-gradient(90deg, transparent, var(--clr-terracotta) 22%, var(--clr-terracotta) 78%, transparent);
    transform: scaleX(0);
    animation: introRuleIn .75s cubic-bezier(.76, 0, .24, 1) .9s forwards;
}

@keyframes introRuleIn {
    to { transform: scaleX(1); }
}

.preloader__sub {
    margin-top: 16px;
    font-size: clamp(9.5px, 2.4vw, 11.5px);
    font-weight: 600;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--clr-gray-500);
    opacity: 0;
    transform: translateY(8px);
    animation: introSubIn .65s ease .1s forwards;
    animation-delay: 1.1s;
}

@keyframes introSubIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion: show the lockup briefly, then clear it */
@media (prefers-reduced-motion: reduce) {
    .preloader {
        animation: introRetire 0s linear 1s forwards;
    }
    .preloader__mark,
    .preloader__word span,
    .preloader__rule,
    .preloader__sub,
    .preloader__inner {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .preloader__panel--top,
    .preloader__panel--bottom {
        animation: introFadePanel .4s ease .6s forwards;
    }
    @keyframes introFadePanel {
        to { opacity: 0; }
    }
}


/* ── Custom Cursor ── */
.cursor-follower,
.cursor-dot {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .cursor-follower {
        display: block;
        position: fixed;
        width: 36px;
        height: 36px;
        border: 1px solid var(--clr-teal);
        border-radius: 50%;
        pointer-events: none;
        z-index: var(--z-cursor);
        transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }

    .cursor-dot {
        display: block;
        position: fixed;
        width: 6px;
        height: 6px;
        background: var(--clr-terracotta);
        border-radius: 50%;
        pointer-events: none;
        z-index: var(--z-cursor);
        transform: translate(-50%, -50%);
        transition: transform 0.08s ease;
    }

    .cursor-follower.hover {
        width: 60px;
        height: 60px;
        border-color: var(--clr-terracotta);
        opacity: 0.3;
    }
}


/* ── Header / Navigation ── */
.header {
    position: fixed;
    isolation: isolate;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-sticky);
    padding: var(--sp-lg) 0;
    transition: all var(--transition-smooth);
}

.header--scrolled {
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--sp-md) 0;
    box-shadow: 0 1px 20px rgba(0,0,0,0.05);
}

.global-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--clr-terracotta);
    width: 0%;
    z-index: 10;
    will-change: width;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    z-index: var(--z-modal);
}

.nav__logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: transform var(--transition-base);
}

.nav__logo:hover .nav__logo-img {
    transform: scale(1.05);
}

.nav__logo-text {
    display: flex;
    flex-direction: column;
}

.nav__brand {
    font-family: var(--ff-heading);
    font-size: 1.3rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    color: var(--clr-black);
    line-height: 1;
}

.nav__sub {
    font-size: 0.55rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--clr-terracotta);
    line-height: 1;
    margin-top: 2px;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-2xl);
}

.nav__link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--clr-gray-700);
    position: relative;
    padding: var(--sp-xs) 0;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--clr-teal);
    transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link--active {
    color: var(--clr-teal);
}

.nav__link:hover::after,
.nav__link--active::after {
    width: 100%;
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
}

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    z-index: var(--z-modal);
    padding: 4px 0;
}

.nav__toggle-bar {
    width: 100%;
    height: 2px;
    background: var(--clr-black);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    transform-origin: center;
}

.nav__toggle.active .nav__toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle.active .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav__toggle.active .nav__toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav Overlay */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: var(--clr-ivory);
    z-index: var(--z-overlay);
    transition: right var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav--open {
    right: 0;
}

.mobile-nav__content {
    text-align: center;
}

.mobile-nav__list {
    margin-bottom: var(--sp-3xl);
}

.mobile-nav__item {
    margin-bottom: var(--sp-lg);
}

.mobile-nav__link {
    font-family: var(--ff-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-light);
    color: var(--clr-black);
    transition: color var(--transition-base);
}

.mobile-nav__link:hover,
.mobile-nav__link--active {
    color: var(--clr-teal);
}

.mobile-nav__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    align-items: center;
}

.mobile-nav__phone,
.mobile-nav__email {
    font-size: var(--fs-sm);
    color: var(--clr-gray-700);
}

.mobile-nav__social {
    display: flex;
    gap: var(--sp-lg);
    margin-top: var(--sp-md);
}

.mobile-nav__social a {
    color: var(--clr-gray-700);
    transition: color var(--transition-base);
}

.mobile-nav__social a:hover {
    color: var(--clr-teal);
}


/* ── Hero Section ── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--clr-black);
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transform: scale(1.05);
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.15); }
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.8) 0%,
        rgba(46, 107, 98, 0.3) 50%,
        rgba(26, 26, 26, 0.7) 100%
    );
    z-index: 2;
}

.hero__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding-top: 80px;
}

.hero__label {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--clr-terracotta-light);
    margin-bottom: var(--sp-xl);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.8s ease forwards 0.5s;
}

.hero__label::before {
    content: '';
    width: 48px;
    height: 1px;
    background: var(--clr-terracotta-light);
}

.hero__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-hero);
    font-weight: var(--fw-light);
    color: var(--clr-cream);
    line-height: 1.05;
    margin-bottom: var(--sp-xl);
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 0.8s ease forwards 0.7s;
}

.hero__title em {
    font-style: italic;
    color: var(--clr-terracotta-light);
}

.hero__subtitle {
    font-size: var(--fs-lg);
    font-weight: var(--fw-light);
    color: rgba(245, 240, 232, 0.7);
    max-width: 550px;
    line-height: 1.8;
    margin-bottom: var(--sp-2xl);
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 0.8s ease forwards 0.9s;
}

.hero__actions {
    display: flex;
    gap: var(--sp-lg);
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 0.8s ease forwards 1.1s;
}

.hero__stats {
    position: absolute;
    bottom: var(--sp-3xl);
    right: var(--sp-2xl);
    z-index: 3;
    display: flex;
    gap: var(--sp-3xl);
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 1.3s;
}

.hero__stat {
    text-align: center;
}

.hero__stat-number {
    font-family: var(--ff-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-light);
    color: var(--clr-cream);
    display: block;
    line-height: 1;
}

.hero__stat-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(245, 240, 232, 0.5);
    margin-top: var(--sp-xs);
}

.hero__scroll {
    position: absolute;
    bottom: var(--sp-2xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    color: rgba(245, 240, 232, 0.4);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: heroFadeUp 0.8s ease forwards 1.5s;
    opacity: 0;
}

.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--clr-terracotta-light), transparent);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollBounce {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.5); opacity: 0.3; }
}


/* ── About Preview Section ── */
.about-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4xl);
    align-items: center;
}

.about-preview__image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-preview__image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.about-preview__image:hover img {
    transform: scale(1.05);
}

.about-preview__accent {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    border: 2px solid var(--clr-terracotta);
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: 0.3;
}

.about-preview__content {
    padding: var(--sp-xl) 0;
}

.about-preview__text {
    font-size: var(--fs-md);
    color: var(--clr-gray-700);
    line-height: 1.9;
    margin-bottom: var(--sp-2xl);
}

.about-preview__highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    margin-bottom: var(--sp-2xl);
}

.about-preview__highlight {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-md);
    background: var(--clr-cream);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.about-preview__highlight:hover {
    transform: translateY(-2px);
}

.about-preview__highlight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--clr-teal);
    color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-preview__highlight-text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-gray-900);
}


/* ── Services Section ── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-xl);
    margin-top: var(--sp-3xl);
}

.service-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-2xl) var(--sp-xl);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--clr-gray-100);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-teal), var(--clr-terracotta));
    transform: scaleX(0);
    transition: transform var(--transition-base);
    transform-origin: left;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

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

.service-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--clr-cream), var(--clr-warm-gray));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-xl);
    color: var(--clr-teal);
    transition: all var(--transition-base);
}

.service-card:hover .service-card__icon {
    background: var(--clr-teal);
    color: var(--clr-white);
    transform: scale(1.1);
}

.service-card__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-md);
}

.service-card__desc {
    font-size: var(--fs-sm);
    color: var(--clr-gray-700);
    line-height: 1.7;
}


/* ── Portfolio Section ── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    margin-top: var(--sp-3xl);
}

.portfolio-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
}

.portfolio-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.portfolio-card:hover img {
    transform: scale(1.08);
}

.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,26,0.9) 0%, rgba(26,26,26,0) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sp-xl);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}

.portfolio-card__category {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clr-terracotta-light);
    margin-bottom: var(--sp-xs);
}

.portfolio-card__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
    color: var(--clr-cream);
    font-weight: var(--fw-regular);
}

.portfolio-card__arrow {
    position: absolute;
    top: var(--sp-lg);
    right: var(--sp-lg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    transform: translate(20px, -20px);
    opacity: 0;
    transition: all var(--transition-base);
}

.portfolio-card:hover .portfolio-card__arrow {
    transform: translate(0, 0);
    opacity: 1;
}


/* ── Process / How It Works ── */
.process-section {
    background: var(--clr-black);
    color: var(--clr-cream);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-xl);
    margin-top: var(--sp-3xl);
    position: relative;
}

/* Each step draws its own connector out to the next one, rather than a
   single absolutely-positioned line across the whole grid — that broke
   the moment 8 steps wrapped to a second row, since one straight line
   can't span two. This scales to any row count automatically: it stops
   at the last column of every row (nth-child(4n)) and at the final step. */
.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.process-step::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: calc(100% + var(--sp-xl));
    height: 1px;
    background: linear-gradient(90deg, var(--clr-teal), var(--clr-terracotta));
    z-index: 0;
}

.process-step:nth-child(4n)::after,
.process-step:last-child::after {
    content: none;
}

.process-step__number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--clr-dark);
    border: 2px solid var(--clr-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-xl);
    font-family: var(--ff-heading);
    font-size: var(--fs-2xl);
    color: var(--clr-teal);
    transition: all var(--transition-base);
}

.process-step:hover .process-step__number {
    background: var(--clr-teal);
    color: var(--clr-white);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(46, 107, 98, 0.4);
}

.process-step__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
    color: var(--clr-cream);
    margin-bottom: var(--sp-sm);
}

.process-step__desc {
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
    line-height: 1.7;
}


/* ── Testimonials ── */
.testimonials-section {
    background: var(--clr-cream);
}

.testimonial-slider {
    position: relative;
    overflow: hidden;
    margin-top: var(--sp-3xl);
}

.testimonial-track {
    display: flex;
    transition: transform var(--transition-smooth);
}

.testimonial-card {
    min-width: 100%;
    padding: 0 var(--sp-2xl);
}

.testimonial-card__inner {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-3xl);
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-card__quote {
    font-family: var(--ff-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-light);
    font-style: italic;
    color: var(--clr-gray-900);
    line-height: 1.6;
    margin-bottom: var(--sp-2xl);
    position: relative;
}

.testimonial-card__quote::before {
    content: '"';
    font-size: 6rem;
    color: var(--clr-teal);
    opacity: 0.15;
    position: absolute;
    top: -30px;
    left: -10px;
    font-family: var(--ff-heading);
    line-height: 1;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
}

.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-teal), var(--clr-terracotta));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-family: var(--ff-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
}

.testimonial-card__name {
    font-weight: var(--fw-semibold);
    color: var(--clr-black);
    font-size: var(--fs-base);
}

.testimonial-card__role {
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
}

.testimonial-card__stars {
    display: flex;
    gap: 2px;
    color: var(--clr-gold);
    margin-top: var(--sp-xs);
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    gap: var(--sp-md);
    margin-top: var(--sp-2xl);
}

.testimonial-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--clr-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-700);
    transition: all var(--transition-base);
}

.testimonial-btn:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    background: var(--clr-white);
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-gray-300);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.testimonial-dot--active {
    background: var(--clr-teal);
    width: 24px;
    border-radius: var(--radius-full);
}


/* ── Stats Counter ── */
.stats-section {
    background: var(--clr-teal-dark);
    padding: var(--sp-4xl) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-xl);
    text-align: center;
}

.stat-item {
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(255,255,255,0.15);
}

.stat-item__number {
    font-family: var(--ff-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-light);
    color: var(--clr-cream);
    line-height: 1;
    margin-bottom: var(--sp-sm);
}

.stat-item__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(245, 240, 232, 0.6);
}


/* ── Style Quiz Teaser ── */
.quiz-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

.quiz-teaser__visual {
    position: relative;
    overflow: hidden;
}

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

.quiz-teaser__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-4xl);
    background: var(--clr-warm-gray);
}

.quiz-teaser__title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-lg);
}

.quiz-teaser__text {
    font-size: var(--fs-md);
    color: var(--clr-gray-700);
    line-height: 1.8;
    margin-bottom: var(--sp-2xl);
}

.quiz-styles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-2xl);
}

.quiz-style-card {
    padding: var(--sp-lg);
    background: var(--clr-white);
    border-radius: var(--radius-md);
    text-align: center;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
}

.quiz-style-card:hover {
    border-color: var(--clr-teal);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.quiz-style-card__icon {
    font-size: 2rem;
    margin-bottom: var(--sp-sm);
}

.quiz-style-card__name {
    font-family: var(--ff-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}


/* ── Footer ── */
.footer-cta {
    background: linear-gradient(135deg, var(--clr-teal-dark) 0%, var(--clr-teal) 100%);
    padding: var(--sp-2xl) 0;
}

.footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2xl);
}

.footer-cta__title {
    font-size: var(--fs-3xl);
    color: var(--clr-cream);
    font-weight: var(--fw-light);
}

.footer-cta__title em {
    font-style: italic;
    color: var(--clr-terracotta-light);
}

.footer-cta__text {
    font-size: var(--fs-md);
    color: rgba(245, 240, 232, 0.7);
    margin-top: var(--sp-sm);
}

.footer__main {
    background: var(--clr-black);
    padding: var(--sp-2xl) 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--sp-3xl);
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
}

.footer__logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.footer__logo-brand {
    font-family: var(--ff-heading);
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    color: var(--clr-cream);
    display: block;
    line-height: 1;
}

.footer__logo-sub {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-terracotta);
    display: block;
    margin-top: 4px;
}

.footer__desc {
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
    line-height: 1.8;
    margin-bottom: var(--sp-xl);
}

.footer__social {
    display: flex;
    gap: var(--sp-md);
}

.footer__social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-500);
    transition: all var(--transition-base);
}

.footer__social-link:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    background: rgba(46, 107, 98, 0.1);
}

.footer__col-title {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clr-cream);
    margin-bottom: var(--sp-xl);
}

.footer__links li {
    margin-bottom: var(--sp-md);
}

.footer__links a {
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
    transition: color var(--transition-base);
    position: relative;
}

.footer__links a:hover {
    color: var(--clr-cream);
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
}

.footer__contact svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--clr-terracotta);
}

.footer__contact a {
    color: var(--clr-gray-500);
}

.footer__contact a:hover {
    color: var(--clr-cream);
}

.footer__bottom {
    background: var(--clr-black);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--sp-xl) 0;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--clr-gray-500);
}

.footer__credit {
    color: var(--clr-gray-700);
}


/* ── WhatsApp Float ── */
.whatsapp-float {
    position: fixed;
    bottom: var(--sp-2xl);
    right: var(--sp-2xl);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-sticky);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all var(--transition-base);
    animation: whatsappPulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6), 0 0 0 10px rgba(37, 211, 102, 0.1); }
}


/* ── Back to Top ── */
.back-to-top {
    position: fixed;
    bottom: var(--sp-2xl);
    left: var(--sp-2xl);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-100);
    color: var(--clr-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--clr-teal);
    color: var(--clr-white);
    border-color: var(--clr-teal);
}


/* ── Contact Page ── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4xl);
    margin-top: var(--sp-3xl);
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xl);
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-lg);
    padding: var(--sp-xl);
    background: var(--clr-cream);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.contact-info-card:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.contact-info-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--clr-teal);
    color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-card__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-xs);
}

.contact-info-card__text {
    font-size: var(--fs-sm);
    color: var(--clr-gray-700);
    line-height: 1.7;
}

.contact-info-card__text a {
    color: var(--clr-teal);
    font-weight: var(--fw-medium);
}

/* Contact Form */
.contact-form {
    background: var(--clr-white);
    padding: var(--sp-3xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.contact-form__title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-sm);
}

.contact-form__subtitle {
    font-size: var(--fs-sm);
    color: var(--clr-gray-500);
    margin-bottom: var(--sp-2xl);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.form-group--full {
    grid-column: span 2;
}

.form-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clr-gray-700);
}

.form-input,
.form-select,
.form-textarea {
    padding: 14px 16px;
    border: 1px solid var(--clr-gray-100);
    border-radius: var(--radius-md);
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    color: var(--clr-gray-900);
    background: var(--clr-ivory);
    transition: all var(--transition-base);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--clr-teal);
    box-shadow: 0 0 0 3px rgba(46, 107, 98, 0.1);
    background: var(--clr-white);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
}

.form-submit {
    margin-top: var(--sp-lg);
}


/* ── Page Hero (Inner Pages) ── */
/* Same light, warm gradient as the homepage hero — every page now
   opens on the same surface instead of switching to a black band. */
.page-hero {
    padding: calc(var(--sp-5xl) + 64px) 0 var(--sp-4xl);
    background: linear-gradient(160deg, #EFF3F1 0%, var(--hp-cream) 55%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.page-hero__tri {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.page-hero__tri--1 {
    top: 12%;
    right: -2%;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(157, 179, 164, .35);
    transform: rotate(18deg);
}

.page-hero__tri--2 {
    bottom: -6%;
    left: 6%;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(169, 107, 76, .12);
    transform: rotate(-12deg);
}

.page-hero__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--clr-terracotta);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
    position: relative;
}

.page-hero__label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--clr-terracotta);
}

/* Matches the homepage hero H1 (.hp-hero h1) exactly — same clamp, same
   weight. This was --fs-4xl at weight 300, rendering 79px against the
   homepage's 62px, so the secondary pages had the largest headline on the
   site. Mobile steps mirroring the homepage follow further down. */
.page-hero__title {
    font-size: clamp(35px, 5.6vw, 62px);
    color: var(--hp-ink);
    font-weight: var(--fw-medium);
    letter-spacing: -.01em;
    line-height: 1.08;
    max-width: 700px;
    position: relative;
}

.page-hero__title em {
    font-style: italic;
    color: var(--clr-terracotta);
}

.page-hero__desc {
    font-size: var(--fs-md);
    color: var(--hp-mut);
    max-width: 600px;
    margin-top: var(--sp-lg);
    line-height: 1.8;
    position: relative;
}

.page-hero__breadcrumb {
    margin-top: var(--sp-2xl);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-xs);
    color: var(--hp-mut);
    position: relative;
}

.page-hero__breadcrumb a {
    color: var(--hp-mut);
}

.page-hero__breadcrumb a:hover {
    color: var(--clr-teal);
}

.page-hero__breadcrumb .separator {
    color: var(--clr-gray-300);
}


/* ── About Page Specific ── */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-4xl);
    align-items: center;
}

.about-story__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.about-story__image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.about-story__image::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--clr-terracotta);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: translate(16px, 16px);
    transition: all var(--transition-base);
}

.about-story__image:hover::after {
    opacity: 0.3;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    margin-top: var(--sp-3xl);
}

.value-card {
    text-align: center;
    padding: var(--sp-2xl);
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-gray-100);
    transition: all var(--transition-base);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.value-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--sp-lg);
}

.value-card__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-md);
}

.value-card__desc {
    font-size: var(--fs-sm);
    color: var(--clr-gray-700);
    line-height: 1.8;
}


/* ── Services Page Specific ── */
.service-detail {
    padding: var(--sp-4xl) 0;
    border-bottom: 1px solid var(--clr-gray-100);
    transition: opacity var(--transition-base);
}

/* Filtered out by the category chips — dimmed, not removed, so scroll
   anchors and numbering never shift underneath a visitor. */
.service-detail--muted {
    opacity: .32;
    pointer-events: none;
}

/* ── Top row: image beside the intro text, both roughly the same
   height, so the image never ends up centered awkwardly inside a row
   stretched tall by an unrelated features list underneath it. ── */
.service-detail__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4xl);
    align-items: center;
}

/* Alternating image/text sides via `order`, not the old direction:rtl
   trick — this also means each child can animate independently.
   Only applies once there's room for two columns; see the ≤1024px
   override below, which resets both to source order. */
.service-detail:nth-child(even) .service-detail__image {
    order: 2;
}

.service-detail__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.service-detail__image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-detail__image:hover img {
    transform: scale(1.05);
}

.service-detail__number {
    font-family: var(--ff-heading);
    font-size: var(--fs-4xl);
    color: var(--clr-gray-100);
    font-weight: var(--fw-light);
    line-height: 1;
    margin-bottom: var(--sp-md);
}

.service-detail__title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-lg);
}

.service-detail__desc {
    font-size: var(--fs-md);
    color: var(--clr-gray-700);
    line-height: 1.8;
    margin-bottom: var(--sp-md);
}

/* ── Bottom: key features, full width beneath the image+intro row. ── */
.service-detail__body {
    margin-top: var(--sp-2xl);
}

.service-detail__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-sm) var(--sp-xl);
    margin-bottom: var(--sp-2xl);
}

.service-detail__feature {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--clr-gray-700);
}

.service-detail__feature svg {
    color: var(--clr-teal);
    flex-shrink: 0;
}


/* ── Portfolio Filter ── */
.portfolio-filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-2xl);
    margin-bottom: var(--sp-3xl);
}

.portfolio-filter-btn {
    padding: 12px 28px;
    border-radius: 100px;
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--hp-ink);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    cursor: pointer;
}

.portfolio-filter-btn:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.portfolio-filter-btn--active {
    background: var(--hp-ink);
    color: #ffffff;
    border-color: var(--hp-ink);
    box-shadow: 0 8px 20px rgba(17, 36, 32, 0.2);
}

.portfolio-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
}

.portfolio-masonry .portfolio-card {
    aspect-ratio: auto;
}

.portfolio-masonry .portfolio-card img {
    height: 300px;
}

.portfolio-masonry .portfolio-card:nth-child(3n+1) img {
    height: 400px;
}


/* ── Animations (scroll reveal) ── */
/* Same travel distance and easing curve as the homepage's .hp-reveal,
   so scroll-in motion feels identical across every page. */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

.reveal--left {
    transform: translateX(-40px);
}

.reveal--left.reveal--visible {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(40px);
}

.reveal--right.reveal--visible {
    transform: translateX(0);
}

.reveal--scale {
    transform: scale(0.9);
}

.reveal--scale.reveal--visible {
    transform: scale(1);
}


/* ── Responsive ── */
@media (max-width: 1024px) {
    .nav__list {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid .portfolio-card:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2xl);
    }

    /* 2 columns now, so "last in row" is every 2nd item, not every 4th */
    .process-step::after {
        content: none;
    }
    .process-step:not(:nth-child(2n)):not(:last-child)::after {
        content: '';
        position: absolute;
        top: 40px;
        left: 50%;
        width: calc(100% + var(--sp-2xl));
        height: 1px;
        background: linear-gradient(90deg, var(--clr-teal), var(--clr-terracotta));
        z-index: 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2xl);
    }

    .stat-item::after {
        display: none;
    }

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quiz-teaser {
        grid-template-columns: 1fr;
    }

    .quiz-teaser__visual {
        height: 300px;
    }

    .about-story {
        grid-template-columns: 1fr;
    }

    .about-preview {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Single column: always image-then-text in source order. Without
       this reset, alternating `order` from the 2-column layout would
       carry over and make every other service show text before its
       image for no visual reason once there's no "side" left to swap.
       Gap also drops — var(--sp-4xl) is a horizontal gutter on desktop,
       not a sensible vertical gap between a stacked image and heading. */
    .service-detail__top {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }

    .service-detail:nth-child(even) .service-detail__image {
        order: initial;
    }

    .service-detail__features {
        grid-template-columns: 1fr;
    }

    .service-detail {
        padding: var(--sp-2xl) 0;
    }

    .portfolio-masonry {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    .hero__stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--sp-lg);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid .portfolio-card:nth-child(1) {
        grid-column: span 1;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    /* Single column — a horizontal connector between stacked steps
       doesn't make sense here. */
    .process-step::after {
        content: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr;
    }

    .hero__actions {
        flex-direction: column;
    }

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

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group--full {
        grid-column: span 1;
    }

    .about-values {
        grid-template-columns: 1fr;
    }

    .about-preview__highlights {
        grid-template-columns: 1fr;
    }

    .quiz-styles {
        grid-template-columns: 1fr;
    }

    .portfolio-masonry {
        grid-template-columns: 1fr;
    }

    .portfolio-masonry .portfolio-card img,
    .portfolio-masonry .portfolio-card:nth-child(3n+1) img {
        height: 260px;
    }

    .footer__bottom-inner {
        flex-direction: column;
        gap: var(--sp-sm);
        text-align: center;
    }

    .nav__actions .btn {
        display: none;
    }

    .whatsapp-float {
        bottom: var(--sp-lg);
        right: var(--sp-lg);
    }

    .back-to-top {
        left: var(--sp-lg);
        bottom: var(--sp-lg);
        right: auto;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: clamp(2.2rem, 1.5rem + 4vw, 3.5rem);
    }

    .testimonial-card__inner {
        padding: var(--sp-xl);
    }

    .testimonial-card__quote {
        font-size: var(--fs-xl);
    }

    .contact-form {
        padding: var(--sp-xl);
    }
}


/* ── Utilities ── */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-md); }
.mb-2 { margin-bottom: var(--sp-xl); }
.mb-3 { margin-bottom: var(--sp-2xl); }
.mt-2 { margin-top: var(--sp-xl); }
.mt-3 { margin-top: var(--sp-2xl); }


/* ============================================
   HOMEPAGE — Interactive Brochure Styles
   Tokens now live in the global :root above, so hp- components
   and colors are available site-wide, not just on index.php.
   ============================================ */


/* ── Homepage Wrapper ── */
.hp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Homepage Typography ── */
/* Major section titles — Cormorant Garamond per the client's brand spec,
   matching .section-title on every other page. */
/* Major section titles — Cormorant Garamond per the client's brand spec.
   Weight 500 to match the hero; the inner pages stay at 300 (see
   TYPOGRAPHY.md — the homepage deliberately runs a heavier setting). */
.index-page .hp-section h2 {
    font-family: var(--ff-heading);
    font-size: clamp(28px, 4vw, 46px);
    letter-spacing: -.01em;
    font-weight: var(--fw-medium);
    line-height: 1.15;
    color: var(--hp-ink);
}

.index-page .hp-section h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--hp-terra);
}

.hp-lead {
    color: var(--hp-mut);
    font-size: 16.5px;
    font-weight: 300;
    line-height: 1.75;
    max-width: 56ch;
    margin-top: 14px;
}

.hp-section {
    padding: 78px 0;
}

.hp-shead {
    margin-bottom: 40px;
}

.hp-kick {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hp-terra);
    font-weight: 700;
    margin-bottom: 12px;
}

/* ── HERO SECTION ── */
.hp-hero {
    position: relative;
    background: linear-gradient(160deg, #EFF3F1 0%, var(--hp-cream) 55%, #fff 100%);
    padding: 100px 0 70px;
    overflow: hidden;
}

.hp-tri {
    position: absolute;
    width: 0;
    height: 0;
    opacity: .5;
}

.hp-t1 {
    top: 8%;
    right: -2%;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 120px solid rgba(157, 179, 164, .4);
    opacity: .3;
}

.hp-t2 {
    top: 32%;
    right: 2%;
    border-left: 44px solid transparent;
    border-right: 44px solid transparent;
    border-top: 76px solid rgba(192, 138, 94, .32);
    opacity: .25;
}

.hp-t3 {
    bottom: 6%;
    right: -4%;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    border-bottom: 90px solid rgba(47, 88, 82, .16);
    opacity: .25;
}

.hp-hg {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 3;
}

@media (max-width: 960px) {
    .hp-hg {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }
    .hp-tri { display: none; }
}

.hp-tagpill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--hp-teal);
    color: #fff;
    padding: 8px 17px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
}

.hp-tagpill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hp-sand);
    animation: hpPulse 1.8s infinite;
}

@keyframes hpPulse {
    50% { opacity: .3; }
}

/* Hero heading — Cormorant Garamond per the client's brand spec.
   The tight negative tracking and 800 weight this rule used to carry were
   tuned for Manrope; a high-contrast serif needs neither. */
/* Hero heading — Cormorant Garamond per the client's brand spec.
   Set at 500 rather than the 300 the inner pages use: this is a conversion
   headline, not an informational one, and Cormorant is a high-contrast face
   whose thin strokes get fragile at 300 on mobile. */
.hp-hero h1 {
    font-family: var(--ff-heading);
    font-size: clamp(35px, 5.6vw, 62px);
    line-height: 1.08;
    letter-spacing: -.01em;
    font-weight: var(--fw-medium);
    color: var(--hp-ink);
}

/* Lighter than its parent, so the accent phrase still reads as a second
   voice now that both halves share a family. */
.hp-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--hp-terra);
}

.hp-hb {
    display: flex;
    gap: 11px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.hp-gh {
    background: var(--hp-teal);
    color: #fff;
    text-decoration: none;
    padding: 15px 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    transition: background .25s;
}

.hp-gh:hover {
    background: #24443F;
}

.hp-gh2 {
    background: #fff;
    border: 1px solid var(--hp-line);
    color: var(--hp-ink);
    text-decoration: none;
    padding: 15px 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    transition: all .25s;
}

.hp-gh2:hover {
    background: var(--hp-cream);
}

/* ============================================
   HOMEPAGE — TRUST STRIP (auto-scrolling marquee)
   Sits directly under the hero. Two identical sets
   sit side by side in a flex track; animating the
   track exactly -50% loops seamlessly since the
   second set picks up precisely where the first left off.
   ============================================ */

.hp-trust {
    background: linear-gradient(100deg, var(--hp-teal) 0%, var(--hp-teal2) 100%);
    overflow: hidden;
    padding: 22px 0;
    position: relative;
    z-index: 2;
}

.hp-trust::before,
.hp-trust::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 2;
    pointer-events: none;
}

.hp-trust::before {
    left: 0;
    background: linear-gradient(90deg, var(--hp-teal), transparent);
}

.hp-trust::after {
    right: 0;
    background: linear-gradient(270deg, var(--hp-teal2), transparent);
}

.hp-trust-track {
    display: flex;
    width: max-content;
    animation: hpTrustScroll 32s linear infinite;
}

.hp-trust:hover .hp-trust-track,
.hp-trust:focus-within .hp-trust-track {
    animation-play-state: paused;
}

@keyframes hpTrustScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hp-trust-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hp-trust-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 30px;
    white-space: nowrap;
}

.hp-trust-icon {
    font-size: 17px;
    filter: grayscale(.15);
}

.hp-trust-num {
    font-family: var(--ff-heading);
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
}

.hp-trust-label {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

.hp-trust-dot {
    color: var(--hp-sand);
    font-size: 11px;
    opacity: .8;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hp-trust-track {
        animation: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hp-trust-set[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 640px) {
    .hp-trust {
        padding: 16px 0;
    }
    .hp-trust-item {
        padding: 0 20px;
        gap: 8px;
    }
    .hp-trust-num {
        font-size: 19px;
    }
    .hp-trust-label {
        font-size: 10px;
    }
}

/* ── Interactive Room Explorer (Top-Notch Styling) ── */
.hp-room-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.hp-room-tabs {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px;
    border-radius: 100px;
    border: 1px solid var(--hp-line);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.hp-rtab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-mut);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hp-rtab-icon {
    font-size: 14px;
}

.hp-rtab:hover {
    color: var(--hp-ink);
    background: rgba(255, 255, 255, 0.6);
}

.hp-rtab.on {
    background: var(--hp-teal);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(47, 88, 82, 0.25);
}

.hp-roomwrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 50px -16px rgba(22, 27, 25, 0.25);
    aspect-ratio: 4 / 3;
    background: #e9e3d9;
    animation: hpRoomIn .9s cubic-bezier(.25, .46, .45, .94) .4s both;
}

@keyframes hpRoomIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hp-roomwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
}

.hp-roomwrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 25%, transparent 65%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

@keyframes hpPulse {
    0%   { transform: scale(.8); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}


@media (max-width: 640px) {
    .hp-room-container { gap: 10px; min-width: 0; }
    .hp-room-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 5px;
        border-radius: 16px;
        overflow: visible;
    }
    .hp-rtab {
        flex: none;
        justify-content: flex-start;
        gap: 7px;
        font-size: 11.5px;
        line-height: 1.25;
        text-align: left;
        padding: 9px 10px;
        border-radius: 11px;
        white-space: normal;
        min-height: 42px;
    }
    .hp-rtab-icon { flex-shrink: 0; }
    .hp-roomwrap { border-radius: 14px; }
}

@media (max-width: 400px) {
    .hp-rtab { font-size: 10.5px; padding: 8px; gap: 5px; }
    .hp-rtab-icon svg { width: 14px; height: 14px; }
}

/* ── Mascot / Character ── */
.hp-chr {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.hp-chr-doll {
    width: auto;
    height: 110px;
    flex: none;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-chr.is-visible .hp-chr-doll {
    opacity: 1;
    transform: translateX(0);
}

.hp-avatar-img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}

@keyframes avatarHiWave {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-14deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

@keyframes avatarPointDown {
    0% { transform: translateY(0) rotate(0deg); }
    40% { transform: translateY(7px) rotate(-3deg); }
    70% { transform: translateY(3px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes avatarThumbPop {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.09) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.hp-hero .hp-avatar-img {
    animation: avatarHiWave 1.3s cubic-bezier(0.25, 1, 0.5, 1) 1;
}

.hp-chr.is-visible .hp-chr-doll img[src*="avatar-tatva-point"] {
    animation: avatarPointDown 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.hp-chr.is-visible .hp-chr-doll img[src*="avatar-tatva-thumb"] {
    animation: avatarThumbPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.hp-chr-doll:hover .hp-avatar-img {
    animation: none;
    transform: scale(1.05);
}

.hp-chr-bub {
    background: var(--hp-cream);
    border-radius: 16px 16px 16px 4px;
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--hp-ink);
    max-width: 340px;
    line-height: 1.55;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-chr.is-visible .hp-chr-bub {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
}

.hp-chr-bub b {
    color: var(--hp-terra);
}

/* Dark section character */
.hp-dark .hp-chr-bub {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.hp-dark .hp-chr-bub b {
    color: var(--hp-sand);
}



/* ── Band / Dark sections ── */
.hp-band {
    background: var(--hp-cream);
}

/* Every other dark surface on the page (hero glow, CTA card) uses a gradient;
   this was the one full-bleed flat fill, which read as a heavier, disconnected
   slab against the light sections around it. Gradient + soft glow + a hairline
   seam (reusing the accent-rule motif already used for dividers elsewhere)
   bring it in line with the rest of the site instead of sitting apart from it. */
.hp-dark {
    position: relative;
    background: linear-gradient(155deg, var(--hp-teal) 0%, var(--hp-teal2) 68%, var(--hp-teal) 100%);
    color: #fff;
    overflow: hidden;
}

.hp-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hp-sand), var(--hp-terra), transparent);
    opacity: 0.55;
    z-index: 0;
}

.hp-dark::after {
    content: '';
    position: absolute;
    top: -25%;
    right: -8%;
    width: 55%;
    height: 75%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hp-dark .hp-wrap {
    position: relative;
    z-index: 1;
}

.hp-dark h2 {
    color: #fff !important;
}

.hp-dark .hp-lead {
    color: rgba(255, 255, 255, .7);
}

.hp-dark .hp-kick {
    color: var(--hp-sand);
}

/* ── QUIZ ── */
.hp-quiz {
    background: #fff;
    border: 1px solid var(--hp-line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 22px 54px -32px rgba(22, 27, 25, .45);
    max-width: 660px;
    margin: 0 auto;
}

.hp-qn {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-terra);
    font-weight: 700;
}

.hp-quiz h3 {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 8px 0 20px;
    color: var(--hp-ink);
}

.hp-qops {
    display: grid;
    gap: 10px;
}

.hp-qo {
    border: 1.5px solid var(--hp-line);
    border-radius: 11px;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    background: #fff;
    transition: .16s;
    color: var(--hp-ink);
}

.hp-qo:hover {
    border-color: var(--hp-teal);
    background: rgba(47, 88, 82, .05);
}

.hp-qbar {
    height: 5px;
    background: var(--hp-line);
    border-radius: 10px;
    margin-top: 22px;
    overflow: hidden;
}

.hp-qbar i {
    display: block;
    height: 100%;
    background: var(--hp-teal);
    width: 33%;
    transition: .4s;
}

.hp-qres {
    text-align: center;
}

.hp-qres .hp-em {
    font-size: 44px;
}

.hp-qres h3 {
    font-size: 26px;
    margin: 12px 0 8px;
}

.hp-qres p {
    color: var(--hp-mut);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    max-width: 44ch;
    margin: 0 auto 20px;
}

.hp-qres .hp-pz-big {
    font-family: var(--ff-heading);
    font-size: 37px;
    font-weight: 700;
    color: var(--hp-teal);
    margin-bottom: 6px;
}

/* ── CTA Section ── */
.hp-cta {
    background: linear-gradient(140deg, var(--hp-teal), var(--hp-teal2));
    border-radius: 22px;
    padding: 48px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hp-cta::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(192, 138, 94, .22);
}

.hp-cta > * {
    position: relative;
    z-index: 2;
}

.hp-cta h2 {
    max-width: 18ch;
    color: #fff !important;
}

.hp-cf {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    flex-wrap: wrap;
    max-width: 620px;
}

.hp-cf input {
    flex: 1;
    min-width: 170px;
    border: none;
    border-radius: 10px;
    padding: 15px 18px;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    color: var(--hp-ink);
}

.hp-cf button {
    background: var(--hp-sand);
    border: none;
    border-radius: 10px;
    padding: 15px 28px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    color: var(--hp-ink);
    transition: .25s;
}

.hp-cf button:hover {
    background: #fff;
}

.hp-cn {
    font-size: 13px;
    opacity: .68;
    margin-top: 14px;
}

/* ── Sticky Bottom Bar ── */
/* Mobile only. On desktop the header already carries a Book Consultation
   button, so this bar duplicated the CTA and permanently occupied 62px. */
.hp-sticky {
    display: none;
}

@media (max-width: 860px) {
    .hp-sticky {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background: #fff;
        border-top: 1px solid var(--hp-line);
        display: flex;
        box-shadow: 0 -6px 22px -12px rgba(0, 0, 0, .22);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.hp-sticky a {
    flex: 1;
    text-align: center;
    padding: 15px 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-ink);
    border-right: 1px solid var(--hp-line);
    transition: .2s;
}

.hp-sticky a.hp-st-t {
    background: var(--hp-teal);
    color: #fff;
}

.hp-sticky a.hp-st-g {
    background: #25D366;
    color: #fff;
    border: none;
}

/* Clearance for the sticky bar. This has to sit on body, not main — the footer
   is rendered outside <main>, so padding there left the footer overlapped.
   Everything that has to clear the bar (page bottom, back-to-top, mascot)
   reads --sticky-cta-h, so the bar's height is stated once and they cannot
   drift out of sync with each other. */
/* --sticky-cta-h is measured from the real bar by JS (see main.js) and written
   onto :root, because the bar's height is not a constant — "Free consultation"
   wraps to two lines on narrow screens, and the safe-area padding grows it
   further on devices with a home indicator. The :root value is only a
   pre-script fallback. The measured height already includes the safe area, so
   nothing below adds env() again. */
@media (max-width: 860px) {
    body.index-page {
        padding-bottom: var(--sticky-cta-h);
    }

    /* The button used to sit at bottom:48px — inside the bar's band, and above
       it in the stack (z-index 200 vs 90), so it covered the Call action. */
    body.index-page .back-to-top {
        bottom: calc(var(--sticky-cta-h) + 14px);
    }

    #hpMascot {
        bottom: calc(var(--sticky-cta-h) + 14px);
    }
}

/* ── Homepage Reveal ── */
.hp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: .8s cubic-bezier(.2, .7, .2, 1);
}

.hp-reveal.in {
    opacity: 1;
    transform: none;
}

/* ── Mascot Floating Guide ── */
#hpMascot {
    position: fixed;
    right: 22px;
    bottom: 84px;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    transition: .4s cubic-bezier(.2, .8, .2, 1);
}

#hpMascot.hide {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
}

.hp-mbub {
    background: #fff;
    border: 1px solid var(--hp-line);
    border-radius: 14px 14px 4px 14px;
    padding: 12px 16px;
    max-width: 220px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 14px 34px -16px rgba(22, 27, 25, .4);
    position: relative;
    transition: .3s;
}

.hp-mbub b {
    color: var(--hp-terra);
}

.hp-mclose {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hp-ink);
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
}

.hp-mdoll {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    flex: none;
    padding: 0;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
    animation: mascotBob 3s ease-in-out infinite;
}

@keyframes mascotBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.hp-mdoll:hover {
    transform: scale(1.12) translateY(-2px);
    animation-play-state: paused;
}

.hp-mdoll .hp-avatar-img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hp-mdoll:hover .hp-avatar-img {
    transform: scale(1.05);
}

@media (max-width: 640px) {
    /* Bubble stacks ABOVE the avatar rather than beside it.
       Side by side, the pill needed ~340px to show a sentence — more than a
       phone has once the back-to-top button takes the left corner — so the
       bubble overflowed and pushed the avatar clean off the screen. Stacked,
       the bubble owns the full width on its own row and competes with
       nothing, and the avatar keeps its corner. */
    #hpMascot {
        position: fixed;
        right: 12px;
        bottom: calc(var(--sticky-cta-h) + 14px);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        max-width: none;
    }

    .hp-mbub {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--hp-line);
        /* Card, not a pill — the message wraps to a few lines now.
           Small corner is bottom-right, pointing at the avatar below it. */
        border-radius: 14px 14px 4px 14px;
        padding: 10px 14px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--hp-ink);
        box-shadow: 0 10px 26px -8px rgba(22, 27, 25, 0.28);
        /* Was nowrap + ellipsis, which truncated every guide message to a
           fragment at any phone width. Let it wrap and be readable. */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: min(300px, calc(100vw - 24px));
        line-height: 1.45;
    }

    .hp-mclose {
        top: -4px;
        right: -4px;
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .hp-mdoll {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border: none;
        box-shadow: 0 4px 16px rgba(47, 88, 82, 0.2);
    }

    .hp-chr {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--hp-line);
        border-radius: 16px;
        padding: 12px 15px;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
        margin-bottom: 22px;
        box-shadow: 0 8px 24px -12px rgba(22, 27, 25, 0.12);
    }

    .hp-chr-doll { animation: none; }

    .hp-chr-bub {
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-size: 13px;
        line-height: 1.45;
        max-width: none;
    }

    .hp-hb {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 18px;
    }

    .hp-gh, .hp-gh2 {
        width: 100%;
        text-align: center;
        justify-content: center;
        border-radius: 100px;
        padding: 14px 20px;
        font-size: 14.5px;
    }
}

/* ── Homepage CTA Button (inline) ── */
.hp-btn {
    background: var(--hp-terra);
    color: #fff !important;
    padding: 11px 20px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    transition: .25s;
}

.hp-btn:hover {
    background: #8E5539;
}

/* ── Homepage Responsive ── */
@media (max-width: 960px) {
    .hp-hero {
        padding: 90px 0 40px;
    }
    .hp-hg {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .hp-cta {
        padding: 32px 24px;
    }
    .hp-hero h1 {
        font-size: clamp(34px, 7vw, 46px);
    }
    .hp-lead {
        font-size: 15px;
        line-height: 1.65;
        margin-top: 10px;
    }
}

@media (max-width: 640px) {
    .hp-hero {
        padding: 86px 0 32px;
    }
    .hp-hero h1 {
        font-size: clamp(32px, 8.4vw, 42px);
    }
    .hp-lead {
        font-size: 14px;
        line-height: 1.6;
    }
    .hp-hb {
        margin-top: 20px;
    }
    .hp-gh, .hp-gh2 {
        padding: 13px 20px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
    .hp-chr-bub {
        font-size: 13px;
        padding: 11px 14px;
        max-width: 260px;
    }
}

@media (max-width: 480px) {
    .hp-hero {
        padding: 82px 0 24px;
    }
    .hp-tagpill {
        font-size: 11px;
        padding: 6px 12px;
    }
    .hp-hero h1 {
        font-size: clamp(30px, 9vw, 38px);
    }
    .hp-wrap {
        padding: 0 16px;
    }
}

.hp-pkp__from {
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hp-mut);
    margin-bottom: 2px;
}

/* Dimmed, not hidden — all package copy stays crawlable */

/* ============================================
   HOMEPAGE — QUIZ RESULT ACTIONS
   ============================================ */

.hp-qcta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.hp-qcta .hp-btn,
.hp-qcta .hp-gh2 {
    padding: 14px 26px;
    font-size: 14.5px;
}


/* ============================================
   SCREEN-READER / CRAWLER-ONLY CONTENT
   ============================================ */

.hp-sr,
.hp-sr-list {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--clr-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Visible keyboard focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--clr-terracotta);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================
   FOOTER — SERVICE AREAS
   ============================================ */

.footer__areas {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-lg);
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-md);
}

.footer__areas-label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--clr-terracotta-light);
    flex-shrink: 0;
}

.footer__areas p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.7;
    margin: 0;
}

.footer__contact li strong {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    font-size: 13px;
}


/* ============================================
   HOMEPAGE — TESTIMONIALS
   ============================================ */

.index-page .testimonials-section {
    background: var(--hp-cream);
    padding: clamp(64px, 8vw, 104px) 0;
    overflow: hidden;
}

.hp-tsl {
    max-width: 860px;
    margin: 34px auto 0;
    position: relative;
}

.hp-tsl .testimonial-slider {
    overflow: hidden;
}

.hp-tsl .testimonial-track {
    display: flex;
    transition: transform .55s cubic-bezier(.25, .46, .45, .94);
}

.hp-tsl .testimonial-card {
    min-width: 100%;
    padding: 0 6px;
}

.hp-tq {
    background: #fff;
    border: 1px solid var(--hp-line);
    border-radius: 18px;
    padding: clamp(26px, 4vw, 40px);
    box-shadow: 0 10px 40px rgba(22, 27, 25, .05);
}

.hp-tq__stars {
    color: var(--hp-sand);
    font-size: 15px;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.hp-star-half {
    background: linear-gradient(90deg, var(--hp-sand) 50%, var(--hp-line) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hp-star-empty {
    color: var(--hp-line);
}

.hp-tq__text {
    font-family: var(--ff-heading);
    font-size: clamp(19px, 2.3vw, 25px);
    font-style: italic;
    line-height: 1.55;
    color: var(--hp-ink);
    margin-bottom: 22px;
}

.hp-tq__who {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid var(--hp-line);
}

.hp-tq__mono {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hp-teal);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
}

.hp-tq__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--hp-ink);
}

.hp-tq__proj {
    font-size: 12.5px;
    color: var(--hp-mut);
    line-height: 1.5;
    margin-top: 2px;
}

.hp-tnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.hp-tnav button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    background: #fff;
    color: var(--hp-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all var(--transition-fast);
}

.hp-tnav button:hover {
    background: var(--hp-teal);
    color: #fff;
    border-color: var(--hp-teal);
}

/* 16 testimonials is too many for one dot per slide to stay legible or
   tappable — a fill bar + "current / total" reads instantly instead. */
.hp-tprog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 140px;
}

.hp-tprog-track {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--hp-line);
    overflow: hidden;
}

.hp-tprog-track i {
    display: block;
    height: 100%;
    width: 6.25%;
    background: var(--hp-terra);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.hp-tcount {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--hp-mut);
    font-variant-numeric: tabular-nums;
}

.hp-tcount b {
    color: var(--hp-terra);
    font-weight: 700;
}


/* ============================================
   HOMEPAGE — FAQ ACCORDION
   ============================================ */

.hp-faqs {
    max-width: 820px;
    margin: 34px auto 0;
    border-top: 1px solid var(--hp-line);
}

.hp-faq {
    border-bottom: 1px solid var(--hp-line);
}

.hp-faq__q {
    width: 100%;
    background: none;
    border: 0;
    padding: 20px 44px 20px 0;
    text-align: left;
    font-family: var(--ff-body);
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--hp-ink);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.hp-faq__q:hover {
    color: var(--hp-terra);
}

.hp-faq__q::after,
.hp-faq__q::before {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    background: var(--hp-terra);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.hp-faq__q::before {
    width: 15px;
    height: 2px;
    transform: translateY(-50%);
}

.hp-faq__q::after {
    width: 2px;
    height: 15px;
    right: 12.5px;
    transform: translateY(-50%);
}

.hp-faq.on .hp-faq__q::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
}

.hp-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.hp-faq.on .hp-faq__a {
    grid-template-rows: 1fr;
}

.hp-faq__a > div {
    overflow: hidden;
}

.hp-faq__a p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--hp-mut);
    font-weight: 300;
    padding: 0 44px 22px 0;
    margin: 0;
}


/* ============================================
   HOMEPAGE — PACKAGE DISCLAIMER
   ============================================ */

.hp-pknote {
    max-width: 900px;
    margin: 36px auto 0;
    background: var(--hp-cream);
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    padding: 22px 26px;
}

.hp-pknote h5 {
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--hp-teal);
    margin-bottom: 12px;
}

.hp-pknote ul {
    list-style: none;
    display: grid;
    gap: 8px;
}

.hp-pknote li {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--hp-mut);
    font-weight: 300;
    padding-left: 16px;
    position: relative;
}

.hp-pknote li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hp-sand);
}

@media (max-width: 640px) {
    .footer__areas {
        flex-direction: column;
        gap: 6px;
    }
    .hp-tnav {
        gap: 12px;
    }
}



/* ============================================
   HOME INTERIOR PACKAGES
   Selector-first: one package shown at a time, full width, with the
   four-way comparison collapsed underneath. Replaces the four-card
   grid, which orphaned its fourth card onto a row of its own and
   whose "filter" only dimmed the cards it did not match.
   ============================================ */

/* ── Home-size selector ── */
.pkg-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 26px;
}

.pkg-pick__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-mut);
}

.pkg-pick__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--hp-line);
    border-radius: 100px;
}

.pkg-pick__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-ink);
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}

.pkg-pick__btn:hover { background: var(--hp-cream); }

.pkg-pick__btn.on {
    background: var(--hp-teal);
    color: #fff;
}

.pkg-pick__btn i {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--hp-sand);
    color: #fff;
}

.pkg-pick__btn.on i {
    background: rgba(255, 255, 255, .22);
}

/* ── The selected package ── */
.pkg-panel {
    background: #fff;
    border: 1px solid var(--hp-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 56px -40px rgba(22, 27, 25, .5);
}

.pkg-panel.is-hidden { display: none; }

.pkg-panel__head {
    display: grid;
    grid-template-columns: 1.1fr auto 1fr;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
    background: linear-gradient(120deg, var(--hp-teal) 0%, var(--hp-teal2) 100%);
    color: #fff;
}

.pkg-panel__id h3 {
    font-family: var(--ff-heading);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 4px;
}

.pkg-panel__id p {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .78);
}

.pkg-panel__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 clamp(18px, 3vw, 34px);
    border-inline: 1px solid rgba(255, 255, 255, .2);
}

.pkg-panel__price span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.pkg-panel__price b {
    font-family: var(--ff-heading);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 600;
    line-height: 1.05;
    color: #fff;
}

.pkg-panel__price small {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}

.pkg-panel__act {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.pkg-panel__act .btn--outline {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.pkg-panel__act .btn--outline:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

/* Feature groups — multi-column so 15 items read as a short scannable
   block instead of a single 15-row scroll wall. */
.pkg-panel__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: clamp(20px, 3vw, 34px);
    padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 36px);
}

.pkg-group h4 {
    font-family: var(--ff-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hp-terra);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hp-line);
}

.pkg-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.pkg-group li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--hp-ink);
}

.pkg-group li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--hp-teal);
}

/* Qualifier such as "3", "All" or "Optional" */
.pkg-group li b {
    font-weight: 700;
    color: var(--hp-terra);
}

/* ── Comparison ── */
.pkg-compare { margin-top: 22px; }

.pkg-compare__toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 1px solid var(--hp-line);
    border-radius: 100px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--hp-teal);
    cursor: pointer;
    transition: .2s;
}

.pkg-compare__toggle:hover {
    border-color: var(--hp-teal);
    background: var(--hp-cream);
}

.pkg-compare__toggle svg { transition: transform .25s; }
.pkg-compare__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.pkg-compare__wrap { margin-top: 20px; }
.pkg-compare__wrap[hidden] { display: none; }

/* The six rows shared by all four packages are stated once here rather
   than repeated as four identical ticks down the table. */
.pkg-compare__all {
    margin: 0 0 16px;
    padding: 14px 18px;
    background: var(--hp-cream);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hp-ink);
}

.pkg-compare__all strong { color: var(--hp-teal); }

.pkg-table__scroll {
    overflow-x: auto;
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    background: #fff;
}

.pkg-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.pkg-table th,
.pkg-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--hp-line);
}

.pkg-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 16px;
    border-bottom: 2px solid var(--hp-line);
    z-index: 1;
}

.pkg-table tbody th,
.pkg-table thead th:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--hp-ink);
}

.pkg-table__name {
    display: block;
    font-family: var(--ff-heading);
    font-size: 19px;
    font-weight: 600;
    color: var(--hp-ink);
}

.pkg-table__price {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hp-terra);
    margin-top: 2px;
}

/* Group heading rows break 15 lines into named runs */
.pkg-table__group th {
    text-align: left;
    background: var(--hp-cream);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hp-mut);
    padding: 9px 16px;
}

/* The most-requested column is tinted the whole way down so the eye can
   follow it without re-reading the header. */
.pkg-table .is-pop {
    background: rgba(47, 88, 82, .05);
}

.pkg-table thead th.is-pop {
    background: rgba(47, 88, 82, .09);
    box-shadow: inset 0 3px 0 var(--hp-sand);
}

.pkg-yes { color: var(--hp-teal); font-weight: 700; font-size: 16px; }
.pkg-no  { color: var(--hp-line); font-weight: 700; }

.pkg-val {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--hp-cream);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hp-terra);
}

.pkg-table tfoot td { border-bottom: none; padding: 16px; }

.pkg-table__cta {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 100px;
    background: var(--hp-teal);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}

.pkg-table__cta:hover { background: var(--hp-teal2); }

/* ── Responsive ── */
@media (max-width: 960px) {
    .pkg-panel__head {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .pkg-panel__price {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 16px 0;
        border-inline: none;
        border-block: 1px solid rgba(255, 255, 255, .2);
    }
    .pkg-panel__act { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .pkg-pick { flex-direction: column; align-items: stretch; gap: 10px; }
    .pkg-pick__opts { border-radius: 14px; }
    .pkg-pick__btn { flex: 1 1 auto; justify-content: center; }
    .pkg-panel__act .btn { flex: 1 1 100%; justify-content: center; }
}


/* ============================================
   STYLE FINDER — step & result states
   Questions and results are all present in the HTML (rendered by PHP);
   these classes control which one is on screen.
   ============================================ */

.qz-step,
.qz-result { display: none; }

.qz-step.on,
.qz-result.on { display: block; }

/* Options now carry an emoji, so they are a two-column row rather than
   a plain text button. Four options per question instead of three. */
.hp-qo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.hp-qo__e {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--hp-cream);
    font-size: 17px;
    line-height: 1;
    transition: .16s;
}

.hp-qo:hover .hp-qo__e {
    background: var(--hp-sand);
}

/* ── Result ── */
.qz-result {
    text-align: center;
}

.qz-result .hp-em {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 10px;
}

.qz-result h3 {
    font-family: var(--ff-body);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--hp-ink);
    margin: 4px 0 10px;
}

.qz-result__lead {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--hp-teal);
    margin-bottom: 6px;
}

.qz-result__room {
    font-size: 14.5px;
    color: var(--hp-terra);
    font-weight: 600;
    margin-bottom: 10px;
}

.qz-result__room[hidden] { display: none; }

.qz-result > p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--hp-mut);
    max-width: 46ch;
    margin-inline: auto;
}

/* What we would focus on — grounded in real services */
.qz-does {
    list-style: none;
    margin: 20px auto 4px;
    padding: 18px 20px;
    max-width: 420px;
    background: var(--hp-cream);
    border-radius: 12px;
    display: grid;
    gap: 9px;
    text-align: left;
}

.qz-does li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--hp-ink);
}

.qz-does li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--hp-teal);
}

.qz-retake {
    font-size: 12.5px;
    margin-top: 16px;
}

.qz-retake a {
    color: var(--hp-terra);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Without JS every step and result would stack; show the first question
   only, so the section still reads as intended. */
.no-js .qz-step:not([data-step="0"]),
.no-js .qz-result { display: none; }

@media (max-width: 480px) {
    .hp-qo { padding: 13px 14px; font-size: 14.5px; }
    .hp-qo__e { width: 30px; height: 30px; font-size: 15px; }
}


/* ============================================
   PROCESS — VERTICAL JOURNEY
   Four phases running top to bottom, each carrying its own steps on a
   coloured rail. Every description is visible.

   Replaces a horizontal spine plus a click-to-reveal panel, where seven
   of eight steps were hidden and ~44% of the panel was permanently blank
   (the copy was capped at a 62ch measure inside a full-width box).
   ============================================ */

/* Ambient photograph behind the teal */
.hp-dark--photo { position: relative; }

.hp-dark__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hp-dark__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: saturate(.6);
}

/* Hold the photo well back so body copy keeps its contrast */
.hp-dark__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        var(--hp-teal) 0%,
        rgba(47, 88, 82, .82) 30%,
        rgba(47, 88, 82, .86) 70%,
        var(--hp-teal) 100%);
}

.hp-dark--photo > .hp-wrap { position: relative; z-index: 1; }

/* ── The journey ── */
.jrn-wrap {
    position: relative;
}

/* Scroll-driven progress line — grows from 0 to 100% height as the
   reader scrolls through the journey (JS sets --fill on #jrnWrap).
   Sits at the same x-position as the existing per-phase rail segments,
   so as one continuous glowing line it also visually bridges the gaps
   between phases that the segmented background rails leave open. */
.jrn-fill {
    position: absolute;
    left: 18px;
    top: 0;
    width: 2px;
    height: calc(var(--fill, 0) * 1%);
    max-height: 100%;
    background: linear-gradient(180deg, var(--hp-sage), var(--hp-sand) 55%, var(--hp-terra));
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}

/* A resting glow sits at the very top even before scrolling — reads as
   "there's a lit path here, start scrolling" rather than needing to
   fade in from nothing. */
.jrn-fill__glow {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 11px;
    height: 11px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: var(--hp-sand);
    box-shadow:
        0 0 10px 3px rgba(192, 138, 94, .75),
        0 0 26px 9px rgba(169, 107, 76, .4);
    animation: jrnGlowPulse 2.2s ease-in-out infinite;
}

@keyframes jrnGlowPulse {
    0%, 100% { box-shadow: 0 0 10px 3px rgba(192, 138, 94, .75), 0 0 26px 9px rgba(169, 107, 76, .4); }
    50%      { box-shadow: 0 0 14px 5px rgba(192, 138, 94, .9),  0 0 34px 12px rgba(169, 107, 76, .55); }
}

@media (prefers-reduced-motion: reduce) {
    .jrn-fill__glow {
        animation: none;
    }
}

.jrn {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.jrn-phase {
    --proc-accent: #9DB3A4;
    padding-bottom: 34px;
}

.jrn-phase:last-child { padding-bottom: 0; }

.jrn-phase.ph-a { --proc-accent: #9DB3A4; }
.jrn-phase.ph-b { --proc-accent: #C08A5E; }
.jrn-phase.ph-c { --proc-accent: #A96B4C; }
.jrn-phase.ph-d { --proc-accent: #F6F2EA; }

/* Phase header — reads as a chapter opening, not a small label */
.jrn-phase__hd {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.jrn-phase__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--proc-accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--proc-accent) 55%, transparent);
    color: var(--proc-accent);
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.jrn-phase__name {
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--proc-accent);
    margin: 0;
    white-space: nowrap;
}

.jrn-phase__count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .45);
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    white-space: nowrap;
}

.jrn-phase__rule {
    flex: 1;
    height: 1px;
    min-width: 20px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--proc-accent) 45%, transparent),
        transparent);
}

/* Phase lights up as the travelling rail light reaches it */
.jrn-phase--lit .jrn-phase__ic {
    background: color-mix(in srgb, var(--proc-accent) 34%, transparent);
    border-color: var(--proc-accent);
    box-shadow: 0 0 18px -2px color-mix(in srgb, var(--proc-accent) 55%, transparent);
}

/* ── Steps ──
   The rail is a real 2px border on the list, so it grows with the content
   instead of being a fixed-length decoration. */
.jrn-steps {
    list-style: none;
    margin: 0;
    padding: 4px 0 0 0;
    margin-left: 18px;
    border-left: 2px solid color-mix(in srgb, var(--proc-accent) 42%, transparent);
    display: grid;
    gap: 4px;
}

/* Numeral column + a full-width text block, rather than the old fixed
   300px title column that left ~18% of the row's width unused. */
.jrn-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 22px;
    padding: 20px 24px 20px 34px;
    border-radius: 0 12px 12px 0;
    border: 1px solid transparent;
    transition: background .45s ease, border-color .45s ease,
                transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

/* Marker on the rail. Plain by default; fills with the phase accent
   once the travelling light has reached this step. */
.jrn-step__dot {
    position: absolute;
    left: -7px;
    top: 30px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hp-teal);
    border: 2px solid color-mix(in srgb, var(--proc-accent) 55%, transparent);
    transition: background .45s ease, border-color .45s ease,
                box-shadow .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}

/* Large display numeral — same editorial treatment as
   .service-detail__number on the services page, so numbered
   sequences speak one language across the site. */
.jrn-step__num {
    font-family: var(--ff-heading);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: var(--fw-light);
    line-height: .9;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .15);
    transition: color .45s ease, text-shadow .45s ease;
    padding-top: 2px;
}

.jrn-step__t {
    font-family: var(--ff-heading);
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 6px;
    transition: color .45s ease;
}

.jrn-step__d {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    /* Floor of .78 white on the teal keeps this above 4.5:1 even in the
       un-lit state — the spotlight is carried by the numeral, marker and
       surface, never by making body copy hard to read. */
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 78ch;
    transition: color .45s ease;
}

/* ── Lit state ──
   The tint is a gradient falling away from the rail, so a lit row reads
   as light spilling off the travelling line onto the content beside it
   rather than as a generic highlighted box. */
.jrn-step--lit {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--proc-accent) 14%, transparent) 0%,
            rgba(255, 255, 255, .05) 38%,
            transparent 88%);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .7);
}

.jrn-step--lit .jrn-step__dot {
    background: var(--proc-accent);
    border-color: var(--proc-accent);
    transform: scale(1.35);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--proc-accent) 18%, transparent),
        0 0 16px 3px color-mix(in srgb, var(--proc-accent) 65%, transparent);
}

.jrn-step--lit .jrn-step__num {
    color: var(--proc-accent);
    text-shadow: 0 0 22px color-mix(in srgb, var(--proc-accent) 45%, transparent);
}

.jrn-step--lit .jrn-step__t { color: #fff; }
.jrn-step--lit .jrn-step__d { color: rgba(255, 255, 255, .9); }

.jrn-step:hover {
    background: rgba(255, 255, 255, .075);
    border-color: rgba(255, 255, 255, .14);
}

/* Reduced motion: no travelling spotlight, so present every step in its
   final lit state rather than leaving them all permanently dimmed. */
@media (prefers-reduced-motion: reduce) {
    .jrn-step__num {
        color: var(--proc-accent);
        text-shadow: none;
    }
    .jrn-step__t { color: #fff; }
    .jrn-step__d { color: rgba(255, 255, 255, .9); }
    .jrn-step, .jrn-step__dot, .jrn-step__num, .jrn-step__t, .jrn-step__d,
    .jrn-phase__ic {
        transition: none;
    }
}

/* ── Closing line ── */
.jrn-foot {
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

.jrn-foot a {
    color: var(--hp-sand);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.jrn-foot a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .jrn-step {
        gap: 16px;
        padding: 16px 14px 16px 30px;
    }
    .jrn-step__d { max-width: none; }
}

@media (max-width: 560px) {
    /* Numeral moves above the text so the copy keeps full width on a
       narrow screen instead of being squeezed into a side column. */
    .jrn-step {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 12px 16px 26px;
    }
    .jrn-step__num {
        font-size: 26px;
        line-height: 1;
    }
    .jrn-step__dot { top: 22px; }
}

@media (max-width: 480px) {
    .jrn-phase__count { display: none; }
    .jrn-phase__name { font-size: 13px; letter-spacing: .14em; }
    .jrn-phase__ic { width: 36px; height: 36px; }
}


/* ============================================
   MOBILE NAV — panel overrides
   The overlay covers the header (z-index 300 vs the header's 200, and the
   header creates its own stacking context), so the hamburger underneath
   could never act as the close control. The panel now carries its own
   brand row and close button.
   ============================================ */

.mobile-nav {
    /* Was centred as a single block; now a column so the brand row pins to
       the top and the links sit in the space that remains. */
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    justify-content: stretch;
    background: var(--clr-ivory);
    visibility: hidden;
    transition: right var(--transition-smooth), visibility 0s linear .4s;
}

.mobile-nav--open {
    visibility: visible;
    transition: right var(--transition-smooth), visibility 0s;
}

/* ── Top bar ── */
.mobile-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(46, 107, 98, .12);
}

.mobile-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.mobile-nav__brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.mobile-nav__brand span {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.mobile-nav__brand b {
    font-family: var(--ff-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--clr-black);
}

.mobile-nav__brand i {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--clr-terracotta);
    margin-top: 3px;
}

.mobile-nav__close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(46, 107, 98, .18);
    border-radius: 50%;
    background: #fff;
    color: var(--clr-black);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-nav__close:hover {
    background: var(--clr-teal);
    border-color: var(--clr-teal);
    color: #fff;
    transform: rotate(90deg);
}

/* ── Content ── */
.mobile-nav__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 28px 20px 34px;
    overflow-y: auto;
    text-align: left;
}

.mobile-nav__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav__item {
    margin: 0;
    border-bottom: 1px solid rgba(46, 107, 98, .1);
    opacity: 0;
    transform: translateX(18px);
}

/* Links arrive in sequence once the panel is open */
.mobile-nav--open .mobile-nav__item {
    animation: mnavIn .38s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(120ms + var(--i) * 55ms);
}

@keyframes mnavIn {
    to { opacity: 1; transform: none; }
}

.mobile-nav__link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 4px;
    font-family: var(--ff-heading);
    font-size: clamp(26px, 7vw, 34px);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--clr-black);
    transition: color var(--transition-base), padding-left var(--transition-base);
}

.mobile-nav__link:hover,
.mobile-nav__link--active {
    color: var(--clr-teal);
    padding-left: 10px;
}

.mobile-nav__num {
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--clr-terracotta);
}

.mobile-nav__link--active .mobile-nav__num { color: var(--clr-teal); }

/* ── CTA ── */
.mobile-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px 22px;
    border-radius: 100px;
    background: var(--clr-teal);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.mobile-nav__cta:hover { background: var(--clr-teal-light); }

/* ── Footer ── */
.mobile-nav__footer {
    align-items: flex-start;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(46, 107, 98, .12);
}

.mobile-nav__phone {
    font-family: var(--ff-heading);
    font-size: 21px !important;
    font-weight: 600;
    color: var(--clr-teal) !important;
}

.mobile-nav__social { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .mobile-nav--open .mobile-nav__item { animation: none; opacity: 1; transform: none; }
    .mobile-nav__close:hover { transform: none; }
}

/* Short screens: stop centring so nothing is cut off */
@media (max-height: 620px) {
    .mobile-nav__content { justify-content: flex-start; gap: 18px; }
    .mobile-nav__link { font-size: 24px; padding: 11px 4px; }
}


/* ============================================
   PROBLEM → ANSWER
   The worry stated quietly on the left, the answer beside it in full.

   Replaces four flip cards which were locked to height: 310px and clamped
   their answer to three lines, so the most persuasive copy on the page was
   truncated mid-sentence — while the three shorter cards carried ~120px of
   dead space. Rows here size to their content, so neither can happen.
   ============================================ */

.prb {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hp-line);
}

.prb-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 46px minmax(0, 1.05fr);
    align-items: start;
    gap: 0 clamp(14px, 2.4vw, 26px);
    padding: clamp(22px, 3vw, 32px) 0;
    border-bottom: 1px solid var(--hp-line);
    transition: background .25s;
}

.prb-row:hover { background: rgba(47, 88, 82, .022); }

/* Ghost numeral — the register down the left edge */
.prb-row__n {
    font-family: var(--ff-heading);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    line-height: 1;
    color: var(--hp-line);
    padding-top: 2px;
    transition: color .25s;
}

.prb-row:hover .prb-row__n { color: var(--hp-sand); }

/* ── Labels ── */
.prb-row__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-mut);
    margin-bottom: 10px;
}

.prb-row__label--ans { color: var(--hp-teal); }

.prb-row__ic {
    font-size: 15px;
    line-height: 1;
    filter: grayscale(1);
    opacity: .55;
    transition: .25s;
}

.prb-row:hover .prb-row__ic { filter: none; opacity: 1; }

/* ── The problem: deliberately quieter than the answer ── */
.prb-row__problem h3 {
    font-family: var(--ff-body);
    font-size: clamp(16px, 1.9vw, 19px);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--hp-ink);
    margin: 0 0 8px;
}

.prb-row__problem p {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--hp-mut);
    margin: 0;
}

/* ── The turn ── */
.prb-row__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    align-self: center;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    color: var(--hp-sand);
    background: #fff;
    transition: .25s;
}

.prb-row:hover .prb-row__arrow {
    border-color: var(--hp-sand);
    background: var(--hp-sand);
    color: #fff;
    transform: translateX(3px);
}

/* ── The answer: the half that sells ── */
.prb-row__answer {
    padding-left: clamp(16px, 2vw, 24px);
    border-left: 2px solid var(--hp-sand);
}

.prb-row__answer p {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--hp-ink);
    margin: 0;
}

/* ── Closing link ── */
.prb-foot {
    margin: 26px 0 0;
    font-size: 15px;
}

.prb-foot a {
    color: var(--hp-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.prb-foot a:hover { color: var(--hp-terra); }

/* ── Responsive ──
   The arrow is a horizontal device; below the breakpoint the answer sits
   under the problem, so the accent rail carries the relationship instead. */
@media (max-width: 860px) {
    .prb-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0 14px;
    }
    .prb-row__arrow { display: none; }
    .prb-row__answer {
        grid-column: 2;
        margin-top: 16px;
        padding-top: 14px;
        padding-left: 16px;
        border-top: 1px solid var(--hp-line);
    }
}

@media (max-width: 480px) {
    .prb-row { grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; }
    .prb-row__n { font-size: 24px; }
}


/* ============================================
   AVATAR & MASCOT FIXES
   The avatar sources are now 500x500 PNGs with the background removed,
   which changes what each placement needs.
   ============================================ */

/* ── 1. Section avatar, ~17% larger ──
   Was 110px tall on desktop / 52px on mobile, which read small against the
   copy beside it. The sources are 500px square so there is plenty of
   resolution to grow into. */
.hp-chr-doll {
    height: 128px;
}

/* ── 2. Floating mascot needs a ground ──
   The cut-out PNG has no background of its own, so it previously floated
   over whatever section happened to be behind it. A solid disc with a ring
   gives it an edge and keeps it legible over photography as well as flat
   colour. */
.hp-mdoll {
    background: linear-gradient(160deg, #FFFFFF 0%, var(--hp-cream) 100%);
    border: 2px solid var(--hp-teal);
    box-shadow: 0 8px 24px -8px rgba(22, 27, 25, .34);
    overflow: hidden;
    display: grid;
    place-items: end center;
}

/* The figure is full-length, so anchor it to the bottom of the disc and let
   it slightly overflow the top rather than shrinking it to fit. */
.hp-mdoll .hp-avatar-img {
    width: 92%;
    height: auto;
    max-height: 118%;
    object-fit: contain;
    object-position: bottom center;
    border-radius: 0;
    align-self: end;
}

/* ── 3. The close button was being clipped ──
   .hp-mbub carried overflow:hidden for the one-line ellipsis on mobile,
   which cropped the ✕ sitting at top:-4px right:-4px. The truncation now
   lives on the text span so the bubble can let the button overhang. */
.hp-mbub {
    overflow: visible;
}

.hp-mclose {
    z-index: 2;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(22, 27, 25, .3);
}

@media (max-width: 640px) {
    /* ── 4. Welcome message moves below the buttons ──
       On a phone the greeting pushed both CTAs below the fold. The copy
       column becomes a flex column so the order can be changed without
       moving anything in the HTML. */
    .hp-hg__copy {
        display: flex;
        flex-direction: column;
    }

    .hp-hg__copy .hp-hb  { order: 1; }
    .hp-hg__copy .hp-chr { order: 2; margin-top: 20px !important; margin-bottom: 0; }

    .hp-chr-doll {
        width: 96px;
        height: 96px;
    }

    /* Truncation moved off the bubble so the ✕ is no longer cropped */
    .hp-mbub {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        padding-right: 18px;
    }

    /* The text span carried the one-line ellipsis from when the bubble was a
       pill sitting beside the avatar. The bubble now stacks above the avatar
       on its own row and can wrap freely, so clamping to one line here just
       cut every guide message off mid-word. */
    #hpMtxt {
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    .hp-mclose {
        top: -6px;
        right: -6px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .hp-mdoll {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 400px) {
    .hp-chr-doll { width: 84px; height: 84px; }
}






/* ============================================
   HERO PROJECT EXPLORER
   Tabs are the four photographed projects. The frame is one link to that
   project with the shown render already open; the dots mark what was built
   and name it on hover, with no reveal step in between.

   The frame is a fixed 4:3 so it does not resize between tabs — the crop is
   baked into the served file by tools/hero-crops.js, not done in CSS, so the
   dot percentages stay true to the image.
   ============================================ */

.hp-roomwrap {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}

.hp-roomwrap:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 60px -18px rgba(22, 27, 25, .34);
}

.hp-roomwrap:focus-visible {
    outline: 3px solid var(--hp-teal);
    outline-offset: 4px;
}

/* ── Markers ── */
.hp-spot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    animation: hpFloat 3s ease-in-out infinite;
}

/* Stagger the float so dots don't bob in sync */
.hp-spot:nth-child(1) { animation-delay: 0s; }
.hp-spot:nth-child(2) { animation-delay: .8s; }
.hp-spot:nth-child(3) { animation-delay: 1.6s; }
.hp-spot:nth-child(4) { animation-delay: 2.4s; }

@keyframes hpFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 5px)); }
}

.hp-hot__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    border: 2px solid var(--hp-terra);
    color: var(--hp-terra);
    font-family: var(--ff-heading);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .26);
}

/* Sonar ring so the markers read as tappable points of interest */
.hp-hot__n::before {
    content: "";
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--hp-terra);
    opacity: .45;
    animation: hpSonar 2.4s ease-out infinite;
}

@keyframes hpSonar {
    0%   { transform: scale(.8); opacity: .6; }
    100% { transform: scale(1.8); opacity: 0; }
}

.hp-spot:nth-child(1) .hp-hot__n::before { animation-delay: 0s; }
.hp-spot:nth-child(2) .hp-hot__n::before { animation-delay: .6s; }
.hp-spot:nth-child(3) .hp-hot__n::before { animation-delay: 1.2s; }
.hp-spot:nth-child(4) .hp-hot__n::before { animation-delay: 1.8s; }

/* Markers past the midpoint put their label on the left so it stays in frame */
.hp-spot--left { flex-direction: row-reverse; }

/* ── Prompt ── */
.hp-rlab {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: 6px 13px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hp-ink);
    box-shadow: 0 4px 14px -6px rgba(22, 27, 25, .4);
    pointer-events: none;
}

/* ── Project credit ── */
.hp-rcred {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(14, 24, 22, .74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: background .25s;
    pointer-events: none;
}

.hp-roomwrap:hover .hp-rcred { background: rgba(14, 24, 22, .92); }

.hp-rcred b {
    font-size: 13px;
    font-weight: 650;
    color: #fff;
    line-height: 1.25;
}

.hp-rcred span {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
}

/* Room tabs carry stroke icons rather than emoji */
.hp-rtab-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

@media (max-width: 640px) {
    .hp-hot__n { width: 22px; height: 22px; font-size: 9px; }
    .hp-hot__n::before { width: 22px; height: 22px; }

    .hp-rlab { font-size: 10px; padding: 4px 10px; top: 8px; left: 8px; }
    .hp-rcred { left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 10px; }
    .hp-rcred b { font-size: 11.5px; }
    .hp-rcred span { font-size: 9.5px; }
}

@media (max-width: 400px) {
    .hp-hot__n { width: 20px; height: 20px; font-size: 8px; border-width: 1.5px; }
    .hp-hot__n::before { width: 20px; height: 20px; border-width: 1.5px; }
    .hp-rlab { font-size: 9px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hot__n::before { animation: none; }
    .hp-roomwrap:hover { transform: none; }
}

/* Prompt swaps by input type — there is no hover on touch, so promising it
   there would be a lie. */
.hp-rlab__tap { display: none; }

@media (hover: none) {
    .hp-rlab__hover { display: none; }
    .hp-rlab__tap { display: inline; }
}

/* Keep a marker's label clear of the credit chip in the bottom-left */
.hp-rcred { z-index: 3; }

/* ============================================
   HERO — MOBILE REFINEMENTS
   Scoped to narrow viewports only; desktop is untouched.
   ============================================ */

/* The greeting names where the project is, and that differs by layout */
.hp-chr-bub__narrow { display: none; }

@media (max-width: 960px) {
    .hp-chr-bub__wide { display: none; }
    .hp-chr-bub__narrow { display: inline; }
}

@media (max-width: 640px) {
    /* "Design. Build. Deliver. Under one roof." was orphaning "one roof."
       onto its own line. Keeping the em intact reads as one phrase. */
    .hp-hero h1 em {
        display: block;
        margin-top: 2px;
    }

    /* The greeting card and the two CTAs were pushing the project image
       almost entirely below the fold. */
    .hp-hero h1 { text-wrap: balance; }
    .hp-hg__copy .hp-chr { margin-top: 16px !important; }
    .hp-chr-bub { font-size: 12.5px; line-height: 1.5; }
}

/* An intermediate avatar step: 96px is right at 640px wide but crowds the
   speech bubble on a 375px screen, where the row is avatar + gap + text. */
@media (max-width: 480px) {
    .hp-chr-doll { width: 88px; height: 88px; }
}

/* ============================================
   INNER-PAGE HEADINGS — MOBILE STEPS
   Mirrors the homepage hero H1 steps exactly (see .hp-hero h1 overrides at
   768 / 640 / 480). Without these the sizes match on desktop but drift on
   phones — the base clamp floors at 35px where the homepage renders 33.75px.
   The homepage itself is untouched: it uses .hp-hero h1 and
   .index-page .hp-section h2, neither of which appears here.
   ============================================ */

@media (max-width: 768px) {
    .page-hero__title,
    .proj-hero__title { font-size: clamp(34px, 7vw, 46px); }
}

@media (max-width: 640px) {
    .page-hero__title,
    .proj-hero__title { font-size: clamp(32px, 8.4vw, 42px); }
}

@media (max-width: 480px) {
    .page-hero__title,
    .proj-hero__title { font-size: clamp(30px, 9vw, 38px); }
}