/*
Theme Name: NeverBlue IT
Theme URI: https://www.neverblueit.com
Author: NeverBlue IT
Description: Custom theme for NeverBlue IT. Typography-first design system, answer-engine optimized markup, built-in lead and support forms.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: neverblue
*/

/* ==========================================================================
   NeverBlue IT — Design System v1
   Typography-first. Cream field, plum ink, orange reserved for action.
   Rounded-square motif drawn from the logo. No slop.
   ========================================================================== */

:root{
  /* palette */
  --cream:#FBF6EE;
  --cream-deep:#F3EBDF;
  --paper:#FFFFFF;
  --ink:#2C2530;
  --plum:#635461;
  --plum-deep:#4A3E4D;
  --orange:#F76B17;
  --orange-deep:#E05F0F;
  --rust:#BF412C;
  --yellow:#FFC957;
  --line:rgba(99,84,97,.16);
  --line-soft:rgba(99,84,97,.09);

  /* type */
  --display:"aglet-sans","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:"adelle-sans","open-sans","Segoe UI",system-ui,sans-serif;

  /* scale */
  --step--1:clamp(.83rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.55rem);
  --step-2:clamp(1.6rem,1.4rem + 1vw,2.2rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.3rem);
  --step-4:clamp(2.8rem,2rem + 3.6vw,5rem);
  --step-5:clamp(3.4rem,2.2rem + 5.6vw,7rem);

  --space:clamp(4.5rem,3rem + 6vw,8.5rem);   /* section rhythm */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --r-sq:26%;                                 /* the rounded-square */
  --maxw:1200px;
  --shadow:0 2px 6px rgba(44,37,48,.05),0 18px 44px rgba(44,37,48,.09);
  --head-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* The off-canvas mobile drawer is position:fixed and parked to the right of the
   viewport. Clipping at the root stops it from creating a horizontal scrollbar
   on phones. overflow-x:clip is used rather than hidden so position:sticky keeps
   working; body keeps hidden as the fallback for older Safari. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
/* paper grain — the anti-flat layer */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:var(--rust);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{max-width:68ch}
strong{color:var(--plum-deep)}
::selection{background:var(--yellow);color:var(--ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space)}
.section--paper{background:var(--paper);border-block:1px solid var(--line-soft)}
.section--deep{background:var(--cream-deep)}
.section--plum{background:var(--ink);color:var(--cream)}
.section--plum h2,.section--plum h3,.section--plum h4{color:var(--cream)}
.section--plum p{color:rgba(251,246,238,.82)}

/* eyebrow — small caps label that starts every section */
.eyebrow{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--display);font-weight:700;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust);margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:.72em;height:.72em;background:var(--orange);
  border-radius:26%;transform:rotate(14deg);flex:none;
}
.section--plum .eyebrow{color:var(--yellow)}

.lede{font-size:var(--step-1);line-height:1.5;color:var(--plum-deep);max-width:34ch}
p.sub{font-size:var(--step-1);line-height:1.55;color:var(--plum);max-width:56ch;font-weight:400}

/* ---------- buttons: orange holds ink text; plum holds cream. AA-safe. */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  padding:.95rem 1.9rem;border-radius:14px;border:0;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  text-decoration:none !important;
}
.btn--primary{background:var(--orange);color:var(--ink);box-shadow:0 10px 26px rgba(247,107,23,.32)}
.btn--primary:hover{background:var(--orange-deep);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{background:var(--plum-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--plum)}
.btn--lg{padding:1.15rem 2.3rem;font-size:1.12rem}
.section--plum .btn--ghost{color:var(--cream);box-shadow:inset 0 0 0 2px rgba(251,246,238,.35)}

/* text-arrow link */
.tlink{font-family:var(--display);font-weight:700;color:var(--rust);white-space:nowrap}
.tlink::after{content:" \2192";transition:margin .15s}
.tlink:hover{text-decoration:none}
.tlink:hover::after{margin-left:.3rem}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{display:flex;align-items:center;gap:1.6rem;min-height:76px}
.brand{flex:none;display:block}
.brand img{height:54px;width:auto;max-width:none}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav>div{position:relative}
.nav a.top,.nav button.top{
  font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);
  padding:.55rem .85rem;border-radius:10px;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;white-space:nowrap;
}
.nav a.top:hover,.nav button.top:hover{background:var(--cream-deep);text-decoration:none}
.nav .caret{width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:265px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:var(--shadow);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;
}
.nav>div:hover .menu,.nav>div:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:.6rem .85rem;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--plum-deep)}
.menu a:hover{background:var(--cream);text-decoration:none}
.menu a small{display:block;font-weight:400;color:var(--plum);font-size:.8rem}
.head-utils{display:flex;align-items:center;gap:1rem}
.support-link{font-size:.92rem;font-weight:600;color:var(--plum)}
.head-phone{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);white-space:nowrap}
.head-phone:hover{text-decoration:none;color:var(--rust)}
.head-cta{padding:.68rem 1.15rem;font-size:.92rem}
.support-link{white-space:nowrap}
@media (max-width:1600px){.nav a.top,.nav button.top{padding:.55rem .6rem;font-size:.93rem}.nav{gap:.05rem}}
@media (max-width:1500px){.support-link{display:none}}
@media (max-width:1280px){.head-phone{display:none}}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{display:block;width:25px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.22s}

