
:root{
  --black:#0a0a0a;
  --black-2:#111;
  --ivory:#f3f0ea;
  --paper:#fbfaf7;
  --ink:#111;
  --muted:#79746d;
  --line-dark:rgba(255,255,255,.18);
  --line-light:rgba(17,17,17,.16);
  --accent:#a6875a;
  --max:1440px;
  --pad:clamp(24px,5vw,80px);
  --display:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--black);color:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0;font-weight:500}
h1,h2{font-family:var(--display);letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(3.5rem,7vw,8rem)}
h2{font-size:clamp(2.65rem,5vw,5.8rem)}
em{font-weight:500}
.wrap{max-width:var(--max);margin:auto;padding-left:var(--pad);padding-right:var(--pad)}
.section-dark{background:var(--black);color:var(--paper)}
.section-light{background:var(--paper);color:var(--ink)}
section{position:relative}
.eyebrow,.section-kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.section-kicker{opacity:.62;margin-bottom:2.2rem}
.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 20px;border:1px solid;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:600;transition:.25s ease}
.button:hover{transform:translateY(-1px)}
.button-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.button-outline{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.55)}
.button-small{padding:11px 15px}
.text-link{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid transparent}
.text-link:hover{border-bottom-color:currentColor}
.dark-link{color:var(--ink)}

.site-header{height:78px;background:rgba(10,10,10,.94);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.08)}
.wordmark{font-size:.82rem;font-weight:600;letter-spacing:.18em}
.main-nav{display:flex;align-items:center;gap:30px;font-size:.78rem}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;text-transform:uppercase;letter-spacing:.12em}

