/* ============================================================================
   ALDesign Group — Portal-specific styles (home / group hub)
   Depends on tokens.css + base.css.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block: calc(var(--space-32) + 4vh) var(--space-24); overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 75% 12%, color-mix(in srgb, var(--c-studio) 16%, transparent), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, color-mix(in srgb, var(--c-structures) 12%, transparent), transparent 70%); }
.hero__inner { max-width: min(100%, 58rem); }
.hero__kicker { display:inline-flex; align-items:center; gap:.8rem; margin-bottom: var(--space-8); }
.hero__kicker .accent-rule { width:48px; }
.hero h1 { font-size: var(--step-6); line-height:.98; max-width: 16ch; }
.hero h1 .word { display:inline-block; }
.hero__intro { margin-top: var(--space-8); max-width: 54ch; }
.hero__scroll { position:absolute; left:var(--gutter); bottom:var(--space-12);
  display:inline-flex; align-items:center; gap:.7rem; font-size:var(--step--1);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-muted); opacity:.6; }
.hero__scroll-line { width:1px; height:46px; background:linear-gradient(var(--text-muted),transparent); transform-origin:top; }
html.js .hero__scroll-line { animation: scrollpulse 2.2s var(--ease-inout) infinite; }
@keyframes scrollpulse { 0%,100%{transform:scaleY(.4);opacity:.3} 50%{transform:scaleY(1);opacity:.8} }

/* hero entrance — only hidden when JS is running */
html.js .hero [data-hero]{ opacity:0; transform:translateY(26px); }
html.js body.is-loaded .hero [data-hero]{ opacity:1; transform:none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-emph); }
html.js body.is-loaded .hero [data-hero][data-d="1"]{ transition-delay:.12s }
html.js body.is-loaded .hero [data-hero][data-d="2"]{ transition-delay:.24s }
html.js body.is-loaded .hero [data-hero][data-d="3"]{ transition-delay:.40s }
html.js body.is-loaded .hero [data-hero][data-d="4"]{ transition-delay:.60s }

/* ---- Brands grid -------------------------------------------------------- */
.brands { display:grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px){ .brands{ grid-template-columns: repeat(2,1fr); } }

.brand-card { position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height: clamp(280px, 34vw, 420px); padding: var(--space-8);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; isolation:isolate;
  transition: transform var(--dur-3) var(--ease-emph), border-color var(--dur-2) var(--ease-out); }
/* hover reveals the subsite hero behind a readable scrim + brand tint */
.brand-card > * { position: relative; z-index: 1; }
.brand-card__index { position: absolute; z-index: 1; }
.brand-card::before { content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:
    radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--bc) 16%, transparent), transparent 70%),
    linear-gradient(to top, color-mix(in srgb, var(--surface) 92%, transparent) 6%, color-mix(in srgb, var(--surface) 46%, transparent)),
    var(--card-hero, none) center/cover no-repeat;
  transition: opacity var(--dur-3) var(--ease-out); }
.brand-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--bc) 60%, var(--border)); }
.brand-card:hover::before { opacity:1; }
@media (prefers-reduced-motion: reduce){ .brand-card:hover { transform:none; } }
/* Touch devices have no hover: reveal a muted hero permanently so mobile isn't flat */
@media (hover: none){
  .brand-card::before { opacity: .5; }
  .brand-card { border-color: color-mix(in srgb, var(--bc) 28%, var(--border)); }
}
.brand-card__logo { height: clamp(48px, 7vw, 76px); width:auto; margin-bottom: var(--space-8); }
.brand-card__logo img, .brand-card__logo svg, .brand-card__logo object { height:100%; width:auto; }
.brand-card__meta { display:flex; align-items:baseline; gap:.8rem; margin-bottom: var(--space-2); }
.brand-card__tag { font-size:var(--step-1); font-family:var(--font-display); color:var(--text); }
.brand-card__est { font-size:var(--step--1); color:var(--text-faint); }
.brand-card__desc { color:var(--text-muted); max-width:42ch; margin-bottom: var(--space-8); }
.brand-card__enter { display:inline-flex; align-items:center; gap:.6rem; font-weight:var(--weight-med);
  color:var(--bc); }
