/* ==========================================================================
   Nakhal & Cie — public site
   Warm neutrals, cedar green, brass hairlines, serif display headings.
   All imagery is CSS (gradients + clip-path). No external assets, no CDN,
   no network fonts. Chat widget styling lives inside static/js/chat.js so the
   widget stays droppable into any third-party page (Stage 0 pilot).
   The design tokens below are also consumed by console.css.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --paper:      #fffdf8;
  --cream:      #f7f2e8;
  --stone:      #efe8da;
  --stone-deep: #e5dbc8;
  --line:       #ded4c1;
  --line-soft:  #ebe3d5;

  --ink:        #1c1913;
  --ink-2:      #423c32;
  --muted:      #79705f;
  --muted-2:    #9b9280;

  --green:      #1f4a37;
  --green-deep: #12301f;
  --green-mid:  #2f6b4f;
  --green-pale: #e6ede8;

  --burgundy:   #7a2b33;
  --brass:      #b28a4c;
  --brass-pale: #e9dcc2;

  --amber:      #a86a12;
  --amber-pale: #fbf0d9;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           "Noto Naskh Arabic", "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", "Noto Sans Arabic", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1160px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(28,25,19,.06), 0 2px 8px rgba(28,25,19,.04);
  --shadow-md: 0 2px 6px rgba(28,25,19,.07), 0 14px 34px rgba(28,25,19,.09);
  --shadow-lg: 0 6px 18px rgba(28,25,19,.10), 0 32px 70px rgba(28,25,19,.14);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display { font-family: var(--serif); color: var(--ink); font-weight: 400; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.16; letter-spacing: -.01em; }
h3 { font-size: 1.2rem; line-height: 1.3; }

::selection { background: var(--green); color: var(--paper); }
:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: var(--paper); padding: 12px 18px;
}
.skip:focus { left: 12px; top: 12px; }

/* --- shared bits -------------------------------------------------------- */
.eyebrow {
  font-size: .72rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--brass);
}
.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; }

