:root {
    --primary: #125b68;
    --primary-dark: #0c424c;
    --primary-deep: #102a43;
    --secondary: #4d88a1;
    --accent: #f4a261;
    --accent-dark: #d97935;
    --ink: #152936;
    --text: #3e5360;
    --muted: #6c7e87;
    --surface: #ffffff;
    --surface-soft: #f3f8f7;
    --surface-warm: #fff7ef;
    --border: #dce8e6;
    --success: #237a57;
    --danger: #b23a48;
    --on-primary: #ffffff;
    --on-accent: #102a43;
    --shadow-sm: 0 8px 24px rgba(16, 42, 67, .08);
    --shadow-md: 0 18px 50px rgba(16, 42, 67, .12);
    --shadow-lg: 0 28px 75px rgba(16, 42, 67, .17);
    --radius-sm: .75rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    --section-space: clamp(4.75rem, 9vw, 8rem);
    --container: 1200px;
    --transition: 220ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--surface); font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; line-height: 1.7; overflow-x: hidden; transition: color .3s ease, background .3s ease; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: .2em; }
a:hover { color: var(--primary-dark); }
h1, h2, h3, h4 { color: var(--ink); font-family: "Manrope", system-ui, sans-serif; font-weight: 800; line-height: 1.16; letter-spacing: -.035em; }
h1 { font-size: clamp(2.65rem, 5.4vw, 5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; }
p:last-child { margin-bottom: 0; }
::selection { color: var(--on-primary); background: var(--primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: .25rem; }

.site-container { width: min(100% - 2rem, var(--container)); }
main { scroll-margin-top: 6rem; }
.narrow-container { max-width: 840px; }
.section-space { padding-block: var(--section-space); }
.section-tint { background: var(--surface-soft); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 2000; padding: .7rem 1rem; color: #fff; background: var(--primary-deep); border-radius: .5rem; transition: top var(--transition); }
.skip-link:focus { top: 1rem; color: #fff; }
.section-kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .85rem; color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.section-kicker::before { width: 1.8rem; height: 2px; content: ""; background: var(--accent); }
.section-kicker-light { color: #9fd5d4; }
.section-heading { max-width: 760px; margin-bottom: 3.2rem; }
.section-heading h2 { margin-bottom: 1rem; }
.section-heading p { color: var(--muted); font-size: 1.1rem; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .7fr); gap: 4rem; max-width: none; }
.split-heading > :last-child { align-self: end; padding-bottom: .35rem; }
.lead-copy { color: var(--text); font-size: 1.18rem; line-height: 1.75; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }
.btn { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .6rem; padding: .72rem 1.2rem; border-width: 1.5px; border-radius: .7rem; font-size: .94rem; font-weight: 700; transition: transform var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition); }
.btn:hover { transform: translateY(-2px); }
.btn i { transition: transform var(--transition); }
.btn:hover .bi-arrow-right { transform: translateX(4px); }
.btn-primary { --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-dark); box-shadow: 0 8px 20px rgba(18, 91, 104, .2); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: #7aaeb3; --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-color: var(--on-primary); }
.btn-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { color: var(--on-accent); background: #ffb272; border-color: #ffb272; }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost-light:hover { color: #102a43; background: #fff; border-color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 800; text-decoration: none; }
.text-link i { transition: transform var(--transition); }
.text-link:hover i { transform: translateX(4px); }
.text-link-light { color: #fff; }
.text-link-light:hover { color: var(--accent); }
.eyebrow { color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(18,91,104,.09); box-shadow: 0 3px 18px rgba(16,42,67,.035); backdrop-filter: blur(14px); transition: box-shadow var(--transition), background var(--transition); }
.site-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 10px 30px rgba(16,42,67,.1); }
.site-header .navbar { min-height: 84px; padding-block: .75rem; }
.navbar-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-family: "Manrope", sans-serif; line-height: 1; text-decoration: none; }
.navbar-brand img { border-radius: .5rem; filter: drop-shadow(0 4px 8px rgba(18,91,104,.16)); }
.navbar-brand span { display: grid; }
.navbar-brand strong { font-size: 1.15rem; letter-spacing: 0; }
.navbar-brand small { margin-top: .2rem; color: var(--muted); font-family: "DM Sans", sans-serif; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.navbar-nav { gap: .25rem; }
.navbar .nav-link { position: relative; margin-inline: .1rem; padding: .7rem .65rem !important; color: #354d59; font-size: .92rem; font-weight: 700; }
.navbar .nav-link::after { position: absolute; right: .65rem; bottom: .35rem; left: .65rem; height: 2px; content: ""; background: var(--accent); transform: scaleX(0); transition: transform var(--transition); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--primary); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.nav-cta { margin-left: 1.2rem; }
.theme-toggle { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; margin-left: .65rem; place-items: center; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 50%; transition: color var(--transition), background var(--transition), border var(--transition), transform var(--transition); }
.theme-toggle:hover { color: var(--primary); background: var(--surface-warm); border-color: var(--accent); transform: rotate(8deg); }
.theme-toggle i { font-size: 1.05rem; }
.navbar-toggler { border-color: var(--border); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(244,162,97,.35); }

/* Hero */
.hero-home { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7.5rem) 0 5rem; background: linear-gradient(130deg, #f8fcfb 0%, #edf7f5 48%, #fff7ef 100%); }
.hero-home::before { position: absolute; top: -15rem; right: -8rem; width: 42rem; height: 42rem; content: ""; border: 1px solid rgba(18,91,104,.1); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(18,91,104,.018), 0 0 0 10rem rgba(18,91,104,.014); }
.hero-grid-pattern { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(18,91,104,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(18,91,104,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, black, transparent 80%); }
.hero-home .container { position: relative; }
.availability-pill { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.5rem; padding: .45rem .8rem; color: var(--primary-dark); background: rgba(255,255,255,.75); border: 1px solid rgba(18,91,104,.18); border-radius: 999px; font-size: .77rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.availability-pill span { width: .55rem; height: .55rem; background: #43a574; border: 2px solid #bce8cf; border-radius: 50%; animation: pulse 2.5s infinite; }
.hero-copy h1 { max-width: 720px; margin-bottom: 1.45rem; }
.hero-copy h1 em { position: relative; color: var(--primary); font-style: normal; }
.hero-copy h1 em::after { position: absolute; right: 0; bottom: -.05em; left: 0; height: .12em; content: ""; background: var(--accent); border-radius: 1rem; transform: rotate(-1deg); }
.hero-lead { max-width: 640px; margin-bottom: 1.8rem; color: var(--text); font-size: clamp(1.08rem, 1.6vw, 1.25rem); }
.hero-actions { margin-bottom: 1.8rem; }
.hero-reassurance { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; color: var(--muted); font-size: .84rem; font-weight: 700; }
.hero-reassurance i { margin-right: .3rem; color: var(--success); }
.hero-visual { position: relative; min-height: 550px; }
.hero-photo { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-main-image { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; animation: image-drift 15s ease-in-out infinite alternate; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; min-width: 195px; padding: .75rem .85rem; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.7); border-radius: .9rem; box-shadow: var(--shadow-md); }
.floating-card-top { top: 12%; right: -3%; }
.floating-card-bottom { bottom: 6%; left: 0; }
.floating-card-top { animation: float-card 5.2s ease-in-out infinite; }
.floating-card-bottom { animation: float-card 6.1s ease-in-out 1.1s infinite reverse; }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: var(--ink); font-size: .86rem; }
.floating-card small { color: var(--muted); font-size: .7rem; }
.mini-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--on-primary); background: var(--primary); border-radius: .65rem; }
.mini-icon-accent { color: var(--on-accent); background: var(--accent); }

.trust-strip { padding-block: 1.5rem; color: #d9eeee; background: var(--primary-deep); }
.trust-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.trust-strip p { margin: 0; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trust-items { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.trust-items span { font-size: .82rem; font-weight: 700; }
.trust-items i { margin-right: .4rem; color: var(--accent); }

/* Cards */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.service-card { position: relative; min-height: 255px; padding: 2rem; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.service-card::before { position: absolute; right: -4rem; bottom: -4rem; width: 8rem; height: 8rem; content: ""; background: var(--surface-soft); border-radius: 50%; transition: transform .4s ease; }
.service-card:hover { z-index: 2; background: #fbfefd; box-shadow: var(--shadow-md); transform: translateY(-5px); }
.service-card:hover::before { transform: scale(2); }
.service-card h3, .service-card p, .service-card .icon-tile { position: relative; }
.service-card h3 { margin: 1.35rem 0 .65rem; }
.service-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.icon-tile { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; color: var(--primary); background: #e7f3f1; border-radius: .9rem; font-size: 1.35rem; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.service-card:hover .icon-tile { transform: translateY(-3px) rotate(-4deg); }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1.4rem; }
.package-card { position: relative; display: flex; flex-direction: column; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.package-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.package-featured { border: 2px solid var(--primary); box-shadow: var(--shadow-md); transform: translateY(-.65rem); }
.package-featured:hover { transform: translateY(-1rem); }
.package-label { align-self: flex-start; margin: -3rem 0 1.25rem; padding: .38rem .75rem; color: var(--on-primary); background: var(--primary); border-radius: 999px; font-size: .74rem; font-weight: 800; }
.package-card h3 { margin-bottom: .7rem; font-size: 1.45rem; }
.package-for { min-height: 76px; color: var(--muted); font-size: .92rem; }
.package-price { display: grid; margin: .8rem 0 1.4rem; padding-bottom: 1.35rem; border-bottom: 1px solid var(--border); }
.package-price span { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; }
.package-price strong { color: var(--ink); font-family: "Manrope", sans-serif; font-size: clamp(1.7rem, 3vw, 2rem); white-space: nowrap; }
.feature-list { display: grid; gap: .7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: .6rem; color: var(--text); font-size: .9rem; }
.feature-list i { color: var(--success); font-size: 1.05rem; }
.package-result { margin-top: auto; padding: 1rem; background: var(--surface-soft); border-radius: .75rem; }
.package-result span { color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.package-result p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.5; }
.package-card .btn { margin-top: 1rem; }
.pricing-note { display: flex; justify-content: center; gap: .5rem; margin: 2rem 0 0; color: var(--muted); font-size: .85rem; }

.image-frame { position: relative; padding: 1rem; background: var(--surface-soft); border-radius: var(--radius-lg); }
.image-frame::before { position: absolute; top: -1rem; right: -1rem; width: 9rem; height: 9rem; content: ""; border: 1px dashed var(--accent); border-radius: 50%; }
.image-frame picture { position: relative; display: block; overflow: hidden; border-radius: calc(var(--radius-lg) - .5rem); }
.image-frame img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.image-frame-warm { background: var(--surface-warm); }
.image-note { position: absolute; right: -1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #fff; border-radius: .8rem; box-shadow: var(--shadow-md); }
.image-note > i { color: var(--accent-dark); font-size: 1.6rem; }
.image-note strong, .image-note small { display: block; }
.image-note strong { color: var(--ink); font-size: .84rem; }
.image-note small { color: var(--muted); font-size: .7rem; }
.benefit-list { display: grid; gap: 1.3rem; margin: 2rem 0; }
.benefit-list > div { display: flex; gap: 1rem; }
.benefit-list > div > span { display: grid; flex: 0 0 2.75rem; height: 2.75rem; place-items: center; color: var(--primary); background: var(--surface-soft); border-radius: .75rem; }
.benefit-list h3 { margin-bottom: .25rem; }
.benefit-list p { color: var(--muted); font-size: .92rem; }

.process-preview { color: #c8dcdf; background: var(--primary-deep); }
.process-preview h2, .process-preview h3 { color: #fff; }
.process-preview .section-heading p { color: #b7cbd0; }
.process-grid { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0; padding: 0; list-style: none; }
.process-grid li { position: relative; padding: 1.6rem 1.15rem; border-top: 1px solid rgba(255,255,255,.17); border-right: 1px solid rgba(255,255,255,.1); }
.process-grid li:last-child { border-right: 0; }
.process-number { margin-bottom: 1.4rem; color: rgba(255,255,255,.25); font-family: "Manrope", sans-serif; font-size: 2.3rem; font-weight: 800; }
.process-icon { display: grid; width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; place-items: center; color: var(--on-accent); background: var(--accent); border-radius: .75rem; }
.process-grid h3 { font-size: 1rem; }
.process-grid p { color: #aac2c7; font-size: .79rem; line-height: 1.55; }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.portfolio-card { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.portfolio-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.portfolio-image { position: relative; display: block; overflow: hidden; background: var(--surface-soft); aspect-ratio: 3 / 2; }
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.portfolio-card:hover .portfolio-image img { transform: scale(1.045); }
.demo-badge { position: absolute; top: 1rem; left: 1rem; padding: .35rem .65rem; color: var(--primary-dark); background: rgba(255,255,255,.93); border: 1px solid rgba(18,91,104,.16); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: .68rem; font-weight: 800; }
.demo-badge-inline { position: static; display: inline-block; margin-bottom: 1.25rem; background: var(--surface-warm); }
.portfolio-body { padding: 1.5rem; }
.portfolio-body h3 { margin: .5rem 0 .65rem; }
.portfolio-body h3 a { color: var(--ink); text-decoration: none; }
.portfolio-body p { color: var(--muted); font-size: .9rem; }

.testimonials-section { background: #fffaf5; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 960px; margin-inline: auto; }
.testimonial-card { padding: 2rem; background: #fff; border: 1px solid #f0dfd0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sample-label { display: inline-flex; margin-bottom: 1rem; padding: .3rem .6rem; color: #76502e; background: #fff0df; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.stars { display: flex; gap: .2rem; margin-bottom: .75rem; color: var(--accent-dark); }
.testimonial-card blockquote { margin-bottom: 1.4rem; color: var(--text); font-size: 1.05rem; }
.testimonial-person { display: flex; align-items: center; gap: .75rem; }
.testimonial-person > span { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; color: var(--on-primary); background: var(--primary); border-radius: 50%; }
.testimonial-person strong, .testimonial-person small { display: block; }
.testimonial-person strong { color: var(--ink); font-size: .86rem; }
.testimonial-person small { color: var(--muted); font-size: .73rem; }

.faq-list { display: grid; gap: .75rem; }
.faq-item { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: .8rem; transition: border var(--transition), box-shadow var(--transition); }
.faq-item[open] { border-color: #9ac2c1; box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; color: var(--ink); cursor: pointer; font-weight: 800; list-style: none; transition: background var(--transition); }
.faq-item summary:hover { background: var(--surface-soft); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: 0 0 auto; color: var(--primary); transition: transform var(--transition); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-answer { padding: 0 1.25rem 1.25rem; }
.faq-answer p { margin: 0; color: var(--muted); }
.faq-item[open] .faq-answer { animation: faq-in 180ms ease-out both; }

.cta-section { padding-block: var(--section-space); }
.cta-section .site-container { margin-inline: auto; }
.cta-panel { position: relative; display: grid; min-height: 370px; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); overflow: hidden; color: #cee1e4; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); border-radius: var(--radius-lg); }
.cta-content { position: relative; z-index: 2; align-self: center; max-width: 760px; padding: clamp(2.5rem, 5vw, 5rem); }
.cta-panel h2 { color: #fff; }
.cta-panel p { max-width: 570px; font-size: 1.08rem; }
.cta-panel .button-row { margin-top: 1.6rem; }
.cta-photo { position: relative; display: block; min-height: 370px; overflow: hidden; }
.cta-photo::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--primary-deep), transparent 52%); }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; animation: image-breathe 14s ease-in-out infinite alternate; }

/* Inner pages */
.page-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 8vw, 7rem) 0; background: linear-gradient(140deg, #f4faf8, #fff8f1); }
.page-hero::after { position: absolute; top: -10rem; right: -7rem; width: 31rem; height: 31rem; content: ""; border: 1px solid rgba(18,91,104,.1); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(18,91,104,.02), 0 0 0 8rem rgba(18,91,104,.015); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 900px; margin-bottom: 1.3rem; font-size: clamp(2.6rem, 5vw, 4.35rem); }
.page-hero p { max-width: 760px; margin-bottom: 1.6rem; font-size: 1.16rem; }
.centered-hero { text-align: center; }
.centered-hero h1, .centered-hero p { margin-right: auto; margin-left: auto; }
.page-hero-photo { display: block; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.page-hero-image { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.detail-hero { padding-block: 3.5rem 5.5rem; }
.breadcrumb-nav { display: flex; align-items: center; gap: .55rem; margin-bottom: 3rem; color: var(--muted); font-size: .82rem; }
.breadcrumb-nav a { color: var(--primary); font-weight: 700; text-decoration: none; }
.detail-price { display: flex; flex-direction: column; margin-top: 1.5rem; }
.detail-price span { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.detail-price strong { color: var(--primary); font-family: "Manrope", sans-serif; font-size: 2.4rem; }
.detail-result-card { padding: 2rem; color: #d3e6e8; background: var(--primary-deep); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.detail-result-card > i { color: var(--accent); font-size: 2rem; }
.detail-result-card span { display: block; margin: .8rem 0 .25rem; color: #9fc6cb; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.feature-list-large { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.feature-list-large li { padding: .85rem; background: var(--surface-soft); border-radius: .65rem; font-size: 1rem; }
.sticky-enquiry-card { position: sticky; top: 7rem; display: grid; gap: .8rem; padding: 2rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.sticky-enquiry-card h2 { font-size: 1.8rem; }
.sticky-enquiry-card small { color: var(--muted); text-align: center; }

.detailed-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.detailed-service-card { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.6rem; background: #fff; border: 1px solid var(--border); border-radius: 1rem; transition: border var(--transition), box-shadow var(--transition); }
.detailed-service-card:hover { border-color: #a7c9c7; box-shadow: var(--shadow-sm); }
.detailed-service-card h3 { margin-bottom: .4rem; }
.detailed-service-card p { margin: 0; color: var(--muted); font-size: .89rem; }
.detailed-service-card .service-summary { margin-bottom: .6rem; color: var(--text); font-weight: 700; }
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.outcome-grid > div { padding: 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: 1rem; }
.outcome-grid i { color: var(--primary); font-size: 1.5rem; }
.outcome-grid h3 { margin: .65rem 0 .3rem; }
.outcome-grid p { color: var(--muted); font-size: .87rem; }

.package-page-section { padding-top: 6rem; }
.package-grid-page { align-items: stretch; }
.pricing-explainer { display: flex; gap: 1rem; max-width: 900px; margin: 3.2rem auto 0; padding: 1.5rem; background: var(--surface-warm); border: 1px solid #efd9c4; border-radius: 1rem; }
.pricing-explainer > i { color: var(--accent-dark); font-size: 1.5rem; }
.pricing-explainer h2 { margin-bottom: .35rem; font-size: 1.1rem; }
.pricing-explainer p { margin: 0; font-size: .88rem; }
.comparison-section { border-top: 1px solid var(--border); }
.large-check-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.large-check-list li { display: flex; gap: .85rem; padding: 1rem; background: var(--surface-soft); border-radius: .75rem; }
.large-check-list i { color: var(--success); }
.large-check-list strong { color: var(--ink); }
.honesty-note { display: inline-flex; gap: .5rem; padding: .65rem .9rem; color: #76502e; background: #fff0df; border: 1px solid #efd7bd; border-radius: .7rem; font-size: .82rem; font-weight: 700; }
.portfolio-grid-page { gap: 2rem; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.principle-grid > div { padding: 1.6rem; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 1rem; }
.principle-grid i { color: var(--primary); font-size: 1.8rem; }
.principle-grid h3 { margin: .7rem 0 .35rem; }
.principle-grid p { color: var(--muted); font-size: .88rem; }
.detail-project-image { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.project-services { margin-top: 2rem; padding: 1.25rem; background: var(--surface-soft); border-left: 3px solid var(--accent); }
.project-services span { color: var(--primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.project-note { padding: 1.5rem; background: var(--surface-warm); border: 1px solid #efd8c3; border-radius: 1rem; }
.project-note i { color: var(--accent-dark); font-size: 1.8rem; }
.project-note h2 { margin: .65rem 0; font-size: 1.3rem; }

/* Live package demos */
.demo-showcase-section { background: #f7fafb; border-top: 1px solid var(--border); }
.demo-tier + .demo-tier { padding-top: 3.5rem; margin-top: 3.5rem; border-top: 1px solid var(--border); }
.demo-tier-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.3rem; }
.demo-tier-heading small { color: var(--primary); font-size: .75rem; font-weight: 800; }
.demo-tier-heading h3 { margin: .15rem 0 0; font-size: 1.65rem; }
.work-catalog { display: grid; gap: 4.5rem; }
.demo-tier-section + .demo-tier-section { padding-top: 4.5rem; border-top: 1px solid var(--border); }
.demo-tier-section .demo-tier-heading { margin-bottom: 1.75rem; }
.demo-tier-section .demo-tier-heading h2 { margin: .25rem 0 .45rem; font-size: 2rem; }
.demo-tier-section .demo-tier-heading p { max-width: 680px; margin: 0; color: var(--muted); }
.demo-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.demo-preview-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: .5rem; box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow var(--transition), border-color var(--transition); }
.demo-preview-card:hover { border-color: #9bc9c7; box-shadow: var(--shadow-md); transform: translateY(-6px); }
.demo-preview-image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-soft); }
.demo-preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.demo-preview-image:hover img { transform: scale(1.025); }
.demo-preview-image > span { position: absolute; right: .65rem; bottom: .65rem; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .6rem; color: #fff; background: rgba(16,42,67,.92); border-radius: .35rem; font-size: .7rem; font-weight: 800; }
.demo-preview-copy { padding: 1.2rem; }
.demo-preview-copy small { color: var(--primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.demo-preview-copy h3 { margin: .3rem 0 .45rem; font-size: 1.18rem; }
.demo-preview-copy p { min-height: 4.2rem; margin-bottom: .8rem; color: var(--muted); font-size: .84rem; }

/* Client project brief */
.brief-hero { padding-bottom: 7.5rem; text-align: center; }
.brief-hero h1, .brief-hero p { margin-right: auto; margin-left: auto; }
.brief-time { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--primary); font-size: .82rem; font-weight: 800; }
.brief-section { position: relative; z-index: 2; padding-bottom: var(--section-space); margin-top: -4rem; }
.brief-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 2rem; }
.brief-guide { position: sticky; top: 7rem; padding: 1.25rem; color: #cbdde0; background: var(--primary-deep); border-radius: .5rem; }
.brief-guide ol { display: grid; gap: .25rem; padding: 0; margin: 1rem 0; list-style: none; }
.brief-guide li { display: flex; align-items: center; gap: .65rem; padding: .55rem; font-size: .82rem; font-weight: 700; }
.brief-guide li span { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; color: var(--primary-deep); background: var(--accent); border-radius: 50%; font-size: .7rem; }
.brief-guide p { display: flex; gap: .5rem; margin: 1rem 0 0; padding-top: 1rem; color: #a9c1c6; border-top: 1px solid rgba(255,255,255,.12); font-size: .74rem; }
.brief-guide p i { color: var(--accent); }
.brief-form-shell { padding: clamp(1.3rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--border); border-radius: .5rem; box-shadow: var(--shadow-lg); }
.brief-fieldset { padding: 0 0 2.75rem; margin: 0 0 2.75rem; border: 0; border-bottom: 1px solid var(--border); }
.brief-fieldset legend { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .85rem; align-items: center; margin-bottom: 1.75rem; color: var(--ink); font-family: "Manrope", sans-serif; font-size: 1.45rem; font-weight: 800; }
.brief-fieldset legend > span { display: grid; width: 2.5rem; height: 2.5rem; grid-row: 1 / 3; place-items: center; color: var(--on-primary); background: var(--primary); border-radius: 50%; font-size: .85rem; }
.brief-fieldset legend small { align-self: end; color: var(--primary); font-family: "DM Sans", sans-serif; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.compact-textarea { min-height: 6rem !important; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.choice-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice-option > input[type="checkbox"] { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.choice-option span { display: flex; min-height: 2.8rem; align-items: center; padding: .65rem .75rem .65rem 2.35rem; color: var(--text); background: #fbfdfd; border: 1px solid #cfdedc; border-radius: .4rem; font-size: .79rem; font-weight: 700; transition: color var(--transition), background var(--transition), border-color var(--transition); }
.choice-option:hover span { background: var(--surface-soft); border-color: #9ab4b2; }
.choice-option span::before { position: absolute; left: .75rem; width: 1rem; height: 1rem; content: ""; pointer-events: none; background: #fff; border: 1px solid #9ab4b2; border-radius: .2rem; }
.choice-option:has(> input[type="checkbox"]:checked) > span { color: var(--primary-dark); background: #e9f5f3; border-color: var(--primary); }
.choice-option:has(> input[type="checkbox"]:checked) > span::before { content: "\2713"; display: grid; place-items: center; color: var(--on-primary); background: var(--primary); border-color: var(--primary); font-size: .7rem; }
.choice-option:has(> input[type="checkbox"]:focus-visible) > span { outline: 3px solid rgba(18,91,104,.22); outline-offset: 2px; }
.colour-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.colour-picker-option { display: grid; gap: .55rem; padding: .8rem; color: var(--ink); background: #fbfdfd; border: 1px solid #cfdedc; border-radius: .4rem; font-size: .8rem; font-weight: 700; transition: background var(--transition), border-color var(--transition); }
.colour-picker-option:hover { background: var(--surface-soft); border-color: #9ab4b2; }
.colour-picker-option > div { display: flex; align-items: center; gap: .7rem; }
.colour-picker-option input[type="color"] { width: 3.4rem; height: 2.6rem; flex: 0 0 auto; padding: .15rem; cursor: pointer; background: var(--surface); border: 1px solid #9ab4b2; border-radius: .35rem; }
.colour-picker-option output { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; text-transform: uppercase; }
.field-error { margin-top: .4rem; color: var(--danger); font-size: .8rem; font-weight: 600; }
.field-error:empty { display: none; }
.consent-option { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: .4rem; cursor: pointer; font-size: .84rem; font-weight: 700; }
.consent-option input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--primary); }
.brief-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.brief-submit p { max-width: 360px; color: var(--muted); font-size: .76rem; }

.content-copy p { margin-bottom: 1.25rem; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-grid article { position: relative; padding: 1.5rem; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 1rem; }
.value-grid article > span { position: absolute; top: -.7rem; right: .5rem; color: #eef5f4; font-family: "Manrope", sans-serif; font-size: 4rem; font-weight: 800; }
.value-grid i { position: relative; color: var(--primary); font-size: 1.65rem; }
.value-grid h3 { position: relative; margin: .8rem 0 .4rem; }
.value-grid p { position: relative; color: var(--muted); font-size: .88rem; }
.direct-service-panel { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 4rem; padding: 3rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.direct-service-panel picture { display: block; overflow: hidden; border-radius: var(--radius-md); }
.direct-service-panel picture img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }

.process-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.process-timeline::before { position: absolute; top: 2rem; bottom: 2rem; left: 3.1rem; width: 2px; content: ""; background: var(--border); }
.process-timeline li { position: relative; display: grid; grid-template-columns: 6.3rem 1fr; gap: 2rem; padding-bottom: 3.2rem; }
.timeline-marker { z-index: 1; display: grid; width: 6.2rem; height: 6.2rem; place-items: center; color: #fff; background: var(--primary-deep); border: .65rem solid #fff; border-radius: 50%; box-shadow: var(--shadow-sm); }
.timeline-marker span { position: absolute; margin-top: -2.6rem; color: #9eb9c1; font-size: .68rem; font-weight: 800; }
.timeline-marker i { margin-top: .6rem; color: var(--accent); font-size: 1.4rem; }
.timeline-content { padding: 1.1rem 0; }
.timeline-content > span { color: var(--primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.timeline-content h2 { margin: .2rem 0 .45rem; font-size: 1.55rem; }
.readiness-list { display: grid; gap: 1rem; }
.readiness-list > div { display: flex; gap: 1rem; padding: 1.2rem; background: #fff; border: 1px solid var(--border); border-radius: .8rem; }
.readiness-list i { color: var(--primary); font-size: 1.4rem; }
.readiness-list strong, .readiness-list small { display: block; }
.readiness-list strong { color: var(--ink); }
.readiness-list small { color: var(--muted); }

.faq-category { margin-bottom: 3rem; }
.faq-category > h2 { margin-bottom: 1rem; font-size: 1.45rem; }
.small-contact-section { padding: 0 0 var(--section-space); }
.small-contact-section .container > div { display: flex; align-items: center; gap: 1.2rem; padding: 2rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); }
.small-contact-section .container > div > i { color: var(--primary); font-size: 2rem; }
.small-contact-section h2 { margin: 0; font-size: 1.3rem; }
.small-contact-section p { margin: 0; color: var(--muted); }
.small-contact-section .btn { margin-left: auto; }

/* Contact and legal */
.contact-hero { padding-bottom: 8rem; text-align: center; }
.contact-hero h1, .contact-hero p { margin-right: auto; margin-left: auto; }
.contact-section { position: relative; z-index: 2; padding-bottom: var(--section-space); margin-top: -4rem; }
.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.form-heading { margin-bottom: 1.75rem; }
.form-heading h2 { font-size: 1.8rem; }
.form-heading p { color: var(--muted); font-size: .85rem; }
.form-label { margin-bottom: .4rem; color: var(--ink); font-weight: 700; }
.form-control, .form-select { min-height: 3.2rem; padding: .75rem .9rem; color: var(--ink); background-color: #fbfdfd; border-color: #cfdedc; border-radius: .65rem; }
textarea.form-control { min-height: 150px; }
.form-control:focus, .form-select:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 .22rem rgba(18,91,104,.12); }
.form-text { color: var(--muted); font-size: .76rem; }
.form-help-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.character-count { flex: 0 0 auto; padding-top: .25rem; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.character-count.is-near-limit { color: var(--danger); font-weight: 700; }
.invalid-feedback { font-weight: 600; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.form-submit p { color: var(--muted); font-size: .76rem; }
.success-message { display: flex; gap: .8rem; margin-bottom: 1.5rem; color: #155d40; background: #e8f6ef; border-color: #b7dfcc; }
.success-message > i { font-size: 1.4rem; }
.success-message strong, .success-message span { display: block; }
.contact-sidebar { padding: 2rem; color: #cbdde0; background: var(--primary-deep); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.contact-sidebar h2 { color: #fff; }
.contact-sidebar > p { color: #b5cbd0; }
.contact-methods { display: grid; gap: .7rem; margin: 1.5rem 0; }
.contact-methods > a { display: flex; align-items: center; gap: .75rem; padding: .85rem; color: #fff; border: 1px solid rgba(255,255,255,.13); border-radius: .75rem; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.contact-methods > a:hover { background: rgba(255,255,255,.07); transform: translateX(3px); }
.contact-methods > a > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--on-accent); background: var(--accent); border-radius: .6rem; }
.contact-methods > a > div { flex: 1; }
.contact-methods small, .contact-methods strong { display: block; }
.contact-methods small { color: #9eb9c1; font-size: .68rem; }
.contact-methods strong { font-size: .83rem; overflow-wrap: anywhere; }
.response-note, .service-area-card { display: flex; gap: .75rem; margin-top: 1rem; padding: 1rem; background: rgba(255,255,255,.06); border-radius: .75rem; }
.response-note > i, .service-area-card > i { color: var(--accent); }
.response-note strong { color: #fff; font-size: .82rem; }
.response-note p, .service-area-card p { color: #a9c1c6; font-size: .77rem; }
.service-area-card small, .service-area-card strong { display: block; }
.service-area-card small { color: #9eb9c1; font-size: .68rem; }
.service-area-card strong { color: #fff; }
.legal-hero { text-align: left; }
.legal-copy { max-width: 800px; }
.legal-copy h2 { margin: 2rem 0 .65rem; font-size: 1.45rem; }
.legal-copy p { color: var(--text); }
.legal-intro { padding: 1rem; background: var(--surface-warm); border-left: 3px solid var(--accent); }
.legal-updated { margin-top: 2.5rem; color: var(--muted) !important; font-size: .82rem; font-weight: 700; }

/* Footer and errors */
.site-footer { padding: 4.5rem 0 1.2rem; color: #acc4c9; background: #0a2436; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .75fr 1fr 1.15fr; gap: 3rem; }
.navbar-brand-light { color: #fff; }
.navbar-brand-light:hover { color: #fff; }
.navbar-brand-light small { color: #9eb9c1; }
.footer-brand p { max-width: 330px; margin: 1.2rem 0; font-size: .88rem; }
.footer-area { color: #d8e8ea; font-size: .82rem; }
.footer-area i { margin-right: .4rem; color: var(--accent); }
.footer-heading { margin-bottom: 1.15rem; color: #fff; font-size: .92rem; letter-spacing: 0; }
.footer-links { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #acc4c9; font-size: .84rem; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-contact a { display: flex; gap: .5rem; align-items: flex-start; overflow-wrap: anywhere; }
.footer-contact i { color: var(--accent); }
.site-footer p { font-size: .86rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p { margin: 0; font-size: .75rem; }
.footer-bottom div { display: flex; gap: 1.2rem; }
.footer-bottom a { color: #acc4c9; font-size: .75rem; text-decoration: none; }
.error-page { display: grid; min-height: 75vh; place-items: center; padding: 5rem 0; text-align: center; background: linear-gradient(140deg, #f4faf8, #fff8f1); }
.error-page .container { max-width: 720px; }
.error-code { color: #d6e7e5; font-family: "Manrope", sans-serif; font-size: clamp(5rem, 14vw, 10rem); font-weight: 800; line-height: 1; }
.error-page h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.error-page p { max-width: 570px; margin: 0 auto 1.5rem; }

/* Progressive interaction and motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 560ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.btn[aria-busy="true"] i { animation: spin .8s linear infinite; }
.mobile-action-bar { display: none; }

html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #62c8cb;
    --primary-dark: #91dde0;
    --primary-deep: #071a22;
    --secondary: #72acc2;
    --accent: #ffad66;
    --accent-dark: #ffbd84;
    --ink: #edf7f5;
    --text: #c6d7da;
    --muted: #91a8ad;
    --surface: #0c1a20;
    --surface-soft: #13272d;
    --surface-warm: #2a211e;
    --border: #294148;
    --success: #69c99b;
    --danger: #ff8895;
    --on-primary: #071a22;
    --on-accent: #071a22;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
    --shadow-md: 0 18px 50px rgba(0, 0, 0, .3);
    --shadow-lg: 0 28px 75px rgba(0, 0, 0, .38);
}
html[data-theme="dark"] .site-header { background: rgba(8, 22, 28, .94); border-color: var(--border); }
html[data-theme="dark"] .site-header.is-scrolled { background: rgba(8, 22, 28, .98); }
html[data-theme="dark"] .navbar .nav-link { color: #c0d1d4; }
html[data-theme="dark"] .navbar-toggler { border-color: #668087; }
html[data-theme="dark"] .btn-primary {
    --bs-btn-disabled-color: #071a22;
    --bs-btn-disabled-bg: #62c8cb;
    --bs-btn-disabled-border-color: #62c8cb;
}
html[data-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #071a22; --bs-btn-active-color: #071a22; }
html[data-theme="dark"] .hero-home,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .error-page { background: linear-gradient(135deg, #0d2228, #14262a 56%, #2b211e); }
html[data-theme="dark"] .availability-pill,
html[data-theme="dark"] .floating-card { background: rgba(13, 31, 37, .94); border-color: var(--border); }
html[data-theme="dark"] .cta-panel { background: linear-gradient(135deg, #0d5964 0%, var(--primary-deep) 100%); }
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .sticky-enquiry-card,
html[data-theme="dark"] .detailed-service-card,
html[data-theme="dark"] .outcome-grid > div,
html[data-theme="dark"] .principle-grid > div,
html[data-theme="dark"] .demo-preview-card,
html[data-theme="dark"] .brief-form-shell,
html[data-theme="dark"] .value-grid article,
html[data-theme="dark"] .direct-service-panel,
html[data-theme="dark"] .readiness-list > div,
html[data-theme="dark"] .form-card { background: #102228; }
html[data-theme="dark"] .service-card:hover { background: #153038; }
html[data-theme="dark"] .service-card:hover::before { background: #19383e; }
html[data-theme="dark"] .icon-tile { background: #19363b; }
html[data-theme="dark"] .image-note { background: #102228; }
html[data-theme="dark"] .testimonials-section,
html[data-theme="dark"] .demo-showcase-section { background: #101d22; }
html[data-theme="dark"] .sample-label,
html[data-theme="dark"] .honesty-note { color: #ffd0a6; background: #32251e; border-color: #63452e; }
html[data-theme="dark"] .package-label,
html[data-theme="dark"] .demo-badge { color: #071a22; }
html[data-theme="dark"] .demo-badge { background: rgba(194, 241, 239, .94); border-color: rgba(7, 26, 34, .28); }
html[data-theme="dark"] .demo-badge-inline { color: #ffd0a6; background: #32251e; border-color: #63452e; }
html[data-theme="dark"] .detailed-service-card:hover,
html[data-theme="dark"] .demo-preview-card:hover,
html[data-theme="dark"] .faq-item[open] { border-color: var(--primary); }
html[data-theme="dark"] .pricing-explainer,
html[data-theme="dark"] .project-note { border-color: #63452e; }
html[data-theme="dark"] .timeline-marker { border-color: var(--surface); }
html[data-theme="dark"] .value-grid article > span { color: #1c363c; }
html[data-theme="dark"] .choice-option span,
html[data-theme="dark"] .colour-picker-option,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { color: var(--ink); background-color: #0d2026; border-color: var(--border); }
html[data-theme="dark"] .choice-option span::before { background: #0d2026; border-color: #668087; }
html[data-theme="dark"] .choice-option:has(> input[type="checkbox"]:checked) > span { color: #b9f1ef; background: #16373b; }
html[data-theme="dark"] .choice-option:hover span,
html[data-theme="dark"] .colour-picker-option:hover { background: #163139; border-color: #668087; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background: #12282e; }
html[data-theme="dark"] .form-control:hover,
html[data-theme="dark"] .form-select:hover { border-color: #668087; }
html[data-theme="dark"] .form-control::placeholder { color: #718b91; }
html[data-theme="dark"] .form-control:-webkit-autofill,
html[data-theme="dark"] .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 1000px #0d2026 inset;
}
html[data-theme="dark"] .success-message { color: #b9efd4; background: #12352a; border-color: #2b6a52; }
html[data-theme="dark"] .alert-danger { color: #ffc3ca; background: #3b1c23; border-color: #71303b; }
html[data-theme="dark"] .mobile-action-bar { background: rgba(10, 26, 32, .96); }
html[data-theme="dark"] .mobile-action-secondary { color: var(--primary); background: var(--surface-soft); }
html[data-theme="dark"] .mobile-action-primary:hover { color: var(--on-primary); }

@keyframes image-drift { from { transform: scale(1.015) translate3d(-.3%, 0, 0); } to { transform: scale(1.075) translate3d(.6%, -.4%, 0); } }
@keyframes image-breathe { from { transform: scale(1.02); } to { transform: scale(1.08); } }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(67,165,116,.35); } 50% { box-shadow: 0 0 0 6px rgba(67,165,116,0); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1199.98px) {
    .site-header .navbar { min-height: 72px; }
    .navbar-collapse { padding: 1rem 0 .3rem; border-top: 1px solid var(--border); }
    .navbar .nav-link { padding-inline: .2rem !important; }
    .navbar .nav-link::after { right: auto; left: .2rem; width: 1.5rem; }
    .nav-cta { margin: .75rem 0 .25rem; }
    .theme-toggle { margin: .75rem 0 .25rem; }
    .process-grid { grid-template-columns: repeat(3, 1fr); }
    .process-grid li:nth-child(3) { border-right: 0; }
    .footer-grid { grid-template-columns: 1.2fr .8fr 1fr; }
    .footer-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 991.98px) {
    .hero-home { padding-top: 4rem; }
    .hero-visual { min-height: 530px; max-width: 650px; margin-inline: auto; }
    .trust-strip .container { flex-direction: column; align-items: flex-start; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .package-grid { grid-template-columns: 1fr; max-width: 650px; margin-inline: auto; gap: 2rem; }
    .package-featured { order: -1; transform: none; }
    .package-featured:hover { transform: translateY(-5px); }
    .package-for { min-height: auto; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid li:nth-child(3) { border-right: 1px solid rgba(255,255,255,.1); }
    .process-grid li:nth-child(even) { border-right: 0; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .direct-service-panel { grid-template-columns: 1fr; gap: 2rem; }
    .direct-service-panel picture { width: min(100%, 560px); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid > :last-child { grid-column: auto; }
    .demo-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brief-layout { grid-template-columns: 1fr; }
    .brief-guide { position: static; }
    .brief-guide ol { grid-template-columns: repeat(5, 1fr); }
    .brief-guide li { justify-content: center; padding: .35rem; }
    .brief-guide li span { display: none; }
}

@media (max-width: 767.98px) {
    :root { --section-space: 4.5rem; }
    .split-heading { grid-template-columns: 1fr; gap: 1rem; }
    .hero-copy h1 em { white-space: normal; }
    .hero-visual { min-height: 420px; }
    .floating-card-top { right: 0; }
    .trust-items { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card { min-height: auto; }
    .image-note { right: 0; bottom: .5rem; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid li { border-right: 0 !important; }
    .portfolio-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .cta-panel { min-height: auto; grid-template-columns: 1fr; }
    .cta-content { width: 100%; padding-bottom: 2.5rem; }
    .cta-photo { min-height: 260px; }
    .cta-photo::after { background: linear-gradient(180deg, var(--primary-deep), transparent 38%); }
    .detailed-service-grid, .outcome-grid, .feature-list-large { grid-template-columns: 1fr; }
    .principle-grid { grid-template-columns: 1fr; }
    .small-contact-section .container > div { align-items: flex-start; flex-wrap: wrap; }
    .small-contact-section .btn { margin-left: 0; }
    .form-submit { align-items: flex-start; flex-direction: column; }
    .demo-preview-grid { grid-template-columns: 1fr; }
    .demo-preview-copy p { min-height: auto; }
    .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .colour-picker-grid { grid-template-columns: 1fr; }
    .brief-guide ol { grid-template-columns: repeat(3, 1fr); }
    .brief-submit { align-items: flex-start; flex-direction: column; }
    .mobile-action-bar { position: fixed; right: .65rem; bottom: max(.65rem, env(safe-area-inset-bottom)); left: .65rem; z-index: 1100; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.35fr); gap: .45rem; padding: .45rem; background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: .9rem; box-shadow: 0 16px 45px rgba(16,42,67,.22); opacity: 1; transform: translateY(0); transition: opacity var(--transition), transform var(--transition); backdrop-filter: blur(14px); }
    .mobile-action-bar[hidden] { display: none; }
    .mobile-action-bar.is-hidden { pointer-events: none; opacity: 0; transform: translateY(calc(100% + 1.5rem)); }
    .mobile-action-bar a { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .7rem; border-radius: .65rem; font-size: .82rem; font-weight: 800; text-decoration: none; }
    .mobile-action-secondary { color: var(--primary); background: var(--surface-soft); }
    .mobile-action-primary { color: var(--on-primary); background: var(--primary); box-shadow: 0 6px 16px rgba(18,91,104,.2); }
    .mobile-action-primary:hover { color: var(--on-primary); background: var(--primary-dark); }
    .site-footer { padding-bottom: 6.3rem; }
}

@media (max-width: 575.98px) {
    body { font-size: .96rem; }
    .site-container { width: min(100% - 1.25rem, var(--container)); }
    .button-row .btn { width: 100%; }
    .hero-home { padding-top: 3.25rem; }
    .hero-visual { min-height: 330px; }
    .floating-card { min-width: auto; padding: .55rem .65rem; }
    .floating-card-top { top: 5%; }
    .floating-card-bottom { bottom: 0; }
    .mini-icon { width: 2rem; height: 2rem; }
    .trust-items { grid-template-columns: 1fr; }
    .detailed-service-card { grid-template-columns: 1fr; }
    .value-grid { grid-template-columns: 1fr; }
    .process-timeline::before { left: 2.3rem; }
    .process-timeline li { grid-template-columns: 4.7rem 1fr; gap: 1rem; }
    .timeline-marker { width: 4.6rem; height: 4.6rem; border-width: .5rem; }
    .timeline-marker span { margin-top: -1.9rem; }
    .timeline-marker i { margin-top: .5rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .form-help-row { flex-direction: column; gap: .15rem; }
    .demo-tier-heading { align-items: flex-start; flex-direction: column; }
    .choice-grid { grid-template-columns: 1fr; }
    .brief-guide ol { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}