/* Synergy Site Standard: section designs v2 (Marcos, 2026-10-15). Opt-in: pages with <body class="v2">.
   Ideas from 21st.dev, rebuilt in plain CSS: Pricing Card With Features + Feature Section with Bento Grid (services),
   Milestone Timeline (process), split FAQ, Large Name Footer + Motion Footer (footer), Glass Fold flowing lines and
   grid backgrounds (section accents). Brand fonts come from the page (--font-display, --font-body). */

/* ---------- Type: the brand's display font everywhere, no serif-italic accent word ---------- */
.v2 h1,.v2 h2,.v2 h3,.v2 .logo-word,.v2 .score-num,.v2 .stat dd{font-family:var(--font-display)}
.v2 h1{font-weight:800;font-style:italic;font-size:clamp(2.5rem,6vw,4.8rem);line-height:.98;letter-spacing:-.01em}
.v2 h2{font-weight:800;font-style:italic;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.01em}
.v2 h3{font-weight:700;letter-spacing:0}
.v2 .ital{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.v2 h1 .ital{font-size:1em;line-height:1;margin-top:.04em}
.v2 h2 .ital{font-size:1em}
.v2 .kicker{font-family:var(--font-display);font-weight:600;letter-spacing:.24em}
.v2 .kicker::before,.v2 .kicker::after{width:14px;height:1px}
.v2 .stat dd{font-weight:800;font-style:italic}
.v2 .btn{font-family:var(--font-display);font-weight:700;letter-spacing:.08em}

/* ---------- Background accents ---------- */
/* Light sections: a faint brand-color grid that fades out from the top. */
.bg-grid{position:relative;isolation:isolate}
.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}
/* Dark sections: flowing brand-color lines, like light running over paint. */
.bg-lines{position:relative;isolation:isolate;overflow:hidden}
.bg-lines::before{content:"";position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'700'%20viewBox%3D'0%200%201600%20700'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.1'%20stroke-opacity%3D'.55'%3E%3Cpath%20d%3D'M-40%20120%20C%20260%20-30%20560%20290%20900%2090%20S%201360%20-40%201640%20160'%2F%3E%3Cpath%20d%3D'M-40%20142%20C%20260%20-8%20560%20312%20900%20112%20S%201360%20-18%201640%20182'%2F%3E%3Cpath%20d%3D'M-40%20164%20C%20260%2014%20560%20334%20900%20134%20S%201360%204%201640%20204'%2F%3E%3Cpath%20d%3D'M-40%20186%20C%20260%2036%20560%20356%20900%20156%20S%201360%2026%201640%20226'%2F%3E%3Cpath%20d%3D'M-40%20208%20C%20260%2058%20560%20378%20900%20178%20S%201360%2048%201640%20248'%2F%3E%3Cpath%20d%3D'M-40%20230%20C%20260%2080%20560%20400%20900%20200%20S%201360%2070%201640%20270'%2F%3E%3Cpath%20d%3D'M-40%20252%20C%20260%20102%20560%20422%20900%20222%20S%201360%2092%201640%20292'%2F%3E%3Cpath%20d%3D'M-40%20274%20C%20260%20124%20560%20444%20900%20244%20S%201360%20114%201640%20314'%2F%3E%3Cpath%20d%3D'M-40%20296%20C%20260%20146%20560%20466%20900%20266%20S%201360%20136%201640%20336'%2F%3E%3Cpath%20d%3D'M-40%20318%20C%20260%20168%20560%20488%20900%20288%20S%201360%20158%201640%20358'%2F%3E%3Cpath%20d%3D'M-40%20340%20C%20260%20190%20560%20510%20900%20310%20S%201360%20180%201640%20380'%2F%3E%3Cpath%20d%3D'M-40%20362%20C%20260%20212%20560%20532%20900%20332%20S%201360%20202%201640%20402'%2F%3E%3Cpath%20d%3D'M-40%20384%20C%20260%20234%20560%20554%20900%20354%20S%201360%20224%201640%20424'%2F%3E%3Cpath%20d%3D'M-40%20406%20C%20260%20256%20560%20576%20900%20376%20S%201360%20246%201640%20446'%2F%3E%3Cpath%20d%3D'M-40%20428%20C%20260%20278%20560%20598%20900%20398%20S%201360%20268%201640%20468'%2F%3E%3Cpath%20d%3D'M-40%20450%20C%20260%20300%20560%20620%20900%20420%20S%201360%20290%201640%20490'%2F%3E%3C%2Fsvg%3E") center/cover no-repeat;opacity:.08}
.bg-lines::after{content:"";position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:-1;pointer-events:none;
  background-color:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'700'%20viewBox%3D'0%200%201600%20700'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20stroke-opacity%3D'.55'%3E%3Cpath%20d%3D'M-40%20120%20C%20260%20-30%20560%20290%20900%2090%20S%201360%20-40%201640%20160'%2F%3E%3Cpath%20d%3D'M-40%20142%20C%20260%20-8%20560%20312%20900%20112%20S%201360%20-18%201640%20182'%2F%3E%3Cpath%20d%3D'M-40%20164%20C%20260%2014%20560%20334%20900%20134%20S%201360%204%201640%20204'%2F%3E%3Cpath%20d%3D'M-40%20186%20C%20260%2036%20560%20356%20900%20156%20S%201360%2026%201640%20226'%2F%3E%3Cpath%20d%3D'M-40%20208%20C%20260%2058%20560%20378%20900%20178%20S%201360%2048%201640%20248'%2F%3E%3Cpath%20d%3D'M-40%20230%20C%20260%2080%20560%20400%20900%20200%20S%201360%2070%201640%20270'%2F%3E%3Cpath%20d%3D'M-40%20252%20C%20260%20102%20560%20422%20900%20222%20S%201360%2092%201640%20292'%2F%3E%3Cpath%20d%3D'M-40%20274%20C%20260%20124%20560%20444%20900%20244%20S%201360%20114%201640%20314'%2F%3E%3Cpath%20d%3D'M-40%20296%20C%20260%20146%20560%20466%20900%20266%20S%201360%20136%201640%20336'%2F%3E%3Cpath%20d%3D'M-40%20318%20C%20260%20168%20560%20488%20900%20288%20S%201360%20158%201640%20358'%2F%3E%3Cpath%20d%3D'M-40%20340%20C%20260%20190%20560%20510%20900%20310%20S%201360%20180%201640%20380'%2F%3E%3Cpath%20d%3D'M-40%20362%20C%20260%20212%20560%20532%20900%20332%20S%201360%20202%201640%20402'%2F%3E%3Cpath%20d%3D'M-40%20384%20C%20260%20234%20560%20554%20900%20354%20S%201360%20224%201640%20424'%2F%3E%3Cpath%20d%3D'M-40%20406%20C%20260%20256%20560%20576%20900%20376%20S%201360%20246%201640%20446'%2F%3E%3Cpath%20d%3D'M-40%20428%20C%20260%20278%20560%20598%20900%20398%20S%201360%20268%201640%20468'%2F%3E%3Cpath%20d%3D'M-40%20450%20C%20260%20300%20560%20620%20900%20420%20S%201360%20290%201640%20490'%2F%3E%3C%2Fsvg%3E") center/cover no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'700'%20viewBox%3D'0%200%201600%20700'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20stroke-opacity%3D'.55'%3E%3Cpath%20d%3D'M-40%20120%20C%20260%20-30%20560%20290%20900%2090%20S%201360%20-40%201640%20160'%2F%3E%3Cpath%20d%3D'M-40%20142%20C%20260%20-8%20560%20312%20900%20112%20S%201360%20-18%201640%20182'%2F%3E%3Cpath%20d%3D'M-40%20164%20C%20260%2014%20560%20334%20900%20134%20S%201360%204%201640%20204'%2F%3E%3Cpath%20d%3D'M-40%20186%20C%20260%2036%20560%20356%20900%20156%20S%201360%2026%201640%20226'%2F%3E%3Cpath%20d%3D'M-40%20208%20C%20260%2058%20560%20378%20900%20178%20S%201360%2048%201640%20248'%2F%3E%3Cpath%20d%3D'M-40%20230%20C%20260%2080%20560%20400%20900%20200%20S%201360%2070%201640%20270'%2F%3E%3Cpath%20d%3D'M-40%20252%20C%20260%20102%20560%20422%20900%20222%20S%201360%2092%201640%20292'%2F%3E%3Cpath%20d%3D'M-40%20274%20C%20260%20124%20560%20444%20900%20244%20S%201360%20114%201640%20314'%2F%3E%3Cpath%20d%3D'M-40%20296%20C%20260%20146%20560%20466%20900%20266%20S%201360%20136%201640%20336'%2F%3E%3Cpath%20d%3D'M-40%20318%20C%20260%20168%20560%20488%20900%20288%20S%201360%20158%201640%20358'%2F%3E%3Cpath%20d%3D'M-40%20340%20C%20260%20190%20560%20510%20900%20310%20S%201360%20180%201640%20380'%2F%3E%3Cpath%20d%3D'M-40%20362%20C%20260%20212%20560%20532%20900%20332%20S%201360%20202%201640%20402'%2F%3E%3Cpath%20d%3D'M-40%20384%20C%20260%20234%20560%20554%20900%20354%20S%201360%20224%201640%20424'%2F%3E%3Cpath%20d%3D'M-40%20406%20C%20260%20256%20560%20576%20900%20376%20S%201360%20246%201640%20446'%2F%3E%3Cpath%20d%3D'M-40%20428%20C%20260%20278%20560%20598%20900%20398%20S%201360%20268%201640%20468'%2F%3E%3Cpath%20d%3D'M-40%20450%20C%20260%20300%20560%20620%20900%20420%20S%201360%20290%201640%20490'%2F%3E%3C%2Fsvg%3E") center/cover no-repeat;opacity:.22}

