/* Palette from the Beam Solace mark (#FFE59B) and its blue companion (#739BB5). */
  :root {
    color-scheme: light;
    --paper:     #FFFFFF;
    --mist:      #F2F7FA;   /* cool tint panel, pulled from the blue */
    --mist-2:    #E6EFF4;
    --hands:     #739BB5;   /* the blue that runs with it */
    --hands-deep:#3F6D8A;   /* darkened for text-safe contrast */
    --light:     #FFE59B;   /* the butter yellow, exact from the mark */
    --light-2:   #F6D77E;
    --ink:       #15303D;   /* dark blue — all type */
    --ink-2:     #15303D;   /* body copy, same dark blue as headings */
    --ink-3:     rgba(21, 48, 61, 0.55);  /* only tiny meta: hints, captions */
    --rule:      rgba(21, 48, 61, 0.14);

    --display: "Gabarito", "Trebuchet MS", sans-serif;
    --text:    "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --pad: clamp(20px, 5vw, 68px);
    --max: 1120px;
    --gap-y: clamp(72px, 11vw, 150px);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  p { margin: 0; }
  h1, h2, h3 {
    margin: 0; font-family: var(--display); font-weight: 700;
    line-height: 1.04; letter-spacing: -0.021em;
  }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 3px solid var(--hands-deep); outline-offset: 3px; border-radius: 3px; }

  .hold { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
  .band { padding-block: var(--gap-y); }
  .mist { background: var(--mist); }

  /* ---------------- Header ---------------- */
  .top {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
  }
  .top.edge { border-bottom-color: var(--rule); }
  /* Full-bleed bar: mark hard left, links hard right. */
  .top-in {
    width: 100%;
    padding: 18px clamp(18px, 3.4vw, 46px);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .mark { display: flex; align-items: center; gap: 13px; text-decoration: none; }
  .mark img { width: 38px; height: auto; }
  .mark span {
    font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.03em;
    white-space: nowrap;
  }
  .links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
  .links a {
    font-size: 16.5px; font-weight: 500; text-decoration: none;
    color: var(--ink-2); white-space: nowrap; transition: color .16s;
  }
  .links a:hover { color: var(--hands-deep); }
  .links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--light-2); }
  @media (max-width: 940px) { .links a:not(.push) { display: none; } }

  .push {
    display: inline-block;
    background: var(--ink); color: #fff;
    padding: 13px 26px; border-radius: 40px;
    font-family: var(--text); font-size: 16px; font-weight: 500;
    text-decoration: none; border: 1.5px solid var(--ink);
    transition: background .18s, border-color .18s, color .18s;
  }
  .push:hover { background: var(--hands-deep); border-color: var(--hands-deep); }
  .links .push { color: #fff; }
  .push .narrow { display: none; }
  @media (max-width: 620px) {
    .push .wide { display: none; }
    .push .narrow { display: inline; }
    .mark img { width: 32px; }
    .mark span { font-size: 20px; }
    .top-in { padding-block: 14px; }
  }

  .push.quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
  .push.quiet:hover { background: var(--mist-2); border-color: var(--hands); color: var(--ink); }

  /* Replace img/hero.jpg to change the homepage photo. The dark overlay keeps
     white text readable across both desktop and phone crops. */
  .hero {
    position: relative; text-align: center;
    padding-block: clamp(56px, 9vw, 96px) var(--gap-y);
    color: #fff;
    background-color: var(--ink);
    background-image: linear-gradient(rgba(8, 20, 27, .68), rgba(8, 20, 27, .74)), url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-mark {
    width: clamp(76px, 8.5vw, 104px); height: auto;
    margin: 0 auto clamp(26px, 3.4vw, 40px);
  }

  .hero h1 {
    font-size: clamp(38px, 7.6vw, 88px);
    font-weight: 800;
    max-width: 17ch; margin: clamp(30px, 4vw, 46px) auto clamp(34px, 4.4vw, 52px);
    text-wrap: balance;
  }
  .hero .under {
    margin: 0 auto; max-width: 46ch;
    font-size: clamp(16.5px, 1.9vw, 20px); color: #fff;
  }
  .hero .acts { margin-top: clamp(30px, 3.8vw, 42px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .hero .push, .hero .push.quiet {
    color: #fff; background: transparent; border: 1.5px solid #fff;
  }
  .hero .push:hover, .hero .push.quiet:hover {
    color: #fff; background: transparent; border-color: #fff;
    text-decoration: underline; text-underline-offset: 5px;
  }
  .hero :focus-visible { outline-color: #fff; }
  .hero .strip, .hero .strip div + div { border-color: rgba(255, 255, 255, .45); }
  .hero .strip span { color: #fff; }

  .strip {
    margin-top: clamp(56px, 8vw, 92px);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    display: grid; grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 720px) { .strip { grid-template-columns: 1fr; } }
  .strip div { padding: clamp(28px, 3.4vw, 42px) clamp(16px, 2vw, 26px); }
  .strip div + div { border-left: 1px solid var(--rule); }
  @media (max-width: 720px) {
    .strip div + div { border-left: 0; border-top: 1px solid var(--rule); }
  }
  .strip b {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05;
    letter-spacing: -0.02em; display: block;
  }
  .strip span {
    display: block; margin-top: 10px;
    font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.45; color: var(--ink-2);
  }

  /* ---------------- Section heads ---------------- */
  .head { max-width: 30ch; }
  .head h2 { font-size: clamp(30px, 5.1vw, 56px); }
  .say { margin-top: 22px; max-width: 58ch; font-size: 18px; color: var(--ink-2); }
  .say + .say { margin-top: 16px; }

  /* ---------------- What we do: three bands ---------------- */
  .doing { margin-top: clamp(40px, 6vw, 68px); border-top: 1px solid var(--rule); }
  .row {
    display: grid; grid-template-columns: minmax(150px, 1fr) 2.1fr;
    gap: clamp(16px, 4vw, 56px);
    padding-block: clamp(28px, 3.6vw, 44px);
    border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  @media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 12px; } }
  .row h3 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; }
  .row .what { font-size: 18px; }
  .row .bits {
    margin: 18px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .row .bits li {
    font-size: 14.5px; color: var(--ink-2);
    background: var(--mist); border-radius: 30px; padding: 5px 14px;
  }
  .mist .row .bits li { background: var(--paper); }

  /* ---------------- Who it's for ---------------- */
  .split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 84px); align-items: start; }
  @media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
  .fits { margin: 0; padding: 0; list-style: none; }
  .fits li { padding: 17px 0; border-bottom: 1px solid var(--rule); }
  .fits li:first-child { border-top: 1px solid var(--rule); }
  .fits b { font-family: var(--display); font-weight: 600; font-size: 18.5px; display: block; }
  .fits span { font-size: 15.6px; color: var(--ink-2); }

  .nope {
    margin-top: 32px; padding: 24px 26px;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  }
  .mist .nope { background: var(--paper); }
  .nope b { font-family: var(--display); font-size: 18px; }
  .nope p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }

  /* ---------------- How it works: a real sequence ---------------- */
  .steps { margin-top: clamp(40px, 6vw, 68px); display: grid; gap: 0; }
  .step {
    display: grid; grid-template-columns: 62px 1fr; gap: clamp(14px, 3vw, 40px);
    padding-block: 30px; border-top: 1px solid var(--rule);
    align-items: start;
  }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step .n {
    font-family: var(--display); font-weight: 700; font-size: 34px;
    color: var(--hands); line-height: 1;
  }
  .step .body { display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: clamp(12px, 3vw, 40px); }
  @media (max-width: 760px) {
    .step { grid-template-columns: 40px 1fr; }
    .step .n { font-size: 26px; }
    .step .body { grid-template-columns: 1fr; gap: 8px; }
  }
  .step h3 { font-size: 22px; font-weight: 600; }
  .step p { font-size: 16.4px; color: var(--ink-2); }

  /* ---------------- Student-led ---------------- */
  .held {
    display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 52px);
    align-items: center;
    background: var(--ink); color: #fff;
    border-radius: 20px; padding: clamp(30px, 4.6vw, 56px);
  }
  @media (max-width: 760px) { .held { grid-template-columns: 1fr; } }
  .held img { width: 104px; height: auto; }
  .held h2 { font-size: clamp(26px, 3.6vw, 40px); color: #fff; }
  .held p { margin-top: 15px; font-size: 17.5px; color: rgba(255, 255, 255, 0.76); max-width: 56ch; }
  .held p + p { margin-top: 12px; }

  /* ---------------- Impact stories ----------------
     Big 3:2 photos. The images in /img are placeholders — swap the src for a
     real photo when a project is done. Never add a business name or a result
     figure you have not measured and been given permission to publish. */
  .stories { margin-top: clamp(38px, 5vw, 62px); display: grid; gap: clamp(36px, 5vw, 64px); }
  .story { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 4vw, 54px); align-items: center; }
  .story:nth-child(even) .shot { order: 2; }
  @media (max-width: 820px) { .story { grid-template-columns: 1fr; gap: 20px; }
                              .story:nth-child(even) .shot { order: 0; } }
  .story .shot {
    aspect-ratio: 3 / 2; width: 100%; object-fit: cover;
    border-radius: 18px; background: var(--mist);
    border: 1px solid var(--rule);
  }
  .story .kind { font-size: 15px; color: var(--hands-deep); font-weight: 500; }
  .story h3 { margin-top: 7px; font-size: clamp(24px, 3vw, 33px); font-weight: 600; }
  .story .told { margin-top: 13px; font-size: 16.6px; color: var(--ink-2); }
  .story .result {
    margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rule);
    font-size: 15.5px; color: var(--ink-3);
  }
  .story .result b { font-family: var(--display); font-weight: 700; color: var(--ink); }

  /* ---------------- Sourcing: local + sustainable ---------------- */
  .sourcing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
  @media (max-width: 860px) { .sourcing { grid-template-columns: 1fr; } }
  .sourcing img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; }
  .loop { margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
  .loop li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
  .loop li:last-child { border-bottom: 1px solid var(--rule); }
  .loop .dot {
    width: 11px; height: 11px; border-radius: 50%; background: var(--light);
    border: 2px solid var(--hands); margin-top: 7px;
  }
  .loop b { font-family: var(--display); font-weight: 600; font-size: 17.5px; display: block; }
  .loop span { font-size: 15.6px; color: var(--ink-2); }

  /* ---------------- Roles (join page) ---------------- */
  .roles { margin-top: clamp(38px, 5vw, 60px); border-top: 1px solid var(--rule); }
  .role {
    display: grid; grid-template-columns: minmax(170px, 1fr) 2fr;
    gap: clamp(32px, 6vw, 80px);
    padding-block: clamp(24px, 3.2vw, 38px); border-bottom: 1px solid var(--rule);
  }
  @media (max-width: 760px) { .role { grid-template-columns: 1fr; gap: 24px; } }
  .role h3 { font-size: clamp(22px, 2.9vw, 30px); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
  .role .time { margin-top: 7px; font-size: 14.6px; color: var(--hands-deep); }
  .role p { font-size: 16.6px; color: var(--ink-2); }
  .role .does { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .role .does li { font-size: 14.5px; color: var(--ink-2); background: var(--mist); border-radius: 30px; padding: 5px 14px; }
  .mist .role .does li { background: var(--paper); }

  /* ---------------- Rotating headline ----------------
     All the phrases sit in one grid cell, so the box is as wide as the longest
     and nothing shifts when it changes. Add or remove <span class="rot-i">
     lines in the HTML and it just works. */
  /* The whole sentence rotates. Every line sits in the same grid cell, so the
     block is as tall as the longest one and nothing below it moves. */
  .rot { display: grid; justify-items: center; }
  .rot-i {
    grid-area: 1 / 1; max-width: 15ch;
    opacity: 0; transition: opacity .5s ease;
  }
  .rot-i.is-on { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .rot-i { transition: none; } }

  /* ---------------- Values ---------------- */
  .values { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
  @media (max-width: 860px) { .values { grid-template-columns: 1fr; } }
  .value { background: var(--paper); padding: clamp(26px, 3.2vw, 38px); }
  .mist .value { background: var(--paper); }
  .value .burst { width: 30px; height: auto; }
  .value h3 { margin-top: 18px; font-size: clamp(22px, 2.6vw, 27px); font-weight: 600; }
  .value p { margin-top: 12px; font-size: 16px; color: var(--ink-2); }

  /* ---------------- Tips / blog ---------------- */
  .posts { margin-top: clamp(38px, 5vw, 58px); border-top: 1px solid var(--rule); }
  .post {
    display: grid; grid-template-columns: minmax(130px, 1fr) 2.4fr;
    gap: clamp(14px, 4vw, 52px);
    padding-block: clamp(26px, 3.4vw, 40px); border-bottom: 1px solid var(--rule);
  }
  @media (max-width: 780px) { .post { grid-template-columns: 1fr; gap: 10px; } }
  .post .for { font-size: 14.6px; color: var(--hands-deep); font-weight: 500; }
  .post h3 { font-size: clamp(22px, 2.9vw, 30px); font-weight: 600; }
  .post p { margin-top: 13px; font-size: 16.6px; color: var(--ink-2); }
  .post p + p { margin-top: 12px; }

  /* ---------------- Page intro (inner pages) ---------------- */
  .intro { padding-block: clamp(46px, 7vw, 86px) clamp(30px, 4vw, 50px); }
  .intro h1 { font-size: clamp(38px, 6.6vw, 74px); max-width: 17ch; }
  .intro .under { margin-top: 24px; max-width: 56ch; font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); }

  /* ---------------- Closing call ---------------- */
  .closer { text-align: center; }
  .closer img { width: clamp(58px, 7vw, 78px); margin: 0 auto 24px; }
  .closer h2 { font-size: clamp(28px, 4.6vw, 50px); max-width: 20ch; margin-inline: auto; }
  .closer p { margin: 20px auto 0; max-width: 48ch; font-size: 17.5px; color: var(--ink-2); }
  .closer .acts { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* ---------------- Inquiry ---------------- */
  .ask-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
  @media (max-width: 880px) { .ask-in { grid-template-columns: 1fr; } }
  .field { display: grid; gap: 7px; margin-bottom: 18px; }
  .field label { font-size: 15px; font-weight: 500; }
  .field .opt { font-weight: 400; color: var(--ink-3); font-size: 13.5px; }
  .field .hint { font-size: 14px; color: var(--ink-3); }
  .field input, .field textarea, .field select {
    font: inherit; font-size: 16px; color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--rule); border-radius: 11px;
    padding: 12px 14px; width: 100%;
    transition: border-color .16s;
  }
  .field textarea { min-height: 116px; resize: vertical; }
  .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--hands); }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--hands-deep); outline-offset: 1px; }
  .send {
    font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
    background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
    padding: 13px 28px; border-radius: 40px;
    transition: background .18s, border-color .18s;
  }
  .send:hover { background: var(--hands-deep); border-color: var(--hands-deep); }
  .after { margin-top: 14px; font-size: 15px; color: var(--ink-2); min-height: 1.4em; }
  .or { margin-top: 26px; font-size: 16px; color: var(--ink-2); }
  .or a { font-weight: 500; }

  /* ---------------- Footer ---------------- */
  .foot { border-top: 1px solid var(--rule); padding-block: 40px 52px; }
  .foot .hold { max-width: none; padding-inline: clamp(18px, 3.4vw, 46px); }
  .foot-top {
    display: flex; flex-wrap: wrap; gap: 20px 36px;
    align-items: center; justify-content: space-between;
    padding-bottom: 26px; border-bottom: 1px solid var(--rule);
  }
  .foot-links { display: flex; flex-wrap: wrap; gap: 14px 26px; }
  .foot-links a {
    font-size: 16px; font-weight: 500; text-decoration: none; color: var(--ink-2);
    transition: color .16s;
  }
  .foot-links a:hover { color: var(--hands-deep); }
  .foot-in {
    display: flex; flex-wrap: wrap; gap: 16px 34px;
    align-items: center; justify-content: space-between;
    font-size: 15px; color: var(--ink-3);
  }
  .foot-in .mark span { font-size: 17px; }

  /* ---------------- The one piece of motion ----------------
     The mark eases up once as the page opens, then stops.
     Nothing else on the page animates on scroll. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-mark { animation: bloom 1100ms cubic-bezier(.16, .84, .32, 1) both; }
    @keyframes bloom {
      from { opacity: 0; transform: scale(.82); }
      to   { opacity: 1; transform: none; }
    }
    .hero h1, .hero .under, .hero .acts {
      animation: lift 820ms cubic-bezier(.2, .8, .3, 1) both;
    }
    .hero h1 { animation-delay: 140ms; }
    .hero .under { animation-delay: 260ms; }
    .hero .acts { animation-delay: 360ms; }
    @keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }

/* Homepage invitation sections: replace img/coffee.jpg to change this photo. */
.photo-cta {
  color: #fff;
  background-color: var(--ink);
  background-image: linear-gradient(rgba(8, 20, 27, .68), rgba(8, 20, 27, .74)), url('../img/coffee.jpg');
  background-size: cover;
  background-position: center;
}
.photo-cta .closer p { color: #fff; }
.photo-cta .push, .photo-cta .push.quiet {
  color: #fff; background: transparent; border: 1.5px solid #fff;
}
.photo-cta .push:hover, .photo-cta .push.quiet:hover {
  color: #fff; background: transparent; border-color: #fff;
  text-decoration: underline; text-underline-offset: 5px;
}
.photo-cta :focus-visible { outline-color: #fff; }

/* Business invitation photo; the team invitation keeps its coffee photo. */
.share-cta {
  background-image: linear-gradient(rgba(8, 20, 27, .68), rgba(8, 20, 27, .74)), url('../img/support-local.jpg');
}

/* Phone/tablet navigation. The Menu control opens the complete page list. */
.mobile-menu { display: none; }
@media (max-width: 940px) {
  .top-in { position: relative; gap: 16px; }
  .top-in > .links { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary {
    cursor: pointer; padding: 10px 16px; border: 1.5px solid var(--ink);
    border-radius: 24px; font-weight: 500; font-size: 16px;
  }
  .mobile-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px var(--pad) 24px; background: var(--paper);
    border-bottom: 1px solid var(--rule); box-shadow: 0 12px 20px rgba(21,48,61,.1);
    max-height: calc(100dvh - 80px); overflow-y: auto;
  }
  .mobile-links a { padding: 10px 12px; text-decoration: none; }
  .mobile-links a[aria-current="page"] { font-weight: 600; background: var(--mist); border-radius: 8px; }
  .mobile-links .push { align-self: flex-start; margin-top: 12px; padding: 12px 24px; }
}