/* ============================================================
   Axis11 — site styles
   Palette and type are defined once here. Edit tokens below.
   ============================================================ */

:root{
  /* --- colour ------------------------------------------------ */
  --paper:      #FBFAF7;   /* warm white, primary ground        */
  --paper-2:    #F2F0E9;   /* recessed warm panel               */
  --paper-3:    #EAE7DE;   /* hairline fills                    */
  --ink:        #101112;   /* near black, text + dark sections  */
  --ink-soft:   #44474C;
  --ink-mute:   #74777E;
  --ink-invert: #F7F6F3;   /* text on dark                      */
  --cobalt:     #145BFF;   /* brand accent, from the logo       */
  --cobalt-deep:#0B45D6;   /* pressed / hover                   */
  --cobalt-tint:#E7EEFF;
  --rule:       #E3E0D8;
  --rule-dark:  #2A2C30;
  --focus:      #145BFF;

  /* --- type -------------------------------------------------- */
  --f-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  clamp(1.75rem, 3.2vw, 2.25rem);
  --t-3xl:  clamp(2.1rem, 4.4vw, 3rem);
  --t-hero: clamp(2.25rem, 4.9vw, 3.6rem);

  /* --- layout ------------------------------------------------ */
  --page:   1200px;
  --pad:    clamp(1.25rem, 4vw, 2.5rem);
  --measure: 60ch;
  --radius: 2px;      /* angular brand: keep corners tight */
}

/* The brand is defined as warm white with near-black type.
   Committing to one palette on purpose; tell the browser so it
   does not auto-invert form controls or scrollbars. */
:root{ color-scheme: light; }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-md);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
svg{ display:block; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.022em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; }

a{ color:var(--cobalt); text-decoration:none; }
a:hover{ color:var(--cobalt-deep); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--ink-invert);
  padding:.75rem 1rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   Layout helpers
   ============================================================ */

.wrap{
  width:100%;
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4rem); }

