/* ---- tokens.css ---- */
/* ============================================================================
   TOKENS — Plado Wall Design.

   Every value here was measured on pladowalldesign.com (WordPress, Porto 7.9
   "Architecture 2", WPBakery) on 2026-10-13, from the computed styles and the
   theme's own variables (theme_css_vars.css). The rebuild matches the live
   site 1:1, so sizes follow the original's breakpoints, not a fluid scale:
   Porto steps at 576 / 768 / 992 / 1170 / 1500, and below 576px the root font
   size drops to 92.86%, which shrinks every rem value and no px value.
   ========================================================================= */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --primary: #2a2a2a;          /* --porto-primary-color: header, bands, buttons */
  --accent: #e36159;           /* --porto-secondary-color: the service menu's frame */
  --menu-ink: #2c2c2c;         /* the service menu's links */
  --primary-light: #373737;    /* --porto-primary-light-5: button hover */
  --primary-dark: #1e1e1e;     /* --porto-primary-dark-5: carousel arrow hover */
  --footer-bg: #383f48;        /* --porto-quaternary-color */
  --footer-rule: #3f3035;      /* the footer's separator line */
  --call: #6dab3c;             /* the green CALL button in the header */
  --call-now: #008a00;         /* the round phone button on phones */

  /* ---- neutrals ------------------------------------------------------- */
  --ink: #212529;              /* section titles, and the 60% wash over the intro photos */
  --heading-alt: #222529;      /* card and member titles */
  --body: #777777;             /* body copy */
  --toggle-bg: #f7f7f7;        /* FAQ toggle */
  --toggle-hover: #fbfbfb;     /* FAQ toggle label on hover */
  --toggle-title: #f5f5f5;     /* the FAQ page's default toggle label */
  --banner-left: #c6ccce;      /* the process photos' colour before they load */
  --banner-right: #b0aca1;
  --btn-light-edge: #d9d9d9;   /* the white button's border */
  --btn-light-base: #bfbfbf;   /* and its darker bottom edge */
  --hairline: rgba(0, 0, 0, 0.06);
  --panel-rule: #3e3e3e;       /* lines between items in the phone menu */
  --white: #ffffff;
  --black: #000000;            /* behind a gallery photo on hover */
  --quote-author: #999999;     /* the testimonial author line */
  --card-meta: #969696;        /* a project card's category */

  /* ---- lightbox (Magnific Popup's stock colours) ------------------------ */
  --lb-backdrop: #0b0b0b;
  --lb-frame: #444444;
  --lb-counter: #cccccc;
  --lb-arrow: #3f3f3f;

  /* ---- type ----------------------------------------------------------- */
  /* Declared in base/fonts.css, which self-hosts every face the original's
     web-font loader requested. */
  --font: "Poppins", sans-serif;
  --font-head: "Overpass", sans-serif;
  --font-serif: "PT Serif", sans-serif;

  --fs-body: 14px;             /* 13px below 576px (theme_css_vars.css) */
  --lh-body: 26px;             /* 20px below 576px */

  /* ---- layout --------------------------------------------------------- */
  --page-x: 6.4vw;             /* .custom-page-wrapper side padding */
  --gutter: 15px;

  --transition: 0.3s;
}

@media (max-width: 575px) {
  :root {
    --fs-body: 13px;
    --lh-body: 20px;
  }
}

/* ---- base/fonts.css ---- */
/* ============================================================================
   FONTS — self-hosted. Every typeface this site uses is served from its own
   origin, out of assets/fonts/, which build.js copies into dist/.

   No font is loaded from a third-party host: no <link> to a font service, no
   @import, and no font host in the CSP (_headers keeps font-src at 'self').
   The hostnames are deliberately not spelled out in this comment: two checks
   grep src/ for them, and a comment naming them would fail both.
   A remote font is one more origin that can be slow, blocked or gone, and it
   is the one request on every page that tells a third party who visited.

   One @font-face per family, weight and style the CSS actually uses:
     font-family   the exact name tokens.css puts in --font
     src           the woff2 under /assets/fonts/, with format("woff2")
     font-weight   one weight per rule, as the source declared it
     font-style    normal or italic
     font-display  swap
     unicode-range copy it when the source CSS gives one; a subset the page
                   never uses is then never downloaded

   Where the files come from, on a conversion: the original site's own font
   files (the scrape downloads them), or for a Google font the css2 URL fetched
   with a desktop Chrome User-Agent — other User-Agents are served other
   formats — saving every woff2 it lists. Keep the families, weights, styles and
   unicode-range exactly as the source had them.

   Until a face is declared here, the family in --font falls back to the system
   stack after it, which is what the bare template renders with.

   The example is described in words on purpose: verify.js reads every
   url() in the bundle, comments included, and fails the build on one that
   does not resolve.
   ========================================================================= */

/* The faces the original requests through the theme's web-font loader:
   Poppins 300-700, Overpass 300-900 (300 and 400 also italic), PT Serif 400
   and 700 (the loader also asks for 600, which the family does not have; the
   browser synthesises it from 700 there, and does here). Every subset the
   source CSS lists is kept, with its unicode-range, so nothing changes for a
   character the copy may one day use. Overpass is a variable font: one file
   per style and subset covers every weight, as in the source CSS. */

