/* ============================================================
   Solaris group home page — the site root.

   Values are the Solaris Design System tokens, which this page loads from
   assets/ds/tokens/ unedited. Nothing here invents a colour, a step or a
   size: every value is a var(), exactly as the handoff has it, with the few
   deliberate exceptions called out in comments where they appear.

   Everything is scoped under .sol-home. The tokens themselves sit on :root,
   which is safe — they are custom properties and paint nothing on their own —
   but the element defaults the design system ships in base.css are NOT
   loaded, because they would restyle the site header and any Elementor
   content sharing the page. They are reproduced here instead, scoped to this
   page.

   THE TWO ORANGES ARE NOT INTERCHANGEABLE, and getting them backwards is the
   most likely way to break the brand:
     --color-accent-default   #F15C30 Flamingo, the ACTION colour: buttons and
                                      links, nothing else.
     --color-accent-highlight #FF9A24 Princeton Orange, ILLUSTRATION: the dot
                                      textures, the sun doodle, the quote
                                      mark.
   Orange type on a light surface is Amber Ink (--color-text-accent-ink,
   #9A5A00) — never Princeton Orange, which is 2.06:1 on white. On this page
   Amber Ink carries the two eyebrows and the three stat numerals.

   NAVY IS NEVER A SECTION GROUND. It appears once on this page, as the stroke
   of the hero's climb doodle.

   Section order below follows the page. The responsive work — which the
   handoff does not cover past four breakpoints — is at the bottom, under
   "Responsive", with the reasoning for each decision beside it.
   ============================================================ */

/* ---- Page shell -------------------------------------------- */

.sol-home {
  /* The deferred brand decision (system task WEB-14). Button reads
     --button-radius and production ships square, so square is the default
     here too. One line flips the whole page to pills:
     --button-radius: var(--radius-pill). */
  --button-radius: 0px;

  /* The content column is 1280px with 32px gutters OUTSIDE it, which is what
     the offset panel's own formula further down assumes. Everything here is
     border-box, so the wrapper carries the column plus both gutters. */
  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* The offset panel runs off the top of the page, the hero's ring and climb
     doodle reach past their box, and the CTA panel's dot field bleeds off its
     corner. None of them may put a horizontal scrollbar on the document. */
  overflow-x: clip;
}

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

/* The element defaults, in :where() so they weigh nothing of their own. They
   still outrank Bootstrap's reboot, which the site loads on every page and
   which has its own opinion about heading sizes and paragraph margins, and
   they no longer outrank the component classes below — `.sol-home p` is a
   more specific selector than `.sol-home__card-body`, which is how a reset
   ends up eating the margins the design asked for. */
.sol-home :where(h1, h2, h3, h4) { color: var(--color-text-primary); margin: 0; }

.sol-home :where(h1) { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); }
/* H2's tracking is POSITIVE (+2%) and that is a real brand tell taken from
   the Figma named style, not a typo. Do not normalise it to a negative
   because every other step is negative.

   Below 1024 the h2 and h3 steps are fluid, 28 -> 40 and 22 -> 28, and flat
   above it (CA-2.7). The size tokens cap at 1024 on their own, so there is
   no heading breakpoint anywhere on this page; the shorthand keeps each
   step's own line-height. */
.sol-home :where(h2) { font: var(--type-heading-2); font-size: var(--type-heading-2-fluid-size); letter-spacing: var(--type-heading-2-tracking); }
.sol-home :where(h3) { font: var(--type-heading-3); font-size: var(--type-heading-3-fluid-size); letter-spacing: var(--type-heading-3-tracking); }
.sol-home :where(h4) { font: var(--type-heading-4); letter-spacing: var(--type-heading-4-tracking); }

.sol-home :where(p) { margin: 0; }
.sol-home :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.sol-home :where(img) { max-width: 100%; display: block; }
.sol-home :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-home :where(a:hover) { color: var(--color-accent-hover); }

/* One ring, everywhere, and never a browser default outline sitting beside
   it. The shadow is navy-tinted like every other shadow in the system. */
.sol-home :where(a, button):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

/* ---- Button ------------------------------------------------
   The design system's Button, in CSS. The bundle's version injects this same
   sheet from JavaScript; a server-rendered page has no reason to wait for
   that. Class names are the bundle's so the two stay recognisably one
   component — and so this page's buttons and the awards page's are visibly
   the same object rather than two that happen to match today. */

.sol-home .sds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  border: 0;
  padding: var(--space-500) var(--space-700);
  border-radius: var(--button-radius, 0px);
  font: var(--type-control-base);
  letter-spacing: var(--type-control-base-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Colour only. Hover changes colour and nothing else: no lift, no shadow.
     The one signature move on this page is the card lift, and a button that
     also lifted would spend it. */
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-home .sds-btn--solid { background: var(--color-accent-default); color: var(--color-text-inverse); }
.sol-home .sds-btn--solid:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); }

/* The 2px border is the one unmeasured, untokenised value in the component.
   Both variants must be the same height, so the outline pays for its border
   out of its own padding. */
