/* ==========================================================================
   Epic Web Works, design system
   Palette derived from the real brand mark: deep navy ink with one bright
   cyan accent, the same relationship the logo uses (navy wordmark, cyan
   "WEB WORK" and the parallelogram dot on the i). Cyan stays a deliberately
   scarce accent, not a running colour, mirroring how sparingly the logo
   itself uses it. Signature device is a soft recurring arc built from that
   same navy-plus-cyan relationship, used as a brand mark and as a quiet
   background accent, never as decoration for its own sake.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surface. Clean white with a cool light gray-blue for alternating
     sections, matching the logo's white-background variant rather than the
     warm cream this replaces. */
  --paper: #ffffff;
  --sand: #f2f5f7;
  --sand-2: #e4eaed;

  /* Ink. The same deep navy as the logo wordmark, not pure black. */
  --ink: #16212b;
  --ink-soft: #3d4750;
  --ink-mute: #68717a;
  --ink-faint: #9aa2a8;

  /* Accent. The logo's cyan. --cyan is a deepened, text-safe shade for links
     and icons on white (raw logo cyan fails contrast there); --cyan-bright is
     the true vivid logo cyan, reserved for dark sections, dots, and the arc
     motif where its full brightness reads correctly. */
  --cyan: #0c7c93;
  --cyan-deep: #095f70;
  --cyan-bright: #22d3ee;
  --cyan-tint: #e3f7fa;

  --line: #dde3e6;
  --line-strong: #c3cbcf;
  --line-dark: rgba(255, 255, 255, 0.14);

  --void: #0f1922;
  --void-2: #16232e;

  /* Type. Warm, confident, humanist sans throughout; no monospace anywhere
     in the public site, that register belongs to developer tools, not to an
     agency a business owner is trusting with real budget. */
  --font-display: "General Sans", "Inter Tight", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --display-xl: clamp(2.75rem, 1.6rem + 6vw, 5.5rem);
  --display-lg: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --display-md: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --display-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  --label-xs: 0.75rem;
  --label-sm: 0.8125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  --section-y: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 180ms;
  --base: 380ms;
  --slow: 720ms;

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* Radii. Generous and consistently rounded, an intentional contrast with
     the sharp-cornered developer-tool look this replaces. */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  --shadow-soft: 0 2px 10px rgba(22, 33, 43, 0.05);
  --shadow-lift: 0 20px 44px rgba(22, 33, 43, 0.10);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--cyan-tint); color: var(--cyan-deep); }

.skip-link {
  position: absolute; left: -9999px; z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--ink); color: var(--paper);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}

.skip-link:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 630;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display--xl { font-size: var(--display-xl); letter-spacing: -0.026em; line-height: 1.03; }
.display--lg { font-size: var(--display-lg); }
.display--md { font-size: var(--display-md); line-height: 1.12; }
.display--sm { font-size: var(--display-sm); line-height: 1.2; }

.display em {
  font-style: normal;
  color: var(--cyan);
  position: relative;
  white-space: nowrap;
}

/* Soft arc drawn under emphasised words instead of a gradient or underline,
   the typographic echo of the brand mark. */
.display em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.06em;
  height: 0.42em;
  background: var(--cyan-tint);
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  z-index: -1;
}

.lede {
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 42ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--label-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--cyan);
}

.eyebrow::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--cyan);
}

