.elementor-kit-6{--e-global-color-primary:#F6F5F0;--e-global-color-secondary:#9AA3B2;--e-global-color-text:#F6F5F0;--e-global-color-accent:#C8F53B;--e-global-color-qcink00:#0A0E17;--e-global-color-qcink80:#161D2C;--e-global-color-qcink70:#212A3B;--e-global-color-qcink50:#4A5568;--e-global-color-qcink10:#E6E8EC;--e-global-color-qcvlt90:#3F5500;--e-global-color-qcvlt70:#6E9400;--e-global-color-qccoral:#FF6B57;--e-global-typography-primary-font-family:"Readex Pro";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Readex Pro";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Readex Pro";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Readex Pro";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:-0.005em;--e-global-typography-qchero0-font-family:"Readex Pro";--e-global-typography-qchero0-font-size:112px;--e-global-typography-qchero0-font-weight:700;--e-global-typography-qchero0-line-height:1em;--e-global-typography-qchero0-letter-spacing:-0.04em;--e-global-typography-qcdisp0-font-family:"Readex Pro";--e-global-typography-qcdisp0-font-size:72px;--e-global-typography-qcdisp0-font-weight:700;--e-global-typography-qcdisp0-line-height:1.04em;--e-global-typography-qcdisp0-letter-spacing:-0.035em;--e-global-typography-qchead0-font-family:"Readex Pro";--e-global-typography-qchead0-font-size:40px;--e-global-typography-qchead0-font-weight:600;--e-global-typography-qchead0-line-height:1.1em;--e-global-typography-qchead0-letter-spacing:-0.025em;--e-global-typography-qcsub00-font-family:"Readex Pro";--e-global-typography-qcsub00-font-size:24px;--e-global-typography-qcsub00-font-weight:600;--e-global-typography-qcsub00-line-height:1.3em;--e-global-typography-qcsub00-letter-spacing:-0.01em;--e-global-typography-qclead0-font-family:"Readex Pro";--e-global-typography-qclead0-font-size:20px;--e-global-typography-qclead0-font-weight:400;--e-global-typography-qclead0-line-height:1.55em;--e-global-typography-qclead0-letter-spacing:0em;--e-global-typography-qclabel-font-family:"JetBrains Mono";--e-global-typography-qclabel-font-size:13px;--e-global-typography-qclabel-font-weight:500;--e-global-typography-qclabel-line-height:1.4em;--e-global-typography-qclabel-letter-spacing:0.02em;--e-global-typography-qccode0-font-family:"JetBrains Mono";--e-global-typography-qccode0-font-size:15px;--e-global-typography-qccode0-font-weight:400;--e-global-typography-qccode0-line-height:1.7em;--e-global-typography-qccode0-letter-spacing:0em;background-color:#0A0E17;color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:17px;font-weight:400;line-height:1.6em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#C8F53B;font-family:"Readex Pro", Sans-serif;font-size:16px;font-weight:600;letter-spacing:-0.005em;color:#0A0E17;border-radius:12px 12px 12px 12px;padding:16px 26px 16px 26px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#F6F5F0;color:#0A0E17;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#C8F53B;}.elementor-kit-6 a:hover{color:#F6F5F0;}.elementor-kit-6 h1{color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:72px;font-weight:700;line-height:1.04em;letter-spacing:-0.035em;}.elementor-kit-6 h2{color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:40px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h3{color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:28px;font-weight:600;line-height:1.2em;letter-spacing:-0.015em;}.elementor-kit-6 h4{color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:22px;font-weight:600;line-height:1.3em;letter-spacing:-0.01em;}.elementor-kit-6 h5{color:#F6F5F0;font-family:"Readex Pro", Sans-serif;font-size:18px;font-weight:600;line-height:1.4em;letter-spacing:0em;}.elementor-kit-6 h6{color:#F6F5F0;font-family:"JetBrains Mono", Sans-serif;font-size:13px;font-weight:500;line-height:1.4em;letter-spacing:0.02em;}.elementor-kit-6 label{color:#9AA3B2;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{color:#F6F5F0;background-color:#161D2C;border-style:solid;border-width:1px 1px 1px 1px;border-color:#212A3B;border-radius:12px 12px 12px 12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-text-font-size:17px;--e-global-typography-accent-font-size:16px;--e-global-typography-qchero0-font-size:80px;--e-global-typography-qcdisp0-font-size:56px;--e-global-typography-qchead0-font-size:34px;--e-global-typography-qcsub00-font-size:22px;--e-global-typography-qclead0-font-size:19px;--e-global-typography-qclabel-font-size:13px;--e-global-typography-qccode0-font-size:14px;}.elementor-kit-6 h1{font-size:56px;}.elementor-kit-6 h2{font-size:34px;}.elementor-kit-6 h3{font-size:26px;}.elementor-kit-6 h4{font-size:20px;}.elementor-kit-6 h5{font-size:18px;}.elementor-kit-6 h6{font-size:13px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:15px;--e-global-typography-qchero0-font-size:52px;--e-global-typography-qcdisp0-font-size:42px;--e-global-typography-qchead0-font-size:28px;--e-global-typography-qcsub00-font-size:20px;--e-global-typography-qclead0-font-size:18px;--e-global-typography-qclabel-font-size:12px;--e-global-typography-qccode0-font-size:13px;}.elementor-kit-6 h1{font-size:42px;}.elementor-kit-6 h2{font-size:28px;}.elementor-kit-6 h3{font-size:22px;}.elementor-kit-6 h4{font-size:19px;}.elementor-kit-6 h5{font-size:17px;}.elementor-kit-6 h6{font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================================================
   Qcoders v2: shared stylesheet for the light, image-led sections of qcoders.com
   -----------------------------------------------------------------------------------------------------
   Read with ART-DIRECTION.md (same folder). Every rule is scoped under .qc2 so nothing leaks into
   Elementor, Hello Elementor or the dark hero/showcase. Each section is one Elementor HTML widget:

       ‹div class="qc2 qc2--paper qc2-scene"› ... ‹/div›

   Elementor container holding a qc2 widget: Content width "Full width", padding 0, gap 0, overflow
   visible, no Motion Effects, no entrance animation (a transform on an ancestor breaks position:
   sticky and the scroll-linked cut).

   Load order: this file must load AFTER Elementor's kit CSS. Paste it into Site Settings › Custom CSS,
   or link it from Elementor › Custom Code with location "Body End". Element resets here are (0,1,1),
   the same weight as the kit's ".elementor-kit-N h2", so order decides them; every component rule is
   ".qc2 .qc2-x" (0,2,0) and always wins. The only !important is in the reduced-motion override.

   Fonts: Readex Pro 300/400/500/600 and JetBrains Mono 500, from Elementor Global Fonts or:
   ‹link rel="preconnect" href="https://fonts.gstatic.com" crossorigin›
   ‹link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"›

   Contents
     1. Tokens (brand primitives, product fields, type, space, motion)
     2. Grounds (paper, stone, ink, volt, product fields)
     3. Base and type
     4. Actions (button, link, the // comment, pick chips)
     5. Frame (wrap, grid, stack, utilities)
     6. Pictures (photo frames, product screens, phone glass)
     7. The 45-degree cut (the one signature motion)
     8. Compositions: plate, scene, ledger, band, volt, rail, mosaic, strip, words, stage, two, rows, line
     9. Reduced motion, forced colors, print
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------------------------------------- */
.qc2 {
  /* Brand primitives (brand/colors/tokens.css) */
  --qc2-ink: #0A0E17;
  --qc2-ink-800: #161D2C;
  --qc2-ink-500: #4A5568;      /* muted text on Paper 6.9:1, on Stone 6.3:1 */
  --qc2-ink-300: #9AA3B2;      /* muted text on Ink 7.6:1 */
  --qc2-paper: #F6F5F0;
  --qc2-stone: #ECEAE3;        /* one tone step under Paper: the only surface on light grounds */
  --qc2-volt: #C8F53B;
  --qc2-volt-400: #D6F86B;
  --qc2-volt-700: #6E9400;     /* Volt graphics on Paper, 3.3:1, never text */
  --qc2-volt-900: #3F5500;     /* Volt-family links on Paper, 7.7:1 */

  /* Product fields: the colour each product in our portfolio already wears. A field appears only in
     the section that shows that product's screens. */
  --qc2-f-stock: #114136;      /* Inventory & sales: deep green   paper text 10.5:1 */
  --qc2-f-crm: #2F54E0;        /* Sales CRM: blue                 paper text 5.6:1  */
  --qc2-f-book: #52183D;       /* Booking system: plum            paper text 12.4:1 */
  --qc2-f-route: #FF6117;      /* Delivery app: orange            ink text 6.4:1    */
  --qc2-f-docs: #134B55;       /* AI document assistant: teal     paper text 8.9:1  */
  --qc2-f-store: #E9E2D6;      /* Online store: travertine        ink text 15:1     */

  /* Type: one family, five sizes, far apart (phone 390 -> desktop 1440) */
  --qc2-font: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --qc2-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --qc2-t-display: clamp(2.75rem, 1.55rem + 5vw, 6rem);         /* 44 -> 96  page h1           */
  --qc2-t-head: clamp(2rem, 1.45rem + 2.3vw, 3.5rem);           /* 32 -> 56  section headings  */
  --qc2-t-lead: clamp(1.375rem, 1.17rem + 0.85vw, 1.875rem);    /* 22 -> 30  lead, h3, statement */
  --qc2-t-body: clamp(1.0625rem, 1.02rem + 0.1vw, 1.125rem);    /* 17 -> 18  running text      */
  --qc2-t-small: 0.875rem;                                       /* 14        captions, legal, // */
  --qc2-w-body: 400;

  /* Space: 4px base. Sections far apart, insides close. */
  --qc2-s1: 0.25rem;  --qc2-s2: 0.5rem;  --qc2-s3: 0.75rem; --qc2-s4: 1rem;
  --qc2-s5: 1.5rem;   --qc2-s6: 2rem;    --qc2-s7: 3rem;    --qc2-s8: 4rem;
  --qc2-s9: 6rem;     --qc2-s10: 8rem;   --qc2-s11: 12rem;
  --qc2-sec: clamp(5rem, 3.2rem + 6.5vw, 10rem);   /* section padding 80 -> 160 */
  --qc2-margin: clamp(1rem, 0.4rem + 2vw, 2rem);   /* outer margin 16 -> 32 */
  --qc2-gutter: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  --qc2-max: 100rem;                               /* 1600px of content, then the frame centres */
  --qc2-header: 80px;                              /* fixed site header height, for sticky tops */
  /* From the content edge to the viewport edge, for bleeds. cqw resolves where it is used, against
     the .qc2 root (a size container), so scrollbars never cause a sideways scroll. */
  --qc2-edge: max(var(--qc2-margin), (100cqw - var(--qc2-max)) / 2);

  /* Motion: strong ease-outs, nothing bounces */
  --qc2-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --qc2-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --qc2-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --qc2-t-press: 140ms;
  --qc2-t-hover: 180ms;
  --qc2-t-ui: 240ms;

  /* Default ground = Paper */
  --qc2-bg: var(--qc2-paper);
  --qc2-fg: var(--qc2-ink);
  --qc2-muted: var(--qc2-ink-500);
  --qc2-surface: var(--qc2-stone);
  --qc2-link: var(--qc2-volt-900);
  --qc2-btn-bg: var(--qc2-ink);
  --qc2-btn-fg: var(--qc2-paper);
  --qc2-btn-hover: var(--qc2-ink-800);
  --qc2-focus: var(--qc2-volt-900);
  --qc2-comment: var(--qc2-volt-900);
  --qc2-pick-on-bg: var(--qc2-ink);
  --qc2-pick-on-fg: var(--qc2-volt);

  container: qc2 / inline-size;
}


/* -----------------------------------------------------------------------------------------------------
   2. Grounds. One on the .qc2 root, or on an inner half (Two fields). Light grounds take an Ink
      button, dark grounds a Volt button. On a product field secondary text is the field's ink at full
      strength: hierarchy comes from size and weight there, never from a tinted grey.
   ----------------------------------------------------------------------------------------------------- */
.qc2--paper  { --qc2-bg: var(--qc2-paper); --qc2-fg: var(--qc2-ink); --qc2-muted: var(--qc2-ink-500); --qc2-surface: var(--qc2-stone); }
.qc2--stone  { --qc2-bg: var(--qc2-stone); --qc2-fg: var(--qc2-ink); --qc2-muted: var(--qc2-ink-500); --qc2-surface: var(--qc2-paper); }
.qc2--f-store { --qc2-bg: var(--qc2-f-store); --qc2-fg: var(--qc2-ink); --qc2-muted: var(--qc2-ink); --qc2-surface: var(--qc2-paper); }
.qc2--f-route {
  --qc2-bg: var(--qc2-f-route); --qc2-fg: var(--qc2-ink); --qc2-muted: var(--qc2-ink); --qc2-surface: #FF7A3D;
  --qc2-link: var(--qc2-ink); --qc2-focus: var(--qc2-ink); --qc2-comment: var(--qc2-ink);
}
.qc2--volt {
  --qc2-bg: var(--qc2-volt); --qc2-fg: var(--qc2-ink); --qc2-muted: var(--qc2-ink); --qc2-surface: var(--qc2-volt-400);
  --qc2-link: var(--qc2-ink); --qc2-focus: var(--qc2-ink); --qc2-comment: var(--qc2-ink);
}
.qc2--ink, .qc2--f-stock, .qc2--f-crm, .qc2--f-book, .qc2--f-docs {
  --qc2-fg: var(--qc2-paper); --qc2-muted: var(--qc2-paper);
  --qc2-link: var(--qc2-volt); --qc2-focus: var(--qc2-volt); --qc2-comment: var(--qc2-volt);
  --qc2-btn-bg: var(--qc2-volt); --qc2-btn-fg: var(--qc2-ink); --qc2-btn-hover: var(--qc2-volt-400);
  --qc2-pick-on-bg: var(--qc2-volt); --qc2-pick-on-fg: var(--qc2-ink);
  --qc2-w-body: 300;
  color-scheme: dark;
}
.qc2--ink     { --qc2-bg: var(--qc2-ink); --qc2-muted: var(--qc2-ink-300); --qc2-surface: var(--qc2-ink-800); }
.qc2--f-stock { --qc2-bg: var(--qc2-f-stock); --qc2-surface: #184C40; }
/* CRM blue carries Paper at 5.6:1, the lowest of the product fields, so running text there keeps weight 400
   instead of the 300 light text takes on the other dark grounds. */
.qc2--f-crm   { --qc2-bg: var(--qc2-f-crm);   --qc2-surface: #3A5EE6; --qc2-link: var(--qc2-paper); --qc2-focus: var(--qc2-paper); --qc2-w-body: 400; }
.qc2--f-book  { --qc2-bg: var(--qc2-f-book);  --qc2-surface: #5E2148; }
.qc2--f-docs  { --qc2-bg: var(--qc2-f-docs);  --qc2-surface: #1A5661; }

.qc2, .qc2--paper, .qc2--stone, .qc2--ink, .qc2--volt,
.qc2--f-stock, .qc2--f-crm, .qc2--f-book, .qc2--f-route, .qc2--f-docs, .qc2--f-store {
  background-color: var(--qc2-bg);
  color: var(--qc2-fg);
  font-weight: var(--qc2-w-body);
}


/* -----------------------------------------------------------------------------------------------------
   3. Base and type
   ----------------------------------------------------------------------------------------------------- */
.qc2 {
  position: relative;
  font-family: var(--qc2-font);
  font-size: var(--qc2-t-body);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;     /* a bleed may touch the viewport edge, never pass it; clip is not a scroll container */
}
.qc2 *, .qc2 *::before, .qc2 *::after { box-sizing: border-box; }
.qc2 :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend) { margin: 0; padding: 0; }
.qc2 :is(h1, h2, h3, h4) {
  font-family: var(--qc2-font); font-size: inherit; font-weight: 500; line-height: 1.2;
  color: inherit; text-transform: none; font-style: normal; text-wrap: balance; hyphens: none;
}
.qc2 p  { max-width: 62ch; text-wrap: pretty; color: inherit; }
.qc2 :is(ul, ol) { list-style: none; }
.qc2 :is(img, svg, video) { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.qc2 strong { font-weight: 500; }
.qc2 ::selection { background: var(--qc2-volt); color: var(--qc2-ink); }
.qc2--volt ::selection { background: var(--qc2-ink); color: var(--qc2-volt); }

/* The five sizes. The tag is the outline, the class is the size. Headlines: two lines at most at every
   width (about 30 characters for .qc2-display, 40 for .qc2-h). */
.qc2 :is(.qc2-display, .qc2-h, .qc2-title) { text-wrap: balance; }
.qc2 .qc2-display {
  font-size: var(--qc2-t-display); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em;
  max-width: 16ch; margin-left: -0.04em;   /* optical alignment of a round first letter */
}
.qc2 .qc2-h     { font-size: var(--qc2-t-head); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; max-width: 20ch; }
.qc2 .qc2-lead  { font-size: var(--qc2-t-lead); font-weight: 400; line-height: 1.3; letter-spacing: -0.012em; max-width: 34ch; }
.qc2 .qc2-title { font-size: var(--qc2-t-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; max-width: 26ch; }
.qc2 .qc2-body  { font-size: var(--qc2-t-body); line-height: 1.55; }
.qc2 .qc2-small { font-size: var(--qc2-t-small); line-height: 1.45; }
.qc2 .qc2-muted { color: var(--qc2-muted); }
.qc2 .qc2-num   { font-variant-numeric: tabular-nums; }
/* light type on dark grounds reads heavier: one weight step down */
:is(.qc2--ink, .qc2--f-stock, .qc2--f-crm, .qc2--f-book, .qc2--f-docs) :is(.qc2-display, .qc2-h) { font-weight: 500; }


/* -----------------------------------------------------------------------------------------------------
   4. Actions
   ----------------------------------------------------------------------------------------------------- */
/* Button: a pill, because you press it. One primary per screen, named for what it does. */
.qc2 .qc2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0 1.75rem;
  border: 0; border-radius: 999px;
  background: var(--qc2-btn-bg); color: var(--qc2-btn-fg);
  font: 500 var(--qc2-t-body) / 1 var(--qc2-font); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--qc2-t-press) var(--qc2-ease-out), background-color var(--qc2-t-hover) ease;
  -webkit-tap-highlight-color: transparent;
}
.qc2 .qc2-btn:active { transform: scale(0.97); }
.qc2 .qc2-btn svg { width: 1.15em; height: 1.15em; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .qc2 .qc2-btn:hover { background: var(--qc2-btn-hover); color: var(--qc2-btn-fg); }
}

/* Text link: the second action is always a plain link */
.qc2 a:not([class]), .qc2 .qc2-link {
  color: var(--qc2-link);
  text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--qc2-t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .qc2 a:not([class]):hover, .qc2 .qc2-link:hover { color: var(--qc2-link); text-decoration-thickness: 0.14em; }
}

.qc2 :is(a, button, input, summary, [tabindex]):focus-visible,
.qc2 .qc2-pick input:focus-visible + span {
  outline: 3px solid var(--qc2-focus); outline-offset: 3px;
}
.qc2 .qc2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc2-s4) var(--qc2-s6); }

/* The one "// comment" per page: the developer's note to the reader, in the Open line, under the
   button. Never above a heading. */
.qc2 .qc2-comment { font-family: var(--qc2-mono); font-size: var(--qc2-t-small); font-weight: 500; color: var(--qc2-comment); }

/* Pick chips (Open line composer): radio inputs dressed as pills */
.qc2 .qc2-pick { border: 0; min-width: 0; }
.qc2 .qc2-pick legend { font-size: var(--qc2-t-body); font-weight: 500; margin-bottom: var(--qc2-s3); }
.qc2 .qc2-pick__opts { display: flex; flex-wrap: wrap; gap: var(--qc2-s2); }
.qc2 .qc2-pick label { position: relative; display: inline-flex; cursor: pointer; line-height: 1; vertical-align: top; }
.qc2 .qc2-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.qc2 .qc2-pick span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; background: var(--qc2-surface); color: var(--qc2-fg); font-size: var(--qc2-t-body);
  transition: background-color var(--qc2-t-hover) ease, color var(--qc2-t-hover) ease, transform var(--qc2-t-press) var(--qc2-ease-out);
}
.qc2 .qc2-pick label:active span { transform: scale(0.97); }
.qc2 .qc2-pick input:checked + span { background: var(--qc2-pick-on-bg); color: var(--qc2-pick-on-fg); }


/* -----------------------------------------------------------------------------------------------------
   5. Frame: one pair of margins, one 12-column grid, two anchor lines (the margin and the 50% line)
   ----------------------------------------------------------------------------------------------------- */
.qc2 .qc2-wrap {
  width: 100%; max-width: calc(var(--qc2-max) + 2 * var(--qc2-margin));
  margin-inline: auto; padding-inline: var(--qc2-margin);
}
.qc2 .qc2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--qc2-gutter); }
.qc2 .qc2-grid > * { grid-column: 1 / -1; min-width: 0; }
.qc2.qc2-sec, .qc2 .qc2-sec { padding-block: var(--qc2-sec); }
.qc2 .qc2-stack > * + * { margin-top: var(--qc2-flow, var(--qc2-s4)); }
.qc2 .qc2-stack > :is(.qc2-display, .qc2-h) + * { margin-top: var(--qc2-s5); }
.qc2 .qc2-stack > * + :is(.qc2-actions, .qc2-pick, .qc2-facts) { margin-top: var(--qc2-s6); }
.qc2 .qc2-stack > * + :is(.qc2-h, .qc2-title) { margin-top: var(--qc2-s7); }
.qc2 .qc2-measure { max-width: 62ch; }
.qc2 .qc2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Opposite ends: a heading on the margin, its paragraph on the 50% line */
.qc2 .qc2-ends { row-gap: var(--qc2-s5); align-items: end; }
@container qc2 (min-width: 64rem) {
  .qc2 .qc2-ends > :first-child { grid-column: 1 / span 6; }
  .qc2 .qc2-ends > :last-child  { grid-column: 7 / -1; }
}

