/* BreezyTheSiteDog.com. Colors, type and ink weight come from the cover of The Big Lift. */
@font-face{font-family:Fredoka;src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Andika;src:url(../fonts/andika-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Andika;src:url(../fonts/andika-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--sky:#8FD3F4;--sky2:#B4E4F8;--navy:#1C2A3A;--orange:#FF7A1A;--hill1:#8CCB6A;--hill2:#57AD3E;--hill3:#6CC04A;--paper:#FFFBF2;--mist:#E9F6FD;--red:#E3463D;--line:3px solid var(--navy);--r:18px;--head:Fredoka,"Trebuchet MS",system-ui,sans-serif;--body:Andika,Verdana,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.125rem/1.6 var(--body);color:var(--navy);background:var(--paper)}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.12;margin:0 0 .45em}
h2{font-size:clamp(1.7rem,5.4vw,2.4rem)}
h3{font-size:1.3rem}
p,ul,ol{margin:0 0 1em}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--orange)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.skip{position:absolute;left:8px;top:-80px;z-index:30;background:#fff;padding:10px 14px;border:var(--line);border-radius:12px;font-family:var(--head)}
.skip:focus{top:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.center{text-align:center}

/* header */
.site-head{background:var(--sky);position:relative;z-index:6}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 12px;min-height:60px;max-width:1180px}
.brand{display:flex;align-items:center;gap:10px;font:600 1.12rem var(--head);text-decoration:none;min-height:48px}
.brand img{width:40px;height:40px}
.menu-btn{font:600 1rem var(--head);color:var(--navy);background:#fff;border:var(--line);border-radius:999px;min-height:46px;padding:6px 18px;cursor:pointer}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px}
.nav a{display:flex;align-items:center;min-height:46px;padding:6px 13px;font:600 1rem var(--head);text-decoration:none;border-radius:999px}
.nav a:hover{background:rgba(255,255,255,.55)}
.nav a[aria-current=page]{background:#fff;box-shadow:inset 0 0 0 2px var(--navy)}
@media (max-width:819px){
  .js .nav{display:none;flex-basis:100%}
  .js .nav.open{display:block}
  .js .nav ul{flex-direction:column;gap:8px;padding:6px 0 14px}
  .js .nav a{background:#fff;border:var(--line);font-size:1.1rem;min-height:52px;padding:6px 18px}
}
@media (min-width:820px){.menu-btn{display:none!important}}

/* buttons, cards, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:10px 24px;font:600 1.15rem/1.15 var(--head);color:var(--navy);background:var(--orange);border:var(--line);border-radius:999px;box-shadow:0 4px 0 var(--navy);text-decoration:none;text-align:center;cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:hover{background:#FF8D3A}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.btn.white{background:#fff}
.btn.white:hover{background:var(--mist)}
.btn.block{display:flex;width:100%}
.card{background:#fff;border:var(--line);border-radius:var(--r);box-shadow:0 5px 0 var(--navy);padding:18px}
.card h2{font-size:clamp(1.35rem,5vw,1.7rem);margin-bottom:.25em}
.card>:last-child{margin-bottom:0}
label{display:block;font:600 .95rem var(--head);margin:0 0 4px}
input{width:100%;min-height:52px;font:400 1.1rem var(--body);color:var(--navy);padding:8px 12px;border:var(--line);border-radius:12px;background:#fff}
input::placeholder{color:#5E6E80}
.fields{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;margin:10px 0 12px}
.fine{font-size:.86rem;line-height:1.4;margin:10px 0 0;color:#2F4257}
.form-msg{font-weight:700;margin:10px 0 0}
.form-msg:empty{display:none}
.pill{display:inline-block;font:600 .85rem var(--head);background:var(--hill3);border:2px solid var(--navy);border-radius:999px;padding:1px 12px;margin:0 6px 6px 0}

/* hero */
.hero{background:linear-gradient(var(--sky) 0,var(--sky) 38%,var(--sky2) 100%);position:relative;overflow:hidden}
.hero-top{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px 14px;padding:0 16px;position:relative;z-index:4}
/* the crane: --hw = hook width, --drop = rope from the sheave to the hook picture (in boom-picture px), --s = sheave centre below the top */
.lift-wrap{position:relative;--hw:44px;--drop:26;--s:10px;justify-self:center;padding-top:calc(var(--hw)*var(--drop)/154 + var(--s))}
.lift{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% calc(var(--hw)*var(--drop)/-154);animation:sway 6.5s ease-in-out infinite alternate}
.lift::before{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);height:calc(var(--hw)*(var(--drop) + 4)/154);width:calc(var(--hw)*.1);margin-left:calc(var(--hw)*-.05);border-left:2px solid #4B5C71;border-right:2px solid #4B5C71}
.lift .hook{width:var(--hw);max-width:none}
.lift .slings{width:var(--hw);height:calc(var(--hw)*.32);margin-top:calc(var(--hw)*-.07);max-width:none}
.lift .cover{width:128px;max-width:none;border:var(--line);border-radius:8px;background:#fff;box-shadow:0 6px 0 rgba(28,42,58,.28)}
.boom{position:absolute;max-width:none;width:calc(var(--hw)*428/154);left:calc(50% - var(--hw)*315/154);top:calc(var(--s) - var(--hw)*30/154)}
@keyframes sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
.hero-copy{align-self:center;padding:14px 0 4px}
.hero h1,.page-hero h1{font:700 clamp(2.5rem,11.6vw,4.4rem)/.95 var(--head);color:var(--orange);-webkit-text-stroke:7px var(--navy);paint-order:stroke fill;letter-spacing:.01em;margin:0 0 .2em}
.tagline{font:600 1.08rem/1.25 var(--head);margin:0 0 .35em}
.hero .sub{font-size:.98rem;line-height:1.42;margin:0}
.action{grid-column:1/-1;margin-top:4px}
.scene{position:relative;height:clamp(330px,96vw,410px);margin-top:4px}
.hills{position:absolute;left:0;bottom:0;width:100%;height:62%;max-width:none}
.hills path{vector-effect:non-scaling-stroke}
.turbine{position:absolute;width:calc(44*var(--u));height:calc(196*var(--u))}
.turbine .tower{width:100%;height:100%;max-width:none}
.turbine .rotor{position:absolute;left:calc(-86*var(--u));top:calc(-86*var(--u));width:calc(216*var(--u));height:calc(216*var(--u));max-width:none;animation:spin 6s linear infinite}
.turbine.t1{--u:.62px;right:5%;bottom:38%}
.turbine.t2{--u:.4px;left:21%;bottom:41%}
.turbine.t2 .rotor{animation-duration:4.6s}
.turbine.t3{--u:.5px;left:3%;bottom:40%}
.turbine.t3 .rotor{animation-duration:5.3s;animation-delay:-2.1s}
@keyframes spin{to{transform:rotate(360deg)}}
.flower{position:absolute;width:30px;bottom:3%}
.flower.f1{left:5%}
.flower.f2{right:6%;bottom:7%;width:26px}

/* Breezy on duty */
.stage{position:absolute;left:50%;bottom:2%;width:min(72vw,292px);aspect-ratio:768/912;margin-left:calc(min(72vw,292px)/-2);z-index:3}
.stage .bz{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;-webkit-user-select:none;user-select:none}
.bz-clip{position:absolute;inset:0;clip-path:inset(-40% -40% 19.2% -40%)}
.bz-up{position:absolute;inset:0;transform-origin:50% 80%;animation:pop .95s .35s cubic-bezier(.3,1.5,.5,1) both,bob 3.2s 1.5s ease-in-out infinite alternate}
@keyframes pop{from{transform:translateY(80%)}to{transform:none}}
@keyframes bob{to{transform:translateY(-1.2%)}}
.bz.tail{transform-origin:74.5% 79.3%;animation:wag .5s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-7deg)}to{transform:rotate(11deg)}}
.bz.ear-l{transform-origin:27.7% 18.3%;animation:earl 6.5s ease-in-out infinite;transition:transform .15s}
@keyframes earl{0%,80%,100%{transform:none}84%{transform:rotate(-9deg)}89%{transform:rotate(3deg)}94%{transform:rotate(-5deg)}}
.bz.ear-r{transform-origin:60.4% 11.3%;animation:earr 8s ease-in-out infinite;transition:transform .15s}
@keyframes earr{0%,68%,100%{transform:none}73%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}86%{transform:rotate(4deg)}}
.lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.2s infinite}
@keyframes blink{0%,91%,100%{transform:scaleY(0)}94%,96%{transform:scaleY(1)}}
.bz-tap{position:absolute;left:8%;top:3%;width:78%;height:74%;border:0;border-radius:46%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:2}
.woof-bubble{position:absolute;right:-2%;top:-3%;background:#fff;border:var(--line);border-radius:18px 18px 18px 4px;padding:2px 14px;font:700 1.25rem var(--head);opacity:0;transform:scale(.5);transform-origin:0 100%;transition:opacity .15s,transform .15s;z-index:3}
.stage.woof .woof-bubble{opacity:1;transform:none}
.stage.woof .bz.ear-l{animation:none;transform:rotate(-11deg)}
.stage.woof .bz.ear-r{animation:none;transform:rotate(-8deg)}
.stage.woof .bz.tail{animation-duration:.16s}
.stage.woof .bz-up{animation:hop .45s ease-out}
@keyframes hop{40%{transform:scaleY(1.045)}}
.paused *{animation-play-state:paused!important}

@media (min-width:820px){
  .hero-top{grid-template-columns:minmax(300px,31%) minmax(0,540px);gap:6px 44px;padding:0 24px 0 0;min-height:600px}
  .lift-wrap{--hw:122px;--drop:90;--s:8px;grid-row:1/3;justify-self:start;margin-left:calc(var(--hw)*186/154 - 125px + clamp(34px,4vw,64px))}
  .lift .cover{width:250px}
  .hero-copy{align-self:end;padding-top:46px}
  .hero h1{font-size:clamp(3.6rem,6.2vw,5rem)}
  .tagline{font-size:1.45rem}
  .hero .sub{font-size:1.1rem}
  .action{grid-column:2;align-self:start;margin-top:10px}
  .scene{height:430px;margin-top:-96px}
  .hills{height:50%}
  .stage{left:auto;right:max(1.5%,calc(50% - 640px));margin-left:0;width:300px;bottom:1%}
  .turbine.t1{--u:.95px;right:31%;bottom:21%}
  .turbine.t2{--u:.58px;left:auto;right:47%;bottom:27%}
  .turbine.t3{--u:.76px;left:auto;right:60%;bottom:25%}
  .flower{width:40px}
}
@media (min-width:1100px){.scene{margin-top:-150px}}

/* sections */
.below{border-top:var(--line)}
.sec{padding:44px 0}
.sec.mist{background:var(--mist);border-top:var(--line);border-bottom:var(--line)}
.lead{font-size:1.2rem;max-width:44rem}
.grid{display:grid;gap:18px}
.grid.c4{grid-template-columns:1fr 1fr;gap:18px 14px}
@media (min-width:640px){.grid.c2{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.tile img{width:100%;border:var(--line);border-radius:12px;background:#fff;margin-bottom:10px}
.tile h3{margin-bottom:.2em;font-size:1.12rem}
.tile p{font-size:.95rem;line-height:1.45;margin:0}
@media (min-width:640px){.tile h3{font-size:1.3rem}.tile p{font-size:1rem}}
.door{display:flex;flex-direction:column;text-decoration:none;transition:transform .1s}
.door:hover{transform:translateY(-3px)}
.door h3{font-size:1.45rem}
.door p{font-size:1.02rem;line-height:1.5}
.door .go{margin-top:auto;font:600 1.05rem var(--head);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.specs{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap}
.split{display:grid;gap:24px;align-items:center}
@media (min-width:760px){.split{grid-template-columns:1fr 1fr}.split.narrow{grid-template-columns:240px 1fr}}

/* inner pages */
.page-hero{background:linear-gradient(var(--sky),var(--sky2));padding:18px 0 0;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.2rem,9vw,3.6rem);-webkit-text-stroke-width:6px}
.page-hero .lead{font:600 1.15rem/1.35 var(--head);max-width:38rem;margin-bottom:0}
.page-hero .hills{position:static;height:64px;margin-top:10px}
.prose{max-width:46rem}
.prose h2{margin-top:1.4em}
.prose h2:first-child{margin-top:0}
.prose li{margin-bottom:.4em}
.crew{display:grid;gap:22px}
.crew .who{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center}
.crew .who img{width:118px}
.crew .who p{margin:0;font-size:1.05rem}
@media (min-width:760px){.crew{grid-template-columns:repeat(3,1fr)}.crew .who{grid-template-columns:1fr;text-align:center;align-items:start}.crew .who img{width:auto;height:250px;margin:0 auto}}
.dl{display:grid;gap:14px;margin:0 0 1em;padding:0;list-style:none}
.dl li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}
.dl img{width:96px;border:var(--line);border-radius:10px;background:#fff}
.dl h3{margin:0 0 .15em}
.dl p{margin:0 0 .4em;font-size:1rem;line-height:1.45}
details{border:var(--line);border-radius:14px;background:#fff;margin-bottom:10px}
summary{font:600 1.12rem var(--head);padding:14px 16px;cursor:pointer;min-height:52px}
details>div{padding:0 16px 14px}
details>div>:last-child{margin-bottom:0}

/* footer */
.bandana{height:30px;border-top:var(--line);border-bottom:var(--line);background:radial-gradient(circle at 6px 7px,#fff 3.1px,transparent 3.7px) 0 0/24px 24px,radial-gradient(circle at 18px 19px,#fff 3.1px,transparent 3.7px) 0 0/24px 24px,var(--red)}
.site-foot{background:var(--navy);color:#fff;padding:30px 0 34px;font-size:1rem}
.site-foot :focus-visible{outline-color:#fff}
.site-foot ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 18px}
.site-foot a{display:inline-flex;align-items:center;min-height:44px}
.site-foot p{margin:0 0 .5em}
.site-foot .small{font-size:.88rem;opacity:.85}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.site-head,.site-foot,.bandana,.scene{display:none}}