/* בגדי עבודה על חשבון המעסיק - guide page.
   Same shell and type as the other information pages (shipping, about, policy):
   Karantina/Anton SC display headline, Secular One text, paper ground, sand rules,
   brand blue only for what is actionable or numbered.
   Photos: the shop's own model photos (hero), the department page's category
   photos (what to choose), and the three objects the home page's technique
   panels are built from (branding). */
.guide-layout{max-width:1240px;width:100%;margin:auto;padding:24px 40px 65px;min-width:0}
.guide-kicker{font-size:12px;opacity:.6;margin:0;padding-bottom:14px;border-bottom:1px solid var(--color-rule)}
.guide-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 60px;align-items:end;padding:44px 0 36px}
.guide-hero h1{font:700 clamp(64px,6.6vw,98px)/.95 var(--f-display);margin:0}
.guide-h1-sub{display:block;font:400 clamp(20px,1.8vw,25px)/1.45 var(--f-text);margin-top:20px;max-width:520px}
.guide-lead{font-size:17px;line-height:1.75;margin:0 0 6px;opacity:.8;max-width:440px}

/* Four real models from the catalogue, one lineup, each a link to its product.
   The studio white multiplies into the paper, so they stand on the page instead
   of in four white boxes; the name sits on the rule they stand on. */
.guide-lineup{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:26px 0 0;border-top:1px solid var(--color-rule);background:var(--paper-background);isolation:isolate}
.guide-lineup li{min-width:0}
.guide-lineup a{display:block;color:inherit;text-decoration:none}
.guide-lineup-photo{display:block;overflow:hidden}
.guide-lineup img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;mix-blend-mode:multiply;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.guide-lineup-name{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:11px 2px 0;border-top:1px solid var(--color-rule);font-size:13px;line-height:1.5;color:var(--color-soft-foreground);transition:color var(--motion-feedback,160ms) linear}
.guide-lineup-name i{font-style:normal;flex-shrink:0;color:var(--color-primary)}
@media(hover:hover){.guide-lineup a:hover img{transform:scale(1.025)}.guide-lineup a:hover .guide-lineup-name{color:var(--color-primary)}}

.guide-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px;padding-top:44px}
.guide-nav{display:flex;flex-direction:column;align-items:start;gap:2px;position:sticky;top:100px;align-self:start;border-top:1px solid var(--color-rule);padding-top:14px}
.guide-nav h2{font-size:15px;font-weight:400;margin:0 0 8px;opacity:.6}
.guide-nav a{padding:9px 0;text-decoration:none;font-size:15px;line-height:1.4}
.guide-nav a:hover{color:var(--color-primary)}

.guide-content{min-width:0}
.guide-content section{scroll-margin-top:105px;padding:28px 0 36px;border-top:1px solid var(--color-rule)}
.guide-content section:focus{outline:none}
.guide-content h2{font-size:27px;font-weight:400;line-height:1.35;margin:0 0 16px}
.guide-content p{font-size:16px;line-height:1.8;margin:0 0 16px;max-width:680px}
.guide-content p:last-child{margin-bottom:0}
.guide-content a{color:var(--color-primary);text-underline-offset:4px}
.guide-muted{font-size:14px;opacity:.7}
.guide-text-link{display:inline-block;min-height:44px;padding-block:8px;font-size:14px}

/* Who must provide what: a two-column ledger, the sector in blue. */
.guide-cases{display:grid;grid-template-columns:minmax(200px,.85fr) minmax(0,1.5fr);margin:4px 0 22px;max-width:760px;border-top:1px solid var(--color-rule-faint)}
.guide-cases dt,.guide-cases dd{margin:0;padding:14px 0;border-bottom:1px solid var(--color-rule-faint);font-size:15px;line-height:1.7}
.guide-cases dt{color:var(--color-primary);padding-inline-end:28px}
.guide-cases dd{opacity:.85}

/* Why provide anyway: the page's one statement. The heading goes up to the
   display face, like "לבגד אחד. ולצוות שלם." on the about page, inside the quiet
   sand band the pickup box on the shipping page uses. */
.guide-content .guide-why{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:18px 44px;align-items:center;border-top:0;margin:6px 0 0;padding:36px 38px;border-radius:12px;background:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background))}
.guide-content .guide-why h2{font:700 50px/1.02 var(--f-display);margin:0}
.guide-content .guide-why p{font-size:17px;line-height:1.75;margin:0;max-width:none}
/* A band closes its own block, so the section after it needs no rule. */
.guide-content :is(.guide-why,.guide-note)+section{border-top:0;padding-top:40px}