/* ---------- Services: package card + bento photo grid ---------- */
.pkg{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;align-items:stretch}
.pkg-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:34px 30px;border-radius:22px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.pkg-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.25;color:#fff}
.pkg-price{margin:0;display:flex;align-items:baseline;gap:10px;color:var(--accent-ink)}
.pkg-price small{font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.pkg-price b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(3.2rem,5vw,4.2rem);line-height:1}
.pkg-list{list-style:none;margin:0;padding:18px 0 0;display:grid;gap:12px;border-top:1px solid rgba(255,255,255,.14)}
.pkg-list li{display:flex;gap:12px;align-items:flex-start;color:#fff;font-weight:600;line-height:1.35}
.pkg-list svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:3}
.pkg-add{margin:0;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font-weight:600}
.pkg-add b{color:var(--accent-ink);font-family:var(--font-display);font-size:1.1rem}
.pkg-ctas{margin-top:auto;display:grid;gap:10px}
.pkg-ctas .btn{justify-content:center}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,1fr);gap:14px}
.tile{position:relative;margin:0;overflow:hidden;border-radius:18px;background:var(--bg-2) center/cover no-repeat;min-height:150px;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.tile-lg{grid-column:span 2;grid-row:span 2}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78))}
.tile figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;display:grid;gap:2px}
.tile figcaption b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.2}
.tile figcaption span{font-size:.85rem;line-height:1.35;color:#fff;opacity:.9}
.tile-lg figcaption b{font-size:1.35rem}

/* ---------- Process: milestone timeline ---------- */
.tl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.tl::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
.tl li{position:relative;display:grid;gap:8px;align-content:start}
.tl-n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--accent-ink);font-family:var(--font-display);font-style:italic;font-weight:800;font-size:1.2rem;box-shadow:0 0 0 6px var(--paper),0 12px 30px rgba(0,0,0,.18)}
.tl h3{margin:10px 0 0;font-size:1.12rem}
.tl p{margin:0;color:var(--muted)}

