/* Buildless, mobile-first styles. System fonts keep the page fast and private. */
:root {
  --ink:#243e38;
  --green:#244f47;
  --muted:#576860;
  --cream:#f9f8f3;
  --sage:#e8eee6;
  --blue:#eaf0f1;
  --line:#d6dfd5;
  --serif:Georgia,'Times New Roman',serif;
  --radius:5px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

a {
  color:inherit;
  text-underline-offset:4px
}

button,input,textarea,select {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #8a601a;
  outline-offset:5px
}

img,svg {
  display:block;
  max-width:100%
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.13;
  letter-spacing:-1.5px
}

h2 {
  font-size:clamp(2rem,4vw,3rem)
}

h3 {
  font-size:1.13rem;
  line-height:1.4;
  font-weight:600
}

p {
  color:var(--muted)
}

em {
  font-weight:400
}

cite {
  font-style:italic
}

section[id],details[id] {
  scroll-margin-top:24px
}

.container {
  width:min(1160px,calc(100% - 40px));
  margin-inline:auto
}

.skip-link {
  position:absolute;
  top:10px;
  left:10px;
  z-index:10;
  transform:translateY(-160%);
  padding:10px;
  background:white
}

.skip-link:focus {
  transform:none
}

.site-header {
  border-bottom:1px solid var(--line)
}

.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:88px;
  gap:16px
}

.wordmark {
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  font-size:1.22rem;
  letter-spacing:-.8px;
  font-weight:650;
  white-space:nowrap
}

.wordmark svg {
  width:27px;
  height:30px;
  fill:none;
  stroke:var(--green);
  stroke-width:1.7;
  stroke-linejoin:round
}

.wordmark-light {
  font-weight:400
}

.brand-dot {
  color:#74907a
}

.header-inner nav {
  display:flex;
  align-items:center;
  gap:32px
}

.nav-about {
  display:none;
  font-size:.85rem;
  text-decoration:none
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  min-height:54px;
  padding:14px 22px;
  background:var(--green);
  color:#fff;
  border:1px solid var(--green);
  border-radius:var(--radius);
  font-size:.94rem;
  font-weight:550;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s,transform .18s
}

.button:hover {
  background:#173e37
}

.button span {
  font-size:1.2rem
}

.button-small {
  min-height:44px;
  padding:8px 14px;
  font-size:.82rem;
  gap:15px
}

.hero {
  padding-top:44px
}

.hero-grid {
  display:grid;
  gap:36px
}

.eyebrow {
  font-size:.65rem;
  line-height:1.6;
  font-weight:650;
  letter-spacing:1.65px;
  color:var(--green)
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}

.little-line {
  width:21px;
  height:1px;
  background:var(--green);
  flex-shrink:0
}

h1 {
  font-size:clamp(4.2rem,10vw,6.8rem);
  line-height:.99;
  margin:24px 0;
  color:var(--green);
  letter-spacing:-3.8px
}

h1 em {
  color:#66826a
}

.hero-subhead {
  font-size:clamp(1.45rem,3vw,1.9rem);
  letter-spacing:-.6px;
  line-height:1.3;
  margin-bottom:20px
}

.intro {
  max-width:440px;
  font-size:1rem
}

.hero-button {
  margin-top:25px
}

.microcopy {
  font-size:.75rem;
  margin-top:11px
}

.hero-figure {
  align-self:center
}

.illustration-frame {
  overflow:hidden;
  background:#e7eee5;
  border-radius:48% 48% 5px 5px
}

.illustration-frame img {
  width:100%;
  height:auto
}

.hero-figure figcaption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:18px;
  font-size:.58rem;
  letter-spacing:1.65px;
  color:var(--muted)
}

.caption-rule {
  width:20px;
  height:1px;
  background:#8d9c88
}

.question-wrap {
  margin-top:45px
}

.question-band {
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--sage);
  padding:26px 22px;
  border-radius:var(--radius)
}

.question-mark {
  font-family:var(--serif);
  font-size:4rem;
  line-height:1;
  color:#78947b
}

