/* ==========================================================================
   TROPHY TEK - shared stylesheet
   Colours and type are taken from their real brand, not invented:
     #184D98  blue on their MEDALS / ACRYLIC / CUSTOM banners
     #3953A4  blue in the logo wordmark
     #003A96  blue in their Wix theme palette
     white page, black panels, heavy italic caps  (their look)
   Change a token in :root and the whole site follows.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- Brand --- */
  --blue:        #184D98;   /* primary. 8.2:1 on white */
  --blue-dk:     #0F3B7A;
  --blue-dp:     #001D4B;   /* their navy */
  --blue-lt:     #3953A4;   /* logo blue */
  --blue-tint:   #E5F0FE;   /* their theme tint */
  --blue-wash:   rgba(24, 77, 152, 0.08);

  --ink:         #0A0A0A;   /* their black panels */
  --ink-2:       #16181C;
  --ink-3:       #23262B;

  --paper:       #FFFFFF;   /* page background, same as theirs */
  --paper-2:     #F4F6F9;
  --paper-3:     #E8ECF1;

  --text:        #14161A;
  --text-2:      #4A4F57;   /* 8.1:1 on white */
  --text-3:      #6B7280;   /* 4.8:1 on white */
  --on-dark:     #FFFFFF;
  --on-dark-2:   #C3C8D0;   /* 9.4:1 on --ink */

  --line:        #E2E5EA;
  --line-dark:   rgba(255,255,255,0.14);

  --ok:          #15803D;
  --err:         #C62828;

  /* --- Scale --- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  --r:      6px;
  --r-lg:   12px;
  --r-pill: 999px;

  --shadow:    0 4px 20px rgba(10,10,10,0.08);
  --shadow-lg: 0 18px 48px rgba(10,10,10,0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
  --wrap: 1200px;

  --skew: -9deg;   /* the angle on their banners */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Nothing on this site is allowed to push the page sideways. */
  overflow-x: hidden;
}

/* Their headings are heavy italic caps. This is the whole personality. */
h1, h2, h3, h4, .display {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: inherit;
}

h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
h4 { font-size: clamp(1.05rem, 2vw, 1.2rem); }

/* Default gap under a heading. The reset zeroes all margins, so without this a
   bare heading sits flush against the paragraph below it. Every component that
   wants a different value overrides it further down. */
h1, h2, h3, h4 { margin-bottom: var(--s2); }

p { color: var(--text-2); }
/* The reset zeroes every margin, so stacked paragraphs would otherwise run
   together into one block of text. */
