:root{
    /* Spiced palette */
    --ink:#17222B;        /* deep charcoal base       */
    --oxblood:#86373E;    /* deep red accent          */
    --terracotta:#BC7A3D; /* burnt-orange mid (visual)*/
    --saffron:#F1BD78;    /* golden highlight         */
    --blush:#EFD9C7;      /* warm peach cream         */
    --linen:#FBF8F0;      /* off-white                */

    --ink-2:#1E2C37;      /* slightly lifted ink      */
    --ink-line:rgba(239,217,199,0.14);

    --serif:'Fraunces',Georgia,serif;
    --sans:'Inter',system-ui,sans-serif;
    --mono:'Space Grotesk',system-ui,sans-serif;

    --maxw:1180px;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--linen);
    font-family:var(--sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--saffron);color:var(--ink)}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--terracotta);font-weight:600;
  }
  .section{padding:110px 0}
  h1,h2,h3{font-family:var(--serif);font-weight:900;line-height:1.02;letter-spacing:-.01em}
  .display{font-size:clamp(44px,7.5vw,92px)}
  h2.title{font-size:clamp(34px,5vw,58px);font-weight:600}
  p.lead{font-size:clamp(17px,2vw,20px);color:rgba(251,248,240,.72);max-width:52ch}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.02em;
    padding:15px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent;
    transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  }
  .btn-primary{background:var(--saffron);color:var(--ink)}
  .btn-primary:hover{background:var(--terracotta);color:var(--linen);transform:translateY(-2px)}
  .btn-ghost{border-color:var(--ink-line);color:var(--linen)}
  .btn-ghost:hover{border-color:var(--saffron);color:var(--saffron);transform:translateY(-2px)}
  .btn .arw{transition:transform .3s var(--ease)}
  .btn:hover .arw{transform:translateX(4px)}

  /* ---------- Nav ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
  header.scrolled{background:rgba(19,34,43,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;display:flex;align-items:center;gap:11px}
  .brand .dot{width:11px;height:11px;background:var(--terracotta);border-radius:1px;transform:rotate(45deg)}
  .brand b{font-weight:900}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,248,240,.72);transition:color .25s}
  .nav-links a:hover{color:var(--saffron)}
  .nav-cta{padding:11px 20px;border:1px solid var(--ink-line);border-radius:2px}
  .nav-cta:hover{border-color:var(--saffron)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .burger span{width:24px;height:2px;background:var(--linen);transition:.3s var(--ease)}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:74px;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1fr 150px;gap:56px;align-items:center;width:100%}
  .hero-glow{position:absolute;width:640px;height:640px;border-radius:50%;
    background:radial-gradient(circle,rgba(188,122,61,.28),transparent 66%);
    top:-180px;right:-120px;pointer-events:none;filter:blur(20px)}
  .hero h1 em{font-style:normal;color:var(--terracotta);position:relative}
  .hero .eyebrow{margin-bottom:26px}
  .hero p.lead{margin:28px 0 38px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

  /* Spice bars — the signature */
  .spice{display:flex;gap:8px;height:340px;align-items:stretch}
  .bar{flex:1;border-radius:3px;position:relative;cursor:default;
    transform-origin:bottom;transform:scaleY(0);
    transition:flex .45s var(--ease),box-shadow .45s var(--ease)}
  .bar.in{animation:grow .9s var(--ease) forwards}
  @keyframes grow{to{transform:scaleY(1)}}
  .spice:hover .bar{flex:.7}
  .spice .bar:hover{flex:2.1;box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
  .bar span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%) rotate(0);
    font-family:var(--mono);font-size:10px;letter-spacing:.05em;
    color:rgba(19,34,43,.0);white-space:nowrap;transition:color .3s .1s}
  .bar:hover span{color:rgba(19,34,43,.85)}
  .bar.light:hover span{color:rgba(19,34,43,.85)}
  .bar.dark:hover span{color:rgba(251,248,240,.9)}

  /* ---------- Marquee strip ---------- */
  .strip{border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:22px 0;overflow:hidden;white-space:nowrap}
  .strip-track{display:inline-flex;gap:44px;animation:slide 26s linear infinite;font-family:var(--mono);
    font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,240,.5)}
  .strip-track span{display:inline-flex;gap:44px;align-items:center}
  .strip .dot{color:var(--terracotta)}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* ---------- Services ---------- */
  .services{background:var(--linen);color:var(--ink)}
  .services .eyebrow{color:var(--oxblood)}
  .services p.lead{color:rgba(19,34,43,.66)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap}
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .tier{background:#fff;border:1px solid rgba(19,34,43,.09);border-radius:6px;padding:34px 30px;
    display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);position:relative;overflow:hidden}
  .tier::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
  .tier:hover{transform:translateY(-8px);box-shadow:0 28px 50px -24px rgba(19,34,43,.4);border-color:transparent}
  .tier:hover::before{transform:scaleX(1)}
  .tier.featured{background:var(--ink);color:var(--linen)}
  .tier.featured::before{background:var(--saffron)}
  .tier-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)}
  .tier.featured .tier-tag{color:var(--saffron)}
  .tier h3{font-size:26px;font-weight:600;margin:14px 0 6px}
  .tier .price{font-family:var(--serif);font-size:40px;font-weight:900;letter-spacing:-.02em;margin:12px 0 4px}
  .tier .price small{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--terracotta);letter-spacing:.04em}
  .tier .desc{font-size:14.5px;color:rgba(19,34,43,.62);margin-bottom:22px}
  .tier.featured .desc{color:rgba(251,248,240,.62)}
  .tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
  .tier li{font-size:14.5px;display:flex;gap:11px;align-items:flex-start}
  .tier li::before{content:"";width:7px;height:7px;background:var(--terracotta);border-radius:1px;transform:rotate(45deg);margin-top:7px;flex:0 0 auto}
  .tier.featured li::before{background:var(--saffron)}
  .tier .btn{width:100%;justify-content:center;margin-top:auto}
  .tier:not(.featured) .btn-primary{background:var(--ink);color:var(--linen)}
  .tier:not(.featured) .btn-primary:hover{background:var(--terracotta)}

  /* add-ons */
  .addons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
  .addon{border:1px solid rgba(19,34,43,.12);border-radius:6px;padding:26px 28px;display:flex;flex-direction:column;gap:6px;
    transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
  .addon:hover{background:var(--blush);transform:translateY(-4px)}
  .addon .tier-tag{color:var(--oxblood)}
  .addon h4{font-family:var(--serif);font-size:22px;font-weight:600}
  .addon .price{font-family:var(--mono);font-weight:600;color:var(--terracotta);font-size:15px}
  .addon p{font-size:14px;color:rgba(19,34,43,.6)}

  /* ---------- Process ---------- */
  .process{background:var(--oxblood);color:var(--linen)}
  .process .eyebrow{color:var(--saffron)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
  .step{border-top:1px solid rgba(251,248,240,.22);padding-top:22px}
  .step .num{font-family:var(--serif);font-size:15px;font-weight:900;color:var(--saffron);letter-spacing:.05em}
  .step h3{font-size:23px;font-weight:600;margin:16px 0 10px}
  .step p{font-size:14.5px;color:rgba(251,248,240,.74)}

  /* ---------- Work ---------- */
  .work .eyebrow{color:var(--terracotta)}
  .grid-work{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:52px}
  .card{border-radius:8px;overflow:hidden;position:relative;min-height:320px;grid-column:span 2;
    display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
    background-size:cover;background-position:top center;background-repeat:no-repeat;
    border:1px solid var(--ink-line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .card.wide{min-height:380px}
  .card.wide{grid-column:span 3}
  .card:hover{transform:translateY(-6px)}
  .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(19,34,43,.86));z-index:1}
  .card > *{position:relative;z-index:2}
  .card .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron)}
  .card h3{font-size:25px;font-weight:600;margin-top:8px}
  .c1{background-image:url("images/apex-mockup.jpg")}
  .c2{background-image:url("images/brightside-dental-mockup.jpg")}
  .c3{background-image:url("images/fiorella-mockup.jpg")}
  .c4{background-image:url("images/morgan-ellis-mockup.jpg")}
  .c5{background-image:url("images/freshcut-mockup.jpg")}
  .work-note{margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:rgba(251,248,240,.42)}

  /* ---------- About ---------- */
  .about{background:var(--blush);color:var(--ink)}
  .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
  .about .eyebrow{color:var(--oxblood)}
  .about h2{font-size:clamp(30px,4vw,46px);font-weight:600;margin:20px 0 24px}
  .about p{font-size:16.5px;color:rgba(19,34,43,.75);margin-bottom:18px;max-width:56ch}
  .about .sig{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--oxblood);margin-top:8px}
  .portrait{aspect-ratio:4/5;border-radius:10px;background:
    linear-gradient(160deg,var(--terracotta),var(--oxblood));position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center}
  .portrait .mono{font-family:var(--serif);font-size:120px;font-weight:900;color:rgba(251,248,240,.16)}
  .portrait .tape{position:absolute;bottom:22px;left:22px;font-family:var(--mono);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,240,.85)}

  /* ---------- CTA ---------- */
  .cta{text-align:center;position:relative;overflow:hidden}
  .cta .glow{position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:20%;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(241,189,120,.22),transparent 66%);filter:blur(10px);pointer-events:none}
  .cta h2{font-size:clamp(36px,6vw,72px);font-weight:900;position:relative}
  .cta h2 em{font-style:italic;color:var(--saffron);font-weight:400}
  .cta p.lead{margin:24px auto 38px;text-align:center}
  .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--ink-line);padding:56px 0 34px}
  .foot-bars{display:flex;height:8px;gap:4px;margin-bottom:44px}
  .foot-bars i{flex:1;border-radius:2px}
  .foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
  .foot-grid .brand{font-size:24px}
  .foot-links{display:flex;gap:30px;font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
  .foot-links a{color:rgba(251,248,240,.62)}
  .foot-links a:hover{color:var(--saffron)}
  .foot-bottom{margin-top:38px;padding-top:24px;border-top:1px solid var(--ink-line);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(251,248,240,.4)}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.show{opacity:1;transform:none}

  /* ---------- Mobile ---------- */
  @media(max-width:860px){
    .section{padding:80px 0}
    .nav-links{position:fixed;inset:74px 0 auto 0;background:rgba(19,34,43,.97);backdrop-filter:blur(14px);
      flex-direction:column;gap:0;padding:14px 0;border-bottom:1px solid var(--ink-line);
      transform:translateY(-140%);transition:transform .4s var(--ease);align-items:stretch}
    .nav-links.open{transform:none}
    .nav-links a{padding:16px 28px;font-size:15px}
    .nav-links .nav-cta{margin:10px 28px;text-align:center}
    .burger{display:flex}
    .hero-grid{grid-template-columns:1fr}
    .spice{height:120px;flex-direction:row}
    .tiers{grid-template-columns:1fr}
    .addons{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .grid-work{grid-template-columns:1fr}
    .card,.card.wide{grid-column:span 1}
    .about-grid{grid-template-columns:1fr;gap:36px}
    .portrait{max-width:340px}
  }
  @media(max-width:480px){
    .steps{grid-template-columns:1fr}
    .wrap{padding:0 20px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .bar{transform:scaleY(1)!important}
  }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.page-hero{background:var(--ink);color:var(--linen);padding:150px 0 90px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-220px;right:-120px;
  background:radial-gradient(circle,rgba(188,122,61,.26),transparent 66%);filter:blur(20px);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6.5vw,78px);line-height:1.02;letter-spacing:-.01em;margin:20px 0 20px}
.page-hero h1 em{font-style:normal;color:var(--terracotta)}
.page-hero p.lead{font-size:clamp(17px,2vw,20px);color:rgba(251,248,240,.72);max-width:54ch}
.page-hero .eyebrow{color:var(--terracotta)}

/* platform intro row for each service block */
.svc-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.svc-intro .flag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);font-weight:600;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.svc-intro .flag .pip{width:9px;height:9px;background:var(--terracotta);border-radius:1px;transform:rotate(45deg)}
.svc-intro h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1.04}
.svc-intro p{color:rgba(19,34,43,.66);max-width:36ch;font-size:16px}

