.elementor-kit-5{--e-global-color-primary:#0F3848;--e-global-color-secondary:#C9955F;--e-global-color-text:#16242B;--e-global-color-accent:#F4F1EA;--e-global-color-navy2:#0A2836;--e-global-color-navy3:#061C27;--e-global-color-bronzelt:#DCAE79;--e-global-color-bronzedk:#A5764A;--e-global-color-stone2:#EBE5D9;--e-global-color-paper:#FFFFFF;--e-global-color-ink2:#4B5D67;--e-global-color-line:#DED6C7;--e-global-typography-primary-font-family:"Heebo";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.15em;--e-global-typography-secondary-font-family:"Heebo";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Assistant";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.8em;--e-global-typography-accent-font-family:"Assistant";--e-global-typography-accent-font-weight:600;color:#16242B;font-family:"Assistant", Sans-serif;font-size:17px;font-weight:400;line-height:1.8em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#C9955F;font-family:"Assistant", Sans-serif;font-weight:600;color:#0A2836;border-radius:4px 4px 4px 4px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#A5764A;color:#FFFFFF;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#0F3848;}.elementor-kit-5 a:hover{color:#C9955F;}.elementor-kit-5 h1{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:46px;font-weight:700;line-height:1.15em;}.elementor-kit-5 h2{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:36px;font-weight:700;line-height:1.15em;}.elementor-kit-5 h3{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:26px;font-weight:700;line-height:1.15em;}.elementor-kit-5 h4{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:21px;font-weight:700;line-height:1.15em;}.elementor-kit-5 h5{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:18px;font-weight:700;line-height:1.15em;}.elementor-kit-5 h6{color:#0F3848;font-family:"Heebo", Sans-serif;font-size:16px;font-weight:700;line-height:1.15em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --stone-bg:#DCC9A3; --ivory-surface:#F2E9D8; --warm-ink:#2A2420; --brass-accent:#B98A4E; --navy-splash:#16283F; --steel-blue:#3A6178; --font-heading:Assistant; --font-body:Heebo; }
/* Start custom CSS *//* ═══ יתד · כיוון א — אבן וברונזה ═══════════════════════════════════════ */
:root{
  --ytd-navy:#0F3848; --ytd-navy2:#0A2836; --ytd-navy3:#061C27;
  --ytd-bronze:#C9955F; --ytd-bronze-lt:#DCAE79; --ytd-bronze-dk:#A5764A;
  /* 🔴 The brand bronze is a FILL colour, not a text colour. As text on the stone
     or paper field it measures 2.34–2.64 against a 4.5 requirement — the kickers,
     the sub-lines and the white-on-bronze buttons all failed. Two derived tokens
     keep the brand intact while passing:
       --ytd-bronze-text  #8A5F35  → 5.57 on white, 4.94 on stone
       --ytd-on-bronze    #0A2836  → 5.80 as text ON the bronze fill
     Measured, not guessed. Re-measure if either base colour ever moves. */
  --ytd-bronze-text:#8A5F35; --ytd-on-bronze:#0A2836;
  --ytd-stone:#F4F1EA; --ytd-stone2:#EBE5D9; --ytd-paper:#fff;
  --ytd-ink:#16242B; --ytd-ink2:#4B5D67; --ytd-line:#DED6C7;
}

/* ── the icon set is stroke-based, so Elementor's fill-based colouring
      would render nothing. Colour comes from `color`, inherited by
      currentColor, and fill is forced off. ─────────────────────────────── */
.elementor-icon svg,
.elementor-icon-list-icon svg,
.elementor-social-icon svg{
  fill:none !important; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.elementor-icon-list-icon svg,
.elementor-social-icon svg{ width:1em; height:1em; }
.elementor-social-icon{ background:transparent !important; }
.ytd-util-social .elementor-social-icon:hover svg,
.ytd-fsocial .elementor-social-icon:hover svg{ color:var(--ytd-bronze); }
/* ic-ig's dot is a filled circle and must stay filled. */
.elementor-icon svg circle[fill="currentColor"],
.elementor-social-icon svg circle[fill="currentColor"]{ fill:currentColor !important; }

/* ── Hello Elementor's reset.css sets a global pink button hover
      (#CC3366). Anything that renders a bare <button> inherits it.
      This was diagnosed the hard way on the previous build. ───────────── */
button:hover, button:focus,
input[type="submit"]:hover, input[type="submit"]:focus{
  background-color:var(--ytd-bronze-dk);
}

/* ── section furniture ──────────────────────────────────────────────── */
.ytd-rule .elementor-divider-separator{ border-radius:2px; }
.ytd-kick .elementor-heading-title{
  color:var(--ytd-bronze-text); font-family:Assistant,sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.16em; margin:0;
}
.ytd-on-dark .elementor-heading-title{ color:#E7D6BD; }
.ytd-title .elementor-heading-title{ color:var(--ytd-navy); }
.ytd-title.ytd-on-dark .elementor-heading-title{ color:#fff; }
.ytd-lead{ color:var(--ytd-ink2); max-width:62ch; font-size:17.5px; }
.ytd-proc .ytd-lead, .ytd-incl .ytd-lead{ margin-inline:auto; text-align:center; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.ytd-btn .elementor-button{
  border-radius:4px; padding:14px 30px; letter-spacing:.02em; color:var(--ytd-on-bronze); font-weight:600;
  border:1px solid transparent; transition:background .25s,color .25s,border-color .25s;
}
.ytd-btn-line .elementor-button{
  background:transparent; border-color:rgba(255,255,255,.55); color:#fff;
}
.ytd-btn-line .elementor-button:hover{ background:#fff; color:var(--ytd-navy); border-color:#fff; }
.ytd-btn-dark .elementor-button{ background:var(--ytd-navy); color:#fff; }
.ytd-btn-dark .elementor-button:hover{ background:var(--ytd-navy2); }
.ytd-btn-center{ align-self:center; }

/* ── G4 · utility bar ──────────────────────────────────────────────────── */
.ytd-util{ position:relative; z-index:70; font-size:13.5px; }
.ytd-util-list .elementor-icon-list-item a{ color:#93AAB6; }
.ytd-util-list .elementor-icon-list-item a:hover{ color:var(--ytd-bronze); }
.ytd-util-social{ margin-inline-start:auto; }

/* ── G1 · header ───────────────────────────────────────────────────────── */
/* 🔴 Elementor Pro's `sticky` setting saves, prints into data-settings, and on a
   clean load never binds a handler — measured: at scrollY 700 the header was
   still position:relative and had scrolled off the screen. So stickiness here is
   pure CSS, which needs no handler and no plugin version.

   `sticky` follows the scroll but sits in flow; `absolute` overlays but scrolls
   away. Both at once: the header location sticks with a NEGATIVE offset equal to
   the utility bar's height, so the util strip scrolls off and only the logo row
   pins to the top — exactly the mockup's behaviour. The hero is then pulled back
   up under the logo row so the video runs behind it from the first pixel. */
:root{ --ytd-util-h:49px; --ytd-hdr-h:82px; }
header.elementor-location-header{
  position:sticky; inset-block-start:calc(var(--ytd-util-h) * -1); z-index:99;
}
body.home .ytd-hero{ margin-block-start:calc(var(--ytd-hdr-h) * -1); }

/* The navy fill, driven by scroll position itself — no listener, no plugin.
   NOTE: an `!important` background on this element would beat the animation and
   the bar would never fill in. */
@keyframes ytd-hdr-solid{
  from{ background-color:rgba(15,56,72,0); box-shadow:0 2px 22px rgba(6,28,39,0); }
  to  { background-color:rgba(15,56,72,1); box-shadow:0 2px 22px rgba(6,28,39,.35); }
}
.ytd-hdr{
  background-color:transparent;
  animation:ytd-hdr-solid linear both;
  animation-timeline:scroll();
  animation-range:60px 200px;
}
/* The fallback fails toward the SOLID bar on purpose — white menu text over
   page content is the worse failure. */
@supports not (animation-timeline: scroll()){
  .ytd-hdr{ animation:none; background-color:var(--ytd-navy); }
}
/* An inner page has no hero to float over, so the bar is solid from the start. */
body:not(.home) .ytd-hdr{ animation:none; background-color:var(--ytd-navy); }

/* The spec overrides the house standard on purpose: logo LEFT, hamburger right.
   🔴 That is done by widget ORDER in the header template (menu first, logo second),
   not here. Two CSS routes were tried and both are wrong: `direction:ltr` on the row
   flips the dropdown with it — the Hebrew links anchored to the wrong edge, clipped
   mid-word ("כל הג", "פר"), and the panel landed at x=-51 giving the document
   horizontal overflow. And `flex-direction:row-reverse` never wins, because Elementor
   drives the direction through a custom property on the element's own generated rule. */
.ytd-logo img{ height:46px; width:auto; }
.ytd-logo-white img{ filter:drop-shadow(0 2px 7px rgba(0,0,0,.5)); }

/* ── the menu, open ────────────────────────────────────────────────────────
   Elementor ships this dropdown as a white sheet with 13px near-black links —
   entirely off-palette. It is the state a visitor actually navigates from, so
   it gets the same care as the closed bar. */
.ytd-nav .elementor-menu-toggle{
  color:#fff; background:transparent; padding:6px;
}
.ytd-nav .elementor-menu-toggle:hover,
.ytd-nav .elementor-menu-toggle:focus{ background:transparent; color:var(--ytd-bronze); }
.ytd-nav .elementor-menu-toggle i, .ytd-nav .elementor-menu-toggle svg{ color:inherit; fill:currentColor; }

/* 🔴 The panel must FLOAT, not sit in flow. Without `full_width:stretch` Elementor
   stops positioning it, so it expanded the header instead and shoved the hero ~250px
   down the moment the menu opened. Anchor it to the widget and drop it below the bar.
   🔴 And it needs the extra specificity: Elementor Pro's own stylesheet loads AFTER
   the kit CSS, so a two-class .elementor-kit-5 ties and loses — `position` stayed `static`.
   `.ytd-hdr .ytd-nav nav…` outranks it without reaching for !important. */
.ytd-hdr .ytd-nav .elementor-widget-container{ position:relative; }
.ytd-hdr .ytd-nav nav.elementor-nav-menu--dropdown{
  position:absolute;
  top:100%;
  /* 🔴 PHYSICAL right, not `inset-inline-end`. This document is RTL, where
     inline-end resolves to the LEFT — the panel hung 152px off the right edge of
     the viewport. The toggle sits at the right of the bar, so the panel's right
     edge is what must line up with it. */
  right:0;
  left:auto;
  margin-top:18px;              /* the header's bottom padding — lands flush under the bar */
  z-index:120;
  background-color:var(--ytd-navy2);
  border-top:2px solid var(--ytd-bronze);
  box-shadow:0 18px 46px rgba(6,28,39,.45);
  border-radius:0 0 6px 6px;
  min-width:300px;
  overflow:hidden;
}
.ytd-nav .elementor-nav-menu--dropdown a.elementor-item{
  color:#EAF1F4;
  font-family:Assistant,sans-serif;
  font-size:17px;
  font-weight:400;
  text-align:start;
  padding:15px 26px;
  border-bottom:1px solid rgba(201,149,95,.22);
  transition:background-color .2s,color .2s,padding-inline-start .2s;
}
.ytd-nav .elementor-nav-menu--dropdown li:last-child a.elementor-item{ border-bottom:0; }
.ytd-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.ytd-nav .elementor-nav-menu--dropdown a.elementor-item:focus,
.ytd-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  background-color:rgba(201,149,95,.14);
  color:#fff;
  padding-inline-start:34px;
}

/* ── H1 · hero ─────────────────────────────────────────────────────────── */
.ytd-hero{ position:relative; overflow:hidden; }
.ytd-hero .elementor-background-video-container video{ object-fit:cover; }
.ytd-hero-in{ text-align:center; }
.ytd-hero-h1 .elementor-heading-title{
  color:#fff; font-size:clamp(34px,5.4vw,62px); line-height:1.1; margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.ytd-hero-sub{ color:#DCE7EC; font-size:clamp(17px,2vw,21px); }

/* ── H3 · philosophy ───────────────────────────────────────────────────── */
.ytd-quote{ font-size:18px; color:var(--ytd-ink2); }
.ytd-quote b{ display:block; color:var(--ytd-navy); font-family:Heebo,sans-serif;
  font-weight:700; font-size:25px; line-height:1.3; margin-bottom:14px; }
.ytd-stat{ flex:1 1 calc(50% - 9px); background:var(--ytd-stone);
  border:1px solid var(--ytd-line); border-radius:6px; padding:22px 16px; text-align:center; }
.ytd-stat .elementor-icon{ color:var(--ytd-bronze); font-size:26px; }
.ytd-stat .elementor-icon-box-title{ color:var(--ytd-navy);
  font-family:Heebo,sans-serif; font-weight:700; font-size:33px; line-height:1.1; margin:8px 0 2px; }
.ytd-stat .elementor-icon-box-description{ color:var(--ytd-ink2); font-size:14.5px; margin:0; }

/* ── H5 · categories ───────────────────────────────────────────────────── */
.ytd-cat{ flex:1 1 calc(33.333% - 12px); min-width:250px;
  background:#fff; border:1px solid var(--ytd-line); border-radius:6px;
  padding:32px 26px; transition:border-color .25s,transform .25s; }
.ytd-cat:hover{ border-color:var(--ytd-bronze); transform:translateY(-3px); }
.ytd-cat .elementor-icon{ color:var(--ytd-bronze); font-size:34px; }
.ytd-cat .elementor-icon-box-title{ color:var(--ytd-navy); font-size:22px; margin:14px 0 6px; }
.ytd-cat .elementor-icon-box-description{ color:var(--ytd-ink2); font-size:15.5px; margin:0; }

/* ── H6 · process · the reference template's "6 Steps" motif ───────────── */
/* width comes from the container setting, so no flex-basis here — a basis
   would override it and stack the steps again. */
.ytd-step{ min-width:200px; text-align:center; }
.ytd-dial{ position:relative; width:96px; height:96px; margin-inline:auto;
  border:1px dashed var(--ytd-bronze); border-radius:50%;
  background:#fff; }
.ytd-dial-icon .elementor-icon{ color:var(--ytd-navy); font-size:34px; }
.ytd-dial-num .elementor-heading-title{
  position:absolute; inset-block-end:-11px; inset-inline-end:-6px;
  width:30px; height:30px; border-radius:50%;
  background:var(--ytd-bronze); color:var(--ytd-on-bronze);
  font-family:Heebo,sans-serif; font-weight:700; font-size:15px;
  display:grid; place-items:center; margin:0;
}
.ytd-step-title .elementor-heading-title{ color:var(--ytd-navy); font-size:21px; margin:0; }
.ytd-step-text{ color:var(--ytd-ink2); font-size:15.5px; }

/* ── what is included ──────────────────────────────────────────────────── */
.ytd-incl-item{ flex:1 1 calc(25% - 17px); min-width:210px; text-align:center; }
.ytd-incl-item .elementor-icon{ color:var(--ytd-bronze); font-size:30px; }
.ytd-incl-item .elementor-icon-box-title{ color:#fff; font-size:18px; margin:12px 0 6px; }
.ytd-incl-item .elementor-icon-box-description{ color:#A9C0CB; font-size:15px; margin:0; }

/* ── H2 + H7 · testimonials ────────────────────────────────────────────── */
.ytd-proj-card{ min-width:260px;
  background:#fff; border:1px solid var(--ytd-line); border-radius:6px; position:relative; }
.ytd-qm .elementor-heading-title{
  color:var(--ytd-bronze-dk); opacity:1; font-family:Heebo,sans-serif;
  font-size:46px; line-height:.7; margin:0;
}
.ytd-proj-title .elementor-heading-title{ color:var(--ytd-navy); font-size:20px; margin:0; }
.ytd-proj-sub{ color:var(--ytd-bronze-text); font-size:14.5px; }
.ytd-proj-quote{ color:var(--ytd-ink2); font-size:15.5px; }
.ytd-proj-who .elementor-heading-title{
  color:var(--ytd-navy); font-family:Assistant,sans-serif; font-weight:600;
  font-size:15px; margin:0; padding-top:12px; border-top:1px solid var(--ytd-line);
}

/* ── H8 · contact ──────────────────────────────────────────────────────── */
.ytd-people .elementor-icon-list-item a,
.ytd-people .elementor-icon-list-text{ color:var(--ytd-navy); font-size:16.5px; }
.ytd-people .elementor-icon-list-icon{ color:var(--ytd-bronze); }
.ytd-talk-form{ border:1px solid var(--ytd-line); border-radius:6px; }
.ytd-form .elementor-field-group input,
.ytd-form .elementor-field-group textarea{
  background:#fff; border:1px solid var(--ytd-line); border-radius:4px;
  padding:13px 15px; font-family:Assistant,sans-serif; font-size:16px;
}
.ytd-form .elementor-field-group input:focus,
.ytd-form .elementor-field-group textarea:focus{
  border-color:var(--ytd-bronze); outline:3px solid var(--ytd-bronze-dk); outline-offset:2px;
}
/* 20.9: the ring needs a different bronze on the dark band - measured both ways */
body .ytd-form-ondark .elementor-field-group input:focus,
body .ytd-form-ondark .elementor-field-group textarea:focus{ outline-color:var(--ytd-bronze); }
.ytd-form .elementor-button{ background:var(--ytd-bronze); color:var(--ytd-on-bronze); font-weight:600; border-radius:4px; padding:14px; }
.ytd-form .elementor-button:hover{ background:var(--ytd-bronze-dk); }

/* ── G5 · footer ───────────────────────────────────────────────────────── */
.ytd-flogo img{ height:52px; width:auto; }
.ytd-ftext{ color:#A9C0CB; font-size:15.5px; max-width:40ch; }
.ytd-fcol-title .elementor-heading-title{ color:#fff; font-size:16px; margin:0; }
.ytd-flist .elementor-icon-list-item a{ color:#C6D3DA; font-size:15px; }
.ytd-flist .elementor-icon-list-item a:hover{ color:var(--ytd-bronze); }
.ytd-flist .elementor-icon-list-icon{ display:none; }
.ytd-fbottom{ color:#7E97A3; font-size:13.5px; }
.ytd-fbottom p{ margin:0; }
.ytd-fbottom a{ color:var(--ytd-bronze); }

/* The section wrappers centre their text, which would shrink-wrap the grids
   inside them. The grids are forced back to the full row. */
.ytd-proc > .e-con-inner > .ytd-steps,
.ytd-incl > .e-con-inner > .ytd-incl-grid,
.ytd-cats > .e-con-inner > .ytd-cat-grid,
.ytd-proj > .e-con-inner > .ytd-proj-grid{ width:100%; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .ytd-cat{ flex-basis:calc(50% - 9px); }
  .ytd-incl-item{ flex-basis:calc(50% - 11px); }
  .ytd-philo-text, .ytd-stats, .ytd-talk-info, .ytd-talk-form{ width:100%; }
  .ytd-fbrand, .ytd-fcol{ width:100%; }
}
@media(max-width:767px){
  .ytd-cat, .ytd-incl-item{ flex-basis:100%; }
  .ytd-step, .ytd-proj-card{ width:100% !important; }
  .ytd-util{ justify-content:center; }
  .ytd-util-social{ margin-inline-start:0; }
  .ytd-hero{ min-height:88vh; }
}
/* ═══ inner pages · archives · single items ═════════════════════════════ */

/* ── page head ─────────────────────────────────────────────────────────── */
.ytd-ph{ text-align:center; }
.ytd-kick-dark .elementor-heading-title{ color:#E7D6BD; }
.ytd-ph-title .elementor-heading-title{
  color:#fff; font-family:Heebo,sans-serif; font-weight:700;
  font-size:clamp(28px, 4.2vw, 44px); line-height:1.22; margin:0; max-width:22ch;
}
.ytd-ph .ytd-rule{ width:auto; }

/* ── the group strip ───────────────────────────────────────────────────── */
.ytd-groupnav ul{ display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; justify-content:center; }
.ytd-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; border-radius:999px; text-decoration:none;
  background:#fff; border:1px solid var(--ytd-line);
  color:var(--ytd-navy); font-family:Assistant,sans-serif; font-size:15px; font-weight:600;
  transition:background .18s, border-color .18s, color .18s;
}
.ytd-chip:hover{ border-color:var(--ytd-bronze); color:var(--ytd-navy); }
.ytd-chip.is-on{ background:var(--ytd-navy); border-color:var(--ytd-navy); color:#fff; }
/* The count is secondary, but it is still text on a chip — 4.6 on white, so it dims
   without dropping under the threshold. */
.ytd-chip-n{ color:var(--ytd-ink2); font-weight:500; font-size:13px; }
.ytd-chip.is-on .ytd-chip-n{ color:#A9C0CB; }
.ytd-chip-sm{ padding:6px 14px; font-size:13.5px; }
.ytd-single-chip{ text-align:start; }

/* ── the card ──────────────────────────────────────────────────────────── */
.ytd-card{
  position:relative;
  background:#fff; border:1px solid var(--ytd-line); border-radius:8px;
  overflow:hidden; height:100%; text-decoration:none;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.ytd-card:hover{ border-color:var(--ytd-bronze); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,56,72,.10); }
/* Keyboard users get the same affordance as the mouse, and a visible ring —
   the card is a link with no underline, so focus has to be drawn. */
.ytd-card:focus-visible{ outline:3px solid var(--ytd-bronze-dk); outline-offset:2px; }

/* contain, not cover. The asset set is bimodal — landscape around 1.33 and portrait
   around 0.75 — so a fixed rectangle crops exactly the portrait frames, whose subject
   is the vertical one. The panel supplies the uniform rectangle instead. */
.ytd-card-img{ margin:0; }
.ytd-card-img img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:contain;
  background:var(--ytd-stone2); border-bottom:1px solid var(--ytd-line);
}
.ytd-card-body{ flex-grow:1; }

/* One link per card, stretched over it. The anchor lives on the title, so its
   accessible name is the product name and a screen reader's link list stays readable;
   the pseudo-element only widens the mouse target. */
.ytd-card-title a, .ytd-chap-title a{ color:inherit; text-decoration:none; }
.ytd-card-title a::after, .ytd-chap-title a::after{
  content:""; position:absolute; inset:0; z-index:2;
}
.ytd-card:has(a:focus-visible){ outline:3px solid var(--ytd-bronze-dk); outline-offset:2px; }
/* Anything that must stay clickable in its own right sits above the stretched layer. */
.ytd-card-chip{ position:relative; z-index:3; align-self:flex-start; }
.ytd-card-title .elementor-heading-title{
  color:var(--ytd-navy); font-family:Heebo,sans-serif; font-weight:600;
  font-size:19px; line-height:1.35; margin:0;
}
.ytd-card-ex{ color:var(--ytd-ink2); font-size:15px; line-height:1.6; }
.ytd-card-ex p{ margin:0; }
.ytd-card-more .elementor-heading-title{
  color:var(--ytd-bronze-text); font-family:Assistant,sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.02em; margin-block-start:2px;
}
.ytd-card-more .elementor-heading-title::after{ content:" ←"; }
.ytd-card-proj .ytd-card-img img{ aspect-ratio:3/2; }

/* ── the chapter card ──────────────────────────────────────────────────── */
.ytd-chap-n{ flex:0 0 auto; }
.ytd-chapnum{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--ytd-navy); color:#fff;
  font-family:Heebo,sans-serif; font-weight:700; font-size:17px;
  direction:ltr;
}
.ytd-chap-title .elementor-heading-title{
  color:var(--ytd-navy); font-family:Heebo,sans-serif; font-weight:600;
  font-size:18.5px; line-height:1.4; margin:0;
}

/* ── grids ─────────────────────────────────────────────────────────────── */
.ytd-arch > .e-con-inner > *{ width:100%; }
.ytd-grid .elementor-grid{ gap:20px; }
.elementor-pagination{ margin-block-start:34px; }
.elementor-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; margin:0 3px; border-radius:5px;
  background:#fff; border:1px solid var(--ytd-line);
  color:var(--ytd-navy); font-weight:600; text-decoration:none;
}
.elementor-pagination .page-numbers.current{ background:var(--ytd-navy); border-color:var(--ytd-navy); color:#fff; }

/* ── one item ──────────────────────────────────────────────────────────── */
.ytd-single > .e-con-inner > *{ width:100%; }
.ytd-hero-img{ margin:0; }
.ytd-hero-img img{
  display:block; width:100%; max-height:560px; object-fit:contain;
  background:var(--ytd-stone2); border:1px solid var(--ytd-line); border-radius:8px;
}

/* ── prose ─────────────────────────────────────────────────────────────── */
.ytd-prose-body{
  color:var(--ytd-ink2); font-family:Assistant,sans-serif;
  font-size:17.5px; line-height:1.85; max-width:70ch;
}
.ytd-prose-narrow{ max-width:64ch; margin-inline:auto; }
.ytd-prose-body .ytd-h,
.ytd-prose-body h2, .ytd-prose-body h3{
  color:var(--ytd-navy); font-family:Heebo,sans-serif; font-weight:600;
  font-size:24px; line-height:1.35; margin:34px 0 12px;
}
.ytd-prose-body > *:first-child{ margin-block-start:0; }
.ytd-prose-body p{ margin:0 0 15px; }
.ytd-prose-body strong{ color:var(--ytd-ink); font-weight:700; }
.ytd-prose-body ul.ytd-list{ list-style:none; margin:0 0 18px; padding:0; }
.ytd-prose-body ul.ytd-list li{
  position:relative; padding-inline-start:20px; margin:0 0 9px;
}
.ytd-prose-body ul.ytd-list li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.72em;
  width:7px; height:7px; border-radius:50%; background:var(--ytd-bronze);
}
.ytd-lead{ font-size:19px; }

/* ── the gallery strip ─────────────────────────────────────────────────── */
/* Uniform height, natural width, zero crop. See the note in ytd-front.php. */
.ytd-gal{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.ytd-gal-item{
  display:block; line-height:0; border-radius:6px; overflow:hidden;
  background:var(--ytd-stone2); aspect-ratio:1/1;
}
.ytd-gal-item:focus-visible{ outline:3px solid var(--ytd-bronze-dk); outline-offset:2px; }
.ytd-gal-img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ── the PDF button, and its absence ───────────────────────────────────── */
.ytd-pdf{ margin:0; }
.ytd-pdf-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ytd-bronze); color:var(--ytd-on-bronze);
  font-family:Assistant,sans-serif; font-weight:700; font-size:16px;
  padding:14px 28px; border-radius:4px; text-decoration:none;
}
.ytd-pdf-btn:hover{ background:var(--ytd-bronze-dk); color:#fff; }
.ytd-pdf-btn::before{ content:"⤓"; font-size:18px; }
/* A shortcode that returns nothing still leaves an Elementor wrapper with a gap
   around it, and the client asked for nothing to be shown at all. */
.ytd-pdf-w:not(:has(.ytd-pdf)), .ytd-gal-w:not(:has(.ytd-gal)){ display:none; }

/* ── chapter to chapter ────────────────────────────────────────────────── */
.ytd-chapnav{
  display:flex; gap:14px; flex-wrap:wrap;
  border-block-start:1px solid var(--ytd-line); padding-block-start:26px;
}
.ytd-chapnav-a{
  flex:1 1 240px; display:flex; flex-direction:column; gap:4px;
  padding:16px 18px; border:1px solid var(--ytd-line); border-radius:8px;
  background:var(--ytd-stone); text-decoration:none;
}
.ytd-chapnav-a:hover{ border-color:var(--ytd-bronze); }
.ytd-chapnav-a:focus-visible{ outline:3px solid var(--ytd-bronze-dk); outline-offset:2px; }
.ytd-chapnav-a span{ color:var(--ytd-bronze-text); font-size:13.5px; font-weight:700; }
.ytd-chapnav-a strong{ color:var(--ytd-navy); font-family:Heebo,sans-serif; font-size:16.5px; font-weight:600; line-height:1.35; }
.ytd-chapnav-next{ text-align:end; }
.ytd-chapnav-a.is-off{ visibility:hidden; }

/* ── the closing band ──────────────────────────────────────────────────── */
.ytd-ctaband{ text-align:center; }
.ytd-ctaband-h .elementor-heading-title{
  color:#fff; font-family:Heebo,sans-serif; font-weight:600;
  font-size:clamp(22px, 3vw, 30px); margin:0;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .ytd-gal-img{ height:100%; }
}
@media(max-width:767px){
  .ytd-ph{ padding-block:58px 42px !important; }
  .ytd-gal-img{ height:100%; }
  .ytd-hero-img img{ max-height:340px; }
  .ytd-groupnav ul{ justify-content:flex-start; }
  .ytd-chapnav-next{ text-align:start; }
  .ytd-chapnav-a.is-off{ display:none; }
  .ytd-prose-body{ font-size:16.5px; }
}

/* ═══ specificity guard — read this before "fixing" it ═════════════════════
   🔴 A LOOP GRID PRINTS THE KIT GLOBAL WIDGET RULES INLINE, INSIDE THE BODY.
   Rendering a loop item emits <style id="loop-NNN"> containing, among other things,
      .elementor-widget-heading .elementor-heading-title{ color:var(--e-global-color-primary) }
   That is the same specificity as .ytd-ph-title .elementor-heading-title (0,2,0) and it
   comes LATER in the document than post-5.css — so on every archive page it wins, and
   every heading turns the kit primary navy. Measured, not deduced: the H1 in the navy
   page head computed to rgb(15,56,72) on navy while the rule saying #fff was present,
   enabled, matching and unmediated; disabling that one inline block turned it white.

   So the colours below are restated at (0,2,1) with a leading body .elementor-kit-5. Do not
   collapse them back — the duplication IS the fix, and it only bites where a loop runs. */
/* Order matters inside the guard too. Mirroring the generic .ytd-kick rule after the
   dark variant put bronze-text back on navy at 2.24:1 — the same failure the guard
   exists to prevent, introduced by the guard. The compound .elementor-kit-5 settles it by
   specificity instead of by line order. */
body .ytd-kick .elementor-heading-title{ color:var(--ytd-bronze-text); }
/* #E7D6BD, not bronze-lt, for a kicker on a dark ground. It measures 8.78 on solid
   navy against 6.12, and on the veiled hero the difference is the difference between
   passing and failing: at the worst pixel bronze-lt needed a veil of 0.82 to clear 4.5,
   #E7D6BD clears it at 0.72. Brighter type buys more than a heavier veil, and it does
   not cost the client's own footage.
*/
body .ytd-kick.ytd-kick-dark .elementor-heading-title{ color:#E7D6BD; }
body .ytd-kick.ytd-on-dark .elementor-heading-title{ color:#E7D6BD; }
body .ytd-ph-title .elementor-heading-title{ color:#fff; }
body .ytd-ctaband-h .elementor-heading-title{ color:#fff; }
body .ytd-on-dark .elementor-heading-title{ color:#E7D6BD; }
body .ytd-ph-title.ytd-on-dark .elementor-heading-title{ color:#fff; }
body .ytd-card-title .elementor-heading-title,
body .ytd-chap-title .elementor-heading-title{ color:var(--ytd-navy); }
body .ytd-card-more .elementor-heading-title{ color:var(--ytd-bronze-text); }
body .ytd-card-ex, body .ytd-card-ex p{ color:var(--ytd-ink2); }
body .ytd-prose-body{ color:var(--ytd-ink2); }
body .ytd-prose-body .ytd-h,
body .ytd-prose-body h2, body .ytd-prose-body h3{ color:var(--ytd-navy); }
body .ytd-prose-body strong{ color:var(--ytd-ink); }

/* Same guard, different property. Elementor ships `.elementor img{max-width:100%;
   height:auto}` at (0,1,1), which beats a bare `.ytd-gal-img` (0,1,0) — measured, the
   strip images computed to height 2129px and max-width 100%, so five frames became a
   twelve-thousand-pixel page. Height comes first here, width follows from the image. */
body .ytd-gal .ytd-gal-item img{
  height:100%; width:100%; max-width:100%; object-fit:cover;
}
/* Square panel, and the number decides it. The set is bimodal — landscape near 1.33,
   portrait near 0.75 — and the rule is no crop, so the panel has to hold both. In a 4:3
   panel a portrait frame fills 56% of the width: 44% empty. In a square it fills 75%,
   and a landscape frame fills 75% of the height. Square is the shape whose WORST case is
   smallest for this set, which is the only thing worth optimising when nothing is cropped. */
body .ytd-card .ytd-card-img img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:center; }
body .ytd-single .ytd-hero-img img{ width:100%; height:auto; max-height:480px; object-fit:contain; }

/* Measure. Elementor puts max-width:100% on the widget, which beats a bare
   .ytd-prose-body — measured at 1200px, roughly 110 characters a line, about half as
   long again as anything anyone reads comfortably. Constrained and centred so it sits
   under the centred page head rather than hugging one edge. */
body .ytd-single .ytd-prose-body,
body .ytd-prose .ytd-prose-body{ max-width:74ch; margin-inline:auto; }
body .ytd-single .ytd-prose-narrow{ max-width:64ch; }
@media(max-width:1024px){ body .ytd-gal .ytd-gal-item img{ height:100%; } }
@media(max-width:767px){ body .ytd-gal .ytd-gal-item img{ height:100%; } }

/* Same guard, now for every heading colour the base stylesheet sets. The footer column
   titles are the ones this caught in the wild: #fff by rule, navy-on-navy at 1.4:1 in
   fact, because the archive pages carry a loop and the loop reprints the kit default.
   A new heading colour belongs in BOTH places or it is one loop away from vanishing. */
body .ytd-title .elementor-heading-title{ color:var(--ytd-navy); }
body .ytd-title.ytd-on-dark .elementor-heading-title{ color:#fff; }
body .ytd-hero-h1 .elementor-heading-title{ color:#fff; }
body .ytd-dial-num .elementor-heading-title{ color:var(--ytd-on-bronze); }
body .ytd-step-title .elementor-heading-title{ color:var(--ytd-navy); }
body .ytd-qm .elementor-heading-title{ color:var(--ytd-bronze-dk); }
body .ytd-proj-title .elementor-heading-title{ color:var(--ytd-navy); }
body .ytd-proj-who .elementor-heading-title{ color:var(--ytd-navy); }
body .ytd-fcol-title .elementor-heading-title{ color:#fff; }
body .ytd-incl-item .elementor-icon-box-title{ color:#fff; }
body .ytd-incl-item .elementor-icon-box-description{ color:#A9C0CB; }
body .ytd-cat .elementor-icon-box-title{ color:var(--ytd-navy); }
body .ytd-cat .elementor-icon-box-description{ color:var(--ytd-ink2); }
body .ytd-stat .elementor-icon-box-title{ color:var(--ytd-navy); }
body .ytd-stat .elementor-icon-box-description{ color:var(--ytd-ink2); }

/* The page head sits generously on desktop and the same numbers are too tall on a
   375px screen, where the band measured 305px of navy around 90px of type. */
@media(max-width:767px){
  body .ytd-ph{ padding-block-start:44px; padding-block-end:34px; }
  body .ytd-arch{ padding-block-start:30px; }
}
/* ═══ the floating column ══════════════════════════════════════════════════
   One axis, one edge, one size, one gap — the workspace rule, because every plugin
   arrives with a corner of its own. Here that is CookieYes, which ships at 45px in
   the bottom-left at 15/15; it is normalised to our size rather than letting two
   different circles stack.

   Colour: #0E7A6B, a WhatsApp green dark enough that white clears 4.5 on it at ANY
   size — measured 5.23.
   🔴 It got there the hard way. #25D366, the familiar green, carries white at 1.98.
   #128C7E gives 4.14, and I shipped that on the reasoning that the label is 19px bold,
   which counts as large text and only needs 3.0. Then the mobile rule dropped it to
   18px — under the 18.66px bold threshold — and the same button failed on six pages.
   A colour that passes only because of an exemption fails the moment anything resizes.
   The fix is the colour, not the font size. */
:root{ --ytd-fab:36px; --ytd-fab-gap:12px; --ytd-fab-edge:15px; --ytd-wa:#0E7A6B; }

.ytd-fab{
  position:fixed; z-index:999998;
  inset-inline-start:var(--ytd-fab-edge);
  inset-block-end:calc(var(--ytd-fab-edge) + var(--ytd-fab) + var(--ytd-fab-gap));
  width:var(--ytd-fab); height:var(--ytd-fab); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ytd-wa); color:#fff; text-decoration:none;
  box-shadow:0 4px 14px rgba(6,28,39,.28);
  transition:transform .18s, box-shadow .18s;
}
.ytd-fab svg{ width:calc(var(--ytd-fab) * 0.55); height:calc(var(--ytd-fab) * 0.55); display:block; }
.ytd-fab:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(6,28,39,.34); }
.ytd-fab:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* CookieYes onto the same axis and the same size. Its wrapper is a plain element on
   this site — measured, no shadow root — so page CSS reaches it. */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left{
  inset-inline-start:var(--ytd-fab-edge) !important;
  inset-block-end:var(--ytd-fab-edge) !important;
  width:var(--ytd-fab) !important; height:var(--ytd-fab) !important;
}
.cky-btn-revisit-wrapper .cky-btn-revisit{
  width:var(--ytd-fab) !important; height:var(--ytd-fab) !important;
}
.cky-btn-revisit-wrapper .cky-btn-revisit img{
  width:calc(var(--ytd-fab) * 0.5) !important; height:calc(var(--ytd-fab) * 0.5) !important;
}

/* ── the footer WhatsApp button ────────────────────────────────────────── */
.ytd-fwa{ margin-block-start:4px; }
.ytd-fwa .elementor-button{
  background:var(--ytd-wa); color:#fff;
  font-family:Heebo,sans-serif; font-weight:700; font-size:19px;
  border-radius:6px; padding:15px 30px; letter-spacing:.01em;
}
.ytd-fwa .elementor-button:hover{ background:#0B6357; color:#fff; }
.ytd-fmeta{ color:#C6D3DA; font-size:14.5px; font-weight:600; }
.ytd-fmeta p{ margin:0; }

@media(max-width:767px){
  :root{ --ytd-fab:32px; --ytd-fab-gap:10px; --ytd-fab-edge:12px; }
  .ytd-fwa .elementor-button{ font-size:18px; padding:14px 26px; }
}
/* -- 44x44 tap targets (ytd-tap-44) -------------------------------------
   The circle stays 32/36px visually; a transparent centred ::after carries the
   44x44 hit area. Radius stays near 0 on purpose: a 12px radius on a 44x44 box
   clips all four corners and a corner tap test then fails, correctly. */
body .ytd-fab, body .ytd-nav .elementor-menu-toggle, body .ytd-fsocial .elementor-social-icon{ position:relative; }
body .ytd-fab::after, body .ytd-nav .elementor-menu-toggle::after, body .ytd-fsocial .elementor-social-icon::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:2px; background:transparent; pointer-events:auto;
}

/* -- ytd-tap-bar: the top-bar phone/address links are 31px tall text links, not
   icons, so they get the 44px hit area with padding rather than an ::after box. */
body .ytd-util-list .elementor-icon-list-item a{ min-height:44px; display:flex; align-items:center; }

/* -- ytd-tap-flist: footer + top-bar link lists were 31px tall and 13.5px type.
   44px hit height via padding (they are wide text links, not icons), and 14px is
   the floor Adva rejects below (#15). */
body .ytd-flist .elementor-icon-list-item a{ min-height:44px; display:flex; align-items:center; }
body .ytd-flist .elementor-icon-list-text, body .ytd-util-list .elementor-icon-list-text{ font-size:14px; }
body .ytd-fcopy, body .ytd-fcredit{ font-size:14px; }

/* -- ytd-fsocial-fix: the footer social glyphs are outline SVGs (fill:none), so a
   text-contrast scan never sees them and they sat near-invisible on the navy band. */
body .ytd-fsocial .elementor-social-icon svg{ fill:#C6D3DA; stroke:#C6D3DA; color:#C6D3DA; }
body .ytd-fsocial .elementor-social-icon:hover svg{ fill:#DCAE79; stroke:#DCAE79; color:#DCAE79; }


/* ── ROUND 15.9 · Adva ── */
/* pin 10: the contact form sits on the dark band with no frame of its own */
body .ytd-talk .ytd-talk-form { border:0 !important; background:transparent !important; }
/* 20.9 removed: this painted the in-field text white on BOTH pages, and .ytd-talk is on
   the contact page too - so there it was white on a white field, present and invisible.
   The placeholders themselves are gone from both forms; the label above each field says it. */

/* pin 8: category tiles = photo + name underneath */
body .ytd-cat.ytd-cat-photo { background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
body .ytd-cat-photo .elementor-image-box-wrapper { text-align:start; }
body .ytd-cat-photo .elementor-image-box-img { width:100% !important; margin:0 0 14px !important; overflow:hidden; }
body .ytd-cat-photo .elementor-image-box-img img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; transition:transform .4s ease; }
body .ytd-cat-photo:hover .elementor-image-box-img img { transform:scale(1.03); }
body .ytd-cat-photo .elementor-image-box-title { margin:0; font-size:20px; color:var(--ytd-navy); }
body .ytd-cat-photo .elementor-image-box-title a { color:inherit; }
@media (max-width:767px){ body .ytd-cats .ytd-cat.ytd-cat-photo { flex-basis:calc(50% - 9px) !important; min-width:0 !important; } body .ytd-cat-photo .elementor-image-box-wrapper { text-align:center; } body .ytd-cat-photo .elementor-image-box-title { font-size:17px; } }

/* pins 11+14+16: one big WhatsApp alone in the corner, no cookie revisit button */
/* 11: the 3.9 tap-target rule set position:relative on .ytd-fab and dropped it into the page flow (the white strip under every footer) */
body .ytd-fab.ytd-fab-wa { position:fixed !important; z-index:999998; inset-inline-start:20px; inset-block-end:20px; width:60px; height:60px; background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.28); }
body .ytd-fab.ytd-fab-wa svg { width:34px; height:34px; }
body .ytd-fab.ytd-fab-wa:hover { background:#1EBE5A; }
body .ytd-fab.ytd-fab-wa::after { width:60px; height:60px; }
@media (max-width:767px){ body .ytd-fab.ytd-fab-wa { inset-inline-start:14px; inset-block-end:14px; width:54px; height:54px; } body .ytd-fab.ytd-fab-wa svg { width:30px; height:30px; } body .ytd-fab.ytd-fab-wa::after { width:54px; height:54px; } }
/* 16: Noadim rule 19.9 - only WhatsApp and accessibility float; the banner still shows once on first visit */
body .cky-btn-revisit-wrapper { display:none !important; }

/* pins 13+17: footer in four aligned columns, legal row, consent field */
body .ytd-footer .ytd-fcol-title .elementor-heading-title { margin:0 0 14px; }
body .ytd-footer .ytd-flist .elementor-icon-list-items { margin:0; padding:0; }
body .ytd-footer .ytd-flist .elementor-icon-list-item { padding-inline:0 !important; margin:0 !important; }
@media (min-width:768px){ body .ytd-footer .ytd-flist .elementor-icon-list-item a { min-height:32px; } }
body .ytd-footer .ytd-fcontact .elementor-icon-list-icon { display:inline-flex !important; margin-inline-end:8px; }
body .ytd-footer .ytd-fcontact .elementor-icon-list-icon img, body .ytd-footer .ytd-fcontact .elementor-icon-list-icon svg { width:15px; height:15px; }
body .ytd-flogo img { height:74px; width:auto; }
body .ytd-fbrand .ytd-ftext { max-width:34ch; }
body .ytd-fsocial .elementor-social-icons-wrapper { justify-content:flex-start; gap:14px; }
body .ytd-fbottom .ytd-flegal p { margin:0; } body .ytd-fbottom .ytd-flegal a { color:#C6D3DA; } body .ytd-fbottom .ytd-flegal a:hover { color:#DCAE79; }
@media (max-width:767px){ body .ytd-footer > .e-con-inner, body .ytd-footer .ytd-fbrand, body .ytd-footer .ytd-fcol { align-items:center; text-align:center; } body .ytd-footer .ytd-flist .elementor-icon-list-item a { justify-content:center; } body .ytd-fsocial .elementor-social-icons-wrapper { justify-content:center; } body .ytd-flogo img { height:62px; } body .ytd-fbottom > .e-con-inner { flex-direction:column; align-items:center; text-align:center; } }
body.page-id-276 .site-main, body.page-id-277 .site-main, body.page-id-278 .site-main { padding-block:56px 80px; }
body .ytd-form .elementor-field-type-acceptance { display:flex; align-items:flex-start; gap:8px; }
body .ytd-form .elementor-field-type-acceptance label, body .ytd-talk .ytd-form .elementor-field-type-acceptance .elementor-field-subgroup { color:inherit; }
body .ytd-form .elementor-field-type-acceptance a { color:#DCAE79; text-decoration:underline; }
body .ytd-form .elementor-field-type-acceptance input[type=checkbox] { width:18px; height:18px; margin-top:3px; accent-color:#C9955F; }

/* pin 13b: footer link text starts exactly under its heading */
body .ytd-footer .ytd-flist .elementor-icon-list-text { padding-inline-start:0 !important; padding-inline-end:0 !important; margin:0 !important; }
body .ytd-footer .ytd-flist .elementor-icon-list-item a { justify-content:flex-start !important; gap:0 !important; padding:0 !important; }
body .ytd-footer .ytd-flist:not(.ytd-fcontact) .elementor-icon-list-icon { display:none !important; width:0 !important; margin:0 !important; }
body .ytd-footer .ytd-fcontact .elementor-icon-list-item a { gap:8px !important; }

/* pin 13c: contact rows one size, icons visible, social on the text line, legal row = bottom-bar size */
body .ytd-footer .ytd-flist .elementor-icon-list-text { font-size:14px !important; color:#C6D3DA; }
body .ytd-footer .ytd-fcontact .elementor-icon-list-icon img { filter:brightness(0) invert(.82); }
body .ytd-footer .ytd-fsocial, body .ytd-footer .ytd-fsocial .elementor-widget-container { text-align:start !important; width:100%; }
body .ytd-footer .ytd-fsocial .elementor-social-icons-wrapper { display:flex !important; justify-content:flex-start !important; gap:14px; }
@media (max-width:767px){ body .ytd-footer .ytd-fsocial .elementor-social-icons-wrapper { justify-content:center !important; } }
body .ytd-fbottom .ytd-flegal, body .ytd-fbottom .ytd-flegal p { font-size:13.5px; }

/* pin 13d: contact pin icon */
body .ytd-footer .ytd-fcontact .elementor-icon-list-icon svg, body .ytd-footer .ytd-fcontact .elementor-icon-list-icon svg * { stroke:#C6D3DA !important; color:#C6D3DA !important; }
body .ytd-footer .ytd-fcontact .elementor-icon-list-icon i { color:#C6D3DA !important; }

/* 20.9: the WHOLE card is the click target, not just its title */
/* Elementor gives every widget position:relative, so the stretched ::after was covering the
   title widget (202x28) instead of the card (380x603). Make the wrappers static and the card
   itself the containing block. Measured before: catalog 10%, projects 0%, chapters 9-19%. */
body .ytd-card, body .ytd-proj-card, body .ytd-cat-photo { position:relative; }
body .ytd-card .ytd-card-body, body .ytd-card .ytd-chap-body, body .ytd-card .ytd-card-title, body .ytd-card .ytd-chap-title,
body .ytd-proj-card .ytd-proj-title, body .ytd-cat-photo .elementor-widget-container { position:static !important; }
body .ytd-card .ytd-card-title a::after, body .ytd-card .ytd-chap-title a::after,
body .ytd-proj-card .ytd-proj-title a::after, body .ytd-cat-photo .elementor-image-box-title a::after { content:""; position:absolute; inset:0; z-index:2; }
body .ytd-proj-card .ytd-proj-title a, body .ytd-cat-photo .elementor-image-box-title a { color:inherit; text-decoration:none; }
body .ytd-proj-card:hover, body .ytd-cat-photo:hover { cursor:pointer; }
/* anything that must keep its own click stays above the layer */
body .ytd-card-chip, body .ytd-card .elementor-button, body .ytd-proj-card .elementor-button { position:relative; z-index:3; }

/* markup 30.9 pin 24: lighter overlay, legibility carried by shadow */
body .ytd-hero-sub, body .ytd-hero-sub p{ text-shadow:0 1px 14px rgba(0,0,0,.55); }
body .ytd-hero-h1 .elementor-heading-title{ text-shadow:0 2px 28px rgba(0,0,0,.5); }
body .ytd-hero::before{ background-image:radial-gradient(ellipse 46% 30% at 50% 57%, rgba(0,0,0,.40) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,0) 100%); }
@media (max-width:767px){ body .ytd-hero::before{ background-image:radial-gradient(ellipse 75% 32% at 50% 57%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 60%, rgba(0,0,0,0) 100%); } }

/* ── MarkUp 30.9 pin 27 (applied 4.10) ─────────────────────────────────── */
/* Gallery: a real grid, square cells, straight edges both sides (Adva: no "tetris"). */
/* Full rows edge to edge, the last row centred (symmetric). 1-3 images span the width. */
body .ytd-gal .ytd-gal-item{ flex:0 0 calc((100% - 18px) / 4); }
body .ytd-gal:has(> .ytd-gal-item:only-child) .ytd-gal-item{ flex-basis:100%; aspect-ratio:16/9; }
body .ytd-gal:has(> .ytd-gal-item:nth-child(2):last-child) .ytd-gal-item{ flex-basis:calc((100% - 6px) / 2); aspect-ratio:4/3; }
body .ytd-gal:has(> .ytd-gal-item:nth-child(3):last-child) .ytd-gal-item{ flex-basis:calc((100% - 12px) / 3); }
@media(max-width:1024px){ body .ytd-gal:has(> .ytd-gal-item:nth-child(4)) .ytd-gal-item{ flex-basis:calc((100% - 12px) / 3); } }
@media(max-width:767px){
  body .ytd-gal:has(> .ytd-gal-item:nth-child(2)) .ytd-gal-item{ flex-basis:calc((100% - 6px) / 2); aspect-ratio:1/1; }
}
body .ytd-gal .ytd-gal-item{ border-radius:4px; }
/* Page title lighter (Adva: "this font should be thinner"). */
body .ytd-ph-title .elementor-heading-title{ font-weight:300; }
body .ytd-ph-img .ytd-ph-title .elementor-heading-title{ text-shadow:0 2px 22px rgba(0,0,0,.45); }
/* Menu icon: thin, longer lines, matching the logo stroke (~1.5px). */
body .ytd-nav .elementor-menu-toggle svg{ display:none; }
body .ytd-nav .elementor-menu-toggle{ width:36px; height:36px; padding:0; }
body .ytd-nav .elementor-menu-toggle::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:15px;
  background:
    linear-gradient(currentColor,currentColor) top/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) bottom/100% 1.5px no-repeat;
}
body .ytd-nav .elementor-menu-toggle.elementor-active::before{
  width:22px; height:22px;
  background:
    linear-gradient(45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(-45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px));
}
/* -- MarkUp 30.9 pin 28 (applied 4.10) ------------------------------------
   Archive/tag heads: a thin separator between the header bar and the title band
   (same navy, they merged), and the same space above and below the title.
   Not on single items: there the band carries the photo (pin 27). */
body .ytd-ph:not(.ytd-ph-img){ position:relative; padding-block-start:64px !important; padding-block-end:64px !important; }
body .ytd-ph:not(.ytd-ph-img)::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1200px, calc(100% - 52px)); height:1.5px; background:rgba(255,255,255,.45);
}
@media(max-width:767px){
  body .ytd-ph:not(.ytd-ph-img){ padding-block-start:40px !important; padding-block-end:40px !important; }
}
body .ytd-ph:not(.ytd-ph-img) > .e-con-inner{ padding-block:0 !important; }
/* Card group label: off its own row and onto the photo, white outline + white text. */
body .ytd-card{ position:relative; }
body .ytd-card .ytd-card-chip{ position:absolute !important; top:14px; right:14px; z-index:3; margin:0; width:auto; }
body .ytd-card .ytd-card-chip .ytd-chip{
  background:rgba(0,0,0,.30); border:1px solid #fff; color:#fff;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
body .ytd-card .ytd-card-chip .ytd-chip:hover{ background:rgba(0,0,0,.45); border-color:#fff; color:#fff; }
body .ytd-card .ytd-card-chip .ytd-chip-n{ color:#fff; }/* End custom CSS */