/* PNG Solutions shared styles. Used by index.html and every blog page. */
:root{
  --ink:#14232b;
  --ink-soft:#3d4f58;
  --ink-mute:#6b7c85;
  --teal:#2f8e8b;
  --teal-dark:#226b6a;
  --teal-pale:#eaf3f2;
  --paper:#ffffff;
  --paper-warm:#f6f5f2;
  --rule:#dedbd5;
  --rule-soft:#eceae5;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:-.01em}
strong{color:var(--ink);font-weight:600}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 28px}
.measure{max-width:660px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead .row{display:flex;align-items:center;justify-content:space-between;gap:32px;height:80px}
.masthead .logo img{height:30px;width:auto}
.masthead nav ul{list-style:none;display:flex;gap:30px;align-items:center}
.masthead nav a{font-size:15px;font-weight:500;color:var(--ink-soft);text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.masthead .tel{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.masthead .tel:hover{color:var(--teal-dark)}

.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;padding:13px 24px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;border-radius:2px;cursor:pointer}
.btn:hover{background:#000;border-color:#000;color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:var(--teal-pale);border-color:var(--teal-pale);color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:88px 0 76px;border-bottom:1px solid var(--rule)}
.hero .kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:22px}
.hero h1{font-size:clamp(38px,5.4vw,60px);margin-bottom:24px;letter-spacing:-.022em}
.hero .lede{font-size:20px;line-height:1.55;max-width:600px;margin-bottom:32px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .note{margin-top:26px;font-size:15px;color:var(--ink-mute)}

/* ---------- generic section ---------- */
.section{padding:76px 0;border-bottom:1px solid var(--rule)}
.section.warm{background:var(--paper-warm)}
.section-head{margin-bottom:44px}
.section-head .label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:14px}
.section-head h2{font-size:clamp(28px,3.6vw,38px);margin-bottom:16px}
.section-head p{max-width:620px;font-size:18px}

/* ---------- services as a ruled list ---------- */
.svc{border-top:1px solid var(--rule)}
.svc-item{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--rule)}
.svc-item h3{font-size:23px;margin-bottom:8px}
.svc-item .who{font-size:14px;color:var(--ink-mute)}
.svc-item p{margin-bottom:12px}
.svc-item .more{font-size:15px;font-weight:600}

/* ---------- specialties ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.band .spec-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.band .spec-col h3 a{color:inherit;text-decoration:none}
.band .spec-col h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.spec-col{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 26px}
.spec-col h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:14px}
.spec-col ul{list-style:none;font-size:15px}
.spec-col li{padding:5px 0;border-bottom:1px solid var(--rule-soft)}
.spec-col li:last-child{border-bottom:0}

/* ---------- process ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-left:1px solid var(--rule)}
.step{counter-increment:s;padding:0 30px;border-right:1px solid var(--rule)}
.step::before{content:"Step " counter(s);display:block;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:10px}
.step p{font-size:16px}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:44px}
.quote{border-top:1px solid var(--rule);padding-top:20px}
.quote blockquote{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:14px}
.quote cite{font-style:normal;font-size:15px;color:var(--ink-mute);display:block}
.quote cite b{display:block;color:var(--ink);font-weight:600}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.facts{border-top:1px solid var(--rule)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:16px}
.facts dt{color:var(--ink-mute)}
.facts dd{color:var(--ink);font-weight:600;text-align:right}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:20px 0;font-family:var(--serif);font-size:19px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--teal-dark);flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 22px;max-width:720px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
address{font-style:normal}
.ci{border-top:1px solid var(--rule)}
.ci div{padding:16px 0;border-bottom:1px solid var(--rule)}
.ci dt{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:5px}
.ci dd{font-size:16px;color:var(--ink)}
form .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:2px;padding:11px 13px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}
textarea{min-height:120px;resize:vertical}
.consent{font-size:14px;color:var(--ink-mute);margin-top:14px}

/* ---------- tech band ---------- */
.band{background:var(--ink);color:rgba(255,255,255,.76);padding:76px 0;border-bottom:1px solid var(--ink)}
.band h2,.band h3{color:#fff}
.band .section-head .label{color:#7fc9c6}
.band .section-head p{color:rgba(255,255,255,.76)}
.band .spec-grid{border-top-color:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.16)}
.band .spec-col{border-right-color:rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16)}
.band .spec-col h3{color:#7fc9c6}
.band .spec-col li{border-bottom-color:rgba(255,255,255,.1)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.66);padding:64px 0 30px;font-size:15px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
footer h4{font-family:var(--sans);color:#fff;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:rgba(255,255,255,.66);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .mark img{height:62px;width:auto;margin-bottom:18px}
footer .legal{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.5)}

@media(max-width:900px){
  .spec-grid,.band .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .svc-item{grid-template-columns:1fr;gap:10px}
  footer .cols{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;border-left:0}
  .step{border-right:0;border-left:1px solid var(--rule);padding:0 0 26px 26px}
}
@media(max-width:600px){
  .spec-grid,.band .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body{font-size:16px}
  .hero{padding:56px 0 48px}
  .section,.band{padding:52px 0}
  .masthead .row{height:66px}
  form .pair{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .quotes{gap:32px}
}

/* ---------- standalone page head ---------- */
.page-head{padding:44px 0 52px;border-bottom:1px solid var(--rule)}
.page-head .breadcrumbs{font-size:14px;color:var(--ink-mute);margin-bottom:20px}
.page-head .breadcrumbs a{color:var(--ink-mute)}
.page-head .breadcrumbs a:hover{color:var(--ink)}
.page-head .kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:16px}
.page-head h1{font-size:clamp(32px,4.8vw,50px);letter-spacing:-.022em;margin-bottom:18px;max-width:900px}
.page-head .lede{font-size:19px;line-height:1.55;max-width:660px}

/* ---------- prose blocks inside pages ---------- */
.prose{max-width:760px}
.prose p{margin-bottom:20px}
.prose h2{font-size:clamp(24px,3vw,32px);margin:40px 0 14px}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 22px 24px}
.prose li{margin-bottom:9px}
.prose>*:first-child{margin-top:0}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:36px}}

