/*
 * Legibility pass (loads last on every page).
 * The approved design set its labels, links and buttons in a pale taupe at 11 to 12px.
 * This darkens the taupe to pass WCAG AA on every light background and sets small
 * text a touch larger, so labels read easily and the Inquire buttons stand out.
 * Dark (espresso) sections keep their light accent color.
 */
:root{--taupe:#6E5E4D}

/* Eyebrow labels and small category tags */
.label,.bo-cat,.jcat,.ps-sub,.foot .lbl,.st-grid span,.rs-item span,.qband span,.ps-num,.kw-who,.cs-who,.tst-who b,.fy-end,.kind-who,.f-role,.t1-who,.wk-mid,.who div,.bt2-biz{font-size:.8rem!important}

/* Text links and small controls */
.link,.jact,.t-next,.wctrl button,.sw-ctrl button,.gl-ctrl button,.tst-ctrl button,.proc-top button,.menu-btn,.drawer button,.inds-list .inds-more a.link{font-size:.8rem!important}
.wcard span,.facts div,.ch-stats span,.feat .cap span,.intro .note,.ticks li{font-size:.78rem!important}
.bl-cat-links a{font-size:.78rem!important}

/* Buttons: larger, bolder text with a little more height */
.btn{font-size:.82rem!important;letter-spacing:.22em!important;font-weight:500!important}
.btn.fill,.btn.light{min-height:52px}
.topbar a{font-size:.78rem}
.topbar .btn{font-size:.8rem!important;padding:.8rem 1.55rem!important}
#qNext,.q__ghost{font-size:.82rem!important;letter-spacing:.22em!important}
.po-body .post-cta a.post-cta__btn{font-size:.82rem;letter-spacing:.22em}

/* Phones: comfortable tap targets */
@media (max-width:700px){
  .btn{padding-top:1.05rem!important;padding-bottom:1.05rem!important}
  .label{font-size:.76rem!important}
}

/* Dark (espresso) sections keep the light accent so the darker taupe never sits on espresso */
.about.dark .label,.about.dark .facts div,footer .legal span,footer .legal{color:#C9B9A6!important}
.dark .label{color:#C9B9A6}

/* Long email addresses wrap instead of running off narrow screens */
a[href^="mailto:"]{overflow-wrap:anywhere;word-break:break-word}
a[href^="mailto:"]{white-space:normal!important}

/* Small phones: nav Inquire button stays on screen */
@media (max-width:420px){
  .topbar{padding-left:16px!important;padding-right:16px!important;gap:1rem!important}
  .nright{gap:.9rem!important}
  .topbar .btn{padding:.7rem 1rem!important;letter-spacing:.16em!important;font-size:.76rem!important}
  .nlogo{width:112px!important}
}

/* Bigger tap areas without moving anything (padding offset by negative margin) */
.menu-btn,.t-next,.t-prev,.tst-ctrl button,.sw-ctrl button,.gl-ctrl button,.wctrl button{padding:12px 10px!important;margin:-12px -10px!important}
.po-nav a,.po-cl{display:inline-block;padding:10px 0;margin:-10px 0}

/* Website Design "challenges" grid: one column on tablets (overflowed at 768px) */
@media (max-width:900px){
  .chal-grid{grid-template-columns:minmax(0,1fr)!important}
  .chal-grid>*{min-width:0}
}
@media (max-width:900px){
  .chal-grid strong{white-space:normal!important}
  .chal-grid>div:nth-child(1){order:1}.chal-grid>div:nth-child(3){order:2}
  .chal-grid>div:nth-child(2){order:3}.chal-grid>div:nth-child(4){order:4}
}

/* Post date line wraps on phones instead of widening the page */
@media (max-width:700px){ .po-meta{white-space:normal!important;line-height:1.7} .po-main h1{text-wrap:balance} .po-main h1 .ln{display:inline!important;white-space:normal!important} }

/* Homepage "Explore Our Work": larger website mockup, slightly smaller words on the left */
.wk-big{font-size:clamp(2.1rem,3.7vw,3.6rem)!important}
@media (min-width:1101px){
  .work-grid{grid-template-columns:1fr 1.65fr!important}
  .wfade{padding-right:max(40px,calc((100vw - 1440px)/2 + 40px))!important}
  .wfade-in{max-width:min(940px,calc(90vh * 784 / 933))!important}
}

/* Footer logo a touch larger */
.foot .flogo{width:210px!important}
@media (max-width:700px){ .foot .flogo{width:180px!important} }