/* ============================================================ KODIAK BUILDS / KODIAK JUNK REMOVAL, Variant A Black Olive Structural clone of the Thirlwell PW build (projects/thirlwell-web), re-skinned to Variant A "Black Olive": ink #0B0B0B, bone #F3F1EA, olive #556B2F, bear red #D7191C (CTA and one accent only). Bebas Neue on big display slots (overrides at the bottom of this file), Inter and Manrope everywhere else. Critical hero styles are inlined in each page . ============================================================ */ /* ---------- base ---------- */ h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--head)} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} a{text-decoration:none} :focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:6px} .hero h1,.together h2,.quote h2,.foot .foot__h{color:#fff} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.16px;line-height:22px; padding:12px 20px;border-radius:11px;border:1px solid transparent; cursor:pointer;text-align:center;transition:transform .12s ease,filter .12s ease; } .btn:hover{filter:brightness(1.04)} .btn:active{transform:translateY(1px)} /* primary = gold, warm inset edges (no blue tint) */ .btn--primary{background:var(--cta);color:#fff;border-color:var(--cta-edge);box-shadow:var(--btn-shadow);padding:12px 29px} .btn--white,.btn--ghost{background:#fff;color:var(--ink-2);border-color:rgba(0,0,0,.06);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)} .btn--block{width:100%} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none} .btn__ico{width:16px;height:16px;flex:0 0 auto} .btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .center{display:flex;justify-content:center} /* ---------- nav ---------- */ .nav__left{display:flex;align-items:center;gap:14px} .nav__menu{display:flex;align-items:center;gap:30px} .nav__links{display:flex;align-items:center;gap:36px} .nav__links a{color:#fff;font-size:16px;font-weight:500;letter-spacing:-.16px;opacity:.92} .nav__links a:hover{opacity:1} .nav__cta{padding:12px 22px;font-size:16px} .nav__burger{display:none;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer} .nav__burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- social proof row ---------- */ .proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px} .proof__item{display:flex;align-items:center;gap:10px} .proof__sep{width:1px;height:18px;background:rgba(255,255,255,.4)} .avatars{display:flex} .avatar{display:block;width:28px;height:28px;border-radius:999px;overflow:hidden;border:2px solid #fff;background:#fff;margin-left:-9px} .avatar:first-child{margin-left:0} .avatar img{width:100%;height:100%;object-fit:cover} .proof__txt{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap} .proof__num{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em} .proof__label{font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:-.01em;opacity:.9} .stars{display:flex;gap:2px;color:#F0B429} .star{width:13px;height:13px;display:block} .proof__rating{font-family:var(--sans);font-size:14px;font-weight:500} .proof--light{color:#fff} /* ---------- section shells ---------- */ .sec{padding:120px 0} .sec--intro{padding:87px 0 0} .sec--services{padding:209px 0 94px} .sec--how{padding:113px 0 90px} .sec--where{padding:97px 0 55px} .sec--faq{padding:56px 0 84px} /* eyebrow: gold dot + uppercase letter-spaced Manrope label. No pills. */ .eyebrow{ display:flex;align-items:center;gap:10px;margin:0; font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.5; letter-spacing:.06em;text-transform:uppercase;color:rgba(16,16,16,.66); } .eyebrow::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:999px;background:var(--olive)} .sechead{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left} .sechead h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08} .sechead--center{align-items:center;text-align:center} .sechead--center .eyebrow{justify-content:center} /* ---------- what we do (left-aligned statement block) ---------- */ .intro{display:flex;flex-direction:column;align-items:flex-start;gap:22px;text-align:left} .intro__body{display:flex;flex-direction:column;gap:56px} .intro__body h4,.intro__body p{ font-family:var(--display);font-size:36px;font-weight:600; letter-spacing:-1.08px;line-height:1.3;color:var(--head); } /* ---------- before / after proof grid ---------- */ .ba{margin-top:43px;background:#fff;border:1px solid rgba(6,6,7,.09);border-radius:18px;padding:10px} .ba__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ba__cell{position:relative;overflow:hidden;border-radius:9px;aspect-ratio:585/500;background:#111;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none} .ba__cell picture{display:block;position:absolute;inset:0} .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none} .ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))} .ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-50%);background:rgba(255,255,255,.92);box-shadow:0 0 5px rgba(0,0,0,.28);z-index:2;pointer-events:none} .ba__tag{ position:absolute;top:16px;z-index:3; font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.01em;color:#1B1B21; background:rgba(240,240,240,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-radius:8px;padding:5px 12px;line-height:1.3; } .ba__tag--b{left:16px} .ba__tag--a{right:16px} .ba__handle{ position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);z-index:3; width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:rgba(235,235,235,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); color:#1B1B21;pointer-events:none; } .ba__handle svg{width:26px;height:16px} .ba__cta{margin-top:26px} /* ---------- services ---------- */ .sec--services .sechead--center{padding-bottom:6px;border-bottom:1px solid var(--line)} .svc{display:flex;flex-direction:column;gap:28px;padding:42px 0 60px} .svc+.svc{border-top:1px solid var(--line);padding-top:44px} .svc__main{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .svc__main h3{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.6px;line-height:1.2;text-align:left} .svc__main>p{font-family:var(--sans);font-size:16px;line-height:1.62;color:var(--grey);letter-spacing:-.01em} .benefits{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:6px} .benefits li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:var(--panel);border:1px solid rgba(6,6,7,.07);border-radius:12px;padding:18px 18px 20px} .benefits img{width:34px;height:auto;flex:0 0 auto} .benefits span{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--head)} .svc__main .btn{margin-top:6px} .svc__side{display:flex;flex-direction:column;gap:10px} .svc__listhead{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--head)} .svc__spark{width:17px;height:17px;flex:0 0 auto;color:var(--olive)} .ticks{display:flex;flex-direction:column;gap:7px;padding-left:12px} .ticks li{position:relative;padding-left:14px;font-family:var(--sans);font-size:15px;color:var(--grey);line-height:1.5;letter-spacing:-.01em} .ticks li::before{content:"\2022";position:absolute;left:0;top:0;color:var(--grey)} .shot{margin:22px 0 0;background:#F8F8F8;border:1px solid rgba(6,6,7,.08);border-radius:14px;padding:10px} .shot img{width:100%;height:625px;object-fit:cover;border-radius:8px} /* ---------- why we do them together (black -> gold gradient) ---------- */ .together{background:linear-gradient(180deg,#000 0%,#000 17%,#3F5222 100%);color:#fff;padding:98px 0 39px} .together__in{display:flex;flex-direction:column;align-items:flex-start} .together h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08;color:#fff;margin-bottom:38px} .together p{font-family:var(--sans);font-size:17px;line-height:1.62;color:#fff;letter-spacing:-.01em;max-width:1200px} .together__emph{margin-top:34px!important} .together__photo{width:100%;height:1610px;object-fit:cover;border-radius:16px;margin-top:36px} .together__cta{width:100%;margin-top:44px} /* ---------- how it works ---------- */ .how{display:grid;grid-template-columns:600px 1fr;gap:32px;align-items:start} .collage{position:relative;height:720px} .collage picture{display:block;position:absolute} .collage img{width:100%;height:100%;object-fit:cover;border-radius:6px} .collage__a{left:50px;top:0;width:493px;height:363px} .collage__b{left:25px;top:385px;width:257px;height:335px} .collage__c{left:302px;top:375px;width:259px;height:277px} .collage__stat{ position:absolute;left:259px;top:196px;width:189px;height:208px;z-index:2; background:var(--olive);border-radius:20px;color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px; } .collage__num{font-family:var(--sans);font-size:93px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff} .collage__label{font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.35;color:#fff;margin-top:4px} .how__copy{padding-top:0} .how__copy .sechead{margin-bottom:72px} .steps{display:flex;flex-direction:column;gap:32px} .step{display:flex;gap:24px;align-items:flex-start} .step__num{ flex:0 0 auto;width:62px;height:62px;border-radius:999px;background:var(--olive);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:26px;font-weight:500;line-height:1; } .step__txt{display:flex;flex-direction:column;gap:7px;padding-top:6px} .step h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.25} .step p{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} .how__cta{margin-top:88px} /* ---------- where we work ---------- */ .where{display:grid;grid-template-columns:1fr 592px;gap:16px;align-items:start} .where__copy{display:flex;flex-direction:column;align-items:flex-start;padding-top:11px} .where h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08;margin-top:5px} .where__body{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.8;color:var(--head);letter-spacing:-.02em;max-width:34ch;margin-top:39px} .where__lines{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.45;color:var(--head);letter-spacing:-.02em;margin-top:27px} .where__copy .btn{margin-top:37px} .where__map{height:618px;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid rgba(6,6,7,.08)} .where__map iframe{width:100%;height:100%;border:0;display:block} /* ---------- faq ---------- */ .faq{display:flex;flex-direction:column;align-items:center;gap:28px} .faq__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .faq__head .eyebrow{justify-content:center} .faq__head h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.1} .faq__list{display:flex;flex-direction:column;gap:25px;width:100%;background:var(--panel);border:1px solid rgba(6,6,7,.07);border-radius:18px;padding:11px} .qa{background:transparent;border-radius:11px;overflow:hidden} .qa[open]{background:#FBFBFB;box-shadow:0 1px 2px rgba(0,0,0,.05)} .qa summary{display:flex;align-items:center;gap:22px;padding:15px 24px;cursor:pointer;list-style:none;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.4px;color:var(--head)} .qa summary::-webkit-details-marker{display:none} .qa__ico{width:18px;height:18px;flex:0 0 auto;color:var(--olive);transition:transform .2s ease} .qa[open] .qa__ico{transform:rotate(45deg)} .qa[open] summary{padding-top:16px;padding-bottom:6px} .qa__body{padding:0 24px 16px 64px} .qa__body p{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} /* ---------- quote ---------- */ .quotewrap{padding:0 0 42px} .quote{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;background:#111;color:#fff} .quote__bg{position:absolute;inset:0;z-index:-2} .quote__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .quote::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,7,.90) 0%,rgba(6,6,7,.86) 18%,rgba(20,26,11,.82) 38%,rgba(40,52,22,.80) 62%,rgba(55,70,30,.82) 88%,rgba(63,82,34,.84) 100%)} .quote__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:95px 20px 100px} .quote__call{ display:inline-flex;align-items:center;gap:8px;background:var(--cta);border:1px solid var(--cta-edge); box-shadow:var(--btn-shadow);border-radius:999px;padding:7px 18px;color:#fff; font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:-.01em; } .quote__call strong{font-weight:600} .quote__call svg{width:15px;height:15px;flex:0 0 auto} .quote__h2{font-size:51px;font-weight:700;letter-spacing:-2.04px;line-height:1.1;color:#fff} .quote__sub{font-family:var(--sans);font-size:16px;line-height:1.6;color:#fff} .quote .proof{margin-top:2px} .qform{width:100%;max-width:598px;background:#F0F0F0;border-radius:16px;padding:30px;display:grid;grid-template-columns:1fr;gap:20px;margin-top:2px;text-align:left} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--head)} .opt{font-weight:500;color:var(--grey)} .field input,.field select,.field textarea{ font-family:var(--sans);font-size:16px;color:var(--head);background:#fff; border:1px solid rgba(6,6,7,.14);border-radius:11px;padding:15px 14px;width:100%; appearance:none;-webkit-appearance:none; } .field textarea{resize:vertical;min-height:110px} .field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px} .field input::placeholder,.field textarea::placeholder{color:rgba(16,16,16,.4)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);outline:none;box-shadow:0 0 0 3px rgba(85,107,47,.30)} .field [aria-invalid="true"]{border-color:#D7191C} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .qform__msg{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;padding:14px 16px;border-radius:12px} .qform__msg[data-state="ok"]{background:rgba(85,107,47,.16);border:1px solid rgba(63,82,34,.55);color:var(--head)} .qform__msg[data-state="err"]{background:rgba(215,25,28,.10);border:1px solid rgba(215,25,28,.45);color:var(--head)} .qform__msg a{color:var(--gold-ink);font-weight:700} .qform--done .field,.qform--done button[data-submit]{display:none} /* ---------- footer ---------- */ .foot{background:var(--ink-3);color:#fff;padding:68px 0 20px} .foot__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px} .foot__brand img{width:257px;height:auto;filter:brightness(0) invert(1)} .foot__nav{display:flex;flex-direction:column;align-items:flex-end;gap:16px} .foot__nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:30px} .foot__nav ul a{font-family:var(--sans);font-size:16px;font-weight:400;color:#fff;letter-spacing:-.16px} .foot__nav ul a:hover{opacity:.75} .foot__cta{margin-top:14px} .foot__h{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:14px} .foot__mid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:33px} .foot__col ul{display:flex;flex-direction:column;gap:8px} .foot__col li,.foot__col a{font-family:var(--sans);font-size:15px;font-weight:400;color:rgba(255,255,255,.72);line-height:1.5} .foot__col a:hover{color:#fff} .foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px} .foot__bar p{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.72)} .foot__legal{display:flex;align-items:center;gap:88px} .foot__legal span{display:none} .foot__legal a:hover{color:#fff} /* legacy 4-column footer shape - still used by privacy.html / terms.html */ .foot__in{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:40px;align-items:start} .foot__in .foot__brand img{width:200px} .foot__in .foot__col a{color:rgba(255,255,255,.72)} .foot__in .foot__col a:hover{color:#fff} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1199px){ .sec{padding:96px 0} .sec--intro{padding:80px 0 0} .sec--services{padding:150px 0 100px} .sec--where{padding:130px 0 70px} .sec--how{padding:90px 0} .sechead h2,.together h2,.where h2,.faq__head h2{font-size:46px;letter-spacing:-1.6px} .quote__h2{font-size:44px;letter-spacing:-1.5px} .intro__body h4,.intro__body p{font-size:32px;letter-spacing:-.9px} .intro__body{gap:32px} .together__photo{height:1100px} .how{grid-template-columns:480px 1fr;gap:28px} .collage{height:600px;transform-origin:top left} .collage__a{left:40px;width:410px;height:302px} .collage__b{left:20px;top:320px;width:214px;height:279px} .collage__c{left:251px;top:312px;width:215px;height:230px} .collage__stat{left:215px;top:163px;width:157px;height:173px;border-radius:16px} .collage__num{font-size:70px} .collage__label{font-size:15px} .where{grid-template-columns:1fr 480px} .where__map{height:540px} .shot img{height:500px} } @media (max-width:1023px){ .how{grid-template-columns:1fr;gap:48px} .collage{height:600px;max-width:480px} .where{grid-template-columns:1fr;gap:40px} .where__map{height:420px} .together__photo{height:760px} .shot img{height:440px} } @media (max-width:809px){ :root{--pad:20px} .sec{padding:64px 0} .sec--intro{padding:56px 0 0} .sec--services{padding:80px 0 56px} .sec--where{padding:72px 0 48px} .sec--how{padding:64px 0} .sec--faq{padding:64px 0 72px} .sechead h2,.together h2,.where h2,.faq__head h2{font-size:34px;letter-spacing:-1.1px} .quote__h2{font-size:32px;letter-spacing:-1.05px} .intro__body h4,.intro__body p{font-size:24px;letter-spacing:-.6px;line-height:1.35} .intro__body{gap:20px} .sec--services .sechead--center{padding-bottom:32px} .svc{padding:28px 0 34px} .svc+.svc{padding-top:32px} .svc__main h3{font-size:22px;letter-spacing:-.44px} .benefits span{font-size:16px} /* mobile nav */ .nav__burger{display:flex} .nav__in{height:72px} .nav__menu{ position:absolute;left:0;right:0;top:72px;background:rgba(0,0,0,.97); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); flex-direction:column;align-items:stretch;gap:6px;padding:16px 20px 22px; border-top:1px solid rgba(255,255,255,.1); display:none; } .nav__menu.is-open{display:flex} .nav__links{flex-direction:column;align-items:stretch;gap:2px} .nav__links a{display:block;padding:12px 4px;font-size:17px;opacity:1} .nav__cta{margin-top:8px;width:100%} .ba{margin-top:36px;padding:8px;border-radius:14px} .ba__grid{grid-template-columns:1fr;gap:8px} .ba__cta{margin-top:24px} .ba__cta .btn{width:100%} .together{padding:60px 0 76px} .together h2{margin-bottom:22px} .together__photo{height:420px;margin-top:26px} .together__cta{margin-top:28px} .together__cta .btn{width:100%} .collage{height:auto;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative} .collage picture{position:static;width:auto!important;height:auto!important;left:auto!important;top:auto!important} .collage__a{grid-column:1/-1} .collage img{height:200px} .collage__a img{height:230px} .collage__stat{position:static;width:auto;height:auto;grid-column:1/-1;padding:22px;flex-direction:row;gap:16px;justify-content:flex-start;text-align:left;border-radius:16px} .collage__num{font-size:56px} .how__copy .sechead{margin-bottom:32px} .step__num{width:52px;height:52px;font-size:22px} .step{gap:16px} .how__cta{margin-top:32px;width:100%} .where__map{height:300px} .where__body,.where__lines{font-size:17px} .where__copy .btn{width:100%} .faq{gap:30px} .faq__list{padding:8px;border-radius:14px;gap:8px} .qa summary{font-size:17px;padding:14px 16px;gap:14px} .qa[open] summary{padding-top:18px;padding-bottom:6px} .qa__body{padding:0 16px 18px 48px} .quotewrap{padding:0 0 24px} .quote__in{padding:56px 16px 44px} .qform{padding:18px;grid-template-columns:1fr} .shot img{height:280px} .foot{padding:56px 0 32px} .foot__top{flex-direction:column;gap:28px} .foot__brand img{width:200px} .foot__nav{align-items:flex-start} .foot__nav ul{justify-content:flex-start;gap:18px} .foot__mid{grid-template-columns:1fr;gap:28px;margin-top:44px} .foot__in{grid-template-columns:1fr 1fr;gap:28px} .foot__in .foot__brand{grid-column:1/-1} .foot__bar{margin-top:40px;flex-direction:column;gap:10px} .foot__legal{gap:24px} .btnrow .btn{flex:1 1 auto} } @media (max-width:479px){ .hero__in{gap:16px} .btnrow{width:100%} .btnrow .btn{width:100%} .collage{grid-template-columns:1fr} .foot__in{grid-template-columns:1fr} .collage__stat{flex-direction:column;align-items:flex-start;gap:4px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------- legal stub pages ---------- */ .legal{padding:88px 0 120px} .legal__in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px} .legal h1{font-size:44px;letter-spacing:-1.4px} .legal h2{font-size:24px;margin-top:18px} .legal p,.legal li{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--grey)} .legal ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px} .legal a{color:var(--gold-ink);font-weight:600} .legal__meta{font-size:14px;color:var(--grey)} @media (max-width:809px){.legal{padding:56px 0 72px}.legal h1{font-size:32px}} /* ============================================================ MR. GET IT DONE overrides (Variant A) - appended after all responsive blocks so these win the cascade. ============================================================ */ /* Bebas on the big display slots */ .sechead h2,.together h2,.where h2,.faq__head h2,.quote__h2{ font-family:"Bebas Neue",Impact,var(--display);font-weight:400; letter-spacing:.01em;text-transform:uppercase; } .sechead h2,.together h2,.where h2,.faq__head h2{font-size:66px;line-height:.95} .quote__h2{font-size:58px;line-height:.98} .quote__h2 em{font-style:normal;color:#BFD98A} .together h2 em{font-style:normal;color:#D9E8B8} @media (max-width:1199px){ .sechead h2,.together h2,.where h2,.faq__head h2{font-size:54px;letter-spacing:.01em} .quote__h2{font-size:48px;letter-spacing:.01em} } @media (max-width:809px){ .sechead h2,.together h2,.where h2,.faq__head h2{font-size:42px;letter-spacing:.01em} .quote__h2{font-size:38px;letter-spacing:.01em} } /* text logo (no image asset yet) */ .nav__logo{font-family:"Bebas Neue",Impact,sans-serif;font-size:27px;letter-spacing:.03em;color:#fff;line-height:1;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px} .nav__mark{width:34px;height:34px;display:block;flex:none} .nav__logo em{font-style:normal;color:var(--cta)} .foot__brand .nav__logo{font-size:32px} .foot__brand .nav__mark{width:40px;height:40px} .foot__tag{font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.6);margin-top:12px;max-width:300px;line-height:1.6} /* hazard stripe divider - the Variant A signature */ .stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--cta) 0 18px,#0B0B0B 18px 36px)} /* photo placeholder slots (until real job shots drop in) */ .ph{position:relative;background:#161616;display:grid;place-items:center;overflow:hidden;border-radius:8px;min-height:120px} .ph::before{content:"";position:absolute;inset:0;background: radial-gradient(120% 90% at 30% 20%,rgba(85,107,47,.12),transparent 60%), repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px)} .ph>span{position:relative;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A8A85;text-align:center;padding:0 16px;line-height:1.6} .ph--after{background:#1C2410} .ph--after::before{background: radial-gradient(120% 90% at 60% 30%,rgba(85,107,47,.34),rgba(85,107,47,.05) 65%), repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .ph--after>span{color:#A9BD7A} /* placeholder geometry per structural slot */ .ba__cell .ph{position:absolute;inset:0;border-radius:0;min-height:0} .ba__cell .ba__after .ph{position:absolute;inset:0} .shot .ph{height:625px;border-radius:8px} .together .ph{width:100%;height:520px;border-radius:16px;margin-top:36px} .quote__bg .ph{position:absolute;inset:0;border-radius:0} .collage .ph{position:absolute;border-radius:6px;min-height:0} @media (max-width:1199px){.shot .ph{height:500px}} @media (max-width:1023px){.shot .ph{height:440px}.together .ph{height:420px}} @media (max-width:809px){ .shot .ph{height:280px}.together .ph{height:320px;margin-top:26px} .collage{height:auto;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} .collage .ph{position:static;width:auto!important;height:200px!important;left:auto!important;top:auto!important} .collage .ph.collage__a{grid-column:1/-1;height:230px!important} } @media (max-width:479px){.collage{grid-template-columns:1fr}} /* benefit tiles: orange check icon instead of image assets */ .benefits svg{width:32px;height:32px;flex:0 0 auto;color:var(--olive)} /* honest trust row (replaces avatar/star proof - no invented counts) */ .proof--plain .proof__label{opacity:1;font-weight:500} .proof--plain .proof__sep{background:rgba(255,255,255,.35)} /* photo drop-in geometry (added at image-wiring pass) */ .together__photo{width:100%;height:520px;object-fit:cover;border-radius:16px;margin-top:36px} @media (max-width:809px){.together__photo{height:320px;margin-top:26px}} .shot img{height:625px} @media (max-width:1199px){.shot img{height:500px}} @media (max-width:1023px){.shot img{height:440px}} @media (max-width:809px){.shot img{height:280px}} /* ============================================================ CLIENT REVISIONS 2026-08-20 (Yashua's markup doc) ============================================================ */ /* depth pass - "make the boxes have more depth" */ .benefits li{ background:linear-gradient(165deg,#FFFFFF 0%,#F3F1EA 72%,#ECE9DF 100%); border:1px solid rgba(6,6,7,.09);border-radius:16px; box-shadow:0 1px 2px rgba(6,6,7,.05),0 14px 28px -16px rgba(6,6,7,.28),inset 0 1px 0 rgba(255,255,255,.9); } .ba{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.3)} .shot{box-shadow:0 1px 2px rgba(6,6,7,.04),0 16px 32px -20px rgba(6,6,7,.26)} .faq__list{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.26)} .qa[open]{box-shadow:0 8px 20px -10px rgba(6,6,7,.18)} .collage__stat{box-shadow:0 16px 32px -14px rgba(63,82,34,.55)} .step__num{box-shadow:0 10px 20px -10px rgba(63,82,34,.5)} .qform{box-shadow:0 26px 54px -30px rgba(0,0,0,.55)} .where__map{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.3)} /* what we do - check chips + core-services trio + trust split + CTA */ .wedo__chips{display:flex;flex-wrap:wrap;gap:10px} .chip{ display:inline-flex;align-items:center;gap:8px; background:linear-gradient(165deg,#fff 0%,#F0EEE6 100%);border:1px solid rgba(6,6,7,.09);border-radius:999px; padding:9px 16px;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--head); box-shadow:0 1px 2px rgba(6,6,7,.05),0 10px 20px -12px rgba(6,6,7,.24); } .chip svg{width:16px;height:16px;flex:0 0 auto;color:var(--olive)} .trio{margin-top:56px} .trio .eyebrow{margin-bottom:18px} .trio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tcard{ background:linear-gradient(170deg,#fff 0%,#F2F0E9 100%);border:1px solid rgba(6,6,7,.09);border-radius:18px; padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start; box-shadow:0 1px 2px rgba(6,6,7,.05),0 18px 36px -22px rgba(6,6,7,.3),inset 0 1px 0 rgba(255,255,255,.9); } .tcard svg{width:30px;height:30px;color:var(--olive)} .tcard h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.4px;line-height:1.25} .tcard p{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--grey);letter-spacing:-.01em} .trust{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px} .trust__col{ background:linear-gradient(170deg,#fff 0%,#F2F0E9 100%);border:1px solid rgba(6,6,7,.09);border-radius:18px; padding:28px;display:flex;flex-direction:column;gap:10px; box-shadow:0 1px 2px rgba(6,6,7,.05),0 18px 36px -22px rgba(6,6,7,.3),inset 0 1px 0 rgba(255,255,255,.9); } .trust__col h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.4px} .trust__col p{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--grey);letter-spacing:-.01em} .trust__col--promise{background:linear-gradient(170deg,#141414 0%,#060607 100%);border-color:rgba(255,255,255,.08);box-shadow:0 20px 40px -22px rgba(6,6,7,.5)} .trust__col--promise h3{color:#fff} .trust__col--promise p{color:rgba(255,255,255,.82)} .wedo__cta{margin-top:44px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .wedo__cta>p{font-family:var(--sans);font-size:17px;color:var(--grey)} .wedo__cta-big{font-family:var(--display);font-size:24px;font-weight:600;color:var(--head);letter-spacing:-.5px;line-height:1.3} .wedo__cta .btn{margin-top:16px} /* where we work - community trust bullets */ .where__trust{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:26px} .where__trust li{ background:linear-gradient(165deg,#fff 0%,#F3F1EA 100%);border:1px solid rgba(6,6,7,.09);border-radius:14px; padding:16px 18px;display:flex;gap:14px;align-items:flex-start; box-shadow:0 1px 2px rgba(6,6,7,.05),0 12px 24px -14px rgba(6,6,7,.26),inset 0 1px 0 rgba(255,255,255,.9); } .where__trust svg{width:22px;height:22px;flex:0 0 auto;color:var(--olive);margin-top:2px} .where__trust p{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} .where__trust strong{display:block;font-weight:600;color:var(--head);margin-bottom:2px} .where__close{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--head);letter-spacing:-.02em;line-height:1.5;margin-top:26px;max-width:38ch} /* footer slogan */ .foot__slogan{font-family:var(--bebas);font-size:26px;letter-spacing:.02em;line-height:1.1;color:#fff;text-transform:uppercase;margin:0 0 14px;max-width:280px} .foot__slogan em{font-style:normal;color:var(--cta)} /* sticky mobile CTA bar */ .mcta{display:none;transform:translateY(0);transition:transform .25s ease} @media (max-width:809px){ .mcta{ position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(6,6,7,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -14px 34px rgba(0,0,0,.4); } .mcta.is-hidden{transform:translateY(120%)} .mcta__quote{flex:1 1 auto} .mcta__call{flex:0 0 auto;padding:12px 18px} .foot{padding-bottom:104px} } /* mobile spacing pass - breathing room, nothing flush to the screen edge */ @media (max-width:809px){ :root{--pad:28px} .nav__in{gap:12px} .mcta{padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px))} .trio{margin-top:40px} .trio__grid{grid-template-columns:1fr;gap:12px} .tcard{padding:22px 20px 24px} .trust{grid-template-columns:1fr;gap:12px} .trust__col{padding:24px 20px} .wedo__cta{margin-top:36px} .wedo__cta-big{font-size:20px} .wedo__cta .btn{width:100%} .chip{font-size:13.5px;padding:8px 14px} .ba{padding:8px} .qa__body{padding-right:20px} .quote__in{padding:52px 22px 44px} .nav__menu{padding:16px 28px 22px} .foot__slogan{font-size:24px} .hero__sub{padding:0 6px} .together p{font-size:16px} .where__close{margin-top:22px} } /* ============================================================ KODIAK VARIANT A "BLACK OLIVE" — root token fallbacks + new sections. Appended 2026-09-03. :root fallbacks let index.html's own inline :root override any of these without editing this file. ============================================================ */ :root{ --cta:#D7191C;--cta-edge:#B3151A; --olive:#556B2F;--olive-deep:#3F5222;--olive-light:#7A8F4A; --gold:#556B2F;--gold-deep:#3F5222;--gold-ink:#3F5222; --paper:#F3F1EA; } /* ---------- reviews: horizontal card flow, scroll snap, no library ---------- Same markup works as a "card row" on desktop (several cards visible, can still be dragged/scrolled with a trackpad or arrow keys) and a swipeable one-card-at-a-time flow on mobile. Section stays [hidden] until main.js finds at least one review in the #reviews-data JSON block. */ .reviews{background:var(--ink);color:#fff;padding:96px 0} .reviews .sechead h2{color:#fff} .reviews .eyebrow{color:rgba(255,255,255,.66)} .reviews__grid{ display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad); padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; } .rev{ flex:0 0 340px;scroll-snap-align:start; background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:26px; } .rev__stars{color:#F5B301;letter-spacing:2px;font-size:15px} .rev__txt{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);margin:14px 0} .rev__foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .rev__who{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.12em;margin:0} .rev__badge{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--olive-light);background:rgba(85,107,47,.22);border:1px solid rgba(122,143,74,.4);border-radius:999px;padding:3px 10px;flex:0 0 auto} .reviews__sub{font-family:var(--sans);font-size:15px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:4px;max-width:46ch} .reviews__cta{margin-top:34px;text-align:center} @media (max-width:809px){ .reviews__grid{gap:12px} .rev{flex-basis:82vw} } /* ---------- photo gallery ---------- */ .gallery{padding:0 0 56px} .gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .gallery__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block} @media (max-width:809px){ .gallery__grid{grid-template-columns:repeat(2,1fr)} } /* ---------- hero real-photo strip ("real backyards" proof, right under the fold) ---------- */ .hero__photos{display:flex;gap:10px;justify-content:center;margin-top:4px} .hero__photos img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.25)} .hero__photos-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:2px} @media (max-width:809px){ .hero__photos img{width:72px;height:54px} } /* ---------- service card photo (Decks / Fences / Junk Removal) ---------- */ .tcard__photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:2px} /* ---------- crew photo slot (placeholder until Wes sends one) ---------- */ .crew-photo{width:100%;height:340px;object-fit:cover;border-radius:16px;margin-top:20px} @media (max-width:809px){.crew-photo{height:220px}} /* ---------- language toggle chip ---------- */ .lang{font-size:12px;letter-spacing:.08em;opacity:.7;margin-left:12px} /* ============================================================ CLIENT REVIEW PASS 2026-09-05 (Frost's screen recording) mobile: smaller hero logo, one hero CTA, olive tint bands, tighter section rhythm. ============================================================ */ @media (max-width:809px){ .hero__logo{width:110px} .hero__in .btnrow .btn--ghost{display:none} .sec--services,.sec--where{background:#EAEEDD} .sec{padding:52px 0} .sec--services{padding:64px 0 48px} } /* ---------- trust pair, moved above How It Works (structural pass 2026-09-05) ---------- */ .sec--trustpair{padding:0 0 60px} @media (max-width:809px){.sec--trustpair{padding:0 0 36px}} /* ---------- one CTA at the end of What We Take (structural pass 2026-09-05) ---------- */ .svc__cta{margin-top:16px}