/* FINISHING — edit this file for the latest visual layer.
   Background credit and license: ../referensi/SUMBER-GAMBAR.txt.
   Decorative stock texture only; product photographs remain original. */
:root { --brick-background:url('assets/images/red-brick-wall.webp'); }
.brand-name {font-family:var(--font-body);font-size:1.02rem;font-weight:700;letter-spacing:-.035em;text-transform:none;white-space:nowrap}
.logo small {font-size:.51rem;letter-spacing:.11em}
.nav__inner {gap:20px}
.hero {background-color:#f8f4ed;background-image:linear-gradient(90deg,rgba(35,19,13,.94) 0%,rgba(55,26,17,.9) 42%,rgba(54,25,15,.55) 100%),var(--brick-background);background-size:cover;background-position:center;color:#fff7ed;border-bottom:0}
.hero__grid {padding-top:66px;padding-bottom:66px;gap:66px}
.hero__tag {color:#f3c4a8;font-size:.63rem}
.hero__tag .dot {background:#f0a980}
.hero h1 {font-size:clamp(3rem,4.3vw,4.1rem);color:#fff8ee;line-height:1.07;letter-spacing:-.03em}
.hero h1 em {color:#eda580}
.hero__lead {color:#f0dfd3;font-size:.98rem;line-height:1.85}
.hero .btn--putih {background:#f5dfc5;color:#3d2116;border:1px solid #f5dfc5}
.hero .btn--putih:hover {background:#fff3e0;color:#3d2116}
.hero .btn--garis {background:rgba(31,19,13,.22);color:#fff7ed;border-color:#b39680}
.hero .btn--garis:hover {background:#fff7ed;color:#5f3021;border-color:#fff7ed}
.hero__facts {border-color:#e7b99545}
.hero__facts li {color:#e9ceba}
.hero__facts li+li {border-color:#e7b99545}
.hero__facts strong {color:#fff7ed;font-size:1.15rem}
.hero__art {padding:12px 0 28px;min-width:0}
.hero-visual {width:100%;border-radius:96px 8px 8px 8px;border:1px solid #f0c6a755;box-shadow:0 24px 55px #140d0a44}
.hero-visual>img {height:530px;object-position:center 52%}
.hero-visual figcaption {text-align:left;bottom:27px}
.hero-visual figcaption>span:last-child {text-align:left}
.hero-visual figcaption strong {font-size:1.45rem}
.hero-tile {right:-16px;bottom:3px;width:153px;background:#faf4e9;transform:rotate(3deg)}
.hero-tile img {height:117px}
.hero-tile span {color:#643d29}
.material-label {top:31px;right:18px;color:#744329;background:#fff4e3ec}
.band {background:#854029;border-top:1px solid #d4a07c55;border-bottom:1px solid #61301e}
.band__row {padding-top:21px;padding-bottom:21px}
#produk {background:radial-gradient(ellipse at 0 0,#eeddca80,transparent 50%),var(--paper)}
.card {border-color:#d9c8b7;box-shadow:0 6px 25px #502d1805;border-radius:9px}
.card__art {border-bottom:1px solid #d8c5b4;aspect-ratio:4/3}
.card__body {padding:27px}
.card__desc {font-size:.89rem}
.card h3 {font-size:1.7rem}
.card__label {box-shadow:0 3px 12px #2a130b1c}
.product-spec li {font-size:.79rem}
.kotak-grosir {background-image:linear-gradient(90deg,#422218f5,#572b1ddd),var(--brick-background);background-size:cover;background-position:center 40%;padding:35px;border:1px solid #714332}
.story {background:#eee4d6}
.story-photo img {border:7px solid #fbf5eb;box-shadow:0 16px 40px #42261612}
.story-copy p {font-size:.96rem}
.pengiriman {background-image:linear-gradient(#2d1c15ef,#2d1c15f5),var(--brick-background);background-size:cover;background-position:center}
.guide-card {border-top:3px solid #b36c4b;background:#fffcf7}
.faq-section {background:#eee4d6}
.faq-list summary {font-size:.95rem}
footer.site {border-top:4px solid #a45b3b}
.photo-credit {display:block;font-size:.65rem!important;color:#c5a38b!important;margin-top:4px;text-decoration:underline;text-underline-offset:3px}
@media(min-width:1101px){.hero__grid{grid-template-columns:1.07fr 1fr}.hero h1{font-size:4rem}}
@media(max-width:1100px){.brand-name{font-size:.91rem}.nav__links a{font-size:.76rem}.nav__links .nav__cta{padding:11px 12px}.hero__grid{gap:36px}.hero h1{font-size:3.3rem}.hero-visual>img{height:500px}.hero-tile{width:135px}.hero-tile img{height:102px}}
@media(min-width:681px) and (max-width:900px){.hero h1{font-size:2.85rem}.hero__grid{padding-block:48px;gap:28px}.hero__lead{font-size:.9rem}.hero-visual>img{height:480px}.card__body{padding:18px}.card h3{font-size:1.4rem}.card__desc{font-size:.82rem}.hero-visual figcaption>span:last-child{display:block}.hero-visual figcaption{bottom:95px;left:17px}.hero-visual figcaption strong{font-size:1.2rem}}
@media(max-width:680px){:root{--brick-background:url('assets/images/red-brick-wall-mobile.webp')}.hero{background-image:linear-gradient(180deg,#28170ff2 0%,#452416e8 53%,#3e2115ae 100%),var(--brick-background);background-size:auto,auto 850px;background-repeat:no-repeat,repeat-y}.brand-name{font-size:.96rem}.logo small{font-size:.44rem;letter-spacing:.065em}.nav__inner{gap:8px}.hero__grid{padding:38px 22px 36px;gap:25px}.hero h1{font-size:clamp(2.75rem,10vw,3.8rem);margin:20px 0}.hero__lead{font-size:.93rem;line-height:1.8}.hero__tag{font-size:.56rem}.hero__btns .btn{font-size:.75rem;padding:13px 12px}.hero__facts strong{font-size:1.08rem}.hero__facts li{font-size:.62rem}.hero__art{padding:6px 0 19px}.hero-visual{border-top-left-radius:65px}.hero-visual>img{height:335px}.hero-visual figcaption{left:16px;bottom:17px;right:130px}.hero-visual figcaption>span:last-child{display:block}.hero-visual figcaption small{font-size:.5rem;letter-spacing:.1em}.hero-visual figcaption strong{font-size:1.13rem;line-height:1.15;display:block;margin-top:8px}.hero-tile{width:120px;right:3px;bottom:0}.hero-tile img{height:90px}.material-label{top:22px;right:13px;font-size:.5rem}.card__body{padding:24px}.card h3{font-size:1.8rem}.kotak-grosir{padding:28px}.story-copy p{font-size:.91rem}.faq-list summary{font-size:.88rem}.foot .brand-name{font-size:1rem}}
@media(max-width:370px){.brand-name{font-size:.84rem}.logo small{font-size:.39rem}.hero__btns .btn{font-size:.69rem}.hero__facts li{font-size:.56rem}.hero__facts li+li{padding-left:9px}}