/*
Theme Name: Plus 113 Child
Theme URI: https://plus113design.sg
Description: Code-first block child theme for PLUS 113 DESIGN PTE LTD (Singapore design & renovation firm). Config-driven; provisioning engine in inc/provision.php. Deploys to Hostinger via MCP, no SSH.
Author: WarelyEcom
Template: twentytwentyfive
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: plus113-child
*/

:root{
  --ss-ink:#15140F; --ss-graphite:#262219; --ss-cyan:#B08D4F; --ss-cyan-deep:#8A6D38;
  --ss-silver:#C9BCA8; --ss-cloud:#F4F0E9; --ss-white:#FCFAF6; --ss-body:#3A352C;
  --ss-shadow:0 18px 44px -26px rgba(21,20,15,.55); --ss-radius:6px;
  --ss-serif:"Cormorant Garamond",Georgia,serif;
}
body{ background:var(--ss-white); color:var(--ss-body); }
.wp-site-blocks{ overflow-x:clip; }

/* sections */
.ss-section{ padding:clamp(3rem,7vw,6.5rem) 1.5rem; }
.ss-wrap{ max-width:1240px; margin-inline:auto; }
.ss-narrow{ max-width:780px; margin-inline:auto; }
.ss-center{ text-align:center; }
.ss-eyebrow{ display:inline-block; font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:.76rem; color:var(--ss-cyan-deep); margin:0 0 1rem; }
.ss-h{ font-family:"Sora",sans-serif; font-weight:700; color:var(--ss-ink); line-height:1.12; margin:0 0 1rem; letter-spacing:-.01em; }
.ss-h--xl{ font-size:clamp(2rem,3.6vw,2.95rem); }
.ss-lead{ font-size:1.13rem; color:#5A5447; max-width:62ch; line-height:1.7; }
.ss-center .ss-lead{ margin-inline:auto; }
.ss-rule{ width:56px; height:2px; background:var(--ss-cyan); border:0; margin:1.1rem 0; }
.ss-center .ss-rule{ margin-inline:auto; }

/* buttons */
.ss-btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:600; font-size:1rem; padding:.95rem 2rem; border-radius:4px; text-decoration:none; letter-spacing:.02em; transition:transform .15s,background .2s,color .2s; }
.ss-btn--cyan{ background:var(--ss-cyan); color:var(--ss-ink); box-shadow:var(--ss-shadow); }
.ss-btn--cyan:hover{ background:var(--ss-white); color:var(--ss-ink); transform:translateY(-2px); }
.ss-btn--ghost{ background:transparent; color:var(--ss-white); border:1.5px solid rgba(252,250,246,.5); }
.ss-btn--ghost:hover{ background:var(--ss-white); color:var(--ss-ink); border-color:var(--ss-white); }
.ss-btn--dark{ background:var(--ss-ink); color:var(--ss-white); box-shadow:var(--ss-shadow); }
.ss-btn--dark:hover{ background:var(--ss-cyan); color:var(--ss-ink); transform:translateY(-2px); }

