/* ==========================================================================
   Swisshub Corp Limited — page sections
   ========================================================================== */

/* ------------------------------------------------------------------- Hero */

.hero{
  padding-top:clamp(8.5rem,14vw,12rem);
  padding-bottom:clamp(3.5rem,7vw,6.5rem);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.hero h1{ margin-bottom:0; }
.hero .hl{ display:block; overflow:hidden; }
.hero .hl > span{ display:block; }
.hero-rule{
  width:5.5rem; height:2px; background:var(--brass);
  margin:clamp(1.75rem,3vw,2.5rem) 0 clamp(1.5rem,2.5vw,2rem);
}
.hero-lede{ margin-bottom:clamp(2rem,3.5vw,2.75rem); }
.hero-media{ position:relative; margin-top:.5rem; }
.hero-media .frame{ aspect-ratio:3/3.9; }
.hero-badge{
  position:absolute;
  left:calc(-1 * clamp(1rem,2.5vw,2.75rem));
  bottom:clamp(1.75rem,4vw,3rem);
  background:var(--paper);
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,1.85rem);
  max-width:15.5rem;
  border-left:2px solid var(--brass);
}
.hero-badge .t{
  font-family:var(--display);
  font-size:1.375rem;
  line-height:1.15;
  letter-spacing:-.02em;
  display:block;
  margin-bottom:.4rem;
}
.hero-badge .s{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Marquee-free ticker of service lines under hero */
.hero-foot{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.hero-foot div{
  padding:1.5rem 1.75rem 0 0;
  border-right:1px solid var(--line);
}
.hero-foot div:last-child{ border-right:0; }
.hero-foot div:not(:first-child){ padding-left:1.75rem; }
.hero-foot .n{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em;
  color:var(--brass); display:block; margin-bottom:.6rem;
}
.hero-foot .v{
  font-family:var(--display); font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);
  letter-spacing:-.015em; line-height:1.25;
}

/* ------------------------------------------------------------- Spine (3 steps) */

.spine{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.ink-panel .spine{ border-top-color:var(--line-dk); }
.spine-item{
  padding:clamp(2rem,3.5vw,3rem) clamp(1.5rem,2.5vw,2.75rem) clamp(2rem,3.5vw,3rem) 0;
  border-right:1px solid var(--line);
  position:relative;
}
.ink-panel .spine-item{ border-right-color:var(--line-dk); }
.spine-item:last-child{ border-right:0; padding-right:0; }
.spine-item:not(:first-child){ padding-left:clamp(1.5rem,2.5vw,2.75rem); }
.spine-item::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0;
  height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--ease-out);
}
.spine-item:hover::before{ transform:scaleX(1); }
.spine-item .idx{ display:block; margin-bottom:1.1rem; }
.spine-item h3{ margin-bottom:.85rem; }
.spine-item p{ color:var(--muted); font-size:.9375rem; }
.ink-panel .spine-item p{ color:#A8B0B6; }

/* --------------------------------------------------------- Section headers */

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
  margin-bottom:clamp(2.75rem,5vw,4.5rem);
}
.sec-head--single{ grid-template-columns:1fr; max-width:48rem; }
.sec-head .r{ padding-bottom:.35rem; }

/* ------------------------------------------------------- Service row blocks */

.srow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding-block:clamp(2.75rem,5vw,4.5rem);
  border-top:1px solid var(--line);
}
.srow:last-of-type{ border-bottom:1px solid var(--line); }
.srow--flip .srow-media{ order:2; }
.srow-body{ position:relative; }
.srow-top{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-bottom:1.25rem;
}
.srow-body h2,
.srow-body h3{ margin-bottom:1.1rem; }
.srow-list{
  list-style:none; margin:1.75rem 0 1.9rem; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 1.75rem;
}
.srow-list li{
  font-size:.875rem; color:var(--muted);
  padding-left:1.1rem; position:relative;
}
.srow-list li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:1px; background:var(--brass);
}
.srow-media .frame{ aspect-ratio:4/3.1; }

/* Big ghost numeral */
.ghost{
  font-family:var(--display);
  font-size:clamp(4rem,9vw,7.5rem);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--line);
  letter-spacing:-.04em;
  pointer-events:none;
  user-select:none;
}
.ink-panel .ghost{ -webkit-text-stroke-color:rgba(247,245,242,.18); }

/* --------------------------------------------------------------- Statement */

.statement{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.statement blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.65rem,1.1rem + 2.3vw,3rem);
  line-height:1.18;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.statement blockquote .hi{ color:var(--brass-br); font-style:italic; }
