/* ==========================================================================
   Long Run Roofing - main stylesheet
   BEM: block, block__element, state via data-/aria- attributes.
   Breakpoints follow the original site: mobile < 768, tablet 768-1024, desktop > 1024
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-navy: #11284b;
  --color-navy-80: rgba(23, 42, 73, 0.81);
  --color-cyan: #00bad2;
  --color-cyan-70: rgba(0, 186, 210, 0.7);
  --color-cyan-20: rgba(0, 186, 210, 0.2);
  --color-cyan-light: #dbf4f9;
  --color-cyan-pale: #b9d6dc;
  --color-orange: #fcbc79;
  --color-offwhite: #f5f7f6;
  --color-text: #7a7a7a;
  --color-body: #333;
  --color-link: #c36;
  --color-link-hover: #336;
  --color-line: #d5d5d5;
  --color-white: #fff;
  --color-black: #000;

  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-topbar: "Inter", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --container-width: 1190px;
  --widget-gap: 20px;
}

/* --------------------------------------------------------------------------
   2. Reset / base (mirrors the Hello Elementor theme defaults)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  margin: 0;
  background-color: var(--color-white);
  color: var(--color-body);
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin: 0 0 0.9rem;
}

ul {
  margin: 0;
  padding: 0 0 0 40px;
}

a {
  background-color: transparent;
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: middle;
}

svg {
  display: inline-block;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   3. Page shell
   -------------------------------------------------------------------------- */
.page {
  overflow-x: clip;
}

.page__main {
  display: block;
}

.skip-link {
  position: absolute;
  top: -1000px;
  left: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--color-navy);
  color: var(--color-white);
}

.skip-link:focus {
  top: 0;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

/* ElementsKit style button used throughout the content */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-navy);
  color: var(--color-white);
  fill: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  transition: all 0.4s;
}

.btn:hover,
.btn:focus {
  color: var(--color-white);
  fill: var(--color-white);
}

.btn__icon {
  width: 1em;
  height: 1em;
  margin-right: 5px;
  font-size: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Icon pointer button (phone) */
.phone-button {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  min-width: 49px;
  border: 4px solid var(--color-navy);
  border-radius: 0;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  transition: all 0.3s;
}

.phone-button:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.phone-button__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  border-radius: 0;
  background-color: var(--color-cyan);
  color: var(--color-white);
  font-size: 15px;
  transition: all 0.3s;
}

.phone-button:hover .phone-button__icon {
  background-color: var(--color-white);
}

.phone-button:hover .phone-button__icon {
  color: var(--color-navy);
}

.phone-button__icon-holder {
  display: block;
  line-height: 1em;
  background-color: transparent;
  transition: all 0.3s;
}

.phone-button:hover .phone-button__icon-holder {
  transform: rotate(322deg);
}

.phone-button__svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

.phone-button__space {
  display: block;
  width: 0;
}

.phone-button__text {
  flex-grow: 1;
  padding: 7px 12px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Header (desktop / tablet)
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
}

.header__desktop {
  display: block;
}

.header__mobile {
  display: none;
}

/* Special offer bar */
.topbar {
  background-color: var(--color-orange);
}

.topbar__container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}

.topbar__text {
  width: 100%;
  margin: 0;
  padding: 10px;
  color: var(--color-navy);
  font-family: var(--font-topbar);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.topbar__highlight {
  font-weight: 700;
}

/* Main header bar */
.header__bar {
  padding: 1% 0;
  background-color: var(--color-white);
}

.header__container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.header__logo {
  display: flex;
  align-items: center;
  width: 13%;
}

.header__logo-link {
  display: block;
  width: 100%;
}

.header__logo-image {
  width: 100%;
  vertical-align: middle;
}

.header__nav {
  position: relative;
  display: flex;
  align-items: center;
  width: 59.25%;
}

.header__actions {
  display: flex;
  align-items: center;
  width: 27.414%;
}

.header__phone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 54%;
  padding-right: 10px;
}

.header__phone .phone-button {
  max-width: 96%;
}

.header__quote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 46%;
}

.header__quote-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 13px 17px;
  border: 2px solid var(--color-cyan);
  border-radius: 0;
  background-color: var(--color-cyan);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: all 0.4s;
}

.header__quote-link:hover {
  color: var(--color-white);
}

