:root {
  --sand: #ebe5d8;
  --sand-deep: #ddd4c3;
  --ink: #252a28;
  --salt: #5c6662;
  --mint: #7fbf9b;
  --sky: #7eb6cf;
  --sun: #d8b75d;
  --leaf: #73a77b;
  --stone: #8b8e89;
  --snow: #faf9f5;
  --line: rgba(37, 42, 40, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 7%, rgba(126, 182, 207, 0.16), transparent 31rem),
    radial-gradient(circle at 7% 27%, rgba(127, 191, 155, 0.14), transparent 29rem),
    var(--sand);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; }
.wrap { width: min(1120px, calc(100% - 3rem)); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.brand img { border-radius: 12px; object-fit: contain; }
nav { display: flex; gap: 1.5rem; color: var(--salt); font-size: .92rem; }
nav a { text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--ink); text-decoration: underline; }

.hero { min-height: 760px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); align-items: center; gap: 4rem; padding-block: 5.5rem 8rem; }
.eyebrow { margin: 0 0 1rem; color: var(--salt); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 1.5rem; font-size: clamp(3.5rem, 7.7vw, 6.7rem); font-weight: 650; letter-spacing: -.068em; line-height: .92; }
h1 em { color: var(--leaf); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h2 { max-width: 850px; margin-bottom: 1.5rem; font-size: clamp(2.5rem, 5.3vw, 4.7rem); font-weight: 620; letter-spacing: -.055em; line-height: .98; }
h3 { margin-bottom: .6rem; letter-spacing: -.035em; }
h4 { margin-bottom: .8rem; font-size: 1.25rem; letter-spacing: -.025em; }
.lede, .section-intro { max-width: 720px; color: var(--salt); font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .8rem 1.1rem; font-size: .92rem; font-weight: 650; text-decoration: none; }
.button.primary { background: var(--ink); color: var(--snow); }
.button.quiet { background: rgba(250, 249, 245, .48); }
.button:hover, .button:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,42,40,.1); }

.product-shot { position: relative; width: min(100%, 390px); margin: 0 auto; }
.shot-halo { position: absolute; inset: 8% -25% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(126,182,207,.35), rgba(127,191,155,.14) 45%, transparent 72%); filter: blur(12px); }
.product-shot > img { position: relative; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.48); border-radius: 30px; box-shadow: 0 28px 70px rgba(24,31,43,.24), 0 5px 18px rgba(37,42,40,.15); }
.product-shot figcaption { position: relative; margin-top: .85rem; color: var(--salt); font-size: .78rem; text-align: center; }

.section { padding-block: 8rem; }
.section-intro { margin-bottom: 4.25rem; }
.project-feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: 30px; background: rgba(250,249,245,.55); box-shadow: 0 22px 65px rgba(37,42,40,.08); }
.project-identity { display: flex; align-items: center; gap: 1.4rem; }
.project-identity img { width: 94px; height: 94px; border-radius: 24px; box-shadow: 0 14px 30px rgba(37,42,40,.14); }
.project-identity h3 { margin: 0; font-size: 2.25rem; }
.status { margin: 0 0 .45rem; color: var(--salt); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.status span { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(115,167,123,.14); }
.project-story h4 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
.project-story p, .project-card > div > p, .future-copy > p { color: var(--salt); }
.project-story a, .project-card a, .future-copy a { font-weight: 700; }

.current-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--line); }
.project-card { min-height: 490px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 4vw, 3.4rem); background: rgba(250,249,245,.58); }
.project-card.dash { background: linear-gradient(145deg, rgba(126,182,207,.15), rgba(250,249,245,.62)); }
.project-card.serena { background: linear-gradient(145deg, rgba(153,128,167,.13), rgba(250,249,245,.62)); }
.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.project-card-head img { width: 105px; height: 105px; object-fit: contain; }
.project-label { margin-bottom: .8rem; color: var(--salt); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-card h3 { max-width: 420px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1; }
.project-card > div > p:not(.project-label) { max-width: 470px; }

.philosophy-band { padding-block: 7rem; background: var(--ink); color: var(--snow); }
.philosophy-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5rem; align-items: end; }
.philosophy-band .eyebrow, .philosophy-layout > p { color: rgba(250,249,245,.7); }
.philosophy-layout h2 { margin-bottom: 0; }
.philosophy-layout > p { margin-bottom: .5rem; font-size: 1.1rem; }

