/* ============================================================
   Suria Professional Corporation — design system "Indigo Ledger"
   Brand-derived: sky #3ab5e5 + violet #453a8c from the spc logotype.
   Cool paper light pages, deep indigo dark bands, sky accent.
   Bricolage Grotesque display / Instrument Sans body / Spline Sans Mono figures.
   Buttons: pill + nested arrow chip. Motion: staggered blur-fade reveals.
   ============================================================ */
:root{
  --paper:      #f6f8fc;
  --paper-raise:#ffffff;
  --paper-deep: #e9eef7;
  --indigo:     #1c1748;
  --indigo-deep:#120e33;
  --violet:     #453a8c;
  --ink:        #191631;
  --ink-soft:   #565d78;
  --sky:        #3ab5e5;
  --sky-deep:   #1076a6;
  --line:       #d9e0ee;
  --line-dark:  rgba(246,248,252,.14);
  --paper-on-dark: rgba(246,248,252,.92);
  --soft-on-dark:  rgba(246,248,252,.62);
  --faint-on-dark: rgba(246,248,252,.4);
  --shadow-tint: 28,23,72;
  --ease: cubic-bezier(.22,1,.36,1);
  --font-display:'Bricolage Grotesque',Georgia,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;}
ul{list-style:none;}
::selection{background:var(--violet);color:#fff;}

/* film grain — fixed, non-interactive */
body::after{content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");}

/* skip link + focus */
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--indigo);color:#fff;padding:.8rem 1.4rem;border-radius:0 0 10px 0;font-size:.85rem;}
.skip:focus{left:0;}
:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px;border-radius:2px;}

/* layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 2.5rem;}
@media(max-width:640px){.wrap{padding:0 1.25rem;}}

/* typography */
.disp{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.025em;font-variation-settings:'opsz' 96;}
.disp em{font-style:normal;color:var(--sky-deep);}
.band-dark .disp em{color:var(--sky);}
.h-page{font-size:clamp(2.9rem,6.4vw,5.2rem);}
.h-sec{font-size:clamp(2rem,3.8vw,3rem);}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sky-deep);display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;}
.eyebrow::after{content:'';height:1px;width:44px;background:var(--sky-deep);opacity:.45;}
.band-dark .eyebrow{color:var(--sky);}
.band-dark .eyebrow::after{background:var(--sky);}
.lede{font-size:1.08rem;line-height:1.8;color:var(--ink-soft);max-width:46ch;}
.band-dark .lede{color:var(--soft-on-dark);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:2rem;}
.crumb a{color:inherit;text-decoration:none;transition:color .2s;}
.crumb a:hover{color:var(--sky-deep);}
.crumb b{color:var(--sky-deep);font-weight:400;}

/* bands */
.band{padding:7.5rem 0;}
.band-line{border-top:1px solid var(--line);}
.band-dark{background:var(--indigo);color:var(--paper-on-dark);position:relative;overflow:hidden;}
.band-dark .glow-tl{position:absolute;top:-200px;left:-160px;width:620px;height:620px;background:radial-gradient(ellipse,rgba(69,58,140,.5) 0%,transparent 65%);pointer-events:none;}
.band-dark .glow-br{position:absolute;bottom:-220px;right:-160px;width:620px;height:620px;background:radial-gradient(ellipse,rgba(58,181,229,.14) 0%,transparent 65%);pointer-events:none;}
.band-deep{background:var(--paper-deep);}
@media(max-width:767px){.band{padding:4.5rem 0;}}

