/* ============================================================ DIGIBRO v5 - light editorial layout (WordPress build) Source of truth: homev5.html. Mega menu removed by decision. Token layer is bound to Elementor Global Colors (kit 14). ============================================================ */ /* Declared on :root AND body: Elementor writes its global colours on .elementor-kit-14, which sits on , so the token layer has to be defined there too for var(--e-global-color-*) to resolve. */ :root,body{ /* Elementor kit 14 global colours are the single control point. Site Settings -> Global Colors changes every one of these. */ --blue:var(--e-global-color-primary,#0600F0); /* Digibro Blue */ --blue-deep:var(--e-global-color-secondary,#0400A8); /* Blue Deep */ --blue-soft:var(--e-global-color-dgbls,#EFEEFF); --blue-soft-2:var(--e-global-color-dgbl2,#DEDCFF); --grey:var(--e-global-color-dggrey,#8A8A95); --ink:var(--e-global-color-dgink,#0B0B12); --white:#fff; --accent:var(--e-global-color-accent,#0A9F6E); /* Accent Green */ --accent-deep:var(--e-global-color-dgacd,#07805A); --accent-soft:var(--e-global-color-dgacs,#E6F6F0); --paper:var(--e-global-color-dgwht,#ffffff); --paper-2:var(--e-global-color-dgpp2,#F7F8FA); --paper-3:var(--e-global-color-dgpp3,#EEF0F4); --line:var(--e-global-color-dgline,#E4E6EC); --line-dark:rgba(255,255,255,.15); --body:var(--e-global-color-text,#4C4C58); /* Body */ --body-dark:rgba(255,255,255,.74); --font:"Helvetica Neue",Helvetica,Inter,Arial,system-ui,sans-serif; --r:12px; --r-sm:8px; --r-lg:16px; --shadow:0 1px 2px rgba(11,11,18,.05),0 8px 24px rgba(11,11,18,.06); --shadow-lg:0 18px 46px rgba(11,11,18,.13); --wrap:1180px; --pad:clamp(1.15rem,4vw,2.5rem); --sec:clamp(3.5rem,6.5vw,5.75rem); --ease:cubic-bezier(.2,.7,.2,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper); font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{max-width:100%;display:block;height:auto} .digibro-page ul,.digibro-page ol,.site-foot ul,#hdr ul{margin:0;padding:0;list-style:none} a{color:inherit} button{font:inherit;color:inherit} .digibro-page p{margin:0} [hidden]{display:none!important} .digibro-page h1,.digibro-page h2,.digibro-page h3,.digibro-page h4,.site-foot h4{margin:0;font-weight:700;letter-spacing:-.026em;line-height:1.15} .digibro-page h1{font-size:clamp(2.05rem,1.5rem + 1.9vw,3.3rem);line-height:1.08} .digibro-page h2{font-size:clamp(1.55rem,1.25rem + 1.15vw,2.25rem)} .digibro-page h3{font-size:clamp(1.02rem,.97rem + .25vw,1.16rem);letter-spacing:-.015em} .digibro-page h4{font-size:.95rem} .lede{color:var(--body);font-size:clamp(1rem,.97rem + .22vw,1.12rem);max-width:60ch} .dark .lede{color:var(--body-dark)} .eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-deep);background:var(--accent-soft);padding:.35rem .65rem;border-radius:999px;margin-bottom:1rem} .dark .eyebrow{color:#fff;background:rgba(255,255,255,.12)} .wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto} .sec{padding-block:var(--sec)} .dark{background:var(--ink);color:#fff} .tint{background:var(--paper-2)} .head{max-width:66ch;margin-bottom:clamp(1.9rem,3.5vw,2.75rem)} .head.center{margin-inline:auto;text-align:center} .head p{margin-top:.85rem} .head.center .lede{margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:.5rem;top:-100px;z-index:300;background:var(--blue);color:#fff;padding:.7rem 1rem;border-radius:var(--r-sm);font-weight:700} .skip:focus{top:.5rem} .digibro-page :focus-visible,#hdr :focus-visible{outline:3px solid var(--accent);outline-offset:2px} .dark :focus-visible{outline-color:#fff} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:.94rem; padding:.8rem 1.35rem;min-height:48px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer; transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s} .btn:hover{background:var(--blue-deep);box-shadow:0 8px 20px rgba(6,0,240,.22);transform:translateY(-1px);color:#fff} .btn:active{transform:none} .btn-accent{background:var(--accent)} .btn-accent:hover{background:var(--accent-deep);box-shadow:0 8px 20px rgba(10,159,110,.26)} .btn-outline{background:transparent;color:var(--blue);border-color:#C9C6FF} .btn-outline:hover{background:var(--blue-soft);color:var(--blue-deep);box-shadow:none} .btn-soft{background:var(--paper-3);color:var(--ink);border-color:transparent} .btn-soft:hover{background:#E4E7ED;box-shadow:none;color:var(--ink)} .dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.35)} .dark .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff} .btn-sm{padding:.55rem 1rem;min-height:42px;font-size:.87rem} .btn-lg{padding:.95rem 1.7rem;min-height:54px;font-size:1rem} .btns{display:flex;flex-wrap:wrap;gap:.7rem} .tlink{display:inline-flex;align-items:center;gap:.35rem;color:var(--blue);font-weight:600;font-size:.88rem;text-decoration:none} .tlink::after{content:"\2192";transition:transform .18s var(--ease)} .tlink:hover::after{transform:translateX(3px)} /* header */ .top{background:var(--ink);color:#fff;font-size:.8rem;text-align:center;padding:.55rem var(--pad)} .top a{color:#8CE8C4;font-weight:600} #hdr{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .admin-bar #hdr{top:32px} @media (max-width:782px){.admin-bar #hdr{top:46px}} #hdr .nav{display:flex;align-items:center;gap:1rem;min-height:70px} .brand{display:flex;align-items:center;text-decoration:none;font-weight:700;color:var(--ink)} /* the Digibro lockup is a two-line mark, so it needs more height than a single-line wordmark would at the same optical size */ #hdr .brand img{height:40px;width:auto} /* #hdr ul in the reset above outranks a bare .mainnav rule, so the auto margin that pushes the nav to the right has to match it */ #hdr .mainnav{display:flex;align-items:center;gap:.1rem;margin-left:auto} .mainnav{display:flex;align-items:center;gap:.1rem;margin-left:auto} .mainnav>li{position:relative} .mainnav>li>a{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer; color:#2C2C38;text-decoration:none;font-weight:600;font-size:.9rem;padding:.6rem .7rem;border-radius:var(--r-sm)} .mainnav>li>a:hover,.mainnav>li.open>a,.mainnav>li.current-menu-item>a,.mainnav>li.current-menu-ancestor>a{color:var(--blue);background:var(--blue-soft)} .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)} .mainnav>li.open .caret{transform:rotate(-135deg) translateY(-2px)} .mainnav .sub{position:absolute;left:0;top:calc(100% + .4rem);min-width:262px;background:#fff; border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.45rem; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;z-index:130} .mainnav li.open>.sub{opacity:1;visibility:visible;transform:none} .mainnav .sub a{display:block;padding:.6rem .7rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600; color:#2C2C38;text-decoration:none} .mainnav .sub a:hover{background:var(--blue-soft);color:var(--blue)} .nav-side{display:flex;align-items:center;gap:.55rem;margin-left:.7rem} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);width:46px;height:46px; align-items:center;justify-content:center;cursor:pointer;border-radius:var(--r-sm)} .burger i{display:block;width:19px;height:2px;background:var(--ink);position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink)} .burger i::before{top:-6px}.burger i::after{top:6px} @media (max-width:1080px){#hdr .mainnav,.mainnav,.nav-side{display:none}.burger{display:flex}} /* drawer */ #drawer{position:fixed;inset:0;z-index:140;background:#fff;padding:4.6rem var(--pad) 3rem;display:none;overflow-y:auto} #drawer[data-open="true"]{display:block} #drawer .d-x{position:absolute;top:1rem;right:var(--pad);width:46px;height:46px;background:none;border:1px solid var(--line); font-size:1.4rem;cursor:pointer;border-radius:var(--r-sm)} #drawer .d-group>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0; border-bottom:1px solid var(--line);padding:.95rem 0;font-size:1.05rem;font-weight:700;cursor:pointer;text-align:left} #drawer .d-group>div{display:none;padding:.4rem 0 .9rem} #drawer .d-group[data-open="true"]>div{display:block} #drawer .d-group a{display:block;padding:.45rem 0;color:var(--body);text-decoration:none;font-size:.95rem} #drawer>a{display:block;padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:700;text-decoration:none} #drawer .btn{width:100%;margin-top:1.3rem} /* hero */ .hero{background:linear-gradient(180deg,#F7F8FF 0%,#fff 72%);padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2rem,4vw,3.25rem); border-bottom:1px solid var(--line)} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center} @media (max-width:940px){.hero-grid{grid-template-columns:1fr}} .hero h1 span{color:var(--blue)} .hero .lede{margin:1.05rem 0 1.6rem} .quickform{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem;max-width:520px} .quickform input{flex:1 1 240px;font:inherit;font-size:.95rem;padding:.8rem .95rem;min-height:48px; border:1px solid var(--line);border-radius:var(--r-sm);background:#fff} .quickform input:focus{border-color:var(--blue);outline:2px solid var(--blue-soft-2);outline-offset:0} .microcopy{font-size:.83rem;color:var(--grey)} .hero-trust{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)} .hero-trust li{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--body)} .hero-trust svg{width:17px;height:17px;color:var(--accent)} .media-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .media-card .vid-frame{position:relative;aspect-ratio:16/9;background:#0B0B12} .media-card .cap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-top:1px solid var(--line)} .media-card .cap b{font-size:.93rem} .media-card .cap span{font-size:.8rem;color:var(--grey);display:block} .vid-frame img,.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .vid-play{position:absolute;inset:0;width:100%;height:100%;background:rgba(11,11,18,.18);border:0;cursor:pointer;display:grid;place-items:center;transition:background .2s} .vid-play:hover{background:rgba(11,11,18,.32)} .vid-play .disc{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s var(--ease)} .vid-play:hover .disc{transform:scale(1.07)} .vid-play .disc svg{width:24px;height:24px;margin-left:3px} /* strip */ .strip{border-bottom:1px solid var(--line);background:#fff} .strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;padding-block:1.1rem} .strip b{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)} .strip li{font-size:.9rem;font-weight:600;color:#33333F} /* cards */ .grid{display:grid;gap:1.05rem} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem; display:flex;flex-direction:column;gap:.6rem;height:100%; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#CFCFE0} .card p{color:var(--body);font-size:.94rem} .dark .card{background:rgba(255,255,255,.05);border-color:var(--line-dark)} .dark .card p{color:var(--body-dark)} .ic{width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:.3rem} .ic svg{width:21px;height:21px} .ic.green{background:var(--accent-soft);color:var(--accent-deep)} .card .tags{margin-top:auto;padding-top:.85rem;font-size:.78rem;color:var(--grey);font-weight:500} .card .tlink{margin-top:auto;padding-top:.85rem} .num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff; font-size:.85rem;font-weight:700;letter-spacing:.02em;margin-bottom:.4rem} .num.g{background:var(--accent)} .dark .num{background:var(--accent)} /* tiles */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem} @media (max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}} @media (max-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}} .tile{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:.85rem .9rem;font-size:.87rem;font-weight:600;transition:border-color .18s,background .18s} .tile:hover{border-color:var(--blue);background:var(--blue-soft)} .tile svg{width:17px;height:17px;color:var(--accent-deep);flex:0 0 auto} /* work */ .work{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .work:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .work-img{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)} .work-img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)} .work:hover .work-img img{transform:scale(1.04)} .work-cat{position:absolute;left:.7rem;top:.7rem;background:#fff;color:var(--ink);font-size:.7rem;font-weight:700; padding:.3rem .6rem;border-radius:999px;box-shadow:var(--shadow)} .work-b{padding:1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .work-b dl{margin:0;display:grid;gap:.3rem} .work-b dt{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .work-b dd{margin:0;font-size:.91rem;color:var(--body)} .filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem} .filters button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;min-height:42px; font-weight:600;font-size:.86rem;cursor:pointer;transition:background .18s,color .18s,border-color .18s} .filters button:hover{border-color:var(--blue);color:var(--blue)} .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} /* video grid */ .vid{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .vid:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .vid .vid-frame{aspect-ratio:16/9;position:relative;background:#0B0B12} .vid-b{padding:1rem 1.1rem} .vid-b h3{font-size:.98rem} .vid-b p{font-size:.83rem;color:var(--grey);margin-top:.25rem} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem} @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.steps{grid-template-columns:1fr}} /* audit */ .audit{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.6rem,4vw,3rem);align-items:start} @media (max-width:900px){.audit{grid-template-columns:1fr}} .checklist{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.3rem} @media (max-width:520px){.checklist{grid-template-columns:1fr}} .checklist li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--body)} .checklist svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto} form.lead{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2rem);display:grid;gap:.9rem} .step-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .step-count{font-size:.75rem;font-weight:600;color:var(--grey)} .bar{height:5px;background:var(--paper-3);border-radius:999px;overflow:hidden} .bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .35s var(--ease)} .fstep{display:grid;gap:.9rem} .f2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} @media (max-width:560px){.f2{grid-template-columns:1fr}} .field{display:grid;gap:.3rem} .field label{font-size:.82rem;font-weight:600} .field input,.field select,.field textarea{font:inherit;font-size:.95rem;padding:.75rem .85rem;border:1px solid var(--line); border-radius:var(--r-sm);background:#fff;color:var(--ink);min-height:48px;width:100%} .field textarea{min-height:96px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:2px solid var(--blue-soft-2)} .form-msg{font-weight:600;font-size:.89rem;padding:.7rem .9rem;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-deep);display:none} .form-msg[data-show="true"]{display:block} /* plans */ .plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;display:flex;flex-direction:column;gap:.6rem; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .plan.featured{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .plan .who{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)} .plan h3{font-size:1.35rem} .plan p{color:var(--body);font-size:.93rem} .ticks{display:grid;gap:.45rem;margin:.7rem 0 1.1rem} .ticks li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--body)} .ticks li::before{content:"";position:absolute;left:0;top:.36em;width:16px;height:16px;border-radius:50%;background:var(--accent-soft)} .ticks li::after{content:"";position:absolute;left:5px;top:.62em;width:5px;height:8px;border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep);transform:rotate(40deg)} .dark .ticks li{color:var(--body-dark)} .dark .ticks li::before{background:rgba(10,159,110,.25)} .dark .ticks li::after{border-color:#6EE7B7} .plan .btn{margin-top:auto} /* founder */ .founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,4vw,3rem);align-items:center} @media (max-width:860px){.founder{grid-template-columns:1fr}} .founder-card{background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.2rem);display:grid;gap:.45rem} .founder-card img{width:80px;margin-bottom:.5rem} .founder-card .role{font-size:.78rem;font-weight:600;opacity:.85} .skills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem} .skills li{border:1px solid var(--line-dark);border-radius:999px;padding:.4rem .8rem;font-size:.83rem;font-weight:500} /* posts */ .post{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem; text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .post:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .post .cat{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)} .post h3{font-size:1.04rem;line-height:1.35} .post p{font-size:.9rem;color:var(--body)} .post .tlink{margin-top:auto;padding-top:.7rem} /* faq */ .faq{max-width:860px;margin-inline:auto} .faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.6rem;background:#fff;transition:border-color .18s} .faq details[open]{border-color:#CFCFE0;box-shadow:var(--shadow)} .faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;font-weight:600;font-size:.99rem;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--blue)} .faq summary::after{content:"";position:absolute;right:1.2rem;top:1.35rem;width:9px;height:9px; border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .2s} .faq details[open] summary::after{transform:rotate(-135deg);top:1.5rem} .faq .ans{padding:0 1.2rem 1.15rem;color:var(--body);font-size:.95rem;max-width:74ch} /* final cta */ .final{background:var(--ink);color:#fff;text-align:center} .final .lede{color:var(--body-dark);margin-inline:auto} .final .eyebrow{color:#fff;background:rgba(255,255,255,.12)} .final .btn-outline{color:#fff;border-color:rgba(255,255,255,.4)} .final .btn-outline:hover{background:rgba(255,255,255,.14);color:#fff} .final :focus-visible{outline-color:#fff} .final .btns{justify-content:center;margin-top:1.6rem} /* footer */ .site-foot{background:#fff;border-top:1px solid var(--line);padding-block:clamp(2.6rem,5vw,3.75rem) 0} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:1.8rem} @media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.foot-grid{grid-template-columns:1fr}} .site-foot h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:.9rem;font-weight:700} .site-foot ul{display:grid;gap:.5rem} .site-foot a{color:var(--body);text-decoration:none;font-size:.91rem} .site-foot a:hover{color:var(--blue)} .site-foot .btn{color:#fff} .foot-brand img{width:104px;margin-bottom:.9rem} .foot-brand p{color:var(--body);font-size:.91rem;max-width:34ch;margin:0} .foot-fw{font-size:.78rem;font-weight:600;color:var(--accent-deep);margin-top:.9rem} .social{display:flex;gap:.5rem;margin-top:1rem} .social a{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;color:var(--body)} .social a:hover{border-color:var(--blue);color:var(--blue)} .social svg{width:17px;height:17px} .legal{border-top:1px solid var(--line);margin-top:2.4rem;padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem; justify-content:space-between;font-size:.84rem;color:var(--grey)} /* mobile sticky cta removed 2026-09-12 (was .mobile-cta: Free audit + WhatsApp) */ .mobile-cta{display:none!important} /* reveal */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} #progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:200;transition:width .1s linear} /* ============================================================ WordPress / Astra / Elementor integration layer Only neutralises theme + builder wrappers so the v5 rules above stay in charge. No new design decisions here. ============================================================ */ .ast-container,.site-content .ast-container{max-width:none;padding:0;margin:0} #content.site-content,#primary,.entry-content{margin:0;padding:0;max-width:none;width:100%} .ast-separate-container #primary,.ast-plain-container #primary{margin:0;padding:0} .ast-separate-container .ast-article-single{padding:0;background:none;border:0} .page .entry-header,.ast-single-post .entry-header{display:none} body.elementor-page .site-content>.ast-container{max-width:none} .digibro-page .e-con,.digibro-page .e-con-inner{max-width:none;width:100%;padding:0;margin:0;display:block; --container-default-padding-top:0px;--container-default-padding-right:0px; --container-default-padding-bottom:0px;--container-default-padding-left:0px} /* the reset above also zeroes the v5 section rhythm - restore it at the same weight, values unchanged from .sec / .hero */ .digibro-page .e-con.sec{padding-block:var(--sec)} .digibro-page .e-con.hero{padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2rem,4vw,3.25rem)} /* the inner container IS the .wrap - it keeps the 1180px measure */ .digibro-page .e-con.wrap,.digibro-page .e-con.wrap>.e-con-inner{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto} /* two .wrap variants are themselves grids in v5 */ .digibro-page .e-con.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center} .digibro-page .e-con.audit{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.6rem,4vw,3rem);align-items:start} @media (max-width:940px){.digibro-page .e-con.hero-grid{grid-template-columns:1fr}} @media (max-width:900px){.digibro-page .e-con.audit{grid-template-columns:1fr}} .digibro-page .elementor-widget-html>.elementor-widget-container{display:contents} /* Inside the two grid containers the HTML widget itself must dissolve too, otherwise the widget is the only grid item and column 2 stays empty. */ .digibro-page .e-con.hero-grid>.elementor-widget-html, .digibro-page .e-con.audit>.elementor-widget-html{display:contents} .digibro-page .elementor-widget{width:100%} .digibro-page .elementor-element{--widgets-spacing:0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px} .site-footer,.ast-small-footer,footer.site-footer{display:none!important} .ast-main-header-wrap,#masthead>.ast-main-header-wrap,.site-header{display:none!important} /* The Elementor kit writes body colour and link colour on .elementor-kit-14, which outranks a bare body{} rule. These re-assert the v5 values at the same weight without !important. Colours still come from Global Colors. */ body.digibro-page{color:var(--ink);font-family:var(--font);background:var(--paper)} body.digibro-page a{color:inherit;text-decoration:none} /* Astra's .ast-single-post .entry-content a underlines every link on singular views and outranks the rule above - match its weight. */ body.digibro-page .entry-content a,body.digibro-page .site-foot a,body.digibro-page #hdr a{text-decoration:none} body.digibro-page .lede{color:var(--body)} body.digibro-page .dark .lede,body.digibro-page .final .lede{color:var(--body-dark)} body.digibro-page .card p,body.digibro-page .plan p,body.digibro-page .post p{color:var(--body)} body.digibro-page h1,body.digibro-page h2,body.digibro-page h3,body.digibro-page h4{color:inherit} body.digibro-page .btn{color:#fff} body.digibro-page .btn-outline{color:var(--blue)} body.digibro-page .btn-soft{color:var(--ink)} body.digibro-page .dark .btn-outline,body.digibro-page .final .btn-outline{color:#fff} body.digibro-page .tlink,body.digibro-page .mainnav .sub a:hover{color:var(--blue)} body.digibro-page .site-foot a{color:var(--body)} body.digibro-page .site-foot a:hover{color:var(--blue)} /* the footer's CTA is a button, not a footer link - keep it white on blue */ body.digibro-page .site-foot a.btn,body.digibro-page .site-foot a.btn:hover{color:#fff} body.digibro-page .site-foot a.btn-outline{color:var(--blue)} /* Astra's scroll-to-top bubble is not part of the v5 design */ #ast-scroll-top,.ast-scroll-top-icon,#ast-scroll-top-wrap{display:none!important} /* Astra and the Elementor kit both style bare