/* ============================================================
   DevWorks — shared stylesheet
   Modernist: flat, architectural, Archivo, 2px rules, zero radius.
   ============================================================ */

:root{
  --bg:#f3f2f2;
  --surface:#eae9e9;
  --ink:#201e1d;
  --accent:#1c5ba6;
  --accent-dark:#144a8a;
  --divider:rgba(32,30,29,0.4);
  --muted:rgba(32,30,29,0.6);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1280px;
  --pad-x:48px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0}
::selection{background:rgba(28,91,166,0.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Layout primitives ─────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto}
.rule{height:2px;border:0;background:var(--divider);margin:0}

.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:72px var(--pad-x);
}
.section--hero{padding:88px var(--pad-x) 60px}
.section--flush{padding:0}
.section--pkg-top{padding:64px var(--pad-x) 24px}
.section--pkg-bot{padding:24px var(--pad-x) 64px}
.section--contact-form{padding:0 var(--pad-x) 88px}

.kicker{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.section-label{
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  margin:0 0 40px;
}

/* ── Navigation ────────────────────────────────────────────── */
.nav{
  display:flex;
  align-items:center;
  gap:32px;
  padding:18px var(--pad-x);
  border-bottom:2px solid var(--divider);
  flex-wrap:wrap;
}
.nav__brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.nav__brand img{height:56px;width:auto}
.nav__link{font-size:14px;font-weight:600}
.nav__link:hover,
.nav__link[aria-current="page"]{color:var(--accent)}

/* ── Buttons (labels flush left) ───────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-family:inherit;
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  padding:10px 18px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--primary{background:var(--accent);color:var(--bg)}
.btn--primary:hover{background:var(--accent-dark)}
.btn--outline{border-color:var(--divider);background:transparent;color:inherit}
.btn--outline:hover{background:rgba(32,30,29,0.07)}
.btn--invert{background:var(--bg);color:var(--ink)}
.btn--invert:hover{background:#e4e3e3}
.btn--lg{padding:14px 24px}
.btn--cta{padding:16px 28px;flex:none}
.btn--sm{padding:10px 16px;font-size:13px}
.btn--block{width:100%}

.arrow-link{
  display:inline-flex;
  font-size:14px;
  font-weight:800;
  color:var(--accent);
}
.arrow-link:hover{color:var(--accent-dark)}

/* ── Photo frames ──────────────────────────────────────────── */
.photo{overflow:hidden;background:var(--surface)}
.photo img{width:100%;height:100%;filter:grayscale(1) contrast(1.08)}
.photo--cover img{object-fit:cover}
.photo--contain img{object-fit:contain}
.photo--4-5{aspect-ratio:4/5}
.photo--4-3{aspect-ratio:4/3}

/* ── 3-column bordered grid ────────────────────────────────── */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--divider);
}
.grid3 > *{padding:28px;min-width:0}
.grid3 > *:first-child{padding-left:0}
.grid3 > *:last-child{padding-right:0}
.grid3 > *:not(:last-child){border-right:2px solid var(--divider)}
.grid3 h3{font-size:20px;margin:0 0 10px}
.grid3 p{font-size:14px;opacity:0.8;margin:0}
.svc-icon{width:28px;height:28px;color:var(--accent);margin-bottom:16px}

/* ── Closing CTA band ──────────────────────────────────────── */
.cta{background:var(--accent);color:var(--bg);padding:80px var(--pad-x)}
.cta__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.cta h2{font-size:34px;font-weight:800;margin:0;max-width:24ch;text-wrap:balance}

