/* ============================================================================
   THE EDIT - site stylesheet.

   One file, enqueued at priority 999 so it lands after Elementor's generated
   CSS. Pattern carried over from PEF.

   SAME IN THE EDITOR AS ON THE PAGE - three rules every selector follows:
   1. Start Elementor-scoped selectors with `body .elementor`, never bare
      `.elementor`. Elementor emits classes as `.elementor .foo` (0,2,0); in
      the editor it injects those styles AFTER this file, so a bare tie loses
      there while winning on the front end. The extra `body` wins both.
   2. Never rely on a Heading, Paragraph or Image being a direct child: the
      editor wraps each in a display:contents div. Write `.box h2` (or add
      `.box > .elementor-widget > h2` beside `.box > h2`).
   3. Never count children with plain :nth-child/:first-child: the editor
      puts an overlay div first in every container. Count by class,
      e.g. :nth-child(2 of .project).

   MOST TOKENS LIVE IN ELEMENTOR (Site Settings -> Variables): palette,
   spacing, type scale, families, button padding. DO NOT REDEFINE AN
   ELEMENTOR VARIABLE HERE - this file loads after the kit CSS, so a restated
   variable silently overrides the panel and makes it inert.

   Only what cannot be an Elementor variable lives in section 1: values that
   change at a breakpoint, unitless ratios, multi-part values.

   CONTENTS
     1  Tokens .............. breakpoint-dependent and unitless values
     2  Base ................ paper ground, smoothing, editorial italics
     3  Buttons ............. the remainder; the system lives in Elementor
     4  Header .............. fixed bar + WordPress menu (Nav Menu widget)
     5  Phone menu .......... the Nav Menu dropdown as a full-screen panel
     6  Work With Us tab .... fixed to the right edge, reads upwards
     7  Footer
     8  Hero ................ full-height video/photo opener (class `hero`)
     9  Section label, text links
     10 Home sections ....... intro to recognition (10a-10h)
     11 Contact band ........ dark closing section (class `contact-band`)
     12 Entrances ........... scroll-in animations (reveal, reveal-image, reveal-fade)
     13 Layout grid ......... design aid behind the page, Admin bar > Grid
     14 Reduced motion
     15 Inner pages ......... everything after the homepage (15a-15g)
     16 Jobs ................ job pages and the Careers list (inc-jobs.php)
     17 Clients ............. the Clients page logo wall (class `client-wall`)
   ========================================================================= */


/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  /* Page gutter. The mockup runs edge to edge with a 16px gutter at every
     width; section-pad-inline (an Elementor variable) reads this. */
  --gutter-page:16px;

  /* Header height, single source of truth. Read by the header bar and by
     section-pad-top-hero. 116px reproduces the approved mockup, whose untrimmed
     92px-square logo made the bar 12 + 92 + 12 and centred the nav at 58px
     (108px on phones: 12 + 84 + 12). */
  --hdr-h:116px;

  /* Unitless ratios (the size variable type needs a unit). */
  --display-lh:0.87;   --display-tracking:-0.058em;
  --headline-lh:0.93;  --title-lh:1.02;  --title-tracking:-0.045em;
  --body-lh:1.35;      --label-tracking:0.035em;

  /* Headline italics are set at 1.2x the sans size so the serif x-height
     matches (design direction). */
  --italic-scale:1.2;

  --rule:1px solid var(--border-hairline);
  --ease-out:cubic-bezier(.2,.75,.2,1);

  /* Inner-page headline sizes (the mockup's --h2-size / --h3-size). The h2
     size steps down on phones, so it can't be an Elementor variable. */
  --edit-h2:var(--text-display-lg, clamp(3.5rem, 6vw, 7rem));
  --edit-h3:var(--text-display-md, clamp(2.3rem, 4.3vw, 5rem));
}
@media (max-width:800px){ :root{ --edit-h2:clamp(3.2rem, 12vw, 5.6rem); } }


