/* Studio components. Text alignment uses a namespace to avoid Core float utilities. */
:root {
  --color-bg:#030b1a;
  --color-surface:#071225;
  --color-surface-alt:#07152c;
  --color-surface-raised:#09172d;
  --color-footer:#1e293b;
  --color-text:#edf4ff;
  --color-text-muted:#b7cae2;
  --color-border:#1c3355;
  --color-accent:#ff5962;
  --color-accent-hover:#ff8088;
  --container-width:1200px;
  --text-width:72ch;
  --header-height:88px;
  --studio-top:var(--drupal-displace-offset-top,0px);
  --studio-left:var(--drupal-displace-offset-left,0px);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + var(--studio-top) + 24px);
}
body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font:400 1rem/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.studio-main {
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  padding-top:var(--header-height);
  min-height:65vh;
}
a {
  color:inherit;
  text-underline-offset:.25em;
}
a:hover {
  color:var(--color-accent-hover);
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #ffb6bb;
  outline-offset:5px;
}
img,svg {
  max-width:100%;
  height:auto;
}
img {
  display:block;
}
h1,h2,h3 {
  color:var(--color-text);
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance;
  margin:0 0 24px;
  font-weight:750;
}
h1 {
  font-size:clamp(3rem,7vw,6.5rem);
  max-width:20ch;
  white-space:pre-line;
}
h2 {
  font-size:clamp(2rem,4.5vw,3.75rem);
  max-width:23ch;
}
h3 {
  font-size:clamp(1.3rem,2.3vw,1.75rem);
}
p {
  margin:0 0 24px;
}
p,li {
  overflow-wrap:anywhere;
}
.container {
  width:min(var(--container-width),calc(100% - 40px));
  margin-inline:auto;
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:2000;
  padding:16px;
  background:white;
  color:#030b1a;
  transform:translateY(-200%);
}
.skip-link:focus {
  transform:none;
}
.site-header {
  position:fixed;
  top:var(--studio-top);
  left:var(--studio-left);
  right:var(--drupal-displace-offset-right,0px);
  z-index:100;
  background:rgba(3,11,26,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
}
.header-inner {
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:min-height .2s;
}
.site-header.is-scrolled .header-inner {
  min-height:72px;
}
.site-logo {
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  flex-shrink:0;
  line-height:1;
}
.site-logo__name {
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800;
  letter-spacing:-.055em;
  color:#fff;
}
.site-logo__dev {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--color-accent);
}
#site-navigation .studio-menu {
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  align-items:center;
}
#site-navigation .studio-menu__link {
  display:inline-flex;
  padding:12px;
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  min-height:44px;
  align-items:center;
}
#site-navigation .studio-menu__link.is-active-section {
  color:var(--color-accent-hover);
}
#site-navigation .studio-menu__link.studio-nav-cta {
  background:var(--color-accent);
  color:#030b1a;
  border-radius:6px;
  padding-inline:20px;
}
.menu-toggle {
  display:none;
  background:transparent;
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:8px 16px;
  min-height:44px;
  border-radius:6px;
}
.studio-block {
  position:relative;
  width:100%;
  min-width:0;
  scroll-margin-top:calc(var(--header-height) + var(--studio-top) + 24px);
  padding-block:80px;
}
.studio-inner {
  position:relative;
  z-index:1;
}
.studio-block.spacing-large {
  padding-block:120px;
}
.studio-copy {
  max-width:var(--text-width);
  color:var(--color-text-muted);
  font-size:1.125rem;
}
.eyebrow {
  color:var(--color-accent-hover);
  font-size:.75rem;
  letter-spacing:.16em;
  font-weight:750;
  text-transform:uppercase;
  margin-bottom:24px;
}
.surface-surface {
  background:var(--color-surface-alt);
}
.surface-accent {
  background:var(--color-surface-raised);
  border-block:1px solid var(--color-border);
}
.width-narrow .studio-inner {
  max-width:800px;
}
.studio-align-left {
  text-align:left;
}
.studio-align-center {
  text-align:center;
}
.studio-align-center h1,.studio-align-center h2,.studio-align-center .studio-copy {
  margin-inline:auto;
}
.studio-align-center .actions {
  justify-content:center;
}
.studio-hero {
  isolation:isolate;
  min-height:min(900px,calc(90svh - var(--header-height)));
  display:flex;
  align-items:center;
  padding-block:clamp(80px,10vw,144px);
}
.studio-hero h1 {
  max-width:16ch;
  font-size:clamp(2.25rem,5.4vw,5rem);
  line-height:1.05;
  overflow-wrap:normal;
}
.studio-hero .studio-inner {
  min-width:0;
}
.studio-hero .studio-copy {
  max-width:55ch;
  font-size:clamp(1.1rem,2vw,1.35rem);
}
.studio-hero .eyebrow:before {
  content:"";
  display:inline-block;
  width:32px;
  height:1px;
  background:currentColor;
  margin:0 12px 4px 0;
}
.studio-backdrop {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 95% 15%,#18365c 0,transparent 58%),linear-gradient(130deg,#030b1a,#07152c);
}
.studio-backdrop:before {
  content:"";
  position:absolute;
  width:70%;
  height:160%;
  border:1px solid #446587;
  transform:translateY(var(--parallax-y,0px)) rotate(34deg);
  right:-30%;
  top:-30%;
  border-radius:48%;
  opacity:.3;
  z-index:1;
}
.studio-backdrop:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,11,26,.85),rgba(3,11,26,.72));
  z-index:2;
}
.overlay-medium .studio-backdrop:after {
  background:rgba(3,11,26,.72);
}
.overlay-strong .studio-backdrop:after {
  background:rgba(3,11,26,.8);
}
.overlay-dark .studio-backdrop:after {
  background:rgba(3,11,26,.92);
}
.backdrop-desktop,.backdrop-mobile {
  position:absolute;
  inset:-144px 0;
  transform:translateY(var(--parallax-y,0px));
  will-change:transform;
}
.backdrop-desktop picture,.backdrop-mobile picture {
  display:block;
  height:100%;
}
.studio-backdrop img {
  height:100%;
  width:100%;
  object-fit:cover;
}
.backdrop-mobile {
  display:none;
}
.studio-parallax {
  isolation:isolate;
  min-height:400px;
  display:flex;
  align-items:center;
}
.studio-parallax.height-tall {
  min-height:520px;
}
.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
}
.button,input[type=submit] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:6px;
  background:var(--color-accent);
  color:#030b1a;
  font-weight:750;
  text-decoration:none;
}
.button:hover,input[type=submit]:hover {
  background:var(--color-accent-hover);
  color:#030b1a;
}
.text-link {
  display:inline-flex;
  gap:16px;
  align-items:center;
  min-height:44px;
  font-weight:650;
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:40px;
}
.card-grid>.field-item {
  min-width:0;
}
.card-grid .studio-card {
  height:100%;
  padding:32px 24px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:8px;
}
.card-grid .container {
  width:100%;
}
.card-grid .studio-copy {
  font-size:1rem;
}
.service-icon {
  display:block;
  width:40px;
  height:40px;
  color:var(--color-accent-hover);
  margin-bottom:40px;
}
.studio-process .card-grid {
  counter-reset:process;
}
.studio-process .studio-card {
  counter-increment:process;
  background:none;
  border:0;
  border-top:1px solid var(--color-border);
  border-radius:0;
  padding-inline:0;
}
.studio-process .service-icon {
  display:none;
}
.studio-process .studio-card:before {
  content:"0" counter(process);
  display:block;
  color:var(--color-accent-hover);
  font-size:.875rem;
  margin-bottom:32px;
}
.view-references .view-content {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}
.reference-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:8px;
}
.reference-card__body {
  padding:32px;
}
.reference-card img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:7px 7px 0 0;
}
.reference-card .eyebrow {
  margin-bottom:16px;
}
.reference-card .field-item {
  color:var(--color-text-muted);
}
.reference-card .text-link {
  margin-top:24px;
}
.studio-contact .studio-inner {
  max-width:850px;
}
.webform-submission-form {
  margin-top:40px;
}
.form-item {
  margin-bottom:24px;
}
label {
  display:block;
  font-weight:600;
  margin-bottom:8px;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea {
  width:100%;
  min-height:48px;
  background:var(--color-surface);
  border:1px solid #547092;
  color:var(--color-text);
  border-radius:6px;
  padding:12px 16px;
}
input[type=checkbox],input[type=radio] {
  width:24px;
  height:24px;
  vertical-align:middle;
  accent-color:var(--color-accent);
  margin:8px 12px 8px 0;
}
textarea {
  min-height:180px;
}
fieldset {
  border:1px solid var(--color-border);
  padding:24px;
  min-width:0;
}
legend {
  padding-inline:8px;
  font-weight:650;
}
.description {
  color:var(--color-text-muted);
}
.form-required:after {
  content:" *";
  color:var(--color-accent-hover);
}
.form-item--error-message {
  color:#ffc2c6;
}
.price-calculator {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  margin-top:40px;
}
.price-calculator label {
  min-height:44px;
}
.price-calculator input[type=number] {
  max-width:160px;
}
.estimate {
  padding:32px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:8px;
}
.estimate output,.package-price {
  display:block;
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:750;
  letter-spacing:-.04em;
  margin-block:16px;
}
.estimate p {
  color:var(--color-text-muted);
}
.site-footer {
  background:var(--color-footer);
  border-top:1px solid #34475d;
  padding-block:48px;
}
.footer-inner {
  display:grid;
  gap:32px;
  grid-template-columns:1fr 2fr;
  align-items:start;
}
.studio-footer {
  padding:0;
  background:none;
}
.studio-footer .container {
  width:100%;
}
.studio-footer h2 {
  font-size:1.25rem;
}
.studio-footer .studio-copy {
  font-size:1rem;
}
.copyright {
  grid-column:1/-1;
  margin:0;
  color:var(--color-text-muted);
  font-size:.875rem;
}
.page-title {
  padding-block:64px;
}
.page-title h1 {
  max-width:20ch;
}
.messages-area:empty {
  display:none;
}
.messages-area {
  position:relative;
  z-index:2;
}
.studio-honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.studio-block>.contextual {
  z-index:10;
}
.layout-builder {
  background:#fff;
  color:#172230;
}
.layout-builder h1,.layout-builder h2,.layout-builder h3 {
  color:inherit;
}
.layout-builder .studio-block {
  color:var(--color-text);
  background:var(--color-bg);
}
.layout-builder .studio-backdrop {
  pointer-events:none;
}
.layout-builder .studio-hero {
  min-height:400px;
}
.layout-builder__link {
  color:#172230;
}
.layout-builder-form {
  position:relative;
  z-index:101;
}
.path-admin .studio-main {
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  padding-top:var(--header-height);
}
@media(max-width:1000px) {
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #site-navigation .studio-menu__link {
    padding-inline:8px;
    font-size:.8rem;
  }
  .header-inner {
    gap:12px;
  }
}
@media(max-width:900px) {
  :root {
    --header-height:72px;
  }
  .container {
    width:calc(100% - 32px);
  }
  .header-inner {
    flex-wrap:wrap;
    gap:0;
    padding-block:12px;
  }
  .menu-toggle:not([hidden]) {
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  #site-navigation {
    width:100%;
  }
  #site-navigation .studio-menu {
    flex-wrap:wrap;
    gap:0;
    padding-block:16px;
  }
  #site-navigation .studio-menu__link {
    font-size:.95rem;
    padding:12px 16px;
  }
  .js-menu #site-navigation:not(.is-open) {
    display:none;
  }
  .js-menu #site-navigation .studio-menu {
    display:block;
    max-height:calc(100svh - 160px);
    overflow:auto;
  }
  .js-menu #site-navigation .studio-menu__link {
    width:100%;
  }
  .studio-block,.studio-block.spacing-large {
    padding-block:64px;
  }
  .studio-hero {
    min-height:min(760px,calc(90svh - var(--header-height)));
    padding-block:80px;
  }
  .studio-hero h1 {
    font-size:clamp(2.25rem,7vw,4rem);
  }
  .view-references .view-content,.price-calculator,.footer-inner {
    grid-template-columns:1fr;
  }
  .studio-parallax.height-tall {
    min-height:400px;
  }
  .backdrop-desktop,.backdrop-mobile {
    transform:none;
    inset:0;
  }
  .studio-backdrop:has(.backdrop-mobile) .backdrop-desktop {
    display:none;
  }
  .backdrop-mobile {
    display:block;
  }
  .studio-copy {
    font-size:1.05rem;
  }
  .card-grid {
    gap:16px;
  }
  .card-grid .studio-card {
    padding:24px;
  }
  .service-icon {
    margin-bottom:24px;
  }
}
@media(max-width:480px) {
  .card-grid {
    grid-template-columns:1fr;
  }
  .actions {
    gap:16px;
  }
  .reference-card__body,.estimate {
    padding:24px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
  .backdrop-desktop,.backdrop-mobile {
    transform:none!important;
    will-change:auto;
  }
}
@media(max-width:900px) {
  .site-header:not(.js-menu) {
    position:relative;
    top:auto;
  }
}
.legacy-anchor {
  position:absolute;
  top:0;
  scroll-margin-top:calc(var(--header-height) + var(--studio-top) + 24px);
}

/* Editorial controls are separate from the public navigation. */
.studio-admin-tabs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  margin-block:16px;
  padding:12px 16px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface-raised);
}
.studio-admin-tabs__label {
  color:var(--color-text-muted);
  font-size:.8rem;
  font-weight:650;
}
.studio-admin-tabs__list {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}
.studio-admin-tabs__item a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 16px;
  border-radius:4px;
  color:var(--color-text);
  text-decoration:none;
  font-size:.875rem;
}
.studio-admin-tabs__item.is-active a,
.studio-admin-tabs__item a:hover {
  background:var(--color-border);
}
.studio-edit-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 16px;
  margin-bottom:24px;
  border:1px solid var(--color-accent-soft, #ff8088);
  border-radius:6px;
  background:var(--color-surface);
  color:var(--color-text);
  font-size:.875rem;
  font-weight:650;
  text-decoration:none;
}
.studio-edit-link:hover {
  background:var(--color-surface-raised);
}