.rule { width: 46px; height: 2px; background: var(--brass); margin-block: 20px; border: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border: 1px solid transparent; border-radius: 2px;
  font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn--primary { background: var(--green); color: var(--paper); }
.btn--primary:hover { background: var(--green-deep); }
.btn--ghost { border-color: rgba(255,253,248,.5); color: var(--paper); }
.btn--ghost:hover { background: rgba(255,253,248,.14); border-color: var(--paper); }
.btn--quiet { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn--quiet:hover { border-color: var(--brass); }

/* --- POC disclosure ribbon ---------------------------------------------
   The demo script requires that we disclose what is real and what is not,
   before anyone asks. It is built into the page, not left to the presenter. */
.poc-note {
  background: var(--amber-pale); border-bottom: 1px solid #e8d5a8;
  color: #6d4508; font-size: .76rem; letter-spacing: .04em;
}
.poc-note .wrap { display: flex; gap: 10px; align-items: center; min-height: 34px; flex-wrap: wrap; }
.poc-note strong { letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.utility {
  background: var(--green-deep); color: rgba(255,253,248,.78);
  font-size: .76rem; letter-spacing: .04em;
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.utility a { text-decoration: none; }
.utility a:hover { color: var(--paper); }
.langs { display: flex; align-items: center; gap: 14px; }
.langs [aria-current] { color: var(--paper); font-weight: 600; }
.utility__contact { display: flex; gap: 20px; align-items: center; }

.masthead { background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.masthead__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 22px;
}
.wordmark { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.wordmark__mark {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--green-mid), var(--green-deep) 78%);
  color: var(--brass-pale); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.28rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(178,138,76,.55);
}
.wordmark__name {
  font-family: var(--serif); font-size: 1.42rem; color: var(--ink);
  letter-spacing: .06em; line-height: 1.1;
}
.wordmark__sub {
  display: block; font-family: var(--sans); font-size: .64rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

.masthead__aside { display: flex; align-items: center; gap: 22px; }
.masthead__phone { text-align: right; line-height: 1.25; }
.masthead__phone small {
  display: block; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.masthead__phone strong {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-weight: 400;
}

.nav { border-top: 1px solid var(--line-soft); }
.nav ul { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; padding-block: 14px; }
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  text-decoration: none; white-space: nowrap; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green); border-bottom-color: var(--brass); }

/* ==========================================================================
   Hero — CSS-only Lebanese coast scene
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--paper); }
.hero__scene {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(52% 44% at 74% 16%, rgba(255,238,201,.92) 0%, rgba(255,224,168,.32) 42%, transparent 70%),
    linear-gradient(178deg, #1b3d52 0%, #2b5f70 34%, #4f8079 56%, #9c9c7c 100%);
}
/* far ridge */
.hero__scene::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,53,42,.42), rgba(22,53,42,.72));
  clip-path: polygon(0 62%, 9% 55%, 18% 60%, 27% 48%, 38% 57%, 49% 44%, 60% 55%, 71% 47%, 82% 58%, 92% 51%, 100% 59%, 100% 100%, 0 100%);
}
/* near ridge */
.hero__scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,42,29,.80), rgba(9,26,18,.96));
  clip-path: polygon(0 78%, 12% 71%, 22% 77%, 33% 66%, 45% 76%, 57% 68%, 68% 79%, 80% 70%, 90% 78%, 100% 72%, 100% 100%, 0 100%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -2; opacity: .16; pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-24deg, rgba(0,0,0,.10) 0 1px, transparent 1px 7px);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(9,24,17,.72) 0%, rgba(9,24,17,.44) 46%, rgba(9,24,17,.10) 100%);
}
.hero .wrap { position: relative; padding-block: clamp(84px, 13vw, 156px); }
.hero__inner { max-width: 660px; }
.hero .eyebrow { color: var(--brass-pale); }
.hero h1 { color: var(--paper); margin-top: 18px; }
.hero h1 em { font-style: italic; color: #f2dfb4; }
.hero p { margin-top: 22px; font-size: 1.12rem; color: rgba(255,253,248,.88); max-width: 50ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__proof {
  position: relative; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: rgba(255,253,248,.16);
  border-top: 1px solid rgba(255,253,248,.16);
}
.hero__proof div { background: rgba(9,24,17,.62); padding: 22px 24px; }
.hero__proof strong {
  display: block; font-family: var(--serif); font-size: 1.16rem;
  color: var(--paper); font-weight: 400;
}
.hero__proof span { font-size: .82rem; color: rgba(255,253,248,.68); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(58px, 8vw, 96px); }
.section--paper { background: var(--paper); }
.section--stone { background: var(--stone); }
.section__head { max-width: 62ch; margin-bottom: 44px; }
.section__head p { margin-top: 14px; color: var(--muted); }

/* --- business lines ----------------------------------------------------- */
.lines { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.line-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  overflow: hidden; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.line-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); }
.line-card__thumb { position: relative; height: 128px; overflow: hidden; }
.line-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(9,24,17,.34));
}
.line-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.line-card__body h3 { font-size: 1.14rem; }
.line-card__body p { font-size: .9rem; color: var(--muted); }
.line-card__go {
  margin-top: auto; padding-top: 12px; font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.line-card:hover .line-card__go { color: var(--burgundy); }

/* CSS-only card imagery — each line gets its own palette and pattern */
.thumb { position: absolute; inset: 0; }
.thumb--hotels {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 26px),
    linear-gradient(150deg, #3b5f78, #1f3a4a);
}
.thumb--tours {
  background:
    radial-gradient(38% 46% at 78% 24%, rgba(255,236,190,.7), transparent 62%),
    linear-gradient(160deg, #2f6b4f, #123326);
}
.thumb--tours::before {
  content: ""; position: absolute; inset: 0; background: rgba(6,20,13,.55);
  clip-path: polygon(0 74%, 16% 58%, 30% 72%, 44% 52%, 60% 70%, 74% 56%, 88% 71%, 100% 62%, 100% 100%, 0 100%);
}
.thumb--charter {
  background:
    repeating-linear-gradient(-38deg, rgba(255,255,255,.10) 0 3px, transparent 3px 16px),
    linear-gradient(140deg, #d08b3c, #8a3f2c);
}
.thumb--flights {
  background:
    radial-gradient(60% 70% at 22% 82%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(150deg, #29506e, #101f33);
}
.thumb--flights::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background:
    linear-gradient(78deg, transparent 46%, rgba(255,255,255,.5) 46.6%, transparent 47.4%),
    linear-gradient(78deg, transparent 62%, rgba(255,255,255,.28) 62.5%, transparent 63.1%);
}
.thumb--transfers {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #55524a, #23211d);
}
.thumb--transfers::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 26%; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,238,201,.85) 0 22px, transparent 22px 44px);
  transform: rotate(-3deg);
}
.thumb--cruises {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 2px, transparent 2px 14px),
    linear-gradient(165deg, #1d5c78, #0b2b3d);
}
.thumb--dmc {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 18px),
    linear-gradient(150deg, #4a3b63, #211a30);
}
.thumb--events {
  background:
    radial-gradient(24% 34% at 30% 30%, rgba(255,214,140,.75), transparent 64%),
    radial-gradient(20% 28% at 72% 62%, rgba(255,180,150,.55), transparent 66%),
    linear-gradient(150deg, #7a2b33, #2c0f14);
}

/* --- featured tours ----------------------------------------------------- */
.tours { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.tour {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--paper); text-decoration: none; isolation: isolate;
  border: 1px solid rgba(9,24,17,.18);
}
.tour__art { position: absolute; inset: 0; z-index: -2; }
.tour::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,24,17,0) 28%, rgba(9,24,17,.86) 92%);
}
.tour__body { padding: 26px 24px 24px; }
.tour__body h3 { color: var(--paper); font-size: 1.3rem; }
.tour__body p { font-size: .9rem; color: rgba(255,253,248,.8); margin-top: 8px; }
.tour__meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-pale);
}

