/* ==========================================================================
   Base - the page ground and the element defaults every component assumes.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
  background:var(--c-field);
  /* A WORD LONGER THAN ITS COLUMN BREAKS INSTEAD OF LEAVING IT. The CMS holds
     copy nobody wrote for a 133px panel or a 204px info bar - an e-mail
     address, a pasted url, a run-together brand name - and the design's
     surfaces almost all clip, so such a word did not overflow the page and
     show up in the width probe. It was cut off inside its own card, silently:
     the landing page's quote card at 320 lost the second half of a 34-letter
     word with no ellipsis and no scrollbar.

     `break-word` and NOT `anywhere`: the two differ only in whether the break
     opportunity counts towards min-content, and every grid track and flex
     basis in this system is sized off min-content somewhere. `anywhere` would
     move the 1920 render; this cannot, because it does nothing at all until a
     word is already wider than its line box. */
  overflow-wrap:break-word;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

/* The system has one focus treatment. Every interactive component inherits it
   rather than defining its own, so a new component cannot ship without one. */
:focus-visible{
  outline:2px solid var(--c-green);
  outline-offset:3px;
}

/* Screen-reader-only text. The design leans on placeholders and icon-only
   controls in several places; this is how those get an accessible name
   without changing a measured value. */
.c-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* THE SKIP LINK - `c-header.tpl`, first focusable element on every page.

   Off screen until it is focused, and on screen as the system's own dark
   button the moment it is: the one control in the design that is invisible
   until it matters has to be unmistakable when it does, or a keyboard user
   tabs past a link they cannot see. It sits above the header's own z-index
   (the pill variant floats at 10) and above the drawer's scrim. */
.c-skip{
  position:absolute;
  z-index:30;
  left:var(--c-page-gutter); top:0;
  transform:translateY(-120%);
  padding:12px 20px;
  background:var(--c-ink);
  color:var(--c-field);
  font:500 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  border-radius:0 0 var(--c-r-control) var(--c-r-control);
  transition:transform var(--c-ease);
}
.c-skip:focus{ transform:translateY(0); }

/* <main> takes tabindex="-1" so the skip link moves the CARET and not only the
   scroll position - without it Chrome scrolls and leaves focus on the <body>,
   and the next Tab goes back to the header the visitor just skipped. The
   outline is suppressed because the target of a skip is a region, and ringing
   the whole page is not what the ring is for. */
main[tabindex="-1"]:focus{ outline:none; }

/* Hidden from everyone, including assistive tech - for a node that is in the
   markup from the start so a live region can watch it, but has nothing to say
   yet. Distinct from .c-sr, which hides a node from SIGHT and keeps it
   announced. The forms' success line and error line both use it. */
.c-is-hidden{ display:none !important; }

/* Fluid to the gutter, capped at the frame's own 1278. Written as one min()
   rather than as a width plus a breakpoint because the cap and the gutter are
   the only two facts there are: at 1360 and up it resolves to 1278 and the
   page is the designed desktop to the pixel, and below that it is the viewport
   less two gutters, which is what the mobile frames draw at 393 (393 - 2x16 =
   361, and the property card's photograph is 361 on both frames that draw
   one). Nothing in between needs a rule of its own. */
.c-container{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:0 auto;
}

/* A full-bleed band's own inner column. Several page stylesheets set a fixed
   width on a child of a 1920-wide band; this is the shared way to say "the
   container, but I am already inside a positioned band". */
.c-bleed{
  width:100%;
  padding-inline:var(--c-page-gutter);
}

/* Nothing may push the document sideways. A single overflowing child on a
   phone produces a horizontally scrolling page whose every other measurement
   then reads correct, which is the failure that is hardest to see in a
   screenshot and trivial to see here. */
html{ overflow-x:hidden; }

/* Media never overflows its column, whatever the CMS uploaded. */
img,svg,video,iframe{ max-width:100%; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}