/* =========================================================================
   Squareposh v2 PAGES (launched 2026-09-29). Loaded on theme templates only
   (they set $GLOBALS["sqp_v2"]); header/footer/tokens live in v2-chrome.css.
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body.hv{margin:0;background:var(--hv-paper);color:var(--hv-ink);font:400 17px/1.6 var(--hv-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.hv) img{display:block;max-width:100%;height:auto}
:where(.hv) a{color:inherit}
:where(.hv) :where(h1,h2,h3,p,figure,blockquote,ol,ul){margin:0}
:where(.hv) :where(ul,ol){padding:0;list-style:none}
.hv em{font-style:italic}
.hv svg{width:1.05em;height:1.05em;flex-shrink:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hv-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--hv-ink);color:var(--hv-paper);padding:10px 16px;border-radius:999px;text-decoration:none}
.hv-skip:focus{top:12px}
.hv :focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Frame-level pieces shared by every v2 page ---------- */
/* ---------- Hero ---------- */
.hv-hero{display:grid;grid-template-columns:1.65fr 1fr;min-height:min(78vh,780px);background:var(--hv-espresso);color:var(--hv-paper)}
.hv-hero__media{position:relative;overflow:hidden;border-right:1px solid var(--hv-rule-dark);min-height:420px}
.hv-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hv-slide.is-on{opacity:1}
.hv-slide img{width:100%;height:100%;object-fit:cover}
.hv-slide::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(20,15,12,.72),transparent)}
.hv-slide figcaption{position:absolute;left:var(--hv-pad);bottom:clamp(22px,3vw,40px);z-index:2;display:grid;gap:.5rem}
.hv-slide__title{font-size:clamp(2.6rem,4.8vw,4.6rem);line-height:.9}
.hv-slide__sub{font:500 1rem/1.3 var(--hv-sans)}
.hv-hero__panel{display:flex;flex-direction:column;padding:clamp(34px,4vw,60px) clamp(24px,3.2vw,48px) clamp(24px,3vw,40px)}
.hv-kicker{color:rgba(245,239,233,.82);margin-bottom:auto;padding-bottom:40px}
.hv-hero__lead{margin-top:2.2rem;font-size:1.0625rem;line-height:1.6;color:rgba(245,239,233,.88);max-width:30em}
.hv-hero__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(34px,5vw,70px)}
.hv-arrows{display:flex;gap:10px}
.hv-arrow{width:62px;height:48px;border-radius:999px;border:1px solid rgba(245,239,233,.55);background:none;color:var(--hv-paper);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.hv-arrow:hover{background:var(--hv-paper);color:var(--hv-espresso)}
.hv-arrow svg{width:22px;height:22px}
@media (max-width:900px){
  .hv-hero{grid-template-columns:1fr;min-height:0}
  .hv-hero__media{min-height:62vw;border-right:0;border-bottom:1px solid var(--hv-rule-dark)}
  .hv-kicker{margin-bottom:0;padding-bottom:22px}
}

/* ---------- Statement ---------- */
.hv-statement{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding:clamp(56px,8vw,120px) var(--hv-pad) clamp(44px,5vw,64px)}
.hv-state{font-size:clamp(2.2rem,4.3vw,4.25rem);line-height:.98;max-width:17em}
@media (max-width:900px){.hv-statement{grid-template-columns:1fr;gap:28px}}

/* ---------- Two ways ---------- */
.hv-ways{display:grid;grid-template-columns:1fr 1fr}
.hv-way{display:grid;grid-template-rows:auto 1fr;text-decoration:none}
.hv-way+.hv-way{border-left:1px solid var(--hv-rule)}
.hv-way__media{display:block;overflow:hidden;aspect-ratio:16/10;border-bottom:1px solid var(--hv-rule)}
.hv-way__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hv-way:hover .hv-way__media img{transform:scale(1.035)}
.hv-way__body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,44px) var(--hv-pad) clamp(30px,3.4vw,48px)}
.hv-way__title{font-size:clamp(2.4rem,3.8vw,3.6rem);line-height:.95}
.hv-way__text{margin:1rem 0 1.8rem;max-width:30em;color:var(--hv-mute)}
.hv-way .hv-link{margin-top:auto}
@media (max-width:760px){.hv-ways{grid-template-columns:1fr}.hv-way+.hv-way{border-left:0;border-top:1px solid var(--hv-rule)}}

/* ---------- Section heads ---------- */
.hv-sechead{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:28px 48px;padding:clamp(56px,7vw,100px) var(--hv-pad) clamp(30px,3vw,44px);border-bottom:1px solid var(--hv-rule)}
.hv-sechead__lead{max-width:28em;color:var(--hv-mute);justify-self:start}
.hv-sechead--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.hv-sechead--center .hv-label{margin-bottom:0}
@media (max-width:900px){.hv-sechead{grid-template-columns:1fr;gap:18px}.hv-sechead .hv-pill{justify-self:start}}

