/* Loaded only on: Service detail pages. Split out of the original theme.css; the base styles stay in ../theme.css. */
/* Service detail pages (/services/[slug]) — a distinct design system reused across all
   8 service pages, only the copy changes per slug (see service-data.ts). Everything is
   scoped under .svcd, including its own color/type tokens, so it doesn't collide with the
   sitewide tokens or the /services listing page's own svc- classes. Nav/breadcrumb reuse
   the shared SiteHeader + .breadcrumb primitive per the site's convention; only the
   in-page sections below follow the supplied design. */
.svcd{
  --cream:#f3f0e7;
  --cream-2:#ece7da;
  --white:#ffffff;
  --navy:#101a2c;
  --navy-2:#16223a;
  --navy-3:#1d2b46;
  --red:#c8392c;
  --red-soft:#f8e3df;
  --ink:#101a2c;
  --ink-soft:#5b6472;
  --ink-faint:#8a92a0;
  --line:rgba(16,26,44,0.13);
  --line-dark:rgba(255,255,255,0.14);
  --serif:var(--font-playfair), serif;
  --sans:var(--font-inter), sans-serif;
  --body:var(--font-inter), sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:92px;
}
@media (max-width:760px){ .svcd{padding-top:72px;} }

.svcd h1,.svcd h2,.svcd h3,.svcd h4,.svcd p,.svcd ul{margin:0;}
.svcd img{max-width:100%;display:block;}
/* Excludes the shared SiteHeader/SiteFooter — their links (e.g. the "Let's Talk"
   button, footer nav) have their own deliberate colors that this reset would
   otherwise clobber, since it ties with their specificity and loses only on
   source order. */
.svcd a:not(header a,footer a){color:inherit;text-decoration:none;}
.svcd ul{list-style:none;padding:0;}

.svcd .wrap{max-width:1320px;margin:0 auto;padding:0 56px;}
@media (max-width:900px){ .svcd .wrap{padding:0 22px;} }

.svcd .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
.svcd .reveal.in-view{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion:reduce){ .svcd .reveal{opacity:1;transform:none;transition:none;} }

.svcd .wrap.svcd-crumb{padding-top:20px;}
.svcd-crumb{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-faint);}
.svcd-crumb a{color:var(--ink-faint);}
.svcd-crumb a:hover{color:var(--red);}
.svcd-crumb span[aria-current]{color:var(--navy);font-weight:600;}

.svcd-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-soft);}
.svcd-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--red);display:block;}
.svcd-eyebrow.on-dark{color:rgba(255,255,255,0.6);}

.svcd .btn-primary{background:var(--navy);color:var(--white);font-family:var(--sans);font-weight:600;font-size:14.5px;padding:15px 24px;border-radius:100px;display:inline-flex;align-items:center;gap:8px;transition:background .25s ease,transform .25s ease;}
.svcd .btn-primary:hover{background:var(--red);transform:translateY(-2px);}
.svcd .btn-ghost{color:var(--navy);font-family:var(--sans);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--navy);padding-bottom:3px;}
.svcd .btn-ghost:hover{color:var(--red);border-color:var(--red);}

/* ---------- hero ---------- */
.svcd-hero{padding:24px 0 40px;}
.svcd-hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:60px;align-items:start;margin-top:20px;}
.svcd-hero h1{font-family:var(--sans);font-weight:700;letter-spacing:-0.03em;font-size:clamp(40px,5.6vw,66px);line-height:1.02;color:var(--navy);margin-top:16px;}
.svcd-sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,30px);color:var(--red);margin-top:14px;line-height:1.3;}
.svcd-lede{font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:48ch;margin-top:20px;}
.svcd-hero-actions{display:flex;align-items:center;gap:28px;margin-top:30px;flex-wrap:wrap;}

