/* WILD BEAR — site. Brand rules: square corners, no icons, words only.
   Hover and timing tokens copied from the Bigmater site (src/css/site.css): --e, --t1 320ms, --t2 700ms. */
@font-face{font-family:"Outfit";src:url(../fonts/outfit-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fonts/outfit-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fonts/outfit-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Mont";src:url(../fonts/montserrat-900.woff2) format("woff2");font-weight:900;font-display:swap}
:root{--ink:#0D0D0D;--cream:#F2EDE6;--beige:#D8CCBB;--white:#FFFFFF;--mute:#6B6866;--dim:#C9C9C4;--line:#E4E0DA;
--e:cubic-bezier(.16,.84,.24,1);--e-io:cubic-bezier(.76,0,.24,1);--t1:320ms;--t2:700ms;--t3:1200ms;
--pad:clamp(16px,2vw,28px);--logoW:clamp(150px,12.5vw,210px);--head:calc(var(--pad)*2 + 40px)}
*,*::before,*::after{box-sizing:border-box;border-radius:0!important}
body{margin:0;background:var(--white);color:var(--ink);font:300 16px/1.5 "Outfit",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg,video,img{display:block}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lab{font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}
.mute{color:var(--mute)}.small{font-size:13px}
/* hover: colour only, fast (Bigmater) */
.w{font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:color var(--t1) var(--e)}
.w:hover{color:var(--mute)}

/* header: horizontal logo left, words right, on one line */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:var(--pad);background:transparent;transition:box-shadow var(--t1) var(--e)}
.logo{display:flex;align-items:center;gap:calc(var(--logoW)*.045)}
.logo svg{width:var(--logoW);height:auto;overflow:visible}
.logo .mark{width:calc(var(--logoW)*.1168*1.35);height:calc(var(--logoW)*.1168*1.35);object-fit:cover;flex:none;transition:transform 650ms cubic-bezier(.34,1.56,.64,1)}
.logo.off .mark{transform:rotate(-12deg) scale(1.08)}
/* hover on the logo: the letters go wild, then fall back in line */
.lg-g{transform-box:fill-box;transform-origin:50% 50%;transition:transform 650ms cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--gi)*18ms)}
.logo.off .lg-g{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.logo.back .lg-g{transition-duration:900ms}
.top-r{display:flex;align-items:center;gap:30px}
.nl{color:var(--mute)}.nl:hover,.nl[aria-current]{color:var(--ink)}
.lg{margin-left:clamp(10px,2vw,30px);color:var(--mute)}.lg:hover{color:var(--ink)}
/* scrolling pages: the header is a white bar, so content passes under it, never through it */
.is-doc .top{background:var(--white)}
.is-doc.scrolled .top{box-shadow:0 1px 0 var(--line)}

/* fixed home: the strip */
.is-home,.is-home body{height:100%;overflow:hidden;overscroll-behavior:none}
.stage{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.track{position:absolute;left:0;right:0;top:var(--base);height:0}
.it{position:absolute;left:0;bottom:0;width:var(--w);height:var(--h);background:transparent;overflow:hidden;
transform:translate3d(var(--x),0,0);transition:transform 1.3s var(--e),width 1.3s var(--e),height 1.3s var(--e)}
.it:not(.on){cursor:pointer}
.it video,.it img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mmo{position:absolute;left:50%;top:calc(var(--base) + 26px);transform:translateX(-50%);white-space:nowrap;padding:6px 0;transition:color var(--t1) var(--e)}
/* home: one dash per work under the call to action; the current one darker and longer */
.hm-dash{position:absolute;left:50%;top:calc(var(--base) + 72px);transform:translateX(-50%);display:flex;gap:8px;align-items:center}
.hm-dash button{display:block;width:14px;height:2px;background:var(--dim);transition:background var(--t1) var(--e),width var(--t2) var(--e)}
.hm-dash button::before{content:"";display:block;margin:-10px -4px;height:22px}
.hm-dash button:hover{background:var(--mute)}
.hm-dash button[aria-current]{background:var(--dim);width:24px;position:relative}
/* the current dash is the timer: it fills with ink until the strip moves on (--p, 0 to 1, set every frame) */
.hm-dash button[aria-current]::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.legalrow{position:fixed;left:var(--pad);right:var(--pad);bottom:var(--pad);margin:0;display:flex;gap:22px;flex-wrap:wrap;font-size:11px;color:var(--mute);z-index:5}
.legalrow .co{margin-right:auto}
.legalrow a,.legalrow button{font-size:11px;color:inherit;transition:color var(--t1) var(--e)}
.legalrow a:hover,.legalrow button:hover{color:var(--ink)}

/* pages that fit one screen on desktop: header, content, legal row */
.is-fit body{height:100svh;display:flex;flex-direction:column}
.fit{flex:1;min-height:0;padding:calc(var(--head) + 3vh) var(--pad) 3vh}
.is-fit .docf{flex:none}

/* about: picture left, words right */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center}
.a-img{margin:0;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.a-img img{max-width:100%;max-height:100%;width:auto;height:auto}
/* one picture per slide: the extra ones sit on top of the first and cross-fade in */
.a-img{position:relative}
.a-img img{transition:opacity .6s var(--e)}
.a-img img:not(:first-child){position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;opacity:0}
.a-img img:not(:first-child).on{opacity:1}
.a-img:has(img:not(:first-child).on) img:first-child{opacity:0}
.a-t{max-width:36em;display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%}
/* desktop: the words change with the scroll while the picture stays */
.a-slides{display:grid}
.a-sl{grid-area:1/1;visibility:hidden}
.a-sl>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e),transform .9s var(--e)}
.a-sl.on{visibility:visible}
.a-sl.on>*{opacity:1;transform:none}
.a-sl.on>*:nth-child(2){transition-delay:.05s}.a-sl.on>*:nth-child(3){transition-delay:.1s}.a-sl.on>*:nth-child(4){transition-delay:.15s}.a-sl.on>*:nth-child(5){transition-delay:.2s}.a-sl.on>*:nth-child(6){transition-delay:.25s}
.a-sl.out>*{opacity:0;transform:translateY(-22px);transition-duration:.35s;transition-delay:0s}
.a-t{position:relative}
/* dashes on the left: one per text, the current one darker and longer, so you know there is more below */
.a-dash{position:absolute;left:-38px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.a-dash button{display:block;width:14px;height:2px;background:var(--dim);transition:background var(--t1) var(--e),width var(--t2) var(--e)}
.a-dash button::before{content:"";display:block;margin:-8px -6px;height:18px}
.a-dash button:hover{background:var(--mute)}
.a-dash button[aria-current]{background:var(--ink);width:24px}
.a-h{margin:0 0 3vh;font-weight:300;font-size:clamp(28px,2.9vw,48px);line-height:1.05;letter-spacing:-.04em}
.a-t p{margin:0 0 .9em;font-size:clamp(15px,1.1vw,18px);line-height:1.5}
.qas{display:grid;gap:1.6vh}
.qa h3{margin:0 0 3px;font-weight:500;font-size:clamp(14px,1vw,16px)}
.qa p{margin:0;font-size:clamp(14px,1vw,16px);line-height:1.45;color:#2a2928}
.a-note{margin-top:2.4vh!important;font-size:14px!important}
.a-cta{display:inline-block;margin-top:2vh}

/* services: four cards, the whole card opens the email */
.svc{display:flex}
.sv-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:var(--pad);min-height:0}
.sv{display:flex;flex-direction:column;min-height:0;color:var(--ink)}
.sv-img{position:relative;flex:1;min-height:0;background:var(--tone);overflow:hidden}
.sv-img img,.sv-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t3) var(--e)}
.sv:hover .sv-img img{transform:scale(1.03)}
/* labels sit on the picture, on small white boxes (reference: Austen Goodman's work grid) */
.tag{display:inline-block;background:var(--white);color:var(--ink);padding:6px 10px;font-size:12px;line-height:1.2;transition:background var(--t1) var(--e),color var(--t1) var(--e)}
.sv-top{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px 8px}.tag{white-space:nowrap}
.sv-t{font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sv-p{font-weight:500;letter-spacing:.04em}
.sv-note{position:absolute;right:12px;bottom:12px;max-width:calc(100% - 24px);font-size:8px;letter-spacing:.02em;padding:0;white-space:normal;text-align:right;background:none;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.35)}


