/* ============================================================
   VerdeX Energy — shared stylesheet
   Change the brand colours here and every page follows.
   ============================================================ */
:root{
  --paper:#F7F9F5;   /* page background          */
  --mist:#E9F1E8;    /* alternating section band */
  --forest:#0E3226;  /* headings, dark sections  */
  --verde:#1C7A55;   /* brand green              */
  --volt:#B4E24A;    /* accent, used sparingly   */
  --slate:#5C6D64;   /* body text                */
  --line:rgba(14,50,38,.12);
  --white:#fff;

  --display:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --nav-h:72px;
  --dock-fs:1.15rem;  /* size the hero name shrinks to once docked in the nav */
  --pad:clamp(20px,4vw,40px);
  --radius:20px;
  --ease:cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--forest);
  font-family:var(--display);font-weight:400;
  font-size:clamp(16px,.55vw + 14.4px,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2.5px solid var(--verde);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.04}
p{margin:0}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:900px}

.eyebrow{
  font-family:var(--mono);font-size:.685rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verde);
}
.lead{font-size:clamp(1.02rem,.5vw + .95rem,1.24rem);line-height:1.55;color:var(--slate)}
.h2{font-size:clamp(2.1rem,4.4vw,3.4rem);text-wrap:balance}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(247,249,245,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 1px 0 var(--line);
}
.nav--solid{background:rgba(247,249,245,.9);box-shadow:0 1px 0 var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.16rem;letter-spacing:-.035em}
.brand svg{width:26px;height:26px;flex:none}
.brand em{font-style:normal;color:var(--verde)}

