* {
    box-sizing: border-box;
}

:root {
    --nav-height: 150px;
    font-family: "PT Sans", sans-serif;
    font-size: 1.25rem;

    /*Brand Colours*/
    --colour-primary: #f2d6d7;
    --colour-secondary: #fafab1;

    /*Neutrals*/
    --colour-bodytext: #1b111133;
    --colour-background: #f8f8f8;

    /*Emphasis*/
    --colour-emphasis: #ff6347;
    --colour-cta: #ff6347;

    --cream: #faf7f2;
    --warm-white: #ffffff;
    --rose: #c8796a;
    --rose-light: #f5ede9;
    --rose-dark: #9e5548;
    --ink: #2a2118;
    --ink-muted: #6b5d52;
    --ink-faint: #b8a99e;
    --border: #e8ddd6;
    --card-bg: #ffffff;
    --gap: 1.5rem;
    --card-radius: 16px;
    --transition: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    margin: 0 3vw;
    padding: var(--nav-height) 0 0 0;
    /*scroll-margin-top: var(--nav-height);*/
    background-color: var(--colour-primary);
}

[id] {
    scroll-margin-top: var(--nav-height);
}

h2 {
     font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      color: var(--ink);
      line-height: 1.2;
}


.topnav__links {
    display: flex;
    align-items: end;
    margin-bottom: 15px;
    align-self: end;
}

.topnav__item {
    display: inline-flex;
    margin-right: 20px;
}

.topnav__link {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: 0.7s ease;
}

.topnav__link:hover {
    color: var(--colour-emphasis);
}

nav {
    background-color: var(--colour-background);
    padding: 10px;
    margin: 0px 0px 20px 0px;
}

article {
    background-color: var(--colour-background);
    /* padding: 10px;*/
    margin: 0px 0px 10px 0px;
}

h3.subtitle {
    font-style: italic;
    color: #555;
    margin-top: -15px;
}

.titlegraphics {
    display: inline;
    vertical-align: middle;
    margin-left: 25px;
    margin-right: auto;
}

.titlegraphics h1 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      color: var(--ink);
      line-height: 1.1;
      margin-top: 1vw;
}

.flexheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--colour-primary);
    /*border-radius: 1em;*/
    max-width: 1200px;
    position: sticky;
    top: 0;
}

.banner {
    width: 100%;
    height: auto;
}

.flexmain {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--colour-secondary);
    border-radius: 1em;
    max-width: 1200px;
}

.flexmain p {
    min-width: 100px;
    max-width: 600px;
}

.story-script-regular {
    font-family: "Story Script", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 5px;
}

