@charset "UTF-8";
/* =====================================================================
   MyCottageWatch — stylesheet

   Replaces Bootstrap 3.3 + jQuery + Font Awesome (about 190 KB of CSS
   and JS, three external hosts, one of which no longer exists) with one
   stylesheet and no dependencies at all.

   The palette, typography and layout are taken directly from the 2017
   site's custome.css so the design is unchanged:

     #5b3765  primary purple      (header, footer, page title band)
     #54345d  dark purple         (panel headings, button gradient end)
     #66466f  button gradient start
     #efd6eb  pale lilac          (nav text on purple, panel heading text)
     #e7e7e7  light grey          (inner header, banner band, form fields)
     #333333  body text

   Lato is self-hosted rather than pulled from Google Fonts: it removes
   an external request, works when the visitor's network blocks Google,
   and keeps the Content-Security-Policy locked to this origin.
   ================================================================== */

/* ---------- Fonts ------------------------------------------------ */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ----------------------------------------------- */
:root {
    --purple:        #5b3765;
    --purple-dark:   #54345d;
    --purple-light:  #66466f;
    --lilac:         #efd6eb;
    --grey:          #e7e7e7;
    --grey-line:     #999999;
    --ink:           #333333;
    --ink-strong:    #000000;
    --white:         #ffffff;

    --ok:            #1d7a3e;
    --warn:          #8a5a00;
    --error:         #a3242b;
    --error-bg:      #fdf0f0;
    --ok-bg:         #eef8f1;

    --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --container: 1170px;
    --gutter: 15px;
    --radius: 0;
    --radius-pill: 30px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
    --shadow-md: 0 4px 16px rgba(0,0,0,.12);

    --focus: 3px solid #1a5fb4;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font);
    letter-spacing: 1px;
    margin: 0 0 .5em;
    line-height: 1.25;
}

a { color: var(--purple); }
a:hover, a:focus { color: var(--purple-dark); }

/* Visible keyboard focus everywhere. The old site set outline:none on
   its buttons, which left keyboard users with no indication at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: var(--focus);
    outline-offset: 2px;
}

/* ---------- Layout ----------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding: 50px 0; }
.section--tight { padding: 30px 0; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--purple);
    color: var(--white);
    padding: 12px 20px;
    z-index: 100;
}
.skip-link:focus { left: 0; color: var(--white); }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.hp {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.span-color { color: var(--purple); font-weight: 700; }
.size18 { font-size: 18px; }
.lead { font-size: 16px; }
.text-center { text-align: center; }

/* =====================================================================
   HEADER
   Two variants, exactly as the 2017 site had them: purple on the home
   page, light grey on inner pages.
   ================================================================== */
.site-header { padding: 5px 0; }
.site-header--home { background: var(--purple); }
.site-header--inner { background: var(--grey); }

