/* A shared white editorial system; each page keeps its own content structure. */
.editorial-site { --editorial-paper: #fff; background: var(--editorial-paper); }
.editorial-site main { background: var(--editorial-paper); }
.editorial-site .site-header .brand { background: #fff; }
.editorial-site .site-header .brand:before { opacity: 1; }
.editorial-site .site-footer { background: var(--editorial-paper); }
.editorial-site .footer-shell,
.editorial-site .footer-identity .brand { background: #f3f5f8; }
.editorial-site .footer-shell {
 border-radius: 28px; border: 0;
 box-shadow: 0 12px 32px #12365208;
}
.editorial-site .footer-identity .brand img { mix-blend-mode: multiply; }
.editorial-site .connection-section, .editorial-site .showcase-services,
.editorial-site .showcase-hero, .editorial-site .journal-intro,
.editorial-site .journey-node, .editorial-site .journey-stops li:last-child .journey-node { background: #fff; }
.editorial-site .page-news { background: #fff; }
.editorial-site .showcase-shortcuts { background: #fff; box-shadow: none; border-color: #dce3e6; border-radius: 12px; }
.editorial-site .showcase-shortcuts .showcase-contact { background: #123652; }
.editorial-site .showcase-shortcuts > a:not(.showcase-contact):hover { background: #f5f7f8; }
.editorial-site .editorial-card { background: #fff; border: 1px solid #dce3e6; border-radius: 12px; }
.editorial-site .editorial-card h2, .editorial-site .journey-intro h2,
.editorial-site .journey-stops h3, .editorial-site .service-editorial h2,
.editorial-site .service-row h3, .editorial-site #business-selector h2,
.editorial-site #business-selector h3 { font-weight: 500; }
.site-index .showcase-main { border-radius: 0; }
.site-index .showcase-content h1 { font-size: clamp(50px, 6.2vw, 92px); font-weight: 500; line-height: 1.04; max-width: 760px; text-wrap: balance; }
.site-index .showcase-description { font-size: 19px; line-height: 1.65; max-width: 540px; }
.site-index .connection-section { padding-top: 80px; padding-bottom: 90px; }
.site-index #business-selector .buyer-tabs button { border-radius: 4px; background: #fff; border-color: #dce3e6; }
.site-index #business-selector .buyer-tabs button[aria-selected=true] { background: #123652; border-color: #123652; }
.site-index #business-selector .buyer-panel, .site-index #business-selector .buyer-panels { border-radius: 12px; }
.site-index .service-editorial { margin: 0 24px; border-radius: 12px; }

/* The service photographs show through a frosted glass reading panel. */
.site-services main.page-services { background: transparent; }
.site-services .services-intro {
 background: rgba(255, 255, 255, .14); padding: 32px; border-radius: 12px; max-width: 470px;
 -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.site-services .services-intro h1 { color: #fff; font-size: clamp(42px, 4.4vw, 64px); font-weight: 500; line-height: 1.06; }
.site-services .services-intro p { color: #fff; font-size: 17px; line-height: 1.75; }
.site-services .services-intro .text-link { color: #c1edff; }
.site-services .services-breadcrumb { color: #e1ecf1; margin-bottom: 28px; }
.site-services .services-breadcrumb a:hover { color: #fff; }
.site-services .service-copy h2 { color: #fff; font-weight: 500; font-size: 25px; }
.site-services .service-copy p { font-size: 14px; }
.site-services .site-footer { background: transparent; }
.site-services .footer-shell { background: #f3f5f8; color: #123652; border: 0; border-radius: 28px; }
.site-services .footer-identity h2 span { color: #0868cc; }
.site-services .footer-identity > p, .site-services .footer-link-group h3,
.site-services .footer-legal { color: #566e83; }
.site-services .footer-link-group a { color: #173b58; }
.site-services .footer-link-group a:hover { color: #0868cc; }
.site-services .site-footer a:focus-visible { outline-color: #0868cc; }
.site-services .footer-identity .brand { box-shadow: none; border-radius: 0; }
.site-services .footer-contact-bar a:focus-visible { outline-color: #8ddff0; }
@media (max-width: 850px) {
 .site-index .showcase-content h1 { font-size: clamp(40px, 11vw, 60px); }
 .site-index .showcase-description { font-size: 16px; }
 .site-index .connection-section { padding: 60px 0; }
 .site-index .showcase-main { border-radius: 0; }
 .site-index .service-editorial { margin: 0 16px; border-radius: 12px; }
 .site-services .services-intro { max-width: 560px; padding: 28px; }
 .site-services .service-copy h2 { font-size: 24px; }
}
.editorial-opening { padding-top: 50px; }
.editorial-breadcrumb { display: flex; gap: 12px; color: #586d7c; font-size: 12px; }
.editorial-breadcrumb a:hover { color: #0868cc; }
.editorial-heading { display: grid; grid-template-columns: 1.6fr 1fr; gap: 70px; align-items: end; padding: 36px 0 54px; }
.editorial-heading h1 { font-size: clamp(60px, 7.3vw, 108px); line-height: 1.04; font-weight: 500; color: #123652; text-wrap: balance; }
.editorial-heading > p { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.55; color: #35566b; max-width: 470px; }
.site-sustainability .editorial-heading h1 { font-size: clamp(48px, 5.5vw, 80px); }
.editorial-panorama { position: relative; height: 50svh; min-height: 340px; max-height: 620px; margin: 0 24px; overflow: hidden; border-radius: 12px; background: #d8ded5; }
.editorial-panorama > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); translate: 0 var(--py, 0px); }
.site-new-product-development .editorial-panorama > img { object-position: center 55%; }
.site-contact .editorial-panorama { height: 40svh; }
.site-contact .editorial-panorama > img { object-position: center 58%; }
.editorial-explore { position: absolute; bottom: 30px; left: 36px; display: inline-flex; align-items: center; gap: 40px; border-radius: 999px; padding: 16px 22px; background: var(--editorial-paper); color: #123652; font-size: 14px; }
.editorial-explore span { font-size: 22px; line-height: 1; }
.editorial-explore:hover { background: #fff; }
.editorial-content-start { scroll-margin-top: 120px; }
.editorial-site .section { padding: 90px 0; }
.editorial-site .section.mist { background: #fff; }
.editorial-site .section h2 { font-weight: 500; }

/* Development pairs a sticky overview with the genuine six-step sequence. */
.development-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.development-overview { position: sticky; top: 130px; }
.development-overview h2 { font-size: 40px; margin-bottom: 24px; }
.development-overview figure { margin: 30px 0; overflow: hidden; border-radius: 12px; }
.development-overview img { display: block; width: 100%; height: 240px; object-fit: cover; }
.editorial-site .development-stages { display: block; margin: 0; }
.editorial-site .development-stages li { background: transparent; border: 0; border-top: 1px solid #ccd5d6; border-radius: 0; padding: 30px 0 40px 50px; position: relative; }
.editorial-site .development-stages li:before { position: absolute; top: 35px; left: 0; margin: 0; }
.editorial-site .development-stages strong { font-size: 29px; font-weight: 500; }

/* Products use generous photography and a two-column catalogue. */
.editorial-site .product-copy { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 90px; text-align: left; margin-bottom: 80px; }
.editorial-site .product-copy > .content-lead { grid-row: span 3; font-size: 27px; line-height: 1.6; }
.editorial-site .product-copy > p + p { margin-top: 0; margin-bottom: 25px; }
.editorial-site .product-copy .button { justify-self: start; margin-top: 0; }
.editorial-site .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px 32px; }
.editorial-site .photo-frame { height: 360px; border-radius: 4px; }
.editorial-site .photo-card:nth-child(3n + 1) .photo-frame { border-radius: 12px; }
.editorial-site .photo-copy { padding: 26px 0 0; }
.editorial-site .photo-copy h3 { font-size: 28px; font-weight: 500; }
.editorial-site .approved-audiences { grid-template-columns: 1fr; gap: 0; }
.editorial-site .approved-audiences > div { padding: 27px 0; border-bottom: 1px solid #cbd3d1; background: transparent; border-radius: 0; }
.editorial-site .approved-audiences p { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.editorial-site .approved-audiences strong { font-size: 27px; }

/* Sustainability retains its botanical tone, with an open photograph and rows. */
.editorial-site .sustainability-story { width: min(1240px, calc(100% - 80px)); padding: 0; margin: 90px auto; background: transparent; border-radius: 0; }
.editorial-site .sustainability-story-heading { gap: 80px; padding: 0 0 50px; }
.editorial-site .sustainability-story-heading > p { font-size: 17px; max-width: none; }
.editorial-site .sustainability-story-layout { gap: 80px; align-items: start; }
.editorial-site .sustainability-story-photo { position: sticky; top: 130px; width: 100%; min-width: 0; aspect-ratio: auto; height: min(70svh, 700px); min-height: 400px; border-radius: 12px; }
.editorial-site .sustainability-priorities { display: block; }
.editorial-site .sustainability-priority { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto; gap: 25px; min-height: 200px; padding: 32px 0; border-radius: 0; border-top: 1px solid #cbd3c5; background: transparent; color: #344b20; }
.editorial-site .sustainability-priority > svg { color: #5c731d; }
.editorial-site .sustainability-priority h3 { font-size: 29px; max-width: none; }
.editorial-site .sustainability-priority p { color: #52634e; font-size: 15px; }

/* Team imagery represents disciplines, with no invented staff portraits. */
.editorial-site .team-priority { background: transparent; border: 0; border-radius: 0; padding: 0; max-width: 1000px; margin: 0 0 65px; }
.editorial-site .team-priority p { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.35; }
.editorial-site .team-disciplines { grid-template-columns: 1fr 1fr; gap: 45px 32px; }
.editorial-site .team-disciplines article { padding: 0; border: 0; background: transparent; border-radius: 0; overflow: hidden; }
.team-discipline-photo { height: 340px; border-radius: 4px; overflow: hidden; }
.team-discipline-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.08); translate: 0 var(--py, 0px); }
.editorial-site .team-disciplines article:first-child .team-discipline-photo { border-radius: 12px; }
.editorial-site .team-disciplines article:last-child { grid-column: 1 / -1; }
.editorial-site .team-disciplines h2 { margin-top: 24px; font-size: 30px; }

/* About: spacious purpose statement, open priorities, and larger capabilities. */
.editorial-site .split { gap: 90px; }
.editorial-site .split h2 { font-size: 40px; }
.editorial-site .purpose { background: #123652; color: #fff; padding: 45px; border-radius: 12px; }
.editorial-site .purpose h3 { color: #b8edff; font-size: 18px; }
.editorial-site .purpose .purpose-statement { color: #fff; font-size: 30px; line-height: 1.4; }
.editorial-site .priority-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.editorial-site .priority-strip article { background: #fff; border: 1px solid #dce3e6; border-radius: 12px; min-height: 0; padding: 30px 32px; box-shadow: 0 1px 2px #1236520a, 0 18px 36px -22px #12365238; }
.editorial-site .priority-strip article:before { display: none; }
.editorial-site .priority-strip h3 { font-size: 25px; margin: 0; font-weight: 500; }
.editorial-site .capability-grid { grid-template-columns: 1fr 1fr; gap: 45px 32px; }
.editorial-site .capability-art { height: 320px; border-radius: 4px; }
.editorial-site .capability-grid h3 { font-size: 28px; font-weight: 500; }

/* Contact keeps the existing form fields and actions in a calmer reading layout. */
.editorial-site .contact-layout { grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: start; }
.editorial-site .contact-layout form { background: #fff; border-color: #d6dcd6; border-radius: 12px; padding: 40px; }
.editorial-site .contact-layout legend { font-size: 30px; font-weight: 500; }
.editorial-site .contact-layout aside { position: sticky; top: 130px; }
.editorial-site .contact-card { background: #123652; color: #fff; border: 0; border-radius: 12px; padding: 35px; }
.editorial-site .contact-card h2 { color: #fff; font-size: 30px; }
.editorial-site .contact-card p, .editorial-site .contact-card .email-link { color: #d6eef7; }
.editorial-site .contact-card .email-link { overflow-wrap: anywhere; }
.editorial-site .brief-card, .editorial-site .next-steps { background: transparent; border: 0; border-radius: 0; padding: 28px 0; }
.editorial-site .next-steps { border-top: 1px solid #ccd5d6; }

@media (max-width: 1100px) {
 .editorial-heading { gap: 40px; }
 .development-layout, .editorial-site .contact-layout, .editorial-site .split { gap: 45px; }
 .editorial-site .product-copy { gap: 35px; }
 .editorial-site .photo-frame, .team-discipline-photo { height: 290px; }
 .editorial-site .sustainability-story-layout, .editorial-site .sustainability-story-heading { gap: 40px; }
 .editorial-site .contact-layout form { padding: 28px; }
 .editorial-site .contact-layout aside { display: block; }
}
@media (max-width: 850px) {
 .editorial-opening { padding-top: 32px; }
 .editorial-heading { grid-template-columns: 1fr; gap: 25px; padding: 30px 0 38px; }
 .editorial-heading h1, .site-sustainability .editorial-heading h1 { font-size: clamp(44px, 9vw, 72px); max-width: 680px; }
 .editorial-heading > p { font-size: 19px; max-width: 580px; }
 .editorial-panorama { height: 44svh; min-height: 290px; margin: 0 16px; border-radius: 12px; }
 .editorial-explore { left: 20px; bottom: 20px; gap: 24px; max-width: calc(100% - 40px); }
 .editorial-site .section { padding: 60px 0; }
 .development-layout, .editorial-site .contact-layout, .editorial-site .split { grid-template-columns: 1fr; gap: 45px; }
 .development-overview, .editorial-site .contact-layout aside { position: static; }
 .development-overview img { height: 300px; }
 .editorial-site .product-copy { display: block; margin-bottom: 50px; }
 .editorial-site .product-copy > .content-lead { font-size: 24px; margin-bottom: 30px; }
 .editorial-site .approved-audiences p { display: block; }
 .editorial-site .approved-audiences strong { display: block; margin-bottom: 12px; }
 .editorial-site .sustainability-story { width: calc(100% - 40px); margin: 60px auto; }
 .editorial-site .sustainability-story-heading, .editorial-site .sustainability-story-layout { grid-template-columns: 1fr; gap: 30px; }
 .editorial-site .sustainability-story-photo { position: relative; top: auto; height: 400px; min-height: 0; }
 .editorial-site .contact-card { margin-bottom: 0; }
}
@media (max-width: 560px) {
 .editorial-site .photo-grid, .editorial-site .team-disciplines, .editorial-site .capability-grid, .editorial-site .priority-strip { grid-template-columns: 1fr; }
 .editorial-site .priority-strip { gap: 14px; }
 .editorial-site .priority-strip article { padding: 24px 22px; }
 .editorial-site .photo-frame, .team-discipline-photo, .editorial-site .capability-art { height: 280px; }
 .editorial-site .photo-copy h3, .editorial-site .capability-grid h3, .editorial-site .team-disciplines h2 { font-size: 26px; }
 .editorial-site .form-grid { grid-template-columns: 1fr; }
 .editorial-site .contact-layout form { padding: 25px 20px; }
 .editorial-site .contact-card { padding: 30px 25px; }
 .editorial-site .split h2, .development-overview h2 { font-size: 33px; }
 .editorial-site .purpose { padding: 30px; }
 .editorial-site .purpose .purpose-statement { font-size: 26px; }
 .editorial-site .development-stages strong { font-size: 25px; }
 .editorial-site .sustainability-priority { gap: 20px; min-height: 0; }
 .editorial-site .sustainability-priority h3 { font-size: 26px; }
}
@media (max-height: 760px) and (min-width: 851px) {
 .development-overview, .editorial-site .contact-layout aside { position: static; }
}
@media print {
 .development-overview, .editorial-site .contact-layout aside, .editorial-site .sustainability-story-photo { position: static; }
 .editorial-panorama { height: 240px; min-height: 0; }
}

/* Supplied copy blocks that sit outside the templates above. */
.contact-lead { font-size: 18px; line-height: 1.75; color: #123652; max-width: 60ch; margin-bottom: 32px; }
.sustainability-story-copy p { font-size: 17px; line-height: 1.8; color: #4e6157; }
.sustainability-story-copy p + p { margin-top: 16px; }
.sustainability-evidence { margin: 40px auto 0; max-width: 1240px; padding: 0 4px; font-size: 13px; line-height: 1.7; color: #5e6f66; }
.journal-intro-copy { max-width: 380px; padding-bottom: 8px; }
.journal-intro-copy p { font-size: 17px; line-height: 1.85; }
.journal-intro-copy p + p { margin-top: 14px; font-size: 15px; color: #5e7488; }
#business-selector .buyer-heading > p:last-child { text-align: left; justify-self: end; max-width: 440px; }
@media (max-width: 850px) {
  .journal-intro-copy { max-width: 520px; }
  .journal-intro-copy p { font-size: 15px; }
  #business-selector .buyer-heading > p:last-child { justify-self: start; }
}
@media (max-width: 560px) {
  .contact-lead { font-size: 16px; margin-bottom: 24px; }
  .sustainability-story-copy p { font-size: 15px; }
  .sustainability-evidence { margin-top: 28px; padding: 0 8px; font-size: 12px; }
}
/* Audience panels lead with the supplied description, set at heading scale. */
#business-selector .buyer-statement { font-family: var(--font-display); font-size: 30px; line-height: 1.32; letter-spacing: var(--title-tracking); color: #fff; max-width: 560px; margin: 0; text-wrap: balance; }
@media (max-width: 1100px) { #business-selector .buyer-statement { font-size: 27px; } }
@media (max-width: 560px) { #business-selector .buyer-statement { font-size: 22px; line-height: 1.38; } }

/* Homepage editorial cards: each card carries its own soft colour field, lit from the
   top-right corner where its icon sits. Body copy darkens to stay above 4.5:1 on the
   tint, and both card links sit on the same line at the foot of the cards. */
.editorial-site .editorial-card { display: flex; flex-direction: column; align-items: flex-start; border-radius: 16px; }
.editorial-site .editorial-card.responsible {
  background: radial-gradient(90% 80% at 100% 0%, #cfe9d7 0%, #cfe9d700 62%), linear-gradient(155deg, #f6fbf7 0%, #e6f3ea 100%);
  border-color: #d3e5d8;
}
.editorial-site .editorial-card.insights {
  background: radial-gradient(90% 80% at 100% 0%, #cfe2f8 0%, #cfe2f800 62%), linear-gradient(155deg, #f5f9fe 0%, #e4eefa 100%);
  border-color: #d2e2f4;
}
.editorial-site .editorial-card h2 { padding-right: 92px; }
.editorial-site .editorial-card > p { color: #405367; margin-bottom: 26px; }
.editorial-site .editorial-card .insight-topics { margin-bottom: 26px; }
.editorial-site .editorial-card > .text-link { margin-top: auto; }
.editorial-site .editorial-card.responsible > .text-link { color: #2f5a40; }
.editorial-site .editorial-card .insight-topics a { background: #ffffffb8; border-color: #c9dbec; }
.editorial-site .editorial-card .insight-topics a:hover { background: #083c80; border-color: #083c80; color: #fff; }
/* Flex cards ignore floats, so the icon tile is placed against the heading instead. */
.editorial-site .editorial-card .editorial-icon {
  position: absolute; top: 31px; right: 36px; float: none; margin: 0; shape-outside: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--icon-ring), 0 1px 2px #1236520f, 0 12px 26px -16px #1236525c;
}
@media (max-width: 1100px) {
  .editorial-site .editorial-card .editorial-icon { top: 21px; right: 28px; }
}
@media (max-width: 850px) {
  .editorial-site .editorial-card .editorial-icon { top: 16px; right: 22px; }
}
@media (max-width: 560px) {
  .editorial-site .editorial-card h2 { padding-right: 76px; }
  .editorial-site .editorial-card .editorial-icon { top: 19px; right: 20px; }
}

/* The supplied headline sits above the heading as the hero's one kicker. It keeps the
   document's sentence case rather than the old all-caps label. */
.site-index .showcase-content .hero-kicker { font-size: 13px; letter-spacing: .04em; font-weight: 600; margin-bottom: 20px; }
@media (max-width: 560px) { .site-index .showcase-content .hero-kicker { font-size: 12px; letter-spacing: .02em; } }

/* After the hero: the document's second paragraph as one large statement, then the
   four stages it names, in order. The stage words are tinted in the statement so the
   reader can match them to the numbered route beneath. */
.site-index .journey-layout { grid-template-columns: 1fr; gap: 56px; }
.site-index .journey-statement {
  max-width: 960px; margin: 0;
  font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 40px); font-weight: 400;
  line-height: 1.32; letter-spacing: var(--title-tracking); color: #123652; text-wrap: pretty;
}
.site-index .journey-statement span { color: var(--title-blue, #0768cc); }
.site-index .journey-stops { margin-top: 0; }
.site-index .journey-step {
  display: block; max-width: 230px; margin-top: 22px;
  font-family: var(--font-display); font-size: 20px; line-height: 1.35; color: #123652;
}
@media (max-width: 850px) {
  .site-index .journey-layout { gap: 40px; }
  .site-index .journey-step { font-size: 18px; }
}
@media (max-width: 560px) {
  .site-index .journey-statement { font-size: 24px; }
  .site-index .journey-step { font-size: 16px; margin-top: 16px; }
}
/* The section shares the page's content edges like every other section. Only the
   statement is held to a readable measure; the route and divider run full width. */
.site-index .journey-statement { max-width: 920px; text-wrap: balance; }

/* Page titles and section titles use the brand blue wherever they sit on a light
   background. Titles over photographs and dark panels (the homepage hero, What We Do,
   the homepage services band, the Our Approach photo panel, the Contact card, and the
   featured guide) keep their light colour. Card titles such as the Our Team
   disciplines stay in ink so the section titles above them lead. */
:root { --title-blue: #0768cc; }
.editorial-site .editorial-heading h1,
.editorial-site .approach-heading h1,
.editorial-site .journal-intro h1,
.editorial-site .article-header h1,
.editorial-site.site-about .split h2,
.editorial-site.site-about #approach h2,
.editorial-site #business-selector .buyer-heading h2,
.editorial-site.site-index .section-heading h2,
.editorial-site .editorial-card h2,
.editorial-site .development-overview h2,
.editorial-site #who-we-serve h2,
.editorial-site #why-work-with-us h2,
.editorial-site .sustainability-story-heading h2,
.editorial-site .journal-library-heading h2,
.editorial-site .journal-related-heading h2,
.editorial-site .article-body section h2,
.editorial-site .article-takeaway h2,
.editorial-site .article-sidebar-title,
.editorial-site .article-enquiry h2 { color: var(--title-blue); }

/* The space beside the statement carries one photograph: the bright warehouse aisle,
   anchored to the top-right corner and dissolving into the page toward the statement
   and the route below. It sits behind the content and never under the route labels. */
.site-index .connection-section { position: relative; overflow: hidden; isolation: isolate; }
.site-index .connection-section::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -60px; right: 0; width: min(56%, 920px); height: calc(78% + 60px);
  background: url('assets/hero/hero-distribution.webp') 70% 45% / cover no-repeat;
  -webkit-mask-image: radial-gradient(115% 95% at 100% 8%, #000 28%, #0000 72%);
  mask-image: radial-gradient(115% 95% at 100% 8%, #000 28%, #0000 72%);
  opacity: .5; filter: saturate(.8) contrast(.95);
  translate: 0 var(--py, 0px);
}
@media (max-width: 1100px) {
  .site-index .connection-section::before { width: 62%; opacity: .4; }
}
@media (max-width: 850px) {
  /* The statement fills the width on narrow screens, so there is no gap to fill. */
  .site-index .connection-section::before { display: none; }
}

/* The homepage hero photograph runs edge to edge with square corners on every screen,
   and fills the whole screen height on phones. lvh measures the screen with the browser
   toolbars collapsed, so the photograph still reaches the bottom edge behind Safari's
   floating toolbar instead of stopping short of it. */
.site-index .showcase-hero, .site-index .showcase-main { margin-inline: 0; border-radius: 0; }
@media (max-width: 850px) {
  .page-index .showcase-main { min-height: 100vh; min-height: 100lvh; }
}