:root {
  --paper: #ffffff;
  /* --paper-alt: #fafafa; */
  --paper-alt: #faf9f6;
  --ink: #000000;
  --ink-soft: #5c594f;
  --ink-faint: #8c8879;
  --line: #e7e1d2;
  --primary: #f70f05;
  --primary-dark: #000000;
  --primary-tint: #f7f7f6;
  --gold: #c1c1c1;
  --gold-tint: #f4ebd8;
  --serif: "Roboto" , system-ui, serif;
  --sans: "Roboto" , system-ui, serif;
}

.home2-page * { margin: 0; padding: 0; box-sizing: border-box; }
/* padding is left off .home2-page itself: styles.css gives main a padding-top
   below 1200px to clear the fixed site header. */
.home2-page { margin: 0; box-sizing: border-box; }
.home2-page p, body:has(.home2-page){ letter-spacing: normal; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home2-page * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.home2-page { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: 0; }
.home2-page a { text-decoration: none; }
.home2-page img, .home2-page svg { display: block; max-width: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width:720px) {
  .wrap { padding: 0 20px; }
  .wrap { padding-bottom: 0; }
}
.home2-page ul { list-style: none; }
/* ---------- CTA system (single hierarchy, used everywhere) ---------- */
.cs-btn {display: inline-flex;align-items: center;justify-content: center;gap: 8px;font-family: var(--sans);font-weight: 700;font-size: 1rem;letter-spacing: 0.01em;padding: 14px 26px;border-radius: 5px;border: 1.5px solid transparent;cursor: pointer;transition: transform .18s ease, box-shadow .18s ease, background .2s ease;}
.cs-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(122,31,43,0.28); }
.cs-btn-primary:hover {background: var(--primary-dark);transform: translateY(-1px);box-shadow: 0 10px 24px rgba(122,31,43,0.34);color: #fff;}
.cs-btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.cs-btn-outline:hover { background: var(--ink); color: #fff; }
.cs-btn-ghost-white { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.cs-btn-ghost-white:hover { background: #fff; color: var(--primary-dark); }
.cs-btn-lg { padding: 16px 34px; font-size: 1rem; }
.cs-btn-sm { padding: 9px 16px; font-size: 0.96rem; }
.cta-note { font-size: 0.76rem; color: var(--ink-faint); margin-top: 10px; }

/* ---------- hero ---------- */
.hero {background: var(--paper-alt);padding: 0;position: relative;}
.hero-intro {text-align: center;max-width: 720px;margin: auto;position: relative;z-index: 2;}
.hero-badge {display: inline-flex;align-items: center;gap: 8px;background: #efe5db69;color: #000000;font-size: 12px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;padding: 7px 14px;border-radius: 99px;margin-bottom: 20px;border: 1px solid #d0d0d0;backdrop-filter: blur(2px);}
.hero-badge::before {content: "";/* font-size:0.5rem; */width: 4px;height: 4px;border-radius: 26px;background: #000000;display: block;aspect-ratio: 1;line-height: 1;}
.hero-badge::after {content: "";/* font-size:0.5rem; */width: 4px;height: 4px;border-radius: 26px;background: #000000;display: block;aspect-ratio: 1;line-height: 1;}
h1.headline {font-family: var(--serif);font-weight: 600;font-size: clamp(2.1rem, 4.6vw, 3.9rem);line-height: 1.12;color: var(--ink);}
h1.headline span { color: var(--primary); }
.hero-sub {margin-top: 15px;font-size: 1.3rem;color: var(--ink-soft);line-height: 1.6;}
.hero-cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust { display: flex; justify-content: center; gap: 32px; margin-top: 26px; flex-wrap: wrap; }
.hero-trust div {display: flex;align-items: center;gap: 7px;font-size: 13px;color: var(--ink-soft);font-weight: 600;}
.hero-trust div b { color: var(--primary); font-family: var(--serif); font-size: 1rem; }
.hero .hero-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-hero {
  position: relative;
  padding: 60px 0 40px 0;
  /* z-index: 2; */
}
/* .top-hero::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #faf9f66b;
  z-index: 1;
  top: 0;
} */
.tile-grid {display: grid;grid-template-columns: repeat(5,1fr);gap: 2px;background: var(--ink);position: relative;z-index: 1;padding-top: 3px;}
@media (max-width:980px) {
  .tile-grid { grid-template-columns: repeat(2,1fr); }
  .tile-grid a:first-child { grid-column: span 2; }
}
.tile { position: relative; height: 230px; overflow: hidden; display: flex; align-items: flex-end; padding: 18px; }
.tile .bg { position: absolute; inset: 0; background: var(--g); transition: transform .6s ease; object-fit: cover; width: 100%; height: 100%; }
.tile:hover .bg { transform: scale(1.06); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0) 40%, rgba(27,26,23,0.68) 100%); }
.tile .play { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; z-index: 2; }
.tile .play::after { content: ''; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.tile span.label { position: relative; z-index: 2; color: #fff; text-transform: capitalize; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.2; }
.t1 { --g: linear-gradient(155deg,#8fa0ab,#33424f); }
.t2 { --g: linear-gradient(155deg,#c9ccc4,#6b7069); }
.t3 { --g: linear-gradient(155deg,#c9a668,#6d4f21); }
.t4 { --g: linear-gradient(155deg,#d8b48f,#7a4d29); }
.t5 { --g: linear-gradient(155deg,#9a3346,#4a1420); }
.tile span.label strong { font-size: 30px; display: block; line-height: 1.3; font-weight: 300; }
/* ---------- trust strip ---------- */
.trust-strip { background: var(--ink); padding: 26px 0; }
.trust-strip .wrap { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
.trust-strip div {display: flex;align-items: center;gap: 10px;color: #e9e6dd;font-size: 1.2rem;font-weight: 500;}
.trust-strip div .ic {width: 30px;height: 30px;border-radius: 50%;background: rgba(169,132,63,0.22);display: flex;align-items: center;justify-content: center;color: #ffffff;font-size: 0.9rem;transition: 0.3s;}
/* ---------- section shell ---------- */
.pd_90 { padding: 75px 0; }
.pd_60 { padding: 60px 0; }
.section-head { max-width: 740px; margin-bottom: 44px; }
.eyebrow {font-size: 12px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--primary);margin-bottom: 14px;}
h2.title {font-family: var(--serif);font-weight: 600;font-size: clamp(1.8rem, 3vw, 2.9rem);line-height: 1.15;color: var(--ink);}
.section-lede {margin-top: 14px;color: var(--ink-soft);line-height: 1.65;font-size: 15px;max-width: 640px;}
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: translateY(0); }
/* ---------- about ---------- */
.about .wrap {display: grid;grid-template-columns: 1fr 0.78fr;gap: 64px;align-items: center;}
@media (max-width:900px) {
  .about .wrap { grid-template-columns: 1fr; }
}
.about p {color: var(--ink-soft);line-height: 1.7;font-size: 16px;margin-top: 16px;}
.about-stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.about-stats div b {display: block;font-family: var(--serif);font-size: 1.9rem;color: var(--primary);font-weight: 600;margin-bottom: 5px;}
.about-stats div span {font-size: 12px;text-transform: uppercase;letter-spacing: 0.05em;color: var(--ink-faint);font-weight: 600;display: block;}
.about-cta { margin-top: 32px; }
.about-visual {position: relative;border-radius: 8px;overflow: hidden;background: linear-gradient(155deg, #ffffff, #e1e1e1 130%);aspect-ratio: 2 / 2.3;}
.about-visual .frame { position: absolute; inset: 20px; border-radius: 4px; }
.badge-float { position: absolute; bottom: 22px; left: 22px; background: #fff; border-radius: 8px; padding: 14px 18px; box-shadow: 0 16px 30px rgba(27,26,23,0.16); display: flex; align-items: center; gap: 10px; }
.about-visual img, .g-tile img { height: 100%; object-fit: cover; width: 100%; object-position: center; }
.badge-float b { font-family: var(--serif); font-size: 1.3rem; color: var(--primary); display: block; }
.badge-float span { font-size: 0.68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
/* ---------- gallery grid ---------- */
.gallery {background: var(--paper-alt);}
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:760px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
.g-tile { position: relative; border-radius: 6px; overflow: hidden; background: linear-gradient(155deg, #ffffff, #e1e1e1 130%); aspect-ratio: 1.4/1; }
.g-tile .bg { position: absolute; inset: 0; background: var(--g); transition: transform .5s ease; }
.g-tile:hover .bg { transform: scale(1.08); }
.g-tile::after { content: ''; position: absolute; inset: 0; background: rgba(27,26,23,0); transition: background .3s ease; }
.g-tile:hover::after { background: rgba(27,26,23,0.15); }
.g1 { --g: linear-gradient(155deg, #ffffff, #e1e1e1 130%); }
.g2 { --g: linear-gradient(155deg, #ffffff, #e1e1e1 130%); }
.g3 { --g: linear-gradient(160deg,#9a3346,#4a1420); }
.g4 { --g: linear-gradient(160deg,#8fa0ab,#33424f); }
.g5 { --g: linear-gradient(160deg,#c9a668,#6d4f21); }
.g6 { --g: linear-gradient(160deg,#e7d3b0,#b78a4e); }
/* ---------- mid CTA band ---------- */
.cta-band { background: linear-gradient(155deg, var(--primary-dark), #3d3d3d); color: #fff; text-align: center; }
.cta-band .eyebrow { color: var(--gold-tint); }
.cta-band h2 { color: #fff; }
.cta-band .section-lede {color: rgba(255,255,255,0.78);margin: 14px auto 0;max-width: 100%;}
.cta-band .cta-row { display: flex; justify-content: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.cta-band .cta-note { color: rgba(255,255,255,0.65); }
/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width:980px) {
  .testi-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:600px) {
  .testi-grid { grid-template-columns: 1fr; }
}
.testi { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 8px; padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 2px; }
.testi p {font-size: 1rem;line-height: 1.55;color: var(--ink);}
.testi .who { font-size: 0.76rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: auto; }
/* ---------- newsletter ---------- */
.newsletter { background: var(--ink); color: #fff; text-align: center; }
.newsletter h3 {font-family: var(--serif);font-weight: 500;font-size: 1.8rem;margin-bottom: 20px;color: #fff;}
.nl-form { display: flex; justify-content: center; gap: 10px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; }
.newsletter .cs-btn-primary:hover {
  background: #fff;
  color: #000;
}
.nl-form input { flex: 1; min-width: 220px; padding: 13px 16px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.88rem; }
.nl-form input::placeholder { color: rgba(255,255,255,0.45); }
@media (max-width:720px) {
  .fab-wa { bottom: 80px; right: 18px; width: 50px; height: 50px; }
}
.sticky-cta { display: none; }
@media (max-width:720px) {
  .sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 940; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; gap: 10px; box-shadow: 0 -10px 24px rgba(27,26,23,0.08); }
  .sticky-cta .cs-btn { flex: 1; }
  body { padding-bottom: 0; }
}
/* =========================================================
 NEW SECTIONS — categories slider, popular slider, craft,
 testimonial slider, blog grid, contact
 (built from existing tokens only: --primary, --gold, --ink, --line, --paper*)
 ========================================================= */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }
/* ---------- shared slider arrow UI (side-overlay, used by category / popular / testimonial sliders) ---------- */
.slider-viewport { position: relative; }
.slider-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 8px; pointer-events: none; z-index: 5; }
.slider-arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
  box-shadow: 0 10px 24px rgba(27,26,23,0.14); backdrop-filter: blur(2px);
  transition: background .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
  position: relative; flex-shrink: 0; color: var(--ink);
}
.slider-arrow:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(247,15,5,0.24); }
.slider-arrow:active { transform: translateY(0) scale(.96); }
.slider-arrow.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; box-shadow: none; }
.section-cta {text-align: center;margin-top: 30px;}
/* ---------- product categories slider ---------- */
.cat-slider {background: var(--paper-alt);}
.cat-slider .swiper {padding: 0 10px 0px 10px;margin: 0 -10px;}
.cat-slider .swiper-wrapper { padding-bottom: 6px; }
.cat-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; height: 100%; }
.cat-card:hover { box-shadow: 0 20px 40px rgba(27,26,23,0.1); transform: translateY(-3px); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.cat-media { position: relative; height: 190px; overflow: hidden; background: linear-gradient(155deg,#f2f2f0,#e1e1e1); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-card:hover .cat-media img { transform: scale(1.06); }
.cat-badge {position: absolute;top: 12px;left: 12px;z-index: 2;font-size: 9px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;padding: 5px 10px;border-radius: 99px;background: var(--paper-tint,#fff);border: 1px solid;}
.cat-badge--red { background: #ffdada; color: var(--primary); }
.cat-badge--gold {background: var(--gold-tint);color: #393939;}
.cat-badge--ink { background: var(--ink); color: #fff; }
.cat-body { padding: 18px 20px 22px; }
.cat-card h3 {font-family: var(--serif);font-weight: 600;font-size: 16px;color: var(--ink);}
.cat-card p {margin-top: 8px;font-size: 14px;line-height: 1.55;color: var(--ink-soft);}
.cat-arrow {margin-top: 14px;width: 34px;height: 34px;border-radius: 50%;border: 1.5px solid var(--line);display: flex;align-items: center;justify-content: center;transition: background .2s ease, border-color .2s ease;transform: rotate(-45deg);}
.cat-card:hover .cat-arrow { background: var(--primary); border-color: var(--primary); }
.cat-arrow::after { content: ''; width: 6px; height: 6px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); margin-left: -2px; transition: border-color .2s ease; }
.cat-card:hover .cat-arrow::after { border-color: #fff; }
/* ---------- most popular slider ---------- */
.popular-slider {
    background: var(--paper);
}
.popular-slider .swiper { overflow: hidden; }
.popular-tile { position: relative; display: block; min-height: 280px; border-radius: 6px; overflow: hidden; background: linear-gradient(155deg,#2a2a28,#0f0f0e); aspect-ratio: 1; }
.popular-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; opacity: 0.82; }
.popular-tile:hover img { transform: scale(1.07); }
.popular-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(348deg, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 61%) 100%); }
.popular-label { position: absolute; left: 0; right: 0; top: 26px; z-index: 2; text-align: center; color: #fff; font-family: var(--sans); font-weight: 500; font-size: 20px; text-transform: uppercase; letter-spacing: 0.09em; padding: 0 18px; }
/* ---------- how it works / craftsmanship ---------- */
.craft {background: var(--paper-alt);}
.craft .section-lede {
    max-width: 680px;
}
.craft .title span.accent-script { color: var(--primary); font-style: italic; }
.craft-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 20px; }
@media (max-width:980px) {
  .craft-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:600px) {
  .craft-grid { grid-template-columns: 1fr; }
}
.craft-card {background: var(--paper);border: 1px solid var(--line);border-radius: 10px;padding: 26px 22px;display: flex;flex-direction: column;align-items: flex-start;}
.craft-num { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: 18px; color: var(--ink); }
.craft-num.n1 { background: var(--gold-tint); color: var(--gold); }
.craft-num.n2 { background: #ffdada; color: var(--primary); }
.craft-num.n3 { background: #e9e6dd; color: var(--ink); }
.craft-num.n4 { background: var(--gold-tint); color: var(--gold); }
.craft-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin-bottom: 10px; letter-spacing: 1.2px; }
.craft-card p {font-size: 13px;line-height: 1.6;color: var(--ink-soft);margin-bottom: 29px;}
.craft-link { display: inline-block; margin-top: 14px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; margin-top: auto; }
.craft-link:hover { color: var(--ink); border-color: var(--ink); }
/* ---------- testimonial slider (same markup/classes as before, now in swiper) ---------- */
.testi-slider { position: relative; }
.testi-slider .swiper { overflow: hidden; }
.testi-slider .swiper-slide { height: auto; }
.testi-slider .testi { height: 100%; }
.testi p br {
    display: none;
}

/* ---------- blog / articles grid ---------- */
.blog { background: var(--paper-alt); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width:900px) {
  .blog-grid { grid-template-columns: 1fr; }
}
.blog .section-head {max-width: 100%;}
.blog-card { display: block; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); transition: box-shadow .25s ease, transform .25s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(27,26,23,0.1); }
.blog-media { height: 200px; overflow: hidden; background: linear-gradient(155deg,#f2f2f0,#e1e1e1); }
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-media img { transform: scale(1.06); }
.blog-card .blog-body { padding: 20px 22px 24px; }
.blog-tag {display: inline-block;font-size: 11px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: #333;margin-bottom: 10px;}
.blog-card h3 {font-family: var(--serif);font-weight: 600;font-size: 16px;line-height: 1.35;color: var(--ink);}
.blog-card p {margin-top: 10px;font-size: 1rem;line-height: 1.6;color: var(--ink-soft);}
/* ---------- contact ---------- */
.contact { background: var(--paper); }
.contact .title span { color: var(--primary); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; align-items: start; }
@media (max-width:900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:520px) {
  .contact-cards { grid-template-columns: 1fr; }
}
.contact-card {background: var(--paper-alt);border: 1px solid var(--line);border-radius: 8px;padding: 15px;}
.c-ic {width: 38px;height: 38px;border-radius: 8px;background: #000;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;display: flex;align-items: center;justify-content: center;font-size: 1rem;margin-bottom: 12px;padding: 8px;}
.c-ic img {
  filter: invert(1);
}
.contact-card h4 { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; color: var(--ink); margin-bottom: 6px; }
.contact-card p {font-size: 1rem;line-height: 1.55;color: var(--ink-soft);margin: 0;}
.contact-map { margin-top: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); height: 220px; }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-form {background: var(--paper-alt);border: 1px solid var(--line);border-radius: 10px;padding: 39px 30px;}
.contact-form h3 {font-family: var(--serif);font-weight: 600;font-size: 1.4rem;color: var(--ink);margin-bottom: 20px;}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:480px) {
  .cf-row { grid-template-columns: 1fr; }
}
.cf-field { margin-bottom: 16px; } .cf-field label {display: block;font-size: 14px;font-weight: 600;color: var(--ink-soft);margin-bottom: 6px;} .cf-field input, .cf-field select, .cf-field textarea {width: 100%;padding: 12px 14px;border-radius: 5px;border: 1px solid var(--line);background: #fff;font-family: var(--sans);font-size: 1rem;color: var(--ink);resize: vertical;} .cf-field input, .cf-field select, .cf-field textarea { width: 100%; padding: 12px 14px; border-radius: 5px; border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 1rem; /* ✓ 16px minimum prevents iOS zoom */ color: var(--ink); resize: vertical; /* iPhone fixes */ -webkit-appearance: none; /* Remove iOS default styling */ appearance: none; } .cf-field input[type="checkbox"], .cf-field input[type="radio"] { -webkit-appearance: auto; /* Keep default for checkboxes/radios */ appearance: auto; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--primary); }
.contact-form .cs-btn { width: 100%; margin-top: 4px; }
/* ---------- Last CTA ---------- */
section.pd_60.cta_last { text-align: center; background: linear-gradient(155deg, var(--primary-dark), #3d3d3d); padding: 50px 0; }
h2.cta_head { font-size: 26px; font-weight: 300; margin-bottom: 25px; color: #fff; text-transform: uppercase; letter-spacing: 2.5px; }
a.cs-btn_border_white {text-align: center;display: block;width: max-content;margin: auto;/* padding: 16px 34px; *//* font-size: 0.92rem; */border: 1px solid #000;text-transform: uppercase;letter-spacing: 2px;font-weight: 500;/* line-height: 1; *//* border-radius: 5px; */background-color: #fff;transition: 0.3s;color: #000;border-color: #000;}
a.cs-btn_border_white:hover { background-color: transparent; color: #fff; border-color: #fff; }
.inner_last_cta { padding: 0; border-radius: 15px; }
/* =========================================================
 ICONS — sizing + placement (feather-style inline SVG sprite)
 ========================================================= */
.icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }
.icon-star {width: 16px;height: 16px;fill: #ff9400;}
/* trust strip icons */
.trust-strip div .ic { width: 34px; height: 34px; }
.trust-strip div .ic .icon { width: 17px; height: 17px; }
.trust-strip div { transition: transform .25s ease; }
.trust-strip div:hover {/* transform: translateY(-2px); */}
.trust-strip div>div:hover .ic { background: rgba(169,132,63,0.4); }
/* hero trust icons */
.hero-trust div { display: inline-block; align-items: center; gap: 7px; }
.hero-trust .icon { color: var(--primary); }
/* contact card icons + links */
.c-ic .icon { width: 18px; height: 18px; }
.contact-card p a { color: inherit; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.contact-card p a:hover { color: var(--primary); border-color: var(--primary); }
.contact-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(27,26,23,0.08); border-color: var(--gold); }
.c-ic { transition: transform .25s ease, background .25s ease; }
.contact-card:hover .c-ic {transform: scale(1.08) rotate(-4deg);background: var(--primary);color: #fff;}
/* stars */
.stars { display: inline-flex; align-items: center; gap: 3px; }
/* cat-arrow / slider-arrow using svg icons now (retire css-triangle pseudo) */
.slider-arrow::after { content: none; }
.slider-arrow { color: var(--ink); }
.slider-arrow:hover { color: #fff; }
.cat-arrow::after { content: none; }
.cat-arrow { color: var(--ink); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.cat-card:hover .cat-arrow { color: #fff; transform: rotate(-45deg); }
/* blog read-more */
.blog-read {display: inline-flex;align-items: center;gap: 6px;margin-top: 14px;font-size: 12px;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--primary);}
.blog-read .icon { transition: transform .25s ease; }
.blog-card:hover .blog-read .icon { transform: translateX(4px); }
/* whatsapp chat icon inside ghost button */
.cta-band .cs-btn svg { color: currentColor; }
/* =========================================================
 SUBTLE MOTION / MICRO-INTERACTIONS
 ========================================================= */
.hero-badge { animation: pulseDot 2.6s ease-in-out infinite; }
@keyframes pulseDot {
  0%,100% {box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);}
  50% {box-shadow: 0 0 0 4px rgb(130 130 130 / 8%);}
}
.tile .play { transition: transform .3s ease, background .3s ease; }
.tile:hover .play { transform: scale(1.1); background: rgba(255,255,255,0.12); }
.g-tile, .blog-card, .cat-card, .contact-card, .craft-card { will-change: transform; }
.craft-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.craft-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(27,26,23,0.08); border-color: var(--gold); }
.craft-num { transition: transform .3s ease; }
.craft-card:hover .craft-num { transform: scale(1.1); }
.about-visual { transition: box-shadow .3s ease; }
.about-visual:hover { box-shadow: 0 20px 40px rgba(27,26,23,0.14); }
.badge-float { transition: transform .3s ease; }
.about-visual:hover .badge-float { transform: translateY(-3px); }
/* staggered entrance for repeating cards inside reveal containers */
.craft-grid[data-reveal] > .craft-card, .blog-grid[data-reveal] > .blog-card, .contact-cards > .contact-card { transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease, border-color .25s ease; }
.craft-grid[data-reveal]:not(.in) > .craft-card, .blog-grid[data-reveal]:not(.in) > .blog-card { opacity: 0; transform: translateY(16px); }
.craft-grid[data-reveal].in > .craft-card:nth-child(1), .blog-grid[data-reveal].in > .blog-card:nth-child(1) {/* transition-delay: .05s; */}
.craft-grid[data-reveal].in > .craft-card:nth-child(2), .blog-grid[data-reveal].in > .blog-card:nth-child(2) {/* transition-delay: .14s; */}
.craft-grid[data-reveal].in > .craft-card:nth-child(3), .blog-grid[data-reveal].in > .blog-card:nth-child(3) {/* transition-delay: .23s; */}
.craft-grid[data-reveal].in > .craft-card:nth-child(4) {/* transition-delay: .32s; */}
/* .trust-strip .wrap > div { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } */
.trust-strip.in .wrap > div { opacity: 1; transform: translateY(0); }
/* .trust-strip.in .wrap > div:nth-child(1) { transition-delay: .05s; } */
/* .trust-strip.in .wrap > div:nth-child(2) { transition-delay: .14s; } */
/* .trust-strip.in .wrap > div:nth-child(3) { transition-delay: .23s; } */
.swiper-slide { transition: opacity .3s ease; }
/* =========================================================
 RESPONSIVENESS ENHANCEMENTS
 ========================================================= */
@media (max-width:980px) {
  .pd_90 { padding: 56px 0; }
  .pd_60 { padding: 44px 0; }
}
@media (max-width:720px) {
  .pd_90 { padding: 46px 0; }
  .pd_60 { padding: 36px 0; }
  .section-head { margin-bottom: 30px; }
}
@media (max-width:600px) {
  .trust-strip .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trust-strip div {font-size: 14px;}
}
@media (max-width:520px) {
    .hero-trust {align-items: center;gap: 7px;}
    .hero-cta-row { flex-direction: column; width: 100%; align-items: center; }
    .hero-cta-row .cs-btn { width: max-content; }
    .tile span.label strong { font-size: 24px; }
    .hero-trust div {
        backdrop-filter: blur(17px);
        background: #ffffff4a;
        padding: 5px 10px;
        border-radius: 7px;
    }
}
@media (max-width:480px) {
  .slider-arrow { width: 36px; height: 36px; box-shadow: 0 6px 16px rgba(27,26,23,0.16); }
  .slider-arrow .icon { width: 15px; height: 15px; }
  .slider-nav { padding: 0 4px; }
  .craft-card, .contact-card { padding: 20px 18px; }
  .contact-form { padding: 22px 18px; }
  .cat-body { padding: 16px 16px 18px; }
  .blog-card .blog-body { padding: 16px 18px 20px; }
}
@media (max-width:380px) {
  .hero-badge {padding: 6px 12px;font-size: 10px;}
  h2.title {font-size: 1.8rem;}
  .about-stats { gap: 22px; }
}
@media (max-width:720px) {
  .contact-map { height: 180px; }
}

/* =========================================================
   ABOUT SECTION V2
   Clean / Editorial / Premium
========================================================= */

.about-section-v2{
  background:var(--paper);
  overflow:hidden;
}


/* =========================================================
   INTRO
========================================================= */

.about-intro-v2{
  display:grid;
  grid-template-columns:44% 56%;
  align-items:center;
  min-height:560px;
}

.about-intro-image{
  position:relative;
  height:500px;
  overflow:hidden;
  border-radius:5px;
  background:#eee;
}

.about-intro-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.65,.3,1);
}

.about-intro-image:hover img{
  transform:scale(1.04);
}

.about-intro-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    transparent 60%,
    rgba(0,0,0,.25)
  );
  pointer-events:none;
}

.about-intro-year{
  position:absolute;
  left:28px;
  bottom:25px;
  z-index:2;
  color:#fff;
}

.about-intro-year span{
  display:block;
  margin-bottom:2px;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.75;
}

.about-intro-year strong{
  display:block;
  font-family:var(--serif);
  font-size:2.2rem;
  line-height:1;
  font-weight:500;
}


.about-intro-copy{
  padding-left:85px;
  max-width:690px;
}

.about-intro-copy .title{
  margin-top:15px;
}

.about-intro-copy .title span{
  display:block;
  color:var(--primary);
}


/* Who */

.about-who{
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.about-mini-heading{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  color:var(--ink);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.about-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

.about-who p{
  max-width:570px;
  margin:0;
  color:var(--ink-soft);
  font-size:.93rem;
  line-height:1.75;
}


/* =========================================================
   SPECIALISATION
========================================================= */

.about-special-v2{
  margin-top:100px;
  padding-top:45px;
  border-top:1px solid var(--line);
}

.about-special-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:38px;
}

.about-overline{
  display:block;
  margin-bottom:10px;
  color:var(--gold);
  font-size:.63rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.about-special-top h3{
  margin:0;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
  color:var(--ink);
}

.about-special-top p{
  max-width:450px;
  margin:0;
  color:var(--ink-faint);
  font-size:.82rem;
  line-height:1.65;
}


/* Specialisation rows */

.about-special-list{
  border-top:1px solid var(--ink);
}

.about-special-row{
  display:grid;
  grid-template-columns:80px 1fr 40px;
  align-items:center;
  min-height:92px;
  border-bottom:1px solid var(--line);
  transition:
    padding .3s ease,
    background .3s ease;
}

.about-special-row:hover{
  padding-left:14px;
  padding-right:14px;
  background:var(--gold-tint);
}

.about-row-number{
  color:var(--gold);
  font-family:var(--serif);
  font-size:.82rem;
}

.about-row-title{
  display:flex;
  align-items:baseline;
  gap:25px;
}

.about-row-title strong{
  min-width:210px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
}

.about-row-title span{
  color:var(--ink-faint);
  font-size:.7rem;
  letter-spacing:.03em;
}

.about-row-arrow{
  color:var(--primary);
  font-size:1.1rem;
  opacity:0;
  transform:translate(-5px,5px);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.about-special-row:hover .about-row-arrow{
  opacity:1;
  transform:translate(0,0);
}


/* =========================================================
   VALUES
========================================================= */

.about-values-v2{
  display:grid;
  grid-template-columns:34% 66%;
  gap:70px;
  margin-top:100px;
  padding-top:55px;
  border-top:1px solid var(--line);
}

.about-values-heading h3{
  margin:0;
  font-family:var(--serif);
  font-size:2rem;
  line-height:1.2;
  font-weight:500;
  color:var(--ink);
}

.about-value-list{
  border-top:1px solid var(--line);
}

.about-value-row{
  display:grid;
  grid-template-columns:65px 1fr;
  gap:25px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:
    padding .3s ease,
    background .3s ease;
}

.about-value-row:hover{
  padding-left:14px;
  padding-right:14px;
  background:rgba(255,255,255,.45);
}

.about-value-index{
  color:var(--gold);
  font-family:var(--serif);
  font-size:.8rem;
}

.about-value-content > span{
  display:block;
  margin-bottom:11px;
  color:var(--ink);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.about-value-content p{
  max-width:650px;
  margin:0;
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.7;
}


/* Quality */

.about-value-quality{
  position:relative;
}

.about-value-quality .about-value-content p{
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.45;
}

.quality-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:17px;
  color:var(--ink-faint);
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.quality-check-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-size:.65rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:950px){

  .about-intro-v2{
    grid-template-columns:1fr;
    gap:45px;
  }

  .about-intro-image{
    height:430px;
  }

  .about-intro-copy{
    padding-left:0;
    max-width:700px;
  }

  .about-special-top{
    grid-template-columns:1fr;
    gap:15px;
  }

  .about-values-v2{
    grid-template-columns:1fr;
    gap:45px;
  }
}


@media (max-width:700px){

  .about-intro-v2{
    min-height:0;
  }

  .about-intro-image{
    height:350px;
  }

  .about-special-v2,
  .about-values-v2{
    margin-top:65px;
  }

  .about-special-row{
    grid-template-columns:45px 1fr 25px;
    min-height:82px;
  }

  .about-row-title{
    display:block;
  }

  .about-row-title strong{
    display:block;
    min-width:0;
    font-size:1rem;
  }

  .about-row-title span{
    display:block;
    margin-top:5px;
    font-size:.62rem;
    line-height:1.4;
  }

  .about-row-arrow{
    opacity:1;
    transform:none;
  }

  .about-value-row{
    grid-template-columns:45px 1fr;
    gap:15px;
  }
}


@media (max-width:500px){

  .about-section-v2{
    padding-top:55px;
    padding-bottom:55px;
  }

  .about-intro-image{
    height:300px;
  }

  .about-intro-copy .title{
    font-size:2rem;
  }

  .about-who{
    margin-top:30px;
  }

  .about-special-top h3,
  .about-values-heading h3{
    font-size:1.65rem;
  }

  .about-special-row:hover,
  .about-value-row:hover{
    padding-left:8px;
    padding-right:8px;
  }

  .about-value-content p{
    font-size:.84rem;
  }

  .about-value-quality .about-value-content p{
    font-size:1.05rem;
  }
}

/* =========================================================
    WHY SOOD STUDIO
    ========================================================= */
.why-sood{background: var(--paper);}
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:8px; }
@media (max-width:1080px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .why-grid{ grid-template-columns:1fr; }
}
.why-card{
  background: var(--paper-alt);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px 22px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(27,26,23,0.08); border-color:var(--gold); }
.why-icon{
  width: 60px;
  height: 60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  transition:transform .3s ease;
}
.why-icon img{width: 35px;height: 35px;}
.why-card:hover .why-icon{ transform:scale(1.08); }
.why-card:nth-child(3n+1) .why-icon{ background:var(--gold-tint); }
.why-card:nth-child(3n+2) .why-icon{ background:#ffdada; }
.why-card:nth-child(3n) .why-icon{ background:#e9e6dd; }
.why-card h3{font-family:var(--serif);font-weight:600;font-size: 16px;color:var(--ink);margin-bottom:10px;}
.why-card p{font-size: 14px;line-height:1.6;color:var(--ink-soft);}

/* =========================================================
    STUDIO STORY / ABOUT US
    ========================================================= */
.studio-story{background: var(--paper-alt);}
.story-specialise{
  display:grid; grid-template-columns:0.55fr 1fr; gap:44px; margin-top:52px; padding-top:40px;
  border-top:1px solid var(--line);
}
@media (max-width:800px){
  .story-specialise{ grid-template-columns:1fr; gap:14px; }
}
.story-specialise h3{ font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--ink); line-height:1.25; }
.story-specialise p{font-size: 1.1rem;line-height:1.75;color:var(--ink-soft);}
.story-specialise p + p{ margin-top:14px; }

.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; }
}
.story-card{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:10px; padding:28px 24px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.story-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(27,26,23,0.08); border-color:var(--gold); }
.story-icon{
  width: 56px;
  height: 56px;
  border-radius:50%;
  background:var(--gold-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  transition:transform .3s ease;
}
.story-icon img{width: 40px;height: 30px;}
.story-card:hover .story-icon{ transform:scale(1.08); }
.story-card:nth-child(2) .story-icon{ background:#ffdada; }
.story-card:nth-child(3) .story-icon{ background:#e9e6dd; }
.story-card h4{font-family:var(--serif);font-weight:600;font-size: 16px;color:var(--ink);margin-bottom:10px;}
.story-card p{font-size: 1.2rem;line-height: 1.62;color:var(--ink-soft);}

@media (max-width:768px) {
    .home2-page {
        margin-top: 90px;
    }
}
@media (max-width:768px) {
    .home2-page {
        margin-top: 60px;
    }
}

/* Pagination hidden by default */
.cat-pagination,
.pop-pagination,
.testi-pagination {
  display: none;
}

/* Mobile: dots instead of navigation buttons */
@media (max-width: 559px) {
  .cat-next,
  .cat-prev,
  .pop-next,
  .pop-prev,
  .testi-next,
  .testi-prev {
    display: none;
  }

  .cat-pagination,
  .pop-pagination,
  .testi-pagination {
    display: block;
    position: relative;
    margin-top: 16px;
  }

  .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    opacity: 0.4;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
  }
    .cta-band .cta-row a.cs-btn {
        min-width: 190px;
    }
    .whatsapp-icon {
        right: 20px;
        bottom: 20px;
    }
}

.home2-page .swiper-pagination-bullet-active {
    background: var(--primary);
}