/* ---------- FAQ: split layout ---------- */
.faq-split{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(28px,5vw,64px);align-items:start}
.faq-side{padding-top:6px}
.faq-split .faq{margin:0;max-width:none}

/* ---------- Footer: big call to action, columns, the brand name across the bottom ---------- */
.vf{padding-top:clamp(64px,8vw,96px);overflow:hidden}
.vf .foot-cta{align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:clamp(36px,5vw,56px)}
.vf .foot-cta h2{font-size:clamp(2.2rem,5vw,4rem);max-width:12ch}
.vf .foot-cta .ctas{display:flex;gap:12px;flex-wrap:wrap}
.vf-name{position:relative;display:block;margin:clamp(24px,4vw,40px) 0 -0.06em;padding:0 var(--pad);font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(4.2rem,17vw,15rem);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;text-align:center;color:color-mix(in srgb,var(--accent) 16%,transparent);pointer-events:none;user-select:none}
.vf .foot-water{display:none}

@media (max-width:960px){
  .pkg{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .bento .tile-lg ~ .tile:last-child:nth-child(even){grid-column:span 2}
  .tl{grid-template-columns:1fr 1fr;row-gap:34px}
  .tl::before{display:none}
  .faq-split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bento{grid-auto-rows:minmax(170px,auto)}
  .tile-lg{grid-row:span 1;min-height:230px}
  .tl{grid-template-columns:1fr}
  .tl li{grid-template-columns:56px 1fr;column-gap:16px;align-items:start}
  .tl li h3,.tl li p{grid-column:2}
  .tl-n{grid-row:span 2}
  .tl h3{margin-top:4px}
  .vf-name{font-size:clamp(3.4rem,21vw,6rem)}
}