:root{
  --bg:#FFFFFF;
  --bg-tint:#F7F9FA;
  --ink:#141A1F;
  --soft:#5A6672;
  --muted:#98A3AE;
  --line:#E8ECEF;
  --accent:#0F7C6C;        /* clear, fresh teal-green */
  --accent-soft:#E6F4F1;
  --shadow:0 18px 44px -26px rgba(20,26,31,0.28);
  --shadow-lift:0 26px 60px -34px rgba(20,26,31,0.34);
  --wrap:1120px;
  --measure:620px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:18px; line-height:1.68;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.005em;
}
a{color:inherit;}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:40px; padding-right:40px;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; margin:0; line-height:1.14; letter-spacing:-0.02em;}
em{font-style:italic;}
.eyebrow{font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}

/* nav */
.nav{max-width:var(--wrap); margin:0 auto; padding:28px 40px; display:flex; align-items:center; justify-content:space-between;}
.nav .name{font-family:'Fraunces',serif; font-weight:600; font-size:19px;}
.nav a.mail{font-weight:500; font-size:15px; text-decoration:none; color:var(--soft); transition:color .15s;}
.nav a.mail:hover{color:var(--accent);}

/* hero */
.hero{padding-top:60px; padding-bottom:96px;}
.hero-grid{display:grid; grid-template-columns:1fr 340px; gap:80px; align-items:center;}
.hero .eyebrow{margin-bottom:20px;}
.hero h1{font-size:clamp(42px,5.6vw,62px); font-weight:500; margin-bottom:24px;}
.hero h1 .quiet{display:block; color:var(--soft); font-weight:400; font-size:0.72em; line-height:1.24; margin-top:12px;}
.hero p.lede{font-size:19.5px; color:var(--soft); max-width:36ch; margin:0 0 34px;}
.hero-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.btn{font-family:'Inter',sans-serif; font-weight:600; font-size:16px; text-decoration:none; cursor:pointer; display:inline-block; background:var(--accent); color:#fff; padding:14px 30px; border-radius:100px; transition:background .16s, box-shadow .16s;}
.btn:hover{background:#0B6355; box-shadow:0 10px 24px -12px rgba(15,124,108,0.6);}
.avail{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--soft);}
.avail .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}

