/* --- type scale: nine steps built around the sizes she already used ------------------- */
:root{
  --t-micro:.66rem;   /* tracked uppercase labels — was .52/.54/.55/.58 */
  --t-label:.74rem;   /* small labels            — was .6/.66/.68      */
  --t-xs:.84rem;      /* captions, meta          — was .7/.72/.78      */
  --t-sm:.92rem;
  --t-base:1rem;
  --t-md:1.22rem;     /* was 1.2 / 1.25 */
  --t-lg:1.45rem;
  --t-xl:1.9rem;
  --d-1:clamp(2.5rem,4.3vw,4.6rem);   /* was three near-identical clamps */
  --d-2:clamp(2.8rem,4.9vw,5.2rem);   /* was three more                  */
  --d-3:clamp(3.1rem,6.1vw,6.5rem);
  --d-4:clamp(3.5rem,7vw,7.5rem);
  --d-5:clamp(3.7rem,8.1vw,8.8rem);   /* the hero, kept distinct         */
  --t-fluid-md:clamp(1.25rem,1.7vw,1.7rem);

  /* --- tracking and leading: four each, from twenty-nine and twenty-four -------------- */
  --ls-wide:.18em; --ls-mid:.1em; --ls-tight:-.01em; --ls-display:-.03em;
  --lh-tight:1.06; --lh-snug:1.28; --lh-base:1.62; --lh-loose:1.9;
}
:root {
  --ink: #2c2c2a;
  --forest: #5e6462;
  --moss: #767264;
  --sage: #7c826e;
  --clay: #8b7f6e;
  --sand: #d9d2c2;
  --paper: #e4ded4;
  --white: #f6f7f4;
  --concrete: #a7a39a;
  --greige: #b8b1a4;
  --cocoa: #4a4239;
  --iron: #5e6462;
  --line: rgba(44, 44, 42, .18);
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-weight: 300; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--forest); color: var(--white); }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: white; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .13; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.section-pad { padding: 9rem clamp(1.4rem, 5vw, 6rem); }
.section-tag { display: flex; gap: 1rem; align-items: center; text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-label); font-weight: 500; margin-bottom: 5rem; }
.section-tag span { border: 1px solid currentColor; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; letter-spacing: 0; }
.eyebrow { margin: 0 0 1.2rem; font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 500; }
.eyebrow.light { color: rgba(255,255,255,.78); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { color: var(--white); font-size: var(--d-5); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin-bottom: 2rem; }
h2 { font-size: var(--d-3); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin-bottom: 2rem; }
h1 i, h2 i { font-weight: 400; color: var(--sand); }
p { line-height: var(--lh-base); }
.large-copy { font-size: var(--t-fluid-md); line-height: var(--lh-base); }
.button { min-height: 3.7rem; padding: 0 1.5rem; display: inline-flex; gap: 2rem; align-items: center; justify-content: space-between; border: 1px solid transparent; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-label); font-weight: 600; transition: .35s ease; cursor: pointer; }
.button span { font-size: var(--t-base); }
.button-light { background: var(--white); color: var(--ink); }
.button-light:hover { background: var(--sand); transform: translateY(-2px); }
.button-dark { background: var(--forest); color: white; }
.button-dark:hover { background: var(--clay); transform: translateY(-2px); }
.text-link { display: inline-flex; gap: 3rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid currentColor; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-label); font-weight: 600; }
.text-link span { transition: transform .3s ease; font-size: var(--t-base); }
.text-link:hover span { transform: translateX(.35rem); }
.light-link { color: white; border-color: rgba(255,255,255,.45); }

.site-header { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 6.2rem; padding: 0 clamp(1.4rem, 4vw, 4.8rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: white; transition: .45s ease; }
.site-header.scrolled { height: 4.9rem; background: rgba(241,237,229,.93); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; flex-direction: column; width: max-content; line-height: var(--lh-tight); }
.brand img { display: block; width: 10.5rem; height: auto; }
.brand span { font-family: var(--serif); font-size: var(--t-md); letter-spacing: var(--ls-mid); }
.brand small { margin-top: .35rem; text-transform: uppercase; font-size: var(--t-micro); letter-spacing: var(--ls-wide); }
.main-nav { display: flex; align-items: center; gap: 1.35rem; }
.main-nav a { position: relative; font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-mid); font-weight: 500; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -.45rem; width: 0; height: 1px; background: currentColor; transition: width .3s ease; }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.header-cta { justify-self: end; border-bottom: 1px solid currentColor; padding: .5rem 0; text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-label); font-weight: 600; }
.menu-toggle { display: none; border: 0; color: inherit; background: transparent; }

.hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; padding: 10rem clamp(1.4rem, 7.5vw, 9rem) 7rem; overflow: hidden; background: var(--cocoa); }
.hero-image { position: absolute; inset: -4%; background-image: url('assets/hero-desert.webp'); background-size: cover; background-position: center 55%; filter: saturate(.72) contrast(.98); transform: scale(1.02); animation: heroIn 2s cubic-bezier(.2,.7,.2,1) both; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,44,42,.82) 0%, rgba(94,100,98,.49) 52%, rgba(74,66,57,.2) 100%), linear-gradient(0deg, rgba(44,44,42,.58), transparent 55%); }
.hero-content { position: relative; z-index: 2; max-width: 74rem; }
.hero-lead { color: rgba(255,255,255,.84); max-width: 48rem; font-size: var(--t-fluid-md); line-height: var(--lh-base); }
.hero-actions { margin-top: 2.5rem; display: flex; align-items: center; gap: 2rem; }
.hero-stamp { position: absolute; z-index: 2; right: clamp(4rem, 8vw, 9rem); bottom: clamp(5.5rem, 10vw, 8.5rem); width: clamp(3.6rem, 5.5vw, 5.2rem); opacity: .62; transition: transform .35s ease, opacity .35s ease; }
.hero-stamp:hover { opacity: .86; transform: scale(1.04); }
.hero-stamp img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.hero-side { position: absolute; right: 2rem; top: 50%; z-index: 2; color: rgba(255,255,255,.6); writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-micro); }
.hero-index { position: absolute; z-index: 2; right: 4.5rem; bottom: 2.8rem; display: flex; align-items: center; gap: .7rem; color: white; font-size: var(--t-micro); }
.hero-index i { width: 4rem; height: 1px; background: rgba(255,255,255,.5); }
@keyframes heroIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1.02); } }

