:root {
  color-scheme:dark;
  --bg:#151715;
  --ink:#f5f3ee;
  --muted:#bfc0b8;
  --gold:#c7a477;
  --line:#ffffff26;
  --pad:clamp(22px,6vw,100px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px
}
a:hover {
  color:var(--gold)
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  background:#fff;
  color:#111;
  padding:12px
}
.skip:focus {
  top:12px
}
.wrap {
  max-width:1600px;
  margin:auto;
  padding-inline:var(--pad)
}
header {
  position:sticky;
  top:0;
  z-index:20;
  background:#111411f5;
  border-bottom:1px solid var(--line)
}
.nav {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}
.brand {
  width:164px;
  height:59px;
  position:relative;
  overflow:hidden;
  display:block;
  flex-shrink:0
}
.brand img {
  position:absolute;
  width:492px;
  max-width:none;
  left:-164px;
  top:-5px
}
.desktop {
  display:flex;
  gap:25px;
  font-size:14px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:15px 23px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#171916;
  font-size:14px;
  font-weight:600;
  min-height:50px
}
.btn:hover {
  background:#dec098;
  color:#111
}
.btn.outline {
  background:transparent;
  color:var(--ink);
  border-color:#ffffff66
}
.menu-btn {
  display:none;
  background:transparent;
  border:1px solid var(--line);
  padding:10px 16px;
  color:white
}
.mobile-nav {
  padding:20px var(--pad);
  border-top:1px solid var(--line)
}
.mobile-nav a {
  display:block;
  padding:9px 0
}
.mobile-nav[hidden] {
  display:none
}
.eyebrow {
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:2.4px;
  color:var(--gold);
  font-weight:600;
  margin:0 0 24px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.02fr;
  min-height:650px;
  border-bottom:1px solid var(--line)
}
.hero-copy {
  padding:85px 7vw 75px var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero h1 {
  font-family:Georgia,serif;
  font-size:clamp(44px,4.7vw,78px);
  font-weight:400;
  line-height:1.07;
  letter-spacing:-2px;
  margin:0 0 28px
}
.hero h1 em {
  font-weight:400;
  color:var(--gold)
}
.hero p:not(.eyebrow) {
  color:var(--muted);
  max-width:460px;
  margin:0 0 30px
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center
}
.text-link {
  border-bottom:1px solid #777;
  padding:10px 0;
  font-size:14px
}
.visual {
  position:relative;
  overflow:hidden;
  background:#242923;
  isolation:isolate
}
.visual img {
  position:absolute;
  width:305%;
  height:auto;
  max-width:none;
  top:0;
  left:0
}
.visual.bath img {
  left:-205%
}
.visual.living img {
  left:-102%;
  top:-43%
}
.hero .visual {
  min-height:650px
}
.visual:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#1015108c,transparent 42%);
  pointer-events:none
}
.image-note {
  position:absolute;
  bottom:20px;
  left:25px;
  right:20px;
  font-size:12px;
  z-index:1;
  color:#fff
}
.hero .visual img {
  height:180%;
  width:auto;
  min-width:300%;
  object-fit:fill
}
.trust {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px solid var(--line)
}
section {
  padding-block:100px
}
h2 {
  font-family:Georgia,serif;
  font-size:clamp(36px,3.8vw,58px);
  line-height:1.14;
  font-weight:400;
  letter-spacing:-1px;
  margin:0 0 28px
}
h3 {
  font-weight:400;
  line-height:1.3;
  font-size:24px;
  margin:0 0 14px
}
p {
  margin:0 0 20px
}
.muted {
  color:var(--muted)
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center
}
.story .visual {
  height:520px
}
.story .visual img {
  width:360%;
  left:-121%;
  top:-54%
}
.story blockquote {
  margin:30px 0 0;
  border-left:2px solid var(--gold);
  padding-left:24px;
  font:italic 24px/1.5 Georgia,serif;
  color:var(--gold)
}
.section-top {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px
}
.section-top h2 {
  margin-bottom:0;
  max-width:640px
}
.section-top p {
  max-width:330px;
  color:var(--muted)
}
.services {
  background:#1d211e
}
.service-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:26px
}
.service-card .visual {
  height:300px;
  margin-bottom:25px
}
.service-card h3 {
  font:28px Georgia,serif
}
.service-card p {
  color:var(--muted);
  font-size:15px
}
.service-card>a {
  display:block
}
.service-card .visual img {
  transition:transform .4s
}
.service-card>a:hover img {
  transform:scale(1.025)
}
.service-other {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 50px;
  margin-top:30px
}
.service-other a {
  padding:22px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:18px
}
.difference .visual {
  height:640px
}
.principles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px
}
.principles article {
  border-top:1px solid var(--line);
  padding-top:18px
}
.principles h3 {
  font-size:19px
}
.principles p {
  font-size:14px;
  color:var(--muted)
}
.number {
  color:var(--gold);
  font-size:12px;
  display:block;
  margin-bottom:12px
}
.projects {
  background:#d8d5cc;
  color:#252821
}
.projects .eyebrow {
  color:#6d512d
}
.projects .section-top p {
  color:#53584e
}
.portfolio {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px
}
.portfolio .visual {
  height:420px
}
.portfolio .visual img {
  width:310%;
  left:-105%;
  top:-42%
}
.portfolio .bath img {
  left:-205%;
  top:0
}
.caption {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  font-size:14px
}
.project-empty {
  border-top:1px solid #25282140;
  margin-top:35px;
  padding-top:25px;
  max-width:780px
}
.project-empty p {
  color:#53584e
}
.areas .split {
  align-items:start
}
.cities {
  border-top:1px solid var(--line)
}
.cities a {
  display:block;
  border-bottom:1px solid var(--line);
  padding:24px 0
}
.cities h3 {
  font:30px Georgia,serif;
  display:flex;
  justify-content:space-between
}
.cities p {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.region {
  min-height:410px;
  margin-top:35px
}
.region img {
  width:330%
}
.reviews {
  border-block:1px solid var(--line);
  background:#20251f
}
.reviews .visual {
  height:340px
}
.google-label {
  letter-spacing:1px;
  font-size:14px;
  color:var(--gold);
  margin-bottom:22px
}
.contact {
  background:#101410
}
.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw
}
.contact .visual {
  height:280px;
  margin-top:30px
}
.contact .visual img {
  width:320%;
  left:-107%;
  top:-46%
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
label {
  font-size:14px;
  display:block
}
input,select,textarea {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid #73786d;
  background:#1b211b;
  color:white;
  border-radius:0;
  padding:12px;
  min-height:49px
}
textarea {
  resize:vertical;
  min-height:115px
}
.full {
  grid-column:1/-1
}
details {
  margin:22px 0
}
summary {
  cursor:pointer;
  padding:10px 0;
  color:var(--gold)
}
.notice {
  font-size:13px;
  color:#c4c6be;
  border-left:2px solid var(--gold);
  padding-left:15px;
  margin-bottom:24px
}
#form-status {
  margin-top:18px;
  color:var(--gold)
}
footer {
  padding:55px var(--pad) 30px;
  border-top:1px solid var(--line)
}
.footer-main {
  display:flex;
  justify-content:space-between;
  gap:40px;
  max-width:1400px;
  margin:auto auto 45px
}
.footer-links {
  display:flex;
  gap:40px;
  font-size:14px
}
.footer-links a {
  display:block;
  padding:6px 0
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)
}
.mobile-cta {
  display:none
}
.page-hero {
  padding:75px 0 45px;
  max-width:850px
}
.page-hero h1 {
  font:clamp(42px,5vw,72px)/1.1 Georgia,serif
}
.breadcrumb {
  font-size:14px;
  color:var(--gold);
  margin-bottom:40px
}
.page-content {
  max-width:850px;
  padding-bottom:70px
}
.page-content h2 {
  font-size:34px;
  margin-top:40px
}
.page-content details {
  border-bottom:1px solid var(--line);
  padding-bottom:12px
}
.page-content ul {
  padding-left:20px
}
.page-content li {
  margin:12px 0
}
.comparison {
  position:relative;
  height:440px;
  overflow:hidden
}
.comparison img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.comparison .after {
  clip-path:inset(0 0 0 var(--reveal,50%))
}
.comparison input {
  position:absolute;
  bottom:20px;
  left:5%;
  width:90%;
  z-index:2
}
.reveal {
  animation:rise .5s ease both
}
@keyframes rise {
  from {
  opacity:.6;
  transform:translateY(12px)
}
to {
  opacity:1;
  transform:none
}

}
@media(min-width:1600px) {
  .hero-copy {
  padding-left:max(var(--pad),calc((100vw - 1400px)/2))
}

}
@media(max-width:1100px) {
  .desktop {
  gap:14px
}
.nav>.btn {
  display:none
}
.hero-copy {
  padding-right:35px
}
.hero,.hero .visual {
  min-height:590px
}
.split {
  gap:40px
}
.principles {
  gap:20px
}
.difference .visual {
  height:730px
}

}
@media(max-width:760px) {
  .desktop {
  display:none
}
.menu-btn {
  display:block
}
.nav {
  height:78px
}
.brand {
  width:139px;
  height:51px
}
.brand img {
  width:417px;
  left:-139px;
  top:-4px
}
.hero {
  display:flex;
  flex-direction:column
}
.hero-copy {
  padding:48px var(--pad) 42px
}
.hero h1 {
  font-size:48px;
  letter-spacing:-1.5px
}
.hero .visual {
  min-height:360px;
  height:360px
}
.hero .visual img {
  width:305%;
  height:auto;
  min-width:0
}
.hero .image-note {
  bottom:15px
}
.trust {
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:11px;
  gap:12px;
  padding-block:20px
}
section {
  padding-block:65px
}
.split,.contact-grid {
  grid-template-columns:1fr;
  gap:35px
}
.story .visual {
  height:340px;
  order:2
}
.story .visual img {
  top:-65%
}
.section-top {
  display:block;
  margin-bottom:30px
}
.section-top p {
  margin-top:20px;
  max-width:none
}
.service-grid {
  grid-template-columns:1fr
}
.service-card {
  display:grid;
  grid-template-columns:1fr
}
.service-card .visual {
  height:340px
}
.service-other {
  grid-template-columns:1fr;
  gap:0
}
.difference .visual {
  height:350px
}
.portfolio {
  grid-template-columns:1fr
}
.portfolio .visual {
  height:320px
}
.portfolio .visual img {
  top:-49%
}
.portfolio .bath img {
  top:0
}
.reviews .visual {
  height:300px
}
.footer-main,.footer-bottom {
  flex-direction:column
}
.footer-main {
  gap:28px
}
.footer-bottom {
  gap:12px
}
footer {
  padding-bottom:100px
}
.mobile-cta {
  display:flex;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:25;
  background:#c7a477;
  color:#151715;
  justify-content:center;
  align-items:center;
  font-size:14px;
  font-weight:600;
  min-height:58px;
  padding:14px 15px calc(14px + env(safe-area-inset-bottom))
}
.form-grid {
  gap:17px
}
.form-grid>label {
  grid-column:1/-1
}
.region {
  min-height:290px
}
.principles {
  gap:24px
}
.caption {
  font-size:13px
}
.page-hero {
  padding-top:42px
}

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

}

