@charset "utf-8";
/* ═══ GoodWay home · section 6 · THE 7°C LINE ═════════════════════════════
   When to change tires in Calgary. Winter tires grip better at 7°C and
   under; Calgary's year, drawn as a line through its monthly averages, goes
   under 7°C in early October and back over it at the end of April.
   The copy beside the shop's photo of a winter set follows the date: the
   fall, winter, spring and summer each have their own words and buttons.
   Under them, the line: shaded ice under 7°C and warm over it, 7°C across,
   the two changeovers where the line crosses it, today on it, and the
   months with their averages.
   Once, when the line comes into view, it draws itself in from the left
   (the kit's reveal adds .is-in); without the script, or for a visitor who
   asks for less motion, it is simply there. .tq-dark flips every role
   inside the section. Drawn by Services/HomeChangeover.vb.
   Mobile first: the phone, then 480, 768 (the changeovers named over the
   line, the photo beside the copy), 1024, 1280.
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s6 {
  --gw-s6-ice: var(--tq-info);                /* #03C3F7 in the dark set     */
  --gw-s6-ice-rgb: var(--tq-info-rgb);
  --gw-s6-warm: var(--tq-accent-text);        /* the brand's glow, #FF8F57   */
  --gw-s6-warm-rgb: var(--tq-accent-text-rgb);
  --gw-s6-ground: var(--tq-graphite-900);     /* what the labels sit on      */
  --gw-s6-lane: 0px;                          /* the names over the line     */
  --gw-s6-plot: 150px;                        /* the line's height           */
  position: relative;
  isolation: isolate;
  padding-block: var(--tq-section);
  background:
    radial-gradient(55% 42% at 6% 0%, rgb(var(--gw-s6-ice-rgb) / .10), transparent 72%),
    radial-gradient(46% 36% at 100% 100%, rgb(var(--gw-s6-ice-rgb) / .05), transparent 72%),
    linear-gradient(180deg, var(--tq-ink-100) 0%, var(--tq-graphite-900) 46%);
  color: var(--tq-text-body);
}

/* ── the copy and the photo ───────────────────────────────────────────── */
.gw-s6__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tq-sp-10); align-items: center; }
.gw-s6__copy { display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; }

.gw-s6__eyebrow { margin: 0 0 var(--tq-sp-6); color: var(--gw-s6-ice); }
.gw-s6__eyebrow .gw-s6__flake { flex: none; inline-size: 18px; block-size: 18px; margin-block: -4px; }
.gw-s6__title { max-inline-size: 16ch; }
.gw-s6__lead {
  margin: var(--tq-sp-6) 0 0;
  max-inline-size: 50ch;
  font-size: var(--tq-fs-lg);
  line-height: var(--tq-lh-lead);
  color: var(--tq-text-muted);
  text-wrap: pretty;
}
.gw-s6__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-9); }
.gw-s6__btn.tq-btn--primary .tq-btn__count { background: rgb(var(--tq-black-rgb) / .3); }   /* the number darker on the orange, to read */
.gw-s6__price {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-3);
  margin: var(--tq-sp-6) 0 0;
  font-size: var(--tq-fs-sm);
  line-height: 1.45;
  color: var(--tq-text-muted);
}
.gw-s6__price .tq-i { flex: none; inline-size: 18px; block-size: 18px; color: var(--tq-text-subtle); }
.gw-s6__price b { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }

/* the photo fills its frame, whatever its own shape; the badge sits on a darker foot */
.gw-s6__photo { position: relative; margin: 0; min-inline-size: 0; }
.gw-s6__frame {
  aspect-ratio: 4 / 3;
  box-shadow: 0 34px 64px -34px rgb(var(--tq-black-rgb) / .85), 0 0 0 1px rgb(var(--tq-white-rgb) / .06);
}
.gw-s6__frame > picture { position: absolute; inset: 0; display: block; }
.gw-s6__frame > img, .gw-s6__frame > picture > img { position: absolute; inset: 0; object-position: 50% 42%; }
.gw-s6__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgb(var(--tq-black-rgb) / .42));
}
.gw-s6__badge {
  position: absolute;
  inset-inline-start: var(--tq-sp-5);
  inset-block-end: var(--tq-sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-3);
  max-inline-size: calc(100% - 2 * var(--tq-sp-5));
  margin: 0;
  padding: 7px var(--tq-sp-6) 7px var(--tq-sp-4);
  border: 1px solid rgb(var(--gw-s6-ice-rgb) / .38);
  border-radius: var(--tq-r-full);
  background: rgb(6 8 11 / .74);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 12px 26px -14px rgb(var(--tq-black-rgb) / .9);
  font-size: var(--tq-fs-sm);
  line-height: 1.2;
  color: var(--tq-text-body);
}
.gw-s6__badge .gw-s6__flake { flex: none; inline-size: 20px; block-size: 20px; color: var(--gw-s6-ice); }
.gw-s6__badge b {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-bold);
  letter-spacing: .02em;
  color: var(--tq-text-strong);
}

