/*
Theme Name: Busy Otter Transition
Version: 1.2.0
Description: Busy Otter and Behind The Work transition page.
License: GPL-2.0-or-later
*/
/* Busy Otter blue sampled from supplied original logo. BTW uses monochrome. */
:root{--ink:#202326;--paper:#ffffff;--otter:#126688;--lime:#eeece6;--btw:#202326;--line:#d7d8d9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:1.65}a{color:inherit}a:focus-visible{outline:3px solid #a33a14;outline-offset:6px}.skip{position:absolute;left:20px;top:-100px;z-index:10}.skip:focus{top:20px;background:white;padding:10px}.wrap{max-width:1160px;margin:auto;padding:0 32px}header{padding:26px 0;border-bottom:1px solid var(--line)}.nav{display:flex;justify-content:space-between;align-items:center;gap:24px}.brands{display:flex;align-items:center;gap:22px}.brand{font-weight:900;font-size:22px;line-height:1.05;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:7px}.plus{font-size:25px;font-weight:400;color:var(--otter)}.nav-link{font-size:14px;font-weight:bold;text-decoration:none}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px}.hero{padding:86px 0 80px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:64px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6.8vw,88px);line-height:.99;letter-spacing:-4px;margin-bottom:30px}h1 em{font-style:normal;color:var(--otter)}h2{font-size:clamp(32px,4.1vw,52px);line-height:1.08;letter-spacing:-2px;margin-bottom:24px}h3{font-size:24px;line-height:1.2;letter-spacing:-.6px}.announcement{font-weight:700;font-size:21px;max-width:530px}.hero p:not(.eyebrow){max-width:520px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:16px 22px;background:var(--ink);color:white;text-decoration:none;font-weight:700;font-size:15px;border:2px solid transparent;border-radius:4px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:var(--otter)}.button span{font-size:23px;line-height:1}.hero-art{position:relative;padding:25px 0}.poster{background:var(--otter);color:var(--paper);padding:42px 32px;min-height:395px;border-radius:100px 100px 8px 8px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(3deg)}.poster .word{font-size:clamp(44px,5vw,65px);font-weight:900;line-height:1.02;letter-spacing:-3px}.poster .word:last-child{color:var(--lime)}.poster .rule{height:2px;background:rgba(255,255,255,.5);margin:22px 0}.tag{position:absolute;bottom:0;left:-20px;padding:10px 18px;background:var(--lime);color:var(--ink);font-size:13px;font-weight:700;transform:rotate(-4deg)}.ribbon{background:var(--lime);padding:20px 0;font-size:13px;font-weight:700;letter-spacing:1.5px;text-align:center}.section{padding:88px 0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.muted{color:#535b60}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}.value{padding-top:24px;border-top:2px solid var(--otter)}.number{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--otter);display:block;margin-bottom:16px}.value p{font-size:16px}.culture{background:#f5f4f0}.photo{min-height:270px;border:1px dashed #8b9297;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;background:repeating-linear-gradient(135deg,#f5f4f0,#f5f4f0 16px,#eeece6 16px,#eeece6 17px);color:#485157}.photo span{font-size:12px;letter-spacing:2px;font-weight:700}.photo strong{font-size:25px;margin:12px 0}.photo small{max-width:300px;font-size:14px}.capabilities{background:var(--btw);color:var(--paper)}.capabilities .eyebrow{color:var(--lime)}.services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #65706a;margin:40px 0}.service{padding:24px 12px 24px 0;border-bottom:1px solid #65706a;font-size:16px;font-weight:bold}.payoff{font-size:26px;max-width:660px;line-height:1.4;margin-bottom:0;color:var(--lime)}.note-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}.portrait{min-height:380px}.note-copy{max-width:660px}.signature{margin-top:30px}.signature strong{display:block;font-size:20px}.signature span{font-size:14px}.closing{background:var(--lime);text-align:center;padding:80px 0}.closing p{max-width:550px;margin-left:auto;margin-right:auto}.wink{font-size:14px;margin-top:25px;margin-bottom:0}.footer{background:var(--btw);color:white;padding:28px 0}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:24px}.footer small,.footer a{font-size:12px}.footer-links{display:flex;gap:24px}
@media(max-width:800px){.hero-grid,.intro-grid,.note-grid{grid-template-columns:1fr;gap:38px}.hero{padding:55px 0}.hero-art{max-width:420px;width:100%;margin:auto}.poster{min-height:320px}.services{grid-template-columns:repeat(2,1fr)}.section{padding:60px 0}.portrait{min-height:280px;max-width:450px}.values{gap:18px}h1{letter-spacing:-2.5px}.nav-link{display:none}}@media(max-width:480px){.wrap{padding:0 22px}.brands{gap:15px}.brand{font-size:19px}.values{grid-template-columns:1fr}.value{padding-top:18px}.ribbon{font-size:11px;padding:18px 22px}.footer-row{align-items:flex-start;flex-direction:column}.button{width:100%;gap:20px}.tag{left:0}.poster{padding:35px 28px}.services{column-gap:14px}.service{font-size:14px}.photo{min-height:240px}.closing{padding:60px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}

/* Original logos retain their proportions and colors. */
.logo{display:block;object-fit:contain;height:auto}.logo-otter{width:230px}.logo-btw{width:160px}.footer-brands{display:flex;align-items:center;gap:22px}.footer-otter{width:160px}.footer-btw-panel{padding:12px 15px;background:#fff;border-radius:3px}.footer-btw{width:120px}.poster .word:last-child{color:#fff}.capabilities .eyebrow,.payoff{color:#e0dcd0}.tag{background:#eeece6}.ribbon{background:#eeece6}.closing{background:#f5f4f0}.footer{border-top:5px solid #126688}@media(max-width:600px){.logo-otter{width:170px}.logo-btw{width:125px}}@media(max-width:380px){.logo-otter{width:145px}.logo-btw{width:105px}.brands{gap:10px}}

.team-photo,.john-photo{width:100%;height:auto;display:block;align-self:center;border-radius:6px}.john-photo{align-self:start}.brands{flex-shrink:0}@media(max-width:380px){.logo-otter{width:135px}.logo-btw{width:100px}}