/* =====================================================================
   NON MAJORITY DIGITAL — service landing pages (/websites/, /crm/ …)
   Crawlable long-form pages that share the base design system.
   ===================================================================== */

body.svc{overflow-x:hidden}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* header */
.svc .site-head{position:fixed}
.svc-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);
  background:color-mix(in srgb,var(--surface) 55%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.svc-nav a{position:relative;height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);transition:color .3s,background .3s}
.svc-nav a:hover{color:var(--ink)}
.svc-nav a[aria-current="page"]{color:var(--btn-fg);background:var(--btn-bg)}

main.svc-main{position:relative;z-index:2}

/* hero */
.s-hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px clamp(30px,5vw,80px);
  padding-top:calc(var(--head-h) + 40px);padding-bottom:70px}
.s-hero .kicker{margin-bottom:26px}
.svc-h1{font-size:clamp(2.8rem,6.4vw,6.4rem);max-width:13ch}
.svc-h1 .serif{display:block;font-weight:310}
.s-hero .lede{margin-top:28px;max-width:54ch}
.s-hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.s-meta{display:flex;gap:0;margin-top:44px;border-top:1px solid var(--line-2);max-width:620px}
.s-meta div{flex:1;padding:14px 16px 0 0;font:500 10.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.s-meta div b{display:block;color:var(--ink);font-weight:500;margin-top:4px}

/* service orbit illustration */
.s-orbit{position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center}
.s-orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s-orbit .o-ring{fill:none;stroke:var(--line-2)}
.s-orbit .o-dash{fill:none;stroke:var(--line-3);stroke-dasharray:2 9;transform-origin:250px 250px;animation:spin 80s linear infinite}
.s-orbit .o-dash.rev{animation-direction:reverse;animation-duration:120s}
.s-orbit .o-ticks{fill:none;stroke:var(--line-3);stroke-width:7;stroke-dasharray:1 12.1}
.s-orbit .o-spoke{stroke:var(--line-2);stroke-dasharray:3 6}
.s-orbit .o-spoke.on{stroke:var(--sage);stroke-dasharray:4 6;animation:dash 1.1s linear infinite;filter:drop-shadow(0 0 4px var(--sage-glow))}
.s-orbit .o-node{fill:var(--surface-2);stroke:var(--line-3)}
.s-orbit .o-node.on{fill:var(--sage);stroke:var(--sage-hi);filter:drop-shadow(0 0 10px var(--sage-glow))}
.s-orbit .o-core{fill:var(--surface-2);stroke:var(--sage)}
.s-orbit .o-pulse{fill:var(--sage-hi);filter:drop-shadow(0 0 6px var(--sage))}
.s-orbit text{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
.s-orbit text.on{fill:var(--ink)}
.s-orbit .o-core-t{font-family:var(--f-sans);font-size:20px;font-weight:600;letter-spacing:.04em;fill:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-20}}
.s-orbit .o-halo{fill:none;stroke:color-mix(in srgb,var(--sage) 45%,transparent);transform-box:fill-box;transform-origin:center;animation:halo 3.4s var(--ease) infinite}
@keyframes halo{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* sections */
.s-sec{position:relative;padding:clamp(80px,13vh,150px) 0;border-top:1px solid var(--line)}
.s-sec .kicker{margin-bottom:24px}
.svc-h2{font-size:clamp(2rem,4.2vw,4rem);max-width:20ch}
.svc-h2 .serif{font-weight:320}
.s-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 60px;align-items:end}
.s-head .lede{padding-bottom:.35em}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,7vh,70px)}
.svc-card{padding:26px 22px 24px;min-height:230px;display:flex;flex-direction:column;gap:12px}
.svc-card .ix{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-4);margin-bottom:clamp(30px,5vh,52px)}
.svc-card h3{font-size:1.14rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.svc-card p{color:var(--ink-2);font-size:.95rem;line-height:1.55}

.s-incl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px clamp(30px,6vw,100px);align-items:start}
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}
.check-list li{position:relative;padding:16px 0 16px 30px;font-size:1rem;color:var(--ink);border-bottom:1px solid var(--line);line-height:1.4}
.check-list li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 60%,transparent);
  background:var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6.1 9.2 10 5' fill='none' stroke='%238FBC8F' stroke-width='1.4'/%3E%3C/svg%3E") center/100% no-repeat}