/* ---------- Templates grid ---------- */
.hv-tplgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.hv-tpl{border-right:1px solid var(--hv-rule);border-bottom:1px solid var(--hv-rule)}
.hv-tpl:nth-child(4n){border-right:0}
.hv-tpl:nth-last-child(-n+4){border-bottom:0}
.hv-tpl a{display:flex;flex-direction:column;height:100%;padding:14px 14px 22px;text-decoration:none}
.hv-tpl__well{position:relative;display:block;background:var(--hv-well);border-radius:4px;padding:30px 18px 0;overflow:hidden;aspect-ratio:5/4}
.hv-tpl__well img{position:relative;width:100%;height:calc(100% - 14px);object-fit:cover;object-position:left top;border-radius:0 0 3px 3px;box-shadow:0 18px 40px -18px rgba(28,23,20,.45);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hv-tpl a:hover .hv-tpl__well img{transform:translateY(-6px)}
.hv-browser{position:absolute;left:18px;right:18px;top:16px;height:14px;background:#fff;border-radius:3px 3px 0 0;display:flex;align-items:center;gap:4px;padding:0 7px;box-shadow:0 18px 40px -18px rgba(28,23,20,.45)}
.hv-browser i{width:5px;height:5px;border-radius:50%;background:var(--hv-greige)}
.hv-tpl__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px}
.hv-tpl__name{font-size:1.9rem;line-height:1}
.hv-tpl__price{font-size:1.5rem;line-height:1;white-space:nowrap}
.hv-tpl__for{display:block;margin-top:.7rem;font-size:.9375rem;line-height:1.5;color:var(--hv-mute)}
.hv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.hv-tags span{font:600 .75rem/1 var(--hv-sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--hv-ink);border-radius:999px;padding:.55em .9em}
@media (max-width:1100px){
  .hv-tplgrid{grid-template-columns:repeat(2,1fr)}
  .hv-tpl:nth-child(4n){border-right:1px solid var(--hv-rule)}
  .hv-tpl:nth-child(2n){border-right:0}
  .hv-tpl:nth-last-child(-n+4){border-bottom:1px solid var(--hv-rule)}
  .hv-tpl:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:600px){
  /* Swipe row on phones, like a product rail. */
  .hv-tplgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .hv-tpl{flex:0 0 82%;scroll-snap-align:start;border-bottom:0!important;border-right:1px solid var(--hv-rule)!important}
}

/* ---------- Services row ---------- */
.hv-services__head{padding:clamp(48px,6vw,84px) var(--hv-pad) clamp(26px,3vw,40px);border-bottom:1px solid var(--hv-rule)}
.hv-svcrow{display:grid;grid-template-columns:repeat(5,1fr)}
.hv-svc{display:flex;flex-direction:column;gap:.7rem;padding:26px var(--hv-pad) 34px;min-height:220px;text-decoration:none;transition:background .3s}
.hv-svc+.hv-svc{border-left:1px solid var(--hv-rule)}
.hv-svc:hover{background:var(--hv-well)}
.hv-svc__n{font:600 .8125rem/1 var(--hv-sans);letter-spacing:.14em}
.hv-svc__name{font-size:clamp(1.9rem,2.4vw,2.4rem);line-height:1;margin-top:2.4rem}
.hv-svc__text{font-size:.9375rem;line-height:1.5;color:var(--hv-mute)}
@media (max-width:1000px){
  .hv-svcrow{grid-template-columns:1fr 1fr}
  .hv-svc{min-height:180px;border-left:0!important;border-bottom:1px solid var(--hv-rule)}
  .hv-svc:nth-child(odd){border-right:1px solid var(--hv-rule)}
  .hv-svc:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
}

/* ---------- Newly released ---------- */
.hv-release{position:relative;padding:clamp(40px,7vw,96px) clamp(20px,5.5vw,80px);overflow:hidden}
.hv-release__bg{position:absolute;inset:0}
.hv-release__bg img{width:100%;height:100%;object-fit:cover}
.hv-release__bg::after{content:"";position:absolute;inset:0;background:rgba(28,20,15,.35)}
.hv-release__card{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.hv-release__text{background:var(--hv-paper);padding:clamp(32px,4.4vw,64px)}
.hv-release__text p:not(.hv-label){margin-top:1.4rem;max-width:26em;color:var(--hv-mute)}
.hv-release__cta{display:flex;align-items:center;gap:22px;margin-top:2.2rem;flex-wrap:wrap}
.hv-release__price{font:400 1.7rem/1 var(--hv-display)}
.hv-release__shot{position:relative;background:var(--hv-espresso);padding:clamp(44px,4vw,60px) clamp(22px,3vw,44px) 0;display:flex;flex-direction:column;justify-content:flex-end}
.hv-release__shot .hv-browser{position:static;height:16px;box-shadow:none}
.hv-browser--dark{background:#3A2E27}
.hv-browser--dark i{background:#6B5A4E}
.hv-release__shot img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top;border-radius:0}
@media (max-width:860px){.hv-release__card{grid-template-columns:1fr}.hv-release__shot{min-height:0}}

/* ---------- Work ---------- */
.hv-workgrid{display:grid;grid-template-columns:1fr 1fr}
.hv-proj{display:block;text-decoration:none;border-bottom:1px solid var(--hv-rule)}
.hv-proj:nth-child(odd){border-right:1px solid var(--hv-rule)}
.hv-proj:nth-last-child(-n+2){border-bottom:0}
.hv-proj__media{display:block;overflow:hidden;aspect-ratio:16/11;background:var(--hv-well);border-bottom:1px solid var(--hv-rule)}
.hv-proj__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hv-proj:hover .hv-proj__media img{transform:scale(1.03)}
.hv-proj__row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;padding:20px var(--hv-pad) 26px}
.hv-proj__n{font:600 .8125rem/1 var(--hv-sans);letter-spacing:.14em}
.hv-proj__name{font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1}
.hv-proj__meta{font:500 .8125rem/1.3 var(--hv-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hv-mute);text-align:right}
@media (max-width:760px){
  .hv-workgrid{grid-template-columns:1fr}
  .hv-proj:nth-child(odd){border-right:0}
  .hv-proj:nth-last-child(2){border-bottom:1px solid var(--hv-rule)}
  .hv-proj__row{grid-template-columns:auto 1fr}
  .hv-proj__meta{grid-column:2;text-align:left}
}

/* ---------- Founder ---------- */
.hv-founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hv-founder__photo{position:relative;border-right:1px solid var(--hv-rule);padding:clamp(40px,5vw,72px) clamp(40px,7vw,110px);background:var(--hv-well);display:flex;align-items:center;justify-content:center}
.hv-founder__photo img{width:100%;max-width:360px;aspect-ratio:500/844;object-fit:cover;border-radius:999px 999px 6px 6px;filter:grayscale(1)}
.hv-seal{position:absolute;right:clamp(18px,4vw,60px);bottom:clamp(30px,5vw,70px);width:clamp(110px,10vw,140px);aspect-ratio:1;border-radius:50%;background:#EFE3B8;border:1px solid var(--hv-ink);display:grid;place-items:center;color:var(--hv-ink)}
.hv-seal svg{position:absolute;inset:0;width:100%;height:100%}
.hv-seal text{font:600 8.4px var(--hv-sans);letter-spacing:.2em;fill:var(--hv-ink)}
.hv-seal em{font:italic 400 1.9rem/1 var(--hv-display);transform:rotate(-8deg)}
.hv-founder__text{padding:clamp(48px,7vw,110px) var(--hv-pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hv-big{font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1.12;margin:1.8rem 0 1.6rem;max-width:20em}
.hv-founder__text p:not(.hv-label):not(.hv-big){color:var(--hv-mute);max-width:34em;margin-bottom:1.1rem}
.hv-founder__text .hv-link{margin-top:1.2rem}
@media (max-width:860px){.hv-founder{grid-template-columns:1fr}.hv-founder__photo{border-right:0;border-bottom:1px solid var(--hv-rule)}}

/* ---------- Reviews ---------- */
.hv-reviews{background:var(--hv-espresso);color:var(--hv-paper);border-color:var(--hv-rule)}
.hv-reviews .hv-sechead{border-bottom-color:var(--hv-rule-dark)}
.hv-revgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.hv-rev{display:flex;flex-direction:column;gap:1.6rem;padding:clamp(28px,3vw,44px) var(--hv-pad);border-right:1px solid var(--hv-rule-dark);border-bottom:1px solid var(--hv-rule-dark)}
.hv-rev:nth-child(3n){border-right:0}
.hv-rev:nth-last-child(-n+3){border-bottom:0}
.hv-rev blockquote{font-size:clamp(1.45rem,1.8vw,1.75rem);line-height:1.18}
.hv-rev blockquote::before{content:"\201C"}
.hv-rev blockquote::after{content:"\201D"}
.hv-rev figcaption{margin-top:auto;font:600 .8125rem/1.4 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase}
.hv-rev__site{color:rgba(245,239,233,.72);font-weight:500;margin-left:.4em}
@media (max-width:1000px){
  .hv-revgrid{grid-template-columns:1fr 1fr}
  .hv-rev:nth-child(3n){border-right:1px solid var(--hv-rule-dark)}
  .hv-rev:nth-child(2n){border-right:0}
  .hv-rev:nth-last-child(-n+3){border-bottom:1px solid var(--hv-rule-dark)}
  .hv-rev:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:640px){
  .hv-revgrid{grid-template-columns:1fr}
  .hv-rev{border-right:0!important;border-bottom:1px solid var(--hv-rule-dark)!important}
  .hv-rev:last-child{border-bottom:0!important}
}

/* ---------- Process ---------- */
.hv-steps{display:grid;grid-template-columns:repeat(4,1fr)}
.hv-steps li{padding:28px var(--hv-pad) 40px}
.hv-steps li+li{border-left:1px solid var(--hv-rule)}
.hv-steps__n{display:block;font:italic 400 2.6rem/1 var(--hv-display);margin-bottom:3.2rem}
.hv-steps h3{font-size:2rem;line-height:1;margin-bottom:.8rem}
.hv-steps p{font-size:.9375rem;color:var(--hv-mute)}
@media (max-width:900px){
  .hv-steps{grid-template-columns:1fr 1fr}
  .hv-steps li{border-left:0!important;border-bottom:1px solid var(--hv-rule)}
  .hv-steps li:nth-child(odd){border-right:1px solid var(--hv-rule)}
  .hv-steps li:nth-last-child(-n+2){border-bottom:0}
  .hv-steps__n{margin-bottom:1.6rem}
}
@media (max-width:520px){.hv-steps{grid-template-columns:1fr}.hv-steps li{border-right:0!important;border-bottom:1px solid var(--hv-rule)!important}.hv-steps li:last-child{border-bottom:0!important}}

/* ---------- FAQ ---------- */
.hv-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.hv-faq__aside{padding:clamp(48px,6vw,90px) var(--hv-pad);border-right:1px solid var(--hv-rule)}
.hv-faq__aside p{margin:1.4rem 0 2rem;color:var(--hv-mute);max-width:24em}
.hv-faq__list details{border-bottom:1px solid var(--hv-rule)}
.hv-faq__list details:last-child{border-bottom:0}
.hv-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px var(--hv-pad);font-size:clamp(1.55rem,2vw,1.95rem);line-height:1.1}
.hv-faq summary::-webkit-details-marker{display:none}
.hv-faq summary::after{content:"";flex-shrink:0;width:34px;height:34px;border:1px solid var(--hv-ink);border-radius:50%;background:linear-gradient(var(--hv-ink),var(--hv-ink)) center/12px 1px no-repeat,linear-gradient(var(--hv-ink),var(--hv-ink)) center/1px 12px no-repeat;transition:transform .3s}
.hv-faq details[open] summary::after{transform:rotate(45deg)}
.hv-faq details p{padding:0 var(--hv-pad) 28px;max-width:40em;color:var(--hv-mute)}
@media (max-width:860px){.hv-faq{grid-template-columns:1fr}.hv-faq__aside{border-right:0;border-bottom:1px solid var(--hv-rule)}}

/* ---------- Contact ---------- */
.hv-contact{display:grid;grid-template-columns:1fr 1fr;background:var(--hv-espresso);color:var(--hv-paper)}
.hv-contact__text{padding:clamp(56px,7vw,110px) var(--hv-pad);border-right:1px solid var(--hv-rule-dark)}
.hv-contact__text p:not(.hv-label){margin-top:2.2rem;max-width:28em;color:rgba(245,239,233,.85)}
.hv-mail{display:inline-block;margin-top:2rem;font-size:clamp(1.7rem,2.4vw,2.3rem);text-decoration:none;border-bottom:1px solid currentColor}
.hv-contact__form{padding:clamp(40px,6vw,96px) var(--hv-pad)}
.hv-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.hv-field{display:flex;flex-direction:column;margin-bottom:22px}
.hv-field--full{grid-column:1/-1}
.hv-field label{font:600 .8125rem/1.3 var(--hv-sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:rgba(245,239,233,.9)}
.hv-field input,.hv-field select,.hv-field textarea{font:400 1.0625rem/1.4 var(--hv-sans);color:var(--hv-paper);background:transparent;border:0;border-bottom:1px solid rgba(245,239,233,.5);padding:10px 0;border-radius:0;width:100%}
.hv-field select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F5EFE9' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right 4px center no-repeat}
.hv-field select option{color:var(--hv-ink)}
.hv-field input:focus,.hv-field select:focus,.hv-field textarea:focus{outline:none;border-bottom-color:var(--hv-paper);box-shadow:0 1px 0 0 var(--hv-paper)}
.hv-field textarea{resize:vertical;min-height:110px}
.hv-hp{position:absolute;left:-9999px}
.hv-ok{border:1px solid rgba(245,239,233,.5);border-radius:8px;padding:14px 18px;margin-bottom:24px}
.hv-human{display:flex;gap:10px;margin-bottom:24px}
@media (max-width:860px){.hv-contact{grid-template-columns:1fr}.hv-contact__text{border-right:0;border-bottom:1px solid var(--hv-rule-dark)}}
@media (max-width:520px){.hv-fields{grid-template-columns:1fr}}


/* =========================================================================
   Inner pages (About, Services, Contact, Portfolio, projects, text pages)
   ========================================================================= */

/* ---------- Page opener ---------- */
.hv-pagehead{padding:clamp(56px,8vw,120px) var(--hv-pad) clamp(40px,5vw,72px)}
.hv-h1--page{font-size:clamp(3.2rem,7vw,7rem);line-height:.92;max-width:13em}
.hv-pagehead__lead{margin-top:clamp(30px,3.6vw,50px);max-width:40em;font-size:1.125rem;color:var(--hv-mute)}
.hv-updated{margin-top:1.4rem;font:600 .8125rem/1.3 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-mute)}
.hv-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.hv-pill--sm{min-height:40px;padding:.55em 1.1em;font-size:.875rem}
.hv-pill--ghost{border-color:rgba(245,239,233,.45);color:var(--hv-paper)}
.hv-pill--ghost:hover{border-color:var(--hv-paper)}
.hv-back{display:inline-flex;align-items:center;gap:.5em;margin-bottom:clamp(22px,3vw,40px);font:500 .9375rem/1 var(--hv-sans);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.3em}
.hv-back:hover{border-bottom-color:currentColor}
.hv-pagehead--proj{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 40px}
.hv-pagehead--proj .hv-back{grid-column:1/-1;justify-self:start}
@media (max-width:760px){.hv-pagehead--proj{grid-template-columns:1fr}.hv-pagehead--proj .hv-pill{justify-self:start}}

/* ---------- Facts strip ---------- */
.hv-facts{display:grid;grid-template-columns:repeat(4,1fr)}
.hv-facts>*{display:flex;flex-direction:column;gap:.4rem;padding:24px var(--hv-pad) 28px}
.hv-facts>*+*{border-left:1px solid var(--hv-rule)}
.hv-facts__big,.hv-facts dd{font:400 clamp(1.6rem,2.4vw,2.3rem)/1 var(--hv-display);margin:0}
.hv-facts li>span:last-child,.hv-facts dt{font:600 .8125rem/1.3 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-mute)}
.hv-facts--dl>div{flex-direction:column-reverse;justify-content:flex-end}
.hv-facts dd a{text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:760px){
  .hv-facts{grid-template-columns:1fr 1fr}
  .hv-facts>*{border-left:0!important;border-bottom:1px solid var(--hv-rule)}
  .hv-facts>*:nth-child(odd){border-right:1px solid var(--hv-rule)}
  .hv-facts>*:nth-last-child(-n+2):nth-child(odd),.hv-facts>*:last-child{border-bottom:0}
}

/* ---------- Dark band + three columns ---------- */
.hv-dark{background:var(--hv-espresso);color:var(--hv-paper)}
.hv-dark .hv-sechead{border-bottom-color:var(--hv-rule-dark)}
.hv-dark .hv-sechead__lead{color:rgba(245,239,233,.8)}
.hv-cols3{display:grid;grid-template-columns:repeat(3,1fr)}
.hv-cols3>div{padding:30px var(--hv-pad) 44px}
.hv-cols3>div+div{border-left:1px solid var(--hv-rule-dark)}
.hv-cols3__n{display:block;font:600 .8125rem/1 var(--hv-sans);letter-spacing:.14em;margin-bottom:3rem}
.hv-cols3 h3{font:400 2rem/1.02 var(--hv-display);margin-bottom:.9rem}
.hv-cols3 p{color:rgba(245,239,233,.82);font-size:.9875rem}
@media (max-width:860px){.hv-cols3{grid-template-columns:1fr}.hv-cols3>div+div{border-left:0;border-top:1px solid var(--hv-rule-dark)}.hv-cols3__n{margin-bottom:1.4rem}}

/* ---------- Two-column text split ---------- */
.hv-split{display:grid;grid-template-columns:1fr 1fr}
.hv-split__a{padding:clamp(48px,6vw,90px) var(--hv-pad);border-right:1px solid var(--hv-rule)}
.hv-split__b{padding:clamp(48px,6vw,90px) var(--hv-pad);display:flex;flex-direction:column;align-items:flex-start}
.hv-prose p{color:var(--hv-mute);max-width:34em;margin-bottom:1.6rem}
.hv-prose p.hv-big{color:var(--hv-ink);margin-top:0}
.hv-prose a:not(.hv-link),.hv-founder__text a:not(.hv-link){text-decoration:underline;text-underline-offset:.2em}
@media (max-width:860px){.hv-split{grid-template-columns:1fr}.hv-split__a{border-right:0;border-bottom:1px solid var(--hv-rule)}}

/* ---------- Reviews, two across ---------- */
.hv-revgrid--2{grid-template-columns:1fr 1fr}
.hv-revgrid--2 .hv-rev{border-bottom:0!important}
.hv-revgrid--2 .hv-rev:nth-child(2n){border-right:0}
.hv-revgrid--2 .hv-rev:nth-child(odd){border-right:1px solid var(--hv-rule-dark)}
@media (max-width:760px){.hv-revgrid--2{grid-template-columns:1fr}.hv-revgrid--2 .hv-rev:first-child{border-right:0;border-bottom:1px solid var(--hv-rule-dark)!important}}

/* ---------- Closing call to action ---------- */
.hv-ctaband{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:28px 60px;padding:clamp(60px,8vw,120px) var(--hv-pad);background:var(--hv-espresso);color:var(--hv-paper)}
.hv-ctaband__side p{color:rgba(245,239,233,.85);max-width:28em;margin-bottom:1.8rem}
.hv-ctaband__btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){.hv-ctaband{grid-template-columns:1fr}}

/* ---------- Photo band ---------- */
.hv-photoband{height:clamp(260px,42vw,560px);overflow:hidden}
.hv-photoband img{width:100%;height:100%;object-fit:cover}

/* ---------- Service blocks ---------- */
.hv-svcblock{display:grid;grid-template-columns:1.1fr 1fr;scroll-margin-top:80px}
.hv-svcblock__a{padding:clamp(40px,5vw,72px) var(--hv-pad);border-right:1px solid var(--hv-rule)}
.hv-svcblock__a p{margin-top:1.4rem;max-width:32em;color:var(--hv-mute);font-size:1.0625rem}
.hv-svcblock__n{display:block;font:italic 400 2.4rem/1 var(--hv-display);margin-bottom:1.6rem}
.hv-svcblock__b{padding:clamp(40px,5vw,72px) var(--hv-pad)}
.hv-ticks li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--hv-rule-soft)}
.hv-ticks li:first-child{border-top:1px solid var(--hv-rule-soft)}
.hv-ticks li::before{content:"";position:absolute;left:4px;top:1.35em;width:14px;height:1px;background:var(--hv-ink)}
.hv-svcblock__work{margin-top:1.8rem;color:var(--hv-mute);font-size:.9375rem}
.hv-svcblock__work span{display:block;font:600 .8125rem/1.3 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-ink);margin-bottom:.4rem}
.hv-svcblock__work a{text-decoration:underline;text-underline-offset:.2em;color:var(--hv-ink)}
@media (max-width:860px){.hv-svcblock{grid-template-columns:1fr}.hv-svcblock__a{border-right:0;border-bottom:1px solid var(--hv-rule)}}

