/* ==========================================================================
   Deploy-time fixes. Loaded last, so it wins over the per-page styles.
   Keep this file small — anything here is a patch, not a design decision.
   ========================================================================== */

/* The nav overflowed the viewport by a few pixels on a narrow phone, which
   gave every page a horizontal scrollbar. Shrink the wordmark and the button
   just below 430px so the row fits. */
@media (max-width:430px){
  .nav-in{gap:10px;padding:11px 5vw}
  .brand svg{height:19px}
  .nav-flag{margin-left:8px;padding-left:8px}
  .nav-flag svg{width:15px;height:15px}
  .nav-cta{padding:9px 12px;font-size:12px!important}
}

/* Belt and braces: nothing should ever cause sideways scroll. */
html,body{overflow-x:clip}

/* The width/height attributes added at build time (to reserve space and stop
   layout shift) also act as a used height, which beats the design's
   `aspect-ratio` rules and made every image render at full natural height with
   object-fit:cover chopping the sides off. height:auto hands sizing back to the
   CSS while keeping the attributes doing their anti-shift job. */
img[width][height]{height:auto}

/* The site had no author :focus styles at all, so keyboard focus fell back to
   the browser default — a near-black ring on a near-black page. Chrome draws a
   two-tone ring that survives that; Firefox and Safari do not reliably. Make it
   explicit, on-brand, and visible on every surface. */
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:2px}
/* An ember ring on an ember button is invisible — flip to the light text colour. */
.btn:focus-visible,.nav-cta:focus-visible,.cta:focus-visible{
  outline:3px solid #FFF6F0;outline-offset:3px}
/* Form fields already show an ember glow on focus; keep the ring off them so the
   two treatments do not fight. */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none}

/* Skip link: hidden until focused, then the first thing a keyboard user sees. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  font-family:Karla,sans-serif;font-size:0.9375rem;font-weight:600;
  background:var(--ember-d,#BA522A);color:#FFF6F0;padding:12px 18px;
  border-radius:0 0 6px 0;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}

/* The spec grid dropped 3 columns -> 2 at 900px and then stayed at 2 all the
   way down. On a 390px phone that leaves each cell about 10 characters wide and
   every heading breaks mid-word ("ARTEC SPIDER / II"). One column below 560px,
   which is where the image rows already switch. */
@media(max-width:560px){.spec-grid{grid-template-columns:1fr}}

/* A video poster is absolutely positioned and must fill its .vwrap. The rule
   above (img[width][height]{height:auto}) outranks the poster's own
   height:100%, which collapsed the equipment hero to a strip. Put it back. */
img.vposter[width][height]{height:100%}

/* ---------- mobile navigation ----------------------------------------
   Below 900px every page sets .nav-links a:not(.nav-cta){display:none} and
   nothing took their place, so a phone could reach the home page and the
   contact page and nothing else.

   A checkbox and a label rather than <details>: Chrome lays a closed <details>
   out through an internal ::details-content box that display:contents does not
   remove, which stacked the desktop links into a column below the bar.
   .nav-panel is a plain div, so display:contents behaves and the desktop bar
   is byte-for-byte what it was. No JavaScript is needed to open or close it. */
.nav-burger{display:none}
.nav-panel{display:contents}

@media (max-width:900px){
  .nav-in{position:relative;flex-wrap:nowrap}
  .nav-burger{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-6px 0 -6px auto;cursor:pointer;
    border-radius:3px;-webkit-tap-highlight-color:transparent}
  .nav-burger .bars{display:block;width:22px}
  .nav-burger .bars i{display:block;height:2px;border-radius:2px;
    background:var(--t-1);margin:4px 0;transition:transform .18s ease,opacity .18s ease}
  .nav-burger:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
  .nav-toggle:checked ~ .nav-burger{background:var(--rule)}
  /* bars fold into an x, so it is obvious the same control closes it */
  .nav-toggle:checked ~ .nav-burger .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger .bars i:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .nav-panel{display:none}
  /* The panel hangs off the sticky bar, full width, so every link is a
     comfortable thumb target. */
  .nav-toggle:checked ~ .nav-panel{display:block;position:absolute;
    left:0;right:0;top:100%;background:var(--ink-2);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 34px rgba(0,0,0,.42);padding:6px 0;z-index:50}
  /* Beats .nav-links a:not(.nav-cta){display:none} on specificity, not order. */
  .nav-in .nav-links .nav-panel a{display:block;padding:14px 6vw;
    font-size:var(--f-body);color:var(--t-2)}
  .nav-in .nav-links .nav-panel a + a{border-top:1px solid var(--rule)}
  .nav-in .nav-links .nav-panel a.here{color:var(--ember)}
  .nav-links{gap:12px}
}

/* The phone number and email in the hero and contact lines were 18px tall on a
   phone — the hardest thing on the page to hit, on a site whose promise is that
   someone answers the phone. Pad them into a real target without changing how
   the line reads. */
@media (max-width:900px){
  .contact a{display:inline-block;padding:9px 0}
  .hero-txt .contact a{padding:11px 0}
}

/* ---------- narrow nav bar -------------------------------------------
   Live check at 375px: the row needed 387px, so "Book a Consult" was
   clipped by the viewport edge — hidden from every overflow check because
   html{overflow-x:clip} swallows it rather than producing a scrollbar.
   Adding the hamburger is what tipped it over. Drop the maple leaf (the
   footer carries Canadian-owned anyway), tighten the button, and shrink
   the wordmark on the smallest phones. */
@media (max-width:430px){
  .nav-flag{display:none}
  .nav-in{gap:8px}
  .nav-cta{padding:10px 12px}
}
@media (max-width:380px){
  .brand svg{height:19px}
  .nav-cta{padding:10px 10px;font-size:0.875rem}
}

/* Phone tap targets on links that are the only route to the thing they
   name: the Artec product names in the spec grid and under each photo. */
@media (max-width:900px){
  .spec-cell dt a{display:inline-block;padding:6px 0}
  .imgrow figcaption a{display:inline-block;padding:7px 0}
  .fld input[type=checkbox]{width:24px;height:24px}
  /* the separator between the phone number and the email dangles at the end
     of a line once each sits on its own row */
  .contact .dot{display:none}
  .contact a{display:block}
}
@media (max-width:340px){
  .brand svg{height:16px}
  .nav-in{gap:6px;padding-left:14px;padding-right:14px}
}