/* 404 */
.nf{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px}
.nf-h{margin:6px 0 0;font-weight:300;font-size:clamp(34px,4.6vw,72px);letter-spacing:-.04em;line-height:1.05}
.nf p{margin:0}.nf-a{display:inline-block;margin-top:28px}

/* services: "Order" appears in the middle of the picture on hover */
.sv-order{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;padding:12px 22px;transition:opacity var(--t1) var(--e),transform var(--t1) var(--e)}
.sv:hover .sv-order,.sv:focus-visible .sv-order{opacity:1;transform:translate(-50%,-50%)}

/* every page enters the same way */
/* intro (first visit of the session): the bear square in the middle, the name types itself in, then it all lands in the header */
.intro{display:none}
.intro-on .intro{display:flex;position:fixed;inset:0;z-index:90;align-items:center;justify-content:center;background:var(--white);transition:background-color var(--t2) var(--e)}
.intro-fly .intro{background-color:transparent;pointer-events:none}
.in-l{--iw:min(62vw,560px);display:flex;align-items:center;gap:calc(var(--iw)*.045);transform-origin:0 0;will-change:transform}
.in-l svg{width:var(--iw);height:auto;overflow:visible;flex:none}
.in-l .mark{width:calc(var(--iw)*.1168*1.35);height:calc(var(--iw)*.1168*1.35);object-fit:cover;flex:none;opacity:0;transform:scale(.86);transition:opacity 500ms var(--e),transform 700ms var(--e)}
.intro.go .mark{opacity:1;transform:none}
.in-l .lg-g{opacity:0}
.in-l .lg-g.t{opacity:1}
.intro-on .top .logo{opacity:0}
.intro-on:not(.intro-fly) main{animation-play-state:paused}
@media (max-width:760px){.in-l{--iw:min(78vw,420px)}}
/* changing page: you go THROUGH a square doorway into the next page. The page you leave comes towards you and fades
   into white; a square (the brand's square, like the bear's) opens in the middle and grows to fill the screen while
   the new page inside it settles, as if the camera walked into the next room. Going back is the reverse: the page
   shrinks away into the square and the previous one comes forward. Browsers without cross-document view transitions
   (and a skipped one) get the same doorway drawn by body::before over the new page. */
