/* GetWebCT — shared subpage stylesheet (services, industries, legal, utility) */
:root{
  --ink:#1c2333; --muted:#5c6478;
  --blue:#2457d6; --blue-dark:#173fa7; --blue-tint:#eaf0ff;
  --coral:#ff5a5f; --coral-dark:#e2383e; --coral-tint:#ffe9e8;
  --teal:#0eab98; --teal-dark:#0b8a7a; --teal-tint:#e1f7f3;
  --violet:#7c5cff; --violet-dark:#5f3fe0; --violet-tint:#efebff;
  --amber:#ffab1f; --amber-dark:#e08e00; --amber-tint:#fff3e0;
  --soft:#f7f8fc; --line:#e8eaf1; --white:#fff;
  --shadow:0 20px 50px rgba(28,35,51,.10); --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;overflow-x:hidden;max-width:100vw;font-family:"Poppins","Poppins Fallback",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;margin:0}
.container{width:min(1120px,calc(100% - 40px));margin:auto}
.narrow{width:min(760px,calc(100% - 40px));margin:auto}

/* ---------- TOP COLOR STRIP ---------- */
.top-strip{height:5px;background:linear-gradient(90deg,var(--coral) 0%,var(--amber) 33%,var(--teal) 66%,var(--blue) 100%)}

/* ---------- HEADER / NAV ---------- */
header.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-block{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo{font-weight:800;letter-spacing:-.03em;font-size:23px;color:var(--ink);line-height:1;display:inline-block}
.logo span{background:linear-gradient(90deg,var(--blue),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-tag{font-size:11px;color:var(--muted);font-weight:500;line-height:1.3;text-align:right}
.brand-sep{width:1px;height:32px;background:var(--line)}
nav.links{display:flex;gap:28px;align-items:center}
nav.links a{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
nav.links a:hover{color:var(--blue)}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:0}
.menu-toggle span{width:18px;height:2px;background:var(--ink);margin:0 auto;border-radius:2px;transition:.2s ease}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;max-height:0;overflow:hidden;border-top:1px solid var(--line);transition:max-height .3s ease}
.mobile-nav a{padding:15px 20px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-nav a:last-child{border-bottom:none;width:calc(100% - 40px);margin:12px 20px 16px;text-align:center}
.mobile-nav.is-open{max-height:460px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:.2s ease;white-space:nowrap;border:2px solid transparent}
.btn-primary,a.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--violet) 100%);color:#fff !important;box-shadow:0 10px 24px rgba(92,92,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(92,92,255,.32)}
.btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-light:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- BREADCRUMB ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--blue);font-weight:600}

/* ---------- PAGE HERO ---------- */
.page-hero{
  padding:56px 0 60px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,90,95,.10), transparent 40%),
    radial-gradient(circle at 88% 20%, rgba(124,92,255,.14), transparent 45%),
    radial-gradient(circle at 60% 100%, rgba(14,171,152,.10), transparent 40%),
    var(--soft);
}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--violet-dark);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;box-shadow:0 6px 16px rgba(124,92,255,.12)}
.page-hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.08;letter-spacing:-.03em;margin:18px 0 16px;max-width:760px}
.page-hero p.lede{font-size:18px;color:var(--muted);max-width:640px;margin:0 0 26px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}

