/* Contact, "The front desk". Loaded only on the Contact template, after home.css and forms.css.
   1. the desk photo with tappable lamp, phone, bell and pad   2. the message pad + board   3. notices: map + quick answers */

.fd{--paper:#F6F2E3;--paper2:#e4dcc2;overflow-x:clip}
.fd button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fd img{display:block;max-width:100%;height:auto}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fd .eyebrow{color:var(--lime)}

/* ---------- 1. the desk: one photo, with the lamp, phone, bell and pad made tappable ----------
   Everything over the photo is placed in % of the photo (--l/--t/--w/--h, or --x/--y for centered bits),
   so it stays locked to the picture at any width. Wide photo from 760px up, tall photo below that. */
.fd-desk{position:relative;color:#fff;background:#2a0430;container-type:inline-size}
.fd-head{position:absolute;z-index:4;left:27%;right:23%;top:calc(3% + 60px);pointer-events:none}
.fd-head a{pointer-events:auto}
.fd-head h1{margin-top:12px;font-weight:800;letter-spacing:-.055em;line-height:.92;font-size:clamp(34px,5.1cqw,104px);text-wrap:balance}
.fd-head h1 em{font-style:italic;font-weight:300;color:var(--lime)}
.fd .fd-lede{margin-top:clamp(12px,1.2cqw,22px);max-width:36ch;font-size:clamp(14px,1.22cqw,22px);line-height:1.5;color:rgba(255,255,255,.82)}

.fd-scene{position:relative;aspect-ratio:var(--ar,1.8333);--img:url(../images/desk/office-desk.webp)}
/* the photo can be cropped on phones: --cx/--cy/--cw/--ch pick the visible part, everything inside .fd-crop stays in % of the full photo */
.fd-frame{position:absolute;inset:0;overflow:hidden}
.fd-crop{position:absolute;left:calc(-100% * var(--cx,0) / var(--cw,100));top:calc(-100% * var(--cy,0) / var(--ch,100));width:calc(100% * 100 / var(--cw,100));height:calc(100% * 100 / var(--ch,100));container-type:inline-size}
.fd-photo{position:absolute;inset:0;background:var(--img) 0 0/100% 100% no-repeat;filter:brightness(.72) saturate(.85);transition:filter .16s}
.lit .fd-photo{filter:none}
.fd-layer,.fd-hot{position:absolute;left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%)}
.fd-layer{background-image:var(--img);background-repeat:no-repeat;clip-path:var(--clip);transform-origin:50% 97%;
  background-size:calc(10000% / var(--w)) calc(10000% / var(--h));
  background-position:calc(var(--l) / (100 - var(--w)) * 100%) calc(var(--t) / (100 - var(--h)) * 100%)}
.fd-l-phone{--l:28.90;--t:52.90;--w:15.10;--h:20.40;--clip:polygon(2.6% 21.1%,9.2% 11.3%,25.2% 5.4%,59.2% 2.5%,87.8% 5.4%,98.0% 15.2%,96.6% 27.9%,90.5% 32.8%,95.9% 64.2%,97.3% 91.2%,91.8% 97.5%,25.2% 97.5%,19.0% 89.7%,19.0% 49.5%,21.8% 35.8%,1.5% 34.5%)}
.fd-l-bell{--l:56.20;--t:59.90;--w:8.40;--h:13.40;--clip:polygon(42.9% 3.7%,54.8% 3.7%,56.0% 20.9%,76.2% 28.4%,85.7% 42.5%,88.1% 60.4%,96.4% 67.9%,96.4% 87.3%,81.0% 96.3%,15.5% 96.3%,3.6% 87.3%,3.6% 67.9%,11.9% 60.4%,13.1% 42.5%,22.6% 28.4%,41.7% 20.9%)}

/* lamp light */
.fd-glow{position:absolute;z-index:1;left:calc(var(--gx) * 1%);top:calc(var(--gy) * 1%);width:80%;aspect-ratio:1.5;transform:translate(-50%,-34%);pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,232,150,.3),rgba(230,240,120,.08) 50%,rgba(230,240,120,0));--gx:19;--gy:36}
.lit .fd-glow{opacity:1;animation:fdFlick .55s steps(1) 1}
@keyframes fdFlick{0%{opacity:.6}18%{opacity:.1}34%{opacity:.85}48%{opacity:.25}62%{opacity:1}}

