/* =================================================================
   CREATE. BUILD. BLOOM. — SHARED STYLES
   This one file controls the look of EVERY page.
   You normally won't need to touch this. Edit text in the .html files.
   ================================================================= */

:root{
  --cream:#FBF6EC;
  --ink:#161310;
  --create:#4B3BE0;   /* indigo  = Create */
  --build:#FF5A30;    /* tangerine = Build */
  --bloom:#12B070;    /* green   = Bloom  */
  --lime:#BEE85B;
  --muted:#6E665C;
  --line:rgba(22,19,16,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Space Grotesk',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden;}
.display{font-family:'Bricolage Grotesque',sans-serif;line-height:0.96;letter-spacing:-0.02em;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* custom cursor */
.cursor{position:fixed;width:14px;height:14px;border-radius:50%;background:var(--build);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:multiply;}
.cursor.big{width:46px;height:46px;background:var(--create);}
@media(hover:none){.cursor{display:none;}}

/* ---------- NAV ---------- */
header{position:fixed;top:0;width:100%;z-index:100;padding:1.05rem 0;background:rgba(251,246,236,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
nav{max-width:1240px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;}
.logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;white-space:nowrap;text-decoration:none;}
.logo .c{color:var(--create);}.logo .b{color:var(--build);}.logo .l{color:var(--bloom);}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center;}
.nav-links a{text-decoration:none;font-size:0.88rem;font-weight:500;position:relative;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--build);transition:width .3s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{background:var(--ink);color:var(--cream);padding:.55rem 1.2rem;border-radius:50px;}
.nav-cta::after{display:none;}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.98rem;padding:1rem 2.2rem;border-radius:50px;transition:transform .25s,box-shadow .25s;margin:0 .5rem .7rem 0;cursor:pointer;border:none;}
.btn-dark{background:var(--ink);color:var(--cream);}
.btn-dark:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(22,19,16,0.28);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-4px);}
.btn-lime{background:var(--lime);color:var(--ink);}
.btn-lime:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(190,232,91,0.4);}
/* purchase button types */
.btn-pay{background:var(--bloom);color:#fff;}              /* Pay now */
.btn-pay:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(18,176,112,0.35);}
.btn-deposit{background:var(--build);color:#fff;}          /* Book your spot (deposit) */
.btn-deposit:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(255,90,48,0.35);}
.btn-quote{background:transparent;color:var(--create);border:2px solid var(--create);}  /* Request a quote / call */
.btn-quote:hover{background:var(--create);color:#fff;transform:translateY(-4px);}
.btn-pp{background:#ffc439;color:#0b2540;}                 /* PayPal */
.btn-pp:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(255,196,57,0.4);}
.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}

