/* ─────────────────────────────────────────────────────────────────────
   Business By Design / Easy Bake — shared stylesheet
   Colours and type lifted from the Canva designs. Change a value in the
   :root block below and it changes on every page at once.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --teal-deep:  #14647A;   /* headings, the dark band            */
  --teal:       #1B8CA6;   /* buttons, links                     */
  --teal-soft:  #8FCBD8;   /* watercolour washes                 */
  --gold:       #C9A55C;   /* the script accent and SAVE badge   */
  --gold-pale:  #DFC89A;
  --cream:      #F7F3EC;
  --wash:       #EAF5F7;   /* page background                    */
  --ink:        #2B4A54;
  --ink-soft:   #6E8A94;
  --line:       #DCE9ED;
  --shadow:     0 2px 6px rgba(20,100,122,.06), 0 14px 34px rgba(20,100,122,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--wash);
  color:var(--ink);
  font-family:"Lato",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.7;
}

/* ── Type ────────────────────────────────────────────────────────── */

h1,h2,h3{margin:0 0 .5em;line-height:1.15;color:var(--teal-deep);font-weight:600}
h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,6vw,3.4rem)}
h2{font-family:"Cinzel",Georgia,serif;font-size:clamp(1.4rem,3.6vw,2.2rem);
   letter-spacing:.02em}
h3{font-family:"Cinzel",Georgia,serif;font-size:1.05rem;letter-spacing:.03em}

.script{
  font-family:"Parisienne",cursive;
  color:var(--gold);
  font-size:clamp(1.6rem,4.5vw,2.6rem);
  line-height:1.3;font-weight:400;
}
.script-teal{font-family:"Parisienne",cursive;color:var(--teal);
             font-size:clamp(1.8rem,5vw,3rem);line-height:1.2}

p{margin:0 0 1.1em}
a{color:var(--teal)}
.lead{font-size:clamp(1rem,2vw,1.15rem);color:var(--ink-soft);max-width:46ch}
.eyebrow{font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.18em;
         text-transform:uppercase;color:var(--gold);margin-bottom:.6em}

.wrap{width:min(1120px,92vw);margin-inline:auto}
.narrow{width:min(680px,92vw);margin-inline:auto}

/* ── Header ──────────────────────────────────────────────────────── */

.site-head{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
           border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
                 gap:16px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:56px;width:auto;display:block}
.brand .fallback{font-family:"Playfair Display",serif;font-size:1.2rem;
                 color:var(--teal-deep);font-weight:600;line-height:1.1}
.brand .fallback span{display:block;font-family:"Cinzel",serif;font-size:.62rem;
                      letter-spacing:.18em;color:var(--gold)}

