.service-card{grid-template-columns:64px 72px 1fr;align-items:start;transition:background-color .25s ease,padding .25s ease}
.service-card:hover{background:rgba(255,255,255,.035);padding-left:1rem;padding-right:1rem}
.service-icon{width:48px;height:48px;border:1px solid rgba(220,118,92,.72);border-radius:50%;display:grid;place-items:center;color:var(--coral)}
.service-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.social-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;font-size:.84rem;text-underline-offset:5px}
.social-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.whatsapp-button{border:1px solid rgba(247,242,235,.55);color:var(--cream);margin:-.65rem 0 1.35rem;gap:.7rem}
.whatsapp-button:hover{border-color:var(--coral);color:var(--coral)}
.whatsapp-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.section-label:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);align-self:center;box-shadow:0 0 0 5px rgba(220,118,92,.12)}
.fit{position:relative;overflow:hidden}
.fit:before{content:"“";position:absolute;left:2vw;top:-5rem;font:400 25rem/1 var(--serif);color:rgba(45,23,57,.07);pointer-events:none}
footer a{text-underline-offset:4px}
.expertise-tags{display:flex;flex-wrap:wrap;gap:.65rem;list-style:none;margin:2.3rem 0 0;padding:0}
.expertise-tags li{border:1px solid var(--line);border-radius:999px;padding:.55rem .9rem;font-size:.76rem;font-weight:600;letter-spacing:.04em;background:rgba(255,255,255,.36)}
.section{padding-top:clamp(4.25rem,7vw,7.25rem);padding-bottom:clamp(4.25rem,7vw,7.25rem)}
.contact.section{padding-top:clamp(5rem,9vw,9rem);padding-bottom:clamp(5rem,9vw,9rem)}
.section-label{margin-bottom:clamp(2.5rem,4.5vw,4.5rem)}
.section-intro{margin-bottom:3.75rem}
.approach-heading{margin-bottom:3.75rem}
.service-card{padding-top:1.9rem;padding-bottom:1.9rem}
@media(max-width:820px){.section{padding-top:3.75rem;padding-bottom:3.75rem}.contact.section{padding-top:5rem;padding-bottom:5rem}.section-label{margin-bottom:2.5rem}.section-intro,.approach-heading{margin-bottom:3rem}.service-card{grid-template-columns:38px 52px 1fr;padding-top:1.7rem;padding-bottom:1.7rem}.service-icon{width:40px;height:40px}.service-icon svg{width:19px;height:19px}.service-card:hover{padding-left:0;padding-right:0}}

/* Typography balance */
.wordmark span{font-size:.7rem;line-height:1}
nav a,.menu-button,.button,.text-link,.email-link,.social-link{font-size:.9rem}
.eyebrow,.section-label,footer p{font-size:.78rem}
.expertise-tags li{font-size:.82rem}
@media(max-width:820px){
  .hero h1{font-size:clamp(3.3rem,13vw,5.2rem)}
  .approach-heading h2{font-size:clamp(3rem,12vw,4.8rem)}
  .fit blockquote{font-size:clamp(2.55rem,10.5vw,4.4rem)}
}

/* Tablet and mobile browsers requesting a desktop-width viewport */
@media(min-width:821px) and (max-width:1024px){
  .site-header{height:80px}
  .menu-button{display:block}
  .site-header nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--paper);padding:2rem;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .site-header nav.open{display:flex}
  .hero{min-height:auto;grid-template-columns:1fr;padding-top:4rem}
  .hero h1{font-size:clamp(3.3rem,13vw,5.2rem)}
  .hero-visual{margin:1rem 1.4rem 2rem 0}
  .margin-note{left:-.4rem;bottom:1rem}
  .about-grid,.section-intro,.experience-grid,.contact{grid-template-columns:1fr}
  .about-grid,.experience-grid,.contact{gap:3rem}
  .service-card{grid-template-columns:45px 56px 1fr;padding-top:1.7rem;padding-bottom:1.7rem}
  .service-card>div{grid-template-columns:1fr;gap:.7rem}
  .service-icon{width:42px;height:42px}
  .service-icon svg{width:20px;height:20px}
  .approach-heading{grid-template-columns:1fr}
  .approach-heading h2{font-size:clamp(3rem,12vw,4.8rem)}
  .steps{margin-left:0}
  .client-list{columns:1}
  .fit blockquote{font-size:clamp(2.55rem,10.5vw,4.4rem)}
  .contact-action{max-width:32rem}
  footer{grid-template-columns:1fr;gap:1.5rem}
  footer p:last-child{text-align:left}
  .footer-mark{margin-bottom:1rem}
  .section{padding-top:3.75rem;padding-bottom:3.75rem}
  .contact.section{padding-top:5rem;padding-bottom:5rem}
  .section-label{margin-bottom:2.5rem}
  .section-intro,.approach-heading{margin-bottom:3rem}
}