/* Arth display headings (Oct 2026): the hand-lettered wordmark images are replaced by live Montserrat text.
   One voice everywhere: Montserrat 500, title case, tight negative tracking, generous size.
   Every heading keeps its original widget, class and position, so scroll / reveal animations still drive it.
   Backup of the wordmark version: /home/u622012155/arth-backups/2026-10-18-before-montserrat/ */

:root {
  --ad-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ad-navy: #021C42;
  --ad-ivory: #F5F4EB;
  --ad-track: -0.035em;
  --ad-xl: clamp(2.5rem, 5.4vw, 5.25rem);   /* page heroes */
  --ad-lg: clamp(2.25rem, 4.2vw, 4.25rem);  /* section titles */
  --ad-ease: cubic-bezier(.22, .8, .2, 1);
}

/* shared base: doubled class beats the old `line-height: 0 !important` / nowrap rules that sized the images */
html body .ar-display.ar-display.elementor-element .elementor-heading-title {
  font-family: var(--ad-font) !important; font-weight: 500 !important; font-style: normal !important;
  letter-spacing: var(--ad-track) !important; text-transform: none !important;
  line-height: 1.02 !important; text-wrap: balance; white-space: normal !important;
  font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  margin: 0; padding: 0;
}

/* ------------------------------------------------------------------ Home */
body.arth-home4 .crt-title--creator.ar-display .elementor-heading-title,
body.arth-home4 .cap4-title.ar-display .elementor-heading-title,
body.arth-home4 .cl-title.ar-display .elementor-heading-title {
  font-size: var(--ad-lg) !important; color: var(--ad-navy) !important;
}
body.arth-home4 .ar-wk-title.ar-display .elementor-heading-title {
  font-size: clamp(2rem, 3.4vw, 3.4rem) !important; color: #fff !important;
}
body.arth-home4 .ftr-heading.ar-display .elementor-heading-title {
  font-size: clamp(2.25rem, 3.5vw, 3.6rem) !important; color: var(--ad-navy) !important; text-align: center;
}
body.arth-home4 .bd-title.ar-display .elementor-heading-title {
  font-size: clamp(3.5rem, 9vw, 8.5rem) !important; letter-spacing: -0.05em !important; line-height: .92 !important;
  color: var(--ad-navy) !important; text-align: center;
}
/* Our / Work split: big words that the opening window pushes apart (JS measures their widths) */
body.arth-home4 .ws-word.ar-display .elementor-heading-title {
  font-size: min(12vw, 24vh) !important; letter-spacing: -0.05em !important; line-height: 1 !important;
  white-space: nowrap !important; color: var(--ad-navy) !important; text-box: trim-both cap alphabetic;
}

/* ------------------------------------------------------------ Inner pages */
body.arth-sp .sp-hero-title.ar-display { width: auto !important; max-width: min(92vw, 1100px); margin: 0 auto !important; }
body.arth-sp .sp-hero-title.ar-display .elementor-heading-title {
  font-size: var(--ad-xl) !important; color: #fff !important; text-align: center;
  text-shadow: 0 2px 30px rgba(2, 28, 66, .18);
  animation: ad-rise 1.1s var(--ad-ease) both .1s;
}
body.arth-sp .sp-hero--plain .sp-hero-title.ar-display .elementor-heading-title { color: var(--ad-navy) !important; text-shadow: none; }
/* the line under About / Contact titles sits a touch closer to live text than it did to the image */
body.arth-sp .sp-hero--plain .sp-hero-title + .ab-hero-line { margin-top: clamp(14px, 1.6vw, 22px) !important; }

/* Our Work page head */
body.arth-sp .wk-title.ar-display { width: auto !important; }
body.arth-sp .wk-title.ar-display .elementor-heading-title {
  font-size: var(--ad-xl) !important; color: inherit !important;
  animation: ad-rise 1.1s var(--ad-ease) both .1s;
}

