@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* =========================================================
   SCOPUS OPEN ACCESS PUBLISHERS
   Complete Orange / Charcoal / White Theme
   ========================================================= */

:root {
  --cream: #fff8f3;
  --paper: #ffffff;

  --sage: #ff5a00;
  --sage-deep: #242627;

  --olive: #f7a16f;
  --olive-soft: #ffe6d7;

  --terracotta: #dc4b00;
  --terracotta-soft: #ffd8c2;

  --gold: #f47a1f;
  --gold-soft: #fff0e5;

  --charcoal: #242627;
  --muted: #6c625d;

  --line: rgba(255, 90, 0, .18);

  --shadow: 0 24px 70px rgba(220, 75, 0, .13);
  --shadow-soft: 0 12px 36px rgba(220, 75, 0, .09);

  --radius: 34px;

  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 16% 3%,
      rgba(255, 225, 207, .62),
      transparent 31rem
    ),
    radial-gradient(
      circle at 84% 22%,
      rgba(255, 239, 229, .72),
      transparent 34rem
    ),
    var(--cream);

  color: var(--charcoal);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .11;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");

  z-index: 30;
  mix-blend-mode: multiply;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;

  padding: .7rem 1rem;

  background: var(--charcoal);
  color: white;

  border-radius: 99px;
}

.skip-link:focus {
  top: 1rem;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 25;

  padding: .8rem 0;

  background: rgba(255, 248, 243, .94);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 90, 0, .10);
}

.nav-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: auto;

  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;

  text-decoration: none;
  margin-right: auto;

  font-weight: 700;
  letter-spacing: -.02em;
}

.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.brand span {
  max-width: 12rem;
  line-height: 1.05;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.nav-links a {
  text-decoration: none;
  padding: .65rem .78rem;

  border-radius: 999px;

  font-size: .92rem;
  color: #514945;

  transition:
    background .2s ease,
    color .2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: var(--olive-soft);
  color: var(--terracotta);
}

.nav-cta,
.button {
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  padding: .84rem 1.25rem;

  border-radius: 999px;

  background: var(--sage);
  color: white;

  text-decoration: none;
  font-weight: 700;

  box-shadow: 0 10px 25px rgba(255, 90, 0, .22);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);

  background: var(--terracotta);

  box-shadow: 0 14px 30px rgba(220, 75, 0, .28);
}

.button.secondary {
  background: var(--terracotta-soft);
  color: #8b350b;
  box-shadow: none;
}

.button.ghost {
  background: transparent;
  color: var(--terracotta);

  border: 1px solid var(--line);

  box-shadow: none;
}

.menu-toggle {
  display: none;

  border: 0;
  background: transparent;

  padding: .5rem;

  color: var(--terracotta);
}


/* =========================================================
   TYPOGRAPHY / GENERAL LAYOUT
   ========================================================= */

main {
  position: relative;
  z-index: 1;
}

.section {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;

  padding: 7rem 0;

  position: relative;
}

.section-tight {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  text-transform: uppercase;
  letter-spacing: .15em;

  font-size: .74rem;
  font-weight: 700;

  color: var(--sage);
}

.eyebrow::before {
  content: "";

  width: 22px;
  height: 1px;

  background: currentColor;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  line-height: 1.16;

  color: var(--charcoal);

  margin-top: 0;
}

h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  letter-spacing: -.055em;
}

h2 {
  font-size: clamp(2.15rem, 4vw, 4.15rem);
  letter-spacing: -.045em;
}

h3 {
  font-size: 1.35rem;
}

p {
  margin: 0 0 1rem;
}

.lead {
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  color: #625a55;

  max-width: 43rem;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 3rem;
}

.section-heading p {
  color: var(--muted);
  max-width: 650px;
}


/* =========================================================
   PANORAMIC HERO
   ========================================================= */

.garden-hero {
  width: min(1440px, calc(100% - 1.2rem));
  min-height: 740px;

  margin: .6rem auto 0;

  position: relative;
  overflow: hidden;

  border-radius:
    48px 48px 150px 150px /
    48px 48px 90px 90px;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(255,255,255,.9) 0 5%,
      transparent 5.3%
    ),
    linear-gradient(
      180deg,
      #fff2e9 0%,
      #fff9f5 42%,
      #ffe3d2 100%
    );

  box-shadow: var(--shadow);
}

.garden-hero::before,
.garden-hero::after {
  content: "";

  position: absolute;

  border-radius: 50%;
  filter: blur(.2px);
}

.garden-hero::before {
  width: 900px;
  height: 420px;

  left: -250px;
  bottom: -220px;

  background: #f7aa78;

  box-shadow:
    680px 35px 0 #fbd7c0,
    1180px -10px 0 #f58a46;
}

.garden-hero::after {
  width: 480px;
  height: 200px;

  right: -60px;
  bottom: -100px;

  background: rgba(255, 90, 0, .20);
}

.hero-content {
  position: relative;
  z-index: 3;

  width: min(1180px, calc(100% - 2rem));
  margin: auto;

  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;

  min-height: 680px;

  gap: 3rem;

  padding: 3rem 0 6rem;
}

.hero-copy {
  padding-top: 2rem;
}

.hero-copy h1 {
  max-width: 780px;
  margin: 1rem 0 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: .8rem;

  margin-top: 2rem;
}

.hero-note {
  display: flex;
  align-items: center;

  gap: .8rem;

  margin-top: 1.5rem;

  color: var(--muted);
  font-size: .92rem;
}

.hero-note .avatars {
  display: flex;
}

.hero-note .avatars span {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  border: 3px solid var(--paper);

  margin-left: -8px;

  background: var(--terracotta-soft);
}

.hero-note .avatars span:nth-child(2) {
  background: #f7a16f;
}

.hero-note .avatars span:nth-child(3) {
  background: var(--gold-soft);
}

.hero-garden {
  min-height: 500px;
  position: relative;
}

.paper-canopy {
  position: absolute;

  width: 420px;
  min-height: 300px;

  right: 1rem;
  top: 6.5rem;

  padding: 2.3rem;

  background: rgba(255,255,255,.95);

  border: 1px solid rgba(255,90,0,.12);

  border-radius:
    48% 52% 44% 56% /
    40% 48% 52% 60%;

  box-shadow: var(--shadow);

  transform: rotate(2deg);
}

.paper-canopy::before {
  content: "";

  position: absolute;

  inset: -25px 45px auto -30px;

  height: 90px;

  border-radius: 50%;

  background: rgba(247,161,111,.38);

  z-index: -1;

  transform: rotate(-8deg);
}

.paper-canopy .mini-label {
  display: inline-block;

  padding: .35rem .7rem;

  border-radius: 999px;

  background: var(--gold-soft);
  color: #9a3c0d;

  font-size: .78rem;
  font-weight: 700;
}

.paper-canopy h3 {
  font-size: 1.75rem;

  margin: 1.1rem 0 .6rem;
}

.paper-lines {
  display: grid;
  gap: .55rem;

  margin: 1.2rem 0;
}

.paper-lines span {
  display: block;

  height: 7px;

  border-radius: 99px;

  background: var(--olive-soft);
}

.paper-lines span:nth-child(2) {
  width: 84%;
}

.paper-lines span:nth-child(3) {
  width: 65%;
}

.paper-check {
  display: flex;
  gap: .65rem;

  align-items: center;

  margin-top: 1rem;

  font-size: .9rem;
}

.paper-check i {
  width: 26px;
  height: 26px;

  border-radius: 50%;

  background: var(--sage);
  color: white;

  font-style: normal;

  display: grid;
  place-items: center;
}

.garden-orbit {
  position: absolute;

  border: 1px dashed rgba(255,90,0,.27);

  border-radius: 50%;

  animation: breathe 6s ease-in-out infinite;
}

.garden-orbit.one {
  width: 520px;
  height: 360px;

  right: -45px;
  top: 70px;

  transform: rotate(-12deg);
}

.garden-orbit.two {
  width: 310px;
  height: 500px;

  right: 40px;
  top: 25px;

  transform: rotate(21deg);

  animation-delay: -2s;
}

.leaf-dot {
  position: absolute;

  width: 56px;
  height: 34px;

  background: var(--sage);

  border-radius: 100% 0 100% 0;

  box-shadow: var(--shadow-soft);
}

.leaf-dot.one {
  right: 405px;
  top: 145px;

  transform: rotate(12deg);
}

.leaf-dot.two {
  right: 50px;
  top: 75px;

  background: var(--terracotta);

  transform: rotate(70deg);
}

.leaf-dot.three {
  right: 390px;
  bottom: 75px;

  background: var(--gold);

  transform: rotate(-40deg);
}

@keyframes breathe {
  50% {
    transform: scale(1.03) rotate(-8deg);
    opacity: .7;
  }
}


/* =========================================================
   BRANCHING PATH SELECTOR
   ========================================================= */

.path-selector-wrap {
  margin-top: -74px;

  position: relative;
  z-index: 5;
}

.path-selector {
  width: min(1080px, calc(100% - 2rem));

  margin: auto;

  background: rgba(255,255,255,.96);

  border: 1px solid rgba(255,90,0,.12);

  border-radius: 80px 36px 75px 42px;

  box-shadow: var(--shadow);

  padding: 2.1rem;

  display: grid;
  grid-template-columns: 1.15fr 1fr;

  gap: 1.5rem;

  align-items: center;
}

.path-selector h2 {
  font-size: clamp(1.6rem, 3vw, 2.55rem);

  margin-bottom: .5rem;
}

.path-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: .7rem;
}

.path-choice {
  border: 1px solid var(--line);

  background: var(--paper);

  border-radius:
    60% 40% 58% 42% /
    45% 55% 45% 55%;

  padding: .95rem 1rem;

  color: var(--charcoal);

  font-weight: 700;

  text-align: left;

  min-height: 70px;

  transition: .2s ease;
}

.path-choice:hover,
.path-choice.active {
  background: var(--olive-soft);

  color: var(--terracotta);

  transform: rotate(-1deg) translateY(-2px);

  border-color: transparent;
}

.path-result {
  border-left: 1px solid var(--line);

  padding-left: 1.4rem;

  color: var(--muted);
}

.path-result strong {
  display: block;

  color: var(--terracotta);

  margin-bottom: .3rem;
}


/* =========================================================
   RESEARCHER JOURNEY
   ========================================================= */

.journey-section {
  min-height: 900px;
}

.journey-field {
  position: relative;

  min-height: 650px;

  margin-top: 1rem;
}

.journey-hub {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%);

  width: 270px;
  height: 270px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  text-align: center;

  padding: 2rem;

  background:
    linear-gradient(
      145deg,
      var(--sage),
      var(--terracotta)
    );

  color: white;

  box-shadow:
    0 28px 70px rgba(220,75,0,.30);

  z-index: 3;
}

.journey-hub h3 {
  color: white;

  font-size: 2rem;

  margin: 0 0 .5rem;
}

.journey-hub p {
  font-size: .9rem;
  opacity: .82;
}

.journey-ring {
  position: absolute;

  inset: 6% 9%;

  border: 2px dashed rgba(255,90,0,.23);

  border-radius: 50% 45% 52% 48%;

  transform: rotate(-5deg);
}

.service-petal {
  position: absolute;

  width: 245px;
  min-height: 180px;

  padding: 1.4rem;

  background: var(--paper);

  border: 1px solid var(--line);

  box-shadow: var(--shadow-soft);

  border-radius:
    46% 54% 42% 58% /
    38% 43% 57% 62%;

  transition: transform .2s ease;
}

.service-petal:hover {
  transform: translateY(-5px) rotate(-1deg);
}

.service-petal .petal-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--terracotta-soft);
  color: var(--terracotta);

  font-weight: 700;

  margin-bottom: .8rem;
}

.service-petal h3 {
  margin-bottom: .45rem;

  font-size: 1.15rem;
}

.service-petal p {
  color: var(--muted);

  font-size: .9rem;
}

.service-petal:nth-child(2) {
  top: 0;
  left: 12%;
}

.service-petal:nth-child(3) {
  top: 4%;
  right: 9%;

  border-radius:
    56% 44% 55% 45% /
    44% 56% 44% 56%;
}

.service-petal:nth-child(4) {
  top: 40%;
  right: 0;
}

.service-petal:nth-child(5) {
  bottom: 0;
  right: 17%;
}

.service-petal:nth-child(6) {
  bottom: 0;
  left: 17%;
}

.service-petal:nth-child(7) {
  top: 40%;
  left: 0;
}


/* =========================================================
   ORGANIC BAND
   ========================================================= */

.organic-band {
  position: relative;

  background: #fff0e6;

  margin: 2rem 0;

  padding: 4rem 0;
}

.organic-band::before,
.organic-band::after {
  content: "";

  position: absolute;

  left: -2%;

  width: 104%;
  height: 95px;

  background: #fff0e6;

  border-radius: 50%;
}

.organic-band::before {
  top: -45px;
}

.organic-band::after {
  bottom: -45px;
}

.organic-band > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   PUBLICATION PATH
   ========================================================= */

.publication-path {
  position: relative;

  display: grid;

  gap: 5.5rem;

  padding: 2rem 0;
}

.publication-path::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;
  bottom: 0;

  width: 6px;

  background:
    linear-gradient(
      var(--terracotta),
      var(--gold),
      var(--sage)
    );

  border-radius: 99px;

  transform: translateX(-50%);

  mask-image:
    radial-gradient(
      circle at center,
      #000 0 55%,
      transparent 58%
    );

  mask-size: 6px 24px;
}

.path-step {
  width: 46%;

  padding: 1.6rem 1.7rem;

  border-radius:
    44px 26px 50px 28px;

  background: var(--paper);

  box-shadow: var(--shadow-soft);

  position: relative;
}

