/* ==========================================================================
   global.css — reset, design tokens, typography, shared primitives
   Top Decks — extracted from Figma (file 9vvGaQ8TmNNjkcfIgfgDUg)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — surfaces */
  --c-bg: #1a1a1a;
  --c-bg-tint: rgba(255, 255, 255, 0.05);
  --c-bg-tint-strong: rgba(255, 255, 255, 0.1);
  --c-glass-from: rgba(255, 255, 255, 0.05);
  --c-glass-to: rgba(255, 255, 255, 0.16);

  /* Colour — text */
  --c-text: #f6f6f6;
  --c-text-muted: #e7e7e7;
  --c-text-invert: #1a1a1a;

  /* Colour — brand */
  --c-accent: #e84e0e;
  --c-accent-hover: #cf4409;
  --c-accent-light: #f9893e;
  --c-accent-soft: #fcb375;
  --c-icon: #fdd3ab;

  /* Colour — hairlines & cream tones */
  --c-cream: #fff6ed;
  --c-map-bg: #f4f1ea;

  /* Hairlines. Every decorative stroke in the Figma file sits at 12% opacity,
     so these are kept separate from the solid cream text colours above. */
  --c-line: rgba(255, 218, 164, 0.12);        /* #FFDAA4 @ 12% */
  --c-line-soft: rgba(255, 235, 213, 0.12);   /* #FFEBD5 @ 12% */
  --c-line-cream: rgba(255, 246, 237, 0.12);  /* #FFF6ED @ 12% */
  --c-line-hover: rgba(255, 218, 164, 0.32);

  /* Radial sheens, computed from Figma's gradientHandlePositions rather than
     eyeballed: handle[0] is the centre, handle[1]/[2] the two radii. */
  --grad-btn: radial-gradient(50% 130% at 50% 0%,
      rgba(255, 255, 255, 0.05) 34%, rgba(255, 255, 255, 0.16) 100%);
  --grad-badge: radial-gradient(50.9% 267.07% at 50% 50%,
      rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.2) 100%);
  --grad-sheen: radial-gradient(78.22% 65.02% at 50% 50%,
      rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.05) 100%);
  --grad-review: radial-gradient(150.72% 106% at 50% 100%,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
  --grad-divider: radial-gradient(50% 130% at 50% 0%,
      rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0.2) 100%);
  /* Circular glass control — converted from the button's Figma SVG, whose
     gradient runs on a line outside the 40x40 box (hence the odd stops). */
  --grad-orb: linear-gradient(255.9deg,
      rgba(255, 255, 255, 0.08) 1%, rgba(255, 255, 255, 0.07) 11%,
      rgba(255, 255, 255, 0) 27%, rgba(255, 255, 255, 0.07) 42%,
      rgba(255, 255, 255, 0.08) 53%, rgba(255, 255, 255, 0.16) 79%,
      rgba(255, 255, 255, 0.16) 100%);

  /* Radii */
  --r-xs: 0.25rem;   /*  4px — cards, media */
  --r-sm: 0.5rem;    /*  8px — buttons, badges, accordion */
  --r-pill: 6.25rem; /* 100px — circular controls */

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-15: 3.75rem;  /* 60px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */

  /* Layout — page gutter and content width.
     Figma: 1440 frame, 80px gutter -> 1280 content (desktop)
             390 frame,  16px gutter ->  358 content (mobile) */
  --gutter: var(--sp-4);
  --content-max: 80rem;             /* 1280px */
  --frame-max: calc(var(--content-max) + 2 * var(--sp-20)); /* 1440px */

  /* Section rhythm — 48px mobile, 80px desktop */
  --section-y: var(--sp-12);

  /* Typography families */
  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type — linear ramp between 390px and 1440px viewports.
     Figma mobile -> desktop: h1 40->68, h2 36->52, h3 20->24, step 64->80 */
  --fs-h1: clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem);
  --fs-h2: clamp(2.25rem, 1.879rem + 1.524vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
  --fs-step: clamp(4rem, 3.629rem + 1.524vw, 5rem);
  --fs-lead: 1.125rem;  /* 18/27 in both frames — see note below */
  --fs-body: 1rem;                                      /* 16 */
  --fs-sm: 0.875rem;                                    /* 14 */
  --fs-xs: 0.75rem;                                     /* 12 */

  /* Line heights measured from the Figma text styles */
  --lh-display: 1.1;   /* 68/74.8, 52/57.2, 40/44, 36/39.6 */
  --lh-h3: 1.3;        /* 24/31.2, 20/26 */
  --lh-lead: 1.5;      /* 18/27 */
  --lh-body: 1.65;     /* 16/26.4 */
  --lh-sm: 1.6;        /* 14/22.4 */

  /* Letter spacing — uniform 0.02em on uppercase Archivo */
  --ls-display: 0.02em;
  --ls-h3: 0.01em;

  /* Effects */
  --shadow-badge: 0 0.25rem 1rem rgba(255, 238, 214, 0.12);
  --blur-glass: 0.25rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* scroll reveal */
  --dur: 0.25s;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--sp-8);
    --section-y: var(--sp-16);
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: var(--sp-20);
    --section-y: var(--sp-20);
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps an in-page anchor clear of the pinned header */
  scroll-padding-block-start: 6rem;
  /* `clip` (not `hidden`) so the off-canvas menu never widens the page
     while still allowing position: sticky inside. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background-color: var(--c-bg);
  color: var(--c-text-muted);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

fieldset {
  border: 0;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  color: var(--c-text);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* Second half of every Figma heading is tinted with the brand orange */
