/* 2026-08-11: page-wide density pass. Every area must carry information, not reserve empty space. */
:root{
  --ink:#484640;
  --ink-soft:#66615a;
  --muted:#827c73;
  --line:#d7d1c8;
  --night:#302f2c;
}

.section{padding:36px 0}
.section-label{justify-content:center;text-align:center;margin-bottom:22px}

/* Hero: two real headline lines, a filled CTA row and a content-led rail. */
.hero{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.22fr) minmax(0,.8fr);
  gap:26px;
  align-items:start;
  padding:36px 0 32px;
}
.hero-copy{min-height:0;padding-top:0}
.hero-copy h1{max-width:none;margin:0 0 18px;font-size:clamp(52px,4.15vw,76px);line-height:.95;text-wrap:balance}
.hero-copy > p:not(.hero-statement){max-width:none;margin:0 0 22px;font-size:18px;line-height:1.48}
.hero-action{display:grid;grid-template-columns:136px minmax(0,1fr);gap:18px;align-items:stretch}
.hero-action .button{width:136px;min-height:136px}
.hero-action-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:7px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-action-copy strong{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.hero-action-copy p{max-width:none!important;margin:0!important;color:var(--ink-soft);font-size:15px!important;line-height:1.45!important}
.hero-action-copy span{color:var(--orange-dark);font-size:12px;font-weight:700;letter-spacing:.03em}
.hero-statement-break{display:block!important;height:10px!important;margin:0!important;line-height:0!important}
.hero-statement{display:block!important;max-width:none;margin:0!important;padding-left:16px;border-left:1px solid var(--ink);color:var(--ink-soft);font-size:12px;line-height:1.36;text-transform:none;white-space:nowrap}
.hero-price{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;max-width:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.hero-price-label{display:flex;justify-content:space-between;gap:12px;color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hero-price strong{display:block;color:var(--orange);font:500 clamp(34px,2.35vw,46px)/.96 Manrope,sans-serif;letter-spacing:-.045em;white-space:nowrap}
.rail-price-utility{display:grid;gap:7px;margin-top:0;padding-top:16px;border-top:1px solid var(--line)}
.rail-price-utility small{display:block;color:var(--muted);font-size:10px;line-height:1.28;text-transform:uppercase}
.rail-price-utility a{display:inline-flex;gap:9px;align-items:center;width:max-content;color:var(--orange-dark);font-size:12px;font-weight:700;letter-spacing:.05em;text-decoration:none;text-transform:uppercase}
.rail-price-utility a:hover,.rail-price-utility a:focus-visible{color:var(--orange);text-decoration:underline;text-underline-offset:4px}
.hero-photo{display:grid;height:clamp(540px,38vw,640px);aspect-ratio:auto;place-items:center;justify-self:center;align-self:start}
.hero-photo img{height:100%;object-fit:cover;object-position:center}
.hero-rail{gap:22px;padding-top:3px}
.rail-title{margin-bottom:11px;font-size:12px}
.rail-list a{grid-template-columns:36px 1fr;padding:10px 0;font-size:18px;line-height:1.2}
.rail-list b{font-size:14px;font-variant-numeric:tabular-nums}
.rail-projects{margin-top:0;padding-top:15px}
.rail-project{padding:9px 0;font-size:14px;line-height:1.22}
.rail-project small{font-size:10px;line-height:1.25}
.rail-price{margin-top:0;padding-top:17px}
.rail-price-label{font-size:11px}
.rail-price strong{margin-top:11px;color:var(--orange);font:500 clamp(34px,2.35vw,46px)/.96 Manrope,sans-serif;letter-spacing:-.045em}
.rail-price small{font-size:10px;line-height:1.28}

/* Side-by-side blocks remain filled even when image and copy have different natural heights. */
.editorial{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);column-gap:34px;row-gap:20px}
.editorial-title{grid-area:unset;grid-column:1 / -1;grid-row:1;max-width:none;margin:0;overflow:visible;text-align:center;text-wrap:nowrap;white-space:nowrap}
.editorial-prose{grid-area:unset;grid-column:1 / -1;grid-row:2;max-width:1080px;margin:0 auto}
.editorial-image{grid-area:unset;grid-column:1;grid-row:3}
.editorial-conclusion{grid-area:unset;grid-column:2;grid-row:3}
.editorial-prose p{font-size:17px;line-height:1.58}
.editorial-image{display:flex;align-self:stretch}
.editorial-image img{min-height:100%;aspect-ratio:auto;object-fit:cover}
.editorial-conclusion{display:flex;min-height:0;max-width:none;flex-direction:column;justify-content:center;gap:18px;padding:28px 30px;border-left:3px solid var(--orange);background:var(--paper-deep);color:var(--ink-soft)}
.editorial-conclusion p{margin:0;font-size:17px;line-height:1.56}
.editorial-conclusion ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.editorial-conclusion li::before{content:'↗';margin-right:10px;color:var(--orange);font-family:Manrope,sans-serif}

/* The service and source-copy blocks get content density instead of decorative height. */
.service-board{grid-template-columns:minmax(0,1fr) minmax(270px,300px);gap:32px}
.service-board h2{margin-bottom:16px;font-size:clamp(34px,2.7vw,48px);line-height:1}
.service-line{grid-template-columns:48px minmax(150px,1.02fr) minmax(180px,1.18fr) 30px;min-height:74px}
.service-line strong{font-size:18px}
.service-line span{font-size:15px;line-height:1.36}
.service-poster{justify-content:flex-start;gap:18px;min-height:0;padding:22px}
.service-poster strong{font-size:clamp(44px,3.6vw,62px);line-height:.72}
.service-poster img{width:100%;max-height:104px;margin-top:auto;object-fit:contain}
.source-copy{padding:0 0 32px}
.source-copy h2{max-width:24ch;margin-right:auto;margin-bottom:20px;margin-left:auto}
.source-copy__intro,.source-copy__columns{max-width:none;gap:24px 34px}
.source-copy__intro{padding:16px 0}
.source-copy__intro p,.source-copy__columns p{font-size:17px;line-height:1.58}
.source-copy__columns{margin-top:20px}
.source-copy__columns h3{font-size:clamp(29px,2.15vw,35px);line-height:1.02}

/* Portfolio and category navigation: fill the section before moving to the next one. */
.portfolio-layout{gap:26px}
.portfolio-copy{column-gap:34px;row-gap:14px}
.portfolio-copy h2{max-width:none;margin-right:auto;margin-left:auto}
.portfolio-copy p{max-width:none;font-size:18px;line-height:1.54}
.project-mosaic{gap:18px}
.project-card span{font-size:14px}
.catalog-links{margin-top:28px}
.catalog-links a{display:flex;min-height:142px;flex-direction:column;justify-content:center;gap:10px;align-items:center;padding:14px;font-size:20px;line-height:1.08;text-align:center}
.catalog-links a img{width:62px;height:62px;object-fit:contain}
.catalog-links a span{display:block;max-width:18ch}

/* SEO information and its tools remain visible, dense and proportionate. */
.myth-head{margin-top:32px}
.myth div{min-height:84px;padding:17px 16px;font-size:clamp(27px,2vw,33px)}
.seo-note{grid-template-columns:minmax(0,1fr) minmax(340px,.94fr);gap:30px;align-items:stretch;max-width:none;margin-top:24px;font-size:17px;line-height:1.55}
.seo-note__copy{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:20px;padding:4px 0}
.seo-note__copy p{margin:0}
.seo-note__copy ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.seo-note__copy li{padding-top:11px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.3;text-transform:uppercase}
.seo-note__copy li::before{content:'↗';margin-right:7px;color:var(--orange);font-family:Manrope,sans-serif}
.seo-note::after{min-height:0;aspect-ratio:auto;background-size:cover}
.seo-side{max-width:none;margin-top:24px;padding:12px}
.seo-side li{min-height:168px;padding:14px 9px;font-size:13px}
.seo-side li img{width:128px;height:128px}
.deliverable{padding:0 28px 8px}
.deliverable p{font-size:17px;line-height:1.55}

/* The price panel uses charcoal rather than black; lower text stays readable. */
.price-main{gap:44px}
.checklist li{font-size:15px;letter-spacing:.055em}
.price-row span{font-size:15px}
.price-row strong{font-family:Manrope,sans-serif;font-size:clamp(34px,2.55vw,48px);line-height:.92;font-weight:500}
.price-row strong small{font-size:12px}
.price-actions p{font-size:15px;line-height:1.5}
.process-line{margin-top:28px}

/* FAQ uses the full available line instead of a narrow island surrounded by blank space. */
.faq{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);column-gap:62px;max-width:none}
.faq > h2{grid-row:1 / span 3;align-self:start;margin:22px 0!important}
.faq > details{grid-column:2}
.faq summary{padding:17px 42px 17px 0;font-size:clamp(25px,1.9vw,34px);line-height:1.04}
.faq details p{max-width:none;padding-bottom:18px;font-size:17px;line-height:1.55}

/* The contact panel and details form one compact, filled ending rather than separate sparse islands. */
.contact{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px 42px;padding:38px 0}
.contact-cta{min-height:0;padding:24px 28px}
.contact-cta p{font-size:17px;line-height:1.5}
.contact-list{align-self:stretch}
.contact-item{font-size:17px}

@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:24px}
  .hero-copy,.hero-photo{height:auto}
  .hero-photo{aspect-ratio:16 / 10}
  .hero-rail{grid-column:1 / -1;display:grid;grid-template-columns:1.02fr 1.24fr .74fr;gap:22px}
  .rail-projects,.rail-price,.rail-price-utility{margin-top:0}
  .service-board{grid-template-columns:1fr}
  .service-board h2{white-space:normal}
  .service-poster{min-height:250px}
  .editorial{column-gap:28px}
  .faq{column-gap:38px}
}