/* Overpass 300 italic — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 300 italic — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 300 italic — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 300 italic — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 300 italic — latin */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 400 italic — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 400 italic — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 400 italic — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 400 italic — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 400 italic — latin */
@font-face {
  font-family: "Overpass";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 300 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 300 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 300 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 300 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 300 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 400 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 400 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 400 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 400 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 400 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 500 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 500 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 500 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 500 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 500 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 600 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 600 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 600 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 600 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 600 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 700 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 700 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 700 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 700 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 700 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 800 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 800 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 800 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 800 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 800 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overpass 900 normal — cyrillic-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Overpass 900 normal — cyrillic */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Overpass 900 normal — vietnamese */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Overpass 900 normal — latin-ext */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Overpass 900 normal — latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/overpass-normal-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PT Serif 400 normal — cyrillic-ext */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-400-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* PT Serif 400 normal — cyrillic */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* PT Serif 400 normal — latin-ext */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PT Serif 400 normal — latin */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PT Serif 700 normal — cyrillic-ext */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-700-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* PT Serif 700 normal — cyrillic */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* PT Serif 700 normal — latin-ext */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PT Serif 700 normal — latin */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-normal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 300 normal — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-300-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Poppins 300 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 300 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 400 normal — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-400-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Poppins 400 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 400 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 500 normal — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-500-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Poppins 500 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 500 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 600 normal — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-600-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Poppins 600 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 600 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 700 normal — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-700-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Poppins 700 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 700 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-normal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Abril Fatface 400 normal — latin-ext (the service pages only) */
@font-face {
  font-family: "Abril Fatface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/abril-fatface-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Abril Fatface 400 normal — latin (the service pages only) */
@font-face {
  font-family: "Abril Fatface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/abril-fatface-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base/reset.css ---- */
/* ---- reset & document defaults ------------------------------------------
   Porto 7.9's document defaults, as the original computes them: a 16px root
   that drops to 92.86% (14.8576px) below 576px, Poppins 14/26 #777 body copy,
   #2a2a2a links. The original's overflow-x is hidden on <html>; here it is
   clipped on <body> as well, so the decorative outline words that run past
   the window edge never widen the page (README, Deliberate departures).
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (max-width: 575px) {
  html { font-size: 14.8576px; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--white);
  /* The browser's default smoothing, as on the original: the template's
     antialiased/grayscale draws every line thinner and lighter on a Mac. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  overflow-x: clip;
}

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

a {
  color: var(--primary);
  text-decoration: none;
}

p { margin: 0 0 1.25rem; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

hr {
  height: 1px;
  margin: 1.375rem 0;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
}

button { font: inherit; }

a:focus-visible,
button:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--call);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* ---- base/typography.css ---- */
/* ---- typography ----------------------------------------------------------
   Porto's heading defaults (theme_css_vars.css): h2 Overpass 900 30/42,
   h3 Overpass 400 25/32, h4 Overpass 400 20/27, all tracked -0.05em. Below
   576px the theme scales them by 0.9286. Most headings on this site carry
   their own sizes; the shared section heading is .heading below.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.05em;
}
h2 { font-size: 30px; font-weight: 900; line-height: 42px; margin-bottom: 32px; }
h3 { font-size: 25px; font-weight: 400; line-height: 32px; margin-bottom: 20px; }
h4 { font-size: 20px; font-weight: 400; line-height: 27px; margin-bottom: 14px; }
@media (max-width: 575px) {
  h2 { font-size: 27.8571px; line-height: 40px; }
  h3 { font-size: 23.2143px; line-height: 24.6154px; }
  h4 { font-size: 18.5714px; line-height: 20.7692px; }
}

/* ---- the section heading used on every page -------------------------------
   An uppercase kicker ("WE'RE HERE TO HELP"), a 900-weight title, the hatched
   divider image at half opacity, a serif lead and a body paragraph. Sizes are
   the original's own, in rem so they scale with the root below 576px. */
.kicker {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 2.5px;
  color: var(--body);
}
.title {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 2.40625rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.divider-img {
  display: block;
  margin: 0;
  line-height: var(--lh-body);   /* the image sits on a body-copy line: 26px tall, 20px below 576px */
}
.divider-img img { width: 120px; height: 15px; opacity: 0.5; vertical-align: top; }
.lead {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.4;
}
.copy {
  margin: 0 0 1.5rem;
  font-size: 0.9625rem;
  line-height: 26px;
}

/* The outline word behind a heading ("YOUR PLACE", "SOLUTIONS", "PLADO"):
   white fill, a 1px primary-coloured stroke, at 10% opacity. The box is
   what is positioned and what animates in; the word keeps its 10%. */
.bg-word-box {
  position: absolute;
  z-index: 0;
  display: flex;
  pointer-events: none;
}
.bg-word {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 42px;
  letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.1;
  white-space: nowrap;
  -webkit-text-fill-color: var(--white);
  -webkit-text-stroke: 1px var(--primary);
  pointer-events: none;
}

/* ---- base/layout.css ---- */
/* ---- layout primitives ---------------------------------------------------
   The original's grid, at the original's breakpoints (Porto 7.9 compiles
   Bootstrap 5 with xl at 1170px, and a 1440px container from 1500px).
   Component files size their own columns; these are the shared pieces.
   -------------------------------------------------------------------------- */

/* .custom-page-wrapper: every content band sits 6.4vw in from each edge. */
.wrap {
  padding-left: var(--page-x);
  padding-right: var(--page-x);
}

/* Porto's .container. Below 992px it goes fluid, and inside the page body
   the theme pins its padding to 15px (0 below 576px). */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1170px) { .container { max-width: 1140px; } }
@media (min-width: 1500px) { .container { max-width: 1440px; } }
/* Below 992px the theme pads a container by its fluid spacing (30px, 20px
   below 576px), except inside the page body, where the site pins it to 15px
   and then 0. */
@media (max-width: 991px) { .container { padding-left: 30px; padding-right: 30px; } main .container { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 575px) { .container { padding-left: 20px; padding-right: 20px; } main .container { padding-left: 0; padding-right: 0; } }

/* .container-lg-custom: the bands inside .wrap run the full width between
   the 6.4vw margins, up to 1440px. */
@media (min-width: 992px) { .container--wide { max-width: 1440px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.row > * {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.text-center { text-align: center; }
.text-end { text-align: right; }

/* ---- components/button.css ---- */
/* ---- buttons -------------------------------------------------------------
   The site's one button (.custom-btn-style-1): Overpass 700, 1rem x 3rem
   inside, #2a2a2a, with a second 1px outline 5px outside it that closes in
   to the edge on hover while the fill lightens to #373737. 183 x 55 at 1440
   for "CONTACT US"; rem-based, so 170 x 51 below 576px as on the original.
   .btn--light is the white one on the dark call-to-action band. */

.btn {
  display: inline-block;
  position: relative;
  padding: 1rem 3rem;
  border: 1px solid var(--primary);
  background: var(--primary);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--primary);
  transition: 0.3s;
}
.btn:hover {
  border-color: var(--primary-light);
  background: var(--primary-light);
  color: var(--white);
}
.btn:hover::before { inset: 0; }

.btn--light {
  border-color: var(--btn-light-edge) var(--btn-light-edge) var(--btn-light-base);
  background: var(--white);
  color: var(--ink);
}
.btn--light::before { border-color: rgba(255, 255, 255, 0.5); }

/* ---- components/appear.css ---- */
/* ---- scroll-triggered entrance animations ---------------------------------
   Porto's appear-animate, as the original runs it (anim-watch.js, 2026-10-13):
   an element with an appear animation starts at opacity 0 and, when it
   scrolls into view, plays a 1s animation with fill-mode both, after its own
   delay. The keyframes are copied from the original's animate.css.

   Here: data-appear="<name>" and data-appear-delay="<ms>"; 52-appear.js adds
   `.is-in`. Everything is gated on `.js`, so with JavaScript off nothing is
   hidden, and prefers-reduced-motion shows everything at once. */

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(40px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes maskUp { 0% { transform: translate(0, 100%); } 100% { transform: translate(0, 0); } }

.js [data-appear] { opacity: 0; }
.js [data-appear].is-in {
  opacity: 1;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: var(--appear-delay, 0ms);
}
.js [data-appear="fadeIn"].is-in { animation-name: fadeIn; }
.js [data-appear="fadeInUp"].is-in { animation-name: fadeInUp; }
.js [data-appear="fadeInDown"].is-in { animation-name: fadeInDown; }
.js [data-appear="fadeInLeft"].is-in { animation-name: fadeInLeft; }
.js [data-appear="fadeInRight"].is-in { animation-name: fadeInRight; }
.js [data-appear="maskUp"].is-in { animation-name: maskUp; }

@media (prefers-reduced-motion: reduce) {
  .js [data-appear] { opacity: 1; }
  .js [data-appear].is-in { animation: none; }
}

/* ---- components/header.css ---- */
/* ---- header --------------------------------------------------------------
   Porto's header builder as the original renders it: a #2a2a2a bar laid over
   the top of the page (position absolute, so the first band starts at 0 and
   runs under it), not sticky. Three columns: the logo, the menu with the
   green CALL pill, and an empty third that keeps the menu centred (the
   original's social icons sit there; this site has none, 2026-10-21).
   135px tall on desktop (the height comes from the theme's hidden 300px logo
   plus 34/33px padding), 95px below 992px where the logo is 123px wide and
   the menu becomes a drop-down panel.
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  background: var(--primary);
}

.site-header__row {
  display: flex;
  position: relative;
}
@media (max-width: 991px) {
  /* container-fluid 6.5vw, the row's -15px: the columns start 6.5vw - 15px in */
  .site-header__row { padding-left: calc(6.5vw - 15px); padding-right: calc(6.5vw - 15px); }
}

.site-header__left,
.site-header__middle,
.site-header__right {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 15px;
}
.site-header__left { flex: 1 1 0%; padding-top: 34px; padding-bottom: 33px; }
.site-header__middle { flex: 0 0 auto; z-index: 2; }
.site-header__right { flex: 1 1 0%; justify-content: flex-end; }
@media (max-width: 991px) {
  .site-header__right { display: none; }
}

/* ---- logo ---------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
.brand img { height: auto; }
.brand .brand__std { display: block; width: 300px; max-width: 100%; }
.brand .brand__overlay { display: none; }

@media (min-width: 992px) {
  .brand .brand__overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 15px;
    width: 300px;
    z-index: 1;
  }
  .brand__std {
    opacity: 0;
    transform: translate3d(87px, 0, 0);
  }
}
/* the theme's --porto-logo-mw: 123px from 1470px and below 992px */
@media (min-width: 1470px), (max-width: 991px) {
  .brand .brand__std { width: 123px; }
}

/* ---- menu ---------------------------------------------------------------- */
.main-nav__list {
  display: flex;
  margin: 0 14px 0 0;
  padding: 0;
  list-style: none;
}
.main-nav__list li { position: relative; margin: 0 1px 0 0; }
.main-nav__list li:last-child { margin-right: 0; }
.main-nav__list a {
  display: inline-block;
  position: relative;
  padding: 9px 14px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1px;
  color: var(--white);
}
@media (min-width: 1470px) { .main-nav__list a { padding: 40px 14.4px; } }

/* the underline that grows in from the left on hover and marks the page */
.main-nav__list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 15px;
  height: 3px;
  margin: 15px 14px 0;
  background: var(--primary);
  opacity: 0;
  transition: right 0.3s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.3s;
}
@media (min-width: 1470px) { .main-nav__list a::before { margin-left: 14.4px; margin-right: 14.4px; } }
.main-nav__list a:hover::before,
.main-nav__list .is-active > a::before {
  right: 0;
  opacity: 1;
  background: var(--white);
}

/* ---- CALL ---------------------------------------------------------------- */
.call-btn {
  display: inline-block;
  margin: 0 1em 20px 0;
  padding: 0.5rem 1em;
  border: 1px solid var(--call);
  border-radius: 2em;
  background: var(--call) linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.01));
  font-size: 0.875rem;
  line-height: 1.3333;
  color: var(--white);
  text-align: center;
  vertical-align: middle;
}
.call-btn:hover { color: var(--white); }

/* ---- mobile toggle and panel --------------------------------------------- */
.nav-toggle {
  display: none;
  margin: 8px 0;
  padding: 7px 13px;
  border: 0;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.01);
  color: var(--white);
  font-size: 1.2em;
  line-height: 20px;
  cursor: pointer;
}
.nav-toggle .icon { width: 14px; height: 16px; fill: currentColor; vertical-align: -2px; }

@media (max-width: 991px) {
  /* the panel spans the whole bar, so this column must not be its anchor */
  .site-header__middle { position: static; }
  .call-btn { margin-right: 1em; }
  .nav-toggle { display: inline-block; }

  /* #nav-panel: a full-width drop-down under the bar, closed until the toggle */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 15px calc(6.5vw - 15px + 30px);
    background: var(--primary);
  }
  .main-nav.is-open { display: block; }
  .main-nav__list {
    display: block;
    max-height: 50vh;
    overflow: hidden auto;
    margin: 0;
    padding: 15px 0;
    font-size: calc(var(--fs-body) * 0.9);
  }
  .main-nav__list li {
    margin: 0;
    padding: 1px 0;
    border-bottom: 1px solid var(--panel-rule);
  }
  .main-nav__list li:last-child { border-bottom: 0; }
  .main-nav__list a {
    display: block;
    padding: 5px 6px;
    font-family: var(--font);
    font-size: inherit;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: normal;
    text-transform: uppercase;
  }
  .main-nav__list .is-active > a { background: var(--primary); }
  .main-nav__list a::before { display: none; }
}

/* ---- components/intro.css ---- */
/* ---- home intro ----------------------------------------------------------
   Porto "Architecture 2"'s intro slider, as the original runs it (sampled
   every 400ms on 2026-10-13): an 800px #2a2a2a band (600px below 768px), a
   photo box 6.4vw in from each side and pushed 103px down so it overhangs
   the next section, and two captions that cross-fade.

   The photo box holds two columns of four stacked photos (one column below
   576px). When the caption changes, the left column moves up one photo and
   the right one down one, over 1s; the columns themselves rise into view
   once on load (maskUp, 1s after a 1s delay). The captions autoplay once,
   after 5s, and stop on the second; the arrows step between the two.
   -------------------------------------------------------------------------- */

/* z-index 1: the photo columns hang 103px below the band and are drawn over
   the blueprint drawing (.plan--1) that starts where the band ends, as on
   the original; the service cards (.info__container, z-index 2) are drawn
   over the photos. */
.intro {
  position: relative;
  z-index: 1;
  height: 800px;
  background: var(--primary);
}
@media (max-width: 767px) { .intro { height: 600px; } }

/* ---- the photo box -------------------------------------------------------- */
.intro__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  inset: 0 var(--page-x);
  transform: translate3d(0, 103px, 0);
  box-shadow: rgba(0, 0, 0, 0.3) 0 20px 30px -20px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.intro__col {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
@media (min-width: 576px) { .intro__col { width: 50%; } }
.intro__col--rev { overflow: hidden; }

.intro__track {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
}
.intro__img {
  position: relative;
  width: 100%;
  height: 100%;
}
/* the 60% wash that keeps the captions readable */
.intro__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ink);
  opacity: 0.6;
  transition: opacity 0.3s 0.1s;
}
.intro__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- the captions --------------------------------------------------------- */
.intro__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.intro__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}
.intro__slide.is-active { opacity: 1; visibility: visible; }
.intro__slide--left { text-align: left; }
.intro__slide--right { text-align: right; }

