body{margin:0}img{max-width:100%;height:auto}[hidden]{display:none!important}

/* Layout: agency site in the reference order (utility bar, nav, split hero, about, services grid,
   process, reasons, consultation, footer). White ground, black bands, orange as the single accent.
   The two zeros of "100" recur as rings: icons, portraits and step numbers all sit inside one. */
:root{
  --paper:#ffffff;
  --tint:#fff3e8;
  --ink:#110e0b;
  --ink-soft:#1e1a16;
  --orange:#f15c18;
  --orange-deep:#c2410c;
  --muted:#5e564f;
  --line:#e8e1d9;
  --on-ink:#ffffff;
  --on-ink-muted:#bdb3a9;
  --line-on-ink:#3a332d;
  --error:#b3261e;
  --display:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.6vw,5rem);font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)}
.lede{font-size:1.14rem;color:var(--muted);max-width:60ch}
.stack{display:flex;flex-direction:column;gap:18px}
.stack-lg{display:flex;flex-direction:column;gap:40px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1;padding:16px 26px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--on-ink);text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.orange:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.small{padding:12px 20px;font-size:.92rem}
.on-ink .btn.ghost{color:var(--on-ink);border-color:var(--on-ink)}
.on-ink .btn.ghost:hover{background:var(--on-ink);color:var(--ink)}
.on-ink .btn.orange:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.textlink:hover{color:var(--orange-deep)}

/* utility bar */
.topbar{background:var(--ink);color:var(--on-ink-muted);font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding-block:9px}
.topbar span{white-space:nowrap}
.topbar a{color:var(--on-ink);text-decoration:none}
.topbar a:hover{color:var(--orange)}
.topbar .group{display:flex;flex-wrap:wrap;gap:6px 22px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:800;font-size:1.65rem;letter-spacing:-.03em;line-height:1;text-decoration:none;color:var(--ink)}
.logo b{color:var(--orange);font-weight:800}
.logo small{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a.link{font-weight:600;font-size:.97rem;text-decoration:none;padding-block:6px;border-bottom:2px solid transparent}
.nav-links a.link:hover{border-color:var(--ink)}
.nav-links a.link[aria-current="page"]{border-color:var(--orange)}
.menu-btn{display:none;font:inherit;font-weight:700;font-size:.92rem;background:none;border:2px solid var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink)}
@media (max-width:940px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:10px}
  .nav.open .nav-links{display:flex}
  .nav-links a.link{font-size:1.1rem}
  .nav-links .btn{margin-top:8px}
}

/* bands */
.band{padding-block:clamp(56px,8vw,104px)}
.band.tint{background:var(--tint)}
.band.on-ink{background:var(--ink);color:var(--on-ink)}
.band.on-ink .lede{color:var(--on-ink-muted)}
.band.on-ink .eyebrow{color:var(--orange)}
.head{display:flex;flex-direction:column;gap:16px;max-width:760px}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero h1 em{font-style:normal;color:var(--orange)}
.mark{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
.mark .numeral{font-family:var(--display);font-weight:800;font-size:clamp(8rem,21vw,16.5rem);line-height:.78;letter-spacing:-.06em;color:var(--orange)}
.mark .word{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7.6vw,6rem);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.mark{display:none}}

