/* =====================================================================
   Architectural linework backgrounds
   ---------------------------------------------------------------------
   Technical drawings in the page MARGINS, to give the site an architect's
   drafting-table feel WITHOUT ever sitting under the copy.

   The art in /assets/linework is pre-baked as TRANSPARENT linework —
   the white paper is knocked out and the final opacity (9–13%) is baked
   into the alpha channel. That means they can be used as ordinary
   `background-image`s — no blend modes, no z-index juggling, and they can
   never intercept a click.

   FORMAT: .webp, with the original .png kept as the fallback for the
   ~0 browsers without WebP (image-set() picks per support). Lighthouse
   put plan.png (249K) and grid.png (167K) at #1 and #4 of the whole
   page's payload — they load on EVERY page, so the PNGs alone were the
   single largest self-inflicted cost on the site. Re-encoded: 1725K →
   1037K. grid is LOSSLESS webp (fine repeating rules turn to mush under
   lossy, and lossy actually came out BIGGER); the large decorative art
   is q80 lossy, which is visually identical at 9–13% alpha.
   ===================================================================== */

/* =====================================================================
   DISABLED 2026-07-17 — the client is NOT an architect.
   The drafting-table / blueprint linework (floor plans, elevations, crop
   marks) reads as the wrong profession for a turnkey showroom & interior
   fit-out company. The whole file is neutralised below; the source rules
   are kept underneath, commented, so the replacement background treatment
   can be built against them. Re-enable by removing this override block.
   ===================================================================== */
.page_content_wrap::before,
.page_content_wrap::after{ display:none !important; content:none !important; }

/* ---- ORIGINAL RULES (inert — kept for reference / rebuild) ------------- */


/* ---- REMOVED 2026-07-17: every "behind the content" placement ---------
   The tiled grid (all pages), the villa plan (home intro), the perspective
   sketch (home testimonials) and the footer elevation all sat UNDER text.
   Client's call: the drawings should decorate the whitespace, not compete
   with the copy. All four are replaced by the §GUTTER treatment below.
   The source art is still in /assets/linework/ if any is ever wanted back. */

/* =====================================================================
   §GUTTER — the drawings live in the MARGINS, never under the copy
   ---------------------------------------------------------------------
   Brief: "incorporate drawings as background elements [in the] white
   space of the container, not behind content ... show up properly and
   don't overlap with content."

   So the art is pinned to the empty page margins either side of the
   1170px container, and is only drawn when a margin actually exists and
   is wide enough to hold it. Below that it is not rendered at all — on a
   phone there IS no whitespace, so there is nothing to decorate and
   nothing is downloaded.

   Why position:fixed on ::before/::after of .page_content_wrap:
     - fixed → viewport-relative, so it costs NO layout and cannot shift
       anything (CLS stays where it is);
     - the strips are confined to the gutter by their own geometry, so an
       overlap with the container is impossible by construction rather
       than by luck;
     - pointer-events:none so they can never intercept a click;
     - a full-bleed dark band (hero, why, market) paints over the gutter
       as it scrolls past — correct: the art belongs to the paper, and it
       reappears alongside boxed content.

   The -edge assets are the same drawings with the baked alpha boosted
   (9-13% → ~25-30%): margin art no longer has to stay out of a reader's
   way, and at the old opacity it simply vanished. "Show up properly."
   ===================================================================== */
@media (min-width: 1280px){
  .page_content_wrap::before,
  .page_content_wrap::after{
    content:"";
    position:fixed;
    top:var(--pi-header-h, 90px);
    bottom:0;
    /* exactly the margin: half of whatever is left outside the container,
       minus a small inset so the art never kisses the container edge */
    width:calc(((100vw - var(--pi-container-w, 1170px)) / 2) - 28px);
    max-width:300px;
    pointer-events:none;
    /* z-index 1, not 0: the boxed sections are full-bleed and paint their own
       white/paper background across the whole viewport, so at z-index 0 the
       strips were painted over and vanished in LIGHT mode (dark mode's
       transparent bands happened to reveal them, which masked the bug).
       Raising them is safe precisely because the strips are geometrically
       confined to the margin — they cannot reach the 1170px container, so
       "above the section" still never means "over the copy". */
    z-index:1;
    background-repeat:no-repeat;
    background-size:cover;        /* fills the tall strip: reads as a detail view */
    opacity:.85;
  }
  .page_content_wrap::before{
    left:14px;
    background-image:url(../assets/linework/plan-edge.webp?v=2);
    background-position:right center;
  }
  .page_content_wrap::after{
    right:14px;
    background-image:url(../assets/linework/elevation-edge.webp?v=2);
    background-position:left center;
  }
  html.pi-dark .page_content_wrap::before{
    background-image:url(../assets/linework/plan-edge-dark.webp?v=2);
  }
  html.pi-dark .page_content_wrap::after{
    background-image:url(../assets/linework/elevation-edge-dark.webp?v=2);
  }
}
/* Below 1450px the margin is too narrow to hold a drawing legibly (at 1440
   it is only ~135px a side, and shrinking). Rather than squeeze it, drop
   the second strip first, then both — the layout stays clean at every width. */
/* The strips sit above plain colour backgrounds (that is the whole point —
   the full-bleed white/paper sections were hiding them). But a row that
   carries real ARTWORK — the hero photo, the dark editorial bands — must
   still cover them: linework over a photograph reads as a rendering fault,
   not decoration. Those rows are lifted above the art. Everything else
   (plain paper/white sections) stays below it, so the margins stay alive. */
@media (min-width: 1280px){
  .page_content_wrap .paras-hero,
  .page_content_wrap .vc_row-has-fill,
  .page_content_wrap .scheme_dark,
  .page_content_wrap .pa-hero,
  .page_content_wrap .pa-why,
  .page_content_wrap .pa-market,
  .page_content_wrap .google-map-area{
    position:relative;
    z-index:2;
  }
}

@media (min-width: 1280px) and (max-width: 1449px){
  .page_content_wrap::before{ display:none; }
  .page_content_wrap::after{ opacity:.6; }
}
@media (prefers-reduced-motion: no-preference){
  .page_content_wrap::before,
  .page_content_wrap::after{ transition:opacity .4s ease; }
}

/* Kept from the old footer-elevation treatment: the theme nests solid-white
   rows inside the footer, and letting them stay transparent is what allows the
   footer's own background (and the dark-mode surface) to read through. */
.footer_wrap > .vc_row[class*="vc_custom"]{ background-color:transparent !important; }