/* ==========================================================================
   Orient AC — "Airz" design system (v2)
   Loaded on the templates listed in orient_ac_airz_templates() (home and the
   services hub), after orient-base.css. Every rule is scoped to the `oaz` body
   class so the residential / office / commercial pages keep rendering on the
   old system until this one is rolled out to them too.

   Design language follows themes.pixelwars.org/airz/demo-01/home-04:
     - very large, tightly-tracked semibold display type (Plus Jakarta Sans)
     - a quiet 16px body face (Teachers) at a long measure
     - micro eyebrows preceded by a filled dot
     - asymmetric section heads: title left, lede + "view all" link right
     - 10px photo cards with a bottom-left label plate
     - one pale-sky band and one near-black band to break up the white
     - outlined pill buttons over photography, a solid square-ish blue button
       on light ground, and an arrow glyph on nearly every call to action

   The Airz hues are mapped onto Orient's brand rather than copied, because the
   Elementor header and footer are fixed in navy/blue and this stylesheet
   cannot reach them. Airz's #0056BA is within a hair of Orient's #024DDA, so
   the primary action colour carries over almost unchanged.
   ========================================================================== */

.oaz{
  /* ink + text */
  --z-ink:#07132E;          /* headings — Orient navy, Airz uses #020014      */
  --z-body:#44556F;         /* body copy — Airz #32455E                        */
  --z-muted:#7A879B;
  --z-on-dark:#EAF0FB;
  --z-on-dark-muted:#9FB0CC;

  /* action */
  --z-blue:#024DDA;         /* Airz #0056BA -> Orient brand blue               */
  --z-blue-deep:#013CAB;
  --z-dot:#657AB4;          /* the eyebrow dot                                 */
  --z-wa:#25D366;

  /* surfaces */
  --z-paper:#FFFFFF;
  --z-sky:#B7D2E9;          /* the signature pale-sky band                     */
  --z-sky-soft:#E7F0F8;
  --z-dark:#061024;         /* Airz #07171F -> Orient deep navy                */
  --z-indigo:#2E3588;       /* heta.peerduck.com's what-we-do band              */
  --z-indigo-dot:#AEB8E8;
  --z-indigo-title:#AEB8E8; /* light periwinkle titles, per the reference shot  */
  --z-on-indigo:#C6CCEC;
  --z-line-indigo:rgba(255,255,255,.18);
  --z-line:#E4E9F1;
  --z-line-strong:#CDD3E0;  /* hairlines that have to show on the mist ground */
  /* heta.peerduck.com: its orange accent (sampled from the supplied quote
     mark and icon), its pale grey page ground, and the footer's own navy */
  --z-accent:#EFA23F;
  --z-mist:#F2F3F7;
  --z-footer:var(--e-global-color-29740d0,#07132E);
  --z-line-dark:rgba(255,255,255,.14);

  /* shape */
  --z-r:10px;               /* every card and photo                            */
  --z-r-sm:6px;             /* solid buttons                                   */
  --z-pill:999px;

  /* rhythm */
  --z-sec:clamp(68px,8.5vw,128px);
  --z-maxw:1280px;
  --z-gutter:clamp(18px,4.4vw,56px);
}

/* --------------------------------------------------------------------------
   Base typography
   The two-class selectors below (.oaz .oaz-page h2) outrank orient-base.css's
   `.orient-tpl h1` rules, so the old Sora / IBM Plex stack is replaced without
   needing !important.
   -------------------------------------------------------------------------- */
.oaz .oaz-page{
  background:var(--z-paper);
  color:var(--z-body);
  font-family:Teachers,"Segoe UI",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.65;
  overflow-x:clip;
}

.oaz .oaz-page h1,
.oaz .oaz-page h2,
.oaz .oaz-page h3,
.oaz .oaz-page h4{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  color:var(--z-ink);
  margin:0;
  letter-spacing:-.028em;
  line-height:1.04;
  text-wrap:balance;
}
.oaz .oaz-page p{margin:0}
.oaz .oaz-page img{display:block;max-width:100%;height:auto}

/* Display sizes. The hero runs tighter than the section titles, as on the
   reference, where the h1 sits near line-height .9 and section titles at 1.05. */
.oaz .oaz-d1{font-size:clamp(2.5rem,6.2vw,4.9rem);line-height:.94;letter-spacing:-.034em}
.oaz .oaz-d2{font-size:clamp(1.95rem,4vw,3.15rem);line-height:1.02}
.oaz .oaz-d3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.15;letter-spacing:-.022em}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.oaz-wrap{
  width:100%;
  max-width:var(--z-maxw);
  margin-inline:auto;
  padding-inline:var(--z-gutter);
}
.oaz-sec{padding-block:var(--z-sec)}
.oaz-sec--sky{background:var(--z-sky)}
.oaz-sec--dark{background:var(--z-dark);color:var(--z-on-dark-muted)}
.oaz-sec--tight{padding-block:clamp(48px,5.5vw,76px)}

/* Two classes, to beat the (0,2,0) `.oaz .oaz-page h2` colour rule above.
   At (0,1,1) these lost, and the dark band rendered navy type on navy. */
.oaz .oaz-sec--dark h2,
.oaz .oaz-sec--dark h3{color:#fff}

/* --------------------------------------------------------------------------
   Eyebrow — uppercase micro label behind a filled dot
   -------------------------------------------------------------------------- */
.oaz-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.75rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--z-ink);
}
.oaz-eyebrow::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--z-dot);
  flex:none;
}
.oaz-sec--dark .oaz-eyebrow,
.oaz-cta .oaz-eyebrow{color:#fff}

/* --------------------------------------------------------------------------
   Section head — title on the left, lede and "view all" on the right.
   Collapses to a single column below 900px.
   -------------------------------------------------------------------------- */
.oaz-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);
  gap:clamp(22px,3vw,56px);
  align-items:end;
  margin-bottom:clamp(34px,4.2vw,64px);
}
.oaz-head__l{display:grid;gap:18px;justify-items:start}
.oaz-head__r{display:grid;gap:22px;justify-items:start;padding-bottom:6px}
.oaz-head__r p{font-size:1.02rem;max-width:46ch}
.oaz-sec--dark .oaz-head__r p{color:var(--z-on-dark-muted)}

/* A centred variant for bands with no side content. */
.oaz-head--mid{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:56rem;margin-inline:auto}
.oaz-head--mid .oaz-head__l,
.oaz-head--mid .oaz-head__r{justify-items:center;text-align:center}

@media (max-width:900px){
  .oaz-head{grid-template-columns:1fr;align-items:start}
  .oaz-head__r{padding-bottom:0}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.oaz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:Teachers,"Segoe UI",system-ui,sans-serif;
  font-size:1.02rem;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  border:0;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s;
}
.oaz-btn:hover{transform:translateY(-2px)}

