/* =====================================================================
   DataOne — Frankfort community Q&A
   Look & feel per Figma "Landing page Frankfort" (node 375:1380),
   DataOne Website file 75H42rTXMWXrKTjQnCizPk.
   Structure, IDs and class hooks are unchanged so scripts/main.js keeps
   driving the accordion, the topic rail and the cookie banner.
   ===================================================================== */

:root {
  /* --- Figma design tokens -------------------------------------- */
  --charcoal: #232830;
  /* Color/Primary/Charcoal Blue      */
  --charcoal-700: #435061;
  /* Color/Primary/Charcoal Blue/700  */
  --charcoal-800: #3a4552;
  /* Color/Primary/Charcoal Blue/800  */
  --charcoal-300: #b0bcc9;
  /* Color/Primary/Charcoal Blue/300  */
  --charcoal-200: #d5dbe2;
  /* Color/Primary/Charcoal Blue/200  */
  --accent-charcoal: #6a6e73;
  /* Color/Accent/Charcoal Blue       */
  --green: #04b77b;
  /* Color/Primary/Tech Green         */
  --orange: #ff8811;
  /* Color/Primary/Princeton Orange   */
  --mist: #f3f2f4;
  /* Color/Primary/Lavender Mist      */

  --green-dk: #039a67;
  --orange-dk: #e5730a;
  --err: #c0392b;

  --head: 'Titillium Web', system-ui, sans-serif;
  --body: 'Sora', system-ui, sans-serif;

  /* Figma content column is 1041px inside a 1440px frame */
  --maxw: 1041px;
  --radius: 12px;

  /* Hero photo. Set to `none` and it falls back to a clean dark field. */
  --hero-img: url('assets/background.webp');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--charcoal);
  color: var(--mist);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* rail scrolls internally, never the page */
  overflow-anchor: none;
  /* we correct scroll ourselves — don't let the browser also try */
}

/* Titillium is the display face: category headings + question titles.
   Everything else — body copy, hero, buttons, form — is Sora, per Figma. */
.q-text,
.cat-title {
  font-family: var(--head);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px
}

a {
  color: var(--green);
  text-decoration: none
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px
}

/* progress bar */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--green);
  z-index: 100
}

/* =====================================================================
   Shared pill button — Princeton Orange, 100px radius, white arrow chip
   ===================================================================== */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 37.38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.pill-btn:hover {
  background: var(--orange-dk);
  transform: translateY(-1px)
}

.pill-btn:active {
  transform: translateY(0)
}

.pill-ico {
  width: 21.38px;
  height: 21.38px;
  flex: none;
  background: url('assets/icon-arrow.svg') center/21.38px 21.38px no-repeat;
}

/* =====================================================================
   Hero — full-bleed photo, centred logo, then the copy block
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 640px;
  padding: 40px 24px 118px;
  isolation: isolate;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hero-img) center/cover no-repeat;
}

/* Figma overlay: a flat 46% charcoal wash, then a vertical fade that lands
   on solid charcoal so the topic rail below reads as one surface. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(35, 40, 48, 0) 0%, var(--charcoal) 100%),
    linear-gradient(90deg, rgba(35, 40, 48, .46) 0%, rgba(35, 40, 48, .46) 100%);
}

/* Both logos are plain images, not links — the spacing that used to sit on the
   hero's anchor wrapper now lives on the image itself. */
.logo-hero {
  display: block;
  width: 231px;
  max-width: 62vw;
  height: auto;
  margin-bottom: clamp(56px, 11vw, 152px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 597px;
  padding: 0;
}

.eyebrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.eyebrow-1 {
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--green);
}

.eyebrow-2 {
  font-size: 20px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--mist);
}

.hero h1 {
  font-family: var(--body);
  font-size: clamp(28px, 4.2vw, 36px);
  font-weight: 600;
  line-height: 51px;
  color: var(--mist);
}

.hero h1 .accent {
  color: var(--green)
}

.hero p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

/* =====================================================================
   Topic rail — orange for the active tab, slate for the rest
   ===================================================================== */
.filters {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--charcoal);
  padding: 14px 0 18px;
}

