/* ===========================================================================
   Elementor layer — shop-manual art direction.

   The PHP fallback renders Elementor-shaped markup inside `.elementor`, so
   every rule here serves BOTH the builder page and the fallback.

   Specificity target: Elementor's kit styles headings, text, buttons and
   icon-list icons at (0,3,0) and, inside the editor iframe, loads AFTER the
   theme. Prefixing with `body .elementor` reaches (0,3,1) — enough to beat
   the kit, not enough to beat the client's own per-widget style controls.
   Never !important here: that would silently break those controls.
   =========================================================================== */

/* ---------------------------------------------------------- structure */

/* Sections and columns must stay `relative`. The editor gives every section
   an absolutely-positioned .elementor-background-overlay; releasing those to
   the .elementor wrapper stacks invisible full-page sheets over everything
   and nothing is clickable. */
body .elementor .elementor-section{position:relative}
body .elementor .elementor-column{position:relative}

body .elementor .elementor-section.elementor-section-boxed > .elementor-container{
  position:relative;
  z-index:2;
}
body .elementor .elementor-widget-wrap{align-content:flex-start}

/* Never `width:auto` a column — they are flex items sized by .elementor-col-N
   and would shrink to their content. Design widths live on the widget wrap. */
body .elementor .elementor-column > .elementor-widget-wrap{padding:0}
body .elementor .elementor-widget:not(:last-child){margin-bottom:1.1rem}

/* `.elementor-text-editor` exists only in the editor; on the live page the
   HTML is the widget's direct child. Keep layout off the widget wrapper. */
body .elementor .elementor-widget-text-editor > .elementor-widget-container{display:block}

/* --------------------------------------------------------- typography */

body .elementor .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:var(--tr-display);
  line-height:var(--lh-display);
  color:var(--text);
  margin:0;
  text-wrap:balance;
}
body .elementor .elementor-widget-text-editor{
  color:var(--text-2);
  font-size:var(--fs-body);
  line-height:1.72;
}
body .elementor .elementor-widget-text-editor a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
body .elementor .elementor-widget-text-editor a:hover{color:var(--red)}

/* The index label. Monospace, with an auto section number — this is the
   element that makes the page read as documentation rather than as a deck. */
body .elementor{counter-reset:sec}
body .elementor .sec:has(.eyebrow){counter-increment:sec}
body .elementor .elementor-widget.eyebrow{margin-bottom:1.4rem}
body .elementor .eyebrow .elementor-heading-title{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  font-weight:600;
  letter-spacing:var(--tr-meta);
  line-height:1.3;
  text-transform:uppercase;
  color:var(--text-3);
}
body .elementor .sec .eyebrow .elementor-heading-title::before{
  content:counter(sec, decimal-leading-zero) "\00a0/\00a0";
  color:var(--red);
}

body .elementor .sec-head .elementor-heading-title{font-size:var(--fs-h2)}
body .elementor .sec-head-sm .elementor-heading-title{
  font-size:var(--fs-h3);letter-spacing:.01em;
}
/* Constrain the measure on the HEADING, not the widget wrapper: `ch` on the
   wrapper resolves against the body font, and a narrow wrapper would let the
   next widget float up beside it. */
body .elementor .elementor-widget.sec-head{margin-bottom:1.25rem;max-width:none;width:100%}
/* A grid or list placed directly under the head (no lede between) needs the
   air the lede would otherwise have provided. */
body .elementor .sec-head + .elementor-widget-html,
body .elementor .sec-head + .elementor-widget-icon-list,
body .elementor .sec-head + .elementor-widget-toggle{margin-top:1.6rem}
body .elementor .sec-head .elementor-heading-title{max-width:18ch}
body .elementor .sec-head-sm .elementor-heading-title{max-width:40ch}

body .elementor .elementor-widget.sec-lede,
body .elementor .elementor-widget.sec-body{max-width:none;width:100%}
body .elementor .sec-lede > .elementor-widget-container{max-width:58ch}
body .elementor .sec-body > .elementor-widget-container{max-width:min(60ch,100%)}
body .elementor .sec-lede{font-size:var(--fs-lede);color:var(--text-2);line-height:1.62}
body .elementor .elementor-widget.sec-lede{margin-bottom:2.5rem}

