/* AMSOMAR Home — foundation, editorial layout, components, responsive states. */
:root {
  --ink:#252622;
  --muted:#66675f;
  --paper:#faf9f6;
  --sand:#eeece5;
  --gold:#c8aa79;
  --line:#dcdad2;
  --dark:#20211f;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,sans-serif;
  --gutter:clamp(22px,5vw,88px)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65
}
body.modal-open {
  overflow:hidden
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
img {
  max-width:100%;
  height:auto;
  display:block
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.035em
}
h2 {
  font-size:clamp(36px,4vw,62px)
}
h3 {
  font-weight:500;
  font-size:20px;
  line-height:1.35
}
em {
  font-weight:400;
  color:#8c7552
}
p+p {
  margin-top:18px
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.container {
  max-width:1460px;
  margin-inline:auto;
  padding-inline:var(--gutter)
}
.section {
  padding-block:110px
}
.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  margin-bottom:27px;
  color:#79735f
}
.eyebrow.light {
  color:#e1cfb0
}
.lead {
  font-size:21px;
  line-height:1.55
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  min-height:53px;
  padding:16px 25px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:600;
  letter-spacing:.015em;
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-gold {
  background:var(--gold);
  color:#20211f
}
.button-gold:hover {
  background:#ddc292
}
.button-dark {
  background:var(--dark);
  color:var(--paper)
}
.button-outline {
  border-color:#aaa69a;
  color:#fff;
  background:transparent
}
.button-outline:hover {
  background:#ffffff13
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:40px;
  padding-bottom:9px;
  border-bottom:1px solid #918571;
  font-size:14px;
  font-weight:600
}
.text-link:hover {
  color:#90764c
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--paper);
  padding:12px
}
.skip-link:focus {
  top:12px
}
.header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:24px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  z-index:20;
  color:white;
  border-bottom:1px solid #ffffff28
}
.wordmark {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:25px;
  font-weight:650;
  letter-spacing:.1em;
  line-height:1.1;
  flex:none
}
.wordmark span {
  font-size:12px;
  letter-spacing:.28em;
  color:var(--gold);
  margin-top:6px
}
.header nav {
  display:flex;
  align-items:center;
  gap:clamp(15px,2.1vw,35px)
}
.header nav a {
  font-size:13px;
  white-space:nowrap
}
.header nav a:not(.nav-cta):hover {
  color:#e3cba5
}
.nav-cta {
  border:1px solid #ffffff70;
  padding:12px 17px;
  display:flex;
  gap:25px
}
.nav-cta:hover {
  background:#ffffff16
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  min-height:760px;
  height: min(940px,100svh);
  color:#fff;
  isolation:isolate
}
.hero-image,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2
}
.hero-image {
  object-position:center 56%
}
.hero-shade {
  z-index:-1;
  background:linear-gradient(90deg,rgba(14,18,15,.54),rgba(14,18,15,.12) 85%),linear-gradient(180deg,#11171245,transparent 35%,#1418138c)
}
.hero-content {
  padding:clamp(180px,23vh,270px) var(--gutter) 130px;
  max-width:1460px;
  margin:auto
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:12px;
  letter-spacing:.2em;
  margin-bottom:25px
}
.hero .eyebrow>span {
  height:1px;
  width:34px;
  background:var(--gold)
}
.hero h1 {
  font-size:clamp(54px,6.7vw,104px);
  line-height:1.09;
  letter-spacing:-.035em;
  text-shadow:0 2px 20px #0002
}
.hero h1 em {
  color:#eddbc0
}
.hero-description {
  margin-top:26px;
  font-size:17px;
  line-height:1.75;
  color:#f1eee8;
  max-width:570px
}
.hero .button {
  margin-top:32px
}
.hero-bottom {
  position:absolute;
  bottom:28px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px;
  letter-spacing:.015em
}
.hero-bottom a {
  display:flex;
  align-items:center;
  gap:22px
}
.hero-bottom i {
  font-style:normal;
  color:#ddd8cc
}
.hero-index {
  font-size:19px
}
.hero-index>span {
  font-size:12px;
  color:#ddd1bd;
  margin-left:7px
}
.services-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,4vw,65px);
  padding:26px var(--gutter);
  background:var(--dark);
  color:#ddd9cf;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase
}
.services-strip i {
  font-size:20px;
  color:var(--gold)
}
.about {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:8%
}
.about-visual {
  position:relative;
  min-height:600px
}
.about-visual>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60%
}
.image-label {
  position:absolute;
  bottom:30px;
  left:26px;
  right:26px;
  border-top:1px solid #ffffff50;
  padding-top:15px;
  color:white;
  font-family:var(--serif);
  font-size:21px;
  text-shadow:0 1px 8px #000
}
.concept-tag {
  position:absolute;
  top:17px;
  left:18px;
  color:white;
  background:#20211fc4;
  padding:4px 10px;
  font-size:12px;
  letter-spacing:.02em
}
.about-copy {
  padding-block:24px
}
.about-copy h2 {
  margin-bottom:26px
}
.about-copy>p:not(.eyebrow) {
  color:var(--muted)
}
.about-copy .lead {
  color:var(--ink)!important
}
.about-copy .text-link {
  margin-top:25px
}
.about-signature {
  display:flex;
  flex-direction:column;
  margin-top:35px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13px;
  letter-spacing:.05em
}
.about-signature span:last-child {
  color:var(--muted)
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:50px
}
.section-heading>p {
  max-width:360px;
  color:var(--muted);
  padding-bottom:5px
}
.design-section {
  background:var(--sand)
}
.design-layout {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:7%;
  align-items:center
}
.design-image {
  position:relative
}
.design-image img {
  aspect-ratio:1.38;
  object-fit:cover;
  width:100%
}
.design-details article {
  display:flex;
  gap:25px;
  padding:27px 0;
  border-bottom:1px solid #d3d0c6
}
.design-details article:first-child {
  padding-top:0
}
.design-details article>span {
  color:#907951;
  font-size:13px;
  padding-top:3px
}
.design-details h3 {
  margin-bottom:9px
}
.design-details p {
  color:var(--muted);
  font-size:15px
}
.design-details .text-link {
  margin-top:28px
}
.gallery-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
  gap:20px
}
.filters {
  display:flex;
  gap:27px
}
.filter {
  border:0;
  background:none;
  padding:14px 0;
  color:var(--muted);
  border-bottom:2px solid transparent;
  font-size:14px
}
.filter.active {
  color:var(--ink);
  border-bottom-color:#9b8157
}
.gallery-toolbar>p {
  font-size:12px;
  color:var(--muted)
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px 25px
}
.gallery-card {
  padding:0;
  text-align:left;
  border:0;
  background:transparent;
  min-width:0
}
.gallery-card.gallery-wide {
  grid-column:span 2
}
.gallery-photo {
  display:block;
  position:relative;
  overflow:hidden;
  height:320px
}
.gallery-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s
}
.gallery-card:hover img {
  transform:scale(1.035)
}
.gallery-expand {
  position:absolute;
  right:16px;
  bottom:16px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#faf9f6e8;
  font-size:20px
}
.gallery-caption {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding-top:17px;
  font-family:var(--serif);
  font-size:25px;
  line-height:1.2
}
.gallery-caption small {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  color:var(--muted);
  margin-top:9px;
  line-height:1.5
}
.gallery-caption>span:last-child {
  font-family:var(--sans);
  font-size:12px;
  color:#92856c;
  padding-top:6px
}
.gallery-grid.filtered .gallery-card {
  grid-column:auto
}
.gallery-note {
  margin-top:35px;
  text-align:center;
  font-size:12px;
  color:var(--muted)
}
.system-section {
  background:var(--dark);
  color:var(--paper)
}
.system-section .eyebrow {
  color:var(--gold)
}
.system-section em {
  color:var(--gold)
}
.system-section .section-heading>p {
  color:#bdbeb4
}
.system-layout {
  display:grid;
  grid-template-columns:.85fr 1.25fr;
  gap:8%;
  align-items:center
}
.system-tabs {
  display:flex;
  border-bottom:1px solid #55564c;
  margin-bottom:28px;
  gap:27px
}
.system-tabs button {
  background:none;
  border:none;
  color:#bdbeb4;
  padding:13px 0;
  font-size:15px;
  border-bottom:2px solid transparent
}
.system-tabs button[aria-selected=true] {
  color:var(--gold);
  border-color:var(--gold)
}
.system-copy h3 {
  font-family:var(--serif);
  font-size:30px;
  margin-bottom:16px
}
.system-copy p {
  color:#bdbeb4;
  font-size:15px
}
.system-copy ul {
  list-style:none;
  padding:0;
  margin:22px 0
}
.system-copy li {
  border-bottom:1px solid #45463f;
  padding:10px 0;
  font-size:14px
}
.system-copy li:before {
  content:'—';
  color:var(--gold);
  margin-right:15px
}
.system-copy .system-note {
  font-size:12px;
  color:#a6a79e
}
.system-visual {
  background:#fff;
  padding:0;
  border:0;
  position:relative
}
.system-visual img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain
}
.system-visual>span {
  display:flex;
  justify-content:space-between;
  background:#eeece5;
  padding:12px 18px;
  font-size:13px;
  color:var(--ink)
}
.system-benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #4b4c43;
  margin-top:48px;
  padding-top:30px;
  text-align:center;
  font-size:14px;
  color:#dbd8cd
}
.system-benefits span+span {
  border-left:1px solid #4b4c43
}
.process-grid {
  padding:0;
  margin:60px 0 0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px 55px
}
.process-grid li {
  border-top:1px solid var(--line);
  padding-top:23px
}
.process-grid li>span {
  font-family:var(--serif);
  font-size:42px;
  line-height:1;
  color:#a08b67
}
.process-grid h3 {
  margin:20px 0 12px
}
.process-grid p {
  font-size:15px;
  color:var(--muted);
  max-width:320px
}
.turnkey {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#34382f;
  color:white
}
.turnkey>img {
  width:100%;
  height:100%;
  min-height:570px;
  object-fit:cover
}
.turnkey-copy {
  padding:70px clamp(30px,6vw,95px)
}
.turnkey-copy em {
  color:#d7bf95
}
.turnkey-copy h2 {
  margin-bottom:28px
}
.turnkey-copy>p:not(.eyebrow) {
  color:#dedfd5;
  max-width:500px
}
.turnkey-copy .button {
  margin-top:30px
}
.special {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%
}
.special>div:last-child {
  padding-top:45px
}
.special .lead {
  margin-bottom:18px
}
.special p:not(.lead):not(.eyebrow) {
  color:var(--muted)
}
.special .text-link {
  margin-top:25px
}
.faq-section {
  background:var(--sand)
}
.faq-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:8%
}
.faq-layout h2 {
  margin-bottom:25px
}
.faq-layout>div>p:not(.eyebrow) {
  color:var(--muted)
}
.faq-list details {
  border-bottom:1px solid #cfcdc3
}
.faq-list details:first-child {
  border-top:1px solid #cfcdc3
}
.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:23px 0;
  font-size:16px;
  line-height:1.5
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary span {
  font-size:24px;
  font-weight:300;
  transition:transform .2s
}
.faq-list details[open] summary span {
  transform:rotate(45deg)
}
.faq-list details p {
  padding:0 30px 25px 0;
  font-size:15px;
  color:var(--muted)
}
.contact-section {
  background:var(--dark);
  color:var(--paper)
}
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:9%
}
.contact-copy h2 {
  font-size:clamp(40px,4.5vw,66px);
  margin-bottom:28px
}
.contact-copy em {
  color:var(--gold)
}
.contact-copy>p:not(.eyebrow) {
  color:#c1c3b9
}
.contact-email {
  display:inline-flex;
  align-items:center;
  gap:30px;
  border-bottom:1px solid #6e6d61;
  padding-bottom:13px;
  margin-top:35px;
  font-size:16px;
  overflow-wrap:anywhere
}
.contact-location {
  margin-top:35px!important;
  font-size:14px
}
.contact-location span {
  font-size:12px;
  color:#a9ac9f
}
.form-intro {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #55564c;
  padding-bottom:20px;
  font-size:17px;
  margin-bottom:26px
}
.form-intro span {
  font-size:12px;
  color:#b7b7ac;
  align-self:center
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px
}
.form-grid label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:13px;
  color:#e1e1d6;
  min-width:0
}
.form-grid input,.form-grid select,.form-grid textarea {
  width:100%;
  min-height:45px;
  background:#ffffff04;
  color:#f4f1e9;
  border:1px solid #68695e;
  border-radius:0;
  padding:10px 12px;
  font-size:14px;
  min-width:0
}
.form-grid input::placeholder,.form-grid textarea::placeholder {
  color:#aaa99e;
  opacity:1
}
.form-grid select {
  color-scheme:dark
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus {
  border-color:var(--gold)
}
.form-grid textarea {
  resize:vertical
}
.full-width {
  grid-column:1/-1
}
.form-explanation {
  font-size:12px;
  color:#b6b7ac;
  margin-top:22px
}
.form-submit {
  width:100%;
  margin-top:21px
}
.form-status {
  font-size:13px
}
.footer {
  background:#171815;
  color:#e7e5dc;
  padding-top:43px
}
.footer-main {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-bottom:36px
}
.footer-main p {
  font-size:14px;
  color:#b6b8ab
}
.back-top {
  font-size:13px;
  display:flex;
  gap:30px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  padding-bottom:20px;
  border-top:1px solid #3b3d33;
  font-size:12px;
  color:#aeb1a2
}
.plain-button {
  background:none;
  border:0;
  padding:0;
  font-size:12px;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px
}
.image-dialog,.text-dialog {
  border:none;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  max-height:92svh
}
.image-dialog {
  width:min(1100px,94vw);
  max-width:94vw
}
.image-dialog::backdrop,.text-dialog::backdrop {
  background:#11130fe8;
  backdrop-filter:blur(5px)
}
.dialog-close {
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  border:0;
  background:var(--paper);
  width:43px;
  height:43px;
  font-size:30px;
  line-height:1
}
.dialog-close:hover {
  background:var(--gold)
}
#dialog-image {
  width:100%;
  height:min(64svh,700px);
  object-fit:contain;
  background:#151612
}
.image-dialog-footer {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:25px 30px
}
.image-dialog-footer .eyebrow {
  margin-bottom:9px;
  font-size:12px
}
.image-dialog-footer h2 {
  font-size:32px
}
.image-dialog-footer p:last-child {
  font-size:14px;
  color:var(--muted);
  margin-top:10px
}
.dialog-arrows {
  display:flex;
  gap:10px;
  align-items:center
}
.dialog-arrows button {
  height:45px;
  width:45px;
  background:none;
  border:1px solid var(--line);
  font-size:22px
}
.dialog-arrows button:hover {
  background:var(--sand)
}
.text-dialog {
  padding:45px;
  width:min(680px,94vw);
  max-width:94vw
}
.text-dialog h2 {
  font-size:39px;
  margin-bottom:22px
}
.text-dialog>p {
  font-size:15px;
  color:var(--muted)
}
.text-dialog>p a {
  text-decoration:underline
}
.text-dialog>textarea {
  width:100%;
  margin-block:20px;
  padding:15px;
  resize:vertical;
  border:1px solid var(--line);
  font-size:14px;
  background:white
}
.dialog-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.text-dialog #copy-status {
  margin-top:20px;
  font-size:13px
}