/* mobile drawer */
.drawer{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(4rem,9vw,8rem) var(--space);overflow:clip}
.hero h1{max-width:20ch;font-size:clamp(2.5rem,1.2rem + 3.7vw,4.15rem);text-wrap:initial}
@media (max-width:520px){.hero h1 br{display:none}.hero h1{text-wrap:balance}}
.hero h1 em{font-style:normal;color:var(--rust)}
.hero .sub{margin-top:1.6rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;align-items:center}
.hero-note{margin-top:1.1rem;font-size:.95rem;color:var(--plum)}
.hero-facts{display:flex;flex-wrap:wrap;gap:.9rem 2.4rem;margin-top:3.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.fact{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--plum-deep);display:flex;gap:.6rem;align-items:baseline}
.fact b{color:var(--rust);font-size:1.35rem}

/* floating logo squares (decor, hidden on small) */
.squares{position:absolute;inset:0;pointer-events:none;z-index:-1}
.squares i{position:absolute;border-radius:24%;display:block}
@media (max-width:1080px){.squares{display:none}}

/* ---------- imagery: the rounded-square mask system ---------- */
.mask{border-radius:26px;overflow:hidden;position:relative}
.mask--tilt{border-radius:14% 20% 16% 22%;}
.mask img{width:100%;height:100%;object-fit:cover}
.frame{position:relative}
.frame::after{ /* offset yellow keyline echoing the logo bug */
  content:"";position:absolute;inset:auto -14px -14px auto;width:52%;height:52%;
  border:4px solid var(--yellow);border-radius:22px;z-index:-1;
}
.frame::before{ /* the NeverBlue logo bug, peeking from the bottom-left like the old covers */
  content:"";position:absolute;left:-34px;bottom:-30px;width:92px;height:92px;z-index:2;
  background:url("assets/img/logo-mark.png") no-repeat center/contain;
  filter:drop-shadow(0 6px 14px rgba(44,37,48,.18));
}
.bug{position:absolute;width:86px;height:86px;z-index:2;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(44,37,48,.18))}

/* ---------- asymmetric split ---------- */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--rev{grid-template-columns:5fr 7fr}
.split--rev>*:first-child{order:2}
@media (max-width:880px){.split,.split--rev{grid-template-columns:1fr}.split--rev>*:first-child{order:0}}

