:root{
    --ink:#0f2e22;        /* dark forest green — headings, wordmark */
    --ink-soft:#33493f;   /* body copy on light bg */
    --accent:#00a86b;     /* bright green — links, numerals, accents */
    --accent-deep:#00814f;
    --bg:#ffffff;
    --panel:#f4f6f4;      /* faint green-grey panel fill */
    --line:#dfe6e1;       /* hairline rules */
    --muted:#7c8b83;
    --dark:#0f2e22;       /* full-bleed dark green sections */
    --dark-ink:#eaf2ee;   /* text on dark */
    --dark-muted:#9fb5aa;
    --dark-line:rgba(234,242,238,0.18);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--ink-soft);
       line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif; color:var(--ink); font-weight:500; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
  @media (max-width:720px){ .wrap{padding:0 22px;} }

  /* ---------- nav ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
         border-bottom:1px solid var(--line);}
  .navrow{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
  .wordmark{font-family:'Inter',sans-serif; font-weight:400; font-size:20px; letter-spacing:0.5em;
            text-transform:lowercase; color:var(--ink);}
  nav.links{display:flex; gap:36px; align-items:center;}
  nav.links a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:6px 0;}
  nav.links a:hover{color:var(--ink);}
  nav.links a.has-menu::after{content:'▾'; font-size:10px; margin-left:5px; color:var(--muted);}
  .navcta{display:flex; align-items:center; gap:20px;}
  .btn{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; padding:12px 22px;
       border-radius:999px; white-space:nowrap;}
  .btn-solid{background:var(--ink); color:#fff;}
  .btn-solid:hover{background:var(--accent-deep);}
  .btn-outline{border:1px solid var(--line); color:var(--ink);}
  .btn-outline:hover{border-color:var(--ink);}
  .linkarrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:0.06em;
             text-transform:uppercase; color:var(--accent); border-left:2px solid var(--accent); padding-left:12px;}
  .linkarrow svg{transition:transform .18s ease;}
  .linkarrow:hover svg{transform:translateX(4px);}

  /* mega dropdown */
  .navitem{position:relative;}
  .megapanel{position:absolute; top:calc(100% + 22px); left:50%; transform:translateX(-50%);
             background:var(--dark); color:var(--dark-ink); width:560px; padding:32px 36px; border-radius:14px;
             box-shadow:0 24px 48px rgba(15,46,34,0.28); opacity:0; visibility:hidden; translate:0 8px;
             transition:opacity .18s ease, translate .18s ease; z-index:40;}
  .navitem:hover .megapanel{opacity:1; visibility:visible; translate:0 0;}
  .megapanel .eyebrow{color:var(--dark-muted); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:18px;}
  .megapanel .row{display:flex; justify-content:space-between; align-items:center; padding:14px 0;
                  border-top:1px solid var(--dark-line);}
  .megapanel .row:first-of-type{border-top:none;}
  .megapanel .row .t{font-family:'Fraunces',serif; font-size:19px; font-weight:500;}
  .megapanel .row p{font-size:13px; color:var(--dark-muted); max-width:340px; margin-top:4px;}
  .megapanel .row svg{color:var(--accent); flex-shrink:0;}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 88px; background:
        radial-gradient(1100px 480px at 78% -10%, rgba(0,168,107,0.08), transparent 60%);}
  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow-pill{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:0.16em;
                text-transform:uppercase; color:var(--accent-deep); border:1px solid var(--line); border-radius:999px;
                padding:8px 16px; margin-bottom:28px;}
  .eyebrow-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
  h1.display{font-size:56px; line-height:1.07; font-weight:500; margin-bottom:26px; max-width:640px;}
  .lede{font-size:18px; color:var(--ink-soft); max-width:480px; margin-bottom:36px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

  .model-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 30px 60px rgba(15,46,34,0.08);}
  .model-card .cap{width:100%; height:150px; border-radius:12px; margin-bottom:20px; object-fit:cover;
       background:url(img/hero-facade.jpg) center 30% / cover no-repeat; filter:grayscale(1) contrast(1.06); border:1px solid var(--line);}
  .model-card .kicker{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em;}
  .model-card .title-row{display:flex; justify-content:space-between; align-items:center; margin:6px 0 18px;}
  .model-card .title-row .t{font-family:'Fraunces',serif; font-size:19px; font-weight:500; color:var(--ink);}
  .pillbadge{font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-deep);
             background:rgba(0,168,107,0.1); padding:5px 11px; border-radius:999px;}
  .step{display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line);}
  .step:first-of-type{border-top:none; padding-top:0;}
  .step .num{font-family:'Fraunces',serif; color:var(--accent-deep); font-weight:600; font-size:14px; padding-top:2px;}
  .step .t{font-weight:600; color:var(--ink); font-size:15px; margin-bottom:3px;}
  .step p{font-size:13.5px; color:var(--muted);}

  /* ---------- tag strip ---------- */
  .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
  .strip .wrap{display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between;}
  .strip .label{font-size:13px; color:var(--muted); max-width:280px;}
  .tags{display:flex; gap:12px; flex-wrap:wrap;}
  .tag{font-size:13px; font-weight:600; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:8px 16px;}

  /* ---------- section shell ---------- */
  section{padding:100px 0;}
  .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;}
  @media (max-width:720px){ .sec-head{flex-direction:column; align-items:flex-start; gap:18px;} }
  .eyebrow{font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:16px;}
  h2.display{font-size:38px; max-width:600px;}

  /* ---------- capabilities accordion ---------- */
  .accordion .row{display:flex; justify-content:space-between; align-items:flex-start; gap:40px;
                  padding:34px 0; border-top:1px solid var(--line);}
  .accordion .row:last-child{border-bottom:1px solid var(--line);}
  .accordion .row .t{font-size:28px; display:flex; align-items:center; gap:14px;}
  .accordion .row .t svg{color:var(--accent); transition:transform .18s ease;}
  .accordion .row:hover .t svg{transform:translateX(6px);}
  .accordion .row p{font-size:15px; color:var(--muted); max-width:420px; padding-top:10px;}
  @media (max-width:720px){ .accordion .row{flex-direction:column; gap:12px;} }

  /* ---------- how we work ---------- */
  .steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  @media (max-width:900px){ .steps4{grid-template-columns:repeat(2,1fr);} }
  .steps4 .cell{background:#fff; padding:32px 26px;}
  .steps4 .cell .num{font-family:'Fraunces',serif; color:var(--accent); font-size:15px; font-weight:600; margin-bottom:18px;}
  .steps4 .cell .t{font-family:'Fraunces',serif; font-size:21px; color:var(--ink); margin-bottom:10px;}
  .steps4 .cell p{font-size:14px; color:var(--muted);}

  /* ---------- work themes ---------- */
  .work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  @media (max-width:900px){ .work-grid{grid-template-columns:1fr;} }
  .work-card .img{height:190px; border-radius:14px; margin-bottom:22px;
       background:linear-gradient(135deg,#0f2e22,#3c8a6c); filter:grayscale(0.15);}
  .work-card .cat{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .work-card .cat .bar{width:3px; height:16px; background:var(--accent); border-radius:2px;}
  .work-card .cat span{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
  .work-card h3{font-size:22px; margin-bottom:12px; line-height:1.25;}
  .work-card p{font-size:14.5px; color:var(--muted); margin-bottom:18px;}

  /* ---------- about statement ---------- */
  .about-grid{display:grid; grid-template-columns:0.6fr 1.4fr; gap:60px;}
  @media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:24px;} }
  .about-grid h2.display{font-size:34px;}
  .about-copy p{font-size:16px; color:var(--ink-soft); max-width:640px; margin-bottom:18px;}

  /* ---------- contact band ---------- */
  .contact-band{background:var(--dark); color:var(--dark-ink); border-radius:24px; padding:72px 64px;
               display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
  .contact-band h2{color:var(--dark-ink); font-size:38px; max-width:640px;}
  .contact-band .btn-solid{background:var(--accent); color:#0f2e22;}
  .contact-band .btn-solid:hover{background:#fff;}

  /* ---------- footer ---------- */
  footer{background:var(--dark); color:var(--dark-muted); padding:60px 0 36px; margin-top:0;}
  .foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--dark-line);}
  .foot-grid .wordmark{color:var(--dark-ink);}
  .foot-links{display:flex; gap:48px; flex-wrap:wrap;}
  .foot-links .col{display:flex; flex-direction:column; gap:10px;}
  .foot-links .col a{font-size:14px; color:var(--dark-muted);}
  .foot-links .col a:hover{color:var(--dark-ink);}
  .foot-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ---------- added for inner pages ---------- */
.page-hero{padding:88px 0 56px; border-bottom:1px solid var(--line);}
.page-hero .display{max-width:16ch;}
.page-hero .lede{max-width:62ch; margin-top:18px;}
.crumb{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--ink);}
.prose{max-width:68ch;}
.prose p{margin-bottom:18px; color:var(--ink-soft); line-height:1.75;}
.prose h3{font-family:'Fraunces',serif; font-weight:500; font-size:26px; margin:38px 0 12px; color:var(--ink);}
.detail{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px;}
.detail .cell{background:var(--bg); padding:32px 30px;}
.detail .cell h3{font-family:'Fraunces',serif; font-weight:500; font-size:22px; margin-bottom:10px;}
.detail .cell p{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
.detail .cell ul{margin-top:14px; padding-left:18px;}
.detail .cell li{font-size:14px; color:var(--ink-soft); line-height:1.9;}
.kv{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); margin-top:40px;}
.kv .r{display:flex; gap:32px; padding:18px 0; border-bottom:1px solid var(--line);}
.kv .k{flex:0 0 190px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); padding-top:3px;}
.kv .v{font-size:15px; color:var(--ink-soft); line-height:1.7;}
.form{display:grid; gap:18px; max-width:560px; margin-top:36px;}
.form label{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px;}
.form input,.form textarea,.form select{width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--bg); font-family:'Inter',sans-serif; font-size:15px; color:var(--ink); border-radius:2px;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--ink);}
.form textarea{min-height:130px; resize:vertical;}
@media(max-width:820px){.detail{grid-template-columns:1fr;} .kv .r{flex-direction:column; gap:6px;} .kv .k{flex:none;}}


