/* =========================================================
   Heather Gillis Marketing Consulting — site styles
   Colours and fonts are defined once below in :root.
   ========================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License) ----------
   The original Squarespace site used the Adobe Fonts "Minerva Modern"
   (headings) and "Freight Text Pro" (body). Those are licensed through
   Squarespace and cannot be copied, so these close free equivalents are
   used instead. See README.md for how to switch back to the originals. */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours (taken from the original site) */
  --green: #1e2418;      /* main dark background */
  --mist: #c2c8cc;       /* site title, small headings, arrows */
  --sand: #e7d9cb;       /* buttons, contact section */
  --nav: #e3e3e3;        /* navigation links */
  --white: #fff;
  --black: #000;

  /* Fonts */
  --font-heading: "Marcellus", "Minerva Modern", Georgia, serif;
  --font-body: "Crimson Pro", "Freight Text Pro", Georgia, serif;

  /* Layout */
  --gutter: 4vw;         /* left/right page margin (58px at 1440px wide) */
  --max-width: 1600px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;
}

p { margin: 0 0 1em; }

ul { margin: 0; padding-left: 1.5em; }
li { padding-left: 0.4em; margin-bottom: 0.5em; }
li::marker { font-size: 0.8em; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--sand);
  color: var(--black);
}
.skip-link:focus { top: 1rem; }

/* Shared heading sizes */
.heading-xl { font-size: clamp(1.75rem, 1.5vw + 1.5rem, 2.89rem); }
.heading-sm { font-size: clamp(1.0625rem, 0.21vw + 0.98rem, 1.21rem); color: var(--mist); }

.rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--white);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 1.3rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--sand);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }

/* ---------- Header ---------- */
.site-header {
  padding: 2.4rem var(--gutter) 0;
}
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.site-title {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 0.65vw + 1.47rem, 2.05rem);
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: var(--mist);
}
.site-title a { text-decoration: none; }
.header-cta {
  grid-column: 3;
  justify-self: end;
  margin-top: 0.6rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3.6rem;
  font-size: clamp(1.0625rem, 0.21vw + 0.98rem, 1.21rem);
  letter-spacing: 0.01em;
}
.site-nav a {
  padding: 0 0.5rem;
  color: var(--nav);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Mobile menu button (two lines), shown on small screens only */
.menu-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__lines,
.menu-toggle__lines::after {
  display: block;
  width: 36px; height: 1px;
  margin-left: auto;
  background: var(--mist);
  transition: transform 0.2s;
}
.menu-toggle__lines { position: relative; transform: translateY(-5px); }
.menu-toggle__lines::after { content: ""; position: absolute; top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { transform: translateY(-10px) rotate(-90deg); }

.mobile-menu {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 0.5rem;
}

/* ---------- Tagline + hero ---------- */
.tagline {
  margin: 0;
  padding: 1.4rem var(--gutter) 0.9rem;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.5vw + 1.5rem, 2.89rem);
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
}

.hero-image {
  width: 100%;
  aspect-ratio: 1440 / 531;
  object-fit: cover;
}

/* ---------- Sections ---------- */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section p,
.section li { font-size: 1.0625rem; }

/* About */
.about { padding-top: 1.75rem; }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  padding: 1.6rem 0 4.2rem;
}
.about__photo img {
  width: 65.5%;
  margin-left: 8.3%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__text { padding-top: 0.1rem; }
.about__text h2 { margin-bottom: 1.2rem; }

/* Services */
.services__heading {
  margin: 1.5rem 0 3.4rem;
  text-align: center;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 5.8rem;
  padding-bottom: 4.8rem;
}
.service h3 {
  margin-bottom: 1.85rem;
  font-size: clamp(1.4rem, 0.84vw + 1.29rem, 2.05rem);
  text-align: center;
}
.service p { text-align: center; }
.service p + p { margin-top: 1.6em; }
.service ul { margin-top: 1.4rem; }

/* ---------- Carousels (portfolio + testimonials) ----------
   A plain horizontally scrolling list. Visitors can swipe/scroll it,
   or use the arrow buttons (handled in js/main.js). */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* Looping carousel (portfolio): can also be dragged with a mouse */
@media (hover: hover) and (pointer: fine) {
  [data-carousel="loop"] .carousel__track { cursor: grab; }
}
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.carousel__track > li {
  flex: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  width: 60px; height: 60px;
  margin-top: -30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(194, 200, 204, 0.7) center / 36px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s;
}
.carousel__arrow:hover { background-color: var(--mist); }
.carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.carousel__arrow--prev {
  left: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath d='M9 1 1 9l8 8M1 9h43' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.carousel__arrow--next {
  right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath d='m35 1 8 8-8 8M43 9H0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* Portfolio */
.portfolio { max-width: none; padding: 0; }
.portfolio__heading { padding: 0 var(--gutter); margin-bottom: 3.05rem; }
.portfolio__track {
  padding: 0 var(--gutter);
  scroll-padding: 0 var(--gutter);
}
.work { width: 21.25vw; }
.work img {
  width: 100%;
  aspect-ratio: 306 / 231;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.work h3 {
  margin-top: 1.05rem;
  font-size: clamp(1.0625rem, 0.21vw + 0.98rem, 1.21rem);
  color: var(--mist);
}
.portfolio .carousel__controls .carousel__arrow { top: calc(21.25vw * 231 / 306 / 2); }
.portfolio .carousel__arrow--prev { left: calc(var(--gutter) + 14px); }
.portfolio .carousel__arrow--next { right: calc(var(--gutter) + 14px); }

/* Testimonials */
.testimonials { padding-top: 6.2rem; padding-bottom: 3rem; }
.testimonials__heading {
  margin-bottom: 4.8rem;
  line-height: 1.6;
  text-align: center;
  color: var(--mist);
}
.testimonials__track { align-items: center; }
.testimonials__track .testimonial {
  width: calc((100% - 40px) / 3);
  padding: 1.6rem;
  background: var(--white);
  color: var(--black);
  text-align: center;
}
.testimonial blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.testimonials .testimonial__name {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
}
.carousel--testimonials .carousel__arrow--prev { left: -15px; }
.carousel--testimonials .carousel__arrow--next { right: -15px; }
/* All three testimonials fit on wide screens, so the arrows are hidden there */
.carousel--testimonials .carousel__controls { display: none; }

/* ---------- Contact ---------- */
.contact {
  padding: 2.7rem var(--gutter) 1.5rem;
  background: var(--sand);
  color: var(--black);
}
.contact__heading {
  margin-bottom: 2.3rem;
  font-size: clamp(2.8rem, 2.9vw + 2.8rem, 5.41rem);
  line-height: 1.16;
  text-align: center;
}
.contact-form {
  width: 100%;
  max-width: 546px;
  margin: 0 auto;
}
.field-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.field-group legend,
.label-lg {
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 1.21rem;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.field { margin-bottom: 1.7rem; }
.field label {
  display: block;
  margin-bottom: 0.3rem;
}
.required { color: rgba(0, 0, 0, 0.6); margin-left: 0.25em; }
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--black);
  font: inherit;
  font-size: 1.21rem;
}
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact :focus-visible { outline-color: var(--green); }
.btn--submit {
  background: var(--green);
  color: var(--white);
  font-size: 1.1rem;
}
.btn--submit:disabled { opacity: 0.6; cursor: wait; }
.form-status { margin-top: 1rem; }
.form-status--error { color: #8a1c1c; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  /* Header: the "Work with me" button moves into the menu */
  .header-bar { grid-template-columns: 44px 1fr 44px; gap: 0 0.5rem; }
  .header-cta { display: none; }
  .menu-toggle { display: block; }

  .services__grid { gap: 3rem 2.5rem; }
  .work { width: 30vw; }
  .portfolio .carousel__controls .carousel__arrow { top: calc(30vw * 231 / 306 / 2); }
}

/* ---------- Phone (matches the original's mobile breakpoint) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 6vw; }

  .site-header { padding-top: 1.4rem; }
  .site-nav { margin-top: 1.6rem; }

  .tagline { padding-top: 1.5rem; padding-bottom: 0.6rem; }

  .about { padding-top: 1.3rem; }
  .about__grid { grid-template-columns: 1fr; padding: 1.5rem 0 3rem; }
  .about__photo img { width: 74%; margin: 0 auto 1.3rem; }

  .services .rule { display: none; }
  .services__heading { margin: 0 0 2.6rem; }
  .services__grid { grid-template-columns: 1fr; gap: 3.5rem; padding-bottom: 3.5rem; }
  .service h3 { margin-bottom: 1.4rem; }

  .portfolio .portfolio__heading {
    margin: 0 var(--gutter) 4.6rem;
    padding: 1.9rem 0 0;
    border-top: 1px solid var(--white);
  }
  .portfolio__track { padding: 0 16px; scroll-padding: 0 16px; gap: 16px; }
  .work { width: calc(100vw - 32px); }

  /* On phones the arrows sit together underneath the carousel */
  .carousel__controls,
  .carousel--testimonials .carousel__controls {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 2.6rem;
  }
  .carousel__controls .carousel__arrow,
  .portfolio .carousel__controls .carousel__arrow {
    position: static;
    width: 40px; height: 40px;
    margin: 0;
    background-size: 22px;
  }

  .testimonials { padding-top: 4rem; padding-left: 16px; padding-right: 16px; }
  .testimonials__heading { margin-bottom: 3.5rem; }
  .testimonials__track { gap: 16px; align-items: stretch; }
  .testimonials__track .testimonial { width: 100%; padding: 1.4rem 1.3rem; }
  .testimonial blockquote { font-size: 0.875rem; }
  .testimonials .testimonial__name { font-size: 0.875rem; }
  .carousel--testimonials .carousel__controls { margin-top: 1.5rem; }

  .contact__heading { margin-bottom: 1.5rem; }
  .field-row { gap: 0 12px; }
}