/* ---------- service index / cards (uneven by design) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.3rem;margin-top:3rem}
.svc{
  grid-column:span 4;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:22px;padding:2rem 1.8rem;position:relative;
  transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;gap:.7rem;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc h3{font-size:var(--step-1)}
.svc p{font-size:.96rem;color:var(--plum)}
.svc .tlink{margin-top:auto;font-size:.95rem}
.svc--wide{grid-column:span 8;flex-direction:row;align-items:center;gap:2rem}
.svc--feature{background:var(--ink);border:0}
.svc--feature h3{color:var(--cream)}
.svc--feature p{color:rgba(251,246,238,.78)}
.svc--feature .tlink{color:var(--yellow)}
.svc .glyph{width:46px;height:46px;border-radius:26%;transform:rotate(10deg);background:var(--cream-deep);display:grid;place-items:center;margin-bottom:.4rem}
.svc .glyph svg{width:23px;height:23px;stroke:var(--rust);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-10deg)}
.svc--feature .glyph{background:rgba(255,201,87,.16)}
.svc--feature .glyph svg{stroke:var(--yellow)}
.badge-new{
  position:absolute;top:1.2rem;right:1.2rem;font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.12em;background:var(--yellow);color:var(--ink);
  padding:.28rem .7rem;border-radius:999px;
}
@media (max-width:880px){.svc,.svc--wide{grid-column:span 12}.svc--wide{flex-direction:column;align-items:flex-start}}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{padding:1.9rem 1.2rem;border-radius:20px;background:var(--paper);border:1px solid var(--line-soft);text-align:left}
.stat b{font-family:var(--display);font-size:var(--step-3);font-weight:700;color:var(--rust);display:block;line-height:1}
.stat span{font-size:.95rem;color:var(--plum);display:block;margin-top:.5rem}
@media (max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.stats{grid-template-columns:1fr 1fr;gap:.8rem}.stat{padding:1.3rem 1rem}}

/* ---------- checklist ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.4rem;margin-top:2rem;list-style:none}
.checks li{display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--line-soft);align-items:flex-start;font-size:1rem}
.checks li::before{
  content:"";flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem;
  background:var(--orange);border-radius:26%;transform:rotate(12deg);
}
.checks li b{display:block;font-family:var(--display)}
.checks li span{color:var(--plum);font-size:.94rem}
@media (max-width:760px){.checks{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem;counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line-soft);border-radius:20px;padding:1.8rem 1.5rem;position:relative}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  color:var(--cream);background:var(--plum-deep);border-radius:10px;padding:.32rem .7rem;
  display:inline-block;margin-bottom:1.1rem;
}
.step:nth-child(1)::before{background:var(--rust)}
.step:nth-child(4)::before{background:var(--orange);color:var(--ink)}
.step h4{margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--plum)}
@media (max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 1.6rem;margin-top:3.2rem}
.person{position:relative}
.person .ph{
  aspect-ratio:1/1.06;border-radius:16% 20% 15% 21%;overflow:hidden;
  background:linear-gradient(160deg,var(--cream-deep),#EADFCE);
  position:relative;
}
.person .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(99,84,97,.32),rgba(247,107,23,.10) 55%,transparent);mix-blend-mode:multiply}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.86) contrast(1.02);transition:transform .3s ease}
.person:hover .ph img{transform:scale(1.03)}
.person h4{margin-top:1.1rem;font-size:1.18rem}
.person .role{font-size:.9rem;font-weight:700;color:var(--rust);letter-spacing:.04em;text-transform:uppercase;font-family:var(--display)}
.person p{font-size:.93rem;color:var(--plum);margin-top:.5rem}
@media (max-width:880px){.people{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.people{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-top:2.6rem}
.faq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;
  font-family:var(--display);font-weight:700;font-size:var(--step-1);padding:1.15rem 0;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:1.5em;color:var(--rust);line-height:1;flex:none;
  transition:transform .2s;font-weight:400;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.4rem;color:var(--plum);max-width:62ch}

/* ---------- calculator ---------- */
.calc{
  background:var(--ink);border-radius:28px;padding:clamp(1.8rem,4vw,3.2rem);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.4rem);
  color:var(--cream);position:relative;overflow:hidden;
}
.calc::before{content:"";position:absolute;width:440px;height:440px;border-radius:26%;transform:rotate(18deg);background:rgba(247,107,23,.14);top:-190px;right:-140px}
.calc>*{position:relative}
.calc h3{color:var(--cream)}
.calc .ranges{display:grid;gap:1.6rem;margin-top:2rem}
.range label{display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:.95rem;margin-bottom:.5rem;color:rgba(251,246,238,.9)}
.range output{color:var(--yellow)}
input[type=range]{
  width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;
  background:rgba(251,246,238,.22);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:28%;
  background:var(--orange);cursor:pointer;border:3px solid var(--cream);transform:rotate(10deg);
}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:28%;background:var(--orange);cursor:pointer;border:3px solid var(--cream)}
.calc-out{background:rgba(251,246,238,.07);border:1px solid rgba(251,246,238,.14);border-radius:20px;padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.calc-row{display:flex;justify-content:space-between;gap:1rem;font-size:.97rem;color:rgba(251,246,238,.85)}
.calc-row b{font-family:var(--display)}
.calc-big{border-top:1px solid rgba(251,246,238,.16);padding-top:1.1rem}
.calc-big .n{font-family:var(--display);font-weight:700;font-size:var(--step-3);color:var(--yellow);line-height:1.05}
.calc-big .l{font-size:.9rem;color:rgba(251,246,238,.7)}
.calc-note{font-size:.8rem;color:rgba(251,246,238,.55)}
@media (max-width:880px){.calc{grid-template-columns:1fr}}

/* ---------- pricing tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch;margin-top:1rem}
.tier{background:var(--paper);border:1px solid var(--line-soft);border-radius:24px;padding:2.2rem 1.9rem;display:flex;flex-direction:column;gap:.9rem;position:relative}
.tier--hi{background:var(--ink);border:0;transform:scale(1.03);box-shadow:var(--shadow-lg)}
.tier--hi h3,.tier--hi .price{color:var(--cream)}
.tier--hi .tier-line{color:rgba(251,246,238,.85)}
.tier--hi ul{color:rgba(251,246,238,.95)}
.tier--hi .tier-onsite{background:rgba(255,201,87,.15);color:var(--yellow)}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(90deg,var(--orange),var(--yellow));color:var(--ink);padding:.35rem .95rem;border-radius:999px;white-space:nowrap}
.tier h3{font-size:1.45rem}
.tier-line{font-size:.92rem;color:var(--plum)}
.price{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--ink);margin-top:.3rem}
.price .from{font-size:.85rem;color:var(--plum);font-weight:600;margin-right:.3rem;vertical-align:.9rem}
.tier--hi .price .from{color:rgba(251,246,238,.6)}
.price .per{font-size:.95rem;color:var(--plum);font-weight:600}
.tier--hi .price .per{color:rgba(251,246,238,.6)}
.tier-onsite{font-family:var(--display);font-weight:700;font-size:.85rem;background:var(--cream-deep);color:var(--rust);border-radius:10px;padding:.5rem .8rem;display:inline-block}
.tier ul{list-style:none;display:grid;gap:.45rem;font-size:.93rem;color:var(--plum-deep);margin:.4rem 0 1rem}
.tier ul li{padding-left:1.35rem;position:relative}
.tier ul li::before{content:"";position:absolute;left:0;top:.35em;width:.65em;height:.65em;background:var(--orange);border-radius:26%;transform:rotate(12deg)}
.tier .btn{margin-top:auto}
@media (max-width:920px){.tiers{grid-template-columns:1fr}.tier--hi{transform:none}}

/* plan radios inside calculator */
.plans{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap}
.plan{cursor:pointer}
.plan input{position:absolute;opacity:0}
.plan span{display:flex;flex-direction:column;gap:.1rem;border:1.5px solid rgba(251,246,238,.25);border-radius:14px;padding:.6rem 1.1rem;transition:.16s}
.plan b{font-family:var(--display);font-size:.95rem;color:var(--cream)}
.plan i{font-style:normal;font-size:.78rem;color:rgba(251,246,238,.65)}
.plan input:checked + span{border-color:var(--orange);background:rgba(247,107,23,.16)}
.plan input:focus-visible + span{outline:2px solid var(--yellow)}

/* cadence cards (home onsite section) */
.cadence{display:grid;gap:1rem}
.cad{background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:1.4rem 1.6rem;display:flex;gap:1.2rem;align-items:baseline;box-shadow:var(--shadow)}
.cad b{font-family:var(--display);font-size:1.25rem;color:var(--rust);min-width:5.2rem}
.cad span{font-size:.93rem;color:var(--plum)}
.cad--hi{background:var(--ink);border:0}
.cad--hi b{color:var(--yellow)}
.cad--hi span{color:rgba(251,246,238,.8)}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(115deg,var(--rust),var(--orange) 78%);
  border-radius:30px;padding:clamp(2.6rem,6vw,4.6rem);position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;width:300px;height:300px;border-radius:26%;transform:rotate(20deg);background:rgba(255,255,255,.1);bottom:-130px;right:-80px}
