/* Friendly Interiors — light, editorial design inspired by the supplied reference. */
:root {
  --ink: #101010;
  --muted: #645e52;
  --paper: #f8f3e7;
  --sand: #f1e5c9;
  --gold: #e8b63e;
  --gold-text: #795510;
  --gold-light: #f9db7a;
  --ivory: #fff9e9;
  --line: #dfcfaa;
  --serif: Georgia, 'Times New Roman', serif;
  --gutter: clamp(22px, 6.2vw, 100px);
  --shadow-soft: 0 18px 38px rgba(16, 16, 16, 0.08);
  --shadow-card: 0 10px 24px rgba(16, 16, 16, 0.06);
  --radius-xl: 26px;
  --radius-lg: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(233, 182, 62, 0.12), transparent 28%),
    linear-gradient(180deg, #f8f2e8 0%, #fffdf9 12%, #ffffff 100%);
  font: 15px/1.7 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(34px, 3.5vw, 51px); letter-spacing: -1.3px; }
h3 { font-size: 27px; letter-spacing: -.4px; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: 20px; background: white; padding: 12px; z-index: 20; }
.skip-link:focus { top: 10px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 98px;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: rgba(12, 12, 12, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 182, 62, 0.42);
  box-shadow: 0 14px 28px rgba(16, 16, 16, 0.16);
}
.brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 14px rgba(16, 16, 16, 0.12); }
.brand > span {
  font: 18px/1.2 var(--serif);
  letter-spacing: 0.8px;
  color: #f7f1e5;
  text-shadow: 0 0 12px rgba(249, 219, 122, 0.1);
}
.brand small { display: block; margin-top: 5px; font: 8px/1.4 Arial, sans-serif; letter-spacing: 3px; color: var(--gold-light); }
nav { display: flex; align-items: center; gap: 30px; }
nav a {
  position: relative;
  font-size: 14px;
  padding: 10px 0;
  transition: color .2s ease;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
nav a:hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); }
nav a:hover, .text-link:hover, .hero-secondary:hover { color: var(--gold-text); }
nav .nav-cta { border-bottom: 1px solid var(--ink); }
.nav-cta span { padding-left: 15px; }
.menu-toggle { border: 1px solid var(--line); background: white; padding: 9px 12px; font-size: 13px; }
.menu-toggle span { margin-left: 8px; }
.hero { min-height: 670px; height: min(740px, 75vw); position: relative; display: flex; align-items: flex-start; padding: 80px var(--gutter); isolation: isolate; background: #bcb3a3; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 16, 16, 0.68) 0%, rgba(16, 16, 16, 0.38) 35%, rgba(16, 16, 16, 0.2) 100%);
  z-index: -1;
}
.hero-slideshow { position: absolute; inset: 0; z-index: -2; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center 57%; filter: saturate(0.85) contrast(1.05); opacity: 0; transition: opacity 0.6s ease; }
.hero-image.is-active { opacity: 1; }
.hero-card {
  background: rgba(255, 250, 240, 0.97);
  padding: 43px 44px;
  width: 540px;
  max-width: 100%;
  border: 1px solid rgba(16, 16, 16, 0.04);
  border-left: 5px solid var(--gold);
  box-shadow: 0 30px 52px rgba(16, 16, 16, 0.22);
  border-radius: 26px;
  backdrop-filter: blur(2px);
}
.eyebrow { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.hero-card .eyebrow { color: var(--gold-text); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.hero h1 { font-size: 33px; line-height: 1.16; letter-spacing: -.5px; margin-bottom: 22px; }
.underline { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.hero-card > p:not(.eyebrow) { font-size: 15px; line-height: 1.6; margin-bottom: 25px; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 48px;
  padding: 12px 25px;
  border: 1px solid rgba(120, 89, 15, 0.45);
  background: linear-gradient(180deg, #f0c556 0%, #d9a63a 100%);
  color: var(--ink);
  font: 16px/1.35 var(--serif);
  border-radius: 999px;
  box-shadow: 0 14px 26px rgba(232, 182, 62, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover {
  background: linear-gradient(180deg, #f8d577 0%, #e2b64d 100%);
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(232, 182, 62, 0.3);
  filter: saturate(1.05);
}
.hero-secondary { display: inline-flex; width: fit-content; margin-top: 0; font-size: 12px; }
.hero-secondary span { padding-left: 16px; }
.hero-caption { position: absolute; bottom: 28px; right: var(--gutter); color: white; background: rgba(16, 16, 16, 0.7); padding: 7px 13px; font: italic 16px var(--serif); border-radius: 999px; border: 1px solid rgba(249, 219, 122, 0.35); }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: -22px auto 0;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}
.metric-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 249, 233, 0.95);
  border: 1px solid rgba(223, 207, 170, 0.9);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 14px 28px rgba(16, 16, 16, 0.06);
}
.metric-number {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 34px);
  letter-spacing: -0.5px;
  color: var(--ink);
}
.metric-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 1180px;
  margin: 24px auto 0;
  position: relative;
  z-index: 2;
}
.trust-strip div {
  display: grid;
  gap: 5px;
  padding: 22px 20px;
  background: rgba(255, 249, 233, 0.96);
}
.trust-strip strong {
  font: 700 11px Arial, sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.hero-dots {
  position: absolute;
  left: var(--gutter);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.3);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: var(--gold);
  border-color: var(--gold);
}
.specialisms { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 4.5vw, 72px); padding: 35px var(--gutter); }
.specialisms > span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; }
.specialisms p { font: 24px var(--serif); }
.specialisms i { font-size: 20px; color: var(--gold-text); font-style: normal; }
.section {
  padding: 85px var(--gutter);
  position: relative;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 182, 62, 0.5) 15%, rgba(232, 182, 62, 0.2) 50%, transparent 100%);
}
.section-heading { max-width: 800px; margin: 0 auto 42px; text-align: center; }
.section-heading > p:last-child:not(.eyebrow) { color: var(--muted); margin: 20px auto 0; max-width: 640px; }
.services { background: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; max-width: 1280px; margin: auto; }
.pathway-grid article {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(223, 207, 170, 0.8);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  box-shadow: 0 10px 22px rgba(16, 16, 16, 0.03);
}
.service-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(223, 207, 170, 0.7);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover, .project-card:hover, .home-projects article:hover, .guide-grid article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.service-card > img { width: 100%; height: 245px; }
.service-card:nth-child(2) > img { object-position: center 40%; }
.service-card:nth-child(3) > img { object-position: center 48%; }
.service-body { padding: 28px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tag { font-size: 10px; color: var(--gold-text); margin-bottom: 10px; }
.service-body h3 { margin-bottom: 14px; }
.service-body p { color: var(--muted); font-size: 13px; margin-bottom: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 22px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--gold); }
.service-body .text-link { margin-top: auto; }
.values-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; max-width: 1280px; margin: 42px auto 0; border-top: 1px solid var(--line); padding-top: 27px; }
.values-strip p { font-size: 12px; text-align: center; }
.values-strip span { color: var(--gold-text); font: 18px var(--serif); margin-right: 10px; }
.heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 30px; }
.heading-row > p { color: var(--muted); font-size: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.filters button { border: 1px solid var(--line); background: white; font-size: 12px; min-height: 42px; padding: 9px 19px; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold-light); }
.filters button:hover { border-color: var(--gold-text); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.project-card { min-width: 0; }
.project-photo { display: block; position: relative; overflow: hidden; background: var(--sand); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.project-photo img { width: 100%; height: 390px; transition: transform .5s; }
.project-card:nth-child(2) img { object-position: center 45%; }
.project-card:nth-child(3) img { object-position: center 35%; }
.project-card:nth-child(4) img { object-position: center 55%; }
.project-photo:hover img { transform: scale(1.025); }
.photo-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  background: white;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 12px 25px rgba(16, 16, 16, 0.12);
}
.project-caption { padding-top: 19px; }
.project-caption h3 { font-size: 25px; }
.project-caption p { font-size: 11px; margin-top: 8px; color: var(--muted); }
.project-banner { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); }
.project-banner > div { align-self: center; padding: 55px 55px 55px var(--gutter); }
.project-banner p:not(.eyebrow) { color: var(--muted); max-width: 440px; margin: 23px 0; font-size: 14px; }
.project-banner > img { width: 100%; height: 470px; }
.studio { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8%; }
.studio-photo { position: relative; }
.studio-photo img { width: 100%; height: 560px; object-position: center 50%; }
.studio-photo > span { position: absolute; bottom: 20px; left: 20px; background: white; padding: 11px 16px; font-size: 9px; letter-spacing: 2px; }
.studio-copy p:not(.eyebrow) { color: var(--muted); margin-top: 20px; font-size: 14px; }
.studio-copy p.lead { color: var(--ink); font: 21px/1.5 var(--serif); margin-top: 27px; }
.studio-copy p.signature { color: var(--gold-text); font: italic 25px var(--serif); margin-block: 28px 20px; }
.process { background: var(--paper); }
.process-visuals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 28px;
}
.process-visuals img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(223, 207, 170, 0.8);
}
.process-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 12px; }
.process-grid li {
  border-top: 1px solid var(--gold);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(223, 207, 170, 0.8);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.02);
}
.process-grid li > span { color: var(--gold-text); font: 27px var(--serif); }
.process-grid h3 { font-size: 23px; margin: 24px 0 14px; }
.process-grid p { font-size: 13px; color: var(--muted); }
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; }
.contact-copy h2 { font-size: clamp(45px, 4.5vw, 65px); }
.contact-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; max-width: 330px; margin: 25px 0; }
.contact-link { display: block; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.contact-link small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.contact-link > span { float: right; }
.enquiry-panel { background: var(--paper); padding: 38px; }
.enquiry-panel > p { margin: 12px 0 25px; font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
label { display: block; font-size: 11px; color: #393631; }
input, select, textarea { display: block; width: 100%; min-width: 0; border: 1px solid #c9c3b9; border-radius: 0; background: white; padding: 12px; margin-top: 7px; color: var(--ink); font-size: 13px; }
textarea { resize: vertical; }
form > label { margin-top: 18px; }
.form-note { font-size: 11px; color: var(--muted); margin: 20px 0; }
form .button { width: 100%; }
.direct-whatsapp { display: block; text-align: center; font-size: 11px; margin-top: 18px; text-decoration: underline; text-underline-offset: 3px; }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; padding-top: 30px; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 23px 0; font-size: 14px; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--gold-text); font-size: 20px; line-height: 1; }
details[open] summary::after { content: '−'; }
details p { color: var(--muted); font-size: 13px; padding: 0 25px 23px 0; }
.site-footer { background: var(--paper); padding: 45px var(--gutter) 20px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr .6fr 1fr; gap: 30px; align-items: start; }
.footer-top > p { font: 20px/1.4 var(--serif); }
.footer-top > div { display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.footer-top .brand > span { font-size: 14px; }
.footer-top .brand img { width: 48px; height: 48px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; }
.floating-chat-stack { position: fixed; right: 22px; bottom: 22px; z-index: 5; display: flex; align-items: end; gap: 0; }
.floating-chat, .floating-call, .floating-social {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 3px 15px #0002;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.floating-chat {
  width: 42px;
  height: 42px;
  background: #19834a;
  color: white;
}
.floating-call {
  width: 26px;
  height: 26px;
  margin-left: -7px;
  margin-bottom: 8px;
  background: var(--gold);
  color: var(--ink);
  border-color: white;
  box-shadow: 0 3px 12px rgba(16, 16, 16, 0.18);
}
.floating-social {
  width: 26px;
  height: 26px;
  margin-left: -7px;
  margin-bottom: 3px;
  background: #111;
  color: #fff;
}
.floating-facebook { background: #1877f2; }
.floating-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.floating-tiktok { background: #000; }
.floating-chat:hover { background: #116334; }
.floating-call:hover { background: var(--gold-light); }
.floating-social:hover { filter: brightness(1.08); }
@media (min-width: 1600px) { .section { padding-inline: max(var(--gutter), calc((100vw - 1280px) / 2)); } }
@media (max-width: 1050px) {
  .site-header { padding-inline: 28px; gap: 20px; }
  nav { gap: 18px; } nav a { font-size: 12px; }
  .brand > span { font-size: 15px; }
  .hero { min-height: 620px; padding-top: 60px; }
  .hero-card { width: 415px; padding: 35px; }
  .specialisms { gap: 25px; } .specialisms p { font-size: 21px; }
  .service-body { padding: 22px; } .service-body h3 { font-size: 25px; }
  .project-photo img { height: 320px; }
  .studio { gap: 5%; } .studio-photo img { height: 510px; }
  .process-grid { gap: 20px; }
  .contact { gap: 5%; } .enquiry-panel { padding: 28px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; min-height: 85px; padding: 16px 22px; }
  .brand img { width: 45px; height: 45px; } .brand { gap: 10px; }
  .brand > span { font-size: 14px; letter-spacing: .5px; } .brand small { font-size: 7px; letter-spacing: 2px; }
  nav { width: 100%; flex-wrap: wrap; gap: 10px 24px; padding-top: 12px; }
  .js #main-nav { display: none; } .js #main-nav.is-open { display: flex; }
  .hero { min-height: 655px; height: auto; padding: 40px 22px 65px; align-items: flex-start; }
  .hero-image { object-position: 60% center; }
  .hero-card { width: 370px; padding: 29px; }
  .hero h1 { font-size: 30px; }
  .hero-card .eyebrow { font-size: 9px; }
  .hero-card > p:not(.eyebrow) { font-size: 13px; }
  .hero-caption { font-size: 13px; right: 22px; bottom: 22px; }
  .specialisms { flex-wrap: wrap; gap: 12px 20px; padding: 24px 20px; }
  .specialisms > span { width: 100%; text-align: center; font-size: 8px; }
  .specialisms p { font-size: 19px; } .specialisms i { font-size: 14px; }
  .section { padding: 60px 22px; }
  .section-heading { margin-bottom: 30px; } .eyebrow { font-size: 12px; }
  h2 { font-size: 36px; letter-spacing: -.8px; }
  .section-heading > p:last-child:not(.eyebrow) { font-size: 13px; }
  .service-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-card > img { height: 280px; } .service-body { padding: 25px; }
  .values-strip { grid-template-columns: 1fr; gap: 15px; margin-top: 30px; } .values-strip p { text-align: left; }
  .heading-row { align-items: flex-start; flex-direction: column; gap: 20px; }
  .heading-row > p { font-size: 13px; }
  .filters { gap: 8px; } .filters button { padding: 8px 12px; font-size: 11px; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-photo img { height: 350px; } .project-caption h3 { font-size: 24px; }
  .project-banner { grid-template-columns: 1fr; } .project-banner > div { padding: 48px 22px; } .project-banner > img { height: 330px; }
  .studio { grid-template-columns: 1fr; gap: 35px; } .studio-photo img { height: 440px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; margin-top: 35px; } .process-grid h3 { font-size: 22px; }
  .contact { grid-template-columns: 1fr; gap: 35px; } .contact-copy h2 { font-size: 48px; }
  .enquiry-panel { padding: 25px; } input, select, textarea { font-size: 16px; }
  .faq { grid-template-columns: 1fr; gap: 25px; padding-top: 10px; }
  .footer-top { grid-template-columns: 1fr 1fr; } .footer-top .brand { grid-column: 1 / -1; }
  .site-footer { padding: 35px 22px 85px; } .footer-bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 370px) {
  .site-header { gap: 12px; } .brand > span { font-size: 12px; } .menu-toggle { font-size: 11px; padding: 8px; }
  .hero-card { padding: 25px; } .hero h1 { font-size: 27px; }
  .specialisms { gap: 10px 14px; } .specialisms p { font-size: 17px; }
  .process-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; }
}
/* The menu control is only needed at the collapsed navigation breakpoint. */
.menu-toggle { display: none; }
@media (max-width: 760px) { .menu-toggle { display: inline-flex; align-items: center; } }
@media (max-width: 760px) {
  .specialisms { column-gap: 12px; }
  .specialisms p { font-size: 17px; }
}

/* Logo palette: black, metallic gold and warm ivory. */
::selection { background: var(--gold); color: var(--ink); }
.site-header, .site-footer { background: var(--ink); color: var(--ivory); }
.site-header { border-bottom: 1px solid var(--gold); }
.site-header .brand small, .site-footer .brand small,
.site-header nav a:hover, .site-footer a:hover { color: var(--gold-light); }
nav .nav-cta { border-color: var(--gold); color: var(--gold-light); }
.menu-toggle { background: var(--ink); color: var(--gold-light); border-color: var(--gold); }
.hero-card { background: var(--ivory); }
.hero-caption { color: var(--gold-light); background: #101010e6; }
.specialisms { background: var(--ivory); }
.photo-arrow { background: var(--gold); color: var(--ink); }
.project-banner { background: var(--ink); color: var(--ivory); }
.project-banner .eyebrow { color: var(--gold-light); }
.project-banner p:not(.eyebrow) { color: #d9cdb5; }
.footer-top > div, .footer-bottom { color: #d9cdb5; }
.footer-bottom { border-color: #655127; }
.floating-chat { background: var(--ink); color: var(--gold-light); border-color: var(--gold); }
.floating-call { background: var(--gold); color: var(--ink); border-color: white; }
.floating-chat:hover { background: var(--gold); color: var(--ink); }
.floating-call:hover { background: var(--gold-light); }

/* Keep the office installation photograph intact in its portrait orientation. */
.project-card--office { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.project-card--office .project-photo { background: var(--sand); }
.project-card--office .project-photo img { height: 520px; object-fit: contain; }
.project-card--office .project-photo:hover img { transform: none; }
.project-card--office .project-caption { padding: clamp(25px, 4vw, 60px); align-self: center; }
.project-card--office h3 { font-size: clamp(28px, 3vw, 42px); margin-top: 15px; }
.project-card--office .project-story { font-size: 14px; margin: 24px 0; max-width: 400px; }
@media (max-width: 760px) {
  .project-card--office { grid-template-columns: 1fr; }
  .project-card--office .project-photo img { height: auto; max-height: 600px; }
}

/* Help visitors compare scope and prepare a useful project enquiry. */
.service-guide { padding-top: 65px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.guide-grid article { padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.guide-grid h3 { margin: 8px 0 16px; }
.guide-grid p, .guide-grid li { font-size: 13px; color: var(--muted); }
.guide-grid ul { padding-left: 18px; margin: 20px 0 25px; }
.guide-grid li + li { margin-top: 8px; }
.guide-grid .text-link { margin-top: auto; }
.guide-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 12px; color: var(--muted); }
.planning { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; background: var(--ivory); }
.planning > div > p:not(.eyebrow) { margin: 24px 0; color: var(--muted); font-size: 14px; }
.planning-details article { border-bottom: 1px solid var(--line); padding: 0 0 20px; margin-bottom: 20px; }
.planning-details h3 { font-size: 23px; margin-bottom: 10px; }
.planning-details p { font-size: 13px; color: var(--muted); }
.planning-checklist { padding: 25px; background: white; border-left: 3px solid var(--gold); }
.planning-checklist p + p { margin-top: 14px; }
.enquiry-extras { margin-top: 18px; }
@media (max-width: 760px) {
  .guide-grid, .planning { grid-template-columns: 1fr; gap: 25px; }
}


/* Five-page editorial layout */
.premium-gallery {
    background: #111110;
}

.capability-section {
  background: var(--paper);
}

.capability-note {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 32px auto 0;
  padding: 22px 24px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, .58);
  text-align: left;
}

.capability-note strong {
  color: var(--ink);
  font: 700 12px Arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.capability-note span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1280px;
  margin: 42px auto 0;
}

.capability-grid article {
  min-height: 210px;
  padding: 26px;
  border: 1px solid rgba(223, 207, 170, .9);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .64);
}

.capability-grid article > span {
  display: block;
  margin-bottom: 25px;
  color: var(--gold-text);
  font: 700 11px Arial, sans-serif;
  letter-spacing: 2px;
}

.capability-grid h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font: 23px/1.15 var(--serif);
}

.capability-grid p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability-note { grid-template-columns: 1fr; gap: 10px; }
}
.brand img { object-fit: cover; border-radius: 50%; background: transparent; }
nav a[aria-current="page"] { color: var(--gold-light); border-bottom: 1px solid var(--gold); }
.page-intro { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--ivory); min-height: 480px; }
.page-intro > div { align-self: center; padding: 60px var(--gutter); padding-right: 45px; }
.page-intro h1 { font-size: clamp(40px, 4.4vw, 66px); letter-spacing: -1.6px; }
.page-intro > div > p:not(.eyebrow) { margin: 25px 0; max-width: 500px; color: var(--muted); }
.page-intro figure { background: var(--sand); min-width: 0; display: flex; align-items: center; justify-content: center; }
.page-intro figure img { width: 100%; height: 510px; object-fit: contain; }
.page-intro .eyebrow, .editorial-split .eyebrow { color: var(--gold-text); }
.pathway-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; }
.pathway-grid article { padding: 25px 0; border-top: 1px solid var(--gold); }
.pathway-grid h3, .pathway-grid h2 { margin: 18px 0; font-size: 29px; }
.pathway-grid p { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.compact-note { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 25px; font-size: 13px; color: var(--muted); }
.compact-note a { text-decoration: underline; text-underline-offset: 4px; color: var(--gold-text); }
.home-work { background: var(--paper); }
.home-projects { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 26px; margin-bottom: 28px; }
.home-projects article {
  min-width: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(223, 207, 170, 0.78);
  border-radius: 18px;
  padding: 14px 14px 18px;
  box-shadow: 0 12px 24px rgba(16, 16, 16, 0.04);
}
.home-projects .preview-photo {
  display: block;
  background: var(--sand);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(223, 207, 170, 0.4);
}
.home-projects img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: saturate(0.88) contrast(1.04);
}
.home-projects article:hover img {
  transform: scale(1.02);
  filter: saturate(1) contrast(1.06);
}
.home-projects article:nth-child(2) img { object-position: center 42%; }
.home-projects article:nth-child(3) img { object-position: center 35%; }
.home-projects article:nth-child(4) img { object-position: center 45%; }
.home-projects article:nth-child(5) img { object-position: center 40%; }
.home-projects .tag { margin-top: 18px; }
.home-projects h3 { font-size: 25px; }
.editorial-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 8%; }
.editorial-split figure { min-width: 0; background: var(--paper); }
.editorial-split figure img { width: 100%; max-height: 560px; object-fit: contain; }
.editorial-split .landscape img { height: auto; }
.editorial-split .portrait img { height: 560px; }
.editorial-split.reverse figure { order: 2; }
.editorial-split > div > p:not(.eyebrow) { margin: 22px 0; font-size: 14px; color: var(--muted); }
.editorial-split p.lead { font: 23px/1.5 var(--serif); color: var(--ink); }
.editorial-split h3 { font-size: 22px; margin-top: 25px; }
.closing-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-items: center;
  background: linear-gradient(135deg, #121212 0%, #1f1a17 100%);
  color: var(--ivory);
  border: 1px solid rgba(232, 182, 62, 0.18);
  border-radius: 26px;
  box-shadow: 0 16px 30px rgba(16, 16, 16, 0.08);
}
.closing-cta .eyebrow { color: var(--gold-light); }
.closing-cta > div > p:not(.eyebrow) { color: #d9cdb5; margin-bottom: 25px; max-width: 440px; font-size: 14px; }
.process > .text-link { margin-top: 30px; }
.advertise-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 8%;
  align-items: center;
  background: var(--gold-light);
  border: 1px solid rgba(164, 116, 17, 0.24);
}
.advertise-strip h2 { max-width: 560px; }
.advertise-strip > div > p:not(.eyebrow):not(.tag) { max-width: 620px; color: var(--muted); font-size: 15px; margin-top: 22px; }
.advertise-strip .eyebrow { color: var(--gold-text); }
.advertise-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.advertise-actions .button { margin-top: 4px; }
.service-directory {
  background: linear-gradient(180deg, #f8f3e7 0%, #f5f1e8 100%);
  padding-bottom: 55px;
  border-top: 1px solid rgba(223, 207, 170, 0.8);
}
.service-directory .section-heading {
  max-width: 920px;
  margin: 0 auto 34px;
  text-align: center;
}
.service-directory .section-heading .eyebrow {
  letter-spacing: 1.4px;
  text-transform: none;
  font-size: 12px;
  color: var(--gold-text);
  margin-bottom: 18px;
}
.service-directory .section-heading h2 {
  font-size: clamp(42px, 5vw, 72px);
  letter-spacing: -1.8px;
  line-height: 0.96;
  margin-bottom: 18px;
}
.service-directory .section-heading p:last-child {
  max-width: 760px;
  font-size: 16px;
  color: var(--muted);
  margin: 0 auto;
}
.jump-links {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.jump-links a {
  min-width: 170px;
  border: 1px solid rgba(223, 207, 170, 0.9);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(16, 16, 16, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.jump-links a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(16, 16, 16, 0.06);
  border-color: rgba(232, 182, 62, 0.7);
  background: rgba(255, 249, 233, 0.9);
}
.service-detail { border-bottom: 1px solid var(--line); }
.detail-list { padding-left: 19px; color: var(--muted); font-size: 14px; margin: 17px 0 25px; }
.detail-list li + li { margin-top: 8px; }
.decision-note { padding: 20px; border-left: 2px solid var(--gold); background: var(--paper); margin-bottom: 25px; font-size: 13px; }
.decision-note p { color: var(--muted); margin-top: 8px; }
.story-list { display: grid; gap: 65px; }
.project-story-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6%; align-items: center; border-top: 1px solid var(--line); padding-top: 40px; }
.story-image { display: block; position: relative; background: var(--paper); }
.story-image img { width: 100%; height: 560px; object-fit: contain; }
.story-image.landscape img { height: auto; }
.story-copy h2 { font-size: clamp(29px,3vw,43px); margin: 14px 0 25px; }
.story-copy p:not(.tag) { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.story-copy p.lead { font: 21px/1.5 var(--serif); color: var(--ink); }
.story-copy h3 { font-size: 21px; }
.site-film { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9%; background: var(--ink); color: var(--ivory); }
.site-film .eyebrow { color: var(--gold-light); }
.site-film p:not(.eyebrow) { color: #d9cdb5; margin: 24px 0; font-size: 14px; }
.site-film .text-link { color: var(--gold-light); }
.site-film figure { text-align: center; }
.site-film video { display: block; width: 100%; max-height: 600px; object-fit: contain; background: black; }
.site-film figcaption { font-size: 11px; color: #d9cdb5; margin-top: 12px; }
.premium-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 30px;
}
.premium-gallery-grid figure {
  min-height: 280px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(223, 207, 170, 0.7);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 22px rgba(16, 16, 16, 0.04);
}
.premium-gallery-grid figure img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: saturate(0.9) contrast(1.04);
}
.premium-gallery-grid figure:hover img {
  transform: scale(1.02);
  filter: saturate(1) contrast(1.06);
}
.premium-gallery-grid .premium-gallery-feature { grid-row: span 2; min-height: 578px; }
.premium-gallery-grid .premium-gallery-feature img { object-position: center 42%; }
.premium-gallery-grid figure:nth-child(2) img { object-position: center 35%; }
.premium-gallery-grid figure:nth-child(3) img { object-position: center 45%; }
.premium-gallery-grid figure:nth-child(4) img { object-position: center 50%; }
.premium-gallery-grid figure:nth-child(5) img { object-position: center 42%; }

.preparation { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; background: var(--paper); margin-bottom: 60px; }
.preparation p { margin-top: 22px; color: var(--muted); }
.preparation-list { list-style: none; }
.preparation-list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.preparation-list strong { font: 23px var(--serif); display: block; margin-bottom: 10px; }
.preparation-list span { font-size: 14px; color: var(--muted); }
@media (max-width: 1050px) {
  .page-intro > div { padding: 45px 30px; }
  .pathway-grid { gap: 25px; }
  .home-projects { gap: 20px; }
  .home-projects img { height: 300px; }
  .editorial-split { gap: 5%; }
}
@media (max-width: 760px) {
  .page-intro { grid-template-columns: 1fr; }
  .page-intro > div { padding: 45px 22px; }
  .page-intro h1 { font-size: 42px; }
  .page-intro figure img { height: 350px; }
  .page-intro > div > p:not(.eyebrow) { font-size: 14px; }
  .pathway-grid, .home-projects, .editorial-split, .closing-cta, .advertise-strip, .project-story-card, .site-film, .preparation { grid-template-columns: 1fr; gap: 32px; }
  .home-projects img { aspect-ratio: 4 / 5; height: auto; }
  .home-projects article:first-child img { aspect-ratio: 16 / 10; }
  .editorial-split.reverse figure { order: 0; }
  .editorial-split .portrait img, .story-image img { height: auto; max-height: 580px; }
  .story-list { gap: 42px; }
  .jump-links { justify-content: flex-start; padding-top: 0; }
  .site-film video { max-height: 560px; }
  .preparation { margin-bottom: 35px; }
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip div {
  display: grid;
  gap: 5px;
  padding: 25px var(--gutter);
  background: var(--ivory);
}
.trust-strip strong { font: 700 12px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.trust-strip span { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip div { padding: 20px; }
}

/* Services page: a more editorial first impression and clearer wayfinding. */
.page-intro {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  border-bottom: 1px solid rgba(232, 182, 62, 0.45);
}
.page-intro > div {
  position: relative;
  z-index: 1;
  padding-block: 74px;
}
.page-intro > div::before {
  content: "01";
  display: block;
  margin-bottom: 22px;
  color: var(--gold-light);
  font: 700 11px Arial, sans-serif;
  letter-spacing: 2px;
}
.page-intro h1 { max-width: 590px; font-size: clamp(44px, 5.2vw, 76px); line-height: .98; }
.page-intro > div > p:not(.eyebrow) { color: #d9cdb5; max-width: 460px; }
.page-intro .eyebrow { color: var(--gold-light); }
.page-intro .text-link { color: var(--gold-light); border-color: var(--gold-light); }
.page-intro figure {
  position: relative;
  min-height: 480px;
  background: #26221d;
}
.page-intro figure::after {
  content: "MATERIAL / DETAIL / DIRECTION";
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: var(--gold-light);
  font: 10px Arial, sans-serif;
  letter-spacing: 1.7px;
  writing-mode: vertical-rl;
}
.page-intro figure img {
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08);
}
.jump-links a {
  position: relative;
  min-width: 185px;
  border-radius: 2px;
  border-color: rgba(121, 85, 16, .35);
  background: rgba(255, 249, 233, .88);
  box-shadow: none;
}
.jump-links a::after {
  content: "↗";
  position: absolute;
  right: 11px;
  top: 8px;
  color: var(--gold-text);
  font-size: 13px;
}
.service-directory .section-heading h2 { max-width: 760px; margin-inline: auto; }
.service-detail {
  position: relative;
  padding-top: 54px;
}
.service-detail::before {
  content: "SERVICE DETAIL";
  display: block;
  margin-bottom: 18px;
  color: var(--gold-text);
  font: 700 10px Arial, sans-serif;
  letter-spacing: 1.8px;
}
.service-detail > h2, .service-detail > h3 { max-width: 680px; }

@media (max-width: 760px) {
  .page-intro > div { padding-block: 48px; }
  .page-intro > div::before { margin-bottom: 16px; }
  .page-intro figure { min-height: 330px; }
  .page-intro figure::after { right: 15px; bottom: 14px; font-size: 8px; }
  .jump-links a { min-width: 0; flex: 1 1 145px; padding: 15px 28px 15px 14px; text-align: left; }
  .service-detail { padding-top: 38px; }
}

/* Editorial photo treatment: consistent grading and framing for supplied project images. */
.preview-photo, .project-photo, .premium-gallery-grid figure, .story-image, .process-visuals {
  isolation: isolate;
}
.preview-photo::after, .project-photo::after, .premium-gallery-grid figure::after, .story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 244, 214, .08), transparent 38%, rgba(16, 16, 16, .16));
  mix-blend-mode: multiply;
}
.preview-photo img, .project-photo img, .premium-gallery-grid figure img, .story-image img, .process-visuals img {
  filter: saturate(.78) contrast(1.1) brightness(.98);
}
.preview-photo img, .project-photo img, .premium-gallery-grid figure img, .story-image img {
  transform: scale(1.012);
}
.preview-photo:hover img, .project-photo:hover img, .premium-gallery-grid figure:hover img {
  filter: saturate(.9) contrast(1.12) brightness(1);
}
.project-photo, .preview-photo, .premium-gallery-grid figure {
  background: #d6c8ae;
}
.project-photo img, .preview-photo img, .premium-gallery-grid figure img {
  object-position: center 50%;
}
.premium-gallery-grid figure:first-child img { object-position: center 38%; }
.premium-gallery-grid figure:nth-child(2) img { object-position: center 42%; }
.premium-gallery-grid figure:nth-child(3) img { object-position: center 48%; }
.premium-gallery-grid figure:nth-child(4) img { object-position: center 55%; }
.process-visuals img { filter: saturate(.75) contrast(1.08) brightness(.97); }

/* Give the smaller homepage details enough room to read as real project images. */
.premium-gallery-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
.premium-gallery-grid figure, .premium-gallery-grid figure img { min-height: 340px; }
.premium-gallery-grid .premium-gallery-feature,
.premium-gallery-grid .premium-gallery-feature img { min-height: 702px; }
@media (max-width: 760px) {
  .premium-gallery-grid { grid-template-columns: 1fr; gap: 16px; }
  .premium-gallery-grid figure, .premium-gallery-grid figure img,
  .premium-gallery-grid .premium-gallery-feature, .premium-gallery-grid .premium-gallery-feature img { min-height: 330px; }
}

/* Final luxury pass for the homepage hero and primary actions. */
.hero::before {
  background: linear-gradient(90deg, rgba(9, 9, 9, .82) 0%, rgba(9, 9, 9, .48) 42%, rgba(9, 9, 9, .14) 100%);
}
.hero-card {
  background: rgba(17, 17, 16, .9);
  color: var(--ivory);
  border: 1px solid rgba(249, 219, 122, .28);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
  backdrop-filter: blur(9px);
}
.hero-card .eyebrow { color: var(--gold-light); }
.hero h1 { color: var(--ivory); font-size: clamp(36px, 3.4vw, 54px); letter-spacing: -.8px; }
.hero-card > p:not(.eyebrow) { color: #d9cdb5; }
.button {
  min-height: 50px;
  border-radius: 3px;
  padding-inline: 24px;
  font-size: 15px;
  letter-spacing: .15px;
}
.hero-secondary { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.hero-caption {
  border-radius: 2px;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 10px;
}
.section-heading h2, .heading-row h2 { text-wrap: balance; }
.home-projects article, .capability-grid article, .pathway-grid article {
  border-radius: 4px;
}

/* Bold luxury scale: give the homepage the confidence of a high-end studio site. */
.hero { min-height: 730px; }
.hero-card {
  position: relative;
  width: min(620px, 100%);
  padding: 54px 52px 50px;
  background: rgba(17, 17, 16, .62);
  border-top: 1px solid rgba(249, 219, 122, .55);
  backdrop-filter: blur(5px);
}
.hero-card::after {
  content: "FRIENDLY INTERIORS / PROJECT PLANNERS";
  display: block;
  margin-top: 34px;
  color: rgba(249, 219, 122, .72);
  font: 9px Arial, sans-serif;
  letter-spacing: 2.2px;
}
.hero h1 {
  max-width: 560px;
  font-size: clamp(42px, 4.5vw, 70px);
  line-height: .99;
}
.hero-card > p:not(.eyebrow) { max-width: 490px; font-size: 16px; line-height: 1.7; }
.hero-actions { margin-top: 30px; }
.hero .button { min-height: 54px; padding-inline: 28px; font-size: 16px; }
@media (max-width: 760px) {
  .hero { min-height: 690px; }
  .hero-card { padding: 36px 28px 32px; }
  .hero h1 { font-size: 38px; }
  .hero-card > p:not(.eyebrow) { font-size: 14px; }
  .hero-card::after { margin-top: 26px; letter-spacing: 1.5px; }
}

/* Transparent hero option: keep the photograph fully visible behind the copy. */
.hero-card {
  background: transparent;
  border-top-color: rgba(249, 219, 122, .78);
  border-left-color: var(--gold);
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
}
.hero-card .eyebrow, .hero-card::after { text-shadow: 0 2px 10px rgba(0, 0, 0, .82); }

/* Portfolio contact sheet: add a visual overview from the existing project archive. */
.portfolio .story-list::after {
  content: "";
  display: block;
  min-height: 330px;
  margin-top: 32px;
  background-image:
    linear-gradient(180deg, transparent 55%, rgba(16, 16, 16, .28)),
    url("images/kitchen%20design.jpg"),
    url("images/tv%20area%20done.jpg"),
    url("images/site%20visit%20day.jpg");
  background-size: 100% 100%, 32% 100%, 32% 100%, 32% 100%;
  background-position: center, left center, center center, right center;
  background-repeat: no-repeat;
  border: 1px solid rgba(223, 207, 170, .8);
  box-shadow: var(--shadow-card);
}
@media (max-width: 760px) {
  .portfolio .story-list::after {
    min-height: 520px;
    background-size: 100% 100%, 100% 32%, 100% 32%, 100% 32%;
    background-position: center, center top, center center, center bottom;
  }
}