@view-transition{navigation:auto}
::view-transition{background:var(--white)}
::view-transition-group(root){animation-duration:1.3s}
::view-transition-old(root){animation:wb-leave 1s cubic-bezier(.5,0,.2,1) both}
::view-transition-new(root){animation:wb-enter 1.3s cubic-bezier(.7,0,.12,1) both}
@keyframes wb-leave{to{transform:scale(1.22);opacity:0}}
@keyframes wb-enter{from{clip-path:inset(calc(50% - 34px) calc(50% - 34px));transform:scale(1.3)}to{clip-path:inset(0);transform:none}}
.wb-back::view-transition-old(root){z-index:2;animation:wb-step-back 1.1s cubic-bezier(.7,0,.12,1) both}
.wb-back::view-transition-new(root){animation:wb-come-back 1.3s cubic-bezier(.3,0,.12,1) both}
@keyframes wb-step-back{80%{opacity:1}to{clip-path:inset(calc(50% - 34px) calc(50% - 34px));transform:scale(.78);opacity:0}}
@keyframes wb-come-back{from{transform:scale(1.18);opacity:0}to{transform:none;opacity:1}}
/* fallback: a white frame with a square hole that opens to the edges, the page settling behind it */
@keyframes wb-door{from{width:68px;height:68px;visibility:visible}99%{visibility:visible}to{width:142vmax;height:142vmax;visibility:hidden}}
@keyframes wb-settle{from{transform:scale(1.14)}to{transform:none}}
body::before{content:"";position:fixed;left:50%;top:50%;z-index:85;width:142vmax;height:142vmax;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax var(--white);pointer-events:none;visibility:hidden;animation:wb-door 1.3s cubic-bezier(.7,0,.12,1) both}
main{animation:wb-settle 1.3s cubic-bezier(.7,0,.12,1) backwards}
.wb-vt body::before,.wb-first body::before{animation:none;visibility:hidden} /* the intro is the first entrance */
.wb-vt main{animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}body::before{display:none}}

