:root{
    --teal:#069494;
    --teal-tint:#CFE8E6;
    --terracotta:#C1703E;
    --mustard:#D9A441;
    --rose:#D98C82;
    --sage:#8FA678;
    --white:#FFFFFF;
    --sand:#F6F1E7;
    --ink:#2B2620;
    --ink-soft:#5B5548;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --white:#1B211F; --sand:#212824; --ink:#F3EADA; --ink-soft:#CBC3B3; --teal-tint:#274240;
    }
  }
  :root[data-theme="dark"]{
    --white:#1B211F; --sand:#212824; --ink:#F3EADA; --ink-soft:#CBC3B3; --teal-tint:#274240;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--white); color:var(--ink);
    font-family:'Jost', sans-serif; font-weight:400; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;
    margin:0; color:var(--teal);
  }
  p{margin:0 0 1em 0; color:var(--ink-soft); max-width:62ch;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

  /* rainbow stripe utility: the one spot the boho-rainbow motif repeats */
  .rainbow-band{
    height:6px; width:100%;
    background:linear-gradient(90deg, var(--teal), var(--sage), var(--mustard), var(--rose), var(--terracotta));
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--white) 90%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 28px; max-width:1080px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand img{height:44px; width:44px; object-fit:contain;}
  .brand span{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.25rem; color:var(--teal);}

  nav.pages{display:flex; gap:4px; flex-wrap:wrap;}
  nav.pages a{
    font-family:'Jost', sans-serif; font-size:0.92rem; letter-spacing:0.02em;
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    padding:8px 14px; border-radius:999px; transition:background .2s, color .2s;
  }
  nav.pages a{text-decoration:none; display:inline-block;}
  nav.pages a:hover{background:var(--teal-tint); color:var(--teal);}
  nav.pages a.active{background:var(--teal); color:#fff;}

  /* ---------- Pages ---------- */
  section{padding:88px 0;}
  section.tight{padding:64px 0;}

  /* ---------- Photo placeholders ---------- */
  .photo-frame{
    position:relative; border:2px dashed color-mix(in srgb, var(--ink) 28%, transparent);
    border-radius:20px; background:var(--sand);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:28px; text-align:center; overflow:hidden;
  }
  .photo-frame .icon{opacity:.55;}
  .photo-frame .lbl{font-size:0.9rem; color:var(--ink-soft); max-width:22ch;}
  .photo-frame .lbl b{color:var(--ink); font-weight:500;}
  .photo-frame.arch{border-radius:220px 220px 20px 20px;}
  .photo-frame.hero-frame{aspect-ratio:16/11; max-width:520px;}
  .photo-frame.top-accent::before{
    content:""; position:absolute; top:0; left:0; right:0; height:6px;
    background:linear-gradient(90deg, var(--teal), var(--sage), var(--mustard), var(--rose), var(--terracotta));
  }

  /* ---------- Hero ---------- */
  .hero{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; padding-top:56px;}
  .eyebrow-free{color:var(--terracotta); font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem;}
  .hero h1{font-size:clamp(2.6rem, 5vw, 4.1rem); line-height:1.04; margin:10px 0 22px;}
  .hero p.lead{font-size:1.15rem; max-width:46ch;}
  .cta-row{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
  .btn{display:inline-block; padding:13px 28px; border-radius:999px; font-family:'Jost', sans-serif; font-size:0.98rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .15s ease;}
  .btn:hover{transform:translateY(-1px);}
  .btn-solid{background:var(--teal); color:#fff;}
  .btn-outline{border-color:var(--teal); color:var(--teal);}

  /* ---------- Service strip ---------- */
  .strip{background:var(--teal); color:#fff;}
  .strip .wrap{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; padding:40px 28px;}
  .strip .item{flex:1 1 160px;}
  .strip .item .num{font-family:'Fraunces', serif; font-style:italic; font-size:1.9rem; color:var(--mustard);}
  .strip .item p{color:color-mix(in srgb, #fff 82%, transparent); max-width:26ch;}

  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}

  .quote{max-width:640px; margin:0 auto; text-align:center;}
  .quote p.q{font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:1.6rem; color:var(--teal); line-height:1.4; max-width:none;}
  .quote .who{color:var(--terracotta); font-size:0.95rem; margin-top:10px;}

  /* ---------- Services ---------- */
  .svc-group{margin-bottom:56px;}
  .svc-group h2{font-size:1.9rem; margin-bottom:6px;}
  .svc-group .sub{color:var(--terracotta); font-family:'Fraunces', serif; font-style:italic; margin-bottom:22px; display:block;}
  .svc-list{list-style:none; margin:0; padding:0;}
  .svc-list li{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); align-items:baseline;}
  .svc-list li .name{font-size:1.05rem;}
  .svc-list li .name small{display:block; color:var(--ink-soft); font-size:0.85rem; font-weight:300; margin-top:2px;}
  .svc-list li .price{font-family:'Fraunces', serif; color:var(--teal); white-space:nowrap;}
  .svc-group:nth-of-type(1) .price{color:var(--teal);}
  .svc-group:nth-of-type(2) .price{color:var(--terracotta);}
  .svc-group:nth-of-type(3) .price{color:var(--sage);}
  .price-note{background:var(--sand); border-left:3px solid var(--mustard); padding:16px 20px; border-radius:4px; font-size:0.92rem; color:var(--ink-soft); margin-top:8px;}

  /* ---------- Gallery ---------- */
  .mood-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
  .mood-tile{aspect-ratio:1; border-radius:24px;}
  .mood-tile:nth-child(1){--accent:var(--teal);}
  .mood-tile:nth-child(2){--accent:var(--terracotta);}
  .mood-tile:nth-child(3){--accent:var(--mustard);}
  .mood-tile:nth-child(4){--accent:var(--sage);}
  .mood-tile:nth-child(5){--accent:var(--rose);}
  .mood-tile:nth-child(6){--accent:var(--teal);}
  .mood-tile::before{background:var(--accent); content:""; display:block; height:6px; border-radius:6px 6px 0 0; margin:0 0 -6px;}
  .mood-tile .inner{
    height:100%; border:2px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-top:none;
    border-radius:0 0 24px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:16px; text-align:center; background:var(--sand);
  }
  .mood-tile .inner span.tag{font-family:'Fraunces', serif; font-style:italic; color:var(--ink); font-size:1rem;}
  .mood-tile .inner span.sub{font-size:0.78rem; color:var(--ink-soft);}

  /* ---------- About ---------- */
  .about-hero{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
  .stat-row{display:flex; gap:40px; margin-top:28px; flex-wrap:wrap;}
  .stat .n{font-family:'Fraunces', serif; font-size:2.4rem; color:var(--teal);}
  .stat:nth-child(2) .n{color:var(--terracotta);}
  .stat:nth-child(3) .n{color:var(--sage);}
  .stat .l{font-size:0.88rem; color:var(--ink-soft);}
  .callout-card{background:var(--sand); border-radius:28px 28px 28px 4px; padding:36px; margin-top:20px; border-left:4px solid var(--mustard);}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .info-block{margin-bottom:26px;}
  .info-block h3{font-size:1.1rem; margin-bottom:6px; color:var(--terracotta); font-family:'Fraunces', serif; font-style:italic;}
  .info-block p{margin:0;}
  .hours-table{width:100%; border-collapse:collapse; margin-top:6px;}
  .hours-table td{padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size:0.95rem;}
  .hours-table td:last-child{text-align:right; color:var(--ink-soft);}
  .social-row{display:flex; gap:14px; margin-top:18px;}
  .social-row a{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--teal); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--teal); font-size:0.85rem; font-family:'Jost';}

  .form-card{background:var(--sand); border-radius:28px 4px 28px 28px; padding:36px; border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);}
  .form-card label{display:block; font-size:0.85rem; color:var(--ink-soft); margin:16px 0 6px;}
  .form-card label:first-child{margin-top:0;}
  .form-card input, .form-card select, .form-card textarea{width:100%; padding:11px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--ink) 20%, transparent); background:var(--white); font-family:'Jost'; color:var(--ink); font-size:0.95rem;}
  .form-card textarea{min-height:90px; resize:vertical;}
  .form-card .btn{margin-top:22px; width:100%; text-align:center; border:none;}

  footer{padding:40px 0; border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:0.85rem; color:var(--ink-soft); align-items:center;}
  footer .brand-mini{display:flex; align-items:center; gap:8px;}
  footer .brand-mini img{height:26px; width:26px; object-fit:contain;}

  @media (max-width:800px){
    .hero, .two-col, .about-hero, .contact-grid{grid-template-columns:1fr; gap:36px;}
    .mood-grid{grid-template-columns:repeat(2,1fr);}
    .strip .wrap{padding:32px 20px;}
    section{padding:56px 0;}
  }