/* =========================================================
   Get IT Right — styles.css
   ONE stylesheet shared by every page.

   1. Tokens       done for you (the brand kit as variables)
   2. Base         YOUR TURN: follow the TODO notes
   3. Layout       YOUR TURN
   4. Type         YOUR TURN
   5. Components   done for you (read it, no need to rewrite it)
   6. Page parts   done for you (Services, About, Contact, 404)

   How to use a token:   color: var(--lagoon);
   ========================================================= */


/* 1. TOKENS ------------------------------------------------ */
:root {
  /* Colour */
  --deep-sea:  #0F2E33;  /* text, dark sections */
  --lagoon:    #16676A;  /* primary: links, buttons */
  --mango:     #F4A93B;  /* accent: calls to action only */
  --seaglass:  #5FB8AE;  /* accents on dark */
  --seafoam:   #D9EEE8;  /* soft fills, icon tiles */
  --sand:      #F6EFE4;  /* warm sections */
  --shell:     #FFFDF9;  /* page background */
  --driftwood: #4A5C5E;  /* secondary text */
  --line:      #E4DCCF;  /* borders */

  /* Fonts */
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --max-width: 1200px;
  --gutter: 24px;
  --radius: 24px;
}


/* 2. BASE ---------------------------------------------------*/

 *, *::before, *::after{
  box-sizing: border-box;
 }
    
body {
    margin: 0;
    background: var(--shell);
    color: var(--deep-sea);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
}

img {
    max-width: 100%; 
    height: auto;
    display: block;
}
 
a {
  color: var(--lagoon);
}
a:hover {
  color: var(--deep-sea);
}
:focus-visible {
    outline: 3px solid var(--mango);
    outline-offset: 3px;
}


/* 3. LAYOUT ------------------------------------------------- */

/* Keeps content centred, never wider than 1200px,
   with breathing room at the screen edges on a phone. */
.container {
  max-width: var(--max-width);
  margin-inline: auto;          /* equal space left and right = centred */
  padding-inline: var(--gutter);
}

/* The space above and below each band of the page. */
.section {
  padding-block: 88px;
}

/* Use when a section follows another white section closely,
   like the closing call to action. */
.section-tight {
  padding-top: 0;
}

/* Coloured bands. Add one of these next to .section in the HTML:
   <section class="section section-sand"> */
.section-sand {
  background: var(--sand);
}

.section-dark {
  background: var(--deep-sea);
  color: var(--shell);
}


/* 4. TYPE --------------------------------------------------- */

/* All headings share the display font, heavy and tight. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

/* clamp(smallest, preferred, largest): the size grows with the
   screen width (vw) but never goes past the smallest or largest. */
h1 {
  font-size: clamp(2.75rem, 1.5rem + 4vw, 4.75rem);
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

/* Browsers add space under paragraphs by default.
   We remove it and space things with "gap" instead. */
p {
  margin: 0;
}

/* The big intro paragraph under the h1. */
.lead {
  font-size: 1.25rem;
  color: var(--driftwood);
  max-width: 36em;              /* em = width of the letter "M"; keeps lines readable */
}

/* The small label above headings, e.g. "WHAT WE DO". */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lagoon);
}

/* Colours a few words inside a heading, like "done right." */
.text-lagoon {
  color: var(--lagoon);
}


/* 5. COMPONENTS (done for you) ----------------------------- */

/* Logo: the mark plus the wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--deep-sea);
  text-decoration: none;
}
.logo svg { width: 36px; height: 36px; flex-shrink: 0; }
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.035em;
}
.wordmark-it {
  background: var(--mango);
  color: var(--deep-sea);
  border-radius: 0.16em;
  padding: 0.02em 0.12em 0.08em;
}

/* Header and navigation */
.site-header {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 16px;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--deep-sea);
  font-weight: 500;
  text-decoration: none;
}
.nav-links a:not(.btn):hover { color: var(--lagoon); }
.nav-links a[aria-current="page"] {
  color: var(--lagoon);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mango);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--lagoon); color: var(--shell); }
