/* ---------------------------------------------------------------------
   Base
--------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--size-body);
  line-height:var(--leading-body);
  color:var(--ink);
  background:var(--paper);
  text-wrap:pretty;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter)}

/* ---------------------------------------------------------------------
   Navbar
--------------------------------------------------------------------- */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-4) var(--page-gutter);
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.navbar--inverse{background:transparent;border-bottom:1px solid rgba(255,255,255,.18)}
.navbar__items{display:flex;align-items:center;gap:var(--space-5)}
.navbar__link{
  text-decoration:none;
  font-family:var(--font-display);
  font-size:var(--size-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:2px solid transparent;
  padding-bottom:3px;
  transition:color var(--transition-fast) var(--easing-default);
}
.navbar--inverse .navbar__link{color:rgba(255,255,255,.82)}
.navbar__link.is-active{color:var(--ink);border-bottom-color:var(--yellow)}
.navbar--inverse .navbar__link.is-active{color:#fff;border-bottom-color:var(--yellow)}

/* ---------------------------------------------------------------------
   Wordmark
--------------------------------------------------------------------- */
.wordmark{text-decoration:none;font-family:var(--font-display);line-height:1;white-space:nowrap;letter-spacing:.06em;display:inline-flex;align-items:baseline;gap:.38em}
.wordmark__lisbon{font-weight:600;font-size:19px;color:var(--logo-teal)}
.wordmark__collective{font-weight:400;font-size:19px;color:var(--ink)}
.wordmark--inverse .wordmark__lisbon,.wordmark--inverse .wordmark__collective{color:#fff}
.wordmark--lg{gap:.42em}
.wordmark--lg .wordmark__lisbon,.wordmark--lg .wordmark__collective{font-size:26px}
.wordmark--sm{gap:.34em}
.wordmark--sm .wordmark__lisbon,.wordmark--sm .wordmark__collective{font-size:15px}

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hero{
  background:var(--field-blue);color:#fff;
  padding:88px 0 76px;position:relative;overflow:hidden;
}
.hero__diagonals{position:absolute;inset:-30% -10%;background:var(--diagonals);opacity:.5}
.hero__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter)}
.hero__eyebrow{
  display:inline-block;background:var(--yellow);color:var(--ink);
  padding:5px 10px;font-family:var(--font-display);font-size:var(--size-label);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.hero__title{
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:var(--size-display);line-height:var(--leading-display);letter-spacing:-.01em;
  margin:var(--space-4) 0;max-width:var(--measure-heading);color:#fff;
}
.hero__lede{
  font-size:var(--size-body-lg);line-height:var(--leading-body);
  color:var(--text-on-field);max-width:var(--measure-lede);margin:0 0 var(--space-5);
}
.hero__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------------------
   Section / FieldSection
--------------------------------------------------------------------- */
.section{background:transparent;border-top:1px solid var(--hairline);padding:var(--section-block) 0}
.section--alt{background:var(--surface-alt)}
.section--no-rule{border-top:none}
.section__eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);
  margin-bottom:var(--space-3);
}
.section__eyebrow-rule{flex:1;height:2px;background:var(--yellow)}
.section__title{
  font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--size-h2);line-height:var(--leading-heading);color:var(--ink);
  margin:0 0 var(--space-5);max-width:var(--measure-heading);
}

.field-section{background:var(--field-blue);color:#fff;padding:var(--space-7) 0}
.field-section__eyebrow{
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label-on-field);
  margin-bottom:var(--space-3);
}
.field-section__title{
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:var(--size-h2);line-height:var(--leading-heading);
  margin:0 0 var(--space-5);max-width:var(--measure-heading);
}