.sol-home .sds-btn--outline {
  background: transparent;
  /* Amber Ink, the kit's orange for type on light (CA-4.2). */
  color: var(--color-text-accent-ink);
  border: 2px solid var(--color-accent-default);
  padding: calc(var(--space-500) - 2px) calc(var(--space-700) - 2px);
}
.sol-home .sds-btn--outline:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }

/* ---- Layout primitives -------------------------------------
   A 1344px wrapper with 32px gutters, which yields the 1280px column the
   layout tokens describe. */

.sol-home__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* The grey band: full-bleed inside a white section, never carrying the
   section's heading. It is what makes the products grid, the partners wall
   and the accreditations wall read as three sections rather than one long
   grey run. */
.sol-home__band {
  background: var(--color-surface-sunken);
  padding: var(--layout-band-inset) 0;
}

/* THE BAND LEAD: heading on white, band below it, this gap between them - the
   rule this page's own header states as "a wall's heading is never inside its
   grey band". It is carried as padding on the heading's own wrapper rather
   than as margin-top on the band, because spacing in this system is padding -
   a margin here is one collapse away from putting a gap where the two grounds
   are supposed to meet. Scoped to each collection's DIRECT wrap so it cannot
   reach the wrap nested inside the band. */
.sol-home__products > .sol-home__wrap,
.sol-home__wall > .sol-home__wrap { padding-bottom: var(--layout-band-lead); }

/* Both eyebrows on the page. Amber Ink, never Princeton Orange: the uppercase
   12px is the smallest type here and it has to clear 4.5:1. Title Case is set
   by the writer; there is no text-transform doing it for them — except the
   uppercase here, which is a label style rather than a heading. */
.sol-home__eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
  margin: 0 0 var(--space-400);
}

/* The dot texture, in two sizes (the hero panel's and the quote's). One
   rule, two instances: a painted background rather than an SVG, so it tiles
   to whatever box it is given and costs no request. Princeton Orange,
   because it is illustration. The closing panel's dots are the doodle
   artwork instead — see .sol-home__cta-dots. */
.sol-home__dots {
  position: absolute;
  display: block;
  pointer-events: none;
  background-image: radial-gradient(var(--color-accent-highlight) var(--sol-dot, 1.5px), transparent var(--sol-dot, 1.5px));
  background-size: var(--sol-dot-grid, 13px) var(--sol-dot-grid, 13px);
}

/* ============================================================
   1. Hero
   ============================================================ */

.sol-home__hero {
  position: relative;
  background: var(--color-surface-default);
  /* 64 under the header, 112 below (CA-1.2, CA-1.3). Both tokens take their
     own step at 720, so there is no phone override. */
  padding: var(--layout-hero-top) 0 var(--layout-section-half);
  /* Clips the offset panel's top, the ring and the climb doodle. The panel
     having no visible top edge is the device, not an accident of this rule. */
  overflow: hidden;
}

/* THE OFFSET PANEL. Its right edge lands on the CONTENT COLUMN's right edge
   and it is exactly half the column wide, at every width — which is what the
   two formulas below buy, and why neither is a plain pixel value:

     right:  the gutter, or half the leftover once the column has taken its
             1280px, whichever is larger. Below a 1344px viewport that is the
             gutter; above it the column stops growing and the panel tracks
             the column, not the window.
     width:  half of the column's own width, which is itself capped at 1280px
             and at the viewport minus both gutters.

   It has no top edge and no top corners: it starts 140px above the section
   and the section clips it. Do not "finish" it by bringing the top back into
   view. */
.sol-home__offset {
  position: absolute;
  top: -140px;
  height: 760px;
  right: max(var(--layout-gutter), calc((100% - var(--layout-max-width)) / 2));
  width: calc(min(var(--layout-max-width), 100% - 2 * var(--layout-gutter)) / 2);
  background: var(--color-surface-offset);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

.sol-home__dots--offset {
  left: var(--space-700);
  bottom: var(--space-700);
  width: 104px;
  height: 104px;
  border-radius: var(--radius-pill);
  opacity: .4;
}

/* Two cells, copy left and media right, stacking on their own once the column
   can no longer give both 420px. With a 1280px column and a 64px gap that is
   a 968px viewport, which is also where the offset panel is dropped — the two
   are the same moment and the responsive block at the bottom relies on it.
   The copy starts at the top pad, not centred against the photographs
   (CA-7.7). */
.sol-home__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-800);
  align-items: start;
}

.sol-home__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  /* display/xl already clamps to 44px at the 360px floor, so the headline
     needs no step of its own. Balance keeps the two lines from splitting into
     a short third under the hard break. */
  text-wrap: balance;
}

.sol-home__hero-lead {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin-top: var(--space-500);
  text-wrap: pretty;
}

/* The CTA pair, used twice: here and in the closing panel. The spacing above
   it belongs to the hero rather than to the pair — the closing panel sets its
   own rhythm with a flex gap, and a margin here would be added to it. */
.sol-home__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
}

.sol-home__ctas--center { justify-content: center; }