/* Solid, squared-off — the reference's "Get in Touch" */
.oaz-btn--solid{
  background:var(--z-blue);
  color:#fff;
  border-radius:var(--z-r-sm);
  padding:17px 30px;
}
.oaz-btn--solid:hover{background:var(--z-blue-deep);color:#fff}

/* WhatsApp keeps its own green so it reads as the messaging action.
   The transparent border is not decoration: it gives this button the same
   border box as .oaz-btn--outline beside it, so the two are exactly the same
   height. Without it the bordered one sat 1.2px taller, which is visible when
   they sit side by side. */
.oaz-btn--wa{
  background:var(--z-wa);
  color:#06331A;
  border:1.6px solid transparent;
  border-radius:var(--z-r-sm);
  padding:17px 28px;
  font-weight:600;
}
.oaz-btn--wa:hover{background:#1FBF5B;color:#06331A}

/* Squared outline, for pairing with a squared solid button on a dark ground. */
.oaz-btn--outline{
  background:transparent;
  color:#fff;
  border:1.6px solid rgba(255,255,255,.62);
  border-radius:var(--z-r-sm);
  padding:17px 28px;
}
.oaz-btn--outline:hover{background:#fff;color:var(--z-ink);border-color:#fff}

/* Outlined pill — the reference's hero button, used over photography */
.oaz-btn--ghost{
  background:transparent;
  color:#fff;
  border:1.6px solid rgba(255,255,255,.62);
  border-radius:var(--z-pill);
  padding:15px 34px;
}
.oaz-btn--ghost:hover{background:#fff;color:var(--z-ink);border-color:#fff}

/* Solid white pill — the primary action over photography. Airz inverts its
   outlined hero button to exactly this on hover, so using it as the resting
   state of the one button that matters most stays inside the language. */
.oaz-btn--light{
  background:#fff;
  color:var(--z-ink);
  border-radius:var(--z-pill);
  padding:15px 32px;
  font-weight:600;
}
.oaz-btn--light:hover{background:var(--z-wa);color:#06331A}

/* The same pill drawn on light ground */
.oaz-btn--ghost-ink{
  background:transparent;
  color:var(--z-ink);
  border:1.6px solid rgba(7,19,46,.26);
  border-radius:var(--z-pill);
  padding:15px 34px;
}
.oaz-btn--ghost-ink:hover{background:var(--z-ink);color:#fff;border-color:var(--z-ink)}

/* --------------------------------------------------------------------------
   Textual link with the corner arrow — the reference's "View All Services"
   -------------------------------------------------------------------------- */
.oaz-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--z-ink);
  text-decoration:none;
  white-space:nowrap;
}
.oaz-link svg{transition:transform .3s}
.oaz-link:hover svg{transform:translate(3px,-3px)}
.oaz-link--under{padding-bottom:6px;border-bottom:1px solid currentColor}
/* .oaz-link defaults to ink. Anywhere it sits on a dark ground it has to be
   told, or it paints navy. */
.oaz-sec--dark .oaz-link{color:#fff}

/* --------------------------------------------------------------------------
   HERO — heta.peerduck.com: fixed copy over a cross-fading, slowly zooming
   background slideshow, a play button, and an inset services card standing
   on the hero's bottom edge. orient-hero.js rotates .is-active; with JS off
   or with reduced motion the first photo just stays, without the zoom.
   -------------------------------------------------------------------------- */
.oaz-hx{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(600px,92vh,900px);
  display:grid;
  grid-template-rows:1fr auto;
  background:var(--z-ink);
  color:#fff;
  /* The Elementor header is position:absolute over the hero, at these heights
     (its min-height in post-14.css, per Elementor breakpoint). The copy is
     pushed down by the header's height PLUS a real gap, rather than a fixed
     number that happened to clear it on desktop and left 7px on a phone. */
  --z-header-h:100px;
}
/* The page hero (.oaz-ph, further down) sits under the same header. */
.oaz-ph{--z-header-h:100px}
@media (max-width:1024px){.oaz-hx,.oaz-ph{--z-header-h:85px}}
@media (max-width:767px){.oaz-hx,.oaz-ph{--z-header-h:65px}}

.oaz-hx__bgs{position:absolute;inset:0;z-index:-1}
.oaz-hx__bg{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.oaz-hx__bg.is-active{opacity:1;z-index:2}
/* The outgoing photo keeps is-leaving for the length of the fade. Its
   animation-name does not change when is-active swaps for is-leaving, so the
   zoom carries on from where it was instead of snapping back to scale(1)
   halfway through the cross-fade. */
.oaz-hx__bg.is-leaving{z-index:1}
.oaz .oaz-hx__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.oaz-hx.is-playing .oaz-hx__bg.is-active img,
.oaz-hx.is-playing .oaz-hx__bg.is-leaving img{animation:oaz-kenburns 8s linear both}
@keyframes oaz-kenburns{from{transform:scale(1)}to{transform:scale(1.13)}}

/* Scrim: heavy on the left where the copy sits, easing off to the right so the
   photo still reads, plus a foot shade under the card. */
.oaz-hx__bgs::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:
    linear-gradient(90deg,rgba(7,19,46,.86) 0%,rgba(7,19,46,.66) 42%,rgba(7,19,46,.28) 100%),
    linear-gradient(180deg,rgba(7,19,46,.30) 0%,rgba(7,19,46,0) 30%,rgba(7,19,46,.45) 100%);
}

.oaz-hx__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
  gap:32px;
  padding-block:calc(var(--z-header-h) + clamp(32px,4vw,48px)) clamp(40px,5vw,64px);
}
.oaz-hx__copy{display:grid;gap:26px;justify-items:start;max-width:44rem}
.oaz .oaz-hx .oaz-eyebrow{color:var(--z-accent)}
.oaz .oaz-hx .oaz-eyebrow::before{background:var(--z-accent)}
/* Sized for the keyword headline (three lines on desktop), not a short slogan. */
.oaz .oaz-hx__copy h1{color:#fff;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.04}
.oaz-hx__lede{
  font-size:clamp(1.04rem,1.45vw,1.2rem);
  line-height:1.7;
  color:rgba(255,255,255,.86);
  max-width:50ch;
}
.oaz-hx__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}

/* Play button with the reference's ripple ring */
.oaz-hx__play{
  justify-self:center;
  position:relative;
  width:92px;height:92px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--z-accent);
  text-decoration:none;
  transition:transform .3s;
}
.oaz-hx__play:hover{transform:scale(1.08)}
.oaz-hx__play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.oaz-hx__play-ic{display:grid;place-items:center;margin-left:4px}
.oaz-hx__play::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:1px solid #fff;
  animation:oaz-ripple 2s cubic-bezier(.23,1,.32,1) infinite;
}
@keyframes oaz-ripple{
  0%{border-width:4px;transform:scale(1)}
  80%{border-width:1px;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.35)}
}

.oaz-hx__foot{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

/* Pause control for the slideshow. Printed hidden; orient-hero.js shows it only
   when the slideshow actually runs. */
.oaz .oaz-hx__pause{
  width:38px;height:38px;
  margin-bottom:26px;
  padding:0;
  display:inline-grid;place-items:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:#fff;
  cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s;
}
.oaz .oaz-hx__pause[hidden]{display:none}
.oaz .oaz-hx__pause:hover,
.oaz .oaz-hx__pause:focus{background:#fff;color:var(--z-ink);border-color:#fff}
.oaz-hx__pause-ic{
  width:12px;height:12px;
  background:
    linear-gradient(currentColor,currentColor) 1px 50%/3.5px 11px no-repeat,
    linear-gradient(currentColor,currentColor) 7.5px 50%/3.5px 11px no-repeat;
}
.oaz-hx__pause[aria-pressed="true"] .oaz-hx__pause-ic{
  width:0;height:0;
  margin-left:3px;
  background:none;
  border-left:10px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* The inset card, flush with the bottom of the hero */
.oaz-hx__card{
  margin-left:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(100%,560px);
  min-height:206px;
  background:rgba(7,19,46,.92);
  color:#fff;
  text-decoration:none;
}
.oaz-hx__card-body{
  display:grid;
  align-content:space-between;
  gap:20px;
  padding:clamp(22px,2.4vw,32px);
}
.oaz-hx__card-title{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.025em;
}
.oaz-hx__card-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:500;
  color:var(--z-accent);
}
.oaz-hx__card-more span{border-bottom:1px solid currentColor;padding-bottom:3px}
.oaz-hx__card-more svg{color:#fff;transition:transform .3s}
.oaz-hx__card:hover .oaz-hx__card-more svg{transform:translateX(5px)}
.oaz-hx__card-fig{display:block;overflow:hidden}
.oaz .oaz-hx__card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.oaz-hx__card:hover .oaz-hx__card-fig img{transform:scale(1.06)}

@media (max-width:900px){
  .oaz-hx{min-height:0}
  .oaz-hx__inner{grid-template-columns:1fr;padding-bottom:36px}
  .oaz-hx__play{justify-self:start;width:70px;height:70px}
  .oaz-hx__bgs::after{background:linear-gradient(180deg,rgba(7,19,46,.72) 0%,rgba(7,19,46,.78) 60%,rgba(7,19,46,.9) 100%)}
  .oaz-hx__foot{flex-direction:column-reverse;align-items:stretch;gap:0;padding-inline:0}
  .oaz-hx__card{width:100%;min-height:150px}
  .oaz .oaz-hx__pause{margin:0 var(--z-gutter) 18px}
}
@media (max-width:560px){
  .oaz-hx__cta .oaz-btn{flex:1 1 100%}
}

/* Video dialog, opened from the play button */
.oaz-vdlg{
  width:min(1100px,calc(100vw - 32px));
  max-width:none;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.oaz-vdlg::backdrop{background:rgba(4,10,26,.86)}
.oaz-vdlg__panel{position:relative}
.oaz .oaz-vdlg__video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:4px}
.oaz .oaz-vdlg__close{
  position:absolute;
  top:-52px;right:0;
  width:42px;height:42px;
  padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:#fff;
  cursor:pointer;
}
.oaz .oaz-vdlg__close:hover,
.oaz .oaz-vdlg__close:focus{background:#fff;color:var(--z-ink)}

/* --------------------------------------------------------------------------
   Section head, stacked variant — title only, no right-hand column.
   -------------------------------------------------------------------------- */
.oaz-head--stack{grid-template-columns:1fr}

/* --------------------------------------------------------------------------
   SPLIT — heta.peerduck.com "Why us" and "FAQ": copy on the left, a photo in
   a patterned frame on the right with a row of stat tiles along its foot.
   -------------------------------------------------------------------------- */
.oaz-sec--mist{background:var(--z-mist)}

.oaz-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(36px,6vw,110px);
  align-items:center;
}
.oaz-split__copy{display:grid;gap:22px;justify-items:start}
.oaz-split__lede{font-size:1.08rem;line-height:1.75;max-width:54ch}

/* Trust points, each led by the sun-and-snowflake mark */
.oaz-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:26px}
.oaz-point{display:grid;grid-template-columns:48px minmax(0,1fr);gap:22px;align-items:start}
.oaz .oaz-point__ic{width:48px;height:48px}
.oaz-point__body{display:grid;gap:6px}
.oaz .oaz-point__body h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.3}
.oaz-point__body p{font-size:.98rem;color:var(--z-body);max-width:48ch}

/* The frame: the reference's lattice texture showing round the photo */
.oaz-collage{
  padding:clamp(22px,2.8vw,40px);
  background:url("../img/heta/texture.webp") center/520px repeat;
}
.oaz-collage__fig{margin:0;aspect-ratio:21/16;overflow:hidden}
.oaz .oaz-collage__fig img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.oaz-collage__tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.oaz-tile{
  display:grid;
  align-content:end;
  gap:8px;
  min-height:clamp(150px,15vw,210px);
  padding:clamp(20px,2.4vw,32px);
  color:#fff;
}
.oaz-tile b{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
}
/* The figure never breaks (an en dash in "2–4" is a legal break point); the
   small unit beside it may drop to its own line in a narrow tile. */
.oaz-tile__n{white-space:nowrap}
.oaz-tile b sup{font-size:.55em;vertical-align:.55em;margin-left:.08em;line-height:0}
.oaz-tile b small{display:inline-block;font-size:.4em;font-weight:500;letter-spacing:-.01em;margin-left:.1em}
.oaz-tile > span{font-size:1.02rem;line-height:1.35}
.oaz-tile--accent{background:var(--z-accent)}
.oaz-tile--ink{background:var(--z-indigo)}

@media (max-width:900px){
  .oaz-split{grid-template-columns:1fr}
}
@media (max-width:420px){
  .oaz-tile b{font-size:2rem}
  .oaz-tile > span{font-size:.92rem}
}

/* FAQ accordion — hairline-ruled rows, +/- on the right, the open question
   picked out in indigo, as on the reference. */
.oaz-acc{display:grid;width:100%;margin-top:8px}
.oaz-acc details{border-bottom:1px solid #D9DCE6}
.oaz-acc summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-block:20px;
  cursor:pointer;
  list-style:none;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.4;
  color:var(--z-ink);
  transition:color .25s;
}
.oaz-acc summary::-webkit-details-marker{display:none}
.oaz-acc summary:hover,
.oaz-acc details[open] summary{color:var(--z-indigo)}
/* + drawn from two bars; the vertical one drops away to leave a minus. */
.oaz-acc summary::after{
  content:"";
  flex:none;
  width:14px;height:14px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat;
}
.oaz-acc details[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat;
}
.oaz-acc summary:focus-visible{outline:2px solid var(--z-blue);outline-offset:4px}
.oaz-acc details p{padding-bottom:22px;max-width:62ch;font-size:.98rem}

/* --------------------------------------------------------------------------
   WHAT WE DO — the heta.peerduck.com indigo band
   -------------------------------------------------------------------------- */
.oaz-wwd{
  background:var(--z-indigo);
  color:var(--z-on-indigo);
  padding-block:var(--z-sec);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* The faint cross motif tiled across the band. Drawn in CSS rather than shipped
   as a PNG the way the reference does — it is two hairlines per tile, so an
   image request would cost more than the pattern is worth. */
.oaz-wwd::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  /* An SVG tile, not stacked linear-gradients. A gradient sized 13px x 1px and
     set to `repeat` tiles edge to edge in BOTH axes, so each layer paints as a
     solid sheet — two of those turned the band into washed-out periwinkle
     instead of drawing anything. An SVG constrains the mark in both axes. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 19.5v7M19.5 23h7' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  background-size:46px 46px;
  background-repeat:repeat;
}

.oaz-wwd__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,88px);
  align-items:start;
}
.oaz-wwd__aside{display:grid;gap:20px;justify-items:start}
.oaz-wwd .oaz-eyebrow{color:#fff}
.oaz-wwd .oaz-eyebrow::before{background:var(--z-indigo-dot)}
.oaz .oaz-wwd__aside h2{color:#fff}
.oaz-wwd__aside p{color:var(--z-on-indigo);max-width:40ch}
/* The remote is a transparent cut-out, so it gets no frame, radius or crop —
   it stands on the band itself, as on the reference. `contain` rather than
   `cover` because cropping a cut-out would slice the hand off. */
.oaz-wwd__fig{
  margin:14px 0 0;
  width:100%;
  max-width:340px;
}
.oaz .oaz-wwd__fig img{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 38px rgba(4,8,30,.42));
}

.oaz-wwd__list{list-style:none;margin:0;padding:0;display:grid}
.oaz-wwd__item{border-top:1px solid var(--z-line-indigo)}
.oaz-wwd__item:first-child{border-top:0}
.oaz-wwd__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,34px);
  padding-block:clamp(26px,3vw,38px);
  text-decoration:none;
  color:inherit;
}
/* Thin unfilled square, no radius — the reference's icon tile exactly. */
.oaz-wwd__ic{
  width:76px;height:76px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  flex:none;
  transition:background-color .3s,border-color .3s,color .3s;
}
.oaz-wwd__link:hover .oaz-wwd__ic{background:#fff;color:var(--z-indigo);border-color:#fff}
.oaz-wwd__body{display:grid;gap:9px;align-content:start}
.oaz .oaz-wwd__body h3{
  color:var(--z-indigo-title);
  font-size:clamp(1.2rem,1.8vw,1.5rem);
  letter-spacing:-.02em;
}
.oaz-wwd__body p{color:var(--z-on-indigo);font-size:1rem;max-width:44ch}
.oaz-wwd__more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.86rem;
  font-weight:600;
  color:#fff;
}
.oaz-wwd__more svg{transition:transform .3s}
.oaz-wwd__link:hover .oaz-wwd__more svg{transform:translate(3px,-3px)}

