/* ==========================================================================
   Charlotte Crosby: homepage styles
   --------------------------------------------------------------------------
   This file is laid out in the same order as the page, top to bottom:

     1.  Colours and fonts (change these to restyle the whole site)
     2.  Basics
     3.  Shared pieces: section headings, buttons, skip link
     4.  Navigation and scroll progress bar
     5.  Hero
     6.  "At a glance" strip
     7.  Selected work (polaroid cards)
     8.  Feedback (ratings and learner quotes)
     9.  What I bring (post-it cards)
     10. How I can help (pinned service cards)
     11. The Process
     12. Testimonials (hidden until switched on)
     13. About me
     14. Contact
     15. Footer
     16. FAQ (currently not on the page)
     17. Animations
     18. Small screens
     19. Reduced motion

   Tip: most colours are set once in section 1. Change a value there and it
   updates everywhere it is used.
   ========================================================================== */


/* 1. Colours and fonts
   ========================================================================== */

:root {
  /* Main palette */
  --paper:      #F7F2E7;   /* cream page background */
  --paper-2:    #EFE6D4;   /* slightly darker cream for panels */
  --ink:        #211D1A;   /* main text */
  --ink-soft:   #5B564E;   /* secondary text */
  --plum:       #8B6FCB;
  --plum-deep:  #6B52A3;   /* logo "Crosby", buttons, links */
  --plum-dark:  #1B1712;
  --plum-dark-lift: #2A251E; /* form fields */
  --rose:       #E67A5C;   /* About and Contact backgrounds */
  --sage:       #468C7A;
  --sage-deep:  #2E5F51;
  --ochre:      #DDAA35;
  --ochre-deep: #A67D22;
  --lilac:      #AE98E0;   /* How I can help background */
  --glance:     #8DB5A6;   /* "At a glance" strip */
  --footer:     #14110D;

  /* Darker versions of the accent colours, for small text (they pass contrast checks) */
  --rose-text:  #8E3B22;
  --ochre-text: #6E5115;

  /* Post-it paper colours */
  --postit-rose:  #F9DDD1;
  --postit-sage:  #D8E8E2;
  --postit-plum:  #E2DAF3;
  --postit-ochre: #F6E5BE;
  --postit-mint:  #DCEBE1;

  /* Lines */
  --line:         rgba(33, 29, 26, 0.14);
  --line-on-dark: rgba(247, 242, 231, 0.14);

  /* Fonts (loaded from /fonts, see fonts/fonts.css) */
  --font-body:    'Merriweather Sans', sans-serif;  /* headings and body text */
  --font-display: 'Unbounded', sans-serif;          /* logo and small labels */
}


/* 2. Basics
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
}

a       { color: var(--plum); }
a:hover { color: var(--plum-deep); }

p { text-wrap: pretty; }   /* avoids a single word on the last line */

/* Small labels and captions keep normal wrapping */
.hero__label, .polaroid__caption, .work-card__evidence, .work-card__cta,
.rating-card__score, .postit__with, .stat__value, .stat__label { text-wrap: wrap; }

/* Hide elements from screen readers' reading order but keep them on the page */
.visually-hidden-field {
  position: absolute;
  left: -9999px;
}

/* Elements marked data-reveal fade up as they scroll into view.
   They are only hidden when JavaScript is running, so nothing is lost without it. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* 3. Shared pieces
   ========================================================================== */

/* Standard section spacing */
.section {
  padding: 7rem 3rem;
}

/* Big section headings, e.g. "Selected work", "How I can help" */
.section-title {
  font-family: var(--font-body);
  font-size: clamp(2.3rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Heading row with room for an optional illustration on the right */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

/* Illustration slot: invisible until an <img> is placed inside it */
.illustration-slot {
  flex: 0 1 auto;
  width: clamp(180px, 24vw, 340px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.illustration-slot:empty            { display: none; }
.illustration-slot:not(:has(img))   { display: none; }
.illustration-slot img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Intro paragraph under a section heading */
.section-intro {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 3rem;
  text-wrap: balance;
}

/* Buttons in the hero */
.btn {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  text-decoration: none;
  border: 1px solid;
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.3s;
}
.btn--primary {
  background: var(--plum-deep);
  border-color: var(--plum-deep);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}
.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}

/* "Skip to selected work" link: only appears when tabbed to with the keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}


/* 4. Navigation and scroll progress bar
   ========================================================================== */

/* Thin bar along the top showing how far down the page you are */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--plum), var(--rose));
  z-index: 101;
  transition: width 0.1s linear;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 3rem;
  background: rgba(246, 242, 238, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s ease;
}
/* Added by the script when scrolling down, so the nav slides out of the way */
.site-nav.is-hidden { transform: translateY(-100%); }

.wordmark {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark span { color: var(--plum-deep); }

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--plum);
}


