:root{
  --navy:#1E2A3A; --navy-deep:#172230; --navy-deeper:#0E1620;
  --blue:#2A72C4; --blue-link:#205A9E; --blue-soft:#5A94D8;
  --wash:#F0EEF8; --white:#FFFFFF; --paper:#FAF9FD;
  --muted:#5D6B88; --ondark:#CDD8E0; --ondark-2:#9FB0BD;
  --rule:#E2E0EC; --rule-dark:rgba(255,255,255,.10); --red:#C0392B;
  --gold:#C08A2B;
}
*{box-sizing:border-box;}

/* THE hidden SAFETY NET. Read this before removing it.
   A browser hides [hidden] with a rule of its own, and ANY author rule that
   sets display beats it. So `.collbtn{display:block}` quietly turned
   hidden="true" into "still on screen, just empty" - and the same trap was
   already sitting under .loadmore and under the Buy button, waiting.
   One rule closes it for every element on the site, now and in future, and
   is what normalize.css and every other reset does for the same reason. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;}
body{margin:0;background:var(--white);color:var(--navy);
  font-family:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.rb{font-family:Roboto,Arial,sans-serif;font-weight:700;text-wrap:balance;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
a{color:var(--blue-link);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(23,34,48,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-dark);}
.nav-in{max-width:1140px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px;}
.mark{color:#fff;text-decoration:none;line-height:1.15;}
.mark b{font-family:Roboto,sans-serif;font-weight:900;font-size:16.5px;letter-spacing:.135em;display:block;}
.mark span{font-size:10.5px;color:var(--ondark-2);letter-spacing:.02em;}
.nav nav{display:flex;gap:22px;margin-left:auto;}
.nav nav a{color:var(--ondark);text-decoration:none;font-size:14px;padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap;}
.nav nav a:hover{color:#fff;}
.nav nav a.on{color:#fff;border-bottom-color:var(--blue-soft);}
.navbtn{background:var(--blue);color:#fff;text-decoration:none;font-weight:600;
  font-size:14px;padding:9px 17px;border-radius:3px;white-space:nowrap;}
.navbtn:hover{background:#2f7fd8;}
@media(max-width:900px){.nav-in{flex-wrap:wrap;gap:14px;}
  .nav nav{margin-left:0;order:3;width:100%;overflow-x:auto;}
  .navbtn{margin-left:auto;}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;
  background:var(--navy-deeper);overflow:hidden;}
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(1.24) contrast(.97) saturate(.9);}
/* Two players stacked. Whichever is showing carries .on; the other sits at
   zero opacity with the next clip already buffered behind it, so the change
   is a fade rather than a cut and there is never a snap back to frame one. */
.hero video.hv{opacity:0;transition:opacity 1.6s ease-in-out;}
.hero video.hv.on{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .hero video.hv{transition:none;}
  .hero video#hv1{display:none;}
}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,22,32,.86) 0%,rgba(14,22,32,.62) 42%,rgba(14,22,32,.30) 74%,rgba(14,22,32,.42) 100%);}
.hero .vig{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 46%,rgba(0,0,0,0) 38%,rgba(0,0,0,.42) 100%);}
.hero-in{position:relative;z-index:2;width:100%;padding:74px 0 66px;}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue-soft);display:flex;align-items:center;gap:12px;margin:0 0 18px;}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--blue-soft);flex:none;}
.hero h1{color:#fff;font-size:clamp(34px,5vw,62px);line-height:1.03;margin:0 0 20px;
  max-width:16ch;letter-spacing:-.015em;text-shadow:0 2px 26px rgba(0,0,0,.42);}
.hero .sub{color:var(--ondark);font-size:17px;max-width:56ch;margin:0 0 30px;}
.credit{position:absolute;right:24px;bottom:18px;z-index:2;text-align:right;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:rgba(255,255,255,.72);
  line-height:1.5;max-width:44ch;text-shadow:0 1px 8px rgba(0,0,0,.8);}
.credit b{color:rgba(255,255,255,.94);font-weight:500;}

/* ---------- hero buttons ---------- */
.herocta{display:flex;gap:14px;flex-wrap:wrap;}
.btn-a,.btn-b{text-decoration:none;font-weight:600;font-size:15px;padding:13px 26px;
  border-radius:3px;font-family:Roboto,sans-serif;letter-spacing:.01em;}