/* four-tier grid (Wix/Squarespace) */
.tiers.four{grid-template-columns:repeat(4,1fr);gap:18px}
.tiers.four .tier{padding:28px 24px}
.tiers.four .tier .price{font-size:34px}

/* alt (dark) service block so WordPress vs platforms alternate */
.services.alt{background:var(--blush)}
.services.alt .tier{border-color:rgba(19,34,43,.12)}

/* editable placeholder note */
.edit-note{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:rgba(19,34,43,.5)}

/* comparison table */
.compare-wrap{background:var(--ink);color:var(--linen)}
.compare-wrap .eyebrow{color:var(--saffron)}
.compare{width:100%;border-collapse:collapse;margin-top:46px;font-size:15px}
.compare th,.compare td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--ink-line);vertical-align:top}
.compare thead th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,240,.6);font-weight:600}
.compare thead th:nth-child(2),.compare thead th:nth-child(3){color:var(--linen);font-size:18px;font-family:var(--serif);letter-spacing:0;text-transform:none;font-weight:700}
.compare tbody th{font-weight:600;color:var(--saffron);font-family:var(--sans);width:26%}
.compare td{color:rgba(251,248,240,.82)}
.compare .best{background:rgba(241,189,120,.06)}

/* FAQ */
.faq{max-width:820px;margin:46px auto 0;border-top:1px solid rgba(19,34,43,.12)}
.faq details{border-bottom:1px solid rgba(19,34,43,.12)}
.faq summary{cursor:pointer;list-style:none;padding:24px 4px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:24px;color:var(--terracotta);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 26px;color:rgba(19,34,43,.7);font-size:15.5px;max-width:70ch}

@media(max-width:860px){
  .tiers.four{grid-template-columns:1fr 1fr}
  .compare{font-size:14px}
  .compare th,.compare td{padding:14px 12px}
}
@media(max-width:560px){
  .tiers.four{grid-template-columns:1fr}
  .page-hero{padding:120px 0 70px}
}