/* marquee */
.ticker{background:var(--orange);color:var(--ink);overflow:hidden;border-block:2px solid var(--ink)}
.ticker-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker ul{display:flex;flex:none}
.ticker li{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;padding:14px 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.ticker li::after{content:"";width:12px;height:12px;border:3px solid var(--ink);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* about */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:start}
.split > *{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.facts{border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:16px;padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
.facts dt{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--orange-deep)}
.facts dd{margin:0;color:var(--muted)}
.facts dd strong{display:block;color:var(--ink);font-weight:700}
dl.facts{margin:0}
@media (max-width:460px){.facts div{grid-template-columns:1fr;gap:4px}}

/* services */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.svc{padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0;background:var(--paper)}
.svc p{color:var(--muted);font-size:.97rem}
.ring{width:54px;height:54px;border-radius:50%;border:3px solid var(--orange);display:grid;place-items:center;flex:none}
.ring svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc.cta{background:var(--ink);color:var(--on-ink);justify-content:space-between}
.svc.cta p{color:var(--on-ink-muted)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.grid-4{grid-template-columns:1fr}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step}
.step{display:flex;flex-direction:column;gap:14px;min-width:0;counter-increment:step}
.step::before{content:counter(step);width:54px;height:54px;border-radius:50%;border:3px solid var(--orange);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--on-ink)}
.step p{color:var(--on-ink-muted);font-size:.97rem}
.light .step::before{color:var(--ink)}
.light .step p{color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:500px){.steps{grid-template-columns:1fr}}

/* reasons */
.reasons{display:grid;gap:0;border-top:2px solid var(--ink)}
.reasons li{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:8px 28px;padding-block:22px;border-bottom:1px solid var(--line)}
.reasons p{color:var(--muted)}
@media (max-width:640px){.reasons li{grid-template-columns:1fr}}

/* founder teaser + portrait */
.portrait{aspect-ratio:4/5;max-width:100%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait .mono-ring{width:62%;aspect-ratio:1;border-radius:50%;border:clamp(10px,2.4vw,22px) solid var(--orange);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(3rem,9vw,6.5rem);letter-spacing:-.04em;line-height:1}
.portrait figcaption{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-muted)}
.teaser{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.teaser > *{min-width:0}
@media (max-width:760px){.teaser{grid-template-columns:1fr}.teaser .portrait{max-width:300px}}

/* contact + forms */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact-grid > *{min-width:0}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.details{display:grid;gap:0;border-top:1px solid var(--line-on-ink)}
.details li{padding-block:16px;border-bottom:1px solid var(--line-on-ink);display:grid;gap:4px}
.details .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.details .v{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:1.08rem;font-weight:600;overflow-wrap:anywhere}
.light .details{border-color:var(--line)}
.light .details li{border-color:var(--line)}
.light .details .k{color:var(--orange-deep)}
.copy{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:none;color:inherit;border:1px solid currentColor;border-radius:999px;padding:4px 10px;cursor:pointer;opacity:.75}
.copy:hover{opacity:1;color:var(--orange)}
.form{background:var(--paper);color:var(--ink);padding:clamp(22px,3.2vw,36px);display:grid;gap:18px;border:2px solid var(--ink)}
.form.flat{border-width:2px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .lbl{font-weight:700;font-size:.92rem}
.field .hint{font-size:.84rem;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;padding:12px 14px;width:100%;min-width:0}
.field textarea{min-height:130px;resize:vertical}
.field input[type="file"]{padding:10px;border-style:dashed}
.field .err{color:var(--error);font-size:.86rem;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--error)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.94rem}
.check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--orange)}
.notice{border:2px solid var(--ink);background:var(--tint);color:var(--ink);padding:clamp(22px,3.2vw,36px);display:grid;gap:16px}
.notice dl{margin:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.notice dl div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:12px;padding-block:9px;border-bottom:1px solid var(--line);font-size:.95rem}
.notice dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.notice dd{margin:0;overflow-wrap:anywhere}

/* inner page header */
.pagehead{padding-block:clamp(44px,6vw,84px) clamp(28px,4vw,48px);border-bottom:2px solid var(--ink)}
.pagehead .wrap{display:flex;flex-direction:column;gap:18px}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--orange-deep)}

/* founder page */
.founder-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:start}
.founder-grid > *{min-width:0}
@media (max-width:860px){.founder-grid{grid-template-columns:1fr}.founder-grid .portrait{max-width:380px}}
.prose{display:flex;flex-direction:column;gap:18px;max-width:64ch}
.prose p{color:var(--muted)}
.prose p.first{color:var(--ink);font-size:1.2rem;line-height:1.5}
.pull{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;letter-spacing:-.015em;padding-left:22px;border-left:6px solid var(--orange);text-wrap:balance}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--on-ink)}
.timeline li{padding:22px 24px 4px 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.timeline .when{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;color:var(--orange)}
.timeline p{color:var(--on-ink-muted);font-size:.97rem}
@media (max-width:700px){.timeline{grid-template-columns:1fr}}

/* team */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.person{display:flex;flex-direction:column;gap:14px;min-width:0}
.avatar{aspect-ratio:1;max-width:100%;background:var(--tint);display:grid;place-items:center}
.avatar span{width:58%;aspect-ratio:1;border-radius:50%;border:8px solid var(--orange);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:-.03em}
.person.lead .avatar{background:var(--ink);color:var(--on-ink)}
.person .role{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
@media (max-width:900px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.people{grid-template-columns:1fr}}

/* careers */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.role-card{padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0;background:var(--paper)}
.role-card p{color:var(--muted);font-size:.97rem}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:4px 10px}
.role-card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.roles{grid-template-columns:1fr}}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.perks li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--ink);min-width:0}
.perks p{color:var(--muted)}
@media (max-width:640px){.perks{grid-template-columns:1fr}}

/* closing call */
.closing{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.closing h2{max-width:18ch}

/* footer */
footer{background:var(--ink);color:var(--on-ink);border-top:6px solid var(--orange)}
footer .cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px 32px;padding-block:56px 40px}
footer .cols > *{min-width:0}
footer h4{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
footer p,footer li{color:var(--on-ink-muted);font-size:.95rem;overflow-wrap:anywhere}
footer li + li{margin-top:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--orange)}
footer .logo{color:var(--on-ink);margin-bottom:14px}
footer .logo small{color:var(--on-ink-muted)}
footer .base{border-top:1px solid var(--line-on-ink);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--on-ink-muted)}
@media (max-width:860px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){footer .cols{grid-template-columns:1fr}}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--orange);color:var(--ink);padding:10px 14px;font-weight:700}

/* ---------- additions: inner pages, dropdown, photo, FAQ, jobs ---------- */
section[id]{scroll-margin-top:96px}
h1 .eyebrow{display:block;margin-bottom:18px;font-weight:400;line-height:1.4;letter-spacing:.12em}