/* tappable spots: a warm glow on hover so people know they can touch things */
.fd-hot{z-index:3;display:block;border-radius:18px;cursor:pointer}
.fd-hot::after{content:"";position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,160,.16),rgba(255,226,160,0));opacity:0;transition:opacity .3s}
.fd-hot:hover::after,.fd-hot:focus-visible::after,.fd-hot[aria-expanded=true]::after{opacity:1}
.fd .fd-hot:focus-visible{outline:2.5px solid var(--lime);outline-offset:2px}
.fd-h-lamp{--l:10;--t:28;--w:17;--h:44}
.fd-h-phone{--l:25;--t:52;--w:19.5;--h:22}
.fd-h-bell{--l:55.5;--t:58.5;--w:9.8;--h:15}
.fd-h-pad{--l:67.5;--t:64;--w:20.5;--h:12}

/* the phone rings: the phone itself shakes and ring lines come off the handset */
.fd-ring{position:absolute;z-index:3;top:-2%;width:10%;aspect-ratio:.7;opacity:0;pointer-events:none}
.fd-ring-l{left:14%}
.fd-ring-r{right:-9%}
.fd-ring i{position:absolute;top:50%;border:max(2px,.22cqw) solid transparent;border-radius:50%}
.fd-ring-l i{border-left-color:var(--lime);right:0}
.fd-ring-r i{border-right-color:var(--lime);left:0}
.fd-ring i:nth-child(1){width:40%;height:44%;margin-top:-22%}
.fd-ring i:nth-child(2){width:70%;height:72%;margin-top:-36%}
.fd-ring i:nth-child(3){width:100%;height:100%;margin-top:-50%}
.fd-scene.ring .fd-l-phone{animation:fdRattle .15s linear 7}
.fd-scene.ring .fd-ring-l,.fd-scene.ring .fd-ring-r{animation:fdRing .55s ease-out 2}
@keyframes fdRattle{0%,100%{transform:none}25%{transform:translateY(-1.5px) rotate(-1.2deg)}75%{transform:translateY(-1.5px) rotate(1.2deg)}}
@keyframes fdRing{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

/* the bell dings */
.fd-ring-b{left:50%;top:-14%;width:46%;aspect-ratio:1;transform:translateX(-50%)}
.fd-ring-b i{inset:0;top:0;border-color:var(--lime)}
.fd-scene.ding .fd-l-bell{animation:fdDing .9s cubic-bezier(.3,.7,.4,1)}
.fd-scene.ding .fd-ring-b{opacity:1}
.fd-scene.ding .fd-ring-b i{animation:fdRipple .8s ease-out both}
.fd-scene.ding .fd-ring-b i:nth-child(2){animation-delay:.12s}
.fd-scene.ding .fd-ring-b i:nth-child(3){animation-delay:.24s}
@keyframes fdDing{0%{transform:none}7%{transform:translateY(2px) scaleY(.97)}16%{transform:none}30%{transform:rotate(-2.6deg)}46%{transform:rotate(2deg)}62%{transform:rotate(-1.2deg)}78%{transform:rotate(.6deg)}100%{transform:none}}
@keyframes fdRipple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}

/* slips that slide out from under the counter */
.fd-slip{position:absolute;z-index:6;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:min(372px,calc(100vw - 36px));padding:16px 18px;border-radius:4px;
  background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;transform:translate(-50%,-16px) rotate(-1deg);
  transition:opacity .2s,transform .45s var(--ease),visibility 0s .45s}
