/* Edison & Co Removals — navy #062B46 / orange #EC8F09, sampled from their own logo. */

:root{
  --navy:#062b46; --navy-2:#0b3f63; --navy-3:#12557f;
  --orange:#ec8f09; --orange-2:#cf7a04; --orange-pale:#fff4e2;
  --ink:#16212b; --ink-2:#4a5966; --ink-3:#6f7d89;
  --line:#e2e6ea; --bg:#fff; --bg-2:#f6f8fa;
  --ok:#1f7a45;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px; --r:12px;
  --sh:0 1px 2px rgba(6,43,70,.06),0 8px 24px rgba(6,43,70,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-3);text-underline-offset:2px}
h1,h2,h3{line-height:1.18;letter-spacing:-.02em;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:750}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.wrap.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.7rem 1rem;border-radius:8px}
/* Visually hidden but still RENDERED and focusable. The nav toggle must not use
   [hidden]/display:none - Chrome will not activate a display:none control from
   its <label>, so the burger silently stops working. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ── call bar ── */
.callbar{background:var(--navy);color:#cfe0ec;font-size:.86rem;
  display:flex;gap:.9rem;align-items:center;justify-content:center;padding:.5rem 1rem;flex-wrap:wrap}
.callbar a{color:#fff;font-weight:750;text-decoration:none;border-bottom:2px solid var(--orange)}

/* ── header ── */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:1rem;padding-top:.6rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand img{width:52px;height:52px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{color:var(--navy);font-size:1.16rem;font-weight:850;letter-spacing:-.02em}
.brand i{color:var(--ink-3);font-size:.7rem;font-style:normal;text-transform:uppercase;letter-spacing:.11em;font-weight:650}
header nav{display:flex;align-items:center;gap:.35rem}
header nav a{color:var(--ink-2);text-decoration:none;font-size:.93rem;font-weight:600;
  padding:.5rem .6rem;border-radius:8px;white-space:nowrap}
header nav a:hover{color:var(--navy);background:var(--bg-2)}
header nav a[aria-current]{color:var(--navy);background:var(--orange-pale)}
.burger{display:none}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--orange);color:#3a2200;font-weight:800;text-decoration:none;
  padding:.72rem 1.15rem;border-radius:10px;border:1px solid var(--orange-2);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.lg{padding:.95rem 1.6rem;font-size:1.05rem}
.btn.sm{padding:.5rem .85rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--navy-3);background:var(--bg-2)}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 .5rem}

/* ── hero ── */
.hero{background:linear-gradient(168deg,#f2f7fb 0%,#fff 62%);border-bottom:1px solid var(--line)}
.hero .wrap{padding:3rem 1.25rem 2.6rem}
.hero .lead{max-width:44rem}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  padding:3.4rem 1.25rem 3.6rem}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:800;color:var(--orange-2);margin:0 0 .7rem}
.lead{font-size:1.12rem;color:var(--ink-2)}
.micro{font-size:.85rem;color:var(--ink-3);margin:0}
.hgrid figure{margin:0}
.hgrid img{border-radius:var(--r);box-shadow:var(--sh);aspect-ratio:4/3;object-fit:cover}

