/* intelliDesign: WordPress glue only. The prototype CSS (studio.css) stays untouched. */

/* Admin bar: fixed header + overlay start below it. */
.admin-bar .id-header { top: 32px; }
.admin-bar .id-overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .id-header, .admin-bar .id-overlay { top: 46px; } }
@media (max-width: 600px) { .admin-bar .id-header, .admin-bar .id-overlay { top: 0; } }
/* Sticky/fixed strips that sit under the header move down by the admin bar too. */
.admin-bar { --id-wpbar: 32px; }
@media (max-width: 782px) { .admin-bar { --id-wpbar: 46px; } }
@media (max-width: 600px) { .admin-bar { --id-wpbar: 0px; } }
.admin-bar .id-sc-jumpbar, .admin-bar .id-progress { top: calc(var(--header-h) + var(--id-wpbar)); }
.admin-bar .id-sc-cap__media { top: calc(var(--header-h) + var(--sc-strip-h) + 24px + var(--id-wpbar)); }
.admin-bar .id-sc-split > .id-sc-media,
.admin-bar .id-contact__intro,
.admin-bar .id-legal__toc { top: calc(var(--header-h) + 32px + var(--id-wpbar)); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; }

/* Default page head/body (parts/head|content-intellidesign.php); page CSS files style their own heads. */
.id-wp-head { padding-top: calc(var(--header-h, 64px) + clamp(48px, 9vh, 112px)); }
.id-wp-page { padding-block: clamp(32px, 6vh, 64px) clamp(64px, 10vh, 112px); }
.id-wp-page > .id-prose { max-width: 68ch; }
.id-reading { padding-bottom: clamp(64px, 10vh, 112px); }
.id-wp-thumb { margin: 0 0 2em; }

