/* ==========================================================================
   QUEST CONSTRUCTION — WEBSITE STYLES (style.css)
   --------------------------------------------------------------------------
   Controls how the site looks: colours, fonts, spacing and layout.
   Content (projects, team, courses) is in script.js; page structure is in
   index.html.
   ========================================================================== */

/* ==========================================================================
   COLOURS & DESIGN TOKENS
   Brochure colours: sage green, mustard gold and off-white paper.
   Change a colour here and it updates everywhere on the site.
   ========================================================================== */
:root {
  --paper:#ECECE8;                            /* page background (off-white) */
  --paper-2:#F5F5F2;                          /* slightly lighter panels and inputs */
  --card:#FFFFFF;                             /* cards */
  --sage:#5B6658;                             /* main sage green (headings, logo text) */
  --sage-2:#7A8279;                           /* grey-sage boxes (deadline, Join banner) */
  --sage-soft:#DADED6;                        /* pale sage tags */
  --line:rgba(91,102,88,.16);                 /* thin borders */
  --gold:#D29A45;                             /* brochure mustard gold (buttons, numbers) */
  --gold-ink:#A9741F;                         /* darker gold for small text */
  --ink:#2F352E;                              /* body text */
  --muted:#5F665D;                            /* secondary text */
  --on-gold:#FFFFFF;                          /* text on gold buttons */
  --on-sage:#FFFFFF;                          /* text on sage boxes */
  --radius:18px;                              /* corner roundness of cards */
  --shadow:0 10px 30px rgba(47,53,46,.08);    /* soft card shadow */
}

/* ==========================================================================
   DARK THEME
   Used automatically when the visitor's device is in dark mode,
   or when they press the moon button.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#1C201C;
    --paper-2:#232823;
    --card:#2A302A;
    --sage:#B7C2B2;
    --sage-2:#4E574C;
    --sage-soft:#3A423A;
    --line:rgba(183,194,178,.14);
    --gold:#E0AA58;
    --gold-ink:#E9BB72;
    --ink:#E9ECE6;
    --muted:#AEB6AA;
    --on-gold:#1C201C;
    --on-sage:#F1F3EE;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --paper:#1C201C;
  --paper-2:#232823;
  --card:#2A302A;
  --sage:#B7C2B2;
  --sage-2:#4E574C;
  --sage-soft:#3A423A;
  --line:rgba(183,194,178,.14);
  --gold:#E0AA58;
  --gold-ink:#E9BB72;
  --ink:#E9ECE6;
  --muted:#AEB6AA;
  --on-gold:#1C201C;
  --on-sage:#F1F3EE;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ==========================================================================
   BASE STYLES
   Page background, default text, layout width and headline fonts.
   ========================================================================== */

* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Questrial",system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a {
  color:inherit;
}
img {
  max-width:100%;
  display:block;
}
.wrap {
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:520px) {
  .wrap {
    padding:0 16px;
  }
}
.display {
  font-family:"Bebas Neue",Impact,sans-serif;
  letter-spacing:.02em;
  line-height:.95;
  font-weight:400;
}
.eyebrow {
  font-family:"Montserrat",sans-serif;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:600;
}
:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

/* ==========================================================================
   HEADER & TOP MENU
   Sticky header with the logo, the menu tabs and the drop-downs.
   ========================================================================== */