/* Same column as .wrap, so the first pill's left edge lines up with the
   category headings and the question cards. (The Figma frame draws this rail
   wider than the content column — faithful to the mock, but on the real page
   the mismatch just reads as a misalignment.) */
.rail {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Charcoal fades, only on a side that genuinely has tabs hidden off-screen */
.rail::before,
.rail::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}

.rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--charcoal) 45%, rgba(35, 40, 48, 0) 100%);
}

.rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--charcoal) 45%, rgba(35, 40, 48, 0) 100%);
}

.rail.fade-l::before,
.rail.fade-r::after {
  opacity: 1
}

.pills {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 2px 0;
}

.pills::-webkit-scrollbar {
  display: none
}

.pill {
  flex: none;
  height: 37.38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 100px;
  background: var(--charcoal-700);
  color: #fff;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.pill:hover {
  background: var(--charcoal-800)
}

.pill.active {
  background: var(--orange);
  color: #fff
}

/* =====================================================================
   FAQ — category heading, then the accordion cards
   ===================================================================== */
.faq {
  padding: 34px 0 48px
}

.cat {
  margin-bottom: 48px;
  /* Selecting a topic snaps that section to the top of the viewport. Without
     this the sticky rail sits over the category heading and clips it. */
  scroll-margin-top: 100px;
}

/* The 48px above separates one category from the next — the last one has no
   next, so it only inflated the gap before "Still have a question?". */
.cat:last-of-type {
  margin-bottom: 0
}

.cat.hide {
  display: none
}

.cat-head {
  margin-bottom: 24px
}

/* The Figma category row is the label alone — the topic glyph and the
   question tally are kept in the markup but not drawn. */
.cat-head .icon,
.cat-head .count {
  display: none
}

.cat-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.item {
  border-radius: var(--radius);
  background: var(--mist);
  margin-bottom: 16px;
  overflow: hidden;
  transition: background .22s ease;
}

.item.open {
  background: var(--green)
}

.q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 28px 24px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.item.open .q {
  align-items: flex-start;
  padding-bottom: 20px
}

.q-text {
  font-size: clamp(17px, 2.1vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
  transition: color .22s ease;
}

.item.open .q-text {
  color: var(--mist)
}

/* 28px circle: green plus on mist when closed, mist minus on green when open.
   main.js writes "+" / "×" into this span, so the glyph is sized away and the
   Figma icons are drawn as the background instead. */
.toggle {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: url('assets/icon-plus.svg') center/28px 28px no-repeat;
}

.item.open .toggle {
  background-image: url('assets/icon-minus.svg')
}

/* answer panel — height is animated by main.js */
.a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.4, 0, .2, 1);
}

.a.instant {
  transition: none
}

.a-inner {
  padding: 0 24px 24px;
  color: var(--mist);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 839px;
}

.a-inner p {
  margin-bottom: 16px
}

.a-inner p:last-child {
  margin-bottom: 0
}

.a-inner ul {
  margin: 0 0 16px;
  padding-left: 20px
}

.a-inner li {
  margin-bottom: 8px
}

.a-inner li::marker {
  color: var(--mist)
}

/* Links inside an answer. The global `a` colour is Tech Green, which is also
   the background of an OPEN card — green on green renders the address
   invisible, so these are restyled to white. They carry the same weight as
   .hl, so an address reads as a highlighted fact that happens to be
   clickable. Hover softens the white rather than underlining it. */
.a-inner a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}

.a-inner a:hover {
  color: rgba(255, 255, 255, .72)
}

/* The global focus ring is green too, and vanishes on the open card for the
   same reason. Keyboard users get a white one instead. */
.a-inner a:focus-visible {
  outline-color: #fff
}

/* Figures inside an answer. The artwork carries its own light ground, so the
   figure is simply clipped to the card radius and the image fills it edge to
   edge — giving the container a background of our own would show as a seam
   anywhere the two whites didn't match exactly.
   The 4px rides on top of the preceding paragraph's 16px, for a 20px gap. */
.a-inner .figure {
  margin: 4px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}

