/* Wasa Bothal — Quiet clarity. Shared brand layer, all editorial and sourcing pages. */
:root {
  --ink:#1d2226; --ink-soft:#535b62; --muted:#646c73;
  --bg:#f5f6f7; --card:#fff; --line:#d9dde0; --line-soft:#e5e8ea;
  --teal-900:#17272d; --teal-700:#26576b; --teal-600:#26576b; --teal-500:#38758b;
  --aqua:#edf2f4; --aqua-deep:#cbd8de;
  --amber:#725e3d; --amber-bg:#f5f2ec; --amber-line:#e3dbcd;
  --radius-sm:14px; --radius:24px; --radius-lg:32px;
  --shadow-sm:none; --shadow:0 20px 60px #17272d0d;
  --font:var(--font-latin),"Noto Sans Sinhala",sans-serif;
}
body { background:var(--bg); -webkit-font-smoothing:antialiased; }
a { text-underline-offset:4px; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #38758b; outline-offset:4px; }
:where(section,[id]) { scroll-margin-top:110px; }
.wrap,header.site .bar,footer.site .cols,.stats .wrap,.quote-strip .wrap { max-width:1200px; }
.wrap-narrow { max-width:980px; }
body.home main.wrap-narrow { max-width:1200px; }
header.site { background:rgba(255,255,255,.86); backdrop-filter:blur(24px) saturate(130%); -webkit-backdrop-filter:blur(24px) saturate(130%); border-color:#d9dde080; transition:box-shadow .25s; }
header.site.is-scrolled { box-shadow:0 6px 26px #17272d09; }
header.site .bar { min-height:82px; gap:24px; }
.logo .brand-logo { width:190px; }
nav.main { gap:5px; }
nav.main a { font-size:12px; font-weight:500; padding:11px 13px; min-height:44px; display:flex; align-items:center; }
nav.main a:hover,nav.main a[aria-current="page"] { background:#edf0f2; color:var(--ink); }
nav.main a.nav-cta,nav.main a.nav-cta[aria-current="page"] { background:var(--ink); color:#fff; padding-inline:20px; }
nav.main a.nav-cta:hover { background:#36454e; }
.menu-toggle { display:none; }
.hero { background:#eef0f2; border:0; }
.hero:not(.home-hero) .wrap { max-width:980px; padding-top:64px; padding-bottom:64px; }
.hero h1 { font-size:clamp(34px,4.8vw,60px); font-weight:600; line-height:1.12; letter-spacing:-.045em; text-wrap:balance; }
.hero h1 .si { font-size:18px; font-weight:400; color:var(--muted); line-height:1.8; letter-spacing:0; margin-top:22px; }
.hero p.lede { font-size:17px; line-height:1.8; }
.kicker,.eyebrow { font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--teal-700); }
.home-hero { background:#f5f6f7; }
.home-hero .wrap { max-width:1440px; padding:72px 48px 34px; display:grid; grid-template-columns:1fr; gap:38px; text-align:center; }
.home-hero h1 { font-size:clamp(48px,6.7vw,88px); line-height:1.02; max-width:900px; margin:22px auto 0; letter-spacing:-.06em; }
.home-hero h1 .headline-soft { color:#76818a; }
.home-hero .lede { max-width:660px; margin:22px auto 0; font-size:18px; }
.home-hero .badges { justify-content:center; margin-top:26px; gap:12px; }
.home-hero .hero-art { position:relative; border-radius:28px; box-shadow:none; background:#e1e6e4; }
.home-hero .hero-art img { width:100%; height:auto; aspect-ratio:2.6; object-fit:cover; object-position:center; }
.home-hero .hero-art figcaption { position:absolute; bottom:18px; left:20px; padding:9px 16px; border:1px solid #ffffff66; border-radius:99px; background:#ffffffd9; backdrop-filter:blur(16px); color:#303b3c; font-size:11px; }
.hero .badge { background:transparent; border:0; border-radius:0; padding:0 12px; color:var(--muted); font-size:12px; font-weight:400; }
.hero .badge + .badge { border-left:1px solid var(--line); }
.hero .badge svg { display:none; }
.btn,.btn.accent,.btn.sm { border:1px solid transparent; border-radius:999px; background:var(--ink); color:#fff; box-shadow:none; font-weight:500; font-size:14px; min-height:48px; padding:12px 24px; transition:background .2s,transform .2s,box-shadow .2s; }
.btn.sm { min-height:44px; padding:10px 18px; font-size:13px; }
.btn:hover,.btn.accent:hover { background:#36454e; filter:none; box-shadow:0 6px 16px #17272d14; transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid #bec6cb; box-shadow:none; }
.btn.ghost:hover { background:#e9eef0; border-color:#7d8e97; }
.btn .arr { font-weight:400; transition:transform .2s; }
.btn:hover .arr { transform:translateX(3px); }
.stats { background:transparent; border:0; }
.stats .wrap { background:transparent; padding:18px 20px 32px; gap:0; }
.stat { background:transparent; padding:18px 28px; border-right:1px solid var(--line); }
.stat:last-child { border:0; }
.stat b { font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-.04em; }
.stat span { margin-top:8px; font-size:12px; }
section { padding:64px 0; }
section + section { border-color:var(--line-soft); }
h2 { font-size:clamp(28px,3.4vw,42px); font-weight:600; letter-spacing:-.04em; line-height:1.17; text-wrap:balance; }
h2 .si { color:var(--muted); font-size:15px; font-weight:400; line-height:1.8; margin-top:12px; }
h3 { font-size:20px; font-weight:600; letter-spacing:-.025em; }
.sub { line-height:1.8; }
.grid,.aud { gap:24px; margin-top:32px; }
.card,.card.glass { border:1px solid #e4e7e9; background:#fff; border-radius:24px; padding:28px; box-shadow:none; }
.type,.pick { transition:transform .35s,box-shadow .35s; }
.card .thumb { margin:-28px -28px 24px; border-radius:23px 23px 0 0; aspect-ratio:4/3; }
.card .thumb img,.pick .art img { transition:transform .65s cubic-bezier(.2,.65,.3,1); }
.pick .art { margin:-28px -28px 24px; border-radius:23px 23px 0 0; aspect-ratio:4/3; }
.type .meta,.pick .meta { margin-top:24px; }
.type .si-sub,.pick .si-sub { color:var(--muted); font-weight:400; }
.price { color:var(--ink); font-weight:600; }
.pick .ribbon { background:#fffffff0; color:var(--ink-soft); border:0; font-weight:500; padding:6px 12px; }
.aud .card { padding:36px; }
.aud .card h3 { font-size:28px; margin-top:12px; }
.aud .card .tag { font-size:10px; letter-spacing:.14em; font-weight:500; }
.aud .card ul { margin-top:22px; gap:8px; }
.aud .card ul a { font-weight:400; }
.aud .card .row { margin-top:26px; }
.aud .card:last-child { background:#eaf0f2; border-color:#eaf0f2; }
.tldr { background:#edf1f3; border-color:var(--line); border-radius:24px; padding:28px; }
.tablewrap { border-radius:20px; box-shadow:none; }
thead th { background:#edf0f2; color:var(--ink-soft); font-weight:500; }
tbody td { padding:22px 18px; }
tbody tr:hover,summary:hover { background:#f5f7f8; }
.tagbest { background:#eaf0f2; font-weight:500; }
.check { padding:20px; }
.check .num { background:var(--ink); border-radius:50%; font-weight:500; }
details { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; margin:0; }
summary { padding:24px 46px 24px 0; font-size:16px; font-weight:500; }
details .faq-body { padding:0 32px 24px 0; border:0; }
.notice { border-radius:16px; padding:20px; }
.band { background:#1b272d; border-radius:28px; padding:48px; }
.band p,.quote-strip span { color:#becbd1; }
.band .btn { box-shadow:none; }
.band .btn:hover,.quote-strip .btn:hover { background:#e3ecef; color:var(--ink); }
.band .btn.ghost:hover { background:#ffffff15; color:#fff; }
figure.featured { border:0; border-radius:24px; }
figure.featured figcaption { background:#fff; padding:18px 24px; }
.quote-strip { background:#1b272d; }
.quote-strip .wrap { padding:32px 24px; }
.field label { color:var(--ink); font-weight:500; }
.field input,.field select,.field textarea { border:1px solid #cbd1d5; border-radius:12px; padding:14px 16px; }
.field input:focus,.field select:focus,.field textarea:focus { box-shadow:0 0 0 4px #38758b15; border-color:#38758b; }
footer.site { background:#eaeef0; color:var(--ink-soft); margin-top:72px; }
footer.site .cols { padding:58px 24px 40px; gap:44px; }
footer.site h4,footer.site .brandline { color:var(--ink); }
footer.site h4 { font-size:10px; letter-spacing:.15em; font-weight:600; }
footer.site a { color:var(--ink-soft); font-size:13px; }
footer.site a:hover { color:var(--ink); text-decoration:underline; }
footer.site .legal { border-color:#d5dce0; }
footer.site .legal .wrap { color:var(--muted); padding:24px 24px 86px; font-size:11px; }
.wa-float { background:#23353e; width:50px; height:50px; box-shadow:0 4px 20px #17272d22; border:1px solid #ffffff55; }
.wa-float:hover { background:#345364; box-shadow:0 8px 24px #17272d22; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; background:var(--ink); color:#fff; padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:12px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .type:hover,.pick:hover { transform:translateY(-5px); box-shadow:0 20px 45px #17272d0c; }
  .type:hover .thumb img,.pick:hover .art img { transform:scale(1.035); }
}
@media (max-width:980px) {
  header.site .bar { gap:12px; }
  nav.main a { padding:10px 9px; font-size:11px; }
  .logo .brand-logo { width:155px; }
}
@media (max-width:780px) {
  header.site .bar { min-height:72px; padding:12px 20px; flex-wrap:wrap; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:8px 15px; border:1px solid var(--line); border-radius:99px; background:transparent; font:inherit; font-size:12px; color:var(--ink); }
  nav.main { flex-wrap:wrap; overflow:visible; gap:5px; padding:8px 0; }
  nav.main a { font-size:13px; padding:12px; }
  .nav-ready nav.main { display:none; }
  .nav-ready nav.main.is-open { display:flex; }
  .home-hero .wrap { padding:46px 20px 20px; gap:30px; }
  .home-hero h1 { font-size:clamp(44px,9vw,66px); }
  .home-hero .lede { font-size:16px; }
  .hero:not(.home-hero) .wrap { padding-block:42px; }
  .stats .wrap { padding:8px 12px 20px; }
  .stat { padding:18px; }
  .stat:nth-child(2) { border-right:0; }
  .stat b { font-size:19px; }
  .aud .card { padding:28px; }
  section { padding:44px 0; }
  .band { padding:32px 26px; }
}
@media (max-width:480px) {
  .home-hero h1 .si { font-size:15px; }
  .home-hero .hero-art img { height:auto; aspect-ratio:1.5; }
  .home-hero .hero-art { border-radius:20px; }
  .home-hero .hero-art figcaption { position:static; padding:10px 12px; border:0; border-radius:0; background:#eef0ed; font-size:10px; }
  .home-hero .badges { gap:10px; }
  .hero .badge { padding:0 6px; font-size:10px; }
  .btn { padding:12px 19px; font-size:13px; }
  .grid { gap:20px; }
  .card .thumb,.pick .art { aspect-ratio:16/10; }
  .stat span { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
  header.site { position:static; }
  .menu-toggle,.wa-float { display:none; }
  .nav-ready nav.main { display:flex; }
}

/* Wordmark-led identity: the brand is the first reading level. */
.home-hero h1 .brand-period { color:#0c6152; }
.home-hero h1 .headline-soft { display:inline-block; font-size:.58em; letter-spacing:-.045em; line-height:1.2; margin-top:14px; }
footer.site .brandline .footer-wordmark { width:190px; height:auto; }
@media (max-width:480px) {
  .home-hero h1 { font-size:clamp(44px,12vw,58px); }
  .home-hero h1 .headline-soft { font-size:.59em; margin-top:12px; }
}

/* Scene discovery uses one photographic ratio across desktop and mobile. */
.use-cases .thumb { aspect-ratio:4/3; }
.use-cases .meta { align-items:flex-end; }
.material-choice { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; margin-top:28px; border:1px solid var(--line); border-radius:20px; }
.material-choice h3 { font-size:19px; }
.material-choice p { font-size:14px; color:var(--ink-soft); margin-top:5px; }
.material-choice .btn { flex-shrink:0; }
@media(max-width:640px) { .material-choice { flex-direction:column; align-items:flex-start; padding:24px; } }

/* Retail comparison: equal visual weight for independent shopping options. */
.retail-comparison { table-layout:fixed; min-width:0; }
.retail-comparison th:nth-child(1) { width:24%; }
.retail-comparison th:nth-child(2) { width:23%; }
.retail-comparison th:nth-child(3) { width:32%; }
.retail-comparison th:nth-child(4) { width:21%; }
.retail-comparison tbody td { vertical-align:middle; padding:26px 22px; }
.retail-comparison .shopcell { min-width:0; }
.retail-comparison .shop { gap:12px; font-weight:600; }
.retail-comparison .shopcell .shop .dot { width:36px; height:36px; background:#edf1f3; color:var(--ink-soft); border:1px solid var(--line); border-radius:50%; font-weight:500; }
.retail-comparison .shop-name { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.retail-comparison .tagbest { margin:0; padding:3px 8px; white-space:nowrap; font-size:10px; letter-spacing:.025em; color:var(--ink-soft); background:#edf1f3; border-radius:5px; }
.retail-comparison .price { font-size:16px; letter-spacing:-.02em; }
.retail-comparison .per { display:inline-block; margin-top:5px; line-height:1.6; }
.retail-comparison .retail-action .btn { white-space:nowrap; width:100%; max-width:154px; }
.seller-search { display:flex; flex-direction:column; gap:5px; font-size:12px; line-height:1.6; color:var(--muted); }
.seller-search b { color:var(--ink-soft); font-weight:500; font-size:13px; }
@media (max-width:900px) {
 .retail-comparison tbody td { padding:22px 14px; }
 .retail-comparison .retail-action .btn { padding:10px 12px; }
}
@media (max-width:700px) {
 #compare .tablewrap { border:0; background:transparent; overflow:visible; border-radius:0; }
 .retail-comparison,.retail-comparison tbody { display:block; }
 .retail-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .retail-comparison tbody tr { display:grid; grid-template-columns:1fr; background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; margin-top:16px; }
 .retail-comparison tbody td { display:block; border:0; padding:12px 0; }
 .retail-comparison tbody td.shopcell { padding:0 0 18px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); }
 .retail-comparison .shop-name { flex-direction:row; align-items:center; gap:12px; }
 .retail-comparison td[data-label]::before { content:attr(data-label); display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
 .retail-comparison td.retail-action { padding-bottom:0; }
 .retail-comparison .retail-action .btn { max-width:none; }
}

/* Keep bulk-card reading links left and quote actions right. */
#bulk .meta .bulk-guide { min-width:0; font-size:14px; }
#bulk .meta .btn { margin-left:auto; flex-shrink:0; }

/* Keep the complete home photograph within the desktop opening viewport. */
.home-hero .wrap { padding-top:28px; padding-bottom:24px; gap:22px; }
.home-hero h1 { font-size:clamp(44px,4.4vw,64px); margin-top:12px; }
.home-hero h1 br { display:none; }
.home-hero h1 .headline-soft { display:block; font-size:clamp(24px,2.2vw,32px); margin-top:8px; }
.home-hero h1 .si { font-size:15px; line-height:1.5; margin-top:12px; }
.home-hero p.lede { font-size:16px; line-height:1.6; margin-top:12px; max-width:720px; }
.home-hero .badges { margin-top:16px; }
.home-hero .badges + .badges { margin-top:14px; }
.home-hero .hero-art { width:100%; max-width:1200px; justify-self:center; }
.home-hero .hero-art img { display:block; height:auto; aspect-ratio:2022/778; object-fit:contain; }
@media (min-width:781px) and (min-height:650px) {
  .home-hero .wrap { height:calc(100svh - 83px); max-height:1000px; grid-template-rows:auto minmax(0,1fr); }
  .home-hero .hero-art { width:auto; height:100%; max-width:100%; aspect-ratio:2022/778; }
  .home-hero .hero-art img { width:100%; height:100%; }
}
@media (max-width:780px) {
  .home-hero .wrap { padding:24px 20px 20px; gap:20px; }
  .home-hero .hero-art { border-radius:20px; }
  .home-hero .hero-art figcaption { bottom:10px; left:10px; font-size:10px; padding:6px 10px; }
}
@media (max-width:480px) {
  .home-hero .badges { gap:8px; }
  .home-hero .badges .btn { padding:10px 12px; font-size:12px; min-height:44px; }
}

/* Quote form: clear groups with optional detail kept out of the main path. */
.quote-page .hero .wrap { padding-block:36px; }
.quote-page .hero h1 { font-size:clamp(32px,4vw,46px); }
.quote-page .hero h1 .si { margin-top:12px; font-size:16px; }
.quote-page main > section:first-child { padding-top:28px; }
.quote-page #form-panel > .sub { font-size:14px; max-width:70ch; line-height:1.6; }
.quote-form { display:grid; gap:24px; margin-top:24px; }
.quote-group { min-width:0; margin:0; padding:22px 24px 24px; background:#fff; border:1px solid var(--line-soft); border-radius:20px; }
.quote-group legend { padding:0 8px; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.quote-group legend span { color:var(--teal-700); font-size:12px; margin-right:10px; }
.quote-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.quote-fields .full { grid-column:1/-1; }
.quote-form .field label { font-size:13px; letter-spacing:0; }
.quote-form .field input:not([type="checkbox"]),.quote-form .field select,.quote-form .field textarea { padding:10px 12px; min-height:44px; border-radius:9px; font-size:16px; }
.quote-form .field textarea { min-height:96px; }
.quote-form .field select {
  -webkit-appearance:none;
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23535b62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}
@media (forced-colors:active) {
  .quote-form .field select { -webkit-appearance:auto; appearance:auto; background-image:none; }
}
.quote-extra { border:1px solid var(--line); border-radius:16px; padding:0 24px; background:transparent; }
.quote-extra summary { padding:18px 28px 18px 0; font-size:15px; font-weight:500; }
.quote-extra summary span { color:var(--muted); font-size:12px; font-weight:400; margin-left:10px; }
.quote-extra .quote-fields { padding-bottom:22px; }
.quote-form .field-help { font-size:12px; color:var(--muted); line-height:1.5; margin-top:6px; }
.quote-submit { padding:0 8px; }
.quote-submit .consent label { font-size:12px; line-height:1.7; color:var(--ink-soft); }
.quote-submit button { margin-top:18px; }
.quote-submit .form-foot { margin-top:10px; }
@media(min-width:900px) { .quote-fields.order-fields { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  .quote-group { padding:18px 16px; }
  .quote-fields { grid-template-columns:1fr; gap:16px; }
  .quote-extra { padding-inline:16px; }
  .quote-extra summary span { display:block; margin:4px 0 0; }
  .quote-submit { padding:0; }
  .quote-submit button { width:100%; }
}

/* Site pages (About, Contact, Quote, Privacy, Terms): same look, tighter vertical rhythm */
.site-doc .hero:not(.home-hero) .wrap { padding-top:28px; padding-bottom:20px; }
.site-doc .hero h1 .si { margin-top:12px; }
.site-doc .hero p.lede { margin-top:12px; }
.site-doc .hero .badges { margin-top:14px; }
.site-doc main > section { padding:22px 0; }
.site-doc main > section:first-child { padding-top:16px; }
.site-doc h2 + .card,
.site-doc h2 + .tldr { margin-top:12px; }
.site-doc .tldr { margin-top:12px; }
.site-doc .checklist { margin-top:12px; }
.site-doc figure.featured { margin-top:16px; }
.site-doc .band { padding:32px 36px; }
.site-doc footer.site { margin-top:36px; }
.site-doc.quote-page .hero .wrap { padding-block:24px; }
.site-doc.quote-page .quote-form { gap:16px; margin-top:16px; }
.site-doc.quote-page .quote-group { padding:16px 20px 18px; }
.site-doc.quote-page .quote-fields { gap:14px 16px; }
@media (max-width:780px) {
  .site-doc .hero:not(.home-hero) .wrap { padding-block:20px; }
  .site-doc main > section { padding:18px 0; }
  .site-doc .band { padding:24px 22px; }
}