/* nav — floating pill once scrolled */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 0;}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 1.4rem;border-radius:99px;border:1px solid transparent;transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);}
#nav.scrolled .nav-in{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 18px 40px -22px rgba(var(--shadow-tint),.35);}
/* brand — official spc logotype mark */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.brand-tile{display:flex;align-items:center;flex-shrink:0;}
.brand-tile img{height:34px;width:auto;display:block;}
.brand-name{color:var(--ink);font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;}
.brand-name small{display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25rem;font-weight:400;}
#dsk{display:none;align-items:center;gap:1.9rem;}
.nl{font-size:.9rem;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .2s;position:relative;padding:.3rem 0;}
.nl:hover{color:var(--ink);}
.nl.act{color:var(--ink);}
.nl.act::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--sky);}
@media(min-width:1024px){#dsk{display:flex;}#mbb{display:none;}}

/* mobile menu — full overlay, staggered reveal */
#mbb{background:none;border:none;width:42px;height:42px;position:relative;cursor:pointer;z-index:220;}
#mbb span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),background .3s;}
#mbb span:nth-child(1){top:15px;}
#mbb span:nth-child(2){top:25px;}
#mbb.open span{background:var(--paper-on-dark);}
#mbb.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
#mbb.open span:nth-child(2){transform:translateY(-5px) rotate(-45deg);}
#mmenu{position:fixed;inset:0;z-index:210;background:rgba(18,14,51,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;padding:0 2.5rem;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s;}
#mmenu.open{visibility:visible;opacity:1;transition:opacity .5s var(--ease);}
.ml{font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);font-weight:600;color:var(--paper-on-dark);text-decoration:none;padding:.55rem 0;display:flex;align-items:baseline;gap:1.2rem;opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .25s;}
.ml:hover{color:var(--sky);}
.ml .mono{font-size:.72rem;color:var(--faint-on-dark);}
#mmenu.open .ml{opacity:1;transform:none;}
#mmenu.open .ml:nth-child(1){transition-delay:.08s}#mmenu.open .ml:nth-child(2){transition-delay:.14s}
#mmenu.open .ml:nth-child(3){transition-delay:.2s}#mmenu.open .ml:nth-child(4){transition-delay:.26s}
#mmenu.open .ml:nth-child(5){transition-delay:.32s}#mmenu.open .ml:nth-child(6){transition-delay:.38s}
.ml.cta{margin-top:1.6rem;font-size:1.05rem;font-family:var(--font-body);font-weight:600;color:var(--indigo-deep);background:var(--sky);border-radius:99px;padding:1rem 1.8rem;display:inline-flex;align-self:flex-start;gap:.7rem;}