.section--dark{
  background:var(--ink);
  color:var(--ink-invert);
}
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--ink-invert); }
.section--dark .eyebrow{ color:#9BA0A8; }
.section--dark .lede{ color:#C7CACF; }
.section--dark a{ color:#7FA6FF; }
.section--dark a:hover{ color:#fff; }

.section--panel{ background:var(--paper-2); }

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 1rem;
}

.lede{
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem);
  color:var(--ink-soft);
  max-width:var(--measure);
}

.divider{
  width:44px; height:3px;
  background:var(--cobalt);
  border:0; margin:1.75rem 0;
}
.divider--center{ margin-inline:auto; }

/* ============================================================
   Buttons
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-body);
  font-size:var(--t-base);
  font-weight:600;
  line-height:1;
  padding:.95rem 1.4rem;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:active{ transform:none; } }

.btn--primary{ background:var(--cobalt); color:#fff; }
.btn--primary:hover{ background:var(--cobalt-deep); color:#fff; }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

.section--dark .btn--ghost{ color:var(--ink-invert); border-color:#4A4E55; }
.section--dark .btn--ghost:hover{ background:var(--ink-invert); color:var(--ink); }

.btn--sm{ padding:.62rem 1rem; font-size:var(--t-sm); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.arrow{ transition:transform .16s ease; }
a:hover .arrow{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .arrow{ transition:none; } a:hover .arrow{ transform:none; } }

/* ============================================================
   Brand mark
   ============================================================ */

.logo{ display:inline-flex; align-items:center; gap:.62rem; color:var(--ink); }
.logo:hover{ color:var(--ink); }
.logo__mark{ height:26px; width:auto; flex:none; }
.logo__word{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:-0.035em;
  line-height:1;
}
.logo--invert{ color:var(--ink-invert); }
.logo--lg .logo__mark{ height:52px; }
.logo--lg .logo__word{ font-size:2.6rem; }

.mark-a{ fill:currentColor; }
.mark-bar{ fill:var(--cobalt); }

/* lockup with tagline, per brand guide: thin cobalt rule between */
.lockup{ text-align:center; }
.lockup .logo{ justify-content:center; }
.lockup__rule{
  width:40px; height:2.5px; background:var(--cobalt);
  border:0; margin:1.5rem auto;
}
.lockup__tagline{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1rem, 2vw, 1.25rem);
  letter-spacing:-0.01em;
  color:var(--ink-soft);
}
.section--dark .lockup__tagline{ color:#C7CACF; }

/* ============================================================
   Header
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--rule); }

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  min-height:76px;
}

.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav__link{
  font-size:var(--t-base);
  font-weight:500;
  color:var(--ink-soft);
  padding-block:.35rem;
  border-bottom:2px solid transparent;
}
.nav__link:hover{ color:var(--ink); }
.nav__link[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--cobalt); }

.header__cta{ display:none; }

.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:1.5px solid var(--ink); border-radius:var(--radius);
  color:var(--ink); font-family:var(--f-body); font-weight:600; font-size:var(--t-sm);
  padding:.55rem .85rem; cursor:pointer;
}

@media (min-width:62rem){
  .nav{ display:block; }
  .header__cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

/* mobile panel */
.mobile-nav{
  position:fixed; inset:0; z-index:60;
  background:var(--paper);
  display:flex; flex-direction:column;
  padding:var(--pad);
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav__top{
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px; margin-bottom:1.5rem;
}
.mobile-nav__close{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:1.5px solid var(--ink); border-radius:var(--radius);
  color:var(--ink); font-family:var(--f-body); font-weight:600; font-size:var(--t-sm);
  padding:.55rem .85rem; cursor:pointer;
}
.mobile-nav__list{ list-style:none; display:flex; flex-direction:column; gap:0; }
.mobile-nav__list li{ border-top:1px solid var(--rule); }
.mobile-nav__list li:last-child{ border-bottom:1px solid var(--rule); }
.mobile-nav__link{
  display:block; padding:1.15rem 0;
  font-family:var(--f-display); font-weight:600;
  font-size:1.6rem; letter-spacing:-0.02em;
  color:var(--ink);
}
.mobile-nav__link[aria-current="page"]{ color:var(--cobalt); }
.mobile-nav .btn{ margin-top:2rem; justify-content:center; }

/* ============================================================
   Hero
   ============================================================ */

.hero{ padding-block:clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero__grid{
  display:grid; gap:clamp(2.5rem, 5vw, 4rem);
  align-items:center;
}
.hero__grid > *,
.split > *,
.stages > *,
.footer__grid > *,
.row__link > *{ min-width:0; }
.hero__title{ font-size:var(--t-hero); font-weight:600; }
.hero__title em{ font-style:normal; color:var(--cobalt); }
.hero__copy{
  margin-top:1.5rem;
  font-size:clamp(1.0625rem, 1.7vw, 1.3125rem);
  color:var(--ink-soft);
  max-width:46ch;
}
.hero__art{ justify-self:stretch; min-width:0; }
.hero__art svg{ width:100%; height:auto; }

@media (min-width:56rem){
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
}

/* ============================================================
   Statement block
   ============================================================ */

.statement{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.35rem, 2.9vw, 2rem);
  line-height:1.28;
  letter-spacing:-0.02em;
  max-width:26ch;
}
.statement--wide{ max-width:34ch; }

.split{
  display:grid; gap:clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width:56rem){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; }
  .split--label{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); }
}

/* ============================================================
   Service rows (list, not cards)
   ============================================================ */

.rows{ list-style:none; border-top:1px solid var(--rule); }
.section--dark .rows{ border-top-color:var(--rule-dark); }
.row{ border-bottom:1px solid var(--rule); }
.section--dark .row{ border-bottom-color:var(--rule-dark); }

.row__link{
  display:grid; gap:.35rem 2rem;
  padding-block:1.6rem;
  color:inherit;
  align-items:baseline;
}
.row__link:hover{ color:inherit; }
.row__link:hover .row__title{ color:var(--cobalt); }

.row__idx{
  font-family:var(--f-body);
  font-size:var(--t-sm); font-weight:600;
  letter-spacing:.1em;
  color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.row__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.2rem, 1.9vw, 1.45rem);
  letter-spacing:-0.022em;
  transition:color .16s ease;
}
@media (prefers-reduced-motion: reduce){ .row__title{ transition:none; } }
.row__desc{ color:var(--ink-soft); font-size:var(--t-base); max-width:56ch; }
.row__more{
  font-size:var(--t-sm); font-weight:600; color:var(--cobalt);
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
}

@media (min-width:56rem){
  .row__link{
    grid-template-columns:3.25rem minmax(0,1.2fr) minmax(0,1.25fr) auto;
    align-items:center;
    padding-block:1.9rem;
  }
}

/* ============================================================
   Process — four stages on a rule
   ============================================================ */

