*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--font-body-size);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-tomato);outline-offset:3px}

/* shell: one content width, one gutter per breakpoint */
.wrap{width:100%;max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter);display:flex;flex-direction:column}
.section{display:flex;flex-direction:column;padding-block:var(--space-8)}

/* type */
.eyebrow{font-size:var(--font-eyebrow);letter-spacing:.14em;color:var(--color-muted)}
.h1,.h2{font-family:var(--font-display);font-weight:300;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:var(--font-h1)} .h2{font-size:var(--font-h2)}
.h1 b,.h2 b{font-weight:700;display:block}
.h3{font-family:var(--font-display);font-weight:600;font-size:var(--font-h3);line-height:1.2}
.lead{font-size:var(--font-lead);line-height:1.55;max-width:34em}
.muted{color:var(--color-muted)}
.head{display:flex;flex-direction:column;gap:var(--space-2)}

/* pill buttons with a circled arrow (Shahar's button) */
.btns{display:flex;gap:var(--space-2);flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;border-radius:var(--radius-pill);font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--color-ink);background:transparent;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.pill .ar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-ink);color:var(--color-paper);transition:transform .25s}
.pill .ar svg{width:16px;height:16px}
.pill:hover .ar{transform:rotate(-45deg)}
.pill.solid{background:var(--color-ink);color:var(--color-paper)}
.pill.solid .ar{background:var(--color-paper);color:var(--color-ink)}
.pill.light{border-color:var(--color-paper);color:var(--color-paper)}
.pill.light .ar{background:var(--color-paper);color:var(--color-ink)}
.pill.green{background:#1F7A4D;border-color:#1F7A4D;color:#fff}
.pill.green .ar{background:#fff;color:#1F7A4D}

/* header */
.site-head{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-3)}
.site-head .logo{width:104px;color:var(--color-ink)}
.nav{display:flex;gap:var(--space-4);font-size:16px}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
@media (max-width:820px){.nav{display:none}}

/* hero: inset sand card, cream silhouettes cropped at both edges, text in the middle */
.hero{padding-inline:20px;display:flex}
.hero-card{width:100%;background:var(--color-sand);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--space-4);overflow:hidden;min-height:640px}
.hero-text{flex:1.3 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);min-width:0;padding-block:var(--space-7)}
.hero-text .lead{max-width:30em}
.hero-text .btns{justify-content:center}
.hero-col{flex:1 1 0;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;align-self:stretch;justify-content:space-between}
.hero-col svg{width:118%;max-width:none;flex:0 0 auto}
#heroRight svg{margin-right:-32%} #heroLeft svg{margin-left:-32%}
@media (max-width:900px){.hero-card{flex-direction:column;min-height:0}.hero-col{flex-direction:row;align-self:stretch;height:180px;overflow:hidden}.hero-col svg{width:46%}#heroRight svg,#heroLeft svg{margin:0}.hero-text{padding:var(--space-3) var(--space-3)}}

/* tools strip */
.strip{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2);scrollbar-width:thin}
.tool-card{flex:0 0 300px;scroll-snap-align:start;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--color-paper);border:1px solid var(--color-line)}
.tool-card .art{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(var(--color-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-line) 1px,transparent 1px);background-size:24px 24px;background-position:center;border-radius:var(--radius-sm);opacity:.98}
.tool-card .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-1)}
.tool-card .num{font-size:var(--font-eyebrow);letter-spacing:.08em;color:var(--color-muted)}
.tool-card p{font-size:var(--font-small);line-height:1.5;color:var(--color-muted)}
.tool-card a{font-weight:600;font-size:var(--font-small)}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5)}

