/* Rumantio: About, Brands, Contact. Uses tokens + components from main.css. */

/* shared page header panel */
.page-hero{padding-block:clamp(1rem,3vw,2rem) 0}
.page-hero__panel{border-radius:clamp(28px,5vw,56px);padding:clamp(2.5rem,7vw,5rem) clamp(1.25rem,5vw,4.5rem);text-align:center;box-shadow:var(--shadow);
  background:radial-gradient(600px 360px at 90% 0%,rgb(var(--sun-rgb)/.35) 0,transparent 60%),radial-gradient(500px 340px at 0% 100%,rgb(var(--brand-rgb)/.12) 0,transparent 60%),linear-gradient(135deg,var(--hero-a),var(--cream) 55%,var(--hero-b))}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.75rem)}
.page-hero__lead{max-width:56ch;margin:1rem auto 0;color:var(--muted);font-size:1.15rem}

/* about */
.about__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about__text p{margin-top:1rem;color:var(--muted)}
.about__text .about__cta{margin-top:1.75rem}
.about__card{background:var(--sage);color:#fff;border-radius:var(--radius);padding:clamp(1.75rem,4vw,3rem)}
.about__card h3{color:#fff;margin-bottom:1rem}
.about__card ul{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}
.about__card li{display:flex;gap:.6rem;align-items:flex-start}
.about__card li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--sun)}

/* brands */
.brands__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.25rem}
.brand{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:var(--card);box-shadow:0 1px 2px rgb(var(--brand-rgb)/.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.brand__logo{--pad:1.5rem;position:relative;height:128px;background:#fff;border-bottom:1px solid var(--oat)}
.brand__logo img{position:absolute;inset:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - 2 * var(--pad));object-fit:contain}
.brand__logo--letter{display:grid;place-items:center;background:var(--oat);color:var(--link);font:800 2.5rem var(--font-display);text-transform:uppercase}
.brand__meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex:1;padding:.9rem 1rem 1rem 1.15rem}
.brand__name{font-family:var(--font-display);font-size:1.05rem;font-weight:600;line-height:1.25}
.brand__go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--oat);color:var(--brand);transition:background-color .3s var(--ease),color .3s var(--ease)}
.brand__go svg{width:16px;height:16px}
.brand:hover .brand__go,.brand:focus-visible .brand__go{background:var(--brand);color:#fff}
@media (hover:hover){.brand:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}
.brand:active{transform:scale(.98)}
.brands__empty{padding:clamp(2rem,6vw,4rem) 1rem;text-align:center}
.brands__empty p{margin-bottom:1.5rem;color:var(--muted);font-size:1.15rem}
@media (max-width:640px){
  .brands__grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .brand__logo{--pad:1rem;height:96px}
  .brand__meta{padding:.7rem .75rem .8rem .9rem}
  .brand__name{font-size:.95rem}
  .brand__go{width:30px;height:30px}
}

/* contact */
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.contact__info{display:grid;gap:1rem}
.info-card{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;border-radius:var(--radius);background:var(--card);color:var(--muted)}
.info-card svg{flex:none;width:32px;height:32px;color:var(--brand)}
.info-card b{display:block;color:var(--ink)}
.info-card a{color:var(--link);font-weight:700;word-break:break-word}
.info-card--todo{border:2px dashed rgb(var(--brand-rgb)/.35);background:transparent}
.contact-form{display:grid;gap:1rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.field label{display:block;margin-bottom:.35rem;font-weight:700}
.field input,.field textarea{width:100%;min-height:48px;padding:.7rem 1rem;border:2px solid var(--oat);border-radius:var(--radius-sm);background:var(--cream);color:var(--ink);font:inherit}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:2px}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--brand-dark)}
.contact-form[aria-busy="true"]{opacity:.7;pointer-events:none}
.form-note{padding:1rem 1.25rem;border-radius:var(--radius-sm);font-weight:700}
.form-note--ok{background:var(--mint);color:var(--ink)}
.form-note--err{border-left:4px solid var(--brand);background:var(--oat);color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:820px){
  .about__grid,.contact__grid{grid-template-columns:1fr}
}

/* 404 */
.notfound__box{max-width:560px;margin-inline:auto;text-align:center}
.notfound__icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 1.25rem;border-radius:50%;background:var(--oat);color:var(--brand)}
.notfound__icon svg{width:44px;height:44px}
.notfound__box p{margin-bottom:1.5rem;color:var(--muted)}
.notfound__search{max-width:none;margin:0 auto 1.5rem}
.notfound__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}