/* Phone layout: compact, readable and independent of the desktop composition. */
@media (max-width:700px){
  .header.wrap{padding:9px 16px}
  .header nav{gap:12px}
  .header nav a{font-size:12.5px;padding-inline:1px}
  .hero{min-height:0;gap:0}
  .hero-shell:before{opacity:.35}
  .hero-copy{text-align:center;padding:26px 0 20px}
  .hero .hero-copy>.eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;font-size:9px;letter-spacing:1.5px;line-height:1.5;margin-bottom:18px}
  .hero .tiny-line{margin:0;width:22px;flex:none}
  .hero h1{font-size:clamp(39px,10.8vw,49px);line-height:1;letter-spacing:-1.4px;margin:0 0 16px}
  .specialist-title{font-size:10.5px;line-height:1.5;letter-spacing:1.4px;border-top-width:1px;padding-top:12px;margin-bottom:16px}
  .hero-message{font-size:clamp(18px,5vw,21px);line-height:1.3;letter-spacing:-.3px;max-width:100%;margin:0 auto 14px;text-wrap:balance}
  .hero .intro{font-size:15px;line-height:1.6;max-width:34ch;margin:0 auto}
  .hero-actions{gap:8px;margin-top:20px}
  .hero-actions .button{position:relative;justify-content:center;min-height:48px;padding:12px 40px;font-size:14px;border-radius:4px}
  .hero-actions .button>span{position:absolute;right:18px}
  .hero-actions .text-link{min-height:42px;font-size:13px;padding:8px 4px;gap:15px}
  .hero-art{width:calc(100% + 40px);max-width:none;height:320px;min-height:0;margin:0 -20px;clip-path:none;overflow:hidden;border-top:1px solid #cfa84c;border-radius:0;background:#09243d}
  .hero-art:before,.hero-art:after{content:none}
  .hero-art img{clip-path:none;object-fit:cover;object-position:50% 34%;height:100%;width:100%;transform:none}
  .hero-shell{border-bottom-width:2px}
  .carrier-section{padding-top:12px;padding-bottom:20px}
  #services{padding-top:30px}
  #services .section-head>.eyebrow{margin-bottom:16px}
  #services .section-head h2{font-size:clamp(27px,7.4vw,32px);line-height:1.18;letter-spacing:-.8px;margin-bottom:12px;text-wrap:balance}
  #services .section-head .services-tagline{font-size:16px;line-height:1.5;max-width:30ch;margin-bottom:0;text-wrap:balance}
  .service-grid{margin-top:24px;gap:18px}
  .service-head{padding:22px 24px;min-height:0}
  .service-grid .service .service-head .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:12px}
  .service-grid .service h3{font-size:28px;line-height:1.08;letter-spacing:-.6px}
  .service-rule{margin-top:14px;width:26px}
  .service-number{top:20px;right:18px;font-size:11px}
  .service-head:after{opacity:.55}
  #services .service-body{padding:8px 20px}
  #services .service-action{font-size:14px;gap:8px}
  #what-to-expect,#contact{padding-top:40px}
  #about .about-section{padding-top:40px}
  .credentials{padding-block:40px}
  #what-to-expect>.process-label,#contact>.contact-label,.credentials>.credentials-label{margin-bottom:20px}
  #about .about-section-title>.eyebrow{margin-bottom:14px}
  #about .about-section-title{margin-bottom:20px}
  #about .about-section-title h2{font-size:29px;line-height:1.15;text-wrap:balance}
  #what-to-expect .process-intro{padding:28px 24px}
  #what-to-expect .process-intro h2{font-size:27px;line-height:1.2}
  #what-to-expect .process-intro>.eyebrow{font-size:13px;letter-spacing:1.1px;margin-bottom:20px}
  #what-to-expect .process-intro .process-intro-copy{font-size:15.5px;line-height:1.65}
  #what-to-expect .process-steps{padding-inline:22px}
  #what-to-expect .process-steps li{padding-block:22px}
  #what-to-expect .process-steps .step-copy{font-size:16px;line-height:1.65;margin-top:13px}
  #what-to-expect .process-steps h3{font-size:20px;line-height:1.25}
  .about-panel .portrait{aspect-ratio:1.12;object-position:50% 30%}
  .about-nameplate{padding:18px 24px}
  .about-nameplate p{font-size:22px}
  .about-heading{padding:24px}
  .about-heading h3{font-size:28px;line-height:1.15}
  .about-heading .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:16px}
  .about-gold-rule{margin-top:18px}
  .about-body{padding:24px}
  .about-body>p:not(.draft-detail){font-size:16px;line-height:1.7;margin-bottom:18px}
  .about-spanish{margin-block:20px;padding-left:14px}
  .about-spanish p{font-size:15px;line-height:1.65}
  #about .about-action{font-size:14px;padding-inline:36px;min-height:50px}
  #contact .contact-lead,#contact .contact-options{padding:26px 24px}
  #contact .contact-lead>.eyebrow{font-size:11px;letter-spacing:1.3px;margin-bottom:18px}
  #contact .contact-lead h2{font-size:29px;line-height:1.17;letter-spacing:-.7px;text-wrap:balance}
  #contact .contact-intro-copy>strong{font-size:17px;line-height:1.4}
  #contact .contact-intro-copy>span{font-size:16px;line-height:1.4;margin-top:6px}
  #contact .contact-gold-rule{margin-block:20px}
  #contact .contact-person>strong{font-size:29px;line-height:1.15}
  #contact .contact-identity{margin-bottom:22px}
  .contact-actions{gap:10px}
  .contact-actions .contact-call{min-height:50px;font-size:15px;padding-block:12px}
  #contact .contact-phone-display{margin-top:12px}
  #contact .contact-phone-display>a{font-size:27px;min-height:52px}
  .about-heading:after,.process-intro:after,.contact-lead:after{width:62px;opacity:.3}
  .credential-header h3{font-size:17px;line-height:1.25;letter-spacing:.3px}
  .credential-grid{gap:16px}
  .site-footer .footer{padding-top:28px}
  .site-footer .footer-top{gap:22px;padding-bottom:22px}
  .site-footer .footer-navigation{padding-block:18px}
  .footer-brand{font-size:24px}
}
@media(max-width:359px){
  .header nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:26px;row-gap:0}
  .header nav a{font-size:13px;min-height:40px}
  .hero-copy{padding-top:24px}
  .hero-art{height:290px}
  #services .service-action{font-size:13px}
  #what-to-expect .process-intro,#contact .contact-lead,#contact .contact-options,.about-heading,.about-body{padding-inline:20px}
  #about .about-action{font-size:13px;padding-inline:30px}
  #contact .contact-person>strong{font-size:26px}
  #contact .contact-phone-display>a{font-size:25px}
  .credential-header h3{font-size:15.5px}
}
@media(max-width:700px){.hero-art{height:clamp(290px,82vw,420px)}}
@media(max-width:359px){.header nav a{min-height:44px}}