/* services dropdown */
.drop{position:relative}
.drop-btn{font:inherit;font-weight:600;font-size:.97rem;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:6px 0;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.drop-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.drop-btn:hover{border-color:var(--ink)}
.drop-btn[aria-current="page"]{border-color:var(--orange)}
.drop-menu{display:none;position:absolute;top:100%;left:-18px;min-width:310px;background:var(--paper);border:2px solid var(--ink);padding:8px;z-index:30}
.drop-menu a{display:block;padding:10px 12px;text-decoration:none;font-weight:600;font-size:.95rem}
.drop-menu a:hover{background:var(--tint);color:var(--orange-deep)}
.drop.open .drop-menu{display:block}
@media (hover:hover) and (min-width:941px){
  .drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
  .drop.shut .drop-menu{display:none}
}
@media (max-width:940px){
  .drop{width:100%}
  .drop-btn{font-size:1.1rem}
  .drop-menu{position:static;border:0;border-left:3px solid var(--orange);padding:0 0 0 8px;min-width:0;margin-block:6px}
}

/* founder photo */
.portrait.photo{display:block}
.portrait.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.portrait.photo figcaption{left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(to top,var(--ink),transparent);color:var(--on-ink)}
.avatar.photo{display:block;overflow:hidden;background:var(--ink)}
.avatar.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.person .bio{color:var(--muted);font-size:.93rem;margin-top:6px}

/* service cards on home */
.svc h3 a{text-decoration:none}
.svc h3 a:hover{color:var(--orange-deep)}
.svc .textlink{margin-top:auto;font-size:.92rem;align-self:flex-start}

/* inner page copy */
.copycol{display:flex;flex-direction:column;gap:18px;min-width:0}
.copycol p{color:var(--muted);font-size:1.06rem;max-width:62ch}
.role-card h3{font-size:1.2rem}
.ticks{display:grid;border-top:2px solid var(--ink)}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding-block:16px;border-bottom:1px solid var(--line);align-items:start}
.ticks li::before{content:"";width:8px;height:8px;border:4px solid var(--orange);border-radius:50%;margin-top:5px}
.ticks strong{display:block}
.ticks span{color:var(--muted)}

/* FAQ */
.faqs{display:grid;border-top:2px solid var(--ink);max-width:880px}
.faq{border-bottom:1px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:20px;font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1.6rem;line-height:1;color:var(--orange-deep);flex:none}
.faq[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);padding-bottom:22px;max-width:68ch}

/* related services */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills a{border:2px solid var(--ink);border-radius:999px;padding:10px 18px;font-weight:700;font-size:.95rem;text-decoration:none}
.pills a:hover{background:var(--ink);color:var(--on-ink)}
.related{display:flex;flex-direction:column;gap:20px}

/* job openings */
.jobs{display:grid;border-top:2px solid var(--ink)}
.job{border-bottom:1px solid var(--ink);background:var(--paper)}
.job summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:22px 20px}
.job summary::-webkit-details-marker{display:none}
.job summary h3{order:1}
.job summary::after{order:2;content:"View details";font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.job[open] summary::after{content:"Close"}
.job summary .tags{order:3;grid-column:1/-1}
.job summary:hover h3{color:var(--orange-deep)}
.job-body{padding:0 20px 26px;display:grid;gap:20px}
.job-body > p{color:var(--muted);max-width:70ch}
.job-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.job-cols > div{min-width:0}
.job-cols h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin:0 0 8px;font-weight:500}
.job-cols li{color:var(--muted);padding-left:18px;position:relative}
.job-cols li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.job-cols li + li{margin-top:6px}
@media (max-width:640px){.job-cols{grid-template-columns:1fr}}
.closing .stack{max-width:640px}

/* home hero with the team photo anchored to its bottom edge */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.team-hero{--tw:min(100vw,1500px);background-color:var(--paper);background-repeat:no-repeat;background-position:center bottom;background-size:var(--tw) auto;padding-bottom:calc(var(--tw) * .296);position:relative}
.team-hero .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:clamp(20px,4vw,56px)}
.team-hero .hero-copy{gap:20px;padding-bottom:8px}
.team-hero h1{font-size:clamp(2.3rem,5.3vw,4.15rem);line-height:1.04}
@media (max-width:860px){
  .team-hero .hero-grid{grid-template-columns:1fr}
  .team-hero{--tw:max(100vw,640px)}
}

