/* ==================================================================
 * iTech Valet — FAQs  (/faqs/)
 *
 * 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-24 at 375, 599, 600, 744, 768, 769, 900, 992, 993, 1100, 1201,
 * 1280 and 1512.
 *
 * ASSET PATHS ARE ../../img/ - two levels, because this file sits in
 * assets/css/pages/. One level silently killed six homepage backgrounds
 * once; the bands rendered their fallback colours and nothing errored.
 *
 * THE SIMPLEST PAGE ON THE SITE. Five bands, no photographs, no cards,
 * no columns, no borders, no shadows, no radii - a sweep of all four
 * border edges, box-shadow, border-radius, background-colour and
 * background-image across every element in the five content bands
 * returns the three row artworks and nothing else. It is the first page
 * where that sweep has come back empty, which is worth saying out loud
 * rather than leaving as an absence of notes.
 *
 * THE ARTWORK IS THE HOMEPAGE'S, and the files are already in the theme -
 * confirmed byte-identical to the originals in the capture. This page
 * defines its own class names for them because home.css is only loaded on
 * the front page; the same call /about/ makes for the globe.
 *
 * THE ORIGINAL STEPS EXACTLY ONCE, at 768/769, and everything moves at
 * that one width: the gutter, both heading sizes, the body size, both
 * leadings on the h1, and every module margin. Nothing at all changes at
 * 992/993 or 1200/1201 - measured on both sides of each.
 *
 * THE BODY COPY IS 18px ON A PHONE, NOT --t-lead's 20, AND THAT IS
 * DELIBERATE. This is the first page where the two disagree: every page
 * built so far happened to have a 20px phone body on live, so the token
 * matched by luck rather than by rule.
 *
 * The settled model's actual rule is "TABLET READS AS DESKTOP" - body
 * copy takes its desktop value FROM 600 UP. It says nothing about
 * phones, and the "identical to live below 599" line in every previous
 * page's notes is a result, not a requirement. So the rule is applied
 * where it applies and the original is matched where it does not:
 *
 *   <= 599      identical to live
 *   600 - 768   body 22 against live's 18, headings 70/50 against 50/40
 *   >= 769      identical to live, at every width above it
 *
 * MEASURED, because the alternative was tried first: shipping --t-lead's
 * 20px on a phone made the page 1,144px longer at 375 - 6,497 against the
 * original's 5,353, or +21%, about one and a third extra screens on a
 * page people scan for one answer. That is a real cost for two points of
 * type on the one page whose length is already its main problem.
 *
 * THE OPEN QUESTION, and it is Gerek's: a phone reader now gets 18px here
 * and 20px on /about/, /services/ and /ai-visibility-check/. If that
 * inconsistency matters more than the length, section 01's `font-size`
 * becomes `var(--t-lead)` and section 05's override comes out - two
 * lines, and the +21% comes back with them.
 *
 * SECTION HEADINGS ARE PINNED AT 50, NOT --t-h2's 60. The original holds
 * 50 from 769 all the way up and never reaches 60. These four are
 * grouping labels inside one page rather than band titles introducing
 * their own subject, so the lower tier is the original being right rather
 * than the original being inconsistent. --t-h2 is deliberately not used.
 *
 * NEVER WRITE A BARE CLAMP FOR A FONT SIZE. Every clamp in this theme was
 * exact at 1280 and 375 and wrong at every width between, because a clamp
 * ramps where the original steps. The pattern is the phone value in the
 * base rule, followed by a min-width override.
 *
 * 01 BAND FRAME AND SHARED TYPE
 * 02 BAND COLOUR AND ARTWORK
 * 03 HERO
 * 04 THE QUESTION LISTS
 * 05 TABLET AND DESKTOP TYPE  (>= 600)
 * 06 LAID OUT  (>= 769)
 * ================================================================== */


/* ==================================================================
 * 01 BAND FRAME AND SHARED TYPE
 *
 * The base rules are the PHONE values, so a browser that matches none of
 * the queries below still reads correctly.
 * ================================================================== */

.faq-band {
	/* The module inset. Measured: the band runs 40 -> 1240 at a 1280
	   viewport and its copy runs 60 -> 1220. That 20px is Beaver Builder's
	   module margin and it sits on the module, not the container. */
	--faq-inset: 20px;
}