/* ── Footer ────────────────────────────────────────────────── */
.footer{
  padding:32px var(--pad-x);
  border-top:2px solid var(--divider);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer__copy{font-size:13px;color:var(--muted)}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer__links a{font-size:13px}
.footer__links a:hover{color:var(--accent)}

/* ══ Home ══════════════════════════════════════════════════ */
.home-hero-band{
  background:var(--accent);
  color:var(--bg);
}
.home-hero-band .btn--primary{background:var(--bg);color:var(--ink)}
.home-hero-band .btn--primary:hover{background:#e4e3e3}
.home-hero-band .btn--outline{border-color:rgba(243,242,242,0.5);color:var(--bg)}
.home-hero-band .btn--outline:hover{background:rgba(243,242,242,0.12)}
.home-hero-band .kicker{color:rgba(243,242,242,0.75)}
.home-hero{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
}
.home-hero__title{
  font-weight:800;
  font-size:56px;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 24px;
  max-width:16ch;
  text-wrap:balance;
}
.home-hero__lead{font-size:18px;max-width:46ch;margin:0 0 32px;opacity:0.85}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.home-hero__quote{
  border-left:2px solid rgba(243,242,242,0.35);
  padding-left:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-hero__quote p{
  font-size:22px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-0.01em;
  margin:0;
}
.home-hero__quote cite{
  margin-top:16px;
  font-size:13px;
  color:rgba(243,242,242,0.75);
  font-style:normal;
}
.split{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:48px;
  align-items:center;
}
.split--card{grid-template-columns:1fr auto}
.split__body{display:flex;flex-direction:column;justify-content:center}
.split__body p{font-size:18px;line-height:1.5;margin:0 0 20px;max-width:52ch}

/* Running prose (About) */
.prose-lead{
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  max-width:44ch;
  margin:0 0 24px;
}
.prose p{font-size:15px;opacity:0.85;max-width:50ch;margin:0 0 16px}
.prose p:last-child{margin-bottom:0}

/* ══ Services ═════════════════════════════════════════════ */
.page-title{
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 20px;
  max-width:20ch;
  text-wrap:balance;
}
.page-intro{font-size:17px;max-width:56ch;opacity:0.85;margin:0}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.svc-grid > *{padding:40px 32px;min-width:0}
.svc-grid > *:not(:last-child){border-right:2px solid var(--divider)}
.svc-grid h3{font-size:22px;margin:0 0 14px}
.svc-grid p{font-size:14px;opacity:0.8;margin:0 0 20px}
.tick-list{
  margin:0;padding:0;list-style:none;
  font-size:13px;
  display:flex;flex-direction:column;gap:8px;
}
.tick-list li{display:flex;gap:8px}
.tick-list li::before{content:"\2014";color:var(--accent)}

.pkg-note{font-size:13px;opacity:0.7;margin:0 0 32px;max-width:60ch}
.pkg-note--after{margin:32px 0 0}
.pkg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--divider);
}
.pkg-grid > *{
  padding:32px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pkg-grid > *:first-child{padding-left:0}
.pkg-grid > *:last-child{padding-right:0}
.pkg-grid > *:not(:last-child){border-right:2px solid var(--divider)}
.pkg-grid > *:nth-child(2){background:var(--surface)}
.pkg-grid h3{font-size:20px;margin:0 0 8px}
.pkg-grid p{font-size:13px;opacity:0.8;margin:0 0 20px;flex:1}
.pkg-price{font-size:13px;font-weight:600;margin-bottom:16px}

/* ══ Contact ═════════════════════════════════════════════ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  border-top:2px solid var(--divider);
}
.contact-info{
  padding:40px 32px 40px 0;
  border-right:2px solid var(--divider);
  display:flex;
  flex-direction:column;
  gap:24px;
}
.field-label{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(32,30,29,0.55);
  margin-bottom:6px;
}
.contact-info a{font-size:15px;font-weight:600;color:var(--accent)}
.contact-info p{font-size:14px;margin:0}

.contact-form{
  padding:40px 0 40px 32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.contact-form .full{grid-column:1/-1}
.contact-form label{
  display:block;
  font-size:12px;
  margin-bottom:5px;
  color:rgba(32,30,29,0.7);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  min-height:36px;
  padding:8px 10px;
  font:inherit;
  font-size:14px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:0;
}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{border-color:var(--accent);outline-offset:0}
.form-success{
  grid-column:1/-1;
  padding:20px;
  background:var(--surface);
  font-size:15px;
  font-weight:600;
}
.form-error{
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}
.form-error[hidden]{display:none}

.section--pay-form{padding:0 var(--pad-x) 88px}
.pay-form{
  max-width:640px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.pay-form .full{grid-column:1/-1}
.pay-form label{
  display:block;
  font-size:12px;
  margin-bottom:5px;
  color:rgba(32,30,29,0.7);
}
.pay-form input{
  width:100%;
  min-height:36px;
  padding:8px 10px;
  font:inherit;
  font-size:14px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:0;
}
.pay-form input:focus-visible{border-color:var(--accent);outline-offset:0}

/* Honeypot — visually removed, still reachable to bots that autofill. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Turnstile runs in invisible mode: no widget, no badge. Pull the container
   out of the grid flow so it adds no gap row and never shifts the form. An
   interactive challenge, if one is ever needed, renders as its own overlay. */
#turnstile-container{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.qr{display:flex;flex-direction:column;align-items:center;gap:10px}
.qr img{width:150px;height:150px}
.qr span{font-size:12px;color:var(--muted)}

.card-contact-block{display:flex;flex-direction:column}
.card-contact-block .name{font-size:22px;font-weight:800;margin:0 0 6px}
.card-contact-block .org{font-size:15px;margin:0 0 4px}
.card-contact-block .role{font-size:14px;opacity:0.75;margin:0 0 20px}

/* ══ Digital card ════════════════════════════════════════ */
.card-page{display:flex;justify-content:center;padding:56px 20px}
.card{width:100%;max-width:420px}
.vcard{border:2px solid var(--divider)}
.vcard__section{padding:24px 32px;border-bottom:2px solid var(--divider)}
.vcard__head{
  padding:40px 32px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-bottom:2px solid var(--divider);
}
.vcard__avatar{
  width:128px;height:128px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:20px;
}
.vcard__avatar img{width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.08)}
.vcard__name{font-size:26px;font-weight:800;letter-spacing:-0.01em;margin:0 0 4px}
.vcard__role{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:10px}
.vcard__tagline{font-size:13px;opacity:0.75}
.vcard__rows{display:flex;flex-direction:column;gap:16px}
.vcard__rows a{font-size:15px;font-weight:600}
.vcard__rows a.accent{color:var(--accent)}
.vcard__socials{display:flex;gap:20px;padding:20px 32px;border-bottom:2px solid var(--divider)}
.vcard__socials a{font-size:13px;font-weight:600}
.vcard__socials a:hover{color:var(--accent)}
.vcard__actions{padding:28px 32px}
.card-qr{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:10px}
.card-qr img{width:150px;height:150px}
.card-qr span{font-size:12px;color:var(--muted)}

/* ══ Legal / policy ═════════════════════════════════════ */
.legal{max-width:68ch}
.legal h2{
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  margin:44px 0 14px;
}
.legal > h2:first-child{margin-top:0}
.legal h3{font-size:17px;font-weight:800;margin:24px 0 10px}
/* Muted body text via colour (not opacity) so inline links keep full accent strength. */
.legal p{font-size:15px;color:rgba(32,30,29,0.85);margin:0 0 16px}
.legal ul{margin:0 0 16px;padding:0;list-style:none}
.legal li{font-size:15px;color:rgba(32,30,29,0.85);display:flex;gap:10px;margin-bottom:9px}
.legal li::before{content:"\2014";color:var(--accent);flex:none}
.legal a{color:var(--accent);font-weight:600}
.legal a:hover{color:var(--accent-dark)}
/* Inline prose links get an underline so they read as links in a run of text
   (the standalone .arrow-link CTA keeps the site's underline-free treatment). */
.legal p a:not(.arrow-link){text-decoration:underline;text-underline-offset:2px}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  :root{--pad-x:24px}

  .nav{gap:14px 20px;padding:14px var(--pad-x)}
  .nav__brand img{height:44px}

  .section{padding-top:48px;padding-bottom:48px}
  .section--hero{padding-top:56px;padding-bottom:40px}
  .section--flush{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .section--contact-form{padding-bottom:56px}

  .home-hero,
  .split,
  .split--card,
  .contact-grid,
  .contact-form,
  .pay-form{grid-template-columns:1fr}
  .home-hero{gap:32px}
  .home-hero__title{font-size:38px}
  .home-hero__quote{border-left:0;border-top:2px solid rgba(243,242,242,0.35);padding-left:0;padding-top:24px}
  .split{gap:28px}

  .page-title{font-size:32px}

  .grid3,
  .svc-grid,
  .pkg-grid{grid-template-columns:1fr}
  .grid3 > *,
  .pkg-grid > *{padding:24px 0}
  .svc-grid > *{padding:28px 0}
  .grid3 > *:not(:last-child),
  .pkg-grid > *:not(:last-child),
  .svc-grid > *:not(:last-child){
    border-right:0;
    border-bottom:2px solid var(--divider);
  }

  .contact-info{
    padding:24px 0;
    border-right:0;
    border-bottom:2px solid var(--divider);
  }
  .contact-form{padding:24px 0}

  .cta{padding:56px var(--pad-x)}
  .cta h2{font-size:26px}
  .cta__inner{gap:20px}

  .footer{padding:24px}
}

@media (max-width:560px){
  /* Stack the header: logo on its own line, links on the next.
     The nav "Book a call" is dropped here — every page already has
     prominent Book-a-call CTAs in the hero and closing band. */
  .nav{row-gap:12px}
  .nav__brand{flex-basis:100%;margin-right:0}
  .nav__link{font-size:14px}
  .nav .btn{display:none}
}