.brand-card__enter .btn__arrow{ transition: transform var(--dur-2) var(--ease-emph); }
.brand-card:hover .brand-card__enter .btn__arrow{ transform: translateX(5px); }
.brand-card__index { position:absolute; top:var(--space-6); right:var(--space-8);
  font-family:var(--font-display); font-size:var(--step-1); color:var(--n-300); }
.brand-card__link::after { content:""; position:absolute; inset:0; } /* full-card click target */

/* per-card accent + hero (url resolved relative to THIS stylesheet: assets/css/ -> ../img/) */
.brand-card.studio{--bc:var(--c-studio-200); --card-hero:url('../img/studio-hero-1000.webp')}
.brand-card.structures{--bc:var(--c-structures-200); --card-hero:url('../img/str-hero-1100.webp')}
.brand-card.tao{--bc:var(--c-tao-200); --card-hero:url('../img/tao-hero-1000.webp')}
.brand-card.woomet{--bc:var(--c-woomet-200); --card-hero:url('../img/woo-hero-1100.webp')}

/* ---- Contact form (portal CTA) ------------------------------------------ */
.form{display:grid;gap:var(--space-6);max-width:40rem;margin:var(--space-10) auto 0;text-align:left}
.form__row--2{display:grid;gap:var(--space-6)}
@media(min-width:600px){.form__row--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field span{font-size:var(--step--1);color:var(--text-muted)}
.field input,.field textarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.7em .9em;color:var(--text);font:inherit;width:100%}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:transparent}
.form button{justify-self:start}
.form__note{text-align:center}

/* ---- About / stats ------------------------------------------------------ */
.about { display:grid; gap: var(--space-16); }
@media (min-width: 900px){ .about{ grid-template-columns: 1fr 1fr; align-items:start; } }
.stats { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8) var(--space-6); }
.stat__num { font-family:var(--font-display); font-size: var(--step-4); color:var(--text); line-height:1;
  display:flex; align-items:flex-end; flex-wrap:wrap; min-height: var(--step-4); }
.stat__num--text { font-size: var(--step-2); line-height:1.1; }
.stat__num span { color: var(--accent); }
.stat__label { margin-top: var(--space-2); font-size:var(--step--1); color:var(--text-muted);
  letter-spacing:.04em; text-transform:uppercase; }

/* ---- CTA strip ---------------------------------------------------------- */
.cta { text-align:center; }
.cta h2 { max-width: 18ch; margin-inline:auto; }

/* ---- Footer layout ------------------------------------------------------ */
.footer-grid { display:grid; gap: var(--space-12); grid-template-columns:1fr; }
@media (min-width:720px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand__name { font-family:var(--font-display); font-size:var(--step-2); }
.footer-col h4 { font-family:var(--font-sans); font-size:var(--step--1); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--text-faint); margin-bottom: var(--space-4); }
.footer-col a { display:block; color:var(--text-muted); padding-block:.2rem; transition:color var(--dur-2); }
.footer-bottom { display:flex; flex-wrap:wrap; gap: var(--space-4); justify-content:space-between;
  margin-top: var(--space-16); padding-top: var(--space-6); border-top: var(--hairline);
  font-size:var(--step--1); color:var(--text-faint); }

/* ---- Mobile nav --------------------------------------------------------- */
.nav-toggle{ display:none; }
@media (max-width: 760px){
  .nav{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:var(--space-8);
    background:color-mix(in srgb,var(--bg) 96%, transparent); backdrop-filter:blur(14px);
    transform: translateY(-100%); transition: transform var(--dur-3) var(--ease-emph); }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:var(--step-2); color:var(--text); }
  .nav-toggle{ display:inline-flex; z-index:calc(var(--z-nav) + 1); width:44px; height:44px;
    align-items:center; justify-content:center; }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:""; display:block;
    width:24px; height:2px; background:var(--text); position:relative; transition: var(--dur-2); }
  .nav-toggle span::before{ position:absolute; top:-7px } .nav-toggle span::after{ position:absolute; top:7px }
}