/* ==================================================================
   December Apparels: Our Services (lookbook / catalogue)
   Identity: a product lookbook: ink cover with product rail,
   then a different composition for each product family.
   ================================================================== */

/* ---------- Hero + rail ---------- */
.svc-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem); overflow: hidden; background-image: radial-gradient(ellipse at 100% 0%, rgba(78,139,177,.3), transparent 50%); }
.svc-hero-grid { display: grid; gap: 1.6rem 4rem; align-items: end; }
@media (min-width: 980px) { .svc-hero-grid { grid-template-columns: 1.3fr .7fr; } }
.svc-hero .crumbs { margin-bottom: 1.6rem; }
.svc-title { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; }
.svc-title em { color: var(--thread); }

.rail { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail ul { list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .9rem; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-bottom: .5rem; }
@media (min-width: 1100px) { .rail ul { grid-auto-columns: 1fr; } }
.rail-item { display: grid; gap: .8rem; text-decoration: none; color: var(--on-ink); }
.rail-plate { aspect-ratio: 1; border-radius: var(--radius-lg); transition: transform .5s var(--ease); }
.rail-plate svg { width: 66%; transition: transform .6s var(--ease); }
.rail-item:hover .rail-plate { transform: translateY(-5px); }
.rail-item:hover .rail-plate svg { transform: scale(1.08) rotate(-3deg); }
.rail-name { font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: .5rem; }
.rail-name::before { content: ""; width: 14px; border-top: 1.5px dashed var(--thread); transition: width .4s var(--ease); }
.rail-item:hover .rail-name::before { width: 26px; }

/* ---------- Shared service typography ---------- */
.svc-group { padding-block: var(--section); }
.group-head { display: grid; gap: 1.1rem; max-width: 720px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.group-head.split { max-width: none; }
@media (min-width: 900px) { .group-head.split { grid-template-columns: 1.2fr .8fr; align-items: end; gap: 3rem; } }
.svc-name { font-family: var(--f-display); font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 400; }
.svc-intro { font-family: var(--f-display); font-style: italic; font-size: 1.22rem; line-height: 1.4; color: var(--steel-2); }
.on-ink .svc-intro { color: var(--thread); }
[id] { scroll-margin-top: 60px; }
.svc-meta { margin: 0; display: grid; gap: 1rem; padding-block: 1.2rem; border-block: 1px dashed var(--line); }
.on-ink .svc-meta { border-color: rgba(159,178,195,.25); }
.svc-meta div { display: grid; gap: .55rem; }
@media (min-width: 560px) { .svc-meta div { grid-template-columns: 100px 1fr; align-items: baseline; } }
.svc-meta dt { color: var(--muted); font-size: .62rem; }
.on-ink .svc-meta dt { color: var(--on-ink-muted); }
.svc-meta dd { margin: 0; }

/* ---------- Apparel: feature + alternating row ---------- */
.apparel { background: var(--paper); }
.svc-feature { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 980px) { .svc-feature { grid-template-columns: 1.1fr .9fr; } }
.svc-feature-plate { border-radius: 260px 260px var(--radius-lg) var(--radius-lg); aspect-ratio: 5 / 5.4; }
.svc-feature-plate svg { width: 70%; }
.svc-feature-plate::before { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 246px 246px 8px 8px; }
.plate-tag { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); padding: .45rem .9rem; background: var(--ink); color: var(--thread); border-radius: 999px; font-size: .62rem; white-space: nowrap; }
.svc-feature-copy, .svc-row-copy { display: grid; gap: 1.2rem; justify-items: start; min-width: 0; }
.svc-feature-copy > p:not(.svc-intro), .svc-row-copy > p:not(.svc-intro) { color: var(--muted); max-width: 58ch; }

.svc-row { display: grid; gap: 2.5rem 4rem; align-items: center; margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding-top: clamp(4rem, 3rem + 4vw, 7rem); border-top: 1.5px dashed var(--thread); }
@media (min-width: 980px) { .svc-row { grid-template-columns: 1fr 1fr; } }
.svc-row-plate { aspect-ratio: 1; border-radius: 50%; max-width: 520px; width: 100%; justify-self: center; }
.svc-row-plate svg { width: 62%; }
.svc-row-plate::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1.5px dashed rgba(14,27,40,.18); }
@media (max-width: 979px) { .svc-row-plate { order: -1; max-width: 380px; } }

