/* ════════════════════════════════════════════════════════════
   WHERE WE ACTUALLY ARE · /technology, under S.01
   2026-08-14. Ethan: "pull our Google Maps thing into the site to
   show we are based in Toronto. Find us on Google."

   It is the closing argument of "Built in Toronto. Never outsourced."
   rather than a section of its own, which is why it carries no
   S-number and sits tight under that band. Everything else on this
   page is the firm describing itself; this is the one thing a reader
   can check against a third party without taking our word for it.

   THE ADDRESS IS SOURCED, NOT REMEMBERED. 1050 King Street West,
   Toronto, Ontario M6K 0C7 — the address in this site's own footer
   (partials/footer.html), in contact.html, in the privacy policy's
   records section, and in the PostalAddress of the Organization
   JSON-LD on / and /firm. Four places in this repo, all agreeing.

   IT IS AN ADDRESS ON A MAP, NOT A BUSINESS LISTING. No Google
   Business Profile for the firm could be verified, so the markup
   neither links to one nor implies one exists. A map centred on a
   real address proves the location on its own; minting a place id to
   make it look like a claimed listing would be exactly the sort of
   thing the rest of this page spends its length not doing.

   CSP: frame-src carried only YouTube, so this would have failed
   silently and left an empty black band. www.google.com and
   maps.google.com are allowed in vercel.json.
   ════════════════════════════════════════════════════════════ */

#tech-here {
  position: relative; isolation: isolate;
  /* Centred, not top-aligned. Top-aligned parked the label and the
     first line of the address directly under the sticky header at
     the scroll position where this band comes to rest. */
  display: flex; align-items: center; width: 100%;
  /* T-1120: WAS clamp(320px, 32vw, 420px). This band's own content is one
     mono label, two lines of address and a link — about 130px of copy. The
     rest of the height was the map, and a third-party iframe is the one
     element on this page that can legitimately paint nothing (blocked
     cookies, a consent interstitial, an offline demo machine). Measured in
     a real headless Chromium the embed painted NOTHING at all three widths,
     which left a 420px black void with a caption in the corner — the single
     largest dead area on the page. 300px is enough band for the map to read
     as a map and small enough that a blank one is a beat, not a hole. */
  min-height: clamp(260px, 24vw, 300px);
  background: #0a0a0a;
  --on-black: #f5f1e8;
}

/* Edge to edge. The map IS the band; it is not a card sitting in one. */
#tech-here .thr__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; z-index: 0;
  /* Toned toward the page rather than left as a stock widget. Enough
     desaturation to sit with a near-monochrome site, not so much that
     the street names and the pin stop reading. */
  filter: grayscale(.58) contrast(1.05) brightness(.84) saturate(.85);
}

/* Copy on ink, map clear on the right — the same side-weighted scrim
   the photo bands above and below use, so this reads as one more band
   in the run rather than an embed dropped into the page. */
#tech-here .thr__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(10,10,10,.94) 0%, rgba(10,10,10,.88) 26%,
      rgba(10,10,10,.52) 46%, rgba(10,10,10,.10) 66%, transparent 80%),
    /* A flat veil across the whole band. Google's palette runs pink and
       mint at this zoom and the directional scrim only reaches the left
       half, so without this the right half stayed a stock widget. */
    linear-gradient(rgba(10,10,10,.20), rgba(10,10,10,.20));
}

#tech-here .thr__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1140px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.2rem) 1.5rem;
  pointer-events: none;                /* the map keeps the drag and zoom */
}
#tech-here .thr__inner a { pointer-events: auto; }

#tech-here .thr__label {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,.56); margin: 0 0 .8rem;
}
#tech-here .thr__addr {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3;
  color: var(--on-black); margin: 0; max-width: 22rem;
}
#tech-here .thr__go {
  display: inline-block; margin-top: 1.2rem;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,241,232,.78); text-decoration: none;
  border-bottom: 1px solid rgba(245,241,232,.28);
  padding-bottom: .2rem;
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  #tech-here .thr__go:hover { color: #f5f1e8; border-bottom-color: var(--red); }
}
#tech-here .thr__go:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Narrow: there is no "beside the map" to fade into, so the scrim turns
   vertical and the copy takes the bottom — the same move the photo
   bands make at this width. */
@media (max-width: 720px) {
  /* T-1120: was 380px with the copy pinned to the bottom, which put ~210px
     of empty map above three lines of type — the worst dead space on the
     page at 390. 300px, still bottom-anchored. */
  #tech-here { min-height: 300px; align-items: flex-end; }
  #tech-here .thr__scrim {
    background:
      linear-gradient(to top,
        rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 34%,
        rgba(10,10,10,.20) 62%, transparent 84%),
      linear-gradient(rgba(10,10,10,.18), rgba(10,10,10,.18));
  }
}