/* ==========================================================================
   saintstech.co.nz — design system
   Render target #3 of brand/services/services.md. Copy comes from the
   master; this file owns how it looks. Tokens mirror the one-pager
   (services-onepager.html) with web-only additions noted.
   ========================================================================== */

/* ---------- fonts (brand-owned, subset via scripts/subset-fonts.py) ------ */
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- tokens -------------------------------------------------------- */
:root{
  /* print-brand tokens */
  --navy:#2F3B49;
  --navy-2:#3A4858;
  --ink:#33373D;
  --body:#4A4F55;
  --muted:#6B7077;
  --line:#E4E7EA;
  --accent:#3E9DAE;        /* decorative / large / on-navy only (3.0:1 on white) */
  --accent-soft:#EAF4F6;

  /* web-only tokens */
  --accent-deep:#2E7785;   /* ≥4.5:1 on white — small text, links, CTA fills */
  --accent-down:#266371;   /* hover state of accent-deep */
  --navy-deep:#28323E;     /* contact band, one step darker than hero */
  --paper:#FFFFFF;
  --paper-2:#F7F9FA;       /* off-white section alternation */
  --soft-white:#F8F9FA;    /* text on navy — never pure white */
  --soft-dim:#C7D0D9;      /* secondary text on navy */

  --radius:6px;
  --container:1140px;
  --shadow-teal:0 10px 28px -12px rgba(62,157,174,.35);
  --ease:cubic-bezier(.215,.61,.355,1);
}

/* ---------- reset-lite ---------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.93rem + .25vw,1.0625rem);
  line-height:1.6;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--navy);}
::selection{background:var(--accent-soft);color:var(--navy);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* ---------- type ----------------------------------------------------------
   1.25 major-third scale, fluid via clamp. Display lines pair Light 300
   with Bold 700 spans — the one-pager's signature contrast.            */
h1,h2,h3,h4{color:var(--navy);line-height:1.22;font-weight:700;}
.display{
  font-size:clamp(1.75rem,1.2rem + 2.3vw,3.25rem);
  font-weight:300;
  line-height:1.28;
  letter-spacing:-.005em;
}
.display b,.display strong{font-weight:700;}
h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);}
h3{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);font-weight:300;}
small,.small{font-size:.875rem;}

/* uppercase section label with hairline — straight from the one-pager */
.label{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2.5rem;
}
.label::after{content:'';flex:1;height:2px;background:var(--line);}
.on-dark .label{color:var(--soft-dim);}
.on-dark .label::after{background:rgba(248,249,250,.16);}

/* ---------- layout -------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}
.section{padding-block:clamp(3.5rem,9vw,6.5rem);}
.section--tight{padding-block:clamp(2.5rem,6vw,4rem);}
.alt{background:var(--paper-2);}

.skip{
  position:absolute;left:-200vw;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0;}

/* ---------- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:.95rem;line-height:1;
  padding:.875rem 1.5rem;border-radius:var(--radius);
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.99);}
.btn-solid{background:var(--accent-deep);color:#fff;}
.btn-solid:hover{background:var(--accent-down);color:#fff;box-shadow:var(--shadow-teal);}
.btn-light{background:var(--soft-white);color:var(--navy);}
.btn-light:hover{color:var(--navy);box-shadow:0 10px 28px -12px rgba(0,0,0,.45);}
.btn-ghost{color:var(--soft-white);box-shadow:inset 0 0 0 1.5px rgba(248,249,250,.5);}
.btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(248,249,250,.95);}

/* ---------- nav ------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:2rem;height:4.25rem;}
.brand{display:inline-flex;align-items:center;gap:.78rem;text-decoration:none;flex:0 0 auto;
  --logo-nudge:-10%;}   /* optical lift: the swoosh weights the image box high, so the STAS letters need raising to sit on the text */
