/* ===========================================================================
   ABOUT · CONTACT · BLOG
   Sections that only exist on these three pages. Kept in their own file so the
   main stylesheet stays the shared system rather than a dumping ground — every
   variable, button and kicker here comes from style.css.
   =========================================================================== */

/* =========================================================
   ABOUT — the story timeline
   ========================================================= */
.story{padding:82px 0 84px}
.tline{
  position:relative;max-width:800px;margin:0 auto;
  padding-left:0;
}
/* the rule the milestones hang from, faded at both ends so it does not just
   stop dead above the first year and below the last */
.tline::before{
  content:"";position:absolute;left:126px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.tline-item{
  position:relative;display:grid;
  grid-template-columns:104px 44px 1fr;align-items:start;
  padding-bottom:34px;
}
.tline-item:last-child{padding-bottom:0}
.tline-year{
  font-family:var(--font-head);font-weight:800;
  font-size:20px;letter-spacing:-.02em;color:var(--red);
  text-align:right;padding-top:1px;
}
/* the node sits on the rule, ringed in white so the line appears to pass behind
   rather than through it */
.tline-node{
  position:relative;justify-self:center;
  width:14px;height:14px;margin-top:6px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 5px #fff, 0 0 0 7px rgba(237,28,36,.22);
}
.tline-item:last-child .tline-node{background:var(--navy);box-shadow:0 0 0 5px #fff,0 0 0 7px rgba(14,30,99,.2)}
.tline-body h3{
  font-family:var(--font-head);font-weight:800;
  font-size:19.5px;letter-spacing:-.015em;color:var(--ink);margin-bottom:7px;
}
.tline-body p{font-size:15.5px;line-height:1.7;color:var(--ink-body);max-width:56ch}

@media (max-width:720px){
  .story{padding:56px 0 58px}
  .tline::before{left:7px}
  .tline-item{grid-template-columns:28px 1fr;gap:0 14px;padding-bottom:28px}
  .tline-node{grid-row:1;grid-column:1;justify-self:start;margin-top:7px}
  .tline-year{grid-row:1;grid-column:2;text-align:left;font-size:15px;margin-bottom:4px}
  .tline-body{grid-row:2;grid-column:2}
  .tline-body h3{font-size:18px}
}

/* =========================================================
   ABOUT — the figures band
   ========================================================= */
.figs{
  padding:56px 0;
  background:linear-gradient(165deg,var(--navy) 0%,#0A1748 100%);
}
.figs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fig{position:relative;padding-left:26px}
/* a red rule per figure rather than a divider between them, so the last one is
   not left without an edge */
.fig::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:var(--red);
}
.fig-num{
  display:block;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(38px,3.4vw,50px);line-height:1;letter-spacing:-.03em;color:#fff;
}
.fig-num i{font-style:normal;color:var(--red);font-size:.62em;vertical-align:super;margin-left:2px}
.fig b{
  display:block;margin-top:10px;
  font-family:var(--font-head);font-weight:700;
  font-size:16px;color:#fff;letter-spacing:-.01em;
}
.fig-sub{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}

@media (max-width:860px){.figs-grid{grid-template-columns:repeat(2,1fr);gap:30px 24px}}
@media (max-width:460px){.figs-grid{grid-template-columns:1fr}}

/* =========================================================
   ABOUT — the pledges
   ========================================================= */
.pledge{padding:84px 0 86px;background:#F4F5F8}
.pledge-head{max-width:660px;margin:0 auto 46px;text-align:center}
.pledge-head h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,3vw,42px);line-height:1.16;letter-spacing:-.025em;
  color:var(--ink);margin-top:16px;
}
.pledge-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pledge-list li{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  padding:26px 28px;
  background:#fff;border-radius:16px;
  box-shadow:0 1px 2px rgba(14,30,99,.04), 0 14px 32px -22px rgba(14,30,99,.3);
  transition:box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.pledge-list li:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(14,30,99,.05),0 26px 46px -26px rgba(14,30,99,.4)}
/* the numeral is set large and pale so it reads as a marker, not as content */
.pledge-n{
  flex:none;
  font-family:var(--font-head);font-weight:900;
  font-size:34px;line-height:1;letter-spacing:-.04em;
  color:var(--tint-red);opacity:.28;
}
.pledge-list h3{
  font-family:var(--font-head);font-weight:800;
  font-size:18px;line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px;
}
.pledge-list p{font-size:15px;line-height:1.65;color:var(--ink-body)}

@media (max-width:840px){.pledge{padding:56px 0 58px}.pledge-list{grid-template-columns:1fr}}

/* =========================================================
   ABOUT — the comparison
   ========================================================= */
.vs{padding:82px 0 90px}
.vs-table{
  max-width:1000px;margin:0 auto;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#fff;
}
.vs-head,.vs-row{display:grid;grid-template-columns:1.1fr 1.5fr 1.5fr;align-items:center}
.vs-head{
  background:var(--navy);
  font-family:var(--font-head);font-weight:700;
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;
}
.vs-head > span{padding:15px 22px;color:rgba(255,255,255,.6)}
/* our column is lifted out of the header bar in brand red so the eye knows which
   side of the table it is meant to be reading */
.vs-head .vs-us{background:var(--red);color:#fff}
.vs-row{border-top:1px solid var(--line)}
.vs-row > span{padding:16px 22px;font-size:14.5px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.vs-label{font-family:var(--font-head);font-weight:700;color:var(--ink);display:block}
.vs-row .vs-them{color:var(--ink-muted)}
.vs-row .vs-them svg{flex:none;margin-top:3px;color:#C2C8DA}
.vs-row .vs-us{background:rgba(237,28,36,.04);color:var(--ink);font-weight:500}
.vs-row .vs-us svg{flex:none;margin-top:3px;color:var(--red)}
.vs-row:hover .vs-us{background:rgba(237,28,36,.07)}

@media (max-width:820px){
  .vs{padding:56px 0 60px}
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;border-top:0;border-bottom:1px solid var(--line);padding:6px 0 12px}
  .vs-row:last-child{border-bottom:0}
  .vs-label{padding-bottom:4px;font-size:15px}
  /* the header row is gone on narrow screens, so each cell has to say which side
     it is — otherwise the two lines are just two unlabelled sentences */
  .vs-row .vs-them::after{content:"The usual";order:-1}
  .vs-row .vs-us::after{content:"ABC";order:-1}
  .vs-row .vs-them::after,.vs-row .vs-us::after{
    font-family:var(--font-head);font-weight:700;font-size:10.5px;
    letter-spacing:.07em;text-transform:uppercase;
    align-self:flex-start;margin-top:2px;min-width:62px;
  }
  .vs-row .vs-us{border-radius:10px;margin:0 14px 4px;padding:12px 14px}
  .vs-row .vs-them{padding-bottom:8px}
}

/* =========================================================
   ABOUT — credentials
   ========================================================= */
.creds{padding:0 0 92px}
.creds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cred{
  padding:28px 26px 30px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:border-color .25s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.cred:hover{
  transform:translateY(-3px);border-color:transparent;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 26px 46px -26px rgba(14,30,99,.42);
}
.cred-ico{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:15px;margin-bottom:18px;
  background:var(--tint);color:var(--navy);
  transition:background .25s ease,color .25s ease;
}
.cred-ico svg{width:25px;height:25px}
.cred:hover .cred-ico{background:var(--red);color:#fff}
.cred h3{
  font-family:var(--font-head);font-weight:800;
  font-size:17.5px;letter-spacing:-.015em;color:var(--ink);margin-bottom:9px;
}
.cred p{font-size:14.5px;line-height:1.65;color:var(--ink-body)}

@media (max-width:980px){.creds-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.creds{padding-bottom:60px}.creds-grid{grid-template-columns:1fr}}

/* =========================================================
   CONTACT — the 50/50
   ========================================================= */
.ctc{padding:80px 0 88px}
.ctc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

.ctc-copy h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(32px,3.4vw,46px);line-height:1.12;letter-spacing:-.03em;
  color:var(--ink);margin:16px 0 18px;
}
.ctc-lead{font-size:16.5px;line-height:1.75;color:var(--ink-body);max-width:52ch}

.ctc-ticks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:28px 0 34px}
.ctc-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ctc-ticks .tick{flex:none;margin-top:1px}

/* Each route is a row rather than a block of text: icon, label, value, and an
   arrow on the two that are actually actionable. The hours and the coverage are
   the same row without the arrow, so the group reads as one list. */
.ctc-direct{display:flex;flex-direction:column;gap:10px}
.ctc-line{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
  transition:border-color .22s ease,box-shadow .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.ctc-ico{
  flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:13px;
  background:var(--tint);color:var(--navy);
  transition:background .22s ease,color .22s ease;
}
.ctc-txt{flex:1 1 auto;min-width:0}
.ctc-txt em{
  display:block;font-style:normal;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:3px;
}
.ctc-txt b{
  display:block;
  font-family:var(--font-head);font-weight:800;
  font-size:18px;letter-spacing:-.015em;color:var(--ink);
  overflow-wrap:anywhere;
}
.ctc-go{flex:none;color:var(--ink-muted);opacity:0;transform:translateX(-5px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1)}
a.ctc-line:hover{
  transform:translateY(-2px);border-color:transparent;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 20px 38px -22px rgba(14,30,99,.45);
}
a.ctc-line:hover .ctc-ico{background:var(--red);color:#fff}
a.ctc-line:hover .ctc-go{opacity:1;transform:none;color:var(--red)}
/* the phone is the primary route on a trade site, so it gets the brand color
   at rest instead of earning it on hover */
.ctc-line--call .ctc-ico{background:var(--tint-red-sm);color:var(--red)}
.ctc-line--call .ctc-txt b{color:var(--red);font-size:22px}
.ctc-line--flat{background:transparent;border-style:dashed}
.ctc-line--flat .ctc-txt b{font-size:16px}

.ctc-form-wrap{
  padding:34px 34px 36px;border-radius:20px;
  background:linear-gradient(165deg,var(--navy) 0%,#0A1748 100%);
  box-shadow:0 40px 80px -40px rgba(14,30,99,.85);
}
.ctc-form-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12)}
.ctc-form-head h3{
  font-family:var(--font-head);font-weight:900;
  font-size:25px;letter-spacing:-.02em;color:#fff;
}
.ctc-form-head p{margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.66)}

@media (max-width:980px){
  .ctc{padding:56px 0 60px}
  .ctc-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:560px){
  .ctc-ticks{grid-template-columns:1fr}
  .ctc-form-wrap{padding:24px 20px 26px;border-radius:16px}
}

/* =========================================================
   CONTACT — the map
   ========================================================= */
.cmap{padding:0 0 90px}
.cmap-head{max-width:660px;margin:0 auto 34px;text-align:center}
.cmap-frame{
  position:relative;
  max-width:1400px;margin:0 auto;
  height:clamp(340px,46vh,520px);
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(14,30,99,.6);
}
.cmap-frame iframe{display:block;width:100%;height:100%;filter:saturate(.88)}
/* the card floats over the map rather than sitting beside it, so the map keeps
   the full width and the card does not become a second column to balance */
.cmap-card{
  position:absolute;left:26px;bottom:26px;
  width:min(330px,calc(100% - 52px));
  padding:24px 24px 26px;border-radius:18px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(6px);
  box-shadow:0 24px 50px -26px rgba(8,16,48,.7);
}
.cmap-chip{
  display:inline-block;margin-bottom:12px;
  padding:5px 12px;border-radius:999px;
  background:var(--tint-red-sm);
  font-family:var(--font-head);font-weight:700;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--red);
}
.cmap-card h3{
  font-family:var(--font-head);font-weight:900;
  font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;
}
.cmap-card p{font-size:14px;line-height:1.6;color:var(--ink-body);margin-bottom:18px}
.cmap-card .btn{width:100%;justify-content:center}

@media (max-width:700px){
  .cmap{padding-bottom:60px}
  .cmap-frame{border-radius:16px;height:340px}
  .cmap-card{position:static;width:auto;margin:14px 0 0;box-shadow:none;border:1px solid var(--line)}
  .cmap-frame{overflow:visible;border:0;box-shadow:none;height:auto}
  .cmap-frame iframe{height:280px;border-radius:16px;border:1px solid var(--line)}
}

/* =========================================================
   BLOG — index
   ========================================================= */
.blog{padding:80px 0 88px}
.blog--rel{background:#F4F5F8;padding:76px 0 84px}

/* lead article: copy on the left, its own key takeaways on the right. No stock
   photography anywhere on the blog — the takeaways are the actual content and
   they carry more weight than a picture of a chimney we did not build. */
.blead{
  display:grid;grid-template-columns:1.35fr 1fr;gap:0;
  border-radius:22px;overflow:hidden;margin-bottom:46px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,30,99,.04),0 20px 44px -28px rgba(14,30,99,.34);
  transition:box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.blead:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(14,30,99,.05),0 36px 64px -32px rgba(14,30,99,.46)}
.blead-body{padding:38px 40px 40px}
.blead-body h3{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(25px,2.4vw,34px);line-height:1.18;letter-spacing:-.028em;
  color:var(--ink);margin:14px 0 14px;
}
.blead:hover .blead-body h3{color:var(--red)}
.blead-body h3{transition:color .22s ease}
.blead-body p{font-size:16px;line-height:1.7;color:var(--ink-body);max-width:54ch}
.blead-go{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--red);
}
.blead-go svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.blead:hover .blead-go svg{transform:translateX(5px)}

.blead-key{
  padding:38px 34px 40px;
  background:linear-gradient(165deg,var(--navy) 0%,#0A1748 100%);
}
.blead-key-h{
  display:block;margin-bottom:18px;
  font-family:var(--font-head);font-weight:700;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--red);
}
.blead-key ul{display:flex;flex-direction:column;gap:14px}
.blead-key li{
  position:relative;padding-left:24px;
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86);
}
.blead-key li::before{
  content:"";position:absolute;left:0;top:7px;
  width:13px;height:7px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}