.page-visual {
  height:380px;
  max-width:850px
}
.page-visual.living img {
  top:-65%
}
.page-content .service-other {
  margin-bottom:40px
}
.project-photo {
  max-width:100%;
  height:auto
}
.verified-projects {
  margin-block:35px
}
.compare-label {
  color:white;
  background:#151715;
  padding:8px;
  position:absolute;
  bottom:0;
  left:0;
  right:0
}
.compare-label input {
  position:static;
  width:100%;
  margin:0
}
.btn:disabled {
  opacity:.65;
  cursor:wait
}
body:has(.menu-btn[aria-expanded="true"]) header {
  box-shadow:0 20px 40px #0005
}
@media(max-width:760px) {
  .page-visual {
  height:300px
}
.page-visual.living img {
  top:-42%
}

}

/* Preserve the original flyer proportions while framing its three image panels. */
.brand img {
  height:auto
}
.hero .visual img {
  width:305%;
  height:auto;
  min-width:0
}
.visual.living img,.story .visual.living img,.portfolio .visual.living img,.contact .visual.living img,.page-visual.living img {
  top:0;
  transform:translateY(-22%);
  width:305%;
  left:-102%
}
.visual.living,.story .visual.living,.portfolio .visual.living,.contact .visual.living,.page-visual.living {
  height:auto;
  aspect-ratio:1.5
}
.visual.bath,.difference .visual.bath,.portfolio .visual.bath,.reviews .visual.bath {
  height:auto;
  aspect-ratio:.92
}
.service-card .visual {
  aspect-ratio:1.05;
  height:auto
}
.service-card .visual.living {
  aspect-ratio:1.05
}
.service-card .visual.living img {
  width:440%;
  left:-169%;
  transform:translateY(-23%)
}
.service-card>a:hover .visual.living img {
  transform:translateY(-23%)
}

