:root{
  --ink:#11120f;
  --muted:#656861;
  --paper:#f3f2ed;
  --paper-2:#e9e8e1;
  --line:rgba(17,18,15,.15);
  --white:#f8f7f2;
  --accent:#b39b68;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 15%,rgba(179,155,104,.08),transparent 25%),linear-gradient(90deg,transparent 49.95%,rgba(17,18,15,.035) 50%,transparent 50.05%);z-index:-2}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:20;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:absolute;top:0;left:0;right:0;z-index:10;background:rgba(243,242,237,.72);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:13px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:650}
.brand small{display:block;font-size:7px;letter-spacing:.36em;margin-top:4px;color:var(--muted)}
.brand-mark{width:28px;height:28px;display:flex;gap:2px;align-items:flex-end}
.brand-mark i{display:block;width:7px;border:1px solid var(--ink);transform:skewY(-24deg);height:15px}
.brand-mark i:nth-child(2){height:21px}.brand-mark i:nth-child(3){height:27px}
.nav{display:flex;gap:38px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav a,.header-cta{transition:opacity .2s}.nav a:hover,.header-cta:hover{opacity:.55}
.header-cta{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.header-cta span{margin-left:9px;font-size:15px}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span{display:block;width:24px;height:1px;background:var(--ink);margin:6px}

.hero{min-height:900px;padding:180px 5vw 50px;max-width:var(--max);margin:auto;position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:720px}
.eyebrow,.section-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:38px}
.eyebrow span{width:28px;height:1px;background:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(64px,8vw,128px);font-weight:400;letter-spacing:-.065em;line-height:.9;margin-bottom:36px}
h1 em,h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
.hero-lead{font-size:16px;line-height:1.7;max-width:560px;color:#4f524b}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:44px}
.button{display:inline-flex;gap:30px;align-items:center;padding:17px 20px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}
.button-dark{background:var(--ink);color:var(--white)}
.button-dark span{font-size:15px}.text-link{font-size:10px;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:7px}
.text-link span{margin-left:8px}
.hero-visual{height:600px;display:grid;place-items:center;position:relative}
.orb{width:min(35vw,520px);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 34% 30%,#d9d6ca 0,#aaa89e 35%,#686961 68%,#30322f 100%);box-shadow:inset -35px -25px 80px rgba(0,0,0,.34),inset 12px 15px 35px rgba(255,255,255,.3),0 35px 80px rgba(0,0,0,.13);overflow:hidden}
.orb:before{content:"";position:absolute;inset:-12%;border-radius:50%;background:repeating-linear-gradient(12deg,transparent 0 21px,rgba(255,255,255,.11) 22px 23px);transform:rotate(-22deg)}
.orb-grid{position:absolute;inset:-20%;background:repeating-linear-gradient(90deg,transparent 0 45px,rgba(255,255,255,.12) 46px 47px),repeating-linear-gradient(0deg,transparent 0 45px,rgba(255,255,255,.09) 46px 47px);border-radius:50%;transform:rotate(18deg)}
.orb-ring{position:absolute;border:1px solid rgba(255,255,255,.35);border-radius:50%;inset:-5%;transform:rotate(-28deg) scaleY(.3)}
.ring-2{inset:13%;transform:rotate(20deg) scaleY(.72);border-color:rgba(255,255,255,.2)}
.orb-shine{position:absolute;width:35%;height:35%;top:11%;left:17%;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(22px)}
.orb-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#ded5bc;box-shadow:0 0 0 6px rgba(222,213,188,.12)}
.dot-1{top:33%;right:26%}.dot-2{top:58%;left:25%}.dot-3{bottom:22%;right:38%}
.visual-caption{position:absolute;right:3%;bottom:7%;display:flex;gap:13px;font-size:8px;letter-spacing:.18em;color:var(--muted);line-height:1.5}.visual-caption span:first-child{font-size:18px;color:var(--ink)}
.hero-meta{position:absolute;bottom:50px;left:5vw;right:5vw;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.statement,.focus,.about,.contact{max-width:var(--max);margin:auto;padding-left:5vw;padding-right:5vw}
.statement{padding-top:150px;padding-bottom:160px;border-top:1px solid var(--line)}
.statement-content{display:grid;grid-template-columns:1.15fr .85fr;gap:10%;padding-top:55px}
.statement h2,.focus h2,.about h2,.contact h2{font-size:clamp(45px,6vw,86px);line-height:.95;letter-spacing:-.06em;font-weight:400}
.statement h2 span{font-family:Georgia,"Times New Roman",serif}
.statement-text{padding-top:10px;max-width:410px}
.statement-text p,.about-copy>p{color:var(--muted);line-height:1.8;font-size:15px}
.arrow-link{display:inline-flex;gap:20px;margin-top:35px;border-bottom:1px solid var(--ink);padding-bottom:9px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}

.focus{background:var(--ink);color:var(--white);max-width:none;padding-top:140px;padding-bottom:150px}
.focus>.section-label{color:#aaa99f}
.focus-head{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;padding-top:55px;margin-bottom:85px;max-width:1340px;margin-left:auto;margin-right:auto}
.focus-head h2{margin:0}.focus-head p{width:300px;color:#a8aaa3;font-size:13px;line-height:1.8;margin:0}
.focus-grid{max-width:1340px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.17)}
.focus-card{position:relative;padding:40px 35px 15px 0;border-right:1px solid rgba(255,255,255,.17);min-height:300px}
.focus-card:not(:first-child){padding-left:35px}
.focus-card:last-child{border-right:0}
.card-no{font-size:9px;letter-spacing:.14em;color:#8e9089}
.card-icon{font-size:31px;font-weight:200;margin:75px 0 45px;color:#d0c4a8}
.focus-card h3{font-family:Georgia,serif;font-size:27px;font-weight:400;margin-bottom:14px}
.focus-card p{color:#8e9089;font-size:12px;line-height:1.8;max-width:300px}

.about{padding-top:150px;padding-bottom:150px;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.about-visual{height:650px;background:#deddd5;position:relative;overflow:hidden;display:grid;place-items:center}
.about-visual:before{content:"";position:absolute;width:85%;height:85%;border:1px solid rgba(17,18,15,.14);border-radius:50%}
.about-visual:after{content:"";position:absolute;width:1px;height:100%;background:rgba(17,18,15,.1)}
.vertical-word{position:absolute;left:22px;top:24px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.3em}
.about-circle{width:240px;height:240px;border:1px solid rgba(17,18,15,.3);border-radius:50%;display:grid;place-items:center;font-size:52px;letter-spacing:-.08em;z-index:1;background:rgba(243,242,237,.25);backdrop-filter:blur(2px)}
.about-circle span{font-family:Georgia,serif}
.about-coordinate{position:absolute;bottom:24px;right:24px;font-size:8px;letter-spacing:.12em;color:var(--muted)}
.about-copy h2{margin:35px 0 42px}
.about-copy>p{max-width:520px;margin-bottom:22px}
.about-note{display:flex;gap:25px;margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.contact{background:#d9d8d0;max-width:none;padding-top:85px;padding-bottom:45px}
.contact-top,.contact-bottom{max-width:1340px;margin:auto;display:flex;justify-content:space-between}
.contact-index{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.contact-main{max-width:1340px;margin:100px auto 150px}
.contact-main h2{font-size:clamp(62px,9vw,130px);margin-bottom:75px}
.contact-mail{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:18px;font-size:clamp(20px,3vw,36px);letter-spacing:-.03em;max-width:700px}
.contact-mail b{font-size:24px;font-weight:400}
.contact-bottom{padding-top:17px;border-top:1px solid rgba(17,18,15,.22);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.footer{padding:22px 5vw;display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.footer a{color:var(--ink)}

@media(max-width:900px){
 .nav,.header-cta{display:none}.menu-toggle{display:block}
 .site-header{height:72px}
 .hero{min-height:auto;padding-top:145px;padding-bottom:100px;display:block}
 .hero-visual{height:480px;margin-top:30px}.orb{width:min(75vw,430px)}
 .hero-meta{position:static;display:grid;grid-template-columns:1fr;gap:10px;margin-top:25px}
 .statement-content,.about{grid-template-columns:1fr;gap:40px}
 .statement{padding-top:100px;padding-bottom:110px}
 .focus{padding-top:100px;padding-bottom:100px}
 .focus-head{display:block;margin-bottom:60px}.focus-head p{margin-top:30px}
 .focus-grid{grid-template-columns:1fr}
 .focus-card,.focus-card:not(:first-child){border-right:0;border-bottom:1px solid rgba(255,255,255,.17);padding:35px 0;min-height:auto}
 .focus-card:last-child{border-bottom:0}
 .card-icon{margin:45px 0 25px}
 .about{padding-top:100px;padding-bottom:100px}.about-visual{height:430px}.about-circle{width:180px;height:180px;font-size:40px}
 .contact-main{margin:75px auto 100px}
 .footer{flex-wrap:wrap}
}
@media(max-width:560px){
 h1{font-size:58px}.hero-lead{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:24px}
 .hero-visual{height:390px}.visual-caption{right:0}
 .statement h2,.focus h2,.about h2{font-size:48px}
 .contact-main h2{font-size:58px}
 .contact-mail{font-size:18px}.contact-bottom{display:block}.contact-bottom span{display:block;margin-top:8px}
 .about-note{display:block}.about-note span{display:block;margin-bottom:10px}
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}
.nav.nav-open{display:flex;position:absolute;top:72px;left:0;right:0;background:rgba(243,242,237,.97);padding:25px 5vw;flex-direction:column;gap:20px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.nav.nav-open{display:flex}}

/* Photography layer — sourced from Unsplash.
   Credits are displayed in the footer. */
.photo-hero{
  height:600px;
  position:relative;
  overflow:hidden;
  align-items:stretch;
  justify-items:stretch;
  display:block;
}
.hero-photo{
  position:absolute;
  inset:0;
  background-image:url("https://images.unsplash.com/photo-1768081004885-645f789c75f7?auto=format&fit=crop&fm=jpg&q=82&w=2200");
  background-size:cover;
  background-position:center;
  filter:grayscale(100%) contrast(.92);
  transform:scale(1.015);
}
.photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(17,18,15,.02),rgba(17,18,15,.24));
  mix-blend-mode:multiply;
}
.photo-hero .visual-caption{
  z-index:2;
  right:24px;
  bottom:22px;
  color:rgba(248,247,242,.82);
}
.photo-hero .visual-caption span:first-child{color:var(--white)}

.image-break{
  max-width:var(--max);
  margin:auto;
  padding:0 5vw 150px;
  position:relative;
}
.image-break-photo{
  height:430px;
  background-image:
    linear-gradient(90deg,rgba(17,18,15,.16),rgba(17,18,15,.02)),
    url("https://images.unsplash.com/photo-1548705822-a1ef502c6e49?auto=format&fit=crop&fm=jpg&q=82&w=2200");
  background-size:cover;
  background-position:center 58%;
  filter:grayscale(100%);
}
.image-break-caption{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.about-visual{
  background:#11120f;
}
.about-photo{
  position:absolute;
  inset:0;
  background-image:url("https://images.unsplash.com/photo-1768081004885-645f789c75f7?auto=format&fit=crop&fm=jpg&q=78&w=1800");
  background-size:cover;
  background-position:center;
  filter:grayscale(100%);
  opacity:.76;
}
.about-photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(17,18,15,.48),rgba(17,18,15,.08) 55%,rgba(179,155,104,.12));
}
.about-visual:before{border-color:rgba(248,247,242,.2)}
.about-visual:after{background:rgba(248,247,242,.12)}
.about-circle{
  border-color:rgba(248,247,242,.52);
  color:var(--white);
  background:rgba(17,18,15,.12);
}
.about-coordinate{color:rgba(248,247,242,.72)}
.vertical-word{color:rgba(248,247,242,.8)}

.photo-credit{
  font-size:7px;
  letter-spacing:.07em;
  text-transform:none;
  opacity:.65;
  max-width:430px;
  text-align:center;
}

@media(max-width:900px){
  .photo-hero{height:480px}
  .image-break{padding-bottom:100px}
  .image-break-photo{height:330px}
  .photo-credit{width:100%;max-width:none;order:4}
}
@media(max-width:560px){
  .photo-hero{height:390px}
  .image-break-photo{height:250px}
  .image-break-caption{display:block;line-height:1.8}
}

/* --- Motion system / micro-interactions --- */
html{scroll-padding-top:90px}
body{overflow-x:hidden}
.page-loader{position:fixed;inset:0;background:var(--ink);z-index:9999;display:grid;place-items:center;pointer-events:none;animation:loaderOut .9s cubic-bezier(.77,0,.18,1) 1.05s forwards}
.page-loader span{width:38px;height:38px;border:1px solid rgba(248,247,242,.35);border-top-color:var(--accent);border-radius:50%;animation:loaderSpin .8s linear infinite}
@keyframes loaderSpin{to{transform:rotate(360deg)}}@keyframes loaderOut{to{opacity:0;visibility:hidden}}
.scroll-progress{position:fixed;top:0;left:0;width:0;height:2px;background:var(--accent);z-index:1000;transform-origin:left}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:1001;border-radius:50%;opacity:0;mix-blend-mode:difference}
.cursor-dot{width:5px;height:5px;background:#fff}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.7);margin:-15px}
.reveal-section{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.hero-copy>*{animation:heroUp 1s cubic-bezier(.2,.7,.2,1) both}
.hero-copy .eyebrow{animation-delay:.15s}.hero-copy h1{animation-delay:.25s}.hero-copy .hero-lead{animation-delay:.35s}.hero-copy .hero-actions{animation-delay:.45s}
@keyframes heroUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.hero-photo,.about-photo,.image-break-photo{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.photo-hero:hover .hero-photo{transform:scale(1.045)}
.image-break-photo:hover{transform:scale(1.025)}
.focus-card{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.focus-card:hover{transform:translateY(-7px);background:rgba(255,255,255,.025)}
.focus-card h3,.arrow-link,.text-link,.contact-mail{transition:letter-spacing .35s ease}
.focus-card:hover h3{letter-spacing:.01em}
a:hover .contact-mail{letter-spacing:.01em}
.magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none}}
@media(prefers-reduced-motion:reduce){
 .page-loader{display:none}.hero-copy>*{animation:none}.hero-photo,.about-photo,.image-break-photo{transition:none}.reveal{opacity:1!important;transform:none!important}
}
