/* ==================================================================
 * iTech Valet — Contact  (/contact/)
 *
 * Loaded ONLY on this page. See functions.php.
 *
 * !! EVERY PAGE ON THIS SITE IS CUSTOM. Nothing here is expected to be
 * reused, and nothing here may be promoted into main.css because it
 * "looks generic" - the next page measures differently.
 *
 * Every number below was read off the LIVE page through the DOM on
 * 2026-08-25 at 375, 599, 600, 744, 768, 769, 900, 992, 993, 1100, 1201,
 * 1280 and 1512.
 *
 * ONE BAND, and the smallest page on the site. A sweep of all four border
 * edges, box-shadow, border-radius, background-colour and background-image
 * across every element in the band returns the four form controls and
 * nothing else. There is no artwork on this page at all - the row is
 * `fl-row-bg-none` and the only picture in the document is the header
 * logo.
 *
 * THE COLUMNS ARE 50/50 AND THE INSETS ARE NOT SYMMETRICAL. At 1280:
 *
 *   band container      40 -> 1240   (1200 wide)
 *   h1 and intro        60 -> 1220   (1160, module inset 20 each side)
 *   left column         40 -> 640    (600, NO inset - it is a column)
 *   the form inside it  60 -> 620    (560, module inset 20 each side)
 *   right column       640 -> 1240   (600)
 *   its copy           660 -> 1220   (560)
 *
 * So a 20px module inset applies to modules and never to columns. Reading
 * the 1160 off the h1 and applying it to the row is how a page ends up
 * 20px narrow on one side only.
 *
 * THREE DELIBERATE DEPARTURES, ALL IN THE FORM, ALL REVERTIBLE IN ONE LINE
 * EACH. See section 04. Everything else on this page is transcribed.
 *
 * FOUR OTHER FINDINGS, recorded in BUILD-PLAN.md rather than fixed here:
 * live's schema advertises support@itechvalet.com as the customer-service
 * address and nothing reads that mailbox; live's one inline link renders
 * black with no underline; live's submit hover is 2.60:1; and live's form
 * does nothing at all with JavaScript off.
 * ================================================================== */


/* ==================================================================
 * 01 BAND FRAME
 * ================================================================== */

.cnt-band {
	/* The module inset. Beaver Builder's module margin, and it sits on the
	   module rather than on the container - see the header. */
	--cnt-inset: 20px;

	/* Measured: 20 above, 60 below. The row carries the only asymmetry on
	   the page and it is the same weight-at-the-bottom the homepage bands
	   use. */
	padding-block: 20px 60px;
}

/* THE GUTTER IS ZERO WHILE STACKED, exactly as on /faqs/. Live's row
   padding goes from `20px 20px` to `20px 0` below 769, so below that width
   the module inset IS the whole gutter and copy lands at 20 inside a 375
   viewport. main.css puts 20px on every .section, so this takes it off
   again and section 05 puts it back at 769. */
.section.cnt-band { padding-inline: 0; }

/* GRID, so the module margins below ADD rather than collapse. Beaver
   Builder wraps every module in its own div, and its measured gaps are the
   two margins added - the 20 under the h1 meeting the 20 over the intro is
   40px of air on the live page, and real siblings would collapse it to 20.
   Grid item margins never collapse. Same call as /faqs/. */
.cnt-band > .container {
	display: grid;
	align-content: start;
}


/* ==================================================================
 * 02 TYPE
 *
 * The base rules are the PHONE values, so a browser that matches none of
 * the queries in section 05 still reads correctly. Never a bare clamp -
 * see BUILD-PLAN.md, "Never write a bare clamp for a font size".
 * ================================================================== */

/* Bebas 70 on a 98px line - a 1.4 leading, which is loose for a display
   face and is measured at both ends: 70 on 50 at 375, 98 on 70 at 1280.
   main.css's .hero__headline supplies the family and the uppercase; the
   size, leading, colour, alignment and margins are this page's own.

   NOT `text-transform` from this file. Bebas Neue is drawn uppercase, so
   live's `text-transform: none` and main.css's `uppercase` render the same
   glyphs - the class is used for the family, not for the transform. */
.cnt-band .cnt-title {
	margin: 20px var(--cnt-inset);
	font-size: 50px;              /* the phone value; steps in section 05 */
	line-height: 1.4;
	letter-spacing: normal;
	text-align: center;
	color: var(--c-navy);
}

/* Body copy. Measured 22 on a 31.9px line at 1280 - a 1.45 leading, which
   is the site's --lh-lead - and 20 at 375.

   WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle
   reports 400 on the live spans, and the live page never loads a 400 face,
   so that 400 resolves back down to the 300 that is loaded. This theme
   DOES load a real 400, so writing 400 here would ship visibly heavier
   copy than the original. Same trap as /services/ and /faqs/. */
.cnt-band .cnt-intro,
.cnt-band .cnt-aside p {
	font-size: 20px;              /* the phone value; steps in section 05 */
	font-weight: 300;
	line-height: var(--lh-lead);
	color: var(--c-ink);
}