.cta-band h2{color:#fff;font-size:var(--step-3);max-width:20ch}
.cta-band p{color:rgba(255,255,255,.92);margin-top:.9rem;max-width:52ch}
.cta-band .row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;align-items:center;position:relative;z-index:1}
.cta-band .btn--light{background:#fff;color:var(--ink)}
.cta-band .btn--light:hover{transform:translateY(-2px)}
.cta-band .phone{font-family:var(--display);font-weight:700;color:#fff;font-size:1.05rem}

/* ---------- page hero (interior) ---------- */
.page-hero{padding-block:clamp(3.4rem,7vw,6rem) clamp(2.6rem,5vw,4rem)}
.page-hero .crumbs{font-size:.85rem;color:var(--plum);margin-bottom:1.6rem}
.page-hero .crumbs a{color:var(--plum)}
.page-hero h1{font-size:var(--step-4);max-width:16ch}
.page-hero .answer{
  margin-top:1.6rem;font-size:var(--step-1);line-height:1.55;color:var(--plum-deep);
  max-width:56ch;padding-left:1.4rem;border-left:4px solid var(--orange);
}

/* prose blocks on interior pages */
.prose{max-width:68ch}
.prose p{margin-bottom:1.15rem}
.prose h3{margin:2.4rem 0 .9rem}
.prose ul{margin:0 0 1.15rem 1.2rem}
.prose li{margin-bottom:.4rem}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(251,246,238,.75);margin-top:var(--space);padding:4.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.6rem}
.site-foot img{height:46px;width:auto;margin-bottom:1.1rem}
.soc{display:flex;gap:.7rem;margin-top:1.2rem}
.soc a{display:block;width:38px;height:38px;transition:transform .16s, filter .16s;border-radius:9px}
.soc a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.soc svg{display:block;width:100%;height:100%}
.state-row{display:flex;gap:.8rem;align-items:flex-start}
.state-row .state-ic{flex:none;width:34px;height:34px;object-fit:contain;margin-top:.1rem;opacity:.95}
.site-foot h5{font-family:var(--display);color:var(--cream);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.site-foot a{display:block;color:rgba(251,246,238,.72);padding:.28rem 0;font-size:.95rem}
.site-foot a:hover{color:var(--yellow);text-decoration:none}
.site-foot p{font-size:.95rem}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(251,246,238,.14);margin-top:3.4rem;padding-top:1.6rem;font-size:.82rem;color:rgba(251,246,238,.45)}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:grid;gap:1.1rem;max-width:520px}
.form label{font-family:var(--display);font-weight:700;font-size:.92rem}
.form input,.form select,.form textarea{
  width:100%;padding:.85rem 1rem;margin-top:.35rem;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;background:var(--paper);color:var(--ink);
}
.form input:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.form .opt{color:var(--plum);font-weight:400;font-size:.8rem}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.1s}.rv3{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .person:hover .ph img{transform:none}
}

