/* Trust, shared by Home and Who we are: the why cards, client logos and Troy's photo (1 Nov 2026). */
/* What makes us different: six plain promises straight after the welcome (31 Oct 2026). */
.home-why { background:#efe9df; padding:clamp(64px,4.5vw,72px) 0; border-top:1px solid #0d10241a; }
.home-why__head { margin-bottom:clamp(26px,4vw,46px); }
.home-why .h2 { font-size:clamp(38px,4.6vw,66px); line-height:1.02; margin:0; }
.home-why .h2 em { font-family:var(--font-aside); font-weight:400; color:#6b32c2; letter-spacing:-.03em; }
/* Why people choose Curveball: six cards, a picture each, one short line and a button (Troy, 1 Nov 2026). */
.why-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.why-card { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 16px 20px; border-radius:22px; background:#fffaf3; border:1px solid #0d10241a; }
.why-card h3 { font:700 clamp(20px,1.7vw,23px)/1.15 var(--font-display); letter-spacing:-.02em; margin:8px 0 0; }
.why-card p { margin:0 0 6px; color:#414154; font-size:15px; line-height:1.5; }
.why-card .btn { margin-top:auto; }
.why-art { width:100%; height:112px; border-radius:16px; background:#f1e9dd; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font:600 13px/1 var(--font-body); color:var(--ink); }
.why-art span { background:#fff; border-radius:999px; padding:7px 13px; }
.why-art--check { align-items:stretch; padding:0 22%; }
.why-art--check span { display:flex; align-items:center; gap:9px; }
.why-art--check i { width:10px; height:10px; border-radius:50%; }
.why-art .is-green { background:#2bb673; } .why-art .is-yellow { background:#f2b705; } .why-art .is-red { background:#e5484d; }
.why-art--price b { font:800 44px/1 var(--font-display); letter-spacing:-.04em; }
.why-art--price span { background:var(--lime, #c6f432); }
.why-art--troy { flex-direction:row; gap:12px; }
.why-art--troy img { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.why-art--troy span { border-radius:16px 16px 16px 4px; padding:10px 14px; font-size:14px; }
.why-art--domain span { display:flex; align-items:center; gap:8px; padding:9px 16px; font:500 14px/1 var(--font-mono); }
.why-art--domain svg { width:14px; height:14px; fill:#2bb673; }
.why-art--domain b, .why-art--seal b { background:#6b32c2; color:#fff; padding:6px 12px; border-radius:999px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.why-art--care span { min-width:118px; text-align:center; }
.why-art--seal i { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--signal); font:800 24px/1 var(--font-display); font-style:normal; }
@media (max-width:900px) { .why-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .why-cards { grid-template-columns:1fr; gap:12px; } .why-art { height:96px; } }

/* Trusted across the Lower Mainland: client logos, one even grid of tiles (Troy, 1 Nov 2026). */
.home-clients { padding-bottom:clamp(28px,2.2vw,32px); margin-bottom:clamp(36px,2.6vw,40px); border-bottom:1px solid #0d10241f; }
.home-clients__title { font:700 clamp(26px,3.2vw,40px)/1.08 var(--font-display); letter-spacing:-.03em; margin:0 0 18px; }
.home-clients__title em { font-family:var(--font-aside); font-weight:400; color:#6b32c2; }
.home-clients__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.home-clients__list a { display:flex; align-items:center; justify-content:center; height:96px; padding:14px 18px; border-radius:16px; background:#fffaf3; border:1px solid #0d10241a; transition:transform .25s var(--settle, ease); }
.home-clients__list a:hover { transform:translateY(-2px); }
.home-clients__list a:focus-visible { outline:3px solid var(--violet); outline-offset:4px; }
.home-clients__list img { display:block; width:auto; height:auto; max-width:100%; max-height:44px; }
@media (max-width:760px) { .home-clients__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .home-clients__list a { height:78px; padding:10px; } .home-clients__list img { max-height:38px; } }

/* You work with me: Troy's face, big, right after the logos (Troy, 1 Nov 2026: "People trust faces"). */
.home-troy { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,56px); align-items:center; padding-bottom:clamp(28px,2.2vw,32px); margin-bottom:clamp(36px,2.6vw,40px); border-bottom:1px solid #0d10241f; }
.home-troy__photo { position:relative; margin:0; }
.home-troy__photo img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:28px; }
.home-troy__photo figcaption { position:absolute; left:14px; bottom:14px; background:#fffaf3; color:var(--ink); border-radius:999px; padding:9px 15px; font:600 14px/1 var(--font-body); box-shadow:0 8px 20px -12px #0d102466; }
.home-troy__title { font:700 clamp(34px,4.4vw,58px)/1.02 var(--font-display); letter-spacing:-.035em; margin:0; }
.home-troy__title em { font-family:var(--font-aside); font-weight:400; color:#6b32c2; letter-spacing:-.03em; }
.home-troy__line { font-size:clamp(17px,1.6vw,20px); line-height:1.5; color:#414154; margin:14px 0 0; max-width:40ch; }
.home-troy__ticks { list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:9px; font-weight:500; }
.home-troy__ticks li { display:flex; align-items:center; gap:10px; }
.home-troy__ticks li::before { content:"✓"; display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--lime, #c6f432); color:var(--ink); font-size:12px; }
@media (max-width:760px) { .home-troy { grid-template-columns:1fr; } .home-troy__photo { max-width:340px; } }
.home-troy__photo .home-troy__inset { position:absolute; right:-12px; bottom:-16px; width:42%; aspect-ratio:1; border-radius:20px; border:5px solid #efe9df; box-shadow:0 14px 30px -18px #0d102488; }
/* Why cards, round 2 (Troy, 1 Nov 2026): numbered, $899 scratched out for "Free", a speed bar, cards that lift. */
.why-cards { counter-reset: why; }
.why-card { counter-increment: why; position: relative; transition: translate .3s var(--settle, ease), box-shadow .3s var(--settle, ease); }
.why-card::before { content: counter(why, decimal-leading-zero); position: absolute; top: 26px; left: 28px; z-index: 1; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; color: #6b32c2; background: #fff; border-radius: 999px; padding: 6px 9px; }
@media (hover: hover) { .why-card:hover { translate: 0 -4px; box-shadow: 0 22px 44px -28px #0d102466; } }
.why-art--free s { position: relative; font: 600 22px/1 var(--font-display); color: #8a8597; text-decoration: none; }
.why-art--free s::after { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 3px; border-radius: 3px; background: var(--signal); transform: rotate(-10deg) scaleX(1); transform-origin: left center; transition: transform .6s .45s cubic-bezier(.18,.7,.22,1); }
.why-art--free b { font: 800 44px/1 var(--font-display); letter-spacing: -.04em; }
.why-art--free span, .why-art--fast span { background: var(--lime, #c6f432); }
.why-art--fast b { font: 800 36px/1 var(--font-display); letter-spacing: -.03em; }
.why-meter { display: block; width: 58%; height: 10px; border-radius: 999px; background: #fff; overflow: hidden; }
.why-meter i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2bb673, var(--lime, #c6f432)); transition: width 1.1s .35s cubic-bezier(.18,.7,.22,1); }
.reveal-on .why-card.reveal:not(.is-in) .why-meter i { width: 0; }
.reveal-on .why-card.reveal:not(.is-in) .why-art--free s::after { transform: rotate(-10deg) scaleX(0); }
/* Who we are (Troy, 1 Nov 2026: build trust in Troy): Hi, I'm Troy, four of the why cards, the logos, two buttons. */
.who-top { background:#efe9df; padding-block:clamp(40px,6vw,88px) clamp(48px,7vw,96px); }
.who-top .home-troy { padding-bottom:0; margin-bottom:0; border-bottom:0; }
.who-top .home-troy__title { font-size:clamp(54px,7.4vw,104px); line-height:.94; letter-spacing:-.055em; }
.who-top .h1-lead { display:block; margin-bottom:22px; font:10px/1.6 var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.who-why { border-top:0; padding-top:clamp(40px,6vw,72px); }
@media (min-width:901px) { .why-cards--four { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.who-why .home-clients { margin:clamp(48px,6vw,80px) 0 0; padding:clamp(32px,4vw,48px) 0 0; border-bottom:0; border-top:1px solid #0d10241f; }
.who-why .who-end { margin-top:clamp(36px,5vw,56px); }