.sol-home__hero-copy .sol-home__ctas { margin-top: var(--space-700); }

/* The three stat pills. A <ul>, because it is a list of three claims. */
.sol-home__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  margin-top: var(--space-800);
}

.sol-home__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-300);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  /* Asymmetric on purpose: the numeral is optically heavier than the label,
     so it sits closer to its edge. */
  padding: var(--space-300) var(--space-500) var(--space-300) var(--space-400);
  background: var(--color-surface-default);
}

/* The kit's stat numeral: Public Sans 800 at 36/1 (CA-2.6). */
.sol-home__stat-value {
  font: var(--type-stat);
  letter-spacing: var(--type-stat-tracking);
  color: var(--color-text-accent-ink);
}

/* A label, so muted (CA-3.8). body/sm, two lines. */
.sol-home__stat-label {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

.sol-home__hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--space-600);
}

/* THE PHOTO COMPOSITION.
   ----------------------
   The design gives every child of this box a pixel coordinate inside a
   520x700 frame: the large capsule at 400x640, the small one at 240x380, a
   ring, and three doodles. Built that way the composition holds at exactly
   one width and bursts its container at every other — which is what the
   reference prototype does below 520px, and it is the single biggest thing
   the handoff leaves unsolved.

   The ring is the one place the handoff's own numbers are not followed,
   because they do not describe a border. See the note above .sol-home__ring.

   So every one of those coordinates is expressed here as a PERCENTAGE of the
   frame instead. The frame has a fixed aspect ratio, so percentages of its
   width and of its height stay in proportion to each other, and the whole
   arrangement scales as one object from 520px down to the 360px floor with
   every overlap, tangent and gap preserved. The arithmetic is written beside
   each value so the design's own numbers are still legible.

   The three things that deliberately do NOT scale: the ring's 1px border
   (a hairline is a hairline), the capsules' 999px radius (already past the
   point where it rounds the ends), and the shadow (the kit's one capsule
   shadow, the same at every size).

   DO NOT CONVERT THESE BACK TO PIXELS. */
.sol-home__stack {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 520 / 700;
}

/* THE RING IS CONCENTRIC WITH THE LARGE CAPSULE, and the numbers below are
   derived from the capsule rather than eyeballed. The handoff placed it at
   96 / -44 at 472x720, which leaves four different gaps — 24 left, 48 right,
   44 top, 36 bottom — so it reads as a second pill that happens to be nearby
   rather than as a border around the photograph.

   A stadium outset by a uniform distance d is the same stadium grown by 2d in
   both axes with its radius grown by d. The capsule is 400x555.56 at
   (120, 0) since it snapped to 0.72; outset by 36 that is 472x627.56 at
   (84, -36), and the radius follows on its own because both shapes are
   already past the pill threshold. */
.sol-home__ring {
  position: absolute;
  left: 16.1538%;    /*  84 / 520 = 120 - 36 */
  top: -5.1429%;     /* -36 / 700 =   0 - 36 */
  width: 90.7692%;   /* 472 / 520 = 400 + 72 */
  height: 89.6508%;  /* 627.56 / 700 = 555.56 + 72 */
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
}

.sol-home__capsule {
  position: absolute;
  display: block;
  border-radius: var(--radius-pill);
  overflow: hidden;
  /* Shows through while the photograph loads. Sunken, because offset grey is
     the offset panel's alone (CA-5.2). */
  background: var(--color-surface-sunken);
  /* One capsule shadow at every size (CA-6.9). */
  box-shadow: var(--elevation-capsule);
}

.sol-home__capsule img {
  width: 100%;
  height: 100%;
  /* object-position comes from the template, per photograph: both images are
     landscape and both are cover-cropped into a portrait capsule, so the
     percentage is the art direction. */
  object-fit: cover;
}

/* Both capsules are the kit's TALL capsule, 0.72 wide to tall (CA-11.15):
   the design's 400x640 and 240x380 keep their widths and lose height. */
.sol-home__capsule--large {
  right: 0;
  top: 0;
  width: 76.9231%;  /* 400 / 520 */
  height: 79.3651%; /* 555.56 / 700 = 400 / .72 */
  z-index: 2;
}

.sol-home__capsule--small {
  left: 0;
  bottom: 0;
  width: 46.1538%;  /* 240 / 520 */
  height: 47.619%;  /* 333.33 / 700 = 240 / .72 */
  z-index: 3;
}

/* Loose line art, from assets/img/doodles/. Decorative, aria-hidden, and
   never in the way. Their places are percentages of the frame, like
   everything else in it, but their SIZES are not: every doodle is drawn at
   the one size the site gives it (inc/solaris-doodles.php), so the widths
   below are that table's --doodle-*-box properties, the file box that holds
   the drawing at its size. The shadow is baked inside that box.

   Below 968 they take the site's one scale(.8). A doodle whose size the
   table did not change scales about its centre, as it always has; the sun,
   which did change, scales from its drawing's corner, re-anchored under
   "Responsive" to where the old box and scale put it. */
