/* KR Consultancy — site.css
   One file. Change a colour here and it changes everywhere.
   Palette locked 14 Aug 2026. Both 2014 KR greens kept at their original hex. */

:root{
  --ink:#0A2417;      /* body text & headlines — 15.6:1 on warm */
  --forest:#0D5C2A;   /* primary brand & actions — 7.7:1 */
  --deep:#0F3D24;     /* dark surfaces */
  --signal:#0B9444;   /* accent ONLY — never body text on white */
  --mist:#EAF4EE;     /* tint */
  --warm:#FAF9F6;     /* page surface */
  --bone:#F4F2ED;     /* alternating band */
  --stone:#546056;    /* secondary text — 6.3:1 */
  --line:#DDE3DD;     /* hairlines */
  --leaf:#7FE0A0;     /* reversed accent — 10.2:1 on ink */
  --teal:#0B7182;     /* ikigAI, on light — 5.4:1 */
  --tealL:#3FBBD0;    /* ikigAI, reversed — 7.2:1 on ink */
  --band:#20402F;     /* dark-surface hairline */
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
/* The browser's own [hidden] rule is display:none, but ANY author rule that sets
   display on the same element beats it — .prog{display:flex} silently broke the
   training filter that way, and the self-assessment needed its own patch for the
   same reason. This one guard covers every case. Do not remove it: the filter and
   the ikigAI result panel both hide things by setting the hidden property. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--warm);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;font-weight:500;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest)}

/* ---------- layout ---------- */
.w{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
/* Narrow sections keep the same left edge as every other section — only the
   measure tightens, so nothing jogs inward as you scroll. */
.w.narrow > p,.w.narrow > .body{max-width:68ch}
section{padding:clamp(56px,8vw,96px) 0}
.bone{background:var(--bone)}
.mist{background:var(--mist)}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(34px,5.6vw,60px);line-height:1.04;max-width:19ch}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.14;max-width:24ch;margin-bottom:20px}
h3{font-size:20px;line-height:1.25;font-weight:700}
h4{font-size:17px;line-height:1.3;font-weight:700}
p{margin:0 0 1.15em}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest);margin:0 0 18px;
}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--stone);
  max-width:48ch;font-weight:500;margin:24px 0 0}
.body{font-size:17px;color:var(--stone);max-width:66ch}
.micro{font-size:14px;color:var(--stone);margin:12px 0 0}
.pull{
  font-size:clamp(21px,2.8vw,28px);line-height:1.35;font-weight:700;letter-spacing:-.02em;
  border-left:3px solid var(--signal);padding:6px 0 6px 24px;margin:36px 0;max-width:30ch;
}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .2s}
nav.scrolled{border-bottom-color:var(--line)}
/* ONE navigation at every width. Kamlesh asked for the burger on desktop too, so the
   links and the CTA live behind the button always and there is no second desktop layout
   to keep in sync. .navin is a flex row and the open panel is its third child at
   width:100%, so the row MUST wrap and the bar MUST be free to grow — with a fixed
   height and no flex-wrap the panel tried to sit in the row and spilled over the page. */
.navin{display:flex;align-items:center;gap:0;flex-wrap:wrap;min-height:70px}
/* The logo is the 2014 Main Logo PNG, same artwork as the prospectus cover — not a
   text lockup. Size it by HEIGHT and let the width follow; the asset is 4.14:1 and
   the intrinsic width/height on the <img> reserves the right box before it loads. */
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{display:block;height:44px;width:auto}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  margin-left:auto;width:44px;height:44px;padding:0 10px;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}

.navmenu{display:none;order:3;width:100%;flex-basis:100%;margin:0;
  flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px}
.navmenu.open{display:flex}
.navlinks{display:flex;flex-direction:column;gap:0;width:100%}
.navlinks a{color:var(--stone);text-decoration:none;font-size:17px;font-weight:600;
  padding:13px 0;border-bottom:1px solid var(--line)}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--forest);border-bottom-color:var(--line)}
.navcta{background:var(--forest);color:#fff;text-decoration:none;font-weight:700;
  font-size:16px;padding:14px 18px;border-radius:2px;margin-top:14px;text-align:center}
.navcta:hover{background:var(--deep)}
/* On a wide screen a full-bleed green bar reads as a banner, not a button. */
@media(min-width:761px){.navcta{align-self:flex-start;min-width:220px}}

/* The hairline normally appears on scroll. With the panel open at the top of the page
   there would be no edge under it, so the script adds .menuopen as well. */
nav.menuopen{border-bottom-color:var(--line)}

