/* 4RQ — Identidad editorial. Sin frameworks ni dependencias externas. */
:root {
  --ink:#111315;
  --ink-soft:#1b1e20;
  --paper:#f5f5f2;
  --white:#fff;
  --orange:#ff4d24;
  --orange-hover:#ff704f;
  --muted:#a2a7a9;
  --muted-light:#62666a;
  --line:rgba(255,255,255,.17);
  --line-light:#d4d7d6;
  --max:1320px;
  --gutter:clamp(1.25rem,4.9vw,5.5rem);
  --header:96px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header) + 22px)
}
body {
  margin:0;
  color:var(--paper);
  background:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
body,button,a {
  -webkit-tap-highlight-color:transparent
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button,input,summary {
  font:inherit
}
p,h1,h2,h3,figure {
  margin:0
}
h1,h2,h3 {
  line-height:1.08
}
a,summary {
  touch-action:manipulation
}
::selection {
  background:var(--orange);
  color:var(--ink)
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}
.container {
  width:calc(100% - var(--gutter)*2);
  max-width:var(--max);
  margin-inline:auto
}
.section-space {
  padding-block:clamp(5rem,8vw,8rem)
}
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:12px 20px;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:translateY(0)
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  text-transform:uppercase;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--orange);
  line-height:1.6;
  margin-bottom:1.65rem
}
.eyebrow>span {
  height:1px;
  width:34px;
  background:currentColor;
  flex:none
}
.light-eyebrow {
  color:#bfc3c4
}
h2 {
  font-size:clamp(2.15rem,4.05vw,3.7rem);
  font-weight:500;
  letter-spacing:-.052em
}
h3 {
  font-weight:500;
  letter-spacing:-.02em
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:56px;
  padding:15px 22px;
  font-size:.9375rem;
  font-weight:700;
  transition:background .2s,color .2s
}
.button-primary {
  background:var(--orange);
  color:var(--ink)
}
.button-primary:hover {
  background:var(--orange-hover)
}
.button span {
  font-size:1.5rem;
  font-weight:400;
  line-height:1
}
.text-link {
  display:inline-flex;
  gap:20px;
  align-items:center;
  font-size:.9375rem;
  line-height:1.45;
  border-bottom:1px solid #626668;
  padding-block:10px;
  transition:color .2s,border-color .2s
}
.text-link:hover {
  color:var(--orange);
  border-color:var(--orange)
}
.text-link span {
  font-size:1.25rem
}
.dark-link {
  color:var(--ink);
  border-color:#b1b5b4
}
.dark-link:hover {
  color:#ad2c0f;
  border-color:#ad2c0f
}
/* Enmarca la imagen del logo aprobado sin deformarla ni redibujarla. */
.brand {
  position:relative;
  width:125px;
  height:80px;
  overflow:hidden;
  display:block;
  flex:none
}
.brand img {
  position:absolute;
  width:250px;
  max-width:none;
  height:auto;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(17,19,21,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--header)
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:clamp(20px,2.5vw,40px);
  font-size:.875rem;
  color:#d7d8d6
}
.desktop-nav a {
  padding-block:17px;
  position:relative
}
.desktop-nav a:after {
  position:absolute;
  bottom:7px;
  left:0;
  content:'';
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .25s
}
.desktop-nav a:hover:after {
  width:100%
}
.header-contact {
  display:flex;
  gap:22px;
  align-items:center;
  font-size:.875rem;
  font-weight:700;
  color:var(--paper)
}
.header-contact span {
  font-size:1.35rem;
  color:var(--orange)
}
.mobile-menu {
  display:none
}
/* Portada arquitectónica */
.hero {
  position:relative;
  min-height:min(850px,calc(100svh - var(--header)));
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate
}
.hero-image {
  position:absolute;
  inset:0 0 0 31%;
  z-index:-2
}
.hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% center
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#111315 0%,#111315 17%,rgba(17,19,21,.9) 33%,rgba(17,19,21,.45) 57%,rgba(17,19,21,.06) 85%),linear-gradient(0deg,rgba(17,19,21,.94),transparent 38%)
}
.hero-inner {
  padding-top:clamp(72px,8.2vw,135px)
}
.hero-copy {
  max-width:810px
}
.hero h1 {
  font-size:clamp(3.55rem,7.8vw,7.5rem);
  font-weight:500;
  letter-spacing:-.07em;
  line-height:.97;
  margin:24px 0 32px
}
.hero h1 em {
  font-style:normal;
  color:var(--orange)
}
.hero-description {
  font-size:clamp(1.1rem,1.55vw,1.4rem);
  line-height:1.5;
  max-width:455px;
  color:#ededeb
}
.hero-detail {
  font-size:.9375rem;
  line-height:1.7;
  max-width:440px;
  color:#b0b6b7;
  margin-top:16px
}
.hero-actions {
  display:flex;
  gap:30px;
  align-items:center;
  margin-top:34px
}
.hero-actions .text-link {
  font-size:.875rem
}
.hero-bottom {
  display:flex;
  align-items:center;
  gap:50px;
  justify-content:space-between;
  padding:54px 0 28px;
  margin-top:clamp(34px,3vw,54px)
}
.hero-bottom p {
  display:flex;
  align-items:center;
  gap:19px
}
.hero-bottom strong {
  font-size:3rem;
  letter-spacing:-.055em;
  line-height:1;
  font-weight:500
}
.hero-bottom p span {
  color:#babec0;
  font-size:.8125rem;
  line-height:1.45
}
.hero-bottom>a {
  font-size:.875rem;
  color:#d9dcdd;
  display:flex;
  gap:24px;
  align-items:center
}
.hero-bottom>a:hover {
  color:var(--orange)
}
.image-caption {
  font-size:.75rem;
  color:#c2c6c6;
  align-self:flex-end
}
/* Empresa y sectores */
.intro-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(45px,8vw,130px)
}
.muted-heading {
  color:#848a8d
}
.intro-copy p {
  color:#adb2b4;
  margin-top:22px;
  font-size:1rem;
  max-width:535px
}
.intro-copy .lead {
  color:var(--paper);
  font-size:1.45rem;
  letter-spacing:-.025em;
  line-height:1.4;
  margin:0
}
.sector-row {
  margin-top:76px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line)
}
.sector-row>div {
  padding:31px 26px 0 0
}
.sector-row>div+div {
  padding-left:29px;
  border-left:1px solid var(--line)
}
.sector-index {
  display:block;
  color:var(--orange);
  font-size:.8125rem;
  margin-bottom:26px
}
.sector-row h3 {
  font-size:1.3rem;
  margin-bottom:10px
}
.sector-row p {
  font-size:.875rem;
  color:#a5adaf
}
/* Servicios: detalles nativos accesibles y editables en HTML */
.services {
  background:var(--paper);
  color:var(--ink)
}
.services-layout {
  display:grid;
  grid-template-columns:.86fr 1.4fr;
  gap:clamp(45px,8vw,125px);
  align-items:start
}
.services-heading {
  position:sticky;
  top:calc(var(--header) + 50px)
}
.services .eyebrow,.contact .eyebrow {
  color:#aa3218
}
.services-heading h2 {
  max-width:390px
}
.services-heading>p:not(.eyebrow) {
  max-width:360px;
  color:var(--muted-light);
  margin-top:25px
}
.services-heading .text-link {
  margin-top:27px
}
.service {
  border-top:1px solid var(--line-light)
}
.service:last-of-type {
  border-bottom:1px solid var(--line-light)
}
.service summary {
  list-style:none;
  cursor:pointer;
  padding:28px 0;
  display:grid;
  grid-template-columns:30px 1fr 20px;
  gap:17px;
  align-items:start
}
.service summary::-webkit-details-marker {
  display:none
}
.service-number {
  color:#a33118;
  font-size:.8125rem;
  padding-top:5px
}
.service-title {
  display:block;
  font-size:clamp(1.15rem,1.62vw,1.5rem);
  line-height:1.2;
  font-weight:500
}
.service-subtitle {
  display:block;
  font-size:.875rem;
  color:var(--muted-light);
  margin-top:8px;
  line-height:1.5
}
.plus {
  position:relative;
  width:17px;
  height:17px;
  margin-top:6px
}
.plus:before,.plus:after {
  content:'';
  position:absolute;
  background:var(--ink);
  inset:7px 0 auto;
  height:1px
}
.plus:after {
  transform:rotate(90deg);
  transition:transform .2s
}
.service[open] .plus:after {
  transform:rotate(0)
}
.service[open] .service-title {
  color:#a83217
}
.service-body {
  padding:0 37px 30px 47px
}
.service-body p {
  color:#474e52;
  font-size:1rem;
  margin:0 0 15px
}
.service-body ul {
  padding-left:18px;
  margin:0;
  color:#444b4e;
  font-size:.9375rem;
  line-height:1.6
}
.service-body li {
  padding-left:4px;
  margin-top:8px
}
.service-body li::marker {
  color:#b84023
}
.scope-note {
  font-size:.8125rem!important;
  color:#676d6f;
  line-height:1.65;
  margin-top:23px
}
/* Portafolio */
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  margin-bottom:55px
}
.section-heading>p {
  max-width:315px;
  font-size:1rem;
  line-height:1.7;
  color:#adb2b4;
  padding-bottom:5px
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:48px 27px
}
.project-featured {
  grid-column:span 2;
  grid-row:span 2;
  display:flex;
  flex-direction:column
}
.project-image {
  position:relative;
  overflow:hidden;
  display:block;
  background:#262a2c;
  aspect-ratio:1.55
}
.project-featured .project-image {
  aspect-ratio:auto;
  flex:1;
  min-height:590px
}
.project img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
  aspect-ratio:inherit
}
.project-featured img {
  position:absolute;
  inset:0;
  object-position:55% 45%
}
.project-small .project-image {
  aspect-ratio:1.5
}
.project-small:last-child {
  grid-column:2 / 4
}
.project-small:last-child .project-image {
  aspect-ratio:3.1
}
.project a:hover img {
  transform:scale(1.035)
}
.photo-link {
  position:absolute;
  right:14px;
  bottom:14px;
  padding:7px 12px;
  font-size:.8125rem;
  background:rgba(17,19,21,.82);
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s,transform .2s
}
.project a:hover .photo-link,.project a:focus-visible .photo-link {
  opacity:1;
  transform:none
}
.project figcaption {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:15px;
  padding-top:18px
}
.project-type {
  color:#aeb3b6;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  display:block;
  margin-bottom:8px
}
.project h3 {
  font-size:1.45rem;
  line-height:1.2
}
.project-location {
  font-size:.875rem;
  color:#bbc0c2
}
.portfolio-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  margin-top:60px;
  padding-top:24px
}
.portfolio-bottom p {
  font-size:.9375rem;
  color:#aeb5b7
}
/* Galería de proyectos recibidos */
.gallery-note {
  display:flex;
  gap:10px;
  align-items:flex-start;
  max-width:780px;
  margin:-28px 0 42px;
  color:#9ea6a8;
  font-size:.8125rem;
  line-height:1.6
}
.gallery-note>span {
  color:var(--orange);
  font-size:.62rem;
  padding-top:.35rem
}
.photo-project-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px 27px
}
.project-card {
  min-width:0
}
.project-album {
  display:block
}
.project-album summary {
  list-style:none;
  cursor:pointer
}
.project-album summary::-webkit-details-marker {
  display:none
}
.project-album summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:7px
}
.project-cover {
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:1.25;
  background:#25292b
}
.project-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s,filter .25s
}
.project-album summary:hover .project-cover img,.project-album summary:focus-visible .project-cover img {
  transform:scale(1.035)
}
.cover-action {
  position:absolute;
  right:14px;
  bottom:14px;
  padding:7px 12px;
  background:rgba(17,19,21,.84);
  color:#fff;
  font-size:.8125rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s,transform .2s
}
.project-album summary:hover .cover-action,.project-album summary:focus-visible .cover-action,.legacy-album:hover .cover-action,.legacy-album:focus-visible .cover-action {
  opacity:1;
  transform:none
}
.project-card-caption {
  display:block;
  padding-top:17px
}
.project-title-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px
}
.project-name {
  display:block;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.025em
}
.project-count {
  flex:none;
  color:#8e9698;
  font-size:.75rem;
  white-space:nowrap
}
.project-card .project-location {
  display:block;
  margin-top:8px
}
.legacy-album {
  color:inherit
}
.album-content {
  border-top:1px solid var(--line);
  margin-top:23px;
  padding-top:17px
}
.album-toolbar {
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  color:#9ea6a8;
  font-size:.75rem;
  line-height:1.4
}
.album-toolbar span:last-child {
  color:#d1d5d5
}
.album-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px
}
.album-grid a {
  display:block;
  overflow:hidden;
  aspect-ratio:1;
  background:#25292b
}
.album-grid img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}
.album-grid a:hover img,.album-grid a:focus-visible img {
  transform:scale(1.05)
}
.brands {
  background:var(--white);
  color:var(--ink);
  padding-block:56px 68px
}
.brands-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:34px
}
.brands h2 {
  font-size:1.3rem;
  letter-spacing:-.02em
}
.brands-heading p {
  font-size:.875rem;
  color:#676e70
}
.brand-grid {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:24px;
  align-items:center
}
.brand-grid>div {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:80px
}
.brand-grid img {
  height:65px;
  width:100%;
  max-width:128px;
  object-fit:contain;
  filter:grayscale(1);
  transition:filter .25s
}
.brand-grid>div:hover img {
  filter:grayscale(0)
}
/* Proceso */
.process {
  background:var(--ink-soft)
}
.process-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  padding:0;
  margin:0;
  list-style:none
}
.process-list li {
  border-top:1px solid #52595c;
  padding:27px 24px 0 0;
  position:relative
}
.process-list li:before {
  position:absolute;
  content:'';
  width:7px;
  height:7px;
  top:-4px;
  left:0;
  background:var(--orange)
}
.step-number {
  display:block;
  font-size:.8125rem;
  color:var(--orange);
  margin-bottom:32px
}
.process-list h3 {
  font-size:1.25rem;
  margin-bottom:15px
}
.process-list p {
  font-size:.9375rem;
  line-height:1.65;
  color:#b4bbbd;
  max-width:205px
}
/* Contacto directo, sin backend simulado */
.contact {
  background:var(--paper);
  color:var(--ink)
}
.contact-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(48px,9vw,145px)
}
.contact h2 {
  font-size:clamp(2.8rem,5.7vw,5.25rem);
  line-height:1.02;
  letter-spacing:-.06em
}
.contact h2 em {
  font-style:normal;
  color:#b63516
}
.contact-grid>div>p:not(.eyebrow) {
  max-width:390px;
  margin-top:27px;
  color:#5e676a
}
.contact .button {
  margin-top:29px
}
.contact-details {
  align-self:center
}
.contact-item {
  padding-block:28px;
  border-bottom:1px solid var(--line-light)
}
.contact-item:first-child {
  padding-top:0
}
.contact-item>span {
  display:block;
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.12em;
  color:#62696b;
  margin-bottom:13px
}
.contact-item>a {
  display:block;
  font-size:clamp(1.4rem,2.5vw,2rem);
  letter-spacing:-.035em;
  line-height:1.4;
  width:fit-content;
  max-width:100%;
  overflow-wrap:anywhere
}
.contact-item a+a {
  margin-top:7px
}
.contact-item>a:hover {
  color:#a83318
}
.contact-item a span {
  font-size:.8em;
  margin-left:12px
}
.contact-note {
  font-size:.875rem;
  color:#62696b;
  margin-top:24px!important
}
.site-footer {
  padding-block:42px 24px
}
.footer-top {
  display:flex;
  align-items:center;
  gap:45px;
  padding-bottom:32px
}
.footer-brand {
  width:150px;
  height:96px
}
.footer-brand img {
  width:300px
}
.footer-top>p {
  font-size:.9375rem;
  line-height:1.6;
  color:#afb6b8
}
.back-top {
  margin-left:auto;
  font-size:.875rem;
  display:flex;
  gap:18px;
  align-items:center
}
.back-top:hover {
  color:var(--orange)
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:25px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  font-size:.75rem;
  color:#a8afb1
}
/* Tableta */
@media(min-width:1700px) {
  .hero-inner {
    padding-top:120px
  }
  .hero-bottom {
    padding-top:40px;
    margin-top:26px
  }
  .hero {
    min-height:840px
  }
}
@media(max-width:1100px) {
  :root {
    --header:84px
  }
  .desktop-nav {
    gap:20px
  }
  .header-contact {
    display:none
  }
  .hero {
    min-height:780px
  }
  .hero h1 {
    font-size:clamp(4.4rem,9.1vw,6.6rem)
  }
  .hero-image {
    inset:0 0 0 22%
  }
  .hero-actions {
    gap:22px
  }
  .hero-bottom {
    gap:25px;
    flex-wrap:wrap
  }
  .image-caption {
    flex-basis:100%;
    font-size:.75rem;
    color:#bfc5c7
  }
  .intro-grid {
    gap:50px
  }
  .services-layout {
    grid-template-columns:.82fr 1.25fr;
    gap:45px
  }
  .service summary {
    gap:10px;
    grid-template-columns:25px 1fr 18px
  }
  .service-body {
    padding-left:35px;
    padding-right:15px
  }
  .project-grid {
    gap:35px 20px
  }
  .photo-project-grid {
    gap:42px 20px
  }
  .album-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .project-featured .project-image {
    min-height:530px
  }
  .project figcaption {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:6px
  }
  .project h3 {
    font-size:1.25rem
  }
  .brand-grid {
    grid-template-columns:repeat(4,1fr);
    gap:22px 30px
  }
  .process-list {
    grid-template-columns:repeat(3,1fr);
    gap:40px 0
  }
  .process-list p {
    max-width:245px
  }
  .contact-grid {
    gap:65px
  }
  .contact-item>a {
    font-size:1.55rem
  }
}
/* Móvil */
@media(max-width:760px) {
  :root {
    --header:78px;
    --gutter:1.4rem
  }
  .section-space {
    padding-block:70px
  }
  h2 {
    font-size:2.3rem;
    line-height:1.13;
    letter-spacing:-.045em
  }
  .eyebrow {
    font-size:.75rem;
    letter-spacing:.1em;
    margin-bottom:20px
  }
  .header-inner {
    gap:15px
  }
  .brand {
    width:109px;
    height:68px
  }
  .brand img {
    width:219px
  }
  /* Mantiene el símbolo y el descriptor completos dentro del encabezado. */
  .site-header .brand {
    width:116px;
    height:72px
  }
  .site-header .brand img {
    width:200px;
    height:auto;
    top:50%
  }
  .desktop-nav {
    display:none
  }
  .mobile-menu {
    display:block
  }
  .mobile-menu summary {
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    font-size:.875rem;
    padding:14px 0 14px 18px;
    list-style:none
  }
  .mobile-menu summary::-webkit-details-marker {
    display:none
  }
  .menu-icon {
    width:22px;
    height:14px;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    position:relative
  }
  .menu-icon:after {
    content:'';
    position:absolute;
    inset:6px 0 auto;
    border-top:1px solid currentColor
  }
  .mobile-menu[open] .menu-icon {
    border:0
  }
  .mobile-menu[open] .menu-icon:before,.mobile-menu[open] .menu-icon:after {
    content:'';
    position:absolute;
    top:6px;
    left:0;
    right:0;
    border-top:1px solid currentColor;
    transform:rotate(45deg)
  }
  .mobile-menu[open] .menu-icon:after {
    transform:rotate(-45deg)
  }
  .mobile-menu nav {
    position:absolute;
    inset:100% 0 auto;
    background:#171a1c;
    border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 25px;
    box-shadow:0 25px 30px #0005
  }
  .mobile-menu nav a {
    display:block;
    padding:13px 0;
    font-size:1.1rem;
    border-bottom:1px solid var(--line)
  }
  .mobile-menu nav a:last-child {
    color:var(--orange);
    border-bottom:0
  }
  .hero {
    min-height:0
  }
  .hero-image {
    inset:0
  }
  .hero-image img {
    object-position:63% center
  }
  .hero:before {
    background:linear-gradient(90deg,rgba(17,19,21,.93),rgba(17,19,21,.4)),linear-gradient(0deg,#111315 0%,rgba(17,19,21,.55) 45%,rgba(17,19,21,.18))
  }
  .hero-inner {
    padding-top:66px
  }
  .hero .eyebrow {
    font-size:.75rem;
    gap:8px;
    letter-spacing:.06em;
    flex-wrap:wrap
  }
  .hero .eyebrow>span {
    width:18px
  }
  .hero h1 {
    font-size:clamp(3.4rem,12.7vw,5.8rem);
    line-height:1.02;
    margin:25px 0 29px;
    letter-spacing:-.06em
  }
  .hero-description {
    font-size:1.125rem;
    max-width:330px
  }
  .hero-detail {
    font-size:.9375rem;
    max-width:335px;
    color:#c1c7c8
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
    margin-top:29px
  }
  .button {
    font-size:.875rem;
    min-height:54px;
    gap:25px
  }
  .hero-actions .button {
    min-width:260px
  }
  .hero-actions .text-link {
    padding-block:9px
  }
  .hero-bottom {
    margin-top:48px;
    padding:26px 0 27px;
    border-top:1px solid var(--line);
    gap:25px
  }
  .hero-bottom strong {
    font-size:2.75rem
  }
  .hero-bottom>a {
    font-size:.875rem;
    max-width:150px;
    gap:12px
  }
  .hero-bottom p {
    gap:13px
  }
  .hero-bottom p span {
    font-size:.8125rem
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .intro-copy .lead {
    font-size:1.25rem
  }
  .intro-copy p {
    font-size:1rem;
    margin-top:18px
  }
  .sector-row {
    margin-top:42px;
    grid-template-columns:1fr 1fr;
    row-gap:27px
  }
  .sector-row>div,.sector-row>div+div {
    padding:23px 15px 0 0;
    border-left:0
  }
  .sector-row>div:nth-child(even) {
    padding-left:19px;
    border-left:1px solid var(--line)
  }
  .sector-row>div:nth-child(n+3) {
    border-top:1px solid var(--line)
  }
  .sector-index {
    margin-bottom:16px
  }
  .sector-row h3 {
    font-size:1.125rem
  }
  .sector-row p {
    font-size:.875rem
  }
  .services-layout {
    grid-template-columns:1fr;
    gap:42px
  }
  .services-heading {
    position:static
  }
  .services-heading>p:not(.eyebrow) {
    margin-top:19px
  }
  .services-heading .text-link {
    margin-top:17px
  }
  .service summary {
    padding:23px 0;
    gap:10px;
    grid-template-columns:24px 1fr 17px
  }
  .service-title {
    font-size:1.17rem;
    line-height:1.25
  }
  .service-subtitle {
    font-size:.875rem;
    margin-top:6px
  }
  .service-number {
    padding-top:3px;
    font-size:.8125rem
  }
  .service-body {
    padding:0 18px 26px 34px
  }
  .service-body p,.service-body ul {
    font-size:.9375rem;
    line-height:1.7
  }
  .scope-note {
    font-size:.8125rem!important
  }
  .section-heading {
    display:block;
    margin-bottom:32px
  }
  .section-heading>p {
    margin-top:24px;
    max-width:370px;
    font-size:1rem
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .photo-project-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .gallery-note {
    margin:-14px 0 30px
  }
  .project-cover {
    aspect-ratio:1.18
  }
  .project-title-row {
    align-items:flex-start
  }
  .project-name {
    font-size:1.25rem
  }
  .album-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px
  }
  .album-toolbar {
    flex-wrap:wrap
  }
  .project-featured,.project-small:last-child {
    grid-column:auto;
    grid-row:auto
  }
  .project-image,.project-small .project-image,.project-small:last-child .project-image {
    aspect-ratio:1.2
  }
  .project-featured .project-image {
    aspect-ratio:1.04;
    min-height:0;
    flex:auto
  }
  .project-featured img {
    position:static
  }
  .project figcaption {
    align-items:flex-end;
    flex-wrap:nowrap
  }
  .project h3 {
    font-size:1.35rem
  }
  .project-type {
    font-size:.75rem;
    margin-bottom:8px
  }
  .project-location {
    font-size:.875rem
  }
  .photo-link {
    opacity:1;
    transform:none;
    font-size:.8125rem;
    background:rgba(17,19,21,.9)
  }
  .portfolio-bottom {
    display:block;
    margin-top:36px;
    padding-top:25px
  }
  .portfolio-bottom .text-link {
    margin-top:11px
  }
  .brands {
    padding-block:42px
  }
  .brands-heading {
    display:block;
    margin-bottom:25px
  }
  .brands h2 {
    font-size:1.2rem
  }
  .brands-heading p {
    margin-top:8px
  }
  .brand-grid {
    gap:20px 15px
  }
  .brand-grid>div {
    height:60px
  }
  .brand-grid img {
    height:52px
  }
  .process-list {
    grid-template-columns:1fr;
    gap:0
  }
  .process-list li {
    padding:23px 0 23px 49px
  }
  .process-list li:before {
    display:none
  }
  .step-number {
    position:absolute;
    left:0;
    top:24px;
    margin:0
  }
  .process-list h3 {
    font-size:1.2rem;
    margin-bottom:11px
  }
  .process-list p {
    font-size:.9375rem;
    max-width:100%
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .contact h2 {
    font-size:clamp(2.75rem,11vw,4.2rem)
  }
  .contact-grid>div>p:not(.eyebrow) {
    font-size:1rem;
    margin-top:23px
  }
  .contact-details {
    width:100%
  }
  .contact-item {
    padding-block:23px
  }
  .contact-item>a {
    font-size:1.6rem
  }
  .contact .button {
    max-width:100%;
    gap:14px
  }
  .site-footer {
    padding-block:28px 23px
  }
  .footer-top {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:14px;
    padding-bottom:24px
  }
  .footer-top>p {
    font-size:.875rem
  }
  .back-top {
    grid-column:1/-1;
    margin-left:0;
    width:fit-content;
    margin-top:13px
  }
  .footer-bottom {
    display:block;
    font-size:.75rem;
    line-height:1.8
  }
  .footer-bottom span {
    display:block
  }
  .footer-bottom span+span {
    margin-top:9px
  }
}
@media(max-width:370px) {
  :root {
    --gutter:1.1rem
  }
  .hero h1 {
    font-size:3.3rem
  }
  .hero-bottom>a {
    max-width:112px
  }
  .hero-bottom {
    gap:10px
  }
  .contact-item>a {
    font-size:1.45rem
  }
  .contact .button {
    font-size:.875rem;
    padding-inline:16px
  }
  .brand-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media print {
  .site-header,.hero-actions,.hero-bottom>a,.mobile-menu,.back-top,.photo-link {
    display:none!important
  }
  body {
    background:white;
    color:black
  }
  .hero,.hero h1,.hero p,.intro p,.process p,.projects p {
    color:black
  }
  .hero-image,.hero:before {
    display:none
  }
  .hero {
    min-height:0
  }
  .hero-inner {
    padding-top:30px
  }
  .section-space {
    padding-block:32px
  }
  .services-heading {
    position:static
  }
  .service-body {
    display:block!important
  }
  .service summary {
    break-after:avoid
  }
  .service {
    break-inside:avoid
  }
  .project-grid {
    grid-template-columns:1fr 1fr
  }
  .project-featured {
    grid-column:auto;
    grid-row:auto
  }
  .project-featured .project-image {
    min-height:200px
  }
  .project-small:last-child {
    grid-column:auto
  }
  .project-image {
    max-height:240px
  }
  .process,.contact,.services {
    background:white
  }
  .site-footer {
    background:#111315;
    color:white
  }
  .hero-bottom {
    margin-top:0
  }
  .brand-grid img {
    filter:none
  }
}