{"id":876,"date":"2026-09-03T14:30:20","date_gmt":"2026-09-03T14:30:20","guid":{"rendered":"https:\/\/naturalstructure.com\/?page_id=876"},"modified":"2026-09-03T18:03:34","modified_gmt":"2026-09-03T18:03:34","slug":"index-test-to-get-rid-of-gap-at-top","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/","title":{"rendered":"Grant Houston at Natural Structure | Product, UX, and Interaction Designer in Los Angeles, CA"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Grant Houston &#8211; Natural Structure<\/title>\n<style>\n  \/* ---------- Design Tokens & Base ---------- *\/\n  .ns-page {\n      --ns-white: #FFFFFF; --ns-gray-bg: #F7F7F7; --ns-gray-bg-2: #F0F0F0;\n      --ns-charcoal-heading: #111111; --ns-charcoal-body: #333333;\n      --ns-blue: #2B82C9; --ns-blue-hover: #246EA8; --ns-blue-light: #EBF4FB;\n      --ns-black: #000000; --ns-border: #E5E5E5;\n      --ns-font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      --ns-max-width: 1440px; --ns-gutter: 56px;\n      font-family: var(--ns-font); color: var(--ns-charcoal-body); background: var(--ns-white);\n      line-height: 1.6; -webkit-font-smoothing: antialiased;\n  }\n  .ns-page, .ns-page *, .ns-page *::before, .ns-page *::after { box-sizing: border-box; }\n  .ns-page h1, .ns-page h2, .ns-page h3, .ns-page h4 { color: var(--ns-charcoal-heading); font-weight: 800; line-height: 1.2; margin: 0; }\n  .ns-page p { margin: 0; color: var(--ns-charcoal-body); line-height: 1.6; }\n  .ns-page img { max-width: 100%; height: auto; display: block; border-radius: 6px; }\n  .ns-page a { color: var(--ns-charcoal-heading); text-decoration: none; text-underline-offset: 3px; }\n  .ns-page a:hover { color: var(--ns-charcoal-heading); }\n  .ns-page em { font-style: italic; color: #555; }\n  .ns-page figcaption, .ns-page .ux-caption { font-style: normal !important; }\n\n  \/* ---------- Header & Nav ---------- *\/\n  .ns-header { border-bottom: 1px solid var(--ns-border); }\n  .ns-header__inner { max-width: var(--ns-max-width); margin: 0 auto; padding: 18px var(--ns-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }\n  .ns-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }\n  .ns-logo__mark { width: 216px; height: 60px; flex-shrink: 0; }\n  .ns-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: flex-end; }\n  .ns-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }\n  .ns-nav__links a { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }\n  .ns-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--ns-blue); color: var(--ns-white) !important; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.15s ease; }\n \n   \/* Mobile nav menu animation and drawer *\/\n  .ns-mobile-toggle { display: none; background-color: var(--ns-white) !important; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; border-radius: 6px; -webkit-tap-highlight-color: transparent; outline: none; margin-left: auto; align-self: center; }\n  .ns-mobile-toggle:focus, .ns-mobile-toggle:active, .ns-page.is-nav-open .ns-mobile-toggle { background-color: var(--ns-white) !important; outline: none; }\n  .ns-mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--ns-charcoal-heading); margin: 5px 0; transition: all 0.3s ease; }\n\n  \/* Morph into 'X' *\/\n  .ns-page.is-nav-open .ns-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n  .ns-page.is-nav-open .ns-mobile-toggle span:nth-child(2) { opacity: 0; }\n  .ns-page.is-nav-open .ns-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n  \/* ---------- Home Page Specific ---------- *\/\n  .ns-hero { padding: 0px var(--ns-gutter) 12px; }\n  .ns-carousel-container { position: relative; width: 100%; overflow: hidden; background-color: #ffffff; font-family: system-ui, -apple-system, sans-serif; border: 0px solid var(--ns-border); border-radius: 6px; margin: 8px auto 10px auto; }\n  .ns-carousel-track { display: flex; width: 100%; padding: 0; margin: 0; list-style: none; transition: transform 0.4s ease-in-out; }\n  .ns-carousel-slide { min-width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 0rem 2rem 6rem 2rem; box-sizing: border-box; }\n  .ns-carousel-image-wrapper { width: 100%; max-width: 1600px; margin-left: auto; }\n  .ns-carousel-image-wrapper img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 12px; }\n  .ns-carousel-image { max-width: 100%; height: auto; display: block; border-radius: 4px; }\n  .ns-carousel-text-glass { background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 24px; padding: 2.5rem; width: 90%; max-width: 500px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.04); position: absolute; left: calc(8% - 15px); z-index: 10; }\n  .ns-carousel-text-glass h2 { margin-top: 0; margin-bottom: 1rem; font-size: 2rem; color: #111; line-height: 1.2; }\n  .ns-carousel-text-glass p { margin: 0 0 1.5rem 0; font-size: 1.1rem; color: #444; line-height: 1.5; }\n  .ns-carousel-text-glass a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: #111; color: #fff; padding: 0.8rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.2s; }\n  .ns-carousel-text-glass a.btn:hover { background: #333; }\n  .ns-carousel-nav { position: absolute; bottom: calc(2rem + 10px); left: 8%; display: flex; gap: 1rem; z-index: 20; }\n  .ns-carousel-btn { background-color: #111 !important; color: #fff !important; border: none; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; outline: none; }\n  .ns-carousel-btn:hover { background-color: #333 !important; transform: scale(1.05); }\n  .ns-section { padding: 72px var(--ns-gutter); }\n  .ns-section__heading { max-width: var(--ns-max-width); margin: 0 auto 44px; font-size: 34px; }\n  .ns-impact { padding: 0 var(--ns-gutter) 72px; }\n  .ns-impact__grid { max-width: var(--ns-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 40px; }\n  .ns-impact__item h3 { font-size: 19px; margin-bottom: 10px; }\n  .ns-impact__item p { font-size: 15px; }\n  .ns-oval-wrap { max-width: var(--ns-max-width); margin: 0 auto; padding: 0 var(--ns-gutter) 72px; }\n  .ns-oval { width: 100%; aspect-ratio: 16 \/ 9; border-radius: 50% \/ 38%; overflow: hidden; }\n  .ns-oval img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }\n  .ns-capability__heading { text-align: left; font-size: 32px; margin-bottom: 32px !important; }\n  .ns-capability__grid { max-width: var(--ns-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 36px; }\n  .ns-capability__item h3 { font-size: 18px; margin-bottom: 10px; }\n  .ns-capability__item p { font-size: 15px; }\n\n\n  .ns-hero-intro { padding: 32px var(--ns-gutter) 24px; max-width: 100%; margin: 0 auto; }\n  .ns-hero-intro h1 { font-size: 34px; margin-bottom: 12px; letter-spacing: -0.01em; } \n  .ns-hero-intro p { font-size: 19px; font-weight: 400; line-height: 1.6; color: var(--ns-charcoal-body); max-width: 100%; } \n  \n  \n\n  \/* ---------- Portfolio Specific ---------- *\/\n  .ns-portfolio-body { max-width: var(--ns-max-width); margin: 0 auto; padding: 56px var(--ns-gutter) 80px; }\n  .ns-portfolio-body > h1 { font-size: 40px; margin-bottom: 52px; margin-top: 100px; }\n  .ns-port-section { margin-bottom: 60px; }\n  .ns-port-section > h2 { font-size: 26px; margin-bottom: 24px; }\n  .ns-cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }\n  .ns-cs-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--ns-border); background: var(--ns-gray-bg); }\n  .ns-cs-card__media { background: var(--ns-white); width: 100%; height: 220px; padding: 20px 22px 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }\n  .ns-cs-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; border-radius: 6px; object-fit: contain; }\n  .ns-cs-card__body { padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }\n  .ns-cs-card__client { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-blue); }\n  .ns-cs-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ns-charcoal-heading); text-decoration: none !important; }\n  .ns-cs-card__title:hover { text-decoration: underline !important; text-underline-offset: 3px; color: var(--ns-charcoal-heading); }\n  .ns-cs-card__desc { font-size: 14px; color: var(--ns-charcoal-body); flex: 1; text-decoration: none !important; }\n  .ns-cs-card__desc:hover { text-decoration: underline !important; text-underline-offset: 3px; color: var(--ns-charcoal-body); }\n  .ns-cs-card__cta { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ns-charcoal-heading) !important; background: var(--ns-white); border: 1.5px solid var(--ns-charcoal-heading); border-radius: 8px; padding: 8px 16px; text-decoration: none !important; transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease; }\n  .ns-cs-card__cta:hover { background: var(--ns-charcoal-heading); color: var(--ns-white) !important; text-decoration: none !important; }\n  .ns-cs-card__cta svg { width: 13px; height: 13px; }\n  .ns-port-intro { font-size: 15px; margin-bottom: 20px; }\n  .ns-walkthrough-list { list-style: none; margin: 0; padding: 0; }\n  .ns-walkthrough-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ns-border); }\n  .ns-walkthrough-item:first-child { border-top: 1px solid var(--ns-border); }\n  .ns-walkthrough-thumb { flex-shrink: 0; width: 116px; height: 66px; border-radius: 4px; overflow: hidden; background: var(--ns-charcoal-heading); position: relative; text-decoration: none; }\n  .ns-walkthrough-thumb img { width: 100%; height: 100%; object-fit: cover; }\n  .ns-walkthrough-thumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.28); }\n  .ns-walkthrough-thumb__play svg { width: 26px; height: 26px; color: white; }\n  .ns-walkthrough-info { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }\n  .ns-walkthrough-info a { font-size: 15px; font-weight: 600; }\n  .ns-deliv-table-wrap { border: 0px solid var(--ns-border); border-radius: 8px; overflow: hidden; }\n  .ns-deliv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }\n  .ns-deliv-table tbody tr { border-bottom: 1px solid var(--ns-border); }\n  .ns-deliv-table tbody tr:last-child { border-bottom: none; }\n  .ns-deliv-table tbody tr:hover { background: var(--ns-gray-bg); }\n  .ns-deliv-table td { padding: 12px 8px; vertical-align: top; }\n  .ns-deliv-table td:first-child { font-weight: 500; }\n  .ns-deliv-table .ns-dl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ns-charcoal-heading) !important; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: 6px; padding: 6px 14px; text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }\n  .ns-deliv-table .ns-dl-btn:hover { background: var(--ns-blue) !important; border-color: var(--ns-blue) !important; color: var(--ns-white) !important; }\n  .ns-deliv-table .ns-dl-btn svg { width: 13px; height: 13px; }\n  .ns-deliv-table .ns-link-note { font-weight: 400; font-style: italic; color: var(--ns-charcoal-body); text-decoration: none; }\n\n  \/* ---------- Case Studies Specific ---------- *\/\n  .ns-cs { max-width: var(--ns-max-width); margin: 0 auto; padding: 0 var(--ns-gutter); }\n  .ns-cs-hero { padding: 56px var(--ns-gutter) 8px; }\n  .ns-cs-hero h1 { font-size: 36px; letter-spacing: -0.01em; margin-top: 100px; }\n  .ns-cs-hero p { font-size: 17px; margin-top: 14px; }\n  .ns-cs-figure { margin: 32px auto; }\n  .ns-cs-figure figcaption { font-size: 13.5px; color: #6B6B6B; margin-top: 10px; line-height: 1.5; margin-bottom: 60px; }\n  .ns-cs-section { padding: 48px 0; }\n  .ns-cs-section h2 { font-size: 26px; margin-bottom: 16px; margin-top: 24px; }\n  .ns-cs-section h3 { font-size: 17px; margin: 32px 0 8px; }\n  .ns-cs-section p + p, .ns-cs-section ul, .ns-cs-section ol { margin-top: 14px; margin-bottom: 14px; }\n  .ns-cs-section li { margin-bottom: 8px; margin-left: 20px;}\n  .ns-cs-section p { font-size: 15.5px; }\n  .ns-cs-section + .ns-cs-section { border-top: 1px solid var(--ns-border); }\n  .ns-cs-twocol-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 0px; }\n  .ns-cs-twocol-list h3 { font-size: 15px; letter-spacing: 0.04em; margin: 32px 0 10px; }\n  .ns-cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }\n  .ns-cs-threecol { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 32px 0; }\n  .ns-cs-fourcol { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; margin: 16px 0; }\n  .ns-cs-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }\n  .ns-cs-callout { border-left: 3px solid var(--ns-blue); background: var(--ns-gray-bg); border-radius: 4px; padding: 18px 20px; }\n  .ns-cs-callout strong { display: block; font-size: 14.5px; margin-bottom: 4px; }\n  .ns-cs-video { position: relative; margin: 28px 0; border-radius: 6px; overflow: hidden; background: #000; padding-bottom: 56.25%; height: 0; }\n  .ns-cs-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }\n  \n  \/* Shared Impact Grid across studies *\/\n  .ns-impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0 48px; }\n  .ns-impact-card { background: var(--ns-gray-bg); border: 1px solid var(--ns-border); border-left: 4px solid var(--ns-blue); border-radius: 0 8px 8px 0; padding: 20px 22px; display: flex; flex-direction: column; }\n  .ns-impact-card__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-blue); margin-bottom: 6px; }\n  .ns-impact-card__title { font-size: 16px; font-weight: 800; color: var(--ns-charcoal-heading); margin-bottom: 8px; line-height: 1.3; }\n  .ns-impact-card__desc { font-size: 14px; color: var(--ns-charcoal-body); line-height: 1.5; }\n\n  \/* Study Specific Report Grid *\/\n  .ns-cs-report-grid { display: grid; grid-template-columns: 2fr 2fr 1.2fr; gap: 35px 45px; margin: 32px 0; }\n  .ns-cs-report-hero { grid-column: 1 \/ -1; }\n  .ns-cs-report-grid .ns-cs-figure { margin-top: 0; }\n  .ns-cs-report-block { margin-bottom: 24px; }\n  .ns-cs-report-block h3 { margin-top: 0; margin-bottom: 12px; }\n\n  \/* Lightbox *\/\n  .lightbox-trigger { cursor: zoom-in; transition: opacity 0.2s ease; border: 0px solid var(--ns-border); }\n  .lightbox-trigger:hover { opacity: 0.9; }\n  .lightbox-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }\n  .lightbox-modal.active { display: flex; opacity: 1; }\n  .lightbox-content { max-width: 90%; max-height: 90vh; border-radius: 4px; transform: scale(0.95); transition: transform 0.3s ease; }\n  .lightbox-modal.active .lightbox-content { transform: scale(1); }\n  .lightbox-close { position: absolute; top: 25px; right: 40px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; }\n\n  \/* ---------- Footer ---------- *\/\n  .ns-footer { padding: 64px var(--ns-gutter) 80px; border-top: 1px solid var(--ns-border); margin-top: 24px; }\n  .ns-footer__inner { max-width: var(--ns-max-width); margin: 0 auto; }\n  .ns-footer h2 { font-size: 30px; margin-bottom: 18px; }\n  .ns-footer__line { font-size: 16px; margin-bottom: 0; line-height: 1.4; }\n  .ns-footer a { color: var(--ns-charcoal-heading); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; }\n\n\n  \/* ---------- Responsive Queries ---------- *\/\n  @media (max-width: 992px) {\n    .ns-hero { padding: 0 20px 24px; }\n    .ns-carousel-slide { flex-direction: column; padding: 1.5rem 1rem 4.5rem 1rem; }\n    .ns-carousel-image-wrapper { display: none !important; }\n    .ns-carousel-text-glass { position: relative; left: 0; width: 100%; max-width: 100%; margin-top: 0; padding: 1.5rem; box-shadow: none; background: var(--ns-gray-bg); border-radius: 12px; }\n    .ns-carousel-nav { left: 50%; transform: translateX(-50%); bottom: 1rem; }\n  }\n  @media (max-width: 960px) {\n    .ns-cs-report-grid { grid-template-columns: 1fr 1fr; column-gap: 30px; }\n    .ns-cs-report-col-right { grid-column: 1 \/ -1; max-width: 320px; justify-self: center; }\n  }\n  @media (max-width: 900px) {\n    .ns-impact__grid, .ns-capability__grid { grid-template-columns: 1fr; row-gap: 32px; }\n    .ns-section__heading { font-size: 28px; }\n    .ns-oval { aspect-ratio: 4 \/ 3; border-radius: 16px; }\n  }\n  @media (max-width: 860px) {\n    .ns-cs-cards { grid-template-columns: 1fr 1fr; }\n  }\n  @media (max-width: 720px) {\n    .ns-header__inner { padding: 14px 20px; flex-wrap: wrap; }\n    \n    \/* Keep the toggle above the drawer overlay *\/\n    .ns-mobile-toggle { display: block; position: relative; z-index: 9999; }\n    \/* Convert nav into a sliding drawer *\/\n    .ns-nav { display: flex;  position: fixed; top: 0; right: 0; width: 280px; height: 100vh; background-color: var(--ns-white); flex-direction: column;  align-items: flex-start;  justify-content: flex-start; padding: 80px 32px 32px; \/* Pad the top so links don't hide behind the X *\/ gap: 24px;  box-shadow: -4px 0 24px rgba(0,0,0,0.1); z-index: 9998; \/* Sit just below the toggle button *\/ transform: translateX(100%); transition: transform 0.3s ease-in-out; margin: 0; }\n    \/* Slide in when open *\/\n    .ns-page.is-nav-open .ns-nav {  transform: translateX(0); }\n    \n    .ns-page.is-nav-open .ns-nav__links { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }\n    .ns-section { padding: 48px 20px; }\n    .ns-impact { padding: 0 20px 48px; }\n    .ns-oval-wrap { padding: 0 20px 48px; }\n    .ns-capability__heading { font-size: 26px; margin-bottom: 28px !important; }\n    .ns-footer { padding: 48px 20px 64px; }\n    .ns-portfolio-body { padding: 36px 20px 64px; }\n    .ns-portfolio-body > h1 { font-size: 30px; }\n    .ns-port-section > h2 { font-size: 22px; }\n    .ns-cs-cards { grid-template-columns: 1fr; }\n    .ns-walkthrough-item { flex-direction: column; }\n    .ns-deliv-table td:last-child { text-align: right; }\n    .ns-cs { padding: 0 20px; }\n    .ns-cs-hero { padding: 36px 20px 8px; }\n    .ns-impact-grid { grid-template-columns: 1fr; gap: 16px; }\n    \n    .ns-hero-intro { padding: 40px 20px 16px; }\n    .ns-hero-intro h1 { font-size: 28px; }\n    .ns-hero-intro p { font-size: 17px; }\n\n \n  }\n  @media (max-width: 640px) { .ns-cs-report-grid { grid-template-columns: 1fr; } }\n  @media (max-width: 480px) {\n    .ns-carousel-text-glass h2 { font-size: 1.5rem; }\n    .ns-section__heading { font-size: 22px; }\n    .ns-logo__mark { width: 160px; height: auto; }\n  }\n<\/style>\n<div class=\"ns-page\">\n  <!-- ============== UNIVERSAL HEADER ============== -->\n  <header class=\"ns-header\">\n    <div class=\"ns-header__inner\">\n      <a class=\"ns-logo\" href=\"\/?page_id=763\" aria-label=\"Natural Structure home\">\n        <img decoding=\"async\" class=\"ns-logo__mark\" src=\"\/wp-content\/uploads\/2026\/06\/nslogoweb.jpg\" alt=\"Natural Structure dotted circular logo mark\" width=\"120\">\n      <\/a>\n      <nav class=\"ns-nav\" aria-label=\"Primary\">\n        <ul class=\"ns-nav__links\">\n          <li><a href=\"\/?page_id=763\">Home<\/a><\/li>\n          <li><a href=\"\/?page_id=777\">Portfolio<\/a><\/li>\n        <\/ul>\n        <a class=\"ns-cta-btn ns-js-contact-cta\" href=\"#contact\">Contact Me<\/a>\n      <\/nav>\n      <button class=\"ns-mobile-toggle\" type=\"button\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n  <\/header>\n  <section class=\"ns-hero-intro\">\n    <h1>Hello, I&#8217;m Grant.<\/h1>\n    <p>I\u2019m a Product, UX, and Interaction Design Leader who looks beyond the surface interface. I help organizations solve systems-level problems, streamlining complex workflows and bottlenecks to enable highly intuitive, engaging, and accessible enterprise and consumer experiences.<\/p>\n  <\/section>\n  \n<section class=\"ns-hero\" aria-roledescription=\"carousel\" aria-label=\"Featured case studies\">\n    <div id=\"ns-custom-carousel\" class=\"ns-carousel-container\">\n      <div id=\"ns-track\" class=\"ns-carousel-track\">\n        <div class=\"ns-carousel-slide\">\n          <div class=\"ns-carousel-image-wrapper\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/disney-ma-case-study-highlight-background-revised.png\" alt=\"Disney MoviesAnywhere QC screening room desktop application mockups with video review panel\"><\/div>\n          <div class=\"ns-carousel-text-glass\">\n            <h2>Disney\u2019s MoviesAnywhere.com QC Screening Room<\/h2>\n            <p>Pioneered an asynchronous design sprint workshop to bypass calendar gridlock, architecting a keyboard-driven interface that cut movie review times by 2,300% and saved 20,000+ person-hours.<\/p>\n            <a class=\"btn\" href=\"\/?page_id=793\" aria-label=\"View my case study detailing the QC Screening Room I created for Disney's MoviesAnywhere.com\">View Case Study<\/a>\n          <\/div>\n        <\/div>\n        <div class=\"ns-carousel-slide\">\n          <div class=\"ns-carousel-image-wrapper\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/smartstart-case-study-highlight-background.webp\" alt=\"EP SmartStart roster list and crew drilldown interface mockups on desktop browser windows\"><\/div>\n          <div class=\"ns-carousel-text-glass\">\n            <h2>Streamlining EP SmartStart for TV &amp; Film Productions<\/h2>\n            <p>How I re-designed core film production onboarding roster screens to gracefully handle dense data environments\u2014including translating Disney&#8217;s standard 15-tier studio approval hierarchies into a clean, predictable component architecture.<\/p>\n            <a class=\"btn\" href=\"\/?page_id=796\" aria-label=\"View my case study detailing how I re-designed core film production onboarding roster screens to gracefully handle dense data environments for EP's SmartStart application.\">View Case Study<\/a>\n          <\/div>\n        <\/div>\n        <div class=\"ns-carousel-slide\">\n          <div class=\"ns-carousel-image-wrapper\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/nevro-case-study-highlight-background.webp\" alt=\"Nevro HFXiQ mobile app program control screens shown on three phone mockups\"><\/div>\n          <div class=\"ns-carousel-text-glass\">\n            <h2>Pairing Rapid Prototyping with Wireframes and UI Design<\/h2>\n            <p>Led UX design and FDA accessibility compliance to design a patient-empowering mobile experience for Nevro&#8217;s medically-regulated stimulator.<\/p>\n            <a class=\"btn\" href=\"\/?page_id=790\" aria-label=\"View my case study detailing how I used rapid prototyping to quickly explore new interaction model ideas for Nevro.\">View Case Study<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"ns-carousel-nav\">\n        <button id=\"ns-prev\" class=\"ns-carousel-btn\" aria-label=\"Previous slide\">\u276e<\/button> \n        <button id=\"ns-next\" class=\"ns-carousel-btn\" aria-label=\"Next slide\">\u276f<\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-section ns-impact\">\n    <h2 class=\"ns-section__heading\" style=\"margin-bottom: 24px;\">Simplifying the design of complex systems and driving measurable business outcomes.<\/h2>\n    <div class=\"ns-impact__grid\">\n      <div class=\"ns-impact__item\">\n        <h3>Reduced Support Calls by 45%<\/h3>\n        <p>Pitched, designed, and deployed a progressive contextual help system for EP SmartPO and MyEP that walked users through complex tasks, driving down customer service load within two months of launch.<\/p>\n      <\/div>\n      <div class=\"ns-impact__item\">\n        <h3>Regulated Medical Innovation<\/h3>\n        <p>Co-led research and interaction design for Nevro\u2019s FDA-regulated HFXiQ\u2122 app via Karten Design, empowering chronic pain patients to safely control implanted spinal cord stimulators and track real-time therapeutic outcomes.<\/p>\n      <\/div>\n      <div class=\"ns-impact__item\">\n        <h3>2,300% Workflow Efficiency Boost<\/h3>\n        <p>Architected the backstage Quality Control screening tool for Disney\u2019s MoviesAnywhere.com, compressing a painstaking 4-hour manual movie review process into a seamless 10-minute workflow and clearing a 7,500-title catalog backlog.<\/p>\n      <\/div>\n      <div class=\"ns-impact__item\">\n        <h3>Optimized Commerce Channels<\/h3>\n        <p>Streamlined omni-channel conversion mechanics and user communication loops across diverse retail and media landscapes, eliminating structural interface bottlenecks and alignment friction.<\/p>\n      <\/div>\n      <div class=\"ns-impact__item\">\n        <h3>Increased Cart Conversions by 23%<\/h3>\n        <p>Redesigned mobile and desktop checkout experiences for HauteLook and Nordstrom Rack, resulting in an immediate 23% boost in purchase completion and a 35% reduction in customer shipping errors.<\/p>\n      <\/div>\n      <div class=\"ns-impact__item\">\n        <h3>Enterprise &amp; Omnichannel Scale<\/h3>\n        <p>Overhauled the end-to-end digital booking pipeline across 2,000+ physical locations for PublicStorage.com, translating high-friction moving logistics into smooth transactional interactions.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <div class=\"ns-oval-wrap\">\n    <div class=\"ns-oval\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/GrantSketchingDuringIdeationSession.png\" alt=\"Photo collage of whiteboard wireframe sketches and a designer writing on a whiteboard during a working session\"><\/div>\n  <\/div>\n\n  <section id=\"capabilities\" class=\"ns-section ns-capability\">\n    <h2 class=\"ns-capability__heading\">Why Choose Me?<\/h2>\n    <div class=\"ns-capability__grid\">\n      <div class=\"ns-capability__item\">\n        <h3>15+ Years of Design Leadership<\/h3>\n        <p>Specializing in systemic Information Architecture, complex user flows, and high-fidelity microinteractions. From zero-to-one concepts to legacy product modernization, I build and scale human-centered digital strategies.<\/p>\n      <\/div>\n      <div class=\"ns-capability__item\">\n        <h3>Omnichannel Ecosystem Strategy<\/h3>\n        <p>Expertise in designing seamlessly across desktop browsers, native mobile apps, TV interfaces, and next-gen physical hardware, safeguarding a continuous user journey at every digital touchpoint.<\/p>\n      <\/div>\n      <div class=\"ns-capability__item\">\n        <h3>Enterprise, B2B, and B2C Mastery<\/h3>\n        <p>Well-practiced in navigating complex enterprise environments with high-density data requirements as well as consumer markets where conversion, speed, and clean alignment are paramount.<\/p>\n      <\/div>\n      <div class=\"ns-capability__item\">\n        <h3>Cross-Vertical Adaptability<\/h3>\n        <p>Proven success injecting immediate strategic value into E-commerce, Entertainment, Fintech, SaaS Payroll\/HR, and Medically-Regulated ecosystems through a deeply immersive approach to product onboarding.<\/p>\n      <\/div>\n      <div class=\"ns-capability__item\">\n        <h3>Diverse Scale: Startups to Global Giants<\/h3>\n        <p>Trusted to guide product design across hyper-growth startups, market-disrupting in-house divisions (Disney, DirecTV, CrowdStrike), and elite global digital consultancies like Sapient and Schematic.<\/p>\n      <\/div>\n      <div class=\"ns-capability__item\">\n        <h3>Rare Engineering Fluency<\/h3>\n        <p>Having spent my early career as a full-stack web developer and database designer, I speak the exact language of engineering. This foundation builds immediate rapport with development leadership and slashes handoff drag.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <footer id=\"contact\" class=\"ns-footer\">\n    <div class=\"ns-footer__inner\">\n      <h2>Contact Me<\/h2>\n      <p class=\"ns-footer__line\">Grant Houston<\/p>\n      <p class=\"ns-footer__line\">310.426.8222<\/p>\n      <p class=\"ns-footer__line\"><a href=\"mailto:grant@naturalstructure.com\">grant@naturalstructure.com<\/a><\/p>\n      <p class=\"ns-footer__line\"><a href=\"https:\/\/www.linkedin.com\/in\/granthouston\" target=\"_blank\" rel=\"noopener\">https:\/\/www.linkedin.com\/in\/granthouston<\/a><\/p>\n    <\/div>\n  <\/footer>\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const track = document.getElementById('ns-track');\n    const carouselContainer = document.getElementById('ns-custom-carousel');\n    let slides = Array.from(track.children);\n    const nextButton = document.getElementById('ns-next');\n    const prevButton = document.getElementById('ns-prev');\n    \n    const firstClone = slides[0].cloneNode(true);\n    const lastClone = slides[slides.length - 1].cloneNode(true);\n    \n    track.appendChild(firstClone);\n    track.insertBefore(lastClone, slides[0]);\n    \n    slides = Array.from(track.children);\n    let currentIndex = 1; \n    let isTransitioning = false;\n    let autoPlayTimer;\n\n    track.style.transform = `translateX(-${currentIndex * 100}%)`;\n\n    const updateSlidePosition = (smooth = true) => {\n      if (smooth) track.style.transition = 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)';\n      else track.style.transition = 'none';\n      track.style.transform = `translateX(-${currentIndex * 100}%)`;\n    };\n\n    const moveToNextSlide = () => { if (isTransitioning) return; isTransitioning = true; currentIndex++; updateSlidePosition(); };\n    const moveToPrevSlide = () => { if (isTransitioning) return; isTransitioning = true; currentIndex--; updateSlidePosition(); };\n\n    nextButton.addEventListener('click', moveToNextSlide);\n    prevButton.addEventListener('click', moveToPrevSlide);\n\n    track.addEventListener('transitionend', () => {\n      isTransitioning = false;\n      if (slides[currentIndex] === firstClone) { currentIndex = 1; updateSlidePosition(false); }\n      if (slides[currentIndex] === lastClone) { currentIndex = slides.length - 2; updateSlidePosition(false); }\n    });\n\n    const startAutoPlay = () => { clearInterval(autoPlayTimer); autoPlayTimer = setInterval(moveToNextSlide, 5000); };\n    const stopAutoPlay = () => { clearInterval(autoPlayTimer); };\n\n    carouselContainer.addEventListener('mouseenter', stopAutoPlay);\n    carouselContainer.addEventListener('mouseleave', startAutoPlay);\n    carouselContainer.addEventListener('touchstart', stopAutoPlay, {passive: true});\n    carouselContainer.addEventListener('touchend', startAutoPlay, {passive: true});\n\n    startAutoPlay();\n  });\n<\/script> \n<script>\n(function () {\n  var root = document.querySelector('.ns-page');\n  var contactCta = root.querySelector('.ns-js-contact-cta');\n  if (contactCta) {\n    contactCta.addEventListener('click', function (e) {\n      var target = document.getElementById('contact');\n      if (target) {\n        e.preventDefault();\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  }\n  var mobileToggle = root.querySelector('.ns-mobile-toggle');\n  if (mobileToggle) {\n    mobileToggle.addEventListener('click', function () {\n      var isOpen = root.classList.toggle('is-nav-open');\n      mobileToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n    });\n    \n        \/\/ Close the drawer when any nav link is tapped\n        var navLinks = root.querySelectorAll('.ns-nav a');\n        navLinks.forEach(function(link) {\n          link.addEventListener('click', function() {\n            root.classList.remove('is-nav-open');\n            if (toggle) toggle.setAttribute('aria-expanded', 'false');\n          });\n        });\n    \n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Grant Houston &#8211; Natural Structure Home Portfolio Contact Me Hello, I&#8217;m Grant. I\u2019m a Product, UX, and Interaction Design Leader who looks beyond the surface interface. I help organizations solve systems-level problems, streamlining complex workflows and bottlenecks to enable highly intuitive, engaging, and accessible enterprise and consumer experiences. Disney\u2019s MoviesAnywhere.com QC Screening Room Pioneered an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-876","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=876"}],"version-history":[{"count":18,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/876\/revisions"}],"predecessor-version":[{"id":913,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/876\/revisions\/913"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}