.header-grid {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-brand { flex: 0 0 auto; }
.header-brand img { width: 193px; max-width: 100%; }

.header-right {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* --- social circles --- */
.social { display: flex; gap: 10px; list-style: none; margin: 5px 0; padding: 0; }
.social a {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transition: transform .15s ease;
}
.social a:hover { transform: translateY(-2px); }
.social svg { width: 13px; height: 13px; fill: currentColor; }

.site-header--home  .social a { background: var(--grey);   color: var(--purple); }
.site-header--inner .social a { background: var(--purple); color: var(--lilac); }

/* --- phone block --- */
.header-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.header-phone .icon-circle {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    flex: 0 0 35px;
}
.header-phone .icon-circle svg { width: 18px; height: 18px; fill: currentColor; }
.site-header--home  .header-phone { color: var(--white); }
.site-header--home  .header-phone .icon-circle { background: var(--grey); color: var(--purple); }
.site-header--inner .header-phone { color: var(--purple); }
.site-header--inner .header-phone .icon-circle { border: 2px solid var(--purple); color: var(--purple); }
.header-phone a { color: inherit; text-decoration: none; }
.header-phone a:hover { text-decoration: underline; }

/* --- navigation --- */
.nav-toggle { display: none; }

.mainnav ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 5px 0;
}
.mainnav li + li { border-left: 1px solid; }
.mainnav a {
    display: block;
    padding: 0 17px;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.8;
}
.site-header--home .mainnav li + li { border-left-color: var(--lilac); }
.site-header--home .mainnav a { color: var(--lilac); }
.site-header--home .mainnav a:hover,
.site-header--home .mainnav .is-active > a { color: var(--white); }

.site-header--inner .mainnav li + li { border-left-color: var(--purple); }
.site-header--inner .mainnav a { color: var(--ink-strong); font-weight: 600; }
.site-header--inner .mainnav a:hover,
.site-header--inner .mainnav .is-active > a { color: var(--purple); }

/* --- dropdown for Services --- */
.has-sub { position: relative; }
.has-sub > button {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 17px;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.8;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.site-header--home .has-sub > button { color: var(--lilac); }
.site-header--inner .has-sub > button { color: var(--ink-strong); font-weight: 600; }
.has-sub > button svg { width: 9px; height: 9px; fill: currentColor; transition: transform .2s; }
.has-sub[data-open="true"] > button svg { transform: rotate(180deg); }

.mainnav .submenu {
    /* `.mainnav ul { display:flex }` is specificity 0,1,1 and was beating
       a bare `.submenu { display:none }` at 0,1,0 — which left every
       dropdown permanently open. Scoping it to .mainnav wins at 0,2,0. */
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 260px;
    background: var(--white);
    border: 2px solid var(--purple-dark);
    box-shadow: var(--shadow-md);
    z-index: 60;
    padding: 6px 0;
}
.mainnav .has-sub[data-open="true"] .submenu { display: block; }
.mainnav .submenu { flex-direction: column; }
.mainnav .submenu li { border: 0; }
.mainnav .submenu a {
    padding: 8px 16px;
    text-transform: none;
    font-size: 13px;
    color: var(--ink) !important;
    white-space: nowrap;
}
.mainnav .submenu a:hover { background: var(--lilac); color: var(--purple-dark) !important; }

/* =====================================================================
   HOME BANNER
   ================================================================== */
.home-banner {
    background: var(--grey);
    padding: 20px 0 40px;
    text-align: center;
}
.home-banner h1 {
    color: var(--purple);
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 20px;
}
.home-banner p { font-size: 16px; margin: 20px auto; max-width: 60ch; }
.home-banner figure { margin: 20px auto 0; max-width: 640px; }
.home-banner img { border: 2px solid var(--purple); width: 100%; }

/* =====================================================================
   BUTTONS
   ================================================================== */
.btn {
    display: inline-block;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    color: var(--white);
    background: linear-gradient(var(--purple-light), var(--purple-dark));
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.12); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
    background: transparent;
    color: var(--purple);
    border: 2px solid var(--purple);
}
.btn--ghost:hover { background: var(--purple); color: var(--white); filter: none; }
.btn--block { display: block; width: 100%; }

/* =====================================================================
   PAGE TITLE BAND
   ================================================================== */
.page-band {
    background: var(--purple);
    padding: 40px 0;
    text-align: center;
    color: var(--white);
}
.page-band h1 {
    color: var(--white);
    margin: 0 0 10px;
    font-size: 24px;
    text-transform: uppercase;
}
.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.breadcrumb a { color: var(--white); }
.breadcrumb svg { width: 10px; height: 10px; fill: currentColor; opacity: .8; }
.breadcrumb [aria-current] { opacity: .85; }

/* =====================================================================
   HOME CONTENT
   ================================================================== */
.home-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
.intro-grid h2 {
    margin-top: 0;
    color: var(--purple-dark);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 22px;
}
.intro-grid ul { font-weight: 700; list-style: none; padding: 0; margin: 0; }
.intro-grid li { margin: 0 0 1em; }
.intro-grid img { border: 2px solid var(--purple); }

.prose h3 { color: var(--ink-strong); font-weight: 700; font-size: 18px; margin-top: 1.5em; }
.prose p { line-height: 24px; margin: 20px 0; font-size: 13px; }

/* --- side panels --- */
.panel { border: 2px solid var(--purple-dark); margin-bottom: 30px; }
.panel > h2 {
    background: var(--purple-dark);
    color: var(--lilac);
    padding: 10px 20px;
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.panel__body { padding: 20px; }

/* --- testimonial rotator --- */
.quotes { position: relative; }
.quote {
    display: none;
    padding: 20px 10px;
    text-align: center;
    font-weight: 700;
    line-height: 24px;
}
.quote.is-current { display: block; }
.quote cite { display: block; margin-top: 12px; font-style: normal; color: var(--purple); font-size: 18px; }
.quote-dots { display: flex; justify-content: center; gap: 8px; padding: 0 0 16px; margin: 0; list-style: none; }
.quote-dots button {
    width: 11px; height: 11px; padding: 0;
    border: 1px solid var(--purple-dark);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.quote-dots button[aria-selected="true"] { background: var(--purple-dark); }

/* =====================================================================
   FORMS
   ================================================================== */
.form { padding: 20px 0; }
.field { margin: 10px 0; }
.field > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
    color: var(--ink);
}
.field .req { color: var(--error); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-strong);
    background: var(--grey);
    border: 1px solid var(--grey-line);
    border-radius: var(--radius);
    box-shadow: none;
}
.form textarea { min-height: 140px; resize: vertical; }

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
    border-color: var(--error);
    background: var(--error-bg);
}
.field-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--error);
}

