/* ========================================================= GGS Web Studio | Showcase Neo-brutalist editorial · paper + ink + orange (GGS Brand Kit tokens) Type: Archivo Expanded (display) / Inter (body) / JetBrains Mono (labels) Thick borders, hard offset shadows, mechanical press. No gradients. Static, no build step. ========================================================= */ /* GGS-BRAND:BEGIN tokens - managed by GGS Brand Kit/sync.py, do not hand-edit */ :root{ --paper:#ECE6D7; --ink:#16120E; --ink-2:#39332a; --ink-dim:#6b6256; --orange:#F8501E; /* energy / AI / CTAs (display + dark backgrounds) */ --orange-ink:#B23A0E; /* accessible orange for small text on cream (>=4.5:1) */ --blue:#2A37CC; /* trust / data / people */ --blue-2:#4351ff; /* brighter blue for dark backgrounds + glow */ --blue-soft:rgba(42,55,204,.10); --line:rgba(22,18,14,.14); --grid:rgba(22,18,14,.05); --font-display:'Archivo',sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } /* GGS-BRAND:END */ :root{ /* per-site (not synced) */ /* legacy aliases -> canonical tokens */ --accent:var(--orange); --accent-2:var(--blue); --ink-soft:var(--ink-2); --paper-2:#fbf7ee; /* lighter inset / card fill */ /* category swatches */ --c-home:#ff3d1f; --c-community:#2233f0; --c-food:#f5b000; --c-auto:#7c3aed; --c-legal:#0e8a4f; --c-cleaning:#06b6d4; --c-health:#d6336c; --bord:2.5px; --r:4px; --sh:6px 6px 0 var(--ink); --sh-sm:4px 4px 0 var(--ink); --maxw:1240px; --ease:cubic-bezier(.2,.8,.2,1); --font:var(--font-body); --display:"Archivo Expanded","Archivo",system-ui,sans-serif; --mono:var(--font-mono); } /* Self-hosted display font (Archivo). Weight 900 is preloaded in , the hero H1, the LCP element. Self-hosting removes the third-party Google Fonts round-trip on the critical render path. NB: the --display stack lists "Archivo Expanded" first, but Google Fonts does not serve that family, so headings resolve to Archivo, which is what site visitors have always actually seen. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-400.woff2') format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-700.woff2') format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-800.woff2') format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/archivo-900.woff2') format('woff2')} *{box-sizing:border-box} /* overflow-x:clip, NOT hidden: `hidden` forces overflow-y to compute to a scroll container on the root, which iOS Safari mishandles on background→resume (the page comes back zoomed/clipped). `clip` contains any stray x-overflow without creating that scroll container, and leaves vertical scrolling untouched. */ html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; font-family:var(--font); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; /* faint grid texture so the paper isn't dead-flat */ background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size:46px 46px; background-position:-1px -1px; background-blend-mode:normal; } body{background-color:var(--paper)} body::before{ /* lighten the grid lines to a whisper */ content:"";position:fixed;inset:0;z-index:-1;background:var(--paper);opacity:.955;pointer-events:none; } a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.98;letter-spacing:-.01em;margin:0;text-transform:uppercase} img{display:block;max-width:100%} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px} .skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r);font-family:var(--mono)} .skip-link:focus{left:16px} /* ---------- Keyboard focus ---------- */ :focus-visible{outline:3px solid var(--accent-2);outline-offset:3px} /* mechanical-press components: keep the outline clear of the hard shadow */ .press:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px} /* on the cobalt tape / dark surfaces, vermillion reads better than cobalt */ .btn--ink:focus-visible,.foot-links a:focus-visible,.mobile-nav a:focus-visible{outline-color:var(--accent)} /* ---------- Mechanical press ---------- */ .press{box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s,color .15s} .press:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)} .press:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5em;cursor:pointer; font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:13px;letter-spacing:.01em;line-height:1; padding:14px 20px;border:var(--bord) solid var(--ink);border-radius:var(--r); white-space:nowrap; } .btn .ar{font-family:var(--font);font-weight:700;transition:transform .2s var(--ease)} .btn:hover .ar{transform:translateX(3px)} .btn--sm{padding:10px 14px;font-size:12px} .btn--lg{padding:17px 26px;font-size:15px} .btn--accent{background:var(--accent);color:var(--ink)} .btn--ink{background:var(--ink);color:var(--paper)} .btn--paper{background:var(--paper-2);color:var(--ink)} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:var(--bord) solid var(--ink)} .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px} .brand{display:flex;align-items:center;gap:12px} .brand-mark{ display:grid;place-items:center;width:36px;height:36px;border:var(--bord) solid var(--ink);border-radius:var(--r); font-family:var(--display);font-weight:900;font-size:20px;color:var(--ink);background:var(--accent); } .brand-name{font-family:var(--display);font-weight:900;font-size:18px;text-transform:uppercase;letter-spacing:-.01em} .brand-name em{font-style:normal;font-weight:700;color:var(--ink-soft)} .nav-links{display:flex;gap:26px} .nav-links a{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:4px 2px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s} .nav-links a:hover{border-color:var(--accent)} /* ---------- Mobile nav (hamburger) ---------- */ .nav-toggle{ display:none;flex:none;width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer; background:var(--paper-2);color:var(--ink);border:var(--bord) solid var(--ink);border-radius:var(--r); } .nav-toggle-bars{display:block;position:relative;width:20px;height:14px} .nav-toggle-bars span{position:absolute;left:0;width:100%;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .22s var(--ease),opacity .18s var(--ease)} .nav-toggle-bars span:nth-child(1){top:0} .nav-toggle-bars span:nth-child(2){top:6px} .nav-toggle-bars span:nth-child(3){top:12px} .nav-toggle.is-open .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle.is-open .nav-toggle-bars span:nth-child(2){opacity:0} .nav-toggle.is-open .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobile-nav{ display:none;flex-direction:column;gap:0; position:fixed;inset:0 0 0 auto;width:min(80vw,330px);z-index:210; background:var(--paper);border-left:var(--bord) solid var(--ink); box-shadow:-12px 0 44px rgba(0,0,0,.18); padding:88px 28px 28px; transform:translateX(100%);transition:transform .4s var(--ease); } .mobile-nav[hidden]{display:none} .mobile-nav.is-open{transform:translateX(0)} .mobile-nav a{ display:flex;align-items:center;min-height:54px;padding:17px 0; /* plain Archivo (canonical --font-display), NOT --display/Expanded: BRAND.md specs drawer links as Archivo 800 so this drawer matches getggsai.com's */ font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em; border-bottom:1px solid var(--line); } .mobile-nav a:last-child{border-bottom:0} .mobile-nav .mobile-nav-cta{background:var(--accent);color:var(--ink);font-family:var(--display);gap:.5em;padding:17px 16px;margin-top:14px;border:var(--bord) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-sm)} .mobile-nav .mobile-nav-cta .ar{font-family:var(--font);font-weight:700} .navscrim{position:fixed;inset:0;z-index:205;background:rgba(13,10,8,.5);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s} body.nav-open .navscrim{opacity:1;visibility:visible} body.nav-open{overflow:hidden} @media (min-width:981px){.navscrim{display:none}} .nav-toggle{position:relative;z-index:220} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:clamp(54px,9vw,110px) 0 clamp(40px,5vw,64px);border-bottom:var(--bord) solid var(--ink)} .meta-line{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 22px;text-transform:uppercase} .hero-title{font-size:clamp(42px,8.4vw,118px);max-width:13ch;letter-spacing:-.02em} .hero-title .mark{color:var(--accent);text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:.085em;text-underline-offset:.04em} .hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:34px} .hero-lede{font-size:clamp(16px,1.9vw,20px);max-width:46ch;margin:0;color:var(--ink)} .hero-actions{display:flex;flex-wrap:wrap;gap:14px} .hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin:46px 0 0;padding:0;list-style:none} .hero-tags li{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;border:2px solid var(--ink);border-radius:999px;padding:7px 14px;background:var(--paper-2)} .hero-tags li:first-child{background:var(--ink);color:var(--paper)} /* ---------- Canvas showpiece ---------- */ .showpiece{padding:clamp(40px,6vw,72px) 0;border-bottom:var(--bord) solid var(--ink)} .show-frame{border:var(--bord) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);background:var(--paper-2);overflow:hidden} .show-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;background:var(--ink);color:var(--paper)} .show-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em} .show-hint{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#bdb6a3} .show-plate{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--accent)} @media(max-width:560px){.show-plate{display:none}} .show-stage{position:relative;width:100%;aspect-ratio:16/10;background:var(--paper);cursor:crosshair;touch-action:pan-y} .show-stage #halftone{display:block;width:100%;height:100%} .show-cap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 16px;border-top:var(--bord) solid var(--ink)} .show-cap span{font-family:var(--display);font-weight:900;font-size:clamp(16px,2.2vw,22px);text-transform:uppercase} .show-cap b{font-family:var(--mono);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)} .show-label.is-live{color:var(--accent)} /* Live HTML node | composited into the canvas via the HTML-in-Canvas API where supported; off-canvas (still laid out) otherwise. */ .live-html{ position:absolute;left:-99999px;top:0;width:340px;height:96px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--ink);color:var(--paper);border:3px solid var(--accent);border-radius:6px; padding:16px 20px;font-family:var(--mono); } .live-html .lh-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);animation:lhpulse 1s steps(2,end) infinite} @keyframes lhpulse{50%{opacity:.2}} .live-html .lh-tag{font-weight:700;font-size:15px;letter-spacing:.1em} .live-html .lh-clock{font-size:26px;font-weight:700;color:var(--accent);width:100%;letter-spacing:.04em} .live-html .lh-meta{font-size:11px;color:#bdb6a3;width:100%} /* ---------- Marquee ---------- */ .marquee{overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:var(--bord) solid var(--ink);padding:14px 0} .marquee-track{display:inline-flex;align-items:center;gap:26px;white-space:nowrap;animation:marquee 30s linear infinite;will-change:transform} .marquee-track span{font-family:var(--display);font-weight:800;font-size:clamp(16px,2.2vw,24px);text-transform:uppercase;letter-spacing:.01em} .marquee-track b{color:var(--accent);font-size:13px} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ .section{padding:clamp(66px,9vw,120px) 0;position:relative} .work{border-bottom:var(--bord) solid var(--ink)} .section-head{max-width:760px;margin:0 0 46px} .eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--paper);background:var(--ink);padding:5px 11px;border-radius:var(--r)} .eyebrow.on-accent{background:var(--ink);color:var(--accent)} .section-head h2{font-size:clamp(34px,6vw,76px);margin:18px 0 0} .section-lede{font-family:var(--font);font-size:clamp(15px,1.7vw,18px);margin:20px 0 0;max-width:60ch;color:var(--ink)} /* ---------- Filters ---------- */ .filters{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 40px} .chip{ font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer; color:var(--ink);background:var(--paper-2);border:var(--bord) solid var(--ink);border-radius:var(--r); padding:9px 15px; } .chip.is-active{background:var(--ink);color:var(--paper)} /* ---------- Work grid ---------- */ /* minmax(0,1fr), NOT 1fr: a bare 1fr track is minmax(auto,1fr), and WebKit takes that `auto` minimum from the card's content, which includes the aspect-ratio .frame. The frame's height feeds back into the track's min width, the wider track grows the frame, and each scroll-driven layout pass amplifies it, so the cards balloon uncontrollably on iOS/desktop Safari. Clamping the track minimum to 0 breaks that feedback loop. */ .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} .card{ display:flex;flex-direction:column; background:var(--paper-2);border:var(--bord) solid var(--ink);border-radius:var(--r); box-shadow:var(--sh);transition:transform .14s var(--ease),box-shadow .14s var(--ease),opacity .3s,scale .3s; } .card:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)} .card.is-hidden{display:none} .card.filtering{opacity:0;scale:.97} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px} .idx{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;color:var(--accent)} .cat{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 10px;background:var(--paper)} .sw{width:9px;height:9px;border:1.5px solid var(--ink);display:inline-block} .sw--home{background:var(--c-home)}.sw--community{background:var(--c-community)}.sw--food{background:var(--c-food)}.sw--auto{background:var(--c-auto)}.sw--legal{background:var(--c-legal)}.sw--cleaning{background:var(--c-cleaning)}.sw--health{background:var(--c-health)} .frame{display:block;position:relative;margin:0 14px;border:var(--bord) solid var(--ink);border-radius:2px;overflow:hidden;background:var(--paper);aspect-ratio:16/10} /* Absolutely positioned so the image fills the frame and can NEVER push layout or balloon while lazy-loading/decoding during scroll. */ .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--ease)} .card:hover .frame img{transform:scale(1.03)} .frame-bar{ position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:10px;color:var(--paper);background:var(--ink); padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em; } .live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,61,31,.3)} .card-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px} .card-body h3{font-size:20px;letter-spacing:-.01em} .card-body p{margin:9px 0 16px;color:var(--ink-soft);font-size:14.5px;flex:1} .visit{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;align-self:flex-start;border-bottom:2.5px solid var(--accent);padding-bottom:2px} .visit .ar{transition:transform .2s var(--ease)} .visit:hover .ar{transform:translate(3px,-3px)} /* ---------- Capabilities (spec sheet) ---------- */ .spec{border:var(--bord) solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--ink);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bord)} .spec-row{background:var(--paper-2);padding:30px 28px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:6px;align-items:start} .spec-n{grid-row:span 2;font-family:var(--display);font-weight:900;font-size:40px;line-height:.85;color:var(--accent)} .spec-row h3{font-size:21px} .spec-row p{margin:0;color:var(--ink-soft);font-size:14.5px;grid-column:2} /* ---------- Pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} .price-card{ position:relative;display:flex;flex-direction:column; background:var(--paper-2);border:var(--bord) solid var(--ink);border-radius:var(--r); box-shadow:var(--sh);padding:24px 22px 26px; } .price-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .tier{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 10px;background:var(--paper)} .price-card h3{font-size:23px;letter-spacing:-.01em} .price-pitch{margin:10px 0 0;color:var(--ink-soft);font-size:14.5px} .price-tag{display:flex;align-items:baseline;gap:10px;margin:18px 0 0;padding:14px 0;border-top:var(--bord) solid var(--ink);border-bottom:var(--bord) solid var(--ink)} .price-tag .from{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)} .price-tag strong{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.4vw,42px);line-height:1;letter-spacing:-.01em} .price-list{list-style:none;margin:14px 0 22px;padding:0;flex:1} .price-list li{position:relative;padding:8px 0 8px 22px;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line)} .price-list li:last-child{border-bottom:0} .price-list li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;background:var(--accent);border:1.5px solid var(--ink)} .price-cta{justify-content:center} /* featured (middle) card: inverted ink panel + tape sticker */ .price-card--featured{background:var(--ink);color:var(--paper)} .price-card--featured .tier{background:var(--accent);color:var(--ink)} .price-card--featured .price-pitch{color:#d8d1bf} .price-card--featured .price-tag{border-color:rgba(236,230,215,.28)} .price-card--featured .price-tag .from{color:#bdb6a3} .price-card--featured .price-tag strong{color:var(--accent)} .price-card--featured .price-list li{color:#d8d1bf;border-bottom-color:rgba(236,230,215,.14)} /* dark card surface: vermillion focus ring reads better than cobalt (same as .btn--ink rule) */ .price-card--featured .btn:focus-visible{outline-color:var(--accent)} .price-tape{ position:absolute;top:-14px;right:-12px;rotate:6deg;z-index:1;pointer-events:none; font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em; background:var(--accent-2);color:#fff;padding:7px 18px;border:var(--bord) solid var(--ink); box-shadow:var(--sh-sm); } /* care plan strip */ .care-strip{ display:flex;align-items:center;flex-wrap:wrap;gap:16px 18px; margin-top:30px;background:var(--paper-2);border:var(--bord) solid var(--ink);border-radius:var(--r); box-shadow:var(--sh-sm);padding:18px 22px; } .care-label{flex:none;font-family:var(--display);font-weight:900;font-size:14px;text-transform:uppercase;background:var(--accent);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);padding:8px 12px} .care-copy{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:78ch} .care-copy strong{color:var(--ink)} /* ---------- FAQ ---------- */ .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .faq-item{ background:var(--paper-2);border:var(--bord) solid var(--ink);border-radius:var(--r); box-shadow:var(--sh-sm);overflow:hidden; } .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer; padding:18px 22px;list-style:none; } .faq-item summary::-webkit-details-marker{display:none} .faq-q{font-family:var(--display);font-weight:800;font-size:clamp(16px,2vw,19px);letter-spacing:-.01em;line-height:1.25} .faq-ic{position:relative;flex:none;width:18px;height:18px;margin-top:3px} .faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--accent);transition:transform .2s var(--ease)} .faq-ic::before{left:0;top:7.5px;width:18px;height:3px} .faq-ic::after{left:7.5px;top:0;width:3px;height:18px} .faq-item[open] .faq-ic::after{transform:scaleY(0)} .faq-item[open] summary{border-bottom:var(--bord) solid var(--ink)} .faq-a{padding:16px 22px 20px} .faq-a p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.62} .faq-a a{border-bottom:2px solid var(--accent);font-weight:600;color:var(--ink)} .faq-item summary:focus-visible{outline:3px solid var(--accent-2);outline-offset:-4px} /* even card heights in the 2-col desktop grid: float short (1-line) questions up to the height of a 2-line question so rows don't look ragged. align-items:start keeps an OPEN answer from stretching its closed row-mate. */ @media(min-width:641px){ .faq-item summary{min-height:84px} } /* ---------- CTA ---------- */ .cta{padding-top:0} .cta-panel{ background:var(--accent);color:var(--ink);border:var(--bord) solid var(--ink);border-radius:var(--r); box-shadow:var(--sh);padding:clamp(40px,6vw,76px) clamp(28px,5vw,64px);text-align:center; } .cta-panel h2{font-size:clamp(36px,6.5vw,82px);margin:18px 0 0} .cta-panel p{max-width:50ch;margin:20px auto 0;font-size:17px;color:var(--ink)} .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px} /* demoted tertiary link under the two CTA buttons */ .cta-alt{margin:18px 0 0} .cta-alt a{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:1px;transition:border-color .2s} .cta-alt a:hover{border-color:transparent} /* ---------- AI cross-sell strip ---------- */ .ai-strip{padding:clamp(40px,6vw,72px) 0} .ai-band{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px; background:var(--ink);color:var(--paper); border:var(--bord) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh); padding:clamp(28px,4vw,46px) clamp(26px,4vw,52px); } .ai-band .eyebrow{background:var(--accent);color:var(--ink)} .ai-band-text{max-width:60ch} .ai-band h2{font-size:clamp(26px,4.2vw,46px);margin:16px 0 0;color:var(--paper)} .ai-band p{margin:14px 0 0;color:#d8d1bf;font-size:16px;max-width:54ch} .ai-band-cta{flex:none} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:var(--paper);border-top:var(--bord) solid var(--ink);padding:44px 0} .foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px} .foot-brand{display:flex;align-items:center;gap:14px} .foot-brand .brand-mark{color:var(--ink)} .foot-brand strong{font-family:var(--display);display:block;font-size:16px;text-transform:uppercase} .foot-brand span{font-family:var(--mono);font-size:11px;color:#bdb6a3} .foot-links{display:flex;flex-wrap:wrap;gap:22px} .foot-links a{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper);border-bottom:2px solid transparent;transition:border-color .2s} .foot-links a:hover{border-color:var(--accent)} .foot-copy{width:100%;margin:6px 0 0;font-family:var(--mono);font-size:11.5px;color:#8c866f} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.in{opacity:1;transform:none} /* The hero is above the fold, so reveal it with a load-triggered CSS animation rather than waiting for app.js's IntersectionObserver. Otherwise the LCP

sits at opacity:0 until the deferred script runs (~2s on throttled mobile), which inflates Largest Contentful Paint. The reduced-motion block below makes every animation instant, so this respects that preference automatically. */ .hero .reveal{animation:reveal-in .55s var(--ease) both} @keyframes reveal-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ---------- Responsive ---------- */ @media(max-width:980px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .price-grid{grid-template-columns:minmax(0,1fr)} .nav-links{display:none} .nav-cta{display:none} /* replaced by the in-menu CTA */ .nav-toggle{display:inline-flex} .mobile-nav{display:flex} } @media(max-width:640px){ /* Reserve the cards' 6px hard offset shadow (--sh) on the right so the single-column cards sit with even left/right margins. Without this the card body is centred but the shadow eats 6px of the right gap, so the cards look shifted left. */ .grid{grid-template-columns:minmax(0,1fr);padding-right:6px} /* same shadow-room fix for the other full-width shadowed blocks */ .show-frame,.cta-panel,.ai-band,.care-strip{margin-right:6px} .price-grid{padding-right:6px} .spec{grid-template-columns:1fr} .faq-list{grid-template-columns:1fr} .hero-row{flex-direction:column;align-items:flex-start} /* keep monotonic with the base clamp (8.4vw): stay below ~54px at 640px */ .hero-title{font-size:clamp(34px,9vw,52px)} /* The email CTA (carlos@growthgroupsolutions.com) is wider than a phone screen, and .btn is white-space:nowrap, so it forced the page ~18px wider than the viewport. overflow-x:hidden masks that on load, but iOS Safari re-exposes it as a clipped right margin after the tab is backgrounded and reopened. Let the long label wrap so the page never exceeds the viewport. */ .cta-actions .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere} } /* ---------- Touch targets ---------- */ @media(pointer:coarse){ .foot-links a{min-height:44px;display:inline-flex;align-items:center} .chip{min-height:44px;display:inline-flex;align-items:center} .nav-links a{min-height:44px;display:inline-flex;align-items:center} } /* ---------- Hover effects → true-hover pointers only ---------- On touch screens :hover "sticks" to whatever the finger drags over while scrolling, so cards shifted and their screenshots zoomed (scale 1.03) as the page scrolled and snapped back on stop. Neutralise the motion-based hover states on touch / no-hover devices so nothing moves under a finger. The resting shadows are restored explicitly so cards keep their offset look. */ @media (hover:none),(pointer:coarse){ .press:hover{transform:none;box-shadow:var(--sh)} .btn:hover .ar{transform:none} .card:hover{transform:none;box-shadow:var(--sh)} .card:hover .frame img{transform:none} .visit:hover .ar{transform:none} } /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} }