/* home services: bento tiles */
.head-row{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between}
.ask{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ask p{font-family:var(--display);font-weight:700;font-size:1.1rem}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.tile{grid-column:span 3;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:28px 26px 24px;min-width:0;background:var(--paper);color:var(--ink);border:2px solid var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.tile:hover,.tile:focus-within{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--orange)}
.tile h3{font-size:1.35rem}
.tile h3 a{text-decoration:none;color:inherit}
.tile h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.tile p{color:var(--muted);font-size:.97rem}
.tile .ring{width:60px;height:60px}
.tile .ring svg{width:27px;height:27px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:4px 10px}
.go{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:.92rem;border-top:1px solid var(--line)}
.arrow{width:40px;height:40px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;flex:none;transition:background .18s,color .18s,border-color .18s,transform .18s}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .arrow,.tile:focus-within .arrow{background:var(--orange);border-color:var(--orange);color:var(--ink);transform:translateX(3px)}
.tile.feature{grid-column:span 6;background:var(--ink);color:var(--on-ink);padding:36px 34px 28px}
.tile.feature h3{font-size:clamp(1.8rem,3vw,2.4rem)}
.tile.feature p{color:var(--on-ink-muted);font-size:1.06rem;max-width:44ch}
.tile.feature .ring svg{stroke:var(--on-ink)}
.tile.feature .chips li{border-color:var(--line-on-ink);color:var(--on-ink)}
.tile.feature .go{border-color:var(--line-on-ink)}
.tile.feature > *{position:relative;z-index:1}
.tile.feature .deco{position:absolute;z-index:0;right:-110px;top:-120px;width:270px;height:270px;border-radius:50%;border:44px solid var(--orange)}
.tile.accent{background:var(--orange)}
.tile.accent p{color:var(--ink)}
.tile.accent .ring{border-color:var(--ink)}
.tile.accent .go{border-color:var(--ink)}
.tile.accent:hover,.tile.accent:focus-within{box-shadow:8px 8px 0 var(--ink)}
.tile.accent:hover .arrow,.tile.accent:focus-within .arrow{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
@media (max-width:1040px){.bento{grid-template-columns:repeat(6,minmax(0,1fr))}.tile.feature{grid-column:span 6}}
@media (max-width:600px){.tile{grid-column:span 6}.tile.feature{padding:28px 24px 24px}.tile.feature .deco{right:-150px;top:-150px}}
@media (prefers-reduced-motion:reduce){.tile,.arrow{transition:none}.tile:hover,.tile:focus-within{transform:none}}

/* headings: orange emphasis */
h2 em{font-style:normal;color:var(--orange)}
.on-ink h2 em,.fcard h2 em{color:var(--orange)}
.stack-md{display:flex;flex-direction:column;gap:26px}

/* industries */
.ind-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px 40px;align-items:start;border-top:2px solid var(--ink);padding-top:26px}
.ind-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.05}
.ind-head .eyebrow{font-size:.82rem}
.inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ind{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:22px 20px;background:var(--tint);border-bottom:3px solid var(--orange);min-width:0;transition:background .18s,color .18s}
.ind h3{font-size:1.15rem;margin-bottom:6px}
.ind p{color:var(--muted);font-size:.94rem}
.ind .ring{width:50px;height:50px;background:var(--paper)}
.ind:hover{background:var(--ink);color:var(--on-ink)}
.ind:hover p{color:var(--on-ink-muted)}
@media (max-width:900px){.inds{grid-template-columns:repeat(2,minmax(0,1fr))}.ind-head{grid-template-columns:1fr}}
@media (max-width:560px){.inds{grid-template-columns:1fr}}

/* how we work: connected flow */
.flow-note{max-width:38ch}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 0}
.flow-step{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:40px 28px 0 0;border-top:2px solid var(--line-on-ink);counter-increment:flow}
.flow{counter-reset:flow}
.flow-step::before{content:"";position:absolute;left:0;top:-15px;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:7px solid var(--orange);background:var(--ink);transition:background .18s}
.flow-step:hover::before{background:var(--orange)}
.flow-step .num{font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,6.4vw,5.4rem);line-height:.86;letter-spacing:-.04em;color:var(--orange);transition:color .18s}
.flow-step .num::before{content:"0" counter(flow)}
@supports (-webkit-text-stroke:1px black){
  .flow-step .num{color:transparent;-webkit-text-stroke:2px var(--orange)}
  .flow-step:hover .num{color:var(--orange)}
}
.flow-step h3{font-size:1.6rem;margin-top:6px}
.flow-step p{color:var(--on-ink-muted);font-size:.98rem}
.get{margin-top:auto;padding-top:16px;display:grid;gap:4px}
.get .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.get .v{font-weight:600;font-size:.98rem}
@media (max-width:960px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}

