/* Contact page — this page's own sheet, and nothing the shared layers already
   carry.
 *
 * The navy band that opens on the inquiry form, the three benefit cards, the
 * direct-contact band and the four questions. The palette, the spacing and the
 * type come from assets/css/tokens.css; .container, .section, .section--pale,
 * .section--navy, .section__head, .section__sub, .eyebrow, .btn, .form,
 * .fields, .field, .field--full, .field label, .field__req, .field__hint, the
 * input/select/textarea controls, .form__submit, .form__note, .feedback, the
 * .faq details/summary pair, .card-grid, .panel, .lift, .media-frame, .figure,
 * .page-hero and the channels component come from style.css, pages.css,
 * sections.css and the component that prints them. Restating one of those here
 * would be a second copy of a rule that already has one, so a reset that looks
 * missing below is usually the shared rule doing its job.
 *
 * This sheet owns five things:
 *
 *   .page-hero--contact .page-hero__inner   the band's two columns, form wider
 *   .page-hero--contact .form               the card, its button, and the parts
 *                                           of a field the shared field styles
 *                                           do not carry
 *   .contact-hero__*                        the proof rows and the shot strip
 *   .contact-direct__* + .contact__*        the shared channels on navy
 *   .faq__links / .faq__link                the ways on from an answer
 *
 * Every colour, radius, shadow, transition and space below is a token from
 * assets/css/tokens.css. Nothing is positioned absolutely, the only movement is
 * a colour change at the interaction speed, and this sheet is enqueued on the
 * contact page alone. */

/* --------------------------------------------------- The band's columns -- */
/* The band hands the wider column to the form and starts both columns at the
   top, so the copy and the card begin on one line. The shared .page-hero__inner
   gives its wider column to the first child and centres the two, which is the
   wrong way round here: the form is what the visitor came for, and a card
   shorter than the copy would float in the middle of the band. The gap is the
   site's 48px step. The copy stays first in the source and first on screen at
   every width, so nothing has to be reordered for a phone. */
.page-hero--contact .page-hero__inner{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);
  gap:var(--space-5);
  align-items:start;
}

/* Both columns hold pictures and controls, so neither may take its width from
   its widest child. */
.page-hero--contact .page-hero__copy,
.page-hero--contact .page-hero__form{min-width:0}

/* ----------------------------------------------------------- The card -- */
/* Read on navy, the inquiry form is a light card: the shared .form already
   carries the hairline, the radius and the 32px inset, so only the ground and
   the shadow are set here. The ground becomes the surface token rather than the
   shared pale, and the hairline stays the card's only edge — a second frame
   around it would read as a double border rather than as a panel on the band.
   The card also states its own text colour, so no line inside it can inherit
   the band's light blue: every line that carries text of its own already has a
   colour in style.css, and this is the floor under the rest. */
.page-hero--contact .form{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-card)}

/* pages.css paints every button inside a page hero sun-on-navy, and that rule
   reaches this one through .page-hero .btn. Inside the card the button is the
   site's ordinary accent button, so the accent pair and white text are stated
   here with the card in the selector. */
.page-hero--contact .form .btn{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-surface)}
.page-hero--contact .form .btn:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}

/* The card's heading and the line under it. The heading reads a step below the
   page's h1 rather than competing with it, and the intro takes the muted
   colour: the band's own light blue would be unreadable on white. The other
   lines in the card — labels, hints, the note under the button, the feedback
   line — already carry a card-appropriate colour in style.css. */
.page-hero--contact .form__title{margin:0 0 var(--space-2);font-size:clamp(20px,2.4vw,26px);color:var(--color-heading)}
.page-hero--contact .form__intro{margin:0 0 var(--space-3);font-size:14px;line-height:1.55;color:var(--color-muted)}

/* -------------------------------------------- The parts of a field -- */
/* Everything a field needs beyond the shared label, control and hint: the note
   under a control, the way on a note may carry, a fieldset's legend, the two
   column grid of pump figures, and the fieldset itself. */