.art--baalbek {
  background:
    radial-gradient(46% 40% at 70% 22%, rgba(255,231,178,.75), transparent 62%),
    linear-gradient(168deg, #c79a58 0%, #8d6236 44%, #3a2a1c 100%);
}
.art--baalbek::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(24,16,9,.42) 0 14px, transparent 14px 52px);
  clip-path: polygon(6% 100%, 6% 46%, 94% 46%, 94% 100%);
}
.art--byblos {
  background:
    radial-gradient(50% 44% at 26% 26%, rgba(255,246,214,.6), transparent 60%),
    linear-gradient(165deg, #2f7f96 0%, #1c5163 46%, #123241 100%);
}
.art--byblos::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, rgba(10,40,52,.2), rgba(8,28,38,.85));
}
.art--chouf {
  background:
    radial-gradient(44% 38% at 74% 20%, rgba(255,238,196,.55), transparent 64%),
    linear-gradient(168deg, #3f7d54 0%, #235238 48%, #10261a 100%);
}
.art--chouf::before {
  content: ""; position: absolute; inset: 0; background: rgba(8,24,15,.5);
  clip-path: polygon(0 68%, 14% 54%, 26% 66%, 40% 48%, 55% 64%, 68% 50%, 82% 65%, 100% 55%, 100% 100%, 0 100%);
}

/* --- about strip -------------------------------------------------------- */
.about { display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; align-items: center; }
.about__text h2 { margin-bottom: 6px; }
.about__text p { margin-top: 16px; color: var(--ink-2); }
.about__offices {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line);
}
.about__offices h4 {
  font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: var(--ink); margin: 0 0 4px;
}
.about__offices p { font-size: .88rem; color: var(--muted); margin-top: 4px; }

.about__plate {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 50% at 30% 24%, rgba(255,240,205,.85), transparent 62%),
    linear-gradient(158deg, #d8c7a4 0%, #b39a72 40%, #6b5a44 100%);
  box-shadow: var(--shadow-md);
}
.about__plate::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(48,36,22,.30) 0 10px, transparent 10px 46px),
    linear-gradient(180deg, transparent 52%, rgba(38,28,16,.55));
  clip-path: polygon(0 100%, 0 44%, 100% 30%, 100% 100%);
}
.about__plate::after {
  content: ""; position: absolute; inset: 0; opacity: .3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px);
}
.about__stamp {
  position: absolute; inset: auto 18px 18px auto; z-index: 2;
  font-family: var(--serif); font-size: .78rem; letter-spacing: .2em;
  color: rgba(255,253,248,.92); text-transform: uppercase;
  border: 1px solid rgba(255,253,248,.55); padding: 8px 14px; border-radius: 2px;
}

/* --- assurance strip ---------------------------------------------------- */
.assure { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.assure div { padding-top: 20px; border-top: 2px solid var(--brass); }
.assure h4 {
  font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--ink); margin-bottom: 8px;
}
.assure p { font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--green-deep); color: rgba(255,253,248,.72); padding-block: 62px 30px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
.footer h4 {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 16px; font-weight: 600;
}
.footer li + li { margin-top: 9px; }
.footer li { font-size: .9rem; }
.footer__brand .wordmark__name { color: var(--paper); }
.footer__brand p { margin-top: 16px; font-size: .9rem; max-width: 34ch; }
.footer__tel { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); }
.footer__base {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,253,248,.14);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: .78rem; color: rgba(255,253,248,.5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 18px; }
  .masthead__aside { display: none; }
  .utility__contact { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero .wrap { padding-block: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}