/* Sburq Supply Co. — Editorial wholesale linens */
:root{
  --paper:#F6F2EA; --paper-2:#EFE9DD; --ink:#1A1A1A; --ink-2:#3A3A3A;
  --navy:#1F2A3C; --navy-2:#2E3D55; --sage:#7A8B6F; --copper:#B66E3B;
  --line:#D9D2C4; --muted:#6F6A60; --white:#FFFDF9;
  --shadow: 0 1px 2px rgba(31,42,60,.06), 0 8px 24px rgba(31,42,60,.08);
  --r: 4px; --container: 1180px;
  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-decoration:none; transition:color .2s}
a:hover{color:var(--copper)}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:var(--navy); letter-spacing:-.01em; line-height:1.15; margin:0 0 .6em}
h1{font-size:clamp(2.2rem, 4.5vw, 3.6rem); font-weight:400}
h2{font-size:clamp(1.7rem, 3vw, 2.4rem)}
h3{font-size:1.3rem}
h4{font-size:1.05rem; font-family:var(--sans); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--copper); font-size:.78rem}
p{margin:0 0 1em; color:var(--ink-2)}
.eyebrow{display:inline-block; font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); font-weight:600; margin-bottom:14px}
.lede{font-family:var(--serif); font-size:1.25rem; line-height:1.55; color:var(--navy-2); font-weight:400}

/* Skip link */
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:200}
.skip:focus{left:8px; top:8px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(246,242,234,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .25s ease}
.site-header.scrolled{padding-block:0}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; transition:padding .25s}
.scrolled .nav{padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.35rem; color:var(--navy); font-weight:500}
.brand svg{width:34px; height:34px}
.brand small{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:-4px; font-weight:600}
.nav-links{display:flex; gap:28px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{font-size:.92rem; color:var(--ink); position:relative; padding-bottom:3px}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--copper); transform:scaleX(0); transform-origin:right; transition:transform .3s ease}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1); transform-origin:left}
.nav-cta{background:var(--navy); color:#fff !important; padding:10px 18px; border-radius:var(--r); font-size:.86rem; font-weight:500}
.nav-cta:hover{background:var(--copper); color:#fff !important}
.nav-cta::after{display:none}
.menu-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition:.3s}

@media (max-width: 920px){
  .menu-toggle{display:block}
  .nav-links{position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column; padding:32px; gap:18px; transform:translateX(100%); transition:transform .3s ease}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.1rem}
}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--paper-2)}
.hero-inner{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; padding:90px 0 100px}
.hero h1{margin-bottom:20px}
.hero-img{aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); box-shadow:var(--shadow)}
.hero-img img{width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 8s ease}
.hero-img:hover img{transform:scale(1.04)}
.hero-meta{display:flex; gap:28px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
.hero-meta div{font-size:.85rem; color:var(--muted)}
.hero-meta strong{display:block; font-family:var(--serif); font-size:1.3rem; color:var(--navy); font-weight:500}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr; padding:60px 0 70px}}

/* Buttons */
.btn{display:inline-block; padding:14px 26px; border-radius:var(--r); font-size:.95rem; font-weight:500; cursor:pointer; border:0; transition:all .25s; font-family:var(--sans)}
.btn-primary{background:var(--navy); color:#fff !important}
.btn-primary:hover{background:var(--copper); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--navy) !important; border:1px solid var(--navy); padding:13px 25px}
.btn-ghost:hover{background:var(--navy); color:#fff !important}
.btn-group{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}

/* Sections */
section{padding:80px 0}
.section-head{max-width:680px; margin-bottom:48px}
.section-head.center{margin-inline:auto; text-align:center}

/* Grid cards */
.grid{display:grid; gap:28px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .35s, box-shadow .35s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card-img{aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:22px}
.card-body h3{margin-bottom:8px; font-size:1.2rem}
.card-body p{font-size:.92rem; margin-bottom:14px; color:var(--muted)}
.card-meta{display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted)}
.card-meta strong{color:var(--copper); font-weight:600; font-family:var(--sans)}

/* Feature row */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:90px}
.feature:nth-child(even){direction:rtl}
.feature:nth-child(even) > *{direction:ltr}
.feature img{border-radius:var(--r); aspect-ratio:5/4; object-fit:cover; box-shadow:var(--shadow)}
@media(max-width:820px){.feature{grid-template-columns:1fr; gap:30px; margin-bottom:60px} .feature:nth-child(even){direction:ltr}}

/* Value props */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px}
@media(max-width:820px){.value-grid{grid-template-columns:1fr}}
.value h4{margin-bottom:8px}
.value h3{font-size:1.15rem; margin-bottom:10px; color:var(--navy)}
.value p{font-size:.93rem}
.value-num{font-family:var(--serif); font-size:2rem; color:var(--copper); display:block; margin-bottom:6px}

/* Steps */
.steps{counter-reset:step}
.step{display:grid; grid-template-columns:80px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--line)}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--serif); font-size:2rem; color:var(--copper); font-weight:500}
.step h3{margin-bottom:6px}

