/* =========================================================================
   Pac Technologies — page patterns.
   Extends pac.css. Same tokens, same vocabulary: hard edges, hairline grids,
   uppercase display type, orange as the single accent device.
   ========================================================================= */

/* ------------------------------------------------------------- PAGE HERO */
.phero{background:var(--navy);color:#fff;padding:clamp(26px,3vw,40px) 0 clamp(52px,6vw,96px);position:relative;overflow:hidden}
.phero .mark{position:absolute;right:-180px;top:-140px;height:660px;opacity:.06;pointer-events:none}
.phero>.wrap{position:relative}
.crumb{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-bottom:clamp(30px,4vw,56px)}
.crumb a{color:rgba(255,255,255,.5)}
.crumb a:hover{color:var(--orange)}
.crumb i{width:14px;height:1px;background:rgba(255,255,255,.32);flex:none}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:end;margin-top:clamp(26px,3vw,44px)}
.phero .lede{color:rgba(255,255,255,.72)}
@media (max-width:900px){.phero__grid{grid-template-columns:1fr}}

/* Hero meta panel — "at a glance" */
.glance{border:1px solid rgba(255,255,255,.2)}
.glance h3{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);font-family:var(--body)}
.glance dl{display:grid}
.glance dl>div{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.glance dl>div:last-child{border-bottom:0}
.glance dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px}
.glance dd{margin:0;font-size:14.5px;color:rgba(255,255,255,.86)}

/* Full-bleed hero figure for case studies */
.pfig{position:relative;height:clamp(300px,42vw,560px);overflow:hidden;background:var(--navy-800)}
.pfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------- NARRATIVE */
.narr{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(22px,4vw,72px)}
.narr__lbl{position:sticky;top:calc(var(--head-h) + 28px);align-self:start}
.narr p{font-size:17px;line-height:1.72;color:var(--ink-600);max-width:64ch;margin-bottom:20px}
.narr p:last-child{margin-bottom:0}
@media (max-width:860px){.narr{grid-template-columns:1fr;gap:20px}.narr__lbl{position:static}}

/* Quote band */
.qb{background:var(--navy);color:#fff;padding:clamp(64px,8vw,124px) 0;position:relative;overflow:hidden}
.qb .mark{position:absolute;right:-150px;bottom:-190px;height:620px;opacity:.06;pointer-events:none}
.qb>.wrap{position:relative}
.qb blockquote{margin:clamp(24px,3vw,44px) 0 0;max-width:22ch}

/* -------------------------------------------------------- HAIRLINE GRIDS */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.grid4>div{background:var(--paper);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px}
.grid4 h3{font-family:var(--display);font-size:clamp(19px,1.8vw,24px);font-weight:700;letter-spacing:-.035em;line-height:1.05;text-transform:uppercase}
.grid4 p{font-size:14.5px;line-height:1.55;color:var(--ink-600)}
@media (max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}

/* Timeline */
.tl{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--orange)}
.tl__c{padding:26px clamp(20px,2.6vw,40px) 26px 0;border-right:1px solid var(--line-strong)}
.tl__c:last-child{border-right:0}
.tl__y{font-family:var(--display);font-size:clamp(30px,3.6vw,54px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.tl__c h4{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.025em;text-transform:uppercase;margin:14px 0 8px}
.tl__c p{font-size:14.5px;line-height:1.55;color:var(--ink-500);max-width:34ch}
@media (max-width:800px){.tl{grid-template-columns:1fr}.tl__c{border-right:0;border-bottom:1px solid var(--line-strong);padding-right:0}.tl__c:last-child{border-bottom:0}}

/* Locations */
.locs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.loc{border:1px solid var(--line-strong);background:var(--paper);display:flex;flex-direction:column}
.loc__map{position:relative;aspect-ratio:16/9;background:var(--mist)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04)}
.loc__b{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;flex:1}
.loc__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.loc__hd h3{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.045em;line-height:1;text-transform:uppercase}
.loc__addr{font-size:15.5px;line-height:1.55;color:var(--ink-600)}
.loc dl{display:grid;grid-template-columns:92px 1fr;gap:9px 16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.loc dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500);padding-top:3px}
.loc dd{margin:0}
@media (max-width:800px){.locs{grid-template-columns:1fr}}

/* --------------------------------------------------------------- FILTERS */
.filters{display:flex;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.chip{background:0;border:0;border-right:1px solid var(--line-strong);padding:16px clamp(14px,2vw,24px);font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500);cursor:pointer;transition:background .16s,color .16s}
.chip:hover{background:var(--mist);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff}
.filters__n{margin-left:auto;padding-left:22px;color:var(--ink-500)}
@media (max-width:700px){.filters__n{margin-left:0;padding:14px 0}}