.intro__container {
  position: relative;
  z-index: 3;
  max-width: 78%;
  height: 100%;
  margin-top: 1rem;
  padding-top: 3rem;
}
@media (max-width: 575px) { .intro__container { margin-top: 3rem; } }

.intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.intro__mask { overflow: hidden; }

.intro__title {
  margin: 0 0 0.5rem;
  font-size: 4.375rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: normal;
  color: var(--white);
  transition: color 0.3s;
}
@media (min-width: 576px) { .intro__title { margin-bottom: 0.25rem; } }
@media (min-width: 768px) { .intro__title { margin-bottom: 0; } }

.intro__sub {
  margin: 0 0 0.25rem;
  font-size: 1.575rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.8);
}
.intro__line {
  margin: 0 0 3rem;
  font-size: 0.9625rem;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
}
.intro__line:hover { color: var(--white); }
.intro__cta { text-align: left; }

/* ---- arrows: hidden until the band is hovered (Porto's show-nav-hover) ---- */
.intro__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 45px;
  height: 60px;
  padding: 4px 7px;
  border: 0;
  background: rgba(38, 42, 47, 0.4);
  color: var(--white);
  font-size: 30px;
  line-height: 33px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.4s, background-color 0.2s;
  animation: fadeIn 1s;
}
.intro__nav .icon { width: 10.7px; height: 30px; fill: currentColor; vertical-align: top; margin-top: 1px; }
.intro__nav--prev { left: 33px; transform: translate(-10px, -50%); }
.intro__nav--next { right: 33px; transform: translate(10px, -50%); }
@media (max-width: 991px) {
  .intro__nav--prev { transform: translate(10px, -50%); }
  .intro__nav--next { transform: translate(-10px, -50%); }
}
.intro__slides:hover .intro__nav { opacity: 1; transform: translate(0, -50%); }
.intro__slides:hover .intro__nav.is-disabled { opacity: 0.5; cursor: default; }
.intro__nav:hover { background: var(--primary-dark); }

/* ---- the blueprint drawings tucked behind the bands ----------------------- */
.plan-anchor { position: relative; height: 0; }
.plan { position: absolute; max-width: none; background: var(--white); }
.plan--1 {
  top: 0;
  right: -15px;
  max-width: calc(100% + 30px);
  height: auto;
}
.plan-anchor--end { margin-top: 50px; }
.plan--3 { bottom: 0; left: -15px; }

/* ---- components/info.css ---- */
/* ---- home: the two service cards and "You need space for better living" ---
   A 90%-wide container pulled 80px up into the intro's photo box (30px down
   below 992px, 170px below 768px, where the photos are shorter).
   -------------------------------------------------------------------------- */

.info__container {
  position: relative;
  z-index: 2; /* over the intro's photos (.intro is z-index 1) */
  max-width: 90%;
  margin-top: -80px;
}
@media (max-width: 991px) { .info__container { margin-top: 30px; } }
@media (max-width: 767px) { .info__container { margin-top: 170px; } }

/* ---- service cards: three to a row from 1170px (two cards, so one slot
   stays empty), two from 576px, one below that with dots to page them ---- */
.services {
  --per-view: 1;
  margin-bottom: 1.5rem;
  padding-bottom: 0.25rem;
}
@media (min-width: 576px)  { .services { --per-view: 2; } }
@media (min-width: 1170px) { .services { --per-view: 3; } }

.services__grid { margin-bottom: 20px; }
.services__track {
  display: flex;
  gap: 25px;
  transition: transform 0.25s;
}
.services__viewport { overflow: hidden; }
.service-card {
  flex: 0 0 calc((100% - 25px * (var(--per-view) - 1)) / var(--per-view));
  position: relative;
  padding: 4rem 3rem 4.5rem;
  border: 1px solid var(--hairline);
  background: var(--white);
  transition: background-color 0.3s;
}
.service-card__icon {
  display: block;
  width: 75px;
  height: 75px;
  margin: 0 auto 40px;
  transition: fill 0.3s;
}
.service-card__title {
  margin: 0 0 1rem;
  font-size: 26.6px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--heading-alt);
  text-align: center;
}
.service-card__title a { color: inherit; }
.service-card__text { margin: 0; text-align: center; transition: color 0.3s; }
.service-card:hover { background: var(--primary); color: var(--white); fill: var(--white); }
.service-card:hover .service-card__title { color: var(--white); }