/* ---------- wordmark as home link ---------- */
a.wordmark{display:inline-block; color:var(--ink); text-decoration:none; transition:opacity 0.18s ease;}
a.wordmark:hover{opacity:0.6;}
.foot-grid a.wordmark{color:var(--dark-ink);}


/* ---------- photography ---------- */
.work-card .img{background-color:var(--panel); background-size:cover; background-position:center;
                background-repeat:no-repeat; border:1px solid var(--line);
                filter:grayscale(1) contrast(1.06) brightness(1.02);
                transition:filter 0.45s ease;}
.work-card:hover .img{filter:grayscale(1) contrast(1.13) brightness(1.05);}
.work-card .img.photo-1{background-image:url(img/work-01.jpg);}
.work-card .img.photo-2{background-image:url(img/work-02.jpg);}
.work-card .img.photo-3{background-image:url(img/work-03.jpg);}
.figure{margin:44px 0; border:1px solid var(--line); overflow:hidden; background:var(--panel);}
.figure img{display:block; width:100%; height:auto; filter:grayscale(1) contrast(1.06);}
.figure figcaption{font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
                   color:var(--muted); padding:12px 16px; border-top:1px solid var(--line);}


/* portrait source — bias the crop to the top so the subject survives */
.work-card .img.photo-1{background-position:center 24%;}


/* ---------- mega menu rows as links ---------- */
a.row{text-decoration:none; color:inherit; cursor:pointer;
      transition:padding-left .18s ease, border-color .18s ease;}
.megapanel a.row:hover{padding-left:8px;}
.megapanel a.row:hover .t{color:#ffffff;}
.megapanel a.row:hover svg{transform:translateX(4px);}
.megapanel a.row svg{transition:transform .18s ease;}
.megapanel a.row:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
/* keep the sticky header from covering anchor targets */
.prose h3[id]{scroll-margin-top:110px;}
/* let the panel survive the gap between trigger and menu */
.navitem::after{content:''; position:absolute; left:0; right:0; top:100%; height:24px;}
.navitem:focus-within .megapanel{opacity:1; visibility:visible; translate:0 0;}