.callout{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;margin:28px 0}
.callout p{font-size:16px;color:var(--ink-soft)}
.callout p:last-child{margin-bottom:0}

@media(max-width:1080px){.band .spec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.band .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.band .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- footer social column ---------- */
footer .social h4{margin-bottom:16px}
footer .social ul{list-style:none}
footer .social li{margin-bottom:9px}


/* ---------- mobile menu ---------- */
/* The button only exists when JS is present. Without JS the nav stays
   visible, so the links are never unreachable and always in the DOM for
   crawlers, whether the menu is open or shut. */
.menu-btn{display:none;background:none;border:1px solid var(--rule);border-radius:2px;
          padding:10px 11px;cursor:pointer;flex-direction:column;gap:4px;align-items:center}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

@media(max-width:900px){
  .masthead .row{height:66px;gap:12px}
  .masthead .logo img{height:26px}
  .masthead .tel{margin-left:auto;border:1px solid var(--ink);border-radius:2px;
                 padding:9px 13px;font-size:14px;display:inline-block}
  .masthead .tel:hover{background:var(--ink);color:#fff}
  .has-js .menu-btn{display:flex}

  .has-js .masthead nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);
                        border-bottom:1px solid var(--rule);display:none;z-index:60}
  .has-js .masthead nav.open{display:block}
  .masthead{position:relative}
  .masthead nav ul{flex-direction:column;gap:0;align-items:stretch}
  .masthead nav li{border-top:1px solid var(--rule-soft)}
  .masthead nav li:first-child{border-top:0}
  .masthead nav a{display:block;padding:15px 28px;font-size:16px}
  .masthead nav a[aria-current]{text-decoration:none;color:var(--ink);font-weight:600}

  /* no JS: keep the links on screen rather than trapped behind a dead button */
  html:not(.has-js) .masthead .row{flex-wrap:wrap;height:auto;padding-top:14px}
  html:not(.has-js) .masthead nav{flex-basis:100%;position:static;display:block;border:0}
  html:not(.has-js) .masthead nav ul{flex-direction:row;flex-wrap:wrap;gap:14px 20px;padding-bottom:12px}
  html:not(.has-js) .masthead nav a{padding:0;font-size:14px}
}
@media(max-width:420px){
  .masthead .tel{padding:8px 10px;font-size:13px}
  .masthead .logo img{height:23px}
}

/* ---------- mobile density: same content, less scrolling ---------- */
@media(max-width:600px){
  .section,.band{padding:40px 0}
  .section-head{margin-bottom:28px}
  .spec-col{padding:16px 14px}
  .spec-col h3{font-size:12px;margin-bottom:10px}
  .spec-col ul{font-size:14px}
  .spec-col li{padding:4px 0}
  .svc-item{padding:22px 0}
  .svc-item h3{font-size:20px}
  .step{padding-bottom:20px}
  .facts div{padding:12px 0;font-size:15px}
  .ci div{padding:13px 0}
  .quotes{gap:26px}
  .hero{padding:44px 0 40px}
  .hero .lede{font-size:18px;margin-bottom:26px}
  footer{padding:44px 0 24px}
  footer .cols{gap:28px;padding-bottom:30px}
}
@media(max-width:339px){
  .spec-grid,.band .spec-grid{grid-template-columns:minmax(0,1fr)}
}