/* ---------- HERO (home) ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;}
.shape{position:absolute;z-index:0;opacity:0.9;}
.s-create{width:230px;height:230px;background:var(--create);border-radius:50%;top:12%;left:-60px;}
.s-build{width:160px;height:160px;background:var(--build);top:60%;left:7%;transform:rotate(20deg);}
.s-bloom{width:200px;height:200px;background:var(--bloom);border-radius:50% 50% 50% 0;bottom:-40px;right:33%;}
.s-lime{width:120px;height:120px;background:var(--lime);border-radius:50%;top:16%;right:7%;}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:8rem 2rem 4rem;display:grid;grid-template-columns:1.05fr 0.95fr;gap:3.5rem;align-items:center;width:100%;}
.hero-image img{width:100%;height:520px;object-fit:cover;border-radius:12px;box-shadow:0 30px 60px rgba(22,19,16,0.28);position:relative;z-index:1;}
.eyebrow-pill{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--cream);padding:.5rem 1rem;border-radius:50px;margin-bottom:1.8rem;}
.eyebrow-pill b{color:var(--lime);}
h1.hero-title{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2.8rem,6vw,5.2rem);letter-spacing:-0.03em;margin-bottom:1.4rem;}
.hero-title .w{display:inline-block;opacity:0;transform:translateY(24px);animation:wordIn .6s cubic-bezier(.2,.7,.3,1) forwards;}
.hero-title .w1{animation-delay:.15s;color:var(--create);}
.hero-title .w2{animation-delay:.5s;color:var(--build);}
.hero-title .w3{animation-delay:.85s;color:var(--bloom);}
@keyframes wordIn{to{opacity:1;transform:none;}}
.hero-sub{font-size:1.15rem;max-width:46ch;margin-bottom:2.2rem;opacity:.85;}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{padding:9rem 2rem 4rem;position:relative;overflow:hidden;color:#fff;}
.ph-create{background:var(--create);}
.ph-build{background:var(--build);}
.ph-bloom{background:var(--bloom);}
.ph-ink{background:var(--ink);}
.page-hero .pwrap{max-width:1240px;margin:0 auto;position:relative;z-index:1;}
.page-hero .pstage{font-family:'Bricolage Grotesque';font-weight:800;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;opacity:.9;margin-bottom:.6rem;}
.page-hero h1{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-0.03em;margin-bottom:1rem;}
.page-hero p{font-size:1.2rem;max-width:54ch;opacity:.95;}
.pghost{position:absolute;right:2rem;top:50%;transform:translateY(-50%);font-family:'Bricolage Grotesque';font-weight:800;font-size:15rem;line-height:1;opacity:0.13;pointer-events:none;}

/* ---------- SECTIONS ---------- */
section{padding:5.5rem 2rem;}
.wrap{max-width:1240px;margin:0 auto;}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;}
.eyebrow.c{color:var(--create);}.eyebrow.b{color:var(--build);}.eyebrow.l{color:var(--bloom);}
.sec-title{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:-0.02em;margin-bottom:1rem;}
.sec-lead{font-size:1.06rem;color:var(--muted);max-width:62ch;margin-bottom:1rem;}
.tint{background:#F3ECDD;}

/* ---------- 3-STEP LEGEND ---------- */
.ov-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:stretch;margin-top:2.5rem;}
.ov{padding:1.8rem;border-radius:14px;border-top:5px solid var(--ink);background:#F3ECDD;}
.ov.c{border-top-color:var(--create);}.ov.b{border-top-color:var(--build);}.ov.l{border-top-color:var(--bloom);}
.ov .tag{font-family:'Bricolage Grotesque';font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;}
.ov.c .tag{color:var(--create);}.ov.b .tag{color:var(--build);}.ov.l .tag{color:var(--bloom);}
.ov h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;margin:.4rem 0 .5rem;}
.ov p{font-size:.92rem;color:var(--muted);}
.ov-arrow{display:flex;align-items:center;font-size:1.6rem;color:var(--muted);font-weight:700;}

/* ---------- SERVICE PREVIEW CARDS (home) ---------- */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2.5rem;}
.preview{background:#F3ECDD;border-radius:14px;padding:2.2rem;border-top:5px solid var(--ink);transition:transform .35s,box-shadow .35s;text-decoration:none;color:inherit;display:block;}
.preview.c{border-top-color:var(--create);}.preview.b{border-top-color:var(--build);}.preview.l{border-top-color:var(--bloom);}
.preview:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(22,19,16,0.12);}
.preview .icon{font-size:2rem;margin-bottom:.8rem;}
.preview h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;margin-bottom:.6rem;}
.preview p{font-size:.95rem;color:var(--muted);margin-bottom:1rem;}
.preview .more{font-weight:700;color:var(--build);}

