{"id":763,"date":"2026-08-31T17:03:02","date_gmt":"2026-08-31T17:03:02","guid":{"rendered":"https:\/\/naturalstructure.com\/?page_id=763"},"modified":"2026-08-31T20:40:25","modified_gmt":"2026-08-31T20:40:25","slug":"index","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/","title":{"rendered":"index"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Grant Houston &#8211; Portfolio &#8211; Natural Structure<\/title>\r\n<style>\r\n \/* ---------- Design Tokens ---------- *\/<br \/>\r\n  .ns-page {<br \/>\r\n      --ns-white: #FFFFFF; --ns-gray-bg: #F7F7F7; --ns-gray-bg-2: #F0F0F0;<br \/>\r\n      --ns-charcoal-heading: #111111; --ns-charcoal-body: #333333;<br \/>\r\n      --ns-blue: #2B82C9; --ns-blue-hover: #246EA8; --ns-blue-light: #EBF4FB;<br \/>\r\n      --ns-black: #000000; --ns-border: #E5E5E5;<br \/>\r\n      --ns-font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;<br \/>\r\n      --ns-max-width: 1440px; --ns-gutter: 56px;<br \/>\r\n      font-family: var(--ns-font); color: var(--ns-charcoal-body); background: var(--ns-white);<br \/>\r\n      line-height: 1.6; -webkit-font-smoothing: antialiased;<br \/>\r\n  }<br \/>\r\n  .ns-page, .ns-page *, .ns-page *::before, .ns-page *::after { box-sizing: border-box; }<br \/>\r\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; }<br \/>\r\n  .ns-page p { margin: 0; color: var(--ns-charcoal-body); line-height: 1.6; }<br \/>\r\n  .ns-page img { max-width: 100%; height: auto; display: block; border-radius: 6px; }<br \/>\r\n  .ns-page a { color: var(--ns-charcoal-heading); text-decoration: none; text-underline-offset: 3px; }<br \/>\r\n  .ns-page a:hover { color: var(--ns-charcoal-heading); }<br \/>\r\n  .ns-page em { font-style: italic; color: #555; }<\/p>\r\n<p>  .ns-header { border-bottom: 1px solid var(--ns-border); }<br \/>\r\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; }<br \/>\r\n  .ns-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }<br \/>\r\n  .ns-logo__mark { width: 216px; height: 60px; flex-shrink: 0; }<br \/>\r\n  .ns-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: flex-end; }<br \/>\r\n  .ns-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }<br \/>\r\n  .ns-nav__links a { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }<br \/>\r\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; }<\/p>\r\n<p>  \/* Mobile Toggle Styling & Color Fixes *\/<br \/>\r\n  .ns-mobile-toggle {<br \/>\r\n    display: none;<br \/>\r\n    background-color: var(--ns-white) !important;<br \/>\r\n    border: none;<br \/>\r\n    cursor: pointer;<br \/>\r\n    padding: 10px;<br \/>\r\n    min-width: 44px;<br \/>\r\n    min-height: 44px;<br \/>\r\n    border-radius: 6px;<br \/>\r\n    -webkit-tap-highlight-color: transparent;<br \/>\r\n    outline: none;<br \/>\r\n  }<\/p>\r\n<p>  .ns-mobile-toggle:focus,<br \/>\r\n  .ns-mobile-toggle:active,<br \/>\r\n  .ns-page.is-nav-open .ns-mobile-toggle {<br \/>\r\n    background-color: var(--ns-white) !important;<br \/>\r\n    outline: none;<br \/>\r\n  }<\/p>\r\n<p>  .ns-mobile-toggle span {<br \/>\r\n    display: block;<br \/>\r\n    width: 24px;<br \/>\r\n    height: 2px;<br \/>\r\n    background: var(--ns-charcoal-heading);<br \/>\r\n    margin: 5px 0;<br \/>\r\n  }<\/p>\r\n<p>  \/* ---------- Hero ---------- *\/<br \/>\r\n  .ns-hero {<br \/>\r\n    padding: 0px var(--ns-gutter) 12px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__stage {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto;<br \/>\r\n    position: relative;<br \/>\r\n    min-height: 540px;<br \/>\r\n    border-radius: 12px;<br \/>\r\n    overflow: hidden;<br \/>\r\n    background: var(--ns-white);<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__track {<br \/>\r\n    display: flex;<br \/>\r\n    width: 100%;<br \/>\r\n    height: 100%;<br \/>\r\n    transition: transform 0.5s ease-in-out;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__slide {<br \/>\r\n    flex: 0 0 100%;<br \/>\r\n    width: 100%;<br \/>\r\n    position: relative;<br \/>\r\n    height: 100%;<br \/>\r\n    min-height: 540px;<br \/>\r\n    overflow: hidden;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__bg {<br \/>\r\n    position: absolute;<br \/>\r\n    inset: 0;<br \/>\r\n    z-index: 1;<br \/>\r\n    display: flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: flex-end;<br \/>\r\n    padding: 0 64px;<br \/>\r\n    pointer-events: none;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__bg img {<br \/>\r\n    max-height: 520px;<br \/>\r\n    width: auto;<br \/>\r\n    max-width: 108%;<br \/>\r\n    border-radius: 6px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__content {<br \/>\r\n    position: relative;<br \/>\r\n    z-index: 2;<br \/>\r\n    width: 100%;<br \/>\r\n    max-width: 100%;<br \/>\r\n    margin: 40px 0 40px 40px;<br \/>\r\n    background: var(--ns-gray-bg);<br \/>\r\n    border-radius: 8px;<br \/>\r\n    padding: 40px 36px;<br \/>\r\n    display: flex;<br \/>\r\n    flex-direction: column;<br \/>\r\n    gap: 18px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__eyebrow {<br \/>\r\n    font-size: 13px;<br \/>\r\n    font-weight: 700;<br \/>\r\n    text-transform: uppercase;<br \/>\r\n    letter-spacing: 0.06em;<br \/>\r\n    color: var(--ns-blue);<br \/>\r\n    margin-bottom: -6px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__content h1 {<br \/>\r\n    font-size: 28px;<br \/>\r\n    letter-spacing: -0.01em;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__content .ns-hero__stat {<br \/>\r\n    font-size: 15px;<br \/>\r\n    font-weight: 700;<br \/>\r\n    color: var(--ns-charcoal-heading);<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__content p {<br \/>\r\n    font-size: 15px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__cta {<br \/>\r\n    display: inline-flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: center;<br \/>\r\n    min-height: 44px;<br \/>\r\n    align-self: flex-start;<br \/>\r\n    background: var(--ns-black);<br \/>\r\n    color: var(--ns-white) !important;<br \/>\r\n    font-weight: 600;<br \/>\r\n    font-size: 14px;<br \/>\r\n    padding: 13px 24px;<br \/>\r\n    text-decoration: none;<br \/>\r\n    border-radius: 8px;<br \/>\r\n    margin-top: 8px;<br \/>\r\n    transition: background-color 0.15s ease;<br \/>\r\n  }<br \/>\r\n  .ns-hero__cta:hover {<br \/>\r\n    background: var(--ns-blue-hover);<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__controls {<br \/>\r\n    display: flex;<br \/>\r\n    gap: 14px;<br \/>\r\n    margin-top: -22px;<br \/>\r\n    margin-bottom: 48px;<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin-left: auto;<br \/>\r\n    margin-right: auto;<br \/>\r\n    padding: 0 var(--ns-gutter);<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__arrow {<br \/>\r\n    width: 48px;<br \/>\r\n    height: 48px;<br \/>\r\n    border-radius: 50%;<br \/>\r\n    background: #4A4A4A;<br \/>\r\n    border: none;<br \/>\r\n    color: var(--ns-white);<br \/>\r\n    display: inline-flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: center;<br \/>\r\n    cursor: pointer;<br \/>\r\n    flex-shrink: 0;<br \/>\r\n    transition: background-color 0.15s ease;<br \/>\r\n    padding: 8px;<br \/>\r\n    box-sizing: border-box;<br \/>\r\n  }<\/p>\r\n<p>  .ns-hero__arrow:hover {<br \/>\r\n    background: var(--ns-black);<br \/>\r\n  }<\/p>\r\n<p>  \/* ---------- Carousel Styling & Button Focus\/Active Color Overrides ---------- *\/<br \/>\r\n  .ns-carousel-container {<br \/>\r\n    position: relative;<br \/>\r\n    width: 100%;<br \/>\r\n    overflow: hidden;<br \/>\r\n    background-color: #ffffff;<br \/>\r\n    font-family: system-ui, -apple-system, sans-serif;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-track {<br \/>\r\n    display: flex;<br \/>\r\n    width: 100%;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-slide {<br \/>\r\n    min-width: 100%;<br \/>\r\n    display: flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: center;<br \/>\r\n    position: relative;<br \/>\r\n    padding: 0rem 2rem 6rem 2rem;<br \/>\r\n    box-sizing: border-box;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-image-wrapper {<br \/>\r\n    width: 100%;<br \/>\r\n    max-width: 1600px;<br \/>\r\n    margin-left: auto;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-image-wrapper img {<br \/>\r\n    width: 100%;<br \/>\r\n    height: auto;<br \/>\r\n    object-fit: contain;<br \/>\r\n    display: block;<br \/>\r\n    border-radius: 12px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-text-glass {<br \/>\r\n    background: rgba(255, 255, 255, 0.60);<\/p>\r\n<p>\t\/* Safari support *\/<br \/>\r\n\t-webkit-backdrop-filter: blur(12px); <\/p>\r\n<p>\t\/* Standard modern browser support *\/<br \/>\r\n\tbackdrop-filter: blur(12px); <\/p>\r\n<p>    border: 1px solid rgba(255, 255, 255, 0.2);<br \/>\r\n    border-radius: 24px;<br \/>\r\n    padding: 2.5rem;<br \/>\r\n    width: 90%;<br \/>\r\n    max-width: 500px;<br \/>\r\n    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.04);<br \/>\r\n    position: absolute;<br \/>\r\n    left: calc(8% - 15px);<br \/>\r\n    z-index: 10;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-text-glass h2 {<br \/>\r\n    margin-top: 0;<br \/>\r\n    margin-bottom: 1rem;<br \/>\r\n    font-size: 2rem;<br \/>\r\n    color: #111;<br \/>\r\n    line-height: 1.2;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-text-glass p {<br \/>\r\n    margin: 0 0 1.5rem 0;<br \/>\r\n    font-size: 1.1rem;<br \/>\r\n    color: #444;<br \/>\r\n    line-height: 1.5;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-text-glass a.btn {<br \/>\r\n    display: inline-flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: center;<br \/>\r\n    min-height: 44px;<br \/>\r\n    background: #111;<br \/>\r\n    color: #fff;<br \/>\r\n    padding: 0.8rem 1.5rem;<br \/>\r\n    border-radius: 8px;<br \/>\r\n    text-decoration: none;<br \/>\r\n    font-weight: 600;<br \/>\r\n    transition: background 0.2s;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-text-glass a.btn:hover {<br \/>\r\n    background: #333;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-nav {<br \/>\r\n    position: absolute;<br \/>\r\n    bottom: calc(2rem + 10px);<br \/>\r\n    left: 8%;<br \/>\r\n    display: flex;<br \/>\r\n    gap: 1rem;<br \/>\r\n    z-index: 20;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-btn {<br \/>\r\n    background-color: #111 !important;<br \/>\r\n    color: #fff !important;<br \/>\r\n    border: none;<br \/>\r\n    border-radius: 50%;<br \/>\r\n    width: 48px;<br \/>\r\n    height: 48px;<br \/>\r\n    cursor: pointer;<br \/>\r\n    display: flex;<br \/>\r\n    align-items: center;<br \/>\r\n    justify-content: center;<br \/>\r\n    font-size: 1.2rem;<br \/>\r\n    transition: transform 0.2s, background 0.2s;<br \/>\r\n    -webkit-tap-highlight-color: transparent;<br \/>\r\n    outline: none;<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-btn:hover {<br \/>\r\n    background-color: #333 !important;<br \/>\r\n    transform: scale(1.05);<br \/>\r\n  }<\/p>\r\n<p>  .ns-carousel-btn:focus,<br \/>\r\n  .ns-carousel-btn:focus-visible,<br \/>\r\n  .ns-carousel-btn:active {<br \/>\r\n    background-color: #111 !important;<br \/>\r\n    color: #fff !important;<br \/>\r\n    outline: none;<br \/>\r\n    transform: scale(1.0);<br \/>\r\n  }<\/p>\r\n<p>  \/* ---------- Section Heading & Grids ---------- *\/<br \/>\r\n  .ns-section {<br \/>\r\n    padding: 72px var(--ns-gutter);<br \/>\r\n  }<\/p>\r\n<p>  .ns-section__heading {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto 44px;<br \/>\r\n    font-size: 34px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-impact {<br \/>\r\n    padding: 0 var(--ns-gutter) 72px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-impact__grid {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto;<br \/>\r\n    display: grid;<br \/>\r\n    grid-template-columns: 1fr 1fr;<br \/>\r\n    column-gap: 64px;<br \/>\r\n    row-gap: 40px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-impact__item h3 {<br \/>\r\n    font-size: 19px;<br \/>\r\n    margin-bottom: 10px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-impact__item p {<br \/>\r\n    font-size: 15px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-oval-wrap {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto;<br \/>\r\n    padding: 0 var(--ns-gutter) 72px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-oval {<br \/>\r\n    width: 100%;<br \/>\r\n    aspect-ratio: 16 \/ 9;<br \/>\r\n    border-radius: 50% \/ 38%;<br \/>\r\n    overflow: hidden;<br \/>\r\n  }<\/p>\r\n<p>  .ns-oval img {<br \/>\r\n    width: 100%;<br \/>\r\n    height: 100%;<br \/>\r\n    object-fit: cover;<br \/>\r\n    border-radius: 0;<br \/>\r\n  }<\/p>\r\n<p>  .ns-capability__heading {<br \/>\r\n    text-align: left;<br \/>\r\n    font-size: 32px;<br \/>\r\n    margin-bottom: 32px !important;<br \/>\r\n  }<\/p>\r\n<p>  .ns-capability__grid {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto;<br \/>\r\n    display: grid;<br \/>\r\n    grid-template-columns: 1fr 1fr;<br \/>\r\n    column-gap: 64px;<br \/>\r\n    row-gap: 36px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-capability__item h3 {<br \/>\r\n    font-size: 18px;<br \/>\r\n    margin-bottom: 10px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-capability__item p {<br \/>\r\n    font-size: 15px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-footer {<br \/>\r\n    padding: 64px var(--ns-gutter) 80px;<br \/>\r\n    border-top: 1px solid var(--ns-border);<br \/>\r\n  }<\/p>\r\n<p>  .ns-footer__inner {<br \/>\r\n    max-width: var(--ns-max-width);<br \/>\r\n    margin: 0 auto;<br \/>\r\n  }<\/p>\r\n<p>  .ns-footer h2 {<br \/>\r\n    font-size: 30px;<br \/>\r\n    margin-bottom: 18px;<br \/>\r\n  }<\/p>\r\n<p>  .ns-footer__line {<br \/>\r\n    font-size: 16px;<br \/>\r\n    margin-bottom: 0;<br \/>\r\n    line-height: 1.4;<br \/>\r\n  }<\/p>\r\n<p>  .ns-footer a {<br \/>\r\n    text-decoration: underline;<br \/>\r\n    text-underline-offset: 3px;<br \/>\r\n    display: inline-flex;<br \/>\r\n    align-items: center;<br \/>\r\n  }<\/p>\r\n<p>  \/* ==========================================================================<br \/>\r\n     RESPONSIVE MEDIA QUERIES<br \/>\r\n     ========================================================================== *\/<\/p>\r\n<p>  @media (max-width: 992px) {<br \/>\r\n    .ns-hero {<br \/>\r\n      padding: 0 20px 24px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-carousel-slide {<br \/>\r\n      flex-direction: column;<br \/>\r\n      padding: 1.5rem 1rem 4.5rem 1rem;<br \/>\r\n    }<\/p>\r\n<p>    .ns-carousel-image-wrapper {<br \/>\r\n      display: none !important;<br \/>\r\n    }<\/p>\r\n<p>    .ns-carousel-text-glass {<br \/>\r\n      position: relative;<br \/>\r\n      left: 0;<br \/>\r\n      width: 100%;<br \/>\r\n      max-width: 100%;<br \/>\r\n      margin-top: 0;<br \/>\r\n      padding: 1.5rem;<br \/>\r\n      box-shadow: none;<br \/>\r\n      background: var(--ns-gray-bg);<br \/>\r\n      border-radius: 12px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-carousel-nav {<br \/>\r\n      left: 50%;<br \/>\r\n      transform: translateX(-50%);<br \/>\r\n      bottom: 1rem;<br \/>\r\n    }<br \/>\r\n  }<\/p>\r\n<p>  @media (max-width: 900px) {<br \/>\r\n    .ns-impact__grid,<br \/>\r\n    .ns-capability__grid {<br \/>\r\n      grid-template-columns: 1fr;<br \/>\r\n      row-gap: 32px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-section__heading {<br \/>\r\n      font-size: 28px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-oval {<br \/>\r\n      aspect-ratio: 4 \/ 3;<br \/>\r\n      border-radius: 16px;<br \/>\r\n    }<br \/>\r\n  }<\/p>\r\n<p>  @media (max-width: 720px) {<br \/>\r\n    .ns-header__inner {<br \/>\r\n      padding: 14px 20px;<br \/>\r\n      flex-wrap: wrap;<br \/>\r\n    }<\/p>\r\n<p>    .ns-nav {<br \/>\r\n      display: none;<br \/>\r\n      width: 100%;<br \/>\r\n      order: 3;<br \/>\r\n      flex-direction: column;<br \/>\r\n      align-items: flex-start;<br \/>\r\n      gap: 16px;<br \/>\r\n      padding-top: 16px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-mobile-toggle {<br \/>\r\n      display: block;<br \/>\r\n    }<\/p>\r\n<p>    .ns-page.is-nav-open .ns-nav {<br \/>\r\n      display: flex;<br \/>\r\n    }<\/p>\r\n<p>    .ns-page.is-nav-open .ns-nav__links {<br \/>\r\n      flex-direction: column;<br \/>\r\n      align-items: flex-start;<br \/>\r\n      gap: 12px;<br \/>\r\n      width: 100%;<br \/>\r\n    }<\/p>\r\n<p>    .ns-section {<br \/>\r\n      padding: 48px 20px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-impact {<br \/>\r\n      padding: 0 20px 48px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-oval-wrap {<br \/>\r\n      padding: 0 20px 48px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-capability__heading {<br \/>\r\n      font-size: 26px;<br \/>\r\n      margin-bottom: 28px !important;<br \/>\r\n    }<\/p>\r\n<p>    .ns-footer {<br \/>\r\n      padding: 48px 20px 64px;<br \/>\r\n    }<br \/>\r\n  }<\/p>\r\n<p>  @media (max-width: 480px) {<br \/>\r\n    .ns-carousel-text-glass h2 {<br \/>\r\n      font-size: 1.5rem;<br \/>\r\n    }<\/p>\r\n<p>    .ns-section__heading {<br \/>\r\n      font-size: 22px;<br \/>\r\n    }<\/p>\r\n<p>    .ns-logo__mark {<br \/>\r\n      width: 160px;<br \/>\r\n      height: auto;<br \/>\r\n    }<br \/>\r\n  }<br \/>\r\n<\/style><\/p>\n\n\n\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 ---------- *\/\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  \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 Toggle Styling & Color Fixes *\/\n  .ns-mobile-toggle {\n    display: none;\n    background-color: var(--ns-white) !important;\n    border: none;\n    cursor: pointer;\n    padding: 10px;\n    min-width: 44px;\n    min-height: 44px;\n    border-radius: 6px;\n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n  }\n\n  .ns-mobile-toggle:focus,\n  .ns-mobile-toggle:active,\n  .ns-page.is-nav-open .ns-mobile-toggle {\n    background-color: var(--ns-white) !important;\n    outline: none;\n  }\n\n  .ns-mobile-toggle span {\n    display: block;\n    width: 24px;\n    height: 2px;\n    background: var(--ns-charcoal-heading);\n    margin: 5px 0;\n  }\n\n  \/* ---------- Hero ---------- *\/\n  .ns-hero {\n    padding: 0px var(--ns-gutter) 12px; \n  }\n\n  .ns-hero__stage {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    position: relative;\n    min-height: 540px;         \n    border-radius: 12px;\n    overflow: hidden;          \n    background: var(--ns-white);\n  }\n\n  .ns-hero__track {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    transition: transform 0.5s ease-in-out;\n  }\n\n  .ns-hero__slide {\n    flex: 0 0 100%;\n    width: 100%;\n    position: relative;\n    height: 100%;\n    min-height: 540px;         \n    overflow: hidden;          \n  }\n\n  .ns-hero__bg {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; \n    padding: 0 64px;           \n    pointer-events: none;\n  }\n\n  .ns-hero__bg img {\n    max-height: 520px;         \n    width: auto;               \n    max-width: 108%;           \n    border-radius: 6px;\n  }\n\n  .ns-hero__content {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    max-width: 100%;\n    margin: 40px 0 40px 40px;\n    background: var(--ns-gray-bg);\n    border-radius: 8px;\n    padding: 40px 36px;\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n  }\n\n  .ns-hero__eyebrow {\n    font-size: 13px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--ns-blue);\n    margin-bottom: -6px;\n  }\n\n  .ns-hero__content h1 {\n    font-size: 28px;\n    letter-spacing: -0.01em;\n  }\n\n  .ns-hero__content .ns-hero__stat {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--ns-charcoal-heading);\n  }\n\n  .ns-hero__content p {\n    font-size: 15px;\n  }\n\n  .ns-hero__cta {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 44px;\n    align-self: flex-start;\n    background: var(--ns-black);\n    color: var(--ns-white) !important;\n    font-weight: 600;\n    font-size: 14px;\n    padding: 13px 24px;\n    text-decoration: none;\n    border-radius: 8px;\n    margin-top: 8px;\n    transition: background-color 0.15s ease;\n  }\n  .ns-hero__cta:hover {\n    background: var(--ns-blue-hover);\n  }\n\n  .ns-hero__controls {\n    display: flex;\n    gap: 14px;\n    margin-top: -22px;         \n    margin-bottom: 48px;       \n    max-width: var(--ns-max-width);\n    margin-left: auto;\n    margin-right: auto;\n    padding: 0 var(--ns-gutter);\n  }\n\n  .ns-hero__arrow {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: #4A4A4A;\n    border: none;\n    color: var(--ns-white);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: background-color 0.15s ease;\n    padding: 8px;\n    box-sizing: border-box;\n  }\n\n  .ns-hero__arrow:hover {\n    background: var(--ns-black);\n  }\n\n  \/* ---------- Carousel Styling & Button Focus\/Active Color Overrides ---------- *\/\n  .ns-carousel-container {\n    position: relative;\n    width: 100%; \n    overflow: hidden;\n    background-color: #ffffff;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  .ns-carousel-track {\n    display: flex;\n    width: 100%;\n  }\n\n  .ns-carousel-slide {\n    min-width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    padding: 0rem 2rem 6rem 2rem;\n    box-sizing: border-box;\n  }\n\n  .ns-carousel-image-wrapper {\n    width: 100%; \n    max-width: 1600px; \n    margin-left: auto;\n  }\n\n  .ns-carousel-image-wrapper img {\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n    display: block;\n    border-radius: 12px; \n  }\n\n  .ns-carousel-text-glass {\n    background: rgba(255, 255, 255, 0.60);\n  \n\t\/* Safari support *\/\n\t-webkit-backdrop-filter: blur(12px); \n\t\n\t\/* Standard modern browser support *\/\n\tbackdrop-filter: blur(12px); \n\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 24px;\n    padding: 2.5rem;\n    width: 90%;\n    max-width: 500px;\n    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.04);\n    position: absolute;\n    left: calc(8% - 15px);\n    z-index: 10;\n  }\n\n  .ns-carousel-text-glass h2 {\n    margin-top: 0;\n    margin-bottom: 1rem;\n    font-size: 2rem;\n    color: #111;\n    line-height: 1.2;\n  }\n\n  .ns-carousel-text-glass p {\n    margin: 0 0 1.5rem 0;\n    font-size: 1.1rem;\n    color: #444;\n    line-height: 1.5;\n  }\n\n  .ns-carousel-text-glass a.btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 44px;\n    background: #111;\n    color: #fff;\n    padding: 0.8rem 1.5rem;\n    border-radius: 8px;\n    text-decoration: none;\n    font-weight: 600;\n    transition: background 0.2s;\n  }\n\n  .ns-carousel-text-glass a.btn:hover {\n    background: #333;\n  }\n\n  .ns-carousel-nav {\n    position: absolute;\n    bottom: calc(2rem + 10px); \n    left: 8%; \n    display: flex;\n    gap: 1rem;\n    z-index: 20;\n  }\n\n  .ns-carousel-btn {\n    background-color: #111 !important;\n    color: #fff !important;\n    border: none;\n    border-radius: 50%;\n    width: 48px;\n    height: 48px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    transition: transform 0.2s, background 0.2s;\n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n  }\n\n  .ns-carousel-btn:hover {\n    background-color: #333 !important;\n    transform: scale(1.05);\n  }\n\n  .ns-carousel-btn:focus,\n  .ns-carousel-btn:focus-visible,\n  .ns-carousel-btn:active {\n    background-color: #111 !important;\n    color: #fff !important;\n    outline: none;\n    transform: scale(1.0);\n  }\n\n  \/* ---------- Section Heading & Grids ---------- *\/\n  .ns-section {\n    padding: 72px var(--ns-gutter);\n  }\n\n  .ns-section__heading {\n    max-width: var(--ns-max-width);\n    margin: 0 auto 44px;\n    font-size: 34px;\n  }\n\n  .ns-impact {\n    padding: 0 var(--ns-gutter) 72px;\n  }\n\n  .ns-impact__grid {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    column-gap: 64px;\n    row-gap: 40px;\n  }\n\n  .ns-impact__item h3 {\n    font-size: 19px;\n    margin-bottom: 10px;\n  }\n\n  .ns-impact__item p {\n    font-size: 15px;\n  }\n\n  .ns-oval-wrap {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    padding: 0 var(--ns-gutter) 72px;\n  }\n\n  .ns-oval {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    border-radius: 50% \/ 38%;\n    overflow: hidden;\n  }\n\n  .ns-oval img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 0; \n  }\n\n  .ns-capability__heading {\n    text-align: left; \n    font-size: 32px;\n    margin-bottom: 32px !important;\n  }\n\n  .ns-capability__grid {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    column-gap: 64px;\n    row-gap: 36px;\n  }\n\n  .ns-capability__item h3 {\n    font-size: 18px;\n    margin-bottom: 10px;\n  }\n\n  .ns-capability__item p {\n    font-size: 15px;\n  }\n\n  .ns-footer {\n    padding: 64px var(--ns-gutter) 80px;\n    border-top: 1px solid var(--ns-border);\n  }\n\n  .ns-footer__inner {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n  }\n\n  .ns-footer h2 {\n    font-size: 30px;\n    margin-bottom: 18px;\n  }\n\n  .ns-footer__line {\n    font-size: 16px;\n    margin-bottom: 0;\n    line-height: 1.4;\n  }\n\n  .ns-footer a {\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  \/* ==========================================================================\n     RESPONSIVE MEDIA QUERIES\n     ========================================================================== *\/\n\n  @media (max-width: 992px) {\n    .ns-hero {\n      padding: 0 20px 24px;\n    }\n\n    .ns-carousel-slide {\n      flex-direction: column;\n      padding: 1.5rem 1rem 4.5rem 1rem;\n    }\n\n    .ns-carousel-image-wrapper {\n      display: none !important;\n    }\n\n    .ns-carousel-text-glass {\n      position: relative;\n      left: 0;\n      width: 100%;\n      max-width: 100%;\n      margin-top: 0;\n      padding: 1.5rem;\n      box-shadow: none;\n      background: var(--ns-gray-bg);\n      border-radius: 12px;\n    }\n\n    .ns-carousel-nav {\n      left: 50%;\n      transform: translateX(-50%);\n      bottom: 1rem;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .ns-impact__grid,\n    .ns-capability__grid {\n      grid-template-columns: 1fr;\n      row-gap: 32px;\n    }\n\n    .ns-section__heading {\n      font-size: 28px;\n    }\n\n    .ns-oval {\n      aspect-ratio: 4 \/ 3;\n      border-radius: 16px;\n    }\n  }\n\n  @media (max-width: 720px) {\n    .ns-header__inner {\n      padding: 14px 20px;\n      flex-wrap: wrap;\n    }\n\n    .ns-nav {\n      display: none;\n      width: 100%;\n      order: 3;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n      padding-top: 16px;\n    }\n\n    .ns-mobile-toggle {\n      display: block;\n    }\n\n    .ns-page.is-nav-open .ns-nav {\n      display: flex;\n    }\n\n    .ns-page.is-nav-open .ns-nav__links {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 12px;\n      width: 100%;\n    }\n\n    .ns-section {\n      padding: 48px 20px;\n    }\n\n    .ns-impact {\n      padding: 0 20px 48px;\n    }\n\n    .ns-oval-wrap {\n      padding: 0 20px 48px;\n    }\n\n    .ns-capability__heading {\n      font-size: 26px;\n      margin-bottom: 28px !important;\n    }\n\n    .ns-footer {\n      padding: 48px 20px 64px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .ns-carousel-text-glass h2 {\n      font-size: 1.5rem;\n    }\n\n    .ns-section__heading {\n      font-size: 22px;\n    }\n\n    .ns-logo__mark {\n      width: 160px;\n      height: auto;\n    }\n  }\n<\/style><p><\/p>\n<div class=\"ns-page\"><header class=\"ns-header\">\n<div class=\"ns-header__inner\"><a class=\"ns-logo\" href=\"\/?page_id=763\" aria-label=\"Natural Structure home\"> <img decoding=\"async\" class=\"ns-logo__mark\" src=\"\/wp-content\/uploads\/2026\/06\/nslogoweb.jpg\" alt=\"Natural Structure dotted circular logo mark\" width=\"120\"> <\/a><nav class=\"ns-nav\" aria-label=\"Primary\">\n<ul class=\"ns-nav__links\">\n<li><a href=\"\/?page_id=763\" aria-current=\"page\">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><\/nav><button class=\"ns-mobile-toggle\" type=\"button\" aria-label=\"Toggle menu\" aria-expanded=\"false\"> <\/button><\/div>\n<\/header>\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><\/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><\/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><\/div>\n<\/div>\n<\/div>\n<div class=\"ns-carousel-nav\"><button id=\"ns-prev\" class=\"ns-carousel-btn\" aria-label=\"Previous slide\">\u276e<\/button> <button id=\"ns-next\" class=\"ns-carousel-btn\" aria-label=\"Next slide\">\u276f<\/button><\/div>\n<\/div>\n<\/section>\n<section class=\"ns-section ns-impact\">\n<h2 class=\"ns-section__heading\" style=\"margin-bottom: 12px;\">Designing complex systems and driving measurable business outcomes.<\/h2>\n<p class=\"ns-impact__intro\" style=\"font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--ns-charcoal-body); margin-bottom: 48px; max-width: 850px; letter-spacing: -0.01em;\">Product, UX &amp; Interaction Design Leader | Accessible Enterprise &amp; Consumer Platforms | Systems Thinking<\/p>\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 flows 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<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<section id=\"capabilities\" class=\"ns-section ns-capability\">\n<h2 class=\"ns-capability__heading\">The Strategic Edge: Core Capabilities<\/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<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><\/div>\n<p><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    \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) {\n        track.style.transition = 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)';\n      } else {\n        track.style.transition = 'none';\n      }\n      track.style.transform = `translateX(-${currentIndex * 100}%)`;\n    };\n\n    const moveToNextSlide = () => {\n      if (isTransitioning) return;\n      isTransitioning = true;\n      currentIndex++;\n      updateSlidePosition();\n    };\n\n    const moveToPrevSlide = () => {\n      if (isTransitioning) return;\n      isTransitioning = true;\n      currentIndex--;\n      updateSlidePosition();\n    };\n\n    nextButton.addEventListener('click', moveToNextSlide);\n    prevButton.addEventListener('click', moveToPrevSlide);\n\n    track.addEventListener('transitionend', () => {\n      isTransitioning = false;\n      \n      if (slides[currentIndex] === firstClone) {\n        currentIndex = 1;\n        updateSlidePosition(false);\n      }\n      \n      if (slides[currentIndex] === lastClone) {\n        currentIndex = slides.length - 2;\n        updateSlidePosition(false);\n      }\n    });\n\n    const startAutoPlay = () => {\n      clearInterval(autoPlayTimer);\n      autoPlayTimer = setInterval(moveToNextSlide, 5000);\n    };\n\n    const stopAutoPlay = () => {\n      clearInterval(autoPlayTimer);\n    };\n\n    carouselContainer.addEventListener('mouseenter', stopAutoPlay);\n    carouselContainer.addEventListener('mouseleave', startAutoPlay);\n    \n    carouselContainer.addEventListener('touchstart', stopAutoPlay, {passive: true});\n    carouselContainer.addEventListener('touchend', startAutoPlay, {passive: true});\n\n    startAutoPlay();\n  });\n<\/script> <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\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})();\n<\/script><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><script><br \/>\n  document.addEventListener('DOMContentLoaded', () => {<br \/>\n    const track = document.getElementById('ns-track');<br \/>\n    const carouselContainer = document.getElementById('ns-custom-carousel');<br \/>\n    let slides = Array.from(track.children);<br \/>\n    const nextButton = document.getElementById('ns-next');<br \/>\n    const prevButton = document.getElementById('ns-prev');<\/p>\n<p>    const firstClone = slides[0].cloneNode(true);<br \/>\n    const lastClone = slides[slides.length - 1].cloneNode(true);<\/p>\n<p>    track.appendChild(firstClone);<br \/>\n    track.insertBefore(lastClone, slides[0]);<\/p>\n<p>    slides = Array.from(track.children);<\/p>\n<p>    let currentIndex = 1;<br \/>\n    let isTransitioning = false;<br \/>\n    let autoPlayTimer;<\/p>\n<p>    track.style.transform = `translateX(-${currentIndex * 100}%)`;<\/p>\n<p>    const updateSlidePosition = (smooth = true) => {<br \/>\n      if (smooth) {<br \/>\n        track.style.transition = 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)';<br \/>\n      } else {<br \/>\n        track.style.transition = 'none';<br \/>\n      }<br \/>\n      track.style.transform = `translateX(-${currentIndex * 100}%)`;<br \/>\n    };<\/p>\n<p>    const moveToNextSlide = () => {<br \/>\n      if (isTransitioning) return;<br \/>\n      isTransitioning = true;<br \/>\n      currentIndex++;<br \/>\n      updateSlidePosition();<br \/>\n    };<\/p>\n<p>    const moveToPrevSlide = () => {<br \/>\n      if (isTransitioning) return;<br \/>\n      isTransitioning = true;<br \/>\n      currentIndex--;<br \/>\n      updateSlidePosition();<br \/>\n    };<\/p>\n<p>    nextButton.addEventListener('click', moveToNextSlide);<br \/>\n    prevButton.addEventListener('click', moveToPrevSlide);<\/p>\n<p>    track.addEventListener('transitionend', () => {<br \/>\n      isTransitioning = false;<\/p>\n<p>      if (slides[currentIndex] === firstClone) {<br \/>\n        currentIndex = 1;<br \/>\n        updateSlidePosition(false);<br \/>\n      }<\/p>\n<p>      if (slides[currentIndex] === lastClone) {<br \/>\n        currentIndex = slides.length - 2;<br \/>\n        updateSlidePosition(false);<br \/>\n      }<br \/>\n    });<\/p>\n<p>    const startAutoPlay = () => {<br \/>\n      clearInterval(autoPlayTimer);<br \/>\n      autoPlayTimer = setInterval(moveToNextSlide, 5000);<br \/>\n    };<\/p>\n<p>    const stopAutoPlay = () => {<br \/>\n      clearInterval(autoPlayTimer);<br \/>\n    };<\/p>\n<p>    carouselContainer.addEventListener('mouseenter', stopAutoPlay);<br \/>\n    carouselContainer.addEventListener('mouseleave', startAutoPlay);<\/p>\n<p>    carouselContainer.addEventListener('touchstart', stopAutoPlay, {passive: true});<br \/>\n    carouselContainer.addEventListener('touchend', startAutoPlay, {passive: true});<\/p>\n<p>    startAutoPlay();<br \/>\n  });<br \/>\n<\/script><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><script><br \/>\n(function () {<br \/>\n  var root = document.querySelector('.ns-page');<br \/>\n  var contactCta = root.querySelector('.ns-js-contact-cta');<br \/>\n  if (contactCta) {<br \/>\n    contactCta.addEventListener('click', function (e) {<br \/>\n      var target = document.getElementById('contact');<br \/>\n      if (target) {<br \/>\n        e.preventDefault();<br \/>\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });<br \/>\n      }<br \/>\n    });<br \/>\n  }<\/p>\n<p>  var mobileToggle = root.querySelector('.ns-mobile-toggle');<br \/>\n  if (mobileToggle) {<br \/>\n    mobileToggle.addEventListener('click', function () {<br \/>\n      var isOpen = root.classList.toggle('is-nav-open');<br \/>\n      mobileToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');<br \/>\n    });<br \/>\n  }<br \/>\n})();<br \/>\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grant Houston &#8211; Portfolio &#8211; Natural Structure Grant Houston &#8211; Natural Structure Home Portfolio Contact Me Disney\u2019s MoviesAnywhere.com QC Screening Room 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. View Case Study Streamlining EP SmartStart for TV &amp; [&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-763","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/763","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=763"}],"version-history":[{"count":17,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/763\/revisions"}],"predecessor-version":[{"id":823,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/763\/revisions\/823"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}