/* Emston Industries — site styles.
   Converted from the Claude Design project "Emston Site 0.6" (2026-10-14).
   Page layout lives in inline styles on the HTML (as designed); this file holds tokens,
   shared components, responsive values and interaction states. */

/* ---------- Font (self-hosted, Instrument Sans variable 400–700) ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;
  src:url(/assets/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;
  src:url(/assets/fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Design tokens (Emston Design System v3) ---------- */
:root{
--font-sans:'Instrument Sans',Arial,sans-serif;
--tracking-tighter:-0.03em;
--surface-page:#F3EFE7;--surface-card:#FCFAF6;--surface-subtle:#EAE2D6;--surface-tan:#E2D6C6;
--border-subtle:#D5CBC0;--border-default:#C5B9AB;--border-strong:#AA9B8A;
--text-primary:#181A1B;--text-body:#4E555C;--text-muted:#646C74;--text-disabled:#8D9297;
--text-inverse:#FCFAF6;--text-inverse-body:#D3DAE1;--text-inverse-muted:#AEB8C2;
--brand-50:#EEF2F5;--brand-100:#DDE4EA;--brand-300:#A0AFBE;--brand-500:#627289;--brand-600:#50647D;--brand-700:#405269;--brand-800:#304052;--brand-900:#202C39;
--surface-dark:#202C39;--surface-dark-raised:#293947;--border-on-dark:#405269;--link-on-dark:#C5D2DE;
--error:#9D2D24;--error-soft:#F1DDD8;--success:#2F6248;--success-soft:#DCE8DF;
}

/* ---------- Base (from the design's global style block) ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:#F3EFE7;color:#181A1B;font-family:'Instrument Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:#50647D;}a:hover{color:#405269;}
summary::-webkit-details-marker{display:none;}
summary{list-style:none;}
::selection{background:#50647D;color:#FCFAF6;}
img{max-width:100%;}
/* `hidden` must win over the inline display styles used throughout the pages. */
[hidden]{display:none !important;}
[id]{scroll-margin-top:88px;}
main:focus{outline:none;}
@keyframes emFade{from{opacity:0;}to{opacity:1;}}
@keyframes emLogoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}

.skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:#FCFAF6;color:#181A1B;padding:10px 14px;border:1px solid #AA9B8A;font-weight:600;}
.skip:focus{left:16px;}

/* ---------- Photos (replaces Claude Design image slots) ---------- */
.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:rgba(127,127,127,.08);}
[data-zoom]{overflow:hidden;}

/* ---------- Header menu (tablet/phone) ---------- */
@media (max-width:1024px){[data-header][data-open]{--r-dspNav:flex}}
body[data-page="order"] [data-footer]{padding-bottom:0 !important;}

/* ---------- Buttons (DS Button) ---------- */
.btn{font-family:var(--font-sans);font-weight:600;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;border:1px solid transparent;box-sizing:border-box;line-height:normal;text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;padding:16px 30px;font-size:15px;min-height:44px;outline-offset:3px;}
.btn-sm{padding:11px 20px;font-size:13px;}
.btn-primary{background:var(--brand-600);color:var(--surface-card);border-color:var(--brand-600);}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:var(--surface-card);}
.btn-primary:active{background:var(--brand-800);border-color:var(--brand-800);}
.btn-outline{background:transparent;color:var(--brand-600);border-color:var(--brand-600);}
.btn-outline:hover{background:var(--brand-50);color:var(--brand-600);}
.btn-outline:active{background:var(--brand-100);}
.btn-ondark{background:var(--surface-card);color:var(--brand-900);border-color:var(--surface-card);}
.btn-ondark:hover{background:var(--brand-50);border-color:var(--brand-50);color:var(--brand-900);}
.btn-ondark:active{background:var(--brand-100);border-color:var(--brand-100);}
.btn[disabled]{background:#D9D6D0;color:#777B7F;border-color:#D9D6D0;cursor:not-allowed;}
.btn-nav{width:var(--r-navBtnW);margin-top:var(--r-navBtnMt);}
.btn-block{width:100%;}
@media (max-width:640px){.btn-block-m{width:100%;}}

/* ---------- Form fields (DS TextField / Select) ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text-primary);}
.field input,.field textarea,.field select{border:1px solid var(--border-default);border-radius:0;background:var(--surface-card);padding:12px 14px;min-height:44px;
  font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--text-primary);width:100%;box-sizing:border-box;outline:none;transition:border-color .15s ease;}
.field select{width:auto;max-width:380px;line-height:normal;}
.field textarea{resize:vertical;}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--border-strong);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--brand-600);}
.field-hint{margin:0;font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--text-muted);}
.field.has-error input,.field.has-error textarea{border-color:var(--error);background:var(--error-soft);}
.field.has-error .field-hint{font-weight:600;color:var(--error);}
.variant{display:contents;}
.variant[hidden]{display:none;}
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-error{border:1px solid var(--error);background:var(--error-soft);color:var(--error);padding:14px 16px;font-size:15px;line-height:1.6;font-weight:600;}
.form-error[hidden]{display:none;}
.form-error a{color:var(--error);}
.file-error{color:var(--error);font-weight:600;}
.ts-wrap{display:contents;}
#ts-slot:empty{display:none;}
[data-submit][aria-busy="true"]{opacity:.7;cursor:progress;}

/* ---------- FAQ accordion (DS Accordion) ---------- */
.acc{max-width:860px;display:flex;flex-direction:column;border-bottom:1px solid var(--border-default);}
.acc-item{border-top:1px solid var(--border-default);}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;background:transparent;border:none;border-radius:0;cursor:pointer;
  padding:20px 12px;min-height:44px;outline-offset:3px;font-family:var(--font-sans);font-weight:600;letter-spacing:var(--tracking-tighter);font-size:21px;line-height:1.25;
  color:var(--text-primary);transition:background .15s ease;}
