/* ============================================================
   ROLLEX — INNER PAGE styles (products, category, detail, about, contact)
   ============================================================ */

.pagehero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--nav-h) + 3.5rem) 0 3.5rem;
  background: radial-gradient(1000px 600px at 85% -20%, var(--accent-soft) 0%, transparent 55%), linear-gradient(180deg, #FFFFFF, var(--mist));
}
.pagehero__lines { position:absolute; inset:0; opacity:.6;
  background-image: radial-gradient(rgba(26,26,26,.05) 1px, transparent 1px);
  background-size:26px 26px; mask-image: radial-gradient(80% 80% at 70% 20%,#000 30%,transparent 100%); }
.pagehero__web { position:absolute; left:0; bottom:0; width:100%; height:120px; color: rgba(227,30,36,.14); }
.pagehero__inner { position:relative; }

/* Premium photo-background variant — used on About only, so this
   photo (already the hero-slide + Machine Range image) doesn't
   repeat across every inner page that shares .pagehero. */
.pagehero--photo {
  background:
    linear-gradient(90deg, var(--wash) 0%, var(--wash) 38%, rgba(250,250,250,.82) 54%, rgba(250,250,250,.25) 72%, transparent 88%),
    radial-gradient(1000px 600px at 85% -20%, var(--accent-soft) 0%, transparent 55%),
    url('../assets/img/hero/hero-rotogravure.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: left top, left top, right 15%;
}
.pagehero--photo .pagehero__lines { mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .pagehero--photo {
    background:
      linear-gradient(180deg, var(--wash) 0%, var(--wash) 62%, rgba(250,250,250,.55) 80%, transparent 100%),
      url('../assets/img/hero/hero-rotogravure.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%, cover;
    background-position: left top, center 30%;
  }
}
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--slate); margin-bottom:1.4rem; flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb svg { width:14px; height:14px; opacity:.5; color:var(--slate); }
.pagehero h1 { font-size: clamp(2rem,4.5vw,3.2rem); color:var(--ink); max-width: 20ch; }
.pagehero p { color:var(--slate); max-width: 56ch; font-size: clamp(1rem,1.5vw,1.15rem); }
.pagehero__meta { display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.pagehero__meta div strong { font-family:"Plus Jakarta Sans"; color:var(--accent); font-size:1.4rem; display:block; line-height:1; }
.pagehero__meta div span { font-size:.8rem; color:var(--slate); }

/* Product grid + cards */
.product-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.prod-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color:transparent; }
.prod-card__media { aspect-ratio:16/10; position:relative; background:var(--mist); overflow:hidden; }
.prod-card__media svg.rollers { position:absolute; inset:0; width:100%; height:100%; }

/* Real product photography — used in place of the old abstract SVG
   illustrations wherever a category has a real photo (assets/img/hero/). */
/* .media-photo / .media-placeholder moved to base.css so every page
   that uses them (home.html included) actually loads their CSS */

.prod-card__badge { position:absolute; top:.9rem; left:.9rem; font-size:.7rem; font-weight:600; color:#fff; background:rgba(37,99,235,.9); padding:.28rem .6rem; border-radius:999px; }
.prod-card__body { padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.prod-card__body h3 { font-size:1.15rem; margin-bottom:.35rem; }
.prod-card__short { color:var(--slate); font-size:.9rem; margin-bottom:1rem; }
.prod-card__specs { display:flex; gap:1.2rem; margin-bottom:1rem; }
.prod-card__specs div span { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); }
.prod-card__specs div strong { font-family:"Inter"; font-size:.92rem; color:var(--ink); display:block; }
.prod-card__feats { list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.35rem; flex:1; }
.prod-card__feats li { display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:var(--slate); }
.prod-card__feats svg { width:14px; height:14px; color:var(--accent); flex:none; margin-top:3px; }
.prod-card__cta { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--accent); font-size:.9rem; }
.prod-card__cta svg { width:16px; height:16px; transition:transform .3s; }
.prod-card:hover .prod-card__cta svg { transform: translateX(4px); }

/* Filter bar */
.filterbar { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-chip { padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--line); background:var(--paper); font-weight:500; font-size:.9rem; color:var(--steel); transition:.2s; }
.filter-chip:hover { border-color:var(--ink); }
.filter-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Category hub cards (products.html) */
.hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.hub-card { display:grid; grid-template-columns: 150px 1fr; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.hub-card:hover { transform: translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.hub-card__media { position:relative; background:var(--mist); }
.hub-card__media svg { position:absolute; inset:0; width:100%; height:100%; }
.hub-card__ic { position:absolute; inset:0; display:grid; place-items:center; color:#fff; }
.hub-card__ic svg { position:static; width:34px; height:34px; }
.hub-card__body { padding:1.4rem; }
.hub-card__body h3 { font-size:1.15rem; margin-bottom:.35rem; }
.hub-card__body p { color:var(--slate); font-size:.88rem; margin-bottom:.8rem; }
.hub-card__fams { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.hub-card__fams span { font-size:.72rem; color:var(--accent); background:rgba(37,99,235,.08); padding:.22rem .55rem; border-radius:6px; }
.hub-card__link { font-weight:600; color:var(--accent); font-size:.88rem; display:inline-flex; gap:.35rem; align-items:center; }

/* Detail: layout */
.detail-top { display:grid; grid-template-columns: 1.15fr .85fr; gap:3rem; align-items:start; }
.gallery-main { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--mist); position:relative; box-shadow:var(--shadow); }
.gallery-main svg { position:absolute; inset:0; width:100%; height:100%; }
.gallery-badge { position:absolute; top:1rem; left:1rem; display:flex; gap:.5rem; }
.gallery-badge span { font-size:.72rem; font-weight:600; color:var(--ink); background:var(--glass); backdrop-filter:blur(6px); border:1px solid var(--line); padding:.3rem .7rem; border-radius:999px; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:.8rem; }
.gallery-thumb { aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--mist); border:2px solid transparent; cursor:pointer; position:relative; }
.gallery-thumb.active { border-color:var(--accent); }
.gallery-thumb svg { position:absolute; inset:0; width:100%; height:100%; }

.detail-aside { position:sticky; top:calc(var(--nav-h) + 1rem); }
.detail-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm); }
.detail-card h1 { font-size:1.7rem; margin-bottom:.4rem; }
.detail-card .cat-tag { font-size:.75rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.detail-quickspecs { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1.2rem 0 1.4rem; }
.detail-quickspecs .spec span { font-size:.68rem; display:flex; align-items:center; gap:.35rem; }
.detail-quickspecs .spec span svg { flex:none; }
.detail-actions { display:grid; gap:.6rem; }
.detail-downloads { display:flex; gap:.6rem; margin-top:.6rem; }
.detail-downloads .btn { flex:1; justify-content:center; }

/* Spec table */
.spec-table { width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.spec-table th, .spec-table td { text-align:left; padding:.9rem 1.2rem; border-bottom:1px solid var(--line); font-size:.92rem; }
.spec-table th { background:var(--mist); width:40%; font-family:"Inter"; color:var(--ink); font-weight:600; }
.spec-table td { color:var(--slate); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom:none; }

/* Tabs */
.tabs { display:flex; gap:.4rem; border-bottom:1px solid var(--line); margin-bottom:2rem; overflow-x:auto; }
.tab { padding:.85rem 1.2rem; background:none; border:none; border-bottom:2px solid transparent; font-weight:600; color:var(--slate); font-size:.95rem; white-space:nowrap; transition:.2s; margin-bottom:-1px; }
.tab.active { color:var(--ink); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation: fadeUp .4s var(--ease); }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.feat-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.feat-list li { display:flex; gap:.7rem; align-items:flex-start; padding:1rem 1.2rem; background:var(--mist); border-radius:var(--r); border:1px solid var(--line); }
.feat-list svg { width:20px; height:20px; color:var(--accent); flex:none; }
.feat-list strong { display:block; font-size:.95rem; color:var(--ink); font-family:"Plus Jakarta Sans"; }

.video-ph { aspect-ratio:16/9; border-radius:var(--r-lg); background:var(--mist); display:grid; place-items:center; position:relative; overflow:hidden; }
.video-ph__play { width:74px; height:74px; border-radius:999px; background:var(--cta); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .3s var(--ease); }
.video-ph:hover .video-ph__play { transform:scale(1.08); }
.video-ph__play svg { width:28px; height:28px; margin-left:3px; }

/* Forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field.full { grid-column:1/-1; }
.field label { font-size:.85rem; font-weight:600; color:var(--steel); }
.field input, .field select, .field textarea {
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm); font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.field textarea { resize:vertical; min-height:120px; }

/* Contact split */
.contact-split { display:grid; grid-template-columns: 1fr 1.1fr; gap:3rem; align-items:start; }
.contact-info { display:grid; gap:1.2rem; }
.contact-item { display:flex; gap:1rem; padding:1.3rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }
.contact-item__ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(37,99,235,.1); color:var(--accent); flex:none; }
.contact-item__ic svg { width:22px; height:22px; }
.contact-item strong { font-family:"Inter"; color:var(--ink); display:block; margin-bottom:.2rem; }
.contact-item span, .contact-item a { color:var(--slate); font-size:.92rem; }
.contact-item a:hover { color:var(--accent); }
.map-ph { aspect-ratio:16/7; border-radius:var(--r-lg); overflow:hidden; background:var(--mist); position:relative; margin-top:2.5rem; display:grid; place-items:center; }
.map-ph svg.grid { position:absolute; inset:0; width:100%; height:100%; opacity:.4; }
.map-ph__pin { position:relative; z-index:2; text-align:center; color:var(--ink); }
.map-ph__pin svg { width:40px; height:40px; color:var(--cta); margin-bottom:.5rem; }

/* About specific */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.value-card { padding:1.6rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.value-card h3 { font-size:1.1rem; margin-bottom:.4rem; }
.value-card p { color:var(--slate); font-size:.9rem; margin:0; }
.value-card__n { font-family:"Inter"; font-weight:700; color:var(--accent); font-size:.9rem; }
.timeline-v { position:relative; padding-left:2rem; }
.timeline-v::before { content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--line); }
.timeline-v__item { position:relative; padding-bottom:2rem; }
.timeline-v__item::before { content:""; position:absolute; left:-2rem; top:5px; width:14px; height:14px; border-radius:999px; background:var(--accent); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line); }
.timeline-v__yr { font-family:"Plus Jakarta Sans"; font-weight:700; color:var(--accent); }
.timeline-v__item h3 { font-size:1.15rem; margin:.2rem 0 .4rem; }
.timeline-v__item p { color:var(--slate); margin:0; }

.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

@media (max-width: 900px) {
  .product-grid, .hub-grid, .related-grid, .values-grid, .feat-list { grid-template-columns: 1fr; }
  .detail-top, .contact-split { grid-template-columns: 1fr; }
  .detail-aside { position:static; }
  .form-grid { grid-template-columns:1fr; }
  .hub-card { grid-template-columns: 110px 1fr; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns:1fr; }
  .gallery-thumbs { grid-template-columns:repeat(4,1fr); }
  .detail-quickspecs { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Shared "illustrated visual card" — used by about.html's
   company-overview section (simple SVG + quote-card overlay).
   Fixes a pre-existing bug: about.html referenced these classes
   but never loaded a stylesheet that defined them.
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.overview__visual { border-radius: var(--r-xl); overflow:hidden; aspect-ratio: 5/4; position:relative;
  background: var(--mist); border:1px solid var(--line); box-shadow: var(--shadow); }
.overview__visual svg { position:absolute; inset:0; width:100%; height:100%; }
.overview__visual--photo { aspect-ratio: 2/3; }
.overview__visual--photo img { width:100%; height:100%; object-fit:cover; display:block; }
.overview__ceo { position:absolute; left:1.2rem; bottom:1.2rem; right:1.2rem; background: var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius: var(--r); padding:1.1rem 1.3rem; }
.overview__ceo p { font-style:italic; color: var(--steel); margin:0 0 .6rem; font-size:.95rem; }
.overview__ceo strong { font-family:"Plus Jakarta Sans"; color:var(--ink); font-size:.9rem; }
.overview__ceo span { color:var(--slate); font-size:.8rem; }