/* =============================================================================

   layout.css — Page structure: spacing, grids, breakpoints, shared primitives

   Section colours and typography live in numbered files (1-tokens through 15-legal).

   ============================================================================= */



/* ---------- Layout variables ---------- */



:root {

  --header-height: 3.5rem;

  /* Measured fixed header height (main.js); fallback until script runs */

  --header-offset: calc(var(--header-height) + 14px);

  --container-max: 1120px;

  --container-padding: 1.5rem;

  --section-padding-y: 4.5rem;

  --grid-gap: 1.5rem;

  --curve-radius: 56px;

}



/* ---------- Global resets ---------- */



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

}



img {

  display: block;

  max-width: 100%;

  height: auto;

}



ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



a {

  color: inherit;

}



/* ---------- Shared layout primitives ---------- */



.container {

  width: min(var(--container-max), 100% - (var(--container-padding) * 2));

  margin-inline: auto;

}



.grid {

  display: grid;

  gap: var(--grid-gap);

}



.section {

  padding-block: var(--section-padding-y) calc(var(--section-padding-y) - 1rem);

}



.section__title {

  margin: 0 0 1.5rem;

  text-align: center;

}



.main {

  overflow: hidden;

}



section[id] {

  scroll-margin-top: calc(var(--header-offset) + 1.5rem);

}



[class*='__bg'] {

  border-radius: var(--curve-radius) var(--curve-radius) 0 0;

}



.grass-edge {

  width: 100%;

  height: 14px;

  background-image: url('/assets/img/grass-edge.svg');

  background-repeat: repeat-x;

  background-position: center bottom;

  background-size: 80px 14px;

  pointer-events: none;

}



.header__border.grass-edge {

  transition: opacity 0.3s ease;

}



.roots-edge {

  width: 100%;

  height: 32px;

  background-image: url('/assets/img/roots-edge.svg');

  background-repeat: repeat-x;

  background-position: center top;

  background-size: 240px 32px;

  pointer-events: none;

}



.media-placeholder {

  min-height: 200px;

  border: 1px dashed #999;

  background: #f3f3f3;

  display: grid;

  place-items: center;

}



.media-placeholder::before {

  content: attr(data-label);

  color: #666;

  font-size: 0.875rem;

}



.media-placeholder--wide {

  aspect-ratio: 4 / 3;

  min-height: 0;

}



.section-photo {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

}



.section-photo--wide {

  aspect-ratio: 4 / 3;

}



.media-placeholder--map {

  min-height: 160px;

  margin-top: 1rem;

}



/* ---------- Header layout ---------- */



.header {

  position: fixed;

  inset: 0 0 auto;

  width: 100%;

  z-index: var(--z-fixed, 100);

}



.nav {

  min-height: var(--header-height);

  display: grid;

  grid-template-columns: 1fr auto;

  grid-template-areas:

    'logo actions'

    'menu menu';

  align-items: center;

  gap: 0.5rem 0.65rem;

  padding-block: 0.75rem;

}



.nav__logo {

  grid-area: logo;

}



.nav__toggle {

  grid-area: toggle;

  display: none;

}



.nav__menu {

  grid-area: menu;

}



