@font-face{font-family:Root;src:url('assets/fonts/pt-root-ui-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Root;src:url('assets/fonts/pt-root-ui-medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Root;src:url('assets/fonts/pt-root-ui-bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:'Golos Text';src:url('assets/fonts/golos-text-variable.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:Oswald;src:url('assets/fonts/oswald-variable.ttf') format('truetype');font-weight:200 700;font-display:swap}
:root{color-scheme:light;--paper:#f5f4f2;--orange:#f34925;--ink:#101010;--gap:clamp(12px,2svh,28px);--edge:clamp(16px,3.1vw,60px)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Root,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,:where(a.button){font:inherit;color:inherit;border:0;touch-action:manipulation;cursor:pointer;transition:transform 140ms cubic-bezier(.23,1,.32,1),color 180ms ease,background-color 180ms ease}
button:focus-visible,a.button:focus-visible{outline:2px solid #101010;outline-offset:3px;transition:none}
button:active:not(:focus-visible),a.button:active:not(:focus-visible){transform:scale(.98)}
a.button{text-decoration:none}
:where(a,button){-webkit-tap-highlight-color:transparent}
:where(a,button):focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.first-screen{max-width:1920px;margin:auto;height:100svh;min-height:600px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--gap);padding:clamp(12px,1.7svh,24px) max(var(--edge),env(safe-area-inset-right)) var(--gap) max(var(--edge),env(safe-area-inset-left))}
.first-screen{font-family:Manrope,Root,Arial,sans-serif;color:#000}
.first-screen .button{font-family:'Golos Text',Root,Arial,sans-serif}
.header .button{min-height:42px;padding:9px 16px;font-size:14px;gap:8px;border-radius:10px}
.cart-icon{width:22px;height:22px;flex:none}
.header{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:white;border-radius:22px}
.logo{display:block;width:clamp(160px,17vw,240px);height:auto}
.header-actions{display:flex;align-items:stretch;gap:16px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:14px 24px;border-radius:12px;font-weight:500;font-size:16px;line-height:1.2}
.button-muted{background:var(--paper)}
.hero{position:relative;isolation:isolate;container-type:size;min-height:0;border-radius:20px;overflow:hidden;background:#fff}
.direction-image>picture{display:contents}
.hero-visual{position:absolute;inset:0 0 0 calc(53% - 20px);display:block;overflow:hidden;border-radius:0 20px 20px 0;pointer-events:none}
.hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-panel{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:53%;height:100%;padding:clamp(24px,11.84svh,115px) clamp(24px,2.3vw,44px) 12px;border-top:clamp(8px,1.1svh,16px) solid var(--orange);border-bottom:0;border-radius:20px;background:#fff}
.hero-copy{position:relative;z-index:3}
h1{margin:0;font-size:clamp(40px,min(5.1vw,7.8svh),88px);font-weight:800;line-height:.928;letter-spacing:0}
.hero-subtitle{margin:8px 0 0;font-size:clamp(28px,min(3.6vw,5.1svh),58px);font-weight:600;line-height:.81;letter-spacing:0}
.button-primary{background:var(--orange);color:#fff;justify-content:space-between;width:min(85%,388px);margin-top:clamp(20px,4.8svh,70px);font-size:clamp(16px,2.47svh,24px);min-height:clamp(48px,7.21svh,70px);padding:10px 19px 10px 21px;border-radius:clamp(12px,1.85svh,18px)}
.first-screen .button-primary{font-weight:600}
.cta-icon{display:block;flex:none;width:clamp(28px,4.53svh,44px);height:clamp(28px,4.53svh,44px)}
.hero-nav{display:flex;flex-wrap:wrap;gap:4px 20px;position:relative;z-index:3;margin-top:18px}
.hero-nav button,.footer button{padding:8px 0;background:transparent;text-align:left;color:#696966;font-size:13px;line-height:1.25}
.bonus{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,2.2svh,32px) clamp(24px,3vw,48px);background:#fff;border-radius:20px}
.bonus-copy{min-width:0}
h2{display:flex;align-items:center;gap:4px;margin:0 0 5px;font-size:clamp(24px,2.6vw,38px);line-height:1.05;letter-spacing:-.02em;font-weight:700}
h2 img{width:1.05em;height:1.05em}
.bonus p{margin:0;font-size:clamp(16px,1.65vw,23px);line-height:1.2;font-weight:600}
.bonus p span{color:#c73a19}
.bonus-button{flex:none}
/* Updated Untitled.fig: five 260×749 strips, Oswald SemiBold 50px.
   Preserve source crop/gradient/type; only reflow the strips on smaller screens. */
.directions{position:relative;isolation:isolate;max-width:1440px;margin:auto;padding:49px max(2.5%,env(safe-area-inset-right)) 49px max(2.5%,env(safe-area-inset-left));scroll-margin-top:24px;background:transparent}
.directions .brand-space{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;display:grid;place-items:center}
.brand-space img{display:block;width:86.875%;height:auto;filter:brightness(0);opacity:.082353}
.directions h2{display:block;margin:0 0 clamp(20px,2vw,28px);font-family:Manrope,Root,Arial,sans-serif;font-size:clamp(28px,3vw,42px);font-weight:700;line-height:1.15;text-align:center;text-wrap:balance;color:#000}
.directions-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.26%;padding:0;margin:0;list-style:none}
.directions-grid li{min-width:0;container-type:inline-size}
.direction-card{display:block;position:relative;width:100%;aspect-ratio:260/749;overflow:hidden;padding:0;border-radius:5.3846cqw 5.3846cqw 0 0;background:linear-gradient(to bottom,#fff 59.1346%,rgb(153 153 153 / .4) 100%);color:#000;text-align:center}
.direction-caption{position:absolute;top:var(--label-top);left:var(--label-left);width:var(--label-width);font-family:Oswald,Arial,sans-serif;font-size:19.23077cqw;font-weight:600;line-height:.987618;letter-spacing:0;white-space:nowrap}
.direction-image{position:absolute;display:block;left:var(--image-left);top:var(--image-top);width:var(--image-width);aspect-ratio:1;overflow:hidden;pointer-events:none}
.direction-image img{display:block;width:100%;height:100%;max-width:none;transform:translate(var(--crop-x,0%),var(--crop-y,0%))}
.category-household{--label-top:13.7517%;--label-left:16.5385%;--label-width:67.3077%;--image-left:-61.1538%;--image-top:31.6422%;--image-width:241.1538%}
.category-kindergartens{--label-top:14.4192%;--label-left:15.7692%;--label-width:71.1538%;--image-left:-35.3846%;--image-top:39.2523%;--image-width:173.8462%;--crop-x:-19.14246%;--crop-y:2.08070%}
.category-schools{--label-top:14.4192%;--label-left:20%;--label-width:65.3846%;--image-left:-6.1538%;--image-top:37.5167%;--image-width:226.9231%}
.category-construction{--label-top:11.482%;--label-left:0%;--label-width:99.6154%;--image-left:0%;--image-top:28.7049%;--image-width:220%;--crop-x:-52.16307%;--crop-y:12.17138%}
.category-offices{--label-top:14.8198%;--label-left:18.4615%;--label-width:62.6923%;--image-left:-94.2308%;--image-top:28.7049%;--image-width:242.6923%}
@media(max-width:1000px){.directions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(max-width:600px){
  .directions{padding:20px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left))}
  /* Only phones: all five catalogs stack vertically like the approved Offices row. */
  .directions-grid{grid-template-columns:1fr;gap:12px}
  .direction-card{display:grid;grid-template-columns:minmax(0,1fr) 46%;align-items:center;gap:12px;height:clamp(168px,48vw,220px);aspect-ratio:auto;padding:12px 18px;border-radius:10px 10px 0 0;background:linear-gradient(110deg,#fff 38%,rgb(153 153 153 / .4) 100%);text-align:left}
  .direction-caption{position:static;width:auto;font-size:clamp(24px,6.5vw,36px);line-height:1.08}
  .direction-image{position:relative;inset:auto;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:visible}
  .direction-image img{object-fit:contain;transform:scale(var(--mobile-object-scale,1))}
  .category-household{--mobile-object-scale:1.18}
  .category-kindergartens,.category-offices{--mobile-object-scale:1.08}
}
.footer{max-width:1920px;margin:auto;padding:32px var(--edge) max(16px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:white}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;min-height:190px}
.wordmark{width:212px;height:63px;background:url('assets/brand/leader-logo.svg') right center / 345px auto no-repeat}
.policies{display:flex;flex-direction:column;align-items:flex-start;margin-top:12px}
.policies button{padding:4px 0;min-height:24px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.legal{display:flex;flex-wrap:wrap;gap:4px 12px;margin:32px 0 0;color:#696966;font-size:12px;line-height:1.4}
@media(min-width:1800px){.first-screen{max-height:1200px}}
@media(max-width:1000px){
  .header{padding:12px 18px}.header-actions{gap:10px}.button{padding:13px 18px}
  .hero-panel{width:57%;padding-left:24px;padding-right:18px}
  .hero-visual{left:calc(57% - 20px)}
  .hero-nav{gap:0 12px}.hero-nav button{font-size:12px}
  .bonus{padding:20px 24px;gap:16px}.bonus p{font-size:16px}.bonus-button{font-size:14px}
}
@media(max-width:600px){
  :root{--edge:12px;--gap:10px}
  .first-screen{padding-top:max(10px,env(safe-area-inset-top));height:auto;min-height:0;grid-template-rows:auto auto auto}
  .header{padding:10px 12px;gap:8px;border-radius:14px}
  .logo{width:112px}.header-actions{gap:6px}
  .button{min-height:40px;padding:10px 12px;border-radius:9px;font-size:13px;gap:6px}
  .header .button{min-height:40px;padding:10px 12px;font-size:13px;gap:6px;border-radius:9px}.header .cart{padding:10px}
  .cart span{display:none}.cart{padding:10px}.cart svg{width:20px;height:20px}
  .hero{display:flex;flex-direction:column;container-type:normal;border-radius:14px}
  .hero-visual{display:none}
  .hero-panel{width:100%;height:auto;padding:clamp(12px,2svh,22px) 20px 6px;border-top-width:7px;border-radius:14px;flex:none}
  h1{font-size:clamp(30px,5.2svh,46px);line-height:.96}
  .hero-subtitle{font-size:clamp(20px,3.4svh,30px);line-height:1}
  .button-primary{width:206px;margin-top:clamp(10px,1.8svh,18px);min-height:40px;padding:6px 14px;font-size:14px}
  .cta-icon{width:28px;height:28px}
  .hero-nav{gap:0 16px;margin-top:4px}.hero-nav button{font-size:11px;padding:7px 0}
  .bonus{padding:14px 16px;border-radius:14px;display:grid;grid-template-columns:1fr;gap:10px}
  h2{font-size:24px;margin-bottom:5px}.bonus p{font-size:14px;line-height:1.2}.desktop-break{display:none}
  .bonus-button{justify-self:start;min-height:36px;padding:9px 12px;font-size:12px}
  .footer{padding:24px 20px 20px;border-radius:18px 18px 0 0}.footer-main{grid-template-columns:1fr;gap:26px;min-height:0}
  .wordmark{width:152px;height:48px;background-size:248px auto}
  .footer-nav{flex-direction:row;flex-wrap:wrap;gap:0 20px}.legal{display:grid;margin-top:28px}
}
@media(max-width:600px) and (max-height:700px){
  .hero-panel{padding-top:12px;padding-bottom:2px}
  h1{font-size:30px}.hero-subtitle{font-size:21px}.button-primary{margin-top:10px;min-height:36px;padding-top:6px;padding-bottom:6px}.cta-icon{width:24px;height:24px}
  .hero-nav button{font-size:10px;padding:7px 0}.hero-nav{gap:0 12px}
  .bonus{padding:12px 14px;gap:8px}h2{font-size:22px}.bonus p{font-size:13px}.bonus-button{min-height:30px;padding:8px 10px}
}
@media(min-width:601px) and (max-height:600px){
  :root{--gap:8px;--edge:16px}
  .first-screen{min-height:360px;padding-top:8px;padding-bottom:8px}
  .header{padding:8px 14px;border-radius:12px}.logo{width:130px}.button{min-height:34px;padding:8px 14px;font-size:13px}
  .header .button{min-height:36px;padding:8px 12px;font-size:13px}.cart-icon{width:22px;height:22px}
  .hero{border-radius:12px}.hero-panel{padding:14px 22px 3px;border-top-width:5px;border-radius:12px}.hero-visual{border-radius:0 12px 12px 0}
  h1{font-size:32px}.hero-subtitle{font-size:22px}.button-primary{margin-top:12px;width:220px}
  .hero-nav{margin-top:3px;gap:0 16px}.hero-nav button{font-size:10px;padding:6px 0}
  .bonus{padding:10px 20px;border-radius:12px}h2{font-size:22px;margin-bottom:3px}.bonus p{font-size:13px}
}
/* Keep tall/narrow layouts focused on the copy, without an empty photo row. */
@container (min-width:601px) and (max-aspect-ratio:9/5){
  .hero-panel{width:100%;height:100%;padding:24px 28px 10px}
  .hero-visual{display:none}
  .hero-copy .button-primary{margin-top:20px}
  .hero-nav{margin-top:10px}
}
/* Motion adds no layout height; source Frame 7 supplies the final bonus state. */
.bonus{overflow:hidden}
.bonus-line{position:absolute;inset:auto 0 0;height:clamp(5px,1.18vw,17px);background:#000;transform:scaleX(0);transform-origin:left center;transition:transform 160ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.bonus-button{position:static;transition:background-color 120ms ease,color 120ms ease}
/* Stretch this single native button's hit area across the card, without nested controls. */
.bonus-button::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}
.bonus-button:active:not(:focus-visible){transform:none}
.bonus-button:focus-visible{outline-offset:2px}
.bonus-label{font-weight:700}
.direction-image{transform:scale(1);translate:0 0;opacity:1;transition:transform 240ms cubic-bezier(.23,1,.32,1),opacity 400ms ease var(--entry-delay,0ms),translate 480ms cubic-bezier(.23,1,.32,1) var(--entry-delay,0ms)}
.motion-pending .direction-image{opacity:0;translate:0 14px}
/* On phones, show decoded images immediately instead of a pale staggered fade. */
@media(max-width:600px){.direction-card .direction-image{opacity:1;translate:0 0;transition:none}}
.direction-card:focus-visible .direction-image{opacity:1;translate:0 0;transition:none}
.direction-card:active:not(:focus-visible){transform:none}
.hero-nav button,.footer-nav button{min-height:24px}
@media(hover:hover) and (pointer:fine){
  .button-muted:not(.bonus-button):hover{background:#e9e8e5}
  .button-primary:hover{background:#dc3d1c}
  .bonus:hover .bonus-line{transform:scaleX(1);transition-duration:320ms}
  .bonus:hover .bonus-button{background-color:#f85122;color:#fff;transition:none}
  .hero-nav button:hover,.footer button:hover{color:#101010}
  .direction-card:hover .direction-image{transform:scale(1.045)}
  .direction-card:active .direction-image{transform:scale(1.025)}
}
/* Keyboard focus is immediate; touch has press feedback without sticky hover. */
.bonus:has(.bonus-button:focus-visible) .bonus-line{transform:scaleX(1);transition:none}
.bonus .bonus-button:focus-visible{background-color:#f85122;color:#fff;transition:none}
@media(hover:none){.bonus-button:active{background-color:#f85122;color:#fff;transition:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto;transition:none!important;animation:none!important}
  button:active:not(:focus-visible){transform:none}
  .direction-card .direction-image,.direction-card:hover .direction-image,.direction-card:active .direction-image{opacity:1;translate:0 0;transform:none}
}