/* =============================================================
   ZenithNord — mobile optimisation layer
   Added 2026-08-25.

   Loaded LAST in <head> on every page, so it wins the cascade
   against the per-page inline <style> blocks at equal specificity.

   Everything here is inside a max-width query. Desktop is untouched.

   Four problems this fixes on phones:
     1. the hero sun sat on top of the headline
     2. figure captions sat on top of the artwork
     3. diagram labels rendered at 4–7px because a 780-unit canvas
        was being squeezed into ~330 CSS px
     4. hero effects painted more area (and more layers) than a
        phone GPU wants to carry while scrolling
   ============================================================= */


/* ---------- applies at every size ---------- */

/* stop iOS inflating body text in landscape */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* terms, privacy-policy and cookie-policy never picked up the base
   image rules the rest of the site has, so their footer logo drew at
   its natural 458px and pushed those three pages 83px sideways on a
   phone. height:auto is needed alongside it — every image here
   carries width/height attributes for layout stability, and
   constraining the width without releasing the height would squash
   them instead. Class rules elsewhere still win on both. */
img{max-width:100%;height:auto;}
.foot-logo{height:52px;width:auto;max-width:100%;}

/* hover transforms stick after a tap on touch devices — only run them
   where a real pointer exists */
@media(hover:none){
  .service-card:hover,.contact-block:hover,.grp-card:hover,.gal button:hover,
  .why-item:hover,.step:hover .dot,.srow:hover .num,.lc-badges img:hover,
  .start-btn:hover,.btn-submit:hover{transform:none;}
  .service-card:hover::after{left:-60%;}
}


/* =============================================================
   PHONE / SMALL TABLET  —  760px and below
   ============================================================= */