/* 5. Hero
   ========================================================================== */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem 3rem 4rem;
  position: relative;
  overflow: hidden;
}

/* Faint ruled-paper lines behind the hero */
.hero__rules {
  position: absolute;
  inset: -60px 0;
  left: -15px;
  top: 95px;
  height: 112%;
  pointer-events: none;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 47px,
    rgba(33, 29, 26, 0.045) 47px,
    rgba(33, 29, 26, 0.045) 48px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
          mask-image: linear-gradient(to bottom, transparent, #000 40%);
}

/* Thin vertical line down the right-hand side */
.hero__track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3rem;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.hero__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: var(--plum);
}
.hero__track-fill::after {          /* the small dot */
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plum);
}

/* "Learning Experience Designer" label above the heading */
.hero__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--plum-deep);
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}

/* "Learning design, start to finish" */
.hero__title {
  font-family: var(--font-body);
  font-size: clamp(3rem, 8.5vw, 9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 1;
}
/* Each line slides up from behind a mask. The extra bottom padding stops
   letters like "g" being clipped; the negative margin keeps line spacing even. */
.hero__line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.22em;
  margin-bottom: -0.16em;
}
.hero__line:last-child {
  padding: 0.06em 0 0.3em;          /* extra room for the yellow underline */
  margin-bottom: 0;
}
.hero__line > span {
  display: block;
  animation: lineUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__line:nth-child(1) > span { animation-delay: 0.05s; }
.hero__line:nth-child(2) > span { animation-delay: 0.17s; }
.hero__line:nth-child(3) > span {
  animation-delay: 0.29s;
  display: inline-block;
  position: relative;
}
.hero__underline {                  /* the yellow scribble under "finish" */
  position: absolute;
  left: 0;
  bottom: -0.2em;
  height: 0.19em;
  pointer-events: none;
}

/* Intro text and buttons along the bottom of the hero */
.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.8rem;
  position: relative;
  z-index: 1;
}
.hero__intro {
  max-width: 520px;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.hero__intro strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__status {                     /* "Based in Nottingham…" and "Available…" */
  display: block;
  margin-top: 0.2rem;
  color: var(--ink);
  font-weight: 600;
}
.hero__status:first-of-type { margin-top: 1.1rem; }

.hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
}
.hero__arrow {                      /* hand-drawn arrow pointing at the buttons */
  position: absolute;
  top: -52px;
  left: 0;
  pointer-events: none;
}


/* 6. "At a glance" strip
   ========================================================================== */

.glance {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.9rem 2.4rem;
  padding: 2.2rem 3rem;
  border-bottom: 1px solid var(--line);
  background: var(--glance);
}
.glance__label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.4rem;
}
.glance__item {
  font-size: 0.9rem;
  color: var(--ink);
}


/* 7. Selected work (polaroid cards)
   ========================================================================== */

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.work-header p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 360px;
  text-wrap: balance;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.4rem;
  width: 100%;
  padding: 1rem 0.3rem 1.6rem;
}

/* Colour themes for the cards. Each card uses one, e.g. class="work-card theme-rose" */
.theme-rose  { --tape: var(--rose);  --tint: rgba(230, 122, 92, 0.18);  --accent: var(--rose);       --cta: var(--rose-text); }
.theme-sage  { --tape: var(--sage);  --tint: rgba(70, 140, 122, 0.16);  --accent: var(--sage);       --cta: var(--sage-deep); }
.theme-plum  { --tape: var(--plum);  --tint: rgba(139, 111, 203, 0.16); --accent: var(--plum);       --cta: var(--plum-deep); }
.theme-ochre { --tape: var(--ochre); --tint: rgba(221, 170, 53, 0.18);  --accent: var(--ochre-deep); --cta: var(--ochre-text); }
.theme-plum .polaroid__tape { opacity: 0.75; }