.sol-home__doodle {
  position: absolute;
  pointer-events: none;
  height: auto;
  transform: var(--doodle-scale);
}

/* Ink at left 40 / top 8. sun.svg has all its padding on the right and
   bottom, so the ink starts at the box's own origin and left/top are the
   design's numbers unchanged. */
.sol-home__doodle--sun {
  left: 7.6923%;   /*  40 / 520 */
  top: 1.1429%;    /*   8 / 700 */
  width: var(--doodle-sun-box);
  aspect-ratio: 172 / 188;
  color: var(--color-accent-highlight);
  transform-origin: left top;
  z-index: 0;
}

/* No shadow on this one, so the file is all ink and the numbers are the
   design's as written. */
.sol-home__doodle--dots {
  left: 41.5385%;   /* 216 / 520 */
  bottom: -1.1429%; /*  -8 / 700 */
  width: var(--doodle-dot-grid-box);
  aspect-ratio: 1;
  z-index: 1;
}

/* The one navy object on the page, in the illustration navy (CA-5.7). Ink
   at left -24 / top 236; climb-line.svg's padding is right and bottom. */
.sol-home__doodle--climb {
  left: -4.6154%;  /* -24 / 520 */
  top: 33.7143%;   /* 236 / 700 */
  width: var(--doodle-climb-box);
  aspect-ratio: 213 / 179;
  color: var(--color-illustration-navy);
  z-index: 4;
}

/* ============================================================
   2. Endorsement
   ============================================================ */

.sol-home__endorsement {
  position: relative;
  background: var(--color-surface-default);
  padding: var(--layout-section-half) 0;
  overflow: hidden;
}

/* No card, no border, no fill. The dot texture is the only thing marking this
   block off, which is what keeps it reading as the group's own claim rather
   than a testimonial lifted from a customer. */
.sol-home__quote-block {
  position: relative;
  padding: var(--space-700) var(--space-600);
}

.sol-home__dots--quote {
  inset: 0;
  opacity: .35;
  --sol-dot: 1.2px;
  --sol-dot-grid: 15px;
}

.sol-home__quote-row {
  position: relative;
  display: flex;
  gap: var(--space-500);
  align-items: flex-start;
}

/* Princeton Orange, because it is illustration rather than type — it carries
   no meaning and is aria-hidden.

   This is the ONE doodle whose shadow falls to its left: 88 of quote-mark.svg's
   152 units are transparent padding before the ink starts. Left in flow that
   padding would indent the mark from the column it is supposed to open, so
   the margin pulls the box back by exactly the padding and the INK lands on
   the column edge. The body text is unaffected — it follows the mark's right
   edge, which the negative margin does not move.

   That padding is 1.375x the ink width, which caps how large the mark can be
   before its box reaches past the section and is clipped by the overflow
   above: the block's 32px padding plus the 32px gutter give 64px of room, so
   the ink tops out around 46px. The site's 44 fits, and below 968 the
   site's quote size is 35, which pulls in less. */
.sol-home__quote-mark {
  flex: none;
  width: var(--doodle-quote-box);                     /* the box, ink included */
  margin-left: calc(-1 * var(--doodle-quote-pad-l));  /* cancels the left padding */
  height: auto;
  aspect-ratio: 152 / 159;
  color: var(--color-accent-highlight);
}

.sol-home__quote-body { flex: 1; min-width: 0; }

.sol-home__quote {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.sol-home__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  margin-top: var(--space-600);
}

.sol-home__portrait {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.sol-home__attribution-name {
  font: var(--type-item-base);
  letter-spacing: var(--type-item-base-tracking);
  color: var(--color-text-primary);
}

.sol-home__attribution-role {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   3. Products — the six ways in
   ============================================================ */

.sol-home__products {
  background: var(--color-surface-default);
  /* 112 below the band as well as above the heading: the band sits inside
     the section, so the section still pads its own bottom (CA-1.5). */
  padding: var(--layout-section-half) 0;
  /* Clears the sticky header when either CTA jumps here: the 96px services
     row plus 24 of air (CA-8.9). The mobile figure is in the responsive
     block, where the header is a single 72px row. */
  scroll-margin-top: calc(96px + 24px);
}

.sol-home__intro { max-width: 720px; }

.sol-home__intro-body {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-top: var(--space-400);
  text-wrap: pretty;
}

/* THREE COLUMNS AT DESKTOP, two at tablet, one on a phone — and it is worth
   saying why this is three explicit counts rather than the auto-fit the
   handoff specifies.

   The handoff asks for `repeat(auto-fit, minmax(min(300px, 100%), 1fr))` and
   describes the result as "3 columns at desktop, 2 at tablet, 1 on phone".
   Those two do not agree. A 300px minimum across the 1280px column with a
   24px gap fits FOUR tracks (4 x 300 + 3 x 24 = 1272), so the prototype's own
   CSS lays six cards out as four and then two — an orphaned row that reads as
   a mistake. Six cards want 3 + 3.

   The stated outcome is the design; the declaration is arithmetic that missed.
   So the counts are explicit, on the breakpoints the handoff already uses
   elsewhere, and the six cards sit 3 + 3 at desktop and 2 + 2 + 2 at tablet.

   A SHORT LAST ROW IS CENTRED. The tracks are doubled — six at desktop, four
   at tablet — and every card spans two, which lays out exactly as three and
   two columns do, but lets a card start half a card in. So whenever the count
   does not divide evenly, the last row sits in the middle rather than hard
   left: five cards (the Insure card held back — see
   solaris_home_hide_insurance()) sit 3 + 2 at desktop and 2 + 2 + 1 at tablet,
   both centred. With six nothing matches and the grid is the one above. */
.sol-home__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-500);
}