@media(max-width:760px){
  .navin{min-height:60px}
  .logo img{height:34px}
  nav{border-bottom:1px solid var(--line)}
}

/* ---------- buttons ---------- */
.b1,.b2{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;
  padding:15px 28px;border-radius:2px;line-height:1.2;max-width:100%;
  overflow-wrap:break-word;text-align:center}
.b1{background:var(--forest);color:#fff}
.b1:hover{background:var(--deep)}
.b2{color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}
.b2:hover{background:var(--mist)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px)}
.statement{
  margin-top:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px
}
.statement div span{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);margin-bottom:6px}
.statement div b{display:block;font-size:16px;font-weight:700;line-height:1.35}
.statement div p{margin:4px 0 0;font-size:14px;color:var(--stone);line-height:1.5}

/* ---------- dark band ---------- */
.band{background:var(--deep);color:#EAF2EE}
.band h2,.band h3,.band h4{color:#fff}
.band p{color:#C4D8CC}
.band .eyebrow{color:var(--leaf)}
.band a{color:var(--leaf)}
.band .pull{border-left-color:var(--leaf);color:#fff}
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px;margin-top:40px}
.phase{border-top:2px solid var(--leaf);padding-top:16px}
.phase .n{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--leaf);margin-bottom:8px}
.phase b{display:block;color:#fff;font-size:17px;font-weight:700;margin-bottom:6px}
.phase span{display:block;font-size:14.5px;color:#C4D8CC;line-height:1.5}

/* ---------- cards ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.card{background:#fff;padding:32px 28px;display:flex;flex-direction:column;gap:8px}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest);margin:0 0 6px}
.card p{margin:0;color:var(--stone);font-size:16px;line-height:1.55}
.card .price{margin-top:auto;padding-top:20px;font-size:14px;color:var(--stone);font-weight:700}

.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;margin-top:36px}
.wc .n{font-size:13px;font-weight:800;color:var(--signal);letter-spacing:.14em;margin-bottom:10px}
.wc h4{margin-bottom:8px}
.wc p{font-size:15.5px;color:var(--stone);line-height:1.55;margin:0}

/* ---------- catalogue ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:36px}
.flabel{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);margin-right:4px}
.chip{font-family:inherit;font-size:14px;font-weight:600;padding:8px 15px;border-radius:2px;
  border:1px solid var(--line);background:#fff;color:var(--stone);cursor:pointer}
.chip:hover{border-color:var(--forest);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.prog{background:#fff;padding:28px 26px;display:flex;flex-direction:column}
.prog .meta{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.prog .fam{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--forest);padding:4px 9px;border-radius:2px}
.prog .dur{font-size:13px;color:var(--stone);font-weight:600}
.prog h3{margin-bottom:10px;font-size:19px}
.prog p{font-size:15.5px;color:var(--stone);line-height:1.55;margin:0 0 18px}
/* who it's for — lets a buyer self-select without giving away the prospectus */
.prog .who{font-size:14.5px;line-height:1.5;color:var(--ink);margin:0 0 14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.prog .who span{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);margin-bottom:4px}
.prog .ph{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--signal);letter-spacing:.04em}
.empty{padding:40px 0;color:var(--stone);font-weight:600}

.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:36px}
.prices div b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.prices div span{display:block;font-size:15px;color:#C4D8CC}
.prices div .amt{display:block;font-size:26px;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:4px}

/* ---------- proof ---------- */
.proof{background:#fff;border:1px solid var(--line);border-left:3px solid var(--signal);
  padding:clamp(26px,4vw,36px);max-width:720px}
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;
  align-items:start}
.proofs .proof{max-width:none;height:100%}
.proof p:last-child{margin-bottom:0}
.partners{font-size:16.5px;color:var(--stone);max-width:62ch;margin-top:28px}

/* ---------- ladder ---------- */
.entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:36px}
.en{background:#fff;border:1px solid var(--line);padding:30px 28px}
.en .n{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin-bottom:10px}
.en .amt{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:14px 0 12px}
.en p{font-size:15.5px;color:var(--stone);margin:0;line-height:1.55}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:32px}
.bl{background:#fff;border:1px solid var(--line);padding:30px 28px;position:relative}
.bl.feat{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
.badge{position:absolute;top:-11px;left:26px;background:var(--forest);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:2px}
.bl .shape{font-size:14px;color:var(--stone);font-weight:600;margin-top:6px}
.bl .amt{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:14px 0 2px}
.bl .per{font-size:13.5px;color:var(--stone);font-weight:600;margin-bottom:14px}
.bl p{font-size:15.5px;color:var(--stone);margin:0;line-height:1.55}

/* ---------- territory ---------- */
.terr{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tc{background:#fff;padding:22px 20px}
/* five cells in a 2- or 3-column grid leaves a gap; fill it so the rule colour
   does not show through as a grey block */
.tgrid::after{content:"";background:#fff;display:block}
.tc .n{font-size:12px;font-weight:800;color:var(--signal);letter-spacing:.13em;margin-bottom:8px}
.tc h4{margin-bottom:6px;font-size:16px}
.tc p{font-size:14.5px;color:var(--stone);line-height:1.5;margin:0}
.terrnote{font-size:13.5px;color:var(--stone);font-weight:600;margin-top:14px;text-align:right}
.fixed{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:32px}
.fx h5{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);margin-bottom:10px}
.fx p{font-size:15.5px;color:var(--stone);margin:0;line-height:1.55}
@media(max-width:900px){.terr{grid-template-columns:1fr}.terrnote{text-align:left}}

.ethics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:36px}
.et h4{margin-bottom:8px}
.et p{font-size:15.5px;margin:0;line-height:1.55}

/* ---------- self-assessment ---------- */
.assess{background:#fff;border:1px solid var(--line);padding:clamp(26px,4vw,40px);max-width:760px}
.assess ol{margin:0;padding:0;list-style:none;counter-reset:a}
.assess li{border-bottom:1px solid var(--line);padding:18px 0}
.assess li:last-of-type{border-bottom:0}
.assess label{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-size:16.5px;
  line-height:1.5;font-weight:500}
.assess input{margin-top:5px;width:19px;height:19px;accent-color:var(--forest);flex:0 0 auto}
.result{margin-top:24px;background:var(--mist);border-left:3px solid var(--forest);
  padding:22px 24px}
.result[hidden]{display:none}
.result h4{margin-bottom:8px;color:var(--ink)}
.result p{margin:0 0 10px;font-size:16px;color:var(--stone)}
.result p:last-child{margin-bottom:0}

/* ---------- forms ---------- */
.gate{background:#fff;border:1px solid var(--line);padding:clamp(26px,4vw,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px;align-items:center}
.formwrap{background:#fff;border:1px solid var(--line);padding:clamp(24px,4vw,36px)}
.formwrap iframe{width:100%;border:0;min-height:640px;display:block}
.fallback p:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:820px;margin-top:32px}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;padding:22px 0;font-size:18px;font-weight:700;
  letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';color:var(--signal);font-weight:800;font-size:22px;line-height:1}
.q[open] summary::after{content:'\2212'}
.q p{font-size:16px;color:var(--stone);padding-bottom:24px;max-width:70ch}

/* ---------- credentials ---------- */
.creds{list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px}
.creds li{border-bottom:1px solid var(--line);padding:14px 0;font-size:16px;font-weight:600}
.creds li span{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);margin-bottom:3px}

/* ---------- paths ---------- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:36px}
.path{background:#fff;padding:30px 28px;display:flex;flex-direction:column}
.path h3{margin-bottom:10px}
.path p{font-size:15.5px;color:var(--stone);line-height:1.55;margin:0 0 20px}
.path a{margin-top:auto;font-weight:700;text-decoration:none;font-size:15px}
.path a:hover{text-decoration:underline}

/* ---------- ikigAI lockup ---------- */
.ikigai-lock{display:flex;align-items:center;gap:14px;margin-top:8px}
.ikigai-lock img{height:34px;width:auto}
.ikigai-lock span{font-size:13px;color:var(--stone);font-weight:600}

/* ---------- prose (privacy / terms) ---------- */
.prose{max-width:720px}
.prose h2{font-size:24px;margin:44px 0 14px}
.prose h3{font-size:18px;margin:28px 0 10px}
.prose p,.prose li{font-size:16.5px;color:var(--stone);line-height:1.65}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}

/* ---------- final CTA ---------- */
.final{text-align:center}
.final h2{margin-left:auto;margin-right:auto;max-width:22ch}
.final p{max-width:46ch;margin-left:auto;margin-right:auto;color:var(--stone)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#C4D8CC;padding:64px 0 36px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
/* Reversed logo: the pale disc is knocked out and the wordmark lifted, so the mark
   sits on --ink instead of putting a light grey sticker on a dark footer. */
footer .flogo{margin:0 0 18px}
footer .flogo img{display:block;height:46px;width:auto}
footer p{color:#9BB3A6;line-height:1.6;margin:0 0 10px}
footer h5{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:14px}
footer a{display:block;color:#C4D8CC;text-decoration:none;padding:5px 0;font-weight:500}
footer a:hover{color:#fff;text-decoration:underline}
.fbot{border-top:1px solid var(--band);margin-top:44px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:13.5px;color:#9BB3A6}
.fbot .brands{display:flex;flex-wrap:wrap;gap:20px}
.fbot a{display:inline;padding:0}

@media(max-width:600px){
  body{font-size:16px}
  .en .amt,.bl .amt{font-size:28px}
}

/* ==========================================================================
   PHONE PASS — 16 Sep 2026
   The site read as "wordy and ugly" on a phone. Three causes, fixed here:
   desktop vertical rhythm left unchanged at small sizes, reading text drifting
   down to 12–14.5px, and buttons of ragged differing widths stacked up.
   Labels and eyebrows stay small on purpose — they are uppercase and
   letterspaced, and they are not read as prose.
   ========================================================================== */
@media(max-width:600px){

  /* --- vertical rhythm: desktop air is wasted space on a 390px screen --- */
  section{padding:40px 0}
  .hero{padding:32px 0 28px}
  .statement{padding:22px 0;gap:18px}
  .pull{margin:26px 0;padding-left:18px}
  h2{margin-bottom:14px}

  /* --- reading text: nothing a visitor has to READ goes below 15.5px --- */
  .statement div p,
  .phase span,
  .prog .who,
  .prog p,
  .card p,
  .terr p,
  .terrnote,
  .shape,
  .micro{font-size:15.5px;line-height:1.55}
  .prog .dur,
  .card .price{font-size:14px}

  /* --- headlines: tighter leading so a 4-line H1 does not eat the screen --- */
  h1{line-height:1.06;letter-spacing:-.03em}

  /* --- buttons: full width so two stacked CTAs line up instead of stepping --- */
  .b1,.b2{display:block;width:100%;padding:16px 20px}
  .b1+.b2,.b2+.b1,.b1+.b1{margin-top:12px}

  /* --- grids: close the desktop gutters --- */
  .tgrid,.proofs,.prices,.cards{gap:18px}
  .prog{padding:22px 20px}
}

/* --------------------------------------------------------------------------
   Image slots. Nothing uses these yet — they are here so photographs can drop
   in without another layout pass. See KR-photo-shot-list.md for the brief.
   -------------------------------------------------------------------------- */
.shot{margin:0 0 28px}
.shot img{display:block;width:100%;height:auto;border-radius:2px}
.shot figcaption{margin-top:10px;font-size:14px;color:var(--stone);line-height:1.5}
.shot.wide{margin-left:calc(-1*clamp(20px,5vw,40px));
  margin-right:calc(-1*clamp(20px,5vw,40px))}
.shot.wide img{border-radius:0}
@media(max-width:600px){.shot{margin-bottom:22px}}

/* --------------------------------------------------------------------------
   Added 11 Oct 2026, with the images.

   .shot.strip  a thin band used to break a long column of prose. The image is
                cropped by the frame rather than scaled down, so the band keeps
                its height whatever the source ratio is.
   .nophoto     the statement that there are no client-session photographs on
                this site. It is set as a quiet bordered aside, not a callout
                box — it is an explanation, not a sales point, and shouting it
                would make it sound defensive.
   .disclosure  the AI-image disclosure in the footer. Small, permanent, and
                deliberately not hidden behind a link: the whole value of
                saying it is that it is said plainly and first.
   -------------------------------------------------------------------------- */
.shot.strip img{height:clamp(130px,22vw,220px);object-fit:cover}

.nophoto{border-left:3px solid var(--line);padding:4px 0 4px 20px;margin:36px 0;
  max-width:62ch}
.nophoto p{font-size:16px;line-height:1.6;color:var(--stone);margin:0}
.band .nophoto{border-left-color:var(--band)}
.band .nophoto p{color:#C4D8CC}

footer .disclosure{margin-top:14px;font-size:13px;color:#7E9A8C;line-height:1.55;
  max-width:70ch}
@media(max-width:760px){
  .nophoto{padding-left:16px;margin:28px 0}
  .shot.strip img{height:clamp(110px,30vw,160px)}
  /* A 3:2 image at 390px wide is 260px of scrolling. The point of these
     pictures is to give the eye a rest inside a long column, not to make the
     column longer, so on a phone they are cropped to a band rather than shown
     whole. object-fit keeps the centre of the frame, which is where the
     subject is in all six. */
  .shot.wide img{height:190px;object-fit:cover}
  .shot:not(.wide) img{height:200px;object-fit:cover}
}