/* =====================================================================
   1880 Consulting — homepage styles for Elementor
   Paste into: Elementor > Site Settings > Custom CSS (Pro)
           or: Appearance > Customize > Additional CSS
           or: a WPCode CSS snippet (site-wide, front end)
   Every rule is scoped to .x-* classes set in the template (each top-level
   section carries .x-1880), so nothing else on the site is affected. Source of truth: reference/1880-website.html
   ===================================================================== */

/* ---------- Tokens (1880 design system v0.3) ---------- */
:root{
  --x-charcoal:#231f20; --x-white:#ffffff;
  --x-surface:#ffffff; --x-sunken:#f2f2f2;
  --x-ink:#231f20; --x-muted:#595959; --x-faint:rgba(35,31,32,.22);
  --x-rule:#d9d9d9; --x-rule-strong:#767676;
  --x-font:"ltc-bodoni-175","LTC Bodoni 175 Pro","LTC Bodoni 175","Libre Bodoni",Georgia,"Times New Roman",serif;
  --x-ease:cubic-bezier(0.32,0.72,0,1);
  --x-slow:cubic-bezier(0.16,1,0.3,1);
  --x-max:1200px; --x-measure:680px;
  --x-gutter:32px;
}
@media (max-width:720px){ :root{ --x-gutter:16px; } }

/* Ink sections flip the tokens */
.x-ink{
  --x-surface:#231f20; --x-sunken:#1a1718;
  --x-ink:#ffffff; --x-muted:#b5b2b3; --x-faint:rgba(255,255,255,.22);
  --x-rule:#403b3c; --x-rule-strong:#8c8889;
}