/* Navigation (Elementor nav-menu equivalent) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.25em;
  border: 0;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.05);
  color: #33373d;
  font-size: 22px;
  line-height: 1;
}

.nav-toggle__open,
.nav-toggle__close {
  width: 1em;
  height: 1em;
  fill: #33373d;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open,
.nav-toggle[aria-expanded="false"] .nav-toggle__close {
  display: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 0 7%;
  list-style: none;
  line-height: normal;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
}

.nav__item {
  position: relative;
  display: flex;
}

.nav__link {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 13px 7px;
  color: var(--color-black);
  fill: var(--color-black);
  line-height: 20px;
  white-space: nowrap;
  transition: 0.4s;
}

.nav__link:hover,
.nav__link:focus,
.nav__item[data-open="true"] > .nav__link,
.nav__item[data-current="true"] > .nav__link {
  color: var(--color-navy);
  fill: var(--color-navy);
}

.nav__arrow {
  display: flex;
  align-items: center;
  margin: -10px 0;
  padding: 10px 0 10px 10px;
  line-height: 1;
}

.nav__arrow-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9997;
  display: none;
  width: max-content;
  min-width: 10em;
  max-width: 20em;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #f1f1f1;
  font-size: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.nav__item[data-open="true"] > .nav__submenu {
  display: block;
}

.nav__subitem {
  position: relative;
  display: block;
}

.nav__sublink {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-left: 8px solid transparent;
  color: var(--color-black);
  fill: var(--color-black);
  line-height: 20px;
  transition: 0.4s;
}

.nav__sublink:hover,
.nav__sublink:focus,
.nav__subitem[data-current="true"] > .nav__sublink {
  background-color: var(--color-cyan);
  color: var(--color-white);
  fill: var(--color-white);
}

/* --------------------------------------------------------------------------
   6. Mobile header + side menu
   -------------------------------------------------------------------------- */
.mobile-header {
  position: relative;
  z-index: 1;
  background-color: var(--color-white);
}

.mobile-header__offer {
  padding: 3% 0;
  background-color: var(--color-orange);
}

.mobile-header__offer-text {
  margin: 0;
  padding: 0 2%;
  color: var(--color-navy);
  font-family: var(--font-topbar);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3em;
  text-align: center;
}

.mobile-header__highlight {
  font-weight: 700;
}

.mobile-header__row {
  display: flex;
  align-items: center;
  padding: 3% 2%;
}

.mobile-header__logo {
  width: 50%;
}

.mobile-header__logo-link {
  display: block;
}

.mobile-header__logo-image {
  width: 88%;
}

.mobile-header__menu {
  display: flex;
  justify-content: flex-end;
  width: 50%;
}

.mobile-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #dfdfdf;
  color: var(--color-navy);
  font-size: 19px;
  line-height: 1em;
  transition: 0.4s ease;
}

.mobile-header__toggle:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.mobile-header__toggle-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.mobile-header__actions {
  display: flex;
}

.mobile-header__phone {
  display: flex;
  align-items: center;
  width: 50%;
  background-color: var(--color-navy);
}

.mobile-header__phone .phone-button {
  display: flex;
  width: 100%;
  font-size: 13px;
}

.mobile-header__phone .phone-button__icon {
  width: 38px;
}

.mobile-header__phone .phone-button__text {
  padding: 10px 18px 10px 21px;
}

.mobile-header__quote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  background-color: var(--color-cyan);
}

.mobile-header__quote-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 13px 31px 13px 13px;
  border: 1px solid var(--color-cyan);
  background-color: var(--color-cyan);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  transition: all 0.4s;
}

.mobile-header__quote-link:hover {
  color: var(--color-white);
}

/* Off-canvas side menu */
.side-menu {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
}

.side-menu__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 1s;
}

.side-menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  transform: translateX(100%);
  transition: transform 1s;
}

.side-menu[data-open="true"] {
  pointer-events: auto;
}

.side-menu[data-open="true"] .side-menu__overlay {
  opacity: 1;
}

.side-menu[data-open="true"] .side-menu__panel {
  transform: translateX(0);
}

.side-menu__close {
  position: absolute;
  top: 20px;
  left: -50px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background-color: var(--color-cyan-light);
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1em;
  opacity: 0;
  transition: opacity 1s;
}

.side-menu[data-open="true"] .side-menu__close {
  opacity: 1;
}

.side-menu__close:hover {
  color: var(--color-cyan);
  background-color: var(--color-cyan-light);
}

.side-menu__close-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.side-menu__body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-white);
}

.side-menu__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.side-menu__item {
  display: block;
}

.side-menu__link,
.side-menu__sublink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 19px 11px 11px 12px;
  border-style: solid;
  border-width: 0 0 1px;
  border-color: #ccc;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.side-menu__link:hover,
.side-menu__sublink:hover {
  color: var(--color-navy);
}

.side-menu__item[data-current="true"] > .side-menu__link,
.side-menu__subitem[data-current="true"] > .side-menu__sublink {
  background-color: var(--color-cyan);
  color: var(--color-white);
}

.side-menu__pointer {
  display: inline-block;
  margin: 0 15px;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  transition: all 1s ease;
}

.side-menu__item[data-open="true"] > .side-menu__link .side-menu__pointer {
  transform: rotate(180deg);
}

.side-menu__pointer-icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.side-menu__sublist {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  transition: height 0.5s;
}

.side-menu__subitem {
  display: block;
}

