/* ==========================================================================
   Hudson & Co — main stylesheet

   THE GRID
   A column grid inside the page margins:
     - margins: 100px at 1440px and wider, shrinking to 20px on phones
     - 12 columns on desktop, 8 on tablet, 4 on phones, 20px between columns
     - horizontal rows every 60px from the top of the page
   Rules:
     1. Blocks span whole columns, so their edges sit on column lines.
     2. Gaps between blocks side by side are the 20px column gap.
     3. Sections start on a row line; cards and images are sized in rows
        (assets/js/main.js nudges things onto the rows).
     4. Text flows naturally inside blocks. Spacing uses multiples of 10.
   ========================================================================== */

:root {
  --bg: #0f0f10;
  --white: #eaeaea;
  --grey: #b3b3b3;
  --grey-80: rgba(179, 179, 179, 0.8);
  --grey-60: rgba(179, 179, 179, 0.6);
  --font: "paralucent", sans-serif;

  /* Minimum side margin: 100px at 1440px and wider, shrinking to 20px at 375px */
  --pad: clamp(20px, calc(20px + (100vw - 375px) * 0.0751174), 100px);

  --cols: 12;
  --gutter: 20px;         /* space between columns */
  --row: 60px;            /* horizontal row spacing */
  --cw: calc(100vw - 2 * var(--pad));    /* content width */
  --colw: calc((var(--cw) - (var(--cols) - 1) * var(--gutter)) / var(--cols));   /* one column */

  /* Common block widths, as column spans (set per screen size below) */
  --narrow: var(--cw);    /* centred text: hero, about, policies, case study text */
  --mid: var(--cw);       /* forms and short intros */
  --wide: var(--cw);      /* large images and feature boxes */
  --card: var(--cw);      /* one card in a 3-up row (full width when stacked) */

  /* The frame (see "Page grid" below): measured from the inner page width */
  --g-col: calc(var(--cw) / 12);    /* main column */
  --g-row: calc(var(--cw) / 24);    /* main row */
  --g-fine: calc(var(--cw) / 72);   /* fine square */

  --accent: #a6ffc2;                       /* light "matrix" green: button borders, link underlines */
  --line: rgba(234, 234, 234, 0.06);       /* soft white: nav underline, gutter edges, main grid */
  --line-soft: rgba(234, 234, 234, 0.04);  /* softer white: fine grid */
}
/* span(n) = n columns + the gaps between them */
@media (min-width: 768px) {
  :root {
    --cols: 8;
    --narrow: calc(var(--colw) * 6 + var(--gutter) * 5);
    --mid: calc(var(--colw) * 6 + var(--gutter) * 5);
  }
}
@media (min-width: 1025px) {
  :root {
    --cols: 12;
    --narrow: calc(var(--colw) * 8 + var(--gutter) * 7);
    --mid: calc(var(--colw) * 6 + var(--gutter) * 5);
    --wide: calc(var(--colw) * 10 + var(--gutter) * 9);
    --card: calc(var(--colw) * 4 + var(--gutter) * 3);
  }
}
@media (max-width: 767px) { :root { --cols: 4; } }

/* Press G to show the frame brightly, in red and over the content, while
   checking alignment (grid, gutter lines and nav underline) */
html.show-grid { --line: rgba(242, 0, 0, 0.6); --line-soft: rgba(242, 0, 0, 0.25); }
html.show-grid .inner-grid { z-index: 9998; }

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

html {
  scroll-padding-top: 100px;          /* in-page links land below the fixed nav */
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: #333;
  font-family: var(--font);
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep each page's bottom spacing inside <main>, so the footer's own spacing
   (and grid snapping) isn't swallowed by margin collapsing */
main { display: flow-root; }

h1, h2, h3, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; background-color: transparent; }
img { border-style: none; height: auto; max-width: 100%; }

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 20px;
  top: 20px;
  width: auto;
  height: auto;
  z-index: 100000;
  padding: 10px 20px;
  background: var(--white);
  color: var(--bg);
}

/* Fade in, as Elementor's fadeIn entrance animation ---------------------- */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.js .fade { visibility: hidden; }
.js .fade.is-in { visibility: visible; animation: fadeIn 2s ease; }

