/* Matesora — site styles
   Brand: Deep Space #0E1330, Ora Coral #FF5A36, White. Typeface: Outfit. */

/* Outfit (SIL Open Font License, see /assets/fonts/OFL.txt), self-hosted.
   One variable file per subset covers all weights used on the site. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #0e1330;
  --navy-2: #161c42;
  --navy-3: #222a58;
  --coral: #ff5a36;
  --coral-ink: #d63a17; /* coral for small text on light backgrounds (AA) */
  --white: #ffffff;

  /* Theme colors: light by default, dark overrides below */
  --bg: #f5f5f8;
  --surface: #ffffff;
  --section-alt: #ffffff; /* Work section band */
  --card: #f5f5f8; /* project cards */
  --ink: #0e1330;
  --muted: #52587a;
  --line: #e2e3ec;
  --band: #0e1330; /* How we work section */
  --footer: #0e1330;
  --shadow: rgba(14, 19, 48, 0.25);
  color-scheme: light;

  --on-dark: #ffffff;
  --on-dark-muted: #b4b8d4;
  --on-dark-line: rgba(255, 255, 255, 0.12);

  --radius: 20px;
  --radius-lg: 28px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 136px);

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark theme. Set on <html data-theme="dark"> by the inline script in <head>
   (saved choice, else the system setting) and by the header toggle. */
:root[data-theme="dark"] {
  --coral-ink: #ff7a5c; /* coral for small text on dark backgrounds (AA) */
  --bg: #090c20;
  --surface: #131939;
  --section-alt: #0e1330;
  --card: #151b3e;
  --ink: #f2f3f8;
  --muted: #a8adca;
  --line: rgba(255, 255, 255, 0.1);
  --band: #10153a;
  --footer: #06081a;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Logos that need a different version per theme */
:root[data-theme="dark"] .only-light,
:root:not([data-theme="dark"]) .only-dark { display: none; }

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* no grey/blue flash on tap */
  touch-action: manipulation; /* no double-tap zoom or word selection */
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* Touch screens: tapping around the page shouldn't select text.
   Contact details and the legal pages stay selectable so they can be copied. */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; }
  .contact-email,
  .contact-details,
  .footer-col address,
  .legal { -webkit-user-select: text; user-select: text; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--coral); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--coral);
  color: var(--white);
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Keep hyphenated words like "AI-powered" from breaking across lines */
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Shared bits ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.on-dark .eyebrow { color: var(--on-dark-muted); }

.section { padding-block: var(--section); }

.section-head {
  display: grid;
  gap: 18px;
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head h2 { font-size: clamp(2.125rem, 4.6vw, 3.5rem); }
.section-head p { font-size: 1.1875rem; color: var(--muted); }
.on-dark .section-head p { color: var(--on-dark-muted); }

.accent { color: var(--coral); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--coral); color: var(--white); }
.btn-primary:hover { background: #ff6f4f; }

.btn-ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.28); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }

.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--coral-ink); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 19, 48, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--on-dark-line);
  background: rgba(14, 19, 48, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}

.brand { display: inline-flex; flex: none; margin-right: auto; }
.brand img { width: 148px; height: auto; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav-links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  position: relative;
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 0.9875rem;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--white); }

/* Theme toggle: moon in light mode, sun in dark mode */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--on-dark-line);
  border-radius: 12px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.theme-toggle:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.theme-toggle svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
.theme-switching .theme-toggle svg { animation: theme-icon-in 0.5s var(--ease); }
@keyframes theme-icon-in {
  from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
}

/* While the theme changes, fade colors instead of jumping (set briefly by main.js) */
@media (prefers-reduced-motion: no-preference) {
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
      border-color 0.5s var(--ease), opacity 0.6s var(--ease) !important;
  }
}

.nav-toggle {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--on-dark-line);
  border-radius: 12px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 8px var(--gutter) 28px;
    background: var(--navy);
    border-bottom: 1px solid var(--on-dark-line);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--on-dark-line);
  }
  .nav .btn { width: 100%; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark);
  margin-top: -76px; /* slide under the translucent header */
  padding-top: 76px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 900px; height: 900px;
  background: radial-gradient(closest-side, rgba(255, 90, 54, 0.16), transparent 70%);
  pointer-events: none;
}

