/* ============================================================
   VINTAGE — HOME PAGE SECTIONS
   Added on top of style.css. Reuses the template's own palette:
     teal page   var(--vt-page)      cream panel var(--vt-panel)
     ink/brown   var(--vt-ink)      rust accent var(--vt-accent)
   ============================================================ */

/* ---------- Section shell + heading ---------- */
.vt-section {
  margin-bottom: 70px;
}

.vt-head {
  text-align: center;
  margin-bottom: 40px;
}

.vt-head h2 {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 38px;
  line-height: 1.2em;
  color: var(--vt-accent);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
  word-spacing: -0.1em;
  margin: 0;
}

.vt-head p {
  max-width: 620px;
  margin: 12px auto 0;
  color: #46413a;
  font-size: 15px;
}

/* Small ornamental rule under a section title */
.vt-rule {
  display: block;
  width: 120px;
  height: 9px;
  margin: 14px auto 0;
  position: relative;
  border-top: 2px solid var(--vt-ink);
  opacity: 0.55;
}

.vt-rule:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  width: 9px;
  height: 9px;
  background: var(--vt-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--vt-page);
}

/* On the brown band the rule flips to cream */
.vt-band .vt-head h2 {
  color: var(--vt-panel-light);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.vt-band .vt-head p { color: #ddd3bf; }
.vt-band .vt-rule { border-top-color: var(--vt-panel); }
.vt-band .vt-rule:before { box-shadow: 0 0 0 3px var(--vt-ink); }


/* ---------- Photo frame (taped snapshot) ---------- */
.vt-frame {
  position: relative;
  background: var(--vt-panel-light);
  padding: 10px;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
}

.vt-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

.vt-frame:after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -37px;
  width: 74px;
  height: 28px;
  background: url(../img/tape.png) no-repeat center top;
}


/* Columns inside a panel: the panel's own padding-bottom is the spacing,
   so drop the column margin that would otherwise double it. */
.vt-section .page-content .one-half { margin-bottom: 0; }


/* ---------- About ---------- */
.vt-about-text p { margin-bottom: 16px; }

.vt-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: #8b8271;
}

.vt-about-text .vt-lead {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1.45em;
  color: var(--vt-accent);
}


/* ---------- Card grids (services) ---------- */
/* Flex + gap so every card in a row shares the tallest height and the grid
   stays correct at any wrapper width. */
.vt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* flex-basis rather than a calc() width: (100% - 40px)/3 rounds up to 367px
   per item, and 3 x 367 + 40 gap overflows a 1140 row by 1px, which wraps the
   third card. A 280px basis guarantees 3 per row, then grow fills the line. */
.vt-grid > li {
  display: flex;
  flex: 1 1 280px;
  max-width: calc((100% - 40px) / 3);
  min-width: 0;
  margin: 0;
}

.vt-card {
  position: relative;
  width: 100%;
  background: var(--vt-panel);
  color: var(--vt-ink);
  padding: 26px 22px 28px 22px;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
}

.vt-card:hover {
  transform: translate(0, -3px);
  box-shadow: 3px 6px 0 0 rgba(0, 0, 0, 0.15);
}

.vt-card .vt-num {
  display: block;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 30px;
  line-height: 1em;
  color: var(--vt-accent);
  opacity: 0.45;
  margin-bottom: 8px;
}

.vt-card h3 {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 21px;
  line-height: 1.25em;
  color: var(--vt-ink);
  margin: 0 0 10px 0;
  word-spacing: -0.05em;
}

.vt-card p {
  font-size: 14px;
  line-height: 1.6em;
  margin: 0;
}


/* ---------- Full-bleed brown band (why choose us) ---------- */
/* overflow:hidden makes this a block formatting context, so descendant
   margins can't escape and inflate the band with dead space. */
.vt-band {
  background: var(--vt-ink) url(../img/footer.png) repeat-x;
  color: var(--vt-panel);
  padding: 60px 0 50px 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* style.css sets `#main .wrapper { margin:60px/50px; min-height:500px }`,
   written when the page had a single wrapper. This page has three, so the
   band's inner wrapper has to opt out or it gains a 500px floor. */
#main .vt-band .wrapper {
  margin-top: 0;
  margin-bottom: 0;
  min-height: 0;
}

.vt-reasons { display: block; }

/* border-box matters here: the 34px bullet gutter is padding, and without it
   the two columns total more than the 940px wrapper and drop to one column. */