.best-for{margin-top:30px;padding:20px 22px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-2);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink-2);font-size:1rem}
.best-for b{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.s-incl .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* NONMAJORITY CRM: software vs. custom build */
.s-alt{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.95rem;color:var(--ink-3)}
.crm-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(40px,7vh,70px)}
.crm-path{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,40px)}
.crm-path .ix{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.crm-path.lead .ix{color:var(--sage)}
.crm-path h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:600;letter-spacing:-.04em;line-height:1.02;margin-top:clamp(18px,4vh,40px)}
.crm-path p{color:var(--ink-2);font-size:1rem;max-width:48ch}
.crm-path .fit{font-size:.92rem;color:var(--ink-3)}
.crm-path .fit b{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.crm-path .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}

/* related */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.rel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:24px 22px;min-height:190px;border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-2);background:color-mix(in srgb,var(--surface) 55%,transparent);overflow:hidden;transition:box-shadow .4s,transform .7s var(--ease)}
.rel::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--sage-soft),transparent 65%);opacity:0;transition:opacity .4s}
.rel:hover{box-shadow:inset 0 0 0 1px var(--sage);transform:translateY(-4px)}
.rel:hover::before{opacity:1}
.rel .ix{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.rel .lbl{position:relative;font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:550;letter-spacing:-.03em;line-height:1.2;color:var(--ink);padding-right:40px}
.rel .go{position:absolute;right:20px;bottom:22px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--ink-2);transition:all .4s var(--ease)}
.rel:hover .go{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none;transform:rotate(-45deg)}

/* closing CTA band */
.s-cta{padding:clamp(80px,14vh,160px) 0;border-top:1px solid var(--line);text-align:left}
.s-cta .display{font-size:clamp(2.4rem,6vw,6rem)}
.s-cta .display .serif{font-weight:300}
.s-cta .row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.s-cta .actions{display:flex;gap:10px;flex-wrap:wrap}
.s-cta .crm-link{flex-basis:100%;justify-content:center}
/* two buttons on one row with the CRM link under them, still beside the headline */
@media (min-width:641px){
  .s-cta .actions{display:grid;grid-template-columns:repeat(2,auto);justify-content:start}
  .s-cta .crm-link{grid-column:1/-1;justify-self:start}
  .s-cta .actions .btn>span{flex:1}
}

/* footer */
.svc-foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:36px 0 40px}
.svc-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.svc-foot .f-brand{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.svc-foot .crosslinks{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.svc-foot .crosslinks a{padding:6px 0;transition:color .3s}
.svc-foot .crosslinks a:hover{color:var(--sage-hi)}
.svc-foot .crosslinks .foot-crm::after{content:"";display:inline-block;width:.8em;height:.8em;background:currentColor;-webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;margin-left:.35em;color:var(--sage)}
.svc-foot .contact{grid-column:1/-1;display:flex;gap:10px 24px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font:500 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}
.svc-foot .contact a:hover{color:var(--ink)}

@media (max-width:1100px){
  .svc-nav{display:none}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .s-hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:calc(var(--head-h) + 50px)}
  .s-orbit{max-width:360px;order:-1;margin:0 auto -10px;width:78%}
  .s-head,.s-incl{grid-template-columns:minmax(0,1fr)}
  .related,.crm-paths{grid-template-columns:minmax(0,1fr)}
  .rel{min-height:130px}
}
@media (max-width:640px){
  :root{--head-h:64px}
  .brand-word small{display:none}
  /* phones: the CRM button takes the header slot; Book a call stays in the page */
  .head-cta{display:none}
  .card-grid,.check-list{grid-template-columns:minmax(0,1fr)}
  .svc-card{min-height:0}
  .s-meta{flex-direction:column}
  .s-meta div{padding:12px 0;border-bottom:1px solid var(--line)}
  .actions .btn{flex:1 1 auto}
  .actions .btn>span{flex:1;justify-content:center}
  .svc-foot .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (hover:none){ .rel::before{display:none} }