/* ============================================================
   SyncReach — shared site styles (inner pages)
   Linked by services.html and about.html. index.html keeps its
   own inline copy. Tokens mirror the SyncReach design system.
   ============================================================ */
:root{
  --brand-red:#840902; --red-600:#6E0701; --red-700:#5E0701; --red-50:#F8E7E3; --red-100:#F1CFC8;
  --brand-navy:#252740; --brand-ink:#02020E; --brand-cream:#FFFDF6;
  --slate-300:#9A9FB8; --slate-400:#7A80A0; --stone-300:#E4DECF;
  --surface-canvas:#FAF7EE; --surface-default:#FFFDF6; --surface-raised:#FFFFFF; --surface-sunken:#F1EDE0; --surface-inverse:#02020E;
  --text-strong:#02020E; --text-default:#14130E; --text-muted:#5B6183; --text-subtle:#6B6F88; --text-faint:#6F6A57;
  --text-accent:#840902; --text-on-accent:#FFFDF6; --text-on-inverse:#EDEAE0; --text-on-inverse-muted:#9A9FB8; --text-on-inverse-accent:#E5483D;
  --border-soft:#EAE5D7; --border-default:#D9D3C3; --border-strong:#B8B2A0; --border-inverse-strong:#3A3C52;
  --success:#2E6049;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --font-serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-pill:999px;
  --shadow-raised:0 1px 1px rgba(20,19,14,0.04),0 1px 0 rgba(20,19,14,0.03);
  --shadow-overlay:0 12px 32px -8px rgba(12,13,23,0.24),0 3px 8px rgba(12,13,23,0.12);
  --ease:cubic-bezier(0.2,0,0,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--surface-canvas);color:var(--text-default);font-family:var(--font-sans);font-size:16px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
a{color:var(--text-accent);text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--brand-red);outline-offset:2px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;font-family:var(--font-sans);font-weight:600;font-size:15px;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap;transition:background var(--ease) .12s,border-color var(--ease) .12s,color var(--ease) .12s;}
.btn svg{width:17px;height:17px;}
.btn--sm{height:38px;padding:0 14px;font-size:14px;}
.btn--primary{background:var(--brand-red);color:var(--text-on-accent);border-color:var(--brand-red);}
.btn--primary:hover{background:var(--red-600);border-color:var(--red-600);}
.btn--secondary{background:var(--surface-default);color:var(--text-strong);border-color:var(--border-strong);}
.btn--secondary:hover{border-color:var(--brand-red);color:var(--brand-red);}
.btn--ghost{background:transparent;color:var(--text-default);}
.btn--ghost:hover{color:var(--text-accent);}
.btn--light{background:var(--brand-cream);color:var(--brand-red);border-color:var(--brand-cream);}
.btn--light:hover{background:#fff;}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-accent);}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand-red);}
.dark .eyebrow{color:var(--text-on-inverse-accent);}
.dark .eyebrow::before{background:var(--text-on-inverse-accent);}

/* nav */
.nav{display:flex;align-items:center;gap:26px;padding:16px 24px;max-width:1200px;margin:0 auto;border-bottom:1px solid var(--border-soft);}
.brand{display:flex;align-items:center;gap:10px;}
.brand__mark{width:28px;height:28px;color:var(--brand-red);flex:none;}
.brand__name{display:flex;flex-direction:column;line-height:1;}
.brand__name b{font-family:var(--font-sans);font-weight:700;font-size:15px;color:var(--text-strong);}
.brand__name span{font-family:var(--font-serif);font-size:9px;letter-spacing:4px;color:var(--text-muted);margin-top:2px;}
.nav__links{display:flex;gap:22px;margin-left:10px;}
.nav__links a{font-size:14px;color:var(--text-muted);}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text-accent);}
.nav__sp{flex:1;}
.nav__right{display:flex;align-items:center;gap:10px;}

/* page header */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft);}
.phead__motif{position:absolute;top:-160px;right:-160px;width:600px;height:600px;color:var(--stone-300);opacity:0.5;pointer-events:none;}
.phead__in{position:relative;max-width:1200px;margin:0 auto;padding:60px 24px 54px;}
.phead h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(34px,5vw,50px);line-height:1.06;letter-spacing:-0.025em;color:var(--text-strong);margin:18px 0 0;max-width:780px;}
.phead p{font-size:17px;color:var(--text-muted);margin:18px 0 0;max-width:640px;}

/* generic section */
.sec{padding:72px 24px;max-width:1200px;margin:0 auto;}
.sec--tight{padding:56px 24px;}
.sec__head{max-width:680px;}
.sec__title{font-family:var(--font-sans);font-weight:700;font-size:clamp(26px,4vw,36px);letter-spacing:-0.018em;color:var(--text-strong);margin:12px 0 0;line-height:1.12;}
.sec__sub{font-size:16px;color:var(--text-muted);margin:14px 0 0;}

/* photo placeholder */
.photo{position:relative;overflow:hidden;background:var(--brand-navy);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
.photo__motif{position:absolute;inset:0;color:var(--slate-400);opacity:0.28;display:flex;align-items:center;justify-content:center;}
.photo__motif svg{width:130%;height:130%;}
.photo__tint{position:absolute;inset:0;background:var(--brand-red);opacity:0.14;mix-blend-mode:multiply;}
.photo__cap{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--slate-300);font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;text-align:center;padding:0 12px;}
.photo__cap svg{width:22px;height:22px;}

/* dark band */
.dark{background:var(--brand-navy);position:relative;overflow:hidden;}
.dark__motif{position:absolute;top:50%;right:-180px;transform:translateY(-50%);width:560px;height:560px;color:var(--slate-400);opacity:0.16;}
.dark__in{position:relative;max-width:1200px;margin:0 auto;padding:72px 24px;}
.dark__t{font-family:var(--font-sans);font-weight:700;font-size:clamp(26px,4vw,34px);line-height:1.12;letter-spacing:-0.015em;color:var(--brand-cream);margin:12px 0 0;}
.dark__p{font-size:16px;color:var(--slate-300);margin:14px 0 0;max-width:640px;}

/* CTA band */
.ctasec{max-width:1200px;margin:0 auto;padding:72px 24px;}
.band{position:relative;overflow:hidden;background:var(--surface-inverse);border-radius:var(--radius-md);padding:54px 44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.band__motif{position:absolute;top:-120px;right:-100px;width:420px;height:420px;color:var(--border-inverse-strong);opacity:0.5;}
.band__t{position:relative;font-family:var(--font-sans);font-weight:700;font-size:clamp(26px,4vw,32px);letter-spacing:-0.015em;color:var(--text-on-inverse);margin:0;max-width:560px;line-height:1.12;}
.band__s{position:relative;font-size:15px;color:var(--text-on-inverse-muted);margin:12px 0 0;}
.band__r{position:relative;}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:28px 24px;border-top:1px solid var(--border-soft);gap:16px;flex-wrap:wrap;}
.foot__links{display:flex;gap:20px;flex-wrap:wrap;}
.foot__links a{font-size:13px;color:var(--text-muted);}
.foot__links a:hover{color:var(--text-accent);}
.foot__c{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}

/* responsive shared */
@media (max-width:860px){
  .nav__links{display:none;}
  .band{padding:36px 28px;}
}
@media (max-width:520px){
  .nav__right .btn--ghost{display:none;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }