/* ============================================================
   IHG careers — concept design system (masterbrand-aligned)
   TMP pitch mockups · NOT a live IHG page · 8 July 2026
   Aligned to the IHG Hotels & Resorts masterbrand:
   warm orange + near-black on warm paper, editorial serif display.
   Exact brand tokens are in IHG's private brand book; these are a
   faithful approximation for concept mockups only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --ink:#1b1410;
  --ink-soft:#4a4038;
  --muted:#7a6d5e;
  --bg:#faf6f0;
  --paper:#ffffff;
  --sand:#f1e9dd;
  --sand-deep:#e8dccb;
  --border:#e6dccb;
  --border-strong:#d6c8b2;
  --orange:#e35205;
  --orange-deep:#b23a00;
  --orange-wash:#fceee4;
  --gold:#b5822f;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
  --shadow:0 1px 2px rgba(27,20,16,.04),0 8px 30px rgba(27,20,16,.06);
  --shadow-lift:0 2px 6px rgba(27,20,16,.06),0 18px 50px rgba(27,20,16,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* warm paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- concept ribbon ---------- */
.concept{
  background:var(--ink);color:var(--bg);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:6px 16px;font-weight:600;
}
.concept b{color:var(--orange)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08}
.display{font-size:clamp(40px,6.4vw,84px);font-weight:500;line-height:.98;letter-spacing:-.025em}
h1{font-size:clamp(34px,5vw,62px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,24px)}
.serif-it{font-style:italic;font-family:var(--serif)}
p{max-width:64ch}
.lead{font-size:clamp(18px,1.7vw,21px);color:var(--ink-soft);line-height:1.5}

.eyebrow{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep);
  font-weight:600;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--orange);display:inline-block}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
section{padding:clamp(56px,8vw,110px) 0}
.tight{padding:clamp(36px,5vw,64px) 0}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
@media(min-width:760px){.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}}

/* ---------- header / nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,246,240,.82);
     backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.nav .row{display:flex;align-items:center;gap:28px;height:70px}
.brand{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.02em;color:var(--ink);
       display:flex;align-items:center;gap:10px}
.brand .mark{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);
       font-family:var(--sans);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.nav nav{display:none;gap:26px;margin-left:8px}
.nav nav a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:6px 0;position:relative}
.nav nav a:hover{color:var(--ink)}
.nav nav a.active{color:var(--ink)}
.nav nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange)}
.nav .end{margin-left:auto;display:flex;align-items:center;gap:14px}
@media(min-width:940px){.nav nav{display:flex}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;
     font-size:15px;padding:13px 24px;border-radius:2px;cursor:pointer;border:1.5px solid transparent;
     transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-deep);box-shadow:0 10px 24px rgba(226,82,5,.28)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{background:#000}
.btn-ghost{border-color:var(--border-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper)}
.btn .arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.link{color:var(--orange-deep);font-weight:600;display:inline-flex;align-items:center;gap:7px;font-size:15px}
.link:hover{color:var(--orange)}

/* ---------- hero / photo placeholders ---------- */
.photo{position:relative;border-radius:6px;overflow:hidden;background:
   radial-gradient(120% 120% at 20% 10%, #f4c9a3 0%, #e79b5f 30%, #c05a1f 62%, #6e2f10 100%);
   min-height:320px;box-shadow:var(--shadow)}
.photo::after{content:attr(data-cap);position:absolute;left:14px;bottom:12px;color:rgba(255,255,255,.9);
   font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
   background:rgba(27,20,16,.28);padding:4px 9px;border-radius:2px;backdrop-filter:blur(3px)}
.photo.tall{min-height:520px}
.photo.alt{background:radial-gradient(120% 120% at 80% 0%, #e8dccb 0%, #cbb79b 40%, #8a6b46 100%)}
.photo.deep{background:radial-gradient(130% 130% at 30% 20%, #3a2a1e 0%, #241811 60%, #120b07 100%)}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--border);border-radius:5px;padding:26px;
      box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
.card .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);font-weight:600;margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}

/* path card (front door) */
.path{position:relative;display:flex;flex-direction:column;gap:14px;min-height:230px;
      background:var(--paper);border:1px solid var(--border);border-radius:5px;padding:26px;overflow:hidden;
      transition:transform .18s ease,box-shadow .18s ease}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.path .idx{font-family:var(--serif);font-size:15px;color:var(--muted)}
.path h3{font-size:26px}
.path p{color:var(--muted);font-size:14.5px;flex:1}
.path .go{color:var(--orange-deep);font-weight:600;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
      transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
.path:hover::before{transform:scaleY(1)}

/* ---------- suggestion banner (guided routing) ---------- */
.suggest{background:var(--orange-wash);border:1px solid #f2d3bd;border-radius:5px;
   display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 20px}
.suggest .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;
   box-shadow:0 0 0 4px rgba(226,82,5,.15)}
.suggest .txt{font-size:15px;color:var(--ink);flex:1;min-width:200px}
.suggest .txt b{font-weight:600}
.suggest .acts{display:flex;gap:10px;align-items:center}
.suggest .change{font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}
.suggest .change:hover{color:var(--ink)}

/* ---------- misc ---------- */
.tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 11px;
     border-radius:100px;background:var(--sand);color:var(--ink-soft);border:1px solid var(--border)}
.tag.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill-row{display:flex;flex-wrap:wrap;gap:9px}
.stat{font-family:var(--serif)}
.stat .n{font-size:clamp(34px,4.4vw,52px);color:var(--orange-deep);font-weight:500;line-height:1;letter-spacing:-.02em}
.stat .l{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:8px;display:block}
.rule{height:1px;background:var(--border);border:0;margin:0}
.quote{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.32;font-style:italic;color:var(--ink)}
.crumb{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--orange-deep)}
.crumb .sep{color:var(--border-strong)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#d9cfc2;padding:64px 0 30px;margin-top:20px}
.foot h4{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a99d8d;margin-bottom:16px;font-weight:600}
.foot a{color:#d9cfc2;font-size:14.5px;display:block;padding:5px 0}
.foot a:hover{color:#fff}
.foot .brand{color:#fff;font-size:26px}
.foot .brand .mark{background:var(--orange)}
.foot .fine{border-top:1px solid #3a2f25;margin-top:44px;padding-top:22px;font-size:12.5px;color:#8a7e6f;
     display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ---------- section on paper / sand ---------- */
.on-paper{background:var(--paper)}
.on-sand{background:var(--sand)}
.on-ink{background:var(--ink);color:var(--bg)}
.on-ink .lead{color:#cdbfae}
.on-ink h2,.on-ink h1{color:#fff}
.on-ink .eyebrow{color:#f0a06a}
.on-ink .eyebrow::before{background:var(--orange)}

/* reveal on load */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s}
}