/* Ruhmedy website. Every value resolves to a token in tokens.css.
   Content is drawn from the Ruhmedy Company Profile (September 2026); layout and component styles
   follow the design system's website kit (Button, Card, AttributeList, Section, SectionHead). */

/* ---------- Layout ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:1024px){.container{padding:0 var(--gutter-lg)}}

.section{padding:var(--space-20) 0}
@media (min-width:1024px){.section{padding:var(--section-y) 0}}
.section--subtle{background:var(--surface-subtle)}
.section--apothecary{background:var(--surface-apothecary)}
.section--flush-top{padding-top:0}
section[id]{scroll-margin-top:var(--space-16)}

.skip-link{position:absolute;left:var(--space-4);top:calc(-1 * var(--space-16));z-index:50;padding:var(--space-2) var(--space-4);background:var(--white);border:var(--rule-strong);border-radius:var(--radius-sm);color:var(--ink-900)}
.skip-link:focus{top:var(--space-4)}

/* Let CSS aspect-ratio size images; the width/height attributes only reserve layout space */
img{height:auto}

/* Grid children may shrink below their content's intrinsic width */
.hero__grid>*,.about>*,.partners>*,.cta__inner>*,.footer__grid>*{min-width:0}

/* ---------- Type roles ---------- */
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent)}
.display{font:var(--weight-light) var(--text-4xl)/var(--leading-tight) var(--font-brand);letter-spacing:var(--tracking-tight)}
@media (min-width:720px){.display{font-size:var(--text-5xl)}}
@media (min-width:1200px){.display{font-size:var(--text-6xl)}}
.h2{font:var(--weight-light) var(--text-3xl)/1.12 var(--font-brand);letter-spacing:var(--tracking-tight)}
@media (min-width:1024px){.h2{font-size:var(--text-4xl)}}
.h3{font:var(--weight-medium) var(--text-lg)/1.25 var(--font-brand)}
.lede{font:var(--type-body-lg);color:var(--text-secondary);max-width:var(--measure-prose)}
.body{font:var(--type-body);color:var(--text-secondary)}
.prose p{font:var(--type-body-lg);color:var(--text-secondary);max-width:var(--measure-prose)}
.prose p + p{margin-top:var(--space-4)}

/* ---------- Icons (Lucide outline, inline sprite) ---------- */
.icon{width:var(--space-6);height:var(--space-6);flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:var(--space-5);height:var(--space-5)}
.icon-tile{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--surface-subtle);color:var(--text-primary)}
.section--subtle .icon-tile,.section--apothecary .icon-tile{background:var(--surface-apothecary)}
.section--apothecary .card .icon-tile{background:var(--sand-200)}