/* Facts (a definition list), used by Stage */
.qc2 .qc2-facts { display: grid; gap: var(--qc2-s5); }
.qc2 .qc2-facts dt { font-weight: 500; }
.qc2 .qc2-facts dd { margin: var(--qc2-s1) 0 0; max-width: 46ch; }


/* -----------------------------------------------------------------------------------------------------
   6. Pictures. Square corners; photos in two ratios (4:5, 3:2); cover crop with a focal point per
      picture (--qc2-focus, and --qc2-focus-m for the phone crop). No borders, shadows, device frames
      or browser chrome. The frame's surface shows while the image loads.
   ----------------------------------------------------------------------------------------------------- */
.qc2 .qc2-pic { position: relative; margin: 0; overflow: clip; background: var(--qc2-surface); }
.qc2 .qc2-pic > :is(img, video) { width: 100%; height: 100%; object-fit: cover; object-position: var(--qc2-focus, 50% 50%); }
@container qc2 (max-width: 63.99rem) {
  .qc2 .qc2-pic > :is(img, video) { object-position: var(--qc2-focus-m, var(--qc2-focus, 50% 50%)); }
}
.qc2 .qc2-pic--45 { aspect-ratio: 4 / 5; }
.qc2 .qc2-pic--32 { aspect-ratio: 3 / 2; }
/* Product screens. Desktop screens are 1440x900 (16:10), phone screens 390x844. A screen is a crop of
   the real thing, anchored top-left so the app's own header stays in frame. */
