/* ================================================================
   HENDRIX GARDENS — SITE STYLES
   ----------------------------------------------------------------
   01. Design tokens + global typography
   02. Header + navigation
   03. Shared links + spacing
   04. Homepage sections
   05. Footer
   06. Inner pages + portfolio
   07. Project pages + galleries
   08. Surreal CMS / lightbox helpers
   09. Responsive refinements

   Keep one-off page content in the HTML. Shared visual rules belong here.
   ================================================================ */
/* 01. DESIGN TOKENS + GLOBAL TYPOGRAPHY */ :root {
  --ivory:#f3f0e6;
  --paper:#faf8f2;
  --ink:#273247;
  --navy:#17263a;
  --gold:#b79a52;
  --charcoal:#333632;
  --muted:#6f706b;
  --serif:'Newsreader',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7
}
.page-width {
  max-width:1480px;
  padding-left:clamp(24px,5vw,84px);
  padding-right:clamp(24px,5vw,84px)
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:300;
  color:var(--ink);
  letter-spacing:-.02em
}
h1 {
  font-size:clamp(3.2rem,5.4vw,6.7rem);
  line-height:.92
}
h2 {
  font-size:clamp(2.6rem,4vw,4.8rem);
  line-height:1.02;
  margin-bottom:1.7rem
}
p {
  font-size:1rem
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin-bottom:1rem
}
/* 02. HEADER + NAVIGATION */ .site-header {
  background:rgba(243,240,230,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(39,50,71,.08)
}
.brand {
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.7rem;
  text-decoration:none;
  white-space:nowrap
}
.brand:hover {
  color:var(--ink)
}
.brand-mark {
  width:155px;
  height:34px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.3
}
.nav-link {
  font-size:.84rem;
  color:var(--ink)!important;
  padding:.6rem .5rem!important
}
.hero {
  min-height:calc(100vh - 72px);
  height:820px
}
.hero-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(9,18,24,.65) 0%,rgba(9,18,24,.2) 48%,rgba(9,18,24,.02) 78%)
}
.hero-content {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center
}
.hero-copy {
  max-width:780px
}
.hero h1 {
  color:#fff;
  margin-bottom:1.5rem
}
.eyebrow.light {
  color:#e2cc8a
}
/* 03. SHARED LINKS + SPACING */ .text-link {
  	display: inline-flex;
  	align-items: center;
  	gap: .65rem;
  	color: var(--gold);
  	font-size: 1rem;
  	font-weight: 400;
  	text-decoration: none;
  	margin-top: 1.2rem
}
.text-link span {
  transition:transform .25s
}
.text-link:hover {
  color:#957a3c
}
.text-link:hover span {
  transform:translateX(5px)
}
.text-link.light {
  color:#f1dfa6
}
.section-pad {
  padding:clamp(90px,10vw,160px) 0
}
.section-pad-sm {
  padding:clamp(70px,8vw,120px) 0
}
.pb-section {
  padding-bottom:clamp(90px,10vw,160px)
}
/* 04. HOMEPAGE SECTIONS */ .intro {
  background:var(--paper)
}
.lead-copy {
  max-width:570px;
  font-size:1.04rem
}
.editorial-image {
  margin:0
}
.editorial-image img {
  width:100%;
  height:560px;
  object-fit:cover
}
.editorial-image figcaption {
  font-size:.72rem;
  color:var(--muted);
  margin-top:.7rem
}
.projects {
  background:var(--paper)
}
.section-heading h2 {
  font-size:clamp(2.5rem,3.5vw,4.1rem)
}
.project-card {
  display:block;
  color:inherit;
  text-decoration:none
}
.project-image {
  height:390px;
  overflow:hidden;
  background:#ddd
}
.project-image.tall {
  height:455px;
  margin-top:-34px
}
.project-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}
.project-card:hover .project-image img {
  transform:scale(1.025)
}
.project-meta {
  padding-top:1rem
}
.project-meta h3 {
  font-size:1.55rem;
  margin:0 0 .15rem
}
.project-meta span {
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--muted)
}
.process-section {
  background:var(--navy)
}
.process-section h2 {
  color:#fff
}
.process-section p {
  max-width:530px;
  color:rgba(255,255,255,.75)
}
.gold {
  color:#d0b66f
}
.gold-link {
  color:#d0b66f
}
.process-visual {
  position:relative;
  min-height:510px
}
.process-visual>img {
  position:absolute;
  right:0;
  bottom:0;
  width:48%;
  height:330px;
  object-fit:cover
}
.plan-paper {
  position:absolute;
  left:0;
  top:0;
  width:68%;
  height:440px;
  background:#f0eadc;
  transform:rotate(-3deg);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  padding:30px
}
.plan-paper svg {
  width:100%;
  height:90%;
  fill:none;
  stroke:#73816e;
  stroke-width:2;
  opacity:.6
}
.plan-paper span {
  font-family:var(--serif);
  color:#6d6b60;
  font-size:1.1rem
}
.about {
  background:var(--ivory)
}
.about-image img {
  width:100%;
  height:690px;
  object-fit:cover
}
.credential {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.35
}
.credential-mark {
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  width:52px;
  height:52px;
  border-radius:50%;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--ink)
}
.image-break {
  height:600px
}
.image-break>img {
  width:100%;
  height:100%;
  object-fit:cover
}
.image-break-shade {
  position:absolute;
  inset:0;
  background:rgba(12,20,18,.32)
}
.image-break-copy {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px
}
.image-break-copy p {
  font-family:var(--serif);
  font-size:clamp(2.4rem,4vw,5rem);
  line-height:1.03;
  color:#fff;
  max-width:900px
}
.contact-section {
  background:var(--paper)
}
.contact-section h2 {
  margin:0
}
.contact-section p {
  max-width:450px
}
.contour-large {
  width:100%;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.2
}
/* 05. FOOTER */ .footer {
  background:var(--navy)
}
.footer .brand {
  color:#fff
}
.footer a {
  display:block;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  font-size:.78rem;
  margin-bottom:.45rem
}
.footer a:hover {
  color:#fff
}
.footer-brand {
  display:flex!important;
  font-size:1.7rem!important
}
.footer-tag {
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  font-size:.62rem;
  margin:4px 0 0 173px
}
.footer-small {
  font-size:.75rem;
  color:rgba(255,255,255,.55)
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.35);
  font-size:.68rem
}
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease,transform .75s ease
}
.reveal.in {
  opacity:1;
  transform:none
}
.delay-1 {
  transition-delay:.1s
}
.delay-2 {
  transition-delay:.2s
}
@media(max-width:991.98px) {
  .brand-mark {
    width:110px
  }
  .brand {
    font-size:1.45rem
  }
  .navbar-collapse {
    padding:1rem 0
  }
  .hero {
    height:720px;
    min-height:0
  }
  .hero-shade {
    background:linear-gradient(90deg,rgba(9,18,24,.62),rgba(9,18,24,.12))
  }
  .editorial-image img {
    height:470px
  }
  .project-image,.project-image.tall {
    height:430px;
    margin-top:0
  }
  .process-visual {
    min-height:500px
  }
  .about-image img {
    height:560px
  }
  .footer-tag {
    margin-left:128px
  }

}
@media(max-width:767.98px) {
  .page-width {
    padding-left:22px;
    padding-right:22px
  }
  .site-header .brand-mark {
    display:none
  }
  .hero {
    height:660px
  }
  .hero-content {
    align-items:flex-end;
    padding-bottom:70px
  }
  .hero-image {
    object-position:58% center
  }
  .project-image,.project-image.tall {
    height:62vw;
    min-height:320px
  }
  .process-visual {
    min-height:430px
  }
  .plan-paper {
    width:82%;
    height:330px
  }
  .process-visual>img {
    width:48%;
    height:230px
  }
  .about-image img {
    height:120vw;
    max-height:650px
  }
  .image-break {
    height:500px
  }
  .footer-tag {
    margin-left:0
  }
  .footer-brand .brand-mark {
    width:110px
  }
  .footer-bottom {
    gap:15px;
    flex-direction:column
  }
  .contour-large {
    max-width:420px
  }
  .section-pad {
    padding:82px 0
  }
  .pb-section {
    padding-bottom:82px
  }

}
/* 06. INNER PAGES + PORTFOLIO */
/* Inner pages */ .nav-link.active {
  color:var(--gold)!important
}
.inner-hero {
  background:var(--paper);
  padding:clamp(85px,9vw,145px) 0 clamp(80px,8vw,120px)
}
.inner-hero h1,
/* 07. PROJECT PAGES + GALLERIES */ .project-hero h1 {
  font-size:clamp(3.5rem,6vw,7rem);
  line-height:.94;
  margin-bottom:1.5rem
}
.inner-lead {
  max-width:600px;
  font-size:1.08rem
}
.inner-hero-image {
  width:100%;
  height:clamp(380px,48vw,670px);
  object-fit:cover
}
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(35px,5vw,80px) clamp(20px,2.5vw,40px)
}
.portfolio-item {
  color:inherit;
  text-decoration:none
}
.portfolio-item:nth-child(3n+2) {
  transform:translateY(45px)
}
.portfolio-item img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .6s ease
}
.portfolio-item:nth-child(3n+2) img {
  aspect-ratio:4/4.5
}
.portfolio-item:hover img {
  transform:scale(1.015)
}
.portfolio-item h2 {
  font-size:1.45rem;
  margin:1rem 0 .1rem
}
.portfolio-item p {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted)
}
.working-note {
  margin-top:100px;
  color:var(--muted);
  font-size:.78rem
}
.process-list {
  border-top:1px solid rgba(39,50,71,.18)
}
.process-step {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:25px;
  padding:42px 0;
  border-bottom:1px solid rgba(39,50,71,.18)
}
.process-step>span {
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--gold)
}
.process-step h2 {
  font-size:clamp(2rem,3vw,3.3rem);
  margin:0 0 .8rem
}
.process-step p {
  max-width:720px;
  margin:0
}
.process-editorial {
  background:var(--navy);
  color:rgba(255,255,255,.75)
}
.process-editorial h2 {
  color:#fff
}
.process-editorial img {
  width:100%;
  height:650px;
  object-fit:cover
}
.editorial-side-image {
  width:100%;
  height:650px;
  object-fit:cover
}
.contact-details {
  margin-top:45px
}
.contact-details a {
  color:var(--ink);
  text-decoration:none
}
.contact-form {
  border-top:1px solid rgba(39,50,71,.2);
  padding-top:25px
}
.contact-form label {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
  margin-bottom:8px
}
.contact-form .form-control {
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(39,50,71,.28);
  border-radius:0;
  padding:12px 0;
  box-shadow:none
}
.contact-form .form-control:focus {
  border-color:var(--gold);
  box-shadow:none
}
.editorial-button {
  border:0;
  background:var(--navy);
  color:#fff;
  padding:15px 24px;
  font:400 .82rem var(--sans)
}
.form-note {
  font-size:.7rem;
  color:var(--muted);
  margin-top:14px
}
.project-hero {
  background:var(--paper)
}
.project-subtitle {
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.72rem
}
.project-feature img {
  width:100%;
  height:min(76vh,900px);
  object-fit:cover
}
.project-gallery {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(20px,4vw,60px);
  margin-top:clamp(80px,10vw,150px);
  align-items:start
}
.project-gallery img {
  width:100%;
  object-fit:cover
}
.project-gallery img:first-child {
  grid-row:span 2;
  height:800px
}
.project-gallery img:nth-child(2) {
  height:420px
}
.project-gallery img:nth-child(3) {
  height:520px
}
.next-project {
  padding:70px 0;
  background:var(--paper);
  border-top:1px solid rgba(39,50,71,.1)
}
.next-project a {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,4rem);
  color:var(--ink);
  text-decoration:none
}
@media(max-width:991.98px) {
  .portfolio-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .portfolio-item:nth-child(3n+2) {
    transform:none
  }
  .process-editorial img,.editorial-side-image {
    height:520px
  }

}
@media(max-width:767.98px) {
  .portfolio-grid {
    grid-template-columns:1fr;
    gap:50px
  }
  .portfolio-item img,.portfolio-item:nth-child(3n+2) img {
    aspect-ratio:4/4.6
  }
  .working-note {
    margin-top:60px
  }
  .process-step {
    grid-template-columns:55px 1fr;
    padding:30px 0
  }
  .project-gallery {
    grid-template-columns:1fr
  }
  .project-gallery img:first-child,.project-gallery img:nth-child(2),.project-gallery img:nth-child(3) {
    height:auto;
    aspect-ratio:4/5
  }
  .inner-hero-image {
    height:115vw;
    max-height:600px
  }

}
/* October refinement: quieter editorial scale and more considered spacing */ body {
  font-size:16px;
  line-height:1.72
}
h1 {
  font-size:clamp(2.9rem,4.6vw,5.15rem);
  line-height:1.01;
  letter-spacing:-.025em
}
h2 {
  font-size:clamp(2.15rem,3.15vw,3.65rem);
  line-height:1.08;
  letter-spacing:-.018em;
  margin-bottom:1.45rem
}
h3 {
  letter-spacing:-.012em
}
.eyebrow {
  display:none!important
}
.hero h1 {
  max-width:700px;
  margin-bottom:1.8rem;
  font-size:clamp(3rem,4.7vw,5.25rem);
  line-height:1.01
}
.hero-copy:after {
  content:"";
  display:block;
  width:76px;
  height:1px;
  background:#d0b66f;
  margin-top:2rem;
  opacity:.9
}
.section-pad {
  padding:clamp(82px,8vw,132px) 0
}
.section-pad-sm {
  padding:clamp(68px,6.5vw,105px) 0
}
.pb-section {
  padding-bottom:clamp(82px,8vw,132px)
}
.inner-hero {
  padding:clamp(78px,7vw,112px) 0 clamp(82px,7.5vw,118px)
}
.inner-hero h1,.project-hero h1 {
  font-size:clamp(3rem,4.8vw,5.2rem);
  line-height:1.01;
  margin-bottom:1.35rem;
  max-width:720px
}
.inner-lead {
  font-size:1.02rem;
  line-height:1.75;
  max-width:560px
}
.inner-follow {
  padding-top:clamp(82px,8vw,125px)!important
}
.inner-follow>.container-fluid {
  position:relative
}
.inner-follow>.container-fluid:before {
  content:"";
  position:absolute;
  top:0;
  left:clamp(24px,5vw,84px);
  width:72px;
  height:1px;
  background:var(--gold);
  transform:translateY(calc(clamp(82px,8vw,125px) * -1))
}
.editorial-side-image {
  height:min(620px,70vh)
}
.image-break-copy p {
  font-size:clamp(2rem,3.2vw,3.65rem);
  line-height:1.08;
  max-width:760px
}
.contact-section h2 {
  font-size:clamp(2.25rem,3vw,3.4rem)
}
/* Process: no numbered steps; calm two-column editorial rhythm */ .process-list {
  border-top:1px solid rgba(39,50,71,.18)
}
.process-step {
  display:grid;
  grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);
  gap:clamp(34px,6vw,100px);
  padding:clamp(34px,4vw,58px) 0;
  border-bottom:1px solid rgba(39,50,71,.16);
  align-items:start
}
.process-step>div {
  display:contents
}
.process-step h2 {
  font-size:clamp(1.65rem,2.2vw,2.45rem);
  line-height:1.12;
  margin:0
}
.process-step p {
  font-size:.98rem;
  max-width:650px;
  margin:0;
  padding-top:.15rem
}
.process-editorial h2 {
  font-size:clamp(2.2rem,3vw,3.35rem)
}
/* Portfolio: photography leads, captions remain quiet */ .portfolio-grid {
  gap:clamp(54px,6vw,94px) clamp(24px,3vw,46px)
}
.portfolio-item h2 {
  font-size:1.3rem;
  margin:.95rem 0 .05rem
}
.portfolio-item p {
  font-size:.74rem;
  text-transform:none;
  letter-spacing:.01em;
  color:var(--muted);
  margin:0
}
.project-meta span {
  font-size:.74rem;
  text-transform:none;
  letter-spacing:.01em
}
/* Contact: understated form rather than a large graphic panel */ .contact-form {
  padding-top:0;
  border-top:0
}
.contact-form label {
  font-size:.75rem;
  text-transform:none;
  letter-spacing:.02em;
  color:var(--muted);
  margin-bottom:5px
}
.contact-form .form-control {
  padding:10px 0 12px
}
.editorial-button {
  margin-top:8px;
  padding:14px 22px
}
@media(max-width:991.98px) {
    .inner-follow {
    padding-top:78px!important
  }
    .inner-follow>.container-fluid:before {
    transform:translateY(-78px)
  }
    .process-step {
    grid-template-columns:1fr;
    gap:12px
  }
    .process-step>div {
    display:block
  }
    .process-step h2 {
    margin-bottom:.7rem
  }

}
@media(max-width:767.98px) {
    h1 {
    font-size:clamp(2.65rem,12vw,3.7rem)
  }
    h2 {
    font-size:clamp(2rem,9vw,2.8rem)
  }
    .hero h1 {
    font-size:clamp(2.7rem,11.5vw,3.9rem)
  }
    .inner-hero h1,.project-hero h1 {
    font-size:clamp(2.65rem,11vw,3.8rem)
  }
    .inner-hero {
    padding:64px 0 72px
  }
    .inner-follow {
    padding-top:68px!important
  }
    .inner-follow>.container-fluid:before {
    left:22px;
    transform:translateY(-68px)
  }
    .section-pad {
    padding:72px 0
  }
    .image-break-copy p {
    font-size:clamp(1.9rem,9vw,2.8rem)
  }

}
/* Gallery refinement: consistent image proportions throughout */ .project-image,.project-image.tall {
  height:auto!important;
  margin-top:0!important;
  aspect-ratio:4/3;
  overflow:hidden
}
.project-image img {
  width:100%;
  height:100%;
  object-fit:cover
}
.portfolio-item:nth-child(3n+2) {
  transform:none!important
}
.portfolio-item img,.portfolio-item:nth-child(3n+2) img {
  width:100%;
  aspect-ratio:4/3!important;
  object-fit:cover
}
.project-gallery {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,42px)
}
.project-gallery img,.project-gallery img:first-child,.project-gallery img:nth-child(2),.project-gallery img:nth-child(3) {
  grid-row:auto;
  height:auto!important;
  aspect-ratio:4/3;
  object-fit:cover
}
@media(max-width:767.98px) {
  .project-gallery {
    grid-template-columns:1fr
  }
  .project-image,.project-image.tall {
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4/3
  }
  .portfolio-item img,.portfolio-item:nth-child(3n+2) img {
    aspect-ratio:4/3!important
  }

}
/* Hendrix Gardens identity: faithful web treatment of Aly's original artwork */ .brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  line-height:1
}
.brand-logo {
  display:block;
  width:clamp(285px,25vw,430px);
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center
}
.footer-logo {
  display:block;
  width:min(100%,420px);
  height:auto;
  filter:none
}
.footer-brand {
  display:block!important;
  margin-bottom:.4rem
}
.footer-tag {
  margin:8px 0 0 0!important
}
.contour-large {
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  object-fit:contain
}
@media(max-width:991.98px) {
  .brand-logo {
    width:310px;
    max-height:56px
  }

}
@media(max-width:767.98px) {
  .site-header .brand-logo {
    display:block;
    width:230px;
    max-height:48px
  }
  .footer-logo {
    width:290px
  }
  .contour-large {
    max-width:380px
  }

}
@media(max-width:390px) {
  .site-header .brand-logo {
    width:205px
  }

}
/* Finished portfolio + Surreal CMS galleries */ .project-hero-simple {
  padding-top:clamp(55px,8vw,105px)
}
.project-title-wrap {
  padding-bottom:clamp(30px,5vw,60px)
}
.project-title-wrap h1 {
  margin:.8rem 0 0;
  font-size:clamp(3rem,7vw,6.5rem);
  font-weight:300
}
.project-hero-photo {
  display:block;
  width:100%;
  height:min(70vh,760px);
  object-fit:cover
}
.project-intro {
  max-width:760px;
  margin:0 0 clamp(35px,5vw,70px);
  font-size:1.12rem
}
.project-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2vw,28px)
}
.project-gallery>a {
  display:block;
  overflow:hidden;
  background:#eee9df
}
.project-gallery img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .45s ease
}
.project-gallery>a:hover img {
  transform:scale(1.015)
}
.project-nav {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:clamp(45px,7vw,90px);
  margin-top:clamp(45px,7vw,90px);
  border-top:1px solid rgba(25,42,73,.18)
}
.project-nav a {
  color:inherit;
  text-decoration:none
}
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,60px) clamp(18px,3vw,38px)
}
.portfolio-item a {
  text-decoration:none;
  color:inherit
}
.portfolio-item img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin-bottom:16px
}
.portfolio-item h2 {
  font-size:clamp(1.45rem,2vw,2rem);
  font-weight:300;
  margin:0
}
.future-projects {
  background:#f0ece3
}
.future-projects h2 {
  margin-bottom:28px
}
.future-project-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px
}
.future-project-list li {
  padding:17px 0;
  border-top:1px solid rgba(25,42,73,.18);
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(1.4rem,2.3vw,2.1rem)
}
.home-feature-image {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}
.hg-lightbox {
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(12,17,25,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:35px
}
.hg-lightbox.open {
  display:flex
}
.hg-lightbox img {
  max-width:94vw;
  max-height:90vh;
  object-fit:contain
}
.hg-lightbox button {
  position:absolute;
  right:24px;
  top:18px;
  background:none;
  border:0;
  color:#fff;
  font-size:2.4rem;
  line-height:1;
  cursor:pointer
}
@media(max-width:767.98px) {
  .portfolio-grid {
    grid-template-columns:1fr
  }
  .project-gallery {
    grid-template-columns:1fr
  }
  .future-project-list {
    grid-template-columns:1fr
  }
  .project-hero-photo {
    height:55vh
  }

}
/* Header logo + homepage hero carousel refinement */ .brand-logo {
  width:clamp(360px,31vw,520px);
  max-height:72px
}
.footer-logo {
  width:min(100%,500px)
}
.hero-carousel {
  height:min(82vh,880px);
  min-height:680px
}
.hero-carousel .carousel,.hero-carousel .carousel-inner,.hero-carousel .carousel-item {
  height:100%
}
.hero-carousel .hero-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.hero-carousel .carousel-item {
  transition:opacity 1.15s ease-in-out
}
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
  width:7%;
  z-index:5;
  opacity:.72
}
.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon {
  width:2.1rem;
  height:2.1rem
}
.hero-carousel .hero-shade,.hero-carousel .hero-content {
  z-index:3;
  pointer-events:none
}
.hero-carousel .hero-copy a {
  pointer-events:auto
}
@media(max-width:991.98px) {
  .brand-logo {
    width:350px;
    max-height:62px
  }
  .hero-carousel {
    height:74vh;
    min-height:620px
  }

}
@media(max-width:767.98px) {
  .site-header .brand-logo {
    width:265px;
    max-height:54px
  }
  .hero-carousel {
    height:72vh;
    min-height:580px
  }
  .hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
    width:11%
  }

}
@media(max-width:390px) {
  .site-header .brand-logo {
    width:235px
  }

}
/* October final typography + logo lock-up */ :root {
  --serif:'Newsreader',Georgia,serif
}
.brand {
  min-width:0
}
.brand-lockup {
  display:flex;
  align-items:flex-end;
  position:relative;
  width:clamp(365px,32vw,535px);
  height:70px;
  white-space:nowrap
}
.brand-waves {
  display:block;
  width:58%;
  height:62px;
  object-fit:fill;
  object-position:left bottom;
  flex:0 0 58%
}
.brand-name {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.42rem,1.55vw,1.82rem);
  line-height:1;
  color:var(--gold);
  margin:0 0 8px 22px;
  letter-spacing:-.025em;
  position:relative
}
.brand-name:after {
  content:"";
  position:absolute;
  height:1px;
  background:var(--gold);
  left:-22px;
  right:0;
  bottom:-8px
}
.footer-lockup {
  width:min(100%,500px);
  height:68px
}
.footer-lockup .brand-name {
  color:#d5b24a
}
.footer-lockup .brand-name:after {
  background:#d5b24a
}
h1,h2,h3,.image-break-copy p,.next-project a,.credential-mark {
  font-family:var(--serif)
}
/* Smoother hero cross-fade and always-visible controls */ .hero-carousel .carousel-inner {
  background:#152034
}
.hero-carousel .carousel-item {
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:0!important;
  transform:none!important;
  transition:opacity 1.8s cubic-bezier(.4,0,.2,1)!important;
  will-change:opacity;
  z-index:0
}
.hero-carousel .carousel-item.active {
  opacity:1!important;
  z-index:1
}
.hero-carousel .hero-image {
  transform:scale(1.002);
  backface-visibility:hidden
}
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
  display:flex!important;
  opacity:1!important;
  width:72px;
  z-index:8;
  pointer-events:auto!important
}
.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon {
  background-image:none!important;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  position:relative;
  background-color:rgba(15,25,35,.16)
}
.hero-carousel .carousel-control-prev-icon:after,.hero-carousel .carousel-control-next-icon:after {
  content:"";
  position:absolute;
  top:13px;
  width:13px;
  height:13px;
  border-top:1.5px solid #fff;
  border-right:1.5px solid #fff
}
.hero-carousel .carousel-control-prev-icon:after {
  left:15px;
  transform:rotate(-135deg)
}
.hero-carousel .carousel-control-next-icon:after {
  right:15px;
  transform:rotate(45deg)
}
.hero-carousel .hero-shade,.hero-carousel .hero-content {
  z-index:4
}
@media(max-width:991.98px) {
  .brand-lockup {
    width:355px;
    height:62px
  }
  .brand-waves {
    height:54px
  }
  .brand-name {
    font-size:1.35rem;
    margin-left:16px
  }
  .brand-name:after {
    left:-16px
  }
  .hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
    width:58px
  }

}
@media(max-width:767.98px) {
  .site-header .brand-lockup {
    width:270px;
    height:52px
  }
  .brand-waves {
    height:44px
  }
  .brand-name {
    font-size:1rem;
    margin:0 0 7px 11px
  }
  .brand-name:after {
    left:-11px;
    bottom:-7px
  }
  .footer-lockup {
    width:310px
  }
  .hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
    width:48px
  }
  .hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon {
    width:36px;
    height:36px
  }
  .hero-carousel .carousel-control-prev-icon:after,.hero-carousel .carousel-control-next-icon:after {
    top:11px;
    width:11px;
    height:11px
  }
  .hero-carousel .carousel-control-prev-icon:after {
    left:13px
  }
  .hero-carousel .carousel-control-next-icon:after {
    right:13px
  }

}
/* Supplied Hendrix Gardens logo and matching header background */ .site-header {
  background:#f9f7f2!important;
  backdrop-filter:none!important
}
.site-header .brand {
  display:flex;
  align-items:center;
  line-height:1
}
.site-header .brand-logo {
  display:block;
  width:clamp(390px,34vw,590px);
  height:auto;
  max-height:72px;
  object-fit:contain;
  object-position:left center
}
.footer-logo {
  display:block;
  width:min(100%,500px);
  height:auto
}
@media(max-width:991.98px) {
  .site-header .brand-logo {
    width:370px;
    max-height:64px
  }

}
@media(max-width:767.98px) {
  .site-header .brand-logo {
    width:265px;
    max-height:52px
  }
  .footer-logo {
    width:310px
  }

}
@media(max-width:390px) {
  .site-header .brand-logo {
    width:235px
  }

}
/* Mobile navigation control */ .navbar-toggler {
  border:0!important;
  padding:.45rem!important;
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:none!important
}
.navbar-toggler:focus {
  box-shadow:none!important
}
.navbar-toggler-icon {
  position:relative;
  display:block!important;
  width:25px!important;
  height:16px!important;
  background-image:none!important;
  border-top:1.5px solid var(--ink)
}
.navbar-toggler-icon:before,.navbar-toggler-icon:after {
  content:"";
  position:absolute;
  left:0;
  width:25px;
  height:1.5px;
  background:var(--ink)
}
.navbar-toggler-icon:before {
  top:6px
}
.navbar-toggler-icon:after {
  top:13px
}
@media(max-width:991.98px) {
  .navbar-toggler {
    display:flex
  }
  .site-header .navbar>.page-width {
    flex-wrap:wrap
  }
  .site-header .brand-logo {
    width:clamp(205px,62vw,350px);
    max-height:58px
  }
  .site-header .navbar-collapse {
    flex-basis:100%
  }

}
@media(max-width:390px) {
  .site-header .brand-logo {
    width:clamp(190px,64vw,235px)
  }

}
/* October 2026 typography/footer refinement */ .footer-name {
  font-family:var(--serif);
  font-size:clamp(1.9rem,2.5vw,2.6rem)!important;
  font-weight:400;
  line-height:1.1;
  color:#fff!important;
  margin-bottom:.5rem!important;
  display:inline-block!important
}
.footer-tag {
  margin-left:0!important
}
/* October final logo and mobile hero controls */ .site-header .brand-logo {
  width:clamp(390px,34vw,590px);
  max-height:76px;
  object-fit:contain;
  object-position:left center
}
@media(max-width:767.98px) {
    .site-header .brand-logo {
    width:clamp(205px,64vw,275px);
    max-height:54px
  }
    .hero-carousel .carousel-control-prev,   .hero-carousel .carousel-control-next {
    top:auto;
    bottom:20px;
    width:52px;
    height:52px;
    align-items:center;
    justify-content:center
  }
    .hero-carousel .carousel-control-prev {
    left:14px
  }
    .hero-carousel .carousel-control-next {
    right:14px
  }
    .hero-carousel .carousel-control-prev-icon,   .hero-carousel .carousel-control-next-icon {
    width:36px;
    height:36px
  }

}
/* Mobile logo scale and hero link refinement */ .site-header {
  background:#faf8f2!important
}
.site-header .brand-logo {
  width:clamp(400px,35vw,600px);
  max-height:none
}
@media(max-width:991.98px) {
    .site-header .brand-logo {
    width:clamp(280px,55vw,390px);
    max-height:none
  }

}
@media(max-width:767.98px) {
    .site-header .brand-logo {
    width:clamp(260px,72vw,310px);
    max-height:none
  }
    .hero-copy .text-link.light span {
    display:none
  }
    .hero-copy .text-link.light {
    gap:0
  }

}
@media(max-width:390px) {
    .site-header .brand-logo {
    width:clamp(245px,70vw,275px)
  }

}
/* Final responsive header logo sizing */ .site-header .brand-logo {
  width:430px;
  max-width:100%;
  height:auto;
  max-height:none
}
@media(max-width:991.98px) {
  .site-header .brand-logo {
    width:320px
  }

}
@media(max-width:767.98px) {
  .site-header .brand-logo {
    width:270px;
    max-width:calc(100vw - 92px)
  }

}
@media(max-width:390px) {
  .site-header .brand-logo {
    width:250px;
    max-width:calc(100vw - 84px)
  }

}
/* Mobile hero: keep the Portfolio link and arrow, remove only the decorative underline */ @media (max-width: 767.98px) {
    .hero-copy:after {
    display:none!important;
    content:none!important
  }
    .hero-copy .text-link.light span {
    display:inline!important
  }
    .hero-copy .text-link.light {
    gap:.65rem
  }

}
/* SGLD registered member accreditation */ .home-accreditation {
  display:flex;
  align-items:center;
  gap:18px;
  margin:28px 0 22px
}
.home-accreditation img {
  width:118px;
  height:auto;
  display:block
}
.home-accreditation p {
  max-width:250px;
  margin:0;
  font-size:.88rem;
  line-height:1.45;
  color:var(--ink)
}
.about-accreditation {
  display:flex;
  align-items:center;
  gap:22px
}
.about-accreditation img {
  width:150px;
  height:auto;
  display:block
}
.about-accreditation p {
  max-width:280px;
  margin:0;
  font-size:.92rem;
  line-height:1.5
}
.footer-accreditation {
  display:inline-block!important;
  margin-top:24px
}
.footer-accreditation img {
  display:block;
  width:84px;
  height:auto;
  opacity:.92
}
@media(max-width:767.98px) {
   .home-accreditation {
    gap:14px;
    margin:24px 0 20px
  }
  .home-accreditation img {
    width:102px
  }
  .home-accreditation p {
    font-size:.82rem
  }
   .about-accreditation {
    gap:16px
  }
  .about-accreditation img {
    width:125px
  }
   .footer-accreditation img {
    width:78px
  }

}
/* Homepage final editorial refinement */ .hero-copy {
  max-width:760px
}
.hero-copy h1 {
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.18)
}
.project-card .project-image {
  overflow:hidden;
  background:#ece8de
}
.project-card .project-image img {
  transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .5s ease
}
.project-card:hover .project-image img {
  transform:scale(1.025)
}
.project-meta {
  padding-top:16px;
  position:relative
}
.project-meta h3 {
  margin-bottom:0
}
.project-meta:after {
  content:"View project  →";
  display:block;
  margin-top:5px;
  font-size:.78rem;
  letter-spacing:.02em;
  color:rgba(21,32,52,.62);
  font-family:'DM Sans',sans-serif;
  transition:color .25s ease
}
.project-card:hover .project-meta:after {
  color:var(--gold)
}
.process-section .home-feature-image {
  box-shadow:0 22px 60px rgba(0,0,0,.13)
}
.home-accreditation {
  padding-top:4px
}
.home-contact-refined {
  padding-top:clamp(68px,8vw,118px);
  padding-bottom:clamp(72px,9vw,126px)
}
.home-contact-rule {
  width:72px;
  height:1px;
  background:var(--gold);
  margin-bottom:clamp(34px,4vw,58px)
}
.home-contact-refined h2 {
  max-width:620px;
  margin-bottom:0
}
.home-contact-refined p {
  max-width:540px
}
@media(max-width:767.98px) {
    .intro.section-pad,.about.section-pad,.process-section.section-pad {
    padding-top:78px;
    padding-bottom:78px
  }
    .projects.pb-section {
    padding-bottom:82px
  }
    .section-heading {
    margin-bottom:30px
  }
    .project-grid>[class*="col-"]+ [class*="col-"] {
    margin-top:34px
  }
    .project-meta {
    padding-top:12px
  }
    .hero-copy h1 {
    text-wrap:pretty
  }
    .home-contact-refined {
    padding-top:72px;
    padding-bottom:78px
  }
    .home-contact-rule {
    margin-bottom:30px
  }

}
@media(prefers-reduced-motion:reduce) {
  .project-card .project-image img {
    transition:none
  }
  .project-card:hover .project-image img {
    transform:none
  }

}
/* October 2026: photographic hero with headline below */ .hero-carousel .hero-shade,.hero-carousel .hero-content {
  display:none!important
}
.hero-carousel .hero-image {
  filter:none!important
}
.hero-statement {
  background:var(--paper);
  padding:clamp(54px,6vw,88px) 0 clamp(64px,7vw,104px);
  border-bottom:1px solid rgba(39,50,71,.08)
}
.hero-statement h1 {
  font-size:clamp(3rem,5vw,6rem);
  line-height:.96;
  margin:0;
  max-width:980px;
  color:var(--ink);
  text-wrap:balance
}
.hero-statement .hero-statement-link {
  margin-top:0;
  white-space:nowrap
}
@media(max-width:991.98px) {
  .hero-statement {
    padding:56px 0 68px
  }
  .hero-statement h1 {
    font-size:clamp(2.8rem,7vw,4.8rem)
  }

}
@media(max-width:767.98px) {
   .hero-carousel {
    height:64vh;
    min-height:500px
  }
   .hero-statement {
    padding:48px 0 58px
  }
   .hero-statement h1 {
    font-size:clamp(2.7rem,11vw,4rem);
    line-height:.98;
    text-wrap:pretty
  }
   .hero-statement .hero-statement-link {
    margin-top:4px
  }

}
/* October 2026 homepage polish: favourite photography, scale and breathing room */
/* Give the identity a little more space before the photography begins. */ .site-header .navbar {
  padding-top:18px!important;
  padding-bottom:22px!important
}
/* More cinematic desktop hero now that the photography stands alone. */ .hero-carousel {
  height:clamp(700px,88vh,980px)!important;
  min-height:700px!important
}
.hero-carousel .hero-image {
  object-position:center center
}
#home-hero-image-1 {
  object-position:center 52%
}
#home-hero-image-2 {
  object-position:center 54%
}
#home-hero-image-3 {
  object-position:center 52%
}
#home-hero-image-4 {
  object-position:center 48%
}
/* Tighten the transition into the first editorial section. */ .intro.section-pad {
  padding-top:clamp(78px,8vw,125px)
}
/* Selected projects: stronger images, quieter metadata. */ .projects .project-image {
  aspect-ratio:4/3;
  height:auto!important
}
.projects .project-meta h3 {
  font-size:clamp(1.45rem,1.55vw,1.8rem)
}
.projects .project-meta:after {
  display:none!important;
  content:none!important
}
/* Accreditation: legible, but still restrained. */ .home-accreditation {
  display:block;
  margin:30px 0 24px;
  padding-top:4px
}
.home-accreditation img {
  width:160px;
  height:auto;
  display:block
}
.about-accreditation img {
  width:195px;
  height:auto
}
.footer-accreditation {
  margin-top:26px
}
.footer-accreditation img {
  width:118px;
  height:auto;
  opacity:.96
}
/* Slightly leaner closing sections. */ .home-contact-refined {
  padding-top:clamp(62px,7vw,100px);
  padding-bottom:clamp(66px,7vw,104px)
}
.footer .container-fluid.py-5 {
  padding-top:2.5rem!important;
  padding-bottom:2.5rem!important
}
@media(max-width:991.98px) {
    .site-header .navbar {
    padding-top:14px!important;
    padding-bottom:16px!important
  }
    .hero-carousel {
    height:78vh!important;
    min-height:620px!important;
    max-height:820px
  }
    .about-accreditation img {
    width:175px
  }
    .footer-accreditation img {
    width:108px
  }

}
@media(max-width:767.98px) {
    .site-header .navbar {
    padding-top:11px!important;
    padding-bottom:14px!important
  }
    .hero-carousel {
    height:72vh!important;
    min-height:540px!important;
    max-height:720px
  }
    .intro.section-pad {
    padding-top:68px
  }
    .home-accreditation img {
    width:145px
  }
    .about-accreditation img {
    width:160px
  }
    .footer-accreditation img {
    width:105px
  }

}
/* October 2026 final homepage/header refinement */ :root {
  --nav-soft:#34445a;
  --nav-hover:#b88724
}
.site-header .navbar {
  padding-top:18px!important;
  padding-bottom:30px!important
}
.site-header .navbar-nav {
  gap:0!important
}
.site-header .nav-link {
  font-size:15.5px!important;
  font-weight:400!important;
  letter-spacing:.01em;
  color:var(--nav-soft)!important;
  padding:.55rem 0!important;
  margin-left:32px;
  transition:color .22s ease
}
.site-header .nav-link:hover,.site-header .nav-link:focus {
  color:var(--nav-hover)!important
}
.site-header .navbar-collapse {
  padding-right:clamp(18px,2.2vw,42px)
}
.navbar-toggler-icon {
  border-top-color:#526074!important;
  border-top-width:1.25px!important
}
.navbar-toggler-icon:before,.navbar-toggler-icon:after {
  background:#526074!important;
  height:1.25px!important
}
/* Give selected work a little more photographic presence. */ .projects .project-image {
  aspect-ratio:5/4!important
}
.projects.pb-section {
  padding-bottom:clamp(88px,9vw,138px)
}
.projects-heading-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:28px
}
.projects-heading-row .section-heading {
  margin-bottom:0
}
.projects-heading-row .projects-all-link {
  margin:0 0 7px;
  white-space:nowrap
}
/* Make the professional mark properly legible in the footer. */ .footer-accreditation img {
  width:148px!important
}
@media(max-width:1199.98px) {
   .site-header .nav-link {
    font-size:15px!important;
    margin-left:25px
  }
   .site-header .navbar-collapse {
    padding-right:0
  }

}
@media(max-width:991.98px) {
   .site-header .navbar {
    padding-top:14px!important;
    padding-bottom:22px!important
  }
   .site-header .navbar-collapse {
    padding-right:0
  }
   .site-header .nav-link {
    font-size:15.5px!important;
    margin-left:0;
    padding:.72rem 0!important
  }
   .footer-accreditation img {
    width:132px!important
  }

}
@media(max-width:767.98px) {
   .site-header .navbar {
    padding-top:11px!important;
    padding-bottom:18px!important
  }
   .projects-heading-row {
    display:block;
    margin-bottom:24px
  }
   .projects-heading-row .projects-all-link {
    display:none
  }
   .projects.pb-section {
    padding-bottom:82px
  }
   .footer-accreditation img {
    width:125px!important
  }

}

/* ================================================================
   10. QUIET BRAND DETAILS
   ----------------------------------------------------------------
   The contour mark is used sparingly as a watermark rather than as
   decoration in every section. This keeps the identity recognisable
   without making the page feel over-designed.
   ================================================================ */
.intro,
.home-contact-refined {
  position:relative;
  overflow:hidden;
}

.intro::after {
  content:"";
  position:absolute;
  right:-70px;
  bottom:34px;
  width:clamp(260px,27vw,460px);
  aspect-ratio:3 / 1;
  background:url('../brand/hendrix-waves-transparent.png') center / contain no-repeat;
  opacity:.055;
  pointer-events:none;
}

.home-contact-refined::before {
  content:"";
  position:absolute;
  left:-90px;
  bottom:-18px;
  width:clamp(280px,30vw,520px);
  aspect-ratio:3 / 1;
  background:url('../brand/hendrix-waves-transparent.png') center / contain no-repeat;
  opacity:.045;
  pointer-events:none;
}

.intro > .container-fluid,
.home-contact-refined > .container-fluid {
  position:relative;
  z-index:1;
}

/* Discreet back-to-top control. JS adds .is-visible after scrolling. */
.back-to-top {
  position:fixed;
  right:clamp(18px,2.5vw,36px);
  bottom:clamp(18px,2.5vw,34px);
  z-index:1040;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(183,154,82,.55);
  border-radius:50%;
  background:rgba(250,248,242,.9);
  color:var(--ink);
  box-shadow:0 8px 24px rgba(23,38,58,.08);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,border-color .2s ease,background .2s ease;
}

