/* Karmiel local landing page. Tokens, shell and motion come from the shared files; this sheet lays out one page.
   Motion is the site's own: the h1 rises on load (.information-layout h1 in site-motion.css), every
   .policy-content > section fades up as it scrolls in, and .policy-desktop-nav gets the marker that follows
   the reader. Those class names are the hooks site-motion.js already watches, so the page needs no script. */
.karmiel-page{--karmiel-tile:color-mix(in srgb,var(--color-sand-300) 14%,var(--paper-background))}
.karmiel-layout{max-width:1240px;width:100%;min-width:0;margin:auto;padding:24px 40px 72px}

/* Hero: the claim on the right, the one object that proves it on the left (the embroidered cap, the home page's own). */
.karmiel-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:36px 0 48px}
.karmiel-hero h1{font:700 clamp(58px,6.3vw,92px)/.96 var(--f-display);margin:0 0 26px}
.karmiel-lead{font-size:21px;line-height:1.6;margin:0 0 14px;max-width:580px}
.karmiel-sub{font-size:16px;line-height:1.8;margin:0 0 30px;max-width:520px;color:var(--color-muted-foreground)}
.karmiel-hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.karmiel-page .submit{display:inline-flex;width:auto;margin:0;min-height:50px;padding:14px 26px;gap:12px;font-size:15px;line-height:1;text-decoration:none}
.karmiel-text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--color-primary);font-size:15px;text-underline-offset:5px}
.karmiel-hero-art{margin:0;text-align:center}
.karmiel-hero-art img{display:block;width:112%;max-width:none;height:auto;margin:0 -6%}
.karmiel-hero-art figcaption{font-size:13px;line-height:1.6;color:var(--color-soft-foreground);margin:2px auto 0}

/* Four facts from the text, set like the about page's values row. */
.karmiel-facts{list-style:none;margin:0 0 56px;padding:28px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-block:1px solid var(--color-rule)}
.karmiel-facts li{display:flex;flex-direction:column;gap:6px}
.karmiel-facts strong{font-weight:400;font-size:21px;line-height:1.3}
.karmiel-facts span{font-size:14px;line-height:1.6;color:var(--color-soft-foreground);text-wrap:pretty}

/* Side index + content, the information-page grid. */
.karmiel-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px;align-items:start}
.karmiel-nav{display:flex;flex-direction:column;align-items:start;gap:2px;position:sticky;top:100px;border-top:1px solid var(--color-rule);padding-top:14px}
.karmiel-nav a{padding:10px 0;text-decoration:none;font-size:15px;line-height:1.4}
.karmiel-nav a:hover{color:var(--color-primary)}
.karmiel-content{min-width:0}
.karmiel-content section{scroll-margin-top:105px;padding:30px 0 54px;border-top:1px solid var(--color-rule)}
.karmiel-content section:focus{outline:none}
.karmiel-content h2{font:700 clamp(38px,3.5vw,48px)/1.08 var(--f-display);margin:0 0 16px}
.karmiel-content h3{font-size:22px;font-weight:400;line-height:1.35;margin:0 0 8px}
.karmiel-intro{font-size:17px;line-height:1.75;margin:0 0 28px;max-width:660px;text-wrap:pretty}
.karmiel-content a:not(.submit){color:var(--color-primary);text-underline-offset:4px}
.karmiel-num{font:400 21px/1.5 'Anton SC',sans-serif;color:var(--color-primary)}

/* What you can order: the catalogue's own category cutouts, one per card. They are square and run off
   their own bottom edge, so each sits whole in a square tile (contain, never cropped). */
.karmiel-cards{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.karmiel-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.karmiel-card figure{margin:0;aspect-ratio:1;border-radius:10px;background:var(--karmiel-tile)}
.karmiel-card img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;transform-origin:50% 100%;transition:transform .35s var(--ease-out)}
/* The card's first link also covers its photo, so the tile is one tap target without a second link for readers. */
.karmiel-card p a:first-child::after{content:'';position:absolute;inset:0 0 auto;aspect-ratio:1;border-radius:10px}
@media(hover:hover){.karmiel-card:has(p a:first-child:hover) img{transform:scale(1.03)}}
.karmiel-card p{margin:0;font-size:16px;line-height:1.65;text-wrap:pretty}
.karmiel-note{font-size:14px;line-height:1.7;margin:0;max-width:560px;color:var(--color-soft-foreground)}