@media (max-width:760px){
  .section{padding:30px 0}
  .section-label{margin-bottom:18px}
  .hero{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .hero-copy h1{font-size:clamp(47px,14vw,58px);line-height:.94}
  .hero-copy > p:not(.hero-statement){font-size:17px;line-height:1.48}
  .hero-action{grid-template-columns:108px minmax(0,1fr);gap:14px}
  .hero-action .button{width:108px;min-height:108px;padding:14px}
  .hero-action-copy{gap:6px;padding:10px 0}
  .hero-action-copy strong{font-size:11px}
  .hero-action-copy p{font-size:14px!important;line-height:1.35!important}
  .hero-action-copy span{font-size:11px}
  .hero-statement-break{height:8px!important}
  .hero-statement{display:block!important;margin:0!important;white-space:normal}
  .hero-price{gap:6px;margin-top:14px;padding-top:14px}
  .hero-photo{aspect-ratio:4 / 3}
  .hero-rail{display:block}
  .rail-list a{padding:10px 0;font-size:17px}
  .rail-projects,.rail-price,.rail-price-utility{margin-top:24px}
  .editorial{grid-template-columns:1fr;grid-template-areas:none;gap:18px}
  .editorial-title,.editorial-prose,.editorial-image,.editorial-conclusion{grid-column:1;grid-row:auto}
  .editorial-title{white-space:normal}
  .editorial-image{min-height:0}
  .editorial-image img{min-height:0;aspect-ratio:4 / 3}
  .editorial-conclusion{gap:14px;padding:22px}
  .editorial-conclusion p,.source-copy__intro p,.source-copy__columns p{font-size:16px;line-height:1.56}
  .editorial-conclusion ul{font-size:12px}
  .service-line{grid-template-columns:36px minmax(0,1fr) 22px;padding:14px 0}
  .service-line strong{font-size:16px}
  .service-line span{display:none}
  .service-poster{min-height:220px}
  .source-copy{padding:0 0 26px}
  .source-copy__intro,.source-copy__columns{gap:18px}
  .portfolio-copy p{font-size:16px}
  .catalog-links{margin-top:22px}
  .catalog-links a{min-height:126px;gap:8px;font-size:18px}
  .catalog-links a img{width:52px;height:52px}
  .seo-note{grid-template-columns:1fr;gap:18px;font-size:16px}
  .seo-note__copy{gap:18px}
  .seo-note__copy ul{grid-template-columns:1fr;gap:0}
  .seo-note__copy li{padding:10px 0;border-bottom:1px solid var(--line)}
  .seo-note::after{aspect-ratio:16 / 10}
  .seo-side li{min-height:158px;font-size:12px}
  .seo-side li img{width:112px;height:112px}
  .deliverable p{font-size:16px}
  .price-main{grid-template-columns:minmax(0,1fr)}
  .price-main > *{min-width:0}
  .price-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .price-row span{font-size:12px}
  .price-row strong{font-size:35px}
  .faq{grid-template-columns:1fr;gap:0}
  .faq > h2{grid-row:auto;margin:0 0 18px!important}
  .faq > details{grid-column:auto}
  .faq summary{font-size:27px;padding:16px 38px 16px 0}
  .faq details p{font-size:16px}
  .contact{grid-template-columns:1fr;grid-template-areas:"intro" "cta" "list";gap:20px;padding:30px 0}
  .contact-cta{padding:22px}
  .contact-cta p,.contact-item{font-size:16px}
}

/*
 * Typography contract for the new Alteman homepage.
 * Use only these three scale tokens in future sections:
 * large = main proposition, medium = reading and interaction, compact = metadata.
 */
:root{
  --typeface:Manrope,sans-serif;
  --type-large:clamp(38px,3vw,52px);
  --type-medium:18px;
  --type-compact:16px;
}

/* One family everywhere. The explicit override also neutralises legacy font shorthands. */
body,body *,body *::before,body *::after{
  font-family:var(--typeface)!important;
}

/* Medium is the page default; every exception below resolves to one of the other two tokens. */
body *{
  font-size:var(--type-medium)!important;
  line-height:1.45!important;
}
body *::before,body *::after{
  font-size:inherit!important;
  line-height:inherit!important;
}

/* Large: the only display size. */
h1,h2,
.rail-price strong,
.hero-price strong,
.price-row strong,
.service-poster strong{
  font-size:var(--type-large)!important;
  line-height:1.08!important;
}
h1 *,h2 *{
  font-size:inherit!important;
  line-height:inherit!important;
}

/* Medium: headings below H2, readable content, questions and interactive text. */
h3,.faq summary,.myth div,
.service-line,.service-line *,
.catalog-links a,.catalog-links a *,
.project-card span,.project-card span *,
.price-row,.price-row *,
.contact-item,.contact-item *,
.hero-action-copy,.hero-action-copy *{
  font-size:var(--type-medium)!important;
}
body .hero-action-copy p{
  font-size:var(--type-medium)!important;
}
h3,.faq summary,.myth div{
  line-height:1.28!important;
  letter-spacing:-.02em;
}

/* Compact: labels and metadata only — deliberately close to the medium size. */
body :is(
  .eyebrow,.eyebrow *,
  .brand-note,.brand-note *,
  .header-meta,.header-meta *,
  .place-dot,
  .hero-statement,.hero-statement *,
  .button,.button *,
  .rail-title,.rail-title *,
  .rail-projects-head a,.rail-projects-head a *,
  .rail-project,.rail-project *,
  .rail-price-label,.rail-price-label *,
  .rail-price small,.rail-price small *,
  .hero-price-label,.hero-price-label *,
  .rail-price-utility small,.rail-price-utility small *,
  .rail-price-utility a,.rail-price-utility a *,
  .section-label,.section-label *,
  .service-poster p,.service-poster p *,
  .text-link,.text-link *,
  .myth-head,.myth-head *,
  .seo-side li,.seo-side li *,
  .seo-note__copy li,.seo-note__copy li *,
  .checklist li,.checklist li *,
  .price-row strong small,.price-row strong small *,
  .process-line div,.process-line div *,
  .contact-item small,.contact-item small *,
  .site-footer,.site-footer *
){
  font-size:var(--type-compact)!important;
  line-height:1.35!important;
}

/* The arrow remains one of the defined scales instead of becoming a fourth decorative size. */
.button b{
  font-size:var(--type-medium)!important;
  line-height:1!important;
}

@media (max-width:760px){
  :root{
    --type-large:38px;
    --type-medium:17px;
    --type-compact:15px;
  }
}