/* ============================================================
   About Us — solarisfinance.com.au/about-us/

   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(), with the few deliberate exceptions called
   out in comments where they appear.

   Everything is scoped under .sol-about. 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. Same arrangement as styles/home.css.

   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
                                      fields, the sun, the star, the quote
                                      mark, the timeline dots.
   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 five "Since YYYY" footers, the five timeline years,
   the outline button's label and every value hover.

   NAVY IS NEVER A SECTION GROUND. It appears twice here, both as objects
   rather than grounds: the header's utility strip (which belongs to the
   header, not to this page) and the illustration navy of the climb line and
   the graduation cap.

   A WALL'S HEADING IS NEVER INSIDE ITS GREY BAND. Four sections are banded —
   Brands, Team, Accreditations, Partners — and all four keep their h2 on
   white above the band. That is what makes them read as four sections rather
   than one long grey run.

   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-about {
  /* 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 hero's offset-panel 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 hero's offset panel runs off the top of the page, the climb doodle
     reaches past its box, and the vision portrait's line art hangs off its
     left edge. None of them may put a horizontal scrollbar on the document. */
  overflow-x: clip;
}

.sol-about *,
.sol-about *::before,
.sol-about *::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-about p` is a
   more specific selector than `.sol-about__brand-body`, which is how a reset
   ends up eating the margins the design asked for. */
.sol-about :where(h1, h2, h3, h4) { color: var(--color-text-primary); margin: 0; }

.sol-about :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.

   h2 and h3 are fluid below 1024 (CA-2.7): 28 -> 40 and 22 -> 28 from the
   360 floor, flat above. Size only; the line-height stays the token's. */
.sol-about :where(h2) { font: var(--type-heading-2); font-size: var(--type-heading-2-fluid-size); letter-spacing: var(--type-heading-2-tracking); }
.sol-about :where(h3) { font: var(--type-heading-3); font-size: var(--type-heading-3-fluid-size); letter-spacing: var(--type-heading-3-tracking); }
.sol-about :where(h4) { font: var(--type-heading-4); letter-spacing: var(--type-heading-4-tracking); }

.sol-about :where(p) { margin: 0; }
.sol-about :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.sol-about :where(figure, blockquote) { margin: 0; }
.sol-about :where(img) { max-width: 100%; display: block; }
.sol-about :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-about :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-about :where(a, button):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

/* ---- Button ------------------------------------------------
   The design system's Button, in CSS, identical to the home page's. 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
   home page's are visibly the same object rather than two that happen to
   match today. */

.sol-about .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.
     Nothing on this page moves on hover — it is a page of credentials, and a
     credential that jumps when you point at it reads as an advertisement. */
  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-about .sds-btn--solid { background: var(--color-accent-default); color: var(--color-text-inverse); }
.sol-about .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-about .sds-btn--outline {
  background: transparent;
  color: var(--color-text-accent-ink); /* CA-4.2 */
  border: 2px solid var(--color-accent-default);
  padding: calc(var(--space-500) - 2px) calc(var(--space-700) - 2px);
}
.sol-about .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-about__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* EVERY SECTION'S PADDING IS THE HALF, AND ONLY ON THE BOTTOM. Two adjacent
   sections therefore meet at 1x the half, not 2x — the hero opens the page
   with its own top padding and nothing else needs one. This is the design's
   own arrangement (`padding: 0 0 var(--layout-section-half)` on every
   section) and it is why the seams read as one rhythm rather than as
   alternating gaps.

   SPACING IS PADDING, NEVER MARGIN. Grounds have to meet edge to edge, or a
   collapsed margin puts white between a grey band and the section below it. */
.sol-about__section { padding-block: 0 var(--layout-section-half); }

/* The grey band: full-bleed inside a white section, never carrying the
   section's heading. */
.sol-about__band {
  background: var(--color-surface-sunken);
  padding-block: var(--layout-band-inset);
}

/* THE BAND LEAD: heading on white, band below it, this 16px gap between
   them (CA-1.4). It is carried as padding on the heading's own wrapper
   rather than as margin-top on the band, for the edge-to-edge reason above. */
.sol-about__band-head { padding-bottom: var(--layout-band-lead); }

/* EDITORIAL SECTIONS TAKE heading/2 40, COLLECTIONS heading/1 48 (CA-2.2).
   The two collections are the walls — Accreditations and Partners; Brands,
   Vision and Team are editorial. Both fluid below 1024 (CA-2.7): 28 -> 40
   and 28 -> 48, with no step of their own. */
.sol-about__section-heading {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  text-align: center;
}

.sol-about__section-heading--collection {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
}

/* Our Vision's h2 is the one that is not centred: it heads a column of prose
   rather than a wall. */
.sol-about__section-heading--start { text-align: start; }

/* The one-or-two-line intro under a band's top edge. The measure cap is what
   stops it setting a 160-character line across the 1280px column — keep it. */
.sol-about__band-intro {
  font: var(--type-body-lg); /* CA-2.3 */
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: pretty;
}

.sol-about__band-intro--wide { max-width: 62ch; }
.sol-about__band-intro + .sol-about__band-intro { margin-top: var(--space-400); }
.sol-about__band-intro strong { color: var(--color-text-primary); }

/* The card, which is the same object in the brands grid and the team grid.
   NOTHING LIFTS ON HOVER. The home page's cards are whole-card links and the
   lift is their affordance; these are not links, and a card that moves when
   you point at it promises a click it will not honour. */
.sol-about__card {
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  min-width: 0;
}

/* THE HAIRLINE GRID, shared by the accreditations and the partner wall. The
   1px gap on a grey parent IS the rule lines — there is no border on any
   cell. Give a cell its own border and the doubled lines show immediately. */
.sol-about__hairline {
  display: grid;
  gap: 1px;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
  margin-top: var(--space-700);
}

/* The dot texture. A painted background rather than the design's cropped
   1275x300 SVG: it tiles to whatever box it is given, costs no request, and
   takes its colour from the token. Princeton Orange, because it is
   illustration.

   THE DOT IS .75px AND THAT IS NOT THE HOME PAGE'S 1.5. The value is a RADIUS
   in a radial-gradient, so the home page's 1.5 paints a 3px disc — its dot
   textures are a deliberately heavier device sitting behind photography. This
   page's field is a reproduction of dots-field.svg, which is 1px SQUARES on a
   13px grid, and a 1px square and a 1px-radius disc are not the same mark: at
   1.5 the field reads twice as heavy as the artwork and starts competing with
   the headline. .75 matches it. Compare the two against the asset before
   changing it — this is the kind of value that gets rounded to a whole
   number. */
.sol-about__dots {
  position: absolute;
  display: block;
  pointer-events: none;
  background-image: radial-gradient(var(--color-accent-highlight) var(--sol-dot, .75px), transparent var(--sol-dot, .75px));
  background-size: var(--sol-dot-grid, 13px) var(--sol-dot-grid, 13px);
}

/* THE DOODLE COORDINATES ARE FILE-BOX COORDINATES, and that is worth stating
   because the theme's other pages are the other way round.

   Figma bakes each drop shadow into the viewBox, so every file is much larger
   than the shape it draws — sun.svg is 172x188 for an 84x84 sun, and
   star-orange.svg carries 88 of its 172 as padding on the LEFT. The theme's
   earlier pages were built from designs that gave a doodle's visible position,
   so inc/solaris-doodles.php publishes the ink geometry and those stylesheets
   subtract the padding to place the ink where the design put it.

   THIS page's numbers came from the prototype, which sets `width` and `left`
   on the file itself. So the file box IS what was positioned, the padding is
   already accounted for in the number, and subtracting it again moves every
   doodle left by up to 65px. Every width and offset below is the prototype's,
   used directly. Read inc/solaris-doodles.php's ink table before changing one:
   the size that LOOKS right is the ink, and the size written here is the file.

   THE SIZES ARE THE SITE'S, not the prototype's: each width is the size
   table's --doodle-*-box (inc/solaris-doodles.php), the file box that holds
   the drawing at its one site-wide size. Where that changed a doodle's size,
   its offset is the prototype's ink position less the file's padding at the
   new size, so the drawing is still where the prototype drew it. Below 968
   every doodle takes the site's scale(.8): about its centre where its size
   did not change, from its drawing's corner where it did, re-anchored at
   968 to where the old scale put it.

   They are inlined rather than linked, which is what lets a stylesheet set
   their colour: the climb line is navy while the rest of the line art is
   Princeton Orange, and that is one rule rather than two files. */
.sol-about__doodle {
  position: absolute;
  height: auto;
  pointer-events: none;
  transform: var(--doodle-scale);
}

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

.sol-about__hero {
  position: relative;
  background: var(--color-surface-default);
  /* 64 top, 112 bottom (CA-1.3): the section carries the top pad, not the
     grid. Both tokens step at 720 on their own. */
  padding-block: var(--layout-hero-top) var(--layout-section-half);
  /* Clips the offset panel's top and the climb doodle's overhang. 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 runs 68% of that column's width — anchored to the column, never to
   the viewport, which is what holds its relationship to the headline as the
   window resizes.

   The `right` value is the page margin: the gutter when the viewport is
   narrower than the wrapper, and half the leftover when it is wider. That is
   the same max()/calc pair the wrapper's own centring produces, written out
   because an absolutely positioned element cannot inherit it. */
.sol-about__offset {
  position: absolute;
  top: 0;
  right: max(var(--layout-gutter), calc((100% - var(--layout-max-width)) / 2));
  width: calc(min(var(--layout-max-width), 100% - 2 * var(--layout-gutter)) * .68);
  height: 440px;
  background: var(--color-surface-offset);
}

/* auto-fit with an inner min(), so the two cells collapse to one column on
   their own at about 900px and the track never demands 420px it cannot have
   on a 360px phone. No media query does this; do not add one. */
.sol-about__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-about__hero-media {
  position: relative;
  padding-top: var(--space-900);
  padding-bottom: var(--space-800);
}

/* THE OVAL-MASKED PHOTOGRAPH, the long oval (640/286, 2.24). The shadow is
   the capsule-photo token, the one shadow a capsule photo casts (CA-6.9) —
   not a step on the elevation ramp and not for a card. The placeholder
   ground behind the image is sunken grey; offset is only the offset panel
   (CA-5.2). */
.sol-about__oval {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  aspect-ratio: 640 / 286;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-sunken);
  box-shadow: var(--elevation-capsule);
}

.sol-about__oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The dot field sits BEHIND the oval — z-index 0 against the oval's 2 — and
   is the reason the hero's top-left corner is not empty. 430x156 is the
   design's window onto the field. */
.sol-about__dots--hero {
  left: 110px;
  top: 0;
  width: 430px;
  height: 156px;
  z-index: 0;
}

/* THE CLIMB LINE. Its padding falls below and right of the ink (pad 0,0),
   which is why the visible line sits hard against the left edge of its box.
   The prototype's box put the line's foot 26.2px above the section's; the
   bottom offset keeps it there by clearing the shadow below the ink. */
.sol-about__doodle--climb {
  width: var(--doodle-climb-box);
  left: -12px;
  bottom: calc(26.2px - var(--doodle-climb-pad-b));
  transform-origin: left calc(100% - var(--doodle-climb-pad-b));
  z-index: 3;
  color: var(--color-illustration-navy); /* CA-5.7 */
}

/* THE SUN. Pad 0,0 again, so the visible sun is at the box's top-left and
   the grey smudge below and right of it is the baked shadow, not a stray. */
.sol-about__doodle--sun {
  width: var(--doodle-sun-box);
  left: calc(min(100%, 640px) - 72px);
  top: -24px;
  z-index: 3;
  transform-origin: left top;
}

/* No top pad of its own: the headline sits straight after the section's 64
   (CA-7.7). */
/* The page's single display/xl, and its only fluid type: clamp() carries it
   from 88px down to a 44px floor with no breakpoint. The three lines are the
   design; the tracking is explicitly 0 because display/xl is the one step in
   the scale that takes none. */
.sol-about__hero-heading {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-text-primary);
}

/* ============================================================
   2. Pull quote
   ============================================================ */

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

.sol-about__quote-block {
  position: relative;
  padding: var(--space-700) var(--space-600);
}

/* The dotted field behind the quotation. A finer grid and a smaller dot than
   the hero's, at .35 opacity — the design's own values, and the reason this
   one is a texture under type rather than a graphic beside it. */
.sol-about__dots--quote {
  inset: 0;
  --sol-dot: 1.2px;
  --sol-dot-grid: 15px;
  opacity: .35;
}

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

/* THE QUOTE MARK. The site's quote size (CA-11.8); quote-mark.svg is 152 wide
   for 64 of ink and carries 88 of its width as padding on the LEFT, so at 44
   the file box is 104.5px and the mark sits 60px into it. That indent
   is the design — the mark is inset from the block's edge, not flush with
   it — so the box is placed as the prototype places it and the 12px nudges
   are the prototype's too.

   It is in static flow rather than absolute: a flex sibling of the quotation,
   so it can reorder above the text when the row stops fitting. In the flow,
   so it takes the site's phone quote size below 968 rather than the scale
   the other doodles take, which would leave its box at full size. */
.sol-about__doodle--quote {
  position: static;
  flex: none;
  width: var(--doodle-quote-box);
  transform: none;
  /* The prototype's 12px nudges, applied to the box at 44 (whose ink sits
     60.5px in and 6.9px down), then held on the INK: at the phone size the
     box is pulled back by its own padding so the drawing stays put. */
  margin:
    calc(-1 * var(--space-300) + 6.875px - var(--doodle-quote-pad-t)) 0 0
    calc(-1 * var(--space-300) + 60.5px - var(--doodle-quote-pad-l));
}

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

.sol-about__quote-text p {
  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-about__quote-attr {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  margin-top: var(--space-600);
}

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

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

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

/* THE STAR. star-orange.svg carries 88 of its 172 as left padding, so the
   drawing sits well into its box. The prototype's box put the star's ink at
   124.2px across and 417.6px down; the offsets keep it there by taking off
   the padding at the site's size.

   It is positioned against the SECTION, the only doodle here with nothing to
   hang off: it occupies the whitespace to the left of the quote block and
   below it. That is also why it is the first thing to go on a narrow screen —
   see "Responsive". */
.sol-about__doodle--star {
  width: var(--doodle-star-orange-box);
  top: calc(417.6px - var(--doodle-star-orange-pad-t));
  left: calc(124.2px - var(--doodle-star-orange-pad-l));
  z-index: 1;
}

/* ============================================================
   3. Our Brands
   ============================================================ */

/* Three columns, five cards, and the sixth cell stays empty. The order is
   chronological; a layout that balanced the last row would also hide that
   Certified is the newest thing here. */
.sol-about__brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-500);
  margin-top: var(--space-700);
}

.sol-about__brand-card { padding: var(--space-500); } /* CA-6.11 */

/* A fixed-height SLOT, not a fixed-height image: the five lockups are
   different shapes and what has to agree across a row is where the heading
   starts. The height comes from the markup so the Certified badge — which is
   tall and narrow rather than wide — can take its own 88px. */
.sol-about__brand-logo {
  display: flex;
  align-items: center;
  height: var(--sol-logo-h, 104px);
}

.sol-about__brand-logo img {
  height: var(--sol-logo-h, 104px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* heading/3, fluid 22 -> 28 (CA-2.4, CA-2.7). */
.sol-about__brand-name {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
}

/* flex: 1 is what lines the "Since YYYY" footers up across a row whatever the
   copy does. It is why the footer is a sibling of this paragraph, not inside
   it. */
.sol-about__brand-body {
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  flex: 1;
}

/* label/sm, the eyebrow step (CA-3.9, CA-2.10). Amber Ink, never Princeton
   Orange: this is 12px uppercase, the smallest type in the card, and it has
   to clear 4.5:1 on white. The uppercase is a label style — Title Case is set
   by the writer everywhere else on this page and there is no text-transform
   doing it for them. */
.sol-about__brand-since {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-400);
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}

/* ---- The timeline ------------------------------------------ */

.sol-about__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-400);
  align-items: start;
  margin-top: var(--space-900);
}

/* The connecting rule, as a pseudo-element rather than a div: it is pure
   decoration and it carries no content. Inset 10% a side so it starts and
   ends inside the first and last dot instead of running out to the gutters.
   7px is the dot's own centre line (16px dot, 2px rule). */
.sol-about__timeline::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-border-default);
}

.sol-about__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-300);
  min-width: 0;
}

/* The halo punches a hole in the rule, so its colour is the BAND's grey and
   not white. Move this section off the band and the halo has to move with
   it. */
.sol-about__stop-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-highlight);
  box-shadow: 0 0 0 5px var(--color-surface-sunken);
}

.sol-about__stop-year {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-accent-ink);
  margin-top: var(--space-200);
}

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

.sol-about__stop-note {
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
  max-width: 22ch;
  text-wrap: pretty;
}

/* ============================================================
   4. Our Vision
   ============================================================ */

.sol-about__vision {
  position: relative;
  overflow: hidden;
}

/* Same auto-fit shape as the hero, centred rather than top-aligned because
   the portrait is taller than the copy at desktop and the two read as a pair.
   It collapses to one column on its own at about 900px. */
.sol-about__vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-800);
  align-items: center;
}

.sol-about__vision-lead {
  font: var(--type-body-lg);
  color: var(--color-text-secondary); /* CA-2.3 */
  margin-top: var(--space-500);
}

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

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

.sol-about__vision-frame {
  position: relative;
  width: min(100%, 400px);
}

/* The tall capsule, 0.72 (CA-11.15). */
.sol-about__oval--portrait {
  width: 100%;
  aspect-ratio: 0.72 / 1;
}

/* ART DIRECTION, NOT A FIX. The subject sits small in a tall crop; the scale
   and the object-position together are what put the face where the oval is
   widest. Replacing the photograph means re-choosing both. */
.sol-about__oval--portrait img {
  object-position: 50% 40%;
  transform: scale(1.12);
}

.sol-about__dots--vision {
  left: -150px;
  bottom: 130px;
  width: 260px;
  height: 156px;
  z-index: 0;
}

/* THE GRADUATION CAP. graduation-cap.svg carries 85 units of padding left of
   its ink. The prototype's box put the drawing's left edge at -94.8px,
   hanging off the frame's left edge into the gap between the two columns,
   and its foot 30.7px up; the offsets keep it there by taking off the
   padding at the site's size. Navy, like the climb line, and the only two
   navy objects on the page. */
.sol-about__doodle--cap {
  width: var(--doodle-cap-box);
  left: calc(-94.8px - var(--doodle-cap-pad-l));
  bottom: calc(30.7px - var(--doodle-cap-pad-b));
  transform-origin: var(--doodle-cap-pad-l) calc(100% - var(--doodle-cap-pad-b));
  z-index: 3;
  color: var(--color-illustration-navy); /* CA-5.7 */
}

/* ============================================================
   5. Our Team
   ============================================================ */

.sol-about__team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-500);
  margin-top: var(--space-700);
}

.sol-about__person { padding: var(--space-500); } /* CA-6.11 */

/* The portraits are CUT-OUTS with real transparency, so the circle's own
   ground shows through them. That is why this is grey and not white — sunken,
   not offset, which is only the offset panel (CA-5.2) — and why these files
   are PNGs. */
.sol-about__person-photo {
  width: min(100%, 240px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-sunken);
  margin: 0 auto;
}

.sol-about__person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* heading/3, fluid 22 -> 28 (CA-2.4, CA-2.7). */
.sol-about__person-name {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
  margin-top: var(--space-300);
}

.sol-about__rows { display: flex; flex-direction: column; }

/* 44px minimum on every row, at every breakpoint, which is the whole reason
   these are flex rows rather than plain lines of text: the value in each one
   is a link, and at item/sm a link's own line box is 18px. */
.sol-about__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-300);
  min-height: var(--target-min);
  border-top: 1px solid var(--color-border-default);
}

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

/* THE LINK FILLS THE ROW, and the design's own markup does not do this. It
   puts min-height: 44px on the ROW and leaves the anchor inside it at its own
   line box — which at item/sm is 18px. The row is 44px of space; only 18px of
   it is the tap target, and the 26px around it does nothing. That fails the
   kit's own rule, which is not a mobile rule: "--target-min 44px, the floor
   for anything a thumb has to hit, at EVERY breakpoint".

   So the anchor is the flex box, not the span beside it. justify-content
   rather than text-align, because a flex container ignores the latter. */
.sol-about__row-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--target-min);
  font: var(--type-item-sm);
  letter-spacing: var(--type-item-sm-tracking);
  color: var(--color-text-primary);
  text-align: end;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.sol-about__row-value:hover { color: var(--color-text-accent-ink); }

.sol-about__row-value--asic { gap: var(--space-200); }

.sol-about__row-value--asic img { flex: none; }

/* LinkedIn blue is a third-party brand colour, which is the one correct
   reason to hardcode one. Opacity is the hover because the mark's colour is
   not ours to darken. */
.sol-about__linkedin {
  display: flex;
  align-items: center;
  color: #0A66C2;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.sol-about__linkedin:hover { opacity: .7; color: #0A66C2; }
.sol-about__linkedin svg { display: block; flex: none; }

/* ============================================================
   6. Our Accreditations
   ============================================================ */

.sol-about__accred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sol-about__accred {
  background: var(--color-surface-raised);
  min-width: 0;
  padding: var(--space-700) var(--space-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-400);
}

/* A fixed-height slot with the mark CONTAINED inside it. The four logos run
   from a squarish ASIC lockup to a wide AFCA wordmark; what has to line up
   across a row is the name below them, not the marks themselves. */
.sol-about__accred-logo {
  height: 108px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* THE CEILING IS 56px AND THE HANDOFF SAYS 100, for the same reason the
   lender wall's is 44 and not 104: this theme's copies of these four marks are
   cropped to their artwork, so a ceiling here is the height of the mark
   itself rather than of an artboard with air around it.

   All four of these are wide — ASIC's lockup is four and a half times as wide
   as it is tall — so today the 340px WIDTH cap is what actually decides their
   size and a 100px height cap would never bind. That is luck, not a rule, and
   the day one of them is recropped or replaced by a squarer mark the height
   cap is what stops it standing twice as tall as its neighbours. 56px is
   where the widest of the four sits now, so this changes nothing on the page
   and makes the behaviour defined. */
.sol-about__accred-logo img {
  max-height: 56px;
  max-width: 340px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sol-about__accred-name {
  font: var(--type-item-base);
  letter-spacing: var(--type-item-base-tracking);
  color: var(--color-text-primary);
  margin-top: var(--space-200);
}

.sol-about__accred-desc {
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
  max-width: 40ch;
}

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

.sol-about__accred-licence a,
.sol-about__accred-licence span {
  font: var(--type-item-sm);
  letter-spacing: var(--type-item-sm-tracking);
  color: var(--color-text-primary);
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

/* Same 44px floor as the team rows, for the same reason — three of these four
   numbers are links to a public register and a 21px line box is not a tap
   target. inline-flex rather than flex: the number sits inside the sentence
   "Licence Number 500758" and has to stay on that line. What grows is the
   line's height, which the cell absorbs. */
.sol-about__accred-licence a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.sol-about__accred-licence a:hover { color: var(--color-text-accent-ink); }

/* ============================================================
   7. Our Finance Partners
   ============================================================ */

/* The full content column (the 1152 cap goes, CA-11.2) and 120px cells
   rather than the design's 152 — the home page's wall: the same twelve
   marks, in the same order, making the same claim. Two walls of the same
   logos at two different weights is a thing a reader notices without being
   able to say why. */
.sol-about__lender-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* THE CEILING IS 44px AND THE HANDOFF SAYS 104. Both are right, for different
   files. The design bundle's logos are centred on a 425x120 artboard with the
   mark filling a fifth to two fifths of it, so 104px of artboard stands a mark
   about 38px tall — which is what the prototype shows. THIS THEME'S copies of
   the same twelve marks were recropped to their artwork (see the note in
   template-parts/home/logo-wall.php), so a ceiling here is the height of the
   mark itself. Carrying the 104 across would have stood every lender's
   wordmark nearly three times as tall as the design draws it.

   44px is what the Finance page's wall and the home page's wall both stand
   these files at. The 64px of side padding is the other half of the control:
   the square-ish marks (ANZ, BOQ, nab) reach the ceiling, and the long
   wordmarks (Capital Finance, Pepper Money, Westpac) run out of cell width
   first and stop short of it — which is what keeps a wall of mixed shapes
   reading as one weight.

   Contained, never cropped, and never tinted: these are third-party marks and
   the licence to show them is a licence to show them unmodified. */
.sol-about__lender img {
  width: 100%;
  height: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* ============================================================
   8. Get Started Now — the refrain
   ============================================================ */

/* The refrain's internals are 24 / 24 (CA-1.8): one gap, no lead margins. */
.sol-about__refrain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-500);
}

.sol-about__refrain-heading {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
}

.sol-about__refrain-body {
  font: var(--type-body-lg); /* CA-2.3 */
  color: var(--color-text-secondary);
  max-width: 54ch;
}

.sol-about__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  justify-content: center;
}

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

   THE HANDOFF SHIPS NO MOBILE DESIGN. It names four breakpoints — 1024 for
   the two card grids, 968 for the hero, 900 for the timeline, 720 for
   everything else — and stops. Everything below those, down to the stated
   360px floor (--viewport-min), 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, with ONE exception that is stated where it happens: a phone
   reader gets the same page in the same sequence, because this page is a list
   of credentials and dropping one is dropping a claim. What changes is (a) the
   grids step down in the order the design gives them; (b) the headings are
   fluid below 1024 (CA-2.7) and have no steps of their own; (c) the vertical
   rhythm tightens at 720, which the layout tokens now do themselves (CA-1.9),
   so no section pad is restated here; and (d) padding comes off the contained
   panels, which is where a phone loses the most measure — the content column
   already spends 64px of a 390px screen on its gutters.

   THE ONE EXCEPTION is the star doodle in the quote section, which is hidden
   below the 968px stack width. It is the only element on the page positioned against a
   section rather than against content, it occupies whitespace that does not
   exist once the layout is one column, and it is decoration with an empty alt
   — there is nothing to lose by removing it and a collision with the type to
   gain by keeping it.
   ============================================================ */

/* ---- 1200px: the wide desktop step -------------------------
   Nothing to do. The hero and vision ovals are min(100%, …) and scale; the
   offset panel is a percentage of the content column and follows it in. The
   first real reflow is the header's, below. */

/* ---- 1024px: the header collapses --------------------------
   The header is the site's, not this page's, and it handles its own collapse.
   What is ours are the two three-column card grids: three across a tablet
   column would set the brand cards' body copy at about 26 characters a line,
   and would put a 240px portrait in a 210px cell. */
@media (max-width: 1023.98px) {
  .sol-about__brand-grid,
  .sol-about__team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The lender wall keeps its three columns to 720px, so from here down the
     cells narrow while their 64px of side padding does not. At a 768px
     viewport a cell is 235px and would spend 128 of it on padding, leaving
     107px for a wordmark that wants 140. First step down; the second is at
     720 where the wall halves. */
  .sol-about__lender { padding: var(--space-400) var(--space-500); }
}

/* ---- 968px: the hero loses its offset panel ----------------
   The design's own breakpoint: the panel goes and all the doodles drop to .8.
   The grey the panel was carrying becomes a box around the hero copy
   (CA-5.3), the one stacked-hero treatment on every page; the hero's own
   ground stays white. A contained box, so the card radius on all four.

   The media also loses its top padding here. At desktop that 96px is what
   holds the oval clear of the dot field above it; once the grid is one
   column the field has the whole width and the padding is just a gap between
   the header and the photograph. The doodles' .8 is --doodle-scale, set
   site-wide; each scales from the corner its place is measured from, so
   nothing moves when they do. */
@media (max-width: 967.98px) {
  .sol-about__offset { display: none; }
  .sol-about__hero-copy {
    background: var(--color-surface-offset);
    border-radius: var(--radius-lg);
    padding: var(--space-600);
  }
  .sol-about__hero-media { padding-top: 0; }

  /* The star goes at the stack width — see the exception noted above. */
  .sol-about__doodle--star { display: none; }

  /* The climb line and the sun changed size, so their drawings are pinned
     where the old boxes, scaled about their centres, put them. */
  .sol-about__doodle--climb { left: 3.2px; bottom: calc(24.1px - var(--doodle-climb-pad-b)); }
  .sol-about__doodle--sun { left: calc(min(100%, 640px) - 58.8px); top: -9.6px; }

  /* AND THE DOT FIELD MOVES BEHIND THE OVAL RATHER THAN BESIDE IT, which the
     design does not cover and which is not optional once the column stacks.
     At desktop the field is a 430x156 patch at left:110, sitting above and
     left of a 640px oval in a 620px cell — it reads as texture the oval is
     laid over. One column later the oval is the full width of the cell and
     the patch is entirely underneath it: at a 768px viewport the field
     disappears completely, and at 390px a 32px strip of it survives at the
     right edge looking like a rendering fault.

     So it is sized to the oval instead — inset to the cell's own width, with
     the oval's 640/286 aspect ratio so the two boxes coincide exactly. The
     dots then show through the four corners the ellipse leaves empty, which
     is the same relationship (texture under the photograph) drawn the only
     way it fits. */
  .sol-about__dots--hero {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    aspect-ratio: 640 / 286;
  }
}

/* ---- 900px: the timeline halves ----------------------------
   The design's breakpoint for the timeline: two columns with a 48px row gap,
   and the connecting rule hidden, because a rule that joins stop 1 to stop 2
   and then jumps a row is drawing a sequence that is not there. */
@media (max-width: 900px) {
  .sol-about__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-700);
  }
  .sol-about__timeline::before { display: none; }
}

/* ---- 900px: the vision portrait's line art comes inboard ---
   Separate query from the one above because it is answering the auto-fit
   collapse rather than a design breakpoint, and they only happen to coincide.
   At desktop the dot field and the cap hang 150px off the frame's left edge,
   into the gap between the two columns. One column later that gap is the page
   gutter: both would sit off-screen, and the section's overflow: hidden would
   simply eat them. Pulled inboard they keep the same job — anchoring the
   bottom-left of the composition — at a width where there is room for it. */
@media (max-width: 900px) {
  .sol-about__dots--vision { left: -32px; bottom: 96px; }
  /* Where the old box and scale left the drawing: its left edge at -40.2px,
     its foot 46.5px up. */
  .sol-about__doodle--cap {
    left: calc(-40.2px - var(--doodle-cap-pad-l));
    bottom: calc(46.5px - var(--doodle-cap-pad-b));
  }
}

/* ---- 820px: the quote mark moves above the quotation -------
   Not a design breakpoint — a measured one, and the reason the mark is a flex
   sibling rather than a background. Beside the text it costs 112px of file
   plus a 24px gap out of the row; below this width the quotation is left with
   under 45 characters a line at heading/2, which for a 100-character pull
   quote is five ragged lines.

   Above it, the mark keeps its job — it still says "this is a quotation" —
   and the quotation gets the whole column. The negative margin that pulled
   the file's shadow padding off the left edge comes back to nearly nothing,
   because the ink is 58% into its own box and the box is now the row. */
@media (max-width: 820px) {
  .sol-about__quote-row { flex-direction: column; gap: var(--space-200); }
  /* Above the text the mark's 58% of left padding is dead width at the start
     of an otherwise empty row, so here it IS pulled off — the one place on the
     page that corrects for the file box, because here the correction is what
     keeps the mark aligned with the quotation's first character. */
  .sol-about__doodle--quote {
    margin: 0 0 0 calc(-1 * var(--doodle-quote-pad-l));
  }
}

/* ---- 720px: the design's last breakpoint -------------------
   Its four rules, plus the vertical rhythm and the padding that a phone
   cannot afford.

   THE GRIDS. Brands and Team go to one column; the partner wall goes to
   two; the accreditations go to one. That last
   one is the design's own and it is right for a reason worth writing down:
   an accreditation cell is a logo, a name, a sentence and a licence number,
   and two of those across a 320px column gives each about 150px — the AFCA
   wordmark alone wants more than that.

   THE RHYTHM is the tokens' own now (CA-1.9): the section half steps 112 to
   64, the band inset 80 to 48 and the hero top 64 to 48, and the band lead
   stays 16. Nothing is restated here. */
@media (max-width: 720px) {
  .sol-about__brand-grid,
  .sol-about__team-grid { grid-template-columns: minmax(0, 1fr); }

  .sol-about__accred-grid { grid-template-columns: minmax(0, 1fr); }

  .sol-about__lender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* THE ACCREDITATION CELLS give back padding, which is where a phone loses
     the most measure. The brand and team cards are 24 at every width
     (CA-6.11) and need no step. */
  .sol-about__accred { padding: var(--space-600) var(--space-500); }

  /* THE LENDER CELLS GIVE BACK THEIR SIDE PADDING. The wall keeps three
     columns down to here and then goes to two, so between 1024 and 720 the
     cells narrow while their 64px a side does not. At two across in a 296px
     column a cell is 148px wide and would spend 128 of it on padding, leaving
     20px for a wordmark that wants 140. Square padding from here down, and
     the cell steps to the logo wall's phone height, 96 (CA-11.3). */
  .sol-about__lender { height: 96px; padding: var(--space-300) var(--space-400); }

  /* The quote block's own padding, for the same measure reason as the cards.
     The dotted field is inset: 0 and follows it. */
  .sol-about__quote-block { padding: var(--space-600) var(--space-400); }

  /* The hero's grey box gives back one step, as the cells do. */
  .sol-about__hero-copy { padding: var(--space-500); }

  /* Two buttons, stacked and full-width, 16 apart, the component's 48px
     sides kept (CA-4.10). At full width the tap target is the whole row
     rather than a 170px island, and the pair reads as one control group. */
  .sol-about__ctas { align-self: stretch; }
  .sol-about__ctas .sds-btn { flex: 1 1 100%; }
}

/* ---- 620px: the vision portrait runs out of margin ---------
   The 900px step above pulled the dot field and the cap in from -150px to
   -32 and -100, into the gap beside a 400px oval. That gap is the frame's
   share of the column, and it closes: at 620px the column is 556 and the
   margin each side is 78, at 464px the oval IS the column and there is none.
   Below this width the cap hangs off the screen and the field survives only
   as a strip of dots in the page gutter — a fragment that reads as a bug.

   THE FIELD GOES. At 260px wide there is nowhere for it: inside the frame it
   is behind the oval and invisible, outside it is off-screen. It is
   decoration with an empty alt and nothing is lost.

   THE CAP STAYS, in the corner the capsule cannot fill, tucked into the
   bottom-left one — off the page gutter's edge rather than over it, and below
   the widest part of the capsule rather than across the subject's sleeve.
   That is what the -72 and the -52 buy, at the one .8 reduction (the .62
   step is gone, CA-11.9); they were measured at 360, 390 and 620 rather than
   derived, because the frame's margin and the capsule's width at a given
   height both change with the viewport. Re-check it at those three widths if
   you move it. */
@media (max-width: 620px) {
  .sol-about__dots--vision { display: none; }
  /* Left edge at -12.2px, foot 18.5px up. */
  .sol-about__doodle--cap {
    left: calc(-12.2px - var(--doodle-cap-pad-l));
    bottom: calc(18.5px - var(--doodle-cap-pad-b));
  }
}

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

   Nothing on this page animates on its own and nothing lifts. Every
   transition here is a colour or an opacity on hover, at the fast duration,
   which is what that duration is for. Under a reduced-motion preference all
   of it stops.
   ============================================================ */

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