/* THE GUTTER IS ZERO WHILE STACKED. Measured: the live row padding goes
   from `20px 20px` to `20px 0` below 769, so the module inset becomes the
   whole margin and copy lands at 20 inside a 375 viewport - where the
   original's does. main.css puts 20px on every .section, so this has to
   take it off again rather than never adding it. */
.section.faq-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, with each other or with the
   container, which lets the original's margins be transcribed literally.
   `align-content: start` keeps each row its own height. */
.faq-band > .container {
	display: grid;
	align-content: start;
}

/* Body copy. Measured 22px on a 31.9px line at 1280 and 18 on 26.1 at
   375 - a 1.45 line-height at both, which is the site's --lh-lead and
   this page's own rhythm throughout. See the header for why the phone
   size is --t-lead's 20 rather than the original's 18.

   WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle
   reports 400 on the live spans, and the live page requests Lexend 100,
   300 and 700 only - so that 400 resolves back down to the 300 face that
   is actually loaded. This theme DOES load a real 400, so writing 400
   here would ship visibly heavier copy than the original. Confirmed by
   measuring a rendered string rather than by reading the cascade. */
.faq-band p,
.faq-band li {
	font-size: 18px;              /* the ORIGINAL's phone value; steps in section 05 */
	font-weight: 300;
	line-height: var(--lh-lead);
}

/* Section headings. main.css supplies Bebas and uppercase through
   .section-title; the size, leading, colour, alignment and margins are
   this page's own. 1.4 leading on a display face is unusually loose and
   it is measured at every width - 56 on 40 and 70 on 50. */
.faq-band .faq-title {
	margin: 20px var(--faq-inset);
	font-size: 40px;              /* measured floor; steps in section 05 */
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
}

/* INLINE LINKS ARE NOT STYLED HERE ANY MORE. One site rule, main.css
 * section 02b: --c-link, no underline, --c-orange on hover.
 *
 * FOUR OF THIS PAGE'S FIVE LINKS TAKE IT. The three in band 2 and the
 * one in band 5 sit in black copy on white, where --c-link measures
 * 4.53:1 on the ground and 4.64:1 against the copy - both bars clear,
 * at 375 and at 1280.
 *
 * BAND 4 OPTS OUT with `links-inherit` in the template, and it is the
 * one band on the page whose type is neither black nor white: heading,
 * questions and answers are all --c-blue (see `.faq-start p` below,
 * transcribed from live). --c-link measures 4.49:1 on the artwork behind
 * it - fine - and 1.38:1 against the --c-blue copy it sits in. With the
 * underline gone the link would be invisible inside its own sentence.
 * It keeps the copy colour and the underline.
 *
 * The two dark bands carry `links-inherit` too. Neither holds a link
 * today; the class is on the section so that adding one cannot quietly
 * put --c-link on the dark artwork. */


/* ==================================================================
 * 02 BAND COLOUR AND ARTWORK
 *
 * FIVE BANDS, THREE COLOURS, and it is not a dark/light switch. Bands 1
 * and 3 sit on dark artwork and set everything white. Bands 2 and 5 have
 * no artwork and set everything BLACK - not the navy main.css gives every
 * heading, which is why .faq-title has to restate it. Band 4 sits on the
 * light white-grey artwork and sets heading, questions and answers alike
 * to --c-blue.
 *
 * A sweep that only asked "is this band dark?" would have got band 4
 * wrong and left it navy-on-grey.
 * ================================================================== */

.faq-band,
.faq-band .faq-title,
.faq-band .faq-q { color: var(--c-ink); }

.faq-dark,
.faq-dark .faq-title,
.faq-dark .faq-q,
.faq-dark h1,
.faq-dark p,
.faq-dark li { color: var(--c-white); }

.faq-start,
.faq-start .faq-title,
.faq-start .faq-q,
.faq-start p { color: var(--c-blue); }

