/* BC Media Lab: one stylesheet for the whole site. Every value is read off the live Wix page (computed styles and
   measured screenshots at 1280 px, shots-compare/wix): its colours, its two type faces and each section's layout.
   Headings are Work Sans (Open Font License) from the very files Wix serves this page, declared the way Wix declares
   them: one file for weight 400 and one for 700, so nothing is thickened by the browser. Wix sets body text in
   Proxima Nova, a licensed font this site does not carry, so body text falls back to the nearest system sans. */
@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/work-sans-wix-400.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/work-sans-wix-700.woff2") format("woff2");
}

:root {
  --green: #6cac4c;
  --text: #000000;
  --nav: #000000;
  --white: #ffffff;
  --heading: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --content: 980px;
  --slide-ms: 1000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 15px; line-height: 1.875; color: var(--text); background: var(--white); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; margin: 0; }
/* Measured on the live page: every heading, subtitle, team name and team role asks for 700 (the 700 file above). */
h1, h2, h3, .lead, .team-grid .role { font-weight: 700; }
h2 { font-size: 40px; line-height: 1.35; color: var(--green); text-align: center; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--nav); outline-offset: 2px; }
section { scroll-margin-top: 16px; }
.lead { text-align: center; font-family: var(--heading); font-size: 18px; line-height: 1.75; margin: 4px 0 0; }
.sr, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; width: auto; height: auto; clip: auto; left: 16px; top: 16px; padding: 8px 16px; background: var(--white); z-index: 10; }

/* Header: logo centred, the tag under its right end, the section links below */
.site-header { text-align: center; padding: 48px 16px 0; height: 280px; }
.brand { display: inline-block; text-decoration: none; color: var(--text); width: min(570px, 90vw); }
.brand img { width: 100%; }
.brand-tag { display: block; text-align: right; font-size: 15px; margin-top: -24px; padding-right: 36px; }
/* Each link padded 8 px a side with no gap, line 30 px, and room kept on the right where Wix keeps its hidden "More" item */
.site-nav { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 57px; padding-left: 52px; font-size: 14px; line-height: 30px; }
.site-nav a { padding: 0 8px; }
.site-nav a { color: var(--nav); text-decoration: none; }
.site-nav a:hover { color: var(--green); }

/* Headline, then the full-width slideshow (Wix: 72 px headline, an 810 px strip) */
.hero { text-align: center; padding: 60px 16px 70px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.25; color: var(--green); }

.slideshow { position: relative; height: min(810px, 63.3vw); overflow: hidden; background: #e9f0fa; }
.slides { list-style: none; margin: 0; padding: 0; height: 100%; }
/* Only the picture coming in and the one going out animate. A picture that has finished leaving jumps straight back to
   its waiting place off the right edge: animating that return is what sent a picture flying back across the others. */
.slide { position: absolute; inset: 0; transform: translateX(100%); }
.slide.is-current, .slide.is-leaving { transition: transform var(--slide-ms) ease-in-out; }
.slide.is-current { transform: translateX(0); z-index: 1; }
.slide.is-leaving { transform: translateX(-100%); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 8px; }
.slide-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; }
.slide-dots button[aria-current="true"] { background: var(--white); }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* About: the city render behind a white card */
.about { background: url("img/about-bg.webp") center / cover no-repeat; min-height: 1060px; padding: 257px 16px 60px; }
.about-card { background: var(--white); max-width: 820px; margin: 0 auto; padding: 55px 60px 60px; text-align: center; }
.about-card h2 { margin-bottom: 27px; }
.about-card p { margin: 0 0 28px; }
.about-card a:not(.btn) { color: inherit; text-decoration: none; }
.btn { display: inline-block; background: var(--green); color: var(--white); border: 0; padding: 0; width: 124px; text-align: center; font: 15px/45px var(--body); text-decoration: none; cursor: pointer; transition: opacity 0.4s; }
.btn:hover { opacity: 0.6; }
.about-card .btn { margin-top: 28px; }

/* Capabilities: green text half beside the console photo */
.capabilities { display: grid; grid-template-columns: 1fr 1fr; background: var(--green); color: var(--white); }
.capabilities-text { padding: 120px 90px 120px 90px; }
.capabilities h2 { color: var(--white); text-align: left; }
.capabilities .lead { text-align: left; margin: 4px 0 84px; }
.capabilities-img { width: 100%; height: 100%; object-fit: cover; }
.services { list-style: none; margin: 0; padding: 0; }
.services > li { position: relative; padding-left: 80px; margin-bottom: 41px; }
.services > li::before { content: "\2606"; position: absolute; left: 0; top: -6px; font-size: 49px; line-height: 1; font-weight: 200; }
.services h3 { font-size: 22px; line-height: 1.41; text-transform: uppercase; margin-bottom: 8px; }
/* Wix writes each item as a line starting with a filled dot, wrapped lines back at the left edge */
.services ul { list-style: none; margin: 0; padding: 0; }
.services ul li::before { content: "\25CF\00A0"; }