.btn-a{background:var(--blue);color:#fff;}
.btn-a:hover{background:#2f7fd8;}
.btn-b{background:rgba(255,255,255,.94);color:var(--navy);}
.btn-b:hover{background:#fff;}

/* ---------- search ---------- */
.findband{background:var(--navy);padding:26px 0 24px;}
.findwrap{max-width:1720px;margin:0 auto;padding:0 32px;}
.findtitle{color:#fff;font-size:19px;letter-spacing:.01em;margin:0 0 16px;text-align:center;}
.searchbox{width:100%;}
.findband .chips{justify-content:center;margin-top:14px;}
.eyebrow.mid{justify-content:center;}
h2.big.mid,.lede.mid{text-align:center;}
.lede.mid{margin-left:auto;margin-right:auto;margin-bottom:28px;}
.sform{display:flex;width:100%;background:#fff;border-radius:4px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.30);}
.sform input{flex:1;min-width:0;border:0;padding:21px 26px;font-size:17.5px;
  font-family:inherit;color:var(--navy);background:#fff;}
.sform input::placeholder{color:#8E9AAF;}
.sform input:focus{outline:none;}
.sform button{border:0;background:var(--blue);color:#fff;font-weight:600;font-size:15.5px;
  padding:0 42px;cursor:pointer;font-family:Roboto,sans-serif;letter-spacing:.02em;}
.sform button:hover{background:#2f7fd8;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center;}
.chips .lb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ondark-2);margin-right:4px;}
.chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  color:#E8EEF3;font-size:13px;padding:6px 13px;border-radius:99px;cursor:pointer;
  font-family:inherit;}
.chip:hover{background:rgba(90,148,216,.32);border-color:var(--blue-soft);}

.results{background:var(--paper);border-bottom:1px solid var(--rule);scroll-margin-top:74px;}
.results .wrap{padding:34px 24px 44px;}
.rhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.rhead h2{font-size:23px;margin:0;}
.rhead .cnt{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);}
.rhead .clr{margin-left:auto;background:none;border:0;color:var(--blue-link);
  font-size:13.5px;cursor:pointer;font-family:inherit;text-decoration:underline;}
.rlist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.rrow{background:#fff;padding:15px 18px;display:grid;
  grid-template-columns:112px minmax(0,1fr) 92px;gap:18px;align-items:start;}
.rrow .dt{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--blue-link);
  font-variant-numeric:tabular-nums;padding-top:2px;}
.rrow h4{margin:0 0 4px;font-size:15px;}
.rrow p{margin:0 0 7px;font-size:13.5px;color:var(--muted);line-height:1.5;}
.kws{display:flex;flex-wrap:wrap;gap:5px;}
.kws span{font-size:11px;background:var(--wash);color:#4A5878;padding:2px 8px;border-radius:2px;}
.kws mark,.rrow mark{background:#FFF0B8;color:inherit;padding:0 1px;}
.rrow .pr{text-align:right;font-family:Roboto,sans-serif;font-weight:700;font-size:15px;}
.rrow .pr small{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:10.5px;color:var(--muted);letter-spacing:.08em;margin-top:2px;}
.more{text-align:center;margin-top:18px;font-size:13.5px;color:var(--muted);}
.nores{background:#fff;border:1px solid var(--rule);padding:28px;font-size:15px;color:var(--muted);}
@media(max-width:700px){.rrow{grid-template-columns:1fr;gap:6px;}.rrow .pr{text-align:left;}}

/* ---------- nav search ---------- */
.navsearch{display:flex;align-items:center;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);border-radius:3px;overflow:hidden;
  margin-left:auto;max-width:280px;flex:0 1 280px;}
.navsearch input{flex:1;min-width:0;background:none;border:0;color:#fff;font-family:inherit;
  font-size:13.5px;padding:8px 12px;}
.navsearch input::placeholder{color:var(--ondark-2);}
.navsearch input:focus{outline:none;}
.navsearch button{background:none;border:0;color:var(--ondark);cursor:pointer;
  padding:8px 11px;font-size:13px;font-family:inherit;}
.navsearch button:hover{color:#fff;}
@media(max-width:900px){.navsearch{max-width:none;flex:1 1 100%;order:4;margin-left:0;}}

/* ---------- results page ---------- */
.resbar{background:var(--navy);padding:26px 0 30px;}
.resbar .findwrap{padding-top:0;}
.reshead{max-width:1720px;margin:0 auto;padding:22px 32px 0;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.reshead h1{color:#fff;font-size:24px;margin:0;}
.reshead .cnt{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ondark-2);}
.reshead .sorter{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ondark-2);}
.reshead select{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:inherit;font-size:13px;padding:6px 10px;border-radius:3px;}
.resbody{max-width:1720px;margin:0 auto;padding:34px 32px 60px;}
/* Justified rows. Each row is one height, every picture keeps its own
   width, so nothing is cropped and both edges of the row still line up.
   Widths are set in JS from the real pixel sizes we already hold. */
.resgrid{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.resgrid > .rc{flex:0 0 auto;}
.resgrid > .emptyres{flex:1 1 100%;}
.rc{border:1px solid var(--rule);background:#fff;display:block;
  text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;}
.rc:hover{box-shadow:0 14px 34px rgba(30,42,58,.17);transform:translateY(-2px);}
.rc .th{position:relative;overflow:hidden;background:#EDEAF4;aspect-ratio:4/3;}
/* The picture is the whole card, so the caption sits over it. There is no
   room for a column of text under a portrait plate 105px wide, which is what
   a justified row makes them. */
.rc .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 10px 9px;
  color:#fff;font-size:12px;line-height:1.35;
  background:linear-gradient(to top,rgba(14,22,32,.92) 12%,rgba(14,22,32,.72) 55%,rgba(14,22,32,0));
  opacity:0;transition:opacity .18s ease;pointer-events:none;}
.rc .cap b{display:block;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.rc .cap i{display:block;font-style:normal;margin-top:3px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.07em;
  color:rgba(255,255,255,.72);}
.rc:hover .cap,.rc:focus-visible .cap{opacity:1;}
/* No hover on a touch screen, so the caption stays put there. */
@media (hover:none){
  .rc .cap{opacity:1;padding-top:20px;font-size:11.5px;}
  .rc .cap b{-webkit-line-clamp:2;}
}
.rc .th img{width:100%;height:100%;object-fit:cover;display:block;}
.rc .dt{position:absolute;left:0;bottom:0;background:rgba(14,22,32,.86);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;padding:3px 8px;}
.rc .bd{padding:11px 12px 12px;display:flex;flex-direction:column;flex:1;gap:7px;}
.rc h3{margin:0;font-size:13.5px;line-height:1.35;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;}
.rc p{margin:0;font-size:12px;color:var(--muted);line-height:1.45;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;}
.rc .kw{display:flex;flex-wrap:wrap;gap:4px;}
.rc .kw span{font-size:10px;background:var(--wash);color:#4A5878;padding:2px 6px;}
.rc .buy{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:9px;margin-top:2px;}
.rc .buy b{font-family:Roboto,sans-serif;font-size:14px;}
.rc .buy span{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--blue-link);
  letter-spacing:.09em;}
.rc mark{background:#FFF0B8;color:inherit;padding:0 1px;}
.loadmore{display:block;margin:30px auto 0;background:#fff;border:1px solid var(--rule);
  color:var(--navy);font-family:Roboto,sans-serif;font-weight:700;font-size:14px;
  padding:13px 34px;cursor:pointer;}
.loadmore:hover{background:var(--wash);}
.emptyres{border:1px solid var(--rule);background:#fff;padding:34px;font-size:15px;
  color:var(--muted);max-width:70ch;}

/* ---------- single image page ---------- */
.crumb{background:var(--navy);padding:13px 0;}
.crumb .findwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ondark-2);
  letter-spacing:.06em;}
.crumb a{color:var(--blue-soft);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
/* ============================ THE IMAGE PAGE ============================
   A fluid picture on the left and a fixed rail on the right, Alamy's shape.
   The rail is a little wider than before and the picture a little shorter:
   at 74vh the plate dwarfed everything beside it, and the page read as a
   photograph with some small print next to it rather than as a listing. */
/* Top padding is small because the header above already provides the space.
   The picture and the licence panel start on the same line. */
.imgwrap{max-width:1720px;margin:0 auto;padding:14px 32px 0;
  display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:44px;
  align-items:start;}
@media(max-width:1080px){.imgwrap{grid-template-columns:1fr;gap:26px;}}
.plate{background:var(--navy-deeper);border:1px solid var(--rule);position:relative;
  display:flex;align-items:center;justify-content:center;min-height:320px;padding:16px;}
.plate img{max-width:100%;max-height:62vh;display:block;
  box-shadow:0 14px 44px rgba(0,0,0,.45);}
.plate .wm{position:absolute;right:14px;bottom:12px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.55);text-transform:uppercase;}

/* ---- the working bar under the plate ---- */
.platebar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--rule);border-top:0;background:#fff;
  padding:0 4px 0 14px;min-height:50px;flex-wrap:wrap;}
.pbref{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;padding:8px 0;}
.pbacts{display:flex;}
.pbacts button{background:none;border:0;font-family:Roboto,sans-serif;font-size:13.5px;
  font-weight:600;color:var(--navy);padding:14px 14px;cursor:pointer;}
.pbacts button:hover{color:var(--blue-link);background:var(--wash);}
@media(max-width:620px){
  .platebar{padding:0;justify-content:center;}
  .pbref{width:100%;text-align:center;padding:11px 0 0;}
  .pbacts{width:100%;}
  .pbacts button{flex:1;padding:15px 4px;}
}

/* ---- one details list, Alamy's shape: grey label, dark value, no boxes ---- */
/* No column gap: the label and value cells must touch, or the rule between
   rows breaks in the middle and the list looks half-drawn. The separation is
   padding inside the cells instead. */
.idet{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);
  gap:0;margin:0;font-size:14px;line-height:1.6;}
.idet dt{color:var(--muted);padding:9px 26px 9px 0;}
.idet dd{margin:0;padding:9px 0;color:#26324A;}
.idet dt,.idet dd{border-top:1px solid var(--rule);}
.idet dt:first-of-type,.idet dt:first-of-type + dd{border-top:0;padding-top:0;}
.idet .num{font-variant-numeric:tabular-nums;}
.idet .mono{font-family:"IBM Plex Mono",monospace;font-size:12.5px;word-break:break-all;}
@media(max-width:560px){
  .idet{grid-template-columns:1fr;gap:0;}
  .idet dt{padding-bottom:0;border-top:1px solid var(--rule);}
  .idet dd{padding-top:2px;border-top:0;}
  .idet dt:first-of-type + dd{border-top:0;}
}

/* ---- keywords ---- */
.kwbox{overflow:hidden;transition:max-height .25s ease;}
.kwall{display:flex;flex-wrap:wrap;gap:7px;}
.kwall button{background:var(--wash);border:1px solid var(--rule);color:#3D4A63;
  font-size:13px;padding:6px 12px;border-radius:3px;cursor:pointer;font-family:inherit;}
.kwall button:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.kwmore{background:none;border:0;padding:11px 0 0;color:var(--blue-link);
  font-family:Roboto,sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;}
.kwmore:hover{text-decoration:underline;}

/* ---- the header that announces the picture ----
   Full width, above both columns, the way Alamy does it. The page is about
   the photograph; the price is only what it costs. */
.imghead{padding:26px 0 6px;}
.imghwrap{max-width:1720px;margin:0 auto;padding:0 32px;}
.imghead .eyebrow{margin:0 0 10px;}
.imghead h1{font-size:29px;margin:0 0 9px;line-height:1.2;font-weight:600;
  letter-spacing:-.012em;max-width:34ch;}
.imghead .when{font-family:"IBM Plex Mono",monospace;font-size:13px;
  color:var(--blue-link);letter-spacing:.06em;margin-bottom:12px;}
/* The caption is measured, not stretched: a line of text seventeen hundred
   pixels wide is unreadable however much room there is for it. */
.imghead .cap{font-size:15.5px;line-height:1.6;color:#33405A;margin:0;max-width:96ch;}
@media(max-width:900px){
  .imghead{padding:22px 0 4px;}
  .imghead h1{font-size:24px;}
}

/* Numbered questions in plain English, the way Alamy asks them, because
   "Do you need a personal or a business licence?" is a question a customer
   can answer and "select a licence tier" is not. */
.licpanel{border:1px solid var(--rule);background:#fff;padding:17px 17px 15px;
  margin:0;}
.lpq{margin:0 0 10px;font-size:14px;color:var(--navy);}
.lpq b{color:var(--muted);font-weight:600;margin-right:5px;}
.licpanel .seg + .lpq{margin-top:18px;}

/* Segmented buttons rather than a radio list: the chosen one is filled, so
   the state is readable at a glance from across the room. */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;}
.seg.col{grid-template-columns:1fr;}
.seg button{display:block;width:100%;text-align:left;background:#fff;
  border:1px solid var(--rule);border-radius:3px;padding:11px 13px;cursor:pointer;
  font-family:Roboto,sans-serif;color:var(--navy);line-height:1.35;}
.seg button:hover{border-color:var(--blue);}
.seg button .sgt{display:block;font-size:14px;font-weight:600;}
.seg button .sgp{display:block;font-size:13px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums;}
.seg button .sgs{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.seg button.on .sgs{color:rgba(255,255,255,.72);}
.seg:not(.col) button{text-align:center;}
.lpmore{background:none;border:0;padding:13px 0 0;color:var(--blue-link);
  font-family:Roboto,sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;}
.lpmore:hover{text-decoration:underline;}
.lpterms{margin:9px 0 0;font-size:13px;line-height:1.62;color:var(--muted);}
.licwait{font-size:13px;color:var(--muted);margin:0;}

/* The paying half sits at the top of the panel, on the same white ground as
   the questions below it - the tinted block read as a different component
   rather than part of the same decision. A rule under it is enough. */
.lpbuy{margin:0 0 18px;padding:0 0 17px;border-bottom:1px solid var(--rule);}
.lpsum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;}
.lpsum .amt{font-family:Roboto,sans-serif;font-weight:900;font-size:32px;
  line-height:1;font-variant-numeric:tabular-nums;}
.lpsum .picked{font-family:Roboto,sans-serif;font-size:13px;font-weight:600;
  color:var(--blue-link);text-align:right;}
.lpbuy a,.lpbuy button{display:block;width:100%;box-sizing:border-box;
  text-align:center;background:var(--blue);color:#fff;border:0;
  font-family:Roboto,sans-serif;text-decoration:none;font-weight:600;
  font-size:15.5px;padding:14px;border-radius:3px;cursor:pointer;}
.lpbuy a:hover,.lpbuy button:hover{background:#2f7fd8;}
.lpbuy button:disabled{opacity:.6;cursor:default;}
/* The quieter of the two. Buying one image stays the obvious action; the
   cart is there for the person gathering several. */
.lpbuy button.lpcart{margin-top:9px;background:#fff;color:var(--blue);
  border:1px solid var(--blue);font-weight:600;font-size:14.5px;padding:12px;}
.lpbuy button.lpcart:hover{background:var(--wash);}
.lpbuy button.lpcart.in{border-color:var(--rule);color:var(--muted);background:var(--wash);}
.taxnote{margin:11px 0 0;font-size:12px;line-height:1.55;color:var(--muted);}

/* "See the whole collection" sits under the plate bar as one wide outlined
   button, the way Alamy puts "Buy the print" there. */
.collbtn{display:block;text-align:center;margin-top:12px;padding:13px;
  border:1px solid var(--rule);border-radius:3px;background:#fff;
  color:var(--navy);text-decoration:none;font-family:Roboto,sans-serif;
  font-weight:600;font-size:14.5px;}
.collbtn:hover{border-color:var(--blue);color:var(--blue-link);background:var(--wash);}

/* The rights position, once, as a footnote to the price. */
.pdline{margin:14px 0 0;font-size:12.5px;line-height:1.62;color:var(--muted);
  border-left:3px solid var(--blue);background:var(--wash);padding:11px 13px;}
.pdline b{color:var(--navy);}

/* ---- more from this collection ---- */
.morefrom{border-top:1px solid var(--rule);background:var(--wash);
  padding:30px 0 40px;margin-top:34px;}
.morerow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.morerow a{display:block;text-decoration:none;background:var(--navy-deeper);
  border:1px solid var(--rule);aspect-ratio:4/3;overflow:hidden;position:relative;}
.morerow img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease, opacity .35s ease;opacity:.92;}
.morerow a:hover img{transform:scale(1.045);opacity:1;}
@media(max-width:1100px){.morerow{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:680px){.morerow{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* ============================ THE CONTACT PAGE ========================= */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:52px;margin-top:34px;align-items:start;}
@media(max-width:920px){.contactgrid{grid-template-columns:1fr;gap:34px;}}
.cform .frow{margin-bottom:19px;}
.cform label{display:block;font-family:Roboto,sans-serif;font-size:13.5px;
  font-weight:600;margin-bottom:6px;color:var(--navy);}
.cform label .opt{font-weight:400;color:var(--muted);font-size:12.5px;}
.cform input,.cform select,.cform textarea{width:100%;box-sizing:border-box;
  font-family:inherit;font-size:15px;color:var(--navy);background:#fff;
  border:1px solid var(--rule);border-radius:3px;padding:11px 12px;}
.cform textarea{line-height:1.55;resize:vertical;min-height:130px;}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;
  border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);}
.cform .fhint{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);
  line-height:1.5;}
.cbtn{background:var(--blue);color:#fff;border:0;border-radius:3px;
  font-family:Roboto,sans-serif;font-weight:600;font-size:15.5px;padding:14px 30px;
  cursor:pointer;}
.cbtn:hover{background:#2f7fd8;}
.cbtn:disabled{opacity:.6;cursor:default;}
.cform .fine{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);
  max-width:64ch;}
/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything explicitly hidden. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.csent{border-left:3px solid var(--blue);background:var(--wash);padding:18px 20px;}
.csent b{display:block;font-family:Roboto,sans-serif;font-size:16px;margin-bottom:7px;}
.csent p{margin:0;font-size:14.5px;line-height:1.62;color:#33405A;}

.cside{border-left:1px solid var(--rule);padding-left:32px;}
@media(max-width:920px){.cside{border-left:0;padding-left:0;
  border-top:1px solid var(--rule);padding-top:26px;}}
.cside h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:26px 0 9px;font-weight:500;}
.cside h4:first-child{margin-top:0;}
.cside p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--muted);}
.cmail{font-size:0;}
.cmail a{font-family:Roboto,sans-serif;font-weight:700;font-size:19px;
  color:var(--blue-link);text-decoration:none;word-break:break-all;}
.cmail a:hover{text-decoration:underline;}
.clist{margin:0;padding-left:18px;font-size:13.5px;line-height:1.62;color:var(--muted);}
.clist li{margin-bottom:8px;}
.clist b{color:var(--navy);}
.caddr{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.8;}

/* ============================ THE LICENCES PAGE ======================== */
.steprow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  margin-top:30px;}
.step{display:flex;gap:14px;align-items:flex-start;}
.step .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue);
  color:#fff;font-family:Roboto,sans-serif;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;}