/* Keep only the About Me portrait on phones. */
@media(max-width:700px){
 .hero .hero-art{display:none}
 .hero-copy{padding-bottom:28px}
 .hero-shell{border-bottom:0}
 .carrier-section{padding-top:12px}
}

/* Keep the mobile heading; remove the duplicate identity under the portrait. */
@media(max-width:700px){
 #about .about-nameplate{display:none}
}

/* Lighter contact and credential proportions on phones. */
@media(max-width:700px){
 #contact{padding-top:34px}
 #contact>.contact-label,.credentials>.credentials-label{margin-bottom:16px}
 #contact .contact-lead{padding:22px 20px}
 #contact .contact-lead>.eyebrow{font-size:10px;margin-bottom:12px;letter-spacing:1.1px}
 #contact .contact-lead h2{font-size:25px;line-height:1.18;letter-spacing:-.5px}
 #contact .contact-lead h2>span{margin-top:5px}
 #contact .contact-gold-rule{margin-block:14px;width:24px}
 #contact .contact-intro-copy>strong{font-size:15px;line-height:1.4}
 #contact .contact-intro-copy>span{font-size:14px;margin-top:4px}
 #contact .contact-options{padding:20px}
 #contact .contact-identity{margin-bottom:16px}
 #contact .contact-person>span{font-size:10px;letter-spacing:1.4px;margin-bottom:7px}
 #contact .contact-person>strong{font-size:25px;line-height:1.15;letter-spacing:-.6px}
 #contact .contact-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #contact .contact-actions .contact-call{min-height:46px;padding:10px 8px;font-size:14px}
 #contact .contact-phone-display{margin-top:10px}
 #contact .contact-phone-display>a{min-height:46px;padding:9px 12px;font-size:24px}
 .credentials{padding-block:32px}
 .credentials .credential-grid{gap:12px}
 .credentials .credential-card{grid-template-rows:48px 48px}
 .credentials .credential-header{height:48px;padding:10px 14px}
 .credentials .credential-header h3{font-size:15px;line-height:1.25;letter-spacing:.25px}
 .credentials .credential-grid .credential-value{height:48px;padding:9px 14px}
 .credentials .credential-grid .credential-value:not(.credential-states){font-size:23px;line-height:1.25;letter-spacing:.2px}
 .credentials .states-viewport{height:48px}
 .credentials .state-group li{height:48px;font-size:22px;padding:6px 11px}
 .credentials .credential-header:after{width:48px;opacity:.4}
}
@media(max-width:359px){
 #contact .contact-lead,#contact .contact-options{padding-inline:18px}
 #contact .contact-lead h2{font-size:23px}
 #contact .contact-person>strong{font-size:23px}
 #contact .contact-phone-display>a{font-size:23px}
 .credentials .credential-header h3{font-size:13.5px}
 .credentials .credential-grid .credential-value:not(.credential-states){font-size:21px}
}