{"id":10,"date":"2026-08-28T06:21:48","date_gmt":"2026-08-28T06:21:48","guid":{"rendered":"https:\/\/netglu.com\/?page_id=10"},"modified":"2026-08-28T07:03:31","modified_gmt":"2026-08-28T07:03:31","slug":"home","status":"publish","type":"page","link":"https:\/\/netglu.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- ============================================================\n     GETDERMA \u2014 HOME v3\n     \"DISPENSARY\"\n     Body only. Header + footer stay as global WordPress parts.\n\n     DESIGN NOTES\n     - Display face: Archivo, run at an expanded width (wdth 118).\n       Not a serif \u2014 the serif\/cream look is everywhere right now.\n     - Utility face: DM Mono for codes, captions and labels.\n     - Base neutral is a cool porcelain (#F1F3F2), very slightly\n       green. Reads clinical without the blue-white SaaS feel.\n     - Signature element: the dispensary label block \u2014 a small\n       white card with mono type that sits on the corner of an\n       image. Reused on the hero and nowhere else it isn't earned.\n     - The one interactive moment is the AM \/ PM routine toggle.\n       It swaps real content, because morning and evening routines\n       genuinely differ. It is not decoration.\n\n     FONTS\n     The @import below works, but loading the fonts from your\n     theme is faster. If you'd rather do that, delete the @import\n     and add this to functions.php:\n\n     wp_enqueue_style( 'gd-fonts',\n       'https:\/\/fonts.googleapis.com\/css2?family=Archivo:wdth,wght@62..125,400..700&family=DM+Mono:wght@300;400;500&display=swap',\n       array(), null );\n============================================================= -->\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wdth,wght@62..125,400..700&family=DM+Mono:wght@300;400;500&display=swap');\n\n\n\/* ============================================================\n   TOKENS\n============================================================= *\/\n\n.gd-home {\n    \/* Neutrals \u2014 cool porcelain, not cream *\/\n    --gd-porcelain: #f1f3f2;\n    --gd-porcelain-deep: #e8ecec;\n    --gd-white: #ffffff;\n\n    \/* Ink *\/\n    --gd-ink: #0e1a24;\n    --gd-ink-2: #374a58;\n    --gd-muted: #74858f;\n    --gd-faint: #9aa8b0;\n\n    \/* Accent \u2014 one blue, used sparingly *\/\n    --gd-blue: #2f6db5;\n    --gd-blue-deep: #1b4a80;\n    --gd-blue-pale: #dfe9f2;\n\n    \/* Lines *\/\n    --gd-line: #dde2e2;\n    --gd-line-2: #eaeeee;\n    --gd-line-dark: rgba(255, 255, 255, 0.16);\n\n    --gd-container: 1280px;\n    --gd-gutter: 28px;\n\n    --gd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-x: clip;\n    position: relative;\n\n    background: var(--gd-white);\n    color: var(--gd-ink-2);\n\n    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.65;\n    font-stretch: 100%;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n}\n\n.gd-home,\n.gd-home *,\n.gd-home *::before,\n.gd-home *::after { box-sizing: border-box; }\n\n.gd-home img { display: block; width: 100%; max-width: 100%; }\n.gd-home a { color: inherit; text-decoration: none; }\n.gd-home button { font: inherit; }\n\n.gd-wrap {\n    width: min(var(--gd-container), calc(100% - (var(--gd-gutter) * 2)));\n    margin-inline: auto;\n}\n\n.gd-sr {\n    position: absolute;\n    width: 1px; height: 1px;\n    padding: 0; margin: -1px;\n    overflow: hidden; clip: rect(0 0 0 0);\n    white-space: nowrap; border: 0;\n}\n\n\n\/* ============================================================\n   TYPE ROLES\n============================================================= *\/\n\n\/* Display \u2014 Archivo pushed wide. This is the voice of the page. *\/\n.gd-display {\n    margin: 0;\n    color: var(--gd-ink);\n    font-weight: 500;\n    font-stretch: 118%;\n    line-height: 0.94;\n    letter-spacing: -0.035em;\n}\n\n.gd-d1 { font-size: clamp(50px, 7.2vw, 104px); line-height: 0.9; letter-spacing: -0.045em; }\n.gd-d2 { font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -0.038em; }\n.gd-d3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.02; letter-spacing: -0.03em; }\n\n\/* Utility \u2014 codes, captions, labels *\/\n.gd-mono {\n    display: block;\n    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 10px;\n    font-weight: 400;\n    line-height: 1.4;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: var(--gd-muted);\n}\n\n.gd-mono-blue { color: var(--gd-blue-deep); }\n\n.gd-lede {\n    max-width: 46ch;\n    margin: 0;\n    color: var(--gd-ink-2);\n    font-size: 16px;\n    line-height: 1.72;\n}\n\n.gd-note {\n    max-width: 40ch;\n    margin: 0;\n    color: var(--gd-muted);\n    font-size: 13.5px;\n    line-height: 1.7;\n}\n\n\n\/* ------------------------------------------------------------\n   Tick rule \u2014 a measuring scale, used as a divider.\n   Clinical vernacular, and the only ambient pattern on the page.\n------------------------------------------------------------- *\/\n\n.gd-tick {\n    height: 9px;\n    background-repeat: repeat-x;\n    background-image:\n        linear-gradient(to right, var(--gd-line) 0 1px, transparent 1px),\n        linear-gradient(to right, var(--gd-line) 0 1px, transparent 1px);\n    background-size: 56px 9px, 7px 4px;\n    background-position: 0 0, 0 0;\n}\n\n.gd-tick-light {\n    background-image:\n        linear-gradient(to right, var(--gd-line-dark) 0 1px, transparent 1px),\n        linear-gradient(to right, var(--gd-line-dark) 0 1px, transparent 1px);\n}\n\n\n\/* ============================================================\n   BUTTONS\n============================================================= *\/\n\n.gd-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n    min-height: 50px;\n    padding: 0 26px;\n    border-radius: 2px;\n    border: 1px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    font-stretch: 104%;\n    letter-spacing: 0.01em;\n    line-height: 1;\n    cursor: pointer;\n    transition: background-color 0.22s var(--gd-ease),\n                color 0.22s var(--gd-ease),\n                border-color 0.22s var(--gd-ease);\n}\n\n.gd-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }\n\n.gd-btn-solid { background: var(--gd-ink); border-color: var(--gd-ink); color: #fff; }\n.gd-btn-solid:hover { background: var(--gd-blue-deep); border-color: var(--gd-blue-deep); color: #fff; }\n\n.gd-btn-line { background: transparent; border-color: var(--gd-line); color: var(--gd-ink); }\n.gd-btn-line:hover { border-color: var(--gd-ink); background: var(--gd-white); }\n\n.gd-btn-light { background: #fff; border-color: #fff; color: var(--gd-ink); }\n.gd-btn-light:hover { background: var(--gd-blue-pale); border-color: var(--gd-blue-pale); }\n\n.gd-btn-ghost-light { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }\n.gd-btn-ghost-light:hover { border-color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06); }\n\n\/* Text link with a rule that draws in *\/\n.gd-link {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding-bottom: 3px;\n    color: var(--gd-ink);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.gd-link::after {\n    content: \"\";\n    position: absolute;\n    left: 0; bottom: 0;\n    width: 100%; height: 1px;\n    background: currentColor;\n    transform: scaleX(1);\n    transform-origin: right;\n    transition: transform 0.4s var(--gd-ease);\n}\n\n.gd-link:hover::after { transform: scaleX(0); transform-origin: left; }\n.gd-link svg { width: 13px; height: 13px; transition: transform 0.3s var(--gd-ease); }\n.gd-link:hover svg { transform: translateX(4px); }\n\n\n\/* ============================================================\n   SECTION RHYTHM\n============================================================= *\/\n\n.gd-sec { position: relative; padding: 132px 0; }\n.gd-sec-porcelain { background: var(--gd-porcelain); }\n.gd-sec-white { background: var(--gd-white); }\n\n.gd-sec-head {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);\n    align-items: end;\n    gap: 64px;\n    margin-bottom: 56px;\n}\n\n.gd-sec-head .gd-mono { margin-bottom: 20px; }\n.gd-sec-head-simple { display: block; margin-bottom: 52px; }\n\n\n\/* ============================================================\n   HERO\n============================================================= *\/\n\n.gd-hero {\n    position: relative;\n    padding: 78px 0 0;\n    background: var(--gd-porcelain);\n    overflow: hidden;\n}\n\n\/* the only ambient wash on the page *\/\n.gd-hero::before {\n    content: \"\";\n    position: absolute;\n    top: -320px; right: -220px;\n    width: 900px; height: 900px;\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(47,109,181,0.10), rgba(47,109,181,0) 62%);\n    pointer-events: none;\n}\n\n.gd-hero-inner { position: relative; z-index: 2; }\n\n.gd-hero-eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 66px;\n}\n\n.gd-hero-eyebrow .gd-tick { flex: 1; }\n\n.gd-hero-main {\n    display: grid;\n    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);\n    align-items: end;\n    gap: 72px;\n    padding-bottom: 78px;\n}\n\n.gd-hero-copy h1 { max-width: 12ch; }\n.gd-hero-copy h1 em { font-style: normal; color: var(--gd-blue-deep); }\n\n.gd-hero-copy .gd-lede { margin-top: 30px; }\n\n.gd-hero-actions {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 14px 30px;\n    margin-top: 38px;\n}\n\n\/* ---- hero image + signature label ---- *\/\n\n.gd-hero-figure {\n    position: relative;\n    margin: 0;\n    padding-left: 34px;\n}\n\n.gd-hero-frame {\n    position: relative;\n    aspect-ratio: 4 \/ 5;\n    overflow: hidden;\n    border-radius: 2px;\n    background: var(--gd-porcelain-deep);\n}\n\n.gd-hero-frame img { width: 100%; height: 100%; object-fit: cover; }\n\n\/* SIGNATURE \u2014 dispensary label *\/\n.gd-label {\n    position: absolute;\n    left: 0; bottom: 0;\n    transform: translate(-34px, 30px);\n    min-width: 208px;\n    padding: 15px 20px 16px;\n    background: var(--gd-white);\n    border: 1px solid var(--gd-line);\n    border-radius: 2px;\n}\n\n.gd-label::before {\n    content: \"\";\n    display: block;\n    width: 16px; height: 2px;\n    margin-bottom: 12px;\n    background: var(--gd-blue);\n}\n\n.gd-label b {\n    display: block;\n    color: var(--gd-ink);\n    font-size: 13.5px;\n    font-weight: 500;\n    letter-spacing: -0.012em;\n}\n\n.gd-label .gd-mono { margin-top: 7px; font-size: 9px; letter-spacing: 0.14em; }\n\n\/* ---- micro strip under the hero ---- *\/\n\n.gd-hero-strip { border-top: 1px solid var(--gd-line); }\n\n.gd-hero-strip ul {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    margin: 0; padding: 0;\n    list-style: none;\n}\n\n.gd-hero-strip li {\n    padding: 22px 26px 22px 0;\n    color: var(--gd-muted);\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 10px;\n    letter-spacing: 0.13em;\n    text-transform: uppercase;\n}\n\n.gd-hero-strip li + li { padding-left: 26px; border-left: 1px solid var(--gd-line); }\n\n\n\/* ============================================================\n   CONCERNS\n   Typographic only. No icons, no stock photos \u2014 the ingredient\n   line is the useful information, so it gets the top slot.\n============================================================= *\/\n\n.gd-concerns { background: var(--gd-line); }\n\n.gd-concern-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 1px;\n    border: 1px solid var(--gd-line);\n    background: var(--gd-line);\n}\n\n.gd-concern {\n    display: flex;\n    flex-direction: column;\n    min-height: 322px;\n    padding: 32px 30px 28px;\n    background: var(--gd-white);\n    transition: background-color 0.28s var(--gd-ease);\n}\n\n.gd-concern:hover { background: #fbfcfc; }\n\n.gd-concern-key { margin-bottom: 34px; }\n\n.gd-concern-body { margin-top: auto; }\n.gd-concern-body h3 { margin: 0; }\n.gd-concern-body p { margin: 12px 0 0; color: var(--gd-muted); font-size: 13px; line-height: 1.62; }\n\n.gd-concern-foot {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-top: 26px;\n    padding-top: 20px;\n    border-top: 1px solid var(--gd-line-2);\n}\n\n.gd-concern-rule {\n    width: 22px; height: 2px;\n    background: var(--gd-blue);\n    transition: width 0.35s var(--gd-ease);\n}\n\n.gd-concern:hover .gd-concern-rule { width: 46px; }\n\n.gd-concern-foot span {\n    margin-left: auto;\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 9.5px;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--gd-ink);\n}\n\n\n\/* ============================================================\n   PRODUCTS\n============================================================= *\/\n\n.gd-filters {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 26px;\n    justify-self: end;\n}\n\n.gd-filter {\n    padding: 0 0 6px;\n    border: 0;\n    border-bottom: 1px solid transparent;\n    background: none;\n    color: var(--gd-faint);\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 10px;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: color 0.22s var(--gd-ease), border-color 0.22s var(--gd-ease);\n}\n\n.gd-filter:hover { color: var(--gd-ink-2); }\n.gd-filter.gd-on { color: var(--gd-ink); border-bottom-color: var(--gd-ink); }\n\n.gd-product-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 1px;\n    border: 1px solid var(--gd-line);\n    background: var(--gd-line);\n}\n\n.gd-product {\n    display: flex;\n    flex-direction: column;\n    background: var(--gd-white);\n}\n\n.gd-product-media {\n    position: relative;\n    aspect-ratio: 1 \/ 1;\n    overflow: hidden;\n    background: var(--gd-porcelain);\n}\n\n.gd-product-media img {\n    width: 100%; height: 100%;\n    object-fit: cover;\n    transition: transform 0.7s var(--gd-ease);\n}\n\n.gd-product:hover .gd-product-media img { transform: scale(1.035); }\n\n.gd-product-tag {\n    position: absolute;\n    top: 14px; left: 14px;\n    padding: 6px 10px;\n    background: rgba(255,255,255,0.94);\n    border-radius: 2px;\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 8.5px;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: var(--gd-ink);\n}\n\n.gd-product-info {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding: 24px 22px 22px;\n}\n\n.gd-product-info h3 {\n    margin: 14px 0 0;\n    color: var(--gd-ink);\n    font-size: 17px;\n    font-weight: 500;\n    font-stretch: 106%;\n    line-height: 1.28;\n    letter-spacing: -0.022em;\n}\n\n.gd-product-info p {\n    margin: 9px 0 0;\n    color: var(--gd-muted);\n    font-size: 12.5px;\n    line-height: 1.6;\n}\n\n.gd-product-foot {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-top: 22px;\n    padding-top: 18px;\n    border-top: 1px solid var(--gd-line-2);\n}\n\n.gd-product-price {\n    color: var(--gd-ink);\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 13px;\n    letter-spacing: 0.01em;\n}\n\n.gd-product-cta {\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 9.5px;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--gd-blue-deep);\n    border-bottom: 1px solid transparent;\n    transition: border-color 0.22s var(--gd-ease);\n}\n\n.gd-product:hover .gd-product-cta { border-bottom-color: var(--gd-blue-deep); }\n\n.gd-products-foot { margin-top: 44px; text-align: center; }\n\n\n\/* ============================================================\n   ROUTINE \u2014 the interactive moment (AM \/ PM)\n============================================================= *\/\n\n.gd-routine {\n    display: grid;\n    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);\n    background: var(--gd-ink);\n    color: #fff;\n}\n\n.gd-routine-media { position: relative; min-height: 640px; overflow: hidden; }\n\n.gd-routine-media img {\n    width: 100%; height: 100%;\n    object-fit: cover;\n    transition: filter 0.65s var(--gd-ease), transform 0.65s var(--gd-ease);\n}\n\n.gd-routine-media::after {\n    content: \"\";\n    position: absolute; inset: 0;\n    background: linear-gradient(90deg, rgba(14,26,36,0.18), rgba(14,26,36,0.42));\n    opacity: 0;\n    transition: opacity 0.65s var(--gd-ease);\n    pointer-events: none;\n}\n\n\/* evening state \u2014 the panel physically dims *\/\n.gd-routine[data-time=\"pm\"] .gd-routine-media img { filter: brightness(0.74) saturate(0.86); }\n.gd-routine[data-time=\"pm\"] .gd-routine-media::after { opacity: 1; }\n\n.gd-routine-copy {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 96px clamp(28px, 6vw, 96px);\n}\n\n.gd-routine-copy .gd-mono { color: #86a9c9; }\n.gd-routine-copy h2 { max-width: 13ch; margin: 20px 0 0; color: #fff; }\n.gd-routine-copy > p { max-width: 44ch; margin: 22px 0 0; color: #a9bccb; font-size: 14.5px; line-height: 1.72; }\n\n\/* toggle *\/\n.gd-toggle {\n    display: inline-flex;\n    gap: 2px;\n    margin-top: 36px;\n    padding: 3px;\n    border: 1px solid var(--gd-line-dark);\n    border-radius: 2px;\n    align-self: flex-start;\n}\n\n.gd-toggle button {\n    min-height: 38px;\n    padding: 0 22px;\n    border: 0;\n    border-radius: 1px;\n    background: transparent;\n    color: #93a9b8;\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 10px;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: background-color 0.24s var(--gd-ease), color 0.24s var(--gd-ease);\n}\n\n.gd-toggle button:hover { color: #fff; }\n.gd-toggle button[aria-selected=\"true\"] { background: #fff; color: var(--gd-ink); }\n\n.gd-steps { margin-top: 34px; border-top: 1px solid var(--gd-line-dark); }\n\n.gd-step {\n    display: grid;\n    grid-template-columns: 52px minmax(0, 1fr);\n    align-items: baseline;\n    gap: 4px 18px;\n    padding: 20px 0;\n    border-bottom: 1px solid var(--gd-line-dark);\n}\n\n.gd-step-n {\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 10px;\n    letter-spacing: 0.14em;\n    color: #6d9ac6;\n}\n\n.gd-step b {\n    color: #fff;\n    font-size: 15px;\n    font-weight: 500;\n    font-stretch: 106%;\n    letter-spacing: -0.015em;\n}\n\n.gd-step p { grid-column: 2; margin: 5px 0 0; color: #93a9b8; font-size: 13px; line-height: 1.6; }\n\n.gd-routine-action { margin-top: 36px; }\n\n\/* content swap *\/\n.gd-steps [data-panel] { display: none; }\n.gd-steps [data-panel].gd-on { display: block; animation: gd-fade 0.4s var(--gd-ease) both; }\n\n@keyframes gd-fade {\n    from { opacity: 0; transform: translateY(7px); }\n    to   { opacity: 1; transform: none; }\n}\n\n\n\/* ============================================================\n   PRINCIPLES\n   Not numbered \u2014 these aren't a sequence.\n============================================================= *\/\n\n.gd-principles {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 0;\n    margin-top: 62px;\n    border-top: 1px solid var(--gd-line);\n}\n\n.gd-principle { padding: 40px 44px 8px 0; }\n.gd-principle + .gd-principle { padding-left: 44px; border-left: 1px solid var(--gd-line); }\n.gd-principle h3 { margin: 22px 0 0; }\n.gd-principle p { max-width: 34ch; margin: 13px 0 0; color: var(--gd-muted); font-size: 13.5px; line-height: 1.7; }\n\n\n\/* ============================================================\n   CUSTOMER NOTES\n============================================================= *\/\n\n.gd-quotes {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1px;\n    border: 1px solid var(--gd-line);\n    background: var(--gd-line);\n}\n\n.gd-quote {\n    display: flex;\n    flex-direction: column;\n    padding: 40px 36px 34px;\n    background: var(--gd-white);\n}\n\n.gd-quote blockquote {\n    margin: 0;\n    color: var(--gd-ink);\n    font-size: 17px;\n    font-weight: 400;\n    font-stretch: 104%;\n    line-height: 1.5;\n    letter-spacing: -0.018em;\n}\n\n.gd-quote-by {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: auto;\n    padding-top: 30px;\n}\n\n.gd-quote-mark {\n    display: grid;\n    place-items: center;\n    width: 34px; height: 34px;\n    flex: 0 0 auto;\n    border-radius: 50%;\n    background: var(--gd-blue-pale);\n    color: var(--gd-blue-deep);\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 10px;\n    letter-spacing: 0.05em;\n}\n\n.gd-quote-by b { display: block; color: var(--gd-ink); font-size: 12.5px; font-weight: 500; }\n.gd-quote-by .gd-mono { margin-top: 3px; font-size: 8.5px; }\n\n\n\/* ============================================================\n   JOURNAL\n============================================================= *\/\n\n.gd-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }\n\n.gd-post { display: block; }\n\n.gd-post-media {\n    aspect-ratio: 4 \/ 3;\n    overflow: hidden;\n    border-radius: 2px;\n    background: var(--gd-porcelain);\n}\n\n.gd-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--gd-ease); }\n.gd-post:hover .gd-post-media img { transform: scale(1.03); }\n\n.gd-post-body { padding: 22px 0 0; }\n.gd-post-body h3 { margin: 13px 0 0; }\n.gd-post-body p { max-width: 32ch; margin: 11px 0 0; color: var(--gd-muted); font-size: 13px; line-height: 1.65; }\n\n.gd-post-more {\n    display: inline-block;\n    margin-top: 16px;\n    padding-bottom: 2px;\n    border-bottom: 1px solid var(--gd-line);\n    font-family: 'DM Mono', ui-monospace, monospace;\n    font-size: 9.5px;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--gd-ink);\n    transition: border-color 0.24s var(--gd-ease);\n}\n\n.gd-post:hover .gd-post-more { border-bottom-color: var(--gd-ink); }\n\n\n\/* ============================================================\n   CLOSING PANEL \u2014 statement + signup\n============================================================= *\/\n\n.gd-close {\n    position: relative;\n    padding: 112px 0 104px;\n    background: var(--gd-ink);\n    color: #fff;\n    overflow: hidden;\n}\n\n.gd-close-grid {\n    position: relative;\n    z-index: 2;\n    display: grid;\n    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);\n    align-items: start;\n    gap: 78px;\n}\n\n.gd-close h2 { max-width: 12ch; color: #fff; }\n.gd-close .gd-mono { color: #86a9c9; margin-bottom: 22px; }\n.gd-close-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }\n\n.gd-signup { padding-top: 8px; }\n.gd-signup p { max-width: 36ch; margin: 0; color: #a9bccb; font-size: 14px; line-height: 1.7; }\n\n.gd-signup-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 30px; }\n\n.gd-signup input {\n    flex: 1;\n    min-width: 0;\n    height: 46px;\n    padding: 0 2px;\n    border: 0;\n    border-bottom: 1px solid rgba(255,255,255,0.28);\n    border-radius: 0;\n    background: transparent;\n    color: #fff;\n    font-family: inherit;\n    font-size: 14px;\n    transition: border-color 0.24s var(--gd-ease);\n}\n\n.gd-signup input::placeholder { color: #7d94a5; }\n.gd-signup input:focus { outline: none; border-bottom-color: #fff; }\n\n.gd-signup .gd-mono { color: #7d94a5; margin: 16px 0 0; font-size: 9px; letter-spacing: 0.12em; }\n\n.gd-close-tick { margin-top: 52px; }\n\n\n\/* ============================================================\n   SCROLL REVEAL \u2014 JS-gated so no-JS keeps everything visible\n============================================================= *\/\n\n.gd-js [data-reveal] { opacity: 0; transform: translateY(18px); }\n\n.gd-js [data-reveal].gd-in {\n    opacity: 1;\n    transform: none;\n    transition: opacity 0.75s var(--gd-ease), transform 0.75s var(--gd-ease);\n}\n\n\n\/* ============================================================\n   FOCUS\n============================================================= *\/\n\n.gd-home a:focus-visible,\n.gd-home button:focus-visible,\n.gd-home input:focus-visible {\n    outline: 2px solid var(--gd-blue);\n    outline-offset: 3px;\n    border-radius: 1px;\n}\n\n.gd-close a:focus-visible,\n.gd-close button:focus-visible,\n.gd-close input:focus-visible,\n.gd-routine button:focus-visible,\n.gd-routine a:focus-visible { outline-color: #8dbde9; }\n\n\n\/* ============================================================\n   TABLET\n============================================================= *\/\n\n@media (max-width: 1080px) {\n\n    .gd-sec { padding: 100px 0; }\n\n    .gd-hero { padding-top: 58px; }\n    .gd-hero-eyebrow { margin-bottom: 46px; }\n    .gd-hero-main { grid-template-columns: 1fr; gap: 54px; padding-bottom: 58px; }\n    .gd-hero-copy h1 { max-width: 14ch; }\n    .gd-hero-figure { max-width: 560px; padding-left: 30px; }\n\n    .gd-sec-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }\n    .gd-filters { justify-self: start; }\n\n    .gd-concern-grid,\n    .gd-product-grid,\n    .gd-quotes { grid-template-columns: repeat(2, 1fr); }\n\n    .gd-routine { grid-template-columns: 1fr; }\n    .gd-routine-media { min-height: 440px; }\n    .gd-routine-copy { padding: 72px clamp(28px, 6vw, 60px); }\n\n    .gd-principles { grid-template-columns: 1fr; }\n    .gd-principle { padding: 34px 0 30px; border-bottom: 1px solid var(--gd-line); }\n    .gd-principle + .gd-principle { padding-left: 0; border-left: 0; }\n\n    .gd-journal-grid { grid-template-columns: repeat(2, 1fr); }\n\n    .gd-close-grid { grid-template-columns: 1fr; gap: 54px; }\n\n}\n\n\n\/* ============================================================\n   MOBILE\n============================================================= *\/\n\n@media (max-width: 700px) {\n\n    .gd-home { --gd-gutter: 18px; }\n\n    .gd-sec { padding: 76px 0; }\n    .gd-sec-head, .gd-sec-head-simple { margin-bottom: 38px; }\n\n    .gd-hero { padding-top: 40px; }\n    .gd-hero-eyebrow { margin-bottom: 36px; }\n    .gd-hero-main { gap: 46px; padding-bottom: 46px; }\n    .gd-hero-copy h1 { max-width: none; font-size: clamp(42px, 13vw, 60px); }\n    .gd-hero-copy .gd-lede { font-size: 15px; }\n    .gd-hero-actions { gap: 12px 22px; margin-top: 30px; }\n    .gd-hero-actions .gd-btn { flex: 1 1 100%; }\n\n    .gd-hero-figure { padding-left: 22px; max-width: none; }\n    .gd-label { transform: translate(-22px, 22px); min-width: 176px; padding: 13px 16px 14px; }\n\n    .gd-hero-strip ul { grid-template-columns: 1fr 1fr; }\n    .gd-hero-strip li { padding: 15px 14px 15px 0; font-size: 9px; }\n    .gd-hero-strip li + li { padding-left: 14px; }\n    .gd-hero-strip li:nth-child(3) { padding-left: 0; border-left: 0; }\n    .gd-hero-strip li:nth-child(-n+2) { border-bottom: 1px solid var(--gd-line); }\n\n    .gd-concern-grid { grid-template-columns: 1fr; }\n    .gd-concern { min-height: 0; padding: 26px 22px 24px; }\n    .gd-concern-key { margin-bottom: 24px; }\n\n    .gd-product-grid { grid-template-columns: repeat(2, 1fr); }\n    .gd-product-info { padding: 18px 15px 16px; }\n    .gd-product-info h3 { font-size: 15px; }\n    .gd-product-info p { display: none; }\n    .gd-product-foot { margin-top: 16px; padding-top: 14px; }\n\n    .gd-routine-media { min-height: 340px; }\n    .gd-routine-copy { padding: 56px 22px 62px; }\n    .gd-toggle { margin-top: 28px; }\n\n    .gd-quotes { grid-template-columns: 1fr; }\n    .gd-quote { padding: 30px 24px 26px; }\n    .gd-quote blockquote { font-size: 16px; }\n\n    .gd-journal-grid { grid-template-columns: 1fr; gap: 34px; }\n    .gd-post-body p { max-width: none; }\n\n    .gd-close { padding: 78px 0 74px; }\n    .gd-close-actions .gd-btn { flex: 1 1 100%; }\n    .gd-signup-row { flex-wrap: wrap; }\n    .gd-signup-row .gd-btn { width: 100%; }\n    .gd-close-tick { margin-top: 40px; }\n\n}\n\n\n\/* ============================================================\n   REDUCED MOTION\n============================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .gd-home *,\n    .gd-home *::before,\n    .gd-home *::after {\n        animation-duration: 0.001ms !important;\n        transition-duration: 0.001ms !important;\n    }\n\n    .gd-js [data-reveal] { opacity: 1 !important; transform: none !important; }\n\n}\n\n<\/style>\n\n\n\n<main class=\"gd-home\">\n\n\n    <!-- ========================================================\n         HERO\n    ========================================================= -->\n\n    <section class=\"gd-hero\">\n\n        <div class=\"gd-wrap gd-hero-inner\">\n\n            <div class=\"gd-hero-eyebrow\">\n                <span class=\"gd-mono gd-mono-blue\">GetDerma<\/span>\n                <span class=\"gd-tick\" aria-hidden=\"true\"><\/span>\n                <span class=\"gd-mono\">Skincare, considered<\/span>\n            <\/div>\n\n\n            <div class=\"gd-hero-main\">\n\n                <div class=\"gd-hero-copy\">\n\n                    <h1 class=\"gd-display gd-d1\" data-reveal>\n                        Care for the skin <em>you live in.<\/em>\n                    <\/h1>\n\n                    <p class=\"gd-lede\" data-reveal>\n                        A smaller shelf, chosen carefully. Start from what your skin\n                        is actually asking for, then build a routine you&#8217;ll keep\n                        using past the first week.\n                    <\/p>\n\n                    <div class=\"gd-hero-actions\" data-reveal>\n\n                        <a href=\"\/shop\/\" class=\"gd-btn gd-btn-solid\">\n                            Shop skincare\n                            <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                                <path d=\"M4 10H16M12 6L16 10L12 14\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                        <a href=\"\/skin-concerns\/\" class=\"gd-link\">\n                            Shop by concern\n                            <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                                <path d=\"M4 10H16M12 6L16 10L12 14\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- REPLACE WITH FINAL GETDERMA HERO PHOTOGRAPHY -->\n                <figure class=\"gd-hero-figure\" data-reveal>\n\n                    <div class=\"gd-hero-frame\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88\"\n                             alt=\"GetDerma Daily Barrier Cream photographed on a pale surface\" loading=\"eager\">\n                    <\/div>\n\n                    <!-- SIGNATURE: dispensary label -->\n                    <figcaption class=\"gd-label\">\n                        <b>Daily Barrier Cream<\/b>\n                        <span class=\"gd-mono\">Hydration &middot; 50ml &middot; AM \/ PM<\/span>\n                    <\/figcaption>\n\n                <\/figure>\n\n            <\/div>\n\n\n            <div class=\"gd-hero-strip\">\n                <ul>\n                    <li>Curated, not crowded<\/li>\n                    <li>Ships in 1&ndash;2 days<\/li>\n                    <li>Secure checkout<\/li>\n                    <li>Support from real people<\/li>\n                <\/ul>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         SHOP BY CONCERN\n         The ingredient line sits above the name on purpose \u2014\n         it's the part that actually helps someone choose.\n    ========================================================= -->\n\n    <section class=\"gd-sec gd-concerns\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-sec-head\">\n\n                <div data-reveal>\n                    <span class=\"gd-mono gd-mono-blue\">Start here<\/span>\n                    <h2 class=\"gd-display gd-d2\">Shop what your skin is asking for.<\/h2>\n                <\/div>\n\n                <p class=\"gd-note\" data-reveal>\n                    Four concerns, and the ingredients that tend to help with each.\n                    Pick the one that sounds like your skin this month.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"gd-concern-grid\">\n\n\n                <a href=\"\/skin-concerns\/acne\/\" class=\"gd-concern\" data-reveal>\n\n                    <span class=\"gd-mono gd-concern-key\">Salicylic acid &middot; Niacinamide<\/span>\n\n                    <div class=\"gd-concern-body\">\n                        <h3 class=\"gd-display gd-d3\">Acne &amp; blemishes<\/h3>\n                        <p>For skin that breaks out, congests, or reacts to almost everything you try.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-concern-foot\">\n                        <i class=\"gd-concern-rule\" aria-hidden=\"true\"><\/i>\n                        <span>Explore<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n                <a href=\"\/skin-concerns\/dryness\/\" class=\"gd-concern\" data-reveal>\n\n                    <span class=\"gd-mono gd-concern-key\">Ceramides &middot; Glycerin<\/span>\n\n                    <div class=\"gd-concern-body\">\n                        <h3 class=\"gd-display gd-d3\">Dryness &amp; hydration<\/h3>\n                        <p>For tightness, flaking, and the kind of dullness that moisturiser alone doesn&#8217;t fix.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-concern-foot\">\n                        <i class=\"gd-concern-rule\" aria-hidden=\"true\"><\/i>\n                        <span>Explore<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n                <a href=\"\/skin-concerns\/aging\/\" class=\"gd-concern\" data-reveal>\n\n                    <span class=\"gd-mono gd-concern-key\">Retinal &middot; Peptides<\/span>\n\n                    <div class=\"gd-concern-body\">\n                        <h3 class=\"gd-display gd-d3\">Fine lines &amp; texture<\/h3>\n                        <p>For softening lines and smoothing the surface, slowly and without the irritation.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-concern-foot\">\n                        <i class=\"gd-concern-rule\" aria-hidden=\"true\"><\/i>\n                        <span>Explore<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n                <a href=\"\/skin-concerns\/dark-spots\/\" class=\"gd-concern\" data-reveal>\n\n                    <span class=\"gd-mono gd-concern-key\">Vitamin C &middot; Azelaic acid<\/span>\n\n                    <div class=\"gd-concern-body\">\n                        <h3 class=\"gd-display gd-d3\">Tone &amp; dark spots<\/h3>\n                        <p>For marks left behind by breakouts, sun, or time, and for evening things out.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-concern-foot\">\n                        <i class=\"gd-concern-rule\" aria-hidden=\"true\"><\/i>\n                        <span>Explore<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         THE EDIT\n    ========================================================= -->\n\n    <section class=\"gd-sec gd-sec-porcelain\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-sec-head\">\n\n                <div data-reveal>\n                    <span class=\"gd-mono gd-mono-blue\">The edit<\/span>\n                    <h2 class=\"gd-display gd-d2\">Things worth buying twice.<\/h2>\n                <\/div>\n\n                <div class=\"gd-filters\" role=\"group\" aria-label=\"Filter products by category\" data-reveal>\n                    <button class=\"gd-filter gd-on\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\n                    <button class=\"gd-filter\" type=\"button\" data-filter=\"face\" aria-pressed=\"false\">Face<\/button>\n                    <button class=\"gd-filter\" type=\"button\" data-filter=\"body\" aria-pressed=\"false\">Body<\/button>\n                    <button class=\"gd-filter\" type=\"button\" data-filter=\"sets\" aria-pressed=\"false\">Sets<\/button>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"gd-product-grid\">\n\n\n                <!-- PRODUCT \u2014 replace with a WooCommerce product loop -->\n                <article class=\"gd-product\" data-category=\"face\" data-reveal>\n\n                    <div class=\"gd-product-media\">\n                        <span class=\"gd-product-tag\">Best seller<\/span>\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1620916566398-39f1143ab7be?auto=format&amp;fit=crop&amp;w=800&amp;q=86\"\n                             alt=\"Daily Barrier Cream\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-product-info\">\n                        <span class=\"gd-mono\">Hydration<\/span>\n                        <h3>Daily Barrier Cream<\/h3>\n                        <p>Everyday moisture that sits well under sunscreen.<\/p>\n\n                        <div class=\"gd-product-foot\">\n                            <span class=\"gd-product-price\">$28.00<\/span>\n                            <a href=\"\/shop\/\" class=\"gd-product-cta\">View<\/a>\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n\n                <article class=\"gd-product\" data-category=\"face\" data-reveal>\n\n                    <div class=\"gd-product-media\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611930022073-b7a4ba5fcccd?auto=format&amp;fit=crop&amp;w=800&amp;q=86\"\n                             alt=\"Hydration Support Serum\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-product-info\">\n                        <span class=\"gd-mono\">Serum<\/span>\n                        <h3>Hydration Support Serum<\/h3>\n                        <p>A light layer for the step between cleansing and cream.<\/p>\n\n                        <div class=\"gd-product-foot\">\n                            <span class=\"gd-product-price\">$24.00<\/span>\n                            <a href=\"\/shop\/\" class=\"gd-product-cta\">View<\/a>\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n\n                <article class=\"gd-product\" data-category=\"body\" data-reveal>\n\n                    <div class=\"gd-product-media\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1608248597279-f99d160bfcbc?auto=format&amp;fit=crop&amp;w=800&amp;q=86\"\n                             alt=\"Soft Skin Body Cream\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-product-info\">\n                        <span class=\"gd-mono\">Body<\/span>\n                        <h3>Soft Skin Body Cream<\/h3>\n                        <p>Rich enough for elbows and shins, light enough for every day.<\/p>\n\n                        <div class=\"gd-product-foot\">\n                            <span class=\"gd-product-price\">$32.00<\/span>\n                            <a href=\"\/shop\/\" class=\"gd-product-cta\">View<\/a>\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n\n                <article class=\"gd-product\" data-category=\"sets\" data-reveal>\n\n                    <div class=\"gd-product-media\">\n                        <span class=\"gd-product-tag\">Three steps<\/span>\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556228578-8c89e6adf883?auto=format&amp;fit=crop&amp;w=800&amp;q=86\"\n                             alt=\"Essential Routine Set\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-product-info\">\n                        <span class=\"gd-mono\">Set<\/span>\n                        <h3>Essential Routine Set<\/h3>\n                        <p>Cleanse, hydrate, protect. The whole routine in one box.<\/p>\n\n                        <div class=\"gd-product-foot\">\n                            <span class=\"gd-product-price\">$68.00<\/span>\n                            <a href=\"\/shop\/\" class=\"gd-product-cta\">View<\/a>\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n\n            <\/div>\n\n\n            <div class=\"gd-products-foot\" data-reveal>\n                <a href=\"\/shop\/\" class=\"gd-btn gd-btn-line\">View the full collection<\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         ROUTINE \u2014 AM \/ PM\n         The toggle swaps real content. Morning and evening\n         routines are genuinely different, so it earns its place.\n    ========================================================= -->\n\n    <section class=\"gd-routine\" data-time=\"am\">\n\n        <div class=\"gd-routine-media\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1598440947619-2c35fc9aa908?auto=format&amp;fit=crop&amp;w=1400&amp;q=88\"\n                 alt=\"A three step GetDerma skincare routine laid out on a shelf\" loading=\"lazy\">\n        <\/div>\n\n\n        <div class=\"gd-routine-copy\">\n\n            <span class=\"gd-mono\">Three steps, twice a day<\/span>\n\n            <h2 class=\"gd-display gd-d2\">A routine you&#8217;ll actually keep.<\/h2>\n\n            <p>\n                Morning and evening ask different things of your skin.\n                Here&#8217;s the short version of both.\n            <\/p>\n\n\n            <div class=\"gd-toggle\" role=\"tablist\" aria-label=\"Choose morning or evening routine\">\n                <button type=\"button\" role=\"tab\" id=\"gd-tab-am\" aria-controls=\"gd-panel-am\" aria-selected=\"true\"  data-time=\"am\">Morning<\/button>\n                <button type=\"button\" role=\"tab\" id=\"gd-tab-pm\" aria-controls=\"gd-panel-pm\" aria-selected=\"false\" data-time=\"pm\">Evening<\/button>\n            <\/div>\n\n\n            <div class=\"gd-steps\">\n\n                <div id=\"gd-panel-am\" role=\"tabpanel\" aria-labelledby=\"gd-tab-am\" data-panel=\"am\" class=\"gd-on\">\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">01<\/span>\n                        <b>Cleanse<\/b>\n                        <p>Rinse off the night. Nothing that leaves your skin feeling tight.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">02<\/span>\n                        <b>Hydrate<\/b>\n                        <p>Moisturiser while skin is still damp, so it has something to hold onto.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">03<\/span>\n                        <b>Protect<\/b>\n                        <p>Sunscreen, every morning. Of all three steps, this one does the most.<\/p>\n                    <\/div>\n\n                <\/div>\n\n\n                <div id=\"gd-panel-pm\" role=\"tabpanel\" aria-labelledby=\"gd-tab-pm\" data-panel=\"pm\" hidden>\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">01<\/span>\n                        <b>Cleanse<\/b>\n                        <p>Take the day off properly &mdash; twice if you wore sunscreen or makeup.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">02<\/span>\n                        <b>Treat<\/b>\n                        <p>Actives go here. One at a time, a few nights a week, then build up.<\/p>\n                    <\/div>\n\n                    <div class=\"gd-step\">\n                        <span class=\"gd-step-n\">03<\/span>\n                        <b>Recover<\/b>\n                        <p>Something richer to seal it in while you sleep.<\/p>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"gd-routine-action\">\n                <a href=\"\/shop\/\" class=\"gd-btn gd-btn-light\">Build your routine<\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         HOW WE CHOOSE\n    ========================================================= -->\n\n    <section class=\"gd-sec gd-sec-white\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-sec-head\">\n\n                <div data-reveal>\n                    <span class=\"gd-mono gd-mono-blue\">How we choose<\/span>\n                    <h2 class=\"gd-display gd-d2\">Fewer products, better sorted.<\/h2>\n                <\/div>\n\n                <p class=\"gd-note\" data-reveal>\n                    We&#8217;d rather carry forty things we can explain than four hundred\n                    we can&#8217;t. Three rules decide what makes the shelf.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"gd-principles\">\n\n                <article class=\"gd-principle\" data-reveal>\n                    <span class=\"gd-mono\">On the shelf<\/span>\n                    <h3 class=\"gd-display gd-d3\">Curated, not crowded<\/h3>\n                    <p>If two products do the same job, we stock the better one and drop the other.<\/p>\n                <\/article>\n\n                <article class=\"gd-principle\" data-reveal>\n                    <span class=\"gd-mono\">On the label<\/span>\n                    <h3 class=\"gd-display gd-d3\">Clear before clever<\/h3>\n                    <p>Plain descriptions of what something does, with the ingredient names you&#8217;d search for.<\/p>\n                <\/article>\n\n                <article class=\"gd-principle\" data-reveal>\n                    <span class=\"gd-mono\">In the routine<\/span>\n                    <h3 class=\"gd-display gd-d3\">Made for repeat use<\/h3>\n                    <p>Texture and finish matter. A product you dread using is a product you&#8217;ll stop using.<\/p>\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         CUSTOMER NOTES\n         SAMPLE CONTENT \u2014 replace with verified reviews before\n         launch. Do not ship placeholder quotes as real ones.\n    ========================================================= -->\n\n    <section class=\"gd-sec gd-sec-porcelain\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-sec-head-simple\" data-reveal>\n                <span class=\"gd-mono gd-mono-blue\">Customer notes<\/span>\n                <h2 class=\"gd-display gd-d2\">Easy to understand. Easy to come back to.<\/h2>\n            <\/div>\n\n\n            <div class=\"gd-quotes\">\n\n                <figure class=\"gd-quote\" data-reveal>\n                    <blockquote>\n                        I found what I needed without having to learn an entire\n                        skincare dictionary first.\n                    <\/blockquote>\n                    <figcaption class=\"gd-quote-by\">\n                        <span class=\"gd-quote-mark\" aria-hidden=\"true\">AM<\/span>\n                        <span>\n                            <b>Amanda M.<\/b>\n                            <span class=\"gd-mono\">Sample review<\/span>\n                        <\/span>\n                    <\/figcaption>\n                <\/figure>\n\n\n                <figure class=\"gd-quote\" data-reveal>\n                    <blockquote>\n                        Ordered on a Tuesday, had it Thursday, and it was packed\n                        properly. No notes.\n                    <\/blockquote>\n                    <figcaption class=\"gd-quote-by\">\n                        <span class=\"gd-quote-mark\" aria-hidden=\"true\">JR<\/span>\n                        <span>\n                            <b>Jasmine R.<\/b>\n                            <span class=\"gd-mono\">Sample review<\/span>\n                        <\/span>\n                    <\/figcaption>\n                <\/figure>\n\n\n                <figure class=\"gd-quote\" data-reveal>\n                    <blockquote>\n                        Asked a question about layering two things and got a real\n                        answer, not a copy-pasted one.\n                    <\/blockquote>\n                    <figcaption class=\"gd-quote-by\">\n                        <span class=\"gd-quote-mark\" aria-hidden=\"true\">KL<\/span>\n                        <span>\n                            <b>Kara L.<\/b>\n                            <span class=\"gd-mono\">Sample review<\/span>\n                        <\/span>\n                    <\/figcaption>\n                <\/figure>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         JOURNAL\n    ========================================================= -->\n\n    <section class=\"gd-sec gd-sec-white\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-sec-head\">\n\n                <div data-reveal>\n                    <span class=\"gd-mono gd-mono-blue\">Skin journal<\/span>\n                    <h2 class=\"gd-display gd-d2\">Learn your skin.<\/h2>\n                <\/div>\n\n                <p class=\"gd-note\" data-reveal>\n                    Short, practical pieces on what to use, when to use it, and\n                    what you can safely skip.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"gd-journal-grid\">\n\n                <a href=\"\/journal\/\" class=\"gd-post\" data-reveal>\n\n                    <div class=\"gd-post-media\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571781926291-c477ebfd024b?auto=format&amp;fit=crop&amp;w=1000&amp;q=86\"\n                             alt=\"A simple three product skincare routine\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-post-body\">\n                        <span class=\"gd-mono\">Routine<\/span>\n                        <h3 class=\"gd-display gd-d3\">The case for a smaller routine<\/h3>\n                        <p>Three products used consistently beat nine used occasionally.<\/p>\n                        <span class=\"gd-post-more\">Read article<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n                <a href=\"\/journal\/\" class=\"gd-post\" data-reveal>\n\n                    <div class=\"gd-post-media\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1615397349754-cfa2066a298e?auto=format&amp;fit=crop&amp;w=1000&amp;q=86\"\n                             alt=\"Hydrating skincare products\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-post-body\">\n                        <span class=\"gd-mono\">Hydration<\/span>\n                        <h3 class=\"gd-display gd-d3\">Dry skin and dehydrated skin aren&#8217;t the same<\/h3>\n                        <p>One is missing oil, the other is missing water. They need different things.<\/p>\n                        <span class=\"gd-post-more\">Read article<\/span>\n                    <\/div>\n\n                <\/a>\n\n\n                <a href=\"\/journal\/\" class=\"gd-post\" data-reveal>\n\n                    <div class=\"gd-post-media\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1625772452859-1c03d5bf1137?auto=format&amp;fit=crop&amp;w=1000&amp;q=86\"\n                             alt=\"Skincare ingredient labels\" loading=\"lazy\">\n                    <\/div>\n\n                    <div class=\"gd-post-body\">\n                        <span class=\"gd-mono\">Ingredients<\/span>\n                        <h3 class=\"gd-display gd-d3\">A simpler way to read a label<\/h3>\n                        <p>You only need to check four things. Here&#8217;s where to look for them.<\/p>\n                        <span class=\"gd-post-more\">Read article<\/span>\n                    <\/div>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- ========================================================\n         CLOSING PANEL\n    ========================================================= -->\n\n    <section class=\"gd-close\">\n\n        <div class=\"gd-wrap\">\n\n            <div class=\"gd-close-grid\">\n\n                <div data-reveal>\n\n                    <span class=\"gd-mono\">GetDerma<\/span>\n\n                    <h2 class=\"gd-display gd-d2\">Better skin starts with knowing your skin.<\/h2>\n\n                    <div class=\"gd-close-actions\">\n                        <a href=\"\/shop\/\" class=\"gd-btn gd-btn-light\">Shop skincare<\/a>\n                        <a href=\"\/skin-concerns\/\" class=\"gd-btn gd-btn-ghost-light\">Shop by concern<\/a>\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- Wire this to Mailchimp \/ Klaviyo \/ Newsletter plugin.\n                     Left as a plain input so it can't half-submit anywhere. -->\n                <div class=\"gd-signup\" data-reveal>\n\n                    <p>\n                        A short note every few weeks: new arrivals, restocks, and\n                        one thing worth knowing about your skin.\n                    <\/p>\n\n                    <div class=\"gd-signup-row\">\n                        <label class=\"gd-sr\" for=\"gd-email\">Email address<\/label>\n                        <input id=\"gd-email\" type=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\">\n                        <button type=\"button\" class=\"gd-btn gd-btn-light\">Subscribe<\/button>\n                    <\/div>\n\n                    <span class=\"gd-mono\">Unsubscribe any time<\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"gd-tick gd-tick-light gd-close-tick\" aria-hidden=\"true\"><\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n<\/main>\n\n\n\n<script>\n(function () {\n\n    var root = document.querySelector('.gd-home');\n    if (!root) return;\n\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n\n    \/* =====================================================\n       PRODUCT FILTER\n    ====================================================== *\/\n\n    var filters  = root.querySelectorAll('.gd-filter');\n    var products = root.querySelectorAll('.gd-product');\n\n    filters.forEach(function (button) {\n\n        button.addEventListener('click', function () {\n\n            var wanted = button.getAttribute('data-filter');\n\n            filters.forEach(function (other) {\n                var on = other === button;\n                other.classList.toggle('gd-on', on);\n                other.setAttribute('aria-pressed', on ? 'true' : 'false');\n            });\n\n            products.forEach(function (product) {\n                var show = wanted === 'all' || product.getAttribute('data-category') === wanted;\n                product.style.display = show ? '' : 'none';\n            });\n\n        });\n\n    });\n\n\n    \/* =====================================================\n       ROUTINE \u2014 AM \/ PM\n    ====================================================== *\/\n\n    var routine = root.querySelector('.gd-routine');\n\n    if (routine) {\n\n        var tabs   = routine.querySelectorAll('.gd-toggle button');\n        var panels = routine.querySelectorAll('[data-panel]');\n\n        var show = function (time) {\n\n            routine.setAttribute('data-time', time);\n\n            tabs.forEach(function (tab) {\n                tab.setAttribute('aria-selected', tab.getAttribute('data-time') === time ? 'true' : 'false');\n            });\n\n            panels.forEach(function (panel) {\n                var on = panel.getAttribute('data-panel') === time;\n                panel.classList.toggle('gd-on', on);\n                panel.hidden = !on;\n            });\n\n        };\n\n        tabs.forEach(function (tab) {\n\n            tab.addEventListener('click', function () {\n                show(tab.getAttribute('data-time'));\n            });\n\n            \/* arrow keys move between tabs *\/\n            tab.addEventListener('keydown', function (event) {\n\n                if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n\n                event.preventDefault();\n\n                var list  = Array.prototype.slice.call(tabs);\n                var next  = list[(list.indexOf(tab) + (event.key === 'ArrowRight' ? 1 : -1) + list.length) % list.length];\n\n                next.focus();\n                show(next.getAttribute('data-time'));\n\n            });\n\n        });\n\n    }\n\n\n    \/* =====================================================\n       SCROLL REVEAL\n       Only runs when JS and IntersectionObserver are here,\n       so the page is never blank without them.\n    ====================================================== *\/\n\n    var targets = root.querySelectorAll('[data-reveal]');\n\n    if (reduced || !('IntersectionObserver' in window) || !targets.length) return;\n\n    root.classList.add('gd-js');\n\n    \/* stagger items that share a parent *\/\n    var seen = new Map();\n\n    targets.forEach(function (item) {\n        var parent = item.parentElement;\n        var index  = seen.get(parent) || 0;\n        seen.set(parent, index + 1);\n        item.style.transitionDelay = Math.min(index, 5) * 70 + 'ms';\n    });\n\n    var watcher = new IntersectionObserver(function (entries) {\n\n        entries.forEach(function (entry) {\n            if (!entry.isIntersecting) return;\n            entry.target.classList.add('gd-in');\n            watcher.unobserve(entry.target);\n        });\n\n    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.05 });\n\n    targets.forEach(function (item) { watcher.observe(item); });\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>GetDerma Skincare, considered Care for the skin you live in. A smaller shelf, chosen carefully. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - GetDerma<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/netglu.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - GetDerma\" \/>\n<meta property=\"og:description\" content=\"GetDerma Skincare, considered Care for the skin you live in. A smaller shelf, chosen carefully. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/netglu.com\/\" \/>\n<meta property=\"og:site_name\" content=\"GetDerma\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-28T07:03:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/netglu.com\\\/\",\"url\":\"https:\\\/\\\/netglu.com\\\/\",\"name\":\"Home - GetDerma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/netglu.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/netglu.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/netglu.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88\",\"datePublished\":\"2026-08-28T06:21:48+00:00\",\"dateModified\":\"2026-08-28T07:03:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/netglu.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/netglu.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/netglu.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88\",\"contentUrl\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/netglu.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/netglu.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/netglu.com\\\/#website\",\"url\":\"https:\\\/\\\/netglu.com\\\/\",\"name\":\"GetDerma\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/netglu.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - GetDerma","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/netglu.com\/","og_locale":"en_US","og_type":"article","og_title":"Home - GetDerma","og_description":"GetDerma Skincare, considered Care for the skin you live in. A smaller shelf, chosen carefully. [&hellip;]","og_url":"https:\/\/netglu.com\/","og_site_name":"GetDerma","article_modified_time":"2026-08-28T07:03:31+00:00","og_image":[{"url":"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/netglu.com\/","url":"https:\/\/netglu.com\/","name":"Home - GetDerma","isPartOf":{"@id":"https:\/\/netglu.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/netglu.com\/#primaryimage"},"image":{"@id":"https:\/\/netglu.com\/#primaryimage"},"thumbnailUrl":"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88","datePublished":"2026-08-28T06:21:48+00:00","dateModified":"2026-08-28T07:03:31+00:00","breadcrumb":{"@id":"https:\/\/netglu.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/netglu.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/netglu.com\/#primaryimage","url":"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88","contentUrl":"https:\/\/images.unsplash.com\/photo-1612817288484-6f916006741a?auto=format&amp;fit=crop&amp;w=1200&amp;q=88"},{"@type":"BreadcrumbList","@id":"https:\/\/netglu.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/netglu.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/netglu.com\/#website","url":"https:\/\/netglu.com\/","name":"GetDerma","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/netglu.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netglu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/netglu.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/netglu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}