.step p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:#33405A;}
@media(max-width:820px){.steprow{grid-template-columns:1fr;gap:18px;}}

.liccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:16px;margin-top:28px;}
.liccard{border:1px solid var(--rule);background:#fff;padding:19px 20px 20px;}
.liccard b{display:block;font-family:Roboto,sans-serif;font-size:16px;
  margin-bottom:7px;line-height:1.3;}
.liccard .lcp{display:block;font-family:Roboto,sans-serif;font-weight:900;
  font-size:25px;color:var(--blue-link);line-height:1;margin-bottom:11px;
  font-variant-numeric:tabular-nums;}
.liccard p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);}
.liccard .lcper{display:block;margin-top:9px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.finep{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  max-width:104ch;}
.tlink{font-family:Roboto,sans-serif;font-weight:600;font-size:15px;
  color:var(--blue-link);text-decoration:none;}
.tlink:hover{text-decoration:underline;}

.faq{margin-top:26px;max-width:104ch;}
.faq details{border-top:1px solid var(--rule);}
.faq details:last-child{border-bottom:1px solid var(--rule);}
.faq summary{cursor:pointer;padding:15px 30px 15px 0;font-family:Roboto,sans-serif;
  font-size:15.5px;font-weight:600;color:var(--navy);position:relative;
  list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;
  font-size:20px;font-weight:400;color:var(--muted);line-height:1;}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover{color:var(--blue-link);}
.faq details p{margin:0 0 16px;font-size:14.5px;line-height:1.68;color:#33405A;
  max-width:88ch;}
.ctaband{text-align:center;}
.ctaband .lede{margin-left:auto;margin-right:auto;}

.imgcol h4,.meta h4,.morefrom h4{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin:30px 0 11px;font-weight:500;}
.morefrom h4{margin:0 0 14px;}
.meta h4{margin:26px 0 11px;}
.licence{background:var(--wash);border-top:1px solid var(--rule);padding:48px 0 56px;}
.licence .findwrap{max-width:1720px;}
.liccols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:26px;}
@media(max-width:900px){.liccols{grid-template-columns:1fr;}}
.lic b{display:block;font-family:Roboto,sans-serif;font-size:15px;margin-bottom:7px;}
.lic p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.lic ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.7;}

