/*
 * NTECH Starter styles.
 * The middle part is the build page preview's own CSS (platform:
 * resources/js/components/configurator/configurator.css, "The example website
 * templates"), so a site looks like the design the client approved. Colours and
 * fonts come from the custom properties printed by inc/design.php.
 */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a { color: inherit; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Ported from the build page preview (keep in step with configurator.css) ---------- */
body.ntech {
    --muted: color-mix(in srgb, var(--text) 66%, var(--bg));
    --soft: color-mix(in srgb, var(--primary) 7%, var(--bg));
    --lc: color-mix(in srgb, var(--text) 13%, transparent);
    background: var(--bg);
    color: var(--text);
    font: 400 17px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
}

.ntech * {
    box-sizing: border-box;
}

.ntech h1,
.ntech h2,
.ntech h3 {
    font-family: var(--head);
    font-weight: var(--hw);
    letter-spacing: var(--ls);
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}

.ntech p {
    margin: 0;
}

.ntech img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.ntech .w { max-width: 1180px; margin: 0 auto; padding: 0 44px; }
.ntech .sec { padding: 104px 0; }
.ntech .eyb { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--primary); margin-bottom: 14px; display: block; font-family: var(--body); }
.ntech .h2 { font-size: 48px; margin-bottom: 18px; }
.ntech .lead { font-size: 19px; color: var(--muted); max-width: 52ch; }
.ntech .bt { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: var(--br); font-weight: 700; font-size: 15.5px; background: var(--primary); color: var(--on); white-space: nowrap; letter-spacing: var(--bls); }
.ntech .bt.ac { background: var(--accent); color: var(--onA); }
.ntech .bt.ol { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.ntech .bt.wa { background: #25d366; color: #07351c; }
.ntech .bt svg { width: 18px; height: 18px; }
.ntech .btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ntech .nv { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; }
.ntech .lg { display: flex; gap: 11px; align-items: center; font-family: var(--head); font-weight: var(--hw); font-size: 23px; letter-spacing: var(--ls); white-space: nowrap; }
.ntech .mono { width: 40px; height: 40px; border-radius: var(--mr); background: var(--primary); color: var(--on); display: grid; place-items: center; font-size: 17px; flex: none; }
.ntech .burger { display: none; width: 26px; gap: 5px; flex-direction: column; }
.ntech .burger i { height: 2px; background: currentColor; border-radius: 2px; }
.ntech .facts { display: flex; gap: 34px; margin-top: 40px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 14.5px; }
.ntech .facts b { display: block; font-family: var(--head); font-size: 26px; font-weight: var(--hw); line-height: 1.1; }
.ntech .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ntech .card .im { height: 250px; border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.ntech .card h3 { font-size: 25px; margin-bottom: 6px; }
.ntech .card p { color: var(--muted); font-size: 16px; }
.ntech .price { font-weight: 700; color: var(--primary); margin-top: 12px; display: block; font-size: 15.5px; }
.ntech .sh { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; }
.ntech .gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 230px 230px; gap: 14px; }
.ntech .gal div { border-radius: var(--r); overflow: hidden; }
.ntech .gal div:first-child { grid-column: span 2; grid-row: span 2; }
.ntech .revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ntech .rev { background: var(--surface); border: 1px solid var(--lc); border-radius: var(--r); padding: 30px; }
.ntech .stars { color: #f2a900; letter-spacing: 3px; font-size: 17px; }
.ntech .rev p { font-size: 18px; margin: 14px 0 20px; line-height: 1.5; }
.ntech .who { display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: var(--muted); }
.ntech .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--soft); color: var(--primary); }
.ntech .faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; }
.ntech .q { border-bottom: 1px solid var(--lc); padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; font-weight: 600; font-size: 18px; }
.ntech .q:first-child { border-top: 1px solid var(--lc); }
.ntech .q span { color: var(--primary); font-size: 24px; line-height: 1; font-weight: 400; }
.ntech .q.open { flex-wrap: wrap; }
.ntech .q.open small { width: 100%; font-weight: 400; color: var(--muted); font-size: 16px; }
.ntech .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ntech .post .im { height: 200px; border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.ntech .post small { color: var(--muted); font-size: 13.5px; }
.ntech .post h3 { font-size: 22px; margin-top: 6px; }
.ntech .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.ntech .mi { padding: 24px 0; border-bottom: 1px solid var(--lc); }
.ntech .mi .t { display: flex; align-items: baseline; gap: 12px; font-family: var(--head); font-weight: var(--hw); font-size: 23px; }
.ntech .mi .t::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted var(--lc); transform: translateY(-5px); }
.ntech .mi .t em { order: 2; font-style: normal; font-family: var(--body); font-weight: 700; font-size: 17px; color: var(--primary); }
.ntech .mi p { color: var(--muted); font-size: 15.5px; margin-top: 4px; }
.ntech .visit { display: grid; grid-template-columns: 1.15fr 0.85fr; border-radius: calc(var(--r) * 1.4); overflow: hidden; background: var(--surface); border: 1px solid var(--lc); }
.ntech .map {
    min-height: 430px;
    position: relative;
    background:
        linear-gradient(115deg, transparent 0 58%, color-mix(in srgb, #4aa3c9 38%, var(--bg)) 58% 100%),
        repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--text) 7%, transparent) 46px 48px),
        repeating-linear-gradient(90deg, transparent 0 62px, color-mix(in srgb, var(--text) 7%, transparent) 62px 64px),
        color-mix(in srgb, #7fb77e 14%, var(--bg));
}
.ntech .map::before { content: ''; position: absolute; left: -10%; top: 52%; width: 80%; height: 14px; background: color-mix(in srgb, #fff 70%, var(--bg)); transform: rotate(-24deg); box-shadow: 0 0 0 1px var(--lc); }
.ntech .map::after { content: ''; position: absolute; left: 30%; top: 10%; width: 12px; height: 100%; background: color-mix(in srgb, #fff 70%, var(--bg)); transform: rotate(12deg); box-shadow: 0 0 0 1px var(--lc); }
.ntech .pin { position: absolute; left: 41%; top: 40%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ntech .pin i { width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--primary); box-shadow: 0 8px 18px -6px #0008; display: grid; place-items: center; }
.ntech .pin i::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--on); }
.ntech .pin span { background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px -4px #0005; }
.ntech .info { padding: 48px; display: grid; gap: 26px; align-content: start; }
.ntech .info h3 { font-size: 34px; }
.ntech .hrs { display: grid; gap: 6px; font-size: 15.5px; }
.ntech .hrs div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px dashed var(--lc); padding-bottom: 6px; }
.ntech .hrs div span:last-child { font-weight: 600; }
.ntech .form { display: grid; gap: 10px; }
.ntech .inp { height: 48px; border-radius: calc(var(--r) * 0.5); border: 1px solid var(--lc); background: var(--bg); padding: 0 16px; display: flex; align-items: center; color: var(--muted); font-size: 15px; }
.ntech .inp.ta { height: 84px; align-items: flex-start; padding-top: 12px; }
.ntech .ft { background: var(--primary); color: var(--on); padding: 56px 0 40px; margin-top: 104px; }
.ntech .ft .w { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: end; }
.ntech .ft .lg .mono { background: var(--on); color: var(--primary); }
.ntech .ft small { opacity: 0.75; font-size: 14px; }
.ntech .soc { display: flex; gap: 10px; }
.ntech .soc i { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on) 45%, transparent); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; }
.ntech .waf { position: sticky; bottom: 22px; display: flex; justify-content: flex-end; padding-right: 22px; height: 0; overflow: visible; z-index: 5; }
.ntech .waf b { width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px -8px #0007; transform: translateY(-60px); color: #fff; }
.ntech .waf svg { width: 30px; height: 30px; }

/* Bold banner */
.ntech .hb { padding: 6px 0 0; }
.ntech .hb-in { background: var(--primary); color: var(--on); border-radius: calc(var(--r) * 1.6); padding: 72px 64px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; overflow: hidden; }
.ntech .hb-in::before { content: ''; position: absolute; right: -120px; top: -160px; width: 480px; height: 480px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ntech .hb h1 { font-size: 64px; position: relative; }
.ntech .hb .eyb { color: inherit; opacity: 0.8; }
.ntech .hb .hero-text { font-size: 19.5px; opacity: 0.88; margin: 22px 0 34px; max-width: 38ch; }
.ntech .clg { position: relative; height: 500px; }
.ntech .clg .a { position: absolute; right: 0; top: 0; width: 80%; height: 82%; border-radius: var(--r); overflow: hidden; }
.ntech .clg .b { position: absolute; left: 0; bottom: 0; width: 48%; height: 50%; border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 8px var(--primary); }
.ntech .badge { position: absolute; right: 22px; bottom: 34px; background: var(--bg); color: var(--text); border-radius: var(--r); padding: 14px 18px; font-size: 14px; box-shadow: 0 14px 30px -12px #0006; }
.ntech .badge b { display: block; font-family: var(--head); font-size: 24px; }

/* Photo first */
.ntech .hp { position: relative; height: 760px; color: #fff; }
.ntech .hp > .im { position: absolute; inset: 0; }
.ntech .hp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000000b3 0%, #00000080 40%, #00000014 72%), linear-gradient(180deg, #00000080 0%, #0000 25%, #0000 70%, #00000066 100%); }
.ntech .hp .nv { position: relative; z-index: 2; }
.ntech .hp .nv ul { color: #ffffffcc; }
.ntech .hp .nv ul li:first-child { color: #fff; }
.ntech .hp .mono { background: #fff; color: #111; }
.ntech .hp .ctr { position: relative; z-index: 2; height: calc(100% - 84px); display: grid; align-content: end; padding-bottom: 96px; }
.ntech .hp h1 { font-size: 84px; max-width: 12ch; text-shadow: 0 2px 24px #0006; }
.ntech .hp .hero-text { font-size: 20px; max-width: 44ch; margin: 22px 0 34px; color: #ffffffe6; }
.ntech .hp .bt.ol { color: #fff; }
.ntech .intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: start; }
.ntech .intro h2 { font-size: 46px; }
.ntech .intro .facts { border-color: var(--lc); }
.ntech .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ntech .row2 + .row2 { margin-top: 96px; }
.ntech .row2 .im { height: 520px; border-radius: var(--r); overflow: hidden; }
.ntech .row2.rev2 .im { order: 2; }

/* Simple & clean */
.L-clean .nv { border-bottom: 1px solid var(--lc); }
.ntech .hc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; padding: 84px 0 104px; }
.ntech .hc h1 { font-size: 80px; }
.ntech .hc .hero-text { font-size: 20px; color: var(--muted); margin: 26px 0 36px; max-width: 40ch; }
.ntech .hc .im { height: 620px; border-radius: var(--r); overflow: hidden; }
.ntech .lnk { font-weight: 700; color: var(--primary); display: inline-flex; gap: 8px; align-items: center; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.ntech .quote { text-align: center; max-width: 860px; margin: 0 auto; }
.ntech .quote p { font-family: var(--head); font-weight: var(--hw); font-size: 42px; line-height: 1.2; letter-spacing: var(--ls); }
.ntech .quote small { display: block; margin-top: 22px; color: var(--muted); font-size: 15px; }
.L-clean .gal { grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px; }
.L-clean .gal div:first-child { grid-column: auto; grid-row: auto; }
.L-clean .gal div:nth-child(n + 4) { display: none; }
.L-clean .ft { background: var(--bg); color: var(--text); border-top: 1px solid var(--lc); }
.L-clean .ft .lg .mono { background: var(--primary); color: var(--on); }

/* Catalogue */
.L-catalogue .nv .srch { flex: 1; max-width: 340px; height: 46px; border-radius: 999px; background: var(--soft); display: flex; align-items: center; padding: 0 18px; color: var(--muted); font-size: 14.5px; gap: 10px; }
.ntech .hk { display: grid; grid-template-columns: 1fr 1fr; border-radius: calc(var(--r) * 1.4); overflow: hidden; background: var(--soft); margin-top: 8px; }
.ntech .hk .tx { padding: 60px 56px; display: grid; align-content: center; }
.ntech .hk h1 { font-size: 56px; }
.ntech .hk .hero-text { color: var(--muted); font-size: 18px; margin: 18px 0 30px; max-width: 36ch; }
.ntech .hk .im { height: 420px; }
.ntech .chips { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.ntech .chips span { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--lc); font-size: 15px; font-weight: 600; }
.ntech .chips span:first-child { background: var(--text); color: var(--bg); border-color: var(--text); }
.ntech .prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ntech .pr { background: var(--surface); border: 1px solid var(--lc); border-radius: var(--r); overflow: hidden; }
.ntech .pr .im { height: 210px; }
.ntech .pr .bd { padding: 18px 18px 20px; }
.ntech .pr h3 { font-size: 20px; }
.ntech .pr p { color: var(--muted); font-size: 14.5px; margin: 4px 0 14px; }
.ntech .pr .pf { display: flex; justify-content: space-between; align-items: center; }
.ntech .pr .pf b { font-size: 18px; }
.ntech .pr .pf span { width: 38px; height: 38px; border-radius: var(--br); background: var(--primary); color: var(--on); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.ntech .promo { margin-top: 60px; border-radius: calc(var(--r) * 1.4); background: var(--primary); color: var(--on); padding: 48px 56px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.ntech .promo h3 { font-size: 34px; }


/* ---------- What a real site needs beyond the preview ---------- */

/* Links and buttons are real links here. */
.ntech a.bt, .ntech a.lg, .ntech .nv a { text-decoration: none; color: inherit; }
.ntech a.bt { color: var(--on); }
.ntech a.bt.ac { color: var(--onA); }
.ntech a.bt.wa { color: #07351c; }
.ntech a.bt.ol { color: inherit; }
.ntech .bt:hover { filter: brightness(1.06); }
.ntech a:focus-visible, .ntech button:focus-visible, .ntech input:focus-visible, .ntech textarea:focus-visible, .ntech select:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--text); color: var(--bg); padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
#main:focus { outline: none; }

/* Header and menu */
.site-header { position: relative; z-index: 20; background: var(--bg); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav .menu-list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 15.5px; color: var(--muted); }
.site-nav .menu-list a { text-decoration: none; }
.site-nav .menu-list a:hover { color: var(--text); }
.site-nav .current-menu-item > a, .site-nav [aria-current='page'] > a, .site-nav .current-menu-item { color: var(--text); font-weight: 600; }
.ntech .burger { background: none; border: 0; padding: 10px 6px; color: inherit; cursor: pointer; }
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { max-height: 56px; width: auto; }

/* One side margin for every column, so titles and text line up at every width. */
body.ntech { --gutter: 44px; }
.ntech .w { padding: 0 var(--gutter); }

/* Inner pages: the title sits on the same column as the text below it. */
.page-head { padding: clamp(40px, 6vw, 84px) 0 clamp(24px, 3vw, 40px); }
.page-head .w { max-width: 720px; box-sizing: content-box; }
.page-head.is-wide .w { max-width: 1180px; box-sizing: border-box; }

/* Short pages keep the footer at the bottom of the screen. */
body.ntech { min-height: 100vh; display: flex; flex-direction: column; }
body.ntech > main { flex: 1 0 auto; }
.page-head h1 { font-size: clamp(38px, 2rem + 3vw, 64px); max-width: 18ch; }
.sec-tight { padding-top: 0; }
/* .ntech prefix: the preview's `.ntech p { margin: 0 }` would otherwise pin paragraphs to the left edge. */
.ntech .content > * { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: content-box; }
.ntech .content > .alignwide { max-width: 1180px; }
.ntech .content > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }
/* NTECH sections run full width and centre their own column (.w). */
.ntech .content > .wp-block-group { max-width: none; padding-left: 0; padding-right: 0; box-sizing: border-box; }
.content > p, .content > ul, .content > ol { font-size: 18px; }
.ntech .content > p + p, .ntech .content > p + ul, .ntech .content > ul + p { margin-top: 1em; }
.content > h2 { font-size: clamp(28px, 1.4rem + 1.6vw, 40px); margin: 1.6em auto 0.5em; }
.content > h3 { font-size: clamp(22px, 1.1rem + 0.8vw, 28px); margin: 1.4em auto 0.4em; }
.content > p a, .content > ul a, .content > ol a { color: var(--primary); text-underline-offset: 3px; }
.content > .wp-block-image img { border-radius: var(--r); }
.content > .wp-block-image { margin-top: 2em; margin-bottom: 2em; }
.content > .wp-block-buttons .wp-block-button__link { border-radius: var(--br); padding: 14px 26px; font-weight: 700; text-decoration: none; }
.post-hero { margin: 0 auto 40px; }
.post-hero img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: var(--r); }
.ntech .post a { text-decoration: none; display: block; }

/* Search, lists, pagination */
.search-box { margin: 30px 0; }
.search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ntech input[type='search'], .ntech input[type='text'], .ntech input[type='email'], .ntech input[type='tel'], .ntech textarea, .ntech select {
    font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--lc); border-radius: calc(var(--r) * 0.5); padding: 12px 16px; min-height: 48px; box-sizing: border-box;
}
.search-form .search-field { flex: 1 1 220px; }
.ntech input[type='submit'], .ntech button[type='submit'] {
    font: 700 15.5px/1 var(--body); background: var(--primary); color: var(--on); border: 0; border-radius: var(--br); padding: 0 26px; min-height: 48px; cursor: pointer; letter-spacing: var(--bls);
}
.results { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.results a { font-family: var(--head); font-weight: var(--hw); font-size: 22px; text-decoration: none; }
.results p { color: var(--muted); margin-top: 4px; }
.nav-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 46px; }
.nav-links .page-numbers { padding: 8px 14px; border-radius: var(--br); border: 1px solid var(--lc); text-decoration: none; }
.nav-links .current { background: var(--primary); color: var(--on); border-color: var(--primary); }

/* Footer */
.ntech .ft .w { align-items: flex-start; }
.ft-id, .ft-end { display: grid; gap: 10px; }
.ft-end { justify-items: end; text-align: right; }
.ft-contact { display: flex; gap: 14px; flex-wrap: wrap; }
.ft a { color: inherit; }
.ntech .soc { list-style: none; margin: 0; padding: 0; }
.ntech .soc a { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 45%, transparent); display: grid; place-items: center; }
.ft-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.ft-links a { text-decoration: none; opacity: 0.85; }
.made-by a { font-weight: 700; }

/* Between phone and computer (Galaxy Fold unfolded, tablets): headlines scale down smoothly. */
@media (max-width: 1080px) {
    body.ntech { --gutter: 32px; }
    .ntech .h2 { font-size: clamp(34px, 1.2rem + 2.4vw, 48px); }
    .ntech .hb h1 { font-size: clamp(44px, 1.6rem + 3.6vw, 64px); }
    .ntech .hb-in { padding: 56px 44px; gap: 40px; }
    .ntech .hp h1 { font-size: clamp(52px, 2rem + 4.4vw, 84px); }
    .ntech .hc h1 { font-size: clamp(48px, 1.8rem + 4.2vw, 80px); }
    .ntech .hk h1 { font-size: clamp(38px, 1.4rem + 2.8vw, 56px); }
    .site-nav, .site-nav .menu-list { gap: 22px; }
    .ntech .prods { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    /* The full menu no longer fits: the phone menu takes over. */
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--lc); padding: 8px 20px 24px; flex-direction: column; align-items: stretch; gap: 16px; box-shadow: 0 18px 30px -24px #0006; }
    .site-nav.is-open { display: flex; }
    .site-nav .menu-list { flex-direction: column; gap: 0; font-size: 18px; }
    .site-nav .menu-list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--lc); color: var(--text); }
    .site-nav .nav-cta { justify-content: center; }
    .ntech .burger { display: flex; }
    .ntech .burger i { transition: transform 0.2s, opacity 0.2s; }
    .burger[aria-expanded='true'] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
    .burger[aria-expanded='true'] i:nth-of-type(2) { opacity: 0; }
    .burger[aria-expanded='true'] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
    .ntech .cards, .ntech .revs, .ntech .posts { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ntech .burger i { transition: none; }
}

/* ---------- Sections built from WordPress blocks (patterns/) ----------
 * The patterns use the preview's class names; these rules cover the places where
 * WordPress's block markup differs from the preview's (wrappers, figures, lists).
 */

.ntech figure { margin: 0; }
.ntech .sec-soft { background: var(--soft); }
/* Grey text stays readable on the tinted band (WCAG AA 4.5:1; the page-background mix is too faint here). */
.ntech .sec-soft { --muted: color-mix(in srgb, var(--text) 76%, var(--soft)); }
.ntech .sec-last { padding-bottom: 0; }
/* Clear WordPress's own gap above blocks; the preview's spacing (e.g. under .sh) stays. */
.ntech .sec :where(.wp-block-group) { margin-block-start: 0; }

/* Buttons: the block's wrapper stays plain; the link inside is the button. */
.ntech .wp-block-buttons.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ntech .wp-block-button.bt, .ntech .wp-block-button.lnk { height: auto; padding: 0; background: none; box-shadow: none; color: inherit; border-radius: 0; }
.ntech .wp-block-button.bt > .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: var(--br);
    font: 700 15.5px/1 var(--body); letter-spacing: var(--bls); white-space: nowrap; text-decoration: none;
    background: var(--primary); color: var(--on);
}
.ntech .wp-block-button.bt.ac > .wp-block-button__link { background: var(--accent); color: var(--onA); }
.ntech .wp-block-button.bt.ol > .wp-block-button__link { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.ntech .wp-block-button.bt.wa > .wp-block-button__link { background: #25d366; color: #07351c; }
.ntech .wp-block-button.lnk > .wp-block-button__link { background: none; padding: 0 0 3px; border-radius: 0; color: var(--primary); font-weight: 700; border-bottom: 2px solid currentColor; text-decoration: none; }
.ntech .wp-block-button__link:hover { filter: brightness(1.06); }

/* Facts under a hero or introduction */
.ntech .facts p strong { display: block; font-family: var(--head); font-size: 26px; font-weight: var(--hw); line-height: 1.1; }

/* Hero: bold banner */
.ntech .badge strong { display: block; font-family: var(--head); font-size: 24px; }
.ntech .clg figure { margin: 0; }
.ntech .clg img { height: 100%; }

/* Hero: photo first. On the home page the header sits over the photo. */
.ntech .hp { margin-top: -84px; }
.ntech .hp .ctr { height: 100%; }
.ntech .hp .eyb { color: #fff; }
.home.L-photo .site-header { background: transparent; color: #fff; }
.home.L-photo .site-header .menu-list { color: #ffffffcc; }
.home.L-photo .site-header .current-menu-item > a { color: #fff; }
.home.L-photo .site-header .mono { background: #fff; color: #111; }
.home.L-photo .site-header .custom-logo { filter: brightness(0) invert(1); }

/* Menu or price list */
.ntech .mi p:not(.t) { color: var(--muted); font-size: 15.5px; margin-top: 4px; }

/* Photo gallery (WordPress's gallery block, laid out like the preview) */
.ntech .wp-block-gallery.has-nested-images.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 230px 230px; gap: 14px; margin-top: 30px; }
.ntech .wp-block-gallery.has-nested-images.gal figure.wp-block-image { width: auto !important; margin: 0 !important; border-radius: var(--r); overflow: hidden; }
.ntech .wp-block-gallery.has-nested-images.gal figure.wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.ntech .wp-block-gallery.has-nested-images.gal figure.wp-block-image img { height: 100%; width: 100%; object-fit: cover; }
.L-clean .wp-block-gallery.has-nested-images.gal { grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px; }
.L-clean .wp-block-gallery.has-nested-images.gal figure.wp-block-image:first-child { grid-column: auto; grid-row: auto; }
.L-clean .wp-block-gallery.has-nested-images.gal figure.wp-block-image:nth-child(n + 4) { display: none; }

/* Reviews */
.ntech .revs { margin-top: 30px; }
.ntech .rev .stars, .ntech .quote .stars { color: #f2a900; letter-spacing: 3px; font-size: 17px; }
.ntech .rev p:not(.stars):not(.who) { font-size: 18px; margin: 14px 0 20px; line-height: 1.5; }
.ntech .who strong { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--soft); color: var(--primary); flex: none; }
.ntech .quote { text-align: center; max-width: 860px; margin: 0 auto; }
.ntech .quote .quote-text { font-family: var(--head); font-weight: var(--hw); font-size: 42px; line-height: 1.2; letter-spacing: var(--ls); margin-top: 18px; }
.ntech .quote .quote-who { display: block; margin-top: 22px; color: var(--muted); font-size: 15px; }

/* Questions and answers (native expanding answers) */
.ntech .qs .wp-block-details { border-bottom: 1px solid var(--lc); padding: 22px 0; }
.ntech .qs .wp-block-details:first-child { border-top: 1px solid var(--lc); }
.ntech .qs summary { display: flex; justify-content: space-between; gap: 20px; font-weight: 600; font-size: 18px; cursor: pointer; list-style: none; }
.ntech .qs summary::-webkit-details-marker { display: none; }
.ntech .qs summary::after { content: '+'; color: var(--primary); font-size: 24px; line-height: 1; font-weight: 400; }
.ntech .qs details[open] summary::after { content: '\2212'; }
.ntech .qs details p { color: var(--muted); font-size: 16px; margin-top: 10px; }

/* Latest news (WordPress's latest posts block) */
.ntech .wp-block-latest-posts.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; padding: 0; margin: 30px 0 0; }
.ntech .wp-block-latest-posts.posts li { display: flex; flex-direction: column; margin: 0; }
.ntech .wp-block-latest-posts__featured-image { order: -2; height: 200px; border-radius: var(--r); overflow: hidden; margin: 0 0 16px; }
.ntech .wp-block-latest-posts__featured-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ntech .wp-block-latest-posts__post-date { order: -1; color: var(--muted); font-size: 13.5px; }
.ntech .wp-block-latest-posts__post-title { font-family: var(--head); font-weight: var(--hw); letter-spacing: var(--ls); font-size: 22px; line-height: 1.15; margin-top: 6px; text-decoration: none; }

/* Visit us (its heading is an h2 for a correct outline, sized like the preview's h3) */
.ntech .info .visit-title { font-size: 34px; }
.ntech .visit-photo { min-height: 430px; height: 100%; }
.ntech .info { align-content: start; }
.ntech .hrs p { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px dashed var(--lc); padding-bottom: 6px; }
.ntech .hrs strong { font-weight: 600; }

/* Products with prices */
.ntech .prods { margin-top: 30px; }
.ntech .pr .im { height: 210px; }
.ntech .pr .pf strong { font-size: 18px; }

/* Events */
.ntech .evs { margin-top: 30px; border-top: 1px solid var(--lc); }
.ntech .ev { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--lc); align-items: start; }
.ntech .ev-date { background: var(--primary); color: var(--on); border-radius: calc(var(--r) * 0.6); padding: 10px 14px; font-weight: 700; text-align: center; }
.ntech .ev h3 { font-size: 24px; margin-bottom: 6px; }
.ntech .ev p { color: var(--muted); }

/* ---------- Features (inc/features.php, inc/forms.php) ---------- */

/* Map: the preview's drawn map is the placeholder until the visitor asks for Google Maps.
   With the map on, it takes the photo's place in "Visit us". */
.ntech .visit:has(.ntech-map) .visit-photo { display: none; }
.ntech .map.ntech-map { min-height: 430px; height: 100%; overflow: hidden; }
/* The buttons sit just under the pin (the pin is at 40% from the top). */
.ntech .map-actions { position: absolute; left: 41%; top: calc(40% + 96px); transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; flex-wrap: nowrap; justify-content: center; }
.ntech .map-actions button, .ntech .map-actions a {
    font: 700 14.5px/1 var(--body); height: 44px; padding: 0 20px; border-radius: var(--br); display: inline-flex; align-items: center;
    border: 0; cursor: pointer; text-decoration: none; background: var(--primary); color: var(--on); box-shadow: 0 8px 18px -8px #0007;
    white-space: nowrap;
}
.ntech .map-actions a { background: var(--surface); color: var(--text); }
.ntech .map-note { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3; text-align: center; font-size: 12.5px; color: var(--text); }
.ntech .map-note { margin: 0 auto; max-width: max-content; background: color-mix(in srgb, var(--bg) 85%, transparent); padding: 4px 10px; border-radius: 999px; }
.ntech .ntech-map.is-loaded > :not(iframe) { display: none; }
.ntech .ntech-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* Forms */
.ntech .ntech-form { display: grid; gap: 6px; }
.ntech .ntech-form label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.ntech .ntech-form input, .ntech .ntech-form textarea { width: 100%; background: var(--bg); }
.ntech .ntech-form textarea { min-height: 110px; resize: vertical; }
.ntech .ntech-form button[type='submit'] { margin-top: 10px; justify-self: start; }
.ntech .form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ntech .form-note { font-size: 12.5px; color: var(--muted); }
.ntech .form-status { padding: 12px 14px; border-radius: calc(var(--r) * 0.5); font-weight: 600; font-size: 15px; }
.ntech .form-status.is-sent { background: color-mix(in srgb, #2c8a62 16%, var(--surface)); }
.ntech .form-status.is-error { background: color-mix(in srgb, #b8423a 16%, var(--surface)); }
.ntech .info .ntech-form + .ntech-form { margin-top: 18px; }

/* The WhatsApp button that stays in the corner */
.ntech .waf {
    position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 60px; height: 60px; padding: 0; border-radius: 50%;
    background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px #0007; justify-content: center;
}
.ntech .waf svg { width: 30px; height: 30px; }
.ntech .waf:hover { filter: brightness(1.06); }

/* Order on WhatsApp on each product card, and the review links */
.ntech .order-row { margin-top: 12px; }
.ntech .wp-block-button.bt.order > .wp-block-button__link { height: 40px; padding: 0 16px; font-size: 14px; }
.ntech .review-links { margin-top: 30px; }
.ntech .quote .review-links { justify-content: center; }
.ntech .review-links:empty, .ntech .order-row:empty { display: none; }

/* Catalogue header search (a real search of the site) */
.srch { flex: 1; max-width: 340px; margin: 0; }
.srch input[type='search'] { width: 100%; height: 46px; min-height: 0; border-radius: 999px; background: var(--soft); border: 0; padding: 0 18px; font-size: 14.5px; }

@media (max-width: 1080px) {
    .ntech .wp-block-gallery.has-nested-images.gal { grid-template-rows: 190px 190px; }
    .ntech .quote .quote-text { font-size: 34px; }
}

@media (max-width: 860px) {
    .ntech .wp-block-latest-posts.posts { grid-template-columns: 1fr 1fr; }
    .srch { display: none; }
}

@media (max-width: 700px) {
    .ntech .wp-block-latest-posts.posts { grid-template-columns: 1fr; }
    .ntech .wp-block-gallery.has-nested-images.gal { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 130px 130px; gap: 10px; }
    .L-clean .wp-block-gallery.has-nested-images.gal { grid-template-rows: 170px 170px; }
    .L-clean .wp-block-gallery.has-nested-images.gal figure.wp-block-image:first-child { grid-column: span 2; }
    .ntech .hp { margin-top: -66px; }
    .ntech .visit-photo { min-height: 260px; }
    .ntech .quote .quote-text { font-size: 27px; }
    .ntech .ev { grid-template-columns: 1fr; gap: 12px; }
    .ntech .ev-date { justify-self: start; }
    .ntech .facts p strong { font-size: 21px; }
    .ntech .map.ntech-map { min-height: 360px; }
    .ntech .info .visit-title { font-size: 27px; }
    .ntech .wp-block-button.bt.order > .wp-block-button__link { height: 36px; padding: 0 12px; font-size: 13px; white-space: normal; text-align: center; }
    .ntech .map-actions { left: 50%; top: auto; bottom: 52px; }
    .ntech .waf { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
/* Phones (the preview's 390px design) */
@media (max-width: 700px) {
    body.ntech { font-size: 16px; }
    .ntech .w { padding: 0 20px; }
    .ntech .sec { padding: 64px 0; }
    .ntech .h2 { font-size: 32px; }
    .ntech .lead { font-size: 16.5px; }
    .ntech .nv { height: 66px; }
    .ntech .nv > ul,
    .ntech .nv > .bt,
    .L-catalogue .nv .srch { display: none; }
    .ntech .burger { display: flex; }
    .ntech .lg { font-size: 19px; }
    .ntech .mono { width: 34px; height: 34px; font-size: 15px; }
    .ntech .bt { height: 48px; padding: 0 20px; font-size: 15px; }
    .ntech .facts { gap: 20px; flex-wrap: wrap; }
    .ntech .facts b { font-size: 21px; }
    .ntech .cards,
    .ntech .revs,
    .ntech .posts,
    .ntech .faq,
    .ntech .visit,
    .ntech .menu { grid-template-columns: 1fr; }
    .ntech .card .im { height: 210px; }
    .ntech .sh { display: block; margin-bottom: 28px; }
    .ntech .gal { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 130px 130px; gap: 10px; }
    .ntech .faq { gap: 10px; }
    .ntech .map { min-height: 260px; }
    .ntech .info { padding: 28px; }
    .ntech .info h3 { font-size: 27px; }
    .ntech .ft { margin-top: 64px; }
    .ntech .hb-in { grid-template-columns: 1fr; padding: 40px 24px 28px; gap: 32px; border-radius: var(--r); }
    .ntech .hb h1 { font-size: 42px; }
    .ntech .hb .hero-text { font-size: 17px; margin: 16px 0 26px; }
    .ntech .clg { height: 330px; }
    .ntech .hb { padding: 0; }
    .ntech .hp { height: 640px; }
    .ntech .hp h1 { font-size: 48px; }
    .ntech .hp .hero-text { font-size: 17px; }
    .ntech .hp .ctr { padding-bottom: 48px; }
    .ntech .intro,
    .ntech .row2 { grid-template-columns: 1fr; gap: 26px; }
    .ntech .intro h2 { font-size: 31px; }
    .ntech .row2 .im { height: 300px; }
    .ntech .row2.rev2 .im { order: 0; }
    .ntech .row2 + .row2 { margin-top: 56px; }
    .ntech .hc { grid-template-columns: 1fr; gap: 34px; padding: 40px 0 64px; }
    .ntech .hc h1 { font-size: 46px; }
    .ntech .hc .im { height: 380px; }
    .ntech .hc .hero-text { font-size: 17px; }
    .ntech .quote p { font-size: 27px; }
    .L-clean .gal { grid-template-columns: 1fr 1fr; grid-template-rows: 170px 170px; }
    .L-clean .gal div:first-child { grid-column: span 2; }
    .ntech .hk { grid-template-columns: 1fr; }
    .ntech .hk .tx { padding: 34px 24px; }
    .ntech .hk h1 { font-size: 36px; }
    .ntech .hk .im { height: 230px; order: -1; }
    .ntech .prods { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ntech .pr .im { height: 130px; }
    .ntech .pr .bd { padding: 12px; }
    .ntech .pr h3 { font-size: 16px; }
    .ntech .pr p { display: none; }
    .ntech .promo { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
    .ntech .promo h3 { font-size: 26px; }
}


@media (max-width: 700px) {
    body.ntech { --gutter: 20px; }
    .ntech .w { padding: 0 var(--gutter); }
    .site-nav .nav-cta { display: inline-flex; }
    .ft-end { justify-items: start; text-align: left; }
}