/* ============================================================================
   Nicola Pickup – homepage
   ----------------------------------------------------------------------------
   Implemented from the Claude Design prototype `Homepage.dc.html`
   (project: "Website redesign and branding").

   The prototype carried its styling as inline attributes on top of the
   "Modernist" design-system stylesheet. Only a handful of that system's rules
   actually reached the page, so they are inlined in the Base section below
   rather than shipping the whole system stylesheet (whose component classes –
   .btn, .card, .table, .dialog – this page never uses).

   Deviations from the prototype, all deliberate, all noted at the point of use:
     1. Responsive rules. The prototype is fixed-width desktop with no media
        queries. Design values are preserved exactly at >= 1160px.
     2. Focus rings use the brand red, not the design system's default accent.
     3. Focus rings invert to paper inside the dark contact section.
   ========================================================================== */


/* ── Sodabery ───────────────────────────────────────────────────────────────
   The display face. Its 'salt' and 'ss01' alternates are what the wordmark
   swaps in for the "l" and the "k"; 'liga'/'dlig' handle the rest.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Sodabery';
  src: url('../fonts/Sodabery.woff2') format('woff2'),
       url('../fonts/Sodabery.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ink:    #322D29;
  --paper:  #F7F5F2;
  --muted:  #6b6663;

  /* The spectrum: one colour per strand, in rainbow order. */
  --red:    #D6244F;
  --orange: #F0641E;
  --amber:  #E39000;
  --green:  #2F9E44;
  --teal:   #0E6470;
  --purple: #5B3A8F;

  --red-dark: #b81d43;   /* Email button hover */

  --container: 1160px;
  --gutter: 48px;
}


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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

p { margin: 0 0 12px; }

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

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--red); }

::selection { background: #E3900033; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Skip link – not in the prototype; invisible until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; color: var(--paper); }


/* ── Type helpers ─────────────────────────────────────────────────────────── */

/* Every Sodabery heading on the page. */
.display {
  font-family: 'Sodabery', 'Abril Fatface', serif;
  font-weight: 400;
}

/* The small uppercase labels: kickers, section tags, the testimonial credit. */
.kicker {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The wordmark. Each alternate is pulled back into the letter before it, so
   the swapped glyph tucks under its neighbour instead of sitting beside it.
   Note the inner spans replace the outer feature list rather than adding to
   it – that is how the prototype behaves, and the kerning depends on it. */
.wordmark {
  font-family: 'Sodabery', 'Abril Fatface', serif;
  font-feature-settings: 'liga' 1, 'dlig' 1;
}
.wordmark__l { font-feature-settings: 'salt' 1; margin-right: -0.46em; }
.wordmark__k { font-feature-settings: 'ss01' 1; margin-right: -0.48em; }


/* ── Spectrum bar ─────────────────────────────────────────────────────────── */
.spectrum { display: flex; height: 8px; }
.spectrum i { flex: 1; }
.spectrum i:nth-child(1) { background: var(--red); }
.spectrum i:nth-child(2) { background: var(--orange); }
.spectrum i:nth-child(3) { background: var(--amber); }
.spectrum i:nth-child(4) { background: var(--green); }
.spectrum i:nth-child(5) { background: var(--teal); }
.spectrum i:nth-child(6) { background: var(--purple); }

/* The prototype's `spectrumStyle` prop offers a gradient instead of blocks.
   To switch, add class="spectrum spectrum--gradient" to each bar. */
.spectrum--gradient {
  background: linear-gradient(90deg,
    var(--red), var(--orange), var(--amber),
    var(--green), var(--teal), var(--purple));
}
.spectrum--gradient i { display: none; }


/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  font-size: clamp(21px, 2.24vw, 26px);
  text-decoration: none;
  color: var(--ink);
}
.nav__brand:hover { color: var(--ink); }   /* the wordmark holds its colour */

.nav__links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__links a { text-decoration: none; }

.nav__cta, .nav__cta:hover { color: var(--red); }


/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px var(--gutter) 72px;
  border-bottom: 2px solid var(--ink);
}

.hero__kicker { letter-spacing: 0.14em; margin-bottom: 24px; }

.hero__title {
  font-size: clamp(38px, 7.24vw, 84px);
  line-height: 1.04;
  margin: 0;
  max-width: 900px;
}

.hero__lede {
  font-size: 20px;
  line-height: 1.6;
  max-width: 680px;
  margin: 32px 0 0;
}


/* ── Six strands ──────────────────────────────────────────────────────────── */
.strands {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter);
  border-bottom: 2px solid var(--ink);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.section-head h2 {
  font-size: clamp(30px, 3.79vw, 44px);
  margin: 0;
}

/* The 2px gap plus the ink ground is what draws the rules between cells. */
.strands__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.strand {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 32px 28px;
  background: var(--strand-bg);
  color: var(--strand-fg);
}

.strand__title { font-size: 22px; font-weight: 800; margin: 0; }

.strand__copy {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 14px 0 24px;
  opacity: 0.94;
}

