@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 400;
  src: url('./ABCSolarDisplay-Regular.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 500;
  src: url('./ABCSolarDisplay-Medium.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 700;
  src: url('./ABCSolarDisplay-Ultra.woff2') format('woff2');
  font-display: block;
}

:root {
  --radius: 10px;
  --gutter: 20px;
  --block-spacing: 60px;
  --navbar-spacing: 30px; @media (width >= 768px) { --navbar-spacing: 60px; }
  --navbar-height: 29px; @media (width >= 1280px) { --navbar-height: 49px; }
  --text-spacing: 10px;
  --footer-bleed: 100px;

  --font-size-body: 15px;

  --font-family-display: 'ABCSolarDisplay', sans-serif;
  --font-family-mono: 'Courier New', monospace;

  --font-body: var(--font-size-body) / 17px var(--font-family-mono);

  --font-display-reg-sm: 20px / 1 var(--font-family-display);
  --font-display-reg-md: 35px / 1 var(--font-family-display);

  --font-display-reg: var(--font-display-reg-sm); @media (width >= 1280px) { --font-display-reg: var(--font-display-reg-md); }

  --font-display-med-md: 30px / 1 var(--font-family-display);
  --font-display-med-lg: 50px / 1 var(--font-family-display);
  --font-display-med-xl: 60px / 1 var(--font-family-display);

  --font-display-med: var(--font-display-med-md); @media (width >= 1280px) { --font-display-med: var(--font-display-med-xl); }

  --font-size-logo: 40px; @media (width >= 1280px) { --font-size-logo: 70px; }

  --font-logo: 700 var(--font-size-logo) / 1 var(--font-family-display);

  --color-black-1: #0A0A0A; --color-black: var(--color-black-1);
  --color-black-2: #2A2A2A; --color-darkgrey: var(--color-black-2);
  --color-black-3: #5F5F5F; --color-shadow: var(--color-black-3);
  --color-black-4: #B9B9B9; --color-midgrey: var(--color-black-4);
  --color-black-5: #E5E5E5; --color-lightgrey: var(--color-black-5);
  --color-black-6: #EFEFEF; --color-brightgrey: var(--color-black-6);
  --color-black-7: #FAFAFA; --color-white: var(--color-black-7);
  --color-black-8: #FFFFFF; --color-blank: var(--color-black-8);

  --color-cyan-1: #00E2E2; --color-cyan: var(--color-cyan-1);
  --color-cyan-2: #64ECEC;
  --color-cyan-3: #C8F5F5;
  --color-cyan-4: #EDF9F9;

  --color-blue-1: #00AFFF; --color-blue: var(--color-blue-1);
  --color-blue-2: #C8EBFB;
  --color-blue-3: #EDF6FA;

  --color-red-1: #F52D00; --color-red: var(--color-red-1);

  --z-navbar: 2000;
  --z-skipper: 1000;
  --z-content: 500;
  --z-footer: 100;
}

:root {
  --columns: 4;
  @media (width >= 1280px) { --columns: 15; }
}

:root {
  --color-page: var(--color-white);
  --color-frame: var(--color-blank);
  --color-text: var(--color-black);
  --color-muted: var(--color-midgrey);

  .navbar {
    --color-frame: var(--color-brightgrey);
  }

  .cta {
    --color-frame: var(--color-cyan-4);
    --color-text: var(--color-cyan-1);
    --color-muted: var(--color-cyan-3);
  }
}

.template-case, .template-cases {
  --color-page: var(--color-black);
  --color-frame: var(--color-darkgrey);
  --color-text: var(--color-white);
  --color-muted: var(--color-shadow);

  .navbar {
    --color-frame: var(--color-darkgrey);
  }

  .cta {
    --color-frame: var(--color-cyan-2);
    --color-text: var(--color-white);
    --color-muted: var(--color-cyan-3);
  }
}

.template-services {
  --color-page: var(--color-white);
  --color-frame: var(--color-blank);
  --color-text: var(--color-blue-1);
  --color-muted: var(--color-blue-2);

  .navbar {
    --color-frame: var(--color-blue-3);
  }

  .cta {
    --color-frame: var(--color-blank);
    --color-text: var(--color-blue-1);
    --color-muted: var(--color-blue-2);
  }
}

*, ::before, ::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-page);
  color: var(--color-text);
}
body {
  font: var(--font-body);
}

h1, h2, h3, h4, h5, h6, input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

ul[role='list'], ol[role='list'] {
  list-style: none;
}