.question {
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:10px
}

.question-band div>p:last-child {
  font-size:.9rem
}

.section {
  padding-block:65px
}

.section-heading>h2 {
  margin-top:15px
}

.section-heading>p:last-of-type {
  margin-top:19px;
  max-width:450px
}

.principles {
  display:grid;
  gap:28px;
  margin-top:35px
}

.principles article {
  border-top:1px solid var(--line);
  padding-top:23px
}

.principle-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  background:var(--sage);
  border-radius:50%;
  font-size:1.65rem;
  font-family:var(--serif);
  color:var(--green);
  margin-bottom:20px
}

.principles h3 {
  margin-bottom:10px
}

.principles p {
  font-size:.95rem
}

.process-section {
  background:var(--sage)
}

.process-grid,.help-grid {
  display:grid;
  gap:35px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  margin-top:25px;
  color:var(--green);
  font-size:.92rem;
  font-weight:600
}

.steps {
  padding:0;
  margin:0;
  list-style:none
}

.steps li {
  display:flex;
  gap:22px;
  padding:23px 0;
  border-bottom:1px solid #cbd6ca
}

.steps li:first-child {
  padding-top:0
}

.steps li:last-child {
  border-bottom:0;
  padding-bottom:0
}

.step-number {
  flex-shrink:0;
  color:#617c65;
  font:1.45rem var(--serif);
  padding-top:3px
}

.steps p {
  margin-top:6px;
  font-size:.93rem
}

.help-list {
  list-style:none;
  margin:0;
  padding:0;
  align-self:center
}

.help-list li {
  display:flex;
  gap:15px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:.98rem
}

.help-list li:first-child {
  padding-top:0
}

.help-list li:last-child {
  border-bottom:0
}

.help-list span {
  color:var(--green);
  font-size:1.2rem
}

.voice-section {
  padding-bottom:65px
}

.voice-panel {
  display:flex;
  gap:24px;
  padding:28px 24px;
  background:var(--blue);
  border:1px solid #dbe4e3;
  border-radius:var(--radius)
}

.voice-panel h2 {
  font-size:1.85rem;
  letter-spacing:-.7px;
  margin:12px 0 18px
}

.voice-panel p:not(.eyebrow) {
  font-size:.94rem
}

.voice-icon {
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-shrink:0;
  width:64px;
  height:64px;
  background:#dce7e7;
  border-radius:50%
}

.voice-icon span {
  height:16px;
  width:3px;
  background:#5b7c78;
  border-radius:2px
}

.voice-icon span:nth-child(2n) {
  height:27px
}

.voice-icon span:nth-child(3n) {
  height:37px
}

.exploration-tag {
  display:inline-block;
  margin-top:20px;
  border:1px solid #bacdca;
  border-radius:30px;
  padding:5px 12px;
  font-size:.68rem;
  letter-spacing:.3px;
  color:#3e625c
}

.conversation-section {
  background:#e4ece2
}

.conversation-grid {
  display:grid;
  gap:34px
}

.conversation-copy h2 {
  font-size:clamp(2.6rem,5vw,3.6rem);
  margin:16px 0 24px
}

.conversation-copy h2 em {
  color:#5b775f
}

.conversation-copy>p:not(.eyebrow) {
  max-width:370px;
  font-size:1rem
}

.conversation-note {
  display:none;
  align-items:flex-start;
  gap:16px;
  border-top:1px solid #c6d3c4;
  padding-top:24px;
  margin-top:35px;
  max-width:320px
}

.conversation-note>span {
  font-size:1.7rem;
  color:#5b775f
}

.conversation-note p {
  font-family:var(--serif);
  font-size:1.3rem;
  line-height:1.6
}

.enquiry-form {
  padding:24px 20px;
  background:#fffefa;
  border-radius:7px;
  box-shadow:0 8px 30px #274b3510
}

.form-notice {
  background:#f0f0e7;
  border-left:3px solid #869178;
  font-size:.84rem;
  padding:12px 14px;
  margin-bottom:24px
}