.vt-reasons > li {
  box-sizing: border-box;
  float: left;
  width: 48%;
  margin: 0 4% 30px 0;
  padding-left: 30px;
  position: relative;
}

/* The shipped bullet PNGs are dark artwork meant for the cream panels — on
   this brown band they disappear, so the marker is drawn in CSS instead. */
.vt-reasons > li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--vt-accent);
  transform: rotate(45deg);
}

.vt-reasons > li.last { margin-right: 0; }

/* No trailing gap under the final row */
.vt-reasons > li:nth-last-child(-n + 2) { margin-bottom: 0; }

.vt-reasons h3 {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  color: var(--vt-panel-light);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  margin: 0 0 6px 0;
}

.vt-reasons p {
  font-size: 14px;
  line-height: 1.65em;
  color: #ddd3bf;
  margin: 0;
}


/* ---------- Blog strip ---------- */
.vt-more {
  clear: both;
  text-align: center;
  padding-top: 10px;
}


/* ---------- Contact ---------- */
/* <button> needs the anchor button's box reset onto it */
button.link-button {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 22px;
}

.vt-contact-form p { margin-bottom: 14px; }

.vt-contact-form label {
  display: block;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: var(--vt-ink);
  margin-bottom: 5px;
}

.vt-contact-form input[type="text"],
.vt-contact-form input[type="email"],
.vt-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--vt-panel-light);
  border: 1px solid #cfc2a5;
  border-top-color: #b7ab8f;
  padding: 9px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--vt-ink);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
}

.vt-contact-form textarea { resize: vertical; min-height: 130px; }

.vt-contact-form input:focus,
.vt-contact-form textarea:focus {
  outline: none;
  border-color: var(--vt-accent);
  background: #fff;
}

.vt-msg {
  display: none;
  margin-top: 14px;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid;
}

