/* ===== LUNE Tax and Accounting — faithful rebuild of lunetax.com.au ===== */
/* Palette from the live Squarespace site's own CSS:
   accent  hsl(218.18, 37.29%, 23.14%)  ≈ #253551  (deep navy)
   lightAccent hsl(60, 7.46%, 86.86%)   ≈ #e2e2da  (warm light grey — page band)
   darkAccent  hsl(330, 2.44%, 16.08%)  ≈ #2a2829  (near-black)
   Fonts: Roboto (headings + body) */

:root {
  --accent: hsl(218.18, 37.29%, 23.14%);
  --navy: #2e4368;
  --greige: hsl(60, 7.46%, 86.86%);
  --ink: #2b2b29;
  --body: #3a3a38;
  --muted: #5c5c58;
  --white: #fff;
  --dark-btn: #1f2023;
  /* Every section heading on the live site is the SAME size — measured 45.23px at
     375px wide and 62.08px at 1280px. One scale, used everywhere. */
  --display: clamp(45.2px, calc(38.25px + 1.862vw), 62.1px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 18px;
  border-top: 5px solid #0e0e0e; /* the Squarespace site border line */
}
body.inner { background: var(--greige); }
img { max-width: 100%; display: block; }
a { color: var(--ink); }

.wrap { max-width: 1560px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }

/* ===== header ===== */
/* Inner pages: transparent header over the greige page (dark text).
   Homepage: transparent header floating OVER the hero photo (white text). */
header { background: var(--greige); }
header.overlay {
  position: absolute; top: 5px; left: 0; right: 0; z-index: 50;
  /* The real site floats the header straight over the photo — no tint, no rule.
     A tint here reads as a grey band across the top of the hero. */
  background: transparent;
  border-bottom: none;
}
header.overlay .brand,
header.overlay .nav-links a { color: var(--white); }
header.overlay .nav-cta { border-color: var(--white); color: var(--white); }
header.overlay .nav-cta:hover { background: var(--white); color: var(--ink); }
header.overlay .hamburger span { background: var(--white); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 34px clamp(24px, 4vw, 80px);
  position: relative;
}
.brand {
  font-size: 26.75px; font-weight: 400; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.nav-links {
  display: flex; align-items: center; gap: clamp(28px, 4.5vw, 64px); list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  color: var(--ink); text-decoration: none; font-size: 14.4px; font-weight: 400;
}
.nav-links a:hover { opacity: .7; }
.nav-links a.active { text-decoration: underline; text-underline-offset: 7px; }
.nav-cta {
  font-size: 14.4px; font-weight: 500; color: var(--ink); text-decoration: none;
  letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: 300px;
  padding: 17.3px 28.9px; white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--white); }

/* mobile menu */
#menu-toggle { display: none; }
.hamburger { display: none; cursor: pointer; padding: 6px; z-index: 60; }
.hamburger span {
  display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0;
  transition: transform .25s, opacity .25s;
}
.nav-links .menu-cta { display: none; }
@media (max-width: 1020px) {
  .nav { padding: 22px 22px; }
  .hamburger { display: block; position: relative; z-index: 120; }
  .brand { position: relative; z-index: 120; }
  .nav > .nav-cta { display: none; }
  /* full-screen takeover menu, like the original */
  .nav-links {
    display: none; position: fixed; inset: 0; transform: none;
    background: var(--greige); flex-direction: column;
    align-items: center; justify-content: center; gap: 7vh;
    z-index: 100; padding: 80px 24px;
  }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a {
    display: inline-block; padding: 0; color: var(--ink) !important;
    font-size: clamp(36px, 8vw, 58px); font-weight: 400; text-decoration: none;
  }
  .nav-links a.active { text-decoration: underline; text-underline-offset: 10px; }
  .nav-links .menu-cta { display: block; margin-top: 4vh; }
  .nav-links .menu-cta a {
    font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    border: 1px solid var(--ink); border-radius: 999px; padding: 20px 46px;
    text-decoration: none;
  }
  #menu-toggle:checked ~ .nav-links { display: flex; }
  #menu-toggle:checked ~ .hamburger span { background: var(--ink); }
  #menu-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #menu-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  #menu-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ===== buttons — Squarespace pills, uppercase ===== */
/* Measured on the live site: 12.8px / .05em / 0 25.6px padding / 59px tall.
   The old 24px 58px padding made these roughly twice the real size. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dark-btn); color: var(--white);
  text-decoration: none; font-weight: 500;
  font-size: 12.8px; letter-spacing: .05em; text-transform: uppercase;
  height: 59px; padding: 0 25.6px; border-radius: 300px; border: none; cursor: pointer;
  font-family: inherit;
}
@media (max-width: 1020px) { .btn { font-size: 14px; padding: 0 28.1px; } }
.btn:hover { opacity: .88; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #ececea; opacity: 1; }

/* ===== hero (image fills the whole screen; header floats over it) ===== */
.hero {
  position: relative;
  /* measured on the live site: 701px at 1280x720, 697px at 375x812 — a fixed
     height, not a viewport one. 100vh made it too tall on big monitors. */
  min-height: 700px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: url('hero.jpg') center/cover no-repeat #2a2a2c;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  /* live site: a single flat black at 45%. The extra top gradient that used to be
     here was what greyed out the top of the photo. */
  background: rgba(0, 0, 0, .45);
}
.hero-inner { position: relative; color: var(--white); padding: 120px 24px 90px; max-width: 1400px; }
.hero h1 { font-size: var(--display); font-weight: 400; line-height: .968; letter-spacing: -.02em; }
.hero p {
  font-size: clamp(19.9px, calc(18.97px + .248vw), 22.15px);
  line-height: 1.3; margin: 26px auto 48px; font-weight: 400;
  /* The live site's text column grows with the window (700px at 1280, 1162px at
     2560), so the sub-heading wraps to two lines on a laptop and one on a wide
     monitor. A fixed max-width got that wrong at one size or the other. */
  max-width: clamp(320px, calc(238px + 36.1vw), 1160px);
}

/* ===== tall sections =====
   Measured on the live site at 1280x720: 660px, 606px, 686px — content-sized and
   landing near a laptop viewport, NOT 100vh. On a tall monitor 100vh left far too
   much empty space. */
.full {
  min-height: 660px;
  display: flex; align-items: center;
  padding: 100px 0;
}

/* “Are you a” — greige like the original, left-aligned, huge */
.who { background: var(--greige); }
.who h2 { font-size: var(--display); letter-spacing: -.02em; font-weight: 400; color: var(--body); margin-bottom: 90px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 70px); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } .who h2 { margin-bottom: 50px; } }
.card h3 { font-size: clamp(30px, 2.6vw, 40px); font-weight: 400; margin-bottom: 26px; }
.card p { color: var(--body); font-size: 19px; line-height: 1.65; }
.card a {
  display: inline-block; margin-top: 26px; font-size: 17px; color: var(--ink);
  text-underline-offset: 5px;
}

