/* ═══════════════════════════════════════════════════════════════════════════
   Bytelabs corporate gifting — festive season, light throughout.
   Palette anchored on the logo: the hexagon is #F84F65 and the wordmark #454545.
   Around those, a warm festive set — marigold, saffron, pista green — on warm
   off-whites. No dark sections anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand, sampled from logo_dark.png */
  --brand:        #F84F65;
  --brand-deep:   #DE3550;   /* hover / pressed */
  --brand-soft:   #FFE9EC;   /* tint for fills and chips */
  --ink:          #3A3A3A;   /* body text, a touch deeper than the wordmark */
  --ink-strong:   #262626;   /* headings */
  --muted:        #6E6A72;

  /* Festive accents — used to colour-code, never as decoration for its own sake */
  --marigold:     #F7941D;
  --saffron:      #FFC53D;
  --pista:        #35A37A;
  --indigo:       #5B5BD6;

  /* Surfaces, all light */
  --page:         #FFFDFB;
  --warm:         #FFF6F1;   /* alternating section */
  --blush:        #FFF0F2;   /* brand-tinted section */
  --card:         #FFFFFF;
  --line:         #F0E4DE;
  --line-strong:  #E3D4CC;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --shell: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--brand-deep); }
img { max-width: 100%; height: auto; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(52px, 7vw, 96px) 0; }
.section--tight { padding: clamp(36px, 4.5vw, 60px) 0; }
.section--warm  { background: var(--warm); }
.section--blush { background: var(--blush); }

.lede { font-size: 1.14rem; color: var(--muted); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn-brand {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: .78rem 1.7rem;
  transition: background .18s ease, border-color .18s ease;
}
.btn-brand:hover, .btn-brand:focus { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.btn-outline-brand {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-strong);
  border-radius: 999px;
  padding: .78rem 1.7rem;
  font-weight: 600;
}
.btn-outline-brand:hover, .btn-outline-brand:focus { border-color: var(--brand); color: var(--brand-deep); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ─── Announcement + header ─────────────────────────────────────────────── */
.announce {
  background: var(--brand);
  color: #fff;
  font-size: .92rem;
  padding: .55rem 0;
  text-align: center;
}
.announce strong { color: #FFE7A6; font-weight: 700; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.site-header .navbar-nav .nav-link { color: var(--ink); font-weight: 500; padding-inline: .9rem; }
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus { color: var(--brand-deep); }
.brandmark { display: inline-flex; align-items: center; text-decoration: none; }
.brandmark img { height: 42px; width: auto; display: block; }
.site-footer .brandmark img { height: 52px; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(720px 420px at 88% -12%, rgba(255,197,61,.34) 0%, transparent 62%),
    radial-gradient(620px 400px at 4% 8%,   rgba(248,79,101,.16) 0%, transparent 60%),
    linear-gradient(180deg, #FFF7F2 0%, var(--page) 78%);
}
.hero > * { position: relative; }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 54ch; font-size: 1.2rem; }

.season-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--brand-deep);
  border-radius: 999px; padding: .34rem 1rem;
  font-size: .88rem; font-weight: 600; margin-bottom: 1.3rem;
}

/* ─── Budget cards: colour-coded, one accent each ───────────────────────── */
.budget-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.budget-card {
  display: block; text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent, var(--brand));
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 1.35rem;
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.budget-card:nth-child(1) { --accent: var(--brand); }
.budget-card:nth-child(2) { --accent: var(--marigold); }
.budget-card:nth-child(3) { --accent: var(--pista); }
.budget-card:hover, .budget-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(58,58,58,.10);
  border-color: var(--line-strong);
  border-top-color: var(--accent);
  color: var(--ink);
}
.budget-card .amount {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.9rem; line-height: 1; color: var(--ink-strong);
  display: block; margin-bottom: .3rem;
}
.budget-card .per   { font-size: .9rem; color: var(--muted); display: block; margin-bottom: 1rem; }
.budget-card .count { font-size: .96rem; color: var(--ink); font-weight: 600; }
.budget-card .go    { margin-top: .9rem; font-weight: 700; color: var(--accent); font-size: .95rem; }

