/* ==========================================================================
   Quay Technologies — design system
   Concept: a quay is the built edge where ships come alongside. Quay
   Technologies is the berth; the five ventures are what is moored to it.
   The page is a harbour register: ruled, numbered, horizontal.
   ========================================================================== */

:root{
  /* ground — built on the wordmark's own #1f103b */
  --abyss:#150B2A;        /* deepest: hero, closing */
  --ink:#1F103B;          /* the wordmark colour, raised dark surface */
  --hull:#2A1A4A;         /* dark row / card */
  --chart:#F7F7FB;        /* the page's default light ground */
  --vellum:#FFFFFF;       /* raised light surface */

  /* marks */
  --signal:#6B46C1;       /* brand violet: links and primary action, on light */
  --signal-lt:#A78BFA;    /* the same signal, legible on dark */
  --accent:#8B5CF6;       /* brand violet, bright: labels and rules */
  --accent-lt:#C4B5FD;

  /* text */
  --text:#1A202C;
  --slate:#4A5568;        /* muted on light */
  --mist:#B7ABD6;         /* muted on dark */

  /* rules */
  --rule:#E2E8F0;
  --rule-strong:#CBD5E0;
  --rule-d:rgba(255,255,255,.13);
  --rule-d-strong:rgba(255,255,255,.26);

  --display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --logo-h:38px;
  --wrap:1240px;
  --gutter:clamp(20px,4vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--text);
  font-size:16.5px;
  line-height:1.62;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* the signature grid: a mono gutter on the left, content to its right */
.reg-grid{display:grid;grid-template-columns:var(--lead,88px) 1fr;gap:0 clamp(20px,3vw,44px)}

/* ---------- type ------------------------------------------------------ */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:700;
  font-stretch:122%;
  letter-spacing:-.018em;
  line-height:1.06;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.1vw,4.05rem);letter-spacing:-.028em}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.022em}
h3{font-size:1.16rem;line-height:1.25;letter-spacing:-.012em;font-stretch:114%}
p{color:var(--slate);max-width:66ch}
.on-dark p{color:var(--mist)}
.lede{font-size:1.09rem;line-height:1.6;max-width:60ch}

/* mono label — the system's connective tissue */
.tag{
  font-family:var(--mono);
  font-size:.745rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  display:block;
}
.on-dark .tag{color:var(--mist)}
.tag-accent{color:var(--accent)}
.on-dark .tag-accent{color:var(--accent-lt)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- waterline: the recurring section divider ------------------ */
/* a hairline with depth ticks hanging beneath it, like a chart margin */
.waterline{
  height:15px;
  background-image:
    linear-gradient(to bottom,var(--rule-strong) 0 1px,transparent 1px),
    repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 34px);
  background-size:100% 100%,100% 7px;
  background-repeat:no-repeat,repeat-x;
  background-position:0 0,0 0;
}
.on-dark .waterline,.waterline-d{
  background-image:
    linear-gradient(to bottom,var(--rule-d-strong) 0 1px,transparent 1px),
    repeating-linear-gradient(to right,var(--rule-d) 0 1px,transparent 1px 34px);
  background-size:100% 100%,100% 7px;
  background-repeat:no-repeat,repeat-x;
}