/* ---------- Hospitality: duo cards on ink ---------- */
.duo { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-card { display: grid; grid-template-rows: auto 1fr; background: var(--ink-2); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(159,178,195,.14); }
.duo-plate { aspect-ratio: 16 / 10; }
.duo-plate svg { width: 46%; }
.duo-card:first-child .duo-plate { background-color: #23384c; }
.duo-copy { display: grid; gap: 1.1rem; align-content: start; justify-items: start; padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); }
.duo-copy > p:not(.svc-intro) { color: var(--on-ink-muted); }
.duo-copy .svc-meta { width: 100%; }

/* ---------- Merchandise: shelf ---------- */
.merch { background: var(--frost); }
.shelf { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .shelf { grid-template-columns: repeat(3, 1fr); } }
.shelf-item { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.shelf-plate { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); margin-bottom: .6rem; }
.shelf-plate svg { width: 64%; transition: transform .7s var(--ease); }
.shelf-item:hover .shelf-plate svg { transform: translateY(-8px) rotate(-3deg); }
.shelf-item .svc-name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.shelf-item .svc-intro { font-size: 1.05rem; }
.shelf-text { color: var(--muted); font-size: .95rem; }
.shelf-foot { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--line); display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 760px) and (max-width: 1100px) { .shelf-plate { aspect-ratio: 1; } }

/* ---------- Branding methods ---------- */
.methods { padding-block: var(--section); background: var(--paper); }
.methods-grid { display: grid; gap: 3rem 5rem; }
@media (min-width: 1000px) { .methods-grid { grid-template-columns: .8fr 1.2fr; align-items: start; } .methods-head { position: sticky; top: 120px; } }
.methods-head { display: grid; gap: 1.1rem; }
.methods-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 640px) { .methods-list { grid-template-columns: 1fr 1fr; } }
.methods-list li { background: var(--paper); padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); display: grid; gap: .8rem; align-content: start; }
.methods-list p { color: var(--muted); font-size: .95rem; }
.method-swatch { width: 72px; height: 72px; border-radius: 12px; margin-bottom: .6rem; position: relative; overflow: hidden; }
.sw-print { background: radial-gradient(circle, var(--steel) 2.2px, transparent 2.6px) 0 0 / 9px 9px, #dbe6ee; }
.sw-embroidery { background: repeating-linear-gradient(60deg, var(--thread) 0 3px, var(--thread-2) 3px 4px, var(--thread) 4px 7px); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--thread); }
.sw-shape { background: var(--ink); }
.sw-shape::after { content: ""; position: absolute; inset: 14px; background: var(--steel); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.sw-place { background: #dbe6ee; }
.sw-place::before { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; bottom: 10px; background: var(--paper); border-radius: 6px 6px 2px 2px; }
.sw-place::after { content: ""; position: absolute; left: 40px; top: 24px; width: 10px; height: 10px; border-radius: 2px; background: var(--thread); outline: 1.5px dashed var(--ink); outline-offset: 2px; }
@media (max-width: 759px) { .shelf-plate { aspect-ratio: 4 / 3; } }

/* ---------- Floating product bar ----------
   Hidden while the hero rail is on screen (the rail already does this job),
   then floats in as a pill once the visitor scrolls into the catalogue. */
.svc-jump {
  position: fixed; z-index: 40; left: 50%; top: calc(84px + env(safe-area-inset-top, 0px));
  width: max-content; max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 6px; border-radius: 999px;
  background: rgba(14,27,40,.9); border: 1px solid rgba(159,178,195,.22);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 40px -18px rgba(14,27,40,.6);
  opacity: 0; transform: translate(-50%, -14px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease), top .45s var(--ease);
}
.jump-on .svc-jump { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.header-tucked .svc-jump { top: calc(14px + env(safe-area-inset-top, 0px)); }
.svc-jump .wrap { padding: 0; max-width: none; }
.svc-jump ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
.svc-jump ul::-webkit-scrollbar { display: none; }
.svc-jump a {
  display: block; padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-size: .82rem; font-weight: 500; color: var(--on-ink-muted); transition: color .3s, background .3s;
}
.svc-jump a:hover { color: var(--on-ink); background: rgba(255,255,255,.06); }
.svc-jump a.is-active { color: var(--ink); background: var(--thread); }
@media (max-width: 960px) { .svc-jump { top: calc(84px + env(safe-area-inset-top, 0px)); } }
[id] { scroll-margin-top: 60px; }