/* ---------- SERVICE / PRICING CARDS ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem;}
.card{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:2rem;transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column;}
.tint .card{background:var(--cream);}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(22,19,16,0.12);}
.card.feat{background:var(--build);color:#fff;border-color:var(--build);}
.card .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:.8rem;opacity:.6;text-transform:uppercase;letter-spacing:.08em;}
.card h4{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.4rem;margin:.5rem 0;}
.card .price{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.7rem;margin-bottom:.7rem;color:var(--build);}
.card.feat .price{color:#fff;}
.card>p{font-size:.9rem;color:var(--muted);margin-bottom:1.1rem;}
.card.feat>p{color:rgba(255,255,255,0.92);}
.card ul{list-style:none;font-size:.86rem;margin-bottom:1.3rem;flex-grow:1;}
.card li{padding:.4rem 0;border-bottom:1px solid var(--line);color:var(--muted);}
.card.feat li{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.92);}
.card li::before{content:'→ ';font-weight:700;color:var(--build);}
.card.feat li::before{color:#fff;}

/* ---------- BLOOM METHOD PHASES ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin:2.5rem 0;}
.phase{border-left:4px solid var(--create);padding:1.2rem 1.4rem;background:#F3ECDD;border-radius:0 10px 10px 0;}
.phase .pn{font-family:'Bricolage Grotesque';font-weight:800;color:var(--create);font-size:.8rem;letter-spacing:.08em;}
.phase h4{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.2rem;margin:.3rem 0 .5rem;}
.phase p{font-size:.88rem;color:var(--muted);}

/* ---------- PORTFOLIO ---------- */
.port{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 4rem;margin-top:2rem;}
.port-item:nth-child(2){margin-top:4rem;}
.port-frame{overflow:hidden;border-radius:10px;border:1px solid var(--line);aspect-ratio:4/3;background:#dfeee4;}
.port-frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 5s ease;}
.port-item:hover .port-frame img{transform:translateY(-30%);}
.port-cat{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bloom);margin-top:1.4rem;}
.port-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.6rem;margin:.3rem 0 .5rem;}
.port-desc{font-size:.93rem;color:var(--muted);max-width:42ch;margin-bottom:.7rem;}
.port-link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--bloom);padding-bottom:2px;}
.port-link:hover{color:var(--bloom);}

/* ---------- TESTIMONIALS ---------- */
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2.5rem;}
.t-card{background:#F3ECDD;border-radius:12px;padding:2rem;border:1px solid var(--line);border-top:5px solid var(--bloom);}
.t-card .q{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.1rem;line-height:1.45;margin-bottom:1.2rem;}
.t-card .who{font-weight:700;}
.t-card .role{font-size:.85rem;color:var(--muted);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:4rem;align-items:center;}
.about-copy p{font-size:1.05rem;color:var(--muted);margin-bottom:1.3rem;}
.about-copy strong{color:var(--ink);font-weight:700;}
.about-photo{position:relative;}
.about-photo img{width:100%;height:480px;object-fit:cover;border-radius:10px;}
.about-photo::before{content:'';position:absolute;width:120px;height:120px;background:var(--create);border-radius:50%;z-index:-1;top:-14px;right:-14px;}
.stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.2rem;}
.stat .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.4rem;color:var(--create);}
.stat .l{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}

/* ---------- CTA STRIP ---------- */
.cta-strip{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 2rem;}
.cta-strip h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-0.02em;margin-bottom:1rem;}
.cta-strip h2 .c{color:var(--create);}.cta-strip h2 .b{color:var(--build);}.cta-strip h2 .l{color:var(--bloom);}
.cta-strip p{opacity:.85;max-width:52ch;margin:0 auto 1.8rem;}

/* ---------- CONTACT ---------- */
.contact-detail{margin-top:2rem;opacity:.85;font-size:1.05rem;}
.contact-detail b{color:var(--bloom);}

/* ---------- FOOTER ---------- */
footer{background:#0E0C0A;color:var(--cream);padding:3rem 2rem;text-align:center;}
.footer-links{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem;}
.footer-links a{text-decoration:none;opacity:.7;font-size:.9rem;}
.footer-links a:hover{opacity:1;color:var(--lime);}
.footer-small{font-size:.82rem;opacity:.55;margin-top:.6rem;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){.ov-grid{grid-template-columns:1fr;}.ov-arrow{transform:rotate(90deg);justify-content:center;}}
@media(max-width:860px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);padding:1.5rem 2rem;gap:1.2rem;border-bottom:1px solid var(--line);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .hero-inner{grid-template-columns:1fr;gap:2.5rem;padding-top:7rem;}
  .hero-image img{height:300px;}
  .about-grid{grid-template-columns:1fr;gap:2.5rem;}
  .port{grid-template-columns:1fr;gap:3rem;}
  .port-item:nth-child(2){margin-top:0;}
  .pghost{font-size:8rem;opacity:.1;}
}
@media(prefers-reduced-motion:reduce){
  .hero-title .w{opacity:1;transform:none;animation:none;}
  .cursor{display:none;}
}