.page-hero--contact .field__note{margin:var(--space-1) 0 0;font-size:12px;line-height:1.5;color:var(--color-muted)}
.page-hero--contact .field__link{font-weight:600;transition:color var(--transition-fast)}
.page-hero--contact .field__link:hover,
.page-hero--contact .field__link:focus-visible{color:var(--color-accent-dark)}

/* A <legend> inherits nothing from the shared .field label rule — it is not a
   label — so it copies that rule's size, weight, colour and gap and reads
   exactly like the fields beside it. The label's own gap is 7px, which the
   token scale does not hold; the nearest step, 8px, is used instead. */
.page-hero--contact .field__legend{margin:0 0 var(--space-1);padding:0;font-size:13px;font-weight:600;color:var(--color-navy)}

/* The four pump figures: two to a row, four in all. This grid is inside one
   fieldset, so it is not the shared .fields grid, which is the row the
   fieldset itself sits in. It becomes one column on a narrow screen — see the
   responsive block at the foot of this sheet. */
.page-hero--contact .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-2)}

/* A fieldset carries the browser's own frame, padding and min-content width,
   which would read as a box inside the .fields grid and could stop the grid
   shrinking. It is reset here so it sits in the grid like any other field row.
   The two role groups are shown and hidden by the form script through the
   hidden attribute, so that state is restated below under this sheet's own
   scope: the display set just above would otherwise out-rank the browser's
   [hidden] rule and the group nobody is answering would stay on screen. */
.page-hero--contact .field--group{display:block;min-width:0;margin:0;padding:0;border:0}
.page-hero--contact .field--group[hidden],
.page-hero--contact [data-role-group][hidden]{display:none}

/* ------------------------------------------------- The hero's proof rows -- */
/* Three short facts under the lede. They read as rows of structure rather than
   as three boxes: a hairline above each, the claim in white and one line of
   explanation under it, nothing framed and nothing filled. The hairline is the
   muted token, which is the quietest line the palette holds against navy. Each
   row is a label and a note that both arrive as <span>, so they are stacked
   here instead of running together as one line; the claim takes the surface
   token, which is the white the band's other headings use, and the note keeps
   the light blue the band hands down to it. */
.contact-hero__trust{margin:var(--space-4) 0 0;padding:0;list-style:none;max-width:520px}
.contact-hero__trust li{padding-top:var(--space-2);border-top:1px solid var(--color-muted)}
.contact-hero__trust li + li{margin-top:var(--space-2)}
.contact-hero__trust-label{display:block;font-size:15px;font-weight:600;color:var(--color-surface)}
.contact-hero__trust-note{display:block;font-size:13px;line-height:1.5}

/* --------------------------------------------- The hero's shot strip -- */
/* Three product photographs, read as one compact strip with the caption under
   each — evidence for the claim above them, not a gallery. The shared
   .media-frame--pad insets a large picture generously; a thumbnail wants a
   margin rather than a mat, so the inset steps down inside this strip only. */
.contact-hero__shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-5) 0 0;padding:0;list-style:none}
.contact-hero__shot{min-width:0}
.contact-hero__shots .media-frame{padding:var(--space-2)}
/* The shared caption is the muted grey, which disappears against navy. */
.contact-hero__shots .figure__caption{color:var(--color-line)}

/* -------------------------------------------------- The benefit cards -- */
/* The three cards are the shared .card-grid carrying the shared .panel and
   .lift at their own values — a picture frame, a title and one line. This page
   adds nothing to them, and this note is here so the next reader knows the
   absence is deliberate rather than forgotten. */

/* ------------------------------------------------- The direct channels -- */
/* The copy and the channel block side by side, one column on a narrow screen.
   The block itself is the shared channels component, which is styled for a
   light ground. Its own top offset is dropped so its hairline starts on the
   same line as the copy beside it, and the hairline is left as the component
   set it: the pale line token reads as a light rule on navy already. The three
   text colours are not left alone. The address and the chat are both links
   carrying .contact__mail, so one rule reaches both; left alone they would take
   the action blue, which is too dark on this ground, and the address line under
   them would take the muted grey, which is darker still. The links
   answer the pointer and the keyboard with the sun token and a rule under the
   words, and their focus ring — the site's ring is the action blue too — is
   redrawn in that same sun token, which is visible on navy. */