/* ---------- links & buttons ------------------------------------------ */
.link{
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;color:var(--signal);
  display:inline-flex;align-items:center;gap:.5rem;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .16s ease,gap .16s ease;
}
.link:hover{border-bottom-color:var(--signal);gap:.75rem}
.on-dark .link{color:var(--signal-lt)}
.on-dark .link:hover{border-bottom-color:var(--signal-lt)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.92rem 1.5rem;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-solid{background:var(--signal);color:#fff;border-color:var(--signal)}
.btn-solid:hover{background:#5B3AA6;border-color:#5B3AA6}
.btn-line{background:transparent;color:var(--text);border-color:var(--rule-strong)}
.btn-line:hover{border-color:var(--text)}
.on-dark .btn-line{color:#fff;border-color:var(--rule-d-strong)}
.on-dark .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-accent{background:var(--accent);color:#ffffff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-lt);border-color:var(--accent-lt)}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--signal-lt)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{position:static;display:inline-block;margin:10px;padding:.7rem 1.1rem;background:var(--accent);color:#ffffff;font-family:var(--mono);font-size:.8rem}

/* ---------- masthead -------------------------------------------------- */
.mast{position:sticky;top:0;z-index:60;background:var(--abyss);border-bottom:1px solid var(--rule-d)}
.mast-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.mark img{height:26px;width:auto}
.mast nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.mast nav a{font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;color:#B9BEDA;transition:color .15s ease}
.mast nav a:hover,.mast nav a[aria-current]{color:#fff}
.mast nav a[aria-current]{border-bottom:1px solid var(--accent-lt);padding-bottom:2px}
.mast-right{display:flex;align-items:center;gap:20px}
.mast-uen{font-family:var(--mono);font-size:.735rem;letter-spacing:.1em;color:#6E7495;white-space:nowrap}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger i{display:block;width:20px;height:1.5px;background:#fff;margin:4.5px 0}

/* ---------- hero ------------------------------------------------------ */
.on-dark,.mast,.foot{
  background:var(--abyss);color:#fff;
  /* light-on-dark bloats under subpixel rendering; thin it here only */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hero{position:relative;overflow:hidden;padding-top:clamp(60px,8vw,104px)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 88% -8%,rgba(107,70,193,.42),transparent 64%),
    radial-gradient(760px 460px at 4% 104%,rgba(139,92,246,.16),transparent 66%);
}
.hero > *{position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,6vw,84px);align-items:start}
.hero h1{color:#fff;margin:22px 0 26px;max-width:17ch}

/* berth plan — five equal moorings tied to one edge */
.moor{padding-top:14px}
.moor-cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--rule-d-strong);margin-bottom:6px}
.moor-list{list-style:none;position:relative;padding-left:15px}
.moor-list::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:linear-gradient(to bottom,transparent,var(--accent) 12%,var(--accent) 88%,transparent)}
.moor-list li{display:grid;align-items:center;gap:0 14px;padding:15px 0}
.cleat{width:9px;height:9px;background:var(--accent-lt);margin-left:-19px;transform:rotate(45deg)}
.rope{height:1px;background:linear-gradient(to right,var(--signal-lt),rgba(167,139,250,.24));
  transform-origin:left;animation:cast .7s cubic-bezier(.2,.7,.3,1) backwards}
.moor-list li:nth-child(1) .rope{animation-delay:.05s}
.moor-list li:nth-child(2) .rope{animation-delay:.14s}
.moor-list li:nth-child(3) .rope{animation-delay:.23s}
.moor-list li:nth-child(4) .rope{animation-delay:.32s}
.moor-list li:nth-child(5) .rope{animation-delay:.41s}
@keyframes cast{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.moor-name{font-family:var(--display);font-weight:600;font-stretch:116%;font-size:1.02rem;
  color:#EEF0FA;letter-spacing:-.012em;white-space:nowrap}
.moor-sector{font-family:var(--mono);font-size:.715rem;letter-spacing:.12em;text-transform:uppercase;color:#6E7495;white-space:nowrap;text-align:right}
.moor-list li{grid-template-columns:auto minmax(20px,1fr) 132px 92px}
.hero .lede{color:#C3C8E4}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* particulars plate — the registry data, set like a ship's plate */
.plate{
  margin-top:clamp(52px,7vw,86px);
  border-top:1px solid var(--rule-d-strong);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.plate div{padding:20px 22px 26px;border-left:1px solid var(--rule-d)}
.plate div:first-child{padding-left:0;border-left:0}
.plate dt{font-family:var(--mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:#6E7495;margin-bottom:7px}
.plate dd{font-family:var(--display);font-weight:600;font-stretch:116%;font-size:1.04rem;color:#EEF0FA;letter-spacing:-.01em;line-height:1.3}

/* ---------- sections -------------------------------------------------- */
.band{padding:clamp(62px,8vw,104px) 0}
.band:not(.on-dark){background:var(--chart)}
.band-head{margin-bottom:clamp(38px,5vw,60px)}
.band-head h2{margin:14px 0 18px}

/* ---------- the register: the page's signature block ------------------ */
.register{border-top:1px solid var(--rule-strong)}
.on-dark .register{border-top-color:var(--rule-d-strong)}
.berth{
  display:grid;
  grid-template-columns:88px minmax(0,1.05fr) minmax(0,1.15fr) auto;
  gap:0 clamp(18px,2.6vw,40px);
  align-items:start;
  padding:30px 0 32px;
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:background .18s ease;
}
.on-dark .berth{border-bottom-color:var(--rule-d)}
.berth::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.berth:hover::after,.berth:focus-within::after{transform:scaleX(1)}
.berth:hover{background:rgba(107,70,193,.045)}
.on-dark .berth:hover{background:rgba(255,255,255,.028)}
.berth-cat{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);line-height:1.5}
.on-dark .berth-cat{color:var(--signal-lt)}


.berth-name{font-family:var(--display);font-weight:700;font-stretch:124%;font-size:clamp(1.5rem,2.7vw,2.05rem);letter-spacing:-.024em;line-height:1.02}
.on-dark .berth-name{color:#fff}
.berth-what{margin-top:10px;font-size:.95rem}
.berth-body p{font-size:.95rem}
.berth-foot{margin-top:16px}
.berth-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.chip{
  font-family:var(--mono);font-size:.695rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--rule-strong);color:var(--slate);white-space:nowrap;
}
.on-dark .chip{border-color:var(--rule-d-strong);color:var(--mist)}

/* ---------- figures strip --------------------------------------------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.fig{padding:28px 26px 30px;border-left:1px solid var(--rule)}
.fig:first-child{padding-left:0;border-left:0}
.fig b{display:block;font-family:var(--display);font-weight:700;font-stretch:122%;font-size:clamp(1.9rem,3.5vw,2.7rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:10px;font-size:.88rem;color:var(--slate);max-width:22ch}
.figures-note{margin-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate)}

/* ---------- provisions (what the quay provides) ----------------------- */
.provisions{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule-d-strong)}
.prov{padding:34px 34px 38px;border-bottom:1px solid var(--rule-d);border-right:1px solid var(--rule-d)}
.prov:nth-child(2n){border-right:0}
.prov:nth-last-child(-n+2){border-bottom:0}
.prov h3{color:#fff;margin:14px 0 10px}
.prov p{font-size:.94rem}

/* ---------- editorial strip (insights) -------------------------------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-strong)}
.strip-4{grid-template-columns:repeat(4,1fr)}
.entry{padding:30px clamp(18px,1.8vw,26px) 34px;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.entry:last-child{border-right:0}
.entry:first-child{padding-left:0}
.entry h3{margin:12px 0 10px}
.entry p{font-size:.93rem;flex:1}
.entry .link{margin-top:18px;align-self:flex-start}

/* ---------- faq register ---------------------------------------------- */
.faq{border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:grid;grid-template-columns:88px 1fr auto;gap:0 clamp(18px,3vw,44px);align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq .q-no{font-family:var(--mono);font-size:.78rem;color:var(--accent);font-variant-numeric:tabular-nums}
.faq .q-txt{font-family:var(--display);font-weight:600;font-stretch:114%;font-size:1.06rem;letter-spacing:-.012em;line-height:1.3}
.faq .q-sign{font-family:var(--mono);font-size:1.15rem;color:var(--signal);line-height:1}
.faq details[open] .q-sign{color:var(--accent)}
.faq .answer{padding:0 0 26px;margin-left:calc(88px + clamp(18px,3vw,44px));font-size:.95rem;color:var(--slate);max-width:64ch}
.faq .answer a{color:var(--signal);border-bottom:1px solid rgba(107,70,193,.35)}

/* ---------- forms ----------------------------------------------------- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:.715rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.045);border:0;border-bottom:1px solid var(--rule-d-strong);
  padding:.72rem .1rem;color:#fff;font-family:var(--body);font-size:1rem;border-radius:0;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--signal-lt);background:rgba(255,255,255,.075)}
.field input::placeholder,.field textarea::placeholder{color:#666C90}
.field select{
  appearance:none;padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239BA1C0' stroke-linecap='round' stroke-width='1.6' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:19px;
}
.field select option{background:var(--ink);color:#fff}
.err{display:block;min-height:1.1rem;font-family:var(--mono);font-size:.75rem;color:#F09A9A;margin-top:5px}
.form-status{display:none;font-size:.92rem;padding:.85rem 1rem;margin-top:14px;border-left:2px solid}
.form-status.ok{display:block;background:rgba(167,139,250,.10);border-color:var(--signal-lt);color:#DDD3F7}
.form-status.bad{display:block;background:rgba(240,154,154,.09);border-color:#F09A9A;color:#F3B4B4}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

/* ---------- closing --------------------------------------------------- */
.closing{position:relative;overflow:hidden;padding:clamp(62px,8vw,100px) 0 0}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(880px 460px at 84% 24%,rgba(107,70,193,.34),transparent 64%)}
.closing > *{position:relative}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,6vw,86px);align-items:start;padding-bottom:clamp(56px,7vw,88px)}
.closing h2{color:#fff;margin-bottom:16px}
.particulars{margin-top:30px;border-top:1px solid var(--rule-d);padding-top:20px;
  font-family:var(--mono);font-size:.8rem;line-height:2;color:var(--mist)}
.particulars a{color:#fff;border-bottom:1px solid var(--rule-d-strong)}
.particulars a:hover{border-bottom-color:#fff}

/* ---------- footer ---------------------------------------------------- */
.foot{background:var(--ink);border-top:1px solid var(--rule-d)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:34px var(--gutter) 40px;
  display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-start;justify-content:space-between}
.foot img{height:20px;opacity:.78}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-links a{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--mist)}
.foot-links a:hover{color:#fff}
.foot-legal{font-family:var(--mono);font-size:.745rem;letter-spacing:.05em;color:#5F6588}

/* ---------- responsive ------------------------------------------------ */
@media (max-width:1020px){
  .hero-top{grid-template-columns:1fr;gap:44px}
  .moor{padding-top:0}
  .berth{grid-template-columns:64px 1fr;gap:0 24px}
  .berth-body{grid-column:2;margin-top:14px}
  .berth-side{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;margin-top:16px}
  .plate{grid-template-columns:repeat(3,1fr)}
  .plate div:nth-child(4){padding-left:0;border-left:0}
  .strip{grid-template-columns:1fr}
  .entry{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .entry:last-child{border-bottom:0}
  .closing-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .moor-list li{grid-template-columns:auto minmax(14px,1fr) auto auto;gap:0 12px}
  .moor-name{font-size:.94rem}
  .mast nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--abyss);border-bottom:1px solid var(--rule-d);padding:6px var(--gutter) 18px}
  .mast nav.open{display:flex}
  .mast nav a{display:block;width:100%;padding:13px 0;font-size:.86rem}
  .burger{display:block;margin-right:-10px}
  .mast-uen{display:none}
  .mast{position:relative}
  .figures{grid-template-columns:1fr 1fr}
  .fig{padding:22px 18px 24px;border-left:1px solid var(--rule)}
  .fig:nth-child(odd){padding-left:0;border-left:0}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .plate{grid-template-columns:1fr 1fr}
  .plate div{padding:16px 16px 20px}
  .plate div:nth-child(odd){padding-left:0;border-left:0}
  .provisions{grid-template-columns:1fr}
  .prov{padding:26px 0 30px;border-right:0}
  .prov:nth-last-child(2){border-bottom:1px solid var(--rule-d)}
  .form-row{grid-template-columns:1fr;gap:0}
  .faq summary{grid-template-columns:44px 1fr auto;gap:0 16px}
  .faq .answer{margin-left:60px}
  .berth{grid-template-columns:44px 1fr;gap:0 16px;padding:26px 0 28px}
  .berth-cat{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ==========================================================================
   Media page — the record, as a register of appearances
   ========================================================================== */
.record{border-top:1px solid var(--rule-strong)}
.appearance{
  display:grid;
  grid-template-columns:72px 208px minmax(0,1fr) auto;
  gap:0 clamp(18px,2.6vw,38px);
  align-items:start;
  padding:26px 0 28px;
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:background .18s ease;
}
.appearance::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.appearance:hover::after,.appearance:focus-within::after{transform:scaleX(1)}
.appearance:hover{background:rgba(107,70,193,.045)}
.ap-kind{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);line-height:1.5}

.ap-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#DEDBD2;border:1px solid var(--rule)}
.ap-thumb img{width:100%;height:100%;object-fit:cover}
.ap-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,12,27,.34)}
.ap-play i{width:34px;height:34px;background:var(--accent-lt);display:grid;place-items:center}
.ap-play svg{width:13px;height:13px;fill:#ffffff;margin-left:2px}
.ap-title{font-family:var(--display);font-weight:700;font-stretch:118%;font-size:1.28rem;letter-spacing:-.018em;line-height:1.16}
.ap-outlet{font-family:var(--mono);font-size:.735rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);margin:9px 0 10px}
.appearance p{font-size:.93rem}
.ap-link{margin-top:14px}
.ap-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}

@media (max-width:1020px){
  .appearance{grid-template-columns:60px 168px minmax(0,1fr)}
  .ap-side{grid-column:3;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;margin-top:14px}
}
@media (max-width:680px){
  .appearance{grid-template-columns:44px minmax(0,1fr);gap:0 16px;padding:24px 0 26px}
  .ap-thumb{grid-column:2;margin-bottom:16px;max-width:340px}
  .ap-body{grid-column:2}
  .ap-side{grid-column:2}
  .ap-kind{font-size:.92rem}
  .ap-title{font-size:1.14rem}
}

/* ==========================================================================
   Motion
   Everything settles into place the way entries land in a register: short
   travel, no bounce, staggered down the page. Gated on .js so that with
   JavaScript off — or for a crawler — every element is simply visible.
   ========================================================================== */
/* The scroll reveal was removed at the client's request: sections are simply
   present. Only the hero still animates, once, on load. */

/* hero: one orchestrated entrance rather than scattered effects */
.js .hero-top > div > *{
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.js .plate div{
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1)}
.js:not(.ready) .hero-top > div > *{opacity:0;transform:translateY(18px)}
.js:not(.ready) .plate div{opacity:0;transform:translateY(14px)}

/* masthead firms up once you leave the top */
.mast{transition:background .3s ease,border-color .3s ease}
.mast.stuck{background:rgba(10,12,27,.92);backdrop-filter:blur(12px);border-bottom-color:var(--rule-d-strong)}

/* the closing left column no longer floats above dead space */
.closing-grid > div:first-child{display:flex;flex-direction:column;height:100%}
.closing-grid .particulars{margin-top:auto}

@media (prefers-reduced-motion:reduce){
  .js .hero-top > div > *,.js .plate div{opacity:1!important;transform:none!important}
  .rope{animation:none}
}

/* ==========================================================================
   Refinements — row alignment, interaction states, small screens
   ========================================================================== */

/* --- register rows ----------------------------------------------------- */
/* The name column was short and the description column ran to five lines, so
   every row carried ~100px of dead space on the left. Rebalancing the two
   fr columns shortens the description and closes most of the gap; a small
   nudge lines the description's cap-height up with the name's. */
@media (min-width:1021px){
  .berth{
    grid-template-columns:80px minmax(0,.82fr) minmax(0,1.55fr) auto;
    align-items:start;
    padding:28px 0 30px;
  }
  .berth-body{margin-top:5px}
  .berth-side{padding-top:7px}
  .berth-foot{margin-top:14px}
}
.berth-what{margin-top:11px}

/* Appearance rows carry an image, which has no useful baseline — align the
   thumbnail's top edge to the title's cap instead. */
.appearance{align-items:start}
.ap-thumb{margin-top:5px}
.ap-kind{padding-top:3px}
.ap-side{padding-top:4px}

/* --- links: the arrow now lives in CSS, so it can move ----------------- */
.link{gap:0}
.link::after{
  content:"\2192";
  margin-left:.5rem;
  transition:transform .2s cubic-bezier(.22,.7,.3,1);
}
.link:hover::after,.berth:hover .link::after,.appearance:hover .link::after{transform:translateX(5px)}
.link:active{opacity:.65}
.link:active::after{transform:translateX(2px)}

/* --- buttons: real press feedback -------------------------------------- */
.btn{transition:background .16s ease,color .16s ease,border-color .16s ease,transform .07s ease}
.btn:active{transform:translateY(1px)}
.btn-solid:hover{background:#5B3AA6;border-color:#5B3AA6}
.btn-solid:active{background:#4C2F8C;border-color:#4C2F8C}
.btn-line:hover{border-color:var(--text);background:rgba(20,22,40,.04)}
.btn-line:active{background:rgba(20,22,40,.09)}
.on-dark .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.on-dark .btn-line:active{background:rgba(255,255,255,.13)}
.btn-accent:hover{background:var(--accent-lt);border-color:var(--accent-lt)}
.btn-accent:active{background:#7C3AED;border-color:#7C3AED}

/* --- navigation ------------------------------------------------------- */
.mast nav a,.foot-links a{transition:color .15s ease,opacity .1s ease}
.mast nav a:active,.foot-links a:active{opacity:.6}
.particulars a:active{opacity:.6}

/* --- row hover points at the actual target ----------------------------- */
/* The row tint is a reading aid, not a click affordance: hovering anywhere in
   the row underlines its link and slides the arrow, so the real target is
   obvious. A full-row stretched link was rejected — it would swallow text
   selection on the description and expose one enormous link to a screen
   reader. */
.berth:hover .link,.appearance:hover .link{border-bottom-color:var(--signal)}

/* --- FAQ rows had no hover feedback at all ----------------------------- */
.faq summary{transition:background .16s ease}
.faq summary:hover{background:rgba(107,70,193,.05)}
.faq summary:active{background:rgba(107,70,193,.1)}
.faq summary .q-txt,.faq summary .q-sign{transition:color .16s ease}
.faq summary:hover .q-txt{color:var(--signal)}
.faq summary:hover .q-sign{color:var(--accent)}

/* --- form fields: hover, not just focus -------------------------------- */
.field input,.field textarea,.field select{transition:background .16s ease,border-color .16s ease}
.field input:hover,.field textarea:hover,.field select:hover{
  background:rgba(255,255,255,.07);border-bottom-color:var(--mist)}

/* --- media thumbnails -------------------------------------------------- */
.ap-thumb img{transition:transform .45s cubic-bezier(.22,.7,.3,1)}
.appearance:hover .ap-thumb img{transform:scale(1.035)}
.ap-play i{transition:background .16s ease,transform .16s ease}
.appearance:hover .ap-play i{background:#fff;transform:scale(1.08)}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width:900px){
  /* the plate was a ragged 2-column grid with a stranded fifth cell */
  .plate{grid-template-columns:1fr 1fr;border-top:0}
  .plate div{
    border-left:0;border-top:1px solid var(--rule-d);
    padding:15px 0 17px;
  }
  .plate div:nth-child(even){border-left:1px solid var(--rule-d);padding-left:18px}
  .plate div:nth-child(odd){padding-right:18px}
  .plate div:last-child:nth-child(odd){grid-column:1 / -1;padding-right:0}
}

@media (min-width:761px) and (max-width:1020px){
  .berth{grid-template-columns:64px minmax(0,1fr);gap:0 24px;align-items:start;padding:26px 0 30px}
  .berth-body{grid-column:2;margin-top:14px}
  .berth-side{grid-column:2;padding-top:0;margin-top:16px}
  .berth-name{font-size:1.75rem}
}

@media (max-width:760px){
  /* number + sector as one meta line, so the label stops overflowing a
     44px gutter and colliding with the name */
  .berth{grid-template-columns:1fr;gap:0;align-items:start;padding:26px 0 30px}
  .berth-cat{display:flex;align-items:baseline;gap:11px;font-size:1.1rem;margin-bottom:12px}
  .berth-cat small{margin-top:0;font-size:.7rem}
  .berth-body{grid-column:auto;margin-top:14px}
  .berth-side{grid-column:auto;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:16px;align-self:auto}
  .berth-what{margin-top:9px}
  .berth-name{font-size:1.6rem}
}

@media (max-width:680px){
  .appearance{grid-template-columns:1fr;gap:0;padding:24px 0 28px}
  .ap-kind{display:flex;align-items:baseline;gap:11px;padding-top:0;margin-bottom:12px}
  .ap-kind small{margin-top:0}
  .ap-thumb{grid-column:auto;margin:0 0 15px;max-width:none;width:100%}
  .ap-body{grid-column:auto}
  .ap-side{grid-column:auto;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:0}
}

@media (max-width:520px){
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%}
  .figures{grid-template-columns:1fr}
  .fig{padding:20px 0 22px;border-left:0;border-top:1px solid var(--rule)}
  .fig:first-child{border-top:0}
  .fig span{max-width:none}
  .plate{grid-template-columns:1fr}
  .plate div:nth-child(even){border-left:0;padding-left:0}
  .plate div:nth-child(odd){padding-right:0}
  .faq summary{grid-template-columns:34px 1fr auto;gap:0 12px}
  .faq .answer{margin-left:46px}
}

/* pointer-only affordances: never leave a sticky hover state on touch */
@media (hover:none){
  .berth:hover,.appearance:hover,.faq summary:hover{background:transparent}
  .appearance:hover .ap-thumb img{transform:none}
  .link:hover::after{transform:none}
}

/* ==========================================================================
   Spacing corrections
   ========================================================================== */

/* --- contact: the particulars were pushed to the bottom of a flex column,
       which opened a 169px void under the lede. Let them flow. ----------- */
.closing{padding-top:clamp(44px,5.5vw,68px)}
.closing .waterline{margin-bottom:clamp(34px,4vw,54px)}
.closing-grid > div:first-child{display:block;height:auto}
.closing-grid .particulars{margin-top:34px}

/* --- register: chips move under the name so the two content columns are
       near-equal in height, closing the 34px dead band on every row ------ */
@media (min-width:1021px){
  .berth{
    grid-template-columns:80px minmax(0,.92fr) minmax(0,1.5fr);
    grid-template-rows:auto auto;
  }
  .berth > :first-child{grid-column:1;grid-row:1 / span 2}
  .berth > :nth-child(2){grid-column:2;grid-row:1}
  .berth-body{grid-column:3;grid-row:1 / span 2}
  .berth-side{
    grid-column:2;grid-row:2;
    flex-direction:row;flex-wrap:wrap;gap:8px;
    align-items:flex-start;text-align:left;
    margin-top:18px;padding-top:0;
  }
}

/* --- hover tint needs room around the text ---------------------------- */
/* Flush against the first and last glyph it read as a stray band; bleeding
   it 16px past the text makes it read as a highlight. */
.berth,.appearance,.faq summary{position:relative}
.berth::before,.appearance::before,.faq summary::before{
  content:"";position:absolute;inset:0 -16px;
  background:transparent;pointer-events:none;
  transition:background .18s ease;
}
.berth > *,.appearance > *,.faq summary > *{position:relative}
.berth:hover,.appearance:hover,.faq summary:hover,.faq summary:active{background:transparent}
.berth:hover::before,.appearance:hover::before,.faq summary:hover::before{
  background:rgba(107,70,193,.055)}
.faq summary:active::before{background:rgba(107,70,193,.1)}
@media (hover:none){
  .berth:hover::before,.appearance:hover::before,.faq summary:hover::before{background:transparent}
}

/* --- form fields: give the text room inside its box -------------------- */
/* Fields were padded .1rem horizontally, so placeholders sat flush against
   the tinted edge. The label and error text take the same inset so every
   line inside the form column stays on one left edge. */
.field label{padding-left:.95rem}
.field input,.field textarea,.field select{padding:.82rem .95rem}
.field textarea{padding-top:.75rem}
.field select{padding-right:2.6rem;background-position:right .8rem center}
.err{padding-left:.95rem}
.form-status{margin-left:0}

/* ==========================================================================
   Structure update: category label replaces the numbered gutter
   ========================================================================== */
.prose{max-width:74ch;display:flex;flex-direction:column;gap:20px}
.prose p{font-size:1.02rem;max-width:none}

@media (min-width:1021px){
  /* two columns: label + name on the left, the venture copy on the right */
  .berth{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
    grid-template-rows:auto auto;
    column-gap:clamp(28px,4vw,64px);
    padding:30px 0 32px;
  }
  .berth > :first-child{grid-column:1;grid-row:1;align-self:start}
  .berth > :nth-child(2){grid-column:1;grid-row:2;margin-top:10px}
  .berth-body{grid-column:2;grid-row:1 / span 2;margin-top:2px}
}
@media (min-width:761px) and (max-width:1020px){
  .berth{grid-template-columns:minmax(0,1fr);gap:0;padding:26px 0 30px}
  .berth > :first-child,.berth > :nth-child(2),.berth-body{grid-column:1}
  .berth > :nth-child(2){margin-top:8px}
  .berth-body{margin-top:14px}
}
@media (max-width:760px){
  .berth{grid-template-columns:1fr;gap:0;padding:26px 0 28px}
  .berth-cat{margin-bottom:8px}
  .berth-body{margin-top:13px}
}

/* venture names sit alone now, so give them room to breathe */
.berth-name{font-size:clamp(1.55rem,2.9vw,2.15rem)}

/* the hero venture list carries full category names */
.moor-list li{grid-template-columns:auto minmax(16px,1fr) auto 172px}
.moor-sector{font-size:.68rem;letter-spacing:.1em}
@media (max-width:760px){
  .moor-list li{grid-template-columns:auto minmax(10px,1fr) auto auto;gap:0 10px}
  .moor-sector{font-size:.62rem}
}

/* Values entries have no eyebrow, so pull the heading up to the rule */
.entry > h3:first-child{margin-top:0}

/* hero now ends at the buttons, so give the divider air */
.hero .waterline{margin-top:clamp(52px,7vw,92px)}

/* media rows: thumbnail then copy, no numbered gutter */
@media (min-width:1021px){
  .appearance{grid-template-columns:208px minmax(0,1fr);column-gap:clamp(28px,3.5vw,48px);padding:28px 0 30px}
  .ap-thumb{grid-column:1;margin-top:4px}
  .ap-body{grid-column:2}
}
@media (min-width:681px) and (max-width:1020px){
  .appearance{grid-template-columns:176px minmax(0,1fr);column-gap:26px}
  .ap-thumb{grid-column:1}
  .ap-body{grid-column:2}
}
@media (max-width:680px){
  .appearance{grid-template-columns:1fr;gap:0;padding:24px 0 28px}
  .ap-thumb{grid-column:1;margin:0 0 15px;width:100%;max-width:none}
  .ap-body{grid-column:1}
}

/* keep the category label and venture name together: the taller body column
   spans both rows, so let row 2 absorb the slack instead of the gap */
@media (min-width:1021px){
  .berth{grid-template-rows:auto 1fr}
  .berth > :nth-child(2){align-self:start;margin-top:6px}
}

/* ==========================================================================
   Palette alignment: use the production site's own values
   Hero and CTAs take the live violet gradient; dark bands take the live slate
   gradient; neutrals are the site's existing blue-greys.
   ========================================================================== */
:root{
  --violet:#6B46C1;          /* live --quay-purple */
  --violet-lt:#8B5CF6;
  --slate-900:#1A202C;       /* live darkest */
  --slate-800:#2D3748;
  --signal:#6B46C1;
  --signal-lt:#D6BCFA;
  --accent:#8B5CF6;
  --accent-lt:#C4B5FD;
  --chart:#F8FAFC;           /* live light ground */
  --text:#1A202C;
  --slate:#4A5568;
  --mist:#CBD5E0;
  --rule:#E2E8F0;
  --rule-strong:#CBD5E0;
  --ink:#1A202C;
}

/* dark bands: the live slate gradient, not a violet-black */
.on-dark{background:linear-gradient(135deg,#1A202C 0%,#2D3748 100%)}
.mast{background:#1A202C}
.foot{background:#1A202C}

/* hero and closing: the live violet gradient */
.hero.on-dark,.closing.on-dark{background:linear-gradient(135deg,#6B46C1 0%,#8B5CF6 100%)}
.hero::before,.closing::before{
  background:radial-gradient(900px 520px at 88% -10%,rgba(255,255,255,.14),transparent 62%),
             radial-gradient(700px 460px at 4% 108%,rgba(26,32,44,.22),transparent 66%);
}
.hero .lede,.closing .lede{color:rgba(255,255,255,.9)}
.hero .tag,.closing .tag,.hero .tag-accent,.closing .tag-accent{color:rgba(255,255,255,.82)}
.hero .mast-uen{color:rgba(255,255,255,.7)}
.hero .waterline,.closing .waterline{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.45) 0 1px,transparent 1px),
    repeating-linear-gradient(to right,rgba(255,255,255,.28) 0 1px,transparent 1px 34px);
  background-size:100% 100%,100% 7px;background-repeat:no-repeat,repeat-x;
}
/* a violet button is invisible on a violet ground */
.hero .btn-solid,.closing .btn-solid{background:#fff;color:#5B3AA6;border-color:#fff}
.hero .btn-solid:hover,.closing .btn-solid:hover{background:#F3EEFF;border-color:#F3EEFF}
.hero .btn-solid:active,.closing .btn-solid:active{background:#E6DBFF;border-color:#E6DBFF}
.hero .btn-line,.closing .btn-line{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-line:hover,.closing .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* hero venture list on violet */
.hero .moor-cap{border-bottom-color:rgba(255,255,255,.35)}
.hero .moor-list::before{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.75) 12%,rgba(255,255,255,.75) 88%,transparent)}
.hero .cleat{background:#fff}
.hero .rope{background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,.25))}
.hero .moor-name{color:#fff}
.hero .moor-sector{color:rgba(255,255,255,.72)}
.hero .plate div{border-left-color:rgba(255,255,255,.28)}

/* contact form on the violet ground */
.closing .field label{color:rgba(255,255,255,.82)}
.closing .field input,.closing .field textarea,.closing .field select{
  background:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.5);color:#fff}
.closing .field input:hover,.closing .field textarea:hover,.closing .field select:hover{
  background:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.75)}
.closing .field input:focus,.closing .field textarea:focus,.closing .field select:focus{
  background:rgba(255,255,255,.22);border-bottom-color:#fff}
.closing .field input::placeholder,.closing .field textarea::placeholder{color:rgba(255,255,255,.6)}
.closing .field select option{background:#4C2F8C;color:#fff}
.closing .particulars{border-top-color:rgba(255,255,255,.3);color:rgba(255,255,255,.82)}
.closing .particulars a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* dark slate band (Impact) keeps light-violet accents */
.on-dark:not(.hero):not(.closing) .tag-accent{color:var(--accent-lt)}

/* ==========================================================================
   Full-height banner: the hero fills the first screen on load
   ========================================================================== */
.hero{
  min-height:calc(100svh - 66px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(48px,6vw,72px);
  padding-bottom:0;
}
.hero > .wrap:last-child{margin-top:auto}
.hero .waterline{margin-top:clamp(40px,5vw,64px)}

/* scroll cue, so a full-screen banner still says there is more below */
.scroll-cue{
  display:flex;align-items:center;gap:.7rem;
  padding:0 0 26px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.scroll-cue i{
  display:block;width:1px;height:26px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:#fff;
  animation:cue 1.9s cubic-bezier(.6,0,.35,1) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){ .scroll-cue i::after{animation:none;opacity:.5} }

/* very short viewports (landscape phones) must still fit */
@media (max-height:620px){
  .hero{min-height:0;padding-top:56px;padding-bottom:20px}
  .scroll-cue{display:none}
}

/* .wrap uses margin:0 auto, and an auto cross-axis margin beats align-items:
   stretch, so inside the flex-column hero the wraps collapsed to content
   width. Give them an explicit width. */
.hero > .wrap{width:100%}


/* ==========================================================================
   Legibility on dark grounds
   --slate (#4A5568) is a light-ground muted tone. Anything using it that can
   land inside .on-dark needs the dark-ground equivalent, or it renders dark
   grey on dark slate. This hit the Impact figure labels.
   ========================================================================== */
.on-dark .fig span,
.on-dark .figures-note,
.on-dark .faq .answer,
.on-dark .ap-outlet,
.on-dark .berth-cat small{color:var(--mist)}
.on-dark .chip{color:var(--mist);border-color:var(--rule-d-strong)}

/* ==========================================================================
   Contact section: v4's deep violet ground, with the wordmark as its graphic
   The bright violet was doing too much work twice on one page. The closing
   section takes the calmer deep-violet treatment, and uses the wordmark
   rather than the Q monogram so the two branded surfaces do not repeat.
   ========================================================================== */
.closing.on-dark{
  background:linear-gradient(150deg,#2E1B57 0%,#241246 45%,#1B0E36 100%);
}
.closing::before{
  background:
    radial-gradient(900px 540px at 82% 2%,rgba(139,92,246,.40),transparent 62%),
    radial-gradient(660px 430px at 4% 100%,rgba(107,70,193,.30),transparent 66%);
}
/* url() is relative to this stylesheet, not the page */
.closing::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('quay-wordmark-light.svg') no-repeat;
  background-size:min(70vw,860px) auto;
  background-position:right -5vw bottom -4vw;
  opacity:.06;
}
.closing > *{position:relative;z-index:1}

.closing .tag,.closing .tag-accent{color:var(--accent-lt)}
.closing .lede{color:rgba(255,255,255,.8)}
.closing .btn-solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.closing .btn-solid:hover{background:#A78BFA;border-color:#A78BFA}
.closing .btn-solid:active{background:#7C3AED;border-color:#7C3AED}
.closing .waterline{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.32) 0 1px,transparent 1px),
    repeating-linear-gradient(to right,rgba(255,255,255,.18) 0 1px,transparent 1px 34px);
  background-size:100% 100%,100% 7px;background-repeat:no-repeat,repeat-x;
}
/* form fields on the deeper ground */
.closing .field input,.closing .field textarea,.closing .field select{
  background:rgba(255,255,255,.07);border-bottom-color:rgba(255,255,255,.32)}
.closing .field input:hover,.closing .field textarea:hover,.closing .field select:hover{
  background:rgba(255,255,255,.11);border-bottom-color:rgba(255,255,255,.5)}
.closing .field input:focus,.closing .field textarea:focus,.closing .field select:focus{
  background:rgba(255,255,255,.13);border-bottom-color:var(--accent-lt)}
.closing .field input::placeholder,.closing .field textarea::placeholder{color:rgba(255,255,255,.45)}
.closing .field select option{background:#241246;color:#fff}
.closing .particulars{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.76)}

/* --- venture logos ------------------------------------------------------
   Each venture's own mark sits above its name in the register. The five
   lockups have very different proportions (three cap-height wordmarks, one
   wordmark with a pin, and Continuum's near-square dot lockup), so a single
   height would leave Continuum's type unreadable and Webpuppies' oversized.
   The box height is shared; each mark is scaled inside it for optical match. */
.berth-logo{
  display:flex;align-items:center;
  height:var(--logo-h);
}
.berth-logo img{width:auto;height:auto;max-width:100%}

/* Uniform means uniform to the eye, not the same number of pixels. Measured at
   a common 30px box, the letterforms ranged from 11.6px (INTRIC, whose caps sit
   under a tall monogram) to 29px (CONTINUUM, which is pure caps with no
   ascenders or descenders) - a 2.5x spread, which is what read as "some are
   bigger". These heights land every wordmark on the same optical size. */
.berth-logo-webpuppies img{max-height:27px}
.berth-logo-woofpay img{max-height:24px}
.berth-logo-joblu img{max-height:25px}
.berth-logo-intric img{max-height:38px}
.berth-logo-continuum img{max-height:17px}

@media (max-width:1100px){
  .strip-4{grid-template-columns:repeat(2,1fr)}
  .strip-4 .entry{border-bottom:1px solid var(--rule)}
  .strip-4 .entry:nth-child(2n){border-right:0}
  .strip-4 .entry:nth-child(2n+1){padding-left:0}
  .strip-4 .entry:nth-last-child(-n+2){border-bottom:0}
}

@media (max-width:760px){
  .berth-logo{height:32px}
  .berth-logo-webpuppies img{max-height:23px}
  .berth-logo-woofpay img{max-height:20px}
  .berth-logo-joblu img{max-height:21px}
  .berth-logo-intric img{max-height:32px}
  .berth-logo-continuum img{max-height:14px}
}

/* visually hidden: the venture name is carried by the logo, but the heading
   stays in the outline for screen readers and search engines */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- insights & outreach: the organisations named in each card ----------
   A mixed set of institutional marks (a podcast tile, a script wordmark, two
   university crests), so they are muted to a common weight rather than left
   at full saturation, which would out-shout the editorial type. Colour
   returns on hover. */
.entry-orgs{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  height:34px;margin-top:16px;
}
.entry-orgs img{
  width:auto;height:auto;max-width:none;
  filter:grayscale(1) opacity(.62);
  transition:filter .25s ease;
}
.entry:hover .entry-orgs img,
.entry:focus-within .entry-orgs img{filter:grayscale(0) opacity(1)}
/* Be++ is Quay's own show, not a third-party affiliation, so it keeps its
   colour the way the venture lockups do. */
.entry-orgs .org-bepp{filter:none}
.entry-orgs .org-bepp{max-height:32px}
.entry-orgs .org-otw{max-height:32px;filter:none}
.entry-orgs .org-leadingre{max-height:30px}
.entry-orgs .org-jll{max-height:24px}
.entry-orgs .org-ntu{max-height:30px}
.entry-orgs .org-sim{max-height:26px}

@media (hover:none){
  .entry-orgs img{filter:grayscale(1) opacity(.75)}
  .entry-orgs .org-bepp{filter:none}
}

@media (max-width:760px){
  .entry-orgs{height:30px;margin-top:14px}
  .entry-orgs .org-bepp{max-height:28px}
  .entry-orgs .org-leadingre{max-height:27px}
  .entry-orgs .org-jll{max-height:21px}
  .entry-orgs .org-ntu{max-height:27px}
  .entry-orgs .org-sim{max-height:23px}
}

/* --- founder ------------------------------------------------------------
   Portrait beside the biography, sharing the register's left rule so the
   block reads as part of the same ruled grid as everything above it. */
.founder-grid{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:0 clamp(28px,4vw,56px);
  align-items:start;
}
/* The headshot is only 400px square at source, so the frame is capped at 260
   to keep it above 1.5x on a retina screen. Its white studio ground is a
   shade off the page's, hence the hairline. */
.founder-shot{margin:0;max-width:260px}
.founder-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;object-position:50% 45%;
  background:var(--vellum);
  border:1px solid var(--rule);
}
.founder-grid .prose{max-width:64ch}

@media (max-width:860px){
  .founder-grid{grid-template-columns:1fr;gap:24px 0}
  .founder-shot{max-width:200px}
}