:root {
  --canvas: #f7f6f2;
  --paper: #ffffff;
  --ink: #162331;
  --muted: #687483;
  --blue: #244768;
  --sea: #5b8e91;
  --mist: #dde5e3;
  --line: #d5ddd9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--blue);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--blue);
  font-size: 18px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--muted);
}
.nav a {
  position: relative;
  padding: 11px 0;
}
.nav .current { color: var(--blue); }
.nav .current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sea);
}
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 38px 30px 82px;
}
.tag {
  margin: 0;
  color: var(--sea);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
}
h1 {
  margin: 17px 0 22px;
  max-width: 730px;
  color: var(--blue);
  font: 400 clamp(46px, 5.7vw, 73px)/1.04 Georgia, serif;
  letter-spacing: -.045em;
}
.lead {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.72;
}
.link-action {
  display: inline-block;
  margin-top: 34px;
  padding: 15px 24px;
  border: 1px solid var(--blue);
  color: var(--blue);
}

.atlas-hero {
  display: grid;
  grid-template-columns: 1fr 365px 195px;
  grid-template-rows: auto 222px;
  gap: 17px;
  padding-top: 23px;
}
.atlas-copy { grid-row: 1 / span 2; padding: 30px 42px 0 0; }
.hero-primary {
  grid-column: 2 / span 2;
  height: 382px;
  margin: 0;
}
.hero-secondary {
  height: 222px;
  margin: 0;
  grid-column: 3;
}
.home-axis {
  display: grid;
  grid-template-columns: 1.22fr repeat(3, 1fr);
  gap: 0;
  margin-top: 66px;
  border-top: 1px solid var(--line);
}
.home-axis > * {
  min-height: 165px;
  padding: 27px 24px;
  border-right: 1px solid var(--line);
}
.axis-title { padding-left: 0; }
.axis-title h2 {
  margin: 17px 0 0;
  color: var(--blue);
  font: 400 31px Georgia, serif;
}
.home-axis span {
  color: var(--sea);
  font-size: 12px;
  letter-spacing: .14em;
}
.home-axis h3 {
  margin: 22px 0 9px;
  font-size: 19px;
}
.home-axis article p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.studio-head {
  padding: 34px 0 54px;
  border-bottom: 1px solid var(--line);
}
.studio-grid {
  display: grid;
  grid-template-columns: 1fr 295px 230px;
  gap: 17px;
  margin-top: 34px;
}
.studio-grid figure { margin: 0; }
.studio-wide { height: 390px; }
.studio-tall { height: 515px; }
.studio-note {
  align-self: end;
  min-height: 270px;
  padding: 30px 26px;
  background: var(--mist);
}
.studio-note h2 {
  margin: 18px 0 13px;
  color: var(--blue);
  font: 400 29px Georgia, serif;
}
.studio-note p:last-child {
  color: var(--muted);
  line-height: 1.68;
}
.studio-line {
  display: flex;
  gap: 46px;
  margin-top: 38px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
}
.method-intro {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 58px;
  align-items: end;
  padding: 35px 0 47px;
  border-bottom: 1px solid var(--line);
}
.method-intro aside {
  padding: 7px 0 7px 25px;
  border-left: 2px solid var(--sea);
}
.method-intro aside p {
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.method-key {
  display: flex;
  align-items: center;
  gap: 17px;
  color: var(--blue);
}
.method-key span {
  font: 400 30px Georgia, serif;
  color: var(--sea);
}
.method-key strong {
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.method-gallery {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  margin-top: 39px;
}
.method-gallery figure {
  height: 345px;
  margin: 0;
}
.method-grid {
  display: grid;
  grid-template-columns: 1.34fr repeat(3, 1fr);
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid var(--line);
}
.method-grid article {
  min-height: 194px;
  padding: 28px 23px;
  border-right: 1px solid var(--line);
}
.method-statement {
  padding-left: 0 !important;
  padding-right: 38px !important;
}
.method-statement h2 {
  margin: 17px 0 13px;
  color: var(--blue);
  font: 400 28px Georgia, serif;
}
.method-statement p:last-child,
.method-grid article:not(.method-statement) p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}
.method-grid article:not(.method-statement) span {
  color: var(--sea);
  font-size: 12px;
  letter-spacing: .15em;
}
.method-grid article:not(.method-statement) h3 {
  margin: 24px 0 10px;
  color: var(--blue);
  font-size: 19px;
}

.offer-head {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
  align-items: end;
  padding: 28px 0 43px;
  border-bottom: 1px solid var(--line);
}
.offer-layout {
  display: grid;
  grid-template-columns: 1fr 330px 220px;
  gap: 17px;
  margin-top: 38px;
}
.offer-list {
  grid-row: 1 / span 2;
  padding-right: 25px;
}
.offer-list article {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 27px 0;
  border-top: 1px solid var(--line);
}
.offer-list span { color: var(--sea); font-size: 13px; }
.offer-list h2 {
  margin: 0 0 9px;
  color: var(--blue);
  font: 400 28px Georgia, serif;
}
.offer-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.offer-layout figure { margin: 0; }
.offer-photo-main {
  grid-column: 2 / span 2;
  height: 315px;
}
.offer-photo-small { height: 226px; }
.offer-result {
  background: var(--blue);
  color: #fff;
  padding: 26px 22px;
}
.offer-result .tag { color: #b8d5d5; }
.offer-result p:last-child {
  margin: 20px 0 0;
  line-height: 1.65;
}

.contact-head {
  max-width: 790px;
  padding: 32px 0 48px;
}
.contact-stage {
  display: grid;
  grid-template-columns: 300px 1fr 250px;
  gap: 18px;
  align-items: start;
}
.contact-info {
  background: var(--blue);
  color: #fff;
  padding: 28px;
}
.contact-info h2 {
  margin: 0 0 22px;
  font: 400 31px Georgia, serif;
}
.contact-info p { line-height: 1.72; color: #e0e7ea; }
.contact-info a {
  display: block;
  margin-top: 12px;
  color: #fff;
}
.contact-info figure {
  height: 155px;
  margin: 30px -28px -28px;
}
.contact-form {
  padding: 30px;
  background: var(--paper);
  display: grid;
  gap: 17px;
}
.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--canvas);
  font: inherit;
}
.contact-form button {
  padding: 15px;
  border: 0;
  background: var(--sea);
  color: #fff;
  font: inherit;
}
.contact-photo { height: 424px; margin: 0; }

.legal { max-width: 720px; padding: 36px 0 65px; }
.legal h1 { font-size: clamp(42px, 5vw, 60px); }
.legal p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}
.legal a { color: var(--blue); text-decoration: underline; }
.site-footer {
  max-width: 1140px;
  margin: 0 auto 26px;
  padding: 37px 38px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.site-footer strong { color: var(--blue); font-size: 19px; }
.site-footer p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.72;
}
.foot-links {
  display: flex;
  align-items: start;
  gap: 22px;
  color: var(--blue);
}
@media (max-width: 850px) {
  .site-header { display: block; padding: 22px; }
  .nav { margin-top: 22px; gap: 17px; flex-wrap: wrap; }
  main { padding: 25px 22px 56px; }
  h1 { font-size: clamp(39px, 12vw, 52px); }
  .atlas-hero, .studio-grid, .offer-head, .offer-layout, .contact-stage {
    display: block;
  }
  .atlas-copy { padding: 15px 0 29px; }
  .hero-primary, .hero-secondary, .studio-wide, .studio-tall,
  .offer-photo-main, .offer-photo-small, .contact-photo {
    height: 245px;
    margin-top: 16px;
  }
  .home-axis { display: block; margin-top: 38px; }
  .home-axis > * { min-height: 0; border-bottom: 1px solid var(--line); }
  .studio-head { padding: 18px 0 30px; }
  .studio-note, .offer-result, .contact-info, .contact-form { margin-top: 16px; }
  .studio-line { display: block; }
  .studio-line p { margin: 16px 0; }
  .method-intro, .method-gallery, .method-grid { display: block; }
  .method-intro { padding: 18px 0 30px; }
  .method-intro aside { margin-top: 27px; }
  .method-gallery figure { height: 245px; margin-top: 16px; }
  .method-grid { margin-top: 29px; }
  .method-grid article { min-height: 0; border-bottom: 1px solid var(--line); }
  .method-statement { padding-right: 23px !important; }
  .offer-head { padding: 14px 0 30px; }
  .offer-list { padding-right: 0; margin-top: 25px; }
  .contact-head { padding: 17px 0 31px; }
  .site-footer { margin: 0 22px; padding: 30px 0; display: block; }
  .foot-links { margin-top: 23px; flex-wrap: wrap; }
}