/* steps on a line */
.steps{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.step{flex:1 1 0;display:flex;flex-direction:column;gap:var(--space-1);border-top:2px solid var(--color-ink);padding-top:var(--space-2);min-width:0}
.step .n{font-family:var(--font-display);font-size:15px;color:var(--color-muted)}
.step p{font-size:var(--font-small);color:var(--color-muted)}
@media (max-width:820px){.steps{flex-direction:column}}
.split{display:flex;gap:var(--space-6);align-items:flex-end}
.split > *{flex:1 1 0;min-width:0}
@media (max-width:820px){.split{flex-direction:column;align-items:stretch}}

/* studio */
.studio{background:var(--color-sand);border-radius:var(--radius-lg);display:flex;gap:var(--space-5);padding:var(--space-5)}
.stage{flex:1.2 1 0;min-width:0;background-color:var(--color-paper);background-image:linear-gradient(rgba(221,213,200,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(221,213,200,.55) 1px,transparent 1px);background-size:24px 24px;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:stretch;padding:var(--space-3);gap:var(--space-2)}
.stage-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-small);color:var(--color-muted)}
.stage-top b{color:var(--color-ink);font-family:var(--font-display)}
.stage #preview{display:flex;justify-content:center}
.stage svg{width:100%;max-width:480px;height:auto;aspect-ratio:1/1}
.stage-actions{display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.panel{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.ctrl{display:flex;flex-direction:column;gap:var(--space-1)}
.ctrl > .lbl{font-weight:600;font-size:16px;display:flex;justify-content:space-between}
.ctrl > .lbl span{font-weight:400;color:var(--color-muted)}
.choices{display:flex;gap:var(--space-1);flex-wrap:wrap}
.choice{border:1.5px solid var(--color-line);background:var(--color-paper);border-radius:var(--radius-pill);padding:8px 16px;font-size:15px;cursor:pointer}
.choice[aria-pressed="true"]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper)}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--color-paper);box-shadow:0 0 0 1.5px var(--color-line);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--color-ink)}
input[type=range]{width:100%;accent-color:var(--color-ink)}
.text-in{border:1.5px solid var(--color-line);background:var(--color-paper);border-radius:var(--radius-sm);padding:12px 16px;height:48px}
.upload{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.upload label{cursor:pointer}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.note{font-size:var(--font-small);color:var(--color-muted)}
.hide{display:none!important}
@media (max-width:900px){.studio{flex-direction:column;padding:var(--space-2)}}

/* dark band with a giant watermark word */
.band{background:var(--color-sand);color:var(--color-ink);border-radius:var(--radius-lg);margin-inline:20px;display:flex;flex-direction:column;overflow:hidden}
.band .wrap{padding-block:var(--space-8);gap:var(--space-6)}
.watermark{font-family:var(--font-display);font-weight:700;font-size:clamp(140px,24vw,340px);line-height:.8;color:var(--color-cream);text-align:center;margin-bottom:calc(var(--space-7) * -1.4)}
.band .h2{text-align:center;max-width:16em;align-self:center}
.gallery{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
.gallery figure{margin:0;flex:0 1 180px;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);background:transparent;border-radius:var(--radius-md);padding:var(--space-2)}
.gallery figcaption{font-size:13px;letter-spacing:.08em;color:var(--color-muted)}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;padding-block:var(--space-6) var(--space-4)}
.foot .logo{width:150px}
.foot-cols{display:flex;gap:var(--space-6);flex-wrap:wrap;font-size:var(--font-small)}
.foot-cols div{display:flex;flex-direction:column;gap:6px}
.foot-cols b{font-family:var(--font-display);font-weight:600}
.legal{border-top:1px solid var(--color-line);padding-block:var(--space-2);font-size:13px;color:var(--color-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:640px){.gallery figure{flex:0 1 calc(50% - 8px)} .hero-tools .t2{transform:translateY(-24px)}}

/* order form */
.order,.order-done{display:flex;flex-direction:column;gap:var(--space-2);border-top:1.5px solid var(--color-line);padding-top:var(--space-4)}
.order-row{display:flex;gap:var(--space-2)}
.order-row > *{flex:1 1 0;min-width:0}
@media (max-width:640px){.order-row{flex-direction:column}}
textarea.text-in{height:auto;min-height:96px;resize:vertical;line-height:1.5}
.text-in[aria-invalid="true"]{border-color:var(--color-tomato)}
.form-error{color:#B3321A;font-size:var(--font-small)}

.swatch.none{background:var(--color-paper);position:relative;overflow:hidden}
.swatch.none::after{content:"";display:block;width:140%;height:1.5px;background:var(--color-muted);transform:rotate(-45deg) translate(-12%,0);transform-origin:center}

@media (min-width:901px){.stage{position:sticky;top:24px;align-self:flex-start}}

/* technical drawing sheets */
.tool-card .art.tech{background:#fff;background-image:none;border:1px solid var(--color-line)}
.view-toggle{display:flex;gap:6px}
.view-toggle .choice{padding:6px 14px;font-size:14px}
#preview.tech svg{background:#fff;border-radius:var(--radius-sm)}