/* ============================================================================
   Zabtek Web Solutions
   Design, build, host. One company that answers the phone.

   Tokens come from the approved Stitch direction ("Zabtek 2026: design, build,
   host"). Two corrections were made for accessibility, both measured:
     - brand orange on paper is 2.27:1 and white on orange is 2.41:1, so neither
       is used for text. Orange is a surface and an accent.
     - ink on orange is 6.88:1, so orange buttons carry near-black text, and
       #ad5a00 (4.67:1 on paper) covers orange-coloured text on light ground.
   ========================================================================== */

:root {
  /* ── colour ───────────────────────────────────────────────────────────── */
  --ink: #1b1f23;          /* near-black, the structural colour            */
  --ink-2: #2c3238;        /* raised dark surfaces                          */
  --ink-3: #454d55;        /* body copy on paper                            */
  --paper: #faf8f5;        /* warm off-white page                           */
  --paper-2: #f2eee8;      /* alternating band                              */
  --brand: #ff8705;        /* orange: surfaces, rules, accents. NOT text on light */
  --brand-text: #ad5a00;   /* orange for text on light ground (4.67:1)      */
  --teal: #0e7c86;         /* secondary: links, technical accents (4.67:1)  */
  --line: #e2ddd5;         /* hairlines on paper                            */
  --line-dark: rgba(250, 248, 245, .14);

  /* ── type ─────────────────────────────────────────────────────────────── */
  --ff-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ── space ────────────────────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 72px; --s7: 112px;

  --maxw: 1240px;
  --measure: 66ch;
  --radius: 3px;      /* engineered, not soft: corners stay near-sharp */
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
input, button, select, textarea { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--ff-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-3);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(38px, 5.6vw, 68px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 21px; letter-spacing: -.01em; }
p { max-width: var(--measure); }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-3); max-width: 58ch; }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--brand-text); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .site-header :focus-visible {
  outline-color: var(--brand);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* ── layout ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--ink); color: rgba(250, 248, 245, .78); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
/* :not(.btn) matters. Without it this rule beats .btn--primary on specificity
   and paints the button label brand orange ON the brand orange fill, so every
   CTA button inside a dark section renders as an empty orange rectangle. */
.section--dark a:not(.btn) { color: var(--brand); }

/* The label style used throughout: technical, spaced, small. */
.label {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-text);
}
.section--dark .label, .on-dark .label { color: var(--brand); }

.section-head { max-width: 60ch; margin-bottom: var(--s6); }
.section-head h2 { margin-top: var(--s2); }
.section-head p { margin-top: var(--s3); }

/* ── buttons ───────────────────────────────────────────────────────────── */
/* Orange fill with near-black text: 6.88:1, and it looks like equipment
   labelling rather than a generic CTA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 26px;
  font-family: var(--ff-body); font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
              transform .16s ease;
}
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: #e57700; color: var(--ink); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--on-dark { background: transparent; color: var(--paper); border-color: rgba(250,248,245,.4); }
.btn--on-dark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ── header ────────────────────────────────────────────────────────────── */
.utility {
  background: var(--ink); color: rgba(250,248,245,.72);
  font-size: 13px; letter-spacing: .02em;
}
/* Phone left, client login right, as in the approved design. */
.utility .wrap { display: flex; gap: var(--s4); align-items: center;
  justify-content: space-between; min-height: 38px; }
.utility a { color: rgba(250,248,245,.9); text-decoration: none; }
.utility a:hover { color: var(--brand); }
.utility__sep { color: rgba(250,248,245,.3); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 245, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s4);
  min-height: 76px; padding-block: 10px; }

/* Wordmark only, as approved: the name IS the logo until a real mark exists. */
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand__logo { display: block; height: 44px; width: auto; }
/* The compact lockup is fractionally wider per unit height, so the height steps
   down with it and the header keeps the same optical weight either side of the
   breakpoint. */
@media (max-width: 620px) { .brand__logo { height: 34px; } }

