:root {
--navy: #081f3f;
--navy2: #12345f;
--red: #c9152e;
--red2: #ef334e;
--ink: #101828;
--muted: #667085;
--gray: #f3f5f8;
--line: rgba(16,24,40,.12);
--paper: #ffffff;
--shadow: 0 24px 80px rgba(16,24,40,.11);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.72;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.v-container { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.v-header {
position: sticky;
top: 0;
z-index: 99;
background: rgba(255,255,255,.94);
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--line);
}
.v-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; }
.v-brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.v-logo {
display: grid;
place-items: center;
width: 56px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--navy), var(--red));
color: #fff;
font-weight: 1000;
letter-spacing: -.06em;
}
.v-brand strong { display: block; line-height: 1.05; }
.v-brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 4px; }
.v-menu ul { display: flex; list-style: none; gap: 4px; padding: 0; margin: 0; }
.v-menu a { display: inline-flex; padding: 10px 12px; border-radius: 9px; font-weight: 900; font-size: 14px; }
.v-menu a:hover { background: var(--gray); color: var(--red); }
.v-actions { display: flex; align-items: center; gap: 10px; }
.v-cart { padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; font-weight: 900; }
.v-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 18px;
border-radius: 10px;
font-weight: 1000;
border: 1px solid transparent;
}
.v-btn-red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 18px 40px rgba(201,21,46,.22); }
.v-btn-dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.v-btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.v-menu-btn { display: none; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 13px; font-weight: 900; }
.v-hero { position: relative; min-height: 790px; overflow: hidden; background: var(--navy); color: #fff; }
.v-hero-bg { position: absolute; inset: 0; }
.v-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8,31,63,.94) 0%, rgba(8,31,63,.72) 48%, rgba(8,31,63,.28) 100%);
}
.v-photo-placeholder {
position: relative;
display: grid;
place-items: center;
min-height: 220px;
border: 1px dashed rgba(102,112,133,.45);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(201,21,46,.12), transparent 42%),
linear-gradient(135deg, #e9edf3, #f7f8fb);
color: var(--navy);
text-align: center;
overflow: hidden;
}
.v-photo-placeholder::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(8,31,63,.08);
border-radius: 16px;
}
.v-photo-placeholder span { position: relative; display: block; font-weight: 1000; font-size: 22px; }
.v-photo-placeholder small { position: relative; display: block; color: var(--muted); max-width: 420px; margin-top: 6px; }
.v-photo-hero {
width: 100%;
height: 100%;
min-height: 790px;
border-radius: 0;
border: none;
background:
linear-gradient(135deg, rgba(201,21,46,.18), transparent 38%),
linear-gradient(135deg, #dfe5ee, #f7f8fb);
}
.v-hero-wrap { position: relative; z-index: 2; padding: 128px 0 64px; }
.v-hero-panel {
width: min(760px, 100%);
padding: clamp(28px, 4.8vw, 58px);
border-radius: 28px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(18px);
box-shadow: 0 34px 100px rgba(0,0,0,.28);
}
.v-eyebrow,
.v-section-title p,
.v-heading-row p,
.v-page-header p {
margin: 0 0 12px;
color: #a8b5c7;
font-size: 12px;
font-weight: 1000;
letter-spacing: .16em;
}
.v-eyebrow-red { color: var(--red); font-weight: 1000; letter-spacing: .16em; font-size: 12px; }
.v-hero h1 {
margin: 0;
font-size: clamp(42px, 6.8vw, 82px);
line-height: .96;
letter-spacing: -.075em;
text-wrap: balance;
}
.v-hero-panel > p:not(.v-eyebrow) { color: rgba(255,255,255,.78); font-size: clamp(18px,2vw,22px); }
.v-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.v-hero-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: min(760px, 100%);
margin-top: 18px;
}
.v-hero-mini div {
padding: 18px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.16);
border-radius: 18px;
backdrop-filter: blur(14px);
}
.v-hero-mini b { display: block; font-size: 30px; letter-spacing: -.05em; }
.v-hero-mini span { color: rgba(255,255,255,.72); font-size: 14px; }
.v-section { padding: 78px 0; }
.v-section-gray { background: var(--gray); }
.v-intro-strip { padding: 0; transform: translateY(-38px); position: relative; z-index: 4; }
.v-strip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow);
}
.v-strip-grid div { padding: 24px; border-right: 1px solid var(--line); }
.v-strip-grid span { color: var(--red); font-weight: 1000; }
.v-strip-grid b { display: block; font-size: 22px; letter-spacing: -.04em; }
.v-strip-grid p { color: var(--muted); margin: 6px 0 0; }
.v-visual-split { display: grid; grid-template-columns: minmax(280px, 390px) 1fr; gap: 34px; align-items: start; }
.v-section-title h1,
.v-section-title h2,
.v-heading-row h2,
.v-page-header h1,
.v-about-layout h1 {
margin: 0;
font-size: clamp(34px, 5.2vw, 62px);
line-height: 1.04;
letter-spacing: -.06em;
}
.v-section-title span { display: block; margin-top: 14px; color: var(--muted); font-size: 18px; }
.v-center { text-align: center; max-width: 860px; margin-inline: auto; margin-bottom: 34px; }
.v-showcase-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; }
.v-showcase-large,
.v-photo-card,
.v-category-card,
.v-price-card,
.v-content,
.v-info-card,
.v-post,
.v-placeholder,
.v-shop {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 18px 58px rgba(16,24,40,.08);
}
.v-showcase-large { overflow: hidden; }
.v-showcase-large .v-photo-placeholder { min-height: 520px; border-radius: 22px 22px 0 0; }
.v-showcase-caption { padding: 24px; }
.v-showcase-caption b { font-size: 26px; letter-spacing: -.04em; }
.v-showcase-caption p { color: var(--muted); margin-bottom: 0; }
.v-showcase-stack { display: grid; gap: 18px; }
.v-photo-card { padding: 16px; }
.v-photo-card .v-photo-placeholder { min-height: 190px; border-radius: 16px; }
.v-photo-card h3 { font-size: 24px; line-height: 1.1; letter-spacing: -.04em; margin: 16px 6px 6px; }
.v-category-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 26px; align-items: start; }
.v-category-rail {
position: sticky;
top: 98px;
padding: 30px;
background: var(--navy);
color: #fff;
border-radius: 24px;
box-shadow: var(--shadow);
}
.v-category-rail p { color: #a8b5c7; font-size: 12px; font-weight: 1000; letter-spacing: .16em; margin: 0 0 12px; }
.v-category-rail h2 { margin: 0; font-size: 44px; line-height: 1.04; letter-spacing: -.06em; }
.v-category-rail span { display: block; margin-top: 14px; color: rgba(255,255,255,.7); }
.v-category-rail a { display: inline-flex; margin-top: 24px; color: #fff; font-weight: 1000; }
.v-category-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.v-category-card { padding: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.v-category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.v-mini-photo { min-height: 220px; border-radius: 16px; }
.v-mini-photo span { font-size: 18px; }
.v-category-card h3 { margin: 18px 10px 8px; font-size: 28px; line-height: 1.08; letter-spacing: -.05em; }
.v-category-card p { margin: 0 10px 10px; color: var(--muted); }
.v-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v-price-card { display: flex; flex-direction: column; min-height: 360px; padding: 28px; }
.v-price-card b { color: var(--red); font-size: 12px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.v-price-card h3 { margin: 16px 0 12px; font-size: 32px; line-height: 1.08; letter-spacing: -.05em; }
.v-price-card strong {
display: block;
padding: 13px 14px;
border-radius: 12px;
background: var(--gray);
color: var(--red);
font-size: 20px;
}
.v-price-card p { color: var(--muted); }
.v-price-card a {
margin-top: auto;
display: inline-flex;
justify-content: center;
padding: 12px 14px;
border-radius: 10px;
background: var(--red);
color: #fff;
font-weight: 1000;
}
.v-price-feature { transform: translateY(-10px); border-color: rgba(201,21,46,.28); box-shadow: 0 24px 80px rgba(201,21,46,.14); }
.v-price-dark { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; }
.v-price-dark p { color: rgba(255,255,255,.72); }
.v-price-dark strong { background: rgba(255,255,255,.12); color: #fff; }
.v-price-dark a { background: #fff; color: var(--navy); }
.v-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.v-heading-row a { color: var(--red); font-weight: 1000; }
.v-cta { padding: 0 0 78px; }
.v-cta-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
padding: 38px;
border-radius: 24px;
background: linear-gradient(135deg, var(--navy), var(--navy2));
color: #fff;
box-shadow: var(--shadow);
}
.v-cta-box p { color: #a8b5c7; font-size: 12px; font-weight: 1000; letter-spacing: .16em; margin: 0 0 10px; }
.v-cta-box h2 { margin: 0; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.055em; max-width: 850px; }
.v-page { padding: 72px 0; }
.v-narrow { max-width: 900px; }
.v-page-header { margin-bottom: 30px; }
.v-content, .v-placeholder, .v-info-card, .v-shop { padding: 28px; overflow-wrap: anywhere; }
.v-about-layout { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 28px; align-items: start; }
.v-about-photo { margin-top: 24px; min-height: 360px; }
.v-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v-post { padding: 24px; }
.v-single-thumb { margin-bottom: 24px; border-radius: 18px; overflow: hidden; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
float: none !important;
margin: 0 !important;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 16px;
box-shadow: 0 16px 50px rgba(15,23,42,.07);
}
.woocommerce ul.products li.product a img { border-radius: 14px; aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
border-radius: 10px !important;
background: var(--red) !important;
color: #fff !important;
font-weight: 1000 !important;
}
.v-footer {
background: #07182e;
color: rgba(255,255,255,.72);
padding: 58px 0 24px;
margin-top: 80px;
}
.v-footer a { color: #fff; }
.v-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
.v-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.v-brand-footer strong { color: #fff; }
.v-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 22px; font-size: 14px; }
@media (max-width: 1080px) {
.v-menu-btn { display: inline-flex; }
.v-menu {
display: none;
position: absolute;
top: 100%;
left: 16px;
right: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px;
box-shadow: var(--shadow);
}
.v-menu.is-open { display: block; }
.v-menu ul { display: grid; }
.v-actions .v-btn { display: none; }
.v-strip-grid,
.v-visual-split,
.v-showcase-grid,
.v-category-layout,
.v-about-layout { grid-template-columns: 1fr; }
.v-category-rail { position: relative; top: auto; }
.v-price-grid,
.v-footer-grid,
.v-post-grid,
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
.v-price-feature { transform: none; }
}
@media (max-width: 720px) {
.v-brand small, .v-cart { display: none; }
.v-hero { min-height: auto; }
.v-photo-hero { min-height: 760px; }
.v-hero-wrap { padding: 76px 0 48px; }
.v-hero h1 { font-size: clamp(38px, 13vw, 58px); }
.v-hero-mini,
.v-strip-grid,
.v-category-cards,
.v-price-grid,
.v-footer-grid,
.v-post-grid,
.woocommerce ul.products { grid-template-columns: 1fr; }
.v-section { padding: 52px 0; }
.v-intro-strip { transform: none; padding-top: 20px; }
.v-heading-row,
.v-cta-box { flex-direction: column; align-items: flex-start; }
} .v-product-showcase{background:linear-gradient(180deg,#fff 0%,#f3f5f8 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v-showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.v-showcase-head>div{max-width:860px}.v-showcase-head p,.v-heading-row-tight p{margin:0 0 12px;color:var(--red);font-size:12px;font-weight:1000;letter-spacing:.16em}.v-showcase-head h2{margin:0;font-size:clamp(34px,5.2vw,62px);line-height:1.04;letter-spacing:-.06em}.v-showcase-head span{display:block;margin-top:14px;color:var(--muted);font-size:18px}
.v-product-visual-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.62fr);gap:18px;align-items:stretch;margin-bottom:26px}.v-product-visual-main,.v-small-product-photo,.v-featured-products-box{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 58px rgba(16,24,40,.08);overflow:hidden}.v-product-photo-main{min-height:560px;border-radius:24px 24px 0 0}.v-product-visual-caption{padding:26px;display:grid;grid-template-columns:minmax(220px,.4fr) 1fr;gap:20px;align-items:start}.v-product-visual-caption b{font-size:30px;line-height:1.08;letter-spacing:-.05em}.v-product-visual-caption p{color:var(--muted);margin:0}.v-product-visual-side{display:grid;gap:18px}.v-small-product-photo{padding:16px}.v-small-product-photo .v-photo-placeholder{min-height:220px;border-radius:18px}.v-small-product-photo h3{margin:16px 8px 8px;font-size:26px;line-height:1.08;letter-spacing:-.05em}.v-featured-products-box{padding:clamp(18px,3vw,30px)}.v-heading-row-tight{margin-bottom:24px}.v-featured-products-box .woocommerce ul.products{grid-template-columns:repeat(4,1fr)}.v-featured-products-box .woocommerce ul.products li.product,.woocommerce-page .v-featured-products-box ul.products li.product{border-radius:18px;box-shadow:none;background:#fff}
@media(max-width:1080px){.v-showcase-head,.v-product-visual-caption{display:block}.v-showcase-head .v-btn{margin-top:18px}.v-product-visual-grid{grid-template-columns:1fr}.v-featured-products-box .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.v-product-photo-main{min-height:360px}.v-featured-products-box .woocommerce ul.products{grid-template-columns:1fr}} .v-real-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--gray);
}
.v-photo-hero-img {
width: 100%;
min-height: 790px;
object-fit: cover;
}
.v-product-photo-main {
width: 100%;
min-height: 560px;
max-height: 620px;
object-fit: cover;
border-radius: 24px 24px 0 0;
}
.v-showcase-minimal {
grid-template-columns: 1fr;
}
.v-showcase-minimal .v-showcase-large > .v-real-photo {
min-height: 520px;
max-height: 620px;
border-radius: 22px 22px 0 0;
}
.v-text-only-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
min-height: 260px;
}
.v-text-only-card p {
margin: 0 8px 8px;
color: var(--muted);
}
.v-card-icon {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
margin: 8px;
border-radius: 16px;
background: linear-gradient(135deg, var(--navy), var(--red));
color: #fff;
font-weight: 1000;
letter-spacing: -.05em;
}
.v-category-card .v-card-icon {
margin: 0 10px 6px;
}
.v-category-card {
padding-top: 26px;
}
.v-about-photo.v-real-photo {
margin-top: 24px;
min-height: 360px;
max-height: 460px;
border-radius: 22px;
object-fit: cover;
box-shadow: 0 18px 58px rgba(16,24,40,.08);
border: 1px solid var(--line);
}
@media (max-width: 720px) {
.v-photo-hero-img { min-height: 760px; }
.v-product-photo-main { min-height: 360px; }
.v-showcase-minimal .v-showcase-large > .v-real-photo { min-height: 340px; }
} .v-full-hero {
position: relative;
padding: clamp(64px, 8vw, 118px) 0;
background: linear-gradient(135deg, rgba(201,21,46,.12), transparent 36%), linear-gradient(135deg, #081f3f, #12345f);
color: #fff;
overflow: hidden;
}
.v-full-hero::after {
content: "";
position: absolute;
inset: auto -10% -35% auto;
width: 520px;
height: 520px;
border-radius: 999px;
background: rgba(255,255,255,.08);
}
.v-full-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
gap: 30px;
align-items: center;
}
.v-full-hero h1 {
margin: 0;
font-size: clamp(42px, 6.4vw, 76px);
line-height: .98;
letter-spacing: -.07em;
text-wrap: balance;
}
.v-full-hero p {
color: rgba(255,255,255,.78);
font-size: 20px;
max-width: 760px;
}
.v-full-card {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
border-radius: 24px;
padding: 28px;
backdrop-filter: blur(16px);
}
.v-full-card ul {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.v-full-card li {
padding: 12px 14px;
border-radius: 12px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.86);
font-weight: 800;
}
.v-breadcrumb-pill {
display: inline-flex;
margin-bottom: 16px;
color: #fff;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.16);
border-radius: 999px;
padding: 8px 13px;
font-size: 12px;
font-weight: 1000;
letter-spacing: .14em;
}
.v-page-section {
padding: 76px 0;
}
.v-page-section-gray {
background: var(--gray);
}
.v-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
gap: 32px;
align-items: start;
}
.v-rich-copy h2,
.v-page-heading h2 {
margin: 0 0 16px;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: -.06em;
}
.v-rich-copy p,
.v-page-heading span {
color: var(--muted);
font-size: 18px;
}
.v-info-list {
display: grid;
gap: 14px;
margin-top: 24px;
}
.v-info-list div {
padding: 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 40px rgba(16,24,40,.06);
}
.v-info-list b {
display: block;
color: var(--red);
margin-bottom: 4px;
}
.v-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.v-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.v-service-box,
.v-solution-box,
.v-package-box,
.v-quote-box,
.v-step-box {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 24px;
box-shadow: 0 18px 58px rgba(16,24,40,.08);
}
.v-service-box i,
.v-solution-box i,
.v-step-box i {
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: rgba(201,21,46,.10);
color: var(--red);
font-style: normal;
font-weight: 1000;
margin-bottom: 18px;
}
.v-service-box h3,
.v-solution-box h3,
.v-package-box h3,
.v-quote-box h3,
.v-step-box h3 {
margin: 0 0 10px;
font-size: 25px;
line-height: 1.12;
letter-spacing: -.04em;
}
.v-service-box p,
.v-solution-box p,
.v-package-box p,
.v-quote-box p,
.v-step-box p {
color: var(--muted);
margin-bottom: 0;
}
.v-package-box {
display: flex;
flex-direction: column;
min-height: 360px;
}
.v-package-box strong {
display: block;
margin: 14px 0;
padding: 13px 14px;
border-radius: 12px;
background: var(--gray);
color: var(--red);
font-size: 20px;
}
.v-package-box ul {
color: var(--muted);
padding-left: 18px;
}
.v-package-box a {
margin-top: auto;
display: inline-flex;
justify-content: center;
border-radius: 10px;
padding: 12px 14px;
background: var(--red);
color: #fff;
font-weight: 1000;
}
.v-package-feature {
background: linear-gradient(135deg, var(--navy), var(--navy2));
color: #fff;
}
.v-package-feature p,
.v-package-feature li {
color: rgba(255,255,255,.72);
}
.v-package-feature strong {
background: rgba(255,255,255,.12);
color: #fff;
}
.v-package-feature a {
background: #fff;
color: var(--navy);
}
.v-quote-panel {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(300px, 1fr);
gap: 24px;
align-items: stretch;
}
.v-quote-mail {
background: linear-gradient(135deg, var(--navy), var(--navy2));
color: #fff;
border-radius: 24px;
padding: 32px;
box-shadow: var(--shadow);
}
.v-quote-mail h2 {
font-size: clamp(32px, 5vw, 58px);
line-height: 1.04;
letter-spacing: -.06em;
margin: 0;
}
.v-quote-mail p {
color: rgba(255,255,255,.75);
}
.v-quote-checklist {
display: grid;
gap: 12px;
}
.v-quote-checklist div {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px;
}
.v-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.v-contact-tile {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: 24px;
box-shadow: 0 18px 58px rgba(16,24,40,.08);
}
.v-contact-tile b {
color: var(--red);
}
.v-map-box {
min-height: 360px;
border-radius: 24px;
background: linear-gradient(135deg, #e7edf6, #f7f8fb);
border: 1px dashed rgba(102,112,133,.45);
display: grid;
place-items: center;
text-align: center;
color: var(--navy);
padding: 28px;
}
.v-page-cta {
background: linear-gradient(135deg, var(--navy), var(--navy2));
color: #fff;
border-radius: 26px;
padding: clamp(30px, 5vw, 56px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: var(--shadow);
}
.v-page-cta h2 {
margin: 0;
font-size: clamp(30px, 4.8vw, 56px);
line-height: 1.04;
letter-spacing: -.06em;
max-width: 820px;
}
.v-page-cta p {
color: rgba(255,255,255,.72);
}
.v-page-cta .v-btn {
min-width: 210px;
}
.v-shop-note {
margin-bottom: 24px;
padding: 22px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 42px rgba(16,24,40,.06);
}
@media (max-width: 1080px) {
.v-full-hero-grid,
.v-two-col,
.v-quote-panel,
.v-contact-grid {
grid-template-columns: 1fr;
}
.v-grid-3,
.v-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.v-page-cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 720px) {
.v-grid-3,
.v-grid-4 {
grid-template-columns: 1fr;
}
.v-page-section {
padding: 52px 0;
}
} .v-rich-block{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,42px);box-shadow:0 18px 58px rgba(16,24,40,.08)}
.v-rich-block h2{margin:0 0 14px;font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:-.06em}.v-rich-block p{color:var(--muted);font-size:18px}.v-mini-label{display:inline-flex;margin-bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(201,21,46,.10);color:var(--red);font-size:12px;font-weight:1000;letter-spacing:.13em}.v-check-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}.v-check-list li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 46px;color:var(--muted)}.v-check-list li:before{content:"✓";position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:99px;background:rgba(201,21,46,.1);color:var(--red);display:grid;place-items:center;font-weight:1000}.v-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}.v-detail-grid div{background:var(--gray);border-radius:16px;padding:18px;color:var(--muted)}.v-detail-grid b{display:block;color:var(--ink);margin-bottom:6px}.v-faq-list{display:grid;gap:14px}.v-faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 12px 42px rgba(16,24,40,.06)}.v-faq-item h3{margin:0 0 8px;font-size:22px;letter-spacing:-.035em}.v-faq-item p{margin:0;color:var(--muted)}@media(max-width:720px){.v-detail-grid{grid-template-columns:1fr}} .v-company-kv {
display: grid;
gap: 12px;
margin-top: 22px;
}
.v-company-kv div {
display: grid;
grid-template-columns: 170px 1fr;
gap: 14px;
padding: 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}
.v-company-kv b { color: var(--navy); }
.v-company-kv span { color: var(--muted); }
.v-contact-methods {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 18px;
}
.v-contact-method {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 26px;
box-shadow: 0 18px 58px rgba(16,24,40,.08);
}
.v-contact-method .v-icon-circle {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 16px;
background: rgba(201,21,46,.1);
color: var(--red);
font-weight: 1000;
margin-bottom: 16px;
}
.v-contact-method h3 {
margin: 0 0 8px;
font-size: 28px;
letter-spacing: -.05em;
}
.v-contact-method p {
color: var(--muted);
}
.v-contact-method a:not(.v-btn) {
color: var(--red);
font-weight: 1000;
}
.v-address-panel {
background: linear-gradient(135deg,var(--navy),var(--navy2));
color: #fff;
border-radius: 26px;
padding: clamp(28px,5vw,54px);
box-shadow: var(--shadow);
}
.v-address-panel p { color: rgba(255,255,255,.75); }
.v-address-panel .v-company-kv div {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.16);
}
.v-address-panel .v-company-kv b,
.v-address-panel .v-company-kv span { color: #fff; }
@media(max-width:820px){
.v-contact-methods { grid-template-columns:1fr; }
.v-company-kv div { grid-template-columns:1fr; }
}