@keyframes ad-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  :root { --ad-track: -0.03em; }
  body.arth-home4 .crt-title--creator.ar-display .elementor-heading-title,
  body.arth-home4 .cap4-title.ar-display .elementor-heading-title,
  body.arth-home4 .cl-title.ar-display .elementor-heading-title { font-size: clamp(2.1rem, 9.6vw, 2.75rem) !important; }
  body.arth-home4 .ftr-heading.ar-display .elementor-heading-title { font-size: clamp(2.1rem, 10vw, 2.9rem) !important; }
  body.arth-home4 .ar-wk-title.ar-display .elementor-heading-title { font-size: clamp(1.75rem, 8vw, 2.2rem) !important; }
  body.arth-home4 .ws-word.ar-display .elementor-heading-title { font-size: min(15vw, 22vh) !important; }
  body.arth-sp .sp-hero-title.ar-display .elementor-heading-title,
  body.arth-sp .wk-title.ar-display .elementor-heading-title { font-size: clamp(2.1rem, 10vw, 2.9rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.arth-sp .ar-display .elementor-heading-title { animation: none !important; }
}

/* ---------------------------------------------- Home "Our Work": light version (Oct 2026)
   The navy panel becomes the site's ivory; type, pills and links turn navy. Cards are unchanged in layout. */
body.arth-home4 .ar-work { background: var(--ad-ivory) !important; color: var(--ad-navy); }
body.arth-home4 .ar-work::after { display: none; }
body.arth-home4 .ar-wk-head { border-bottom-color: rgba(2, 28, 66, .14) !important; }
body.arth-home4 .ar-wk-title.ar-display .elementor-heading-title { color: var(--ad-navy) !important; }
body.arth-home4 .ar-work .ar-filters button { border-color: rgba(2, 28, 66, .22); color: rgba(2, 28, 66, .72); }
body.arth-home4 .ar-work .ar-filters button:hover { border-color: var(--ad-navy); color: var(--ad-navy); }
body.arth-home4 .ar-work .ar-filters button.is-active { background: var(--ad-navy); border-color: var(--ad-navy); color: var(--ad-ivory); }
body.arth-home4 .ar-work .ar-btn--light .elementor-button { background: var(--ad-navy); border-color: var(--ad-navy); color: var(--ad-ivory); }
body.arth-home4 .ar-work .ar-btn--light .elementor-button:hover { background: transparent; border-color: var(--ad-navy); color: var(--ad-navy); }
body.arth-home4 .ar-tile-media { background: #EDE9E2; }
body.arth-home4 .ar-tile-thumb { background-color: #EDE9E2; opacity: .5; }
body.arth-home4 .ar-tile-thumb:hover, body.arth-home4 .ar-tile-thumb:focus { background-color: #EDE9E2; }
body.arth-home4 .ar-tile-thumb.is-active { box-shadow: 0 2px 0 var(--ad-navy); }
body.arth-home4 .ar-tile-name .elementor-heading-title { color: var(--ad-navy) !important; }
body.arth-home4 .ar-tile-scope { color: rgba(2, 28, 66, .6); }
body.arth-home4 .ar-tile-more .elementor-button { color: var(--ad-navy); border-bottom-color: rgba(2, 28, 66, .35); }
body.arth-home4 .ar-tile-more .elementor-button:hover { color: #A6445D; border-color: #A6445D; }
body.arth-home4 .ar-tile-count { color: rgba(2, 28, 66, .5); }
body.arth-home4 .ar-wk-title.ar-display .elementor-heading-title { white-space: nowrap !important; }
@media (min-width: 1025px) {
  /* title | filters (left-aligned, scroll sideways if categories grow) | View All */
  body.arth-home4 .ar-wk-head { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: clamp(24px, 3vw, 48px) !important; align-items: center !important; }
  body.arth-home4 .ar-wk-head > .ar-wk-filters { justify-self: stretch !important; align-self: center !important; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 0 !important; }
  body.arth-home4 .ar-wk-head > .ar-wk-filters::-webkit-scrollbar { display: none; }
  body.arth-home4 .ar-wk-head .ar-filters { flex-wrap: nowrap !important; justify-content: flex-start !important; width: max-content; }
}

/* Home "Our Work" cards: a quiet frame so each project reads as one object (Oct 2026) */
body.arth-home4 .ar-work { --cp: 10px; }
body.arth-home4 .ar-wk-grid > .ar-tile {
  box-sizing: border-box; padding: var(--cp) var(--cp) calc(var(--cp) * 1.6) !important;
  background: #FBFAF6; border: 1px solid rgba(2, 28, 66, .1);
  transition: border-color .4s var(--ad-ease), box-shadow .5s var(--ad-ease), transform .5s var(--ad-ease);
}
body.arth-home4 .ar-wk-grid > .ar-tile .ar-tile-name { margin-top: 12px; }
body.arth-home4 .ar-wk-grid > .ar-tile .ar-tile-scope { margin-top: 3px; }
@media (hover: hover) {
  body.arth-home4 .ar-wk-grid > .ar-tile:hover { border-color: rgba(2, 28, 66, .26); box-shadow: 0 22px 40px -28px rgba(2, 28, 66, .45); transform: translateY(-2px); }
}
/* the frame adds height; take it back from the image so two rows still fit one screen */
@media (min-width: 768px) {
  body.arth-home4 .ar-tile-media { height: clamp(110px, calc((100vh - 2 * var(--wk-pad) - 118px - var(--wk-gap)) / 2 - 92px - var(--cp) * 2.6 - 2px), 290px); }
}
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  body.arth-home4 .ar-work { --cp: 6px; }
  body.arth-home4 .ar-wk-grid > .ar-tile .ar-tile-name { margin-top: 8px; }
}
@media (max-width: 767px) {
  body.arth-home4 .ar-tile-media { height: clamp(104px, calc((100svh - 400px) / 2 - 18px), 214px); }
}
/* filtered views: results start at the top-left under a header that never moves (min-height set by JS) */
body.arth-home4 .ar-wk-grid { align-content: start; align-items: stretch; }
@media (prefers-reduced-motion: reduce) { body.arth-home4 .ar-wk-grid > .ar-tile { transition: none; } }

/* card thumbnail strips never push past the card (Our Work page at tablet widths) */
body .ar-tile-thumbs { min-width: 0; max-width: 100%; overflow: hidden; }
body .ar-tile-thumbs .ar-tile-more { flex: 0 0 auto; }
@media (max-width: 1024px) { body.arth-sp .ar-tile-thumbs .ar-tile-thumb:nth-child(n+3) { display: none; } }

/* tablet: cards are narrow, so the strip keeps only "View details" (thumbnails stay in the popup) */
@media (max-width: 1024px) {
  body.arth-home4 .ar-tile-thumbs .ar-tile-thumb, body.arth-sp .ar-tile-thumbs .ar-tile-thumb { display: none; }
  body.arth-home4 .ar-tile-thumbs .ar-tile-more, body.arth-sp .ar-tile-thumbs .ar-tile-more { margin-left: 0; }
}

/* Home "Our Services" on phones: a 2×2 grid of portrait tiles (number, name, arrow); the whole tile links.
   Taglines and lists stay on desktop/tablet and on each service page. */
@media (max-width: 767px) {
  body.arth-home4 .e-con.ar-cap-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.arth-home4 .e-con.ar-cap, body.arth-home4 .e-con.ar-cap.is-active { height: auto !important; aspect-ratio: 3 / 4; }
  body.arth-home4 .ar-cap .ar-cap-line, body.arth-home4 .ar-cap.is-active .ar-cap-line { display: none; }
  body.arth-home4 .e-con.ar-cap-body { padding: 14px 14px 14px !important; }
  body.arth-home4 .ar-cap-num { font-size: .6rem; margin-bottom: 6px !important; }
  body.arth-home4 .ar-cap-name .elementor-heading-title { font-size: .86rem !important; letter-spacing: .06em; }
  body.arth-home4 .e-con.ar-cap-body::after {
    content: "\2192"; position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.6);
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; line-height: 1; letter-spacing: 0;
  }
  body.arth-home4 .ar-cap::after { background: linear-gradient(180deg, rgba(2,28,66,0) 40%, rgba(2,28,66,.78) 100%) !important; }
}

/* ==========================================================================
   Home on phones: rhythm + balance pass (Oct 2026)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero: the box is exactly the video's frame (16:9 video shown 178vw wide → 100vw tall), no navy bands.
     Only a light fade at the top so the header stays legible. */
  body.arth-home4 .e-con.svc-hero { height: 100vw !important; background: #021C42; }
  body.arth-home4 .svc-hero .elementor-background-video-container video.elementor-background-video-hosted {
    top: 50% !important; -webkit-mask-image: none !important; mask-image: none !important; }
  body.arth-home4 .e-con.svc-hero::after {
    background: linear-gradient(180deg, rgba(2, 28, 66, .38) 0%, rgba(2, 28, 66, 0) 26%, rgba(2, 28, 66, 0) 82%, rgba(2, 28, 66, .16) 100%) !important; }

  /* Client strip: label sits above, logos get the full width — 3 to 4 visible at a glance */
  body.arth-home4 .e-con.cr-ribbon { flex-direction: column !important; min-height: 0; padding: 12px 0 14px !important; gap: 8px !important; }
  body.arth-home4 .e-con.cr-label { width: 100% !important; padding: 0 16px !important; background: transparent !important; justify-content: center !important; align-items: center !important; border: 0 !important; }
  body.arth-home4 .e-con.cr-label::after, body.arth-home4 .e-con.cr-label::before { display: none !important; }
  body.arth-home4 .cr-label-text .elementor-heading-title { font-size: 9.5px !important; letter-spacing: .3em !important; opacity: .7; }
  body.arth-home4 .e-con.cr-track { width: 100% !important; flex: 0 0 auto !important; height: 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
  body.arth-home4 .cr-ribbon .sta-ticker img.sta-logo { transform: none !important; height: auto !important; width: auto !important; max-height: 24px; max-width: 76px; object-fit: contain; }
  body.arth-home4 .cr-ribbon .sta-ticker i { margin: 0 14px !important; font-size: 5px !important; }
  body.arth-home4 .cr-ribbon .sta-ticker .elementor-heading-title { animation-duration: 55s !important; }

  /* Even rhythm: Services → Stats → Our Work */
  body.arth-home4 .e-con.cap4-section { padding-bottom: 40px !important; }
  body.arth-home4 .e-con.sta-section { padding-top: 0 !important; padding-bottom: 48px !important; }

  /* Final image before the footer */
  body.arth-home4 .e-con.ms-section { height: 80svh !important; min-height: 0 !important; }

  /* Timeless Elevated + gallery: one composed sequence. The panel sizes to its content; the gallery
     continues on ivory with the same 16px edges, two columns and soft fades, like the studio wall. */
  body.arth-home4 .e-con.ftr-section { height: auto !important; padding: 16px 16px 8px !important; }
  body.arth-home4 .ftr-section > .e-con, body.arth-home4 .e-con.ftr-panel, body.arth-home4 .e-con.ftr-inner { height: auto !important; }
  body.arth-home4 .e-con.ftr-left { padding: 30px 20px 26px !important; }
  body.arth-home4 .e-con.ftr-image { flex: 0 0 auto !important; aspect-ratio: 4 / 5 !important; }
  body.arth-home4 .e-con.gl-section { background: #F5F4EB !important; height: 72svh !important; padding: 0 16px 0 !important; --gl-g: 8px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  body.arth-home4 .e-con.gl-col--3 { display: none !important; }
}
@media (max-width: 767px) {
  /* mission heading: justified text opens holes between words on a narrow screen */
  body.arth-home4 .ms-section .elementor-heading-title, body.arth-home4 .ms-section .elementor-heading-title * { text-align: left !important; text-align-last: auto !important; word-spacing: normal !important; }
}
@media (max-width: 767px) {
  /* Build prints: square covers, a stronger service name, a quieter "Start now", more air below */
  body.arth-home4 .e-con.bd-section { padding-bottom: 80px !important; }
  body.arth-home4 .e-con.bd-rail { row-gap: 34px !important; }
  body.arth-home4 .bd-svc-img img { aspect-ratio: 1 / 1 !important; }
  body.arth-home4 .bd-svc-name { margin-top: 14px !important; }
  body.arth-home4 .bd-svc-name .elementor-heading-title { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .12em !important; color: #021C42 !important; }
  body.arth-home4 .bd-svc-cta { margin-top: 6px !important; }
  body.arth-home4 .bd-svc-cta .elementor-button { font-size: 8.5px !important; letter-spacing: .18em !important; opacity: .75; }
  body.arth-home4 .bd-svc-cta .elementor-button svg, body.arth-home4 .bd-svc-cta .elementor-button-icon { width: 9px; height: 9px; }

  /* Gallery: ivory margins outside, navy between the images (framed like the Timeless panel above) */
  body.arth-home4 .e-con.gl-section { -webkit-mask-image: none !important; mask-image: none !important; padding: 0 16px 16px !important; height: 72svh !important; }
  body.arth-home4 .e-con.gl-grid { background: #021C42; padding: 8px !important; box-sizing: border-box; }
}

/* ==========================================================================
   Our Work page: project cards on the navy page (Oct 2026)
   An ivory print with an even inner margin, a 4:5 cover, a tidy strip (4 thumbnails + View details),
   then a ruled caption: project name over a small uppercase service line.
   ========================================================================== */
body.arth-sp .wk-grid { align-items: stretch; row-gap: clamp(28px, 3vw, 44px) !important; }
body.arth-sp .wk-grid > .ar-tile {
  --cp: 12px; display: flex; flex-direction: column; box-sizing: border-box;
  padding: var(--cp) var(--cp) 18px !important; background: #EFEADF !important; border: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px rgba(0, 0, 0, .55);
  transition: transform .5s cubic-bezier(.22,.8,.2,1), box-shadow .5s cubic-bezier(.22,.8,.2,1);
}
@media (hover: hover) {
  body.arth-sp .wk-grid > .ar-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); }
}
body.arth-sp .wk-grid .ar-tile-media { background: #E4DDCF; } /* keeps the page's original landscape cover height */
body.arth-sp .wk-grid .ar-tile-frame .ar-tile-cat { top: 10px; left: 10px; }
/* strip: up to four thumbnails, View details always visible on the right */
body.arth-sp .wk-grid .ar-tile-thumbs { margin-top: 10px; gap: 5px; align-items: center; min-height: 26px; }
body.arth-sp .wk-grid .ar-tile-thumb { width: 30px; height: 22px; opacity: .5; background-color: #E4DDCF; }
body.arth-sp .wk-grid .ar-tile-thumb:nth-child(n+5) { display: none; }
body.arth-sp .wk-grid .ar-tile-thumb.is-active { opacity: 1; box-shadow: 0 2px 0 #021C42; }
body.arth-sp .wk-grid .ar-tile-thumbs .ar-tile-more { margin-left: auto !important; }
body.arth-sp .wk-grid .ar-tile-more .elementor-button { color: #021C42 !important; border-bottom-color: rgba(2, 28, 66, .35) !important; font-size: .6rem; }
body.arth-sp .wk-grid .ar-tile-more .elementor-button:hover { color: #A6445D !important; border-color: #A6445D !important; }
/* caption */
body.arth-sp .wk-grid .ar-tile-name { margin-top: 14px !important; padding: 14px 2px 0; border-top: 1px solid rgba(2, 28, 66, .1); }
body.arth-sp .wk-grid .ar-tile-name .elementor-heading-title { font: 600 clamp(1rem, 1.15vw, 1.15rem)/1.25 "Montserrat", sans-serif !important; color: #021C42 !important; letter-spacing: -.005em; }
body.arth-sp .wk-grid .ar-tile-scope { margin-top: 6px !important; padding: 0 2px; font: 600 .62rem/1.4 "Montserrat", sans-serif !important; letter-spacing: .16em; text-transform: uppercase; color: rgba(2, 28, 66, .55) !important; }

@media (max-width: 1024px) {
  body.arth-sp .wk-grid > .ar-tile { --cp: 10px; padding-bottom: 16px !important; }
}
@media (max-width: 767px) {
  body.arth-sp .wk-grid > .ar-tile { --cp: 8px; padding-bottom: 14px !important; }
  body.arth-sp .wk-grid .ar-tile-name { margin-top: 10px !important; padding-top: 10px; }
  body.arth-sp .wk-grid .ar-tile-name .elementor-heading-title { font-size: .92rem !important; }
  body.arth-sp .wk-grid .ar-tile-scope { font-size: .55rem !important; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { body.arth-sp .wk-grid > .ar-tile { transition: none; } }

/* Our Work page: less air above the "Our Work" heading (was header + up to 88px) */
body.arth-sp .e-con.sp-work { padding-top: calc(72px + clamp(16px, 2.2vw, 32px)) !important; }
@media (max-width: 767px) { body.arth-sp .e-con.sp-work { padding-top: calc(64px + 18px) !important; } }