.future-grid { margin-top: 4.25rem; border-top: 1px solid var(--line); }
.future-project { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: 4.5rem; border-bottom: 1px solid var(--line); }
.future-art { position: relative; min-height: 290px; display: grid; place-items: center; overflow: hidden; border-radius: 28px; }
.future-project.fare .future-art { background: radial-gradient(circle at 45% 45%, rgba(216,183,93,.33), transparent 52%), rgba(250,249,245,.48); }
.future-project.os .future-art { background: radial-gradient(circle at 45% 45%, rgba(126,182,207,.3), transparent 52%), rgba(250,249,245,.48); }
.future-art img { position: relative; z-index: 1; width: min(62%, 180px); max-height: 180px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(37,42,40,.16)); }
.future-index { position: absolute; top: .7rem; right: 1.2rem; color: rgba(37,42,40,.12); font-size: 5rem; font-weight: 700; line-height: 1; }
.future-status, .coming-soon { color: var(--salt); font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.future-copy h3 { margin-bottom: .25rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.future-copy h4 { max-width: 560px; margin-block: 1.3rem 1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.future-copy > p:not(.future-status) { max-width: 580px; }
.coming-soon { display: inline-block; margin-top: .5rem; }

.principles { padding-block: 2rem 8rem; }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.principle-grid article { padding: 2.2rem 1.6rem 1rem 0; }
.principle-grid article + article { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.principle-grid span { color: var(--salt); font-size: .74rem; font-weight: 700; }
.principle-grid h3 { margin-top: 3.5rem; font-size: 1.2rem; }
.principle-grid p { color: var(--salt); font-size: .94rem; }

.closing { padding-block: 8rem; color: var(--snow); text-align: center; background: linear-gradient(150deg, #26302d, #1d2523); }
.closing img { margin: 0 auto 1.5rem; border-radius: 19px; }
.closing .eyebrow { color: rgba(250,249,245,.65); }
.closing h2 { margin-inline: auto; font-size: clamp(2.7rem, 6vw, 5.4rem); }
.button.light { margin-top: 1.1rem; background: var(--snow); color: var(--ink); }

.site-footer { padding-block: 3rem 4rem; border-top: 1px solid var(--line); color: var(--salt); font-size: .88rem; }
.site-footer .brand { margin-bottom: 1.2rem; }
.site-footer p { margin-bottom: .5rem; }
.disclosure { font-size: .82rem; }

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 5rem; }
  .product-shot { width: min(100%, 360px); }
  .project-feature, .philosophy-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .current-grid { grid-template-columns: 1fr; }
  .future-project { grid-template-columns: .85fr 1.15fr; gap: 2rem; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .principle-grid article:nth-child(3) { border-left: 0; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 2rem, 1120px); }
  .site-header { align-items: flex-start; }
  nav { flex-direction: column; gap: .25rem; text-align: right; }
  h1 { font-size: clamp(3.15rem, 16vw, 5rem); }
  .hero, .section, .philosophy-band, .closing { padding-block: 5rem; }
  .project-feature { padding: 1.5rem; }
  .project-identity { align-items: flex-start; }
  .project-identity img { width: 72px; height: 72px; border-radius: 19px; }
  .project-card { min-height: 430px; padding: 1.6rem; }
  .future-project { grid-template-columns: 1fr; padding-block: 3.5rem; }
  .future-art { min-height: 250px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article, .principle-grid article + article { padding: 1.8rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .principle-grid h3 { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover, .button:focus-visible { transform: none; }
}

/* Approved Intekoa v2.2 lockup: retain the authored aspect ratio and edges. */
img.intekoa-lockup { display: block; width: 224px; max-width: 100%; height: auto; border-radius: 0; object-fit: contain; }
@media (max-width: 620px) {
  .site-header img.intekoa-lockup { width: 160px; }
}