/* consultation — full-screen photo band, white text */
.consult {
  position: relative; text-align: center; color: var(--white);
  background:
    linear-gradient(rgba(30, 24, 18, .28), rgba(30, 24, 18, .28)),
    url('desk.png') center/cover no-repeat;
  justify-content: center;
}
.consult .wrap { width: 100%; }
.consult h2 { font-size: var(--display); letter-spacing: -.02em; font-weight: 400; line-height: 1.18; margin-bottom: 34px; }
.consult p { max-width: 980px; margin: 0 auto 52px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; }
.consult p strong { font-weight: 500; }

/* ===== generic inner-page content (greige) ===== */
.page {
  padding: 110px 0 130px;
}
.page h1 { font-size: var(--display); letter-spacing: -.02em; font-weight: 400; margin-bottom: 60px; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 26px; line-height: 1.6; }
.about-grid p strong { font-weight: 500; }
.about-grid .meta { font-size: 19px; }
.about-grid .meta em { font-style: italic; }
.about-grid img { width: 100%; }

/* services — three columns, no page title */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4.5vw, 80px); }
@media (max-width: 950px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-grid h2 { font-size: clamp(30px, 2.8vw, 42px); font-weight: 400; color: #2f3e5c; margin-bottom: 40px; line-height: 1.25; }
.svc-grid p { font-size: 19px; font-weight: 400; color: var(--ink); line-height: 1.65; }

/* contact-us band on inner pages (greige, centered) */
.contact-band { text-align: center; justify-content: center; }
.contact-band .wrap { width: 100%; }
.contact-band h2 { font-size: var(--display); letter-spacing: -.02em; font-weight: 400; margin-bottom: 30px; }
.contact-band .wrap > p { max-width: 860px; margin: 0 auto 48px; font-size: clamp(18px, 1.7vw, 21px); font-weight: 400; }
.contact-band .bigform p { max-width: none; margin: 0 0 10px; text-align: left; }
.bigform p, .bigform label { text-align: left; }

/* contact page */
.contact-top { text-align: center; padding: 120px 0 40px; }
.contact-top h1 { font-size: var(--display); letter-spacing: -.02em; font-weight: 400; margin-bottom: 44px; }
.contact-top p { max-width: 1100px; margin: 0 auto 26px; font-size: clamp(19px, 1.9vw, 23px); font-weight: 400; }
.contact-top p strong { font-weight: 500; }
.contact-top .meta { font-size: clamp(18px, 1.7vw, 21px); }
.contact-top .meta em { font-style: italic; }

/* the big Squarespace-style form */
.bigform { max-width: 1300px; margin: 60px auto 0; text-align: left; }
.bigform .group-label { font-size: 25px; font-weight: 400; margin-bottom: 10px; }
.bigform label { font-size: 19px; font-weight: 400; display: block; margin-bottom: 10px; }
.bigform label .req { color: var(--muted); font-size: 17px; }
.bigform .row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px; margin-bottom: 40px; }
.bigform .row.even { grid-template-columns: 1fr 1fr; }
.bigform .row.phone { grid-template-columns: minmax(220px, 380px) 1fr; }
@media (max-width: 700px) { .bigform .row, .bigform .row.even, .bigform .row.phone { grid-template-columns: 1fr; } }
.bigform input, .bigform select {
  width: 100%; height: 58px; padding: 0 26px; font: inherit; font-size: 18px;
  border: 1px solid var(--ink); border-radius: 999px; background: transparent;
  color: var(--ink);
}
.bigform select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%232b2b29' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 24px center;
}
.bigform textarea {
  width: 100%; padding: 20px 26px; font: inherit; font-size: 18px;
  border: 1px solid var(--ink); border-radius: 30px; background: transparent;
  min-height: 210px; resize: vertical; color: var(--ink);
}
.bigform input:focus, .bigform textarea:focus, .bigform select:focus { outline: 2px solid var(--accent); }
.bigform .field { margin-bottom: 40px; }
.bigform ::placeholder { color: #77766f; }

/* legal pages */
.legal-page h1 { color: var(--navy); font-size: clamp(36px, 4vw, 56px); font-weight: 400; margin-bottom: 70px; line-height: 1.25; }
.legal-page p, .legal-page li { font-size: 19px; font-weight: 400; margin-bottom: 20px; color: var(--ink); }
.legal-page p strong { font-weight: 500; }
.legal-page ul { margin: 0 0 24px 26px; }
.legal-page li { margin-bottom: 10px; }

/* ===== footer — greige, big underlined title, underlined links ===== */
footer { background: var(--greige); padding: 90px 0 40px; }
body.inner footer { border-top: none; }
.foot { display: grid; grid-template-columns: 1.3fr auto; gap: 60px; align-items: start; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr; } }
.foot-title {
  display: inline-block; font-size: clamp(30px, 3vw, 42px); font-weight: 400;
  color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--navy); padding-bottom: 10px;
  margin-bottom: 46px;
}
.foot-brand p { font-size: 19px; font-weight: 400; margin-bottom: 26px; }
.foot-brand strong { font-weight: 500; }
.foot-links { display: flex; gap: clamp(50px, 7vw, 120px); padding-top: 14px; }
.foot-links ul { list-style: none; }
.foot-links li { margin-bottom: 26px; }
.foot-links a { color: var(--navy); font-size: 19px; text-underline-offset: 5px; }
.copyright {
  text-align: center; color: var(--ink); font-size: 16px; font-weight: 400;
  margin-top: 90px;
}