button {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
a {
  text-decoration: none;
  color: var(--color-muted);
  &:hover { color: var(--color-text); }
  transition: color 300ms ease-in-out;
}
.legal a:not([class]) {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  &:hover {
    text-decoration: none;
    color: inherit;
  }
}

pre {
  white-space: pre-wrap;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
img, svg, video, canvas {
  height: auto;
}

.hidden, [hidden] { display: none }
.invisible, .skipper:not(:active, :focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  user-select: none;
}
.invisible {
  &::before { content: "\00a0"; }
  &::after  { content: "\00a0"; }
}
.skipper {
  z-index: var(--z-skipper);
  position: relative;
  display: block;
  padding: var(--gutter);
  text-decoration: none;
  text-align: center;
  background-color: var(--color-cyan-3);
  color: var(--color-black);
}

.logo {
  font: var(--font-logo);
  color: var(--color-text);

  &:hover {
    color: var(--color-muted);
  }

  .navbar & {
    line-height: var(--navbar-height);
  }
}

.font-reg {
  font: var(--font-display-reg);

  h1, h2, h3, h4, h5, h6, dt {
    font: var(--font-body);

    & + * { margin-top: 0; }
  }
}

.navbar-wrap {
  z-index: var(--z-navbar);
  pointer-events: none;
  position: sticky;
  inset-block-start: var(--navbar-spacing);
  margin-block-start: calc(50svh - 0.5 * var(--navbar-height));
  margin-block-end: calc(var(--block-spacing) + var(--footer-bleed));
  height: var(--navbar-height);
}
.navbar-wrap + * {
  margin-block-start: calc(-1 * var(--footer-bleed));
}
.navbar {
  pointer-events: all;
  height: var(--navbar-height);
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 2 / -2; }
  @media (width >= 1280px) { grid-column: 4 / -4; }
  @media (width >= 1280px) { grid-column: 4 / -4; }
  @media (width >= 1680px) { grid-column: 5 / -5; }
  @media (width >= 2560px) { grid-column: 6 / -6; }
}

.menu {
  height: 100%;
  padding-inline: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu ul {
  display: flex;
  li.active a {
    color: var(--color-text);
  }
}
.menu-langs {
  li {
    display: inline-flex;
    &:not(:last-child)::after {
      content: "/";
    }
  }
}
.menu-items {
  justify-content: space-around;
  gap: 30px;
  font: var(--font-display-reg);
}

nav-bar {
  display: block;
}
nav-bar .logo {
  display: block;
  max-width: fit-content;
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-inline: auto;
}
nav-bar :is(.menu-items, .logo) {
  transition: opacity 300ms ease-in-out;
}
nav-bar:not([open]) .menu-items,
nav-bar[open] .logo {
  pointer-events: none;
  opacity: 0;
}

#content {
  position: relative;
  z-index: var(--z-content);
}

.page:not(:has(+ .footer-wrap)) {
  margin-block-end: 50svh;
}

.rtf > * + * {
  margin-block-start: var(--text-spacing);
}

.section {
  padding-inline: var(--gutter);
}
.section + .section {
  margin-block-start: var(--block-spacing);
}

.grid, .grid2, .grid3 {
  display: grid;
  gap: var(--gutter);
}
.grid {
  grid-template-columns: repeat(var(--columns), 1fr);
}
.grid2 {
  grid-template-columns: 1fr;
  @media (width >= 768px) { grid-template-columns: repeat(2, 1fr); }
}
.grid3 {
  grid-template-columns: 1fr;
  @media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
}

.stack {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
.spread {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.frame {
  position: relative;
  background-color: var(--color-frame);
  color: var(--color-text);
  border-radius: var(--radius);
}
.frame-pad {
  padding: 15px;
}

.frame-inner {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}

.corners-top, .corners-bot {
  position: absolute;
  inset-inline: 0;

  --size: 15px;
  --edge: 0;
  @media (resolution >= 2x) { --edge: -0.5px; }

  &::before, &::after {
    content: "";
    display: block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-color: var(--color-text);
    border-width: 1px;
  }

  &::before {
    inset-inline-start: var(--edge);
  }

  &::after {
    inset-inline-end: var(--edge);
  }
}
.corners-top {
  inset-block-start: var(--edge);

  &::before, &::after {
    border-block-start-style: solid;
  }

  &::before {
    border-inline-start-style: solid;
    border-start-start-radius: var(--radius);
  }

  &::after {
    border-inline-end-style: solid;
    border-start-end-radius: var(--radius);
  }
}
.corners-bot {
  inset-block-end: calc(var(--size) + var(--edge));

  &::before, &::after {
    border-block-end-style: solid;
  }

  &::before {
    border-inline-start-style: solid;
    border-end-start-radius: var(--radius);
  }

  &::after {
    border-inline-end-style: solid;
    border-end-end-radius: var(--radius);
  }
}

.text-with-heading, .cta {
  display: grid;
  grid-template-columns: subgrid;

  grid-column: 1 / -1;
  @media (width >= 2560px) { grid-column: 2 / -2; }

  padding-inline: 15px;
  padding-block: var(--block-spacing);
  @media (width >= 768px) { padding-block: 80px; }

  .heading {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    padding: 15px;
  }

  .rtf {
    font: var(--font-display-med);
    text-align: center;

    grid-column: 1 / -1;
    @media (width >= 1680px) { grid-column: 2 / -2; }
  }
}
.cta {
  @media (width >=  768px) { grid-column: 2 / -2; }
  @media (width >= 1280px) { grid-column: 3 / -3; }
  @media (width >= 2560px) { grid-column: 4 / -4; }
}

.media {
  grid-column: 1 / -1;
  position: relative;
  img, video { width: 100%; object-fit: cover; }
  figcaption { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: 15px; }
}

.billboard {
  grid-column: 1 / -1;
  @media (width >= 1280px) { grid-column: 3 / -3; }
  @media (width >= 2560px) { grid-column: 4 / -4; }
}

.clip {
  grid-column-end: span 2;
  @media (width >=  768px) { grid-column-end: span 1; }
  @media (width >= 1280px) { grid-column-end: span 3; }
}

.grid:has(.sidebar, .video-description, .video-credits) {
  @media (width >= 768px) and (width < 1280px) { --columns: 7; }
}

.sidebar {
  @media (width >= 768px) { align-self: start; position: sticky; inset-block-start: var(--gutter); }

  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 1 / 3; }
  @media (width >= 1280px) { grid-column: 1 / 5; }
  @media (width >= 1680px) { grid-column: 1 / 6; }
}
.sidebar + * {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 3 / -1; }
  @media (width >= 1280px) { grid-column: 5 / -1; }
  @media (width >= 1680px) { grid-column: 6 / -1; }
}

.video-description, .video-credits {
  grid-column: 1 / -1;
  @media (width >= 1680px) { grid-column: 1 / -3; }
  @media (width >= 2560px) { grid-column: 2 / -4; }

  display: grid;
  grid-template-columns: subgrid;

  padding-block-end: var(--block-spacing);
}
.video-description-1 {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 1 / 3; }
  @media (width >= 1280px) { grid-column: 1 / 5; }
  @media (width >= 2560px) { grid-column: 1 / 4; }
}
.video-description-2 {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 3 / -1; }
  @media (width >= 1280px) { grid-column: 5 / -1; }
  @media (width >= 2560px) { grid-column: 4 / -1; }
}
.video-credits dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--text-spacing);
}
.video-credit {
  grid-column-end: span 4;
  @media (width >=  768px) { grid-column-end: span 3; }
  @media (width >= 1280px) { grid-column-end: span 5; }
  @media (width >= 1680px) { grid-column-end: span 4; }
  @media (width >= 2560px) { grid-column-end: span 3; }
}