/* ATYS identity and motion system */
:root {
  --gold:#efbd31;
  --accent-muted:#d3b96f;
  --bg:#141615
}
header {
  transition:background .35s,box-shadow .35s
}
.nav {
  height:118px
}
.brand {
  width:157px;
  height:104px
}
.brand img {
  width:425px;
  height:auto;
  left:-24px;
  top:-4px
}
.eyebrow {
  color:var(--accent-muted)
}
.hero h1 em {
  color:#eac45d
}
.reading-progress {
  height:2px;
  background:var(--gold);
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .15s linear
}
.desktop a {
  position:relative;
  padding-block:10px
}
.desktop a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s
}
.desktop a:hover:after,.desktop a[aria-current='location']:after {
  transform:scaleX(1)
}
.btn {
  position:relative;
  overflow:hidden;
  transition:background .25s,transform .25s,box-shadow .25s
}
.btn:hover {
  background:#f8ce5b;
  transform:translateY(-3px);
  box-shadow:0 9px 30px #0002
}
.btn span {
  transition:transform .3s
}
.btn:hover span {
  transform:translate(3px,-3px)
}
.text-link {
  transition:color .25s,border-color .25s
}
.text-link:hover {
  border-color:var(--gold)
}
.motion-ready [data-reveal] {
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay,0ms)
}
.motion-ready [data-reveal]:not(.in-view) {
  opacity:0;
  translate:0 26px
}
.motion-ready [data-reveal].in-view {
  opacity:1;
  translate:0 0
}
.service-other a,.cities a {
  transition:padding-left .35s,background .35s
}
.service-other a:hover,.cities a:hover {
  padding-left:14px;
  background:#ffffff03
}
.principles article {
  transition:border-color .3s,translate .3s
}
.principles article:hover {
  border-color:var(--gold);
  translate:0 -4px
}
.visual {
  --image-y:0px
}
.visual.project-image img {
  transform:translateY(var(--image-y)) scale(1.07);
  transition:transform .7s ease;
  will-change:auto
}
.service-card>a:hover .visual.project-image img {
  transform:translateY(var(--image-y)) scale(1.12)
}
.visual.project-image:after {
  background:linear-gradient(0deg,#10151099,transparent 40%)
}
.hero .visual.project-image img {
  animation:hero-arrive 1.5s cubic-bezier(.16,1,.3,1) both
}
.hero-copy .eyebrow {
  animation:copy-arrive .8s .05s both
}
.hero-copy h1 {
  animation:copy-arrive .9s .15s both
}
.hero-copy>p:not(.eyebrow) {
  animation:copy-arrive .9s .25s both
}
.hero-copy .actions {
  animation:copy-arrive .9s .35s both
}
@keyframes hero-arrive {
  from {
  transform:scale(1.13);
  filter:brightness(.65)
}
to {
  transform:scale(1.07);
  filter:brightness(1)
}

}
@keyframes copy-arrive {
  from {
  opacity:0;
  translate:0 20px
}
to {
  opacity:1;
  translate:0 0
}

}
.motion-toggle {
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  padding:5px 0;
  cursor:pointer
}
.motion-paused *, .motion-paused *:before, .motion-paused *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
.motion-paused [data-reveal] {
  opacity:1!important;
  translate:none!important
}
.view-concept {
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  border:1px solid #ffffff70;
  border-radius:0;
  background:#13181399;
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:13px;
  padding:11px 15px;
  transition:background .25s
}
.view-concept:hover {
  background:#131813
}
.image-note {
  padding-right:10px
}
#image-dialog {
  border:1px solid #ffffff30;
  padding:0;
  background:#111612;
  color:#fff;
  width:min(1100px,94vw);
  max-height:92dvh;
  overflow:auto
}
#image-dialog::backdrop {
  background:#000d;
  backdrop-filter:blur(8px)
}
#dialog-image {
  display:block;
  width:100%;
  max-height:77dvh;
  object-fit:contain;
  background:#111
}
#image-dialog-title {
  padding:18px 24px;
  margin:0;
  font-size:14px
}
.dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  z-index:1;
  padding:11px 17px;
  background:#121512dd;
  color:#fff;
  border:1px solid #ffffff80;
  font-size:14px
}
.mobile-cta {
  gap:0;
  padding-inline:0
}
.mobile-cta>a {
  padding-inline:18px;
  display:flex;
  justify-content:center;
  align-items:center
}
.mobile-call {
  border-right:1px solid #15171560
}
.footer-main .brand {
  width:165px;
  height:110px
}
.footer-main .brand img {
  width:450px;
  left:-27px;
  top:-5px
}
@media(max-width:760px) {
  .nav {
  height:94px
}
.brand {
  width:124px;
  height:84px
}
.brand img {
  width:340px;
  left:-20px;
  top:-3px
}
.hero-copy {
  padding-top:40px
}
.hero .visual.project-image {
  height:410px;
  min-height:0
}
.mobile-cta {
  font-size:13px
}
.btn {
  gap:20px
}
.reading-progress {
  transition:none
}
.visual.project-image img {
  transform:scale(1.04)
}
.motion-ready [data-reveal] {
  transition-duration:.6s
}

}
@media(prefers-reduced-motion:reduce) {
  .motion-ready [data-reveal] {
  opacity:1!important;
  translate:none!important
}
.visual.project-image img {
  transform:none!important
}
.btn:hover,.principles article:hover {
  transform:none;
  translate:none
}

}