/* Generic two-column layout used throughout sections */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}
.measure-body{max-width:var(--measure-body)}
.measure-lede{max-width:var(--measure-lede)}
.lede{font-size:var(--size-body-lg);line-height:var(--leading-body);margin:0}
.muted{color:var(--muted)}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13px;font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-lockup);text-transform:uppercase;
  padding:var(--control-padding);border-radius:var(--radius-none);border:none;
  cursor:pointer;text-decoration:none;
  transition:background var(--transition-fast) var(--easing-default),
             color var(--transition-fast) var(--easing-default),
             border-color var(--transition-fast) var(--easing-default);
}
.btn--sm{font-size:12px;padding:var(--control-padding-sm)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--link-blue);color:#fff}
.btn--field{background:#fff;color:var(--link-blue)}
.btn--field:hover{background:var(--paper);color:var(--link-blue)}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.btn--outline:hover{border-color:var(--ink);background:rgba(18,51,63,.05)}
.btn--outline-inverse{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn--outline-inverse:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--ghost{background:transparent;color:var(--link-blue);padding:13px 2px}
.btn--ghost:hover{color:var(--text-link-hover)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------------------
   Links, rules, tags, eyebrow
--------------------------------------------------------------------- */
.link{
  color:var(--text-link);text-decoration:none;
  border-bottom:1px solid var(--text-label);
  transition:color var(--transition-fast) var(--easing-default),border-color var(--transition-fast) var(--easing-default);
}
.link:hover{color:var(--text-link-hover);border-bottom-color:var(--accent-rule)}
.link--inverse{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.link--inverse:hover{color:#fff;border-bottom-color:var(--yellow)}

.rule{height:var(--rule-weight);background:var(--hairline)}
.rule--accent{height:var(--accent-rule-weight);background:var(--accent-rule)}
.rule--inverse{background:var(--hairline-on-field)}

.tag{
  display:inline-block;padding:5px 10px;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.tag--yellow{background:var(--yellow);color:var(--ink)}
.tag--teal{background:var(--text-label);color:#fff}
.tag--blue{background:var(--field-blue);color:#fff}
.tag--quiet{background:var(--surface-alt);color:var(--ink)}

.label-eyebrow{
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);
}
.label-eyebrow--on-field{color:var(--text-label-on-field)}

/* ---------------------------------------------------------------------
   Icon / IconButton
--------------------------------------------------------------------- */
.icon{display:inline-flex;line-height:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:none;background:transparent;
  color:var(--muted);cursor:pointer;text-decoration:none;
  transition:color var(--transition-fast) var(--easing-default);
}
.icon-btn:hover{color:var(--teal)}
.icon-btn--inverse{color:rgba(255,255,255,.8)}
.icon-btn--inverse:hover{color:#fff}
.icon-btn--linkedin:hover{color:var(--social-linkedin)}
.icon-btn--mastodon:hover{color:var(--social-mastodon)}
.icon-btn--github:hover{color:var(--social-github)}
.icon-btn--bluesky:hover{color:var(--social-bluesky)}

/* ---------------------------------------------------------------------
   Service item / Article teaser / Profile card / Photo panel
--------------------------------------------------------------------- */
.service-item{padding-top:var(--space-3);border-top:1px solid var(--hairline)}
.service-item--inverse{border-top-color:var(--hairline-on-field)}
.service-item__icon{margin-bottom:var(--space-2);color:var(--teal)}
.service-item--inverse .service-item__icon{color:#fff}
.service-item__title{
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);
}
.service-item--inverse .service-item__title{color:var(--text-label-on-field)}
.service-item__body{margin:var(--space-2) 0 0;font-size:var(--size-small);line-height:var(--leading-tight);color:var(--muted)}
.service-item--inverse .service-item__body{color:var(--text-on-field)}

.article-teaser{padding-top:var(--space-3);border-top:1px solid var(--hairline)}
.article-teaser__kicker{
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);margin-bottom:var(--space-2);
}
.article-teaser__title{
  font-family:var(--font-display);font-weight:var(--weight-regular);font-size:var(--size-h4);
  line-height:var(--leading-title);color:var(--ink);margin:0 0 var(--space-2);
}
.article-teaser__summary{margin:0 0 var(--space-3);font-size:var(--size-small);line-height:var(--leading-body);color:var(--muted);max-width:var(--measure-body)}
.article-teaser__meta{display:flex;align-items:baseline;gap:var(--space-3)}
.article-teaser__date{font-size:var(--size-small);color:var(--muted)}

.profile-card{display:grid;grid-template-columns:1fr;gap:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--hairline)}
.profile-card--photo{grid-template-columns:88px 1fr}
.profile-card__photo{width:88px;height:88px;object-fit:contain;display:block}
.profile-card__name{font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-medium);color:var(--ink)}
.profile-card__role{
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);margin-top:var(--space-1);
}
.profile-card__body{margin:var(--space-2) 0 0;font-size:var(--size-small);line-height:var(--leading-body);color:var(--muted);max-width:var(--measure-body)}
.profile-card__links{display:flex;gap:var(--space-2);margin-top:var(--space-2);margin-left:-6px}

.photo-panel{margin:var(--space-6) 0 0;position:relative;overflow:hidden;background:var(--surface-alt)}
.photo-panel--bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.photo-panel__frame{position:relative}
.photo-panel__frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-panel__placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:center;padding:var(--space-4);
}
.photo-panel__scrim{position:absolute;inset:0;background:var(--shadow-photo-scrim)}
.photo-panel__caption{max-width:var(--container-max);margin:var(--space-2) auto 0;padding:0 var(--page-gutter);font-size:var(--size-small);color:var(--muted)}

/* ---------------------------------------------------------------------
   Pricing card
--------------------------------------------------------------------- */
.pricing-card{
  position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--white);border:1px solid var(--hairline);padding:var(--space-5);
}
.pricing-card--featured{border-color:var(--field-blue);box-shadow:var(--shadow-sheet)}
.pricing-card__badge{
  position:absolute;top:0;right:var(--space-5);transform:translateY(-50%);
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;padding:5px 10px;
}
.pricing-card__title{
  font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-medium);color:var(--ink);
}
.pricing-card__price{font-family:var(--font-display);font-size:var(--size-h2);font-weight:var(--weight-medium);color:var(--ink)}
.pricing-card__period{font-size:var(--size-small);font-weight:var(--weight-regular);color:var(--muted);margin-left:4px}
.pricing-card__note{font-size:var(--size-small);color:var(--muted)}
.pricing-card__body{flex:1;font-size:var(--size-small);line-height:var(--leading-body);color:var(--muted)}
.pricing-card__body p:last-child{margin-bottom:0}
.pricing-card__body ul{margin:0;padding-left:1.1em}
.pricing-card__body li{margin-bottom:var(--space-2)}
.pricing-card__body li:last-child{margin-bottom:0}
.pricing-card__body strong{color:var(--ink)}
.pricing-card .btn{align-self:flex-start;margin-top:var(--space-2)}

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
.field{margin-bottom:var(--space-4)}
.field__label{
  display:block;margin-bottom:var(--space-2);font-family:var(--font-display);font-size:var(--size-label);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);
}
.field__label--on-field{color:var(--text-label-on-field)}
.field__control{
  display:block;width:100%;background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);padding:var(--input-padding);outline:none;
  font-family:var(--font-text);font-size:var(--size-body);color:var(--ink);
  transition:border-color var(--transition-fast) var(--easing-default);
}
.field__control:focus{border-color:var(--text-label)}
.field--on-field .field__control{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.field--on-field .field__control:focus{border-color:var(--yellow)}
textarea.field__control{resize:vertical}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.footer{background:var(--field-blue);color:var(--text-on-field);padding:var(--space-7) 0 var(--space-5)}
.footer__brand{margin-bottom:var(--space-6)}
.footer__columns{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.footer__social{display:flex;gap:var(--space-1);margin-top:var(--space-3);margin-left:-6px}
.footer__head{
  margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--size-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label-on-field);
}
.footer__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.footer__links a{color:var(--text-on-field);text-decoration:none;font-size:var(--size-small)}
.footer__links a:hover{color:#fff}
.footer__bottom{
  max-width:var(--container-max);margin:var(--space-5) auto 0;padding:var(--space-4) var(--page-gutter) 0;
  border-top:1px solid var(--hairline-on-field);font-size:var(--size-small);color:rgba(255,255,255,.7);
}

@media (max-width:760px){
  .navbar,.hero__inner,.section .wrap,.field-section .wrap,.footer__bottom{padding-left:var(--space-4);padding-right:var(--space-4)}
  .footer__columns{grid-template-columns:1fr}
}