/* Full-page, responsive captures. Native scrollports keep touch scrolling reliable. */
.rain-comparison { position:relative; isolation:isolate; margin:15px 0 72px; scroll-margin-top:90px; }
.rain-comparison__intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:0 50px; padding:38px 40px 34px; border-radius:4px 36px 4px 4px; background:radial-gradient(ellipse at 88% 8%,#ae8fe929,transparent 57%),linear-gradient(150deg,#171932 28%,#202444); color:var(--cream); }
.rain-comparison__intro .proof-kicker { grid-column:1/-1; font-size:10px; line-height:1.8; color:#cbb8f7; margin-bottom:19px; }
.rain-comparison__intro h2 { grid-row:2/4; font:700 clamp(35px,3.65vw,54px)/1.05 var(--font-display); letter-spacing:-.045em; max-width:19ch; }
.rain-comparison__intro h2 em { font-family:var(--font-aside); font-weight:400; color:#cebcf4; }
.rain-comparison a { text-underline-offset:5px; }
.rain-comparison__experience { min-width:0; }
.rain-comparison__switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#171932; padding:5px; border:1px solid #ffffff21; border-radius:10px; margin:24px 0 19px; max-width:660px; }
.rain-comparison__switch button { position:relative; text-align:left; color:#d0cbdc; border:1px solid transparent; border-radius:6px; min-height:77px; padding:12px 15px; font-size:16px; line-height:1.3; transition:background .2s,color .2s; }
.rain-comparison__switch button small { display:block; font:9px/1.5 var(--font-mono); letter-spacing:.065em; margin-bottom:6px; }
.rain-comparison__switch button span { margin-left:5px; }
.rain-comparison__switch button[aria-pressed="true"] { background:#d0bdf8; color:#171932; box-shadow:0 3px 12px #0002; }
.rain-comparison__switch button:hover:not([aria-pressed="true"]) { background:#ffffff10; }
.rain-comparison__switch button:focus-visible,.rain-comparison a:focus-visible { outline:3px solid #8058c9; outline-offset:4px; }
.rain-comparison__screen { margin:0; background:#fff9ef; border-radius:12px; overflow:hidden; border:1px solid var(--ink); box-shadow:6px 8px 0 #10122512; color:#171932; }
.rain-comparison__browser { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 13px; color:#636077; background:#fff9ef; font:9px/1.5 var(--font-mono); }
.rain-comparison__browser>span { display:flex; gap:4px; }
.rain-comparison__browser i { display:block; width:5px; height:5px; border-radius:50%; background:#c9c0b7; }
.rain-comparison__scrollport { height:var(--work-preview-height,820px); overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; background:#fff; }
.rain-comparison__scrollport:focus-visible { outline:3px solid #8058c9; outline-offset:-3px; }
/* Each capture is a stack of tiles, one stack for desktops and one for phones; only the shown one loads. */
.rain-capture { display:block; }
.rain-capture img { background:#f4efe6; }
.rain-capture--mobile { display:none; }
@media(max-width:700px) { .rain-capture--desktop{display:none} .rain-capture--mobile{display:block} }
.rain-comparison__scrollport img { display:block; width:100%; height:auto; max-width:100%; }
.rain-comparison__screen figcaption { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between; align-items:center; padding:11px 13px; font:600 12px/1.5 var(--font-body); border-top:1px solid #e5dcc5; }
.rain-comparison__screen figcaption>span { font:9px/1.5 var(--font-mono); color:#636077; }
.rain-comparison__reading { display:grid; grid-template-columns:1fr 1fr; gap:0 50px; padding-top:30px; }
.rain-comparison__reading h3 { grid-row:1/3; font:700 30px/1.15 var(--font-display); letter-spacing:-.025em; color:var(--ink); max-width:21ch; }
.rain-comparison__reading p { font-size:15px; line-height:1.75; color:var(--muted); margin:0; max-width:56ch; }
.rain-comparison__reading a { align-self:start; display:inline-flex; gap:14px; align-items:center; width:fit-content; min-height:44px; margin-top:8px; font-size:13px; color:#7135b5; }
.rain-comparison__note { border-top:1px solid var(--rule); margin-top:20px; padding-top:16px; font-size:11px; line-height:1.8; color:var(--muted); max-width:100ch; }
.rain-comparison [data-project-panel]:not([hidden]) .rain-comparison__screen { animation:rain-arrive .4s cubic-bezier(.2,.65,.3,1) both; }
@keyframes rain-arrive { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.reduce-motion .rain-comparison * { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .rain-comparison *, .rain-comparison *::before { animation:none!important; transition:none!important; } }
@media(max-width:1050px) { .rain-comparison__intro{padding:30px;column-gap:30px}.rain-comparison__intro h2{font-size:40px}}
@media(max-width:760px) { .rain-comparison { margin-bottom:75px; }.rain-comparison__intro{display:block;padding:28px 24px;border-radius:3px 26px 3px 3px}.rain-comparison__intro h2{font-size:clamp(37px,8vw,54px);max-width:18ch}.rain-comparison__reading{display:block;padding-top:24px}.rain-comparison__reading h3{font-size:28px}.rain-comparison__reading p{margin-top:14px}.rain-comparison__switch{margin-bottom:15px} }
@media(max-width:700px) { .rain-comparison__scrollport{height:var(--work-preview-height,800px)} }
@media(max-width:400px) { .rain-comparison__intro{padding:26px 20px}.rain-comparison__intro h2{font-size:36px}.rain-comparison__switch button{font-size:13px;padding:10px 8px;min-height:73px}.rain-comparison__switch button small{font-size:7px}.rain-comparison__browser{font-size:7px;padding:9px}.rain-comparison__browser i{width:4px;height:4px}.rain-comparison__screen figcaption{padding:9px;font-size:11px}.rain-comparison__reading h3{font-size:25px}}
.rain-comparison__reading .project-film { margin:18px 0 0; }
.rain-comparison__reading .project-film video { display:block; width:100%; max-width:420px; height:auto; aspect-ratio:1; border-radius:18px; background:#f3ede4; }
.rain-comparison__reading .project-film figcaption { margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); }
/* Work, rebuilt (Troy, 1 Nov 2026): our work, results up front, then each before and after. */
.work-top { padding-block:clamp(46px,4vw,64px) clamp(64px,4.5vw,70px); }
.work-top h1 { font:800 clamp(66px,8.4vw,124px)/.9 var(--font-display); letter-spacing:-.07em; margin:0 0 22px; }
.work-top h1 .h1-lead { color:var(--muted); font-size:10px; line-height:1.6; letter-spacing:.06em; margin-bottom:24px; }
.work-top h1 em { color:#7135d4; font-family:var(--font-aside); font-weight:400; letter-spacing:-.045em; }
.work-top__intro { font:700 clamp(20px,1.7vw,24px)/1.35 var(--font-display); letter-spacing:-.015em; margin-bottom:24px; }
.case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); margin:clamp(42px,5vw,66px) 0 0; padding:0; list-style:none; }
.case-card { display:flex; flex-direction:column; align-items:flex-start; padding:12px 12px 24px; background:#fffaf2; border:1px solid var(--ink); border-radius:18px; box-shadow:6px 8px 0 #10122512; transition:translate .3s var(--settle), box-shadow .3s var(--settle); }
.case-card__shot { display:block; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:10px; border:1px solid #10122522; margin-bottom:20px; }
.case-card__shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s cubic-bezier(.18,.7,.22,1); }
.case-card__type { margin:0 10px; font:10px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.case-card h2 { margin:6px 10px 16px; font:700 clamp(26px,2.5vw,34px)/1.08 var(--font-display); letter-spacing:-.035em; }
.case-card__result { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 10px 22px; font-size:15px; color:var(--muted); }
.case-card__result b { padding:3px 10px; border-radius:8px; background:var(--lime,#c6f432); color:var(--ink); font:800 clamp(28px,2.8vw,38px)/1.05 var(--font-display); letter-spacing:-.04em; }
.case-card .btn { margin:auto 10px 0; }
@media (hover:hover) { .case-card:hover { translate:0 -6px; box-shadow:10px 16px 0 #10122517; } .case-card:hover .case-card__shot img { transform:scale(1.045); } }
.rain-comparison__intro .btn { justify-self:start; margin-top:14px; }
@media (max-width:1000px) { .case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .case-grid { grid-template-columns:1fr; } .rain-comparison__intro .btn { margin-top:20px; } }
.reduce-motion .case-card, .reduce-motion .case-card__shot img { transition:none; }
/* The After is the client's live site (Troy, 2 Nov 2026: "embed her actual site in here ... full quality"). */
.rain-comparison__scrollport--live { position:relative; overflow:hidden; background:#f6f1e8; }
.rain-comparison__scrollport--live::before { content:"Loading the live site…"; position:absolute; inset:0; display:grid; place-items:center; font:600 13px/1.4 var(--font-body); color:#8b8478; }
.rain-live { position:relative; display:block; width:100%; height:100%; border:0; }
/* Buttons that answer the pointer (Troy, 2 Nov 2026: "when I hover over them ... they need to like move"). */
.work-top .btn, .case-card .btn { position:relative; overflow:hidden; isolation:isolate; transition:transform .25s var(--settle), box-shadow .25s var(--settle), background .25s, color .25s, border-color .25s; }
.work-top .btn::after, .case-card .btn::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, #ffffff73 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s var(--settle); pointer-events:none; }
.work-top .btn span[aria-hidden] { display:inline-block; transition:transform .25s var(--settle); }
@media (hover:hover) {
  .work-top .btn:hover, .case-card .btn:hover { transform:translateY(-3px); box-shadow:0 14px 26px -12px #10122566; }
  .work-top .btn:hover::after, .case-card .btn:hover::after { transform:translateX(120%); }
  .work-top .btn:hover span[aria-hidden] { transform:translate(3px,-3px); }
  .case-card .btn:hover { background:var(--lime,#c6f432); border-color:var(--ink); color:var(--ink); }
}
.work-top .btn:active, .case-card .btn:active { transform:scale(.97); }
.reduce-motion .work-top .btn, .reduce-motion .case-card .btn, .reduce-motion .work-top .btn::after, .reduce-motion .case-card .btn::after { transition:none; }

/* Each client's own photo behind their project (Troy, 2 Nov 2026, after VCE: "we used photos to enhance the
   backgrounds"): blurred across the whole block (Troy picked the soft cream wash), and sharp in the headline banner. */
.work-stage { --band-wash:#f6f0e7b8; overflow-x:clip; }
.rain-comparison::before { content:""; position:absolute; z-index:-1; top:-38px; bottom:-38px; left:50%; width:100vw; translate:-50% 0; background:linear-gradient(var(--band-wash), var(--band-wash)), var(--band, none) center/cover no-repeat; }
#project-bee-beauty { --band:url(/assets/img/work-photos/bee-band.webp?v=9042faa9); --photo-at:50% 30%; }
#project-safeguard { --band:url(/assets/img/work-photos/safeguard-band.webp?v=a1278ca0); --photo-at:62% 30%; }
#project-rain-vce { --band:url(/assets/img/work-photos/vce-band.webp?v=c790db9f); --photo-at:50% 40%; }
.rain-comparison__intro { position:relative; isolation:isolate; overflow:hidden; }
/* The photo fills the right of the banner and fades in from the words, so faces stay clear of the dark. */
.rain-comparison__photo { position:absolute; top:0; right:0; bottom:0; z-index:-1; width:64%; height:100%; object-fit:cover; object-position:var(--photo-at, 50% 40%); filter:brightness(.82); -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%); mask-image:linear-gradient(90deg, transparent, #000 45%); }
@media (max-width:760px) {
  .rain-comparison__intro { padding-top:170px; }
  .rain-comparison__photo { bottom:auto; width:100%; height:215px; -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent); mask-image:linear-gradient(180deg, #000 55%, transparent); }
}
@media (min-width:761px) { .rain-comparison__intro .btn { justify-self:end; } }