/* Project cards */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-top:0}
.pcard{background:var(--paper);display:flex;flex-direction:column;transition:background .22s}
.pcard:hover{background:var(--mist);color:inherit}
.pcard[hidden]{display:none}
.pcard__fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-800)}
.pcard__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard__fig img{transform:scale(1.04)}
.pcard__tag{position:absolute;top:0;left:0;z-index:2;background:var(--orange);color:var(--navy);padding:9px 15px}
.pcard__yr{position:absolute;right:18px;bottom:14px;z-index:2;color:rgba(255,255,255,.8)}
.pcard__b{padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;flex:1}
.pcard h3{font-family:var(--display);font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.04em;line-height:1.04;text-transform:uppercase}
.pcard p{font-size:15px;line-height:1.55;color:var(--ink-600)}
.pcard dl{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.pcard dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.pcard dd{margin:5px 0 0;font-size:13.5px;color:var(--ink)}
.pgrid__empty{grid-column:1/-1;background:var(--paper);padding:clamp(48px,7vw,96px) clamp(24px,4vw,56px);color:var(--ink-500)}
@media (max-width:800px){.pgrid{grid-template-columns:1fr}}

/* -------------------------------------------------------- SERVICE BLOCKS */
.svcb{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center;padding:clamp(44px,5vw,84px) 0;border-bottom:1px solid var(--line-strong)}
.svcb:last-child{border-bottom:0}
.svcb--flip .svcb__fig{order:2}
.svcb__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.svcb__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svcb__fig::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;background:var(--orange)}
.svcb h3{margin-top:14px}
.svcb>div>p{margin-top:clamp(18px,2vw,26px);font-size:17px;line-height:1.65;color:var(--ink-600);max-width:52ch}
.ticks{margin:clamp(20px,2.4vw,30px) 0 clamp(24px,3vw,34px)}
.ticks li{position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-600)}
@media (max-width:900px){.svcb{grid-template-columns:1fr}.svcb--flip .svcb__fig{order:0}}

/* -------------------------------------------------------- DOC PAGE (2col) */
.doc{display:grid;grid-template-columns:225px minmax(0,1fr);gap:clamp(26px,5vw,84px)}
.docnav{position:sticky;top:calc(var(--head-h) + 28px);align-self:start}
.docnav ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.docnav a{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35;color:var(--ink-500);transition:color .18s}
.docnav a:hover,.docnav a.active{color:var(--ink)}
.docnav a.active>span:first-child{color:var(--orange-700)}
.docsec{padding-bottom:clamp(40px,5vw,76px)}
.docsec:last-child{padding-bottom:0}
.docsec h2{font-family:var(--display);font-size:clamp(25px,3.1vw,42px);font-weight:700;letter-spacing:-.045em;line-height:.96;text-transform:uppercase;margin:16px 0 22px;max-width:20ch}
.docsec p{font-size:17px;line-height:1.72;color:var(--ink-600);max-width:64ch;margin-bottom:18px}
.docsec p:last-child{margin-bottom:0}
@media (max-width:900px){.doc{grid-template-columns:1fr}.docnav{position:static}}

/* Spec grid */
.stack{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:clamp(24px,3vw,34px)}
.stack>div{background:var(--paper);padding:17px 22px}
.stack dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.stack dd{margin:6px 0 0;font-size:15px;color:var(--ink)}
@media (max-width:560px){.stack{grid-template-columns:1fr}}

/* Capability table */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.caps>div{background:var(--paper);padding:clamp(22px,2.4vw,30px)}
.caps h4{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.caps>div>p{margin-top:6px;font-size:13px;color:var(--ink-500)}
.caps ul{margin-top:16px;display:grid;gap:8px}
.caps li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.5;color:var(--ink-600)}
.caps li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--orange)}
@media (max-width:560px){.caps{grid-template-columns:1fr}}

/* Process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.proc>div{background:var(--paper);padding:clamp(20px,2.2vw,28px)}
.proc__n{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--orange-700)}
.proc h4{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.025em;text-transform:uppercase;margin:12px 0 8px}
.proc p{font-size:14px;line-height:1.5;color:var(--ink-500)}
@media (max-width:900px){.proc{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.proc{grid-template-columns:1fr}}

/* Bullet list inside doc content */
.dlist{margin-top:clamp(20px,2.4vw,28px)}
.dlist li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--ink-600)}
.dlist li:last-child{border-bottom:1px solid var(--line)}
.dlist strong{color:var(--ink)}
.ticks li::before,.dlist li::before{content:"";position:absolute;left:0;top:1.18em;width:8px;height:8px;background:var(--orange)}