/* The phone sits in the nav as a peer of the links, bolder so it reads as a
   contact rather than a page. */
.nav__phone { font-weight: 700 !important; color: var(--ink) !important; }
.nav__phone:hover { color: var(--brand-text) !important; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius); white-space: nowrap; }
.nav a:hover { background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand); }

.nav-toggle { display: none; align-items: center; gap: 9px; min-height: 48px;
  background: transparent; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; }
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle__bars { display: inline-block; width: 18px; height: 2px; background: currentColor;
  position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }

/* ── hero ──────────────────────────────────────────────────────────────── */
/* Dark sections carry a faint engineered texture: a radial lift from the centre
   plus a fine grid or dot field. Kept under 0.05 alpha so it reads as material,
   not as pattern, and never touches text contrast. */
.hero {
  position: relative; overflow: hidden;
  color: rgba(250,248,245,.8);
  background-color: var(--ink);
  background-image: radial-gradient(circle at 50% 40%, var(--ink-2) 0%, var(--ink) 70%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image:
    linear-gradient(to right, rgba(250,248,245,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250,248,245,.05) 1px, transparent 1px);
  background-size: 2rem 2rem;
}
.hero > * { position: relative; z-index: 1; }

/* Dark section with the grid + dot treatment, used by "Engineered for industry". */
.section--texture {
  position: relative; overflow: hidden;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at center, var(--ink-2) 0%, var(--ink) 100%),
    linear-gradient(rgba(250,248,245,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,248,245,.03) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}
.section--texture::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image: radial-gradient(rgba(250,248,245,.1) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}
.section--texture > * { position: relative; z-index: 1; }
.hero__inner { display: grid; gap: var(--s6); align-items: center;
  padding-block: var(--s7); }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.hero h1 { color: var(--paper); max-width: 19ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lede { font-size: clamp(16.5px, 1.5vw, 19px); color: rgba(250,248,245,.76);
  max-width: 52ch; margin-top: var(--s4); }
.hero .btn-row { margin-top: var(--s5); }
.hero__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-dark); }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The orange credential band. The one large orange surface on the site, and it
   works because the text on it is ink: 6.88:1, comfortably AA. */
.creds { background: var(--brand); border-bottom: 4px solid var(--ink); }
.creds ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px var(--s5); list-style: none; margin: 0; padding: 0; }
.creds li { padding: 18px 0; font-family: var(--ff-body); font-size: 13.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: var(--s5); }
.creds li + li::before { content: "\2022"; color: rgba(27,31,35,.45); font-size: 15px;
  margin-left: calc(var(--s5) * -1); }

/* Below 900px the row can no longer hold all four items, and the desktop
   recipe fails the moment it wraps: space-between only justifies the LAST
   line, and every wrapped line that happens to start with an li + li still
   renders its separator bullet at margin-left -40px. That bullet lands in the
   gutter, off the page at 320px, and shoves its own text about 5px right, so
   no two lines share a left edge. Rather than patch the separator, mobile gets
   its own device: the same bullet promoted from separator to leading marker,
   on a grid, so every line opens identically and the left edges stack. */
@media (max-width: 899px) {
  .creds ul { display: grid; grid-template-columns: minmax(0, 1fr);
    justify-content: start; gap: 0; padding-block: 6px; }
  .creds li { padding: 9px 0; gap: 11px; }
  /* Both selectors, because the desktop rule above is the more specific of the
     two and would otherwise keep its negative margin on items 2 to 4. */
  .creds li::before, .creds li + li::before { content: "\2022"; margin-left: 0;
    color: rgba(27,31,35,.45); font-size: 15px; }
}
/* Two up once a column can hold the longest credential ("Support from the
   builders", 255px) with room to spare. Below this it would wrap mid phrase. */
@media (min-width: 680px) and (max-width: 899px) {
  .creds ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); }
}