.bg-faq-hero,
.bg-faq-dark,
.bg-faq-grey {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Shared with the homepage - one file each, not duplicated. */
.bg-faq-hero { background-image: url("../../img/bg/home-hero.webp"); }
.bg-faq-dark { background-image: url("../../img/bg/home-dark-01.webp"); }
.bg-faq-grey { background-image: url("../../img/bg/home-white-grey.webp"); }


/* ==================================================================
 * 03 HERO
 *
 * The hero ARTWORK on a normal 1200 band. Measured: the row content is
 * 1200 wide at 1280 and 1512 alike, where the homepage and /about/ heroes
 * both run to 1400. It borrows the picture, not the width - which is why
 * the band carries no `section--hero` class.
 * ================================================================== */

.faq-hero .faq-hero__title {
	margin: 20px var(--faq-inset);
	font-size: 50px;              /* measured floor; steps in section 05 */
	line-height: 1.1;             /* the ONE leading that changes at 600 */
	text-align: center;
}

.faq-hero .faq-hero__intro {
	margin: 20px var(--faq-inset);
	text-align: center;
}


/* ==================================================================
 * 04 THE QUESTION LISTS
 *
 * One block per band holding every question and answer in it, 10px apart
 * and nothing after the last. Measured, and uniform: a question is NOT
 * given extra air above it, so the pairs read as one continuous list
 * rather than as thirteen separate blocks.
 * ================================================================== */

.faq-list { margin: 0 var(--faq-inset) 20px; }

/* The questions. <h3> in the markup, Lexend 700 at the body size on the
   body leading - which is exactly what the original's <p><b> renders as,
   so the change is structural and nothing moves. Every value here
   overrides main.css's own h3 rule, which would otherwise supply --t-h3,
   navy, and var(--s-4) of tail. */
.faq-list .faq-q {
	margin: 0 0 10px;
	font-family: var(--f-body);
	font-size: 18px;              /* tracks the answers exactly; steps in section 05 */
	font-weight: 700;
	line-height: var(--lh-lead);
	letter-spacing: normal;
	text-transform: none;
}

.faq-list .faq-a { margin: 0 0 10px; }

/* SCOPED TO THE LIST, not to `.faq-band p`. Written that way it is
   (0,2,1) and outranks every single-class rule in this file - on /about/
   the same shortcut silently deleted a 100px tail. */
.faq-list > :last-child { margin-bottom: 0; }


/* ==================================================================
 * 05 TABLET AND DESKTOP TYPE  (>= 600)
 *
 * TABLET READS AS DESKTOP. Gerek's rule, and on this page it overrides
 * the original across the whole 600-768 range, where the original is
 * still on its phone scale. main.css moves --t-lead to 22 here on its
 * own; the two heading sizes are this page's.
 * ================================================================== */

@media (min-width: 600px) {

	/* 22px, which is what --t-lead already resolves to at every width
	   from here up - so the token is used rather than the number, and
	   this page moves with the site if the site ever moves. The questions
	   track the answers exactly; they are the same copy at two weights. */
	.faq-band p,
	.faq-band li,
	.faq-list .faq-q { font-size: var(--t-lead); }

	/* 70/1.4. The size and the leading step together - this is the one
	   heading on the page whose leading changes, from 1.1 to 1.4. */
	.faq-hero .faq-hero__title {
		font-size: 70px;
		line-height: 1.4;
	}

	/* 50, and it stays 50 at every width above this one. See the header
	   for why --t-h2's 60 is deliberately not used. */
	.faq-band .faq-title { font-size: 50px; }
}


/* ==================================================================
 * 06 LAID OUT  (>= 769)
 *
 * The original's own and only breakpoint. Everything in here is rhythm:
 * the gutter and the module margins the original grows when it has the
 * room. There is no geometry, because there are no columns on this page.
 * ================================================================== */

@media (min-width: 769px) {

	/* The gutter comes back. main.css already puts it on .section; this
	   only stops section 01 from taking it away again. */
	.section.faq-band { padding-inline: var(--gutter); }

	/* 60 above every heading, against 20 stacked. */
	.faq-hero .faq-hero__title,
	.faq-band .faq-title { margin: 60px var(--faq-inset) 20px; }

	/* 60 of tail under the intro and under every list, against 20. It is
	   what separates one subject from the next once the page is wide
	   enough for the separation to read. */
	.faq-hero .faq-hero__intro { margin: 20px var(--faq-inset) 60px; }
	.faq-list { margin-bottom: 60px; }
}