:root {
  --background:#202633;
  --surface:#283044;
  --button:#343c4e;
  --text:#d7d7dd;
  --white:#fafafd;
  --amber:#ffa900;
  --amber-dark:#c38700;
  --blue:#7aa2b8;
  --border:#414959;
  --radius:1.25rem;
  --space:clamp(1.25rem,2vw,2rem);
  --sans:Arial,Helvetica,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --content:1576px;
  color-scheme:dark;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
}
body::before,body::after {
  content:"";
  position:fixed;
  z-index:-1;
  width:380px;
  height:360px;
  border-radius:80px;
  background:var(--amber-dark);
  pointer-events:none;
  transform:rotate(-17deg);
}
body::before {
  top:-85px;
  left:-100px;
}
body::after {
  right:-90px;
  bottom:-220px;
  transform:rotate(11deg);
  width:560px;
  height:370px;
}
a {
  color:inherit;
  text-underline-offset:.22em;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
}
.skip-link {
  position:fixed;
  left:1rem;
  top:-5rem;
  z-index:20;
  padding:.7rem 1rem;
  background:var(--amber);
  color:var(--background);
}
.skip-link:focus {
  top:1rem;
}
.site-header {
  max-width:980px;
  margin:auto;
  padding:3rem 1.5rem 2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--white);
}
.brand-logo {
  display:block;
  width:250px;
  height:auto;
}
.navigation {
  display:flex;
  order:3;
  width:100%;
  justify-content:center;
  gap:1.8rem;
  font-size:1rem;
}
.navigation a {
  text-decoration:none;
}
.navigation a:hover,.navigation a[aria-current] {
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-decoration-thickness:2px;
}
.menu-toggle {
  display:none;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-height:56px;
  padding:.85rem 2rem;
  text-decoration:none;
  font-size:1.25rem;
  border:1px solid #59606d;
  border-radius:2rem;
  background:var(--button);
  color:var(--white);
  transition:background .15s,border-color .15s;
}
.button:hover {
  background:#414b60;
  border-color:var(--amber);
}
.button.accent {
  border:3px solid var(--amber-dark);
  animation: accent-pulse 2.6s ease-in-out infinite;
}
@keyframes accent-pulse {
  0%, 100% {
    box-shadow:0 0 0 0 rgb(255 169 0 / 0%);
  }
  50% {
    box-shadow:0 0 0 11px rgb(255 169 0 / 24%);
  }
}
.button.accent:hover,
.button.accent:focus-visible {
  animation-play-state:paused;
}
.header-cta {
  min-width:255px;
  font-size:1.1rem;
}
.container {
  width:min(calc(100% - 3rem),var(--content));
  margin-inline:auto;
}
.section {
  padding-block:1.5rem 2.5rem;
}
.section-heading {
  text-align:center;
  font-size:clamp(1.75rem,2.3vw,2.4rem);
  line-height:1.2;
  margin:0 0 2.4rem;
  font-weight:700;
  letter-spacing:.015em;
}
.section-heading::after {
  content:"";
  display:block;
  width:96px;
  height:5px;
  border-radius:5px;
  background:var(--amber);
  margin:1.4rem auto 0;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.3rem;
}
.card {
  min-width:0;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem 1.7rem;
}
.card h2 {
  font-size:clamp(1.25rem,1.65vw,1.75rem);
  text-align:center;
  line-height:1.35;
  margin:0 0 1.5rem;
}
.prose {
  font-family:var(--sans);
  font-size:clamp(1rem,1.2vw,1.3rem);
  line-height:1.3;
}
.prose p {
  margin:0 0 1.55rem;
}
.prose p:last-child {
  margin-bottom:0;
}
.tags {
  list-style:none;
  padding:0;
  margin:1.6rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.tags li {
  border-radius:2rem;
  padding:.35rem .8rem;
  background:#08604e;
  color:#c5f0df;
  font-size:clamp(.875rem,1vw,1rem);
  line-height:1.4;
}
.tags li:nth-child(2n) {
  background:#506b80;
  color:#e0edf7;
}
.tags li:nth-child(3n) {
  background:#855d63;
  color:#ffebed;
}
.feature-card {
  padding:0;
  overflow:hidden;
  border:2px solid var(--blue);
}
.feature-card h3 {
  display:flex;
  align-items:center;
  min-height:150px;
  margin:0;
  background:var(--blue);
  color:var(--surface);
  padding:1.6rem 1.8rem;
  font-weight:400;
  font-size:clamp(1.2rem,1.5vw,1.6rem);
  line-height:1.35;
}
.feature-card .prose {
  padding:1.3rem 1.5rem 1.7rem;
}
.methodology {
  width:min(calc(100% - 3rem),930px);
  margin:auto;
  text-align:center;
}
.method-grid {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
}
.method-grid li {
  min-height:240px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--surface);
  border:2px solid var(--blue);
  border-radius:var(--radius);
  padding:1.5rem;
  font-size:clamp(1.1rem,2vw,1.75rem);
  line-height:1.4;
}
.service-area {
  text-align:center;
  padding:3rem 1rem 4rem;
}
.service-area h2 {
  font-size:1.8rem;
  margin:0 0 .8rem;
}
.service-area p {
  font-size:1.125rem;
  margin:0 0 1.7rem;
}
.site-footer {
  min-height:10rem;
  text-align:center;
  padding:2rem 1.5rem 1.5rem;
  background:linear-gradient(var(--background),#d28e09 40%,var(--amber));
  color:#202633;
}
.site-footer>p {
  font-size:1.5rem;
  font-weight:700;
  margin:1.5rem 0;
  color:#fff;
}
.site-footer nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.7rem 1.5rem;
  margin-bottom:1.3rem;
}
.site-footer small {
  font-size:.875rem;
}
.mobile-intro {
  display:none;
}
.js main section.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.js main section.reveal.is-visible {
  opacity:1;
  transform:none;
}
@media(min-width:801px) {
  .card,
  .feature-card,
  .method-grid li {
    border-width:4px;
  }
  .tags li,
  .tags li:nth-child(2n),
  .tags li:nth-child(3n) {
    background:#506b80;
    color:var(--white);
  }
  .card,
  .feature-card,
  .method-grid li {
    transition:border-color .15s ease, border-width .15s ease;
  }
  .card:hover,
  .feature-card:hover,
  .method-grid li:hover {
    border-color:var(--amber);
    border-width:4px;
  }
}
@media(prefers-reduced-motion: reduce) {
  .button.accent {
    animation:none;
  }
  .js main section.reveal,
  .js main section.reveal.is-visible {
    opacity:1;
    transform:none;
    transition:none;
  }
}
@media(min-width:1800px) {
  .site-header {
    padding-bottom:3rem;
  }
  .method-grid li {
    min-height:300px;
  }
}
@media(max-width:1100px) {
  .cards {
    gap:1.25rem;
  }
  .card {
    padding:1.2rem;
  }
  .feature-card {
    padding:0;
  }
  .feature-card h3 {
    padding:1.25rem;
    min-height:155px;
  }
  .feature-card .prose {
    padding:1.25rem;
  }
  .prose {
    font-size:1rem;
  }
}
@media(max-width:800px) {
  body {
    background:var(--background);
  }
  body::before,body::after {
    display:none;
  }
  .site-header {
    padding:2rem 1.5rem;
    gap:1rem;
  }
  .brand-logo {
    width:210px;
  }
  .header-cta {
    display:none;
  }
  .navigation {
    font-size:1rem;
    gap:.8rem 1.2rem;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .js .menu-toggle {
    display:block;
    order:-1;
    background:none;
    border:0;
    color:var(--white);
    font-size:1.6rem;
    padding:.4rem .6rem;
    min-width:44px;
    min-height:44px;
    cursor:pointer;
  }
  .js .site-header {
    justify-content:flex-start;
  }
  .js .brand {
    margin-inline:auto;
  }
  .js .navigation {
    display:none;
  }
  .navigation a {
    padding:.5rem;
  }
  .mobile-intro {
    display:block;
    text-align:center;
    padding:2.5rem 1.5rem 0;
  }
  .intro-title {
    color:var(--amber);
    font-size:clamp(1.6rem,4.4vw,2.4rem);
    font-weight:600;
    line-height:1.4;
    margin:0 0 1.6rem;
  }
  .mobile-intro>p:not(.intro-title) {
    font-size:1.05rem;
    letter-spacing:.04em;
    margin-bottom:1.25rem;
  }
  .mobile-intro>.button {
    margin:2.5rem auto;
    display:flex;
    max-width:520px;
    font-size:1.4rem;
  }
  .intro-sun {
    margin-inline:-1.5rem;
    padding:7rem 1rem 1.5rem;
    background:linear-gradient(var(--background),var(--amber));
    font-weight:bold;
    color:white;
    font-size:1.25rem;
    margin-bottom:3rem;
  }
  .container {
    width:calc(100% - 2.5rem);
  }
  .cards {
    grid-template-columns:1fr;
    gap:1.3rem;
  }
  .card {
    padding:1.4rem 1.25rem;
  }
  .card h2 {
    font-size:1.6rem;
    margin-bottom:1.6rem;
  }
  .prose {
    font-size:1rem;
    line-height:1.45;
  }
  .tags {
    margin-top:1.3rem;
  }
  .tags li {
    font-size:.875rem;
  }
  .feature-card {
    padding:0;
  }
  .feature-card h3 {
    min-height:0;
    padding:1.4rem;
    font-size:1.3rem;
  }
  .feature-card .prose {
    padding:1.4rem;
  }
  .section {
    padding-top:1.25rem;
    padding-bottom:2.2rem;
  }
  .section-heading {
    font-size:1.75rem;
  }
  .section-heading::after {
    width:60px;
    height:4px;
  }
  .methodology {
    width:calc(100% - 3rem);
  }
  .method-grid {
    gap:.65rem;
  }
  .method-grid li {
    padding:1rem .5rem;
    min-height:165px;
    font-size:1.125rem;
  }
  .service-area h2 {
    font-size:1.5rem;
  }
  .site-footer {
    background:linear-gradient(var(--background),var(--amber));
  }
}
@media(min-width:801px) {
  body::before {
    width:clamp(230px,17vw,330px);
    left:-60px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .button {
    transition:none;
  }
}
/* The mobile homepage ends at the sun footer; details have their own URL. */
@media (max-width: 800px) {
  .home-page #main > :not(.mobile-intro),
  .home-page > .site-footer {
    display: none;
  }
  .home-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .home-page .site-header { width: 100%; }
  .home-page #main { flex: 1; display: flex; }
  .home-page .mobile-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .home-page .mobile-intro > .button {
    width: 100%;
    flex-shrink: 0;
  }
  .home-page .intro-sun {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0;
  }
}
/* Native modal supplies keyboard focus containment and Escape dismissal. */
.drawer-open { overflow: hidden; }
.mobile-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: 74vw;
  max-width: 420px;
  height: 100dvh;
  max-height: none;
  padding: clamp(4rem, 12vh, 7rem) 10vw 1rem;
  border: 0;
  background: var(--amber);
  color: var(--surface);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease-out, overlay .25s allow-discrete, display .25s allow-discrete;
}
.mobile-drawer[open] {
  display: flex;
  flex-direction: column;
  transform: translateX(0);
}
.mobile-drawer::backdrop { background: rgb(0 0 0 / 60%); }
@starting-style {
  .mobile-drawer[open] { transform: translateX(-100%); }
}
.drawer-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.drawer-logo {
  display:block;
  width:min(100%, 245px);
  height:auto;
}
.drawer-close {
  position: absolute;
  right: .5rem;
  top: .5rem;
  border: 0;
  background: transparent;
  color: var(--surface);
  width: 44px;
  height: 44px;
  font-size: 2rem;
  cursor: pointer;
}
.drawer-links { margin-top: clamp(3rem, 8vh, 5rem); }
.js .mobile-drawer .navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.7rem;
  margin: 0;
  width: 100%;
  font-size: clamp(1.125rem, 5.4vw, 1.6rem);
  color: var(--white);
}
.mobile-drawer .navigation a {
  padding: .3rem 0;
  min-height: 44px;
  text-decoration: none;
}
.mobile-drawer a:focus-visible, .drawer-close:focus-visible { outline-color: var(--surface); }
.drawer-copyright {
  margin: auto 0 0;
  padding-top: 3rem;
  font-size: .875rem;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
}
@media (min-width:801px) and (max-width:1200px) {
  body::before {
    display:none;
  }
}
/* A compact navigation tray, coordinated with the site cards. */
@media(min-width:801px) {
  .site-header > .navigation { width:max-content; max-width:100%; margin-inline:auto; padding:.45rem calc(.45rem + 5px); gap:.25rem; border:2px solid var(--border); border-radius:1.15rem; background:var(--surface); box-shadow:0 8px 24px #00000012; }
  .site-header > .navigation a { font-weight:700; display:flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; border:2px solid transparent; border-radius:.75rem; white-space:nowrap; transition:background-color .18s, border-color .18s, color .18s; }
  .site-header > .navigation a:hover { text-decoration:none; background:var(--button); color:var(--white); }
  .site-header > .navigation a[aria-current] { text-decoration:none; background:transparent; border-color:transparent; color:var(--amber); font-weight:700; }
  .site-header > .navigation a:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
}
@media(min-width:801px) and (max-width:1000px) {
  .site-header > .navigation a { padding:.65rem .7rem; font-size:.95rem; }
}

.closing-section { display:block; padding:3rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); text-align:center; background:var(--background); }
.mobile-footer-copy { display:none; }
@media(max-width:800px) {
  .mobile-footer-copy { display:block; }
  .home-page > .closing-section { display:none; }
  .custom-ai-page > .closing-section > .closing-eyebrow,
  .custom-ai-page > .closing-section > h2 { display:none; }
  .custom-ai-page .portfolio-end { background:var(--background); }
  .custom-ai-page > .closing-section .social-links { margin-top:0; }
}
.closing-eyebrow { color:#a4cbd8; font-size:.85rem; font-weight:600; letter-spacing:.1em; }
.closing-section h2 { font-size:clamp(1.65rem,5vw,2rem); line-height:1.25; letter-spacing:-.035em; color:var(--white); margin:1rem 0; }
.social-links { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }
.closing-section > .social-links:first-child { margin-top:0; }
.social-links a, .social-links span { display:grid; place-items:center; width:44px; height:44px; color:var(--text); border:1px solid var(--border); border-radius:50%; }
.social-links svg { width:22px; height:22px; fill:currentColor; }
@media(max-width:800px) { .site-footer { display:none; } }
@media(min-width:801px) {
  .site-header > .navigation { border-width:3px; }
  .site-header > .navigation a { position:relative; border:0; border-radius:0; padding-bottom:.85rem; }
  .site-header > .navigation a:hover, .site-header > .navigation a[aria-current] { background:transparent; }
  .site-footer, .mobile-only-end { display:none; }
  .closing-section { display:block; padding:4rem 1.5rem 3rem; text-align:center; background:linear-gradient(180deg,#253d4544,transparent); }
  .closing-eyebrow { color:#a4cbd8; font-size:.85rem; font-weight:600; letter-spacing:.1em; }
  .closing-section h2 { font-size:clamp(2rem,3vw,3rem); line-height:1.2; letter-spacing:-.035em; color:var(--white); margin:1rem 0; }
  .closing-section > .button { margin-top:1.8rem; }
  .social-links { display:flex; gap:1rem; justify-content:center; margin-top:2.5rem; }
  .social-links a, .social-links span { display:grid; place-items:center; width:44px; height:44px; color:var(--text); border:1px solid var(--border); border-radius:50%; }
  .social-links a:hover { color:var(--amber); border-color:var(--amber); }
  .social-links svg { width:22px; height:22px; fill:currentColor; }
}

@media(min-width:801px) {
  .site-header > .navigation { border:1.5px solid var(--border); }
  .closing-section .social-links a, .closing-section .social-links span { transition:color .2s, background-color .2s, border-color .2s, transform .2s; }
  .closing-section .social-links a:hover, .closing-section .social-links span:hover { color:var(--amber); border-color:var(--amber); background:var(--surface); transform:translateY(-3px); }
}
.drawer-social { display:flex; flex-shrink:0; gap:.75rem; margin-top:auto; padding-top:3rem; padding-bottom:1rem; color:var(--surface); }
.drawer-social a, .drawer-social span { display:grid; place-items:center; width:44px; height:44px; color:inherit; }
.drawer-social svg { width:26px; height:26px; fill:currentColor; }
@media(prefers-reduced-motion:reduce) { .closing-section .social-links a, .closing-section .social-links span { transition:none; } }
@media(min-width:801px) {

}