/* =========================================================================
   Decades Sales Partners — shared design system
   Clean & minimal · royal blue + bright green · serif display / sans body
   ========================================================================= */

:root{
  /* neutrals — cool, restrained */
  --ink:        #0e1119;   /* near-black, cool */
  --ink-2:      #3b4150;   /* muted body */
  --ink-3:      #6b7180;   /* captions, meta */
  --line:       #e5e8ef;   /* hairlines */
  --line-2:     #eef0f5;
  --paper:      #ffffff;
  --paper-2:    #f6f7fb;   /* section wash */
  --paper-3:    #f0f2f8;

  /* brand */
  --blue:       #1f3bdc;   /* royal */
  --blue-700:   #182fb0;
  --blue-900:   #101f73;
  --blue-tint:  #eef1fe;
  --green:      #12cf75;   /* bright */
  --green-700:  #0a9b56;
  --green-tint: #e6faf0;

  /* type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ------- a11y helpers ------- */
.skip-link{ position:absolute; left:8px; top:-48px; z-index:200; background:var(--blue); color:#fff;
  padding:10px 16px; border-radius:0 0 4px 4px; font-weight:600; transition:top .15s ease; }
.skip-link:focus{ top:0; outline:2px solid #fff; outline-offset:-4px; }
:where(a,button,.btn,summary,[tabindex]):focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
#main{ scroll-margin-top:84px; }
#main:focus{ outline:none; }

/* ------- type ------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--ink);
  line-height:1.08; letter-spacing:-0.01em; margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(2rem, 4vw, 3rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.75rem); }
p{ margin:0 0 1em; color:var(--ink-2); text-wrap:pretty; }
.lead{ font-size:clamp(1.15rem,1.6vw,1.4rem); color:var(--ink-2); line-height:1.5; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); font-weight:400; margin:0;
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--green); display:inline-block; }
.eyebrow.no-tick::before{ display:none; }

.serif-em{ font-family:var(--serif); font-style:italic; }
.u-green{ color:var(--green-700); }
.u-blue{ color:var(--blue); }
.mark{ background:linear-gradient(transparent 62%, var(--green-tint) 0); padding:0 .04em; }

/* ------- layout ------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1340px; margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }
.pad{ padding-block:clamp(64px,9vw,128px); }
.pad-sm{ padding-block:clamp(48px,6vw,84px); }
.wash{ background:var(--paper-2); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ------- buttons ------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1;
  padding:1rem 1.5rem; border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--green); color:#05311c; }
.btn-accent:hover{ background:var(--green-700); color:#fff; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-700); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-lg{ padding:1.15rem 1.9rem; font-size:1.05rem; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(3px); }

.textlink{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600; color:var(--blue);
  border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .2s, gap .2s;
}
.textlink:hover{ border-color:var(--blue); gap:.7em; }
.textlink.on-dark{ color:#fff; }
.textlink.on-dark:hover{ border-color:rgba(255,255,255,.6); }

/* ------- header / nav ------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:var(--serif);
  font-weight:600; font-size:1.18rem; letter-spacing:-.01em; color:var(--ink); }
.brand .glyph{
  width:30px; height:30px; flex:none; border-radius:3px; position:relative;
  background:var(--blue); display:grid; place-items:center;
}
.brand .glyph::after{ content:""; position:absolute; right:5px; bottom:5px; width:8px; height:8px; background:var(--green); border-radius:1px; }
.brand .glyph span{ font-family:var(--serif); color:#fff; font-size:1rem; font-weight:600; line-height:1; }
.brand b{ font-weight:600; }
.brand small{ display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:.96rem; font-weight:500; color:var(--ink-2); position:relative; padding:6px 0; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.25s; }

@media (max-width:920px){
  .nav-links{ position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px var(--gut) 24px;
    transform:translateY(-120%); transition:transform .3s ease; box-shadow:0 30px 50px -30px rgba(0,0,0,.25); }
  .nav[data-open="true"] .nav-links{ transform:translateY(0); }
  .nav-links a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line-2); font-size:1.1rem; }
  .nav-links a.active::after{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn{ display:none; }
}

/* ------- footer ------- */
.site-foot{ background:var(--ink); color:#c8ccd6; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-block:clamp(56px,7vw,90px); }
.site-foot h4{ color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; margin:0 0 18px; }
.site-foot a{ color:#c8ccd6; display:block; padding:6px 0; font-size:.96rem; }
.site-foot a:hover{ color:#fff; }
.foot-brand .brand{ color:#fff; margin-bottom:18px; }
.foot-brand .brand small{ color:#7e8597; }
.foot-brand p{ color:#969cab; max-width:34ch; }
.foot-bottom{ border-top:1px solid #232838; padding-block:24px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:.82rem; color:#7e8597; font-family:var(--mono); letter-spacing:.04em; }
.foot-bottom a{ display:inline; color:#c8ccd6; border-bottom:1px solid transparent; }
.foot-bottom a:hover{ color:#fff; border-color:currentColor; }
.foot-glyph .glyph{ background:#fff; }
.foot-glyph .glyph span{ color:var(--ink); }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr 1fr; gap:36px; } .foot-brand{ grid-column:1/-1; } }

/* ------- generic pieces ------- */
.kicker-row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.idx{ font-family:var(--mono); font-size:.8rem; color:var(--ink-3); letter-spacing:.05em; }

.media{ position:relative; background:
  repeating-linear-gradient(135deg, #eef0f6 0 12px, #e7eaf3 12px 24px);
  border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.media::after{ content:attr(data-label); position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:#8a90a2; background:rgba(255,255,255,.78); padding:5px 9px; border-radius:2px; }
.media.on-blue{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 12px, rgba(255,255,255,.04) 12px 24px); border-color:rgba(255,255,255,.18); }
.media.on-blue::after{ color:#cdd6ff; background:rgba(255,255,255,.10); }
/* real photo fills the media slot — hide placeholder hatch + label */
.media.has-photo{ background:var(--paper-2); }
.media.has-photo::after{ display:none; }
.media .photo{ width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.ratio-4x5{ aspect-ratio:4/5; }
.ratio-3x2{ aspect-ratio:3/2; }
.ratio-1x1{ aspect-ratio:1/1; }
.ratio-16x9{ aspect-ratio:16/9; }

/* stat */
.stat .n{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:500;
  line-height:1; color:var(--ink); letter-spacing:-.02em; }
.stat .n .u{ color:var(--green-700); }
.stat .l{ font-size:.9rem; color:var(--ink-3); margin-top:10px; line-height:1.4; }

/* logos / marquee names */
.logos{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 38px; }
.logos span{ font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.5rem); color:var(--ink);
  font-weight:600; opacity:.78; letter-spacing:-.01em; }
.logos.on-dark span{ color:#fff; opacity:.85; }

/* chip */
.chip{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600;
  color:var(--blue); background:var(--blue-tint); padding:.45em .8em; border-radius:2px; }
.chip.green{ color:var(--green-700); background:var(--green-tint); }
.chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ------- forms ------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink); margin-bottom:7px; }
.field .req{ color:var(--green-700); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.85rem .95rem; border:1px solid var(--line); border-radius:2px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
.field select{ appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7180' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; padding-right:2.4rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }

.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .checks{ grid-template-columns:1fr; } }
.check{ display:flex; align-items:flex-start; gap:10px; padding:.7rem .85rem; border:1px solid var(--line);
  border-radius:2px; cursor:pointer; font-size:.92rem; color:var(--ink-2); transition:.15s; user-select:none; }
.check:hover{ border-color:var(--ink-3); }
.check input{ width:18px; height:18px; accent-color:var(--blue); margin-top:1px; flex:none; }
.check.on{ border-color:var(--blue); background:var(--blue-tint); color:var(--ink); }
.form-error{ margin:14px 0 0; font-size:.92rem; color:#b4232a; }
.form-error a{ color:#b4232a; text-decoration:underline; font-weight:600; }

/* ------- modal ------- */
.modal-root{ position:fixed; inset:0; z-index:100; display:none; }
.modal-root.open{ display:block; }
.modal-veil{ position:absolute; inset:0; background:rgba(10,13,22,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s; }
.modal-root.open .modal-veil{ opacity:1; }
.modal-card{ position:absolute; top:0; right:0; height:100%; width:min(560px,100%);
  background:#fff; box-shadow:-30px 0 80px -30px rgba(0,0,0,.4); overflow-y:auto;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,.0,.2,1); }
.modal-root.open .modal-card{ transform:translateX(0); }
.modal-head{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line);
  padding:22px clamp(24px,4vw,40px); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; z-index:2; }
.modal-head h3{ font-size:1.4rem; }
.modal-head p{ margin:4px 0 0; font-size:.9rem; color:var(--ink-3); }
.modal-x{ flex:none; width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:2px;
  cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:.15s; }
.modal-x:hover{ border-color:var(--ink); background:var(--paper-2); }
.modal-body{ padding:clamp(24px,4vw,40px); }
.modal-foot{ font-size:.78rem; color:var(--ink-3); margin-top:16px; line-height:1.5; }
.modal-success{ display:none; padding:clamp(40px,6vw,64px) clamp(24px,4vw,40px); text-align:center; }
.modal-success .seal{ width:64px; height:64px; border-radius:50%; background:var(--green-tint);
  display:grid; place-items:center; margin:0 auto 22px; }
.modal-success.show{ display:block; }

/* reveal hooks — content is always visible. (Entrance motion was removed: in
   throttled/background iframes CSS animations freeze out-of-sync and the only
   robust guarantee for a client site is content that is unconditionally shown.)
   The .reveal/.in classes are retained as no-ops so markup/JS stay valid. */
.reveal{ opacity:1; transform:none; }