/* ── the line ─────────────────────────────────────────────────────────── */
.gw-s6__line {
  margin: var(--tq-sp-11) 0 0;
  padding: var(--tq-sp-7) var(--tq-sp-5) var(--tq-sp-6);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background:
    radial-gradient(80% 60% at 50% 100%, rgb(var(--gw-s6-ice-rgb) / .045), transparent 70%),
    linear-gradient(180deg, rgb(var(--tq-white-rgb) / .035), rgb(var(--tq-white-rgb) / .012));
  box-shadow: inset 0 1px 0 rgb(var(--tq-white-rgb) / .05), 0 30px 60px -40px rgb(var(--tq-black-rgb) / .9);
}

/* the caption: what the line is, today, and the two colours */
.gw-s6__cap { display: flex; flex-direction: column; gap: var(--tq-sp-4); margin-block-end: var(--tq-sp-8); }
.gw-s6__cap-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tq-sp-2) var(--tq-sp-5); }
.gw-s6__cap-title {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tq-text-strong);
}
.gw-s6__cap-text { font-size: var(--tq-fs-sm); line-height: 1.45; color: var(--tq-text-muted); }
.gw-s6__cap-now { display: flex; align-items: flex-start; gap: var(--tq-sp-4); font-size: var(--tq-fs-sm); line-height: 1.45; color: var(--tq-text-body); }
.gw-s6__cap-now::before {                    /* today's dot, as the line draws it */
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: .3em;
  border-radius: 50%;
  background: var(--tq-ink-950);
  box-shadow: 0 0 0 2px var(--gw-s6-ground), 0 0 0 3px rgb(var(--tq-white-rgb) / .45);
}
.gw-s6__legend { display: flex; flex-wrap: wrap; gap: var(--tq-sp-3) var(--tq-sp-7); font-size: var(--tq-fs-xs); line-height: 1.3; color: var(--tq-text-muted); }
.gw-s6__key { display: inline-flex; align-items: center; gap: var(--tq-sp-3); }
.gw-s6__key::before { content: ""; flex: none; inline-size: 22px; block-size: 10px; border-radius: 3px; }
.gw-s6__key--cold::before { background: linear-gradient(0deg, var(--gw-s6-ice) 0 2px, rgb(var(--gw-s6-ice-rgb) / .3) 2px); }
.gw-s6__key--warm::before { background: linear-gradient(180deg, var(--gw-s6-warm) 0 2px, rgb(var(--gw-s6-warm-rgb) / .26) 2px); }

/* the drawing: every mark placed in shares of it (--x across, --y down) */
.gw-s6__chart { position: relative; }
.gw-s6__marks { position: relative; block-size: var(--gw-s6-lane); }
.gw-s6__mark {
  position: absolute;
  inset-block-start: 0;
  left: var(--x);
  z-index: 1;
  display: none;
  align-items: center;
  gap: var(--tq-sp-2);
  padding: 5px var(--tq-sp-5);
  border: 1px solid;
  border-radius: var(--tq-r-full);
  background: var(--gw-s6-ground);
  font-size: var(--tq-fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tq-text-body);
  transform: translateX(-50%);
}
.gw-s6__mark b { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.gw-s6__mark--on { border-color: rgb(var(--gw-s6-ice-rgb) / .55); }
.gw-s6__mark--off { border-color: rgb(var(--gw-s6-warm-rgb) / .55); }

.gw-s6__plot { position: relative; block-size: var(--gw-s6-plot); }
.gw-s6__ink { position: absolute; inset: 0; }
.gw-s6__svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: hidden; }
.gw-s6__curve {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gw-s6__curve--cold { stroke: var(--gw-s6-ice); }
.gw-s6__curve--warm { stroke: var(--gw-s6-warm); }
.gw-s6__ice-a { stop-color: var(--gw-s6-ice); stop-opacity: .05; }
.gw-s6__ice-b { stop-color: var(--gw-s6-ice); stop-opacity: .34; }
.gw-s6__sun-a { stop-color: var(--gw-s6-warm); stop-opacity: .04; }
.gw-s6__sun-b { stop-color: var(--gw-s6-warm); stop-opacity: .3; }

/* each month's average on the curve (a phone keeps the curve alone: the months row has the numbers) */
.gw-s6__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: none;
  inline-size: 9px;
  block-size: 9px;
  margin: -4.5px 0 0 -4.5px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--gw-s6-ground);
}
.gw-s6__dot.is-cold { color: var(--gw-s6-ice); }
.gw-s6__dot.is-warm { color: var(--gw-s6-warm); }