.qc2 .qc2-screen { aspect-ratio: 16 / 10; --qc2-focus: 0% 0%; background: var(--qc2-paper); }
/* The one exception to square corners: a phone screen keeps the phone's glass corner (28px at 390px,
   written as a ratio so it scales with the picture). */
.qc2 .qc2-phone  { aspect-ratio: 390 / 844; border-radius: 7.2% / 3.33%; --qc2-focus: 50% 0%; background: var(--qc2-paper); }
.qc2 .qc2-pic figcaption, .qc2 .qc2-cap { font-size: var(--qc2-t-small); line-height: 1.45; color: var(--qc2-muted); margin-top: var(--qc2-s3); }
/* a picture that is a link settles slowly under the hand: no lift, no shadow */
@media (hover: hover) and (pointer: fine) {
  .qc2 a .qc2-pic > img { transition: transform 700ms var(--qc2-ease-soft); }
  .qc2 a:hover .qc2-pic > img { transform: scale(1.03); }
}


/* -----------------------------------------------------------------------------------------------------
   7. The 45-degree cut: the one signature motion.
      A picture opens along a hard 45-degree edge (the angle of every stroke in the mark), travelling
      the way the Q's tail points, top-left to bottom-right. It is scroll-linked, so the scroll is the
      easing: linear, and it closes again if you scroll back. A screen docked on a photo
      (.qc2-cut--late) opens one beat after its photo. Text never animates on scroll.
      Without scroll timelines, or with reduced motion, the picture is simply there.
   ----------------------------------------------------------------------------------------------------- */
@keyframes qc2-cut {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  to   { -webkit-mask-position: 0 0;       mask-position: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qc2 .qc2-cut {
      -webkit-mask-image: linear-gradient(135deg, #000 49.94%, transparent 50.06%);
              mask-image: linear-gradient(135deg, #000 49.94%, transparent 50.06%);
      -webkit-mask-size: 220% 220%; mask-size: 220% 220%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: 0 0; mask-position: 0 0;
      animation: qc2-cut linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 36%;
    }
    .qc2 .qc2-cut--late { animation-range: entry 32% cover 52%; }
  }
}


/* =====================================================================================================
   8. Compositions. One class on the .qc2 root names the composition; BEM children place its parts.
      Each has a phone arrangement (below 64rem = 1024px of fragment width, also used by tablets, where
      tall pictures turn 3:2) and a desktop arrangement (64rem and up). Markup is in ART-DIRECTION.md.
   ===================================================================================================== */

/* 8.1 Title plate (OPENER) ------------------------------------------------------------------------------
   Interior page opener: h1 docked low on the left; one tall photo from the header to the section's
   foot, bleeding off the right edge; optionally a phone screen landing on its inner edge. */
@container qc2 (max-width: 63.99rem) {
  .qc2-plate .qc2-plate__text   { padding-block: var(--qc2-s8) var(--qc2-s7); }
  .qc2-plate .qc2-plate__pic    { margin-inline: calc(-1 * var(--qc2-margin)); aspect-ratio: 4 / 5; }
  .qc2-plate .qc2-plate__screen { width: 42%; justify-self: end; margin: -34% 0 var(--qc2-s7); position: relative; z-index: 1; }
}
@container qc2 (min-width: 64rem) {
  .qc2-plate .qc2-grid { min-height: min(calc(100svh - var(--qc2-header)), 58rem); }
  .qc2-plate .qc2-plate__text { grid-column: 1 / span 6; grid-row: 1; align-self: end; padding-block: var(--qc2-s9) var(--qc2-sec); }
  .qc2-plate .qc2-plate__pic  { grid-column: 8 / -1; grid-row: 1; height: 100%; margin-right: calc(-1 * var(--qc2-edge)); }
  .qc2-plate .qc2-plate__screen {
    grid-column: 7 / span 2; grid-row: 1; align-self: end; justify-self: start;
    width: 100%; max-width: 15rem; margin-bottom: var(--qc2-s9); position: relative; z-index: 1;
  }
}
/* The opener is already in view when the page loads, part way into the cut's scroll range, so below 64rem
   (phones and tablets) its photo and screen would show half cut under the header: there they are simply
   there. From 64rem the cut runs as usual. */
@container qc2 (max-width: 63.99rem) {
  .qc2.qc2-plate .qc2-cut { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* 8.2 Scene & Screen (SPLIT) ------------------------------------------------------------------------------
   A real place and the screen that runs it. The photo takes seven columns at the full height of the
   section and bleeds off its outer edge; our product screen lands on the photo's inner edge (64-120px
   overlap), low; the words sit on the far side. --flip mirrors it. */
@container qc2 (max-width: 63.99rem) {
  .qc2.qc2-scene { padding-bottom: var(--qc2-sec); }
  .qc2-scene .qc2-scene__pic    { margin-inline: calc(-1 * var(--qc2-margin)); aspect-ratio: 4 / 5; }
  .qc2-scene .qc2-scene__screen { width: 44%; justify-self: end; margin-top: -34%; position: relative; z-index: 1; }
  .qc2-scene .qc2-scene__screen.qc2-screen { width: 82%; margin-top: -24%; }
  .qc2-scene .qc2-scene__text   { padding-top: var(--qc2-s7); }
}
@container qc2 (min-width: 64rem) {
  .qc2-scene .qc2-grid { min-height: min(100svh, 60rem); }
  .qc2-scene .qc2-scene__pic { grid-column: 1 / span 7; grid-row: 1; height: 100%; margin-left: calc(-1 * var(--qc2-edge)); }
  .qc2-scene .qc2-scene__screen {
    grid-column: 6 / span 3; grid-row: 1; align-self: end; justify-self: end;
    width: 100%; max-width: 16rem; margin-bottom: var(--qc2-s9); position: relative; z-index: 1;
  }
  .qc2-scene .qc2-scene__screen.qc2-screen { grid-column: 4 / span 5; max-width: none; margin-bottom: var(--qc2-s8); }
  .qc2-scene .qc2-scene__text { grid-column: 9 / -1; grid-row: 1; align-self: center; padding-block: var(--qc2-sec); }
  .qc2-scene--flip .qc2-scene__pic { grid-column: 6 / -1; margin-left: 0; margin-right: calc(-1 * var(--qc2-edge)); }
  .qc2-scene--flip .qc2-scene__screen { grid-column: 5 / span 3; justify-self: start; }
  .qc2-scene--flip .qc2-scene__screen.qc2-screen { grid-column: 5 / span 5; }
  .qc2-scene--flip .qc2-scene__text { grid-column: 1 / span 4; }
}
@container qc2 (min-width: 64rem) and (max-width: 89.99rem) {   /* small desktops: give the words a fifth column */
  .qc2-scene .qc2-scene__pic { grid-column: 1 / span 6; }
  .qc2-scene .qc2-scene__screen { grid-column: 5 / span 3; }
  .qc2-scene .qc2-scene__screen.qc2-screen { grid-column: 3 / span 5; }
  .qc2-scene .qc2-scene__text { grid-column: 8 / -1; }
  .qc2-scene--flip .qc2-scene__pic { grid-column: 7 / -1; }
  .qc2-scene--flip .qc2-scene__screen { grid-column: 6 / span 3; }
  .qc2-scene--flip .qc2-scene__screen.qc2-screen { grid-column: 6 / span 5; }
  .qc2-scene--flip .qc2-scene__text { grid-column: 1 / span 5; }
}

/* 8.3 Service ledger (LIST) ---------------------------------------------------------------------------------
   An index set large: one row per service (or group), its name at heading size and one line beside it;
   one picture at a fixed place on the right follows the row under the pointer or keyboard focus. On a
   phone each row carries its own thumbnail. Rows separate by space and a ground step, never lines. */
.qc2-ledger .qc2-ledger__list { position: relative; margin-top: var(--qc2-s8); }
.qc2-ledger .qc2-ledger__row > a { display: grid; color: inherit; text-decoration: none; transition: background-color var(--qc2-t-hover) ease; }
.qc2-ledger .qc2-ledger__row > a:is(:hover, :focus-visible) { background: var(--qc2-surface); }
.qc2-ledger .qc2-ledger__line { color: var(--qc2-muted); max-width: 44ch; }
@container qc2 (max-width: 63.99rem) {
  .qc2-ledger .qc2-ledger__row + .qc2-ledger__row { margin-top: var(--qc2-s2); }
  .qc2-ledger .qc2-ledger__row > a {
    grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--qc2-s4); row-gap: var(--qc2-s1);
    padding: var(--qc2-s3); margin-inline: calc(-1 * var(--qc2-s3));
  }
  .qc2-ledger .qc2-ledger__name { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--qc2-t-lead); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
  .qc2-ledger .qc2-ledger__line { grid-column: 2; grid-row: 2; align-self: start; }
  .qc2-ledger .qc2-ledger__pic  { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
}
@container qc2 (min-width: 64rem) {
  .qc2-ledger .qc2-ledger__list { width: calc((100% - 11 * var(--qc2-gutter)) / 12 * 8 + 7 * var(--qc2-gutter)); }
  .qc2-ledger .qc2-ledger__row > a {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--qc2-gutter); align-items: baseline;
    padding: var(--qc2-s5) var(--qc2-s4); margin-inline: calc(-1 * var(--qc2-s4));
  }
  .qc2-ledger .qc2-ledger__name { grid-column: 1; grid-row: 1; font-size: var(--qc2-t-head); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; }
  .qc2-ledger .qc2-ledger__line { grid-column: 2; grid-row: 1; }
  .qc2-ledger .qc2-ledger__pic {
    position: absolute; top: 0; left: calc(100% + 2 * var(--qc2-gutter));
    width: calc(50% - 2 * var(--qc2-gutter)); max-width: 30rem; aspect-ratio: 4 / 5;
    opacity: 0; visibility: hidden;
    transition: opacity var(--qc2-t-ui) ease, visibility 0s linear var(--qc2-t-ui);
  }
  .qc2-ledger .qc2-ledger__row > a:is(:hover, :focus-visible) .qc2-ledger__pic,
  .qc2-ledger .qc2-ledger__list:not(:has(a:is(:hover, :focus-visible))) > .qc2-ledger__row:first-child .qc2-ledger__pic {
    opacity: 1; visibility: visible; transition: opacity var(--qc2-t-ui) ease, visibility 0s;
  }
}

/* 8.4 Full-bleed band (BAND) ------------------------------------------------------------------------------
   One photograph carries a whole screen between type sections, once per page at most. A headline and
   one line sit on a solid Ink plate docked bottom-left: nothing lies on the type, no scrim needed. */
.qc2.qc2-band { padding: 0; --qc2-bg: var(--qc2-ink); --qc2-fg: var(--qc2-paper); }
.qc2-band .qc2-band__plate { background: var(--qc2-ink); color: var(--qc2-paper); }
.qc2-band .qc2-band__plate .qc2-h { max-width: 16ch; }
.qc2-band .qc2-band__plate p { color: var(--qc2-ink-300); }
.qc2-band .qc2-band__plate > * + * { margin-top: var(--qc2-s4); }
@container qc2 (max-width: 63.99rem) {
  .qc2-band .qc2-band__pic   { aspect-ratio: 4 / 5; }
  .qc2-band .qc2-band__plate { padding: var(--qc2-s7) var(--qc2-margin) var(--qc2-s8); }
}
@container qc2 (min-width: 64rem) {
  .qc2-band .qc2-band__pic   { height: clamp(34rem, 100svh, 60rem); }
  .qc2-band .qc2-band__plate { position: absolute; left: var(--qc2-edge); bottom: var(--qc2-s8); width: min(38rem, 46cqw); padding: var(--qc2-s7); }
}

/* 8.5 Volt bracket statement (FIELD) -----------------------------------------------------------------------
   The one big idea of the page, once, on a full Volt field, framed by the mark's two chevrons drawn
   large in Ink (the brand's bracket frame: Ink on Volt only). The page's one centred moment. On a
   phone the chevrons sit on the diagonal: "‹" top-left, "›" bottom-right. */
.qc2.qc2-volt { padding-block: var(--qc2-sec); text-align: center; }
.qc2-volt .qc2-volt__frame { display: grid; justify-items: center; }
.qc2-volt .qc2-volt__chev { color: var(--qc2-ink); width: auto; }
.qc2-volt .qc2-volt__chev path { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.qc2-volt .qc2-volt__say  { max-width: 18ch; margin-inline: auto; }
.qc2-volt .qc2-volt__more { margin: var(--qc2-s6) auto 0; max-width: 46ch; }
.qc2-volt .qc2-actions    { justify-content: center; margin-top: var(--qc2-s6); }
@container qc2 (max-width: 63.99rem) {
  .qc2-volt .qc2-volt__frame { row-gap: var(--qc2-s5); }
  .qc2-volt .qc2-volt__chev { height: 3.5rem; }
  .qc2-volt .qc2-volt__chev--l { justify-self: start; }
  .qc2-volt .qc2-volt__chev--r { justify-self: end; }
}
@container qc2 (min-width: 64rem) {
  .qc2-volt .qc2-volt__frame { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--qc2-s7); align-items: center; max-width: 68rem; margin-inline: auto; }
  .qc2-volt .qc2-volt__chev { height: clamp(9rem, 14cqw, 15rem); }
}

/* 8.6 Process rail (HELD) -------------------------------------------------------------------------------
   A picture held still while the steps pass beside it. The steps are a real ‹ol› with no visible
   numbers: position and the words (Listen, Decide, Build, Stay) carry the order. With the small script
   in ART-DIRECTION.md the held picture follows the step in view; without it the first picture stays.
   On a phone the hold is released: heading, picture, steps. */
.qc2-rail .qc2-rail__frame { position: relative; }
.qc2-rail .qc2-rail__frame > .qc2-pic { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; opacity: 0; transition: opacity 500ms ease; }
.qc2-rail .qc2-rail__frame > .qc2-pic.is-on { opacity: 1; }
.qc2-rail .qc2-rail__step > * + * { margin-top: var(--qc2-s3); }
.qc2-rail .qc2-rail__get { color: var(--qc2-muted); }
/* optional: each step repeats its picture inline (lazy) so a phone sees every picture; desktop never
   renders it, so it never loads there */
.qc2-rail .qc2-rail__inline { display: none; }
@container qc2 (max-width: 63.99rem) {
  .qc2-rail .qc2-rail__step > .qc2-rail__inline { display: block; margin: 0 0 var(--qc2-s5); }
  .qc2-rail:has(.qc2-rail__inline) .qc2-rail__frame { display: none; }
  .qc2-rail .qc2-rail__frame { aspect-ratio: 4 / 5; margin: var(--qc2-s7) calc(-1 * var(--qc2-margin)) 0; }
  .qc2-rail--screens .qc2-rail__frame { aspect-ratio: 16 / 10; margin-left: 0; }
  .qc2-rail .qc2-rail__steps { display: grid; gap: var(--qc2-s8); margin-top: var(--qc2-s8); }
}
@container qc2 (min-width: 64rem) {
  .qc2-rail .qc2-grid { align-items: start; }
  .qc2-rail .qc2-rail__hold {
    grid-column: 1 / span 6; position: sticky; top: calc(var(--qc2-header) + var(--qc2-s6));
    height: calc(100svh - var(--qc2-header) - 2 * var(--qc2-s6)); min-height: 34rem;
    display: flex; flex-direction: column; gap: var(--qc2-s6);
  }
  .qc2-rail .qc2-rail__frame { flex: 1 1 auto; min-height: 18rem; margin-left: calc(-1 * var(--qc2-edge)); }
  .qc2-rail .qc2-rail__steps { grid-column: 8 / -1; padding-block: 16svh 24svh; }
  .qc2-rail .qc2-rail__step  { min-height: 50svh; display: flex; flex-direction: column; justify-content: center; }
  /* --screens: the held pictures are product screens, shown whole at 16:10 on the field */
  .qc2-rail--screens .qc2-rail__hold  { justify-content: center; }
  .qc2-rail--screens .qc2-rail__frame { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .qc2-rail .qc2-rail__step .qc2-h { max-width: 12ch; }
}

/* 8.7 Uneven mosaic (MOSAIC) --------------------------------------------------------------------------------
   Five to nine pictures (photos and phone screens mixed) at two or three widths with dropped neighbours,
   one caption line under each screen; the heading block is the first item, in the top-left void.
   Desktop placement repeats every six items: [heading | big picture] [phone phone phone] [wide picture].
   Override any item with style="--qc2-col: 2 / span 5; --qc2-drop: 0". On a phone, screens pair up
   two by two; on a tablet three in a row. */
.qc2-mosaic .qc2-mosaic__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--qc2-gutter); align-items: start; }
@container qc2 (max-width: 63.99rem) {
  .qc2-mosaic .qc2-mosaic__grid { row-gap: var(--qc2-s7); }
  .qc2-mosaic .qc2-mosaic__grid > * { grid-column: 1 / -1; }
  .qc2-mosaic .qc2-mosaic__grid > :has(> .qc2-phone) { grid-column: auto / span 6; }
  .qc2-mosaic .qc2-mosaic__grid > :has(> .qc2-phone) + :has(> .qc2-phone) { margin-top: var(--qc2-s7); }
}
@container qc2 (min-width: 40rem) and (max-width: 63.99rem) {
  .qc2-mosaic .qc2-mosaic__grid > :has(> .qc2-phone) { grid-column: auto / span 4; }
  .qc2-mosaic .qc2-mosaic__grid .qc2-pic:not(.qc2-phone) { aspect-ratio: 3 / 2; }
}
@container qc2 (min-width: 64rem) {
  .qc2-mosaic .qc2-mosaic__grid { row-gap: var(--qc2-s9); }
  .qc2-mosaic .qc2-mosaic__grid > * { grid-column: var(--qc2-col, auto); margin-top: var(--qc2-drop, 0); }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n+1) { --qc2-col: 1 / span 5; }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n+2) { --qc2-col: 7 / span 5; }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n+3) { --qc2-col: 2 / span 3; }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n+4) { --qc2-col: 6 / span 3; --qc2-drop: 8rem; }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n+5) { --qc2-col: 10 / span 3; --qc2-drop: 3rem; }
  .qc2-mosaic .qc2-mosaic__grid > :nth-child(6n)   { --qc2-col: 3 / span 7; }
}

