/* ==========================================================================
   Taq Ventures — drawing-set system
   Loaded LAST on every public page, after styles.css and the page's own
   stylesheet, so it is the layer that wins. Tokens live in styles.css :root.

   The brand is built on the logo — a heavy black taq closed by a rounded X —
   and on the documents clients trust every day: drawing sets, spec sheets,
   title blocks. Black, white, one blue, heavy type, straight lines.

   Rules this file enforces site-wide:
     · square everything (the only curves are in the logo)
     · no shadows, no gradients as colour — depth is bg → surface → surface-2
     · structure from 2px ink rules, not boxes
     · one hue: the X blue, for links, focus, hover, active stamps, the grader
     · motion is engineered: 120 / 180 / 420ms on one curve, nothing autoplays

   The Taq XX artwork (assets/quotes/xx.png) is cropped — not redrawn — into
   alpha tiles in assets/xx/ by scripts/build-xx-tiles.mjs, and used as a CSS
   mask so it can be set in ink, paper or inverse on any ground. It stands in
   wherever site photography has not been shot yet (.frame-xx) and stands as a
   single large feature mark on each page band. The closing slab carries the
   tx mark, oversized and cut off by the slab's corner.
   ========================================================================== */

/* ---- 0. Ground rules ---------------------------------------------------- */
*, *::before, *::after{
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.bg-fog{ display: none; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
}
::selection{ background: var(--ink); color: var(--inverse-ink); }

.wrap{ max-width: calc(var(--wrap-max) + 2 * var(--space-32)); padding-left: var(--space-32); padding-right: var(--space-32); }
@media (max-width: 640px){
  .wrap{ padding-left: var(--space-16); padding-right: var(--space-16); }
}

/* ---- 1. Type ------------------------------------------------------------ */
h1, h2, h3, .display{
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h1{ font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -0.035em; }
h2{ font-size: clamp(30px, 3.4vw, 40px); }
h3{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
/* The heavy + light pair, echoing taq × ventures. Once per page. */
.display-light{ display: block; font-weight: 300; letter-spacing: -0.02em; }

/* Drawing-set labels: title-block and form labels, eyebrows, sheet numbers. */
.eyebrow, .hero-tag, .about-eyebrow, .contact-eyebrow, .va-eyebrow, .pg-eyebrow,
.home-about-eyebrow, .bundle-eyebrow, .grader-promo-eyebrow, .grader-promo-points-label,
.next-step-label, .scope-label, .case-num, .moves-num, .fo-tag, .pillar-flag{
  font-family: var(--f-sans);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
:is(.eyebrow, .hero-tag, .about-eyebrow, .contact-eyebrow, .va-eyebrow, .pg-eyebrow,
    .home-about-eyebrow, .bundle-eyebrow, .grader-promo-eyebrow, .fo-tag) .rule{
  width: 24px;
  height: 2px;
  background: var(--ink) !important;
}
.sheet{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---- 2. Links and focus ------------------------------------------------- */
/* One underline for every text link on the site: 1px, sitting 3px under the
   baseline. Components that underline their own links (legal copy, the grader
   promo, footer meta) inherit this rather than each picking an offset. The
   active nav item keeps its heavier 2px / 6px mark on purpose — it is a
   "you are here" indicator, not a link style. */
a{ text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Prose links only. Row and card links (the homepage pillar service rows, the
   sitemap cards, the client logo tiles) sit inside list items but carry their
   own hairline or border as the affordance; underlining them as well drew a
   second line under the text, a third under the row number and a fourth under
   the arrow, each at a different height. */
:where(p, li, dd, td, figcaption, .body, .dek, .ongoing) a:not(.btn, .pillar-service, .wf-card, .client-logo){
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease);
}
:where(p, li, dd, td, figcaption, .body, .dek, .ongoing) a:not(.btn, .pillar-service, .wf-card, .client-logo):hover{
  color: var(--accent);
  text-decoration-thickness: 2px;
}
:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- 3. Buttons --------------------------------------------------------
   Ink with a trailing →. On hover they invert to paper fill and ink text —
   the 2px ink border is always there, so the inverted button never melts into
   a white page — and the arrow slides 3px. Outline (.btn-grey) is secondary;
   accent is only for tools like the grader. */
.btn, summary.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  padding: 14px 22px;
  color: var(--inverse-ink);
  background: var(--ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::after{
  content: "\2192";
  display: inline-block;
  font-weight: 400;
  transition: transform var(--dur) var(--ease);
}
.btn:hover, .btn-solid:hover{
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
}
.btn:hover::after{ transform: translateX(3px); }
.btn-solid{ background: var(--ink); color: var(--inverse-ink); font-weight: 600; }
/* Secondary: outline, no arrow — it is a choice, not the next step. */
.btn-grey{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-grey::after{ content: none; }
.btn-grey:hover{ background: var(--hover); color: var(--ink); border-color: var(--ink); }
/* Tool buttons — the grader — are the one place a button takes the blue. */
.grader-promo-form button, #promo-submit, .pg-form button[type="submit"], .pg-tool button[type="submit"]{
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.grader-promo-form button:hover, #promo-submit:hover, .pg-form button[type="submit"]:hover, .pg-tool button[type="submit"]:hover{
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce){
  .btn, .btn::after{ transition: none; }
  .btn:hover::after{ transform: none; }
}

/* ---- 4. Fields -------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select{
  border: 1px solid var(--rule-strong) !important;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
}
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus{
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
  border-color: var(--ink) !important;
}
label > span:first-child, .grader-promo-label, .bundle-field > span{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- 5. Header and navigation ------------------------------------------ */
header{
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
}
.nav-link, .nav-dropdown-toggle{
  color: var(--ink);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.nav-link:hover, .nav-dropdown-toggle:hover{ color: var(--accent); }
.nav-link.active, .nav-dropdown-toggle.active{
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-link-highlight{ color: var(--ink); font-weight: 600; }
.nav-link-highlight::after{
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.nav-link-highlight:hover{ color: var(--accent); }
.nav-link-highlight:hover::after{ transform: translateX(3px); }
.nav-dropdown-menu{
  background: var(--bg);
  border: 2px solid var(--ink);
}
.nav-dropdown-link:hover{ background: var(--hover); color: var(--accent); }
.nav-dropdown-link.active{ background: var(--surface); color: var(--ink); }
a.nav-dropdown-group-label:hover, .nav-dropdown-group.is-current .nav-dropdown-group-label{ color: var(--accent); }
a.nav-dropdown-group-label:hover::after, .nav-dropdown-group-label::after{ background: var(--ink); }
/* Pillars run in their numbered order, 01 Sales then 02 Marketing, the same
   as the homepage and the footer (they used to run Media → Marketing → Sales,
   from the three-pillar days). The markup already lists Sales first. */
.nav-dropdown-all{ order: 0; }
.nav-dropdown-group:has(#solutions-group-sales){ order: 1; }
.nav-dropdown-group:has(#solutions-group-marketing){ order: 2; }
/* Five services a pillar since Nov 4: on desktop the menu is two columns,
   Sales beside Marketing, so no label wraps and the list stays short. */
@media (min-width: 961px){
  .nav-dropdown-menu{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    column-gap: var(--space-32);
    align-items: start;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .nav-dropdown-menu .nav-dropdown-all{ grid-column: 1 / -1; }
  .nav-dropdown-menu .nav-dropdown-group + .nav-dropdown-group{ margin-top: 0; padding-top: 0; border-top: 0; }
  .nav-dropdown-menu .nav-dropdown-link{ white-space: nowrap; }
}

/* Stable pillar and service numbers — the same on the site, in proposals and
   in quotes. Keyed on the href so every list of services picks them up. */
:is(.nav-dropdown-group-label, .pillar-service, .nf-links a, .solutions-list a, .related a)[href]::before{
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-right: 10px;
}
/* Two pillars since Nov 3, 2026: Sales 01, Marketing 02 (Media folded into
   Marketing, and /media now 301s to /marketing). */
:is(.nav-dropdown-group-label, .pillar-service, .nf-links a, .solutions-list a, .related a)[href="sales"]::before{ content: "01"; }
:is(.nav-dropdown-group-label, .pillar-service, .nf-links a, .solutions-list a, .related a)[href="marketing"]::before{ content: "02"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="sales-business-development"]::before{ content: "01.1"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="sales-training"]::before{ content: "01.2"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="crm-setup"]::before{ content: "01.3"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="trade-show-sales"]::before{ content: "01.4"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="sales-collateral"]::before{ content: "01.5"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="brand-strategy"]::before{ content: "02.1"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="website"]::before{ content: "02.2"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="media-management"]::before{ content: "02.3"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="local-seo"]::before{ content: "02.4"; }
:is(.nav-dropdown-link, .pillar-service, .nf-links a)[href="project-execution"]::before{ content: "02.5"; }
:is(.nav-dropdown-link, .nf-links a):is([href="media-management"], [href="project-execution"], [href="brand-strategy"], [href="website"], [href="local-seo"], [href="sales-business-development"], [href="sales-training"], [href="crm-setup"], [href="trade-show-sales"], [href="sales-collateral"])::before{
  display: inline-block;
  min-width: 34px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
@media (max-width: 960px){
  .nav-link-highlight{
    color: var(--inverse-ink);
    background: var(--ink);
    border: 2px solid var(--ink);
  }
  .nav-link-highlight:hover, .nav-link-highlight.active{ color: var(--ink); background: var(--bg); }
  .nav-dropdown-group.is-current .nav-dropdown-group-label{ border-left: 2px solid var(--ink); }
}

/* ---- 6. Page band — every page opens on the drawing grid ----------------
   Same selector as the band in styles.css (id-level specificity), loaded
   later, so it replaces the old blue slab outright. A faint 64px grid in
   rule, centred so its lines sit on the page's centre line; ink type; a 2px
   ink rule to close it, with one large XX feature mark set just above it. */
:root{ --grid-line: #ECEBE6; }
:is(section#content, main#content > .intro, .spec-band){
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: calc(50% + 0.5px) -1px;
  border-bottom: 2px solid var(--ink);
}
:is(section#content, main#content > .intro, .spec-band)::before{ content: none; }
:is(section#content, main#content > .intro, .spec-band) h1{ color: var(--ink); font-weight: 800; letter-spacing: -0.035em; }
:is(section#content, main#content > .intro, .spec-band) p{ color: var(--grey-700); }
:is(section#content, main#content > .intro, .spec-band) :is(.eyebrow, .hero-tag, .about-eyebrow, .contact-eyebrow, .va-eyebrow, .pg-eyebrow){
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.1em;
}
:is(section#content, main#content > .intro, .spec-band) .rule{ background: var(--ink); }
:is(section#content, main#content > .intro, .spec-band) :is(.va-subhead, .pg-intro, .hero-accent){ color: var(--ink); }
:is(section#content, main#content > .intro, .spec-band) :is(.pg-nowall, .legal-updated){ color: var(--muted); }
:is(section#content, main#content > .intro, .spec-band) a:not(.btn){ color: var(--ink); }
:is(section#content, main#content > .intro, .spec-band) a:focus-visible{ outline-color: var(--accent); }
:is(section#content, main#content > .intro, .spec-band) :is(.btn, .btn-solid){
  background: var(--ink);
  color: var(--inverse-ink);
  border-color: var(--ink);
}
:is(section#content, main#content > .intro, .spec-band) :is(.btn, .btn-solid):hover{
  background: var(--bg);
  color: var(--ink);
}
:is(section#content, main#content > .intro, .spec-band) .btn-grey{
  background: var(--bg);
  border: 2px solid var(--ink);
  color: var(--ink);
}
:is(section#content, main#content > .intro, .spec-band) .btn-grey:hover{ background: var(--hover); border-color: var(--ink); color: var(--ink); }

/* Header accent. One large mark sitting just above the band's closing rule
   (lifted by --band-mark-gap so it never touches the line), right-aligned to
   the content column — not a strip. The default is the XX
   feature (the supplied pair, positive beside negative); .band-tx swaps in
   the tx mark and .band-none leaves the rule bare. The band's column gets room underneath so the mark
   never sits on copy. */
:is(section#content, main#content > .intro, .spec-band):not(.hero):not(.band-none) > .wrap{
  padding-bottom: calc(var(--band-mark-h, 72px) + var(--band-mark-gap, var(--space-24)) + var(--space-16));
}
:is(section#content, main#content > .intro, .spec-band):not(.hero):not(.band-none)::after{
  content: "";
  position: absolute;
  right: max(var(--space-32), calc((100% - var(--wrap-max)) / 2));
  bottom: var(--band-mark-gap, var(--space-24));
  height: var(--band-mark-h, 72px);
  aspect-ratio: 2 / 1;
  background: var(--ink);
  -webkit-mask: url(xx/xx-pair.svg) right bottom / contain no-repeat;
  mask: url(xx/xx-pair.svg) right bottom / contain no-repeat;
  pointer-events: none;
}
:is(section#content, main#content > .intro, .spec-band).band-tx:not(.hero)::after{
  aspect-ratio: 1 / 1;
  -webkit-mask-image: url(xx/tx-mark.png);
  mask-image: url(xx/tx-mark.png);
}
:is(section#content, main#content > .intro, .spec-band).band-tx:not(.hero){ --band-mark-h: 112px; }
@media (max-width: 640px){
  :is(section#content, main#content > .intro, .spec-band):not(.hero){ --band-mark-h: 48px; --band-mark-gap: var(--space-16); }
  :is(section#content, main#content > .intro, .spec-band).band-tx:not(.hero){ --band-mark-h: 72px; }
  :is(section#content, main#content > .intro, .spec-band):not(.hero)::after{ right: var(--space-16); }
}
/* Case-studies intro: client logo tiles on the light band. */
.client-logo{ border: 1px solid var(--rule-strong); transition: border-color var(--dur) var(--ease); }
.client-logo:hover{ transform: none; border-color: var(--ink); }
.client-logo:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- 7. Section markers -------------------------------------------------
   Every section opens with a 2px ink rule, a sheet number and a name. Sheet
   numbers are A-01, A-02… so they never read as a pillar (01–03) or a service
   (01.1). The name comes from data-marker where the page gives one. */
body{ counter-reset: sheet; }
/* A section that already sits inside a .wrap takes the column's own width. */
.wrap :is(section[data-marker], .outcomes, .included, .fit, .svc-process, .svc-faq, .related,
    .moves, .board-section, .contact-block, .pg-method, .va-block, .legal-body)::before{
  width: 100%;
}
:is(section[data-marker], .outcomes, .included, .fit, .svc-process, .svc-faq, .related,
    .moves, .board-section, .contact-block, .pg-method, .va-block,
    .legal-body){
  counter-increment: sheet;
}
:is(section[data-marker], .outcomes, .included, .fit, .svc-process, .svc-faq, .related,
    .moves, .board-section, .contact-block, .pg-method, .va-block,
    .legal-body)::before{
  /* Number only: the section's own heading names it, so the word here read
     twice ("Sheet A-04 · Proof" over "Proven on the job"). data-marker stays
     on the sections as the hook for these rules. */
  content: "Sheet A-" counter(sheet, decimal-leading-zero);
  display: block;
  width: calc(100% - 2 * var(--space-32));
  max-width: var(--wrap-max);
  margin: 0 auto var(--space-48);
  padding-top: 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 2px no-repeat;
}
@media (max-width: 640px){
  :is(section[data-marker], .outcomes, .included, .fit, .svc-process, .svc-faq, .related,
      .moves, .board-section, .contact-block, .pg-method, .va-block,
      .legal-body)::before{
    width: calc(100% - 2 * var(--space-16));
    margin-bottom: var(--space-32);
  }
}
section.block, .grader-promo, .cta-block{
  padding: var(--space-96) 0;
  border-bottom: none;
}
@media (max-width: 640px){
  section.block, .grader-promo, .cta-block{ padding: var(--space-64) 0; }
}
/* The rule draws left to right as the section arrives (taq-rule-draw). */
.taq-reveal-pending{ opacity: 0; transform: translateY(12px); }
.taq-reveal-in{
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.taq-reveal-in::before{ animation: taq-rule-draw var(--dur-slow) var(--ease) both; }
@keyframes taq-rule-draw{
  from{ background-size: 0% 2px; }
  to{ background-size: 100% 2px; }
}
@media (prefers-reduced-motion: reduce){
  .taq-reveal-pending{ opacity: 1; transform: none; }
  .taq-reveal-in, .taq-reveal-in::before{ transition: none; animation: none; }
}

/* ---- 8. StatusStamp — a square and a word, never colour alone ----------- */
.stamp{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 4px;
  border: 1px solid var(--rule-strong);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.stamp-sq{ width: 8px; height: 8px; flex: none; background: currentColor; }
.stamp.is-active{ color: var(--accent); border-color: var(--accent); }
.ticket-row .status.stamp{ justify-self: end; align-self: center; }
@media (max-width: 900px){ .ticket-row .status.stamp{ justify-self: start; } }

/* ---- 9. ImageFrame + the Taq XX plate -----------------------------------
   Every image sits in a frame with registration ticks at the corners and a
   Fig. caption. Where the photography has not been shot yet, the frame holds
   a plate of the Taq X, set positive and negative in alternating tiles. The
   tile count is fixed per plate (--cols × --rows) so the X's never land cut
   in half at an edge.

   Under the pointer the plate swaps — every positive tile turns negative and
   back — as an ink wipe from left to right over --dur-slow. It is the same
   artwork inverted, not a second graphic. */
.frame{
  position: relative;
  margin: 0;
  --tick: var(--ink);
}
.frame::before{
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) 0 12px / 8px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 12px 0 / 1px 8px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right 0 top 12px / 8px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right 12px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 calc(100% - 12px) / 8px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 12px 100% / 1px 8px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right 12px bottom 0 / 1px 8px no-repeat;
}
.frame-xx{
  --cols: 4;
  --rows: 3;
  --cap-h: 44px;
  color: var(--ink);
}
.frame-plate{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--cols) / var(--rows);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}
.frame-plate::before,
.frame-plate::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  -webkit-mask-image: url(xx/xx-checker.png);
  mask-image: url(xx/xx-checker.png);
  -webkit-mask-size: calc(200% / var(--cols)) calc(200% / var(--rows));
  mask-size: calc(200% / var(--cols)) calc(200% / var(--rows));
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
/* The negative of the plate: ink everywhere the tiles are not. Under the
   pointer it wipes in from the left while the positive plate is clipped away
   in step from the same edge, so the two never overlap — every positive tile
   turns negative along a single moving line. */
.frame-plate::before{
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease);
}
.frame-plate::after{
  -webkit-mask-image: url(xx/xx-checker.png), linear-gradient(#000 0 0);
  mask-image: url(xx/xx-checker.png), linear-gradient(#000 0 0);
  -webkit-mask-size: calc(200% / var(--cols)) calc(200% / var(--rows)), 100% 100%;
  mask-size: calc(200% / var(--cols)) calc(200% / var(--rows)), 100% 100%;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slow) var(--ease);
}
@media (hover: hover){
  .frame-xx:hover .frame-plate::before{ clip-path: inset(0 0 0 100%); }
  .frame-xx:hover .frame-plate::after{ clip-path: inset(0 0 0 0); }
}
/* Arrives by drawing in, like the section rules. */
.frame-xx .frame-plate::before{ animation: taq-plate-draw 720ms var(--ease) backwards; }
@keyframes taq-plate-draw{
  from{ clip-path: inset(0 100% 0 0); }
  to{ clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
  .frame-xx .frame-plate::before{ animation: none; }
  .frame-plate::after{ transition: none; }
}
.frame-cap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: var(--cap-h, 44px);
  padding: 10px 0 0;
  border-top: 2px solid var(--ink);
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey-700);
}
.frame-fig{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.frame-title{ flex: 1 1 auto; min-width: 0; }
.frame-cap .stamp{ margin-left: auto; }

/* Home hero: the headline runs the full column; under it, the statement and
   actions on the left and the plate on the right. The lead <div> is unwrapped
   with display: contents so its children join the hero grid directly. */
.hero .split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "tag tag" "h1 h1" "side plate";
  column-gap: var(--space-64);
  align-items: end;
}
.hero .split > div:first-child{ display: contents; }
.hero .hero-tag{ grid-area: tag; }
.hero h1{ grid-area: h1; }
.hero .hero-side{ grid-area: side; align-self: end; }
.hero .hero-plate{ grid-area: plate; }
@media (max-width: 800px){
  .hero .split{ grid-template-columns: 1fr; grid-template-areas: "tag" "h1" "side" "plate"; }
}
.hero-plate{ --cols: 6; --rows: 3; align-self: end; margin: var(--space-48) 12px 0; }
@media (max-width: 800px){
  .hero-plate{ --cols: 6; --rows: 2; margin-top: var(--space-32); }
}
/* About band: stands in for the uploaded photo or video until there is one. */
.home-about-plate{ --cols: 6; --rows: 3; margin: var(--space-32) 12px 0; display: none; }
.home-about-media[hidden] + .home-about-plate{ display: block; }
.section-collapse:not(.is-open) .home-about-plate{ display: none; }
/* Case studies with no screenshots or footage. A single-row strip. */
/* One XX feature, not a strip: the checker's first row is exactly the
   supplied pair, positive then negative. */
.case-plate{ --cols: 2; --rows: 1; max-width: 360px; margin: var(--space-32) 12px var(--space-16); }
/* No logo on file: one negative X tile in the logo slot. */
.case-logo-xx{ background: var(--surface); border: 1px solid var(--rule) !important; }
.case-logo-xx::before{
  content: "";
  width: 44px;
  height: 44px;
  background: var(--ink);
  -webkit-mask: url(xx/xx-neg.svg) center / contain no-repeat;
  mask: url(xx/xx-neg.svg) center / contain no-repeat;
}
/* 404: the missing sheet. */
.nf-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-64);
  align-items: end;
}
.nf-plate{ --cols: 3; --rows: 3; margin: 12px; }
@media (max-width: 800px){
  .nf-grid{ grid-template-columns: 1fr; gap: var(--space-32); }
  .nf-plate{ --cols: 6; --rows: 2; }
}
.nf-code{ color: var(--ink) !important; font-variant-numeric: tabular-nums; }

/* Real photos get the frame too (the about page portrait, uploaded media). */
.home-about-media:not([hidden]), .about-photo-frame{ position: relative; }
.home-about-media img, .home-about-media video, #about-photo{
  filter: grayscale(0.15) contrast(1.08);
}

/* ---- 10. Home ---------------------------------------------------------- */
.hero{ padding: var(--space-96) 0 var(--space-64); }
.hero h1{
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero .hero-side{ margin-top: var(--space-32); }
.hero .hero-statement{ font-size: 21px; line-height: 1.45; color: var(--ink); max-width: 34ch; }
.hero .hero-statement .hero-accent{ color: var(--ink); font-weight: 600; }
@media (max-width: 640px){
  .hero{ padding: var(--space-64) 0 var(--space-48); }
  .hero .hero-statement{ font-size: 18px; }
}

/* Pillars: Sales → Marketing, numbered 01 · 02. No slab — the
   one inverse moment on the page is the closing call to action. */
.pillars-list{ counter-reset: pillar; }
.pillar{
  counter-increment: pillar;
  border-top: 2px solid var(--ink) !important;
  padding-top: var(--space-24);
}
.pillar-title::before{
  content: counter(pillar, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pillar-title{ font-size: 40px; font-weight: 800; letter-spacing: -0.035em; }
.home-pillars .pillar.pillar-featured{
  background: none;
  color: var(--ink);
  margin-top: 0;
}
/* The featured card's own padding (home.css) is a slate-card inset; with the
   card gone it has to match the plain pillars at every width, or the rule
   above the next pillar lands on Media's button when stacked and the 01
   numeral sits higher than 02 and 03 side by side. */
.home-pillars .pillar.pillar-featured{ padding: var(--space-24) 0 0; }
@media (min-width: 641px){ .home-pillars .pillar.pillar-featured{ padding-top: 38px; } }
@media (min-width: 641px) and (max-width: 900px){ .home-pillars .pillar.pillar-featured{ padding: 30px 0 44px; } }
@media (max-width: 640px){ .home-pillars .pillar.pillar-featured{ padding: var(--space-24) 0 30px; } }
.pillar-featured .pillar-title, .pillar-featured .pillar-service{ color: var(--ink); }
.pillar-featured .pillar-subhead{ color: var(--ink); }
.pillar-featured .pillar-services, .pillar-featured .pillar-services li{ border-color: var(--rule); }
.pillar-featured .pillar-service::after{ color: var(--rule-strong); }
.pillar-featured a:focus-visible{ outline-color: var(--accent); }
.pillar-flag{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 3px;
  margin-bottom: 0;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  order: -1;
  align-self: flex-start;
  margin-bottom: 14px;
}
.pillar-flag::before{ content: ""; width: 8px; height: 8px; background: currentColor; }
.pillar-service{ transition: color var(--dur) var(--ease), background var(--dur) var(--ease), padding var(--dur) var(--ease); }
.pillar-service::before{ min-width: 34px; display: inline-block; }
.pillar-service:hover, .pillar-featured .pillar-service:hover{ color: var(--accent); background: var(--hover); }
.pillar-service:hover::after, .pillar-featured .pillar-service:hover::after{ color: var(--accent); transform: translateX(4px); }
.pillar-service{ justify-content: flex-start; }
.pillar-service::after{ margin-left: auto; }
/* Three primaries in one view is two too many: pillar buttons go outline. */
.pillar .btn, .pillar-featured .btn{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 12px 18px;
  font-size: 15px;
}
.pillar .btn:hover, .pillar-featured .btn:hover{ background: var(--ink); color: var(--inverse-ink); }

/* Bundle: a title block on paper. */
.bundle{
  background: var(--surface);
  border: 2px solid var(--ink) !important;
}
.bundle-items li::before{ background: var(--ink) !important; color: var(--ink); }

/* Onward panels: rows that lift on hover, title to accent, arrow slides. */
.next-step{
  border: none;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  transition: background var(--dur) var(--ease);
}
.next-step::before{ display: none; }
.next-step:hover{ background: var(--hover); }
.next-step-title{ font-family: var(--f-display); font-weight: 800; letter-spacing: -0.025em; transition: color var(--dur) var(--ease); }
.next-step:hover .next-step-title{ color: var(--accent); }
.next-step-arrow{ transition: transform var(--dur) var(--ease); }
.next-step:hover .next-step-arrow{ transform: translateX(4px); color: var(--accent); }

/* Proof rows (Proven on the job) — scope rows that lift onto hover. */
.ticket{ border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ticket-row{ transition: background var(--dur) var(--ease); padding-left: 12px; padding-right: 12px; }
.ticket > a:hover .ticket-row{ background: var(--hover); }
.ticket > a .ticket-row .client{ transition: color var(--dur) var(--ease); }
.ticket > a:hover .ticket-row .client{ color: var(--accent); }
.ticket-row .client{ font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; }

/* Grader band: on drawing paper, ruled top and bottom. */
.grader-promo{
  background: var(--surface);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.grader-promo-form{ background: var(--bg); border: 1px solid var(--rule-strong) !important; }
.grader-promo-points li{ border-top-color: var(--rule) !important; }
.grader-promo-points li:first-child{ border-top: 2px solid var(--ink) !important; }
.grader-promo-point-title{ font-weight: 600; }

/* Community preview cards: square, ruled, no lift shadow. */
.mini-card, .community-fallback{ border: 1px solid var(--rule-strong); background: var(--bg); }
.community-fallback{ border-top: 2px solid var(--ink); }

/* Footprint: one sentence, quiet. */
.footprint{ background: var(--surface); }

/* ---- 11. Closing slab — the one inverse moment per page ----------------
   Black band, paper type, inverse accent for focus. */
.cta-block{
  position: relative;
  background: var(--inverse-bg) !important;
  color: var(--inverse-ink);
  border: none !important;
  padding-bottom: calc(var(--space-96) + 32px);
  overflow: hidden;
}
.cta-block::before{ color: var(--inverse-ink) !important; background-image: linear-gradient(var(--inverse-ink), var(--inverse-ink)) !important; }
/* Closing-slab accent: one oversized mark in paper, bleeding off the slab's
   bottom-right corner — the way a sign is cut off by the edge of a photo.
   Off by default: the supplied tx artwork is only 261px across, and drawn at
   220px it was upscaled on high-density screens and read as soft and jagged,
   so the slab now closes on type alone. .slab-tx brings the tx mark back,
   .slab-xx uses the XX feature, .slab-taq the taq wordmark. Room is reserved
   below the copy so a mark never runs under text or the button. */
.cta-block:is(.slab-tx, .slab-xx, .slab-taq){ padding-bottom: calc(var(--space-96) + var(--slab-mark-room, 150px)); }
.cta-block:is(.slab-tx, .slab-xx, .slab-taq)::after{
  content: "";
  position: absolute;
  right: max(var(--space-32), calc((100% - var(--wrap-max)) / 2));
  bottom: calc(var(--slab-mark-h, 220px) * -0.18);
  height: var(--slab-mark-h, 220px);
  aspect-ratio: 1 / 1;
  background: var(--inverse-ink);
  -webkit-mask: url(xx/tx-mark.png) right bottom / contain no-repeat;
  mask: url(xx/tx-mark.png) right bottom / contain no-repeat;
  pointer-events: none;
}
.cta-block.slab-xx::after{
  aspect-ratio: 2 / 1;
  bottom: var(--space-32);
  -webkit-mask-image: url(xx/xx-pair.svg);
  mask-image: url(xx/xx-pair.svg);
}
.cta-block.slab-xx{ --slab-mark-h: 160px; --slab-mark-room: 162px; }
.cta-block.slab-taq::after{
  aspect-ratio: 528 / 324;
  -webkit-mask-image: url(xx/taq-mark.png);
  mask-image: url(xx/taq-mark.png);
}
.cta-block.slab-taq{ --slab-mark-h: 260px; --slab-mark-room: 170px; }
.cta-block h2{
  color: var(--inverse-ink);
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.cta-block p{ color: var(--inverse-muted) !important; font-size: 18px; }
.cta-block :focus-visible{ outline-color: var(--inverse-accent) !important; }
.cta-block a:not(.btn){ color: var(--inverse-ink); }
.cta-block a:not(.btn):hover{ color: var(--inverse-accent); }
.cta-block .btn, .cta-block .btn-solid{
  background: var(--inverse-ink);
  color: var(--ink);
  border-color: var(--inverse-ink);
}
.cta-block .btn:hover, .cta-block .btn-solid:hover{
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  border-color: var(--inverse-ink);
}
.cta-block .btn-grey{ background: transparent; color: var(--inverse-ink); border-color: var(--inverse-ink); }
.cta-block .btn-grey:hover{ background: var(--grey-900); }
@media (max-width: 640px){
  .cta-block{ --slab-mark-h: 130px; --slab-mark-room: 90px; }
  .cta-block.slab-xx{ --slab-mark-h: 96px; --slab-mark-room: 96px; }
  .cta-block.slab-xx::after{ bottom: var(--space-16); }
  .cta-block.slab-taq{ --slab-mark-h: 150px; --slab-mark-room: 100px; }
  .cta-block:is(.slab-tx, .slab-xx, .slab-taq){ padding-bottom: calc(var(--space-64) + var(--slab-mark-room)); }
  .cta-block h2{ font-size: 34px; }
}

/* ---- 12. Case studies --------------------------------------------------- */
.case{ border-top: none !important; }
.case-logo{ border: 1px solid var(--rule-strong); }
a.case-logo:hover{ border-color: var(--ink); }
.case h2{ font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.035em; }
.case .facts{
  border-top: 2px solid var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
  background: var(--surface);
}
.case .facts div span{ font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tag{ color: var(--ink); }
.browser-frame{ border: 1px solid var(--rule-strong) !important; background: var(--bg); }
.browser-frame:hover .browser-frame-bar{ border-color: var(--ink); }
.browser-frame img{ filter: grayscale(0.1) contrast(1.05); }
.ongoing{ background: var(--surface); border-left: 2px solid var(--ink) !important; }
.portfolio-visit:hover{ color: var(--accent); }
.lightbox{ background: rgba(11, 11, 12, 0.94); }
.lightbox-close{ border: 2px solid #FFFFFF !important; background: var(--inverse-bg); color: #FFFFFF; }

/* ---- 13. Shared rows and lists ------------------------------------------ */
.faq-item{ border-top-color: var(--rule); }
.faq-list{ border-top: 2px solid var(--ink); }
.faq-question{ font-weight: 600; transition: color var(--dur) var(--ease); }
.faq-question:hover{ color: var(--accent); }
.faq-toggle{ transition: transform var(--dur) var(--ease); }

/* ---- 14. Footer --------------------------------------------------------- */
footer{
  border-top: none;
  padding: var(--space-48) 0;
  background: var(--bg);
}
footer .meta a{ text-decoration-color: var(--rule-strong); }
footer .meta a:hover{ color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.footer-bottom{ border-top-color: var(--rule) !important; }
footer .footer-social a:is([href*="instagram.com"], [href*="facebook.com"], [href*="linkedin.com"]){
  width: 20px;
  height: 20px;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
footer .footer-social a:hover, .footer-legal a:hover{ color: var(--accent); }

/* ---- 15. Consent banner ------------------------------------------------- */
.consent-banner{ border: 2px solid var(--ink); background: var(--bg); }

/* One hue, used sparingly: subheads and deks are ink-grey, not blue. */
.case .dek, .moves-num, .pillar-subhead{ color: var(--grey-700); }

/* ---- 16. 404 ------------------------------------------------------------
   These used to be an inline <style> in 404.html, which the site's CSP
   (style-src 'self') never let apply. */
.nf{ padding: var(--space-96) 0 var(--space-128); }
.nf-code{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-16);
}
.nf h1{ margin: 0 0 var(--space-24); max-width: 16ch; }
.nf p{ color: var(--grey-700); max-width: 56ch; margin: 0 0 var(--space-32); }
.nf-links{
  border-top: 2px solid var(--ink);
  margin-top: var(--space-64);
  padding-top: var(--space-16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 var(--space-32);
}
.nf-links a{
  display: flex;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nf-links a:hover{ color: var(--accent); background: var(--hover); }
@media (max-width: 640px){
  .nf{ padding: var(--space-64) 0 var(--space-96); }
  .nf-code{ font-size: 64px; }
}

/* ---- 17. Review fixes ---------------------------------------------------- */
/* Solutions hub: seven solid buttons in one view is six too many. Each row's
   action is an outline button; the closing slab keeps the one primary. */
.row .btn{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.row .btn:hover{ background: var(--ink); color: var(--inverse-ink); }
/* Grader page field label: a drawing-set label, not a 17px heading. */
.pg-form label, .pg-tool label, .va-cta label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Phones: when the closing slab is folded shut, keep its heading clear of
   the tile strip along its foot. */
@media (max-width: 640px){
  .cta-block.section-collapse:not(.is-open){ padding-bottom: 24px; }
  .cta-block.section-collapse:not(.is-open)::after{ display: none; }
}
/* Never print — or hand a crawler's renderer — a section stuck mid-reveal. */
@media print{
  .taq-reveal-pending{ opacity: 1 !important; transform: none !important; }
  .cta-block::after, :is(section#content, main#content > .intro, .spec-band)::after{ display: none; }
}

/* ---- 18. What's included — filled cells ------------------------------------
   Each deliverable is a cell on drawing paper with a 2px ink head rule, so the
   set reads as a schedule of line items rather than loose text. */
.included-list{ gap: var(--space-16); }
.included-list li{
  background: var(--surface);
  border-left: none !important;
  border-top: 2px solid var(--ink);
  padding: var(--space-24);
  transition: background var(--dur) var(--ease);
}
.included-list li:hover{ background: var(--surface-2); }
.included-list h3{ font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.included-list p{ color: var(--grey-700); }
@media (max-width: 640px){ .included-list li{ padding: var(--space-16); } }

/* ---- 20. Blue on the buttons -----------------------------------------------
   The black-and-white system with the logo's own X blue brought onto the
   primary action, so the one thing a visitor should press is the one thing in
   the view that carries the brand colour. The blue is #4A678C, sampled from
   the X in the lockup (taq-wordmark-blue.png in the header is the same X).

   Primary: blue fill, white text (5.8:1). Hover inverts to paper with blue
   type and a blue border — the same move the ink button made — and the arrow
   slides 3px. Outline buttons stay ink so there is only ever one blue action.
   On the black slab the blue button edge holds 3.4:1 against the ground. */
.btn:not(.btn-grey),
.btn-solid,
:is(section#content, main#content > .intro, .spec-band) :is(.btn, .btn-solid):not(.btn-grey),
.cta-block :is(.btn, .btn-solid):not(.btn-grey){
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.btn:not(.btn-grey):hover,
.btn-solid:hover,
:is(section#content, main#content > .intro, .spec-band) :is(.btn, .btn-solid):not(.btn-grey):hover{
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}
.cta-block :is(.btn, .btn-solid):not(.btn-grey):hover{
  background: var(--inverse-ink);
  border-color: var(--inverse-ink);
  color: var(--ink);
}
/* Pillar and solutions-row buttons are secondary — outline ink, filling ink
   on hover — so the page's one blue button stays the obvious one. */
.pillar .btn, .pillar-featured .btn, .row .btn{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.pillar .btn:hover, .pillar-featured .btn:hover, .row .btn:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--inverse-ink);
}
/* Mobile menu's Contact row is the menu's primary action. */
@media (max-width: 960px){
  .nav-link-highlight{ background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
  .nav-link-highlight:hover, .nav-link-highlight.active{ background: var(--bg); color: var(--accent); border-color: var(--accent); }
}
/* With the buttons blue, status stamps go back to ink so a view never has
   more than a couple of blue things in it. The square still marks "active". */
.stamp.is-active{ color: var(--ink); border-color: var(--ink); }
.pillar-flag{ color: var(--ink); border-color: var(--ink); }

/* ---- 21. More Taq blue, less grid (Nov 3) ---------------------------------
   Tanner asked for more of the X blue and a lighter drawing grid. The blue
   goes on the system's own numbering and markers: sheet numbers, case and
   pillar numbers, service numbers (01.1…), process steps, eyebrow dashes,
   active status stamps, and each page's one X mark. Buttons stay the only
   blue fills, so the primary action still reads first. #4A678C holds 5.8:1
   on the page ground, so the 12px labels stay readable. */
/* Each section's opening rule and sheet number in blue, like blueprint
   linework. The bands' own 2px dividers stay ink. The closing slab keeps
   its inverse rule (set with !important in section 13). */
:is(section[data-marker], .outcomes, .included, .fit, .svc-process, .svc-faq, .related,
    .moves, .board-section, .contact-block, .pg-method, .va-block,
    .legal-body)::before{
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
}
.case-num, .moves-num, .pillar-title::before,
:is(.nav-dropdown-group-label, .nav-dropdown-link, .pillar-service, .nf-links a, .solutions-list a, .related a)[href]::before{
  color: var(--accent);
}
:is(.eyebrow, .hero-tag, .about-eyebrow, .contact-eyebrow, .va-eyebrow, .pg-eyebrow,
    .home-about-eyebrow, .bundle-eyebrow, .grader-promo-eyebrow, .fo-tag) .rule,
:is(section#content, main#content > .intro, .spec-band) .rule{
  background: var(--accent) !important;
}
.stamp.is-active{ color: var(--accent); border-color: var(--accent); }
/* The page's one X, in the logo's own blue. */
:is(section#content, main#content > .intro, .spec-band):not(.hero):not(.band-none)::after{
  background: var(--accent);
}

/* The grid, scaled back: wider cells, a fainter blue-grey line, and it
   fades out toward the bottom of the band instead of running edge to edge
   behind the copy. */
:root{ --grid-line: #EDF0F4; }
:is(section#content, main#content > .intro, .spec-band){
  background-image:
    linear-gradient(to bottom, transparent 20%, var(--bg) 85%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 96px 96px, 96px 96px;
  background-position: 0 0, calc(50% + 0.5px) -1px, calc(50% + 0.5px) -1px;
}

/* ---- 22. Hero tagline (Nov 3, 2026) ------------------------------------
   "The general contractor for sales & marketing." carries the display type,
   and the h1 under it says plainly what Taq does. The metaphor stays out of
   the h1, <title> and meta description on purpose: "general contractor" on
   its own is a construction category, and those three are what search
   engines use to decide what a page is about. */
.hero .split{ grid-template-areas: "tag tag" "tagline tagline" "h1 h1" "side plate"; }
@media (max-width: 800px){
  .hero .split{ grid-template-areas: "tag" "tagline" "h1" "side" "plate"; }
}
section#content.hero .hero-tagline{
  grid-area: tagline;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero .hero-tagline:empty{ display: none; }
.hero h1.hero-h1{
  margin-top: var(--space-24);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  max-width: 40ch;
}

/* ---- 23. Proof → Reconciliation & Partnership (Nov 3) --------------------
   The acknowledgement band now follows the proof list directly. Halve the
   proof section's bottom padding and the band's top, so "View case studies"
   runs straight into it instead of leaving a white gap. */
section.block[data-marker="Proof"]{ padding-bottom: var(--space-48); }
section.block.footprint{ padding-top: var(--space-48); }
@media (max-width: 640px){
  section.block[data-marker="Proof"]{ padding-bottom: var(--space-32); }
  section.block.footprint{ padding-top: var(--space-32); }
}

/* ---- 24. Footer A, with a piece of the X (Nov 3) --------------------------
   Footer A, chosen Nov 3, 2026, reworked to use the width: contact on
   the left (phone and email large, because they are what people come down here
   for), the service pages by pillar in the middle, and the blue XX pair on the
   right, cut off by the bottom edge of the page. Tanner signed off on this
   second X (the header band carries the first). */
footer{
  --footer-x: clamp(220px, 27vw, 400px);
  position: relative;
  overflow: hidden;
  padding: var(--space-64) 0 var(--space-32);
}
.footer-main{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-48) var(--space-64);
  align-items: start;
  padding-right: calc(var(--footer-x) * 0.75); /* room for the X */
}
.footer-contact{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.footer-reach{ margin: var(--space-8) 0 0; display: flex; flex-direction: column; gap: 2px; }
footer .footer-reach a{
  font-family: var(--f-display);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
footer .footer-reach a:hover{ color: var(--accent); }
footer .footer-contact .meta{ display: flex; flex-direction: column; gap: 4px; }
footer .footer-contact .meta li{ white-space: normal; }
.footer-cta{ margin-top: var(--space-8); }

.footer-pillars{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-32);
}
.footer-pillars ul{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
footer .footer-pillars a.footer-pillar{
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
footer .footer-pillars ul a{ color: var(--grey-700); text-decoration: none; font-size: 15px; line-height: 1.35; }
footer .footer-pillars a:hover{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* The piece of the X: the positive/negative pair from the drawing set, in the
   logo's blue, in the bottom-right corner with its lower quarter and right edge
   cut off by the page. Decorative, so it is a masked span, not an image. */
.footer-xx{
  position: absolute;
  right: calc(var(--footer-x) * -0.1);
  bottom: calc(var(--footer-x) * -0.13);
  width: var(--footer-x);
  aspect-ratio: 2 / 1;
  background: var(--accent);
  -webkit-mask: url(xx/xx-pair.svg) center / contain no-repeat;
  mask: url(xx/xx-pair.svg) center / contain no-repeat;
  pointer-events: none;
}
/* The rule above the legal line stops short of the X instead of running
   through it. */
footer .footer-bottom{
  position: relative;
  margin-top: var(--space-48);
  border-top: 0 !important;
  padding-right: calc(var(--footer-x) * 0.95);
}
.footer-bottom::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(var(--footer-x) * 0.95);
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px){
  .footer-main{ grid-template-columns: minmax(0, 1fr); padding-right: 0; }
}
@media (max-width: 640px){
  footer{ --footer-x: 150px; padding: var(--space-48) 0 var(--space-24); }
  .footer-main{ gap: var(--space-32); }
  .footer-pillars{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); }
  footer .footer-pillars ul a{ font-size: 14px; }
  footer .footer-bottom{ margin-top: var(--space-32); padding-right: 0; padding-bottom: 72px; }
  .footer-bottom::before{ right: 0; }
}

/* ---- 25. Pillar heads aligned (Nov 4) ------------------------------------
   The "Video in-house" flag used to sit above Marketing's 02 and push its
   number, title and first service ~32px below Sales. It now sits on the
   number's line, at the right, inside the pillar's <hgroup>, so both columns
   share a top line. The buttons share a bottom line too. */
.pillar-head{ position: relative; align-self: stretch; margin: 0; }
.pillar-head .pillar-flag{
  position: absolute;
  top: -4px;
  right: 0;
  margin: 0;
}
.home-pillars .pillar .btn{ margin-top: auto; }

/* ---- 26. Solutions button and XX strip (Nov 4) ----------------------------
   "View all solutions" is a button now, with its one-line note beside it, and
   a strip of the XX plate in Taq blue closes the What we do section: the same
   plate as the hero and About (tiles never cut, hover wipes positive to
   negative), one row tall, so the gap before About reads as part of the
   drawing set instead of empty paper. Tanner asked for it on Nov 4. */
.solutions-cta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: 1px solid var(--rule);
}
.solutions-cta-note{ margin: 0; color: var(--muted); font-size: 15px; max-width: 52ch; }
.solutions-strip{
  --cols: 16;
  --rows: 1;
  margin: var(--space-48) 12px 0;
}
.solutions-strip .frame-plate{ background: transparent; }
.solutions-strip .frame-plate::before,
.solutions-strip .frame-plate::after{ background: var(--accent); }
@media (max-width: 900px){ .solutions-strip{ --cols: 10; } }
@media (max-width: 640px){
  .solutions-cta{ margin-top: var(--space-32); padding-top: var(--space-24); }
  .solutions-strip{ --cols: 6; margin-top: var(--space-32); }
}
.solutions-cta .btn{ flex: none; width: auto; display: inline-flex; align-items: center; }