/* ---------- Static "ways" band (Services → templates) ---------- */
.hv-way--static{text-decoration:none}
.hv-ways--band .hv-way{grid-template-rows:1fr}
.hv-ways--band .hv-way__body{justify-content:center;padding:clamp(40px,5vw,80px) var(--hv-pad)}
.hv-ways--band .hv-way__text{margin-bottom:2rem}
.hv-way__media--fill{height:100%;aspect-ratio:auto;min-height:320px;border-bottom:0}

/* ---------- Three steps + contact page ---------- */
.hv-steps--3{grid-template-columns:repeat(3,1fr)}
.hv-steps--3 .hv-steps__n{font:600 .8125rem/1 var(--hv-sans);letter-spacing:.14em;font-style:normal}
@media (max-width:900px){.hv-steps--3{grid-template-columns:1fr}.hv-steps--3 li{border-right:0!important;border-bottom:1px solid var(--hv-rule)!important}.hv-steps--3 li:last-child{border-bottom:0!important}}
.hv-contact--page .hv-h1--page{font-size:clamp(3rem,6vw,6rem)}

/* ---------- Project write-up ---------- */
.hv-proj__media img.is-shot{object-position:top}
.hv-projbody{padding:clamp(48px,6vw,90px) var(--hv-pad)}
.hv-projbody .rich p{margin:0 0 1.2em}
.hv-projbody .rich h2{font:400 clamp(1.8rem,2.4vw,2.3rem)/1.05 var(--hv-display);margin:0 0 .8em}
.hv-projbody .rich a{text-decoration:underline;text-underline-offset:.2em}
.projlayout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(28px,4vw,72px);align-items:start}
.projlayout__text{position:sticky;top:100px}
.brief{margin:0 0 2.4rem;border-top:1px solid var(--hv-rule)}
.brief__row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(12px,1.4vw,26px);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hv-rule-soft)}
.brief__row h3{font:600 .8125rem/1.3 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase;margin:0}
.brief__row p{margin:0!important;font-size:.9875rem;line-height:1.6;color:var(--hv-mute)}
@media (max-width:1200px){.brief__row{grid-template-columns:1fr;gap:.4rem}}
.projlayout__text ul li{position:relative;margin:.55em 0;padding-left:1.5em}
.projlayout__text ul li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--hv-ink)}
.projlayout__media{display:grid;gap:clamp(20px,2.6vw,40px)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.shot{margin:0}
.shot__frame{display:block;overflow:hidden;border:1px solid var(--hv-rule);border-radius:6px;background:var(--hv-well)}
.shot__frame img{width:100%;height:auto}
.shot figcaption{margin-top:.7rem;font:600 .75rem/1.3 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-mute)}
.shot-scroll{height:min(78svh,760px);overflow-y:auto;overflow-x:hidden;border:1px solid var(--hv-rule);border-radius:6px;background:var(--hv-well);scrollbar-width:thin}
.shot-scroll img{width:100%;height:auto}
@media (max-width:900px){.projlayout{grid-template-columns:1fr;gap:34px}.projlayout__text{position:static}.shots{grid-template-columns:1fr}}

