/*----------------------------------------------------
Landing sections — Websites page. Uses the site's
accent #164193, Barlow Condensed headings and Barlow body text.
---------------------------------------------------- */

/* Sub page banner: H1 sized like the old H2 */
.banner_area .banner_inner .banner_content h1 {
  color: #fff;
  font-size: 44px;
  line-height: 1.2;
  margin: 0 auto 12px;
  max-width: 900px;
}

/*----------------------------------------------------
Websites page — the project screenshots carry the page,
everything else stays quiet and left-aligned.
---------------------------------------------------- */
.wh_intro { padding-bottom: 110px; }
.wh_block { padding-bottom: 120px; }
.wh_panel { margin-bottom: 120px; }
.wh_panel .box_1620 {
  background: #eef4f8;
  border-radius: 12px;
  padding: 100px 0;
}

.wh_intro a:focus-visible,
.wh_block a:focus-visible,
.wh_cta a:focus-visible,
.wh_faq summary:focus-visible {
  outline: 2px solid #164193;
  outline-offset: 3px;
}

.wh_cta a:focus-visible { outline-color: #90ccb8; }

.wh_title {
  font-size: 36px;
  line-height: 1.2;
  color: #1a2540;
  margin-bottom: 50px;
}

/* Intro */
.wh_lead {
  font: bold 34px/1.35 "Barlow Condensed", sans-serif;
  color: #1a2540;
  margin: 0 0 30px;
}
.wh_intro_text { padding-top: 6px; }
.wh_intro_text p { font-size: 16px; line-height: 28px; margin: 0; }
.wh_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
/* narrower padding so both buttons fit side by side in the column */
.wh_buttons .main_btn,
.wh_buttons .main_btn2 { padding: 0 24px; }

/* Project grid: two staggered columns of browser frames */
.wh_work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  row-gap: 80px;
}
.wh_project:nth-child(even) { margin-top: 140px; }

.wh_frame {
  display: block;
  border: 1px solid #e6e6ee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 26px;
  transition: border-color .3s ease;
}
a.wh_frame:hover { border-color: #164193; }
.wh_bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  background: #f2f2f2;
  border-bottom: 1px solid #eaeaea;
}
.wh_bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dcdcdc;
}

/* Fixed window onto a full-page screenshot.
   Hovering scrolls through the whole page. */
.wh_shot {
  display: block;
  height: 520px;
  overflow: hidden;
  background: #f6f6f6;
}
.wh_shot img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 1.2s ease;
}
.wh_frame:hover .wh_shot img,
.wh_frame:focus-visible .wh_shot img {
  transform: translateY(calc(-100% + 520px));
  transition: transform 7s ease-in-out;
}