.stages{
  list-style:none;
  display:grid; gap:2rem;
  counter-reset:stage;
}
.stage{ position:relative; padding-top:1.4rem; border-top:2px solid var(--rule); }
.section--dark .stage{ border-top-color:var(--rule-dark); }
.stage::before{
  content:""; position:absolute; top:-2px; left:0;
  width:2.25rem; height:2px; background:var(--cobalt);
}
.stage__n{
  font-family:var(--f-body); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.12em; color:var(--cobalt);
  display:block; margin-bottom:.45rem;
}
.stage__t{ font-size:var(--t-lg); margin-bottom:.5rem; }
.stage__d{ color:var(--ink-soft); font-size:var(--t-base); }
.section--dark .stage__d{ color:#B4B8BF; }

@media (min-width:44rem){ .stages{ grid-template-columns:repeat(2,1fr); gap:2.5rem; } }
@media (min-width:66rem){ .stages{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
   Service detail (services page)
   ============================================================ */

.svc{ padding-block:clamp(2.5rem,5vw,3.75rem); border-top:1px solid var(--rule); }
.svc:first-of-type{ border-top:0; padding-top:0; }
.svc .split--label{ }
@media (min-width:56rem){
  .svc .split--label{ grid-template-columns:minmax(0,.55fr) minmax(0,1fr); }
}
.svc__n{
  font-family:var(--f-body); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.14em; color:var(--cobalt); text-transform:uppercase;
  margin-bottom:.75rem;
}
.svc__title{ font-size:var(--t-2xl); }
.svc__body > * + *{ margin-top:1.15rem; }
.svc__h{
  font-family:var(--f-body); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.5rem;
}
.svc__p{ color:var(--ink-soft); max-width:var(--measure); }

.ticks{ list-style:none; display:grid; gap:.55rem; }
.ticks li{
  position:relative; padding-left:1.4rem;
  color:var(--ink-soft); font-size:var(--t-base);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:.5rem; background:var(--cobalt);
}

/* ============================================================
   Prose (about page)
   ============================================================ */

.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:1.25rem; }
.prose h3{ font-size:var(--t-xl); margin-top:2.5rem; }
.prose p{ color:var(--ink-soft); }
.prose strong{ color:var(--ink); font-weight:600; }

.pull{
  border-left:3px solid var(--cobalt);
  padding:.25rem 0 .25rem 1.5rem;
  margin-block:2.25rem;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  line-height:1.35; letter-spacing:-0.018em;
  color:var(--ink);
  max-width:34ch;
}

.facts{ list-style:none; display:grid; gap:0; border-top:1px solid var(--rule); }
.facts li{
  display:grid; gap:.15rem 1.5rem;
  padding-block:.9rem; border-bottom:1px solid var(--rule);
  font-size:var(--t-base);
}
.facts dt,.facts .k{
  font-size:var(--t-sm); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.facts .v{ color:var(--ink); }
@media (min-width:34rem){
  .facts li{ grid-template-columns:11rem minmax(0,1fr); align-items:baseline; }
}

/* ============================================================
   Form
   ============================================================ */

.form{ display:grid; gap:1.35rem; max-width:34rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-size:var(--t-sm); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.field .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-mute); }
.field input,.field textarea{
  font-family:var(--f-body); font-size:var(--t-base); color:var(--ink);
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:var(--radius);
  padding:.8rem .9rem;
  width:100%;
  transition:border-color .16s ease;
}
@media (prefers-reduced-motion: reduce){ .field input,.field textarea{ transition:none; } }
.field input:hover,.field textarea:hover{ border-color:#C9C5BB; }
.field input:focus,.field textarea:focus{ border-color:var(--cobalt); outline:2px solid var(--cobalt); outline-offset:1px; }
.field textarea{ min-height:9rem; resize:vertical; }
.field.is-invalid input,.field.is-invalid textarea{ border-color:#B4251C; }
.err{ font-size:var(--t-sm); color:#B4251C; font-weight:500; min-height:0; }
.err:empty{ display:none; }

/* honeypot: hidden from people, present for bots */
.hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.form__status{ font-size:var(--t-base); font-weight:500; }
.form__status:empty{ display:none; }
.form__status[data-state="ok"]{ color:#0F6A3F; }
.form__status[data-state="err"]{ color:#B4251C; }

.btn[aria-busy="true"]{ opacity:.72; pointer-events:none; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer{
  background:var(--ink); color:#B4B8BF;
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:var(--t-base);
}
.site-footer a{ color:#D4D7DB; }
.site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; gap:2.5rem; }
.footer__nav{ list-style:none; display:grid; gap:.6rem; }
.footer__h{
  font-size:var(--t-sm); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#8A8F97; margin-bottom:1rem;
}
.footer__bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:var(--t-sm); color:#8A8F97;
}
@media (min-width:52rem){
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; gap:3rem; }
}

/* ============================================================
   Utility
   ============================================================ */

.stack > * + *{ margin-top:1.15rem; }
.stack-lg > * + *{ margin-top:2rem; }
.mt-0{ margin-top:0; }
.center{ text-align:center; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.scroll-x{ overflow-x:auto; }