/* buttons — pill + nested arrow chip */
.btn{display:inline-flex;align-items:center;gap:.85rem;border-radius:99px;padding:.55rem .6rem .55rem 1.6rem;font-family:var(--font-body);font-size:.92rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.btn:active{transform:scale(.97);}
.btn .chip{width:34px;height:34px;border-radius:99px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .45s var(--ease),background .3s;}
.btn:hover .chip{transform:translateX(3px);}
.btn .chip svg{width:14px;height:14px;stroke-width:2;}
.btn-indigo{background:var(--indigo);color:#fff;}
.btn-indigo .chip{background:rgba(255,255,255,.14);color:var(--sky);}
.btn-indigo:hover{background:var(--indigo-deep);box-shadow:0 14px 30px -12px rgba(var(--shadow-tint),.5);}
.btn-sky{background:var(--sky);color:var(--indigo-deep);}
.btn-sky .chip{background:rgba(18,14,51,.16);color:var(--indigo-deep);}
.btn-sky:hover{background:#5cc4ec;box-shadow:0 14px 30px -12px rgba(58,181,229,.4);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost .chip{background:var(--paper-deep);color:var(--sky-deep);}
.btn-ghost:hover{border-color:var(--sky-deep);}
.band-dark .btn-ghost{color:var(--paper-on-dark);border-color:var(--line-dark);}
.band-dark .btn-ghost .chip{background:rgba(246,248,252,.1);color:var(--sky);}
.txt-link{font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:color .2s,border-color .2s;}
.txt-link:hover{color:var(--sky-deep);border-color:var(--sky-deep);}
.band-dark .txt-link{color:var(--paper-on-dark);border-color:var(--line-dark);}
.band-dark .txt-link:hover{color:var(--sky);border-color:var(--sky);}

/* scroll reveals — staggered blur-fade */
.rv{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.rv.on{opacity:1;transform:none;filter:none;}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* page hero (inner pages) */
.phero{padding:11.5rem 0 5.5rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.phero .glow{position:absolute;top:-180px;right:-140px;width:600px;height:600px;background:radial-gradient(ellipse,rgba(69,58,140,.08) 0%,rgba(58,181,229,.05) 40%,transparent 65%);pointer-events:none;}
@media(max-width:767px){.phero{padding:9rem 0 3.5rem;}}

/* stat band */
.figs-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.fig-cell{padding:0 2rem;border-right:1px solid var(--line);}
.fig-cell:first-child{padding-left:0;}
.fig-cell:last-child{border-right:none;}
.fig-val{font-family:var(--font-mono);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:500;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);}
.fig-val sup{font-size:.5em;color:var(--sky-deep);}
.fig-lbl{margin-top:.9rem;font-size:.8rem;color:var(--ink-soft);line-height:1.5;}
@media(max-width:767px){.figs-grid{grid-template-columns:1fr 1fr;gap:2.6rem 0;}.fig-cell{padding:0 1.2rem;}.fig-cell:nth-child(odd){padding-left:0;}.fig-cell:nth-child(2n){border-right:none;}}

/* editorial service rows */
.svc-row{display:grid;grid-template-columns:110px 1fr 90px;gap:2.5rem;align-items:baseline;padding:2.6rem 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:background .3s var(--ease);}
.svc-row:last-of-type{border-bottom:1px solid var(--line);}
.svc-row .num{font-family:var(--font-mono);font-size:.78rem;color:var(--sky-deep);}
.svc-row h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin-bottom:.55rem;transition:color .25s;}
.svc-row p{font-size:.95rem;color:var(--ink-soft);max-width:56ch;}
.svc-row .go{justify-self:end;font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft);transition:transform .4s var(--ease),color .25s;}
.svc-row:hover h3{color:var(--sky-deep);}
.svc-row:hover .go{transform:translateX(6px);color:var(--sky-deep);}
@media(max-width:767px){.svc-row{grid-template-columns:1fr;gap:.6rem;padding:2rem 0;}.svc-row .go{display:none;}}

/* zig-zag detail sections (services page) */
.zig{display:grid;grid-template-columns:5fr 6fr;gap:5rem;align-items:start;padding:5.5rem 0;border-top:1px solid var(--line);scroll-margin-top:100px;}
.zig:first-of-type{border-top:none;}
.zig.flip .zig-a{order:2;}
.zig.flip .zig-b{order:1;}
@media(max-width:1023px){.zig{grid-template-columns:1fr;gap:2.5rem;}.zig.flip .zig-a{order:1;}.zig.flip .zig-b{order:2;}}
.deliv{margin-top:2rem;}
.deliv li{padding:.95rem 0;border-top:1px solid var(--line);display:flex;gap:1.1rem;align-items:baseline;font-size:.94rem;color:var(--ink-soft);}
.deliv li:last-child{border-bottom:1px solid var(--line);}
.deliv li::before{content:'—';color:var(--sky-deep);flex-shrink:0;font-family:var(--font-mono);font-size:.8rem;}
.deliv li b{color:var(--ink);font-weight:600;}

/* forms */
.ff{width:100%;background:var(--paper-raise);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;color:var(--ink);font-family:var(--font-body);font-size:.94rem;outline:none;transition:border-color .25s,box-shadow .25s;}
.ff::placeholder{color:rgba(86,93,120,.5);}
.ff:focus{border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(58,181,229,.16);}
.ff.err{border-color:#c04a4a;}
.flabel{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.5rem;}
.fhint{font-size:.78rem;color:#c04a4a;margin-top:.4rem;display:none;}
.fhint.show{display:block;}
.band-dark .ff{background:rgba(246,248,252,.06);border-color:var(--line-dark);color:var(--paper-on-dark);}
.band-dark .ff::placeholder{color:var(--faint-on-dark);}
.band-dark .ff:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(58,181,229,.18);}
.band-dark .flabel{color:var(--paper-on-dark);}
.band-dark .fhint{color:#e89090;}
select.ff option{background:var(--paper-raise);color:var(--ink);}
.band-dark select.ff option{background:var(--indigo-deep);color:var(--paper-on-dark);}

/* estimator */
.est-card{background:rgba(246,248,252,.05);border:1px solid var(--line-dark);border-radius:18px;padding:2.6rem;position:relative;}
.est-card .cap{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint-on-dark);margin-bottom:1.1rem;}
.est-fig{display:flex;align-items:baseline;gap:.5rem;margin-bottom:2rem;}
.est-fig .n{font-family:var(--font-mono);font-size:3.3rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--sky);line-height:1;}
.est-fig .per{color:var(--faint-on-dark);font-size:.9rem;}
.est-line{display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);padding:.85rem 0;font-size:.86rem;color:var(--soft-on-dark);}
.est-note{margin-top:1.2rem;font-size:.72rem;color:var(--faint-on-dark);line-height:1.6;}
.slider{width:100%;height:3px;background:rgba(246,248,252,.18);border-radius:99px;appearance:none;-webkit-appearance:none;cursor:pointer;outline-offset:6px;}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:20px;width:20px;border-radius:99px;background:var(--sky);border:2px solid var(--indigo);box-shadow:0 0 0 1px var(--sky);cursor:pointer;}
.slider::-moz-range-thumb{height:20px;width:20px;border-radius:99px;background:var(--sky);border:2px solid var(--indigo);box-shadow:0 0 0 1px var(--sky);cursor:pointer;}
.freq-row{display:flex;gap:.7rem;flex-wrap:wrap;}
.freq{padding:.55rem 1.2rem;font-size:.85rem;font-weight:500;border-radius:99px;border:1px solid var(--line-dark);background:none;color:var(--soft-on-dark);cursor:pointer;font-family:var(--font-body);transition:all .3s var(--ease);}
.freq:hover{border-color:rgba(246,248,252,.4);}
.freq.on{background:var(--sky);color:var(--indigo-deep);border-color:var(--sky);font-weight:600;}