/* Buttons: always 40px tall ------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 11px 20px 11px 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background-color: rgba(15, 15, 16, 0);
  color: var(--grey);
  fill: var(--grey);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  transition: transform 0.5s ease-out;
}
.btn--text { padding: 11px 20px; }
.btn:hover,
.btn:focus {
  transform: translateY(-8px);
  background-color: var(--white);
  color: var(--bg);
  fill: var(--bg);
}
.btn__inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}
.btn__icon { display: flex; align-items: center; }
.btn__icon svg { width: 1em; height: auto; }

.btn-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Gutter edges --------------------------------------------------------------
   A soft white line down each side where the page gutter meets the content,
   fixed to the screen so they run the full height. They sit over the content
   (but under the nav) and never catch clicks. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc((100% - var(--cw)) / 2);
  width: var(--cw);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  pointer-events: none;
  z-index: 9999;
}

/* Page grid -----------------------------------------------------------------
   Measured from the inner page (inside the gutter lines, below the nav):
   - main columns: the inner page split into 12
   - fine lines: each main column split into 12 again (144 across), both ways,
     so the fine cells are square
   - main rows: every 6 fine rows, counted down from the nav
   Everything carries on at the same rhythm out through the gutters to the
   edges of the screen, and scrolls with the page, behind the content (and
   behind the glass nav).
   main.js draws it on this screen-sized canvas, redrawing as you scroll, and
   snaps every line to a whole screen pixel so they're all evenly crisp
   (colours come from --line / --line-soft). A canvas the size of the whole
   page would be too big for some phones, hence the redraw. */
.inner-grid {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* Inner page size: a small live "width × height" label tucked 10px inside the
   corner where the nav meets the left gutter line. Added by main.js. */
.page-dims {
  position: fixed;
  top: 110px;                                       /* nav (100px) + 10px */
  left: calc((100% - var(--cw)) / 2 + 10px);        /* gutter line + 10px */
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(234, 234, 234, 0.4);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;                                  /* above everything except the skip link */
  display: flex;
  align-items: center;
  height: 100px;                                   /* includes the underline */
  border-bottom: 1px solid var(--line);
  background: rgba(15, 15, 16, 0.92);              /* fallback where blur isn't supported */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(15, 15, 16, 0.6);             /* black glass */
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }
}
.site-header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: var(--cw);
  margin: 0 auto;
}
.site-header__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.site-header__col--end { align-items: flex-end; }
.site-header__logo {
  font-size: 18px;
  font-weight: 300;
  line-height: 20px;
  color: #fff;
}
.site-header__logo a { color: var(--white); }

/* Hero -------------------------------------------------------------------- */

/* On the frame: the hero ends on a main row line (the largest whole number of
   rows that fits the screen below the nav); the headline is 10 columns wide,
   each of its lines takes exactly one main row, and its top is snapped onto a
   row line by main.js (headline set at 64/72 for now); the intro is 8 columns;
   gaps are one fine square. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--g-col) * 10);
  max-width: var(--cw);
}
.hero__title {
  align-self: stretch;               /* the full 10 columns */
  text-align: center;
  font-size: 64px;
  font-weight: 400;
  line-height: 72px;
  color: var(--white);
}
.hero__title span {
  color: var(--grey);
  opacity: 0.6;
  font-weight: 300;
}
.hero__lead {
  width: calc(var(--g-col) * 8);     /* exactly 8 columns */
  max-width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 300;
  line-height: 32px;
  color: var(--grey);
}

/* Line breaks only on tablet and up; phones wrap naturally */
@media (max-width: 767px) { .br-wide { display: none; } }
@media (max-width: 1279px) { .br-lg { display: none; } }   /* only where the line fits */

.hero__note {
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  color: var(--grey-60);
}

/* Hero spacing: headline to description 20px, then 30px between everything
   else (description to buttons, between the two buttons, buttons to note). */
.hero__lead { margin-top: 20px; }
.hero__inner > .btn-row { margin-top: 30px; gap: 30px; }
.hero__note { margin-top: 30px; }