/* ---------- Button (components/core/Button.jsx) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-pill);cursor:pointer;letter-spacing:0.005em;text-align:center;white-space:nowrap;border:1px solid transparent;transition:var(--transition-control);text-decoration:none}
.btn--sm{padding:var(--space-2) 18px;font:var(--weight-medium) var(--text-sm)/1 var(--font-text)}
.btn--lg{padding:17px 34px;font:var(--weight-medium) var(--text-md)/1 var(--font-text)}
.btn--primary{background:var(--coral-500);color:var(--white);border-color:var(--coral-500);box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--coral-600);border-color:var(--coral-600);color:var(--white);transform:var(--hover-lift);box-shadow:var(--shadow-2)}
.btn--primary:active{background:var(--coral-700);border-color:var(--coral-700);transform:var(--press-scale);box-shadow:var(--shadow-0)}
.btn--secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn--secondary:hover{background:var(--coral-50);color:var(--coral-700);border-color:var(--coral-500);transform:var(--hover-lift)}
.btn--secondary:active{transform:var(--press-scale)}
.btn--inverse{background:var(--white);color:var(--ink-900);border-color:var(--white)}
.btn--inverse:hover{background:var(--coral-50);color:var(--ink-900);border-color:var(--coral-50);transform:var(--hover-lift)}
.btn--inverse:active{transform:var(--press-scale)}
.cta .btn:focus-visible,.site-footer a:focus-visible{outline-color:var(--white)}

/* ---------- Header — the only sticky element ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);border-bottom:var(--rule-hairline)}
.site-header__inner{height:var(--space-16);display:flex;align-items:center;gap:var(--space-10)}
@media (min-width:1024px){.site-header__inner{height:76px}}
.site-header__logo{display:flex;border-bottom:0}
.site-header__logo img{height:26px;width:auto}
@media (min-width:1024px){.site-header__logo img{height:30px}}
.site-nav{display:flex;gap:var(--space-8);flex:1}
.site-nav a{font:var(--type-body);color:var(--text-secondary);border-bottom:0}
.site-nav a:hover{color:var(--text-primary)}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.menu-toggle{display:none;width:var(--space-10);height:var(--space-10);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-900);cursor:pointer;align-items:center;justify-content:center;transition:var(--transition-control)}
.menu-toggle:hover{background:var(--ink-50)}
.menu-toggle .icon--close,.site-header.is-open .menu-toggle .icon--menu{display:none}
.site-header.is-open .menu-toggle .icon--close{display:block}
@media (max-width:1023px){
  .menu-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:var(--space-2) var(--gutter) var(--space-6);background:var(--white);border-bottom:var(--rule-hairline);box-shadow:var(--shadow-3)}
  .site-header.is-open .site-nav{display:flex}
  .site-nav a{padding:var(--space-4) 0;border-bottom:var(--rule-hairline);font:var(--type-body-lg);color:var(--text-primary)}
}
@media (max-width:479px){.site-header__actions .btn{display:none}}

/* ---------- Hero ---------- */
.hero{padding:var(--space-12) 0 var(--space-16)}
@media (min-width:1024px){.hero{padding:var(--space-20) 0 var(--space-24)}}
.hero__grid{display:grid;gap:var(--space-12);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1fr 1fr;gap:var(--space-16)}}
.hero .display{margin:var(--space-5) 0 var(--space-6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__media{position:relative;margin-bottom:var(--space-8)}
.hero__media img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-3);background:var(--surface-studio)}
@media (min-width:960px){.hero__media img{aspect-ratio:4 / 5}}
.hero__card{position:absolute;left:var(--space-4);right:var(--space-4);bottom:calc(-1 * var(--space-8));background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-3);padding:var(--space-5) var(--space-6)}
@media (min-width:600px){.hero__card{left:calc(-1 * var(--space-6));right:auto;max-width:22rem}}
.hero__card .eyebrow{color:var(--text-muted);margin-bottom:var(--space-2)}
.hero__card p{font:var(--weight-regular) var(--text-lg)/1.3 var(--font-brand);color:var(--text-primary)}

.trust{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin-top:var(--space-10);padding-top:var(--space-6);border-top:var(--rule-hairline);list-style:none;padding-left:0}
.trust li{display:flex;align-items:center;gap:var(--space-2);font:var(--type-small);color:var(--text-secondary)}

/* ---------- Section head (Chrome.jsx SectionHead) ---------- */
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-12)}
.section-head > div{max-width:var(--measure-prose)}
.section-head .eyebrow{margin-bottom:var(--space-3)}
.section-head .lede{margin-top:var(--space-4)}

/* ---------- Card (components/core/Card.jsx): hairline OR shadow, never both ---------- */
.card{background:var(--surface-page);border:var(--rule-hairline);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);height:100%;transition:var(--transition-control)}
.section--apothecary .card{border-color:transparent}
.card .h3{margin-top:var(--space-3)}
.card .body{flex:1}
@media (hover:hover){.card--interactive:hover{box-shadow:var(--shadow-3);transform:var(--hover-lift);border-color:transparent}}

.grid-4{display:grid;gap:var(--space-5)}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- AttributeList (components/core/AttributeList.jsx) ---------- */
.attributes{list-style:none;margin:var(--space-2) 0 0;padding:var(--space-4) 0 0;border-top:var(--rule-hairline);display:flex;flex-wrap:wrap;font:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-text);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.attributes li + li::before{content:"·";padding:0 var(--space-2)}

/* ---------- How it works ---------- */
.steps{display:grid;gap:var(--space-8);list-style:none;margin:0;padding:0;counter-reset:step}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr);gap:var(--space-10) var(--space-6)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding-top:var(--space-5);border-top:var(--rule-hairline)}
.step__num{font:var(--weight-light) var(--text-5xl)/1 var(--font-brand);color:var(--text-accent);letter-spacing:var(--tracking-tight)}
.step .h3{margin:var(--space-5) 0 var(--space-2)}