.form-note { font-size: 12px; line-height: 1.5; margin-top: 10px; }

.alert {
    padding: 14px 18px;
    margin: 0 0 20px;
    border-left: 5px solid;
    font-size: 13px;
}
.alert--error { background: var(--error-bg); border-color: var(--error); color: #6d181d; }
.alert--ok    { background: var(--ok-bg);    border-color: var(--ok);    color: #14532d; }
.alert ul { margin: 8px 0 0; padding-left: 1.2em; }

.bordered-box { border: 2px solid var(--purple); padding: 0 20px 20px; }

/* =====================================================================
   SERVICES
   ================================================================== */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.service-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--purple-dark);
    background: var(--white);
    transition: box-shadow .18s ease, transform .18s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--purple-dark);
    color: var(--lilac);
    padding: 12px 18px;
}
.service-card__head svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 22px; }
.service-card__head h3 { margin: 0; font-size: 16px; text-transform: uppercase; color: var(--lilac); }
.service-card__body { padding: 18px; flex: 1 1 auto; font-size: 13px; line-height: 22px; }
.service-card__foot {
    padding: 0 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.price-tag { font-weight: 700; color: var(--purple); font-size: 14px; }

.service-body h2 { color: var(--purple); font-weight: 700; font-size: 20px; margin-top: 1.8em; }
.service-body ul { padding-left: 1.3em; }
.service-body li { margin: .45em 0; }

.callout {
    background: var(--grey);
    border-left: 5px solid var(--purple);
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 13px;
}
.callout strong { color: var(--purple-dark); }

.service-hero {
    background: var(--grey);
    padding: 30px 0;
}
.service-hero p { font-size: 17px; margin: 0; max-width: 70ch; }

/* --- pricing table --- */
.rate-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
.rate-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; color: var(--purple); }
.rate-table th, .rate-table td { padding: 10px 12px; border-bottom: 1px solid var(--grey); text-align: left; }
.rate-table thead th { background: var(--purple-dark); color: var(--lilac); border-bottom: 0; }
.rate-table tbody tr:nth-child(even) { background: #faf8fb; }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; }
.table-scroll { overflow-x: auto; }


/* =====================================================================
   UTILITIES
   These exist because the Content-Security-Policy forbids inline
   style="" attributes. That is deliberate: blocking inline styles is
   part of what makes an injected <style> or style attribute useless to
   an attacker, so the templates carry classes instead.
   ================================================================== */
.u-mt-sm  { margin-top: 16px; }
.u-mt     { margin-top: 24px; }
.u-mt-lg  { margin-top: 40px; }
.u-mb     { margin-bottom: 24px; }

.u-narrow    { max-width: 680px; margin-inline: auto; }
.u-narrow-sm { max-width: 620px; margin-inline: auto; }
.u-readable  { max-width: 820px; }

.price-lg { font-size: 18px; }

.link-list { list-style: disc; padding-left: 1.2em; margin: 0; }
.link-list li { margin: .5em 0; }

.media { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.media__body { flex: 1 1 300px; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   FOOTER
   ================================================================== */
.site-footer {
    background: var(--purple);
    padding: 30px 0;
    text-align: center;
    color: var(--white);
}
.site-footer a { color: var(--white); }
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.footer-nav li { padding: 0 20px; }
.footer-nav li + li { border-left: 1px solid var(--white); }
.footer-legal { font-size: 12px; opacity: .9; line-height: 1.7; }
.footer-legal p { margin: 4px 0; }

/* =====================================================================
   RESPONSIVE
   Same breakpoints the 2017 site used: 1180 and 767.
   ================================================================== */
@media (max-width: 1180px) {
    .mainnav a, .has-sub > button { padding: 0 8px; font-size: 12px; }
    .header-phone { font-size: 11px; }
}

@media (max-width: 900px) {
    .home-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .header-grid { flex-wrap: wrap; gap: 10px; }
    .header-brand img { width: 150px; }
    .header-right { padding: 0; }
    .header-top { justify-content: space-between; }
    .m-hide { display: none; }

    /* Hamburger — same look as the Bootstrap toggle it replaces, but
       driven by 12 lines of vanilla JS instead of jQuery. */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 44px;
        height: 38px;
        padding: 0 10px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: auto;
    }
    .nav-toggle span { display: block; height: 2px; border-radius: 1px; transition: transform .2s, opacity .2s; }
    .site-header--home  .nav-toggle { background: var(--lilac);  border: 1px solid var(--lilac); }
    .site-header--home  .nav-toggle span { background: var(--purple); }
    .site-header--inner .nav-toggle { background: var(--purple); border: 1px solid var(--purple); }
    .site-header--inner .nav-toggle span { background: var(--lilac); }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .mainnav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 50;
        margin-top: 8px;
        box-shadow: var(--shadow-md);
    }
    .mainnav.is-open { display: block; }
    .site-header { position: relative; }
    .site-header--home  .mainnav { background: var(--purple); border-top: 3px solid var(--lilac); }
    .site-header--inner .mainnav { background: var(--lilac);  border-top: 3px solid var(--purple); }

    .mainnav ul { display: block; padding: 0; }
    .mainnav li + li { border-left: 0; }
    .mainnav li { border-bottom: 1px solid var(--lilac); }
    .site-header--inner .mainnav li { border-bottom-color: var(--purple); }
    .mainnav a, .has-sub > button {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        text-align: left;
    }

    .mainnav .submenu {
        position: static;
        border: 0;
        box-shadow: none;
        background: rgba(255,255,255,.14);
        min-width: 0;
    }
    .site-header--inner .mainnav .submenu { background: rgba(0,0,0,.06); }
    .mainnav .mainnav .submenu a { padding-left: 36px; }
    .site-header--home .mainnav .submenu a { color: var(--lilac) !important; }

    .intro-grid { grid-template-columns: 1fr; }
    .home-banner h1 { font-size: 26px; }
    .page-band { padding: 28px 0; }

    .footer-nav li { padding: 6px 8px; font-size: 14px; }
    .footer-nav li + li { border-left: 1px solid rgba(255,255,255,.5); }
}

/* ---------- Motion and print ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .site-footer, .nav-toggle, .page-band, .btn { display: none !important; }
    body { font-size: 11pt; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}