.svcd .stat-rail{background:var(--navy);border-radius:18px;padding:8px;}
.svcd .stat-rail .stat{padding:26px 26px;border-bottom:1px solid var(--line-dark);display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.svcd .stat-rail .stat:last-child{border-bottom:none;}
.svcd .stat-rail .stat b{font-family:var(--sans);font-weight:800;font-size:38px;color:var(--white);white-space:nowrap;}
.svcd .stat-rail .stat span{font-family:var(--body);font-size:13px;color:rgba(255,255,255,0.56);text-align:right;line-height:1.4;}
@media (max-width:900px){ .svcd-hero-grid{grid-template-columns:1fr;gap:30px;} }

/* ---------- layout with sticky rail nav ---------- */
.svcd .wrap.svcd-layout{padding-top:60px;}
.svcd-layout{display:grid;grid-template-columns:220px 1fr;gap:60px;align-items:start;}
.svcd .rail{position:sticky;top:96px;}
.svcd .rail ul{display:flex;flex-direction:column;gap:2px;}
.svcd .rail a{
  display:flex;align-items:center;gap:12px;padding:11px 0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-faint);
  border-left:2px solid var(--line);padding-left:16px;transition:color .25s ease,border-color .25s ease;
}
.svcd .rail a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;transition:background .25s ease;}
.svcd .rail a:hover{color:var(--navy);}
.svcd .rail a.active{color:var(--red);border-color:var(--red);}
.svcd .rail a.active::before{background:var(--red);}
@media (max-width:980px){
  .svcd-layout{grid-template-columns:1fr;}
  .svcd .wrap.svcd-layout{padding-top:50px;}
  .svcd .rail{position:static;margin-bottom:20px;}
  .svcd .rail ul{flex-direction:row;flex-wrap:wrap;gap:10px;}
  .svcd .rail a{border-left:none;border-bottom:2px solid var(--line);padding:6px 0;}
}

.svcd .content > section{padding-bottom:104px;scroll-margin-top:110px;}
.svcd .content > section:last-child{padding-bottom:0;}

.svcd .section-head{max-width:680px;margin-bottom:40px;}
.svcd .section-head h2{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;color:var(--navy);font-size:clamp(26px,3vw,38px);line-height:1.1;margin-top:14px;}
.svcd .section-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red);}
.svcd .section-head p{font-family:var(--body);color:var(--ink-soft);font-size:15px;line-height:1.6;margin-top:14px;max-width:56ch;}

/* overview dark panel */
.svcd .panel-dark{background:var(--navy);color:var(--white);border-radius:20px;padding:52px;}
.svcd .panel-dark .section-head h2{color:var(--white);}
.svcd .panel-dark .section-head p{color:rgba(255,255,255,0.58);}
.svcd .feat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border-top:1px solid var(--line-dark);margin-top:44px;}
.svcd .feat{background:var(--navy);padding:26px 20px 6px;}
.svcd .feat-ic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;}
.svcd .feat-ic svg{width:18px;height:18px;stroke:var(--red);fill:none;}
.svcd .feat h4{font-family:var(--sans);font-weight:700;font-size:15px;margin-top:16px;}
.svcd .feat p{font-family:var(--body);font-size:13px;color:rgba(255,255,255,0.5);line-height:1.55;margin-top:8px;}
@media (max-width:760px){ .svcd .panel-dark{padding:32px 26px;} .svcd .feat-row{grid-template-columns:1fr 1fr;} }

/* services accordion */
.svcd .svc-list{border-top:1px solid var(--line);}
.svcd .svc{border-bottom:1px solid var(--line);}
.svcd .svc-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:22px;padding:26px 0;width:100%;text-align:left;cursor:pointer;}
.svcd .svc-num{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--red);}
.svcd .svc-title{font-family:var(--sans);font-weight:700;letter-spacing:-0.01em;font-size:clamp(20px,2.4vw,26px);color:var(--navy);transition:color .25s ease;}
.svcd .svc:hover .svc-title{color:var(--red);}
.svcd .svc-toggle{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s cubic-bezier(.2,.7,.3,1),background .25s ease,border-color .25s ease;}
.svcd .svc-toggle svg{width:12px;height:12px;stroke:var(--navy);}
.svcd .svc:hover .svc-toggle{border-color:var(--red);}
.svcd .svc.open .svc-toggle{background:var(--red);border-color:var(--red);transform:rotate(135deg);}
.svcd .svc.open .svc-toggle svg{stroke:var(--white);}
.svcd .svc.open .svc-title{color:var(--red);}
.svcd .svc-panel{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.3,1);}
.svcd .svc.open .svc-panel{max-height:200px;}
.svcd .svc-panel p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:60ch;padding:0 0 30px 74px;}
@media (max-width:600px){ .svcd .svc-panel p{padding-left:0;} .svcd .svc-row{grid-template-columns:32px 1fr auto;gap:14px;} }

/* vertical timeline */
.svcd-timeline{position:relative;padding-left:38px;}
.svcd-timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:1.5px;background:var(--line);}
.svcd .tl-step{position:relative;padding-bottom:44px;}
.svcd .tl-step:last-child{padding-bottom:0;}
.svcd .tl-dot{position:absolute;left:-38px;top:0;width:28px;height:28px;border-radius:50%;background:var(--white);border:1.5px solid var(--red);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:11px;color:var(--red);}
.svcd .tl-step h4{font-family:var(--sans);font-weight:700;font-size:20px;color:var(--navy);letter-spacing:-0.01em;}
.svcd .tl-step p{font-family:var(--body);font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-top:8px;max-width:56ch;}