.fd-slip::before{content:"";position:absolute;left:12px;right:12px;top:7px;border-top:1.5px dashed rgba(28,18,32,.22)}
.fd-slip.open{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(-1deg);transition:opacity .2s,transform .45s var(--ease),visibility 0s}
.fd-s-phone{--x:36.5;--y:80}
.fd-s-bell{--x:60.2;--y:80}
.fd-slip-k{display:block;margin-top:6px;font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.fd-slip-big{display:block;margin-top:6px;font-weight:800;letter-spacing:-.04em;font-size:clamp(26px,2.6vw,32px);line-height:1.05;font-variant-numeric:tabular-nums}
.fd-slip-mail{font-size:clamp(15px,1.5vw,17.5px);letter-spacing:-.02em;overflow-wrap:anywhere}
.fd-slip-big:hover{color:var(--purple)}
.fd-slip-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fd .fd-chip{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:var(--ink);color:#fff;font:800 13.5px/1 var(--sans);transition:background .2s}
.fd .fd-chip:hover{background:var(--purple)}

/* below the counter */
.fd-base{position:relative;z-index:1;background:#2a0430;padding:16px 18px 20px}
.fd-plate{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font:500 clamp(11.5px,1vw,13.5px)/1.4 var(--mono);letter-spacing:.04em;color:rgba(255,255,255,.6)}
.fd-plate a:hover{color:var(--lime)}

/* headline sits above the photo when there is not enough wall to write on */
@media(max-width:999px){
  .fd-head{position:relative;left:auto;right:auto;top:auto;padding:clamp(100px,14vw,130px) max(18px,env(safe-area-inset-left,0px)) 6px}
  .fd-head h1{font-size:clamp(40px,9cqw,76px)}
  .fd .fd-lede{font-size:16px}
  .fd-photo{-webkit-mask:linear-gradient(180deg,transparent 0,#000 10%);mask:linear-gradient(180deg,transparent 0,#000 10%)}
  .fd-scene{--img:url(../images/desk/office-desk-1600.webp)}
}
@media(min-width:1000px) and (max-width:1100px){.fd-scene{--img:url(../images/desk/office-desk-1600.webp)}}
@media(max-width:759px){
  .fd-scene{--cx:21;--cy:36;--cw:50;--ch:64;--ar:1.432}
  .fd-glow{width:170%}
  .fd-h-pad{display:none}
  .fd-slip{left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px));top:83%;width:auto;transform:translateY(-16px) rotate(-1deg)}
  .fd-slip.open{transform:rotate(-1deg)}
  .fd-ring{width:12%}
  .fd-plate{flex-direction:column;align-items:center;gap:2px}.fd-plate>span{display:none}
}

/* ---------- 2. the message pad + board ---------- */
.fd-back::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.035) calc(25% - 1px) 25%)}
.fd-back{position:relative;overflow:clip;padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,100px);color:#fff;background:linear-gradient(180deg,#2a0430 0%,#33053a 100%)}
.fd-back-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr);gap:clamp(30px,5vw,76px);align-items:start}
.fd-padarea{position:relative;padding-left:16px}
.fd-pad{--coil:30px;position:relative;z-index:1;padding:0 8px 10px 0;border-radius:6px;background:var(--deep)}
.fd-pad::before{content:"";position:absolute;left:0;top:0;right:8px;bottom:10px;border-radius:4px;transform:translate(4px,5px);background:var(--paper2)}
.fd-coil{position:absolute;z-index:3;left:-16px;top:14px;bottom:18px;width:48px;pointer-events:none;background-size:48px 30px;background-repeat:repeat-y;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236e5220'/%3E%3Cstop offset='.45' stop-color='%23f6e2a2'/%3E%3Cstop offset='.7' stop-color='%23c79f4a'/%3E%3Cstop offset='1' stop-color='%23866322'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='36' cy='17' rx='3.6' ry='4.4' fill='%232b1d24'/%3E%3Cpath d='M10 24 C 2 12, 20 3, 36 14' fill='none' stroke='%23573f17' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M10 24 C 2 12, 20 3, 36 14' fill='none' stroke='url(%23g)' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.fd-sheet{position:relative;z-index:2;border-radius:4px;background:var(--paper);color:var(--ink);
  padding:clamp(28px,3.4vw,46px) clamp(20px,3.4vw,46px) clamp(28px,3.2vw,42px) calc(var(--coil) + clamp(14px,2.2vw,30px))}
.fd-sheet-k{display:inline-block;padding-bottom:6px;border-bottom:3px double var(--purple);font:500 11px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--purple)}
.fd-sheet h2{margin-top:14px;font-weight:800;letter-spacing:-.05em;line-height:.98;font-size:clamp(32px,3.8vw,52px)}
.fd-sheet h2 em{font-style:italic;font-weight:300;color:var(--purple)}
.fd-form[hidden]{display:none}
.fd-form{display:grid;gap:20px;margin-top:clamp(20px,2.6vw,30px)}
.fd-to{display:flex;align-items:baseline;gap:14px;padding:4px 0 9px;border-bottom:1.5px solid rgba(28,18,32,.2);font-weight:700;font-size:16px}
.fd-to span,.fd-fld>span,.fd-topic legend{font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.fd-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 26px}
.fd-fld{display:grid;gap:3px}
.fd-fld input,.fd-fld textarea{width:100%;min-width:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:600 17px/1.3 var(--sans);-webkit-appearance:none;appearance:none}
.fd-fld input{padding:8px 0 8px;border-bottom:1.5px solid rgba(28,18,32,.28)}
.fd-fld input::placeholder{color:rgba(28,18,32,.32);font-weight:500}
.fd-fld input:focus,.fd-fld textarea:focus{outline:none;border-bottom-color:var(--purple);box-shadow:inset 0 -1.5px 0 var(--purple)}
.fd-msg textarea{min-height:170px;resize:vertical;padding:0 2px;font-weight:500;font-size:16.5px;line-height:34px;
  background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(28,18,32,.2) 33px 34px);background-attachment:local}