/* meet the founder: feature card */
.fcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--ink);color:var(--on-ink);box-shadow:14px 14px 0 var(--orange)}
.fc-photo{position:relative;min-height:540px;overflow:hidden;min-width:0}
.fc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.fc-tag{position:absolute;left:0;bottom:30px;background:var(--orange);color:var(--ink);padding:14px 26px 14px 24px;display:grid;gap:4px;max-width:calc(100% - 20px)}
.fc-tag strong{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1;letter-spacing:-.02em}
.fc-tag span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.fc-body{position:relative;overflow:hidden;min-width:0;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:22px;justify-content:center}
.fc-body::before{content:"";box-sizing:border-box;position:absolute;right:-118px;top:-128px;width:250px;height:250px;border-radius:50%;border:42px solid var(--orange)}
.fc-body > *{position:relative}
.fc-body .eyebrow{color:var(--orange)}
.fc-body h2{font-size:clamp(2rem,3.8vw,3rem);max-width:14ch}
.fc-body > p{color:var(--on-ink-muted);max-width:54ch}
.fc-body .fc-mission{border-left:4px solid var(--orange);padding-left:18px;font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.3;color:var(--on-ink)}
.fc-mission .k{display:block;font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.fc-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-on-ink)}
.fc-facts div{padding:16px 14px 0 0;min-width:0}
.fc-facts dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-muted)}
.fc-facts dd{margin:4px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.1}
.fcard .btn.ghost{color:var(--on-ink);border-color:var(--on-ink)}
.fcard .btn.ghost:hover{background:var(--on-ink);color:var(--ink)}
.fcard .btn.orange:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
@media (max-width:860px){.fcard{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--orange)}.fc-photo{min-height:0;aspect-ratio:4/4.4}.fc-body::before{right:-150px;top:-160px}}
@media (prefers-reduced-motion:reduce){.ind,.flow-step::before,.flow-step .num{transition:none}}
@media (min-width:900px){.head-row{flex-wrap:nowrap}.head-row .head{min-width:0}.flow-note{flex:0 0 34ch}}

/* social profile links */
.social{display:flex;flex-wrap:wrap;gap:8px}
.social a{border:1px solid currentColor;border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:600;text-decoration:none;line-height:1.2}
.social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
footer .social{margin-top:16px;color:var(--on-ink)}
footer .social a:hover{color:var(--ink)}
.details .v.social{font-size:.84rem}