/* ---------- account + lightbox chrome ---------- */
.navtools{display:flex;align-items:center;gap:10px;margin-left:14px;}
.lbbtn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-family:inherit;font-size:13px;
  padding:7px 13px;border-radius:3px;cursor:pointer;white-space:nowrap;}
.lbbtn:hover{background:rgba(90,148,216,.30);border-color:var(--blue-soft);}
.lbbtn .n{background:var(--blue);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:11px;min-width:19px;text-align:center;padding:1px 5px;border-radius:99px;}
.whobtn{background:none;border:0;color:var(--ondark);font-family:inherit;font-size:13px;
  cursor:pointer;padding:7px 4px;white-space:nowrap;}
.whobtn:hover{color:#fff;text-decoration:underline;}
@media(max-width:900px){.navtools{margin-left:0;}}

/* the + on a result card */
.rc .add{position:absolute;right:7px;top:7px;z-index:3;width:30px;height:30px;
  border-radius:99px;border:1px solid rgba(255,255,255,.55);background:rgba(14,22,32,.72);
  color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;font-family:Roboto,sans-serif;}
.rc .add:hover{background:var(--blue);border-color:var(--blue);}
.rc .add.in{background:#2E8B57;border-color:#2E8B57;}

/* forms */
.formwrap{max-width:1720px;margin:0 auto;padding:52px 32px 64px;}
.panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:940px;}
@media(max-width:780px){.panes{grid-template-columns:1fr;gap:32px;}}
.pane{border:1px solid var(--rule);background:#fff;padding:28px 26px 30px;}
.pane h2{font-size:21px;margin:0 0 6px;}
.pane .hint{font-size:13.5px;color:var(--muted);margin:0 0 20px;line-height:1.55;}
.field{display:block;margin-bottom:15px;}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;}
.field input{width:100%;border:1px solid #D6D3E4;border-radius:3px;padding:11px 13px;
  font-family:inherit;font-size:15px;color:var(--navy);background:#fff;}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,114,196,.15);}
.btn{width:100%;background:var(--blue);color:#fff;border:0;border-radius:3px;padding:13px;
  font-family:Roboto,sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
.btn:hover{background:#2f7fd8;}
.btn:disabled{opacity:.55;cursor:default;}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--rule);}
.btn.ghost:hover{background:var(--wash);}
.btn.danger{background:#fff;color:var(--red);border:1px solid #E7C4BF;}
.btn.danger:hover{background:#FBF0EE;}
.linkish{background:none;border:0;color:var(--blue-link);font-family:inherit;font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline;}
.msg{font-size:13.5px;padding:11px 13px;border-radius:3px;margin-bottom:16px;line-height:1.5;}
.msg.bad{background:#FBF0EE;border:1px solid #E7C4BF;color:#8E2B1E;}
.msg.good{background:#EDF5EE;border:1px solid #BFDCC5;color:#1F5C33;}
.msg.info{background:var(--wash);border:1px solid var(--rule);color:#3D4A63;}
.pwnote{font-size:12.5px;color:var(--muted);margin:-8px 0 16px;line-height:1.5;}

/* lightbox page */
.lbwrap{max-width:1720px;margin:0 auto;padding:30px 32px 60px;
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:38px;align-items:start;}
@media(max-width:900px){.lbwrap{grid-template-columns:1fr;gap:26px;}}
.lbside h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:500;}
.lblist{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
.lblist button{text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:9px 12px;cursor:pointer;font-family:inherit;font-size:14px;color:var(--navy);
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.lblist button:hover{background:var(--wash);}
.lblist button.on{background:var(--wash);border-left-color:var(--blue);font-weight:600;}
.lblist button i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--muted);}
.lbhead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.lbhead h1{font-size:26px;margin:0;}
.lbhead .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.lbhead .acts button{background:#fff;border:1px solid var(--rule);color:var(--navy);
  font-family:inherit;font-size:13px;padding:7px 13px;border-radius:3px;cursor:pointer;}
.lbhead .acts button:hover{background:var(--wash);}
.lbmeta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);
  margin-bottom:22px;}
.sharebar{background:var(--wash);border:1px solid var(--rule);padding:13px 15px;
  margin-bottom:22px;font-size:13.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.sharebar code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:#fff;
  border:1px solid var(--rule);padding:5px 9px;word-break:break-all;}
.lbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}
.lbcard{border:1px solid var(--rule);background:#fff;position:relative;}
.lbcard .th{aspect-ratio:4/3;overflow:hidden;background:#EDEAF4;display:block;}
.lbcard .th img{width:100%;height:100%;object-fit:cover;display:block;}
.lbcard .cap{padding:9px 11px 11px;font-size:12.5px;line-height:1.4;}
.lbcard .cap b{display:block;font-weight:700;margin-bottom:3px;}
.lbcard .cap span{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:10.5px;}
.lbcard .rm{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:99px;
  border:1px solid rgba(255,255,255,.5);background:rgba(14,22,32,.74);color:#fff;
  cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0;}
.lbcard .rm:hover{background:var(--red);border-color:var(--red);}
.blank{border:1px dashed var(--rule);background:var(--paper);padding:34px;text-align:center;
  color:var(--muted);font-size:14.5px;line-height:1.6;}
.blank a{font-weight:600;}

/* account */
.acctgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;max-width:1000px;}
@media(max-width:780px){.acctgrid{grid-template-columns:1fr;}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);
  background:var(--navy-deeper);color:#fff;padding:13px 22px;border-radius:4px;font-size:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.34);z-index:200;max-width:90vw;
  /* An empty toast is only its own padding tall - 26px - and translateY(120%)
     is a percentage of THAT, so it slid down 31px from a resting point 26px
     above the bottom of the window and left a small dark square showing on
     every page. Hiding it outright does not depend on its height. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .28s ease, opacity .28s ease, visibility .28s;}
.toast.up{transform:translateX(-50%) translateY(0);
  opacity:1;visibility:visible;pointer-events:auto;}

/* ---------- larger view ---------- */
.plate{cursor:zoom-in;}
.plate .zoomhint{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;
  gap:7px;background:rgba(14,22,32,.78);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;pointer-events:none;}
.zoomwrap{position:fixed;inset:0;z-index:300;background:#080D13;
  display:none;flex-direction:column;}
.zoomwrap.open{display:flex;}
.zoombar{display:flex;align-items:center;gap:12px;padding:9px 18px;flex-wrap:wrap;
  background:#0E1620;border-bottom:1px solid rgba(255,255,255,.12);flex:none;}
.zoombar .ttl{color:#fff;font-family:Roboto,sans-serif;font-weight:700;font-size:14px;
  margin-right:auto;max-width:52ch;}
.zoombar .ttl small{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:10.5px;color:var(--ondark-2);letter-spacing:.05em;margin-top:3px;}
.zbtn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-family:inherit;font-size:13px;padding:8px 14px;border-radius:3px;cursor:pointer;
  white-space:nowrap;text-decoration:none;}
.zbtn:hover{background:rgba(90,148,216,.34);border-color:var(--blue-soft);}
.zbtn.close{font-size:18px;line-height:1;padding:5px 13px;}
/* Sized to the window WIDTH and allowed to scroll, so it is properly bigger
   than the page copy on any screen. Capped at the file's real width so it is
   never blown up. */
.zstage{flex:1;overflow:auto;position:relative;background:#0B1119;padding:18px;
  display:flex;justify-content:center;align-items:flex-start;}
.zstage img{width:min(100%,1600px);height:auto;max-width:1600px;display:block;
  box-shadow:0 18px 60px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none;}
.zfoot{padding:7px 18px;background:#0E1620;flex:none;font-size:12px;
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--ondark-2);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;}
.zfoot a{color:var(--blue-soft);}
.zloading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ondark-2);font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;}
@media(max-width:700px){.zoombar .ttl{font-size:13.5px;width:100%;}}

/* ---------- one collection ---------- */
.card.live{cursor:pointer;text-decoration:none;color:inherit;display:block;}
.card.live:hover{transform:translateY(-3px);}
.card .ready{position:absolute;left:12px;bottom:12px;background:var(--blue);
  color:#fff;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;}
.chero{position:relative;min-height:clamp(320px,46vw,520px);display:flex;
  align-items:flex-end;overflow:hidden;background:#0B1119;}
.chero img,.chero video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(.15) contrast(1.05);}
.chero video{opacity:0;transition:opacity 1.6s ease-in-out;}
.chero video.on{opacity:1;}
@media(prefers-reduced-motion:reduce){.chero video{display:none!important;}}
.chero .veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,13,19,.94) 0%,rgba(8,13,19,.72) 48%,rgba(8,13,19,.28) 100%);}
.chero .in{position:relative;padding:clamp(28px,5vw,64px);max-width:62ch;}
.chero .eyebrow{color:var(--blue-soft);}
.chero h1{color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(30px,5.2vw,56px);line-height:1.06;margin:8px 0 10px;}
.chero .sub{color:var(--ondark-2);font-size:clamp(15px,2vw,19px);margin:0 0 20px;}
.chero .buy{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
/* .btn is written for <button>; as a link it needs the anchor styling undone
   and a sane width, or it stretches the whole hero and shows an underline. */
a.btn{width:auto;display:inline-block;text-decoration:none;text-align:center;
  padding:14px 26px;}
a.btn:hover{text-decoration:none;}
.chero .price{color:#fff;font-family:Georgia,serif;font-size:32px;}
.chero .price small{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--ondark-2);letter-spacing:.08em;margin-top:2px;}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);}
.cstats div{background:var(--navy-deep);padding:18px 16px;}
.cstats b{display:block;color:#fff;font-family:Georgia,serif;font-size:26px;line-height:1;}
.cstats span{display:block;color:var(--ondark-2);font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:7px;}
.croute{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:26px;}
/* The intro used to be one 62ch column with the rest of the band left white.
   A picture from the collection now sits in that space. */
.cintro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,44%);
  gap:44px;align-items:start;}