.intro { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 9vw, 10rem); }
.intro-copy { max-width: 44rem; padding-top: .5rem; }
.intro-copy > p:not(.large-copy) { color: var(--iron); max-width: 38rem; }
.intro-copy .text-link { margin-top: 2rem; }
.clients-block { margin-top: 7rem; padding: clamp(3rem, 6vw, 6rem); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 7vw, 8rem); color: white; background: var(--moss); }
.clients-intro h3 { margin: 0; font-size: var(--d-2); line-height: var(--lh-tight); }
.clients-intro h3 i { color: var(--sand); font-weight: 400; }
.clients-content { min-width: 0; }
.clients-lead { margin-bottom: 3.5rem; max-width: 50rem; color: rgba(255,255,255,.85); font-family: var(--serif); font-size: var(--t-fluid-md); line-height: var(--lh-base); }
.client-types { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.client-types article { padding: 2rem 1.6rem 2.4rem; border-right: 1px solid rgba(255,255,255,.24); }
.client-types article:first-child { padding-left: 0; }
.client-types article:last-child { padding-right: 0; border-right: 0; }
.client-types span { color: var(--sand); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-mid); }
.client-types h4 { min-height: 4.6rem; margin: 1.1rem 0 1rem; font-family: var(--serif); font-size: var(--t-fluid-md); font-weight: 400; line-height: var(--lh-snug); }
.client-types h4 i { color: var(--sand); font-style: normal; }
.client-types p { margin: 0; color: rgba(255,255,255,.72); font-size: var(--t-base); line-height: var(--lh-base); }
.clients-actions { margin-top: 2.5rem; display: flex; align-items: center; gap: 2rem; }
.people-block { margin-top: 7rem; padding: clamp(2.5rem, 5vw, 5rem); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 7vw, 8rem); background: var(--white); }
.people-heading h3 { margin: 0; font-size: var(--d-1); line-height: var(--lh-tight); }
.founder-portrait { margin: 2.7rem 0 0; }
.founder-portrait img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 24%; filter: saturate(.78) contrast(.97); }
.founder-portrait figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.founder-portrait strong { font-family: var(--serif); font-size: var(--t-md); font-weight: 400; }
.founder-portrait span { color: var(--moss); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.person-card { padding: 2.25rem 2.4rem 2.25rem 0; border-right: 1px solid var(--line); }
.person-card + .person-card { padding-left: 2.4rem; border-right: 0; }
.person-card > span { color: var(--moss); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.person-card h4, .collaborator-list h4 { margin: 1rem 0 .45rem; font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.person-card p, .collaborator-list p { margin: 0; color: var(--iron); font-size: var(--t-base); line-height: var(--lh-base); }
.legacy-founder small { display: block; margin-top: 1.1rem; max-width: 25rem; color: var(--clay); font-family: var(--serif); font-size: var(--t-sm); line-height: var(--lh-base); }
.founder-bio { margin-top: 3rem; padding: 2.5rem; border-left: 2px solid var(--moss); background: rgba(184,177,164,.16); }
.founder-bio > p:not(.eyebrow) { margin-bottom: 1rem; color: var(--iron); font-size: var(--t-sm); line-height: var(--lh-base); }
.founder-bio > p:nth-child(2) { color: var(--ink); font-family: var(--serif); font-size: var(--t-md); line-height: var(--lh-base); }
.founder-bio > p:last-of-type { margin-bottom: 0; }
.founder-link { margin-top: 1.6rem; }
.collaborators { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.collaborator-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.collaborator-list article { padding: 0 2.4rem; border-right: 1px solid var(--line); display: grid; grid-template-columns: 1.25rem 1fr; gap: .8rem; }
.collaborator-list article:first-child { padding-left: 0; }
.collaborator-list article:last-child { padding-right: 0; border: 0; }
.collaborator-list b { color: var(--moss); font-size: var(--t-xs); font-weight: 500; }
.collaborator-list h4 { font-size: var(--t-md); }
.collaborator-role { display: block; margin-bottom: 1rem; color: var(--moss); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-mid); line-height: var(--lh-base); text-transform: uppercase; }
.legacy-strip { margin-top: 8rem; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.legacy-strip div { padding: 1rem 2rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.legacy-strip div:first-child { padding-left: 0; }
.legacy-strip div:last-child { border: 0; }
.legacy-strip strong { font-family: var(--serif); font-size: var(--t-xl); font-weight: 400; }
.legacy-strip span { color: var(--iron); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-mid); }

.wel { position: relative; overflow: hidden; color: var(--white); background: var(--moss); }
.wel .section-tag { color: rgba(255,255,255,.72); }
.wel-head { width: 46%; position: relative; z-index: 2; }
.wel-head p:last-child { max-width: 31rem; color: rgba(255,255,255,.67); }
.wel-art { position: absolute; width: 57vw; height: 57vw; right: -11vw; top: -10vw; display: grid; place-items: center; color: rgba(255,255,255,.08); }
.wel-art span { font-family: var(--serif); font-size: 18vw; }
.wel-stamp { position: absolute; z-index: 2; right: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 3vw, 3rem); width: clamp(3.5rem, 4.5vw, 4.5rem); height: auto; opacity: .32; filter: brightness(0) invert(1); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.orbit-one { inset: 0; }
.orbit-two { inset: 15%; }
.wel-explorer { position: relative; z-index: 2; margin-top: 6rem; display: grid; grid-template-columns: .7fr 1.3fr; border-top: 1px solid rgba(255,255,255,.18); }
.wel-tabs { display: flex; flex-direction: column; }
.wel-tab { padding: 1.5rem 1rem; display: grid; grid-template-columns: 3rem 1fr; text-align: left; align-items: center; background: transparent; color: rgba(255,255,255,.46); border: 0; border-bottom: 1px solid rgba(255,255,255,.13); cursor: pointer; transition: .3s ease; }
.wel-tab b { font-size: var(--t-label); font-weight: 400; }
.wel-tab span { font-family: var(--serif); font-size: var(--t-lg); }
.wel-tab.active, .wel-tab:hover { color: white; padding-left: 1.8rem; background: rgba(255,255,255,.04); }
.wel-panel { padding: 3rem 4rem; border-left: 1px solid rgba(255,255,255,.18); min-height: 23rem; display: flex; flex-direction: column; justify-content: center; }
.wel-panel h3 { font-size: var(--d-1); max-width: 42rem; margin-bottom: 1.3rem; }
.wel-panel > p:not(.eyebrow) { color: rgba(255,255,255,.65); max-width: 40rem; }
.wel-points { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.wel-points span { border: 1px solid rgba(255,255,255,.2); border-radius: 5rem; padding: .7rem 1rem; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-micro); }
.wel-foot { margin: 5rem 0 0; color: rgba(255,255,255,.5); text-align: center; text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-label); }
.wel-foot i { color: var(--clay); padding: 0 1.2rem; }

.services { background: var(--white); }
.services-head { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: end; }
.services-head > p { max-width: 35rem; color: var(--iron); margin-bottom: 2.8rem; }
.service-explorer { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; border-top: 1px solid var(--line); }
.service-list { display: flex; flex-direction: column; }
.service-row { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; padding: 1.2rem 1rem; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; text-align: left; transition: .3s ease; }
.service-row b { font-size: var(--t-micro); font-weight: 500; color: var(--moss); }
.service-row span { font-family: var(--serif); font-size: var(--t-md); }
.service-row i { font-style: normal; font-size: var(--t-md); transition: transform .3s ease; }
.service-row.active, .service-row:hover { color: white; background: var(--forest); padding-left: 1.6rem; }
.service-row.active b { color: var(--sage); }
.service-row.active i { transform: rotate(45deg); }
.service-detail { min-height: 41rem; padding: 4rem 5rem; position: sticky; top: 5rem; align-self: start; background: var(--greige); }
.service-no { position: absolute; right: 2rem; top: 1rem; font-family: var(--serif); font-size: var(--t-xl); line-height: var(--lh-tight); color: rgba(24,49,39,.08); }
.service-detail h3 { font-size: var(--d-2); max-width: 34rem; }
.service-detail > p:not(.eyebrow) { max-width: 35rem; }
.service-detail ul { list-style: none; margin: 2rem 0 3rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }
.service-detail li { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-xs); }

.design { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 9rem); background: #dbd1c5; }
.design-image { min-height: 55rem; position: relative; background: linear-gradient(0deg, rgba(44,44,42,.36), transparent 42%), url('assets/design-natural.webp') center/cover; }
.image-note { position: absolute; bottom: 2rem; left: 2rem; color: white; display: flex; flex-direction: column; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.image-note span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.image-note strong { font-family: var(--serif); font-size: var(--t-xl); font-weight: 400; }
.design-content { padding-top: 1rem; align-self: center; }
.expression-list { border-top: 1px solid var(--line); }
.expression { width: 100%; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; padding: 1.4rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.expression b { font-size: var(--t-micro); font-weight: 400; }
.expression span { font-family: var(--serif); font-size: var(--t-lg); }
.expression i { font-style: normal; opacity: .3; transition: .3s ease; }
.expression.active i { transform: rotate(45deg); opacity: 1; }
.expression.active span { font-style: italic; }
.expression-copy { margin-top: 2rem; max-width: 33rem; }

.sectors { background: var(--paper); }
.sectors-head { max-width: 60rem; }
.sector-wheel { margin-top: 4rem; border: 1px solid var(--line); display: grid; grid-template-columns: .9fr 1.1fr; min-height: 32rem; }
.sector-center { padding: 5rem; background: var(--forest); color: white; display: flex; flex-direction: column; justify-content: center; }
.sector-center small { text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-micro); color: var(--sage); }
.sector-center strong { margin: 1rem 0 1.5rem; font-family: var(--serif); font-weight: 400; font-size: var(--d-1); }
.sector-center p { color: rgba(255,255,255,.66); max-width: 30rem; }
.sector-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.sector-buttons button { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 2rem; text-align: left; font-family: var(--serif); font-size: var(--t-md); cursor: pointer; transition: .3s ease; }
.sector-buttons button:hover, .sector-buttons button.active { background: rgba(118,114,100,.22); padding-left: 2.6rem; }

.product { position: relative; display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; background: var(--moss); overflow: hidden; }
.product-object { align-self: center; justify-self: center; width: min(31vw, 28rem); height: min(42vw, 39rem); border-radius: 48% 48% 8% 8%; background: linear-gradient(145deg,var(--sage),var(--forest)); box-shadow: inset 8px 0 40px rgba(255,255,255,.12), 1.5rem 2rem 5rem rgba(44,44,42,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.9); transform: rotate(-3deg); }
.product-object::before { content: ""; position: absolute; width: min(12vw, 9rem); height: 4rem; margin-top: -43rem; border-radius: 50% 50% 0 0; background: var(--forest); }
.product-object span { font-family: var(--serif); font-size: var(--t-xl); }
.product-object i { font-style: normal; text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-micro); }
.product-copy { position: relative; z-index: 2; }
.page-stamp { position: absolute; z-index: 3; right: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 3vw, 3rem); width: clamp(3.5rem, 4.5vw, 4.5rem); height: auto; opacity: .3; }
.product-stamp { filter: brightness(0) invert(1); }
.product-copy h2 i { color: var(--paper); }
.product-options { display: grid; grid-template-columns: repeat(3, 1fr); margin: 3rem 0; border-top: 1px solid rgba(24,49,39,.25); }
.product-options article { padding: 1.5rem 1.2rem 1rem 0; }
.product-options span { font-size: var(--t-micro); }
.product-options h3 { font-size: var(--t-lg); margin: 1rem 0 .7rem; }
.product-options p { font-size: var(--t-xs); line-height: var(--lh-base); }

.portfolio { background: var(--white); }
.portfolio-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 5rem; align-items: end; }
.portfolio-head > p { color: var(--iron); margin-bottom: 3rem; }
.safariwell-niche { margin: 3rem 0 4.5rem; min-height: 27rem; padding: clamp(2.5rem, 5vw, 5rem); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 9rem); align-items: end; color: white; background: linear-gradient(90deg, rgba(44,44,42,.88), rgba(118,114,100,.5)), url('assets/safariwell-spa-header.webp') center 68% / cover no-repeat; overflow: hidden; }
.safariwell-niche .eyebrow { color: rgba(255,255,255,.68); }
.safariwell-title h3 { margin: 0; font-size: var(--d-4); line-height: var(--lh-tight); font-weight: 400; }
.safariwell-kicker { margin: 1.4rem 0 0; max-width: 24rem; font-size: var(--t-fluid-md); line-height: var(--lh-snug); }
.safariwell-copy { max-width: 34rem; }
.safariwell-copy > p { margin: 0 0 2rem; font-size: var(--t-base); line-height: var(--lh-base); color: rgba(255,255,255,.84); }
.filter-bar { margin: 1.5rem 0 3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); display: flex; gap: 1.6rem; flex-wrap: wrap; }
.filter-bar button { border: 0; background: transparent; padding: .4rem 0; color: var(--iron); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--t-label); cursor: pointer; }
.filter-bar button.active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.5rem 1.5rem; }
.project { transition: opacity .4s ease, transform .4s ease; }
.project.hidden { display: none; }
.project-img { height: 34rem; background-color: var(--moss); background-size: cover; background-position: center; position: relative; overflow: hidden; filter: saturate(.62) sepia(.06); }
.project-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,36,28,.28), transparent 40%); transition: background .4s ease; }
.project:hover .project-img::after { background: rgba(25,45,35,.08); }
.project-img span { position: absolute; left: 1.4rem; top: 1.4rem; z-index: 2; color: white; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.project-feature .project-img { height: 45rem; }
.project-wide { grid-column: span 2; }
.project-wide .project-img { height: 38rem; }
.project-wilderness { background-image: url('assets/wilderness-mombo-sanctuary.webp'); background-position: center 48%; }
.project-elewana { background-image: url('assets/elewana-wellness-ngorongoro.webp'); background-position: center 22%; }
.project-abode { background-image: url('assets/abode-africa-wellness-real-estate.webp'); background-position: center; }
.project-cameroon { background-image: linear-gradient(rgba(94,100,98,.06), rgba(118,114,100,.12)), url('assets/spa-wellness-cameroon-salon.webp'); background-size: cover; background-position: center; }
.project-pezula { background-image: url('assets/immersion-water.webp'); }
.project-karkloof { background-image: url('assets/therapist-touch.webp'); }
.project-wellstead { background-image: url('assets/wellstead-heritage-apothecary-authentic.webp'); background-position: center; }
.project-rain { background-image: url('assets/rain-africa-ritual.webp'); background-position: center 58%; }
.project-rain span { top: auto; bottom: 1.4rem; }
.project-molo { background-image: url('assets/product-ritual.webp'); }
.project-woodlands { background-image: url('assets/treatment-steam.webp'); }
.project-views { background-image: url('assets/views-spa-coastal.webp'); background-position: 64% center; }
.project-warehouse { background-image: url('assets/wellness-warehouse-storefront.webp'); background-position: center; }
.project-lume { background-image: url('assets/lume-atelier-exterior.webp'); background-position: 25% center; }
.lume-study { margin-top: 7rem; padding-top: 4.5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.lume-study-copy { max-width: 22rem; }
.lume-study-copy h3 { margin: 0; font-size: var(--d-1); line-height: var(--lh-tight); }
.lume-study-copy > p:last-child { margin-top: 1.8rem; color: var(--iron); font-size: var(--t-xs); line-height: var(--lh-base); }
.lume-study-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lume-study-grid figure { margin: 0; min-height: 10rem; overflow: hidden; }
.lume-study-grid figure:first-child { grid-row: span 3; }
.lume-study-grid figure:first-child img { object-position: 25% center; }
.lume-study-grid img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) sepia(.04); transition: filter .45s ease, transform .45s ease; }
.lume-study-grid figure:hover img { filter: saturate(.95) sepia(.01); transform: scale(1.02); }
.project-meta { padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
.project-meta small { text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-micro); color: var(--iron); }
.project-meta h3 { margin: .4rem 0 0; font-size: var(--t-xl); }
.project-meta button { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: var(--t-base); transition: .3s ease; }
.project-meta button:hover { background: var(--forest); color: white; transform: rotate(45deg); }
.design-glimpse { margin-top: 8rem; padding-top: 5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2.5rem, 7vw, 7rem); }
.glimpse-heading { max-width: 22rem; }
.glimpse-heading h3 { margin: 0; font-size: var(--d-1); line-height: var(--lh-tight); }
.glimpse-heading > p:last-child { margin-top: 1.8rem; color: var(--iron); font-size: var(--t-xs); line-height: var(--lh-base); }
.glimpse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
.glimpse-card { margin: 0; }
.glimpse-card-feature { grid-column: span 2; }
.glimpse-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.62) sepia(.06); transition: filter .45s ease, transform .45s ease; }
.glimpse-card-feature img { aspect-ratio: 16 / 8.5; }
.hospitality-study-board { position: relative; aspect-ratio: 1400 / 798; overflow: hidden; }
.glimpse-card-hospitality .hospitality-study-base { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.glimpse-card-hospitality .hospitality-study-replacement { position: absolute; top: 6.25%; left: .58%; width: 48%; height: 41.35%; aspect-ratio: auto; object-fit: cover; object-position: center; transform: none; }
.glimpse-card-hospitality:hover .hospitality-study-base,
.glimpse-card-hospitality:hover .hospitality-study-replacement { transform: none; }
.glimpse-card-apothecary img { object-position: right center; }
.ecosystem-board { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; background: var(--paper); }
.glimpse-card-ecosystem .ecosystem-plan { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.ecosystem-reference { position: absolute; width: 24%; padding: .38rem; background: rgba(247,244,235,.96); box-shadow: 0 .8rem 2rem rgba(44,44,42,.18); }
.ecosystem-reference::before { content: ""; position: absolute; z-index: 2; top: -.48rem; left: 27%; width: 46%; height: 1.05rem; background: rgba(224,210,171,.82); box-shadow: 0 1px 1px rgba(44,44,42,.1); transform: rotate(-2deg); }
.glimpse-card-ecosystem .ecosystem-reference img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; filter: saturate(.72) sepia(.07); transform: none; }
.ecosystem-reference-spring { top: 5%; right: 17%; transform: rotate(-3deg); }
.ecosystem-reference-botanical { right: 10%; bottom: 5%; transform: rotate(2.5deg); }
.ecosystem-reference-botanical::before { transform: rotate(3deg); }
.glimpse-card:hover img { filter: saturate(.9) sepia(.02); transform: scale(1.015); }
.glimpse-card-ecosystem:hover .ecosystem-reference img { transform: none; }
.glimpse-card figcaption { display: flex; flex-direction: column; gap: .35rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.glimpse-card figcaption span { color: var(--moss); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.glimpse-card figcaption strong { font-family: var(--serif); font-size: var(--t-md); font-weight: 400; }

.shop { background: var(--white); padding-top: 0; }
.shop-card { position: relative; min-height: 42rem; padding: clamp(3rem, 8vw, 8rem); display: flex; align-items: center; color: white; background: linear-gradient(90deg, rgba(44,44,42,.94), rgba(118,114,100,.58)), url('assets/product-ritual.webp') center/cover; }
.shop-card > div:last-child { max-width: 50rem; }
.shop-card p:not(.eyebrow) { color: rgba(255,255,255,.7); max-width: 38rem; }
.shop-card .button { margin-top: 1.5rem; }
.shop-stamp { position: absolute; right: 6%; top: 12%; width: clamp(5rem, 7vw, 6.5rem); display: flex; flex-direction: column; align-items: center; gap: .42rem; text-align: center; }
.shop-stamp img { display: block; width: 100%; filter: brightness(0) invert(1); opacity: .68; }
.shop-stamp span { color: rgba(255,255,255,.6); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); }

.contact { position: relative; overflow: hidden; background: var(--paper); }
.contact-stamp { filter: grayscale(1); opacity: .28; }
.contact-mark { position: absolute; right: -2rem; top: 1rem; font-family: var(--serif); font-size: 26vw; color: rgba(24,49,39,.035); }
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr .9fr; gap: clamp(4rem, 10vw, 12rem); }
.contact-intro > p:not(.eyebrow) { max-width: 38rem; color: var(--iron); }
.linkedin { margin-top: 3rem; max-width: 24rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 1rem 0; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-label); }
.contact-form { align-self: start; padding: 3rem; background: var(--white); box-shadow: 0 1.5rem 5rem rgba(44,44,42,.08); }
.contact-form label { display: block; margin-bottom: 1.6rem; }
.contact-form label span { display: block; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-micro); font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; padding: .9rem 0; outline: none; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--forest); }
.contact-form textarea { resize: vertical; }
.form-note { font-size: var(--t-label); color: var(--iron); margin: 1rem 0 0; line-height: var(--lh-base); }
.form-note.success { color: var(--forest); font-weight: 500; }

