/* Shared design system — the six Detailed Pixels concepts. */
@font-face{
  font-family:Oswald;
  src:url('../assets/fonts/Oswald.ttf') format('truetype');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
:root{
  --green:#073f2d;
  --forest:#032f23;
  --accent:#72a94d;
  --ink:#151d19;
  --paper:#f0eee7;
  --muted:#454b46;
  --border:#d3d2c9;
  --width:1240px;
  --gutter:clamp(1rem,4vw,3.5rem);
  --surface:#e8e6de;
  --border-dark:#749283;
  --on-dark:#e0e8e1;
  --action:#27663c;
  --action-hover:#347b48;
  --text-small:.9375rem;
  --section-space:clamp(2rem,3.2vw,3rem);
  --card-gap:clamp(1rem,2.4vw,2rem);
  --focus-light:#bbdc9c;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --display:Oswald,'Arial Narrow',sans-serif;
  --body:Arial,Helvetica,sans-serif;
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:1rem;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.55;
}
img{
  display:block;
  max-width:100%;
  height:auto;
}
a{
  color:inherit;
  text-decoration:none;
}
button{
  font:inherit;
  cursor:pointer;
}
a,button{
  touch-action:manipulation;
}
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
}
.hero :focus-visible,.theme-dark :focus-visible,.contact-cta :focus-visible{
  outline-color:var(--focus-light);
}
h1,h2,h3,p{
  margin:0;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  line-height:1.15;
}
h2{
  font-size:clamp(1.65rem,2.5vw,2.45rem);
  color:var(--green);
}
h3{
  font-size:clamp(1.15rem,1.5vw,1.5rem);
  color:var(--green);
}
p+p{
  margin-top:.75rem;
}
.wrap{
  width:min(var(--width),calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
}
section[id],article[id]{
  scroll-margin-top:var(--space-3);
}
.section-pad{
  padding-block:var(--section-space);
}
.eyebrow{
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:500;
}
.section-heading{
  text-align:center;
  margin-bottom:var(--space-3);
}
.section-heading .eyebrow{
  margin-bottom:.35rem;
}
.section-heading>p:not(.eyebrow){
  margin-top:.45rem;
}
.center{
  text-align:center;
}
.accent-rule{
  display:block;
  width:4rem;
  height:4px;
  background:var(--accent);
  margin-block:1.4rem;
}
.button,.text-link{
  font-family:var(--display);
  font-size:1rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.065em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.button{
  padding:.7rem 1.25rem;
  border:1px solid transparent;
  min-height:44px;
  transition:background .2s,color .2s,border-color .2s;
}
.button-primary{
  background:var(--action);
  color:#fff;
}
.button-primary:hover{
  background:var(--action-hover);
}
.button-outline{
  border-color:var(--green);
  color:var(--green);
}
.button-outline:hover{
  background:var(--green);
  color:#fff;
}
.text-link{
  min-height:44px;
}
.text-link span,.button span{
  transition:transform .2s;
}
.text-link:hover span,.button:hover span{
  transform:translateX(4px);
}
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  background:white;
  color:var(--green);
  padding:1rem;
  z-index:20;
}
.skip-link:focus{
  top:1rem;
}
/* Hero and shared navigation. */
.hero{
  color:#fff;
  background:linear-gradient(90deg,rgba(2,9,12,.94) 0%,rgba(2,9,12,.79) 28%,rgba(2,9,12,.18) 62%),url('../assets/images/home-hero-client.png') center 48%/cover no-repeat;
  min-height:620px;
  position:relative;
}
.site-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
  padding-top:12px;
  position:relative;
  z-index:5;
}
.brand{
  flex:0 0 250px;
}
.brand img{
  width:250px;
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem,2.8vw,2.8rem);
  padding-top:1.4rem;
}
.site-header nav :is(a,.nav-unavailable){
  font:500 1rem var(--display);
  text-transform:uppercase;
  letter-spacing:.055em;
  min-height:44px;
  display:flex;
  align-items:center;
  padding-block:.35rem .7rem;
  position:relative;
}
.site-header nav a:after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}
.site-header nav a:hover:after,.site-header nav a[aria-current]:after{
  transform:scaleX(1);
}
.hero-content{
  padding-top:1.9rem;
  padding-bottom:2rem;
}
.hero-content .eyebrow{
  color:#9dca7b;
  margin-bottom:.5rem;
}
.hero h1{
  font-size:clamp(3rem,5.7vw,5.25rem);
  line-height:1.06;
  letter-spacing:.005em;
  max-width:620px;
}
.hero-description{
  max-width:365px;
  font-size:1.1rem;
  line-height:1.5;
  margin-bottom:var(--space-3);
}
.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  color:white;
  background:var(--forest);
  border:1px solid #a1b3a7;
  min-height:44px;
  padding:.55rem .8rem;
}
.menu-toggle[hidden]{
  display:none;
}
/* Credibility band. */
.credibility{
  background:var(--forest);
  color:white;
  padding-block:1.15rem;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  padding:.3rem 1.4rem;
  border-right:1px solid #709080;
}
.stat:first-child{
  padding-left:0;
}
.stat:last-child{
  border:0;
  padding-right:0;
}
.stat svg{
  width:48px;
  height:48px;
  flex-shrink:0;
}
.stat p{
  font:400 1rem/1.3 var(--display);
  letter-spacing:.045em;
  text-transform:uppercase;
}
/* Flat service cards. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
}
.card{
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.service-card{
  position:relative;
  text-align:center;
}
.image-wrap{
  overflow:hidden;
}
.image-wrap img{
  width:100%;
  height:auto;
  object-fit:cover;
  transition:transform .5s;
}
.service-card .image-wrap{
  aspect-ratio:1.9;
}
.service-card .image-wrap img{
  height:100%;
}
.service-card:hover .image-wrap img,.project-card:hover .image-wrap img{
  transform:scale(1.035);
}
.service-icon{
  border-radius:50%;
  border:2px solid var(--paper);
  background:var(--green);
  color:white;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin:-34px auto 0;
  position:relative;
  z-index:1;
}
.service-icon svg{
  width:42px;
  height:42px;
}
.card-copy{
  padding:var(--space-2) var(--space-3) .75rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
}
.card-copy h3{
  max-width:280px;
  min-height:2.3em;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
}
.card-copy p{
  margin-bottom:.65rem;
  line-height:1.45;
  font-size:1rem;
}
.card-copy .text-link{
  margin-top:auto;
  color:var(--green);
}
/* Editorial company introduction. */
.family{
  display:grid;
  grid-template-columns:38% 62%;
  background:var(--surface);
}
.family-copy{
  padding:var(--section-space) var(--space-4) var(--section-space) max(var(--gutter),calc((100vw - var(--width))/2));
  align-self:center;
}
.family h2{
  margin:.8rem 0 1rem;
  max-width:420px;
}
.family p:not(.eyebrow){
  font-size:1rem;
  max-width:420px;
}
.family .button{
  margin-top:var(--space-3);
}
.family>img{
  width:100%;
  height:100%;
  min-height:350px;
  object-fit:cover;
  object-position:center;
}
/* Six capability groups. */
.experience{
  background:var(--forest);
  color:white;
}
.experience h2,.experience h3{
  color:white;
}
.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:1.25rem;
}
.capability{
  display:flex;
  gap:1.3rem;
  align-items:center;
  padding:1.3rem 1.6rem;
  border-right:1px solid var(--border-dark);
  border-bottom:1px solid var(--border-dark);
}
.capability:nth-child(3n){
  border-right:0;
}
.capability:nth-child(n+4){
  border-bottom:0;
}
.capability svg{
  width:64px;
  height:64px;
  flex-shrink:0;
}
.capability h3{
  font-size:1.125rem;
  letter-spacing:.02em;
}
.capability p{
  font-size:var(--text-small);
  line-height:1.5;
  margin-top:.4rem;
}
.experience .text-link{
  margin-top:.35rem;
}
/* Selected project architecture. */
.project-grid{
  display:grid;
  grid-template-columns:.88fr repeat(3,1fr);
  gap:1.2rem;
}
.project-intro h2{
  font-size:clamp(1.65rem,2vw,2rem);
  margin:.75rem 0 1rem;
}
.project-intro>p:not(.eyebrow){
  font-size:1rem;
  line-height:1.6;
}
.project-card .image-wrap{
  aspect-ratio:1.86;
}
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-copy{
  padding:var(--space-2) var(--space-2) .5rem;
  display:flex;
  flex:1;
  flex-direction:column;
}
.project-copy .eyebrow{
  font-size:var(--text-small);
}
.project-copy h3{
  font-size:1.25rem;
  line-height:1.25;
  margin:.35rem 0 .45rem;
  color:var(--ink);
}
.metadata{
  font-family:var(--display);
  font-size:var(--text-small);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.project-copy .text-link{
  margin-top:auto;
  justify-content:flex-start;
  color:var(--green);
  font-size:var(--text-small);
}
.project-action{
  margin-top:1rem;
}
/* Phone call-to-action and reusable footer. */
.contact-cta{
  text-align:center;
  color:white;
  background:linear-gradient(#07100ed4,#07100ed4),url('../assets/images/concept-remodeling.webp') center/cover;
  padding:var(--section-space) 0;
}
.contact-cta h2{
  color:white;
  font-size:clamp(1.65rem,2.8vw,2.5rem);
}
.contact-cta p{
  margin:.5rem 0 .85rem;
}
.phone-cta{
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:.09em;
  background:#28603b;
  border:1px solid white;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  padding:.4rem 1.6rem;
  min-height:48px;
  transition:background .2s;
}
.phone-cta:hover{
  background:#367b4a;
}
.theme-dark,.site-footer{
  background:var(--forest);
  color:var(--on-dark);
}
.theme-dark h2,.theme-dark h3{
  color:white;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr 1fr .9fr;
  gap:var(--space-4);
  padding-block:var(--section-space);
}
.footer-grid>div+div{
  border-left:1px solid #718c7d;
  padding-left:2rem;
  margin-top:.5rem;
}
.footer-brand img{
  width:215px;
  margin-bottom:.5rem;
}
.footer-grid p,.footer-grid a,.footer-grid .nav-unavailable{
  font-size:var(--text-small);
}
.footer-grid a,.footer-grid .nav-unavailable{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding-block:.45rem;
}
.footer-brand>a{
  padding:0;
}
.nav-unavailable{
  opacity:.72;
  cursor:default;
}
.footer-brand p{
  max-width:275px;
}
.footer-grid h2{
  font-size:1rem;
  letter-spacing:.09em;
  color:white;
  margin-bottom:.5rem;
}
.footer-grid nav,.footer-grid>div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-grid a:hover,.footer-legal a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-legal{
  display:flex;
  justify-content:center;
  gap:2rem;
  font-size:var(--text-small);
  align-items:center;
  padding:.1rem 0 .75rem;
}
.footer-legal .nav-unavailable{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.attribution{
  text-align:center;
  border-top:1px solid #3b6252;
  color:#c4d1c7;
  font-size:.85rem;
  padding:.65rem 1rem;
}
.attribution span{
  margin-inline:.4rem;
}
/* Selective motion stays visible without JavaScript. */
@keyframes enter-section{from{
  transform:translateY(18px);
}
to{
  transform:translateY(0);
}}
.section-arrived{
  animation:enter-section .65s cubic-bezier(.2,.65,.3,1) both;
}

/* Large desktop retains the approved editorial proportions. */
@media (min-width:1600px) {
  .hero {
  min-height:690px;
}
  .hero-content {
  padding-top:3rem;
}
}
/* Laptop: three equal project cards below their introduction. */
@media (max-width:1100px) {
  .brand {
  flex-basis:205px;
}
  .brand img {
  width:205px;
}
  .site-header nav {
  gap:1.25rem;
}
  .hero {
  min-height:590px;
}
  .stat {
  padding:.3rem .85rem;
  gap:.75rem;
}
  .stat svg {
  width:38px;
  height:42px;
}
  .family {
  grid-template-columns:44% 56%;
}
  .capability {
  gap:.8rem;
  padding:1.15rem 1rem;
  align-items:flex-start;
}
  .capability svg {
  width:44px;
  height:44px;
}
  .project-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
}
  .project-intro {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:2rem;
}
  .project-intro>.eyebrow {
  grid-column:1/-1;
}
  .project-intro h2 {
  margin-top:.5rem;
}
  .project-intro>p:not(.eyebrow) {
  margin-top:.5rem;
}
  .footer-grid {
  gap:1.5rem;
  grid-template-columns:1.2fr .7fr 1fr 1fr;
}
  .footer-grid>div+div {
  padding-left:1.25rem;
}
}
/* Disclosure navigation expands in flow: no covered hero or focus trap. */
@media (max-width:900px) {
  .site-header {
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
  .brand {
  flex-basis:185px;
}
  .brand img {
  width:185px;
}
  .menu-toggle:not([hidden]) {
  display:inline-flex;
}
  .site-header nav {
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.5rem;
  padding:.5rem 1rem;
  background:var(--forest);
  border:1px solid var(--border-dark);
}
  .site-header nav :is(a,.nav-unavailable) {
  min-height:48px;
  padding:.6rem .25rem;
  font-size:1rem;
  border-bottom:1px solid #ffffff20;
}
  .site-header nav a:after {
  height:2px;
}
  .js-enabled .site-header nav {
  display:none;
}
  .js-enabled .site-header nav.is-open {
  display:grid;
}
  .hero-content {
  padding-top:2.5rem;
}
  .hero h1 {
  font-size:clamp(3rem,7.5vw,4.5rem);
}
  .card-copy {
  padding:1rem .85rem .75rem;
}
  .card-copy h3 {
  font-size:1.25rem;
}
  .card-copy .text-link {
  font-size:.9375rem;
  letter-spacing:.035em;
}
  .capability-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
  .capability:nth-child(n) {
  border-right:0;
  border-bottom:1px solid var(--border-dark);
}
  .capability:nth-child(odd) {
  border-right:1px solid var(--border-dark);
}
  .capability:nth-last-child(-n+2) {
  border-bottom:0;
}
  .footer-grid {
  grid-template-columns:1.2fr 1fr;
  gap:1.5rem 2rem;
}
  .footer-grid>div:nth-child(3) {
  border:0;
  padding-left:0;
}
  .project-copy h3 {
  font-size:1.2rem;
}
  .project-copy .text-link {
  letter-spacing:.03em;
}
}
/* Small tablet: wide service rows preserve legibility and imagery. */
@media (max-width:700px) {
  .hero {
  min-height:580px;
  background-position:58% center;
}
  .hero-description {
  max-width:350px;
}
  .stats {
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:1rem;
}
  .stat:nth-child(n) {
  justify-content:flex-start;
  padding:.25rem .75rem;
  border-right:0;
}
  .stat:nth-child(odd) {
  padding-left:0;
  border-right:1px solid #709080;
}
  .stat p {
  font-size:.9375rem;
  letter-spacing:.025em;
}
  .service-grid {
  grid-template-columns:1fr;
  gap:1.25rem;
}
  .service-card {
  display:grid;
  grid-template-columns:40% 60%;
  text-align:left;
}
  .service-card .image-wrap {
  aspect-ratio:auto;
  grid-row:1/3;
  min-height:230px;
}
  .service-icon {
  position:absolute;
  left:calc(40% - 27px);
  top:1rem;
  width:54px;
  height:54px;
  margin:0;
}
  .service-icon svg {
  width:32px;
  height:32px;
}
  .card-copy {
  align-items:flex-start;
  padding:1.25rem 1rem 1rem 2.5rem;
}
  .card-copy h3 {
  min-height:0;
  justify-content:flex-start;
}
  .family {
  grid-template-columns:1fr 1fr;
}
  .family-copy {
  padding:2rem var(--gutter);
}
  .family h2 {
  font-size:1.8rem;
}
  .family>img {
  object-position:60% center;
}
  .project-grid {
  grid-template-columns:1fr;
}
  .project-intro {
  display:block;
  max-width:36rem;
}
  .project-card {
  display:grid;
  grid-template-columns:42% 58%;
}
  .project-card .image-wrap {
  aspect-ratio:auto;
  min-height:220px;
}
  .project-copy {
  padding:1rem 1.25rem .75rem;
}
  .project-copy h3 {
  font-size:1.4rem;
}
  .footer-legal {
  flex-wrap:wrap;
  gap:.25rem 1.5rem;
}
}
/* Mobile retains two-column capability and footer groups. */
@media (max-width:540px) {
  .hero {
  background-position:60% center;
  background-image:linear-gradient(90deg,#02090cd9,#02090c52),url('../assets/images/home-hero-client.png');
}
  .hero-content {
  padding-top:2rem;
  padding-bottom:2.5rem;
}
  .hero h1 {
  font-size:clamp(2.5rem,10.5vw,3.8rem);
}
  .hero-description {
  font-size:1rem;
  max-width:310px;
}
  .hero-content .eyebrow {
  font-size:.9375rem;
  letter-spacing:.025em;
}
  .brand {
  flex-basis:170px;
}
  .brand img {
  width:170px;
}
  .service-card {
  display:flex;
  text-align:center;
}
  .service-card .image-wrap {
  aspect-ratio:2.05;
  min-height:0;
}
  .service-icon {
  position:relative;
  left:auto;
  top:auto;
  width:62px;
  height:62px;
  margin:-31px auto 0;
}
  .card-copy {
  align-items:center;
  padding:1rem 1.25rem .75rem;
}
  .card-copy h3 {
  max-width:none;
  font-size:1.4rem;
  text-align:center;
}
  .card-copy p {
  max-width:360px;
}
  .card-copy .text-link {
  font-size:1rem;
}
  .family {
  grid-template-columns:1fr;
}
  .family h2 {
  max-width:330px;
  font-size:1.9rem;
}
  .family>img {
  height:auto;
  aspect-ratio:1.6;
  min-height:0;
  object-position:center;
}
  .capability {
  flex-direction:column;
  gap:.65rem;
  padding:1.2rem .85rem;
}
  .capability h3 {
  font-size:1.125rem;
  overflow-wrap:break-word;
}
  .capability svg {
  width:40px;
  height:40px;
}
  .project-card {
  display:flex;
}
  .project-card .image-wrap {
  aspect-ratio:2.05;
  min-height:0;
}
  .project-copy {
  padding:1rem 1.25rem .65rem;
}
  .project-copy .text-link {
  font-size:1rem;
}
  .footer-grid {
  grid-template-columns:1fr 1fr;
  gap:1.5rem 1rem;
}
  .footer-brand {
  grid-column:1/-1;
}
  .footer-grid>div+div {
  padding-left:0;
  border:0;
}
  .footer-grid>div:last-child {
  grid-column:1/-1;
  border-top:1px solid #718c7d;
  padding-top:1rem;
}
  .footer-legal>span:first-child {
  width:100%;
  text-align:center;
}
  .stat {
  gap:.6rem;
}
  .stat svg {
  width:32px;
  height:36px;
}
  .phone-cta {
  padding:.5rem .8rem;
  gap:.5rem;
  font-size:clamp(1.3rem,5.5vw,1.65rem);
  letter-spacing:.055em;
}
}
@media (max-width:360px) {
  .brand {
  flex-basis:155px;
}
  .brand img {
  width:155px;
}
  .site-header {
  gap:.75rem;
}
  .menu-toggle {
  padding:.5rem .65rem;
}
  .hero {
  min-height:560px;
}
  .stat svg {
  width:28px;
}
  .stat p {
  font-size:.9rem;
  letter-spacing:0;
}
  .capability {
  padding:1rem .65rem;
}
}
@media (prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto;
}
  *,*:before,*:after {
  animation:none!important;
  transition:none!important;
}
  .image-wrap img {
  transform:none!important;
}
}