.sol-home__grid > .sol-home__card { grid-column: span 2; }

/* Last row of two: its first card starts in the second track. */
.sol-home__grid > .sol-home__card:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }

/* Last row of one: it starts in the third. */
.sol-home__grid > .sol-home__card:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }

/* The whole card is the link. One <a>, one tab stop, one destination. */
.sol-home__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-100);
  /* 24 at every width (CA-6.11). */
  padding: var(--space-500);
  color: var(--color-text-secondary);
  text-decoration: none;
  /* The page's ONE signature move. Transform and shadow only — the card does
     not change colour, and nothing else on the page lifts. */
  transition: transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

/* The kit's card lift, -3px at the base duration (CA-6.4). */
.sol-home__card:hover {
  transform: translateY(var(--motion-lift-card));
  box-shadow: var(--elevation-200);
  color: var(--color-text-secondary);
}

/* Underline only. The Amber Ink darken is held until a value is ruled
   (CA-4.5). */
.sol-home__card:hover .sol-home__card-link { text-decoration: underline; }

/* A fixed 120px slot so six logos of six different proportions sit on one
   optical line across the grid. The negative margin pulls the slot's own
   leading and trailing air back out of the card's 16px gap, because these are
   images and their bounding boxes carry more space than their artwork does. */
.sol-home__card-logo {
  display: flex;
  align-items: center;
  height: var(--sol-logo-height, 120px);
  margin: -12px 0;
}

.sol-home__card-logo img {
  /* The mark fills the slot unless it names a height of its own. Only a mark
     exported with no air around it does — it would otherwise out-measure the
     marks whose files carry their own padding. The slot is unchanged either
     way, which is what holds every card's heading on one line. */
  height: var(--sol-mark-height, var(--sol-logo-height, 120px));
  width: auto;
  max-width: 100%;
}

/* THE ONE CO-BRAND SLOT. Insure carries two marks and a divider rather than
   one vertical lockup, so its slot is a row, and the 120px becomes a floor
   instead of a ceiling: a horizontal pair can outgrow the line the vertical
   marks were measured against, and min-height lets it rather than clip it.
   At today's artwork it does not — the row sits at 58px inside the 120px,
   on the same optical line as the other five cards, which are untouched by
   any of this. The floor is what keeps that true if either mark is
   re-exported taller.

   THE WIDTHS ARE PERCENTAGES AND MUST STAY PERCENTAGES. They are percentages
   of the card's content width, which is what holds the two marks in
   proportion to each other and to the card as the grid reflows from three
   columns to two to one. Resolving them to px fixes the lockup to the 3-up
   cell and breaks it at both narrower layouts. The values themselves are in
   solaris_home_products(), per mark, because they are artwork facts rather
   than layout ones. */
.sol-home__card-logo--lockup {
  justify-content: flex-start;
  gap: var(--space-300);
  height: auto;
  min-height: var(--sol-logo-height, 120px);
}

.sol-home__card-logo--lockup img {
  display: block;
  width: var(--sol-mark-width);
  height: auto;
  flex: none;
  /* Optical, not geometric: a mark whose artwork sits high in its own box is
     dropped onto the Solaris wordmark's baseline. Default 0 — only the mark
     that needs it carries a --sol-mark-shift. */
  transform: translateY(var(--sol-mark-shift, 0));
}

/* The x between the two marks. font: is a shorthand and resets weight, so the
   300 has to come after it. The -2px is the same kind of optical correction
   as the mark shift above: the glyph's own box centres it lower than the two
   wordmarks read. It is right as it stands — the glyph's centre lands within
   half a pixel of the SOLARIS/INSU cap band's, measured off the rendered
   card. Leave it alone.

   THE MARGINS ARE THE HORIZONTAL HALF OF THE SAME CORRECTION, and they are a
   pair on purpose. flex `gap` spaces the two image BOXES evenly, but only one
   of the marks is cropped to its artwork: insu-specialty.png is tight to its
   ink, while solaris-horizontal.svg is 683x256 around artwork that spans
   64..618, i.e. 9.37% of its own width is empty margin baked into the file,
   on every side. That trailing 9.37% lands in the left gap with nothing to
   answer it on the right, which put the glyph 7.5px right of the midpoint
   between the two logos even though the boxes either side of it were even.
   -2.11% is half of that whitespace measured against the card's content
   width (9.37% of the mark's own 45%), and the +2.11% gives it straight back
   so the item's total contribution to the row is unchanged: the glyph moves,
   neither mark does. Percentages for the reason the mark widths are
   percentages — px would fix the correction to the 3-up cell and drift at
   2-up and 1-up. Re-crop either logo and these numbers need re-deriving.

   Colour: the design calls for a grey lighter than the type, not a hairline.
   --color-border-strong, which the handoff named, is navy here and would
   paint the divider as dark as the heading; --color-border-default, used
   until now, is the 1px-hairline grey and disappeared at this glyph's size
   and 300 weight. --color-text-muted is the theme's legible subordinate grey
   (#666) — visible beside the two marks without competing with them. */