/* What to choose: six kinds of work, each with the category photo the
   department pages use, in the same square tile. */
.guide-roles{list-style:none;padding:0;margin:10px 0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.guide-roles li{min-width:0}
.guide-role-photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#efefef;margin:0 0 14px}
.guide-role-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
/* The one shop photo in the set: its studio white takes the tile's grey, and it
   is framed as close as the others. */
.guide-role-photo.is-studio img{mix-blend-mode:multiply;transform:scale(1.2);transform-origin:50% 8%}
@media(hover:hover){.guide-role-photo:hover img{transform:scale(1.025)}.guide-role-photo.is-studio:hover img{transform:scale(1.23)}}
.guide-roles h3{font-size:18px;font-weight:400;margin:0 0 5px}
.guide-content .guide-roles p{font-size:15px;line-height:1.7;margin:0;opacity:.85}

/* Branding: the three methods side by side, named in the display face like the
   technique panels on the home page and shown by the same three objects (the
   embroidered cap, the DTF print head, the screen), each with its delivery
   time as a spec. */
.guide-methods{list-style:none;padding:26px 0 0;margin:6px 0 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--color-rule-faint)}
.guide-methods li{min-width:0;display:flex;flex-direction:column}
.guide-methods li+li{border-inline-start:1px solid var(--color-rule-faint);padding-inline-start:30px}
.guide-method-photo{--stage:164px;display:flex;align-items:flex-end;height:var(--stage);margin:0 0 22px}
/* Each file is a large transparent canvas; .guide-crop shows only the object's
   own box (--bx/--by/--bw/--bh inside a --iw x --ih canvas), --h of the stage
   tall and never wider than its column. */
.guide-crop{position:relative;display:block;flex:none;overflow:hidden;aspect-ratio:var(--bw)/var(--bh);width:min(100%,calc(var(--stage)*var(--h)*var(--bw)/var(--bh)))}
.guide-crop img{position:absolute;display:block;max-width:none;height:auto;width:calc(100%*var(--iw)/var(--bw));top:calc(-100%*var(--by)/var(--bh));left:calc(-100%*var(--bx)/var(--bw))}
.guide-methods h3{font:700 36px/1 var(--f-display);margin:0 0 12px}
.guide-content .guide-methods p{font-size:15px;line-height:1.7;margin:0 0 18px;max-width:none}
.guide-methods dl{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--color-rule-faint);font-size:13px}
.guide-methods dt{opacity:.6;margin:0 0 3px}
.guide-methods dd{margin:0;color:var(--color-primary);font-size:17px}

/* Ordering: four numbered steps, the numerals in Anton SC blue like the
   "from fabric to garment" list on the about page. */
.guide-steps{list-style:none;padding:0;margin:4px 0 22px;border-top:1px solid var(--color-rule)}
.guide-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;padding:20px 0;border-bottom:1px solid var(--color-rule)}
.guide-steps b{font:400 30px/1.15 'Anton SC',sans-serif;color:var(--color-primary);direction:ltr;text-align:center}
.guide-content .guide-steps p{margin:0;font-size:16px;line-height:1.8;max-width:640px;padding-top:4px}

/* Not legal advice: a small marked note. */
.guide-content .guide-note{border-top:0;border-inline-start:3px solid var(--color-primary);background:color-mix(in srgb,var(--color-sand-300) 13%,transparent);padding:18px 22px;margin:4px 0 0}
.guide-content .guide-note h2{font-size:17px;margin-bottom:6px}
.guide-content .guide-note p{font-size:14px;line-height:1.7;opacity:.8}

/* FAQ: the shipping page's accordions. */
.guide-faq h2{margin-bottom:10px}
.guide-faq details{padding:0;border-bottom:1px solid var(--color-rule)}
.guide-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px}
.guide-faq summary::after{content:'+';color:var(--color-primary);font-size:25px;line-height:1}
.guide-faq details[open] summary::after{content:'−'}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-content .guide-faq details p{margin:0 0 22px;font-size:15px;line-height:1.8;max-width:600px;opacity:.8}

/* Closing call: the clients page's question, the about page's sand box. */
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:44px;padding:36px;border-radius:12px;background:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background))}
.guide-cta h2{font:700 48px/1.1 var(--f-display);margin:0 0 10px}
.guide-cta p{font-size:16px;line-height:1.7;margin:0 0 14px}
.guide-cta-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.guide-cta-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-primary);text-underline-offset:5px}
.guide-page .guide-cta .submit{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:54px;margin:0;padding:15px 28px;font-size:16px;text-decoration:none;flex-shrink:0}
.guide-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