/* why choose us: side-by-side comparison */
.cmp{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1.12fr);padding-block:16px}
.cmp-row{display:contents}
.cmp-row > div{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;min-width:0}
.cmp-row .c-topic{padding-left:0}
.cmp-row h3{font-size:1.2rem}
.cmp-row p{font-size:1rem}
.c-usual{color:var(--muted)}
.c-ours{background:var(--orange);color:var(--ink);font-weight:600;border-bottom-color:var(--ink)!important}
.mk{width:26px;height:26px;flex:none;border-radius:50%;padding:5px;box-sizing:border-box;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.c-usual .mk{stroke:var(--muted);border:1.5px solid var(--line)}
.c-ours .mk{stroke:var(--on-ink);background:var(--ink)}
.cmp-head > div{border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;align-items:flex-end;padding-block:14px}
.cmp-head .c-ours{background:var(--ink);color:var(--on-ink);margin-top:-16px;padding-top:26px;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;text-transform:none}
.cmp-head .c-ours b{color:var(--orange)}
.cmp-row:last-child .c-ours{margin-bottom:-16px;padding-bottom:38px;border-bottom:0!important}
.cmp-row:last-child > div{border-bottom:0}
.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){
  .cmp{grid-template-columns:1fr;padding-block:0;gap:18px}
  .cmp-row{display:grid;border:2px solid var(--ink)}
  .cmp-head{display:none}
  .cmp-row > div{padding:16px 18px;border-bottom:0}
  .cmp-row .c-topic{padding:16px 18px 0}
  .cmp-row:last-child .c-ours{margin-bottom:0;padding-bottom:16px}
  .lbl{position:static;width:auto;height:auto;clip:auto;display:block;font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
}

/* team page: five across on wide screens, photo hero */
.pagehead.team-hero{padding-bottom:calc(var(--tw) * .296)}
.pagehead.team-hero .lede{max-width:62ch}
@media (min-width:1100px){.people{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:900px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person h3{font-size:1.15rem}

/* why choose us: six reason cards */
.whys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.why{display:flex;flex-direction:column;gap:12px;padding:30px 28px 32px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--orange);min-width:0;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.why:hover{transform:translateY(-4px);border-color:var(--ink);border-top-color:var(--orange);box-shadow:0 14px 30px -18px var(--ink)}
.why-ic{width:56px;height:56px;border-radius:50%;background:var(--tint);display:grid;place-items:center;margin-bottom:6px;transition:background .18s}
.why-ic svg{width:26px;height:26px;fill:none;stroke:var(--orange-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.why:hover .why-ic{background:var(--orange)}
.why:hover .why-ic svg{stroke:var(--ink)}
.why h3{font-size:1.3rem}
.why p{color:var(--muted);font-size:1rem}
@media (max-width:960px){.whys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.whys{grid-template-columns:1fr}.why{padding:24px 22px 26px}}
@media (prefers-reduced-motion:reduce){.why,.why-ic,.why-ic svg{transition:none}.why:hover{transform:none}}

/* simpler footer: logo and socials, three link rows, one base line */
.f-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding-block:44px 30px}
footer .f-top .logo{margin-bottom:0;font-size:1.9rem}
footer .f-top .social{margin-top:0}
.f-rows{border-top:1px solid var(--line-on-ink)}
.f-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 24px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--line-on-ink)}
footer .f-row h4{margin:0}
.f-links{display:flex;flex-wrap:wrap;gap:8px 26px}
footer .f-links li{margin:0;font-size:.95rem;color:var(--on-ink)}
footer .f-links.plain li{color:var(--on-ink-muted)}
footer .base{border-top:0}
@media (max-width:640px){.f-row{grid-template-columns:1fr}.f-top{padding-block:36px 24px}}

.f-locs{gap:14px 48px}
.f-locs li{display:grid;gap:2px}
.f-locs strong{color:var(--on-ink);font-weight:600}
.f-locs a{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}

/* founder page */
h1 em{font-style:normal;color:var(--orange)}
.fhero{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,88px)}
.fhero::before{content:"";box-sizing:border-box;position:absolute;right:-170px;top:-190px;width:520px;height:520px;border-radius:50%;border:70px solid var(--ink-soft)}
.fhero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,80px);align-items:center}
.fhero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.fhero .crumb{color:var(--on-ink-muted)}
.fhero .crumb a:hover{color:var(--orange)}
.fhero .eyebrow{color:var(--orange)}
.fhero h1{font-size:clamp(3rem,8.4vw,6.4rem);line-height:.94}
.fhero .lede{color:var(--on-ink-muted)}
.fhero .fc-facts{max-width:520px}
.fhero .btn.ghost{color:var(--on-ink);border-color:var(--on-ink)}
.fhero .btn.ghost:hover{background:var(--on-ink);color:var(--ink)}
.fhero .btn.orange:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.fhero-photo{position:relative;justify-self:end;width:100%;max-width:430px;aspect-ratio:4/5;box-shadow:-16px 16px 0 var(--orange)}
.fhero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
@media (max-width:860px){.fhero-grid{grid-template-columns:1fr}.fhero-photo{justify-self:start;max-width:360px;margin-left:16px;box-shadow:-12px 12px 0 var(--orange)}}
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,88px);align-items:start}
.story-side{display:flex;flex-direction:column;gap:18px;min-width:0;position:sticky;top:110px}
.story-note{border-left:4px solid var(--orange);padding-left:16px;font-weight:600;max-width:34ch}
.story .copycol p.first{color:var(--ink);font-size:1.22rem;line-height:1.5}
@media (max-width:860px){.story{grid-template-columns:1fr}.story-side{position:static}}
.mission{background:var(--orange);color:var(--ink);padding-block:clamp(48px,7vw,96px)}
.mission .wrap{display:flex;flex-direction:column;gap:20px}
.mission .k{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.mission .big{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.mission .small{max-width:62ch;font-size:1.06rem;font-weight:500}
.whys.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.whys.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.whys.four{grid-template-columns:1fr}}
.on-ink .closing{border-top:1px solid var(--line-on-ink);padding-top:32px}
.on-ink .closing .lede{max-width:60ch}

/* team grid: founder as a wide lead card, then rows of four */
@media (min-width:1100px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person.lead{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;align-content:start}
.person.lead h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.person.lead .bio{font-size:1rem;margin-block:10px 14px}
@media (max-width:380px){.person.lead{grid-column:auto;display:flex}}

/* floating WhatsApp chat button, shown on every page */
.wa{position:fixed;z-index:40;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--on-ink);border:2px solid var(--orange);border-radius:999px;padding:12px 20px 12px 14px;font-weight:700;font-size:.95rem;line-height:1;text-decoration:none;box-shadow:0 12px 26px -12px var(--ink);transition:background .18s,color .18s}
.wa svg{width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.wa:hover{background:var(--orange);color:var(--ink)}
.wa:hover svg{stroke:var(--ink)}
.on-ink .textlink:hover{color:var(--orange)}
footer .base{padding-bottom:84px}
@media (prefers-reduced-motion:reduce){.wa,.wa svg{transition:none}}

/* forms: hidden anti-spam field and send states */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice .fail{font-weight:700;color:var(--error)}
.btn[disabled]{opacity:.6;cursor:progress}

/* buttons inside the pale confirmation panel keep dark text, even when the panel sits in a black section */
.on-ink .notice .btn.ghost,.notice .btn.ghost{color:var(--ink);border-color:var(--ink)}
.on-ink .notice .btn.ghost:hover,.notice .btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.on-ink .notice .btn.orange:hover,.notice .btn.orange:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* services hub on the home page */
.hub{position:relative;width:100%;max-width:470px;aspect-ratio:1/1;margin-top:18px}
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines circle{fill:none;stroke:var(--line);stroke-width:.5;stroke-dasharray:1.2 1.6}
.hub-lines line{stroke:var(--orange);stroke-width:.55}
.hub-core{position:absolute;left:50%;top:44%;width:31%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);color:var(--on-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;box-shadow:0 0 0 8px var(--paper),0 0 0 10px var(--orange)}
.hub-core span{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,2.3vw,1.3rem);letter-spacing:-.03em;line-height:1}
.hub-core b{color:var(--orange)}
.hub-core small{font-family:var(--mono);font-size:clamp(.42rem,1vw,.56rem);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-muted)}
.hub-node{position:absolute;transform:translate(-50%,-34%);width:27%;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center}
.hub-dot{width:clamp(44px,58%,62px);aspect-ratio:1/1;border-radius:50%;background:var(--paper);border:3px solid var(--orange);display:grid;place-items:center;transition:background .18s,transform .18s}
.hub-dot svg{width:46%;height:46%;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hub-label{font-weight:700;font-size:clamp(.68rem,1.5vw,.84rem);line-height:1.15;background:var(--paper);padding:1px 4px}
.hub-node:hover .hub-dot,.hub-node:focus-visible .hub-dot{background:var(--orange);transform:scale(1.08)}
@media (max-width:860px){.hub{margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.hub-dot{transition:none}.hub-node:hover .hub-dot{transform:none}}

/* service page header with illustration */
.ph-grid{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,64px);align-items:center}
.ph-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.art{width:100%;max-width:440px;height:auto;justify-self:end;display:block}
.art .a-tint{fill:var(--tint)}
.art .a-ring{fill:none;stroke:var(--orange);stroke-width:8}
.art .a-or{fill:var(--orange)}
.art .a-ink{fill:var(--ink)}
.art .a-screen{fill:var(--ink-soft)}
.art .a-soft{fill:var(--line-on-ink)}
.art .a-dot{fill:var(--line-on-ink)}
.art .a-bar{fill:var(--on-ink-muted)}
.art .a-bar.hi{fill:var(--orange)}
.art .a-line{fill:none;stroke:var(--on-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.art .a-donut-bg{fill:none;stroke:var(--line-on-ink);stroke-width:13}
.art .a-donut{fill:none;stroke:var(--orange);stroke-width:13}
.art .a-chip{fill:var(--on-ink-muted)}
.art .a-chip.dim{fill:var(--line-on-ink)}
.art .a-badge{fill:var(--paper);stroke:var(--orange);stroke-width:10}
.art .a-icon{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr}.art{justify-self:start;max-width:300px}}

/* who we are: text and diagram side by side */
.about-split{align-items:center}
.hub-wrap{display:flex;justify-content:center;min-width:0}
.hub-wrap .hub{margin-top:0}

/* questions: boxed accordion */
.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:start}
.faq-side{display:flex;flex-direction:column;gap:18px;min-width:0;position:sticky;top:110px}
.faq-split .faqs{max-width:none}
@media (max-width:860px){.faq-split{grid-template-columns:1fr}.faq-side{position:static}}
.faqs{border-top:0;gap:12px}
.faq{border:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);transition:border-color .18s,box-shadow .18s}
.faq:hover{border-color:var(--ink)}
.faq[open]{border-color:var(--ink);box-shadow:6px 6px 0 var(--orange)}
.faq summary{padding:18px 20px;font-size:1.12rem}
.faq summary::after{content:"+";width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:1.25rem;line-height:1;transition:background .18s}
.faq[open] summary::after{content:"\2212";background:var(--orange)}
.faq p{padding:0 20px 20px}
@media (prefers-reduced-motion:reduce){.faq,.faq summary::after{transition:none}}

