/* Arbor Pro's — demo front page. One stylesheet, two themes. index.html renders light; /dark/ sets data-theme="dark" on . Every colour is a token so the alternate is a token swap, not a second stylesheet — which is what makes generating more variants cheap later. */ :root{ --forest:#1A6B3C; /* canonical --ast-global-color-0 */ --dark:#1B2A1E; /* canonical --ast-global-color-2 */ --lime:#7FB539; /* brand sheet's bright green */ --lime-hi:#9BD04A; --amber:#B45309; /* AA-safe CTA. NOT #D97706, which fails at 3.19:1 */ --amber-hi:#F59E0B; /* decorative only — badges, stars. Never text on white */ --bg:#F5F5F0; /* canonical --ast-global-color-4 */ --surface:#ffffff; --band:#333330; /* charcoal band */ --band-ink:#F2F2EC; --ink:#15130F; --muted:#6B6B63; --line:#DEDED6; --hdr-bg:var(--dark); --hero-a:#2F4A32; --hero-b:#24381F; --hero-c:#16210F; --quote-bg:#ffffff; --quote-ink:#15130F; --field-bg:#131E14; --field-line:#3B4A3B; --field-ink:#ffffff; --display:'Oswald',Impact,'Arial Narrow',sans-serif; --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; } :root[data-theme="dark"]{ --bg:#12160F; --surface:#1A2016; --band:#0C0F09; --band-ink:#E8EFE2; --ink:#EDF2E8; --muted:#9AA694; --line:#2C3527; --hdr-bg:#0C0F09; --hero-a:#24381F; --hero-b:#16210F; --hero-c:#080B06; --quote-bg:#1E2619; --quote-ink:#EDF2E8; --field-bg:#0C0F09; --field-line:#33402F; --forest:#2E8B4F; --lime:#9BD04A; --amber:#D97706; /* on dark grounds the brighter amber clears AA */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}} body{margin:0;background:var(--bg);color:var(--ink); font:400 17px/1.62 var(--body);-webkit-font-smoothing:antialiased} img,svg{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.012em; text-wrap:balance;margin:0;font-weight:700;line-height:1.06} .wrap{max-width:1140px;margin:0 auto;padding:0 22px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:3px solid var(--amber-hi);outline-offset:3px} /* ribbon */ .ribbon{background:#000;color:#fff;font:600 12.5px/1.5 var(--body); padding:7px 22px;letter-spacing:.03em;text-align:center} .ribbon{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center} .ribbon span{opacity:.62;font-weight:400} .ribbon .sw{opacity:.85;font-weight:600} .ribbon .sw a{margin:0 3px;opacity:.7;text-decoration:none;border-bottom:1px solid transparent} .ribbon .sw a:hover{opacity:1;border-bottom-color:currentColor} .ribbon a{color:var(--lime-hi)} /* header */ .hdr{background:var(--hdr-bg);position:sticky;top:0;z-index:60; border-bottom:1px solid rgba(255,255,255,.07)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between; gap:20px;min-height:66px;position:relative} .logo{display:block;flex:none} .logo img{height:30px;width:auto} .nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nav a{display:block;padding:9px 14px;color:#D7DED4;text-decoration:none; font:600 13.5px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;border-radius:3px} .nav a:hover{color:#fff;background:rgba(255,255,255,.09)} .nav a[aria-current]{background:var(--forest);color:#fff} .navtoggle{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer} /* hero */ .hero{position:relative;overflow:hidden;isolation:isolate;background:var(--hero-c)} .hero::before{content:"";position:absolute;inset:0;z-index:-2; background:radial-gradient(120% 92% at 76% 16%,var(--hero-a) 0%,transparent 58%), radial-gradient(100% 80% at 10% 92%,var(--hero-b) 0%,transparent 62%), linear-gradient(158deg,var(--hero-b) 0%,var(--hero-c) 100%)} /* --- hero treatments ------------------------------------------------- Three ways of keeping white headline text legible over illustrated art. Measured, not assumed: in BOTH generated banners the "empty" left 45% is not actually empty -- lime foliage intrudes, and the lightest pixel in the headline band gives only 1.5-2.0:1 against white. So no treatment may rely on the art alone. a) scrim - art full-bleed, dark gradient guarantees the text zone b) dark - the darker regenerated art, lighter scrim still required c) inset - art confined right of the text, headline on flat colour --------------------------------------------------------------------- */ .hero-art{position:absolute;right:2%;bottom:0;width:min(46%,430px);z-index:-1; opacity:.92;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))} .hero-banner{position:absolute;inset:0;z-index:-2;background-size:cover; background-image:var(--hero-art); background-position:right center;background-repeat:no-repeat} .hero-scrim::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} /* a - full-bleed art, strong scrim carrying the left two thirds */ .t-scrim .hero-scrim::after{background:linear-gradient(100deg, rgba(8,13,5,.96) 0%, rgba(8,13,5,.93) 42%, rgba(10,17,7,.78) 58%, rgba(10,17,7,.30) 80%, transparent 100%)} /* b - darker art, lighter scrim (art does most of the work) */ .t-dark .hero-scrim::after{background:linear-gradient(100deg, rgba(5,9,3,.90) 0%, rgba(5,9,3,.80) 44%, rgba(5,9,3,.42) 66%, transparent 90%)} /* c - art inset to the right, headline sits on flat brand colour. First attempt used padding-right:52% on .wrap, which collapsed the text column to a few words per line and hid the art entirely. Constrain the text with a real column instead and let the banner own the right half. */ .t-inset .hero .wrap{max-width:1140px;display:grid;grid-template-columns:minmax(0,540px) 1fr; align-items:center;gap:0} .t-inset .hero-banner{left:52%;right:0;width:auto;background-position:left center; background-size:cover; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%)} .t-inset .hero h1{max-width:none} .t-inset .hero .lede{max-width:none} @media(max-width:900px){ .t-inset .hero .wrap{display:block} .t-inset .hero-banner{left:0;opacity:.28;-webkit-mask-image:none;mask-image:none} } .hero .wrap{position:relative;padding:76px 22px 84px} .hero h1{color:#fff;font-size:clamp(2.05rem,6vw,3.9rem);max-width:14ch; text-shadow:0 2px 26px rgba(0,0,0,.55)} .hero h1 b{color:var(--lime-hi);font-weight:700} .hero .lede{color:#D6DED1;font-size:clamp(1rem,2vw,1.14rem);max-width:44ch;margin:18px 0 0} .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px} .btn{display:inline-block;background:var(--amber);color:#fff;text-decoration:none; font:700 1.02rem/1 var(--display);text-transform:uppercase;letter-spacing:.05em; padding:17px 30px;border-radius:5px;border:0;cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.3)} .btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)} .btn-call{display:inline-flex;align-items:center;gap:11px;color:#fff; text-decoration:none;font:700 1.18rem/1 var(--display);letter-spacing:.03em} .btn-call img{width:26px;height:26px;flex:none; /* the sheet's phone glyph is dark green; on the dark hero and footer it disappeared entirely. Invert to a light glyph rather than re-cutting art. */ filter:brightness(0) invert(1) opacity(.92)} .btn-call span{display:block;font:600 11px/1 var(--body);letter-spacing:.13em; color:var(--lime-hi);text-transform:uppercase;margin-bottom:6px} /* sections */ section{padding:64px 0} /* sticky header is 66px; without this an in-page anchor lands under it */ section[id],main[id],footer[id]{scroll-margin-top:78px} .sec-dark{background:var(--band);color:var(--band-ink)} .sec-forest{background:var(--forest);color:#fff} .sec-head{text-align:center;font-size:clamp(1.5rem,3.4vw,2.05rem);margin-bottom:12px} .sec-sub{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto 42px} .sec-dark .sec-sub,.sec-forest .sec-sub{color:rgba(255,255,255,.74)} /* experience */ .exp{display:grid;grid-template-columns:1.45fr .85fr;gap:46px;align-items:center} .equip{display:flex;gap:22px;justify-content:center;align-items:flex-end;flex-wrap:wrap} .equip figure{margin:0;text-align:center;width:150px} .equip img{height:96px;width:auto;margin:0 auto 12px;object-fit:contain} .equip figcaption{font:600 12.5px/1.35 var(--body);text-transform:uppercase; letter-spacing:.08em;color:var(--muted)} .badges{display:flex;flex-direction:column;gap:11px} .badge{background:var(--dark);color:#fff;font:600 14.5px/1.3 var(--body); padding:14px 18px;border-radius:4px;border-left:5px solid var(--lime)} /* services */ .svc-head{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap} .svc-head img{width:66px;flex:none} .svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px} .svc a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:9px;padding:26px 14px;text-align:center;text-decoration:none; color:var(--band-ink);display:block;transition:border-color .15s,background .15s,transform .15s} .svc a:hover{border-color:var(--lime);background:rgba(127,181,57,.11);transform:translateY(-2px)} .svc img{height:74px;width:auto;margin:0 auto 15px;object-fit:contain} .svc b{font-family:var(--display);font-size:1.03rem;text-transform:uppercase; letter-spacing:.03em;display:block} .viewall{display:block;text-align:center;margin-top:28px;color:var(--lime); font:600 14.5px/1 var(--body);text-underline-offset:4px} /* difference */ .diff{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;align-items:start} .diff-badge{width:min(190px,60%);margin:26px auto 0;opacity:.95} @media(max-width:900px){.diff-badge{display:none}} .diff>.sec-head{position:sticky;top:96px} .diff h2{font-size:clamp(1.4rem,3.1vw,1.95rem)} .diff ul{list-style:none;margin:0;padding:0} .diff li{display:flex;align-items:flex-start;gap:14px;padding:15px 0; border-bottom:1px solid var(--line)} .diff li::before{content:"";width:11px;height:11px;border-radius:50%; background:var(--lime);flex:none;margin-top:7px} .diff b{font-family:var(--display);font-size:1.06rem;text-transform:uppercase; letter-spacing:.025em;display:block} .diff em{font-style:normal;font-size:.87rem;color:var(--muted);display:block;margin-top:4px} /* reviews */ .rev-lead{text-align:center;margin-bottom:34px} .rev-lead b{display:block;font-family:var(--display);font-size:2.7rem;line-height:1; color:var(--amber-hi)} .rev-lead img{width:170px;margin:9px auto 7px} .rev-lead small{color:rgba(255,255,255,.74);font-size:.9rem} .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:20px} blockquote{margin:0;background:var(--quote-bg);color:var(--quote-ink);border-radius:10px; padding:24px 26px;position:relative;font-size:1rem;line-height:1.58} blockquote::after{content:"";position:absolute;left:32px;bottom:-11px; border:11px solid transparent;border-top-color:var(--quote-bg);border-bottom:0} blockquote cite{display:block;margin-top:14px;font-style:normal;font-size:.8rem; color:var(--muted);letter-spacing:.04em;text-transform:uppercase} /* process */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px; padding:0;counter-reset:s} .steps li{list-style:none;text-align:center} .steps img{height:74px;width:auto;margin:0 auto 14px;object-fit:contain; filter:brightness(0) invert(1)} .steps b{display:block;font-family:var(--display);font-size:1.02rem; text-transform:uppercase;letter-spacing:.03em} .steps b::before{counter-increment:s;content:counter(s) ". "} .steps small{display:block;color:rgba(255,255,255,.74);font-size:.83rem;margin-top:5px} /* faq */ .faq{display:grid;grid-template-columns:.65fr 1.35fr;gap:42px;align-items:start} .faq .sec-head{text-align:left;margin:0} details{border-bottom:1px solid var(--line)} summary{cursor:pointer;padding:17px 36px 17px 0;position:relative; font-weight:600;font-size:1.03rem;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:7px;top:23px;width:9px;height:9px; border-right:2.5px solid var(--forest);border-bottom:2.5px solid var(--forest); transform:rotate(45deg);transition:transform .18s} details[open] summary::after{transform:rotate(-135deg)} details p{margin:0 0 20px;color:var(--muted);max-width:62ch} details a{color:var(--forest);font-weight:600} /* footer */ .ftr{background:var(--dark);color:#E4E9E1;padding:58px 0 24px; border-top:6px solid transparent; border-image:repeating-linear-gradient(135deg,var(--lime) 0 14px,var(--dark) 14px 28px) 6} :root[data-theme="dark"] .ftr{background:#0C0F09} .ftr-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start} .ftr h2{color:var(--amber-hi);font-size:1.62rem} .ftr p{color:#C3CDBF;max-width:40ch} .ftr .btn-call{margin-top:16px;font-size:1.5rem} .ftr form{display:grid;gap:11px} .ftr input,.ftr textarea{width:100%;padding:13px 14px;border:1px solid var(--field-line); border-radius:4px;background:var(--field-bg);color:var(--field-ink); font:400 15px/1.4 var(--body)} .ftr input::placeholder,.ftr textarea::placeholder{color:#7E8C7E} .ftr .btn{width:100%;text-align:center} .legal{border-top:1px solid #2C392C;margin-top:42px;padding-top:20px;display:flex; flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.8rem;color:#8FA08F} .legal a{color:#A8D5BA} @media(max-width:900px){ .exp,.diff,.faq,.ftr-grid{grid-template-columns:1fr;gap:32px} .svc,.steps{grid-template-columns:repeat(2,1fr)} .hero-art{width:38%;opacity:.5} .nav{display:none} .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column; background:var(--hdr-bg);padding:10px 14px 16px;gap:2px;border-top:1px solid #2C392C} .navtoggle{display:block} } @media(max-width:560px){ section{padding:48px 0} .svc,.steps{grid-template-columns:1fr} .hero .wrap{padding:54px 22px 60px} .hero-art{display:none} .btn{width:100%;text-align:center} }