.tabs{
  position:relative;display:flex;align-items:center;gap:2px;
  padding:5px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.nav.is-stuck .tabs,.nav--solid .tabs{background:rgba(233,241,232,.7);border-color:transparent}
.tabs__pill{
  position:absolute;top:5px;left:0;height:calc(100% - 10px);
  border-radius:999px;background:var(--white);
  box-shadow:0 2px 10px rgba(14,50,38,.1);
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s;
  opacity:0;pointer-events:none;
}
.tabs a{
  position:relative;z-index:1;padding:8px 17px;border-radius:999px;
  font-size:.905rem;font-weight:500;color:var(--forest);
  transition:color .3s var(--ease);white-space:nowrap;
}
.tabs a:hover{color:var(--verde)}
.nav__right{display:flex;align-items:center;gap:12px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--volt{background:var(--volt);color:var(--forest);box-shadow:0 6px 20px rgba(180,226,74,.4)}
.btn--volt:hover{box-shadow:0 10px 26px rgba(180,226,74,.55)}
.btn--dark{background:var(--forest);color:var(--paper)}
.btn--dark:hover{background:#164434}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--forest);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:#fff}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.nav .btn{padding:10px 19px;font-size:.9rem}

.burger{display:none;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.burger span{position:absolute;left:13px;width:18px;height:1.8px;background:var(--forest);border-radius:2px;transition:.4s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.sheet.is-open{opacity:1;visibility:visible;transform:none}
.sheet a{font-size:clamp(2rem,9vw,2.7rem);font-weight:600;letter-spacing:-.035em;padding:9px 0;border-bottom:1px solid var(--line)}
.sheet a:last-of-type{border-bottom:0}
.sheet .btn{align-self:flex-start;margin-top:30px;font-size:1rem;padding:14px 26px;border-bottom:0}

/* ============================================================
   HERO — the name, then the line
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.07);animation:heroZoom 2.6s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(247,249,245,.84) 0%,rgba(247,249,245,.3) 26%,rgba(247,249,245,0) 48%),
    linear-gradient(0deg,var(--paper) 1%,rgba(247,249,245,.7) 18%,rgba(247,249,245,0) 44%);
}
.hero__body{flex:1;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 30px);padding-bottom:40px}

/* The name is typed identically in three places: the invisible slot that
   holds its place in the hero, the flying copy that actually shows, and the
   invisible target in the navbar it docks into. Keep these in sync. */
.titleType{
  font-size:clamp(2.2rem,11.5vw,10rem);font-weight:600;letter-spacing:-.055em;
  line-height:.9;white-space:nowrap;
}
.titleType em{font-style:normal;color:var(--verde)}
.hero__slot{visibility:hidden}

/* the copy that scrolls up and shrinks into the navbar */
.flyTitle{
  position:fixed;left:0;top:0;margin:0;z-index:101;
  transform-origin:0 0;will-change:transform;pointer-events:none;
  display:flex;gap:0 .28em;visibility:hidden;
  transition:opacity .3s var(--ease);
}
.flyTitle.is-ready{visibility:visible}
.is-menu-open .flyTitle{opacity:0}

/* each word sits in a mask it rises out of */
.word{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.word__in{display:inline-block;transform:translateY(110%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--w,0) * 110ms)}
.is-shown .word__in{transform:translateY(0)}

/* the docking target — invisible, but reserves the space in the navbar */
.brand__word{
  opacity:0;font-weight:600;letter-spacing:-.055em;
  font-size:var(--dock-fs);white-space:nowrap;line-height:.9;
}

.hero__line{
  margin-top:clamp(18px,2.6vw,30px);
  font-size:clamp(1.35rem,3.4vw,2.6rem);font-weight:500;letter-spacing:-.035em;
  color:var(--forest);display:flex;align-items:baseline;gap:.32em;flex-wrap:wrap;
}
/* One word, several languages. The sizer holds a fixed box so nothing
   reflows while the words swap — only opacity and transform animate,
   which is what keeps it smooth. */
.rotator{display:inline-block;position:relative;color:var(--verde)}
.rotator__sizer{visibility:hidden;white-space:nowrap}
.rotator__w{
  position:absolute;left:0;top:0;width:100%;text-align:center;white-space:nowrap;
  opacity:0;transform:translateY(.4em);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  will-change:opacity,transform;
}
/* the incoming word waits for the old one to clear, so they never sit
   on top of each other at half opacity */
.rotator__w.is-current{opacity:1;transform:none;transition-delay:.26s}
.rotator__w.is-leaving{opacity:0;transform:translateY(-.4em);transition-delay:0s}
.rotator__w.no-anim{transition:none}

.hero__cue{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,4vw,44px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);transition:color .3s var(--ease);
}
.hero__cue:hover{color:var(--verde)}
.hero__cue svg{width:16px;height:16px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:clamp(74px,10vw,128px)}
.section--mist{background:var(--mist)}
.head{max-width:60ch}
.head .h2{margin-top:16px}
.head .lead{margin-top:20px}

/* ---------- about / vision ---------- */
/* The photo takes its height from the text beside it, so the top of the
   heading and the bottom of the paragraph both line up with the picture.
   Write more or less text and it stays in line. */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:stretch}
.about__body .h2{margin-top:16px}
.about__body > :first-child{margin-top:0}
.about__body p{margin-top:20px;font-size:clamp(1rem,.45vw + .93rem,1.16rem);line-height:1.6;color:var(--slate)}
.about__media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:230px}
/* absolutely placed so the image never dictates the row height */
.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.about__media:hover img{transform:scale(1.04)}

/* ---------- open roles ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,44px)}
.filter{
  padding:9px 18px;border-radius:999px;font-size:.88rem;font-weight:500;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--slate);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.filter:hover{color:var(--forest);box-shadow:inset 0 0 0 1px rgba(14,50,38,.28)}
.filter[aria-pressed="true"]{background:var(--forest);color:var(--paper);box-shadow:none}
.filters.is-hidden{display:none}

.roles{margin-top:clamp(26px,3vw,36px);border-top:1px solid var(--line)}
.role{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(14px,3vw,34px);
  padding:clamp(22px,2.6vw,30px) 6px;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease),background .4s var(--ease);
}
.role:hover{background:rgba(255,255,255,.6);padding-left:18px}
.role.is-hidden{display:none}
.role__title{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.role__meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.role__go{
  display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;
  color:var(--verde);white-space:nowrap;
}
.role__go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.role:hover .role__go svg{transform:translate(3px,-3px)}
.roles__empty{
  margin-top:clamp(26px,3vw,36px);padding:34px 6px 0;border-top:1px solid var(--line);
  color:var(--slate);font-size:1.02rem;line-height:1.6;max-width:60ch;
}
.roles__empty a{color:var(--verde);border-bottom:1px solid rgba(28,122,85,.35);transition:border-color .3s var(--ease)}
.roles__empty a:hover{border-bottom-color:var(--verde)}
.roles__empty.is-hidden{display:none}
.roles.is-hidden{display:none}

/* ---------- meet the team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(36px,4.5vw,54px)}
/* photo on the left, name/title/email beside it — keeps the cards compact */
.person{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;align-content:start;
  padding:22px 22px 24px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.person:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(14,50,38,.08)}
.person__photo{
  grid-column:1;grid-row:1 / span 3;
  width:78px;height:78px;border-radius:50%;overflow:hidden;background:var(--mist);
}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block}
.person h3{grid-column:2;margin-top:0;font-size:1.08rem;line-height:1.2;letter-spacing:-.025em}
.person__role{grid-column:2;margin-top:5px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.person__mail{grid-column:2;margin-top:9px}
.person p{color:var(--slate);font-size:.88rem;line-height:1.5}
.person__mail a{
  color:var(--verde);border-bottom:1px solid rgba(28,122,85,.3);
  overflow-wrap:anywhere;transition:border-color .3s var(--ease)
}
.person__mail a:hover{border-bottom-color:var(--verde)}

/* ---------- contact strip ---------- */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(34px,4vw,48px)}
.contact__item{padding:22px 0;border-top:1px solid var(--line)}
.contact__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.contact__v{margin-top:8px;font-size:1.08rem;font-weight:500;letter-spacing:-.02em}
.contact__v a{border-bottom:1px solid rgba(28,122,85,.35);transition:color .3s,border-color .3s}
.contact__v a:hover{color:var(--verde);border-color:var(--verde)}

/* ============================================================
   ROLE PAGE
   ============================================================ */
.job{padding-top:calc(var(--nav-h) + clamp(34px,5vw,64px));padding-bottom:clamp(60px,8vw,110px)}
.back{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  transition:color .3s var(--ease);
}
.back:hover{color:var(--verde)}
.back svg{width:14px;height:14px}
.job__title{margin-top:22px;font-size:clamp(2.2rem,5.6vw,4rem);letter-spacing:-.045em;text-wrap:balance}
.job__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{
  padding:8px 15px;border-radius:999px;background:var(--mist);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);
}
.job__grid{display:grid;grid-template-columns:1fr 330px;gap:clamp(32px,5vw,66px);margin-top:clamp(38px,5vw,58px);align-items:start}
.job__body > * + *{margin-top:22px}
.job__body p{color:var(--slate);font-size:1.02rem;line-height:1.65}
.job__body h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-top:40px}
.job__body ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.job__body li{position:relative;padding-left:20px;color:var(--slate);font-size:1rem;line-height:1.6}
.job__body li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--volt)}
.apply{position:sticky;top:calc(var(--nav-h) + 22px);padding:28px 26px 30px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line)}
.apply h2{font-size:1.15rem}
.apply p{margin-top:10px;color:var(--slate);font-size:.92rem;line-height:1.55}
.apply .btn{margin-top:20px;width:100%;justify-content:center}
.apply__row{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.apply__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.apply__v{margin-top:6px;font-size:.98rem;font-weight:500}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--forest);color:var(--paper);padding-block:clamp(46px,6vw,68px) 30px}
.footer__top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.footer__nav{display:flex;flex-wrap:wrap;gap:22px;font-size:.93rem}
.footer__nav a{color:rgba(247,249,245,.7);transition:color .3s}
.footer__nav a:hover{color:var(--volt)}
.footer__bottom{
  margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid rgba(247,249,245,.16);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:rgba(247,249,245,.5);
}

