/* ============================================================
   FLOWLINE SOLUTIONS — one page site
   Type system: Oswald (display) / Cormorant Garamond (serif accent) / Inter (body)
   ============================================================ */

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

html{scroll-behavior:smooth;}

body{
  background:#fff;color:#111;
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

:root{
  --navy:#0a1628;
  --blue-light:#3b82f6;
  --border:#e5e7eb;
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Oswald',sans-serif;
  --muted:#6b7280;
  --nav-h:68px;
}

img,svg{max-width:100%;}

[id]{scroll-margin-top:calc(var(--nav-h) + 12px);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

a:focus-visible,button:focus-visible{outline:2px solid #60a5fa;outline-offset:3px;}


/* ══════════════════ BRAND LOCKUP ══════════════════
   Set as type, not artwork — same Oswald weight contrast as the hero
   headline: FLOWLINE at 600, SOLUTIONS at 300. */
.brand{
  display:inline-flex;align-items:baseline;gap:0.3em;flex:0 0 auto;
  font-family:var(--display);text-transform:uppercase;text-decoration:none;
  line-height:1;white-space:nowrap;
}

.brand-strong{font-weight:600;letter-spacing:0.01em;}

/* SOLUTIONS carries the hero's blue-to-teal gradient in both the nav and
   the footer. */
.brand-light{
  font-weight:300;letter-spacing:0.05em;
  background:linear-gradient(135deg,#93c5fd 0%,#a5f3fc 50%,#6ee7b7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

nav .brand{font-size:1.32rem;color:var(--navy);transition:opacity 0.2s;}

nav .brand:hover{opacity:0.7;}

.footer-brand .brand{font-size:1.85rem;color:#fff;}


/* ══════════════════ NAV ══════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:300;height:var(--nav-h);padding:0 56px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);transition:box-shadow 0.3s;
}

nav.scrolled{box-shadow:0 1px 24px rgba(0,0,0,0.07);}

.nav-links{display:flex;align-items:center;gap:36px;list-style:none;}

.nav-links a{color:#111;text-decoration:none;font-size:0.875rem;font-weight:500;letter-spacing:0.01em;transition:opacity 0.2s;}

.nav-links a:hover{opacity:0.6;}

.nav-actions{display:flex;gap:10px;align-items:center;}

.btn-ghost{
  padding:10px 20px;border-radius:8px;font-size:0.875rem;color:#111;background:transparent;
  border:1px solid var(--border);cursor:pointer;text-decoration:none;font-family:inherit;
  font-weight:500;letter-spacing:0.01em;transition:all 0.2s;
}

.btn-ghost:hover{background:#f9fafb;border-color:#d1d5db;}

.btn-dark{
  padding:10px 22px;border-radius:8px;font-size:0.875rem;color:#fff;background:var(--navy);
  border:1px solid var(--navy);cursor:pointer;text-decoration:none;font-family:inherit;
  font-weight:500;letter-spacing:0.01em;transition:all 0.2s;
}

.btn-dark:hover{background:#0f2040;box-shadow:0 4px 14px rgba(10,22,40,0.25);}

/* mobile menu */
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:9px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:background 0.2s;
}

.nav-toggle:hover{background:#f9fafb;}

.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--navy);border-radius:2px;transition:transform 0.28s ease,opacity 0.2s ease;}

.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.nav-mobile{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:299;
  background:#fff;border-bottom:1px solid var(--border);
  padding:8px 24px 22px;
  display:none;flex-direction:column;
  box-shadow:0 18px 34px rgba(10,22,40,0.09);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
}

.nav-mobile.open{display:flex;}

.nav-mobile a{
  padding:15px 2px;font-size:0.95rem;color:var(--navy);text-decoration:none;
  border-bottom:1px solid #f1f2f5;font-weight:400;
}

.nav-mobile a:last-of-type{border-bottom:none;}

.nav-mobile .btn-dark{margin-top:16px;text-align:center;padding:14px 22px;font-size:0.9rem;border-bottom:none;color:#fff;}


/* ══════════════════ HERO ══════════════════ */
.hero{
  min-height:100vh;padding:var(--nav-h) 56px 0;
  background:linear-gradient(155deg,#061020 0%,#0d1f40 22%,#132f5a 45%,#184f72 62%,#186860 78%,#1a7a60 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;text-align:center;
}

.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:orbFloat 9s ease-in-out infinite;}

.hero-orb-1{width:640px;height:420px;background:rgba(30,64,175,0.15);top:-120px;left:-120px;animation-delay:0s;}
.hero-orb-2{width:520px;height:360px;background:rgba(20,100,120,0.12);bottom:0;right:-100px;animation-delay:-3.5s;}
.hero-orb-3{width:320px;height:320px;background:rgba(139,92,246,0.08);top:35%;left:25%;animation-delay:-6s;}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(18px,-28px) scale(1.04);}
  66%{transform:translate(-14px,18px) scale(0.97);}
}

/* Large faint brand visual behind the hero copy.
   Swap the <use> for an <img> here to use uploaded hero artwork — see README. */
.hero-visual{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  width:100%;max-width:1000px;pointer-events:none;z-index:1;padding:0 40px;
}

.hero-visual svg{
  width:100%;height:auto;display:block;color:#fff;opacity:0.13;stroke-width:2.2;
  filter:drop-shadow(0 0 30px rgba(147,197,253,0.35));
}

.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;}

.hero-label{
  font-size:0.68rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.42);margin-bottom:26px;
  display:flex;align-items:center;gap:12px;justify-content:center;
}

.hero-label::before,.hero-label::after{content:'';width:28px;height:1px;background:rgba(255,255,255,0.2);}

.hero-headline{
  font-family:var(--display);
  font-size:clamp(2.8rem,6.4vw,6.4rem);
  font-weight:600;color:#fff;line-height:0.94;
  letter-spacing:0.01em;text-transform:uppercase;
  max-width:900px;margin-bottom:0;
}

.hero-headline em{
  font-style:normal;font-weight:300;letter-spacing:0.04em;
  background:linear-gradient(135deg,#93c5fd 0%,#a5f3fc 50%,#6ee7b7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-subheadline{
  margin-top:26px;max-width:740px;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.85rem);
  font-weight:400;font-style:italic;
  color:rgba(255,255,255,0.84);line-height:1.4;
}

.hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;}