@media(min-width:1700px) {
  .hero-content {
  padding-top:250px
}
.hero {
  min-height:850px
}
.header {
  padding-inline:max(var(--gutter),calc((100vw - 1300px)/2))
}

}

@media(max-width:1100px) {
  .header nav {
  gap:16px
}
.header nav a {
  font-size:12px
}
.wordmark {
  font-size:21px
}
.header {
  gap:20px;
  padding-inline:30px
}
.nav-cta {
  gap:12px;
  padding:10px 12px
}
.section {
  padding-block:80px
}
.about {
  gap:6%
}
.about-visual {
  min-height:540px
}
.section-heading {
  gap:30px
}
.section-heading>p {
  max-width:300px
}
.gallery-photo {
  height:260px
}
.contact-layout {
  gap:6%
}
.services-strip {
  letter-spacing:.07em;
  gap:23px
}
.hero {
  min-height:740px
}
.turnkey-copy {
  padding:55px 35px
}
.system-layout {
  gap:5%
}

}

@media(max-width:850px) {
  .header {
  padding:20px var(--gutter)
}
.menu-toggle {
  display:flex;
  align-items:center;
  gap:15px;
  background:none;
  border:0;
  color:white;
  padding:8px;
  font-size:14px;
  z-index:22
}
.menu-lines {
  display:block;
  position:relative;
  width:22px;
  height:12px;
  border-block:1px solid currentColor
}
.menu-toggle[aria-expanded=true] .menu-lines {
  height:1px;
  border-bottom:0;
  transform:rotate(45deg)
}
.menu-toggle[aria-expanded=true] .menu-lines:after {
  content:'';
  position:absolute;
  width:22px;
  border-top:1px solid;
  transform:rotate(90deg);
  left:0;
  top:-1px
}
.header nav {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:83px;
  background:#20211ff7;
  padding:25px var(--gutter) 35px;
  flex-direction:column;
  align-items:stretch;
  gap:0
}
.header nav.is-open {
  display:flex
}
.header nav a {
  font-size:16px;
  padding:14px 0
}
.header nav .nav-cta {
  padding:15px;
  margin-top:15px;
  justify-content:space-between
}
.hero h1 {
  font-size:clamp(49px,7.9vw,72px)
}
.hero-bottom>span:not(.hero-index) {
  display:none
}
.services-strip {
  flex-wrap:wrap;
  gap:10px 22px;
  font-size:11px;
  padding-block:20px
}
.services-strip i:nth-of-type(2) {
  display:none
}
.services-strip span {
  width:38%;
  text-align:center
}
.about {
  gap:35px;
  grid-template-columns:1fr 1fr
}
.about-visual {
  min-height:480px
}
.about-copy {
  padding:0
}
.about-copy h2 {
  font-size:38px
}
.about-copy .lead {
  font-size:19px
}
.about-copy p {
  font-size:15px
}
.image-label {
  font-size:18px
}
.section-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:23px
}
.section-heading>p {
  max-width:550px
}
.design-layout {
  gap:35px;
  grid-template-columns:1fr
}
.design-image img {
  aspect-ratio:1.7
}
.design-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.design-details article {
  padding:0 0 20px;
  gap:12px
}
.design-details article h3 {
  font-size:18px
}
.design-details .text-link {
  grid-column:1/-1;
  justify-self:start;
  margin-top:0
}
.gallery-caption {
  font-size:21px
}
.gallery-photo {
  height:230px
}
.system-layout {
  grid-template-columns:1fr;
  gap:30px
}
.system-copy {
  max-width:600px
}
.system-visual {
  max-width:670px
}
.system-benefits {
  font-size:12px
}
.process-grid {
  gap:35px 25px
}
.process-grid h3 {
  font-size:18px
}
.turnkey {
  grid-template-columns:1fr
}
.turnkey>img {
  height:440px;
  min-height:0
}
.turnkey-copy {
  padding:55px var(--gutter)
}
.turnkey-copy p {
  max-width:650px!important
}
.special {
  gap:30px
}
.faq-layout {
  grid-template-columns:1fr;
  gap:40px
}
.contact-layout {
  grid-template-columns:1fr;
  gap:50px
}
.contact-copy h2 br:nth-of-type(2) {
  display:none
}
.contact-copy h2 {
  font-size:52px
}
.contact-location {
  margin-top:22px!important
}
.contact-email {
  margin-top:25px
}
.footer-bottom>span:nth-child(2) {
  display:none
}

}