/* ============================================================
   MOTION — reveals
   ============================================================ */
.rise{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0) * 85ms)}
.rise.is-in{opacity:1;transform:none}

/* ============================================================
   EDIT MODE — dormant unless the address ends in #edit
   ============================================================ */
.is-editing{scroll-behavior:auto}
.is-editing .rise{opacity:1!important;transform:none!important}
.is-editing .word__in{transform:none!important}
.is-editing [contenteditable]{outline:1px dashed rgba(28,122,85,.4);outline-offset:4px;border-radius:3px;cursor:text}
.is-editing [contenteditable]:hover{background:rgba(180,226,74,.14)}
.is-editing [contenteditable]:focus{outline:2px solid var(--verde);background:rgba(180,226,74,.2)}
.is-editing .btn:hover,.is-editing .person:hover{transform:none}
.is-editing .role:hover{padding-left:6px;background:none}

/* role add / remove controls — only ever visible in edit mode */
.is-editing .role{grid-template-columns:1fr auto auto auto}
.role__tools{display:flex;align-items:center;gap:6px;padding-left:14px}
.role__tool{
  padding:6px 11px;border-radius:999px;cursor:pointer;user-select:none;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(14,50,38,.09);color:var(--forest);transition:background .25s var(--ease);
}
.role__tool:hover{background:rgba(14,50,38,.18)}
.role__tool--del{background:rgba(176,42,42,.12);color:#9c2b2b}
.role__tool--del:hover{background:rgba(176,42,42,.22)}
.rolesAdd{
  margin-top:20px;padding:11px 20px;border-radius:999px;
  background:var(--volt);color:var(--forest);font-weight:600;font-size:.9rem;
  box-shadow:0 6px 18px rgba(180,226,74,.4);transition:transform .3s var(--ease);
}
.rolesAdd:hover{transform:translateY(-2px)}
@media (max-width:900px){
  .is-editing .role{grid-template-columns:1fr}
  .role__tools{padding-left:0;flex-wrap:wrap}
}

#editBar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;
  border-radius:999px;background:rgba(14,50,38,.97);color:var(--paper);
  box-shadow:0 12px 40px rgba(14,50,38,.34);font-family:var(--display);font-size:.88rem;
  max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:center;
}
#editBar .dot{width:8px;height:8px;border-radius:50%;background:var(--volt);flex:none;animation:blink 2s ease-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
#editBar span.lbl{margin-right:4px;white-space:nowrap}
#editBar button{padding:9px 16px;border-radius:999px;font-size:.85rem;font-weight:600;white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease)}
/* nothing to save yet — keep the button quiet so "Exit" is not mistaken for it */
#editBar .save{background:rgba(247,249,245,.14);color:rgba(247,249,245,.6);cursor:default}
#editBar.is-dirty .save{background:var(--volt);color:var(--forest);cursor:pointer}
#editBar.is-dirty .save:hover{transform:translateY(-1px);background:#c6ee6b}
#editBar.is-dirty .lbl{color:var(--volt);font-weight:600}
#editBar.is-dirty .dot{animation-duration:1s}
#editBar .exit{background:rgba(247,249,245,.14);color:var(--paper)}
#editBar .exit:hover{background:rgba(247,249,245,.24)}
#editToast{
  position:fixed;left:50%;bottom:86px;transform:translate(-50%,10px);z-index:201;
  padding:12px 20px;border-radius:999px;background:var(--volt);color:var(--forest);
  font-family:var(--display);font-size:.88rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);
  box-shadow:0 10px 30px rgba(14,50,38,.25);text-align:center;max-width:calc(100vw - 32px);
}
#editToast.show{opacity:1;transform:translate(-50%,0)}