/* Branding: three methods, each beside a real job from the home page (DTF film, four-colour screen
   print, embroidered cap). The spec columns line up down the list, so it also reads as a comparison. */
.karmiel-methods{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-rule)}
.karmiel-method{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px 24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--color-rule)}
.karmiel-method-copy{position:relative;min-width:0;padding-inline:46px 16px}
.karmiel-method-copy>.karmiel-num{position:absolute;inset-inline-start:0;top:2px;width:24px;text-align:center}
.karmiel-method h3{font-size:26px;margin-bottom:10px}
.karmiel-method-copy>p{margin:0 0 20px;font-size:16px;line-height:1.75;max-width:440px}
.karmiel-specs{display:grid;grid-template-columns:118px 148px minmax(0,1fr);gap:10px 18px;margin:0}
.karmiel-specs div{display:flex;flex-direction:column;gap:2px;min-width:0}
.karmiel-specs dt{font-size:12px;color:var(--color-soft-foreground)}
.karmiel-specs dd{margin:0;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
.karmiel-method-art{position:relative;margin:0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--karmiel-tile)}
.karmiel-method-art img{display:block;max-width:none}
/* DTF: the transfer film with a real job printed on it, as on the home page (art centred at 68% of the sheet). */
.karmiel-sheet{position:absolute;left:50%;top:8%;width:64%;aspect-ratio:1216/1846;transform:translateX(-50%) rotate(-4deg)}
.karmiel-sheet-film{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 3px var(--film-shadow-near)) drop-shadow(0 9px 20px var(--film-shadow-far))}
.karmiel-sheet-art{position:absolute;left:50%;top:50%;width:68%;height:auto;transform:translate(-50%,-50%);transition:transform .5s var(--ease-out)}
/* Screen print: the shirt and its four separations in one box, in the home page's own proportions
   (16:10 stage, garment 96% high, print box 38% wide at 20% from the top). */
.karmiel-press{position:absolute;left:50%;top:50%;width:122%;aspect-ratio:16/10;transform:translate(-50%,-50%);transition:transform .5s var(--ease-out)}
.karmiel-press-shirt{position:absolute;left:50%;top:49.6%;height:102.3%;width:auto;transform:translate(-50%,-50%)}
.karmiel-press-print{position:absolute;left:50%;top:20%;width:38%;aspect-ratio:1;transform:translateX(-50%)}
.karmiel-press-print img{position:absolute;inset:0;width:100%;height:100%}
/* Embroidery: the stitched cap, close enough to see the thread. */
.karmiel-stitch{position:absolute;left:50%;top:50%;width:112%;height:auto;transform:translate(-50%,-47%);transition:transform .5s var(--ease-out)}
/* The home page's own hover: the printed piece grows a little, its ground stays put. */
@media(hover:hover){
.karmiel-method-art:hover .karmiel-sheet-art{transform:translate(-50%,-50%) scale(1.07)}
.karmiel-method-art:hover .karmiel-press{transform:translate(-50%,-50%) scale(1.05)}
.karmiel-method-art:hover .karmiel-stitch{transform:translate(-50%,-47%) scale(1.04)}
}
.karmiel-method-note{font-size:15px;line-height:1.75;margin:24px 0 0;max-width:620px;color:var(--color-muted-foreground)}

/* How to order: the paragraph's own clauses as four numbered steps on a running stitch (the about page's thread). */
.karmiel-steps{list-style:none;margin:14px 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr;gap:0 28px;position:relative}
.karmiel-steps::before{content:'';position:absolute;inset-inline:0;top:15px;height:1.5px;background:repeating-linear-gradient(to left,var(--color-primary) 0 5px,transparent 5px 9px);opacity:.6}
.karmiel-steps li{position:relative;min-width:0}
.karmiel-steps .karmiel-num{display:inline-block;position:relative;z-index:1;padding-inline:12px;margin-inline:-12px;background:var(--color-background,var(--paper-background))}
.karmiel-steps li:last-child::before{content:'';position:absolute;inset-block-start:0;inset-inline:0 -1px;height:32px;background:var(--color-background,var(--paper-background))}
.karmiel-steps h3{font-size:18px;line-height:1.5;margin:10px 0 6px;text-wrap:balance}
.karmiel-steps p{font-size:14px;line-height:1.7;margin:0;color:var(--color-soft-foreground);text-wrap:pretty}
.karmiel-business{font-size:16px;line-height:1.7;margin:0}

