/* ==========================================================================
   Base — reset, design tokens, layout primitives, buttons
   Loaded globally on every build. Component-specific rules live in
   src/components/<name>/<name>.css
   ========================================================================== */

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

/* Design tokens ----------------------------------------------------------- */
:root {
  /* Surfaces — the warm cream family used across light sections */
  --surface: #f4efe4;
  --surface-warm: #f6efdf;
  --surface-warm-deep: #f2ead9;
  --colour-bg: var(--surface);
  --colour-text: #1a1a1a;
  --colour-muted: #4a4a4a;
  --colour-accent: #1e7a54;
  --colour-accent-dark: #14563a;
  /* Theme-able surfaces */
  --card: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --surface-texture: url("../img/hero-texture.svg");
  /* Post-it note palette */
  --colour-postit-hi: #fff08a;
  --colour-postit: #ffe45c;
  --colour-postit-lo: #ffda42;
  --colour-postit-ink: #3f340a;
  --colour-postit-ink-soft: #6b5a18;
  /* Complementary sticky-note colours */
  --postit-pink-hi: #ffc6d4;
  --postit-pink: #ff9fb6;
  --postit-pink-lo: #ff8aa4;
  --postit-blue-hi: #c4e5f8;
  --postit-blue: #9fd4f2;
  --postit-blue-lo: #86c9ef;
  --postit-green-hi: #d9f19c;
  --postit-green: #c3e879;
  --postit-green-lo: #b1df60;
  --postit-ink: #33302a;
  --colour-desk: #241309;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --max-width: 1400px;
  --spacing: 1rem;
  --radius: 10px;
  --anchor-offset: 4.35rem;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

[id] {
  scroll-margin-top: var(--anchor-offset);
}

body {
  font-family: var(--font-body);
  color: var(--colour-text);
  background-color: var(--colour-bg);
  background-image: var(--surface-texture); /* one shared textured surface */
  background-size: 300px 300px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance; /* even heading lines, no lone last word */
}

/* Handwritten editorial aside — used sparingly above major section headings. */
.hand-note {
  display: block;
  width: fit-content;
  margin: 0 auto 0.55rem;
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1;
  color: var(--colour-accent);
  rotate: -1.5deg;
}

.hand-note--left {
  margin-left: 0;
  margin-right: 0;
  rotate: -1deg;
}

/* Prevent widow words in running text */
p,
li {
  text-wrap: pretty;
}

a {
  color: var(--colour-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Layout primitives ------------------------------------------------------- */
/* Centred content wrapper — 1400px throughout */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

/* The build marks adjacent sections that declare the same semantic surface.
   The previous section already supplies the inter-section breathing room, so
   the continuation does not add a second block of top padding. Two attribute
   selectors intentionally outrank each component's single-class padding. */
section[data-surface][data-surface-join] {
  padding-top: 0;
}

/* Once the homepage adopts its stacked layout, keep each section to a
   comfortable tablet-width column instead of stretching it across the full
   intermediate viewport. Header and footer intentionally remain full-width. */
@media (max-width: 1200px) {
  .hero > .container,
  .quick-wins > .container,
  .sales-letter > .container,
  .about > .container,
  .consultancy > .container,
  .techniques > .container,
  .development > .container,
  .fit > .container,
  .platforms > .container,
  .speed > .container,
  .latest-posts > .container,
  .faq > .container {
    max-width: 768px;
  }
}

/* ==========================================================================
   Buttons — skeuomorphic: bevelled, glossy, physically pressable
   Single button:  <a class="btn">…</a>             (light key)
                   <a class="btn btn--primary">…</a> (blue key)
   Button group:   <div class="btn-group"> … </div>  (first button = primary)
   Sizes:          --sm
   ========================================================================== */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn-group > .btn {
  flex: 1;
  min-width: fit-content;
}

/* Base — a raised, light plastic key */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: #1a1a1a; /* fixed — the button key stays light in both themes */
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius);
  background-image: linear-gradient(180deg, #ffffff 0%, #ece6d8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 rgba(0, 0, 0, 0.32); /* key base — same colour as primary so heights read equal */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Contextual CTA icons */
.btn[href="#free-call"]::before,
.btn[href="#advisory"]::before,
.btn[href="#pricing"]::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.btn[href="#free-call"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}

.btn[href="#advisory"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zM329 305c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L329 305z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zM329 305c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L329 305z'/%3E%3C/svg%3E");
}

.btn[href="#pricing"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform 0.06s ease, box-shadow 0.12s ease, filter 0.12s ease;
  }
}

.btn:hover,
.btn:focus {
  filter: brightness(1.03);
  text-decoration: none;
}

/* Physically depress onto the surface on click */
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn:focus-visible {
  outline: 3px solid rgba(30, 122, 84, 0.5);
  outline-offset: 2px;
}

/* Type-coloured CTA keys — each CTA has its own colour.
   Free call = green · Advisory = amber · Pricing = blue. Base bar colour is
   shared (rgba black) so every key reads at the same height. */
.btn--primary,
.btn[href="#free-call"] {
  color: #fff;
  border-color: rgba(0, 0, 0, 0.45);
  background-image: linear-gradient(180deg, #2fa36e 0%, #136b45 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 rgba(0, 0, 0, 0.32);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.btn[href="#advisory"] {
  color: #fff;
  border-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(180deg, #d98324 0%, #a85e12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.32);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.btn[href="#pricing"] {
  color: #fff;
  border-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(180deg, #3f83c9 0%, #23578f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.32);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.btn--primary:hover,
.btn--primary:focus,
.btn[href="#free-call"]:hover,
.btn[href="#free-call"]:focus,
.btn[href="#advisory"]:hover,
.btn[href="#advisory"]:focus,
.btn[href="#pricing"]:hover,
.btn[href="#pricing"]:focus {
  filter: brightness(1.06);
}

.btn--primary:active,
.btn[href="#free-call"]:active,
.btn[href="#advisory"]:active,
.btn[href="#pricing"]:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Small */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* Stack button groups full-width on mobile */
@media (max-width: 860px) {
  .btn-group,
  .hero__main .btn-group,
  .about__cta,
  .sales-letter__how-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .btn-group > .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Push-pin notes — clickable pin, drop + re-pin
   ========================================================================== */
.note-pin {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

@keyframes note-fall {
  to {
    transform: translateY(140%) rotate(-13deg);
    opacity: 0;
  }
}

@keyframes note-return {
  from {
    transform: translateY(140%) rotate(-13deg);
    opacity: 0;
  }
}

/* Fall — replays cleanly each time; overrides hover/tilt while running */
.sales-letter__note.is-fallen {
  animation: note-fall 0.7s cubic-bezier(0.34, 0.03, 0.62, 0.9) forwards;
  pointer-events: none;
}

.sales-letter__note.is-returning {
  animation: note-return 0.4s ease;
}

.note-repin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--colour-muted);
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.note-repin.is-visible {
  opacity: 1;
}

.note-repin__pin {
  font-size: 1.7rem;
  line-height: 1;
}

.note-repin span:last-child {
  font-weight: 600;
  color: var(--colour-text);
}