.statement-side{ padding-top:.5rem; }
.statement-side dl{ margin:0; }
.statement-side dt{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-br); padding-top:1.4rem;
  border-top:1px solid var(--line-dk); margin-bottom:.6rem;
}
.statement-side dt:first-child{ border-top:0; padding-top:0; }
.statement-side dd{ margin:0 0 1.6rem; color:#A8B0B6; font-size:.9375rem; }
.statement-side dd:last-child{ margin-bottom:0; }

/* -------------------------------------------------------------- Facts strip */

.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ink-panel .facts{ border-color:var(--line-dk); }
.fact{
  padding:clamp(1.75rem,3vw,2.5rem) 1.5rem clamp(1.75rem,3vw,2.5rem) 0;
  border-right:1px solid var(--line);
}
.ink-panel .fact{ border-right-color:var(--line-dk); }
.fact:last-child{ border-right:0; }
.fact:not(:first-child){ padding-left:clamp(1.25rem,2.4vw,2.25rem); }
.fact .k{
  font-family:var(--display);
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  line-height:1;
  letter-spacing:-.025em;
  display:block;
  margin-bottom:.7rem;
}
.fact .d{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.ink-panel .fact .d{ color:var(--muted-dk); }

/* ---------------------------------------------------------------- List grid */

.lgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5rem);
}
.litem{
  display:flex; gap:1.5rem; align-items:flex-start;
  padding-block:1.4rem;
  border-top:1px solid var(--line);
}
.ink-panel .litem{ border-top-color:var(--line-dk); }
.litem .idx{ padding-top:.3rem; flex:none; }
.litem h4{ font-size:1.0625rem; font-family:var(--sans); font-weight:600; letter-spacing:0; margin-bottom:.35rem; line-height:1.4; }
.litem p{ color:var(--muted); font-size:.9375rem; margin:0; }
.ink-panel .litem p{ color:#A8B0B6; }

/* ------------------------------------------------------------------- Steps */

.steps{ display:grid; gap:0; }
.step{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line);
  align-items:start;
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step h4{ font-family:var(--display); font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); letter-spacing:-.02em; line-height:1.2; }
.step p{ color:var(--muted); margin:0; }

/* --------------------------------------------------------------- CTA band */

.cta{ position:relative; }
.cta-inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.cta-mail{
  font-family:var(--display);
  font-size:clamp(1.3rem,.95rem + 1.6vw,2.1rem);
  letter-spacing:-.022em;
  text-decoration:none;
  color:var(--paper);
  display:inline-block;
  position:relative;
  padding-bottom:.35rem;
  word-break:break-word;
}
.cta-mail::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--brass-br);
  transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.cta-mail:hover::after{ transform:scaleX(0); transform-origin:right; }

/* ------------------------------------------------------------ Page headers */

.phead{
  padding-top:clamp(8.5rem,13vw,11rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.phead-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
}
.crumb{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.75rem;
  display:flex; gap:.6rem; align-items:center;
}
.crumb a{ text-decoration:none; color:var(--muted); transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--brass); }
.crumb span{ color:var(--line); }

/* ------------------------------------------------- Services page: index nav */

.svc-layout{
  display:grid;
  grid-template-columns:15rem minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.svc-index{ position:sticky; top:7.5rem; }
.svc-index ol{ list-style:none; margin:0; padding:0; }
.svc-index li{ border-top:1px solid var(--line); }
.svc-index li:last-child{ border-bottom:1px solid var(--line); }
.svc-index a{
  display:flex; gap:.9rem; align-items:baseline;
  padding:.95rem 0;
  text-decoration:none;
  font-size:.9375rem;
  color:var(--muted);
  transition:color .3s var(--ease), padding-left .4s var(--ease-out);
}
.svc-index a:hover,
.svc-index a.is-active{ color:var(--ink); padding-left:.55rem; }
.svc-index a.is-active .idx{ color:var(--brass); }
.svc-index .idx{ color:var(--line); transition:color .3s var(--ease); }

.svc-block{ padding-bottom:clamp(3rem,7vw,6rem); }
.svc-block + .svc-block{ padding-top:clamp(3rem,7vw,5.5rem); border-top:1px solid var(--line); }
.svc-block h2{ margin-bottom:1.4rem; }
.svc-block .frame{ margin:clamp(2rem,4vw,3rem) 0; }
.svc-deliver{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,4vw,3.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.svc-deliver > div{
  padding-block:1.15rem;
  border-top:1px solid var(--line);
}
.svc-deliver h5{
  margin:0 0 .3rem; font-family:var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:0;
}
.svc-deliver p{ margin:0; font-size:.875rem; color:var(--muted); }

/* ------------------------------------------------------------------- Prose */

.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem); margin:clamp(2.25rem,4vw,3rem) 0 1rem; }
.prose h3{ font-family:var(--sans); font-weight:600; font-size:1.0625rem; letter-spacing:0; margin:2rem 0 .65rem; }
.prose p{ color:var(--ink-soft); }
.prose ul{ margin:0 0 1.3em; padding-left:1.1rem; color:var(--ink-soft); }
.prose li{ margin-bottom:.5rem; }
.prose li::marker{ color:var(--brass); }
.prose a{ color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(169,124,63,.4); }
.prose a:hover{ border-color:var(--brass); }
.prose-meta{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:1.5rem; border-bottom:1px solid var(--line); margin-bottom:2.5rem;
}

