@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/jost-latin.woff2) format("woff2")}
/* Ratnam Laminates — brand tokens taken from the logo (red #E30016, ink #1B1918) */
:root{
  --paper:#ffffff;
  --stone:#f1eeea;
  --stone-2:#e4dfd8;
  --ink:#1b1918;
  --graphite:#5e5955;
  --red:#e30016;
  --red-dark:#b80012;
  --kraft:#a9845a;
  --line:#dcd6ce;
  --font:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1200px;
  --gut:clamp(16px,4vw,40px);
  --slant:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--font)}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3{font-weight:500;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:400}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:400}
h3{font-size:1.2rem}
p{margin:0;max-width:65ch}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:8px 14px;z-index:10}

/* Eyebrow: the logo's slanted bar */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.eyebrow::before{content:"";width:34px;height:6px;background:var(--red);transform:skewX(-35deg)}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--graphite)}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;flex-wrap:wrap}
.brand img{width:180px;height:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav a{text-decoration:none;font-size:.95rem;padding:8px 12px;color:var(--graphite)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px var(--red)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 .95rem var(--font);padding:13px 22px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;clip-path:var(--slant);transition:background .2s}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.nav .btn{padding:9px 16px;color:#fff;margin-left:8px}
@media (max-width:820px){
  .site-header .wrap{min-height:0;padding-block:12px 0;gap:6px}
  .brand img{width:150px}
  .nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:6px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .nav .btn{display:none}
  .header-call{display:inline-flex!important}
}
.header-call{display:none;font-size:.9rem;text-decoration:none;font-weight:500}

/* Sections */
section{padding-block:clamp(64px,9vw,120px)}
.alt{background:var(--stone)}
.dark{background:var(--ink);color:#f3f0ec}
.dark .eyebrow,.dark .mono{color:#b9b2aa}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,56px)}
.head p{color:var(--graphite);font-size:1.08rem}
.dark .head p{color:#c9c2ba}

/* Hero */
.hero{padding-block:clamp(48px,8vw,104px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{font-size:1.15rem;color:var(--graphite);margin-top:22px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.facts div{display:grid}
.facts b{font-weight:500;font-size:1.5rem;font-variant-numeric:tabular-nums}
.facts span{font-size:.8rem;color:var(--graphite);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* Sheet stack (hero visual) — swap .swatch blocks for <img> when photos arrive */
.stack{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;margin-inline:auto}
.stack .sheet{position:absolute;width:62%;aspect-ratio:1/2;box-shadow:0 30px 50px -28px rgba(27,25,24,.55);clip-path:var(--slant);overflow:hidden}
.stack .sheet img{width:100%;height:100%;object-fit:cover}
.stack .s1{left:4%;top:12%;transform:rotate(-14deg)}
.stack .s2{left:19%;top:6%;transform:rotate(-5deg)}
.stack .s3{left:34%;top:4%;transform:rotate(5deg)}
.stack .tag{position:absolute;right:0;bottom:6%;background:var(--paper);padding:12px 16px;box-shadow:0 12px 30px -14px rgba(27,25,24,.4);display:grid;gap:2px}
.stack .tag b{font-weight:500}

/* Placeholder surfaces (CSS-only, no image weight) */
.swatch{background:var(--stone-2)}
.sw-oak{background:repeating-linear-gradient(92deg,#c79a6a 0 3px,#b9895a 3px 5px,#d1a676 5px 11px,#bf9161 11px 13px,#cc9f70 13px 22px),#c79a6a}
.sw-walnut{background:repeating-linear-gradient(88deg,#5a3d2b 0 4px,#4a3122 4px 6px,#654532 6px 14px,#523727 14px 17px),#5a3d2b}
.sw-marble{background:radial-gradient(ellipse at 30% 20%,transparent 40%,rgba(120,115,110,.25) 41%,transparent 44%),linear-gradient(125deg,transparent 45%,rgba(110,104,98,.35) 46%,transparent 48%),linear-gradient(160deg,#f4f2ee,#e1ddd7)}
.sw-solid{background:#1f2a33}
.sw-red{background:var(--red)}
.sw-metal{background:linear-gradient(115deg,#7d7a76,#d9d5cf 35%,#8e8a85 55%,#e6e2dc 75%,#94908a)}
.sw-fluted{background:repeating-linear-gradient(90deg,#d8cfc3 0 10px,#c4b9ab 10px 12px,#e5ddd2 12px 13px),#d8cfc3}
.sw-compact{background:linear-gradient(#3a3735 0 82%,#1b1918 82% 84%,#3a3735 84%)}
.sw-door{background:repeating-linear-gradient(90deg,#8a5f3e 0 5px,#7b5234 5px 7px,#94694a 7px 15px),#8a5f3e}
.sw-ivory{background:#ece6dc}

/* Decor grid */
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.decors{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.decors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.decors{grid-template-columns:1fr}}
.decor{text-decoration:none;display:grid;gap:14px}
.decor .swatch{aspect-ratio:4/3;clip-path:var(--slant);transition:transform .35s}
.decor:hover .swatch{transform:translateY(-4px)}
.decor .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.decor h3{font-weight:500}

/* Split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose{display:grid;gap:18px}
.prose p{color:var(--graphite)}
.dark .prose p{color:#c9c2ba}
.prose ul{margin:0;padding-left:1.1em;color:var(--graphite)}

/* Process — a real sequence, so numbered */
.steps{grid-template-columns:repeat(4,1fr);counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid #4a4542;padding-top:20px;display:grid;gap:10px;align-content:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--red);font-size:.85rem}
.step p{color:#c9c2ba;font-size:.95rem}

/* Spec table */
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);background:var(--stone)}
td{font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

/* Product sections */
.product{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--line);scroll-margin-top:90px}
.product:first-of-type{border-top:0}
.product .swatch{aspect-ratio:4/5;clip-path:var(--slant)}
.product .prose{align-content:start}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{border:1px solid var(--line);padding:5px 12px;font-size:.85rem;color:var(--graphite)}
@media (max-width:760px){.product{grid-template-columns:1fr}.product .swatch{aspect-ratio:4/3}}

/* Brands */
.brands{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.brands{grid-template-columns:1fr}}
.brandcard{background:var(--paper);padding:clamp(24px,4vw,40px);display:grid;gap:14px;border:1px solid var(--line)}
.brandcard .name{font-size:1.9rem;letter-spacing:.14em;text-transform:uppercase;font-weight:300}

/* Catalogue cards */
.cats{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cat{text-decoration:none;display:grid;gap:12px}
.cover{aspect-ratio:1/1.414;position:relative;overflow:hidden;clip-path:var(--slant);background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px;transition:transform .35s}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .swatch{position:absolute;inset:auto 0 0 0;height:55%}
.cover .t{position:relative;font-size:1.35rem;line-height:1.2;font-weight:400}
.cover .logo-mini{position:relative;width:90px}
.cat:hover .cover{transform:translateY(-4px)}
.cat .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cat .view{font-size:.9rem;font-weight:500;color:var(--red)}

/* FAQ */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:1.1rem;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:22px;color:var(--graphite)}

/* CTA band */
.cta{background:var(--red);color:#fff;padding-block:clamp(48px,7vw,80px)}
.cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta h2{max-width:20ch}
.cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Contact cards */
.contact-cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.contact-cards{grid-template-columns:1fr}}
.ccard{border:1px solid var(--line);padding:28px;display:grid;gap:10px;align-content:start}
.ccard a{font-size:1.2rem;font-weight:500;text-decoration:none;word-break:break-word}
.ccard a:hover{color:var(--red)}
.ccard address{font-style:normal;color:var(--graphite)}

/* Page header (inner pages) */
.page-head{padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,48px);background:var(--stone)}
.page-head .wrap{display:grid;gap:18px}
.page-head p{color:var(--graphite);font-size:1.1rem}
.crumbs{font-size:.85rem;color:var(--graphite)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--red)}

/* Footer */
.site-footer{background:var(--ink);color:#c9c2ba;padding-block:64px 28px;font-size:.95rem}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:860px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:500;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none}.site-footer a:hover{color:#fff}
.site-footer address{font-style:normal}
.site-footer .legal{border-top:1px solid #35312f;margin-top:48px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.82rem;color:#8f8882}
.site-footer .brand img{width:170px;margin-bottom:18px}

/* Real photography (from catalogues) */
img.swatch{width:100%;height:auto;object-fit:cover;background:var(--stone-2)}
.stack img.sheet{height:124%;object-fit:cover}
.feature-img{width:100%;height:auto;aspect-ratio:1101/1289;object-fit:cover;clip-path:var(--slant)}
.cover:has(img:not(.logo-mini)){padding:0;background:var(--stone)}
td:last-child a{white-space:nowrap}

/* Wide tables become stacked cards on phones and small tablets */
@media (max-width:760px){
  table.stack thead{display:none}
  table.stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{display:block;padding:3px 0;border:0}
  table.stack td:first-child{font-weight:500;font-size:1.05rem;padding-bottom:6px}
  table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
  th,td{padding:12px 14px}
}

/* Room photo gallery: 3-column mosaic, 2 columns on tablets, 1 on phones */
.spaces{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:clamp(10px,1.5vw,18px)}
.space{margin:0;position:relative;overflow:hidden;clip-path:var(--slant)}
.space img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.space:hover img{transform:scale(1.03)}
.space figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#fff;font-size:.85rem;background:linear-gradient(transparent,rgba(27,25,24,.75))}
.space.s0{grid-row:span 2}
.space.s2{grid-row:span 2}
.space.s5{grid-column:span 2}
@media (max-width:1000px){.spaces{grid-template-columns:repeat(2,1fr)}.space.s2{grid-row:span 1}}
@media (max-width:640px){.spaces{grid-template-columns:1fr;grid-auto-rows:auto}.space,.space.s0,.space.s2{grid-row:auto}.space.s5{grid-column:auto}.space img{height:auto;aspect-ratio:4/3}}
.header-call{padding-block:10px}
th,td{overflow-wrap:break-word}
@media (max-width:640px){table:not(.stack) td{overflow-wrap:anywhere}}
@media (max-width:640px){th[scope=row]{width:38%}}