p + p { margin-top: 0.95em; }
a { color: inherit; text-decoration: none; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

strong { font-weight: 700; color: var(--text); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r);
}
.on-ink :focus-visible { outline-color: #7FB0FF; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}

section { padding-block: var(--s7); }
.pad-sm  { padding-block: var(--s6); }
.pad-0-t { padding-top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.on-ink  { background: var(--ink);  color: var(--on-dark); }
/* .hero and .phead are dark sections too. Without them here, paragraphs fall back
   to the light-mode body colour and go nearly invisible on the blue slab. */
.on-ink p, .on-ink .lead,
.hero p, .hero .lead,
.phead p { color: var(--on-dark-2); }
.on-blue { background: var(--blue); color: var(--on-dark); }
.on-blue p { color: rgba(255,255,255,0.9); }
.on-soft { background: var(--paper-2); }

/* --------------------------------------------------------------------------
   Eyebrow / kicker
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s2);
}
/* Every dark or blue surface that can hold a kicker has to be listed here.
   The default blue is invisible on a blue panel. */
.on-ink .kicker, .hero .kicker, .phead .kicker { color: #7FB0FF; }
.on-blue .kicker, .strip-copy .kicker, .cta .kicker { color: #FFFFFF; opacity: 0.82; }

/* A short skewed blue rule, echoes the diagonal on their banners */
.rule {
  width: 74px; height: 5px;
  background: var(--blue);
  transform: skewX(var(--skew));
  margin-bottom: var(--s3);
}
.on-ink .rule, .on-blue .rule, .hero .rule, .phead .rule { background: #FFFFFF; }

/* --------------------------------------------------------------------------
   Buttons  (their "VIEW PRODUCTS" pill is the outline variant)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;              /* touch target */
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-blue  { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover  { background: var(--blue-dk); border-color: var(--blue-dk); }

.btn-ink   { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--blue); border-color: var(--blue); }

/* The outlined pill from their banners */
.btn-out   { background: transparent; color: #fff; border-color: #fff; }
.btn-out:hover { background: #fff; color: var(--ink); }

.btn-out-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-out-ink:hover { background: var(--ink); color: #fff; }

.btn-sm { min-height: 42px; padding: 10px 22px; font-size: 0.92rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 3px solid var(--blue);
}
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--nav-h);   /* was --s3, paid toward the social icons */
}

.logo { flex: none; display: block; }
/* Wordmark aspect is 900x118. At 36px tall it is ~275px wide, which is what the
   nav has room for at 1200px. Raising this wraps the nav onto two lines. */
.logo img { height: 36px; width: auto; }

.mainnav > ul { display: flex; align-items: center; gap: 0; list-style: none; }  /* was 2px */
.mainnav li { position: relative; }
.mainnav a, .mainnav button {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  /* Was 14px. The header bar was already full at 1200px, and the two social
     icons right of the Free Quote button need about 60px. Most of it came from
     here, the rest from the gaps above and on .hdr-side. */
  padding: 10px 9px; border-radius: var(--r);
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.mainnav a:hover, .mainnav button:hover { background: rgba(255,255,255,0.1); }
.mainnav a[aria-current="page"] { color: #7FB0FF; }
.mainnav button svg { width: 11px; height: 11px; transition: transform .2s var(--ease); }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 242px;
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover > button svg { transform: rotate(180deg); }
.submenu a {
  color: var(--text); font-size: 0.98rem; letter-spacing: 0.05em;
  padding: 11px 15px; border-radius: var(--r);
}
.submenu a:hover { background: var(--blue-tint); color: var(--blue); }

.hdr-side { display: flex; align-items: center; gap: 12px; flex: none; }  /* was --s2 */
.hdr-tel {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap;
}
.hdr-tel:hover { color: #7FB0FF; }
.hdr-tel svg { width: 16px; height: 16px; flex: none; }

.burger {
  display: none; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer; border-radius: var(--r);
}
.burger svg { width: 26px; height: 26px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .bars { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

/* IG and FB in the header bar, right of the Free Quote button, matching the
   order divideservice.com uses. .hdr-side's own gap is 16px, which is too much
   between two icons that belong together, so they get their own tighter box.
   Off below 860px: the bar is down to a button and a burger by then and the
   same two links are already at the bottom of the drawer. */
.hdr-soc { display: flex; align-items: center; gap: 2px; }
/* 18px glyphs in a 32px box, the same size the Divide site uses. Bigger than
   this and the nav has to collapse to the burger even earlier than it now does. */
.hdr-soc .soc { width: 32px; height: 32px; }
.hdr-soc .soc svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .hdr-soc { display: none; } }

.soc {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  color: #fff;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.soc:hover { color: #7FB0FF; background: rgba(255,255,255,0.1); }
.soc svg { width: 21px; height: 21px; }

/* The same pair on a white section, so the colours flip. Used beside the
   "What we make" heading on the home page. */
.soc-ink { color: var(--blue); }
.soc-ink:hover { color: var(--blue-dk); background: var(--blue-tint); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--ink); color: #fff;
  padding: var(--s3) 22px var(--s6);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  /* Parked off-screen is not the same as hidden. Without visibility the closed
     drawer's links stay in the tab order and get read by screen readers. */
  visibility: hidden;
  transition: transform .28s var(--ease), visibility .28s;
}
.drawer[data-open="true"] { transform: none; visibility: visible; }
.drawer ul { list-style: none; }
.drawer > ul > li > a, .drawer summary {
  display: block; padding: 16px 2px;
  border-bottom: 1px solid var(--line-dark);
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: '+'; font-size: 1.5rem; font-style: normal; }
.drawer details[open] summary::after { content: '\2013'; }
.drawer details ul a {
  display: block; padding: 12px 2px 12px 18px;
  border-bottom: 1px solid var(--line-dark);
  font-family: 'Inter', sans-serif; font-size: 0.98rem;
  color: var(--on-dark-2);
}
.drawer .btn { margin-top: var(--s3); }
/* Where the IG and FB icons go on a phone, since .socialrow is desktop only. */
.drawer-soc {
  display: flex; justify-content: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line-dark);
}
.drawer-soc .soc { width: 48px; height: 48px; }
.drawer-soc .soc svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The blue IS the hero background. The photo panel below covers the right side
   and its slanted edge is the only colour boundary, so nothing can straddle it. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, var(--blue-dp), var(--blue));
  color: #fff;
  padding-block: clamp(56px, 9vw, 104px);
  min-height: clamp(440px, 46vw, 600px);
  display: flex; align-items: center;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(
    var(--skew), transparent 0 38px, rgba(255,255,255,0.05) 38px 40px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

/* Photo panel.
   The container is skewed, so its left edge IS the diagonal. The image inside
   is counter-skewed by the same angle so it stays undistorted, and scaled up so
   the skew cannot expose the corners. The picture therefore sits wholly on the
   dark side of the boundary and never spans two colours. */
.hero-photo {
  position: absolute; z-index: 1;
  top: -4px; bottom: -4px; right: -70px; left: 54%;
  transform: skewX(var(--skew));
  overflow: hidden;
  background: var(--ink);
  box-shadow: -14px 0 40px rgba(0,0,0,0.45);
}
/* The scale only has to cover the corners the skew exposes, which is
   height * tan(9deg) / width, about 15% at the widest. More than that is
   just needless zoom into the photo. */
/* Slides stack in place and cross-fade. They are absolutely positioned so the
   panel never changes size, which means no layout shift as they swap.
   The first slide carries .on in the markup, so with JS off or still loading the
   hero is a normal static image rather than an empty black panel. */
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: skewX(calc(-1 * var(--skew))) scale(1.18);
  opacity: 0; transition: opacity 700ms var(--ease);
}
.hero-photo img.on { opacity: 1; }

/* Capped so the copy always clears the diagonal, at any width above the
   stacking breakpoint. Widening this pushes text toward the seam. */
.hero-copy { max-width: min(520px, 42vw); }
.hero h1 { margin-bottom: var(--s3); text-shadow: 0 3px 18px rgba(0,0,0,0.35); }
.hero h1 span { display: block; color: #fff; }

.lead { font-size: clamp(1.02rem, 1.6vw, 1.16rem); margin-bottom: var(--s4); max-width: 54ch; }
/* Soft blue-white, distinct from the pure white headline. 6.5:1 on the blue. */
.hero .lead { color: #DCE6F5; }

/* Trust bar under the hero */
.trustbar { background: var(--blue); color: #fff; padding-block: 18px; }
.trustbar ul {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px var(--s5);
}
.trustbar li {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic;
  font-weight: 700; font-size: 1.06rem;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.trustbar svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.phead {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding-block: clamp(52px, 8vw, 86px);
}
.phead .wrap { position: relative; z-index: 2; }
/* Same rule as the hero: the slab is anchored to the content box, so the
   diagonal sits well clear of the headline at every viewport width. */
.phead .wrap::before {
  content: ''; position: absolute;
  top: -120%; bottom: -120%;
  left: -100vw; right: 20%;
  background: linear-gradient(100deg, var(--blue-dp), var(--blue));
  transform: skewX(var(--skew));
  z-index: -1;
  pointer-events: none;
}
.phead h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); margin-bottom: var(--s2); }
.phead p { color: rgba(255,255,255,0.88); max-width: 62ch; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 0.86rem; color: rgba(255,255,255,0.68); margin-bottom: var(--s2);
}
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.shead { max-width: 680px; margin-bottom: var(--s5); }
/* A centered pair of social icons standing on their own above a heading.
   Bigger than the header row's, because out here they carry themselves. */
.soc-strip {
  display: flex; justify-content: center; gap: var(--s1);
  margin-bottom: var(--s5);
}
.soc-strip .soc { width: 44px; height: 44px; }
.soc-strip .soc svg { width: 24px; height: 24px; }
.shead.mid { margin-inline: auto; text-align: center; }
.shead.mid .rule { margin-inline: auto; }
.shead h2 { margin-bottom: var(--s2); }
.shead p { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Grid + cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s3); }
/* Form page layout: main column plus sidebar. This has to be a class, not an
   inline style. An inline grid-template-columns cannot be overridden by a media
   query, which is exactly how the form pages stopped stacking on phones. */
.formgrid {
  display: grid; grid-template-columns: 1.65fr 1fr;
  gap: var(--s5); align-items: start;
}
.formgrid.wide { grid-template-columns: 1.4fr 1fr; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue); }

.card-img {
  aspect-ratio: 1 / 1;          /* space reserved, no layout shift */
  background: var(--ink);
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
a.card:hover .card-img img { transform: scale(1.05); }

.card-body { padding: var(--s3); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 10px; }
.card-body p { font-size: 0.95rem; flex: 1; }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s3);
}
.price {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800;
  font-size: 1.2rem; color: var(--blue); letter-spacing: 0.03em; text-transform: uppercase;
}
.golink {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
}
.golink svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
a.card:hover .golink { color: var(--blue); }
a.card:hover .golink svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Feature strip  (rebuild of their banner: blue panel + product photo)
   -------------------------------------------------------------------------- */
/* Same construction as the hero: blue base, one skewed photo panel whose edge
   is the boundary. No wedge overlay, so nothing gets cut by it. */
.strip {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 400px;
  border-radius: var(--r-lg);
  background: linear-gradient(105deg, var(--blue-dp), var(--blue));
  color: #fff;
}
.strip + .strip { margin-top: var(--s3); }

.strip-copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s5);
  width: 50%;
}
.strip-copy h2 { margin-bottom: var(--s2); }
.strip-copy p { color: rgba(255,255,255,0.92); margin-bottom: var(--s4); max-width: 42ch; }
.strip-copy .btn { align-self: flex-start; }

.strip-photo {
  position: absolute; z-index: 1;
  top: -4px; bottom: -4px; right: -4px; left: 53%;
  transform: skewX(var(--skew));
  overflow: hidden;
  background: var(--ink);
}
.strip-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: skewX(calc(-1 * var(--skew))) scale(1.16);
}

.strip.flip .strip-copy { margin-left: auto; }
.strip.flip .strip-photo { left: -4px; right: 53%; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps { counter-reset: n; }
.step { position: relative; padding-top: var(--s4); }
.step::before {
  counter-increment: n; content: '0' counter(n);
  position: absolute; top: -6px; left: 0;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800;
  font-size: 3.2rem; line-height: 1; color: var(--blue); opacity: 0.22;
}
.step h3 { margin-bottom: 8px; position: relative; }
.step p { font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   Spec / price table
   -------------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
/* Lapel pins stacks three price tables in one section. */
.tablewrap + .tablewrap { margin-top: var(--s4); }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
caption { text-align: left; padding: var(--s3) var(--s3) 0; font-weight: 600; color: var(--text-3); font-size: 0.9rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--ink); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--paper-2); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blue); }

/* --------------------------------------------------------------------------
   Tick list
   -------------------------------------------------------------------------- */
.ticks { list-style: none; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 3px; }
.on-ink .ticks svg, .on-blue .ticks svg { color: #7FB0FF; }
.on-blue .ticks svg { color: #fff; }

/* Pill tags */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 0.92rem; color: var(--text-2);
}
.on-ink .tags li { background: var(--ink-3); border-color: var(--line-dark); color: var(--on-dark-2); }

/* Proof stats. auto-fit rather than a fixed 4-up so it collapses to 2 and then
   1 on its own without a media query. minmax floor is 190px because the longest
   label ("Series and organisations we build for") needs two lines at that width
   and three at anything narrower, which starts to look broken. */
.statrow { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.statrow li { background: var(--ink-3); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: var(--s4); }
.statrow b {
  display: block; font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1; color: #fff;
}
.statrow span { display: block; margin-top: 12px; font-size: 0.92rem; color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--blue); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(36px, 6vw, 68px) clamp(24px, 5vw, 60px);
  text-align: center;
}
.cta::before {
  content: ''; position: absolute; inset: -40% -20% auto auto; width: 46%; height: 200%;
  background: rgba(255,255,255,0.055); transform: skewX(var(--skew));
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: var(--s2); }
.cta p { max-width: 56ch; margin: 0 auto var(--s4); color: rgba(255,255,255,0.92); }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.formcard {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 4vw, 44px);
  box-shadow: var(--shadow);
}
fieldset { border: 0; margin-bottom: var(--s5); }
fieldset:last-of-type { margin-bottom: var(--s3); }
legend {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--s3); padding: 0;
}

.field { margin-bottom: var(--s3); }
.field > label {
  display: block; margin-bottom: 8px;
  font-weight: 600; font-size: 0.92rem; color: var(--text);
}
.field .req { color: var(--err); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 15px;
  background: #fff; color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
.field input::placeholder, .field textarea::placeholder { color: #9CA3AF; }

.hint { display: block; margin-top: 7px; font-size: 0.86rem; color: var(--text-3); }
/* sales@trophytek.com has no break opportunity in it, so at 320px the hint on
   the order form ran 4px past the viewport. Let the address wrap rather than
   shrink the type. */
.hint, .hint a { overflow-wrap: anywhere; }
.hint a { color: var(--blue); text-decoration: underline; }

/* Errors carry a message, never colour alone */
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--err); }
.field .err { display: none; margin-top: 8px; font-size: 0.88rem; color: var(--err); font-weight: 500; }
.field[data-invalid="true"] .err { display: block; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* Repeatable order line items. Rick asked for more than one product per order,
   2026-08-10, after pointing at raceawards.com/ordernow which only takes one. */
.items { margin-bottom: var(--s3); }
.item {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); margin-bottom: var(--s3); background: var(--paper);
}
.item:last-child { margin-bottom: 0; }
.item-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); margin-bottom: var(--s2);
}
.item-head b {
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.item-rm {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 0.86rem; color: var(--err); text-decoration: underline;
}
.item-rm:hover { text-decoration: none; }
.item-rm[hidden] { display: none; }
/* Product needs the room, quantity is three digits. */
.item .frow { grid-template-columns: 1.7fr 1fr; }
.item .field:last-child { margin-bottom: 0; }
.additem { margin-bottom: var(--s4); }
.additem[hidden] { display: none; }
@media (max-width: 640px) { .item .frow { grid-template-columns: 1fr; } }

.formnote { font-size: 0.88rem; color: var(--text-3); margin-top: var(--s2); text-align: center; }

.status { margin-top: var(--s3); padding: 15px 18px; border-radius: var(--r); font-size: 0.95rem; display: none; }
.status[data-state="ok"]  { display: block; background: #ECFDF3; border: 1px solid #A7F3D0; color: var(--ok); }
.status[data-state="err"] { display: block; background: #FEF2F2; border: 1px solid #FECACA; color: var(--err); }
.status a { color: inherit; text-decoration: underline; }

.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Sidebar cards next to a form */
.sidecard {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
.sidecard + .sidecard { margin-top: var(--s3); }
.sidecard h3 { margin-bottom: var(--s2); }
.sidecard p, .sidecard li { font-size: 0.95rem; color: var(--text-2); }
.sidecard.ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.sidecard.ink p, .sidecard.ink li { color: var(--on-dark-2); }

.contactlist { list-style: none; }
.contactlist li + li { border-top: 1px solid var(--line); }
.sidecard.ink .contactlist li + li { border-top-color: var(--line-dark); }
.contactlist a, .contactlist div { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; }
.contactlist svg { width: 19px; height: 19px; color: var(--blue); flex: none; margin-top: 3px; }
.sidecard.ink .contactlist svg { color: #7FB0FF; }
.contactlist a:hover { color: var(--blue); }
.sidecard.ink .contactlist a:hover { color: #7FB0FF; }

/* --------------------------------------------------------------------------
   Testimonials. Real customer quotes, so the card stays quiet and lets the
   words carry it. Auto-fit rather than a fixed g3, because the about page runs
   eight and the home page runs three off the same grid.
   -------------------------------------------------------------------------- */
.qgrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s3);
}
.qcard {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-lg); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.qcard blockquote { flex: 1; }
.qcard blockquote p {
  font-size: 1.02rem; line-height: 1.6; color: var(--text);
}
.qcard cite {
  font-style: normal; font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue);
}
.on-ink .qcard {
  background: var(--ink-3); border-color: var(--line-dark); border-left-color: #7FB0FF;
}
.on-ink .qcard blockquote p { color: var(--on-dark); }
.on-ink .qcard cite { color: #7FB0FF; }

/* Compact banner + reduced top gap, for pages whose job is a form. See phead(). */
.phead.tight { padding-block: clamp(30px, 4vw, 48px); }
.phead.tight h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: 10px; }
.phead.tight p { font-size: 1rem; }
section.tight-top { padding-top: var(--s5); }
.stepline { margin-bottom: var(--s4); }

/* --------------------------------------------------------------------------
   Artwork upload box. Dashed edge so it reads as a drop target even though the
   upload itself happens on Dropbox.
   -------------------------------------------------------------------------- */
.uploadbox {
  border: 1px dashed var(--blue); border-radius: var(--r-lg);
  background: var(--blue-wash); padding: var(--s3); margin-top: var(--s3);
}
.uploadbox h3 { font-size: 1.02rem; margin-bottom: var(--s2); }
.uploadbox .btn { width: auto; }
.uploadhint {
  font-size: 0.86rem; color: var(--text-3); margin: 10px 0 0; max-width: 46ch;
}
.uploadbox .btn svg { width: 16px; height: 16px; }
.checkline { display: flex; gap: 10px; align-items: center; margin-top: var(--s2); }
.checkline input { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.checkline label { font-size: 0.92rem; color: var(--text-2); margin: 0; }
@media (max-width: 640px) { .uploadbox .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   Step line. A slim progress rail above a form, numbered circles joined by a
   rule. Deliberately short: a full three-column block was tried here first and
   pushed the form off the first screen, which is the opposite of the point.
   -------------------------------------------------------------------------- */
.stepline {
  list-style: none; position: relative; counter-reset: s;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--s5);
}
/* The joining rule sits behind the circles, stopping at the outer two centres. */
.stepline::before {
  content: ""; position: absolute; top: 15px; left: 16.66%; right: 16.66%;
  height: 2px; background: var(--line); z-index: 0;
}
.stepline li {
  position: relative; z-index: 1; padding-top: 44px; text-align: center;
  font-size: 0.92rem; line-height: 1.35; color: var(--text-3);
}
.stepline li::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper);
  color: var(--text-3); font-weight: 700; font-size: 0.88rem;
  display: grid; place-items: center;
}
/* Step one is where the visitor actually is, so it carries the brand colour. */
.stepline li.on { color: var(--blue); font-weight: 600; }
.stepline li.on::before { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 560px) {
  .stepline { grid-template-columns: 1fr; gap: var(--s2); }
  .stepline::before { display: none; }
  .stepline li {
    padding: 0 0 0 44px; text-align: left; min-height: 32px;
    display: flex; align-items: center;
  }
  .stepline li::before { top: 50%; left: 0; transform: translateY(-50%); }
}

/* --------------------------------------------------------------------------
   Setup notice. Yellow, loud, deleted before launch.
   -------------------------------------------------------------------------- */
.setup {
  background: #FFF8E1; border: 1px dashed #E6A700; border-radius: var(--r);
  padding: 15px 18px; font-size: 0.89rem; color: #7A5A00; margin-bottom: var(--s4);
}
.setup strong { color: #7A5A00; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ftr { background: var(--ink); color: var(--on-dark-2); padding-block: var(--s6) var(--s3); }
.ftr-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: var(--s5) var(--s4); }
.ftr img { height: 40px; width: auto; margin-bottom: 12px; }
/* The tagline that lives inside their logo artwork, set as text so it is
   readable on the dark footer. */
.ftr-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7FB0FF; margin-bottom: var(--s2);
}
.ftr .ftr-tag + p { margin-top: 0; }
.ftr h4 { color: #fff; font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: var(--s2); }
.ftr ul { list-style: none; }
.ftr li { margin-bottom: 11px; }
.ftr a:hover { color: #7FB0FF; }
.ftr p { color: var(--on-dark-2); font-size: 0.95rem; }
.ftr-base {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  font-size: 0.87rem;
}

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-photo img { transition: none; }
}

/* --------------------------------------------------------------------------
   Breakpoints.  Rule: nothing may exceed the viewport at any width.
   -------------------------------------------------------------------------- */
/* The full nav needs ~1165px of room, and the two social icons right of the
   Free Quote button added about 80px to that on 2026-09-11. Below this it must
   become the burger, otherwise the header runs past the content column and then
   off the page. Raised from 1220px when the icons went in. */
@media (max-width: 1300px) {
  .mainnav, .hdr-tel { display: none; }
  .burger { display: flex; }
}

@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  /* Hero stacks: photo drops below the copy and un-skews. */
  .hero {
    display: block; min-height: 0;
    padding-block: clamp(48px, 8vw, 76px);
  }
  .hero-copy { max-width: none; }
  .hero-photo {
    position: static; transform: none;
    width: calc(100% - 44px);
    max-width: calc(var(--wrap) - 44px);
    margin: var(--s4) auto 0;
    border-radius: var(--r-lg);
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-lg);
  }
  .hero-photo img { transform: none; }
  .phead .wrap::before { right: -40%; }
}

@media (max-width: 940px) {
  .formgrid, .formgrid.wide { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 860px) {
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Strips stack: photo above the copy, no skew, no diagonal to cross. */
  .strip { display: block; min-height: 0; }
  .strip-copy { width: auto; padding: var(--s4); }
  .strip.flip .strip-copy { margin-left: 0; }
  .strip-photo {
    position: static; transform: none;
    aspect-ratio: 16 / 10;
  }
  .strip.flip .strip-photo { right: auto; left: auto; }
  .strip-photo img { transform: none; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  section { padding-block: var(--s6); }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .logo img { height: 27px; }
  .ftr img { height: 32px; }
  .hdr-side .btn { display: none; }
  .trustbar ul { gap: 10px var(--s3); }
  .trustbar li { font-size: 0.95rem; }
  .btn { width: 100%; }        /* full-width buttons read better on a phone */
  .btn-row { flex-direction: column; }
  .strip-copy .btn { align-self: stretch; }
}

@media (min-width: 1081px) { .drawer { display: none; } }

/* Print: nobody prints this, but a broken print view looks careless */
@media print {
  .hdr, .drawer, .cta, .btn { display: none !important; }
  body { color: #000; background: #fff; }
}