/* Official ZYLO symbol. Preserve the supplied square artboard and clear space. */
.header .brand,.ws-header .brand,.crm-header .crm-brand{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-shrink:0;min-height:44px}
.header .brand .official-mark,.ws-header .brand .official-mark,.crm-header .crm-brand .official-mark{display:block;width:44px;height:44px;object-fit:contain;flex-shrink:0}
.header .brand>svg,.ws-header .brand>svg,.crm-header .crm-brand>svg{width:100px;height:27px;fill:#fff}
.brand-headline .title-line:first-child{font-size:clamp(106px,12.1vw,220px);line-height:.9}
.brand-headline .title-line>.brand-signature{display:flex;align-items:center;gap:.13em;color:#fff}
.hero-brand-mark{display:block;width:1em;height:1em;object-fit:contain;flex-shrink:0}
.brand-signature .brand-name{display:block;line-height:.82}
/* The original mark remains whole; short desktop views yield display size to controls. */
@media(orientation:landscape) and (min-height:541px) and (max-height:800px){
 .brand-headline .title-line:first-child{font-size:clamp(100px,min(12.1vw,20svh),160px)}
}
@media(orientation:landscape) and (min-height:541px) and (max-height:650px){
 .brand-headline .title-line:first-child{font-size:clamp(76px,13svh,90px);margin-bottom:12px}
}
@media(max-width:1100px) and (orientation:portrait){
 .header .brand .official-mark{width:36px;height:36px}.header .brand>svg{width:73px;height:23px}.header .brand{gap:6px}
 .brand-headline .title-line:first-child{font-size:clamp(64px,21.8vw,166px);margin-bottom:18px}
}
@media(max-width:700px){
 .ws-header .brand .official-mark,.crm-header .crm-brand .official-mark{width:36px;height:36px}
 .ws-header .brand>svg,.crm-header .crm-brand>svg{width:73px;height:23px}
 .ws-header .brand,.crm-header .crm-brand{gap:6px}
 .ws-header{gap:14px}
}
@media(max-width:359px){
 .header .brand>svg,.ws-header .brand>svg,.crm-header .crm-brand>svg{display:none}
 .header .brand,.ws-header .brand,.crm-header .crm-brand{min-width:44px;justify-content:center}
}
@media(orientation:landscape) and (max-height:540px){
 .header .brand .official-mark{width:34px;height:34px}.header .brand>svg{width:78px;height:22px}
 .brand-headline .title-line:first-child{font-size:78px;margin-bottom:12px}
}
@media(orientation:landscape) and (min-width:700px) and (min-height:360px) and (max-height:430px){.brand-headline .title-line:first-child{font-size:50px;margin-bottom:6px}}
@media(forced-colors:active){.official-mark,.hero-brand-mark{forced-color-adjust:none;background:#000}}

/* Editorial rhythm: expressive display type, calm and readable supporting copy. */
.description,.hero-lead,.detail-lead{color:#dedbe5;text-wrap:pretty;letter-spacing:-.008em}
.copy h1:not(.brand-headline){letter-spacing:-.035em}
.hero-copy h1,.ws-hero h1,.pricing-heading h2,.gallery-heading h2,.contact-frame h2{text-wrap:balance}
.hero-lead{max-width:54ch}
.plan-description{color:#d8d5dd;text-wrap:pretty;line-height:1.55}
.plan-card li{line-height:1.5}
.primary,.crm-button,.ws-button{letter-spacing:0}
@media(min-width:1101px) and (min-height:801px){.description{font-size:16px;line-height:1.65;max-width:47ch}}
@media(max-width:1100px) and (orientation:portrait){.description{font-size:15px;line-height:1.55}.copy h1:not(.brand-headline){line-height:1.12}}
@media(max-width:1100px) and (orientation:portrait) and (max-height:740px){.description{line-height:1.5}}
@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){.description{font-size:16px}}
@media(max-width:700px){.hero-lead{font-size:14px;line-height:1.65}.hero-copy h1,.ws-hero h1{line-height:1.15}.plan-description{font-size:14px}}