.strand__more {
  margin-top: auto;          /* pins the rule to the bottom of every cell */
  padding-top: 14px;
  border-top: 2px solid var(--strand-fg);
  color: var(--strand-fg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.strand__more:hover { color: var(--strand-fg); opacity: 0.75; }
.strand__more:focus-visible { outline-color: var(--strand-fg); }

.strand--ai                { --strand-bg: var(--red);    --strand-fg: #ffffff; }
.strand--small-business    { --strand-bg: var(--orange); --strand-fg: #ffffff; }
.strand--digital-marketing { --strand-bg: var(--amber);  --strand-fg: #ffffff; }
.strand--saving-money      { --strand-bg: var(--green);  --strand-fg: #ffffff; }
.strand--productivity      { --strand-bg: var(--teal);   --strand-fg: #ffffff; }
.strand--training          { --strand-bg: var(--purple); --strand-fg: #ffffff; }

/* ACCESSIBILITY NOTE – the amber card.
   White on #E39000 is 2.54:1, which fails WCAG AA (4.5:1 for body text, 3:1
   for large text). The prototype's `amberText` prop offers a "deep amber"
   alternative; #4A3100 on the same ground is 4.77:1 and passes. The prototype
   defaults to white, so white is what ships here. To switch, uncomment:

   .strand--digital-marketing { --strand-fg: #4A3100; }
*/


/* ── About ────────────────────────────────────────────────────────────────── */
.about {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter);
}

.about__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}

.about__portrait {
  margin: 0;
  border: 2px solid var(--ink);
}
/* The prototype's image slot sits the portrait flush with the top of its
   frame (its stored offset is exactly the top-edge clamp), so: cover, top. */
.about__portrait img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center top;
}

.about__kicker { letter-spacing: 0.14em; color: var(--red); margin-bottom: 16px; }

.about__title { font-size: clamp(30px, 3.79vw, 44px); margin: 0 0 24px; }

.about__copy { font-size: 17px; line-height: 1.65; margin: 0 0 16px; }

.quote {
  margin: 32px 0 0;
  padding: 24px 28px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
}
.quote__attrib { font-size: 13px; margin: 14px 0 0; }


/* ── Contact / poster close ───────────────────────────────────────────────── */
.contact {
  background: var(--ink);
  color: var(--paper);
}

/* On the dark ground the brand red reads as decoration, not as a focus ring. */
.contact :focus-visible { outline-color: var(--paper); }

.contact__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--gutter);
}

.contact__title {
  font-size: clamp(34px, 5.17vw, 60px);
  line-height: 1.08;
  margin: 0;
  max-width: 760px;
}

.contact__actions {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.btn-email {
  padding: 16px 28px;
  background: var(--red);
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-email:hover { background: var(--red-dark); color: #ffffff; }

.btn-linkedin {
  padding: 16px 0;
  border-bottom: 2px solid var(--paper);
  color: var(--paper);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-linkedin:hover { color: var(--amber); border-bottom-color: var(--amber); }

.contact__footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact__footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #F7F5F233;
}

.contact__wordmark { font-size: clamp(17px, 1.72vw, 20px); margin: 0; }

.contact__legal {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #F7F5F299;
}


/* ── Responsive ───────────────────────────────────────────────────────────────
   Not in the prototype, which is fixed desktop. Everything above is exact at
   >= 1160px; these rules only take effect below that.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .strands__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid   { grid-template-columns: 300px 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  :root { --gutter: 32px; }
}

@media (max-width: 760px) {
  .strands__grid { grid-template-columns: 1fr; }
  .strand        { min-height: 0; }

  .about__grid     { grid-template-columns: 1fr; gap: 32px; }
  .about__portrait { max-width: 380px; }

  .hero    { padding-top: 56px; padding-bottom: 48px; }
  .strands { padding-top: 48px; padding-bottom: 48px; }
  .about   { padding-top: 48px; padding-bottom: 48px; }
  .contact__inner { padding-top: 56px; padding-bottom: 56px; }

  .hero__lede  { font-size: 18px; }
  .about__copy { font-size: 16px; }
  .quote       { font-size: 17px; padding: 20px 22px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }

  .nav        { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav__links { gap: 20px; flex-wrap: wrap; }

  .contact__actions { gap: 16px; }
}


/* ── Cookie consent ───────────────────────────────────────────────────────────
   Not in the prototype. Built from the same parts as the contact block so it
   reads as the page closing rather than a bolted-on widget: ink ground,
   spectrum rule, square corners, uppercase buttons.
   -------------------------------------------------------------------------- */

/* The banner ships with the `hidden` attribute and is revealed by consent.js,
   so it never flashes for people who have already answered. `display: flex`
   on the inner would otherwise beat `hidden`, hence the explicit rule. */
.consent[hidden] { display: none; }

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 -8px 32px rgba(50, 45, 41, 0.28);
}

.consent :focus-visible { outline-color: var(--paper); }

.consent__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.consent__text { max-width: 680px; }

.consent__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.consent__copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #F7F5F2E6;
}

.consent__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Accept and reject are the same size and sit side by side, so refusing is no
   harder than agreeing. The ICO is explicit that it has to be. */
.consent__btn {
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
}

.consent__btn--accept { background: var(--red); color: #ffffff; }
.consent__btn--accept:hover { background: var(--red-dark); }

.consent__btn--reject {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.consent__btn--reject:hover { background: var(--paper); color: var(--ink); }

/* The footer "Cookies" control. A button, not a link, because it reopens the
   banner rather than navigating, but it should read as part of the line. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linklike:hover { color: var(--amber); }

@media (max-width: 560px) {
  .consent__inner   { padding: 20px var(--gutter); gap: 16px; }
  .consent__actions { width: 100%; }
  .consent__btn     { flex: 1; }
}