/* the owl dots: hollow 12px rings, filled when current */
.dots { display: none; height: 28px; margin-top: 20px; text-align: center; }
.dots.has-pages { display: block; }
/* 24 x 24 so each dot is a big enough target (WCAG 2.2); the original's are
   20 x 22, so the dots sit 4px further apart */
.dots button {
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.dots button span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--primary);
  border-radius: 30px;
  background: transparent;
  transition: opacity 0.2s;
}
.dots button:hover span,
.dots button.is-active span { background: var(--primary); }

/* ---- "You need space for better living" ---------------------------------- */
.about-block {
  align-items: center;
}
@media (min-width: 1170px) { .about-block { padding-bottom: 3rem; } }

.about-block__gallery {
  display: flex;
  position: relative;
}
.row > .about-block__gallery { width: 75%; padding-bottom: 3rem; margin-bottom: 3rem; }
@media (min-width: 992px)  { .row > .about-block__gallery { width: 33.3333%; padding-bottom: 0; margin-bottom: 0; } }
@media (min-width: 1170px) { .row > .about-block__gallery { width: 41.6667%; } }

.about-block__frame {
  display: flex;
  position: relative;
  justify-content: center;
  width: 100%;
}
.plan--2 {
  left: 0;
  bottom: -168px;
  margin-bottom: 35px;
  max-width: 100%;
}
.about-block__photo {
  position: relative;
  margin-bottom: 35px;
  overflow: hidden;
  text-align: center;
}
.about-block__photo img {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 400 / 460;
  object-fit: cover;
}
.about-block__photo--top {
  position: absolute;
  right: -17%;
  bottom: -75px;
  z-index: 2;
}

.about-block__text {
  display: flex;
  position: relative;
}
.row > .about-block__text { padding-top: 3rem; }
@media (min-width: 992px) {
  .row > .about-block__text { width: 58.3333%; margin-left: 8.3333%; padding-top: 0; }
}
@media (min-width: 1170px) { .row > .about-block__text { width: 41.6667%; } }

.about-block__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.about-block__word { top: 190px; left: 0; font-size: 9.2rem; }
@media (min-width: 992px) {
  .about-block__kicker { margin-top: 3rem; padding: 3rem 0 0 3rem; }
  .about-block__pad { padding-left: 3rem; }
}
.about-block__divider { margin-bottom: 13px; }
.about-block__lead { padding-bottom: 1rem; }
.about-block__copy { padding-bottom: 1rem; }
.about-block__btn { margin: 0 0 37px 5px; }

/* ---- components/process.css ---- */
/* ---- home: the three steps -----------------------------------------------
   Two photo panels (400px tall, their pictures drifting with the scroll at
   1.8x, Porto's interactive-banner parallax) either side of a dark card
   that pages through 01 Selection / 02 Preparation / 03 Installation with
   an arrow that appears on hover, or by dragging. The card overlaps each
   photo by 70px. Below 992px the card is half the width, below 768px the
   photos go and the card is the full width.
   -------------------------------------------------------------------------- */

.process { padding-top: 19px; }
.process__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.process__photo {
  display: flex;
  flex: 1 1 0%;
  position: relative;
  z-index: 1;
  width: 34vw;
  min-height: 400px;
  max-height: 400px;
  overflow: hidden;
  background: var(--banner-left);
}
.process__photo--right { background: var(--banner-right); }
@media (max-width: 767px) { .process__photo { display: none; } }

.process__bg {
  position: absolute;
  top: -80%;
  left: 0;
  width: 100%;
  height: 180%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.process__bg--left { background-image: url("/assets/img/pwd-job01-6-banner-crop.jpg"); }
.process__bg--right { background-image: url("/assets/img/pwd-job04-6-banner-crop.jpg"); }

.process__card {
  position: relative;
  z-index: 2;
  width: 40vw;
  margin: 0 -70px;
  padding: 3rem;
  background: var(--primary);
}
@media (max-width: 991px) { .process__card { width: 50vw; } }
@media (max-width: 767px) { .process__card { width: 100%; margin: 0; } }

.steps { position: relative; }
.steps__viewport { overflow: hidden; transition: height 0.3s; }
.steps__track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: transform 0.25s;
  cursor: grab;
}
.step {
  flex: 0 0 100%;
  padding: 1.5rem 0 1rem;
  text-align: left;
  opacity: 0.5;
}
.step.is-active { opacity: 1; }

.step__head {
  position: relative;
  margin: 0 0 24px;
  font-size: 1.18125rem;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: -0.05em;
  color: var(--white);
}
.step__num {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  font-size: 4.5em;
  font-weight: 900;
  opacity: 0.1;
  transform: translate3d(0, -50%, 0);
}
.step__name {
  position: relative;
  z-index: 1;
  font-style: inherit;
  letter-spacing: 4.5px;
}
.step__text {
  margin: 0 1rem 0 0;
  padding-right: 3rem;
  font-size: 0.9625rem;
  color: var(--white);
  opacity: 0.4;
  transition: opacity 0.3s;
}
.step__text:hover { opacity: 1; }
@media (min-width: 768px) and (max-width: 991px) { .step__text { margin-right: 0; padding-right: 0; } }

/* the next arrow, drawn: a chevron and a 25px shaft */
.steps__next {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 35px;
  height: 45px;
  padding: 4px 7px;
  border: 0;
  background: rgba(38, 42, 47, 0.4);
  color: var(--white);
  line-height: 33px;
  cursor: pointer;
  opacity: 0;
  transform: translate(10px, -50%);
  transition: opacity 0.2s, transform 0.4s, background-color 0.2s;
}
@media (max-width: 991px) { .steps__next { transform: translate(-10px, -50%); } }
.steps:hover .steps__next { opacity: 1; transform: translate(0, -50%); }
.steps:hover .steps__next.is-disabled { opacity: 0.5; cursor: default; }
.steps__next:hover { background: var(--primary-dark); }
.steps__next::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 17px;
  width: 11px;
  height: 11px;
  border-top: 2px solid;
  border-left: 2px solid;
  transform: translate3d(-50%, -50%, 0) rotate(135deg);
}
.steps__next::after {
  content: "";
  display: block;
  position: absolute;
  top: 22px;
  left: 10px;
  width: 25px;
  border-top: 2px solid;
  transform: translate3d(-50%, 0, 0);
}

/* ---- components/gallery.css ---- */
/* ---- home: the six-photo grid --------------------------------------------
   A four-column grid of square cells: two wide photos and four squares, in
   two rows. Below 992px it becomes the original's two-column masonry, each
   column half the width: the wide photos keep their 2:1 shape and the squares
   are two cells tall, so the columns interlock. Each cell opens the lightbox;
   on hover a 65% black wash and a plus sign rise in.
   -------------------------------------------------------------------------- */

.gallery {
  margin: 1rem 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.gallery__frame {
  container-type: inline-size;
  max-width: 1440px;
  margin: 0 auto;
}
/* the page container's 15px gutter, which the original has only here */
@media (min-width: 576px) and (max-width: 991px) { .gallery__frame { padding: 0 15px; } }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25cqw;
}
.gallery__item { overflow: hidden; }
.gallery__item--wide { grid-column: span 2; }
@media (max-width: 991px) {
  .gallery__grid { grid-template-columns: 1fr 1fr; }
  .gallery__item { grid-row: span 2; }
  .gallery__item--wide { grid-column: auto; grid-row: span 1; }
}

/* the zoom link (Porto's porto-vc-zoom-hover-icon): also the About photos */
.gallery__link,
.zoom-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--white);
}
.gallery__link:hover,
.zoom-link:hover { background: var(--black); }
.gallery__link img,
.zoom-link img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s;
}
.gallery__link img:hover,
.zoom-link img:hover { opacity: 0.9; }
.gallery__link::before,
.zoom-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: 0.2s;
}
.gallery__plus,
.zoom-link__plus {
  position: absolute;
  top: 30%;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 30px;
  margin-top: -15px;
  text-align: center;
  line-height: 30px;
  opacity: 0;
  transition: 0.2s;
}
.gallery__plus .icon,
.zoom-link__plus .icon { width: 15.75px; height: 18px; fill: currentColor; vertical-align: middle; }
/* on hover only, for both: until 2026-10-21 the .zoom-link half lacked its
   :hover, so the About and project photos never darkened and always showed
   the plus (tester's report) */
.gallery__link:hover::before,
.zoom-link:hover::before { opacity: 1; }
.gallery__link:hover .gallery__plus,
.zoom-link:hover .zoom-link__plus { top: 50%; opacity: 1; }

