/* Global brand variables and base styles */
:root {
	--navy: #0D1024;
	--blue: #00B2FF;
	--purple: #7B61FF;
	--pink: #FF2E8A;
	--coral: #FF6A4D;
	--white: #FFFFFF;
	--cream: #FFF6EA;
	--soft-cream: #FFF2E3;
	--peach: #FFE3D7;
	--text-dark: #0F172A;
	--text-muted: #475569;
	--border-soft: rgba(15, 23, 42, 0.10);
	--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
	--shadow-glow: 0 18px 44px rgba(255, 106, 77, 0.18);
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--container: 1180px;
	--gradient-brand: linear-gradient(135deg, #00B2FF 0%, #7B61FF 35%, #FF2E8A 68%, #FF6A4D 100%);
	--coral-gradient: linear-gradient(90deg,#FF6B5F,#FF8A7E);
}

/* Skip link */
.skip-link {position:absolute; top:-100%; left:16px; background:var(--coral); color:#fff; padding:10px 18px; border-radius:0 0 10px 10px; font-weight:700; font-size:15px; z-index:9999; text-decoration:none; transition:top .2s ease}
.skip-link:focus {top:0}

/* Reset & base */
* {box-sizing: border-box}
html {font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; scroll-behavior: smooth}
body {margin:0; color:var(--text-dark); background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:18px}
img {max-width:100%; height:auto; display:block}

/* Focus styles for keyboard navigation */
:focus-visible {outline:3px solid var(--coral); outline-offset:3px; border-radius:4px}
.btn:focus-visible {outline-offset:4px}

.container {max-width:var(--container); margin:0 auto; padding:0 24px}
.eyebrow {text-transform:uppercase; color:var(--text-muted); letter-spacing:0.12em; font-weight:700; font-size:0.78rem}

/* Typography */
h1, h2, h3, h4 {font-family: 'Space Grotesk', sans-serif; color:var(--navy); margin:0 0 12px}
h1 {font-size:clamp(48px,6vw,82px); line-height:1.02; letter-spacing:-0.03em; font-weight:900; max-width:720px}
h2 {font-size:clamp(30px,4vw,48px)}
h3 {font-size:18px}
p {color:var(--text-muted); margin:0 0 16px}
.lead {color:var(--text-dark); font-size:18px}

/* Header - strong navy bar */
.site-header {position:sticky; top:0; z-index:80; background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.04); min-height:72px}
.header-inner {display:flex; align-items:center; justify-content:space-between; gap:16px; height:74px}
.brand img {height:72px; width:auto; display:block; mix-blend-mode:screen}

.primary-nav {margin-left:24px; flex:1}
.nav-list {display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center}
.nav-list a {color:rgba(255,255,255,0.96); text-decoration:none; padding:10px 4px; position:relative; font-weight:600; font-size:17px}
.nav-list a::after {content:''; position:absolute; left:0; bottom:-8px; height:3px; width:0; background:linear-gradient(90deg,var(--coral),var(--pink)); transition:width .32s cubic-bezier(.2,.9,.2,1)}
.nav-list a:hover::after, .nav-list a:focus::after {width:100%}

.header-ctas .btn {white-space:nowrap}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 22px; border-radius:12px; font-weight:800; text-decoration:none; border:1px solid transparent; transition:transform .3s ease, box-shadow .3s ease}
.btn-primary {background:linear-gradient(90deg,var(--coral),#FF7A5E); color:var(--white); box-shadow:0 14px 40px rgba(255,106,77,0.18)}
.btn:hover {transform:translateY(-2px)}
.btn-primary:hover {transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,107,95,0.25)}
.btn-secondary {background:transparent; color:var(--navy); border:2px solid rgba(13,16,36,0.22); font-weight:800}
.btn-secondary:hover {background:rgba(13,16,36,0.06); border-color:rgba(13,16,36,0.45); transform:translateY(-2px)}

/* Mobile nav adjustments */
.nav-toggle {display:none; list-style:none; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; padding:10px 18px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; user-select:none}
.nav-toggle::-webkit-details-marker {display:none}

@media (max-width:720px) {
	.nav-list {display:none}
	.nav-toggle {display:block}
	.brand img {height:56px; width:auto}
	.header-ctas {display:none}
	.primary-nav {position:relative; flex:none; margin-left:auto}
	.nav-details[open] .nav-list {
		display:flex; flex-direction:column; gap:4px;
		position:absolute; right:0; top:calc(100% + 8px);
		background:var(--navy); border:1px solid rgba(255,255,255,0.1);
		border-radius:14px; padding:12px; min-width:200px; z-index:200;
		box-shadow:0 24px 64px rgba(0,0,0,0.36)
	}
	.nav-details[open] .nav-list a {padding:11px 16px; border-radius:8px; display:block}
	.nav-details[open] .nav-list a:hover {background:rgba(255,255,255,0.07)}
	.nav-details[open] .nav-list a::after {display:none}
	body {font-size:17px}
}

/* Hero */
.hero {padding:140px 0 64px; background:
	radial-gradient(circle at 15% 12%, rgba(255,46,138,0.14), transparent 18%),
	radial-gradient(circle at 82% 34%, rgba(0,178,255,0.12), transparent 22%),
 	linear-gradient(135deg, #FFF6EA 0%, #FFFFFF 48%, #FFF2E3 100%);
}
.hero-inner {display:flex; gap:56px; align-items:center}
.hero-left {flex:1}
.hero-eyebrow {display:inline-block; background:linear-gradient(90deg,var(--coral),var(--pink)); color:#fff; padding:8px 14px; border-radius:999px; font-weight:800; margin-bottom:22px; font-size:0.95rem}
.hero h1 {color:var(--navy);}
.hero .lead {max-width:650px; font-size:22px; line-height:1.7; color:var(--text-dark)}
.hero-actions {display:flex; gap:14px; margin-top:22px}

@media (max-width:720px) {
	.hero-actions {flex-direction:column; gap:12px}
	.hero-actions .btn {width:100%}
}

.hero-visual {width:min(620px, 48%)}
@media (max-width:900px) { .hero-visual {width:100%} }
.hero-card {position:relative; background:linear-gradient(180deg,#061022, #0b1228); color:var(--white); padding:44px; border-radius:24px; backdrop-filter:blur(10px); box-shadow:0 40px 88px rgba(13,16,36,0.36), 0 20px 50px rgba(255,107,95,0.18); border:1px solid rgba(255,255,255,0.04); transform:translateY(0); transition:transform .28s cubic-bezier(.2,.9,.2,1); overflow:visible}
.hero-card::after {content:''; position:absolute; inset:-8px; border-radius:26px; background:linear-gradient(90deg, rgba(0,178,255,0.06), rgba(123,97,255,0.04), rgba(255,46,138,0.04)); filter:blur(18px); z-index:-1}
.hero-card:hover {transform:translateY(-10px); box-shadow:0 56px 140px rgba(13,16,36,0.42), 0 30px 80px rgba(255,106,77,0.14)}
.hero-card h3 {font-size:22px}
.hero-card p {font-size:16px}
.hero-card .mini .card {padding:14px;border-radius:12px;background:rgba(255,255,255,0.04);box-shadow:none}
.hero-card .pill {display:inline-block; padding:8px 12px; border-radius:999px; background:linear-gradient(90deg,var(--purple),var(--pink)); font-weight:800; color:white; font-size:0.9rem; margin-bottom:14px}
.hero-card .mini {display:flex; gap:12px; margin-top:14px}
.glow-card {box-shadow:0 40px 88px rgba(13,16,36,0.36), 0 14px 48px rgba(255,106,77,0.10)}
.hero-card h3 {color:var(--white); margin-bottom:10px}
.hero-card p {color:rgba(255,255,255,0.92); margin-bottom:14px}

/* floating mockup */
.hero-card.floating {animation:float 6s ease-in-out infinite}
@keyframes float {0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* Trust bar */
.trust-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px}
.trust-pill {background:var(--white); padding:12px 18px; border-radius:999px; box-shadow:0 22px 60px rgba(15,23,42,0.10); text-align:center; font-weight:600; color:var(--navy); font-size:15px}
@media (max-width:880px){ .trust-grid {grid-template-columns:repeat(2,1fr)} }

/* Sections */
.section {padding:72px 0}
.intro {max-width:720px}

.grid {display:grid; gap:22px}
.cards {grid-template-columns:repeat(2,1fr)}
.card {background:var(--white); padding:44px; border-radius:18px; box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease; min-height:200px}
.card:hover {transform:translateY(-8px)}
.card h4 {font-size:20px}
.card .badge {width:64px; height:64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; margin-right:16px}
.badge-coral {background:linear-gradient(90deg,var(--coral),var(--pink))}
.badge-blue {background:linear-gradient(90deg,var(--blue),var(--purple))}

/* Services grid responsive */
@media (max-width:880px){ .cards {grid-template-columns:1fr} }

/* Audit */
.audit-inner {display:flex; gap:28px; align-items:flex-start}
.audit-left {flex:1}
.check-row {background:var(--white); padding:14px 18px; border-radius:14px; margin-bottom:14px; color:var(--text-dark); font-weight:700; border:1px solid rgba(15,23,42,0.05); display:flex; align-items:center; gap:12px}
.check-row::before {content:'\2714'; display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:6px; background:linear-gradient(90deg,var(--coral),var(--pink)); color:white; font-weight:800; margin-right:8px}
.audit-card {width:440px; background:var(--white); padding:32px; border-radius:16px; box-shadow:0 28px 80px rgba(15,23,42,0.08)}
.audit-card .btn-primary {width:100%; padding:16px 20px; font-size:16px}

@media (max-width:880px){ .audit-inner {flex-direction:column} .audit-card {width:100%} }

/* Process */
.process.section-dark {background:var(--navy); color:var(--white); padding:100px 0}
.process.section-dark .eyebrow {color:var(--pink)}
.process.section-dark h2, .process.section-dark h3 {color:var(--white)}
.process.section-dark h2 {font-size:36px}
.process.section-dark .cards {grid-template-columns:repeat(4,1fr); gap:26px}
.process.section-dark .card {position:relative; padding:32px 20px; background:var(--white); color:var(--navy); min-height:220px}
.process.section-dark .card p {max-width:28ch}
.process.section-dark .card .num {position:absolute; left:18px; top:18px; width:56px; height:56px; border-radius:50%; background:linear-gradient(90deg,var(--coral),var(--pink)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:48px; opacity:.20}
.process.section-dark .card h4 {margin-top:16px}
@media (max-width:1100px){ .process .cards {grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .process .cards {grid-template-columns:1fr} }

/* Portfolio card link buttons */
.link-btn {display:inline-block; padding:10px 18px; background:var(--navy); color:var(--white); border-radius:999px; text-decoration:none; font-weight:700; font-size:14px; margin-top:auto}
.link-btn:hover {box-shadow:0 18px 44px rgba(255,106,77,0.14); transform:translateY(-1px)}

/* Responsive hero and layout tweaks */
@media (max-width:900px) {
	.hero-inner {flex-direction:column; gap:28px}
	.hero-visual {width:100%}
	.hero-card {width:100%}
	.trust-grid {grid-template-columns:repeat(2,1fr)}
}


/* Footer */
.site-footer {background:var(--navy); color:var(--white); padding:32px 0}
.footer-inner {display:flex; gap:20px; align-items:center; justify-content:space-between}
.footer-brand {display:flex; gap:12px; align-items:center}
.footer-brand img {max-width:140px}
.footer-nav a {margin-left:16px; color:rgba(255,255,255,0.88); text-decoration:none; font-weight:700}
.footer-nav a:hover {color:var(--coral)}
.copyright {color:rgba(255,255,255,0.6)}

/* Fade-up animation for on-scroll */
.fade-up {opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}
.in-view {opacity:1; transform:none}

/* small utilities */
.tag, .eyebrow {line-height:1.2}
.lead {line-height:1.65}

/* gradient text utility */
.gradient-text {background: var(--coral-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display:inline-block}

/* section helpers */
.section-white {background:var(--white)}
.section-cream {background:linear-gradient(180deg,var(--soft-cream),var(--cream))}
.section-peach {background:linear-gradient(90deg, rgba(255,106,77,0.04), rgba(255,120,94,0.02))}

/* Portfolio showcase wrapper — locks white background across all child subsections */
.portfolio-showcase {background:var(--white)}

/* Operator Advantage section */
.section.operator {background:linear-gradient(180deg, #FFF8F3, var(--cream));}
.section.operator .feature-cards {grid-template-columns:repeat(3,1fr); margin-top:20px}
.section.operator .card.feature {padding:40px; border-radius:18px; box-shadow:0 28px 80px rgba(15,23,42,0.06); min-height:220px}
.section.operator .card.feature h4 {font-size:20px; margin-bottom:10px}

/* Timeline / Process styles */
.timeline {display:flex; gap:20px; align-items:stretch; margin-top:24px}
.timeline .step {flex:1; background:rgba(255,255,255,0.02); padding:22px; border-radius:14px; position:relative; box-shadow:0 18px 40px rgba(13,16,36,0.08); min-height:140px}
.process.section-dark .timeline .step {background:rgba(255,255,255,0.03); color:var(--white)}
.step-num {font-family:'Space Grotesk',sans-serif; font-weight:900; font-size:48px; opacity:.12; position:absolute; left:18px; top:14px}
.step-body {margin-left:86px}
.step-body h4 {margin:0 0 8px; font-size:20px}
.step-body p {margin:0; color:var(--text-muted)}
.process.section-dark .step-body p {color:rgba(255,255,255,0.88); font-size:16px}
@media (max-width:900px) { .timeline {flex-direction:column} .step-body {margin-left:0} .step-num {position:relative; left:auto; top:auto; opacity:.2; margin-bottom:8px} }

@media (max-width:900px){ .section.operator .feature-cards {grid-template-columns:1fr} }

/* Stronger coral background for audit offer section to convert */
.section.audit {background: linear-gradient(135deg, #FF6B5F 0%, #FF8A7E 100%); color:var(--white)}
.section.audit .eyebrow, .section.audit h2, .section.audit p, .section.audit .check-row {color:inherit}
.section.audit .check-row {background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06)}

/* ============================================================
   Portfolio Showcase
   ============================================================ */

.port-intro {padding:72px 0 52px}
.port-intro h2 {font-size:clamp(28px,4vw,50px); max-width:800px; margin:10px 0 16px}
.port-intro-copy {font-size:18px; line-height:1.7; max-width:660px; color:var(--text-muted); margin-bottom:24px}
.port-trust-line {display:inline-block; font-size:13px; font-weight:700; letter-spacing:0.12em; color:var(--coral); text-transform:uppercase; padding:10px 22px; border:1.5px solid rgba(255,106,77,0.28); border-radius:999px}

/* Browser mockup chrome */
.browser-mockup {border-radius:14px; overflow:hidden; box-shadow:0 20px 56px rgba(0,0,0,0.3)}
.browser-bar {background:#252d42; padding:10px 14px; display:flex; gap:7px; align-items:center}
.bdot {display:inline-block; width:11px; height:11px; border-radius:50%; flex-shrink:0}
.bdot-red {background:#FF5F57}
.bdot-yellow {background:#FEBC2E}
.bdot-green {background:#28C840}
.browser-mockup-light {box-shadow:0 16px 48px rgba(15,23,42,0.12)}
.browser-mockup-light .browser-bar {background:#d4daea}

.screenshot-frame {overflow:hidden; width:100%; display:block; position:relative; flex-shrink:0}
.screenshot-frame img {width:100%; height:100%; object-fit:cover; object-position:top center; display:block; min-height:100%; transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.browser-mockup:hover .screenshot-frame img {transform:scale(1.04)}

/* Before/After labels */
.ba-label {display:inline-block; font-size:11px; font-weight:800; letter-spacing:0.13em; text-transform:uppercase; padding:5px 12px; border-radius:6px; margin-bottom:10px}
.ba-label-before {background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.65); border:1px solid rgba(255,255,255,0.15)}
.ba-label-after {background:var(--coral); color:#fff}
.ba-label-neutral {background:rgba(15,23,42,0.08); color:var(--text-muted); border:1px solid rgba(15,23,42,0.14)}

/* ============================================================
   Featured Transformation (Villane's)
   ============================================================ */

.featured-transformation {background:var(--navy); padding:96px 0 80px}
.ft-eyebrow {color:var(--coral) !important; margin-bottom:24px}

/* Two-column: text left, visuals right */
.ft-layout {display:grid; grid-template-columns:40% 1fr; gap:56px; align-items:start; margin-bottom:40px}

.ft-heading {color:#fff; font-size:clamp(22px,2.6vw,36px); margin:0 0 16px; line-height:1.2}
.ft-meta {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.ft-project {color:#F2C94C; font-weight:800; font-size:16px; font-family:'Space Grotesk',sans-serif}
.ft-cats {color:rgba(255,255,255,0.62); font-size:14px; font-weight:600}
.ft-copy {color:rgba(255,255,255,0.76); font-size:17px; line-height:1.72; margin-bottom:22px}

.wc-heading {color:#fff; font-size:16px; font-weight:700; margin-bottom:12px}
.wc-list {list-style:none; margin:0 0 30px; padding:0}
.wc-list li {color:rgba(255,255,255,0.82); font-size:16px; padding:9px 0 9px 22px; border-bottom:1px solid rgba(255,255,255,0.07); position:relative; line-height:1.5}
.wc-list li::before {content:'→'; position:absolute; left:0; top:8px; color:var(--coral); font-weight:700}
.wc-list li:last-child {border-bottom:none}

.ft-ctas {display:flex; gap:12px; flex-wrap:wrap}
.btn-outline-light {background:transparent; border:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.9)}
.btn-outline-light:hover {background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.4); transform:translateY(-2px)}

/* Visual sub-grid: before stack left, after right */
.ft-visuals {display:grid; grid-template-columns:1fr 1.6fr; gap:16px; align-items:start}
.ft-before-group, .ft-after-group {display:flex; flex-direction:column}
.before-mockups {display:flex; flex-direction:column; gap:12px}
.screenshot-before {height:240px; max-height:240px}
.screenshot-after {height:520px; max-height:520px}
.browser-mockup-featured {box-shadow:0 48px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,87,0.2), 0 24px 72px rgba(255,107,87,0.12)}

/* Result cards row (full width, below the layout) */
.result-cards {display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.result-card {background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:26px; transition:background .25s ease}
.result-card:hover {background:rgba(255,255,255,0.09)}
.rc-icon {color:var(--coral); font-size:18px; margin-bottom:10px}
.result-card h4 {color:#fff; font-size:15px; margin-bottom:8px; font-weight:700}
.result-card p {color:rgba(255,255,255,0.78); font-size:15px; line-height:1.65; margin:0}

/* ============================================================
   Mini Transformation (Simmons)
   ============================================================ */

.mini-transformation {padding:88px 0}
.mt-eyebrow {color:var(--coral) !important; margin-bottom:24px}
.mt-inner {display:grid; grid-template-columns:1fr 1.9fr; gap:64px; align-items:start}
.mt-heading {font-size:clamp(24px,2.6vw,36px); color:var(--navy); margin:0 0 10px; line-height:1.18}
.mt-cats {font-size:13px; color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:0.09em; margin:0 0 16px}
.mt-copy {font-size:17px; line-height:1.72; color:var(--text-muted); margin-bottom:28px}
.mt-visuals {display:grid; grid-template-columns:1fr 1.55fr; gap:16px; align-items:start}
.mt-before-wrap, .mt-after-wrap {display:flex; flex-direction:column}
.mt-before-mockups {display:flex; flex-direction:column; gap:12px}
.browser-mockup-mt-after {box-shadow:0 36px 88px rgba(15,23,42,0.18), 0 0 0 2px rgba(255,106,77,0.18)}
.screenshot-mini-before {height:240px; max-height:240px}
.screenshot-mini-after {height:380px; max-height:380px}

/* ============================================================
   Portfolio Grid
   ============================================================ */

.portfolio-grid-section {padding:88px 0; border-top:1px solid rgba(15,23,42,0.06)}
.portfolio-grid-section .eyebrow {margin-bottom:8px}
.portfolio-grid-section h2 {margin-bottom:40px}
.port-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:32px}

.port-card {background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 14px 44px rgba(15,23,42,0.09); transition:transform .28s ease, box-shadow .28s ease; display:flex; flex-direction:column}
.port-card:hover {transform:translateY(-8px); box-shadow:0 32px 80px rgba(15,23,42,0.14)}
.port-card-image {height:280px; max-height:280px; overflow:hidden; background:#eef0f6; display:block; position:relative}
.port-card-image img {width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.port-card:hover .port-card-image img {transform:scale(1.06)}
.port-card-body {padding:28px; flex:1; display:flex; flex-direction:column}
.port-cat {font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--coral); margin:0 0 8px}
.port-card-body h4 {font-size:18px; font-weight:800; color:var(--navy); margin:0 0 10px}
.port-card-body p {font-size:15.5px; line-height:1.65; color:var(--text-muted); margin:0 0 20px; flex:1}

/* ============================================================
   Audit Form Section
   ============================================================ */

.audit-form-section {background:linear-gradient(160deg, #0D1024 0%, #0f1a30 100%); padding:100px 0}
.af-inner {display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start}

.af-eyebrow {color:var(--coral) !important}
.af-heading {color:#fff; font-size:clamp(26px,3vw,42px); margin:12px 0 18px; line-height:1.18}
.af-copy {color:rgba(255,255,255,0.72); font-size:17px; line-height:1.7; margin-bottom:28px}
.af-trust {display:flex; flex-direction:column; gap:10px; margin-bottom:30px}
.af-trust-item {color:rgba(255,255,255,0.82); font-size:16px; font-weight:600; display:flex; align-items:center; gap:10px}
.af-trust-item::before {content:'✓'; color:#fff; font-weight:900; font-size:12px; width:22px; height:22px; background:var(--coral); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.af-contact-links {display:flex; flex-direction:column; gap:6px}
.af-contact-links a {color:rgba(255,255,255,0.55); text-decoration:none; font-size:15px; transition:color .2s}
.af-contact-links a:hover {color:var(--coral)}

/* Form card */
.af-form-card {background:#fff; border-radius:20px; padding:40px; box-shadow:0 40px 100px rgba(0,0,0,0.45)}
.af-form-card h3 {font-size:21px; color:var(--navy); margin-bottom:26px; font-weight:800}
.audit-form {display:flex; flex-direction:column; gap:18px}
.form-row-2 {display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-field {display:flex; flex-direction:column; gap:6px}
.form-field label {font-size:13.5px; font-weight:700; color:var(--text-dark)}
.form-field input,
.form-field textarea {border:1.5px solid rgba(15,23,42,0.15); border-radius:10px; padding:14px 18px; font-size:16px; font-family:inherit; color:var(--text-dark); background:#fff; transition:border-color .2s, box-shadow .2s; width:100%}
.form-field input:focus,
.form-field textarea:focus {border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,106,77,0.12); outline:none}
.form-field input::placeholder,
.form-field textarea::placeholder {color:rgba(15,23,42,0.3); font-size:14px}
.form-field textarea {resize:vertical; min-height:100px; line-height:1.6}
.check-group {display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px}
.check-item {display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-dark); cursor:pointer; padding:9px 12px; border:1.5px solid rgba(15,23,42,0.12); border-radius:9px; transition:border-color .2s, background .2s; user-select:none; line-height:1.3}
.check-item:hover {border-color:var(--coral); background:rgba(255,106,77,0.04)}
.check-item input[type="checkbox"] {width:15px; height:15px; accent-color:var(--coral); cursor:pointer; flex-shrink:0; margin:0}
.af-submit {width:100%; padding:18px 24px; font-size:16px; margin-top:4px}
.af-note {font-size:13px; color:var(--text-muted); text-align:center; margin:8px 0 0; line-height:1.5}
.af-form-msg {color:var(--coral); font-weight:600; font-size:14px}

/* ============================================================
   Service Area Note
   ============================================================ */

.service-area {font-size:14px; color:var(--text-muted); text-align:center; margin:32px 0 0; padding-top:24px; border-top:1px solid rgba(15,23,42,0.07); line-height:1.8; max-width:720px; margin-left:auto; margin-right:auto}

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

.faq-section {padding:88px 0}
.faq-eyebrow {text-align:center; display:block; margin-bottom:10px}
.faq-section h2 {text-align:center; margin-bottom:44px}
.faq-list {display:flex; flex-direction:column; gap:10px; max-width:820px; margin:0 auto}

.faq-item {background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(15,23,42,0.07); overflow:hidden; border:1px solid rgba(15,23,42,0.05)}
.faq-q {cursor:pointer; list-style:none; padding:22px 28px; font-size:17px; font-weight:700; color:var(--navy); font-family:'Space Grotesk',sans-serif; display:flex; justify-content:space-between; align-items:center; gap:16px; line-height:1.3; user-select:none}
.faq-q::-webkit-details-marker {display:none}
.faq-q::marker {display:none}
.faq-q::after {content:'+'; color:var(--coral); font-size:28px; font-weight:300; line-height:1; flex-shrink:0; transition:transform .32s cubic-bezier(.2,.9,.2,1)}
.faq-item[open] > .faq-q::after {transform:rotate(45deg)}
.faq-item[open] > .faq-q {border-bottom:1px solid rgba(15,23,42,0.07); color:var(--coral)}
.faq-a {padding:20px 28px 26px}
.faq-a p {color:var(--text-muted); font-size:16px; line-height:1.78; margin:0}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1100px) {
	/* Layout */
	.port-grid {grid-template-columns:repeat(2,1fr)}
	.ft-layout {grid-template-columns:1fr; gap:36px}
	.ft-visuals {grid-template-columns:1fr 1.6fr}
	.result-cards {grid-template-columns:repeat(3,1fr)}
	.mt-inner {grid-template-columns:1fr 1.7fr; gap:48px}
	/* Tablet screenshot heights */
	.screenshot-before {height:220px; max-height:220px}
	.screenshot-after {height:420px; max-height:420px}
	.screenshot-mini-before {height:220px; max-height:220px}
	.screenshot-mini-after {height:340px; max-height:340px}
	.port-card-image {height:240px; max-height:240px}
}

@media (max-width:900px) {
	/* Layout */
	.ft-visuals {grid-template-columns:1fr 1.5fr}
	.result-cards {grid-template-columns:1fr}
	.mt-inner {grid-template-columns:1fr; gap:32px}
	.mt-visuals {grid-template-columns:1fr 1.55fr}
	.af-inner {grid-template-columns:1fr; gap:40px}
	.check-group {grid-template-columns:repeat(2,1fr)}
	/* Intermediate screenshot heights */
	.screenshot-before {height:200px; max-height:200px}
	.screenshot-after {height:380px; max-height:380px}
	.screenshot-mini-before {height:200px; max-height:200px}
	.screenshot-mini-after {height:310px; max-height:310px}
}

@media (max-width:720px) {
	/* FAQ */
	.faq-q {padding:18px 20px; font-size:16px}
	.faq-a {padding:16px 20px 20px}
	/* Grid layouts — single column */
	.port-grid {grid-template-columns:1fr}
	.ft-visuals {grid-template-columns:1fr}
	.mt-visuals {grid-template-columns:1fr}
	/* Pair the before mockups side-by-side so they read as a comparison */
	.before-mockups {display:grid; grid-template-columns:1fr 1fr; gap:10px}
	.mt-before-mockups {display:grid; grid-template-columns:1fr 1fr; gap:10px}
	/* Mobile screenshot heights — match spec exactly */
	.screenshot-before {height:180px; max-height:180px}
	.screenshot-after {height:280px; max-height:280px}
	.screenshot-mini-before {height:180px; max-height:180px}
	.screenshot-mini-after {height:260px; max-height:260px}
	.port-card-image {height:210px; max-height:210px}
	/* Section spacing */
	.featured-transformation {padding:60px 0 48px}
	.mini-transformation {padding:60px 0}
	.portfolio-grid-section {padding:60px 0}
	/* Buttons and form */
	.ft-ctas {flex-direction:column}
	.form-row-2 {grid-template-columns:1fr}
	.check-group {grid-template-columns:1fr 1fr}
	.af-form-card {padding:28px 20px}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important}
	html {scroll-behavior:auto}
	.fade-up {opacity:1; transform:none}
}