.side-menu__sublink {
  padding-right: 60px;
  padding-left: 60px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-black);
  opacity: 0.53;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.hero__container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container-width);
  min-height: 58vh;
  margin: 0 auto;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  width: 100%;
}

.hero__title {
  margin-bottom: var(--widget-gap);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.hero__line {
  display: block;
  width: 38%;
  height: 24px; /* sits inside a 24px line box like the original image widget */
  margin-top: -2%;
  object-fit: contain;
  object-position: 0 60%;
}

/* --------------------------------------------------------------------------
   8. Service page layout
   -------------------------------------------------------------------------- */
.service {
  padding: 6% 0;
  background-color: var(--color-offwhite);
}

.service__container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.service__main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 70%;
  min-height: 1px;
  padding: 0 25px 0 0;
}

.service__aside {
  position: relative;
  width: 30%;
  min-height: 1px;
  padding: 0 0 0 21px;
}

/* Stacked widgets inside the main column */
.service__title,
.service__label,
.service__line,
.service__text,
.service__action,
.service__divider {
  margin-bottom: var(--widget-gap);
}

.service__title {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.service__label {
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.service__line {
  display: block;
  width: 40%;
  height: 24px;
  margin-top: -2%;
  object-fit: contain;
  object-position: 0 60%;
}

.service__text {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.service__text,
.card__text,
.cta__text,
.contact__text,
.contact-page__text,
.post__content {
  display: flow-root; /* keeps the last paragraph's bottom margin inside the block, as Elementor does */
}

.service__action {
  display: flex;
  justify-content: flex-start;
}

.service__divider {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 2px 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  background-clip: content-box;
}

/* Sidebar: services list (sticky on desktop) */
.sidebar {
  position: sticky;
  top: 90px;
  padding: calc(3% + 10px) 10px; /* column padding (10px) + section padding (3%) of the original */
  background-color: var(--color-offwhite);
}

.sidebar__title {
  margin-bottom: var(--widget-gap);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.sidebar__line {
  display: block;
  width: 67%;
  height: 24px;
  margin-top: -3%;
  margin-bottom: var(--widget-gap);
  object-fit: contain;
  object-position: 0 60%;
}

.sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
}

.sidebar__item:not(:last-child) {
  padding-bottom: 12px;
}

.sidebar__item:not(:first-child) {
  margin-top: 12px;
}

.sidebar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(146, 152, 132, 0.23);
}

.sidebar__link {
  display: flex;
  align-items: center;
  color: var(--color-text);
  transition: color 0.3s;
}

.sidebar__link:hover {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   9. White feature card
   -------------------------------------------------------------------------- */
.card {
  margin: 5% 0;
  padding: 7% 5%;
  background-color: var(--color-white);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.card__title,
.card__line,
.card__text {
  margin-bottom: var(--widget-gap);
}

.card__title {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.card__line {
  display: block;
  width: 40%;
  height: 24px;
  margin-top: -2%;
  object-fit: contain;
  object-position: 0 60%;
}

.card__text {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.card > :last-child,
.card__media > :last-child,
.card__body > :last-child {
  margin-bottom: 0;
}

.card__row {
  display: flex;
  flex-wrap: wrap;
}

.card__media {
  width: 50%;
  min-height: 1px;
}

.card__image {
  width: 100%;
  height: 282px;
  object-fit: cover;
  object-position: center center;
}

.card__body {
  width: 50%;
  padding: 0 0 0 3%; /* 6% of the half-width column in the original */
}

/* --------------------------------------------------------------------------
   10. Cyan call-to-action block
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  margin: 3% 0 6%;
  padding: 5%;
  background-color: var(--color-cyan);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.cta__overlay {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: repeat;
  background-size: 82% auto;
  opacity: 0.3;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.cta__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cta__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 52.3%;
  padding: 1.569% 2.615% 1.569% 0; /* = 3% / 5% of the 52.3% column */
}

.cta__label,
.cta__title,
.cta__text,
.cta__action {
  margin-bottom: var(--widget-gap);
}

.cta__content > :last-child {
  margin-bottom: 0;
}

.cta__label {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.cta__title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.cta__text {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cta__action {
  display: flex;
  justify-content: flex-start;
}

.cta__action .btn {
  padding: 18px 18px 18px 15px;
}

.cta__media {
  width: 47.626%;
  background-color: rgba(0, 0, 0, 0.08);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.cta__spacer {
  display: block;
  height: 381px;
}

/* --------------------------------------------------------------------------
   11. Navy contact block with form
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  margin: 6% 0 0;
  padding: 5%;
  background-color: var(--color-navy);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.contact__overlay {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: repeat;
  background-size: 82% auto;
  opacity: 0.3;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.contact__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.contact__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 53.22%;
  padding: 1.597% 2.661% 1.597% 0; /* = 3% / 5% of the 53.22% column */
}

.contact__label,
.contact__title,
.contact__text,
.contact__action {
  margin-bottom: var(--widget-gap);
}

.contact__content > :last-child {
  margin-bottom: 0;
}

.contact__label {
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.contact__title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.contact__text {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.contact__action {
  display: flex;
  justify-content: flex-start;
}

.contact__action .btn {
  padding: 15px;
  background-color: var(--color-cyan);
}

.contact__form {
  display: flex;
  align-items: center;
  width: 46.706%;
  padding: 2.335%; /* = 5% of the 46.706% column */
  background-color: var(--color-cyan-light);
}

/* --------------------------------------------------------------------------
   12. Form (Elementor form equivalent)
   -------------------------------------------------------------------------- */
.form {
  width: 100%;
}

.form__fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -16px;
}

.form__group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 1px;
  margin-bottom: 16px;
  padding: 0 5px;
}

.form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.form__input,
.form__textarea {
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-height: 59px;
  padding: 7px 20px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-cyan-70);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  transition: all 0.3s;
}

.form__input:focus,
.form__textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 1px var(--color-cyan);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.form__textarea {
  resize: vertical;
}

.form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 47px;
  padding: 15px 30px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-navy);
  color: var(--color-white);
  fill: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transition: all 0.3s;
}

.form__submit:hover {
  color: var(--color-white);
}

.form__message {
  display: none;
  width: 100%;
  margin: 10px 5px 0;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 14px;
}

.form__message[data-visible="true"] {
  display: block;
}

/* --------------------------------------------------------------------------
   13. FAQ + accordion
   -------------------------------------------------------------------------- */
.faq {
  margin: 9% 0 0;
  padding: 6% 0 7%;
  background-color: #4a5468;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.faq__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 10px;
}

.faq__title {
  margin-bottom: var(--widget-gap);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
  text-align: center;
}

.faq__line {
  display: block;
  width: 13%;
  height: 24px;
  margin: -2% auto var(--widget-gap);
  object-fit: contain;
  object-position: 50% 60%;
}

.faq__columns {
  display: flex;
  flex-wrap: wrap;
}

.faq__column {
  width: 50%;
  min-height: 1px;
}

.faq__column:first-child {
  padding-right: 1%; /* 2% of the half-width column */
}

.faq__column:last-child {
  padding-left: 1%;
}

.accordion {
  width: 100%;
}

.accordion__item {
  margin-bottom: 23px;
  overflow: hidden;
}

.accordion__item:last-child {
  margin-bottom: 0;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 17px;
  border: 1px solid var(--color-cyan-20);
  border-radius: 0;
  background-color: var(--color-navy-80);
  color: var(--color-white);
  text-align: left;
  transition: 0.3s;
}

.accordion__title {
  flex-grow: 1;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.19px;
  line-height: 1.2em;
}

.accordion__spacing {
  flex-grow: 0;
  flex-shrink: 0;
  width: 15px;
}

.accordion__toggle {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 1em;
}

.accordion__icon-open,
.accordion__icon-close {
  width: 1em;
  height: 1em;
  fill: #bfbfbf;
}

.accordion__item[data-open="true"] .accordion__icon-open,
.accordion__item:not([data-open="true"]) .accordion__icon-close {
  display: none;
}

.accordion__panel {
  display: none;
  overflow: hidden;
}

.accordion__content {
  padding: 20px;
  background-color: var(--color-navy-80);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.accordion__content > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding: 5% 0 4%;
  background-color: var(--color-navy);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.footer__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-black);
  opacity: 0;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.footer__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 10px;
}

.footer__brand {
  width: 27.474%;
  padding: 10px;
}

.footer__logo {
  width: 58%;
  margin-bottom: var(--widget-gap);
}

.footer__tagline {
  margin: 0 0 var(--widget-gap);
  padding: 8% 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.5em;
}

.footer__slogan {
  margin: -5% 0 0;
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5em;
}

.footer__col-services,
.footer__col-tile,
.footer__col-contact {
  min-height: 1px;
  padding: 10px;
}

.footer__col-services {
  width: 30.993%;
  padding-left: calc(3.1% + 10px); /* 10% of the column width, as in the original */
}

.footer__col-tile {
  width: 23.191%;
}

.footer__col-contact {
  width: 18.294%;
}

.footer__heading {
  margin-bottom: var(--widget-gap);
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6em;
  text-transform: capitalize;
}

.footer__list {
  margin: 0 0 var(--widget-gap);
  padding: 0;
  list-style: none;
}

.footer__brand > :last-child,
.footer__col-services > :last-child,
.footer__col-tile > :last-child,
.footer__col-contact > :last-child {
  margin-bottom: 0;
}

.footer__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
}

.footer__item:not(:last-child) {
  padding-bottom: 3.5px;
}

.footer__item:not(:first-child) {
  margin-top: 3.5px;
}

.footer__link {
  display: inline-flex;
  align-items: flex-start;
  color: var(--color-white);
  transition: all 0.4s;
}

.footer__link:hover {
  color: var(--color-white);
}

.footer__link:hover .footer__label {
  color: var(--color-cyan-70);
}

.footer__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  padding-right: 0;
  fill: var(--color-white);
}

.footer__label {
  padding-left: 6px;
  color: var(--color-white);
  transition: all 0.4s;
}

.footer__contact {
  margin: 0 0 var(--widget-gap);
  padding: 0;
  list-style: none;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
}

.footer__contact-item:not(:last-child) {
  padding-bottom: 5px;
}

.footer__contact-item:not(:first-child) {
  margin-top: 5px;
}

.footer__contact-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-white);
}

