/* ==========================================================================
   הדפסה ולוגו על בגדי עבודה - service page (preview view)

   Shell: the cart-page header + footer, the paper ground and the type from
   theme.css. Composition borrows from the site's own pages:
     hero            about-preview (display headline, lead, photo opposite)
     side index      shipping-preview / the legal pages (site-motion.js follows it)
     three methods   the home page's technique panels (tag, name, Latin label,
                     copy, spec list), set side by side so the rows compare
     garment guide   hairline rows, the method name in the brand blue
     business box    the sand box from shipping-preview (pickup)
     questions       the shipping-preview accordion
   Photos: the theme's own job photos (film, printed tee, embroidered caps) and
   product photos from the live shop. Shop photos are shot on white, so they sit
   on the sand tile through multiply, the same tile the job photos use.
   Motion: nothing new. site-motion.js fades the sections up (.policy-content >
   section) and moves the index marker (.policy-desktop-nav).
   ========================================================================== */

.service-layout{
  --tile:color-mix(in srgb,var(--color-sand-300) 15%,var(--paper-background));
  --box:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));
  --soft:#625f58;
  max-width:1320px;width:100%;min-width:0;margin:0 auto;padding:22px 40px 72px;
}
.service-layout [dir="ltr"]{unicode-bidi:isolate}
.service-layout p a,.service-contact a{color:var(--color-primary)}
.service-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.service-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:center;padding:30px 0 64px}
.service-eyebrow{font-size:13px;color:var(--soft);margin:0 0 20px}
.service-hero h1{margin:0 0 24px;font-weight:400}
.service-h1-main{display:block;font:700 clamp(68px,6.9vw,100px)/.94 var(--f-display)}
/* the colon joins the two halves of the headline when it is read as one line;
   set on two lines in two sizes, the line break does that job */
.service-h1-colon{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.service-h1-sub{display:block;margin-top:18px;font:400 clamp(24px,2.2vw,30px)/1.35 var(--f-text)}
.service-lead{font-size:18px;line-height:1.75;max-width:540px;margin:0 0 14px}
.service-lead-more{font-size:15px;line-height:1.75;max-width:500px;margin:0 0 30px;color:var(--soft)}
.service-hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.service-page .submit{display:inline-flex;width:auto;min-height:52px;margin:0;padding:15px 30px;font-size:16px;text-decoration:none}
.service-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-primary);font-size:15px;text-underline-offset:5px}
.service-hero-art{margin:0;justify-self:center;width:100%;max-width:580px}
.service-hero-art img{display:block;width:100%;height:auto}
.service-hero-art figcaption{font-size:12px;color:var(--soft);margin:2px 0 0;text-align:center}

/* ── Index + content ──────────────────────────────────────────────────── */
.service-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:60px;align-items:start}
.service-nav{display:flex;flex-direction:column;align-items:start;gap:4px;position:sticky;top:100px;border-top:1px solid var(--color-rule);padding-top:14px}
.service-nav a{padding:11px 0;text-decoration:none;font-size:15px;transition:color var(--motion-feedback) var(--ease-out)}
.service-nav a:hover{color:var(--color-primary)}
.service-content{min-width:0}
.service-content>section{scroll-margin-top:105px;border-top:1px solid var(--color-rule);padding-top:32px}
.service-content>section+section{margin-top:68px}
.service-content section h2{font:700 clamp(40px,3.5vw,50px)/1.04 var(--f-display);margin:0 0 14px}
.section-lead{font-size:17px;line-height:1.7;margin:0 0 30px;max-width:620px}

/* ── Three methods, side by side ──────────────────────────────────────────
   Each method is one column and every part of it shares a row with the same
   part of its neighbours (subgrid), so the spec lines read across like a
   table. Where subgrid is missing the columns simply keep their own heights. */
.method-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px}
.method{display:grid;grid-template-rows:subgrid;grid-row:span 9;min-width:0}
.method-art{position:relative;margin:0 0 22px;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--tile)}
.method-art img{display:block}
.method-tag{font-size:13px;color:var(--soft);margin:0 0 8px}
.method h3{font:700 46px/1 var(--f-display);margin:0 0 6px}
.method-en{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-soft-foreground);margin:0 0 14px;text-align:right;text-align:match-parent}
.method-desc{font-size:15.5px;line-height:1.75;margin:0 0 20px}
.method-specs{grid-row:span 4;display:grid;grid-template-rows:subgrid;margin:0;border-top:1px solid var(--color-rule)}
.method-specs>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--color-rule)}
.method-specs dt{font-size:13px;color:var(--soft)}
.method-specs dd{margin:0;font-size:16px;line-height:1.4}
.method-note{font-size:14px;line-height:1.8;color:var(--color-soft-foreground);margin:22px 0 0;max-width:640px}

/* The pictures are the site's own job photographs, composed the way the home
   page leaves them at the end of each technique's animation. */