/* ------------------------------------------------------------ controls */

/* Flat, rectangular, monospace. Hover inverts rather than lifting. */
body .elementor .elementor-button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1;
  padding:1.1rem 1.35rem;
  border:var(--hairline) solid transparent;
  border-radius:0;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease);
}
body .elementor .elementor-button::after,
.btn::after{content:"\2192";font-size:1rem;line-height:0;transform:translateY(.04em)}

body .elementor .btnw-primary .elementor-button,.btn-primary{
  background:var(--red);color:#fff;border-color:var(--red);   /* 6.2:1 */
}
body .elementor .btnw-primary .elementor-button:hover,.btn-primary:hover{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
body .elementor .btnw-ghost .elementor-button,.btn-ghost{
  background:transparent;color:var(--text);border-color:var(--rule);
}
body .elementor .btnw-ghost .elementor-button:hover,.btn-ghost:hover{
  background:var(--ink);border-color:var(--ink);color:var(--on-ink);
}
.btn-lg{padding:1.25rem 1.6rem;font-size:.8rem}

/* Side-by-side buttons: `width:auto` on the widget wrapper is deliberate —
   these are flex items and are meant to share a row. */
body .elementor .elementor-widget.btnw{width:auto;max-width:none;margin:0 .6rem .6rem 0}
body .elementor .elementor-widget.btnw:last-child{margin-right:0}
body .elementor .elementor-widget.btnw-center{margin:3rem auto 0;display:block}

/* On ink, the ghost control takes a light rule. These MUST carry the
   `body .elementor` prefix and sit below the generic rule: at (0,3,0) they
   lose to the generic (0,4,1) above, leaving dark text on a dark ground —
   a control that is present, focusable and invisible. */
body .elementor .hero .btnw-ghost .elementor-button,
body .elementor .sec-cap .btnw-ghost .elementor-button,
body .elementor .sec-why .btnw-ghost .elementor-button{
  color:var(--on-ink);border-color:var(--rule-dark);background:transparent;
}
body .elementor .hero .btnw-ghost .elementor-button:hover,
body .elementor .sec-cap .btnw-ghost .elementor-button:hover,
body .elementor .sec-why .btnw-ghost .elementor-button:hover{
  background:var(--on-ink);border-color:var(--on-ink);color:var(--ink);
}

/* --------------------------------------------------------- check list */

body .elementor .check-list .elementor-icon-list-items{
  list-style:none;margin:0;padding:0;
  border-top:var(--hairline) solid var(--rule);
}
body .elementor .check-list .elementor-icon-list-item{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.72rem 0;
  border-bottom:var(--hairline) solid var(--rule);
  font-size:var(--fs-body);color:var(--text);line-height:1.45;
}
body .elementor .check-list .elementor-icon-list-icon{
  flex:none;width:18px;display:block;position:relative;top:-.12em;
}
/* The kit colours the <i> directly — colouring its parent span does nothing.
   The glyph is replaced with a drawn marker so it never depends on an icon
   font loading. */
body .elementor .check-list .elementor-icon-list-icon i{
  display:block;width:14px;height:var(--rule-heavy);
  background:var(--red);font-size:0;line-height:0;color:transparent;
}
body .elementor .check-list .elementor-icon-list-icon i::before{content:""}
body .elementor .check-list .elementor-icon-list-text{font-weight:500}
body .elementor .elementor-widget.check-list{margin-bottom:2.25rem}

/* -------------------------------------------------------------- FAQ */

body .elementor .faq-list .elementor-toggle{
  border-top:var(--rule-heavy) solid var(--ink);
}
body .elementor .faq-list .elementor-toggle-item{
  border-bottom:var(--hairline) solid var(--rule);
}
body .elementor .faq-list .elementor-tab-title{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 0;cursor:pointer;
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 1.1rem + .55vw, 1.6rem);
  font-weight:700;text-transform:uppercase;
  letter-spacing:0;line-height:1.02;
  color:var(--text);
  transition:color .18s var(--ease);
}
body .elementor .faq-list .elementor-tab-title:hover{color:var(--red)}
body .elementor .faq-list .elementor-toggle-title{color:inherit;text-decoration:none}
body .elementor .faq-list .elementor-toggle-icon{
  flex:none;font-family:var(--font-mono);font-size:1rem;font-weight:500;
  color:var(--red);line-height:1;margin-top:.15em;
}
body .elementor .faq-list .elementor-tab-content{
  padding:0 0 1.4rem;color:var(--text-2);
  font-size:var(--fs-body);line-height:1.72;max-width:62ch;
}
body .elementor .faq-list .elementor-tab-content p:last-child{margin-bottom:0}