.footer__contact-link:hover {
  color: var(--color-white);
}

.footer__contact-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: var(--color-white);
}

.footer__contact-label {
  padding-left: 6px;
}

.footer__social {
  display: inline-block;
  width: 100%;
  margin-bottom: 0;
  word-spacing: 5px;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: solid var(--color-cyan-light);
  border-width: 0 1px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
  font-size: 15px;
  transition: all 0.3s;
}

.footer__social-link:hover {
  color: var(--color-white);
}

.footer__social-icon {
  width: 1em;
  height: 1em;
  fill: var(--color-white);
}

.footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Copyright bar */
.copyright {
  padding: 1% 0;
  background-color: var(--color-cyan);
}

.copyright__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.copyright__text,
.copyright__credit {
  width: 50%;
  margin: 0;
  padding: 10px;
  color: var(--color-white);
  font-family: var(--font-topbar);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4em;
}

.copyright__credit {
  text-align: right;
}

.copyright__link {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
}

.copyright__link:hover {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   15. Contact page
   -------------------------------------------------------------------------- */
.contact-page {
  padding: 6% 0 5%;
  background-color: var(--color-white);
}

.contact-page__container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.contact-page__content {
  width: 52.801%;
  padding: 0 4.752% 0 0; /* = 9% of the 52.801% column */
}

.contact-page__title,
.contact-page__line,
.contact-page__subtitle,
.contact-page__text,
.contact-page__divider,
.contact-page__list {
  margin-bottom: var(--widget-gap);
}

.contact-page__title {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3em;
}

.contact-page__line {
  display: block;
  width: 40%;
  height: 24px;
  margin-top: -4%;
  object-fit: contain;
  object-position: 0 60%;
}

.contact-page__subtitle {
  padding: 1% 0 0.9rem;
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.contact-page__text {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.contact-page__divider {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 2px 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  background-clip: content-box;
}

.contact-page__list {
  margin: 0 0 var(--widget-gap);
  padding: 4% 0 0;
  list-style: none;
}

.contact-page__item {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
}

.contact-page__item:not(:last-child) {
  padding-bottom: 6.5px;
}

.contact-page__item:not(:first-child) {
  margin-top: 6.5px;
}

.contact-page__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-black);
}

.contact-page__link:hover {
  color: var(--color-black);
}

.contact-page__icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  fill: var(--color-cyan);
}