.dtf-sheet{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:1216/1846;transform:translate(-50%,-50%) rotate(-5deg)}
.dtf-sheet .film{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgb(var(--color-shadow-rgb)/.08)) drop-shadow(0 8px 10px rgb(var(--color-shadow-rgb)/.10))}
.dtf-sheet .art{position:absolute;left:50%;top:50%;width:68%;height:auto;transform:translate(-50%,-50%)}
/* shirt and print are one box, so the four separations stay registered on the
   garment at any size (numbers from screen-hero.js: print 38% of a 16:10 stage) */
.tee{position:absolute;left:50%;top:50%;width:126%;aspect-ratio:1536/1024;transform:translate(-50%,-50%)}
.tee-shirt{position:absolute;inset:0;width:100%;height:100%}
.tee-ink{position:absolute;left:30.19%;top:21.07%;width:39.62%;aspect-ratio:1}
.tee-ink img{position:absolute;inset:0;width:100%;height:100%}
.stitch-cap{position:absolute;left:50%;top:50%;width:86%;height:auto;transform:translate(-50%,-50%)}

/* ── Which garment: rules of thumb as rows, the garments beside them ──── */
.rule-list{border-top:1px solid var(--color-rule)}
.rule{display:grid;grid-template-columns:minmax(0,1fr) 444px;gap:40px;align-items:center;padding:22px 0;border-bottom:1px solid var(--color-rule)}
.rule-text{display:grid;grid-template-columns:140px minmax(0,1fr);gap:26px;align-items:baseline;margin:0;font-size:16px;line-height:1.75}
.rule-text strong{font-weight:400;font-size:24px;line-height:1.3;color:var(--color-primary)}
.rule-text--full{display:block;max-width:470px}
/* every row carries the same strip of pictures: three squares, or two wide */
.rule-thumbs{display:flex;gap:12px;justify-content:flex-end;text-decoration:none}
.rule-thumb{display:block;flex:none;width:140px;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--tile)}
.rule-thumb--wide{flex:1 1 0;width:auto;max-width:216px;height:140px;aspect-ratio:auto}
.rule-thumb img{--zoom:1;display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(var(--zoom));transition:transform var(--motion-glow) var(--ease-out)}
.rule-thumb--wide img{object-fit:contain}
/* worn photos are full length; in a small tile the garment is what matters */
.rule-thumb--torso img{--zoom:1.42;transform-origin:50% 22%}
.rule-thumb--long img{--zoom:1.16;transform-origin:50% 40%}
/* two of the shop photos have a backdrop a touch under white; lifted to white
   so every tile comes out the same sand */
.rule-thumb--lift img{filter:brightness(1.055)}
a.rule-thumb:hover img,a.rule-thumbs:hover img{transform:scale(calc(var(--zoom) * 1.04))}
.rule-note{font-size:14px;line-height:1.8;color:var(--color-soft-foreground);margin:20px 0 0}

/* ── Preparing the logo: the files, then four numbered steps ──────────── */
.logo-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;align-items:start;margin:6px 0 40px}
.logo-intro p{font-size:17px;line-height:1.75;margin:0}
.logo-intro .logo-aside{font-size:16px;border-inline-start:1px solid var(--color-rule);padding-inline-start:30px;color:var(--color-muted-foreground)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;counter-reset:step}
.steps li{position:relative;min-width:0}
.steps li::before{counter-increment:step;content:"0" counter(step);display:block;font:400 36px/1 'Anton SC',sans-serif;color:var(--color-primary);margin-bottom:16px}
/* a hairline runs from each number to the next: one order, four stations */
.steps li:not(:last-child)::after{content:'';position:absolute;top:18px;inset-inline:56px -22px;border-top:1px solid var(--color-rule-strong)}
.steps li p{margin:0;font-size:15.5px;line-height:1.7;max-width:210px}

/* ── Business orders: the sand box, the quote request, the hi-vis vest ── */
.service-content>.service-business{border-top:0;padding-top:0}
.business-box{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:center;padding:42px 46px;border-radius:12px;background:var(--box)}
.service-content .business-box h2{font-size:clamp(46px,4vw,58px);margin-bottom:16px}
.business-box p{font-size:16px;line-height:1.8;margin:0 0 14px;max-width:580px}
.business-box p:last-of-type{margin-bottom:26px}
.business-box a[href^="tel:"],.service-contact a{white-space:nowrap}
.business-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.business-photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--paper-background)}
.business-photo img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.2);transform-origin:50% 6%;transition:transform var(--motion-glow) var(--ease-out)}
.business-photo:hover img{transform:scale(1.24)}

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

.service-contact{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-top:36px}
.service-contact h2{font:400 20px/1.4 var(--f-text);margin:0}
.service-contact a{font-size:14px}

/* ── Narrow desktop and tablet ────────────────────────────────────────── */
@media(max-width:1180px){
  .service-hero{gap:40px}
  .service-grid{grid-template-columns:160px minmax(0,1fr);gap:40px}
  .method-list{column-gap:22px}
  .method h3{font-size:40px}
  .rule{grid-template-columns:minmax(0,1fr) 372px;gap:28px}
  .rule-text{display:block}
  .rule-text strong{display:block;font-size:22px;margin-bottom:4px}
  .rule-thumb{width:116px}
  .rule-thumb--wide{max-width:180px;height:116px}
  .business-box{grid-template-columns:minmax(0,1fr) 220px;gap:34px;padding:34px}
}
/* three columns no longer hold a line of copy: each method becomes a row,
   picture beside the text */
