:root {
  --ink: #121212;
  --mute: #757575;
  --line: #e3e3e3;
  --bg: #ffffff;
  --brand: #e30b5c;   /* raspberry: the IO mark only */
  --gutter: 20px;
  --col-gap: 32px;
  --cols: minmax(0, 1fr) minmax(0, 1.818fr) minmax(0, 1fr);
  --top: 140px;
  --header: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Inter", sans-serif;
  color-scheme: light;
}

/* Theme: switched from the circle beside the © */
:root[data-theme="dark"] {
  --ink: #ededed;
  --mute: #8c8c8c;
  --line: #2a2a2a;
  --bg: #0f0f0f;
  color-scheme: dark;
}
:root.theme-fade *,
:root.theme-fade *::before,
:root.theme-fade *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.mute { color: var(--mute); }

/* ---------- Text roll (hover) ---------- */
.roll {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  padding: 2px 0;
  vertical-align: top;
}
.roll > span {
  display: block;
  transition: transform 0.5s var(--ease);
}
.roll > span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
}
@media (hover: hover) {
  .roll:hover > span { transform: translateY(calc(-100% - 2px)); }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--header);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: center;
  height: 100%;
  padding: 0 var(--gutter);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Pixel IO: 11 rows at the wordmark's cap height, one pixel each, sitting on the baseline */
.logo-mark {
  flex: none;
  width: 0.75em;
  height: 0.6875em;
  fill: var(--brand);
}
.logo span { font-weight: 500; }

