/* ===========================================================
   Winning Clinics — stylesheet
   =========================================================== */

:root{
  --ink:#15302d;
  --ink-soft:#2c4744;
  --mint:#3fb39d;
  --mint-bright:#63d9c3;
  --mint-pale:#e6f7f2;
  --mint-paler:#f3fbf9;
  --coral:#ff8a7a;
  --highlight:var(--mint-pale);
  --cream:#fbfaf7;
  --white:#ffffff;
  --line:#e3ece9;
  --shadow:0 20px 50px -25px rgba(21,48,45,0.35);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --maxw:1160px;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-logo:'Caveat', cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
h1,h2,h3,h4,h5{ margin:0 0 .5em; line-height:1.15; font-weight:800; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.container.narrow{ max-width:680px; }
.center{ text-align:center; }
.section{ padding:80px 0; position:relative; }

@media (max-width:720px){
  .section{ padding:56px 0; }
  .container{ padding:0 22px; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* ---------- background decor ---------- */
.bg-decor{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.blob-a{ width:520px; height:520px; top:-180px; right:-160px; background:radial-gradient(circle, var(--mint-pale), transparent 70%); }
.blob-b{ width:420px; height:420px; bottom:-160px; left:-140px; background:radial-gradient(circle, #fff0ec, transparent 70%); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:2px solid transparent;
}
.btn-primary{ background:var(--ink); color:var(--white); box-shadow:0 14px 30px -14px rgba(21,48,45,.55); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--ink-soft); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-2px); background:var(--ink); color:var(--white); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo{ font-family:var(--font-logo); font-size:2rem; font-weight:700; color:var(--ink); }
.logo span{ color:var(--mint); }
.logo.small{ font-size:1.6rem; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a:not(.btn){ font-weight:600; font-size:.95rem; color:var(--ink-soft); transition:color .2s ease; }
.nav a:not(.btn):hover{ color:var(--mint); }
.nav-cta{ padding:11px 22px; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.menu-toggle span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }

@media (max-width:860px){
  .menu-toggle{ display:flex; }
  .nav{
    position:absolute; top:80px; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:18px;
    padding:24px 22px 30px; transform:translateY(-12px); opacity:0;
    visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav.is-open{ opacity:1; transform:translateY(0); visibility:visible; }
  .nav-cta{ width:100%; text-align:center; }
}

/* ---------- hero ---------- */
.hero{ padding:64px 0 60px; }
.hero-inner{ position:relative; display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; }
.hero-copy{ flex:1 1 440px; max-width:480px; }
.hero-visual{ flex:1 1 380px; max-width:420px; margin-left:auto; }
.eyebrow{ display:inline-block; font-weight:700; color:var(--mint); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; margin-bottom:14px; }
.eyebrow.center{ display:block; text-align:center; }

.hero-logo{
  font-family:var(--font-logo); font-weight:700; line-height:.8;
  font-size:clamp(4.4rem, 10vw, 7.8rem); color:var(--ink); margin-bottom:14px;
}
.hero-logo span{ color:var(--mint); }
.hero-tagline{
  font-size:clamp(1.1rem,1.6vw,1.4rem); font-weight:600; color:var(--ink-soft);
  margin-bottom:34px;
}

.hero-stat-wrap{ position:relative; display:inline-flex; }
.mini-float{ position:absolute; pointer-events:none; }
.mini-heart-1{ color:var(--coral); font-size:1.3rem; top:-22px; left:-26px; animation:float-bob 4s ease-in-out infinite; }
.mini-heart-2{ color:var(--coral); font-size:.9rem; bottom:-16px; left:38%; opacity:.8; animation:float-bob 4.6s ease-in-out infinite .4s; }
.mini-star-1{ color:var(--mint); font-size:1.1rem; top:-16px; right:-22px; animation:spin-slow 6s linear infinite; }

.hero-stat-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--line);
  padding:13px 24px; border-radius:999px; box-shadow:var(--shadow);
  font-size:1.05rem; font-weight:800; color:var(--ink);
}
.hero-stat-badge .hero-stat-icon{ color:var(--coral); font-size:1.2rem; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }

.hero-figure{
  position:absolute; bottom:8%; left:0; right:0;
  width:76%; max-width:320px; margin:0 auto 0 -16px; z-index:2;
}
.hero-photo-clinician{
  display:block; width:100%; position:relative; z-index:1;
  animation:float-slow 6s ease-in-out infinite;
}
.hero-ground-shadow{
  position:absolute; left:50%; bottom:2%; width:48%; height:16px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(21,48,45,.2) 0%, rgba(21,48,45,.09) 55%, transparent 78%);
  filter:blur(3px); z-index:0;
}

/* Every number here is the original desktop size (width 240, margin-left
   -60, padding 14/16, radius 14, font .72rem) multiplied by the same 0.85
   scale factor, same technique used for the mobile version — keeps the
   card's rectangle shape and its position relative to the 50% anchor
   instead of shrinking lopsidedly. */
.floating-code{
  position:absolute; top:-12px; left:50%; margin-left:-51px; width:204px; z-index:2;
  background:none; border:1px solid var(--mint); color:var(--ink); border-radius:11.9px; padding:11.9px 13.6px;
  box-shadow:var(--shadow); animation:float-bob 5s ease-in-out infinite;
  font-family:'SFMono-Regular', Consolas, Menlo, monospace; font-size:.612rem;
}
.code-dots{ display:flex; gap:5.1px; margin-bottom:8.5px; }
.code-dots span{ width:6.8px; height:6.8px; border-radius:50%; background:#3a5a55; }
.code-dots span:first-child{ background:#ff8a7a; }
.code-dots span:nth-child(2){ background:#ffd479; }
.code-dots span:last-child{ background:#63d9c3; }
.floating-code pre{ margin:0; white-space:pre-wrap; }
.tok-tag{ color:#63d9c3; }
.tok-attr{ color:#ffd479; }
.tok-str{ color:#ff8a7a; }
.tok-kw{ color:#9bd4ff; }

@keyframes float-slow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes float-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes float-up{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
@keyframes float-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(13px); } }
@keyframes spin-slow{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

@media (max-width:980px){
  /* The desktop row (copy on one side, code card + clinician floating on
     the other) doesn't fit on a phone. Rather than stack copy → card →
     clinician into one tall column (which reads as the card sitting flatly
     above the clinician), this switches .hero-inner to a 2-column grid:
     the copy spans both columns as its own row, then the code card and the
     clinician share the row below it — one per column. That keeps them
     genuinely side-by-side, the same diagonal "floating together"
     relationship the desktop has, just shrunk to phone width instead of
     stacked underneath each other. */
  /* Columns are uneven on purpose (smaller share for the code card, bigger
     share for the clinician) so the card reads as the small floating detail
     and she reads as the main illustration, instead of two equal-size boxes.
     0.9/1.1 is a gentler skew than before — strong enough that the clinician
     still reads as bigger even at the narrowest phones, but not so lopsided
     that the card's column gets stranded in the left third of the row. */
  .hero-inner{ display:grid; grid-template-columns:0.9fr 1.1fr; column-gap:0; text-align:center; }
  .hero-copy{ grid-column:1/-1; max-width:100%; text-align:center; }
  /* Card in the left column, clinician in the right column, both pinned to
     row 2 and top-aligned — the clinician's image is taller than the card,
     so she naturally extends further down past it, which is what reads as
     diagonal rather than two boxes lined up flush. */
  .floating-code, .hero-visual{ grid-row:2; align-self:start; }
  /* Every number here is the desktop card's own size (width 240, padding
     14/16, radius 14, font .72rem) multiplied by the same 0.5 scale factor —
     not picked independently — so the card keeps its original rectangle
     shape instead of going squarer as it shrinks. Same for the dots row
     below: gap/margin/dot-size are the desktop values × 0.5. */
  .floating-code{
    grid-column:1; justify-self:end;
    position:static; top:auto; left:auto;
    width:100%; max-width:120px;
    /* the base rule's float-bob animation drives the transform property
       continuously, so a static transform:translateX() here gets
       overwritten every frame — a negative right margin nudges the
       (justify-self:end) box right instead, without touching transform
       at all. -16px = two 8px nudges requested so far. */
    margin:20px -16px 0 0;
    padding:7px 8px; font-size:.36rem; border-radius:7px;
  }
  .floating-code .code-dots{ gap:3px; margin-bottom:5px; }
  .floating-code .code-dots span{ width:4px; height:4px; }
  /* No column-gap now (above) plus a small negative margin here pulls the
     clinician left into the seam between the two columns, so she overlaps
     the card's edge slightly instead of sitting a visible gap away from it —
     closer to the desktop card's overlapping relationship with the figure. */
  .hero-visual{
    grid-column:2; justify-self:start;
    display:block; min-height:0; margin:16px 0 0 -12px;
  }
  /* Width comes from the grid column (the larger of the two, thanks to the
     0.9fr/1.1fr split above) instead of a vw guess, so it can never overflow
     regardless of viewport — capped with max-width so it doesn't get
     oversized on a wider phone. */
  .hero-figure{
    position:relative; left:auto; right:auto; bottom:auto;
    width:100%; max-width:205px; margin:0;
  }
}

@media (max-width:600px){
  /* the hero logo's clamp() floor (4.4rem) is too large once viewport width
     drops below ~700px, causing the cursive "winning/clinics" lines to
     overflow on phones — give phones their own, smaller floor */
  .hero-logo{ font-size:clamp(2.6rem, 15vw, 4.2rem); }
}

/* ---------- services intro ---------- */
.services-intro{ padding:72px 0 8px; }
.services-intro-inner{ text-align:left; }
.services-heading{ display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.services-tag{ font-size:clamp(1.6rem,2.8vw,2rem); font-weight:800; color:var(--mint); margin-bottom:0; }

/* soft highlight box — used only for the caption beneath the demo mockup */
.hl-box{ background:var(--highlight); border-radius:10px; padding:6px 16px; display:inline-block; }
.services-heading .services-main{ font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--ink); line-height:1.1; }

@media (max-width:600px){
  .services-intro-inner{ text-align:center; }
  .services-heading{ justify-content:center; }
}

/* ---------- service blocks ---------- */
.services-intro + .service-block{ padding-top:24px; }
.service-block{ }
.alt{ background:var(--mint-paler); }
.service-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--white);
  font-weight:800; font-size:.95rem; flex:0 0 auto;
}
.service-copy{ margin:0; text-align:left; }
.service-copy .service-lead{ max-width:640px; }
.service-lead{ font-size:1.12rem; color:var(--ink); font-weight:600; }


/* browser mockup */
.browser-mock{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:hidden; border:1px solid var(--line);
}
.browser-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; background:var(--mint-paler); border-bottom:1px solid var(--line); }
.browser-bar span{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.browser-bar span:first-child{ background:#ff8a7a; }
.browser-bar span:nth-child(2){ background:#ffd479; }
.browser-bar span:nth-child(3){ background:#63d9c3; }
.browser-url{ margin-left:14px; font-size:.78rem; color:var(--ink-soft); background:var(--white); padding:5px 14px; border-radius:8px; border:1px solid var(--line); }
.browser-body{ padding:22px 30px; }

/* fake clinic-site demo inside the browser mockup */
.demo-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.demo-logo{ font-family:var(--font-logo); font-weight:700; font-size:1.05rem; color:var(--ink); white-space:nowrap; }
.demo-nav-links{ display:flex; gap:7px; }
.demo-nav-links i{ width:20px; height:6px; border-radius:4px; background:var(--mint-pale); display:block; }
.demo-nav-cta{ background:var(--ink); color:var(--white); font-size:.66rem; font-weight:700; padding:6px 13px; border-radius:999px; white-space:nowrap; }

.demo-hero{ display:flex; align-items:center; gap:18px; }
.demo-hero-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:9px; }
.demo-eyebrow{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mint); margin-bottom:2px; }
.demo-line{ display:block; border-radius:6px; background:var(--mint-pale); height:12px; width:88%; }
.demo-line.w-70{ width:68%; }
.demo-line.small{ height:7px; background:var(--line); }
.demo-line.small.w-50{ width:48%; margin-top:2px; }
.demo-btn{ margin-top:6px; display:inline-block; background:var(--ink); color:var(--white); font-weight:700; font-size:.7rem; padding:8px 16px; border-radius:999px; width:fit-content; }

.demo-hero-art{ flex:0 0 76px; width:76px; height:76px; }
.demo-hero-art svg{ width:100%; height:100%; }

.demo-strip{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.demo-chip{ display:flex; align-items:center; gap:6px; background:var(--mint-paler); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.66rem; font-weight:700; color:var(--ink-soft); }
.demo-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint-bright); display:block; }

@media (max-width:480px){
  .demo-nav-links{ display:none; }
  .demo-hero-art{ flex:0 0 60px; width:60px; height:60px; }
}

/* seo card */
.seo-card{ margin:8px 0 0; }
.seo-letters{ display:flex; gap:14px; margin:18px 0; flex-wrap:wrap; }
.seo-letter{ flex:1 1 140px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:var(--mint-paler); border-radius:var(--radius-sm); padding:14px; }
.seo-letter .letter{ font-family:var(--font-logo); font-size:1.9rem; color:var(--mint); line-height:1; }
.seo-letter strong{ display:block; font-size:.85rem; }
.seo-title{
  font-family:var(--font-body); font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:800;
  color:var(--mint);
  margin-bottom:32px; text-align:center;
}
.seo-final-badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

.seo-toggle{
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:480px; margin:0 auto; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:0 16px 32px -24px rgba(21,48,45,.22);
  font-family:inherit; font-size:.92rem; line-height:1.45; color:var(--ink-soft);
  cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.seo-toggle:hover{
  border-color:var(--mint-bright); transform:translateY(-2px);
  box-shadow:0 20px 38px -22px rgba(21,48,45,.28);
}
.seo-toggle-text{ flex:1 1 auto; }
.seo-toggle-action{
  /* one flat circle (fixed width/height, not padding-around-content, so it
     stays a true circle) instead of the old pill-within-a-circle look —
     the icon below no longer draws its own white disc on top of this one */
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:36px; height:36px; border-radius:50%;
  background:var(--mint-pale); color:var(--mint);
  transition:background .25s ease, color .25s ease;
}
.seo-toggle:hover .seo-toggle-action{ background:var(--mint-bright); color:var(--white); }
.seo-toggle-icon{
  /* a drawn SVG chevron instead of the "⌄" text glyph — fonts pad glyphs
     with extra space above/below the ink (room for descenders etc.), so a
     text character never sits dead-center in a perfectly flexed box no
     matter how you align it. An SVG path has no such hidden padding. */
  display:block; width:16px; height:16px; color:inherit;
  transition:transform .35s ease;
}
.seo-toggle[aria-expanded="true"]{ border-color:var(--mint-bright); }
.seo-toggle[aria-expanded="true"] .seo-toggle-action{ background:var(--mint-bright); color:var(--white); }
.seo-toggle[aria-expanded="true"] .seo-toggle-icon{ transform:rotate(180deg); }

.seo-illustration{
  max-height:0; opacity:0; overflow:hidden; padding-top:0;
  transition:max-height .4s ease, opacity .3s ease;
}
.seo-illustration.is-open{ max-height:600px; opacity:1; padding-top:24px; }

/* grouped SEO-letter annotations with a bold bracket connector pointing down at the letters they explain */
.seo-annotations{ display:flex; gap:14px; margin-top:10px; }
.seo-annotation{ margin:0; text-align:center; }
.seo-annotation.span-2{ flex:2 1 0; }
.seo-annotation.span-1{ flex:1 1 0; }
.seo-bracket{ display:block; width:100%; height:14px; margin-bottom:6px; overflow:visible; }
.seo-bracket path{ fill:none; stroke:var(--mint); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.seo-annotation p{ margin:0; font-size:.92rem; font-weight:700; color:var(--ink); }

@media (max-width:480px){
  /* Stacking these into a single column (the old fix for the 140px basis
     wrapping awkwardly into 2-then-1) threw away the thing that makes this
     component make sense: the bracket SVGs visually group S+E under one
     caption and O under another, and that only reads correctly in a row.
     Keep the row on mobile too — just switch the letters' flex-basis from a
     fixed 140px to 0 (so they share the row equally and shrink instead of
     wrapping) and shrink the type/padding to fit. The span-2/span-1 ratio on
     the annotations already shrinks proportionally since their basis was 0;
     they just need smaller text. */
  .seo-letters{ gap:8px; }
  .seo-letter{ flex:1 1 0; min-width:0; padding:10px 8px; gap:4px; }
  .seo-letter .letter{ font-size:1.5rem; }
  /* a single long word ("Optimization") has no natural break point, so a
     narrow shrunk card needs overflow-wrap or it overflows into its
     neighbor instead of wrapping to a second line */
  .seo-letter strong{ font-size:.7rem; overflow-wrap:break-word; }
  .seo-annotations{ gap:8px; }
  .seo-annotation p{ font-size:.74rem; }
  .seo-toggle{ padding:16px; gap:12px; }
  .seo-toggle-text{ font-size:.88rem; }
}

/* service 1 layout (heading > [mockup+caption | SEO] side by side) */
.service-single{ margin:0; text-align:left; }
.service-heading-row{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.service-heading-row h3{ margin-bottom:0; }
.service-heading{ font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:800; color:var(--ink); margin:0; }

/* demo mockup + SEO card sit side by side on desktop, stack on mobile */
.service-demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.service-demo-col{ min-width:0; }
.service-seo-col{ min-width:0; }

@media (max-width:900px){
  .service-demo-grid{ grid-template-columns:1fr; gap:36px; }
}

.service-single .browser-mock{ margin:0; text-align:left; }
.service-single .service-lead.hl-box{
  display:block; margin:20px 0 0; color:var(--ink); font-weight:600;
  font-size:.92rem; text-align:left; padding:14px 20px;
  border-left:4px solid var(--mint); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.service-single .seo-card{ text-align:left; margin:0; }

.marketing-features{ display:flex; flex-direction:column; gap:24px; margin-top:20px; }
.feature{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 22px; flex:1 1 auto; min-width:0; }
.feature h5{ margin:0 0 6px; font-size:1rem; }
.feature p{ margin:0; font-size:.92rem; }
.feature p + p{ margin-top:8px; }

/* bubbles row: the three feature text cards side by side */
.marketing-bubbles-row{ display:flex; align-items:stretch; gap:18px; }
.marketing-bubbles-row .feature{ flex:1 1 0; }

/* visuals row: sm + dashboard photos together below the bubbles.
   flex-wrap:nowrap + proportional flex-grow (matching the 160:220 ratio)
   means the pair always stays side by side and shrinks together to fit
   the available width, instead of wrapping into a stacked layout on
   narrow phones. max-width caps them at their original size on wider
   screens so desktop/tablet looks unchanged. */
.marketing-visuals-row{ display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:nowrap; }

.marketing-photo{ min-width:0; flex-shrink:1; filter:drop-shadow(0 16px 22px rgba(21,48,45,.16)); }
.marketing-photo-sm{ flex:160 1 0; max-width:160px; animation:float-up 6s ease-in-out infinite; }
.marketing-photo-dashboard{ flex:220 1 0; max-width:220px; animation:float-down 6s ease-in-out infinite; }

@media (max-width:700px){
  .marketing-bubbles-row{ flex-direction:column; }
}

@media (max-width:480px){
  /* tighten the gap on narrow phones so both photos have more room to
     shrink into before getting uncomfortably small */
  /* Both photos use flex-grow with a max-width cap, so their rendered size
     on narrow phones is "however much room is left after gap/margins are
     subtracted" — removing the gap or adding a negative margin frees up
     that room and the photos grow into it, getting visibly bigger (not what
     was wanted). Adding the same amount back as row padding keeps the
     room-left-for-growth identical to before (so the photos stay the exact
     same size), while gap:0 + the negative margin below still pulls the two
     photos visually closer together than the original 16px gap. */
  .marketing-visuals-row{ gap:0; padding:0 16px; }
  /* both photo assets have their own built-in transparent padding around
     the actual artwork, so even a 0 row-gap still leaves a visible space
     between the bubbles and the laptop — pull them in further with a
     negative margin (not transform, so it doesn't fight the float-up
     animation on this element) to bring the two avatars closer together. */
  .marketing-photo-sm{ margin-right:-16px; }
}

/* ---------- no package ---------- */
.no-package h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); }
.no-package p{ font-size:1.05rem; }
.guarantee-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.badge{ background:var(--mint-pale); color:var(--ink); font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:999px; border:1px solid var(--mint-bright); }

/* ---------- team ---------- */
.team h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.team-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 26px; text-align:center; box-shadow:var(--shadow); }
.avatar{
  width:74px; height:74px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.avatar svg{ width:34px; height:34px; display:block; }
.avatar-1{ background:linear-gradient(135deg,#63d9c3,#3fb39d); }
.avatar-2{ background:linear-gradient(135deg,#ffd479,#ff8a7a); }
.avatar-3{ background:linear-gradient(135deg,#9bd4ff,#63d9c3); }
.team-card h4{ font-size:1.15rem; margin-bottom:4px; }
.team-role{ color:var(--mint); font-weight:700; font-size:.85rem; margin-bottom:0; }
.team-note{ margin-top:14px; font-size:.88rem; }

@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; } }

/* ---------- contact cta ---------- */
/* width (not margin) carries the 28px side gutter, so it holds at every
   viewport size — margin-inline:auto then only kicks in once max-width
   clamps the box on very wide screens, to center the extra space. Previously
   margin-inline:auto came after margin:0 28px and silently overrode the
   side margins to auto, which collapsed to 0 on any screen narrower than
   ~1216px, leaving the card flush against the screen edges. */
.contact-cta{ background:var(--ink); color:var(--white); border-radius:var(--radius-lg); width:calc(100% - 56px); max-width:calc(var(--maxw) + 56px); margin-inline:auto; }
.contact-cta h2{ color:var(--white); font-size:clamp(1.8rem,3.4vw,2.4rem); }
.contact-cta p{ color:#bfe3da; }
.contact-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.contact-cta .btn-primary{ background:var(--mint-bright); color:var(--ink); }
.contact-cta .btn-primary:hover{ background:var(--mint); }
.contact-cta .btn-ghost{ border-color:#3a5a55; color:var(--white); }
.contact-cta .btn-ghost:hover{ background:var(--white); color:var(--ink); }

@media (max-width:480px){
  /* buttons inherit white-space:nowrap from .btn — fine for short labels,
     but it clips the long "WhatsApp: +34 613 14 68 70" text on narrow
     phones. Stack the CTAs full-width and let the text wrap instead. */
  .contact-actions{ flex-direction:column; align-items:stretch; }
  .contact-actions .btn{ white-space:normal; text-align:center; }
}

/* ---------- footer ---------- */
.site-footer{ padding:48px 0 36px; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-top:32px; }
.footer-nav{ display:flex; gap:24px; }
.footer-nav a{ font-weight:600; font-size:.9rem; color:var(--ink-soft); }
.footer-nav a:hover{ color:var(--mint); }
.footer-copy{ width:100%; text-align:center; color:var(--ink-soft); font-size:.82rem; margin:0; }