.path-step:nth-child(even) {
  margin-left: auto;

  border-radius:
    26px 48px 30px 55px;
}

.path-step::after {
  content: "";

  position: absolute;

  width: 18px;
  height: 18px;

  background: var(--sage);

  border: 7px solid var(--cream);

  border-radius: 50%;

  top: 50%;
}

.path-step:nth-child(odd)::after {
  right: -12.8%;
}

.path-step:nth-child(even)::after {
  left: -12.8%;
}

.path-step small {
  color: var(--terracotta);

  text-transform: uppercase;

  letter-spacing: .13em;

  font-weight: 700;
}

.path-step h3 {
  margin: .35rem 0 .45rem;
}

.path-step p {
  color: var(--muted);
}


/* =========================================================
   DISCIPLINES
   ========================================================= */

.leaf-tabs {
  display: flex;
  flex-wrap: wrap;

  gap: .8rem;

  margin-bottom: 2rem;
}

.leaf-tab {
  border: 1px solid var(--line);

  background: var(--paper);
  color: var(--charcoal);

  padding: .85rem 1.25rem;

  border-radius: 100% 0 100% 0;

  min-width: 155px;

  font-weight: 700;

  transition: .2s ease;
}

.leaf-tab:hover,
.leaf-tab.active {
  background: var(--sage);
  color: white;

  transform: rotate(-1deg);
}

.discipline-panel {
  display: none;

  grid-template-columns: .8fr 1.2fr;

  gap: 3rem;

  align-items: center;

  padding: 2.8rem;

  background: var(--paper);

  border-radius:
    55px 30px 70px 35px;

  box-shadow: var(--shadow-soft);
}

.discipline-panel.active {
  display: grid;
}

.discipline-visual {
  min-height: 300px;

  border-radius:
    55% 45% 48% 52% /
    48% 58% 42% 52%;

  background:
    linear-gradient(
      145deg,
      #f69c63,
      #fff0e5
    );

  position: relative;

  overflow: hidden;
}

.discipline-visual::before {
  content: "";

  position: absolute;

  inset: 20% 15%;

  border: 2px solid rgba(255,90,0,.24);

  border-radius: 50%;

  box-shadow:
    60px 10px 0 10px rgba(255,255,255,.30),
    -40px 70px 0 4px rgba(220,75,0,.16);
}

.discipline-panel ul {
  columns: 2;

  padding-left: 1.1rem;

  color: var(--muted);
}


/* =========================================================
   MENTORS
   ========================================================= */

.mentor-grove {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 2.2rem;

  padding: 2rem 0;
}

.mentor {
  width: 205px;

  text-align: center;
}

.mentor:nth-child(even) {
  transform: translateY(35px);
}

.mentor-photo {
  width: 150px;
  height: 150px;

  border-radius: 50%;

  margin: auto auto 1rem;

  padding: 10px;

  background: var(--olive-soft);

  position: relative;
}

.mentor-photo::before {
  content: "";

  position: absolute;

  inset: 10px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 34%,
      #f2cdbd 0 13%,
      transparent 14%
    ),
    radial-gradient(
      circle at 50% 44%,
      #5d4d44 0 23%,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #f3ad80,
      #ff5a00
    );
}

.mentor:nth-child(2) .mentor-photo::before {
  background:
    radial-gradient(
      circle at 50% 34%,
      #d7aa8a 0 13%,
      transparent 14%
    ),
    radial-gradient(
      circle at 50% 44%,
      #2f2b29 0 23%,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #dc4b00,
      #f47a1f
    );
}

.mentor:nth-child(3) .mentor-photo::before {
  background:
    radial-gradient(
      circle at 50% 34%,
      #f0c4a8 0 13%,
      transparent 14%
    ),
    radial-gradient(
      circle at 50% 44%,
      #7b5b4c 0 23%,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #ffd8c2,
      #ff5a00
    );
}

.mentor:nth-child(4) .mentor-photo::before {
  background:
    radial-gradient(
      circle at 50% 34%,
      #9b654f 0 13%,
      transparent 14%
    ),
    radial-gradient(
      circle at 50% 44%,
      #222 0 23%,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #f47a1f,
      #242627
    );
}

.mentor strong {
  display: block;

  font-family: var(--serif);

  color: var(--charcoal);
}

.mentor span {
  font-size: .86rem;

  color: var(--muted);
}


/* =========================================================
   COMMUNITY WALL
   ========================================================= */

.community-wall {
  columns: 3 280px;

  column-gap: 1.25rem;
}

