/* Shared editorial rules for the approved ACITO direction. */
.site {
  --gutter: 42px;
  --section-space: 48px;
  --accent: #ffde00;
  --accent-text: #806e00;
  --title-size: clamp(36px, 4vw, 60px);
  --heading-size: clamp(25px, 2.5vw, 32px);
}
.site.dark { --accent-text: #ffde00; }
#main { max-width: 1360px; margin-inline: auto; min-width: 0; }
#main > .page-content { padding: 48px var(--gutter) 64px; }
.page-content > h1, .balanced-heading h1 {
  font-size: var(--title-size); font-weight: 400; line-height: 1.18;
  letter-spacing: 0; overflow-wrap: break-word;
}
.page-content > h1 { margin: 20px 0 28px; }
.page-content > .small-label, .project-detail > .small-label,
.acito-accent > .small-label, .vortex-page > .small-label {
  color: var(--muted); font-size: 11px; line-height: 1.7;
  letter-spacing: .1em; background: none; padding: 0;
}
.page-content > .small-label::before { content: none; }
.page-lead, .vortex-page > .page-lead, .portrait-intro > .page-lead {
  font-size: clamp(19px, 1.8vw, 22px); line-height: 1.6; max-width: 740px;
}
.page-content p { line-height: 1.7; }
.page-content :is(.editorial-block, .project-story) {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 36px; margin-top: var(--section-space); padding-top: 32px;
  border-top: 1px solid var(--line);
}
.page-content :is(.editorial-block, .project-story, .process) > h2,
.expertise-list article > h2, .vortex-functions > h2,
.home-needs > h2, .home-person h2 {
  font-size: var(--heading-size); line-height: 1.3; font-weight: 400;
}
.page-content :is(.editorial-block, .project-story) > h2,
.expertise-list article > h2 { color: var(--accent-text); }
.page-content h3 { font-size: 21px; line-height: 1.4; font-weight: 400; }
.editorial-block p, .project-story p, .expertise-list article p { margin-bottom: 20px; }
.page-content .process {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 36px; padding: 28px; margin-top: var(--section-space);
  background: var(--surface); color: var(--fg); border-radius: 4px;
}
.page-content .process p { color: var(--muted); }
.process .underlink { margin-top: 16px; }
.underlink { font-size: 14px; line-height: 1.6; padding: 7px 0; border-color: var(--line); }
.underlink:hover, .dark .underlink:hover { color: var(--fg); border-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.portfolio-filters, .expertise-index {
  margin: 28px 0 20px; padding: 12px 0; gap: 8px; top: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.portfolio-filters button, .expertise-index a {
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
  font-size: 12px; line-height: 1.5; min-height: 42px; color: var(--fg);
}
.portfolio-filters button[aria-pressed=true], .expertise-index a:hover {
  background: var(--accent); color: #000; border-color: var(--accent);
}
.expertise-list { margin-top: 32px; }
.expertise-list article { padding: 32px 0; gap: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
.related-projects > a.underlink { display: inline-block; margin-bottom: 12px; }
.atelier-story, .contact-grid { gap: 36px; margin-top: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
.atelier-portrait { width: 100%; max-width: 360px; }
.contact-page .contact-grid > div:last-child { padding: 28px; border-radius: 4px; }
.contact-page .email { font-size: clamp(18px, 2vw, 27px); }
.contact-page > h1 { font-size: var(--title-size); }
.project-roles { margin-top: 32px; padding: 24px 0; }
.project-roles > h2 { font-size: 16px; }
.role-tags a, .role-list a { border-radius: 4px; }
.role-tags a { color: var(--muted); }
.role-list strong { font-size: 15px; }
.project-detail > .small-label { margin-top: 32px; }
.project-detail .detail-image { margin: 36px 0 0; }
.project-gallery, .documents { margin: var(--section-space) 0 0; }
.project-gallery > h2, .documents > h2, .legal-copy h2 {
  font-size: var(--heading-size); line-height: 1.3; font-weight: 400;
}
.project-gallery > div { gap: 16px; }
.project-gallery img { height: auto; aspect-ratio: 4/3; object-fit: cover; padding: 0; }
.equal-project-image, .portfolio-item .work-image { aspect-ratio: 4/3; border-radius: 4px; }
.equal-project h3, .portfolio-item h2 { font-size: 21px; line-height: 1.35; }
.balanced-intro { padding: 48px var(--gutter) 32px; }
.balanced-heading { margin: 0 0 32px; gap: 36px; }
.balanced-heading > p { max-width: 440px; font-size: 16px; line-height: 1.7; }
.balanced-projects { padding: 0 var(--gutter) var(--section-space); }
.home-needs, .home-person, .home-references { margin: 0 var(--gutter); padding: var(--section-space) 0; }
.home-needs-grid { gap: 24px; }
.home-shortcuts > a { border-radius: 4px; }
.studio-section-title h2 { font-size: var(--heading-size); font-family: inherit; font-weight: 400; }
.home-references a { line-height: 1.7; }
.vortex-page { --accent: #62d692; --accent-text: #0f7549; }
.dark .vortex-page { --accent-text: #62d692; }
.vortex-page .vortex-promise { font-size: var(--heading-size); line-height: 1.3; color: var(--accent-text); }
.vortex-functions { margin-top: var(--section-space); }
.vortex-page .vortex-quote { font-size: var(--heading-size); margin: var(--section-space) 0; padding: 28px; }
.vortex-page .underlink:hover { border-color: var(--accent); }
.legal-copy { max-width: 740px; margin-top: 36px; }
footer { max-width: 1276px; margin: 0 var(--gutter); padding: 28px 0; }
.footer-contact { font-size: clamp(23px, 2.5vw, 32px); }
.footer-contact span { font-family: inherit; font-style: normal; }
.footer-bottom { flex-wrap: wrap; gap: 14px 24px; line-height: 1.6; }
@media(min-width:1604px) { footer { margin-inline: auto; } }
@media(max-width:1150px) { .site { --gutter: 28px; } }
@media(max-width:800px) {
  .site { --gutter: 24px; --section-space: 36px; --title-size: clamp(32px, 5.5vw, 44px); }
  #main > .page-content { padding-top: 32px; padding-bottom: 44px; }
  .balanced-intro { padding-top: 32px; }
  .page-content :is(.editorial-block, .project-story, .process),
  .expertise-list article, .atelier-story, .contact-grid, .home-person { grid-template-columns: 1fr; gap: 24px; }
  .page-content .process { padding: 24px; }
  .header nav { width: 100%; flex-wrap: wrap; }
  .contact-page > h1 { white-space: normal; }
}
@media(max-width:540px) {
  .site { --gutter: 20px; }
  .header { padding-inline: var(--gutter); }
  .portfolio-filters, .expertise-index { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .portfolio-filters button, .expertise-index a { font-size: 11px; padding: 8px; }
  .equal-project h3, .portfolio-item h2 { font-size: 22px; }
  .footer-contact { align-items: start; flex-direction: column; gap: 8px; }
  .documents a { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) { .site *, .site *::before, .site *::after { scroll-behavior: auto; transition: none; animation: none; } }

.portfolio-empty{margin:28px 0;padding:28px;background:var(--surface);border-radius:4px}.portfolio-empty h2{font-size:24px;line-height:1.4;max-width:650px}.portfolio-empty p{color:var(--muted);margin:16px 0}.portfolio-empty>div{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}.portfolio-empty button{background:none;border:1px solid var(--line);border-radius:4px;padding:10px 12px;color:var(--fg);font-size:14px;cursor:pointer}.portfolio-empty button:hover{border-color:var(--accent)}
/* Sidebar signature matches the editorial eyebrow typography. */
.header .signature,
.header .signature strong,
.header .signature span {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .1em;
  color: var(--muted);
}
.header .signature strong { margin-bottom: 0; }
.header .signature { text-transform: uppercase; }
/* Neutral text color for the services and personal introductions. */
.services-page > .page-lead,
.about-page .portrait-intro > .page-lead { color: var(--fg); }
/* WordPress navigation and native server-side filters. */
.header nav li{list-style:none;margin:0;padding:0}.header nav li a{display:inline-block}.header .logo .logo-day,.header .vortex-menu-button .vortex-day{display:block}.header .logo .logo-night,.header .vortex-menu-button .vortex-night{display:none}.dark .header .logo .logo-day,.dark .header .vortex-menu-button .vortex-day{display:none}.dark .header .logo .logo-night,.dark .header .vortex-menu-button .vortex-night{display:block}.portfolio-filters a{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:12px;min-height:42px;line-height:1.5}.portfolio-filters a[aria-current]{background:var(--accent);color:#000;border-color:var(--accent)}.portfolio-filters a:hover{border-color:var(--accent)}
@media(max-width:540px){.portfolio-filters a{font-size:11px;padding:8px}}
/* New sections expose their content and arrangement in Elementor. */
.acito-flex-section{padding-block:var(--acito-space,32px);color:var(--fg)}
.acito-flex-section h2{font-size:clamp(25px,3vw,38px);line-height:1.25;margin:0 0 22px}
.acito-flex-section.acito-tone-yellow h2{color:var(--accent)}
.acito-flex-section.acito-tone-green h2{color:#60d58d}
.acito-richtext{line-height:1.75;max-width:75ch}.acito-richtext p{margin:0 0 18px}.acito-richtext ul,.acito-richtext ol{padding-left:24px}
.acito-layout-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}
.acito-section-image{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.acito-layout-project .acito-section-image{margin-top:28px;aspect-ratio:16/9}
.acito-editable-gallery{display:grid;grid-template-columns:repeat(var(--acito-columns,3),minmax(0,1fr));gap:18px;margin-top:22px}
.acito-editable-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:800px){.acito-layout-split{grid-template-columns:1fr}.acito-editable-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.acito-editable-gallery{grid-template-columns:1fr}}
/* Compact brand tools, shared across the global templates. */
.header .mode{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--fg);font-size:0;box-shadow:none;cursor:pointer}
.header .mode svg{width:20px;height:20px;display:block;flex:none}
.header .mode:hover{background:var(--surface)}
@media(max-width:800px){.header .menu-bottom{display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:8px;width:auto}.header .vortex-menu-button{width:78px;min-width:0;padding:4px 0;border:0;background:transparent}.header .vortex-menu-button img{width:78px;height:auto;max-height:30px;object-fit:contain}.header .mode{width:36px;height:36px;min-width:36px}.header .mode svg{width:18px;height:18px}}
.header>.elementor{height:100%;width:100%}.header .acito-sidebar-body{height:100%;min-height:100%;width:100%}.header .acito-header-tools{margin-top:auto}.header .acito-header-navigation{margin-top:24px}.header .acito-sidebar-body .elementor-widget-shortcode{width:100%}.header .acito-sidebar-body .signature{margin-bottom:0}
footer .acito-footer-body{width:100%}footer .elementor-widget-text-editor p{font:inherit;margin:0;color:inherit}
@media(max-width:800px){.header>.elementor{height:auto}.header .acito-sidebar-body{height:auto;min-height:0}.header .acito-header-brand .elementor-shortcode{display:flex;align-items:center;gap:20px}.header .acito-header-navigation{margin-top:14px}.header .acito-header-tools{margin-top:4px}.header .acito-header-tools .menu-bottom{padding-top:0;height:36px}.header .vortex-menu-button{height:30px!important;max-height:30px}}
/* Mobile tools live in the footer, keeping the header focused on navigation. */
.acito-footer-mobile-tools{display:none}
@media(max-width:800px){
.header .acito-header-tools{display:none}
footer .acito-footer-mobile-tools{display:block;margin:0 0 24px;width:100%}
footer .acito-footer-mobile-tools .menu-bottom{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:0}
footer .vortex-menu-button{display:block;width:88px;height:34px;padding:0;border:0;background:transparent}
footer .vortex-menu-button img{width:88px;height:34px;object-fit:contain}
footer .vortex-night{display:none}.dark footer .vortex-night{display:block}.dark footer .vortex-day{display:none}
footer .mode{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--fg);font-size:0;box-shadow:none;cursor:pointer}
footer .mode svg{width:20px;height:20px;display:block}footer .mode:hover{background:var(--surface)}
}

/* Native containers retain the reference gutters without overflowing. */
.acito-native-page > .e-con:is(.home-needs,.home-person,.home-references){width:calc(100% - 2 * var(--gutter));max-width:calc(100% - 2 * var(--gutter))}
.home-shortcuts > .e-con{flex-direction:column;align-items:flex-start}

.acito-mobile-back-top{display:none}
@media(max-width:800px){
footer .vortex-menu-button,footer .vortex-menu-button img{width:140px;height:54px}
footer .acito-mobile-back-top{display:block;margin-bottom:24px}
footer .acito-mobile-back-top .elementor-button{color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:4px;padding:12px 16px;font-size:14px}
}
/* Prevent the generic theme's typography from changing the ACITO frame. */
.site{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:normal;line-height:normal}
@media(min-width:801px){.header .acito-header-brand .signature{margin-top:20px}}
/* Footer: readable wordmark, separate social links and compact practical links. */
footer .acito-footer-socials{padding:0 0 20px;margin:0;width:100%}
footer .acito-footer-socials .elementor-widget-button{width:auto}
footer .acito-footer-details{padding:20px 0 0;border-top:1px solid var(--line);width:100%}
@media(max-width:800px){
 footer{padding:28px 0 24px}
 footer .footer-invitation .elementor-button{font-size:25px;line-height:1.35;text-align:left;padding:0}
 footer .footer-invitation{margin-bottom:30px}
 footer .acito-footer-mobile-tools{margin:0 0 30px}
 footer .vortex-menu-button{position:relative;overflow:hidden;width:200px;height:72px;flex-shrink:0;border-radius:0}
 footer .vortex-menu-button img{position:absolute;width:125%;max-width:none;height:auto;left:-12.5%;top:50%;transform:translateY(-50%);object-fit:initial}
 footer .acito-footer-socials{gap:20px;padding-bottom:22px}
 footer .acito-footer-socials .elementor-button{font-size:15px;line-height:1.5;padding:6px 0}
 footer .acito-footer-details{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 22px;padding-top:22px}
 footer .acito-footer-details>.elementor-widget{width:auto;margin:0}
 footer .acito-footer-details>.footer-identity{width:100%;margin:0 0 10px;font-size:12px;line-height:1.7;color:var(--muted)}
 footer .acito-footer-details .elementor-button{padding:5px 0;border:0}
 footer .acito-footer-details>.acito-mobile-back-top{width:100%;margin:10px 0 0}
 footer .acito-mobile-back-top .elementor-button{border:0;border-radius:0;font-size:12px;color:var(--muted)}
}
/* Compact mobile footer, in the requested reading order. */
footer .acito-footer-details>.acito-footer-socials{width:auto;padding:0;margin:0;border:0}
@media(max-width:800px){
 footer .footer-invitation.elementor-widget{margin-bottom:20px}
 footer .acito-footer-mobile-tools.elementor-widget{margin-bottom:20px}
 footer .acito-footer-details.e-con{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:0;border-top:0}
 footer .acito-footer-details>.footer-identity.elementor-widget{margin:0 0 12px;width:100%;line-height:1.6}
 footer .acito-footer-details>.acito-footer-socials.e-con{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;margin:0;width:auto}
 footer .acito-footer-details .elementor-button{font-size:12px;line-height:1.5;padding:4px 0;text-align:left}
 footer .acito-footer-details>.acito-mobile-back-top.elementor-widget{margin:0;width:auto}
}
/* Explain the Vortex project before the compact practical footer links. */
footer .footer-vortex-section{display:none}
@media(max-width:800px){
 footer .footer-vortex-section.e-con{display:flex;flex-direction:column;gap:12px;width:100%;padding:22px 0 26px;margin:0 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 footer .footer-vortex-section .acito-footer-mobile-tools.elementor-widget{margin:0}
 footer .footer-vortex-description p{font-size:15px;line-height:1.65;color:var(--muted)}
 footer .footer-vortex-eyebrow .elementor-heading-title{font-size:11px;letter-spacing:.1em}
 footer .acito-footer-details.e-con{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px}
 footer .acito-footer-details>.footer-identity.elementor-widget{flex-basis:100%;margin:0 0 12px}
 footer .acito-footer-details>.acito-footer-socials.e-con{display:contents}
 footer .acito-footer-details>.acito-mobile-back-top.elementor-widget{width:auto;flex-basis:auto;margin:0}
 footer .acito-footer-details .elementor-widget-button{width:auto;max-width:100%}
}
/* Reuse the About-page Vortex card, including its native Elementor styles. */
footer .footer-about-vortex{display:none}
@media(max-width:800px){
 footer .footer-about-vortex.e-con{display:flex;width:100%;border-left:4px solid var(--vortex-green,#62d692)}
 footer .footer-about-vortex .elementor-widget-text-editor p{font:inherit;line-height:1.7}
 footer .footer-mode-only .vortex-menu-button{display:none}
 footer .footer-mode-only .menu-bottom{justify-content:flex-end}
 footer .footer-mode-only.elementor-widget{margin:0 0 16px}
}
/* Keep the mobile mode switch aligned with the two-line signature. */
/* On mobile the About-page introduction to Vortex already lives in the footer. */
@media(max-width:800px){
 main .elementor-49 .vortex-panel{display:none}
}
@media(max-width:800px){
 footer .footer-about-vortex.e-con{padding:20px;gap:10px}
 footer .footer-about-vortex .elementor-widget-heading .elementor-heading-title{margin:0}
 footer .acito-footer-body .footer-about-vortex .elementor-widget.elementor-widget-text-editor{margin:0}
}
footer .footer-identity-row.e-con{width:100%;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px}
.header .mode{display:none}
footer .footer-identity-row>.footer-mode-only.elementor-widget{display:block;width:36px;flex:0 0 36px;margin:0}
footer .footer-identity-row>.footer-identity.elementor-widget{width:auto;flex:1;min-width:0;margin:0}
footer .footer-mode-only .vortex-menu-button{display:none}
footer .footer-mode-only .menu-bottom{display:flex;align-items:center;justify-content:flex-end;margin:0;padding:0}
footer .mode{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--fg);font-size:0;box-shadow:none;cursor:pointer}
footer .mode svg{width:20px;height:20px;display:block}
footer .mode:hover{background:var(--surface)}
@media(max-width:800px){
 footer .acito-footer-details>.footer-identity-row.e-con{flex-basis:100%;margin:0 0 12px}
 footer .footer-identity-row>.footer-identity.elementor-widget{width:auto;flex:1;min-width:0;margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
 footer .footer-identity-row>.footer-mode-only.elementor-widget{width:36px;flex:0 0 36px;margin:0}
 footer .footer-identity-row .menu-bottom{margin:0;padding:0}
}