/* ── numbered service blocks ───────────────────────────────────────────── */
/* The page's one memorable device: a big index numeral, a hairline, and an
   alternating image. It reads like a spec sheet, which is the point. */
.svc { border-top: 1px solid var(--line); padding-block: var(--s6); }
.svc__grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .svc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
  /* nth-of-type, not nth-child: the section heading is a sibling here, so
     nth-child would count it and flip the whole alternation by one. */
  .svc:nth-of-type(even) .svc__media { order: -1; }
}
/* Large orange numerals: the index device the mockup leads with. Decorative
   rather than read aloud, so they are hidden from assistive tech. */
.svc__n { display: block; font-family: var(--ff-display); font-size: 34px; font-weight: 700;
  color: var(--brand); letter-spacing: -.01em; line-height: 1; }
.svc h2 { margin: var(--s3) 0 var(--s4); }
.svc h2.h-teal { color: var(--teal); }
.svc--first { border-top: 0; padding-top: 0; }
.svc__body > p + p { margin-top: var(--s3); }
.svc__media { border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.svc__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4);
  font-weight: 600; color: var(--brand-text); text-decoration: none; }
.svc__link:hover { gap: 12px; color: var(--ink); }
.svc__link svg { width: 16px; height: 16px; transition: transform .16s ease; }

/* ── process ───────────────────────────────────────────────────────────── */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.process__step { background: var(--ink); padding: var(--s5) var(--s4); }
.process__n { font-family: var(--ff-display); font-size: 13px; font-weight: 700;
  color: var(--brand); letter-spacing: .1em; }
.process__step h3 { margin: var(--s2) 0 10px; font-size: 19px; }
.process__step p { font-size: 15px; color: rgba(250,248,245,.72); }

/* Light variant: "How we work" sits on paper in the approved homepage. */
.process--light { background: var(--line); border-color: var(--line); }
.process--light .process__step { background: var(--paper); }
.process--light .process__n { color: var(--brand-text); }
.process--light .process__step h3 { color: var(--ink); }
.process--light .process__step p { color: var(--ink-3); }

/* ── industries ────────────────────────────────────────────────────────── */
.industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s4); }
.industry { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); }
/* On the textured dark band the cards become frames rather than surfaces. */
.section--texture .industry { background: rgba(250,248,245,.05); border-color: rgba(250,248,245,.12); }
.section--texture .industry h3 { color: var(--paper); }
.section--texture .industry p { color: rgba(250,248,245,.72); }
.section--texture .industry__k { color: #4fc3cd; }   /* teal lifted for dark ground */
.industry img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.industry__body { padding: var(--s4); }
.industry__k { font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); }
.industry h3 { margin-top: 6px; font-size: 20px; }