/* ---------- responsive nav ---------- */
@media (max-width:1080px){
  .nav,.head-utils .support-link,.head-utils .head-phone{display:none}
  .head-utils .head-cta{display:none}
  .burger{display:block}
  .drawer{
    display:block;position:fixed;inset:0;z-index:200;background:var(--cream);
    padding:6rem 1.6rem 2.5rem;transform:translateX(102%);transition:transform .28s ease;
    overflow-y:auto;
  }
  .drawer.open{transform:none}
  .drawer a{display:block;font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
  .drawer .grp{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-family:var(--display);font-weight:700;margin:1.4rem 0 .2rem}
  .drawer .sub a{font-size:1.02rem;font-weight:600;color:var(--plum-deep);border:0;padding:.5rem 0 .5rem .9rem}
  .drawer .btn{width:100%;justify-content:center;margin-top:1.6rem}
  .drawer .phone-row{margin-top:1rem;text-align:center;font-family:var(--display);font-weight:700}
  body.locked{overflow:hidden}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);padding:.7rem 1.2rem;z-index:999;font-weight:700}
.skip:focus{left:0}

/* ---------- partner marquee ---------- */
.pstrip{background:var(--paper);border-block:1px solid var(--line-soft);padding:1.6rem 0 1.9rem}
.pstrip-label{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);margin-bottom:1.1rem;text-align:center}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:pscroll 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes pscroll{to{transform:translateX(-25%)}}
.pitem{display:inline-flex;align-items:center;gap:.65rem;color:var(--plum);opacity:.75;white-space:nowrap;margin-right:4.2rem}
.pitem svg{width:22px;height:22px;fill:currentColor;flex:none}
.pitem b{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track .pitem:nth-child(n+9){display:none} /* show one set only */
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- claude badge ---------- */
.claude-badge{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.3rem;
  font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--rust);
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:.55rem 1.1rem}
.section--plum .claude-badge{background:rgba(251,246,238,.07);border-color:rgba(251,246,238,.2);color:var(--yellow);margin-top:1.1rem;margin-bottom:.4rem}

/* fix: dark tier card bullets must be cream (this rule must come after .tier ul) */
.tier.tier--hi ul{color:var(--cream)}
.tier.tier--hi .tier-line{color:rgba(251,246,238,.88)}