.testimonial-note {
  break-inside: avoid;

  margin: 0 0 1.25rem;

  padding: 1.5rem;

  background: var(--paper);

  border-radius:
    30px 46px 25px 40px;

  box-shadow: var(--shadow-soft);

  position: relative;
}

.testimonial-note:nth-child(3n+2) {
  background: var(--terracotta-soft);

  transform: rotate(.5deg);
}

.testimonial-note:nth-child(3n) {
  background: var(--gold-soft);

  border-radius:
    48px 24px 45px 30px;
}

.testimonial-note p {
  font-family: var(--serif);

  color: #4d4642;
}

.testimonial-note footer {
  color: var(--muted);

  font-size: .86rem;
}


/* =========================================================
   NOTEBOOK FAQ
   ========================================================= */

.notebook {
  display: grid;

  gap: .9rem;

  max-width: 880px;

  margin: auto;

  position: relative;
}

.notebook::before {
  content: "";

  position: absolute;

  left: 42px;
  top: 0;
  bottom: 0;

  width: 2px;

  background: rgba(255,90,0,.30);

  z-index: 2;

  pointer-events: none;
}

.faq-item {
  background:
    repeating-linear-gradient(
      to bottom,
      var(--paper) 0 38px,
      rgba(255,90,0,.07) 39px 40px
    );

  border: 1px solid var(--line);

  border-radius:
    20px 48px 20px 40px;

  box-shadow: var(--shadow-soft);

  overflow: hidden;
}

.faq-question {
  width: 100%;

  border: 0;

  background: transparent;

  padding:
    1.2rem 1.5rem 1.2rem 4rem;

  text-align: left;

  color: var(--charcoal);

  font-weight: 700;

  display: flex;

  justify-content: space-between;

  gap: 1rem;
}

.faq-question::after {
  content: "+";

  font-size: 1.3rem;

  color: var(--sage);
}

.faq-item.open .faq-question::after {
  content: "–";
}

.faq-answer {
  display: none;

  padding:
    0 1.6rem 1.5rem 4rem;

  color: var(--muted);
}

.faq-item.open .faq-answer {
  display: block;
}


/* =========================================================
   CONSULTATION DESK
   ========================================================= */

.consultation-desk {
  display: grid;

  grid-template-columns: .78fr 1.22fr;

  gap: 2rem;

  padding: 2rem;

  border-radius:
    70px 35px 80px 40px;

  background:
    linear-gradient(
      160deg,
      #ffe4d1,
      #ffffff
    );

  box-shadow: var(--shadow);

  position: relative;
}

.desk-intro {
  padding: 2.5rem 1.5rem;
}

.desk-intro .contact-detail {
  margin-top: 2rem;

  display: grid;

  gap: .8rem;
}

.contact-detail span {
  display: block;

  color: var(--muted);

  font-size: .85rem;
}

.contact-detail strong {
  color: var(--charcoal);
}

.desk-form {
  background: rgba(255,255,255,.94);

  border-radius:
    40px 28px 50px 30px;

  padding: 2rem;

  border: 1px solid var(--line);
}

.form-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;
}

.field {
  display: grid;

  gap: .38rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: .86rem;
  font-weight: 700;

  color: var(--charcoal);
}

.field input,
.field select,
.field textarea {
  width: 100%;

  border: 1px solid var(--line);

  background: var(--cream);

  border-radius: 18px;

  padding: .9rem 1rem;

  color: var(--charcoal);

  outline: none;
}

.field textarea {
  min-height: 135px;

  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sage);

  box-shadow:
    0 0 0 4px rgba(255,90,0,.12);
}

.checkbox-field {
  display: flex;

  align-items: flex-start;

  gap: .7rem;

  color: var(--muted);

  font-size: .86rem;
}

.checkbox-field input {
  margin-top: .3rem;
}

.form-status {
  min-height: 1.5rem;

  margin-top: .8rem;

  font-size: .9rem;
}

.form-status.success {
  color: #b23f06;
}

.form-status.error {
  color: #a52b21;
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
}


/* =========================================================
   INTERNAL PAGE HERO
   ========================================================= */

.page-hero {
  width: min(1300px, calc(100% - 1.2rem));

  margin: .6rem auto 0;

  min-height: 470px;

  border-radius:
    50px 50px 120px 65px;

  background:
    linear-gradient(
      135deg,
      #fff0e5,
      #fde0cd
    );

  overflow: hidden;

  position: relative;

  display: grid;

  align-items: center;
}

.page-hero::after {
  content: "";

  position: absolute;

  width: 630px;
  height: 260px;

  right: -150px;
  bottom: -130px;

  border-radius: 50%;

  background: rgba(255,90,0,.13);

  box-shadow:
    -500px -35px 0 rgba(244,122,31,.10);
}