/* 8.8 Workday strip (STRIP) --------------------------------------------------------------------------------
   A set people browse in any order (kinds of business, other projects): 4:5 photos in a row that runs
   off the right edge, three in full and a fourth cut. Native scroll and snap, so touch, trackpad and
   keyboard (the track takes focus) all work. Nothing scrolls by itself. The track is a direct child
   of the .qc2 root, outside .qc2-wrap. */
.qc2-strip .qc2-strip__track {
  display: flex; gap: var(--qc2-gutter); margin-top: var(--qc2-s8);
  padding: 0 var(--qc2-edge) var(--qc2-s5); scroll-padding-inline: var(--qc2-edge);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--qc2-muted) transparent;
}
.qc2-strip .qc2-strip__item { flex: 0 0 78%; scroll-snap-align: start; }
.qc2-strip .qc2-strip__item > a { display: block; color: inherit; text-decoration: none; }
.qc2-strip .qc2-strip__item .qc2-pic { aspect-ratio: 4 / 5; }
.qc2-strip .qc2-strip__item .qc2-title { margin-top: var(--qc2-s4); }
.qc2-strip .qc2-strip__item p { margin-top: var(--qc2-s2); color: var(--qc2-muted); }
.qc2-strip .qc2-strip__go { display: inline-block; margin-top: var(--qc2-s3); color: var(--qc2-link); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
@container qc2 (min-width: 64rem) {
  .qc2-strip .qc2-strip__item { flex-basis: clamp(18rem, 28cqw, 27rem); }
}

/* 8.9 Words with pictures (STATEMENT) ---------------------------------------------------------------------
   One short statement about the businesses themselves with two to four photo chips set between its words
   (3:2, the height of the type, all from the one photo set). A ‹p›: two lines at heading size on desktop,
   at most four lines at lead size on a phone. */
.qc2-words .qc2-words__say { font-size: var(--qc2-t-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; max-width: 34ch; text-wrap: balance; }
.qc2-words .qc2-nw { white-space: nowrap; }   /* keep a word, its chip and the comma after it together */
.qc2-words .qc2-chip { display: inline-block; vertical-align: -0.1em; width: 1.5em; height: 1em; margin-inline: 0.08em; overflow: clip; background: var(--qc2-surface); }
.qc2-words .qc2-chip > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--qc2-focus, 50% 50%); }
.qc2-words .qc2-words__after { margin-top: var(--qc2-s7); }
@container qc2 (min-width: 64rem) {
  /* two lines at heading size: about 50 characters of words plus the chips (count each chip as 3) */
  .qc2-words .qc2-words__say { grid-column: 1 / -1; max-width: none; font-size: var(--qc2-t-head); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; }
  .qc2-words .qc2-words__after { grid-column: 7 / -1; }
}

/* 8.10 Screen on stage (STAGE) ---------------------------------------------------------------------------
   Our real product, large, on the field of that product's own colour: the desktop screen runs off the
   right edge and the section's foot, a phone screen lands on its lower-left corner, the heading and
   three or four facts sit in the left columns. The colour moment of a page. */
.qc2.qc2-stage { padding-top: var(--qc2-sec); }
@container qc2 (max-width: 63.99rem) {
  .qc2-stage .qc2-stage__text   { padding-bottom: var(--qc2-s8); }
  .qc2-stage .qc2-stage__screen { margin-right: calc(-1 * var(--qc2-margin)); }
  .qc2-stage .qc2-stage__phone  { width: 40%; margin: -30% 0 var(--qc2-s7) var(--qc2-s4); position: relative; z-index: 1; }
}
@container qc2 (min-width: 64rem) {
  .qc2-stage .qc2-grid { align-items: end; }
  .qc2-stage .qc2-stage__text   { grid-column: 1 / span 4; grid-row: 1; align-self: start; padding-bottom: var(--qc2-s9); }
  .qc2-stage .qc2-stage__screen { grid-column: 5 / -1; grid-row: 1; margin-right: calc(-1 * var(--qc2-edge)); }
  .qc2-stage .qc2-stage__phone  { grid-column: 5 / span 2; grid-row: 1; justify-self: start; width: 100%; max-width: 14rem; margin-bottom: var(--qc2-s8); position: relative; z-index: 1; }
}

/* 8.11 Two fields (SPLIT) ----------------------------------------------------------------------------------
   The screen split into two flat grounds, edge to edge: the words on the page ground, and a product
   field (or a photograph) holding the proof, which stands on the section's foot. Put a ground class on
   .qc2-two__b (qc2--f-docs ...). On a phone the proof comes first. */