.sol-home__card-lockup-x {
  font: var(--type-heading-3);
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-muted);
  margin-left: -2.11%;
  margin-right: 2.11%;
  transform: translateY(-2px);
}

/* The generated award mark, which is sized by width rather than height. */
.sol-home__mark { display: inline-block; line-height: 0; max-width: 100%; }

.sol-home__card h3 { color: var(--color-text-primary); }

/* flex:1 is what levels the chip rows and the link lines across a row of
   cards whose body copy runs to different lengths. */
.sol-home__card-body {
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  flex: 1;
}

.sol-home__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
}

/* A tag: muted ink, 4/12, the small radius (CA-3.8, 3.11, 6.3). */
.sol-home__chip {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-100) var(--space-300);
}

/* A label on the card's destination, not a control of its own — a nested <a>
   here would be a second tab stop going to the same place. A stand-alone
   link, so Amber Ink (CA-4.5). */
.sol-home__card-link {
  font: var(--type-item-base);
  letter-spacing: var(--type-item-base-tracking);
  color: var(--color-text-accent-ink);
  margin-top: var(--space-200);
  text-underline-offset: 3px;
}

/* The arrow is decoration and belongs in CSS, not in the accessible name.
   A non-breaking space keeps it on the last word of the label. */
.sol-home__card-link::after { content: "\00a0\2192"; }

/* ============================================================
   4 & 5. The proof walls — finance partners, accreditations

   One part rendered twice. The column count, the logo ceiling and the cell's
   side padding arrive as custom properties from the template.
   ============================================================ */

.sol-home__wall {
  background: var(--color-surface-default);
  /* 112 below the band too (CA-1.5). */
  padding: var(--layout-section-half) 0;
}

/* A collection heading: heading/1, fluid 28 -> 48 below 1024 (CA-2.7). */
.sol-home__wall-heading {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}

.sol-home__wall-copy {
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  max-width: var(--sol-measure, 62ch);
  margin: 0 auto;
  text-align: center;
  text-wrap: pretty;
}

.sol-home__wall-copy--next { margin-top: var(--space-400); }

/* The emphasis inside the partners copy is the claim, so it goes to full
   black rather than staying at body colour. */
.sol-home__wall-copy strong { color: var(--color-text-primary); }

/* THE HAIRLINE GRID. The rules between cells are the grid's own 1px gap with
   a border-coloured background showing through, plus a 1px border around the
   whole thing. The cells carry no borders of their own — that would double
   every internal rule to 2px while leaving the outer edge at 1px, which is
   the usual way this effect goes wrong.

   The full content column: the 1152px cap is gone (CA-11.2). */
.sol-home__logos {
  display: grid;
  grid-template-columns: repeat(var(--sol-logo-cols, 3), minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-700) 0 0;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
}

.sol-home__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 120px;
  padding: var(--space-400) var(--sol-logo-pad, var(--space-600));
  background: var(--color-surface-raised);
}

/* contain, with a ceiling. The logo files are cropped to their artwork (see
   the note in template-parts/home/logo-wall.php), so the ceiling is the
   height of the mark itself and every logo stands as tall as it can inside
   it: the square-ish marks (ANZ, BOQ, nab, afca) reach the ceiling, the long
   wordmarks (Capital Finance, Pepper Money, Westpac) run out of cell width
   first and stop short of it. That is how the Finance page's wall behaves,
   and it is the reason the cell's side padding is a knob — the padding is
   what decides how far a wordmark may run.

   120px cell: the Finance page's cells, and 32px more than the 44px mark plus
   the 16px of vertical padding need, so the wall keeps its air now that the
   logos have grown into it. */
.sol-home__logo img {
  width: 100%;
  height: 100%;
  max-height: var(--sol-logo-max, 44px);
  object-fit: contain;
}

/* ============================================================
   6. Closing CTA
   ============================================================ */

.sol-home__closing {
  background: var(--color-surface-default);
  padding: var(--layout-section-half) 0;
}

.sol-home__cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-800) var(--space-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-500);
}

/* THE DOT FIELD, the doodle set's own artwork (dots-orange-field.svg) rather
   than a painted disc (CA-12.5). A 200px window onto the field's top-right
   corner at its drawn size, so the dots keep the set's 13px pitch. It bleeds
   off the panel's top-right corner; the panel's overflow is what crops it,
   and the crop follows the panel's radius. */