.wh_project h3 { font-size: 24px; color: #1a2540; margin-bottom: 8px; }
.wh_project p { font-size: 15px; line-height: 26px; margin: 0; max-width: 480px; }
.wh_visit {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1a2540;
  border-bottom: 1px solid #164193;
}
.wh_visit:hover { color: #164193; }

.wh_more { font-size: 15px; margin: 70px 0 0; }
.wh_more a { color: #1a2540; border-bottom: 1px solid #164193; }
.wh_more a:hover { color: #164193; }

/* Services: heading left, text right */
.wh_row {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid #e3e3ee;
}
.wh_row:last-child { border-bottom: 1px solid #e3e3ee; }
.wh_row h3 { font-size: 22px; color: #1a2540; margin: 0; }
.wh_row p { font-size: 16px; line-height: 28px; margin: 0; max-width: 640px; }

/* Process */
.wh_steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.wh_steps li { counter-increment: step; border-top: 3px solid #164193; padding-top: 20px; }
.wh_steps h3 { font-size: 20px; color: #1a2540; margin-bottom: 10px; }
.wh_steps h3::before { content: counter(step) ". "; color: #164193; }
.wh_steps p { font-size: 15px; line-height: 26px; margin: 0; }

/* FAQ */
.wh_faq details { border-top: 1px solid #e3e3ee; }
.wh_faq details:last-child { border-bottom: 1px solid #e3e3ee; }
.wh_faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 22px 44px 22px 0;
  font: bold 19px/1.4 "Barlow Condensed", sans-serif;
  color: #1a2540;
}
.wh_faq summary::-webkit-details-marker { display: none; }
.wh_faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 18px;
  font: 300 28px/1 "Barlow", sans-serif;
  color: #164193;
  transition: transform 200ms ease;
}
.wh_faq details[open] summary::after { transform: rotate(45deg); }
.wh_faq summary:hover { color: #164193; }
.wh_faq details p { font-size: 15px; line-height: 26px; max-width: 640px; margin: -4px 0 24px; }

/* Contact */
.wh_cta { padding-bottom: 120px; }
.wh_cta .box_1620 {
  background: #164193 url(../img/mark-watermark.svg) no-repeat right -80px center / auto 140%;
  border-radius: 12px;
  padding: 100px 0;
}
.wh_cta_inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 60px;
  align-items: center;
}
.wh_cta h2 { color: #fff; font-size: 42px; line-height: 1.2; margin-bottom: 16px; }
.wh_cta p { color: #c9d5ec; font-size: 16px; line-height: 28px; max-width: 520px; margin: 0; }
.wh_phone {
  display: block;
  font: bold 46px/1.1 "Barlow Condensed", sans-serif;
  color: #fff;
  white-space: nowrap;
}
.wh_phone:hover { color: #90ccb8; }
.wh_mail {
  display: inline-block;
  color: #c9d5ec;
  font-size: 16px;
  margin: 10px 0 30px;
  border-bottom: 1px solid #90ccb8;
}
.wh_mail:hover { color: #fff; border-color: #fff; }
.wh_cta_contact .main_btn { display: table; }

@media (prefers-reduced-motion: reduce) {
  .wh_shot img,
  .wh_frame:hover .wh_shot img,
  .wh_frame:focus-visible .wh_shot img { transform: none; transition: none; }
  .wh_faq summary::after { transition: none; }
}
@media (max-width: 1199px) {
  .wh_steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 991px) {
  .banner_area .banner_inner .banner_content h1 { font-size: 32px; }
  .wh_lead { font-size: 28px; }
  .wh_work { column-gap: 30px; }
  .wh_project:nth-child(even) { margin-top: 80px; }
  .wh_shot { height: 420px; }
  .wh_frame:hover .wh_shot img,
  .wh_frame:focus-visible .wh_shot img { transform: translateY(calc(-100% + 420px)); }
  .wh_row { grid-template-columns: 1fr; gap: 10px; }
  .wh_cta_inner { grid-template-columns: 1fr; gap: 40px; }
  .wh_cta h2 { font-size: 34px; }
}
@media (max-width: 767px) {
  .wh_work { grid-template-columns: 1fr; row-gap: 60px; }
  .wh_project:nth-child(even) { margin-top: 0; }
  .wh_intro, .wh_block { padding-bottom: 80px; }
  .wh_panel { margin-bottom: 80px; }
  .wh_panel .box_1620, .wh_cta .box_1620 { padding: 70px 0; }
  .wh_cta { padding-bottom: 80px; }
}
@media (max-width: 575px) {
  .banner_area .banner_inner .banner_content h1 { font-size: 26px; }
  .wh_lead { font-size: 24px; }
  .wh_title { font-size: 28px; margin-bottom: 36px; }
  .wh_steps { grid-template-columns: 1fr; }
  .wh_cta h2 { font-size: 28px; }
  .wh_phone { font-size: 34px; }
}

/* Homepage: website screenshot cropped to the format of the other blog images */
.h_blog_img img.img-crop-top {
  width: 100%;
  aspect-ratio: 1200 / 1123;
  object-fit: cover;
  object-position: top;
}