/* ─── Facts ─────────────────────────────────────────────────────────────── */
.facts { display: grid; gap: 10px 40px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fact .n {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.1rem; line-height: 1; color: var(--brand);
}
.fact:nth-child(2) .n { color: var(--marigold); }
.fact:nth-child(3) .n { color: var(--pista); }
.fact:nth-child(4) .n { color: var(--indigo); }
.fact .l { font-size: .94rem; color: var(--muted); }

/* ─── Product cards — no pricing anywhere ──────────────────────────────── */
.gift-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.gift {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gift:hover, .gift:focus {
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(248,79,101,.13);
  transform: translateY(-2px);
  color: inherit;
}
.gift__media {
  aspect-ratio: 1 / 1;
  background: var(--warm);
  display: grid; place-items: center;
  padding: 14px;
}
.gift__media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gift__media .placeholder { color: #B3A9A4; font-size: .85rem; text-align: center; padding: 1rem; }
.gift__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: .32rem; flex: 1; }
.gift__brand {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-deep); font-weight: 700;
}
.gift__name { font-size: .98rem; line-height: 1.36; font-weight: 500; color: var(--ink-strong); }
.gift__cta { margin-top: auto; padding-top: .7rem; font-size: .9rem; font-weight: 700; color: var(--brand); }

/* ─── Chips ─────────────────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line-strong); background: #fff;
  border-radius: 999px; padding: .46rem 1.05rem;
  text-decoration: none; color: var(--ink); font-size: .94rem;
}
.chip:hover, .chip:focus { border-color: var(--brand); color: var(--brand-deep); }
.chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.chip .n { color: var(--muted); font-size: .84rem; }
.chip.is-active .n { color: #FFD9DF; }

.brand-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-strip span {
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1.15rem;
  font-size: .98rem; font-weight: 600; color: var(--ink);
}

/* ─── Steps ─────────────────────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { border-top: 3px solid var(--line-strong); padding-top: 1rem; }
.step:nth-child(1) { border-top-color: var(--brand); }
.step:nth-child(2) { border-top-color: var(--marigold); }
.step:nth-child(3) { border-top-color: var(--saffron); }
.step:nth-child(4) { border-top-color: var(--pista); }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.45rem; color: var(--muted);
  display: block; margin-bottom: .25rem;
}
.step h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.step p { font-size: .96rem; color: var(--muted); margin: 0; }

/* ─── Quote form ────────────────────────────────────────────────────────── */
.quote-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.2vw, 38px);
  box-shadow: 0 16px 40px rgba(58,58,58,.06);
}
.quote-panel .form-label { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink-strong); }
.quote-panel .form-control, .quote-panel .form-select {
  border-radius: var(--r-sm); border-color: var(--line-strong);
  padding: .66rem .85rem; font-size: 1rem; background: #fff;
}
.quote-panel .form-control:focus, .quote-panel .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(248,79,101,.18);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq .accordion-button {
  font-weight: 600; font-size: 1.04rem; background: transparent; color: var(--ink-strong);
  padding: 1.05rem 0; box-shadow: none;
}
.faq .accordion-button:not(.collapsed) { color: var(--brand-deep); background: transparent; box-shadow: none; }
.faq .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.faq .accordion-body { padding: 0 0 1.15rem; color: var(--muted); }

/* ─── Footer — light, like everything else ─────────────────────────────── */
.site-footer {
  background: var(--warm);
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 56px 0 28px;
}
.site-footer h4 { color: var(--ink-strong); font-size: .98rem; font-weight: 700; margin-bottom: .85rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: var(--brand-deep); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-base { border-top: 1px solid var(--line-strong); margin-top: 36px; padding-top: 20px; font-size: .87rem; }

/* ─── Odds and ends ─────────────────────────────────────────────────────── */
.crumbs { font-size: .89rem; color: var(--muted); padding: 1rem 0 0; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--brand-deep); }

.notice {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--marigold);
  background: #fff; border-radius: var(--r-sm);
  padding: 1rem 1.2rem; color: var(--ink);
}

.spec-list { list-style: none; padding: 0; margin: 0; color: var(--muted); }
.spec-list li { margin-bottom: .55rem; }
.spec-list i { color: var(--brand); margin-right: .5rem; }

/* ─── Editorial pages ───────────────────────────────────────────────────── */
.feature-grid { display: grid; gap: 24px 30px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { border-top: 3px solid var(--line-strong); padding-top: .9rem; }
.feature:nth-child(6n+1) { border-top-color: var(--brand); }
.feature:nth-child(6n+2) { border-top-color: var(--marigold); }
.feature:nth-child(6n+3) { border-top-color: var(--saffron); }
.feature:nth-child(6n+4) { border-top-color: var(--pista); }
.feature:nth-child(6n+5) { border-top-color: var(--indigo); }
.feature h3 { font-size: 1.14rem; margin-bottom: .3rem; }
.feature p  { font-size: .96rem; color: var(--muted); margin: 0; }

/* Prose on editorial pages sits narrower than the shell, for line length. */
article .section p { max-width: 70ch; }