/* ==========================================================
   CONDUCTING — SHARED SITE STYLES

   This file contains styles that are likely to be used on
   every page:

   - Colour variables
   - Basic page setup
   - Shared width container
   - Header and navigation
   - Buttons
   - Footer
   - General mobile navigation

   Search this file for one of the large section headings below.
   ========================================================== */


/* ==========================================================
   01 — COLOURS AND SHARED VALUES
   ========================================================== */

:root {

    --background: #161819;

    --surface: #1d2021;

    --surface-raised: #222526;

    --text: #f2f2ed;

    --muted: #b8bbb6;

    --quiet: #858984;

    --line: rgba(255, 255, 255, 0.10);

    --green: #9bbd64;

    --green-light: #adca7e;

    --orange: #dc7a32;

    --max-width: 1260px;

    --header-height: 88px;

}


/* ==========================================================
   02 — BASIC PAGE SETUP
   ========================================================== */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background-color: var(--background);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
a {

    -webkit-tap-highlight-color: transparent;

}


/* ==========================================================
   03 — SHARED PAGE WIDTH
   ========================================================== */

.wrap {

    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-inline: auto;

}


/* ==========================================================
   04 — SITE HEADER
   ========================================================== */

.site-header {

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

    position: sticky;

    top: 0;

    z-index: 20;

    border-bottom: 1px solid var(--line);

    background-color: rgba(22, 24, 25, 0.88);

    backdrop-filter: blur(16px);

}


.header-inner {

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}


/* ==========================================================
   05 — LOGO
   ========================================================== */

.brand {

    display: inline-flex;

    align-items: center;

}


.brand-logo {

    display: block;

    width: auto;

    height: 44px;

    object-fit: contain;

}


/* ==========================================================
   06 — DESKTOP NAVIGATION
   ========================================================== */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 30px;

    color: #d4d6d1;

    font-size: 0.95rem;

}


.main-navigation a {

    position: relative;

    transition: color 220ms ease;

}


.main-navigation a::after {

    content: "";

    position: absolute;

    left: 50%;

    right: 50%;

    bottom: -8px;

    height: 1px;

    background-color: var(--green);

    transition:
        left 220ms ease,
        right 220ms ease;

}


.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation a[aria-current="page"] {

    color: var(--text);

}


.main-navigation a:hover::after,
.main-navigation a:focus-visible::after,
.main-navigation a[aria-current="page"]::after {

    left: 0;

    right: 0;

}


/* ==========================================================
   07 — MOBILE MENU BUTTON
   ========================================================== */

.menu-button {

    display: none;

    padding: 10px 16px;

    border: 1px solid var(--line);

    border-radius: 999px;

    background-color: transparent;

    color: var(--text);

    font: inherit;

    cursor: pointer;

}


/* ==========================================================
   08 — SHARED BUTTONS
   ========================================================== */

.button {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 22px;

    border-radius: 999px;

    font-weight: 650;

    transition:
        transform 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease;

}


.button-primary {

    background-color: var(--green);

    color: #151714;

}


.button-primary:hover,
.button-primary:focus-visible {

    background-color: var(--green-light);

    transform: translateY(-2px);

}


/* ==========================================================
   09 — SITE FOOTER
   ========================================================== */

.site-footer {

    padding: 30px 0 42px;

    border-top: 1px solid var(--line);

    color: var(--quiet);

    font-size: 0.88rem;

}


.footer-inner {

    display: flex;

    justify-content: space-between;

    gap: 28px;

}


.footer-note {

    color: #a6aaa4;

}


/* ==========================================================
   10 — ACCESSIBILITY: REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* ==========================================================
   11 — MOBILE HEADER AND NAVIGATION
   ========================================================== */