/* Dark mode: the navy top areas stay navy, but a field of stars fades in
   and the coral glow dims, so switching theme is visible at the top of the page. */
.hero::after,
.legal-hero::after,
.not-found::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  background-image:
    radial-gradient(1.4px 1.4px at 18px 26px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.2px 1.2px at 92px 140px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.8px 1.8px at 160px 60px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.2px 1.2px at 200px 176px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 56px 196px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.1px 1.1px at 128px 96px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 186px 12px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(2.4px 2.4px at 300px 80px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.8px 1.8px at 40px 300px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 250px 290px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.3px 1.3px at 150px 210px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 330px 330px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2.6px 2.6px at 380px 236px, rgba(255, 190, 170, 0.95), transparent),
    radial-gradient(2.2px 2.2px at 120px 460px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.8px 1.8px at 470px 90px, rgba(200, 215, 255, 0.8), transparent);
  background-size:
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    360px 360px, 360px 360px, 360px 360px, 360px 360px, 360px 360px,
    540px 540px, 540px 540px, 540px 540px;
}
:root[data-theme="dark"] .hero::after,
:root[data-theme="dark"] .legal-hero::after,
:root[data-theme="dark"] .not-found::after { opacity: 1; }
.hero::before { transition: opacity 0.6s var(--ease); }
:root[data-theme="dark"] .hero::before { opacity: 0.45; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(64px, 9vw, 120px) clamp(72px, 10vw, 136px);
}

.hero-copy { display: grid; gap: 28px; justify-items: start; }

.hero h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-lead {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  color: var(--on-dark-muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 20px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.9375rem;
  color: var(--on-dark-muted);
}
.hero-meta li { display: inline-flex; align-items: center; gap: 10px; }
.hero-meta li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
}

/* Orbit illustration around the symbol */
.orbit {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  justify-self: center;
}
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-symbol {
  position: absolute;
  top: 50%; left: 50%;
  width: 34%;
  transform: translate(-50%, -50%);
}
.orbit-ring { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.25; }
.orbit-dash { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.25; stroke-dasharray: 2 9; stroke-linecap: round; }
.orbit-tick { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; stroke-linecap: round; }
.orbit-tick.is-major { stroke: rgba(255, 255, 255, 0.55); }
.orbit-tick.is-coral { stroke: var(--coral); }
.orbit-num { font-family: var(--font); font-size: 15px; font-weight: 500; fill: rgba(255, 255, 255, 0.4); }
.orbit-num.is-coral { fill: var(--coral); }
.orbit-planet { fill: var(--coral); }
.orbit-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .orbit { max-width: 420px; order: -1; margin-bottom: -8px; }
}
@media (max-width: 560px) {
  .hero-inner { padding-top: 32px; }
  .orbit { max-width: 230px; }
  .hero-actions .btn { flex: 1 1 auto; }
}

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

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

.service {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 32px 28px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.service:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 48px -24px var(--shadow);
}
.service-icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 10px;
  border-radius: 16px;
  /* Same light tile as the studio cards: page background, hairline border,
     thin line icon, only the small dots in coral */
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
.service-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.service-icon .dot { fill: var(--coral); stroke: none; }
.service h3 { font-size: 1.375rem; }
.service p { color: var(--muted); font-size: 1rem; }

/* ---------- Work ---------- */

.work { background: var(--section-alt); }

/* Work cards: two per row from tablets up, one on phones */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* On laptops and desktops, shorter image areas with smaller artwork keep the cards compact */
@media (min-width: 1024px) {
  .work-grid .project-visual { aspect-ratio: 2 / 1; }
  .work-grid .project-body { padding: 30px 32px 32px; gap: 14px; }
  .work-grid .project h3 { font-size: 1.75rem; }
  .work-grid .visual-slayclip { --shot-width: 40%; }
  .work-grid .visual-raportom { --shot-width: 34%; }
  .work-grid .visual-lessmess { --shot-width: 36%; }
  .work-grid .phone-screen img { top: 29%; }
  .work-grid .visual-cta::before { width: 32%; }
  .work-grid .cta-plus { width: 56px; height: 56px; }
}
@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
}