/* Q&A editorial list (no accordion) */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem 4rem;}
@media(max-width:1023px){.qa-grid{grid-template-columns:1fr;gap:2.6rem;}}
.qa h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.3;margin-bottom:.75rem;}
.qa h3::before{content:'Q — ';color:var(--sky-deep);font-family:var(--font-mono);font-size:.78rem;font-weight:400;vertical-align:2px;letter-spacing:.1em;}
.qa p{font-size:.93rem;color:var(--ink-soft);}

/* WhatsApp float */
#wa{position:fixed;bottom:1.6rem;right:1.6rem;z-index:200;width:54px;height:54px;border-radius:99px;background:var(--indigo);border:1px solid rgba(58,181,229,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -10px rgba(var(--shadow-tint),.55);transition:transform .35s var(--ease),background .3s;text-decoration:none;}
#wa:hover{transform:translateY(-4px);background:var(--indigo-deep);}
#wa svg{width:24px;height:24px;fill:var(--sky);}

/* cookie banner (PIPEDA) */
#ck{position:fixed;bottom:1.4rem;left:1.4rem;z-index:300;max-width:420px;background:var(--indigo-deep);border:1px solid var(--line-dark);border-radius:16px;padding:1.5rem 1.6rem;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;box-shadow:0 30px 60px -20px rgba(var(--shadow-tint),.6);}
#ck.show{opacity:1;transform:none;pointer-events:auto;}
#ck p{color:var(--soft-on-dark);font-size:.8rem;line-height:1.7;margin-bottom:1.1rem;}
#ck a{color:var(--sky);}
#ck .ck-btns{display:flex;gap:.7rem;}
.ck-ok{background:var(--sky);color:var(--indigo-deep);border:none;padding:.6rem 1.4rem;border-radius:99px;font-size:.82rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background .25s;}
.ck-ok:hover{background:#5cc4ec;}
.ck-no{background:none;color:var(--soft-on-dark);border:1px solid var(--line-dark);padding:.6rem 1.4rem;border-radius:99px;font-size:.82rem;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:border-color .25s,color .25s;}
.ck-no:hover{border-color:rgba(246,248,252,.5);color:var(--paper-on-dark);}
@media(max-width:560px){#ck{left:1rem;right:1rem;max-width:none;}}

/* footer */
footer{background:var(--indigo);color:var(--soft-on-dark);padding:5rem 0 2.2rem;position:relative;overflow:hidden;}
footer::before{content:'';position:absolute;top:-200px;right:-160px;width:560px;height:560px;background:radial-gradient(ellipse,rgba(69,58,140,.55) 0%,transparent 65%);pointer-events:none;}
footer .wrap{position:relative;}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;padding-bottom:3.2rem;border-bottom:1px solid var(--line-dark);margin-bottom:2rem;}
@media(max-width:767px){.ft-grid{grid-template-columns:1fr;}}
footer .brand-name{color:var(--paper-on-dark);}
footer .brand-name small{color:var(--faint-on-dark);}
footer .brand-tile{border-color:transparent;}
.ft-h{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint-on-dark);margin-bottom:1.3rem;font-weight:500;}
.ft-l{color:var(--soft-on-dark);font-size:.88rem;text-decoration:none;transition:color .2s;}
.ft-l:hover{color:var(--sky);}
.ft-t{font-size:.88rem;line-height:1.8;}
.ft-col ul{display:flex;flex-direction:column;gap:.65rem;}
.ft-b{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;}
.ft-c{color:var(--faint-on-dark);font-size:.76rem;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{transition:none;opacity:1;transform:none;filter:none;}
  #mmenu,.ml,#mbb span,.btn,.btn .chip,.svc-row .go{transition:none;}
}