/* extra pieces used by the service illustrations */
.art .a-paper{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.art .a-paperfill{fill:var(--paper)}
.art .a-tintfill{fill:var(--tint)}
.art .strk{stroke:var(--ink);stroke-width:3}
.art .a-mute{fill:var(--line)}
.art .a-inksoft{fill:var(--ink-soft)}
.art .a-chipw{fill:var(--on-ink)}
.art .a-strk{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.art .a-strk.or{stroke:var(--orange)}
.art .a-strk.thin{stroke-width:2.2}
.art .a-rowline{fill:var(--paper);stroke:var(--line);stroke-width:2}
.art .a-line.thin{stroke-width:2.6}
.art .a-cursor{fill:var(--ink);stroke:var(--paper);stroke-width:2.5;stroke-linejoin:round}
.art .a-txt{font-family:var(--display);font-weight:800;font-size:22px;fill:var(--on-ink)}
.art .a-txt.ink{fill:var(--ink)}
.art .a-txt.sm{font-size:16px}
.art .a-txt.big{font-size:56px}

/* hub: current service marked, and a compact size for inner pages */
.hub-lines line.on{stroke:var(--ink);stroke-width:1}
.hub-node.on .hub-dot{background:var(--orange);border-color:var(--ink)}
.hub.sm{max-width:380px;margin-top:10px}
.hub.sm .hub-label{font-size:.72rem}
.band.tint .hub-label{background:var(--tint)}
.hub.sm .hub-dot{width:clamp(38px,54%,52px)}
.hub.sm .hub-core{box-shadow:0 0 0 6px var(--tint),0 0 0 8px var(--orange)}
.hub.sm .hub-core span{font-size:1.02rem}.hub.sm .hub-core small{font-size:.44rem}
.band.tint .hub-lines circle{stroke:var(--muted);opacity:.45}
@media (max-width:860px){.hub.sm{margin-inline:auto}}

/* Lahore areas diagram on service pages */
.lmap{width:100%;max-width:440px;height:auto;display:block;margin-top:10px;overflow:visible}
.lmap .m-ring{fill:none;stroke:var(--muted);stroke-opacity:.4;stroke-width:1.4;stroke-dasharray:4 6}
.lmap .m-link{stroke:var(--orange);stroke-width:1.6}
.lmap .m-dot{fill:var(--paper);stroke:var(--orange);stroke-width:3.5}
.lmap .m-chip{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.lmap .m-txt{font-family:var(--body);font-weight:700;font-size:12.5px;fill:var(--ink)}
.lmap .m-txt.on{fill:var(--on-ink)}
.lmap .m-pin{fill:var(--ink)}.lmap .m-pin-eye{fill:var(--orange)}
.lmap .m-home{fill:var(--ink)}
@media (max-width:860px){.lmap{margin-inline:auto}}

/* the company logo */
.logo{align-items:center}
.logo img{display:block;height:46px;width:auto;max-width:none}
.nav .wrap{padding-block:10px}
footer .f-top .logo img{height:66px}
.hub-core img{width:74%;height:auto;display:block}
@media (max-width:560px){.logo img{height:40px}footer .f-top .logo img{height:58px}}

/* ================= every screen size ================= */
.nb{white-space:nowrap}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video{max-width:100%}
h1,h2,h3,p,li,dd,a,summary{overflow-wrap:break-word}
.topbar .tb-contact a{white-space:nowrap}

/* text that was too small to read comfortably */
.chips li{font-size:.72rem}
.fc-tag span,.fc-facts dt,.lbl{font-size:.72rem}
.hub-label{font-size:clamp(.72rem,1.5vw,.84rem)}

/* tablets and phones: one slim line above the menu, the social links stay in the footer */
@media (max-width:860px){
  .topbar .tb-social{display:none}
  .topbar .wrap{flex-wrap:nowrap;padding-block:3px}
  .topbar .group{flex-wrap:nowrap;justify-content:space-between;width:100%;min-width:0;gap:6px 16px}
  .topbar a{display:inline-block;padding-block:7px}
  .nav-links a.link,.drop-btn{padding-block:10px}
  .drop-menu a{padding-block:12px}
}
@media (max-width:440px){.topbar .tb-mail{display:none}}

/* phones: the whole team stays in view, and the chat button shrinks to an icon so it does not cover the page */
@media (max-width:640px){
  .wa{padding:14px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .btn-row .btn{flex:1 1 auto;text-align:center;justify-content:center}
}
@media (max-width:380px){
  .wrap{padding-inline:16px}
  h1{font-size:2.3rem}.team-hero h1{font-size:2.15rem}
  h2{font-size:1.75rem}
}

/* phones held sideways: the menu bar scrolls away with the page instead of taking a fifth of the screen */
@media (max-height:480px){.nav{position:static}.faq-side{position:static}}

/* touch screens: links and buttons big enough for a finger */
@media (pointer:coarse){
  .topbar a{display:inline-block;padding-block:8px}
  .topbar .wrap{padding-block:2px}
  footer .f-links{gap:0 26px}
  footer .f-links a{display:inline-block;padding-block:9px}
  .pills a,.social a{min-height:42px;display:inline-flex;align-items:center}
  .textlink{display:inline-block;padding-block:8px}
  .copy{min-height:36px}
}

/* large monitors and TVs: everything scales up instead of sitting small in the middle */
@media (min-width:1800px){html{font-size:112.5%}.wrap{max-width:1340px}.team-hero{--tw:min(100vw,1700px)}.hub{max-width:520px}.art{max-width:500px}}
@media (min-width:2400px){html{font-size:131.25%}.wrap{max-width:1600px}.team-hero{--tw:min(100vw,2000px)}.hub{max-width:600px}.art{max-width:580px}.logo img{height:58px}}

/* the floating chat button is an icon on phones and tablets */
@media (max-width:860px){
  .wa{padding:14px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fhero-photo{width:calc(100% - 16px)}
}
/* tablets: keep picture and text side by side instead of stacking them */
@media (min-width:600px) and (max-width:860px){
  .ph-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px}
  .art{justify-self:end;max-width:300px}
  .fhero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px}
  .fhero-photo{justify-self:end;margin-left:0;max-width:300px;width:calc(100% - 12px)}
  .fhero h1{font-size:clamp(2.6rem,7vw,3.6rem)}
  .fcard{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .fc-photo{aspect-ratio:auto;min-height:440px}
}

/* apply page on one column: checklist, then the form, then what happens next */
@media (max-width:860px){
  .apply-grid > .stack-lg{display:contents}
  .apply-grid > .stack-lg > .stack:first-child{order:1}
  .apply-grid > div:last-child{order:2}
  .apply-grid > .stack-lg > .stack:last-child{order:3}
}

/* a long open menu scrolls inside the screen instead of running off the bottom */
@media (max-width:860px){.nav.open .nav-links{max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;flex-wrap:nowrap}}
@media (max-width:860px) and (max-height:480px){.nav.open .nav-links{max-height:none;overflow:visible}}

/* phones and tablets: the team photo is a normal picture that always fits the screen width */
.team-strip{display:none}
@media (max-width:860px){
  .team-hero,.pagehead.team-hero{background-image:none!important;padding-bottom:0}
  .team-strip{display:block;width:100%;max-width:100%;height:auto;margin:28px auto 0}
  .hero.team-hero .team-strip{margin-top:20px}
}