@media(max-width:900px){.guide-hero{gap:30px 36px}.guide-grid{grid-template-columns:160px minmax(0,1fr);gap:34px}.guide-content .guide-why{grid-template-columns:1fr;padding:28px}.guide-content .guide-why h2{font-size:44px}.guide-roles{gap:24px 16px}.guide-methods{gap:0 22px}.guide-methods li+li{padding-inline-start:20px}.guide-method-photo{--stage:120px}.guide-cta{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.guide-hero{display:block}.guide-lead{margin-top:22px;max-width:560px}}
@media(max-width:600px){
.guide-layout{padding:16px 16px 48px}
.guide-kicker{font-size:11px;line-height:1.6}
.guide-hero{display:block;padding:26px 0 22px}
.guide-hero h1{font-size:54px;line-height:.98}
.guide-h1-sub{font-size:19px;margin-top:14px}
.guide-lead{font-size:15px;line-height:1.7;margin-top:20px;max-width:none}
.guide-lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;padding-top:18px}
.guide-lineup img{aspect-ratio:4/5}
.guide-lineup-name{font-size:12px;padding-top:9px;gap:6px}
.guide-grid{display:block;padding-top:26px}
.guide-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:0 18px;padding:8px 0 10px;border-top:0}
.guide-nav h2{display:none}
.guide-nav a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;padding:0}
.guide-nav .motion-spy{display:none}
.guide-content section{scroll-margin-top:84px;padding:22px 0 28px}
.guide-content h2{font-size:23px}
.guide-content p{font-size:15px}
.guide-cases{grid-template-columns:1fr;margin-bottom:18px}
.guide-cases dt{padding:12px 0 2px;border-bottom:0}
.guide-cases dd{padding:0 0 12px;font-size:14px}
.guide-content .guide-why{padding:24px 20px 22px;gap:14px}
.guide-content .guide-why h2{font-size:40px}
.guide-content .guide-why p{font-size:15px}
.guide-content :is(.guide-why,.guide-note)+section{padding-top:30px}
.guide-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
.guide-role-photo{margin-bottom:10px}
.guide-roles h3{font-size:16px}
.guide-content .guide-roles p{font-size:14px}
/* The three methods become rows: the words at the start, the object at the end. */
.guide-methods{display:block;padding-top:0;border-top:0}
.guide-methods li{display:grid;grid-template-columns:minmax(0,1fr) 116px;column-gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--color-rule-faint)}
.guide-methods li+li{border-inline-start:0;padding-inline-start:0}
.guide-methods li>*{grid-column:1}
.guide-methods li>.guide-method-photo{grid-column:2;grid-row:1/span 3;--stage:88px;margin:2px 0 0;justify-content:flex-end;align-items:flex-start}
.guide-methods h3{font-size:32px}
.guide-content .guide-methods p{margin-bottom:12px}
.guide-steps li{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0}
.guide-steps b{font-size:26px}
.guide-content .guide-steps p{font-size:15px;padding-top:2px}
.guide-content .guide-note{padding:16px 18px}
.guide-faq summary{font-size:16px;padding:18px 0}
.guide-content .guide-faq details p{font-size:14px}
.guide-cta{padding:24px 20px;margin-top:30px;gap:20px}
.guide-cta h2{font-size:42px}
.guide-cta p{font-size:15px}
.guide-page .guide-cta .submit{width:100%;font-size:15px;padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){.guide-page .submit:hover{transform:none}.guide-lineup a:hover img{transform:none}.guide-role-photo:hover img{transform:scale(1)}.guide-role-photo.is-studio:hover img{transform:scale(1.2)}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .guide-hero h1{font-size:clamp(46px,5.4vw,80px);line-height:1.08}
html[lang^="en"] .guide-content .guide-why h2{font-size:38px;line-height:1.12}
html[lang^="en"] .guide-methods h3{font-size:30px;line-height:1.1}
html[lang^="en"] .guide-cta h2{font-size:clamp(34px,3.8vw,46px);line-height:1.15}
html[lang^="en"] .guide-lineup-name i{display:inline-block;transform:scaleX(-1)}
@media(max-width:600px){html[lang^="en"] .guide-hero h1{font-size:40px}html[lang^="en"] .guide-content .guide-why h2{font-size:32px}}