.section--void .eyebrow { color: #22d3ee; }
.section--void .eyebrow::before { background: #22d3ee; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.section--sand { background: var(--sand); }

.section--void {
  background: var(--void);
  color: #9aa7b0;
}

.section--void .display,
.section--void .display--md { color: var(--paper); }
.section--void .lede { color: #8993a0; }

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

@media (min-width: 860px) {
  .section-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   5. The arc motif
   The signature device: a soft quarter-circle used as a logo mark, a section
   accent, and a card corner treatment, so it reads as one consistent brand
   idea rather than three unrelated decorations.
   -------------------------------------------------------------------------- */

/* Navy body with a cyan cutout dot: the same colour hierarchy as the real
   wordmark, where "EPIC" is navy and the only cyan is the small accent on
   the i. The brand mark should carry that relationship, not invert it. */
.arc-mark {
  --arc-size: 2.25rem;
  position: relative;
  width: var(--arc-size);
  height: var(--arc-size);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 0.3rem;
  background: var(--ink);
  flex-shrink: 0;
}

.arc-mark::before {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 18%;
  width: 42%;
  height: 42%;
  border-radius: 999px 0 999px 999px;
  background: var(--cyan-bright);
}

/* Uploaded logo, sized to match the arc-mark it replaces so swapping one
   for the other never shifts the surrounding layout. max-width guards
   against an unusually wide upload crowding out the nav links or the
   "Start a project" button next to it. */
.wordmark__logo { height: 2.75rem; width: auto; max-width: 13rem; flex-shrink: 0; object-fit: contain; }

/* Large decorative arc used as a quiet background accent behind hero and
   closing sections. Purely atmospheric, never interactive, always aria-hidden. */
.arc-field {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px 999px 999px 12%;
  background: var(--cyan-tint);
}

.section--void .arc-field { background: rgba(34, 211, 238, 0.07); }

/* --------------------------------------------------------------------------
   6. Cards
   Rounded, warm, generously padded. This is the primary surface, replacing
   both the earlier gradient card and the hairline index row.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}

.card--lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}

.card--on-sand { background: var(--paper); }
.card--flat { border: 0; background: transparent; padding: 0; }

.card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.card--dark:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }

.card__mark { margin-bottom: var(--space-5); }

/* Shared icon tile: the small rounded-square accent used wherever a feature,
   service, or brief item needs a mark. One definition, several call sites
   (hero brief panel, service cards, value cards, industry cells). */
.icon-tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
  background: var(--cyan-tint);
  color: var(--cyan);
}

.icon-tile svg { width: 1.0625rem; height: 1.0625rem; }

.icon-tile--sm { width: 1.75rem; height: 1.75rem; border-radius: 0.625rem 0.625rem 0.625rem 0.2rem; }
.icon-tile--sm svg { width: 0.9375rem; height: 0.9375rem; }

.section--void .icon-tile { background: rgba(34, 211, 238, 0.14); color: #22d3ee; }

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 640;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.section--void .card__title { color: var(--paper); }

.card__text { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-mute); }
.section--void .card__text { color: #8993a0; }

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.625rem;
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: 640;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease), color var(--base) var(--ease), border-color var(--base) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--cyan); color: var(--paper); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--cyan-deep); box-shadow: var(--shadow-lift); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--cyan); color: var(--cyan); }

.btn--on-void { background: var(--paper); color: var(--cyan-deep); }
.btn--on-void:hover { background: #fff; }

.btn--ghost-void { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.28); }
.btn--ghost-void:hover { border-color: var(--paper); }

.btn__icon { transition: transform var(--base) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* Neither the icon-carrying span nor the raw svg some buttons use directly
   (the drawer CTA) has ever had explicit dimensions, so the icon depends on
   flex-basis:auto to size an unsized SVG, which resolves to 0px in most flex
   contexts (an invisible icon) but can balloon to the browser's replaced-
   element default in others (the drawer). Sizing it explicitly, matching
   .link svg elsewhere, removes the ambiguity everywhere at once. */
.btn svg, .btn__icon svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 640;
  color: var(--cyan);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--base) var(--ease);
}

.link:hover { border-color: currentColor; }
.link svg { width: 1rem; height: 1rem; transition: transform var(--base) var(--ease); }
.link:hover svg { transform: translateX(3px); }

.section--void .link { color: #22d3ee; }

/* --------------------------------------------------------------------------
   8. Tags and pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.8125rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink-soft);
  font-size: var(--label-xs);
  font-weight: 620;
}

.pill--cyan { background: var(--cyan-tint); color: var(--cyan-deep); }

/* --------------------------------------------------------------------------
   9. Motion
   Gentle rise-and-fade reveals plus a drawing arc accent. No terminal-style
   line wipes; the tone here is calm, not kinetic.
   -------------------------------------------------------------------------- */

.js:not(.reveal-off) [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease-soft), transform var(--slow) var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

.js:not(.reveal-off) [data-reveal].is-revealed { opacity: 1; transform: none; }

.js:not(.reveal-off) [data-reveal="scale"] { transform: translateY(16px) scale(0.97); }

/* Arc field grows in from a point, echoing the brand mark rather than a
   generic fade. */
.js:not(.reveal-off) [data-reveal-arc] {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 1100ms var(--ease-soft), opacity 900ms var(--ease-soft);
}

.js:not(.reveal-off) [data-reveal-arc].is-revealed { transform: scale(1); opacity: 1; }

@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:not(.reveal-off) [data-reveal],
  .js:not(.reveal-off) [data-reveal-arc] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}