/* ===========================================================================
   Town pages (/web-design/<town>/) and the hub (/service-areas/).
   Markup comes from locations.py; build.py serves this as /assets/css/location.css
   with page-hero.css appended, the same as the other .vt-phead pages.

   The hero and closing band are the .vt-phead / .vt-cta pattern from the
   service pages. Those rules live in each service page's own section.css, so
   they are repeated here rather than loading /web-design/'s whole sheet, which
   is mostly industry-selector CSS these pages do not use. If the service-page
   hero changes, change it here too.

   Sizes are px, not rem: base.css pins the root at 10px for legacy reasons.
   ===========================================================================*/

/* ---- hero, from pages/web-design/section.css ---- */
.vt-phead{
  background:linear-gradient(160deg,#f0f7ff 0%,#eafaff 100%);
  padding:76px 6% 64px;position:relative;overflow:hidden;
}
.vt-phead::before{
  content:'';position:absolute;top:-140px;right:-90px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,125,232,.10),transparent 68%);
  pointer-events:none;
}
.vt-phead-inner{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.vt-phead-copy{display:flex;flex-direction:column;align-items:flex-start}
.vt-ph-h1{
  font-family:'Poppins',sans-serif;
  font-size:clamp(32px,4.4vw,52px);font-weight:800;
  line-height:1.12;letter-spacing:-.02em;color:#0b1929;
  margin:14px 0 16px;
}
.vt-ph-h1 em{
  font-style:italic;display:inline-block;padding-bottom:5px;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.vt-ph-sub{
  font-family:'Poppins',sans-serif;
  font-size:17px;line-height:1.75;color:#3a4e65;max-width:540px;margin-bottom:28px;
}
.vt-ph-btns{display:flex;gap:14px;flex-wrap:wrap}
.vt-ph-points{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;gap:13px;
}
.vt-ph-points li{
  font-family:'Poppins',sans-serif;
  font-size:15px;color:#0b1929;font-weight:600;
  display:flex;align-items:center;gap:11px;
}
.vt-ph-points svg{
  width:19px;height:19px;flex-shrink:0;
  stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);border-radius:50%;padding:4px;
}
.vt-ph-vis{display:flex;justify-content:center;align-items:center}
@media(max-width:900px){
  .vt-phead{padding:56px 6% 48px}
  .vt-phead-inner{grid-template-columns:1fr;gap:36px}
  .vt-ph-vis{display:none}
}

/* ---- closing band, from pages/web-design/section.css ---- */
.vt-cta{
  background:linear-gradient(135deg,#0b1929,#112840);
  padding:72px 6%;position:relative;overflow:hidden;text-align:center;
}
.vt-cta::before{
  content:'';position:absolute;top:-120px;left:-70px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(54,193,224,.12),transparent 66%);
  pointer-events:none;
}
.vt-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.vt-cta h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(26px,3.2vw,38px);font-weight:800;color:#fff;
  line-height:1.2;margin-bottom:14px;
}
.vt-cta h2 em{
  font-style:italic;display:inline-block;
  background:linear-gradient(135deg,#36C1E0,#4DB8A4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.vt-cta p{
  font-family:'Poppins',sans-serif;
  font-size:16px;line-height:1.75;color:rgba(255,255,255,.62);margin-bottom:30px;
}
.vt-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vt-cta .vt-btn-s{
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.18);
}
.vt-cta .vt-btn-s:hover{background:rgba(255,255,255,.14)}

