/* Cross-device UX safeguards loaded last on every page. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #d0ad73;outline-offset:4px}
.menu{cursor:pointer}
.contact-glyph{font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:20px;font-weight:400;line-height:1}
.footer-link-muted{display:block;margin:12px 0;color:#82918f;font-size:10px;cursor:default}
.about-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:60px}
@media(max-width:850px){.about-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 0}}
@media(max-width:767px){
  body.menu-open{overflow:hidden}
  .hero-inner h1{font-size:clamp(44px,12vw,58px)!important;line-height:1!important;max-width:12ch!important}
  .hero h1{font-size:clamp(44px,12vw,56px)!important;line-height:.94!important;max-width:9ch!important;margin-top:22px!important}
  .hero h1 span{max-width:8ch!important;margin:10px 0 0!important;white-space:normal!important}
  .hero-text{max-width:34ch!important}
  .nav a,.btn,.button,.contact-toggle{touch-action:manipulation}
  .nav a{min-height:48px;display:flex;align-items:center}
  input,select,textarea{font-size:16px!important}
}
@media(max-width:390px){
  .hero h1{font-size:clamp(42px,12vw,48px)!important}
  .page-hero h1,.hero-inner h1{font-size:clamp(40px,11.5vw,46px)!important}
}
@media(max-width:560px){.about-process-grid{grid-template-columns:1fr;gap:45px;margin-top:42px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.motion{opacity:1!important;transform:none!important;filter:none!important}
}

/* Final visual system: consistent rhythm, cards and footer across all pages. */
main>section[id]{scroll-margin-top:90px}
.heading,.section-head{max-width:1440px;margin-left:auto;margin-right:auto}
.project-card>a,.article-card>a{display:block;height:100%}
.project-card h3,.article-card h3,.service-card h3,.value h3{letter-spacing:-.015em}
.project-card .meta,.article-card .meta{line-height:1.6}
.btn,.button,.header-cta,.card-link{white-space:nowrap}
.footer{background:#062c2b;color:#afbfbc;padding:64px clamp(20px,8vw,136px) 26px}
.footer-grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.7fr .9fr 1.25fr .8fr;gap:clamp(28px,4vw,64px)}
.footer-logo{display:block;width:178px;height:62px;background:url("top-homes-logo-white.png") center/242% auto no-repeat}
.footer-grid h4{margin:0 0 20px;color:#b08d57;font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.footer-grid a,.footer-grid p,.footer-grid .footer-link-muted{display:block;margin:11px 0;color:#afbfbc;font-size:10px;line-height:1.7}
.footer-grid a{transition:color .3s ease,transform .3s ease}
.footer-grid a:hover,.footer-grid a:focus-visible{color:#d8bd90;transform:translateX(3px)}
.footer-brand-copy{max-width:28ch}
.copyright{max-width:1440px;margin:48px auto 0;padding-top:19px;border-top:1px solid #ffffff20;color:#82918f;font-size:8px;letter-spacing:.11em}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:560px){.footer{padding-top:50px;padding-bottom:90px}.footer-grid{grid-template-columns:1fr;gap:26px}.footer-brand{grid-column:auto}.copyright{margin-top:38px}.btn,.button,.header-cta,.card-link{white-space:normal}}

/* Unified layout scale: one content width and one vertical rhythm site-wide. */
:root{
  --layout-max:1440px;
  --layout-gutter:clamp(24px,6vw,96px);
  --layout-inline:max(var(--layout-gutter),calc((100vw - var(--layout-max))/2));
  --section-space:108px;
  --section-gap:56px;
}
.section,.dark,.projects,main>section.process,.insights,.proof,.transformation,.creation-journey{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
  padding-left:var(--layout-inline);
  padding-right:var(--layout-inline);
}
.hero-inner,.hero-body,.contact-band,.footer{
  padding-left:var(--layout-inline);
  padding-right:var(--layout-inline);
}
.detail-facts,.trustbar{
  padding-left:var(--layout-inline);
  padding-right:var(--layout-inline);
}
.projects .section-head{padding-left:0;padding-right:0}
.section-head,.heading{margin-bottom:var(--section-gap)}
.about-layout,.project-list,.services,.steps,.articles,.proof-card,.service-grid,.values,.process,.article-grid,.project-grid,.gallery,.about-process-grid{
  max-width:var(--layout-max);
  margin-left:auto;
  margin-right:auto;
}
.page-hero{min-height:clamp(500px,62vh,680px)}
.page-hero.detail-hero{height:auto;min-height:clamp(560px,72vh,760px)}
.hero-inner{padding-top:clamp(100px,12vh,150px);padding-bottom:clamp(64px,9vh,96px)}
.project-grid{gap:clamp(38px,4vw,58px) clamp(20px,2.2vw,34px)}
.project-image{height:clamp(360px,34vw,500px)}
.project-card:nth-child(3n+1) .project-image{height:clamp(440px,43vw,620px)}
.service-card{min-height:290px;padding:clamp(30px,3vw,44px)}
.value{min-height:250px;padding:clamp(28px,3vw,40px)}
.gallery{grid-template-rows:clamp(390px,36vw,520px) clamp(300px,28vw,390px)}
.contact-band{min-height:300px;padding-top:76px;padding-bottom:76px;gap:40px}
.contact-band h2{font-size:clamp(36px,4.2vw,60px)}
.location-band{min-height:520px}

@media(max-width:900px){
  :root{--layout-gutter:24px;--section-space:84px;--section-gap:44px}
  .page-hero{min-height:500px}
  .page-hero.detail-hero{min-height:560px}
  .project-image,.project-card:nth-child(3n+1) .project-image{height:clamp(360px,58vw,500px)}
  .gallery{grid-template-rows:clamp(350px,55vw,450px) clamp(280px,42vw,340px)}
  .contact-band{min-height:280px;padding-top:66px;padding-bottom:66px}
}
.contact-title-mobile{display:none}
@media(max-width:767px){
  :root{--section-space:66px;--section-gap:36px}
  .section,.projects,main>section.process,.insights,.proof,.transformation{padding-top:var(--section-space)!important;padding-bottom:var(--section-space)!important}
  .section-head,.heading{margin-bottom:var(--section-gap)!important}
  .project-list{margin-top:38px!important}
  .insights .articles{margin-top:38px!important}
  .transformation .transform-intro{margin-bottom:36px!important}
  section.creation-journey{padding-top:66px!important;padding-bottom:66px!important}
  section.creation-journey .journey-intro{margin-bottom:38px!important}
  section.creation-journey .journey-cta{margin-top:52px!important}
  .contact-title-desktop{display:none!important}
  .contact-title-mobile{display:flex!important;flex-direction:column;align-items:center;gap:7px;width:100%;margin-left:auto!important;margin-right:auto!important;font-size:clamp(31px,8.7vw,37px)!important;line-height:1.08!important}
  .contact-title-mobile span,.contact-title-mobile em{display:block;white-space:nowrap;color:#fff!important}
  .contact-title-mobile em{font-size:clamp(19px,5.8vw,25px)!important}
  section.contact{min-height:0!important;height:auto!important;padding:54px 20px 52px!important}
  section.contact .contact-inner{width:100%;max-width:100%;padding:0!important}
  section.contact .eyebrow{margin-bottom:22px!important}
  section.contact .contact-title-mobile{margin-top:0!important;margin-bottom:26px!important}
  section.contact .btn{margin-top:0!important}
  footer.footer{padding-top:42px!important}
}
@media(max-width:560px){
  :root{--layout-gutter:20px;--section-space:68px;--section-gap:34px}
  .page-hero,.page-hero.detail-hero{min-height:430px}
  .hero-inner{padding-top:105px;padding-bottom:54px}
  .project-grid{gap:38px}
  .project-image,.project-card:nth-child(3n+1) .project-image{height:clamp(300px,92vw,390px)}
  .service-card{min-height:245px;padding:28px 22px}
  .value{min-height:220px;padding:28px 22px}
  .gallery{grid-template-rows:repeat(3,clamp(260px,82vw,340px))}
  .contact-band{min-height:0;padding-top:58px;padding-bottom:58px;gap:28px}
  .contact-band h2{font-size:clamp(34px,10vw,44px)}
  .location-band{min-height:0}
}

/* Bring specialist page sections onto the same grid and responsive rhythm. */
.portfolio-book-section,.related-journal{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
  padding-left:var(--layout-inline);
  padding-right:var(--layout-inline);
}
.book-intro,.related-journal>.heading,.related-journal>.article-grid{
  width:100%;max-width:var(--layout-max);margin-left:auto;margin-right:auto
}
.book-intro{margin-bottom:var(--section-gap)}
.flipbook{width:min(920px,100%)}
.article-meta-bar{
  padding-left:var(--layout-inline);
  padding-right:var(--layout-inline)
}
.article-layout{
  width:100%;max-width:1200px;margin-left:auto;margin-right:auto;
  padding:var(--section-space) var(--layout-gutter)
}
.related-journal .article-grid{margin-top:var(--section-gap)}
.transform-intro,.journey-intro,.journey-layout,.journey-cta{
  width:100%;max-width:var(--layout-max);margin-left:auto;margin-right:auto
}
.transform-intro,.journey-intro{margin-bottom:var(--section-gap)}
.ba-stage{max-height:720px}

@media(min-width:700px) and (max-width:900px){
  .values,.article-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .portfolio-book-section,.related-journal{
    padding-top:var(--section-space);padding-bottom:var(--section-space);
    padding-left:var(--layout-inline);padding-right:var(--layout-inline)
  }
  .book-intro{grid-template-columns:1fr;gap:24px}
  .article-layout{padding:var(--section-space) var(--layout-gutter)}
  .journey-media{height:clamp(360px,52svh,520px);min-height:360px}
}
@media(max-width:699px){
  .values,.article-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .portfolio-book-section,.related-journal{
    padding-top:var(--section-space);padding-bottom:var(--section-space);
    padding-left:var(--layout-inline);padding-right:var(--layout-inline)
  }
  .article-layout{padding:var(--section-space) var(--layout-gutter)}
  .article-meta-bar{padding:15px var(--layout-gutter)}
  .flipbook{width:100%;height:clamp(400px,112vw,470px)}
  .article-figure{margin-left:calc(-1 * var(--layout-gutter));margin-right:calc(-1 * var(--layout-gutter))}
  .article-figure figcaption{padding-left:var(--layout-gutter);padding-right:var(--layout-gutter)}
  .article-callout{margin-left:calc(-1 * var(--layout-gutter));margin-right:calc(-1 * var(--layout-gutter));padding-left:var(--layout-gutter);padding-right:var(--layout-gutter)}
  .journey-media{height:clamp(300px,76vw,390px);min-height:300px}
}

/* Monochrome luxury palette — deep green is used only as a restrained accent. */
:root{
  --ivory:#fafaf8;
  --sand:#ededeb;
  --teal:#123c37;
  --deep:#090909;
  --gold:#123c37;
  --ink:#151515;
  --muted:#666b69;
}
body{background:#fafaf8;color:#151515}
.header,.header.scrolled{background:#090909;border-bottom-color:#ffffff20}
.page-hero:before{background:linear-gradient(90deg,#050505e8,#11111191 62%,#11111130)}
.hero:before{background:linear-gradient(90deg,#050505e8 0%,#1111119e 48%,#11111130 100%),linear-gradient(0deg,#0505059c,transparent 46%)}
.section.teal,.dark,.creation-journey,.portfolio-book-section,.case,.contact-band,.footer{background:#090909;color:#fff}
.section.sand,.insights,.why,.project-copy,.detail-facts,.article-meta-bar,.related-journal,.article-quote{background:#ededeb}
.section h2,.heading h2,.story h2,.why h2,.project-copy h3,.value h3,.step h3,.article-card h3,.service-card h3,.contact-copy h2{color:#151515}
.section.teal h2,.dark h2,.creation-journey h2,.portfolio-book-section h2,.case h2,.contact-band h2,.contact h2{color:#fff}
.section.teal .service-card h3,.dark .service h3{color:#fff}
.trustitem b,.stats b,.reason h3,.article-content h2,.article-content h3,.article-lead,.article-quote,.base-copy h3,.book-face h3{color:#151515}
h1 em,h2 em,.section-index,.index,.meta,.eyebrow,.service>span,.service-card>span,.step b,.value b,.fact b,.project-copy span,.article-card .meta,.page-no{color:#123c37}
.page-hero h1 em,.hero h1 span,.contact-band h2 em,.contact h2 em,.section.teal h2 em,.dark h2 em,.creation-journey h2 em,.portfolio-book-section h2 em,.case h2 em{color:#b7c7c4}
.eyebrow:before,.journey-kicker:before{background:#123c37}
.btn,.button.dark,.submit,.journey-actions .journey-link.primary{background:#123c37;border-color:#123c37;color:#fff}
.btn:hover,.button.dark:hover,.submit:hover,.journey-actions .journey-link:hover{background:#0a2926;border-color:#0a2926}
.header-cta{border-color:#ffffff55;background:transparent}
.header-cta:hover{background:#123c37;border-color:#123c37}
.nav a:after,.step:before,.reading-progress{background:#123c37}
.filter:hover,.filter.active{background:#151515;border-color:#151515;color:#fff}
.card-link,.text-link.light{border-color:#123c37;color:#123c37}
.service-grid,.services{border-top-color:#ffffff2b}
.service-card,.service{border-color:#ffffff2b}
.section.teal .service-card a,.dark .service b{color:#9db2ae}
.values{background:#cfcfcb}
.value{background:#fafaf8}
.project-specs,.reason,.contact-list>div,.article-checklist li{border-color:#cdcdca}
.project:hover .project-copy{background:#e5e5e2}
.book-face.dark{background:#111;color:#fff}
.book-face.gold{background:#123c37;color:#fff}
.book-base{background:#e9e9e6}
.book-face{background:#fafaf8;color:#151515}
.book-stat b,.base-copy small{color:#123c37}
.book-nav{border-color:#708e89;color:#fff}
.book-nav:hover:not(:disabled){background:#123c37;border-color:#123c37}
.book-progress,.book-help{color:#aebfbc}
.article-callout{background:#111}
.author-mark{background:#111;color:#a9bcb8}
.article-quote{border-left-color:#123c37}
.proof-card,.modal-side{background:#111}
.contact:before{background:#050505dc}
.ba-label.before{background:#111111dc}
.ba-label.after{background:#123c37e8}
.nav a.active{color:#c2d0cd}
.location-copy{background:#090909}
.map-pin,.contact-toggle,.contact-action.maps .contact-icon{background:#123c37}
.footer-grid h4{color:#8ea6a2}
.footer-grid a:hover,.footer-grid a:focus-visible{color:#fff}
.copyright{color:#777;border-top-color:#ffffff1f}
.project-image img,.article-image img,.about-image img,.gallery img,.case-media img,.proof-img img,.why-image img{filter:saturate(.76) contrast(1.02)}
.project:hover img,.article:hover img,.about-image:hover img,.case-media:hover img,.proof-img:hover img,.why-image:hover img{filter:saturate(.96) contrast(1.02)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#52746f}

/* 90% monochrome refinement: imagery is text-free, copy is deliberately reduced. */
:root{
  --ivory:#fbfbfa;
  --sand:#efefed;
  --teal:#121212;
  --deep:#080808;
  --gold:#1b1b1b;
  --ink:#141414;
  --muted:#6b6b68;
  --accent:#123c37;
}
body{background:#fbfbfa;color:#141414}
.section.teal,.dark,.creation-journey,.portfolio-book-section,.case,.contact-band,.footer,.location-copy{background:#080808}
.section.sand,.insights,.why,.project-copy,.detail-facts,.article-meta-bar,.related-journal,.article-quote{background:#efefed}

/* Image banners: image first, title on an opaque editorial panel below. */
.page-hero{
  display:flex;align-items:flex-end;min-height:clamp(520px,65vh,720px);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#141414
}
.page-hero:before{display:none}
.page-hero .hero-inner{
  width:100%;padding-top:clamp(38px,5vw,62px);padding-bottom:clamp(40px,5vw,64px);
  background:#fbfbfa;color:#141414
}
.page-hero h1,.page-hero h1 em{margin:0;color:#141414}
.page-hero .eyebrow{display:none}
.page-hero.detail-hero{height:auto;min-height:clamp(560px,72vh,780px)}

/* Homepage image banner: no typography over photography. */
.hero{
  min-height:0;padding-top:clamp(480px,68vh,760px);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#fbfbfa;color:#141414
}
.hero:before{display:none}
.hero-body{
  width:100%;max-width:none;min-height:0;padding-top:clamp(54px,7vw,82px);
  padding-bottom:clamp(64px,8vw,96px);background:#fbfbfa
}
.hero h1,.hero h1 span{color:#141414}
.hero h1{max-width:13ch;white-space:normal;font-size:clamp(58px,6.2vw,92px);line-height:.92;margin:0}
.hero h1 span{max-width:11ch;margin:10px 0 0;white-space:normal}
.hero .eyebrow,.hero-text,.hero-side{display:none!important}
.hero-actions{margin:34px 0 0}
.outline-link{color:#141414;border-bottom-color:#141414}

/* Remove all copy that sits directly inside photography. */
.about-image:after,.journey-media-caption,.ba-label,.map-loading-label,.book-face.image .face-content{display:none!important}
.map-pin{font-size:0;width:38px;height:38px;background:var(--accent)}
.map-pin:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.contact{min-height:520px;background:#080808!important}
.contact:before{display:none}

/* Reduce secondary copy and remove repeated micro-labels. */
.section-index,.index{display:none!important}
.section-head,.heading{grid-template-columns:1fr;gap:0}
.dark-intro{display:none}
.section-head,.heading{margin-bottom:clamp(38px,5vw,58px)}
.service p,.service-card p,.value p,.reason p,.article-card p,.project-copy p,.case-problem p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.book-help{display:none}
.contact p{max-width:48ch}

/* Black/white controls; green appears only on small interaction states. */
.btn,.button.dark,.submit,.journey-actions .journey-link.primary{background:#121212;border-color:#121212;color:#fff}
.btn:hover,.button.dark:hover,.submit:hover,.journey-actions .journey-link:hover,.header-cta:hover{background:var(--accent);border-color:var(--accent)}
.header,.header.scrolled{background:#080808}
.nav a:after,.reading-progress,.journey-rail:after{background:var(--accent)}
.nav a.active{color:#fff}
.eyebrow:before,.journey-kicker:before,.slider-direction i{background:#1b1b1b}
.card-link,.text-link.light{color:#141414;border-color:#141414}
.section.teal .service-card a,.dark .service b{color:#d3d3d0}
.book-face.gold,.book-face.dark,.proof-card,.modal-side,.article-callout{background:#111;color:#fff}
.book-nav{border-color:#777;color:#fff}
.book-nav:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.book-stat b,.base-copy small,.article-callout span{color:#555}
.ba-label.after{background:#111}
.contact-toggle{background:#111;border-color:#777}
.contact-toggle:hover,.map-pin,.contact-action.maps .contact-icon{background:var(--accent)}
.footer-grid h4,.book-progress{color:#9a9a96}

/* Footer typography: improved readability across the complete website */
.footer-grid h4{font-size:12px;line-height:1.4;letter-spacing:.15em}
.footer-grid a,.footer-grid p,.footer-grid .footer-link-muted{font-size:15px;line-height:1.75}
.footer-brand-copy{font-size:15px;line-height:1.75}
.copyright{font-size:11px;line-height:1.6;letter-spacing:.1em}
@media(max-width:560px){.footer-grid h4{font-size:12px}.footer-grid a,.footer-grid p,.footer-grid .footer-link-muted,.footer-brand-copy{font-size:15px}.copyright{font-size:11px}}
.journey-kicker,.journey-step-number,.journey-step small{color:#9a9a96}
.journey-step.active:before{background:var(--accent);border-color:#78918d}
.book-face .page-no{color:#666}
.book-face.dark .page-no,.book-face.gold .page-no{color:#aaa}
.fact b,.meta,.project-copy span,.article-card .meta,.page-no,.step b,.value b,.service>span,.service-card>span{color:#4d4d4a}
h1 em,h2 em{color:#30302e}
.page-hero h1 em{color:#141414}
.section.teal h2 em,.dark h2 em,.creation-journey h2 em,.portfolio-book-section h2 em,.case h2 em,.contact-band h2 em,.contact h2 em{color:#c8c8c5}
.project-image img,.article-image img,.about-image img,.gallery img,.case-media img,.proof-img img,.why-image img{filter:grayscale(.82) saturate(.28) contrast(1.04)}
.project:hover img,.article:hover img,.about-image:hover img,.case-media:hover img,.proof-img:hover img,.why-image:hover img{filter:grayscale(.35) saturate(.65) contrast(1.03)}

@media(max-width:900px){
  .page-hero{min-height:560px}
  .hero{padding-top:clamp(420px,58vh,620px)}
  .hero h1{font-size:clamp(50px,9vw,72px)}
}
@media(max-width:560px){
  .page-hero,.page-hero.detail-hero{min-height:470px}
  .page-hero .hero-inner{padding-top:34px;padding-bottom:38px}
  .page-hero h1{font-size:clamp(39px,11vw,48px)!important;max-width:13ch!important}
  .hero{padding-top:clamp(330px,52vh,460px)}
  .hero-body{padding-top:42px;padding-bottom:62px}
  .hero h1{font-size:clamp(43px,12vw,54px)!important;max-width:10ch!important}
  .hero-actions{width:100%;margin-top:28px}
  .contact{min-height:440px}
}

/* Six-step journey only: strict black-and-white treatment. */
.creation-journey{background:#080808;color:#fff}
.creation-journey .journey-intro h2,
.creation-journey .journey-step h3,
.creation-journey .journey-cta p{color:#fff}
.creation-journey .journey-intro h2 em{color:#c8c8c5}
.creation-journey .journey-intro>p,
.creation-journey .journey-step p{color:#b7b7b3}
.creation-journey .journey-kicker,
.creation-journey .journey-step-number,
.creation-journey .journey-step small{color:#969692}
.creation-journey .journey-kicker:before{background:#777}
.creation-journey .journey-rail{background:#ffffff24}
.creation-journey .journey-rail:after{background:#fff}
.creation-journey .journey-step:before{background:#080808;border-color:#777;box-shadow:none}
.creation-journey .journey-step.active:before{background:#fff;border-color:#fff;box-shadow:0 0 0 7px #ffffff16}
.creation-journey .journey-media{background:#171717}
.creation-journey .journey-media img,
.creation-journey .journey-media img.active{filter:grayscale(1) saturate(0) contrast(1.06)}
.creation-journey .journey-actions .journey-link{border-color:#777;color:#fff;background:transparent}
.creation-journey .journey-actions .journey-link.primary{background:#fff;border-color:#fff;color:#111}
.creation-journey .journey-actions .journey-link:hover{background:#d9d9d6;border-color:#d9d9d6;color:#111}

/* Requested final treatment for the pictured journey section. */
section.creation-journey{background:#000!important;color:#fff!important}
section.creation-journey .journey-intro h2,
section.creation-journey .journey-intro h2 em,
section.creation-journey .journey-step h3,
section.creation-journey .journey-cta p{color:#fff!important}
section.creation-journey .journey-intro>p,
section.creation-journey .journey-step p{color:#dededb!important}
section.creation-journey .journey-kicker,
section.creation-journey .journey-step-number,
section.creation-journey .journey-step small{color:#b8b8b4!important}
section.creation-journey .journey-media{background:#111!important}
section.creation-journey .journey-media img,
section.creation-journey .journey-media img.active{filter:grayscale(1) saturate(0) contrast(1.08)!important}

/* Final requested inversion: white journey section with black typography. */
section.creation-journey{background:#fff!important;color:#111!important}
section.creation-journey .journey-intro h2,
section.creation-journey .journey-intro h2 em,
section.creation-journey .journey-step h3,
section.creation-journey .journey-cta p{color:#111!important}
section.creation-journey .journey-intro>p,
section.creation-journey .journey-step p{color:#555!important}
section.creation-journey .journey-kicker,
section.creation-journey .journey-step-number,
section.creation-journey .journey-step small{color:#666!important}
section.creation-journey .journey-kicker:before{background:#111!important}
section.creation-journey .journey-rail{background:#d4d4d1!important}
section.creation-journey .journey-rail:after{background:#111!important}
section.creation-journey .journey-step:before{background:#fff!important;border-color:#777!important}
section.creation-journey .journey-step.active:before{background:#111!important;border-color:#111!important;box-shadow:0 0 0 7px #11111112!important}
section.creation-journey .journey-media{background:#ededeb!important}
section.creation-journey .journey-actions .journey-link{border-color:#555!important;color:#111!important;background:transparent!important}
section.creation-journey .journey-actions .journey-link.primary{background:#111!important;border-color:#111!important;color:#fff!important}
section.creation-journey .journey-actions .journey-link:hover{background:#333!important;border-color:#333!important;color:#fff!important}

/* All photography stays in full color at rest and on interaction. */
img,
.project-image img,.article-image img,.about-image img,.gallery img,
.case-media img,.proof-img img,.why-image img,
.creation-journey .journey-media img,
.creation-journey .journey-media img.active,
.ba-before,.ba-after{filter:none!important}
.project:hover img,.article:hover img,.about-image:hover img,
.case-media:hover img,.proof-img:hover img,.why-image:hover img{filter:none!important}

/* Six-step journey photography must remain in full color. */
section.creation-journey .journey-media img,
section.creation-journey .journey-media img.active,
section.creation-journey .journey-media:hover img{filter:none!important}

/* Final typography contrast system: text is either black or white only. */
body,
main,
.section,
.projects,
.insights,
.proof,
.why,
.creation-journey,
.article-layout,
.related-journal,
.detail-facts,
.location-map,
.location-copy,
.hero-projects{color:#000!important}

.section h1,.section h2,.section h3,.section h4,.section p,.section span,.section small,.section b,.section a,
.projects h1,.projects h2,.projects h3,.projects h4,.projects p,.projects span,.projects small,.projects b,.projects a,
.insights h1,.insights h2,.insights h3,.insights h4,.insights p,.insights span,.insights small,.insights b,.insights a,
.why h1,.why h2,.why h3,.why h4,.why p,.why span,.why small,.why b,.why a,
.article-layout h1,.article-layout h2,.article-layout h3,.article-layout h4,.article-layout p,.article-layout span,.article-layout small,.article-layout b,.article-layout a,.article-layout li,
.related-journal h1,.related-journal h2,.related-journal h3,.related-journal h4,.related-journal p,.related-journal span,.related-journal small,.related-journal b,.related-journal a,
.detail-facts b,.detail-facts span,
.location-copy h1,.location-copy h2,.location-copy h3,.location-copy h4,.location-copy p,.location-copy span,.location-copy small,.location-copy b,.location-copy a,
.hero-projects h1,.hero-projects h2,.hero-projects h3,.hero-projects h4,.hero-projects p,.hero-projects span,.hero-projects small,.hero-projects b,.hero-projects a,
.page-hero h1,.page-hero h1 em,.page-hero .eyebrow,
.proof>.section-head h2,.proof>.section-head h2 em,
.book-face:not(.dark):not(.gold):not(.image) h3,.book-face:not(.dark):not(.gold):not(.image) p,.book-face:not(.dark):not(.gold):not(.image) li,.book-face:not(.dark):not(.gold):not(.image) span,.book-face:not(.dark):not(.gold):not(.image) small,
.base-copy h3,.base-copy p,.base-copy small,
.project-specs dt,.project-specs dd,
.article-meta-bar,.article-meta-bar span,
.article-figure figcaption,
.article-toc>span,.article-toc a,
.copy-note,.article-author span,.article-author p{color:#000!important}

.header,.header a,.header button,.header-cta,
.nav,.nav a,.nav button,.submenu,.submenu a,.submenu a:after,
.dark,.dark h1,.dark h2,.dark h3,.dark h4,.dark p,.dark span,.dark small,.dark b,.dark a,
.section.teal,.section.teal h1,.section.teal h2,.section.teal h3,.section.teal h4,.section.teal p,.section.teal span,.section.teal small,.section.teal b,.section.teal a,
.case,.case h1,.case h2,.case h3,.case h4,.case p,.case span,.case small,.case b,.case a,
.contact,.contact h1,.contact h2,.contact h3,.contact h4,.contact p,.contact span,.contact small,.contact b,.contact a,
.contact-band,.contact-band h1,.contact-band h2,.contact-band h3,.contact-band h4,.contact-band p,.contact-band span,.contact-band small,.contact-band b,.contact-band a,
.footer,.footer h1,.footer h2,.footer h3,.footer h4,.footer p,.footer span,.footer small,.footer b,.footer a,.footer .copyright,
.proof-card,.proof-card h1,.proof-card h2,.proof-card h3,.proof-card h4,.proof-card p,.proof-card span,.proof-card small,.proof-card b,.proof-card a,.proof-card blockquote,
.modal-side,.modal-side h1,.modal-side h2,.modal-side h3,.modal-side h4,.modal-side p,.modal-side span,.modal-side small,.modal-side b,.modal-side a,
.portfolio-book-section,.portfolio-book-section>.book-intro h2,.portfolio-book-section>.book-intro h2 em,.portfolio-book-section>.book-intro p,.portfolio-book-section>.book-intro span,
.book-face.dark,.book-face.dark h3,.book-face.dark p,.book-face.dark li,.book-face.dark span,.book-face.dark small,
.book-face.gold,.book-face.gold h3,.book-face.gold p,.book-face.gold li,.book-face.gold span,.book-face.gold small,
.book-face.image,.book-face.image h3,.book-face.image p,.book-face.image li,.book-face.image span,.book-face.image small,
.article-callout,.article-callout h3,.article-callout p,.article-callout span,
.creation-journey .journey-media-caption,.creation-journey .journey-media-caption b{color:#fff!important}

section.creation-journey,
section.creation-journey .journey-intro h2,
section.creation-journey .journey-intro h2 em,
section.creation-journey .journey-intro>p,
section.creation-journey .journey-kicker,
section.creation-journey .journey-step-number,
section.creation-journey .journey-step h3,
section.creation-journey .journey-step p,
section.creation-journey .journey-step small,
section.creation-journey .journey-cta p{color:#000!important}

.btn,.button.dark,.submit,.journey-actions .journey-link.primary,.filter.active{color:#fff!important}
.hero-projects .hero-project-actions .btn,
.hero-projects .hero-project-actions .btn b,
.hero-projects .hero-project-actions .btn span{color:#fff!important}
.button:not(.dark),.outline-link,.text-link,.card-link,.filter:not(.active){color:#000!important}
.modal-form,.modal-form h3,.modal-form label,.modal-form input,.modal-form select,.modal-form textarea{color:#000!important}
.modal-form input::placeholder,.modal-form textarea::placeholder{color:#000!important;opacity:1}
.trustbar,.trustbar b,.trustbar span,
.transformation,.transformation h1,.transformation h2,.transformation h3,.transformation h4,.transformation p,.transformation span,.transformation small,.transformation b,.transformation a,
.stats,.stats b,.stats span{color:#000!important}
.transform-intro{grid-template-columns:1fr!important}
@media(max-width:767px){
  .hero-projects{display:none!important}
  #services{display:none!important}
  .contact-inner>p:not(.eyebrow){display:none!important}
  .footer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:38px 24px!important}
  .footer-brand{grid-column:auto!important;min-width:0}
  .footer-logo{width:150px!important;height:54px!important}
  .footer-brand-copy{max-width:18ch;font-size:13px!important;line-height:1.7!important}
  .footer-grid h4{margin-bottom:16px!important}
  .footer-grid a,.footer-grid p,.footer-grid .footer-link-muted{font-size:13px!important;overflow-wrap:anywhere}
  .copyright{margin-top:40px!important}
  .trustbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:12px 20px!important}
  .trustbar .trustitem,.trustbar .trustitem:first-child,.trustbar .trustitem:last-child{display:flex;min-width:0;min-height:108px;padding:20px 12px!important;flex-direction:column;justify-content:center;border:0!important;border-right:1px solid #bdbdb8!important;border-bottom:1px solid #bdbdb8!important}
  .trustbar .trustitem:nth-child(2n){border-right:0!important}
  .trustbar .trustitem:nth-last-child(-n+2){border-bottom:0!important}
  .trustbar .trustitem b{font-size:clamp(22px,6.7vw,28px)!important;line-height:1.1}
  .trustbar .trustitem span{margin-top:8px;font-size:8px!important;line-height:1.45;letter-spacing:.1em}
}

/* Final mobile footer layout: explicit 2 x 2 grid. */
@media(max-width:900px){
  footer.footer .footer-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"brand explore" "contact social"!important;column-gap:20px!important;row-gap:38px!important}
  footer.footer .footer-grid>div{min-width:0!important}
  footer.footer .footer-grid>div:nth-child(1){grid-area:brand!important}
  footer.footer .footer-grid>div:nth-child(2){grid-area:explore!important}
  footer.footer .footer-grid>div:nth-child(3){grid-area:contact!important}
  footer.footer .footer-grid>div:nth-child(4){grid-area:social!important}
  footer.footer .footer-brand{grid-column:auto!important}
  footer.footer .footer-logo{width:min(145px,100%)!important;height:52px!important}
  footer.footer .footer-brand-copy{max-width:17ch!important;font-size:12px!important}
  footer.footer .footer-grid h4{font-size:11px!important}
  footer.footer .footer-grid a,footer.footer .footer-grid p,footer.footer .footer-grid .footer-link-muted{font-size:12px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
  footer.footer .footer-logo{display:block!important;width:auto!important;height:auto!important;margin:0 0 16px!important;background:none!important;font-size:0!important}
  footer.footer .footer-logo:before{content:"TOP HOMES";display:block;color:#fff!important;font:600 11px/1.4 "Be Vietnam Pro",sans-serif;letter-spacing:.15em;text-transform:uppercase}
}

/* Responsive hardening v9 — shared by every final page. Desktop remains unchanged. */
@media(max-width:1100px){
  .header{padding-left:24px!important;padding-right:24px!important}
  .nav{gap:clamp(18px,2.4vw,30px)}
  .section,.projects,.insights,.proof,.portfolio-book-section,.related-journal,
  main>section.process,.transformation,section.creation-journey,
  .contact-band,.footer,.location-copy{padding-left:24px!important;padding-right:24px!important}
  .heading,.section-head,.book-intro,.transform-intro,.journey-intro,
  .journey-layout,.journey-cta{width:100%;min-width:0}
  .project-grid,.article-grid,.values{gap:32px 22px}
}

@media(max-width:767px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  main,section,header,footer,nav,div,article,figure{min-width:0}
  img,video,iframe,svg{max-width:100%}
  img,video{height:auto}

  .header{height:68px!important;padding-left:18px!important;padding-right:18px!important}
  .logo,.official-logo{max-width:142px!important}
  .menu{min-width:44px;min-height:44px}
  .nav{top:68px!important;max-height:calc(100svh - 68px);overflow-y:auto;overscroll-behavior:contain}
  .nav a,.submenu a{min-height:44px;display:flex;align-items:center}
  .submenu{width:100%!important;max-width:none!important;background:#080808!important}

  .section,.projects,.insights,.proof,.portfolio-book-section,.related-journal,
  main>section.process,.transformation,section.creation-journey,
  .contact-band,.footer,.location-copy{padding-left:20px!important;padding-right:20px!important}
  .heading,.section-head,.book-intro,.transform-intro,.journey-intro,
  .story,.contact-layout,.location-band{grid-template-columns:minmax(0,1fr)!important}
  .heading h2,.section-head h2,.book-intro h2,.story h2,.contact-band h2{
    max-width:100%!important;overflow-wrap:normal;word-break:normal;text-wrap:balance
  }
  p,li,dd{overflow-wrap:break-word}

  .page-hero,.page-hero.detail-hero{min-height:clamp(430px,76svh,560px)!important}
  .page-hero .hero-inner{padding:104px 20px 52px!important}
  .page-hero h1{font-size:clamp(40px,11.5vw,54px)!important;line-height:1.02!important;text-wrap:balance}
  .hero-actions,.contact-actions{flex-wrap:wrap}
  .btn,.button,.header-cta,.card-link,.submit{min-height:46px;white-space:normal;text-align:center;justify-content:center}

  .project-grid,.service-grid,.values,.about-process-grid,.gallery,
  .contact-layout,.location-band,.proof-card,.why{grid-template-columns:minmax(0,1fr)!important}
  .project-image,.project-card:nth-child(3n+1) .project-image{height:auto!important;aspect-ratio:4/3}
  .project-image img,.article-image img,.gallery img,.proof-img img,.why-image img{
    width:100%;height:100%;object-fit:cover
  }
  .article-image{aspect-ratio:4/3;height:auto!important}
  .gallery{grid-template-rows:none!important}
  .gallery>*{min-height:0!important;aspect-ratio:4/3}
  .detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  input,select,textarea,button{font-size:16px}
  .form-row{grid-template-columns:minmax(0,1fr)!important}
  .location-map{min-height:360px!important}
  .article-layout{grid-template-columns:minmax(0,1fr)!important;padding-left:20px!important;padding-right:20px!important}
  .article-content,.article-sidebar{min-width:0}
  .article-figure img{width:100%;min-height:0!important;aspect-ratio:4/3;object-fit:cover}
  .article-quote{margin-left:0;margin-right:0}

  .contact-dock{right:14px!important;bottom:14px!important;left:auto!important}
  .contact-toggle{min-height:50px}
}

@media(max-width:390px){
  :root{--layout-gutter:16px;--section-space:60px;--section-gap:30px}
  .section,.projects,.insights,.proof,.portfolio-book-section,.related-journal,
  main>section.process,.transformation,section.creation-journey,
  .contact-band,.footer,.location-copy{padding-left:16px!important;padding-right:16px!important}
  .page-hero .hero-inner{padding-left:16px!important;padding-right:16px!important}
  .page-hero h1{font-size:clamp(37px,11.5vw,45px)!important}
  .detail-facts{grid-template-columns:minmax(0,1fr)!important}
  footer.footer .footer-grid{column-gap:16px!important;row-gap:30px!important}
  footer.footer .footer-grid a,footer.footer .footer-grid p{font-size:11px!important}
  .contact-title-mobile span,.contact-title-mobile em{white-space:normal!important;text-wrap:balance}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}