.site-nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.site-nav a{font-family:"Cinzel",serif;font-size:.82rem;letter-spacing:.1em;
            text-transform:uppercase;color:var(--teal-deep);text-decoration:none;
            padding-bottom:3px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a.active{border-bottom-color:var(--gold)}

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn{display:inline-block;text-decoration:none;cursor:pointer;border:2px solid transparent;
     font-family:"Lato",sans-serif;font-weight:700;font-size:.98rem;
     padding:13px 28px;border-radius:6px;transition:.18s ease;text-align:center}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-outline{background:transparent;color:var(--teal-deep);border-color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-gold{background:transparent;color:var(--teal-deep);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ── Watercolour hero ────────────────────────────────────────────────
   Background images degrade to a soft wash if the file isn't there yet,
   so the page never looks broken while you're still exporting art. */

.hero{
  position:relative;padding:clamp(48px,9vw,96px) 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(234,245,247,.9)),
    var(--hero-img,none) center/cover no-repeat,
    linear-gradient(135deg,#F4FAFB,#DCEFF4 60%,#F7F3EC);
}
.hero-split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:860px){.hero-split{grid-template-columns:1.05fr .95fr}}

.hero-art{width:100%;aspect-ratio:4/3;border-radius:14px;box-shadow:var(--shadow);
          background:var(--art,linear-gradient(140deg,#EAF5F7,#F7F3EC)) center/cover no-repeat}
.logo-badge{width:clamp(110px,18vw,180px);aspect-ratio:1;border-radius:50%;
            background:#fff center/78% no-repeat;box-shadow:var(--shadow);
            display:block;margin-bottom:18px}

/* ── Sections ────────────────────────────────────────────────────── */

.band{padding:clamp(44px,7vw,80px) 0;background:#fff}
.band-wash{padding:clamp(44px,7vw,80px) 0;background:var(--wash)}
.band-deep{padding:clamp(36px,6vw,64px) 0;background:var(--teal-deep);color:#EAF5F7}
.band-deep h2{color:#fff}
.center{text-align:center}

/* ── Feature grid ────────────────────────────────────────────────── */

.features{display:grid;gap:0;grid-template-columns:1fr;margin-top:32px}
@media(min-width:620px){.features{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{padding:22px;border-top:1px solid var(--line)}
@media(min-width:620px){.feature{border-left:1px solid var(--line)}
  .feature:nth-child(2n+1){border-left:0}}
@media(min-width:1000px){.feature:nth-child(2n+1){border-left:1px solid var(--line)}
  .feature:nth-child(4n+1){border-left:0}}
.feature h3{display:flex;align-items:center;gap:9px;margin-bottom:.5em;
            font-size:.95rem;color:var(--teal-deep)}
.feature h3::before{content:"";width:9px;height:9px;border-radius:50%;
                    background:var(--gold);flex:none}
.feature p{font-size:.93rem;color:var(--ink-soft);margin:0}

/* ── Tick list ───────────────────────────────────────────────────── */

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;
       grid-template-columns:1fr}
@media(min-width:700px){.ticks{grid-template-columns:1fr 1fr;gap:10px 32px}}
.ticks li{position:relative;padding-left:26px;color:var(--teal-deep)}
.ticks li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;
                  border-radius:50%;background:var(--teal)}

/* ── Pricing ─────────────────────────────────────────────────────── */

.plans{display:grid;gap:24px;grid-template-columns:1fr;margin-top:36px}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.plan{background:#fff;border:2px solid var(--teal-soft);border-radius:14px;
      padding:30px 26px;position:relative;text-align:center}
.plan.best{border-color:var(--teal-deep)}
.plan h3{font-size:1.15rem;margin-bottom:.2em}
.price{font-family:"Playfair Display",serif;font-size:clamp(3rem,10vw,4.6rem);
       color:var(--teal);line-height:.95;font-weight:700}
.per{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}
.pill{display:inline-block;background:var(--cream);color:var(--teal-deep);
      font-family:"Cinzel",serif;font-size:.76rem;letter-spacing:.1em;
      text-transform:uppercase;padding:8px 18px;border-radius:20px;margin-bottom:18px}
.pill-solid{background:var(--teal-deep);color:#fff}
.plan ul{list-style:none;margin:0;padding:0;text-align:left;display:inline-block}
.plan ul li{position:relative;padding-left:22px;margin-bottom:7px;color:var(--teal-deep)}
.plan ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
                    border-radius:50%;background:var(--teal-soft)}
.badge{position:absolute;top:-16px;right:-10px;width:78px;height:78px;border-radius:50%;
       background:var(--gold);color:#fff;display:flex;flex-direction:column;
       align-items:center;justify-content:center;font-family:"Cinzel",serif;
       font-size:.72rem;letter-spacing:.06em;line-height:1.25;box-shadow:var(--shadow)}
.badge b{font-size:1rem}
.most{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
      background:var(--teal-deep);color:#fff;font-family:"Cinzel",serif;
      font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
      padding:7px 20px;border-radius:16px;white-space:nowrap}

/* ── Closing band + footer ───────────────────────────────────────── */

.closer{background:linear-gradient(120deg,#DCEFF4,#F7F3EC);
        padding:clamp(32px,6vw,56px) 0}
.closer .wrap{display:flex;gap:24px;justify-content:space-between;
              align-items:center;flex-wrap:wrap}
.closer .right{text-align:right;color:var(--teal-deep);
               font-family:"Playfair Display",serif;font-size:clamp(1.1rem,2.6vw,1.6rem)}
@media(max-width:620px){.closer .right{text-align:left}}

.site-foot{background:var(--teal-deep);color:#CFE6EC;padding:22px 0;font-size:.92rem}
.site-foot .wrap{display:flex;gap:18px;justify-content:space-between;
                 align-items:center;flex-wrap:wrap}
.site-foot a{color:#CFE6EC;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.contact-item{display:inline-flex;align-items:center;gap:8px}

/* ── Quality floor ───────────────────────────────────────────────── */

img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}