:root{--content-ink:#202124;--content-muted:#626765;--content-taupe:#9d8978;--content-line:rgba(80,80,80,.18);--content-bg:#f8f6f2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--content-bg);color:var(--content-ink)}a{color:inherit;text-decoration:none}.content-header{display:flex;align-items:center;justify-content:space-between;min-height:92px;padding:0 6vw;border-bottom:1px solid var(--content-line);background:#fff}.content-header>a:first-child{width:190px}.content-header img{display:block;width:100%}.content-header nav{display:flex;align-items:center;gap:24px;font-size:14px}.content-header nav a[aria-current=page]{border-bottom:1px solid currentColor}.content-cta,.content-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;border-radius:999px;background:var(--content-taupe);color:#fff}.content-wrap{width:min(1440px,calc(100% - 12vw));margin-inline:auto}.content-breadcrumb{padding:22px 0;border-bottom:1px solid var(--content-line);font-size:14px;color:var(--content-muted)}.content-breadcrumb ol{display:flex;gap:9px;margin:0;padding:0;list-style:none}.content-breadcrumb li+li:before{margin-right:9px;content:"/"}.content-hero{display:grid;min-height:600px;grid-template-columns:46% 54%;border-bottom:1px solid var(--content-line)}.content-hero>div{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;padding:70px 6vw}.content-hero figure{margin:0;min-width:0;overflow:hidden}.content-hero img{display:block;width:100%;height:100%;object-fit:cover}.content-eyebrow{margin:0 0 18px;color:var(--content-taupe);font-size:14px;letter-spacing:.14em}.content-hero h1,.content-section h2{margin:0 0 24px;font-size:clamp(42px,4.8vw,76px);line-height:1.16}.content-hero p,.content-section p{color:var(--content-muted);font-size:18px;line-height:1.75}.content-section{padding:90px 0}.content-section>header{max-width:900px;margin-bottom:44px}.content-section h2{font-size:clamp(36px,3.6vw,58px)}.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.content-card{display:flex;min-height:310px;padding:32px;flex-direction:column;border:1px solid var(--content-line);background:#fff}.content-card small{color:var(--content-taupe);letter-spacing:.08em}.content-card h2,.content-card h3{margin:28px 0 14px;font-size:clamp(24px,2vw,32px)}.content-card p{margin:0;font-size:16px}.content-card a{margin-top:auto;padding-top:28px;color:#806b59}.project-list{grid-template-columns:repeat(3,minmax(0,1fr))}.project-card{padding:0;overflow:hidden}.project-card img{display:block;width:100%;height:280px;object-fit:cover}.project-card>div{display:flex;min-height:220px;padding:26px;flex-direction:column}.project-card h2{margin:0 0 8px;font-size:25px}.project-card p{font-size:15px}.project-card a{margin-top:auto}.project-detail-hero{min-height:0}.project-detail-hero figure{min-height:0;aspect-ratio:16/10}.project-detail-hero figure img{object-position:var(--cover-x,50%) var(--cover-y,50%);scale:var(--cover-zoom,1);transform-origin:var(--cover-x,50%) var(--cover-y,50%)}.project-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--content-line);border-bottom:1px solid var(--content-line)}.project-facts div{padding:26px}.project-facts div+div{border-left:1px solid var(--content-line)}.project-facts small{display:block;color:var(--content-taupe);letter-spacing:.08em}.project-facts strong{display:block;margin-top:8px}.content-final{padding:80px 6vw;background:#292a28;color:#fff;text-align:center}.content-final p{max-width:720px;margin:18px auto 28px;color:rgba(255,255,255,.72);line-height:1.7}.content-footer{display:flex;justify-content:space-between;gap:24px;padding:32px 6vw;background:#292a28;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7)}.content-footer nav{display:flex;gap:22px}
@media(max-width:1050px){.content-header nav{display:none}.content-hero{grid-template-columns:1fr}.content-hero figure{min-height:430px}.project-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.content-header{min-height:68px;padding:10px 20px}.content-header>a:first-child{width:130px}.content-cta{min-height:44px;padding:0 16px;font-size:13px}.content-wrap{width:calc(100% - 40px)}.content-hero{min-height:0}.content-hero>div{padding:64px 20px}.content-hero figure{min-height:300px}.content-section{padding:70px 0}.content-grid,.project-list{grid-template-columns:1fr}.project-facts{grid-template-columns:1fr}.project-facts div+div{border-left:0;border-top:1px solid var(--content-line)}.content-footer{align-items:flex-start;flex-direction:column}.content-footer nav{flex-wrap:wrap}}
.services-intro{display:grid;padding:88px 0 64px;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:8vw;align-items:end;border-bottom:1px solid var(--content-line)}.services-intro h1{max-width:850px;margin:0;font-size:clamp(48px,5.5vw,84px);line-height:1.12}.services-intro>div:last-child{padding-bottom:8px}.services-intro p:last-child{margin:0;color:var(--content-muted);font-size:18px;line-height:1.75}@media(max-width:1050px){.services-intro{grid-template-columns:1fr;gap:30px}}@media(max-width:700px){.services-intro{padding:58px 0 44px}.services-intro h1{font-size:clamp(42px,13vw,60px)}}
.project-gallery-section{padding-bottom:20px}.project-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.project-gallery-item{position:relative;grid-column:span 6;height:430px;padding:0;overflow:hidden;border:0;background:#ddd;cursor:zoom-in}.project-gallery-item:first-child{grid-column:span 8;height:560px}.project-gallery-item:nth-child(2){grid-column:span 4;height:560px}.project-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.project-gallery-item:hover img{transform:scale(1.025)}.project-gallery-item span{position:absolute;left:18px;bottom:16px;padding:7px 11px;background:rgba(25,25,25,.72);color:#fff;font-size:12px;letter-spacing:.06em}.project-lightbox{width:min(92vw,1500px);max-width:none;padding:0;border:0;background:transparent;color:#fff}.project-lightbox::backdrop{background:rgba(15,15,15,.92)}.project-lightbox figure{margin:0}.project-lightbox img{display:block;width:100%;max-height:84vh;object-fit:contain}.project-lightbox figcaption{padding:12px 0;text-align:center}.project-lightbox-close{position:fixed;z-index:2;top:18px;right:24px;width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:30px;cursor:pointer}@media(max-width:700px){.project-gallery{display:flex;margin-inline:-20px;padding:0 20px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}.project-gallery-item,.project-gallery-item:first-child,.project-gallery-item:nth-child(2){flex:0 0 84vw;height:60vh;max-height:520px;scroll-snap-align:center}.project-lightbox{width:96vw}}

/* Projects listing header follows the Home header proportions without changing its content. */
.projects-index-page .content-header{height:78px;min-height:78px;padding:0 max(30px,4vw)}
.projects-index-page .content-header>a:first-child{position:relative;width:145px;height:31px;overflow:hidden;flex:0 0 auto}
.projects-index-page .content-header>a:first-child img{position:absolute;width:279px;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.projects-index-page .content-header nav{gap:clamp(14px,1.35vw,25px);font-size:clamp(12px,.78vw,14px);font-weight:600}
.projects-index-page .content-header .content-cta{min-height:42px;padding:0 22px;font-weight:600}
@media(max-width:700px){.projects-index-page .content-header{height:66px;min-height:66px;padding:0 18px}.projects-index-page .content-header>a:first-child{width:130px;height:30px}.projects-index-page .content-header>a:first-child img{width:250px}.projects-index-page .content-header .content-cta{min-height:42px;padding:0 16px}}

/* Projects index: a compact editorial introduction before the project grid. */
.projects-index-page .content-breadcrumb{padding-block:20px}
.projects-index-page .content-section{padding:clamp(48px,4.5vw,68px) 0 90px}
.projects-index-page .content-section>header{
 display:grid;
 max-width:none;
 margin-bottom:clamp(36px,3vw,48px);
 grid-template-columns:minmax(0,1fr) minmax(420px,600px);
 grid-template-rows:auto auto;
 column-gap:clamp(48px,6vw,110px);
 align-items:end;
}
.projects-index-page .content-section>header .content-eyebrow{grid-column:1;grid-row:1;margin-bottom:14px}
.projects-index-page .content-section>header h1{grid-column:1;grid-row:2;margin:0;font-size:clamp(42px,3.5vw,58px);line-height:1.14}
.projects-index-page .content-section>header>p:last-child{grid-column:2;grid-row:1 / span 2;max-width:600px;margin:0 0 5px;font-size:clamp(16px,1.1vw,18px);line-height:1.75}
@media(max-width:900px){
 .projects-index-page .content-section>header{grid-template-columns:1fr;grid-template-rows:auto;row-gap:0}
 .projects-index-page .content-section>header .content-eyebrow,
 .projects-index-page .content-section>header h1,
 .projects-index-page .content-section>header>p:last-child{grid-column:1;grid-row:auto}
 .projects-index-page .content-section>header>p:last-child{max-width:680px;margin-top:20px}
}
@media(max-width:700px){
 .projects-index-page .content-breadcrumb{padding-block:16px}
 .projects-index-page .content-section{padding:42px 0 70px}
 .projects-index-page .content-section>header{margin-bottom:30px}
 .projects-index-page .content-section>header h1{font-size:clamp(38px,11vw,48px)}
}

/* Entire project card is a single accessible link. */
.projects-index-page .project-card{display:block;color:var(--content-ink);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.projects-index-page .project-card__image{height:clamp(230px,18vw,280px);padding:0;overflow:hidden}
.projects-index-page .project-card__image img{display:block;width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);scale:var(--cover-zoom,1);transform-origin:var(--cover-x,50%) var(--cover-y,50%);transition:transform .45s ease,scale .3s ease}
.projects-index-page .project-card__content{display:block;min-height:0;padding:22px 24px 24px}
.projects-index-page .project-card__heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.projects-index-page .project-card__heading h3{margin:0;font-size:clamp(22px,1.55vw,26px);line-height:1.3}
.projects-index-page .project-card__meta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:7px}
.projects-index-page .project-card__meta p{min-width:0;margin:0;line-height:1.6}
.projects-index-page .project-card__meta span{flex:0 0 auto;color:var(--content-taupe);font-size:23px;line-height:1;transition:transform .28s ease}
.projects-index-page .project-card:hover{transform:translateY(-4px);border-color:rgba(157,137,120,.48);box-shadow:0 18px 38px rgba(18,22,31,.08)}
.projects-index-page .project-card:hover .project-card__image img{transform:scale(1.025)}
.projects-index-page .project-card:hover .project-card__meta span{transform:translateX(4px)}
.projects-index-page .project-card:focus-visible{outline:2px solid var(--content-taupe);outline-offset:4px}
@media(max-width:700px){.projects-index-page .project-card__image{height:auto;aspect-ratio:16/10}.projects-index-page .project-card__content{padding:20px}}

/* Match the Service header surface across internal pages. */
.content-header{background:#fff;backdrop-filter:none}

/* Keep every generated project-detail header at the main site's standard scale. */
body:has(.project-detail-hero) .content-header{height:68px;min-height:68px;padding:0 max(30px,4vw)}
body:has(.project-detail-hero) .content-header>a:first-child{position:relative;width:145px;height:31px;overflow:hidden;flex:0 0 auto}
body:has(.project-detail-hero) .content-header>a:first-child img{position:absolute;width:279px;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
body:has(.project-detail-hero) .content-header nav{gap:clamp(14px,1.35vw,25px);font-size:clamp(12px,.78vw,14px);font-weight:600}
body:has(.project-detail-hero) .content-header .content-cta{min-height:42px;padding:0 22px;font-weight:600}
.project-facts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.project-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px}.project-story-grid article,.project-highlights{padding:32px;border:1px solid var(--content-line);background:#fff}.project-story-grid h3,.project-highlights h3{margin:0 0 14px;font-size:24px}.project-story-grid p{margin:0;font-size:16px}.project-highlights{margin-bottom:32px}.project-highlights ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}.project-highlights li{position:relative;padding-left:18px;color:var(--content-muted);line-height:1.65}.project-highlights li:before{position:absolute;left:0;content:"—";color:var(--content-taupe)}
@media(max-width:700px){body:has(.project-detail-hero) .content-header{height:66px;min-height:66px;padding:0 18px}body:has(.project-detail-hero) .content-header>a:first-child{width:130px;height:30px}body:has(.project-detail-hero) .content-header>a:first-child img{width:250px}body:has(.project-detail-hero) .content-header .content-cta{min-height:42px;padding:0 16px}}
@media(max-width:700px){.project-story-grid,.project-highlights ul{grid-template-columns:1fr}.project-story-grid article,.project-highlights{padding:24px}}

/* Projects index: compact cards keep each image and its metadata together. */
.projects-index-page .project-list{gap:30px 24px}
.projects-index-page .project-card img{height:clamp(230px,18vw,280px)}
.projects-index-page .project-card__content{min-height:164px;padding:22px 24px 20px}
.projects-index-page .project-card h2{margin:0 0 6px;font-size:clamp(22px,1.55vw,26px);line-height:1.3}
.projects-index-page .project-card p{line-height:1.6}
.projects-index-page .project-card a{margin-top:18px;padding-top:10px}
@media(max-width:700px){
 .projects-index-page .project-list{gap:20px}
 .projects-index-page .project-card img{height:auto;aspect-ratio:16/10}
 .projects-index-page .project-card__content{min-height:0;padding:20px}
}
/* Project Hero must fit the mobile column; generic 300px minimum + ratio forced 480px width. */
.project-detail-hero.content-hero figure{width:100%;min-width:0;min-height:0}
.project-gallery-item[data-full*="/serene-villa/"]{height:auto;max-height:none;align-self:start;background:#f2f0ec}
.project-gallery-item[data-full*="/serene-villa/"] img{height:auto;object-fit:contain;transform:none}
.project-gallery-item[data-full*="/serene-villa/"] span{position:static;display:block;margin:0;padding:12px;background:#292a28}
/* Long project names must not enlarge the mobile hero grid. */
.project-detail-hero>div{min-width:0}
.project-detail-hero h1{max-width:100%;overflow-wrap:anywhere}
/* Keep ONEHUNDRED intact without changing other project titles or templates. */
html:has(link[rel="canonical"][href="https://www.anewdevelop.com/projects/serene-villa/"]) .project-detail-hero>div{container-type:inline-size}
html:has(link[rel="canonical"][href="https://www.anewdevelop.com/projects/serene-villa/"]) .project-detail-hero h1{font-size:min(4.75rem,12cqi);white-space:nowrap;overflow-wrap:normal;word-break:normal;letter-spacing:0}