/* ==========================================================================
   Archer Technology, LLC - e-commerce practice - shared stylesheet
   Design tokens live here and here only. Every page loads this file.

   Palette and structure are deliberately shared with archertechnology.io so the
   two sites read as related. The differences are intentional:
   - four service accents instead of three (see --teal-*)
   - no mountain/skyline motif (that's the sibling's local Colorado identity);
     this site uses an abstract flow motif instead
   - no service-area pill styles (this site has no geographic framing)
   ========================================================================== */

:root{
  --blue-700:#0F4C81;
  --blue-600:#1565C0;
  --blue-500:#1E7FD4;
  --blue-50:#EAF2FB;
  /* Accent colors for the four services - one per service, carried through icons, links, and checkmarks */
  --green-700:#166B47;
  --green-600:#1F8A5B;
  --green-50:#E7F5EE;
  --violet-700:#573D7E;
  --violet-600:#6D4C9E;
  --violet-50:#F0EBFA;
  --teal-700:#0F5F6B;
  --teal-600:#0E7C8C;
  --teal-50:#E4F3F6;
  --ink:#16202B;
  --ink-mut:#55636F;
  --surface:#FFFFFF;
  --surface-2:#F5F8FC;
  --line:#E1E8EF;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --maxw:1120px;
  --radius:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:var(--blue-600);}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.02em;line-height:1.2;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:2px;
  border-radius:3px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--blue-600);
  color:#fff;
  padding:12px 18px;
  z-index:100;
  text-decoration:none;
  border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0;}

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue-600);
  margin-bottom:12px;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  padding:14px 24px;
  border-radius:var(--radius);
  text-decoration:none;
  border:1.5px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary{
  background:var(--blue-600);
  color:#fff;
  box-shadow:0 1px 2px rgba(15,76,129,0.18);
}
.btn-primary:hover{background:var(--blue-700);}
.btn-ghost{
  border-color:var(--line);
  color:var(--ink);
  background:var(--surface);
}
.btn-ghost:hover{border-color:var(--blue-500);color:var(--blue-700);}

/* ---------- NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:112px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
}
.brand-icon{height:104px;width:auto;flex:none;}
.brand-wordmark{height:64px;width:auto;flex:none;}
.navlinks{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:15px;
  font-weight:500;
}
.navlinks a{
  text-decoration:none;
  color:var(--ink-mut);
  transition:color .15s ease;
}
.navlinks a:hover{color:var(--blue-700);}
.navlinks .btn{padding:10px 18px;font-size:14px;color:#fff;}
.navlinks .btn:hover{color:#fff;}

.menu-toggle{
  display:none;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  width:42px;height:42px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
}
.menu-toggle svg{width:20px;height:20px;}

/* ---------- HERO (home) ----------
   Abstract flow motif: paths moving left to right between nodes, standing in for
   moving a store from one platform to another. Deliberately not a skyline - this
   site has no geographic identity. */
.hero{
  position:relative;
  padding:96px 0 88px;
  background:
    radial-gradient(900px 400px at 78% -10%, var(--blue-50), transparent 70%),
    var(--surface);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-flow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.hero-flow .flow-path{
  fill:none;
  stroke-linecap:round;
}
.hero-flow .flow-1{stroke:var(--blue-500);stroke-width:2;opacity:0.30;}
.hero-flow .flow-2{stroke:var(--teal-600);stroke-width:2;opacity:0.26;}
.hero-flow .flow-3{stroke:var(--violet-600);stroke-width:2;opacity:0.22;}
.hero-flow .flow-4{stroke:var(--green-600);stroke-width:2;opacity:0.24;}
.hero-flow .node{fill:var(--surface);stroke-width:2.5;}
.hero-flow .node-a{stroke:var(--blue-600);opacity:0.55;}
.hero-flow .node-b{stroke:var(--teal-600);opacity:0.5;}
.hero-flow .node-c{stroke:var(--violet-600);opacity:0.45;}
.hero-inner{
  max-width:660px;
  position:relative;
  z-index:1;
  box-sizing:border-box;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  border-radius:16px;
  padding:36px 40px;
  box-shadow:0 8px 30px rgba(22,32,43,0.08);
}
.hero h1{
  font-size:clamp(34px,5.2vw,56px);
  margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--blue-600);}