.back-to-top::before {
  content:"";
  width:9px;
  height:9px;
  border-top:1px solid currentColor;
  border-left:1px solid currentColor;
  transform:translateY(2px) rotate(45deg);
}

.back-to-top.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background:var(--paper);
  border-color:var(--gold);
  color:var(--gold);
}

@media(max-width:767.98px) {
  .intro::after,
  .home-contact-refined::before {
    opacity:.035;
  }
  .back-to-top {
    width:40px;
    height:40px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .back-to-top { transition:none; }
}


/* ================================================================
   HENDRIX SIGNATURE WAVE
   A very quiet repeat of the logo contour lines. Kept deliberately
   faint so it reads as part of the identity rather than decoration.
   ================================================================ */

.intro,
.about,
.home-contact-refined {
  position:relative;
  overflow:hidden;
}

.intro > *,
.about > *,
.home-contact-refined > * {
  position:relative;
  z-index:1;
}

.intro::after,
.home-contact-refined::after {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(360px,42vw,700px);
  aspect-ratio:1088 / 178;
  background:url("../brand/hendrix-waves-transparent.png") center / contain no-repeat;
  pointer-events:none;
  opacity:.065;
}

.intro::after {
  right:-7vw;
  bottom:18px;
}

.home-contact-refined::after {
  right:-5vw;
  bottom:10px;
  opacity:.085;
}

.about::before {
  content:"";
  position:absolute;
  z-index:0;
  left:-12vw;
  top:55px;
  width:clamp(320px,35vw,560px);
  aspect-ratio:1088 / 178;
  background:url("../brand/hendrix-waves-transparent.png") center / contain no-repeat;
  pointer-events:none;
  opacity:.04;
}

@media (max-width:767.98px) {
  .intro::after,
  .about::before {
    display:none;
  }

  .home-contact-refined::after {
    width:440px;
    right:-180px;
    bottom:18px;
    opacity:.055;
  }
}

/* ================================================================
   HOMEPAGE IMAGE POLISH
   One extra cinematic image break using Aly's favourite photography.
   The movement is a soft reveal rather than fixed-background parallax,
   so it remains smooth and reliable on phones and tablets.
   ================================================================ */

.home-panorama {
  position:relative;
  overflow:hidden;
  background:var(--navy);
}

.home-panorama-frame {
  position:relative;
  overflow:hidden;
  height:clamp(500px,67vw,860px);
}

.home-panorama-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  transform:scale(1.035);
  transition:transform 1.7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.home-panorama.in .home-panorama-image {
  transform:scale(1);
}

.home-photo-credit {
  position:absolute;
  right:clamp(18px,3vw,42px);
  bottom:18px;
  z-index:2;
  padding:5px 8px;
  background:rgba(12,20,28,.28);
  color:rgba(255,255,255,.78);
  font-size:.64rem;
  letter-spacing:.02em;
  backdrop-filter:blur(3px);
}

/* Make the Hendrix contour signature visible enough to register. */
.intro::after {
  opacity:.147!important;
}

.about::before {
  opacity:.105!important;
}

.home-contact-refined::after {
  opacity:.12!important;
}

@media (max-width:767.98px) {
  .home-panorama-frame {
    height:72vw;
    min-height:390px;
    max-height:570px;
  }

  .home-panorama-image {
    object-position:center center;
    transform:none;
    transition:none;
  }

  .home-photo-credit {
    right:14px;
    bottom:12px;
    font-size:.6rem;
  }

  .home-contact-refined::after {
    opacity:.09!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .home-panorama-image,
  .home-panorama.in .home-panorama-image {
    transform:none;
    transition:none;
  }
}

/* ================================================================
   HOME CONTACT — EDITORIAL FINAL INVITATION
   ================================================================ */
.home-contact-refined {
  position:relative;
  overflow:hidden;
  padding-top:clamp(90px,10vw,150px)!important;
  padding-bottom:clamp(100px,11vw,165px)!important;
  background:var(--paper);
}
.home-contact-refined .page-width { position:relative; z-index:2; }
.home-contact-rule {
  width:52px; height:1px; margin-bottom:clamp(42px,5vw,70px);
  background:var(--gold); opacity:.8;
}
.home-contact-refined h2 {
  max-width:650px; margin:0; font-family:var(--serif);
  font-size:clamp(3rem,5vw,5.4rem); font-weight:300; line-height:.98;
  letter-spacing:-.035em; color:var(--navy);
}
.home-contact-refined p {
  max-width:470px; margin:0 0 1.8rem;
  font-size:clamp(.96rem,1.05vw,1.08rem); line-height:1.75;
  color:rgba(25,42,73,.78);
}
.home-contact-refined .text-link { margin-top:.35rem; }
.home-contact-refined::after {
  content:""; position:absolute; right:-5vw; bottom:-8px; z-index:0;
  width:clamp(600px,62vw,1050px); aspect-ratio:1088 / 178;
  background:url("../brand/hendrix-waves-transparent.png") center / contain no-repeat;
  opacity:.182!important; pointer-events:none;
}
.home-contact-refined::before {
  content:""; position:absolute; left:-17vw; top:24%; bottom:auto; z-index:0;
  width:clamp(400px,42vw,700px); aspect-ratio:1088 / 178;
  background:url("../brand/hendrix-waves-transparent.png") center / contain no-repeat;
  opacity:.063; pointer-events:none;
}
@media(max-width:991.98px) {
  .home-contact-refined { padding-top:80px!important; padding-bottom:100px!important; }
  .home-contact-refined h2 { max-width:540px; font-size:clamp(2.8rem,9vw,4.5rem); line-height:1; }
  .home-contact-refined p { max-width:520px; }
  .home-contact-rule { margin-bottom:38px; }
}
@media(max-width:767.98px) {
  .home-contact-refined { padding-top:68px!important; padding-bottom:92px!important; }
  .home-contact-refined h2 { font-size:clamp(2.7rem,12vw,3.8rem); letter-spacing:-.025em; }
  .home-contact-refined p { margin-top:10px; font-size:.96rem; line-height:1.7; }
  .home-contact-rule { width:42px; margin-bottom:32px; }
  .home-contact-refined::before { display:none; }
  .home-contact-refined::after { width:620px; right:-290px; bottom:8px; opacity:.14!important; }
}


/* ================================================================
   NAVY SITE HEADER — logo + navigation only
   ================================================================ */
.site-header {
  background:var(--navy)!important;
  border-bottom:1px solid rgba(183,154,82,.28)!important;
  backdrop-filter:none!important;
}

.site-header .navbar {
  background:transparent!important;
}

/* Keep Aly's supplied gold logo artwork unchanged */
.site-header .brand-logo {
  filter:none!important;
}

.site-header .nav-link,
.site-header .nav-link.active {
  color:#d5bd7a!important;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color:#f0dda3!important;
}

/* Gold three-line mobile menu icon */
.site-header .navbar-toggler {
  border:0!important;
  box-shadow:none!important;
}

.site-header .navbar-toggler-icon {
  border-top-color:#d5bd7a!important;
}

.site-header .navbar-toggler-icon:before,
.site-header .navbar-toggler-icon:after {
  background:#d5bd7a!important;
}

@media(max-width:991.98px) {
  .site-header .navbar-collapse {
    background:var(--navy)!important;
  }

  .site-header .nav-link,
  .site-header .nav-link.active {
    color:#d5bd7a!important;
  }

  .site-header .nav-link:hover,
  .site-header .nav-link:focus {
    color:#f0dda3!important;
  }
}

/* ================================================================
   FINAL HEADER REFINEMENT — SLIM NAVY BAR, GENEROUS LOGO
   Keeps the header shallow while allowing the Hendrix logo to retain
   more visual presence. Placed last so it overrides earlier header rules.
   ================================================================ */

.site-header .navbar {
  padding-top:6px!important;
  padding-bottom:6px!important;
  min-height:0!important;
}

.site-header .brand {
  margin:0!important;
  padding:0!important;
}

.site-header .brand-logo {
  display:block;
  width:440px;
  max-width:100%;
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
}

@media(max-width:991.98px) {
  .site-header .navbar {
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  .site-header .brand-logo {
    width:340px;
    max-height:58px;
  }
}

@media(max-width:767.98px) {
  .site-header .navbar {
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .site-header .brand-logo {
    width:275px;
    max-width:calc(100vw - 82px);
    max-height:52px;
  }
}

@media(max-width:390px) {
  .site-header .brand-logo {
    width:260px;
    max-width:calc(100vw - 76px);
    max-height:50px;
  }
}

/* ================================================================
   FINAL HEADER LOGO SCALE
   Keep the navy navbar slim, but allow the wide Hendrix logo to
   scale by width rather than being capped by max-height.
   ================================================================ */

.site-header .navbar {
  padding-top:5px!important;
  padding-bottom:5px!important;
  min-height:0!important;
}

.site-header .brand {
  margin:0!important;
  padding:0!important;
}

.site-header .brand-logo {
  display:block!important;
  width:520px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
}

@media(max-width:991.98px) {
  .site-header .navbar {
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  .site-header .brand-logo {
    width:390px!important;
    max-height:none!important;
  }
}

@media(max-width:767.98px) {
  .site-header .navbar {
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .site-header .brand-logo {
    width:310px!important;
    max-width:calc(100vw - 82px)!important;
    max-height:none!important;
  }
}

@media(max-width:390px) {
  .site-header .brand-logo {
    width:280px!important;
    max-width:calc(100vw - 76px)!important;
    max-height:none!important;
  }
}



/* Hendrix Gardens: original vector artwork and animated centred header */
.hg-site-header{background:#17263a!important;color:#cc9900!important;position:sticky;top:0;z-index:1030;border:0!important;box-shadow:none!important}
.hg-site-header .hg-header-inner{width:min(1100px,calc(100% - 64px));margin:0 auto;padding:8px 0 11px;position:relative}
.hg-site-header .hg-logo-link{display:block;width:100%;line-height:0;text-decoration:none}
.hg-site-header .hg-animated-logo{display:block;width:100%;height:auto;overflow:visible}
.hg-site-header .hg-main-nav{display:flex;justify-content:flex-end;padding-top:7px;width:100%}
.hg-site-header .hg-main-nav .navbar-nav{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:clamp(16px,2.5vw,32px);padding:0;margin:0;list-style:none}
.hg-site-header .hg-main-nav .nav-link{color:#cc9900!important;display:inline-block;position:relative;padding:2px 0 7px!important;font-family:'DM Sans',Arial,sans-serif;font-size:clamp(12px,1.15vw,15px);font-weight:400;white-space:nowrap;text-decoration:none!important;line-height:1.35}
.hg-site-header .hg-main-nav .nav-link:hover,.hg-site-header .hg-main-nav .nav-link:focus-visible{color:#e1b643!important}
.hg-site-header .hg-hover-curve{position:absolute;left:0;bottom:0;width:100%;height:8px;pointer-events:none;overflow:visible}
.hg-site-header .hg-hover-curve path{fill:none;stroke:#cc9900;stroke-width:1.25;stroke-linecap:round}
.hg-site-header .hg-menu-toggle{display:none;background:transparent;border:1px solid #cc9900;border-radius:2px;padding:8px;cursor:pointer}
.hg-site-header .hg-menu-toggle span{display:block;width:21px;height:1px;background:#cc9900;margin:4px 0}
@media(max-width:991.98px){
 .hg-site-header .hg-header-inner{width:calc(100% - 32px);padding:8px 0 10px}
 .hg-site-header .hg-animated-logo{width:100%;height:auto}
 .hg-site-header .hg-menu-toggle{display:block;position:absolute;right:0;bottom:8px;z-index:2}
 .hg-site-header .hg-main-nav{display:none;padding:12px 0 40px}
 .hg-site-header .hg-main-nav.hg-open{display:flex;justify-content:flex-end}
 .hg-site-header .hg-main-nav .navbar-nav{flex-direction:column;align-items:flex-end;gap:9px}
 .hg-site-header .hg-main-nav .nav-link{font-size:14px}
}

/* October refinement: shorter centred header, navigation close to baseline */
@media (min-width:992px){
 .hg-site-header .hg-header-inner{padding-top:3px;padding-bottom:15px}
 .hg-site-header .hg-main-nav{padding-top:0;margin-top:-28px}
}
 .home-page .hg-site-header.hg-nav-pending .hg-main-nav{opacity:0;pointer-events:none}
}

/* ============================================================
   MOBILE HEADER — compact logo, accessible dropdown navigation
   Desktop styling and five-second vector animation unchanged.
   ============================================================ */
@media (max-width:991.98px) {
  .hg-site-header .hg-header-inner {
    width:calc(100% - 32px);
    padding:12px 0 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:relative;
  }
  .hg-site-header .hg-logo-link {
    display:block;
    flex:1 1 auto;
    min-width:0;
    width:auto;
    line-height:0;
  }
  .hg-site-header .hg-animated-logo {
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
  }
  .hg-site-header .hg-menu-toggle {
    position:static;
    flex:0 0 42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:42px;
    height:40px;
    padding:0;
    margin:0;
    z-index:4;
    border:1px solid #cc9900;
    border-radius:2px;
    background:transparent;
    cursor:pointer;
  }
  .hg-site-header .hg-menu-toggle span {
    display:block;
    width:19px;
    height:1px;
    margin:0;
    background:#cc9900;
    transition:transform .2s ease,opacity .2s ease;
  }
  .hg-site-header .hg-menu-toggle[aria-expanded="true"] span:first-child {transform:translateY(6px) rotate(45deg)}
  .hg-site-header .hg-menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0}
  .hg-site-header .hg-menu-toggle[aria-expanded="true"] span:last-child {transform:translateY(-6px) rotate(-45deg)}
  .hg-site-header .hg-main-nav,
  .hg-site-header .hg-main-nav.hg-open {
    position:absolute;
    left:-16px;
    right:-16px;
    top:100%;
    width:auto;
    margin:0;
    padding:0;
    background:#17263a;
    border-top:1px solid rgba(204,153,0,.24);
    box-shadow:0 12px 20px rgba(0,0,0,.13);
    z-index:3;
  }
  .hg-site-header .hg-main-nav {display:none}
  .hg-site-header .hg-main-nav.hg-open {display:block}
  .hg-site-header .hg-main-nav .navbar-nav {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 16px 14px;
    margin:0;
  }
  .hg-site-header .hg-main-nav .nav-item {width:100%}
  .hg-site-header .hg-main-nav .nav-link {
    display:block;
    width:fit-content;
    padding:10px 0 12px!important;
    font-size:15px;
    line-height:1.4;
  }
  .hg-site-header .hg-hover-curve {bottom:4px}
}
@media (max-width:390px) {
  .hg-site-header .hg-header-inner {width:calc(100% - 24px);gap:9px}
  .hg-site-header .hg-main-nav,.hg-site-header .hg-main-nav.hg-open {left:-12px;right:-12px}
}

/* Tablet and mobile: keep the menu collapsed through 991px.
   Animate opacity/visibility instead of toggling display. */
@media (max-width:991.98px) {
  .hg-site-header .hg-main-nav,
  .hg-site-header .hg-main-nav.hg-open {
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-5px);
    transition:opacity .42s ease, transform .42s ease, visibility 0s linear .42s;
  }
  .hg-site-header .hg-main-nav.hg-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .48s ease, transform .48s ease, visibility 0s;
  }
  .hg-site-header .hg-main-nav .navbar-nav {
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .hg-site-header .hg-main-nav .nav-link {font-size:15px;line-height:1.4}
}
@media (prefers-reduced-motion:reduce) {
  .hg-site-header .hg-main-nav {transition:none!important;transform:none!important}
}

/* Final alignment: keep Contact just inside the gold baseline end.
   Desktop only; tablet/mobile dropdown remains unchanged. */
@media (min-width:992px) {
  .hg-site-header .hg-main-nav {
    box-sizing:border-box;
    padding-right:16px;
  }
}

/* Mobile/tablet header: keep the hamburger anchored independently of the
   animated SVG's width and intrinsic viewBox dimensions. */
@media (max-width:991.98px) {
  .hg-site-header .hg-header-inner {
    position:relative;
    display:block;
    padding:12px 54px 13px 0;
    box-sizing:border-box;
    min-height:66px;
  }
  .hg-site-header .hg-logo-link {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .hg-site-header .hg-animated-logo {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
  }
  .hg-site-header .hg-menu-toggle {
    position:absolute;
    top:50%;
    right:0;
    bottom:auto;
    left:auto;
    transform:translateY(-50%);
    width:42px;
    height:40px;
    margin:0;
    flex:none;
    z-index:5;
  }
}

/* Mobile/tablet: size the SVG by its visible artwork, not its oversized
   intrinsic canvas. Keep the hamburger alongside the logo, not below it. */
@media (max-width:991.98px) {
  .hg-site-header .hg-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0 11px;
    min-height:0;
    width:calc(100% - 32px);
  }
  .hg-site-header .hg-logo-link {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:calc(100% - 54px);
  }
  .hg-site-header .hg-animated-logo {
    width:100%;
    height:clamp(48px,8vw,76px);
    max-height:76px;
    display:block;
    overflow:hidden;
  }
  .hg-site-header .hg-menu-toggle {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    transform:none;
    flex:0 0 42px;
    align-self:center;
    margin:0;
  }
}
@media (max-width:390px) {
  .hg-site-header .hg-header-inner {width:calc(100% - 24px);gap:9px}
}


/* Mobile header correction: preserve the SVG's wide viewBox aspect ratio.
   A fixed SVG height made its intrinsic width shrink to a tiny logo. */
@media (max-width:991.98px) {
 .hg-site-header .hg-header-inner {
   display:flex!important; align-items:center!important;
   justify-content:space-between!important;
   position:relative!important; width:calc(100% - 32px)!important;
   min-height:62px!important; height:auto!important;
   padding:10px 0!important; gap:12px!important;
 }
 .hg-site-header .hg-logo-link {
   display:block!important; flex:1 1 auto!important;
   width:auto!important; max-width:calc(100% - 54px)!important;
   min-width:0!important; line-height:0!important;
 }
 .hg-site-header .hg-animated-logo {
   display:block!important; width:100%!important;
   height:auto!important; max-height:none!important;
   aspect-ratio:1122.6667 / 100!important;
   overflow:visible!important;
 }
 .hg-site-header .hg-menu-toggle {
   display:flex!important; position:static!important;
   flex:0 0 42px!important; align-self:center!important;
   transform:none!important; margin:0!important;
   width:42px!important; height:40px!important;
 }
 .hg-site-header .hg-main-nav,
 .hg-site-header .hg-main-nav.hg-open {
   position:absolute!important; top:100%!important;
   left:-16px!important; right:-16px!important;
   width:auto!important; margin:0!important;
   padding:0!important; z-index:20!important;
 }
 .hg-site-header .hg-main-nav:not(.hg-open) {
   opacity:0!important; visibility:hidden!important;
   pointer-events:none!important;
 }
 .hg-site-header .hg-main-nav.hg-open {
   opacity:1!important; visibility:visible!important;
   pointer-events:auto!important;
 }
}
@media(max-width:390px){
 .hg-site-header .hg-header-inner {width:calc(100% - 24px)!important}
 .hg-site-header .hg-main-nav,.hg-site-header .hg-main-nav.hg-open {left:-12px!important;right:-12px!important}
}

/* Mobile navigation: keep the toggle bars visible and the open menu on navy. */
@media (max-width:991.98px) {
  .hg-site-header { position:relative; z-index:1050; }
  .hg-site-header .hg-header-inner { position:relative!important; }
  .hg-site-header .hg-menu-toggle {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
    padding:0!important;
    background:transparent!important;
    border:1px solid #cc9900!important;
    color:#cc9900!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .hg-site-header .hg-menu-toggle span,
  .hg-site-header .hg-menu-toggle span:nth-child(1),
  .hg-site-header .hg-menu-toggle span:nth-child(2),
  .hg-site-header .hg-menu-toggle span:nth-child(3) {
    display:block!important;
    flex:none!important;
    width:21px!important;
    min-width:21px!important;
    height:1.5px!important;
    min-height:1.5px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background-color:#cc9900!important;
    opacity:1;
  }
  .hg-site-header .hg-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0!important; }
  .hg-site-header .hg-main-nav,
  .hg-site-header .hg-main-nav.hg-open {
    background-color:#17263a!important;
    background-image:none!important;
    box-shadow:0 10px 16px rgba(0,0,0,.18)!important;
    border-top:1px solid rgba(204,153,0,.25)!important;
    box-sizing:border-box!important;
    z-index:100!important;
  }
  .hg-site-header .hg-main-nav .navbar-nav {
    background-color:#17263a!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:10px 20px 18px!important;
    gap:0!important;
  }
  .hg-site-header .hg-main-nav .nav-link {
    color:#cc9900!important;
    display:block!important;
    padding:9px 0!important;
  }
}

/* Double the Hendrix Gardens lettering only on tablet and mobile.
   The SVG lettering keeps its original position and baseline. */
@media (max-width:991.98px) {
  .hg-site-header .hg-wordmark-mobile-wrap {
    transform-box:fill-box;
    transform-origin:right bottom;
    transform:scale(2);
  }
}