/* consent */
.consent{position:fixed;right:var(--pad);bottom:calc(var(--pad) + 30px);z-index:70;max-width:360px;background:var(--white);border:1px solid var(--ink);padding:18px;font-size:13px;opacity:0;transform:translateY(12px);transition:opacity var(--t2) var(--e),transform var(--t2) var(--e)}
.consent[hidden]{display:none}.consent.on{opacity:1;transform:none}
.consent p{margin:0 0 14px}.consent a{font-weight:500;color:var(--ink);transition:color var(--t1) var(--e)}.consent a:hover{color:var(--mute)}
.consent-a{display:flex;gap:8px;justify-content:flex-end}
.btn{font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:10px 16px;background:var(--ink);color:var(--cream);transition:background var(--t1) var(--e),color var(--t1) var(--e)}
.btn:hover{background:#3a3a38}.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.btn.ghost:hover{background:var(--cream)}

/* legal docs */
.doc{max-width:760px;margin:0 auto;padding:calc(var(--head) + 10vh) var(--pad) 12vh}
.doc h1{margin:0 0 6px;font-weight:300;font-size:clamp(40px,5.4vw,76px);letter-spacing:-.045em;line-height:1}
.doc h2{font-weight:500;font-size:17px;margin:42px 0 8px}
.doc p,.doc li{line-height:1.65;color:#2a2928}.doc a{font-weight:500;color:var(--ink);transition:color var(--t1) var(--e)}.doc a:hover{color:var(--mute)}
.docf .legalrow{position:static;padding:var(--pad);padding-top:0}
html.lenis,html.lenis body{height:auto}.lenis.lenis-stopped{overflow:hidden}

@media (max-width:1000px){}
@media (max-width:760px){:root{--logoW:138px;--head:calc(var(--pad)*2 + 30px)}
.legalrow{gap:6px 14px;font-size:10px}.legalrow .co{width:100%}
.top-r{gap:16px}.nl[data-h=home]{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01s!important}}

.is-fit,.is-fit body{overflow:hidden}

/* touch screens: bigger invisible hit areas on the small word-links (the words themselves don't move) */
@media (pointer:coarse){
.w,.legalrow a,.legalrow button,.doc a,.consent a{position:relative}
.mmo{position:absolute}
.w::after,.legalrow a::after,.legalrow button::after,.doc a::after,.consent a::after{content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}}

/* media can't be dragged out, long-pressed or selected (a deterrent: anything on screen can still be captured) */
img,video{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.sv-dash{display:none}
/* ---------- phones and tablets: every page is one screen; swipe sideways through texts and services ---------- */
@media (max-width:1000px){
.is-fit body{height:100svh}
.legalrow{justify-content:center;text-align:center}.legalrow .co{width:100%;margin-right:0}
.fit{padding:calc(var(--head) + 1.5vh) var(--pad) 1.5vh;display:flex;flex-direction:column;min-height:0}
.dash{display:flex;flex-direction:row;gap:8px;justify-content:center;flex:none}
.dash button{display:block;width:14px;height:2px;background:var(--dim);transition:background var(--t1) var(--e),width var(--t2) var(--e)}
.dash button::before{content:"";display:block;margin:-10px -4px;height:22px}
.dash button[aria-current]{background:var(--ink);width:24px}
[data-snap]{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
[data-snap]::-webkit-scrollbar{display:none}
[data-snap]>*{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
/* about */
.about{display:flex;flex-direction:column;gap:0}
.a-img{flex:none;height:27svh;margin:0 0 1.4vh}
.a-t{position:static;flex:1;min-height:0;min-width:0;width:100%;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;height:auto}
.a-dash{position:static;transform:none;margin:0 0 1.6vh}
.a-slides{flex:1;min-height:0;gap:var(--pad)}
.a-sl{visibility:visible!important;overflow-y:auto;scrollbar-width:none;padding-right:2px}
.a-sl::-webkit-scrollbar{display:none}
.a-sl>*{opacity:1!important;transform:none!important}
.a-h{font-size:26px;margin:0 0 1.6vh}
.a-t p{font-size:14px;margin:0 0 .7em}.qa h3,.qa p{font-size:13.5px}.qas{gap:.9vh}.a-note{margin-top:1.2vh!important;font-size:13px!important}
.a-cta{flex:none;margin-top:1.4vh;text-align:center}
.a-img img{max-height:100%;width:auto;margin:0 auto}
@media (max-height:760px){.a-img{height:24svh}.a-h{font-size:22px}.a-t p,.qa h3,.qa p{font-size:13px}.qas{gap:.8vh}}
/* services */
.svc{flex-direction:column;gap:1.6vh}
.sv-dash{order:-1}
.sv-grid{flex:1;min-height:0;grid-template-columns:none;gap:var(--pad)}
.sv{min-height:0}
}

/* quote form: the chosen card slides left, the form opens beside it, the other cards stack up on the right.
   Geometry (left/top/size, slide distances, durations) is set by site.js; this is only the look. */
.sv{position:relative}
.svc.q-open .sv-order{display:none}
.svc.q-open .sv{will-change:transform} /* the cards slide on the GPU while the form is open */
.svc.q-open .sv.sel{cursor:default}
.sv.sh-r .sv-img{box-shadow:8px 0 22px rgba(13,13,13,calc(.16*var(--sh,0)))}
.sv.sh-l .sv-img{box-shadow:-8px 0 22px rgba(13,13,13,calc(.16*var(--sh,0)))}
.sv-grid{position:relative}
/* the form is a card like the others (same height, flat) and grows out of the chosen card. Behind it, very softly,
   the card's own picture or film carries on: mirrored at the seam so the colours run on, blurred, under a white veil
   that is lighter by the card and almost white on the far side. No card picked: a plain light card. */
.qf{position:absolute;left:0;top:0;width:0;height:0;z-index:25;overflow:hidden;background:var(--white);visibility:hidden}
.qf.open{visibility:visible}
.qf.plain{background:#F6F6F5}
.qf-in{position:absolute;top:0;bottom:0;left:0;box-sizing:border-box;display:flex;flex-direction:column;padding:clamp(18px,1.7vw,28px)}  /* already laid out at full size: the card opening uncovers it like a sheet, nothing fades */
.qf.to-l .qf-in{left:auto;right:0}
.qf-bg{position:absolute;top:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.qf.to-l .qf-bg{left:auto;right:0}
.qf-bgm{position:absolute;inset:-40px;filter:blur(18px);will-change:transform} /* own GPU layer: the blur is not redrawn as the card opens */
.qf-bgm canvas{display:block;width:100%;height:100%}
.qf-veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.87) 40%,rgba(255,255,255,.94))}
.qf.to-l .qf-veil{background:linear-gradient(to left,rgba(255,255,255,.7),rgba(255,255,255,.87) 40%,rgba(255,255,255,.94))}
.qf-top{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.qf-k{color:var(--mute)}
.qf-x{color:var(--mute);padding:6px 0;margin:-6px 0}.qf-x:hover{color:var(--ink)}
.qf-body,.qf-done{flex:1;min-height:0;display:flex;flex-direction:column}
.qf-body[hidden],.qf-done[hidden]{display:none}
.qf-done{justify-content:center}
.qf-h{margin:2vh 0 0;font-weight:300;font-size:clamp(26px,2.3vw,40px);letter-spacing:-.03em;line-height:1.05}
.qf-p{margin:.7vh 0 0;color:var(--mute);font-size:14px}
.qf-done .qf-p{color:var(--ink);max-width:28em}
.qf-f{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:1.3vh;margin-top:2.2vh}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qf-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.qf-lt{font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qf-o,.qf-e{font-weight:400;letter-spacing:.06em;text-transform:lowercase}
.qf-o{color:var(--mute)}
.qf-e{margin-left:.5em}
.qf input:not([type=checkbox]),.qf textarea{box-sizing:border-box;width:100%;margin:0;padding:10px 12px;font:300 15px/1.4 "Outfit",system-ui,sans-serif;color:var(--ink);background:var(--white);border:0;border-radius:0;outline:0;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px transparent;transition:background var(--t1) var(--e),box-shadow var(--t1) var(--e)}
.qf input:not([type=checkbox]):focus,.qf textarea:focus{box-shadow:inset 0 0 0 1px var(--ink)}
.qf .bad input:not([type=checkbox]),.qf .bad textarea{box-shadow:inset 0 0 0 1px var(--ink)}
.qf ::placeholder{color:#9A9792;opacity:1}
.qf-grow{flex:1;min-height:0}
.qf textarea{flex:1;min-height:72px;resize:none}
.qf-c{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;cursor:pointer}
.qf-c input{flex:none;width:14px;height:14px;margin:2px 0 0;-webkit-appearance:none;appearance:none;border:1px solid var(--ink);border-radius:0;background:var(--white);box-shadow:inset 0 0 0 2px var(--white);cursor:pointer;transition:background var(--t1) var(--e)}
.qf-c input:checked{background:var(--ink)}
.qf-c input:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.qf-c a{font-weight:500;transition:color var(--t1) var(--e)}.qf-c a:hover{color:var(--mute)}
.qf-b{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qf-n{font-size:12px;color:var(--mute)}
.qf-send[disabled]{opacity:.55;cursor:default}
.qf-msg{margin:0;font-size:13px}.qf-msg:empty{display:none}
.qf-msg a{font-weight:500;transition:color var(--t1) var(--e)}.qf-msg a:hover{color:var(--mute)}
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* tablets and phones: the form rises as a sheet under the header, the cards stay where they are */
@media (max-width:1000px){
.qf{position:fixed;left:0!important;right:0;top:var(--head);bottom:0;width:auto!important;height:auto!important;transform:translate3d(0,102%,0)!important;clip-path:none!important;box-shadow:0 -12px 40px rgba(13,13,13,.1);transition:transform .7s var(--e),visibility 0s linear .7s!important}
.qf.open{transform:none!important;transition:transform .7s var(--e),visibility 0s!important}
.qf{overflow:visible;background:var(--white)!important}.qf-bg{display:none}
.qf-in{position:static;flex:1;height:100%;width:auto!important;opacity:1!important;overflow-y:auto;overscroll-behavior:contain;padding:var(--pad) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom))}
.qf-grow{flex:none}.qf textarea{flex:none;min-height:130px}
.qf input:not([type=checkbox]),.qf textarea{font-size:16px}
}
@media (max-width:560px){.qf-row{grid-template-columns:1fr}}

/* the bear escapes (hold the square in the header): a 2px ink timer line drawn over the square's own edge */
.logo.hold .mark{transform:none}
.logo .mark.away{visibility:hidden}
.bm{position:fixed;left:0;top:0;z-index:80;pointer-events:none;will-change:transform}
.bm img{position:absolute;display:block;object-fit:cover;visibility:hidden}
.bm.fly img{visibility:visible}
.bm svg{position:absolute;left:0;top:0;z-index:1;overflow:visible;opacity:0;transition:opacity var(--t1) var(--e)}
.bm.timing svg{opacity:1}
.bm .bm-p{stroke:var(--ink)}