/* ------------------------------------------------------------------- Forms */

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.form{ display:grid; gap:1.9rem; }
.field{ display:grid; gap:.55rem; }
.field label{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.field input,
.field select,
.field textarea{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:.65rem 0;
  border-radius:0;
  transition:border-color .35s var(--ease);
  width:100%;
}
.field select{ cursor:pointer; appearance:none; background-image:none; }
.field textarea{ resize:vertical; min-height:7rem; line-height:1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--brass); }
.field input::placeholder,
.field textarea::placeholder{ color:#AEB4B9; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.9rem; }
.form-note{ font-size:.8125rem; color:var(--muted); }
.form-note a{ color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(169,124,63,.4); }

.contact-side dl{ margin:0; }
.contact-side dt{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
  border-top:1px solid var(--line); padding-top:1.35rem; margin-bottom:.65rem;
}
.contact-side dd{ margin:0 0 1.75rem; color:var(--ink-soft); line-height:1.7; }
.contact-side dd a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid rgba(169,124,63,.45); }
.contact-side dd a:hover{ color:var(--brass); }

/* --------------------------------------------------------------- Reveals */

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal="line"]{ transform:none; opacity:1; }
[data-reveal="line"] > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal="line"].is-in > span{ transform:none; }

/* The clip is applied to the .frame INSIDE the observed element, never to the
   observed element itself: clipping a target to zero area makes
   IntersectionObserver report it as not intersecting, and it would never reveal. */
[data-reveal="wipe"]{ opacity:1; transform:none; }
[data-reveal="wipe"] .frame{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal="wipe"].is-in .frame{ clip-path:inset(0 0 0 0); }

/* ---------------------------------------------------------------- Responsive */

@media (max-width:1180px){
  .foot-grid{ grid-template-columns:1.4fr 1fr 1.25fr; }
  .foot-brand{ grid-column:1 / -1; }
  .svc-layout{ grid-template-columns:12rem minmax(0,1fr); }
}

@media (max-width:1000px){
  .nav, .head-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .site-head.is-open::before{ opacity:1; }
  /* Full-height drawer. The brand and the toggle stay above it so the header
     still reads as a header while the menu is open. */
  .brand, .head-cta{ position:relative; z-index:2; }
  .nav.is-open{
    display:flex;
    position:fixed;
    inset:0;
    z-index:1;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--paper);
    padding:6.25rem var(--gutter) 2.5rem;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav.is-open a:not(.btn){
    width:100%;
    padding:1.15rem 0;
    border-bottom:1px solid var(--line);
    font-size:1.125rem;
  }
  .nav.is-open a:not(.btn):first-of-type{ border-top:1px solid var(--line); }
  .nav.is-open a::after{ display:none; }
  .nav.is-open .btn{
    display:inline-flex;
    width:100%;
    justify-content:space-between;
    margin-top:2rem;
    padding:1.15rem 1.5rem;
    font-size:.75rem;
    color:var(--paper);   /* beats the .nav a colour above */
  }
  .nav.is-open .btn:hover{ color:#fff; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ max-width:30rem; }
  .hero-media .frame{ aspect-ratio:4/3.4; }
  .hero-badge{ left:auto; right:clamp(1rem,3vw,2rem); }

  .statement{ grid-template-columns:1fr; }
  .cta-inner{ grid-template-columns:1fr; }
  .svc-layout{ grid-template-columns:1fr; }
  .svc-index{ position:static; }
  .svc-index ol{ display:grid; grid-template-columns:repeat(3,1fr); }
  .svc-index li{ border-bottom:1px solid var(--line); }
  .contact-layout{ grid-template-columns:1fr; }
  .phead-grid{ grid-template-columns:1fr; align-items:start; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:820px){
  .spine, .facts, .hero-foot{ grid-template-columns:1fr; }
  .spine-item, .fact, .hero-foot div{
    border-right:0 !important;
    border-bottom:1px solid var(--line);
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .ink-panel .spine-item, .ink-panel .fact{ border-bottom-color:var(--line-dk); }
  .spine-item:last-child, .fact:last-child, .hero-foot div:last-child{ border-bottom:0; }
  .hero-foot div{ padding-block:1.25rem; }

  .srow{ grid-template-columns:1fr; gap:2rem; }
  .srow--flip .srow-media{ order:0; }
  .lgrid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:.85rem; }
  .svc-deliver{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  .srow-list{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .svc-index ol{ grid-template-columns:1fr; }
  .hero-badge{ position:static; max-width:none; margin-top:1.25rem; padding-inline:1.25rem; }
  .btn{ width:100%; justify-content:space-between; }
  .btn-row{ gap:.85rem; }
  .nav.is-open .btn{ width:100%; }
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] .frame{ clip-path:none !important; }
  [data-reveal="line"] > span{ transform:none !important; }
}

/* ------------------------------------------------------------------ Print */

@media print{
  .site-head,.nav-toggle,.cta,.frame::after{ display:none !important; }
  body{ background:#fff; color:#000; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] .frame{ clip-path:none !important; }
}