.work-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s;
}
.work-card:hover {
  color: inherit;
  transform: translateY(-6px);
}

/* The polaroid photo. Its tilt is set on each card with style="--tilt: …" */
.polaroid {
  position: relative;
  background: var(--paper);
  padding: 12px 12px 30px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
  transform: rotate(var(--tilt, 0deg));
}
.polaroid__tape {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-tilt, 0deg));
  width: 72px;
  height: 26px;
  background: var(--tape);
  opacity: 0.8;
}
.polaroid__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tint);
  overflow: hidden;
}
.polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* fills the frame; use the --contain version to show the whole image */
  display: block;
}
.polaroid__photo--contain img { object-fit: contain; }
.polaroid__caption {
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}

/* Text under the polaroid */
.work-card__title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.work-card__summary {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
  /* cuts the text off after four lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card__evidence {
  font-size: 0.74rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: 0.6rem;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}
.work-card__cta {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta);
}


/* 8. Feedback (ratings and learner quotes)
   ========================================================================== */

.feedback-title { margin-top: 4rem; }

.feedback-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: 1080px;
  margin-top: 3rem;
}
.feedback-grid + .feedback-grid { margin-top: 1.6rem; }

/* Rating cards (they link to the courses on FutureLearn) */
.rating-card {
  display: block;
  border: 1px solid var(--line);
  padding: 2rem;
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color 0.35s, transform 0.35s;
}
.rating-card:hover {
  border-color: var(--plum);
  transform: translateY(-4px);
}
.rating-card--plum { --score: var(--plum); --cite: var(--plum-deep); }
.rating-card--sage { --score: var(--sage); --cite: var(--sage-deep); }
.rating-card .rating-card__score {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.9rem;
  color: var(--score);
}
.rating-card__score span {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.rating-card p {
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.rating-card cite {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--cite);
}

/* Quote cards: used for learner reviews here and for testimonials below */
.quote-card {
  background: var(--paper);
  border-radius: 6px;
  padding: 1.8rem;
  border-left: 4px solid var(--plum);
}
.quote-card--tinted { background: var(--paper-2); }
@media (min-width: 760px) {
  .quote-card--wide { grid-column: 1 / -1; }   /* spans both columns */
}
.quote-card blockquote {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
}
.quote-card blockquote::before {   /* the large opening quote mark */
  content: "\201C";
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 0.8;
  color: var(--plum-deep);
  margin-bottom: 0.5rem;
}
.quote-card figcaption {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.quote-card figcaption strong { color: var(--ink); }


/* 9. What I bring (post-it cards)
   ========================================================================== */

.skills {
  position: relative;
  overflow: hidden;
}
.skills__header {
  position: relative;
  z-index: 1;
}
.skills__intro {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 620px;
  margin-top: 1.4rem;
  margin-bottom: 3.5rem;
  color: var(--ink-soft);
}

.postit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 2rem;
  padding: 0.8rem 0.4rem;
}

/* Paper colours for the post-its. To add a paper texture, add to .postit:
   background-image: url('../uploads/your-texture.png'); background-size: cover;
   background-blend-mode: multiply; */
.postit--rose  { --postit: var(--postit-rose);  --tape: var(--rose);  --rule: rgba(184, 84, 54, 0.25);  --with: var(--rose-text); }
.postit--sage  { --postit: var(--postit-sage);  --tape: var(--sage);  --rule: rgba(46, 95, 81, 0.25);   --with: var(--sage-deep); }
.postit--plum  { --postit: var(--postit-plum);  --tape: var(--plum);  --rule: rgba(122, 90, 163, 0.25); --with: var(--plum-deep); }
.postit--ochre { --postit: var(--postit-ochre); --tape: var(--ochre); --rule: rgba(143, 106, 30, 0.25); --with: var(--ochre-text); }
.postit--mint  { --postit: var(--postit-mint);  --tape: var(--sage);  --rule: rgba(70, 140, 122, 0.28); --with: var(--sage-deep); }

/* Each post-it's tilt is set on the card with style="--tilt: …" */
.postit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2.2rem 1.9rem 1.9rem;
  text-align: center;
  background: var(--postit);
  border-radius: 2px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 10px 22px rgba(33, 29, 26, 0.13);
  transition: transform 0.3s ease;
}
.postit:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 16px 30px rgba(33, 29, 26, 0.18);
}
.postit__tape {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tilt, 0deg));
  width: 66px;
  height: 22px;
  background: var(--tape);
  opacity: 0.55;
  pointer-events: none;
}
.postit__icon {                     /* optional icon, see the comment in each card */
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.postit__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.7rem;
  color: var(--ink);
}
.postit p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.postit .postit__with {              /* the "With …" line at the bottom */
  margin-top: auto;
  width: 100%;
  font-size: 0.78rem;
  line-height: normal;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
}
.postit__with b {
  color: var(--with);
  font-weight: 600;
}