/* FAQ */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-family:var(--display);font-size:clamp(17px,1.7vw,23px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:700;color:var(--orange-700)}
.faq details[open] summary::after{content:"\2013"}
.faq details>p{padding:0 0 24px;font-size:16px;line-height:1.68;color:var(--ink-600);max-width:64ch}

/* ------------------------------------------------------------------ FORM */
.form{border-top:1px solid var(--line-strong)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px)}
.field{display:grid;gap:7px;padding:16px 0;border-bottom:1px solid var(--line-strong)}
.field label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:transparent;border:0;padding:5px 0;outline:none}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-400)}
.field:focus-within label{color:var(--orange-700)}
.form__go{padding-top:clamp(24px,3vw,34px)}
.form__note{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--ink-500);max-width:46ch}
@media (max-width:640px){.f2{grid-template-columns:1fr}}

/* Contact rail */
.crail{display:grid;gap:clamp(22px,3vw,36px)}
.crail__b{border-top:4px solid var(--orange);background:var(--paper);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line-strong);padding:clamp(22px,2.4vw,32px);display:grid;gap:12px}
.crail__b h3{font-family:var(--display);font-size:clamp(21px,2.2vw,28px);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.crail__b p,.crail__b a{font-size:15.5px;line-height:1.55;color:var(--ink-600)}
.crail__b a{border-bottom:1px solid var(--line-strong)}
.crail__b a:hover{color:var(--orange-700);border-color:var(--orange)}

/* --------------------------------------------------------------- PRODUCT */
.prod{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:center}
.prod--flip .prod__fig{order:2}
.shot{border:1px solid var(--line-strong);background:var(--paper)}
.u-dark .shot{border-color:rgba(255,255,255,.18)}
.shot img{width:100%;display:block}
.prodmeta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:clamp(22px,3vw,32px)}
.u-dark .prodmeta{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.18)}
.prodmeta>div{background:var(--paper);padding:16px 20px}
.u-dark .prodmeta>div{background:var(--navy)}
.prodmeta dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.u-dark .prodmeta dt{color:rgba(255,255,255,.5)}
.prodmeta dd{margin:6px 0 0;font-size:15px}
@media (max-width:900px){.prod{grid-template-columns:1fr}.prod--flip .prod__fig{order:0}}
@media (max-width:520px){.prodmeta{grid-template-columns:1fr}}

/* --------------------------------------------------------- ARTICLE INDEX */
.alist{border-top:1px solid var(--line-strong)}
.arow{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,.9fr) 28px;gap:clamp(14px,2vw,30px);align-items:start;padding:20px 0;border-bottom:1px solid var(--line);transition:background .18s,padding .28s var(--ease)}
.arow:hover{background:var(--mist);color:inherit}
.arow__n{padding-top:.35em;color:var(--ink-400)}
.arow:hover .arow__n{color:var(--orange-700)}
.arow h3{font-family:var(--display);font-size:clamp(17px,1.8vw,25px);font-weight:700;letter-spacing:-.04em;line-height:1.04;text-transform:uppercase}
.arow p{font-size:14.5px;line-height:1.5;color:var(--ink-500);padding-top:3px}
.arow__go{justify-self:end;padding-top:.2em;color:var(--ink-400);transition:transform .28s var(--ease),color .2s}
.arow:hover .arow__go{transform:translateX(6px);color:var(--orange-700)}
.arow__go svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
@media (max-width:860px){.arow{grid-template-columns:44px 1fr}.arow p,.arow__go{display:none}}

/* Rail header */
.rail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.rail__head h3{font-family:var(--display);font-size:clamp(24px,3vw,40px);font-weight:700;letter-spacing:-.045em;text-transform:uppercase;line-height:1}
@media (max-width:640px){.rail__head{flex-direction:column;align-items:flex-start}}

/* --------------------------------------------------------- WORLD MAP
   Homepage "Projects delivered in" section. Two layers share one
   1000x394 equirectangular viewBox: a generated dotted landmass
   (tools/gen-world-map.py) as an <img>, and inline pins on top so
   case-study sites stay real links. Changing either viewBox unregisters
   the pins from the coastline. */