.vt-msg.is-visible { display: block; }
.vt-msg.ok    { background: #e6efd8; border-color: #a3bd7f; color: #4c6222; }
.vt-msg.error { background: #f6ddd8; border-color: #d09b8d; color: #8c3320; }

/* Contact details list */
.vt-details { margin: 0; }

.vt-details li {
  padding: 14px 0;
  border-bottom: 1px dashed #cfc2a5;
}

.vt-details li:first-child { padding-top: 0; }
.vt-details li:last-child { border-bottom: 0; }

.vt-details .vt-label {
  display: block;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a8f7b;
  margin-bottom: 3px;
}

.vt-details .vt-value {
  font-size: 16px;
  color: var(--vt-ink);
}

.vt-details a.vt-value { color: var(--vt-accent); }
.vt-details a.vt-value:hover { text-decoration: underline; }


/* ---------- Footer additions ---------- */
footer .widget-block h4 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

footer .widget-block h4:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -25px;
  width: 50px;
  height: 2px;
  background: var(--vt-accent);
}

footer .vt-foot-links li {
  border-bottom: 1px dotted rgba(243, 228, 200, 0.18);
}

footer .vt-foot-links li:last-child { border-bottom: 0; }

footer .vt-foot-links li a {
  display: block;
  padding: 7px 0;
  color: #ddd3bf;
}

footer .vt-foot-links li a:before {
  content: "\2014";
  margin-right: 8px;
  color: var(--vt-accent);
}

footer .vt-foot-links li a:hover { color: #fff; }

footer .vt-foot-contact li {
  padding: 6px 0;
  font-size: 14px;
  color: #ddd3bf;
  line-height: 1.55em;
}

footer .vt-foot-contact .vt-label {
  display: block;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9d937f;
}

/* Footer newsletter */
footer .vt-news-input {
  width: 100%;
  box-sizing: border-box;
  background: #4a453b;
  border: 1px solid #6d6656;
  padding: 8px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--vt-panel);
  margin-bottom: 8px;
}

footer .vt-news-input:focus {
  outline: none;
  border-color: var(--vt-accent);
  background: #514b40;
}

footer .vt-news-input::-webkit-input-placeholder { color: #8d8474; }
footer .vt-news-input::placeholder { color: #8d8474; }

footer .vt-news-btn {
  width: 100%;
  cursor: pointer;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--vt-panel-light);
  background: var(--vt-accent);
  border: 0;
  padding: 9px 10px;
  transition: all 0.25s ease;
}

footer .vt-news-btn:hover { background: #e0663f; }

footer .vt-news-msg {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5em;
}

footer .vt-news-msg.is-visible { display: block; }
footer .vt-news-msg.ok    { color: #b9d98a; }
footer .vt-news-msg.error { color: #e79c86; }

footer #footer-bottom { margin-top: 40px; padding-top: 20px; }


/* ============================================================
   WIDER DESKTOP GRID  940px -> 1140px
   ------------------------------------------------------------
   Scoped to >=1200px: below that the original 940 grid still
   applies, so a 1000px-wide window can't overflow horizontally.
   Everything the original CSS hard-coded to the 940 grid is
   retuned here rather than edited in place.
   ============================================================ */
@media only screen and (min-width: 1200px) {
  .wrapper { width: 1140px; }

  /* Blog tiles: 3 x (360 + 20 gutter) = 1140 */
  .feature { width: 1160px; }
  .feature li { width: 360px; }
  .feature li .thumb { width: 340px; }
  .feature li .thumb .date { left: 140px; }

  /* Footer widgets: 4 x 270 + 3 x 20 = 1140 */
  footer .widget-cols > li { width: 270px; }
}


/* ---------- Responsive ---------- */
/* The 280px flex-basis already drops the cards to 2-up on the 712 tablet
   grid; only the max-width cap has to be relaxed to let that happen. */
@media only screen and (max-width: 991px) {
  .vt-grid > li { max-width: calc((100% - 20px) / 2); }
  .vt-reasons > li { width: 46%; margin-right: 4%; }
}

@media only screen and (max-width: 767px) {
  .vt-head h2 { font-size: 30px; }
  .vt-grid > li { flex-basis: 100%; max-width: 100%; }
  .vt-reasons > li { float: none; width: 100%; margin-right: 0; }
  .vt-band { padding: 45px 0 35px 0; }
  .vt-section { margin-bottom: 45px; }
}


/* ============================================================
   ARTICLE & POLICY PAGES (blog single / privacy / terms / cookie)
   ============================================================ */

/* The template ships one-half / one-third / one-fourth but no two-thirds. */
.vt-two-third {
  float: left;
  width: 65.9574%;
  margin-right: 2.1276%;
  margin-bottom: 0;
  position: relative;
}

.vt-page-head { margin-bottom: 30px; }

.vt-breadcrumb {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b8271;
  margin-bottom: 10px;
}

.vt-breadcrumb a { color: var(--vt-accent); }
.vt-breadcrumb a:hover { text-decoration: underline; }
.vt-breadcrumb .sep { margin: 0 6px; opacity: 0.6; }

.vt-post-meta {
  font-size: 13px;
  color: #8b8271;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #cfc2a5;
}

.vt-post-meta span { margin-right: 16px; }
.vt-post-meta strong { color: var(--vt-ink); font-weight: normal; }

.vt-post-cover { margin-bottom: 26px; }

/* Generated article body */
.vt-prose { color: var(--vt-ink); }
.vt-prose p { margin-bottom: 18px; line-height: 1.65em; }
.vt-prose h2 {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 26px;
  line-height: 1.25em;
  color: var(--vt-accent);
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #cfc2a5;
  scroll-margin-top: 20px;
}
.vt-prose h3 { font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif; font-size: 20px; margin: 26px 0 10px; }
.vt-prose h2:first-child, .vt-prose h3:first-child { margin-top: 0; }
.vt-prose ul, .vt-prose ol { margin: 0 0 18px 0; }
.vt-prose ul li,
.vt-prose ol li { position: relative; padding-left: 24px; margin-bottom: 8px; line-height: 1.6em; }
.vt-prose ul li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--vt-accent);
  transform: rotate(45deg);
}
.vt-prose ol { counter-reset: vtp; }
.vt-prose ol li { counter-increment: vtp; }
.vt-prose ol li:before {
  content: counter(vtp) ".";
  position: absolute;
  left: 0;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  color: var(--vt-accent);
}
.vt-prose a { color: var(--vt-accent); text-decoration: underline; }
.vt-prose img { max-width: 100%; height: auto; }
.vt-prose blockquote {
  border-left: 4px solid var(--vt-accent);
  padding-left: 16px;
  margin: 0 0 18px 0;
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1.5em;
}
.vt-prose table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.vt-prose table th {
  background: var(--vt-ink);
  color: var(--vt-panel);
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-weight: normal;
  text-align: left;
  padding: 9px 12px;
}
.vt-prose table td { border-top: 1px solid #cfc2a5; padding: 9px 12px; vertical-align: top; }
.vt-table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 18px; }

/* Sidebar */
.vt-side-block {
  background: var(--vt-panel-light);
  border: 1px solid #cfc2a5;
  padding: 18px;
  margin-bottom: 22px;
}

.vt-side-block h4 {
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  color: var(--vt-ink);
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vt-accent);
}

/* Table of contents / policy nav */
.vt-toc { counter-reset: vttoc; margin: 0; }
.vt-toc li { counter-increment: vttoc; margin-bottom: 2px; }

.vt-toc a {
  display: block;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.45em;
  color: var(--vt-ink);
}

.vt-toc a:before {
  content: counter(vttoc, decimal-leading-zero) " ";
  font-family: mensch, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  color: var(--vt-accent);
  margin-right: 6px;
}

.vt-toc a:hover { background: var(--vt-panel); color: var(--vt-accent); }
.vt-toc a.active { background: var(--vt-ink); color: var(--vt-panel-light); }
.vt-toc a.active:before { color: var(--vt-panel); }

/* Recent posts */
.vt-recent { margin: 0; }
.vt-recent a.vt-recent-item {
  display: block;
  padding: 10px 0;
  border-top: 1px dashed #cfc2a5;
  overflow: hidden;
}
.vt-recent a.vt-recent-item:first-child { border-top: 0; padding-top: 0; }
.vt-recent img {
  float: left;
  width: 54px;
  height: 54px;
  object-fit: cover;
  margin-right: 12px;
  border: 1px solid #cfc2a5;
}
.vt-recent h5 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4em;
  color: var(--vt-ink);
  margin: 0 0 3px 0;
  overflow: hidden;
}
.vt-recent a.vt-recent-item:hover h5 { color: var(--vt-accent); }
.vt-recent .vt-recent-date { display: block; font-size: 12px; color: #8b8271; overflow: hidden; }

/* Sidebar newsletter */
.vt-side-block.vt-news { background: var(--vt-ink); border-color: var(--vt-ink); }
.vt-side-block.vt-news h4 { color: var(--vt-panel-light); border-bottom-color: var(--vt-accent); }
.vt-side-block.vt-news p { font-size: 13px; line-height: 1.55em; color: #ddd3bf; margin-bottom: 12px; }

.vt-side-block.vt-news input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(243, 228, 200, 0.3);
  padding: 8px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--vt-panel);
  margin-bottom: 8px;
}

.vt-side-block.vt-news input:focus { outline: none; border-color: var(--vt-accent); }
.vt-side-block.vt-news button { width: 100%; }

.vt-news-msg { display: none; margin-top: 8px; font-size: 12px; line-height: 1.5em; }
.vt-news-msg.is-visible { display: block; }
.vt-news-msg.ok { color: #b9d98a; }
.vt-news-msg.error { color: #e79c86; }

.vt-contact-frame { margin-top: 24px; }

@media only screen and (max-width: 767px) {
  .vt-two-third { float: none; width: 100%; margin-right: 0; margin-bottom: 30px; }
  .vt-prose h2 { font-size: 22px; }
}

/* logo_src falls back to a content image when no logo is generated, so the
   header needs a hard cap or a full-size photo takes over the banner.
   Specificity must match style.css's `header #logo img`. */
header #logo img {
  max-height: 90px;
  width: auto;
}

/* Blog covers come in at whatever size the DB holds, so pin them to the frame
   width and a consistent banner height instead of letting native size decide. */
.vt-post-cover img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
}


/* ============================================================
   PRINTED CHROME — colour comes from the palette, not the artwork
   ============================================================ */

/* header.png is a 12x12 grain tile flattened to pale grey at build time.
   Multiplying the accent through it gives a textured band in exactly the
   palette colour, instead of an approximate hue rotation of the old red. */
header {
  background-color: var(--vt-accent);
  background-image: url(../img/header.png);
  background-repeat: repeat;
  background-blend-mode: multiply;
  min-height: 0;
  /* `nav` is floated, so the ribbon is positioned by the logo block above it,
     NOT by this padding — which is what lets the two coexist:

     - the float lands at padding-top + logo block = the ribbon's top edge
     - padding-bottom then extends only the painted band, 13px further down

     Those 13px matter: outside its raised centre tab, ribbon.png is
     transparent for its first 13 rows, so without them a strip of page
     background cut straight across between the band and the ribbon. */
  padding: 26px 0 55px;
}

/* The lower gap therefore belongs to the logo, and is padding rather than the
   original's margin so it cannot collapse out of the header. A capped, centred
   logo means no supplied artwork can move the ribbon. */
header #logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

header #logo img {
  max-height: 72px;
  max-width: 320px;
  width: auto;
  margin: 0;
}