.site-footer { min-height: 14rem; padding: 4rem clamp(1.4rem,5vw,6rem); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: center; background: var(--white); color: var(--ink); border-top: 1px solid var(--line); }
.footer-brand { color: var(--ink); }
.footer-brand img { filter: none; mix-blend-mode: multiply; }
.site-footer > p { text-align: center; color: var(--iron); font-family: var(--serif); }
.site-footer > div { justify-self: end; display: flex; gap: 1.5rem; text-transform: uppercase; letter-spacing: var(--ls-mid); font-size: var(--t-micro); }
.site-footer > small { grid-column: 1 / -1; color: rgba(44,44,42,.48); text-align: center; font-size: var(--t-micro); letter-spacing: var(--ls-mid); text-transform: uppercase; }

.project-dialog { width: min(44rem, calc(100% - 2rem)); border: 0; padding: clamp(2.2rem, 6vw, 5rem); background: var(--paper); color: var(--ink); box-shadow: 0 2rem 8rem rgba(0,0,0,.32); }
.project-dialog::backdrop { background: rgba(13,29,21,.72); backdrop-filter: blur(8px); }
.project-dialog h2 { font-size: var(--d-2); }
.dialog-close { position: absolute; right: 1.2rem; top: 1rem; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: var(--t-lg); cursor: pointer; }
.dialog-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 3rem; }
.dialog-tags span { padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 3rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-mid); }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .menu-toggle { display: grid; grid-template-columns: 1.5rem auto; gap: .28rem .6rem; align-items: center; cursor: pointer; }
  .menu-toggle span { display: block; grid-column: 1; height: 1px; width: 1.5rem; background: currentColor; transition: .3s ease; }
  .menu-toggle em { grid-column: 2; grid-row: 1 / span 3; font-style: normal; text-transform: uppercase; font-size: var(--t-micro); letter-spacing: var(--ls-wide); }
  .main-nav { position: fixed; inset: 0; z-index: -1; padding: 8rem 2rem 3rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem; background: var(--forest); color: white; transform: translateY(-110%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .main-nav.open { transform: none; }
  .main-nav a { font-family: var(--serif); font-size: var(--d-1); text-transform: none; letter-spacing: 0; }
  .site-header.menu-open { color: white; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-.38rem) rotate(-45deg); }
  .wel-head { width: 68%; }
  .service-detail { padding: 3rem; }
  .product { grid-template-columns: .6fr 1.4fr; }
}

