/* ==========================================================================
   Hyderabadi Swaad — concept site stylesheet

   NOT A TIER DEMO. A Standard-tier build made for a real business, Hyderabadi
   Swaad of Brantford, Ontario, to be shown to them. The restaurant has no
   website; it exists online only as delivery-platform listings.

   ORPHAN BRANCH. No shared history with `main` or any other concept.

   WHY IT LOOKS LIKE THIS. The jeweller got paper and a quiet serif, the pool
   room baize, the dive bar gig-poster red, the sweet shop cream and grape. This
   is a biryani house open past midnight, so it is warm and dark: charred near-
   black, cream, a deep saffron that carries text and a turmeric that does not.
   A prospect who can tell he got a template feels like one of a list.

   THE PROBLEM THIS FIXES. Every ordering route this restaurant has belongs to
   somebody else. UberEats, DoorDash and a Clover page take a cut of every order
   and own the customer relationship; the restaurant's own name earns nothing
   from it. Catering — the highest-margin thing a biryani kitchen sells — has no
   route at all, because you cannot enquire about a wedding order through a
   delivery app.

   CONTRAST — measured, not assumed.

   LIGHT GROUND (--cream #FDF6EC), most of the site:
     --char        #1A1210   17.2:1   body text
     --ink-soft    #4E423C    8.0:1   muted text
     --saffron-ink #A83208    6.3:1   links, headings, accent text
     white on --saffron-ink   6.7:1   primary button

   DARK GROUND (--char #1A1210):
     --cream       #FDF6EC   17.2:1   body text
     --cream-soft  #C4B8AC    9.6:1   muted text
     --turmeric    #F59E0B    8.6:1   accent text and links
     #FFFFFF                 18.1:1   headings

   --turmeric is 8.6:1 on the dark ground and only 2.0:1 on cream. Its text use
   is scoped to dark sections. --saffron-ink is the reverse. Both are scoped by
   parent class rather than trusting a future edit to remember which ground it
   is standing on.

   PLACEHOLDERS ARE THE ARGUMENT. Public sources give a name, an address, a
   phone number, an email, a full set of opening hours, that the kitchen is
   halal, and the broad kinds of food served. NOT ONE DISH OR PRICE IS NAMED
   ANYWHERE ON THIS SITE, because the menu is only published inside third-party
   apps and transcribing it from a delivery platform would mean shipping prices
   that are inflated by that platform's commission. That would be worse than
   blank. Do not "finish" these by copying from UberEats.
   ========================================================================== */

:root {
  --char: #1A1210; --char-deep: #120C0B; --char-raise: #241A17; --char-line: #3A2C26;
  --cream: #FDF6EC; --cream-alt: #F5EADA; --cream-soft: #C4B8AC;
  --ink-soft: #4E423C; --border: #E6D8C6; --border-firm: #D2BFA8;
  --saffron-ink: #A83208; --turmeric: #F59E0B; --leaf: #4D7C0F;
  --font-display: "Bitter", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2,0.7,0.3,1); --radius: 6px; --shell: 1180px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--char); font-family:var(--font-body); font-size:17px; line-height:1.68; }