.field {
  margin-bottom:19px;
  min-width:0
}

.field label {
  display:block;
  margin-bottom:7px;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink)
}

.optional-label,.required-label {
  font-size:.73rem;
  font-weight:400;
  color:var(--muted)
}

input:not([type=checkbox]),select,textarea {
  width:100%;
  min-height:49px;
  border:1px solid #b8c7ba;
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  padding:11px 12px
}

textarea {
  resize:vertical;
  min-height:110px
}

.field-hint {
  font-size:.72rem;
  margin-top:6px
}

.consent-field {
  display:flex;
  gap:11px;
  align-items:flex-start
}

.consent-field input {
  flex-shrink:0;
  width:20px;
  height:20px;
  margin:3px 0 0;
  accent-color:var(--green)
}

.consent-field label {
  font-size:.78rem;
  line-height:1.65;
  color:#43554b;
  cursor:pointer
}

.privacy-note {
  font-size:.73rem;
  margin:15px 0 21px
}

.submit-button {
  width:100%
}

.button:disabled {
  cursor:not-allowed;
  opacity:.65
}

.form-status {
  font-size:.85rem;
  margin-top:12px
}

.form-status:empty {
  display:none
}

.site-footer {
  padding:35px 0 20px
}

.footer-top,.footer-bottom {
  display:flex;
  flex-direction:column;
  gap:20px
}

.footer-top {
  padding-bottom:25px;
  border-bottom:1px solid var(--line)
}

.footer-top>p {
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem
}

.footer-bottom {
  padding-block:25px;
  font-size:.75rem
}

.footer-bottom p+p {
  margin-top:4px
}

.footer-bottom>div:last-child p {
  margin-top:4px
}

.privacy-policy {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:.82rem;
  padding:15px 0;
  max-width:850px
}

.privacy-policy summary {
  cursor:pointer;
  min-height:30px
}

.privacy-policy h2 {
  font-size:1.6rem;
  letter-spacing:-.4px;
  margin:18px 0
}

.privacy-policy p {
  margin-bottom:14px
}

.policy-pending {
  padding:12px;
  background:var(--sage)
}

.copyright {
  font-size:.68rem;
  margin-top:22px
}

/* Expand layout only where the content has room. No fixed widths or heights. */
@media(min-width:600px) {
  .container {
    width:min(1160px,calc(100% - 72px))
  }
  .nav-about {
    display:inline
  }
  .wordmark {
    font-size:1.4rem
  }
  .field-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px
  }
  .enquiry-form {
    padding:32px
  }
  .voice-icon {
    display:flex
  }
  .voice-panel {
    padding:36px
  }
  .footer-top,.footer-bottom {
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .footer-bottom {
    align-items:flex-start
  }
  .footer-bottom>div:last-child {
    text-align:right
  }
}

@media(min-width:900px) {
  .header-inner {
    min-height:97px
  }
  .hero {
    padding-top:65px
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center
  }
  .hero-figure {
    margin-top:0
  }
  .hero .eyebrow {
    font-size:.61rem;
    letter-spacing:1.4px
  }
  .question-wrap {
    margin-top:58px
  }
  .question-band {
    padding:30px 39px;
    gap:24px
  }
  .question {
    font-size:1.65rem
  }
  .section {
    padding-block:88px
  }
  .why-section .section-heading {
    max-width:620px
  }
  .principles {
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:43px
  }
  .process-grid,.help-grid {
    grid-template-columns:.95fr 1.05fr;
    gap:100px
  }
  .voice-panel {
    padding:40px 45px;
    gap:32px
  }
  .voice-panel>div:last-child {
    max-width:850px
  }
  .voice-section {
    padding-bottom:88px
  }
  .conversation-grid {
    grid-template-columns:.9fr 1.1fr;
    gap:100px
  }
  .conversation-copy {
    padding-top:20px
  }
  .conversation-note {
    display:flex
  }
  .site-footer {
    padding-top:43px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