/* header */
.ss-header{ position:sticky; top:0; z-index:100; background:var(--ss-ink); }
.ss-header .wp-block-site-title a{ text-decoration:none; color:var(--ss-white); font-family:"Sora",sans-serif; font-weight:700; letter-spacing:.04em; }
.ss-header .wp-block-navigation{ font-weight:500; }
.ss-header .wp-block-navigation a{ color:#D8D0C2; }
.ss-header .wp-block-navigation a:hover{ color:var(--ss-cyan); }
.ss-brand-cn{ color:var(--ss-cyan); font-weight:600; font-size:.7rem; letter-spacing:.36em; text-transform:uppercase; line-height:1; }

/* hero */
.ss-hero{ position:relative; color:var(--ss-white); padding:clamp(4.5rem,12vw,8.5rem) 1.5rem; min-height:84vh; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(100deg, rgba(21,20,15,.92) 0%, rgba(21,20,15,.66) 52%, rgba(21,20,15,.28) 100%), url(assets/img/hero.jpg) center/cover no-repeat; overflow:hidden; }
.ss-hero-inner{ max-width:1240px; margin-inline:auto; width:100%; }
.ss-hero-eyebrow{ color:var(--ss-cyan); font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:.8rem; }
.ss-hero h1{ font-family:"Sora",sans-serif; font-weight:700; color:var(--ss-white); font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.05; margin:.7rem 0 1.1rem; max-width:17ch; letter-spacing:-.02em; }
.ss-hero p{ font-size:clamp(1.05rem,2vw,1.3rem); color:#D5CDBF; max-width:48ch; margin:0 0 2rem; line-height:1.65; }
.ss-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.ss-hero-strip{ margin-top:2.8rem; display:flex; gap:2rem; flex-wrap:wrap; color:#B7AD9B; font-weight:500; font-size:.92rem; }
.ss-hero-strip span{ display:inline-flex; align-items:center; gap:.45rem; }
.ss-hero-strip b{ color:var(--ss-white); }

/* trust bar */
.ss-trust{ background:var(--ss-graphite); color:#ECE6DA; }
.ss-trust .ss-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; padding:1.6rem 1.5rem; }
.ss-trust-item{ display:flex; align-items:center; gap:.7rem; justify-content:center; font-weight:500; font-size:.98rem; text-align:left; }
.ss-trust-item svg{ color:var(--ss-cyan); flex:0 0 auto; }

/* packages */
.ss-pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.8rem; }
.ss-pkg{ background:var(--ss-white); border:1px solid #E5DDCD; border-radius:var(--ss-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--ss-shadow); transition:transform .18s,box-shadow .18s; }
.ss-pkg:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -28px rgba(21,20,15,.55); }
.ss-pkg-img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ss-graphite); }
.ss-pkg-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ss-pkg:hover .ss-pkg-img img{ transform:scale(1.06); }
.ss-pkg-body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.ss-pkg-body h3{ font-family:"Sora",sans-serif; font-weight:600; font-size:1.2rem; color:var(--ss-ink); margin:0; }
.ss-pkg-body p{ margin:0; color:#5A5447; font-size:.95rem; flex:1; line-height:1.6; }
.ss-price{ font-family:"Sora",sans-serif; font-weight:700; color:var(--ss-ink); font-size:1.45rem; }
.ss-price small{ font-size:.78rem; font-weight:500; color:#9A8F7C; text-transform:uppercase; letter-spacing:.08em; }
.ss-pkg .ss-btn{ width:100%; justify-content:center; padding:.75rem 1rem; font-size:.95rem; margin-top:.5rem; }

/* process steps */
.ss-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.8rem; }
.ss-step{ position:relative; padding:1.8rem 1.4rem; background:var(--ss-cloud); border-radius:var(--ss-radius); border:1px solid #E5DDCD; }
.ss-step-n{ font-family:"Sora",sans-serif; font-weight:700; font-size:2.4rem; color:var(--ss-cyan); line-height:1; }
.ss-step h3{ font-family:"Sora",sans-serif; font-weight:600; font-size:1.1rem; color:var(--ss-ink); margin:.6rem 0 .4rem; }
.ss-step p{ margin:0; color:#5A5447; font-size:.94rem; line-height:1.6; }

/* why us (dark band) */
.ss-why{ background:var(--ss-ink); color:#ECE6DA; }
.ss-why h2{ color:var(--ss-white); }
.ss-why .ss-eyebrow{ color:var(--ss-cyan); }
.ss-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.8rem; }
.ss-why-card{ background:var(--ss-graphite); border:1px solid rgba(176,141,79,.18); border-radius:var(--ss-radius); padding:1.9rem 1.4rem; text-align:center; }
.ss-why-ico{ width:56px; height:56px; border-radius:12px; background:rgba(176,141,79,.15); color:var(--ss-cyan); display:grid; place-items:center; margin:0 auto 1rem; }
.ss-why-card h3{ font-family:"Sora",sans-serif; font-weight:600; color:var(--ss-white); font-size:1.12rem; margin:0 0 .4rem; }
.ss-why-card p{ margin:0; color:#B7AD9B; font-size:.94rem; line-height:1.6; }

/* gallery */
.ss-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem; }
.ss-gtile{ position:relative; aspect-ratio:1; border-radius:var(--ss-radius); overflow:hidden; background:var(--ss-graphite); }
.ss-gtile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.ss-gtile:hover img{ transform:scale(1.07); }
.ss-gtile--wide{ grid-column:span 2; aspect-ratio:auto; }
.ss-gcap{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem .9rem; color:#fff; font-family:"Sora",sans-serif; font-weight:600; font-size:.92rem; letter-spacing:.01em;
  background:linear-gradient(transparent, rgba(21,20,15,.78)); opacity:0; transition:opacity .25s; }
.ss-gtile:hover .ss-gcap{ opacity:1; }

/* testimonials */
.ss-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.6rem; }
.ss-quote{ background:var(--ss-white); border:1px solid #E5DDCD; border-radius:var(--ss-radius); padding:1.9rem 1.6rem; box-shadow:var(--ss-shadow); }
.ss-stars{ color:var(--ss-cyan); letter-spacing:3px; font-size:1.05rem; margin-bottom:.8rem; }
.ss-quote p{ font-family:var(--ss-serif); font-style:italic; font-size:1.2rem; line-height:1.55; color:#3A352C; margin:0 0 1.1rem; }
.ss-quote .who{ font-family:"Sora",sans-serif; font-weight:600; color:var(--ss-ink); font-size:.92rem; }

/* location */
.ss-loc{ background:var(--ss-graphite); color:#ECE6DA; }
.ss-loc .ss-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; padding:clamp(2.5rem,5vw,4.5rem) 1.5rem; }
.ss-loc h2{ color:var(--ss-white); }
.ss-loc .ss-eyebrow{ color:var(--ss-cyan); }
.ss-loc-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:1rem; font-size:1.05rem; }
.ss-loc-list li{ display:flex; gap:.85rem; align-items:flex-start; }
.ss-loc-list svg{ color:var(--ss-cyan); flex:0 0 auto; margin-top:.15rem; }

/* cta band */
.ss-cta{ position:relative; color:var(--ss-white); text-align:center; background:linear-gradient(rgba(21,20,15,.86),rgba(21,20,15,.9)),url(assets/img/fullhome.jpg) center/cover no-repeat; }
.ss-cta h2{ color:var(--ss-white); }
.ss-cta .ss-lead{ color:#D5CDBF; }

/* footer */
.ss-footer{ background:var(--ss-ink); color:#C9BCA8; }
.ss-footer a{ color:#C9BCA8; text-decoration:none; }
.ss-footer a:hover{ color:var(--ss-cyan); }
.ss-footer h3{ color:var(--ss-white); font-family:"Sora",sans-serif; }

/* WooCommerce */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price{ color:var(--ss-ink) !important; font-weight:700; }
.woocommerce span.onsale{ background:var(--ss-cyan); color:var(--ss-ink); }
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce .button.alt,.wc-block-components-button{
  background-color:var(--ss-ink) !important; color:#fff !important; border-radius:4px !important; font-weight:600 !important; }
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover{ background-color:var(--ss-cyan) !important; color:var(--ss-ink) !important; }
.home .wp-block-post-title,.page .wp-block-post-title{ display:none !important; }

/* responsive */
@media (max-width:960px){
  .ss-pkgs{ grid-template-columns:repeat(2,1fr); }
  .ss-steps,.ss-why-grid{ grid-template-columns:repeat(2,1fr); }
  .ss-quotes{ grid-template-columns:1fr; }
  .ss-trust .ss-wrap{ grid-template-columns:repeat(2,1fr); }
  .ss-loc .ss-wrap{ grid-template-columns:1fr; }
  .ss-gallery{ grid-template-columns:repeat(2,1fr); }
  .ss-gtile--wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .ss-pkgs,.ss-steps,.ss-why-grid,.ss-trust .ss-wrap{ grid-template-columns:1fr; }
  .ss-gallery{ grid-template-columns:repeat(2,1fr); }
  .ss-gtile--wide{ grid-column:span 2; }
}

/* Remove TT5 default block-gap between sticky header and first section (and above footer) */
.wp-site-blocks > main, .wp-site-blocks > footer{ margin-block-start:0 !important; }

/* ---- UX / mobile / a11y polish pass ---- */
html{ scroll-behavior:smooth; }
img{ max-width:100%; height:auto; }
a:focus-visible,button:focus-visible,summary:focus-visible,.ss-btn:focus-visible,.rx-btn:focus-visible,.wp-element-button:focus-visible{ outline:3px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); outline-offset:3px; }
.wpcf7 label{ display:block; font-weight:600; font-size:.92rem; margin:.2rem 0 .9rem; color:inherit; }
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 textarea{ width:100%; margin-top:.35rem; padding:.7rem .85rem; border:1px solid rgba(0,0,0,.18); border-radius:8px; font:inherit; box-sizing:border-box; background:#fff; color:#222; }
.wpcf7 textarea{ min-height:120px; }
.wpcf7 input:focus,.wpcf7 textarea:focus{ outline:2px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); border-color:transparent; }
.wpcf7 .wpcf7-submit{ cursor:pointer; border:0; color:#fff; background:var(--ss-cyan,var(--rx-red,#5C1A1A)); font-weight:700; padding:.8rem 1.8rem; border-radius:999px; margin-top:.5rem; width:auto; }
.wpcf7 .wpcf7-submit:hover{ filter:brightness(.93); }
@media (max-width:600px){
  .ss-hero,.rx-hero{ min-height:auto !important; padding-top:3.2rem !important; padding-bottom:3.4rem !important; }
  .ss-hero h1,.rx-hero-title{ font-size:clamp(2rem,9vw,2.8rem) !important; }
  .ss-hero-cta,.rx-hero-cta{ flex-direction:column; align-items:stretch; }
  .ss-hero-cta .ss-btn,.rx-hero-cta .rx-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