.hero-badge{
  display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  font-size:0.76rem;letter-spacing:0.02em;color:rgba(255,255,255,0.78);
}

.hero-badge svg{width:12px;height:12px;stroke:#6ee7b7;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

.hero-sub-row{display:flex;align-items:flex-start;justify-content:space-between;width:100%;max-width:940px;margin-top:48px;gap:40px;}

.hero-desc{text-align:left;max-width:370px;font-size:0.95rem;color:rgba(255,255,255,0.58);line-height:1.78;font-weight:300;}

.hero-cta-block{display:flex;flex-direction:column;align-items:flex-end;}

.hero-cta-box{
  background:rgba(255,255,255,0.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.15);border-radius:12px;
  padding:18px 24px;display:flex;align-items:center;gap:16px;
  cursor:pointer;transition:all 0.25s;text-decoration:none;
}

.hero-cta-box:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px);border-color:rgba(255,255,255,0.25);}

.cta-text span:first-child{display:block;font-size:0.9rem;color:#fff;font-weight:500;}
.cta-text span:last-child{display:block;font-size:0.75rem;color:rgba(255,255,255,0.46);margin-top:2px;}

.cta-orb{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#60a5fa,#34d399);flex-shrink:0;animation:orbPulse 3s ease-in-out infinite;}

@keyframes orbPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,0.35);}
  50%{box-shadow:0 0 0 10px rgba(167,139,250,0);}
}

.hero-scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,0.25);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;
  animation:scrollBounce 2.2s ease-in-out infinite;
}

@keyframes scrollBounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(7px);}
}


/* ══════════════════ SHARED ══════════════════ */
.container{max-width:1080px;margin:0 auto;}

section{padding:96px 56px;}

.section-label{font-size:0.68rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue-light);margin-bottom:16px;}

.section-headline{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:500;line-height:1.06;color:var(--navy);letter-spacing:0.01em;text-transform:uppercase;}

.section-headline em{font-style:italic;font-family:var(--serif);font-weight:300;text-transform:none;font-size:1.12em;letter-spacing:0;}

.section-sub{font-size:0.9rem;color:var(--muted);line-height:1.82;font-weight:300;max-width:400px;}

.split-header{display:flex;align-items:flex-start;justify-content:space-between;gap:80px;margin-bottom:48px;}

.center{text-align:center;}