/* ribbon.png keeps its own shading and alpha; sharp tints it per palette. */
nav { margin-top: 0; }


/* ============================================================
   HERO SLIDER — lock the original 920x390 proportion
   ============================================================ */
/* Source photos arrive at any size. Without a fixed ratio a portrait image
   turned the banner into a giant square. */
.slider-wrapper #slider.nivoSlider {
  aspect-ratio: 920 / 390;
  height: auto;
  overflow: hidden;
}

.slider-wrapper #slider.nivoSlider img,
.slider-wrapper #slider.nivoSlider .nivo-main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


/* ============================================================
   VINTAGE PHOTO TREATMENT
   Any supplied photo is aged: warmed, slightly faded, lower contrast
   in the shadows, with a soft vignette inside the frames.
   ============================================================ */
.nivoSlider img,
.vt-frame img,
.feature li .thumb img,
.vt-recent img,
.vt-post-cover img,
.vt-prose img {
  filter: sepia(0.38) saturate(0.78) contrast(0.94) brightness(1.06) hue-rotate(-6deg);
}

/* Warm paper wash + vignette over framed photography */
.vt-frame,
.feature li .thumb,
.slider-wrapper #slider.nivoSlider {
  position: relative;
}

.vt-frame > img + .vt-vignette,
.vt-photo-age:after { content: none; }

