/* 夫妻廢片 | My Malaysia Life — shared stylesheet
   .sg-  = landing page (index.html)
   .sgi- = inner pages (mm2h / property / education / healthcare / daily-life) */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; font-family: 'DM Sans', system-ui, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* ============================================================
   LANDING PAGE — .sg-
   ============================================================ */
.sg { font-family: 'DM Sans', system-ui, sans-serif; background: #f4ede0; color: #2e2a23; width: 100%; }
.sg * { box-sizing: border-box; margin: 0; padding: 0; }
.sg-serif { font-family: 'Newsreader', 'Cormorant Garamond', Georgia, serif; font-weight: 400; }
.sg-hand { font-family: 'Caveat', cursive; }
.sg .ph-img { background-size: cover; background-position: center; }

/* Top tape strip */
.sg-tape { background: #c69b7b; padding: 8px 32px; display: flex; justify-content: center; gap: 24px; font-size: 12px; color: #f4ede0; flex-wrap: wrap; }
.sg-tape span { display: inline-flex; align-items: center; gap: 6px; }
.sg-tape em { font-family: 'Caveat', cursive; font-style: normal; font-weight: 500; font-size: 16px; }

/* Nav */
.sg-nav { padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; background: #f4ede0; border-bottom: 1px dashed rgba(46,42,35,0.25); flex-wrap: wrap; gap: 16px; }
.sg-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.sg-mark .b { width: 42px; height: 42px; background: #7d8c6f; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; color: #f4ede0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; flex-shrink: 0; }
.sg-mark .t { font-family: 'Newsreader', serif; font-size: 22px; line-height: 1.1; }
.sg-mark .t b { font-weight: 600; font-style: normal; }
.sg-mark .t small { display: block; font-family: 'Caveat', cursive; font-size: 15px; color: #c4543c; letter-spacing: 0.02em; }
.sg-nav ul { display: flex; gap: 8px; list-style: none; font-size: 14px; flex-wrap: wrap; margin: 0; padding: 0; }
.sg-nav li { display: inline-block; }
.sg-nav a { padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.2s; color: #4a443a; text-decoration: none; display: inline-block; }
.sg-nav a:hover { background: #e8dcc6; }
.sg-nav .yt a, .sg-nav a.yt { background: #c4543c; color: #f4ede0; }
.sg-nav .yt a:hover, .sg-nav a.yt:hover { background: #a83a26; color: #f4ede0; }

/* Hero */
.sg-hero { padding: 64px 40px 80px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; position: relative; }
.sg-hero-text .label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #7d8c6f; color: #f4ede0; border-radius: 999px; font-size: 12px; font-weight: 500; margin-bottom: 28px; }
.sg-hero-text .label::before { content: '✿'; }
.sg-h1 { font-size: 84px; line-height: 1.02; margin-bottom: 24px; font-weight: 400; }
.sg-h1 em { font-style: italic; color: #7d8c6f; }
.sg-h1 .acc { color: #c4543c; font-style: italic; }
.sg-h1 .ann { position: relative; display: inline-block; }
.sg-h1 .ann::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: 4px; height: 12px; background: rgba(244,165,42,0.33); z-index: -1; border-radius: 4px; transform: skewX(-2deg); }

.sg-handn { font-family: 'Caveat', cursive; font-size: 28px; color: #c4543c; transform: rotate(-3deg); display: inline-block; margin-left: 12px; }

.sg-lede { font-size: 17px; line-height: 1.7; color: #4a443a; max-width: 480px; margin-bottom: 32px; }
.sg-lede b { color: #2e2a23; font-weight: 600; }

.sg-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sg-btn { padding: 14px 24px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1.5px solid; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; text-decoration: none; }
.sg-btn.pri { background: #2e2a23; color: #f4ede0; border-color: #2e2a23; }
.sg-btn.pri:hover { background: #4a443a; }
.sg-btn.sec { background: transparent; color: #2e2a23; border-color: rgba(46,42,35,0.25); }
.sg-btn.sec:hover { border-color: #2e2a23; }

/* Hero polaroids */
.sg-polas { position: relative; height: 500px; }
.sg-pola { position: absolute; background: #fdfaf3; padding: 12px 12px 56px; box-shadow: 0 8px 24px rgba(46,42,35,0.13); border: 1px solid rgba(46,42,35,0.03); }
.sg-pola .img { aspect-ratio: 1; background-size: cover; background-position: center; }
.sg-pola .cap { position: absolute; bottom: 12px; left: 12px; right: 12px; font-family: 'Caveat', cursive; font-size: 22px; color: #2e2a23; text-align: center; }
.sg-pola-1 { top: 0; left: 0; width: 250px; transform: rotate(-5deg); z-index: 2; }
.sg-pola-2 { top: 70px; right: 0; width: 225px; transform: rotate(6deg); z-index: 1; }
.sg-pola-3 { bottom: 0; left: 80px; width: 210px; transform: rotate(2deg); z-index: 3; }
.sg-tapebit { position: absolute; width: 60px; height: 22px; background: rgba(198,155,123,0.6); top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

/* Stat strip */
.sg-stats { padding: 32px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; background: #e8dcc6; border-top: 1px dashed rgba(46,42,35,0.25); border-bottom: 1px dashed rgba(46,42,35,0.25); align-items: center; }
.sg-stat { display: flex; gap: 16px; align-items: center; }
.sg-stat .n { font-family: 'Newsreader', serif; font-size: 44px; line-height: 1; font-weight: 500; color: #2e2a23; }
.sg-stat .n em { font-style: italic; color: #7d8c6f; }
.sg-stat .l { font-size: 12px; color: #4a443a; line-height: 1.4; }
.sg-stat .l strong { display: block; color: #2e2a23; font-weight: 600; font-size: 13px; }

/* About — letter style */
.sg-about { padding: 96px 40px; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; max-width: 1180px; margin: 0 auto; }
.sg-letter { max-width: 640px; background: #fdfaf3; padding: 56px 64px; position: relative; box-shadow: 0 20px 60px rgba(46,42,35,0.09); border-top: 6px solid #7d8c6f; }
.sg-letter::before { content: '家'; position: absolute; top: 32px; left: -32px; width: 64px; height: 64px; background: #7d8c6f; color: #f4ede0; font-family: 'Newsreader', serif; font-size: 28px; display: flex; align-items: center; justify-content: center; font-style: italic; transform: rotate(-6deg); }
.sg-letter .from { font-family: 'Caveat', cursive; font-size: 22px; color: #c4543c; margin-bottom: 16px; }
.sg-letter h2 { font-family: 'Newsreader', serif; font-size: 44px; line-height: 1.1; font-weight: 400; margin-bottom: 28px; }
.sg-letter h2 em { font-style: italic; color: #7d8c6f; }
.sg-letter p { font-size: 16px; line-height: 1.85; color: #4a443a; margin-bottom: 16px; font-family: 'Newsreader', serif; font-weight: 400; }
.sg-letter p:first-of-type:first-letter { font-size: 56px; line-height: 1; float: left; margin: 4px 8px 0 -2px; color: #c4543c; font-style: italic; }
.sg-letter .sign { margin-top: 28px; font-family: 'Caveat', cursive; font-size: 36px; color: #2e2a23; transform: rotate(-2deg); display: inline-block; }
.sg-letter .ps { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(46,42,35,0.25); font-family: 'Newsreader', serif; font-style: italic; color: #6a6258; font-size: 14px; }

.sg-about-pola { width: 300px; }

/* Topics — postcard cards */
.sg-topics { padding: 96px 40px; background: #e8dcc6; position: relative; }
.sg-section-h { text-align: center; margin-bottom: 56px; }
.sg-section-h .e { font-family: 'Caveat', cursive; font-size: 28px; color: #c4543c; margin-bottom: 8px; }
.sg-section-h h2 { font-family: 'Newsreader', serif; font-size: 56px; line-height: 1.05; font-weight: 400; }
.sg-section-h h2 em { font-style: italic; color: #7d8c6f; }
.sg-section-h .d { font-size: 15px; color: #4a443a; margin-top: 12px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.sg-topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1080px; margin: 0 auto; }
.sg-topic { background: #fdfaf3; padding: 0 0 24px; border: 1px solid rgba(46,42,35,0.03); box-shadow: 0 6px 18px rgba(46,42,35,0.06); position: relative; cursor: pointer; transition: transform 0.2s; display: block; text-decoration: none; color: inherit; }
.sg-topic:hover { transform: translateY(-4px); }
.sg-topic .ph { aspect-ratio: 4/3; margin-bottom: 20px; position: relative; background-size: cover; background-position: center; }
.sg-topic .ph .num { position: absolute; top: 12px; left: 12px; font-family: 'Newsreader', serif; font-style: italic; font-size: 20px; color: #fdfaf3; padding: 4px 12px; background: rgba(46,42,35,0.5); backdrop-filter: blur(4px); border-radius: 999px; }
.sg-topic .ph .stamp { position: absolute; top: 12px; right: 12px; min-width: 48px; height: 48px; border: 1.5px dashed #fdfaf3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Caveat', cursive; color: #fdfaf3; font-size: 14px; line-height: 1; text-align: center; padding: 4px; background: rgba(46,42,35,0.25); }
.sg-topic h3 { font-family: 'Newsreader', serif; font-size: 25px; font-weight: 400; padding: 0 24px; margin-bottom: 10px; line-height: 1.15; }
.sg-topic h3 em { font-style: italic; color: #7d8c6f; }
.sg-topic p { padding: 0 24px; font-size: 14px; color: #4a443a; line-height: 1.6; margin-bottom: 12px; }
.sg-topic ul { padding: 0 24px; list-style: none; margin: 0; }
.sg-topic ul li { font-size: 13px; color: #6a6258; padding-left: 16px; position: relative; margin-bottom: 4px; }
.sg-topic ul li::before { content: '•'; position: absolute; left: 0; color: #c4543c; }

.sg-bg-1 { background: linear-gradient(135deg, #f4a52a, #e8852a, #c4543c); }
.sg-bg-2 { background: linear-gradient(135deg, #4a5a78, #6a7a98, #8a9ab8); }
.sg-bg-3 { background: linear-gradient(135deg, #7d8c6f, #5a6a4e, #4a5a40); }
.sg-bg-4 { background: linear-gradient(135deg, #c69b7b, #b58764, #8a5a4a); }
.sg-bg-5 { background: linear-gradient(135deg, #8a6a8a, #b58aa8, #c4543c); }

/* Penang / life feature */
.sg-penang { padding: 96px 40px; }
.sg-pen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1100px; margin: 0 auto; }

.sg-pen-collage { position: relative; height: 560px; }
.sg-pen-collage .p { position: absolute; background: #fdfaf3; padding: 12px 12px 14px; box-shadow: 0 8px 24px rgba(46,42,35,0.13); }
.sg-pen-collage .p .img { aspect-ratio: 1; background-size: cover; background-position: center; }
.sg-pen-collage .p .l { font-family: 'Caveat', cursive; font-size: 16px; text-align: center; padding-top: 8px; }
.sg-pen-collage .p-1 { top: 0; left: 30px; width: 230px; transform: rotate(-4deg); z-index: 2; }
.sg-pen-collage .p-2 { top: 90px; right: 10px; width: 210px; transform: rotate(5deg); z-index: 1; }
.sg-pen-collage .p-3 { bottom: 0; left: 0; width: 190px; transform: rotate(3deg); z-index: 3; }
.sg-pen-collage .p-4 { bottom: 50px; right: 70px; width: 170px; transform: rotate(-7deg); z-index: 2; }

.sg-pen-text .e { font-family: 'Caveat', cursive; font-size: 28px; color: #c4543c; }
.sg-pen-text h2 { font-family: 'Newsreader', serif; font-size: 60px; line-height: 1.05; font-weight: 400; margin-bottom: 24px; }
.sg-pen-text h2 em { font-style: italic; color: #7d8c6f; }
.sg-pen-text > p { font-size: 16px; color: #4a443a; line-height: 1.7; margin-bottom: 28px; font-family: 'Newsreader', serif; }
.sg-pen-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sg-pen-r { padding: 16px 20px; background: #fdfaf3; border-left: 3px solid #7d8c6f; }
.sg-pen-r .h { font-family: 'Caveat', cursive; font-size: 22px; color: #c4543c; margin-bottom: 2px; }
.sg-pen-r strong { display: block; font-family: 'Newsreader', serif; font-size: 18px; font-style: italic; }
.sg-pen-r p { font-size: 13px; color: #6a6258; line-height: 1.5; margin-top: 4px; }

.sg-pen-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 56px auto 0; }
.sg-pen-stat { background: #fdfaf3; padding: 24px; text-align: center; border-bottom: 4px solid #7d8c6f; transform: rotate(-1deg); }
.sg-pen-stat:nth-child(2) { transform: rotate(1deg); border-color: #c4543c; }
.sg-pen-stat:nth-child(3) { transform: rotate(-0.5deg); border-color: #f4a52a; }
.sg-pen-stat:nth-child(4) { transform: rotate(0.5deg); border-color: #c69b7b; }
.sg-pen-stat .n { font-family: 'Newsreader', serif; font-size: 40px; font-style: italic; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.sg-pen-stat .l { font-size: 13px; color: #4a443a; }

/* YouTube */
.sg-yt { padding: 96px 40px; background: #e8dcc6; }
.sg-yt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.sg-yt-card { display: block; background: #fdfaf3; padding: 12px 12px 20px; box-shadow: 0 6px 18px rgba(46,42,35,0.06); cursor: pointer; transition: transform 0.2s; text-decoration: none; color: inherit; }
.sg-yt-card:nth-child(odd) { transform: rotate(-0.7deg); }
.sg-yt-card:nth-child(even) { transform: rotate(0.7deg); }
.sg-yt-card:hover { transform: rotate(0) translateY(-4px); }
.sg-yt-card .th { aspect-ratio: 16/9; position: relative; margin-bottom: 14px; background-size: cover; background-position: center; }
.sg-yt-card .th .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(253,250,243,0.8); display: flex; align-items: center; justify-content: center; color: #c4543c; font-size: 14px; padding-left: 3px; }
.sg-yt-card .th .cat { position: absolute; bottom: 8px; left: 8px; font-family: 'Caveat', cursive; font-size: 18px; color: #fdfaf3; text-shadow: 0 1px 6px rgba(0,0,0,0.53); }
.sg-yt-card h4 { font-family: 'Newsreader', serif; font-size: 16px; font-weight: 500; line-height: 1.35; padding: 0 8px; margin-bottom: 4px; }
.sg-yt-card p { font-size: 12px; color: #6a6258; padding: 0 8px; }

.sg-yt-cta { text-align: center; margin-top: 48px; }

/* FAQ */
.sg-faq { padding: 96px 40px; }
.sg-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sg-faq-item { background: #fdfaf3; padding: 24px 28px; position: relative; box-shadow: 0 4px 14px rgba(46,42,35,0.06); }
.sg-faq-item::before { content: ''; position: absolute; width: 50px; height: 14px; background: rgba(196,84,60,0.2); top: -6px; left: 32px; }
.sg-faq-item .q { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.sg-faq-item .qn { font-family: 'Caveat', cursive; font-size: 22px; color: #c4543c; flex-shrink: 0; }
.sg-faq-item h4 { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 500; line-height: 1.4; flex: 1; margin: 0; }
.sg-faq-item .o { font-family: 'Newsreader', serif; font-size: 28px; color: #7d8c6f; font-style: italic; line-height: 1; }
.sg-faq-item p { margin-top: 12px; font-size: 14px; color: #4a443a; line-height: 1.75; font-family: 'Newsreader', serif; }

/* CTA */
.sg-cta { padding: 120px 40px; background: #7d8c6f; color: #f4ede0; text-align: center; position: relative; overflow: hidden; }
.sg-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(244,237,224,0.13) 1px, transparent 0); background-size: 32px 32px; }
.sg-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sg-cta .e { font-family: 'Caveat', cursive; font-size: 32px; color: #f4a52a; margin-bottom: 16px; }
.sg-cta h2 { font-family: 'Newsreader', serif; font-size: 72px; line-height: 1.05; font-weight: 400; margin-bottom: 20px; }
.sg-cta h2 em { font-style: italic; color: #f4a52a; }
.sg-cta p { font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto 36px; opacity: 0.9; }
.sg-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sg-cta .sg-btn.pri { background: #c4543c; color: #f4ede0; border-color: #c4543c; }
.sg-cta .sg-btn.sec { color: #f4ede0; border-color: rgba(244,237,224,0.33); }

/* Footer */
.sg-foot { background: #2e2a23; color: #f4ede0; padding: 56px 40px 40px; }
.sg-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto 32px; }
.sg-foot .sg-mark .b { background: #c4543c; }
.sg-foot .sg-mark .t { color: #f4ede0; }
.sg-foot p { font-size: 14px; line-height: 1.7; color: rgba(244,237,224,0.67); margin-top: 14px; max-width: 320px; }
.sg-foot h5 { font-family: 'Newsreader', serif; font-style: italic; font-size: 18px; margin-bottom: 14px; color: #f4a52a; font-weight: 500; }
.sg-foot ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin: 0; padding: 0; }
.sg-foot ul li { color: rgba(244,237,224,0.67); }
.sg-foot .bot { padding-top: 24px; border-top: 1px dashed rgba(244,237,224,0.2); text-align: center; font-size: 12px; color: rgba(244,237,224,0.4); }

/* ============================================================
   INNER PAGES — .sgi-
   ============================================================ */
.sgi { font-family: 'DM Sans', system-ui, sans-serif; background: #f4ede0; color: #2e2a23; width: 100%; }
.sgi * { box-sizing: border-box; margin: 0; padding: 0; }
.sgi-serif { font-family: 'Newsreader', 'Cormorant Garamond', Georgia, serif; }
.sgi-hand { font-family: 'Caveat', cursive; }

/* Top tape */
.sgi-tape { background: #c4543c; padding: 8px 32px; display: flex; justify-content: center; gap: 24px; font-size: 12px; color: #f4ede0; flex-wrap: wrap; }
.sgi-tape span { display: inline-flex; align-items: center; gap: 6px; }
.sgi-tape em { font-family: 'Caveat', cursive; font-style: normal; font-weight: 500; font-size: 16px; }

/* Nav */
.sgi-nav { padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; background: #f4ede0; border-bottom: 1px dashed rgba(46,42,35,0.25); flex-wrap: wrap; gap: 16px; }
.sgi-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.sgi-mark .b { width: 42px; height: 42px; background: #7d8c6f; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; color: #f4ede0; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.sgi-mark .t { font-family: 'Newsreader', serif; font-size: 21px; line-height: 1.1; }
.sgi-mark .t b { font-weight: 600; }
.sgi-mark .t small { display: block; font-family: 'Caveat', cursive; font-size: 14px; color: #c4543c; }
.sgi-mark .t em { font-style: italic; color: #c4543c; padding: 0 3px; }
.sgi-nav ul { display: flex; gap: 8px; list-style: none; font-size: 14px; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; }
.sgi-nav a { padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.2s; color: #4a443a; text-decoration: none; display: inline-block; }
.sgi-nav a:hover { background: #e8dcc6; }
.sgi-nav a.active { color: #c4543c; font-weight: 600; background: #fdfaf3; box-shadow: inset 0 -2px 0 #c4543c; }
.sgi-nav .yt { background: #c4543c; color: #f4ede0; }
.sgi-nav .yt:hover { background: #a83a26; color: #f4ede0; }

/* Breadcrumb */
.sgi-crumb { background: #ebe2d0; padding: 14px 40px; font-size: 14px; }
.sgi-crumb .row { display: flex; gap: 10px; align-items: center; color: #6a6258; }
.sgi-crumb a { color: #5a6a4e; text-decoration: none; font-weight: 500; }
.sgi-crumb a:hover { color: #c4543c; }
.sgi-crumb .sep { font-family: 'Newsreader', serif; font-style: italic; color: #9a9088; }
.sgi-crumb .cur { color: #2e2a23; font-style: italic; font-family: 'Newsreader', serif; font-size: 15px; }

/* Page hero */
.sgi-hero { padding: 64px 40px 72px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; border-bottom: 1px dashed rgba(46,42,35,0.2); position: relative; }
.sgi-hero-text .stamp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #7d8c6f; color: #f4ede0; border-radius: 999px; font-size: 12px; font-weight: 500; margin-bottom: 24px; }
.sgi-hero-text .stamp::before { content: '✿'; }
.sgi-hero-text .stamp.clay { background: #c4543c; }
.sgi-hero-text .stamp.orange { background: #f4a52a; color: #2e2a23; }
.sgi-hero h1 { font-family: 'Newsreader', serif; font-size: 64px; line-height: 1.05; font-weight: 400; margin-bottom: 20px; }
.sgi-hero h1 em { font-style: italic; color: #7d8c6f; }
.sgi-hero h1 .ann { position: relative; display: inline-block; }
.sgi-hero h1 .ann::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 10px; background: rgba(244,165,42,0.45); z-index: -1; border-radius: 3px; }
.sgi-hero .lede { font-size: 16px; line-height: 1.75; color: #4a443a; max-width: 520px; font-family: 'Newsreader', serif; }
.sgi-hero .lede b { color: #2e2a23; font-weight: 600; }
.sgi-hand-note { font-family: 'Caveat', cursive; font-size: 22px; color: #c4543c; transform: rotate(-2deg); display: inline-block; margin-top: 16px; }

/* Hero visual — single polaroid */
.sgi-hero-visual { position: relative; height: 360px; display: flex; align-items: center; justify-content: center; }
.sgi-pola { background: #fdfaf3; padding: 14px 14px 56px; box-shadow: 0 12px 36px rgba(46,42,35,0.18); border: 1px solid rgba(46,42,35,0.04); position: relative; }
.sgi-pola .img { aspect-ratio: 1; background-size: cover; background-position: center; }
.sgi-pola .cap { position: absolute; bottom: 14px; left: 14px; right: 14px; font-family: 'Caveat', cursive; font-size: 22px; color: #2e2a23; text-align: center; }
.sgi-pola .tape { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 64px; height: 18px; background: rgba(198,155,123,0.65); }

/* Color washes for placeholder images */
.sgi-bg-sage { background: linear-gradient(135deg, #7d8c6f, #5a6a4e, #4a5a40); }
.sgi-bg-clay { background: linear-gradient(135deg, #c69b7b, #b58764, #8a5a4a); }
.sgi-bg-sun { background: linear-gradient(135deg, #f4a52a, #e8852a, #c4543c); }
.sgi-bg-ocean { background: linear-gradient(135deg, #6a8a9a, #4a6a7a, #c69b7b); }
.sgi-bg-plum { background: linear-gradient(135deg, #8a6a8a, #b58aa8, #c4543c); }
.sgi-bg-mauve { background: linear-gradient(135deg, #b58a8a, #c69b7b, #d4a574); }
.sgi-bg-ink { background: linear-gradient(135deg, #2e2a23, #4a443a, #6a6258); }
.sgi-bg-2 { background: linear-gradient(135deg, #4a5a78, #6a7a98); }
.sgi-bg-3 { background: linear-gradient(135deg, #7d8c6f, #5a6a4e); }
.sgi-bg-4 { background: linear-gradient(135deg, #c69b7b, #b58764); }

/* Sections */
.sgi-section { padding: 80px 40px; border-bottom: 1px dashed rgba(46,42,35,0.2); }
.sgi-section.alt { background: #ebe2d0; }
.sgi-section.dark { background: #2e2a23; color: #f4ede0; border-bottom-color: rgba(244,237,224,0.2); }
.sgi-section.dark .sgi-section-h h2 { color: #f4ede0; }
.sgi-section.dark .sgi-section-h h2 em { color: #f4a52a; }
.sgi-section.dark .sgi-section-h .e { color: #f4a52a; }
.sgi-section.dark .sgi-section-h .d { color: rgba(244,237,224,0.85); }

.sgi-section-h { text-align: center; margin-bottom: 56px; max-width: 800px; margin-left: auto; margin-right: auto; }
.sgi-section-h .e { font-family: 'Caveat', cursive; font-size: 26px; color: #c4543c; margin-bottom: 6px; transform: rotate(-1deg); display: inline-block; }
.sgi-section-h h2 { font-family: 'Newsreader', serif; font-size: 48px; line-height: 1.08; font-weight: 400; color: #2e2a23; margin: 0; }
.sgi-section-h h2 em { font-style: italic; color: #7d8c6f; }
.sgi-section-h .d { font-size: 15px; color: #4a443a; margin-top: 14px; line-height: 1.7; font-family: 'Newsreader', serif; }

/* Content grid */
.sgi-cgrid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; max-width: 1080px; margin: 0 auto; }
.sgi-cgrid.reverse { grid-template-columns: 0.95fr 1.05fr; direction: rtl; }
.sgi-cgrid.reverse > * { direction: ltr; }

.sgi-ctext .tag { font-family: 'Caveat', cursive; font-size: 22px; color: #c4543c; margin-bottom: 8px; display: inline-block; transform: rotate(-1deg); }
.sgi-ctext h2 { font-family: 'Newsreader', serif; font-size: 40px; line-height: 1.1; font-weight: 400; margin-bottom: 16px; }
.sgi-ctext h2 em { font-style: italic; color: #7d8c6f; }
.sgi-ctext h3 { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; font-style: italic; color: #5a6a4e; margin: 28px 0 12px; }
.sgi-ctext p { font-family: 'Newsreader', serif; font-size: 16px; line-height: 1.8; color: #3a342e; margin-bottom: 14px; }
.sgi-ctext p b, .sgi-ctext p strong { color: #2e2a23; font-weight: 600; }
.sgi-ctext ul { list-style: none; margin: 12px 0; padding: 0; }
.sgi-ctext ul li { font-family: 'Newsreader', serif; font-size: 15px; line-height: 1.75; color: #3a342e; padding-left: 24px; position: relative; margin-bottom: 8px; }
.sgi-ctext ul li::before { content: '✦'; position: absolute; left: 4px; color: #c4543c; font-size: 12px; top: 4px; }
.sgi-ctext ul li strong { color: #2e2a23; font-weight: 600; }

/* Info card — paper-white box with sage top */
.sgi-card { background: #fdfaf3; border-radius: 14px; padding: 28px; box-shadow: 0 6px 22px rgba(46,42,35,0.08); border-top: 4px solid #7d8c6f; position: relative; margin-bottom: 20px; }
.sgi-card.clay { border-top-color: #c4543c; }
.sgi-card.sun { border-top-color: #f4a52a; }
.sgi-card h3 { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 500; font-style: italic; color: #2e2a23; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px dashed rgba(46,42,35,0.2); display: flex; align-items: center; gap: 10px; }
.sgi-card .row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dotted rgba(46,42,35,0.12); gap: 16px; }
.sgi-card .row:last-child { border-bottom: none; }
.sgi-card .l { font-size: 13px; color: #6a6258; font-family: 'DM Sans', sans-serif; }
.sgi-card .v { font-size: 14px; color: #2e2a23; font-weight: 600; text-align: right; font-family: 'Newsreader', serif; }
.sgi-card .v small { display: block; font-weight: 400; font-size: 11px; color: #6a6258; margin-top: 2px; }

/* Cost card — sage background */
.sgi-cost { background: #7d8c6f; color: #f4ede0; border-radius: 14px; padding: 28px; margin-bottom: 20px; position: relative; overflow: hidden; }
.sgi-cost::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(244,237,224,0.12) 1px, transparent 0); background-size: 18px 18px; opacity: 0.6; pointer-events: none; }
.sgi-cost.clay { background: #c4543c; }
.sgi-cost h3 { font-family: 'Newsreader', serif; font-size: 19px; font-style: italic; font-weight: 500; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px dashed rgba(244,237,224,0.25); display: flex; align-items: center; gap: 10px; position: relative; }
.sgi-cost .row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dotted rgba(244,237,224,0.18); gap: 16px; position: relative; }
.sgi-cost .row:last-child { border-bottom: none; }
.sgi-cost .l { font-size: 13px; opacity: 0.85; font-family: 'DM Sans', sans-serif; }
.sgi-cost .v { font-size: 14px; font-weight: 600; font-family: 'Newsreader', serif; text-align: right; }
.sgi-cost .row.total { padding-top: 14px; margin-top: 6px; border-top: 1px solid rgba(244,237,224,0.4); border-bottom: none; }
.sgi-cost .row.total .l { opacity: 1; font-weight: 600; font-size: 14px; }
.sgi-cost .row.total .v { font-size: 17px; color: #f4a52a; }

/* Step list */
.sgi-steps { list-style: none; margin: 0; padding: 0; }
.sgi-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px dashed rgba(46,42,35,0.15); }
.sgi-steps li:last-child { border-bottom: none; }
.sgi-steps .num { width: 44px; height: 44px; border-radius: 50%; background: #fdfaf3; border: 2px solid #c4543c; color: #c4543c; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; font-weight: 500; }
.sgi-steps strong { display: block; font-family: 'Newsreader', serif; font-size: 17px; font-weight: 500; color: #2e2a23; margin-bottom: 3px; }
.sgi-steps p { font-family: 'Newsreader', serif; font-size: 14px; color: #5a554c; line-height: 1.65; margin: 0; }

/* Tip + warning boxes */
.sgi-tip, .sgi-warn { padding: 18px 22px; border-radius: 12px; margin: 20px 0; font-family: 'Newsreader', serif; font-size: 14px; line-height: 1.7; position: relative; border-left: 4px solid; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.sgi-tip { background: #e8efe2; border-left-color: #7d8c6f; color: #2e3a26; }
.sgi-warn { background: #fbeede; border-left-color: #f4a52a; color: #4a3a1a; }
.sgi-tip .ic, .sgi-warn .ic { font-family: 'Caveat', cursive; font-size: 24px; line-height: 1; padding-top: 2px; }
.sgi-tip .ic { color: #5a6a4e; }
.sgi-warn .ic { color: #c4543c; }
.sgi-tip strong, .sgi-warn strong { font-weight: 600; }
.sgi-tip em, .sgi-warn em { font-style: italic; }

/* Compare table */
.sgi-table-wrap { overflow-x: auto; max-width: 1080px; margin: 0 auto; background: #fdfaf3; border-radius: 14px; box-shadow: 0 8px 28px rgba(46,42,35,0.08); }
.sgi-table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: 14px; }
.sgi-table th { background: #7d8c6f; color: #f4ede0; padding: 16px 18px; text-align: left; font-family: 'Newsreader', serif; font-size: 16px; font-weight: 500; font-style: italic; }
.sgi-table th:first-child { border-radius: 14px 0 0 0; }
.sgi-table th:last-child { border-radius: 0 14px 0 0; }
.sgi-table td { padding: 14px 18px; border-bottom: 1px dashed rgba(46,42,35,0.12); color: #3a342e; vertical-align: top; line-height: 1.55; }
.sgi-table tr:last-child td { border-bottom: none; }
.sgi-table tr:nth-child(even) td { background: rgba(232,220,198,0.4); }
.sgi-table td:first-child { font-family: 'Newsreader', serif; font-weight: 600; color: #2e2a23; }
.sgi-table td strong { color: #2e2a23; font-weight: 600; }

.sgi-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: 'DM Sans', sans-serif; }
.sgi-pill.good { background: #e8efe2; color: #4f5e44; }
.sgi-pill.warn { background: #fbeede; color: #8a5a1a; }

/* Three-card spotlight grid */
.sgi-spot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
.sgi-spot-card { background: #fdfaf3; border-radius: 14px; padding: 0 0 28px; box-shadow: 0 6px 22px rgba(46,42,35,0.08); position: relative; overflow: hidden; transition: transform 0.2s; }
.sgi-spot-card:hover { transform: translateY(-4px); }
.sgi-spot-card .ph { aspect-ratio: 5/3; position: relative; background-size: cover; background-position: center; }
.sgi-spot-card .ph .num { position: absolute; top: 12px; left: 12px; padding: 4px 12px; background: rgba(46,42,35,0.55); backdrop-filter: blur(6px); color: #fdfaf3; border-radius: 999px; font-family: 'Newsreader', serif; font-style: italic; font-size: 16px; }
.sgi-spot-card .ph .stamp { position: absolute; top: 12px; right: 12px; padding: 4px 12px; background: #fdfaf3; color: #2e2a23; border-radius: 999px; font-family: 'Caveat', cursive; font-size: 16px; }
.sgi-spot-card h3 { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; padding: 22px 24px 8px; line-height: 1.2; margin: 0; }
.sgi-spot-card h3 em { font-style: italic; color: #7d8c6f; }
.sgi-spot-card p { padding: 0 24px; font-family: 'Newsreader', serif; font-size: 14px; line-height: 1.65; color: #4a443a; margin-bottom: 12px; }
.sgi-spot-card .big { padding: 0 24px; font-family: 'Newsreader', serif; font-size: 32px; font-weight: 500; font-style: italic; color: #c4543c; line-height: 1; margin: 8px 0; }
.sgi-spot-card .small { padding: 0 24px; font-size: 12px; color: #6a6258; }

/* CTA */
.sgi-cta { padding: 100px 40px; background: #7d8c6f; color: #f4ede0; text-align: center; position: relative; overflow: hidden; }
.sgi-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(244,237,224,0.15) 1px, transparent 0); background-size: 32px 32px; }
.sgi-cta-inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; }
.sgi-cta .e { font-family: 'Caveat', cursive; font-size: 28px; color: #f4a52a; margin-bottom: 12px; }
.sgi-cta h2 { font-family: 'Newsreader', serif; font-size: 56px; line-height: 1.05; font-weight: 400; margin-bottom: 16px; }
.sgi-cta h2 em { font-style: italic; color: #f4a52a; }
.sgi-cta p { font-family: 'Newsreader', serif; font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto 28px; opacity: 0.92; }
.sgi-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.sgi-btn { padding: 14px 26px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1.5px solid; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; text-decoration: none; }
.sgi-btn.pri { background: #2e2a23; color: #f4ede0; border-color: #2e2a23; }
.sgi-btn.pri:hover { background: #1a1814; }
.sgi-btn.clay { background: #c4543c; color: #f4ede0; border-color: #c4543c; }
.sgi-btn.clay:hover { background: #a83a26; }
.sgi-btn.sec { background: transparent; color: #2e2a23; border-color: rgba(46,42,35,0.3); }
.sgi-btn.sec:hover { border-color: #2e2a23; }
.sgi-cta .sgi-btn.pri { background: #c4543c; border-color: #c4543c; }
.sgi-cta .sgi-btn.sec { color: #f4ede0; border-color: rgba(244,237,224,0.4); }
.sgi-cta .sgi-btn.sec:hover { background: rgba(244,237,224,0.1); border-color: #f4ede0; }

/* Footer */
.sgi-foot { background: #2e2a23; color: #f4ede0; padding: 56px 40px 36px; }
.sgi-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto 32px; }
.sgi-foot .sgi-mark .b { background: #c4543c; }
.sgi-foot .sgi-mark .t { color: #f4ede0; }
.sgi-foot .sgi-mark .t em { color: #f4a52a; }
.sgi-foot p { font-size: 14px; line-height: 1.7; color: rgba(244,237,224,0.7); margin-top: 14px; max-width: 320px; font-family: 'Newsreader', serif; }
.sgi-foot h5 { font-family: 'Newsreader', serif; font-style: italic; font-size: 18px; margin-bottom: 14px; color: #f4a52a; font-weight: 500; }
.sgi-foot ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin: 0; padding: 0; }
.sgi-foot ul li a { color: rgba(244,237,224,0.7); text-decoration: none; cursor: pointer; }
.sgi-foot ul li a:hover { color: #f4ede0; }
.sgi-foot .bot { padding-top: 24px; border-top: 1px dashed rgba(244,237,224,0.2); text-align: center; font-size: 12px; color: rgba(244,237,224,0.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sg-hero, .sgi-hero { grid-template-columns: 1fr; }
  .sg-polas { height: 380px; margin-top: 24px; }
  .sgi-hero-visual { height: 280px; margin-top: 24px; }
  .sg-about { grid-template-columns: 1fr; }
  .sg-about-pola { width: 220px; justify-self: center; }
  .sg-topics-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-pen-grid { grid-template-columns: 1fr; }
  .sg-pen-collage { height: 420px; }
  .sg-yt-grid { grid-template-columns: repeat(2, 1fr); }
  .sgi-cgrid, .sgi-cgrid.reverse { grid-template-columns: 1fr; direction: ltr; }
  .sgi-spot { grid-template-columns: 1fr; }
  .sg-h1 { font-size: 60px; }
  .sg-cta h2 { font-size: 52px; }
  .sg-foot-grid, .sgi-foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .sg-nav, .sgi-nav { padding: 16px 20px; }
  .sg-hero, .sgi-hero { padding: 40px 20px 48px; }
  .sg-about, .sg-topics, .sg-penang, .sg-yt, .sg-faq, .sgi-section { padding-left: 20px; padding-right: 20px; }
  .sg-stats { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; }
  .sg-topics-grid, .sg-yt-grid, .sg-pen-stats { grid-template-columns: 1fr; }
  .sg-h1 { font-size: 42px; }
  .sgi-hero h1 { font-size: 42px; }
  .sg-letter { padding: 40px 28px; }
  .sg-letter::before { left: 12px; top: -20px; }
  .sg-cta, .sgi-cta { padding: 64px 20px; }
  .sg-cta h2 { font-size: 38px; }
  .sgi-cta h2 { font-size: 36px; }
  .sg-foot, .sgi-foot { padding: 40px 20px 28px; }
}