/* Plain text link: underlined, brightens on hover */
.link {
  color: var(--grey);
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.link:hover,
.link:focus-visible { color: var(--white); }

/* Sections ---------------------------------------------------------------- */

.section {
  position: relative;
  margin: 300px 0 40px;
  transform: translateY(-140px);
}
.section.work { margin-top: 0; }
.section.cta { margin-bottom: 100px; }

.section__inner {
  display: flex;
  flex-direction: column;
  width: var(--cw);
  margin: 0 auto;
  gap: 20px;
}
.work .section__inner,
.services .section__inner { gap: 40px; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  max-width: 100%;
}
.stack--about,
.stack--services,
.stack--cta { width: var(--narrow); }

.title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 56px;
  font-weight: 400;
  line-height: 60px;
  color: var(--white);
}
.text {
  text-align: center;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey-80);
}
.text--mb10 { margin-bottom: 10px; }
.text--mb30 { margin-bottom: 30px; }

.label,
.project__name,
.card__title {
  text-align: start;
  font-size: 20px;
  font-weight: 300;
  line-height: 20px;
  color: var(--white);
}
.label::before,
.project__name::before,
.card__title::before { content: "// "; }

/* Work: three cards on the grid, images cropped to a unit-high frame ------- */

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--gutter);
}
.project {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.project img {
  display: block;
  width: 100%;
  height: round(nearest, var(--card) * 0.5625, var(--row));
  object-fit: cover;
  border: 1px solid var(--grey);
  border-radius: 2px;
  transition: transform 0.5s ease-out;
}
.project img:hover { transform: translateY(-8px); }
.project__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.project__services {
  text-align: start;
  font-size: 20px;
  font-weight: 300;
  line-height: 20px;
  color: var(--grey);
  opacity: 0.6;
}

/* Services ---------------------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--gutter);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px;
  border: 1px solid rgba(179, 179, 179, 0.6);
  border-radius: 2px;
  cursor: default;
  transition: border-color 0.5s;
}
.card:hover { border-color: var(--white); }
.card__text {
  text-align: start;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey);
  opacity: 0.6;
}

/* Footer: two rows tall (one on phones) ---------------------------------- */

.site-footer {
  position: relative;
  padding: 50px 0;
}
.site-footer__inner {
  display: flex;
  flex-direction: row;
  width: var(--cw);
  margin: 0 auto;
}
.site-footer__left { flex: 1 1 0; min-width: 0; }
.site-footer__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
}
.site-footer p {
  font-size: 18px;
  font-weight: 300;
  line-height: 20px;
  color: var(--grey-60);
  cursor: default;
}
.site-footer a { color: var(--grey-60); transition: color 0.5s; cursor: pointer; }
.site-footer a:hover,
.site-footer a:focus { color: var(--white); }

/* Contact ----------------------------------------------------------------- */

.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.contact__inner {
  width: var(--mid);
  max-width: var(--cw);
  margin: 0 auto;
}
.contact__title {
  margin-bottom: 20px;
  text-align: start;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  color: var(--white);
}
.contact__intro { margin-bottom: 40px; }
.contact__intro p {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey);
}
.contact__intro p:last-child { margin-bottom: 0; }

.field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.field label {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: #fff;
}
.field--required label::after {
  content: " *";
  color: red;
  padding-inline-start: 0.2em;
}
.field input,
.field textarea {
  display: block;
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--white);
  border-radius: 2px;
  background-color: var(--white);
  color: var(--bg);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus,
.field textarea:focus { outline: 0; box-shadow: none; }
.field input::placeholder,
.field textarea::placeholder { color: inherit; font-family: inherit; opacity: 0.6; }
.field textarea { height: 140px; }

.field-spacer { height: 0; margin-bottom: 20px; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.submit {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background-color: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s;
}
.submit:hover,
.submit:focus { background-color: var(--white); color: var(--bg); }

.form-message {
  margin: 20px 0;
  font-family: "aktiv-grotesk", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
}
.form-message--success { color: #5cb85c; }
.form-message--error { color: #d9534f; }

/* Policy pages (privacy, cookies) ------------------------------------------ */

.policy {
  position: relative;
  padding: 40px 0;
  margin-bottom: 200px;
  transform: translateY(140px);
}
.policy__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: var(--narrow);
  max-width: var(--cw);
  margin: 0 auto;
}
.policy__sec { display: flex; flex-direction: column; }
.policy__title {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  color: var(--white);
}
.policy__heading {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--white);
}
.policy__text {
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey);
}
.policy__text p { margin-bottom: 10px; }
.policy__text a { color: var(--grey); }
.policy__text a:hover,
.policy__text a:focus { color: var(--white); }
.policy__text ul,
.cs-text ul { margin: 0; padding-left: 40px; }
.policy__btn { margin-top: 20px; }