/* ---------- Text pages ---------- */
.hv-textpage{padding:clamp(40px,5vw,80px) var(--hv-pad) clamp(60px,8vw,120px)}
.hv-textpage__img{margin-bottom:2.4rem;max-width:72ch}
.legal{max-width:72ch}
.legal h2{font:400 clamp(1.8rem,2.4vw,2.3rem)/1.05 var(--hv-display);margin:2em 0 .6em}
.legal h3{font:600 1.0625rem/1.3 var(--hv-sans);margin:1.8em 0 .5em}
.legal p,.legal li{line-height:1.75}
.legal p{margin:0 0 1.1em}
.legal ul{margin:0 0 1.3em;padding-left:1.3em;list-style:disc}
.legal ol{margin:0 0 1.3em;padding-left:1.3em;list-style:decimal}
.legal li{margin:.35em 0}
.legal li::marker{color:var(--hv-mute)}
.legal a{text-decoration:underline;text-underline-offset:.2em}
.hv-postlist li{border-bottom:1px solid var(--hv-rule)}
.hv-postlist a{display:flex;justify-content:space-between;gap:20px;padding:20px 0;text-decoration:none}
.hv-postlist__t{font:400 1.8rem/1.1 var(--hv-display)}
.hv-postlist__d{font:500 .875rem/1.3 var(--hv-sans);color:var(--hv-mute)}
.hv-empty{padding:40px var(--hv-pad)}
/* ---------- Reveal on scroll ---------- */
.js .hv-rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .hv-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .hv-rv{opacity:1;transform:none}}