.hero .lede{
  font-size:18px;
  color:var(--ink-mut);
  max-width:56ch;
  margin-bottom:32px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{
  margin-top:32px;
  font-size:14.5px;
  color:var(--ink-mut);
  display:flex;
  align-items:center;
  gap:9px;
}
.hero-note svg{width:17px;height:17px;color:var(--blue-600);flex:none;}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:56px 0 64px;
  background:
    radial-gradient(800px 340px at 82% -20%, var(--blue-50), transparent 70%),
    var(--surface);
  border-bottom:1px solid var(--line);
}
.page-hero-inner{max-width:700px;position:relative;z-index:1;}
.page-hero h1{
  font-size:clamp(30px,4.4vw,46px);
  margin-bottom:18px;
}
.page-hero .lede{
  font-size:17.5px;
  color:var(--ink-mut);
  max-width:58ch;
  margin-bottom:30px;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:var(--ink-mut);
  margin-bottom:22px;
}
.breadcrumb a{
  color:var(--ink-mut);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.breadcrumb a:hover{color:var(--blue-700);border-color:var(--blue-500);}
.breadcrumb svg{width:14px;height:14px;flex:none;opacity:.6;}

/* ---------- SECTION SHELL ---------- */
section{padding:88px 0;}
.band{background:var(--surface-2);border-block:1px solid var(--line);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(27px,3.6vw,38px);}
.section-head p{
  margin-top:14px;
  color:var(--ink-mut);
  font-size:16.5px;
}
/* Tighter variant for a section head sitting inside .detail-grid rather than above a section */
.section-head.tight{margin-bottom:28px;}

/* Visible by default; animation only engages once JS confirms it can finish the job */
.reveal{opacity:1;transform:none;}
.js-anim .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.js-anim .reveal.in{opacity:1;transform:none;}

/* ---------- SERVICE CARDS (home) ----------
   Four across on desktop, two-by-two on tablet, stacked on mobile. */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.svc-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc-card:hover{
  border-color:var(--blue-500);
  box-shadow:0 6px 22px rgba(15,76,129,0.09);
  transform:translateY(-2px);
}
.svc-card.green:hover{border-color:var(--green-600);box-shadow:0 6px 22px rgba(22,107,71,0.12);}
.svc-card.violet:hover{border-color:var(--violet-600);box-shadow:0 6px 22px rgba(87,61,126,0.12);}
.svc-card.teal:hover{border-color:var(--teal-600);box-shadow:0 6px 22px rgba(15,95,107,0.12);}
.svc-chip{
  width:48px;height:48px;
  border-radius:10px;
  background:var(--blue-50);
  color:var(--blue-600);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
/* Accent variants - one per service */
.svc-chip.green{background:var(--green-50);color:var(--green-600);}
.svc-chip.violet{background:var(--violet-50);color:var(--violet-600);}
.svc-chip.teal{background:var(--teal-50);color:var(--teal-600);}
.svc-chip svg{
  width:24px;height:24px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.svc-card h3{font-size:18.5px;margin-bottom:10px;}
.svc-card p{color:var(--ink-mut);font-size:15px;}
.svc-more{
  margin-top:auto;
  padding-top:18px;
  font-size:14.5px;
  font-weight:600;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.svc-card:hover .svc-more{color:var(--blue-700);}
.svc-more svg{width:15px;height:15px;transition:transform .18s ease;}
.svc-card:hover .svc-more svg{transform:translateX(3px);}
/* Cards carry their own accent into the "Learn more" link */
.svc-card.green .svc-more{color:var(--green-600);}
.svc-card.green:hover .svc-more{color:var(--green-700);}
.svc-card.violet .svc-more{color:var(--violet-600);}
.svc-card.violet:hover .svc-more{color:var(--violet-700);}
.svc-card.teal .svc-more{color:var(--teal-600);}
.svc-card.teal:hover .svc-more{color:var(--teal-700);}

/* ---------- PLATFORM HUB ---------- */
.platform-group{margin-bottom:56px;}
.platform-group:last-child{margin-bottom:0;}
.platform-group > h3{
  font-size:20px;
  margin-bottom:8px;
}
.platform-group > p{
  color:var(--ink-mut);
  font-size:16px;
  margin-bottom:26px;
  max-width:62ch;
}
.platform-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.platform-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
}
.platform-card h4{
  margin:0 0 7px;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.3;
}
.platform-card p{color:var(--ink-mut);font-size:14.5px;}

/* Link variant - used for guide cards and any platform card that has a page behind it */
a.platform-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.platform-card:hover{
  border-color:var(--blue-500);
  box-shadow:0 6px 22px rgba(15,76,129,0.09);
  transform:translateY(-2px);
}
.card-more{
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.card-more svg{width:14px;height:14px;transition:transform .18s ease;}
a.platform-card:hover .card-more svg{transform:translateX(3px);}

/* ---------- ARTICLE BODY (guides) ----------
   Scoped deliberately. The global rule is ul{list-style:none}, which is right for nav,
   checklists, and footer lists but strips bullets from real prose - so bullets are restored
   here and nowhere else. */
.article{max-width:72ch;}
.article h2{
  font-size:clamp(22px,2.8vw,28px);
  margin:44px 0 14px;
}
.article h2:first-child{margin-top:0;}
.article h3{
  font-size:19px;
  margin:32px 0 10px;
}
.article p{
  color:var(--ink-mut);
  font-size:16.5px;
  margin-bottom:18px;
}
.article strong{color:var(--ink);font-weight:600;}
.article a{
  color:var(--blue-600);
  text-decoration:none;
  border-bottom:1px solid var(--blue-50);
  transition:border-color .15s ease;
}
.article a:hover{border-color:var(--blue-500);}
.article ul,.article ol{
  margin:0 0 18px;
  padding-left:22px;
  color:var(--ink-mut);
  font-size:16.5px;
}
.article ul{list-style:disc;}
.article ol{list-style:decimal;}
.article li{margin-bottom:9px;}
.article li::marker{color:var(--blue-500);}
.article hr{
  border:none;
  border-top:1px solid var(--line);
  margin:40px 0;
}
/* Inline code for DNS record values and lookup commands. Scoped to .article for the same
   reason the bullets are: it belongs to prose, not to nav or cards. Inline only, deliberately -
   no <pre> blocks, so a long record value wraps instead of scrolling the page sideways. */
.article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:0.9em;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
  color:var(--ink);
  overflow-wrap:break-word;
}
.callout code{background:var(--surface);border-color:#CFE0F3;}

/* Pull-aside for the things that most often go wrong */
.callout{
  background:var(--blue-50);
  border-left:3px solid var(--blue-500);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
  margin:0 0 26px;
}
.callout p{margin-bottom:0;color:var(--ink);}
.callout strong{font-weight:700;}

/* Table of contents at the top of a long guide */
.toc{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 26px;
  margin-bottom:36px;
}
.toc h2{font-size:14px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mut);margin:0 0 12px;}
.toc ul{list-style:none;padding-left:0;margin-bottom:0;font-size:15.5px;}
.toc li{margin-bottom:8px;}
.toc li:last-child{margin-bottom:0;}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:start;
}
.about-copy p{
  color:var(--ink-mut);
  font-size:16.5px;
  margin-bottom:16px;
}
.about-copy strong{color:var(--ink);font-weight:600;}
.facts-list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px 20px;
}

/* ---------- PEOPLE ---------- */
.people{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:34px;
}
.person{
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.person img{
  width:90px;height:90px;
  border-radius:50%;
  flex:none;
  background:var(--blue-50);
  object-fit:cover;
  box-shadow:0 0 0 3px var(--blue-50), 0 0 0 4px var(--line);
}
.person-name{font-weight:700;font-size:16px;letter-spacing:-0.01em;}
.person-role{color:var(--ink-mut);font-size:14px;}

/* ---------- CHECKLIST (service pages) ---------- */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 0;
  font-size:16px;
  color:var(--ink-mut);
  border-bottom:1px solid var(--line);
}
.checklist li:last-child{border-bottom:none;}
.checklist strong{color:var(--ink);font-weight:600;}
.checklist svg{
  width:20px;height:20px;
  flex:none;
  margin-top:2px;
  color:var(--blue-600);
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Each service page tints its checkmarks and eyebrow to its own accent */
.page-green .checklist svg{color:var(--green-600);}
.page-violet .checklist svg{color:var(--violet-600);}
.page-teal .checklist svg{color:var(--teal-600);}
.page-green .eyebrow,.page-green .breadcrumb a:hover{color:var(--green-700);}
.page-violet .eyebrow,.page-violet .breadcrumb a:hover{color:var(--violet-700);}
.page-teal .eyebrow,.page-teal .breadcrumb a:hover{color:var(--teal-700);}

/* ---------- HOW THE WORK GETS DONE ---------- */
.ways{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.way{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
}
.way .svc-chip{width:40px;height:40px;margin-bottom:16px;}
.way .svc-chip svg{width:20px;height:20px;}
.way h3{font-size:16.5px;margin-bottom:8px;}
.way p{color:var(--ink-mut);font-size:14.5px;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--blue-600);
  color:#fff;
  border-radius:var(--radius);
  padding:44px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band h2{font-size:clamp(23px,2.8vw,30px);margin-bottom:8px;}
.cta-band p{color:rgba(255,255,255,0.86);font-size:16px;max-width:52ch;}
.cta-band .btn{
  background:#fff;
  color:var(--blue-700);
  flex:none;
}
.cta-band .btn:hover{background:var(--blue-50);color:var(--blue-700);}
.cta-band :focus-visible{outline-color:#fff;}

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.book-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
}
.book-card h3{font-size:20px;margin-bottom:10px;}
.book-card p{color:var(--ink-mut);font-size:15.5px;margin-bottom:24px;}
.contact-side h3{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-mut);
  margin-bottom:14px;
}
.contact-line{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
  font-size:16px;
}
.contact-line svg{width:19px;height:19px;color:var(--blue-600);flex:none;}
.contact-line a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease;
}
.contact-line a:hover{color:var(--blue-700);border-color:var(--blue-500);}
.contact-block{margin-bottom:34px;}
.contact-block:last-child{margin-bottom:0;}

/* ---------- FOOTER ---------- */
footer{
  padding:34px 0;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.foot-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13.5px;
  color:var(--ink-mut);
}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;}
.foot-links a{color:var(--ink-mut);text-decoration:none;}
.foot-links a:hover{color:var(--blue-700);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .platform-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  nav.wrap{height:84px;}
  .brand-icon{height:68px;}
  .brand-wordmark{height:42px;}
  .navlinks{
    position:fixed;
    top:84px;left:0;right:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 20px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    box-shadow:0 10px 24px rgba(22,32,43,0.07);
  }
  .navlinks.open{opacity:1;transform:none;pointer-events:auto;}
  .navlinks a{
    display:block;
    padding:15px 0;
    border-bottom:1px solid var(--line);
  }
  .navlinks .btn{
    margin-top:14px;
    border-bottom:none;
    padding:14px 18px;
  }
  .menu-toggle{display:flex;}
  .about-grid,.contact-grid,.detail-grid{grid-template-columns:1fr;gap:36px;}
  .ways{grid-template-columns:1fr;}
  .hero{padding:72px 0 64px;}
  .hero-flow{display:none;}
  .hero-inner{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0;padding:0;max-width:none;}
  section{padding:68px 0;}
  .cta-band{padding:34px 28px;}
}
@media (max-width:560px){
  nav.wrap{height:72px;}
  .brand-icon{height:56px;}
  .brand-wordmark{height:34px;}
  .navlinks{top:72px;}
  .hero .lede{font-size:16.5px;}
  .hero-ctas .btn{width:100%;}
  .svc-grid{grid-template-columns:1fr;}
  .platform-grid{grid-template-columns:1fr;}
  .book-card{padding:26px 22px;}
  .foot-wrap{flex-direction:column;align-items:flex-start;}
  .people{grid-template-columns:1fr;}
  .cta-band .btn{width:100%;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .svc-card:hover{transform:none;}
  *{transition-duration:0.01ms !important;}
}