/* ---------- About ---------- */
.about{display:grid;gap:var(--space-12);align-items:center}
@media (min-width:960px){.about{grid-template-columns:1fr 1.1fr;gap:var(--space-16)}}
.about__media img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-studio)}
.about .h2{margin:var(--space-3) 0 var(--space-6)}
.facts{margin:var(--space-8) 0 0;border-top:var(--rule-hairline)}
.facts div{display:grid;gap:var(--space-1);padding:var(--space-4) 0;border-bottom:var(--rule-hairline)}
@media (min-width:600px){.facts div{grid-template-columns:9rem 1fr;gap:var(--space-6)}}
.facts dt{font:var(--type-small);color:var(--text-muted)}
.facts dd{margin:0;font:var(--type-body);color:var(--text-primary)}

/* ---------- Partners ---------- */
.partners{display:grid;gap:var(--space-12)}
@media (min-width:960px){.partners{grid-template-columns:1fr 1.15fr;gap:var(--space-16)}}
.partners .h2{margin:var(--space-3) 0 var(--space-5)}
.checklist{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-4)}
.checklist li{display:flex;gap:var(--space-3);font:var(--type-body-lg);color:var(--text-primary)}
.checklist .icon{color:var(--text-accent);margin-top:var(--space-0-5)}
.checklist-title{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin-top:var(--space-10)}
.partner-list{list-style:none;margin:0;padding:0;border:var(--rule-hairline);border-radius:var(--radius-md);overflow:hidden}
.partner-list li{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5) var(--space-6);background:var(--surface-page)}
.partner-list li + li{border-top:var(--rule-hairline)}
.partner-list .h3{margin-bottom:var(--space-1)}
.note{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border-left:0;border-radius:var(--radius-sm);background:var(--surface-apothecary);font:var(--type-small);color:var(--text-secondary);display:flex;gap:var(--space-3)}
.note .icon{color:var(--text-primary)}

/* ---------- Brand gallery ---------- */
.gallery{display:grid;gap:var(--space-6)}
@media (min-width:720px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-studio)}
.gallery figcaption{margin-top:var(--space-4);font:var(--weight-medium) var(--text-md)/1.3 var(--font-brand);color:var(--text-primary)}
.gallery figcaption span{display:block;margin-top:var(--space-1);font:var(--type-small);color:var(--text-secondary)}

/* ---------- CTA band — the one place coral owns the ground ---------- */
.cta{background:var(--surface-coral);color:var(--text-on-coral);padding:var(--space-20) 0}
.cta__inner{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:960px){.cta__inner{grid-template-columns:auto 1fr auto;gap:var(--space-12)}}
.cta__mark{width:var(--space-16);height:var(--space-16)}
.cta h2{font:var(--weight-light) var(--text-3xl)/1.12 var(--font-brand);color:var(--white);letter-spacing:var(--tracking-tight)}
.cta p{font:var(--type-body-lg);color:rgba(255,255,255,.88);margin-top:var(--space-3);max-width:52ch}

/* ---------- Footer (Chrome.jsx Footer) ---------- */
.site-footer{background:var(--surface-ink);color:var(--white)}
.footer__grid{padding:var(--space-16) 0 var(--space-12);display:grid;gap:var(--space-10)}
@media (min-width:720px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:var(--space-12)}}
.footer__logo{height:var(--space-10);width:auto}
.footer__line{font:var(--type-body);color:var(--text-secondary);margin-top:var(--space-5);max-width:34ch}
.footer__title{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
.footer__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.footer__links li,.footer__links a{font:var(--type-body);color:rgba(255,255,255,.8);border-bottom:0}
.footer__links a:hover{color:var(--white)}
.footer__bottom{border-top:var(--rule-hairline);padding:var(--space-6) 0 var(--space-10);display:grid;gap:var(--space-3);font:var(--type-small);color:var(--text-muted)}
@media (min-width:1024px){.footer__bottom{grid-template-columns:1fr 1fr;gap:var(--space-10)}.footer__bottom p:last-child{text-align:right}}

/* ---------- Motion: fade + short slide, 340ms, no bounce ---------- */
.js .reveal{opacity:0;transform:translateY(var(--space-2));transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{transform:none;transition:opacity var(--duration-slow) linear}
  .btn,.card{transition:none}
  .btn:hover,.btn:active,.card--interactive:hover{transform:none}
}