/*
Theme Name: Trends Reinstatement
Theme URI: https://reinstatement.trendsinteriorsg.com
Author: Trends Interior Design Pte Ltd
Description: SEO-optimised, single-page lead-generation WordPress theme for Trends Interior's office reinstatement service — built around the site's own conversion structure (problem/solution, before/after, process, comparison table, gallery, testimonials, FAQ, sticky lead form) with schema.org markup, semantic headings and fast-loading, dependency-light CSS/JS.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: trends-reinstatement
Tags: one-page, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --tr-navy:         #12233d;
  --tr-navy-deep:    #0b1729;
  --tr-steel:        #3c4a5e;
  --tr-amber:        #e2892e;
  --tr-amber-deep:   #c46f1a;
  --tr-green:        #2f8f5b;
  --tr-red:          #c23b3b;
  --tr-bg:           #f7f6f3;
  --tr-card:         #ffffff;
  --tr-line:         #e6e2d9;
  --tr-ink:          #1b2330;
  --tr-ink-soft:     #5b6472;
  --tr-white:        #ffffff;

  --tr-font-display: "Sora", "Noto Sans", sans-serif;
  --tr-font-body: "Inter", -apple-system, sans-serif;

  --tr-radius: 10px;
  --tr-radius-lg: 18px;
  --tr-shadow: 0 20px 40px -22px rgba(11,23,41,0.35);
  --tr-container: 1180px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--tr-font-body);
  color: var(--tr-ink);
  background: var(--tr-bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--tr-navy); text-decoration:none; }
a:hover{ color: var(--tr-amber-deep); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--tr-font-display);
  color: var(--tr-navy);
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1{ font-size: clamp(2rem, 4.4vw, 3.1rem); line-height:1.18; }
h2{ font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3{ font-size: 1.1rem; }
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size:1rem; }
:focus-visible{ outline: 3px solid var(--tr-amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.tr-container{ max-width: var(--tr-container); margin:0 auto; padding: 0 24px; }
.tr-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--tr-font-display);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tr-amber-deep); margin-bottom:.6em;
}
.tr-eyebrow::before{ content:""; width:22px; height:2px; background: var(--tr-amber); display:inline-block; }
.tr-center{ text-align:center; }
.tr-lede{ color: var(--tr-ink-soft); max-width: 62ch; }
.tr-center .tr-lede{ margin-left:auto; margin-right:auto; }

.tr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: .96rem; cursor:pointer; border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.tr-btn-primary{ background: var(--tr-amber); color: var(--tr-navy-deep); }
.tr-btn-primary:hover{ background: var(--tr-amber-deep); color:#fff; transform: translateY(-2px); }
.tr-btn-dark{ background: var(--tr-navy); color: var(--tr-white); }
.tr-btn-dark:hover{ background: var(--tr-navy-deep); }
.tr-btn-ghost{ background: transparent; border-color: var(--tr-white); color: var(--tr-white); }
.tr-btn-ghost:hover{ border-color: var(--tr-amber); color: var(--tr-amber); }
.tr-btn-outline{ background: transparent; border-color: var(--tr-navy); color: var(--tr-navy); }
.tr-btn-outline:hover{ background: var(--tr-navy); color:#fff; }
.tr-btn-sub{ display:block; margin-top:10px; font-size:.82rem; color: var(--tr-ink-soft); text-align:center; }

/* Signature: certification/seal stamp — echoes a BCA-style official mark */
.tr-seal{
  width: 90px; height:90px; border-radius:50%; flex-shrink:0;
  border: 2px dashed var(--tr-amber);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: var(--tr-white); font-family: var(--tr-font-display); font-weight:700;
  color: var(--tr-navy); font-size:.62rem; line-height:1.3; padding:8px;
  box-shadow: var(--tr-shadow);
}

/* =========================================================
   HEADER — minimal, single-page, sticky CTA
   ========================================================= */
.tr-header{ background: var(--tr-white); border-bottom: 1px solid var(--tr-line); position: sticky; top:0; z-index: 50; }
.tr-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 14px 0; }
.tr-logo img{ max-height:44px; width:auto; }
.tr-logo-text{ font-family: var(--tr-font-display); font-weight:700; font-size:1.15rem; color: var(--tr-navy); }
.tr-header-meta{ display:none; font-size:.82rem; color: var(--tr-ink-soft); }
@media (min-width: 700px){ .tr-header-meta{ display:block; } }