/* Delivery or pickup: two options side by side, with the checkout's own two icons. */
.karmiel-delivery-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:6px 0 24px}
.karmiel-delivery-facts>div{padding:22px 24px 24px;border:1px solid var(--color-rule);border-radius:10px}
.karmiel-delivery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px}
.karmiel-delivery-facts h3{font-size:20px;margin:0}
.karmiel-delivery-facts p{font-size:15px;line-height:1.7;margin:0;color:var(--color-muted-foreground)}
.karmiel-icon{display:block;flex:none;width:28px;height:28px;background:var(--color-primary);mask:var(--karmiel-icon) center/contain no-repeat;-webkit-mask:var(--karmiel-icon) center/contain no-repeat}
.karmiel-icon--truck{--karmiel-icon:url('assets/icons/lucide/truck.svg')}
.karmiel-icon--store{--karmiel-icon:url('assets/icons/lucide/store.svg')}
.karmiel-delivery-note{font-size:15px;line-height:1.75;margin:0;max-width:660px;text-wrap:pretty}
.karmiel-more{display:block;margin-top:4px}

/* The factory shop: the shipping page's pickup panel and its address badge, with the facts set as a short list. */
.karmiel-visit{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:24px 44px;padding:30px 32px 32px;margin:6px 0 30px;border-radius:12px;background:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background))}
.karmiel-visit-facts{margin:0;min-width:0}
.karmiel-visit-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--color-rule)}
.karmiel-visit-facts>div:first-child{padding-top:0}
.karmiel-visit-facts dt{font-size:13px;line-height:1.7;color:var(--color-soft-foreground);padding-top:4px}
.karmiel-visit-facts dd{margin:0;font-size:16px;line-height:1.75;text-wrap:balance}
.karmiel-visit-actions{grid-column:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.karmiel-address-art{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--color-primary);border-radius:7px;padding:18px 12px;color:var(--color-primary);transform:rotate(-4deg)}
.karmiel-address-art span{font-size:21px}
.karmiel-address-art strong{font:400 90px/1.15 'Anton SC',sans-serif}
.karmiel-address-art small{font-size:16px}
.karmiel-family{font-size:18px;line-height:1.8;margin:0;max-width:680px}

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

/* Closing call: the question, the phone, the quote button and the way into the shop. */
.karmiel-content section.karmiel-cta{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;margin-top:56px;padding:38px 40px 40px;border:0;border-radius:12px;background:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background))}
.karmiel-cta h2{font:700 54px/1.1 var(--f-display);margin:0 0 6px}
.karmiel-cta-copy>a{font-size:15px}
.karmiel-cta-actions{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:270px}
.karmiel-page .karmiel-cta-actions .submit{width:100%;min-height:54px;font-size:16px}
.karmiel-cta-links{display:flex;align-items:center;justify-content:center;gap:4px 22px;flex-wrap:wrap}
.karmiel-cta-links .karmiel-text-link{font-size:14px}

.karmiel-nowrap,.karmiel-page a[href^="tel:"]{white-space:nowrap}
.karmiel-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