@media (max-width: 720px) {

    :root {

        --header-height: 76px;

    }


    .wrap {

        width: min(
            calc(100% - 32px),
            var(--max-width)
        );

    }


    .brand-logo {

        height: 38px;

    }


    .menu-button {

        display: inline-flex;

    }


    .main-navigation {

        display: none;

        position: absolute;

        top: calc(100% + 1px);

        left: 0;

        right: 0;

        padding: 24px 16px 30px;

        border-bottom: 1px solid var(--line);

        background-color: #191b1c;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

    }


    .main-navigation.open {

        display: flex;

    }


    .footer-inner {

        flex-direction: column;

        gap: 10px;

    }
/* =========================================================
   HIDDEN MIAH LINK
   ========================================================= */

.header-paw {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;

    color: inherit;
    text-decoration: none;

    opacity: 0.24;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}


.header-paw svg {
    width: 1.15rem;
    height: 1.15rem;

    fill: currentColor;
}


.header-paw:hover,
.header-paw:focus-visible {
    color: #2f6a49;
    opacity: 1;
    transform: rotate(-6deg) translateY(-2px);
}


@media (max-width: 800px) {

    .header-paw {
        margin-left: auto;
    }
.header-paw {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;
    margin-left: 1rem;

    color: #183d2b;
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;

    opacity: 0.45;
    cursor: pointer;
    z-index: 20;
}

.header-paw:hover {
    opacity: 1;
    transform: rotate(-8deg);
}

@media (max-width: 800px) {
    .header-paw {
        margin-left: auto;
    }
.header-paw {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  margin-left: 0.4rem;

  color: #183d2b;
  text-decoration: none;

  opacity: 0.35;

  transition:
    opacity 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.header-paw svg {
  display: block;

  width: 19px;
  height: 19px;

  fill: currentColor;
  stroke: none;
}

.header-paw:hover,
.header-paw:focus-visible {
  color: #2f6a49;
  opacity: 1;
  transform: rotate(-7deg) translateY(-2px);
}
/* =========================================================
   CONTACT FORM VISIBILITY FIX
   ========================================================= */

.contact-form label {
    display: block;
    margin-bottom: 0.55rem;

    color: #17251e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 1;
}


.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 1rem;

    border: 1px solid rgba(23, 37, 30, 0.28);
    border-radius: 0.75rem;

    background: #ffffff;
    color: #17251e;

    font: inherit;
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(23, 37, 30, 0.48);
}


.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #2f6a49;
    outline: 3px solid rgba(47, 106, 73, 0.14);
    outline-offset: 0;
}

.contact-card .contact-form .form-field label {
  display: block;
  margin-bottom: 0.5rem;

  color: #17251e !important;
  opacity: 1 !important;

  font-size: 0.8rem;
  font-weight: 700;
}

.contact-card .contact-form .form-field label span {
  color: #68736d !important;
  font-weight: 400;
}

.contact-card .contact-form input,
.contact-card .contact-form textarea {
  background: #ffffff !important;
  color: #17251e !important;
  -webkit-text-fill-color: #17251e !important;
}
body{

    background:#fafaf7;

    color:#25322b;

    line-height:1.8;

}

.story-header{

    padding:25px 40px;

}

.back-link{

    text-decoration:none;

    color:#2d5c42;

    font-weight:600;

}
/*miah bit*/

.hero{

    max-width:900px;

    margin:80px auto 60px;

    text-align:center;

    padding:0 25px;

}

.hero h1{

    font-size:4.5rem;

    line-height:.95;

    margin-bottom:20px;

}

.hero p{

    font-size:1.15rem;

    color:#666;

    max-width:600px;

    margin:0 auto 50px;

}

.hero img{

    display:block;

    width:100%;

    max-width:650px;

    max-height:420px;

    object-fit:cover;

    object-position:center;

    margin:50px auto;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);


}

.eyebrow{

    text-transform:uppercase;

    letter-spacing:3px;

    opacity:.85;

}

.quote{

    max-width:900px;

    margin:120px auto;

    text-align:center;

    font-size:2rem;

}

.chapter{

    max-width:820px;

    margin:120px auto;

    padding:0 30px;

}

.chapter h2{

    font-size:2.4rem;

    margin-bottom:40px;

}

.chapter p{

    font-size:1.18rem;

}

.image-break{

    max-width:1100px;

    margin:100px auto;

}

.image-break img{

    width:100%;

    border-radius:18px;

}

.highlight{

    font-size:2rem;

    text-align:center;

    margin:70px 0;

    color:#2d6a4f;

    font-weight:700;

}

.continue{

    text-align:center;

    padding:140px 30px;

    opacity:.75;

}

.quote{

    max-width:700px;

    margin:90px auto;

    padding:0 30px;

    text-align:center;

    font-size:2rem;

    font-style:italic;

}
.miah-story-link{
  padding:80px 0 100px;
}

.miah-story-card{
  max-width:680px;
  margin:0 auto;
  padding:55px 50px;
  text-align:center;
  background:#f7f6f2;
  border-radius:18px;
}

.miah-story-paw{
  font-size:1.6rem;
  margin-bottom:18px;
}

.miah-story-card h2{
  margin:0 0 24px;
  font-family:"Cormorant Garamond", serif;
  font-size:2.8rem;
  font-weight:500;
}

.miah-story-card p{
  max-width:560px;
  margin:0 auto 18px;
  line-height:1.8;
}

.miah-story-card .button{
  margin-top:18px;
}                                     
}