/* ── spec table ────────────────────────────────────────────────────────── */
.specs { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.specs caption { text-align: left; color: var(--ink-3); padding-bottom: var(--s3); }
.specs th, .specs td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.specs thead th { background: var(--ink); color: var(--paper); font-family: var(--ff-display);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 0; }
.specs thead th:first-child { background: var(--ink); }
.specs tbody th { font-weight: 600; color: var(--ink); }
.specs td { color: var(--ink-3); }
.specs .yes { color: var(--teal); font-weight: 600; }
.specs .no { color: #8b8177; }
.specs tbody tr:hover { background: var(--paper-2); }

/* ── service areas ─────────────────────────────────────────────────────── */
.areas { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.areas li { border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 11px 17px; font-size: 15px; color: rgba(250,248,245,.86); }
.areas li::before { content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--brand); margin-right: 10px; vertical-align: 2px; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.form-card { background: var(--paper); border-radius: var(--radius); padding: var(--s5);
  border-top: 3px solid var(--brand); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field .req { color: var(--brand-text); }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 13px 14px; background: #fff; color: var(--ink);
  border: 1px solid #d6cfc5; border-radius: var(--radius);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--ink); }
.field__hint { font-size: 13px; color: #6f665c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  margin-top: var(--s4); }
.form-note { font-size: 13px; color: #6f665c; max-width: 46ch; }

/* ── contact panel ─────────────────────────────────────────────────────── */
/* min-width:0 because a grid item defaults to min-width:auto, which lets the
   track grow to the item's min-content. The form card's min-content is the
   230px form track plus 80px of padding, so without this the single-column
   contact grid grew wider than the page and clipped the card's right edge. */
.contact-grid { display: grid; gap: var(--s5); align-items: start; }
.contact-grid > * { min-width: 0; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1.4fr .8fr; gap: var(--s6); } }
/* Light is the DEFAULT here and dark is the variant. This list appears on paper
   on the contact page and inside a dark band on the homepage; a white-on-dark
   default renders it invisible unless every caller remembers to opt in, which
   is exactly what happened on contact.html. */
.form-card { border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.contact-list { list-style: none; padding: 0; margin-top: var(--s4); }
.contact-list li { display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line); }
.contact-list li:first-child { border-top: 0; }
.contact-list svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; margin-top: 3px; }
.contact-list__k { font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #6f665c; }
.contact-list__v { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.contact-list__v a { color: var(--ink); text-decoration: none; }
.contact-list__v a:hover { color: var(--brand-text); }

/* Dark variant, for the list inside any dark band. */
.on-dark .contact-list li { border-top-color: var(--line-dark); }
.on-dark .contact-list svg { color: var(--brand); }
.on-dark .contact-list__k { color: rgba(250,248,245,.55); }
.on-dark .contact-list__v { color: var(--paper); }
.on-dark .contact-list__v a { color: var(--paper); }
.on-dark .contact-list__v a:hover { color: var(--brand); }

/* Anything awaiting a real value from Zabtek. Visible on purpose. */
.awaiting { border: 1px dashed #b3a99c; border-radius: var(--radius); padding: var(--s4);
  background: var(--paper-2); color: var(--ink); }
.awaiting__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8a5a12; background: #fdf1dd; border-radius: 20px;
  padding: 4px 10px; margin-bottom: 10px; }
.awaiting p { font-size: 15px; }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(250,248,245,.66); font-size: 15px;
  padding-block: var(--s6) var(--s4); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s5); }
.site-footer h2 { font-family: var(--ff-body); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
  margin-bottom: var(--s3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(250,248,245,.82); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.footer-brand__logo { display: block; height: 46px; width: auto; }
.footer-brand p { margin-top: 10px; max-width: 34ch; font-size: 14.5px; }
.footer-base { display: flex; flex-wrap: wrap; gap: 10px var(--s4); justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-dark);
  font-size: 13px; color: rgba(250,248,245,.5); }

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 48px; height: 48px; display: none; place-content: center;
  background: var(--brand); color: var(--ink); border: 0; border-radius: var(--radius);
  cursor: pointer; box-shadow: 0 8px 22px rgba(27,31,35,.28); }
.to-top:hover { background: var(--ink); color: var(--brand); }
.to-top.is-visible { display: grid; }

/* ── page head (inner pages) ───────────────────────────────────────────── */
.page-head { background: var(--ink); color: rgba(250,248,245,.78); padding-block: var(--s6); }
.page-head h1 { color: var(--paper); margin-top: var(--s2); font-size: clamp(34px, 4.4vw, 54px); }
.page-head .lede { color: rgba(250,248,245,.76); margin-top: var(--s4); }

/* Deliverables list: term left, description right, hairline separated. From the
   Stitch "Web Design Service" layout. Deliberately a list, not icon cards. */
/* The container must keep the page's own width and centring, because it carries
   .wrap too: narrowing .wrap itself leaves margin-inline:auto to re-centre the
   smaller box, which indents this section past every other one. Constrain the
   CONTENT instead, so the left edge lines up with the rest of the page. */
.deflist__head, .deflist dl { max-width: 940px; }
.deflist__head { border-bottom: 1px solid var(--line); padding-bottom: var(--s3);
  margin-bottom: 0; }
.deflist dl { margin: 0; }
.deflist__row { display: grid; gap: var(--s3); padding: var(--s4) 0;
  border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .deflist__row { grid-template-columns: 230px 1fr; gap: var(--s5); } }
.deflist dt { font-family: var(--ff-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.deflist dd { margin: 0; font-size: 15.5px; color: var(--ink-3); max-width: 62ch; }

/* Page hero with the short rule before the label, as generated. */
.page-head__label { display: flex; align-items: center; gap: 14px; }
.page-head__label::before { content: ""; width: 34px; height: 2px; background: var(--brand);
  flex: none; }

.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose ul { padding-left: 20px; max-width: var(--measure); }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--brand-text); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--s4); }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4);
  background: var(--paper); }