.services {
  .frame {
    color: var(--color-muted);
    transition: color 300ms ease-in-out;
  }

  .--active {
    .frame {
      color: var(--color-text);
    }
  }
}

.legal {
  --offset: 0;
  @media (width >= 1280px) { --offset: 2; }
  @media (width >= 2560px) { --offset: 3; }

  text-align: center;
  grid-column: calc(var(--offset) + 1) / calc(-1 * (var(--offset) + 1));
}

.footer-wrap {
  z-index: var(--z-footer);
  position: relative;
  min-height: 100svh;
  margin-block-start: calc(-1 * var(--footer-bleed));
  padding-block-start: var(--footer-bleed);
}
.footer-wrap .paper {
  position: absolute;
  inset-block: 0 auto;
  inset-inline: 0;
  width: 100%;
  height: 100%;
}
.footer-wrap .section {
  padding-block: var(--block-spacing);
}
.footer, .footer-row {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--block-spacing);
  @media (width >=  768px) { row-gap: 80px; }
  @media (width >= 1280px) { row-gap: 120px; }
}
.footer {
  grid-column: 1 / -1;
  @media (width >= 1280px) { grid-column: 1 / -4; }
  @media (width >= 1680px) { grid-column: 1 / -6; }
  @media (width >= 2560px) { grid-column: 1 / -8; }
}
.footer-row {
  grid-column: 1 / -1;
}
.footer-smallprint {
  align-items: end;
  row-gap: 10px;
}
.footer-col {
  grid-column-end: span 4;
  @media (width >=  768px) { grid-column-end: span 2; }
  @media (width >= 1280px) { grid-column-end: span 6; }
  @media (width >= 1680px) { grid-column-end: span 5; }
  @media (width >= 2560px) { grid-column-end: span 4; }
}

.paper {
  overflow: hidden;
}
.paper-inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 130px;
  padding-block-start: var(--block-spacing);

  @media (width >= 1280px) {
    gap: 230px;
    padding-block-start: 120px;
  }
}
.paper-row {
  display: flex;
  flex-direction: row;
}
.paper-col {
  transform: rotate(-45deg);
  transform-origin: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}
.paper-smallprint {
  padding-inline-start: 4em;
  text-transform: uppercase;
  a { text-transform: none; }
}