/* 7°C across, named at its start */
.gw-s6__seven {
  position: absolute;
  inset-inline: 0;
  top: var(--y);
  block-size: 0;
  border-block-start: 1px dashed rgb(var(--tq-white-rgb) / .42);
  pointer-events: none;
}
.gw-s6__seven > span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 8px;
  border: 1px solid rgb(var(--tq-white-rgb) / .22);
  border-radius: var(--tq-r-full);
  background: var(--gw-s6-ground);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-2xs);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--tq-text-strong);
  transform: translateY(-50%);
}

/* a changeover: a diamond where the line crosses 7°C, a dashed line up to its name */
.gw-s6__pin {
  position: absolute;
  left: var(--x);
  top: calc(-1 * var(--gw-s6-lane));
  block-size: calc(var(--y) + var(--gw-s6-lane));
  inline-size: 0;
  border-inline-start: 1px dashed transparent;
  pointer-events: none;
}
.gw-s6__pin::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  inline-size: 11px;
  block-size: 11px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: var(--gw-s6-ground);
  box-shadow: 0 0 0 2px var(--gw-s6-ground);
  transform: rotate(45deg);
}
.gw-s6__pin--on { color: var(--gw-s6-ice); }
.gw-s6__pin--off { color: var(--gw-s6-warm); }

/* today: a white dot on the curve, a line down to its name */
.gw-s6__now {
  position: absolute;
  left: var(--x);
  top: var(--y);
  bottom: -5px;
  inline-size: 0;
  border-inline-start: 1px solid rgb(var(--tq-white-rgb) / .5);
  pointer-events: none;
}
.gw-s6__now::before, .gw-s6__now::after {
  content: "";
  position: absolute;
  left: -8.5px;                              /* centred on the 1px line */
  top: -8px;
  inline-size: 16px;
  block-size: 16px;
  box-sizing: border-box;
  border-radius: 50%;
}
.gw-s6__now::after {
  border: 4px solid var(--gw-s6-ground);
  background: var(--tq-ink-950);
  box-shadow: 0 0 0 1px rgb(var(--tq-white-rgb) / .55), 0 0 22px 3px rgb(var(--tq-white-rgb) / .28);
}
.gw-s6__now::before { border: 2px solid rgb(var(--tq-white-rgb) / .75); opacity: 0; }

.gw-s6__nowlane { position: relative; block-size: 28px; }
.gw-s6__nowtag {
  position: absolute;
  left: var(--x);
  top: 5px;
  padding: 3px 8px;
  border-radius: var(--tq-r-full);
  background: var(--tq-ink-950);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xs);
  font-weight: var(--tq-fw-bold);
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tq-ink-050);
  transform: translateX(-50%);
}
.gw-s6__nowtag.is-start { transform: translateX(-10px); }
.gw-s6__nowtag.is-end { transform: translateX(calc(-100% + 10px)); }

/* the months, each under its part of the line */
.gw-s6__months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0;
  padding: var(--tq-sp-3) 0 0;
  border-block-start: 1px solid var(--tq-line);
  list-style: none;
}
.gw-s6__mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  padding-block: var(--tq-sp-3);
  border-radius: var(--tq-r-xs);
  text-align: center;
}
.gw-s6__mn {
  font-size: var(--tq-fs-3xs);
  font-weight: var(--tq-fw-semibold);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}
.gw-s6__mon b {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gw-s6__mon.is-cold b { color: var(--gw-s6-ice); }
.gw-s6__mon.is-warm b { color: var(--gw-s6-warm); }
.gw-s6__mon.is-now { background: rgb(var(--tq-white-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(var(--tq-white-rgb) / .12); }
.gw-s6__mon.is-now .gw-s6__mn { color: var(--tq-text-strong); }

/* the changeovers as words (a narrow screen; a wide one names them over the line) */
.gw-s6__when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tq-sp-3) var(--tq-sp-8);
  margin: var(--tq-sp-7) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--tq-fs-sm);
  line-height: 1.4;
  color: var(--tq-text-body);
}
.gw-s6__when li { display: inline-flex; align-items: center; gap: var(--tq-sp-3); }
.gw-s6__when li::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  margin-inline: 1px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}
.gw-s6__when-on::before { color: var(--gw-s6-ice); }
.gw-s6__when-off::before { color: var(--gw-s6-warm); }
.gw-s6__when b { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }

.gw-s6__source {
  margin: var(--tq-sp-6) 0 0;
  padding-block-start: var(--tq-sp-5);
  border-block-start: 1px solid var(--tq-line-soft);
  font-size: var(--tq-fs-2xs);
  line-height: 1.5;
  color: var(--tq-text-subtle);
  text-wrap: pretty;
}