.page-hero-inner {
  width: min(1080px, calc(100% - 2rem));

  margin: auto;

  position: relative;

  z-index: 2;

  padding: 5rem 0;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);

  max-width: 900px;

  margin: .8rem 0 1rem;
}

.breadcrumb {
  font-size: .85rem;

  color: var(--muted);
}

.breadcrumb a {
  text-decoration: none;
}


/* =========================================================
   INFO CARDS
   ========================================================= */

.info-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.2rem;
}

.info-card {
  padding: 1.7rem;

  background: var(--paper);

  border: 1px solid var(--line);

  border-radius:
    38px 24px 44px 28px;

  box-shadow: var(--shadow-soft);
}

.info-card:nth-child(even) {
  transform: translateY(25px);

  border-radius:
    26px 45px 30px 50px;
}

.info-card p {
  color: var(--muted);
}

.info-card a {
  color: var(--terracotta);

  font-weight: 700;
}


/* =========================================================
   SERVICE DETAIL
   ========================================================= */

.service-detail-list {
  display: grid;

  gap: 1.4rem;
}

.service-detail {
  display: grid;

  grid-template-columns: .35fr 1fr;

  gap: 2rem;

  align-items: start;

  padding: 2rem;

  background: var(--paper);

  border-radius:
    42px 24px 52px 30px;

  box-shadow: var(--shadow-soft);
}

.service-number {
  min-height: 150px;

  border-radius:
    52% 48% 42% 58%;

  background: var(--olive-soft);

  display: grid;

  place-items: center;

  font-family: var(--serif);

  color: var(--terracotta);

  font-size: 2rem;
}

.service-detail ul {
  columns: 2;

  color: var(--muted);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  margin-top: 7rem;

  position: relative;

  padding-top: 6rem;

  background:
    linear-gradient(
      145deg,
      #1d2021,
      #292c2d
    );

  color: rgba(255,255,255,.78);

  overflow: hidden;
}

.site-footer::before,
.site-footer::after {
  content: "";

  position: absolute;

  top: -105px;

  border-radius: 50%;

  height: 180px;
}

.site-footer::before {
  left: -5%;

  width: 65%;

  background: #fbd5bd;
}

.site-footer::after {
  right: -5%;

  width: 58%;

  background: var(--sage);
}

.footer-inner {
  width: min(1180px, calc(100% - 2rem));

  margin: auto;

  padding: 4rem 0 2rem;

  position: relative;

  z-index: 2;
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.25fr repeat(3, .7fr);

  gap: 2rem;
}

.footer-brand {
  max-width: 340px;
}

.footer-brand .brand {
  color: white;

  margin-bottom: 1rem;
}

/* IMPORTANT: preserve orange logo colours */

.footer-brand .brand img {
  filter: none;
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.site-footer h3 {
  color: white;

  font-family: var(--sans);

  font-size: 1rem;
}

.footer-links {
  display: grid;

  gap: .55rem;
}

.footer-links a {
  color: rgba(255,255,255,.72);

  text-decoration: none;

  font-size: .9rem;

  transition: color .2s ease;
}

.footer-links a:hover {
  color: #ff8b45;
}

.footer-bottom {
  margin-top: 3rem;

  padding-top: 1.2rem;

  border-top:
    1px solid rgba(255,255,255,.12);

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  font-size: .82rem;
}


/* Facebook Footer Link */

.footer-brand a[href*="facebook.com"] {
  color: #ff7a29 !important;

  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-brand a[href*="facebook.com"]:hover {
  color: white !important;

  transform: translateY(-2px);
}


/* =========================================================
   CHATBOT
   ========================================================= */

.chat-launcher {
  position: fixed;

  right: 1.2rem;
  bottom: 1.2rem;

  z-index: 40;

  border: 0;

  border-radius: 50%;

  width: 64px;
  height: 64px;

  background:
    linear-gradient(
      145deg,
      var(--sage),
      var(--terracotta)
    );

  color: white;

  box-shadow:
    0 18px 45px rgba(220,75,0,.34);

  font-size: 1.35rem;
}

.chat-panel {
  position: fixed;

  right: 1.2rem;
  bottom: 6.3rem;

  z-index: 41;

  width: min(390px, calc(100% - 2rem));

  height:
    min(610px, calc(100vh - 9rem));

  display: none;

  grid-template-rows:
    auto 1fr auto;

  background: var(--paper);

  border: 1px solid var(--line);

  border-radius:
    38px 24px 42px 28px;

  box-shadow:
    0 26px 80px rgba(36,38,39,.25);

  overflow: hidden;
}

.chat-panel.open {
  display: grid;
}

.chat-header {
  padding: 1rem 1.1rem;

  background: var(--olive-soft);

  display: flex;

  align-items: center;

  gap: .8rem;
}

.chat-avatar {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: var(--sage);

  color: white;

  display: grid;

  place-items: center;
}

.chat-header strong {
  display: block;

  color: var(--charcoal);
}

.chat-header small {
  color: var(--muted);
}

.chat-close {
  margin-left: auto;

  border: 0;

  background: transparent;

  font-size: 1.2rem;

  color: var(--terracotta);
}

.chat-messages {
  padding: 1rem;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: .8rem;
}

.chat-message {
  max-width: 86%;

  padding: .78rem .95rem;

  border-radius:
    20px 20px 20px 6px;

  background: var(--olive-soft);

  font-size: .9rem;
}

.chat-message.user {
  margin-left: auto;

  border-radius:
    20px 20px 6px 20px;

  background: var(--terracotta-soft);
}

.chat-related {
  display: flex;

  flex-wrap: wrap;

  gap: .45rem;
}

.chat-related button {
  border: 1px solid var(--line);

  background: var(--paper);

  color: var(--terracotta);

  padding: .45rem .65rem;

  border-radius: 999px;

  font-size: .75rem;
}

.chat-form {
  padding: .8rem;

  border-top: 1px solid var(--line);

  display: flex;

  gap: .55rem;

  background: var(--paper);
}

.chat-form input {
  flex: 1;

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: .75rem 1rem;

  background: var(--cream);

  outline: none;

  min-width: 0;
}

.chat-form button {
  border: 0;

  border-radius: 50%;

  width: 44px;
  height: 44px;

  background: var(--sage);

  color: white;
}

.handover-card {
  background: var(--gold-soft);

  padding: .9rem;

  border-radius: 18px;

  display: grid;

  gap: .55rem;
}

.handover-card input,
.handover-card textarea {
  width: 100%;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: .6rem .7rem;

  background: var(--paper);
}

.handover-card textarea {
  min-height: 75px;
}

.handover-card button {
  border: 0;

  border-radius: 999px;

  padding: .65rem;

  background: var(--sage);

  color: white;

  font-weight: 700;
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;

    position: absolute;

    top: calc(100% + .4rem);

    left: 1rem;
    right: 1rem;

    padding: 1rem;

    background: var(--paper);

    box-shadow: var(--shadow);

    border-radius: 25px;

    flex-direction: column;

    align-items: stretch;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .hero-content {
    grid-template-columns: 1fr;

    padding-bottom: 8rem;
  }

  .hero-garden {
    min-height: 430px;
  }

  .paper-canopy {
    left: 50%;
    right: auto;

    transform:
      translateX(-50%)
      rotate(2deg);
  }

  .path-selector {
    grid-template-columns: 1fr;
  }

  .path-result {
    border-left: 0;

    border-top:
      1px solid var(--line);

    padding: 1.2rem 0 0;
  }

  .journey-field {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 1rem;

    min-height: auto;
  }

  .journey-ring {
    display: none;
  }

  .journey-hub,
  .service-petal {
    position: static;

    width: auto;

    min-height: 180px;

    transform: none !important;
  }

  .journey-hub {
    grid-column: 1 / -1;

    width: 250px;
    height: 250px;

    justify-self: center;
  }

  .discipline-panel,
  .consultation-desk {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .section {
    padding: 5rem 0;
  }

  .garden-hero {
    min-height: auto;

    border-radius:
      32px 32px 80px 80px;
  }

  .hero-content {
    min-height: auto;

    padding-top: 4rem;
  }

  h1 {
    font-size:
      clamp(2.65rem, 13vw, 4.2rem);
  }

  .paper-canopy {
    width: min(350px, 94%);

    top: 4rem;
  }

  .garden-orbit.one {
    width: 390px;

    right: -20px;
  }

  .path-selector-wrap {
    margin-top: -35px;
  }

  .path-selector {
    border-radius:
      45px 24px 55px 30px;
  }

  .path-list {
    grid-template-columns: 1fr;
  }

  .journey-field {
    grid-template-columns: 1fr;
  }

  .journey-hub {
    grid-column: auto;
  }

  .publication-path::before {
    left: 12px;
  }

  .path-step,
  .path-step:nth-child(even) {
    width: calc(100% - 42px);

    margin-left: 42px;
  }

  .path-step:nth-child(odd)::after,
  .path-step:nth-child(even)::after {
    left: -42px;
    right: auto;
  }

  .discipline-panel {
    padding: 1.4rem;
  }

  .discipline-panel ul {
    columns: 1;
  }

  .mentor:nth-child(even) {
    transform: none;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-card:nth-child(even) {
    transform: none;
  }

  .service-detail {
    grid-template-columns: 1fr;
  }

  .service-detail ul {
    columns: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.full {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .site-footer::before {
    width: 100%;
  }

  .site-footer::after {
    display: none;
  }

  .brand img {
    width: 50px;
    height: 50px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }
}


/* =========================================================
   FINAL ORANGE THEME OVERRIDE
   Removes all remaining old green/sage colours
   ========================================================= */

:root {
  --sage: #ff5a00 !important;
  --sage-deep: #242627 !important;
  --olive: #f7a16f !important;
  --olive-soft: #ffe6d7 !important;
  --terracotta: #dc4b00 !important;
  --terracotta-soft: #ffd8c2 !important;
  --gold: #f47a1f !important;
  --gold-soft: #fff0e5 !important;
}


/* Main buttons */

.nav-cta,
.button,
button.button,
a.button {
  background: #ff5a00 !important;
  color: #ffffff !important;
  border-color: #ff5a00 !important;

  box-shadow:
    0 10px 25px rgba(255, 90, 0, .22) !important;
}

.nav-cta:hover,
.button:hover,
button.button:hover,
a.button:hover {
  background: #dc4b00 !important;
  color: #ffffff !important;

  box-shadow:
    0 14px 32px rgba(220, 75, 0, .28) !important;
}


/* Secondary buttons */

.button.secondary {
  background: #ffd8c2 !important;
  color: #8a350d !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.button.secondary:hover {
  background: #ffc5a3 !important;
  color: #742c09 !important;
}


/* Ghost buttons */

.button.ghost {
  background: transparent !important;
  color: #dc4b00 !important;
  border: 1px solid rgba(255, 90, 0, .28) !important;
  box-shadow: none !important;
}

.button.ghost:hover {
  background: #fff0e5 !important;
  color: #dc4b00 !important;
}


/* Navigation */

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: #ffe6d7 !important;
  color: #dc4b00 !important;
}


/* Headings and important text */

h1,
h2,
h3,
h4 {
  color: #242627 !important;
}

.eyebrow {
  color: #ff5a00 !important;
}


/* Journey hub */

.journey-hub {
  background:
    linear-gradient(
      145deg,
      #ff5a00,
      #dc4b00
    ) !important;

  box-shadow:
    0 28px 70px rgba(220, 75, 0, .28) !important;
}


/* Journey petals */

.service-petal .petal-icon {
  background: #ffd8c2 !important;
  color: #dc4b00 !important;
}


/* Selector buttons */

.path-choice {
  color: #242627 !important;
}

.path-choice:hover,
.path-choice.active {
  background: #ffe6d7 !important;
  color: #dc4b00 !important;
}

.path-result strong {
  color: #dc4b00 !important;
}


/* Discipline tabs */

.leaf-tab {
  color: #242627 !important;
}

.leaf-tab:hover,
.leaf-tab.active {
  background: #ff5a00 !important;
  color: #ffffff !important;
}


/* Organic backgrounds */

.organic-band,
.organic-band::before,
.organic-band::after {
  background: #fff0e6 !important;
}


/* Cards */

.service-number {
  background: #ffe6d7 !important;
  color: #dc4b00 !important;
}

.info-card a {
  color: #dc4b00 !important;
}


/* Form focus */

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #ff5a00 !important;

  box-shadow:
    0 0 0 4px rgba(255, 90, 0, .12) !important;
}


/* FAQ */

.faq-question {
  color: #242627 !important;
}

.faq-question::after {
  color: #ff5a00 !important;
}


/* Chat */

.chat-launcher {
  background:
    linear-gradient(
      145deg,
      #ff5a00,
      #dc4b00
    ) !important;

  color: #ffffff !important;
}

.chat-avatar,
.chat-form button,
.handover-card button {
  background: #ff5a00 !important;
  color: #ffffff !important;
}

.chat-header {
  background: #ffe6d7 !important;
}

.chat-header strong {
  color: #242627 !important;
}

.chat-close,
.chat-related button {
  color: #dc4b00 !important;
}


/* Footer */

.site-footer {
  background:
    linear-gradient(
      145deg,
      #1d2021,
      #292c2d
    ) !important;
}

.site-footer::before {
  background: #fbd5bd !important;
}

.site-footer::after {
  background: #ff5a00 !important;
}


/* Remove old green from common generic elements */

[style*="#74866b"],
[style*="#455947"],
[style*="#cbd1ad"],
[style*="#e8ead8"] {
  color: inherit;
}