.card h3 { font-size: 19px; }
.card p { font-size: 15.5px; margin-top: 10px; }
.section--dark .card { background: var(--ink-2); border-color: var(--line-dark); }
.section--dark .card p { color: rgba(250,248,245,.74); }

/* ── responsive: mobile is designed, not shrunk ────────────────────────── */
@media (max-width: 1100px) {
  .nav a { font-size: 14.5px; padding-inline: 9px; }
}
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}
@media (max-width: 860px) {
  :root { --s7: 72px; --s6: 56px; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--s2) var(--s4) var(--s4);
    box-shadow: 0 18px 30px rgba(27,31,35,.10);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); }
  /* The hero repeats this call to action a few hundred pixels below, so a copy
     in the collapsed header bought no new action and cost roughly 75px above the
     fold on every page. It stays, but only once the menu is open. */
  .header-cta { display: none; width: 100%; margin-top: var(--s3); }
  .nav.is-open ~ .header-cta { display: inline-flex; }
  .utility { font-size: 12.5px; }
  .utility .wrap { justify-content: center; flex-wrap: wrap; gap: 6px var(--s3);
    padding-block: 8px; text-align: center; }
  .hero .btn-row .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .specs { font-size: 14.5px; }
  .specs th, .specs td { padding: 12px 12px; }
}

/* Narrow phones. Measured at 320px: the header needed brand 160 + gap 24 +
   Menu 98 = 281px against 272px of content width, so the toggle wrapped to its
   own row and the header stood 224px tall before the hero began. And the h1
   clamp floor of 38px was wide enough that "Answered by us." wrapped, leaving
   "us." orphaned on a fourth line. Trimming the gutter, the gap and the logo
   buys 33px, which is more than the 9px shortfall. */
@media (max-width: 380px) {
  .wrap { padding-inline: var(--s3); }
  .form-card { padding: var(--s4); }
  .site-header__inner { gap: var(--s3); }
  .brand__logo { height: 30px; }
  h1 { font-size: clamp(28px, 9.4vw, 38px); }
}

@media print {
  .site-header, .utility, .to-top, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
}

/* ── Domain search ─────────────────────────────────────────────────────────
   Posts to the WHMCS domain checker. The button carries INK on orange
   (6.88:1), never white on orange (2.41:1), per the palette note.          */
.domainband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.domainsearch__label {
  display: block; font-family: var(--ff-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2);
}
.domainsearch__row { display: flex; gap: var(--s2); }
.domainsearch__input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px var(--s3);
}
.domainsearch__input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.domainsearch__note { margin-top: var(--s2); font-size: 13.5px; color: var(--ink-3); }

/* A caveat that sits with the claim it qualifies, rather than in the footer
   where nobody reads it. Teal rather than orange: this is information, not a
   warning, and the page already uses orange for "confirm before launch". */
.note-inline {
  margin-top: var(--s4); padding: 14px 16px; max-width: 78ch;
  border-left: 3px solid var(--teal); background: rgba(14,124,134,.06);
  font-size: 15px; color: var(--ink-3);
}
.note-inline strong { color: var(--ink); }

