/* Hallmark · shape: kept · genre: editorial · theme: brand (DESIGN.md, locked) · redesign: restyle
 * paper: oklch(98.4% 0.004 255) · accent: oklch(58% 0.1 222) · display: Roboto · body: Roboto · hero: kept · nav: kept · footer: kept · signature: kept
 * axes: light/grotesk-sans/cool · posture: kept · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R5 V3 · weakest: S, the kept Bootstrap layout is generic; specificity carried by the slate frame, the logo teal and the real photography instead of new composition */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 unresolved (capitals stored in page texts, owner's copy) · gap: none */
/* Hallmark · waive 1 · DESIGN.md names Roboto as display and body · the brand face of EXIP is kept by the locked design system */
/* Hallmark · waive 24b · legacy.css spacing comes from the kept Bootstrap 2 layout · restyle keeps the layout of every page unchanged */
/* Hallmark · waive 37 · every family in legacy.css resolves to the font tokens · only Roboto renders on the site */
/* Hallmark · waive 49b · sidebar links are service page titles like Trademark registration · the narrow tablet sidebar wraps long service names instead of truncating them */
/* Hallmark · dismissed 40 · checked every flagged rule: Bootstrap 2 states not used on the site (btn-info, nav-pills, control-group warning, badge, pager); the contact inputs are re-coloured in exip.css to ink on paper */
/* Hallmark · dismissed 41 · navbar btn-navbar label comes from legacy Bootstrap, exip.css repaints the toggle slate with paper bars */
/* Hallmark · answered F4 · payment__button is a legacy rule with no markup on any page; the only filled primary is the slate button */
/* Hallmark · answered F5 · the technical expertise icon sits on a square slate tile over the photo so it stays readable; no tinted circle */
@import url("./tokens.css");
@import url("./base.css");
@import url("./legacy.css");

/* ---------- Kept layout: undo base rules that would move it ---------- */
.container { padding-inline: 0; }
p:not([class]), h1, h2, h3 { max-width: none; }

/* ---------- Type: sentence case, readable body (DESIGN.md · Typography) ---------- */
body { font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); }
p, li, dd, dt, td, th { font-size: var(--text-md); line-height: 1.6; }
h1, h2, h3, h4, h6, .txt1, .bot1_title, .navbar_ .nav > li > a { text-transform: none; letter-spacing: normal; }
h1 { font-weight: var(--display-weight); font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.15; color: var(--color-ink-2); }
h2 { font-weight: var(--display-weight); font-size: clamp(2rem, 1.6vw + 1rem, 2.5rem); line-height: 1.15; color: var(--color-ink-2); }
h3 { font-weight: 400; font-size: var(--text-lg); line-height: 1.35; color: var(--color-ink-2); }
h4 { font-weight: 700; font-size: var(--text-md); line-height: 1.4; color: var(--color-ink-2); }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
a { color: var(--color-accent-strong); }
a:hover { color: var(--color-ink-2); }

/* ---------- Focus: instant, visible on every band ---------- */
:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 2px; }
.bot1_wrapper, .tech__service-name { --color-focus: var(--color-focus-on-frame); }
:focus:not(:focus-visible) { outline: none; }