/* meta */
.bmeta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13px;color:var(--ink-muted)}
.bcat{
  padding:5px 12px;border-radius:999px;
  background:var(--tint-red-sm);
  font-family:var(--font-head);font-weight:700;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);
}
.bdot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

/* filter */
.bfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.bchip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:var(--tint);
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink);
  transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.22,1,.36,1);
}
.bchip span{
  font-size:11.5px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:rgba(14,30,99,.09);color:var(--ink-muted);
}
.bchip:hover{transform:translateY(-2px)}
.bchip.is-on{background:var(--navy);color:#fff}
.bchip.is-on span{background:rgba(255,255,255,.16);color:#fff}

/* cards */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcard{
  display:flex;flex-direction:column;
  padding:26px 26px 22px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:border-color .25s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.bcard:hover{
  transform:translateY(-3px);border-color:transparent;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 26px 48px -26px rgba(14,30,99,.44);
}
.bcard h3{
  font-family:var(--font-head);font-weight:800;
  font-size:19px;line-height:1.3;letter-spacing:-.018em;
  margin:14px 0 10px;
}
.bcard h3 a{color:var(--ink);transition:color .2s ease}
/* the whole card is the target, not just the words */
.bcard h3 a::after{content:"";position:absolute;inset:0}
.bcard{position:relative}
.bcard:hover h3 a{color:var(--red)}
.bcard p{
  flex:1 1 auto;
  font-size:14.5px;line-height:1.65;color:var(--ink-body);margin-bottom:18px;
}
.bcard-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-muted);
}
.bcard-foot svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.bcard:hover .bcard-foot svg{transform:translateX(4px);color:var(--red)}
.bnone{margin-top:26px;text-align:center;color:var(--ink-muted)}

@media (max-width:1040px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .blog{padding:56px 0 60px}
  .blead{grid-template-columns:1fr}
  .blead-body{padding:28px 24px 26px}
  .blead-key{padding:26px 24px 28px}
}
@media (max-width:620px){.bgrid{grid-template-columns:1fr}}

/* =========================================================
   BLOG — the article
   ========================================================= */
.phero--post .phero-inner h1{max-width:20ch}
/* The hero photo is a bright daylight sky, so the white this started as
   disappeared into it. Brand red holds against the sky the way the navy headline
   above it does, and the category pill goes solid so it reads as a label rather
   than as more of the same line. */
.pmeta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:20px;
  font-family:var(--font-head);font-weight:700;
  font-size:14.5px;letter-spacing:-.005em;color:var(--red);
}
.pmeta .bdot{background:var(--red);opacity:.55}
.phero--post .bcat{background:var(--red);color:#fff}

.post{padding:70px 0 84px}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:54px;align-items:start}