.accent {
  color: var(--c-accent);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-muted);
}

/* Figma keeps body paragraphs at 18/27 on mobile too. The two places that do
   drop to 16/26.4 are the home hero intro and the step/feature/quote copy,
   which carry their own sizes. */

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Sections that carry the hairline + radial sheen treatment */
.section--framed {
  background-image: var(--grad-sheen);
  border-block: 1px solid var(--c-line);
}

.section--framed-cream {
  border-block-color: var(--c-line-cream);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Hero and About use a 20px head gap in Figma, everything else 24px */
.hero__content .section-head,
.about__head {
  gap: var(--sp-5);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

/* .badge pins itself left by default; the centred blocks in Figma
   ("What We Do", "Process", "Contact us", "What We Build") need it
   back on the axis. */
.section-head--center > .badge,
.service-band__head > .badge,
.cta__head > .badge {
  align-self: center;
}

/* --------------------------------------------------------------------------
   5. Badge (pill label above every section heading)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  align-self: flex-start;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-badge);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.badge::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

.badge--bright {
  border-color: var(--c-line);
  color: var(--c-text);
}

/* Used only by the "Contact us" badge in the CTA section. Figma keeps a
   gradient fill and a 4px backdrop blur on it, both dropped on request — what
   is left is the squashed line box that makes the pill 37px rather than 48px.
   The glow shadow stays, it comes from .badge. */
.badge--filled {
  line-height: 0.9;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--c-accent);
  color: var(--c-cream);
}

.btn--primary:hover {
  background-color: var(--c-accent-light); /* #F9893E */
}

.btn--ghost {
  background-image: var(--grad-btn);
  border: 1px solid var(--c-line-soft);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.btn--ghost:hover {
  border-color: var(--c-line-hover);
  background-color: var(--c-bg-tint);
}

/* Compact variant used inside the navbar and the footer */
.btn--sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* Text-only "Explore more ->" link */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-more:hover {
  gap: var(--sp-3);
  color: var(--c-accent-light);
}

/* Circular icon control (carousel arrows, compare handle) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  color: var(--c-text);
  transition: background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.icon-btn:hover {
  background-color: var(--c-accent-hover);
}

.icon-btn svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   7. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
}

/* Line breaks that exist only in the desktop Figma frame */
.br-lg {
  display: none;
}

@media (min-width: 64rem) {
  .br-lg {
    display: initial;
  }
}

/* …and breaks that exist only in the mobile frame */
@media (min-width: 64rem) {
  .br-sm {
    display: none;
  }
}

/* Line breaks that exist only in the mobile Figma frame */
@media (min-width: 64rem) {
  .br-sm {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. Scroll reveal
   Elements are marked by main.js; the initial state only applies once
   <html> carries .js-anim, so the page stays readable without JavaScript.
   -------------------------------------------------------------------------- */
.js-anim [data-anim] {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
  transition-delay: var(--anim-delay, 0s);
}

.js-anim [data-anim="fade"] {
  translate: 0 0;
}

.js-anim [data-anim="left"] {
  translate: -1.25rem 0;
}

.js-anim [data-anim="right"] {
  translate: 1.25rem 0;
}

.js-anim [data-anim="scale"] {
  translate: 0 0;
  scale: 0.98;
  transition: opacity 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}

.js-anim [data-anim].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Anything the visitor asked not to be moved is simply shown */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }

  .site-header.is-stuck {
    animation: none;
  }
}