.wmap{padding-top:clamp(56px,6vw,92px);padding-bottom:clamp(60px,7vw,100px);border-top:1px solid rgba(255,255,255,.16)}
.wmap__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,64px);align-items:end;margin:clamp(30px,4vw,52px) 0 clamp(28px,4vw,48px)}
@media (max-width:860px){.wmap__head{grid-template-columns:1fr}}

/* The cycling names run from "IRAQ" to "COOTAMUNDRA, NSW", which wrap to
   different line counts and would change the heading's height on every tick,
   shoving the map down the page. A hidden strut holds the tallest name so the
   block is a fixed height at any viewport, and the live text is laid over it.
   A min-height in em cannot do this job — where the wrap happens depends on
   the column width, not just the font size.
   Selector carries .d to outrank `.d .thin`, which would otherwise grey it. */
.d .wmap__city{display:block;position:relative;color:var(--orange)}
.wmap__city-strut{visibility:hidden}
.wmap__city-live{position:absolute;left:0;top:0;right:0;transition:opacity .22s var(--ease)}

.wmap__fig{position:relative}
.wmap__base{display:block;width:100%;height:auto}
.wmap__pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.wmap__pin{cursor:default}
.wmap__pin--case{cursor:pointer}
.wmap__hit{fill:transparent;pointer-events:all}
.wmap__dot{fill:var(--pac-300);pointer-events:none;transform-box:fill-box;transform-origin:center;transition:transform .22s var(--ease),fill .2s}
.wmap__pin--case .wmap__dot{fill:var(--orange)}
.wmap__pin:hover .wmap__dot{transform:scale(1.7)}
.wmap__pin--case:focus-visible{outline:none}
.wmap__pin--case:focus-visible .wmap__dot{transform:scale(1.7);fill:#fff}

/* Slow sonar ping on the six pins that lead somewhere. */
.wmap__ring{fill:none;stroke:var(--orange);stroke-width:1.1;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:wmapPing 4s var(--ease) infinite;animation-delay:calc(var(--i,0)*.55s)}
@keyframes wmapPing{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}

.wmap__cap{min-height:1.6em;margin-top:clamp(12px,1.8vw,20px);font-size:15px;line-height:1.5;color:var(--pac-300)}
.wmap__cap b{color:#fff}

/* Photo card for hovered case pins. The script anchors it at the pin's
   coordinates (as % of the fig) and flips it with is-left / is-below so a
   card near the map's edge opens inward instead of off the section. */
.wmap__peek{position:absolute;z-index:3;width:min(250px,44vw);margin:0;--tx:16px;--ty:calc(-100% - 14px);transform:translate(var(--tx),var(--ty));background:var(--navy-800);border:1px solid rgba(255,255,255,.16);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility .22s}
.wmap__peek.is-left{--tx:calc(-100% - 16px)}
.wmap__peek.is-below{--ty:14px}
.wmap__peek.is-on{opacity:1;visibility:visible}
.wmap__peek img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.wmap__peek figcaption{padding:10px 12px 12px;font-size:13px;line-height:1.45;color:var(--pac-300)}
.wmap__peek figcaption b{display:block;color:#fff}

.wmap__list{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(20px,3vw,32px);padding-top:clamp(16px,2.4vw,26px);border-top:1px solid rgba(255,255,255,.16);list-style:none}
.wmap__list li{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pac-300);padding:4px 0}
.wmap__list li:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--orange);opacity:.75;margin:0 clamp(10px,1.4vw,16px);vertical-align:middle}

/* The map itself only shrinks with the viewport, so the pins have to grow
   back or they vanish on a phone. r as a CSS geometry property; the r
   attribute in the markup stays the fallback. */
@media (max-width:760px){
  .wmap__dot{r:6px}
  .wmap__pin--case .wmap__dot{r:7px}
  .wmap__hit{r:18px}
  .wmap__ring{r:7px}
}
@media (prefers-reduced-motion:reduce){
  .wmap__ring{animation:none;opacity:.35}
  .wmap__dot,.wmap__city{transition:none}
  .wmap__peek{transition:none}
}

/* --------------------------------------------------------- HERO SLIDESHOW
   pac.css already lays .hero__fig img out absolutely with object-fit:cover,
   so the slides are stacked and only need opacity. Slide 1 carries .is-on in
   the markup, which is what makes the no-JS case a plain static hero. */
.hero__slide{opacity:0;transition:opacity .9s var(--ease)}
.hero__slide.is-on{opacity:1}
.hero__cap .lbl,.hero__cap p{transition:opacity .28s var(--ease)}
.hero__cap.is-swapping .lbl,.hero__cap.is-swapping p{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__cap .lbl,.hero__cap p{transition:none}
}