.hero{min-height:calc(100vh - 78px);display:flex;align-items:stretch;border-bottom:1px solid var(--line-dark)}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
.hero-copy{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(90px,11vw,160px);padding-right:7vw}
.hero-copy .eyebrow{margin-bottom:32px;color:#c6c0b8}
.hero-copy h1 em{display:inline-block}
.hero-lede{max-width:720px;font-size:clamp(1rem,1.3vw,1.2rem);margin-top:35px;color:#d4d0ca}
.hero-secondary{max-width:690px;color:#aaa39a;font-size:.95rem;margin-top:16px}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px}
.hero-architecture{position:relative;border-left:1px solid var(--line-dark);overflow:hidden}
.axis{position:absolute;background:var(--line-dark)}
.axis-v{height:100%;width:1px;left:62%}
.axis-h{height:1px;width:100%;top:57%}
.hero-note{position:absolute;right:8%;top:12%;font-size:.66rem;line-height:1.9;letter-spacing:.18em;color:#a9a39b}
.blueprint-note{position:absolute;right:9%;bottom:13%;font-size:.7rem;line-height:1.75;letter-spacing:.1em;border-left:2px solid var(--accent);padding-left:18px}

.recognition{padding:clamp(90px,10vw,150px) 0}
.split-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.split-intro h2{font-size:clamp(3rem,5vw,6rem)}
.narrow-copy{max-width:620px}
.narrow-copy p{color:#4f4b46}
.symptom-grid{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.symptom-grid article{min-height:205px;padding:28px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.symptom-grid span,.fit-grid span{font-size:.68rem;letter-spacing:.12em;color:var(--muted)}
.symptom-grid h3{font-size:1.05rem;margin:30px 0 7px}
.symptom-grid p{font-size:.88rem;color:#625e58}
.bridge{padding:clamp(90px,12vw,180px) 0 20px;max-width:900px}
.bridge h3{font-family:var(--display);font-size:clamp(2.3rem,4vw,4.5rem);margin:18px 0}
.bridge p{font-size:1.15rem;color:#4f4b46;max-width:650px}

.point-of-view{padding:clamp(90px,10vw,150px) 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.pov-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}
.pov-copy p{max-width:620px;color:#bdb7ae}
.pov-copy strong{color:#fff}
.hybrid-diagram{position:relative;min-height:640px;display:grid;place-items:center}
.diagram-ring{width:min(80vw,500px);aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:50%;position:absolute}
.node{position:absolute;width:130px;height:130px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.68rem;letter-spacing:.1em}
.node-center{width:170px;height:170px;font-weight:600}
.node-top{transform:translateY(-190px)}
.node-bottom{transform:translateY(190px)}
.node-left{transform:translateX(-190px)}
.node-right{transform:translateX(190px)}
.diagram-caption{position:absolute;bottom:0;left:0;right:0;border-top:1px solid var(--line-dark);padding-top:20px;text-align:center}
.diagram-caption span{display:block;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#979087}
.diagram-caption strong{display:block;margin-top:8px}
.diagram-caption p{font-size:.85rem;color:#9f988f;margin-top:8px}
.principle{padding-top:90px;text-align:center}
.principle p{font-family:var(--display);font-size:clamp(2rem,3.5vw,4rem)}
.principle strong{display:block;margin-top:10px;font-size:1rem;letter-spacing:.04em}

.services{padding:clamp(90px,10vw,150px) 0}
.services-intro{align-items:end}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:75px;border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.service-grid article{padding:30px 34px 38px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);min-height:390px;display:flex;flex-direction:column}
.service-number{font-size:.68rem;color:var(--muted);margin-bottom:40px}
.service-grid h3{letter-spacing:.14em;font-size:.9rem}
.service-grid h4{font-family:var(--display);font-size:1.6rem;line-height:1.15;margin:22px 0}
.service-grid p{color:#625e58;font-size:.92rem}
.outcome{margin-top:auto;border-top:1px solid var(--line-light);padding-top:20px;font-size:.73rem;text-transform:uppercase;letter-spacing:.08em}
.services-footer{display:flex;justify-content:space-between;gap:20px;margin-top:35px}

.fit{padding:clamp(90px,10vw,150px) 0}
.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-dark);margin-top:70px}
.fit-grid article{padding:28px;min-height:200px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.fit-grid article:nth-child(3n){border-right:0}
.fit-grid article:nth-child(n+4){border-bottom:0}
.fit-grid h3{font-family:var(--display);font-size:1.45rem;line-height:1.15;margin:25px 0 8px}
.fit-grid p{color:#aaa39a;font-size:.88rem}
.fit-close{padding:100px 0 70px;display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}
.fit-close h3{font-family:var(--display);font-size:clamp(2.2rem,4vw,4.3rem);line-height:1.06}
.fit-close p{color:#aaa39a}
.operating-principle{margin:0;border-left:2px solid var(--accent);padding:28px 0 28px 32px;font-family:var(--display);font-size:clamp(1.6rem,2.8vw,3rem);line-height:1.18;max-width:1100px}
.operating-principle strong{display:block;margin-top:8px}

.credibility{padding:clamp(90px,10vw,150px) 0}
.cred-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:6vw;align-items:center}
.portrait-placeholder{aspect-ratio:4/5;background:linear-gradient(135deg,#1a1a1a,#57534e);position:relative;overflow:hidden}
.portrait-placeholder:after{content:"";position:absolute;inset:10%;border:1px solid rgba(255,255,255,.2)}
.portrait-label{position:absolute;left:18px;bottom:16px;color:#eee;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.cred-copy h2{font-size:clamp(2.8rem,4.5vw,5.3rem)}
.cred-copy>p{max-width:750px;color:#59554f;margin-top:22px}
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:50px;border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.proof-grid div{padding:22px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.proof-grid strong{display:block;font-family:var(--display);font-size:1.5rem}
.proof-grid span{display:block;margin-top:7px;font-size:.75rem;color:#66615b}
.signature{font-family:var(--display);font-size:clamp(2.2rem,4vw,4.4rem);margin-top:110px;border-top:1px solid var(--line-light);padding-top:45px}

.closing{padding:clamp(100px,12vw,180px) 0}
.closing-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end}
.closing h2{font-size:clamp(3rem,5.3vw,6.4rem)}
.closing p{max-width:680px;color:#aaa39a;margin-top:28px}
.closing strong{display:block;margin-top:18px}
.closing-action{display:flex;justify-content:flex-end}

.site-footer{padding:70px 0 25px;border-top:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:60px}
.footer-grid p{color:#8f8981;max-width:420px;font-size:.85rem;margin-top:15px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;font-size:.82rem}
.footer-cta{border-left:1px solid var(--accent);padding-left:25px;color:#a49d94;font-size:.86rem}
.footer-cta strong{color:#fff}
.footer-bottom{margin-top:60px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;color:#777067;font-size:.72rem}

@media (max-width: 980px){
  .main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0a0a0a;padding:25px var(--pad);flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line-dark)}
  .main-nav.open{display:flex}
  .menu-toggle{display:block}
  .hero-grid,.split-intro,.pov-grid,.cred-grid,.closing-grid,.fit-close{grid-template-columns:1fr}
  .hero-copy{padding-right:0}
  .hero-architecture{min-height:340px;border-left:0;border-top:1px solid var(--line-dark)}
  .symptom-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid,.fit-grid{grid-template-columns:1fr}
  .fit-grid article,.fit-grid article:nth-child(3n),.fit-grid article:nth-child(n+4){border-right:0;border-bottom:1px solid var(--line-dark)}
  .fit-grid article:last-child{border-bottom:0}
  .hybrid-diagram{min-height:620px}
  .closing-action{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  :root{--pad:22px}
  .site-header{height:68px}
  .main-nav{top:68px}
  .hero{min-height:auto}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .hero-architecture{min-height:280px}
  .hero-note{right:5%;top:12%}
  .blueprint-note{left:6%;right:auto;bottom:12%}
  .symptom-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .services-footer{flex-direction:column}
  .hybrid-diagram{min-height:500px;transform:scale(.82);transform-origin:center}
  .node-top{transform:translateY(-155px)}
  .node-bottom{transform:translateY(155px)}
  .node-left{transform:translateX(-155px)}
  .node-right{transform:translateX(155px)}
  .proof-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px}
}

/* One-page refinement: preserve original Black Elegance design */
.hero{min-height: min(760px,calc(100svh - 78px))}
.hero-copy{padding-top:clamp(70px,8vw,115px);padding-bottom:clamp(75px,8vw,115px)}
.hero-copy h1{font-size:clamp(3.1rem,6.3vw,7.3rem)}
.point-of-view,.services,.credibility,.closing{padding-top:clamp(70px,8vw,115px);padding-bottom:clamp(70px,8vw,115px)}
.service-grid article{min-height:310px}
.pov-copy p{margin-top:18px}
@media(max-width:760px){.hero{min-height:auto}.hero-copy{padding-top:70px;padding-bottom:70px}.hero-copy h1{font-size:clamp(2.8rem,11vw,5rem)}.service-grid article{min-height:auto}.hero-architecture{min-height:220px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Final one-page portrait and buyer refinements */
.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr)}
.hero-portrait{position:relative;overflow:hidden;min-height:620px;background:#151313;border-left:1px solid var(--line-dark)}
.hero-portrait img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 25%;filter:saturate(.88)}
.hero-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.18),transparent 35%)}
.buyer-line{max-width:690px;color:#e5ddd1;font-size:.93rem;margin-top:20px;padding-left:16px;border-left:2px solid var(--accent)}
.portrait-photo{aspect-ratio:4/5;background:#151313;overflow:hidden}
.portrait-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}
section[id]{scroll-margin-top:90px}
:focus-visible{outline:2px solid #c6a87e;outline-offset:4px}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-portrait{min-height:480px;border-left:0;border-top:1px solid var(--line-dark)}.hero-portrait img{object-position:center 22%}}
@media(max-width:640px){.hero-portrait{min-height:390px}.hero-copy{padding-bottom:55px}.hero-copy h1{font-size:clamp(2.7rem,10vw,4.3rem)}.hybrid-diagram{transform:scale(.72);margin-inline:-30px}.portrait-photo{max-width:440px}}

/* Focused refinement: image balance, diagram containment, editorial rhythm */
.main-nav > a:not(.button){text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600}
.hero-grid{grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr)}
.hero-portrait{grid-column:1;grid-row:1;border-left:0;border-right:1px solid var(--line-dark)}
.hero-copy{grid-column:2;grid-row:1;padding-left:clamp(32px,5vw,80px);padding-right:clamp(24px,4vw,60px)}
.hero-portrait img{object-position:center 26%;filter:none}
.hero-portrait:after{background:linear-gradient(270deg,rgba(10,10,10,.13),transparent 32%)}
.pov-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(45px,6vw,95px);align-items:center}
.hybrid-diagram{width:100%;max-width:410px;min-height:0;height:430px;margin-inline:auto;position:relative}
.diagram-ring{width:280px;height:280px;top:26px;left:50%;transform:translateX(-50%)}
.node{width:72px;height:72px;font-size:.53rem;letter-spacing:.045em;top:166px;left:50%;transform:translate(-50%,-50%)}
.node-center{width:105px;height:105px}
.node-top{transform:translate(-50%,-50%) translateY(-112px)}
.node-bottom{transform:translate(-50%,-50%) translateY(112px)}
.node-left{transform:translate(-50%,-50%) translateX(-112px)}
.node-right{transform:translate(-50%,-50%) translateX(112px)}
.diagram-caption{bottom:0;padding-top:15px;position:absolute;background:var(--black)}
.diagram-caption strong{font-size:.82rem}
.diagram-caption p{font-size:.76rem}
.principle{padding-top:65px}
.principle p em{font-style:italic}
@media(max-width:980px){
 .hero-grid{grid-template-columns:1fr}
 .hero-copy{grid-column:1;grid-row:1;padding-left:0;padding-right:0}
 .hero-portrait{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--line-dark)}
 .pov-grid{grid-template-columns:1fr}
 .hybrid-diagram{transform:none;margin-inline:auto;height:430px}
}
@media(max-width:640px){
 .hybrid-diagram{transform:none;margin-inline:auto;max-width:100%;height:410px}
 .diagram-ring{width:250px;height:250px;top:28px}
 .node{top:153px;width:68px;height:68px;font-size:.49rem}
 .node-center{width:96px;height:96px}
 .node-top{transform:translate(-50%,-50%) translateY(-101px)}
 .node-bottom{transform:translate(-50%,-50%) translateY(101px)}
 .node-left{transform:translate(-50%,-50%) translateX(-101px)}
 .node-right{transform:translate(-50%,-50%) translateX(101px)}
 .diagram-caption{bottom:0}
}