header.nav {
  position:sticky;
  top:0;
  z-index:30;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:84px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand svg {
  width:40px;
  height:40px;
  flex:none;
}
.logo-wrap {
  height:66px;
  width:64px;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logo-img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:2px;
}
.logo-svg {
  display:none;
  width:40px;
  height:40px;
}
.logo-wrap.nologo {
  background:transparent;
  box-shadow:none;
}
.logo-wrap.nologo .logo-img {
  display:none;
}
.logo-wrap.nologo .logo-svg {
  display:block;
}
nav.links .menu {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:2px;
  align-items:center;
}
nav.links .menu>li {
  position:relative;
}
nav.links a,.dd-btn {
  display:flex;
  align-items:center;
  gap:5px;
  text-decoration:none;
  font:inherit;
  font-size:.88rem;
  padding:8px 11px;
  border-radius:999px;
  color:var(--muted);
  background:none;
  border:0;
  cursor:pointer;
  white-space:nowrap;
}
nav.links a:hover,.dd-btn:hover {
  color:var(--ink);
  background:var(--paper-2);
}
nav.links [aria-current="page"],.dd-btn.current {
  color:var(--sage);
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--gold);
  border-radius:0;
}
.dd {
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:240px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  display:none;
  z-index:40;
}
.dd::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:8px;
}
.has-dd:hover .dd,.has-dd:focus-within .dd,.has-dd.open .dd {
  display:block;
}
.dd a {
  border-radius:10px!important;
  box-shadow:none!important;
  padding:9px 12px!important;
}
.dd a[aria-current="page"] {
  background:color-mix(in srgb,var(--gold) 14%,transparent);
}
[hidden] {
  display:none!important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  cursor:pointer;
  font:inherit;
  text-decoration:none;
  border-radius:999px;
  padding:12px 22px;
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.04em;
}
.btn-gold {
  background:var(--gold);
  color:var(--on-gold);
}
.btn-gold:hover {
  filter:brightness(1.05);
}
.btn-ghost {
  background:transparent;
  color:var(--sage);
  border:1.5px solid var(--sage);
}
.btn svg {
  width:18px;
  height:18px;
}
.icon-btn {
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--sage);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.menu-btn {
  display:none;
}

/* ==========================================================================
   MOBILE MENU
   Below 1100px wide the menu collapses behind the ☰ button.
   ========================================================================== */

@media (max-width:1100px) {
  nav.links {
    display:none;
    position:absolute;
    top:84px;
    left:0;
    right:0;
    background:var(--paper-2);
    padding:12px 16px 20px;
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - 84px);
    overflow-y:auto;
  }
  nav.links.open {
    display:block;
  }
  nav.links .menu {
    flex-direction:column;
    align-items:stretch;
  }
  .dd {
    position:static;
    display:block;
    box-shadow:none;
    border:0;
    background:transparent;
    padding:0 0 4px 16px;
    min-width:0;
  }
  .has-dd:not(.open) .dd {
    display:none;
  }
  .has-dd:hover:not(.open) .dd {
    display:none;
  }
  .dd-btn {
    width:100%;
    justify-content:space-between;
  }
  .menu-btn {
    display:grid;
  }
  .nav .btn-gold {
    display:none;
  }
}

/* ==========================================================================
   HOME PAGE — INTRO (HERO) & KEY FIGURES
   ========================================================================== */

.hero {
  position:relative;
  padding:64px 0 40px;
  overflow:hidden;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}