.project {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
}

.project-visual {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.project-body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(26px, 3.4vw, 40px);
}
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.tag-live { color: var(--ink); }
.tag-live::before,
.tag-progress::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22b573;
}
.tag-progress { color: var(--ink); }
.tag-progress::before { background: var(--coral); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.project h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.project-foot {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.project-platforms { font-size: 0.9375rem; color: var(--muted); }
.project-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* SlayClip visual: app screenshot rising from the bottom edge.
   Background matches the screenshot's own backdrop so its corners blend in. */
.visual-slayclip { background: #ece4fc; }
.project-shot {
  position: absolute;
  top: 12%;
  left: 50%;
  width: var(--shot-width, 56%);
  height: auto;
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease);
}
.project:hover .project-shot { transform: translate(-50%, -2%); }

/* "Have a product in mind?" card: an empty, dashed phone slot waiting for the
   next project. The whole card links to the contact section. */
.project-cta {
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.project-cta:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px var(--shadow); }
.project-cta:hover .link-arrow { color: var(--coral-ink); }
.project-cta:hover .link-arrow svg { transform: translateX(3px); }
.visual-cta {
  background: radial-gradient(55% 60% at 50% 55%, rgba(255, 90, 54, 0.14), transparent 70%);
}
.visual-cta::before {
  content: "";
  position: absolute;
  top: 12%; bottom: -12%; left: 50%;
  width: 46%;
  transform: translateX(-50%);
  border: 2px dashed rgba(255, 90, 54, 0.5);
  border-radius: 28px;
}
.cta-plus {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-top: 8%;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 16px 32px -12px rgba(255, 90, 54, 0.7);
  transition: transform 0.4s var(--ease);
}
.cta-plus svg { width: 28px; height: 28px; }
.project-cta:hover .cta-plus { transform: rotate(90deg) scale(1.06); }

/* Raportom visual: blue gradient from the app's own accent (#53A3F2).
   The screenshot has a cream backdrop, so clip it to the phone's outline
   (body edges and 55px corner radius measured on the 416x810 source). */
.visual-raportom {
  background: linear-gradient(180deg, #53a3f2 0%, #9ccbf7 50%, #e4f2fd 100%);
  --shot-width: 50%;
}
.visual-raportom .project-shot {
  clip-path: inset(0.86% 1.92% 0 1.44% round 12.7% 12.7% 0 0 / 6.5% 6.5% 0 0);
}

/* Less Mess visual: a phone showing the Less Mess Storage logo, rising from the
   bottom edge like the other project screenshots.
   Colors from the Less Mess Storage brand (red #E72329). */
.visual-lessmess {
  background: linear-gradient(180deg, #f8c4c6 0%, #fbe0e1 55%, #fdf0f0 100%);
  --shot-width: 46%;
}
.phone-frame {
  position: absolute;
  top: 12%;
  left: 50%;
  width: var(--shot-width);
  aspect-ratio: 9 / 19;
  /* Thin bezel: 2.8% of the phone's own width (padding % is measured on the card) */
  padding: calc(var(--shot-width) * 0.028);
  border-radius: 16% / 7.6%;
  /* Dark frame with a soft metallic sheen on the edges */
  background: linear-gradient(145deg, #4a4c53, #101114 22%, #101114 78%, #3a3c42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 60px -28px rgba(120, 20, 24, 0.55);
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease);
}
.project:hover .phone-frame { transform: translate(-50%, -2%); }
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 14% / 6.4%; /* follows the frame's curve inside the bezel */
  background: var(--white);
  overflow: hidden;
}
/* Camera pill at the top of the screen */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 1.9%;
  left: 50%;
  width: 27%;
  height: 2.8%;
  border-radius: 99px;
  background: #101114;
  transform: translateX(-50%);
}
/* Less Mess app screen: brand red with the white logo */
.visual-lessmess .phone-screen {
  background: linear-gradient(160deg, #e72329, #c12327);
}
/* Logo centred in the part of the screen that shows above the card's edge.
   The phone runs past the bottom of the card, so the visible middle sits at
   about 31% of the screen's height here and 29% in the shorter desktop cards. */
.phone-screen img {
  position: absolute;
  top: 31%;
  left: 50%;
  width: 62%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ---------- Studio / name ---------- */

/* Logo square and the four cards: side by side on wide screens (cards span the
   square's full height), stacked on smaller screens */
.studio-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1150px) {
  .studio-inner {
    --studio-gap: clamp(40px, 6vw, 88px);
    container-type: inline-size;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--studio-gap);
  }
  /* The square and the card grid get the same explicit height (the square's
     side: its column width, capped at 500px), so their top and bottom edges
     line up in every browser rather than relying on stretch + aspect-ratio. */
  .studio-inner > * { --square: min(500px, (100cqw - var(--studio-gap)) * 0.475); }
  /* Square starts at the column's left edge, in line with "The studio" label */
  .studio-inner > .concept { width: var(--square); height: var(--square); justify-self: start; }
  .studio-inner > .studio-copy { height: var(--square); }
}
.studio-eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }

.concept {
  position: relative;
  margin: 0; /* <figure> has default browser margins */
  aspect-ratio: 1;
  width: 100%;
  max-width: 500px;
  justify-self: center;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Logo size: 44% of the card, but on phones it grows smoothly with the screen
     (80px at 320px wide) so the logo, clock face and orbit always fit between
     the corner labels */
  --logo-size: min(44%, calc(80px + (100vw - 320px) * 0.6));
}
.concept img { position: relative; z-index: 1; width: var(--logo-size); }

/* Around the logo: a faint dot grid fading out from the centre, a clock face
   (hour ticks, 10 and 2 in coral where the hands point) and an outer orbit with
   a small planet circling once a minute. Drawn in the logo's own coordinates,
   so it stays concentric with the ring at every size. */
.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1.2px, transparent 1.6px);
  background-size: 18px 18px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 64%);
  pointer-events: none;
}
.concept-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--logo-size) / 0.6); /* the logo fills the middle 60% of the drawing */
  aspect-ratio: 1;
  overflow: visible;
  color: var(--muted);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.deco-orbit { fill: none; stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.deco-tick { stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.6; stroke-linecap: round; }
.deco-tick.is-major { stroke-opacity: 0.6; }
.deco-tick.is-coral { stroke: var(--coral); stroke-opacity: 1; }
.deco-num {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  fill: currentColor;
  fill-opacity: 0.7;
  text-anchor: middle;
  dominant-baseline: central;
}
.deco-num.is-coral { fill: var(--coral); fill-opacity: 1; }
.deco-planet { fill: var(--coral); }
.deco-spin {
  /* Rotate around the logo's centre (96,96 in the drawing's units). The drawing's
     viewBox starts at -64, so "50% 50%" would land below-right of the logo. */
  transform-box: view-box;
  transform-origin: 96px 96px;
  animation: spin 60s linear infinite;
}
@media (max-width: 420px) {
  .deco-num { display: none; } /* too small to read on small phones */
}
.concept-label {
  position: absolute;
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap; /* line breaks are set in the HTML */
  min-height: 4.6em; /* heading + two lines, so headings in a row line up */
  align-content: start;
}
.concept-label strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
/* The letters that make up "Matesora": MAT-E-S-ORA */
.concept-label .hl { color: var(--coral); }
.concept-label.tl { top: 7%; left: 7%; }
.concept-label.tr { top: 7%; right: 7%; text-align: right; justify-items: end; }
.concept-label.bl { bottom: 7%; left: 7%; }
.concept-label.br { bottom: 7%; right: 7%; text-align: right; justify-items: end; }

/* The four points: a 2 x 2 grid of equal cards that shares the column's height */
.studio-copy { display: grid; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }
.pillars li {
  display: grid;
  grid-template-rows: 1fr auto auto; /* icon on top, text settles at the bottom */
  gap: 6px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pillar-icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 58px; height: 58px;
  margin-bottom: 8px;
  border-radius: 16px;
  /* Light tile: page background with a hairline border, a thin line icon,
     only the small dots in coral */
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
.pillar-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.pillar-icon .dot { fill: var(--coral); stroke: none; }
.pillars strong { font-weight: 500; font-size: 1.0625rem; }
.pillars .pillar-text { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

/* ---------- Process ---------- */

.process { background: var(--band); color: var(--on-dark); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; row-gap: 0; } }

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 36px 28px 0 0;
  border-top: 1px solid var(--on-dark-line);
  counter-increment: step;
}
.step::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--band);
  border: 1.5px solid var(--coral);
}
.step:first-child::before { background: var(--coral); }
.step-num {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--coral);
}
.step-num::before { content: "0" counter(step); }
.step h3 { font-size: 1.5rem; }
.step p { color: var(--on-dark-muted); font-size: 1rem; }
@media (max-width: 560px) { .step { padding-bottom: 36px; } }

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

