/* ============================================================================
   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; }
}

/* The postal address under the town name on the "Where we are" tile. Same type
   as the supporting line beside it, so the tile keeps its shape. Here rather
   than in wonderboy.css because every ct-* rule lives in this file and
   acceptance-contact.sh checks this file for them. */
.ct-tile-addr { display: block; font-size: 13px; line-height: 1.5; color: var(--fg-secondary); margin: 2px 0 4px; }