Attitude Designs Interiors — Property Styling Castle Hill
/* ── CSS Variables ─────────────────────────────────────────────────── */
:root {
–terra: #a5432c;
–terra-lt: #c4614a;
–terra-pale: #e8c4b8;
–sand: #e1dcd7;
–stone: #d1c7bd;
–cream: #f5f0eb;
–ink: #1e1815;
–dusk: #5c4a42;
–fog: #b8ada6;
–white: #ffffff;
–font-head: ‘Cormorant Garamond’, Georgia, serif;
–font-body: ‘Jost’, system-ui, sans-serif;
–max-w: 1200px;
–gutter: clamp(1.25rem, 5vw, 4rem);
–section-gap: clamp(5rem, 10vw, 9rem);
–ease: cubic-bezier(.4,0,.2,1);
}
/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: var(–font-body);
font-weight: 300;
color: var(–ink);
background: var(–cream);
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ── Utility ────────────────────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(–max-w);
margin-inline: auto;
padding-inline: var(–gutter);
}
.eyebrow {
font-family: var(–font-body);
font-size: .7rem;
font-weight: 400;
letter-spacing: .25em;
text-transform: uppercase;
color: var(–terra);
}
.rule {
width: 2.5rem;
height: 1px;
background: var(–terra);
display: block;
margin-block: 1.5rem;
}
/* fade-up on scroll */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .75s var(–ease), transform .75s var(–ease);
}
.reveal.visible { opacity: 1; transform: none; }
/* ── NAV ────────────────────────────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 1.25rem var(–gutter);
display: flex;
align-items: center;
justify-content: space-between;
transition: background .3s var(–ease), box-shadow .3s var(–ease);
}
nav.scrolled {
background: rgba(245,240,235,.95);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(–stone);
}
.nav-logo {
font-family: var(–font-head);
font-size: 1.1rem;
font-weight: 400;
letter-spacing: .06em;
color: var(–ink);
line-height: 1.2;
}
.nav-logo em { color: var(–terra); font-style: italic; }
.nav-links {
display: flex;
gap: 2.25rem;
list-style: none;
}
.nav-links a {
font-size: .75rem;
font-weight: 400;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–dusk);
transition: color .2s;
}
.nav-links a:hover { color: var(–terra); }
.nav-cta {
font-size: .75rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(–white);
background: var(–terra);
padding: .6rem 1.5rem;
transition: background .2s;
}
.nav-cta:hover { background: var(–terra-lt); }
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block;
width: 24px;
height: 1.5px;
background: var(–ink);
transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(–cream);
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: var(–font-head);
font-size: 2rem;
font-weight: 300;
color: var(–ink);
letter-spacing: .04em;
transition: color .2s;
}
.mobile-menu a:hover { color: var(–terra); }
.mobile-menu .m-cta {
font-family: var(–font-body);
font-size: .8rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–white);
background: var(–terra);
padding: .8rem 2.5rem;
margin-top: 1rem;
}
/* ── HERO ───────────────────────────────────────────────────────────── */
.hero {
min-height: 100svh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
}
.hero-image {
position: relative;
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
animation: heroZoom 8s var(–ease) forwards;
}
@keyframes heroZoom {
to { transform: scale(1); }
}
.hero-image::after {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(30,24,21,.08), transparent);
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(5rem,10vw,8rem) clamp(2rem,5vw,5rem) 4rem;
background: var(–cream);
}
.hero-eyebrow {
opacity: 0;
animation: fadeUp .8s .4s var(–ease) forwards;
}
.hero-title {
font-family: var(–font-head);
font-size: clamp(2.6rem, 5vw, 4.2rem);
font-weight: 300;
line-height: 1.1;
margin-top: .75rem;
opacity: 0;
animation: fadeUp .8s .55s var(–ease) forwards;
}
.hero-title em { color: var(–terra); font-style: italic; display: block; }
.hero-rule {
opacity: 0;
animation: fadeUp .8s .7s var(–ease) forwards;
}
.hero-text {
max-width: 36ch;
font-size: clamp(.9rem,1.1vw,1.05rem);
line-height: 1.75;
color: var(–dusk);
opacity: 0;
animation: fadeUp .8s .85s var(–ease) forwards;
}
.hero-stats {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
opacity: 0;
animation: fadeUp .8s 1s var(–ease) forwards;
}
.hero-stat-val {
font-family: var(–font-head);
font-size: 2rem;
font-weight: 300;
color: var(–terra);
line-height: 1;
}
.hero-stat-label {
font-size: .7rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–fog);
margin-top: .3rem;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 3rem;
opacity: 0;
animation: fadeUp .8s 1.1s var(–ease) forwards;
}
.btn-primary {
font-size: .75rem;
font-weight: 400;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–white);
background: var(–terra);
padding: .9rem 2.2rem;
transition: background .2s, transform .2s;
display: inline-block;
}
.btn-primary:hover { background: var(–terra-lt); transform: translateY(-1px); }
.btn-ghost {
font-size: .75rem;
font-weight: 400;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–ink);
border: 1px solid var(–stone);
padding: .9rem 2.2rem;
transition: border-color .2s, color .2s, transform .2s;
display: inline-block;
}
.btn-ghost:hover { border-color: var(–terra); color: var(–terra); transform: translateY(-1px); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
/* ── MARQUEE ────────────────────────────────────────────────────────── */
.marquee-wrap {
background: var(–ink);
overflow: hidden;
padding: 1rem 0;
}
.marquee-track {
display: flex;
gap: 3rem;
animation: marquee 22s linear infinite;
width: max-content;
}
.marquee-track span {
font-size: .7rem;
font-weight: 400;
letter-spacing: .25em;
text-transform: uppercase;
color: var(–sand);
white-space: nowrap;
}
.marquee-track .dot {
color: var(–terra);
letter-spacing: 0;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── WORK ───────────────────────────────────────────────────────────── */
.work {
padding-block: var(–section-gap);
}
.work-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
gap: 2rem;
flex-wrap: wrap;
}
.work-header h2 {
font-family: var(–font-head);
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 300;
line-height: 1.1;
max-width: 14ch;
}
.work-header h2 em { color: var(–terra); font-style: italic; }
.work-header p {
max-width: 32ch;
font-size: .95rem;
line-height: 1.75;
color: var(–dusk);
}
.work-grid {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
grid-template-rows: 340px 340px;
gap: 8px;
}
.work-item {
position: relative;
overflow: hidden;
background: var(–stone);
}
.work-item:first-child {
grid-row: 1 / 3;
}
.work-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(–ease);
}
.work-item:hover img { transform: scale(1.04); }
.work-item-label {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–white);
background: rgba(30,24,21,.55);
backdrop-filter: blur(8px);
padding: .35rem .9rem;
}
/* ── BEFORE/AFTER ───────────────────────────────────────────────────── */
.ba {
padding-block: var(–section-gap);
background: var(–sand);
}
.ba-header { margin-bottom: 3.5rem; }
.ba-header h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
margin-top: .75rem;
}
.ba-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
}
.ba-card { position: relative; overflow: hidden; }
.ba-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
transition: transform .7s var(–ease);
}
.ba-card:hover img { transform: scale(1.03); }
.ba-tag {
position: absolute;
top: 1.25rem;
left: 1.25rem;
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
padding: .3rem .9rem;
}
.ba-tag.before { background: rgba(92,74,66,.75); color: var(–white); }
.ba-tag.after { background: var(–terra); color: var(–white); }
.ba-divider {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background: var(–terra);
color: var(–white);
font-size: 1.25rem;
flex-shrink: 0;
z-index: 1;
}
.ba-captions {
display: grid;
grid-template-columns: 1fr auto 1fr;
margin-top: 1.25rem;
gap: 0;
}
.ba-cap {
font-size: .85rem;
font-style: italic;
color: var(–fog);
}
.ba-cap.right { text-align: right; color: var(–terra); font-style: normal; font-weight: 400; }
.ba-cap.mid { width: 3.5rem; }
/* ── WHY ────────────────────────────────────────────────────────────── */
.why {
padding-block: var(–section-gap);
}
.why-header { margin-bottom: 4rem; }
.why-header h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
max-width: 22ch;
margin-top: .75rem;
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.why-card {
padding: 2.5rem 2rem 2.5rem 0;
border-top: 1px solid var(–stone);
position: relative;
}
.why-card:not(:last-child) { padding-right: 2.5rem; }
.why-icon {
width: 2rem;
height: 2rem;
margin-bottom: 1.75rem;
color: var(–terra);
}
.why-icon svg { width: 100%; height: 100%; fill: var(–terra); }
.why-card h3 {
font-family: var(–font-head);
font-size: 1.25rem;
font-weight: 400;
margin-bottom: .75rem;
}
.why-card p {
font-size: .9rem;
line-height: 1.75;
color: var(–dusk);
}
/* ── SERVICES ───────────────────────────────────────────────────────── */
.services {
padding-block: var(–section-gap);
background: var(–ink);
color: var(–sand);
}
.services-inner {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: clamp(3rem, 6vw, 7rem);
align-items: start;
}
.services-left h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
color: var(–cream);
margin-top: .75rem;
}
.services-left h2 em { color: var(–terra); font-style: italic; }
.services-tagline {
margin-top: 1.75rem;
font-size: .95rem;
line-height: 1.75;
font-style: italic;
color: var(–fog);
}
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.service-item {
padding: 1.75rem 1.75rem 1.75rem 0;
border-top: 1px solid rgba(255,255,255,.08);
}
.service-item:nth-child(odd) { padding-right: 2rem; }
.service-num {
font-family: var(–font-head);
font-size: 1rem;
font-style: italic;
color: var(–terra);
margin-bottom: .75rem;
}
.service-item h3 {
font-family: var(–font-body);
font-size: .95rem;
font-weight: 400;
color: var(–cream);
margin-bottom: .5rem;
}
.service-item p {
font-size: .85rem;
line-height: 1.7;
color: var(–fog);
}
/* ── PACKAGES ───────────────────────────────────────────────────────── */
.packages {
padding-block: var(–section-gap);
background: var(–cream);
}
.packages-header { margin-bottom: 4rem; }
.packages-header h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
margin-top: .75rem;
}
.packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(–stone);
}
.pkg-card {
background: var(–cream);
padding: 2.5rem 2.25rem;
display: flex;
flex-direction: column;
position: relative;
}
.pkg-card.featured {
background: var(–ink);
color: var(–sand);
}
.pkg-badge {
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–terra);
margin-bottom: 1rem;
}
.pkg-name {
font-family: var(–font-head);
font-size: 2rem;
font-weight: 300;
line-height: 1;
margin-bottom: .5rem;
}
.pkg-card.featured .pkg-name { color: var(–cream); }
.pkg-sub {
font-size: .8rem;
font-style: italic;
color: var(–fog);
margin-bottom: 2rem;
}
.pkg-rule { height: 1px; background: var(–stone); margin-bottom: 2rem; }
.pkg-card.featured .pkg-rule { background: rgba(255,255,255,.12); }
.pkg-features {
list-style: none;
display: flex;
flex-direction: column;
gap: .75rem;
flex: 1;
}
.pkg-features li {
display: flex;
gap: .75rem;
font-size: .88rem;
line-height: 1.5;
color: var(–dusk);
}
.pkg-card.featured .pkg-features li { color: var(–stone); }
.pkg-features li::before {
content: ‘—’;
color: var(–terra);
flex-shrink: 0;
}
.pkg-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(–stone);
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(–terra);
}
.pkg-card.featured .pkg-footer { border-color: rgba(255,255,255,.12); }
.pkg-cta {
margin-top: 1.5rem;
display: inline-block;
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase;
padding: .75rem 1.75rem;
transition: transform .2s, background .2s;
}
.pkg-cta.light {
background: var(–terra);
color: var(–white);
}
.pkg-cta.light:hover { background: var(–terra-lt); transform: translateY(-1px); }
.pkg-cta.dark {
background: var(–sand);
color: var(–ink);
}
.pkg-cta.dark:hover { background: var(–terra-pale); transform: translateY(-1px); }
.pkg-cta.outline {
border: 1px solid var(–stone);
color: var(–ink);
}
.pkg-cta.outline:hover { border-color: var(–terra); color: var(–terra); transform: translateY(-1px); }
/* ── PROCESS ────────────────────────────────────────────────────────── */
.process {
padding-block: var(–section-gap);
background: var(–sand);
}
.process-header { margin-bottom: 4rem; }
.process-header h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
margin-top: .75rem;
}
.process-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
}
.process-steps::before {
content: ”;
position: absolute;
top: 1.1rem;
left: 0; right: 0;
height: 1px;
background: var(–stone);
z-index: 0;
}
.process-step {
padding-top: 3rem;
padding-right: 1.5rem;
position: relative;
}
.step-dot {
position: absolute;
top: .6rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: var(–terra);
border-radius: 50%;
}
.step-num {
font-family: var(–font-head);
font-size: 1.6rem;
font-style: italic;
color: var(–terra);
margin-bottom: .75rem;
}
.process-step h3 {
font-family: var(–font-body);
font-size: .9rem;
font-weight: 400;
margin-bottom: .6rem;
color: var(–ink);
}
.process-step p {
font-size: .82rem;
line-height: 1.7;
color: var(–dusk);
}
/* ── REASONS ────────────────────────────────────────────────────────── */
.reasons {
padding-block: var(–section-gap);
}
.reasons-header { margin-bottom: 4rem; }
.reasons-header h2 {
font-family: var(–font-head);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 300;
line-height: 1.12;
margin-top: .75rem;
}
.reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.reason-item {
padding: 2.5rem 2.5rem 2.5rem 0;
border-top: 1px solid var(–stone);
}
.reason-num {
font-family: var(–font-head);
font-size: 1rem;
font-style: italic;
color: var(–terra);
margin-bottom: .6rem;
}
.reason-item h3 {
font-family: var(–font-body);
font-size: .95rem;
font-weight: 400;
margin-bottom: .5rem;
color: var(–ink);
}
.reason-item p {
font-size: .88rem;
line-height: 1.75;
color: var(–dusk);
}
/* ── CTA BAND ───────────────────────────────────────────────────────── */
.cta-band {
background: var(–ink);
padding-block: var(–section-gap);
position: relative;
overflow: hidden;
}
.cta-band::before {
content: ”;
position: absolute;
top: -8rem; right: -8rem;
width: 28rem; height: 28rem;
border-radius: 50%;
background: var(–terra);
opacity: .08;
}
.cta-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem,6vw,7rem);
align-items: center;
}
.cta-inner h2 {
font-family: var(–font-head);
font-size: clamp(2.2rem,5vw,4rem);
font-weight: 300;
line-height: 1.1;
color: var(–cream);
}
.cta-inner h2 em { color: var(–terra); font-style: italic; display: block; }
.cta-right p {
font-size: 1rem;
line-height: 1.8;
color: var(–fog);
margin-bottom: 2rem;
max-width: 38ch;
}
.cta-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: .6rem;
margin-bottom: 2.5rem;
}
.cta-steps li {
font-size: .82rem;
letter-spacing: .08em;
color: var(–stone);
}
.cta-steps li strong {
font-family: var(–font-head);
font-style: italic;
font-weight: 400;
color: var(–terra);
margin-right: .6rem;
}
.cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-terra {
font-size: .72rem;
font-weight: 400;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–white);
background: var(–terra);
padding: 1rem 2.5rem;
display: inline-block;
transition: background .2s, transform .2s;
}
.btn-terra:hover { background: var(–terra-lt); transform: translateY(-1px); }
.btn-outline-light {
font-size: .72rem;
font-weight: 400;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–stone);
border: 1px solid rgba(255,255,255,.2);
padding: 1rem 2.5rem;
display: inline-block;
transition: border-color .2s, color .2s, transform .2s;
}
.btn-outline-light:hover { border-color: var(–terra); color: var(–terra-pale); transform: translateY(-1px); }
/* ── FOOTER ─────────────────────────────────────────────────────────── */
footer {
background: var(–ink);
border-top: 1px solid rgba(255,255,255,.06);
padding: 3rem var(–gutter) 2rem;
}
.footer-inner {
max-width: var(–max-w);
margin-inline: auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-brand-name {
font-family: var(–font-head);
font-size: 1.2rem;
font-weight: 300;
color: var(–cream);
letter-spacing: .04em;
margin-bottom: .5rem;
}
.footer-brand-name em { color: var(–terra); font-style: italic; }
.footer-brand-sub {
font-size: .75rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(–fog);
margin-bottom: 1.25rem;
}
.footer-brand-desc {
font-size: .85rem;
line-height: 1.7;
color: var(–fog);
max-width: 28ch;
}
.footer-col h4 {
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–sand);
margin-bottom: 1.5rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.footer-col ul a {
font-size: .85rem;
color: var(–fog);
transition: color .2s;
}
.footer-col ul a:hover { color: var(–terra); }
.footer-col address {
font-style: normal;
font-size: .85rem;
line-height: 1.85;
color: var(–fog);
}
.footer-col address a { color: var(–terra-pale); transition: color .2s; }
.footer-col address a:hover { color: var(–terra); }
.footer-bottom {
max-width: var(–max-w);
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2rem;
gap: 1rem;
flex-wrap: wrap;
}
.footer-copy, .footer-tagline {
font-size: .72rem;
letter-spacing: .1em;
color: var(–fog);
}
.footer-tagline { color: var(–terra-pale); }
/* ── MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
.hero {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-image {
height: 55vw;
min-height: 280px;
}
.hero-content {
padding: 3rem var(–gutter) 4rem;
}
.hero-stats { gap: 2rem; }
.work-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.work-item:first-child { grid-row: auto; grid-column: 1 / -1; height: 60vw; }
.work-item { height: 50vw; }
.ba-grid { grid-template-columns: 1fr; gap: 0; }
.ba-divider { width: 100%; height: 3rem; }
.ba-captions { grid-template-columns: 1fr 1fr; }
.ba-cap.mid { display: none; }
.why-grid { grid-template-columns: 1fr 1fr; }
.why-card { padding-right: 1.5rem; }
.services-inner { grid-template-columns: 1fr; gap: 3rem; }
.services-grid { grid-template-columns: 1fr; }
.packages-grid { grid-template-columns: 1fr; background: none; gap: 1rem; }
.pkg-card { border: 1px solid var(–stone); }
.pkg-card.featured { border-color: var(–terra); }
.process-steps {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.process-steps::before { display: none; }
.process-step { padding-top: 2rem; }
.step-dot { top: .3rem; }
.reasons-grid { grid-template-columns: 1fr 1fr; }
.cta-inner { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
.work-grid { grid-template-columns: 1fr; }
.work-item:first-child { height: 75vw; }
.work-item { height: 65vw; }
.why-grid { grid-template-columns: 1fr; }
.reasons-grid { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; }
.hero-actions { flex-direction: column; }
.hero-actions .btn-primary,
.hero-actions .btn-ghost { text-align: center; }
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
}
Attitude DesignsInteriors
Book a Consultation
Castle Hill & The Hills District
Property StylingSells.
We transform properties into buyer magnets — expert staging, strategic positioning, and an obsessive attention to detail that makes your home impossible to forget.
Property Styling ·
Interior Staging ·
Photography Coordination ·
Pricing Strategy ·
Open Home Support ·
Castle Hill ·
Hills District ·
Sell Faster ·
Sell Smarter ·
Sell for More ·
Property Styling ·
Interior Staging ·
Photography Coordination ·
Pricing Strategy ·
Open Home Support ·
Castle Hill ·
Hills District ·
Sell Faster ·
Sell Smarter ·
Sell for More ·
Master Bedroom
Living & Dining
Bedroom
Kitchen
Bathroom
Before
→
After
Cluttered, personal, difficult for buyers to connect with.
Styled by Attitude Designs — aspirational & buyer-ready.
Emotional Connection
Styled homes invite buyers to imagine their future there — creating a bond that drives competitive offers and faster decisions.
Online Magnetism
Exceptional styling creates photographs that stop the scroll — generating more clicks, enquiries, and scheduled viewings.
Faster Sale
Professionally presented properties typically sell sooner, reducing holding costs and the stress of a prolonged campaign.
Higher Sale Price
A beautifully staged home signals quality and value — attracting stronger offers and a superior final result.
What We Do
End-to-end propertysupport.
One team. One strategy. One clear goal:
From first consultation through to settlement, we handle every detail of your property’s presentation and market positioning.
01
Property Styling & Staging
Expertly curated interiors and exteriors that showcase your property’s best features and create emotional buyer connection.
02
Sales Pitch & Positioning
A unique narrative tailored to the Castle Hill buyer profile — the story of their next home.
03
Pricing & Negotiation Strategy
Data-driven advice to optimise your asking price and sharpen your negotiation position.
04
Photography & Marketing
Professional photography, floorplans, and compelling marketing materials across all channels.
05
Open Home Presentation
Flawless presentation for every inspection — first impressions that convert interest into offers.
06
Agent Collaboration
Seamless partnership with your agent for a cohesive, aligned, and successful campaign.
Essential
Apartments & Owner-Occupied Homes
Styling consultation
Partial staging
Photography preparation
6-week hire period
Enquire Now
Most Popular
Premium
Family Homes — Maximum Impact
Full property staging
Furniture & décor hire
Photography & floorplan coordination
Marketing support
8-week hire period
Enquire Now
Luxury
Prestige & High-End Properties
Custom styling concept
Premium furniture & artwork
Outdoor styling
Extended hire period
White-glove installation & removal
Enquire Now
01
Book a Consultation
Discuss your goals, property, and vision with our expert team. We assess your property’s unique potential.
02
Choose Your Package
Select the perfect styling solution for your property type, timeline, and budget.
03
Styling & Staging
We transform your home using premium furniture and décor from our local Hills District warehouse.
04
Photography
Professional photography and marketing materials are carefully coordinated to present your best.
05
Launch & Sell
Enter the market as a buyer magnet and achieve a premium result with confidence.
01
One Point of Contact
A dedicated professional manages every aspect of your sale journey — no juggling multiple suppliers or chasing updates.
02
Trusted Local Stylists
Stylists who live and breathe The Hills District — with intimate knowledge of what local buyers want and expect.
03
Transparent Pricing
Clear, upfront packages with no hidden costs — you know exactly what you are receiving before we begin.
04
Strategic, Not Generic
Every approach is tailored to your specific property and target buyer — never off-the-shelf staging solutions.
05
Owner & Agent Aligned
We work in partnership with your agent for a seamless, cohesive campaign from consultation to settlement.
06
Results First
From first consultation to final sale — one singular focus: the best possible outcome for your property.
// Nav scroll state
const nav = document.getElementById(‘nav’);
window.addEventListener(‘scroll’, () => {
nav.classList.toggle(‘scrolled’, window.scrollY > 40);
}, { passive: true });
// Mobile menu
const hamburger = document.getElementById(‘hamburger’);
const mobileMenu = document.getElementById(‘mobileMenu’);
hamburger.addEventListener(‘click’, () => {
const open = mobileMenu.classList.toggle(‘open’);
hamburger.classList.toggle(‘open’, open);
document.body.style.overflow = open ? ‘hidden’ : ”;
});
function closeMenu() {
mobileMenu.classList.remove(‘open’);
hamburger.classList.remove(‘open’);
document.body.style.overflow = ”;
}
// Scroll reveal
const reveals = document.querySelectorAll(‘.reveal’);
const io = new IntersectionObserver(entries => {
entries.forEach((e, i) => {
if (e.isIntersecting) {
// stagger siblings in the same parent
const siblings = […e.target.parentElement.querySelectorAll(‘.reveal’)];
const idx = siblings.indexOf(e.target);
e.target.style.transitionDelay = (idx * 0.08) + ‘s’;
e.target.classList.add(‘visible’);
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
reveals.forEach(el => io.observe(el));
Master Bedroom
Living & Dining
Bedroom
Kitchen
Bathroom
Before
analauragcs07-tejkf 