.pt-sans-regular {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.pt-sans-bold {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.pt-sans-regular-italic {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.pt-sans-bold-italic {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-style: italic;
}

article img {
    border-radius: 1em;
    padding: 5px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 30px;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 1em;
    transition: transform 0.3s ease;
}



.prices table {
    margin: 0.5rem 0 1rem 0;
    border-collapse: collapse;
    text-align: center;
    width: clamp(300px, 80vw, 800px);
}

.prices th {
    background-color: var(--colour-secondary);
    padding: 10px;
    width: 33vw;
}

.prices td,
th {
    border: 2px solid #ddd;
    padding: 10px;
}

.prices tr {
    background-color: var(--warm-white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.sticky {
    position: fixed;
    top: 0;
    z-index:100;
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-right: 3vw;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.4s;
}

.quote-box {
    margin: 0px;
    max-width: 400px;
    border-radius: 0.5em;
    padding: 1rem;
}

p.quote-box {
    color: #111;
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

p.quote_green {
    color: white;
    background-color: green;
}

.quote_pink {
    background-color: pink;
}

.quote_yellow {
    background-color: yellow;
}

.quote_blue {
    background-color: lightblue;
}


.testimonial {
    padding: 10px;
    margin: 20px;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    align-items: center;
    justify-items: center;
}

@media (max-width: 768px) {

    .topnav__links {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 10px);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -10px);
    }

    .topnav__links {
        position: fixed;
        left: -100%;
        top: 160px;
        width: 100%;
        background-color: var(--colour-secondary);
        border-radius: 1em;
        transition: 0.3s;
        flex-direction: column;
        text-align: center;
        align-items: center;
        display: flex;
    }

    .topnav__item {
        margin: 15px 0;
    }

    .topnav__links.active {
        left: 0;
    }

}
/* ─── Section wrapper ───────────────────────────────────────── */
    .reviews-section {
      width: 100%;
      max-width: 1000px;
    }

     .reviews-header {
      margin-bottom: 2.5rem;
    }


    .reviews-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--rose);
      margin-bottom: 0.5rem;
    }

    .reviews-heading {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      color: var(--ink);
      line-height: 1.2;
    }
 
    .reviews-heading em {
      font-style: italic;
      color: var(--rose);
    }


/* ─── Carousel structure ────────────────────────────────────── */

/*
      The viewport is the "window" the user looks through.
      overflow: hidden is the key property — it clips everything
      outside its bounds, creating the illusion of cards sliding in
      and out of view.
    */
.reviews-viewport {
    overflow: hidden;
    width: 100%;
}

/*
      The track holds all cards in a single horizontal row.
      Its total width is (number of cards × card width) + gaps.
      We slide it left/right using transform: translateX().
      The transition property on this element is what makes the
      slide animate smoothly rather than jumping.
    */

.reviews-track {
    display: flex;
    gap: var(--gap);
    transition: var(--transition);
    /* translateX is set by JS */
}

/*
      flex: 0 0 <width> means:
        flex-grow:   0  → don't stretch to fill extra space
        flex-shrink: 0  → don't shrink if space is tight
        flex-basis:  <width> → always be exactly this wide
      This rigidity is what makes the carousel geometry predictable.
 
      The calc() accounts for the gaps between cards so that exactly
      N cards fit inside the viewport width at any given breakpoint.
    */
    .review-card {
      flex: 0 0 calc(33.333% - 1rem); /* 3 cards on desktop */
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--card-radius);
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: border-color 0.2s;
    }

    .review-card:hover {
      border-color: var(--rose);
    }
 
     /* Review body text */
    .review-text {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 0.875rem;
      line-height: 1.25;
      margin: 0;
      color: var(--ink);
      flex: 1; /* pushes author to bottom of card */
 
      /* Clamp long reviews to 5 lines with a fade */
      display: -webkit-box;
      -webkit-line-clamp: 9;
      line-clamp: 9;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
 
    /* Author area */
    .review-author {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }
 
    .author-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 500;
      flex-shrink: 0;
      /* colour set inline by JS */
    }
 
    .author-meta { display: flex; flex-direction: column; gap: 1px; }
 
    .author-name {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--ink);
    }
 
    .author-date {
      font-size: 0.75rem;
      color: var(--ink-faint);
    }
 
    /* Stars */
    .review-stars {
      color: var(--rose);
      font-size: 1rem;
      letter-spacing: 0.1em;
      line-height: 1;
    }

        /* ─── Controls ──────────────────────────────────────────────── */
    .reviews-controls {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 1.75rem;
    }
 
    .ctrl-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--warm-white);
      color: var(--ink);
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      flex-shrink: 0;
    }
 
    .ctrl-btn:hover:not(:disabled) {
      background: var(--rose-light);
      border-color: var(--rose);
    }
 
    .ctrl-btn:active:not(:disabled) {
      transform: scale(0.94);
    }
 
    .ctrl-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
 
    /* Dot indicators */
    .ctrl-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
 
    .ctrl-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink-faint);
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      border: none;
      padding: 0;
    }
 
    .ctrl-dot.active {
      background: var(--rose);
      transform: scale(1.4);
    }
 
    /* Review count label */
    .ctrl-label {
      margin-left: auto;
      font-size: 0.8rem;
      color: var(--ink-faint);
    }
 
    /* ─── Responsive breakpoints ────────────────────────────────── */
 
    /*
      On medium screens (tablets), show 2 cards.
      The JS reads offsetWidth at navigation time, so it always
      uses the current rendered width — no stale values.
    */
    @media (max-width: 720px) {
      .review-card {
        flex: 0 0 calc(50% - 0.75rem); /* 2 cards */
      }
    }
 
    /*
      On small screens (phones), show 1 card full width.
    */
    @media (max-width: 480px) {
      .review-card {
        flex: 0 0 100%; /* 1 card */
      }
      .reviews-heading { font-size: 1.6rem; }
    }

    .mailBtn {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}