/* 2. BASE ------------------------------------------------------------------ */
html,
body{ background:var(--surface-page, #FAFAFA); }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Italics are always the editorial serif (mockup: em { font-family: serif }). */
em{
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-style:italic;
  font-weight:400;
}
/* ...and inside a headline they run at 1.2x so the serif x-height matches. */
h1 em, h2 em, h3 em,
.e-heading-base em{
  font-size:calc(var(--italic-scale) * 1em);
  line-height:inherit;
  letter-spacing:inherit;
}

/* Atomic paragraphs sit in flex/grid layouts that space them with gap; the
   kit's paragraph spacing would add a second, uneven margin. */
body .elementor .e-paragraph-base{ margin:0; }

/* Headings take the section's ink on dark grounds (the kit sets ink on
   h1-h6 at (0,1,1)). */
body .elementor .on-dark :is(h1, h2, h3, h4, h5, h6){ color:inherit; }

/* Phone headline size (mockup: --h2-size at <=800px). A heading carrying a
   size class keeps the class size. */
@media (max-width:800px){
  body .elementor h2{ font-size:clamp(3.2rem, 12vw, 5.6rem); }
}

/* Headline leading as a ratio, not a length. The kit stores h2 line-height
   in em, which the 1.2x italic line would inherit as fixed pixels and sit
   too tight (the mockup's is unitless .93). Classed headings keep theirs. */
body .elementor h2{ line-height:var(--headline-lh, .93); }


/* `hidden` loses to any class that sets display; make it absolute. */
[hidden]{ display:none !important; }


/* 3. BUTTONS ---------------------------------------------------------------
   The system lives in Elementor: `btn` (shape, label type) + a variant
   (`btn-primary` solid Black Cherry, `btn-text` plain link). This section is
   only what has no Elementor prop, plus the unclassed safety net. Global
   classes render by LABEL, e.g. `.elementor .btn`. */
body .elementor .btn,
body .elementor .e-button-base{
  font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
  box-sizing:border-box;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
body .elementor .btn{
  transition:background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
body .elementor .btn:focus-visible,
body .elementor .e-button-base:focus-visible{
  outline:1px solid var(--focus-ring, #760617);
  outline-offset:3px;
}

/* Text button: the mockup's underlined link (label + hairline underline). */
body .elementor .btn-text{
  text-transform:none;
  letter-spacing:0;
  font-size:16px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-skip-ink:none;
}

/* Unclassed fallback. Atomic buttons ignore Site Settings > Buttons (that
   compiles to `.elementor-kit-N button, .elementor-button`; an atomic button
   is an <a class="e-button-base">) and otherwise come out Elementor blue
   (#375EFB). Anything dropped without `btn` still gets The Edit's primary
   button. Safety net only - the correct markup is `btn` + a variant.
   KEEP THIS CHAIN SHORT (one exemption). */
body .elementor .e-button-base:not(.btn){
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  background-color:var(--cherry, #760617);
  color:var(--white, #FFFFFF);
  border:0;
  border-radius:0;
  padding:var(--btn-pad-y, 18px) var(--btn-pad-x, 30px);
  font-weight:400; font-size:12px; line-height:1; letter-spacing:.04em;
  text-transform:uppercase;
  transition:background-color 180ms ease-out;
}
body .elementor .e-button-base:not(.btn):hover{
  background-color:var(--ink, #1E1E1E);
  color:var(--white, #FFFFFF);
}


/* Skip link: hidden until focused. */
.skip-link{
  position:fixed; z-index:100; top:8px; left:8px;
  padding:10px 14px; background:var(--ink, #1E1E1E); color:var(--white, #FFFFFF);
  font-size:12px; letter-spacing:.035em; text-transform:uppercase;
  transform:translateY(-200%);
}
.skip-link:focus{ transform:none; outline:1px solid var(--white, #FFFFFF); outline-offset:-4px; }


/* 4. HEADER ------------------------------------------------------------------
   Templates > Theme Builder > "Site header". The links are the WordPress menu
   Appearance > Menus > "Main menu", shown by Elementor's Nav Menu widget
   (CSS class site-menu). The bar floats over the page, transparent; its ink
   follows the section underneath: white over `on-dark`, ink elsewhere
   (the-edit.js toggles body.edit-header-on-dark). A page whose Header Style is
   "White" starts white before the script runs.

   Menu item CSS classes (Appearance > Menus > Screen Options > CSS Classes):
     push-right   starts the right-hand group, after the logo (desktop)
     nav-arrow    adds the small diagonal arrow after the label
     menu-social  phone menu only, shown as an outlined pill
   Breakpoint 767px = the Nav Menu widget's Breakpoint "Mobile".
   Rules are (0,3,1)+ to beat Elementor's nav-menu base CSS and the kit. */
.elementor-location-header{ position:relative; z-index:50; }

body .elementor .site-header{
  position:fixed; z-index:50; inset:0 0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  width:auto; max-width:none; min-height:var(--hdr-h);
  padding:12px var(--gutter-page);
  color:var(--ink, #1E1E1E);
  pointer-events:none;
  transition:color 200ms ease;
}
body .elementor .site-header a,
body .elementor .site-header button,
body .elementor .site-header .elementor-menu-toggle{ pointer-events:auto; }
body.edit-header-on-dark .elementor .site-header,
body.edit-header-ink-light:not(.edit-header-ready) .elementor .site-header{ color:var(--white, #FFFFFF); }

/* Logo: two images in the centre cell, one shown at a time. */
body .elementor .site-header a:has(> :is(.logo-light, .logo-dark)){ position:relative; z-index:3; grid-column:2; grid-row:1; display:block; line-height:0; }
body .elementor .site-header :is(.logo-light, .logo-dark){ display:block; width:58px; height:auto; }
body .elementor .site-header a:has(> .logo-light){ display:none; }
body.edit-header-on-dark .elementor .site-header a:has(> .logo-light),
body.edit-header-ink-light:not(.edit-header-ready) .elementor .site-header a:has(> .logo-light){ display:block; }
body.edit-header-on-dark .elementor .site-header a:has(> .logo-dark),
body.edit-header-ink-light:not(.edit-header-ready) .elementor .site-header a:has(> .logo-dark){ display:none; }

/* The menu widget spans the whole bar; the logo sits over its middle. */
body .elementor .site-header .site-menu{ grid-column:1 / -1; grid-row:1; width:auto; min-width:0; }
body .elementor .site-menu .elementor-nav-menu--main{ width:100%; }
body .elementor .site-menu .elementor-nav-menu--main > .elementor-nav-menu{
  display:flex; flex-wrap:nowrap; align-items:center; gap:28px; width:100%;
}
body .elementor .site-menu .elementor-nav-menu--main .menu-item.push-right{ margin-left:auto; }
/* Elementor's clearfix (`.elementor-nav-menu:after{content:" ";display:block}`)
   would be a flex item here, adding a gap after the last link. */
body .elementor .site-menu .elementor-nav-menu::before,
body .elementor .site-menu .elementor-nav-menu::after{ content:none; display:none; }

/* Desktop links: 12px, a hairline underline wipes in on hover and marks
   the current page (WordPress adds aria-current / elementor-item-active). */
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus{
  display:inline-flex; align-items:center; gap:5px;
  margin:0; padding:0; border:0; background-color:transparent;
  color:inherit;
  font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
  font-size:12px; font-weight:400; line-height:16px; letter-spacing:0; text-transform:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat; background-position:right bottom; background-size:0 1px;
  transition:background-size 240ms ease;
}
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible,
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item-active,
body .elementor .site-menu .elementor-nav-menu--main .elementor-nav-menu a[aria-current="page"]{
  background-position:left bottom; background-size:100% 1px;
}

/* nav-arrow: the small serif arrow after Contact. Specificity beats
   Elementor's `.elementor-item:not(:hover)...:after{opacity:0}`. */
body .elementor .site-header .site-menu .nav-arrow > a.elementor-item::after{
  content:"\2197"; position:static; display:inline-block; opacity:1;
  width:auto; height:auto; background:none; transform:none;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:11px; line-height:.8;
}

/* Desktop shows no sub-menu (mockup) and no social links. SmartMenus sets
   display inline on hover, hence !important. */
body .elementor .site-menu .elementor-nav-menu--main .sub-menu,
body .elementor .site-menu .elementor-nav-menu--main .sub-arrow,
body .elementor .site-menu .elementor-nav-menu--main .menu-social{ display:none !important; }

@media (max-width:767px){
  :root{ --hdr-h:108px; }
  body .elementor .site-header{ grid-template-columns:1fr auto; }
  body .elementor .site-header a:has(> :is(.logo-light, .logo-dark)){ grid-column:1; justify-self:start; }
  body .elementor .site-header :is(.logo-light, .logo-dark){ width:53px; }
  body .elementor .site-header .site-menu{ grid-column:2; justify-self:end; }

  /* Toggle: the word Menu / Close, underlined (mockup), not the burger. */
  body .elementor .site-header .site-menu .elementor-menu-toggle{
    position:relative; z-index:3;
    min-height:24px; margin:0; padding:0; border:0; border-radius:0;
    background:transparent; color:inherit;
    font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
    font-size:12px; line-height:1;
    text-decoration-line:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-skip-ink:none;
  }
  body .elementor .site-header .site-menu .elementor-menu-toggle svg,
  body .elementor .site-header .site-menu .elementor-menu-toggle i{ display:none; }
  body .elementor .site-header .site-menu .elementor-menu-toggle::before{ content:"Menu"; }
  body .elementor .site-header .site-menu .elementor-menu-toggle.elementor-active::before{ content:"Close"; }
  body .elementor .site-header .site-menu .elementor-menu-toggle:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }

  body.menu-open .elementor .site-header{ color:var(--ink, #1E1E1E); }
  body.menu-open .elementor .site-header a:has(> .logo-light){ display:none; }
  body.menu-open .elementor .site-header a:has(> .logo-dark){ display:block; }
}


/* 5. PHONE MENU -----------------------------------------------------------------
   The Nav Menu widget's own dropdown, restyled as the mockup's full-screen
   paper panel. Elementor opens it (toggle gets .elementor-active); SmartMenus
   rolls the Capabilities sub-menu open on the first tap (second tap follows
   the link). The base selector is (0,4,1) so it also beats Elementor's
   closed-state max-height/scaleY and the exit animation can run. */
body.menu-open{ overflow:hidden; }

@media (max-width:767px){
  body .elementor .site-menu .elementor-menu-toggle + nav.elementor-nav-menu--dropdown{
    position:fixed; z-index:1; inset:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    width:auto; max-height:none; margin:0; transform:none; animation:none;
    overflow-x:hidden; overflow-y:auto;
    padding:110px var(--gutter-page) 28px;
    background:var(--paper, #FAFAFA); color:var(--ink, #1E1E1E); font-size:16px;
    visibility:hidden; opacity:0; clip-path:inset(0 0 100% 0); pointer-events:none;
    transition:clip-path 520ms cubic-bezier(.76,0,.24,1), opacity 300ms ease, visibility 0s linear 520ms;
  }
  body .elementor .site-menu .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{
    visibility:visible; opacity:1; clip-path:inset(0); pointer-events:auto;
    transition-delay:0s;
  }
  /* A wrapping row: links take a full line each, the social pills sit side
     by side (flex, so no inline-block whitespace widens their gap). */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown > .elementor-nav-menu{ display:flex; flex-wrap:wrap; column-gap:8px; }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown > .elementor-nav-menu > li{ flex:0 0 100%; min-width:0; }

  /* Big links. */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item:focus,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item.highlighted{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin:0; padding:2px 0; border:0; background:transparent;
    color:inherit;
    font-family:var(--font-body, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
    font-size:clamp(2.45rem, 10.5vw, 4.25rem); font-weight:400;
    line-height:.96; letter-spacing:-.05em; text-transform:none; text-decoration:none;
    transition:color 180ms ease;
  }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item:hover{ color:var(--cherry, #760617); }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item-active,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-item[aria-current="page"]{
    text-decoration-line:underline; text-decoration-thickness:2px;
    text-underline-offset:.12em; text-decoration-skip-ink:none;
  }
  body .elementor .site-header .site-menu nav.elementor-nav-menu--dropdown .nav-arrow > a.elementor-item::after{ content:none; }

  /* Capabilities: a plus that becomes a minus while its sub-menu is open. */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.has-submenu{ padding-right:40px; position:relative; }
  body .elementor .site-header .site-menu nav.elementor-nav-menu--dropdown a.has-submenu::before,
  body .elementor .site-header .site-menu nav.elementor-nav-menu--dropdown a.has-submenu::after{
    content:""; position:absolute; top:50%; right:6px; left:auto; bottom:auto;
    display:block; width:14px; height:1px; opacity:1;
    background:currentColor; transform:translateY(-50%);
    transition:transform 260ms ease;
  }
  body .elementor .site-header .site-menu nav.elementor-nav-menu--dropdown a.has-submenu::after{ transform:translateY(-50%) rotate(90deg); }
  body .elementor .site-header .site-menu nav.elementor-nav-menu--dropdown a.has-submenu[aria-expanded="true"]::after{ transform:translateY(-50%) rotate(0deg); }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown .sub-arrow{ display:none; }

  /* Sub-menu: 14px rows, 8px apart (mockup). Not absolutely positioned. */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown .sub-menu{
    position:static; width:auto; margin:0; padding:12px 0 10px 2px;
    border:0; background:transparent;
  }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown .sub-menu li + li{ margin-top:8px; }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-sub-item,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-sub-item:focus{
    display:inline-block; margin:0; padding:0; border:0; background:transparent;
    color:inherit; font-size:14px; line-height:1.2; letter-spacing:0;
    transition:color 180ms ease;
  }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover{ color:var(--cherry, #760617); }

  /* Socials: outlined pills, side by side, after the links. */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown > .elementor-nav-menu > li.menu-social{ flex:0 0 auto; margin:34px 0 0; }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown li.menu-social > a.elementor-item,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown li.menu-social > a.elementor-item:hover,
  body .elementor .site-menu nav.elementor-nav-menu--dropdown li.menu-social > a.elementor-item:focus{
    display:inline-block; width:auto;
    border:1px solid currentColor; border-radius:999px; padding:8px 13px 9px;
    font-size:12px; line-height:1; letter-spacing:.02em;
    transition:color 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }
  body .elementor .site-menu nav.elementor-nav-menu--dropdown li.menu-social > a.elementor-item:hover{
    border-color:var(--cherry, #760617); background:var(--cherry, #760617); color:var(--white, #FFFFFF);
  }

  /* Staggered entrance, mockup timings: rows 50ms apart from 170ms. */
  body .elementor .site-menu nav.elementor-nav-menu--dropdown > ul > li{
    opacity:0; transform:translateY(24px);
    transition:opacity 360ms ease, transform 520ms cubic-bezier(.2,.75,.2,1);
  }
  body .elementor .site-menu .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown > ul > li{ opacity:1; transform:none; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(1){ transition-delay:170ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(2){ transition-delay:220ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(3){ transition-delay:270ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(4){ transition-delay:320ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(5){ transition-delay:370ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li:nth-child(6){ transition-delay:420ms; }
  body .elementor .site-menu .elementor-active + nav.elementor-nav-menu--dropdown > ul > li.menu-social{ transition-delay:470ms; }
}


/* 6. WORK WITH US TAB -----------------------------------------------------------
   An atomic Button in the header template (text and link editable there).
   Fixed to the right edge, reads bottom to top. Hidden on the Contact page,
   while the mobile menu is open, and in print. */
body .elementor .e-button-base.work-with-us,
body .elementor .e-button-base.work-with-us:hover,
body .elementor .e-button-base.work-with-us:focus{
  position:fixed; z-index:40; top:50%; right:0;
  display:block; min-height:0;
  margin:0; padding:24px 14px; border:0; border-radius:0;
  color:var(--white, #FFFFFF);
  font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
  font-size:13px; font-weight:400; letter-spacing:.04em; line-height:1;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg);
  transition:background-color 180ms ease, opacity 200ms ease, visibility 200ms;
}
body .elementor .e-button-base.work-with-us{ background-color:var(--cherry, #760617); }
body .elementor .e-button-base.work-with-us:hover,
body .elementor .e-button-base.work-with-us:focus-visible{ background-color:var(--ink, #1E1E1E); }
body .elementor .e-button-base.work-with-us:focus-visible{ outline:1px solid var(--white, #FFFFFF); outline-offset:-5px; }
body.menu-open .elementor .e-button-base.work-with-us,
body.edit-page-contact .elementor .e-button-base.work-with-us{ opacity:0; visibility:hidden; }
@media (max-width:800px){
  body .elementor .e-button-base.work-with-us,
  body .elementor .e-button-base.work-with-us:hover,
  body .elementor .e-button-base.work-with-us:focus{ padding:18px 10px; font-size:11px; }
}
@media print{ body .elementor .e-button-base.work-with-us{ display:none; } }


/* 7. FOOTER -----------------------------------------------------------------------
   Templates > Theme Builder > "Site footer": one Black Cherry line. Carries
   `on-dark`, so the header turns white over it. Elementor wraps the template
   in <footer>, so the root stays a div (no nested landmark). */
body .elementor .site-footer{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; width:auto; max-width:none;
  padding:15px var(--gutter-page);
  border-top:1px solid rgba(255,255,255,.48);
  font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .site-footer p{ margin:0; }
body .elementor .site-footer > .e-flexbox-base{
  display:flex; flex-direction:row; align-items:baseline; gap:.35em;
  width:auto; padding:0;
}
body .elementor .site-footer a{
  color:inherit;
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-skip-ink:none;
  transition:opacity 180ms ease;
}
body .elementor .site-footer a:hover{ opacity:.75; }
@media (max-width:800px){
  body .elementor .site-footer{ gap:10px 18px; }
  body .elementor .site-footer > .e-flexbox-base{ order:3; flex-basis:100%; }
}

/* Smooth in-page jumps (Back to top), unless reduced motion is asked for. */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }


/* 8. HERO -------------------------------------------------------------------------
   Full-height opener. On the homepage it is Elementor's atomic Background
   Video (Content Area + Controls); inner pages will use the same classes with
   a photo. Carries `on-dark` so the header turns white over it.
     hero          the section (ink ground while the video loads)
     hero-content  full-size layer: tint, centred copy, bottom row
     hero-copy     eyebrow (the page h1) + display line (text-display-xl)
     hero-bottom   intro sentence + "Discover" link
     hero-controls the video's Play/Pause buttons, bottom right */
body .elementor .hero{
  position:relative; overflow:hidden;
  width:auto; max-width:none;
  min-height:max(100svh, 680px);
  padding:0;
}
body .elementor .hero .e-background-video__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
body .elementor .hero-content{
  position:relative; z-index:1;
  flex:1 1 auto; display:flex; flex-direction:column;
  width:auto; max-width:none; min-height:inherit;
  padding:62px var(--gutter-page) 18px; /* copy centres where the mockup's did */
  background:
    linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 68%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.02) 38%, rgba(0,0,0,.28) 100%);
}
body .elementor .hero-copy{ width:auto; margin-block:auto; padding-top:2vh; gap:0; }
body .elementor .hero .text-eyebrow{ margin:0 0 24px; font-size:12px; letter-spacing:.04em; line-height:1; }
body .elementor .text-display-xl > span,
body .elementor .text-display-xl > em{ display:block; }
body .elementor .text-display-xl > em{ font-size:1.06em; line-height:inherit; letter-spacing:inherit; }

body .elementor .hero-bottom{
  width:auto; gap:32px;
  padding-right:72px; /* room for the Pause button */
  font-size:12px; line-height:1.35;
}
body .elementor .hero-bottom > p:first-of-type,
body .elementor .hero-bottom > .elementor-widget:nth-child(1 of .elementor-widget) > p{ max-width:51ch; }
body .elementor .hero-bottom .text-link{ white-space:nowrap; }

body .elementor .hero-controls{
  position:absolute; z-index:2; right:var(--gutter-page); bottom:18px;
  width:auto; gap:0;
}
body .elementor .hero-controls button,
body .elementor .hero-controls button:hover,
body .elementor .hero-controls button:focus{
  min-height:0; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; color:inherit;
  font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
  font-size:12px; font-weight:400; line-height:1.35; letter-spacing:0; text-transform:none;
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-skip-ink:none;
  cursor:pointer;
}
body .elementor .hero-controls button:hover{ text-decoration-color:var(--cherry, #760617); }
body .elementor .hero-controls button:focus-visible{ outline:1px solid currentColor; outline-offset:3px; }

@media (max-width:800px){
  body .elementor .hero{ min-height:max(100svh, 640px); }
  body .elementor .hero-copy{ padding-top:0; }
  body .elementor .text-display-xl{ max-width:6.8em; font-size:clamp(3.05rem, 12.8vw, 5.5rem); line-height:.89; }
  body .elementor .hero-bottom{ align-items:flex-end; }
  body .elementor .hero-bottom > p:first-of-type,
  body .elementor .hero-bottom > .elementor-widget:nth-child(1 of .elementor-widget) > p{ max-width:27ch; }
  body .elementor .hero-bottom .text-link{ display:none; }
}


/* 9. SECTION LABEL, TEXT LINKS -------------------------------------------------
   section-label: "(6) Contact" - a circled number, a short rule, the name.
   text-link: a paragraph whose link gets the hairline underline. */
body .elementor .section-label{ width:auto; margin:0 0 84px; gap:6px; line-height:1; }
body .elementor .circle-number{
  position:relative; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin:0 29px 0 0;
  border:1px solid currentColor; border-radius:50%;
  font-size:12px; letter-spacing:0; line-height:1;
}
body .elementor .circle-number::after{
  content:""; position:absolute; top:50%; left:calc(100% + 5px);
  width:24px; height:1px; background:currentColor; transform:translateY(-50%);
}
@media (max-width:800px){ body .elementor .section-label{ margin-bottom:48px; } }

body .elementor .text-link a{
  display:inline-flex; align-items:center; gap:5px;
  color:inherit;
  text-decoration-line:underline; text-decoration-color:currentColor;
  text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-skip-ink:none;
  transition:text-decoration-color 220ms ease;
}
body .elementor .text-link a:hover{ text-decoration-color:var(--cherry, #760617); }


/* 10. HOME SECTIONS ------------------------------------------------------------
   The homepage between the hero and the contact band, in page order. Each
   section is an atomic Flexbox (tag Section) carrying one class that names
   it; the grids live here.

   Shared pieces:
     section-label + circle-number   "(1) The Edit" (section 9)
     caption-row    the small uppercase line under an image
     full-line      a hairline between sections (an empty Flexbox)
     reveal, reveal-image            entrance animations (section 12)

   Vertical spacing is the mockup's at 1440px, easing down to its phone values
   (the clamp() floors). Side padding follows section-pad-inline, the same
   variable the hero and contact band use. Phone layout below 800px. */
body .elementor :is(.intro, .collage, .capabilities, .work, .clients, .recognition){
  width:auto; max-width:none;
  padding-inline:var(--section-pad-inline, var(--gutter-page));
}
body .elementor :is(.intro-grid, .collage-grid, .capabilities-intro, .capabilities-board, .work-grid, .recognition-layout){
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gutter-page); width:auto;
}
body .elementor :is(.intro, .collage, .capabilities, .work, .clients, .recognition) :is(h2, h3, h4){ margin:0; }

/* Caption under an image: "( 01 )   The Americana at Brand". */
body .elementor .caption-row{
  width:auto;
  font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .caption-row p{ margin:0; }
body .elementor .caption-row .section-label{ margin:0; }
/* Atomic Flexbox children default to min-width:0, which lets the numbered
   label shrink under its own text in a narrow card; keep its natural width
   so the right-hand text wraps instead. */
body .elementor .caption-row > *{ min-width:auto; }

/* Hairline between sections. */
body .elementor .full-line{
  width:auto; height:1px; min-height:0;
  margin:0 var(--section-pad-inline, var(--gutter-page)); padding:0;
  background:var(--border-hairline, rgba(30,30,30,.32));
  transform-origin:left center;
}

/* 10a Introduction: (1) The Edit. Classes intro, intro-grid, intro-copy,
   intro-photo. The section's CSS ID is "introduction" (the hero links to it). */
body .elementor .intro{ padding-top:var(--section-y-m, 152px); padding-bottom:0; }
body .elementor .intro-grid h2{ grid-column:1 / 10; max-width:11em; }
body .elementor .intro-copy{ grid-column:9 / 13; align-self:end; width:auto; padding-top:90px; }
body .elementor .intro-copy p{ max-width:44ch; }
body .elementor .intro-photo{
  width:83.333%; height:auto; margin:112px 0 0 auto;
  aspect-ratio:3 / 2; object-fit:cover;
}

/* 10b As seen in: press logos sliding right to left. Built once in Elementor
   (as-seen-track > as-seen-group > logos); the-edit.js adds three copies of
   the group so the strip loops without a seam. */
body .elementor .as-seen{
  position:relative; overflow:hidden;
  width:auto; max-width:none; padding:96px 0 110px;
}
body .elementor .as-seen-track{ flex-wrap:nowrap; gap:0; width:max-content; }
body .elementor .as-seen-track.is-looping{ animation:edit-as-seen 30s linear infinite; }
body .elementor .as-seen-group{ flex:0 0 auto; flex-wrap:nowrap; gap:72px; width:auto; padding-right:72px; }
/* Each logo sits in a 160 x 54 cell, contained in 130 x 50. */
body .elementor .as-seen-group img{
  flex:0 0 160px; box-sizing:border-box; width:160px; height:54px;
  padding:2px 15px; object-fit:contain;
}
@keyframes edit-as-seen{ to{ transform:translateX(-25%); } }

/* 10c Editorial collage: three captioned images and a serif statement.
   Children of collage-grid, in order: image, image, statement, image. */
body .elementor .collage{ padding-top:clamp(96px, 9.17vw, 132px); padding-bottom:0; }
body .elementor .collage-grid{ align-items:start; }
body .elementor .collage-item{ position:relative; width:auto; gap:0; }
body .elementor .collage-item img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; }
body .elementor .collage-grid > :nth-child(1 of .collage-item){ grid-column:1 / 7; }
body .elementor .collage-grid > :nth-child(2 of .collage-item){ grid-column:9 / 13; margin-top:168px; }
body .elementor .collage-grid .collage-statement{
  grid-column:2 / 7; margin-top:128px;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:var(--text-display-md, clamp(2.3rem, 4.3vw, 5rem));
  line-height:.98; letter-spacing:-.045em;
}
body .elementor .collage-grid > :nth-child(3 of .collage-item){ grid-column:8 / 11; margin-top:250px; }

/* 10d Capabilities: (2) intro, then three columns. Each column is an h3
   (class text-title) and capability-groups: an h4 plus a Text Editor widget
   holding a bulleted list (CSS class capability-list). Linked items get a
   cherry arrow on hover. */
body .elementor .capabilities{
  padding-top:clamp(96px, 8.89vw, 128px);
  padding-bottom:clamp(96px, 9.86vw, 142px);
}
body .elementor .capabilities-intro{ align-items:end; }
body .elementor .capabilities-intro h2{ grid-column:1 / 8; }
body .elementor .capabilities-intro p{ grid-column:9 / 13; max-width:39ch; }
body .elementor .capabilities-board{ margin-top:126px; }
body .elementor .capability-column{ grid-column:span 4; width:auto; min-width:0; gap:0; }
body .elementor .capability-column h3{ margin-bottom:62px; line-height:1; }
body .elementor .capability-group{ width:auto; gap:0; }
body .elementor .capability-group + .capability-group{ margin-top:44px; }
body .elementor .capability-group h4{
  margin:0 0 22px;
  color:inherit;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:18px; font-style:italic; font-weight:400;
  line-height:1.05; letter-spacing:-.02em; text-transform:none;
}
/* :not() keeps these off the editor's own toolbar, which is also a ul/li
   inside the widget while editing. */
body .elementor .capability-list ul:not(.elementor-editor-element-settings){ margin:0; padding:0; list-style:none; }
body .elementor .capability-list li:not(.elementor-editor-element-setting){
  width:fit-content; max-width:100%; margin:0; padding:0;
  font-size:16px; line-height:1.28; letter-spacing:-.018em;
}
body .elementor .capability-list a{
  display:inline-flex; align-items:baseline; gap:6px;
  color:inherit; text-decoration:none;
  transition:color 180ms ease;
}
body .elementor .capability-list a::after{
  content:"\2192";
  color:var(--cherry, #760617);
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:13px; line-height:1;
  opacity:0; transform:translateX(-5px);
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.75,.2,1);
}
body .elementor .capability-list a:hover,
body .elementor .capability-list a:focus-visible{ color:var(--cherry, #760617); }
body .elementor .capability-list a:hover::after,
body .elementor .capability-list a:focus-visible::after{ opacity:1; transform:none; }

/* 10e Marquee: the serif line between Capabilities and Work, ruled above and
   below. One paragraph in marquee-track; the-edit.js adds the copy that
   makes the loop seamless. */
body .elementor .marquee{
  position:relative; overflow:hidden;
  width:auto; max-width:none; gap:0;
  padding:15px 0 20px; white-space:nowrap;
}
body .elementor .marquee::before,
body .elementor .marquee::after{
  content:""; position:absolute; right:0; left:0; height:1px;
  background:currentColor; transform-origin:left center;
}
body .elementor .marquee::before{ top:0; }
body .elementor .marquee::after{ bottom:0; }
body .elementor .marquee-track{ flex:0 0 auto; flex-wrap:nowrap; gap:0; width:max-content; }
body .elementor .marquee-track.is-looping{ animation:edit-marquee 34s linear infinite; }
body .elementor .marquee-track p{
  margin:0; padding-right:28px; white-space:nowrap;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:var(--text-display-lg, clamp(3.5rem, 6vw, 7rem));
  line-height:.88; letter-spacing:-.045em;
}
@keyframes edit-marquee{ to{ transform:translateX(-50%); } }

/* 10f Selected work: (3) + "Explore Our Work", then project cards. A card
   is a linked Flexbox (class project): project-media (the image) +
   caption-row. Cards run wide, narrow (dropped), narrow, wide, repeating. */
body .elementor .work{
  padding-top:clamp(104px, 10.14vw, 146px);
  padding-bottom:var(--section-y-m, 152px);
}
body .elementor .work > .layout-row-split{ align-items:flex-start; width:auto; margin-bottom:78px; padding:0; }
body .elementor .work > .layout-row-split .section-label{ margin:0; }
body .elementor .work > .layout-row-split .text-link,
body .elementor .work > .layout-row-split .text-link a{ font-size:12px; line-height:1; }
body .elementor .work-grid{ row-gap:126px; align-items:start; }
body .elementor .work-grid > .project{ grid-column:span 4; }
body .elementor .work-grid > .project:nth-child(4n+1 of .project),
body .elementor .work-grid > .project:nth-child(4n of .project){ grid-column:span 8; }
body .elementor .work-grid > .project:nth-child(4n+2 of .project){ margin-top:190px; }
body .elementor .project{ width:auto; gap:0; color:inherit; text-decoration:none; }
body .elementor .project:focus-visible{ outline:1px solid var(--cherry, #760617); outline-offset:4px; }
body .elementor .project-media{ position:relative; overflow:hidden; width:auto; }
body .elementor .project-media img{
  width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover;
  transition:transform 800ms cubic-bezier(.18,.75,.2,1);
}
body .elementor .project-media::after{
  content:""; position:absolute; inset:0;
  background:var(--cherry, #760617); mix-blend-mode:multiply;
  opacity:0; pointer-events:none;
  transition:opacity 350ms ease;
}
body .elementor .project:hover .project-media::after{ opacity:.24; }
body .elementor .project:hover .project-media img{ transform:scale(1.025); }

/* 10g Selected clients: (4), headline, 4-up logo grid with hairlines. The
   logo files are white, so they are inverted to ink here. */
body .elementor .clients{
  padding-top:clamp(104px, 10.14vw, 146px);
  padding-bottom:clamp(116px, 11.81vw, 170px);
}
body .elementor .clients h2{ max-width:10.5em; }
body .elementor .client-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0 var(--gutter-page); width:auto; margin-top:110px;
}
body .elementor .client-cell{ position:relative; width:auto; height:185px; }
body .elementor .client-cell img{ width:100%; max-width:130px; height:64px; object-fit:contain; filter:invert(1); }
/* Headline + "View more" (to the Clients page) share a layout-row-split row.
   The link sits on the right, on the headline's last line; when the headline
   fills the width (phones) it wraps underneath and stays on the right. */
body .elementor .clients > .layout-row-split{
  flex-wrap:wrap; align-items:last baseline; gap:28px var(--gutter-page);
  width:auto; padding:0;
}
body .elementor .clients > .layout-row-split .text-link{ margin-left:auto; white-space:nowrap; }
body .elementor .clients > .layout-row-split .text-link,
body .elementor .clients > .layout-row-split .text-link a{ font-size:12px; line-height:1; }

/* Logo carousel. The grid carries data-carousel (Elementor > Attributes) and
   scrolls sideways, three rows deep: logos run DOWN each column of three,
   then across, so the first 12 in Elementor fill the first view (4 columns,
   2 on phones). Swipe, trackpad, arrow keys, or the Previous / Next buttons
   the-edit.js adds to the heading row (script section 11).
   The files are the Brand-Logos squares (black on transparent, not
   inverted); a 144px square shows a wide logo at the old 130px. */
body .elementor .client-grid[data-carousel]{
  grid-template-columns:none; grid-template-rows:repeat(3, auto);
  grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * var(--gutter-page)) / 4);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
body .elementor .client-grid[data-carousel]::-webkit-scrollbar{ display:none; }
body .elementor .client-grid[data-carousel]:focus-visible{ outline:1px solid var(--cherry, #760617); outline-offset:6px; }
body .elementor .client-grid[data-carousel] .client-cell{ scroll-snap-align:start; }
body .elementor .client-grid[data-carousel] .client-cell img{
  width:144px; max-width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:grayscale(1);
}
body .elementor .carousel-nav{ display:flex; gap:8px; margin-left:24px; }
body .elementor .carousel-nav[hidden]{ display:none; }
body .elementor .carousel-nav button{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin:0; padding:0;
  border:1px solid var(--border-hairline, rgba(30,30,30,.32)); border-radius:50%;
  background:transparent; color:inherit;
  font:inherit; font-size:14px; line-height:1;
  cursor:pointer;
  transition:border-color 220ms ease, color 220ms ease, opacity 220ms ease;
}
body .elementor .carousel-nav button:is(:hover, :focus){ background:transparent; color:inherit; }
body .elementor .carousel-nav button:hover{ border-color:var(--cherry, #760617); color:var(--cherry, #760617); }
body .elementor .carousel-nav button:focus-visible{ outline:1px solid var(--cherry, #760617); outline-offset:3px; }
body .elementor .carousel-nav button[aria-disabled="true"]{
  opacity:.32; cursor:default;
  border-color:var(--border-hairline, rgba(30,30,30,.32)); color:inherit;
}

/* 10h Recognition: (5), photo left, headline + award list right. An award
   card is a paragraph plus, optionally, the award's logo as an image: the
   image stays hidden and follows the cursor while the text is hovered
   (the-edit.js; mouse only). */
body .elementor .recognition{
  padding-top:clamp(104px, 10.14vw, 146px);
  padding-bottom:clamp(116px, 11.67vw, 168px);
}
body .elementor .recognition-layout{ align-items:start; }
body .elementor .recognition-media{
  grid-column:1 / 6; width:100%; height:auto;
  aspect-ratio:4 / 5; object-fit:cover; object-position:72% center;
}
body .elementor .recognition-details{ grid-column:7 / 13; width:auto; gap:0; padding-top:4px; }
body .elementor .recognition-details h2{ max-width:10em; }
body .elementor .award-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:24px; row-gap:0; width:auto; margin-top:64px;
}
body .elementor .award-card{ position:relative; width:auto; gap:0; }
body .elementor .award-card p{
  width:fit-content; max-width:31ch; margin:0;
  font-size:16px; line-height:1.16; letter-spacing:-.018em;
  transition:color 180ms ease;
}
body .elementor .award-card p:hover{ color:var(--cherry, #760617); }
body .elementor .award-card img{ display:none; }
.award-preview{
  position:fixed; z-index:70; top:0; left:0;
  width:210px; height:150px; padding:18px;
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translate3d(var(--x, 0px), var(--y, 0px), 0);
  transition:opacity .16s ease, visibility 0s linear .16s;
  will-change:transform, opacity;
}
.award-preview.is-visible{ visibility:visible; opacity:1; transition-delay:0s; }
.award-preview img{
  display:none; width:100%; height:100%; object-fit:contain;
  transform:scale(.96); transition:transform .2s ease;
}
.award-preview img.is-active{ display:block; }
.award-preview.is-visible img.is-active{ transform:scale(1); }

/* Hairlines above each client logo and award. */
body .elementor .client-cell::before,
body .elementor .award-card::before{
  content:""; position:absolute; top:0; right:0; left:0; height:1px;
  background:var(--border-hairline, rgba(30,30,30,.32));
  transform-origin:left center;
}

@media (max-width:800px){
  body .elementor .intro{ padding-bottom:104px; }
  body .elementor .intro-grid{ grid-template-columns:1fr; gap:48px; }
  body .elementor .intro-grid h2,
  body .elementor .intro-copy{ grid-column:1; }
  body .elementor .intro-copy{ max-width:37ch; padding-top:8px; }
  body .elementor .intro-photo{ width:100%; margin-top:72px; }

  body .elementor .as-seen{ padding:70px 0 82px; }
  body .elementor .as-seen-group{ gap:42px; padding-right:42px; }
  body .elementor .as-seen-group img{ flex-basis:130px; width:130px; height:48px; padding:2px 9px; }

  body .elementor .collage-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; }
  body .elementor .collage-grid > :nth-child(1 of .collage-item){ grid-column:1 / 6; }
  body .elementor .collage-grid > :nth-child(2 of .collage-item){ grid-column:3 / 7; margin-top:80px; }
  body .elementor .collage-grid .collage-statement{ grid-column:1 / 7; margin-top:78px; }
  body .elementor .collage-grid > :nth-child(3 of .collage-item){ grid-column:1 / 5; margin-top:88px; }

  body .elementor .capabilities-intro{ grid-template-columns:1fr; gap:30px; }
  body .elementor .capabilities-intro h2,
  body .elementor .capabilities-intro p{ grid-column:1; }
  body .elementor .capabilities-board{ grid-template-columns:1fr; gap:76px; margin-top:82px; }
  body .elementor .capability-column{ grid-column:1; }
  body .elementor .capability-column h3{ margin-bottom:42px; font-size:2rem; }
  body .elementor .capability-group + .capability-group{ margin-top:38px; }
  body .elementor .capability-group h4{ margin-bottom:17px; }

  body .elementor .marquee-track p{ font-size:clamp(3.2rem, 12vw, 5.6rem); }

  body .elementor .work > .layout-row-split{ margin-bottom:48px; }
  body .elementor .work-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:72px 10px; }
  body .elementor .work-grid > .project{ grid-column:span 1; }
  body .elementor .work-grid > .project:nth-child(4n+1 of .project),
  body .elementor .work-grid > .project:nth-child(4n of .project){ grid-column:1 / 3; }
  body .elementor .work-grid > .project:nth-child(4n+2 of .project){ margin-top:84px; }

  body .elementor .client-grid{ grid-template-columns:1fr 1fr; gap:0 12px; margin-top:76px; }
  body .elementor .client-cell{ height:132px; }
  body .elementor .client-cell img{ height:58px; }
  body .elementor .client-grid[data-carousel]{ grid-auto-columns:calc((100% - 12px) / 2); }
  body .elementor .client-grid[data-carousel] .client-cell img{ width:116px; height:auto; }
  /* Phones: the row wraps under the headline; "View more" goes left, arrows right. */
  body .elementor .clients > .layout-row-split .text-link{ margin-left:0; }
  body .elementor .carousel-nav{ margin-left:auto; }

  body .elementor .recognition-layout{ grid-template-columns:1fr; gap:64px; }
  body .elementor .recognition-media,
  body .elementor .recognition-details{ grid-column:1; }
  body .elementor .recognition-media{ aspect-ratio:4 / 3; }
  body .elementor .recognition-details h2{ max-width:none; }
  body .elementor .award-grid{ grid-template-columns:1fr; margin-top:76px; }
  body .elementor .award-card{ padding:18px 0 21px; }
  body .elementor .award-card p{ max-width:34ch; }
}


/* 11. CONTACT BAND -----------------------------------------------------------------
   Dark closing section: section label at the top, headline + details pinned
   to the bottom on a 12-column grid. Classes: contact-band (+ section-pad-m,
   on-dark), contact-grid, contact-details. */
body .elementor .contact-band{ width:auto; max-width:none; min-height:86svh; }
body .elementor .contact-grid{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gutter-page); align-items:end; width:auto;
}
body .elementor .contact-grid h2{ grid-column:1 / 9; margin:0; }
body .elementor .contact-details{ grid-column:9 / 13; width:auto; }
body .elementor .contact-details > p:first-of-type,
body .elementor .contact-details > .elementor-widget:nth-child(1 of .elementor-widget) > p{ max-width:40ch; }
body .elementor .contact-details .text-link,
body .elementor .contact-details .text-link a{ font-size:16px; line-height:1; }
@media (max-width:800px){
  body .elementor .contact-band{ min-height:720px; }
  body .elementor .contact-grid{ grid-template-columns:1fr; gap:48px; }
  body .elementor .contact-grid h2,
  body .elementor .contact-details{ grid-column:1; }
}


/* 12. ENTRANCES ------------------------------------------------------------------
   Mockup timings. Content is only hidden when all of these hold: JavaScript
   is running (functions.php puts edit-js on <html> before the page paints),
   it is not the Elementor editor, and the visitor allows motion. the-edit.js
   adds .is-in as each target scrolls into view.
     reveal          fade up 44px      (add the class to any element)
     reveal-image    wipe in from left (add the class to any image)
     automatic       project cards, capability columns, client logos, the
                     hairlines (full-line, marquee rules, logo/award rules) */
@media (prefers-reduced-motion:no-preference){
  .edit-js body:not(.elementor-editor-active) :is(.reveal, .project, .capability-column){
    transition:opacity .95s cubic-bezier(.25,1,.5,1), transform .95s cubic-bezier(.25,1,.5,1);
  }
  .edit-js body:not(.elementor-editor-active) .reveal:not(.is-in){ opacity:0; transform:translateY(44px); }
  .edit-js body:not(.elementor-editor-active) .project:not(.is-in){ opacity:0; transform:translateY(34px); }
  .edit-js body:not(.elementor-editor-active) .project{ transition-duration:.9s; }
  .edit-js body:not(.elementor-editor-active) .capability-column{ transition-duration:.85s; transition-delay:calc(var(--i, 0) * 60ms); }
  .edit-js body:not(.elementor-editor-active) .capability-column:not(.is-in){ opacity:0; transform:translateY(34px); }

  /* The shown state must be an inset() too: clip-path can't animate to or
     from `none`, so without it the image just appears with no wipe. */
  .edit-js body:not(.elementor-editor-active) .reveal-image{ clip-path:inset(0 0% 0 0); transition:clip-path 1.2s cubic-bezier(.76,0,.24,1); }
  .edit-js body:not(.elementor-editor-active) .reveal-image:not(.is-in){ clip-path:inset(0 100% 0 0); }

  .edit-js body:not(.elementor-editor-active) .client-cell img{
    transition:opacity .68s cubic-bezier(.25,1,.5,1), transform .68s cubic-bezier(.25,1,.5,1);
    transition-delay:calc(var(--i, 0) * 90ms);
  }
  .edit-js body:not(.elementor-editor-active) .client-grid:not(.is-in) .client-cell img{
    opacity:0; transform:translateY(18px) scale(.96);
  }
  /* Carousel: only the first view staggers; logos further along don't wait. */
  .edit-js body:not(.elementor-editor-active) .client-grid[data-carousel] .client-cell img{
    transition-delay:calc(min(var(--i, 0), 11) * 90ms);
  }

  .edit-js body:not(.elementor-editor-active) .full-line,
  .edit-js body:not(.elementor-editor-active) .marquee::before,
  .edit-js body:not(.elementor-editor-active) .marquee::after{ transition:transform 1.15s cubic-bezier(.76,0,.24,1); }
  .edit-js body:not(.elementor-editor-active) .client-cell::before,
  .edit-js body:not(.elementor-editor-active) .award-card::before{ transition:transform .9s cubic-bezier(.76,0,.24,1); }
  /* Inner pages: reveal-fade fades only; list rows draw their hairline. */
  .edit-js body:not(.elementor-editor-active) .reveal-fade{ transition:opacity 1.1s cubic-bezier(.33,1,.68,1); }
  .edit-js body:not(.elementor-editor-active) .reveal-fade:not(.is-in){ opacity:0; }
  .edit-js body:not(.elementor-editor-active) :is(.service-row, .faq-row)::before{ transition:transform .85s cubic-bezier(.76,0,.24,1); }
  .edit-js body:not(.elementor-editor-active) :is(.service-row, .faq-row):not(.is-in)::before{ transform:scaleX(0); }

  .edit-js body:not(.elementor-editor-active) .full-line:not(.is-in),
  .edit-js body:not(.elementor-editor-active) .marquee:not(.is-in)::before,
  .edit-js body:not(.elementor-editor-active) .marquee:not(.is-in)::after,
  .edit-js body:not(.elementor-editor-active) .client-cell:not(.is-in)::before,
  .edit-js body:not(.elementor-editor-active) .award-card:not(.is-in)::before{ transform:scaleX(0); }
}


/* 13. LAYOUT GRID (BACKGROUND) -----------------------------------------------------
   Design aid: the page grid drawn BEHIND the content, front end and editor.
   On for logged-in users unless switched off; Admin bar > Grid toggles it
   (also Shift+G, or ?grid=1 / ?grid=0 in the address). the-edit.js puts
   `edit-grid-on` on <html>. 12 columns, 16px gutters, inside the page margins;
   6 columns, 12px gutters on phones (the collage grid).
     light sections  one fixed layer just above the page colour (body::after;
                     body is isolated so z-index:-1 lands above its background)
     .on-dark        its own layer above the section colour / video, below the
                     copy, in white (::after; the section is isolated) */
html.edit-grid-on{
  --edit-grid-cols:12; --edit-grid-gap:var(--gutter-page, 16px);
  --edit-grid-line:rgba(118,6,23,.32); --edit-grid-fill:rgba(118,6,23,.05);
}
@media (max-width:800px){ html.edit-grid-on{ --edit-grid-cols:6; --edit-grid-gap:12px; } }
html.edit-grid-on body{ isolation:isolate; }
html.edit-grid-on body .elementor .on-dark{
  isolation:isolate;
  --edit-grid-line:rgba(255,255,255,.26); --edit-grid-fill:rgba(255,255,255,.05);
}
html.edit-grid-on body::after,
html.edit-grid-on body .elementor .on-dark::after{
  content:""; inset:0; z-index:-1; pointer-events:none;
  padding:0 var(--section-pad-inline, var(--gutter-page, 16px));
  background-clip:content-box; background-origin:content-box;
  /* One period = a column plus a gutter; percentages are the grid's width. */
  --edit-grid-col:calc((100% - (var(--edit-grid-cols) - 1) * var(--edit-grid-gap)) / var(--edit-grid-cols));
  background-image:repeating-linear-gradient(90deg,
    var(--edit-grid-line) 0 1px,
    var(--edit-grid-fill) 1px calc(var(--edit-grid-col) - 1px),
    var(--edit-grid-line) calc(var(--edit-grid-col) - 1px) var(--edit-grid-col),
    transparent var(--edit-grid-col) calc((100% + var(--edit-grid-gap)) / var(--edit-grid-cols)));
}
html.edit-grid-on body::after{ position:fixed; }
html.edit-grid-on body .elementor .on-dark::after{ position:absolute; }
/* Hero: over the video (z 0, earlier in source), under the copy (z 1). */
html.edit-grid-on body .elementor .hero.on-dark::after{ z-index:0; }
#wpadminbar #wp-admin-bar-edit-grid > .ab-item[aria-pressed="true"]{ background:#760617; color:#FFFFFF; }

/* Logged in: keep the fixed header below the WordPress admin bar (on small
   phones the admin bar scrolls away, so the header stays at the top). */
.admin-bar .elementor .site-header{ top:var(--wp-admin--admin-bar--height, 32px); }
@media (max-width:600px){ .admin-bar .elementor .site-header{ top:0; } }


/* 14. REDUCED MOTION --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* 15. INNER PAGES ---------------------------------------------------------------------
   Every page after the homepage, ported from the mockup stylesheet in its own
   order and with its class names. functions.php adds the body classes the
   mockup keys off: page-inner (every page but the homepage), page-services
   and page-about (Page Settings > Header > Page family).

   Containers here are Elementor Div blocks; Headings, Paragraphs and Images
   inside them are mostly classless and styled from the container. The
   homepage's pieces (hero, section-label, project cards, client grid, award
   cards, contact band) are reused unchanged.
     15a Base ............ Div block reset, section padding, running-text links
     15b Hero ............ photo heroes, strong tint, careers art direction, 404,
                           load-in of hero copy
     15c Modules ......... section-module: split, 50/50, photo pairs
     15d Lists ........... service rows, role rows, FAQ (Elementor Accordion)
     15e Work ............ work header, archive grid, related grid
     15f About ........... founder profiles, pull quote, detail line
     15g Careers, forms .. apply note, job lists, Elementor Pro Form fields
   Phone rules close each block (mockup breakpoint 800px; 1100px for rows). */

/* 15a Base --------------------------------------------------------------------------
   Atomic Div blocks carry padding:10px and min-width:30px from Elementor's
   base CSS; these layouts space everything from this file. */
body .elementor .e-div-block-base{ padding:0; min-width:0; }

body .elementor .section-pad{
  width:auto; max-width:none;
  padding:152px var(--section-pad-inline, var(--gutter-page));
}
body .elementor .section-pad.section-photos{ padding-top:0; }
body.page-inner .elementor .contact-band{ min-height:70svh; }
body.page-inner .elementor .text-link{ line-height:1; }

/* Links inside running text (the mockup's inline-link). Elementor unsets
   every anchor inside an atomic Paragraph; give them the hairline back. */
body .elementor .e-paragraph-base a:not(.e-paragraph-link-base){
  color:inherit; cursor:pointer;
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-skip-ink:none;
  transition:color 180ms ease;
}
body .elementor .e-paragraph-base a:not(.e-paragraph-link-base):hover{ color:var(--cherry, #760617); }

/* text-link written as <span>label</span><span>arrow</span>: only the label
   is underlined, the arrow is the serif glyph and turns cherry on hover. */
body .elementor .text-link a:has(> span){ text-decoration-line:none; }
body .elementor .text-link a > span:first-child{
  text-decoration-line:underline; text-decoration-color:currentColor;
  text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-skip-ink:none;
  transition:text-decoration-color 220ms ease;
}
body .elementor .text-link a:hover > span:first-child{ text-decoration-color:var(--cherry, #760617); }
body .elementor .text-link a > span + span{
  display:inline-flex; align-items:center;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:11px; font-weight:400; line-height:.8;
  transition:color 220ms ease, transform 220ms ease;
}
body .elementor .text-link a:hover > span + span{ color:var(--cherry, #760617); }

@media (max-width:800px){
  body .elementor .section-pad{ padding-top:104px; padding-bottom:104px; }
}

/* 15b Hero --------------------------------------------------------------------------
   Inner pages use the homepage hero with a photo: hero (+ hero-full) >
   Image (hero-image) + hero-content > hero-copy + hero-bottom. */
body .elementor .hero .hero-image{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none; object-fit:cover;
}
body .elementor .hero .hero-image-journal{ object-position:82% center; }
body .elementor .hero-full .hero-bottom{ padding-right:0; }
body .elementor .hero.hero-tint-strong .hero-content{
  background:
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 70%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.45) 100%);
}
/* Inner heroes place the copy as the mockup does: 50% down (47% on phones,
   61% / 56% for hero-copy-low), raised by 47% of its own height. */
body .elementor .hero-full .hero-copy{
  position:absolute; z-index:2; top:50%; left:var(--gutter-page);
  width:auto; max-width:calc(100% - 2 * var(--gutter-page));
  margin:0; padding-top:0; transform:translateY(-47%);
}
body .elementor .hero-full .hero-copy.hero-copy-low{ top:61%; }
body .elementor .hero-full .hero-bottom{ margin-top:auto; }
body .elementor .hero-full .text-eyebrow{ line-height:1.35; }
/* Labels and captions sit on the mockup's 1.35 line here. */
body.page-inner .elementor .section-label{ line-height:1.35; }
body .elementor .hero-contact .hero-bottom > p:first-of-type,
body .elementor .hero-contact .hero-bottom > .elementor-widget:nth-child(1 of .elementor-widget) > p{ max-width:44ch; }

/* A photo hero can carry a wide photo (hero-image-wide) and a tall one
   (hero-image-tall) for portrait screens. Careers used this until its hero
   became a background video (media 1031) on 2026-11-10. */
body .elementor .hero .hero-image-tall{ display:none; }
@media (max-aspect-ratio:1/1){
  body .elementor .hero .hero-image-wide{ display:none; }
  body .elementor .hero .hero-image-tall{ display:block; }
}

/* 404: the sentence with the suggested pages under it. */
body .elementor .hero.not-found .hero-bottom{ flex-direction:column; align-items:flex-start; gap:0; }
body .elementor .not-found-links{ display:flex; flex-wrap:wrap; gap:20px 24px; width:auto; margin-top:24px; font-size:12px; }

/* Hero copy rises in on load (mockup: 32px, 1.05s, staggered .11s). Pages
   that open on a light article header do the same with its lines. */
@keyframes edit-rise-in{ from{ opacity:0; transform:translateY(32px); } }
@media (prefers-reduced-motion:no-preference){
  .edit-js body:not(.elementor-editor-active) :is(.hero .text-eyebrow, .hero .text-display-xl, .hero .hero-bottom, .article-header-grid .e-paragraph-base, .article-header-grid .e-heading-base, .article-cover){
    animation:edit-rise-in 1.05s cubic-bezier(.25,1,.5,1) both;
    animation-delay:calc(.18s + var(--rise-i, 0) * .11s);
  }
  .edit-js body:not(.elementor-editor-active) :is(.hero .text-display-xl, .article-header-grid .e-heading-base){ --rise-i:1; }
  .edit-js body:not(.elementor-editor-active) :is(.hero .hero-bottom, .article-header-grid .article-standfirst){ --rise-i:2; }
  .edit-js body:not(.elementor-editor-active) .article-cover{ --rise-i:3; }
}

@media (max-width:800px){
  body .elementor .hero .hero-image-journal{ object-position:100% center; }
  body .elementor .hero-full .hero-copy{ top:47%; }
  body .elementor .hero-full .hero-copy.hero-copy-low{ top:56%; }
}

/* 15c Modules -----------------------------------------------------------------------
   section-module is the 12-column row inside a section-pad section:
     module-split   headline left (module-copy), copy right (split-copy)
       + wide-headline, faq-split (copy left, list right), roles-split,
         apply-split (form right), contact-split
     module-50      photo (section-media) and copy side by side
       + media-right puts the photo on the right
     module-photos  two photos, half and half */
body .elementor .split-copy{ display:flex; flex-direction:column; gap:20px; }
body .elementor .split-copy p{ max-width:39ch; }
body .elementor .section-media{ overflow:hidden; }
body .elementor .section-media img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; }

body .elementor .section-module{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gutter-page); align-items:start;
}
body .elementor .module-photos .section-media{ grid-column:span 6; }
body .elementor .module-split .module-copy{ grid-column:1 / 7; }
body .elementor .module-split.wide-headline .module-copy{ grid-column:1 / 8; }
body .elementor .module-split .module-copy h2{ max-width:none; font-size:var(--edit-h2); line-height:.93; }
body .elementor .module-split > .split-copy{ grid-column:8 / 13; align-self:end; padding-bottom:6px; }
body .elementor .module-split > .split-copy p{ max-width:none; }
body .elementor .faq-split > :is(.faq-list, .role-list, .service-list){ grid-column:7 / 13; margin-top:0; }
body .elementor .faq-split.roles-split .module-copy{ grid-column:1 / 8; grid-row:1; min-width:0; }
body .elementor .roles-split .module-copy .split-copy{ max-width:100%; }
body .elementor .roles-split .module-copy .split-copy p{ max-width:50ch; }
body .elementor .faq-split.roles-split > .roles-intro{ grid-column:8 / 11; grid-row:1; align-self:end; margin-left:-6px; padding-bottom:6px; }
body .elementor .faq-split.roles-split > .roles-intro p{ max-width:none; }
body .elementor .faq-split.roles-split > .role-list{ grid-column:1 / -1; grid-row:2; margin-top:84px; }
body .elementor .roles-split .role-main{ grid-template-columns:minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr); }
body .elementor .contact-split .module-copy h2{ font-size:var(--edit-h3); line-height:.98; }
body .elementor .contact-split .module-copy .contact-emails{ margin-top:88px; }
body .elementor .faq-split .module-copy{ grid-column:1 / 6; }
body .elementor .module-50 .section-media{ grid-column:1 / 7; }
body .elementor .module-50 .module-copy{ grid-column:8 / 13; }
body .elementor .media-right .section-media,
body .elementor .media-right .module-copy{ grid-row:1; }
body .elementor .module-50.media-right .section-media{ grid-column:7 / 13; }
body .elementor .module-50.media-right .module-copy{ grid-column:1 / 6; }
body .elementor .module-copy .section-label{ margin-bottom:48px; }
body .elementor .module-copy h2{ max-width:11em; margin:0; font-size:var(--edit-h2); line-height:.93; }
body.page-services .elementor .section-module .module-copy h2{ font-size:var(--edit-h3); line-height:.98; }
body.page-about .elementor .section-module .module-copy h2{ font-size:clamp(2.3rem, 4.8vw, 7rem); line-height:.96; }
body.page-services .elementor .module-split .module-copy h2,
body.page-about .elementor .module-split .module-copy h2{ font-size:var(--edit-h2); line-height:.93; }
body .elementor .module-copy .split-copy{ margin-top:32px; }
body .elementor .module-copy .split-copy p{ max-width:none; }
body .elementor .module-copy .service-list{ margin-top:44px; }

@media (max-width:800px){
  body .elementor .contact-split .module-copy .contact-emails{ margin-top:56px; }
  body .elementor .section-module{ grid-template-columns:1fr; gap:40px; }
  body.page-inner .elementor .section-module :is(.section-media, .module-copy){ grid-column:1; grid-row:auto; }
  body .elementor .module-copy .section-label{ margin-bottom:40px; }
  body.page-inner .elementor .module-split > .split-copy{ grid-column:1; margin-top:16px; }
  body.page-inner .elementor .faq-split > :is(.faq-list, .role-list, .service-list),
  body.page-inner .elementor .apply-split > .apply-form{ grid-column:1; grid-row:auto; }
  body.page-inner .elementor .roles-split .module-copy,
  body.page-inner .elementor .faq-split.roles-split > .roles-intro{ grid-column:1; grid-row:auto; }
  body .elementor :is(.module-split, .module-copy) h2 br{ display:none; }
  body.page-inner .elementor .section-module .module-copy h2{ width:100%; max-width:100%; min-width:0; overflow-wrap:anywhere; }
  body.page-inner .elementor .module-copy h2 em{ font-size:1.1em; }
  body .elementor .module-copy .split-copy{ margin-top:30px; }
  body .elementor .module-copy .service-list{ margin-top:56px; }
}

/* 15d Lists -------------------------------------------------------------------------
   service-row: a hairline row, number | name + description | arrow. As a
   link (a Div block with the A tag) it turns cherry on hover. Variants:
   principle-list (no arrow), job-list (one sentence each), role-row (name
   with team and place), contact-emails. faq-row is an Accordion item. */
body .elementor .service-row{
  position:relative;
  display:grid; grid-template-columns:48px minmax(0, 1fr) auto;
  gap:var(--gutter-page); align-items:baseline;
  padding:16px 0 20px;
  color:inherit; text-decoration:none;
}
body .elementor .service-row::after{
  content:"\2192"; grid-column:3; justify-self:end;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:clamp(1.1rem, 1.35vw, 1.45rem); line-height:1;
  transition:transform 220ms cubic-bezier(.2,.75,.2,1), color 180ms ease;
}
body .elementor .service-desc{ margin-top:8px; max-width:44ch; }
body .elementor .role-list{ margin-top:72px; }
body .elementor .role-main{
  display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:var(--gutter-page); align-items:start;
}
body .elementor .role-main .role-meta{ padding-top:.45em; }
body .elementor .role-list .role-main{ grid-template-columns:minmax(0, 7fr) minmax(0, 2fr) minmax(0, 3fr); }
body .elementor .role-list .role-meta{ display:contents; }
body .elementor .role-list .role-meta span{ padding-top:.45em; font-size:12px; letter-spacing:.035em; text-transform:uppercase; }
body .elementor .role-meta{
  display:flex; flex-wrap:wrap; gap:6px 32px; min-width:0;
  font-size:12px; letter-spacing:.035em; line-height:1.35; text-transform:uppercase;
}
body .elementor .contact-split .role-row{ grid-template-columns:minmax(0, 1fr); }
body .elementor .contact-split .role-row::after{ content:none; }
body .elementor .contact-split .role-meta span{
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-skip-ink:none;
  transition:color 180ms ease;
}
body .elementor .contact-split .role-row:hover .role-meta span{ color:var(--cherry, #760617); }
body .elementor .faq-split .role-row:nth-child(1 of .role-row){ padding-top:0; }
body .elementor .faq-split .role-row:nth-child(1 of .role-row)::before{ display:none; }

body .elementor .principle-list .service-row::after{ content:none; }
body .elementor .principle-list .service-row{ grid-template-columns:48px minmax(0, 1fr); }

/* Hairline above each row (drawn left to right on scroll, section 12). */
body .elementor :is(.service-row, .faq-row)::before{
  content:""; position:absolute; top:0; right:0; left:0;
  width:auto; height:1px; border:0; opacity:1;
  background:var(--border-hairline, rgba(30,30,30,.32));
  transform-origin:left center;
}
body .elementor .service-row .circle-number{ align-self:start; margin:.45em 0 0; }
body .elementor .service-row .circle-number::after{ content:none; }
/* Row names and questions use the text-title type style (Elementor class). */
body .elementor :is(.service-row, .faq-row) .text-title{ margin:0; transition:color 180ms ease; }
body .elementor a.service-row:hover .text-title,
body .elementor a.service-row:hover::after,
body .elementor a.service-row:focus-visible .text-title,
body .elementor a.service-row:focus-visible::after,
body .elementor .faq-row > summary:hover .text-title{ color:var(--cherry, #760617); }
body .elementor a.service-row:hover::after,
body .elementor a.service-row:focus-visible::after{ transform:translateX(6px); }
body .elementor a.service-row:focus-visible{ outline:1px solid var(--cherry, #760617); outline-offset:4px; }

/* FAQ: an Elementor Accordion (class faq-list), items class faq-row, a
   question Heading (text-title) in the item title and an answer Paragraph
   (faq-answer) in the item content. The plus/minus is drawn here; the
   Accordion's own icon is switched off. */
body .elementor .faq-row{ position:relative; }
body .elementor .faq-row > summary{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gutter-page); align-items:baseline;
  padding:26px 0 30px;
}
body .elementor .faq-row > summary > *{ grid-column:1 / 12; min-width:0; }
body .elementor .faq-row > summary::after{
  content:""; grid-column:12 / 13; align-self:center; justify-self:end;
  width:18px; height:18px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 14px no-repeat;
  transition:background-size 260ms ease;
}
body .elementor .faq-row[open] > summary::after{
  background-size:14px 1px, 1px 0;
}
body .elementor .faq-split .faq-row > summary{ grid-template-columns:minmax(0, 1fr) auto; padding:22px 0 26px; }
body .elementor .faq-split .faq-row > summary > *{ grid-column:1; }
body .elementor .faq-split .faq-row > summary::after{ grid-column:2; }
body .elementor .faq-row > :not(summary){ padding:0; min-width:0; }
body .elementor .faq-answer{ max-width:52ch; padding-bottom:36px; }
body .elementor .faq-split .faq-answer{ max-width:44ch; padding-bottom:30px; }

@media (max-width:1100px){
  body .elementor :is(.role-main, .role-list .role-main){ grid-template-columns:1fr; gap:10px; }
  body .elementor .role-list .role-meta{ display:flex; }
  body .elementor .role-list .role-meta span{ padding-top:0; }
}
@media (max-width:800px){
  body .elementor .role-list{ margin-top:48px; }
  body .elementor .role-main{ grid-template-columns:1fr; gap:10px; }
  body .elementor .role-meta{ gap:18px; }
  body .elementor .service-row{ grid-template-columns:36px minmax(0, 1fr) auto; padding:20px 0 24px; }
  body .elementor .principle-list .service-row{ grid-template-columns:36px minmax(0, 1fr); }
  body .elementor .faq-row > summary{ grid-template-columns:minmax(0, 1fr) auto; padding:20px 0 24px; }
  body .elementor .faq-row > summary > *{ grid-column:1; }
  body .elementor .faq-row > summary::after{ grid-column:2; }
}

/* 15e Work --------------------------------------------------------------------------
   work-header: section label + a text link on one line. The Work page's
   grid (work-grid + work-grid-archive) runs 7/5, 5/7, then one full-width
   card, repeating; the related grid (work-grid-related) is three across.
   Both cancel the homepage's wide/narrow/dropped pattern first. */
body .elementor .work-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:78px;
}
body .elementor .work-header .section-label{ margin:0; }
body .elementor .work-header .text-link{ font-size:12px; }
body.page-inner .elementor .work-header{ align-items:flex-start; margin-bottom:64px; }
body .elementor .work-intro{ width:calc(100% * 7 / 12 - 8px); margin:0 0 126px auto; }

body .elementor .work-grid:is(.work-grid-archive, .work-grid-related) > .project:nth-child(n of .project){ grid-column:span 5; margin-top:0; }
body .elementor .work-grid.work-grid-archive{ gap:110px 16px; align-items:end; }
body .elementor .work-grid.work-grid-archive > .project:nth-child(5n+1 of .project),
body .elementor .work-grid.work-grid-archive > .project:nth-child(5n+4 of .project){ grid-column:span 7; }
body .elementor .work-grid.work-grid-archive > .project:nth-child(5n of .project){ grid-column:1 / -1; }
body .elementor .work-grid.work-grid-archive > .project:nth-child(5n of .project) img{ aspect-ratio:16 / 9; }
body .elementor .work-grid-archive .has-case .caption-row > span.e-paragraph-base,
body .elementor .work-grid-archive .has-case .caption-row > .elementor-widget > span.e-paragraph-base{ color:var(--cherry, #760617); }
body .elementor .work-grid.work-grid-related > .project:nth-child(n of .project){ grid-column:span 4; }
@media (min-width:1800px){
  body .elementor .work-grid.work-grid-archive{ gap:170px 64px; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(n of .project){ grid-column:span 4; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(5n of .project) img{ aspect-ratio:4 / 5; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(7n of .project){ grid-column:1 / -1; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(7n of .project) img{ aspect-ratio:16 / 9; }
}
body.page-inner .elementor .client-grid{ margin-top:84px; }

@media (max-width:800px){
  body.page-inner .elementor .work-header{ flex-direction:column; gap:28px; margin-bottom:24px; }
  body .elementor .work-intro{ width:auto; max-width:none; margin-left:0; margin-bottom:72px; }
  body .elementor .work-intro br{ display:none; }
  body .elementor .work-grid.work-grid-archive{ gap:72px 10px; }
  body .elementor .work-grid:is(.work-grid-archive, .work-grid-related) > .project:nth-child(n of .project){ grid-column:span 1; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(3n+1 of .project),
  body .elementor .work-grid.work-grid-related > .project:nth-child(1 of .project){ grid-column:1 / 3; }
  body .elementor .work-grid.work-grid-archive > .project:nth-child(5n of .project) img{ aspect-ratio:4 / 5; }
  body .elementor :is(.work-grid-archive, .work-grid-related) .caption-row{ flex-wrap:wrap; gap:6px 12px; }
  body .elementor .work-grid-archive .caption-row .section-label{ min-width:0; }
  body .elementor .work-grid-archive > .project:not(:nth-child(3n+1 of .project)) .caption-row > span.e-paragraph-base,
  body .elementor .work-grid-archive > .project:not(:nth-child(3n+1 of .project)) .caption-row > .elementor-widget > span.e-paragraph-base,
  body .elementor .work-grid-related > .project:not(:nth-child(1 of .project)) .caption-row > span.e-paragraph-base,
  body .elementor .work-grid-related > .project:not(:nth-child(1 of .project)) .caption-row > .elementor-widget > span.e-paragraph-base{ flex-basis:100%; padding-left:0; }
}

/* 15f About -------------------------------------------------------------------------
   founder-profiles: one founder-profile each (founder-head: avatar Image +
   name and title, then split-copy). pull-quote: the quote Paragraph and a
   Paragraph set to Span for the source. */
body .elementor .faq-split > .founder-profiles{ grid-column:7 / 13; }
body .elementor .founder-profiles{ display:grid; gap:72px; }
body .elementor .founder-head{ display:flex; align-items:center; gap:var(--gutter-page); }
body .elementor .founder-avatar{ flex:none; width:72px; height:auto; aspect-ratio:4 / 5; object-fit:cover; }
body .elementor .founder-profiles .role-meta{ margin-top:10px; }
body .elementor .founder-profiles .split-copy{ margin-top:28px; }
body .elementor .founder-profiles .split-copy p{ max-width:none; }

body .elementor .pull-quote{
  margin:36px 0 0;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:clamp(1.6rem, 2.1vw, 2.2rem); line-height:1.12; letter-spacing:-.025em;
}
body .elementor .pull-quote p{ margin:0; }
body .elementor .pull-quote span.e-paragraph-base{
  display:block; margin-top:14px;
  font-family:var(--font-ui, "helvetica-neue-lt-pro"), Helvetica, Arial, sans-serif;
  font-size:12px; font-style:normal; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .module-copy .award-grid{ margin-top:56px; }
body .elementor .detail-line{ margin-top:40px; }
body .elementor .join-link{ margin-top:8px; font-size:16px; }

@media (max-width:800px){
  body.page-inner .elementor .faq-split > .founder-profiles{ grid-column:1; grid-row:auto; }
  body .elementor .founder-profiles{ gap:56px; }
  body .elementor .founder-avatar{ width:60px; }
}

/* 15g Careers and forms -------------------------------------------------------------
   apply-note (How to apply), job-list (the role's duties as rows), job-bonus
   (a bulleted Text Editor), and the Elementor Pro Form on the role and
   Contact pages (class apply-form). */
body .elementor .apply-note{ margin-top:56px; }
body .elementor .apply-note .text-title{ margin:0 0 16px; }
body .elementor .job-list{ margin-top:48px; }
body .elementor .job-list .service-row{ padding:14px 0 18px; }
body .elementor .job-list .text-title{ font-size:16px; line-height:1.5; letter-spacing:-.018em; }
body .elementor .job-list .circle-number{ margin-top:.2em; }
body .elementor .job-bonus{ margin-top:40px; }
body .elementor .job-bonus ul:not(.elementor-editor-element-settings){ margin:0; padding:0 0 0 1.1em; }
body .elementor .job-bonus li:not(.elementor-editor-element-setting) + li{ margin-top:.5em; }
body .elementor .job-bonus .apply-label{ margin-bottom:12px; }
body .elementor .older-link{ margin-top:64px; font-size:16px; }
body .elementor .apply-split > .apply-form{ grid-column:7 / 13; }
body .elementor .social-links{ display:flex; flex-wrap:wrap; gap:22px; margin-top:36px; font-size:16px; }

/* Capabilities page: the board's column and group headings link down to
   their sections (a small arrow drops in on hover). On phones the board is
   two columns whose rows line up (subgrid), with the last column across the
   bottom, its groups in two columns. */
body.page-inner .elementor :is(.capability-column h3, .capability-group h4) a{
  display:inline-block; color:inherit; cursor:pointer;
  transition:color 180ms ease;
}
body.page-inner .elementor :is(.capability-column h3, .capability-group h4) a::after{
  content:"\2193"; display:inline-block; margin-left:.4em;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:.7em; font-style:normal;
  opacity:0; transform:translateY(-4px);
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.75,.2,1);
}
body.page-inner .elementor :is(.capability-column h3, .capability-group h4) a:hover{ color:var(--cherry, #760617); }
body.page-inner .elementor :is(.capability-column h3, .capability-group h4) a:hover::after{ opacity:1; transform:translateY(0); }
body .elementor :is(#social, #creative, #partnerships){ scroll-margin-top:40px; }
body.page-inner .elementor .capabilities-board{ margin-top:126px; }

@media (max-width:800px){
  body.page-services .elementor .capabilities-board{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:38px var(--gutter-page); }
  /* gap:normal lets the subgrid take the board's 38px row gap. */
  body.page-services .elementor .capability-column{ display:grid; grid-column:auto; grid-row:span 4; grid-template-rows:subgrid; gap:normal; }
  body.page-services .elementor .capability-column h3{ margin-bottom:0; }
  body.page-services .elementor .capability-group + .capability-group{ margin-top:0; }
  body.page-services .elementor .capability-column:nth-last-child(1 of .capability-column){
    grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none;
    gap:38px var(--gutter-page); grid-column:1 / -1; grid-row:auto; margin-top:38px;
  }
  body.page-services .elementor .capability-column:nth-last-child(1 of .capability-column) h3{ grid-column:1 / -1; }
  body.page-services .elementor .capability-list li:not(.elementor-editor-element-setting) + li{ margin-top:6px; }
  body.page-services .elementor .capability-list a::after,
  body.page-services .elementor .capability-group h4 a::after{ display:none; }
}

/* Forms: Elementor Pro Form widgets inside apply-form (role page, Contact).
   Spacing comes from the widget's own Column/Row gap controls (16/28px);
   this styles the mockup's fields. Submissions are collected in WordPress
   (Elementor > Submissions). On success the-edit.js hides the fields and
   leaves the thank-you message. */
body .elementor .apply-form{ display:grid; gap:28px; }
body .elementor .apply-form .elementor-field-group > label,
body .elementor .apply-form .elementor-field-group > .elementor-field-label{
  display:block; width:100%; margin:0 0 10px; padding:0;
  color:inherit; font-size:12px; font-weight:400; line-height:1.35;
  letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .apply-form .elementor-field-group :is(input.elementor-field, textarea.elementor-field){
  width:100%; min-height:52px; margin:0;
  border:1px solid var(--ink, #1E1E1E); border-radius:0;
  padding:14px 16px; background:#FFFFFF; color:inherit;
  font:inherit; font-size:16px; line-height:1.35;
  outline:none; box-shadow:none; -webkit-appearance:none; appearance:none;
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
body .elementor .apply-form .elementor-field-group :is(input.elementor-field, textarea.elementor-field):focus{
  border-color:var(--ink, #1E1E1E); box-shadow:inset 0 0 0 1px var(--ink, #1E1E1E);
}
body .elementor .apply-form .elementor-field-group :is(input.elementor-field, textarea.elementor-field):user-invalid{
  border-color:var(--cherry, #760617); box-shadow:inset 0 0 0 1px var(--cherry, #760617);
}
body .elementor .apply-form .elementor-field::placeholder{ color:inherit; opacity:.4; }
body .elementor .apply-form .elementor-field-group textarea.elementor-field{ display:block; min-height:160px; resize:vertical; }
body .elementor .apply-form input[type="file"].elementor-field{ padding:10px 12px; font-size:14px; cursor:pointer; }
body .elementor .apply-form input[type="file"].elementor-field::file-selector-button{
  margin-right:14px; border:1px solid currentColor; border-radius:0;
  padding:8px 14px; background:transparent; color:inherit;
  font:inherit; font-size:12px; letter-spacing:.035em; text-transform:uppercase; cursor:pointer;
}
body .elementor .apply-form :is(.field-hint, .form-privacy){
  font-size:12px; line-height:1.35; letter-spacing:0; text-transform:none; opacity:.6;
}
body .elementor .apply-form .elementor-field-type-html{ margin-top:-22px; }
body .elementor .apply-form .form-privacy{ margin-top:-12px; }

/* "What can we help with?": checkboxes shown as pills. */
body .elementor .apply-form .elementor-field-subgroup{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
body .elementor .apply-form .elementor-field-option{ position:relative; margin:0; padding:0; }
body .elementor .apply-form .elementor-field-option input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; }
body .elementor .apply-form .elementor-field-option label{
  display:inline-block; margin:0; cursor:pointer;
  border:1px solid var(--ink, #1E1E1E); padding:13px 16px 12px; background:#FFFFFF;
  font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
  transition:background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
body .elementor .apply-form .elementor-field-option label:hover{ color:var(--cherry, #760617); }
body .elementor .apply-form .elementor-field-option input:checked + label{
  border-color:var(--ink, #1E1E1E); background:var(--ink, #1E1E1E); color:var(--paper, #FAFAFA);
}
body .elementor .apply-form .elementor-field-option input:focus-visible + label{ outline:1px solid var(--cherry, #760617); outline-offset:2px; }

/* Submit: Black Cherry, label + serif arrow. */
body .elementor .apply-form .elementor-field-type-submit{ justify-content:flex-start; }
body .elementor .apply-form .elementor-field-type-submit .elementor-button{
  display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; width:auto; min-height:0;
  border:0; border-radius:0; padding:19px 30px 18px;
  background:var(--cherry, #760617); color:#FFFFFF;
  font-size:12px; font-weight:400; letter-spacing:.04em; line-height:1; text-transform:uppercase;
  cursor:pointer; transition:background-color 180ms ease;
}
body .elementor .apply-form .elementor-field-type-submit .elementor-button:is(:hover, :focus-visible){ background:var(--ink, #1E1E1E); color:#FFFFFF; }
body .elementor .apply-form .elementor-field-type-submit .elementor-button:focus-visible{ outline:1px solid var(--ink, #1E1E1E); outline-offset:3px; }
body .elementor .apply-form .elementor-button-text::after{
  content:"\2192"; display:inline-block; margin-left:10px;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif; font-size:14px; line-height:.8;
  transition:transform 220ms ease;
}
body .elementor .apply-form .elementor-button:hover .elementor-button-text::after{ transform:translateX(4px); }
body .elementor .apply-form .elementor-message{ margin:0; font-size:16px; line-height:1.35; }
body .elementor .apply-form .elementor-message::before{ content:none; }
body .elementor .apply-form form.is-sent .elementor-field-group{ display:none; }

/* 15h Articles and legal text --------------------------------------------------------
   article-header (meta line, title, standfirst, cover) and article-body, as
   on the Journal's single-post template; job-header is the left-aligned
   version the Privacy Policy uses, with legal-body for its text (a Text
   Editor widget). */
body .elementor .article-header{ width:auto; max-width:none; padding:152px var(--section-pad-inline, var(--gutter-page)) 0; }
body .elementor .article-header-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--gutter-page); }
body .elementor .article-meta{
  grid-column:1 / 13; display:flex; justify-content:center; gap:24px; margin:0;
  font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .article-meta a{ color:inherit; text-decoration:none; transition:color 180ms ease; }
body .elementor .article-meta a:hover{ color:var(--cherry, #760617); }
body .elementor .article-title{
  grid-column:2 / 12; margin:84px 0 0; text-align:center;
  font-size:var(--edit-h2); line-height:.93; letter-spacing:-.058em;
}
body .elementor .article-standfirst{
  grid-column:4 / 10; margin:48px 0 0; text-align:center;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:clamp(1.4rem, 1.8vw, 1.85rem); line-height:1.2; letter-spacing:-.02em;
}
body .elementor .article-cover{ width:calc(100% * 8 / 12 - 8px); margin:84px auto 0; overflow:hidden; }
body .elementor .article-cover img{ width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; }

body .elementor .article-body{
  width:calc(100% * 6 / 12 - 8px); margin:0 auto;
  padding:104px var(--section-pad-inline, var(--gutter-page)) 0;
  font-size:18px; line-height:1.5;
}
body .elementor .article-body :is(p, ul, ol, dl, blockquote, h2, h3){ margin:0; }
body .elementor .article-body p + p{ margin-top:1.4em; }
body .elementor .article-body h2{ margin:2.6em 0 .8em; font-size:clamp(1.75rem, 2.15vw, 2.35rem); font-weight:400; line-height:1.02; letter-spacing:-.045em; }
body .elementor .article-body h3{
  margin:2em 0 .6em;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:1.3em; font-style:italic; font-weight:400; line-height:1.1; letter-spacing:-.02em;
}
body .elementor .article-body :is(h2, h3) + :is(p, ul){ margin-top:0; }
body .elementor .article-body ul:not(.elementor-editor-element-settings){ margin:0; padding:0 0 0 1.1em; }
body .elementor .article-body li:not(.elementor-editor-element-setting) + li{ margin-top:.6em; }

body .elementor .job-header{ padding-bottom:104px; border-bottom:1px solid var(--border-hairline, rgba(30,30,30,.32)); }
body .elementor .job-header :is(.article-title, .article-standfirst, .article-meta){ text-align:left; justify-content:flex-start; }
body .elementor .job-header .article-title{ grid-column:1 / 10; }
body .elementor .job-header .article-standfirst{ grid-column:1 / 7; }
body .elementor .legal-body{ margin-left:0; padding:84px var(--section-pad-inline, var(--gutter-page)) 152px; font-size:16px; line-height:1.5; }
body .elementor .legal-body h2{ margin:1.8em 0 .6em; }
body .elementor .legal-body h2:nth-child(1 of h2){ margin-top:0; }
body .elementor .legal-body p + p{ margin-top:1em; }
body .elementor .legal-body ul:not(.elementor-editor-element-settings){ margin:.6em 0; }
body .elementor .legal-body ul + p{ margin-top:1em; }
body .elementor .legal-body a{
  color:inherit; text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; transition:color 180ms ease;
}
body .elementor .legal-body a:hover{ color:var(--cherry, #760617); }

@media (max-width:1100px){
  body.page-inner .elementor .article-body{ width:calc(100% * 9 / 12); }
  body.page-inner .elementor .legal-body{ margin-left:0; }
  body .elementor .article-cover{ width:calc(100% * 10 / 12); }
}
@media (max-width:800px){
  body .elementor .article-header{ padding-top:120px; }
  body .elementor .article-header-grid{ grid-template-columns:1fr; }
  body .elementor :is(.article-title, .article-standfirst, .article-meta),
  body .elementor .job-header :is(.article-title, .article-standfirst){ grid-column:1; }
  body .elementor .job-header{ padding-bottom:64px; }
  body .elementor .article-title{ margin-top:40px; }
  body .elementor .article-standfirst{ margin-top:28px; }
  body .elementor .article-meta{ flex-wrap:wrap; gap:8px 18px; }
  body .elementor .article-cover{ width:auto; margin-top:48px; }
  body.page-inner .elementor .article-body{ width:auto; padding:64px var(--section-pad-inline, var(--gutter-page)) 0; font-size:17px; }
}

/* 15i Journal ------------------------------------------------------------------------
   The Journal page and "Keep reading" are Elementor Pro Loop Grids (CSS class
   post-grid) of the "Journal card" Loop Item: post-card (a link) > post-image,
   post-meta (date, category), post-title, post-sub (the excerpt), post-more.
   Category filter: a Taxonomy Filter widget (CSS class work-filters). */
body .elementor .post-grid .elementor-loop-container{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:96px 0;
}
body .elementor .post-grid .e-loop-item{ display:flex; flex-direction:column; min-width:0; }
body .elementor .post-card{
  position:relative; flex:1 1 auto;
  display:flex; flex-direction:column; min-width:0;
  padding:0 24px; color:inherit; text-decoration:none;
}
body .elementor .post-grid .e-loop-item:nth-child(4n+1 of .e-loop-item) .post-card{ padding-left:0; }
body .elementor .post-grid .e-loop-item:nth-child(4n of .e-loop-item) .post-card{ padding-right:0; }
body .elementor .post-grid .e-loop-item:not(:nth-child(4n+1 of .e-loop-item)) .post-card::before{
  content:""; position:absolute; top:0; bottom:0; left:0;
  width:1px; height:auto; border:0; opacity:1;
  background:var(--border-hairline, rgba(30,30,30,.32));
}
body .elementor .post-image{ overflow:hidden; background:#ECEBE8; }
body .elementor .post-image img{
  width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover;
  transition:transform 800ms cubic-bezier(.18,.75,.2,1);
}
body .elementor .post-card:hover .post-image img{ transform:scale(1.025); }
body .elementor .post-meta{
  display:flex; gap:18px; margin-top:16px;
  font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase;
}
body .elementor .post-title{
  margin:12px 0 0;
  font-size:clamp(1.4rem, 1.6vw, 1.75rem); font-weight:400; line-height:1.05; letter-spacing:-.04em;
  transition:color 180ms ease;
}
body .elementor .post-title em{ font:inherit; font-style:normal; letter-spacing:inherit; }
body .elementor .post-card:hover .post-title{ color:var(--cherry, #760617); }
body .elementor .post-sub{ margin-top:10px; }
body .elementor .post-more{ margin-top:auto; padding-top:20px; font-size:12px; line-height:1; }
body .elementor .post-more span:first-child{
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-skip-ink:none;
  transition:text-decoration-color 220ms ease;
}
body .elementor .post-more span + span{
  display:inline-flex; margin-left:5px;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif; font-size:11px; line-height:.8;
  transition:color 220ms ease;
}
body .elementor .post-card:hover .post-more span:first-child{ text-decoration-color:var(--cherry, #760617); }
body .elementor .post-card:hover .post-more span + span{ color:var(--cherry, #760617); }
body .elementor .article-next .post-sub{ display:none; }

/* Pagination under the grid: "Older posts" / "Newer posts" as text links. */
body .elementor .post-grid .elementor-pagination{ display:flex; gap:24px; margin-top:64px; font-size:16px; text-align:left; }
body .elementor .post-grid .elementor-pagination a{
  color:inherit; text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; transition:text-decoration-color 220ms ease;
}
body .elementor .post-grid .elementor-pagination a:hover{ text-decoration-color:var(--cherry, #760617); }

/* Category filter. */
body .elementor .work-filters .e-filter{ display:flex; flex-wrap:wrap; gap:22px; }
body .elementor .work-filters .e-filter-item,
body .elementor .work-filters .e-filter-item:hover,
body .elementor .work-filters .e-filter-item:focus{
  position:relative; min-height:0; margin:0; border:0; border-radius:0;
  padding:0 0 2px; background:transparent; color:inherit;
  font:inherit; font-size:12px; font-weight:400; line-height:1.35;
  letter-spacing:normal; text-transform:none; cursor:pointer;
  transition:color 180ms ease;
}
body .elementor .work-filters .e-filter-item::after{
  content:""; position:absolute; right:0; bottom:0; left:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform 240ms ease;
}
body .elementor .work-filters .e-filter-item:hover,
body .elementor .work-filters .e-filter-item[aria-pressed="true"]{ color:var(--cherry, #760617); }
body .elementor .work-filters .e-filter-item[aria-pressed="true"]::after{ transform:scaleX(1); transform-origin:left; }
body .elementor .work-filters .e-filter-item:focus-visible{ outline:1px solid var(--cherry, #760617); outline-offset:3px; }

/* Article body extras (inside the post content). */
body .elementor .article-body .article-link{ margin-top:2em; font-size:16px; }
body .elementor .article-body .article-link a{
  color:inherit; text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; transition:text-decoration-color 220ms ease;
}
body .elementor .article-body .article-link a:hover{ text-decoration-color:var(--cherry, #760617); }
body .elementor .article-body .article-figure{ margin:64px 0; }
body .elementor .article-body .article-figure img{ display:block; width:100%; height:auto; aspect-ratio:1600 / 480; object-fit:cover; }
body .elementor .article-body .article-figure + h2{ margin-top:0; }
body .elementor .article-body .article-quote{
  margin:2.6em 0; padding:0; border:0;
  font-family:var(--font-editorial, "Times New Roman"), Times, serif;
  font-size:clamp(1.9rem, 2.6vw, 2.8rem); font-style:normal; line-height:1.1; letter-spacing:-.03em;
}
body .elementor .article-body .article-quote p{ margin:0; }
body .elementor .article-body .article-list{ margin:1.4em 0 0; }
body .elementor .article-body .article-list > div{ position:relative; padding:18px 0 22px; }
body .elementor .article-body .article-list > div::before{
  content:""; position:absolute; top:0; right:0; left:0; height:1px;
  background:var(--border-hairline, rgba(30,30,30,.32));
}
body .elementor .article-body .article-list dt{ font-size:12px; letter-spacing:.035em; text-transform:uppercase; }
body .elementor .article-body .article-list dd{ margin:8px 0 0; }

/* Author and share, under the article. */
body .elementor .article-footer{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--gutter-page);
  width:calc(100% * 6 / 12 - 8px); margin:104px auto 0;
  padding:0 var(--section-pad-inline, var(--gutter-page)) 104px;
}
body .elementor .article-author{ grid-column:1 / 8; }
body .elementor .article-share{ grid-column:9 / 13; }
body .elementor .article-author-label{ margin:0 0 18px; font-size:12px; line-height:1.35; letter-spacing:.035em; text-transform:uppercase; }
/* The title is the Post Title widget (keeps the <em> in a title). */
body .elementor .article-title .elementor-heading-title{
  margin:0; color:inherit; font-size:inherit; font-weight:400; line-height:inherit; letter-spacing:inherit; text-align:inherit;
}
body .elementor .article-author-row{ display:flex; gap:20px; align-items:center; }
body .elementor .article-author-row img{ flex:0 0 72px; width:72px; height:72px; border-radius:50%; object-fit:cover; }
body .elementor .article-author-row p{ margin-top:8px; }
body .elementor .article-share .social-links{ margin-top:0; }

@media (max-width:1100px){
  body .elementor .post-grid .elementor-loop-container{ grid-template-columns:1fr 1fr; }
  body .elementor .post-grid .e-loop-item .post-card{ padding:0 24px; }
  body .elementor .post-grid .e-loop-item:nth-child(odd of .e-loop-item) .post-card{ padding-left:0; }
  body .elementor .post-grid .e-loop-item:nth-child(even of .e-loop-item) .post-card{ padding-right:0; }
  body .elementor .post-grid .e-loop-item .post-card::before{ display:none; }
  body .elementor .post-grid .e-loop-item:nth-child(even of .e-loop-item) .post-card::before{ display:block; }
  body.page-inner .elementor .article-footer{ width:calc(100% * 9 / 12); }
}
@media (max-width:800px){
  body .elementor .work-filters .e-filter{ gap:16px; }
  body .elementor .post-grid .elementor-loop-container{ gap:56px 0; }
  body .elementor .post-grid .e-loop-item .post-card{ padding:0 12px; }
  body .elementor .post-grid .e-loop-item:nth-child(odd of .e-loop-item) .post-card{ padding-left:0; }
  body .elementor .post-grid .e-loop-item:nth-child(even of .e-loop-item) .post-card{ padding-right:0; }
  body .elementor .post-meta{ flex-direction:column; gap:4px; }
  body .elementor .post-title{ font-size:1.25rem; }
  body .elementor .post-sub{ display:none; }
  /* The mockup's next text block keeps its 64px top padding on phones. */
  body .elementor .article-body .article-figure{ margin:48px 0 112px; }
  body.page-inner .elementor .article-footer{ grid-template-columns:1fr; gap:40px; width:auto; margin-top:64px; padding:0 var(--section-pad-inline, var(--gutter-page)) 64px; }
  body .elementor :is(.article-author, .article-share){ grid-column:1; }
}

/* Date and category come from a Post Info widget (a list); lay it out as the
   mockup's plain meta line. */
body .elementor :is(.post-meta, .article-meta) .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; gap:18px; margin:0; padding:0; list-style:none;
}
body .elementor .article-meta .elementor-icon-list-items{ gap:24px; }
body .elementor :is(.post-meta, .article-meta) .elementor-icon-list-item{ margin:0; padding:0; font-size:inherit; line-height:inherit; }
body .elementor :is(.post-meta, .article-meta) .elementor-icon-list-item::after{ display:none; }
body .elementor :is(.post-meta, .article-meta) .elementor-icon-list-text{ padding:0; color:inherit; }
body .elementor .article-meta .elementor-icon-list-text a{ color:inherit; transition:color 180ms ease; }
body .elementor .article-meta .elementor-icon-list-text a:hover{ color:var(--cherry, #760617); }
body .elementor .article-meta a.e-paragraph-link-base:hover{ color:var(--cherry, #760617); }
@media (max-width:800px){
  body .elementor .post-meta .elementor-icon-list-items{ flex-direction:column; gap:4px; }
  body .elementor .article-meta .elementor-icon-list-items{ gap:8px 18px; }
}


/* 16. JOBS ------------------------------------------------------------------
   The Jobs post type (inc-jobs.php). The "Job" template and the Careers page
   print each role's parts through shortcodes, in the same markup the
   Elementor elements render, so sections 8 and 15g style them as before.
   A Shortcode widget with the class is-contents drops out of the layout: its
   output sits in the parent box as if it were the elements themselves. */
body .elementor .elementor-widget-shortcode.is-contents,
body .elementor .elementor-widget-shortcode.is-contents > .elementor-shortcode{ display:contents; }

/* Hidden container that keeps Elementor printing its own styles for the
   classes the shortcodes use (it prints a class's styles only on pages whose
   elements use it). Never shown. Do not delete it. */
body .elementor .edit-style-anchor{ display:none !important; }

/* Hero: the intro keeps the hero-bottom measure (section 8); the pay range
   sits on its own line inside it. */
body .elementor .hero-bottom > .is-contents > .elementor-shortcode > p:first-child{ max-width:51ch; }
body .elementor .hero-bottom .job-pay{ display:block; margin-top:12px; letter-spacing:.035em; text-transform:uppercase; }
/* With the intro inside the shortcode, section 8's p:first-of-type would
   catch the Apply link instead. */
body .elementor .hero-bottom > .is-contents ~ p{ max-width:none; }

/* On a job the title is the page h1 (the line above it is a paragraph). */
body .elementor .hero h1.text-display-xl{ margin:0; }

/* "Other open roles" on a job, and the line above it, step aside when the
   job is the only one open. (:has() cannot sit inside another :has(), so
   the test runs on the page document, not on the line.) */
body .elementor:not(:has(#other-roles .role-row)) #other-roles,
body .elementor:not(:has(#other-roles .role-row)) .full-line:has(+ #other-roles){ display:none; }

/* Careers page with no open roles. */
body .elementor .role-list .roles-empty{ max-width:50ch; margin:0; }

@media (max-width:800px){
  body .elementor .hero-bottom > .is-contents > .elementor-shortcode > p:first-child{ max-width:27ch; }
}


/* 17. CLIENTS ---------------------------------------------------------------
   The logo wall on the Clients page: the homepage client grid (10g) plus the
   class client-wall. 6 across, so each logo spans 2 of the 12 grid columns;
   4 across below 1024px; 3 on phones (2 of the 6 phone columns).
   The Brand-Logos files are black logos centred on 500px transparent
   squares, so they show square and are not inverted. Grayscale keeps the one
   colour logo (Marvel) in line with the rest. To add a client, duplicate a
   cell in Elementor and swap the image; keep the A-Z order. */
body .elementor .client-grid.client-wall{ grid-template-columns:repeat(6, minmax(0, 1fr)); margin-top:0; }
body .elementor .client-wall .client-cell{ height:auto; aspect-ratio:5 / 4; padding:0; }
body .elementor .client-wall .client-cell img{
  width:42%; max-width:114px; height:auto; aspect-ratio:1; object-fit:contain; filter:grayscale(1);
}

@media (max-width:1024px){
  body .elementor .client-grid.client-wall{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width:800px){
  body .elementor .client-grid.client-wall{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 12px; margin-top:0; }
  body .elementor .client-wall .client-cell{ aspect-ratio:1; }
  body .elementor .client-wall .client-cell img{ width:54%; max-width:90px; height:auto; }
}

/* Entrance: each logo fades up when its own row arrives (not when the wall
   does, as on the homepage), staggered across the row only. --i is the
   cell's index (the-edit.js setIndex); mod() turns it into the column. */
@media (prefers-reduced-motion:no-preference){
  .edit-js body:not(.elementor-editor-active) .client-wall .client-cell img{ transition-delay:calc(mod(var(--i, 0), 6) * 70ms); }
  .edit-js body:not(.elementor-editor-active) .client-wall .client-cell:not(.is-in) img{ opacity:0; transform:translateY(18px) scale(.96); }
}
@media (prefers-reduced-motion:no-preference) and (max-width:1024px){
  .edit-js body:not(.elementor-editor-active) .client-wall .client-cell img{ transition-delay:calc(mod(var(--i, 0), 4) * 70ms); }
}
@media (prefers-reduced-motion:no-preference) and (max-width:800px){
  .edit-js body:not(.elementor-editor-active) .client-wall .client-cell img{ transition-delay:calc(mod(var(--i, 0), 3) * 70ms); }
}