.hero h1 {
  margin:14px 0 0;
  font-size:clamp(3rem,7.5vw,5.6rem);
  color:var(--sage);
}
.hero h1 em {
  font-style:normal;
  color:var(--gold);
}
.hero p.lead {
  max-width:540px;
  font-size:1.08rem;
  color:var(--muted);
  margin:22px 0 28px;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.hero-photo {
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/3.2;
  background:var(--sage-soft);
  border:6px solid var(--card);
}
.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-photo .cap {
  position:absolute;
  left:14px;
  bottom:14px;
  right:14px;
  width:max-content;
  max-width:calc(100% - 28px);
  background:var(--card);
  color:var(--sage);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:.78rem;
  padding:6px 12px;
  border-radius:999px;
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:44px;
}
.stats div {
  border-left:3px solid var(--gold);
  padding:4px 16px;
}
.stats strong {
  display:block;
  font-family:"Bebas Neue",sans-serif;
  font-size:2.4rem;
  color:var(--sage);
  font-weight:400;
  line-height:1;
}
.stats span {
  color:var(--muted);
  font-size:.9rem;
}
@media (max-width:860px) {
  .hero-grid {
    grid-template-columns:1fr;
  }
  .stats {
    grid-template-columns:repeat(2,1fr);
  }
}

/* ==========================================================================
   SECTIONS
   Spacing and headings shared by every block of the site.
   ========================================================================== */

section {
  padding:72px 0;
}
.sec-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.sec-head h2 {
  margin:8px 0 0;
  font-size:clamp(2.4rem,6vw,3.8rem);
  color:var(--sage);
}
.sec-head h2 em {
  font-style:normal;
  color:var(--gold);
}
.sec-head p {
  /*max-width:480px;*/
  color:var(--muted);
  margin:0;
}
.band {
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ==========================================================================
   OUR ACADEMY — MAIN PHOTO
   "Choose your Path" course guide under the "Our Courses" heading
   (images/testphoto.webp). The whole image is always shown, never cropped.
   If the file is missing, a pale box with the file name is shown.
   ========================================================================== */
.academy-banner {
  position:relative;
  aspect-ratio:16/9;                 /* same shape as the course guide image */
  border-radius:var(--radius);
  overflow:hidden;
  /*border:6px solid var(--card);*/
  box-shadow:var(--shadow);
  background:#fff;                   /* white behind the image, also in dark mode */
  display:grid;
  place-items:center;
  cursor:zoom-in;
  text-decoration:none;
}
.academy-banner img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;                /* shows the whole image without cropping */
}
.academy-banner .missing {
  color:var(--sage);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:.85rem;
}
/* Small hint under the image — only shown on phones, where the text is small */
.banner-hint {
  display:none;
  margin:10px 0 0;
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
}
@media (max-width:620px) {
  .banner-hint {
    display:block;
  }
}

/* ==========================================================================
   OUR ACADEMY — REVIT COURSE CATALOGUE
   Photo on top, title under it, then the fold-out course list in two
   columns (first half of the courses on the left, the rest on the right).
   ========================================================================== */

.cat-grid {
  display:grid;                      /* stacks: photo → title → course columns */
  gap:28px;
  margin-top:56px;
}
.acad-photo {
  margin-top: 20px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.acad-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}
/* The two course columns */
.acc {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  align-items:start;                 /* opening a course doesn't stretch the other column */
}
.acc-col {
  display:grid;
  gap:12px;
}
@media (max-width:860px) {
  .acc {
    grid-template-columns:1fr;       /* one column on phones and small tablets */
  }
}
details.c {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
details.c[open] {
  border-color:var(--gold);
}
details.c summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
}
details.c summary::-webkit-details-marker {
  display:none;
}
details.c summary .n {
  font-family:"Bebas Neue",sans-serif;
  font-size:1.9rem;
  color:var(--gold);
  width:34px;
  line-height:1;
  flex:none;
}
details.c summary h3 {
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--sage);
  flex:1;
}
details.c summary .meta {
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  background:var(--sage-soft);
  padding:4px 10px;
  border-radius:999px;
}
details.c summary .chev {
  transition:.2s;
  color:var(--sage);
  flex:none;
}
details.c[open] summary .chev {
  transform:rotate(180deg);
}
details.c ol {
  margin:0;
  padding:0 22px 12px 70px;
  display:grid;
  gap:4px;
  color:var(--ink);
  font-size:.95rem;
}
details.c ol li::marker {
  color:var(--gold-ink);
  font-family:"Montserrat";
  font-weight:700;
  font-size:.85em;
}
details.c .cert {
  display:block;
  margin:0 22px 18px 70px;
  font-size:.85rem;
  color:var(--gold-ink);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
}
@media (max-width:520px) {
  details.c ol {
    padding-left:40px;
  }
  details.c .cert {
    margin-left:22px;
  }
}

/* ==========================================================================
   REGISTRATION FORM & CONTACT CARDS
   ========================================================================== */