/* aspect-ratio rather than width/height attributes: it reserves the right box
   before the file loads — which is what keeps the accordion's scrollHeight
   measurement honest on first open — and stays correct whatever pixel size the
   image is exported at, as long as the proportions are unchanged. */
.a-inner .figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2688 / 1520;
}

.hl {
  color: #fff;
  font-weight: 600
}

/* =====================================================================
   Reveals — opacity + transform only, so they never shift layout
   ===================================================================== */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}

.rise.in {
  opacity: 1;
  transform: none
}

.hero .rise:nth-child(1) {
  transition-delay: .05s
}

.hero .rise:nth-child(2) {
  transition-delay: .13s
}

.hero .rise:nth-child(3) {
  transition-delay: .21s
}

.hero .rise:nth-child(4) {
  transition-delay: .29s
}

.hero .rise:nth-child(5) {
  transition-delay: .37s
}

.item.rise {
  transform: translateY(12px)
}

.item.rise.in {
  transform: none
}

/* =====================================================================
   Contact — "Still have a question?" + the enquiry card
   ===================================================================== */
.contact {
  padding: 24px 0 96px;
  /* clear the sticky topic rail when reached via the raw #contact anchor */
  scroll-margin-top: 96px;
}

.contact .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.contact h2 {
  font-family: var(--body);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  line-height: 50px;
  color: var(--green);
}

.contact .lede {
  max-width: 400px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mist);
}

.enquiry {
  width: 100%;
  max-width: 507px;
  margin-top: 8px;
  padding: 24px;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius);
  background: var(--mist);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}


.enquiry input[type=text],
.enquiry input[type=tel],
.enquiry input[type=email],
.enquiry textarea {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 16px 12px;
  border: .5px solid var(--charcoal-300);
  border-radius: 6px;
  background: #fff;
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.enquiry textarea {
  display: block;
  line-height: 1.45;
  height: 104px;
  resize: none;
  /* leave room for the counter sitting in the bottom-right corner */
  padding-bottom: 26px;
}

.enquiry input::placeholder,
.enquiry textarea::placeholder {
  color: var(--accent-charcoal);
  opacity: 1
}

.enquiry input:focus-visible,
.enquiry textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 0
}

/* required fields: red outline once a submit has found them empty, cleared as
   soon as the visitor starts filling that field in */
/* Matches the specificity of `.enquiry input[type=text]` and sits after it, so
   the error border actually wins. A plain `.enquiry .invalid` loses to it. */
.enquiry input.invalid,
.enquiry textarea.invalid {
  border-color: var(--err);
  background: #fffafa;
}

.consent.invalid .box {
  border-color: var(--err);
  background: #fffafa;
}

/* Wrapper that gives the question box a positioning context for its counter.
   (It also carried the green required-asterisks; those are gone now that every
   field on the form is required and the submit warning names what is missing.) */
.field {
  position: relative;
  min-width: 0;
}

.counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 0 2px;
  background: #fff;
  font-size: 11px;
  line-height: 1;
  color: var(--accent-charcoal);
  pointer-events: none;
}

.counter.full {
  color: var(--orange-dk)
}

/* consent row — 17px green tick box */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  cursor: pointer;
}

.consent input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

.consent .box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1px solid var(--charcoal-300);
  border-radius: 3px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
}

.consent input:checked+.box {
  border-color: var(--green);
  background: var(--green) url('assets/icon-tick.svg') center/15px 15px no-repeat;
}

.consent input:focus-visible+.box {
  outline: 2px solid var(--green);
  outline-offset: 2px
}

.consent-text {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--accent-charcoal);
}

.enquiry .pill-btn {
  align-self: flex-start;
  margin-top: 10px
}

.form-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent-charcoal);
  min-height: 1px;
}

.form-note.err {
  color: var(--err)
}

/* =====================================================================
   Footer — green-to-charcoal gradient panel
   ===================================================================== */
footer {
  background:
    linear-gradient(180deg,
      rgba(4, 183, 123, .56) 0%,
      rgba(4, 183, 123, .56) 48.8%,
      rgba(35, 40, 48, .56) 100%),
    var(--charcoal);
  padding: 50px 0 34px;
}

footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-foot {
  display: block;
  width: 235px;
  max-width: 66vw;
  height: auto;
  margin-bottom: 36px;
}

/* "Email us:" is plain label text — only the address itself is the link. */
.foot-mail {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--mist);
}

.foot-mail a {
  color: var(--mist);
  text-decoration: none;
  transition: color .18s ease;
}

.foot-mail a:hover {
  color: var(--green);
  text-decoration: none;
}

.foot-li {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  font-size: 16px;
  font-weight: 400;
  color: var(--mist);
}

.foot-li img {
  display: block;
  width: 29px;
  height: 29px;
  /* colour-only hover — the icon must not change size */
  transition: filter .18s ease;
}

.foot-li:hover {
  color: #fff
}

.foot-li:hover img {
  filter: brightness(1.35);
}

.foot-rule {
  width: 100%;
  max-width: 1138px;
  height: 1px;
  margin: 46px 0 26px;
  background: linear-gradient(90deg,
      rgba(35, 40, 48, 0) 0%,
      var(--green) 49.5%,
      rgba(35, 40, 48, 0) 100%);
}

.foot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1126px;
  font-size: 14px;
  color: var(--mist);
}

.foot-base span {
  font-weight: 300
}

.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  color: var(--mist);
  cursor: pointer;
}

.linkbtn:hover {
  color: #fff;
  text-decoration: underline
}

/* =====================================================================
   Back to top + cookie banner
   ===================================================================== */
#toTop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .18s ease;
  z-index: 80;
}

#toTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: none
}

/* The cookie banner is a centred card capped at 560px, so on a wide screen it
   never reaches the back-to-top button and the button must not move. Below
   700px the card grows to the full width and does reach it — measured, the
   crossover is exactly 700px — so only there does the button lift clear, by the
   banner's own measured height (--ck-h) however its text wraps. */
@media (max-width: 699px) {
  body.ck-open #toTop {
    bottom: calc(24px + var(--ck-h, 0px) + 16px)
  }
}

#toTop:hover {
  background: var(--orange-dk)
}

#toTop svg {
  width: 20px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cookie {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius);
  background: var(--mist);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 90;
}

.cookie.hidden {
  display: none
}

.cookie p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent-charcoal);
}

.cookie button {
  height: 37.38px;
  padding: 8px 18px;
  border: 0;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.cookie button.accept {
  background: var(--orange);
  color: #fff
}

.cookie button.accept:hover {
  background: var(--orange-dk)
}

.cookie button.decline {
  background: transparent;
  border: 1px solid var(--charcoal-300);
  color: var(--accent-charcoal);
}

.cookie button.decline:hover {
  border-color: var(--charcoal);
  color: var(--charcoal)
}

/* =====================================================================
   Small screens
   ===================================================================== */
@media (max-width:760px) {
  .hero {
    min-height: 520px;
    padding: 28px 20px 84px
  }

  .logo-hero {
    margin-bottom: 56px
  }

  .hero h1 {
    line-height: 1.25
  }

  .eyebrow-2 {
    font-size: 17px
  }

  .wrap {
    padding: 0 20px
  }

  .rail {
    padding: 0 20px
  }

  .rail::before,
  .rail::after {
    width: 64px
  }

  .faq {
    padding: 26px 0 64px
  }

  .cat {
    margin-bottom: 36px
  }

  .cat-title {
    font-size: 20px
  }

  .q {
    padding: 20px 18px;
    gap: 14px
  }

  .item.open .q {
    padding-bottom: 14px
  }

  .a-inner {
    padding: 0 18px 20px;
    font-size: 15px
  }

  .toggle {
    width: 24px;
    height: 24px;
    background-size: 24px 24px
  }

  .contact h2 {
    line-height: 1.25
  }



  .foot-base {
    flex-direction: column;
    gap: 10px;
    text-align: center
  }

  .foot-rule {
    margin: 34px 0 20px
  }
}

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

  html {
    scroll-behavior: auto
  }

  .rise {
    opacity: 1;
    transform: none;
    transition: none
  }

  .a {
    transition: none
  }

  .pill-btn:hover,
  #toTop {
    transform: none
  }
}