/* "Also in the toolkit" strip under the post-its */
.toolkit {
  border: 1px solid var(--line);
  border-top: none;
  padding: 1.6rem 2.6rem;
  background: var(--paper-2);
  margin-top: 2.4rem;
}
.toolkit__label {
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum-deep);
  margin-right: 0.8rem;
}
.toolkit__list {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--ink-soft);
}


/* 10. How I can help (pinned service cards)
   ========================================================================== */

.services {
  background: var(--lilac);
}
.services .section-head { margin-bottom: 1.2rem; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 2rem;
  padding: 0.9rem 0.4rem 0;
}

/* Paper colour, tilt and pin colour for each card */
.service-card:nth-child(1) { --tilt: -1.3deg; --card: var(--postit-ochre); --pin: #B8432A; }
.service-card:nth-child(2) { --tilt: 1deg;    --card: var(--postit-rose);  --pin: #2E6F5E; }
.service-card:nth-child(3) { --tilt: -0.8deg; --card: var(--postit-mint);  --pin: #6B52A3; }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2.5rem 1.9rem 1.9rem;
  text-align: center;
  background: var(--card);
  border-radius: 2px;
  transform: rotate(var(--tilt));
  box-shadow: 0 12px 24px rgba(33, 29, 26, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.service-card:hover,
.service-card:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 32px rgba(33, 29, 26, 0.28);
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.service-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.service-card .service-card__proof { /* "See it in …" */
  margin-top: auto;
  width: 100%;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(33, 29, 26, 0.18);
  font-size: 0.88rem;
}
.service-card__proof a {
  color: var(--plum-deep);
  font-weight: 700;
}

/* The thumbtack: a round head with a highlight, plus a soft shadow on the paper */
.service-card::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  z-index: 2;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.8) 0 9%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, var(--pin) 0 68%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: 0 4px 5px rgba(33, 29, 26, 0.4), 0 1px 1px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s ease;
}
.service-card::after {
  content: "";
  position: absolute;
  top: 9px;
  left: calc(50% + 2px);
  width: 16px;
  height: 7px;
  border-radius: 50%;
  background: rgba(33, 29, 26, 0.24);
  filter: blur(2px);
  z-index: 1;
}
.service-card:hover::before,
.service-card:focus-within::before { transform: translateY(-2px); }

/* When the cards scroll into view they settle in one by one, and each pin presses in */
.service-grid.is-visible .service-card               { animation: cardSettle 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.service-grid.is-visible .service-card::before       { animation: pinPress 0.5s ease-out backwards; }
.service-grid.is-visible .service-card:nth-child(2)  { animation-delay: 0.14s; }
.service-grid.is-visible .service-card:nth-child(3)  { animation-delay: 0.28s; }
.service-grid.is-visible .service-card:nth-child(1)::before { animation-delay: 0.3s; }
.service-grid.is-visible .service-card:nth-child(2)::before { animation-delay: 0.44s; }
.service-grid.is-visible .service-card:nth-child(3)::before { animation-delay: 0.58s; }

.services__also {                   /* "Also available: …" */
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: balance;
}
.services__also a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "For agencies" and "For organisations and universities" */
.audiences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 4.5rem;
}
.audiences h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
}
.audiences p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}

.worked-with {
  margin-top: 2.5rem;
  font-size: 0.98rem;
  color: var(--ink);
}


/* 11. The Process
   ========================================================================== */

.process .section-title { margin-bottom: 1.2rem; }
.process-intro          { color: var(--ink-soft); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  list-style: none;
}
.process-step__number {
  font-family: var(--font-body);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--plum-deep);
  margin-bottom: 0.8rem;
}
.process-step h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.process-step p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}


/* 12. Testimonials (hidden until switched on)
   ========================================================================== */