/* ---------- Header: flat paper strip, half the height ---------- */
#main { padding-top: 0; }
.top1_inner .bg { background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.navbar_ .nav > li > a { padding: 36px 0; font-size: 0.9375rem; font-weight: 400; color: var(--color-ink); border-top: 2px solid transparent; border-bottom: 2px solid transparent; transition: color var(--dur-micro) ease-out, border-color var(--dur-micro) ease-out; }
.navbar_ .nav > li > a:hover, .navbar_ .nav > li.sfHover > a { color: var(--color-accent-strong); border-color: transparent; border-bottom-color: transparent; }
.navbar_ .nav > li.active > a, .navbar_ .nav > li.active > a:hover { color: var(--color-ink); border-top-color: transparent; border-bottom-color: var(--color-accent); }
.navbar_ .nav > li { margin-left: 28px; }
.sub-menu ul { top: 96px; background: var(--color-paper); border: 1px solid var(--color-rule); box-shadow: var(--shadow-hover); }
.sub-menu li { border-bottom: 1px solid var(--color-rule); }
.sub-menu li:last-child { border-bottom: 0; }
.sub-menu li a, .sub-menu ul li a { color: var(--color-ink); font-size: 0.9375rem; text-transform: none; background: none; }
.sub-menu li a:hover, .sub-menu ul li a:hover { color: var(--color-accent-strong); background: var(--color-paper-2); }
.navbar_ .btn-navbar { background: var(--color-frame); border-radius: var(--radius-control); margin-top: 28px; margin-bottom: 28px; transition: background-color var(--dur-micro) ease-out; }
.navbar_ .btn-navbar:hover { background: var(--color-frame-2); }

/* ---------- Buttons: solid, near-square (DESIGN.md · Buttons) ---------- */
.button0, #ajax-contact-form .submit, input.wpcf7-submit {
  display: inline-block; margin: var(--space-xs) 0; padding: 14px 28px; height: auto; line-height: 1.4;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: normal; text-transform: none;
  color: var(--color-paper); background: var(--color-frame); border: 0; border-radius: var(--radius-control);
  text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) ease-out;
}
.button0:hover, #ajax-contact-form .submit:hover, input.wpcf7-submit:hover { color: var(--color-paper); background: var(--color-accent-strong); }
.button0:active, #ajax-contact-form .submit:active { background: var(--color-frame-2); }

/* ---------- Home slider text ---------- */
.caroufredsel_slide1 > .block2 .txt1 { text-transform: none; font-weight: var(--display-weight); font-size: clamp(2.25rem, 2.4vw + 1rem, 3rem); line-height: 1.1; color: var(--color-ink-2); }
.caroufredsel_slide1 > .block2 .txt1 span { color: var(--color-frame); }
.caroufredsel_slide1 > .block2 .txt2 { font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); }

/* ---------- Cards: title with the slate rule, flat at rest ---------- */
.what .what_inner a .caption { border-bottom: 2px solid var(--color-frame); transition: border-color var(--dur-micro) ease-out; }
.what .what_inner a .txt1 { text-transform: none; font-size: var(--text-lg); line-height: 1.35; color: var(--color-ink-2); }
.what .what_inner a:hover .caption { border-bottom-color: var(--color-accent-strong); }
.what .what_inner a:hover .txt1 { color: var(--color-accent-strong); }
.thumbnails2 .thumbnail h3, .thumbnails2 .thumbnail h4 { color: var(--color-ink-2); }
.thumbnails.thumbnails2 .thumbnail:hover h3, .thumbnails.thumbnails2 .thumbnail:hover h4 { color: var(--color-accent-strong); }
.tech__service-name { background-color: var(--color-frame); color: var(--color-on-frame); font-size: var(--text-md); transition: background-color var(--dur-micro) ease-out, color var(--dur-micro) ease-out; }
.tech__service-link:hover .tech__service-name { background-color: var(--color-paper-2); color: var(--color-ink-2); }
.tech__service-icon { background: var(--color-frame); border-radius: 0; color: var(--color-on-frame); font-size: var(--text-lg); }

/* ---------- Reading measure and quotes ---------- */
.content1 p, .content2 p, .content3 p { max-width: 72ch; }
blockquote { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); }
blockquote p { color: var(--color-ink-2); }

/* ---------- Sidebar list ---------- */
.ul1 > li { font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); }
.ul1 > li a { color: var(--color-muted); }
.ul1 > li a:hover { color: var(--color-accent-strong); }

/* ---------- Blog navigation ---------- */
.article1__next, .article1__prev { font-size: var(--text-md); font-weight: 400; color: var(--color-accent-strong); transition: color var(--dur-micro) ease-out; }
.article1__next:hover, .article1__prev:hover { color: var(--color-ink-2); }
.article1_title a:hover { color: var(--color-accent-strong); }

