/* Service pages (websites, products, ads, growth): the H1 with the search above the display slogan, the
   short answer under the portada, the GROU Coffee demo that loads on request and the AEO/GEO section of
   SEO & AI search. Loaded after each page's own stylesheet. */

/* The H1 names the service as people search it. It stays in the static HTML; React never replaces it.
   One line on desktop: the longest H1 ("SEO agency in Miami for Google and AI search") fits in 66ch. */
.service-hero-title{max-width:min(66ch,100%);margin:0 auto 1.5rem;font:500 clamp(.8rem,1vw,.95rem)/1.45 Onest,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4f524d;text-wrap:balance}
.service-hero-title::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.75em;border-radius:50%;background:var(--lime,#e4fe55);box-shadow:0 0 0 1px #16161633;vertical-align:.06em}
.services-page .service-hero-cta{margin-top:2rem}

/* Short answer: what the service is, for whom and where. */
.service-answer{--answer-gutter:clamp(1.5rem,6.4vw,7rem);display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.75rem clamp(1.5rem,4vw,4rem);width:min(1180px,calc(100% - 2 * var(--answer-gutter)));margin:0 auto clamp(2.5rem,5vw,4.5rem);padding-top:clamp(1.5rem,2.4vw,2rem);border-top:1px solid #16161629;box-sizing:border-box}
.service-answer-label{margin:0;padding-top:.45em;font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#666a65}
.service-answer-text{max-width:64ch;margin:0;font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.55;color:#2f322e;text-wrap:pretty}

/* Secondary link next to a call to action. */
.service-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.service-cross-link{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--ink,#161616);font-size:1rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.service-cross-link:hover{text-decoration-thickness:2px}
.service-cross-link:focus-visible{outline:2px solid var(--ink,#161616);outline-offset:4px;border-radius:4px}

/* GROU Coffee demo: a static preview until the visitor asks for the live site. */
.website-demo-skip{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.website-demo-skip:focus{position:static;display:table;width:auto;height:auto;margin:0 auto 16px;overflow:visible;clip-path:none;padding:.75rem 1.25rem;border-radius:999px;background:var(--ink,#161616);color:#fff;font-size:.95rem;outline:3px solid var(--lime,#e4fe55);outline-offset:2px}
.website-demo-screen .website-demo-preview{position:absolute;inset:0;display:block;cursor:pointer}
.website-demo-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease,ease),filter .4s}
.website-demo-screen:not(.is-live):hover .website-demo-preview img{transform:scale(1.015)}
.website-demo-screen:not(.is-loaded)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#16161608 45%,#16161673);pointer-events:none}
.website-demo-load{position:absolute;left:50%;bottom:clamp(24px,6%,56px);z-index:2;display:inline-flex;align-items:center;gap:1.25rem;min-height:52px;padding:.95rem 1.5rem;border:0;border-radius:999px;background:var(--ink,#161616);color:#fff;font:500 1rem/1.2 Onest,Arial,sans-serif;white-space:nowrap;cursor:pointer;transform:translateX(-50%);box-shadow:0 14px 34px #1616164d;transition:background .2s,color .2s}
.website-demo-load span{font-size:1.3rem;line-height:1}
.website-demo-load:hover{background:var(--lime,#e4fe55);color:var(--ink,#161616)}
.website-demo-load:focus-visible{outline:3px solid var(--lime,#e4fe55);outline-offset:4px}
.website-demo-screen.is-live .website-demo-preview img{filter:blur(3px) saturate(.85)}
.website-demo-screen iframe{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .45s}
.website-demo-screen.is-loaded iframe{opacity:1}

/* AEO & GEO: how SEO & AI search gets a business cited by answer engines. */
.growth-aeo-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem clamp(32px,6vw,88px);align-items:end}
.growth-aeo-heading .growth-eyebrow{grid-column:1/-1;margin-bottom:0!important}
.growth-page .growth-aeo h2{max-width:21ch;font-size:clamp(32px,3.5vw,54px);line-height:1.08}
.growth-aeo-intro p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#62655e}
.growth-aeo-intro p+p{margin-top:16px}
.growth-aeo-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:clamp(40px,5vw,72px) 0 0;padding:0}
.growth-aeo-steps li{display:flex;flex-direction:column;gap:12px;padding:24px 22px 28px;border:1px solid #16161614;border-radius:20px;background:#fff}
.growth-aeo-number{font-size:13px;line-height:1;letter-spacing:.08em;color:#666a65}
.growth-aeo-number::after{content:"";display:block;width:28px;height:3px;margin-top:14px;border-radius:3px;background:var(--lime,#e4fe55)}
.growth-aeo-steps h3{margin:8px 0 0;font-size:clamp(19px,1.45vw,22px);font-weight:500;line-height:1.18;letter-spacing:-.03em}
.growth-aeo-steps p{margin:0;font-size:15px;line-height:1.55;color:#62655e}
.growth-aeo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:clamp(32px,4vw,56px)}
.growth-aeo-read{max-width:60ch;margin:0;font-size:15px;line-height:1.55;color:#62655e}
.growth-aeo-read a{color:var(--ink,#161616);text-decoration:underline;text-underline-offset:4px}
.growth-aeo-read a:focus-visible{outline:2px solid var(--ink,#161616);outline-offset:3px;border-radius:3px}
.growth-aeo-intro a{color:var(--ink,#161616);text-decoration:underline;text-underline-offset:4px}
.growth-aeo-intro a:hover{text-decoration-thickness:2px}
.growth-aeo-intro a:focus-visible{outline:2px solid var(--ink,#161616);outline-offset:3px;border-radius:3px}

@media(max-width:1100px){
  .growth-aeo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .growth-aeo-steps li:last-child{grid-column:1/-1}
}
@media(max-width:767px){
  .service-hero-title{margin-bottom:1.1rem;font-size:.75rem;letter-spacing:.1em}
  .service-answer{grid-template-columns:1fr;width:calc(100% - 48px);margin-bottom:2.5rem}
  .service-answer-label{padding-top:0}
  .service-answer-text{font-size:1.05rem}
  .website-demo-load{gap:.9rem;padding:.85rem 1.25rem;font-size:.95rem}
  .growth-aeo-heading{grid-template-columns:1fr}
  .growth-page .growth-aeo h2{font-size:clamp(28px,7.6vw,40px)}
  .growth-aeo-steps{grid-template-columns:1fr}
  .growth-aeo-steps li{padding:22px 20px 24px}
  .growth-aeo-actions .website-search-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .website-demo-preview img,.website-demo-screen iframe,.website-demo-load{transition:none}
  .website-demo-screen:not(.is-live):hover .website-demo-preview img{transform:none}
}