/* ========================================================================= Kampala Web Design - main stylesheet Palette: deep green (trust) + warm orange (action) + sand + warm paper. Type: Archivo (headings) / Karla (body) ========================================================================= */ :root{ --green:#0B6B57; --green-dark:#07503F; --green-deep:#05372C; --green-tint:#E7F1ED; --orange:#EE6C2B; --orange-dark:#D4571A; --orange-tint:#FDEDE3; /* The bright orange is for shapes, rules and accents. White text on it is only 3.1:1, which is hard to read in daylight on a phone. Buttons use the deeper --orange-btn (4.8:1 with white), and orange used as text on a light background uses --orange-ink (5:1 or better). */ --orange-btn:#C74710; --orange-btn-dark:#A63A0A; --orange-ink:#B23C08; --sand:#F4E7D3; --sand-dark:#E8D6BB; --ink:#14181B; --ink-2:#3A444B; --ink-3:#55636D; --paper:#FBF8F3; --white:#FFFFFF; --line:#E3DCD0; --line-strong:#CFC5B4; --ok:#1E7A4C; --wrap:1180px; --wrap-narrow:820px; --radius:6px; --radius-lg:10px; --shadow-sm:0 1px 2px rgba(20,24,27,.06), 0 2px 6px rgba(20,24,27,.05); --shadow-md:0 2px 4px rgba(20,24,27,.05), 0 12px 28px rgba(20,24,27,.08); --shadow-lg:0 20px 50px rgba(5,55,44,.16); --font-head:"Archivo","Segoe UI",Arial,sans-serif; --font-body:"Karla","Segoe UI",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-body);font-size:1.0625rem;line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--green);text-decoration:none} a:hover{color:var(--orange-ink)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--orange);outline-offset:2px;border-radius:2px; } h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink);margin:0 0 .6em} h1{font-size:clamp(2.1rem,1.3rem + 3.2vw,3.4rem)} h2{font-size:clamp(1.65rem,1.15rem + 2vw,2.5rem)} h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);font-weight:700} h4{font-size:1.15rem;font-weight:700;letter-spacing:-.01em} p{margin:0 0 1.15em} ul,ol{margin:0 0 1.2em;padding-left:1.15em} li{margin-bottom:.5em} strong,b{font-weight:700;color:var(--ink)} hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} ::selection{background:var(--orange);color:#fff} /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:20px} .section{padding:72px 0} .section-sm{padding:48px 0} .section-lg{padding:96px 0} .bg-paper{background:var(--paper)} .bg-white{background:var(--white)} .bg-sand{background:var(--sand)} .bg-tint{background:var(--green-tint)} .bg-green{background:var(--green-deep);color:#EAF3F0} .bg-green h2,.bg-green h3,.bg-green h4{color:#fff} .bg-green p,.bg-green li{color:#CFE2DC} .bg-green a{color:#fff} .bg-green strong,.bg-green b{color:#fff} /* Light surfaces that sit inside a dark section: put ordinary dark text back. Without this every heading, paragraph, tick and pill inside a white card on a green section inherits the section's near-white text, and disappears. */ .bg-green .card,.bg-green .price-card,.bg-green .addon-table,.bg-green .compare,.bg-green .callout, .bg-green .result,.bg-green .form-shell,.bg-green .quote-block,.bg-green .toc{color:var(--ink-2)} .bg-green .card h2,.bg-green .card h3,.bg-green .card h4,.bg-green .price-card h3,.bg-green .callout h4, .bg-green .quote-block h4,.bg-green .card strong,.bg-green .price-card strong,.bg-green .addon-table td, .bg-green .compare td,.bg-green .compare tbody th,.bg-green .callout strong{color:var(--ink)} .bg-green .card p,.bg-green .card li,.bg-green .price-card p,.bg-green .price-card li, .bg-green .callout p,.bg-green .callout li,.bg-green .quote-block p{color:var(--ink-2)} .bg-green .card .muted,.bg-green .card p.muted{color:var(--ink-3)} .bg-green .card a:not(.btn),.bg-green .callout a:not(.btn){color:var(--green)} .bg-green .card .ticks li{color:var(--ink-2)} .bg-green .card .ticks li svg{stroke:var(--green)} .bg-green .card .pill{background:#fff;border-color:var(--line);color:var(--ink-2)} .bg-green a.btn-wa{color:#07301A} .center{text-align:center} .grid{display:grid;gap:24px} /* Grid and flex children default to min-width:auto, so a single wide child (a table, a long word) stretches the whole column - and on a phone the whole page - past the screen. Let them shrink and let the wide thing scroll inside its own box. */ .grid>*,.split>*,.split-wide>*,.hero-grid>*,.footer-grid>*,.cta-inner>*{min-width:0} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .split-wide{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} @media(max-width:960px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} .split,.split-wide{grid-template-columns:1fr;gap:36px} .section{padding:56px 0} .section-lg{padding:64px 0} } @media(max-width:620px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} .section{padding:46px 0} } /* ---------- shared bits ---------- */ .eyebrow{ display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.78rem; letter-spacing:.14em;text-transform:uppercase;color:var(--green); background:var(--green-tint);border:1px solid #C8DED7;padding:6px 12px;border-radius:100px;margin-bottom:18px; } .bg-green .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#BFE3D8} .bg-sand .eyebrow{background:#fff;border-color:var(--sand-dark)} .lead{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.6;color:var(--ink-2)} .muted{color:var(--ink-3)} .section-head{max-width:760px;margin-bottom:44px} .section-head.center{margin-inline:auto} .rule{width:64px;height:4px;background:var(--orange);border-radius:2px;margin:0 0 22px} .center .rule{margin-inline:auto} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:-.01em; padding:15px 26px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; text-align:center;line-height:1.2; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--orange-btn);color:#fff;box-shadow:0 4px 0 var(--orange-btn-dark)} .btn-primary:hover{background:var(--orange-btn-dark);color:#fff;box-shadow:0 6px 0 #7F2D06} .btn-green{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)} .btn-green:hover{background:var(--green-dark);color:#fff;box-shadow:0 6px 0 var(--green-deep)} .btn-wa{background:#25D366;color:#07301A;box-shadow:0 4px 0 #128C3E} .btn-wa:hover{background:#1EBE5A;color:#07301A} .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-outline:hover{background:var(--ink);color:#fff} .bg-green .btn-outline,.cta-band .btn-outline,.page-hero .btn-outline,.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.55)} .bg-green .btn-outline:hover,.cta-band .btn-outline:hover,.page-hero .btn-outline:hover,.hero .btn-outline:hover{background:#fff;color:var(--green-deep)} .btn-lg{padding:18px 34px;font-size:1.08rem} .btn-sm{padding:10px 18px;font-size:.92rem} .btn-block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .center .btn-row{justify-content:center} .btn .ico{width:19px;height:19px;flex:none;fill:currentColor} /* ---------- header ---------- */ .topbar{background:var(--green-deep);color:#CFE2DC;font-size:.9rem} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap} .topbar a{color:#fff;text-decoration:none;font-weight:600} .topbar a:hover{color:#FFC9A8} .topbar-left{display:flex;gap:20px;align-items:center;flex-wrap:wrap} @media(max-width:760px){.topbar{display:none}} .site-header{ position:sticky;top:0;z-index:80;background:rgba(251,248,243,.97); border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(8px); } .site-header.is-stuck{box-shadow:var(--shadow-sm)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;font-size:1.28rem;color:var(--ink);letter-spacing:-.03em} .brand:hover{color:var(--ink)} .brand-mark{ width:38px;height:38px;flex:none;border-radius:8px;background:var(--green);color:#fff; display:grid;place-items:center;font-size:1.02rem;font-weight:800;letter-spacing:-.04em; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); } .brand .accent{color:#E4581A} /* On the light header the brighter orange is only 3.5:1; use the button orange there. */ .site-header .brand .accent,.mobile-nav .brand .accent{color:var(--orange-btn)} /* The name is three words. Set it as a deliberate two-line wordmark - "Kampala" over "Web Design" - so it never breaks wherever it happens to run out of room. Stacked, it is also narrower than a one-line name, which leaves the menu more space on desktop. */ .brand > span:last-child{line-height:1.04;white-space:nowrap} .brand .accent{display:block} .brand img{max-height:46px;width:auto} .nav-main{display:flex;align-items:center;gap:6px} .nav-main ul{display:flex;list-style:none;margin:0;padding:0;gap:2px;align-items:center} .nav-main li{margin:0;position:relative} .nav-main a{ display:block;padding:10px 13px;border-radius:var(--radius);color:var(--ink-2); font-weight:600;font-size:.98rem; } .nav-main a{transition:background .15s ease,color .15s ease,box-shadow .15s ease} /* Hover: green tint plus an orange bar underneath, so it is easy to see which item the pointer is on. The page you are on keeps a green bar. */ .nav-main a:hover{background:var(--green-tint);color:var(--green-dark);box-shadow:inset 0 -3px 0 var(--orange)} .nav-main .current-menu-item>a,.nav-main .current_page_item>a,.nav-main .current-menu-ancestor>a{color:var(--green);background:var(--green-tint);box-shadow:inset 0 -3px 0 var(--green)} .nav-main .current-menu-item>a:hover,.nav-main .current_page_item>a:hover,.nav-main .current-menu-ancestor>a:hover{box-shadow:inset 0 -3px 0 var(--orange)} /* Keep the parent lit while the pointer is inside its dropdown. */ .nav-main li:hover>a,.nav-main li:focus-within>a{background:var(--green-tint);color:var(--green-dark)} .nav-main .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)} .nav-main .sub-menu{ display:none;position:absolute;top:100%;left:0;min-width:250px;background:#fff; border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:8px;flex-direction:column; } .nav-main li:hover>.sub-menu,.nav-main li:focus-within>.sub-menu{display:flex} .nav-main .sub-menu a{padding:10px 12px;font-size:.95rem} .nav-main .sub-menu a:hover,.nav-main .sub-menu a:focus-visible{box-shadow:inset 4px 0 0 var(--orange)} .nav-main .sub-menu .current-menu-item>a{box-shadow:inset 4px 0 0 var(--green)} .header-cta{display:flex;align-items:center;gap:10px} /* The top bar already shows the phone number and WhatsApp on every desktop page, so a Call button in the header only costs the menu its space. */ .header-cta .btn-call{display:none} /* Never break a menu label across two lines - it doubles the header height. */ .nav-main a{white-space:nowrap} /* The full menu the setup wizard builds (eight items, nine once Our Work exists) needs about 1,120px on one line, so below 1180px use the Menu button instead of letting the links wrap onto a second row. */ @media(max-width:1180px){ .nav-main{display:none} .header-cta .btn{padding:11px 16px;font-size:.94rem} } /* Small phones: keep the header to one tidy line. */ @media(max-width:520px){ .header-inner{min-height:64px;gap:10px} .brand{font-size:1.08rem;gap:8px} .brand-mark{width:32px;height:32px;font-size:.9rem} .header-cta{gap:7px} .header-cta .btn{padding:10px 12px;font-size:.86rem;white-space:nowrap} .nav-toggle{padding:10px 12px;font-size:.86rem} } @media(max-width:430px){ .brand{font-size:1rem} .brand-mark{width:30px;height:30px;font-size:.85rem} .header-cta .btn{padding:10px 11px;font-size:.83rem} .nav-toggle{padding:10px 11px;font-size:.83rem} } /* Below this the phone is too narrow for three things - the sticky bottom bar already carries "Free quote", so drop it from the header rather than wrap. 400px covers the common 360-393px Android widths, where the logo, the quote button and the menu button measured 20-40px wider than the screen. */ @media(max-width:400px){ .header-cta .btn-primary{display:none} } .nav-toggle{ display:none;align-items:center;gap:9px;background:var(--ink);color:#fff;border:0; font-family:var(--font-head);font-weight:700;padding:11px 15px;border-radius:var(--radius);cursor:pointer;font-size:.95rem; } @media(max-width:1180px){.nav-toggle{display:inline-flex}} .nav-toggle .bars{display:block;width:18px;height:2px;background:#fff;position:relative} .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff} .nav-toggle .bars::before{top:-6px} .nav-toggle .bars::after{top:6px} .mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:12px 0 22px} .mobile-nav.is-open{ display:block; /* The menu has a dozen-plus links once the dropdowns are open, so on a phone it is taller than the screen. The header is sticky, which means the page cannot scroll the bottom of it into view - so the menu scrolls itself. main.js fine-tunes the height to the real visible area; this is the no-JS-yet fallback. */ max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; /* room at the bottom so the last links clear the fixed Call / WhatsApp bar */ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); } /* Stop the page scrolling behind an open menu, and dim it so it is clear the menu is what you are looking at. Tapping the dimmed part closes it (main.js). */ body.menu-open{overflow:hidden} body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(5,55,44,.5);z-index:70} .mobile-close{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none} .mobile-close:hover{background:#000;color:#fff} /* The Menu button turns into an X while the menu is open. */ /* Menu button: goes green under the mouse, darker while pressed, and orange while the menu is open so it is obvious that this same button closes it. */ .nav-toggle:active{background:var(--green-dark);transform:translateY(1px)} .nav-toggle[aria-expanded="true"]{background:var(--orange-btn)} .nav-toggle[aria-expanded="true"]:active{background:var(--orange-btn-dark)} @media(hover:hover){ .nav-toggle:hover{background:var(--green)} .nav-toggle[aria-expanded="true"]:hover{background:var(--orange-btn-dark)} } .mobile-close:active{background:#000;transform:translateY(1px)} .nav-toggle[aria-expanded="true"] .bars{background:transparent} .nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)} .mobile-nav ul{list-style:none;margin:0;padding:0} .mobile-nav li{margin:0;border-bottom:1px solid var(--line)} .mobile-nav a{display:block;padding:14px 4px;font-weight:600;color:var(--ink)} /* Each link is a full-width tap target that lights up under a finger (:active) or a mouse (:hover). The side margin lets the highlight reach past the text without moving the text itself. The buttons at the bottom are not in a list, so they are untouched. */ .mobile-nav li>a{padding-left:12px;padding-right:12px;margin:0 -8px;border-radius:8px;transition:background .15s ease,color .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent} .mobile-nav .sub-menu{padding-left:16px} .mobile-nav .sub-menu a{font-weight:500;color:var(--ink-2);font-size:.96rem;padding-top:11px;padding-bottom:11px} .mobile-nav li>a:active{background:var(--green-tint);color:var(--green-dark);box-shadow:inset 4px 0 0 var(--orange)} @media(hover:hover){.mobile-nav li>a:hover{background:var(--green-tint);color:var(--green-dark);box-shadow:inset 4px 0 0 var(--orange)}} .mobile-nav .current-menu-item>a,.mobile-nav .current_page_item>a{color:var(--green);background:var(--green-tint);box-shadow:inset 4px 0 0 var(--green)} .mobile-nav .btn-row{margin-top:18px} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--green-deep);color:#fff;padding:84px 0 92px} .hero::before{ content:"";position:absolute;inset:0;opacity:.55; background: radial-gradient(760px 420px at 82% 12%, rgba(238,108,43,.42), transparent 62%), radial-gradient(620px 480px at 8% 88%, rgba(11,107,87,.85), transparent 66%); } .hero::after{ content:"";position:absolute;inset:0;opacity:.14; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:52px 52px; } .hero>*{position:relative;z-index:2} /* The city photograph behind the home heading: grey-toned and faded so it adds depth without ever fighting the text. The glow and grid layers sit above it. */ .hero::before,.hero::after{z-index:1} .hero>.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.27; mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.18),#000 75%);mask-image:linear-gradient(90deg,rgba(0,0,0,.18),#000 75%)} .hero h1{color:#fff;max-width:17ch} .hero h1 em{font-style:normal;color:#FFB07C} .hero .lead{color:#CFE2DC;max-width:56ch;font-size:1.18rem} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:56px 0 64px}} .hero-points{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:11px} .hero-points li{display:flex;gap:11px;align-items:flex-start;color:#DCEAE6;margin:0;font-size:1.03rem} .hero-points .tick{ flex:none;width:22px;height:22px;border-radius:50%;background:rgba(37,211,102,.18); border:1px solid rgba(37,211,102,.55);display:grid;place-items:center;margin-top:3px; } .hero-points .tick::after{content:"";width:6px;height:10px;border-right:2px solid #6EE79B;border-bottom:2px solid #6EE79B;transform:rotate(42deg) translateY(-1px)} .hero-note{margin-top:20px;font-size:.95rem;color:#C9DDD7} .hero-card{ background:#fff;border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.5);color:var(--ink); } .hero-card h2{font-size:1.32rem;margin-bottom:6px} .hero-card .price-line{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--green);letter-spacing:-.03em} .hero-card ul{list-style:none;padding:0;margin:16px 0 20px} .hero-card li{display:flex;gap:10px;font-size:.98rem;color:var(--ink-2);margin-bottom:9px} .hero-card li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--orange);margin-top:9px} .hero-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:6px solid rgba(255,255,255,.14)} .hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover} /* ---------- trust strip ---------- */ .trust{background:var(--white);border-bottom:1px solid var(--line)} .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .trust-item{padding:26px 22px;border-right:1px solid var(--line)} .trust-item:last-child{border-right:0} .trust-item .num{font-family:var(--font-head);font-weight:800;font-size:1.7rem;color:var(--green);letter-spacing:-.03em;display:block} .trust-item .num .from{font-size:.9rem;font-weight:700;letter-spacing:0;color:var(--ink-3);margin-right:2px} .trust-item p{margin:2px 0 0;font-size:.95rem;color:var(--ink-3)} @media(max-width:860px){ .trust .wrap{grid-template-columns:1fr 1fr} .trust-item{border-bottom:1px solid var(--line)} .trust-item:nth-child(2n){border-right:0} } /* ---------- cards ---------- */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px; transition:transform .15s ease,box-shadow .18s ease,border-color .15s ease;height:100%; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)} .card h3{margin-bottom:10px} .card p:last-child{margin-bottom:0} .card-link{display:block;color:inherit} .card-link:hover{color:inherit} .card .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;color:var(--green);margin-top:14px} .card .more::after{content:"\2192";transition:transform .15s ease} .card:hover .more::after{transform:translateX(4px)} .card-icon{ width:52px;height:52px;border-radius:10px;background:var(--green-tint);color:var(--green-dark); display:grid;place-items:center;margin-bottom:18px;border:1px solid #C8DED7; } .card-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8} .card-num{ font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--orange); border:2px solid var(--orange-tint);background:var(--orange-tint);width:38px;height:38px; display:grid;place-items:center;border-radius:8px;margin-bottom:16px; } /* ---------- pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} @media(max-width:960px){.price-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}} .price-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px 26px; display:flex;flex-direction:column;position:relative; } .price-card.featured{border:2px solid var(--green);box-shadow:var(--shadow-md)} .price-card .tag{ position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff; font-family:var(--font-head);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase; padding:6px 14px;border-radius:100px;white-space:nowrap; } .price-card h3{margin-bottom:4px} .price-card .who{color:var(--ink-3);font-size:.95rem;margin-bottom:18px} .price-amount{font-family:var(--font-head);font-weight:800;font-size:2.35rem;letter-spacing:-.035em;color:var(--ink);line-height:1.05} .price-amount .cur{font-size:1.05rem;color:var(--ink-3);font-weight:700;display:block;margin-bottom:2px} .price-card .pay{font-size:.9rem;color:var(--ink-3);margin:8px 0 20px} .price-card ul{list-style:none;padding:0;margin:0 0 24px;flex:1} .price-card li{display:flex;gap:10px;font-size:.97rem;color:var(--ink-2);margin-bottom:10px;line-height:1.5} .price-card li svg{flex:none;width:17px;height:17px;margin-top:4px;stroke:var(--green);fill:none;stroke-width:2.6} .price-card li.no{color:var(--ink-3)} .price-card li.no svg{stroke:var(--line-strong)} .addon-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .addon-table th,.addon-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:.98rem} .addon-table th{background:var(--green-tint);font-family:var(--font-head);font-weight:700;color:var(--green-deep);font-size:.92rem} .addon-table tr:last-child td{border-bottom:0} .addon-table td:last-child{text-align:right;font-weight:700;white-space:nowrap;font-family:var(--font-head)} /* On a phone a two-column table squeezes the description to one word per line and clips the price. Stack each row instead: the item, then its price beneath. */ @media(max-width:620px){ .addon-table,.addon-table tbody,.addon-table tr,.addon-table td{display:block;width:100%} .addon-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .addon-table tr{padding:14px 18px;border-bottom:1px solid var(--line)} .addon-table tr:last-child{border-bottom:0} .addon-table td{padding:0;border:0;text-align:left;white-space:normal} .addon-table td:last-child{text-align:left;white-space:normal;margin-top:5px;font-size:1.04rem;color:var(--green-dark)} } .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- process ---------- */ .step{display:grid;grid-template-columns:74px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)} .step:last-child{border-bottom:0} .step-num{ width:56px;height:56px;border-radius:12px;background:var(--green-deep);color:#fff;display:grid;place-items:center; font-family:var(--font-head);font-weight:800;font-size:1.35rem; } .step h3{margin-bottom:6px} .step p:last-child{margin-bottom:0} .step .when{display:inline-block;font-size:.85rem;font-weight:700;color:var(--orange-ink);background:var(--orange-tint);padding:3px 10px;border-radius:100px;margin-bottom:8px;font-family:var(--font-head)} @media(max-width:620px){.step{grid-template-columns:1fr;gap:14px}} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--ink);line-height:1.4; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:29px;width:11px;height:11px; border-right:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(45deg);transition:transform .18s ease; } .faq details[open] summary::after{transform:rotate(225deg);top:32px} .faq summary:hover{color:var(--green)} .faq .answer{padding:0 40px 24px 0;color:var(--ink-2)} .faq .answer p:last-child{margin-bottom:0} /* ---------- CTA band ---------- */ .cta-band{background:var(--green-deep);color:#fff;position:relative;overflow:hidden;padding:64px 0} .cta-band::before{ content:"";position:absolute;inset:0; background:radial-gradient(700px 340px at 88% 0%, rgba(238,108,43,.4), transparent 60%); } .cta-band>*{position:relative;z-index:2} .cta-band h2{color:#fff;margin-bottom:12px} .cta-band p{color:#CFE2DC;max-width:60ch} .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap} .cta-inner .btn-row{flex:none} @media(max-width:860px){.cta-inner{flex-direction:column;align-items:flex-start}} .cta-orange{background:var(--orange-btn)} .cta-orange::before{background:radial-gradient(700px 340px at 88% 0%, rgba(255,255,255,.28), transparent 60%)} .cta-orange p{color:#fff} .cta-orange .btn-primary{background:#fff;color:var(--orange-ink);box-shadow:0 4px 0 rgba(0,0,0,.22)} .cta-orange .btn-primary:hover{background:#FFF3EB;color:var(--orange-ink)} /* ---------- lists / callouts ---------- */ .ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px} .ticks li{display:flex;gap:12px;align-items:flex-start;margin:0;color:var(--ink-2)} .ticks li svg{flex:none;width:20px;height:20px;margin-top:4px;stroke:var(--green);fill:none;stroke-width:2.6} .bg-green .ticks li{color:#CFE2DC} .bg-green .ticks li svg{stroke:#6EE79B} .ticks-2{grid-template-columns:1fr 1fr;gap:12px 28px} @media(max-width:700px){.ticks-2{grid-template-columns:1fr}} .callout{ background:var(--sand);border-left:5px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0; padding:22px 24px;margin:26px 0; } .callout p:last-child{margin-bottom:0} .callout h4{margin-bottom:8px} .quote-block{ background:#fff;border:1px solid var(--line);border-left:5px solid var(--green); padding:26px;border-radius:0 var(--radius-lg) var(--radius-lg) 0; } .quote-block p{font-size:1.1rem;color:var(--ink-2);margin-bottom:12px} .quote-block cite{font-style:normal;font-weight:700;font-family:var(--font-head);color:var(--ink);font-size:.96rem} .compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;min-width:640px} .compare th,.compare td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:.97rem;vertical-align:top} .compare thead th{background:var(--green-deep);color:#fff;font-family:var(--font-head);font-size:.95rem} .compare tbody th{font-weight:700;color:var(--ink);width:34%} .compare .yes{color:var(--ok);font-weight:700} .compare .nope{color:var(--ink-3)} /* ---------- page header ---------- */ .page-hero{background:var(--green-deep);color:#fff;padding:60px 0 64px;position:relative;overflow:hidden} .page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 300px at 85% 10%,rgba(238,108,43,.34),transparent 62%)} .page-hero>*{position:relative;z-index:2} .page-hero h1{color:#fff;max-width:22ch;margin-bottom:14px} .page-hero .lead{color:#CFE2DC;max-width:64ch} .page-hero .btn-row{margin-top:26px} /* A page heading with a picture beside it. Stacks on a phone, picture under the words. */ .hero-split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center} .hero-media{position:relative;isolation:isolate;margin:0} .hero-media::before{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:20px;border:2px solid rgba(255,255,255,.2);z-index:-1} .hero-media img{display:block;width:100%;height:auto;border-radius:18px;background:#0D4A3D;box-shadow:0 26px 60px rgba(2,30,23,.5)} @media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:34px}.hero-media{max-width:560px}.hero-media::before{display:none}} .crumbs{font-size:.88rem;color:#9FC0B7;margin-bottom:16px} .crumbs a{color:#CFE2DC;text-decoration:none} .crumbs a:hover{color:#fff;text-decoration:underline} .crumbs .sep{margin:0 7px;opacity:.6} .crumbs-light{color:var(--ink-3)} .crumbs-light a{color:var(--green)} /* ---------- entry content ---------- */ .entry-content{font-size:1.08rem} .entry-content h2{margin-top:2em} .entry-content h3{margin-top:1.6em} .entry-content img{border-radius:var(--radius);margin:1.5em 0} .entry-content ul li::marker{color:var(--orange)} .entry-content blockquote{margin:1.6em 0;padding-left:22px;border-left:4px solid var(--orange);color:var(--ink-2);font-size:1.1rem} .entry-content table{width:100%;border-collapse:collapse;margin:1.5em 0} .entry-content th,.entry-content td{border:1px solid var(--line);padding:12px 14px;text-align:left} .entry-content th{background:var(--green-tint)} .toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:34px} .toc h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 12px} .toc ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .toc a{font-weight:600} /* ---------- forms / Contact Form 7 ---------- */ .form-shell{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:32px;box-shadow:var(--shadow-md); } .form-shell h2{font-size:1.5rem;margin-bottom:6px} .form-shell .form-intro{color:var(--ink-3);font-size:.98rem;margin-bottom:24px} @media(max-width:620px){.form-shell{padding:22px 18px}} .wpcf7 form{margin:0} .cf7-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:620px){.cf7-row{grid-template-columns:1fr}} .cf7-field{margin-bottom:18px;display:block} .cf7-field > label,.cf7-label{ display:block;font-family:var(--font-head);font-weight:700;font-size:.94rem; color:var(--ink);margin-bottom:7px; } .cf7-hint{display:block;font-size:.85rem;color:var(--ink-3);font-weight:400;margin:-2px 0 7px} .req{color:var(--orange-ink)} .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=url], .wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 select,.wpcf7 textarea{ width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink); background:var(--paper);border:2px solid var(--line-strong);border-radius:var(--radius); padding:13px 14px;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; } .wpcf7 textarea{min-height:140px;resize:vertical;line-height:1.6} .wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{ outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px var(--green-tint); } .wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:#9AA6AE} .wpcf7 select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361707A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:19px;padding-right:42px} .wpcf7 .wpcf7-list-item{display:block;margin:0 0 9px} .wpcf7 .wpcf7-list-item-label{font-size:.98rem;color:var(--ink-2);padding-left:8px} .wpcf7 input[type=checkbox],.wpcf7 input[type=radio]{width:18px;height:18px;accent-color:var(--green);vertical-align:-3px} .wpcf7 .grid-2 .wpcf7-list-item{display:inline-block;width:calc(50% - 12px);margin-right:8px;vertical-align:top} @media(max-width:560px){.wpcf7 .grid-2 .wpcf7-list-item{width:100%}} .wpcf7 input[type=submit],.wpcf7 button[type=submit]{ width:100%;background:var(--orange-btn);color:#fff;border:0;border-radius:var(--radius); font-family:var(--font-head);font-weight:800;font-size:1.08rem;padding:17px 26px;cursor:pointer; box-shadow:0 4px 0 var(--orange-btn-dark);transition:transform .12s ease,background .15s ease; } .wpcf7 input[type=submit]:hover{background:var(--orange-btn-dark);transform:translateY(-2px)} .wpcf7 input[type=submit]:disabled{opacity:.6;cursor:not-allowed;transform:none} .form-privacy{font-size:.88rem;color:var(--ink-3);margin-top:14px;text-align:center} .wpcf7 .wpcf7-not-valid-tip{color:#C0341D;font-size:.88rem;font-weight:600;margin-top:6px;display:block} .wpcf7 .wpcf7-not-valid{border-color:#C0341D !important;background:#FDF2F0 !important} .wpcf7-response-output{ margin:18px 0 0 !important;padding:15px 18px !important;border-radius:var(--radius) !important; border:2px solid var(--line-strong) !important;font-size:.98rem; } .wpcf7 form.sent .wpcf7-response-output{border-color:var(--ok) !important;background:#EAF6EF;color:#12603A} .wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output{border-color:#C0341D !important;background:#FDF2F0;color:#8E2314} .wpcf7-spinner{margin:12px auto 0;display:block} .screen-reader-response{position:absolute;left:-9999px} /* ---------- contact details ---------- */ .contact-list{list-style:none;padding:0;margin:0;display:grid;gap:18px} .contact-list li{display:flex;gap:15px;align-items:flex-start;margin:0} /* a long email address must wrap rather than push the row past a narrow screen */ .contact-list li>span{min-width:0;overflow-wrap:anywhere} .contact-ico{ flex:none;width:44px;height:44px;border-radius:10px;background:var(--green-tint);border:1px solid #C8DED7; display:grid;place-items:center;color:var(--green-dark); } .contact-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9} .contact-list .label{display:block;font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px} .contact-list .value{font-size:1.1rem;font-weight:700;color:var(--ink);font-family:var(--font-head);letter-spacing:-.01em} .contact-list .value a{color:var(--ink)} .contact-list .value a:hover{color:var(--orange-ink)} .contact-list small{display:block;color:var(--ink-3);font-size:.9rem;margin-top:2px} .map-embed{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#EDE8DF} .map-embed iframe{display:block;width:100%;height:340px;border:0} /* ---------- pills ---------- */ .pill-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0} .pill-list li{margin:0} .pill{ display:inline-block;background:#fff;border:1px solid var(--line);border-radius:100px; padding:9px 17px;font-size:.94rem;font-weight:600;color:var(--ink-2); } .bg-green .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#DCEAE6} a.pill:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)} /* ---------- footer ---------- */ .site-footer{background:var(--ink);color:#AEB9C0;padding:64px 0 0;font-size:.98rem} .site-footer h4{color:#fff;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;font-size:.86rem} .site-footer a{color:#CBD4D9;text-decoration:none} .site-footer a:hover{color:var(--orange)} /* A button in the footer keeps its own text colour: the general link rule above would otherwise turn it pale grey on orange, and orange on orange on hover. */ .site-footer a.btn-primary,.site-footer a.btn-primary:hover{color:#fff} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px} @media(max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} .footer-grid ul{list-style:none;padding:0;margin:0} .footer-grid li{margin-bottom:11px;overflow-wrap:anywhere} .footer-brand .brand{color:#fff;margin-bottom:14px} .footer-brand p{color:#98A4AC;font-size:.96rem;max-width:38ch} .footer-contact strong{color:#fff;display:block;font-family:var(--font-head);font-size:1.06rem} .footer-bottom{border-top:1px solid #262C31;padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.9rem;color:#7F8B93} .footer-bottom a{color:#98A4AC} .footer-bottom a:hover{color:#fff} /* The legal links: one tidy row, not a bulleted stack. WordPress menus are