/* ============================================================================
   Wonderboy Creative - the contact page.

   A verbatim port of the .ct-* rules in content/design/css/contact.css. That
   file also carried the mega menu; those rules went into wonderboy.css with the
   header, because the menu is on every page and this is not.

   Nothing here declares a token, a button or a form field. Tokens come from
   tokens.css, .wb-btn and .wb-form from wonderboy.css. This stylesheet is only
   the page's own layer.
   ============================================================================ */

/* ------------------------------------------------------------ CONTACT PAGE */

/* theme.json puts line-height:1.65 on body and WordPress emits it site-wide.
   The prototype's stylesheet has no body line-height, so everything on this
   page that does not name one was laid out against `normal`. Inheriting 1.65
   made each contact tile 23px taller, the form 26px taller and the page 29px
   longer than the design. Reset on this page's three sections only: the rules
   below that do name a line-height still win, exactly as in the prototype, and
   the quote modal on the home page - which shares .wb-form - is untouched. */
.ct-stage, .ct-reach, .ct-help { line-height: normal; }

.ct-stage{padding:44px 0 56px;background:var(--white)}
.ct-col{max-width:1040px;text-align:center}
.ct-eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-600);margin:0}
.ct-h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5.6vw,70px);line-height:.96;letter-spacing:-.028em;color:var(--midnight-900);margin:16px 0 24px}
.ct-h1 .ac{color:var(--hero-500)}
.ct-lede{font-size:21px;line-height:1.58;color:var(--fg-secondary);margin:0 auto 44px;max-width:88ch;text-wrap:pretty}

/* form card — centered head and chips, left-aligned fields */
.ct-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;text-align:left}
.ct-need{text-align:center}
.ct-card .wb-form{max-width:900px;margin:0 auto;gap:22px}
.ct-card .wb-form label{font-size:14px}
.ct-card .wb-form input,.ct-card .wb-form textarea{font-size:16px;padding:14px 16px}
.ct-need > label{display:block;margin-bottom:16px;font-size:15px}
.ct-chips{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}
.ct-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1.5px solid var(--gray-200);border-radius:var(--radius-pill);background:var(--white);cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:15px;white-space:nowrap;color:var(--fg-secondary);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.ct-chip:hover{border-color:var(--hero-300);color:var(--hero-600)}
.ct-chip.is-on{background:var(--hero-500);border-color:var(--hero-500);color:#fff}
.ct-chip svg{opacity:.85}
.ct-opt{color:var(--gray-400);font-weight:400}
.ct-submit{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px}
.ct-fine{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.5;color:var(--gray-500);margin:0}
.ct-fine svg{color:var(--success);flex-shrink:0}

/* reach: call, email, location, then response times */
.ct-reach{padding:20px 0 80px;background:var(--white)}
.ct-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.ct-tile{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
a.ct-tile:hover{border-color:var(--hero-300);box-shadow:0 6px 18px rgba(22,33,58,.07)}
.ct-tile-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--hero-50);color:var(--hero-600);flex-shrink:0}
.ct-tile-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-tile-txt em{font-family:var(--font-mono);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400)}
.ct-tile-txt b{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--midnight-900);letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-tile-txt span{font-size:14px;line-height:1.5;color:var(--gray-500)}
.ct-hours{margin-top:14px;padding:24px 26px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);text-align:left}
.ct-hours .ct-eyebrow{margin-bottom:14px}
.ct-hours-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ct-hours-row{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.ct-hours-row span{color:var(--gray-500)}
.ct-hours-row b{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--midnight-900)}

/* help articles — hidden until there are real articles to link */
.ct-help{padding:72px 0;background:var(--white);border-top:1px solid var(--gray-200)}
.ct-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.06;letter-spacing:-.02em;color:var(--midnight-900);margin:10px 0 32px}
.ct-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.ct-art{display:flex;flex-direction:column;gap:5px;padding:22px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base)}
.ct-art:hover{border-color:var(--hero-300);box-shadow:0 8px 20px rgba(22,33,58,.08);transform:translateY(-2px)}
.ct-art em{font-family:var(--font-mono);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-600)}
.ct-art b{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.2;color:var(--midnight-900)}
.ct-art span{font-size:13.5px;line-height:1.5;color:var(--gray-500)}

/* The design's responsive rules for this page, in its own source order: the
   760px block has to come last so its .ct-lede size wins over the 1080px one. */
@media (max-width: 1080px) {
	.ct-chips { flex-wrap: wrap; }
	.ct-lede { font-size: 19px; }
}
@media (max-width: 900px) {
	.ct-tiles { grid-template-columns: 1fr; }
	.ct-hours-grid { grid-template-columns: 1fr 1fr; }
	.ct-arts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.ct-stage { padding: 30px 0 40px; }
	.ct-reach { padding: 38px 0 52px; }
	.ct-help { padding: 48px 0; }
	.ct-card { padding: 26px 22px 28px; }
	.ct-lede { font-size: 17px; margin-bottom: 28px; }
	.wb-form-row { grid-template-columns: 1fr; }
}