/* ---------- Contact form (DESIGN.md · Inputs) ---------- */
#ajax-contact-form input:not(.submit), #ajax-contact-form textarea {
  box-sizing: border-box; width: 426px; max-width: 100%; padding: var(--space-sm);
  font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-rule); border-radius: var(--radius-control); box-shadow: none;
}
#ajax-contact-form input:not(.submit) { height: 46px; }
#ajax-contact-form textarea { height: 132px; }
#ajax-contact-form input:not(.submit)::placeholder, #ajax-contact-form textarea::placeholder { color: var(--color-muted); opacity: 1; }
#ajax-contact-form input:not(.submit):focus-visible, #ajax-contact-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
#ajax-contact-form .wpcf7-not-valid-tip { color: var(--color-error); font-size: var(--text-sm); }
#ajax-contact-form .wpcf7-response-output { font-size: var(--text-md); color: var(--color-error); }
#ajax-contact-form .wpcf7-mail-sent-ok, #ajax-contact-form form.sent .wpcf7-response-output { color: var(--color-success); }

/* ---------- Footer: sentence-case titles, readable size ---------- */
.bot1 { font-size: var(--text-sm); line-height: 1.6; color: var(--color-on-frame-muted); }
.bot1 p { font-size: var(--text-sm); }
.bot1_title { font-size: var(--text-sm); font-weight: 700; color: var(--color-on-frame); }
.copyright a, .footer-address a, .location1 a { color: var(--color-on-frame-muted); border-bottom-color: var(--color-on-frame-muted); }
.copyright a:hover, .footer-address a:hover, .location1 a:hover { color: var(--color-on-frame); border-bottom: 1px solid var(--color-on-frame); }
.social li a { transition: opacity var(--dur-micro) ease-out; }

/* ---------- Finish review fixes ---------- */
/* hero: text centred against the photo; on phones the photo sits under the text */
@media (min-width: 768px) {
  .caroufredsel_slide1 > .block2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 500px; }
  .caroufredsel_slide1 > .block2 .txt1 { padding-top: 0; }
}
@media (min-width: 768px) and (max-width: 979px) { .caroufredsel_slide1 > .block2 { height: 400px; } }
@media (max-width: 767px) {
  .caroufredsel_slide1 { display: flex; flex-direction: column-reverse; }
  .caroufredsel_slide1 > .block1 { position: relative; height: 220px; width: 100%; margin-top: var(--space-md); opacity: 1; }
  .caroufredsel_slide1 > .block1 figure { left: auto; margin-left: 0; height: 100%; }
  .caroufredsel_slide1 > .block1 figure .img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; opacity: 1; }
  .caroufredsel_slide1 > .block2 .txt1 { padding-top: var(--space-lg); }
}
/* sidebar head keeps its weight over the list */
.span3 > h3 { font-weight: 700; font-size: var(--text-md); }
/* lists share the paragraph measure */
.content1 ul:not([class]), .content1 ol:not([class]) { max-width: 72ch; }
/* contact fields back to their old outer width */
#ajax-contact-form input:not(.submit), #ajax-contact-form textarea { width: 452px; }
/* language switcher aligned with the container's right edge */
/* back to top: slate square with a visible arrow, clear of the text column */
#toTop { width: 44px; height: 44px; right: var(--space-md); bottom: var(--space-md); background: var(--color-frame); border-radius: var(--radius-control); text-indent: -999px; }
#toTop::before { content: ""; position: absolute; left: 50%; top: 55%; width: 12px; height: 12px; border-left: 2px solid var(--color-on-frame); border-top: 2px solid var(--color-on-frame); transform: translate(-50%, -50%) rotate(45deg); }
#toTopHover { display: none; }
#toTop:hover { background: var(--color-accent-strong); }