/* =========================================================
   HERO
   ========================================================= */
.tr-hero{ background: linear-gradient(180deg, var(--tr-navy) 0%, var(--tr-navy-deep) 100%); color:#fff; padding: 56px 0 0; overflow:hidden; }
.tr-hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center; padding-bottom: 48px; }
.tr-hero .tr-eyebrow{ color: var(--tr-amber); }
.tr-hero h1{ color:#fff; }
.tr-hero h1 em{ font-style:normal; color: var(--tr-amber); }
.tr-hero-sub{ color:#c8cfda; font-size:1.05rem; max-width:52ch; margin-bottom:1.6em; }
.tr-hero-trust{ display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 22px; font-size:.85rem; color:#c8cfda; }
.tr-hero-trust span{ display:inline-flex; align-items:center; gap:6px; }
.tr-hero-trust span::before{ content:"✓"; color: var(--tr-amber); font-weight:700; }

/* Before / after compare slider */
.tr-compare{
  position:relative; aspect-ratio: 4/3; border-radius: var(--tr-radius-lg); overflow:hidden; box-shadow: var(--tr-shadow);
  touch-action: pan-y; user-select:none; background:var(--tr-steel);
}
.tr-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tr-compare .tr-compare-after{ z-index:1; }
.tr-compare .tr-compare-before-wrap{ position:absolute; inset:0; z-index:2; overflow:hidden; width:50%; }
.tr-compare .tr-compare-before-wrap img{ width: var(--tr-compare-w, 200%); max-width:none; height:100%; }
.tr-compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:44px; margin-left:-22px; z-index:3;
  display:flex; align-items:center; justify-content:center; cursor: ew-resize;
}
.tr-compare-handle::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); }
.tr-compare-handle span{
  position:relative; width:44px; height:44px; border-radius:50%; background:#fff; color: var(--tr-navy);
  display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: var(--tr-shadow);
}
.tr-compare-tag{ position:absolute; top:14px; z-index:4; background: rgba(11,23,41,.72); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:5px 12px; border-radius:999px; }
.tr-compare-tag.before{ left:14px; }
.tr-compare-tag.after{ right:14px; }
.tr-compare-caption{ font-size:.82rem; color:#aeb7c4; margin-top:12px; text-align:center; }

@media (max-width: 900px){ .tr-hero-grid{ grid-template-columns:1fr; } }

/* Stat bar under hero */
.tr-statbar{ background: var(--tr-navy-deep); border-top: 1px solid rgba(255,255,255,.08); }
.tr-statbar-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 26px 0; }
.tr-stat{ display:flex; align-items:center; gap:12px; color:#fff; }
.tr-stat img{ width:38px; height:38px; flex-shrink:0; }
.tr-stat strong{ display:block; font-family: var(--tr-font-display); font-size:.95rem; }
.tr-stat span{ display:block; font-size:.78rem; color:#aeb7c4; }
@media (max-width: 880px){ .tr-statbar-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   SECTIONS
   ========================================================= */
.tr-section{ padding: 72px 0; }
.tr-section.tint{ background: var(--tr-white); }
.tr-section-head{ max-width: 720px; margin: 0 auto 40px; text-align:center; }
.tr-section-head.left{ text-align:left; margin-left:0; }

/* Problem cards */
.tr-problem-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.tr-problem-card{ background: var(--tr-card); border:1px solid var(--tr-line); border-radius: var(--tr-radius-lg); padding: 30px; }
.tr-problem-card .tr-tag-flag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background: #fbeaea; color: var(--tr-red); padding:4px 12px; border-radius:999px; margin-top:14px;
}
@media (max-width: 880px){ .tr-problem-grid{ grid-template-columns:1fr; } }

/* Process timeline */
.tr-timeline{ position:relative; max-width: 780px; margin: 0 auto; }
.tr-timeline::before{ content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background: var(--tr-line); }
.tr-timeline-item{ position:relative; padding-left: 68px; margin-bottom: 32px; }
.tr-timeline-item:last-child{ margin-bottom:0; }
.tr-timeline-num{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background: var(--tr-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--tr-font-display); font-weight:700;
}
.tr-timeline-item.done .tr-timeline-num{ background: var(--tr-green); }
.tr-timeline-label{ font-size:.78rem; color: var(--tr-ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3em; }

/* Comparison table */
.tr-compare-table{ width:100%; border-collapse: collapse; background: var(--tr-card); border-radius: var(--tr-radius-lg); overflow:hidden; box-shadow: var(--tr-shadow); }
.tr-compare-table th, .tr-compare-table td{ padding: 16px 18px; text-align:left; border-bottom:1px solid var(--tr-line); font-size:.92rem; }
.tr-compare-table thead th{ font-family: var(--tr-font-display); background: var(--tr-navy); color:#fff; }
.tr-compare-table thead th.recommended{ background: var(--tr-amber); color: var(--tr-navy-deep); }
.tr-compare-table td.recommended, .tr-compare-table th.recommended{ position:relative; }
.tr-compare-table tbody td:not(:first-child){ text-align:center; }
.tr-compare-table .yes{ color: var(--tr-green); font-weight:700; }
.tr-compare-table .no{ color: var(--tr-ink-soft); }
.tr-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:700px){ .tr-compare-table{ min-width:640px; } }

/* Offer section */
.tr-offer{ background: var(--tr-navy); color:#fff; border-radius: var(--tr-radius-lg); overflow:hidden; }
.tr-offer-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:0; align-items:stretch; }
.tr-offer-body{ padding: 48px; }
.tr-offer h2{ color:#fff; }
.tr-offer-list{ margin: 24px 0; }
.tr-offer-list li{ display:flex; gap:12px; margin-bottom:14px; color:#d7dce4; }
.tr-offer-list li::before{ content:"✓"; color: var(--tr-amber); font-weight:700; flex-shrink:0; }
.tr-offer-img{ position:relative; min-height:280px; background: var(--tr-steel); }
.tr-offer-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){ .tr-offer-grid{ grid-template-columns:1fr; } .tr-offer-img{ min-height:220px; order:-1; } }

/* De-risk 4-point grid */
.tr-risk-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.tr-risk-card{ background: var(--tr-card); border:1px solid var(--tr-line); border-radius: var(--tr-radius); padding: 26px; }
.tr-risk-num{ font-family: var(--tr-font-display); font-weight:700; color: var(--tr-amber-deep); font-size:1.4rem; margin-bottom:.4em; }
@media (max-width: 980px){ .tr-risk-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .tr-risk-grid{ grid-template-columns: 1fr; } }

/* Gallery */
.tr-gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.tr-gallery a{ position:relative; aspect-ratio: 4/3; border-radius: var(--tr-radius); overflow:hidden; display:block; }
.tr-gallery img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.tr-gallery a:hover img{ transform: scale(1.06); }
@media (max-width: 880px){ .tr-gallery{ grid-template-columns: repeat(2,1fr); } }

/* Cost factors — reuse risk grid styling */
.tr-cost-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 980px){ .tr-cost-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .tr-cost-grid{ grid-template-columns: 1fr; } }

/* Testimonials */
.tr-commend-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; margin-bottom: 50px; }
.tr-commend-card{ background: var(--tr-card); border:1px solid var(--tr-line); border-radius: var(--tr-radius-lg); overflow:hidden; box-shadow: var(--tr-shadow); }
.tr-commend-card img{ aspect-ratio: 4/3; object-fit:cover; }
.tr-commend-card figcaption{ padding: 16px 20px; font-size:.88rem; color: var(--tr-ink-soft); }
.tr-commend-card figcaption strong{ color: var(--tr-navy); display:block; }
@media (max-width: 780px){ .tr-commend-grid{ grid-template-columns:1fr; } }

.tr-review-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.tr-review-card{ background: var(--tr-card); border:1px solid var(--tr-line); border-radius: var(--tr-radius-lg); padding: 28px; }
.tr-review-stars{ color: var(--tr-amber); letter-spacing:2px; margin-bottom:10px; }
.tr-review-who{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.tr-review-who img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.tr-review-who strong{ display:block; font-size:.9rem; }
.tr-review-who span{ font-size:.78rem; color: var(--tr-ink-soft); }
@media (max-width: 780px){ .tr-review-grid{ grid-template-columns:1fr; } }

/* Services checklist */
.tr-services-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.tr-services-list li{ display:flex; gap:12px; margin-bottom:16px; }
.tr-services-list li::before{ content:"✓"; color: var(--tr-green); font-weight:700; flex-shrink:0; }
@media (max-width: 880px){ .tr-services-grid{ grid-template-columns:1fr; } }

/* FAQ accordion */
.tr-faq{ max-width: 780px; margin:0 auto; }
.tr-faq-item{ background: var(--tr-card); border:1px solid var(--tr-line); border-radius: var(--tr-radius); margin-bottom: 12px; overflow:hidden; }
.tr-faq-q{
  width:100%; text-align:left; background:none; border:none; padding: 18px 22px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family: var(--tr-font-display); font-weight:600; color: var(--tr-navy); font-size:1rem;
}
.tr-faq-q .tr-faq-icon{ flex-shrink:0; transition: transform .2s ease; color: var(--tr-amber-deep); }
.tr-faq-item[open] .tr-faq-icon{ transform: rotate(45deg); }
.tr-faq-a{ padding: 0 22px 20px; color: var(--tr-ink-soft); }

/* Limited capacity CTA */
.tr-capacity{ background: var(--tr-amber); color: var(--tr-navy-deep); text-align:center; padding: 54px 0; }
.tr-capacity h2{ color: var(--tr-navy-deep); }
.tr-capacity p{ max-width:60ch; margin-left:auto; margin-right:auto; }

/* Contact / lead form section */
.tr-contact{ background: var(--tr-navy); color:#fff; }
.tr-contact h2{ color:#fff; }
.tr-contact .tr-lede{ color:#c8cfda; }
.tr-contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items:start; }
.tr-contact-alt{ display:flex; flex-direction:column; gap:14px; margin-top: 26px; }
.tr-contact-alt a{ color:#fff; font-weight:700; }
.tr-contact-alt a:hover{ color: var(--tr-amber); }

.tr-form{ background:#fff; border-radius: var(--tr-radius-lg); padding: 32px; color: var(--tr-ink); box-shadow: var(--tr-shadow); }
.tr-form label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color: var(--tr-navy); }
.tr-form .tr-field{ margin-bottom: 18px; }
.tr-form input[type="text"],
.tr-form input[type="email"],
.tr-form input[type="tel"],
.tr-form textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--tr-line); border-radius: 8px; background: var(--tr-bg);
}
.tr-form textarea{ min-height:100px; resize:vertical; }
.tr-form .tr-consent{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color: var(--tr-ink-soft); margin-bottom:18px; }
.tr-form .tr-consent input{ margin-top:3px; }
.tr-form button{ width:100%; }
.tr-form-note{ text-align:center; font-size:.8rem; color: var(--tr-ink-soft); margin-top:12px; }
.tr-form-success, .tr-form-error{ border-radius: 8px; padding: 14px 16px; margin-bottom:18px; font-size:.9rem; }
.tr-form-success{ background:#e9f6ee; color: var(--tr-green); }
.tr-form-error{ background:#fbeaea; color: var(--tr-red); }
@media (max-width: 900px){ .tr-contact-grid{ grid-template-columns:1fr; } }

/* Sticky mobile CTA bar */
.tr-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; background: var(--tr-navy-deep); padding:12px 16px; display:none; box-shadow: 0 -8px 20px rgba(0,0,0,.2); }
.tr-sticky-cta a{ display:block; text-align:center; }
@media (max-width: 780px){ .tr-sticky-cta{ display:block; } body{ padding-bottom: 66px; } }

/* =========================================================
   FOOTER
   ========================================================= */
.tr-footer{ background: var(--tr-navy-deep); color: #aeb7c4; padding: 40px 0; font-size:.85rem; }
.tr-footer-grid{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tr-footer a{ color:#aeb7c4; }
.tr-footer a:hover{ color: var(--tr-amber); }

/* =========================================================
   GENERIC PAGE / BLOG WRAPPER (secondary pages, e.g. privacy policy, blog)
   ========================================================= */
.tr-page-header{ background: var(--tr-navy); color:#fff; padding: 50px 0; text-align:center; }
.tr-page-header h1{ color:#fff; }
.tr-content-wrap{ padding: 56px 0; }
.tr-content-wrap .tr-container{ max-width: 780px; }
article.post{ background:#fff; border:1px solid var(--tr-line); border-radius: var(--tr-radius); padding: 30px; margin-bottom: 28px; }
.tr-blog-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:40px; align-items:start; }
@media (max-width: 780px){ .tr-blog-layout{ grid-template-columns:1fr; } }
.nav-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.nav-links a, .nav-links span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--tr-line); font-weight:600; font-size:.9rem; border-radius:6px; }
.nav-links a:hover{ background: var(--tr-amber); border-color: var(--tr-amber); color: var(--tr-navy-deep); }

/* Utility */
.tr-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }