/* POST Agency homepage | palette #5A3A24 #2F5D46 #B5854F #8DB596 #F3E9D8 */
:root{
  --brown:#5A3A24; --green:#2F5D46; --green-deep:#244A37; --tan:#B5854F; --sage:#8DB596; --cream:#F3E9D8;
  --ink:#2E1F14; --muted:#6F5B4A; --paper:#FCF9F4; --line:#E6DAC6;
  --display:"Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--tan);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--cream);padding:.6rem 1rem;z-index:50}.skip:focus{left:0}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
.section{padding:6rem 0}
h1,h2,h3{margin:0;line-height:1.1}

/* Type */
.display{font:600 clamp(2.8rem,6.2vw,5.4rem)/.98 var(--display);text-transform:uppercase;color:var(--brown);letter-spacing:.005em;position:relative;padding-left:1.4rem}
.display .bar{position:absolute;left:0;top:.08em;bottom:.08em;width:.5rem;background:var(--green)}
.display.small{font-size:clamp(2.2rem,4vw,3.4rem);color:var(--cream);padding-left:0}
.h2{font:600 clamp(1.9rem,3.2vw,2.6rem)/1.05 var(--display);text-transform:uppercase;color:var(--green);margin-bottom:1.6rem}
.h2 small{display:block;font:500 1rem/1.4 var(--sans);text-transform:none;color:var(--brown);margin-top:.5rem;padding-top:.45rem;border-top:3px solid var(--tan);width:max-content;max-width:100%}
.h2.light{color:var(--cream)} .h2.light small{color:var(--sage)}
.mini{font:600 1rem/1.2 var(--display);text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
.lead{font-size:1.15rem;color:var(--muted);max-width:34rem;margin:1.6rem 0 2rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:var(--cream);text-decoration:none;font-weight:600;padding:.85rem 1.5rem;border:2px solid var(--green);border-radius:4px}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--brown);border-color:var(--brown)}.btn.ghost:hover{background:var(--brown);color:var(--cream)}
.btn.light{background:var(--cream);color:var(--green-deep);border-color:var(--cream)}.btn.light:hover{background:#fff}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.ic{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(252,249,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:baseline;gap:.55rem;text-decoration:none}
.logo .mark{font:600 1.75rem/1 var(--display);color:var(--brown);letter-spacing:.06em;padding-left:.7rem;border-left:5px solid var(--green)}
.logo-sub{color:var(--muted);font-size:.85rem}
.site-nav{display:flex;align-items:center;gap:1.8rem}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500}
.site-nav a:hover{color:var(--green)}
.site-nav .btn-login{background:var(--brown);color:var(--cream);padding:.55rem 1.1rem;border-radius:4px}
.site-nav .btn-login:hover{background:var(--green);color:var(--cream)}
.nav-toggle{display:none;background:var(--green);color:var(--cream);border:0;border-radius:4px;padding:.5rem .9rem;font:600 .9rem var(--sans);cursor:pointer}

/* Hero (cover) */
.hero{padding:4.5rem 0 0;background:linear-gradient(var(--paper) 0 74%, var(--cream) 74%)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hero-visual{position:relative;padding:2.5rem 0 3rem 2.5rem}
.hero-img{position:relative;aspect-ratio:4/4.2;overflow:hidden;background:var(--green)}
.hero-img .skyline{width:100%;height:100%;display:block}
.hero-card{position:absolute;top:0;right:0;z-index:2;display:flex;gap:.9rem;align-items:center;background:var(--green-deep);color:var(--cream);padding:1.1rem 1.4rem;max-width:20rem;box-shadow:0 0 0 8px var(--paper)}
.hero-card .ic{width:2.4rem;height:2.4rem;color:var(--sage)}
.hero-card strong{display:block;font:600 1.15rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em}
.hero-card span{font-size:.88rem;color:var(--sage)}
.year-block{position:absolute;left:0;bottom:0;z-index:2;background:var(--brown);color:var(--cream);padding:1rem 2rem 1.1rem;box-shadow:0 0 0 8px var(--cream)}
.year-block span{display:block;font-size:.85rem;color:#E6CFB4}
.year-block strong{font:600 2.6rem/1 var(--display)}
.hero-visual::after{content:"";position:absolute;right:0;bottom:1.4rem;width:58%;height:.9rem;background:var(--tan)}
.hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2.5rem 0 3.5rem;max-width:44rem;margin-left:auto;margin-right:max(1.5rem,calc((100% - 1180px)/2))}
.hero-foot p{margin:0;color:var(--muted)}
.hero-foot>div+div{border-left:2px solid var(--brown);padding-left:2rem}

/* Images: photos keep their original colors; a green pattern shows until a photo is uploaded */
.fill{width:100%;height:100%;object-fit:cover;display:block}
img.duo{filter:none;mix-blend-mode:normal}   /* photos show in their original colors */
.about-img,.svc-img,.member{background:var(--green)}
.ph{width:100%;height:100%;min-height:100%;background:
  linear-gradient(135deg,transparent 0 46%,rgba(141,181,150,.22) 46% 54%,transparent 54%) 0 0/28px 28px,
  linear-gradient(var(--green),var(--green-deep))}
.ph.portrait{aspect-ratio:4/5;height:auto;min-height:0}

/* About */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.about-img{aspect-ratio:1/1;position:relative;box-shadow:-18px 18px 0 var(--cream)}
.about-copy p{color:var(--muted);margin:0 0 1.1rem;max-width:38rem}
.chevron-band{margin-top:3.5rem;display:flex;align-items:stretch;color:var(--cream);max-width:46rem;margin-left:auto}
.chevron-band p{margin:0;background:var(--green);padding:1.3rem 1.8rem;font:500 1.25rem/1.35 var(--display);text-transform:uppercase;letter-spacing:.02em;flex:1}
.chev{display:grid;place-items:center;width:5.5rem;margin-left:.6rem;background:var(--tan);color:var(--cream);clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%,30% 50%)}
.chev .ic{width:1.8rem;height:1.8rem}

/* Method band */
.method{background:var(--green);color:var(--cream);padding:5rem 0;position:relative}
.method::before{content:"";position:absolute;inset:0 auto 0 0;width:min(28%,320px);background:var(--green-deep)}
.method .wrap{position:relative}
.method-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.method-card{border:1.5px solid rgba(243,233,216,.35);padding:2rem 1.6rem;background:rgba(36,74,55,.55)}
.method-card .badge{display:inline-grid;place-items:center;width:3.2rem;height:3.2rem;background:var(--cream);color:var(--green);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);margin-bottom:1.2rem}
.method-card h3{font:600 1.35rem/1.2 var(--display);text-transform:uppercase;margin-bottom:.5rem}
.method-card p{margin:0;color:#DCE8DE}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem 3rem}
.svc{display:grid;grid-template-columns:11rem 1fr;gap:1.4rem;align-items:start}
.svc-img{aspect-ratio:1/1;overflow:hidden}
.svc-body{border-top:1px solid var(--line);padding-top:.9rem}
.num{font:600 1rem/1 var(--display);color:var(--tan)}
.svc h3{font:600 1.3rem/1.2 var(--display);text-transform:uppercase;color:var(--green);margin:.35rem 0 .5rem}
.svc p{margin:0;color:var(--muted);font-size:.96rem}

/* Stats */
.stats-band{background:var(--cream);padding:3.5rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{background:var(--brown);color:var(--cream);padding:1.6rem 1.4rem;border-bottom:6px solid var(--tan)}
.stat strong{display:block;font:600 2.8rem/1 var(--display)}
.stat span{color:#E6CFB4;font-size:.95rem}

/* Values */
.values-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.mission{font:500 1.5rem/1.35 var(--display);color:var(--brown);text-transform:uppercase;margin:0;max-width:24rem}
.value-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.value-list li{background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);padding:1.3rem 1.4rem}
.value-list h3{font:600 1.2rem/1.2 var(--display);text-transform:uppercase;color:var(--green);margin-bottom:.35rem}
.value-list p{margin:0;color:var(--muted);font-size:.95rem}

/* Team */
.team{background:var(--cream)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.member{margin:0;position:relative;overflow:hidden}
.member img{aspect-ratio:4/5;width:100%;object-fit:cover;display:block}
.member figcaption{background:var(--paper);padding:.9rem 1rem;border-bottom:4px solid var(--green)}
.member strong{display:block;font:600 1.1rem/1.2 var(--display);text-transform:uppercase;color:var(--brown)}
.member span{font-size:.9rem;color:var(--muted)}

/* Contact (back cover) */
.contact{background:var(--green-deep);color:var(--cream);padding:5.5rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.contact-list li{display:flex;gap:.9rem;align-items:center;font-size:1.05rem}
.contact-list .ic{color:var(--sage)}
.contact-list a{color:var(--cream)}
.contact-cta{background:var(--green);padding:2.4rem;border-left:8px solid var(--tan)}
.contact-cta p{font-size:1.15rem;margin:0 0 1.5rem}

/* Footer */
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding:1.6rem 0}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-row p{margin:0;color:var(--muted);font-size:.9rem}
.logo.small .mark{font-size:1.3rem}

/* Responsive */
@media (max-width:980px){
  .hero-grid,.about-grid,.values-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero{background:var(--paper)}
  .svc-grid{grid-template-columns:1fr}
  .team-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
  .method-grid{grid-template-columns:1fr}
  .method::before{display:none}
  .hero-foot{margin:0 auto;max-width:none}
}
@media (max-width:760px){
  .section{padding:4rem 0}
  .nav-toggle{display:inline-block}
  .site-nav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);display:none;padding:.5rem 1.5rem 1rem}
  .site-nav.open{display:flex}
  .site-nav a{padding:.75rem 0;border-bottom:1px solid var(--line)}
  .site-nav .btn-login{margin-top:.8rem;text-align:center;border:0}
  .hero-visual{padding:2rem 0 2.5rem 1rem}
  .hero-card{position:relative;max-width:none;margin:0 0 1rem;box-shadow:none}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot>div+div{border-left:0;padding-left:0;border-top:2px solid var(--brown);padding-top:1rem}
  .svc{grid-template-columns:6.5rem 1fr;gap:1rem}
  .value-list{grid-template-columns:1fr}
  .chevron-band p{font-size:1.05rem;padding:1rem 1.2rem}
  .chev{width:4rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.logo-img{display:block;max-height:46px;max-width:220px;width:auto}
.logo-img.small{max-height:32px}