/* ---- components/cta.css ---- */
/* ---- the dark call-to-action band ----------------------------------------
   "WE'RE HERE TO HELP / Let's Talk About Your Wallpaper Project!" with the
   white button: text left and button right from 1170px, both centred and
   stacked below that. */

.cta-band__box {
  padding: 4.6875rem 2rem;
  background: var(--primary);
}
/* the band's own container: 15px in, 0 below 576px (main .container) */
.cta-band__inner { padding: 0 15px; }
@media (max-width: 575px) { .cta-band__inner { padding: 0; } }
.cta-band__row {
  display: flex;
  margin: 0 -15px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.cta-band__text,
.cta-band__action {
  width: 100%;
  padding: 0 15px;
  text-align: center;
}
.cta-band__text { margin-bottom: 1.5rem; }
@media (min-width: 768px) { .cta-band__text { width: 66.6667%; } }
@media (min-width: 1170px) {
  .cta-band__text { width: 75%; margin-bottom: 0; text-align: left; }
  .cta-band__action { width: 25%; text-align: right; }
}
.cta-band__btn { margin-right: -5px; text-align: left; }

.cta-band__kicker {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 2.5px;
  color: var(--body);
}
.cta-band__title {
  margin: 0;
  font-size: 2.1875rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--white);
}

/* ---- components/faq.css ---- */
/* ---- FAQ toggles ---------------------------------------------------------
   Porto's toggles as this site styles them: a 4px #f7f7f7 frame, a grey
   label in Overpass 700 16px with a thin chevron at the right, and the
   answer padded 32/32/32/24 below. The first one starts open. Each opens and
   closes on its own (they are not an accordion). */

.faq { margin-bottom: 35px; }
.faq__item {
  position: relative;
  margin-bottom: 5px;
  border: 4px solid var(--toggle-bg);
  border-radius: 4px;
}
.faq__q { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.faq__q button {
  display: block;
  position: relative;
  width: 100%;
  min-height: 20px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  background: var(--toggle-bg);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.8px;
  color: var(--primary);
  text-align: left;
  cursor: pointer;
  transition: 0.15s ease-out;
}
.faq__q button:hover { background: var(--toggle-hover); }
.faq__q button::before {
  content: "";
  position: absolute;
  top: calc(50% + 0.25em);
  right: 14px;
  width: 1em;
  height: 1em;
  border-top: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
  font-size: 8px;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.3s, top 0.3s;
}
.faq__item.is-open .faq__q button::before {
  top: calc(50% - 0.75em);
  transform: rotate(135deg);
}
.faq__a {
  display: none;
  max-width: 690px;
  padding: 32px 32px 32px 24px;
}
.faq__item.is-open .faq__a { display: block; }
.faq__a p { margin: 0 0 35px; }

/* ---- the home page's FAQ band ---------------------------------------------- */
.faq-band {
  margin: 3rem 0 1rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.faq-band__intro { position: relative; margin-bottom: 3rem; }
.faq-band__list { position: relative; }
@media (min-width: 992px) {
  .row > .faq-band__intro { width: 41.6667%; margin-bottom: 0; }
  .row > .faq-band__list { width: 58.3333%; }
}
@media (min-width: 1170px) {
  .row > .faq-band__intro { width: 33.3333%; }
  .row > .faq-band__list { width: 66.6667%; }
}
.faq-band__word { top: 102px; left: -246px; font-size: 7.2rem; }
.faq-band__title { margin-bottom: 1.5rem; }
.faq-band__divider { padding: 0.5rem 0 13px; }
.faq-band__lead,
.faq-band__copy { padding-bottom: 0.5rem; }
.faq-band__btn { margin-left: 5px; }

.rule-band .rule { margin: 0; background: var(--hairline); }

/* ---- the FAQ archive page: Porto's default toggles -------------------------
   A grey label with a 3px dark bar at its left; the open one turns dark
   with white text. On the original the page starts under the header, which
   hides its heading and part of the first question; here it starts below
   the header (README, Deliberate departures). */
.faq-page { padding: calc(135px + 35px) 0 40px; }
@media (max-width: 991px) { .faq-page { padding-top: calc(95px + 35px); } }
.faq-page__title { margin-bottom: 32px; color: var(--heading-alt); }
.faq-page__title strong { font-weight: 700; }
.faq-plain__item { position: relative; padding-bottom: 10px; }
.faq-plain__q { margin: 0; font: inherit; letter-spacing: normal; }
.faq-plain__q button {
  display: block;
  position: relative;
  width: 100%;
  min-height: 20px;
  margin: 0;
  padding: 12px 20px 12px 15px;
  border: 0;
  border-left: 3px solid var(--primary);
  background: var(--toggle-title);
  font-family: var(--font);
  font-size: 1.1em;
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--primary);
  text-align: left;
  cursor: pointer;
  transition: 0.15s ease-out;
}
.faq-plain__q button:hover { background: var(--toggle-hover); }
.faq-plain__q button::before {
  content: "";
  position: absolute;
  top: calc(50% + 0.25em);
  right: 14px;
  width: 1em;
  height: 1em;
  border-top: 1px solid;
  border-right: 1px solid;
  font-size: 8px;
  transform: translate3d(0, -50%, 0) rotate(-45deg);
  transition: transform 0.3s, top 0.3s;
}
.faq-plain__item.is-open .faq-plain__q button { background: var(--primary); color: var(--white); }
.faq-plain__item.is-open .faq-plain__q button::before { top: calc(50% - 0.75em); transform: rotate(135deg); border-color: var(--white); }
.faq-plain__a { display: none; padding: 10px 0; }
.faq-plain__item.is-open .faq-plain__a { display: block; }
.faq-plain__a p:last-child { margin-bottom: 0; }

/* ---- components/team.css ---- */
/* ---- the member card and the home page's team band -----------------------
   Porto's member card: the photo (it grows 10% on hover, and a round search
   button appears at its corner that opens the photo in the lightbox), the
   name, "Owner and Installer" and a short bio. Two cards to a row from 768px,
   so a single card takes half the column, as on the original. */

.members {
  --per-view: 1;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .members { --per-view: 2; } }
.members > .member-card { flex: 0 0 calc((100% - 20px * (var(--per-view) - 1)) / var(--per-view)); min-width: 0; }

.member-card {
  position: relative;
  margin-bottom: 20px;
  border: 1px solid var(--hairline);
  text-align: center;
}
.member-card__media { position: relative; overflow: hidden; }
.member-card__img { display: block; position: relative; background: var(--white); }
.member-card__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.member-card:hover .member-card__img img { transform: scale(1.1); }
.member-card__zoom {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1000;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--primary);
  color: var(--white);
  line-height: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.1s, background-color 0.1s;
}
.member-card__zoom .icon { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; }
.member-card__media:hover .member-card__zoom { opacity: 1; }
.member-card__zoom:hover { background: var(--primary-light); color: var(--white); }

.member-card__body { padding: 2rem 2rem 0.75rem; }
.member-card__name {
  margin: 0 0 4px;
  font-size: 1.5em;
  font-weight: 800;
  line-height: 27px;
  color: var(--heading-alt);
}
@media (max-width: 575px) { .member-card__name { line-height: 20.7692px; } }
.member-card__name a { color: inherit; }
.member-card__role {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 1.1em;
  line-height: 24px;
}
.member-card__bio {
  margin: 0.625rem 0 0;
  font-weight: 300;
  line-height: 26px;
}

/* ---- home: Meet Our Team ------------------------------------------------- */
.team-band {
  margin: 3rem 0 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.team-band__cards { margin-bottom: 3rem; }
.team-band__text { position: relative; text-align: right; }
@media (min-width: 992px) {
  .row > .team-band__cards { width: 50%; margin: 0 auto; }
  .row > .team-band__text { width: 41.6667%; }
}
@media (min-width: 1170px) {
  .row > .team-band__cards { width: 58.3333%; }
  .row > .team-band__text { width: 33.3333%; }
}
.team-band__word { top: 90px; left: 0; font-size: 7.2rem; }
.team-band__title { margin-bottom: 1.5rem; }
.team-band__divider { margin-bottom: 22px; padding-top: 0.5rem; }
.team-band__lead { margin-top: 0.5rem; }
.team-band__copy { padding-bottom: 1rem; }
.team-band__btn { margin-bottom: 20px; }

/* ---- components/page.css ---- */
/* ---- About: the opening text block and the row of three photos -----------
   The page's text runs the full width under a faint "PLADO", with the
   blueprint drawing behind it at the top right; then three square photos
   that open the lightbox. */

.page-intro { padding-top: 3rem; }
.page-intro__row {
  display: flex;
  align-items: center;
  margin: 3rem -15px 0;
  padding-top: 3rem;
}
.page-intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 3rem 15px 0;
}
/* placed against the inner wrapper on the original, below the column's padding */
.page-intro__word { top: calc(100px + 3rem); left: -80px; font-size: 9.2rem; }
.page-intro__divider { margin-bottom: 13px; }
.page-intro__body { margin-bottom: 1.25rem; }
/* The original's markup nests a paragraph inside another; the browser
   closes the first early and the stray end tag leaves an empty paragraph,
   a 14px gap before "For us, wallpaper installation...". Kept as a gap. */