/* Responsive project photography */
.visual.project-image img,.hero .visual.project-image img,.story .visual.project-image img,.portfolio .visual.project-image img,.contact .visual.project-image img,.page-visual.project-image img,.service-card .visual.project-image img {
  width:100%;
  height:100%;
  max-width:100%;
  left:0;
  top:0;
  object-fit:cover;
  transform:translateY(var(--image-y,0px)) scale(1.07)
}
.hero .visual.project-image {
  min-height:660px
}
.story .visual.project-image {
  height:520px;
  aspect-ratio:auto
}
.difference .visual.project-image {
  height:650px;
  aspect-ratio:auto
}
.service-card .visual.project-image {
  height:320px;
  aspect-ratio:auto
}
.portfolio .visual.project-image {
  height:440px;
  aspect-ratio:auto
}
.reviews .visual.project-image {
  height:390px;
  aspect-ratio:auto
}
.contact .visual.project-image {
  height:310px;
  aspect-ratio:auto
}
.page-visual.project-image {
  height:450px;
  aspect-ratio:auto
}
.region.project-image {
  height:400px;
  min-height:0
}
.visual.project-image.craft img {
  object-position:center
}
.service-card>a:hover .visual.project-image img {
  transform:translateY(var(--image-y,0px)) scale(1.12)
}
@media(max-width:760px) {
  .hero .visual.project-image {
  height:400px;
  min-height:0
}
.hero .visual.project-image img {
  object-position:65% center
}
.story .visual.project-image {
  height:320px
}
.difference .visual.project-image {
  height:370px
}
.service-card .visual.project-image {
  height:330px
}
.portfolio .visual.project-image {
  height:340px
}
.reviews .visual.project-image {
  height:310px
}
.region.project-image {
  height:300px
}
.page-visual.project-image {
  height:320px
}

}
@media(prefers-reduced-motion:reduce) {
  .visual.project-image img,.hero .visual.project-image img,.story .visual.project-image img,.portfolio .visual.project-image img,.contact .visual.project-image img,.page-visual.project-image img,.service-card .visual.project-image img {
  transform:none!important
}

}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.3rem, 10.7vw, 3rem); }
  .hero-copy { padding-bottom: 36px; }
}
/* Original transparent logo downloaded directly from atys.services. */
.brand, .footer-main .brand {
  width: 148px;
  height: 94px;
  overflow: visible;
  display: flex;
  align-items: center;
}
.brand img, .footer-main .brand img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transform: none;
  background: transparent;
}
@media (max-width: 760px) {
  .brand { width: 118px; height: 75px; }
}
/* Final identity: ATYS black, white and construction yellow. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/manrope-400.ttf') format('truetype'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/manrope-600.ttf') format('truetype'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/manrope-800.ttf') format('truetype'); }
:root { --bg:#0c0c0d; --ink:#fafafa; --muted:#b8b8bc; --gold:#ffc400; --accent-muted:#ffc400; --line:#ffffff26; }
body { background:#0c0c0d; font-family:Manrope,Arial,sans-serif; }
header { background:#090909f7; backdrop-filter:blur(16px); border-bottom:1px solid #ffffff25; box-shadow:0 12px 35px #0002; }
.nav { height:112px; gap:28px; }
.desktop { align-items:center; gap:25px; font-weight:600; }
.desktop a { color:#d9d9d9; }
.desktop a:hover,.desktop a[aria-current='location'] { color:#ffc400; }
.nav>.btn { border-radius:0; box-shadow:5px 5px 0 #ffc40024; }
.hero { background:#0b0b0c; grid-template-columns:1fr 1fr; position:relative; }
.hero-copy { padding-block:70px; position:relative; }
.hero h1,h2,.service-card h3,.cities h3,.page-hero h1,.story blockquote { font-family:Manrope,Arial,sans-serif; font-weight:800; }
.hero h1 { font-size:clamp(48px,5vw,80px); line-height:1.07; letter-spacing:-3.5px; }
.headline-line { display:block; overflow:hidden; animation:headline-in .85s cubic-bezier(.16,1,.3,1) both; }
.headline-line:nth-child(2) { animation-delay:.15s; }
.headline-line:nth-child(3) { animation-delay:.3s; }
.hero h1 em { font-style:normal; color:#ffc400; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; line-height:1.65; letter-spacing:1.8px; margin-bottom:26px; }
.hero-kicker-line { height:2px; width:26px; background:#ffc400; flex-shrink:0; }
.hero-section-number { position:absolute; bottom:18px; left:var(--pad); font-size:10px; letter-spacing:3px; color:#848488; }
.hero-copy>p:not(.eyebrow) { max-width:440px; font-size:16px; }
.hero .visual.project-image { min-height:680px; }
.hero .visual.project-image img { object-position:center; }
.hero .visual:before { content:''; position:absolute; z-index:2; left:0; bottom:0; width:7px; height:110px; background:#ffc400; }
.trust { background:#ffc400; color:#101010; max-width:none; font-size:11px; font-weight:800; letter-spacing:1.5px; border:0; }
h2 { font-size:clamp(34px,3.8vw,58px); letter-spacing:-2px; line-height:1.1; }
.eyebrow { color:#ffc400; }
.story { background:#0c0c0d; }
.story blockquote { font-size:22px; font-weight:600; color:#ffc400; font-style:normal; }
.services { background:#19191b; border-block:1px solid #ffffff10; }
.service-card h3 { font-size:26px; letter-spacing:-.8px; }
.service-card .eyebrow { font-family:Manrope,Arial,sans-serif; }
.difference { background:#0c0c0d; }
.difference .principles { grid-template-columns:repeat(3,1fr); column-gap:45px; row-gap:35px; }
.principles article { padding-top:25px; }
.principles .number { font-size:24px; font-weight:800; color:#ffc400; }
.projects { background:#eeeef0; color:#141415; }
.projects .eyebrow { color:#66666b; }
.projects .section-top p,.projects p { color:#55555b; }
.verified-projects { display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; }
.verified-projects h3 { font-weight:800; letter-spacing:-.8px; font-size:24px; }
.project-photo { width:100%; height:310px; object-fit:cover; margin-bottom:18px; }
.projects .text-link { color:#151515; }
.areas { background:#0c0c0d; }
.cities h3 { font-size:30px; letter-spacing:-1px; }
.reviews { background:#ffc400; color:#101010; border:0; }
.review-layout { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
.reviews .eyebrow { color:#41410c; }
.reviews h2 { margin:0; }
.reviews .btn { background:#101010; border-color:#101010; color:#fff; }
.reviews .btn:hover { background:#303030; }
.reviews .text-link:hover { color:#000; }
.contact { background:#f7f7f8; color:#141415; --muted:#55555b; --ink:#141415; color-scheme:light; }
.contact .eyebrow { color:#66666a; }
.contact input,.contact textarea,.contact select { color:#151515; background:#fff; border-color:#c6c6cb; }
.contact .notice { color:#55555b; }
.contact summary { color:#333; font-weight:600; }
.contact #form-status { color:#55500c; }
.contact .text-link:hover { color:#4d4d4d; }
footer { background:#080809; }
.mobile-cta { background:#ffc400; color:#101010; }
.menu-btn { background:#ffc400; border-color:#ffc400; color:#101010; font-weight:800; }
.mobile-nav { background:#111; }
.page-content h2 { font-size:34px; }
.page-hero h1 { font-size:clamp(40px,5vw,70px); letter-spacing:-2px; }
.visual.project-image:after { background:linear-gradient(0deg,#0009,transparent 45%); }
@keyframes headline-in { from { opacity:0; translate:0 30px; } to { opacity:1; translate:0 0; } }
@media(max-width:1100px) { .nav { gap:18px; } .desktop { gap:18px; } .hero h1 { font-size:55px; } }
@media(max-width:760px) {
  .nav { height:94px; }
  .hero-copy { padding:40px var(--pad) 58px; }
  .hero h1 { font-size:clamp(38px,11.5vw,55px); letter-spacing:-2px; }
  .hero-copy .eyebrow { font-size:10px; letter-spacing:1.4px; }
  .hero-section-number { font-size:9px; letter-spacing:2px; bottom:18px; }
  .hero .visual.project-image { min-height:0; height:330px; }
  .hero .visual.project-image img { object-position:center; }
  .hero .visual:before { width:5px; height:80px; }
  .trust { font-size:10px; gap:12px 18px; }
  h2 { letter-spacing:-1.5px; }
  .difference .principles { grid-template-columns:1fr 1fr; gap:25px; }
  .verified-projects { grid-template-columns:1fr; gap:45px; }
  .project-photo { height:290px; }
  .review-layout { grid-template-columns:1fr; gap:30px; }
  .cities h3 { font-size:26px; }
  .reviews .actions { align-items:start; }
}
@media (max-width: 1000px) {
  .desktop { display:none; }
  .menu-btn { display:block; }
  .nav>.btn { display:none; }
}
.save-brief { margin:12px 0 0 18px; padding:12px 8px; border:0; border-bottom:1px solid #777; background:transparent; color:#333; font-weight:600; }
@media(max-width:760px) { .save-brief { margin-left:0; display:block; } }

/* ATYS project collection and signature blade entrance */
.featured-services{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 64px}
.featured-service{border:1px solid #ffffff26;background:#101011;transition:border-color .25s,transform .25s}
.featured-service:hover{border-color:#ffc400;transform:translateY(-4px)}
.featured-service .visual{height:360px;min-height:0;aspect-ratio:auto}
.featured-service .office img{object-position:center 49%}
.featured-copy{padding:28px}.featured-copy h3{font-size:clamp(24px,2.5vw,36px);line-height:1.15;max-width:500px}.featured-copy p{color:#c9c9c9}
.featured-copy .eyebrow{color:#ffc400}.featured-copy h3 span{color:#ffc400}
.verified-projects .project-photo{width:100%;height:420px;object-fit:cover}
.verified-projects article:nth-child(2) .project-photo{object-position:50% 45%}
.brand{transition:transform .35s,filter .35s}.brand:hover,.brand:focus-visible{transform:translateY(-2px);filter:drop-shadow(0 4px 12px #ffc40040)}
.brand-loader{position:fixed;inset:0;z-index:9999;background:#0c0c0d;display:grid;place-items:center;pointer-events:none;animation:loader-away .35s .7s forwards}
.loader-mark{position:relative;width:280px;height:280px;display:grid;place-items:center}
.loader-blade{position:absolute;inset:0;animation:blade-turn 1s cubic-bezier(.16,.6,.36,1) both}
.loader-logo{width:175px;height:auto;position:relative;animation:logo-arrive .6s ease-out both}
@keyframes blade-turn{from{transform:rotate(-150deg);opacity:0}to{transform:rotate(30deg);opacity:1}}
@keyframes logo-arrive{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes loader-away{to{opacity:0;visibility:hidden}}
@media(max-width:760px){.featured-services{grid-template-columns:1fr;gap:24px;margin-bottom:40px}.featured-service .visual{height:300px}.featured-copy{padding:24px}.verified-projects .project-photo{height:320px}}
@media(prefers-reduced-motion:reduce){.brand-loader{display:none}.brand,.featured-service{transition:none}.brand:hover,.featured-service:hover{transform:none}}
.motion-paused .brand-loader{display:none}.motion-paused .brand,.motion-paused .featured-service{transition:none}

/* Real HTML captions stay readable and available to search engines. */
.visual.project-image{position:relative;isolation:isolate}
.photo-slogan{position:absolute;z-index:2;inset:auto 0 0;display:block;padding:55px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.86));color:#fff;font-weight:800;font-size:clamp(17px,1.5vw,23px);line-height:1.35;letter-spacing:-.025em;pointer-events:none;text-shadow:0 1px 3px #0008}
.hero-slogan{font-size:clamp(24px,3vw,44px);padding:90px 36px 34px;line-height:1.12}
.hero-slogan small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:#ffc400;margin-bottom:14px}
.brand{position:relative;isolation:isolate}
.brand-blade{position:absolute;z-index:-1;width:44px;height:44px;right:-15px;top:6px;background:url('/assets/saw-blade.svg') center/contain no-repeat;opacity:0;transform:rotate(-60deg) scale(.8);transition:opacity .25s,transform .8s cubic-bezier(.2,.6,.3,1)}
.brand:hover .brand-blade,.brand:focus-visible .brand-blade{opacity:1;transform:rotate(150deg) scale(1)}
@media(max-width:760px){.hero-slogan{padding:65px 24px 26px}.photo-slogan{font-size:19px}.hero-slogan{font-size:30px}}
@media(prefers-reduced-motion:reduce){.brand-blade{transition:none;transform:none}}
.motion-paused .brand-blade{transition:none;transform:none}