/* ── drawn in once, when it comes into view ───────────────────────────────
   The kit's reveal brings the panel up and adds .is-in; then the ink wipes
   in from the left, today's dot lands and rings three times. Held back at
   once (no transition out), drawn in only on .is-in. Without the script
   nothing here is hidden (.tq-js is the script's own mark).               */
@media (prefers-reduced-motion: no-preference) {
  .tq-js .gw-s6__line[data-tq-reveal]:not(.is-in) .gw-s6__ink { clip-path: inset(-12px 100% -12px -12px); }
  .tq-js .gw-s6__line[data-tq-reveal].is-in .gw-s6__ink {
    clip-path: inset(-12px -12px -12px -12px);
    transition: clip-path 1.8s var(--tq-ease-in-out) .3s;
  }
  .tq-js .gw-s6__line[data-tq-reveal]:not(.is-in) .gw-s6__now { opacity: 0; }
  .tq-js .gw-s6__line[data-tq-reveal].is-in .gw-s6__now { transition: opacity .5s var(--tq-ease-out) 1.9s; }
  .tq-js .gw-s6__line[data-tq-reveal].is-in .gw-s6__now::before { animation: gw-s6-ring 2.4s var(--tq-ease-out) 2.4s 3; }
}
@keyframes gw-s6-ring {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.8); }
}

/* ── the phone ────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .gw-s6__actions > .tq-btn { flex: 1 1 100%; }
}
@media (max-width: 389px) {
  .gw-s6__mn-x { display: none; }             /* J F M A ...: three letters need 390 */
}

/* ── 480 ──────────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .gw-s6 { --gw-s6-plot: 172px; }
  .gw-s6__dot { display: block; }
}

/* ── 768: the copy and the photo side by side, the changeovers named over the line ── */
@media (min-width: 768px) {
  .gw-s6 { --gw-s6-lane: 46px; --gw-s6-plot: 196px; }
  .gw-s6__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tq-sp-10); }
  .gw-s6--nophoto .gw-s6__grid { grid-template-columns: minmax(0, 1fr); }
  .gw-s6__line { padding: var(--tq-sp-9) var(--tq-sp-9) var(--tq-sp-8); }
  .gw-s6__cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main legend" "now legend";
    align-items: start;
    gap: var(--tq-sp-4) var(--tq-sp-9);
  }
  .gw-s6__cap-main { grid-area: main; }
  .gw-s6__cap-now { grid-area: now; }
  .gw-s6__legend { grid-area: legend; flex-direction: column; align-self: center; }
  .gw-s6__mark { display: inline-flex; }
  .gw-s6__pin--on { border-inline-start-color: rgb(var(--gw-s6-ice-rgb) / .6); }
  .gw-s6__pin--off { border-inline-start-color: rgb(var(--gw-s6-warm-rgb) / .6); }
  .gw-s6__when { display: none; }
  .gw-s6__mn { font-size: var(--tq-fs-2xs); }
  .gw-s6__mon b { font-size: var(--tq-fs-sm); }
}

/* ── 1024: the copy wider than the photo, the photo in its own shape ──── */
@media (min-width: 1024px) {
  .gw-s6 { --gw-s6-plot: 224px; }
  .gw-s6__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--tq-sp-12); }
  .gw-s6__frame { aspect-ratio: 960 / 889; }
  .gw-s6__line { margin-block-start: var(--tq-sp-12); padding: var(--tq-sp-10) var(--tq-sp-11) var(--tq-sp-9); }
}

/* ── 1280 ─────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .gw-s6 { --gw-s6-plot: 248px; }
}

/* printed before it was ever seen: the line whole */
@media print {
  .tq-js .gw-s6__line[data-tq-reveal] { opacity: 1; transform: none; transition: none; }
  .tq-js .gw-s6__line[data-tq-reveal]:not(.is-in) .gw-s6__ink, .tq-js .gw-s6__line[data-tq-reveal] .gw-s6__ink { clip-path: none; transition: none; }
  .tq-js .gw-s6__line[data-tq-reveal]:not(.is-in) .gw-s6__now, .tq-js .gw-s6__line[data-tq-reveal] .gw-s6__now { opacity: 1; transition: none; }
}
@media (forced-colors: active) {
  .gw-s6__line, .gw-s6__mark, .gw-s6__badge, .gw-s6__seven > span { border-color: CanvasText; }
  .gw-s6__curve { stroke: CanvasText; }
  .gw-s6__fill { display: none; }
  .gw-s6__seven { border-color: CanvasText; }
  .gw-s6__dot, .gw-s6__pin::after { border-color: CanvasText; }
  .gw-s6__now { border-color: Highlight; }
  .gw-s6__now::after { border-color: Canvas; background: Highlight; }
}