.contact-direct__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-5) var(--space-6);align-items:start}
.contact-direct .contact__info{margin-top:0;padding-top:var(--space-3)}
.contact-direct .contact__mail{color:var(--color-surface);transition:color var(--transition-fast)}
.contact-direct .contact__mail:hover,
.contact-direct .contact__mail:focus-visible{color:var(--color-sun);text-decoration:underline}
.contact-direct .contact__mail:focus-visible{outline-color:var(--color-sun)}
.contact-direct .contact__info p{color:var(--color-line)}

/* The map beside them: the world as a field of dots, with the one mark the site
   publishes on it. The drawing is printed by hober_svg_world_map() and takes
   every colour from here, so the same drawing reads on a light ground by
   changing these values alone. The land keeps the band's line colour at a low
   opacity — a dotted map is a texture rather than a chart, and its dots must not
   compete with the mark. The mark itself is the sun token, the one colour on
   this band that nothing else uses, and it is drawn three times over: a wide
   faint ring, a tighter ring and the dot at the middle, so the eye finds the
   place before it reads the words. The label sits over the dots, so it carries a
   halo in the band's own navy and a leader down to the ring. */
.contact-direct__map{min-width:0}
.contact-map{margin:0}
.contact-map__drawing{display:block;width:100%;height:auto}
.contact-map__land{color:var(--color-line);opacity:.45}
.contact-map__ping,
.contact-map__ring,
.contact-map__leader{fill:none;stroke:var(--color-sun)}
.contact-map__ping{stroke-width:.8;opacity:.35}
.contact-map__ring,
.contact-map__leader{stroke-width:1.1;opacity:.7}
.contact-map__dot{fill:var(--color-sun)}
.contact-map__label{paint-order:stroke;stroke:var(--color-navy);stroke-width:3.2;stroke-linejoin:round;fill:var(--color-surface);font-size:13px;font-weight:600}
/* The shared caption is the muted grey, which is the wrong end of the palette
   against navy; the band's line colour is what the other captions on this band
   read in. */
.contact-direct .contact-map__caption{margin-top:var(--space-2);color:var(--color-line)}

/* ------------------------------------------------ The ways on from a QA -- */
/* The row of links under a FAQ answer is styled in the shared sheet (style.css,
   under the FAQ block). The same row is printed by the FAQ sections of several
   pages, so its rules travel with the pattern rather than with this page; the
   declarations there are the ones this page has always read. */

/* --------------------------------------------------------- Responsive -- */
/* The shared layer drops the hero to one column at 980px, so between 981px and
   1180px the form would sit in the narrower of the two shared columns — about
   two fifths of the container, too narrow for two fields to stand side by side.
   The band therefore goes to one column higher up, at 1080px, and the form takes
   the whole container through that range. Nothing is reordered for it: the copy
   stays above the card at every width, as it arrives in the markup. */
@media(max-width:1080px){
  .page-hero--contact .page-hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}

/* The channel block follows the copy below the width where two columns would
   squeeze the address into three lines. */
@media(max-width:760px){
  .contact-direct__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}

/* A phone keeps the three shots across, as thumbnails, and tightens instead of
   stacking: one column each would put three 4:3 frames between the lede and the
   form and push the card a screen down. The four pump figures inside the project
   group, which are controls rather than pictures, do become one to a row here,
   where each of them gets the width of the card. */
@media(max-width:620px){
  .contact-hero__shots{gap:var(--space-2);margin-top:var(--space-4)}
  .contact-hero__shots .media-frame{padding:var(--space-1)}
  .page-hero--contact .field-grid{grid-template-columns:minmax(0,1fr)}
}