/* Samaj Dental holding page: The Public Notice. Look v2 tokens value for value from
   Handoff/samaj-site-v2/css/samaj-site.css (SD33); the frame is a Nepali institutional notice (सूचना), the column stays calm. */
@font-face { font-family: 'Onest'; src: url('/fonts/onest-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --blue: #004287; --blue-deep: #002a56; --blue-50: #eef4fb; --blue-100: #dde9f6; --blue-200: #bdd3ee;
  --ink: #111827; --ink-2: #374151; --ink-3: #5b6472; --line: #e9ecf1; --field: #c9d0da; --fill: #f5f7fa;
  --green: #136b3a;
  --font: 'Onest', system-ui, sans-serif;
  --r-s: 9px; --r-m: 12px; --r-l: 16px; --r-xl: 18px;
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--blue);
  --side: 16px;
  --sheet: 880px;
  --ease: cubic-bezier(.16, 1, .3, 1);  /* the guideline's one easing: out quickly, then settle */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: var(--blue-100); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; color: var(--ink); text-wrap: balance; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-s); }
.wrap { max-width: calc(var(--sheet) + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: var(--blue); font-weight: 600; padding: 10px 16px; border-radius: var(--r-m); }
.skip:focus { top: 12px; }
.ln { color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-color: var(--blue-200); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 120ms var(--ease), text-decoration-color 120ms var(--ease); }
.ln:hover { text-decoration-color: var(--blue); }
.ln:active { color: #00305f; text-decoration-color: #00305f; }
.ln .i { width: 15px; height: 15px; vertical-align: -2px; margin-left: 2px; transition: transform 180ms var(--ease); }
.ln:hover .i { transform: translate(1.5px, -1.5px); }
a[href^="tel:"] { white-space: nowrap; }

/* Running head: the clinic's letterhead band. */
.head { position: sticky; top: 0; z-index: 30; background: var(--blue); color: #fff; }
.head .wrap { max-width: 1200px; height: 56px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -0.015em; white-space: nowrap; }
.brand img { height: 26px; width: auto; }
.head .sp { flex: 1; }
.head .st { display: none; font-size: 14px; color: var(--blue-200); }
/* The header call: on phones the guideline's call button, a 44px circle (icon-only buttons are round); from 600px a
   white text button. Hover and pressed extend the board's primary pattern (one step darker, then two) onto white. */
.head .call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--blue); font-weight: 600; font-size: 15px; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.head .call:hover { background: var(--blue-100); color: #003b78; }
.head .call:active { background: var(--blue-200); color: #00305f; }
.brand { transition: opacity 120ms var(--ease); }
.head .brand:hover { opacity: .85; }
.head .call span { display: none; }
.head :focus-visible { box-shadow: 0 0 0 2px var(--blue), 0 0 0 4px #fff; }

/* The notice: a printed sheet of paper on a light blue board. White stock with a fine grain, a double Samaj blue
   frame printed inside the margin, a soft lift and two corner curls; the office stamp is inked onto it. */
.board { isolation: isolate; background: var(--blue-50); padding: 14px 0 36px; }
.board .wrap { padding: 0 10px; }
.paper { position: relative; }
.paper::before, .paper::after { content: ""; position: absolute; z-index: -1; bottom: 16px; width: 44%; height: 30px; box-shadow: 0 18px 16px rgba(17, 24, 39, .2); }
.paper::before { left: 14px; transform: rotate(-2.4deg); }
.paper::after { right: 14px; transform: rotate(2.4deg); }
.sheet { position: relative; padding: 32px 22px 28px; border-radius: 2px; background: #fff url('/img/paper.webp') 0 0 / 320px; box-shadow: 0 1px 1px rgba(17, 24, 39, .08), 0 3px 6px rgba(17, 24, 39, .06), 0 22px 40px -22px rgba(17, 24, 39, .3); }
.sheet::before { content: ""; position: absolute; inset: 8px; border: 2.5px solid var(--blue); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--blue); pointer-events: none; }
.lh { display: grid; justify-items: center; text-align: center; gap: 6px; padding-bottom: 18px; border-bottom: 4px double var(--blue); }
.lh .ne { height: 40px; width: auto; margin-bottom: 4px; }
.lh .org { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.lh .addr { font-size: 14px; color: var(--ink-3); }
.lh .addr .lmk, .lh .addr .sep { display: none; }
.lh .addr .nw { display: block; }
.meta { display: grid; gap: 2px; margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }
.meta b { color: var(--ink); font-weight: 600; }
.sheet h1 { margin: 20px 0 0; text-align: center; font-size: 42px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--blue); }
.sheet h1 + .sub { margin-top: 8px; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.body { max-width: 62ch; margin: 18px auto 0; display: grid; gap: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.body p:first-child { color: var(--ink); }
.sig { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 62ch; margin: 22px auto 0; }
.sig .who { text-align: right; font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.sig .who b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.stamp { width: 112px; height: 112px; flex: none; margin: -6px 0 -6px -6px; transform: rotate(-6deg); opacity: .94; mix-blend-mode: multiply; }
.go { display: flex; justify-content: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--r-m); background: var(--blue); color: #fff; font: 600 16px/1 var(--font); transition: background-color 120ms var(--ease); }
.btn .i { transition: transform 180ms var(--ease); }
.btn:hover .i { transform: translateY(2px); }
.btn:hover { background: #003b78; }
.btn:active { background: #00305f; }

/* Sections after the notice: a heading beside a hand-drawn icon, over a hairline. */
.sec { padding-top: 48px; }
.sh { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sh svg.hd { width: 48px; height: 48px; display: block; }
.sh h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.sh p { margin-top: 3px; font-size: 14.5px; color: var(--ink-3); }

/* Branch telephone directory: every name at one size, numbers on dot leaders like a printed directory. */
.dir { display: grid; gap: 8px 56px; }
.dg { margin-top: 24px; }
.dg h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green); padding-bottom: 6px; }
.dg h3 small { font-size: 13px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.dg ul { list-style: none; margin: 0; padding: 0; }
.br { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.br .nm { line-height: 27px; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.br .dots { margin-top: 18px; border-bottom: 2px dotted var(--field); min-width: 16px; }
.br .tel { display: grid; justify-items: end; font-size: 16.5px; line-height: 27px; }
.br .tel a { font-weight: 600; }
.br .nm { transition: color 120ms var(--ease); }
.br:has(.tel a:hover) .nm { color: var(--blue); }
.br .lm { grid-column: 1 / -1; margin-top: 1px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* Doctor register entry */
.doc { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.doc img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.doc h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.018em; }
.doc p { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.doc .at { color: var(--ink-3); }
.ver { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 14.5px; }
.ver b { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 600; }
.ver b .i { width: 16px; height: 16px; }
.more { padding: 16px 0; font-size: 15px; color: var(--ink-3); border-bottom: 1px solid var(--line); }

/* Footer */
footer { margin-top: 72px; background: var(--blue-deep); color: var(--blue-200); padding: 40px 0 36px; font-size: 14.5px; }
footer .wrap { display: grid; gap: 24px; }
footer .brand { color: #fff; margin-bottom: 10px; }
footer p { line-height: 1.85; }
footer a { color: #fff; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color 120ms var(--ease), color 120ms var(--ease); }
footer a:hover { text-decoration-color: rgba(255, 255, 255, .7); }
footer a:active { color: var(--blue-200); }
footer .lks .i { transition: transform 180ms var(--ease); }
footer .lks a:hover .i { transform: translate(1.5px, -1.5px); }
footer .lks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer .lks a { display: inline-flex; align-items: center; gap: 4px; }
footer .lks .i { width: 15px; height: 15px; color: var(--blue-200); }
footer .end { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 13.5px; }
footer :focus-visible { box-shadow: 0 0 0 2px var(--blue-deep), 0 0 0 4px #fff; }

/* One authored moment, on first load only (guideline 08): the notice rises 12px into place as it fades up, then the
   stamp is pressed onto it. Both start from a visible state; with reduced motion nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .paper { animation: rise 600ms var(--ease) 60ms both; }
  @keyframes rise { from { transform: translateY(12px); opacity: .35; } to { transform: none; opacity: 1; } }
  .stamp { animation: press 700ms var(--ease) 560ms both; }
  @keyframes press { from { transform: rotate(-11deg) scale(1.14); opacity: .4; } to { transform: rotate(-6deg) scale(1); opacity: .94; } }
}

@media (min-width: 600px) {
  :root { --side: 24px; }
  .board { padding: 32px 0 56px; }
  .board .wrap { padding: 0 var(--side); }
  .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 16px; }
  .sheet { padding: 52px 60px 44px; }
  .sheet::before { inset: 16px; }
  .sheet h1 { font-size: 58px; }
  .lh .addr .lmk, .lh .addr .sep { display: inline; }
  .lh .addr .nw { display: inline; }
  .lh .ne { height: 52px; }
  .dir { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .dir .col { display: grid; align-content: start; }
  .sheet h1 + .sub { font-size: 22px; }
  .head .call { width: auto; padding: 0 16px; border-radius: var(--r-m); }
  .head .call span { display: inline; }
  .sig .who { white-space: nowrap; }
  .body { font-size: 17px; }
  .stamp { width: 140px; height: 140px; }
  .doc { grid-template-columns: 88px 1fr; gap: 20px; }
  .doc img { width: 88px; height: 88px; }
  footer .wrap { grid-template-columns: 1.4fr 1fr; align-items: start; }
  footer .end { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  :root { --side: 40px; }
  html { scroll-padding-top: 88px; }
  .head .wrap { height: 64px; gap: 24px; }
  .brand { font-size: 20px; gap: 10px; }
  .brand img { height: 30px; }
  .head .st { display: inline; }
  .board { padding: 28px 0 72px; }
  .sheet { padding: 42px 84px 36px; }
  .sheet::before { inset: 20px; }
  .lh .org { font-size: 20px; }
  .sheet h1 { margin-top: 20px; font-size: 62px; }
  .sig { margin-top: 14px; min-height: 0; }
  .go { margin-top: 16px; padding-top: 18px; }
  .lh { padding-bottom: 14px; }
  .meta { margin-top: 12px; }
  .sheet h1 + .sub { font-size: 24px; }
  .body { font-size: 18px; margin-top: 20px; gap: 10px; }
  .stamp { width: 152px; height: 152px; }
  .sec { padding-top: 80px; }
  .sh h2 { font-size: 28px; }
  .dir { column-gap: 56px; }
  footer { margin-top: 104px; padding: 56px 0 36px; }
}
.nw { white-space: nowrap; }

/* Desktop has no phone: a call link there also copies the number and says so (app.js). */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; margin: 0; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r-m); background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 12px 28px -12px rgba(17, 24, 39, .45); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; }