/* Round 27b (9 Nov): "Advantages of buying brand new", moved out of #research to sit under the Location map, and drawn the way the hero is drawn:
   thin mint line on dark green, an off-white pen for the hand marks (ticks, the ring), labels that come up one by one.
   Each of the four advantages has its own flat, top-down line drawing (inline SVG, stroke-dashoffset). adv-r27b.js starts each drawing as it scrolls into view,
   one after another. Reduced motion (or ?still): drawn complete. */

.a27{position:relative;overflow:hidden;background:var(--night);color:#F6F4EE;padding:104px var(--edge) 96px}
.a27-in{max-width:1356px;margin:0 auto}
.a27-hd .lbl{color:var(--mint)}
.a27-hd h2{margin-top:12px;font:300 var(--t4)/1.08 var(--f-disp);letter-spacing:-.015em;color:#F6F4EE;max-width:18ch}
.a27-hd h2 em{font-style:italic;color:var(--mint)}

/* ---- the grid: 4 across, 2 x 2, 1 ---- */
.a27-g{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.a27-c{min-width:0}
.a27-fr{position:relative;aspect-ratio:4/3;border-radius:4px;background:rgba(143,203,176,.05);box-shadow:inset 0 0 0 1px rgba(143,203,176,.26);overflow:hidden}
.a27-fr svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.a27-c h3{margin-top:22px;padding-top:18px;border-top:1px solid var(--mint);font:400 clamp(26px,2.2vw,32px)/1.12 var(--f-disp);letter-spacing:-.01em;color:#F6F4EE}
.a27-c p{margin-top:10px;font:400 var(--t0)/1.5 var(--f-text);color:rgba(246,244,238,.86)}

/* ---- the marks (hero line weights: thin mint, off-white pen) ---- */
.a27 svg .d{fill:none;stroke:#8FCBB0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.a27 svg .d.thin{stroke-width:1.1}
.a27 svg .d.stl,.a27 svg .d.led{stroke:rgba(143,203,176,.24);stroke-width:1}
.a27 svg .d.led{stroke-dasharray:1;}
.a27 svg .d.pn{stroke:#F6F4EE;stroke-width:2.4}
.a27 svg .fl{fill:rgba(143,203,176,.16);opacity:0}
.a27 svg .fl.lo{fill:rgba(143,203,176,.07)}
.a27 svg .fl.hi{fill:rgba(143,203,176,.42)}
.a27 svg .dt{fill:#8FCBB0;opacity:0}
.a27 svg .dots{fill:none;stroke:#8FCBB0;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 5.2}
.a27 svg .gl{fill:none;stroke:#8FCBB0;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:.1 5;opacity:0}
.a27 svg .d.mk{stroke:#fff;stroke-width:12;opacity:1}

/* ---- the labels (the hero's chips) ---- */
.a27 .cp{position:absolute;transform:translate(-50%,-50%);padding:6px 11px;border-radius:4px;background:rgba(11,44,37,.94);color:#F6F4EE;font:600 14px/1.25 var(--f-text);white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(143,203,176,.38);opacity:0}
.a27 .cp.l{transform:translate(0,-50%)}
.a27 .cp.big{font:400 22px/1.1 var(--f-disp);padding:8px 14px;letter-spacing:-.005em}

/* ---- the closing statement ---- */
.a27-cl{margin-top:40px;padding-top:0;border-top:0}
.a27-pen{display:block;width:150px;height:10px;overflow:visible}
.a27-n{margin-top:22px;max-width:30em;font:400 clamp(28px,3vw,44px)/1.16 var(--f-disp);letter-spacing:-.015em;color:#F6F4EE}
.a27-n em{font-style:italic;color:var(--mint)}
.a27-s{margin-top:26px;max-width:760px;font:400 14px/1.45 var(--f-text);color:rgba(246,244,238,.62)}

/* ---- timeline: .go is added to each card by adv-r27b.js; --b is that card's start (so they go one after another), --i the order inside ---- */
.a27.arm .a27-c:not(.go) .d,.a27.arm .a27-c:not(.go) .fl,.a27.arm .a27-c:not(.go) .dt,.a27.arm .a27-c:not(.go) .gl,.a27.arm .a27-c:not(.go) .cp{opacity:0}
/* r12e: all four drawings start together when the section is about 20% in view and are finished by about 1.5 s (cards 50 ms apart, items 40 ms apart) */
.a27 .go .d{animation:a27draw .8s cubic-bezier(.45,.05,.35,1) calc(var(--b,0s) + var(--i,0)*.04s) both}
.a27 .go .d.mk{animation-name:a27mk}
.a27 .go .d.pn{animation-duration:.5s}
.a27 .go .fl{animation:a27fade .5s ease calc(var(--b,0s) + var(--i,0)*.04s) both}
.a27 .go .dt{animation:a27fade .3s ease calc(var(--b,0s) + var(--i,0)*.04s) both}
.a27 .go .gl{animation:a27fade .45s ease calc(var(--b,0s) + var(--i,0)*.04s) both}
.a27 .go .cp{animation:a27up .4s cubic-bezier(.2,.7,.1,1) calc(var(--b,0s) + var(--i,0)*.04s + .2s) both}
.a27 .go .cp.l{animation-name:a27upl}
.a27-cl .d{animation:none}
.a27.go-cl .a27-pen .d{animation:a27draw 1.2s cubic-bezier(.45,.05,.35,1) both}
@keyframes a27draw{0%{opacity:0;stroke-dashoffset:1}3%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes a27mk{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes a27fade{from{opacity:0}to{opacity:1}}
@keyframes a27up{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes a27upl{from{opacity:0;transform:translate(0,calc(-50% + 8px))}to{opacity:1;transform:translate(0,-50%)}}

/* ---- drawn complete (reduced motion, ?still, or before the script arms it: nothing hides) ---- */
.a27.now .d{animation:none!important;stroke-dashoffset:0;opacity:1}
.a27.now .fl,.a27.now .dt,.a27.now .gl,.a27.now .cp{animation:none!important;opacity:1}
@media (prefers-reduced-motion:reduce){
  .a27 .d{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .a27 .fl,.a27 .dt,.a27 .gl,.a27 .cp{animation:none!important;opacity:1!important}
}
html:not(.js-a27) .a27 .d{stroke-dashoffset:0;opacity:1}
html:not(.js-a27) .a27 .fl,html:not(.js-a27) .a27 .dt,html:not(.js-a27) .a27 .gl,html:not(.js-a27) .a27 .cp{opacity:1}

@media (max-width:1100px){
  .a27-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
  .a27-hd h2{font-size:var(--t3,44px)}
}
@media (max-width:640px){
  .a27{padding:72px var(--edge) 72px}
  .a27-hd h2{font-size:36px;max-width:none}
  .a27-g{grid-template-columns:1fr;gap:48px;margin-top:40px}
  .a27-cl{margin-top:32px;padding-top:0}
  .a27-n{font-size:28px}
  .a27 .cp{font-size:13px;padding:5px 9px}
  .a27 .cp.big{font-size:20px}
}

/* r12m (Pat, 10 Nov "no cut off and in the brand new no glare"): no drifting light in this section, so it runs flat from Location */
#adv.sec.dk::before{background:none!important;animation:none!important}