.cintro .lede{max-width:62ch;}
.cintro #c-why{max-width:62ch;}
.cintro-fig{margin:0;}
.cintro-fig a{display:block;border:1px solid var(--rule);background:#EDEAF4;line-height:0;}
.cintro-fig img{width:100%;height:auto;display:block;}
.cintro-fig figcaption{font-size:12px;color:var(--muted);line-height:1.45;margin-top:9px;}
@media (max-width:900px){
  .cintro{grid-template-columns:1fr;gap:26px;}
  .cintro-fig{max-width:none;}
}
.croute .leg{border-top:2px solid var(--blue);padding-top:12px;}
.croute .leg b{display:block;font-family:Georgia,serif;font-size:19px;margin-bottom:5px;}
.croute .leg span{font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.csamp{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.csamp a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#0B1119;}
.csamp img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.csamp a:hover img{transform:scale(1.06);}
.csamp .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;color:#fff;
  font-size:12px;line-height:1.35;
  background:linear-gradient(180deg,rgba(8,13,19,0),rgba(8,13,19,.9));}
.cprov{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;}
.provtable{width:100%;border-collapse:collapse;margin-top:10px;}
.provtable th,.provtable td{text-align:left;padding:9px 0;border-bottom:1px solid var(--rule);
  font-size:14px;vertical-align:top;}
.provtable th{width:38%;color:var(--ink-2);font-weight:400;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;padding-right:14px;}
.getlist{list-style:none;margin:12px 0 0;padding:0;}
.getlist li{position:relative;padding:0 0 11px 26px;font-size:14.5px;line-height:1.55;}
.getlist li:before{content:"";position:absolute;left:2px;top:7px;width:9px;height:9px;
  background:var(--blue);}
.cnote{border-left:3px solid var(--blue-soft);padding:2px 0 2px 16px;margin-top:22px;
  color:var(--ink-2);font-size:14px;line-height:1.6;}
.cbuy{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px;}
.cbuy .big-price{font-family:Georgia,serif;font-size:42px;color:#fff;line-height:1;}
.cbuy .per{color:var(--ondark-2);font-size:13px;}
@media(max-width:940px){
  .cstats{grid-template-columns:repeat(2,1fr);}
  .croute{grid-template-columns:repeat(2,1fr);}
  .csamp{grid-template-columns:repeat(2,1fr);}
  .cprov{grid-template-columns:1fr;}
}

/* ---------- purchases ---------- */
.purch{border:1px solid var(--rule);padding:14px 16px;margin-bottom:10px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.purch .who{flex:1;min-width:220px;}
.purch b{display:block;font-family:Georgia,serif;font-size:17px;}
.purch small{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11.5px;}
.purch .dlbtn{background:var(--blue);color:#fff;border:0;border-radius:3px;
  padding:11px 20px;font-family:Roboto,sans-serif;font-weight:700;font-size:14px;
  cursor:pointer;white-space:nowrap;}
.purch .dlbtn:hover{background:#2f7fd8;}
.purch .dlbtn:disabled{opacity:.55;cursor:default;}
.nopurch{color:var(--muted);font-size:14.5px;line-height:1.6;}
/* One block per order, so eight images bought together read as one purchase
   rather than eight unrelated ones. */
.ordgrp{margin-bottom:26px;}
.ordhead{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;padding:0 0 9px;margin-bottom:10px;border-bottom:2px solid var(--ink);}
.ordhead b{font-family:Roboto,sans-serif;font-size:15px;display:block;}
.ordhead small{display:block;color:var(--muted);font-family:"IBM Plex Mono",monospace;
  font-size:11px;margin-top:2px;}
.dlall{background:none;border:1px solid var(--blue);color:var(--blue);
  font-family:Roboto,sans-serif;font-weight:600;font-size:13.5px;padding:9px 17px;
  border-radius:3px;cursor:pointer;white-space:nowrap;}
.dlall:hover{background:var(--blue);color:#fff;}
.dlall:disabled{opacity:.6;cursor:default;background:none;color:var(--muted);
  border-color:var(--rule);}

/* ---------- the cart ---------- */
/* A quiet count until there is something in it. A red badge on an empty cart
   is a nag; a lit one on a full cart is information. */
.cartbtn .n{background:rgba(255,255,255,.16);}
.cartbtn.has .n{background:var(--blue);}

.crow{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--rule);
  padding:13px 15px;margin-bottom:10px;flex-wrap:wrap;}
.crow.gone{opacity:.6;background:var(--wash);}
.crow .cth{width:88px;height:64px;flex:0 0 88px;background:#0E1420;overflow:hidden;
  border-radius:2px;}
.crow .cth img{width:100%;height:100%;object-fit:cover;display:block;}
.crow .cmid{flex:1;min-width:230px;}
.crow .cmid b{display:block;font-family:Georgia,serif;font-size:16.5px;line-height:1.35;}
.crow .cref{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px;
  margin-top:3px;}
.crow select{margin-top:8px;width:100%;max-width:330px;font-family:inherit;
  font-size:13.5px;padding:8px 9px;border:1px solid var(--rule);border-radius:3px;
  background:#fff;color:inherit;}
.crow .cend{text-align:right;min-width:104px;display:flex;flex-direction:column;
  align-items:flex-end;gap:7px;}
.crow .cmoney{font-family:Roboto,sans-serif;font-weight:700;font-size:17px;}
.crow .cdrop{background:none;border:0;color:var(--muted);font-family:inherit;
  font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline;}
.crow .cdrop:hover{color:#8E2B1E;}
.cgone{color:#8E2B1E;font-size:12.5px;margin-top:6px;}

.cbulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 15px;background:var(--wash);border:1px solid var(--rule);
  margin-bottom:16px;font-size:13.5px;}
.cbulk select{font-family:inherit;font-size:13.5px;padding:7px 9px;
  border:1px solid var(--rule);border-radius:3px;background:#fff;color:inherit;}

.csum{border:1px solid var(--rule);padding:16px 18px;margin-top:18px;}
.csum .line{display:flex;justify-content:space-between;align-items:baseline;
  font-size:15px;margin-bottom:6px;}
.csum .line.tot{font-family:Roboto,sans-serif;font-weight:700;font-size:22px;
  margin:10px 0 4px;}
.csum .taxnote{color:var(--muted);font-size:12.5px;line-height:1.55;margin:8px 0 14px;}
.csum .btn{width:100%;}
.cempty{color:var(--muted);font-size:14.5px;line-height:1.65;}
.cclear{background:none;border:0;color:var(--muted);font-family:inherit;
  font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0;margin-top:12px;}
.licline{margin-top:7px;}
.lictag{display:inline-block;background:var(--wash);border:1px solid var(--rule);
  border-radius:2px;padding:2px 8px;font-family:Roboto,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;}
.licmore{background:none;border:0;padding:0 0 0 6px;color:var(--blue-link);
  font-size:11.5px;cursor:pointer;text-decoration:underline;}
.licfull{margin:8px 0 0;font-size:12.5px;line-height:1.62;color:var(--muted);
  max-width:62ch;}

/* ---------- counters ---------- */
.scale{background:var(--navy);color:#fff;border-top:1px solid var(--rule-dark);}
.scale .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 24px;}
.sc{padding:30px 26px 30px 0;border-right:1px solid var(--rule-dark);}
.sc:first-child{padding-left:0;}
.sc:last-child{border-right:0;}
.sc b{display:block;font-family:Roboto,sans-serif;font-weight:900;font-size:34px;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.sc span{display:block;font-size:13px;color:var(--ondark-2);margin-top:8px;max-width:24ch;}
@media(max-width:820px){.scale .wrap{grid-template-columns:repeat(2,1fr);}
  .sc{border-right:0;padding:22px 20px 22px 0;}}

/* ---------- generic sections ---------- */
section.band{padding:74px 0;}
.band.tint{background:var(--wash);}
.band.dark{background:var(--navy);color:#fff;}
.band.dark h2{color:#fff;}
.band.dark .lede{color:var(--ondark);}
h2.big{font-size:clamp(27px,3.5vw,40px);margin:0 0 16px;letter-spacing:-.015em;}
.lede{font-size:17px;color:var(--muted);max-width:62ch;margin:0 0 34px;}
.eyebrow.lt{color:var(--blue-link);}
.eyebrow.lt::before{background:var(--blue-link);}

/* ---------- collection cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px;}
.card{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column;
  transition:box-shadow .22s,transform .22s;}
.card:hover{box-shadow:0 16px 40px rgba(30,42,58,.15);transform:translateY(-3px);}
.card .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deeper);}
.card .im>video,.card .im>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card .im>.bg{background-size:cover;background-position:center;
  animation:drift 26s ease-in-out infinite alternate;transform-origin:center;}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0);}
                 to{transform:scale(1.13) translate3d(-1.6%,1.2%,0);}}
.card .flag{position:absolute;left:10px;top:10px;z-index:2;background:rgba(14,22,32,.82);
  color:#fff;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 9px;}
.card .bd{padding:17px 18px 16px;display:flex;flex-direction:column;flex:1;}
.card .yr{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  letter-spacing:.09em;margin-bottom:6px;}
.card h3{margin:0 0 7px;font-size:17px;}
.card p{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.55;flex:1;}
.card .ft{display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:12px;}
.card .ct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);}
.card .pr{font-family:Roboto,sans-serif;font-weight:700;font-size:17px;}
.nations{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;}
.nations span{border:1px solid var(--rule);background:#fff;border-radius:99px;
  padding:6px 15px;font-size:13px;color:#3D4A63;}

/* ---------- map viewer ---------- */
.mapwrap{background:var(--navy-deeper);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(14,22,32,.42);}
.mapstage{position:relative;width:100%;aspect-ratio:3/2;background:#1a1408;overflow:hidden;}
.mapstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.05s ease-in-out;}
.mapstage img.on{opacity:1;}
.mapstage .fade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 90% at 50% 46%,rgba(0,0,0,0) 52%,rgba(14,22,32,.55) 100%);}
.stamp{position:absolute;left:0;bottom:0;right:0;z-index:3;padding:20px 22px 18px;
  background:linear-gradient(to top,rgba(14,22,32,.94),rgba(14,22,32,.72) 55%,rgba(14,22,32,0));}
.stamp .dl{font-family:Roboto,sans-serif;font-weight:900;font-size:22px;color:#fff;
  letter-spacing:-.01em;margin-bottom:5px;}
.stamp .tx{font-size:14px;color:var(--ondark);max-width:80ch;line-height:1.5;}
.stamp .rf{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ondark-2);
  margin-top:8px;letter-spacing:.04em;word-break:break-all;}
.mapbar{display:flex;align-items:center;gap:18px;padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.10);flex-wrap:wrap;}
.pbtn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-family:Roboto,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.06em;
  padding:8px 18px;cursor:pointer;text-transform:uppercase;}
.pbtn:hover{background:rgba(255,255,255,.18);}
.ticks{display:flex;gap:0;flex:1;min-width:280px;position:relative;}
.tick{flex:1;background:none;border:0;cursor:pointer;padding:14px 0 6px;position:relative;}
.tick::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;
  background:rgba(255,255,255,.16);}
.tick::after{content:"";position:absolute;left:50%;top:9px;width:11px;height:11px;
  margin-left:-5.5px;border-radius:99px;background:#4A5A70;border:2px solid var(--navy-deeper);
  transition:background .3s,transform .3s;}
.tick.on::after{background:var(--blue-soft);transform:scale(1.35);}
.tick.past::after{background:#8FA3BC;}
.tick span{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  color:var(--ondark-2);text-align:center;margin-top:8px;white-space:nowrap;}
.tick.on span{color:#fff;}
.legend{display:flex;gap:16px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ondark-2);align-items:center;}
.legend i{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:6px;}
@media(max-width:760px){.tick span{display:none;}.mapbar{gap:12px;}}

/* ---------- prep / provenance ---------- */
.prepgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;
  align-items:start;max-width:880px;}
@media(max-width:640px){.prepgrid{grid-template-columns:1fr;}}
.pitem b{display:block;font-family:Roboto,sans-serif;font-size:16px;margin-bottom:6px;color:#fff;}
.pitem span{font-size:14px;color:var(--ondark-2);line-height:1.6;}

/* ---------- feature strip ---------- */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
@media(max-width:900px){.feat{grid-template-columns:1fr;}}
.fcard{border:1px solid var(--rule);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow .22s,transform .22s;}
.fcard:hover{box-shadow:0 16px 40px rgba(30,42,58,.15);transform:translateY(-3px);}
.fcard .im{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-deeper);}
.fcard .im>video,.fcard .im>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fcard .im>.bg{background-size:cover;background-position:center;
  animation:drift 30s ease-in-out infinite alternate;}
.fcard .bd{padding:18px 20px 20px;}
.fcard h3{margin:0 0 7px;font-size:18px;}
.fcard p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;}
.fcard .go{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;
  color:var(--blue-link);}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
/* The blue treatment is ONLY a hover state. No card is lit by default:
   picking a favourite for the customer made the other three look inert, and
   the row now responds evenly to wherever the pointer actually is.
   An inset shadow rather than a thicker border, so nothing shifts by a pixel
   when the highlight arrives. */
.tier{border:1px solid var(--rule);background:#fff;padding:24px 22px 26px;
  display:flex;flex-direction:column;transition:box-shadow .18s ease,
  border-color .18s ease, transform .18s ease;}
.tier:hover,.tier:focus-within{border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue),0 8px 26px rgba(16,42,80,.10);
  transform:translateY(-2px);}
.tier .tl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.tier:hover .tl,.tier:focus-within .tl{color:var(--blue-link);}
.tier .amt{font-family:Roboto,sans-serif;font-weight:900;font-size:34px;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:12px;}
.tier p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;flex:1;}
.tier .buy{margin-top:20px;display:block;text-align:center;background:var(--navy);color:#fff;
  text-decoration:none;font-weight:600;font-size:14px;padding:12px;border-radius:3px;}
.tier:hover .buy,.tier:focus-within .buy{background:var(--blue);}
.tier .buy:hover{filter:brightness(1.12);}

.howrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:46px;}
@media(max-width:820px){.howrow{grid-template-columns:1fr;}}
.how b{display:block;font-family:Roboto,sans-serif;font-size:15.5px;margin-bottom:6px;}
.band.dark .how b{color:#fff;}
.band.dark .how span{color:var(--ondark-2);}
.band.dark .how .n{color:var(--blue-soft);}
.how span{font-size:14px;color:var(--muted);line-height:1.6;}
.how .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--blue-link);
  letter-spacing:.14em;display:block;margin-bottom:8px;}

/* ---------- footer ---------- */
footer{background:var(--navy-deeper);color:var(--ondark-2);padding:46px 0 40px;font-size:13.5px;}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;}
@media(max-width:820px){footer .cols{grid-template-columns:1fr;}}
footer a{color:#B9C8D6;}
footer .sisters{list-style:none;margin:7px 0 0;padding:0;line-height:1.85;}
footer .sisters a{text-decoration:none;}
footer .sisters a:hover{text-decoration:underline;color:#fff;}
footer .mk b{font-family:Roboto,sans-serif;font-weight:900;font-size:15px;
  letter-spacing:.135em;color:#fff;display:block;}
footer .mk span{font-size:11px;color:var(--ondark-2);}
.mockbadge{display:inline-block;background:rgba(192,138,43,.16);border:1px solid rgba(192,138,43,.5);
  color:#E0B45F;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;margin-bottom:14px;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}