/* Case study (Chasing Cards) ---------------------------------------------- */

.cs {
  position: relative;
  padding: 40px 0;
  margin-bottom: 200px;
  transform: translateY(140px);
}
.cs__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: var(--cw);
  margin: 0 auto;
}
.cs-head,
.cs-hero,
.cs-text,
.cs-box { display: flex; flex-direction: column; max-width: 100%; }
.cs-head { width: var(--mid); }
.cs-head__title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  color: var(--white);
}
.cs-head__sub {
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey);
}
.cs-head__sub p { margin-bottom: 10px; }

.cs-hero { width: var(--wide); margin: 20px 0 40px; }
.cs-media { text-align: center; }
.cs-media img { display: inline-block; vertical-align: middle; }
.cs-hero img { border-radius: 2px; }

.cs-text { width: var(--narrow); }
.cs-text__label {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  color: var(--white);
}
.cs-text__body {
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: var(--grey);
}
.cs-text__body p { margin-bottom: 10px; }
.cs-text__btn { margin-top: 20px; }

.cs-box {
  width: var(--wide);
  margin: 40px 0;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--grey);
  border-radius: 2px;
  background-color: rgba(179, 179, 179, 0.05);
}
.cs-box--logo {
  min-height: 560px;
  background-size: cover;
}
.cs-logo { margin: 0 20px 40px 0; }
.cs-logo img { display: block; width: 100%; height: 160px; border-radius: 2px; }
.cs-box--cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 40px;
  padding: 100px;
}
.cs-box--cards > div { width: 100%; }
.cs-box--cards img {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #000;
}

/* Tablet and below: 3-up layouts stack, full content width ---------------- */

@media (max-width: 1024px) {
  .work__grid,
  .services__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .section,
  .section.cta { margin-bottom: 0; }

  .cs { padding: 20px 0; }
  .cs-hero { margin: 0 0 20px; }
  .cs-box { margin: 20px 0; }
  .cs-box--logo { min-height: 500px; }
  .cs-box--cards { min-height: 500px; padding: 40px; justify-items: center; align-items: center; }
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .btn { font-size: 14px; line-height: 14px; padding: 12px 16px 12px 12px; }
  .btn--text { padding: 12px 14px; }

  .hero__inner { width: var(--cw); }
  .hero__lead { margin-top: 16px; }
  .hero__inner > .btn-row { margin-top: 32px; gap: 16px; }
  .hero__note { margin-top: 16px; }
  .hero__title { font-size: 28px; line-height: 30px; }
  .hero__lead { width: auto; font-size: 16px; line-height: 20px; }

  .section { margin-top: 140px; transform: translateY(-100px); }
  .section.work { margin-top: 0; }
  .services .section__inner { gap: 20px; }

  .title { margin-bottom: 0; font-size: 28px; line-height: 30px; }
  .text { font-size: 16px; line-height: 20px; }
  .text--mb10,
  .text--mb30 { margin-bottom: 10px; }
  .text--m-mb0 { margin-bottom: 0; }
  .text--m-mb10 { margin-bottom: 10px; }

  .project__services { line-height: 30px; }

  .site-footer { padding: 20px 0; }
  .site-footer__left { flex: 0 0 40%; }
  .site-footer__right { flex: 0 0 60%; gap: 20px; }
  .site-footer p { font-size: 12px; }

  .contact { padding: 140px 0 20px; }

  .policy { padding: 20px 0; }
  .policy__title { font-size: 28px; line-height: 30px; }
  .policy__text { font-size: 18px; }
  .policy__btn .btn--text { padding: 12px 14px; }

  .cs { transform: translateY(100px); }
  .cs-head__title { font-size: 28px; line-height: 30px; }
  .cs-head__sub { font-size: 16px; line-height: 20px; }
  .cs-hero { margin: 0; }
  .cs-text__body { font-size: 16px; line-height: 20px; }
  .cs-box { margin: 0; }
  .cs-box--logo { min-height: 0; padding: 40px; }
  .cs-logo { margin: 0 20px 20px 0; }
  .cs-logo img { height: 80px; }
  .cs-box--cards { min-height: 0; gap: 20px; padding: 20px; }
  .cs-box--cards img { border-radius: 2px; }
}