.contact-page__label {
  padding-left: 6px;
  color: var(--color-black);
}

.contact-page__social {
  display: inline-block;
  width: 100%;
}

.contact-page__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: solid var(--color-navy);
  border-width: 0 1px;
  border-radius: 50%;
  background-color: var(--color-cyan-20);
  color: var(--color-navy);
  font-size: 21px;
  transition: all 0.3s;
}

.contact-page__social-link:hover {
  color: var(--color-navy);
}

.contact-page__social-icon {
  width: 1em;
  height: 1em;
  fill: var(--color-navy);
}

.contact-page__form {
  display: flex;
  align-items: center;
  width: 47.154%;
  padding: 2.358%; /* = 5% of the 47.154% column */
  background-color: var(--color-cyan-light);
}

.contact-page__form .form__input,
.contact-page__form .form__textarea {
  color: var(--color-navy);
}

/* Map */
.map {
  margin: 0 0 7%;
}

.map__container {
  display: flex;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.map__frame-wrap {
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.map__frame {
  display: block;
  width: 100%;
  height: 386px;
  border: 0;
}

/* --------------------------------------------------------------------------
   16. Blog listing
   -------------------------------------------------------------------------- */
.blog {
  padding: 5% 0;
  background-color: var(--color-white);
}

.blog__container {
  display: flex;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 30px;
  width: 100%;
  padding: 10px;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0 solid #69727d;
  border-radius: 3px;
  background-color: var(--color-white);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.25s;
}

.post-card:hover {
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
}

.post-card__thumbnail-link {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.post-card__thumbnail-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 75%);
  background-repeat: no-repeat;
  opacity: 1;
  transition: all 0.3s ease-out;
}

.post-card:hover .post-card__thumbnail-link::after {
  opacity: 0.5;
}

.post-card__thumbnail {
  position: relative;
  padding-bottom: 66%;
  overflow: hidden;
}

.post-card__image {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  display: block;
  width: calc(100% + 1px);
  max-width: none;
  height: auto;
  transform: scale(1.01) translate(-50%, -50%);
  transition: filter 0.3s;
}

.post-card__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  margin: 20px 0 0;
  padding: 0 30px;
}