.sol-home__cta-dots {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  max-width: none;
  object-fit: none;
  object-position: right top;
  pointer-events: none;
}

/* position:relative on the three children, so they sit above the dot field
   rather than under it. */
.sol-home__cta-heading {
  position: relative;
  max-width: 22ch;
}

.sol-home__cta-body {
  position: relative;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 54ch;
  text-wrap: pretty;
}

.sol-home__cta-panel .sol-home__ctas { position: relative; }

/* ============================================================
   Responsive

   THE HANDOFF SHIPS NO MOBILE DESIGN. It names four breakpoints — 968 for the
   hero, 720 for the grids and the footer (whose rules are in styles/footer.css
   now), plus the header's own 1024 and the product grid's intrinsic reflow —
   and stops. Everything below those, down to the stated 360px floor, was
   decided here. Each decision is written down
   with its reason, because "make it smaller" is not one.

   The shape of the answer, in one paragraph. Nothing is hidden and nothing is
   reordered: a phone reader gets the same page in the same sequence, because
   this page is a router and dropping a route is dropping a product. What
   changes is (a) the hero composition scales as one object instead of
   overflowing — that is the percentage geometry above, not a media query;
   (b) the headings are fluid below 1024 through their own size tokens, with
   no step here; (c) the vertical rhythm tightens one step at 720, which the
   layout tokens do by themselves (CA-1.9), so no section pad is restated
   below; and (d) padding comes off the contained panels, which is where a
   phone loses the most measure.
   ============================================================ */

/* ---- 1200px: the wide desktop step -------------------------
   The hero photo composition stops being able to hold its 520px frame before
   the grid is ready to stack, because the column shrinks faster than the
   cells do. Nothing to do — the frame is min(100%, 520px) and scales — but
   the offset panel's grey now sits directly behind a smaller composition, and
   the doodle that hangs off its left edge needs the gap the section's own
   overflow was giving it. */

/* ---- 1024px: the header collapses --------------------------
   The header is the site's, not this page's, and it handles its own collapse.
   What is ours is the anchor: #products clears the 72px single row here,
   plus 24 of air (CA-8.9). */
@media (max-width: 1023.98px) {
  .sol-home__products { scroll-margin-top: calc(72px + 24px); }

  /* Six cards, 2 + 2 + 2. Three across a tablet column would set the body
     copy — the longest of which runs to 240 characters — at about 28
     characters a line. */
  .sol-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The desktop offsets are for rows of three; clear them, then centre a
     lone last card on the two-up grid. */
  .sol-home__grid > .sol-home__card:nth-child(3n + 1):nth-last-child(2),
  .sol-home__grid > .sol-home__card:nth-child(3n + 1):last-child { grid-column: span 2; }

  .sol-home__grid > .sol-home__card:nth-child(2n + 1):last-child { grid-column: 2 / span 2; }
}

/* ---- 968px: the hero loses its offset panel ----------------
   The design's own breakpoint: the panel goes, the media loses its top
   padding, and the doodles drop to .8 (--doodle-scale, set site-wide in
   inc/solaris-doodles.php).

   THE PANEL BECOMES A GREY BOX AROUND THE HERO COPY (CA-5.3), the treatment
   Public Liability ships, rather than the hero's whole ground. The hero stays
   white; the box takes the card radius on all four corners, because stacked
   it has a visible top edge and a panel with two square corners reads as a
   fault.

   The .8 is worth a note. The doodles hold one size while the frame they
   sit in scales, so this is their only reduction — which is the design's
   intent: at the width where the photographs start competing with the copy
   for attention, the line art should get out of the way. Each scales from
   the corner its place is measured from, so nothing moves. */
@media (max-width: 967.98px) {
  .sol-home__offset { display: none; }
  .sol-home__hero-copy {
    background: var(--color-surface-offset);
    border-radius: var(--radius-lg);
    padding: var(--space-600);
  }
  .sol-home__hero-media { padding-top: 0; }
  /* The sun's drawing where the old box, scaled about its centre, put it:
     7.69% + 10% of its old 47.25% width across, 1.14% + 10% of its old
     38.37% height down. */
  .sol-home__doodle--sun { left: 12.4176%; top: 4.9796%; }
}

/* ---- 1024px: the logo cells give back their side padding ---
   The two walls keep their 3 and 4 columns down to 720px, so between here
   and there the cells get narrower while their 64px and 32px of side padding
   do not. At a 768px viewport a partner cell is 235px wide and would spend
   128 of it on padding, leaving 107px for a wordmark that wants 255; an
   accreditation cell is 176px and its 64 of padding leaves the ASIC mark
   too short to read. Square padding from here down; the cells are already a
   fixed height, so nothing else moves. */
@media (max-width: 1023.98px) {
  .sol-home__logo { padding: var(--space-400); }
}

/* ---- 720px: phone ------------------------------------------
   The design's second explicit breakpoint. Its wall rule is here — the two
   walls go 2-up — along with everything it does not say. Its three footer
   rules live with the footer, in styles/footer.css. The section pads, the
   band inset and the hero top step here too, but in the tokens.
   ============================================================ */