/* ── trust bar ── */
.trust{background:var(--navy);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.1rem 1.25rem}
.trust div{text-align:center}
.trust b{display:block;font-size:1.06rem;color:var(--orange);font-weight:800}
.trust span{font-size:.8rem;color:#b9cddc}

/* ── bands ── */
.band{padding:3.6rem 0}
.band.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phead{padding:3rem 0 1.6rem;background:linear-gradient(168deg,#f2f7fb,#fff);border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.split figure{margin:0;position:sticky;top:6rem}
.split img{border-radius:var(--r);box-shadow:var(--sh);object-fit:cover;aspect-ratio:4/3}
/* Rocky cutouts are transparent PNG/WebP, not rectangular photos - a box-shadow
   would draw a visible card edge behind the transparency. drop-shadow follows
   his actual silhouette instead, and no cropping/aspect-ratio forcing. */
.rockyfig{margin:0}
.rockyfig img{width:100%;height:auto;border-radius:0;box-shadow:none;
  aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(6,43,70,.16))}

/* Rocky bleeds off the bottom of this figure's own box, rather than floating
   fully contained. A negative margin on the figure does NOT work for this in a
   CSS Grid layout - Grid's track sizing counts margins (including negative
   ones) toward each item's contribution, so the row/section just shrinks to
   absorb it and nothing actually overflows to be clipped. Constraining the
   figure's OWN box directly (aspect-ratio + overflow:hidden) sidesteps that
   entirely: it is capped short regardless of how the grid sizes its track, so
   the intrinsically-taller image (width:100%, height:auto) genuinely overflows
   it and gets cut. 792/900 = 88% of the map image's height - keeps the
   PLYMOUTH/SHERFORD labels (which end around 82% down) safely inside frame. */
.band.bleed .rockyfig{overflow:hidden;aspect-ratio:1400/792;margin:0}
.band.bleed .rockyfig img{object-position:top}

/* ── cards ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .14s,box-shadow .14s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.card img{aspect-ratio:3/2;object-fit:cover}
.card>div{padding:1.1rem 1.2rem 1.3rem}
.card h3{margin-bottom:.35rem}
.card p{color:var(--ink-2);font-size:.94rem;margin-bottom:.7rem}
.more{color:var(--orange-2);font-weight:750;font-size:.9rem}

/* ── lists ── */
.ticks{list-style:none;padding:0;margin:1rem 0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.72rem;height:.4rem;
  border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.ticks b{color:var(--ink)}
.areas{color:var(--ink-2);line-height:2.1}

/* ── faq ── */
.faq{margin-top:1.5rem}
.faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem;background:#fff}
.faq summary{cursor:pointer;padding:1rem 1.15rem;font-weight:700;color:var(--navy);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--orange-2);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 1.15rem 1.1rem;color:var(--ink-2)}

/* ── reviews ── */
.quotes{margin:1.5rem 0}
.quotes blockquote{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:10px;padding:1.2rem 1.4rem}
.quotes cite{color:var(--ink-3);font-size:.86rem;font-style:normal}

/* ── calculator ── */
.calcwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2.4rem;align-items:start}
.calc fieldset{border:0;padding:0;margin:0 0 2rem}
.calc legend{font-weight:800;color:var(--navy);font-size:1.05rem;margin-bottom:.8rem;padding:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.opts label,.checks label{cursor:pointer}
.opts input,.checks input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:10px;
  padding:.75rem .85rem;background:#fff;transition:border-color .12s,background .12s}
.opts b{color:var(--navy);font-size:.98rem}
.opts i{font-style:normal;font-size:.78rem;color:var(--ink-3)}
.opts input:checked+span{border-color:var(--orange);background:var(--orange-pale)}
.opts input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.checks{display:flex;flex-direction:column;gap:.55rem}
.checks span{display:block;border:1.5px solid var(--line);border-radius:10px;padding:.75rem .9rem;
  background:#fff;font-size:.94rem;color:var(--ink-2);transition:border-color .12s,background .12s}
.checks input:checked+span{border-color:var(--orange);background:var(--orange-pale);color:var(--ink)}
.checks input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.quote{position:sticky;top:6rem;background:var(--navy);color:#fff;border-radius:var(--r);
  padding:1.6rem 1.5rem;box-shadow:var(--sh)}
.qlabel{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:#9fbdd2;font-weight:800;margin:0}
.qfig{font-size:2.3rem;font-weight:850;letter-spacing:-.03em;color:#fff;margin:.2rem 0 .9rem}
.qbreak{list-style:none;padding:0;margin:0 0 1rem;font-size:.88rem;color:#c8dced}
.qbreak li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.qbreak li:last-child{border-bottom:0}
.qbreak span:last-child{color:#fff;font-weight:700;white-space:nowrap}
.qnote{font-size:.82rem;color:#9fbdd2}
.quote .micro{color:#9fbdd2}
.quote .btn{width:100%}

/* ── contact ── */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.5rem}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem}
.ccard .big{font-size:1.25rem;font-weight:800;margin:.2rem 0 .7rem;word-break:break-word}
.ccard .big a{color:var(--navy);text-decoration:none}
.fine{font-size:.86rem;color:var(--ink-3)}

/* ── prose (legal) ── */
.prose h2{font-size:1.25rem;margin-top:2rem}
.prose p,.prose li{color:var(--ink-2)}
.pending{background:var(--orange-pale);border-left:4px solid var(--orange);padding:.9rem 1.1rem;border-radius:0 8px 8px 0}

/* ── cta ── */
.cta{background:linear-gradient(140deg,var(--navy),var(--navy-3));color:#fff;padding:3.4rem 0;text-align:center}
.cta h2{color:#fff}
.cta p{color:#c6dcea;max-width:56ch;margin-inline:auto}
.cta .btns{justify-content:center}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* ── footer ── */
footer.site{background:var(--navy);color:#a9c4d6;padding:3rem 0 2rem;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:2rem}
footer.site h3{color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:.9rem}
footer.site a{display:block;color:#a9c4d6;text-decoration:none;padding:.22rem 0}
footer.site a:hover{color:#fff}
.rate{margin-top:.8rem;line-height:1.35}
.rate b{color:var(--orange);font-size:1.5rem;font-weight:850}
.rate span{font-size:.82rem}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.4rem;font-size:.83rem;color:#8fadc2}
.legal b{color:#cfe0ec}
.legal a{display:inline;color:#a9c4d6;text-decoration:underline}
.thin{color:#7b99ae}

/* ── responsive ── */
@media (max-width:960px){
  .hgrid,.split,.calcwrap{grid-template-columns:1fr;gap:2rem}
  .split figure,.quote{position:static}
  .hgrid figure{order:-1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:.9rem}
}
@media (max-width:720px){
  body{font-size:16px}
  .burger{display:block;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;
    position:relative;cursor:pointer;background:#fff}
  .burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:11px;
    width:22px;height:2.5px;background:var(--navy);border-radius:2px}
  .burger span{top:21px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:.6rem;gap:.15rem;
    border-bottom:1px solid var(--line);box-shadow:var(--sh)}
  #navtoggle:checked~nav{display:flex}
  header nav a{padding:.8rem .9rem;font-size:1rem}
  header nav .btn{margin-top:.35rem;justify-content:center}
  .cards{grid-template-columns:1fr}
  .hgrid{padding:2.4rem 1.25rem 2.6rem}
  .band{padding:2.6rem 0}
  .btns .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Denser option grid for the longer ladders (bedrooms 1-7+, floors ground-4th). */
.opts.tight{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.opts.tight span{padding:.6rem .5rem;text-align:center;align-items:center}

/* Conditional sections — floor and lift only apply to a flat or an apartment. */
.calc fieldset[hidden]{display:none}
.fhint{font-size:.86rem;color:var(--ink-3);margin:-.4rem 0 .7rem}
.wheres{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.wfield{display:flex;flex-direction:column;gap:.3rem}
.wfield span{font-size:.82rem;color:var(--ink-3);font-weight:650}
.wfield input{border:1.5px solid var(--line);border-radius:10px;padding:.7rem .8rem;
  font:inherit;font-size:.98rem;background:#fff;color:var(--ink);width:100%}
.wfield input:focus{border-color:var(--orange);outline:none}
.fmiles{font-size:.88rem;color:var(--navy-3);font-weight:650;margin:.6rem 0 0;min-height:1.2em}
@media (max-width:600px){.wheres{grid-template-columns:1fr}}

/* ── Rocky ────────────────────────────────────────────────────────────────────
   He is built INTO every page as a normal section, in normal document flow,
   right after the header. The page's own content (h1, cards, FAQs, whatever
   that URL is) sits below him and scrolls with the rest of the page - ONE
   scrollbar, no independently-scrolling panes, no fixed-viewport panel. When
   the chat swaps pages it swaps <main>'s content; this band is untouched. */
.rocky-band{background:linear-gradient(168deg,#eef4f9 0%,#fff 85%);
  border-bottom:1px solid var(--line);position:relative;overflow:visible;
  /* He is the site, not a chatbot bolted onto the corner of one - so he is sized
     to DOMINATE the first screen (3x the old 300px cap), standing on the band's
     own floor. --rh is his rendered height; the bubble is pinned to it via
     absolute positioning so it always sits level with his mouth. Still ordinary
     document flow - min-height driven by his own height, not a fixed viewport
     pane - so the page scrolls past him like any other section. */
  /* Cropped to upper-body (below the fists, no legs/shoes) so this height buys
     no wasted leg-space - --rh scaled down by the same ratio the crop removed
     (0.7056) so he renders at the SAME on-screen size as the full-body version
     did, just without the dead air underneath him. */
  --rh:min(62svh,635px)}
.rband{max-width:var(--wrap);margin:0 auto;padding:1.4rem 1.25rem 0;
  position:relative;min-height:calc(var(--rh) + 1.4rem)}
.ag-rocky{position:absolute;left:1.25rem;bottom:0;z-index:2;
  filter:drop-shadow(0 20px 30px rgba(6,43,70,.24));
  transform-origin:50% 100%;animation:ag-in .55s cubic-bezier(.2,.9,.3,1.1) both}
.ag-rocky img{display:block;height:var(--rh);width:auto;object-fit:contain}
.ag-rocky.is-thinking{animation:ag-bob 1.1s ease-in-out infinite}
@keyframes ag-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ag-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1deg)}}

/* Rocky's crop is 794:980 (w:h) - proportionally much WIDER relative to his own
   height than the old full-body image was, so the offset has to clear .81*--rh
   of actual width, not the old full-body figure's .58. */
.ag-talk{position:absolute;z-index:3;left:calc(1.25rem + var(--rh) * .81 + 1.75rem);
  right:1.25rem;top:calc(var(--rh) * .1);
  display:flex;flex-direction:column;gap:.6rem;max-width:34rem}
.ag-bubble{position:relative;background:#fff;border:1.5px solid var(--line);
  border-radius:16px;padding:.85rem 1.05rem;font-size:1rem;line-height:1.5;
  box-shadow:0 8px 20px rgba(6,43,70,.08);max-width:38rem;align-self:flex-start;
  animation:ag-pop .28s cubic-bezier(.2,.9,.3,1.2) both}
.ag-bubble::after{content:"";position:absolute;left:-10px;top:18px;width:0;height:0;
  border:9px solid transparent;border-right-color:#fff;border-left:0}
.ag-bubble::before{content:"";position:absolute;left:-12px;top:18px;width:0;height:0;
  border:9px solid transparent;border-right-color:var(--line);border-left:0}
.ag-bubble.me{align-self:flex-end;background:var(--navy);color:#fff;border-color:var(--navy)}
.ag-bubble.me::after,.ag-bubble.me::before{display:none}
.ag-bubble a{color:var(--navy-3);font-weight:750}
.ag-bubble.me a{color:#ffd9a0}
.ag-fine{display:block;margin-top:.5rem;font-size:.85rem;color:var(--ink-3)}
@keyframes ag-pop{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}

.ag-dots{display:inline-flex;gap:4px;align-items:center}
.ag-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:ag-blink 1.2s infinite}
.ag-dots i:nth-child(2){animation-delay:.18s}.ag-dots i:nth-child(3){animation-delay:.36s}
@keyframes ag-blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ag-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ag-chip{background:#fff;border:1.5px solid var(--orange);color:var(--navy);
  border-radius:99px;padding:.48rem .85rem;font:inherit;font-size:.9rem;font-weight:650;
  cursor:pointer;transition:background .12s,transform .12s}
.ag-chip:hover{background:var(--orange-pale);transform:translateY(-1px)}
.ag-form{display:flex;gap:.5rem;max-width:30rem}
.ag-input{flex:1;border:1.5px solid var(--line);border-radius:99px;padding:.6rem 1rem;
  font:inherit;font-size:.95rem;background:#fff}
.ag-input:focus{outline:none;border-color:var(--orange)}
.ag-send{border:0;background:var(--orange);color:#3a2200;width:40px;flex:0 0 40px;border-radius:50%;
  font-size:1.05rem;font-weight:800;cursor:pointer}
.ag-tools{display:flex;gap:.8rem}
.ag-tools button{background:none;border:0;color:var(--ink-3);font:inherit;font-size:.78rem;
  cursor:pointer;text-decoration:underline;padding:0}
.ag-tools button:hover{color:var(--navy)}

/* ── stage 2: the itemised checklist for an exact, bookable price ──────────────
   Appears below the chat once someone asks for a firm figure instead of the
   guide range. Grouped, pre-ticked by property size, live total. */
.ag-items{border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:1.1rem 1.2rem;box-shadow:0 8px 20px rgba(6,43,70,.07);max-width:44rem}
.ag-items[hidden]{display:none}
.ag-ivol{font-size:.9rem;color:var(--navy-3);font-weight:700;margin-bottom:.7rem}
.ag-igroup{border:1px solid var(--line);border-radius:10px;margin-bottom:.55rem;overflow:hidden}
.ag-igroup>summary{cursor:pointer;padding:.6rem .85rem;font-weight:700;font-size:.88rem;
  color:var(--navy);list-style:none;background:var(--bg-2)}
.ag-igroup>summary::-webkit-details-marker{display:none}
.ag-igroup>summary::after{content:"+";float:right;color:var(--orange-2);font-weight:800}
.ag-igroup[open]>summary::after{content:"–"}
.ag-irow{display:flex;align-items:center;gap:.7rem;padding:.5rem .85rem;
  border-top:1px solid var(--line);font-size:.9rem}
.ag-irow .lbl{flex:1;color:var(--ink-2)}
.ag-irow.on .lbl{color:var(--ink);font-weight:650}
.ag-istep{display:flex;align-items:center;gap:.4rem}
.ag-istep button{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);
  background:#fff;color:var(--navy);font-weight:800;cursor:pointer;line-height:1}
.ag-istep button:hover{border-color:var(--orange)}
.ag-istep .n{min-width:1.4rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.ag-ifoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);flex-wrap:wrap}
.ag-ifig{font-size:1.3rem;font-weight:850;color:var(--navy)}
.ag-ifig span{font-size:.78rem;font-weight:650;color:var(--ink-3);display:block}

@media (max-width:760px){
  /* The absolute side-by-side layout needs real width to breathe - a narrow
     phone doesn't have it, so he moves back to normal flow: full width,
     standing, text below him rather than beside him. Still 2x his old mobile
     size, just not the same 3x ratio as desktop - a 900px mascot has nowhere
     to go on a 380px-wide screen. */
  .rocky-band{--rh:min(33svh,282px)}
  .rband{display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:1.2rem 1rem 1.4rem;min-height:auto}
  .ag-rocky{position:static;margin:0 auto}
  .ag-talk{position:static;left:auto;right:auto;top:auto;max-width:100%;
    align-items:center;margin-top:.5rem}
  .ag-bubble{align-self:center;font-size:.95rem;max-width:100%}
  .ag-bubble::after,.ag-bubble::before{display:none}
  .ag-bubble.me{align-self:center}
  .ag-chips,.ag-form{justify-content:center}
  .ag-items{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ag-rocky,.ag-bubble{animation:none!important}
  .ag-rocky.is-thinking{animation:none}
}

/* Only the middle of the page changes when Rocky navigates - main gets a brief
   fade so a swap reads as a page changing, not a flash. */
main.is-loading{opacity:.4;transition:opacity .12s}