/* Pass 50: focused design review using the existing Wonkla visual system. */

/* Reading rhythm and shared controls. Keep the existing three font families. */
body{font-family:Gilroy,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html{scroll-padding-top:110px}
.copy{line-height:1.4}
.copy-sm{line-height:1.6}
.form-grid,.field,.search-line input,.diag-form input{min-width:0}
.field input,.field select{min-height:48px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-color:var(--ink);
}
.search-line:focus-within,.diag-form:focus-within,.footer .subscribe:focus-within{
  border-bottom-color:var(--orange)!important;box-shadow:0 1px 0 var(--orange);
}
.form-note,.footer .signup-consent{font-size:11px;line-height:1.6}
.footer .signup-consent{color:rgba(248,248,248,.72)}
.footer .signup-status{font-size:11px;line-height:1.6}
.btn:hover::after{color:currentColor!important}
.final .final-actions .btn:hover,.final .final-actions .btn:hover::after{color:var(--black)!important}

/* Homepage: no layout movement while reading a service, and no empty CTA column. */
.service:hover{padding:42px 0}
.service{transition:background .3s var(--ease)}
.final-grid > :only-child{grid-column:1/-1;max-width:1000px;min-width:0}
.hero-bottom > :only-child{grid-column:1/-1;max-width:780px}
body[data-page="home"] #insights .article-preview{
  display:block!important;
}
body[data-page="home"] #insights .article-date{margin:0 0 10px!important}
body[data-page="home"] #insights .article-preview h3{line-height:1.25}

/* Only these two homepage marks need optical enlargement. Original artwork is intact. */
#clients .client-grid .client-card--afrilink img{transform:scale(1.20)!important}
#clients .client-grid .client-card--serenity img{transform:scale(1.24)!important}
@media(max-width:700px){
  #clients .client-grid .client-card--afrilink img{transform:scale(1.14)!important}
}
@media(max-width:420px){
  #clients .client-grid .client-card--afrilink img{transform:scale(1.10)!important}
  #clients .client-grid .client-card--serenity img{transform:scale(1.20)!important}
}

/* Hosting: readable light cards with one shared title/price hierarchy. */
.tier-grid{gap:20px}
.tier{background:var(--white);color:var(--ink);min-width:0}
.tier h3{font-size:clamp(30px,2.9vw,44px);line-height:1.04}
.tier .price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  font-size:clamp(28px,3.1vw,44px);line-height:1.15;
}
.tier .price small{font-size:13px;font-weight:500;letter-spacing:0;white-space:nowrap}
.tier .desc{line-height:1.6}
.dark-section .tier .btn{color:var(--ink)}
.tier:hover{transform:none}
.search-helper{line-height:1.7;max-width:85ch}
.domain-name{overflow-wrap:anywhere}

/* Branding: align the process CTA with its copy, and let static questions stay still. */
.process-row > .btn{grid-column:3;justify-self:start;max-width:100%}
.process-row p,.primary-service p{line-height:1.6}
.question:hover{transform:none;background:transparent;color:inherit}

/* Articles: distinguish editorial titles from service-page display headings. */
main > .insight-page-hero > .page{max-width:900px}
.insight-page-hero h1.display-lg{
  font-size:clamp(36px,5.2vw,76px);line-height:1.04;letter-spacing:-.055em;
  max-width:22ch;text-wrap:balance;overflow-wrap:break-word;
}
.insight-page-hero .copy{font-size:clamp(17px,1.6vw,22px);line-height:1.5;max-width:66ch}
.article-meta-line{flex-wrap:wrap;row-gap:6px}
.article-preview-link:hover{opacity:1}
.article-preview-link:hover .article-read{text-decoration-thickness:3px}
.article-preview-link:focus-visible{outline-offset:5px;border-radius:4px}
.insight-reader{max-height:calc(100svh - 36px);overscroll-behavior:contain}
.insight-reader .insight-article h2{line-height:1.04}
.insight-reader .insight-article section h3:first-child{margin-top:0}
.insight-reader .insight-article section p + p{margin-top:16px}
.insight-article a,.longform-article a,.policy-section a{overflow-wrap:anywhere}

/* Contact: align the form and success state; retain the two-business-day promise. */
.contact-grid{align-items:start}
body[data-page="contact"] .contact-card{padding:clamp(22px,3.2vw,38px)}
.enquiry-confirmation h2{scroll-margin-top:110px}
.enquiry-text-link:hover{color:var(--ink);border-bottom-color:var(--orange)}
.policy-section li{line-height:1.65;margin-bottom:8px}

@media(max-width:1000px){
  .tier .desc{min-height:0}
  .process-row > .btn{grid-column:2}
}
@media(max-width:820px){
  .nav .nav-links{max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:700px){
  html{scroll-padding-top:100px}
  .field input,.field select,.field textarea,.footer .subscribe input{font-size:16px!important}
  .domain-search{padding:22px 20px}
  .domain-search .search-line{grid-template-columns:minmax(0,1fr)}
  .search-line input{width:100%;font-size:clamp(22px,6vw,36px)}
  .cookie-consent{max-height:calc(100svh - 20px);overflow-y:auto;overscroll-behavior:contain}
  body[data-page="branding"] .process-row{grid-template-columns:44px minmax(0,1fr);gap:12px}
  body[data-page="branding"] .process-row h3{font-size:clamp(28px,8.5vw,40px);line-height:1.05}
  .insight-reader{max-height:calc(100svh - 20px)}
  body[data-page="insights"] .article-preview h2{line-height:1.25!important}
}
@media(max-width:560px){
  body[data-page="contact"] .contact-card{padding:23px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}