/* Soffit Group holding page.
   Colours and type from the Soffit brand guidelines. Product colours (Eave blue for
   Property, Jacaranda for Investments) appear only in each mark's square and one small
   accent on that product's card, never as a background. */

@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --white: #F4F6F3;
  --slate: #1E2B33;
  --eave: #2E6E9E;       /* Property */
  --sky: #A9CCE0;
  --jacaranda: #6A4C9C;  /* Investments */
  --muted: #4A5A63;
  --card: #FFFFFF;
  /* Colour roles, light here and dark below. In dark the brand guidelines' "on dark"
     colours apply: Sky for Property, light jacaranda for Investments, white for Group. */
  --bg: var(--white);
  --ink: var(--slate);
  --surface: var(--card);
  --grid-line: rgba(46,110,158,0.10);
  --focus: var(--eave);
  --property: var(--eave);
  --funds: var(--jacaranda);
  --house-line: var(--slate);
  --house-roof: var(--eave);
  --house-light: var(--slate);
  --display: "Besley", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }

/* The eave grid from the Soffit lander, faint, as the page's only texture */
.grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}

main { flex: 1 0 auto; }

.intro { padding: 72px 0 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.intro .logo { height: 96px; width: auto; }
.intro h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.intro h1 span { display: block; }
.intro .lead { font-size: 20px; max-width: 52ch; }

.doors {
  list-style: none;
  margin: 0;
  padding: 0 0 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.door {
  position: relative;
  background: var(--surface);
  border-top: 6px solid var(--accent);
  border-radius: 8px;
  padding: 32px 32px 36px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
}
.door--property { --accent: var(--property); }
.door--funds { --accent: var(--funds); }

.door img { grid-row: 1 / span 3; width: 112px; height: 112px; }
.door h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.door p { color: var(--muted); }

.soon {
  justify-self: start;
  margin-top: 6px;
  padding: 4px 10px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

footer { background: var(--slate); color: var(--white); }
footer .wrap { padding-top: 28px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; font-size: 15px; }
footer img { height: 44px; width: auto; }
footer p { color: #C9D3D8; }

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .intro { padding: 40px 0 32px; gap: 22px; }
  .intro .logo { height: 72px; }
  .door { grid-template-columns: 72px minmax(0, 1fr); padding: 24px 22px 28px; gap: 6px 18px; }
  .door img { width: 72px; height: 72px; }
  .door h2 { font-size: 26px; }
}

/* Opening motion. Shared Soffit motion language; full spec in MOTION.md.
   The house builds itself in about 1.3s while the words and the two doors arrive
   alongside it, so nobody waits to read. Runs once on load. Only stroke-dashoffset,
   opacity and transform are animated. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-enter: 480ms;
}

.house .draw {
  /* The dash is a touch longer than the line so the drawn stroke always reaches the end,
     and it starts parked just past the line's start so no rounded end-cap dot shows
     before it begins. Each pair of halves also overlaps slightly at the join, so the
     settled house has no hairline seam. */
  stroke-dasharray: 1.05 3;
  stroke-dashoffset: 1.12;
  animation: draw var(--dur) var(--ease-in-out) var(--delay) both;
}
.house .roof       { --dur: 520ms; --delay: 80ms; }
.house .eave       { --dur: 320ms; --delay: 360ms; }
.house .wall-outer { --dur: 440ms; --delay: 500ms; }
.house .wall-inner { --dur: 380ms; --delay: 620ms; }
.house .light {
  transform-box: fill-box;
  transform-origin: center top;
  animation: light 360ms var(--ease-out) 880ms both;
}
.house .wordmark { animation: rise-x 440ms var(--ease-out) 760ms both; }

.enter { animation: rise var(--dur-enter) var(--ease-out) var(--delay, 0ms) both; }
h1.enter { --delay: 200ms; }
.lead.enter { --delay: 260ms; }
.door--property.enter { --delay: 340ms; }
.door--funds.enter { --delay: 400ms; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes light {
  from { opacity: 0; transform: translateY(-14px) scaleY(0.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-x {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: no drawing or sliding. Everything fades in briefly, together. */
@media (prefers-reduced-motion: reduce) {
  .house .draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
  .house .light, .house .wordmark, .enter { animation: fade 200ms ease both; }
}

@media print {
  .house .light, .house .wordmark, .enter { animation: none !important; opacity: 1 !important; transform: none !important; }
  .house .draw { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--eave); }
}

/* The logo house and wordmark draw in the page's colours. */
.house g { stroke: var(--house-line); }
.house .roof { stroke: var(--house-roof); }
.house .light { fill: var(--house-light); }
.house .wordmark path { fill: var(--house-line); }

/* Dark mode follows the device setting. Footer stays deep slate in both. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1E2B33;
    --ink: #F4F6F3;
    --muted: #B7C4CB;
    --surface: #26353F;
    --grid-line: rgba(169,204,224,0.08);
    --focus: #A9CCE0;
    --property: #A9CCE0;
    --funds: #D2C2EA;
    --house-line: #F4F6F3;
    --house-roof: #A9CCE0;
    --house-light: #F4F6F3;
  }
  footer { background: #131C21; }
}

/* Preview-only "Leave feedback" button (added by feedback.js, never on the live domain). */
.feedback-button {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  background: #1E2B33; color: #F4F6F3; border: 2px solid #A9CCE0; border-radius: 6px;
  font: 700 15px/1.2 var(--body); text-decoration: none;
  box-shadow: 0 4px 16px rgba(30, 43, 51, 0.25);
}
.feedback-button:focus-visible { outline: 3px solid #A9CCE0; outline-offset: 3px; }
@media print { .feedback-button { display: none; } }

/* Property card links through to soffitproperty.com.au. The link sits on the heading
   (so screen readers hear "Soffit Property, link") and stretches over the whole card. */
.door__link, .door__link:hover, .door__link:visited { color: var(--ink); text-decoration: none; }
.door__link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.door:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.door__link:focus-visible { outline: none; }
.visit {
  justify-self: start;
  margin-top: 6px;
  padding: 6px 12px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--surface);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.door--property { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .door--property:hover { transform: translateY(-3px); }
}
.door--property:active { transform: translateY(-1px) scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  .door--property { transition: none; }
  .door--property:hover, .door--property:active { transform: none; }
}
/* Let the hover lift take over once the card has risen in: hold the start frame only. */
.door.enter { animation-fill-mode: backwards; }

/* Mobile: feel like an app, not a web page on a phone.
   - no grey flash on tap (each control has its own :active state instead)
   - taps fire at once (no double-tap-zoom wait), and holding a button does not select its label
   - content clears the notch and home bar in landscape and on edge-to-edge phones */
html { -webkit-tap-highlight-color: transparent; }
a, button, label[for], .btn, [role="button"] { touch-action: manipulation; }
.btn, button, .visit, .soon, .feedback-button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a:active { opacity: 0.72; }
.wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.feedback-button {
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
footer .wrap { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

/* Card layout: the mark is wrapped in <picture> (for the dark version), so the picture is
   the grid item. Mark on the left, text in the right column. */
.door picture { grid-column: 1; grid-row: 1 / span 3; display: block; line-height: 0; }
.door h2, .door p, .door .visit, .door .soon { grid-column: 2; }
@media (max-width: 560px) {
  /* Phones: mark and name side by side, then the line and the button full width. */
  .door picture { grid-row: 1; }
  .door h2 { align-self: center; }
  .door p, .door .visit, .door .soon { grid-column: 1 / -1; }
  .door p { margin: 6px 0 0; }
}

.note-ref { color: inherit; text-decoration: none; }
#note { font-size: 14px; max-width: 70ch; }

/* The suite name above the two product cards. */
.suite { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #4A5A63); margin: 0 0 14px; }

/* How the funds work, and the We're Here To Help network */
.funds, .network { margin: 8px 0 0; padding: 40px 0 0; border-top: 1px solid var(--grid-line); max-width: 760px; }
.network { padding-bottom: 72px; }
.funds h2, .network h2 { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; margin: 0 0 18px; }
.funds__steps { margin: 0 0 20px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 12px; }
.funds__steps strong { font-weight: 700; }
.funds__legal { font-size: 15px; color: var(--muted); }
.door__more { grid-column: 2; font-size: 15px; color: var(--accent); justify-self: start; }
@media (max-width: 560px) { .funds h2, .network h2 { font-size: 26px; } }