.qc2.qc2-two { padding: 0; }
.qc2-two .qc2-two__split { display: grid; }
.qc2-two .qc2-two__b { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: clip; }
.qc2-two .qc2-two__b > .qc2-phone { aspect-ratio: 390 / 700; border-end-start-radius: 0; border-end-end-radius: 0; }
.qc2-two .qc2-two__b > .qc2-pic:not(.qc2-phone, .qc2-screen) { position: absolute; inset: 0; }
@container qc2 (max-width: 63.99rem) {
  .qc2-two .qc2-two__a { order: 2; padding: var(--qc2-s8) var(--qc2-margin) var(--qc2-sec); }
  .qc2-two .qc2-two__b { order: 1; min-height: 30rem; padding: var(--qc2-s8) var(--qc2-margin) 0; }
  .qc2-two .qc2-two__b > .qc2-phone { width: min(62%, 20rem); }
  .qc2-two .qc2-two__b > .qc2-screen { width: 100%; margin-right: calc(-1 * var(--qc2-margin)); }
}
@container qc2 (min-width: 64rem) {
  .qc2-two .qc2-two__split { grid-template-columns: 1fr 1fr; min-height: min(100svh, 58rem); }
  .qc2-two .qc2-two__a {
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--qc2-sec) var(--qc2-s9) var(--qc2-sec) var(--qc2-edge);
  }
  .qc2-two .qc2-two__b { padding: var(--qc2-s9) var(--qc2-s8) 0; }
  .qc2-two .qc2-two__b > .qc2-phone { width: min(56%, 22rem); }
  .qc2-two .qc2-two__b > .qc2-screen { width: calc(100% + var(--qc2-s8)); margin-right: calc(-1 * var(--qc2-s8)); align-self: flex-end; }
  .qc2-two--flip .qc2-two__a { order: 2; padding-inline: var(--qc2-s9) var(--qc2-edge); }
}

/* 8.12 Spec sheet (ROWS) ----------------------------------------------------------------------------------
   Long copy as rows: the heading in the left third (held while the rows pass, with --hold), each row a
   title and its paragraph on the right, apart by space only. A row may carry a tight crop of the screen
   it describes (.qc2-rows__crop). */
.qc2-rows .qc2-rows__list { display: grid; }
.qc2-rows .qc2-rows__row > * + * { margin-top: var(--qc2-s3); }
.qc2-rows .qc2-rows__row p { color: var(--qc2-muted); }
@container qc2 (max-width: 63.99rem) {
  .qc2-rows .qc2-rows__list { margin-top: var(--qc2-s8); gap: var(--qc2-s8); }
  .qc2-rows .qc2-rows__crop { margin-top: var(--qc2-s5); }
}
@container qc2 (min-width: 64rem) {
  .qc2-rows .qc2-grid { align-items: start; }
  .qc2-rows .qc2-rows__head { grid-column: 1 / span 4; }
  .qc2-rows--hold .qc2-rows__head { position: sticky; top: calc(var(--qc2-header) + var(--qc2-s7)); }
  .qc2-rows .qc2-rows__list { grid-column: 6 / -1; gap: var(--qc2-s9); }
  .qc2-rows .qc2-rows__row:has(> .qc2-rows__crop) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); column-gap: var(--qc2-gutter); align-items: start; }
  .qc2-rows .qc2-rows__row:has(> .qc2-rows__crop) > :not(.qc2-rows__crop) { grid-column: 1; }
  .qc2-rows .qc2-rows__row > .qc2-rows__crop { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

/* 8.13 Open line (CONVERSATION) --------------------------------------------------------------------------
   The close of every page and the opener of Contact: the page's one live thing. The visitor picks what
   they need; the WhatsApp message is written for them and appears on the blank screen of the phone in
   the photograph (photos/phone-in-hand-close.webp; the screen box below is measured on that file).
   The page's one "// comment" sits under the button. */
.qc2.qc2-line { padding-top: var(--qc2-sec); }
.qc2-line .qc2-line__pic { position: relative; aspect-ratio: 4 / 5; }
.qc2-line .qc2-line__screen {
  /* the photo's own blank screen shows through: the overlay has no ground, so it has no edge.
     Box measured on phone-in-hand-close.webp, from just under the notch to the bottom corners. */
  position: absolute; left: 26.6%; top: 8.8%; width: 46.4%; height: 84%;
  display: flex; flex-direction: column;
  color: var(--qc2-ink); font-size: 13px; line-height: 1.35; font-weight: 400; text-align: left;
}
.qc2-line .qc2-line__bar { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 1em; font-weight: 500; }
.qc2-line .qc2-line__bar svg { width: 2em; height: 2em; flex: none; }
.qc2-line .qc2-line__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1em 0.9em; }
.qc2-line .qc2-line__bubble { align-self: flex-end; max-width: 90%; padding: 0.7em 0.85em; border-radius: 1em 1em 0.3em 1em; background: var(--qc2-ink); color: var(--qc2-paper); }
.qc2-line .qc2-line__note { align-self: flex-end; margin-top: 0.4em; color: var(--qc2-ink-500); }
.qc2-line .qc2-line__compose { margin: 0 0.8em 1.8em; padding: 0.8em 1em; border-radius: 999px; background: var(--qc2-stone); color: var(--qc2-ink-500); }
@container qc2 (max-width: 63.99rem) {
  .qc2-line .qc2-line__text { padding-bottom: var(--qc2-s8); }
  .qc2-line .qc2-line__pic  { margin-inline: calc(-1 * var(--qc2-margin)); }
}
@container qc2 (min-width: 64rem) {
  .qc2-line .qc2-grid { align-items: end; }
  .qc2-line .qc2-line__text { grid-column: 1 / span 6; padding-bottom: var(--qc2-sec); }
  .qc2-line .qc2-line__pic  { grid-column: 8 / -1; margin-right: calc(-1 * var(--qc2-edge)); }
}
@container qc2 (min-width: 80rem) {
  .qc2-line .qc2-line__screen { font-size: 15px; }
}


/* 8.14 Tablets (40rem to 64rem): the phone arrangements, with tall pictures turned to 3:2 so a single
   picture never fills more than a screen. The Open line photo keeps 4:5 (its live screen is measured on
   it) and is narrowed instead. */
@container qc2 (min-width: 40rem) and (max-width: 63.99rem) {
  .qc2-plate .qc2-plate__pic, .qc2-scene .qc2-scene__pic, .qc2-band .qc2-band__pic { aspect-ratio: 3 / 2; }
  .qc2-rail:not(.qc2-rail--screens) .qc2-rail__frame { aspect-ratio: 3 / 2; }
  .qc2-plate .qc2-plate__screen, .qc2-scene .qc2-scene__screen:not(.qc2-screen) { width: 28%; margin-top: -22%; }
  .qc2-line .qc2-line__pic { width: min(100%, 34rem); margin-inline: auto; }
  .qc2-strip .qc2-strip__item { flex-basis: 44%; }
}


/* -----------------------------------------------------------------------------------------------------
   9. Reduced motion, forced colors, print
   ----------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qc2 *, .qc2 *::before, .qc2 *::after {
    animation-duration: 1ms !important;          /* accessibility override: the only !important */
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .qc2 .qc2-cut { -webkit-mask-image: none; mask-image: none; }
  .qc2 .qc2-btn:active, .qc2 .qc2-pick label:active span { transform: none; }
  .qc2 a .qc2-pic > img, .qc2 a:hover .qc2-pic > img { transform: none; transition: none; }
  .qc2-rail .qc2-rail__frame > .qc2-pic { transition: opacity 120ms ease; }   /* the state change stays, the travel goes */
}
@media (forced-colors: active) {
  .qc2 .qc2-btn, .qc2 .qc2-pick span { border: 2px solid ButtonText; }
  .qc2 .qc2-cut { -webkit-mask-image: none; mask-image: none; }
}
@media print {
  .qc2 .qc2-cut { -webkit-mask-image: none; mask-image: none; animation: none; }
  .qc2-strip .qc2-strip__track { overflow: visible; flex-wrap: wrap; }
}

/* =====================================================================================================
   kit-v2.css, site-wide additions for WordPress (written by website/elementor/make_v2.py chrome).
   Everything above is website/v2/v2.css unchanged; the rules below only fit it to Hello Elementor 3.5 and
   Elementor / Elementor Pro 4.3 as qcoders.com runs them. Paste the whole file into Site Settings >
   Custom CSS (it lands at the end of the kit's stylesheet, after Elementor's own CSS).
   ===================================================================================================== */

/* 1. The Theme Builder headers are 76px tall, 64px on phones (Elementor's mobile breakpoint, 767px), and
      sticky: the held parts of the v2 sections (process rail, spec sheet) stop just under them. */
.qc2 { --qc2-header: 76px; }
@media (max-width: 767px) { .qc2 { --qc2-header: 64px; } }
/* The front page keeps the dark header (template 29). As Elementor prints it, it is 88px tall (its "Message us"
   button takes the kit's 16px button padding inside the 18px container padding) and 76px on phones, where that
   button is hidden: measured in the replica with the live site's CSS (v2_replica.py). */
body.home .qc2 { --qc2-header: 88px; }
@media (max-width: 767px) { body.home .qc2 { --qc2-header: 76px; } }

/* 2. Elementor resets the margin of every ‹figure› inside a widget to 0 with a strong rule
      (.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content)
      figure, specificity 0-4-1). That beats the v2 rules that let a picture bleed off the page edge or land on
      another one (0-2-0 to 0-4-0), so in WordPress the bleeds and overlaps would close up. Below, every margin
      declaration of v2.css is repeated with one id added (:not(#qc2-guard), an id no element has): all of them
      rise above Elementor's reset together and keep their order among themselves. make_v2.py build adds the
      same guard for each fragment's own ‹style›, so no v2 margin rule is left behind at the old weight. */