/* answer-first block, above the article */
.post-key{
  padding:26px 28px 28px;border-radius:16px;margin-bottom:34px;
  background:var(--tint);
  border-left:4px solid var(--red);
}
.post-key h2{
  font-family:var(--font-head);font-weight:800;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--red);
  margin-bottom:14px;
}
.post-key ul{display:flex;flex-direction:column;gap:11px}
.post-key li{
  position:relative;padding-left:25px;
  font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;
}
.post-key li::before{
  content:"";position:absolute;left:0;top:8px;
  width:13px;height:7px;
  border-left:2.4px solid var(--red);border-bottom:2.4px solid var(--red);
  transform:rotate(-45deg);
}

/* long-form body */
.prose{font-size:17px;line-height:1.78;color:var(--ink-body)}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(24px,2.2vw,30px);line-height:1.24;letter-spacing:-.025em;
  color:var(--ink);
  margin-top:2em;scroll-margin-top:110px;
}
.prose h3{
  font-family:var(--font-head);font-weight:800;
  font-size:19.5px;line-height:1.32;letter-spacing:-.018em;color:var(--ink);
  margin-top:1.7em;
}
.prose strong{color:var(--ink);font-weight:700}
.prose em{font-style:italic}
.prose ul,.prose ol{padding-left:0;display:flex;flex-direction:column;gap:10px}
.prose li{position:relative;padding-left:26px}
.prose ul > li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:7px;height:7px;border-radius:50%;background:var(--red);
}
.prose ol{counter-reset:pstep}
.prose ol > li{counter-increment:pstep;padding-left:34px}
.prose ol > li::before{
  content:counter(pstep);position:absolute;left:0;top:.1em;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tint-red-sm);color:var(--red);
  font-family:var(--font-head);font-weight:800;font-size:12px;
}
/* tables scroll inside their own box rather than making the page scroll */
.prose table{
  display:block;overflow-x:auto;
  width:100%;border-collapse:collapse;
  font-size:15px;
}
.prose thead th{
  background:var(--navy);color:#fff;text-align:left;
  font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
  padding:12px 16px;white-space:nowrap;
}
.prose tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:nth-child(odd) td{background:#FAFBFE}
.prose tbody td:first-child{font-weight:600;color:var(--ink)}

/* FAQ */
.post-faq{margin-top:52px}
.post-faq h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em;color:var(--ink);
  margin-bottom:18px;scroll-margin-top:110px;
}
.post-faq details{
  border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;background:#fff;overflow:hidden;
  transition:border-color .22s ease,box-shadow .28s ease;
}
.post-faq details[open]{border-color:transparent;box-shadow:0 1px 2px rgba(14,30,99,.05),0 18px 36px -24px rgba(14,30,99,.4)}
.post-faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;
  font-family:var(--font-head);font-weight:700;
  font-size:16.5px;letter-spacing:-.012em;color:var(--ink);
}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary:hover{color:var(--red)}
/* a plus that rotates into a minus — one element, no icon swap */
.faq-x{position:relative;flex:none;width:18px;height:18px}
.faq-x::before,.faq-x::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;
  background:var(--red);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.faq-x::after{transform:rotate(90deg)}