/* ══════════════════ TYPE STATEMENT ══════════════════ */
.type-statement{padding:100px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

.type-word{font-family:var(--display);font-size:clamp(4rem,9.5vw,9rem);font-weight:600;color:var(--navy);line-height:0.9;letter-spacing:0.02em;text-transform:uppercase;}

.type-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:108px;flex-shrink:0;}

/* Each dot drifts slowly through the site palette on its own offset, so the
   grid flickers out of sync rather than pulsing as one block. */
.type-dot{
  width:13px;height:13px;border-radius:50%;background:var(--navy);
  animation:dotFlicker 14s ease-in-out infinite;
}

@keyframes dotFlicker{
  0%,100%{background:var(--navy);opacity:0.10;}
  20%{background:#3b82f6;opacity:0.85;}
  40%{background:#60a5fa;opacity:0.35;}
  55%{background:#a5f3fc;opacity:0.70;}
  72%{background:#6ee7b7;opacity:0.45;}
  88%{background:#93c5fd;opacity:0.20;}
}

.type-dot:nth-child(1){animation-delay:-0.6s;}
.type-dot:nth-child(2){animation-delay:-5.2s;}
.type-dot:nth-child(3){animation-delay:-9.8s;}
.type-dot:nth-child(4){animation-delay:-3.1s;}
.type-dot:nth-child(5){animation-delay:-12.4s;}
.type-dot:nth-child(6){animation-delay:-7.5s;}
.type-dot:nth-child(7){animation-delay:-1.9s;}
.type-dot:nth-child(8){animation-delay:-10.7s;}
.type-dot:nth-child(9){animation-delay:-4.4s;}


/* ══════════════════ COMPARISON ══════════════════ */
.compare-section{background:#fff;border-bottom:1px solid var(--border);}

.compare-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--border);border-radius:14px;overflow:hidden;}

.compare-col{padding:36px 30px;}

.compare-col:nth-child(1),.compare-col:nth-child(2){background:#fafafa;border-right:1px solid var(--border);}

.compare-col:nth-child(3){background:var(--navy);position:relative;overflow:hidden;}

.compare-col:nth-child(3)::after{content:'';position:absolute;top:-80px;right:-80px;width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,0.18),transparent 70%);}

.compare-tag{font-size:0.65rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#9ca3af;margin-bottom:18px;}

.compare-col:nth-child(3) .compare-tag{color:rgba(255,255,255,0.38);}

.compare-col h3{font-family:var(--display);font-size:1.4rem;font-weight:500;margin-bottom:6px;color:var(--navy);letter-spacing:0.02em;text-transform:uppercase;}

.compare-col:nth-child(3) h3{color:#fff;}

.compare-names{font-size:0.72rem;color:#9ca3af;letter-spacing:0.02em;margin-bottom:20px;line-height:1.5;}

.compare-col:nth-child(3) .compare-names{color:rgba(255,255,255,0.4);}

.compare-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:0.84rem;line-height:1.55;position:relative;z-index:1;}

.compare-item.bad{color:#9ca3af;}
.compare-item.bad::before{content:'\2715';color:#f87171;font-size:0.7rem;margin-top:3px;flex-shrink:0;}

.compare-item.good{color:rgba(255,255,255,0.8);}
.compare-item.good::before{content:'\2713';color:#34d399;font-size:0.7rem;margin-top:3px;flex-shrink:0;}

.compare-item.hero-point{color:#fff;font-weight:500;}


/* ══════════════════ REVIEWS ══════════════════ */
.reviews-section{background:#f8f9fb;border-bottom:1px solid var(--border);}

.reviews-header{text-align:center;margin-bottom:44px;}

.widget-wrap{max-width:1150px;margin:0 auto;}

.widget-wrap iframe{width:100%;min-width:100%;min-height:500px;display:block;border:0;}

/* Dark Google-review panel. */
.review-panel{background:#1b1b1b;border-radius:16px;padding:40px;}

.review-panel-head{display:flex;align-items:center;justify-content:space-between;gap:24px;}

.review-panel-head h3{
  font-size:1.75rem;font-weight:600;color:#fff;line-height:1.25;min-width:0;
}

.review-score{flex-shrink:0;text-align:right;}

.review-score b{display:block;font-size:2.75rem;font-weight:700;color:#fff;line-height:1;}

.review-score-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:8px;}

.review-stars{display:flex;gap:2px;}

.review-stars svg{width:16px;height:16px;fill:#fbbc04;}

.review-count{font-size:0.85rem;color:rgba(255,255,255,0.6);}

.review-count::before{
  content:'';display:inline-block;width:1px;height:14px;
  background:rgba(255,255,255,0.25);margin-right:12px;vertical-align:-2px;
}

.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;}

.review-card{
  background:#232323;border:1px solid rgba(255,255,255,0.1);border-radius:12px;
  padding:24px;display:flex;flex-direction:column;
}

.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}

.review-rating{display:flex;align-items:center;gap:8px;color:#fbbc04;font-size:0.95rem;font-weight:700;}

.review-date{font-size:0.85rem;color:rgba(255,255,255,0.5);white-space:nowrap;}

.review-card p{margin-top:16px;font-size:0.92rem;line-height:1.65;color:rgba(255,255,255,0.78);}

/* Inline expander, matching the Google widget's "More" affordance */
.review-more{
  border:0;background:none;padding:0;margin-left:4px;cursor:pointer;
  font-family:inherit;font-size:0.92rem;font-weight:500;color:#4c8bf5;
}

.review-more:hover{text-decoration:underline;}

.review-card-foot{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}

.review-who{display:flex;align-items:center;gap:12px;min-width:0;}

.review-avatar{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-size:0.75rem;font-weight:600;
}

.review-name{font-size:0.875rem;color:rgba(255,255,255,0.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.review-google{width:20px;height:20px;flex-shrink:0;}

.review-card.is-hidden{display:none;}

.review-load-more{
  display:block;margin:28px auto 0;padding:12px 28px;
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:0.95rem;font-weight:700;color:#fff;
  transition:opacity 0.2s;
}

.review-load-more:hover{opacity:0.65;}

.review-empty{
  margin-top:32px;border:1px dashed rgba(255,255,255,0.18);border-radius:12px;
  padding:44px 28px;text-align:center;
}

.review-empty strong{display:block;font-size:1rem;font-weight:600;color:#fff;margin-bottom:9px;}

.review-empty span{display:block;font-size:0.9rem;color:rgba(255,255,255,0.6);line-height:1.7;max-width:480px;margin:0 auto;}


/* ══════════════════ SERVICES ══════════════════ */
.build-section{border-bottom:1px solid var(--border);background:#fff;}

.build-note{
  margin-top:8px;background:#f0f6ff;border:1px solid #dbeafe;border-radius:12px;
  padding:20px 24px;font-size:0.86rem;color:#1e3a5f;line-height:1.75;max-width:400px;
}

.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px;}

.build-card{border:1px solid var(--border);border-radius:14px;padding:30px 28px;background:#fff;transition:all 0.25s;display:flex;flex-direction:column;}

.build-card:hover{border-color:#bfdbfe;background:#fbfdff;transform:translateY(-2px);}

.build-card h3{font-family:var(--display);font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:0.02em;color:var(--navy);margin-bottom:11px;}

.build-outcome{font-size:0.9rem;color:var(--navy);font-weight:500;line-height:1.6;margin-bottom:10px;}

.build-mech{font-size:0.84rem;color:var(--muted);line-height:1.75;font-weight:300;}

.build-pair{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  font-size:0.78rem;color:var(--muted);line-height:1.6;
}

.build-pair strong{color:var(--navy);font-weight:600;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-bottom:4px;}


/* ══════════════════ PRICING ══════════════════ */
.pricing-section{background:#f8f9fb;border-bottom:1px solid var(--border);}

.pricing-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start;}

/* The left column pins while the price lines scroll past it — the same
   behaviour as .faq-left. Sticky works on a grid item here because
   align-items:start leaves the item shorter than its grid area, so there
   is room inside the area for it to travel. Cleared below 920px, where
   the layout stacks and there is no second column to scroll against. */
.pricing-left{position:sticky;top:100px;}

.pricing-lines{display:flex;flex-direction:column;gap:14px;}

.price-line{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 30px;}

.price-line-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap;}

.price-line-top h3{font-family:var(--display);font-size:1.15rem;font-weight:500;text-transform:uppercase;letter-spacing:0.02em;color:var(--navy);}

.price-tag{font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue-light);background:#eff6ff;border:1px solid #dbeafe;padding:5px 11px;border-radius:100px;white-space:nowrap;}

.price-tag.soft{color:var(--muted);background:#f3f4f6;border-color:#e5e7eb;}

.price-line p{font-size:0.86rem;color:var(--muted);line-height:1.78;font-weight:300;}

.price-line p+p{margin-top:10px;}

.price-line ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px;}

.price-line li{display:flex;align-items:flex-start;gap:9px;font-size:0.84rem;color:var(--muted);line-height:1.55;}

.price-line li::before{content:'\2713';color:#34d399;font-size:0.72rem;margin-top:3px;flex-shrink:0;}

.pricing-terms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}

.term-chip{background:var(--navy);border-radius:12px;padding:20px 22px;}

.term-chip strong{display:block;font-family:var(--display);font-size:0.98rem;font-weight:500;text-transform:uppercase;letter-spacing:0.03em;color:#fff;margin-bottom:5px;}

.term-chip span{font-size:0.78rem;color:rgba(255,255,255,0.5);line-height:1.6;}


/* ══════════════════ PROCESS ══════════════════ */
.process-section{background:#fff;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}

.process-mountain-bg{position:absolute;bottom:0;left:0;right:0;width:100%;pointer-events:none;opacity:0.035;}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;z-index:1;}

.process-step{padding:36px 28px;background:#fff;border-right:1px solid var(--border);transition:background 0.2s;}

.process-step:hover{background:#f4f8ff;}
.process-step:last-child{border-right:none;}

.process-step.highlight{background:#f4f8ff;}

.process-num{font-family:var(--display);font-size:3rem;font-weight:300;color:#e9ebee;line-height:1;margin-bottom:16px;transition:color 0.2s;}

.process-step:hover .process-num{color:#bfdbfe;}
.process-step.highlight .process-num{color:#bfdbfe;}

.process-step h3{font-size:0.88rem;font-weight:600;color:var(--navy);margin-bottom:10px;letter-spacing:0.01em;}

.process-step p{font-size:0.82rem;color:var(--muted);line-height:1.68;}


/* ══════════════════ ABOUT ══════════════════ */
.about-section{background:#f8f9fb;border-bottom:1px solid var(--border);}

.about-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:72px;align-items:start;}

/* Pins against the facts and body copy — see .pricing-left. */
.about-left{position:sticky;top:100px;}

.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;}

.about-fact{background:#fff;padding:26px 24px;}

.about-fact strong{display:block;font-family:var(--display);font-size:1.7rem;font-weight:400;color:var(--navy);line-height:1.1;margin-bottom:6px;}

.about-fact span{font-size:0.78rem;color:var(--muted);line-height:1.55;display:block;}

.about-body{margin-top:22px;font-size:0.9rem;color:var(--muted);line-height:1.85;font-weight:300;}

.about-body p+p{margin-top:14px;}


/* ══════════════════ BOOKING ══════════════════ */
.booking-section{border-bottom:1px solid var(--border);background:#fff;}

.booking-layout{display:grid;grid-template-columns:1fr 1.65fr;gap:80px;align-items:start;}

.booking-left{position:sticky;top:88px;}

.booking-left .section-headline{margin-bottom:18px;}

.booking-left > p{font-size:0.9rem;color:var(--muted);line-height:1.8;margin-bottom:28px;}

.trust-items{display:flex;flex-direction:column;gap:13px;}

.trust-item{display:flex;align-items:flex-start;gap:12px;font-size:0.84rem;color:var(--muted);line-height:1.6;}

.trust-icon{width:30px;height:30px;border-radius:7px;background:#f0f6ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.trust-icon svg{width:13px;height:13px;stroke:#3b82f6;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

.booking-frame{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.05);}

/* min-height is a floor only — the GoHighLevel embed script sets the real height,
   so available times and booking fields are never clipped. */
.booking-frame iframe{width:100%;border:none;overflow:hidden;min-height:680px;display:block;}


/* ══════════════════ FAQ ══════════════════ */
.faq-section{border-bottom:1px solid var(--border);background:#f8f9fb;}

.faq-layout{display:flex;align-items:flex-start;gap:80px;}

.faq-left{min-width:280px;position:sticky;top:100px;}

.faq-right{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0;}

.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px 26px;}

.faq-item h3{font-size:0.92rem;font-weight:600;color:var(--navy);margin-bottom:9px;line-height:1.45;}

.faq-item p{font-size:0.84rem;color:var(--muted);line-height:1.78;font-weight:300;}


/* ══════════════════ BOTTOM CTA ══════════════════ */
.summit-cta{position:relative;overflow:hidden;background:linear-gradient(155deg,#061020 0%,#0e1f40 28%,#142f58 50%,#1a5070 66%,#1e6858 80%,#185a4a 100%);}

.summit-content{padding:96px 56px;position:relative;z-index:1;}

.summit-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}

.summit-headline{font-family:var(--display);font-size:clamp(2.8rem,5.5vw,4.8rem);font-weight:500;color:#fff;line-height:0.97;margin-bottom:18px;text-transform:uppercase;letter-spacing:0.01em;}

.summit-headline em{font-style:italic;font-family:var(--serif);font-weight:300;text-transform:none;font-size:1.1em;letter-spacing:0;background:linear-gradient(135deg,#93c5fd,#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.summit-tagline{font-size:0.88rem;color:rgba(255,255,255,0.48);line-height:1.72;}

.summit-right > p{font-size:0.9rem;color:rgba(255,255,255,0.52);line-height:1.78;margin-bottom:20px;}

.summit-terms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}

.summit-term{font-size:0.72rem;color:rgba(255,255,255,0.72);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:100px;padding:6px 13px;}

.btn-white{display:inline-block;padding:13px 28px;border-radius:8px;font-size:0.9rem;font-weight:500;background:#fff;color:var(--navy);text-decoration:none;border:1px solid #fff;transition:all 0.2s;}

.btn-white:hover{background:#f0f4ff;box-shadow:0 4px 16px rgba(255,255,255,0.15);}


/* ══════════════════ FOOTER ══════════════════ */
.site-footer{background:var(--navy);padding:80px 56px 0;position:relative;overflow:hidden;}

.footer-mountain-bg{position:absolute;top:0;left:0;right:0;width:100%;pointer-events:none;opacity:0.04;}

.footer-top{display:flex;justify-content:space-between;gap:56px;margin-bottom:64px;position:relative;z-index:1;}

.footer-brand .brand{color:#fff;}

.footer-brand > p{font-size:0.8rem;color:rgba(255,255,255,0.35);margin-top:18px;max-width:230px;line-height:1.7;}

.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}

.footer-col h4{font-size:0.65rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:16px;}

.footer-col a{display:block;font-size:0.84rem;color:rgba(255,255,255,0.52);text-decoration:none;margin-bottom:10px;transition:color 0.2s;}

.footer-col a:hover{color:#fff;}

.footer-mid{border-top:1px solid rgba(255,255,255,0.07);padding:32px 0;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}

.footer-wordmark{font-family:var(--display);font-size:clamp(3.5rem,9vw,6.5rem);font-weight:700;color:rgba(255,255,255,0.05);letter-spacing:0.04em;text-transform:uppercase;line-height:1;}

.footer-legal{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-bottom:4px;}

.footer-copy{font-size:0.76rem;color:rgba(255,255,255,0.28);}

.footer-legal-links{display:flex;gap:16px;}

.footer-legal-links a{font-size:0.72rem;color:rgba(255,255,255,0.28);text-decoration:none;transition:color 0.2s;}

.footer-legal-links a:hover{color:rgba(255,255,255,0.7);}

.footer-disclaimer{border-top:1px solid rgba(255,255,255,0.07);padding:24px 0 32px;position:relative;z-index:1;}

.footer-disclaimer p{font-size:0.72rem;color:rgba(255,255,255,0.22);line-height:1.7;max-width:900px;}

.footer-disclaimer p+p{margin-top:8px;}


/* ══════════════════ PARALLAX ══════════════════
   Applied to an inner wrapper so it never fights the .reveal-left transform
   on the column itself. JS drives translate3d; disabled once the layout
   stacks, where drifting text would read as a glitch. */
.parallax{will-change:transform;}

@media(max-width:920px){
  .parallax{transform:none !important;}
}

@media (prefers-reduced-motion: reduce){
  .parallax{transform:none !important;}
}


/* ══════════════════ SCROLL REVEAL ══════════════════ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:none;}

.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-left.visible{opacity:1;transform:none;}

.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-right.visible{opacity:1;transform:none;}

.d1{transition-delay:0.1s;}
.d2{transition-delay:0.2s;}
.d3{transition-delay:0.3s;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none;}
}


/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:1080px){
  .review-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:920px){
  nav{padding:0 20px;}
  .nav-links{display:none;}
  .nav-actions{display:none;}
  .nav-toggle{display:flex;}

  .hero{padding:calc(var(--nav-h) + 24px) 24px 72px;min-height:auto;}
  .hero-sub-row{flex-direction:column;margin-top:38px;}
  .hero-desc{max-width:none;}
  .hero-cta-block{align-items:stretch;width:100%;}
  .hero-cta-box{justify-content:space-between;}
  .hero-scroll-hint{display:none;}
  .hero-visual{padding:0 20px;}

  section{padding:64px 24px;}

  .type-statement{flex-direction:column;padding:64px 24px;text-align:center;}

  .split-header{flex-direction:column;gap:20px;}

  .compare-grid{grid-template-columns:1fr;}
  .compare-col:nth-child(1),.compare-col:nth-child(2){border-right:none;}
  .compare-col:nth-child(2){border-top:1px solid var(--border);}
  .compare-col:nth-child(3){border-top:1px solid #162040;}

  .review-panel{padding:24px;}
  .review-panel-head{gap:16px;}
  .review-panel-head h3{font-size:1.25rem;}
  .review-score b{font-size:1.9rem;}
  .review-grid{grid-template-columns:1fr;gap:16px;}

  /* Side by side squeezes the heading into a narrow column on phones. */
  @media(max-width:600px){
    .review-panel-head{flex-direction:column;align-items:flex-start;gap:12px;}
    .review-panel-head h3{font-size:1.2rem;}
    .review-score{text-align:left;}
    .review-score b{display:inline-block;font-size:1.75rem;vertical-align:middle;}
    .review-score-meta{display:inline-flex;justify-content:flex-start;margin:0 0 0 12px;vertical-align:middle;}
  }

  .build-grid{grid-template-columns:1fr;}
  .build-note{max-width:none;}

  .pricing-layout,.about-layout,.booking-layout{grid-template-columns:1fr;gap:40px;}

  .pricing-terms{grid-template-columns:1fr;}

  .booking-left,.faq-left,.pricing-left,.about-left{position:static;}
  .booking-left{order:1;}
  .booking-frame{order:2;}

  .process-grid{grid-template-columns:1fr 1fr;}
  .process-step:nth-child(2){border-right:none;}
  .process-step:nth-child(1),.process-step:nth-child(2){border-bottom:1px solid var(--border);}

  .faq-layout{flex-direction:column;gap:32px;}
  .faq-left{min-width:0;}
  .faq-right{grid-template-columns:1fr;}

  .summit-inner{grid-template-columns:1fr;gap:36px;}
  .summit-content{padding:64px 24px;}

  .site-footer{padding:64px 24px 0;}
  .footer-top{flex-direction:column;}
  .footer-links{grid-template-columns:1fr 1fr;}
  .footer-mid{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-legal{align-items:flex-start;}
}

@media(max-width:560px){
  .hero-badges{gap:8px;}
  .hero-badge{font-size:0.72rem;padding:7px 13px;}
  .hero-subheadline{margin-top:20px;}

  .type-statement{gap:28px;}

  .compare-col,.build-card,.price-line,.faq-item,.process-step{padding-left:22px;padding-right:22px;}

  .process-grid{grid-template-columns:1fr;}
  .process-step{border-right:none;border-bottom:1px solid var(--border);}
  .process-step:last-child{border-bottom:none;}

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

  .footer-links{grid-template-columns:1fr;gap:32px;}

  .about-fact strong{font-size:1.5rem;}
}

/* ══════════════════ TRUSTED BY / LOGO MARQUEE ══════════════════
   Half the vertical weight of the BUILT TO GROW type statement. */
.trusted-section{
  padding:50px 0;border-bottom:1px solid var(--border);
  background:#fff;overflow:hidden;
}

.trusted-heading{
  text-align:center;margin:0 24px 30px;
  font-size:0.72rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted);
}

.marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.marquee-track{
  display:flex;align-items:center;gap:64px;width:max-content;
  animation:marqueeScroll 42s linear infinite;
}

.marquee:hover .marquee-track{animation-play-state:paused;}

.marquee-track img{
  height:66px;width:auto;flex:0 0 auto;object-fit:contain;
}

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

@media (max-width:920px){
  .trusted-section{padding:38px 0;}
  .marquee-track{gap:44px;}
  .marquee-track img{height:52px;}
}

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