/*
Theme Name: Ngọc Tuệ An Atelier
Author: Ngọc Tuệ An Website Team
Description: Premium jadeite product catalog and consultation website. No cart, checkout or online payment.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ngoc-tue-an
*/
/* Locally hosted Vietnamese and Latin font subsets. */
/* Be Vietnam Pro: vietnamese */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Be Vietnam Pro: latin */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Be Vietnam Pro: vietnamese */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Be Vietnam Pro: latin */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Be Vietnam Pro: vietnamese */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/be-vietnam-pro-600-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; }
/* Be Vietnam Pro: latin */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Be Vietnam Pro: vietnamese */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/be-vietnam-pro-700-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; }
/* Be Vietnam Pro: latin */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/be-vietnam-pro-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; }
/* Noto Serif: vietnamese */
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/noto-serif-400-700-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; }
/* Noto Serif: latin */
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/noto-serif-400-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; }
:root{--ink:var(--nta-color-ink);--slate:var(--nta-color-slate);--slate-dark:var(--nta-color-slate-dark);--blue:var(--nta-color-blue);--pale:var(--nta-color-pale);--cream:var(--nta-color-cream);--white:var(--nta-color-white);--muted:var(--nta-color-muted);--jade:var(--nta-color-jade);--line:var(--nta-color-line);--serif:var(--nta-font-family-heading);--sans:var(--nta-font-family-body);--max:var(--nta-layout-content-max);--ease:var(--nta-motion-ease)}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}::selection{background:#c0d6ce;color:var(--ink)}:focus-visible{outline:2px solid var(--jade);outline-offset:3px}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-weight:400}svg{display:block}button,select,input,textarea{border-radius:0}.container{max-width:var(--max);margin:0 auto;padding-inline:28px}.section{padding:100px 0}.section-sm{padding:70px 0}.hidden{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eyebrow{font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.23em;text-transform:uppercase;color:var(--jade)}.eyebrow--light{color:#dce8e9}.display{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.21}.title-xl{font-size:clamp(42px,5.5vw,82px)}.title-lg{font-size:clamp(32px,3.7vw,54px)}.title-md{font-size:clamp(27px,2.7vw,40px)}.body-muted{color:var(--muted)}.arrow-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid currentColor;transition:gap .25s}.arrow-link:hover{gap:20px}.arrow-link svg{width:17px;height:17px}.btn{border:1px solid var(--slate);background:var(--slate);color:var(--white);min-height:51px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:14px 25px;font-size:12px;letter-spacing:.10em;font-weight:700;text-transform:uppercase;transition:background .23s,border-color .23s,transform .23s;line-height:1.4}.btn:hover{background:var(--slate-dark);transform:translateY(-1px)}.btn svg{height:17px;width:17px}.btn-outline{background:transparent;color:var(--slate)}.btn-outline:hover{background:var(--slate);color:white}.btn-light{background:var(--white);border-color:var(--white);color:var(--slate)}.btn-light:hover{background:#e3ecf0;border-color:#e3ecf0;color:var(--slate)}.button-reset{background:none;border:0;padding:0;color:inherit}.divider{width:100%;height:1px;background:var(--line)}
/* Header */
.site-top{background:#40586b;color:#eef5f5;text-align:center;padding:7px 14px;font-size:10px;font-weight:650;letter-spacing:.20em;text-transform:uppercase}.site-header{position:relative;z-index:80;background:rgba(251,251,249,.96);border-bottom:1px solid #e9eeeb}.site-header.is-stuck{position:sticky;top:0;box-shadow:0 12px 34px rgba(31,57,58,.05)}.header-inner{height:89px;display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center}.main-nav{display:flex;align-items:center;gap:29px}.main-nav a{font-size:12px;font-weight:600;transition:color .2s;white-space:nowrap}.main-nav a:hover,.main-nav .current-menu-item>a,.nav-active{color:var(--jade)!important}.header-right{display:flex;justify-content:flex-end;align-items:center;gap:24px}.header-right .nav-quick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650}.header-right svg{width:18px;height:18px}.brand{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:5px;min-width:170px}.brand-line{display:flex;align-items:center;gap:10px}.brand-name{font-family:var(--serif);font-size:20px;white-space:nowrap;letter-spacing:-.06em;color:var(--slate-dark)}.brand-sub{font-size:7px;letter-spacing:.36em;color:var(--slate);text-transform:uppercase;font-weight:700}.brand-seal{position:relative;width:24px;height:24px;flex:0 0 24px;transform:rotate(45deg)}.brand-seal:before,.brand-seal:after{content:'';position:absolute;border:1.5px solid #648b84;border-radius:14px 1px 14px 1px;width:15px;height:15px;left:5px;top:5px}.brand-seal:after{transform:rotate(90deg)}.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle svg{height:24px;width:24px}.mobile-menu{display:none}
/* hero */
.hero{background:var(--blue);overflow:hidden;position:relative}.hero:before{content:'';position:absolute;width:470px;height:470px;border:1px solid #e7f2f39c;border-radius:50%;left:-220px;top:-220px}.hero-shell{min-height:620px;display:grid;grid-template-columns:52% 48%;position:relative}.hero-copy{padding:118px 8% 100px 0;position:relative;z-index:2}.hero-copy .eyebrow{color:#3d6570}.hero h1{margin-top:29px;font-size:clamp(42px,4.2vw,69px);line-height:1.28;color:var(--slate-dark);max-width:640px}.hero h1 em{font-style:normal;color:var(--white);text-shadow:0 1px 1px #728f9a60}.hero-description{max-width:440px;font-size:14px;line-height:1.9;color:#4b6570;margin-top:27px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}.hero-actions .btn{min-width:194px}.hero-visual{min-height:620px;position:relative;display:flex;align-items:center;justify-content:center}.hero-photo{position:absolute;inset:37px -65px 0 0;background:linear-gradient(135deg,#c5d8d8,#d6e2e2);clip-path:polygon(16% 0,100% 0,100% 100%,0% 100%);overflow:hidden}.hero-photo img{height:100%;width:100%;object-fit:cover;object-position:50% 47%}.hero-vertical{position:absolute;right:-37px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-size:10px;letter-spacing:.38em;color:#f7f9f7;font-weight:700}.hero-bottom{position:absolute;right:0;bottom:28px;background:rgba(252,252,249,.90);padding:19px 23px;width:230px;box-shadow:0 16px 30px #37515b10}.hero-bottom span{display:block;font-size:10px;letter-spacing:.22em;color:var(--jade);text-transform:uppercase;font-weight:700}.hero-bottom b{display:block;font-family:var(--serif);font-size:16px;margin-top:4px;font-weight:400}.hero-vertbar{position:absolute;top:0;bottom:0;right:0;width:1px;background:#d4e4e5}
/* sections */
.intro-row{display:flex;justify-content:space-between;gap:55px;align-items:end;margin-bottom:38px}.intro-row .eyebrow{margin-bottom:15px}.intro-row p{max-width:375px;color:var(--muted);font-size:13px;line-height:1.9;padding-bottom:6px}.section-center{text-align:center}.section-center .eyebrow{margin-bottom:15px}.section-center .section-desc{max-width:520px;margin:20px auto 0;color:var(--muted);font-size:13px;line-height:1.9}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.category-card{position:relative;display:block;overflow:hidden;background:#e5ece8}.category-image{aspect-ratio:4/4.9;overflow:hidden}.category-card img{height:100%;width:100%;object-fit:cover;transition:transform .65s var(--ease)}.category-card:hover img,.product-card:hover img{transform:scale(1.055)}.category-overlay{position:absolute;bottom:0;left:0;right:0;min-height:113px;padding:44px 22px 18px;background:linear-gradient(transparent,rgba(21,47,43,.62));color:var(--white);display:flex;justify-content:space-between;align-items:flex-end}.category-overlay h3{font-family:var(--serif);font-size:20px}.category-overlay small{display:block;font-size:10px;letter-spacing:.08em;margin-top:3px;color:#e2eae6}.category-overlay svg{height:19px;width:19px;flex-shrink:0}.category-count{font-size:10px;letter-spacing:.12em;color:var(--jade)}
.featured-section{background:#f0f4f2}.featured-head{text-align:center;margin-bottom:45px}.featured-head .eyebrow{margin-bottom:14px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:33px 19px}.product-card{min-width:0}.product-image{display:block;position:relative;background:#e5ece8;overflow:hidden;aspect-ratio:4/4.85}.product-image img{height:100%;width:100%;object-fit:cover;transition:transform .55s var(--ease)}.product-tag{position:absolute;left:14px;top:14px;color:var(--slate);background:#ffffffd9;padding:5px 8px;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}.product-quick{position:absolute;bottom:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;background:#fffc;border:0;opacity:0;transform:translateY(8px);transition:.2s}.product-card:hover .product-quick,.product-quick:focus-visible{opacity:1;transform:translateY(0)}.product-quick svg{width:18px;height:18px;color:var(--slate)}.product-info{padding-top:15px}.product-type{color:#728780;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.product-name{font-family:var(--serif);font-size:16px;line-height:1.55;margin:6px 0;min-height:25px}.product-name a:hover{color:var(--jade)}.product-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.product-bottom span{font-size:11px;color:var(--muted)}.product-bottom button,.product-bottom a{background:none;border:0;padding:0;font-size:10px;color:var(--slate);font-weight:700;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px}.center-actions{text-align:center;margin-top:41px}
.story-section{display:grid;grid-template-columns:47% 53%;max-width:100%;overflow:hidden;background:#f9f8f5}.story-picture{min-height:520px;background:#d5e3df;position:relative}.story-picture img{width:100%;height:100%;object-fit:cover;object-position:center}.story-picture:after{content:'N  T  A';position:absolute;bottom:22px;left:27px;font-size:11px;font-weight:700;letter-spacing:.45em;color:#fbfdf5}.story-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:90px clamp(28px,8.5vw,140px)}.story-content h2{margin:21px 0 24px;max-width:530px}.story-content p{color:var(--muted);line-height:2;max-width:450px;font-size:14px}.story-content .arrow-link{margin-top:30px}.service-strip{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr)}.service{padding:37px 32px;display:flex;gap:19px;align-items:flex-start;border-right:1px solid var(--line)}.service:first-child{padding-left:0}.service:last-child{border:0}.service svg{width:26px;height:26px;flex:0 0 26px;color:#6a9691}.service h3{font-size:13px;font-weight:700;margin-bottom:4px}.service p{font-size:11px;line-height:1.7;color:var(--muted)}.contact-callout{background:var(--slate);color:var(--white);position:relative;overflow:hidden}.contact-callout:after{content:'N';font-family:var(--serif);font-size:390px;position:absolute;right:6%;top:-180px;color:var(--white);opacity:.035;pointer-events:none}.callout-inner{padding-top:86px;padding-bottom:87px;display:flex;justify-content:space-between;align-items:center;gap:60px;position:relative;z-index:2}.callout-inner h2{font-size:clamp(31px,3.4vw,50px);line-height:1.35;max-width:760px;margin-top:13px}.callout-inner .btn{flex:0 0 auto}
/* footer */
.site-footer{background:#e9f0ef;padding-top:77px}.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:69px}.footer-brand{align-items:flex-start}.footer-brand .brand-line .brand-name{font-size:24px}.footer-brand .brand-sub{letter-spacing:.33em;margin-left:2px}.footer-text{color:#71817f;margin-top:24px;font-size:12px;max-width:290px;line-height:1.9}.footer-heading{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;margin:8px 0 20px}.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}.footer-links a,.footer-links li{font-size:12px;line-height:1.6;color:#60747a}.footer-links a:hover{color:var(--jade)}.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.social-links a{display:grid;place-items:center;border:1px solid #becac8;width:34px;height:34px;color:var(--slate);transition:color .2s,border-color .2s,background-color .2s}.social-links svg{width:17px;height:17px;display:block}.social-links a:hover{color:var(--white);background:var(--slate);border-color:var(--slate)}.footer-bottom{border-top:1px solid #cbd9d6;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#61777a;font-size:10px;letter-spacing:.04em}.floating-contact{position:fixed;z-index:60;right:22px;bottom:28px;display:flex;flex-direction:column;gap:9px}.float-action{background:var(--white);color:var(--slate);box-shadow:0 6px 24px #263d4133;display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:50%;border:1px solid #dfe8e4;transition:transform .2s}.float-action:hover{transform:translateY(-3px)}.float-action svg{width:21px;height:21px}.float-action--zalo{background:#2f7bbd;color:var(--white);border-color:#2f7bbd;font-weight:900;font-size:14px}
/* page heading */
.page-banner{background:#e6eff0;padding:73px 0;text-align:center}.breadcrumbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:10px;color:#779099;letter-spacing:.13em;text-transform:uppercase;margin-bottom:17px}.breadcrumbs a:hover{color:var(--jade)}.page-banner h1{margin:0}.page-banner .subtitle{margin:14px auto 0;max-width:560px;color:#667982;font-size:13px}.catalog-section{padding-top:57px;padding-bottom:110px}.catalog-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.catalog-count{font-size:12px;color:var(--muted)}.catalog-search{max-width:340px;min-width:250px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #b7c8c4}.catalog-search input{width:100%;border:0;outline:none;background:transparent;font-size:12px;padding:10px 0;color:var(--ink)}.catalog-search button{border:0;background:transparent;padding:9px;color:var(--slate)}.catalog-search svg{height:18px;width:18px}.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:34px}.filter-row label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}.filter-row select{appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23465d71'/%3E%3C/svg%3E") no-repeat right 13px center;border:1px solid #d6e1dc;min-width:160px;padding:11px 32px 11px 13px;color:var(--slate);font-size:12px;border-radius:0}.filter-row .clear-filter{font-size:11px;text-decoration:underline;text-underline-offset:3px;margin-left:8px;color:var(--slate)}.filter-row .btn{min-height:41px;padding:11px 15px;font-size:10px}.empty-state{text-align:center;padding:100px 20px;background:#eff4f1}.empty-state h3{font-family:var(--serif);font-size:25px;margin-bottom:12px}.empty-state p{color:var(--muted);margin-bottom:20px}.pagination{margin-top:50px;display:flex;align-items:center;justify-content:center;gap:8px}.pagination .page-numbers{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d4dfda;font-size:12px}.pagination .current{background:var(--slate);color:var(--white)}
/* detail */
.detail-wrap{padding-top:38px;padding-bottom:95px}.detail-breadcrumb{justify-content:flex-start;margin-bottom:31px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,6vw,92px);align-items:start}.detail-gallery{min-width:0}.gallery-main{position:relative;background:#e8efec;aspect-ratio:1/1.16;overflow:hidden;display:grid;place-items:center}.gallery-main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}.gallery-zoom{position:absolute;right:16px;bottom:16px;width:44px;height:44px;background:#ffffffe8;border:0;display:grid;place-items:center}.gallery-zoom svg{width:20px;height:20px}.gallery-thumbs{display:flex;gap:12px;margin-top:13px;overflow:auto}.gallery-thumb{border:1px solid transparent;padding:0;background:#e6eeeb;width:91px;height:106px;flex:0 0 auto}.gallery-thumb.active{border:2px solid var(--jade)}.gallery-thumb img{width:100%;height:100%;object-fit:cover}.detail-info{padding-top:28px}.detail-info h1{font-size:clamp(31px,3.4vw,48px);margin:12px 0 12px}.sku{font-size:11px;letter-spacing:.1em;color:var(--muted)}.detail-summary{color:#6d7d7c;font-size:14px;margin:25px 0 29px;line-height:1.9}.detail-specs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;display:grid;gap:13px}.detail-spec{display:grid;grid-template-columns:145px 1fr;gap:16px;font-size:12px}.detail-spec dt{color:var(--muted)}.detail-spec dd{margin:0;font-weight:600}.detail-cta{display:flex;gap:11px;margin-top:27px;align-items:center;flex-wrap:wrap}.detail-cta .btn{min-width:225px}.detail-benefits{display:grid;gap:11px;margin-top:26px}.detail-benefits span{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}.detail-benefits svg{width:15px;height:15px;color:var(--jade)}.detail-certificate{margin-top:28px;font-size:12px}.detail-certificate a{display:inline-flex;color:var(--slate);text-decoration:underline;gap:8px}.related-section{padding-top:35px;padding-bottom:108px}.related-section .intro-row{margin-bottom:35px}
/* about */
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about-intro h2{margin:15px 0 24px}.about-intro p{color:var(--muted);line-height:2;font-size:14px;margin-bottom:18px}.about-image{background:#dce8e3;aspect-ratio:5/5.8}.about-image img{width:100%;height:100%;object-fit:cover}.process-section{background:#edf3f1}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}.process-item{border-top:1px solid #bdcbc8;padding-top:28px}.process-num{color:var(--jade);font-family:var(--serif);font-size:27px}.process-item h3{font-family:var(--serif);font-size:20px;margin:22px 0 8px}.process-item p{font-size:12px;color:var(--muted);line-height:1.9}.commit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:42px}.commit-item{background:var(--white);padding:35px 31px}.commit-item svg{width:27px;height:27px;color:var(--jade);margin-bottom:25px}.commit-item h3{font-family:var(--serif);font-size:18px;margin-bottom:10px}.commit-item p{color:var(--muted);font-size:12px}
/* contact */
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:90px;align-items:start}.contact-copy h2{margin:18px 0 20px}.contact-copy>p{color:var(--muted);max-width:410px;font-size:13px;line-height:1.95}.contact-list{display:grid;gap:26px;margin-top:45px}.contact-list-item{display:flex;align-items:flex-start;gap:17px}.contact-list-item svg{width:22px;height:22px;color:var(--jade);flex:0 0 22px}.contact-list-item b{display:block;font-size:12px;letter-spacing:.02em;margin-bottom:4px}.contact-list-item a,.contact-list-item p{font-size:13px;color:var(--muted);line-height:1.7}.contact-form{background:var(--white);padding:44px;box-shadow:0 12px 42px #1b37330a}.contact-form h3{font-family:var(--serif);font-size:25px;margin-bottom:13px}.contact-form .form-intro{font-size:12px;color:var(--muted);margin-bottom:27px}.form-fields{display:grid;gap:18px}.form-group label{display:block;font-weight:650;font-size:11px;margin-bottom:8px}.form-group label .required{color:#a04d51}.form-group input,.form-group textarea{background:#f6f9f7;border:1px solid #e5ede8;padding:13px 14px;width:100%;font-size:12px;color:var(--ink);outline:none;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:#8baea7}.form-group textarea{min-height:106px;resize:vertical}.form-consent{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:11px;line-height:1.8}.form-consent input{flex:0 0 16px;margin-top:4px;accent-color:var(--jade)}.contact-form .btn{width:100%;margin-top:4px}.form-message{margin:0 0 21px;padding:12px 15px;font-size:12px}.form-message.ok{background:#e8f6ef;color:#246047}.form-message.error{background:#fff0f1;color:#9d3c45}.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
/* dialog */
.consult-dialog{border:0;box-shadow:0 22px 100px #142b3460;padding:0;width:min(94vw,520px);max-height:92vh;overflow:auto;background:var(--white)}.consult-dialog::backdrop{background:rgba(24,46,52,.68);backdrop-filter:blur(3px)}.dialog-inner{padding:40px}.dialog-close{position:absolute;right:18px;top:17px;border:0;background:transparent;padding:8px;color:var(--slate)}.dialog-close svg{width:22px;height:22px}.dialog-inner h2{font-family:var(--serif);font-size:28px;margin:12px 0}.dialog-inner p{color:var(--muted);font-size:12px;margin-bottom:26px}.dialog-product{background:#eef3f0;padding:12px 14px;color:#38565c;font-size:12px;margin-bottom:18px;display:none}.dialog-product.show{display:block}.lightbox{position:fixed;inset:0;z-index:160;background:#10272be8;display:none;align-items:center;justify-content:center;padding:60px 38px}.lightbox.is-open{display:flex}.lightbox img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.lightbox-close{position:absolute;right:22px;top:20px;background:none;border:0;color:var(--white);padding:8px}.lightbox-close svg{width:27px;height:27px}
/* smaller */
@media(max-width:1150px){.main-nav{gap:15px}.header-inner{gap:14px}.header-right{gap:12px}.header-right .nav-quick{font-size:0}.header-right .nav-quick svg{width:20px;height:20px}.footer-grid{gap:25px}.story-content{padding:70px 8vw}}
@media(max-width:920px){.site-top{font-size:9px}.header-inner{height:72px;grid-template-columns:1fr auto 1fr}.main-nav,.header-right .desktop-consult{display:none}.menu-toggle{display:block}.brand{min-width:auto}.header-right .nav-quick{font-size:0}.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);box-shadow:0 18px 35px #2d514a1d;padding:25px 28px}.mobile-menu.open{display:block}.mobile-menu a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.hero-shell{min-height:530px}.hero-copy{padding-top:92px;padding-bottom:75px}.hero-visual{min-height:530px}.hero-photo{inset:36px -70px 0 -20px}.hero h1{font-size:clamp(39px,5vw,58px)}.category-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-grid{gap:15px}.story-content{padding:60px 7vw}.story-picture{min-height:470px}.footer-grid{grid-template-columns:1.5fr 1fr;row-gap:36px}.contact-grid{gap:40px}}
@media(max-width:680px){.container{padding-inline:20px}.section{padding:68px 0}.section-sm{padding:52px 0}.site-top{font-size:8px;letter-spacing:.10em}.header-inner{height:70px}.brand-name{font-size:17px}.brand-seal{width:19px;height:19px;flex-basis:19px}.brand-seal:before,.brand-seal:after{left:3px;top:3px;width:14px;height:14px}.brand-sub{font-size:6px}.hero-shell{display:flex;flex-direction:column;min-height:0}.hero-copy{padding:66px 0 47px}.hero h1{font-size:clamp(38px,10vw,51px);max-width:470px;margin-top:20px}.hero-description{margin-top:18px;font-size:13px}.hero-actions{margin-top:26px;gap:10px}.hero-actions .btn{min-width:0;font-size:10px;min-height:46px;padding:12px 16px}.hero-visual{min-height:430px;margin:0 -20px}.hero-photo{inset:0 0 0 0;clip-path:none}.hero-photo img{object-position:50% 54%}.hero-bottom{bottom:19px;right:20px}.hero-vertical{display:none}.intro-row{display:block;margin-bottom:27px}.intro-row h2{margin-bottom:14px}.intro-row p{font-size:12px}.title-lg{font-size:clamp(32px,8vw,44px)}.title-md{font-size:30px}.category-grid{gap:10px}.category-overlay{padding:35px 12px 12px;min-height:85px}.category-overlay h3{font-size:15px}.category-overlay small{font-size:9px}.category-overlay svg{width:15px}.featured-head{margin-bottom:25px}.product-grid{gap:24px 10px}.product-tag{top:9px;left:9px;font-size:7px;padding:4px 6px}.product-image{aspect-ratio:4/4.9}.product-quick{display:none}.product-type{font-size:8.5px}.product-name{font-size:13px;margin:3px 0}.product-info{padding-top:10px}.product-bottom span,.product-bottom button,.product-bottom a{font-size:9px}.product-bottom{gap:3px}.story-section{grid-template-columns:1fr}.story-picture{min-height:390px}.story-content{padding:55px 23px 65px}.story-content p{font-size:13px}.services-grid{grid-template-columns:1fr}.service{padding:23px 0;border-right:0;border-bottom:1px solid var(--line)}.service:first-child{padding:23px 0}.service:last-child{border:0}.callout-inner{padding-top:62px;padding-bottom:65px;display:block}.callout-inner h2{font-size:31px;margin-bottom:27px}.footer-grid{grid-template-columns:1fr 1fr;gap:36px 19px;padding-bottom:43px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.site-footer{padding-top:52px}.footer-bottom{align-items:start;flex-direction:column;gap:7px}.floating-contact{bottom:18px;right:15px}.float-action{width:43px;height:43px}.page-banner{padding:53px 0}.page-banner .subtitle{font-size:12px}.catalog-section{padding-top:35px;padding-bottom:68px}.catalog-tools{align-items:start;display:block}.catalog-search{max-width:100%;margin-top:13px}.filter-row{gap:9px;margin-top:22px}.filter-row label{width:100%}.filter-row select{flex:1;min-width:calc(50% - 5px);font-size:11px}.filter-row .btn{flex:1}.detail-wrap{padding-top:26px;padding-bottom:52px}.detail-grid{grid-template-columns:1fr;gap:20px}.detail-info{padding-top:12px}.detail-info h1{font-size:31px}.detail-summary{margin:17px 0}.detail-spec{grid-template-columns:120px 1fr;gap:8px}.detail-cta .btn{width:100%;min-width:0}.gallery-main{aspect-ratio:1/1.1}.gallery-thumb{width:70px;height:80px}.related-section{padding:22px 0 70px}.about-intro{grid-template-columns:1fr;gap:28px}.about-image{order:-1;aspect-ratio:5/4}.process-grid,.commit-grid{grid-template-columns:1fr;gap:23px;margin-top:27px}.process-item{padding-top:19px}.process-item h3{margin-top:10px}.contact-grid{grid-template-columns:1fr;gap:34px}.contact-form{padding:26px 22px}.dialog-inner{padding:30px 22px}.dialog-inner h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Official brand wordmark, extracted without redrawing from client-supplied logo. */
.brand-img{width:104px;height:70px;object-fit:contain}.footer-logo{width:122px;height:84px;object-fit:contain;object-position:left center}.header-left{min-width:0}.brand{min-width:0}.header-right .btn{min-height:43px;padding:12px 17px;font-size:10px}.page-banner{background:#eaf0f1}.hero-photo img{object-position:center 39%}.story-picture img{object-position:center 49%}.skip-link:focus{position:fixed!important;z-index:250;top:6px;left:6px;width:auto;height:auto;clip:auto;background:var(--white);padding:12px 16px}.mobile-consult{padding:16px 0;font-weight:700;letter-spacing:.05em}.content-page{min-height:30vh}.product-name a{overflow-wrap:anywhere}.category-card:focus-visible .category-overlay{background:#254a4caa}
@media(max-width:920px){.brand-img{width:92px;height:62px}}
@media(max-width:680px){.brand-img{width:83px;height:56px}.header-right{gap:0}.header-inner{gap:9px}.hero-photo img{object-position:center 40%}.hero-bottom{width:205px}.category-image{aspect-ratio:4/5.4}.category-card img{object-position:center}}

.site-header{position:sticky;top:0}.hero:before{pointer-events:none}@media(max-width:680px){.hero:before{display:none}}

/* ------------------------------------------------------------------
   NTA MINIMAL EDITORIAL - V2
   Direction: Hermit Jade editorial imagery, Kathy Jade whitespace,
   The Jade Source catalog clarity; intentionally quieter than all three.
   Brand colors retained: var(--blue) / var(--slate).
   ------------------------------------------------------------------ */
:root { color-scheme: light; }
body { background: var(--white); color: var(--ink); }
.container { max-width: var(--max); padding-inline: 36px; }
.site-top { display: none !important; }
.site-header { background: var(--white); border-bottom: 1px solid #efefed; box-shadow: none; }
.site-header.is-stuck { box-shadow: 0 8px 22px rgba(20,30,30,.035); }
.header-inner { height: 89px; }
.main-nav { gap: 28px; }
.main-nav a { font-size: 12px; font-weight: 500; letter-spacing: .015em; }
.header-right .desktop-consult {
  display: inline-flex; padding: 10px 0 8px; min-height: 0; background: none;
  border: 0; border-bottom: 1px solid var(--slate); color: var(--slate);
  font-size: 11px; letter-spacing: .11em; font-weight: 600;
}
.header-right .desktop-consult svg { width: 14px; height: 14px; }
.header-right .desktop-consult:hover { background: none; color: #1d323e; border-color: #1d323e; }
.brand-img { width: 95px; height: 64px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .21em; }
.display { letter-spacing: -.048em; line-height: 1.21; }
.title-lg { font-size: clamp(35px,3.7vw,49px); }
.title-md { font-size: clamp(31px,3.2vw,43px); }
.section { padding: var(--nta-spacing-section) 0; }
.section-sm { padding: var(--nta-spacing-section-small) 0; }
.btn { min-height: 49px; font-size: 11px; letter-spacing: .075em; font-weight: 600; }
.btn:hover { transform: none; }
.btn-outline { background: none; color: var(--slate); }
.btn-outline:hover { color: var(--white); }
.arrow-link { font-size: 12px; font-weight: 600; letter-spacing: .03em; }

/* Quiet hero: one photograph, one message, one action. */
.hero { background: var(--cream); }
.hero::before { display: none !important; }
.hero-shell {
  min-height: 0; display: grid; grid-template-columns: .93fr 1.07fr;
  align-items: center; gap: clamp(44px,7vw,108px); padding-top: 70px; padding-bottom: 82px;
}
.hero-copy { padding: 30px 0 20px; max-width: 510px; }
.hero-copy .eyebrow { color: var(--slate); }
.hero h1 {
  font-size: clamp(49px,5.3vw,76px); max-width: 535px; color: var(--ink);
  margin: 25px 0 0; line-height: 1.18;
}
.hero-description { max-width: 380px; margin-top: 30px; font-size: 14px; line-height: 1.9; color: #657279; }
.hero-actions { margin-top: 36px; }
.hero-actions .btn { min-height: 51px; padding: 14px 26px; }
.hero-visual { min-height: 0; height: 575px; display: block; position: relative; }
.hero-photo {
  position: relative; inset: auto; clip-path: none; width: 100%; height: 100%;
  background: #e9e4dd; overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-vertical,.hero-bottom { display: none !important; }

/* Category portraits. No overlays and no decorative labels. */
.intro-row { margin-bottom: 41px; align-items: end; }
.intro-row .eyebrow { margin-bottom: 12px; }
.intro-row > p { display: none; }
.category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 23px; }
.category-card { background: none; overflow: visible; }
.category-image { aspect-ratio: 4/4.9; background: #f1f0ed; overflow: hidden; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.category-card:hover img { transform: scale(1.035); }
.category-overlay {
  display: flex; justify-content: space-between; align-items: center; position: static;
  min-height: 0; padding: 16px 0 0; background: none; color: var(--ink);
}
.category-overlay h3 { font-family: var(--serif); font-size: 20px; letter-spacing: -.025em; line-height: 1.4; }
.category-overlay small,.category-overlay svg { display: none; }

/* Curated four: photographs first, metadata second. */
.featured-section { background: var(--white); padding: 94px 0 108px; }
.featured-head { text-align: left; margin-bottom: 40px; }
.featured-head .eyebrow { margin-bottom: 12px; }
.featured-head .section-desc { display: none; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 44px 24px; }
.product-image { aspect-ratio: 4/5; background: #f0efed; overflow: hidden; }
.product-image img { object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-info { padding-top: 16px; }
.product-type { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: #869096; }
.product-name { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.6; margin-top: 7px; }
.product-name a:hover { color: var(--slate); }
.product-bottom { margin-top: 7px; color: #9ca6a8; font-size: 10px; }
.product-bottom button { display: none; }
.center-actions { margin-top: 45px; }
.center-actions .btn { min-height: 47px; }

/* A single editorial brand story instead of a stacked value proposition. */
.story-section {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 1210px;
  margin: 20px auto 100px; background: var(--cream); overflow: hidden;
}
.story-picture { min-height: 0; aspect-ratio: 5 / 7.6; align-self: start; background: #e9e9e4; }
.story-picture::after { display: none; }
.story-picture picture { display: block; width: 100%; height: 100%; }
.story-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.story-content { padding: 70px clamp(40px,6vw,100px); }
.story-content h2 { margin: 20px 0 22px; font-size: clamp(30px,3vw,42px); }
.story-content p { font-size: 13px; line-height: 2; max-width: 370px; }
.story-content .arrow-link { margin-top: 28px; }
.service-strip { display: none; }
.contact-callout { background: #f5f6f3; color: var(--ink); border-top: 1px solid #ebecea; }
.callout-inner { padding-block: 66px; gap: 35px; }
.callout-inner .eyebrow { color: var(--slate); }
.callout-inner h2 { color: var(--ink); font-size: clamp(26px,2.6vw,39px); max-width: 650px; }
.contact-callout .btn-light {
  background: transparent; border: 1px solid var(--slate); color: var(--slate);
  font-size: 11px; min-height: 49px;
}
.contact-callout .btn-light:hover { background: var(--slate); color: var(--white); }

/* Compact, airy footer. */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding-top: 70px; }
.footer-grid { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.1fr); gap: 70px; padding-bottom: 64px; }
.footer-grid > div:nth-child(3) { display: none; }
.footer-logo { width: 98px; height: 72px; }
.footer-text { max-width: 310px; margin-top: 14px; }
.footer-heading { font-size: 10px; font-weight: 650; letter-spacing: .14em; margin-bottom: 21px; }
.footer-links { gap: 13px; }
.footer-links a,.footer-links li { font-size: 12px; }
.footer-bottom { padding-block: 21px; border-top: 1px solid var(--line); color: #829094; }
.social-links { margin-top: 23px; }
.contact-social-links { display: flex; align-items: center; gap: 15px; margin-top: 8px; }
.contact-social-links a { display: grid; place-items: center; width: 28px; height: 28px; }
.contact-social-links svg { display: block; width: 24px; height: 24px; }
.contact-social-links a:hover { opacity: .72; }
.floating-contact { right: 25px; bottom: 25px; gap: 0; }
.floating-contact a { display: none; }
.floating-contact .float-action { width: 47px; height: 47px; border: 1px solid #e2e6e4; box-shadow: 0 6px 25px rgba(27,50,55,.08); background: var(--white); }
.floating-contact .float-action:hover { background: var(--slate); color: var(--white); }

/* Editorial catalog and product details. */
.page-banner { background: var(--cream); padding: 68px 0 64px; text-align: center; }
.page-banner .subtitle { max-width: 560px; margin: 18px auto 0; font-size: 13px; line-height: 1.9; }
.page-banner h1 { font-size: clamp(40px,4vw,55px); }
.breadcrumbs { color: #8a969b; letter-spacing: .07em; font-size: 10px; }
.catalog-section { padding-top: 45px; padding-bottom: 112px; }
.catalog-tools { margin-bottom: 12px; }
.catalog-count { font-size: 12px; color: #7e898e; }
.catalog-search { border-bottom: 1px solid #cbd4d3; padding-bottom: 7px; background: none; }
.catalog-search input { font-size: 13px; }
.filter-row { padding: 15px 0 34px; margin-bottom: 24px; gap: 11px; }
.filter-row > label:not(.sr-only) { display: none; }
.filter-row select { min-width: 157px; background: var(--white); border: 0; border-bottom: 1px solid #d8dedc; padding: 12px 28px 12px 7px; font-size: 12px; color: var(--slate); }

.detail-wrap { padding-top: 29px; padding-bottom: 112px; }
.detail-breadcrumb { margin-bottom: 30px; }
.detail-grid { grid-template-columns: 1.02fr .98fr; gap: clamp(55px,7vw,105px); }
.gallery-main { aspect-ratio: 4/4.9; background: #f2f1ee; }
.gallery-main img { object-fit: cover; }
.gallery-thumbs { margin-top: 13px; gap: 10px; }
.gallery-thumb { border: 1px solid #e1e5e2; }
.gallery-thumb.active { border-color: var(--slate); }
.detail-info { padding-top: 38px; position: sticky; top: 124px; }
.detail-info .eyebrow { color: #697c85; }
.detail-info h1 { font-size: clamp(32px,3.3vw,49px); margin: 21px 0 14px; }
.detail-info .sku { font-size: 11px; letter-spacing: .11em; color: #9ba7a9; }
.detail-summary { color: #667780; max-width: 410px; line-height: 2; font-size: 13px; }
.detail-specs { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 12px; }
.detail-spec { border-bottom: 1px solid var(--line); padding-block: 13px; }
.detail-spec dt { color: #7a858b; font-size: 12px; }
.detail-spec dd { color: var(--ink); font-size: 12px; }
.detail-cta { margin-top: 32px; }
.detail-cta .btn { font-size: 10px; }
.detail-benefits { display: none; }
.related-section { padding-bottom: 108px; }

/* Quiet secondary pages. */
.about-intro { gap: 85px; }
.about-intro p { max-width: 480px; font-size: 13px; }
.about-image { background: #eeece8; }
.process-section { background: var(--cream); }
.process-grid { gap: 28px; }
.process-item { border-top: 1px solid #dde3e1; }
.process-item h3 { font-size: 19px; }
.process-section + .section.container { display: none; }
.contact-grid { gap: 80px; }
.contact-copy h2 { font-size: clamp(32px,3vw,44px); }
.contact-list { gap: 29px; }
.contact-form { background: #fbfaf8; box-shadow: none; padding: 42px; border: 1px solid #ededeb; }
.form-group input,.form-group textarea { background: var(--white); border: 1px solid #e1e7e4; }
.consult-dialog { border: 1px solid #e3e9e6; box-shadow: 0 25px 75px rgba(30,45,43,.18); }
.consult-dialog::backdrop { background: rgba(28,45,48,.40); }
.dialog-inner { padding: 43px; }
.lightbox { background: rgba(12,24,24,.94); }

@media (max-width: 1080px) {
  .container { padding-inline: 28px; }
  .header-inner { gap: 14px; }
  .main-nav { gap: 19px; }
  .hero-shell { gap: 44px; }
  .hero-visual { height: 520px; }
  .story-section { margin-inline: 28px; }
  .footer-grid { gap: 35px; }
}
@media (max-width: 920px) {
  .header-inner { height: 80px; grid-template-columns: 1fr auto 1fr; }
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .header-right .desktop-consult { display: inline-flex; font-size: 10px; padding: 8px 0 7px; }
  .brand-img { width: 90px; height: 63px; }
  .hero-shell { grid-template-columns: .95fr 1.05fr; gap: 35px; }
  .hero h1 { font-size: clamp(42px,5.7vw,59px); }
  .hero-visual { height: 470px; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(3,1fr); gap: 33px 19px; }
  .story-section { margin: 0 28px 75px; }
  .story-content { padding: 45px 45px; }
}
@media (max-width: 720px) {
  .container { padding-inline: 20px; }
  .section { padding: 70px 0; }
  .header-inner { height: 71px; }
  .header-right .desktop-consult { display: inline-flex; min-height: 0; padding: 6px 0; font-size: 9px; }
  .header-right .desktop-consult svg { display: none; }
  .brand-img { width: 81px; height: 55px; }
  .hero-shell { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 62px; padding-bottom: 56px; }
  .hero-copy { padding: 0; max-width: 510px; }
  .hero h1 { font-size: clamp(45px,11vw,65px); margin-top: 19px; }
  .hero-description { margin-top: 22px; font-size: 13px; max-width: 320px; }
  .hero-actions { margin-top: 27px; }
  .hero-actions .btn { min-height: 46px; padding: 12px 19px; font-size: 10px; }
  .hero-visual { height: min(111vw,480px); min-height: 0; margin-top: 42px; }
  .hero-photo { inset: auto; }
  .title-lg { font-size: 37px; }
  .intro-row { margin-bottom: 26px; }
  .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 14px; }
  .category-image { aspect-ratio: 4/5; }
  .category-overlay { padding: 16px 0 0; }
  .category-overlay h3 { font-size: 16px; }
  .featured-section { padding: 74px 0; }
  .featured-head { margin-bottom: 25px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 14px; }
  .product-type { font-size: 9px; }
  .product-name { font-size: 14px; line-height: 1.6; }
  .product-bottom { font-size: 9px; }
  .center-actions { margin-top: 33px; }
  .story-section { display: flex; flex-direction: column; margin: 0 20px 63px; }
  .story-picture { min-height: 0; aspect-ratio: 4/3.5; }
  .story-content { padding: 39px 29px 43px; }
  .story-content h2 { font-size: 32px; }
  .contact-callout .callout-inner { flex-direction: column; align-items: flex-start; padding-block: 52px; }
  .callout-inner h2 { font-size: 31px; }
  .site-footer { padding-top: 53px; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 25px; padding-bottom: 46px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 10px; }
  .page-banner { padding: 51px 0 50px; }
  .page-banner h1 { font-size: 41px; }
  .catalog-section { padding-top: 32px; padding-bottom: 78px; }
  .catalog-tools { align-items: flex-start; gap: 12px; }
  .catalog-search { min-width: 0; max-width: 230px; }
  .catalog-search input { min-width: 0; width: 100%; font-size: 12px; }
  .filter-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 13px; padding-bottom: 29px; }
  .filter-row select { min-width: 0; width: 100%; }
  .detail-wrap { padding-bottom: 64px; }
  .detail-grid { grid-template-columns: 1fr; gap: 25px; }
  .detail-info { position: static; padding-top: 17px; }
  .detail-info h1 { font-size: 37px; }
  .detail-cta { flex-wrap: wrap; }
  .detail-cta .btn { min-width: 0; }
  .related-section { padding-bottom: 77px; }
  .about-intro { grid-template-columns: 1fr; gap: 33px; }
  .process-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 38px; }
  .contact-form { padding: 29px 23px; }
  .floating-contact { right: 14px; bottom: 17px; }
  .floating-contact .float-action { width: 42px; height: 42px; }
  .dialog-inner { padding: 32px 23px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* Prevent screen-reader labels from expanding the mobile filter grid. */
.filter-row .sr-only { width: 1px !important; height: 1px !important; left: 0 !important; }
/* V2 intentionally omits floating bubbles; sticky header holds the consultation CTA. */
.floating-contact { display: none !important; }

/* ===== NTA Purposeful Motion V3 ===== */
/*
 * NTA Minimal Motion V3 — no animation framework required.
 * Principles: clarity first, GPU-friendly opacity/transform, no permanent motion,
 * never animate layout or change the colour of the gemstone photography.
 * Works without JavaScript, with touch devices, and with reduced-motion enabled.
 */
:root {
  --motion-quick: 180ms;
  --motion-ui: 240ms;
  --motion-reveal: 540ms;
  --motion-ease: cubic-bezier(.22,1,.36,1);
}

/* 01 / Adaptive, quiet header. It stays present rather than jumping into view. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,246,.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(41,62,69,.025);
  transition: background-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
.header-inner { transition: height 280ms var(--motion-ease); }
.brand-img { transition: width 280ms var(--motion-ease), height 280ms var(--motion-ease); }
.site-header.is-stuck { box-shadow: 0 10px 29px rgba(33,58,58,.075); }
.site-header.is-stuck .header-inner { height: 76px; }
.site-header.is-stuck .brand-img { width: 91px; height: 61px; }

/* 02 / Composed hero entrance: message first, then the real product image. */
@keyframes nta-hero-reveal {
  from { opacity: 0; transform: translate3d(0,20px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes nta-hero-photo-reveal {
  from { opacity: .20; transform: translate3d(0,11px,0) scale(1.015); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
.nta-motion-ready .hero-copy > .eyebrow,
.nta-motion-ready .hero-copy > h1,
.nta-motion-ready .hero-copy > .hero-description,
.nta-motion-ready .hero-copy > .hero-actions {
  animation: nta-hero-reveal 640ms var(--motion-ease) both;
}
.nta-motion-ready .hero-copy > .eyebrow { animation-delay: 50ms; }
.nta-motion-ready .hero-copy > h1 { animation-delay: 130ms; }
.nta-motion-ready .hero-copy > .hero-description { animation-delay: 220ms; }
.nta-motion-ready .hero-copy > .hero-actions { animation-delay: 300ms; }
.nta-motion-ready .hero-photo { animation: nta-hero-photo-reveal 760ms var(--motion-ease) 180ms both; }

/* 03 / Reveal only content that is below the current viewport. No-JS remains visible. */
.nta-motion-ready .motion-reveal {
  opacity: 1;
  transform: none;
}
.nta-motion-ready .motion-reveal.is-pending {
  opacity: 0;
  transform: translate3d(0,18px,0);
}
.nta-motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity var(--motion-reveal) var(--motion-ease),
    transform var(--motion-reveal) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

/* 04 / Image-only product interaction. Focus gets the same treatment as hover. */
.category-card img,
.product-image img,
.gallery-main img {
  backface-visibility: hidden;
  transition: transform 350ms var(--motion-ease), opacity 210ms ease;
}
.category-card:hover img,
.category-card:focus-visible img,
.product-card:hover .product-image img,
.product-card:focus-within .product-image img { transform: scale(1.035); }
.product-image::after {
  content: 'XEM CHI TIẾT  ↗';
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 7px 12px;
  background: rgba(250,249,246,.96);
  color: var(--slate);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  opacity: 0;
  transform: translate3d(0,6px,0);
  pointer-events: none;
  transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease);
}
.product-card:hover .product-image::after,
.product-card:focus-within .product-image::after {
  opacity: 1;
  transform: translate3d(0,0,0);
}
@media (hover: none) {
  .product-image::after { display: none; }
  .category-card:hover img, .product-card:hover .product-image img { transform: none; }
}

/* 05 / Gallery crossfade with image preloading; only the pixels change, not layout. */
.gallery-main { isolation: isolate; }
.gallery-main img.is-gallery-changing {
  opacity: .06;
  transform: scale(1.012);
}
.gallery-thumb { transition: border-color 180ms ease, opacity 180ms ease; }
.gallery-thumb:not(.active) { opacity: .78; }
.gallery-thumb:hover, .gallery-thumb:focus-visible, .gallery-thumb.active { opacity: 1; }
.gallery-zoom { transition: background var(--motion-quick), transform var(--motion-quick) var(--motion-ease); }
.gallery-zoom:hover { transform: scale(1.035); background: var(--white); }

/* 06 / Accessible consultation modal micro-interaction. */
@keyframes nta-dialog-show {
  from { opacity: 0; transform: translate3d(0,12px,0) scale(.985); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes nta-dialog-hide {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 0; transform: translate3d(0,9px,0) scale(.99); }
}
@keyframes nta-backdrop-show { from { opacity: 0; } to { opacity: 1; } }
.consult-dialog[open] { animation: nta-dialog-show 260ms var(--motion-ease) both; }
.consult-dialog[open].is-closing { animation: nta-dialog-hide 165ms ease both; }
.consult-dialog[open]::backdrop { animation: nta-backdrop-show 230ms ease both; }
.consult-dialog .form-group input,
.consult-dialog .form-group textarea,
.contact-form .form-group input,
.contact-form .form-group textarea {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.consult-dialog .form-group input:focus,
.consult-dialog .form-group textarea:focus,
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
  outline: none;
  border-color: #678476;
  box-shadow: 0 0 0 3px rgba(89,125,113,.10);
}
.btn { transition: background-color var(--motion-ui) ease, color var(--motion-ui) ease,
  border-color var(--motion-ui) ease, transform var(--motion-quick) var(--motion-ease); }
.btn:active { transform: translateY(1px) scale(.993); }
.btn svg, .arrow-link svg { transition: transform var(--motion-ui) var(--motion-ease); }
.btn:hover svg, .arrow-link:hover svg { transform: translateX(3px); }
.btn[aria-busy="true"] { opacity: .73; cursor: progress; }

/* 07 / Results: no layout jump or false skeleton on locally instant operations. */
.catalog-count { min-width: 75px; }
#catalog-results { position: relative; min-height: 80px; }
#catalog-results.is-loading { pointer-events: none; }
#catalog-results.is-loading::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(100deg,rgba(250,249,246,.46) 0%,rgba(238,244,242,.80) 45%,rgba(250,249,246,.46) 100%);
  background-size: 220% 100%;
  animation: nta-skeleton-slide 1.3s linear infinite;
}
@keyframes nta-skeleton-slide { to { background-position: -220% 0; } }
@keyframes nta-grid-arrive {
  from { opacity: .72; transform: translate3d(0,7px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
.catalog-section .product-grid.is-refreshed > .product-card:not(.hidden) {
  animation: nta-grid-arrive 320ms var(--motion-ease) both;
  animation-delay: var(--motion-delay, 0ms);
}
.filter-row select { transition: border-color var(--motion-quick), color var(--motion-quick); }
.filter-row select:focus-visible { outline: 2px solid #547b70; outline-offset: 2px; }
.filter-row select.is-active { border-bottom-color: var(--slate); font-weight: 600; }

/* 08 / Mobile navigation as a calm overlay rather than an instant jump. */
@media (max-width: 920px) {
  .site-header.is-stuck .header-inner { height: 66px; }
  .site-header.is-stuck .brand-img { width: 78px; height: 53px; }
  .mobile-menu { display: block; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-7px);
    transition: visibility 180ms, opacity 180ms ease, transform 180ms var(--motion-ease); }
  .mobile-menu.open { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
}
@media (max-width: 720px) {
  .hero-copy .eyebrow { letter-spacing: .18em; }
  .category-card img { transition-duration: 220ms; }
}

/* Accessibility: no invisible content or movement when motion should be reduced. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .nta-motion-ready .motion-reveal,
  .nta-motion-ready .motion-reveal.is-pending,
  .nta-motion-ready .motion-reveal.is-visible,
  .gallery-main img.is-gallery-changing { opacity: 1 !important; transform: none !important; }
  #catalog-results.is-loading::after { animation: none !important; background: rgba(250,249,246,.7); }
}


/* Submitted enquiry feedback must be visible, with no duplicate new form after success. */
.consult-dialog.has-result .nta-consultation-form { display:none; }
.consult-dialog.has-result .form-message { margin:18px 0 0; }

.preview-form-note{font-size:11px;color:#8c7165;line-height:1.6}.preview-message{background:#fff6e5;padding:10px 12px;border-left:3px solid #be8f47}.catalog-search svg{height:19px;width:19px;color:var(--slate)}.hero .btn-outline{border-color:var(--slate)}


/* ===== NTA V4: Vietnamese typography, square imagery and mobile spacing ===== */
:root {
  --serif: var(--nta-font-family-heading);
  --sans: var(--nta-font-family-body);
  --gutter: var(--nta-layout-gutter);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: var(--nta-font-size-body); line-height: var(--nta-font-line-height-body); overflow-wrap: break-word; }
h1,h2,h3,h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.display { font-family: var(--serif); letter-spacing: -.025em; line-height: var(--nta-font-line-height-heading); }
.hero h1 { font-size: clamp(46px, 5vw, 70px); line-height: 1.2; letter-spacing: -.035em; }
.title-lg { font-size: clamp(33px, 3.5vw, 49px); }
.title-md { font-size: clamp(26px, 2.65vw, 37px); }
.page-banner h1 { font-size: clamp(38px, 3.8vw, 52px); }
.eyebrow { font-family: var(--sans); font-size: var(--nta-font-size-label); letter-spacing: .12em; line-height: 1.6; }
.main-nav { gap: clamp(12px, 1.8vw, 26px); }
.main-nav a { font-size: 12px; line-height: 1.5; }
.product-name { font-size: var(--nta-font-size-product); line-height: 1.55; font-weight: 500; }
.category-overlay h3 { font-size: 19px; line-height: 1.45; }
.intro-row p,.section-desc,.hero-description,.story-content p,.contact-copy > p { font-size: 14px; }
.footer-links li,.footer-links a { font-size: 12px; line-height: 1.75; }
.container { padding-inline: var(--gutter); }
/* All gallery, product and category image frames are square, with uncropped products. */
.product-image, .category-image, .gallery-main, .gallery-thumb { aspect-ratio: var(--nta-layout-product-ratio); }
.product-image img, .gallery-main img, .gallery-thumb img { object-fit: contain; }
.category-image img { object-fit: cover; }
.gallery-thumb { height: auto; width: 88px; }
.product-image { background: #f3f2ef; }
.gallery-main { background: #f3f2ef; }
.product-image img, .category-image img, .gallery-main img { width: 100%; height: 100%; }
.product-grid { row-gap: 36px; }
.location-link { text-underline-offset: 3px; transition: color .18s ease; }
.location-link:hover, .location-link:focus-visible { color: var(--jade); text-decoration: underline; }
.collection-banner .eyebrow { margin: 12px 0; }
.collection-categories .intro-row { margin-bottom: 34px; }
/* Balance vertical rhythm between section headings and content. */
.featured-head { margin-bottom: 34px; }
.section { scroll-margin-top: 90px; }
@media (max-width: 1150px) and (min-width: 921px) {
  .main-nav { gap: 12px; }
  .main-nav a { font-size: 11px; }
  .brand { min-width: 135px; }
}
@media (max-width: 920px) {
  .mobile-menu { padding: 14px var(--gutter) 22px; }
  .mobile-menu a { padding: 13px 0; font-size: 14px; }
}
@media (max-width: 720px) {
  :root { --gutter: var(--nta-layout-gutter-mobile); }
  body { font-size: var(--nta-font-size-body-mobile); line-height: var(--nta-font-line-height-body); }
  .section { padding-block: var(--nta-spacing-section-mobile); }
  .section-sm { padding-block: var(--nta-spacing-section-small-mobile); }
  .hero-shell { padding-top: 46px; padding-bottom: 0; }
  .hero-copy { padding-inline: 0; padding-bottom: 33px; }
  .hero h1 { font-size: clamp(38px, 10vw, 49px); line-height: 1.23; margin-top: 17px; }
  .hero-description { font-size: 14px; line-height: 1.8; }
  /* The poster is full-bleed; text and product sections retain their gutters. */
  .hero-visual { margin: 10px calc(-1 * var(--gutter)) 0; width: calc(100% + 2 * var(--gutter)); height: min(105vw, 510px); }
  .hero-photo { width: 100%; height: 100%; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  .story-section { margin: 0 0 55px; width: 100%; max-width: none; }
  .story-content { padding: 44px var(--gutter) 52px; }
  .category-grid, .product-grid { gap: 20px 12px; }
  .category-image, .product-image { aspect-ratio: var(--nta-layout-product-ratio); }
  .category-overlay { padding: 16px 12px 13px; }
  .category-overlay h3 { font-size: 15px; }
  .category-overlay small { font-size: 10px; }
  .featured-section { padding-block: 63px; }
  .intro-row { margin-bottom: 24px; }
  .featured-head { margin-bottom: 24px; }
  .title-lg { font-size: clamp(28px, 7.4vw, 38px); line-height: 1.3; }
  .title-md { font-size: clamp(25px, 6.6vw, 34px); }
  .page-banner { padding-block: 45px; }
  .page-banner h1 { font-size: clamp(33px, 8.5vw, 43px); }
  .page-banner .subtitle { font-size: 13px; }
  .product-name { font-size: var(--nta-font-size-product-mobile); }
  .product-bottom { flex-wrap: wrap; row-gap: 4px; }
  .product-bottom span, .product-bottom button, .product-bottom a { font-size: 10px; }
  .product-type { font-size: 10px; }
  .gallery-main { aspect-ratio: var(--nta-layout-product-ratio); }
  .gallery-thumb { width: 68px; height: auto; aspect-ratio: var(--nta-layout-product-ratio); }
  .related-section { padding-block: 34px 62px; }
  .catalog-section { padding-block: 28px 64px; }
  .contact-grid { gap: 30px; }
  .contact-form { padding: 26px 20px; }
  .footer-grid { gap: 26px 20px; }
  .contact-callout .callout-inner { padding-block: 46px; }
  .collection-cover { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
}
@media (max-width: 360px) {
  :root { --gutter: var(--nta-layout-gutter-compact); }
  .product-grid, .category-grid { gap: 16px 9px; }
  .product-name { font-size: var(--nta-font-size-product-compact); }
  .category-overlay h3 { font-size: 14px; }
}
/* Mobile header: the consultation CTA is not part of the primary menu. */
@media (max-width: 920px) {
  .header-right .desktop-consult { display: none; }
}
/* SEO/LCP: essential content is visible immediately, even before entrance motion ends.
   Small scroll motion remains, without hiding text/products from crawlers or screenshots. */
.nta-motion-ready .hero-copy > .eyebrow,
.nta-motion-ready .hero-copy > h1,
.nta-motion-ready .hero-copy > .hero-description,
.nta-motion-ready .hero-copy > .hero-actions,
.nta-motion-ready .hero-photo { animation: none; opacity: 1; transform: none; }
.nta-motion-ready .motion-reveal.is-pending { opacity: 1; transform: translate3d(0,6px,0); }

/* Collection cover supplied through admin. */
.collection-cover{width:100%;aspect-ratio:2/1;max-height:480px;overflow:hidden;margin:0 0 36px;background:#f2f1ee}
.collection-cover img{display:block;width:100%;height:100%;object-fit:cover}
.footer-contact-link{display:flex;align-items:flex-start;gap:9px}
.footer-contact-link svg{width:15px;height:15px;flex:0 0 15px;margin-top:4px;color:var(--slate)}
.preview-form-note.is-success{background:#e8f6ef;padding:10px 12px;border-left:3px solid #5a9672;color:#246047}
.preview-form-note.is-error{background:#fff0f1;padding:10px 12px;border-left:3px solid #bc6868;color:#963d43}
.footer-contact-link[href^="tel:"]{align-items:center}
.footer-contact-link[href^="tel:"] svg{display:block;width:18px;height:18px;flex:0 0 18px;margin:0;color:#465d71;stroke:#465d71;stroke-width:1.7}
.product-info .product-type{display:block;text-transform:none;letter-spacing:.02em}
.product-info .product-sku{display:block;margin-top:2px;color:#879194;font-size:10px;letter-spacing:.08em;line-height:1.5}
.product-info .product-name{margin:4px 0 0;min-height:0}
.product-info .product-type,.product-info .product-sku{display:inline-block;vertical-align:baseline;color:#5d6971}
.product-info .product-sku{margin:0 0 0 9px;color:#4f5d66;font-size:10px;letter-spacing:.07em}

/* Shared type scale: component rules above must not shrink semantic text roles. */
body { font-size: var(--nta-font-size-body); }
body h1, body h1.display, body .hero h1, body .page-banner h1, body .detail-info h1 {
  font-size: var(--nta-font-size-heading-h1);
  line-height: 1.2;
}
body h2, body h2.display, body .callout-inner h2, body .contact-copy h2,
body .dialog-inner h2, body .story-content h2 {
  font-size: var(--nta-font-size-heading-h2);
  line-height: 1.25;
}
body h3, body h3.product-name, body .category-overlay h3, body .empty-state h3,
body .service h3, body .process-item h3, body .commit-item h3, body .contact-form h3 {
  font-size: var(--nta-font-size-heading-h3);
  line-height: 1.4;
}
body h4 { font-size: var(--nta-font-size-heading-h4); }
body .eyebrow,
body p.eyebrow,
body .product-type,
body .product-sku,
body .product-info .product-sku,
body .detail-info .sku,
body .product-tag,
body .category-overlay small,
body .breadcrumbs,
body .catalog-count,
body .footer-heading,
body .footer-links li,
body .footer-links a,
body .footer-bottom,
body .product-bottom,
body .product-bottom span,
body .product-bottom button,
body .product-bottom a,
body .catalog-search input,
body .filter-row label,
body .filter-row select,
body .filter-row .clear-filter,
body .pagination .page-numbers,
body .detail-spec,
body .detail-spec dt,
body .detail-spec dd,
body .detail-benefits span,
body .detail-certificate,
body .sku,
body .form-group label,
body .form-consent,
body .form-message,
body .dialog-inner p,
body .dialog-product,
body .site-top,
body .hero-vertical,
body .hero-bottom span {
  font-size: var(--nta-font-size-caption);
}
body .main-nav a,
body .mobile-menu a { font-size: 14px; }
body .btn,
body .arrow-link,
body .filter-row .btn,
body .detail-cta .btn,
body .contact-callout .btn-light { font-size: var(--nta-font-size-caption); }
body .intro-row > p,
body .section-desc,
body .hero-description,
body .story-content > p:not(.eyebrow),
body .contact-copy > p:not(.eyebrow),
body .page-banner .subtitle,
body .detail-summary,
body .about-intro p:not(.eyebrow),
body .process-item p,
body .commit-item p,
body .contact-list-item a,
body .contact-list-item p {
  font-size: var(--nta-font-size-body-secondary);
}
body .contact-list-item b,
body .contact-form .form-intro { font-size: var(--nta-font-size-caption); }
body .about-intro p.eyebrow,
body .contact-copy p.eyebrow { font-size: var(--nta-font-size-caption); }
body .btn,
body .arrow-link { gap: 8px; }
body .main-nav a { line-height: 1.5; }

/* Keep paired image/text layouts aligned without oversized desktop gaps. */
.hero-shell { gap: clamp(24px, 4vw, 56px); }
.detail-grid,
.about-intro { gap: clamp(24px, 4vw, 56px); }
.story-content { padding-inline: clamp(24px, 3.5vw, 50px); }

/* One vertical rhythm for page sections, regardless of their content type. */
.section,
.featured-section { padding-block: var(--nta-spacing-section); }
.section-sm { padding-block: var(--nta-spacing-section-small); }
.hero-shell { padding-block: 72px; }
.page-banner { padding-block: var(--nta-spacing-section-small); }
.catalog-section { padding-block: var(--nta-spacing-section-small) var(--nta-spacing-section); }
.detail-wrap { padding-block: var(--nta-spacing-section-small); }
.related-section { padding-block: var(--nta-spacing-section-small) var(--nta-spacing-section); }
.story-section { margin: 0 auto var(--nta-spacing-section-small); }
.callout-inner { padding-block: var(--nta-spacing-section-small); }
.site-footer { padding-top: var(--nta-spacing-section-small); }
@media (max-width: 920px) {
  :root {
    --nta-spacing-section: 72px;
    --nta-spacing-section-small: 48px;
  }
  .story-section { margin-inline: 28px; }
}

.main-nav a {
  position: relative;
  padding-block: 8px;
}
.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--jade);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

/* Match the reviewed desktop type sizes across static and database-rendered pages. */
body h1,
body .hero h1,
body .page-banner h1,
body .detail-info h1 { font-size: var(--nta-font-size-heading-h1); }
body .page-banner .subtitle { font-size: 20px; }
body .hero-description,
body .story-content > p:not(.eyebrow),
body .detail-summary,
body .about-intro p:not(.eyebrow) { font-size: var(--nta-font-size-body-secondary); }
body .category-overlay h3 { font-size: 16px; }
body .product-info .product-type,
body .product-info .product-sku { font-size: 16px; }
body .product-info .product-name { font-size: var(--nta-font-size-product); }
body .detail-spec dt,
body .detail-spec dd { font-size: 16px; }
body .catalog-search input,
body .filter-row label,
body .filter-row select,
body .filter-row .clear-filter { font-size: var(--nta-font-size-action); }
body .btn,
body .arrow-link,
body .filter-row .btn,
body .detail-cta .btn,
body .contact-callout .btn-light { font-size: var(--nta-font-size-action); }
body .footer-heading,
body .footer-text,
body .footer-links li,
body .footer-links a,
body .footer-contact-link,
body .footer-bottom { font-size: var(--nta-font-size-action); }
.footer-grid > div:nth-child(3) { display: block; }
.section + .featured-section { padding-top: 0; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.nav-active::after,
.main-nav .current-menu-item > a::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .main-nav a::after { transition: none; }
}

@media (max-width: 720px) {
  .section,
  .featured-section { padding-block: var(--nta-spacing-section-mobile); }
  .section-sm { padding-block: var(--nta-spacing-section-small-mobile); }
  .hero-shell { padding-top: 46px; padding-bottom: 0; }
  .page-banner { padding-block: var(--nta-spacing-section-small-mobile); }
  .catalog-section { padding-block: var(--nta-spacing-section-small-mobile) var(--nta-spacing-section-mobile); }
  .detail-wrap { padding-block: var(--nta-spacing-section-small-mobile); }
  .related-section { padding-block: var(--nta-spacing-section-small-mobile) var(--nta-spacing-section-mobile); }
  .story-section { margin: 0 20px var(--nta-spacing-section-small-mobile); }
  .callout-inner { padding-block: var(--nta-spacing-section-small-mobile); }
  .site-footer { padding-top: var(--nta-spacing-section-small-mobile); }
  .hero-shell { gap: 0; }
  .detail-grid { gap: 25px; }
  .about-intro { gap: 33px; }
  .story-content { padding-inline: 29px; }
  body { font-size: var(--nta-font-size-body-mobile); }
  body h1, body h1.display, body .hero h1, body .page-banner h1, body .detail-info h1 {
    font-size: var(--nta-font-size-heading-h1-mobile);
  }
  body h2, body h2.display, body .callout-inner h2, body .contact-copy h2,
  body .dialog-inner h2, body .story-content h2 {
    font-size: var(--nta-font-size-heading-h2-mobile);
  }
  body h3, body h3.product-name, body .category-overlay h3, body .empty-state h3,
  body .service h3, body .process-item h3, body .commit-item h3, body .contact-form h3 {
    font-size: var(--nta-font-size-heading-h3-mobile);
  }
  body .intro-row > p,
  body .section-desc,
  body .hero-description,
  body .story-content > p:not(.eyebrow),
  body .contact-copy > p:not(.eyebrow),
  body .about-intro p:not(.eyebrow),
  body .page-banner .subtitle,
  body .detail-summary,
  body .about-intro p,
  body .process-item p,
  body .commit-item p,
  body .contact-list-item a,
  body .contact-list-item p {
    font-size: var(--nta-font-size-body-secondary-mobile);
  }
  body .main-nav a { font-size: 14px; }
  body .product-name { font-size: var(--nta-font-size-product-mobile); }
}

@media (max-width: 720px) {
  .container { padding-inline: clamp(16px, 5vw, 20px); }
  .header-inner { height: 68px; }
  .brand { min-width: 0; }
  .menu-toggle { padding: 8px; }
  .hero-shell { padding-top: 40px; }
  .hero h1 { font-size: clamp(36px, 9.5vw, 44px); line-height: 1.18; }
  .hero-description { max-width: 38rem; font-size: 15px; }
  .hero-actions .btn { max-width: 100%; }
  .hero-visual { margin: 32px calc(-1 * var(--gutter)) 0; width: calc(100% + 2 * var(--gutter) - 1px); }
  .intro-row { margin-bottom: 24px; }
  .title-lg,
  .page-banner h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.2; }
  .category-grid,
  .product-grid { gap: 24px 12px; }
  .category-image,
  .product-image { aspect-ratio: var(--nta-layout-product-ratio); }
  .category-overlay { padding: 16px 0 0; }
  .category-overlay h3 { font-size: 17px; }
  .product-info { padding-top: 16px; }
  .product-name { font-size: 16px; line-height: 1.4; }
  .product-type,
  .product-info .product-type,
  .product-info .product-sku { font-size: 12px; }
  .story-section { width: calc(100% - 32px); margin-inline: auto; }
  .story-picture { aspect-ratio: 1 / 1; }
  .story-picture img { object-position: center; }
  .about-image { aspect-ratio: 5 / 5.8; }
  .story-content { padding: 36px 24px 40px; }
  .story-content h2,
  .callout-inner h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .about-intro { gap: 28px; }
  .about-intro p:not(.eyebrow),
  .process-item p,
  .page-banner .subtitle,
  .hero-description { font-size: 16px; line-height: 1.7; }
  .process-grid { gap: 18px; }
  .process-item { padding: 22px 0; }
  .catalog-tools,
  .catalog-search { width: 100%; max-width: none; }
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .filter-row select { min-height: 44px; }
  .contact-grid { gap: 30px; }
  .contact-form { padding: 24px 20px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4) { min-width: 0; }
  .footer-links a,
  .footer-contact-link { overflow-wrap: anywhere; }
  .footer-bottom { padding-bottom: 20px; }
}

@media (max-width: 380px) {
  .hero-shell { padding-top: 32px; }
  .hero h1 { font-size: clamp(33px, 9vw, 36px); }
  .category-grid,
  .product-grid { gap: 20px 10px; }
  .category-overlay h3,
  .product-name { font-size: 15px; }
  .story-content { padding-inline: 20px; }
  .footer-grid { gap: 24px 14px; }
}

/* Keep pagination controls usable on small screens. */
.storefront-pagination { flex-wrap: wrap; padding: 0 20px 48px; gap: 8px; }
.storefront-pagination .page-numbers { width: auto; min-width: 40px; min-height: 40px; padding: 8px 12px; }
.storefront-pagination a:hover { background: var(--slate); color: white; }