.post-faq details[open] .faq-x::after{transform:rotate(0)}
.faq-a{padding:0 22px 20px}
.faq-a p{font-size:15.5px;line-height:1.72;color:var(--ink-body);max-width:64ch}

/* inline CTA */
.post-cta{
  display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;
  margin-top:52px;padding:32px 34px;border-radius:20px;
  background:linear-gradient(165deg,var(--navy) 0%,#0A1748 100%);
}
.post-cta h2{
  font-family:var(--font-head);font-weight:900;
  font-size:25px;line-height:1.2;letter-spacing:-.022em;color:#fff;margin:14px 0 10px;
}
.post-cta p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72)}
.post-cta-act{display:flex;flex-direction:column;gap:14px}
.post-cta-act .btn{width:100%;justify-content:center}
.post-cta-call{text-align:center}
.post-cta-call em{
  display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px;
}
.post-cta-call b{
  font-family:var(--font-head);font-weight:800;font-size:20px;
  color:#fff;letter-spacing:-.015em;
}
.post-cta-call:hover b{color:var(--red)}

/* sidebar */
.post-side-in{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.pcard{padding:24px 24px 26px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pcard h2{
  font-family:var(--font-head);font-weight:800;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);
  margin-bottom:14px;
}
.pcard--dark{background:linear-gradient(165deg,var(--navy) 0%,#0A1748 100%);border-color:transparent}
.pcard--dark h2{color:var(--red)}
.pcard--dark p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.75);margin-bottom:18px}
.pcard--dark .btn{width:100%;justify-content:center}
.pcard-call{
  display:block;text-align:center;margin-top:14px;
  font-family:var(--font-head);font-weight:800;font-size:19px;color:#fff;
}
.pcard-call:hover{color:var(--red)}

.ptoc{counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.ptoc li{counter-increment:toc}
.ptoc a{
  display:block;padding:7px 0 7px 26px;position:relative;
  font-size:14.5px;line-height:1.45;color:var(--ink-body);
  transition:color .18s ease,padding-left .24s cubic-bezier(.22,1,.36,1);
}
.ptoc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:7px;
  font-family:var(--font-head);font-weight:700;font-size:11.5px;color:var(--red);opacity:.6;
}
.ptoc a:hover{color:var(--red);padding-left:31px}

.plinks{display:flex;flex-direction:column;gap:1px}
.plinks a{
  display:block;padding:8px 0;
  font-size:14.5px;color:var(--ink-body);
  transition:color .18s ease,padding-left .24s cubic-bezier(.22,1,.36,1);
}
.plinks a:hover{color:var(--red);padding-left:8px}

@media (max-width:1040px){
  .post{padding:52px 0 60px}
  .post-grid{grid-template-columns:1fr;gap:40px}
  .post-side-in{position:static}
  /* on one column the contents list is between the reader and the article, so
     the two useful cards move to the end and the TOC goes entirely */
  .post-side .pcard:first-child{display:none}
}
@media (max-width:620px){
  .prose{font-size:16px}
  .post-key{padding:22px 20px 24px}
  .post-cta{grid-template-columns:1fr;padding:26px 22px;gap:22px}
}

/* =========================================================
   PROJECTS — the photo-record strip
   ========================================================= */
.shots{padding:78px 0 10px}
.shots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shot{
  position:relative;overflow:hidden;
  padding:30px 28px 30px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:border-color .25s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.shot:hover{
  transform:translateY(-3px);border-color:transparent;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 26px 48px -26px rgba(14,30,99,.44);
}
/* the numeral is a watermark rather than content, so it sits behind and pale */
.shot-n{
  position:absolute;top:14px;right:20px;
  font-family:var(--font-head);font-weight:900;
  font-size:52px;line-height:1;letter-spacing:-.05em;
  color:var(--tint);pointer-events:none;
}
.shot-ico{
  position:relative;display:grid;place-items:center;
  width:50px;height:50px;border-radius:14px;margin-bottom:18px;
  background:var(--tint);color:var(--navy);
  transition:background .25s ease,color .25s ease;
}
.shot-ico svg{width:24px;height:24px}
.shot:hover .shot-ico{background:var(--red);color:#fff}
.shot h3{
  position:relative;
  font-family:var(--font-head);font-weight:800;
  font-size:18px;letter-spacing:-.015em;color:var(--ink);margin-bottom:9px;
}
.shot p{position:relative;font-size:14.5px;line-height:1.65;color:var(--ink-body)}

@media (max-width:900px){.shots{padding-top:56px}.shots-grid{grid-template-columns:1fr}}

/* =========================================================
   PROJECTS — the gallery
   ========================================================= */
.gal{padding:70px 0 90px}
/* A fixed row track with some tiles spanning two of them. A uniform grid of
   sixteen identical rectangles reads as a contact sheet; this reads as work. */
.gal-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px;gap:18px;
}
.gtile{
  position:relative;overflow:hidden;border-radius:16px;
  background:var(--navy);cursor:pointer;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 16px 34px -22px rgba(14,30,99,.4);
  transition:box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.gtile--tall{grid-row:span 2}
.gtile:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(14,30,99,.06),0 32px 56px -28px rgba(14,30,99,.55)}
.gtile picture,.gtile img{display:block;width:100%;height:100%}
.gtile img{
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .35s ease;
}
.gtile:hover img{transform:scale(1.06)}

/* the scrim only exists where the type sits, so the top of the photo is never
   dimmed for no reason */
.gtile-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:52px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(8,16,48,.78) 46%,rgba(8,16,48,.92));
  color:#fff;
}
.gtile-cat{
  display:inline-block;margin-bottom:9px;
  padding:4px 11px;border-radius:999px;
  background:var(--red);
  font-family:var(--font-head);font-weight:700;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#fff;
}
.gtile-cap b{
  display:block;
  font-family:var(--font-head);font-weight:800;
  font-size:16.5px;line-height:1.3;letter-spacing:-.015em;color:#fff;
}
.gtile-town{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:13px;color:rgba(255,255,255,.72);
}
.gtile-town svg{flex:none;color:var(--red)}