@media(max-width:760px){

  /* ---------------------------------------------------------
     1. HERO
     ---------------------------------------------------------
     The cinematic hero's phone layout now lives with the day cycle
     in an-cycle, because the two have to be reasoned about together
     — the horizon, the sun's arc and the copy all depend on the same
     hero height. This file only keeps what the cycle does not own.  */

  .chero h1{max-width:none;letter-spacing:-.6px;}

  /* the plain .hero used by the service pages */
  .hero{padding:3.6rem 1.1rem 2.6rem;}


  /* ---------------------------------------------------------
     2. SECTION GUTTERS — hand the width back to the artwork
     --------------------------------------------------------- */
  section{padding-left:1rem;padding-right:1rem;}
  .dg{padding:1.15rem 1rem 1rem;}
  .calc{padding:1.25rem 1.1rem;}
  .auto{padding:1.25rem 1.1rem;}


  /* ---------------------------------------------------------
     3. FIGURES — caption below the art, not across it
     ---------------------------------------------------------
     .psplit-art is a flex row with a 4/3 box and an absolutely
     positioned caption. On a 780x430 drawing that produced 33px
     of dead letterbox top and bottom AND put the caption band
     over the bottom 23–42px of the diagram.                     */

  .psplit-art{display:block;background:rgba(255,197,51,.05);}

  /* intrinsic ratio from the viewBox — no letterbox, no overlap */
  .psplit-art svg{aspect-ratio:auto;height:auto;}

  /* a 1.8:1 technical drawing needs every pixel of width it can get,
     so the figure breaks out of the section gutter. Body copy keeps
     its gutter — only the artwork goes edge to edge.

     Cancelling the section padding by -1rem rather than reaching for
     100vw matters: vw includes the scrollbar, so a 100vw figure
     overhangs by the scrollbar width on any browser that reserves
     one, and that is exactly how you end up with a page that scrolls
     sideways by 8px and nobody can find why. */
  .psplit-art,.lc-art,.split-art{
    margin-left:-1rem;margin-right:-1rem;width:auto;max-width:none;
    border-radius:0;border-left:0;border-right:0;}

  .psplit-art figcaption{
    position:static;background:none;padding:.55rem .9rem .85rem;
    font-size:.68rem;letter-spacing:.11em;color:#FFC533;}

  /* photographs keep the overlaid caption — it reads fine on a
     photo — but the gradient starts lower so it covers less */
  .psplit-img img{aspect-ratio:4/3;}
  .psplit-img figcaption{padding:2.2rem .9rem .7rem;font-size:.68rem;}
  .gal figcaption{padding:2rem .7rem .6rem;}


  /* ---------------------------------------------------------
     4. DIAGRAM LEGIBILITY
     ---------------------------------------------------------
     Nothing here changes a single drawing. The labels were
     authored in user units against canvases 440–780 wide; once
     that canvas is squeezed into ~360 CSS px a 10-unit label
     lands at 4.6px. Each authored size is remapped so it comes
     out around 10–13 CSS px on a phone, and the type hierarchy
     the drawings were designed with is preserved exactly.

     These canvases are sparse — 3 to 13 labels each — so there
     is room for the labels to grow into.                        */

  /* --- town pages: house / inverter / battery / grid, 760x470.
         Three short labels in open space, so this one can take a
         generous lift with nothing to collide with. --- */
  svg[viewBox="0 0 760 470"] text[font-size="13"]{font-size:26px;}
  svg[viewBox="0 0 760 470"] text[font-size="15"]{font-size:22px;} /* INV sits inside a 78-unit box */

  /* --- homepage: roof layout, shading and string design at
         780x430, plus the live flow diagram at 780x330.
         The lift is held to ~1.7x because these drawings lead
         their two-line labels at 16 user units — push the type
         past that and the second line climbs into the first. --- */
  svg[viewBox^="0 0 780"] text[font-size="9"]{font-size:15px;}
  svg[viewBox^="0 0 780"] text[font-size="10"]{font-size:16px;}
  svg[viewBox^="0 0 780"] text[font-size="11"]{font-size:17px;}
  svg[viewBox^="0 0 780"] text[font-size="12"]{font-size:18px;}
  svg[viewBox^="0 0 780"] text[font-size="13"]{font-size:19px;}

  /* Two of the labels on the generation-split chart are full
     sentences, not tags. The longer one already fills 745 of the
     canvas's 780 units at its authored size, so it is pinned there —
     even a single point of lift pushes it off the right edge. */
  svg[viewBox^="0 0 780"] text[fill-opacity=".8"],
  svg[viewBox^="0 0 780"] text[fill-opacity=".55"]{font-size:11px;}

  /* Same chart: the row labels are right-aligned into a 128-unit
     gutter and the export figure sits just past the end of its bar.
     Both clip if pushed the full amount, so they get a light lift. */
  svg[viewBox="0 0 780 430"] text[x="128"][font-size="11"]{font-size:13px;}
  svg[viewBox="0 0 780 430"] text[x="128"][font-size="10"]{font-size:12px;letter-spacing:0;}
  svg[viewBox="0 0 780 430"] text[x="573"]{font-size:13px;}

  /* and give the second line of each label pair a little more air
     now that the first line is bigger */
  svg[viewBox="0 0 780 430"] text[fill-opacity=".65"]{transform:translateY(4px);}

  /* --- solar & battery guide, 440x300. This canvas already renders
         near 0.9 scale once it goes full width, so it needs far less.
         The 10-unit size is used for the two labels that sit inside
         drawn boxes on the G98/G99 timeline — "WAIT - up to 45
         working days" fills 176 of its box's 176 units at 10.5, so
         that one is at its ceiling and must not be pushed further. */
  svg[viewBox="0 0 440 300"] text[font-size="9.5"]{font-size:11px;}
  svg[viewBox="0 0 440 300"] text[font-size="10"]{font-size:10.5px;}
  svg[viewBox="0 0 440 300"] text[font-size="10.5"]{font-size:12px;}
  svg[viewBox="0 0 440 300"] text[font-size="11"]{font-size:13px;}
  svg[viewBox="0 0 440 300"] text[font-size="12"]{font-size:13.5px;}

  /* Line work was disappearing for the same reason: a 1.5-unit
     stroke on the town canvas renders at 0.77 device px, i.e. a
     grey smear. non-scaling-stroke draws it at its authored
     weight regardless of how far the canvas has been scaled. */
  .lc-art svg *,
  .psplit-art svg *,
  .split-art svg *,
  .dg-art svg *{vector-effect:non-scaling-stroke;}

  /* the town artwork was also knocked back to 62% opacity, which
     is a desktop decision — at phone scale it just looked faded */
  .lc-art{opacity:.9;margin-top:1.4rem;margin-bottom:-.8rem;}


  /* ---------------------------------------------------------
     5. PAINT + LAYER COST
     --------------------------------------------------------- */

  /* promoting every card to its own layer costs real memory on a
     phone and buys nothing once the hover effects are gone */
  .service-card,.why-item,.step{will-change:auto;}

  /* a blurred backdrop behind a full-width form is one of the most
     expensive things a mobile browser can be asked to composite */
  .contact-form{backdrop-filter:none;-webkit-backdrop-filter:none;}

  /* trim the heaviest drop shadows */
  .service-card{box-shadow:inset 0 4px 0 0 #FFC533,0 6px 18px rgba(255,197,51,.10);}
  .contact-block,.calc,.auto,.dg{box-shadow:0 6px 20px rgba(0,0,0,.18);}

  /* the hero effect stack is the one thing painting behind live
     text while the page scrolls — give it its own paint boundary */
  .chero-fx{contain:layout paint;}
  .chero-skyline{will-change:auto;}


  /* ---------------------------------------------------------
     6. TAP TARGETS
     --------------------------------------------------------- */
  a.area-pill,span.area-pill{padding:.5rem 1rem;font-size:.82rem;}
  .inline-links a{padding:.7rem 1.25rem;}
  .seg button{padding:.65rem 1.15rem;}
  .zsw button{padding:.7rem 1.25rem;}
  details summary{padding:.35rem 0;}
  .foot-links-v a{padding:.25rem 0;display:inline-block;}
  .start-btn{padding:.95rem 1.9rem;}
  .start-btn.secondary{padding:calc(.95rem - 2px) calc(1.9rem - 2px);}

  /* never let anything push the page sideways. The full-bleed
     figures above cancel the gutter exactly, so they cannot — but
     the tables and the wide flow diagram still need holding in. */
  body{overflow-x:hidden;}
  .tbl-scroll,.dg-art{max-width:100%;}
}


/* =============================================================
   NARROW PHONES  —  440px and below
   ============================================================= */
@media(max-width:440px){

  /* one column of CTAs reads better than two ragged ones */
  .hero-cta .start-btn,.cta-actions .start-btn{flex:1 1 100%;justify-content:center;}

  /* a touch more lift again on the tightest screens, still inside
     what the authored leading and canvas width will carry */
  svg[viewBox="0 0 760 470"] text[font-size="13"]{font-size:28px;}
  svg[viewBox="0 0 760 470"] text[font-size="15"]{font-size:24px;}
  svg[viewBox^="0 0 780"] text[font-size="9"]{font-size:16px;}
  svg[viewBox^="0 0 780"] text[font-size="10"]{font-size:17px;}
  svg[viewBox^="0 0 780"] text[font-size="11"]{font-size:18px;}
  svg[viewBox^="0 0 780"] text[font-size="12"]{font-size:19px;}
  svg[viewBox^="0 0 780"] text[font-size="13"]{font-size:20px;}
  svg[viewBox^="0 0 780"] text[fill-opacity=".8"],
  svg[viewBox^="0 0 780"] text[fill-opacity=".55"]{font-size:11px;}

  .statband{gap:1.4rem;}
  .statband div{flex:1 1 100%;}
}


/* =============================================================
   Reduced motion — restated here so this file can never
   re-enable something the page had already turned off.
   ============================================================= */
@media(prefers-reduced-motion:reduce){
  .chero-fx{contain:none;}
}


/* =============================================================
   WHITE CARDS  —  added 2026-08-27, applies at every size

   The service cards and contact blocks were a translucent yellow
   tint over the dark page. Yellow at 17% alpha on graphite is a
   muddy olive, which is what made the gold look washed out. On a
   near-white card the same gold is at full strength.

   Gold cannot be used for TEXT here: #FFC533 on #F5F3EF is
   1.43:1. It stays a graphic accent — the top bar and the rule —
   and any gold text darkens to #8A5E10, which is 5.14:1.
   ============================================================= */

.service-card,
.contact-block{
  background:#F5F3EF !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:inset 0 4px 0 0 #ECB53E, 0 10px 30px rgba(0,0,0,.30) !important;
}
.service-card h3,.contact-block h4{color:#16181C !important;}
.service-card p,.contact-block p{color:#4A4640 !important;}
.service-card .service-icon{filter:saturate(1.15);}

/* gold text would be 1.4:1 here, so it goes dark enough to read */
.service-more,
.contact-block a{color:#8A5E10 !important;}
.service-more:hover,.contact-block a:hover{color:#5E3F06 !important;}

.service-card:hover,
.contact-block:hover{
  border-color:rgba(0,0,0,.2) !important;
  box-shadow:inset 0 4px 0 0 #FFC533, 0 16px 40px rgba(0,0,0,.38) !important;
}

/* the town pages sweep a white shimmer across the card on hover —
   invisible on a white card, so it becomes a soft dark one */
.service-card::after{
  background:linear-gradient(100deg,transparent,rgba(0,0,0,.05),transparent) !important;
}