/* ---------- Portfolio device cards (owner 2026-09-29: "something like this",
   glowuponline.com's template cards): 3 across, ruled cells, tablet + phone. */
.hv-devgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.hv-devgrid>.hv-dev{border-right:1px solid var(--hv-rule);border-bottom:1px solid var(--hv-rule)}
.hv-devgrid>.hv-dev:nth-child(3n){border-right:0}
.hv-dev{display:flex;flex-direction:column;padding:clamp(16px,2vw,30px) clamp(16px,2vw,30px) clamp(22px,2.4vw,34px);text-decoration:none}
.hv-dev__well{position:relative;display:block;aspect-ratio:1/1.12;background:#E8E3DD;border-radius:2px;overflow:hidden}
.hv-tab{position:absolute;left:8%;top:6%;width:66%;aspect-ratio:820/1180;background:#141210;border-radius:clamp(12px,1.4vw,20px);padding:clamp(5px,.55vw,8px);box-shadow:0 30px 50px -24px rgba(28,23,20,.55);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hv-tab img,.hv-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:clamp(7px,.8vw,12px);background:#fff}
.hv-phone{position:absolute;right:9%;top:31%;width:24%;aspect-ratio:390/844;background:#141210;border-radius:clamp(10px,1.2vw,18px);padding:clamp(3px,.35vw,5px);box-shadow:0 26px 40px -18px rgba(28,23,20,.6);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hv-phone::before{content:"";position:absolute;left:50%;top:clamp(6px,.7vw,10px);width:30%;height:clamp(4px,.45vw,7px);border-radius:9px;background:#141210;transform:translateX(-50%);z-index:1}
.hv-dev:hover .hv-tab{transform:translateY(-6px)}
.hv-dev:hover .hv-phone{transform:translateY(-12px)}
/* Projects without device captures yet: the desktop screenshot on a landscape tablet. */
.hv-tab--land{left:8%;right:8%;top:50%;width:auto;aspect-ratio:1180/820;transform:translateY(-50%)}
.hv-dev:hover .hv-tab--land{transform:translateY(calc(-50% - 6px))}
.hv-dev__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:clamp(18px,2vw,28px)}
.hv-dev__name{font:400 clamp(1.9rem,2.5vw,2.6rem)/1 var(--hv-display);letter-spacing:-.01em}
.hv-dev__year{font:400 clamp(1.5rem,1.9vw,2rem)/1 var(--hv-display);color:var(--hv-mute)}
.hv-dev .hv-tags{margin-top:0;padding-top:16px}
@media (max-width:1100px){
  .hv-devgrid{grid-template-columns:1fr 1fr}
  .hv-devgrid>.hv-dev:nth-child(3n){border-right:1px solid var(--hv-rule)}
  .hv-devgrid>.hv-dev:nth-child(2n){border-right:0}
}
@media (max-width:640px){
  .hv-devgrid{grid-template-columns:1fr}
  .hv-devgrid>.hv-dev{border-right:0!important}
}
.hv-devgrid{margin-bottom:-1px}

/* Meg's black and white photos in bands / the hero slider (sqp_v2_meg_photo). */
.hv-photoband--meg{height:clamp(300px,40vw,540px)}
.hv-slide img{object-position:50% 50%}

/* About: the desk photo shown whole (owner: "i cant see the entire image"). */
.hv-workshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hv-workshot__photo{background:var(--hv-well);border-right:1px solid var(--hv-rule);padding:clamp(28px,4vw,64px);display:flex;justify-content:center}
.hv-workshot__photo img{width:100%;max-width:560px;height:auto;box-shadow:0 30px 60px -30px rgba(28,23,20,.5)}
.hv-workshot__text{padding:clamp(40px,6vw,96px) var(--hv-pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hv-big--xl{font-size:clamp(2.2rem,4vw,3.9rem);line-height:1;margin:0 0 2.2rem;max-width:11em}
@media (max-width:860px){.hv-workshot{grid-template-columns:1fr}.hv-workshot__photo{border-right:0;border-bottom:1px solid var(--hv-rule)}}
/* Alternate sides: the founder portrait is on the left just above, so this photo goes right. */
.hv-workshot__photo{order:2;border-right:0;border-left:1px solid var(--hv-rule)}
@media (max-width:860px){.hv-workshot__photo{order:0;border-left:0}}
/* Full-bleed on its half: photo edge to edge, uncropped (section height follows the photo). */
.hv-workshot__photo{padding:0;background:none;display:block}
.hv-workshot__photo img{width:100%;max-width:none;height:auto;box-shadow:none;display:block}

/* Phones: the template cards are a swipe row. They must not fade/slide up as they scroll in
   sideways (that made the section jump up and down while swiping). */
@media (max-width:600px){
  .hv-tplgrid .hv-tpl,.hv-tplgrid .hv-tpl.hv-rv{opacity:1!important;transform:none!important;transition:none!important}
  .hv-tpl a:hover .hv-tpl__well img{transform:none}
}

/* ---- Instagram carousel (home, after reviews; sqp-client-instagram.php) ---- */
.hv-insta{padding:clamp(48px,6vw,96px) var(--hv-pad);border-top:1px solid var(--hv-rule)}
.hv-insta__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:28px}
.hv-insta__nav{display:flex;align-items:center;gap:10px}
.hv-insta__arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--hv-rule);background:transparent;color:inherit;font-size:18px;cursor:pointer}
.hv-insta__arrow:hover{background:var(--hv-well)}
.hv-insta__track{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
@media (min-width:640px){.hv-insta__track{grid-auto-columns:calc((100% - 32px)/3)}}
@media (min-width:1100px){.hv-insta__track{grid-auto-columns:calc((100% - 48px)/4)}}
.hv-insta__track li{scroll-snap-align:start}
.hv-insta__track a{position:relative;display:block;border-radius:6px;overflow:hidden}
.hv-insta__track img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s ease}
.hv-insta__track a:hover img{transform:scale(1.03)}
.hv-insta__badge{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:12px}


/* =========================================================================
   Hosting page (page-hosting.php): plan cards, comparison table
   ========================================================================= */
.hv-plans{display:grid;grid-template-columns:1fr 1fr}
.hv-plan{padding:clamp(36px,4.4vw,64px) var(--hv-pad);display:flex;flex-direction:column;align-items:flex-start}
.hv-plan+.hv-plan{border-left:1px solid var(--hv-rule)}
.hv-plan__price{font:400 clamp(3.4rem,6vw,5.6rem)/.95 var(--hv-display);letter-spacing:-.01em}
.hv-plan__price span{font:500 1rem/1 var(--hv-sans);letter-spacing:.02em;color:var(--hv-mute)}
.hv-plan__alt{margin:.9rem 0 1.8rem;font-size:1.0625rem;color:var(--hv-mute)}
.hv-plan__alt strong{color:var(--hv-ink);font-weight:600}
.hv-plan .hv-ticks{align-self:stretch;margin-bottom:2rem}
.hv-plan .hv-pill{margin-top:auto}
.hv-plans__note{border-top:1px solid var(--hv-rule);padding:20px var(--hv-pad) 24px;color:var(--hv-mute);font-size:.9375rem;max-width:none}
@media (max-width:860px){.hv-plans{grid-template-columns:1fr}.hv-plan+.hv-plan{border-left:0;border-top:1px solid var(--hv-rule)}}
.hv-cols3--more{border-top:1px solid var(--hv-rule-dark)}
#pricing,#compare,#ownership,#signup{scroll-margin-top:80px}

.hv-cmp{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.hv-cmp th,.hv-cmp td{padding:20px var(--hv-pad);vertical-align:top;border-bottom:1px solid var(--hv-rule-soft);font-size:.9875rem}
.hv-cmp tbody tr:last-child>*{border-bottom:0}
.hv-cmp thead th{font:400 1.7rem/1.05 var(--hv-display);border-bottom:1px solid var(--hv-rule)}
.hv-cmp thead td{border-bottom:1px solid var(--hv-rule);width:17%}
.hv-cmp tbody th{font:600 .8125rem/1.4 var(--hv-sans);letter-spacing:.14em;text-transform:uppercase}
.hv-cmp tbody td{color:var(--hv-mute)}
.hv-cmp th:nth-child(2),.hv-cmp td:nth-child(2){background:var(--hv-well);color:var(--hv-ink);border-left:1px solid var(--hv-rule);border-right:1px solid var(--hv-rule)}
@media (max-width:760px){
  .hv-cmp,.hv-cmp tbody,.hv-cmp tr,.hv-cmp th,.hv-cmp td{display:block}
  .hv-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hv-cmp tbody tr{border-bottom:1px solid var(--hv-rule);padding:22px 0 8px}
  .hv-cmp tbody tr:last-child{border-bottom:0}
  .hv-cmp tbody th{padding:0 var(--hv-pad) 12px;border:0}
  .hv-cmp tbody td{padding:12px var(--hv-pad);border:0!important}
  .hv-cmp tbody td::before{content:attr(data-col);display:block;font:600 .75rem/1.3 var(--hv-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hv-ink);margin-bottom:.25rem}
}
.hv-plans--3{grid-template-columns:repeat(3,1fr)}
.hv-plans--3 .hv-plan__price{font-size:clamp(3rem,4.6vw,4.6rem)}
@media (max-width:1080px){.hv-plans--3{grid-template-columns:1fr}.hv-plans--3 .hv-plan+.hv-plan{border-left:0;border-top:1px solid var(--hv-rule)}}

/* ---------- Reflow at 320px (a 1280px window zoomed to 400%: WCAG 1.4.10 Reflow), 2026-10-04 ----------
   One-column grids were as wide as their longest word or their row of buttons, so the home page and the
   project pages scrolled sideways on very narrow screens. Let the column shrink, and let long names,
   web addresses and buttons wrap. */
@media (max-width:900px){
  .hv-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hv-pagehead--proj{grid-template-columns:minmax(0,1fr)}
  .hv-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hv-facts dd,.hv-facts dd a{overflow-wrap:anywhere}
}
@media (max-width:420px){
  .hv-hero__foot{flex-wrap:wrap}
  .hv-hero__panel .hv-h1,.hv-pagehead--proj .hv-h1{overflow-wrap:break-word;hyphens:auto}
  .hv-pagehead--proj .hv-pill{white-space:normal;line-height:1.3;overflow-wrap:anywhere}
  .hv-facts>*{padding-left:16px;padding-right:16px}
  .hv-facts dd{font-size:1.35rem;line-height:1.15}
}