/* Preview v2: rounded-card design, scoped to /preview-v2 only. Brand: Charcoal #272522, Mantis Red #A43E36, Red Tint #F6ECEB, Gold #daac41 */
:root{--gold:#daac41;--warm:#FBF8F5;--card:#FFFFFF;--line:rgba(39,37,34,.10);--r:20px}
body{background:var(--warm)}
.section:not(.tint):not(.v2-pricing){background:var(--warm)}
.cut:not(.hero *){clip-path:none}
.bar{background:var(--gold);width:40px;height:3px;border-radius:2px}

/* shared header row: eyebrow + headline left, intro right */
.v2-head{display:grid;gap:1.2rem 4rem;margin-bottom:2.8rem;align-items:end}
@media(min-width:900px){.v2-head{grid-template-columns:1.25fr 1fr}}
.v2-head h2{margin:0;max-width:18ch}
.v2-head-intro{margin:0;color:var(--body);font-size:1.05rem;max-width:44ch}
.v2-eyebrow{display:flex;align-items:center;gap:.7rem;font:600 .78rem/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(39,37,34,.7);margin:0 0 1.1rem}
.v2-eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.v2-cat{font:600 .72rem/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(39,37,34,.6);margin:0 0 .7rem}

/* who I help */
.cols3 .col{background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.6rem 1.7rem;position:relative}
.cols3 .col::before{content:"";display:block;width:26px;height:2px;background:var(--gold);border-radius:2px;margin-bottom:1.1rem}
.v2-fit{margin:1.8rem 0 0;max-width:62ch;font-size:1rem;color:var(--body)}
.v2-fit strong{color:var(--charcoal)}
.thoughts{border-radius:var(--r);border:1px solid rgba(164,62,54,.12)}

/* how it works panel colours stay; build section cards */
.services .svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.svc .a,.v2-icon .a{stroke:var(--gold)}
.ai-strip{border-radius:var(--r);border:1px solid var(--line);border-left:3px solid var(--gold)}
.about-photo{border-radius:24px}

/* pricing: charcoal band with rounded cards */
.v2-pricing{background:var(--charcoal);color:var(--white)}
.v2-pricing .v2-eyebrow{color:rgba(246,236,235,.75)}
.v2-pricing .v2-head h2{color:var(--white)}
.v2-pricing .v2-head-intro{color:rgba(246,236,235,.8)}
.v2-price-grid{display:grid;gap:1.2rem}
@media(min-width:960px){.v2-price-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.v2-price-card{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(246,236,235,.16);border-radius:var(--r);padding:1.8rem 1.7rem 1.6rem;color:var(--tint)}
.v2-price-card .v2-cat{color:rgba(246,236,235,.65)}
.v2-price-card h3{color:var(--white);font-size:1.35rem;margin:0 0 .6rem}
.v2-amount{font:700 2.5rem/1.05 "Outfit",sans-serif;letter-spacing:-.02em;color:var(--white);margin:0 0 .7rem}
.v2-amount span{font:500 .9rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:0;color:rgba(246,236,235,.7)}
.v2-amount .v2-from{margin-right:.15rem}
.v2-desc{font-size:.98rem;margin:0 0 1.3rem;color:inherit}
.v2-inc-label{font:600 .7rem/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .8rem;color:rgba(246,236,235,.6)}
.v2-inc{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem;font-size:.95rem;line-height:1.5}
.v2-inc li{display:flex;gap:.65rem;align-items:flex-start}
.v2-tick{flex:0 0 16px;width:16px;height:16px;margin-top:.2em;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v2-card-note{margin:auto 0 0;padding-top:1rem;border-top:1px solid rgba(246,236,235,.14);font-size:.85rem;color:rgba(246,236,235,.65)}
.v2-featured{background:#FFFDFB;border:1.5px solid var(--gold);color:var(--charcoal);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.v2-featured h3,.v2-featured .v2-amount{color:var(--charcoal)}
.v2-featured .v2-cat,.v2-featured .v2-amount span,.v2-featured .v2-inc-label{color:rgba(39,37,34,.6)}
.v2-featured .v2-desc{color:var(--body)}
.v2-featured .v2-card-note{color:rgba(39,37,34,.6);border-top-color:var(--line)}
.v2-price-foot{margin:1.8rem 0 0;font-size:.88rem;color:rgba(246,236,235,.7);max-width:none}
.v2-dot{color:var(--gold);margin:0 .35rem}

/* examples of the work */
.v2-work-grid{display:grid;gap:1.2rem}
@media(min-width:768px){.v2-work-grid{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}}
.v2-work-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.8rem 1.6rem}
.v2-icon{width:30px;height:30px;margin-bottom:1rem;fill:none;stroke-width:2;stroke-linecap:square}
.v2-icon .s{stroke:var(--charcoal)}
.v2-work-card h3{font-size:1.35rem;margin:0 0 .6rem}
.v2-work-card .v2-desc{color:var(--body);font-size:.98rem;margin:0 0 1.4rem}
.v2-designed{margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--line);font-weight:700;font-size:.95rem;color:var(--charcoal)}
/* specificity fixes: beat the site's ".section p,.section li" colour on the dark band */
.v2-pricing .v2-price-card p,.v2-pricing .v2-price-card li{color:rgba(246,236,235,.85)}
.v2-pricing .v2-price-card .v2-amount{color:var(--white)}
.v2-pricing .v2-price-card .v2-cat,.v2-pricing .v2-price-card .v2-inc-label,.v2-pricing .v2-price-card .v2-card-note{color:rgba(246,236,235,.62)}
.v2-pricing .v2-head-intro,.v2-pricing .v2-price-foot{color:rgba(246,236,235,.78)}
.v2-pricing .v2-eyebrow{color:rgba(246,236,235,.75)}
.v2-pricing .v2-featured p,.v2-pricing .v2-featured li{color:var(--body)}
.v2-pricing .v2-featured .v2-amount{color:var(--charcoal)}
.v2-pricing .v2-featured .v2-cat,.v2-pricing .v2-featured .v2-inc-label,.v2-pricing .v2-featured .v2-card-note{color:rgba(39,37,34,.6)}
.v2-pricing .v2-amount span{color:inherit;opacity:.75}
.section .v2-eyebrow,.section .v2-cat{color:rgba(39,37,34,.62)}
.section .v2-designed{color:var(--charcoal)}
.section.v2-pricing .v2-eyebrow{color:rgba(246,236,235,.75)}
/* Round 18: everything rounded (cards 20px, buttons 12px), tighter grids, balanced fit line */
:root{--rb:12px}
.cut,.hero .cut{clip-path:none!important;border-radius:var(--r)}
.btn,.btn-dark,.btn-tint,.btn-outline-light,.btn-lg,#menu .btn{border-radius:var(--rb)}
.burger{border-radius:var(--rb)}
:focus-visible{border-radius:4px}
.band{background-image:linear-gradient(var(--red),var(--red));border-radius:0}
.eyebrow::before,.thoughts li::before{border-radius:3px}
.thoughts{border-radius:var(--r)}
.about-photo,.about-photo img{border-radius:var(--r)}
/* who + build grids: about half the previous gap, same in both */
.cols3{gap:1.25rem}
@media(min-width:768px){.cols3{gap:1.25rem}}
.v2-services{gap:1.25rem!important}
@media(min-width:768px){.v2-services{grid-template-columns:1fr 1fr!important}}
@media(min-width:1100px){.v2-services{grid-template-columns:repeat(4,1fr)!important}.v2-services .svc,.v2-services .svc:nth-child(n+4){grid-column:auto}}
.v2-services .svc h3{font-size:1.2rem;margin-bottom:.5rem}
.v2-services .svc p{font-size:.98rem}
/* fit line: aligned with the cards, balanced over two lines */
.v2-fit{max-width:none;text-wrap:balance;margin-top:1.5rem}
@media(min-width:900px){.v2-fit{max-width:64ch}}
/* How it works steps as rounded cards; price tags as rounded chips */
.timeline li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.6rem 1.6rem 5.2rem}
.timeline .num{background:var(--card);left:1.4rem;top:1.6rem}
.timeline::before{z-index:0}
@media(min-width:900px){.timeline li{padding:6.2rem 1.7rem 1.8rem}.timeline .num{left:1.7rem;top:1.7rem;padding:0 .8rem 0 0}}
#how .price-tag{display:inline-block;border:1px solid rgba(218,172,65,.7);border-radius:999px;padding:.35rem .75rem;background:rgba(218,172,65,.08)}
/* contact: rounded panel for the details */
.contact-list{background:rgba(255,255,255,.04);border:1px solid rgba(246,236,235,.16);border-radius:var(--r);padding:.4rem 1.6rem}
.contact-list div:first-child{border-top:0}
/* examples of the work: three across on wide screens */
@media(min-width:960px){.v2-work-3{grid-template-columns:repeat(3,1fr)}}
/* AI strip and pricing note keep the 20px family */
.ai-strip{border-radius:var(--r)}
#how .timeline{gap:1.25rem}
.timeline::before{display:none}
@media(min-width:900px){.v2-fit{max-width:none}}
/* Round 19: gold headline, static hero card, approach strip, 2x2 build grid */
.hero h1{color:var(--gold)}
.hero h1 .band{color:var(--gold)}
.hero-sub{max-width:46ch}
@media(min-width:1024px){.hero-grid:has(.v2-hero-card){grid-template-columns:1.2fr 1fr!important;gap:3.5rem;align-items:center}}
.v2-hero-card{position:relative;overflow:hidden;background:#2F2C29;border:1px solid rgba(246,236,235,.14);border-radius:var(--r);padding:1.6rem 1.6rem 1.4rem;color:var(--white);box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:440px;justify-self:end}
.v2-hero-card::before,.v2-hero-card::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.v2-hero-card::before{width:300px;height:300px;right:-110px;top:-120px;border:1px solid rgba(218,172,65,.22)}
.v2-hero-card::after{width:200px;height:200px;right:-60px;top:-70px;border:1px solid rgba(246,236,235,.12)}
.v2-hc-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font:600 .7rem/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,236,235,.7)}
.v2-hc-live{display:inline-flex;align-items:center;gap:.5rem}
.v2-hc-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.v2-flow{position:relative;z-index:1;display:grid;gap:.6rem;margin:1.8rem 0 1.6rem}
.v2-flow-row{display:flex;align-items:center;gap:.85rem;background:rgba(255,255,255,.05);border:1px solid rgba(246,236,235,.16);border-radius:16px;padding:.9rem 1rem}
.v2-flow-row strong{display:block;font:600 1rem/1.3 "Outfit",sans-serif;color:var(--white)}
.v2-flow-row small{display:block;font-size:.8rem;line-height:1.4;color:rgba(246,236,235,.72);margin-top:.15rem}
.v2-flow-icon{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.v2-flow-icon svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-flow-hl{margin-left:1.6rem;background:var(--gold);border-color:var(--gold)}
.v2-flow-hl strong,.v2-flow-hl small{color:var(--charcoal)}
.v2-flow-hl small{opacity:.8}
.v2-flow-hl .v2-flow-icon{background:rgba(39,37,34,.12)}
.v2-flow-hl .v2-flow-icon svg{stroke:var(--charcoal)}
.v2-flow-arrow{margin-left:1.05rem;color:var(--gold);font-size:1.1rem;line-height:.8}
.v2-hc-foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;letter-spacing:.03em;color:rgba(246,236,235,.7);padding-top:1rem;border-top:1px solid rgba(246,236,235,.12)}
@media(max-width:1023px){.v2-hero-card{justify-self:start;max-width:440px;margin-top:.5rem}}
@media(max-width:480px){.v2-hero-card{padding:1.25rem 1.1rem 1.1rem}.v2-flow{margin:1.3rem 0 1.2rem}.v2-flow-hl{margin-left:1rem}.v2-hc-foot{font-size:.72rem}}
/* approach strip */
.v2-strip{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.3rem 0}
.v2-strip-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 2rem}
.v2-strip-label{margin:0;font-size:.92rem;color:rgba(39,37,34,.7);max-width:none}
.v2-strip-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.v2-strip-list li{display:flex;align-items:center;gap:.5rem;font:600 .92rem/1.3 "Plus Jakarta Sans",sans-serif;color:var(--charcoal)}
@media(max-width:767px){.v2-strip-row{flex-direction:column;align-items:flex-start}.v2-strip-list{flex-direction:column;gap:.55rem}}
/* build: tidy 2x2 */
@media(min-width:768px){.v2-services{grid-template-columns:1fr 1fr!important;grid-auto-rows:1fr}.v2-services .svc,.v2-services .svc:nth-child(n){grid-column:auto!important}}
@media(min-width:1100px){.v2-services{grid-template-columns:1fr 1fr!important}}
.v2-services .svc{height:100%}
/* Round 20: Red Tint headline; red underline moved down ~3px (bar sits at 92% of the box, so +3.26px padding = +3px) */
.hero h1,.hero h1 .band{color:var(--tint)}
.hero h1 .band{padding-bottom:calc(.04em + 3.26px)}
/* Round 21: aligned card footers, balanced pricing and steps, readable partner line */
@media(min-width:960px){
 .v2-work-3{grid-auto-rows:auto;grid-template-rows:auto}
 .v2-work-3 .v2-work-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
 .v2-work-3 .v2-designed{align-self:start;margin-top:0}
}
.v2-work-card .v2-desc{margin-bottom:1.2rem}
.v2-inc{gap:.5rem}
.v2-price-card .v2-inc{margin-bottom:1.2rem}
.v2-card-note{margin-top:auto}
#how .timeline li{display:flex;flex-direction:column}
@media(min-width:900px){#how .timeline li{padding-bottom:1.6rem}}
.section .refer-line,.section p.refer-line{font-size:1rem;line-height:1.6;color:rgba(39,37,34,.8);text-align:left;letter-spacing:0;margin-top:1.5rem}
/* Round 22: centred contact button, one-line location on desktop */
.cta-final .btn-lg{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.contact-list .v2-loc{flex-direction:column;align-items:flex-start;gap:.35rem}
.contact-list .v2-loc dd{text-wrap:pretty}
@media(min-width:1024px){
 .contact-list .v2-loc dd{white-space:nowrap;font-size:.94em}
}
/* Round 23: support tiers mini table */
.v2-tiers{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.95rem}
.v2-tiers th,.v2-tiers td{padding:.55rem 0;border-top:1px solid rgba(246,236,235,.14);text-align:left;font-weight:500;color:rgba(246,236,235,.88)}
.v2-tiers tr:last-child th,.v2-tiers tr:last-child td{border-bottom:1px solid rgba(246,236,235,.14)}
.v2-tiers td{text-align:right;font:600 1.05rem/1.2 "Outfit",sans-serif;color:var(--white)}
/* Round 24: build price range, ad hoc line, first-step strip */
.v2-pricing .v2-price-card .v2-range{font-size:.88rem;margin:-.2rem 0 1rem;color:rgba(39,37,34,.7)}
.v2-pricing .v2-price-card .v2-adhoc{font-size:.85rem;margin:-.6rem 0 1.3rem;color:rgba(246,236,235,.7)}
.v2-first-step{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;margin:0 0 1.2rem;padding:.9rem 1.4rem;border:1px solid rgba(218,172,65,.45);border-left:3px solid var(--gold);border-radius:var(--r);background:rgba(218,172,65,.06)}
.v2-pricing .v2-first-step p{margin:0;max-width:none}
.v2-pricing .v2-first-step .v2-cat{color:rgba(246,236,235,.65)}
.v2-pricing .v2-first-step .v2-fs-title{font:600 1.1rem/1.3 "Outfit",sans-serif;color:var(--white)}
.v2-pricing .v2-first-step .v2-fs-tag{margin-left:auto;font:600 .72rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);background:var(--gold);border-radius:999px;padding:.4rem .75rem}
@media(max-width:480px){.v2-pricing .v2-first-step .v2-fs-tag{margin-left:0}}
/* Round 25: tighter long lists on desktop so the Roadmap card has less dead space */
@media(min-width:960px){
 .v2-price-card{padding:1.6rem 1.6rem 1.4rem}
 .v2-price-card .v2-inc{gap:.35rem;line-height:1.42;font-size:.92rem;margin-bottom:1rem}
 .v2-price-card .v2-desc{margin-bottom:1rem}
 .v2-price-card .v2-inc-label{margin-bottom:.6rem}
 .v2-tiers{margin-bottom:1rem}
 .v2-tiers th,.v2-tiers td{padding:.42rem 0}
 .v2-pricing .v2-price-card .v2-adhoc{margin:-.4rem 0 1rem}
 .v2-card-note{line-height:1.5}
}
/* Round 27: Roadmap note follows its list on desktop; card shrinks to content, top-aligned */
@media(min-width:960px){
 .v2-price-grid>.v2-price-card:first-child{align-self:start}
 .v2-price-grid>.v2-price-card:first-child .v2-card-note{margin-top:.2rem}
}