.nav__actions {

  grid-area: actions;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.nav__cta {

  justify-self: auto;

}



.nav__list {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem 1rem;

}



/* ---------- Home section layout ---------- */



.home {

  padding-top: calc(var(--header-offset) + 1rem);

}



.home__container {

  align-items: center;

  row-gap: 2rem;

}



.home__media,

.about__media {

  margin: 0;

}



/* Home photo — full width when stacked; 3:2 crop */

.home__media {

  width: 100%;

  min-width: 0;

}



.home__media .section-photo {

  width: 100%;

  max-width: none;

  aspect-ratio: 3 / 2;

  object-fit: cover;

}



/* ---------- Services section layout ---------- */



.services__container {

  align-items: start;

  row-gap: 3rem;

}



.services__content {

  grid-template-columns: 1fr;

}



.services__note {

  grid-column: 1 / -1;

}



.services__data {

  min-width: 0;

}



.services__card {

  /* colours and typography: 6-services.css */

}



/* ---------- About section layout ---------- */



.about__container {

  align-items: center;

  row-gap: 2rem;

}



.about__data {

  min-width: 0;

}



.about__stats {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.about__stat {

  /* colours and typography: 7-about.css */

}



.about__stat-value {

  display: block;

}



/* About photo — full width when stacked; 5:4 crop */

.about__media {

  width: 100%;

  min-width: 0;

}



.about__media .section-photo {

  width: 100%;

  max-width: none;

  aspect-ratio: 5 / 4;

  object-fit: cover;

}



/* ---------- Process section layout ---------- */



.process__container {

  position: relative;

}



.process__content {

  display: grid;

  gap: 3rem;

  position: relative;

  justify-content: center;

}



.process__card {

  width: min(100%, 250px);

}



.process__circle {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  position: relative;

}



.process__number {

  position: absolute;

  left: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

}



.process__card--move,

.process__card--move .process__circle {

  margin-left: auto;

}



.process__card--move .process__description {

  text-align: right;

}



.process__border {

  position: absolute;

  left: 3rem;

  top: 7.5rem;

  pointer-events: none;

}



/* ---------- Our work section layout ---------- */



.work__grid {

  grid-template-columns: 1fr;

}



.work__more {

  margin-top: 1.5rem;

  text-align: center;

}



/* ---------- Testimonials section layout ---------- */



.testimonials__list {

  grid-template-columns: 1fr;

}



.testimonials__card {

  /* colours and borders: 10-testimonials.css */

}



/* ---------- Client app section layout ---------- */



.clients__container {

  align-items: center;

  row-gap: 2rem;

}



.clients__data {

  min-width: 0;

}



.clients__media {

  min-width: 0;

}



/* ---------- Contact section layout ---------- */



.contact__field {

  display: grid;

  gap: 0.35rem;

}



.contact__field--full {

  grid-column: 1 / -1;

}



.contact__field input,

.contact__field select,

.contact__field textarea {

  width: 100%;

  min-height: 2.5rem;

}



/* ---------- Footer layout ---------- */

/* Footer structure styled in 12-footer.css; no extra layout rules here */



/* ---------- Responsive — max-width 359px ---------- */



@media (max-width: 359px) {

  .services__content,

  .about__stats {

    grid-template-columns: 1fr;

  }

}



/* ---------- Responsive — max-width 767px ---------- */



@media (max-width: 767px) {

  :root {

    --header-offset: 9.5rem;

  }

}



/* ---------- Responsive — max-width 1199px (clients preview crop) ---------- */



@media (max-width: 1199px) {

  .clients__media {

    width: 100%;

    min-width: 0;

  }



  .clients__media .section-photo {

    width: 100%;

    max-width: none;

    aspect-ratio: 3 / 2;

    object-fit: cover;

    object-position: center top;

  }

}



/* ---------- Responsive — 400px–767px ---------- */



@media (min-width: 400px) and (max-width: 767px) {

  .process__content {

    grid-template-columns: minmax(0, 325px);

  }

}



/* ---------- Responsive — 576px up ---------- */



@media (min-width: 576px) {

  .home__container {

    grid-template-columns: minmax(0, 1fr);

    justify-content: stretch;

  }



  .work__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .testimonials__list {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



/* ---------- Responsive — 768px up ---------- */



@media (min-width: 768px) {

  .process__content {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: 34rem;

    margin-inline: auto;

  }



  .process__card {

    width: auto;

  }



  .process__card--move,

  .process__card--move .process__circle {

    margin-left: 0;

  }



  .process__card--move .process__description {

    text-align: left;

  }



  .process__border {

    display: none;

  }



  .services__content {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .nav {

    grid-template-columns: auto 1fr auto;

    grid-template-areas: 'logo menu actions';

  }



  .nav__toggle {

    display: none;

  }



  .nav__menu {

    justify-self: center;

  }



  .nav__actions {

    justify-self: end;

  }

}



/* ---------- Responsive — 900px up ---------- */



@media (min-width: 900px) {

  .home__container {

    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);

    align-items: center;

    column-gap: 2rem;

  }



  .home__media {

    justify-self: stretch;

  }



  .about__container {

    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);

    align-items: center;

    column-gap: 2rem;

  }



  .about__media {

    order: -1;

    justify-self: stretch;

  }



  .about__data .section__title,

  .about__description {

    text-align: left;

  }



  .about__stats {

    max-width: none;

    margin-inline: 0;

  }

}



/* ---------- Responsive — 1024px up ---------- */



@media (min-width: 1024px) {

  :root {

    --section-padding-y: 7.5rem;

    --curve-radius: 104px;

  }



  .home__container {

    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);

    align-items: center;

    column-gap: 2.5rem;

  }



  .home__media {

    width: 100%;

    justify-self: end;

  }



  .home__media .section-photo {

    max-width: none;

    width: 100%;

    aspect-ratio: 3 / 2;

    object-fit: cover;

  }



  .services__container {

    grid-template-columns: minmax(0, 360px) 1fr;

    align-items: center;

  }



  .services__data .section__title,

  .services__description {

    text-align: left;

  }



  .services__note {

    text-align: left;

  }



  .clients__container {

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: start;

    column-gap: 2.5rem;

  }



  .clients__media {

    order: -1;

    min-width: 0;

  }



  .clients__data .section__title,

  .clients__description {

    text-align: left;

  }



  .about__container {

    grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);

    column-gap: 2.5rem;

  }



  .about__stats {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

  }



  .process__content {

    grid-template-columns: repeat(2, minmax(220px, 1fr));

    column-gap: 2.5rem;

    row-gap: 3rem;

    max-width: 40rem;

    margin-inline: auto;

    padding-top: 2rem;

  }



  .process__card {

    width: auto;

  }



  .process__card--move {

    display: block;

    margin-top: 0;

  }



  .process__card--move .process__description {

    order: 0;

    margin-bottom: 0;

  }



  .process__border {

    display: none;

  }



  .work__grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .testimonials__list {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .contact__container {

    grid-template-columns: 1fr 1fr;

    align-items: stretch;

  }



  .contact__data .section__title {

    text-align: left;

  }

}



/* ---------- Responsive — 1024px–1199px ---------- */



@media (min-width: 1024px) and (max-width: 1199px) {

  .clients__container {

    grid-template-columns: 1fr;

  }



  .clients__data .section__title,

  .clients__description {

    text-align: center;

  }

}



/* ---------- Responsive — 1152px up ---------- */



@media (min-width: 1152px) {

  :root {

    --container-padding: auto;

  }



  .container {

    width: min(var(--container-max), 100% - 3rem);

  }

}



/* ---------- Responsive — 1248px up ---------- */



@media (min-width: 1248px) {

  .home__container {

    column-gap: 4.5rem;

  }



  .services__container {

    column-gap: 4rem;

  }



  .about__container {

    column-gap: 5rem;

  }



  .clients__container {

    column-gap: 5rem;

  }



  .process__content {

    grid-template-columns: repeat(4, max-content);

    column-gap: 3rem;

    row-gap: 0;

    max-width: none;

  }



  .process__card {

    width: 220px;

  }



  .process__card--move {

    display: flex;

    flex-direction: column;

    margin-top: 5rem;

  }



  .process__card--move .process__circle {

    margin-left: 0;

  }



  .process__card--move .process__description {

    order: -1;

    text-align: left;

    margin-bottom: 1.5rem;

  }



  .process__circle {

    width: 200px;

    height: 200px;

  }

}