@font-face{font-family:"Exo";src:url(../fonts/exo.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#111; --grey:#8A8A8A; --paper:#fff;
  --L:3.55%;                 /* left column x */
  --cS:47.9%; --cE:86.1%;    /* content column */
  --tLabel:11px; --tPage:26px; --tHead:15px; --tBody:15px;
  --hdrTop:52px; --barTop:150px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:"Exo",system-ui,sans-serif;
  font-size:var(--tBody);line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- header lockup: mark + ATOLLSCAPE + page name ---------- */
.hdr{position:fixed;left:var(--L);top:var(--hdrTop);z-index:6;display:flex;align-items:flex-start;gap:13px}
.hdr__mark{width:38px;flex:0 0 38px;display:block;cursor:pointer}
.hdr__mark:hover{opacity:.7}
.hdr__mark:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hdr__mark img{width:100%;height:auto}
.hdr__lab{font-size:var(--tLabel);letter-spacing:.09em;color:#4A4A4A;margin:6px 0 1px}
.hdr__name{font-size:var(--tPage);font-weight:700;letter-spacing:-.2px;line-height:1.05;margin:0}

/* ---------- fixed menu ---------- */
.menu{position:fixed;left:var(--L);bottom:56px;z-index:6;display:flex;flex-direction:column;gap:18px}
.menu a{font-size:var(--tHead);color:var(--grey)}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- content column ---------- */
.col{position:absolute;left:var(--cS);width:calc(var(--cE) - var(--cS));top:0;
  padding-top:var(--barTop);padding-bottom:110px}

/* sticky bar */
.bar{position:sticky;top:0;background:var(--paper);z-index:5;padding-top:26px}
.bar__row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--tHead);font-weight:700;padding-bottom:9px;border-bottom:1px solid var(--ink)}

/* filter / search overlay */
.ov{position:fixed;inset:0;z-index:30;display:none}
.ov.on{display:block}
.ov__bg{position:absolute;inset:0;background:rgba(17,17,17,.35)}
.ov__panel{position:absolute;left:var(--cS);width:calc(var(--cE) - var(--cS));top:var(--barTop);
  background:var(--paper);padding:22px 24px 24px;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.ov__head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--tHead);font-weight:700;padding-bottom:9px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.fg{margin-bottom:18px}.fg:last-child{margin-bottom:0}
.fg h4{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;border:1px solid #D6D6D6;padding:6px 11px;line-height:1}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.srch{width:100%;border:0;border-bottom:1px solid #D6D6D6;padding:8px 0;font-size:var(--tBody);background:none;outline:none}
.range{position:relative;height:26px;margin-top:6px}
.range input{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:9px;width:100%;
  height:2px;background:none;pointer-events:none;margin:0}
.range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:14px;height:14px;
  border-radius:50%;background:var(--ink);cursor:pointer;border:0}
.range input::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:0}
.range__t{position:absolute;left:0;right:0;top:9px;height:2px;background:#DDD}
.range__f{position:absolute;top:9px;height:2px;background:var(--ink)}
.range__o{display:flex;justify-content:space-between;font-size:12px;color:var(--grey)}
.ov__act{display:flex;justify-content:space-between;margin-top:20px;font-size:12.5px}

/* ---------- entries ---------- */
.entry{padding-top:26px;cursor:pointer}
.entry.hide{display:none}
.entry__t{font-weight:700}
.entry__s{margin:1px 0 14px}
.entry:hover .entry__t{text-decoration:underline}
.lay{display:grid;gap:8px}
.lay--single,.lay--stack{grid-template-columns:1fr}
.lay--split{grid-template-columns:1fr 1fr}
.lay--split :nth-child(1){grid-row:1/3}
.lay--pair{grid-template-columns:1fr 1fr}
.lay img{width:100%;height:100%;object-fit:cover;background:#EEE}
.lay--single img,.lay--stack img{aspect-ratio:16/9}
.lay--pair img{aspect-ratio:4/3}
.lay--split img{aspect-ratio:1/1}
.lay--split :nth-child(1) img{aspect-ratio:auto;height:100%}
.empty{padding:40px 0;color:var(--grey)}

/* ---------- window modal ---------- */
.win{position:fixed;inset:0;z-index:40;display:none}
.win.on{display:block}
.win__bg{position:absolute;inset:0;background:rgba(17,17,17,.55)}
.win__box{position:absolute;inset:40px;background:var(--paper);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.3)}
.win__mhdr,.win__mtitle,.win__mx{display:none}

.win__scroll{position:absolute;inset:0}
.win__media{position:absolute;left:0;top:0;width:41.7%;height:100%;background:#EEE;overflow:hidden}
.gal{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior:contain}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px;z-index:2}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.dot.on{background:#fff}

/* the ONE scroll container on desktop */
.win__col{position:absolute;left:47.9%;right:6%;top:0;bottom:0;overflow-y:auto;
  overscroll-behavior:contain;padding:96px 0 70px}
.win__x{position:absolute;top:26px;right:26px;z-index:5;width:34px;height:34px;
  display:grid;place-items:center;font-size:20px;line-height:1;color:#8A8A8A}
.win__x:hover{color:var(--ink)}
.wh{position:sticky;top:0;background:var(--paper);z-index:2;padding-top:2px}
.wh__row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--tHead);
  font-weight:700;padding-bottom:9px;border-bottom:1px solid var(--ink)}
.wh__sub{padding-top:14px}
.wb{padding-top:52px}
.wb p{margin:0 0 18px}

/* ---------- home ---------- */
.copied{font-size:12px;opacity:0;transition:opacity .25s}
.copied.on{opacity:.75}

/* ---------- team ---------- */
.about--desk{position:fixed;left:var(--L);top:210px;width:20%;font-size:12.5px;line-height:1.55;z-index:5}
.about--mob{display:none}
.about{font-size:12.5px;line-height:1.55}
.about p{margin:0 0 13px}
.about a{text-decoration:underline}
.tsec{margin-bottom:44px}
.tsec h3{margin:0 0 8px;font-size:var(--tHead);font-weight:700}
.tsec .r{border-bottom:1px solid var(--ink);margin-bottom:22px}
.person{margin-bottom:21px}
.person b{display:block;font-weight:700}
.person .soc{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.person .soc a{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;
  color:#fff;transition:transform .15s ease,filter .15s ease}
.person .soc a svg{width:13px;height:13px;display:block}
.person .soc a:hover{transform:translateY(-1px);filter:brightness(1.08)}
.person .soc a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* official brand colours */
.person .soc .soc--li{background:#0A66C2}
.person .soc .soc--ig{background:#833AB4;
  background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}

/* ---------- mobile footer (mobile only) ---------- */
.mfoot{display:none}

/* ---------- harness ---------- */

/* ================= MOBILE ================= */
@media (max-width:820px){
  :root{--L:24px;--tPage:19px;--tLabel:8.5px;--tHead:13px;--tBody:13px;--hdrTop:24px}
  .hdr{gap:10px;top:24px}
  .hdr__mark{width:26px;flex:0 0 26px}
  .menu{display:none}

  /* page = fixed header + fixed bar + scrolling body + fixed footer */
  .col{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;padding:0;
    display:flex;flex-direction:column}
  .colTop{flex:0 0 auto;padding:78px var(--L) 0}
  .bar{position:static;padding:0 0 0}
  .bar__row{padding-bottom:8px}
  .scrollY{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 var(--L) 24px}
  .entry{padding-top:20px}

  .mfoot{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--paper);
    border-top:1px solid #E6E6E6;padding:14px var(--L) calc(14px + env(safe-area-inset-bottom));
    justify-content:space-between;align-items:center;font-size:11.5px;gap:10px}
  .mfoot a{color:var(--grey);white-space:nowrap}
  .mfoot a[aria-current="page"]{color:var(--ink);font-weight:700}
  .mfoot .grp{display:flex;gap:16px}

  /* team: intro fixed above, lists scroll below */
  .about--desk{display:none}
  .about--mob{display:block;position:static;width:auto;padding:0;margin:12px 0 0;font-size:12px}

  /* home */
/* window = full screen on mobile: fixed header + fixed title, image+body scroll together */
  .win__box{inset:0;display:flex;flex-direction:column}
  .win__x{display:none}

  .win__mhdr{display:flex;justify-content:space-between;align-items:flex-start;
    flex:0 0 auto;padding:24px var(--L) 0;background:var(--paper)}
  .win__mhdr .hdr__in{display:flex;align-items:flex-start;gap:10px}
  .win__mhdr .hdr__mark{width:26px;flex:0 0 26px}
  .win__mhdr .hdr__mark img{width:100%;height:auto}
  .win__mx{display:grid;place-items:center;width:44px;height:44px;margin:-6px -10px 0 0;
    font-size:19px;line-height:1;color:var(--ink)}

  .win__mtitle{display:block;flex:0 0 auto;padding:8px var(--L) 0;background:var(--paper)}
  .win__mtitle .wh__row{padding-bottom:9px;border-bottom:1px solid var(--ink)}
  .win__mtitle .wh__sub{padding-top:12px}

  /* the ONE scroll container on mobile */
  .win__scroll{position:static;inset:auto;flex:1 1 auto;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .win__media{position:static;width:auto;height:auto;aspect-ratio:16/10;
    margin:35px var(--L) 0}                 /* 35px cushion below the subtitle */
  .win__col{position:static;left:auto;right:auto;top:auto;bottom:auto;
    overflow:visible;padding:0 0 28px}
  .win__col .wh{display:none}               /* title lives in the fixed block above */
  .win__col .wb{padding:24px var(--L) 0}
  .dots{bottom:10px}

  .ov__panel{left:0;right:0;width:auto;top:auto;bottom:0;padding:20px var(--L) 28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- theme adjustments ---- */
.agra-home{position:relative;height:100vh;height:100dvh;overflow:hidden}
.agra-home .hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--home-fx,50%) var(--home-fy,50%)}
.hero--empty{display:grid;place-items:center;background:#EFEFEF;color:#777}
.agra-home .hfoot{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;align-items:center;padding:0 var(--L) 34px;
  color:var(--footer-colour,#fff)}
.agra-home .hfoot__logo{height:var(--logo-size,34px);width:auto}
.agra-home .hfoot nav{display:flex;gap:26px;align-items:center}
.agra-home .mobtop{display:none}
.hdr__in{display:flex;align-items:flex-start;gap:13px;color:inherit;text-decoration:none}
.hdr__in:hover{opacity:.7}
.hdr__lab{display:block}
.hdr__name{display:block;font-size:var(--tPage);font-weight:700;letter-spacing:-.2px;line-height:1.05}
.win--solo .win__bg{display:none}
.win--solo .win__box{inset:40px}
.win.on{display:block}
.wb img{height:auto}
@media (max-width:820px){
  .agra-home .mobtop{display:flex;align-items:center;position:absolute;left:var(--L);top:26px;z-index:3}
  .agra-home .mobtop img{height:var(--logo-size-mob,34px);width:auto}
  .agra-home .hero{top:78px;height:calc(100% - 78px - 92px)}
  .agra-home{background:#fff}
  .agra-home .hfoot{position:fixed;bottom:0;padding:14px var(--L) calc(14px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid #E6E6E6;color:var(--ink)}
  .agra-home .hfoot__logo{display:none}
  .agra-home .hfoot nav{gap:14px;font-size:11.5px;flex-wrap:wrap}
  .win--solo .win__box{inset:0}
  .hdr__in{gap:10px}
}