.cnt-band .cnt-intro {
	margin: 20px var(--cnt-inset);
	text-align: center;
}

/* INLINE LINKS ARE NOT STYLED HERE ANY MORE, and this page needs no
 * exception: its one band is black copy on white, where --c-link is
 * 4.53:1 on the ground and 4.64:1 against the copy. It takes the site
 * rule in main.css section 02b unchanged - --c-link, no underline,
 * --c-orange on hover, which is the articles' treatment.
 *
 * THE ORIGINAL STILL HAS NOTHING TO TRANSCRIBE HERE, and that took a
 * measurement to establish. The editor wrapped the link in `<span
 * style="color: #3366ff">`, but the module's own rule paints every
 * descendant `rgb(0,0,0)` at higher specificity - so the one inline link
 * on the live contact page renders BLACK, with no underline, in the
 * middle of a black sentence. Measured through the DOM, not read off the
 * markup. Not transcribed, for the same reason as the other five pages:
 * it leaves a link with no affordance at all. */


/* ==================================================================
 * 03 THE TWO COLUMNS
 *
 * 50/50 side by side, stacked below 769 and capped at 400px each while
 * stacked - Beaver Builder's `.fl-col-small` rule, and the same 400px
 * reading measure /services/ and /about/ both turned out to need.
 * ================================================================== */

.cnt-cols {
	display: grid;
	gap: 0;
}

.cnt-col { min-width: 0; }

/* The 20px module inset, on the modules INSIDE the columns rather than on
   the columns themselves. */
.cnt-form-wrap,
.cnt-aside { margin-inline: var(--cnt-inset); }

/* Measured 60px of air above the right-hand copy at 1280 and 20 when the
   columns stack - the aside is optically centred against the form beside
   it, and that offset would be dead space once it sits underneath. */
.cnt-aside { margin-block: 20px 20px; }

/* The 400px cap sits on the COLUMN and the 20px inset on the MODULE, which
   is how live nests them - see the header. Putting the cap on the module
   would make the stacked form 360 wide instead of 400. */

.cnt-aside p + p { margin-top: 10px; }


/* ==================================================================
 * 04 THE FORM
 *
 * Geometry, colour and spacing transcribed from the live controls at
 * 1280. THREE DELIBERATE DEPARTURES, and each one is a single declaration
 * so it can be put back:
 *
 * 1. FAMILY. Live's controls are `Helvetica, Verdana, Arial` - Beaver
 *    Builder's default, and the only place on this site where a face
 *    other than Lexend or Bebas renders. The editor styled the SUBMIT
 *    BUTTON (Lexend 22/300, brand orange, 5px radius) and left the fields
 *    at the builder's default, which is what tells you the fields were
 *    never designed. Revert: `font-family: Helvetica, Verdana, Arial,
 *    sans-serif` on .cnt-field label/input/textarea.
 *
 * 2. BORDER COLOUR. Live's field border is #e6e6e6 on an #fcfcfc fill -
 *    MEASURED AT 1.22:1, against WCAG 1.4.11's 3:1 floor for the boundary
 *    of a user-interface component. On live's #f2f2f2 page ground it is
 *    faint; on this site's white one (Gerek's call, see main.css) it is
 *    very nearly invisible. #8f8f8f is 3.15:1 and is the lightest grey
 *    that clears the floor. Revert: `--cnt-border: #e6e6e6`.
 *
 * 3. INPUT TEXT COLOUR. Live paints the visitor's own typing #757575, the
 *    same grey as the placeholder, so a filled field and an empty one read
 *    at the same weight. The placeholder keeps live's grey; the value is
 *    --c-ink. Revert: `color: var(--cnt-grey)` on the control.
 * ================================================================== */

.cnt-form {
	--cnt-grey:   #757575;    /* live's label and placeholder grey, 4.61:1 on white */
	--cnt-fill:   #fcfcfc;    /* live */
	--cnt-border: #8f8f8f;    /* live is #e6e6e6 at 1.22:1 - see above */
	--cnt-error:  #dd4420;    /* live, 4.27:1 on white */
}

/* Measured 10px between groups, and nothing else - no group has padding. */
.cnt-field { margin-bottom: 10px; }

.cnt-field label {
	display: block;
	margin: 0 10px 5px 0;
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--cnt-grey);
}

/* 34px tall, and that height is the sum of the measured parts rather than
   a number: 6px padding + 20px line + 6px padding + 2px border. Writing a
   height here instead would break the moment a label wraps. */
.cnt-field input,
.cnt-field textarea {
	display: block;
	width: 100%;
	padding: 6px 12px;
	border: 1px solid var(--cnt-border);
	border-radius: 4px;
	background: var(--cnt-fill);
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	color: var(--c-ink);
}

/* 130px INCLUDING the border, which is live's exact value - six rows plus
   the padding comes to 134, so the height is stated rather than left to
   the row count. `resize: vertical` keeps it a starting size rather than a
   cap, which is what live's is too. rows="6" stays in the markup as the
   no-CSS fallback. */