@media (max-width: 720px) {

  .sol-home__logos { margin-top: var(--space-600); }
  .sol-home__stats { margin-top: var(--space-600); }
  .sol-home__hero-copy .sol-home__ctas { margin-top: var(--space-600); }
  .sol-home__hero-copy { padding: var(--space-500); }

  /* THE CTA PAIR GOES FULL WIDTH. At 24px/48px the two buttons wrap to two
     rows on any phone anyway, and two rows of differently-sized buttons left-
     aligned under a headline look like a mistake rather than a pair. Full
     width is the phone convention and it gives both a 44px-plus target across
     the whole column. The component's 48px sides are kept (CA-4.10); the
     label is centred in the full-width box. */
  .sol-home__ctas { flex-direction: column; align-items: stretch; }
  /* The closing panel centres its children, so its CTA row is shrink-to-fit
     and "full width" inside it would only mean as wide as the longer label.
     This is what makes the two pairs on the page the same width as each
     other. */
  .sol-home__cta-panel .sol-home__ctas { align-self: stretch; }
  .sol-home__ctas .sds-btn { width: 100%; }

  /* THE STAT PILLS. Three of them at 36px numerals will not sit two to a row
     inside 296px, so they stack — which is fine, they are three separate
     claims — but stacked they need less air above them and a little less
     inside them. The two-line label is what keeps each pill narrow enough to
     hug its content rather than stretching. */
  .sol-home__stat { padding: var(--space-200) var(--space-400) var(--space-200) var(--space-300); }
  .sol-home__stat-value { font-size: 32px; }

  /* THE ENDORSEMENT. 32px of block padding inside a column that has already
     spent 64px on gutters leaves 230px of measure on a 390px screen, and the
     quote is the longest single sentence on the page. The padding comes down
     one step; the dot texture, which is the only thing marking the block off,
     is unaffected because it covers the padding box either way.

     The quote mark is already at its phone size from 968 down. */
  .sol-home__quote-block { padding: var(--space-500) var(--space-400); }
  .sol-home__quote-row { gap: var(--space-300); }
  .sol-home__attribution { margin-top: var(--space-500); }
  .sol-home__portrait { width: 56px; height: 56px; }

  /* THE CLOSING PANEL, 48 / 24 — the kit's one phone step for closing panels
     (CA-6.12).

     The dot field comes down with it. At 200px across a 296px panel it stops
     reading as a mark bleeding off the corner and starts reading as a
     background the heading is sitting on. */
  .sol-home__cta-panel { padding: var(--space-700) var(--space-500); }
  .sol-home__cta-dots { right: -32px; top: -32px; width: 140px; height: 140px; }

  /* THE PRODUCT CARDS go single-file — the design's rule. Their 24px padding
     is the same at every width (CA-6.11). */
  .sol-home__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-home__grid > .sol-home__card,
  .sol-home__grid > .sol-home__card:nth-child(3n + 1):nth-last-child(2),
  .sol-home__grid > .sol-home__card:nth-child(3n + 1):last-child,
  .sol-home__grid > .sol-home__card:nth-child(2n + 1):last-child { grid-column: auto; }

  /* THE TWO WALLS GO 2-UP — the design's rule. At two columns on a 360px
     screen the cell is 148px wide, and 16px of side padding is all it can
     spare: 116px for a logo, which the long wordmarks fill and the square
     marks sit inside at the 44px ceiling. The cell is 96 tall here, 120
     above (CA-11.3). */
  .sol-home__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sol-home__logo {
    height: 96px;
    padding: var(--space-300) var(--space-400);
  }
}

/* ---- 480px: the small phone --------------------------------
   The floor is 360px and most of what is above already holds there. Two
   things do not.
   ============================================================ */
@media (max-width: 480px) {

  /* The accreditation wall's four logos are wide and short — ASIC's mark is
     four and a half times as wide as it is tall. Two to a row inside a 296px
     column gives each cell 148px, and after 16px a side of padding the ASIC
     wordmark stands 26px tall. Dropping the side padding to 12px buys it the
     last few pixels; going to one column instead would make a four-item wall
     eight rows tall. */
  .sol-home__logo { padding: var(--space-300); }

  /* The stat numerals, one more step. At 32px "200+" plus a two-line label
     plus the pill's padding is 168px, which fits — but only just, and the
     label is what has to give if it does not. */
  .sol-home__stat-value { font-size: 28px; }
}

/* ============================================================
   Motion

   Everything on this page transitions colour, transform or shadow and
   nothing animates on its own. Under a reduced-motion preference all of it
   stops — including the card lift, which is the one signature move and
   therefore the one most worth honouring the preference on.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sol-home *,
  .sol-home *::before,
  .sol-home *::after {
    transition: none !important;
    animation: none !important;
  }

  /* The lift itself, not just its transition: a card that jumps 3px on hover
     with no tween is worse than one that does not move. The shadow still
     changes, so the hover is still legible (CA-6.4). */
  .sol-home__card:hover { transform: none; }
}