/* ---------- industry chips ---------- */
.ichips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;max-width:880px}
.chip{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--plum-deep);background:var(--cream-deep);border-radius:999px;padding:.6rem 1.2rem;
}
.chip--link{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);transition:.16s}
.chip--link:hover{box-shadow:inset 0 0 0 2px var(--rust);color:var(--rust);text-decoration:none;transform:translateY(-2px)}
.chip--wink{background:var(--ink);color:var(--cream)}
.chip--wink:hover{background:var(--plum-deep);text-decoration:none;transform:translateY(-2px)}

/* ---------- claude chat card (home AI band) ---------- */
.claude-card{
  background:var(--cream);border-radius:22px;padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35);transform:rotate(-1.2deg);max-width:460px;justify-self:end;
}
.cc-head{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;color:var(--ink);font-size:.95rem;padding-bottom:.4rem;border-bottom:1px solid var(--line-soft)}
.cc-head svg{fill:#D97757}
.cc-head span{font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--plum);margin-left:auto}
.cc-msg{border-radius:14px;padding:.8rem 1rem;font-size:.92rem;line-height:1.5;max-width:88%}
.cc-user{background:var(--plum-deep);color:var(--cream);align-self:flex-end;border-bottom-right-radius:4px}
.cc-ai{background:var(--paper);color:var(--ink);align-self:flex-start;border:1px solid var(--line-soft);border-bottom-left-radius:4px;display:flex;gap:.55rem;align-items:flex-start}
.cc-ai svg{fill:#D97757;margin-top:.2rem}
.cc-foot{font-size:.75rem;color:var(--plum);text-align:center;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:.2rem}
@media (max-width:880px){.claude-card{justify-self:stretch;transform:none;max-width:none}}

/* claude card: best-practice rail */
.cc-practices{display:grid;gap:.45rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:.9rem 1rem;margin-top:.2rem}
.cc-check{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--plum-deep);font-weight:600}
.cc-check i{flex:none;width:15px;height:15px;border-radius:5px;background:#D97757;position:relative}
.cc-check i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* claude brand touches: spark + name in terracotta */
svg.spark{fill:#D97757}
.cc-head b{color:#D97757}
.section--plum .claude-badge{color:#D97757;border-color:rgba(217,119,87,.45);background:rgba(217,119,87,.10)}

/* CTA band sits centered in its own breathing room (footer supplies the gap below) */
.cta-section{padding-top:var(--space);padding-bottom:0}

/* ---------- referral program ---------- */
.rtiers{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;background:var(--paper);border:1px solid var(--line-soft);border-radius:26px;padding:clamp(1.8rem,4vw,3rem)}
.rtiers-grid{display:grid;gap:.7rem}
.rtier{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--cream);border-radius:16px;padding:1rem 1.4rem}
.rtier:last-child{background:var(--ink)}
.rtier:last-child .rsize{color:rgba(251,246,238,.8)}
.rtier:last-child .ramt{color:var(--yellow)}
.rsize{font-size:.98rem;color:var(--plum-deep);font-weight:600}
.ramt{font-family:var(--display);font-weight:700;font-size:1.9rem;color:var(--rust);line-height:1}
@media (max-width:880px){.rtiers{grid-template-columns:1fr}}

.refer-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:24px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow)}

/* interior page hero accent matches the home hero treatment */
.page-hero h1 em{font-style:normal;color:var(--rust)}

/* ---------- first view: hero + partner strip fill one screen ---------- */
@media (min-width:881px) and (min-height:620px){
  .firstview{
    display:flex;flex-direction:column;
    min-height:calc(100vh - var(--head-h));
    min-height:calc(100svh - var(--head-h));
  }
  .firstview .hero{
    flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(1rem,3vh,3.25rem);
  }
  .firstview .pstrip{flex:0 0 auto}

  /* type and rhythm scale with viewport height so the strip always lands on screen */
  .firstview .hero h1{font-size:clamp(2.2rem,min(1rem + 3.2vw,8.6vh),4.15rem)}
  .firstview .hero .sub{
    font-size:clamp(1rem,min(.9rem + .45vw,2.2vh),1.35rem);
    line-height:1.5;margin-top:clamp(.8rem,1.8vh,1.5rem);
  }
  .firstview .hero-ctas{flex-wrap:nowrap;margin-top:clamp(1.1rem,2.6vh,2.2rem)}
  .firstview .hero-ctas .btn--lg{padding:clamp(.8rem,1.5vh,1.15rem) clamp(1.3rem,2.2vw,2.3rem);font-size:clamp(.98rem,1.9vh,1.12rem)}
  .firstview .hero-note{margin-top:clamp(.6rem,1.4vh,1.1rem)}
  .firstview .hero-facts{margin-top:clamp(1rem,2.6vh,2.4rem);padding-top:clamp(.8rem,1.6vh,1.4rem)}
  .firstview .pstrip{padding:clamp(.9rem,1.8vh,1.6rem) 0 clamp(1rem,2vh,1.9rem)}
  .firstview .pstrip-label{margin-bottom:clamp(.6rem,1.4vh,1.1rem)}
}
/* very short screens: drop the facts row rather than crushing everything */
@media (min-width:881px) and (min-height:620px) and (max-height:780px){
  .firstview .hero-facts{display:none}
}

/* ---------- affiliations badge ---------- */
.affil{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:24px;
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow)}
.affil-badges{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;flex:none}
.affil-badges img{width:clamp(190px,24vw,270px);height:auto;border-radius:10px}
.affil--two .affil-badges img{width:clamp(160px,18vw,215px)}
.affil>div:last-child{flex:1 1 320px}
@media (max-width:760px){.affil-badges img,.affil--two .affil-badges img{width:min(260px,72vw)}}