/* ---------- Mobile navigation (below 768px, where the toggle shows) ---------- */
@media (max-width: 767px) {
  .top1_wrapper { position: relative; }
  .top1_wrapper .container, .top1_wrapper .top1_inner, .top1_wrapper .top1 { position: static; }
  .top1 { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: var(--space-sm) var(--space-md); }
  header { position: static; top: auto; left: auto; transform: none; max-width: none; padding: 0; }
  .logo_wrapper { max-width: 168px; }
  .logo_wrapper img { width: 100%; height: auto; }
  .top1_wrapper .menu_wrapper { position: static; float: none; margin: 0; padding: 0; }
  .top1_wrapper .navbar_, .top1_wrapper .navbar_ .navbar-inner_ { position: static; padding: 0; margin: 0; background: none; }
  .navbar_ .btn-navbar { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: var(--radius-control); background: var(--color-frame); }
  .top1_wrapper .navbar_ .btn-navbar { flex-direction: column; gap: 5px; }
  .top1_wrapper .navbar_ .btn-navbar .icon-bar { width: 20px; height: 2px; margin: 0; border-radius: 0; background: var(--color-paper); box-shadow: none; }
  /* open state: the three bars become an X (the panel's .in class is the reliable open flag) */
  .top1_wrapper .navbar_ .btn-navbar .icon-bar { transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
  .top1_wrapper .navbar-inner_:has(.nav-collapse_.in) .btn-navbar .icon-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top1_wrapper .navbar-inner_:has(.nav-collapse_.in) .btn-navbar .icon-bar:nth-child(2) { opacity: 0; }
  .top1_wrapper .navbar-inner_:has(.nav-collapse_.in) .btn-navbar .icon-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navbar_ .btn-navbar:hover { background: var(--color-frame-2); }
  .top1_wrapper .nav-collapse_.collapse { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; height: 0; overflow: hidden; text-align: left; background: var(--color-paper); border-top: 1px solid var(--color-rule); box-shadow: var(--shadow-hover); }
  .top1_wrapper .nav-collapse_.collapse.in { height: auto; max-height: calc(100vh - 88px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .navbar_ .nav { float: none; margin: 0; padding: var(--space-xs) 0 var(--space-md); }
  .navbar_ .nav > li { float: none; margin: 0; white-space: normal; border-bottom: 1px solid var(--color-rule); }
  .navbar_ .nav > li:last-child { border-bottom: 0; }
  .navbar_ .nav > li > a { display: block; min-height: 52px; padding: 14px var(--space-md); font-size: 1rem; line-height: 1.35; color: var(--color-ink); border: 0; background: none; }
  .navbar_ .nav > li > a:hover, .navbar_ .nav > li.sfHover > a { background: var(--color-paper-2); color: var(--color-accent-strong); border: 0; }
  .navbar_ .nav > li.active > a { color: var(--color-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-accent); }
  /* submenus open on hover only (Superfish); on touch they are listed under their parent */
  .sub-menu ul { position: static; display: block !important; top: auto; background: none; border: 0; box-shadow: none; padding: 0 0 var(--space-sm); }
  .sub-menu li { border-bottom: 0; }
  .sub-menu li a { min-height: 44px; padding: 10px var(--space-md) 10px calc(var(--space-md) + var(--space-md)); font-size: 0.9375rem; color: var(--color-muted); }
  .sub-menu li a:hover { background: var(--color-paper-2); color: var(--color-accent-strong); }
}

/* ---------- Section photos take the panel tint: their white backgrounds blend into the palette ---------- */
#main .front .content1_inner .bg, #main .front .content2_inner .bg, #main .front .content3_inner .bg, .front .content1_inner .bg, .front .content2_inner .bg, .front .content3_inner .bg { background-blend-mode: multiply; }

/* ---------- Phone: section backgrounds span the full width (no legacy offset, no slate showing at the sides) ---------- */
@media (max-width: 767px) {
  #main .top1_inner .bg, #main .top2_inner .bg, #main .content1_inner .bg, #main .content2_inner .bg, #main .content3_inner .bg, #main .bot1_inner .bg {
    left: calc(-1 * var(--space-md)); right: calc(-1 * var(--space-md)); width: auto; background-position: 100% 0;
  }
  body { padding-left: 0; padding-right: 0; }
  .container, .top1_inner, .top1, .top2_inner, .top2, .content1_inner, .content1, .content2_inner, .content2, .content3_inner, .content3, .bot1_inner, .bot1, .row { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }
  .container { padding-inline: var(--space-md); }
  .top1 { padding-inline: var(--space-md); }
  .top2_wrapper, .content1_wrapper, .content2_wrapper, .content3_wrapper, .bot1_wrapper { overflow: hidden; }
  #main { overflow: hidden; }
}

/* ---------- Tablet (768–979px): horizontal menu, tighter gaps ---------- */
@media (min-width: 768px) and (max-width: 979px) {
  .navbar_ .nav > li { margin-left: 20px; }
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  #ajax-contact-form input:not(.submit), #ajax-contact-form textarea { width: 100%; }
}