:root{--paper:#f6f5ef;--ink:#173e35;--muted:#64746b;--line:#d9ded5;--lime:#c7e5a1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #78994e;outline-offset:6px}
[hidden]{display:none!important}
.wrap{max-width:1280px;margin:auto;padding-left:48px;padding-right:48px}
.skip{position:fixed;top:-100px;left:16px;background:var(--ink);color:white;padding:12px;z-index:10}
.skip:focus{top:16px}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:30px;padding-bottom:30px}
.brand{font-size:34px;letter-spacing:-2px;font-weight:750}
.brand span{color:#7f9e57}
nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}
nav a:hover,.text-link:hover{color:#78994e}
.nav-contact{padding:12px 18px;border:1px solid var(--line);border-radius:4px}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;padding-top:54px;padding-bottom:64px}
.eyebrow{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:650;line-height:1.8;margin:0 0 26px}
.dot{display:inline-block;width:7px;height:7px;background:#7f9e57;border-radius:50%;margin-right:8px}
h1{font-size:clamp(48px,5.7vw,76px);font-weight:650;line-height:1.06;letter-spacing:-3.8px;margin:0 0 26px}
h1 span{color:#788b75}
.intro{font-size:18px;line-height:1.8;color:var(--muted);max-width:470px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.button{display:inline-block;background:var(--ink);color:white;padding:17px 21px;border-radius:4px;font-size:13px;font-weight:650;transition:transform .2s}
.button:hover{transform:translateY(-2px)}
.text-link{font-size:13px;font-weight:600}
.small{font-size:11px;color:var(--muted);margin-top:24px}
.art{position:relative;min-height:430px;display:grid;place-items:center;background-color:var(--ink);background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:43px 43px;border-radius:5px;overflow:hidden}
.letter{font-family:Georgia,serif;font-style:italic;font-size:340px;line-height:1;color:var(--lime);transform:translate(-12px,-20px)}
.orbit{position:absolute;width:330px;height:330px;border:1px solid #c7e5a140;border-radius:50%}
.one{transform:rotate(35deg) scaleX(.65)}
.two{transform:rotate(-35deg) scaleX(.65)}
.art-label{position:absolute;right:24px;top:24px;font-size:10px;letter-spacing:2px;color:#b6c9bc}
.art-caption{position:absolute;bottom:26px;left:26px;color:#dce9d5;font-size:12px;line-height:1.7}
.stack{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.stack>span{font-size:11px;color:var(--muted)}
.stack strong{font-weight:600}
.section{padding-top:80px;padding-bottom:80px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}
h2{font-size:clamp(32px,3.5vw,44px);line-height:1.15;letter-spacing:-1.6px;font-weight:600;margin:0}
.section-heading>p{max-width:370px;color:var(--muted);font-size:15px;line-height:1.85;margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{border:1px solid var(--line);border-radius:5px;padding:30px;background:#ffffff30}
.number{font-size:11px;color:var(--muted)}
h3{font-size:20px;letter-spacing:-.5px;font-weight:600;margin:30px 0 14px}
.cards p,.steps p{font-size:14px;line-height:1.85;color:var(--muted)}
.tag{display:block;border-top:1px solid var(--line);padding-top:18px;margin-top:26px;font-size:10px;letter-spacing:.8px;text-transform:uppercase}
.approach{border-top:1px solid var(--line);padding-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.approach-copy{max-width:410px;color:var(--muted);font-size:15px;line-height:1.85;margin-top:24px}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:0}
.steps li>span{font-size:11px;color:var(--muted);padding-top:4px}
.steps h3{margin:0 0 10px;font-size:18px}
.steps p{margin:0}
.contact{background:var(--ink);color:var(--paper);padding:50px;border-radius:5px;display:grid;grid-template-columns:1.4fr 1fr;gap:50px}
.contact .eyebrow{color:var(--lime)}
.contact p{font-size:15px;line-height:1.85;color:#c3d0c6;max-width:440px}
.contact-details{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.contact-details .eyebrow{margin-bottom:18px}
.light{background:var(--lime);color:var(--ink)}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:40px;padding-bottom:30px}
.footer .brand{font-size:27px}
.footer p,.footer>span{font-size:11px;color:var(--muted)}
@media(max-width:950px){.hero{gap:30px}.art{min-height:360px}.letter{font-size:280px}.cards article{padding:22px}.approach{gap:40px}.contact{padding:36px;gap:30px}}
@media(max-width:700px){.wrap{padding-left:24px;padding-right:24px}.header{padding-top:22px;padding-bottom:22px}nav{gap:16px}nav>a:first-child{display:none}.nav-contact{padding:10px}.hero{grid-template-columns:1fr;padding-top:32px;padding-bottom:40px;gap:32px}h1{letter-spacing:-2.5px}.intro{font-size:16px}.art{min-height:310px}.letter{font-size:265px}.orbit{width:280px;height:280px}.stack{justify-content:flex-start;font-size:12px}.stack>span{flex-basis:100%}.section{padding-top:52px;padding-bottom:52px}.section-heading{display:block}.section-heading>p{margin-top:22px}.cards{grid-template-columns:1fr}.cards article{padding:26px}.approach{grid-template-columns:1fr;gap:30px;padding-top:40px}.contact{grid-template-columns:1fr;padding:30px 24px;gap:22px}.footer{flex-wrap:wrap}.footer p{order:3;flex-basis:100%;margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}

/* Aversa coastal refresh */
:root {
  --paper: #fffaf0;
  --ink: #124c63;
  --muted: #506e7a;
  --line: #cce3e7;
  --lime: #ffe09a;
}
body {
  background: linear-gradient(180deg, #edfaff 0%, #fffaf0 48%, #f2fbfa 100%);
}
.brand span { color: #e77d59; }
.dot { background: #168a97; }
h1 span { color: #168a97; }
nav a:hover, .text-link:hover { color: #137783; }
.nav-contact {
  background: #ffffff80;
  border-color: #acd7df;
  border-radius: 24px;
}
.button {
  background: #126a80;
  border-radius: 28px;
  box-shadow: 0 6px 18px #126a8018;
}
.button:hover { background: #0c576b; }
a:focus-visible { outline-color: #147e91; }
.art {
  isolation: isolate;
  min-height: 430px;
  border-radius: 120px 120px 24px 24px;
  background: linear-gradient(
    180deg,
    #bceaff 0%,
    #e3f7ff 43%,
    #70cbd7 43%,
    #2397ae 68%,
    #087a96 78%,
    #f7d9a0 78%,
    #fff0cf 100%
  );
  box-shadow: 0 18px 45px #12738b16;
}
.art::before {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  top: 38px;
  right: 46px;
  border-radius: 50%;
  background: #ffe39b;
  box-shadow: 0 0 0 14px #fff3c64d;
}
.art::after {
  content: "";
  position: absolute;
  left: -15%;
  bottom: 18%;
  width: 130%;
  height: 55px;
  border-radius: 50%;
  background: #e3faffb3;
  transform: rotate(-6deg);
  z-index: -1;
}
.letter {
  color: #fffdf1;
  text-shadow: 0 8px 20px #075c7626;
  transform: translate(-12px, -12px);
}
.orbit { border-color: #ffffff66; }
.art-label { color: #205e75; }
.art-caption { color: #20536a; font-weight: 600; }
.stack { border-color: #bedde3; }
.stack strong { color: #126a80; }
.cards article {
  background: #ffffffb8;
  border-color: #d1e7e8;
  border-radius: 16px;
  box-shadow: 0 8px 24px #24677a06;
}
.cards article:nth-child(1) { border-top: 4px solid #45b5c3; }
.cards article:nth-child(2) { border-top: 4px solid #edb95c; }
.cards article:nth-child(3) { border-top: 4px solid #ef9679; }
.number { color: #168a97; }
.tag { color: #397180; }
.contact {
  background: linear-gradient(120deg, #126a80, #178b99);
  border-radius: 24px;
  box-shadow: 0 14px 35px #126a8012;
}
.contact .eyebrow { color: #ffe6a8; }
.contact p { color: #e4f6f8; }
.light { background: #ffe09a; color: #174d60; }
.light:hover { background: #ffedbf; }
.skip { background: #126a80; }
@media (max-width: 950px) {
  .art { min-height: 360px; }
}
@media (max-width: 700px) {
  .art { min-height: 310px; border-radius: 90px 90px 20px 20px; }
  .art::before { width: 64px; height: 64px; top: 28px; right: 36px; }
  .contact { border-radius: 18px; }
}

/* Hero lightbulb update */
.art-label, .art-caption { display: none; }
.art .letter.bulb {
  position: relative;
  display: block;
  width: 146px;
  height: 170px;
  font-size: 0;
  border: 5px solid #fffdf1;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(145deg, #fff8cf, #ffe09a);
  box-shadow: 0 0 55px #fff2b980, inset 10px 8px 22px #ffffff80;
  transform: translateY(-24px);
}
.art .letter.bulb::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 56px;
  left: 50%;
  bottom: -49px;
  transform: translateX(-50%);
  border: 4px solid #fffdf1;
  border-radius: 4px 4px 18px 18px;
  background: repeating-linear-gradient(
    180deg,
    #367c90 0,
    #367c90 8px,
    #d5edf0 8px,
    #d5edf0 12px
  );
}
.art .letter.bulb::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 65px;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  border: 4px solid #d39b43;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
@media (max-width: 700px) {
  .art .letter.bulb { transform: translateY(-20px) scale(.85); }
}

/* Coastal code illustration */
.art .orbit { display: none; }
.coastal-code {
  position: relative;
  display: grid;
  place-items: center;
  width: 280px;
  height: 250px;
  transform: translateY(-5px);
}
.code-symbol {
  position: relative;
  z-index: 2;
  font-family: Consolas, "Courier New", monospace;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -12px;
  padding-right: 12px;
  color: #fffdf1;
  text-shadow: 0 5px 0 #126a8020, 0 12px 30px #126a8026;
  transform: translateY(-26px);
}
.code-wave {
  position: absolute;
  bottom: 20px;
  left: 10px;
  width: 260px;
  height: 95px;
  overflow: hidden;
  border-radius: 8px 8px 55% 55%;
  background: linear-gradient(145deg, #77e0e5, #1599b2 65%, #087a96);
  box-shadow: 0 12px 22px #075c761c;
  transform: rotate(-7deg);
}
.code-wave::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 105px;
  top: -70px;
  left: -18px;
  border-radius: 50%;
  background: #dff8ff;
  box-shadow: 8px 8px 0 #fffdf1;
  transform: rotate(12deg);
}
.code-wave::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 75px;
  right: -35px;
  top: 15px;
  border-top: 5px solid #e6ffff;
  border-radius: 50%;
  transform: rotate(-18deg);
}
@media (max-width: 700px) {
  .coastal-code { transform: translateY(0) scale(.85); }
}

/* Coastal server illustration */
.art .orbit { display: none; }
.server-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 220px;
  transform: translateY(-5px);
  filter: drop-shadow(0 16px 18px #075c7626);
}
.server-tray {
  position: relative;
  display: block;
  height: 64px;
  border: 3px solid #fffdf1;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #e2f5f7);
  box-shadow: inset 0 -5px 0 #bddfe64d;
}
.server-tray::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #1599a7;
  box-shadow: 22px 0 0 #f0bd60;
}
.server-tray::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 52px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    #44889a 0,
    #44889a 4px,
    transparent 4px,
    transparent 9px
  );
}
@media (max-width: 700px) {
  .server-icon { transform: translateY(0) scale(.85); }
}

/* Monitor and server illustration */
.developer-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 290px;
  transform: translateY(4px);
  filter: drop-shadow(0 16px 18px #075c7626);
}
.dev-monitor {
  width: 290px;
  padding: 10px 10px 16px;
  background: linear-gradient(135deg, #ffffff, #d9eef2);
  border: 2px solid #fffdf1;
  border-radius: 14px;
}
.dev-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 172px;
  padding: 18px 14px;
  overflow: hidden;
  background: #123e50;
  border-radius: 6px;
  color: #e7f6fb;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
}
.dev-screen b { color: #8cdbef; font-weight: 400; }
.dev-screen em { color: #ffe09a; font-style: normal; }
.dev-screen .code-comment { color: #9ac5b1; }
.dev-screen .code-indent { padding-left: 16px; }
.monitor-neck {
  width: 32px;
  height: 24px;
  background: linear-gradient(90deg, #bddce4, #f3fbfc);
}
.monitor-foot {
  width: 104px;
  height: 9px;
  margin-bottom: 14px;
  border-radius: 8px 8px 3px 3px;
  background: #f0fafb;
}
.developer-icon > .server-tray {
  width: 246px;
  height: 54px;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .developer-icon { transform: translateY(0) scale(.85); }
}

/* MVC enquiry form */
.enquiry-form { min-width: 0; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.form-field label span { font-weight: 400; }
.form-field input, .form-field textarea {
  display: block; width: 100%; padding: 12px;
  border: 2px solid transparent; border-radius: 7px;
  background: #fffdf6; color: #173e35; font: inherit; font-size: 15px;
}
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  outline: 3px solid #ffe09a; outline-offset: 2px;
}
.enquiry-form .form-note { font-size: 12px; line-height: 1.6; }
.enquiry-form button { border: 0; cursor: pointer; font-family: inherit; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.validation-summary-valid { display: none; }
.validation-summary-errors {
  background: #fff0df; color: #6e2921; padding: 12px 18px;
  border-radius: 7px; margin-bottom: 18px; font-size: 14px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.input-validation-error { border-color: #b34535 !important; }

/* Coastal icons overlapping the card tops */
.cards {
  gap: 26px;
  row-gap: 58px;
  margin-top: 62px;
}
.cards article,
.cards article:nth-child(3n + 2),
.cards article:nth-child(3n) {
  position: relative;
  transform: none;
  overflow: visible;
  padding-top: 48px;
}
.cards article h3 {
  margin-top: 0;
}
.coastal-card-icon {
  position: absolute;
  top: -34px;
  left: 26px;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 3px solid #fffaf0;
  border-radius: 50%;
  background: #e0f5f7;
  color: #126a80;
  box-shadow: 0 5px 14px #126a8012;
}
.coastal-card-icon svg {
  width: 46px;
  height: 46px;
}
.cards article:nth-child(3n + 2) .coastal-card-icon {
  background: #fff0c9;
  color: #92651c;
}
.cards article:nth-child(3n) .coastal-card-icon {
  background: #ffe6db;
  color: #ad6145;
}

/* Original Aversa logo */
.brand.brand-image {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: normal;
}
.brand-image img {
  display: block;
  width: auto;
  height: 50px;
  max-width: 220px;
  object-fit: contain;
}
.footer .brand-image img {
  height: 36px;
  max-width: 180px;
}
@media (max-width: 700px) {
  .header .brand-image img {
    height: 38px;
    max-width: 160px;
  }
}

/* Darker Aversa logo */
.brand-image img {
  filter: brightness(.65) contrast(1.15);
}