/* ---------- PAGE HERO ART (icon cluster) ---------- */
.hero-art-sm{position:relative;height:280px}
.hero-art-sm .tile{position:absolute;border-radius:22px;display:grid;place-items:center;box-shadow:0 16px 34px -10px rgba(28,35,51,.28)}
.hero-art-sm .tile svg{width:38%;height:38%}
.hero-art-sm .tile-a{width:118px;height:118px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;top:2%;left:6%;transform:rotate(-6deg)}
.hero-art-sm .tile-b{width:96px;height:96px;background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;top:0;right:10%;transform:rotate(8deg)}
.hero-art-sm .tile-c{width:104px;height:104px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;bottom:8%;left:14%;transform:rotate(5deg)}
.hero-art-sm .tile-d{width:132px;height:132px;background:#fff;border:1px solid var(--line);color:var(--violet);bottom:0;right:2%;transform:rotate(-3deg)}
.hero-art-sm .hdot{position:absolute;border-radius:50%}
.hero-art-sm .hd1{width:12px;height:12px;background:var(--amber);top:22%;right:38%}
.hero-art-sm .hd2{width:9px;height:9px;background:var(--teal);bottom:22%;right:44%}
.hero-art-sm .hd3{width:15px;height:15px;background:var(--coral-tint);border:2px solid var(--coral);top:4%;left:44%}

/* ---------- SECTIONS ---------- */
section{padding:64px 0}
section.tight{padding:44px 0}
.section-head{max-width:700px;margin:0 0 34px}
.section-head h2{font-size:32px;letter-spacing:-.03em;line-height:1.1;margin:12px 0}
.section-head p{color:var(--muted);font-size:16px}
.soft-bg{background:var(--soft)}

/* ---------- CARD GRID (benefits/features), colors cycle blue/coral/teal ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;border-top:4px solid var(--line)}
.info-card .icon{width:44px;height:44px;border-radius:13px;color:#fff;display:grid;place-items:center;margin-bottom:16px}
.info-card .icon svg{width:22px;height:22px}
.info-card h3{font-size:16px;margin:0 0 8px}
.info-card p{font-size:14px;color:var(--muted);margin:0}
.card-grid .info-card:nth-child(3n+1){background:var(--blue-tint);border-top-color:var(--blue)}
.card-grid .info-card:nth-child(3n+1) .icon{background:var(--blue)}
.card-grid .info-card:nth-child(3n+2){background:var(--coral-tint);border-top-color:var(--coral)}
.card-grid .info-card:nth-child(3n+2) .icon{background:var(--coral)}
.card-grid .info-card:nth-child(3n){background:var(--teal-tint);border-top-color:var(--teal)}
.card-grid .info-card:nth-child(3n) .icon{background:var(--teal)}

/* ---------- PROSE (long-form content sections) ---------- */
.prose{max-width:760px}
.prose h2{font-size:26px;letter-spacing:-.02em;margin:0 0 14px}
.prose h3{font-size:19px;margin:26px 0 8px;color:var(--violet-dark)}
.prose p{font-size:16px;color:#3d4759;margin:0 0 16px}
.prose ul{padding-left:20px;color:#3d4759;font-size:16px}
.prose li{margin:6px 0}
.prose a{color:var(--blue);font-weight:600}

/* ---------- FAQ (colored left accent, cycling) ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:20px 0 20px 18px;border-left:3px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item h3{font-size:16px;margin:0 0 8px;color:var(--ink)}
.faq-item p{font-size:14px;color:var(--muted);margin:0}
.faq-item:nth-child(4n+1){border-left-color:var(--blue)}
.faq-item:nth-child(4n+2){border-left-color:var(--coral)}
.faq-item:nth-child(4n+3){border-left-color:var(--teal)}
.faq-item:nth-child(4n+4){border-left-color:var(--violet)}

/* ---------- CTA BANNER ---------- */
.cta{margin:0 auto;max-width:1120px;border-radius:28px;background:linear-gradient(135deg,var(--blue) 0%,var(--violet) 100%);color:#fff;padding:56px 40px;text-align:center}
.cta h2{font-size:34px;line-height:1.1;letter-spacing:-.03em;margin:0 0 14px;color:#fff}
.cta p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 24px}
.cta .btn-primary{background:#fff;color:var(--violet-dark) !important;box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* ---------- LEGAL / PROSE DOC PAGES ---------- */
.legal-body h2{font-size:20px;margin:34px 0 10px;letter-spacing:-.02em;color:var(--ink);padding-left:14px;border-left:4px solid var(--blue)}
.legal-body h2:first-child{margin-top:0}
.legal-body h2:nth-of-type(3n+2){border-left-color:var(--coral)}
.legal-body h2:nth-of-type(3n){border-left-color:var(--teal)}
.legal-body p{font-size:15px;color:#3d4759;margin:0 0 12px}
.legal-body .callout{background:var(--coral-tint);border:1px solid #ffd0ce;border-radius:14px;padding:16px 18px;font-size:13px;color:#8a2f2f;margin:0 0 28px}
.legal-body .meta{font-size:13px;color:var(--muted);margin-bottom:30px}

/* ---------- 404 / THANK YOU (centered utility pages) ---------- */
.utility-page{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,90,95,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(124,92,255,.10), transparent 42%);
}
.utility-page .icon-badge{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 14px 30px rgba(92,92,255,.28)}
.utility-page .icon-badge svg{width:30px;height:30px}
.utility-page .big{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(90deg,var(--blue),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.utility-page h1{font-size:38px;margin:14px 0;letter-spacing:-.02em}
.utility-page p{color:var(--muted);font-size:16px;max-width:480px;margin:0 auto 26px}

/* ---------- FOOTER (colorful accents on a dark base) ---------- */
footer.site-footer{position:relative;padding:56px 0 30px;background:var(--ink);color:#fff;overflow:hidden}
footer.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--coral) 0%,var(--amber) 33%,var(--teal) 66%,var(--blue) 100%)}
footer.site-footer::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 8% 0%, rgba(124,92,255,.16), transparent 38%),
    radial-gradient(circle at 92% 100%, rgba(14,171,152,.14), transparent 38%);
}
footer.site-footer .container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:36px}
.footer-brand .logo{font-size:22px;color:#fff}
.footer-brand .logo span{background:linear-gradient(90deg,#7ea1ff,#b6a4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer-brand p{font-size:13px;color:#a7b0c4;margin:14px 0 0;max-width:220px}
.footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#c7cee0;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.footer-col h4::before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block}
.footer-col:nth-of-type(2) h4::before{background:var(--blue)}
.footer-col:nth-of-type(3) h4::before{background:var(--coral)}
.footer-col:nth-of-type(4) h4::before{background:var(--teal)}
.footer-col a{display:block;font-size:13.5px;color:#c7cee0;margin:0 0 10px}
.footer-col a:hover{color:#7ea1ff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom small{color:#8b93ab;font-size:12.5px}


/* ---------- PRICING CARDS (packages) ---------- */
.pricing-wrap{background:linear-gradient(135deg,var(--coral-dark) 0%,var(--violet-dark) 100%);position:relative}
.pricing-wrap .section-head h2{color:#fff}
.pricing-wrap .section-head p{color:rgba(255,255,255,.82)}
.pricing-foot p{color:rgba(255,255,255,.78)}
.pricing-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price{background:#fff;border-radius:var(--radius);padding:32px 28px;border:2px solid var(--line);display:flex;flex-direction:column}
.price.featured{border-color:var(--violet);box-shadow:0 25px 60px -14px rgba(0,0,0,.5);position:relative}
.price .tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:999px;background:#e7e9f0;border:1px solid #d7dbe6;color:var(--muted);margin-bottom:14px}
.price.featured .tag{background:var(--violet);color:#fff;border-color:var(--violet)}
.price h3{font-size:21px;margin-bottom:10px}
.price .amount{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.price .amount small{font-size:14px;font-weight:600;color:var(--muted)}
.price .amount-note{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.price .amount-note.highlight{font-size:14px;color:var(--violet);font-weight:800;margin-bottom:2px}
.price .amount-note:last-of-type{margin-bottom:14px}
.price > p{color:var(--muted);font-size:14px;margin:10px 0 18px}
.price ul{margin-bottom:22px;padding:0;list-style:none}
.price ul li{font-size:13.5px;padding:6px 0;color:var(--ink)}
.price-footnote{font-size:12px;color:var(--muted);margin-bottom:16px}
.price .btn{width:100%;margin-top:auto}
.price .btn-outline{background:#e7e9f0;border-color:#d7dbe6}
.price .btn-outline:hover{background:#fff;border-color:var(--blue);color:var(--blue)}

/* ---------- ADD-ON CARDS ---------- */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.addon-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;border-top:4px solid var(--line)}
.addon-card .icon{width:44px;height:44px;border-radius:13px;color:#fff;display:grid;place-items:center;margin-bottom:16px}
.addon-card .icon svg{width:22px;height:22px}
.addon-card .addon-price{display:inline-block;font-size:12.5px;font-weight:800;color:var(--violet-dark);background:var(--violet-tint);padding:4px 12px;border-radius:999px;margin-bottom:12px}
.addon-card h3{font-size:16px;margin:0 0 8px}
.addon-card p{font-size:14px;color:var(--muted);margin:0}
.addon-grid .addon-card:nth-child(3n+1){border-top-color:var(--blue)}
.addon-grid .addon-card:nth-child(3n+1) .icon{background:var(--blue)}
.addon-grid .addon-card:nth-child(3n+2){border-top-color:var(--coral)}
.addon-grid .addon-card:nth-child(3n+2) .icon{background:var(--coral)}
.addon-grid .addon-card:nth-child(3n){border-top-color:var(--teal)}
.addon-grid .addon-card:nth-child(3n) .icon{background:var(--teal)}

/* ---------- PORTFOLIO / WORK CARDS ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-card{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.work-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.work-thumb img{width:100%;height:100%;object-fit:cover}
.work-body{padding:18px 20px 22px}
.work-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--violet)}
.work-body h4{font-size:17px;margin:8px 0 6px}
.work-body p{font-size:13.5px;color:var(--muted);margin:0}

/* ---------- info tooltip (scope clarifications) ---------- */
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800;font-style:normal;margin-left:6px;cursor:help;vertical-align:middle;line-height:1;user-select:none}
.info-tip:hover,.info-tip:focus,.info-tip.is-open{background:var(--blue);border-color:var(--blue);color:#fff;outline:none}
.info-tip-bubble{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:250px;max-width:80vw;background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.5;text-align:left;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;z-index:30;pointer-events:none}
.info-tip-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.info-tip:hover .info-tip-bubble,.info-tip:focus .info-tip-bubble,.info-tip.is-open .info-tip-bubble{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- RESPONSIVE ----------
   MUST STAY LAST IN THIS FILE. These overrides have the same specificity as
   the base grid rules above (.price-grid / .addon-grid / .work-grid) and a
   @media block adds none of its own, so source order alone decides the
   winner. Moved here 2026-09-11 — previously they sat near the top and were
   silently overridden, leaving /pricing/ and /portfolio/ stuck at 3 columns
   on phones with cards clipped off-screen by body{overflow-x:hidden}.
   Do not move anything below this line. */
@media(max-width:850px){
  nav.links{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{display:flex}
  .card-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .page-hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art-sm{height:220px;order:-1}
  .price-grid{grid-template-columns:1fr}
  .addon-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .cta{padding:44px 24px}
  .work-grid{grid-template-columns:1fr}
}

/* The 7-item nav needs ~1220px to sit on one line without wrapping. Collapse to
   the hamburger before it can overflow — kept separate from the 850px block above
   so the card grids are NOT forced to stack this early. (2026-09-11) */
@media(max-width:1250px){
  nav.links{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{display:flex}
}

/* ---------- header call/text button ----------
   Shown only where the nav has collapsed to the hamburger (<=1250px), i.e. the
   phones and tablets where tapping to call beats filling in a modal form.
   Trade customers on a job site reach for this instead of the quote popup. */
.hdr-call{display:none;align-items:center;justify-content:center;gap:7px;padding:8px 14px;min-height:44px;border-radius:999px;
  background:var(--blue-tint);color:var(--blue-dark);border:1px solid #d3defa;
  font-size:13.5px;font-weight:800;white-space:nowrap;letter-spacing:-.01em;margin-left:auto}
.hdr-call svg{width:15px;height:15px;flex:none}
.hdr-call:hover{background:#dfe8ff}
@media(max-width:1250px){ .hdr-call{display:inline-flex} }
@media(max-width:430px){
  .hdr-call{padding:8px 12px;gap:5px;font-size:12.5px;min-height:44px}
  .hdr-call svg{width:14px;height:14px}
}
@media(max-width:360px){ .hdr-call span{display:none} .hdr-call{padding:0;width:44px;min-width:44px;flex:none} }

/* Below 560px the brand tag is dropped so the logo, the call button and the
   hamburger all fit. Without this the brand block's fixed 282px pushes the
   hamburger off-screen — and body{overflow-x:hidden} hides the evidence. */
@media(max-width:560px){
  .brand-tag,.brand-sep{display:none}
}