@media(max-width:560px) {
  :root {
  --gutter:23px
}
.section {
  padding-block:64px
}
.eyebrow {
  font-size:11px;
  margin-bottom:21px
}
h2 {
  font-size:38px
}
.hero {
  min-height:700px;
  height:92svh;
  max-height:870px
}
.hero-image {
  object-position:55% center
}
.hero-shade {
  background:linear-gradient(90deg,#1117109c,#11171035),linear-gradient(180deg,#11171040,transparent 50%,#1117108c)
}
.hero-content {
  padding-top:190px;
  padding-bottom:110px
}
.hero .eyebrow {
  font-size:10px;
  letter-spacing:.14em;
  gap:10px
}
.hero .eyebrow>span {
  width:20px
}
.hero h1 {
  font-size:clamp(40px,9.5vw,53px);
  line-height:1.15
}
.hero-description {
  font-size:15px;
  max-width:335px;
  margin-top:24px
}
.desktop-break {
  display:none
}
.hero .button {
  margin-top:26px
}
.hero-bottom {
  bottom:25px;
  font-size:11px
}
.services-strip {
  gap:6px 12px;
  font-size:10px;
  letter-spacing:.06em
}
.services-strip span {
  width:42%
}
.about {
  grid-template-columns:1fr;
  gap:34px
}
.about-visual {
  height:440px;
  min-height:0
}
.about-copy h2 {
  font-size:39px
}
.about-signature {
  margin-top:28px
}
.design-image img {
  aspect-ratio:1.15
}
.design-details {
  display:block
}
.design-details article {
  gap:20px;
  padding-block:23px
}
.design-details .text-link {
  margin-top:25px
}
.section-heading {
  margin-bottom:33px
}
.gallery-toolbar {
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  padding-bottom:15px
}
.filters {
  gap:28px
}
.filter {
  padding-top:0
}
.gallery-toolbar>p {
  font-size:11px
}
.gallery-grid {
  grid-template-columns:1fr;
  gap:28px
}
.gallery-card.gallery-wide {
  grid-column:auto
}
.gallery-photo {
  height:auto;
  aspect-ratio:1.35
}
.gallery-caption {
  font-size:24px
}
.gallery-note {
  text-align:left;
  line-height:1.6
}
.system-benefits {
  grid-template-columns:1fr 1fr;
  row-gap:20px;
  font-size:12px
}
.system-benefits span:nth-child(3) {
  border-left:0
}
.system-copy h3 {
  font-size:27px
}
.process-grid {
  grid-template-columns:1fr 1fr;
  gap:32px 24px;
  margin-top:40px
}
.process-grid li>span {
  font-size:36px
}
.process-grid h3 {
  font-size:17px
}
.process-grid p {
  font-size:14px
}
.turnkey>img {
  height:330px
}
.turnkey-copy {
  padding-block:50px
}
.turnkey-copy .button {
  font-size:13px;
  gap:17px;
  padding-inline:18px
}
.special {
  grid-template-columns:1fr;
  gap:25px
}
.special>div:last-child {
  padding-top:0
}
.faq-list summary {
  font-size:15px;
  padding:20px 0
}
.contact-copy h2 {
  font-size:43px
}
.contact-copy h2 br:nth-of-type(2) {
  display:block
}
.contact-email {
  font-size:15px;
  gap:16px
}
.form-grid {
  grid-template-columns:1fr;
  gap:19px
}
.form-intro {
  flex-direction:column;
  gap:4px
}
.form-intro span {
  align-self:flex-start
}
.form-grid input,.form-grid select,.form-grid textarea {
  font-size:16px;
  min-height:49px
}
.footer-main {
  flex-wrap:wrap;
  justify-content:space-between;
  gap:27px
}
.footer-main p {
  order:3;
  width:100%;
  font-size:13px
}
.back-top {
  gap:16px;
  font-size:12px
}
.footer-bottom {
  font-size:11px
}
.image-dialog-footer {
  padding:20px;
  flex-direction:column;
  gap:15px
}
.image-dialog-footer h2 {
  font-size:28px
}
.image-dialog-footer p:last-child {
  font-size:13px
}
.dialog-arrows {
  align-self:flex-end
}
.text-dialog {
  padding:50px 23px 25px
}
.text-dialog h2 {
  font-size:34px
}
.dialog-actions {
  flex-direction:column
}
.dialog-actions .button {
  justify-content:center
}
.image-dialog {
  max-height:94svh
}
#dialog-image {
  height:49svh
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  transition:none!important;
  animation:none!important
}

}