.brand-mark{height:2.4rem;width:auto;display:block;transform:translateY(var(--logo-nudge));}
.brand-name{font-weight:300;font-size:.95rem;color:var(--muted);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;}  /* full wordmark in caps */
.brand-name b{font-weight:700;color:var(--navy);}
.nav-links{display:flex;align-items:center;gap:1.75rem;margin-left:auto;}
.nav-links a{
  font-size:.92rem;font-weight:500;color:var(--navy);text-decoration:none;
  padding-block:.35rem;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--accent-deep);}
.nav-links a[aria-current="page"]{border-bottom-color:var(--accent);}
.nav .btn{padding:.65rem 1.1rem;font-size:.875rem;}

/* ---------- hero ----------------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:var(--soft-white);overflow:hidden;}
.hero::before{ /* structural dot grid, kept off the text side */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(112deg,transparent 42%,#000 78%);
  mask-image:linear-gradient(112deg,transparent 42%,#000 78%);
}
.hero-inner{position:relative;padding-block:clamp(4rem,11vw,7.5rem);}
.hero .where,.page-head .where{
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft-dim);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem;
}
.hero .where::before,.page-head .where::before{content:'';width:1.75rem;height:2px;background:var(--accent);}
.hero h1{color:#fff;margin-bottom:1.4rem;max-width:46rem;}
.hero .sub{color:var(--soft-dim);max-width:40rem;margin-bottom:2.25rem;}
.cta-row{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center;}

/* ---------- steps (engagement timeline) ------------------------------------ */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;}
.steps::before{
  content:'';position:absolute;top:1.375rem;left:1.5rem;right:1.5rem;height:2px;background:var(--line);
}
.step{position:relative;}
.step .n{
  position:relative;z-index:1;
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--navy);color:#fff;font-size:1.05rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px var(--paper);
  margin-bottom:1.1rem;
}
.alt .step .n{box-shadow:0 0 0 6px var(--paper-2);}
.step h3{margin-bottom:.2rem;}
.step .price{font-size:.875rem;font-weight:500;color:var(--accent-deep);margin-bottom:.6rem;}
.step p{font-size:.9375rem;font-weight:300;}
.step p b{font-weight:600;color:var(--ink);}

/* ---------- service cards --------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
.card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);   /* print signature */
  border-radius:var(--radius);
  padding:2.25rem 2.25rem 2rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-teal);}