.fd-msg textarea:focus{box-shadow:none;background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(133,13,140,.55) 33px 34px);background-attachment:local}
.fd-topic{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.fd-topic legend{padding:0;margin-bottom:12px}
.fd-box{position:relative;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;cursor:pointer}
.fd-box input{position:absolute;opacity:0;width:1px;height:1px}
.fd-box i{position:relative;flex:0 0 20px;height:20px;border:2px solid var(--ink);border-radius:3px}
.fd-box i::after{content:"";position:absolute;left:4px;top:-2px;width:7px;height:13px;border:solid var(--purple);border-width:0 3px 3px 0;transform:rotate(40deg) scale(0);transform-origin:60% 80%;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.fd-box input:checked+i::after{transform:rotate(40deg) scale(1)}
.fd-box input:focus-visible+i{outline:3px solid var(--lime);outline-offset:3px}
.fd .fd-send{justify-self:start;padding:15px 26px;border-radius:999px;background:var(--purple);color:#fff;font:800 15px/1 var(--sans);transition:background .2s}
.fd .fd-send:hover{background:var(--ink)}
.fd .fd-send:disabled{opacity:.6;cursor:wait}
.fd .st-err{margin:0}
.fd-done{margin-top:clamp(20px,2.6vw,30px);min-height:260px}
.fd-done:focus{outline:none}
.fd-done h3{font-weight:800;letter-spacing:-.045em;line-height:1;font-size:clamp(32px,3.6vw,48px)}
.fd-done p{margin-top:12px;max-width:42ch;font-size:16.5px;line-height:1.5}
.fd-done .fd-done-k{display:inline-block;margin-top:22px;padding:6px 10px;border:2px solid var(--purple);border-radius:4px;transform:rotate(-3deg);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.fd-pencil{position:absolute;z-index:4;right:-26px;bottom:-34px;width:clamp(110px,15vw,200px);transform:rotate(14deg);pointer-events:none}
.fd-fly{z-index:300;margin:0;pointer-events:none;border-radius:2px;box-sizing:border-box;transform-origin:50% 50%}

/* the board (corkboard from Main Street) */
.cork{border:clamp(14px,2vw,24px) solid #b98a52;border-image:url(../images/street/board.webp) 24 stretch;
  background:#c79b6b url(../images/street/cork.webp) repeat;background-size:252px 336px;background-clip:padding-box}
.fd .pin{position:absolute;z-index:2;left:50%;top:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--purple);border:3px solid #fff}
.fd-board{color:var(--ink)}
.fd-board-in{display:grid;gap:clamp(26px,3vw,36px);padding:clamp(20px,2.6vw,32px) clamp(16px,2.2vw,28px) clamp(26px,3vw,36px)}
.fd-label{display:inline-block;padding:5px 10px 4px;transform:rotate(-2deg);background:var(--ink);color:var(--lime);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.fd-slot{display:grid;place-items:center;min-height:150px;margin-top:12px;border:2px dashed rgba(28,18,32,.32);border-radius:6px}
.fd-slot-hint{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(28,18,32,.55)}
.fd-slot.has{border-color:transparent;place-items:start center;padding-top:14px}
.fd-note{position:relative;width:min(100%,290px);padding:20px 16px 14px;transform:rotate(-3deg);background:var(--paper);color:var(--ink)}
.fd-note-k{display:block;font:500 9.5px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--purple)}
.fd-note b{display:block;margin-top:6px;font-weight:800;font-size:15.5px;letter-spacing:-.02em}
.fd-note i{display:block;margin-top:2px;font:normal 500 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fd-note p{margin-top:8px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.fd-note.pop{animation:fdPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes fdPop{0%{transform:rotate(-3deg) scale(.9)}100%{transform:rotate(-3deg) scale(1)}}
.fd-card{position:relative;padding:24px 20px 18px;transform:rotate(1.2deg);background:#fff}
.fd-card h3{font-weight:800;letter-spacing:-.035em;font-size:21px}
.fd-card ol{list-style:none;margin:12px 0 0;padding:0;display:grid}
.fd-card li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1.5px solid rgba(28,18,32,.12);font-size:15px;line-height:1.4}
.fd-card li b{font-weight:800;font-size:22px;letter-spacing:-.05em;color:var(--purple)}
.fd-sticky{position:relative;display:grid;gap:8px;justify-items:start;padding:26px 20px 20px;transform:rotate(-1.6deg);background:var(--lime);color:var(--ink)}
.fd-tape2{position:absolute;left:50%;top:-11px;width:92px;height:24px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,255,255,.55)}
.fd-sticky p{font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1.15}
.fd-sticky a{font-weight:800;font-size:17px;border-bottom:2.5px solid var(--ink);padding-bottom:1px}
.fd-sticky a:hover{color:var(--purple);border-color:var(--purple)}
.fd-sticky small{font-size:13.5px;line-height:1.4;opacity:.78}

/* ---------- 3. notices: map + quick answers ---------- */
.fd-notices{position:relative;padding:clamp(20px,3vw,40px) 0 clamp(70px,9vw,130px);color:#fff;background:linear-gradient(180deg,#33053a,#2a0430 100%)}
.fd-nhead h2{margin-top:12px;font-weight:800;letter-spacing:-.055em;line-height:.96;font-size:clamp(40px,6.4vw,84px)}
.fd-nhead h2 em{font-style:italic;font-weight:300;color:var(--lime)}
.fd-nboard{margin-top:clamp(24px,3vw,40px);color:var(--ink)}
.fd-nboard-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,3.6vw,48px);padding:clamp(28px,3.4vw,48px) clamp(16px,3vw,44px)}
.fd .fd-map{position:relative;align-self:start;padding:24px 22px 22px;transform:rotate(-1deg);background:var(--paper)}
.fd-map figcaption{display:grid;gap:4px}
.fd-map-k{font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
.fd-map figcaption b{font-weight:800;letter-spacing:-.04em;font-size:clamp(22px,2.2vw,28px);line-height:1.05}
.fd-map figcaption em{font-style:italic;font-weight:300;color:var(--purple)}
.fd-map svg{display:block;width:100%;height:auto;margin-top:12px;overflow:hidden}
.fd-map p{margin-top:10px;font-size:14.5px;line-height:1.5}
.fd-map-ring{fill:none;stroke:rgba(133,13,140,.28);stroke-width:1.5;stroke-dasharray:3 6}
.fd-river{fill:none;stroke:#8ea2d6;stroke-width:9;stroke-linecap:round;opacity:.75}
.fd-rlabel{font:italic 300 11px var(--sans);fill:#5a6ea8;letter-spacing:.04em}
.fd-state{font:500 9px var(--mono);letter-spacing:.32em;fill:rgba(28,18,32,.34)}
.fd-town circle{fill:var(--purple);stroke:var(--paper);stroke-width:2}
.fd-town text{font:700 11.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.fd-town.hub circle{fill:var(--lime);stroke:var(--ink);stroke-width:2.5}
.fd-town.hub text{font-weight:800;font-size:14px}
.fd-stamp{display:inline-block;margin-top:10px;padding:5px 8px 4px;border:2px solid var(--purple);border-radius:4px;transform:rotate(-7deg);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.fd-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,34px) clamp(16px,2vw,26px);align-items:start}
.fd-q{position:relative;transform:rotate(var(--r,0deg));background:var(--paper);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.fd-q:nth-child(2){background:#fff}
.fd-q:nth-child(3){background:#EEF4C4}
.fd-q:nth-child(4){background:#EEDDF0}
.fd-q:nth-child(5){background:#fff}
.fd-q[open]{transform:rotate(0deg)}
.fd-q summary{position:relative;display:block;list-style:none;cursor:pointer;padding:24px 42px 18px 18px;font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.25}
.fd-q summary::-webkit-details-marker{display:none}
.fd-q summary::after{content:"+";position:absolute;right:16px;top:20px;font-weight:300;font-size:26px;line-height:1;color:var(--purple);transition:transform .25s var(--ease)}
.fd-q[open] summary::after{transform:rotate(45deg)}
.fd-a{padding:12px 18px 18px;border-top:1.5px dashed rgba(28,18,32,.25);transform-origin:50% 0}
.fd-q[open] .fd-a{animation:fdUnfold .4s var(--ease)}
@keyframes fdUnfold{from{opacity:0;transform:perspective(700px) rotateX(-75deg)}to{opacity:1;transform:none}}
.fd-a p{font-size:14.5px;line-height:1.5}
.fd-a a{color:var(--purple);font-weight:700;border-bottom:1.5px solid currentColor}
.fd-q:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,calc(50% - 13px))}

/* ---------- smaller screens ---------- */
@media(max-width:980px){
  .fd-back-in{grid-template-columns:minmax(0,1fr)}
  .fd-board{max-width:560px;width:100%;justify-self:center}
  .fd-nboard-in{grid-template-columns:minmax(0,1fr)}
  .fd-map{max-width:520px;width:100%;justify-self:center}
}
@media(max-width:760px){
  .fd-row2{grid-template-columns:minmax(0,1fr)}
  .fd-topic{grid-template-columns:minmax(0,1fr)}
  .fd-qs{grid-template-columns:minmax(0,1fr)}
  .fd-q:last-child:nth-child(odd){width:100%}
  .fd-pencil{right:-14px;bottom:-30px;width:110px}
  .fd-sheet{padding-right:18px}
  .fd-town text{font-size:15px}.fd-town.hub text{font-size:17px}.fd-state{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .fd-scene.ring .fd-l-phone,.fd-scene.ring .fd-ring,.fd-scene.ding .fd-l-bell,.fd-scene.ding .fd-ring-b i,.lit .fd-glow,.fd-q[open] .fd-a,.fd-note.pop{animation:none}
  .fd-slip,.fd-slip.open,.fd-q,.fd-box i::after{transition:none}
}

/* v2.16.32: the front of the desk fills the space under the counter */
.fd-front{position:absolute;left:0;right:0;top:82.4%;bottom:0;background:url(../images/desk/desk-front.webp) 50% 0/100% auto no-repeat;filter:brightness(.72) saturate(.85);transition:filter .16s}
.lit .fd-front{filter:none}
.fd-scene + .fd-base{display:none}

/* v2.16.37 phones: show the whole desk (lamp, phone, bell, notepad); the phone and bell slips open in the page flow, under the photo */
@media(max-width:759px){
  .fd-scene{--cx:8;--cy:18;--cw:83;--ch:66;--ar:2.305;aspect-ratio:auto;height:auto;padding-top:calc(100% / var(--ar))}
  .fd-frame{inset:0 0 auto 0;aspect-ratio:var(--ar)}
  .fd-h-pad{display:block}
  .fd-ring{width:9%}
  .fd-slip{position:relative;left:auto;right:auto;top:auto;width:auto;margin:0 18px;display:none;transform:none}
  .fd-slip.open{display:block;margin:14px 18px 6px;transform:rotate(-1deg)}
}

/* v2.16.38 phones get their own desk photo: everything on the counter closer together, no crop needed */
@media(max-width:759px){
  .fd-scene{--img:url(../images/desk/office-desk-phone.webp);--cx:0;--cy:0;--cw:100;--ch:100;--ar:1.7917}
  .fd-scene .fd-front{display:none}
  .fd-scene .fd-l-phone{--l:33.2;--t:57.9;--w:13.4;--h:16.3;--clip:polygon(3% 16%,20% 3%,80% 3%,97% 16%,95% 42%,93% 97%,9% 97%,6% 42%)}
  .fd-scene .fd-l-bell{--l:49.6;--t:61.5;--w:8.2;--h:12.5}
  .fd-scene .fd-h-lamp{--l:15;--t:33;--w:17.5;--h:41}
  .fd-scene .fd-h-phone{--l:28;--t:56;--w:19.5;--h:19}
  .fd-scene .fd-h-bell{--l:49;--t:60;--w:9.5;--h:15}
  .fd-scene .fd-h-pad{--l:61;--t:66;--w:20;--h:10}
  .fd-scene .fd-glow{--gx:23;--gy:40}
}

/* v2.16.42 brass name plates under the desk: the three ways to reach us, spelled out */
.fd-plates{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;padding:clamp(26px,3vw,40px) 18px clamp(30px,3.4vw,46px);background:linear-gradient(#2a0430,#2a0430)}
.fd-plate{display:inline-flex;align-items:center;gap:12px;min-width:220px;padding:12px 20px 12px 14px;border:0;border-radius:6px;cursor:pointer;text-align:left;text-decoration:none;color:#2b1a08;font:inherit;
  background:linear-gradient(135deg,#e7c987 0%,#c49a52 38%,#e9cf93 62%,#a97c3c 100%);position:relative;transition:transform .2s,filter .2s}
.fd-plate::before,.fd-plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f6e2b0,#7a5524)}
.fd-plate::before{left:5px}.fd-plate::after{right:5px}
.fd-plate svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:#2a0430;fill:var(--lime)}
.fd-plate b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.fd-plate small{display:block;margin-top:2px;font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.fd-plate:hover,.fd-plate:focus-visible{transform:translateY(-2px);filter:brightness(1.06)}
.fd .fd-plate:focus-visible{outline:2.5px solid var(--lime);outline-offset:3px}
@media(max-width:759px){
  .fd-plates{flex-direction:column;align-items:stretch;gap:10px;padding:22px 18px 8px}
  .fd-plate{min-width:0}
}
.fd .fd-plates .fd-plate{background:linear-gradient(135deg,#e7c987 0%,#c49a52 38%,#e9cf93 62%,#a97c3c 100%)!important;color:#2b1a08!important;-webkit-text-fill-color:#2b1a08}
.fd .fd-plates .fd-plate span{display:block!important;color:inherit!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;opacity:1!important}
.fd .fd-plates .fd-plate b,.fd .fd-plates .fd-plate small{color:inherit!important}
.fd .fd-plates .fd-plate{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;margin:0!important;width:auto}
@media(max-width:759px){.fd .fd-plates .fd-plate{padding:11px 18px 11px 14px!important}}