h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.14; margin:0 0 0.45em; color:var(--char); letter-spacing:-0.01em; }
h1 { font-size:clamp(2.4rem,1.4rem+4.2vw,4.2rem); }
h2 { font-size:clamp(1.85rem,1.2rem+2.7vw,2.9rem); }
h3 { font-size:1.32rem; }
h4 { font-family:var(--font-body); font-size:1.02rem; font-weight:700; margin:0 0 0.4em; color:var(--char); }
p { margin:0 0 1.1em; } p:last-child { margin-bottom:0; }
a { color:var(--saffron-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid var(--saffron-ink); outline-offset:3px; border-radius:3px; }

.container { width:min(100% - 40px, var(--shell)); margin-inline:auto; }
.container--narrow { width:min(100% - 40px, 780px); margin-inline:auto; }
.skip-link { position:absolute; left:12px; top:-64px; z-index:200; background:var(--saffron-ink); color:#fff; padding:12px 20px; border-radius:var(--radius); font-weight:700; transition:top 0.2s var(--ease); }
.skip-link:focus { top:12px; color:#fff; text-decoration:none; }

.eyebrow { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:0.73rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--saffron-ink); margin:0 0 15px; }
.eyebrow::before { content:""; width:24px; height:3px; background:var(--turmeric); }
.eyebrow--center { justify-content:center; }
.section--char .eyebrow, .hero .eyebrow, .page-head .eyebrow { color:var(--turmeric); }
.section-head { max-width:670px; margin-bottom:clamp(28px,4.5vw,50px); }
.section-head--center { margin-inline:auto; text-align:center; }
.lede { font-size:clamp(1.04rem,1rem+0.4vw,1.2rem); color:var(--ink-soft); }
.section--char .lede { color:var(--cream-soft); }

/* Blanks — two variants, one per ground */
.tbc { background:rgba(168,50,8,0.09); border-bottom:2px dashed var(--turmeric); color:var(--saffron-ink); padding:0 4px; font-style:italic; }
.section--char .tbc, .tbc-block--dark .tbc { background:rgba(245,158,11,0.16); color:var(--turmeric); border-bottom-color:var(--turmeric); }
.tbc-block { border:2px dashed var(--turmeric); background:rgba(245,158,11,0.08); border-radius:var(--radius); padding:clamp(20px,3vw,32px); }
.tbc-block--dark { background:rgba(245,158,11,0.08); }
.tbc-block__tag { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--saffron-ink); margin-bottom:13px; }
.tbc-block--dark .tbc-block__tag { color:var(--turmeric); }
.tbc-block__tag svg { width:15px; height:15px; }
.tbc-block h3 { font-size:1.14rem; margin-bottom:9px; }
.tbc-block--dark h3 { color:#fff; }
.tbc-block p { color:var(--ink-soft); font-size:0.97rem; }
.tbc-block--dark p { color:var(--cream-soft); }
.tbc-block ul { margin:12px 0 0; padding-left:20px; color:var(--ink-soft); font-size:0.95rem; }
.tbc-block--dark ul { color:var(--cream-soft); }
.tbc-block li { margin-bottom:6px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:0.95rem; letter-spacing:0.03em; line-height:1; padding:16px 30px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; white-space:nowrap; transition:background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.16s var(--ease); }
.btn svg { width:17px; height:17px; flex:none; }
.btn--lg { padding:18px 34px; font-size:1rem; }
.btn--primary { background:var(--saffron-ink); color:#fff; }
.btn--primary:hover { background:#832506; color:#fff; text-decoration:none; transform:translateY(-2px); }
.btn--cream { background:var(--cream); color:var(--char); }
.btn--cream:hover { background:#fff; color:var(--char); text-decoration:none; transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--char); border-color:var(--border-firm); }
.btn--ghost:hover { border-color:var(--char); color:var(--char); text-decoration:none; transform:translateY(-2px); }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,0.45); }
.btn--outline-light:hover { border-color:#fff; color:#fff; text-decoration:none; transform:translateY(-2px); }
.btn-row { display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center { justify-content:center; }

.site-header { position:sticky; top:0; z-index:100; background:rgba(253,246,236,0.95); backdrop-filter:blur(9px); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; }
.nav__brand { display:inline-flex; align-items:center; gap:12px; color:var(--char); }
.nav__brand:hover { text-decoration:none; }
.nav__brand svg { width:29px; height:29px; color:var(--saffron-ink); flex:none; }
.wordmark { display:flex; flex-direction:column; line-height:1.1; font-family:var(--font-display); font-size:1.3rem; font-weight:700; }
.wordmark small { font-family:var(--font-body); font-size:0.62rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
.nav__menu { display:flex; align-items:center; gap:30px; }
.nav__links { display:flex; align-items:center; gap:26px; }
.nav__links a { color:var(--char); font-size:0.89rem; font-weight:700; padding:6px 0; border-bottom:2px solid transparent; }
.nav__links a:hover { color:var(--saffron-ink); text-decoration:none; border-bottom-color:var(--turmeric); }
.nav__links a[aria-current="page"] { color:var(--saffron-ink); border-bottom-color:var(--turmeric); }
.nav__toggle { display:none; background:transparent; border:2px solid var(--border-firm); border-radius:var(--radius); width:48px; height:48px; cursor:pointer; color:var(--char); padding:0; place-items:center; }
.nav__toggle svg { width:22px; height:22px; }
.nav__toggle .icon-close { display:none; }
.nav[data-open="true"] .nav__toggle .icon-open { display:none; }
.nav[data-open="true"] .nav__toggle .icon-close { display:block; }
@media (max-width:930px){
  .nav__toggle { display:grid; }
  .nav__menu { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--cream); border-bottom:1px solid var(--border); padding:10px 20px 22px; transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity 0.2s var(--ease), transform 0.2s var(--ease); }
  .nav[data-open="true"] .nav__menu { transform:none; opacity:1; pointer-events:auto; }
  .nav__links { flex-direction:column; align-items:stretch; gap:0; }
  .nav__links a { padding:15px 0; border-bottom:1px solid var(--border); }
  .nav__cta { padding-top:18px; }
  .nav__cta .btn { width:100%; }
}

.section { padding:clamp(56px,8vw,100px) 0; }
.section--alt { background:var(--cream-alt); }
.section--char { background:var(--char); color:var(--cream); }
.section--char h2,.section--char h3,.section--char h4 { color:#fff; }
.section--char p { color:var(--cream-soft); }
.section--char a { color:var(--turmeric); }
.section--tight { padding:clamp(42px,6vw,70px) 0; }

.hero { position:relative; overflow:hidden; background:var(--char); color:var(--cream); padding:clamp(70px,11vw,140px) 0 clamp(58px,8vw,104px); }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 62% 56% at 18% 8%, rgba(245,158,11,0.24), transparent 68%), radial-gradient(ellipse 44% 44% at 88% 94%, rgba(168,50,8,0.30), transparent 70%); pointer-events:none; }
.hero .container { position:relative; }
.hero h1 { color:#fff; max-width:16ch; margin-bottom:22px; }
.hero h1 .accent { color:var(--turmeric); }
.hero__lead { max-width:580px; font-size:clamp(1.06rem,1rem+0.45vw,1.24rem); color:var(--cream-soft); }
.hero .btn-row { margin-top:32px; }
.hero__meta { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:44px; padding-top:30px; border-top:1px solid var(--char-line); font-size:0.88rem; color:var(--cream-soft); }
.hero__meta span { display:inline-flex; align-items:center; gap:9px; }
.hero__meta svg { width:16px; height:16px; color:var(--turmeric); flex:none; }

.page-head { background:var(--char); color:var(--cream); padding:clamp(48px,7vw,84px) 0 clamp(40px,5.5vw,64px); }
.page-head h1 { color:#fff; font-size:clamp(2.1rem,1.4rem+3vw,3.4rem); max-width:18ch; }
.page-head p { max-width:620px; color:var(--cream-soft); }

.crumbs { border-bottom:1px solid var(--border); background:var(--cream); font-size:0.83rem; color:var(--ink-soft); }
.crumbs ol { list-style:none; margin:0; padding:15px 0; display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.crumbs li { display:inline-flex; align-items:center; gap:9px; }
.crumbs li + li::before { content:"/"; color:var(--border-firm); }
.crumbs a { color:var(--ink-soft); }
.crumbs [aria-current="page"] { color:var(--char); font-weight:700; }

.grid { display:grid; gap:clamp(16px,2.2vw,26px); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; transition:border-color 0.22s var(--ease), transform 0.22s var(--ease); }
.card:hover { border-color:var(--turmeric); transform:translateY(-3px); }
.section--char .card { background:var(--char-raise); border-color:var(--char-line); }
.section--char .card p { color:var(--cream-soft); }
.card__icon { width:46px; height:46px; margin-bottom:18px; display:grid; place-items:center; border:2px solid var(--turmeric); border-radius:var(--radius); color:var(--saffron-ink); flex:none; }
.section--char .card__icon { color:var(--turmeric); }
.card__icon svg { width:22px; height:22px; }
.card h3 { margin-bottom:9px; }
.card p { color:var(--ink-soft); font-size:0.97rem; }
.card__link { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; color:var(--saffron-ink); }
.section--char .card__link { color:var(--turmeric); }
.card__link svg { width:15px; height:15px; transition:transform 0.18s var(--ease); }
.card:hover .card__link svg { transform:translateX(4px); }

.split { display:grid; gap:clamp(28px,4.6vw,64px); grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); align-items:center; }
.split--top { align-items:start; }

.rows { border-top:1px solid var(--border); margin:0; }
.section--char .rows, .tbc-block--dark .rows { border-top-color:var(--char-line); }
.row { display:grid; gap:6px 30px; grid-template-columns:minmax(180px,1fr) 2fr; padding:18px 0; border-bottom:1px solid var(--border); align-items:start; }
.section--char .row, .tbc-block--dark .row { border-bottom-color:var(--char-line); }
.row dt { font-weight:700; color:var(--char); margin:0; }
.section--char .row dt, .tbc-block--dark .row dt { color:#fff; }
.row dd { margin:0; color:var(--ink-soft); }
.section--char .row dd, .tbc-block--dark .row dd { color:var(--cream-soft); }
@media (max-width:620px){ .row { grid-template-columns:1fr; } }

.ticks { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ticks li { display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.ticks svg { width:19px; height:19px; color:var(--saffron-ink); flex:none; margin-top:3px; }
.section--char .ticks li { color:var(--cream-soft); }
.section--char .ticks svg { color:var(--turmeric); }

.callout { border-left:4px solid var(--turmeric); padding:4px 0 4px 22px; margin-top:26px; font-family:var(--font-display); font-size:clamp(1.18rem,1rem+0.8vw,1.58rem); line-height:1.32; color:var(--char); }
.section--char .callout { color:#fff; }

.cta { background:var(--saffron-ink); color:#fff; padding:clamp(48px,7vw,82px) 0; text-align:center; }
.cta h2 { color:#fff; }
.cta p { color:rgba(255,255,255,0.92); max-width:560px; margin-inline:auto; }
.cta .btn-row { margin-top:30px; justify-content:center; }
.cta a { color:#fff; }

.site-footer { background:var(--char-deep); color:var(--cream); padding:clamp(46px,6vw,72px) 0 0; }
.footer-grid { display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-bottom:38px; }
.footer-col h4 { font-size:0.71rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--turmeric); margin-bottom:16px; font-weight:700; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col a,.footer-col span { color:var(--cream-soft); font-size:0.94rem; }
.footer-col a:hover { color:#fff; }
.footer-col .blurb { color:var(--cream-soft); font-size:0.94rem; max-width:34ch; }
.footer-brand { display:inline-flex; align-items:center; gap:12px; color:#fff; margin-bottom:15px; }
.footer-brand:hover { text-decoration:none; }
.footer-brand svg { width:27px; height:27px; color:var(--turmeric); }
.footer-brand .wordmark small { color:var(--cream-soft); }
.footer-bottom { border-top:1px solid var(--char-line); padding:20px 0; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:0.85rem; color:var(--cream-soft); }

.demo-note { background:#0C0807; color:#A2948B; font-size:0.82rem; text-align:center; padding:15px 20px; margin:0; line-height:1.62; border-top:1px solid var(--char-line); }
.demo-note strong { color:var(--turmeric); }
.demo-note a { color:var(--turmeric); text-decoration:underline; }
.demo-note span.wrap { display:block; max-width:80ch; margin-inline:auto; }

/* Reveal — opt-in via a class set inline in the head. Never a bare
   `.reveal{opacity:0}`, which would hide the page when JS is off. */
.js-reveal .reveal { opacity:0; transform:translateY(16px); transition:opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity:1; transform:none; }
.js-reveal .reveal[data-delay="1"] { transition-delay:0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay:0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay:0.21s; }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  .js-reveal .reveal { opacity:1; transform:none; }
  .card:hover,.btn:hover { transform:none; }
}
@media print { .site-header,.cta,.demo-note { display:none !important; } body { background:#fff; } }