@media (max-width: 780px) {
  .section-pad { padding: 6rem 1.35rem; }
  .section-tag { margin-bottom: 3rem; }
  .hero { padding: 9rem 1.35rem 4rem; align-items: center; }
  .hero-image { background-position: 58% center; }
  .hero-side, .hero-index { display: none; }
  .hero-stamp { right: 1.35rem; bottom: 2.5rem; width: 4.25rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .intro-grid, .services-head, .design, .portfolio-head, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .clients-block { margin-top: 4rem; padding: 3rem 1.3rem; grid-template-columns: 1fr; gap: 2.5rem; }
  .client-types { grid-template-columns: 1fr; }
  .client-types article, .client-types article:first-child, .client-types article:last-child { padding: 1.8rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.24); }
  .client-types article:last-child { border-bottom: 0; }
  .client-types h4 { min-height: 0; }
  .clients-actions { align-items: flex-start; flex-direction: column; }
  .people-block { margin-top: 4rem; padding: 2.2rem 1.3rem; grid-template-columns: 1fr; gap: 3rem; }
  .founder-portrait { max-width: 25rem; }
  .founder-bio { padding: 2rem 1.3rem; }
  .founder-grid, .collaborator-list { grid-template-columns: 1fr; }
  .person-card, .person-card + .person-card, .collaborator-list article, .collaborator-list article:first-child, .collaborator-list article:last-child { padding: 1.4rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .collaborator-list article:last-child { border-bottom: 0; }
  .legacy-strip { margin-top: 4rem; grid-template-columns: 1fr 1fr; }
  .legacy-strip div { border-bottom: 1px solid var(--line); }
  .legacy-strip div:nth-child(2) { border-right: 0; }
  .wel-head { width: 100%; }
  .wel-art { width: 100vw; height: 100vw; opacity: .6; top: 0; }
  .wel-stamp { right: 1.15rem; bottom: 1.15rem; width: 3.5rem; }
  .wel-explorer { grid-template-columns: 1fr; }
  .wel-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .wel-tab { grid-template-columns: 2rem 1fr; }
  .wel-panel { border-left: 0; padding: 3rem 1rem; min-height: 27rem; }
  .wel-foot { line-height: var(--lh-loose); }
  .service-explorer { grid-template-columns: 1fr; }
  .service-detail { min-height: auto; position: relative; top: 0; padding: 3rem 1.5rem; }
  .service-detail ul { grid-template-columns: 1fr; }
  .design-image { min-height: 33rem; }
  .design-content { padding-top: 3rem; }
  .sector-wheel { grid-template-columns: 1fr; }
  .sector-center { min-height: 24rem; padding: 3rem 1.5rem; }
  .sector-buttons { grid-template-columns: 1fr; }
  .sector-buttons button { padding: 1.3rem; }
  .product { grid-template-columns: 1fr; }
  .product-object { width: 64vw; height: 85vw; order: 2; margin-top: 2rem; }
  .product-object::before { margin-top: -92vw; width: 25vw; }
  .product-options { grid-template-columns: 1fr; }
  .product-options article { border-bottom: 1px solid var(--line); }
  .portfolio-grid { grid-template-columns: 1fr; }
  .safariwell-niche { min-height: 34rem; padding: 2.5rem 1.5rem; grid-template-columns: 1fr; gap: 2rem; align-content: end; background-position: 62% center; }
  .project-wide { grid-column: auto; }
  .project-img, .project-feature .project-img, .project-wide .project-img { height: 29rem; }
  .lume-study { margin-top: 5rem; padding-top: 3.5rem; grid-template-columns: 1fr; gap: 3rem; }
  .lume-study-copy { max-width: 30rem; }
  .lume-study-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lume-study-grid figure, .lume-study-grid figure:first-child { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .design-glimpse { margin-top: 5rem; padding-top: 3.5rem; grid-template-columns: 1fr; gap: 3rem; }
  .glimpse-heading { max-width: 30rem; }
  .glimpse-grid { gap: 2rem 1rem; }
  .glimpse-card-feature { grid-column: auto; }
  .glimpse-card-feature img { aspect-ratio: 4 / 3; }
  .ecosystem-board { aspect-ratio: 4 / 3; }
  .ecosystem-reference { width: 30%; padding: .25rem; }
  .ecosystem-reference-spring { top: 4%; right: 22%; }
  .ecosystem-reference-botanical { right: 8%; bottom: 4%; }
  .shop { padding-top: 0; }
  .shop-card { min-height: 40rem; padding: 3rem 1.5rem; align-items: flex-end; }
  .shop-stamp { width: 4.8rem; right: 1.35rem; top: 8%; }
  .contact-form { padding: 2rem 1.2rem; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer > p { text-align: left; }
  .site-footer > div { justify-self: start; }
  .site-footer > small { grid-column: auto; text-align: left; }
}

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


/* --- contrast, measured against WCAG AA on the live page ----------------------------- */
/* .product is a moss panel and inherited --ink from body: 2.91:1 across 14 elements.
   A mid-tone cannot carry both text colours, so it takes the cream it was always closer to. */
.product{color:var(--white)}
.product .product-copy h2,.product .product-copy p,.product .product-copy li{color:inherit}
.product-options{border-color:rgba(246,247,244,.28)}
/* moss, a hair darker so cream on it clears 4.5:1 instead of missing by 0.02 across 42 elements.
   This has to sit AFTER her own :root or hers wins on source order — it did, on the first run. */
:root{--moss:#6f6b5d}
/* sage on forest measured 1.52:1, and sand only reached 4.01 — paper clears it */
.sector-center small,.sector-center .sector-index{color:var(--paper)}
.sector-list button{color:var(--paper)}
/* --- the one that matters: seven headlines whose second half does not render -----------
   Her headings are two-tone — the emphasis clause set in <i> in a lighter colour. On the moss
   sections that is beautiful and perfectly readable. On the pale sections the same --sand lands on
   --paper, --white or #dbd1c5 and measures 1.13, 1.40 and 1.00 to one. At 1:1 the text is not
   faint, it is ABSENT: "Design that listens before it speaks." renders as "Design that listens".
   Also invisible: "Where place becomes experience.", "One method. WEL Curated.", "One partner.
   Every layer.", "From place, into meaning and momentum.", "...lived well.", "...become here?"
   This is in her original, verified against the published site — not introduced here.
   The device is kept, because it is a good one. Only the light tone changes, and only where the
   ground is pale: #7f7563 clears 3:1 (large text) on all three pale grounds while staying clearly
   lighter than the ink it sits beside. On moss, --sand stays exactly as she had it. */
h2 > i{color:#7f7563}
.wel h2 > i,.product h2 > i{color:var(--sand)}

/* small numerals: sand and paper on moss measured 3.54 and 3.99 */
.client-types article span,.product-options article span{color:var(--white)}
/* The phase list needed care, and a blanket rule here broke it once: the INACTIVE rows are moss on
   white and were already fine (4.96:1 once moss darkened) — only the active row, which flips to a
   forest ground, had its numeral left at --sage: 1.52:1. So target that alone. */
.service-row.active b,.service-row:hover b{color:var(--white)}