.contact-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 40px;
  padding: clamp(36px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background: var(--coral);
  color: var(--navy); /* navy on coral passes WCAG AA; white does not */
}
.contact-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -14%;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.04), 0 0 0 140px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; align-items: start; } }

.contact-copy { position: relative; z-index: 1; display: grid; gap: 20px; }
.contact-copy .eyebrow { color: var(--navy); }
.contact-copy .eyebrow::before { background: var(--white); }
.contact-copy h2 { font-size: clamp(2.25rem, 5.4vw, 4.25rem); letter-spacing: -0.03em; }
.contact-copy p { font-size: 1.1875rem; max-width: 40ch; }

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid rgba(14, 19, 48, 0.35);
  padding-bottom: 4px;
  justify-self: start;
  overflow-wrap: anywhere;
  transition: border-color 0.2s var(--ease);
}
.contact-email:hover { border-color: var(--navy); }
.contact-email svg { width: 24px; height: 24px; flex: none; transition: transform 0.2s var(--ease); }
.contact-email:hover svg { transform: translate(3px, -3px); }

.contact-details {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  margin: 0;
  font-size: 0.9875rem;
}
.contact-details div { display: grid; gap: 2px; }
.contact-details dt { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.contact-details dd { margin: 0; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--footer);
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  padding-top: clamp(56px, 7vw, 88px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 56px;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand img { width: 160px; height: auto; }
.footer-brand p { max-width: 30ch; }

.footer-col h2 {
  margin-bottom: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-col a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-col address { font-style: normal; display: grid; gap: 4px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px 32px;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.875rem;
}

/* ---------- Legal pages ---------- */

.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark);
  margin-top: -76px;
  padding: calc(76px + clamp(56px, 8vw, 104px)) 0 clamp(48px, 6vw, 72px);
}
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4rem); margin-top: 18px; }
.legal-hero p { margin-top: 16px; color: var(--on-dark-muted); }

.legal {
  max-width: 760px;
  padding-block: clamp(48px, 7vw, 88px) var(--section);
}
.legal h2 {
  margin: 48px 0 14px;
  font-size: 1.5rem;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 28px 0 10px; font-size: 1.125rem; }
.legal p,
.legal ul { margin: 0 0 16px; color: var(--muted); }
.legal ul { padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--coral-ink); text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 500; }

.facts {
  display: grid;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4px 24px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--muted); font-size: 0.9375rem; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 600px) { .facts div { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */

.not-found {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--navy);
  color: var(--on-dark);
  margin-top: -76px;
  padding: 120px var(--gutter) 80px;
}
.not-found-inner { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; }
.not-found img { width: 120px; margin-bottom: 12px; }
.not-found h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.not-found p { color: var(--on-dark-muted); max-width: 36ch; }

/* ---------- Reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}