.post-card__title {
  margin: 0 0 25px;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4em;
}

.post-card__title-link {
  color: var(--color-navy);
}

.post-card__title-link:hover {
  color: var(--color-navy);
}

.post-card__excerpt {
  margin-bottom: 25px;
  line-height: 1.7;
}

.post-card__excerpt p {
  margin: 0;
  color: #777;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
}

.post-card__read-more {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 20px;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.post-card__read-more:hover {
  color: var(--color-navy);
}

.post-card__meta {
  margin-top: auto;
  margin-bottom: 0;
  padding: 15px 30px;
  border-top: 1px solid #eaeaea;
  color: var(--color-cyan);
  font-family: "Roboto Slab", serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3em;
}

.post-card__date + .post-card__comments::before {
  content: "•";
  margin: 0 5px;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   17. Single blog post
   -------------------------------------------------------------------------- */
.post {
  padding: 5% 0;
  background-color: var(--color-white);
}

.post__container {
  display: flex;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.post__article {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
}

.post__image {
  width: 73%;
  margin-bottom: var(--widget-gap);
}

.post__content {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
}

.post__content h2,
.post__content h3 {
  margin: 0.5rem 0 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.post__content h2 {
  font-size: 2rem;
}

.post__content h3 {
  font-size: 1.75rem;
}

.post__content p {
  margin: 0 0 0.9rem;
}

.hero--post .hero__title {
  margin-right: 30%;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: 0;
}

.hero--post .hero__line {
  width: 28%;
}

.hero--blog .hero__line {
  width: 18%;
}

.hero--contact .hero__overlay {
  opacity: 0.4;
}

.hero--contact .hero__line {
  width: 30%;
  margin-top: -1%;
}

.hero--contact .hero__content {
  padding: 0 10px;
}

.hero--post .hero__overlay {
  opacity: 0.43;
}

/* --------------------------------------------------------------------------
   18. Page-specific backgrounds (drop the matching files into assets/img)
   -------------------------------------------------------------------------- */
.page--metal-roofs .hero { background-image: url("../img/metal-roofs.jpg"); }
.page--metal-roofs .cta__media { background-image: url("../img/metal-roofs.jpg"); }

.page--metal-roof-repairs .hero { background-image: url("../img/metal-roof-repairs.jpg"); }
.page--metal-roof-repairs .cta__media { background-image: url("../img/metal-roof-repairs.jpg"); }
.page--metal-roof-repairs .card__image { height: 270px; }
.page--metal-roof-repairs .cta { padding: 4%; }
.page--metal-roof-repairs .cta__content { width: 53.526%; }
.page--metal-roof-repairs .cta__media { width: 46.4%; }
.page--metal-roof-repairs .cta__action .btn,
.page--metal-roof-repairs .contact__action .btn { padding: 18px 13px; font-size: 14px; }
.page--metal-roof-repairs .contact__content { width: 51.38%; }
.page--metal-roof-repairs .contact__form { width: 48.546%; }

.page--re-roofing .hero { background-image: url("../img/re-roofing.jpg"); background-position: center right; }
.page--re-roofing .cta__media { background-image: url("../img/re-roofing.jpg"); }
.page--re-roofing .card__image { height: 270px; }
.page--re-roofing .cta { padding: 4%; }
.page--re-roofing .cta__content { width: 53.526%; }
.page--re-roofing .cta__media { width: 46.4%; }
.page--re-roofing .cta__action .btn,
.page--re-roofing .contact__action .btn { padding: 18px 13px; font-size: 14px; }
.page--re-roofing .contact__content { width: 51.38%; }
.page--re-roofing .contact__form { width: 48.546%; }

.page--roof-leak-repairs .hero { background-image: url("../img/roof-leak-repairs.jpg"); }
.page--roof-leak-repairs .cta__media { background-image: url("../img/roof-leak-repairs.jpg"); }
.page--roof-leak-repairs .card__image { height: 329px; }
.page--roof-leak-repairs .card + .contact { margin-top: 4%; } /* original: card margin 3% + contact margin 6% */
.page--roof-leak-repairs .contact__title { font-size: 40px; }

.page--contact .hero { background-image: url("../img/re-roofing.jpg"); }
.page--blog .hero { background-image: url("../img/metal-roofs.jpg"); }
.page--post .hero { background-image: url("../img/post-what-is-roof-restoration-and-how-it-adds-value-to-your-auckland-home.webp"); }

/* --------------------------------------------------------------------------
   19. Tablet (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --container-width: 1024px;
  }

  .header__container {
    max-width: 1024px;
  }

  .header__logo {
    width: 27%;
  }

  .header__logo-image {
    width: 74%;
  }

  .header__bar {
    position: relative;
  }

  .header__nav {
    position: static;
    width: 5%;
    padding-left: 0;
  }

  .header__actions {
    width: 50%;
  }

  /* Nav collapses to a stretched dropdown */
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9997;
    display: block;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s, transform 0.3s;
  }

  .nav[data-open="true"] {
    max-height: 100vh;
    overflow-y: auto;
    transform: scaleY(1);
  }

  .nav__item {
    display: block;
  }

  .nav__link {
    padding: 13px 20px;
    border-left: 8px solid transparent;
    white-space: normal;
  }

  .nav__link:hover,
  .nav__link:focus,
  .nav__item[data-open="true"] > .nav__link {
    background-color: var(--color-cyan);
    color: var(--color-white);
  }

  .nav__arrow {
    margin-left: auto;
  }

  .nav__submenu {
    position: static;
    width: auto;
    max-width: none;
    box-shadow: none;
  }

  .nav__sublink {
    padding-left: 20px;
    border-left: 24px solid transparent;
    font-size: 0.85em;
  }

  .sidebar__item {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   20. Mobile (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --container-width: 767px;
  }

  .header__desktop {
    display: none;
  }

  .header__mobile {
    display: block;
  }

  /* Hero */
  .hero {
    padding: 0 0 0 4%;
  }

  .hero__container {
    min-height: 37vh;
  }

  .hero__title {
    padding-left: 1%;
    font-size: 28px;
  }

  .hero__line {
    width: 59%;
    margin-top: -8%;
    margin-left: 1%;
  }

  .hero--post .hero__title {
    margin-right: 0;
    font-size: 24px;
  }

  .hero--post .hero__line {
    width: 59%;
    margin-top: -7%;
  }

  .hero--contact {
    padding-left: 0;
  }

  .hero--contact .hero__line {
    width: 49%;
    margin-top: -8%;
  }

  /* Service layout: sidebar first on mobile */
  .service {
    padding: 7% 4% 10%;
  }

  .service__container {
    flex-direction: column-reverse;
  }

  .service__main {
    width: 100%;
    padding: 8% 0 0;
  }

  .service__aside {
    width: 100%;
    padding: 0;
  }

  .sidebar {
    position: static;
    padding: 3% 0;
  }

  .sidebar__title {
    font-size: 25px;
  }

  .sidebar__line {
    width: 35%;
    margin-top: -8%;
    margin-left: 1%;
  }

  .sidebar__item {
    font-size: 16px;
  }

  .service__title {
    font-size: 23px;
  }

  .service__label {
    font-size: 16px;
  }

  .service__line {
    width: 59%;
    margin-top: -8%;
  }

  .service__main > .service__line:first-of-type {
    margin-top: -5%;
  }

  .service__text {
    margin-top: -5%;
    font-size: 15px;
  }

  .service__main > .service__text:first-of-type {
    margin-top: -4%;
  }

  .service__action .btn {
    padding: 15px 12px;
    font-size: 14px;
  }

  /* Card */
  .card {
    margin: 5% 0 9%; /* 5% margin + 4% section padding of the original */
    padding: 7% 5%;
  }

  .card__title {
    font-size: 23px;
  }

  /* Text-only cards (no image row) are tighter on mobile in the original */
  .card:not(:has(.card__row)) {
    margin: 5% 0;
    padding: 5%;
  }

  .card:not(:has(.card__row)) .card__title {
    font-size: 21px;
  }

  .card:not(:has(.card__row)) .card__text {
    margin-top: -5%;
  }

  .card__line {
    width: 59%;
    margin-top: -5%;
  }

  .card__media,
  .card__body {
    width: 100%;
  }

  .card__image,
  .page--metal-roof-repairs .card__image,
  .page--re-roofing .card__image,
  .page--roof-leak-repairs .card__image {
    height: 185px;
  }

  .card__body {
    padding: 7% 0 0;
  }

  .card__text {
    font-size: 15px;
  }

  /* CTA: image first on mobile */
  .cta,
  .page--metal-roof-repairs .cta,
  .page--re-roofing .cta {
    padding: 8% 5%;
  }

  .cta__container {
    flex-direction: column-reverse;
  }

  .cta__content,
  .cta__media,
  .page--metal-roof-repairs .cta__content,
  .page--metal-roof-repairs .cta__media,
  .page--re-roofing .cta__content,
  .page--re-roofing .cta__media {
    width: 100%;
  }

  .cta__content {
    padding: 7% 0 0;
  }

  .cta__title {
    font-size: 23px;
  }

  .cta__label {
    font-size: 16px;
  }

  .cta__text {
    margin-top: -5%;
    font-size: 15px;
  }

  .cta__action .btn,
  .page--metal-roof-repairs .cta__action .btn,
  .page--re-roofing .cta__action .btn {
    padding: 13px 10px;
    font-size: 14px;
    line-height: 1.3em;
  }

  .cta__spacer {
    height: 194px;
  }

  /* Contact block */
  .contact {
    padding: 3%;
  }

  .contact__content,
  .contact__form,
  .page--metal-roof-repairs .contact__content,
  .page--metal-roof-repairs .contact__form,
  .page--re-roofing .contact__content,
  .page--re-roofing .contact__form {
    width: 100%;
  }

  .contact__content {
    padding: 2% 3% 0;
  }

  .contact__label {
    font-size: 16px;
  }

  .contact__title,
  .page--roof-leak-repairs .contact__title {
    font-size: 23px;
  }

  .contact__text {
    margin-top: -5%;
    font-size: 15px;
  }

  .contact__action {
    margin: -4% 0 calc(var(--widget-gap) + 4%);
  }

  .contact__content > .contact__action:last-child {
    margin-bottom: 4%;
  }

  .contact__action .btn,
  .page--metal-roof-repairs .contact__action .btn,
  .page--re-roofing .contact__action .btn {
    padding: 13px 10px;
    font-size: 14px;
    line-height: 1.2em;
  }

  .contact__form {
    width: 94%;
    margin: 5% 3% 3%;
    padding: 5%;
  }

  /* FAQ */
  .faq {
    padding: 7% 1%;
  }

  .faq__title {
    padding-left: 1%;
    font-size: 28px;
    text-align: left;
  }

  .faq__line {
    width: 29%;
    margin: -6% 0 var(--widget-gap) 1%;
  }

  .faq__column:first-child,
  .faq__column:last-child {
    width: 100%;
    padding: 0 1%;
  }

  .faq__column:last-child {
    padding-top: 6%;
  }

  .accordion__trigger {
    padding: 8px;
  }

  .accordion__title {
    font-size: 15px;
    line-height: 1.5em;
  }

  /* Footer */
  .footer {
    padding: 8% 2% 6%;
  }

  .footer__container {
    padding: 0;
  }

  .footer__brand,
  .footer__col-services,
  .footer__col-tile,
  .footer__col-contact {
    width: 100%;
    padding-left: 10px;
  }

  .footer__logo {
    width: 54%;
  }

  .footer__tagline {
    margin-top: -3%;
    padding: 0;
    font-size: 13px;
    line-height: 1.6em;
  }

  .footer__slogan {
    margin-top: -4%;
    font-size: 13px;
    line-height: 1.6em;
  }

  .footer__heading {
    font-size: 22px;
  }

  .footer__item,
  .footer__contact-item {
    font-size: 15px;
  }

  .copyright__text,
  .copyright__credit {
    width: 100%;
    font-size: 13px;
    line-height: 1.6em;
    text-align: left;
  }

  .copyright__credit {
    margin-top: -18px;
  }

  /* Contact page */
  .contact-page {
    padding: 8% 2% 9%;
  }

  .contact-page__content,
  .contact-page__form {
    width: 100%;
  }

  .contact-page__content {
    padding: 4% 3% 9%;
  }

  .contact-page__title {
    font-size: 23px;
  }

  .contact-page__line {
    width: 59%;
    margin-top: -8%;
  }

  .contact-page__subtitle {
    margin-top: -6%;
    font-size: 16px;
  }

  .contact-page__text {
    margin-top: -9%;
    font-size: 15px;
  }

  .contact-page__list {
    padding-top: 0;
  }

  .contact-page__item {
    font-size: 15px;
  }

  .contact-page__social-link {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .contact-page__form {
    width: 94%;
    margin: 5% 3% 3%;
    padding: 5%;
  }

  /* Blog */
  .blog {
    padding: 5% 4%;
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }

  .post-card__thumbnail {
    padding-bottom: 50%;
  }

  /* Post */
  .post {
    padding: 5% 4%;
  }

  .post__image {
    width: 100%;
  }

  .post__content {
    font-size: 15px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   21. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .side-menu__overlay,
  .side-menu__panel,
  .side-menu__close,
  .side-menu__sublist,
  .nav,
  .phone-button,
  .phone-button__icon,
  .phone-button__icon-holder {
    transition: none;
  }
}

/* Long Run Roofing Auckland additions */
.page--service .hero, .page--home .hero, .page--gallery .hero { background-image: url("../img/re-roofing.jpg"); background-size: cover; background-position: center; }
.page--home .hero { background-image: url("../img/metal-roofs.jpg"); }
.page--service .cta__media, .page--home .cta__media { background-image: url("../img/metal-roof-repairs.jpg"); background-size: cover; background-position: center; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.header__logo-image, .mobile-header__logo-image, .footer__logo { height: auto; }
.post__date { margin-top: 24px; color: #666; font-size: 14px; }
.gallery { padding: 60px 20px; }
.gallery__container { max-width: 1140px; margin: 0 auto; }
.gallery__intro { margin-bottom: 30px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gallery__item { margin: 0; }
.gallery__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 4px; }
.gallery__caption { font-size: 14px; color: #555; margin-top: 8px; }