.qc2 :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend):not(#qc2-guard) { margin: 0; }
.qc2 .qc2-display:not(#qc2-guard) { margin-left: -0.04em; }
.qc2 .qc2-pick legend:not(#qc2-guard) { margin-bottom: var(--qc2-s3); }
.qc2 .qc2-pick input:not(#qc2-guard) { margin: 0; }
.qc2 .qc2-wrap:not(#qc2-guard) { margin-inline: auto; }
.qc2 .qc2-stack > * + *:not(#qc2-guard) { margin-top: var(--qc2-flow, var(--qc2-s4)); }
.qc2 .qc2-stack > :is(.qc2-display, .qc2-h) + *:not(#qc2-guard) { margin-top: var(--qc2-s5); }
.qc2 .qc2-stack > * + :is(.qc2-actions, .qc2-pick, .qc2-facts):not(#qc2-guard) { margin-top: var(--qc2-s6); }
.qc2 .qc2-stack > * + :is(.qc2-h, .qc2-title):not(#qc2-guard) { margin-top: var(--qc2-s7); }
.qc2 .qc2-sr:not(#qc2-guard) { margin: -1px; }
.qc2 .qc2-facts dd:not(#qc2-guard) { margin: var(--qc2-s1) 0 0; }
.qc2 .qc2-pic:not(#qc2-guard) { margin: 0; }
.qc2 .qc2-pic figcaption:not(#qc2-guard), .qc2 .qc2-cap:not(#qc2-guard) { margin-top: var(--qc2-s3); }
@container qc2 (max-width: 63.99rem) { .qc2-plate .qc2-plate__pic:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-margin)); } }
@container qc2 (max-width: 63.99rem) { .qc2-plate .qc2-plate__screen:not(#qc2-guard) { margin: -34% 0 var(--qc2-s7); } }
@container qc2 (min-width: 64rem) { .qc2-plate .qc2-plate__pic:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-edge)); } }
@container qc2 (min-width: 64rem) { .qc2-plate .qc2-plate__screen:not(#qc2-guard) { margin-bottom: var(--qc2-s9); } }
@container qc2 (max-width: 63.99rem) { .qc2-scene .qc2-scene__pic:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-margin)); } }
@container qc2 (max-width: 63.99rem) { .qc2-scene .qc2-scene__screen:not(#qc2-guard) { margin-top: -34%; } }
@container qc2 (max-width: 63.99rem) { .qc2-scene .qc2-scene__screen.qc2-screen:not(#qc2-guard) { margin-top: -24%; } }
@container qc2 (min-width: 64rem) { .qc2-scene .qc2-scene__pic:not(#qc2-guard) { margin-left: calc(-1 * var(--qc2-edge)); } }
@container qc2 (min-width: 64rem) { .qc2-scene .qc2-scene__screen:not(#qc2-guard) { margin-bottom: var(--qc2-s9); } }
@container qc2 (min-width: 64rem) { .qc2-scene .qc2-scene__screen.qc2-screen:not(#qc2-guard) { margin-bottom: var(--qc2-s8); } }
@container qc2 (min-width: 64rem) { .qc2-scene--flip .qc2-scene__pic:not(#qc2-guard) { margin-left: 0; margin-right: calc(-1 * var(--qc2-edge)); } }
.qc2-ledger .qc2-ledger__list:not(#qc2-guard) { margin-top: var(--qc2-s8); }
@container qc2 (max-width: 63.99rem) { .qc2-ledger .qc2-ledger__row + .qc2-ledger__row:not(#qc2-guard) { margin-top: var(--qc2-s2); } }
@container qc2 (max-width: 63.99rem) { .qc2-ledger .qc2-ledger__row > a:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-s3)); } }
@container qc2 (min-width: 64rem) { .qc2-ledger .qc2-ledger__row > a:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-s4)); } }
.qc2-band .qc2-band__plate > * + *:not(#qc2-guard) { margin-top: var(--qc2-s4); }
.qc2-volt .qc2-volt__say:not(#qc2-guard) { margin-inline: auto; }
.qc2-volt .qc2-volt__more:not(#qc2-guard) { margin: var(--qc2-s6) auto 0; }
.qc2-volt .qc2-actions:not(#qc2-guard) { margin-top: var(--qc2-s6); }
@container qc2 (min-width: 64rem) { .qc2-volt .qc2-volt__frame:not(#qc2-guard) { margin-inline: auto; } }
.qc2-rail .qc2-rail__step > * + *:not(#qc2-guard) { margin-top: var(--qc2-s3); }
@container qc2 (max-width: 63.99rem) { .qc2-rail .qc2-rail__step > .qc2-rail__inline:not(#qc2-guard) { margin: 0 0 var(--qc2-s5); } }
@container qc2 (max-width: 63.99rem) { .qc2-rail .qc2-rail__frame:not(#qc2-guard) { margin: var(--qc2-s7) calc(-1 * var(--qc2-margin)) 0; } }
@container qc2 (max-width: 63.99rem) { .qc2-rail--screens .qc2-rail__frame:not(#qc2-guard) { margin-left: 0; } }
@container qc2 (max-width: 63.99rem) { .qc2-rail .qc2-rail__steps:not(#qc2-guard) { margin-top: var(--qc2-s8); } }
@container qc2 (min-width: 64rem) { .qc2-rail .qc2-rail__frame:not(#qc2-guard) { margin-left: calc(-1 * var(--qc2-edge)); } }
@container qc2 (max-width: 63.99rem) { .qc2-mosaic .qc2-mosaic__grid > :has(> .qc2-phone) + :has(> .qc2-phone):not(#qc2-guard) { margin-top: var(--qc2-s7); } }
@container qc2 (min-width: 64rem) { .qc2-mosaic .qc2-mosaic__grid > *:not(#qc2-guard) { margin-top: var(--qc2-drop, 0); } }
.qc2-strip .qc2-strip__track:not(#qc2-guard) { margin-top: var(--qc2-s8); }
.qc2-strip .qc2-strip__item .qc2-title:not(#qc2-guard) { margin-top: var(--qc2-s4); }
.qc2-strip .qc2-strip__item p:not(#qc2-guard) { margin-top: var(--qc2-s2); }
.qc2-strip .qc2-strip__go:not(#qc2-guard) { margin-top: var(--qc2-s3); }
.qc2-words .qc2-chip:not(#qc2-guard) { margin-inline: 0.08em; }
.qc2-words .qc2-words__after:not(#qc2-guard) { margin-top: var(--qc2-s7); }
@container qc2 (max-width: 63.99rem) { .qc2-stage .qc2-stage__screen:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-margin)); } }
@container qc2 (max-width: 63.99rem) { .qc2-stage .qc2-stage__phone:not(#qc2-guard) { margin: -30% 0 var(--qc2-s7) var(--qc2-s4); } }
@container qc2 (min-width: 64rem) { .qc2-stage .qc2-stage__screen:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-edge)); } }
@container qc2 (min-width: 64rem) { .qc2-stage .qc2-stage__phone:not(#qc2-guard) { margin-bottom: var(--qc2-s8); } }
@container qc2 (max-width: 63.99rem) { .qc2-two .qc2-two__b > .qc2-screen:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-margin)); } }
@container qc2 (min-width: 64rem) { .qc2-two .qc2-two__b > .qc2-screen:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-s8)); } }
.qc2-rows .qc2-rows__row > * + *:not(#qc2-guard) { margin-top: var(--qc2-s3); }
@container qc2 (max-width: 63.99rem) { .qc2-rows .qc2-rows__list:not(#qc2-guard) { margin-top: var(--qc2-s8); } }
@container qc2 (max-width: 63.99rem) { .qc2-rows .qc2-rows__crop:not(#qc2-guard) { margin-top: var(--qc2-s5); } }
@container qc2 (min-width: 64rem) { .qc2-rows .qc2-rows__row > .qc2-rows__crop:not(#qc2-guard) { margin: 0; } }
.qc2-line .qc2-line__note:not(#qc2-guard) { margin-top: 0.4em; }
.qc2-line .qc2-line__compose:not(#qc2-guard) { margin: 0 0.8em 1.8em; }
@container qc2 (max-width: 63.99rem) { .qc2-line .qc2-line__pic:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-margin)); } }
@container qc2 (min-width: 64rem) { .qc2-line .qc2-line__pic:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-edge)); } }
@container qc2 (min-width: 40rem) and (max-width: 63.99rem) { .qc2-plate .qc2-plate__screen:not(#qc2-guard), .qc2-scene .qc2-scene__screen:not(.qc2-screen):not(#qc2-guard) { margin-top: -22%; } }
@container qc2 (min-width: 40rem) and (max-width: 63.99rem) { .qc2-line .qc2-line__pic:not(#qc2-guard) { margin-inline: auto; } }

/* 3. The kit colours every ‹label› (Site Settings › Form Fields: #9AA3B2, for the old dark site). Inside a v2
      section a label takes the colour of its ground, like the rest of the text (the pick chips of the Open
      line; the contact form sets its own). */
.qc2 label { color: inherit; }

/* 4. Hello Elementor's reset sets every ‹figcaption› in italic at weight 400 (no italics on this site; captions
      on dark product fields take their ground's lighter weight), puts a 4px white box-shadow ring around every
      focused link, button and field (the v2 focus is the 3px outline alone, no glow), and gives every ‹button›
      the kit's button type (Readex 600 16px): inside a v2 section those go back to the v2 rules. */
.qc2 figcaption { font-style: normal; font-weight: inherit; }
.qc2 :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { box-shadow: none; }
.qc2 button { font: inherit; letter-spacing: inherit; }

/* 5. The light header (header-light.json): on the page's own outer margin (the --qc2-margin clamp), the
      current page at weight 500 (underlined in Ink by the menu's own pointer; in the phone menu by the rule
      below), a 44px pill for the menu toggle, and Volt 900 focus rings. */
body .elementor-location-header .e-con.qc-hdr--light { --padding-left: clamp(1rem, 0.4rem + 2vw, 2rem); --padding-right: clamp(1rem, 0.4rem + 2vw, 2rem); }
body .qc-hdr--light .elementor-nav-menu--main .elementor-item.elementor-item-active { font-weight: 500; }
body .qc-hdr--light .elementor-menu-toggle { width: 44px; height: 44px; padding: 0; }
body .qc-hdr--light :is(a, .elementor-menu-toggle):focus-visible { outline: 3px solid #3F5500; outline-offset: 3px; }
body .qc-hdr--light .elementor-nav-menu--dropdown a:focus-visible { outline-offset: -3px; }
/* in the phone menu the current page is underlined the same way, on the panel's Stone (hover steps to Paper) */
body .qc-hdr--light .elementor-nav-menu--dropdown a.elementor-item-active { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }


/* ===== v2-dark.css (website/v2/_dark) ===== */
/* =====================================================================================================
   Qcoders v2, dark: an override for v2.css that turns every light ground dark
   -----------------------------------------------------------------------------------------------------
   Why: the founder saw the light v2 pages and said the dark site was nicer. He loves the dark Blueprint
   hero and the dark animated showcase. So the grounds go back to Ink, but everything v2 fixed stays:
   the compositions, the photographs, our product screens, the one Volt field, the product-colour
   fields, the 45-degree cut, no card grids, no hairlines, no glows (ART-DIRECTION.md section 11).

   Load order: AFTER v2.css and after every page's own CSS (Elementor > Custom Code, "Body End", after
   v2.css). It does not rely on order, though: every rule here is at least one class heavier than the
   v2.css or page rule it changes, so it also beats the <style> each section fragment carries. No
   !important.

   The site around the fragments: set the Elementor kit's body background to Ink (#0A0E17), so no
   Paper shows between widgets or while the page loads, and use the dark Theme Builder header on every
   page (Ink, logo-horizontal-on-dark, Paper menu, Volt pill), not the light interior variant.

   Contents
     1. Dark tokens
     2. Grounds: Paper -> Ink, Stone -> one step up; the close takes the step, the footer stays Ink
     3. Type weight on dark
     4. Pictures: photos get a slight evening grade; product screens stay light; case crops capped
     5. Actions: pick chips, the strip's buttons
     6. Page parts that named Paper, Stone or Ink directly (FAQ, Contact opener, Contact form)
     7. The home hero and showcase: the page's margin, one button shape
     8. Code labels: the small "// label" above each section's heading
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Dark tokens. Two grounds a tone step apart, so neighbouring sections still alternate, and one
      raised step on each for surfaces (row hover, open question, pick chip, a picture's frame while it
      loads). All from the brand's cool Ink scale.
   ----------------------------------------------------------------------------------------------------- */
.qc2 {
  --qc2d-ground: #0A0E17;        /* was Paper: Ink itself, the hero's ground                          */
  --qc2d-step: #131A27;          /* was Stone: one tone step up (between Ink 900 and Ink 800)         */
  --qc2d-raise: #161D2C;         /* surface on Ink (Ink 800)                                          */
  --qc2d-raise-step: #1D2535;    /* surface on the step                                               */
  --qc2d-fill: #2F3A4F;          /* Ink 600: a filled control at rest (pick chip, FAQ sign): 1.7:1 on
                                    Ink, 1.5:1 on the step, Paper text on it 10.5:1. Filled, never
                                    outlined: a row of outlined pills is the old "boxes" look          */
  --qc2d-line: #6B7588;          /* Ink 400: the bottom edge of a form field, 3.7:1 on the step       */
  --qc2d-muted: #9AA3B2;         /* Ink 300: secondary text, 7.6:1 on Ink, 6.9:1 on the step          */
  --qc2d-photo: brightness(0.93) saturate(1.04);
}


/* -----------------------------------------------------------------------------------------------------
   2. Grounds. Paper and Stone keep their roles (Paper the page, Stone the alternate) on dark values;
      every ground token follows, so all of v2.css (links, buttons, focus, the // comment, chips,
      surfaces, muted text) turns with them. A product field, the Volt field, travertine and orange
      keep their own values and text colours.
   ----------------------------------------------------------------------------------------------------- */
:is(.qc2.qc2--paper, .qc2 .qc2--paper, .qc2.qc2--stone, .qc2 .qc2--stone) {
  --qc2-fg: var(--qc2-paper);
  --qc2-muted: var(--qc2d-muted);
  --qc2-link: var(--qc2-volt);
  --qc2-focus: var(--qc2-volt);
  --qc2-comment: var(--qc2-volt);
  --qc2-btn-bg: var(--qc2-volt);
  --qc2-btn-fg: var(--qc2-ink);
  --qc2-btn-hover: var(--qc2-volt-400);
  --qc2-pick-on-bg: var(--qc2-volt);
  --qc2-pick-on-fg: var(--qc2-ink);
  color-scheme: dark;
}
:is(.qc2.qc2--paper, .qc2 .qc2--paper) { --qc2-bg: var(--qc2d-ground); --qc2-surface: var(--qc2d-raise); }
:is(.qc2.qc2--stone, .qc2 .qc2--stone) { --qc2-bg: var(--qc2d-step);   --qc2-surface: var(--qc2d-raise-step); }
/* The close. On the light site the Ink Open line and the Ink footer ended every page on one dark scene. On
   a dark site the Ink close would melt into the Ink section above it and the footer under it, so the
   Open line takes the step: the page ends on its own ground, then the footer closes on Ink. (When it
   opens Contact it is a Paper section, so it is Ink there.) The band's plate stays Ink. */
.qc2.qc2--ink.qc2-line { --qc2-bg: var(--qc2d-step); --qc2-surface: var(--qc2d-raise-step); }
/* The band has no ground class, so it kept v2's light defaults under its Ink: a Stone frame showed for a
   whole screen while its photo loaded, and links and focus were Volt 900 (2.2:1 on the plate). */
.qc2.qc2.qc2-band {
  --qc2-surface: var(--qc2d-raise); --qc2-muted: var(--qc2d-muted);
  --qc2-link: var(--qc2-volt); --qc2-focus: var(--qc2-volt); --qc2-comment: var(--qc2-volt);
  color-scheme: dark;
}


/* -----------------------------------------------------------------------------------------------------
   3. Type on dark: light type reads heavier, so headlines take one weight step down (500). Running text
      stays 400, the weight of the hero's intro right above the first v2 section: at 300 in Ink 300 the
      v2 text looked thinner than the hero's. This covers every dark ground, the dark product fields
      included (v2.css sets 300 there for the light site), so the whole dark site reads at one weight.
      Captions and small print never go under 400: 14px at 300 in Ink 300 looked hairline.
   ----------------------------------------------------------------------------------------------------- */
.qc2:is(.qc2--paper, .qc2--stone) :is(.qc2-display, .qc2-h),
.qc2.qc2-ledger:is(.qc2--paper, .qc2--stone) .qc2-ledger__name { font-weight: 500; }
:is(.qc2.qc2--ink, .qc2 .qc2--ink, .qc2.qc2--f-stock, .qc2 .qc2--f-stock, .qc2.qc2--f-book, .qc2 .qc2--f-book,
    .qc2.qc2--f-docs, .qc2 .qc2--f-docs, .qc2.qc2-band) { --qc2-w-body: 400; }
:is(.qc2.qc2--paper, .qc2 .qc2--paper, .qc2.qc2--stone, .qc2 .qc2--stone) { --qc2-w-body: 400; }
:is(.qc2.qc2--paper, .qc2 .qc2--paper, .qc2.qc2--stone, .qc2 .qc2--stone, .qc2.qc2--ink, .qc2 .qc2--ink)
  :is(.qc2-small, .qc2-cap, figcaption) { font-weight: 400; }


/* -----------------------------------------------------------------------------------------------------
   4. Pictures. The photo set was graded for Paper ("Paper daylight"): its white walls glare on Ink.
      Photographs take a slight evening grade (a touch less exposure, the same warmth); product screens
      are left exactly as they are, light, as in the showcase. Photos are found by their file: the set in
      photos/ and the page img/ folders (qc-photo-* in the media library); screens live in screens/
      (qc-work-*) and are never matched.
   ----------------------------------------------------------------------------------------------------- */
/* While a screen loads its frame is the ground's raised step, not Paper: no light boxes flash up on the dark
   page before the screens arrive (a screen always covers its frame, object-fit: cover). Crops that sit on
   Paper on purpose (.qc2-zoom, tile shots) keep it. */
.qc2.qc2 :is(.qc2-screen, .qc2-phone):not(.qc2-who__mini) { background: var(--qc2-surface); }
.qc2 .qc2-pic img:is([src*="photos/"], [src*="/img/"], [src^="img/"], [src*="qc-photo-"]),
.qc2 .qc2-chip img:is([src*="photos/"], [src*="/img/"], [src^="img/"], [src*="qc-photo-"]) {
  filter: var(--qc2d-photo);
}
/* The four brightest photos as displayed (7 to 12% near-white: white walls meeting Ink) take a little
   more: the home Scene and Services ledger shop owner, the Contact form photo, the stockroom title photo
   (About, inventory case) and the Services band / FAQ desk. */
.qc2.qc2 :is(.qc2-pic, .qc2-chip) img:is([src*="shop-owner-tablet-counter"], [src*="owner-laptop-kitchen-table"],
  [src*="stockroom-box-phone-check"], [src*="hands-laptop-pipeline"]) {
  filter: brightness(0.86) saturate(1.04);
}

/* Case pages, "What we built": ART-DIRECTION section 9 gives this spec sheet 2 to 3 screen crops; the
   case data carries 3 to 5, and on dark they read as a stack of white tiles down the right. Until the
   case data is cut, only the first three rows keep their crop (2 or 3 per case), and a row whose crop is
   hidden runs full width like the rows that never had one. */
.qc2.qc2.qc2-case-rows .qc2-rows__list > .qc2-rows__row:nth-child(n+4) > .qc2-rows__crop { display: none; }
.qc2.qc2.qc2-case-rows .qc2-rows__list > .qc2-rows__row:nth-child(n+4):has(> .qc2-rows__crop) { display: block; }


/* -----------------------------------------------------------------------------------------------------
   5. Actions
   ----------------------------------------------------------------------------------------------------- */
/* Pick chips (the Open line composer, the Work filter): filled Ink 600 pills with Paper text, no outline;
   the chosen one is Volt with Ink text. Under the pointer an unchosen chip takes a Paper edge. Text is 400,
   the chosen one 500: at the inherited 300, Ink on Volt looked hairline. */
.qc2.qc2 .qc2-pick span { font-weight: 400; }
.qc2.qc2 .qc2-pick input:checked + span { font-weight: 500; }
.qc2.qc2 .qc2-pick input:not(:checked) + span { background: var(--qc2d-fill); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .qc2.qc2 .qc2-pick label:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--qc2-paper); }
}

/* Home, Workday strip: the two scroll buttons were Ink pills on Paper; on dark they are Paper pills with
   Ink chevrons, Volt under the pointer or keyboard focus (not after a mouse click, so the arrow does not
   stay Volt once the pointer leaves). */
.qc2.qc2.qch-strip .qch-strip__btn { background: var(--qc2-paper); color: var(--qc2-ink); }
.qc2.qc2.qch-strip .qch-strip__btn:is(:hover, :focus-visible) { background: var(--qc2-volt); color: var(--qc2-ink); }
.qc2.qc2.qch-strip .qch-strip__btn:disabled { background: var(--qc2-paper); opacity: 0.24; }


/* -----------------------------------------------------------------------------------------------------
   6. Page parts that named Paper, Stone or Ink directly
   ----------------------------------------------------------------------------------------------------- */
/* FAQ: a hovered or open question steps one tone up; the round sign is a filled Ink 600 disc with a
   Paper cross at rest (no ring), Paper with an Ink cross under the pointer, Volt with an Ink cross when
   open (the light page: Paper, then Ink with Volt). */
.qc2.qc2.qc2-faq .qc2-faq__sign { background: var(--qc2d-fill); color: var(--qc2-paper); box-shadow: none; }
.qc2.qc2.qc2-faq .qc2-faq__q[open] { background: var(--qc2-surface); }
.qc2.qc2.qc2-faq .qc2-faq__q[open] .qc2-faq__sign { background: var(--qc2-volt); color: var(--qc2-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .qc2.qc2.qc2-faq .qc2-faq__q:not([open]):hover { background: var(--qc2-surface); }
  .qc2.qc2.qc2-faq .qc2-faq__q:not([open]):hover .qc2-faq__sign { background: var(--qc2-paper); color: var(--qc2-ink); box-shadow: none; }
}

/* Contact, the opener: its chips were set on Ink 200 for Paper; on dark they follow section 5. */
.qc2.qc2.qc2-line--open .qc2-pick input:not(:checked) + span { background: var(--qc2d-fill); }

/* Contact, the form (Elementor Pro Form in .qc2-form-slot). Fields: a square well one step DOWN from the
   section (Ink, set in the step), Paper text, an Ink 400 foot (3.7:1) that turns Volt with the 3px Volt
   ring on focus; labels in Ink 300; the send button a Volt pill. Starts from #form like the page CSS
   (whose id rules no class chain can beat), one class heavier. */
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-field-label { color: var(--qc2d-muted); }
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-field-textual {
  background: var(--qc2d-ground); color: var(--qc2-paper); box-shadow: inset 0 -2px 0 var(--qc2d-line); color-scheme: dark;
}
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-field-textual::placeholder { color: var(--qc2d-muted); }
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-field:focus-visible,
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-field-textual:focus-visible {
  outline: 3px solid var(--qc2-volt); outline-offset: 2px; box-shadow: inset 0 -2px 0 var(--qc2-volt);
}
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-select-wrapper::after { border-color: var(--qc2-paper); }
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form select.elementor-field-textual option { background: var(--qc2d-raise); color: var(--qc2-paper); }
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-button { background: var(--qc2-volt); color: var(--qc2-ink); }
#form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-button:focus-visible { outline: 3px solid var(--qc2-volt); }
@media (hover: hover) and (pointer: fine) {
  #form.qc2.qc2-two--form .qc2-form-slot .elementor-form .elementor-button:hover { background: var(--qc2-volt-400); color: var(--qc2-ink); }
}
.qc2.qc2.qc2-two--form .qc2-form-slot .elementor-message { color: var(--qc2-paper); }
.qc2.qc2.qc2-two--form .qc2-form-slot .elementor-message-success { color: var(--qc2-volt); }
.qc2.qc2.qc2-two--form .qc2-form-slot .elementor-message-danger { color: #FF8A7A; }


/* -----------------------------------------------------------------------------------------------------
   7. The home hero (.qc-bp, website/home/hero-blueprint.html) and showcase (.qc-showcase,
      website/showcase/showcase.final.html). Both took their margin from Elementor's content width
      (--container-max-width, 1140px by default), so their copy started at x=150 at 1440 while the header
      logo and every v2 section start at the page margin (x=32). Here they read the same frame as v2.css
      and the header: the outer margin (16 -> 32px), and past 1600px of content the frame centres.
   ----------------------------------------------------------------------------------------------------- */
.qc-bp.qc-bp { --gutter: max(clamp(1rem, 0.4rem + 2vw, 2rem), (100% - 100rem) / 2); }
.qc-showcase.qc-showcase { --qcsc-gut: max(clamp(1rem, 0.4rem + 2vw, 2rem), (100% - 100rem) / 2); }
/* One button shape on the site: what you press is a pill (ART-DIRECTION section 4). The hero CTA had a
   10px corner; its fill and its drawn outline take the radius from the button (border-radius: inherit). */
.qc-bp.qc-bp a.qc-bp-btn { border-radius: 999px; }


/* -----------------------------------------------------------------------------------------------------
   8. Code labels. FOUNDER DECISION (25 October 2026; it overrides ART-DIRECTION.md section 11 and the
      tells registry on this one point): the small code label above a section's heading is back, set
      the way the home hero ("// Hello, World", "// What we build") and the showcase ("// Selected work")
      set it: JetBrains Mono 500, 14px (13px on phones), Volt on Ink, the "//" hidden from screen readers.
        <p class="qc2-label"><span aria-hidden="true">// </span>Services</p>  then the h1 or h2
      One per section, right above its main heading: the h1 of an opener, the h2 of a section, or the
      statement that stands in for it (Volt field, Words). Never above an h3, never two in a section,
      sentence case, one to three words that say what the section is, no numbering. Where a grid or a
      flex parent places the heading (Opposite ends, the rail's held side, the Volt frame, the case
      opener), the label and the heading share one <div class="qc2-head">, so the layout places them as one.
      Colour: the ground's // token (section 2 and v2.css section 2): Volt on Ink, the step, the band and
      the dark product fields (CRM blue 4.8:1, the lowest); Ink on Volt and on the delivery orange (6.4:1);
      Volt 900 on the store's travertine (6.5:1).
   ----------------------------------------------------------------------------------------------------- */
.qc2.qc2 .qc2-label {
  margin: 0; max-width: none;
  font-family: var(--qc2-mono); font-size: 0.875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em;
  color: var(--qc2-comment); text-transform: none;
}
/* label to heading: 12px on phones and tablets, 16px from 64rem (the showcase sets 16px at 1440) */
.qc2.qc2 .qc2-label + * { margin-top: var(--qc2-s3); }
@container qc2 (min-width: 64rem) { .qc2.qc2 .qc2-label + * { margin-top: var(--qc2-s4); } }
@container qc2 (max-width: 47.99rem) { .qc2.qc2 .qc2-label { font-size: 0.8125rem; } }
.qc2 .qc2-head { min-width: 0; }
/* spec-sheet rows (qc2-rows--hold): from 64rem the rows column starts level with the left column, so the
   first row's h3 would sit beside the label; drop the list by the label's line plus its gap so that h3
   lines up with the heading instead */
@container qc2 (min-width: 64rem) {
  .qc2.qc2-rows--hold .qc2-rows__head:has(> .qc2-label) + .qc2-rows__list { padding-top: calc(0.875rem * 1.4 + var(--qc2-s4)); }
}

/* Qcoders live site: the site stays dark, so every page uses the dark Theme Builder header (76px, 64px on phones). */
.qc2 { --qc2-header: 76px; }
@media (max-width: 767px) { .qc2 { --qc2-header: 64px; } }


/* ===== reveal.css (website/v2/_dark) ===== */
/* =====================================================================================================
   Qcoders v2 dark: picture reveal ("render-in"). Override layer: load AFTER v2.css and v2-dark.css.
   -----------------------------------------------------------------------------------------------------
   Replaces the 45-degree cut (.qc2-cut in v2.css section 7) on the same elements, with the language of
   the home showcase: a picture first stands as a wireframe (dark plate, dashed outline, corner ticks, an
   "X" for a photo or a header + sidebar skeleton for a product screen), then a 2px Volt scan line wipes
   the real picture in, left to right, while the frame rises 28px into place. Product screens and tiles
   also settle from a slight backward tilt. Pictures that are links answer the hand with one quiet Volt
   scan pass over the existing slow zoom; screens lift 3px.

   How it runs: reveal.js adds .qc-rv to <html> (only with IntersectionObserver, no reduced motion and
   outside the Elementor editor) and adds .is-in to each .qc2-cut as it comes into view, then .is-done
   once it has played. Every hidden state below needs .qc-rv, so with no JS, a JS error, print, or
   reduced motion every picture is simply there. The reveal is time-based, not scroll-linked: it always
   plays to the end, so nothing is left half-open when the scroll stops.
   Only opacity, transform and clip-path animate; nothing changes layout (no CLS).
   ===================================================================================================== */

/* 1. Retire the 45-degree cut everywhere, whatever page CSS tuned its range. ------------------------- */
.qc2.qc2 .qc2-cut { animation: none; -webkit-mask-image: none; mask-image: none; }

/* The one .qc2-cut that is not already a clipped, positioned frame: the case rows' screen crop. */
.qc2 .qc2-rows__crop.qc2-cut { position: relative; overflow: clip; }

.qc2 .qc2-cut {
  /* the wireframe is drawn in the picture's own ground: a dark plate on the dark sections, travertine on the
     store section, the product's field colour on a product tile */
  --qc-rv-cover: color-mix(in srgb, var(--qc2-fg, #F6F5F0) 5%, var(--qc2-bg, #0A0E17));
  --qc-rv-wire: color-mix(in srgb, var(--qc2-fg, #F6F5F0) 32%, transparent);   /* the showcase's dashed outline */
  --qc-rv-faint: color-mix(in srgb, var(--qc2-fg, #F6F5F0) 11%, transparent);
  --qc-rv-volt: var(--qc2-volt, #C8F53B);
  --qc-rv-wipe: cubic-bezier(0.65, 0, 0.35, 1);    /* the scan: a measured in-out pass */
  --qc-rv-settle: cubic-bezier(0.16, 1, 0.3, 1);   /* the frame: long, soft landing */
  --qc-rv-late: 0ms;
}
/* Volt does not carry on the two light product fields: the showcase's Volt 700 on travertine, ink on orange */
:is(.qc2--f-store, .qc2 .qc2--f-store) .qc2-cut, .qc2 .qc2-cut.qc2--f-store { --qc-rv-volt: var(--qc2-volt-700, #6E9400); }
:is(.qc2--f-route, .qc2 .qc2--f-route) .qc2-cut, .qc2 .qc2-cut.qc2--f-route { --qc-rv-volt: var(--qc2-ink, #0A0E17); }
/* a screen docked on a photo renders one beat after it */
.qc2 .qc2-cut--late { --qc-rv-late: 240ms; }


/* 2. Before: hidden only when the script is running. ---------------------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .qc-rv .qc2 .qc2-cut:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }

  /* product screens, phones and product tiles lean back a little and settle flat */
  .qc-rv .qc2 :is(.qc2-screen, .qc2-phone, .qc2-tile, .qc2-tile__shot, .qch-tile, .qc2-work__plate, .qc2-rows__crop).qc2-cut {
    transform-origin: 50% 100%;
  }
  .qc-rv .qc2 :is(.qc2-screen, .qc2-phone, .qc2-tile, .qc2-tile__shot, .qch-tile, .qc2-work__plate, .qc2-rows__crop).qc2-cut:not(.is-in) {
    transform: perspective(1400px) translate3d(0, 36px, 0) rotateX(7deg) scale(0.985);
  }


  /* 3. During: the frame rises, the wireframe holds a beat, the scan line wipes the picture in. ---- */
  .qc-rv .qc2 .qc2-cut.is-in {
    --qc-rv-at: calc(var(--qc-rv-d, 0ms) + var(--qc-rv-late));
    transition:
      opacity 520ms cubic-bezier(0.33, 1, 0.68, 1) var(--qc-rv-at),
      transform 1250ms var(--qc-rv-settle) var(--qc-rv-at);
  }
  .qc-rv .qc2 .qc2-cut.is-in:not(.is-done)::before,
  .qc-rv .qc2 .qc2-cut.is-in:not(.is-done)::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    border-radius: inherit;
  }
  /* the wireframe plate: dashed outline, Volt corner ticks, the photo placeholder's X */
  .qc-rv .qc2 .qc2-cut.is-in:not(.is-done)::before {
    content: "// photo" / "";
    box-sizing: border-box; padding: 12px 14px;
    font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.02em;
    color: var(--qc-rv-wire); text-align: left;
    background-color: var(--qc-rv-cover);
    border: 1px dashed var(--qc-rv-wire);
    background-image:
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(to top right, transparent calc(50% - 0.6px), var(--qc-rv-faint) 50%, transparent calc(50% + 0.6px)),
      linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--qc-rv-faint) 50%, transparent calc(50% + 0.6px));
    background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 0, 0 0;
    background-origin: border-box; background-clip: border-box;
    background-repeat: no-repeat;
    animation: qcrv-wipe 820ms var(--qc-rv-wipe) calc(var(--qc-rv-at) + 300ms) both;
  }
  /* a product screen's wireframe is a UI skeleton instead: header bar and sidebar */
  .qc-rv .qc2 :is(.qc2-screen, .qc2-tile, .qc2-tile__shot, .qch-tile, .qc2-work__plate, .qc2-rows__crop).qc2-cut.is-in:not(.is-done)::before {
    content: "// screen" / "";
    background-image:
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-faint), var(--qc-rv-faint)),
      linear-gradient(var(--qc-rv-faint), var(--qc-rv-faint));
    background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 100% 1px, 1px 100%;
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 13%, 19% 0;
  }
  .qc-rv .qc2 .qc2-phone.qc2-cut.is-in:not(.is-done)::before {
    content: "// app" / "";
    background-image:
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)), linear-gradient(var(--qc-rv-volt), var(--qc-rv-volt)),
      linear-gradient(var(--qc-rv-faint), var(--qc-rv-faint)),
      linear-gradient(var(--qc-rv-faint), var(--qc-rv-faint));
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 1px, 100% 1px;
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 9%, 0 90%;
    padding: 9% 12px 0;
  }
  /* the scan line: 2px of Volt riding the wipe's edge, then gone */
  .qc-rv .qc2 .qc2-cut.is-in:not(.is-done)::after {
    background: linear-gradient(to right, transparent calc(100% - 2px), var(--qc-rv-volt) calc(100% - 2px));
    border-radius: 0;
    transform: translate3d(-100%, 0, 0);
    animation:
      qcrv-scan 820ms var(--qc-rv-wipe) calc(var(--qc-rv-at) + 300ms) both,
      qcrv-out 200ms linear calc(var(--qc-rv-at) + 1080ms) both;
  }

  /* 4. After: a picture that is a link answers the hand. ------------------------------------------ */
  .qc-rv .qc2 .qc2-cut.is-in.is-done { transition: transform 700ms var(--qc2-ease-soft, ease-out); }
  .qc-rv .qc2 .qc2-cut.is-in.is-now { transition: none; }
}

@keyframes qcrv-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes qcrv-scan { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes qcrv-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes qcrv-pass {
  from { transform: translate3d(-100%, 0, 0); opacity: 0.9; }
  85%  { opacity: 0.9; }
  to   { transform: translate3d(0, 0, 0); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* one quiet scan pass across a linked picture, over v2.css's slow 1.03 zoom */
  .qc2 a:hover .qc2-cut:not(.is-in:not(.is-done))::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(to right, transparent calc(100% - 2px), var(--qc-rv-volt) calc(100% - 2px));
    animation: qcrv-pass 900ms var(--qc-rv-wipe) both;
  }
  /* a linked product screen lifts a hair, like a device picked up */
  .qc2 a:hover :is(.qc2-screen, .qc2-phone, .qc2-tile, .qch-tile, .qc2-work__plate).qc2-cut:not(.is-in:not(.is-done)) {
    transform: translate3d(0, -3px, 0);
  }
  .qc2 a .qc2-cut { transition: transform 700ms var(--qc2-ease-soft, ease-out); }
}

/* Phone contact form (the native Elementor form between the two phone contact widgets) */
.qcm-form .elementor-field-group{margin-bottom:14px}
.qcm-form .elementor-field-label{color:#A9AEB8;font:500 14px/1.3 "Readex Pro",sans-serif;margin-bottom:6px}
.qcm-form .elementor-field-group .elementor-field-textual,.qcm-form .elementor-field-group select{background:#131A27!important;color:#F6F5F0!important;border:0!important;border-bottom:2px solid #4A5568!important;border-radius:0!important;padding:14px!important;font:400 16px/1.4 "Readex Pro",sans-serif!important}
.qcm-form .elementor-field-textual::placeholder{color:#7D8597;opacity:1}
.qcm-form .elementor-field-textual:focus,.qcm-form select:focus{outline:3px solid #C8F53B!important;outline-offset:2px}
.qcm-form .elementor-select-wrapper .select-caret-down-wrapper{color:#F6F5F0}
.qcm-form .elementor-button{background:#C8F53B!important;color:#0A0E17!important;border-radius:999px!important;padding:16px 28px!important;font:600 16px "Readex Pro",sans-serif!important;width:100%}
.qcm-form .elementor-button:focus-visible{outline:3px solid #F6F5F0;outline-offset:3px}/* End custom CSS */