.page-intro__gap { min-height: 1em; margin-bottom: 1.25rem; }
.page-intro__para { padding-bottom: 1rem; }

.photo-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px 1.5rem;
  padding-bottom: 1rem;
}
.photo-row__item {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0 15px;
  text-align: center;
}
.photo-row__item:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .photo-row__item { width: 33.3333%; margin-bottom: 0; } }

/* ---- About's team band: the text first, then a narrow member card ---------- */
@media (min-width: 992px) {
  .row > .team-band__text--first { width: 50%; margin: 0 auto; }
  .row > .team-band__cards--side { width: 41.6667%; margin: 0; }
}
@media (min-width: 1170px) {
  .row > .team-band__text--first { width: 58.3333%; }
  .row > .team-band__cards--side { width: 33.3333%; }
}
.team-band--about { margin-bottom: 1rem; }
@media (max-width: 991px) { .team-band__text--first { margin-bottom: 3rem; } }
.team-band__cards--side { margin-bottom: 0; text-align: right; }
.team-band__word--about { left: 15px; }
.team-band--about .team-band__divider { padding-top: 0.5rem; }
.team-band__btn--about { margin: 0 5px 20px 0; }
@media (min-width: 992px) { .team-band__btn--about { padding-left: 3rem; } }

/* ---- components/projects.css ---- */
/* ---- the projects archive ------------------------------------------------
   "OUR WORK / Selected Portfolio" over a faint "PROJECTS", a filter (Show
   All / Animal / Floral, the current one underlined) and the project cards:
   squares three to a row from 1170px, 20px apart. On hover a dark wash
   fades in with the title and category, which rise 5px, and the picture
   grows 10%. The filter works in place, as the original's does; with
   JavaScript off its links go to the category pages, which are this page
   with that filter applied. */

.projects-page { padding: 3rem 0 0.25rem; }
.projects-page__band { margin-top: 3rem; padding-top: 3rem; }
.projects-page__col {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 3rem 0;
  text-align: center;
}
/* Centred by text-align in a box 30px wider than the column, as on the
   original: where the word is wider than the box it starts at the box's
   left edge and runs off to the right (a flex box would push it off both
   sides). */
.projects-page__word { top: 148px; left: 0; right: -30px; display: block; text-align: center; font-size: 9.2rem; }
.projects-page__divider { padding: 0.5rem 0 3.4375rem; }

.projects__filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.projects__filter li { border-bottom: 1px solid transparent; }
.projects__filter li.is-active { border-color: var(--primary); }
.projects__filter a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--primary);
}

.projects__grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  text-align: left;
}
.projects__grid[data-filter="animal"] .pcard:not([data-cat="animal"]),
.projects__grid[data-filter="floral"] .pcard:not([data-cat="floral"]) { display: none; }

.pcard {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 10px;
}
@media (min-width: 768px) { .pcard { width: 50%; } }
@media (min-width: 1170px) { .pcard { width: 33.3333%; } }

.pcard__media { position: relative; overflow: hidden; }
.pcard__img { display: block; position: relative; background: var(--white); }
.pcard__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s, opacity 1s;
}
.pcard:hover .pcard__img img { transform: scale(1.1) translateZ(0); opacity: 0.9; }

.pcard__hover {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(33, 37, 41, 0.8);
  opacity: 0;
  transition: transform 0.4s, opacity 0.3s;
}
.pcard:hover .pcard__hover,
.pcard:focus-within .pcard__hover { opacity: 1; }
.pcard__cover { position: absolute; inset: 0; }
.pcard__title,
.pcard__cat {
  position: relative;
  z-index: 1;
  transform: translateY(-5px);
  transition: transform 0.3s;
}
.pcard:hover .pcard__title,
.pcard:hover .pcard__cat { transform: translate(0); }
.pcard__title {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
.pcard__title a,
.pcard__cat a { color: inherit; }
/* a 24px-tall target without moving the text */
.pcard__cat a { display: inline-block; margin: -4px 0; padding: 4px 0; }
.pcard__cat {
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--card-meta);
}

/* ---- components/project.css ---- */
/* ---- a project page ------------------------------------------------------
   The photos of one job in two columns: three squares on the left with a
   faded rule above each, two portraits on the right. From 769px the photos
   are cropped to 353px tall (Projects 1, 3, 4 and 5; the theme's grid
   height), and 41.67% / 58.33% wide from 992px, half and half below that;
   at 768px and less the columns stack and each photo shows whole. Project 2
   keeps two columns at every width and never crops. Every photo opens the
   lightbox.

   The space above the photos is the original's: its template prints empty
   project-detail fields (location, date...) there, 176px of blank space
   (236px from 576 to 767px where they stack, 204px below 576px). */

.project-page { padding: 196px 0 40px; }
.project-page--single { padding-top: 216px; }
@media (max-width: 767px) { .project-page { padding-top: 256px; } .project-page--single { padding-top: 276px; } }
@media (max-width: 575px) { .project-page { padding-top: 224px; } .project-page--single { padding-top: 244px; } }

.pgrid { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 35px; }
.pgrid--crop { padding: 0 15px; }
@media (min-width: 576px) and (max-width: 991px) { .pgrid--crop { padding: 0 30px; } }

.pgrid__col { width: 100%; overflow: hidden; }
.pgrid--full .pgrid__col--left { width: 41.6667%; }
.pgrid--full .pgrid__col--right { width: 58.3333%; }
@media (min-width: 769px) {
  .pgrid--crop .pgrid__col { width: 50%; }
  .pgrid--crop .pgrid__photo img { height: 353px; object-fit: cover; }
}
@media (min-width: 992px) {
  .pgrid--crop .pgrid__col--left { width: 41.6667%; }
  .pgrid--crop .pgrid__col--right { width: 58.3333%; }
}

.pgrid__photo { text-align: center; }
.pgrid__photo .zoom-link img { width: 100%; }

/* the rule: a hairline that fades out to white in the middle */
.pgrid__rule {
  height: 1px;
  margin: 0 0 22px;
  border: 0;
  background-color: rgba(0, 0, 0, 0.08);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--white), rgba(0, 0, 0, 0));
}
.pgrid__rule--tall { margin: 22px 0 44px; }

/* the project photos' zoom icon: the search-plus at 30px */
.zoom-link--large .zoom-link__plus .icon { width: 30px; height: 30px; }

/* ---- components/contact.css ---- */
/* ---- Contact ---------------------------------------------------------------
   The pitch on the left under a faint "PLADO", the telephone and email on the
   right in 30px Overpass 900, grey. Side by side from 992px. The lead is in
   Poppins, not the serif the other pages use: the original's class for it
   is misspelt (ccustom-font3), so the serif never applies, and this copies
   what it shows. */

.contact-spacer { margin: 3rem 0; padding: 1.5rem 0; }
.contact { margin-bottom: 3rem; padding-top: 3rem; padding-bottom: 3rem; }

.contact__pitch,
.contact__details { position: relative; }
@media (min-width: 992px) {
  .row > .contact__pitch,
  .row > .contact__details { width: 50%; }
}
.contact__word { top: 110px; left: -206px; font-size: 9.2rem; }
.contact__title { margin-bottom: 1.5rem; }
.contact__divider { padding: 0.5rem 0 13px; }
.contact__lead {
  margin: 0.5rem 0 1.5rem;
  font-size: 1.3125rem;
  line-height: 1.4;
}
.contact__copy { margin-bottom: 3rem; padding-bottom: 0.5rem; }

