/* Bouwen — Property and Construction
   Generated from the Claude Design export; edit here, not in the export. */

/* ---------------------------------------------------------- typefaces */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/barlow-condensed-200-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/barlow-condensed-200-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/barlow-condensed-200-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-condensed-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-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;
}

/* --------------------------------------------------------------- base */
*, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:#FFFFFF; }
  body { font-family:'Barlow', sans-serif; -webkit-font-smoothing:antialiased; color:#191919; overflow-x:hidden; }
  a { color:#1B3A76; text-decoration:none; }
  a:hover { color:#0F2A5E; }
  @keyframes drift { 0%, 100% { transform:none; } }
  @property --px { syntax: '<length>'; inherits: true; initial-value: 500px; }
  @keyframes seam { 0% { --px: 41vw; } 50% { --px: 59vw; } 100% { --px: 41vw; } }
  html { animation: seam 18s ease-in-out infinite; }
  html[data-manual="1"] { animation: none; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

/* ------------------------------------------ landing page on narrow screens */
/* From the export's helmet, which only ever described the landing page. The
   bare `nav` selectors are fenced off from body.page-inner — the inner pages
   carry a different bar with its own rules further down this file. */
[data-role="cue-touch"] { display:none; }
@media (hover:none) {
  [data-role="cue-hover"] { display:none; }
  [data-role="cue-touch"] { display:inline; }
}
@media (max-width:880px) {
  body:not(.page-inner) nav,
  [data-role="nav-light"], [data-role="nav-dark"] { padding:14px 16px !important; }
  body:not(.page-inner) nav > :last-child,
  [data-role="nav-light"] > :last-child, [data-role="nav-dark"] > :last-child { display:none !important; }
  [data-role="brand-sub"] { display:none !important; }
  body:not(.page-inner) nav > :nth-child(2),
  [data-role="nav-light"] > :nth-child(2), [data-role="nav-dark"] > :nth-child(2) {
    gap:15px !important; font-size:12px !important; letter-spacing:0.07em !important;
  }
  /* Not from the export. The landing bar is transparent by design — over the
     hero the seam supplies its contrast, and on a wide screen the sections it
     crosses afterwards are mostly margin. At this width the copy runs the full
     column and the bar lands on top of it, so past the hero it takes a ground.
     site.js publishes both flags on <html>. */
  html[data-past-hero="1"] body:not(.page-inner) nav {
    background:#fff;
    border-bottom:1px solid #e6e6e3;
  }
  html[data-past-hero="1"][data-nav-on-dark="1"] body:not(.page-inner) nav {
    background:#191919;
    border-bottom-color:rgba(255,255,255,0.14);
  }
}
@media (max-width:540px) {
  body:not(.page-inner) nav > :nth-child(2),
  [data-role="nav-light"] > :nth-child(2), [data-role="nav-dark"] > :nth-child(2) {
    gap:11px !important; font-size:10.5px !important; letter-spacing:0.03em !important;
  }
}
/* Narrow enough that the hero copy runs the full width, so the pad behind it
   spreads to match rather than staying a centred ellipse. */
@media (max-width:640px) {
  [data-role="pad-dark"] { background:radial-gradient(ellipse 96% 40% at 50% 42%,rgba(10,16,28,0.52) 0%,rgba(10,16,28,0.46) 62%,rgba(10,16,28,0.16) 86%,rgba(10,16,28,0) 100%) !important; }
  [data-role="pad-light"] { background:radial-gradient(ellipse 96% 40% at 50% 42%,rgba(250,251,252,0.66) 0%,rgba(250,251,252,0.5) 62%,rgba(250,251,252,0.16) 86%,rgba(250,251,252,0) 100%) !important; }
}

/* ------------------------------------------- hover states (was style-hover) */
.scp0:hover { background:#0F2A5E !important; color:#fff !important; transform:translateY(-1px) !important; }
.scp1:hover { background:#1B3A76 !important; color:#fff !important; transform:translateY(-1px) !important; }
.scp2:hover { background:#eaeaea !important; transform:translateY(-2px) !important; }
.scp3:hover { background:#eaeaea !important; transform:translateY(-2px) !important; }
.scp4:hover { background:#eaeaea !important; transform:translateY(-2px) !important; }
.scp5:hover { color:#191919 !important; }
.scp6:hover { transform:scale(1.05) !important; }
.scp7:hover { background:#efeeec !important; transform:translateY(-3px) !important; }
.scp8:hover { background:#efeeec !important; transform:translateY(-3px) !important; }
.scp9:hover { background:#efeeec !important; transform:translateY(-3px) !important; }
.scp10:hover { transform:translateY(-4px) !important; box-shadow:0 20px 40px -28px rgba(0,0,0,0.45) !important; }
.scp11:hover { transform:translateY(-4px) !important; box-shadow:0 20px 40px -28px rgba(0,0,0,0.45) !important; }
.scp12:hover { transform:translateY(-4px) !important; box-shadow:0 20px 40px -28px rgba(0,0,0,0.45) !important; }
.scp13:hover { transform:translateY(-4px) !important; box-shadow:0 20px 40px -28px rgba(0,0,0,0.45) !important; }
.scp14:hover { transform:translateY(-4px) !important; box-shadow:0 20px 40px -28px rgba(0,0,0,0.45) !important; }
.scp15:hover { color:#fff !important; border-bottom:1px solid #fff !important; }
.scp16:hover { background:#eef1f7 !important; transform:translateY(-1px) !important; }
.scp17:hover { color:#fff !important; }
.scp18:hover { color:#fff !important; }
.scp19:hover { color:#fff !important; }
.scp20:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }
.scp21:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }

/* ------------------------------- hover states — company.html (was style-hover) */
.co0:hover { color:#191919 !important; }
.co1:hover { background:#0F2A5E !important; color:#fff !important; transform:translateY(-1px) !important; }
.co2:hover { background:#eef1f7 !important; color:#1B3A76 !important; transform:translateY(-1px) !important; }
.co3:hover { color:#fff !important; }
.co4:hover { color:#fff !important; }
.co5:hover { color:#fff !important; }
.co6:hover { color:#fff !important; }
.co7:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }
.co8:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }

/* ------------------------------ hover states — services.html (was style-hover) */
.sv0:hover { color:#191919 !important; }
.sv1:hover { background:#0F2A5E !important; color:#fff !important; transform:translateY(-1px) !important; }
.sv2:hover { background:#eef1f7 !important; color:#191919 !important; transform:translateY(-1px) !important; }
.sv3:hover { color:#fff !important; }
.sv4:hover { color:#fff !important; }
.sv5:hover { color:#fff !important; }
.sv6:hover { color:#fff !important; }
.sv7:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }
.sv8:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }

/* ------------------------------ hover states — projects.html (was style-hover) */
.pr0:hover { color:#191919 !important; }
.pr1:hover { background:#0F2A5E !important; color:#fff !important; transform:translateY(-1px) !important; }
.pr3:hover { transform:scale(1.04) !important; }
.pr4:hover { background:#eef1f7 !important; color:#191919 !important; transform:translateY(-1px) !important; }
.pr5:hover { color:#fff !important; }
.pr6:hover { color:#fff !important; }
.pr7:hover { color:#fff !important; }
.pr8:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }
.pr9:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }

/* ---------------------- hover states — privacy.html and legal.html */
.lg0:hover { color:#191919 !important; }
.lg1:hover { background:#0F2A5E !important; color:#fff !important; transform:translateY(-1px) !important; }
.lg3:hover, .lg4:hover, .lg5:hover, .lg6:hover { color:#fff !important; }
.lg7:hover, .lg8:hover { color:#fff !important; border-color:rgba(255,255,255,0.6) !important; }

/* footer privacy / terms links, every page */
.ft-legal { color:inherit; border-bottom:1px solid rgba(255,255,255,0.18); transition:color .2s; }
.ft-legal:hover { color:#fff; }

/* enquiry form consent — native checkbox, tinted to sit on the blue band */
.enquiry-consent { display:flex; align-items:flex-start; gap:10px; font-family:'Barlow',sans-serif; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.72); cursor:pointer; }
.enquiry-consent input { flex:none; width:16px; height:16px; margin:2px 0 0; accent-color:#fff; cursor:pointer; }
.enquiry-consent a { color:#fff; border-bottom:1px solid rgba(255,255,255,0.4); }
.enquiry-consent a:hover { border-bottom-color:#fff; }

/* privacy.html and legal.html — long-form text */
.legal-doc { max-width:760px; margin:0 auto; font-size:16px; line-height:1.75; color:rgba(25,25,25,0.78); text-wrap:pretty; }
.legal-doc h2 { margin:44px 0 12px; font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:clamp(20px,2.2vw,26px); letter-spacing:0.04em; text-transform:uppercase; color:#191919; }
.legal-doc p { margin:0 0 14px; }
.legal-doc ul { margin:0 0 14px; padding-left:20px; }
.legal-doc li { margin-bottom:6px; }
.legal-doc strong { font-weight:500; color:#191919; }
.legal-doc a { color:#1B3A76; border-bottom:1px solid rgba(27,58,118,0.35); }
.legal-doc a:hover { border-bottom-color:#1B3A76; }
.legal-doc .legal-updated { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(25,25,25,0.5); }
.legal-doc .legal-see-also { margin-top:48px; padding-top:22px; border-top:1px solid #e6e6e3; }

/* ------------------------------------------------ inner pages (.page-inner)
   services.html, company.html and projects.html share one nav, footer and CTA
   band. Like index.html they come out of the design canvas as inline styles, so
   the responsive rules below re-declare the grids by matching on the inline
   value — that keeps the markup exactly as the canvas laid it out. */

.page-inner { background:#fff; }

/* project filter — pill buttons, state carried on aria-pressed */
.pj-filter {
  padding:9px 18px; border-radius:999px; border:1px solid #dededa; background:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(25,25,25,0.6); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.pj-filter:hover { border-color:#191919; color:#191919; }
.pj-filter[aria-pressed="true"] { background:#191919; border-color:#191919; color:#fff; }
.pj-entry[hidden] { display:none; }

/* project gallery — thumbnails under the lead photograph; site.js swaps the
   figure's image, and without it each thumbnail links to the full photograph */
.pj-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.pj-thumbs a { display:block; aspect-ratio:3/2; overflow:hidden; background:#efefec; opacity:0.55; transition:opacity .25s; }
.pj-thumbs a:hover, .pj-thumbs a:focus-visible, .pj-thumbs a[aria-current="true"] { opacity:1; }
.pj-thumbs img { display:block; width:100%; height:100%; object-fit:cover; }
.pj-thumbs--many { grid-template-columns:repeat(7,1fr); gap:6px; }
.pj-thumbs--five { grid-template-columns:repeat(5,1fr); gap:6px; }
@media (max-width: 600px) { .pj-thumbs--many { grid-template-columns:repeat(5,1fr); } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .page-inner [style*="grid-template-columns:1.1fr 0.9fr"],
  .page-inner [style*="grid-template-columns:0.85fr 1.15fr"],
  .page-inner [style*="grid-template-columns:0.72fr 1.28fr"],
  .page-inner [style*="grid-template-columns:1.25fr 0.75fr"],
  .page-inner [style*="grid-template-columns:repeat(2,1fr)"],
  .page-inner section > div > [style*="grid-template-columns:1fr 1fr"],
  .page-inner section > [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
  .page-inner [style*="grid-template-columns:repeat(3,1fr)"],
  .page-inner [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* The bar cannot hold brand + four links + CTA on one narrow row, so the links
     drop to a second row. That makes the nav tall enough that overlaying the page
     stops working, so it leaves the fixed layer and sits in flow instead — which
     also lets the header drop the padding it was carrying to clear it. A nav in
     flow needs a solid ground; site.js reads that background and holds the light
     palette rather than sampling what has scrolled behind. */
  .page-inner nav[data-role="nav"] {
    position:sticky !important;
    flex-wrap:wrap;
    padding:14px 20px !important;
    background:#fff;
    border-bottom:1px solid #e6e6e3;
  }
  .page-inner nav[data-role="nav"] [data-role="nav-links"] {
    order:3; width:100%; margin-top:12px;
    gap:20px; font-size:12px; letter-spacing:0.1em;
  }
  .page-inner > div > header { padding-top:clamp(28px,5vw,44px) !important; }
}

@media (max-width: 620px) {
  .page-inner [style*="grid-template-columns:repeat(3,1fr)"],
  .page-inner [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns:1fr !important;
  }
  .page-inner .pj-spec { grid-template-columns:1fr !important; }
  .page-inner nav { padding:12px 20px !important; }
  .page-inner footer > div { flex-direction:column; align-items:flex-start !important; gap:18px; }
  .pj-filter { padding:8px 14px; font-size:12px; letter-spacing:0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .page-inner * { transition:none !important; animation:none !important; }
  .pr3:hover { transform:none !important; }
}