/* Projects: picture against the left of the page, text centred on it to its right. Boxes measured on the live page at
   1280 px: pictures 560 wide at x 80, each its own height (the width/height on the img), text 460 wide at x 690. */
.projects { max-width: 1280px; margin: 0 auto; padding: 120px 16px 80px 80px; }
.projects .lead { margin: 29px 0 85px; }
.project { display: grid; grid-template-columns: 560px 460px; column-gap: 50px; align-items: center; margin-bottom: 40px; }
.project:last-child { margin-bottom: 0; }
.project img { width: 100%; height: auto; aspect-ratio: 560 / 460; object-fit: cover; }
.project img[height="520"] { aspect-ratio: 560 / 520; }
.project img[height="500"] { aspect-ratio: 560 / 500; }
.project h3 { color: var(--green); font-size: 22px; line-height: 1.41; text-align: center; margin-bottom: 33px; }
.project p { text-align: center; margin: 0; }

/* Team: green band, four across the full width */
/* Team: four columns of 320 across 1280, text 220 wide. Each card's picture, name, role and quote sit on shared rows
   (subgrid), so a two-line name or role pushes its whole row down, as on the live page. */
.team { background: var(--green); color: var(--white); padding: 120px 0 64px; }
.team h2 { color: var(--white); }
.team .lead { margin: 29px 0 125px; }
.team-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.team-grid li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 0 50px; }
.team-grid img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin: 0 auto 57px; }
.team-grid h3 { font-size: 22px; line-height: 1.41; margin-bottom: 47px; }
.team-grid .role { font-family: var(--heading); font-size: 18px; line-height: 1.75; margin: 0 0 33px; }
.team-grid .quote { margin: 0 0 66px; }

/* Clients: two columns of large logos */
/* Clients: cells of 460 x 340, 40 apart across and 36 down, the last row a 212-tall strip (live page at 1280 px) */
.clients { max-width: var(--content); margin: 0 auto; padding: 100px 16px 76px; }
.clients .lead { margin-bottom: 82px; }
.logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 460px); justify-content: center; row-gap: 36px; column-gap: 40px; }
.logo-grid li { height: 340px; display: flex; align-items: center; justify-content: center; }
.logo-grid li:nth-last-child(-n+2) { height: 212px; }
.logo-grid img { max-width: 100%; height: auto; } /* each logo carries its Wix box as width/height */

/* Contact: the form on the green band, beside the picture in its frame */
.contact { background: var(--green); color: var(--white); padding: 80px 16px; }
/* Live page at 1280 px: text column 460 wide at x 130, picture 560 wide at x 640 */
.contact-inner { max-width: 1280px; margin: 0 auto; padding: 0 80px 0 114px; display: grid; grid-template-columns: 460px 560px; column-gap: 50px; align-items: center; }
.contact-text { text-align: center; }
.contact-text h2 { color: var(--white); margin-bottom: 16px; }
.contact-text p { margin: 0; font-size: 15px; }
.contact-text p + p { margin-top: 7px; }
.contact-text a { text-decoration: none; }
.contact-img { width: 560px; height: 760px; object-fit: cover; }
.contact-form { display: grid; gap: 10px; margin-top: 4px; }
.contact-form label { display: block; }
.contact-form input, .contact-form textarea { width: 100%; font: 14px var(--body); color: var(--white); background: transparent; border: 1px solid var(--white); border-radius: 0; padding: 12px 12px; }
.contact-form input { height: 50px; }
.contact-form textarea { height: 125px; resize: vertical; }
.contact-form ::placeholder { color: var(--white); opacity: 1; }
.contact-form button { justify-self: end; width: 142px; height: 47px; margin-top: 0; background: var(--white); color: var(--text); border: 0; font: bold 15px var(--body); cursor: pointer; }
.contact-form button:hover { opacity: 0.8; }
.hp { position: absolute; left: -9999px; }

.site-footer { text-align: center; padding: 60px 16px; font-size: 14px; }
.thanks { max-width: 620px; margin: 120px auto; padding: 0 16px; text-align: center; }

@media (max-width: 1100px) {
  .projects { padding-left: 16px; }
  .project { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-img { width: 100%; height: auto; aspect-ratio: 560 / 760; }
}
@media (max-width: 900px) {
  .capabilities { grid-template-columns: 1fr; }
  .capabilities-text { padding: 80px 24px; }
  .capabilities-img { height: 420px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { height: auto; padding-bottom: 24px; }
  .about { min-height: 0; padding: 80px 16px; }
  .about-card { padding: 40px 24px; }
  .project { grid-template-columns: 1fr; row-gap: 20px; }
  .team-grid { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: 1fr; }
  .logo-grid li { height: 240px; }
}