.contact__heading { margin: 1.5rem 0; padding-top: 1rem; }
.contact__item { margin-bottom: 17px; }
.contact__label {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.contact__value {
  /* the original's h2: its 32px bottom margin collapses through the empty
     paragraph after it and out past the block's own 17px */
  margin: 0 0 32px;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 900;
  line-height: 42px;
  letter-spacing: -0.05em;
  color: var(--heading-alt);
}
.contact__value a { color: var(--body); }
@media (max-width: 575px) { .contact__value { font-size: 27.8571px; line-height: 40px; } }

/* ---- components/service.css ---- */
/* ---- a service page --------------------------------------------------------
   The service's text and two large photos, with a sidebar on the left from
   992px that stays in view while the page scrolls (113px from the top, until
   the content ends): the two services in a white box framed 20px in the
   theme's #e36159, the current one underlined, and a dark "Let's Talk" card.
   Below 992px the sidebar follows the content. The text under the heading
   is in Abril Fatface, which the original loads on these two pages only. */

/* The band stops widening at 1440px between the 6.4vw margins and stays
   centred (measured on the original: 1308px wide at 1500, 1440 at 1920). */
.service-page {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(1440px + 2 * var(--page-x));
  margin: 9.8125rem auto 0;
}
.service-page__main,
.service-page__side {
  width: 100%;
  padding: 35px 15px 40px;
}
@media (min-width: 992px) {
  .service-page__main { width: 66.6667%; order: 2; margin-left: auto; }
  .service-page__side { width: 33.3333%; order: 1; }
  .service-page__sticky { position: sticky; top: 113px; }
}
@media (min-width: 1201px) {
  .service-page__main { width: 75%; }
  .service-page__side { width: 25%; }
}
@media (max-width: 991px) { .service-page__side { margin-top: -20px; padding-top: 0; } }

.service-page__icon { float: right; width: 137px; height: 137px; }
.service-page__copy { padding-bottom: 1rem; }
.service-page__body {
  clear: none;
  margin-bottom: 10px;
  font-family: "Abril Fatface", var(--font);
}
.service-page__title {
  margin: 0 0 32px;
  color: var(--heading-alt);
}
.service-page__text { margin: 0 0 35px; }
.service-page__photo { margin: 0 0 1.5rem; line-height: 0; }
.service-page__photo:last-child { margin-bottom: 0; }
.service-page__photo img { width: 100%; height: auto; }

/* ---- the sidebar ------------------------------------------------------------ */
.service-menu { margin-bottom: 0.25rem; padding-bottom: 1rem; }
.service-menu__body {
  padding: 3rem 1.5rem;
  border: 1px solid var(--hairline);
}
.service-menu__list {
  margin: 0;
  padding: 0;
  border: 20px solid var(--accent);
  background: var(--white);
  list-style: none;
  letter-spacing: -0.35px;
}
.service-menu__list li {
  position: relative;
  font-family: var(--font-head);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 24px;
}
.service-menu__list li:first-child { margin-bottom: 22px; }
.service-menu__list li + li { margin-top: 1px; }
.service-menu__list a {
  display: inline-block;
  position: relative;
  padding: 0 0 4px;
  border-top: 1px solid var(--white);
  line-height: 21px;
  letter-spacing: normal;
  color: var(--menu-ink);
}
.service-menu__list li:first-child a { border-top: 0; }
.service-menu__list a:hover,
.service-menu__list a.is-current { color: var(--primary); }
/* the underline: full width under the current service, growing in on hover */
.service-menu__list a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  border-bottom: 2px solid var(--primary);
  transition: width 0.3s;
}
.service-menu__list a:hover::after,
.service-menu__list a.is-current::after { width: 100%; }

.service-cta { margin-top: 18px; text-align: center; }
.service-cta__box { padding: 4rem 3rem; background: var(--primary); letter-spacing: -0.025em; }
.service-cta__title {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  font-size: 2.40625rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--white);
}
.service-cta__btn { margin-right: -5px; text-align: left; }
/* The selection page's text ends with an empty paragraph on the original,
   which adds its 20px margin below the photos. */
.service-page__body--gap { margin-bottom: 30px; }

/* ---- components/member.css ---- */
/* ---- the member page -------------------------------------------------------
   The photo on the right (first, above the text, below 768px), and on the
   left the name, the bio in the middle half of the column and a small "GET IN
   TOUCH" button. (The original also has "FOLLOW ME" with a round Instagram
   icon; this site carries no social links, client request 2026-10-21.) */

.member-page { margin: 10.1875rem 0 37px; }
.member-page__photo { margin-bottom: 30px; }
.member-page__photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 768px) {
  .row > .member-page__photo { width: 41.6667%; order: 6; }
  .row > .member-page__text { width: 58.3333%; }
}

.member-page__name {
  margin: 0;
  line-height: 39px;
  color: var(--heading-alt);
}
.member-page__bio { margin: 30px -15px 2.625rem; padding: 0 15px 35px; }
/* the middle half of a three-column row (3 / 6 / 3); the row is 30px wider
   than the text column, and padding percentages are of the column */
@media (min-width: 768px) { .member-page__bio { padding: 0 calc((100% + 30px) / 4 + 15px) 35px; } }
.member-page__bio p { margin-bottom: 1.25rem; }
.member-page__bio p:last-child { margin-bottom: 0; }

.member-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -15px;
}
.member-page__cta { width: 100%; margin-bottom: 1.5rem; padding: 0 15px; }
@media (min-width: 768px) { .member-page__cta { width: 50%; } }
.btn-small {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.42857;
  color: var(--white);
}
.btn-small:hover { color: var(--white); }

/* ---- the members archive: the card, a third of the width from 1170px ------- */
.members-page { margin: 12.25rem 0 5.125rem; }
.members-page__grid { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.members-page__item { width: 100%; margin-bottom: 30px; padding: 0 15px; }
@media (min-width: 768px) { .members-page__item { width: 50%; } }
@media (min-width: 1170px) { .members-page__item { width: 33.3333%; } }

/* ---- components/quotes.css ---- */
/* ---- home: testimonials --------------------------------------------------
   A #2a2a2a panel with "HAPPY CLIENTS / See What Clients Are Saying" and the
   four quotes, one at a time, cross-fading (1s) when the arrows are used;
   the arrows appear on hover. The inner container is the original's
   1440px-minimum one, centred on the panel and clipped by it, which is what
   sets the measure of the quotes. */

/* z-index 1: the dark panel is drawn over the blueprint drawing (.plan--3)
   that rises into this band from below, as on the original; the band itself
   is transparent, so the drawing still shows beside and under the panel. */
.quotes-band { position: relative; z-index: 1; overflow: hidden; }
.quotes-band__panel { background: var(--primary); }
.quotes-band__inner {
  position: relative;
  left: 50%;
  width: 100%;
  min-width: 1440px;
  max-width: 1440px;
  padding: 3rem 15px;
  transform: translate3d(-50%, 0, 0);
}
.quotes-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -15px;
}
@media (max-width: 1199px) { .quotes-band__inner { min-width: 960px; } }
@media (max-width: 991px)  { .quotes-band__inner { min-width: 720px; } }
@media (max-width: 767px)  { .quotes-band__inner { min-width: 540px; } }
@media (max-width: 575px)  { .quotes-band__inner { min-width: 85vw; padding-left: 0; padding-right: 0; } }
.quotes-band__panel { overflow: hidden; }

.quotes-band__head {
  width: 91.6667%;
  margin: 3rem auto;
  padding: 1rem 15px 0;
  text-align: center;
}
@media (min-width: 768px) { .quotes-band__head { width: 100%; } }
.quotes-band__kicker { margin-bottom: 1rem; color: var(--white); opacity: 0.6; }
.quotes-band__title { margin: 0; color: var(--white); letter-spacing: -1px; }

.quotes-band__carousel {
  width: 100%;
  margin: 0 auto 26px;
  padding: 0 15px 1rem;
}
@media (min-width: 768px) { .quotes-band__carousel { width: 75%; } }

.quotes { position: relative; }
.quotes__viewport {
  display: grid;
  overflow: hidden;
  transition: height 0.3s;
}
.quote {
  grid-area: 1 / 1;
  align-self: start;
  margin: 0 0 20px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}