/* Fails open: content is visible unless `html.js` says the site's JS is live,
   and always visible in the builder. */
html.js body .elementor .faq-list .elementor-tab-content{display:none}
html.js body .elementor .faq-list .elementor-tab-content.elementor-active{display:block}
body.elementor-editor-active .faq-list .elementor-tab-content{display:block}
body .elementor .faq-list .elementor-toggle-icon-opened{display:none}
body .elementor .faq-list .elementor-tab-title.elementor-active .elementor-toggle-icon-closed{display:none}
body .elementor .faq-list .elementor-tab-title.elementor-active .elementor-toggle-icon-opened{display:inline}
body .elementor .faq-list .elementor-tab-title.elementor-active{color:var(--red)}

/* ------------------------------------------------------ section skin */

/* Hairlines between sections are the structure. No coloured blocks stacked
   on coloured blocks — the page reads as one ruled document. */
body .elementor .sec{
  padding-block:var(--section-y);
  background-color:var(--paper);
  background-image:var(--grain);
  border-top:var(--hairline) solid var(--rule);
}
body .elementor .sec-proof{padding-block:0;border-top:0}

/* Alternation gives the page rhythm without stacking coloured blocks: two
   weights of the same paper, divided by the hairline every section carries. */
body .elementor .sec-services,
body .elementor .sec-process,
body .elementor .sec-faq,
body .elementor .sec-tiles,
body .elementor .sec-area{background-color:var(--paper)}

body .elementor .sec-split,
body .elementor .sec-work,
body .elementor .sec-values,
body .elementor .sec-contact,
body .elementor .sec-alt{background-color:var(--paper-2)}
body .elementor .sec-also{
  padding-block:var(--section-y-tight);
  background-color:var(--paper-2);
}

/* ink sections */
body .elementor .sec-cap,
body .elementor .sec-why{
  background-color:var(--ink);
  background-image:var(--drafting),var(--grain);
  background-size:var(--drafting-size),160px 160px;
  color:var(--on-ink);
  border-top:0;
}
body .elementor .sec-cap .elementor-heading-title,
body .elementor .sec-why .elementor-heading-title{color:var(--on-ink)}
body .elementor .sec-cap .elementor-widget-text-editor,
body .elementor .sec-why .elementor-widget-text-editor{color:var(--on-ink-2)}
body .elementor .sec-cap .eyebrow .elementor-heading-title,
body .elementor .sec-why .eyebrow .elementor-heading-title{color:var(--on-ink-3)}

/* --------------------------------------------------------------- hero */

body .elementor .hero{
  isolation:isolate;
  background-color:var(--ink);
  background-position:center 30%;
  background-size:cover;
  background-repeat:no-repeat;
  padding-block:clamp(5.5rem, 3rem + 10vw, 11rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  color:var(--on-ink);
  overflow:hidden;
}
/* Scrim as a PSEUDO-ELEMENT, not a div: the Elementor hero takes its photo
   from the section's background_image control and has no scrim div, so a div
   would exist only in the static render and the live hero would be a bare
   sunlit photo under white text.

   Graded, not a flat tint, and weighted to the lower-left where the headline
   sits — the photograph still reads as a photograph. */
body .elementor .hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(104deg, rgba(14,16,20,.94) 0%, rgba(14,16,20,.82) 34%,
                    rgba(14,16,20,.42) 62%, rgba(14,16,20,.3) 100%),
    linear-gradient(to top, rgba(14,16,20,.9) 0%, transparent 42%);
}
/* A fine drafting field over the photograph, so the hero belongs to the same
   system as the ink sections. */
body .elementor .hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--drafting);
  background-size:var(--drafting-size);
  opacity:.5;
}
body .elementor .hero > .elementor-container{z-index:2}