/* sticky explanation — used when Save can only download a copy */
#editNote{
  position:fixed;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(14,50,38,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#editNote.show{display:flex}
.editNote__in{
  max-width:520px;background:var(--paper);color:var(--forest);
  padding:30px 32px 26px;border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(14,50,38,.35);font-family:var(--display);
}
.editNote__in h3{font-size:1.25rem;line-height:1.2;margin-bottom:14px}
.editNote__in p{margin-top:12px;font-size:.95rem;line-height:1.6;color:var(--slate)}
.editNote__in b{color:var(--forest)}
.editNote__tip{
  margin-top:16px!important;padding:14px 16px;border-radius:12px;
  background:var(--mist);color:var(--forest)!important;font-size:.9rem!important;
}
.editNote__ok{
  margin-top:22px;padding:11px 24px;border-radius:999px;
  background:var(--forest);color:var(--paper);font-weight:600;font-size:.92rem;
}
.editNote__ok:hover{background:#164434}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){ .nav .btn--volt{display:none} }
@media (max-width:940px){ .tabs{display:none} .burger{display:block} }
@media (max-width:900px){
  .team,.contact,.about{grid-template-columns:1fr}
  .about__media{aspect-ratio:16/10}
  .job__grid{grid-template-columns:1fr}
  .apply{position:static}
  .role{grid-template-columns:1fr;gap:12px;align-items:start}
  .role__go{margin-top:2px}
}
@media (max-width:560px){
  #editBar{font-size:.8rem;padding:9px}
  #editBar span.lbl{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  .word__in{transform:none}
  .hero__media img{transform:none}
}