/* tech partners */
.svcd .stack-row{display:flex;flex-wrap:wrap;gap:12px;}
.svcd .stack-row span{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:11px 20px;}

/* stats strip */
.svcd .stats-strip{background:var(--navy-3);border-radius:18px;padding:46px 10px;}
.svcd .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);}
.svcd .stats-grid div{border-left:1px solid var(--line-dark);padding:0 22px;text-align:left;}
.svcd .stats-grid b{font-family:var(--sans);font-weight:800;font-size:clamp(24px,2.6vw,34px);color:var(--white);display:block;}
.svcd .stats-grid span{font-family:var(--body);font-size:12.5px;color:rgba(255,255,255,0.52);line-height:1.4;display:block;margin-top:8px;}
@media (max-width:760px){ .svcd .stats-grid{grid-template-columns:1fr 1fr;row-gap:24px;} }

/* case study */
.svcd .case{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;align-content:start;min-height:0;}
.svcd .case .tag{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--red);background:var(--red-soft);display:inline-block;padding:6px 12px;border-radius:100px;}
.svcd .case h3{font-family:var(--sans);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:-0.02em;color:var(--navy);margin-top:16px;line-height:1.25;}
.svcd .case p{font-family:var(--body);font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-top:12px;}
.svcd .case-stats{display:flex;flex-direction:column;gap:16px;}
.svcd .case-stats div{border-left:2px solid var(--red);padding-left:16px;}
.svcd .case-stats b{font-family:var(--sans);font-weight:800;font-size:28px;color:var(--navy);display:block;}
.svcd .case-stats span{font-family:var(--body);font-size:12.5px;color:var(--ink-faint);}
@media (max-width:760px){ .svcd .case{grid-template-columns:1fr;padding:30px;} }

/* why thomsun */
.svcd .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.svcd .why-item{display:flex;gap:16px;padding:24px 0;border-top:1px solid var(--line);}
.svcd .why-item b{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--navy);display:block;}
.svcd .why-item p{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:6px;}
.svcd .why-num{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--red);flex-shrink:0;}
@media (max-width:700px){ .svcd .why-grid{grid-template-columns:1fr;} }

/* faq */
.svcd .faq-list{border-top:1px solid var(--line);}
.svcd .faq-item{border-bottom:1px solid var(--line);}
.svcd .faq-q{display:flex;justify-content:space-between;align-items:center;padding:24px 0;gap:20px;width:100%;text-align:left;cursor:pointer;}
.svcd .faq-q h4{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--navy);}
.svcd .faq-plus{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .35s ease,background .25s ease,border-color .25s ease;}
.svcd .faq-plus svg{width:11px;height:11px;stroke:var(--navy);}
.svcd .faq-item.open .faq-plus{background:var(--red);border-color:var(--red);transform:rotate(135deg);}
.svcd .faq-item.open .faq-plus svg{stroke:var(--white);}
.svcd .faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1);}
.svcd .faq-item.open .faq-a{max-height:200px;}
.svcd .faq-a p{font-family:var(--body);font-size:14px;color:var(--ink-soft);line-height:1.6;padding-bottom:24px;max-width:62ch;}

/* cta */
.svcd .cta-box{background:var(--cream-2);border-radius:20px;padding:56px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;position:relative;overflow:hidden;}
.svcd .dots{position:absolute;left:-10px;top:-10px;width:120px;height:120px;opacity:0.5;}
.svcd .cta-box h2{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;font-size:clamp(28px,3.4vw,40px);color:var(--navy);line-height:1.1;}
.svcd .cta-box h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red);}
.svcd .cta-right p.label{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--navy);}
.svcd .cta-right p.sub{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}
.svcd .cta-right{border-left:1px solid var(--line);padding-left:40px;}
.svcd .cta-contact{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.svcd .cta-contact a,.svcd .cta-contact span{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);}
.svcd .cta-contact a:hover{color:var(--red);}
.svcd .cta-box .btn-primary{margin-top:22px;}
@media (max-width:800px){ .svcd .cta-box{grid-template-columns:1fr;padding:34px;} .svcd .cta-right{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:26px;} }

/* The shared SiteFooter is used as-is on this page (see ServiceDetail.tsx) rather than
   a page-specific footer, but it renders inside .svcd, which redefines --red/--ink to
   this design's own palette — reset those back to the sitewide values so the footer
   matches its appearance on every other page instead of picking up this page's colors. */
.svcd footer{--red:#df2d31;--ink:#17202e;}

/* Above-the-fold hero must paint without waiting for JS (reveal-on-scroll would keep it at opacity:0 until main.js runs). */
.hero .reveal{opacity:1;transform:none}