/* ============================================================ TOKENS. Change a brand colour here and it changes everywhere. ============================================================ */ :root{ --ink:#1C1814; --slate:#5C564E; --mute:#877F74; --line:#E8E2DA; --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6; --cream:#FBF6F0; --cream-deep:#F5EBDF; --dark:#191512; --paper:#FFFFFF; } /* ============================================================ BASE + GLOBAL OVERFLOW GUARD Nothing on this page may push the layout sideways on a phone. ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* The guard sits on only, and uses clip rather than hidden. Putting overflow on makes the body a scroll container, and a scroll container silently kills position:sticky, which is what keeps the jump nav pinned to the top of the screen. Do not move this rule onto body or onto a wrapper div. */ html{overflow-x:clip} html,body{max-width:100%} @supports not (overflow:clip){html{overflow-x:hidden}} img,svg,video,table{max-width:100%} html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} body h1,body h2,body h3,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} section{padding:88px 0} .eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)} .kicker{color:var(--slate);font-size:18px;max-width:60ch} .accent{color:var(--orange)} .btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease} .btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(232,80,26,.28)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{border:1.5px solid var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink)} .h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:14px} .h2 .accent{font-weight:800} .sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px} .card{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px} button.btn{font-family:'Inter',sans-serif;border:none;cursor:pointer} /* ---- utilities. These exist so no element carries an inline style ---- */ .stats-wrap{max-width:1240px;padding:0} .eyebrow + .h2{margin-top:18px} .vet-note.intro{margin:30px 0 28px} .price.price-scope{font-size:28px;padding:4px 0} .faq .wrap{max-width:880px} #qflow{margin-top:34px} .f-field.f-last{margin-bottom:16px} /* ============================================================ 01. HERO Geometry is shared with the AI SEO service page: same padding, same gradient and dot texture, same clipped lower edge, same grid columns and gap, same H1 and kicker sizing. The visual on the right is locked to 466px so both heroes resolve to the same length. Change one page, change the other. ============================================================ */ .hero{position:relative;padding:70px 0 86px;background:linear-gradient(165deg,var(--cream) 0%,#FFF7F2 46%,#fff 100%);overflow:hidden;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px))} .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cream-deep) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.7;pointer-events:none} .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center} .hero h1{font-size:clamp(37px,4.8vw,56px);font-weight:800;margin:22px 0 18px;color:var(--ink)} .hero .kicker{font-size:17.5px;max-width:58ch;margin-bottom:22px;line-height:1.72} .kicker mark{background:linear-gradient(180deg,transparent 58%,#FFDCC9 58%);color:var(--ink);font-weight:600;padding:0 2px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px} .hero-ctas .btn{padding:14px 22px;font-size:14.8px;white-space:nowrap} .hero-chips{gap:8px} .hero-chips .chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.82);border-color:var(--cream-deep)} .hero-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800;font-size:11px} /* -- HERO VISUAL: THE PUBLISHED FEATURE One dominant element, built entirely in CSS with no image assets: a real editorial page shown with depth, and behind it the two placements that came before. The three cards illuminate in sequence, in place, and nothing travels or drifts. The masthead mark is an abstract gradient ring on purpose, so it cannot read as any real publication. To restyle, work top down: .gp-deck sets the tilt, .gp-card sets the paper, .gp-card-1 is the front page. Elementor: this is one HTML widget inside the hero section. -- */ .hviz{position:relative;height:466px;min-height:466px;display:flex;align-items:center;justify-content:center;padding:0 8px} .hviz-glow{position:absolute;inset:2% 0;background:radial-gradient(ellipse at 52% 48%,rgba(232,80,26,.22),transparent 64%);filter:blur(6px);pointer-events:none} .gp-deck{position:relative;width:322px;max-width:100%;transform:perspective(1300px) rotateY(-12deg) rotateX(3deg);transform-style:preserve-3d} .gp-card{position:absolute;inset:0;border-radius:20px;background:var(--paper);border:1.5px solid var(--line);box-shadow:0 22px 50px rgba(28,24,20,.12)} .gp-card-3{transform:translate3d(58px,-38px,-108px);opacity:.66;animation:gpLite 10.5s ease-in-out infinite} .gp-card-2{transform:translate3d(29px,-19px,-54px);opacity:.86;animation:gpLite 10.5s ease-in-out infinite;animation-delay:3.5s} .gp-card-1{position:relative;display:flex;flex-direction:column;min-height:398px;padding:24px 26px 0;overflow:hidden;box-shadow:0 42px 84px rgba(28,24,20,.22),0 6px 18px rgba(28,24,20,.07);animation:gpLiteFront 10.5s ease-in-out infinite;animation-delay:7s} .gp-card-1::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),#F1A07E)} @keyframes gpLite{0%,26%,100%{border-color:var(--line);box-shadow:0 22px 50px rgba(28,24,20,.12)}8%,20%{border-color:var(--orange-line);box-shadow:0 22px 50px rgba(232,80,26,.18)}} @keyframes gpLiteFront{0%,26%,100%{box-shadow:0 42px 84px rgba(28,24,20,.22),0 6px 18px rgba(28,24,20,.07)}8%,20%{box-shadow:0 42px 84px rgba(232,80,26,.24),0 6px 18px rgba(28,24,20,.07)}} /* masthead */ .gp-mast{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1.5px solid var(--line)} .gp-mark{position:relative;width:28px;height:28px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 210deg,var(--orange),#F6B79A,var(--orange-deep),var(--orange))} .gp-mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--paper)} .gp-mast-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13.5px;color:var(--ink)} .gp-mast-meta{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} /* the page itself */ .gp-head{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;line-height:1.24;letter-spacing:-.02em;color:var(--ink);margin:18px 0 12px} .gp-body{font-size:11.6px;line-height:1.85;color:var(--slate);margin-bottom:10px} .gp-drop{float:left;font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:800;line-height:.86;color:var(--orange);margin:2px 7px 0 0} .gp-link{position:relative;font-weight:700;color:var(--orange-deep);background:linear-gradient(transparent 62%,#FFD9C4 62%);border-bottom:2px solid var(--orange);padding:0 2px;border-radius:2px;animation:gpGlow 10.5s ease-in-out infinite;animation-delay:7s} @keyframes gpGlow{0%,26%,100%{box-shadow:0 0 0 0 rgba(232,80,26,0)}8%,20%{box-shadow:0 0 0 5px rgba(232,80,26,.16)}} .gp-foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding:13px 0;border-top:1.5px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--slate)} .gp-foot-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0} .gp-chip{margin-left:auto;border:1.5px solid var(--orange-line);background:var(--orange-soft);color:var(--orange-deep);border-radius:999px;padding:4px 10px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} /* ============================================================ 02. STATS BAND Shared V2A component, identical on the AI SEO, blogger outreach, niche edit and link building pages: 34px numeral, 12px label, 12.5px sub, 34px by 30px padding, four equal columns inside a 1240px container with no side padding, two columns at 880px. If this band ever looks different from the other service pages, this block has been edited and should be reverted. ============================================================ */ .stats-band{background:var(--dark)} .stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr} .stat{padding:34px 30px;color:#fff} .stat:nth-child(even){background:var(--orange)} .stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05} .stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px} .stat .st-sub{font-size:12.5px;margin-top:5px;color:rgba(255,255,255,.78)} /* ============================================================ 03. JUMP NAV (sticky in-page anchors, sits under the stats band) Mirrors the AI SEO service page component. Elementor: build as an HTML widget pinned directly under the stats band. Add or remove links by editing the tags only. ============================================================ */ .jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)} .jump-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none} .jump-in::-webkit-scrollbar{display:none} .jump a{flex-shrink:0;padding:15px 14px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s} .jump a:hover{color:var(--ink);border-bottom-color:var(--orange)} .jump .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none} .jump .j-cta:hover{border-bottom-color:transparent;color:#fff} /* offset so anchored sections are not hidden behind the sticky bar */ section[id],div[id]{scroll-margin-top:64px} /* ============ DEFINITION ============ */ .def-box{position:relative;background:var(--cream);border:1.5px solid var(--line);border-radius:20px;padding:38px 42px 34px;max-width:860px;margin:26px 0 30px} .def-box .def-mark{position:absolute;top:-26px;left:30px;font-family:'Bricolage Grotesque',sans-serif;font-size:84px;font-weight:800;color:var(--orange);line-height:1} .def-box p.def-text{font-size:19px;line-height:1.75} .def-box .def-cap{margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)} .ai-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:16px;padding:18px 24px;margin-bottom:28px} .ai-strip .ai-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap} .ai-strip .ai-chips{display:flex;gap:8px;flex-wrap:wrap} .ai-strip .ai-chips span{border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700} .ai-strip p{flex:1;min-width:260px;font-size:14px;color:var(--slate);margin:0} .def-rel{display:flex;align-items:center;gap:18px;background:var(--dark);border-radius:16px;padding:22px 28px;color:#fff;flex-wrap:wrap} .def-rel .dr-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;white-space:nowrap} .def-rel .dr-txt{font-size:15px;color:#C9C2B8;flex:1;min-width:260px} .def-rel .dr-txt strong{color:#fff} /* ============ PROBLEM ============ */ .problem{background:var(--cream)} .truth-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:38px} .truth-line .t1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--ink)} .truth-line .t-slash{color:var(--orange);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px} .truth-line .t2{font-size:16px;color:var(--slate)} .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .prob{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 26px;transition:border-color .15s,transform .15s;display:flex;flex-direction:column} .prob:hover{border-color:var(--orange);transform:translateY(-3px)} .prob .p-no{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em;margin-bottom:14px} .prob .p-x{width:24px;height:24px;border-radius:8px;background:var(--cream);border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--orange-deep);font-size:12px;font-weight:800} .prob h3{font-size:18px;margin-bottom:4px} .prob .p-quote{font-size:13.5px;font-style:italic;color:var(--orange-deep);font-weight:600;margin-bottom:12px} .prob p{font-size:14.5px;color:var(--slate)} .prob-close{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--ink);border-radius:16px;padding:22px 28px;color:#fff} .prob-close .pc-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px} .prob-close .pc-txt .accent{color:var(--orange)} .prob-close a{white-space:nowrap;background:var(--orange);color:#fff;border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:700;text-decoration:none} .prob-close a:hover{background:var(--orange-deep)} /* ============ STANDARDS (8 steps) ============ */ .vet-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .vet{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;gap:16px;transition:border-color .15s,transform .15s} .vet:hover{border-color:var(--orange);transform:translateY(-2px)} .vet .n{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--orange);font-size:15px;width:34px;height:34px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:2px} .vet h3{font-size:16px;margin-bottom:4px} .vet p{font-size:14px;color:var(--slate)} .vet-note{margin-top:30px;display:flex;gap:16px;align-items:baseline;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap} .vet-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px} .vet-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)} .vet.gate{background:#FFF7F2;border-color:var(--orange)} .vet.gate .n{background:var(--orange);color:#fff} .vet.gate h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .gate-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;border:1.5px solid var(--ink);border-radius:6px;padding:3px 9px;text-transform:uppercase} .vet.gate .gate-badge{border-color:var(--orange-deep);color:var(--orange-deep)} /* ============ PRICING ============ */ .assure-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .assure-chips .chip{background:var(--cream);display:inline-flex;align-items:center;gap:7px;border-color:var(--cream-deep)} .assure-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800} .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .plan{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s} .plan:hover{transform:translateY(-3px);border-color:#D8CFC2} .plan.popular{border:2px solid var(--orange);box-shadow:0 18px 44px rgba(232,80,26,.13)} .pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap} .plan h3{font-size:20px} .plan .for{font-size:12.5px;color:var(--slate);margin:5px 0 16px;min-height:38px;line-height:1.45} .plan .price{font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:800;letter-spacing:-.02em} .plan .price small{font-size:13px;color:var(--slate);font-weight:600;font-family:'Inter'} .plan ul{list-style:none;margin:16px 0 20px;flex:1} .plan li{position:relative;padding:7px 0 7px 24px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--cream-deep);line-height:1.45} .plan li:last-child{border-bottom:none} .plan li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;background:var(--orange)} .plan li.hl{font-weight:700} .plan li.plus-head{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);padding-left:0;border-bottom:none;padding-bottom:2px} .plan li.plus-head::before{display:none} .plan .foot-line{font-size:12px;color:var(--slate);margin:-8px 0 16px;line-height:1.5;background:var(--cream);border-radius:10px;padding:10px 12px} .plan .btn{text-align:center;font-size:14.5px;padding:13px 18px;width:100%} .mbg-note{margin-top:20px;font-size:12.5px;color:var(--slate)} .pf{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:22px 24px;font-size:14px;color:var(--slate)} .pf b{display:block;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);margin-bottom:4px;font-size:15.5px} .pf-agency{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-left:4px solid var(--orange);border-radius:0 16px 16px 0} .pf-agency > div{flex:1;min-width:280px} .pf-agency .btn{white-space:nowrap;flex-shrink:0} .vol-banner{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--dark);border-radius:18px;padding:30px 34px;color:#fff;border-top:4px solid var(--orange)} .vol-banner h3{font-size:21px;margin-bottom:6px;color:#fff} .vol-banner p{font-size:14px;color:#C9C2B8;max-width:56ch} .vol-banner .btn{background:var(--orange);color:#fff;white-space:nowrap;flex-shrink:0} /* custom-quote tooltip */ .tip-wrap{position:relative;display:block} .tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;line-height:1.55;border-radius:12px;padding:12px 16px;width:250px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:6;text-align:left} .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--ink)} .tip-wrap:hover .tip,.tip-wrap:focus-within .tip{opacity:1} /* Developer note: on mobile, show a small info icon beside the button that opens this same tooltip on tap; close on outside tap or Escape. Button click always goes to the form. */ /* ============ PROCESS ============ */ .process-sec{background:var(--cream)} .pflow{display:flex;flex-direction:column;gap:12px} .pstep{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;transition:border-color .3s,background .3s,box-shadow .3s} .pstep-head{display:flex;align-items:center;gap:18px} .pstep-n{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--cream);color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s} .pstep h3{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0} .pstep .gate-badge{margin:0} .pstep-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s,margin .35s} .pstep-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0;padding-left:62px} .pflow-js .pstep{opacity:.62} .pflow-js .pstep .pstep-body{max-height:0;opacity:0} .pflow-js .pstep.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 36px rgba(232,80,26,.10)} .pflow-js .pstep.active .pstep-n{background:var(--orange);color:#fff} .pflow-js .pstep.active .pstep-body{max-height:600px;opacity:1} .proc-chips{margin-bottom:34px} /* ============ CASE STUDY ============ */ .case-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch} .case-col{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px} .case-col .cc-tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:12px} .case-col ul{list-style:none} .case-col li{position:relative;padding:6px 0 6px 22px;font-size:14px;color:var(--slate);line-height:1.55} .case-col li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;background:var(--orange)} .case-col li strong{color:var(--ink)} .case-delta{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--dark);border-radius:18px;padding:34px 36px;color:#fff;text-align:center;border-top:4px solid var(--orange)} .case-delta .cd-num{font-family:'Bricolage Grotesque',sans-serif;font-size:46px;font-weight:800;line-height:1.05;white-space:nowrap} .case-delta .cd-num .accent{color:var(--orange)} .case-delta .cd-cap{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:#C9C2B8} .case-note{margin-top:26px;display:flex;gap:16px;align-items:baseline;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap} .case-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px} .case-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)} /* ============ COMPARISON (dark) ============ */ .compare-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)} .compare-dark .h2{color:#fff} .compare-dark .sec-intro{color:#C9C2B8} .compare-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E} .tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid #3A332C} table.cmp{display:table;width:100%;border-collapse:collapse;min-width:780px;background:#211B15;font-size:14px;table-layout:fixed} .cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid #33291F;vertical-align:top} .cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:#2A241E;width:22%} .cmp thead th.v2a{background:var(--orange);color:#fff;width:40%} .cmp thead th:last-child{width:38%} .cmp td:first-child{color:#E8E2DA;font-weight:700;font-size:13px;width:22%} .cmp td.v2a{background:rgba(232,80,26,.12);color:#fff;width:40%} .cmp td{color:#9A9288} .cmp .yes{color:#7ED9A2;font-weight:800;margin-right:7px} .cmp .no{color:#E58080;font-weight:800;margin-right:7px} .founder-note{margin-top:30px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;background:#211B15;border:1.5px solid #3A332C;border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:22px 28px} .founder-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;white-space:nowrap;color:#fff} .founder-note span{flex:1;min-width:280px;font-size:14.5px;color:#C9C2B8} .founder-note span strong{color:#F1A07E;font-weight:700} /* ============ INDUSTRIES ============ */ .industries{background:var(--cream)} .who-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px} .who-card{border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .15s, transform .15s;background:var(--paper);display:flex;flex-direction:column} .who-card:hover{border-color:var(--orange);transform:translateY(-3px)} .who-card .wc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em} .who-card h3{font-size:18px;margin:10px 0 4px} .who-card .ind-tags{font-size:11.5px;font-weight:700;color:var(--orange-deep);margin-bottom:10px;line-height:1.5} .who-card p{font-size:14px;color:var(--slate);flex:1} .who-card .ind-checks{list-style:none;margin-top:14px;border-top:1px solid var(--cream-deep);padding-top:12px} .who-card .ind-checks li{position:relative;padding:3px 0 3px 22px;font-size:13px;font-weight:600;color:var(--ink)} .who-card .ind-checks li::before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800} .who-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 26px} .who-foot-q{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;white-space:nowrap} .who-foot-a{flex:1;min-width:240px;font-size:14px;color:var(--slate)} .who-foot-link{white-space:nowrap;font-weight:700;color:var(--orange-deep);text-decoration:none} /* ============================================================ FAQ Each .qgroup is one labelled band of questions. To add a question, copy one .qitem inside a group. The group label is the

that is a direct child of .qgroup. ============================================================ / .qgroup{margin-bottom:26px} .qgroup:last-child{margin-bottom:0} .qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif} .qflow{display:flex;flex-direction:column;gap:10px} .qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 22px;transition:border-color .3s,box-shadow .3s,opacity .3s} .qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer} .qitem-head h3{font-size:16px;font-weight:700;margin:0;color:var(--ink)} .qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s} .qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s} .qitem-mark::before{left:5px;right:5px;top:9px;height:2px} .qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px} .qitem-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s} .qitem-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0} .qflow-js .qitem{opacity:.7} .qflow-js .qitem .qitem-body{max-height:0;opacity:0} .qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 12px 30px rgba(232,80,26,.09)} .qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)} .qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:#fff} .qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)} .qflow-js .qitem.active .qitem-body{max-height:600px;opacity:1} / ============ FINAL CTA + FORM ============ / .cta-band{background:var(--dark);color:#fff;padding:96px 0} .cta-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center} .cta-band h2{font-size:clamp(30px,4vw,44px);margin:18px 0 14px;color:#fff} .cta-band .cta-sub{color:#C9C2B8;max-width:56ch;margin-bottom:24px} .cta-band .chips{margin-bottom:0} .cta-band .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E} .cta-band .chip{background:transparent;border-color:#4A4239;color:#F1ECE4} .cta-micro{font-size:13px;color:#9A9288;margin-top:18px} .form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.3)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)} .f-field input,.f-field select,.f-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)} .f-field textarea{min-height:90px;resize:vertical} .form-card .btn{width:100%;text-align:center;margin-top:6px} .form-note{text-align:center;font-size:12px;color:var(--slate);margin-top:12px} / footer / footer{background:#120E0B;color:#9A9288;padding:34px 0;font-size:13px} .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-base a{color:#C9C2B8;text-decoration:none} .foot-base a:hover{color:#fff} .foot-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#fff;font-size:15px} .foot-brand i{font-style:normal;color:var(--orange)} / ============================================================ INVOICE REQUEST MODAL Opened by any element carrying data-open-invoice. Optional data-plan="30|40|50" preselects the package. Colours follow the same :root variables as the rest of the page. ============================================================ / .modal[hidden]{display:none} .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px} .modal-backdrop{position:absolute;inset:0;background:rgba(26,21,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .modal-card{position:relative;z-index:1;background:var(--paper);border-radius:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:modal-in .22s ease-out} @keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--slate);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s} .modal-x:hover{border-color:var(--orange);color:var(--orange-deep)} .modal-body{padding:32px 34px 28px} .modal-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px} .modal-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;color:var(--ink);margin-bottom:10px;line-height:1.2} .modal-lede{font-size:14.5px;color:var(--slate);margin-bottom:22px;line-height:1.6} .mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .mf-field{margin-bottom:14px;display:flex;flex-direction:column} .mf-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .mf-field .req{color:var(--orange-deep)} .mf-field .opt{color:var(--slate);font-weight:400} .mf-field input,.mf-field select,.mf-field textarea{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s} .mf-field input::placeholder,.mf-field textarea::placeholder{color:#A69E93} .mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)} .mf-field textarea{resize:vertical} / -- multi-level picker. One row per authority level, so a single request can carry DA/DR 30+, 40+ and 50+ together. To add a level, copy one .tier-row and set data-tier and data-price. -- / .mf-legend{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .tier-pick{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--cream)} .tier-row{display:grid;grid-template-columns:1fr 84px 78px;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)} .tier-row:last-child{border-bottom:none} .tier-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3} .tier-name em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--slate);margin-top:2px} .tier-qty{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;width:100%} .tier-qty:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)} .tier-line{font-size:12.5px;font-weight:700;color:var(--slate);text-align:right;white-space:nowrap} .tier-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;justify-self:start} .tier-check input{width:17px;height:17px;accent-color:var(--orange)} .mf-hint{font-size:12.5px;font-weight:600;color:var(--orange-deep);margin-top:10px} .mf-hint[hidden]{display:none} .mf-total{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 20px;margin-top:6px} .mf-total-label{font-size:13.5px;font-weight:600;color:#C9C2B8} .mf-total-amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;white-space:nowrap} .mf-total-note{font-size:12px;color:var(--slate);margin:10px 0 18px;line-height:1.55} .mf-submit{width:100%;background:var(--orange);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border:none;border-radius:12px;padding:15px;cursor:pointer;box-shadow:0 8px 22px rgba(232,80,26,.3);transition:transform .15s} .mf-submit:hover{transform:translateY(-2px)} .mf-note{font-size:12.5px;color:var(--slate);text-align:center;margin-top:12px} .modal-done{text-align:center;padding-top:44px} .done-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-size:28px;font-weight:800;margin-bottom:16px} .modal-done .modal-lede{margin-bottom:24px} / ============================================================ MOBILE (single consolidated breakpoint set) Everything responsive lives here so one place controls phones. Rendered and checked at 390px: nothing bleeds past the viewport. ============================================================ / @media(max-width:1080px){ .price-grid{grid-template-columns:1fr 1fr} .case-grid{grid-template-columns:1fr} } @media(max-width:880px){ / JUMP NAV ON SMALL SCREENS The single scrolling row becomes a compact grid, so every section is visible at once and nobody has to swipe sideways to find one. Four across, matching the other V2A service pages: plain text links rather than boxes, with the CTA as a pill on its own row. Three across below 360px so the labels keep their shape. The bar returns to the page flow here on purpose, because a pinned grid would cover most of a phone screen. On desktop it is one row and stays sticky. / .jump{position:static;top:auto;background:var(--paper);padding:10px 0 14px} .jump-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 4px;overflow:visible} .jump a{padding:11px 5px;font-size:12.5px;line-height:1.32;text-align:center;white-space:normal;border-bottom:none;color:var(--ink);border-radius:10px} .jump a:hover{background:var(--cream);color:var(--orange-deep)} .jump .j-cta{grid-column:1/-1;margin:8px 0 0;padding:13px 12px;font-size:14px;border-radius:999px} .jump .j-cta:hover{background:var(--orange-deep);color:#fff} .hero{padding:64px 0 78px} .hero-grid,.cta-grid{grid-template-columns:1fr} / the locked hero height is desktop only / .hviz{height:auto;min-height:0;padding:26px 0 0} .gp-deck{transform:perspective(1200px) rotateY(-9deg) rotateX(2deg)} .stats-grid{grid-template-columns:1fr 1fr} .who-grid{grid-template-columns:1fr 1fr} .prob-grid,.vet-grid{grid-template-columns:1fr} section{padding:64px 0} } @media(max-width:760px){ / comparison table becomes stacked cards, never a sideways scroll / .tbl-scroll{overflow:visible;border:none;border-radius:0} table.cmp{min-width:0;display:block;background:transparent;font-size:14px} .cmp thead{display:none} .cmp tbody,.cmp tr,.cmp td{display:block;width:100%} .cmp tr{border:1.5px solid #3A332C;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#211B15} .cmp td{border-bottom:none;padding:14px 18px} .cmp td:first-child{width:100%;background:#2A241E;color:#fff;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px} .cmp td.v2a{width:100%} .cmp td.v2a::before{content:"Visual2Action";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#F1A07E;margin-bottom:5px} .cmp td:last-child::before{content:"Typical guest post sellers";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9A9288;margin-bottom:5px} / label-plus-text strips stack instead of squeezing into columns / .vet-note,.case-note,.founder-note,.def-rel,.ai-strip,.who-foot,.prob-close,.vol-banner,.pf-agency{flex-direction:column;align-items:flex-start;gap:12px} .vet-note b,.case-note b,.founder-note b,.def-rel .dr-big,.who-foot-q,.ai-strip .ai-label,.case-delta .cd-num{white-space:normal} .vet-note span,.case-note span,.founder-note span,.def-rel .dr-txt,.ai-strip p,.who-foot-a,.pf-agency>div,.vol-banner p{min-width:0;width:100%} .vol-banner .btn,.pf-agency .btn,.prob-close a,.who-foot-link{flex-shrink:1;white-space:normal} .case-delta{padding:26px 22px} } @media(max-width:600px){ .wrap{padding:0 18px} .jump a{font-size:12px;padding:10px 4px} .hero h1{font-size:clamp(28px,7.6vw,36px)} .h2{font-size:clamp(24px,6.4vw,30px)} .hero .kicker{font-size:16px} .hero-ctas .btn{width:100%;text-align:center;white-space:normal} .stat{padding:26px 20px} .stat .st-num{font-size:29px} .price-grid,.who-grid{grid-template-columns:1fr} / the badge stops floating above the card and sits in the flow / .pop-tag{position:static;transform:none;display:inline-block;margin-bottom:10px} .plan .for{min-height:0} / the deck loses depth and tilt on a phone so it never reaches the edge / .gp-deck{width:min(300px,78vw);transform:perspective(1100px) rotateY(-7deg) rotateX(2deg)} .gp-card-2{transform:translate3d(18px,-12px,-40px)} .gp-card-3{transform:translate3d(36px,-24px,-80px)} .gp-card-1{min-height:0;padding:20px 20px 0} .gp-head{font-size:18.5px;margin:15px 0 10px} .gp-drop{font-size:32px} .def-box{padding:30px 22px 26px} .def-box .def-mark{font-size:64px;top:-18px;left:18px} .def-box p.def-text{font-size:16.5px} .qitem{padding:15px 16px} .qitem-head h3{font-size:15px} .f-row{grid-template-columns:1fr} .mf-row{grid-template-columns:1fr;gap:0} / level picker keeps the name and its dropdown side by side, and drops the line total because the invoice total sits right below / .tier-row{grid-template-columns:1fr 76px;gap:10px;padding:11px 12px} .tier-line{display:none} .tier-name{font-size:13.5px} .form-card{padding:24px 20px} .pstep-body p{padding-left:0} .tip{width:min(250px,78vw)} .modal{padding:12px} .modal-body{padding:26px 20px 22px} .modal-card h3{font-size:21px} .mf-total{flex-direction:column;align-items:flex-start;gap:4px} section{padding:56px 0} } @media(max-width:360px){ .jump-in{grid-template-columns:repeat(3,1fr)} } @media(prefers-reduced-motion:reduce){ .plan,.prob,.vet,.who-card,.qitem,.pstep,.modal-card,.btn{transition:none!important;animation:none!important} / the hero deck holds its lit state instead of cycling */ .gp-card-1,.gp-card-2,.gp-card-3,.gp-link{animation:none!important} .gp-link{box-shadow:0 0 0 5px rgba(232,80,26,.16)} }