@media (max-width:900px){
  .oaz-wwd__grid{grid-template-columns:1fr}
  .oaz-wwd__ic{width:62px;height:62px}
}

/* --------------------------------------------------------------------------
   GALLERY SLIDER — scroll-snap track, four photos to a view, on plain ground
   -------------------------------------------------------------------------- */
.oaz-slider{
  /* Exactly four to a view on desktop: the column width takes the three gaps
     out first, so no sliver of a fifth photo shows at the right edge. The gap
     lives in a custom property so orient-ui.js pages by the same amount. */
  --slider-gap:clamp(14px,1.8vw,22px);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * var(--slider-gap)) / 4);
  gap:var(--slider-gap);
  overflow-x:auto;
  /* proximity, not mandatory: mandatory re-snaps on every layout change, so a
     lazy image finishing its load mid-gesture yanked the track back a slide.
     proximity still snaps a manual swipe, without fighting the paging tween. */
  scroll-snap-type:x proximity;
  /* No scroll-behavior:smooth here. Combined with mandatory snapping, Chrome
     re-snaps mid-animation and throws the track back to the first slide — a
     programmatic scroll to 300px measured as landing back at 0. The buttons ask
     for smooth scrolling per-call in orient-ui.js instead, which does not. */
  scrollbar-width:none;
}
.oaz-slider::-webkit-scrollbar{display:none}
.oaz-slider:focus-visible{outline:3px solid var(--z-blue);outline-offset:-3px;border-radius:4px}

.oaz-slide{margin:0;scroll-snap-align:start}
.oaz-work__link{
  display:block;
  overflow:hidden;
  border-radius:var(--z-r);
  aspect-ratio:4/5;
  background:var(--z-mist);
}
.oaz .oaz-work__link img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.oaz-work__link:hover img{transform:scale(1.06)}

.oaz-slider__nav{display:flex;gap:10px}
.oaz .oaz-slider__btn{
  width:46px;height:46px;
  padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(7,19,46,.28);
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:var(--z-ink);
  cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s,opacity .25s;
}
/* Astra paints button:hover AND button:focus with its brand colour, which left
   a clicked arrow stuck looking filled. Both states are claimed here. */
.oaz .oaz-slider__btn:hover:not(:disabled),
.oaz .oaz-slider__btn:focus:not(:disabled){background:var(--z-ink);color:#fff;border-color:var(--z-ink)}
.oaz .oaz-slider__btn:disabled{opacity:.28;cursor:default;background:transparent;color:var(--z-ink)}

@media (max-width:1000px){
  .oaz-slider{grid-auto-columns:calc((100% - 2 * var(--slider-gap)) / 3)}
}
@media (max-width:700px){
  .oaz-slider{grid-auto-columns:minmax(200px,64%)}
}

/* --------------------------------------------------------------------------
   TESTIMONIALS — heta.peerduck.com indigo band: centred head, two-up quote
   slider, and a cut-out figure standing on the band's bottom edge.
   -------------------------------------------------------------------------- */
.oaz-tst{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:var(--z-sec);
  /* The lattice is knocked back with an indigo wash laid over it: at full
     strength it fought the quotes for attention. */
  background:
    linear-gradient(rgba(46,53,136,.62),rgba(46,53,136,.62)),
    url("../img/heta/texture.webp") center/520px repeat,
    var(--z-indigo);
  color:var(--z-on-indigo);
}
.oaz-tst__head{
  display:grid;
  justify-items:center;
  gap:18px;
  text-align:center;
  max-width:44rem;
  margin:0 auto clamp(40px,5vw,72px);
}
.oaz .oaz-tst .oaz-eyebrow{color:#fff}
.oaz .oaz-tst .oaz-eyebrow::before{background:var(--z-accent)}
.oaz .oaz-tst__head h2{color:#fff}
.oaz-tst__score{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;color:var(--z-on-indigo)}

.oaz-tst__grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);
  align-items:end;
}
.oaz-tst__main{padding-bottom:var(--z-sec);min-width:0}

.oaz-tst__track{
  --tst-gap:clamp(28px,4vw,64px);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--tst-gap)) / 2);
  gap:var(--tst-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.oaz-tst__track::-webkit-scrollbar{display:none}
.oaz-tst__track:focus-visible{outline:2px solid #fff;outline-offset:6px}

.oaz-tst__card{
  margin:0;
  display:grid;
  align-content:start;
  gap:26px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.72);
  scroll-snap-align:start;
}
.oaz .oaz-tst__mark{width:80px;height:auto}
.oaz .oaz-tst__card blockquote{margin:0;padding:0;border:0;font-style:normal;background:none}
.oaz .oaz-tst__card blockquote p{
  font-style:normal;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.1rem,1.55vw,1.32rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.015em;
  color:#fff;
}
.oaz-tst__card figcaption{display:grid;gap:2px;font-size:.92rem;color:var(--z-on-indigo)}
.oaz-tst__card figcaption b{color:#fff;font-weight:600}

/* Dots, built by orient-ui.js — one per scroll stop. */
.oaz-tst__dots{display:flex;justify-content:center;gap:10px;margin-top:34px}
.oaz-tst__dots[hidden]{display:none}
.oaz .oaz-tst__dots button{
  width:9px;height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  box-shadow:none;
  cursor:pointer;
  transition:background-color .25s,transform .25s;
}
.oaz .oaz-tst__dots button:hover,
.oaz .oaz-tst__dots button:focus{background:rgba(255,255,255,.7)}
.oaz .oaz-tst__dots button[aria-current="true"]{background:var(--z-accent);transform:scale(1.2)}

.oaz-tst__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
  margin-top:34px;
}
.oaz .oaz-tst__note{font-size:.84rem;color:var(--z-on-indigo);max-width:56ch}
.oaz .oaz-tst .oaz-link{color:#fff}

.oaz-tst__fig{margin:0;align-self:end}
.oaz .oaz-tst__fig img{width:100%;max-width:440px;margin-left:auto}

@media (max-width:900px){
  .oaz-tst__grid{grid-template-columns:1fr}
  .oaz-tst__main{padding-bottom:0}
  .oaz-tst__track{grid-auto-columns:100%}
  .oaz-tst__fig{justify-self:center;width:min(78%,320px)}
  .oaz .oaz-tst__fig img{margin-inline:auto}
}

/* --------------------------------------------------------------------------
   CTA — the closing band: copy left, contact rows right. Painted in the
   footer's own navy (Elementor global colour 29740d0) so the two run on
   as one block.
   -------------------------------------------------------------------------- */
.oaz-cta{background:var(--z-footer);padding-block:var(--z-sec);color:var(--z-on-dark-muted)}
.oaz-cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.oaz-cta__copy{display:grid;gap:24px;justify-items:start}
.oaz .oaz-cta__copy h2{color:#fff}
.oaz-cta__copy p{color:var(--z-on-dark-muted);font-size:1.06rem;max-width:44ch}
.oaz-cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* Contact rows, lifted from the reference footer: a label beside the value,
   separated by hairlines. */
.oaz-cta__facts{display:grid;margin:0}
.oaz-cta__fact{
  display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  gap:20px;
  padding-block:22px;
  border-top:1px solid var(--z-line-dark);
  align-items:baseline;
}
.oaz-cta__fact:last-child{border-bottom:1px solid var(--z-line-dark)}
.oaz-cta__fact dt{font-size:.9rem;color:var(--z-on-dark-muted)}
.oaz-cta__fact dd{
  margin:0;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:-.02em;
  color:#fff;
}
.oaz-cta__fact dd a{color:inherit;text-decoration:none}
.oaz-cta__fact dd a:hover{text-decoration:underline}

@media (max-width:860px){
  .oaz-cta__grid{grid-template-columns:1fr}
  .oaz-cta__fact{grid-template-columns:1fr;gap:4px}
}

/* ==========================================================================
   INNER PAGES — heta.peerduck.com/reliable-climate-control
   First used by the services hub (template-services.php). Nothing below is
   services-specific by name, so the residential / office / commercial pages
   can pick these up as they move onto this system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HERO — one full-bleed photo, copy on the left, the play button over
   the photo on the right. The reference washes its photo to white; this one
   takes the home hero's navy scrim because the Elementor header floats
   transparent over it with white links.
   -------------------------------------------------------------------------- */
.oaz-ph{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  min-height:clamp(560px,84vh,820px);
  background:var(--z-ink);
  color:#fff;
}
.oaz-ph__bg{position:absolute;inset:0;z-index:-1}
.oaz .oaz-ph__bg img{width:100%;height:100%;object-fit:cover;object-position:68% center}
/* Mirrors a photo whose subject stands where the copy goes. Only for photos
   with no lettering in them (Office AC's hero). */
.oaz .oaz-ph__bg--flip img{transform:scaleX(-1)}
.oaz-ph__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,19,46,.9) 0%,rgba(7,19,46,.72) 40%,rgba(7,19,46,.2) 100%),
    linear-gradient(180deg,rgba(7,19,46,.45) 0%,rgba(7,19,46,0) 28%);
}