.btn-primary:hover { background: var(--deep-sea); color: var(--shell); }
.btn-accent { background: var(--mango); color: var(--deep-sea); }
.btn-accent:hover { background: #E0952A; color: var(--deep-sea); }
.btn-outline { background: transparent; border-color: var(--deep-sea); color: var(--deep-sea); }
.btn-outline:hover { background: var(--deep-sea); color: var(--shell); }
.btn-light { background: var(--shell); color: var(--deep-sea); }
.btn-light:hover { background: var(--sand); color: var(--deep-sea); }
.btn-small { min-height: 44px; padding: 10px 20px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* The eyebrow + heading block at the top of a section */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 40px;
}

/* Hero */
.hero { padding-block: 80px 96px; }
.hero .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.hero-text {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-panel {
  flex: 1 1 420px;
  min-width: 0;
  min-height: 480px;
  padding: 24px;
  border-radius: 32px;
  background: var(--sand);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-panel::before {            /* the big Lagoon circle */
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--lagoon);
}
.hero-panel::after {             /* the Mango sun */
  content: "";
  position: absolute;
  left: 36px;
  top: 36px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--mango);
}
.proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--driftwood);
}
.proof svg { width: 22px; height: 22px; flex-shrink: 0; }

/* The "This morning's check-in" card in the hero */
.status-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  padding: 24px;
  border-radius: 20px;
  background: var(--shell);
  box-shadow: 0 24px 48px rgba(15, 46, 51, 0.14);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.status-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.status-card-title { font-weight: 700; font-size: 18px; }
.status-card-note { font-family: var(--font-mono); font-size: 12px; color: var(--driftwood); }
.status-row { display: flex; align-items: center; gap: 14px; }
.status-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.status-row-text strong { font-size: 16px; }
.status-row-text span { font-size: 14px; color: var(--driftwood); }
.status-row > svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Icon tiles (icons use stroke="currentColor", so they take this colour) */
.icon-tile {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--seafoam);
  color: var(--lagoon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-tile svg { width: 28px; height: 28px; }
.icon-tile-small { width: 40px; height: 40px; border-radius: 12px; }
.icon-tile-small svg { width: 22px; height: 22px; }

/* Grids that wrap to one column on a phone */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.grid-2 {
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

/* Cards */
.card {
  padding: 26px;
  border-radius: 22px;
  background: var(--shell);
  color: var(--deep-sea);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
a.card:hover { box-shadow: 0 0 0 2px var(--lagoon); color: var(--deep-sea); }
.card-title { font-weight: 700; font-size: 19px; line-height: 1.3; }
.card-text { font-size: 16px; line-height: 1.5; color: var(--driftwood); }
.card-large { padding: 36px; border-radius: 28px; gap: 16px; }
.card-large .card-text { font-size: 18px; }
.card-sand { background: var(--sand); }
.card-seafoam { background: var(--seafoam); }
.card-lagoon {
  background: var(--lagoon);
  color: var(--shell);
  justify-content: space-between;
}
a.card-lagoon:hover { color: var(--shell); box-shadow: 0 0 0 2px var(--deep-sea); }
.card-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.card-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.card-cta svg { width: 18px; height: 18px; }

/* Small rounded labels */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.tag {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--shell);
  color: var(--lagoon);
  font-size: 14px;
  font-weight: 600;
}

/* Numbered steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.step {
  padding-top: 24px;
  border-top: 3px solid var(--mango);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-number { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--lagoon); }
.step-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.step-text { font-size: 17px; line-height: 1.55; color: var(--driftwood); }

/* Two columns that stack on a phone */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.split > * { flex: 1 1 420px; min-width: 0; }

/* Checklist with the brand check icon */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.check-list li { display: flex; gap: 16px; }
.check-list svg { width: 28px; height: 28px; flex-shrink: 0; }
.check-list strong { display: block; font-size: 19px; }
.check-list span { font-size: 17px; line-height: 1.55; color: var(--driftwood); }

/* Client quote */
.quote {
  margin: 0;
  padding: 40px;
  border-radius: 28px;
  background: var(--seafoam);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
}
.quote figcaption { font-size: 16px; color: var(--driftwood); }

/* Closing call-to-action band */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 64px clamp(28px, 5vw, 72px);
  border-radius: 32px;
  background: var(--lagoon);
  color: var(--shell);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--mango);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.cta-band p { color: var(--seafoam); }

/* Footer */
.site-footer {
  padding-block: 72px 32px;
  background: var(--deep-sea);
  color: var(--shell);
}
.site-footer a { color: var(--seafoam); text-decoration: none; }
.site-footer a:hover { color: var(--mango); }
.site-footer .logo { color: var(--shell); }
.site-footer p { color: var(--seafoam); font-size: 16px; }
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seaglass);
}
.site-footer .footer-title { color: var(--seaglass); }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: var(--seafoam);
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--lagoon);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--seafoam);
}
.badge {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--seaglass);
  color: var(--deep-sea);
  font-size: 14px;
  font-weight: 600;
}