/* ---- breadcrumb, sitting where the other heroes put their .vt-tag ---- */
.vt-crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:#7a93a8;
}
.vt-crumbs li{display:flex;align-items:center;gap:6px}
.vt-crumbs li + li::before{content:'/';color:rgba(11,25,41,.22)}
.vt-crumbs a{color:#1a7de8;text-decoration:none}
.vt-crumbs a:hover{text-decoration:underline}

/* ---- sections ---- */
.vt-loc-sec{padding:72px 6%;background:#fff}
.vt-loc-sec.vt-loc-alt{background:#f4f9ff}
.vt-loc-inner{max-width:1180px;margin:0 auto}

.vt-loc-h2{
  font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.22;
  color:#0b1929;margin-bottom:20px;max-width:760px;
}
.vt-loc-lead{max-width:680px;margin:-6px 0 30px}

.vt-loc-split{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start}
.vt-loc-prose p{font-size:17px;line-height:1.8;color:#3a4e65;max-width:700px}
.vt-loc-prose p + p{margin-top:16px}
.vt-loc-prose p + .vt-loc-h2{margin-top:40px}
.vt-loc-prose a{color:#1a7de8;font-weight:600}

/* What businesses here usually ask for */
.vt-loc-card{
  background:#fff;border:1.5px solid rgba(26,125,232,.12);border-radius:22px;
  padding:30px 28px;box-shadow:0 10px 34px rgba(11,25,41,.06);
}
.vt-loc-card-h{font-size:18px;font-weight:700;line-height:1.4;margin-bottom:18px}
.vt-loc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vt-loc-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.6;color:#0b1929;font-weight:500;
}
.vt-loc-list svg{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);border-radius:50%;padding:4px;
}

/* Linked tiles: services, work, and the towns on the hub */
.vt-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vt-loc-tile{
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1.5px solid rgba(11,25,41,.07);border-radius:22px;
  padding:28px;text-decoration:none;
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s,border-color .3s;
}
.vt-loc-sec:not(.vt-loc-alt) .vt-loc-tile{background:#f8fbff}
.vt-loc-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(11,25,41,.10);border-color:rgba(26,125,232,.22);
}
.vt-loc-tile small{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1a7de8;margin-bottom:6px;
}
.vt-loc-tile h3{font-size:19px;font-weight:700;margin-bottom:8px}
.vt-loc-tile p{font-size:15px;line-height:1.7;color:#3a4e65;margin-bottom:18px}
.vt-loc-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:#1a7de8;
}
.vt-loc-more svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.5;stroke-linecap:round;transition:transform .25s;
}
.vt-loc-tile:hover .vt-loc-more svg{transform:translateX(3px)}

/* Questions */
.vt-loc-faq{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vt-loc-qa{
  background:#fff;border:1.5px solid rgba(11,25,41,.07);border-radius:18px;padding:24px 26px;
}
.vt-loc-sec:not(.vt-loc-alt) .vt-loc-qa{background:#f8fbff}
.vt-loc-qa h3{font-size:17px;font-weight:700;line-height:1.4;margin-bottom:8px}
.vt-loc-qa p{font-size:15px;line-height:1.75}

/* Nearby towns */
.vt-loc-chips{display:flex;flex-wrap:wrap;gap:10px}
.vt-loc-chip{
  display:inline-flex;align-items:center;
  padding:10px 18px;border-radius:50px;
  border:1.5px solid rgba(26,125,232,.16);background:#fff;
  color:#0b1929;font-size:14px;font-weight:600;text-decoration:none;
  transition:border-color .2s,color .2s,transform .2s;
}
.vt-loc-chip:hover{border-color:#1a7de8;color:#1a7de8;transform:translateY(-1px)}

@media(max-width:900px){
  .vt-loc-sec{padding:52px 5%}
  .vt-loc-split{grid-template-columns:1fr;gap:32px}
  .vt-loc-grid,.vt-loc-faq{grid-template-columns:1fr}
  .vt-loc-prose p{font-size:16px}
}
@media(min-width:601px) and (max-width:900px){
  .vt-loc-grid.vt-loc-towns{grid-template-columns:1fr 1fr}
}


/* ===========================================================================
   Shared service-page hero.
   ---------------------------------------------------------------------------
   /web-design/ and /hosting/ both use .vt-phead with the same fixed-size SVG,
   so the fix lives here and build.py appends it to any page whose markup uses
   that pattern. Keeping it in one file stops the two pages drifting apart.
   ===========================================================================*/

/* ------------------------------------------------------------------- hero

   The hero visual is a vector browser mockup pinned at a literal 330x270 in a
   column roughly 480px wide, centred with flex. So it floated with ~75px of
   dead space either side, and being only 270px tall it sat marooned against a
   copy column half again its height. Small and adrift, which is exactly how it
   read.

   It is an SVG with a viewBox, so it scales losslessly. Letting it fill the
   column takes it from 330px to about 545px wide - two thirds larger - and the
   column is rebalanced slightly to give it that room without crowding the
   headline.                                                                  */

.vt-phead-inner {
  /* Only a little off the original 1.15/.85. Taking the copy column down to
     1fr orphaned "turns" on its own line in the headline; this keeps the
     headline breaking where it did while still handing the visual ~180px more
     than it had. */
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
}

.vt-ph-vis {
  /* Was centring a fixed-size child inside a wider box. */
  display: block;
}

.vt-ph-vis > svg {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
  margin-inline: auto;
  /* Lifts it off the flat hero wash, the same soft shadow the cards use. */
  filter: drop-shadow(0 18px 44px rgba(11, 25, 41, .10));
}

@media (max-width: 1000px) {
  .vt-phead-inner {
    gap: 36px;
  }
}

/* The original build hides the hero visual below 900px to keep the headline
   and buttons above the fold on a phone. Setting display:block above would
   have silently undone that, so it is restored explicitly.

   Same trap for the grid: the two-column rule at the top of this file loads
   after each page's own "one column below 900px" rule and beat it, so from
   2026-10-02 to 2026-10-05 the copy sat in a half-width column on phones,
   beside an empty space where the hidden visual used to be. */
@media (max-width: 900px) {
  .vt-phead-inner {
    grid-template-columns: 1fr;
  }
  .vt-ph-vis {
    display: none;
  }
}