.acc-q:hover{background:var(--surface-subtle);}
.acc-icon{flex-shrink:0;width:28px;height:28px;border:1px solid var(--border-default);display:inline-flex;align-items:center;justify-content:center;color:var(--brand-600);font-size:15px;font-weight:600;line-height:1;}
.acc-a{margin:0;padding:0 12px 22px;font-size:16px;line-height:1.6;color:var(--text-body);max-width:64ch;}

/* ---------- Logo wall ---------- */
.logo-wall{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.logo-track{display:flex;width:max-content;animation:emLogoScroll 32s linear infinite;}
.logo-set{display:flex;}
.logo-cell{flex:0 0 auto;height:48px;display:flex;align-items:center;padding-right:clamp(48px,6vw,88px);}
.logo-cell img{display:block;filter:brightness(0);opacity:.82;}

/* ---------- Overlays (product dialog, placement guide, lightbox) ---------- */
.overlay[hidden]{display:none !important;}
html.no-scroll,html.no-scroll body{overflow:hidden;}
.pm-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.lb-zoomed{overflow:auto !important;align-items:flex-start !important;justify-content:flex-start !important;}
.lb-zoomed img{width:250% !important;max-width:none !important;max-height:none !important;height:auto !important;flex:none;cursor:zoom-out !important;box-shadow:none !important;}

/* ---------- Simple text pages (privacy, 404) ---------- */
.prose{max-width:720px;margin:0 auto;padding:calc(clamp(48px,6vw,88px)) 24px calc(clamp(64px,8vw,112px));}
.prose h1{font-weight:600;letter-spacing:-0.03em;font-size:min(8.6vw,clamp(34px,4.4vw,56px));line-height:1.02;margin:0 0 20px;}
.prose h2{font-weight:600;letter-spacing:-0.02em;font-size:22px;margin:40px 0 10px;}
.prose p,.prose li{font-size:17px;line-height:1.7;color:#4E555C;}
.prose ul{padding-left:20px;}
:root{--r-dspBurger:none;--r-dspNav:flex;--r-navFlex:1 1 420px;--r-navDir:row;--r-navAlign:center;--r-navGap:24px;--r-navMl:clamp(24px,6vw,88px);--r-navWidth:auto;--r-navPt:0px;--r-navPb:0px;--r-navPl:0px;--r-navBorder:none;--r-navPos:static;--r-navTop:auto;--r-navBg:transparent;--r-navShadow:none;--r-navMaxH:none;--r-navOy:visible;--r-navLinkPad:8px 0 6px;--r-navLinkW:auto;--r-navFont:15px;--r-navBtnW:auto;--r-navBtnMt:0px;--r-heroPadR:clamp(56px,7vw,112px);--r-heroImgH:clamp(400px,52vw,720px);--r-trustWrap:wrap;--r-trustOx:visible;--r-trustItem:1 1 190px;--r-prodCols:repeat(auto-fit,minmax(min(100%,240px),1fr));--r-prodFlow:row;--r-prodAuto:auto;--r-prodOx:visible;--r-prodSnap:none;--r-prodPb:0px;--r-wkSecDir:column;--r-wkSecGap:28px;--r-persHeroH:clamp(340px,42vw,560px);--r-letterCols:repeat(auto-fit,minmax(min(100%,200px),1fr));--r-letterGap:16px;--r-fontSpecH:56px;--r-dspThreadHead:block;--r-dspThreadToggle:none;--r-dspThreadDl:grid;--r-threadPvDir:column;--r-threadPvOrder:0;--r-threadPvMt:36px;--r-threadPvMinH:508px;--r-threadPvSwFlex:1;--r-threadPvSwH:240px;--r-threadPvSwM:0px;--r-threadPvSwB:none;--r-threadPvAlign:flex-end;--r-threadPvPad:20px 24px;--r-threadPvName:26px;--r-threadCols:repeat(6,minmax(44px,64px));--r-threadGridMax:460px;--r-threadLayout:minmax(0,520px) minmax(0,1fr);--r-placeCols:repeat(5,minmax(0,1fr));--r-placeGap:16px;--r-gAlign:center;--r-gPad:32px 24px;--r-gW:min(100%,1040px);--r-gH:auto;--r-gMaxH:90vh;--r-gBorder:1px solid #C5B9AB;--r-gHeadPad:14px 16px 14px 24px;--r-gBodyPad:24px;--r-dspGuideD:block;--r-dspGuideM:none;--r-filtWrap:wrap;--r-filtOx:visible;--r-workCols:repeat(auto-fill,minmax(min(100%,300px),1fr));--r-workGap:28px;--r-footCols:repeat(auto-fit,minmax(min(100%,220px),1fr));--r-footGap:36px;--r-dspStickyCta:none;--r-stickyPad:0px;--r-pmDir:row;--r-pmAlign:center;--r-pmPad:32px 24px;--r-pmPadIn:34px;--r-pmMediaFlex:0 0 42%;--r-pmMediaH:440px;--r-pmPhotoH:0px;--r-pmMediaBr:1px solid #C5B9AB;--r-pmMediaBb:none}
@media (max-width:1024px){:root{--r-dspBurger:flex;--r-dspNav:none;--r-navFlex:1 1 100%;--r-navDir:column;--r-navAlign:stretch;--r-navGap:0px;--r-navMl:0px;--r-navWidth:100%;--r-navPt:16px;--r-navPb:20px;--r-navPl:24px;--r-navBorder:1px solid #C5B9AB;--r-navPos:absolute;--r-navTop:100%;--r-navBg:#FCFAF6;--r-navShadow:0 20px 40px rgba(0,0,0,0.22);--r-navMaxH:calc(100vh - 80px);--r-navOy:auto;--r-navLinkPad:14px 0;--r-navLinkW:100%;--r-navFont:15px;--r-navBtnW:100%;--r-navBtnMt:12px;--r-heroPadR:clamp(56px,7vw,112px);--r-heroImgH:380px;--r-trustWrap:wrap;--r-trustOx:visible;--r-trustItem:1 1 190px;--r-prodCols:repeat(auto-fit,minmax(min(100%,240px),1fr));--r-prodFlow:row;--r-prodAuto:auto;--r-prodOx:visible;--r-prodSnap:none;--r-prodPb:0px;--r-wkSecDir:column;--r-wkSecGap:28px;--r-persHeroH:340px;--r-letterCols:repeat(auto-fit,minmax(min(100%,200px),1fr));--r-letterGap:16px;--r-fontSpecH:56px;--r-dspThreadHead:block;--r-dspThreadToggle:none;--r-dspThreadDl:grid;--r-threadPvDir:column;--r-threadPvOrder:0;--r-threadPvMt:36px;--r-threadPvMinH:508px;--r-threadPvSwFlex:1;--r-threadPvSwH:240px;--r-threadPvSwM:0px;--r-threadPvSwB:none;--r-threadPvAlign:flex-end;--r-threadPvPad:20px 24px;--r-threadPvName:26px;--r-threadCols:repeat(6,minmax(44px,64px));--r-threadGridMax:460px;--r-threadLayout:minmax(0,520px) minmax(0,1fr);--r-placeCols:repeat(5,minmax(0,1fr));--r-placeGap:16px;--r-gAlign:center;--r-gPad:32px 24px;--r-gW:min(100%,1040px);--r-gH:auto;--r-gMaxH:90vh;--r-gBorder:1px solid #C5B9AB;--r-gHeadPad:14px 16px 14px 24px;--r-gBodyPad:24px;--r-dspGuideD:block;--r-dspGuideM:none;--r-filtWrap:wrap;--r-filtOx:visible;--r-workCols:repeat(auto-fill,minmax(min(100%,300px),1fr));--r-workGap:28px;--r-footCols:repeat(auto-fit,minmax(min(100%,220px),1fr));--r-footGap:36px;--r-dspStickyCta:none;--r-stickyPad:0px;--r-pmDir:row;--r-pmAlign:center;--r-pmPad:32px 24px;--r-pmPadIn:34px;--r-pmMediaFlex:0 0 42%;--r-pmMediaH:440px;--r-pmPhotoH:0px;--r-pmMediaBr:1px solid #C5B9AB;--r-pmMediaBb:none}}
@media (max-width:640px){:root{--r-dspBurger:flex;--r-dspNav:none;--r-navFlex:1 1 100%;--r-navDir:column;--r-navAlign:stretch;--r-navGap:0px;--r-navMl:0px;--r-navWidth:100%;--r-navPt:16px;--r-navPb:20px;--r-navPl:24px;--r-navBorder:1px solid #C5B9AB;--r-navPos:absolute;--r-navTop:100%;--r-navBg:#FCFAF6;--r-navShadow:0 20px 40px rgba(0,0,0,0.22);--r-navMaxH:calc(100vh - 80px);--r-navOy:auto;--r-navLinkPad:14px 0;--r-navLinkW:100%;--r-navFont:17px;--r-navBtnW:100%;--r-navBtnMt:12px;--r-heroPadR:24px;--r-heroImgH:240px;--r-trustWrap:nowrap;--r-trustOx:auto;--r-trustItem:0 0 212px;--r-prodCols:none;--r-prodFlow:column;--r-prodAuto:76%;--r-prodOx:auto;--r-prodSnap:x mandatory;--r-prodPb:8px;--r-wkSecDir:row;--r-wkSecGap:16px;--r-persHeroH:240px;--r-letterCols:repeat(2,minmax(0,1fr));--r-letterGap:12px;--r-fontSpecH:38px;--r-dspThreadHead:none;--r-dspThreadToggle:block;--r-dspThreadDl:none;--r-threadPvDir:row;--r-threadPvOrder:-1;--r-threadPvMt:0px;--r-threadPvMinH:0px;--r-threadPvSwFlex:0 0 72px;--r-threadPvSwH:72px;--r-threadPvSwM:16px 0 16px 16px;--r-threadPvSwB:1px solid #AA9B8A;--r-threadPvAlign:center;--r-threadPvPad:16px 20px;--r-threadPvName:24px;--r-threadCols:repeat(6,minmax(44px,1fr));--r-threadGridMax:100%;--r-threadLayout:minmax(0,1fr);--r-placeCols:repeat(2,minmax(0,1fr));--r-placeGap:14px;--r-gAlign:stretch;--r-gPad:0px;--r-gW:100%;--r-gH:100%;--r-gMaxH:100%;--r-gBorder:none;--r-gHeadPad:10px 12px 10px 16px;--r-gBodyPad:16px;--r-dspGuideD:none;--r-dspGuideM:block;--r-filtWrap:nowrap;--r-filtOx:auto;--r-workCols:repeat(2,minmax(0,1fr));--r-workGap:16px 12px;--r-footCols:repeat(2,minmax(0,1fr));--r-footGap:28px 20px;--r-dspStickyCta:block;--r-stickyPad:76px;--r-pmDir:column;--r-pmAlign:flex-start;--r-pmPad:0px;--r-pmPadIn:24px;--r-pmMediaFlex:0 0 auto;--r-pmMediaH:0px;--r-pmPhotoH:min(80vw, 360px);--r-pmMediaBr:none;--r-pmMediaBb:1px solid #C5B9AB}}
@media (max-width:640px){.thread-collapsed [data-thread-grid] > :nth-child(n+13){display:none !important;}}
.h1:hover{color:#181A1B !important}
.h2:hover{border-color:var(--accent,#50647D) !important;color:#181A1B !important}
.h3:hover{border-color:var(--accent,#50647D) !important;color:#FCFAF6 !important}
.h4:hover{color:#FCFAF6 !important;border-bottom:1px solid #FCFAF6 !important}
.h5:hover{border-color:#AA9B8A !important}
.h6:hover{border-bottom:2px solid var(--accent,#50647D) !important}
.h7:hover{color:#FCFAF6 !important}
.h8:hover{border-color:#8D9297 !important}
.h9:hover{color:#304052 !important}
.h10:hover{background:#EAE2D6 !important}
.f11:focus-visible{outline:2px solid #627289 !important;outline-offset:3px !important}
.h12:hover{background:rgba(252,250,246,0.18) !important}
.f13:focus{outline:none !important;border-color:#50647D !important;box-shadow:inset 0 0 0 1px #50647D !important}

/* Scroll reveal: site.js tags below-the-fold blocks with data-reveal and adds .is-in as they enter the viewport. */
[data-reveal]{opacity:0;transform:translateY(14px);}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease;}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none;transition:none;}}

/* Home hero slideshow: site.js swaps .is-on between slides. */
[data-hero-carousel] .hero-slide{transition:opacity 2.2s ease-in-out;}
[data-hero-carousel] .hero-slide:not(.is-on){opacity:0;}
[data-hero-pause][hidden]{display:none !important;}
[data-hero-pause]:focus-visible{outline:2px solid #FCFAF6;outline-offset:2px;}
@media (prefers-reduced-motion: reduce){[data-hero-carousel] .hero-slide{transition:none;}}