/* Sunspot Strategy website, round 3: warm daylight.
   Sections: Mess to order (a walnut desk where the pile sorts itself into four trays as the lights come on), the Monday note, services, how it works, principles, founding clients, booking under the rising sun, and the footer. */
.sec{padding-top:var(--sp)}
.band{margin-top:var(--sp);padding-block:var(--sp-band);background:var(--band)}

/* Mess to order: paper scraps on a desk. app.js moves each one between its spot on the pile (its inline --x/--y/--w/--h/--r/--z) and its tray; the CSS draws the pile before that runs. */
.sort-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.sort-head > div{max-width:720px}
.sort-head > .lede{max-width:440px}
.hand{position:relative;z-index:0;display:inline-block;padding:0 .14em;font:700 1.2em/.9 var(--f-hand);letter-spacing:0;color:var(--ink)}
.hand::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.24em;bottom:.04em;border-radius:.2em .36em .26em .42em;background:#F7D96B;transform:rotate(-3deg) skewX(-10deg)}
.fired{display:inline-block;color:var(--hot);background:linear-gradient(100deg,#E8641A,#B23A0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sort-stage{margin-top:48px}
.desk-top{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 16px}
.desk-top p{font:600 15px/20px var(--f-body);color:var(--ink)}
.desk-top .now{display:grid}
.desk-top .now span{grid-area:1/1}
.desk-top .is{opacity:0}
.desk-top .meta{font-size:14px;color:var(--ink-3)}
.desk{--kpx:clamp(.6px,100vw / 1216,1px);--yk:1;position:relative;height:560px;margin-top:12px;overflow:hidden;isolation:isolate;border-radius:28px;background:radial-gradient(120% 90% at 40% 30%,#5A4030,#3F2C21 60%,#33241B);box-shadow:inset 0 0 0 1px rgb(42 26 16 / .3),inset 0 26px 60px -34px rgb(0 0 0 / .5),var(--shadow)}
/* Sorted, the lights come on: a warm daylight layer fades in over the walnut as the slider moves */
.desk-grid{position:absolute;inset:0;opacity:0;background:radial-gradient(900px 560px at 92% -12%,rgb(255 200 110 / .6),transparent 62%),#FFF7EA}
.cup{position:absolute;left:36%;top:150px;width:130px;height:130px;border-radius:50%;border:7px solid rgb(28 14 6 / .2);box-shadow:inset 0 0 0 3px rgb(28 14 6 / .08),0 0 0 2px rgb(28 14 6 / .07)}
.lanes{position:absolute;inset:0;opacity:0}
.lane{position:absolute;border-radius:20px}
.lane:nth-child(1){background:#FBF1C9}
.lane:nth-child(2){background:#EDF4E0}
.lane:nth-child(3){background:#FFE8D6}
.lane:nth-child(4){background:#FBE4E6}
.lh{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px 0 16px}
.lh b{font:700 18px/1 var(--f-body);color:var(--ink)}
.lane-n{margin-left:auto;min-width:30px;padding:3px 9px;border-radius:999px;background:#fff;color:var(--ink-2);font:600 14px/18px var(--f-body);text-align:center;font-variant-numeric:tabular-nums}
.flow{--half:0px;position:absolute;height:64px;opacity:0}
.flow-lbl{position:absolute;left:0;top:0;font:600 14px/20px var(--f-body);color:var(--ink-2);white-space:nowrap}
.flow-rail{position:absolute;left:var(--half);right:var(--half);top:43px;border-top:2px dotted #E2B98F}
.flow-pt{position:absolute;top:28px;left:calc(var(--half) + (100% - 2 * var(--half)) * var(--f));transform:translateX(-50%);padding:0 14px;border:1.5px solid #E2B98F;border-radius:999px;background:#fff;font:600 14px/29px var(--f-body);color:var(--ink-2);white-space:nowrap}
.scraps{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.scrap{position:absolute;left:clamp(calc(var(--w) * var(--kpx) * -.08),calc(var(--x) * 1%),calc(100% - var(--w) * var(--kpx) * .92));top:calc(var(--y) * var(--yk) * 1px);width:calc(var(--w) * var(--kpx));height:calc(var(--h) * var(--kpx));transform:rotate(calc(var(--r) * 1deg));z-index:var(--z);transition:left 160ms linear,top 160ms linear,width 160ms linear,height 160ms linear,transform 160ms linear}
.snap .scrap,.tween .scrap{transition:none}
.paper{position:absolute;inset:0;overflow:hidden;padding:.56em .64em;border-radius:2px;background:#f6f1e6;color:#2b2118;font:700 calc(25 * var(--kpx))/1.02 var(--f-hand);box-shadow:inset -1px 1px 0 rgb(255 240 214 / .6),0 1px 1px rgb(0 0 0 / .4),0 14px 28px rgb(0 0 0 / .55)}
/* The sun sits up and to the right, so its warm light catches the top right of every scrap */
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(215deg,rgb(255 178 96 / .3),rgb(255 140 60 / .08) 40%,transparent 62%),linear-gradient(25deg,rgb(40 16 6 / .2),transparent 50%)}
.paper .hd{display:block;margin-bottom:.3em;font:700 12px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:rgb(43 33 24 / .72)}
.paper.yellow{background:#f2d466}
.paper.green{background:#c4dd9c}
.paper.pink{background:#f2b5bc}
.paper.nap{background-color:#f1ebdf;background-image:linear-gradient(135deg,transparent 49.6%,rgb(0 0 0 / .06) 50%,transparent 50.4%),linear-gradient(45deg,transparent 49.6%,rgb(0 0 0 / .05) 50%,transparent 50.4%)}
.paper.slip{background:#f4d2c6}
.paper.slip .hd{color:#a8361f}
.paper.note{padding-left:30px;background-color:#eeebe3;background-image:linear-gradient(90deg,transparent 21px,rgb(210 70 60 / .45) 21px 22px,transparent 22px),repeating-linear-gradient(180deg,transparent 0 25px,rgb(78 120 200 / .26) 25px 26px)}
.paper.cal{padding-top:calc(30px + .3em)}
.paper.cal .hd{position:absolute;left:0;right:0;top:0;height:30px;margin:0;padding:8px 12px;background:#c9432f;color:#fff}
.paper.phone{border-radius:12px;background:#1b140f;color:#f6eee4;box-shadow:inset 0 0 0 1.5px rgb(255 226 196 / .2),0 14px 28px rgb(0 0 0 / .55)}
.paper.phone .hd{color:rgb(246 238 228 / .65)}
.paper.phone::after{background:linear-gradient(215deg,rgb(255 200 150 / .14),transparent 45%)}
.paper.rev{background:#fbf6ec}
.paper.rev .hd{font-size:13px;letter-spacing:.06em;color:#b8730a}
.paper.kraft{background:#c9a87a}
/* Sorted, each scrap becomes a white card with an edge in its tray's note color */
.chit{--lc:#F2D466;--lt:#F8EAB2;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:10px 14px 10px 18px;border:1px solid #EFE3D3;border-radius:14px;background:#fff;box-shadow:inset 4px 0 0 var(--lc),0 6px 14px -8px rgb(74 42 20 / .25);opacity:0}
.scrap:nth-child(n+4) .chit{--lc:#C4DD9C;--lt:#E1EECD}
.scrap:nth-child(n+7) .chit{--lc:#FFB27A;--lt:#FFDDC4}
.scrap:nth-child(n+10) .chit{--lc:#F2B5BC;--lt:#F9D9DD}
.chit-top{display:flex;max-width:100%}
.chit-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 9px;border-radius:999px;background:var(--lt);color:var(--ink-2);font:600 12px/16px var(--f-body)}
.chit-tag.need{background:#FF8A3D;color:var(--ink)}
.chit .tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 15px/20px var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.compact .chit{gap:4px;padding:7px 9px 7px 13px}
.compact .chit .tx{font-size:14px;line-height:18px}
.desk-sum{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:52px;padding:13px 28px;border-top:1px solid rgb(234 219 200 / .9);background:rgb(255 255 255 / .72);font:600 15px/22px var(--f-body);color:var(--ink);opacity:0}
.desk-sum .sep{color:var(--ink-3)}
.desk-sum .warn{color:var(--ember)}
.narrow .lh{height:44px;padding:0 10px 0 12px}
.narrow .lane-n{min-width:26px;padding:2px 7px;font-size:13px}
.narrow .flow{display:none}
.narrow .desk-sum{min-height:46px;padding:12px 16px;font-size:14px;line-height:20px}
.sort-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px}
.sort-track{flex:1 1 460px;min-width:0;display:flex;align-items:center;gap:16px}
.sort-track > span{font:600 15px/20px var(--f-body);color:var(--ink);white-space:nowrap}
.slide{--p:0%;flex:1;min-width:0;height:44px;margin:0;border-radius:999px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.slide::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,transparent var(--p),var(--edge) var(--p)),var(--fire)}
.slide::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,transparent var(--p),var(--edge) var(--p)),var(--fire)}
.slide::-webkit-slider-thumb{width:32px;height:32px;margin-top:-12px;border:0;border-radius:50%;background:var(--sun-fb);box-shadow:0 0 0 2px #fff,0 2px 10px rgb(229 87 27 / .45);-webkit-appearance:none;appearance:none}
.slide::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:50%;background:var(--sun-fb);box-shadow:0 0 0 2px #fff,0 2px 10px rgb(229 87 27 / .45)}
.slide:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ember)}
.slide:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ember)}
.readout{display:inline-flex;align-items:center;gap:10px;min-width:230px;font:600 16px/22px var(--f-body);color:var(--ink)}
.ro-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--sun)}
.readout.done .ro-dot{background:var(--good)}
.sort-ctl .btn{min-width:184px}

/* The Monday note: pick a trade, add a name, and the sample note rewrites itself */
.mn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:40px 72px;align-items:center}
.mn-body{margin-top:20px;max-width:540px}
.mn-lbl{display:block;margin-top:30px;font:600 16px/22px var(--f-body);color:var(--ink)}
.mn-copy .chips{margin-top:12px}
.mn-field{max-width:420px;margin-top:10px}
.mn-hint{margin-top:12px;font:500 15px/22px var(--f-body);color:var(--ink-2)}
.mn-note{position:relative;padding:32px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);transform:rotate(-1deg)}
.mn-note::before{content:"";position:absolute;left:50%;top:-13px;width:104px;height:26px;margin-left:-52px;border-radius:3px;background:rgb(255 214 140 / .72);box-shadow:0 1px 2px rgb(74 42 20 / .1);transform:rotate(2.5deg)}
.mn-top{font:600 14px/20px var(--f-body);color:var(--ink-3)}
.mn-co{margin-top:6px;font:700 30px/1.15 var(--f-hand);color:var(--ink);overflow-wrap:anywhere}
.mn-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px;margin-top:20px;padding-top:22px;border-top:1px solid var(--line)}
.mn-fig{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start;min-width:0}
.mn-k{align-self:end;font:600 14px/20px var(--f-body);color:var(--ink-2)}
.val{display:flex;height:1em;font:700 46px/1 var(--f-body);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.reel{display:inline-block;height:1em;overflow:hidden}
.reel>span{display:flex;flex-direction:column;transition:transform 700ms var(--land)}
.reel b{display:block;height:1em;font-weight:inherit}
.mn-sub{font:500 14px/20px var(--f-body);color:var(--ink-3)}
.mn-h{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font:700 18px/24px var(--f-body);color:var(--ink)}
.mn-moves{margin-top:14px;display:grid;gap:14px}
.mn-moves li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;font:500 16px/24px var(--f-body);color:var(--ink)}
.mn-box{width:18px;height:18px;margin-top:3px;border:2px solid var(--edge);border-radius:50%}
.mn-moves li:first-child .mn-box{border-color:var(--ember)}

/* Services */
.svc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.svc-head > div{max-width:720px}
.svc-head > p{max-width:420px}
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.svc{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:32px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);transition:transform 250ms var(--ease),box-shadow 250ms var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
/* Quotes leads as a wide card: the pitch on the left, a sample quote on the right */
.svc-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;gap:28px 56px;padding:40px}
.svc-main{min-width:0}
.svc-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFE7C2;color:var(--ember)}
.svc-ico svg{display:block}
.svc .eyebrow{margin-top:20px}
.svc h3{margin-top:8px;font:650 26px/1.18 var(--f-body);letter-spacing:-.01em;text-wrap:balance}
.svc .tx{margin-top:12px;max-width:560px}
.svc-foot{margin-top:auto;padding-top:24px}
.svc-quote{min-width:0}
.svc-quote .meta{margin-top:12px}
.mini{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;font-variant-numeric:tabular-nums}
.mini .r{display:flex;justify-content:space-between;gap:12px;padding:11px 18px;border-top:1px solid var(--line);font:500 15px/22px var(--f-body);color:var(--ink-2)}
.mini .r:first-child{border-top:0;background:#FFF8EE;color:var(--ink);font-weight:600}
.mini .ok{color:var(--good)}
.mini .tot{color:var(--ink);font-weight:700}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:650 16px/1 var(--f-body);color:var(--ember);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.tlink:hover{color:var(--ink)}
.svc-nodes{display:flex;align-items:center;align-self:stretch;max-width:420px}
.svc-nodes span{flex:none;padding:8px 14px;border:1.5px solid #E2B98F;border-radius:999px;background:#FFF8EE;font:600 14px/18px var(--f-body);color:var(--ink-2)}
.svc-nodes i{flex:1;min-width:12px;border-top:2px dotted #E2B98F}

/* How it works: five steps that climb like the sun, joined by a dashed rail */
.how-h{max-width:860px}
.steps{--gap:32px;position:relative;margin-top:64px}
.how-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.how-rail{position:absolute;left:18px;right:calc((100% - 4 * var(--gap)) / 5 - 18px);top:18px;height:40px;background:linear-gradient(to bottom right,transparent calc(50% - 1.7px),#F2A65A calc(50% - .8px),#F2A65A calc(50% + .8px),transparent calc(50% + 1.7px));-webkit-mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 17px);mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 17px);clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease) .15s}
.armed .how-rail{clip-path:inset(0 100% 0 0)}
.step{min-width:0}
.step:nth-child(1){margin-top:40px}
.step:nth-child(2){margin-top:30px}
.step:nth-child(3){margin-top:20px}
.step:nth-child(4){margin-top:10px}
.how-dot{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 17px/1 var(--f-body);box-shadow:0 0 0 6px var(--band)}
.step .eyebrow{margin-top:20px}
.step h3{margin-top:6px;font:650 22px/1.22 var(--f-body);letter-spacing:-.005em}
.step .tx{margin-top:10px;font-size:16px;line-height:26px}
.step-note{margin-top:12px}

/* Principles */
.strike{position:relative;display:inline-block;color:var(--ink-3)}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:60%;height:.14em;margin-top:-.07em;border-radius:999px;background:#FF8A3D;transform:rotate(-2deg) scaleX(1);transform-origin:left center;transition:transform 900ms var(--ease) .2s}
.armed .strike::after{transform:rotate(-2deg) scaleX(0)}
.pr-lead{margin-top:28px;max-width:640px}
.pr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.pr > div{min-width:0}
.pr h3{margin-top:8px;font:650 22px/1.22 var(--f-body)}
.pr .tx{margin-top:10px;font-size:16px;line-height:26px}

/* Founding spots and our work so far */
.fnd-sec{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;align-items:stretch}
.fnd{display:flex;flex-wrap:wrap;align-items:center;gap:32px 40px;padding:40px;border:1px solid var(--line);border-radius:28px;background:#FFFCF7;box-shadow:var(--shadow)}
.fnd-seal{flex:none;display:grid;justify-items:center;gap:14px;margin-inline:auto}
.fnd-disc{display:grid;place-items:center;width:212px;height:212px;border-radius:50%;background:radial-gradient(circle,#FFE7C2 0 60%,rgb(255 231 194 / 0) 71%)}
.fnd-disc .mk{--s:168px}
.fnd-count{display:flex;align-items:baseline;gap:8px;font:600 16px/1 var(--f-body);color:var(--ink-2)}
.fnd-count b{font:700 44px/1 var(--f-body);color:var(--ember)}
.fnd-text{flex:1 1 280px;min-width:0}
.fnd-h{margin-top:12px;font:700 clamp(32px,3vw,42px)/1.08 var(--f-body);letter-spacing:-.015em;text-wrap:balance}
.fnd .tx{margin-top:14px}
.fnd .ctas{margin-top:28px}
.cases{padding:32px 32px 18px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}
.cases h3{font:650 24px/1.2 var(--f-body)}
.case{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.case-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 14px/20px var(--f-body);color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;font:600 13px/1 var(--f-body);color:var(--ink-2)}
.pill.warm{background:#FFE2B8}
.pill.open{background:#EDF4E0}
.case h4{margin-top:10px;font:650 20px/1.25 var(--f-body)}
.case .tx{margin-top:6px;font-size:16px;line-height:26px}

/* Book a call: the page warms toward the rising sun */
.cta{position:relative;padding-top:var(--sp);background:linear-gradient(var(--bg) 0,#FFF0DC 50%,#FFE2B8);overflow:hidden}
.cta-in{position:relative;z-index:2;max-width:880px;margin-inline:auto;text-align:center}
.cta-in .lede{margin:20px auto 0;max-width:560px}
.form{margin:44px auto 0;max-width:760px;padding:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;text-align:left;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}
.fgrp{min-width:0}
.form .full{grid-column:1/-1}
.form label,.form .flbl{display:block;font:600 16px/22px var(--f-body);color:var(--ink-2)}
.form .opt{font-weight:500;color:var(--ink-3)}
.form .chips{margin-top:10px}
.ferr{margin-top:8px;font:600 15px/22px var(--f-body);color:var(--ember)}
.ferr:empty{display:none}
.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:4px}
.msg{flex:1 1 260px;font:500 15px/22px var(--f-body);color:var(--ink-2)}
.msg.ok{color:var(--ink)}
.msg.bad{color:var(--ember)}
.msg-link{font-weight:600;color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.msg-link:hover{color:var(--ink)}
.form .reach-note{margin-bottom:-12px}
/* The honeypot: off screen for people, still in the form for bots */
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.horizon{position:relative;z-index:1;height:300px;margin-top:-30px;pointer-events:none}
.horizon canvas{position:absolute;left:0;bottom:0;width:100%;height:440px;display:block}
.horizon .fb{left:50%;top:150px;width:1100px;height:1100px;margin-left:-550px;box-shadow:0 0 120px 40px rgb(255 178 84 / .45)}

/* Footer: the one deep band, under the sunrise */
.sitefoot{position:relative;z-index:2;background:#2A1A10;color:#C9B8A6}
.ft{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px 40px;padding-block:44px 36px}
.sitefoot .brand{margin-right:0;color:#F6EEE4}
.sitefoot .mk{--s:32px}
.sitefoot .wordmark{font-size:24px}
.ft-tag{margin-top:14px;font:700 22px/28px var(--f-body);letter-spacing:-.02em;color:var(--gold)}
.ft-who{margin-top:6px;font:500 15px/22px var(--f-body);color:#C9B8A6}
.ft-who .nobr{white-space:nowrap}
.ft-nav{display:flex;flex-wrap:wrap;column-gap:28px}
.ft-link{display:inline-block;padding:12px 0;font:600 15px/20px var(--f-body);color:#F6EEE4;transition:color 160ms}
.ft-link:hover{color:var(--gold)}
.sitefoot .mtog{color:#F6EEE4}
.sitefoot .mtog-sw{border-color:#C9B8A6;background:transparent}
.sitefoot .mtog-sw::after{background:#C9B8A6}
.sitefoot .mtog[aria-pressed="true"] .mtog-sw{background:var(--fire);border-color:#FFB547}
.sitefoot .mtog[aria-pressed="true"] .mtog-sw::after{background:#fff}
.ft-copy{grid-column:1/-1;padding-top:22px;border-top:1px solid rgb(201 184 166 / .22);font:500 14px/20px var(--f-body);color:#C9B8A6}
.sitefoot :focus-visible{outline-color:#F6EEE4}

/* Narrower screens */
@media (max-width:1180px){
  :root{--sun-x:calc(100% - 190px);--sun-d:400px;--sun-y:360px;--glow:680px 560px}
  .hero-copy{max-width:min(600px,calc(100% - 410px))}
}
@media (max-width:1060px){
  .pr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fnd-sec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  :root{--sun-x:50%;--sun-y:176px;--sun-d:220px;--glow:560px 460px}
  .nav{display:none}
  .sky{height:720px}
  .hero{padding-top:236px}
  .hero-copy{max-width:680px}
  .mn{grid-template-columns:minmax(0,1fr)}
  .mn-note{max-width:560px}
  .svc-feat{grid-template-columns:minmax(0,1fr);padding:32px}
  .svc-quote{max-width:560px}
  .how-list{grid-template-columns:minmax(0,1fr);gap:30px}
  .step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:18px;margin-top:0 !important}
  .step .how-dot{grid-row:1/span 4}
  .step > :not(.how-dot){grid-column:2}
  .step .eyebrow{margin-top:7px}
  .how-rail{display:none}
}
@media (max-width:760px){
  :root{--pad:20px;--sp:88px;--sp-band:80px;--sun-d:164px;--sun-y:148px;--glow:440px 380px}
  .bar .wrap{gap:8px;min-height:64px;padding-block:8px}
  .brand{gap:8px}
  .bar .mk{--s:30px}
  .wordmark{font-size:19px}
  /* the header switch becomes a bare 44px toggle; its aria-label keeps the name "Animation" */
  .bar .mtog{justify-content:center;width:44px;padding:0}
  .bar .mtog-t{display:none}
  .bar .btn.sm{padding:0 16px}
  .sky{height:600px;background:radial-gradient(var(--glow) at var(--sun-x) var(--sun-y),#FFD48A,rgb(255 212 138 / .4) 40%,transparent 70%),linear-gradient(#FFF0DA,var(--bg) 520px)}
  .hero{padding-top:190px}
  .hero h1{margin-top:12px}
  .hero .lede{margin-top:16px;font-size:18px;line-height:29px}
  .ctas{margin-top:24px}
  .lede{font-size:18px;line-height:29px}
  .sort-stage{margin-top:36px}
  /* the desk runs 8px wider than the text column, so sorted card text keeps to two lines at 14px */
  .desk{height:684px;--yk:1.35;margin-inline:-8px}
  /* On a phone the slider stays on screen while the desk scrolls by */
  .sort-ctl{position:sticky;bottom:0;z-index:5;gap:8px 14px;margin:14px calc(-1 * var(--pad)) 0;padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:0 -12px 18px -14px rgb(74 42 20 / .4)}
  .sort-track{flex:1 1 100%;gap:12px}
  .readout{flex:1 1 0;min-width:0;font-size:15px;line-height:20px}
  .sort-ctl .btn{flex:none;min-width:0}
  .mn-note{padding:26px 22px 24px}
  .mn-figs{gap:22px 16px}
  .val{font-size:40px}
  .svcs{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:40px}
  .svc{padding:26px 22px}
  .svc h3{font-size:24px}
  .mini .r{padding:10px 12px;font-size:14px}
  .steps{margin-top:44px}
  .pr{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:44px;padding-top:30px}
  .fnd{padding:30px 22px}
  .fnd-text{flex-basis:100%}
  .cases{padding:26px 22px 14px}
  .form{grid-template-columns:minmax(0,1fr);padding:24px 20px;margin-top:36px}
  .form .send .btn{width:100%}
  .horizon{height:220px}
  .horizon canvas{height:340px}
  .ft{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:36px 30px}
  .ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .sitefoot .mtog{justify-self:start;margin-left:-6px}
}

/* Motion off: the device asks for it, or the Animation switch is off */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}}
.still *,.still *::before,.still *::after{animation:none !important;transition:none !important}
.still{scroll-behavior:auto}