.testimonials {
  padding: 6rem 3rem;
  background: var(--paper-2);
}
.testimonials .section-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: 2.4rem;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;   /* one column on phones */
  gap: 1.6rem;
}
@media (min-width: 760px) {
  .testimonial-grid { grid-template-columns: 1fr 1fr; }   /* 2 x 2 with four quotes */
}


/* 13. About me
   ========================================================================== */

/* The thin coral line above the About section */
.coral-rule {
  height: 6px;
  background: var(--rose);
}

.about {
  padding: 7rem 3rem 6rem;
  position: relative;
  color: var(--ink);
  background: var(--rose);
}
.about__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 5rem;
  align-items: start;
  margin-top: 3.5rem;
}

/* Portrait: a photo on a paper backing, a dark shadow card, and a strip of tape */
.portrait { position: relative; }
.portrait__frame {
  position: relative;
  width: 240px;
  height: 280px;
  margin: 2.4rem 0 0 1.4rem;
}
.portrait__shadow {
  position: absolute;
  top: 14px;
  left: -18px;
  width: 220px;
  height: 260px;
  opacity: 0.6;
  transform: rotate(-8deg);
  border-radius: 4px;
  background: var(--ink);
}
.portrait__backing {
  position: absolute;
  top: -10px;
  left: 8px;
  width: 224px;
  height: 264px;
  background: var(--paper);
  transform: rotate(4deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.portrait__photo {
  position: relative;
  width: 224px;
  height: 264px;
  margin-left: 8px;
  margin-top: -10px;
  overflow: hidden;
  transform: rotate(4deg);
  animation: floaty 7s ease-in-out infinite;
}
.portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait__tape {
  position: absolute;
  top: -23px;
  left: 130px;
  transform: translateX(-50%) rotate(-3deg);
  width: 44px;
  height: 60px;
  background: rgba(221, 170, 53, 0.8);
}

.about__text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  max-width: 640px;
}
.about__text p + p { margin-top: 1.1rem; }
.about__text strong {
  color: var(--ink);
  font-weight: 600;
}

/* The three dark stat boxes */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(246, 242, 238, 0.2);
  border: 1px solid rgba(246, 242, 238, 0.2);
  margin-top: 2.6rem;
  max-width: 640px;
}
.stat {
  padding: 1.6rem;
  background: var(--ink);
  transition: background 0.35s;
}
.stat:hover { background: var(--plum-dark-lift); }
.stat--plum  { --stat-colour: var(--plum); }
.stat--ochre { --stat-colour: var(--ochre); }
.stat--sage  { --stat-colour: var(--sage); }
.stat__value {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.25rem;
  color: var(--stat-colour);
}
.stat__value--small {
  font-size: 1.4rem;
  line-height: 1.6;
}
.stat__label {
  font-size: 0.78rem;
  color: rgba(246, 242, 238, 0.85);
}


/* 14. Contact
   ========================================================================== */

.contact {
  padding: 8rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(246, 242, 238, 0.14);
  background: var(--rose);
}

/* The big "HELLO" behind the heading (decoration only) */
.contact__hello {
  position: absolute;
  top: 144px;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(5rem, 17vw, 17rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--plum-deep);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  animation: breathe 8s ease-in-out infinite;
}
.contact__hello::before { content: "HELLO"; }   /* change the word here */

.contact__title {
  font-family: var(--font-body);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding-top: 2em;                 /* room for "HELLO" above */
  margin-bottom: 1.2rem;
  position: relative;
}
.highlight {                        /* yellow highlighter behind "good." */
  background-image: linear-gradient(var(--ochre), var(--ochre));
  background-repeat: no-repeat;
  background-size: 100% 34%;
  background-position: 0 90%;
}

.contact__note {
  font-size: 1.05rem;
  color: var(--ink);
  max-width: 680px;
  margin: 1.6rem auto 0;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}