.card .kicker{
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.5rem;
}
.card h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin-bottom:.4rem;}
.card .price{font-weight:600;color:var(--navy);margin-bottom:1.1rem;}
.card .price span{font-weight:300;font-size:.875rem;color:var(--muted);}
.card > p{font-weight:300;margin-bottom:1.25rem;}
.card ul{margin-bottom:1.4rem;display:grid;gap:.55rem;}
.card li{
  font-size:.9375rem;font-weight:300;position:relative;padding-left:1.15rem;
}
.card li::before{
  content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.card li b{font-weight:600;color:var(--ink);}
.card .fit{
  margin-top:auto;
  background:var(--accent-soft);border-radius:4px;
  padding:.875rem 1.1rem;font-size:.9rem;line-height:1.55;color:#28525B;
}
.card .fit b{font-weight:700;}

/* ---------- "ships with" band ----------------------------------------------- */
.band{background:var(--navy);color:var(--soft-white);}
.band-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 3rem;
  padding-block:clamp(2rem,4.5vw,2.75rem);
}
.band .t{font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.band ul{display:flex;flex-wrap:wrap;gap:.6rem 2rem;}
.band li{position:relative;padding-left:1rem;font-weight:300;font-size:.9375rem;color:#E6EBF0;}
.band li::before{
  content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* ---------- honesty two-up ---------------------------------------------------- */
.honest{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;}
.honest h3{
  font-size:.9375rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.9rem;
}
.honest p{font-weight:300;max-width:34rem;}
.honest p b{font-weight:600;color:var(--ink);}

/* ---------- testimonial (ships commented out — design ready) ------------------ */
.quote{
  max-width:46rem;
  border-left:3px solid var(--accent);
  padding:.5rem 0 .5rem 2rem;
}
.quote blockquote{
  font-size:clamp(1.125rem,1rem + .7vw,1.5rem);font-weight:300;color:var(--navy);line-height:1.5;
}
.quote figcaption{margin-top:1.25rem;font-size:.9375rem;color:var(--muted);}
.quote figcaption b{color:var(--ink);font-weight:600;}

/* ---------- contact band -------------------------------------------------------- */
.contact{background:var(--navy-deep);color:var(--soft-white);}
.contact h2{color:#fff;margin-bottom:.6rem;}
.contact .lead{color:var(--soft-dim);max-width:38rem;margin-bottom:2rem;}
.contact .lead b{color:var(--soft-white);font-weight:600;}
.contact .promise{margin-top:1.5rem;font-size:.875rem;color:var(--soft-dim);}

/* ---------- about page ------------------------------------------------------------ */
.page-head{background:var(--navy);color:var(--soft-white);}
.page-head-inner{padding-block:clamp(3rem,7vw,4.5rem);}
.page-head h1{color:#fff;margin-bottom:1rem;max-width:46rem;}
.page-head p{color:var(--soft-dim);font-weight:300;max-width:42rem;}

.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;align-items:start;}
.about-grid:has(.portrait:not([hidden])){grid-template-columns:minmax(260px,360px) minmax(0,1fr);}
.portrait{position:relative;}
.portrait img{
  border-radius:var(--radius);
  border-top:3px solid var(--accent);
  aspect-ratio:4/5;object-fit:cover;width:100%;
}
.bio p{font-weight:300;max-width:40rem;}
.bio p + p{margin-top:1.1rem;}
.bio p b{font-weight:600;color:var(--ink);}

.how{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 3rem;max-width:56rem;}
.how li{position:relative;padding-left:1.25rem;font-weight:300;}
.how li::before{
  content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.how li b{font-weight:600;color:var(--ink);}

/* ---------- footer ------------------------------------------------------------------ */
.footer{border-top:1px solid var(--line);background:var(--paper);}
.footer-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:2rem 3rem;padding-block:2.75rem;
}
.footer-brand{max-width:26rem;}
.footer-logo{height:2.6rem;width:auto;display:block;margin-bottom:1rem;}
.footer .motto{font-size:.92rem;font-weight:300;line-height:1.5;color:var(--muted);}
.footer-meta{display:grid;gap:.45rem;font-size:.875rem;color:var(--muted);text-align:right;}
.footer-meta .who b{color:var(--navy);font-weight:600;}
.footer-meta a{color:var(--body);text-decoration:none;}
.footer-meta a:hover{color:var(--accent-deep);}

/* ---------- motion (progressive, CSS-only) ------------------------------------------- */
@supports (animation-timeline: view()){
  .reveal{
    opacity:0;transform:translateY(14px);
    animation:rise .8s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% entry 36%;
  }
  @keyframes rise{to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---------- responsive ----------------------------------------------------------------- */
@media (max-width: 900px){
  .steps{grid-template-columns:1fr;gap:2rem;}
  .steps::before{left:1.375rem;top:1.5rem;bottom:1.5rem;width:2px;height:auto;right:auto;}
  .step{display:flex;gap:1.25rem;}
  .step .n{flex:0 0 auto;margin-bottom:0;}
  .cards{grid-template-columns:1fr;}
  .honest{grid-template-columns:1fr;gap:2.25rem;}
  .how{grid-template-columns:1fr;}
  .about-grid:has(.portrait:not([hidden])){grid-template-columns:1fr;}
  .portrait{max-width:340px;}
}
@media (max-width: 760px){
  .nav-links a.m-hide{display:none;}
  .nav-inner{gap:1rem;}
  .footer-meta{text-align:left;}
}
@media (max-width: 1024px){
  .brand-name{display:none;}   /* the full caps name needs room; below this the mark stands alone */
}
@media (max-width: 430px){
  .brand-mark{height:2.05rem;}
  .btn{padding:.8rem 1.2rem;}
}