.panel {
  background:var(--card);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:40px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  border:1px solid var(--line);
}
@media (max-width:860px) {
  .panel {
    grid-template-columns:1fr;
    padding:26px 18px;
  }
}
.panel h2 {
  margin:8px 0 12px;
  font-size:clamp(2.2rem,5vw,3.2rem);
  color:var(--sage);
}
form {
  display:grid;
  gap:14px;
}
.row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:560px) {
  .row {
    grid-template-columns:1fr;
  }
}
label {
  display:grid;
  gap:6px;
  font-size:.84rem;
  color:var(--muted);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
}
input,select,textarea {
  font:inherit;
  font-family:"Questrial",sans-serif;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper-2);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  width:100%;
}
input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--gold);
}
fieldset {
  border:0;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  min-width:0;
}
legend {
  font-size:.84rem;
  color:var(--muted);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  margin-bottom:6px;
}
.checks {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.check {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1.5px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  font-family:"Questrial";
  font-weight:400;
  color:var(--ink);
  font-size:.92rem;
}
.check input {
  width:auto;
  accent-color:var(--gold);
}
.check:has(input:checked) {
  border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);
}
.summary {
  font-size:.9rem;
  color:var(--sage);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
}
.contact-list {
  display:grid;
  gap:12px;
  margin-top:22px;
}
.c-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--paper-2);
  text-decoration:none;
  border:1px solid var(--line);
}
.c-item svg {
  width:24px;
  height:24px;
  color:var(--gold);
  flex:none;
}
.c-item .val {
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  color:var(--sage);
  word-break:break-word;
}
.c-item small {
  display:block;
  color:var(--muted);
  font-size:.78rem;
}
.c-item button {
  margin-left:auto;
  font:inherit;
  font-size:.8rem;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--sage);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}

/* ==========================================================================
   PROJECTS
   Category tabs and project cards with photos.
   ========================================================================== */

.tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px;
}
.tab {
  font:inherit;
  font-family:"Montserrat",sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:9px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
}
.tab span {
  opacity:.7;
  margin-left:6px;
}
.tab[aria-selected="true"] {
  background:var(--sage);
  border-color:var(--sage);
  color:var(--paper);
}
.projects {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:960px) {
  .projects {
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:620px) {
  .projects {
    grid-template-columns:1fr;
  }
}
.proj {
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.art {
  aspect-ratio:16/10;
  background:var(--paper-2);
  border-bottom:3px solid var(--gold);
  color:var(--sage);
  position:relative;
  overflow:hidden;
}
.art img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
.proj:hover .art img {
  transform:scale(1.04);
}
.art .fallback {
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
}
.art .fallback svg {
  width:70%;
  opacity:.55;
}
.art.noimg img {
  display:none;
}
.art.noimg .fallback {
  display:grid;
}
.proj .loc {
  position:absolute;
  left:12px;
  top:12px;
  font-family:"Montserrat",sans-serif;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--card);
  color:var(--gold-ink);
  padding:5px 10px;
  border-radius:999px;
  font-weight:700;
}
.proj .body {
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.proj h3 {
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  font-size:1.1rem;
  color:var(--sage);
}
.proj p {
  margin:0;
  font-size:.93rem;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.proj.open p {
  -webkit-line-clamp:unset;
  display:block;
}
.proj .more {
  align-self:flex-start;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-family:"Montserrat";
  font-weight:600;
  font-size:.82rem;
  color:var(--gold-ink);
  cursor:pointer;
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  padding-top:4px;
}
.chips span {
  font-size:.7rem;
  padding:4px 10px;
  border-radius:999px;
  background:var(--sage-soft);
  color:var(--sage);
  font-family:"Montserrat",sans-serif;
  font-weight:600;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:900px) {
  .services {
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:580px) {
  .services {
    grid-template-columns:1fr;
  }
}
.svc {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.svc-top {
  display:flex;
  gap:14px;
  align-items:center;
}
.svc .n {
  font-family:"Bebas Neue",sans-serif;
  font-size:2.2rem;
  color:var(--gold);
  line-height:1;
}
.svc h3 {
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  font-size:1.05rem;
  color:var(--sage);
}
.svc ul {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:5px;
  font-size:.9rem;
  color:var(--muted);
}
.svc li {
  display:flex;
  gap:10px;
}
.svc li::before {
  content:"";
  flex:none;
  width:6px;
  height:6px;
  margin-top:.62em;
  border-radius:50%;
  background:var(--gold);
}
.svc li.sub {
  color:var(--sage);
  font-family:"Montserrat";
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:6px;
}
.svc li.sub::before {
  display:none;
}
.svc.feature {
  border:2px solid var(--gold);
}
.svc.wide {
  grid-column:1/-1;
}
.svc.wide ul {
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  column-gap:24px;
}
.svc .badge {
  align-self:flex-start;
  font-size:.68rem;
  background:var(--gold);
  color:var(--on-gold);
  padding:4px 10px;
  border-radius:999px;
  font-family:"Montserrat";
  font-weight:700;
  letter-spacing:.08em;
}

/* ==========================================================================
   ABOUT US — INTRO & TEAM
   ========================================================================== */

.about-intro {
  /*display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;*/
  margin-bottom:44px;
}
.about-intro p {
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
}
@media (max-width:760px) {
  .about-intro {
    grid-template-columns:1fr;
  }
}
h3.sub-h {
  font-family:"Bebas Neue",sans-serif;
  font-weight:400;
  font-size:2rem;
  color:var(--sage);
  margin:0 0 18px;
  letter-spacing:.03em;
}
.team {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  margin-bottom:44px;
}
@media (max-width:1000px) {
  .team {
    grid-template-columns:repeat(4,1fr);
  }
}
@media (max-width:640px) {
  .team {
    grid-template-columns:repeat(2,1fr);
  }
}
.person {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-align:center;
}
.person .ph {
  aspect-ratio:1;
  background:var(--sage-soft);
  display:grid;
  place-items:center;
  position:relative;
}
.person .ph img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.person .ph .ini {
  font-family:"Bebas Neue";
  font-size:2.2rem;
  color:var(--sage);
}
.person .tx {
  padding:10px 8px 12px;
}
.person b {
  display:block;
  font-family:"Montserrat",sans-serif;
  font-size:.84rem;
  color:var(--sage);
  line-height:1.3;
}
.person span {
  display:block;
  font-size:.76rem;
  color:var(--muted);
  line-height:1.35;
  margin-top:3px;
}
.lead .person {
  border-bottom:3px solid var(--gold);
}
.filter {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

/* ==========================================================================
   JOIN OUR TEAM BANNER
   ========================================================================== */

.join {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
  background:var(--sage-2);
  color:var(--on-sage);
  border-radius:24px;
  padding:36px;
}
.join h2 {
  margin:6px 0 10px;
  font-size:clamp(2.2rem,5vw,3.2rem);
}
.join p {
  margin:0;
  opacity:.92;
}
.join .eyebrow {
  color:#F3D29D;
}
.join .acts {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.join .btn-ghost {
  color:var(--on-sage);
  border-color:currentColor;
}
@media (max-width:760px) {
  .join {
    grid-template-columns:1fr;
    padding:26px 20px;
  }
  .join .acts {
    justify-content:flex-start;
  }
}

/* ==========================================================================
   FOOTER & POP-UP MESSAGE
   ========================================================================== */

footer {
  padding:40px 0 48px;
  border-top:1px solid var(--line);
  margin-top:24px;
}
footer .wrap {
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:.88rem;
}
.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:var(--sage);
  color:var(--paper);
  padding:10px 18px;
  border-radius:999px;
  font-size:.9rem;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:50;
}
.toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Message box: can be stretched taller, but not wider */
textarea {
  resize: vertical;
  min-height: 90px;   /* optional: stops it being shrunk below about 3 lines */
}

/* ==========================================================================
   JOB APPLICATION FORM (#apply)
   ========================================================================== */
#apply {
  padding-top:0;                 /* sits directly under the Join banner */
}
.hint {
  font-weight:400;
  font-family:"Questrial",sans-serif;
  color:var(--muted);
  opacity:.85;
}
input[type="file"] {
  padding:10px 12px;
  cursor:pointer;
}
input[type="file"]::file-selector-button {
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:.82rem;
  margin-right:12px;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:var(--sage-soft);
  color:var(--sage);
  cursor:pointer;
}
.hp {                            /* spam trap: kept off-screen */
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-status {
  margin:0;
  min-height:1.4em;
  font-size:.92rem;
  color:var(--muted);
}
.form-status.ok  { color:var(--sage); font-weight:600; }
.form-status.err { color:#B4483C; font-weight:600; }
#applyForm button[disabled] {
  opacity:.6;
  cursor:wait;
}