@media(max-width:940px){
  .service-layout{padding-inline:28px}
  .service-grid{grid-template-columns:150px minmax(0,1fr);gap:30px}
  .method-list{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .method{grid-row:auto;grid-template-rows:none;grid-template-columns:200px minmax(0,1fr);column-gap:26px;align-content:start}
  .method-art{grid-column:1;grid-row:1 / span 5;align-self:start;margin:0}
  .method>:not(.method-art){grid-column:2}
  .method-specs{grid-row:auto;display:block}
  .rule{grid-template-columns:minmax(0,1fr);gap:16px}
  .rule-thumbs{justify-content:flex-start}
  .logo-intro{grid-template-columns:minmax(0,1fr);gap:18px}
  .logo-intro .logo-aside{border-inline-start:0;padding-inline-start:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px}
  .steps li:nth-child(2)::after{display:none}
  /* the vest sits in the box's far corner, the headline beside it */
  .business-box{position:relative;display:block}
  .service-content .business-box h2{display:flex;align-items:center;min-height:150px;padding-inline-end:170px}
  .business-photo{position:absolute;inset-block-start:26px;inset-inline-end:26px;width:150px}
}

/* ── Phone: 16px gutters, the headline held to the width of the screen ── */
@media(max-width:600px){
  .service-layout{padding:14px 16px 48px}
  .service-hero{display:block;padding:22px 0 30px}
  .service-eyebrow{margin-bottom:14px}
  .service-hero h1{margin-bottom:20px}
  .service-h1-main{font-size:clamp(60px,19.4vw,78px);line-height:.95}
  .service-h1-sub{font-size:23px;margin-top:14px}
  .service-lead{font-size:16px;line-height:1.7;margin-bottom:12px}
  .service-lead-more{font-size:14px;line-height:1.7;margin-bottom:24px}
  .service-hero-actions{gap:18px}
  .service-page .submit{min-height:48px;padding:13px 24px;font-size:15px}
  .service-hero-art{max-width:310px;margin:26px auto 0}
  .service-grid{display:block}
  .service-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:2px 20px;padding:6px 0 12px;border-top:0}
  .service-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:13px;text-decoration:underline}
  .service-nav .motion-spy{display:none}
  .service-content>section{scroll-margin-top:84px;padding-top:24px}
  .service-content>section+section{margin-top:46px}
  .service-content section h2{font-size:40px;margin-bottom:12px}
  .section-lead{font-size:15px;margin-bottom:22px}
  .method-list{row-gap:38px}
  .method{display:block}
  .method-art{aspect-ratio:3/2;margin:0 0 18px}
  .tee{width:auto;height:108%}
  .stitch-cap{width:62%}
  .method h3{font-size:46px}
  .method-desc{font-size:15px;margin-bottom:16px}
  .method-specs>div{padding:12px 0}
  .method-specs dd{font-size:15px}
  .method-note{font-size:13px;margin-top:20px}
  .rule{padding:20px 0;gap:14px}
  .rule-text{display:block;font-size:15px}
  .rule-text strong{display:block;font-size:21px;margin-bottom:4px}
  .rule-thumbs{gap:10px}
  .rule-thumb{flex:1 1 0;width:auto;max-width:calc((100% - 20px)/3)}
  .rule-thumb--wide{max-width:calc((100% - 10px)/2);height:auto;aspect-ratio:3/2}
  .rule-note{font-size:13px;margin-top:16px}
  .logo-intro{margin:4px 0 26px;gap:12px}
  .logo-intro p{font-size:15px}
  .logo-intro .logo-aside{font-size:15px}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--color-rule)}
  .steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--color-rule)}
  .steps li::before{font-size:28px;margin:0}
  .steps li::after{display:none}
  .steps li p{font-size:15px;max-width:none}
  .business-box{padding:22px 20px 26px}
  .service-content .business-box h2{min-height:104px;padding-inline-end:116px;font-size:46px;margin-bottom:14px}
  .business-box p{font-size:15px}
  .business-box p:last-of-type{margin-bottom:22px}
  .business-actions{gap:10px 20px}
  .business-photo{inset-block-start:16px;inset-inline-end:16px;width:108px}
  .service-faq summary{font-size:16px;padding:18px 0}
  .service-faq details p{font-size:14px}
  .service-contact{gap:12px;flex-direction:column;align-items:start;padding-top:30px}
}
@media(prefers-reduced-motion:reduce){.rule-thumb img,.business-photo img,.service-nav a{transition:none}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .service-h1-main{font-size:clamp(46px,5.4vw,80px);line-height:1.06}
html[lang^="en"] .service-content section h2{font-size:clamp(34px,3vw,44px);line-height:1.12}
html[lang^="en"] .method h3{font-size:36px;line-height:1.1}
html[lang^="en"] .business-actions .service-text-link [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}