/* headshot inside an affiliation-style card */
.person-shot{width:clamp(150px,16vw,180px);aspect-ratio:1/1.08;object-fit:cover;object-position:top center;
  border-radius:16% 20% 15% 21%;filter:saturate(.9) contrast(1.02);background:var(--cream-deep)}

/* card sits on a white section: invert to cream so it still reads as a card */
.section--paper .refer-strip{background:var(--cream);border-color:var(--line)}

/* pricing footnote: spans the full tier grid instead of hanging left */
.tier-note{max-width:none;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--plum);font-size:.95rem;text-align:center;text-wrap:balance}

/* nav: onsite/remote nested under Managed IT Services */
.menu-group{margin:.1rem 0 .3rem .9rem;padding-left:.9rem;border-left:2px solid var(--line-soft)}
.menu-group a{font-size:.92rem}
/* remote price rows */
.ramt i{font-style:normal;font-size:.8rem;color:var(--plum);font-weight:600;margin-left:.15rem}
.rtier:last-child .ramt i{color:rgba(251,246,238,.65)}

/* ---------- proudly American band ---------- */
.us-map{position:relative}
.us-map img{width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.28))}
.us-key{display:flex;align-items:center;justify-content:center;gap:.35rem 1.3rem;flex-wrap:wrap;
  margin-top:.9rem;font-size:.8rem;color:rgba(251,246,238,.7);font-family:var(--display);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.us-key i{display:inline-block;width:.75rem;height:.75rem;border-radius:26%;transform:rotate(12deg);vertical-align:-1px}
.us-key .k-on{background:var(--orange)}
.us-key .k-all{background:rgba(251,246,238,.28);box-shadow:inset 0 0 0 1px rgba(251,246,238,.5)}
.us-facts{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(251,246,238,.16)}
.usf b{display:block;font-family:var(--display);font-weight:700;font-size:2rem;color:var(--yellow);line-height:1}
.usf span{font-size:.88rem;color:rgba(251,246,238,.72)}
.vet-note{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;
  background:rgba(251,246,238,.07);border:1px solid rgba(251,246,238,.16);border-radius:16px;
  padding:.9rem 1.2rem;font-size:.93rem;color:rgba(251,246,238,.85)}
.vet-badge{font-family:var(--display);font-weight:700;color:var(--yellow)}

.us-key span{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.us-key .k-star{width:auto;height:auto;border-radius:0;transform:none;color:var(--yellow);font-size:1rem;line-height:1}


/* ==========================================================================
   Blog: post list, single post, WordPress core block styles
   ========================================================================== */
.post-list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.post-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-3px)}
.post-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--cream-deep)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post-card .pc-meta{font-family:var(--display);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rust);font-weight:700}
.post-card h3{margin-top:.5rem;font-size:1.12rem;line-height:1.3}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--rust)}
.post-card p{margin-top:.6rem;font-size:.92rem;color:var(--plum);flex:1}
.post-card .tlink{margin-top:1rem}

/* Article column is flush left, so the crumbs, date, headline, hero image and
   body all share one left edge. Centring only the body pushed it 200px right
   of its own headline. */