/* The header is absolutely positioned OVER the hero on the designed pages, so
   the hero has to reserve room for it; otherwise the headline slides under the
   logo on every phone and tablet. */
body.has-hero .elementor .hero{
  padding-top:calc(var(--header-h) + var(--topbar-h) + clamp(2.5rem, 1rem + 6vw, 7rem));
}

body .elementor .hero .elementor-heading-title{color:var(--on-ink)}
body .elementor .hero .eyebrow .elementor-heading-title{color:var(--on-ink-2)}
body .elementor .hero-title .elementor-heading-title{
  font-size:var(--fs-hero);
  font-weight:800;
  line-height:.84;
  letter-spacing:-.025em;
  max-width:none;
}
body .elementor .elementor-widget.hero-title{margin-bottom:1.6rem}
body .elementor .elementor-widget.hero-lede{max-width:none;width:100%;margin-bottom:2.25rem}
body .elementor .hero-lede > .elementor-widget-container{max-width:44ch}
body .elementor .hero .hero-lede{
  color:#D7D3CC;font-size:var(--fs-lede);line-height:1.6;
}
body .elementor .hero-copy > .elementor-widget-wrap{padding-right:clamp(0rem, -2rem + 5vw, 3.5rem)}
body .elementor .hero-side > .elementor-widget-wrap{align-content:flex-end}

/* -------------------------------------------------- split / two-column */

body .elementor .split-copy > .elementor-widget-wrap{
  padding-right:clamp(0rem, -3rem + 7vw, 4.5rem);
  align-content:center;
}
body .elementor .split-media > .elementor-widget-wrap{align-content:center}
body .elementor .sec-split .elementor-widget:last-child{margin-bottom:0}
body .elementor .faq-aside > .elementor-widget-wrap{
  padding-right:clamp(0rem, -2rem + 5vw, 4rem);
}
body .elementor .contact-aside > .elementor-widget-wrap{
  padding-right:clamp(0rem, -2rem + 5vw, 4rem);
}

/* ---------------------------------------------------------- shortcode */

/* The PlugMatrix form renders inside a shadow DOM; theme CSS can only reach
   this wrapper. The form's own look is set in plugmatrix/forms/contact.json. */
body .elementor .form-embed > .elementor-widget-container,
.plugmatrix-form-embed{width:100%}
body .elementor .elementor-widget.form-embed{
  background:var(--white);
  padding:clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border:var(--hairline) solid var(--rule);
  border-top:0;
  width:100%;
}
body .elementor .elementor-widget.form-head-w{margin-bottom:0}
body .elementor .form-head-w > .elementor-widget-container{
  background:var(--ink);
  color:var(--on-ink);
  padding:clamp(1.4rem, 1rem + 1.6vw, 2.1rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* ------------------------------------------------------- breakpoints */

/* Match Elementor's own stacking points so the builder render and the theme
   render never disagree at tablet widths. */
@media (max-width:1024px){
  body .elementor .hero .elementor-column,
  body .elementor .sec-split .elementor-column,
  body .elementor .sec-faq .elementor-column,
  body .elementor .sec-contact .elementor-column{width:100%}
  body .elementor .hero-copy > .elementor-widget-wrap,
  body .elementor .split-copy > .elementor-widget-wrap,
  body .elementor .faq-aside > .elementor-widget-wrap,
  body .elementor .contact-aside > .elementor-widget-wrap{padding-right:0}
  body .elementor .hero-side > .elementor-widget-wrap,
  body .elementor .split-media > .elementor-widget-wrap,
  body .elementor .faq-aside > .elementor-widget-wrap,
  body .elementor .contact-aside > .elementor-widget-wrap{margin-top:2.75rem}
  body .elementor .sec-split .split-media{order:-1}
  body .elementor .sec-split .split-media > .elementor-widget-wrap{margin-top:0;margin-bottom:2.75rem}
}
@media (max-width:767px){
  body .elementor .elementor-column{width:100%}
  body .elementor .elementor-widget.btnw{width:100%;margin-right:0}
  body .elementor .elementor-widget.btnw .elementor-button{width:100%}
  body .elementor .sec-head .elementor-heading-title{max-width:none}
}