/* Footer offices (from Site Settings; not in the prototype). */
.id-footer__offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; color: var(--text-muted, #8E8E93); }
.id-footer__offices li { display: grid; gap: 2px; }
.id-footer__offices strong { color: var(--text-white, #fff); font-weight: 500; }

/* Block content inside prototype prose. */
.id-prose img, .id-prose video, .id-prose iframe { max-width: 100%; height: auto; }
.id-prose figcaption, .id-prose .wp-element-caption { margin-top: .6em; font-size: 14px; color: var(--text-muted, #8E8E93); }
.id-prose .alignwide { width: min(var(--maxw, 1440px) - var(--gutter, 64px) * 2, 100vw - var(--gutter, 64px) * 2); max-width: none; margin-inline: calc(50% - min(var(--maxw, 1440px) - var(--gutter, 64px) * 2, 100vw - var(--gutter, 64px) * 2) / 2); }
.id-prose .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.id-prose .aligncenter { margin-inline: auto; text-align: center; }
.id-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.id-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.id-prose .wp-block-table td, .id-prose .wp-block-table th { padding: 10px 12px; border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); text-align: left; }
.id-prose .wp-block-separator { border: 0; border-top: 1px solid var(--line, rgba(255,255,255,.12)); margin-block: 2.4em; }
.page-links, .nav-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.4em; }
.nav-links .page-numbers { padding: 6px 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 999px; color: var(--text-white, #fff); }
.nav-links .current { background: var(--text-white, #fff); color: #000; }

/* Image slots filled from the block editor (inc/extra/block-attrs.php). */
.id-ph--filled { position: relative; overflow: hidden; }
.id-ph--filled .id-ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Insight cards without a featured image show the placeholder filling the media box. */
.id-ins-card__media .id-ph { position: absolute; inset: 0; }

/* Capabilities: the side of the image follows the order of the blocks in each capability (drag the image group
   before or after the text), so the design's alternating rule is not forced here. Mobile keeps the image on top. */
.id-sc-cap:nth-child(even) .id-sc-cap__copy { order: 0; }

/* Block styles (inc/extra/id-block-styles.php): Group › Styles › intelliDesign section, dark panel, tight. */
.is-style-id-section,
.is-style-id-section-dark,
.is-style-id-section-tight { padding-block: clamp(72px, 13vh, 160px); }
.is-style-id-section-tight { padding-block: clamp(40px, 7vh, 88px); }
.is-style-id-section-dark { background: var(--panel-dark); }
.is-style-id-section > *,
.is-style-id-section-dark > *,
.is-style-id-section-tight > * { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.is-style-id-section > * + *,
.is-style-id-section-dark > * + *,
.is-style-id-section-tight > * + * { margin-top: 20px; }

/* Core blocks in intelliDesign colours and type (type rules only inside the section styles, so the design is untouched). */
[class*="is-style-id-section"] .wp-block-heading { color: var(--text-white); }
[class*="is-style-id-section"] h2.wp-block-heading { font-size: clamp(34px, 5vw, 72px); font-weight: 700; letter-spacing: -.03em; }
[class*="is-style-id-section"] h3.wp-block-heading { font-size: clamp(22px, 2.4vw, 32px); }
[class*="is-style-id-section"] p:not([class]) { color: var(--text-muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; max-width: 68ch; }
[class*="is-style-id-section"] .wp-block-list { padding-left: 1.2em; color: var(--text-muted); }
[class*="is-style-id-section"] .wp-block-list li + li { margin-top: .4em; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 26px;
	border: 0; border-radius: var(--radius-pill); background: var(--glow); background-size: 200% 100%; color: #000;
	font-size: 15px; font-weight: 600; text-decoration: none; transition: background-position .9s var(--ease), transform .45s var(--ease);
}
.wp-block-button__link:hover { background-position: 100% 50%; color: #000; }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-id-line .wp-block-button__link { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .02); color: var(--text-white); }
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-id-line .wp-block-button__link:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.wp-block-column { flex: 1 1 280px; min-width: 0; }
.wp-block-image:not(.id-ph) img { border-radius: var(--radius); }
.wp-block-image figcaption { margin-top: 10px; color: var(--text-muted); font-size: 13px; }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); }
[class*="is-style-id-section"] .wp-block-quote { border-left: 2px solid var(--emerald); padding-left: 24px; color: var(--text-white); font-size: clamp(20px, 2vw, 28px); }

/* Contact: Interest multi-select dropdown (inc/extra/id-contact.php + studio.js). Without JS the list shows open. */
.id-multi { position: relative; }
.id-multi__btn { position: relative; padding-right: 44px; text-align: left; cursor: pointer; }
.id-multi__btn::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--text-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease); }
.id-multi.is-open .id-multi__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.id-multi__value { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.id-multi__value.is-empty { color: #5A5A5F; }
.id-multi__list { display: grid; gap: 2px; margin-top: 8px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: #121212; max-height: 320px; overflow-y: auto; }
.id-js .id-multi__btn ~ .id-multi__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; box-shadow: 0 24px 48px rgba(0, 0, 0, .6); display: none; }
.id-js .id-multi.is-open .id-multi__list { display: grid; }
html:not(.id-js) .id-multi__btn { display: none; }
.id-multi__opt { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .86); cursor: pointer; }
.id-multi__opt:hover, .id-multi__opt:focus-within { background: rgba(255, 255, 255, .06); }
.id-multi__opt .id-consent__box { margin: 0; flex: none; }
.id-select select:invalid, .id-select option[value=""] { color: #5A5A5F; }
.id-select option:not([value=""]) { color: var(--text-white); }

/* Story facts row with three items (no Timeline): three equal columns on wide screens. */
@media (min-width: 769px) {
  .id-facts:has(> .id-facts__item:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Brands moving at our pace (synced pattern "intelliDesign · Brands"). Static wrapped row; studio.js adds .is-marquee. */
.id-brands { padding-block: clamp(72px, 11vh, 140px); background: var(--bg-black); border-top: 1px solid var(--line); }
.id-brands__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 8px clamp(32px, 5vw, 96px); margin-bottom: clamp(40px, 6vh, 72px); }
.id-brands__intro .id-eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.id-brands__title { margin: 0; font-size: clamp(40px, 6vw, 92px); font-weight: 900; letter-spacing: -.055em; line-height: .92; }
.id-brands__lede { max-width: 30em; margin: 0; padding-bottom: .35em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--text-muted); }
.id-brands__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 4vw, 64px); }
.id-brands__logos > * { margin: 0 !important; }
.id-brands__logo img { display: block; width: auto; height: clamp(36px, 4vw, 52px); max-width: 200px; object-fit: contain; border-radius: 0 !important; opacity: .7; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.id-brands__logo img:hover { opacity: 1; filter: none; }
.id-brands__logos.is-marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.id-brands__track { display: flex; flex: none; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); animation: id-brands-scroll var(--id-brands-speed, 40s) linear infinite; }
.id-brands__logos.is-marquee:hover .id-brands__track { animation-play-state: paused; }
@keyframes id-brands-scroll { to { transform: translateX(-100%); } }
@media (max-width: 768px) { .id-brands__intro { grid-template-columns: 1fr; } }

/* Echo card pattern: role and sector are editable paragraphs inside the caption. */
.id-echo__by > p { margin: 0; }

/* Full-height sections: Group -> Dimensions -> Minimum height 100vh (or 100svh) also centres the content vertically. */
.wp-block-group[style*="min-height:100vh"],
.wp-block-group[style*="min-height:100svh"],
.wp-block-group[style*="min-height:100dvh"] { display: flex; flex-direction: column; justify-content: center; }
.wp-block-group[style*="min-height:100vh"] > *,
.wp-block-group[style*="min-height:100svh"] > *,
.wp-block-group[style*="min-height:100dvh"] > * { width: 100%; }