.quote.is-active { opacity: 1; visibility: visible; }
.quote blockquote {
  position: relative;
  margin: 0;
  padding: 22px 20px;
  color: var(--white);
}
@media (max-width: 767px) { .quote blockquote { padding-left: 0; padding-right: 0; } }
.quote__mark {
  position: absolute;
  top: 0;
  left: 10px;
  width: 19.6px;
  height: 22.4px;
  fill: currentColor;
}
@media (max-width: 575px) { .quote__mark { display: none; } }
.quote blockquote p {
  margin: 0;
  padding: 0 1rem;
  font-family: var(--font-head);
  font-size: 1.35em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.quote blockquote p:hover { opacity: 1; }
.quote__author {
  display: flex;
  margin: 6px 0 0;
  font-size: 1.2em;
}
.quote__author p {
  margin: 0 auto;
  line-height: 1.2;
  color: var(--quote-author);
  text-align: center;
}
.quote__author strong {
  display: block;
  margin-bottom: 2px;
  font-size: 16.8px;
  font-weight: 700;
  color: var(--white);
}
.quote__author span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  opacity: 0.6;
}

.quotes__nav {
  position: absolute;
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  padding: 4px 7px;
  border: 0;
  background: none;
  color: var(--white);
  font-size: 30px;
  line-height: 22px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.4s;
}
.quotes__nav .icon { width: 10.7px; height: 30px; fill: currentColor; vertical-align: top; margin-top: -4px; }
.quotes__nav--prev { left: -53px; transform: translate(-10px, -50%); }
.quotes__nav--next { right: -53px; transform: translate(10px, -50%); }
@media (max-width: 767px) {
  .quotes__nav--prev { left: -30px; }
  .quotes__nav--next { right: -30px; }
}
@media (max-width: 991px) {
  .quotes__nav--prev { transform: translate(10px, -50%); }
  .quotes__nav--next { transform: translate(-10px, -50%); }
}
.quotes:hover .quotes__nav { opacity: 1; transform: translate(0, -50%); }
.quotes:hover .quotes__nav.is-disabled { opacity: 0.5; cursor: default; }

/* ---- components/lightbox.css ---- */
/* ---- lightbox ------------------------------------------------------------
   The original uses Magnific Popup with its stock look (measured 2026-10-13):
   a #0b0b0b backdrop at 80%, the picture fitted to the window with 40px above
   and below, a "×" close at its top right, "2 of 6" under it on the right in
   12px #ccc, and two triangle arrows, 90 x 110, at 65% until hovered.
   A single picture (the team photo) has no arrows and no counter. */

.lightbox[hidden] { display: none; }
.lightbox__bg {
  position: fixed;
  inset: 0;
  z-index: 9042;
  background: var(--lb-backdrop);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.lightbox.is-ready .lightbox__bg { opacity: 0.8; }
.lightbox__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9043;
  padding: 0 8px;
  overflow: hidden auto;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.lightbox.is-ready .lightbox__wrap { opacity: 1; }

.lightbox__figure { position: relative; margin: 0; line-height: 0; }
.lightbox__figure::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--lb-frame);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100vh;
  margin: 0 auto;
  padding: 40px 0;
  box-sizing: border-box;
}

.lightbox__close {
  position: absolute;
  top: 0;
  right: -6px;
  z-index: 9046;
  width: 100%;
  height: 44px;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  font-family: Arial, Baskerville, monospace;
  font-size: 28px;
  font-style: normal;
  line-height: 44px;
  color: var(--white);
  text-align: right;
  text-decoration: none;
  opacity: 0.65;
  cursor: pointer;
}
.lightbox__close:hover { opacity: 1; }

.lightbox__bar {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: -36px;
  line-height: 18px;
}
.lightbox__counter {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: var(--lb-counter);
  white-space: nowrap;
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 9046;
  width: 90px;
  height: 110px;
  margin: -55px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.65;
  cursor: pointer;
}
.lightbox__arrow:hover { opacity: 1; }
.lightbox__arrow::before,
.lightbox__arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}
.lightbox__arrow::after { top: 8px; border-top-width: 13px; border-bottom-width: 13px; }
.lightbox__arrow::before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }
.lightbox__arrow--left { left: 0; }
.lightbox__arrow--left::after { margin-left: 31px; border-right: 17px solid var(--white); }
.lightbox__arrow--left::before { margin-left: 25px; border-right: 27px solid var(--lb-arrow); }
.lightbox__arrow--right { right: 0; }
.lightbox__arrow--right::after { margin-left: 39px; border-left: 17px solid var(--white); }
.lightbox__arrow--right::before { border-left: 27px solid var(--lb-arrow); }
.lightbox.is-single .lightbox__arrow,
.lightbox.is-single .lightbox__counter { display: none; }

/* ---- components/chrome.css ---- */
/* ---- back to top and the phone button ------------------------------------
   #topcontrol: a 49 x 48 square at the bottom right, rgba(64,64,64,.75),
   fading in once the page is scrolled; not shown below 768px.
   The "Call Now" button: a 55px green disc at the bottom centre, on phones
   only (650px and below), as the original's Call Now Button plugin draws it. */

.to-top {
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 1111;
  width: 49px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(64, 64, 64, 0.75);
  color: var(--white);
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: background 0.3s ease-out, opacity 0.3s, visibility 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top .icon { width: 14px; height: 14px; fill: currentColor; vertical-align: middle; }
@media (max-width: 767px) { .to-top { display: none; } }

.call-now { display: none; }
@media (max-width: 650px) {
  .call-now {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 15px;
    left: 50%;
    z-index: 2147483647;
    width: 55px;
    height: 55px;
    margin-left: -28px;
    border-radius: 50%;
    background: var(--call-now);
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 6px;
    color: var(--white);
  }
}

/* ---- components/notfound.css ---- */
/* ---- 404 -----------------------------------------------------------------
   The theme's page-not-found layout: "404" with a file icon at 140px (100px
   below 576px), and the apology at 1.4em on a 36px line, in a half-width
   column one column in from the left. The original lays it under the header,
   which hides the top of the "404"; here it starts below the header (README,
   Deliberate departures). */

.notfound { padding: 135px 0 0; }
@media (max-width: 991px) { .notfound { padding-top: 95px; } }
.notfound .container { padding-top: 35px; padding-bottom: 40px; }
.notfound__section { margin: 50px 0; }
@media (max-width: 575px) { .notfound__section { margin: 0; } }
.notfound__main { padding: 0 15px; }
@media (min-width: 992px) { .notfound__main { width: 50%; margin-left: 8.3333%; } }
.notfound__code {
  margin: 0 0 32px;
  font-size: 140px;
  font-weight: 600;
  line-height: 140px;
  letter-spacing: -10px;
  color: var(--heading-alt);
}
.notfound__code .icon { width: 105px; height: 140px; fill: currentColor; vertical-align: top; }
@media (max-width: 575px) {
  .notfound__code { font-size: 100px; line-height: 100px; letter-spacing: 0; }
  .notfound__code .icon { width: 75px; height: 100px; }
}
.notfound__text { font-size: 1.4em; line-height: 36px; }

/* ---- components/footer.css ---- */
/* ---- footer --------------------------------------------------------------
   The original's own footer: a #383f48 band, a hairline, the copyright line,
   the designer's credit and "All Rights Reserved", all centred, 12.6px. The
   original also has an Instagram icon under the hairline; this site carries
   no social links (client request, 2026-10-21).
   (Some pages of the original show the Porto theme's demo footer instead,
   with a Los Angeles address and an 800 number; every page here has this one.)
   -------------------------------------------------------------------------- */

.site-footer {
  padding-top: 48px;
  background: var(--footer-bg);
  font-size: 12.6px;
}

.site-footer__inner {
  padding-bottom: 31px;
  text-align: center;
}

.site-footer__rule {
  height: 1px;
  margin: 24px 0 38px;
  background: var(--footer-rule);
}

.site-footer__line {
  margin: 0.25rem 0 17px;
  padding-top: 0.5rem;
  font-size: 12.6px;
  line-height: 1.6em;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__credit {
  margin: 0 0 35px;
  line-height: 0;
}
.site-footer__credit img { width: 150px; height: 150px; }

/* ---- utilities.css ---- */
/* ---- utilities, motion, print ------------------------------------------- */

/* Any phone link anywhere is a tap target, including one written directly into
   page content. Enforce the WCAG 2.2 minimum (24x24) globally so a bare
   `tel:` link can never ship too small to hit on a phone — which would be a
   particularly bad failure on a business whose phone number is the product. */
/* The header's CALL pill, the floating phone button and the Contact page's
   30px number are styled phone links with their own display and size (each
   well over 24px tall); this rule must not reach them. An
   attribute selector outranks a class (CLAUDE.md §8): without the :not()s it
   showed the phone button below the footer on desktop. */
a[href^="tel:"]:not(.call-now):not(.call-btn):not(.contact__tel) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .call-now,
  .to-top,
  .lightbox,
  .skip-link { display: none; }

  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}