/* ── Terms of service ────────────────────────────────────────────────────── */
/* [CONFIRM] markers have to survive a black-and-white print and a colour-blind
   reader, so they carry a border and a label rather than colour alone. */
.term-todo {
  display: inline-block; padding: 1px 7px; border: 1px solid var(--brand-text);
  border-radius: var(--radius); background: rgba(255,135,5,.10);
  color: var(--brand-text); font-size: 13px; font-weight: 600;
  /* These must wrap. Two of the markers carry a whole sentence, and nowrap made
     the longest one 672px wide, which pushed the terms page into horizontal
     scroll on a 390px phone. max-width stops any future one doing it again. */
  white-space: normal; overflow-wrap: break-word; max-width: 100%;
}
.term-flag {
  padding: 14px 16px; border-left: 3px solid var(--brand);
  background: rgba(255,135,5,.07);
}
.terms-meta { font-size: 14px; color: var(--ink-3); }
.prose h2[id^="t"] { scroll-margin-top: 90px; }

/* ── Form states (PHP build) ─────────────────────────────────────────────── */
/* Both use a left rule and a tinted ground rather than colour alone, so the
   state is still legible to someone who cannot distinguish the hues. */
.form-sent {
  padding: var(--s4); border-left: 3px solid var(--teal);
  background: rgba(14, 124, 134, .07);
}
.form-sent h3 { font-family: var(--ff-display); margin: 0 0 var(--s2); color: var(--ink); }
.form-sent p { margin: 0; color: var(--ink-3); }
.form-errors {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 3px solid #b3261e; background: rgba(179, 38, 30, .06); color: var(--ink-3);
}
.form-errors p { margin: 0 0 var(--s2); }
.form-errors ul { margin: 0; padding-left: 1.1rem; }

/* ── Hosting plans ───────────────────────────────────────────────────────── */
.plans__head { max-width: var(--measure); margin-bottom: var(--s5); }
.plans__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); align-items: start; }
.plan {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4);
}
.plan--featured { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
/* Three tiers get more width each, so a card can carry a line of positioning
   instead of a bare SKU. min-height keeps the prices on one baseline when one
   subtitle wraps to two lines and the others do not. */
.plans__grid--3 { grid-template-columns: repeat(3, 1fr); }
.plan__name { font-family: var(--ff-display); font-size: 18px; margin: 0; }
.plan__sub { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); min-height: 2.6em; }
.plan__price { margin: var(--s2) 0 var(--s3); }
.plan__amount { font-family: var(--ff-display); font-size: 32px; font-weight: 700; color: var(--ink); }
.plan__per { font-size: 14px; color: var(--ink-3); }
.plan__specs { list-style: none; margin: 0 0 var(--s4); padding: 0; font-size: 14.5px; color: var(--ink-3); }
.plan__specs li { padding: 7px 0; border-top: 1px solid var(--line); }
.plan__specs li:first-child { border-top: 0; }
.plan__cta { margin-top: auto; width: 100%; justify-content: center; }
.plans__foot { margin-top: var(--s4); font-size: 15px; color: var(--ink-3); }
/* Same "confirm before launch" treatment the spec table already uses on this
   page, so an unconfirmed number never reads as a settled one. */
.plans__pending {
  margin-top: var(--s3); max-width: 78ch; padding: 12px 14px;
  border-left: 3px solid var(--brand); background: rgba(255,135,5,.07); color: var(--ink-2);
}

@media (max-width: 1000px) {
  .plans__grid { grid-template-columns: repeat(2, 1fr); }
  .plans__grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) { .plans__grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .plan__sub { min-height: 0; } }
@media (max-width: 820px) {
  .domainband__grid { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 560px) {
  .plans__grid { grid-template-columns: 1fr; }
  .domainsearch__row { flex-direction: column; }
  .domainsearch__row .btn { width: 100%; justify-content: center; }
}