.oaz-ph__inner{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:clamp(28px,4vw,56px);
  padding-block:calc(var(--z-header-h) + 18px) clamp(56px,7vw,104px);
}
.oaz-ph__grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  align-items:center;
  gap:32px;
}
.oaz-ph__copy{display:grid;gap:24px;justify-items:start;max-width:46rem}
.oaz .oaz-ph .oaz-eyebrow{color:var(--z-accent)}
.oaz .oaz-ph .oaz-eyebrow::before{background:var(--z-accent)}
.oaz .oaz-ph__copy h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.5rem);line-height:1.02}
.oaz-ph__lede{
  font-size:clamp(1.04rem,1.45vw,1.2rem);
  line-height:1.7;
  color:rgba(255,255,255,.86);
  max-width:50ch;
}
.oaz-ph__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.oaz-ph__note{display:flex;align-items:center;gap:9px;font-size:.92rem;color:rgba(255,255,255,.76)}
.oaz-ph__note svg{flex:none;color:var(--z-accent)}

/* Breadcrumbs (markup and base rules from orient-base.css), restyled for the
   dark photo. The hero's own top padding already clears the header. */
.oaz-ph .oac-crumbs{padding-top:0}
.oaz-ph .oac-crumbs ol{font-size:.86rem}
.oaz-ph .oac-crumbs li{color:rgba(255,255,255,.66)}
.oaz-ph .oac-crumbs a:hover{color:#fff}
.oaz-ph .oac-crumbs [aria-current="page"]{color:#fff}

@media (max-width:900px){
  .oaz-ph{min-height:0}
  .oaz-ph__grid{grid-template-columns:1fr;gap:28px}
  .oaz-ph__bg::after{background:linear-gradient(180deg,rgba(7,19,46,.8) 0%,rgba(7,19,46,.76) 60%,rgba(7,19,46,.88) 100%)}
}
@media (max-width:560px){
  .oaz-ph__cta .oaz-btn{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   STATS BAND — the reference's orange strip under the hero: a one-line
   promise on the left, two large figures on the right. The <dl> puts each
   label before its figure in the source; column-reverse shows the figure
   first.
   -------------------------------------------------------------------------- */
.oaz-stats{background:var(--z-accent);color:#fff;padding-block:clamp(52px,6.5vw,92px)}
.oaz-stats__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  align-items:center;
}
/* Three classes: `.oaz .oaz-page h2` (0,2,1) otherwise paints it navy. */
.oaz .oaz-stats .oaz-stats__title{color:#fff;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.12;max-width:20ch}
.oaz-stats__nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
/* flex-end packs a column-reverse stack to the TOP, so the figures line up
   across the row even when one label wraps to two lines. */
.oaz-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:12px;text-align:center}
.oaz-stat__n{
  margin:0;
  display:inline-flex;
  align-items:flex-start;
  gap:.06em;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(3.4rem,7vw,6rem);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.05em;
  color:#fff;
}
/* The star comes from the stroked icon set; fill it so it reads as a rating. */
.oaz-stat__n svg{width:.42em;height:.42em;margin-top:.06em;fill:currentColor}
.oaz-stat__label{font-size:clamp(1rem,1.3vw,1.15rem);font-weight:500;line-height:1.35;color:#fff}

@media (max-width:900px){
  .oaz-stats__grid{grid-template-columns:1fr}
  .oaz-stat{align-items:flex-start;text-align:left}
}

/* --------------------------------------------------------------------------
   SPLIT, mirrored — collage on the left, copy on the right (the reference's
   "About us"). Stacks copy-first on narrow screens, like the plain split.
   -------------------------------------------------------------------------- */
.oaz-split--flip{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
.oaz-split--flip > .oaz-collage{order:-1}
@media (max-width:900px){
  .oaz-split--flip{grid-template-columns:1fr}
  .oaz-split--flip > .oaz-collage{order:0}
}

/* A photo in the collage's tile row, beside a stat tile. */
.oaz-tile--photo{position:relative;margin:0;padding:0;overflow:hidden;background:var(--z-mist)}
.oaz .oaz-tile--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------------------
   SERVICES BAND — the indigo "What we do" band (.oaz-wwd supplies colour,
   motif and the icon tile), set as three ruled columns with a checklist.
   Each column is a flex column so the links line up along the bottom
   whatever the length of the copy above them.
   -------------------------------------------------------------------------- */
.oaz .oaz-svcs .oaz-head h2{color:#fff}
.oaz-svcs .oaz-head__r p{color:var(--z-on-indigo)}

.oaz-svcs__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--z-line-indigo);
}
.oaz-svc{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:clamp(32px,3.4vw,48px) clamp(22px,2.6vw,40px) 4px;
  border-left:1px solid var(--z-line-indigo);
}
.oaz-svc:first-child{border-left:0;padding-left:0}
.oaz-svc:last-child{padding-right:0}
.oaz-svc__ic{margin-bottom:8px}
.oaz-svc:hover .oaz-svc__ic{background:#fff;color:var(--z-indigo);border-color:#fff}
.oaz-svc__kicker{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--z-accent);
}
.oaz .oaz-svc h3{color:var(--z-indigo-title);font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em}
.oaz-svc h3 a{color:inherit;text-decoration:none;transition:color .25s}
.oaz-svc h3 a:hover{color:#fff}
.oaz-svc__lede{color:var(--z-on-indigo);font-size:1rem}

/* Stacked, not wrapped side by side: a wrapping row broke onto two lines in
   some columns and not others, so the links sat at different heights. */
.oaz-svc__actions{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}
.oaz .oaz-svcs .oaz-link{color:#fff}
.oaz-svc__wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.94rem;
  color:var(--z-on-indigo);
  text-decoration:none;
  transition:color .25s;
}
.oaz-svc__wa svg{color:var(--z-wa)}
.oaz-svc__wa:hover{color:#fff}

@media (max-width:900px){
  .oaz-svcs__grid{grid-template-columns:1fr;border-top:0}
  .oaz-svc,
  .oaz-svc:first-child,
  .oaz-svc:last-child{padding:34px 0 40px;border-left:0;border-top:1px solid var(--z-line-indigo)}
  .oaz-svc:last-child{padding-bottom:0}
}

/* Tick list — orange ticks on the indigo band, indigo ticks on light ground. */
.oaz-checks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.oaz-checks li{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  align-items:start;
  font-size:.98rem;
  line-height:1.5;
  color:#fff;
}
.oaz-checks svg{margin-top:3px;color:var(--z-accent)}
.oaz-checks--ink li{color:var(--z-ink)}
.oaz-checks--ink svg{color:var(--z-indigo)}

/* --------------------------------------------------------------------------
   WORKFLOW — the reference's four square photo cards, each tagged "Step N"
   in orange at its top-left corner, with a centred caption beneath.
   -------------------------------------------------------------------------- */
.oaz-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
.oaz-step{display:grid;gap:12px;justify-items:center;align-content:start;text-align:center}
.oaz-step__fig{position:relative;width:100%;margin:0 0 12px;aspect-ratio:1/1;overflow:hidden;background:var(--z-mist)}
.oaz .oaz-step__fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.oaz-step:hover .oaz-step__fig img{transform:scale(1.05)}
.oaz-step__tag{
  position:absolute;
  top:0;left:0;
  padding:11px 22px;
  background:var(--z-accent);
  color:#fff;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
}
.oaz .oaz-step h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.02em;line-height:1.2}
.oaz-step p{font-size:.98rem;max-width:30ch}

@media (max-width:1000px){
  .oaz-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
}
@media (max-width:520px){
  .oaz-steps{grid-template-columns:1fr}
  .oaz-step__fig{aspect-ratio:4/3}
}

/* --------------------------------------------------------------------------
   SPECS — two short lists under a split's lede: brand chips beside a tick
   list, ruled off from the paragraph above.
   -------------------------------------------------------------------------- */
.oaz-specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  width:100%;
  margin:4px 0 8px;
  padding-top:26px;
  border-top:1px solid #D9DCE6;
}
.oaz .oaz-specs h3{font-size:1.02rem;letter-spacing:-.015em;line-height:1.3;margin-bottom:16px}
.oaz-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.oaz-chips li{
  padding:8px 14px;
  background:#fff;
  border:1px solid #CFD4E2;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--z-ink);
}
.oaz-specs .oaz-checks{margin:0;gap:10px}

@media (max-width:560px){
  .oaz-specs{grid-template-columns:1fr}
}

/* ==========================================================================
   SERVICE DETAIL PAGES — first used by template-residential.php
   (2026-09-24). Built to be reused as office and commercial move over.
   ========================================================================== */

/* Hero reassurance lines, under the page hero's buttons. */
.oaz-ph__points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.oaz-ph__points li{display:flex;align-items:center;gap:11px;font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.86)}
.oaz-ph__points svg{flex:none;color:var(--z-accent)}

/* --------------------------------------------------------------------------
   PROBLEMS — the Heta "What we do" grid at six cells: indigo band (.oaz-wwd),
   outlined icon squares, hairlines BETWEEN cells only, never round the edge.
   The rules are drawn per cell from its position, so each breakpoint
   re-derives them for its own column count.
   -------------------------------------------------------------------------- */
.oaz .oaz-probs-band .oaz-head h2{color:#fff}
.oaz-probs-band .oaz-head__r p{color:var(--z-on-indigo)}

.oaz-probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.oaz-prob{
  display:grid;
  align-content:start;
  gap:14px;
  padding:clamp(28px,3vw,44px) clamp(22px,2.6vw,40px);
}
.oaz-prob:nth-child(3n+1){padding-left:0}
.oaz-prob:nth-child(3n){padding-right:0}
.oaz-prob:not(:nth-child(3n+1)){border-left:1px solid var(--z-line-indigo)}
.oaz-prob:nth-child(n+4){border-top:1px solid var(--z-line-indigo)}
.oaz-prob__ic{margin-bottom:10px}
.oaz-prob:hover .oaz-prob__ic{background:#fff;color:var(--z-indigo);border-color:#fff}
.oaz .oaz-prob h3{color:var(--z-indigo-title);font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.02em;line-height:1.2}
.oaz-prob p{color:var(--z-on-indigo);font-size:.98rem;max-width:38ch}

.oaz-probs__note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
  margin-top:clamp(20px,2.4vw,32px);
  padding-top:28px;
  border-top:1px solid var(--z-line-indigo);
  color:var(--z-on-indigo);
}
.oaz .oaz-probs__note .oaz-link{color:#fff}

@media (max-width:900px){
  .oaz-probs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oaz-prob:nth-child(n){padding:30px 22px;border-left:0;border-top:0}
  .oaz-prob:nth-child(2n+1){padding-left:0}
  .oaz-prob:nth-child(2n){padding-right:0;border-left:1px solid var(--z-line-indigo)}
  .oaz-prob:nth-child(n+3){border-top:1px solid var(--z-line-indigo)}
}
@media (max-width:600px){
  .oaz-probs{grid-template-columns:1fr}
  .oaz-prob:nth-child(n){padding:28px 0;border-left:0}
  .oaz-prob:nth-child(n+2){border-top:1px solid var(--z-line-indigo)}
}

/* A small print line under a split's copy, ruled off from what is above. */
.oaz-split__foot{
  width:100%;
  margin-top:6px;
  padding-top:20px;
  border-top:1px solid #D9DCE6;
  font-size:.94rem;
  color:var(--z-muted);
}

/* --------------------------------------------------------------------------
   BOOK — the WhatsApp quote form in a squared white card with the accent
   rule on top, beside "What happens next" as three photo steps. The form's
   behaviour hangs off data-oac-* attributes only (orient-quote.js).
   -------------------------------------------------------------------------- */
.oaz-book{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(36px,5.5vw,96px);
  align-items:start;
}
.oaz-book__head{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(26px,3vw,40px)}
.oaz-book__head p{font-size:1.06rem;max-width:50ch}

.oaz-form-card{background:#fff;padding:clamp(24px,3.2vw,44px);border-top:4px solid var(--z-accent)}
.oaz-form{display:grid;gap:18px}
.oaz-field{display:grid;gap:8px}
.oaz-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.oaz .oaz-field label{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--z-ink);
}
/* Two classes plus the element, to outrank Astra's input[type=…] rules. */
.oaz .oaz-field input,
.oaz .oaz-field select,
.oaz .oaz-field textarea{
  width:100%;
  min-height:52px;
  margin:0;
  padding:12px 16px;
  border:1px solid #CFD4E2;
  border-radius:0;
  background-color:#fff;
  color:var(--z-ink);
  font-family:Teachers,"Segoe UI",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.3;
  box-shadow:none;
  transition:border-color .2s,box-shadow .2s;
}
.oaz .oaz-field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307132E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
.oaz .oaz-field input::placeholder,
.oaz .oaz-field textarea::placeholder{color:#9AA4B6}
/* The contact page's free-text box. Only ever taller, never wider. */
.oaz .oaz-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.oaz-field__opt{margin-left:6px;font-weight:500;color:var(--z-muted)}
.oaz .oaz-field input:focus,
.oaz .oaz-field select:focus,
.oaz .oaz-field textarea:focus{
  outline:none;
  border-color:var(--z-indigo);
  box-shadow:0 0 0 3px rgba(46,53,136,.16);
}
.oaz .oaz-field [aria-invalid="true"]{border-color:#C62828}
.oaz-form__error{
  padding:12px 14px;
  border-left:3px solid #C62828;
  background:#FDECEC;
  color:#8E1C1C;
  font-size:.94rem;
}
.oaz-form__error[hidden]{display:none}
.oaz-btn--block{width:100%;margin-top:6px}

/* Three classes: `.oaz .oaz-page h2` (0,2,1) otherwise zeroes the margin. */
.oaz .oaz-book__next .oaz-book__next-h{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;margin-bottom:22px}
.oaz-next{list-style:none;margin:0;padding:0;display:grid}
.oaz-next__step{
  display:grid;
  grid-template-columns:clamp(96px,10vw,128px) minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding-block:20px;
  border-top:1px solid #D9DCE6;
}
.oaz-next__step:last-child{border-bottom:1px solid #D9DCE6}
.oaz-next__fig{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:#fff}
.oaz .oaz-next__fig img{width:100%;height:100%;object-fit:cover}
.oaz-step__tag.oaz-next__tag{padding:5px 9px;font-size:.78rem}
.oaz-next__body{display:grid;gap:6px}
.oaz .oaz-next__body h3{font-size:1.14rem;letter-spacing:-.02em;line-height:1.25}
.oaz-next__body p{font-size:.95rem}

.oaz-book__proof{display:flex;align-items:flex-start;gap:12px;margin-top:26px;font-size:.96rem}
.oaz-book__stars{flex:none;color:var(--z-accent);letter-spacing:2px}
.oaz-book__proof b{color:var(--z-ink);font-weight:600}
.oaz-book__hours{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.94rem;color:var(--z-muted)}
.oaz-book__hours svg{flex:none;color:var(--z-indigo)}

@media (max-width:960px){
  .oaz-book{grid-template-columns:1fr}
}
@media (max-width:520px){
  .oaz-field-row{grid-template-columns:1fr}
  .oaz-next__step{gap:16px}
}

/* --------------------------------------------------------------------------
   DUO — two ruled columns of copy on white (brands | coverage).
   -------------------------------------------------------------------------- */
.oaz-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.oaz-duo__col{
  display:grid;
  align-content:start;
  justify-items:start;
  gap:20px;
  padding-inline:clamp(24px,4vw,72px);
}
.oaz-duo__col:first-child{padding-left:0}
.oaz-duo__col:last-child{padding-right:0;border-left:1px solid var(--z-line)}
.oaz .oaz-duo h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.08}
.oaz-duo__lede{font-size:1.04rem;max-width:48ch}
.oaz-duo .oaz-chips{margin-top:4px}
.oaz-duo .oaz-chips li{background:var(--z-mist);border-color:#E1E4EC}
.oaz-duo__list{margin:2px 0 6px}
.oaz-duo__note{font-size:.94rem;color:var(--z-muted);max-width:52ch}
.oaz-duo__note b{color:var(--z-ink);font-weight:600}

@media (max-width:860px){
  .oaz-duo{grid-template-columns:1fr}
  .oaz-duo__col:nth-child(n){padding-inline:0;border-left:0}
  .oaz-duo__col:last-child{margin-top:44px;padding-top:44px;border-top:1px solid var(--z-line)}
}

/* --------------------------------------------------------------------------
   OTHER SERVICES — two photo cards, photo left and copy right on the mist
   ground, the arrow sliding on hover as on the home hero's inset card.
   -------------------------------------------------------------------------- */
.oaz-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.oaz-rel__card{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  min-height:270px;
  background:var(--z-mist);
  color:inherit;
  text-decoration:none;
}
.oaz-rel__fig{position:relative;display:block;overflow:hidden}
.oaz .oaz-rel__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.oaz-rel__card:hover .oaz-rel__fig img{transform:scale(1.06)}
.oaz-rel__body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.6vw,34px)}
.oaz-rel__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--z-indigo);
}
.oaz-rel__title{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.3rem,2vw,1.65rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--z-ink);
}
.oaz-rel__text{font-size:.98rem;color:var(--z-body)}
.oaz-rel__more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  align-self:stretch;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #D9DCE6;
  font-weight:600;
  color:var(--z-ink);
}
.oaz-rel__more svg{color:var(--z-accent);transition:transform .3s}
.oaz-rel__card:hover .oaz-rel__more svg{transform:translateX(5px)}

@media (max-width:1000px){
  .oaz-rel{grid-template-columns:1fr}
}
@media (max-width:560px){
  .oaz-rel__card{grid-template-columns:1fr}
  .oaz-rel__fig{aspect-ratio:16/10}
}

/* Three across, photo on top: the about page sets all three services side by
   side, where the service pages show two cards with the photo beside the copy. */
.oaz-rel--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.oaz-rel--three .oaz-rel__card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.oaz-rel--three .oaz-rel__fig{aspect-ratio:16/10}
@media (max-width:1000px){
  .oaz-rel--three{grid-template-columns:1fr}
  .oaz-rel--three .oaz-rel__card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none}
  .oaz-rel--three .oaz-rel__fig{aspect-ratio:auto}
}
@media (max-width:560px){
  .oaz-rel--three .oaz-rel__card{grid-template-columns:1fr}
  .oaz-rel--three .oaz-rel__fig{aspect-ratio:16/10}
}

/* ==========================================================================
   CONTACT PAGE — template-contact.php (2026-09-25, v3.4.0). Reuses the page
   hero, the booking form, the split and the FAQ; the pieces below are the
   only ones it adds.
   ========================================================================== */

/* A shorter page hero: on a contact page the channels band under it is the
   point, so the photo should not hold it below the fold. */
.oaz-ph--short{min-height:clamp(480px,68vh,660px)}

/* --------------------------------------------------------------------------
   CHANNELS — four link cards, two to a row: the icon square on the left, the
   channel, its number or address and one line on when to use it on the right,
   and the action ruled off along the foot. Two to a row rather than four
   because the email address is long, and at a quarter width it broke mid-word.
   WhatsApp takes the indigo of the "What we do" band as the one to pick.
   -------------------------------------------------------------------------- */
.oaz-chan{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.oaz-chan__item{display:flex}
.oaz-chan__card{
  flex:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  column-gap:clamp(18px,2.2vw,28px);
  row-gap:8px;
  padding:clamp(24px,2.8vw,38px);
  background:var(--z-mist);
  border-top:4px solid transparent;
  color:var(--z-body);
  text-decoration:none;
  transition:border-color .3s,transform .3s;
}
.oaz-chan__card:hover{border-top-color:var(--z-accent);transform:translateY(-3px);color:var(--z-body)}
.oaz-chan__card:focus-visible{outline:3px solid var(--z-blue);outline-offset:3px}

.oaz-chan__ic{
  grid-row:1 / -1;
  width:64px;height:64px;
  display:grid;place-items:center;
  border:1px solid rgba(7,19,46,.28);
  color:var(--z-ink);
  transition:background-color .3s,color .3s,border-color .3s;
}
.oaz-chan__card:hover .oaz-chan__ic{background:var(--z-ink);color:#fff;border-color:var(--z-ink)}
.oaz-chan__kicker{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--z-indigo);
}
.oaz-chan__value{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--z-ink);
  overflow-wrap:anywhere;
}
.oaz-chan__text{font-size:.98rem;max-width:44ch}
.oaz-chan__more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid #D9DCE6;
  font-weight:600;
  color:var(--z-ink);
}
.oaz-chan__more svg{color:var(--z-accent);transition:transform .3s}
.oaz-chan__card:hover .oaz-chan__more svg{transform:translate(3px,-3px)}

.oaz-chan__item--wa .oaz-chan__card{background:var(--z-indigo);color:var(--z-on-indigo)}
.oaz-chan__item--wa .oaz-chan__card:hover{color:var(--z-on-indigo)}
.oaz-chan__item--wa .oaz-chan__ic{border-color:rgba(255,255,255,.55);color:var(--z-wa)}
.oaz-chan__item--wa .oaz-chan__card:hover .oaz-chan__ic{background:#fff;border-color:#fff;color:#1FA855}
.oaz-chan__item--wa .oaz-chan__kicker{color:var(--z-accent)}
.oaz-chan__item--wa .oaz-chan__value,
.oaz-chan__item--wa .oaz-chan__more{color:#fff}
.oaz-chan__item--wa .oaz-chan__more{border-top-color:var(--z-line-indigo)}

.oaz-chan__note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
  margin-top:clamp(24px,2.8vw,36px);
  padding-top:24px;
  border-top:1px solid var(--z-line);
}

@media (max-width:860px){
  .oaz-chan{grid-template-columns:1fr}
}
@media (max-width:480px){
  .oaz-chan__card{grid-template-columns:1fr;grid-template-rows:none}
  .oaz-chan__ic{grid-row:auto;width:54px;height:54px;margin-bottom:10px}
}

/* --------------------------------------------------------------------------
   FACTS — label and value rows, hairline-ruled, on light ground (the closing
   CTA's contact rows, redrawn for white).
   -------------------------------------------------------------------------- */
.oaz-facts{width:100%;margin:6px 0 0;display:grid}
.oaz-facts__row{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:18px;
  padding-block:16px;
  border-top:1px solid #D9DCE6;
  align-items:baseline;
}
.oaz-facts__row:last-child{border-bottom:1px solid #D9DCE6}
.oaz-facts dt{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.9rem;
  font-weight:600;
  color:var(--z-ink);
}
.oaz-facts dt svg{flex:none;color:var(--z-indigo)}
.oaz-facts dd{margin:0;font-size:1rem;color:var(--z-body)}
/* The rows already close on a hairline; a small-print line straight after
   them would otherwise draw a second one. */
.oaz-facts + .oaz-split__foot{margin-top:0;padding-top:0;border-top:0}

@media (max-width:480px){
  .oaz-facts__row{grid-template-columns:1fr;gap:4px}
}

/* The map, in the collage's lattice frame where the other pages put photos.
   The fallback is stacked in the same grid cell, underneath the frame. */
.oaz-map{display:grid}
.oaz-map > *{grid-area:1 / 1}
.oaz-map__fallback{
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  padding:24px;
  background:var(--z-mist);
  color:var(--z-ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  text-align:center;
  text-decoration:none;
}
.oaz-map__fallback svg{color:var(--z-indigo)}
.oaz .oaz-map__frame{
  position:relative;
  display:block;
  width:100%;
  height:clamp(340px,40vw,520px);
  border:0;
}

/* ==========================================================================
   BLOG — home.php / archive.php / search.php and single.php (2026-09-25,
   v3.5.0). Modelled on heta.peerduck.com: "Blog without Sidebar" for the
   archive, set three to a row, and its single post with the sidebar on the
   left (Calendar and Archives left out). Reuses the page hero, the eyebrow,
   .oaz-link and the closing CTA; everything below is new.

   Margins on headings and paragraphs are written with three classes or a
   type selector: `.oaz .oaz-page h2` and `.oaz .oaz-page p` are (0,2,1) and
   zero them otherwise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANNER — the page hero centred and run short, as on the reference, where
   one plain photo banner carries the title and breadcrumbs across the blog.
   -------------------------------------------------------------------------- */
.oaz-ph--banner{min-height:clamp(400px,54vh,520px)}
.oaz-ph--banner .oaz-ph__bg::after{
  background:linear-gradient(180deg,rgba(7,19,46,.86) 0%,rgba(7,19,46,.74) 55%,rgba(7,19,46,.86) 100%);
}
.oaz-ph--banner .oaz-ph__inner{
  grid-template-rows:none;
  align-content:center;
  padding-block:calc(var(--z-header-h) + 30px) clamp(48px,6vw,84px);
}
.oaz-ph__banner{
  display:grid;
  justify-items:center;
  gap:20px;
  max-width:54rem;
  margin-inline:auto;
  text-align:center;
}
.oaz .oaz-ph__banner h1{color:#fff;font-size:clamp(2.3rem,5vw,4rem);line-height:1.04}
/* A post title is a sentence, not a word or two: set it smaller. */
.oaz .oaz-ph--post .oaz-ph__banner h1{font-size:clamp(1.9rem,3.9vw,3.2rem);line-height:1.1}
.oaz-ph__banner .oaz-ph__lede{max-width:60ch}
.oaz-ph__banner .oac-crumbs{margin-top:4px}
.oaz-ph__banner .oac-crumbs ol{justify-content:center}

/* --------------------------------------------------------------------------
   META ROW — author, date, comments. Indigo caps behind orange line icons,
   ruled off underneath, as on the reference.
   -------------------------------------------------------------------------- */
.oaz-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:0;
  padding:0 0 15px;
  list-style:none;
  border-bottom:1px solid var(--z-line-strong);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.72rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--z-indigo);
}
.oaz-meta li{display:inline-flex;align-items:center;gap:7px}
.oaz-meta svg{flex:none;color:var(--z-accent)}
.oaz-meta a{color:inherit;text-decoration:none}
.oaz-meta a:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   ARCHIVE — the cards, three to a row
   -------------------------------------------------------------------------- */
.oaz-blog{padding-block:clamp(52px,6.5vw,104px)}
.oaz-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.4vw,32px);
}
.oaz-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:var(--z-r);
  background:var(--z-mist);
}
.oaz-card__fig{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--z-line)}
.oaz .oaz-card__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.oaz-card:hover .oaz-card__fig img{transform:scale(1.045)}

