/* MOTIF — wholesale landing page + blog */

/* ---------- shared ---------- */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-size:clamp(32px,4.4vw,56px);line-height:1.08;max-width:19ch}
.page-hero .lede{font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:60ch;margin:20px 0 0}
.page-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.page-hero .hero-cta .btn{flex:0 0 auto}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding:0;list-style:none}
.hero-badges li{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.hero-badges li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

.sect{padding:76px 0}
.sect-tight{padding:52px 0}
.sect-head{max-width:70ch;margin-bottom:40px}
.sect-head h2{font-size:clamp(26px,3vw,38px);line-height:1.15}
.sect-head p{margin:16px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.sect-alt{background:var(--paper-deep)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.tile h3{font-size:19px;margin-bottom:10px}
.tile p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted)}
.tile .num{font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.14em;display:block;margin-bottom:12px}

.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:14px;margin-bottom:16px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* product cards */
.prod{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.prod-img{aspect-ratio:1/1;background:var(--paper-deep);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-size:16.5px;margin-bottom:8px}
.prod-body p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 16px;flex:1}
.prod-body .link{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}

/* form */
.lead-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.lead-aside h2{font-size:clamp(26px,3vw,36px);line-height:1.15}
.lead-aside p{color:var(--muted);line-height:1.7;margin:16px 0 0}
.lead-list{list-style:none;padding:0;margin:26px 0 0}
.lead-list li{font-size:14.5px;padding:12px 0 12px 28px;position:relative;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.lead-list li::before{content:"✓";position:absolute;left:0;top:12px;color:var(--accent);font-size:13px}

.form-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;line-height:1.4
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff}
.field textarea{min-height:104px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:14px 0 0}
.form-ok{background:#eef5ec;border:1px solid #c9dfc4;color:#2c4a26;border-radius:10px;padding:14px 16px;font-size:14px;margin-bottom:18px}
.form-err{background:#fbeeea;border:1px solid #e8c3b7;color:#7d2d17;border-radius:10px;padding:14px 16px;font-size:14px;margin-bottom:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* faq */
.faq{max-width:80ch}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-size:16.5px;font-family:var(--serif);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:14px 0 0;color:var(--muted);line-height:1.75;font-size:15px}

/* cta band */
.cta-band{background:var(--ink);color:var(--paper);padding:64px 0}
.cta-band h2{font-size:clamp(26px,3vw,38px);max-width:24ch}
.cta-band p{color:#cdc4b4;max-width:60ch;margin:16px 0 26px;line-height:1.7}
.cta-band .btn-dark{background:var(--paper);color:var(--ink)}
.cta-band .btn-dark:hover{background:var(--accent);color:#fff}

/* ---------- blog ---------- */
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.post-card:hover{border-color:var(--ink)}
.post-card .thumb{aspect-ratio:16/10;background:var(--paper-deep);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.post-card h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.post-card p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 18px;flex:1}
.post-card .more{font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.04em}

.article{max-width:78ch;margin:0 auto;padding:56px 0 40px}
.article .crumbs{font-size:13px;color:var(--muted);margin-bottom:22px}
.article .crumbs a:hover{color:var(--accent)}
.article h1{font-size:clamp(30px,3.6vw,44px);line-height:1.15;margin-bottom:18px}
.article .meta{font-size:13px;color:var(--muted);letter-spacing:.05em;margin-bottom:34px}
.article .body{font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.article .body h2{font-size:26px;color:var(--ink);margin:44px 0 14px;line-height:1.25}
.article .body h3{font-size:20px;color:var(--ink);margin:32px 0 10px;line-height:1.3}
.article .body p{margin:0 0 18px}
.article .body ul,.article .body ol{margin:0 0 20px;padding-left:22px}
.article .body li{margin-bottom:9px}
.article .body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article .body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.article .body th,.article .body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article .body th{background:var(--paper-deep);font-weight:600}
.article .body blockquote{margin:26px 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--paper-deep);color:var(--ink-soft)}
.article .body figure{margin:26px 0}
.article .body figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.article .body code{background:var(--paper-deep);padding:2px 6px;border-radius:4px;font-size:14px}

.article-foot{border-top:1px solid var(--line);margin-top:48px;padding-top:26px}
.article-foot .cta-inline{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;background:var(--paper-deep);border-radius:12px;padding:24px}
.article-foot .cta-inline p{margin:0;font-size:15px;max-width:46ch}

.related{margin-top:48px}
.related h2{font-size:22px;margin-bottom:20px}
.related .blog-list{grid-template-columns:repeat(3,1fr);gap:20px}

@media(max-width:980px){
  .grid-3,.grid-4,.blog-list,.related .blog-list{grid-template-columns:repeat(2,1fr)}
  .lead-wrap{grid-template-columns:1fr;gap:34px}
}
@media(max-width:640px){
  .grid-3,.grid-4,.grid-2,.blog-list,.related .blog-list{grid-template-columns:1fr}
  .page-hero{padding:40px 0 34px}
  .sect{padding:52px 0}
  .field-row{grid-template-columns:1fr}
  .article{padding:36px 0 24px}
  .article .body{font-size:16px}
}