/* Special Projects — responsive layer. Loaded after each page's own styles. Breakpoints: 1024 (tablet), 720 (phone). */

/* Footer column stacks are transparent above phone widths; order the six columns explicitly */
.footer-stack{display:contents}
.footer-stack-a > div:nth-child(1){order:1}.footer-stack-b > div:nth-child(1){order:2}.footer-stack-a > div:nth-child(2){order:3}.footer-stack-b > div:nth-child(2){order:4}.footer-stack-a > div:nth-child(3){order:5}.footer-stack-b > div:nth-child(3){order:6}

/* a11y: collapsed menus leave the accessibility tree */
.mega{visibility:hidden}
.mega.open,.mega.is-open{visibility:visible}

/* ── Mobile nav (≤1024): full-screen sheet, Ramp-style stacked groups ── */
.nav-burger{display:none}
@media (max-width:1024px){
  .footer li a,.footer li{display:inline-block;padding:6px 0;line-height:1.3}
  .footer ul{gap:8px !important}
  .nav-inner{height:64px !important;padding-top:0 !important;grid-template-columns:1fr auto !important;align-items:center}
  .logo svg,.nav .logo svg{height:30px}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:currentColor;cursor:pointer;justify-self:end;position:relative;z-index:61;-webkit-tap-highlight-color:transparent}
  .nav-burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background .2s ease}
  .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .25s ease,top .25s ease}
  .nav-burger span::before{top:-7px}.nav-burger span::after{top:7px}
  body.nav-open .nav-burger span{background:transparent}
  body.nav-open .nav-burger span::before{top:0;transform:rotate(45deg)}
  body.nav-open .nav-burger span::after{top:0;transform:rotate(-45deg)}
  body.nav-open .nav{background:#4a040b !important;color:#fff !important;border-bottom-color:transparent !important}
  body.nav-open .nav-burger{color:#fff}
  /* the sheet */
  .nav-links{position:fixed;top:0;left:0;right:0;bottom:0;height:100dvh;background:#4a040b;color:#fff;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:calc(64px + 8px) 28px calc(32px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;z-index:60;justify-self:stretch}
  body.nav-open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
  body.nav-open{overflow:hidden;position:fixed;width:100%}
  .nav-links::after{content:"Special Projects GmbH";display:block;margin-top:auto;padding-top:32px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45)}
  .nav-links .nav-tab{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:22px;letter-spacing:-.01em;color:#fff;opacity:1;-webkit-tap-highlight-color:transparent}
  .nav-links .nav-tab:active{opacity:.7}
  .nav-links .nav-tab .chev{width:14px;height:14px;opacity:.6;transition:transform .22s ease}
  .nav-tab[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .nav-tab[aria-expanded="true"]{border-bottom-color:transparent}
  /* dropdowns → inline groups under their tab */
  .mega{position:static !important;width:auto !important;left:auto !important;transform:none !important;opacity:1 !important;pointer-events:auto !important;display:none;background:transparent;border:0;margin:0}
  .mega.open{display:block;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:10px}
  /* touch: no hover state */
  .nav-tab[data-menu]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .mega:not(.open){display:none !important}
  .mega-inner{padding:0 0 6px !important;display:block !important;max-width:none}
  .mega-intro{display:none !important}
  .mega-list{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.18);padding-left:18px}
  .mega-link{display:block;min-height:44px;padding:11px 0;border:0 !important}
  .mega-link:hover{padding-left:0}
  .ml-title{display:block;font-size:17px;font-weight:500}.ml-desc{display:block;font-size:13px;line-height:1.4;color:rgba(255,255,255,.6);margin-top:2px}
  .nav{position:sticky;top:0}
  .page .nav{position:fixed}
}
/* ── Tablet ≤1024 ───────────────────────────────────────────── */
@media (max-width:1024px){
  html,body{overflow-x:hidden}
  /* children of grids forced to one column must not keep explicit placement */
  .hero-content > *,.head .wrap > *,.body .wrap > *,.body > *,.trust-a > *,.f-hom .body .wrap > *,.v-index .body .wrap > *,.v-split .wrap > *,body[data-style="index"] .group > *,body[data-style="index"] .ind > *,body[data-style="index"] .svc > *,body[data-style="ledger"] .grp > *,body[data-style="ledger"] .t > *,.pair > *,.nl-panel > *{grid-column:auto !important;grid-row:auto !important}
  .hero-headline{grid-column:1 !important}
  .flow,.rail,.text,.aside{grid-column:auto !important;max-width:100% !important;min-width:0}
  .wrap{padding-left:28px;padding-right:28px}
  [id]{scroll-margin-top:84px}
  /* generic two-column heads → stack */
  .head .wrap,.f-hom .head .wrap,.v-index .head .wrap,body[data-style="index"] .head .wrap,body[data-style="ledger"] .head .wrap{grid-template-columns:1fr !important;gap:24px !important}
  .intro{padding-top:0 !important}
  /* footer */
  .footer-inner{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:44px 32px !important;padding:48px 0 72px !important;align-items:start}
  .footer-inner > div{min-width:0}
  /* Home */
  .hero-content{grid-template-columns:1fr !important;padding-top:72px !important}
  .hero-headline{font-size:clamp(40px,7.5vw,72px) !important}
  .about-b{max-width:none;padding-top:72px !important;padding-bottom:72px !important}
  .about-b-text{font-size:clamp(22px,3.2vw,30px) !important;text-indent:1.6em !important}
  .trust-a{grid-template-columns:1fr !important;gap:28px !important;padding-top:40px !important;padding-bottom:64px !important}
  .quotes{grid-template-columns:1fr !important;gap:16px !important;padding-bottom:40px !important}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body[data-nl="a"] .nl-panel,body[data-nl="b"] .nl-panel{grid-template-columns:1fr !important;padding:48px 32px !important;gap:32px !important}
  .nl-panel h3,.nl-panel h2{font-size:clamp(26px,7vw,34px) !important}
  .nl-field{flex-direction:column !important;gap:16px;background:transparent !important;border:0 !important;border-radius:0 !important;padding:0 !important}
  body[data-nl="a"] .nl-field input,body[data-nl="c"] .nl-field input{background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:999px;padding:0 22px;height:52px;width:100%;flex:none;min-height:52px;line-height:50px;box-sizing:border-box}
  body[data-nl="b"] .nl-field input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:0 22px;height:52px;width:100%;color:#fff;flex:none;min-height:52px;line-height:50px;box-sizing:border-box}
  .nl-field button{width:100%;height:52px;flex:none}
  .nl-status{position:static !important;margin-top:12px !important;padding-left:0 !important}

  .tweaks,.tweaks-toggle,.about-switch,.style-switch,.as-btn{display:none !important}
  /* About */
  .out-grid,.cas-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .out-lanes,.out-conf{display:none !important}
  .out-toggle{display:none !important}
  .pair{grid-template-columns:1fr !important}
  .stand p,.stand .sub{max-width:none}
  /* Capabilities / Industries / Clients / Services index layouts */
  body[data-style="index"] .group{grid-template-columns:1fr !important;gap:24px !important;padding:48px 0 !important}
  body[data-style="index"] .svc{grid-template-columns:1fr !important;gap:10px !important}
  body[data-style="index"] .ind{grid-template-columns:1fr !important;gap:12px !important;padding:32px 0 !important}
  body[data-style="index"] .call-grid,body[data-style="editorial"] .g-list{grid-template-columns:1fr !important;gap:32px !important}
  body[data-style="editorial"] .calls .wrap{grid-template-columns:1fr !important}
  body[data-style="editorial"] .call-group{grid-template-columns:1fr !important;gap:12px !important}
  body[data-style="ledger-grey"] .svc,body[data-style="ledger"] .svc{grid-template-columns:1fr !important;gap:16px !important;padding:32px 0 !important}
  body[data-style="ledger-grey"] .list{padding:8px 24px !important}
  body[data-style="ledger-grey"] .svc .more,body[data-style="ledger"] .svc .more{grid-column:1 !important}
  body[data-style="ledger-grey"] .svc h2{font-size:30px !important}
  body[data-style="reader"] .list,body[data-style="reader"][data-intro="b"] .intro{grid-template-columns:1fr !important;gap:32px !important}
  /* Long-read subpages (industries/clients) + legal/FAQ register */
  .head .wrap,.body .wrap{grid-template-columns:1fr !important;gap:24px !important}
  .rail,.toc-wrap,aside.rail{position:static !important;top:auto !important}
  .toc{display:none !important}
  .body{grid-template-columns:1fr !important;gap:0 !important}
  .body:not(:has(> .wrap)){padding-left:28px !important;padding-right:28px !important}
  .flow > .pull-top{margin-left:0 !important;width:100% !important}
  .pull{margin-left:0 !important;width:100% !important}
  /* Founder */
  .f-hom .body .wrap,body[data-style="right"] .f-hom .body .wrap,body[data-style="serif"] .f-hom .body .wrap{grid-template-columns:1fr !important;gap:40px !important;padding-top:40px !important;padding-bottom:80px !important}
  .f-hom .aside{order:2}
  /* Contact */
  .v-index .body .wrap,.v-split .wrap{grid-template-columns:1fr !important;gap:40px !important;padding-top:40px !important;padding-bottom:80px !important}
  /* Testimonials ledger */
  body[data-style="ledger"] .t{grid-template-columns:1fr !important;gap:16px !important;padding:32px 0 !important}
  /* Principles */
  body[data-style="ledger"] .grp{grid-template-columns:1fr !important;gap:16px !important}
  body[data-style="broadside"] .pr{grid-template-columns:40px minmax(0,1fr) !important;gap:0 16px !important}
  body[data-style="broadside"] .pr > :nth-child(3){grid-column:2}
  .coda{margin-left:-28px !important;margin-right:-28px !important;padding:48px 28px !important}
  /* Comparison table → stacked cards */
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:auto !important}
  .cmp colgroup,.cmp thead{display:none}
  .cmp tr{padding:24px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
  .cmp td{padding:6px 0 !important;border:0 !important;background:transparent !important}
  .cmp td.cat{font-size:19px !important;padding-bottom:4px !important}
  .cmp td.firms-cell{font-size:14px !important;color:var(--muted,rgba(0,0,0,.55)) !important;padding-bottom:12px !important}
  .cmp td.fit::before{content:"Where we come in";display:block;font-size:12px;font-weight:500;color:var(--muted,rgba(0,0,0,.55));margin:10px 0 4px}
  .cmp td.not::before{content:"What they typically do and we don’t";display:block;font-size:12px;font-weight:500;color:var(--muted,rgba(0,0,0,.55));margin:12px 0 4px}
  .cmp td.not{color:rgba(0,0,0,.6) !important}
  /* Writing grid */
  .list{padding-left:28px !important;padding-right:28px !important}
  .writing .list,.v-writing .list{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* Services grey ledger */
  .lede p{max-width:none !important}
  /* images */
  img,svg.hero-vector{max-width:100%;height:auto}
}

/* ── Phone ≤720 ─────────────────────────────────────────────── */
@media (max-width:720px){
  html{-webkit-text-size-adjust:100%}
  .wrap{padding-left:20px;padding-right:20px}
  h1{font-size:clamp(34px,9vw,48px) !important;letter-spacing:-.02em !important}
  .hero{min-height:560px !important}
  .hero-headline{font-size:clamp(34px,9.5vw,52px) !important}
  .about-b-text{font-size:clamp(21px,5.6vw,26px) !important;text-indent:1.4em !important}
  .about-cta{font-size:15px !important;padding:15px 22px !important}
  .trust-a-title{font-size:clamp(26px,6.5vw,32px) !important}
  .trust-a-text{font-size:16.5px !important}
  .story-grid{grid-template-columns:1fr !important}
  /* Phone footer: three independent two-column stacks, 40px rhythm throughout */
  .footer-inner{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:40px 28px !important;align-items:start}
  .footer-inner > div{min-width:0;margin:0 !important}
  .footer-stack{display:flex;flex-direction:column;gap:40px}
  .footer-stack > div{order:0 !important}
  .footer-stack-a{order:1}.footer-stack-b{order:2}
  .footer{padding-top:64px !important}
  .footer-top{padding-bottom:36px !important}
  .footer .logo-big svg{height:30px !important}
  .footer h4{margin:0 0 14px !important}
  .footer ul{gap:8px !important;margin:0 !important}
  .footer li{overflow-wrap:anywhere}
  .footer-bottom{flex-direction:column;gap:8px}
  .out-grid,.cas-grid{grid-template-columns:1fr !important}
  .row.two{grid-template-columns:1fr !important;gap:24px !important}
  .c-form button{width:100%}
  .types{display:flex;flex-direction:column;gap:12px}
  .sec-body{font-size:18px !important}
  .lede p{font-size:20px !important}
  .stand p,.stand .sub{font-size:clamp(20px,5vw,24px) !important}
  .coda{margin-left:-20px !important;margin-right:-20px !important;padding:40px 20px !important;font-size:22px !important}
  .writing .list,.v-writing .list{grid-template-columns:1fr !important}
  .body:not(:has(> .wrap)){padding-left:20px !important;padding-right:20px !important}
  .list{padding-left:20px !important;padding-right:20px !important}
  body[data-style="ledger-grey"] .list{padding:8px 18px !important}
  .meta{flex-direction:column;gap:6px}
  .cl{grid-template-columns:40px minmax(0,1fr) !important}
  .sec h2{grid-template-columns:40px 1fr !important}
  .help-list div{grid-template-columns:1fr !important;gap:6px !important}
  .call b{display:block;margin-bottom:4px}
  .nl-panel{border-radius:16px !important;padding:40px 22px !important}
}

/* ── Small phones ≤380 ─────────────────────────────────────── */
@media (max-width:380px){
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:clamp(30px,9vw,38px) !important}
  .hero-headline{font-size:clamp(30px,9.5vw,40px) !important}
  .footer-inner{grid-template-columns:1fr !important;gap:28px !important}
  .footer-stack{display:contents}
  .footer-stack-a > div:nth-child(1){order:1 !important}.footer-stack-b > div:nth-child(1){order:2 !important}.footer-stack-a > div:nth-child(2){order:3 !important}.footer-stack-b > div:nth-child(2){order:4 !important}.footer-stack-a > div:nth-child(3){order:5 !important}.footer-stack-b > div:nth-child(3){order:6 !important}
  .coda{margin-left:-16px !important;margin-right:-16px !important;padding:36px 16px !important}
  .nl-panel{padding:32px 18px !important}
  .about-cta{white-space:normal !important;text-align:left;line-height:1.3 !important}
}
/* ── Short landscape phones ───────────────────────────────── */
@media (max-height:500px) and (max-width:1024px){
  .hero{min-height:100vh !important}
  .hero-headline{font-size:clamp(28px,6vw,40px) !important}
  .nav-links{padding-top:calc(64px + 4px)}
  .nav-links .nav-tab{min-height:48px;padding:10px 0;font-size:18px}
}
/* ── Large tablets / small laptops 1025–1280: tighten footer and multi-column grids ── */
@media (min-width:1025px) and (max-width:1280px){
  .footer-inner{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:40px 32px !important}
  .wrap{padding-left:32px;padding-right:32px}
  .quotes{gap:16px !important}
  .quote{padding:24px !important}
}
/* ── Touch: hover-only affordances must not trap taps ─────── */
@media (hover:none){
  .nav-tab[data-menu]{cursor:pointer}
  .mega-link:hover,.about-cta:hover{padding-left:inherit}
}
/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}