/* the expand affordance — present but quiet until hover */
.gtile-btn{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--navy);
  opacity:0;transform:scale(.8);
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease;
}
.gtile:hover .gtile-btn{opacity:1;transform:none}
.gtile-btn:hover{background:var(--red);color:#fff}

@media (max-width:1100px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){
  .gal{padding:52px 0 60px}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:14px}
  .gtile-cap{padding:40px 15px 14px}
  .gtile-cap b{font-size:14.5px}
  /* the button is a hover affordance and there is no hover here — the whole
     tile is the target anyway */
  .gtile-btn{display:none}
}
@media (max-width:480px){.gal-grid{grid-template-columns:1fr;grid-auto-rows:230px}.gtile--tall{grid-row:span 1}}

/* =========================================================
   PROJECTS — the lightbox
   ========================================================= */
.lb{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:24px}
.lb[hidden]{display:none}
.lb-veil{
  position:absolute;inset:0;
  background:rgba(6,12,36,.88);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .22s ease;
}
.lb.is-open .lb-veil{opacity:1}
.lb-card{
  position:relative;
  max-width:min(1100px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;background:var(--navy);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9);
  opacity:0;transform:scale(.97);
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.lb.is-open .lb-card{opacity:1;transform:none}
.lb-card img{display:block;max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;background:#0A1748}
.lb-cap{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 22px;color:#fff;
}
.lb-cap b{font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:-.015em}
.lb-cap .gtile-town{margin-top:0}
.lb-count{
  margin-left:auto;
  font-family:var(--font-head);font-weight:700;font-size:13px;
  color:rgba(255,255,255,.55);letter-spacing:.04em;
}

.lb-x,.lb-nav{
  position:absolute;z-index:2;
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .2s ease,transform .25s cubic-bezier(.22,1,.36,1);
}
.lb-x:hover,.lb-nav:hover{background:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.lb-x{top:22px;right:24px}
.lb-nav{top:50%;margin-top:-24px}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-prev:hover{transform:translateX(-3px)}
.lb-next:hover{transform:translateX(3px)}

@media (max-width:820px){
  .lb{padding:0}
  .lb-card{max-width:100vw;max-height:100vh;border-radius:0}
  .lb-card img{max-height:calc(100vh - 210px)}
  .lb-x{top:14px;right:14px;width:42px;height:42px}
  /* at this width side arrows sit on top of the photo — put them under it */
  .lb-nav{top:auto;bottom:18px;margin-top:0;width:44px;height:44px}
  .lb-prev{left:auto;right:76px}
  .lb-next{right:20px}
  .lb-cap{padding:14px 18px 74px}
  .lb-count{width:100%;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .lb-veil,.lb-card{transition:none}
  .lb-card{transform:none}
  .gtile img{transition:none}
  .gtile:hover img{transform:none}
}

/* =========================================================
   OPENING HOURS
   A day/time pair per row rather than one run-on line, so three different sets
   of hours stay readable and "Closed" is obvious at a glance.
   ========================================================= */
.foot-hours{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.foot-hours span{flex:none}
/* The footer is white, so white text was invisible — only "Closed" showed,
   because its own rule overrides this one in red. */
.foot-hours b{font-weight:700;color:var(--ink);white-space:nowrap}

/* on the contact page the rows sit inside .ctc-txt, which already has a label */
.ctc-hours{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  max-width:250px;
  font-size:15px;line-height:1.7;
}
.ctc-hours span{font-weight:600;color:var(--ink-muted)}
.ctc-hours i{font-style:normal;font-weight:800;color:var(--ink);white-space:nowrap}
/* closed days read as closed, not as another opening time */
.ctc-hours:last-child i,.foot-hours:last-child b{color:var(--red)}

/* ============ FAQ SECTION ============================================
   The shared FAQ block (inc/faq.php). It borrows the article accordion's
   look wholesale — .faqs-list also carries .post-faq — so the two can never
   drift apart. Only the section frame and the two-column list are new. */
.faqs{padding:76px 0 84px;background:var(--paper,#F7F8FC)}
.faqs .services-head{margin-bottom:34px}
.faqs-list{margin-top:0}
.faqs .post-faq details{margin-bottom:12px}
/* two columns on desktop: a dozen questions in one stack is a long scroll.
   columns rather than grid so an opened item grows without shunting a
   neighbor sideways. */
@media (min-width:900px){
  .faqs-list{columns:2;column-gap:20px}
  .faqs-list details{break-inside:avoid;-webkit-column-break-inside:avoid}
}
.faq-more{
  color:var(--red);font-weight:650;text-decoration:none;
  border-bottom:1px solid rgba(237,28,36,.32);
  transition:border-color .2s ease;
}
.faq-more:hover{border-bottom-color:var(--red)}
@media (max-width:600px){
  .faqs{padding:52px 0 58px}
  .faqs .post-faq summary{padding:15px 17px;font-size:15.5px}
  .faq-a{padding:0 17px 17px}
}

/* the lede paragraph that opens a service overview, and the named sections the
   content master splits each service into */
.about-lede{font-size:17.5px !important;line-height:1.7 !important;color:var(--ink) !important;font-weight:500}
.about-sub{
  font-family:var(--font-head);font-weight:800;
  font-size:17.5px;letter-spacing:-.015em;color:var(--ink);
  margin:26px 0 8px;
}
/* the internal-linking sentence: links inside prose, not a row of chips */
.services--links{padding:0 0 8px;background:transparent}
.svc-alsolinks{
  max-width:760px;margin:34px auto 0;text-align:center;
  font-size:16px;line-height:1.75;color:var(--ink-body);
}
.svc-alsolinks a{
  color:var(--red);font-weight:650;text-decoration:none;
  border-bottom:1px solid rgba(237,28,36,.3);
}
.svc-alsolinks a:hover{border-bottom-color:var(--red)}
@media (max-width:600px){
  .about-lede{font-size:16.5px !important}
  .about-sub{font-size:16.5px;margin:22px 0 7px}
  .svc-alsolinks{margin-top:26px;font-size:15.5px}
}

/* ============ HOME: TRUST COPY + WHICH-ONE-DO-YOU-NEED =================
   Two columns at the foot of the home page: the content master's trust copy
   on the left, and the free-estimate vs paid-inspection choice on the right.
   The document is explicit that those two products have to be told apart
   before a visitor books, so the choice gets a panel rather than a line of
   small print. */
.intro{padding:78px 0 72px;background:#fff}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:56px;align-items:start}
.intro-copy .kicker{margin-bottom:14px}
.intro-copy h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(26px,2.7vw,38px);letter-spacing:-.03em;line-height:1.14;color:var(--ink);
}
.intro-copy p{margin:16px 0 0;font-size:16.5px;line-height:1.78;color:var(--ink-body);max-width:60ch}

.intro-choose{
  border:1px solid var(--line);border-radius:20px;padding:26px 24px 22px;background:#fff;
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 30px 60px -40px rgba(14,30,99,.5);
}
.intro-choose > h3{
  font-family:var(--font-head);font-weight:900;font-size:19px;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:16px;
}
.ichoice{border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;margin-bottom:14px}
.ichoice--alt{background:#F7F8FC}
.ichoice-tag{
  display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:999px;
  background:var(--red);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.04em;
}
.ichoice-tag--navy{background:var(--navy)}
.ichoice b{display:block;font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink)}
.ichoice p{margin:7px 0 15px;font-size:14.5px;line-height:1.65;color:var(--ink-body)}
.ichoice .btn{width:100%;justify-content:center;height:46px;font-size:14.5px}
.ichoice-note{margin:4px 2px 0;font-size:13px;line-height:1.6;color:var(--ink-muted)}

@media (max-width:960px){ .intro-grid{grid-template-columns:minmax(0,1fr);gap:34px} }
@media (max-width:600px){
  .intro{padding:52px 0 48px}
  .intro-copy p{font-size:16px}
  .intro-choose{padding:20px 17px 18px}
}

/* A ghost variant of the primary button, navy on transparent. Shared by the
   panel above and the services index. */
.btn--ghost-navy{
  background:transparent;color:var(--navy);border:1.6px solid var(--navy);
}
.btn--ghost-navy:hover{background:var(--navy);color:#fff}

/* ============ SERVICES INDEX =========================================
   A plain, crawlable list of every published service page. The content
   master asks for exactly this and warns against hiding the list inside
   a script-driven accordion, so it is server-rendered and always open. */
.svcindex{padding:74px 0 80px;background:#fff}
.svcindex-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px;
  max-width:1180px;margin:0 auto;
}
.svcindex-col h3{
  font-family:var(--font-head);font-weight:900;font-size:16px;
  letter-spacing:-.015em;color:var(--ink);
  padding-bottom:11px;margin-bottom:12px;border-bottom:2px solid var(--red);
}
.svcindex-col h3 a:hover{color:var(--red)}
.svcindex-col ul{list-style:none;margin:0;padding:0}
.svcindex-col li{margin-bottom:8px}
.svcindex-col a{
  font-size:14.5px;line-height:1.5;color:var(--ink-body);
  transition:color .18s ease;
}
.svcindex-col a:hover{color:var(--red)}
/* a cross-link: same list, but visibly a pointer elsewhere rather than one of
   this group's own pages */
.svcindex-x a{color:var(--ink-muted);font-style:italic}

.svcindex-unsure{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;align-items:center;
  max-width:1180px;margin:44px auto 0;padding:26px 30px;
  border:1px solid var(--line);border-radius:18px;background:#F7F8FC;
}
.svcindex-unsure b{
  display:block;font-family:var(--font-head);font-weight:900;
  font-size:19px;letter-spacing:-.02em;color:var(--ink);
}
.svcindex-unsure p{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--ink-body)}
.svcindex-unsure-act{display:flex;flex-direction:column;gap:10px}
.svcindex-unsure-act .btn{width:100%;justify-content:center;height:48px}

@media (max-width:1000px){ .svcindex-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .svcindex{padding:52px 0 56px}
  .svcindex-grid{grid-template-columns:1fr;gap:26px}
  .svcindex-unsure{grid-template-columns:1fr;padding:22px 19px;gap:20px}
}

/* ============ CONTACT: THE EXTRA FIELDS ==============================
   Estimate-vs-inspection choice, and the optional photo upload. Both are
   fields the content master asks for that the form did not have. */
.cpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cpick-opt{cursor:pointer}
.cpick-opt input{position:absolute;opacity:0;width:0;height:0}
.cpick-box{
  display:block;padding:13px 15px;border:1.6px solid var(--line);border-radius:12px;
  background:#fff;transition:border-color .18s ease,background .18s ease,box-shadow .22s ease;
}
.cpick-box b{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:14.5px;color:var(--ink);letter-spacing:-.01em;
}
.cpick-box small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-muted)}
.cpick-opt input:checked + .cpick-box{
  border-color:var(--red);background:#FFF7F7;
  box-shadow:0 0 0 3px rgba(237,28,36,.09);
}
.cpick-opt input:focus-visible + .cpick-box{outline:2px solid var(--navy);outline-offset:2px}

/* the file input itself is hidden and driven by its label, so the control can
   be styled — but it stays a real <input type=file> for keyboard and forms */
.cfile-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cfile{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 15px;border:1.6px dashed var(--line);border-radius:12px;
  background:#fff;transition:border-color .18s ease,color .18s ease;
}
.cfile:hover{border-color:var(--red)}
.cfile svg{color:var(--red);flex:none}
.cfile-txt{font-size:14px;color:var(--ink-muted)}
.cfile-list{display:none;margin-top:7px;font-size:13px;color:var(--ink);font-weight:600}
.cfile-list.show{display:block}

@media (max-width:520px){
  .cpick{grid-template-columns:1fr}
}

/* ============ LOCATION PAGE: LOCAL CONTEXT ===========================
   Real conditions for the town on the left, the services those conditions
   usually lead to on the right. */
.lcontext{padding:76px 0 78px;background:#fff}
.lcontext-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:54px;align-items:start}
.lcontext-copy .kicker{margin-bottom:14px}
.lcontext-copy h2{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(25px,2.5vw,34px);letter-spacing:-.028em;line-height:1.16;color:var(--ink);
}
.lcontext-copy p{margin:16px 0 0;font-size:16.5px;line-height:1.78;color:var(--ink-body);max-width:62ch}

.lcontext-links{
  border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:#F7F8FC;
}
.lcontext-links h3{
  font-family:var(--font-head);font-weight:900;font-size:17px;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;
}
.lcontext-links ul{list-style:none;margin:0 0 18px;padding:0}
.lcontext-links li{padding:11px 0;border-bottom:1px solid var(--line)}
.lcontext-links li:last-child{border-bottom:0}
.lcontext-links li a{
  display:block;font-family:var(--font-head);font-weight:700;font-size:15px;
  color:var(--ink);letter-spacing:-.01em;transition:color .18s ease;
}
.lcontext-links li a:hover{color:var(--red)}
.lcontext-links li span{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:var(--ink-muted)}
.lcontext-links .btn{width:100%;justify-content:center;height:46px;font-size:14.5px}

@media (max-width:960px){ .lcontext-grid{grid-template-columns:minmax(0,1fr);gap:32px} }
@media (max-width:600px){
  .lcontext{padding:52px 0 54px}
  .lcontext-copy p{font-size:16px}
  .lcontext-links{padding:20px 17px}
}

/* ============ PRIORITY CITY HUBS =====================================
   The thirty towns the content master asks to be built first, given their
   own row above the full county listing. */
.phubs{padding:74px 0 10px;background:#fff}
.phubs-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  max-width:1180px;margin:0 auto;
}
.phubs-grid a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:9px;align-items:center;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .18s ease,box-shadow .24s ease,transform .24s ease;
}
.phubs-grid a:hover{
  border-color:transparent;transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(14,30,99,.05),0 16px 30px -20px rgba(14,30,99,.55);
}
.phub-pin{grid-row:1 / span 2;color:var(--red);display:flex}
.phubs-grid b{
  font-family:var(--font-head);font-weight:700;font-size:14.5px;
  color:var(--ink);letter-spacing:-.012em;
}
.phub-county{font-size:12px;color:var(--ink-muted);line-height:1.3}

@media (max-width:1080px){ .phubs-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){  .phubs-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .phubs{padding:52px 0 6px}
  .phubs-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .phubs-grid a{padding:11px 12px}
}

/* ============ CASE STUDY STRUCTURE ==================================== */
.cstudy{padding:70px 0 76px;background:#F7F8FC}
.cstudy-list{
  list-style:none;margin:0;padding:0;max-width:1080px;
  margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px;
}
.cstudy-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cstudy-n{
  font-family:var(--font-head);font-weight:900;font-size:15px;
  color:var(--red);line-height:1.2;padding-top:2px;
}
.cstudy-list h3{
  font-family:var(--font-head);font-weight:800;font-size:16px;
  letter-spacing:-.015em;color:var(--ink);
}
.cstudy-list p{margin:6px 0 0;font-size:14.5px;line-height:1.68;color:var(--ink-body)}
@media (max-width:900px){ .cstudy-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .cstudy{padding:52px 0 56px}
  .cstudy-list{grid-template-columns:1fr;gap:20px}
}

/* ---- footer social profiles ------------------------------------------------
   Small, quiet and in the brand column under the phone number — they are a
   place to go after the site, not a call to action competing with the phone. */
.foot-social{list-style:none;display:flex;gap:9px;margin:18px 0 0;padding:0}
.foot-social a{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  color:var(--navy);background:var(--tint);
  border:1px solid var(--line);
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.foot-social a:hover{
  background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px);
}
.foot-social a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:760px){
  .foot-social{margin-top:14px}
}