.post-head{max-width:720px}
.post-head .pmeta{font-family:var(--display);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rust);font-weight:700;margin-bottom:.7rem}
.post-hero-img{max-width:1000px;margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.post-hero-img img{width:100%;height:auto}

.post-body{max-width:720px;margin:0;font-size:1.06rem;line-height:1.78;color:var(--plum-deep)}
.post-body > *{margin-bottom:1.15rem}
.post-body h2{font-family:var(--display);font-size:var(--step-2);line-height:1.18;color:var(--ink);
  margin-top:2.6rem;margin-bottom:.9rem}
.post-body h3{font-family:var(--display);font-size:var(--step-1);line-height:1.25;color:var(--ink);
  margin-top:2rem;margin-bottom:.7rem}
.post-body h4{font-family:var(--display);font-size:1.1rem;color:var(--ink);margin-top:1.6rem;margin-bottom:.5rem}
.post-body a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--orange-deep)}
.post-body ul,.post-body ol{padding-left:1.35rem}
.post-body li{margin-bottom:.5rem}
.post-body ul li::marker{color:var(--orange)}
.post-body img{border-radius:14px;height:auto}
.post-body figure{margin:1.8rem 0}
.post-body figure img{width:100%}
.post-body figcaption{font-size:.85rem;color:var(--plum);text-align:center;margin-top:.6rem}
.post-body blockquote{border-left:3px solid var(--orange);padding:.4rem 0 .4rem 1.3rem;margin:1.8rem 0;
  font-size:1.12rem;color:var(--ink)}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.post-body th,.post-body td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.post-body th{background:var(--cream);font-family:var(--display)}
.post-body pre{background:var(--ink);color:var(--cream);padding:1.1rem;border-radius:12px;overflow-x:auto;font-size:.88rem}
.post-body code{background:var(--cream-deep);padding:.12em .4em;border-radius:5px;font-size:.9em}
.post-body pre code{background:none;padding:0}
.post-body .wp-block-image{margin:1.8rem 0}
.post-body .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.post-body .alignleft{float:left;margin:.3rem 1.4rem 1rem 0;max-width:50%}
.post-body .alignright{float:right;margin:.3rem 0 1rem 1.4rem;max-width:50%}
.post-body .wp-block-buttons{display:flex;gap:.7rem;flex-wrap:wrap}
.post-body .wp-block-button__link{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
  padding:.8rem 1.4rem;border-radius:999px;font-family:var(--display);font-weight:700}
.post-body .has-small-font-size{font-size:1rem}
.post-body .has-large-font-size{font-size:var(--step-2)}
.post-body .has-medium-font-size{font-size:var(--step-1)}
.post-body .wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.post-body .wp-block-embed iframe{max-width:100%;border-radius:14px}

.post-tags{max-width:720px;margin:2.4rem auto 0;display:flex;gap:.5rem;flex-wrap:wrap}
.post-tags a{font-size:.8rem;background:var(--cream-deep);color:var(--plum-deep);padding:.35rem .85rem;
  border-radius:999px;text-decoration:none}
.post-tags a:hover{background:var(--orange);color:#fff}

.pager{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:3rem}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 .8rem;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  color:var(--plum-deep);text-decoration:none;font-family:var(--display);font-weight:700}
.pager .page-numbers.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pager .page-numbers:hover:not(.current){border-color:var(--orange);color:var(--rust)}

.cat-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.cat-chips a{font-size:.84rem;font-family:var(--display);font-weight:700;background:var(--paper);
  border:1px solid var(--line);color:var(--plum-deep);padding:.42rem .95rem;border-radius:999px;text-decoration:none}
.cat-chips a:hover,.cat-chips a[aria-current]{background:var(--orange);color:#fff;border-color:var(--orange)}

.searchform{display:flex;gap:.5rem;max-width:460px;margin-top:1.4rem}
.searchform input[type=search]{flex:1;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;
  font-family:var(--body);font-size:1rem;background:var(--paper);color:var(--ink)}
.searchform input[type=search]:focus{outline:2px solid var(--orange);outline-offset:1px}

/* form states */
.form .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{padding:1rem 1.15rem;border-radius:14px;margin-bottom:1.3rem;font-size:.95rem}
.form-note--ok{background:#E7F5EC;border-left:3px solid #2E7D4F;color:#1C4D31}
.form-note--err{background:#FBEAE6;border-left:3px solid var(--rust);color:#7A2618}

@media (max-width:640px){
  .post-body{font-size:1rem}
  .post-body .alignleft,.post-body .alignright{float:none;margin:1.4rem 0;max-width:100%}
}