/* ---------- Page base ---------- */
.x-1880, .x-1880 *, .x-1880 *::before, .x-1880 *::after{ box-sizing:border-box; }
body:has(.x-1880){ background:#fff; color:var(--x-ink); font-family:var(--x-font); -webkit-font-smoothing:antialiased; }
html:has(.x-1880){ scroll-behavior:smooth; }
.x-1880 .elementor-heading-title,
.x-1880 .elementor-widget-text-editor,
.x-1880 .elementor-button,
.x-1880 .elementor-icon-list-text{ font-family:var(--x-font); font-weight:400; }
.x-1880 :focus-visible{ outline:none; box-shadow:0 0 0 2px var(--x-surface,#fff),0 0 0 4px var(--x-ink); }

/* Section containers: full bleed, no default Elementor padding */
.x-section{
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
  background:var(--x-surface); color:var(--x-ink); position:relative;
}
.x-section.x-sunken{ background:var(--x-sunken); }
/* Inner content wrapper (boxed to 1200 + gutters, respects phone safe areas) */
.x-wrap{
  --padding-top:0px; --padding-bottom:0px;
  --padding-left:max(var(--x-gutter),env(safe-area-inset-left,0px));
  --padding-right:max(var(--x-gutter),env(safe-area-inset-right,0px));
  width:100%; max-width:calc(var(--x-max) + 2*var(--x-gutter)); margin-inline:auto;
}
.x-1880 .elementor-widget{ --widget-margin:0; }
.x-1880 .elementor-widget:not(:last-child){ margin-block-end:0; }

/* ---------- Type helpers (Tailwind steps only) ---------- */
.x-1880 .x-eyebrow,
.x-1880 .x-eyebrow p{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--x-muted); margin:0; }
.x-1880 .x-huge .elementor-heading-title{ font-size:72px; line-height:1; letter-spacing:-.01em; max-width:12em; text-wrap:balance; color:var(--x-ink); }
.x-1880 .x-big  .elementor-heading-title{ font-size:60px; line-height:1; letter-spacing:-.005em; max-width:15em; text-wrap:balance; color:var(--x-ink); }
.x-1880 .x-mid, .x-1880 .x-mid p{ font-size:30px; line-height:36px; max-width:var(--x-measure); text-wrap:pretty; margin:0; }
.x-1880 .x-muted, .x-1880 .x-muted p{ color:var(--x-muted); }
@media (max-width:900px){
  .x-1880 .x-big  .elementor-heading-title{ font-size:48px; }
  .x-1880 .x-huge .elementor-heading-title{ font-size:60px; }
}
@media (max-width:560px){
  .x-1880 .x-big .elementor-heading-title,
  .x-1880 .x-huge .elementor-heading-title{ font-size:36px; line-height:40px; }
  .x-1880 .x-mid, .x-1880 .x-mid p{ font-size:24px; line-height:32px; }
}

/* ---------- Buttons ---------- */
.x-1880 .x-btn .elementor-button{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16px; line-height:24px; font-weight:600; letter-spacing:0;
  padding:12px 24px; border:1px solid var(--x-ink); border-radius:0;
  background:var(--x-ink); color:var(--x-surface); fill:var(--x-surface);
  transition:background-color .7s var(--x-ease),color .7s var(--x-ease),border-color .7s var(--x-ease),transform .7s var(--x-ease);
}
.x-1880 .x-btn .elementor-button:hover,
.x-1880 .x-btn .elementor-button:focus-visible{ background:transparent; color:var(--x-ink); }
.x-1880 .x-btn .elementor-button:active{ transform:scale(.98); }
.x-1880 .x-btn-ghost .elementor-button{ background:transparent; color:var(--x-ink); border-color:var(--x-rule-strong); }
.x-1880 .x-btn-ghost .elementor-button:hover{ border-color:var(--x-ink); }
/* drawn arrow after the label (Libre Bodoni has no arrow glyph) */
.x-1880 .x-btn .elementor-button-text::after{
  content:""; display:inline-block; width:22px; height:10px; margin-left:8px; vertical-align:middle;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5H21M16.5.5L21 5l-4.5 4.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5H21M16.5.5L21 5l-4.5 4.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .7s var(--x-ease);
}
.x-1880 .x-btn .elementor-button:hover .elementor-button-text::after{ transform:translateX(4px); }
.x-1880 .x-btn-noarrow .elementor-button-text::after{ display:none; }

/* ---------- Skip link + floating nav (HTML widget) ---------- */
.x-skip{position:fixed;left:16px;top:calc(env(safe-area-inset-top,0px) + 16px);z-index:1000;background:#fff;color:#231f20;padding:8px 12px;font:600 14px/20px var(--x-font);transform:translateY(-200%);transition:transform .7s var(--x-ease);text-decoration:none}
.x-skip:focus{transform:none}
.x-nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 24px);left:0;right:0;z-index:999;pointer-events:none}
.admin-bar .x-nav{top:calc(32px + 24px)}
.x-nav .x-bar{pointer-events:auto;margin:0 auto;width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:32px;padding:8px 8px 8px 24px;background:rgba(35,31,32,.72);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);color:#fff;animation:xNavIn 1.2s var(--x-slow) 1.6s both}
@keyframes xNavIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.x-nav .x-logo{display:block;width:120px;line-height:0}
.x-nav .x-logo img,.x-nav .x-logo svg{display:block;width:100%;height:auto}
.x-nav .x-links{display:flex;gap:24px;align-items:center}
.x-nav .x-links a{font:600 14px/20px var(--x-font);color:#fff;text-decoration:none;padding-block:4px;border-bottom:1px solid transparent;transition:border-color .7s var(--x-ease)}
.x-nav .x-links a:hover,.x-nav .x-links a[aria-current="true"]{border-bottom-color:#fff}
.x-nav .x-cta{font:600 14px/20px var(--x-font);padding:8px 12px;background:#fff;color:#231f20;border:1px solid #fff;text-decoration:none;transition:background-color .7s var(--x-ease),color .7s var(--x-ease)}
.x-nav .x-cta:hover{background:transparent;color:#fff}
.x-nav .x-cta:active{transform:scale(.98)}
.x-burger{display:none;position:relative;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);background:transparent;cursor:pointer;padding:0;border-radius:0}
.x-burger span{position:absolute;left:10px;right:10px;height:1px;background:#fff;transition:transform .7s var(--x-ease),top .7s var(--x-ease)}
.x-burger span:nth-child(1){top:15px}.x-burger span:nth-child(2){top:23px}
.x-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg)}
.x-burger[aria-expanded="true"] span:nth-child(2){top:19px;transform:rotate(-45deg)}
@media (max-width:720px){
  .x-nav .x-links,.x-nav .x-cta{display:none}
  .x-burger{display:block}
  .x-nav .x-bar{width:calc(100% - 32px);justify-content:space-between;padding-left:16px}
}
.x-menu{position:fixed;inset:0;z-index:998;background:rgba(35,31,32,.86);-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);color:#fff;display:grid;align-content:center;padding-inline:24px;opacity:0;visibility:hidden;transition:opacity .7s var(--x-ease),visibility .7s}
.x-menu.open{opacity:1;visibility:visible}
.x-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.x-menu a{display:inline-block;font:400 36px/40px var(--x-font);color:#fff;text-decoration:none;transform:translateY(48px);opacity:0;transition:transform .7s var(--x-ease),opacity .7s var(--x-ease)}
.x-menu.open a{transform:none;opacity:1}
.x-menu.open li:nth-child(1) a{transition-delay:.1s}.x-menu.open li:nth-child(2) a{transition-delay:.15s}.x-menu.open li:nth-child(3) a{transition-delay:.2s}

/* ---------- HERO ---------- */
.x-hero{ overflow:hidden; min-height:max(720px,100svh); display:flex; flex-direction:column; justify-content:center; }
.x-hero > .x-wrap{
  position:relative; z-index:2;
  --padding-top:calc(env(safe-area-inset-top,0px) + 160px);
  --padding-bottom:clamp(180px,30vw,380px);
  --gap:32px; --row-gap:32px;
}
.x-hero .x-hero-title .elementor-heading-title{ font-size:72px; line-height:1; letter-spacing:-.01em; color:#fff; max-width:12em; text-wrap:balance; }
.x-hero .x-hero-sub, .x-hero .x-hero-sub p{ font-size:24px; line-height:32px; color:#b5b2b3; max-width:var(--x-measure); text-wrap:pretty; margin:0; }
.x-hero .x-btn{ margin-top:16px; }
.x-hero .x-btn .elementor-button{ background:#fff; color:#231f20; border-color:#fff; }
.x-hero .x-btn .elementor-button:hover{ background:transparent; color:#fff; }
.x-hero .x-btn{ animation:xLateIn 1.4s var(--x-slow) 1.8s both; }
@keyframes xLateIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:900px){ .x-hero .x-hero-title .elementor-heading-title{ font-size:60px; } }
@media (max-width:560px){
  .x-hero .x-hero-title .elementor-heading-title{ font-size:48px; }
  .x-hero .x-hero-sub, .x-hero .x-hero-sub p{ font-size:20px; line-height:28px; }
  .x-hero > .x-wrap{ --padding-top:calc(env(safe-area-inset-top,0px) + 128px); }
}
/* hairline + mark (HTML widget .x-hero-art, absolutely positioned in the hero) */
.x-hero .x-hero-art{ position:absolute !important; inset:0; z-index:1; pointer-events:none; margin:0 !important; width:auto !important; }
.x-hero .x-line{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 112px);height:1px;background:rgba(255,255,255,.14);transform-origin:left;animation:xDraw 1.8s var(--x-slow) .1s both}
@keyframes xDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.x-hero .x-mark{position:absolute;left:max(32px,env(safe-area-inset-left,0px));right:max(32px,env(safe-area-inset-right,0px));bottom:0}
@media (max-width:720px){ .x-hero .x-mark{left:16px;right:16px} }
.x-hero .x-mark svg{display:block;width:100%;height:auto;transform:translateY(30%);overflow:visible}
.x-hero .x-digits{fill:#fff;opacity:.08;animation:xMarkRise 2.4s var(--x-slow) .2s both}
.x-hero .x-dot{fill:#fff;transform-box:fill-box;transform-origin:center;animation:xDotIn 1.2s var(--x-slow) 1.9s both}
@keyframes xMarkRise{from{opacity:0;transform:translateY(80px)}to{opacity:.08;transform:none}}
@keyframes xDotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
/* word-by-word rise (spans injected by custom.js) */
.x-1880 .x-split .x-w{display:inline-block;opacity:0;transform:translateY(24px);filter:blur(8px);animation:xWordIn 1.4s var(--x-slow) both}
@keyframes xWordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- CHAPTERS ---------- */
.x-chapter{ min-height:max(640px,92svh); display:flex; flex-direction:column; justify-content:center; }
.x-chapter > .x-wrap{ --padding-top:96px; --padding-bottom:96px; }
.x-chapter + .x-chapter{ border-top:1px solid var(--x-rule); }
@media (max-width:560px){ .x-chapter{ min-height:0; } .x-chapter > .x-wrap{ --padding-top:80px; --padding-bottom:80px; } }

/* focus: words light up on scroll */
.x-1880 .x-tagline .x-w{ color:var(--x-faint); transition:color .9s var(--x-ease); }
.x-1880 .x-tagline .x-w.on{ color:var(--x-ink); }

/* who */
.x-who > .x-wrap{ --gap:64px; --row-gap:64px; }
.x-who .x-who-detail{ align-self:flex-end; width:min(100%,58%); padding-top:24px; border-top:2px solid var(--x-ink); }
@media (max-width:900px){ .x-who .x-who-detail{ width:100%; } }

/* namesake */
.x-name > .x-wrap{ --gap:64px; --row-gap:64px; }
.x-name .x-year{ overflow:hidden; line-height:0; }
.x-name .x-year svg{ display:block; width:100%; height:auto; fill:var(--x-ink); }
.x-name .x-name-row{ --gap:32px; --row-gap:48px; --padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px; }
.x-name .x-name-row{ flex-wrap:wrap; --flex-wrap:wrap; align-items:flex-end; }
.x-name .x-name-lead{ --width:auto; width:auto; flex:1.4 1 0; min-width:0; --padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px; }
.x-name .x-name-close{ --width:auto; width:auto; flex:1 1 0; min-width:0; --gap:24px; --row-gap:24px; --padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px; }
.x-name .x-name-close .x-huge .elementor-heading-title{ font-size:48px; line-height:1; }
@media (max-width:900px){ .x-name .x-name-lead,.x-name .x-name-close{ flex:1 1 100%; } }
@media (max-width:560px){ .x-name .x-name-close .x-huge .elementor-heading-title{ font-size:36px; line-height:40px; } }

/* services */
.x-svc > .x-wrap{ --gap:0px; --row-gap:0px; }
.x-svc .x-svc-head{ --gap:12px; --row-gap:12px; margin-bottom:64px; --padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px; }
.x-svc .x-svc-title .elementor-heading-title{ font-size:48px; line-height:1; color:var(--x-ink); }
.x-svc .x-svc-list .elementor-icon-list-items{ list-style:none; margin:0; padding:0; border-top:1px solid var(--x-rule); }
.x-svc .x-svc-list .elementor-icon-list-item{ border-bottom:1px solid var(--x-rule); padding-block:24px !important; margin:0 !important; transition:padding-left .7s var(--x-ease); }
.x-svc .x-svc-list .elementor-icon-list-item::after{ display:none !important; }
.x-svc .x-svc-list .elementor-icon-list-item:hover{ padding-left:24px !important; }
.x-svc .x-svc-list .elementor-icon-list-icon{ display:none; }
.x-svc .x-svc-list .elementor-icon-list-text{ font-size:48px; line-height:1; color:var(--x-ink); padding:0 !important; }
.x-svc .x-btn{ margin-top:48px; }
@media (max-width:900px){
  .x-svc .x-svc-title .elementor-heading-title,
  .x-svc .x-svc-list .elementor-icon-list-text{ font-size:36px; line-height:40px; }
}
@media (max-width:560px){
  .x-svc .x-svc-list .elementor-icon-list-text{ font-size:24px; line-height:32px; }
  .x-svc .x-svc-list .elementor-icon-list-item{ padding-block:16px !important; }
}

/* contact (ink) */
.x-contact{ min-height:max(560px,80svh); display:flex; flex-direction:column; justify-content:center; }
.x-contact > .x-wrap{ --padding-top:96px; --padding-bottom:96px; --gap:48px; --row-gap:48px; }
.x-contact .x-contact-title .elementor-heading-title{ font-size:72px; line-height:1; color:var(--x-ink); }
.x-contact .x-contact-body, .x-contact .x-contact-body p{ font-size:24px; line-height:32px; color:var(--x-muted); max-width:var(--x-measure); margin:0; }
.x-contact .x-btn .elementor-button{ background:#fff; color:#231f20; border-color:#fff; }
.x-contact .x-btn .elementor-button:hover{ background:transparent; color:#fff; }
.x-copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--x-rule);color:var(--x-ink)}
.x-copyrow .x-addr{font:400 18px/28px var(--x-font);user-select:all}
.x-copyrow button{font:600 14px/20px var(--x-font);background:transparent;color:var(--x-ink);border:1px solid var(--x-rule-strong);border-radius:0;padding:4px 12px;cursor:pointer;transition:border-color .7s var(--x-ease),transform .7s var(--x-ease)}
.x-copyrow button:hover{border-color:var(--x-ink)}.x-copyrow button:active{transform:scale(.98)}
@media (max-width:900px){ .x-contact .x-contact-title .elementor-heading-title{ font-size:60px; } }
@media (max-width:560px){
  .x-contact .x-contact-title .elementor-heading-title{ font-size:48px; }
  .x-contact .x-contact-body, .x-contact .x-contact-body p{ font-size:20px; line-height:28px; }
}

/* footer */
.x-footer{ background:var(--x-sunken); }
.x-footer > .x-wrap{ --padding-top:48px; --padding-bottom:48px; }
.x-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.x-foot .x-logo{display:block;width:120px;line-height:0}
.x-foot .x-logo svg,.x-foot .x-logo img{display:block;width:100%;height:auto}
.x-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.x-foot a{font:400 16px/24px var(--x-font);color:#231f20;text-underline-offset:4px;text-decoration-thickness:1px}
.x-foot a:hover{text-decoration-color:transparent}
.x-foot .x-mail{font:400 14px/20px var(--x-font);color:#595959}

/* ---------- Scroll reveal (class added by custom.js only below the fold) ---------- */
.x-1880 .x-rv.x-pending{opacity:0;transform:translateY(32px);filter:blur(6px)}
.x-1880 .x-rv{transition:opacity 1.1s var(--x-slow),transform 1.1s var(--x-slow),filter 1.1s var(--x-slow)}
.x-1880 .x-d1{transition-delay:.12s}.x-1880 .x-d2{transition-delay:.24s}.x-1880 .x-d3{transition-delay:.36s}.x-1880 .x-d4{transition-delay:.48s}

/* ---------- Editor + reduced motion: everything static and visible ---------- */
.elementor-editor-active .x-1880 *{ animation:none !important; }
.elementor-editor-active .x-split .x-w{ opacity:1 !important; transform:none !important; filter:none !important; }
@media (prefers-reduced-motion:reduce){
  html:has(.x-1880){ scroll-behavior:auto; }
  .x-1880 *, .x-1880 *::before, .x-1880 *::after{ animation:none !important; }
  .x-1880 .x-split .x-w{ opacity:1; transform:none; filter:none; }
  .x-1880 .x-rv.x-pending{ opacity:1; transform:none; filter:none; }
  .x-1880 .x-tagline .x-w{ color:var(--x-ink); transition:none; }
}