/* 6. PAGE PARTS (Services, About, Contact, 404) ------------- */

/* Top of every inner page */
.page-hero { padding-block: 80px 64px; }
.page-hero .container { display: flex; flex-direction: column; gap: 24px; }
.page-hero h1 { max-width: 920px; text-wrap: balance; }

/* Plain list with no bullets or indent */
.plain-list { list-style: none; margin: 0; padding: 0; }

/* "Jump to a service" links */
.chip-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--seafoam);
  color: var(--deep-sea);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.chip:hover { background: var(--lagoon); color: var(--shell); }

/* One service on the Services page */
.service .split { gap: 32px 64px; }
.service-main { display: flex; flex-direction: column; gap: 18px; }
.service-head { display: flex; align-items: center; gap: 16px; }
.service-number { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--lagoon); }
.service h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); }
.service-text { font-size: 19px; line-height: 1.6; color: var(--driftwood); }
.service-fit { font-size: 17px; line-height: 1.55; }
.text-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
}
.icon-tile-shell { background: var(--shell); }
.icon-tile-dark { background: var(--deep-sea); color: var(--shell); }
.icon-tile-large { width: 56px; height: 56px; border-radius: 18px; }
.icon-tile-large svg { width: 30px; height: 30px; }

/* "What's included" list with plain ticks */
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.5; }
.tick-list li { display: flex; gap: 12px; }
.tick-list svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }

/* Cards with a thin border instead of a fill */
.card-outline { border: 1px solid var(--line); }

/* About page */
.prose { display: flex; flex-direction: column; gap: 20px; }
.prose p { font-size: 19px; line-height: 1.65; color: var(--driftwood); }
.founder-card { gap: 20px; }
.photo-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  border: 1.5px dashed var(--lagoon);
  background: var(--seafoam);
  color: var(--lagoon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.photo-placeholder svg { width: 44px; height: 44px; }
.founder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.founder-photo { width: 140px; height: 140px; flex-shrink: 0; object-fit: cover; border-radius: 24px; }
.founder-extra { font-size: 15px; color: var(--driftwood); }
.founder-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.founder-role { font-size: 16px; color: var(--driftwood); }
.badge-lagoon { background: var(--lagoon); color: var(--shell); }

/* Dark band: values */
.section-dark .eyebrow { color: var(--seaglass); }
.value-card {
  padding: 32px;
  border-radius: 24px;
  background: var(--lagoon);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-number { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--mango); }
.value-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.value-text { font-size: 17px; line-height: 1.55; color: var(--seafoam); }

/* Contact page: booking card */
.booking-card {
  position: relative;
  overflow: hidden;
  padding: 36px;
  border-radius: 28px;
  background: var(--lagoon);
  color: var(--shell);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.booking-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--mango);
}
.booking-card > * { position: relative; z-index: 1; }
.booking-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.booking-meta { font-size: 17px; line-height: 1.55; color: var(--seafoam); }
.booking-card .btn { align-self: flex-start; }
.booking-card .btn svg { width: 18px; height: 18px; }

/* Frequently asked questions (uses <details>, which opens and closes on its own) */
.faq { max-width: 860px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding-block: 22px; }
.faq-list summary { font-weight: 700; font-size: 19px; cursor: pointer; }
.faq-list details p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--driftwood); }

/* Small helpers */
.split-center { align-items: center; }
.ready-box { margin-top: 20px; }
.step-title { line-height: 1.2; }
.ready-box .tag { background: var(--seafoam); }
.check-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}

/* Remote support: the scam warning card */
.notice { flex-direction: row; align-items: flex-start; gap: 20px; margin-top: 48px; background: var(--shell); }
.notice-body { display: flex; flex-direction: column; gap: 10px; }
.notice h3 { font-size: 1.5rem; }