/* GouData — composição editorial e demonstrações reais. Sem recursos externos. */
:root {
  --primary:#22d3ee;
  --primary-foreground:#061018;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --display:Arial,"Segoe UI",sans-serif
}
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:104px
}
body {
  margin:0;
  background:var(--page-bg,#f7f9f9);
  color:var(--text,#061018);
  font:16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased
}
body.menu-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit;
  border:0
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
button:disabled {
  cursor:default;
  opacity:.6
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent-text,#08788a);
  outline-offset:5px
}
img,svg {
  display:block;
  max-width:100%
}
img {
  height:auto
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.1
}
[hidden] {
  display:none!important
}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding:108px 0
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  z-index:100;
  top:12px;
  left:12px;
  padding:12px 20px;
  background:#22d3ee;
  color:#061018;
  transform:translateY(-180%)
}
.skip-link:focus {
  transform:none
}
.eyebrow,.small-label {
  font-size:10px;
  font-weight:650;
  letter-spacing:.13em;
  line-height:1.6
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}
.section-eyebrow {
  margin-bottom:24px;
  color:var(--accent-text)
}
.muted {
  color:var(--text-muted)
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-text);
  box-shadow:0 0 0 4px var(--accent-soft)
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border)
}
.header-inner {
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:inline-flex;
  flex-shrink:0
}
.brand-logo {
  width:162px;
  height:auto
}
.desktop-nav {
  display:flex;
  gap:26px;
  align-items:center;
  font-size:12px;
  font-weight:500;
  color:var(--text-muted)
}
.desktop-nav a:hover,.desktop-nav [aria-current],.footer-legal a:hover {
  color:var(--accent-text)
}
.header-tools {
  display:flex;
  align-items:center;
  gap:13px
}
.header-contact {
  display:inline-flex;
  gap:16px;
  align-items:center;
  font-size:12px;
  font-weight:650
}
.header-contact .icon {
  width:17px;
  height:17px
}
.menu-toggle {
  display:none;
  width:42px;
  height:42px;
  background:transparent;
  padding:11px;
  border:1px solid var(--border);
  border-radius:50%
}
.menu-toggle span {
  display:block;
  width:18px;
  height:1px;
  margin:5px 0;
  background:currentColor;
  transition:transform .2s
}
.menu-toggle[aria-expanded="true"] span:first-child {
  transform:translateY(3px) rotate(45deg)
}
.menu-toggle[aria-expanded="true"] span:last-child {
  transform:translateY(-3px) rotate(-45deg)
}
.mobile-menu {
  padding:16px 28px 28px;
  background:var(--page-bg);
  border-top:1px solid var(--border);
  max-height:calc(100dvh - 84px);
  overflow-y:auto
}
.mobile-menu a {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:17px
}
.mobile-menu a span {
  color:var(--text-muted);
  font-size:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:54px;
  padding:14px 23px;
  border-radius:5px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-dark {
  color:#f4f9fb;
  background:#061018
}
.button-dark:hover {
  background:#1d3b49
}
.button-cyan {
  color:#061018;
  background:#22d3ee
}
.button-cyan:hover {
  background:#85ebf8
}
.button .icon {
  width:19px;
  height:19px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:12px;
  font-weight:600
}
.text-link:hover {
  color:var(--accent-text)
}
.text-link .icon {
  width:18px;
  height:18px
}
.text-link>span {
  font-size:20px
}
/* The hero uses captures of the actual example sites. */
.hero {
  overflow:hidden
}
.hero-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:54px;
  align-items:center;
  padding-block:70px 66px
}
.hero-grid>* {
  min-width:0
}
.hero-copy h1 {
  font:600 clamp(58px,5.8vw,82px)/1.02 var(--display);
  letter-spacing:-.065em;
  margin:27px 0
}
.hero-copy h1>span {
  position:relative;
  display:inline-block;
  isolation:isolate
}
.hero-copy h1>span::after {
  content:"";
  position:absolute;
  left:-2px;
  right:-7px;
  height:.2em;
  bottom:.035em;
  background:var(--accent);
  z-index:-1
}
.hero-description {
  max-width:400px;
  font-size:15px;
  color:var(--text-muted);
  line-height:1.8
}
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:23px;
  margin-top:29px
}
.hero-price {
  color:var(--text-muted);
  font-size:12px;
  margin-top:26px
}
.hero-price strong {
  color:var(--text);
  font-weight:600
}
.hero-price>span {
  margin-inline:6px
}
.hero-price small {
  font-size:11px
}
.hero-studio {
  background:#e7f0f2;
  border:1px solid var(--border);
  border-radius:9px;
  padding:21px 23px 16px;
  position:relative;
  margin-right:-17px
}
.studio-topline {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:8px;
  letter-spacing:.09em;
  font-weight:600;
  color:var(--text-muted)
}
.studio-edition {
  font-size:7px
}
.preview-stage {
  height:415px;
  position:relative;
  isolation:isolate
}
.studio-mark {
  position:absolute;
  left:5%;
  top:10px;
  font:700 360px/.95 var(--display);
  letter-spacing:-.1em;
  color:#d3e3e7;
  z-index:-1;
  user-select:none
}
.studio-mark span {
  color:var(--accent)
}
.desktop-preview {
  position:absolute;
  top:64px;
  left:-43px;
  right:25px;
  overflow:hidden;
  border-radius:6px;
  background:#fff;
  border:1px solid #bdced5;
  box-shadow:0 24px 48px -20px #041d3c55;
  transform:rotate(-3deg);
  transition:transform .35s
}
.desktop-preview:hover {
  transform:rotate(-1deg) translateY(-3px)
}
.preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:28px;
  padding:0 11px;
  background:#f4f6f7;
  color:#52636d;
  font-size:7px
}
.window-dots {
  display:flex;
  gap:4px
}
.window-dots i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#adbdc3
}
.desktop-preview>img {
  width:100%;
  aspect-ratio:1.44;
  object-fit:cover;
  object-position:top
}
.phone-preview {
  position:absolute;
  width:143px;
  right:-11px;
  bottom:16px;
  padding:5px;
  border:2px solid #344853;
  border-radius:22px;
  background:#061018;
  box-shadow:0 18px 34px -15px #071b3470;
  transform:rotate(5deg);
  transition:transform .35s
}
.phone-preview:hover {
  transform:rotate(1deg) translateY(-5px)
}
.phone-preview img {
  width:100%;
  border-radius:16px;
  aspect-ratio:390/844;
  object-fit:cover;
  object-position:top
}
.phone-speaker {
  position:absolute;
  z-index:1;
  top:10px;
  left:36%;
  width:28%;
  height:6px;
  border-radius:9px;
  background:#061018
}
.studio-annotation {
  position:absolute;
  bottom:-1px;
  left:1px;
  font:italic 14px Georgia,serif;
  color:var(--text-muted);
  transform:rotate(-3deg)
}
.studio-annotation>span {
  display:inline-block;
  font-size:25px;
  margin-right:5px;
  transform:rotate(-25deg)
}
.studio-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:19px
}
.preview-switcher {
  display:flex;
  gap:5px
}
.preview-switcher button {
  padding:8px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  font-size:9px;
  font-weight:600;
  color:var(--text-muted)
}
.preview-switcher button span {
  margin-left:3px
}
.preview-switcher [aria-pressed="true"] {
  color:var(--text);
  border-color:var(--border);
  background:var(--surface)
}
.studio-hint {
  font-size:8px;
  color:var(--text-muted)
}
.hero-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--border);
  padding-block:24px;
  font-size:10px
}
.group-signature {
  display:flex;
  align-items:center;
  gap:12px
}
.group-signature>span:first-child {
  font-size:8px;
  letter-spacing:.1em;
  color:var(--text-muted)
}
.group-signature strong {
  font-size:13px;
  font-weight:600
}
.hero-bottom>p {
  color:var(--text-muted)
}
.scroll-cue {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border:1px solid var(--border);
  border-radius:50%;
  font-size:17px
}
/* Keep the desktop frame inside the studio so all three controls stay clickable. */
.desktop-preview {
  height:calc(100% - 68px);
  top:40px
}
.desktop-preview>img {
  height:calc(100% - 28px);
  aspect-ratio:auto;
  object-fit:cover;
  object-position:top
}
/* Selected work */
.portfolio-section {
  background:var(--surface);
  border-block:1px solid var(--border)
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:43px
}
.section-heading h2,.service-copy h2,.pricing-copy h2,.faq-layout h2 {
  font:500 clamp(35px,3.55vw,49px)/1.14 var(--display);
  letter-spacing:-.053em
}
.heading-note {
  max-width:345px;
  color:var(--text-muted)
}
.heading-note>p {
  font-size:13px;
  line-height:1.85;
  margin-bottom:16px
}
.heading-note>.small-label {
  font-size:8px
}
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}
.project-art {
  position:relative;
  overflow:hidden;
  height:340px;
  padding:27px 26px;
  border-radius:5px
}
.project-clara .project-art {
  color:#31433e;
  background:#e3e9df
}
.project-lume .project-art {
  color:#eee6d9;
  background:#252824
}
.project-brisa .project-art {
  color:#103c50;
  background:#d9edf2
}
.project-art-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.project-wordmark {
  display:block;
  font-size:30px;
  letter-spacing:-.06em;
  line-height:1
}
.project-wordmark>span {
  display:block;
  margin-top:8px;
  font:7px/1 var(--font);
  letter-spacing:.2em
}
.clara-wordmark {
  font-family:Georgia,serif
}
.lume-wordmark {
  font-weight:800;
  letter-spacing:-.04em
}
.brisa-wordmark {
  font-weight:500
}
.project-open {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:19px;
  opacity:.7;
  transition:background .2s
}
.project-screen {
  position:absolute;
  left:27px;
  right:-30px;
  top:107px;
  border:4px solid #fff;
  border-bottom:0;
  box-shadow:0 15px 35px -20px #06101899;
  transform:rotate(-5deg);
  transform-origin:bottom left;
  transition:transform .4s;
  border-radius:4px
}
.project-lume .project-screen {
  transform:rotate(5deg);
  left:22px;
  right:-23px;
  border-color:#525650
}
.project-brisa .project-screen {
  transform:rotate(-4deg)
}
.project-screen img {
  width:100%
}
.project-art-note {
  position:absolute;
  left:26px;
  right:16px;
  bottom:17px;
  font-size:9px;
  padding-top:12px;
  background:inherit
}
.project-link:hover .project-screen {
  transform:rotate(0deg) translateY(-8px)
}
.project-link:hover .project-open {
  background:#ffffff22
}
.project-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:23px
}
.project-caption .small-label {
  color:var(--text-muted);
  font-size:8px
}
.project-caption h3 {
  font-size:21px;
  letter-spacing:-.04em;
  font-weight:600;
  margin-top:8px
}
.project-caption-arrow {
  font-size:25px
}
.project-description {
  font-size:12px;
  color:var(--text-muted);
  margin-top:9px
}
.project-visit {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:15px;
  margin-top:19px;
  font-size:11px;
  font-weight:600
}
.project-visit>span {
  font-size:16px
}
.portfolio-footnote {
  display:flex;
  gap:25px;
  align-items:flex-start;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--border);
  color:var(--text-muted)
}
.demo-badge {
  border:1px solid var(--border);
  border-radius:20px;
  padding:5px 10px;
  white-space:nowrap;
  font-size:7px;
  letter-spacing:.08em
}
.portfolio-footnote>p {
  max-width:650px;
  font-size:10px;
  line-height:1.8
}
/* Scope diagram */
.service-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:94px;
  align-items:center
}
.section-lead {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.9;
  margin-top:24px;
  max-width:430px
}
.service-principles {
  margin-top:32px
}
.service-principles article {
  display:flex;
  gap:22px;
  padding:21px 0;
  border-top:1px solid var(--border)
}
.service-principles article>span {
  color:var(--accent-text);
  font-size:10px;
  line-height:2
}
.service-principles h3 {
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.02em
}
.service-principles p {
  font-size:12px;
  color:var(--text-muted);
  margin-top:7px;
  line-height:1.8
}
.site-blueprint {
  background:#eaf1f3;
  padding:26px;
  border:1px solid var(--border);
  border-radius:6px
}
.blueprint-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  letter-spacing:.08em;
  margin-bottom:24px
}
.blueprint-caption>span:last-child {
  font-size:20px
}
.blueprint-browser {
  border:1px solid #c6d8df;
  background:var(--surface);
  border-radius:4px;
  overflow:hidden
}
.blueprint-nav {
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border-bottom:1px solid var(--border);
  font-size:7px
}
.blueprint-nav strong {
  margin-right:auto;
  font-size:13px;
  letter-spacing:-.05em
}
.blueprint-nav strong>span {
  color:var(--accent-text)
}
.blueprint-hero {
  position:relative;
  padding:29px 21px;
  overflow:hidden
}
.blueprint-hero .small-label {
  font-size:6px;
  position:relative;
  z-index:1
}
.blueprint-hero>strong {
  position:relative;
  display:block;
  font-size:25px;
  letter-spacing:-.055em;
  line-height:1.16;
  margin-top:15px;
  z-index:1
}
.blueprint-hero strong>span {
  color:var(--accent-text)
}
.blueprint-cta {
  display:inline-block;
  background:var(--text);
  color:var(--surface);
  font-size:7px;
  padding:8px 12px;
  margin-top:15px;
  border-radius:2px
}
.blueprint-monogram {
  position:absolute;
  right:10px;
  top:30px;
  font:600 130px/.9 var(--display);
  letter-spacing:-.12em;
  color:var(--accent-soft)
}
.blueprint-monogram>span {
  position:absolute;
  right:-3px;
  bottom:-12px;
  font-size:50px;
  color:var(--accent-text)
}
.blueprint-sections {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border-top:1px solid var(--border)
}
.blueprint-sections>span {
  padding:17px 20px;
  font-size:9px;
  background:var(--surface)
}
.blueprint-sections i {
  font-style:normal;
  color:var(--text-muted);
  margin-right:8px;
  font-size:7px
}
.blueprint-sections>.blueprint-contact {
  grid-column:span 2;
  background:var(--accent-soft)
}
.blueprint-contact b {
  float:right;
  font-weight:400
}
.blueprint-spec {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:27px 5px 20px;
  gap:12px
}
.blueprint-spec>div {
  display:flex;
  align-items:center;
  gap:12px
}
.blueprint-spec strong {
  display:flex;
  flex-direction:column-reverse;
  font:400 43px/1 var(--display);
  letter-spacing:-.06em
}
.blueprint-spec strong span {
  font:8px/1.6 var(--font);
  letter-spacing:0
}
.blueprint-spec p {
  font-size:10px;
  line-height:1.6;
  color:var(--text-muted)
}
.spec-plus {
  font-size:23px;
  color:var(--accent-text)
}
.blueprint-note {
  border-top:1px solid var(--border);
  padding-top:16px;
  font-size:10px;
  color:var(--text-muted)
}
/* The process */
.process-section {
  background:#061018;
  color:#edf5f8
}
.process-section .section-eyebrow {
  color:#22d3ee
}
.process-section h2>span {
  color:#a1b8c3
}
.process-heading-note {
  color:#a1b8c3;
  font-size:12px;
  line-height:1.9
}
.process-steps {
  list-style:none;
  padding:0;
  margin:52px 0 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.process-steps li {
  position:relative;
  border-top:1px solid #354750;
  padding:26px 27px 0 0
}
.process-steps li::before {
  content:"";
  position:absolute;
  top:-3px;
  width:5px;
  height:5px;
  background:#22d3ee;
  border-radius:50%
}
.step-number {
  color:#22d3ee;
  font:400 36px/1 var(--display);
  letter-spacing:-.06em
}
.process-steps h3 {
  margin-top:27px;
  font-size:19px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.025em
}
.process-steps p {
  margin-top:16px;
  color:#b5c6ce;
  font-size:12px;
  line-height:1.9
}
.step-caption {
  display:block;
  font-size:7px;
  letter-spacing:.13em;
  margin-top:26px;
  color:#92abb8
}
.materials-bar {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  border-top:1px solid #354750;
  margin-top:50px;
  padding-top:24px;
  align-items:start
}
.materials-bar .small-label {
  color:#92abb8;
  font-size:8px
}
.materials-bar>div>p {
  font-size:12px;
  margin-top:6px
}
.material-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  font-size:12px;
  padding:8px 0;
  list-style:none
}
.material-details summary::-webkit-details-marker {
  display:none
}
.material-details summary>span {
  color:#22d3ee;
  font-size:23px
}
.material-details[open] summary>span {
  transform:rotate(45deg)
}
.materials-content {
  color:#b5c6ce;
  font-size:12px;
  line-height:1.85
}
.materials-content ul {
  padding-left:17px;
  margin-block:10px 16px
}
.materials-content li {
  margin-bottom:8px
}
.materials-content strong {
  color:#edf5f8;
  font-weight:500
}
/* Investment */
.pricing-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}
.pricing-copy {
  padding-top:15px
}
.care-note {
  position:relative;
  border-left:2px solid var(--accent);
  padding:4px 0 4px 24px;
  margin:37px 0 30px;
  max-width:440px
}
.care-symbol {
  position:absolute;
  right:0;
  top:0;
  color:var(--accent-text);
  font-size:24px
}
.care-note h3 {
  font-size:19px;
  letter-spacing:-.03em;
  margin:0 26px 13px 0
}
.care-note p {
  color:var(--text-muted);
  font-size:13px;
  line-height:1.8
}
.care-note .fine-print {
  font-size:11px;
  margin-top:13px
}
.care-note strong {
  font-weight:600;
  color:var(--text)
}
.price-card {
  border:1px solid #bacdd4;
  border-radius:7px;
  background:var(--surface);
  padding:31px;
  position:relative;
  box-shadow:var(--shadow)
}
.price-card::before {
  content:"";
  position:absolute;
  inset:-1px -1px auto;
  height:4px;
  background:var(--accent);
  border-radius:7px 7px 0 0
}
.price-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.price-card-header .small-label {
  font-size:8px;
  color:var(--text-muted)
}
.plan-badge {
  font-size:8px;
  background:var(--accent-soft);
  color:var(--accent-text);
  padding:5px 9px;
  border-radius:20px
}
.price-main {
  padding-top:29px
}
.price-label {
  font-size:13px
}
.price-amount {
  display:flex;
  align-items:baseline;
  gap:10px;
  font:500 83px/1.2 var(--display);
  letter-spacing:-.07em;
  margin-top:5px
}
.price-amount>span:first-child {
  font-size:23px;
  letter-spacing:-.05em
}
.price-amount .once {
  font:11px var(--font);
  color:var(--text-muted);
  letter-spacing:0
}
.price-split {
  font-size:10px;
  color:var(--text-muted);
  margin-top:5px
}
.recurring-price {
  display:flex;
  gap:19px;
  align-items:center;
  border-block:1px solid var(--border);
  margin-top:23px;
  padding-block:20px
}
.recurring-price>span {
  font-size:23px;
  color:var(--accent-text)
}
.recurring-price strong {
  font-size:25px;
  font-weight:600;
  letter-spacing:-.04em
}
.recurring-price strong>span {
  font-size:12px;
  font-weight:400;
  color:var(--text-muted);
  margin-left:4px
}
.recurring-price p {
  color:var(--text-muted);
  font-size:10px;
  margin-top:3px
}
.plan-features {
  list-style:none;
  padding:0;
  margin:23px 0;
  display:grid;
  gap:11px
}
.plan-features li {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.plan-features .icon {
  width:16px;
  height:16px;
  color:var(--accent-text)
}
.price-button {
  width:100%
}
.plan-note {
  font-size:9px;
  line-height:1.7;
  color:var(--text-muted);
  text-align:center;
  margin-top:16px
}
.group-bridge {
  background:#e8f1f3;
  border-block:1px solid var(--border);
  padding:55px 0
}
.group-bridge-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}
.group-bridge .eyebrow {
  font-size:8px;
  color:var(--text-muted)
}
.group-bridge h2 {
  font-size:39px;
  letter-spacing:-.06em;
  font-weight:500;
  margin:14px 0
}
.group-bridge h2>span {
  color:var(--accent-text)
}
.group-bridge .small-label {
  font-size:8px;
  color:var(--text-muted)
}
.group-bridge p:not(.eyebrow) {
  font-size:13px;
  color:var(--text-muted);
  line-height:1.9;
  margin-bottom:18px
}
.faq-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px
}
.faq-list details {
  border-bottom:1px solid var(--border)
}
.faq-list details:first-child {
  border-top:1px solid var(--border)
}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  padding:22px 0;
  line-height:1.6;
  list-style:none
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary .icon {
  width:17px;
  height:17px;
  color:var(--accent-text);
  transition:transform .2s
}
.faq-list details[open] summary .icon {
  transform:rotate(45deg)
}
.faq-list details p {
  padding:0 25px 24px 0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.9
}
.faq-list details p a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--accent-text)
}
/* Copy-only contact: no form and no mailto. */
.contact-section {
  padding-bottom:75px
}
.contact-panel {
  background:#22d3ee;
  color:#061018;
  padding:58px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  border-radius:6px
}
.contact-copy>.eyebrow {
  font-size:8px
}
.contact-copy h2 {
  font:500 clamp(38px,3.9vw,54px)/1.1 var(--display);
  letter-spacing:-.06em;
  margin-top:25px
}
.contact-copy h2>span {
  color:#125665
}
.contact-copy>p:not(.eyebrow) {
  font-size:13px;
  max-width:355px;
  margin-top:23px;
  color:#174755;
  line-height:1.85
}
.contact-signature {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:38px
}
.contact-signature>span {
  font-size:10px;
  line-height:1.8;
  color:#174755
}
.contact-signature strong {
  font-weight:600;
  color:#061018
}
.contact-action {
  background:#071923;
  color:#eff6f9;
  padding:29px;
  border-radius:5px;
  align-self:start
}
.contact-action>.small-label {
  color:#91aab7;
  font-size:8px
}
.contact-action h3 {
  font-size:26px;
  font-weight:500;
  letter-spacing:-.04em;
  margin-top:16px
}
.contact-action>p {
  color:#b5c6ce;
  font-size:11px;
  margin-top:15px
}
.contact-address {
  border-block:1px solid #304751;
  margin-top:23px;
  padding-block:19px
}
.contact-address>span {
  font-size:7px;
  letter-spacing:.12em;
  color:#91aab7
}
.contact-email {
  color:#22d3ee;
  font-size:clamp(15px,1.65vw,22px);
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
  margin-top:5px;
  user-select:all
}
.copy-button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:10px;
  background:transparent;
  color:#edf5f8;
  border:1px solid #49616e;
  border-radius:3px;
  padding:8px 11px;
  margin-top:13px
}
.copy-button:hover {
  background:#16343f;
  border-color:#22d3ee
}
.email-template {
  margin-top:15px
}
.email-template summary {
  list-style:none;
  display:flex;
  gap:15px;
  justify-content:space-between;
  cursor:pointer;
  font-size:10px;
  padding-block:7px;
  color:#eff6f9
}
.email-template summary::-webkit-details-marker {
  display:none
}
.email-template summary>span {
  color:#22d3ee
}
.email-template[open] summary>span {
  transform:rotate(45deg)
}
.email-template>div {
  padding-top:12px;
  color:#b5c6ce;
  font-size:11px
}
.email-template>div>p {
  margin-bottom:14px
}
[data-email-template] {
  white-space:pre-line;
  line-height:1.9
}
.contact-action .contact-note {
  font-size:10px;
  line-height:1.9
}
.contact-action .copy-status {
  color:#91e8f4;
  font-size:10px
}
.copy-status:empty {
  display:none
}
.contact-panel :focus-visible,.process-section :focus-visible {
  outline-color:#edf5f8
}
/* Shared footer, privacy and 404. */
.site-footer {
  border-top:1px solid var(--border);
  padding:42px 0 22px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.footer-top .brand-logo {
  width:154px
}
.footer-top>p {
  font-size:11px;
  color:var(--text-muted)
}
.back-top {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:11px
}
.back-top>span {
  font-size:18px
}
.footer-legal {
  display:flex;
  flex-wrap:wrap;
  gap:12px 27px;
  margin-top:32px;
  font-size:10px;
  color:var(--text-muted)
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:23px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:9px;
  color:var(--text-muted)
}
.legal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:28px;
  border-bottom:1px solid var(--border)
}
.legal-header-actions {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px
}
.legal-content {
  max-width:850px;
  padding-block:62px 80px
}
.legal-intro .eyebrow {
  color:var(--accent-text)
}
.legal-intro h1 {
  font:500 clamp(42px,6vw,70px)/1.03 var(--display);
  letter-spacing:-.06em;
  margin:25px 0
}
.legal-intro h1>span {
  color:var(--accent-text)
}
.legal-intro>p {
  max-width:480px;
  color:var(--text-muted)
}
.legal-date {
  display:block;
  font-size:11px;
  color:var(--text-muted);
  margin-top:18px
}
.legal-summary {
  background:var(--accent-soft);
  border-left:2px solid var(--accent-text);
  padding:25px;
  margin-block:38px
}
.legal-summary p {
  margin-top:9px;
  color:var(--text-muted);
  font-size:14px
}
.legal-content>section {
  margin-top:34px
}
.legal-content section h2 {
  font-size:22px;
  letter-spacing:-.035em;
  margin-bottom:17px
}
.legal-content section p,.legal-content li {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.9
}
.legal-content section p+p {
  margin-top:13px
}
.legal-content li {
  margin-bottom:10px
}
.legal-content section a {
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px
}
.legal-contact {
  padding:24px;
  border:1px solid var(--border);
  background:var(--surface);
  margin-block:23px
}
.legal-contact .legal-contact-address {
  color:var(--accent-text);
  font-size:20px;
  overflow-wrap:anywhere;
  margin-block:10px
}
.legal-footer .footer-legal {
  margin-top:0
}
.error-page {
  max-width:800px;
  width:calc(100% - 48px);
  margin:auto;
  padding-bottom:50px
}
.error-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:30px;
  margin-bottom:80px
}
.error-page>.eyebrow {
  color:var(--accent-text)
}
.error-page h1 {
  font:500 clamp(50px,8vw,90px)/1.05 var(--display);
  letter-spacing:-.065em;
  margin:25px 0
}
.error-page h1>span {
  color:var(--accent-text)
}
.error-page>p {
  color:var(--text-muted);
  margin-bottom:30px
}
.error-about {
  display:flex;
  width:fit-content;
  margin-top:22px
}
@media(min-width:1500px) {
  .hero-grid {
    gap:76px
  }
  .hero-studio {
    margin-right:0
  }
  .preview-stage {
    height:440px
  }
}
@media(max-width:1200px) {
  .desktop-nav {
    gap:17px
  }
  .header-inner {
    gap:20px
  }
  .header-contact {
    font-size:11px;
    gap:9px
  }
  .hero-grid {
    gap:38px
  }
  .preview-stage {
    height:355px
  }
  .phone-preview {
    width:119px
  }
  .desktop-preview {
    left:-31px;
    right:15px
  }
  .studio-annotation {
    font-size:12px
  }
  .studio-edition {
    display:none
  }
  .project-art {
    height:290px
  }
  .service-layout,.pricing-layout,.group-bridge-inner {
    gap:55px
  }
  .faq-layout {
    gap:55px
  }
  .contact-panel {
    gap:40px;
    padding:45px
  }
}
@media(max-width:1100px) {
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .header-contact {
    font-size:12px
  }
  .hero-copy h1 {
    font-size:64px
  }
  .container {
    width:calc(100% - 64px)
  }
  .hero-grid {
    gap:28px;
    padding-block:58px
  }
  .hero-studio {
    padding:17px;
    margin-right:0
  }
  .preview-stage {
    height:330px
  }
  .desktop-preview {
    top:50px
  }
  .studio-hint {
    display:none
  }
  .studio-mark {
    font-size:280px
  }
  .hero-description {
    font-size:14px
  }
  .hero-actions {
    gap:15px
  }
  .hero-actions .button {
    padding-inline:18px;
    gap:15px
  }
  .project-art {
    height:263px;
    padding:21px
  }
  .project-screen {
    left:20px;
    top:100px
  }
  .project-art-note {
    left:21px;
    font-size:8px
  }
  .portfolio-grid {
    gap:19px
  }
  .service-layout {
    gap:40px
  }
  .blueprint-nav {
    gap:10px;
    padding:13px
  }
  .blueprint-spec {
    gap:8px;
    padding-inline:0
  }
  .blueprint-spec>div {
    gap:8px
  }
  .blueprint-spec strong {
    font-size:35px
  }
  .blueprint-spec p {
    font-size:9px
  }
  .site-blueprint {
    padding:20px
  }
  .process-steps h3 {
    font-size:17px
  }
  .process-steps li {
    padding-right:21px
  }
  .price-card {
    padding:25px
  }
  .contact-panel {
    padding:36px;
    gap:30px
  }
  .contact-action {
    padding:23px
  }
}
@media(max-width:800px) {
  .section {
    padding-block:76px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:50px;
    padding-top:47px
  }
  .hero-copy {
    max-width:580px
  }
  .hero-copy h1 {
    font-size:78px
  }
  .hero-description {
    max-width:430px;
    font-size:15px
  }
  .hero-studio {
    max-width:600px;
    width:calc(100% - 22px);
    margin-left:22px
  }
  .preview-stage {
    height:415px
  }
  .desktop-preview {
    left:-39px;
    right:25px;
    top:44px
  }
  .phone-preview {
    width:144px;
    bottom:18px
  }
  .studio-mark {
    font-size:350px
  }
  .studio-hint,.studio-edition {
    display:block
  }
  .hero-bottom>p {
    display:none
  }
  .section-heading {
    gap:30px
  }
  .heading-note {
    max-width:245px
  }
  .portfolio-grid {
    grid-template-columns:1fr;
    gap:38px
  }
  .project-art {
    height:385px
  }
  .project-art-heading {
    position:relative;
    z-index:1
  }
  .project-wordmark {
    font-size:40px
  }
  .project-screen {
    top:45px;
    left:34%;
    right:-10px
  }
  .project-lume .project-screen {
    left:33%;
    right:-10px
  }
  .project-art-note {
    font-size:11px
  }
  .project-caption {
    margin-top:19px
  }
  .project-description {
    margin-top:7px
  }
  .project-visit {
    margin-top:13px;
    padding-top:12px
  }
  .service-layout,.pricing-layout {
    grid-template-columns:1fr;
    gap:43px
  }
  .site-blueprint {
    max-width:560px;
    padding:30px
  }
  .service-copy {
    max-width:600px
  }
  .blueprint-nav {
    padding:18px;
    font-size:9px;
    gap:17px
  }
  .blueprint-nav strong {
    font-size:16px
  }
  .blueprint-hero {
    padding:32px 25px
  }
  .blueprint-hero>strong {
    font-size:32px
  }
  .blueprint-hero .small-label {
    font-size:8px
  }
  .blueprint-cta {
    font-size:9px;
    padding:9px 14px
  }
  .blueprint-spec strong {
    font-size:46px
  }
  .blueprint-spec p {
    font-size:12px
  }
  .blueprint-spec {
    padding-block:25px
  }
  .process-section .section-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }
  .process-heading-note br {
    display:none
  }
  .process-steps {
    grid-template-columns:1fr 1fr;
    row-gap:35px;
    margin-top:35px
  }
  .process-steps h3 {
    font-size:20px;
    margin-top:18px
  }
  .process-steps p {
    max-width:250px
  }
  .step-caption {
    margin-top:19px
  }
  .price-card {
    max-width:560px;
    width:100%;
    padding:32px
  }
  .pricing-copy {
    padding:0
  }
  .pricing-copy .section-lead,.care-note {
    max-width:560px
  }
  .group-bridge-inner {
    gap:30px
  }
  .group-bridge h2 {
    font-size:31px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .contact-panel {
    grid-template-columns:1fr;
    padding:40px;
    gap:35px
  }
  .contact-copy h2 {
    font-size:52px
  }
  .contact-copy>p:not(.eyebrow) {
    max-width:400px
  }
  .contact-signature {
    margin-top:23px
  }
  .contact-action {
    padding:28px
  }
  .contact-email {
    font-size:24px
  }
  .contact-action h3 br {
    display:none
  }
  .footer-bottom {
    align-items:flex-start
  }
}
@media(max-width:540px) {
  html {
    scroll-padding-top:85px
  }
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:74px;
    gap:15px
  }
  .brand-logo {
    width:143px
  }
  .header-contact {
    display:none
  }
  .header-tools {
    gap:8px
  }
  .theme-toggle,.menu-toggle {
    width:37px;
    height:37px;
    flex-basis:37px
  }
  .menu-toggle {
    padding:9px
  }
  .mobile-menu {
    max-height:calc(100dvh - 74px)
  }
  .hero-grid {
    gap:40px;
    padding-block:39px 35px
  }
  .hero-copy .eyebrow {
    font-size:8px
  }
  .hero-copy h1 {
    font-size:clamp(52px,12.3vw,66px);
    margin:23px 0
  }
  .hero-description {
    font-size:14px;
    line-height:1.85
  }
  .hero-actions {
    gap:21px;
    margin-top:24px
  }
  .hero-actions .button {
    font-size:12px;
    min-height:51px
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:8px
  }
  .hero-price {
    font-size:11px;
    margin-top:21px
  }
  .hero-price small {
    font-size:10px
  }
  .hero-studio {
    padding:16px 13px 13px;
    width:calc(100% - 12px);
    margin-left:12px
  }
  .studio-topline {
    font-size:7px
  }
  .studio-edition {
    display:none
  }
  .preview-stage {
    height:295px
  }
  .desktop-preview {
    left:-27px;
    right:6px;
    top:37px
  }
  .preview-toolbar {
    height:21px;
    font-size:6px
  }
  .phone-preview {
    width:104px;
    border-radius:17px;
    bottom:10px;
    right:-6px;
    padding:4px
  }
  .phone-preview img {
    border-radius:11px
  }
  .phone-speaker {
    top:9px;
    height:4px
  }
  .studio-mark {
    top:24px;
    font-size:240px
  }
  .studio-annotation {
    bottom:0;
    font-size:11px
  }
  .studio-annotation>span {
    font-size:19px
  }
  .studio-controls {
    padding-top:17px
  }
  .preview-switcher {
    gap:1px
  }
  .preview-switcher button {
    padding:7px 8px;
    font-size:8px
  }
  .studio-hint {
    font-size:7px
  }
  .hero-bottom {
    padding-block:19px
  }
  .group-signature {
    gap:9px
  }
  .group-signature>span:first-child {
    font-size:7px
  }
  .group-signature strong {
    font-size:12px
  }
  .section {
    padding-block:62px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-heading h2,.service-copy h2,.pricing-copy h2,.faq-layout h2 {
    font-size:35px
  }
  .section-eyebrow {
    margin-bottom:20px;
    font-size:8px
  }
  .heading-note {
    max-width:100%;
    margin-top:20px
  }
  .heading-note>p {
    font-size:12px;
    margin-bottom:11px
  }
  .heading-note>.small-label {
    font-size:7px
  }
  .project-art {
    height:311px;
    padding:24px
  }
  .project-wordmark {
    font-size:31px
  }
  .project-open {
    width:31px;
    height:31px
  }
  .project-screen,.project-lume .project-screen {
    top:103px;
    left:24px;
    right:-19px
  }
  .project-art-note {
    font-size:9px;
    left:24px
  }
  .project-caption h3 {
    font-size:22px
  }
  .project-description {
    font-size:12px
  }
  .portfolio-footnote {
    flex-direction:column;
    gap:12px;
    margin-top:29px
  }
  .portfolio-footnote>p {
    font-size:10px
  }
  .service-layout {
    gap:30px
  }
  .service-copy h2 br:last-child {
    display:none
  }
  .section-lead {
    font-size:13px;
    margin-top:20px
  }
  .service-principles article {
    gap:17px;
    padding-block:19px
  }
  .service-principles h3 {
    font-size:15px
  }
  .site-blueprint {
    padding:18px
  }
  .blueprint-caption {
    font-size:8px;
    margin-bottom:17px
  }
  .blueprint-nav {
    font-size:6px;
    gap:10px;
    padding:13px
  }
  .blueprint-nav strong {
    font-size:12px
  }
  .blueprint-hero {
    padding:24px 18px
  }
  .blueprint-hero>strong {
    font-size:25px
  }
  .blueprint-hero .small-label {
    font-size:6px
  }
  .blueprint-cta {
    font-size:7px
  }
  .blueprint-monogram {
    font-size:110px;
    top:40px
  }
  .blueprint-sections>span {
    font-size:8px;
    padding:14px
  }
  .blueprint-spec {
    gap:8px;
    padding-block:19px
  }
  .blueprint-spec>div {
    gap:8px
  }
  .blueprint-spec strong {
    font-size:37px
  }
  .blueprint-spec p {
    font-size:9px
  }
  .spec-plus {
    font-size:19px
  }
  .blueprint-note {
    font-size:9px
  }
  .process-section .section-heading {
    display:flex
  }
  .process-section h2>span {
    display:inline-block;
    margin-top:3px
  }
  .process-steps {
    column-gap:20px;
    row-gap:30px;
    margin-top:25px
  }
  .process-steps li {
    padding:22px 0 0
  }
  .process-steps h3 {
    font-size:18px;
    letter-spacing:-.03em
  }
  .process-steps p {
    font-size:11px;
    line-height:1.85;
    margin-top:12px
  }
  .step-number {
    font-size:32px
  }
  .step-caption {
    font-size:6px;
    letter-spacing:.06em
  }
  .materials-bar {
    grid-template-columns:1fr;
    gap:11px;
    margin-top:31px
  }
  .materials-bar>div>p {
    font-size:11px
  }
  .materials-content {
    font-size:11px
  }
  .price-card {
    padding:25px 22px
  }
  .price-card-header {
    gap:10px
  }
  .price-card-header .small-label {
    font-size:7px
  }
  .plan-badge {
    font-size:7px
  }
  .price-amount {
    font-size:79px
  }
  .plan-features li {
    font-size:11px;
    gap:9px
  }
  .recurring-price p {
    font-size:9px
  }
  .price-split {
    font-size:9px
  }
  .pricing-layout {
    gap:31px
  }
  .care-note {
    padding-left:19px;
    margin-block:29px
  }
  .pricing-copy .text-link {
    font-size:11px;
    gap:9px
  }
  .group-bridge {
    padding-block:36px
  }
  .group-bridge-inner {
    grid-template-columns:1fr;
    gap:25px
  }
  .group-bridge h2 {
    font-size:37px
  }
  .group-bridge p:not(.eyebrow) {
    font-size:12px
  }
  .faq-list summary {
    font-size:13px;
    gap:18px;
    padding-block:20px
  }
  .faq-list details p {
    font-size:12px;
    padding-right:0
  }
  .contact-section {
    padding-bottom:42px
  }
  .contact-panel {
    padding:29px 21px 21px;
    width:calc(100% - 24px);
    gap:29px
  }
  .contact-copy>.eyebrow {
    font-size:7px
  }
  .contact-copy h2 {
    font-size:39px;
    margin-top:21px
  }
  .contact-copy>p:not(.eyebrow) {
    font-size:12px
  }
  .contact-action {
    padding:23px 18px
  }
  .contact-email {
    font-size:21px
  }
  .contact-action h3 {
    font-size:23px
  }
  .email-template summary {
    font-size:9px;
    gap:9px
  }
  .site-footer {
    padding-top:29px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:21px;
    align-items:flex-start
  }
  .footer-top .brand-logo {
    width:137px
  }
  .footer-top>p {
    font-size:10px;
    text-align:right
  }
  .back-top {
    font-size:10px;
    width:100%
  }
  .footer-legal {
    gap:11px 20px;
    margin-top:24px;
    font-size:10px
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px;
    font-size:8px
  }
  .legal-header {
    padding-block:21px
  }
  .legal-header-actions {
    gap:13px;
    font-size:10px
  }
  .legal-header .brand-logo {
    width:130px
  }
  .legal-content {
    padding-top:42px
  }
  .legal-intro h1 {
    font-size:49px
  }
  .legal-content section h2 {
    font-size:20px
  }
  .legal-content section p,.legal-content li,.legal-summary p {
    font-size:13px
  }
  .legal-content ul {
    padding-left:18px
  }
  .legal-contact {
    padding:18px
  }
  .legal-contact .legal-contact-address {
    font-size:17px
  }
  .legal-summary {
    padding:21px
  }
}
@media(max-width:540px) {
  .desktop-preview>img {
    height:calc(100% - 21px)
  }
}
@media(max-width:370px) {
  .hero-actions {
    gap:15px
  }
  .hero-actions .button {
    padding-inline:14px;
    gap:14px
  }
  .hero-actions .text-link {
    font-size:10px
  }
  .preview-stage {
    height:275px
  }
  .phone-preview {
    width:95px
  }
  .studio-hint {
    display:none
  }
  .contact-email {
    font-size:18px
  }
  .contact-copy h2 {
    font-size:36px
  }
  .blueprint-spec strong {
    font-size:32px
  }
  .blueprint-spec p {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}