/* Quote / testimonials */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.quote{background:var(--paper-2); padding:32px; border-left:3px solid var(--copper); border-radius:var(--r)}
.quote p{font-family:var(--serif); font-size:1.15rem; line-height:1.5; color:var(--navy); margin-bottom:18px}
.quote footer{font-size:.85rem; color:var(--muted); font-style:normal}
.quote footer strong{display:block; color:var(--ink); font-style:normal; font-weight:600; font-family:var(--sans)}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* CTA block */
.cta-band{background:var(--navy); color:#fff; padding:80px 0; text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.78); max-width:560px; margin-inline:auto; margin-bottom:28px}
.cta-band .btn-primary{background:var(--copper)}
.cta-band .btn-primary:hover{background:#a0612f}

/* Article */
article.prose{max-width:760px; margin:0 auto}
article.prose h2{margin-top:1.6em}
article.prose h3{margin-top:1.4em}
article.prose p, article.prose li{font-size:1.05rem; line-height:1.75; color:var(--ink-2)}
article.prose ul, article.prose ol{padding-left:22px; margin-bottom:1.2em}
article.prose blockquote{border-left:3px solid var(--copper); padding:6px 0 6px 24px; margin:1.6em 0; font-family:var(--serif); font-size:1.2rem; color:var(--navy); font-style:italic}
article.prose img{border-radius:var(--r); margin:1.4em 0; box-shadow:var(--shadow)}
.article-head{padding:60px 0 40px; text-align:center; max-width:780px; margin-inline:auto}
.article-head .eyebrow{display:block}
.article-meta{font-size:.85rem; color:var(--muted); margin-top:10px}
.article-hero{aspect-ratio:16/8; overflow:hidden; border-radius:var(--r); margin-bottom:40px}
.article-hero img{width:100%; height:100%; object-fit:cover}

/* FAQ */
details.faq{border-bottom:1px solid var(--line); padding:22px 0}
details.faq summary{cursor:pointer; font-family:var(--serif); font-size:1.18rem; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-size:1.5rem; color:var(--copper); transition:transform .3s}
details.faq[open] summary::after{content:"−"}
details.faq p{margin-top:14px}

/* Form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; max-width:760px}
.form-grid .full{grid-column:1/-1}
label{display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; letter-spacing:.02em}
input, select, textarea{width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--white); border-radius:var(--r); font-family:var(--sans); font-size:.95rem; color:var(--ink); transition:border-color .2s}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px rgba(182,110,59,.12)}
textarea{min-height:140px; resize:vertical}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#161E2D; color:#C5CBD6; padding:64px 0 28px; margin-top:60px}
.site-footer h5{font-family:var(--sans); color:#fff; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 16px; font-weight:600}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.site-footer a{color:#C5CBD6}
.site-footer a:hover{color:var(--copper)}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:8px; font-size:.9rem}
.footer-brand p{color:#8A91A0; font-size:.88rem; max-width:320px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; font-size:.8rem; color:#8A91A0; flex-wrap:wrap; gap:10px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1}}

/* Cookie banner */
.cookie{position:fixed; bottom:18px; left:18px; right:18px; max-width:680px; margin:0 auto; background:var(--navy); color:#fff; padding:18px 22px; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.25); display:none; z-index:100; align-items:center; gap:18px; flex-wrap:wrap}
.cookie.show{display:flex; animation:slideUp .4s ease}
.cookie p{margin:0; color:rgba(255,255,255,.85); font-size:.88rem; flex:1; min-width:240px}
.cookie a{color:var(--copper); text-decoration:underline}
.cookie button{padding:10px 18px; border:0; border-radius:4px; font-size:.85rem; cursor:pointer; font-weight:500}
.cookie .accept{background:var(--copper); color:#fff}
.cookie .decline{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4)}

@keyframes slideUp{from{transform:translateY(20px); opacity:0} to{transform:translateY(0); opacity:1}}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{animation:none !important; transition:none !important}
}

/* Breadcrumbs */
.crumbs{font-size:.82rem; color:var(--muted); padding:18px 0; border-bottom:1px solid var(--line)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--copper)}

/* Page header */
.page-head{padding:70px 0 50px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.page-head .eyebrow{display:block}
.page-head h1{margin-bottom:14px}
.page-head p{max-width:620px; font-size:1.08rem}

/* SKU table */
.sku-table{width:100%; border-collapse:collapse; margin:24px 0; font-size:.92rem}
.sku-table th, .sku-table td{padding:14px 12px; text-align:left; border-bottom:1px solid var(--line)}
.sku-table th{background:var(--paper-2); font-weight:600; color:var(--navy); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}
.sku-table tr:hover td{background:rgba(182,110,59,.04)}

/* Pricing tiers */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px}
.tier{background:var(--white); border:1px solid var(--line); padding:32px; border-radius:var(--r); position:relative}
.tier.featured{border-color:var(--copper); border-width:2px}
.tier .badge{position:absolute; top:-12px; left:24px; background:var(--copper); color:#fff; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:20px}
.tier h3{margin-bottom:6px}
.tier .price{font-family:var(--serif); font-size:2rem; color:var(--copper); margin:10px 0}
.tier ul{list-style:none; padding:0; margin:18px 0}
.tier li{padding:8px 0 8px 22px; position:relative; font-size:.92rem; color:var(--ink-2)}
.tier li::before{content:"✓"; position:absolute; left:0; color:var(--sage); font-weight:700}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:50px 0; border-block:1px solid var(--line); margin:60px 0}
.stat strong{display:block; font-family:var(--serif); font-size:2.4rem; color:var(--navy); font-weight:400}
.stat span{font-size:.85rem; color:var(--muted)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Map */
.map{aspect-ratio:16/8; background:var(--paper-2); border-radius:var(--r); overflow:hidden; margin-top:30px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; text-align:center; padding:20px}
.map iframe{width:100%; height:100%; border:0}