.slider-wrapper #slider.nivoSlider:after,
.feature li .thumb:after,
.vt-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(60,40,20,0.28) 100%),
    linear-gradient(rgba(198,160,94,0.10), rgba(198,160,94,0.10));
}

/* the frame's padding is 10px, so keep the vignette inside the mount */
.vt-frame:before { inset: 10px; }

/* .vt-frame:after is the tape — keep it above the vignette */
.vt-frame:after { z-index: 3; }


/* ============================================================
   FOOTER — left-aligned columns
   ============================================================ */
/* style.css centres every footer heading while the content under it is
   left-aligned, which reads as broken. Align the whole column left. */
footer .widget-cols h1,
footer .widget-cols h2,
footer .widget-cols h3,
footer .widget-cols h4,
footer .widget-cols h5,
footer .widget-cols h6 {
  text-align: left;
}

footer .widget-block h4:after {
  left: 0;
  margin-left: 0;
}

footer .widget-block > p {
  font-size: 13px;
  line-height: 1.7em;
  color: #ddd3bf;
  margin-bottom: 0;
}

/* Contact column: label above value, no stray rules between rows */
footer .vt-foot-contact li {
  padding: 0 0 12px 0;
  border: 0;
}

footer .vt-foot-contact li:last-child { padding-bottom: 0; }

footer .vt-foot-contact .vt-label {
  margin-bottom: 2px;
}

footer .vt-foot-links li a {
  padding: 6px 0;
}

/* .cf is a clearfix for float layouts, but on a flex container its :before
   and :after become real flex items and knock the rows out of alignment. */
.vt-grid:before,
.vt-grid:after {
  content: none;
  display: none;
}

/* 4 x 220 + 3 x 20 is exactly the 940 wrapper, and 4 x 270 + 60 is exactly
   1140 — either rounds up and drops the fourth column onto a second row.
   A few px of slack keeps all four on one line. */
footer .widget-cols > li {
  width: 214px;
}

@media only screen and (min-width: 1200px) {
  footer .widget-cols > li {
    width: 262px;
  }
}

/* ---------- Blog tiles: uniform imagery ---------- */
/* Two problems the source images exposed:
   1. `img` is inline by default, so the <a> ended a few px taller than the
      photo and the vignette overlay (inset:0) bled below it as a dark strip.
   2. DB photos arrive at any aspect, so every tile was a different height.
   display:block kills the baseline gap; the fixed ratio makes them uniform. */
.feature li .thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.comp_details { display: none !important; }