.pages {
  display: flex;
  gap: 4px;
  padding-left: 16px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.pages a {
  color: var(--mute);
  transition: color 0.25s ease;
}
.pages a:not(:last-child)::after { content: ","; }
.pages a:hover,
.pages a[aria-current="true"] { color: var(--ink); }

.header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clock {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.header-cta {
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  padding: 0 var(--gutter);
  align-items: start;
}

.col-side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: var(--top) 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.col-mid {
  position: relative;
  min-height: 100vh;
  padding: var(--top) 16px 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--bg);
}

/* ---------- Left ---------- */
h1 {
  font-size: clamp(40px, 3.89vw, 64px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.service-index li {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  padding: 4px 0;
}
.service-index li:first-child { padding-top: 0; }
.service-index li:last-child { padding-bottom: 0; }
.service-index li + li { border-top: 1px solid var(--line); }
.service-index a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transition: color 0.25s ease;
}
.service-index a span:last-child {
  color: var(--mute);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease);
}
@media (hover: hover) {
  .service-index a:hover span:last-child {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Middle ---------- */
.intro {
  position: sticky;
  top: var(--top);
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
h2 {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.04em;
  max-width: 23em;
  text-wrap: pretty;
}
.intro-spacer { height: 270px; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.section-title h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.section-title .count {
  font-size: 12px;
  color: var(--mute);
}

.stack {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.services {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: calc(var(--top) + 405px);
}

.service {
  border-top: 1px solid var(--line);
  padding: 20px 0 56px;
  background: var(--bg);
  scroll-margin-top: calc(var(--header) + 20px);
}
.service-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.service-head span {
  font-size: 12px;
  color: var(--mute);
}
.service h4 {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.service p {
  margin-top: 20px;
  max-width: 30em;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--mute);
  text-wrap: pretty;
}
.service ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-top: 40px;
}
.service ul li:not(:last-child)::after { content: ","; }

.product-block {
  margin-top: 180px;
  scroll-margin-top: calc(var(--header) + 20px);
}
.product-block .section-title { padding-bottom: 8px; }

.product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product-name {
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  transition: transform 0.5s var(--ease);
}
.product-arrow {
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  color: var(--mute);
  transition: transform 0.5s var(--ease), color 0.25s ease;
}
@media (hover: hover) {
  .product:hover .product-name { transform: translateX(6px); }
  .product:hover .product-arrow {
    color: var(--ink);
    transform: translate(4px, -4px);
  }
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 180px;
  padding-bottom: 8px;
  color: var(--mute);
}
.site-footer strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Right ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile {
  grid-column: 2;
  text-align: right;
  container-type: inline-size;
}
.mark {
  display: flex;
  justify-content: flex-end;
  height: 0.78em;
  padding-top: 0.05em;
  font-size: 92cqi;
}

/* Pixel IO marks (pixel-mark.js): 11 rows, rounded to whole pixels per row so the squares stay crisp */
[data-pixel-mark] svg {
  display: block;
  width: auto;
  aspect-ratio: 12 / 11;
  fill: var(--brand);
  shape-rendering: crispEdges;
}
.mark svg {
  height: 0.727em;
  height: round(nearest, 0.727em, 11px);
}
.title-mark { display: none; }

/* Logomark style, chosen from the © menu: the original type (default) or the pixel IO.
   Type is IO in Inter Bold, ink, with no mark on mobile; pixel is the raspberry bitmap. */
.logo-type { font-weight: 700; letter-spacing: -0.06em; }
.mark-type {
  display: block;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.727;        /* the line box is exactly the cap height */
  margin-right: 0.02em;
  white-space: nowrap;
}
:root:not([data-mark="pixel"]) .logo-mark,
:root:not([data-mark="pixel"]) [data-pixel-mark] { display: none; }
:root[data-mark="pixel"] .logo-type,
:root[data-mark="pixel"] .mark-type { display: none; }
/* Booting marks wait for the script; the static mark shows if it never runs */
.js [data-boot]:not(.is-mounted) {
  visibility: hidden;
  animation: mark-fallback 0s linear 1.5s forwards;
}
@keyframes mark-fallback { to { visibility: visible; } }
.facts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  text-align: right;
}

.contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}
.contact-links .email {
  font-size: 16px;
  line-height: 16px;
}
.contact-links .place {
  font-size: 14px;
  line-height: 14px;
  padding: 2px 0;
}

/* ---------- Theme switch ---------- */
.legal {
  position: relative;
  white-space: nowrap;
}
.switch {
  position: relative;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.switch::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}
@media (hover: hover) {
  .switch:hover { color: var(--ink); }
}
.theme-switch { margin-right: 7px; }
.theme-switch i {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: transform 0.5s var(--ease);
}
:root[data-theme="dark"] .theme-switch i { transform: rotate(180deg); }

/* Logomark menu (opens upwards from the ©) */
.mark-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 30;
  min-width: 176px;
  padding: 10px 12px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  animation: menu-in 0.25s var(--ease);
}
.mark-menu[hidden] { display: none; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(4px); }
}
.mark-menu-title {
  padding-bottom: 8px;
  font-size: 14px;
  color: var(--mute);
}
.mark-option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mark-option span { flex: 1; }
.mark-option svg {
  flex: none;
  width: 12px;
  height: 11px;
  fill: var(--brand);
  shape-rendering: crispEdges;
}
.mark-option b {
  flex: none;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.mark-option i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
.mark-option[aria-pressed="true"] { color: var(--ink); }
.mark-option[aria-pressed="true"] i { opacity: 1; }
@media (hover: hover) {
  .mark-option:hover { color: var(--ink); }
}

/* ---------- Load-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 1s var(--ease) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
      filter: blur(6px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-body,
  .service-body-inner { transition: none !important; }
}

/* ---------- Small screens ----------
   A framed column with one shared inner edge. The home page collapses to a
   single screen: name and statement at the top, index at the bottom. */
.footer-email { display: none; }

@media (max-width: 1099px) {
  :root {
    --gutter: 12px;
    --pad: 16px;
    --inset: calc(var(--gutter) + var(--pad));
  }

  /* Header */
  .site-header .inner {
    grid-template-columns: 1fr auto;
    padding: 0 var(--inset);
  }
  .pages,
  .header-right .clock { display: none; }

  /* Frame */
  .layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 var(--gutter);
    padding: var(--header) 0 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .col-side,
  .col-mid {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 var(--pad);
    border: 0;
  }

  h1 { font-size: clamp(40px, 12vw, 64px); }

  .site-footer {
    flex-wrap: wrap;
    margin-top: 96px;
    padding: 0 0 24px;
    row-gap: 12px;
  }
  .footer-email {
    display: block;
    flex-basis: 100%;
    color: var(--ink);
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
  }
  .site-footer .rights { display: none; }

  /* ----- Home: one screen ----- */
  .page-home .layout { padding: var(--header) var(--pad) 0; }

  /* Lift every block out of its desktop column so they can be reordered */
  .page-home .col-left,
  .page-home .col-mid,
  .page-home .col-right,
  .page-home .stack,
  .page-home .intro { display: contents; }

  .page-home .about,
  .page-home .intro-spacer,
  .page-home .service-index,
  .page-home .site-footer,
  .page-home .contact-links .place { display: none; }

  /* Title with the pixel IO on the right, matching the title's cap top to last baseline */
  .page-home .title {
    order: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-top: 40px;
  }
  .page-home .title-mark {
    order: 1;
    display: block;
    flex: none;
    font-size: clamp(40px, 12vw, 64px);
    padding-top: 0.137em;
  }
  .page-home .title-mark svg {
    height: 1.727em;
    height: round(nearest, 1.727em, 11px);
  }
  /* Three tiers only: name, content (16px), labels (14px grey) */
  .page-home h2 {
    order: 2;
    max-width: 34em;
    margin: 20px 0 40px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.03em;
  }
  .page-home .section-title h3,
  .page-home .section-title .count {
    font-size: 14px;
    line-height: 1.4;
    color: var(--mute);
  }
  .page-home .contact-links .email { font-weight: 500; }

  .page-home .intro .section-title,
  .page-home .product-block .section-title {
    margin: 0 calc(var(--pad) * -1);
    padding: 12px var(--pad);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .page-home .intro .section-title {
    order: 3;
    margin-top: auto;
  }

  /* Services: tap a row to open it. The free space above absorbs the
     extra height, so the list grows upwards and the bottom stays put. */
  .page-home .services {
    order: 4;
    display: block;
    padding: 12px 0;
  }
  .page-home .service {
    margin: 0;
    padding: 0;
    border-top: 0;
    background: none;
  }
  .page-home .service + .service { border-top: 1px solid var(--line); }
  .page-home .service-head {
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .page-home .service:first-child .service-head { padding-top: 0; }
  .page-home .service:last-child:not(.is-open) .service-head { padding-bottom: 0; }
  .page-home .service h4 {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.03em;
  }
  .page-home .service-head span { display: none; }
  .page-home .service-head::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
    color: var(--mute);
    transition: transform 0.45s var(--ease), color 0.25s ease;
  }
  .page-home .service.is-open .service-head::after {
    color: var(--ink);
    transform: rotate(45deg);
  }

  .page-home .service-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease);
  }
  .page-home .service.is-open .service-body { grid-template-rows: 1fr; }
  .page-home .service-body-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .page-home .service.is-open .service-body-inner {
    opacity: 1;
    transition-delay: 0.1s;
  }
  .page-home .service p {
    max-width: none;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
  }
  .page-home .service ul {
    margin-top: 10px;
    padding-bottom: 12px;
    font-size: 14px;
  }

  .page-home .product-block {
    order: 5;
    margin: 0;
  }
  .page-home .product {
    padding: 12px 0;
    border: 0;
  }
  .page-home .product-name {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.03em;
  }
  .page-home .product-arrow {
    font-size: 16px;
    color: var(--ink);
  }

  .page-home .contact {
    order: 6;
    align-items: baseline;
    margin: 0 calc(var(--pad) * -1);
    padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
}

/* ---------- Contact page ---------- */
.contact-lede {
  margin-top: 16px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mute);
  text-wrap: pretty;
}

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.contact-direct .email-lg {
  font-size: 16px;
  line-height: 16px;
  align-self: flex-start;
}
.contact-direct span {
  font-size: 14px;
  line-height: 14px;
}

.enquiry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s ease;
}
.field:focus-within { border-color: var(--ink); }
.field > span { font-size: 14px; }
.field input,
.field textarea {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  outline: none;
}
.field textarea {
  min-height: 132px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--mute); opacity: 1; }

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

.enquiry-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 -16px;
  padding: 0 16px 24px;
  border-bottom: 1px solid var(--line);
}
.enquiry-actions button {
  appearance: none;
  border: 0;
  background: none;
  padding: 8px 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  cursor: pointer;
}
.enquiry-actions button > span { padding: 0; }
.enquiry-actions [data-status] {
  color: var(--mute);
  text-align: right;
}
.enquiry.is-sending button { opacity: 0.4; cursor: default; }
.enquiry.is-sent .field,
.enquiry.is-sent button { display: none; }
.enquiry.is-sent .enquiry-actions { padding-top: 8px; }
.enquiry.is-sent [data-status] {
  color: var(--ink);
  font-size: 18px;
  text-align: left;
}

@media (max-width: 1099px) {
  .page-contact .col-side { display: none; }
  .page-contact .col-mid { padding-top: 48px; }
  .page-contact .header-cta { display: none; }
  .page-contact .header-right .clock { display: block; }
}