@media(max-width:1100px){
.karmiel-method{grid-template-columns:minmax(0,1fr) 260px}
.karmiel-specs{grid-template-columns:104px minmax(0,1fr)}
.karmiel-specs div:nth-child(3){grid-column:1/-1}
}
@media(max-width:900px){
.karmiel-hero{gap:30px}
.karmiel-hero h1{font-size:clamp(50px,6.6vw,58px)}
.karmiel-grid{grid-template-columns:150px minmax(0,1fr);gap:34px}
.karmiel-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.karmiel-method{grid-template-columns:minmax(0,1fr);gap:18px}
.karmiel-method-art{grid-row:1;aspect-ratio:16/10}
.karmiel-press{width:104%}
.karmiel-sheet{width:48%;top:7%}
.karmiel-steps{grid-template-columns:1fr 1fr;gap:26px 24px}
.karmiel-steps::before,.karmiel-steps li:last-child::before{display:none}
.karmiel-steps .karmiel-num{padding:0;margin:0}
.karmiel-visit{grid-template-columns:1fr;padding:24px}
.karmiel-address-art{display:none}
}
@media(max-width:760px){
.karmiel-hero{display:block}
.karmiel-hero-art{margin-top:24px}
.karmiel-hero-art img{width:100%;max-width:340px;margin:0 auto}
}
@media(max-width:600px){
.karmiel-layout{padding:14px 16px 48px}
.karmiel-hero{padding:18px 0 28px}
.karmiel-hero h1{font-size:clamp(40px,13.6vw,54px);line-height:.98;margin-bottom:18px}
.karmiel-lead{font-size:18px;line-height:1.6}
.karmiel-sub{font-size:15px;margin-bottom:22px}
.karmiel-hero-actions{gap:10px 22px}
.karmiel-page .submit{font-size:14px;padding:13px 20px}
.karmiel-hero-art{margin-top:22px}
.karmiel-hero-art img{max-width:310px}
.karmiel-facts{grid-template-columns:1fr 1fr;gap:20px 18px;padding:22px 0;margin-bottom:28px}
.karmiel-facts strong{font-size:19px}
.karmiel-facts span{font-size:13px}
.karmiel-grid{display:block}
.karmiel-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:0 18px;padding:4px 0 10px;border-top:0}
.karmiel-nav a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline}
.karmiel-nav .motion-spy{display:none}
.karmiel-content section{scroll-margin-top:84px;padding:24px 0 38px}
.karmiel-content h2{font-size:38px}
.karmiel-content h3{font-size:20px}
.karmiel-intro{font-size:15px;line-height:1.75;margin-bottom:22px}
.karmiel-cards{gap:22px 14px}
.karmiel-card{gap:10px}
.karmiel-card p{font-size:14px;line-height:1.6}
.karmiel-note{font-size:13px}
.karmiel-method{gap:16px;padding:22px 0 24px}
.karmiel-method-copy{padding-inline:38px 0}
.karmiel-method-copy>.karmiel-num{top:0}
.karmiel-method h3{font-size:22px;margin-bottom:8px}
.karmiel-method-copy>p{font-size:15px;margin-bottom:16px}
.karmiel-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.karmiel-specs dd{font-size:15px}
.karmiel-method-note{font-size:14px;margin-top:20px}
.karmiel-steps{grid-template-columns:1fr;gap:0;margin:4px 0 24px}
.karmiel-steps::before{display:block;inset-inline:auto;inset-inline-start:15px;top:12px;bottom:26px;width:1.5px;height:auto;background:repeating-linear-gradient(to bottom,var(--color-primary) 0 5px,transparent 5px 9px)}
.karmiel-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 14px;padding:0 0 20px}
.karmiel-steps li:last-child{padding-bottom:0}
.karmiel-steps .karmiel-num{font-size:18px;text-align:center;padding:4px 0;margin:0;grid-row:1/span 2;align-self:start}
.karmiel-steps h3{font-size:17px;margin:4px 0 4px;text-wrap:pretty}
.karmiel-steps p{grid-column:2;font-size:14px}
.karmiel-business{font-size:15px}
.karmiel-delivery-facts{grid-template-columns:1fr;gap:14px}
.karmiel-delivery-facts>div{padding:18px 18px 20px}
.karmiel-delivery-facts p,.karmiel-delivery-note{font-size:14px}
.karmiel-visit{padding:20px 18px 22px;margin-bottom:24px;gap:20px}
.karmiel-visit-facts>div{grid-template-columns:1fr;gap:2px;padding:12px 0}
.karmiel-visit-facts dt{padding-top:0;font-size:12px}
.karmiel-visit-facts dd{font-size:15px}
.karmiel-family{font-size:16px}
.karmiel-faq summary{font-size:16px;padding:16px 0}
.karmiel-faq details p{font-size:14px}
.karmiel-content section.karmiel-cta{flex-direction:column;align-items:stretch;gap:20px;padding:24px 20px 14px;margin-top:40px}
.karmiel-cta h2{font-size:44px}
.karmiel-cta-actions{align-items:stretch;min-width:0}
}
@media(max-height:700px) and (min-width:601px){.karmiel-nav{position:static}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .karmiel-hero h1{font-size:clamp(46px,5.6vw,80px);line-height:1.06}
html[lang^="en"] .karmiel-content h2,html[lang^="en"] .karmiel-cta h2{font-size:clamp(30px,3vw,40px);line-height:1.15}
@media(max-width:600px){html[lang^="en"] .karmiel-hero h1{font-size:42px}}