/* The form */
.contact-form {
  max-width: 540px;
  margin: 3rem auto 0;
  text-align: left;
  position: relative;
  z-index: 1;
}
.field { margin-bottom: 1rem; }
.field__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field__optional { font-weight: 400; }
.field__input,
.field__select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--paper);
  background: var(--plum-dark-lift);
  border: 1px solid rgba(246, 242, 238, 0.18);
  padding: 0.85rem 1rem;
  border-radius: 2px;
}
.field__input {
  font-weight: 300;
  line-height: 1.6;
}
textarea.field__input {
  resize: vertical;
  min-height: 130px;
}
.field__input:focus-visible,
.field__select:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.btn-submit {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 2.2rem;
  margin-top: 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn-submit:hover {
  background: var(--plum-deep);
  border-color: var(--plum-deep);
}

.contact__privacy {                 /* "Your details are only used…" */
  font-size: 0.92rem;
  color: var(--ink);
  max-width: 540px;
  margin: 1.2rem auto 0;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.contact__privacy a,
.contact__elsewhere a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__elsewhere {               /* "Or find me on LinkedIn" */
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--ink);
  position: relative;
  z-index: 1;
}


/* 15. Footer
   ========================================================================== */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding: 1.4rem 3rem;
  text-align: center;
  background: var(--footer);
  color: rgba(246, 242, 238, 0.78);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.site-footer a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* 16. FAQ (currently not on the page; see the comment in index.html)
   ========================================================================== */

.faq { max-width: 820px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 800;
  color: var(--plum-deep);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 68ch;
}


/* 17. Animations
   ========================================================================== */

@keyframes lineUp {                 /* hero heading lines */
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes floaty {                 /* portrait gently bobbing */
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-10px); }
}
@keyframes breathe {                /* "HELLO" slowly growing and shrinking */
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes cardSettle {             /* service cards dropping into place */
  0%   { opacity: 0; transform: translateY(-24px) rotate(calc(var(--tilt) * -2.4)); }
  60%  { opacity: 1; transform: translateY(3px) rotate(calc(var(--tilt) * 0.8)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
}
@keyframes pinPress {               /* thumbtacks pressing in */
  0%   { opacity: 0; transform: translateY(-16px) scale(1.7); }
  65%  { opacity: 1; transform: translateY(1px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}


/* 18. Small screens
   ========================================================================== */

/* Tablets and smaller */
@media (max-width: 900px) {
  .site-nav               { padding: 1rem 1.4rem; }
  .nav-links              { gap: 1rem; }
  .nav-links a            { font-size: 0.66rem; }

  .section                { padding: 4rem 1.4rem; }
  .about                  { padding: 4rem 1.4rem 4.5rem; }
  .contact                { padding: 5rem 1.4rem; }
  .testimonials           { padding: 4rem 1.4rem; }
  .glance                 { padding: 1.4rem; gap: 0.7rem 1.4rem; }

  .work-grid              { gap: 2rem; padding: 0.5rem 0 1rem; }
  .feedback-grid          { grid-template-columns: 1fr 1fr; }
  .postit-grid            { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .toolkit                { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem; }
  .service-grid,
  .process-steps          { grid-template-columns: 1fr 1fr; }
  .audiences              { grid-template-columns: 1fr; gap: 1.5rem; }

  .about__grid            { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__grid > .portrait { margin: 0 auto; }
  .stats                  { grid-template-columns: 1fr; max-width: none; }

  .contact__hello         { display: none; }
  .site-footer            { gap: 0.4rem; padding: 1.2rem 1.4rem; }
}

/* Illustration slots are hidden on phones */
@media (max-width: 700px) {
  .illustration-slot { display: none !important; }
}

/* Phones */
@media (max-width: 620px) {
  .site-nav {
    flex-wrap: wrap;
    row-gap: 0.6rem;
    column-gap: 1.2rem;
    justify-content: center;
  }
  .wordmark               { flex-basis: 100%; text-align: center; }
  .nav-links              { gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
  .nav-links a            { font-size: 0.62rem; }

  .hero                   { padding: 6rem 1.4rem 3rem; min-height: auto; }
  .hero__title            { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .hero__intro            { max-width: 100%; }
  .hero__track,
  .hero__arrow            { display: none; }
  .hero__actions          { flex-shrink: 1; width: 100%; }
  .hero__actions .btn     { flex: 1 1 140px; text-align: center; padding: 1rem 1.2rem; }

  .postit-grid,
  .service-grid,
  .process-steps,
  .feedback-grid          { grid-template-columns: 1fr; }

  .contact-form           { max-width: 100%; }
}


/* 19. Reduced motion
   For visitors who have asked their device to reduce motion, everything is
   shown straight away with no animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .postit:hover { transform: rotate(var(--tilt, 0deg)); }
}