.portrait{background:#fff; padding:0; border-radius:14px; box-shadow:var(--shadow-lift); overflow:hidden; justify-self:end; width:100%;}
.portrait .ph{width:100%; aspect-ratio:4/5; background:linear-gradient(160deg,#F2F6F7,#E4EBEE); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:13.5px; padding:26px; line-height:1.55;}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; display:block;}

/* rhythm */
section{padding-top:92px; padding-bottom:92px;}
.divider{max-width:var(--wrap); margin:0 auto; height:1px; background:var(--line);}
.tinted{background:var(--bg-tint);}
.lead-line{font-family:'Fraunces',serif; font-size:clamp(25px,3.2vw,33px); font-weight:400; line-height:1.36; color:var(--ink); max-width:24ch;}

/* story */
.story-block{display:grid; grid-template-columns:1fr 320px; gap:70px; align-items:start;}
.story-main .eyebrow{margin-bottom:22px;}
.story-main p{font-size:19px; color:var(--soft); margin:0 0 18px; max-width:54ch;}
.story-main p:last-child{margin-bottom:0;}
.story-main p em{color:var(--ink);}
.prose p:last-child,.story-main p:last-child,.personal p:last-child{margin-bottom:0;}
.story-side{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 28px; box-shadow:var(--shadow);}
.story-side .side-h{font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
.story-side p{font-size:15.5px; color:var(--soft); line-height:1.62; margin:0;}

/* facts */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
.fact{display:flex; flex-direction:column; gap:6px;}
.fact .y{font-family:'Fraunces',serif; font-size:32px; color:var(--accent); line-height:1;}
.fact .l{font-size:15px; color:var(--soft);}

/* work */
.project{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.project + .project{margin-top:104px;}
.project.flip .ptext{order:2;}
.ptext .eyebrow{margin-bottom:14px;}
.ptext h2{font-size:clamp(31px,3.6vw,40px); margin-bottom:6px;}
.ptext .role{font-family:'Fraunces',serif; font-style:italic; font-size:17px; color:var(--muted); margin-bottom:20px;}
.ptext p{font-size:17px; color:var(--soft); margin:0 0 18px; max-width:46ch;}
.plainlink{font-weight:600; font-size:15.5px; color:var(--accent); text-decoration:none; border-bottom:1.5px solid var(--accent-soft); padding-bottom:2px; transition:border-color .15s;}
.plainlink:hover{border-color:var(--accent);}
.pmetrics{display:flex; gap:34px; flex-wrap:wrap; margin:22px 0 20px;}
.pmetrics .m .n{font-family:'Fraunces',serif; font-size:24px; color:var(--ink); line-height:1;}
.pmetrics .m .k{font-size:13px; color:var(--muted); margin-top:4px;}

.shots{display:flex; gap:20px; justify-content:center; align-items:flex-start;}
.device{width:225px; max-width:100%; min-width:0;}
.device .screen{width:100%; aspect-ratio:201/437; border-radius:30px; overflow:hidden; background:linear-gradient(165deg,#F2F6F7,#E2EAEE); display:flex; align-items:center; justify-content:center;}
.device:has(img) .screen{aspect-ratio:auto; background:none; border-radius:0; overflow:visible;}
.device .screen img{width:100%; height:auto; display:block;}
.device .screen .ph{font-size:12px; color:var(--muted); text-align:center; padding:16px; line-height:1.55;}
.shots.two .device{width:205px;}

/* prose */
.prose{max-width:var(--measure);}
.prose .eyebrow{margin-bottom:20px;}
.prose h2{font-size:clamp(29px,3.6vw,38px); margin-bottom:24px; max-width:18ch;}
.prose p{font-size:18px; color:var(--soft); margin:0 0 18px;}
.prose p:last-child{margin-bottom:0;}

/* stories */
.stories{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:40px;}
.story-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px 32px; box-shadow:var(--shadow);}
.story-card h3{font-family:'Fraunces',serif; font-weight:500; font-size:21px; color:var(--ink); margin-bottom:10px;}
.story-card p{font-size:16.5px; color:var(--soft); margin:0;}

/* testimonial */
.quote-wrap{max-width:800px;}
blockquote{margin:0; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(25px,3.4vw,34px); line-height:1.38; color:var(--ink);}
.quote-by{font-size:15px; color:var(--muted); margin-top:26px;}

/* personal */
.personal{max-width:var(--measure);}
.personal .eyebrow{margin-bottom:20px;}
.personal p{font-size:18px; color:var(--soft); margin:0;}
.personal p .ink,.personal p strong{color:var(--ink); font-weight:500;}

/* contact */
.contact{text-align:center; padding-top:104px; padding-bottom:116px;}
.contact h2{font-size:clamp(34px,4.6vw,50px); font-weight:500; margin:0 auto 20px; max-width:16ch;}
.contact p{font-size:19px; color:var(--soft); max-width:48ch; margin:0 auto 36px;}

footer{max-width:var(--wrap); margin:0 auto; padding:32px 40px 60px; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .portrait{justify-self:start; max-width:330px;}
  .story-block{grid-template-columns:1fr; gap:32px;}
  .facts{grid-template-columns:1fr 1fr; gap:28px;}
  .project,.project.flip{grid-template-columns:1fr; gap:38px;}
  .project.flip .ptext{order:0;}
  .stories{grid-template-columns:1fr; gap:20px;}
  section{padding-top:64px; padding-bottom:64px;}
  .wrap{padding-left:26px; padding-right:26px;}
  .nav{padding:22px 26px;}
  .contact{padding-top:72px; padding-bottom:84px;}
  .shots{gap:14px;}
  .device,.shots.two .device{width:auto; flex:1 1 0; min-width:0; max-width:225px;}
  .shots{justify-content:center;}
}