.cnt-field textarea {
	height: 130px;
	min-height: 130px;
	resize: vertical;
}

.cnt-field input::placeholder,
.cnt-field textarea::placeholder {
	color: var(--cnt-grey);
	opacity: 1;                   /* Firefox dims placeholders by default */
}

/* The focus ring is main.css's amber, inherited. It is restated here only
   to pull the field's own border to the brand blue at the same time, so
   the focused control reads as focused even at a glance that misses the
   ring. */
.cnt-field input:focus-visible,
.cnt-field textarea:focus-visible { border-color: var(--c-blue-mid); }

.cnt-field [aria-invalid="true"] { border-color: var(--cnt-error); }

/* Live ships all five error strings in the markup at all times and toggles
   them with JavaScript. This prints only the ones that actually failed, so
   a screen reader is not read four messages about fields that are fine. */
.cnt-field__error {
	display: block;
	margin: 2px 0 5px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.45;
	color: var(--cnt-error);
}

/* THE SUBMIT IS NOT .cta-button, AND THAT IS THE ORIGINAL'S CALL. The pill
   with the white ring is the site's ONE conversion action - the AI
   Visibility Check - and live deliberately gives this a different, quieter
   shape: a flat orange rectangle on a 5px radius. Making it the pill would
   put two identical-looking primary buttons on one screen, one of which
   goes somewhere else entirely. */
.cnt-form__submit {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #d15f00;
	border-radius: 5px;
	background: var(--c-orange);
	font-family: var(--f-body);
	font-size: 22px;
	font-weight: 300;
	line-height: 26.4px;
	color: var(--c-white);
	text-align: center;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease);
}

/* LIVE'S HOVER IS NOT TRANSCRIBED. It repaints the label #2494e0 on a
   #cfe8fc fill - measured 2.60:1, against the 4.5:1 that 22px regular text
   needs. Darkening the fill keeps white on orange, moves the contrast the
   right way (3.40:1 -> 5.02:1) and is the same gesture as the site's own
   button, which deepens rather than inverts. */
.cnt-form__submit:hover,
.cnt-form__submit:focus-visible {
	background: #b35400;
	border-color: #b35400;
}

.cnt-form__submit:active { background: #9c4900; border-color: #9c4900; }

/* THE HONEYPOT. Off-screen rather than display:none - some bots skip
   hidden inputs, and none of them read aria-hidden. Not `visibility:
   hidden` either, for the same reason. */
.cnt-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The two outcomes. Both sit where the form was, so the answer appears
   exactly where the visitor was looking. */
.cnt-form__success,
.cnt-form__fail {
	margin: 0 0 10px;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 18px;
	font-weight: 300;
	line-height: var(--lh-lead);
}

.cnt-form__success {
	border: 1px solid var(--c-blue-mid);
	background: var(--c-blue-pale);
	color: var(--c-navy);
}

.cnt-form__fail {
	border: 1px solid var(--cnt-error);
	background: #fdf1ee;
	color: #8c2a13;               /* 6.4:1 on the fill above */
}


/* ==================================================================
 * 05 THE STEPS
 *
 * TWO breakpoints for type - 600 and 993 - and ONE for layout, at 769.
 * See BUILD-PLAN.md, "THE RESPONSIVE MODEL".
 *
 * Live steps its type at 769 and holds the phone scale up to an iPad mini.
 * The settled rule is TABLET READS AS DESKTOP, so the type takes its
 * desktop value from 600 up. Below 599 this page is identical to live.
 *
 * The LAYOUT step stays at live's 769, because that is where the row
 * padding, the column stacking and the 400px cap all move together.
 * ================================================================== */

@media (min-width: 600px) {
	.cnt-band .cnt-title  { font-size: 70px; }
	.cnt-band .cnt-intro,
	.cnt-band .cnt-aside p { font-size: 22px; }
}

@media (min-width: 769px) {
	/* The row gutter comes back. Below this the module inset is the gutter. */
	.section.cnt-band { padding-inline: var(--gutter); }

	.cnt-cols {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* Measured 60px above the right-hand copy once the two sit side by
	   side. It is optical alignment against the form's first label, not a
	   rhythm value, which is why it disappears when they stack. */
	.cnt-aside { margin-block: 60px 20px; }
}

/* THE 400px CAP. Beaver Builder applies `max-width: 400px` to every
   `.fl-col-small` once the columns stack, and both of this page's columns
   are small. It is the same reading measure /about/ and /services/ both
   turned out to need, and without it the form runs the full width of a
   tablet in portrait. */
@media (max-width: 768px) {
	.cnt-cols  { justify-items: center; }
	.cnt-col   { width: 100%; max-width: 400px; }
}

/* Touch screens never get a hover, so the submit needs to read as a
   control at rest. It already does - a filled orange rectangle is not
   ambiguous - but the field borders are the part that carries the
   affordance, and they are the reason for departure 2 above. Nothing else
   on this page changes for touch. */