.oaz-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(22px,2.2vw,30px);
}
.oaz h2.oaz-card__title{
  margin-top:18px;
  font-size:clamp(1.16rem,1.45vw,1.34rem);
  line-height:1.24;
  letter-spacing:-.02em;
}
/* An underline that draws in on hover, so the title reads as the link. */
.oaz-card__title a{
  color:inherit;
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1.5px;
  transition:background-size .35s ease,color .25s;
}
.oaz-card:hover .oaz-card__title a{background-size:100% 1.5px;color:var(--z-blue)}
.oaz p.oaz-card__excerpt{margin-top:12px;font-size:.98rem;line-height:1.65}
/* margin-top:auto pins the link to the foot, so a row of cards lines up
   along the bottom whatever the length of each title and excerpt. */
.oaz-card__more{margin-top:auto;padding-top:22px;align-self:flex-start}
.oaz-card__more svg{color:var(--z-accent)}

@media (max-width:1024px){
  .oaz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .oaz-cards{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   PAGINATION — "Newer posts · 1 2 3 · Older posts"
   -------------------------------------------------------------------------- */
.oaz-pager{margin-top:clamp(44px,5vw,68px)}
.oaz-pager ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.oaz-pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:46px;
  height:46px;
  padding:0 14px;
  border:1px solid var(--z-line-strong);
  border-radius:var(--z-r-sm);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.92rem;
  font-weight:600;
  color:var(--z-ink);
  text-decoration:none;
  transition:border-color .2s,color .2s,background-color .2s;
}
.oaz-pager a.page-numbers:hover{border-color:var(--z-accent);color:var(--z-ink);background:rgba(239,162,63,.1)}
.oaz-pager .page-numbers.current{background:var(--z-indigo);border-color:var(--z-indigo);color:#fff}
.oaz-pager .page-numbers.placeholder{display:none}
.oaz-pager .page-numbers.dots{border-color:transparent;min-width:0;padding:0 4px}
.oaz-pager .prev,
.oaz-pager .next{padding:0 18px;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.oaz-pager .prev svg,
.oaz-pager .next svg{color:var(--z-accent)}
@media (max-width:560px){
  .oaz-pager__long{display:none}
}

/* --------------------------------------------------------------------------
   EMPTY STATE — a search with no matches, an empty category
   -------------------------------------------------------------------------- */
.oaz-empty{
  display:grid;
  justify-items:center;
  gap:18px;
  max-width:38rem;
  margin-inline:auto;
  padding:clamp(40px,6vw,72px) clamp(22px,4vw,52px);
  border-radius:var(--z-r);
  background:var(--z-mist);
  text-align:center;
}
.oaz-empty .oaz-search{width:100%;max-width:28rem;margin-top:6px}

/* --------------------------------------------------------------------------
   SEARCH FORM and category dropdown. Squared, like every other field on the
   site (.oaz-field).
   -------------------------------------------------------------------------- */
.oaz-search{display:flex;gap:8px}
.oaz .oaz-search__field,
.oaz .oaz-select{
  width:100%;
  min-width:0;
  height:48px;
  margin:0;
  padding:0 14px;
  border:1px solid var(--z-line-strong);
  border-radius:0;
  background-color:#fff;
  box-shadow:none;
  font-family:Teachers,"Segoe UI",system-ui,sans-serif;
  font-size:.98rem;
  color:var(--z-ink);
  transition:border-color .2s,box-shadow .2s;
}
.oaz .oaz-search__field{flex:1}
.oaz .oaz-search__field::placeholder{color:#9AA4B6}
.oaz .oaz-select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307132E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
.oaz .oaz-search__field:focus,
.oaz .oaz-select:focus{
  outline:none;
  border-color:var(--z-indigo);
  box-shadow:0 0 0 3px rgba(46,53,136,.16);
}
/* Ink on the orange rather than the reference's white, which fails contrast.
   Astra paints button:hover and :focus in its own colour, so both states are
   claimed here. */
.oaz .oaz-search__btn{
  flex:none;
  height:48px;
  margin:0;
  padding:0 22px;
  border:0;
  border-radius:0;
  background:var(--z-accent);
  color:var(--z-ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.9rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s,color .2s;
}
.oaz .oaz-search__btn:hover,
.oaz .oaz-search__btn:focus{background:var(--z-ink);color:#fff}
.oaz .oaz-search__btn:focus-visible{outline:2px solid var(--z-indigo);outline-offset:2px}
.oaz-catform{display:flex;gap:8px}

/* --------------------------------------------------------------------------
   SINGLE POST — sidebar left, article right. The article is first in the
   source (see single.php); grid areas put the sidebar back on the left, and
   below 1025px it drops under the article.
   -------------------------------------------------------------------------- */
.oaz-sec--post{padding-block:clamp(52px,6.5vw,104px)}
.oaz-post{
  display:grid;
  grid-template-columns:clamp(270px,27%,340px) minmax(0,1fr);
  grid-template-areas:"side main";
  gap:clamp(32px,4.2vw,64px);
  align-items:start;
}
.oaz .oaz-post__main{grid-area:main;min-width:0;margin:0}
.oaz-post__side{grid-area:side;min-width:0}

@media (max-width:1024px){
  .oaz-post{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side"}
}

.oaz .oaz-post__fig{margin:0 0 28px;overflow:hidden;border-radius:var(--z-r)}
.oaz .oaz-post__fig img{width:100%}
.oaz-post__main > .oaz-meta{margin-bottom:30px;padding-bottom:18px;font-size:.78rem}

/* The post text. Written with three classes so it outranks the (0,2,1)
   zero-margin rules on .oaz-page headings and paragraphs. */
.oaz .oaz-page .oaz-prose{font-size:1.06rem;line-height:1.8;color:var(--z-body)}
.oaz .oaz-page .oaz-prose > * + *{margin-top:1.2em}
.oaz .oaz-page .oaz-prose h2{margin-top:1.9em;font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.18}
.oaz .oaz-page .oaz-prose h3{margin-top:1.7em;font-size:clamp(1.22rem,1.8vw,1.42rem);line-height:1.25;letter-spacing:-.02em}
.oaz .oaz-page .oaz-prose h4{margin-top:1.6em;font-size:1.1rem;line-height:1.3;letter-spacing:-.015em}
.oaz .oaz-page .oaz-prose h2 + *,
.oaz .oaz-page .oaz-prose h3 + *,
.oaz .oaz-page .oaz-prose h4 + *{margin-top:.7em}
.oaz .oaz-page .oaz-prose > :first-child{margin-top:0}
.oaz .oaz-page .oaz-prose a{color:var(--z-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.oaz .oaz-page .oaz-prose a:hover{color:var(--z-blue-deep);text-decoration-thickness:2px}
.oaz .oaz-page .oaz-prose strong{color:var(--z-ink);font-weight:600}
.oaz .oaz-page .oaz-prose ul,
.oaz .oaz-page .oaz-prose ol{margin-left:0;padding-left:1.35em}
.oaz .oaz-page .oaz-prose li + li{margin-top:.45em}
.oaz .oaz-page .oaz-prose li::marker{color:var(--z-accent)}
.oaz .oaz-page .oaz-prose blockquote{
  margin-inline:0;
  padding:.3em 0 .3em 1.4em;
  border-left:3px solid var(--z-accent);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:1.16rem;
  line-height:1.55;
  letter-spacing:-.01em;
  color:var(--z-ink);
}
.oaz .oaz-page .oaz-prose blockquote cite{display:block;margin-top:.6em;font-size:.86rem;font-style:normal;color:var(--z-muted)}
.oaz .oaz-page .oaz-prose figure{margin-inline:0}
.oaz .oaz-page .oaz-prose img{border-radius:var(--z-r)}
.oaz .oaz-page .oaz-prose figcaption{margin-top:.7em;font-size:.88rem;line-height:1.5;color:var(--z-muted);text-align:center}
.oaz .oaz-page .oaz-prose hr{height:0;margin-block:2.2em;border:0;border-top:1px solid var(--z-line-strong)}
.oaz .oaz-page .oaz-prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.oaz .oaz-page .oaz-prose th,
.oaz .oaz-page .oaz-prose td{padding:.7em .8em;border-bottom:1px solid var(--z-line-strong);text-align:left;vertical-align:top}
.oaz .oaz-page .oaz-prose th{color:var(--z-ink);font-weight:600}
.oaz .oaz-page .oaz-prose code{padding:.15em .4em;border-radius:4px;background:var(--z-mist);font-size:.9em}
.oaz .oaz-page .oaz-prose pre{overflow:auto;padding:1.1em 1.3em;border-radius:var(--z-r);background:var(--z-dark);color:var(--z-on-dark);font-size:.9rem;line-height:1.6}
.oaz .oaz-page .oaz-prose pre code{padding:0;background:none}
.oaz .oaz-page .oaz-prose .alignleft{float:left;max-width:50%;margin:.3em 1.6em 1em 0}
.oaz .oaz-page .oaz-prose .alignright{float:right;max-width:50%;margin:.3em 0 1em 1.6em}
.oaz .oaz-page .oaz-prose .aligncenter{margin-inline:auto}
.oaz .oaz-page .oaz-prose::after{content:"";display:table;clear:both}
@media (max-width:560px){
  .oaz .oaz-page .oaz-prose .alignleft,
  .oaz .oaz-page .oaz-prose .alignright{float:none;max-width:100%;margin-inline:0}
}
.oaz-post__pages{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:600;color:var(--z-ink)}

/* Tags under the post, ruled off from the text as on the reference. */
.oaz-post__tags{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid var(--z-line-strong);
}
.oaz-post__tags > svg{flex:none;color:var(--z-accent)}
.oaz-post__tags ul,
.oaz-tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.oaz-post__tags a,
.oaz-tagcloud a{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--z-line-strong);
  font-size:.9rem;
  line-height:1.3;
  color:var(--z-ink);
  text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s;
}
.oaz-post__tags a:hover,
.oaz-tagcloud a:hover{background:var(--z-ink);border-color:var(--z-ink);color:#fff}

/* Previous / next. It takes its own rule only when no tag row sits above it. */
.oaz-postnav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:30px;
}
.oaz-prose + .oaz-postnav{margin-top:44px;padding-top:26px;border-top:1px solid var(--z-line-strong)}
.oaz-postnav__link{
  display:grid;
  gap:8px;
  align-content:start;
  padding:18px 22px;
  border:1px solid var(--z-line);
  border-radius:var(--z-r);
  color:var(--z-ink);
  text-decoration:none;
  transition:border-color .2s,transform .25s;
}
.oaz-postnav__link:hover{border-color:var(--z-accent);transform:translateY(-2px);color:var(--z-ink)}
.oaz-postnav__link--next{grid-column:2;justify-items:end;text-align:right}
.oaz-postnav__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--z-indigo);
}
.oaz-postnav__label svg{color:var(--z-accent)}
.oaz-postnav__title{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
}
@media (max-width:560px){
  .oaz-postnav{grid-template-columns:minmax(0,1fr)}
  .oaz-postnav__link--next{grid-column:auto}
}

/* Comments. The markup is Astra's comments.php and WordPress's comment_form(),
   so it is styled by their class names, in a bordered box as on the
   reference's "Leave a Reply". Astra styles the button as `input#submit`,
   so the button rules carry the id to outrank it. */
.oaz-post__comments{margin-top:40px}
.oaz .oaz-post__comments .comment-respond{margin:0;padding:clamp(24px,3vw,38px);border:1px solid var(--z-line)}
.oaz .oaz-page .oaz-post__comments h2,
.oaz .oaz-page .oaz-post__comments h3{margin-bottom:12px;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.2}
.oaz .oaz-post__comments .comment-list,
.oaz .oaz-post__comments .children{margin:0 0 32px;padding:0;list-style:none}
.oaz .oaz-post__comments .children{margin:18px 0 0 clamp(16px,3vw,40px)}
.oaz .oaz-post__comments .comment-list > li + li{margin-top:18px}
.oaz .oaz-post__comments a{color:var(--z-blue)}
.oaz .oaz-page .oaz-post__comments p + p{margin-top:.8em}
.oaz .oaz-page .oaz-post__comments .comment-form p{margin-top:14px}
.oaz .oaz-post__comments label{display:block;margin-bottom:6px;font-weight:600;color:var(--z-ink)}
.oaz .oaz-post__comments input[type="text"],
.oaz .oaz-post__comments input[type="email"],
.oaz .oaz-post__comments input[type="url"],
.oaz .oaz-post__comments textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--z-line-strong);
  border-radius:0;
  background:#fff;
  box-shadow:none;
  font:inherit;
  color:var(--z-ink);
}
.oaz .oaz-post__comments input:focus,
.oaz .oaz-post__comments textarea:focus{outline:none;border-color:var(--z-indigo);box-shadow:0 0 0 3px rgba(46,53,136,.16)}
.oaz .oaz-post__comments .comment-form-cookies-consent{display:flex;gap:10px;align-items:flex-start}
.oaz .oaz-post__comments .comment-form-cookies-consent label{margin:0;font-weight:400}
.oaz .oaz-post__comments #submit,
.oaz .oaz-post__comments input[type="submit"]{
  padding:15px 28px;
  border:0;
  border-radius:0;
  background:var(--z-accent);
  color:var(--z-ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-weight:700;
  cursor:pointer;
}
.oaz .oaz-post__comments #submit:hover,
.oaz .oaz-post__comments #submit:focus,
.oaz .oaz-post__comments input[type="submit"]:hover,
.oaz .oaz-post__comments input[type="submit"]:focus{background:var(--z-ink);color:#fff}

/* --------------------------------------------------------------------------
   SIDEBAR — the reference's tinted widget column
   -------------------------------------------------------------------------- */
.oaz-post__side{
  display:grid;
  gap:clamp(36px,3.6vw,48px);
  padding:clamp(26px,2.6vw,36px);
  border-radius:var(--z-r);
  background:var(--z-mist);
}
.oaz .oaz-page .oaz-widget__h{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--z-indigo);
}
.oaz-widget__h::after{content:"";width:28px;height:1.5px;flex:none;background:var(--z-accent)}

.oaz-recent{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.oaz-recent__link{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:14px;
  align-items:start;
  color:var(--z-ink);
  text-decoration:none;
}
.oaz-recent__fig{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--z-line)}
.oaz .oaz-recent__fig img{width:100%;height:100%;object-fit:cover}
.oaz-recent__title{font-size:.97rem;font-weight:500;line-height:1.45;transition:color .2s}
.oaz-recent__link:hover .oaz-recent__title{color:var(--z-blue)}

@media (prefers-reduced-motion:reduce){
  .oaz .oaz-card__fig img,
  .oaz-card__title a,
  .oaz-postnav__link{transition:none}
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll. orient-ui.js adds .oac-reveal / .is-in; when motion is
   reduced or IntersectionObserver is missing it adds nothing, so everything
   below stays visible and nothing is hidden by the markup alone.
   -------------------------------------------------------------------------- */
.oaz .oac-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.oaz .oac-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .oaz .oaz-wwd__fig img,
  .oaz .oaz-hx__card-fig img,
  .oaz .oaz-work__link img,
  .oaz .oaz-step__fig img,
  .oaz .oaz-rel__fig img{transition:none}
  .oaz .oaz-hx__bg img{animation:none !important}
  .oaz .oaz-hx__play::before{animation:none;opacity:0}
}

/* ==========================================================================
   ABOUT PAGE — template-about.php (2026-10-15, v3.6.0). Reuses the short page
   hero, the stats band, the indigo ruled grid, the service cards
   (.oaz-rel--three, above) and the split; the only addition is the four-figure
   stats band.
   ========================================================================== */

/* Four figures wrap 2 x 2 in the right column, so they run smaller than the
   two-figure band's and the rows get air between them. */
.oaz-stats--four .oaz-stats__nums{row-gap:clamp(30px,3.6vw,48px)}
.oaz-stats--four .oaz-stat__n{font-size:clamp(3rem,5.4vw,4.75rem)}

/* ==========================================================================
   LOCAL LANDING PAGE — template-nugegoda.php (2026-10-19, v3.7.0). Reuses the
   page hero, the booking form card, the indigo ruled grid, the stats band,
   the duo columns, the steps, the split and the contact map. The additions
   are the form in the hero, an icon tile for the duo columns and the area
   chips.
   ========================================================================== */

/* HERO WITH FORM — the page hero's right-hand column becomes the booking
   card. The card covers the part of the photo that used to be the picture, so
   the scrim darkens evenly instead of fading out to the right. */
.oaz-ph--lead .oaz-ph__bg::after{
  background:
    linear-gradient(90deg,rgba(7,19,46,.92) 0%,rgba(7,19,46,.8) 48%,rgba(7,19,46,.55) 100%),
    linear-gradient(180deg,rgba(7,19,46,.45) 0%,rgba(7,19,46,0) 28%);
}
.oaz-ph__grid.oaz-lead{
  grid-template-columns:minmax(0,1fr) minmax(0,440px);
  align-items:center;
  gap:clamp(32px,5vw,80px);
}
.oaz .oaz-lead .oaz-ph__copy h1{font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.04}
.oaz-lead__proof{display:flex;align-items:center;gap:12px;font-size:.96rem;color:rgba(255,255,255,.8)}
.oaz-lead__proof b{color:#fff;font-weight:600}

/* The card sits on the navy hero, which sets white text: everything inside it
   is put back on the ink and body colours explicitly. */
.oaz-lead__card{
  color:var(--z-body);
  box-shadow:0 28px 60px -28px rgba(0,0,0,.55);
  padding:clamp(24px,2.6vw,36px);
}
.oaz-lead__head{display:grid;gap:8px;margin-bottom:22px}
/* Three classes: `.oaz .oaz-page h2` (0,2,1) otherwise sets the d2 size. */
.oaz .oaz-lead__card .oaz-lead__title{font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.15;letter-spacing:-.024em;color:var(--z-ink)}
.oaz-lead__head p{font-size:.95rem;line-height:1.55;color:var(--z-body)}
.oaz-lead__card .oaz-form{gap:16px}

@media (max-width:1100px) and (min-width:901px){
  .oaz-ph__grid.oaz-lead{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:36px}
}
@media (max-width:900px){
  .oaz-ph__grid.oaz-lead{grid-template-columns:1fr;gap:36px}
  .oaz-lead__card{max-width:560px;width:100%}
}

/* DUO, SERVICE VARIANT — repair | maintenance, each with an outlined icon
   tile and an orange kicker, ending in its own WhatsApp link. */
.oaz-duo__ic{
  width:64px;height:64px;
  display:grid;place-items:center;
  border:1px solid var(--z-line-strong);
  color:var(--z-indigo);
  margin-bottom:6px;
  transition:background-color .3s,border-color .3s,color .3s;
}
.oaz-duo__col:hover .oaz-duo__ic{background:var(--z-indigo);border-color:var(--z-indigo);color:#fff}
.oaz-duo__kick{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--z-accent);
}
.oaz .oaz-duo .oaz-duo__title{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.025em}
.oaz-duo--svc .oaz-duo__list{margin:4px 0 10px}

/* AREA CHIPS — the suburb names, on the mist ground. */
.oaz-chips.oaz-areas{margin-top:2px}
.oaz-areas__more{font-size:.96rem;color:var(--z-muted)}

/* ==========================================================================
   LOCATIONS HUB — template-locations.php (2026-10-20, v3.8.0). Reuses the
   short page hero, the service cards (.oaz-rel), the stats band, the split
   with the map, the indigo ruled grid and the FAQ. The additions are the
   location card details, the indigo "not listed" card and the grouped area
   list.
   ========================================================================== */

/* LOCATION CARDS — the service cards, with two figures above the link row. */
.oaz-locs__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:.92rem;
  color:var(--z-muted);
}
.oaz-locs__meta b{
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-weight:700;
  color:var(--z-ink);
}

/* The closing "not listed" card: no photo, indigo ground, so it reads as an
   invitation rather than another area. */
.oaz-rel__card.oaz-locs__ask{grid-template-columns:1fr;background:var(--z-indigo)}
.oaz-locs__ask .oaz-rel__body{justify-content:flex-start}
.oaz-locs__ic{
  width:64px;height:64px;
  display:grid;place-items:center;
  border:1px solid var(--z-line-indigo);
  color:#fff;
  margin-bottom:4px;
  transition:background-color .3s,border-color .3s,color .3s;
}
.oaz-locs__ask:hover .oaz-locs__ic{background:#fff;border-color:#fff;color:var(--z-indigo)}
.oaz-locs__ask .oaz-rel__kicker{color:var(--z-accent)}
.oaz-locs__ask .oaz-rel__title{color:#fff}
.oaz-locs__ask .oaz-rel__text{color:var(--z-on-indigo)}
.oaz-locs__ask .oaz-rel__more{color:#fff;border-top-color:var(--z-line-indigo)}

/* GROUPED AREA LIST — one block per group, its name over its chips. In a
   group with its own page every chip is a link to it. */
.oaz-zones{display:grid;gap:26px;width:100%}
.oaz-zone{display:grid;gap:12px}
.oaz .oaz-zone .oaz-zone__title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 16px;
  margin:0;
  font-size:1.05rem;
  line-height:1.3;
  letter-spacing:-.015em;
}
.oaz-zone__page{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.86rem;
  font-weight:600;
  color:var(--z-blue);
  text-decoration:none;
}
.oaz-zone__page svg{transition:transform .25s}
.oaz-zone__page:hover svg{transform:translateX(4px)}
.oaz-areas--links li{padding:0}
.oaz-areas--links a{
  display:block;
  padding:8px 14px;
  color:inherit;
  text-decoration:none;
  transition:background-color .2s,color .2s;
}
.oaz-areas--links li:hover{border-color:var(--z-indigo)}
.oaz-areas--links a:hover{background:var(--z-indigo);color:#fff}